/*
Theme Name: The Code Planet
Theme URI: https://thecodeplanet.com/
Author: The Code Planet
Description: The store, article and home templates for thecodeplanet.com. Data first, hairlines instead of shadows, one accent colour, no page builder.
Version: 0.1.5
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: thecodeplanet
*/

/* ---------------------------------------------------------------------------
   The system

   Light by default, dark on request or by system preference. Every colour is a
   variable and every variable is redefined once for dark, so no component
   needs to know which theme it is in.

   Three typefaces, each with one job, chosen on 2026-09-22 from Untitled UI's
   list of the best free UI fonts. Space Grotesk for the fields a reader scans,
   Manrope for h1 to h6, Source Sans 3 for everything meant to be read. See the
   note beside the font variables below.

   No gradients. No drop shadows except one on the sticky bar, where it has to
   signal a layer. Radii stay at 6px and under, because heavy rounding plus a
   soft shadow is the look the owner rejected twice.
--------------------------------------------------------------------------- */

:root {
	--paper: #ffffff;
	--surface: #f4f5f7;
	--surface-2: #eceef2;
	--ink: #14161a;
	--ink-2: #5a6070;
	--ink-3: #858c9b;
	--line: #e1e4ea;
	--line-strong: #c9cdd6;
	--accent: #c2410c;
	--accent-ink: #ffffff;
	--accent-soft: #fdf1ec;
	--good: #0f7a4f;
	--good-soft: #eaf5f0;

	/* Three families, three jobs, none of them doing another's work.

	   Display carries the things a reader scans for: the wordmark, the discount
	   figure, the code itself, the counts, buttons and labels. It never sets a
	   sentence.

	   Head sets h1 to h6 and nothing else.

	   Read sets every word meant to be read: paragraphs, links, list items,
	   small print, table cells.

	   The article this came from argues for one or two families, not three. The
	   owner asked for three on 2026-09-22, so the discipline is in the rules
	   above: each family has one job and never leaks into another's. */
	--font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-head: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-read: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--wrap: 1180px;
	--measure: 680px;

	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s5: 24px;
	--s6: 32px;
	--s7: 48px;
	--s8: 64px;
	--s9: 96px;

	--r: 6px;
	--r-sm: 3px;
}

:root[data-theme="dark"] {
	--paper: #0e1013;
	--surface: #171a1f;
	--surface-2: #1e222a;
	--ink: #e8eaee;
	--ink-2: #9aa1ae;
	--ink-3: #79808d;
	--line: #262a31;
	--line-strong: #363c46;
	--accent: #ff7a45;
	--accent-ink: #1a0d06;
	--accent-soft: #241610;
	--good: #3fbf8a;
	--good-soft: #12231c;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper: #0e1013;
		--surface: #171a1f;
		--surface-2: #1e222a;
		--ink: #e8eaee;
		--ink-2: #9aa1ae;
		--ink-3: #79808d;
		--line: #262a31;
		--line-strong: #363c46;
		--accent: #ff7a45;
		--accent-ink: #1a0d06;
		--accent-soft: #241610;
		--good: #3fbf8a;
		--good-soft: #12231c;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
	overflow-x: clip;
}

/*
   A standing guarantee that nothing can ever push the page sideways.

   overflow-x: clip, NOT hidden. Hidden turns the element into a scroll
   container, which silently kills position: sticky on everything inside it,
   and the masthead, the store facts rail and the article contents list all
   rely on sticky. clip cuts the overflow without creating that container.

   Measured before adding: 21 page and width combinations at 320, 360 and 390px
   all had zero sideways scroll, so this is not papering over a bug. It is here
   so that a future store name, a pasted URL or a wide table cannot introduce
   one without anybody noticing.
*/
body {
	overflow-x: clip;
	max-width: 100%;
}

/* A long unbroken string, a URL pasted into an article, is the usual way a page
   gains a sideways scrollbar years later. It wraps instead. */
.body,
.prose,
.facts dd,
.review__body,
.card,
.findlist__name {
	overflow-wrap: break-word;
}

img,
video,
iframe,
svg,
table {
	max-width: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-read);
	font-size: 16px;
	line-height: 1.55;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
   Every link that sits inside running text, anywhere on the site.

   Underlined, always, and this is not a taste call. Measured against our own
   palette: a link told apart by colour alone needs 3:1 against the surrounding
   text before a colour-blind or low-vision reader can find it in a paragraph.
   Light mode scrapes 3.50:1, dark mode manages 2.15:1. Colour alone therefore
   fails in the theme half our readers use, so the underline carries the
   meaning and the colour sits on top of it.

   Thin and set well away from the words, because a long article here carries
   about nine links and a heavy rule under each one turns a paragraph into a
   fence. The accent lives in the underline rather than in the words, so a
   sentence reads at one colour.

   Navigation, cards, breadcrumbs and list rows opt out with
   text-decoration: none. They are already obviously clickable from their shape
   and position, and underlining them would put a rule under every row on the
   page.
*/
a {
	color: var(--ink);
	text-decoration-line: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: text-decoration-thickness 90ms ease, color 90ms ease;
}

a:hover,
a:focus-visible {
	color: var(--accent);
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
	a {
		transition: none;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

p {
	margin: 0 0 var(--s4);
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--s7) 0;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--s5);
}

.skip {
	position: absolute;
	left: -9999px;
}

.skip:focus {
	left: var(--s4);
	top: var(--s4);
	z-index: 50;
	background: var(--paper);
	padding: var(--s3) var(--s4);
	border: 1px solid var(--line-strong);
}

/* --- masthead -----------------------------------------------------------

   Rebuilt 2026-09-25 at the owner's request. One row, 64px, on a hairline:
   the mark and the name, the store finder, the three sections, then the theme
   switch as an icon.
   The section on screen is marked by a 2px ink rule sitting on the hairline.
   Categories opens onto the twelve largest, the one other floating layer
   besides the search dropdown, so it is allowed the same shadow.
   Under 900px the sections fold behind a Menu button and the finder takes
   the second row, as before. */

.masthead {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.masthead__in {
	display: flex;
	align-items: center;
	gap: var(--s5);
	height: 64px;
}

.brand {
	font-family: var(--font-display);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.025em;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.brand:hover {
	color: var(--ink);
}

.brand__mark {
	flex: none;
}

.brand__tile {
	fill: var(--ink);
}

.brand__c {
	stroke: var(--paper);
}

/* The favicon's orange in both themes: the planet is the constant. */
.brand__planet {
	fill: #ff7a45;
}

/* The three sections. Each is the full height of the bar, so the rule under
   the current one lands exactly on the hairline. */
.nav {
	display: flex;
	align-items: stretch;
	align-self: stretch;
	gap: var(--s1);
}

.nav__item {
	position: relative;
	display: flex;
}

.nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0 var(--s3);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
	white-space: nowrap;
}

.nav__link:hover,
.nav__link[aria-expanded="true"] {
	color: var(--ink);
}

.nav__link[aria-current]::after {
	content: "";
	position: absolute;
	left: var(--s3);
	right: var(--s3);
	bottom: -1px;
	height: 2px;
	background: var(--ink);
}

.nav__link[aria-current] {
	color: var(--ink);
}

.nav__chev {
	color: var(--ink-3);
	transition: transform 160ms ease;
}

.nav__link[aria-expanded="true"] .nav__chev {
	transform: rotate(180deg);
}

/* Categories, opened. */
.megamenu {
	position: absolute;
	top: calc(100% + 1px);
	left: calc(-1 * var(--s3));
	width: 520px;
	padding: var(--s4);
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	z-index: 40;
}

:root[data-theme="dark"] .megamenu {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .megamenu {
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	}
}

.megamenu[hidden] {
	display: none;
}

.megamenu__h {
	margin: 0 0 var(--s2) var(--s2);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.megamenu__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px var(--s2);
}

.megamenu__grid a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s3);
	padding: 8px var(--s2);
	border-radius: var(--r-sm);
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
}

.megamenu__grid a:hover,
.megamenu__grid a:focus-visible {
	background: var(--surface);
}

.megamenu__n {
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink-3);
}

.megamenu__foot {
	display: flex;
	justify-content: space-between;
	gap: var(--s4);
	margin-top: var(--s3);
	padding: var(--s3) var(--s2) 0;
	border-top: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
}

.megamenu__foot a {
	text-decoration: none;
}

.megamenu__foot a::after {
	content: " \2192";
}

/* Right-hand end: the switch, and on a phone the Menu button. */
.masthead__end {
	display: flex;
	align-items: center;
	gap: var(--s2);
	margin-left: auto;
}

.iconbtn {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper);
	color: var(--ink-2);
	cursor: pointer;
}

.iconbtn:hover {
	border-color: var(--line-strong);
	color: var(--ink);
}

.iconbtn svg {
	grid-area: 1 / 1;
}

/* The switch shows where it will take you: a moon in light, a sun in dark. */
.themetoggle__sun {
	visibility: hidden;
}

:root[data-theme="dark"] .themetoggle__sun {
	visibility: visible;
}

