/* TheLowPrice Sales Floor — the "Shelf tag" design (approved 2026-09-27).
   Tokens first, then components, then pages. Page-specific rules live here too, grouped, so
   the design system is one file to read. Light only at launch; dark mode is a later change. */

/* Fonts are served from this site, not Google Fonts (2026-10-16): the Google stylesheet was a
   render-blocking request to a second origin before first paint (mobile FCP 3.1s). Latin subset
   only, one variable file per family; App.razor preloads the two used above the fold. The URLs
   are plain, not fingerprinted, so they match the preload exactly.

   Each family is followed by a FALLBACK face built from Arial (or its metric twins on Linux and
   Android), sized to set the same width, so a reader who sees the fallback first sees no reflow
   when the real font lands. Lighthouse measured desktop CLS 0.342: on Linux the plain system-ui
   fallback is much wider, so the hero headline wrapped differently until the swap. The sizes were
   measured against the live fonts: Bricolage at 800 sets 83-89% of Arial Bold's width (narrower
   the bigger it gets, from optical sizing), at 700 95-101%; Instrument Sans 100% at 400, 97% at 600.
   Faces are split by weight because one size-adjust cannot match both. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); }

@font-face { font-family: "Display Fallback"; font-weight: 100 649; size-adjust: 100%; ascent-override: 93%; descent-override: 27%; line-gap-override: 0%;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"), local("Roboto"); }
@font-face { font-family: "Display Fallback"; font-weight: 650 749; size-adjust: 98%; ascent-override: 95%; descent-override: 28%; line-gap-override: 0%;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"), local("Roboto Bold"); }
@font-face { font-family: "Display Fallback"; font-weight: 750 900; size-adjust: 85%; ascent-override: 109%; descent-override: 32%; line-gap-override: 0%;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"), local("Roboto Bold"); }
@font-face { font-family: "Body Fallback"; font-weight: 100 549; size-adjust: 100%; ascent-override: 97%; descent-override: 25%; line-gap-override: 0%;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"), local("Roboto"); }
@font-face { font-family: "Body Fallback"; font-weight: 550 900; size-adjust: 97%; ascent-override: 100%; descent-override: 26%; line-gap-override: 0%;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"), local("Roboto Bold"); }
@font-face { font-family: "Mono Fallback"; size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%;
  src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("Cousine"); }

:root {
  --paper: #F6F4EF;       /* ground */
  --card: #FFFFFF;
  --ink: #15171C;         /* text, primary buttons */
  --ink-2: #4A4F5A;       /* secondary text */
  --ink-3: #62666F;       /* captions — 5:1 on paper */
  --line: #E4E0D6;
  --line-2: #EEEAE2;
  --field: #D8D3C8;
  --tag: #FFD84D;         /* the shelf tag */
  --good: #0E6B45;        /* green only ever means a good price */
  --good-bg: #E3F2EA;
  --wait: #8A4B00;        /* amber means wait */
  --wait-bg: #FFF1DB;
  --img: #EDEAE3;
  --radius: 14px;
  --radius-lg: 18px;
  --display: "Bricolage Grotesque", "Display Fallback", system-ui, sans-serif;
  --body: "Instrument Sans", "Body Fallback", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Mono Fallback", ui-monospace, monospace;
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--body); }
/* The page never pans sideways on a phone, whatever a long word or a wide control does: a reader
   who drags slightly off vertical used to slide the whole page (reported 2026-10-16). clip, not
   hidden: it makes no scroll container, so the product page's sticky buy bar still sticks. */
