/**
 * "Find my sticker" — guided recommender.
 *
 * Loaded only on the page carrying the [slaps_sticker_finder] shortcode.
 * Borrows the studio's vocabulary — lime accent, near-black ink, the light
 * grey card ground used across the sticker cards — so it reads as part of the
 * same shop rather than a bolted-on quiz.
 */

.slaps-finder {
	--sf-ink: #111111;
	--sf-muted: #636a5c;
	--sf-line: #e3e6dd;
	/* The border the rest of the shop puts round a card, 2px of it. The
	   hairline above is for rules and dividers, and is too faint to carry a
	   card edge on its own. */
	--sf-border: #cfcfcf;
	--sf-card: #f4f5f1;
	--sf-raised: #ffffff;
	--sf-lime: #96d700;
	--sf-lime-dark: #78ac00;
	--sf-lime-text: #4b6d00;

	color: var(--sf-ink);
	margin: 0 auto;
	max-width: 720px;
	padding: 8px 0 22px;
}

.slaps-finder__shell {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ── Progress ───────────────────────────────────────────────────────────── */

.slaps-finder__progress-head {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin-bottom: 9px;
}

.slaps-finder__eyebrow {
	color: var(--sf-muted);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.slaps-finder__pct {
	color: var(--sf-muted);
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.slaps-finder__track {
	background: var(--sf-line);
	border-radius: 99px;
	height: 5px;
	overflow: hidden;
}

.slaps-finder__bar {
	background: var(--sf-lime);
	border-radius: 99px;
	height: 100%;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Stage transitions ──────────────────────────────────────────────────── */

.slaps-finder__stage {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.slaps-finder__stage.is-leaving {
	opacity: 0;
	transform: translateY(-8px);
}

.slaps-finder__stage.is-entering {
	opacity: 0;
	transform: translateY(10px);
	transition: none;
}

/* ── Question ───────────────────────────────────────────────────────────── */

.slaps-finder__title {
	font-size: clamp(24px, 3.3vw, 30px);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.14;
	margin: 0 0 8px;
	text-wrap: balance;
}

.slaps-finder__sub {
	color: var(--sf-muted);
	font-size: 16px;
	line-height: 1.55;
	margin: 0 0 28px;
	max-width: 52ch;
}

.slaps-finder__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.slaps-finder__opt {
	align-items: center;
	background: var(--sf-card);
	border: 2px solid transparent;
	border-radius: 14px;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	gap: 16px;
	padding: 17px 18px;
	text-align: left;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
	width: 100%;
}

.slaps-finder__opt:hover {
	background: #eef0ea;
	border-color: #d4dac9;
}

.slaps-finder__opt:active {
	transform: scale(0.995);
}

.slaps-finder__opt.is-chosen {
	background: var(--sf-raised);
	border-color: var(--sf-lime);
}

.slaps-finder__opt:focus-visible {
	outline: 2px solid var(--sf-ink);
	outline-offset: 2px;
}

.slaps-finder__num {
	color: var(--sf-muted);
	flex: none;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: 0.06em;
	opacity: 0.65;
}

.slaps-finder__opt-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.slaps-finder__opt-label {
	font-size: 16.5px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.slaps-finder__opt-desc {
	color: var(--sf-muted);
	font-size: 13.5px;
	line-height: 1.4;
}

.slaps-finder__tick {
	border: 2px solid #cdd3c4;
	border-radius: 50%;
	flex: none;
	height: 24px;
	position: relative;
	transition: border-color 0.15s ease, background 0.15s ease;
	width: 24px;
}

/* The check used to be two rotated borders, which cannot have round ends. A
   stroked path can, so it is drawn as one — round caps and a round join. */
.slaps-finder__opt.is-chosen .slaps-finder__tick {
	background: var(--sf-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5l9.5 -9.5'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
	border-color: var(--sf-lime);
}

/* ── Nav row ────────────────────────────────────────────────────────────── */

.slaps-finder__nav {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

.slaps-finder__nav[hidden] {
	display: none;
}

.slaps-finder__back {
	align-items: center;
	background: none;
	border: 0;
	color: var(--sf-muted);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	gap: 4px;
	padding: 8px 10px 8px 2px;
}

.slaps-finder__back:hover { color: var(--sf-ink); }
.slaps-finder__back svg { height: 18px; width: 18px; }
.slaps-finder__back:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }

/* Set to match the Back button across the row from it — same size, same
   weight, same family — so the two read as one row rather than as a control
   and a caption. */
.slaps-finder .slaps-finder__hint {
	color: var(--sf-ink);
	font-size: 14px;
	font-weight: 700;
	/* Doubled class on purpose: `.slaps-interior p` outweighs a single one and
	   was leaving a bottom margin here, which lifted the text off the centre
	   line Back sits on. */
	margin: 0;
	padding: 8px 0;
}

/* ── Result ─────────────────────────────────────────────────────────────── */

.slaps-finder__kicker {
	color: var(--sf-lime-text);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.11em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.slaps-finder__card {
	background: var(--sf-card);
	border: 1px solid var(--sf-line);
	border-radius: 18px;
	margin-top: 12px;
	padding: 18px 20px;
}

/* The best match is the one thing on this page that should be spent on. */
/* The runner-up reads across, not down: what it is on the left, the way out on
   the right. Stacked like the winner it carried the same weight, which is not
   what "also worth a look" means. */
.slaps-finder__card.is-alt {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 22px;
	justify-content: space-between;
}

.slaps-finder__alt-text { flex: 1 1 260px; min-width: 0; }

.slaps-finder__card.is-alt .slaps-finder__card-tag { margin: 0; }

.slaps-finder__card.is-alt .slaps-finder__cta { flex: 0 0 auto; }

.slaps-finder__card.is-best {
	background: var(--sf-raised);
	border: 2px solid var(--sf-lime);
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 18px 42px -30px rgba(17, 17, 17, 0.55);
}

.slaps-finder__card-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 4px;
}

.slaps-finder__card-title {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 0;
}

.slaps-finder__badge {
	background: var(--sf-lime);
	border-radius: 99px;
	color: var(--sf-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.07em;
	padding: 5px 11px;
	text-transform: uppercase;
}

.slaps-finder__badge.is-quiet {
	background: #e7eade;
	color: var(--sf-muted);
}

.slaps-finder__card-tag {
	color: var(--sf-lime-text);
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 8px;
}

.slaps-finder__card-why {
	color: #3c4237;
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 14px;
}

/* The spec table — the part a plain product link can't give you. */
.slaps-finder__spec {
	border-top: 1px solid var(--sf-line);
	/* space-between across four pairs, rather than four grid columns. Equal
	   columns still leave unequal-looking gaps, because each label sits at a
	   different place inside its own column — left, centred, centred, right.
	   Spacing the pairs themselves is what actually makes the gaps equal. */
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	justify-content: space-between;
	margin: 0 0 14px;
	padding-top: 12px;
}

.slaps-finder__spec-k {
	color: var(--sf-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin: 0 0 2px;
	text-transform: uppercase;
}

.slaps-finder__spec-v {
	font-size: 15px;
	font-weight: 800;
	margin: 0;
}

/* Read across: the first pair anchors left, the middle two centre, the last
   anchors right against the edge the button below shares. */
.slaps-finder__spec-pair { text-align: center; }
.slaps-finder__spec-pair:first-child { text-align: left; }
.slaps-finder__spec-pair:last-child { text-align: right; }

.slaps-finder__cta {
	background: var(--sf-lime);
	border-radius: 999px;
	color: var(--sf-ink);
	display: block;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	padding: 15px 24px;
	text-align: center;
	text-decoration: none;
}

/* Doubled class, because the interior template styles links inside it and was
   winning both the colour — olive rather than black — and an underline a
   button never asked for. */
.slaps-finder .slaps-finder__cta {
	color: var(--sf-ink);
	text-decoration: none;
}

/* Nothing on hover but the cursor: the button is already the brightest thing
   on the screen, and darkening it on contact reads as a state change rather
   than as an invitation. */
.slaps-finder__cta:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }

.slaps-finder__cta.is-ghost {
	background: transparent;
	border: 2px solid #d4dac9;
	font-size: 16px;
	padding: 12px 22px;
}

.slaps-finder__cta.is-ghost:hover-none {
	background: #eef0ea;
	border-color: #c2cab3;
}

.slaps-finder__fineprint {
	color: var(--sf-muted);
	font-size: 12.5px;
	margin: 8px 0 0;
	text-align: center;
}

/* Shown only when the two answers genuinely pull against each other. */
.slaps-finder__note {
	/* A card like the two above it, not a quoted aside: same radius, same
	   padding, same border weight. Pale orange because it is the one thing on
	   this screen that is not agreeing with you, and it has to be found
	   without shouting. */
	background: #fdf0e0;
	border: 1px solid #f0cfa2;
	border-radius: 18px;
	margin-top: 12px;
	padding: 14px 20px;
}

.slaps-finder__note p {
	color: #6b5326;
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

.slaps-finder__foot {
	align-items: center;
	border-top: 1px solid var(--sf-line);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	/* One item left in this row now that Start again has gone, and it keeps
	   the edge it always sat on rather than drifting to the left. */
	justify-content: flex-end;
	margin-top: 16px;
	padding-top: 12px;
}

.slaps-finder__restart {
	background: none;
	border: 0;
	color: var(--sf-muted);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	padding: 6px 2px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.slaps-finder__restart:hover { color: var(--sf-ink); }

.slaps-finder__helplink {
	color: var(--sf-ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

/* Doubled class: the interior template underlines and recolours links inside
   it, and outweighs a single class. */
.slaps-finder .slaps-finder__helplink {
	color: var(--sf-ink);
	text-decoration: none;
}

.slaps-finder .slaps-finder__helplink:hover { text-decoration: underline; }

.slaps-finder__helplink:hover { color: var(--sf-ink); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media screen and (max-width: 600px) {
	.slaps-finder { padding-bottom: 22px; }

	.slaps-finder__opt {
		gap: 13px;
		padding: 15px 15px;
	}

	.slaps-finder__opt-label { font-size: 15.5px; }

	.slaps-finder__card { padding: 16px 16px; }

	/* Four pairs will not sit on one line at this width, so they wrap to two
	   and two. space-between would then strand the second row's pair against
	   the far edge, so the row packs from the start once it wraps. */
	.slaps-finder__spec {
		gap: 10px 14px;
		justify-content: flex-start;
	}

	.slaps-finder__spec-pair { flex: 1 1 40%; text-align: left; }
	.slaps-finder__spec-pair:last-child { text-align: left; }
	.slaps-finder__spec-k { margin: 0; }

	/* The runner-up keeps its row, but the button goes full width rather than
	   sitting in a stub of leftover space. */
	.slaps-finder__card.is-alt .slaps-finder__cta { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.slaps-finder__stage,
	.slaps-finder__bar,
	.slaps-finder__opt {
		transition: none;
	}
}

/* ── Intro ──────────────────────────────────────────────────────────────────
   The step before the questions. Wider than the rest of the wizard and
   centred: the questions are a list to read down a narrow column, this is a
   poster. is-intro is on the root only while it is showing, so the reading
   measure comes straight back for question one. */

/* The interior template's column is ~720px, so a max-width alone gets clamped
   by the parent and the row of five never fits. This breaks out of it instead:
   left edge to the middle of the column, then back by half its own width, which
   lands it centred on the viewport without touching a container every other
   interior page shares. */
.slaps-finder.is-intro {
	margin-left: 50%;
	max-width: none;
	transform: translateX(-50%);
	width: min(1180px, calc(100vw - 48px));
}
/* Tablets and desktops: the header's gutter instead of 24px, so the row's edges
   sit under the logo and the Sign Up pill wherever it fills the screen. */
@media (min-width: 601px) {
	.slaps-finder.is-intro { width: min(1180px, calc(100vw - 2 * var(--slaps-gutter))); }
}

.slaps-finder__intro { text-align: center; }

/* The page's own <h1> says "Find my sticker", which is word for word the rule
   below it. Hidden rather than removed: it stays the document's heading for a
   screen reader and for anything reading the outline, and the rule that
   replaces it visually is decorative. */
body.slaps-has-finder .slaps-interior h1 {
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* The homepage's "How it works" eyebrow, value for value, so the two read as
   the same piece of furniture on both pages. The grey is written out rather
   than taken from --sf-muted, which is a slightly different one.

   Doubled class on purpose: the interior template sets `.slaps-interior p` at
   (0,1,1), which outweighed a single class and was rendering this at 19.2px,
   weight 500, #333.

   The 0.34em never actually lands — the theme carries a site-wide
   `html body * { letter-spacing: 1px !important }`, which is why the homepage
   eyebrow also comes out at 1px — but it is what the homepage declares, so
   keeping the two identical is what keeps them matched if that ever goes. */
.slaps-finder .slaps-finder__introRule {
	align-items: center;
	color: #5d5d5d;
	display: flex;
	font-size: 20px;
	font-weight: 700;
	gap: 18px;
	justify-content: center;
	letter-spacing: 0.34em;
	/* Stays 18px while the rest of the page tightens: this block is a
	   value-for-value copy of the homepage's eyebrow, margin included. */
	margin: 0 0 18px;
	text-transform: uppercase;
}

.slaps-finder__introRule::before,
.slaps-finder__introRule::after {
	background: var(--sf-border);
	border-radius: 999px;
	content: "";
	height: 2px;
	width: clamp(40px, 8vw, 110px);
}

.slaps-finder__introH {
	font-size: clamp(34px, 6.2vw, 78px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 0.98;
	margin: 0 0 14px;
	text-transform: uppercase;
	text-wrap: balance;
}

.slaps-finder__introH em {
	font-style: normal;
}

.slaps-finder__introSub {
	color: var(--sf-muted);
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.5;
	margin: 0 auto clamp(24px, 2.7vw, 35px);
	max-width: 62ch;
}

/* ── The three promises ────────────────────────────────────────────────────
   One row, split by hairlines rather than boxes: three cards here would
   compete with the five material cards below, and these are a caption to the
   sentence above, not a second set of choices. */
.slaps-finder__promises {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	justify-content: center;
	list-style: none;
	margin: 0 0 clamp(24px, 2.7vw, 35px);
	padding: 0;
}

.slaps-finder__promises li {
	align-items: center;
	display: flex;
	gap: 14px;
	padding: 0 clamp(18px, 2.4vw, 34px);
	text-align: left;
}

.slaps-finder__promises li + li { border-left: 1px solid var(--sf-line); }

.slaps-finder__promises strong {
	display: block;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* strong + span, not a bare span: the icon tile is a span too, and a plain
   descendant selector beat its own display:flex and dropped every icon into
   the top-left corner of its tile. */
.slaps-finder__promises strong + span {
	color: var(--sf-muted);
	display: block;
	font-size: 13.5px;
	margin-top: 2px;
}

.slaps-finder__promiseIco {
	align-items: center;
	background: var(--sf-lime);
	border-radius: 13px;
	display: flex;
	flex: none;
	height: 54px;
	justify-content: center;
	width: 54px;
}

.slaps-finder__promiseIco svg {
	height: 26px;
	width: 26px;
	fill: none;
	stroke: var(--sf-ink);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── The five materials ───────────────────────────────────────────────────
   One row of five at full width. The basis is a fifth of the row minus the
   gaps; below that they wrap rather than squeeze, because a card narrower
   than its own two-line caption is worse than a second row. */
.slaps-finder__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin: 0 0 clamp(24px, 2.7vw, 34px);
}

.slaps-finder__swatch {
	align-items: center;
	background: none;
	border: 2px solid var(--sf-border);
	border-radius: 18px;
	display: flex;
	flex: 0 1 calc((100% - 56px) / 5);
	flex-direction: column;
	min-width: 186px;
	padding: 24px 18px 14px;
}

.slaps-finder__swatch strong {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.02em;
	margin-top: 14px;
	text-transform: uppercase;
}

.slaps-finder__swatch > span:last-child {
	color: var(--sf-muted);
	font-size: 14px;
	line-height: 1.45;
	margin-top: 6px;
}

/* Real photos of the materials since 30 Sep 2026 (they were CSS-drawn
   gradients). 240px WebP for an 80px square — sharp on Retina screens — and
   about 42 KB for all four, so the first screen of this quick quiz stays
   quick. Transparent keeps its checkerboard on purpose. */
.slaps-finder__chip {
	/* The card's own edge, at the same weight, so the swatch reads as a piece
	   of the card rather than a picture dropped onto it. */
	border: 2px solid var(--sf-border);
	border-radius: 13px;
	display: block;
	height: 80px;
	width: 80px;
}

.slaps-finder__chip.is-vinyl,
.slaps-finder__chip.is-holographic,
.slaps-finder__chip.is-glitter,
.slaps-finder__chip.is-mirror {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.slaps-finder__chip.is-vinyl {
	background-color: #ffffff;
	background-image: url(../materials/swatches/vinyl-240.webp);
}

.slaps-finder__chip.is-holographic {
	background-color: #cfd8ea;
	background-image: url(../materials/swatches/holographic-240.webp);
}

.slaps-finder__chip.is-glitter {
	background-color: #d9d4e4;
	background-image: url(../materials/swatches/glitter-240.webp);
}

.slaps-finder__chip.is-mirror {
	background-color: #c9ccd0;
	background-image: url(../materials/swatches/mirror-240.webp);
}

/* A checkerboard, the way every editor says "nothing here". */
.slaps-finder__chip.is-transparent {
	background-color: #ffffff;
	background-image:
		linear-gradient(45deg, #d8dcd4 25%, transparent 25%, transparent 75%, #d8dcd4 75%),
		linear-gradient(45deg, #d8dcd4 25%, transparent 25%, transparent 75%, #d8dcd4 75%);
	background-position: 0 0, 7px 7px;
	background-size: 14px 14px;
}

/* ── Start ──────────────────────────────────────────────────────────────── */

.slaps-finder__start {
	align-items: center;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: clamp(16px, 1.5vw, 20px);
	justify-content: center;
	letter-spacing: 0.04em;
	margin: 0 auto;
	padding: 18px 40px;
	text-transform: uppercase;
	width: auto;
}

.slaps-finder__footIco svg {
	height: 20px;
	width: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.slaps-finder__takes {
	color: var(--sf-muted);
	font-size: 14px;
	margin: 14px 0 0;
}

/* ── Foot ───────────────────────────────────────────────────────────────── */

.slaps-finder__introFoot {
	align-items: center;
	border-top: 1px solid var(--sf-line);
	color: var(--sf-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 14.5px;
	gap: 10px;
	justify-content: center;
	margin: clamp(21px, 2.4vw, 30px) auto 0;
	max-width: 620px;
	padding-top: clamp(16px, 1.9vw, 22px);
}

.slaps-finder__introFoot a {
	align-items: center;
	color: var(--sf-ink);
	display: inline-flex;
	font-weight: 800;
	gap: 8px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.slaps-finder__introFoot a:hover { color: var(--sf-lime-text); }

.slaps-finder__footIco { display: inline-flex; }

@media (max-width: 900px) {
	/* The hairlines go with the row: three items stacked with rules between
	   them would read as a table, which is not what a caption is. */
	.slaps-finder__promises { gap: 18px; }
	.slaps-finder__promises li { flex: 0 1 260px; padding: 0; }
	.slaps-finder__promises li + li { border-left: 0; }
}

@media (max-width: 520px) {
	.slaps-finder__swatch { flex-basis: 100%; min-width: 0; }
	.slaps-finder__start { padding: 16px 24px; width: 100%; }
}