:root[data-theme="dark"] .themetoggle__moon {
	visibility: hidden;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .themetoggle__sun {
		visibility: visible;
	}

	:root:not([data-theme="light"]) .themetoggle__moon {
		visibility: hidden;
	}
}

.menubtn {
	display: none;
}

.menubtn__close,
.menubtn[aria-expanded="true"] .menubtn__open {
	visibility: hidden;
}

.menubtn[aria-expanded="true"] .menubtn__close {
	visibility: visible;
}

/* The phone menu, under the bar. */
.mobilemenu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: calc(100vh - 100%);
	overflow-y: auto;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	padding: var(--s4) 0 var(--s5);
}

.mobilemenu[hidden] {
	display: none;
}

.mobilemenu__main {
	display: grid;
}

.mobilemenu__main a {
	display: flex;
	align-items: center;
	min-height: 48px;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

.mobilemenu__h {
	margin: var(--s5) 0 var(--s3);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.mobilemenu__cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s2);
}

.mobilemenu__cats a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
}

.mobilemenu__small {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s5);
	margin-top: var(--s5);
	font-size: 14px;
}

.mobilemenu__small a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ink-2);
	text-decoration: none;
}

/* --- shared bits -------------------------------------------------------- */

.crumbs {
	font-size: 13px;
	color: var(--ink-3);
	padding: var(--s5) 0 0;
}

.crumbs a {
	color: var(--ink-3);
	text-decoration: none;
}

.crumbs a:hover {
	color: var(--accent);
}

.crumbs span {
	padding: 0 6px;
}

.eyebrow {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 600;
}

.disclosure {
	font-size: 13px;
	color: var(--ink-2);
	background: var(--surface);
	border-left: 2px solid var(--accent);
	padding: var(--s3) var(--s4);
	margin: var(--s5) 0 0;
}

.sect {
	padding: var(--s8) 0 0;
}

.sect__head {
	display: flex;
	align-items: baseline;
	gap: var(--s4);
	border-bottom: 1px solid var(--line);
	padding-bottom: var(--s3);
	margin-bottom: var(--s5);
}

.sect__head h2 {
	font-size: 20px;
}

.sect__note {
	margin-left: auto;
	font-size: 13px;
	color: var(--ink-3);
}

.empty {
	color: var(--ink-3);
	font-size: 14px;
	border: 1px dashed var(--line-strong);
	padding: var(--s4);
	border-radius: var(--r);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--r-sm);
	padding: var(--s3) var(--s5);
	/* Declared after the shorthand, which would otherwise reset the family
	   back to the inherited reading font. */
	font: inherit;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
}

.btn:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-strong);
}

.btn--ghost:hover {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}

/* --- store page --------------------------------------------------------- */

.store {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--s9);
	align-items: start;
	padding-bottom: var(--s9);
}

.store__head {
	padding-top: var(--s5);
}

.store__id {
	display: flex;
	align-items: center;
	gap: var(--s4);
	margin-bottom: var(--s4);
}

.store__logo {
	width: 52px;
	height: 52px;
	object-fit: contain;
	/* Always a light plate. Most merchant logos are dark artwork on a
	   transparent background and vanish on a dark page. */
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 5px;
	flex: none;
}

.store__logo--blank {
	display: grid;
	place-items: center;
	font-weight: 700;
	color: var(--ink-3);
	font-size: 18px;
}

.store__site {
	font-size: 13px;
	color: var(--ink-3);
}

.store__site a {
	color: var(--ink-2);
}

h1.store__h1 {
	font-size: 40px;
	letter-spacing: -0.03em;
	margin-bottom: var(--s4);
}

.store__lede {
	font-size: 18px;
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 56ch;
	margin-bottom: 0;
}

/* the code card, the one element that has to win the page

   Rebuilt 2026-09-25 as something to use rather than read. Left, the amount
   on the ticket stub. Right, in the order a reader needs them: what the code
   does and whether we checked it, the code itself behind one button that
   shows and copies it, the way to the shop, then what other readers said and
   the question for this one.

   Nothing changes height after the page draws. The two states of the question
   and the two states of the answer each share one grid cell, so the card is
   always as tall as its tallest state. */

.deal {
	margin-top: var(--s6);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	background: var(--paper);
	display: grid;
	grid-template-columns: 184px minmax(0, 1fr);
	overflow: hidden;
}

.deal__figure {
	background: var(--surface);
	border-right: 1px dashed var(--line-strong);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: var(--s5) var(--s3);
	text-align: center;
}

.deal__num {
	font-family: var(--font-display);
	font-size: 54px;
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1;
	color: var(--ink);
}

.deal__num sup {
	font-size: 24px;
	font-weight: 600;
	top: -0.6em;
	letter-spacing: 0;
}

.deal__off {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.deal__scope {
	margin-top: var(--s2);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	padding: 2px 8px;
}

.deal__body {
	padding: var(--s5) var(--s6);
	display: grid;
	gap: var(--s4);
	min-width: 0;
}

.deal__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2) var(--s4);
}

.deal__label {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.deal__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-3);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 3px 9px;
}

.deal__status.is-checked {
	color: var(--good);
	background: var(--good-soft);
	border-color: color-mix(in srgb, var(--good) 35%, var(--line));
}

/* The code and its button, one control. */

.deal__code {
	display: flex;
	align-items: stretch;
	height: 58px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--r);
	background: var(--surface);
	overflow: hidden;
	transition: border-color 200ms ease;
}

.deal__value {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 0 var(--s5);
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	filter: blur(7px);
	user-select: none;
	transition: filter 300ms ease;
}

.deal__code:not([data-state="hidden"]) .deal__value {
	filter: none;
	user-select: all;
}

.deal__code[data-state="copied"] {
	border-style: solid;
	border-color: var(--good);
}

.deal__show {
	flex: none;
	min-width: 152px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	border: 0;
	padding: 0 var(--s5);
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.deal__show:hover {
	background: var(--accent);
	color: var(--accent-ink);
}

.deal__show:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -4px;
}

.deal__code[data-state="copied"] .deal__show {
	background: var(--good);
	color: #ffffff;
}

.deal__hint {
	margin: calc(-1 * var(--s2)) 0 0;
	min-height: 20px;
	font-size: 13px;
	color: var(--ink-3);
}

.deal__go {
	justify-self: start;
}

/* Minimum order and terms, only when the owner entered them for this code. */
.deal__terms {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-2);
}

/* Every other active code, under the lead one. Added 2026-09-25 when stores
   began to carry more than one code. The same card and the same behaviour,
   a size down, so the lead code stays the loudest thing on the page. */

.more-codes {
	margin-top: var(--s7);
}

.more-codes__h {
	font-size: 20px;
	padding-bottom: var(--s3);
	border-bottom: 1px solid var(--line);
}

.more-codes .deal {
	margin-top: var(--s4);
}

.deal--more {
	grid-template-columns: 140px minmax(0, 1fr);
}

.deal--more .deal__figure {
	padding: var(--s4) var(--s2);
}

.deal--more .deal__num {
	font-size: 40px;
}

.deal--more .deal__num sup {
	font-size: 18px;
}

.deal--more .deal__body {
	padding: var(--s4) var(--s5);
	gap: var(--s3);
}

.deal--more .deal__label {
	font-size: 17px;
}

.deal--more .deal__code {
	height: 50px;
}

.deal--more .deal__value {
	font-size: 19px;
}

/* What readers said, and the question. */

.deal__reports {
	border-top: 1px solid var(--line);
	padding-top: var(--s4);
	display: grid;
	gap: var(--s3);
}

.deal__meter {
	display: flex;
	align-items: center;
	gap: var(--s3);
	min-width: 0;
}

.deal__bar {
	flex: none;
	width: 120px;
	height: 6px;
	border-radius: 3px;
	background: var(--surface-2);
	overflow: hidden;
}

.deal__fill {
	display: block;
	height: 100%;
	background: var(--good);
	border-radius: 3px;
	transition: width 600ms ease;
}

.deal__count {
	margin: 0;
	font-size: 14px;
	color: var(--ink-2);
	min-width: 0;
}

.deal__vote {
	display: grid;
}

.deal__ask,
.deal__thanks {
	grid-area: 1 / 1;
}

.deal__ask {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3) var(--s4);
}

.deal__qs {
	display: grid;
	flex: 1 1 240px;
}

.deal__q {
	grid-area: 1 / 1;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.deal__vote[data-state="locked"] .deal__q[data-when="ask"],
.deal__vote:not([data-state="locked"]) .deal__q[data-when="locked"] {
	visibility: hidden;
}

/* Styled the same in every state, even while hidden: a hidden line that
   changed size would still resize the cell it shares, and the card with it. */
.deal__q[data-when="locked"] {
	color: var(--ink-3);
	font-weight: 400;
	font-size: 14px;
}

.deal__answers {
	display: flex;
	gap: var(--s2);
}

.deal__answer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 84px;
	min-height: 40px;
	padding: 0 var(--s4);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.deal__answer[data-worked="1"]:hover:not(:disabled) {
	border-color: var(--good);
	color: var(--good);
	background: var(--good-soft);
}

.deal__answer[data-worked="0"]:hover:not(:disabled) {
	border-color: var(--ink-2);
}

.deal__answer:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.deal__answer:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.deal__thanks {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--s2);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	visibility: hidden;
}