html, body { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--good); }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--good); outline-offset: 2px; border-radius: 6px; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-3); }
.h1 { margin: 0; font: 800 52px/1.05 var(--display); letter-spacing: -.03em; }
.h2 { margin: 0; font: 700 30px/1.15 var(--display); letter-spacing: -.02em; }
.h3 { margin: 0; font: 700 22px/1.2 var(--display); letter-spacing: -.015em; }
.lede { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 820px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.hdr { background: var(--card); border-bottom: 1px solid var(--line); }
.hdr-row { height: 76px; display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; font: 800 22px var(--display); letter-spacing: -.02em; white-space: nowrap; }
.logo small { font-weight: 600; color: var(--ink-3); font-size: inherit; }
.logo:hover { color: var(--ink); }
.search { flex-grow: 1; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border: 1.5px solid var(--field); border-radius: 999px; background: #FBFAF7; }
.search:focus-within { border-color: var(--ink); }
.search input { border: 0; background: transparent; font: 500 16px var(--body); flex-grow: 1; min-width: 0; color: var(--ink); outline: none; }
.nav { display: flex; gap: 26px; font-weight: 600; font-size: 15px; }
.nav a { padding: 12px 0; white-space: nowrap; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
/* Between the phone layout and a full desktop window the five header items do not fit beside the
   search box: measured 2026-10-16 at 870px the row was 192px too wide and the page scrolled sideways.
   "How we judge prices" is the longest and is in the footer on every page, so it goes first. */
@media (max-width: 1100px) { .nav .nav-wide { display: none; } }
.menu { display: none; }
.chips { display: none; }

/* ── Tags, evidence, buttons ────────────────────────────────────────────── */
.tag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; height: 28px; padding: 0 10px 0 18px; background: var(--tag); color: var(--ink); font: 700 14px var(--display); clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); }
.tag::before { content: ""; position: absolute; left: 8px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; }
.deal-tag { position: absolute; top: 12px; right: 12px; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 6px; background: #CC0C39; color: #FFFFFF; font-weight: 600; font-size: 12px; }
.ev { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--good); }
.ev::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ev.wait { color: var(--wait); }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.wait { background: var(--wait-bg); color: var(--wait); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer; }
.btn:hover { background: var(--ink); color: #FFFFFF; }
.btn-primary { background: var(--ink); color: #FFFFFF; }
.btn-primary:hover { background: #2B2E36; color: #FFFFFF; }
.btn-big { min-height: 60px; font-size: 18px; width: 100%; }
.more { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; white-space: nowrap; }

/* ── Product card ───────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card:hover { border-color: var(--ink); color: var(--ink); }
.card-img { height: 190px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; padding: 16px; border-bottom: 1px solid var(--line-2); }
.card-img img { max-height: 100%; width: auto; object-fit: contain; }
.card-img .ph { width: 100%; height: 100%; background: var(--img); border-radius: 8px; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.brand { font-weight: 600; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.card-title { font-weight: 600; font-size: 15px; line-height: 1.35; height: 40px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.prices { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.now { font: 700 26px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.was { font-size: 14px; color: var(--ink-3); text-decoration: line-through; }
.store { font: 400 12px var(--mono); color: var(--ink-3); margin-top: auto; padding-top: 2px; }
.oos { font-weight: 600; font-size: 13px; color: var(--ink-3); }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { display: flex; flex-direction: column; gap: 20px; padding-bottom: 56px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.section-head .sub { color: var(--ink-2); font-size: 15px; margin-top: 6px; }

/* ── Home ───────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1fr 460px; gap: 56px; padding: 64px 0 40px; align-items: center; }
.hero h1 { margin: 0; font: 800 68px/1.02 var(--display); letter-spacing: -.035em; }
.hero h1 mark { background: linear-gradient(transparent 58%, var(--tag) 58%); color: inherit; }
.hero p { margin: 0; font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 620px; }
.hero-stats { display: flex; gap: 28px; font: 400 14px var(--mono); color: var(--ink-2); flex-wrap: wrap; }
.hero-stats strong { color: var(--ink); }
.proof { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.proof:hover { border-color: var(--ink); color: var(--ink); }
.legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 48px; }
.legend .eyebrow { white-space: nowrap; }
.endcap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; background: var(--ink); color: #FFFFFF; border-radius: var(--radius-lg); padding: 32px 40px; }
.endcap:hover { color: #FFFFFF; }
.endcap .t { font: 800 36px var(--display); letter-spacing: -.02em; }
.endcap .d { color: #C9C5BC; font-size: 16px; }
.endcap .go { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--tag); color: var(--ink); font-weight: 700; }
.coll { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.coll:hover { border-color: var(--ink); color: var(--ink); }
.coll .strip { height: 92px; background: var(--img); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; }
.coll .strip img { height: 68px; width: 68px; object-fit: contain; background: #FFFFFF; border-radius: 8px; padding: 4px; }
.coll .cb { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.coll .name { font: 700 18px var(--display); }
.coll .count { font: 500 12px var(--mono); color: var(--ink-3); white-space: nowrap; }

/* ── Listing pages ──────────────────────────────────────────────────────── */
.page-head { padding: 44px 0 0; display: flex; flex-direction: column; gap: 18px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; font-weight: 600; font-size: 16px; color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .n { font: 500 12px var(--mono); color: var(--ink-3); }
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0 4px; }
.filters select { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--field); background: var(--card); font-weight: 600; font-size: 16px; color: var(--ink); }
.filters label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.filters .push { margin-left: auto; }
.chip-on { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #FFFFFF; font-weight: 600; font-size: 14px; }
.chip-on:hover { color: var(--tag); }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--field); background: var(--card); font-weight: 600; font-size: 14px; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 40px 0 0; }
.empty { padding: 48px; text-align: center; color: var(--ink-2); }
.js .sort-go { display: none; }
.index-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.index-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-weight: 600; }
.index-list a:hover { border-color: var(--ink); color: var(--ink); }

/* ── Product page ───────────────────────────────────────────────────────── */
.crumbs { padding: 22px 0; font-size: 14px; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-3); }
.pdp { display: grid; grid-template-columns: 520px 1fr; gap: 48px; align-items: start; }
.pdp-img { height: 520px; border-radius: var(--radius-lg); background: #FFFFFF; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 32px; }
.pdp-img img { max-height: 100%; width: auto; object-fit: contain; }
.pdp-img .ph { width: 100%; height: 100%; background: var(--img); border-radius: 12px; }
.pdp-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pdp-title { margin: 0; font: 700 40px/1.1 var(--display); letter-spacing: -.025em; }
.verdict { display: flex; align-items: center; gap: 14px; border-radius: var(--radius); padding: 16px 20px; }
.verdict.good { background: var(--good-bg); color: var(--good); }
.verdict.wait { background: var(--wait-bg); color: var(--wait); }
.verdict.neutral { background: var(--line-2); color: var(--ink); }
.verdict.poor { background: var(--wait-bg); color: var(--wait); }
.verdict strong { display: block; font-size: 18px; }
.verdict span { font-size: 15px; }
.pdp-price { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pdp-price .big { font: 800 72px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pdp-price .side { display: flex; flex-direction: column; gap: 2px; font-size: 16px; color: var(--ink-2); }
.small-print { font: 400 13px var(--mono); color: var(--ink-3); margin-top: -10px; }
.stores { padding: 20px 24px 8px; }
.store-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-2); font-size: 15px; }
.store-row .p { font: 700 18px var(--display); }
.in { color: var(--good); font-weight: 600; }
.out { color: var(--ink-3); font-weight: 600; }
.history { margin-top: 48px; padding: 32px 36px; display: flex; flex-direction: column; gap: 24px; }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.fig { display: flex; flex-direction: column; gap: 4px; }
.fig .k { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fig .v { font: 700 26px var(--display); font-variant-numeric: tabular-nums; }
.fig .s { font-size: 13px; color: var(--ink-2); }
.chart { width: 100%; height: auto; }
.note { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--radius); padding: 18px 22px; }
.note b { white-space: nowrap; }
.note.good { background: var(--good-bg); } .note.good b { color: var(--good); }
.note.wait { background: var(--wait-bg); } .note.wait b { color: var(--wait); }
.note.poor { background: var(--line-2); }
.two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; margin-top: 24px; }
.two > .panel { padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.about ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.about details summary { font-weight: 600; cursor: pointer; padding: 8px 0; }
.about details p { color: var(--ink-2); font-size: 15px; }
.dl { display: grid; grid-template-columns: 160px 1fr; row-gap: 12px; column-gap: 16px; font-size: 15px; margin: 0; }
.dl dt { color: var(--ink-3); } .dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.dl a { text-decoration: underline; }
.buybar { display: none; }

/* Several stores: the spread under the buy button, then every store compared, cheapest first. */
.pdp-price .side .at { color: var(--ink); font-weight: 600; }
.spread { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.spread-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.spread-head .h3 { font-size: 20px; }
.track { position: relative; height: 10px; margin: 8px 10px; border-radius: 999px; background: var(--line); }
.track .gap { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--good-bg); }
.track .dot { position: absolute; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--card); border: 2.5px solid var(--ink); box-sizing: border-box; }
.track .dot.lo { width: 20px; height: 20px; background: var(--good); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--good); }
.ends { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-2); }
.ends span:last-child { text-align: right; }
.ends b { display: block; font: 700 17px var(--display); color: var(--ink); }
.ends .lo b { color: var(--good); }
.compare { margin-top: 48px; padding: 28px 36px 20px; display: flex; flex-direction: column; gap: 16px; }
.compare-head { display: flex; flex-direction: column; gap: 4px; }
.compare-head .muted { font-size: 15px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare-table thead th { text-align: left; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 12px 0; }
.compare-table tbody th, .compare-table td { border-top: 1px solid var(--line-2); padding: 16px 12px 16px 0; vertical-align: middle; text-align: left; }
.compare-table tbody th { font-weight: 700; padding-left: 12px; }
.compare-table tr.cheapest { background: #F3FAF6; }
.compare-table .p { font: 700 20px var(--display); font-variant-numeric: tabular-nums; }
.compare-table tr.cheapest .p { color: var(--good); }
.compare-table .sub { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.compare-table .sub.good { color: var(--good); font-weight: 600; }
.compare-table .sub.wait { color: var(--wait); font-weight: 600; }
.compare-table td:last-child { text-align: right; white-space: nowrap; }
.compare-table td.mono { font-size: 13px; white-space: nowrap; }
.compare-table tr.group th { padding: 22px 0 8px; border-top: 0; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.compare-table .sub.cond { color: var(--ink-2); font-weight: 600; }
.compare-note { margin: 0; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.request-form { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 10px; max-width: 620px; }
.request-form label { display: flex; flex-direction: column; gap: 6px; }
.request-form input { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--field); border-radius: 12px; background: var(--card); font: 500 16px var(--body); color: var(--ink); }
.request-form input:focus { border-color: var(--ink); outline: none; }
.request-form .btn { align-self: flex-start; }
.request .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.request .note { margin: 0 0 24px; }
.ad-slot { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.ad-slot .eyebrow { font-size: 11px; }
.ad-slot ins { min-height: 120px; }
.chart-key { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.chart-key span { display: flex; align-items: center; gap: 8px; }

/* ── Prose (static pages) ───────────────────────────────────────────────── */
.prose { max-width: 760px; padding: 44px 0 72px; font-size: 17px; line-height: 1.65; }
.prose h1 { margin: 0 0 18px; font: 800 44px/1.1 var(--display); letter-spacing: -.03em; }
.prose h2 { margin: 36px 0 10px; font: 700 26px var(--display); letter-spacing: -.015em; }
.prose p, .prose li { color: var(--ink-2); }
.prose a { text-decoration: underline; color: var(--ink); }
.bands { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; }
.bands li { display: flex; gap: 14px; align-items: baseline; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.bands b { min-width: 170px; color: var(--ink); }

/* ── Price alert (product page, when signups are on) ────────────────────── */
.alert-box { margin-top: 24px; padding: 22px 28px; display: flex; flex-direction: column; gap: 16px; }
.alert-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.alert-form label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; }
/* 16px, never less: below it iOS Safari zooms the page on focus and never zooms back. */
.alert-form input { min-height: 44px; padding: 0 14px; border: 1px solid var(--field); border-radius: 10px; background: var(--card); font-size: 16px; }
.alert-form .btn { min-height: 44px; }

/* ── Banner endcap (an Owner's promotion, from the Endcaps table) ───────── */
.endcap.banner { grid-template-columns: minmax(0, 280px) 1fr auto; }
.endcap.banner:not(:has(.art)) { grid-template-columns: 1fr auto; }
.endcap .art img { width: 100%; max-height: 180px; object-fit: contain; border-radius: 10px; }
.endcap .art.crop img { aspect-ratio: 16 / 9; object-fit: cover; }
.endcap .fine { color: #A7A39A; font-size: 13px; }

/* ── Sign in ────────────────────────────────────────────────────────────── */
.login-box { max-width: 420px; margin: 0 auto; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label, .office-form label { display: flex; flex-direction: column; gap: 6px; }
.office-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--field); border-radius: 10px; background: var(--card); font: 16px/1.5 var(--body); resize: vertical; }
.office-form select { min-height: 44px; padding: 0 10px; border: 1px solid var(--field); border-radius: 10px; background: var(--card); font-size: 16px; }
.login-form input, .office-form input, .token-box input {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: 10px; background: var(--card); font-size: 16px; }

/* ── Manager's Office ───────────────────────────────────────────────────── */
/* The same tokens as the Sales Floor; a dark bar so an admin screen is never mistaken for the shop. */
.office-bar { background: var(--ink); color: #FFFFFF; }
.office-row { display: flex; align-items: center; gap: 24px; min-height: 60px; flex-wrap: wrap; padding: 8px 0; }
.office-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.office-navrow { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.office-nav a { color: #C9C5BC; padding: 6px 10px; border-radius: 8px; font-size: 15px; }
.office-nav a:hover { color: #FFFFFF; }
.office-nav a[aria-current="page"] { background: #2E3139; color: #FFFFFF; }
.office-group { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8A8E97; width: 104px; flex: 0 0 auto; }
.office-me { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.office-me .btn { min-height: 34px; background: transparent; color: #FFFFFF; border-color: #6B6F78; }
.office-me .btn:hover { border-color: #FFFFFF; color: #FFFFFF; }
.office-main { padding: 32px 0 72px; display: flex; flex-direction: column; gap: 18px; }
.office-section { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.office-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.office-tiles .tile { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.office-tiles a.tile:hover { border-color: var(--ink); color: var(--ink); }
.office-tiles .tile.warn { background: var(--wait-bg); border-color: #F0D9B0; }
.office-tiles .k { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.office-tiles .v { font: 800 30px var(--display); }
.office-tiles .v small { font: 500 15px var(--body); color: var(--ink-3); }
.office-tiles .v.small { font-size: 18px; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.office-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.office-table th { text-align: left; font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.office-table td { padding: 10px 14px; border-top: 1px solid var(--line-2); vertical-align: top; }
.office-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.office-table .actions { text-align: right; white-space: nowrap; }
.office-table .actions .btn { min-height: 34px; margin-left: 6px; }
.nowrap { white-space: nowrap; }
.warn-text { color: var(--wait); font-weight: 700; }
.pill-s { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--line-2); color: var(--ink-2); margin-right: 4px; }
.pill-s.ok { background: var(--good-bg); color: var(--good); }
.pill-s.warn { background: var(--wait-bg); color: var(--wait); }
.pill-s.bad { background: #FBE3E6; color: #9B1C2E; }
.office-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.office-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.office-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.office-form label { flex: 0 1 170px; }
.office-form .btn { min-height: 44px; }
.office-history { margin: 0; padding: 10px 0 0; list-style: none; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.office-dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; margin: 0; font-size: 15px; }
.office-dl dt { color: var(--ink-3); }
.office-dl dd { margin: 0; }
.office-filter { display: flex; gap: 8px; flex-wrap: wrap; }
/* Traffic (/admin/traffic). Bars are ink, not green: green only ever means a good price. */
.traffic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: start; margin-top: 24px; }
.traffic-grid .office-section { margin-top: 0; min-width: 0; }
.traffic-grid .traffic-wide { grid-column: 1 / -1; }
.traffic-bar { display: block; height: 8px; border-radius: 4px; background: var(--ink-2); }
.traffic-hours { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding: 16px 16px 0; }
.traffic-hours span { flex: 1; background: var(--ink-2); border-radius: 3px 3px 0 0; min-height: 1px; }
.traffic-axis { display: flex; justify-content: space-between; padding: 6px 16px 14px; font: 400 11px var(--mono); color: var(--ink-3); }
.traffic-path { font: 400 12px/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.token-box { padding: 18px 20px; border-color: var(--tag); background: #FFF8D6; }
.token-box input { width: 100%; font-size: 15px; }
.facet-input { min-height: 34px; padding: 0 8px; border: 1px solid var(--field); border-radius: 8px; font-size: 16px; width: 150px; }

/* ── Article body (blog posts; also the editor's preview) ─────────────── */
.post-body { font-size: 18px; line-height: 1.72; }
.post-body p { margin: 0 0 1.1em; color: var(--ink-2); }
.post-body > p:first-child { color: var(--ink); font-size: 19px; }
.post-body h2 { margin: 2.4em 0 .5em; font: 700 28px/1.2 var(--display); letter-spacing: -.015em; }
.post-body h3 { margin: 2em 0 .45em; font: 700 23px/1.25 var(--display); letter-spacing: -.01em; }
.post-body h4 { margin: 1.6em 0 .35em; font: 700 19px/1.3 var(--display); }
.post-body h2:first-child, .post-body h3:first-child, .post-body h4:first-child { margin-top: 0; }
.post-body ul, .post-body ol { margin: 0 0 1.1em; padding-left: 1.3em; color: var(--ink-2); }
.post-body li { margin-bottom: .45em; }
.post-body blockquote { margin: 1.6em 0; padding: 2px 0 2px 18px; border-left: 4px solid var(--tag); font-size: 19px; }
.post-body blockquote p { color: var(--ink); }
.post-body a { text-decoration: underline; text-underline-offset: .18em; }
.post-body strong { color: var(--ink); font-weight: 650; }
.post-body code { font: 500 .88em var(--mono); background: var(--line-2); padding: 1px 6px; border-radius: 5px; }
.post-body hr { border: 0; height: 1px; background: var(--line); width: 40%; margin: 2.6em auto; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.ftr { background: var(--ink); color: #E9E6DF; margin-top: 72px; }
.ftr a { color: #E9E6DF; } .ftr a:hover { color: var(--tag); }
.ftr-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 40px; }
.ftr h2 { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #A7A39A; margin: 0 0 12px; }
.ftr ul { margin: 0; padding: 0; list-style: none; }
.ftr li { margin: 0 0 4px; } .ftr li a { display: inline-block; padding: 6px 0; font-size: 15px; }
.ftr .blurb { margin: 0; color: #A7A39A; font-size: 14px; line-height: 1.55; max-width: 320px; }
.ftr .ftr-tagline { margin: 0; color: #FFFFFF; font: 700 18px/1.3 var(--display); letter-spacing: -.01em; }
.ftr-sub { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.ftr-sub div { display: flex; gap: 8px; }
.ftr-sub input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; font-size: 16px; }
.ftr-sub .btn { min-height: 44px; background: var(--tag); color: var(--ink); }
.ftr .legal { border-top: 1px solid #2E3139; padding: 20px 0 28px; font-size: 13px; color: #A7A39A; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr 400px; gap: 40px; }
  .hero h1 { font-size: 56px; }
  .pdp { grid-template-columns: 420px 1fr; gap: 36px; }
  .pdp-img { height: 420px; }
}
@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero, .pdp, .two { grid-template-columns: 1fr; }
  .pdp-img { height: 360px; }
  .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-cols { grid-template-columns: 1fr 1fr; }
}
/* Phone. Nothing in the header scrolls sideways (2026-10-16: six chips in a row that scrolled
   inside itself read as the page wobbling): a real menu holds every section, and the row under
   the search box is three deal shortcuts in equal thirds that fit 320px. Inputs are 16px so iOS
   does not zoom, and every tap target is at least 44px. */
@media (max-width: 860px) {
  .hdr { position: relative; z-index: 20; }
  .hdr-row { height: auto; flex-wrap: wrap; gap: 10px; padding: 10px 0 12px; }
  .logo { font-size: 19px; }
  .nav { display: none; }
  .menu { display: block; margin-left: auto; }
  .menu-btn { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; list-style: none; }
  .menu-btn::-webkit-details-marker { display: none; }
  .menu[open] .menu-btn { background: var(--ink); color: #FFFFFF; }
  .menu .i-close, .menu[open] .i-open { display: none; }
  .menu[open] .i-close { display: block; }
  .menu-panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 4px 16px; grid-template-columns: 1fr 1fr;
    padding: 12px 16px 20px; background: var(--card); border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(21, 23, 28, .14); max-height: calc(100dvh - 70px); overflow: hidden auto; }
  .menu-panel > div { display: flex; flex-direction: column; }
  .menu-panel > div:last-child { grid-column: 1 / -1; }
  .menu-group { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 8px 0 4px; }
  .menu-panel a { display: flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--line-2); }
  .menu-panel a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
  .search { order: 3; flex-basis: 100%; height: 46px; }
  .chips { order: 4; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .chips a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; border-radius: 999px; border: 1.5px solid var(--field); background: var(--card); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chips a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
  /* Four deal tabs as a 2 x 2 block of segments rather than a strip that scrolls sideways. */
  .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-bottom: 0; overflow: visible; }
  .tabs a { justify-content: center; min-height: 46px; padding: 0 10px; border: 1.5px solid var(--field); border-radius: 12px; margin: 0; font-size: 15px; background: var(--card); }
  .tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
  .tabs a[aria-current="page"] .n { color: #C9C5BC; }
  /* Filters and sort share the row width; a select never grows past the screen for a long name. */
  .filters { gap: 8px; }
  .filters > form, .filters .push { flex: 1 1 100%; margin-left: 0; }
  .filters form { flex-wrap: wrap; }
  .filters select { flex: 1 1 140px; min-width: 0; max-width: 100%; }
  .filters label { flex: 1 1 100%; }
  .filters label select { flex: 1 1 auto; }
}
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-img { height: 150px; padding: 10px; }
  .card-body { padding: 10px 12px 12px; }
  .card-title { font-size: 14px; height: 36px; }
  .now { font-size: 22px; }
  .tag { top: 10px; left: 10px; height: 24px; font-size: 13px; padding: 0 8px 0 15px; }
  .tag::before { left: 6px; top: 9px; width: 5px; height: 5px; }
  .h1 { font-size: 40px; } .h2 { font-size: 24px; }
  .hero { padding: 28px 0 24px; gap: 20px; }
  /* 40px on a 360px phone and up; smaller on the 320px ones, so "Before you buy," never runs off. */
  .hero h1 { font-size: clamp(32px, 11vw, 40px); }
  .hero p { font-size: 17px; }
  /* The tag legend wraps rather than scrolling sideways: three pills, each on its own line. */
  .legend { flex-wrap: wrap; gap: 8px; padding-bottom: 28px; }
  .legend .eyebrow { flex-basis: 100%; }
  .legend .pill { font-size: 13px; min-height: 32px; }
  .legend .more { margin-left: 0 !important; flex-basis: 100%; padding-top: 4px; }
  .section { padding-bottom: 36px; }
  .endcap, .endcap.banner, .endcap.banner:not(:has(.art)) { grid-template-columns: 1fr; padding: 20px; }
  .alert-box { padding: 18px 16px; }
  .office-dl { grid-template-columns: 1fr; gap: 2px; }
  .office-dl dd { margin-bottom: 8px; }
  .office-me { width: 100%; justify-content: space-between; }
  .endcap .t { font-size: 24px; }
  .pdp-title { font-size: 28px; }
  .pdp-price .big { font-size: 52px; }
  .history { padding: 18px 16px; margin-top: 24px; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .store-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .store-row .d { display: none; }
  /* The compare table becomes one card per store: a six-column table cannot fit a phone, and
     overflowing it is the "page wiggles" bug Phase 1 measured on its offer table. */
  .compare { margin-top: 24px; padding: 18px 16px; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table tbody th, .compare-table td { display: block; }
  .compare-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; border-top: 1px solid var(--line-2); padding: 12px 0; }
  .compare-table tr.cheapest { margin: 0 -16px; padding: 12px 16px; }
  .compare-table tbody th, .compare-table td { border: 0; padding: 0; }
  .compare-table tbody th { grid-column: 1; }
  .compare-table td[data-label="Price"] { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .compare-table td[data-label="vs cheapest"], .compare-table td[data-label="What we know"], .compare-table td[data-label="Checked"] { grid-column: 1; font-size: 14px; }
  .compare-table td[data-label="Checked"] { font-size: 12px; }
  .compare-table tr.group { display: block; padding: 18px 0 4px; }
  .compare-table td:last-child { grid-column: 2; grid-row: 3 / span 2; align-self: end; }
  .compare-table td:last-child .btn { padding: 0 14px; font-size: 14px; }
  .two > .panel { padding: 18px 16px; }
  .dl { grid-template-columns: 130px 1fr; }
  .filters .push { margin-left: 0; }
  .prose h1 { font-size: 34px; }
  .index-list { grid-template-columns: 1fr; }
  .ftr-cols { grid-template-columns: 1fr; gap: 24px; }
  /* The buy button stays in reach while the history is read. */
  .buybar { display: flex; position: sticky; bottom: 0; z-index: 5; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(21, 23, 28, .08); }
  .buybar .p { font: 800 22px var(--display); }
  .buybar .grow { flex-grow: 1; }
}
.office-discovery { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.office-discovery > summary { cursor: pointer; }
.office-discovery textarea { width: 100%; font: 13px/1.4 var(--mono, ui-monospace, monospace); }