/*
 * Nova Lens front-end styles.
 * Scoped under .etsykw so a host theme cannot bleed in, and vice versa.
 * Palette and type follow novaxventures.com: navy and indigo, gold for the
 * main action, electric blue for links and bars.
 */

.etsykw {
	--nl-navy: #14173F;
	--nl-indigo: #0A0C2B;
	--nl-gold: #E9B96E;
	--nl-gold-ink: #0A0C2B;
	--nl-blue: #3340F5;
	--nl-head: "Bricolage Grotesque", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--nl-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--nl-side-w: 272px;
	--nl-top: 0px;

	--kw-bg: #f5f6fb;
	--kw-card: #ffffff;
	--kw-panel: #f3f4f9;
	--kw-panel-2: #ffffff;
	--kw-line: #e4e6ef;
	--kw-line-soft: #eef0f6;
	--kw-ink: #0A0C2B;
	--kw-ink-2: #4b5070;
	--kw-ink-3: #8a8fa8;
	--kw-accent: #3340F5;
	--kw-accent-soft: #eceeff;
	--kw-good: #12805c;
	--kw-good-soft: #e5f5ee;
	--kw-warn: #a86a00;
	--kw-warn-soft: #fdf2dc;
	--kw-bad: #c0392b;
	--kw-bad-soft: #fdecea;
	--kw-info: #3340F5;
	--kw-info-soft: #eceeff;
	--kw-radius: 16px;
	--kw-radius-sm: 10px;
	--kw-shadow: 0 1px 2px rgba(10, 12, 43, .04), 0 14px 30px -26px rgba(10, 12, 43, .45);

	box-sizing: border-box;
	color: var(--kw-ink);
	background: var(--kw-bg);
	container-name: nl;
	container-type: inline-size;
	font-family: var(--nl-body);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.etsykw *,
.etsykw *::before,
.etsykw *::after {
	box-sizing: border-box;
}

.admin-bar .etsykw {
	--nl-top: 32px;
}

/* Dark body, applied explicitly, or by system preference on "auto". The
   sidebar and hero are navy in both. */
.etsykw[data-theme="dark"],
.etsykw.is-dark {
	--kw-bg: #0b0d26;
	--kw-card: #14173F;
	--kw-panel: #1a1e4c;
	--kw-panel-2: #171a45;
	--kw-line: #272c5e;
	--kw-line-soft: #20244f;
	--kw-ink: #eceef8;
	--kw-ink-2: #a9aed3;
	--kw-ink-3: #727799;
	--kw-accent: #7c84ff;
	--kw-accent-soft: #1f2460;
	--kw-good: #4cc38a;
	--kw-good-soft: #10291f;
	--kw-warn: #e9b96e;
	--kw-warn-soft: #2e2617;
	--kw-bad: #f07a6b;
	--kw-bad-soft: #321a20;
	--kw-info: #8d94ff;
	--kw-info-soft: #1f2460;
	--kw-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.etsykw--full {
	max-width: none;
}

/* WordPress's wpautop can still inject <br> and empty <p> into shortcode
   output on some page builders. None of it belongs in the shell. */
.nl-side br,
.nl-hero br,
.etsykw-foot br,
.etsykw > p:empty,
.nl-wrap > p:empty {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.nl-shell {
	display: block;
}

.nl-main {
	min-width: 0;
}

.nl-wrap {
	margin: 0 auto;
	max-width: 1240px;
	width: 100%;
}

.nl-body {
	padding: 26px 16px 40px;
}

/* ------------------------------------------------------------------ */
/* Sidebar (desktop) and menu sheet (phones)                           */
/* ------------------------------------------------------------------ */

.nl-side {
	background: linear-gradient(180deg, var(--nl-navy) 0%, var(--nl-indigo) 100%);
	color: #a9aed3;
	position: relative;
	z-index: 30;
}

.nl-side button {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	height: auto;
	letter-spacing: normal;
	line-height: 1.3;
	margin: 0;
	min-height: 0;
	min-width: 0;
	text-align: left;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	width: auto;
}

.nl-side button:hover,
.nl-side button:focus {
	background: none;
	box-shadow: none;
	color: inherit;
}

.nl-side button:focus-visible {
	outline: 2px solid var(--nl-gold);
	outline-offset: 1px;
}

.etsykw-ico {
	display: block;
	flex: none;
}

/* Phone bar: menu button plus saved count. */
.nl-mbar {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
}

.nl-side .nl-toggle,
.nl-side .nl-msaved {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 15px;
	font-weight: 600;
	gap: 9px;
	height: 46px;
	padding: 0 13px;
}

.nl-side .nl-toggle {
	flex: 1 1 auto;
	min-width: 0;
}

.nl-current {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nl-toggle .etsykw-ico:last-child {
	color: #9ea3c7;
	transition: transform .2s;
}

.nl-side.is-open .nl-toggle {
	border-color: var(--nl-gold);
}

.nl-side.is-open .nl-toggle .etsykw-ico:last-child {
	transform: rotate(180deg);
}

.nl-side .nl-msaved {
	color: #c9cbe0;
}

.nl-badge {
	background: var(--nl-gold);
	border-radius: 999px;
	color: var(--nl-gold-ink);
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: 18px;
	margin-left: auto;
	min-width: 20px;
	padding: 0 6px;
	text-align: center;
}

.nl-badge[hidden] {
	display: none;
}

.nl-nav {
	display: none;
	padding: 2px 16px 16px;
}

.nl-side.is-open .nl-nav {
	display: block;
}

.nl-grp {
	align-items: center;
	display: flex;
	gap: 10px;
	margin: 14px 2px 8px;
}

.nl-grp::after {
	background: rgba(255, 255, 255, .08);
	content: "";
	flex: 1;
	height: 1px;
}

.nl-grp em {
	color: #6f74a0;
	font-size: 10.5px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.nl-items {
	display: grid;
	gap: 6px;
	grid-template-columns: 1fr 1fr;
}

.nl-side .nl-item {
	align-items: center;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 10px;
	color: #c9cbe0;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
	padding: 10px;
	position: relative;
	transition: background .15s, color .15s;
}

.nl-side .nl-item .etsykw-ico {
	color: #9ea3c7;
	height: 17px;
	width: 17px;
}

.nl-side .nl-item:hover {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.nl-side .nl-item.is-active {
	background: rgba(233, 185, 110, .12);
	border-color: var(--nl-gold);
	color: var(--nl-gold);
}

.nl-side .nl-item.is-active .etsykw-ico {
	color: var(--nl-gold);
}

.nl-item__label {
	min-width: 0;
}

.nl-budget {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.nl-hero {
	background:
		radial-gradient(60% 120% at 92% -10%, rgba(51, 64, 245, .55) 0%, rgba(51, 64, 245, 0) 60%),
		radial-gradient(40% 80% at 10% 120%, rgba(51, 64, 245, .25) 0%, rgba(51, 64, 245, 0) 60%),
		linear-gradient(160deg, var(--nl-navy) 0%, var(--nl-indigo) 70%);
	color: #fff;
	overflow: hidden;
	padding: 30px 16px 30px;
	position: relative;
}

.nl-stars {
	height: 100%;
	inset: 0;
	opacity: .55;
	pointer-events: none;
	position: absolute;
	width: 100%;
}

.nl-stars line {
	stroke: rgba(158, 163, 199, .18);
	stroke-width: 1;
}

.nl-stars circle {
	fill: rgba(201, 203, 224, .7);
}

.nl-stars circle.g {
	fill: var(--nl-gold);
}

.nl-hero > .nl-wrap {
	position: relative;
}

.nl-head {
	align-items: center;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.nl-sample {
	background: rgba(233, 185, 110, .14);
	border: 1px solid rgba(233, 185, 110, .4);
	border-radius: 999px;
	color: var(--nl-gold);
	cursor: help;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	margin-bottom: 14px;
	padding: 4px 12px;
	text-transform: uppercase;
}

.nl-sample[hidden] {
	display: none;
}

.etsykw .nl-name {
	background: linear-gradient(180deg, #fff 30%, #c9cbe0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--nl-head);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.02;
	margin: 0;
	padding: 0;
	text-transform: none;
}

.nl-tool {
	align-items: center;
	color: var(--nl-gold);
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 9px;
	letter-spacing: .1em;
	margin-top: 12px;
	text-transform: uppercase;
}

.nl-tool::before,
.nl-tool::after {
	background: rgba(233, 185, 110, .45);
	content: "";
	height: 1px;
	width: 24px;
}

.etsykw .nl-desc {
	color: #b7bbd9;
	font-size: 14.5px;
	margin: 10px 0 0;
	max-width: 560px;
}

.nl-slot {
	margin-top: 20px;
}

.nl-slot:empty {
	display: none;
}

/* Single / bulk switch, sitting in the hero. */
.nl-slot .etsykw-seg {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .12);
	margin: 0 auto 16px;
	max-width: 460px;
}

.nl-slot .etsykw-seg__btn b {
	color: #c9cbe0;
	text-align: center;
}

.nl-slot .etsykw-seg__btn span {
	color: #8f94bd;
	text-align: center;
}

.etsykw .nl-slot .etsykw-seg__btn.is-on,
.etsykw .nl-slot .etsykw-seg__btn.is-on:hover,
.etsykw .nl-slot .etsykw-seg__btn.is-on:focus {
	background: var(--nl-gold);
	box-shadow: none;
}

.nl-slot .etsykw-seg__btn.is-on b,
.nl-slot .etsykw-seg__btn.is-on span {
	color: var(--nl-gold-ink);
}

/* A short form becomes one white search bar. */
.nl-slot form.nl-bar,
.nl-slot form.nl-card {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
	color: var(--kw-ink);
	margin: 0;
}

.nl-slot form.nl-bar {
	gap: 8px;
	padding: 10px;
}

.nl-slot form.nl-bar .etsykw-label {
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* A longer form keeps its labels and becomes a card. */
.nl-slot form.nl-card {
	padding: 16px;
}

.nl-slot form.etsykw-bulk__input {
	border: 0;
	margin: 0;
}

/* Keep form fields light inside the white hero card, whatever the theme. */
.etsykw .nl-slot form input[type="text"],
.etsykw .nl-slot form input[type="number"],
.etsykw .nl-slot form input[type="search"],
.etsykw .nl-slot form select,
.etsykw .nl-slot form textarea {
	background: #fff;
	border-color: #e4e6ef;
	color: #0A0C2B;
}

.nl-slot form .etsykw-label {
	color: #8a8fa8;
}

/* Footer note */
.etsykw-foot {
	border-top: 1px solid var(--kw-line);
	color: var(--kw-ink-3);
	font-size: 12px;
	margin-top: 28px;
	padding-top: 14px;
}

/* ------------------------------------------------------------------ */
/* Wide layout: fixed sidebar, centred content, one bar search         */
/* ------------------------------------------------------------------ */

@container nl (min-width: 1025px) {
	.nl-shell {
		background: linear-gradient(90deg, var(--nl-indigo) 0 var(--nl-side-w), transparent var(--nl-side-w));
		display: grid;
		grid-template-columns: var(--nl-side-w) minmax(0, 1fr);
	}

	.nl--nonav .nl-shell {
		background: none;
		grid-template-columns: minmax(0, 1fr);
	}

	.nl-side {
		align-self: start;
		border-right: 1px solid rgba(255, 255, 255, .06);
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - var(--nl-top));
		overflow-y: auto;
		padding: 22px 14px 18px;
		position: sticky;
		scrollbar-width: thin;
		top: var(--nl-top);
	}

	.nl-mbar {
		display: none;
	}

	.nl-nav,
	.nl-side.is-open .nl-nav {
		display: block;
		padding: 0;
	}

	.nl-grp {
		margin: 18px 10px 8px;
	}

	.nl-grp:first-child {
		margin-top: 2px;
	}

	.nl-items {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.nl-side .nl-item {
		background: none;
		border: 0;
		border-radius: 12px;
		color: #a9aed3;
		font-size: 14.5px;
		font-weight: 550;
		gap: 14px;
		height: 42px;
		padding: 0 16px;
		white-space: nowrap;
	}

	.nl-side .nl-item .etsykw-ico {
		color: currentColor;
		height: 20px;
		width: 20px;
	}

	.nl-side .nl-item:hover {
		background: rgba(255, 255, 255, .06);
		color: #fff;
	}

	.nl-side .nl-item.is-active {
		background: rgba(233, 185, 110, .14);
		color: var(--nl-gold);
	}

	.nl-side .nl-item.is-active::before {
		background: var(--nl-gold);
		border-radius: 0 3px 3px 0;
		bottom: 10px;
		content: "";
		left: -14px;
		position: absolute;
		top: 10px;
		width: 3px;
	}

	.nl-budget:not([hidden]) {
		align-items: center;
		border-top: 1px solid rgba(255, 255, 255, .08);
		display: flex;
		gap: 12px;
		margin-top: 18px;
		padding: 16px 6px 0;
	}

	.nl-budget svg {
		flex: none;
		height: 44px;
		width: 44px;
	}

	.nl-budget__track {
		fill: none;
		stroke: rgba(255, 255, 255, .1);
		stroke-width: 5;
	}

	.nl-budget__fill {
		fill: none;
		stroke: var(--nl-gold);
		stroke-linecap: round;
		stroke-width: 5;
		transition: stroke-dashoffset .4s ease;
	}

	.nl-budget__pct {
		fill: #fff;
		font-family: var(--nl-body);
		font-size: 10.5px;
		font-weight: 700;
	}

	.nl-budget b {
		color: #fff;
		display: block;
		font-size: 13px;
	}

	.nl-budget span {
		color: #9ea3c7;
		font-size: 11.5px;
	}

	.nl-hero {
		padding: 46px 48px 48px;
	}

	.etsykw .nl-name {
		font-size: 60px;
	}

	.etsykw .nl-desc {
		font-size: 15.5px;
	}

	.nl-slot {
		margin-top: 24px;
	}

	.nl-body {
		padding: 30px 48px 60px;
	}

	.nl-slot form.nl-bar {
		flex-wrap: nowrap;
		gap: 0;
		padding: 8px;
	}

	.nl-slot form.nl-bar .etsykw-field {
		flex: 1 1 auto;
	}

	.nl-slot form.nl-bar .etsykw-field + .etsykw-field:not(.etsykw-field--narrow) {
		border-left: 1px solid #e4e6ef;
		flex: 0 1 260px;
	}

	.etsykw .nl-slot form.nl-bar input,
	.etsykw .nl-slot form.nl-bar select {
		background: transparent;
		border: 0;
		border-radius: 0;
		font-size: 16px;
		height: 54px;
		outline: none;
		padding: 0 16px;
	}

	.nl-slot form.nl-bar .etsykw-field--narrow {
		flex: 0 0 auto;
	}

	.etsykw .nl-slot form.nl-bar .etsykw-btn {
		height: 54px;
		padding: 0 28px;
	}
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

.etsykw-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	align-items: flex-end;
}

.etsykw-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 220px;
	min-width: 0;
}

.etsykw-field--narrow {
	flex: 0 1 140px;
}

.etsykw-label {
	color: var(--kw-ink-2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.etsykw input[type="text"],
.etsykw input[type="number"],
.etsykw input[type="search"],
.etsykw select,
.etsykw textarea {
	background: var(--kw-panel-2);
	border: 1px solid var(--kw-line);
	border-radius: var(--kw-radius-sm);
	color: var(--kw-ink);
	font: inherit;
	font-size: 15px;
	padding: 11px 13px;
	width: 100%;
	max-width: 100%;
}

.etsykw textarea {
	min-height: 86px;
	resize: vertical;
}

.etsykw input:focus,
.etsykw select:focus,
.etsykw textarea:focus {
	border-color: var(--kw-accent);
	outline: 2px solid var(--kw-accent-soft);
	outline-offset: 0;
}

.etsykw-btn {
	appearance: none;
	background: var(--kw-accent);
	border: 1px solid var(--kw-accent);
	border-radius: var(--kw-radius-sm);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 11px 24px;
	white-space: nowrap;
	transition: filter .15s;
}

.etsykw-btn:hover {
	filter: brightness(1.08);
}

.etsykw-btn:disabled {
	cursor: not-allowed;
	opacity: .55;
}

.etsykw-btn--ghost {
	background: transparent;
	border-color: var(--kw-line);
	color: var(--kw-ink-2);
	font-weight: 500;
	padding: 7px 13px;
}

.etsykw-btn--ghost:hover {
	border-color: var(--kw-ink-3);
	color: var(--kw-ink);
	filter: none;
}

.etsykw-btn--sm {
	font-size: 12px;
	padding: 5px 10px;
}

/* ------------------------------------------------------------------ */
/* Layout primitives                                                   */
/* ------------------------------------------------------------------ */

.etsykw-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin-bottom: 20px;
}

.etsykw-cols {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	margin-bottom: 20px;
}

.etsykw-card {
	background: var(--kw-panel);
	border: 1px solid var(--kw-line);
	border-radius: var(--kw-radius);
	padding: 16px;
}

.etsykw-card__head {
	align-items: baseline;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	margin-bottom: 12px;
}

.etsykw-card__title {
	font-size: 13px;
	font-weight: 650;
	letter-spacing: .03em;
	margin: 0;
	text-transform: uppercase;
	color: var(--kw-ink-2);
}

.etsykw-note {
	color: var(--kw-ink-3);
	font-size: 12px;
	line-height: 1.5;
	margin: 10px 0 0;
}

.etsykw-note--inline {
	margin: 0 0 14px;
}

/* Stat tile */

.etsykw-stat {
	background: var(--kw-panel);
	border: 1px solid var(--kw-line);
	border-radius: var(--kw-radius);
	padding: 14px 16px;
}

.etsykw-stat__label {
	align-items: center;
	color: var(--kw-ink-2);
	display: flex;
	font-size: 11px;
	font-weight: 650;
	gap: 5px;
	letter-spacing: .05em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.etsykw-stat__value {
	font-size: 26px;
	font-weight: 650;
	letter-spacing: -.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.etsykw-stat__value--na {
	color: var(--kw-ink-3);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
}

.etsykw-stat__hint {
	color: var(--kw-ink-3);
	font-size: 12px;
	margin-top: 4px;
}

/* Badges */

.etsykw-badge {
	border-radius: 999px;
	display: inline-block;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .03em;
	padding: 2px 9px;
	text-transform: uppercase;
	white-space: nowrap;
}

.etsykw-badge--good {
	background: var(--kw-good-soft);
	color: var(--kw-good);
}

.etsykw-badge--warn {
	background: var(--kw-warn-soft);
	color: var(--kw-warn);
}

.etsykw-badge--bad {
	background: var(--kw-bad-soft);
	color: var(--kw-bad);
}

.etsykw-badge--info {
	background: var(--kw-info-soft);
	color: var(--kw-info);
}

.etsykw-badge--mute {
	background: var(--kw-line-soft);
	color: var(--kw-ink-3);
}

/* ------------------------------------------------------------------ */
/* Gauge                                                               */
/* ------------------------------------------------------------------ */

.etsykw-gauge {
	align-items: center;
	display: flex;
	gap: 16px;
}

.etsykw-gauge__dial {
	flex: 0 0 auto;
	height: 96px;
	position: relative;
	width: 96px;
}

.etsykw-gauge__dial svg {
	display: block;
	height: 100%;
	width: 100%;
	transform: rotate(-90deg);
}

.etsykw-gauge__track {
	fill: none;
	stroke: var(--kw-line);
	stroke-width: 9;
}

.etsykw-gauge__fill {
	fill: none;
	stroke-linecap: round;
	stroke-width: 9;
	transition: stroke-dashoffset .5s ease;
}

.etsykw-gauge__num {
	align-items: center;
	display: flex;
	flex-direction: column;
	inset: 0;
	justify-content: center;
	position: absolute;
}

.etsykw-gauge__num b {
	font-size: 24px;
	font-weight: 650;
	letter-spacing: -.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.etsykw-gauge__num span {
	color: var(--kw-ink-3);
	font-size: 10px;
	font-weight: 650;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.etsykw-gauge__meta {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.etsykw-gauge__row {
	display: flex;
	font-size: 13px;
	gap: 8px;
	justify-content: space-between;
}

.etsykw-gauge__row dt {
	color: var(--kw-ink-2);
	margin: 0;
}

.etsykw-gauge__row dd {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Bar charts                                                          */
/* ------------------------------------------------------------------ */

.etsykw-bars {
	align-items: flex-end;
	display: flex;
	gap: 4px;
	height: 150px;
	margin-bottom: 8px;
}

.etsykw-bars__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 5px;
	height: 100%;
	min-width: 0;
	position: relative;
}

/* The bar sizes itself against this slot, so a full-height bar cannot push
   its caption below the baseline. */
.etsykw-bars__slot {
	align-items: flex-end;
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}

.etsykw-bars__bar {
	background: var(--kw-accent);
	border-radius: 4px 4px 2px 2px;
	min-height: 2px;
	opacity: .85;
	transition: opacity .15s;
	width: 100%;
}

.etsykw-bars__item:hover .etsykw-bars__bar {
	opacity: 1;
}

.etsykw-bars__cap {
	color: var(--kw-ink-3);
	font-size: 10px;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.etsykw-hbars {
	display: grid;
	gap: 9px;
}

.etsykw-hbar {
	align-items: center;
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(90px, 160px) 1fr auto;
}

.etsykw-hbar__label {
	color: var(--kw-ink);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.etsykw-hbar__track {
	background: var(--kw-line-soft);
	border-radius: 999px;
	height: 9px;
	overflow: hidden;
}

.etsykw-hbar__fill {
	background: var(--kw-accent);
	border-radius: 999px;
	height: 100%;
	transition: width .4s ease;
}

.etsykw-hbar__fill--good {
	background: var(--kw-good);
}

.etsykw-hbar__fill--warn {
	background: var(--kw-warn);
}

.etsykw-hbar__fill--bad {
	background: var(--kw-bad);
}

.etsykw-hbar__value {
	color: var(--kw-ink-2);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	min-width: 44px;
	text-align: right;
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

.etsykw-tablewrap {
	border: 1px solid var(--kw-line);
	border-radius: var(--kw-radius);
	margin-bottom: 20px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.etsykw-table {
	border-collapse: collapse;
	font-size: 13px;
	min-width: 100%;
	width: 100%;
}

.etsykw-table th,
.etsykw-table td {
	border-bottom: 1px solid var(--kw-line-soft);
	padding: 9px 12px;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

.etsykw-table thead th {
	background: var(--kw-panel);
	color: var(--kw-ink-2);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .04em;
	position: sticky;
	text-transform: uppercase;
	top: 0;
	z-index: 1;
}

.etsykw-table thead th.is-sortable {
	cursor: pointer;
	user-select: none;
}

.etsykw-table thead th.is-sortable:hover {
	color: var(--kw-ink);
}

.etsykw-table tbody tr:hover {
	background: var(--kw-panel);
}

.etsykw-table tbody tr:last-child td {
	border-bottom: 0;
}

.etsykw-table .is-num {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.etsykw-table .is-wide {
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.etsykw-table a {
	color: var(--kw-info);
	text-decoration: none;
}

.etsykw-table a:hover {
	text-decoration: underline;
}

.etsykw-na {
	color: var(--kw-ink-3);
}

/* ------------------------------------------------------------------ */
/* Listing cards                                                       */
/* ------------------------------------------------------------------ */

.etsykw-items {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	margin-bottom: 20px;
}

.etsykw-item {
	background: var(--kw-panel);
	border: 1px solid var(--kw-line);
	border-radius: var(--kw-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.etsykw-item__img {
	aspect-ratio: 1 / 1;
	background: var(--kw-line-soft);
	display: block;
	object-fit: cover;
	width: 100%;
}

.etsykw-item__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 11px 12px 12px;
}

.etsykw-item__title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--kw-ink);
	display: -webkit-box;
	font-size: 13px;
	font-weight: 550;
	line-height: 1.35;
	overflow: hidden;
	text-decoration: none;
}

.etsykw-item__title:hover {
	color: var(--kw-accent);
}

.etsykw-item__shop {
	color: var(--kw-ink-3);
	font-size: 11px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.etsykw-item__meta {
	color: var(--kw-ink-2);
	display: flex;
	flex-wrap: wrap;
	font-size: 11px;
	gap: 4px 10px;
	margin-top: auto;
	font-variant-numeric: tabular-nums;
}

.etsykw-item__price {
	color: var(--kw-ink);
	font-size: 14px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Audit checks                                                        */
/* ------------------------------------------------------------------ */

.etsykw-checks {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.etsykw-check {
	align-items: flex-start;
	background: var(--kw-panel);
	border: 1px solid var(--kw-line);
	border-left-width: 3px;
	border-radius: var(--kw-radius-sm);
	display: grid;
	gap: 2px 12px;
	grid-template-columns: 1fr auto;
	padding: 11px 13px;
}

.etsykw-check.is-pass {
	border-left-color: var(--kw-good);
}

.etsykw-check.is-fail {
	border-left-color: var(--kw-bad);
}

.etsykw-check__label {
	font-size: 14px;
	font-weight: 600;
}

.etsykw-check__advice {
	color: var(--kw-ink-2);
	font-size: 13px;
	grid-column: 1 / -1;
}

.etsykw-check__value {
	color: var(--kw-ink-3);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Tag pills                                                           */
/* ------------------------------------------------------------------ */

.etsykw-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.etsykw-pill {
	align-items: center;
	background: var(--kw-panel-2);
	border: 1px solid var(--kw-line);
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 12px;
	gap: 6px;
	padding: 4px 11px;
	color: var(--kw-ink);
}

.etsykw-pill:hover {
	border-color: var(--kw-accent);
	color: var(--kw-accent);
}

.etsykw-pill b {
	color: var(--kw-ink-3);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* States                                                              */
/* ------------------------------------------------------------------ */

.etsykw-sample {
	align-items: baseline;
	background: var(--kw-warn-soft);
	border: 1px solid var(--kw-warn);
	border-radius: var(--kw-radius-sm);
	color: var(--kw-warn);
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 4px 8px;
	margin-bottom: 16px;
	padding: 10px 14px;
}

.etsykw-sample strong {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.etsykw-skeleton {
	display: grid;
	gap: 12px;
}

.etsykw-skeleton span {
	background: linear-gradient(90deg, var(--kw-line-soft) 25%, var(--kw-line) 37%, var(--kw-line-soft) 63%);
	background-size: 400% 100%;
	border-radius: var(--kw-radius-sm);
	display: block;
	height: 56px;
	animation: etsykw-shimmer 1.4s ease-in-out infinite;
}

.etsykw-skeleton span:first-child {
	height: 88px;
}

@keyframes etsykw-shimmer {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.etsykw-skeleton span {
		animation: none;
	}

	.etsykw-hbar__fill,
	.etsykw-gauge__fill {
		transition: none;
	}
}

.etsykw-empty,
.etsykw-error {
	border: 1px dashed var(--kw-line);
	border-radius: var(--kw-radius);
	color: var(--kw-ink-2);
	font-size: 14px;
	padding: 44px 24px;
	text-align: center;
}

.etsykw-empty {
	background: var(--kw-panel);
}

.etsykw-error {
	background: var(--kw-bad-soft);
	border-color: var(--kw-bad);
	border-style: solid;
	color: var(--kw-bad);
	text-align: left;
}

.etsykw-empty__examples {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
	margin-top: 16px;
}

.etsykw-empty .etsykw-empty__hint {
	color: var(--kw-ink-3);
	display: block;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .08em;
	margin-top: 22px;
	text-transform: uppercase;
}

.etsykw-empty strong {
	color: var(--kw-ink);
	display: block;
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -.01em;
	margin-bottom: 6px;
}

.etsykw-empty > span {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 520px;
}

.etsykw-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	margin-bottom: 12px;
}

.etsykw-toolbar__group {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.etsykw-count {
	color: var(--kw-ink-3);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Fee calculator result block */

.etsykw-fees {
	display: grid;
	gap: 6px;
}

.etsykw-fees__row {
	display: flex;
	font-size: 14px;
	gap: 10px;
	justify-content: space-between;
	padding: 5px 0;
}

.etsykw-fees__row dt {
	color: var(--kw-ink-2);
	margin: 0;
}

.etsykw-fees__row dd {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin: 0;
}

.etsykw-fees__row--total {
	border-top: 1px solid var(--kw-line);
	font-weight: 650;
	margin-top: 4px;
	padding-top: 10px;
}

.etsykw-fees__row--total dt,
.etsykw-fees__row--total dd {
	color: var(--kw-ink);
	font-size: 16px;
}

.etsykw-keep {
	background: var(--kw-good-soft);
	border-radius: var(--kw-radius);
	margin-top: 12px;
	padding: 14px 16px;
}

.etsykw-keep__label {
	color: var(--kw-good);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.etsykw-keep__value {
	color: var(--kw-good);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.etsykw-check__label small,
.etsykw-stat__label abbr {
	cursor: help;
	text-decoration: none;
	border-bottom: 1px dotted var(--kw-ink-3);
}

/* Mobile */

/* ------------------------------------------------------------------ */
/* Keywords: single / bulk switch and bulk mode                        */
/* ------------------------------------------------------------------ */

.etsykw-seg {
	background: var(--kw-panel);
	border: 1px solid var(--kw-line);
	border-radius: 14px;
	display: grid;
	gap: 4px;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 18px;
	max-width: 560px;
	padding: 4px;
}

.etsykw-seg__btn {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 10px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 9px 14px;
	text-align: left;
	transition: background .15s, box-shadow .15s;
}

.etsykw-seg__btn b {
	color: var(--kw-ink-2);
	display: block;
	font-size: 14px;
	font-weight: 650;
}

.etsykw-seg__btn span {
	color: var(--kw-ink-3);
	display: block;
	font-size: 12px;
	line-height: 1.35;
}

.etsykw-seg__btn:hover b {
	color: var(--kw-ink);
}

.etsykw-seg__btn.is-on {
	background: var(--kw-panel-2);
	box-shadow: var(--kw-shadow);
}

.etsykw-seg__btn.is-on b {
	color: var(--kw-accent);
}

.etsykw-sr {
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.etsykw-bulk__input {
	margin-bottom: 18px;
}

.etsykw-bulk__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin-bottom: 12px;
}

.etsykw-pill-tabs {
	background: var(--kw-panel-2);
	border: 1px solid var(--kw-line);
	border-radius: 999px;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
}

.etsykw-pill-tab {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 999px;
	color: var(--kw-ink-2);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
}

.etsykw-pill-tab.is-on {
	background: var(--kw-accent);
	color: #fff;
}

.etsykw-bulk__pane[hidden] {
	display: none;
}

.etsykw-bulk textarea {
	font-size: 14px;
	line-height: 1.6;
	min-height: 170px;
}

.etsykw-bulk__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.etsykw-bulk__run {
	align-items: flex-end;
	border-top: 1px solid var(--kw-line);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
}

.etsykw-count--over {
	color: var(--kw-warn);
	font-weight: 600;
}

/* CSV upload */
.etsykw-drop {
	align-items: center;
	background: var(--kw-panel-2);
	border: 2px dashed var(--kw-line);
	border-radius: 14px;
	color: var(--kw-ink-2);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 34px 18px;
	text-align: center;
	transition: border-color .15s, background .15s;
}

.etsykw-drop:hover,
.etsykw-drop:focus-visible,
.etsykw-drop.is-over {
	background: var(--kw-accent-soft);
	border-color: var(--kw-accent);
	outline: none;
}

.etsykw-drop__icon {
	color: var(--kw-accent);
	margin-bottom: 2px;
}

.etsykw-drop strong {
	color: var(--kw-ink);
	font-size: 15px;
}

.etsykw-drop > span:last-child {
	color: var(--kw-ink-3);
	font-size: 12.5px;
	max-width: 460px;
}

.etsykw-file {
	align-items: center;
	background: var(--kw-panel-2);
	border: 1px solid var(--kw-line);
	border-radius: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 12px;
}

.etsykw-file__icon {
	align-items: center;
	background: var(--kw-accent-soft);
	border-radius: 9px;
	color: var(--kw-accent);
	display: flex;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.etsykw-file__meta {
	display: flex;
	flex: 1 1 160px;
	flex-direction: column;
	min-width: 0;
}

.etsykw-file__meta strong {
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.etsykw-file__meta span {
	color: var(--kw-ink-3);
	font-size: 12px;
}

.etsykw-csvctl {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	margin: 14px 0 12px;
}

.etsykw-csvctl .etsykw-field {
	flex: 1 1 280px;
	max-width: 460px;
}

.etsykw-headerchk {
	align-items: center;
	color: var(--kw-ink-2);
	cursor: pointer;
	display: inline-flex;
	font-size: 13.5px;
	gap: 8px;
	padding-bottom: 12px;
}

.etsykw-headerchk input {
	accent-color: var(--kw-accent);
	height: 17px;
	margin: 0;
	width: 17px;
}

.etsykw-csvgrid__wrap {
	background: var(--kw-panel-2);
	border: 1px solid var(--kw-line);
	border-radius: 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.etsykw-csvgrid {
	border-collapse: collapse;
	font-size: 12.5px;
	min-width: 100%;
}

.etsykw-csvgrid th,
.etsykw-csvgrid td {
	border-bottom: 1px solid var(--kw-line-soft);
	max-width: 220px;
	overflow: hidden;
	padding: 7px 12px;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.etsykw-csvgrid th {
	background: var(--kw-panel);
	color: var(--kw-ink-2);
	cursor: pointer;
	font-size: 11.5px;
	font-weight: 650;
}

.etsykw-csvgrid td {
	color: var(--kw-ink-3);
}

.etsykw-csvgrid tr:last-child td {
	border-bottom: 0;
}

.etsykw-csvgrid .is-picked {
	background: var(--kw-accent-soft);
	box-shadow: inset 2px 0 var(--kw-accent), inset -2px 0 var(--kw-accent);
	color: var(--kw-ink);
}

.etsykw-csvgrid th.is-picked {
	color: var(--kw-accent);
}

/* Progress */
.etsykw-bulk__progress {
	margin-bottom: 16px;
}

.etsykw-bulk__progress .etsykw-toolbar {
	margin-bottom: 8px;
}

.etsykw-bulk__track {
	background: var(--kw-line-soft);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

.etsykw-bulk__fill {
	background: var(--kw-accent);
	border-radius: 999px;
	height: 100%;
	transition: width .3s ease;
}

.etsykw-bulk__fill.is-running {
	background-image: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .3) 50%, transparent 100%);
	background-size: 200% 100%;
	animation: etsykw-bulk-shine 1.4s linear infinite;
}

@keyframes etsykw-bulk-shine {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.etsykw-bulk__fill.is-running {
		animation: none;
	}
}

/* Results */
.etsykw-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.etsykw-bulk__filters {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin-bottom: 12px;
}

.etsykw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.etsykw-chip {
	align-items: center;
	appearance: none;
	background: var(--kw-panel-2);
	border: 1px solid var(--kw-line);
	border-radius: 999px;
	color: var(--kw-ink-2);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 13px;
	font-weight: 550;
	gap: 6px;
	padding: 5px 6px 5px 12px;
}

.etsykw-chip b {
	background: var(--kw-panel);
	border-radius: 999px;
	font-size: 11.5px;
	min-width: 22px;
	padding: 1px 7px;
	text-align: center;
}

.etsykw-chip.is-on {
	border-color: var(--kw-ink-2);
	color: var(--kw-ink);
}

.etsykw-chip--good.is-on {
	background: var(--kw-good-soft);
	border-color: var(--kw-good);
	color: var(--kw-good);
}

.etsykw-chip--warn.is-on {
	background: var(--kw-warn-soft);
	border-color: var(--kw-warn);
	color: var(--kw-warn);
}

.etsykw-chip--bad.is-on {
	background: var(--kw-bad-soft);
	border-color: var(--kw-bad);
	color: var(--kw-bad);
}

.etsykw .etsykw-select-sm {
	font-size: 13px;
	padding: 6px 10px;
	width: auto;
}

.etsykw-meter {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	justify-content: flex-end;
}

.etsykw-meter__bar {
	background: var(--kw-line-soft);
	border-radius: 999px;
	display: block;
	height: 6px;
	overflow: hidden;
	width: 56px;
}

.etsykw-meter__bar i {
	background: var(--kw-accent);
	border-radius: 999px;
	display: block;
	height: 100%;
}

.etsykw-meter b {
	font-variant-numeric: tabular-nums;
	min-width: 22px;
	text-align: right;
}

.etsykw-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.etsykw-taglist__tag {
	background: var(--kw-panel);
	border: 1px solid var(--kw-line-soft);
	border-radius: 6px;
	color: var(--kw-ink-2);
	font-size: 11.5px;
	padding: 1px 7px;
	white-space: nowrap;
}

.etsykw-save {
	align-items: center;
	appearance: none;
	background: none;
	border: 1px solid var(--kw-line);
	border-radius: 8px;
	color: var(--kw-ink-2);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	gap: 5px;
	padding: 5px 10px;
}

.etsykw-save:hover {
	border-color: var(--kw-ink-3);
	color: var(--kw-ink);
}

.etsykw-save.is-on {
	background: var(--kw-accent-soft);
	border-color: var(--kw-accent);
	color: var(--kw-accent);
}

.etsykw-save.is-on svg {
	fill: currentColor;
}

/* Results table on wide screens: white sheet, keyword column pinned. */
.etsykw-tablewrap--cards {
	background: var(--kw-panel-2);
}

.etsykw-tablewrap--cards .is-key {
	background: var(--kw-panel-2);
	font-weight: 600;
	left: 0;
	position: sticky;
	z-index: 1;
}

.etsykw-tablewrap--cards thead th.is-key {
	background: var(--kw-panel);
	z-index: 2;
}

.etsykw-tablewrap--cards tbody tr:hover .is-key {
	background: var(--kw-panel);
}

.etsykw-tablewrap--cards td.is-full {
	min-width: 230px;
	white-space: normal;
}

.etsykw-bulk__errors {
	font-size: 13px;
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.etsykw-bulk__errors li {
	border-bottom: 1px solid var(--kw-line-soft);
	color: var(--kw-ink-2);
	padding: 6px 0;
}

.etsykw-bulk__errors strong {
	color: var(--kw-ink);
}


/* Run button keeps its whole label. */
.etsykw-bulk__run .etsykw-field--narrow {
	flex: 0 0 auto;
}

/* Desktop: icon-only save keeps the results table narrow. */
.etsykw-tablewrap--cards .etsykw-save {
	padding: 6px 8px;
}

.etsykw-tablewrap--cards .etsykw-save__text {
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.etsykw-tablewrap--cards td.is-full {
	max-width: 260px;
	min-width: 190px;
}

@media (max-width: 960px) {
	.etsykw-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones: each result becomes a card instead of a sideways-scrolling row. */
@media (max-width: 760px) {
	.etsykw-seg {
		max-width: none;
	}

	.etsykw-seg__btn {
		padding: 8px 10px;
	}

	.etsykw-seg__btn span {
		font-size: 11.5px;
	}

	.etsykw-bulk .etsykw-btn--sm,
	.etsykw-bulk .etsykw-chip,
	.etsykw-bulk .etsykw-save {
		width: auto;
	}

	.etsykw-bulk__head {
		align-items: stretch;
		flex-direction: column;
	}

	.etsykw-pill-tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.etsykw-drop {
		padding: 26px 14px;
	}

	.etsykw-bulk__filters {
		align-items: stretch;
		flex-direction: column;
	}

	.etsykw-bulk__filters .etsykw-toolbar__group {
		display: grid;
		grid-template-columns: 1fr auto;
	}

	.etsykw .etsykw-bulk__filters .etsykw-select-sm {
		width: 100%;
	}

	.etsykw-tablewrap--cards {
		background: none;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.etsykw-tablewrap--cards .etsykw-table,
	.etsykw-tablewrap--cards tbody {
		display: block;
		min-width: 0;
		width: 100%;
	}

	.etsykw-tablewrap--cards thead {
		display: none;
	}

	.etsykw-tablewrap--cards tbody tr {
		background: var(--kw-panel-2);
		border: 1px solid var(--kw-line);
		border-radius: 12px;
		display: grid;
		gap: 10px 12px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-bottom: 10px;
		padding: 13px 14px;
	}

	.etsykw-tablewrap--cards tbody tr:hover {
		background: var(--kw-panel-2);
	}

	.etsykw-tablewrap--cards td,
	.etsykw-tablewrap--cards td.is-num {
		border: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
		padding: 0;
		text-align: left;
		white-space: normal;
	}

	.etsykw-tablewrap--cards td::before {
		color: var(--kw-ink-3);
		content: attr(data-label);
		font-size: 10.5px;
		font-weight: 650;
		letter-spacing: .05em;
		text-transform: uppercase;
	}

	.etsykw-tablewrap--cards td.is-key {
		background: none;
		font-size: 15.5px;
		grid-column: span 2;
		justify-content: center;
		position: static;
	}

	.etsykw-tablewrap--cards td.is-key::before,
	.etsykw-tablewrap--cards td.is-kd::before {
		display: none;
	}

	.etsykw-tablewrap--cards td.is-kd {
		align-items: flex-end;
		justify-content: center;
	}

	.etsykw-tablewrap--cards td.is-full {
		grid-column: 1 / -1;
		min-width: 0;
		order: 10;
	}

	.etsykw-tablewrap--cards td.is-action {
		align-items: flex-end;
		grid-column: span 2;
		justify-content: flex-end;
		order: 9;
	}

	.etsykw-tablewrap--cards td.is-action::before {
		display: none;
	}

	.etsykw-tablewrap--cards .etsykw-meter {
		justify-content: flex-start;
	}

	.etsykw-tablewrap--cards .etsykw-meter__bar {
		width: 40px;
	}

	.etsykw-tablewrap--cards .etsykw-save {
		padding: 5px 10px;
	}

	.etsykw-tablewrap--cards .etsykw-save__text {
		clip: auto;
		height: auto;
		position: static;
		width: auto;
	}

	.etsykw-tablewrap--cards td.is-full {
		max-width: none;
	}

	.etsykw-field--narrow,
	.etsykw-bulk__run .etsykw-field--narrow {
		flex: 1 1 100%;
	}

	.etsykw-chips {
		flex-wrap: nowrap;
		margin: 0 -2px;
		overflow-x: auto;
		padding: 2px;
		scrollbar-width: none;
	}

	.etsykw-chip {
		flex: none;
	}
}

@media (max-width: 600px) {
	.etsykw {
		font-size: 14px;
	}

	.etsykw-empty,
	.etsykw-error {
		padding: 28px 18px;
	}

	.etsykw-grid {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 10px;
	}

	.etsykw-stat__value {
		font-size: 21px;
	}

	.etsykw-items {
		grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
	}

	.etsykw-hbar {
		grid-template-columns: minmax(70px, 110px) 1fr auto;
	}

	.etsykw-form {
		gap: 10px;
	}

	.etsykw-btn {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Nova skin: white cards on a soft page, navy and gold accents         */
/* ------------------------------------------------------------------ */

.etsykw-card,
.etsykw-stat,
.etsykw-empty {
	background: var(--kw-card);
	border-color: var(--kw-line);
	box-shadow: var(--kw-shadow);
}

.etsykw-card {
	border-radius: 18px;
	padding: 20px 22px;
}

.etsykw-empty {
	border-style: solid;
}

.etsykw-card + .etsykw-card,
.etsykw-cols + .etsykw-card,
.etsykw-grid + .etsykw-card {
	margin-top: 16px;
}

.etsykw .etsykw-card__title {
	color: var(--kw-ink);
	font-family: var(--nl-head);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: none;
}

.etsykw-stat {
	border-radius: 16px;
	padding: 16px 18px;
}

.etsykw-stat__label {
	color: var(--kw-ink-3);
	font-weight: 700;
	letter-spacing: .08em;
}

.etsykw-stat__value {
	font-family: var(--nl-head);
	font-size: 28px;
	font-weight: 800;
}

.etsykw-stat.is-hl {
	background:
		radial-gradient(100% 120% at 100% 0%, rgba(51, 64, 245, .45), rgba(51, 64, 245, 0) 60%),
		linear-gradient(160deg, var(--nl-navy), var(--nl-indigo));
	border-color: transparent;
	color: #fff;
}

.etsykw-stat.is-hl .etsykw-stat__value {
	color: var(--nl-gold);
}

.etsykw-stat.is-hl .etsykw-stat__label,
.etsykw-stat.is-hl .etsykw-stat__hint,
.etsykw-stat.is-hl abbr {
	color: #9ea3c7;
}

.etsykw-empty strong,
.etsykw .etsykw-headline strong {
	font-family: var(--nl-head);
}

/* Main action: gold with navy text, as on novaxventures.com. */
.etsykw-btn {
	background: var(--nl-gold);
	border-color: var(--nl-gold);
	box-shadow: 0 10px 24px -14px rgba(233, 185, 110, .9);
	color: var(--nl-gold-ink);
	font-weight: 700;
}

.etsykw-btn--ghost {
	background: transparent;
	border-color: var(--kw-line);
	box-shadow: none;
	color: var(--kw-ink-2);
	font-weight: 600;
}

/* The single keyword headline: a white bar with the badges and save. */
.etsykw-headline {
	background: var(--kw-card);
	border: 1px solid var(--kw-line);
	border-radius: 16px;
	box-shadow: var(--kw-shadow);
	margin-bottom: 16px;
	padding: 12px 16px;
}

.etsykw .etsykw-headline strong {
	font-size: 22px !important;
	letter-spacing: -.015em;
}

.etsykw .etsykw-headline .etsykw-btn {
	background: var(--nl-navy);
	border-color: var(--nl-navy);
	color: #fff;
	padding: 8px 14px;
}

/* Tables */
.etsykw-tablewrap {
	background: var(--kw-card);
}

.etsykw-table thead th {
	background: var(--kw-panel);
}

.etsykw-table a {
	color: var(--nl-blue);
	font-weight: 600;
}

.etsykw.is-dark .etsykw-table a,
.etsykw[data-theme="dark"] .etsykw-table a {
	color: #8d94ff;
}

/* Bulk mode pieces */
.etsykw-pill-tab.is-on {
	background: var(--nl-navy);
}

.etsykw-bulk__fill {
	background: linear-gradient(90deg, var(--nl-gold), #f3cf91);
}

.etsykw-meter__bar i {
	background: linear-gradient(90deg, var(--nl-blue), #7c84ff);
}

.etsykw-chip.is-on {
	background: var(--nl-navy);
	border-color: var(--nl-navy);
	color: #fff;
}

.etsykw-save.is-on {
	background: #fbf1e1;
	border-color: var(--nl-gold);
	color: #b98330;
}

.etsykw-csvgrid .is-picked {
	background: #fbf1e1;
	box-shadow: inset 2px 0 var(--nl-gold), inset -2px 0 var(--nl-gold);
	color: #0A0C2B;
}

.etsykw-csvgrid th.is-picked {
	color: #a06f22;
}

.etsykw-drop:hover,
.etsykw-drop:focus-visible,
.etsykw-drop.is-over {
	background: #fbf1e1;
	border-color: var(--nl-gold);
}

.etsykw-drop__icon,
.etsykw-file__icon {
	color: #b98330;
}

.etsykw-file__icon {
	background: #fbf1e1;
}

.etsykw-headings,
.etsykw h3,
.etsykw h4 {
	font-family: var(--nl-head);
}


.etsykw-cols > .etsykw-card + .etsykw-card {
	margin-top: 0;
}

.etsykw-cols {
	align-items: stretch;
}

.etsykw-chip.is-on b {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

/* Six figures in one row on wide screens. */
@container nl (min-width: 1025px) {
	.nl-body .etsykw-grid {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.nl-body .etsykw-grid.etsykw-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* The Etsy notice: Etsy's API terms require it inside the app. On wide
   screens it sits quietly at the foot of the sidebar instead of a footer. */
.nl-legal {
	display: none;
}

.etsykw-foot {
	border-top: 0;
	font-size: 11.5px;
	margin-top: 22px;
	padding-top: 0;
	text-align: center;
}

@container nl (min-width: 1025px) {
	.nl-side .nl-legal {
		border-top: 1px solid rgba(255, 255, 255, .08);
		color: #6f74a0;
		display: block;
		font-size: 10.5px;
		line-height: 1.5;
		margin: 16px 6px 0;
		padding-top: 14px;
	}

	.etsykw:not(.nl--nonav) .etsykw-foot {
		display: none;
	}

	.nl-body {
		padding-bottom: 48px;
	}
}

/* ------------------------------------------------------------------ */
/* Theme shield                                                        */
/* ------------------------------------------------------------------ */

/* Page builders and themes restyle every button and field on the page:
   uppercase, letter spacing, shadows, their own hover colours. These rules
   sit last and are scoped to the toolkit, so its controls look the same on
   any theme. */
.etsykw button,
.etsykw input,
.etsykw select,
.etsykw textarea {
	letter-spacing: normal;
	text-shadow: none;
	text-transform: none;
}

.etsykw button {
	box-shadow: none;
	min-height: 0;
	text-decoration: none;
}

.etsykw .etsykw-btn:hover,
.etsykw .etsykw-btn:focus {
	background: #efc788;
	border-color: #efc788;
	color: var(--nl-gold-ink);
}

.etsykw .etsykw-headline .etsykw-btn:hover,
.etsykw .etsykw-headline .etsykw-btn:focus {
	background: #1e2360;
	border-color: #1e2360;
	color: #fff;
}

.etsykw .etsykw-btn--ghost:hover,
.etsykw .etsykw-btn--ghost:focus {
	background: transparent;
	border-color: var(--kw-ink-3);
	color: var(--kw-ink);
}

.etsykw .etsykw-pill:hover,
.etsykw .etsykw-pill:focus {
	background: var(--kw-panel-2);
	border-color: var(--kw-accent);
	color: var(--kw-accent);
}

.etsykw .etsykw-seg__btn:hover,
.etsykw .etsykw-seg__btn:focus {
	background: none;
	color: inherit;
}

.etsykw .etsykw-seg__btn.is-on,
.etsykw .etsykw-seg__btn.is-on:hover,
.etsykw .etsykw-seg__btn.is-on:focus {
	background: var(--kw-panel-2);
	box-shadow: var(--kw-shadow);
}

.etsykw .etsykw-pill-tab:hover,
.etsykw .etsykw-pill-tab:focus {
	background: none;
	color: var(--kw-ink);
}

.etsykw .etsykw-pill-tab.is-on,
.etsykw .etsykw-pill-tab.is-on:hover,
.etsykw .etsykw-pill-tab.is-on:focus {
	background: var(--nl-navy);
	color: #fff;
}

.etsykw .etsykw-chip.is-on:not(.etsykw-chip--good):not(.etsykw-chip--warn):not(.etsykw-chip--bad) {
	background: var(--nl-navy);
	color: #fff;
}

.etsykw .etsykw-chip:hover,
.etsykw .etsykw-chip:focus {
	background: var(--kw-panel-2);
	color: var(--kw-ink);
}

.etsykw .etsykw-chip--good.is-on {
	background: var(--kw-good-soft);
	color: var(--kw-good);
}

.etsykw .etsykw-chip--warn.is-on {
	background: var(--kw-warn-soft);
	color: var(--kw-warn);
}

.etsykw .etsykw-chip--bad.is-on {
	background: var(--kw-bad-soft);
	color: var(--kw-bad);
}

.etsykw .etsykw-save:hover,
.etsykw .etsykw-save:focus {
	background: none;
	color: var(--kw-ink);
}

.etsykw .etsykw-save.is-on,
.etsykw .etsykw-save.is-on:hover,
.etsykw .etsykw-save.is-on:focus {
	background: #fbf1e1;
	color: #b98330;
}

.etsykw button:focus-visible {
	outline: 2px solid var(--nl-gold);
	outline-offset: 1px;
}