.deal__vote[data-state="thanks"] .deal__ask {
	visibility: hidden;
}

.deal__vote[data-state="thanks"] .deal__thanks {
	visibility: visible;
}

.deal__thanks svg {
	flex: none;
	color: var(--good);
}

@media (prefers-reduced-motion: reduce) {
	.deal__value,
	.deal__code,
	.deal__show,
	.deal__fill,
	.deal__answer {
		transition: none;
	}
}

@media (max-width: 680px) {
	.deal {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The stub becomes a band across the top: amount left, scope right. */
	.deal__figure {
		flex-direction: row;
		justify-content: flex-start;
		align-items: baseline;
		gap: var(--s2);
		border-right: 0;
		border-bottom: 1px dashed var(--line-strong);
		padding: var(--s4) var(--s5);
	}

	.deal__num {
		font-size: 40px;
	}

	.deal--more {
		grid-template-columns: minmax(0, 1fr);
	}

	.deal--more .deal__figure {
		padding: var(--s3) var(--s5);
	}

	.deal--more .deal__num {
		font-size: 32px;
	}

	.deal__scope {
		margin: 0 0 0 auto;
		align-self: center;
	}

	.deal__body {
		padding: var(--s4) var(--s5) var(--s5);
	}

	.deal__code {
		height: 54px;
	}

	.deal__value {
		font-size: 19px;
		padding: 0 var(--s4);
	}

	.deal__show {
		min-width: 124px;
		padding: 0 var(--s4);
	}

	.deal__go {
		justify-self: stretch;
	}

	.deal__answers {
		flex: 1 1 100%;
	}

	.deal__answer {
		flex: 1;
		min-height: 44px;
	}
}


.chip {
	font-family: var(--font-display);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 3px 9px;
	font-size: 12px;
	color: var(--ink-2);
	background: var(--surface);
}

.chip--good {
	color: var(--good);
	border-color: color-mix(in srgb, var(--good) 35%, var(--line));
	background: var(--good-soft);
	font-weight: 600;
}

.chip--plain {
	background: transparent;
}

/* How to use the code: four numbered steps, each beside its screenshot.
   Rebuilt 2026-09-25. A hairline runs down the numbers so the steps read as
   one sequence; on a phone the screenshot drops under its step. */

.steps__intro {
	margin-bottom: var(--s5);
}

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.step {
	position: relative;
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) minmax(0, 300px);
	gap: var(--s3) var(--s5);
	align-items: start;
	padding: var(--s5) 0;
	border-top: 1px solid var(--line);
}

.step--text {
	grid-template-columns: 36px minmax(0, 1fr);
}

/* The line from one number down to the next. */
.step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 17px;
	top: calc(var(--s5) + 36px);
	bottom: calc(-1 * var(--s5));
	border-left: 1px solid var(--line);
}

.step__n {
	position: relative;
	z-index: 1;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--paper);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}

.step__body {
	min-width: 0;
	padding-top: 6px;
}

.step__title {
	font-size: 17px;
	margin: 0 0 var(--s2);
}

.step__text,
.step__text p {
	margin: 0 0 var(--s3);
	color: var(--ink-2);
	font-size: 16px;
	line-height: 1.6;
}

.step__code {
	display: inline-flex;
	align-items: center;
	gap: var(--s3);
	border: 1px dashed var(--line-strong);
	border-radius: var(--r);
	background: var(--surface);
	padding: 6px 6px 6px var(--s4);
	max-width: 100%;
}

.step__codeval {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.06em;
	overflow-wrap: anywhere;
}

.step__copy {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--r-sm);
	padding: 6px var(--s3);
	min-height: 32px;
	cursor: pointer;
}

.step__copy:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.step__link {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
}

.step__link::after {
	content: " \2197";
}

.step__shot {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	background: #ffffff;
}

.step__shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
}

.steps__notes {
	margin-top: var(--s5);
	padding: var(--s4) var(--s5);
	background: var(--surface);
	border-left: 2px solid var(--line-strong);
	border-radius: 0 var(--r) var(--r) 0;
}

.steps__notes h3 {
	font-size: 15px;
	margin: 0 0 var(--s2);
}

.steps__notes .prose p {
	font-size: 15px;
	margin: 0 0 var(--s3);
}

.steps__notes .prose p:last-child {
	margin-bottom: 0;
}

@media (max-width: 760px) {
	.step,
	.step--text {
		grid-template-columns: 32px minmax(0, 1fr);
		gap: var(--s3) var(--s4);
	}

	.step__n {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}

	.step:not(:last-child)::before {
		left: 15px;
		top: calc(var(--s5) + 32px);
	}

	.step__shot {
		grid-column: 2;
	}
}

/* products */

.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--s5);
}

.product {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	min-width: 0;
}

.product__shot {
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #ffffff;
	aspect-ratio: 1;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.product__shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--s3);
	mix-blend-mode: multiply;
}

.store__logo--blank {
	background: var(--surface);
}

.product__name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product__for {
	font-size: 12px;
	color: var(--ink-3);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product__price {
	font-size: 15px;
	font-weight: 600;
	margin-top: auto;
	padding-top: var(--s2);
}

.product__was {
	font-weight: 400;
	color: var(--ink-3);
	text-decoration: line-through;
	margin-left: 6px;
	font-size: 13px;
}

/* reviews */

.rating {
	display: flex;
	align-items: baseline;
	gap: var(--s3);
	margin-bottom: var(--s5);
}

.rating__num {
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.stars {
	color: var(--accent);
	letter-spacing: 2px;
	font-size: 15px;
}

.rating__count {
	font-size: 13px;
	color: var(--ink-3);
}

.reviews {
	display: grid;
	gap: var(--s5);
}

.review {
	border-top: 1px solid var(--line);
	padding-top: var(--s4);
}

.review__top {
	display: flex;
	gap: var(--s3);
	align-items: baseline;
	font-size: 13px;
	color: var(--ink-3);
	margin-bottom: var(--s2);
}

.review__who {
	color: var(--ink);
	font-weight: 600;
}

/* Pushed to the end of the row so the reviewer's name stays the first thing
   read, and the citation sits where a footnote would. */
.review__src {
	margin-left: auto;
	white-space: nowrap;
}

.review__src a {
	color: var(--ink-3);
}

.review__src a:hover {
	color: var(--accent);
}

.review__title {
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 3px;
}

.review__body {
	font-size: 14px;
	color: var(--ink-2);
	margin: 0;
}

/* prose inside a store page */

.prose {
	max-width: var(--measure);
	color: var(--ink-2);
	font-size: 16px;
}

.prose h3 {
	color: var(--ink);
	font-size: 17px;
	margin: var(--s6) 0 var(--s3);
}

.prose a {
	color: var(--ink);
}

.prose ul {
	padding-left: 1.1em;
}

/* faq */

.faq {
	border-top: 1px solid var(--line);
}

.faq details {
	border-bottom: 1px solid var(--line);
}

.faq summary {
	cursor: pointer;
	list-style: none;
	padding: var(--s4) var(--s6) var(--s4) 0;
	font-weight: 600;
	font-size: 16px;
	position: relative;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-3);
	font-weight: 400;
	font-size: 20px;
}

.faq details[open] summary::after {
	content: "\2013";
}

.faq p {
	color: var(--ink-2);
	max-width: var(--measure);
	margin: 0 0 var(--s4);
	font-size: 15px;
}

/* About and the buying guide. Rebuilt 2026-09-25 at the owner's request.

   The longest prose on a store page, and all 480 stores hold it as plain
   paragraphs, no headings or lists. It used to run 680px wide at 16px, about 95
   characters a line, well past the 60 to 75 that reads comfortably. Now a
   narrow label column sits on the left and the text column is held to 64ch,
   about 70 characters, at 17px.

   Each paragraph opens with its first sentence in full ink and semibold
   (.lead-in, set by tcp_lead_in()), the rest a step quieter, so a reader can
   skim the topic sentences alone. No word is added. */

.part {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	gap: 0 var(--s6);
	align-items: start;
	padding: var(--s6) 0;
}

.part + .part {
	border-top: 1px solid var(--line);
}

.sect__head + .part {
	padding-top: 0;
}

.part:last-child {
	padding-bottom: 0;
}

.part__n {
	display: block;
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--ink-3);
	margin-bottom: var(--s2);
}

.part__title {
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
}

.part__logo {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
	/* The same light plate as the header logo, for the same reason. */
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 6px;
}

.part__logo--blank {
	display: grid;
	place-items: center;
	background: var(--surface);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	color: var(--ink-3);
}

.part__body {
	max-width: 64ch;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-2);
}

.part__body p {
	margin: 0 0 var(--s4);
}

.part__body > :last-child,
.part__more > :last-child {
	margin-bottom: 0;
}

/* The opening paragraph of About, a size up and in full ink. */
.part__lede p {
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink);
}

.lead-in {
	color: var(--ink);
	font-weight: 600;
}

/* Parts two and three fold after their first paragraph. The button says how
   much is behind it, and goes away once opened rather than sitting in the
   middle of the text it revealed. */
.part__more summary {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: 44px;
	padding: 0 var(--s4);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
}

.part__more summary::-webkit-details-marker {
	display: none;
}

.part__more summary span {
	color: var(--ink-3);
}

.part__more summary::after {
	content: "+";
	font-size: 18px;
	line-height: 1;
	color: var(--ink-3);
}

.part__more summary:hover {
	border-color: var(--ink);
}

.part__more[open] summary {
	display: none;
}

/* The label follows the reader down a long part. Only beside the rail: below
   1020px the masthead can wrap to two rows and would cover it. */
@media (min-width: 1021px) {
	.part__side {
		position: sticky;
		top: 96px;
	}
}

@media (max-width: 760px) {
	.part {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s3);
		padding: var(--s5) 0;
	}

	.part__side {
		display: flex;
		align-items: baseline;
		gap: var(--s3);
	}

	.part__n {
		font-size: 20px;
		margin: 0;
	}

	/* The header already shows the logo on a phone screen or two above. */
	.part--about .part__side {
		display: none;
	}

	.part__lede p {
		font-size: 18px;
	}
}

/* the right rail */

.rail {
	position: sticky;
	top: 88px;
	display: grid;
	gap: var(--s5);
}

.panel {
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--s5);
	background: var(--surface);
}

.panel h2 {
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s4);
}

.facts {
	margin: 0;
	display: grid;
	gap: var(--s4);
}

.facts dt {
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink-3);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.facts dd {
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--ink);
}

.linklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s3);
	font-size: 14px;
}

.linklist a {
	text-decoration: none;
	color: var(--ink);
	display: block;
	line-height: 1.35;
}

.linklist a:hover {
	color: var(--accent);
}

.linklist small {
	display: block;
	color: var(--ink-3);
	font-size: 12px;
	margin-top: 2px;
}

/* --- home --------------------------------------------------------------- */

.lede {
	padding: var(--s8) 0 var(--s7);
	border-bottom: 1px solid var(--line);
}

.lede h1 {
	font-size: 46px;
	letter-spacing: -0.035em;
	max-width: 17ch;
	margin-bottom: var(--s4);
}

.lede p {
	font-size: 18px;
	color: var(--ink-2);
	max-width: 58ch;
}

/* The home page. Rebuilt 2026-09-25 at the owner's request, inside the rules
   above: hairlines, no shadow, no gradient, radii of 6px or less, the accent
   only where it already lives. What makes it feel finished is scale and
   order, not decoration: a large headline, one large number, clear bands. */

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: var(--s8);
	align-items: center;
	padding: var(--s8) 0 var(--s7);
}

.hero__h1 {
	font-size: 60px;
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1.02;
	max-width: 12ch;
	margin-bottom: var(--s5);
}

.hero__sub {
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 50ch;
	margin: 0;
}

.hero .find--hero .find__input {
	min-height: 54px;
}

.hero .find--hero .btn {
	min-height: 54px;
	padding: 0 var(--s6);
}

.hero__cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	margin-top: var(--s5);
}

.hero__cats-l {
	font-size: 13px;
	color: var(--ink-3);
	margin-right: var(--s1);
}

.hero__cats .chip {
	text-decoration: none;
	min-height: 32px;
	padding: 0 var(--s3);
	font-size: 13px;
	background: transparent;
	border-color: var(--line-strong);
	color: var(--ink-2);
}

.hero__cats .chip:hover {
	border-color: var(--ink);
	color: var(--ink);
}

/* The latest check, drawn as a ticket: the store above a dashed tear line,
   the amount and the code below it. The two notches are the ends of the tear. */
.spot {
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	background: var(--surface);
	padding: var(--s5);
}

.spot__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2) var(--s4);
}

.spot__when {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	color: var(--good);
}

.spot__store {
	display: flex;
	align-items: center;
	gap: var(--s3);
	margin: var(--s5) 0 var(--s5);
}

.spot__logo {
	width: 48px;
	height: 48px;
	flex: none;
	object-fit: contain;
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 5px;
}

.spot__logo--blank {
	display: grid;
	place-items: center;
	background: var(--paper);
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink-3);
}

.spot__name {
	display: block;
	font-weight: 600;
	font-size: 19px;
	line-height: 1.2;
}

.spot__domain {
	display: block;
	font-size: 13px;
	color: var(--ink-3);
}

.spot__deal {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: var(--s3);
	margin: 0 calc(-1 * var(--s5));
	padding: var(--s5) var(--s5) var(--s4);
	border-top: 1px dashed var(--line-strong);
}

.spot__deal::before,
.spot__deal::after {
	content: "";
	position: absolute;
	top: -11px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--line-strong);
}

.spot__deal::before {
	left: -11px;
	clip-path: inset(0 0 0 50%);
}

.spot__deal::after {
	right: -11px;
	clip-path: inset(0 50% 0 0);
}

.spot__num {
	font-family: var(--font-display);
	font-size: 96px;
	font-weight: 700;
	letter-spacing: -0.06em;
	line-height: 0.85;
	white-space: nowrap;
}

.spot__unit {
	font-size: 0.5em;
	font-weight: 600;
	letter-spacing: 0;
	vertical-align: 0.72em;
}

.spot__off {
	display: grid;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	padding-bottom: 4px;
}

.spot__off span {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--ink-3);
}

.spot__label {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.spot__code {
	display: flex;
	height: 52px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--r);
	background: var(--paper);
	overflow: hidden;
}

/* The code itself stays blurred here, the same as on the store page before
   "Show code". Revealing and copying happen there, where the reader can also
   say whether it worked. */
.spot__value {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 0 var(--s4);
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.12em;
	white-space: nowrap;
	overflow: hidden;
	filter: blur(6px);
	user-select: none;
}

.spot__code .spot__btn {
	border-radius: 0;
	border-width: 0 0 0 1px;
	padding: 0 var(--s5);
}

.spot > .spot__btn {
	width: 100%;
	min-height: 52px;
}

.spot__foot {
	margin: var(--s4) 0 0;
	font-size: 13px;
	color: var(--ink-3);
}

/* The counts, a band of four, each a way in. */
.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.stats a {
	display: grid;
	gap: 2px;
	padding: var(--s5) var(--s5) var(--s5) 0;
	text-decoration: none;
	color: var(--ink);
}

.stats a + a {
	border-left: 1px solid var(--line);
	padding-left: var(--s5);
}

.stats__n {
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.05;
}

.stats__l {
	font-size: 14px;
	color: var(--ink-3);
}

.stats a:hover .stats__n {
	color: var(--accent);
}

/* How we list codes: four rules, side by side. */
.rules {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s6);
}

.rules__n {
	display: block;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-3);
	padding-bottom: var(--s3);
	margin-bottom: var(--s4);
	border-bottom: 1px solid var(--line-strong);
}

.rules__t {
	font-size: 17px;
	margin-bottom: var(--s2);
}

.rules p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}

/* A link out at the right of a section heading. */
.sect__more {
	margin-left: auto;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sect__more::after {
	content: " \2192";
}

/* Categories as tiles: the logos of stores the page really lists, the name,
   the count. */
.cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: var(--s3);
}

.cat {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"logos logos"
		"name n";
	align-items: baseline;
	gap: var(--s4) var(--s3);
	height: 100%;
	padding: var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--r);
	text-decoration: none;
	color: var(--ink);
	transition: border-color 120ms ease;
}

.cat:hover {
	border-color: var(--ink-3);
	color: var(--ink);
}

.cat__logos {
	grid-area: logos;
	display: flex;
	min-height: 28px;
}

.cat__logo {
	width: 28px;
	height: 28px;
	object-fit: contain;
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 2px;
}

.cat__logo + .cat__logo {
	margin-left: 6px;
}

.cat__logo--blank {
	display: grid;
	place-items: center;
	background: var(--surface);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	color: var(--ink-3);
}

.cat__name {
	grid-area: name;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.25;
}

.cat__n {
	grid-area: n;
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink-3);
	white-space: nowrap;
}

.cat:hover .cat__name {
	color: var(--accent);
}

/* Stores by letter: always visible, each tile carrying its real count. */
.letters {
	display: grid;
	/* 27 tiles in two even rows of 14 and 13, not 20 and a ragged 7. */
	grid-template-columns: repeat(14, minmax(0, 1fr));
	gap: var(--s2);
	margin-bottom: var(--s5);
}

.letters a {
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: var(--s2) 0;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	text-decoration: none;
	color: var(--ink);
}

.letters a:hover {
	border-color: var(--ink-3);
}

.letters__l {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
}

.letters__n {
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--ink-3);
}

/* The newest guides as cards, the picture being the product the guide is
   about, on the white plate every product photograph sits on. */
.gcards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: var(--s6) var(--s5);
}

.gcard {
	display: grid;
	gap: var(--s2);
	text-decoration: none;
	color: var(--ink);
}

.gcard__pic {
	display: block;
	aspect-ratio: 4 / 3;
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	margin-bottom: var(--s2);
}

.gcard__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--s5);
	transition: transform 200ms ease;
}

.gcard:hover .gcard__img {
	transform: scale(1.04);
}

.gcard__store {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gcard__t {
	font-weight: 600;
	font-size: 17px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.gcard:hover .gcard__t {
	color: var(--accent);
}

.gcard__d {
	font-size: 13px;
	color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
	.gcard__img {
		transition: none;
	}

	.gcard:hover .gcard__img {
		transform: none;
	}
}

@media (max-width: 1020px) {
	.hero {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s7);
	}

	.spot {
		max-width: 520px;
	}

	.rules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.hero {
		padding: var(--s6) 0 var(--s6);
	}

	.hero__h1 {
		font-size: 40px;
	}

	.hero__sub {
		font-size: 17px;
	}

	.spot__num {
		font-size: 76px;
	}

	.stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stats a:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.stats a:nth-child(n+3) {
		border-top: 1px solid var(--line);
	}

	.stats__n {
		font-size: 32px;
	}

	.rules {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s5);
	}

	.gcards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s5) var(--s4);
	}

	.gcard__img {
		padding: var(--s3);
	}

	.gcard__t {
		font-size: 15px;
	}

	.letters {
		grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	}

	/* Two across, or 24 tiles make the page 2,800px longer. */
	.cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s2);
	}

	.cat {
		grid-template-areas:
			"logos"
			"name"
			"n";
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s1);
		padding: var(--s3);
	}

	.cat__logos {
		margin-bottom: var(--s2);
	}

	.cat__logo {
		width: 24px;
		height: 24px;
	}

	.cat__name {
		font-size: 15px;
	}
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: 0;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}

.card {
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: var(--s5);
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	text-decoration: none;
	min-width: 0;
	background: var(--paper);
}

.card:hover {
	background: var(--surface);
}

.card__top {
	display: flex;
	align-items: center;
	gap: var(--s3);
}

.card__logo {
	width: 34px;
	height: 34px;
	object-fit: contain;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: #ffffff;
	padding: 3px;
	flex: none;
}

.card__name {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card__deal {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ink);
}

.card__kind {
	font-size: 12px;
	color: var(--ink-3);
	margin-top: auto;
}

/* Store tickets: the home page's checked codes and every category page.

   The same vocabulary as the code card on a store page, at a smaller size: the
   amount on a surface panel, a dashed ticket rule, the store on the right. A
   reader who clicks through meets the same object, only larger.

   Only the amount is shown. The stored titles add "Sitewide" or "All Orders" to
   almost every code, so a wall of them repeated one word and hid the one thing
   that differs, which is the number.

   Separate tickets with a gap rather than a joined table: each one is a thing
   you pick, not a row you read. */

.tix {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--s4);
}

.tix > li {
	min-width: 0;
}

.tix__card {
	--tix-fig: 104px;
	display: grid;
	grid-template-columns: var(--tix-fig) minmax(0, 1fr);
	min-height: 104px;
	height: 100%;
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	overflow: hidden;
	transition: border-color 120ms ease;
}

.tix__card:hover {
	border-color: var(--ink-3);
	color: var(--ink);
}

.tix__card:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.tix__amount {
	background: var(--surface);
	border-right: 1px dashed var(--line-strong);
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 4px;
	padding: var(--s3) var(--s2);
	text-align: center;
}

.tix__num {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	white-space: nowrap;
}

.tix__amount.is-long .tix__num {
	font-size: 24px;
}

.tix__unit {
	font-size: 0.56em;
	font-weight: 600;
	vertical-align: 0.62em;
	letter-spacing: 0;
}

.tix__off {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.tix__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s4);
	min-width: 0;
}

.tix__store {
	display: flex;
	align-items: center;
	gap: var(--s3);
	min-width: 0;
}

.tix__logo {
	width: 32px;
	height: 32px;
	flex: none;
	object-fit: contain;
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 3px;
}

.tix__logo--blank {
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	color: #14161a;
}

/* Two lines, then an ellipsis. "Pure Numb Tattoo Numbing" and "Santa Barbara
   Chocolate" are real names and deserve to be read whole where they fit. */
.tix__name {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.25;
	min-width: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.tix__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2);
	font-size: 13px;
	color: var(--ink-3);
}

.tix__checked {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.tix__checked svg {
	flex: none;
	color: var(--good);
}

.tix__kind {
	min-width: 0;
}

.tix__go {
	flex: none;
	margin-left: auto;
	color: var(--ink-3);
	transition: color 120ms ease, transform 120ms ease;
}

.tix__card:hover .tix__go,
.tix__card:focus-visible .tix__go {
	color: var(--accent);
	transform: translateX(2px);
}

@media (max-width: 560px) {
	.tix {
		gap: var(--s3);
	}

	.tix__card {
		--tix-fig: 92px;
		min-height: 96px;
	}

	.tix__num {
		font-size: 28px;
	}

	.tix__amount.is-long .tix__num {
		font-size: 21px;
	}

	.tix__body {
		padding: var(--s3) var(--s4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tix__card,
	.tix__go {
		transition: none;
	}

	.tix__card:hover .tix__go,
	.tix__card:focus-visible .tix__go {
		transform: none;
	}
}

.postlist {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line);
}

/*
   One article in a list. Three parts: an optional thumbnail, the title, and a
   meta line holding the date and one fact, kept in a single wrapper so the two
   can share a line rather than each claiming a grid cell of their own.
*/
.postrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--s3) var(--s5);
	align-items: baseline;
	padding: var(--s4) 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
}

.postrow--thumb {
	grid-template-columns: 52px minmax(0, 1fr) auto;
}

.postrow:hover .postrow__t {
	color: var(--accent);
}

.postrow__i {
	width: 52px;
	height: 52px;
	object-fit: contain;
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 4px;
	align-self: center;
}

.postrow__t {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.35;
	min-width: 0;
}

.postrow__m {
	display: flex;
	align-items: baseline;
	gap: var(--s4);
	white-space: nowrap;
	font-size: 13px;
	color: var(--ink-3);
	justify-self: end;
}

.postrow__s {
	color: var(--ink-3);
}

/* --- article ------------------------------------------------------------ */

.article {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: var(--s5) var(--s8);
	align-items: start;
	padding: var(--s5) 0 var(--s9);
}

.article__head {
	grid-column: 1 / -1;
	max-width: 860px;
	padding: var(--s4) 0 var(--s6);
}

/* Which store this guide belongs to, as the eyebrow over the headline. */
.article__store {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	margin-bottom: var(--s4);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	text-decoration: none;
}

.article__store:hover {
	color: var(--ink);
}

.article__logo {
	width: 28px;
	height: 28px;
	object-fit: contain;
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 2px;
}

.article__logo--blank {
	display: grid;
	place-items: center;
	background: var(--surface);
	font-size: 12px;
	color: var(--ink-3);
}

.article__head h1 {
	font-size: 46px;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.1;
	max-width: 22ch;
	margin-bottom: var(--s4);
}

.article__sub {
	font-family: var(--font-read);
	font-size: 20px;
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 60ch;
	margin-bottom: var(--s5);
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s5);
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink-3);
	border-top: 1px solid var(--line);
	padding-top: var(--s4);
}

/* The progress bar: a line along the very top of the window that fills as
   the reader moves through the article. On the top edge rather than under
   the masthead, because the masthead wraps to two rows on a phone. Ink, not
   the accent, which stays where it is. */
.readbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 31;
	pointer-events: none;
}

.readbar__fill {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--ink);
	transform: scaleX(var(--read, 0));
	transform-origin: 0 50%;
}

/* The rail: the contents list, then the store's code, pinned beside the
   article while it scrolls. */
.article__rail {
	position: sticky;
	top: 88px;
	display: grid;
	gap: var(--s5);
	max-height: calc(100vh - 104px);
	overflow-y: auto;
	scrollbar-width: thin;
}

.toc {
	font-size: 14px;
}

.toc__h {
	display: flex;
	align-items: center;
	gap: var(--s2);
	list-style: none;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s3);
}

.toc__h::-webkit-details-marker {
	display: none;
}

.toc__count {
	font-size: 11px;
	letter-spacing: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 0 6px;
}

/* Beside the article the list cannot be folded: the summary is a label. */
@media (min-width: 1021px) {
	.toc__h {
		pointer-events: none;
	}
}

/* The line down the left of the list is also the reading line: --toc-read,
   set by the script, fills it as the reader moves down the article. */
.toc__list {
	--toc-read: 0;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.toc__list::before,
.toc__list::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	border-radius: 1px;
}

.toc__list::before {
	background: var(--line);
}

.toc__list::after {
	background: var(--ink-3);
	transform: scaleY(var(--toc-read));
	transform-origin: 50% 0;
}

.toc__list a {
	position: relative;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: var(--s2);
	padding: 6px var(--s2) 6px var(--s4);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	color: var(--ink-3);
	text-decoration: none;
	line-height: 1.35;
	transition: color 120ms ease, background-color 120ms ease;
}

.toc__n {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	padding-top: 2px;
	color: var(--ink-3);
}

.toc__list a:hover {
	color: var(--ink);
}

/* Sections already read, a step brighter than those ahead. */
.toc__list a.is-read {
	color: var(--ink-2);
}

/* The section on screen now: full ink, a surface behind it and a solid mark
   on the reading line. */
.toc__list a[aria-current="location"] {
	color: var(--ink);
	background: var(--surface);
	font-weight: 600;
}

.toc__list a[aria-current="location"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 2px;
	z-index: 1;
	background: var(--ink);
}

.toc__list a[aria-current="location"] .toc__n {
	color: var(--ink);
}

.toc__top {
	display: inline-block;
	margin: var(--s3) 0 0 var(--s4);
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink-3);
	text-decoration: none;
}

.toc__top::before {
	content: "\2191  ";
}

.toc__top:hover {
	color: var(--ink);
}

/* The store's code under the contents: a small ticket, the one action a
   coupon site offers from a guide. Honest status, the same as the store page. */
.railcode {
	display: grid;
	gap: var(--s2);
	padding: var(--s4);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	background: var(--surface);
	text-decoration: none;
	color: var(--ink);
}

.railcode:hover {
	border-color: var(--ink-3);
	color: var(--ink);
}

.railcode__store {
	display: flex;
	align-items: center;
	gap: var(--s2);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.railcode__logo {
	flex: none;
	width: 32px;
	height: 32px;
	object-fit: contain;
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 2px;
}

.railcode__logo--blank {
	display: grid;
	place-items: center;
	background: var(--paper);
	font-size: 12px;
	color: var(--ink-3);
}

.railcode__deal {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	padding-top: var(--s2);
	border-top: 1px dashed var(--line-strong);
}

.railcode__status {
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--ink-3);
}

.railcode__go {
	margin-top: var(--s1);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border-radius: var(--r-sm);
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
}

.railcode:hover .railcode__go {
	background: var(--accent);
	color: var(--accent-ink);
}

.body {
	max-width: var(--measure);
	font-family: var(--font-read);
	/* 18px, not the 19px this carried while the body was a serif. A sans of the
	   same optical size reads larger, and the article's own rule is a line
	   height of 1.5 to 2 for body copy. */
	font-size: 18px;
	line-height: 1.7;
	color: var(--ink);
}

.body p {
	margin: 0 0 var(--s5);
}

.body h2 {
	font-family: var(--font-head);
	font-size: 25px;
	letter-spacing: -0.02em;
	margin: var(--s8) 0 var(--s4);
}

/* Each section carries the number it has in the contents list, so the list
   and the page read as one map. Only the article's own sections and the
   Questions heading count, the same ones the list numbers first. */
.body {
	counter-reset: sect;
}

.body > h2 {
	counter-increment: sect;
	/* html already keeps 88px clear for the sticky masthead on every jump;
	   this is a little air on top of it. */
	scroll-margin-top: 16px;
}

.body > h2::before {
	content: counter(sect, decimal-leading-zero);
	display: block;
	margin-bottom: var(--s2);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink-3);
}

.body > h2:first-child,
.body > .shot:first-child + h2 {
	margin-top: 0;
}

.body #products {
	scroll-margin-top: 16px;
}

.body h3 {
	font-family: var(--font-head);
	font-size: 19px;
	margin: var(--s6) 0 var(--s3);
}

.body ul,
.body ol {
	margin: 0 0 var(--s5);
	padding-left: 1.2em;
}

.body li {
	margin-bottom: var(--s2);
}

.body strong {
	font-weight: 600;
}

.tablewrap {
	overflow-x: auto;
	margin: 0 0 var(--s5);
	border: 1px solid var(--line);
	border-radius: var(--r);
}

.body table {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--font-read);
	font-size: 14px;
}

.body th,
.body td {
	text-align: left;
	padding: var(--s3) var(--s4);
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.body th {
	background: var(--surface);
	font-weight: 600;
	white-space: nowrap;
}

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

.storebox {
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	padding: var(--s5);
	display: flex;
	gap: var(--s4);
	align-items: center;
	background: var(--surface);
	margin: var(--s7) 0 0;
	text-decoration: none;
	color: var(--ink);
	max-width: var(--measure);
}

.storebox:hover {
	border-color: var(--ink-3);
	color: var(--ink);
}

.storebox__text {
	display: grid;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.storebox__t {
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
}

.storebox__s {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink-2);
}

.storebox__go {
	font-size: 22px;
	color: var(--ink-3);
	transition: transform 120ms ease;
}

.storebox:hover .storebox__go {
	transform: translateX(3px);
	color: var(--ink);
}

/* --- pages: About, the policies, Contact ------------------------------------

   Added 2026-09-25. A side list of every site page, then the page in the same
   reading column as the guides. The building blocks below (.lead, .keyfacts,
   .rulegrid, .note, .labelpair, .keypoints) are plain classes, so the pages
   stay editable in the WordPress admin. */

.doc {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--s8);
	align-items: start;
	padding: var(--s5) 0 var(--s9);
}

.doc__nav {
	position: sticky;
	top: 88px;
}

.doc__navh {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 var(--s3);
}

.doc__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.doc__nav a {
	display: block;
	padding: 8px var(--s3);
	border-radius: var(--r-sm);
	font-size: 15px;
	color: var(--ink-2);
	text-decoration: none;
	border-left: 2px solid transparent;
}

.doc__nav a:hover {
	color: var(--ink);
	background: var(--surface);
}

.doc__nav a[aria-current="page"] {
	color: var(--ink);
	background: var(--surface);
	font-weight: 600;
	border-left-color: var(--ink);
}

.doc__main {
	min-width: 0;
	max-width: var(--measure);
}

.doc__head {
	padding-bottom: var(--s5);
	margin-bottom: var(--s6);
	border-bottom: 1px solid var(--line);
}

.doc__head h1 {
	font-size: 44px;
	letter-spacing: -0.035em;
	line-height: 1.1;
	margin: var(--s2) 0 var(--s4);
}

.doc__sub {
	font-size: 20px;
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0 0 var(--s4);
}

.doc__meta {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink-3);
	margin: 0;
}

/* No section numbers here: they belong to the guides' contents list. */
.doc__body > h2::before {
	content: none;
}

.doc__body > h2 {
	font-size: 24px;
	margin-top: var(--s7);
}

.doc__body > h2:first-child {
	margin-top: 0;
}

.doc__foot {
	margin-top: var(--s7);
	padding-top: var(--s4);
	border-top: 1px solid var(--line);
	font-size: 15px;
	color: var(--ink-3);
}

.doc__foot p {
	margin: 0;
}

/* The Contact page's card: when we reply, and where else to write. */
.doc__card {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--s4) var(--s5);
	padding: var(--s5);
	margin-bottom: var(--s6);
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--surface);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-2);
}

.doc__card p {
	margin: 0;
}

.doc__cardh {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s1) !important;
}

/* The opening paragraph of a page. */
.body .lead {
	font-size: 20px;
	line-height: 1.6;
	color: var(--ink);
	margin-bottom: var(--s6);
}

/* Four live figures in a band. */
.keyfacts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin: 0 0 var(--s6);
}

.keyfacts > div {
	display: grid;
	gap: 2px;
	padding: var(--s4) var(--s4) var(--s4) 0;
}

.keyfacts > div + div {
	border-left: 1px solid var(--line);
	padding-left: var(--s4);
}

.keyfacts strong {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.1;
}

.keyfacts span {
	font-size: 13px;
	line-height: 1.35;
	color: var(--ink-3);
}

/* Short statements in a two by two grid. */
.rulegrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s3);
	margin: 0 0 var(--s5);
}

.rulegrid > div {
	padding: var(--s4) var(--s5);
	border: 1px solid var(--line);
	border-radius: var(--r);
}

.rulegrid h3 {
	font-size: 16px;
	margin: 0 0 var(--s2);
}

.rulegrid p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}

/* A point worth pausing on. */
.body .note {
	padding: var(--s4) var(--s5);
	border-left: 2px solid var(--line-strong);
	border-radius: 0 var(--r) var(--r) 0;
	background: var(--surface);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-2);
}

/* The affiliate switch, stated first. */
.body .note--status {
	border-left-color: var(--accent);
	color: var(--ink);
}

/* The two labels a code can carry, side by side. */
.labelpair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s3);
	margin: 0 0 var(--s5);
}

.labelpair__item {
	padding: var(--s4) var(--s5);
	border: 1px solid var(--line);
	border-radius: var(--r);
}

.labelpair__item p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}

.body .labelpair__tag {
	display: inline-block;
	margin-bottom: var(--s3);
	padding: 3px 9px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-3);
}

.labelpair__item.is-checked .labelpair__tag {
	color: var(--good);
	background: var(--good-soft);
	border-color: color-mix(in srgb, var(--good) 35%, var(--line));
}

/* The privacy policy's short version. */
.keypoints {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s3);
	margin: 0 0 var(--s6);
}

.body .keypoints p {
	margin: 0;
	padding: var(--s4);
	border-radius: var(--r);
	background: var(--surface);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
}

.keypoints strong {
	display: block;
	color: var(--ink);
	font-size: 16px;
	margin-bottom: 2px;
}

/* The contact form. */
.cform {
	display: grid;
	gap: var(--s4);
	padding: var(--s5);
	margin: 0 0 var(--s6);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	background: var(--paper);
	scroll-margin-top: 16px;
}

.cform__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s4);
}

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

.cform label {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
}

.cform input,
.cform select,
.cform textarea {
	width: 100%;
	font: inherit;
	font-family: var(--font-read);
	/* 16px or iOS zooms the page when a field is tapped. */
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	padding: 10px 12px;
	min-height: 46px;
}

.cform textarea {
	resize: vertical;
	min-height: 160px;
}

.cform input:focus,
.cform select:focus,
.cform textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--ink-3);
}

.cform [aria-invalid="true"] {
	border-color: #d4553f;
}

.body .cform__err {
	margin: 0;
	font-size: 14px;
	color: #d4553f;
}

.body .cform__alert {
	padding: var(--s3) var(--s4);
	border-left: 2px solid #d4553f;
	background: var(--surface);
	font-size: 15px;
	line-height: 1.5;
}

/* The field robots fill in. Off screen, never display:none, which some of
   them skip. */
.cform__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cform__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s3) var(--s5);
}

.cform__send {
	min-height: 48px;
	padding: 0 var(--s6);
}

.body .cform__small {
	flex: 1 1 240px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-3);
}

.cform--sent {
	justify-items: start;
	gap: var(--s2);
}

.cform--sent svg {
	color: var(--good);
}

.body .cform--sent h2 {
	margin: 0;
	font-size: 22px;
}

.body .cform--sent p {
	margin: 0;
	color: var(--ink-2);
}

@media (max-width: 1020px) {
	.doc {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s5);
	}

	/* The page list becomes a row of chips above the page. */
	.doc__nav {
		position: static;
		order: 2;
		padding-top: var(--s6);
		border-top: 1px solid var(--line);
	}

	.doc__nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s2);
	}

	.doc__nav a {
		border: 1px solid var(--line);
		min-height: 40px;
		display: flex;
		align-items: center;
	}

	.doc__main {
		max-width: none;
	}
}

@media (max-width: 680px) {
	.doc__head h1 {
		font-size: 32px;
	}

	.doc__sub,
	.body .lead {
		font-size: 18px;
	}

	.keyfacts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.keyfacts > div:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.keyfacts > div:nth-child(n+3) {
		border-top: 1px solid var(--line);
	}

	.rulegrid,
	.labelpair,
	.keypoints,
	.cform__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.cform {
		padding: var(--s4);
	}

	.cform__send {
		width: 100%;
	}
}

.subcats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	margin-top: var(--s5);
}

.subcats__l {
	font-size: 13px;
	color: var(--ink-3);
	margin-right: var(--s1);
}

.subcats .chip {
	text-decoration: none;
	min-height: 32px;
	padding: 0 var(--s3);
	font-size: 13px;
	background: transparent;
	border-color: var(--line-strong);
}

.subcats .chip:hover {
	border-color: var(--ink);
	color: var(--ink);
}

/* --- footer -------------------------------------------------------------

   Rebuilt 2026-09-25 at the owner's request. Three bands on the surface
   colour, separated by hairlines: a last way in (a large line and the store
   finder), the brand and four columns of links, and a base line. Premium by
   scale and spacing, in the site's own rules: no shadow, no gradient, the
   accent only on the paid-links note, where the disclosure always carries it. */

.foot {
	margin-top: var(--s9);
	border-top: 1px solid var(--line);
	background: var(--surface);
	font-size: 15px;
	color: var(--ink-3);
}

/* 1. A last way in. */
.foot__cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	align-items: center;
	gap: var(--s5) var(--s8);
	padding: var(--s8) 0 var(--s7);
	border-bottom: 1px solid var(--line);
}

.foot__cta-h {
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--ink);
	max-width: 20ch;
	margin: 0 0 var(--s3);
}

.foot__cta-p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 52ch;
	margin: 0;
}

.find--footer .find__input {
	height: 52px;
	padding: 0 var(--s4) 0 42px;
	font-size: 16px;
	background: var(--paper);
	border-color: var(--line-strong);
}

.find--footer .find__icon {
	left: 15px;
}

.find--footer .btn {
	min-height: 52px;
	padding: 0 var(--s5);
}

/* 2. The brand and the links. */
.foot__main {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
	gap: var(--s6) var(--s6);
	padding: var(--s7) 0;
}

.foot .brand {
	font-size: 18px;
	color: var(--ink);
}

.foot__about {
	margin: var(--s4) 0 var(--s4);
	max-width: 36ch;
	line-height: 1.6;
	color: var(--ink-2);
}

.foot__paid {
	margin: 0;
	max-width: 40ch;
	padding-left: var(--s3);
	border-left: 2px solid var(--accent);
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-3);
}

.foot__h {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 var(--s4);
}

.foot__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s3);
}

.foot a {
	color: var(--ink-2);
	text-decoration: none;
	transition: color 120ms ease;
}

.foot__col a:hover,
.foot__base a:hover {
	color: var(--ink);
}

/* 3. The base line. */
.foot__base {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s2) var(--s6);
	padding: var(--s5) 0 var(--s6);
	border-top: 1px solid var(--line);
	font-size: 13px;
}

.foot__base p {
	margin: 0;
}

.foot__merchants {
	flex: 1 1 320px;
}

.foot__top {
	margin-left: auto;
	font-family: var(--font-display);
	font-weight: 600;
	white-space: nowrap;
}

.foot__top::before {
	content: "\2191  ";
}

@media (prefers-reduced-motion: reduce) {
	.foot a {
		transition: none;
	}
}

@media (max-width: 1020px) {
	.foot__cta {
		grid-template-columns: minmax(0, 1fr);
	}

	.foot__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.foot__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 680px) {
	.foot__cta {
		padding: var(--s7) 0 var(--s6);
	}

	.foot__cta-h {
		font-size: 24px;
	}

	.foot__col ul {
		gap: 0;
	}

	/* A thumb covers about 44px. */
	.foot__col a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.foot__top {
		margin-left: 0;
	}
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1020px) {
	.store,
	.article {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s7);
	}

	.rail {
		position: static;
	}

	/* The rail sits between the headline and the article: the contents fold
	   into a panel, and the store's code waits for the box at the end. */
	.article__rail {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.railcode {
		display: none;
	}

	.toc {
		border: 1px solid var(--line);
		border-radius: var(--r);
		background: var(--surface);
		padding: 0 var(--s4);
	}

	.toc__h {
		margin: 0;
		min-height: 48px;
		cursor: pointer;
	}

	.toc__h::after {
		content: "+";
		margin-left: auto;
		font-size: 20px;
		font-weight: 400;
		letter-spacing: 0;
		color: var(--ink-3);
	}

	.toc[open] .toc__h::after {
		content: "\2013";
	}

	.toc[open] {
		padding-bottom: var(--s4);
	}

	.toc__list a {
		min-height: 40px;
		align-items: center;
	}


	.article__head {
		grid-column: auto;
		padding-bottom: 0;
	}
}

@media (max-width: 680px) {
	.wrap {
		padding: 0 var(--s4);
	}

	h1.store__h1 {
		font-size: 30px;
	}

	.lede h1 {
		font-size: 33px;
	}

	.article__head h1 {
		font-size: 30px;
	}

	.body {
		font-size: 17px;
	}

	.brand {
		font-size: 16px;
	}
}

/* Below 900px the masthead wraps to two rows, 125px tall, so a jump from the
   contents list needs that much more room than html's 88px. */
@media (max-width: 900px) {
	.body > h2,
	.body #products {
		scroll-margin-top: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* --- article imagery ----------------------------------------------------- */

/*
   The export carries no blog images, so an article's pictures are the products
   it actually links to. A single product shot blown up to hero size looks like
   a mistake, so the lead is a contact sheet of up to four, which reads as a
   deliberate choice and tells the reader what the piece covers before the first
   sentence.

   Every shot sits on a white plate in both themes, because merchant cut-outs
   are dark artwork on transparency.
*/

.lead {
	margin: 0 0 var(--s6);
	max-width: var(--measure);
}

.lead__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}

.lead__grid img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: #ffffff;
	padding: var(--s4);
}

.lead figcaption {
	font-family: var(--font-read);
	font-size: 12px;
	color: var(--ink-3);
	margin-top: var(--s3);
	line-height: 1.5;
}

.postrow__i--blank {
	background: var(--surface);
}

@media (max-width: 680px) {
	/*
	   On a phone the title goes beside the thumbnail and the meta line sits
	   under it. Named areas rather than automatic placement, because automatic
	   placement is what put the title in the 52px thumbnail column and wrapped
	   it one word per line.
	*/
	.postrow {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"meta";
		gap: 2px;
		align-items: start;
	}

	.postrow--thumb {
		grid-template-columns: 52px minmax(0, 1fr);
		grid-template-areas:
			"img title"
			"img meta";
		column-gap: var(--s4);
	}

	.postrow__i {
		grid-area: img;
		align-self: start;
	}

	.postrow__t {
		grid-area: title;
		/* Three lines is enough to tell one guide from another, and it keeps
		   every row about the same height. */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.postrow__m {
		grid-area: meta;
		justify-self: start;
		gap: var(--s3);
	}

	.lead__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- a product picture inside an article --------------------------------- */

/*
   Placed by TCP_Figures, after the block that first mentions the product.
   Floated right so the text keeps flowing past it, which is what stops five
   pictures turning a 32 block article into a slideshow. Cleared so two can
   never sit side by side, and full width on a phone where a 240px float would
   leave a two word column beside it.
*/

.shot {
	float: right;
	clear: right;
	width: 240px;
	margin: var(--s2) 0 var(--s5) var(--s6);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--paper);
}

.shot img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: #ffffff;
	padding: var(--s4);
}

.shot figcaption {
	font-family: var(--font-read);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink);
	padding: var(--s3);
	border-top: 1px solid var(--line);
	display: grid;
	gap: 2px;
}

.shot__price {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
}

.shot__note {
	color: var(--ink-3);
	font-size: 11px;
}

/* A table must never be squeezed into a column beside a float. */
.tablewrap {
	clear: both;
}

@media (max-width: 760px) {
	.shot {
		float: none;
		width: 100%;
		max-width: 320px;
		margin: var(--s5) auto;
	}
}

/* --- find a store -------------------------------------------------------- */

/*
   One component in two sizes: compact in the masthead on every page, large on
   the home page. The results are a dropdown anchored under the field, so the
   page behind it never jumps while someone is typing.
*/

.find {
	position: relative;
	min-width: 0;
}

.find--hero {
	margin: var(--s6) 0 0;
	max-width: 560px;
}

.find--header {
	flex: 1;
	max-width: 400px;
	margin-left: var(--s2);
}

.find__label {
	display: block;
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 600;
	margin-bottom: var(--s2);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.find__row {
	display: flex;
	gap: var(--s3);
	position: relative;
}

.find__input {
	flex: 1;
	min-width: 0;
	font-family: var(--font-read);
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	appearance: none;
}

.find--hero .find__input {
	font-size: 17px;
	padding: var(--s3) var(--s4);
}

.find--header .find__input {
	font-size: 14px;
	height: 38px;
	padding: 0 36px 0 36px;
	border-color: var(--line);
	background: var(--surface);
}

.find__icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-3);
	pointer-events: none;
	z-index: 1;
}

.find__key {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink-3);
	background: var(--paper);
	pointer-events: none;
}

.find--header .find__input:focus ~ .find__key {
	visibility: hidden;
}

.find__input::placeholder {
	color: var(--ink-3);
}

.find__input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
	background: var(--paper);
}

.find__count {
	margin: var(--s2) 0 0;
	font-size: 13px;
	color: var(--ink-3);
	min-height: 1.2em;
}

/* the dropdown */

.findlist {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	max-height: 60vh;
	overflow-y: auto;
	/* The one shadow on the site. A layer floating over the page has to read as
	   a layer, and a hairline alone does not do that. */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] .findlist {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.findlist__row + .findlist__row {
	border-top: 1px solid var(--line);
}

.findlist__row a {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s3);
	padding: var(--s3) var(--s4);
	text-decoration: none;
	color: var(--ink);
}

.findlist__row a img,
.findlist__blank {
	width: 28px;
	height: 28px;
	object-fit: contain;
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 2px;
}

.findlist__blank {
	display: grid;
	place-items: center;
	background: var(--surface);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	color: var(--ink-3);
}

.findlist__name {
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.findlist__deal {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	white-space: nowrap;
}

.findlist__row:hover a,
.findlist__row[aria-selected="true"] a {
	background: var(--surface);
}

.findlist__row[aria-selected="true"] .findlist__deal {
	color: var(--accent);
}

.findlist__none {
	padding: var(--s4);
	font-size: 14px;
	color: var(--ink-3);
}

/* --- every store, A to Z -------------------------------------------------- */

/*
   All 480 in one list. It is the only thing on the page that guarantees every
   store page is one click from the home page, which is how a crawler reaches
   them all without guessing, and how someone browses when they do not have a
   name in mind.
*/

.azjump {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-bottom: var(--s6);
}

.azjump a {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--ink-2);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	min-width: 30px;
	padding: 4px 6px;
	text-align: center;
}

.azjump a:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.azblock {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--s4);
	padding: var(--s4) 0;
	border-top: 1px solid var(--line);
	scroll-margin-top: 88px;
}

.azblock__letter {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--ink-3);
	line-height: 1.1;
}

.azlist {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 4;
	column-gap: var(--s5);
	font-size: 14px;
}

.azlist li {
	break-inside: avoid;
	margin-bottom: 5px;
}

.azlist a {
	text-decoration: none;
	color: var(--ink-2);
}

.azlist a:hover {
	color: var(--accent);
}

/* The letter jump and the way out to the full list, on one row. */
.az__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s3) var(--s5);
	margin-bottom: var(--s6);
}

.az__bar .azjump {
	margin-bottom: 0;
}

.az__all,
.azmore {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--line-strong);
	text-underline-offset: 3px;
}

.az__all {
	white-space: nowrap;
	padding: 4px 0;
}

.az__all::after,
.azmore::after {
	content: " \2192";
}

.az__all:hover,
.azmore:hover {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

.azblock__body {
	min-width: 0;
}

.azmore {
	display: inline-block;
	margin-top: var(--s3);
}

.azblock__count {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ink-3);
}

@media (max-width: 900px) {
	.azlist {
		columns: 2;
	}
}

/*
   Under 900px the masthead wraps and the search takes a row of its own. Two
   rows of sticky header is the price of having search reachable from every
   page on a phone, which is worth more than 40px of scroll.
*/
@media (max-width: 900px) {
	.masthead__in {
		flex-wrap: wrap;
		height: auto;
		padding-top: var(--s3);
		padding-bottom: var(--s3);
		gap: var(--s3) var(--s4);
	}

	.find--header {
		order: 3;
		flex-basis: 100%;
		max-width: none;
		margin-left: 0;
	}

	/* The sections move into the Menu. */
	.nav {
		display: none;
	}

	.menubtn {
		display: inline-grid;
	}

	.find__key {
		display: none;
	}
}

@media (max-width: 560px) {
	.azlist {
		columns: 1;
	}

	.azblock {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s2);
	}

	.find--hero .find__row {
		flex-wrap: wrap;
	}

	.find--hero .find__row .btn {
		width: 100%;
	}

	/* The dropdown must escape a wrapped row, or it anchors to the button. */
	.find--hero .findlist {
		top: auto;
	}
}

/* --- the folded A to Z ---------------------------------------------------- */

.az {
	border-top: 1px solid var(--line);
}

.az__summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s4) var(--s6) var(--s4) 0;
	position: relative;
	min-height: 48px;
}

.az__summary::-webkit-details-marker {
	display: none;
}

.az__summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-3);
	font-size: 22px;
	line-height: 1;
}

.az[open] .az__summary::after {
	content: "\2013";
}

.az__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 17px;
}

.az__hint {
	font-size: 13px;
	color: var(--ink-3);
}

/* --- phones --------------------------------------------------------------- */

/*
   Measured on a 375px viewport rather than guessed at.

   A form field under 16px makes iOS Safari zoom the whole page in the moment
   it is tapped, and the reader then has to pinch back out. 16px is the floor.

   WCAG 2.2 sets 24 by 24 CSS pixels as the minimum target. Anything a thumb is
   meant to hit often, a button or a row in a list, is taken to 44 instead,
   which is the size a fingertip actually covers.
*/

@media (max-width: 760px) {
	.find__input,
	input[type="search"],
	input[type="text"],
	input[type="email"],
	select,
	textarea {
		font-size: 16px;
	}

	/* Written at the same weight as the rule it has to beat. A plain
	   .find__input loses to .find--header .find__input whatever the order. */
	.find--header .find__input,
	.find--hero .find__input {
		font-size: 16px;
	}

	.find--header .find__input {
		height: 44px;
		padding: 0 var(--s3) 0 36px;
	}

	.btn,
	.deal__show,
	.findlist__row a {
		min-height: 44px;
	}

	/* A thumb covers about 44px. */
	.iconbtn {
		width: 44px;
		height: 44px;
	}

	/* Links that sit in running text only need the 24px minimum, and get it
	   from padding rather than from a taller line, so the paragraph still
	   reads as a paragraph. */
	.crumbs a,
	.store__site a,
	.review__src a,
	.linklist a,
	.facts dd a,
	.azlist a {
		display: inline-block;
		min-height: 24px;
		padding-top: 3px;
		padding-bottom: 3px;
	}

	.azlist li {
		margin-bottom: var(--s2);
	}

	.azjump a {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.product__name {
		min-height: 24px;
		font-size: 13px;
	}

	/*
	   Two products to a row on a phone, which is what every shop does. At the
	   desktop minimum of 190px only one column fits a 358px screen, so eight
	   products became eight screenfuls of scrolling.
	*/
	.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s4);
	}

	.product__for {
		font-size: 11px;
	}

	.product__price {
		font-size: 14px;
	}

	.faq summary,
	.az__summary {
		min-height: 48px;
	}
}