/* =============================================================
   The Espresso Index — stylesheet
   Sections: 1 tokens · 2 reset · 3 utilities · 4 typography
             5 components · 6 sections · 7 effects · 8 responsive
             9 reduced-motion · 10 print
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Surfaces — warm near-black, the colour of dark roast */
  --bg:        #100D0A;
  --bg-2:      #17130F;
  --bg-3:      #201A14;
  --bg-4:      #2A2219;
  --line:      rgba(242, 228, 208, 0.10);
  --line-2:    rgba(242, 228, 208, 0.18);

  /* Ink */
  --ink:       #F5EDE2;
  --ink-2:     #BFB0A0;
  --ink-3:     #988A79;   /* WCAG-AA: 5.76:1 on --bg, 5.12:1 on --bg-3, 4.66:1 on --bg-4.
                            The previous #8A7C6D measured 4.25:1 on --bg-3, under the
                            4.5:1 floor the pre-deploy checklist requires for body text. */

  /* Accent — copper / crema */
  --accent:    #E3A863;
  --accent-2:  #C87A3C;
  --accent-3:  #F2CB96;
  --accent-ink:#191006;
  --accent-dim: rgba(227, 168, 99, 0.14);

  /* Semantics */
  --good:      #86BE86;
  --bad:       #D9846F;
  --star:      #E3A863;

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Space & shape */
  --gutter:  clamp(1.15rem, 4vw, 2.5rem);
  --maxw:    1280px;
  --maxw-prose: 68ch;
  --r-sm:  6px;
  --r:     12px;
  --r-lg:  20px;
  --r-xl:  28px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.22);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 1px rgba(227,168,99,.28), 0 12px 40px rgba(227,168,99,.10);

  --nav-h: 62px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 18px); }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Warm ambient wash behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 12% -8%,  rgba(227,168,99,.10), transparent 62%),
    radial-gradient(760px 480px at 92% 4%,   rgba(200,122,60,.075), transparent 60%);
}
body > * { position: relative; z-index: 1; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.08; letter-spacing: -0.02em; font-weight: 500; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--accent); color: var(--accent-ink); }

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

/* =============================================================
   3. Utilities
   ============================================================= */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 900px; }
.prose { max-width: var(--maxw-prose); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .65rem 1.1rem; background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { top: 1rem; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--ink-2); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* =============================================================
   4. Typography
   ============================================================= */
.h-display {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  letter-spacing: -0.028em;
  line-height: 1.02;
}
.eyebrow {
  font-family: var(--mono);
  font-size: .705rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.lede { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--ink-2); line-height: 1.66; }

.section-head { margin-bottom: clamp(1.6rem, 3.4vw, 2.6rem); }
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(1.85rem, 4.2vw, 2.9rem);
  font-weight: 400;
  margin-top: .5rem;
}
.section-head p { margin-top: .8rem; max-width: 60ch; color: var(--ink-2); }

/* =============================================================
   5. Components
   ============================================================= */

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .93rem;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform .35s var(--ease-out), background-color .3s var(--ease-out),
              border-color .3s var(--ease-out), color .3s var(--ease-out), box-shadow .35s var(--ease-out);
  line-height: 1.2;
  text-align: center;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(168deg, var(--accent-3), var(--accent) 52%, var(--accent-2));
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 8px 26px rgba(200,122,60,.24);
}
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 34px rgba(200,122,60,.34); }

.btn-ghost { background: var(--bg-3); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-4); border-color: var(--accent); color: var(--accent-3); }

.btn-lg { padding: .95rem 1.7rem; font-size: 1rem; }
.btn-sm { padding: .5rem .95rem; font-size: .82rem; }
.btn-block { display: flex; width: 100%; }

/* ---- Cards ---- */
.card {
  background: linear-gradient(178deg, var(--bg-2), var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

/* ---- Product card ---- */
.p-card { display: flex; flex-direction: column; height: 100%; position: relative; }
.p-card:hover { border-color: var(--line-2); transform: translateY(-4px); box-shadow: var(--shadow-2); }
.p-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: radial-gradient(120% 96% at 50% 6%, #FFFFFF 0%, #F0EAE1 58%, #DED4C6 100%);
  overflow: hidden;
}
.p-card__media img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 8%;
  /* Amazon shots are product-on-white; multiply drops the white so the studio
     gradient behind them reads as one surface instead of a pasted rectangle. */
  mix-blend-mode: multiply;
  transition: transform .7s var(--ease-out);
}
.p-card:hover .p-card__media img { transform: scale(1.055); }
.p-card__award {
  position: absolute; top: .8rem; left: .8rem;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .34rem .62rem; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.p-card__body { padding: 1.15rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; gap: .55rem; }
.p-card__brand { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.p-card__name { font-family: var(--display); font-size: 1.2rem; font-weight: 400; line-height: 1.16; }
.p-card__name a::after { content: ""; position: absolute; inset: 0; }
.p-card__tag { font-size: .855rem; color: var(--ink-2); line-height: 1.5; }
.p-card__meta { margin-top: auto; padding-top: .75rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; border-top: 1px solid var(--line); }
.p-card__actions { display: flex; gap: .5rem; padding: 0 1.15rem 1.15rem; position: relative; z-index: 2; }
.p-card__actions .btn { flex: 1; }

/* ---- Rating ---- */
.rating { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; }
.rating__stars { display: inline-flex; gap: 1px; }
.rating__stars svg { width: 14px; height: 14px; flex: none; }
.rating__val { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.rating__count { color: var(--ink-3); font-size: .78rem; }

/* ---- Score pill ---- */
.score-pill {
  display: inline-flex; align-items: baseline; gap: .22rem;
  font-family: var(--mono); font-weight: 600; font-size: .95rem;
  color: var(--accent-3);
  background: var(--accent-dim);
  border: 1px solid rgba(227,168,99,.26);
  padding: .2rem .55rem; border-radius: var(--r-sm);
}
.score-pill span { font-size: .68rem; color: var(--ink-3); font-weight: 400; }

/* ---- Chips ---- */
.chip {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .78rem; color: var(--ink-2);
  background: var(--bg-3); border: 1px solid var(--line);
  padding: .32rem .7rem; border-radius: 999px;
}
.chip svg { width: 1em; height: 1em; flex: none; color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ---- Price ---- */
.price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.price__now { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; color: var(--ink); }
.price__was { font-family: var(--mono); font-size: .9rem; color: var(--ink-3); text-decoration: line-through; }
.price__off { font-family: var(--mono); font-size: .72rem; font-weight: 600; background: var(--good); color: #0C1A0C; padding: .14rem .42rem; border-radius: var(--r-sm); }
.price__none { font-size: .92rem; color: var(--ink-2); }
.price__note { font-size: .72rem; color: var(--ink-3); margin-top: .3rem; }

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(16,13,10,.76);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(4px)) { .nav { background: #100D0A; } }
.nav__inner { display: flex; align-items: center; gap: 1.15rem; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: flex; align-items: center; gap: .58rem; flex: none; }
.brand__mark { width: 30px; height: 30px; flex: none; color: var(--accent); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--display); font-size: 1.02rem; font-weight: 500; letter-spacing: -0.02em; }
.brand__sub { font-family: var(--mono); font-size: .55rem; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3); }

.nav__links { display: none; align-items: center; gap: .2rem; margin-left: auto; }
.nav__links a {
  padding: .5rem .72rem; border-radius: var(--r-sm);
  font-size: .875rem; color: var(--ink-2); font-weight: 500;
  transition: color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); background: var(--bg-3); }
.nav__links a[aria-current="page"] { color: var(--accent-3); }

/* E.2 — re-assert the CTA's own colours against .nav__links a specificity */
.nav__links a.nav-cta,
.nav__links a.nav-cta:hover {
  background: linear-gradient(168deg, var(--accent-3), var(--accent) 55%, var(--accent-2));
  color: var(--accent-ink);
  font-weight: 600;
  padding: .5rem .95rem;
  border-radius: 999px;
  margin-left: .4rem;
}
.nav-cta__count {
  display: none;
  min-width: 1.25em; height: 1.25em;
  align-items: center; justify-content: center;
  background: var(--accent-ink); color: var(--accent-3);
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
  border-radius: 999px; padding: 0 .3em; margin-left: .1rem;
}
.nav-cta__count.is-on { display: inline-flex; }

.nav__burger { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.nav__burger svg { width: 19px; height: 19px; }
.nav__drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: .6rem var(--gutter) 1.1rem;
  display: none; flex-direction: column;
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  box-shadow: var(--shadow-2);
}
.nav__drawer.is-open { display: flex; }
.nav__drawer a { padding: .78rem .2rem; border-bottom: 1px solid var(--line); font-size: .96rem; color: var(--ink-2); }
.nav__drawer a:last-child { border-bottom: 0; }
.nav__drawer .btn { margin-top: .9rem; }

/* ---- Spec table ---- */
.specs { display: grid; gap: 1.6rem; }
.spec-group h3 {
  /* flex, because the base reset makes svg display:block and the group icon
     would otherwise sit on its own line above the label */
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  padding-bottom: .55rem; margin-bottom: .1rem;
  border-bottom: 1px solid var(--line-2);
  font-weight: 500;
}
.spec-group h3 svg { width: 1.15em; height: 1.15em; flex: none; }
.spec-row {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  padding: .62rem 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { color: var(--ink-2); font-size: .89rem; }
.spec-row dd { font-family: var(--mono); font-size: .875rem; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.spec-row dd.is-null { color: var(--ink-3); }
.spec-row dd u { text-decoration: none; color: var(--ink-3); font-size: .8em; }

.bool-yes { color: var(--good); }
.bool-no  { color: var(--ink-3); }
.bool-yes svg, .bool-no svg { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.15em; }

/* ---- Radar ---- */
.radar { width: 100%; max-width: 420px; margin-inline: auto; }
.radar svg { width: 100%; height: auto; overflow: visible; }
.radar-grid { fill: none; stroke: var(--line-2); stroke-width: 1; }
.radar-axis { stroke: var(--line); stroke-width: 1; }
.radar-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-2); }
.radar-poly { fill: rgba(227,168,99,.20); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.radar-dot { fill: var(--accent-3); }

.score-list { display: grid; gap: .58rem; }
.score-item { display: grid; grid-template-columns: 1fr auto; gap: .5rem .8rem; align-items: center; }
.score-item__label { font-size: .855rem; color: var(--ink-2); }
.score-item__bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--bg-4); overflow: hidden; }
.score-item__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent-3)); }
.score-item__val { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--accent-3); }

/* ---- Pros / cons ---- */
.proscons { display: grid; gap: 1.1rem; }
.pc {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.2rem 1.2rem; background: var(--bg-2);
}
.pc h3 {
  display: flex; align-items: center; gap: .48rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .8rem;
}
.pc h3 svg { width: 1.15em; height: 1.15em; flex: none; }
.pc--pro h3 { color: var(--good); }
.pc--con h3 { color: var(--bad); }
.pc ul { list-style: none; display: grid; gap: .6rem; }
.pc li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; font-size: .9rem; color: var(--ink-2); line-height: 1.52; }
.pc li svg { width: 1.05em; height: 1.05em; flex: none; margin-top: .32em; }
.pc--pro li svg { color: var(--good); }
.pc--con li svg { color: var(--bad); }

/* ---- Verdict / callout ---- */
.callout {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  background: linear-gradient(100deg, var(--accent-dim), transparent 62%);
  border-radius: var(--r);
  padding: 1.05rem 1.2rem;
}
.callout__label { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; }
.callout p { font-size: .96rem; color: var(--ink); }

/* ---- Review cards ---- */
.review { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; background: var(--bg-2); }
.review__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; }
.review__title { font-weight: 600; font-size: .93rem; }
.review__text { font-size: .89rem; color: var(--ink-2); line-height: 1.6; }
.review__text::before { content: "\201C"; }
.review__text::after  { content: "\201D"; }

/* ---- Editorial body ---- */
.editorial { max-width: var(--maxw-prose); }
.editorial p { margin-bottom: 1.05rem; color: var(--ink-2); font-size: 1.005rem; line-height: 1.75; }
.editorial p:first-of-type { color: var(--ink); font-size: 1.06rem; }
.editorial p:last-child { margin-bottom: 0; }
.editorial strong { color: var(--ink); font-weight: 600; }
.editorial a { color: var(--accent-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(227,168,99,.4); }
.editorial a:hover { text-decoration-color: var(--accent); }
.editorial h3 { font-family: var(--display); font-size: 1.4rem; margin: 2rem 0 .8rem; }
.editorial ul, .editorial ol { margin: 0 0 1.05rem 1.15rem; color: var(--ink-2); }
.editorial li { margin-bottom: .4rem; }

/* ---- Gallery ---- */
.gallery { display: grid; gap: .7rem; }
.gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: radial-gradient(120% 96% at 50% 4%, #FFFFFF 0%, #F2ECE3 58%, #DCD2C4 100%);
  border: 1px solid var(--line);
}
.gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: .5rem; }
.gallery__thumb {
  aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden;
  background: #F2ECE3; border: 1.5px solid transparent; padding: 0;
  transition: border-color .3s var(--ease-out), opacity .3s var(--ease-out);
  opacity: .85;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current="true"] { border-color: var(--accent); opacity: 1; }

/* ---- Tables (comparison) ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--line); }
.ctable { min-width: 640px; font-size: .875rem; }
.ctable th, .ctable td { padding: .68rem .85rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ctable thead th { background: var(--bg-3); position: sticky; top: 0; z-index: 2; }
.ctable tbody th {
  font-weight: 400; color: var(--ink-2); background: var(--bg-2);
  position: sticky; left: 0; z-index: 1; min-width: 152px;
  border-right: 1px solid var(--line);
}
.ctable td { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ctable tr:last-child th, .ctable tr:last-child td { border-bottom: 0; }
.ctable .grp th {
  background: var(--bg-4); color: var(--accent);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
}
.is-best { color: var(--accent-3); font-weight: 600; }
.is-best::after { content: " ★"; font-size: .78em; color: var(--accent); }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--line); margin-top: clamp(3.5rem, 8vw, 6rem); background: var(--bg-2); }
.footer__grid { display: grid; gap: 2rem; padding: clamp(2.2rem, 5vw, 3.4rem) 0 1.6rem; }
.footer h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .85rem; font-weight: 500; }
.footer ul { list-style: none; display: grid; gap: .5rem; }
.footer a { font-size: .885rem; color: var(--ink-2); transition: color .25s var(--ease-out); }
.footer a:hover { color: var(--accent-3); }
.footer__bottom { border-top: 1px solid var(--line); padding: 1.2rem 0 2rem; display: grid; gap: .7rem; }
.footer__bottom p { font-size: .78rem; color: var(--ink-3); line-height: 1.6; }

/* ---- Affiliate disclosure ---- */
.disclosure {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .775rem; color: var(--ink-3); line-height: 1.55;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .72rem .9rem; background: var(--bg-2);
}
.disclosure svg { width: 1.05em; height: 1.05em; flex: none; margin-top: .28em; color: var(--accent); }
.disclosure a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================
   6. Sections
   ============================================================= */
.section { padding-block: clamp(2.8rem, 7vw, 5.2rem); }
.section--tight { padding-block: clamp(2rem, 4.5vw, 3.2rem); }
.section + .section { padding-top: 0; }

/* ---- Hero ---- */
.hero { padding-block: clamp(2.8rem, 8vw, 6rem) clamp(2.4rem, 6vw, 4rem); position: relative; }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.4rem); align-items: center; }
.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.5rem, 7.2vw, 4.7rem);
  line-height: .98; letter-spacing: -0.035em;
  margin: .85rem 0 1.1rem;
}
.hero h1 em { font-style: italic; color: var(--accent-3); font-variation-settings: "WONK" 1; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.hero__stat strong { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 500; color: var(--accent-3); line-height: 1; }
.hero__stat span { font-size: .765rem; color: var(--ink-3); letter-spacing: .02em; }
.hero__art { position: relative; }
.hero__art-inner {
  border-radius: var(--r-xl); overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, #F1EBE2 56%, #D9CFC1 100%);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  aspect-ratio: 1 / 1;
}
.hero__art-inner img { width: 100%; height: 100%; object-fit: contain; padding: 7%; mix-blend-mode: multiply; }
.hero__art-badge {
  position: absolute; bottom: -.7rem; left: -.7rem;
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: .7rem .95rem;
  box-shadow: var(--shadow-2);
  display: flex; align-items: center; gap: .6rem;
}
.hero__art-badge svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.hero__art-badge b { display: block; font-size: .82rem; }
.hero__art-badge span { font-size: .7rem; color: var(--ink-3); }

/* ---- Grids ---- */
.grid-cards { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
.grid-2 { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }

/* ---- Category tiles ---- */
.cat-tile {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.3rem 1.35rem 1.4rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(168deg, var(--bg-2), var(--bg));
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out), background-color .4s var(--ease-out);
  position: relative; overflow: hidden;
}
.cat-tile::after {
  content: ""; position: absolute; inset: auto -30% -60% auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,168,99,.13), transparent 68%);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.cat-tile:hover { border-color: var(--line-2); transform: translateY(-3px); }
.cat-tile:hover::after { opacity: 1; }
.cat-tile__icon { width: 30px; height: 30px; color: var(--accent); flex: none; }
.cat-tile h3 { font-family: var(--display); font-size: 1.24rem; font-weight: 400; }
.cat-tile p { font-size: .865rem; color: var(--ink-2); line-height: 1.55; }
.cat-tile__count { margin-top: auto; padding-top: .7rem; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); letter-spacing: .05em; }
.cat-tile__count b { color: var(--accent-3); }

/* ---- How-we-score strip ---- */
.method { display: grid; gap: 1.4rem; }
.method__item { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.method__num {
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-2);
  color: var(--accent); background: var(--bg-3);
}
.method__item h3 { font-size: .98rem; font-weight: 600; margin-bottom: .28rem; }
.method__item p { font-size: .875rem; color: var(--ink-2); line-height: 1.6; }

/* ---- Ficha layout ---- */
.ficha__top { display: grid; gap: clamp(1.6rem, 4vw, 2.8rem); padding-top: clamp(1.4rem, 3vw, 2.2rem); }
.ficha__head h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.95rem, 5vw, 3rem);
  margin: .5rem 0 .6rem;
}
.ficha__brandline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ficha__model { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); letter-spacing: .06em; }
.ficha__buybox {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(168deg, var(--bg-3), var(--bg-2));
  padding: 1.2rem 1.25rem 1.3rem; margin-top: 1.3rem;
  display: grid; gap: .85rem;
  box-shadow: var(--shadow-1);
}
.ficha__panel { display: grid; gap: 1.6rem; }
.panel {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2); padding: clamp(1.15rem, 3vw, 1.7rem);
}
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; flex-wrap: wrap; }
.panel__head h2 { font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 400; }
.panel__head p {
  /* inline-flex: the base reset makes svg display:block, so an inline icon
     inside this note would otherwise sit on its own line above the text */
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--ink-3);
}
.panel__head p svg { width: 1em; height: 1em; flex: none; }

.anchor-nav { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
.anchor-nav a {
  flex: none; font-size: .8rem; color: var(--ink-2);
  padding: .38rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2);
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.anchor-nav a:hover { color: var(--accent-3); border-color: var(--accent); }

/* ---- Comparator ---- */
.cmp-picker { display: grid; gap: 1rem; }
.cmp-slots {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem;
  padding: .55rem .55rem 1rem;   /* E.3 — room for the overhanging remove badge */
  overflow: visible;
}
.cmp-slot { position: relative; overflow: visible; }
.cmp-slot__inner {
  border: 1px dashed var(--line-2); border-radius: var(--r);
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: var(--bg-2); overflow: hidden;
}
.cmp-slot--filled .cmp-slot__inner { border-style: solid; background: radial-gradient(120% 96% at 50% 6%, #FFFFFF, #E9E2D8); }
.cmp-slot__inner img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.cmp-slot__empty { color: var(--ink-3); font-size: .74rem; text-align: center; padding: .5rem; line-height: 1.4; }
.cmp-slot__name { font-size: .74rem; color: var(--ink-2); text-align: center; margin-top: .4rem; line-height: 1.3; }
.cmp-slot__rm {
  position: absolute; top: -8px; right: -8px; z-index: 3;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bad); color: #1A0B08;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; line-height: 1;
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
  border: 2px solid var(--bg);
}
.cmp-slot__rm svg { width: 11px; height: 11px; }

.cmp-search { position: relative; }
.cmp-search input {
  width: 100%; padding: .78rem 1rem .78rem 2.5rem;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r); font-size: .92rem;
}
.cmp-search input::placeholder { color: var(--ink-3); }
.cmp-search input:focus { outline: none; border-color: var(--accent); }
.cmp-search__ico { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.cmp-results { display: grid; gap: .4rem; max-height: min(560px, 65vh); overflow-y: auto; margin-top: .55rem; }
.cmp-result {
  display: grid; grid-template-columns: 44px 1fr auto; gap: .7rem; align-items: center;
  padding: .5rem .6rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg-2);
  text-align: left; width: 100%;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.cmp-result:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-3); }
.cmp-result:disabled { opacity: .42; cursor: not-allowed; }
.cmp-result img { width: 44px; height: 44px; object-fit: contain; background: #F1EBE2; border-radius: 4px; padding: 3px; }
.cmp-result__name { font-size: .855rem; line-height: 1.3; }
.cmp-result__cat { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cmp-result__add { font-family: var(--mono); font-size: .7rem; color: var(--accent); }

.cmp-empty { text-align: center; padding: clamp(2.4rem, 7vw, 4.5rem) 1rem; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--bg-2); }
.cmp-empty svg { width: 44px; height: 44px; color: var(--ink-3); margin: 0 auto 1rem; }
.cmp-empty h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 400; margin-bottom: .5rem; }
.cmp-empty p { color: var(--ink-2); font-size: .93rem; max-width: 46ch; margin-inline: auto; }

.cmp-legend { display: flex; flex-wrap: wrap; gap: .8rem 1.3rem; margin-top: 1rem; justify-content: center; }
.cmp-legend__item { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--ink-2); }
.cmp-legend__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.cmp-head-card { display: grid; gap: .55rem; justify-items: center; text-align: center; min-width: 150px; }
.cmp-head-card img { width: 68px; height: 68px; object-fit: contain; background: #F1EBE2; border-radius: var(--r-sm); padding: 5px; }
.cmp-head-card__name { font-size: .84rem; line-height: 1.25; font-weight: 500; }
.cmp-head-card .btn { width: 100%; }

/* ---- Deals ---- */
.deal-row {
  display: grid; grid-template-columns: 78px 1fr; gap: 1rem; align-items: center;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2);
}
.deal-row img { width: 78px; height: 78px; object-fit: contain; background: #F1EBE2; border-radius: var(--r-sm); padding: 5px; }
.deal-row__body { display: grid; gap: .35rem; }
.deal-row__name { font-family: var(--display); font-size: 1.08rem; }

/* ---- Guide ---- */
.guide-toc {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); padding: 1.1rem 1.25rem;
}
.guide-toc h2 { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; font-weight: 500; }
.guide-toc ol { list-style: none; counter-reset: toc; display: grid; gap: .45rem; }
.guide-toc li { counter-increment: toc; }
.guide-toc a { font-size: .9rem; color: var(--ink-2); }
.guide-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: .72rem; color: var(--accent); margin-right: .6rem; }
.guide-toc a:hover { color: var(--accent-3); }

.pick {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2); overflow: hidden;
  display: grid; gap: 0;
}
.pick__media { background: radial-gradient(120% 96% at 50% 6%, #FFFFFF, #E9E2D8); aspect-ratio: 4/3; }
.pick__media img { width: 100%; height: 100%; object-fit: contain; padding: 7%; mix-blend-mode: multiply; }
.pick__body { padding: 1.3rem 1.35rem 1.45rem; display: grid; gap: .7rem; align-content: start; }
.pick__rank { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pick__name { font-family: var(--display); font-size: 1.5rem; font-weight: 400; }
.pick__why { font-size: .93rem; color: var(--ink-2); line-height: 1.65; }
.pick__actions { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .3rem; }

/* ---- FAQ ---- */
.faq { display: grid; gap: .6rem; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); overflow: hidden;
}
.faq summary {
  padding: .95rem 1.1rem; cursor: pointer; font-weight: 500; font-size: .95rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 1.15rem; flex: none; transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.1rem 1.1rem; font-size: .91rem; color: var(--ink-2); line-height: 1.68; }

/* ---- Empty state ---- */
.empty-state {
  text-align: center; padding: clamp(2.5rem, 7vw, 4.5rem) 1.2rem;
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--bg-2);
}
.empty-state svg { width: 40px; height: 40px; color: var(--ink-3); margin: 0 auto 1rem; }
.empty-state h2 { font-family: var(--display); font-size: 1.45rem; font-weight: 400; margin-bottom: .55rem; }
.empty-state p { color: var(--ink-2); max-width: 50ch; margin: 0 auto 1.3rem; font-size: .93rem; }

/* ---- Breadcrumb ---- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .78rem; color: var(--ink-3); padding-top: 1.1rem; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--accent-3); }
.crumbs span[aria-hidden] { opacity: .5; }

/* ---- Filter bar ---- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.4rem; }
.filters label { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.filters select {
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .45rem .7rem; font-size: .84rem; cursor: pointer;
}
.filters select:focus { outline: none; border-color: var(--accent); }

/* =============================================================
   7. Effects
   ============================================================= */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.is-ready .reveal { will-change: opacity, transform; }

@view-transition { navigation: auto; }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .proscons { grid-template-columns: repeat(2, 1fr); }
  .deal-row { grid-template-columns: 100px 1fr auto; }
  .deal-row img { width: 100px; height: 100px; }
}

@media (min-width: 720px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .method { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer__bottom { grid-template-columns: 1fr auto; align-items: center; }
  .cmp-slots { grid-template-columns: repeat(4, 1fr); }
  .pick { grid-template-columns: 260px 1fr; }
  .pick__media { aspect-ratio: 1/1; }
  .specs { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2.4rem; }
}

@media (min-width: 960px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .hero__grid { grid-template-columns: 1.08fr .92fr; }
  .grid-cards { grid-template-columns: repeat(3, 1fr); }
  .ficha__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .ficha__cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.6rem; align-items: start; }
  .method { grid-template-columns: repeat(4, 1fr); }
  .gallery__main { position: sticky; top: calc(var(--nav-h) + 1.2rem); }
}

@media (min-width: 1280px) {
  .grid-cards { grid-template-columns: repeat(3, 1fr); }
  .grid-cards--4 { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================
   9. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  @view-transition { navigation: none; }
}

/* =============================================================
   10. Print
   ============================================================= */
@media print {
  .nav, .footer, .btn, .anchor-nav { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, .card { border-color: #ccc; background: #fff; }
}

/* =============================================================
   11. Home comparator promo (added after first design review)
   ============================================================= */
.cmp-promo { display: grid; gap: 2rem; align-items: center; }
.cmp-promo__art { display: grid; gap: .8rem; justify-items: center; }
.cmp-promo__art .radar { max-width: 300px; }
.cmp-promo__art .cmp-legend { margin-top: 0; }

@media (min-width: 960px) {
  .cmp-promo { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
}

/* =============================================================
   12. Mobile comparison table
   -------------------------------------------------------------
   A 4-column spec table cannot work on a phone: side-scrolling a
   long table means the reader loses track of which column is which
   on every row. Below 720px the table restructures into stacked
   spec blocks — one heading per specification, then one line per
   machine — so the page only ever scrolls vertically.

   The markup stays a real <table> (correct semantics, and the
   desktop layout is unchanged); only the display roles change.
   Each <td> carries data-product and a --dot colour from main.js.
   ============================================================= */

/* Sticky identity strip — desktop uses the column headers instead */
.cmp-bar { display: none; }

@media (max-width: 719px) {
  .cmp-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .5rem;
    position: sticky;
    top: var(--nav-h);
    z-index: 20;
    margin: 0 calc(var(--gutter) * -0.5) .5rem;
    padding: .55rem calc(var(--gutter) * 0.5);
    background: rgba(23, 19, 15, .93);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .cmp-bar__item {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    font-size: .72rem;
    color: var(--ink-2);
    line-height: 1.2;
  }
  .cmp-bar__item::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 3px;
    background: var(--dot);
    flex: none;
  }

  /* ---- unwrap the table ---- */
  .table-scroll { overflow: visible; border: 0; border-radius: 0; }
  .ctable { min-width: 0; display: block; }
  .ctable tbody { display: block; }
  .ctable tr { display: block; }

  /* Product header cards: a 2-up grid instead of table columns,
     so the buy buttons stay reachable at the top of the comparison. */
  .ctable thead { display: block; margin-bottom: .4rem; }
  .ctable thead tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }
  .ctable thead th {
    display: block;
    padding: .7rem .55rem;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r);
    position: static;
  }
  .ctable thead th:empty { display: none; }          /* the corner cell */
  .cmp-head-card { min-width: 0; gap: .4rem; }
  .cmp-head-card img { width: 46px; height: 46px; }
  .cmp-head-card__name { font-size: .76rem; }
  .cmp-head-card .btn { padding: .38rem .5rem; font-size: .72rem; }

  /* ---- group headings ---- */
  .ctable tr.grp { margin: 1.5rem 0 .1rem; }
  .ctable tr.grp th {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 .5rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-2);
  }

  /* ---- one block per specification ---- */
  .ctable tbody tr:not(.grp) {
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
  }
  .ctable tbody tr:not(.grp) th {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 .5rem;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-size: .875rem;
    font-weight: 500;
  }
  .ctable tbody tr:not(.grp) td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .9rem;
    padding: .28rem 0;
    border: 0;
    font-size: .84rem;
    text-align: right;
  }
  /* the machine's name, colour-keyed to the sticky strip and the radar */
  .ctable tbody tr:not(.grp) td::before {
    content: attr(data-product);
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 400;
    color: var(--ink-2);
    text-align: left;
    border-left: 3px solid var(--dot);
    padding-left: .5rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  .ctable tbody tr:not(.grp) td.is-best::before { color: var(--ink); }

  /* ---- buy row: name on top, full-width button under it ---- */
  .ctable tbody tr[data-row="buy"] td {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
    padding: .5rem 0;
    text-align: left;
  }
  .ctable tbody tr[data-row="buy"] td .btn { width: 100%; }
}

/* =============================================================
   13. Sticky buy bar & comparison-table affordances
   -------------------------------------------------------------
   Promoted from the v2 candidate after review. Two behaviours that
   only appear once the reader scrolls, so they cost nothing above
   the fold: the buy CTA follows you down a review page, and the
   comparison table keeps its column headers and marks the winning
   cell in a way you can see without hunting for a star.
   ============================================================= */

:root { --z-nav: 100; --z-bar: 90; --z-sticky: 20; }

/* =============================================================
   3. Sticky buy bar
   -------------------------------------------------------------
   On a review page the only CTA sat above the fold, but purchase
   intent peaks after the specs and the verdict. This bar reveals
   itself once the main buy box scrolls out of view.
   ============================================================= */
.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  background: rgba(23, 19, 15, .95);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .4);
  padding: .6rem var(--gutter);
  padding-bottom: max(.6rem, env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .4s var(--ease-out);
}
@supports not (backdrop-filter: blur(4px)) { .buybar { background: #17130F; } }
.buybar.is-in { transform: none; }
.buybar[hidden] { display: none; }

.buybar__inner {
  display: flex;
  align-items: center;
  gap: .8rem;
  max-width: var(--maxw);
  margin-inline: auto;
}
.buybar__img {
  width: 44px; height: 44px; flex: none;
  object-fit: contain;
  background: #F1EBE2;
  border-radius: var(--r-sm);
  padding: 3px;
}
.buybar__text { display: grid; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.buybar__name {
  font-size: .875rem; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buybar__meta {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buybar .btn { flex: none; }

/* Below 540px the product name would squeeze the button — drop the
   thumbnail and the meta line and give the CTA the room it needs. */
@media (max-width: 539px) {
  .buybar__img, .buybar__meta { display: none; }
  .buybar .btn { padding: .72rem 1.1rem; font-size: .88rem; }
}

/* The bar covers the foot of the page; give the footer clearance. */
.ficha-has-buybar .footer { padding-bottom: 4.5rem; }

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

/* =============================================================
   4. Comparison table
   -------------------------------------------------------------
   Audit (Comparison Table pattern): alternating rows, and keep the
   column identity visible. Tracking a value back to its column
   across 30+ rows is the whole failure mode of a wide spec table.
   ============================================================= */
@media (min-width: 720px) {
  /* Zebra striping — reading across four columns without it is guesswork */
  .ctable tbody tr:not(.grp):nth-of-type(odd) td { background: rgba(242, 228, 208, .022); }
  .ctable tbody tr:not(.grp):hover td { background: rgba(227, 168, 99, .06); }
  .ctable tbody tr:not(.grp):hover th { background: var(--bg-3); }

  /* the frozen spec-name column must sit above the striping */
  .ctable tbody th { z-index: calc(var(--z-sticky) - 1); }
}

/* -------------------------------------------------------------
   Sticky column headers — only from 960px up, and this is why:

   `overflow-x: auto` on .table-scroll makes overflow-y compute to
   auto as well (CSS overflow spec), which turns it into a scroll
   container. position:sticky then resolves against THAT box, not
   the viewport — and since it never scrolls vertically, a sticky
   thead has zero range and simply scrolls away with the page.

   So the header can only stick if .table-scroll stops being a
   scroll container. Measured: the table's minimum width with four
   machines is 861px. At a 960px viewport only 883px is available —
   22px of slack, which a longer product name would eat, and the
   overflow would then be CLIPPED (body is overflow-x: clip) and
   unreachable. At 1024px there is 944px available: 83px of slack.
   So 1024px is the threshold. Between 720 and 1023 the table keeps
   its horizontal scroll and no sticky header, which is the safe trade.
   ------------------------------------------------------------- */
@media (min-width: 1024px) {
  .table-scroll { overflow: visible; }

  .ctable thead th {
    position: sticky;
    top: var(--nav-h);
    z-index: var(--z-sticky);
    box-shadow: 0 1px 0 var(--line-2);
  }

  /* A best-value cell should read as the answer, not as a footnote */
  .ctable td.is-best {
    background: rgba(227, 168, 99, .09) !important;
    box-shadow: inset 2px 0 0 var(--accent);
  }
}

/* =============================================================
   14. Touch targets
   -------------------------------------------------------------
   Minimum 44x44px hit area, minimum 8px between adjacent targets.
   Scoped to coarse pointers so the desktop density that makes a
   spec-dense site scannable is preserved untouched.

   Measured in-browser after applying (before -> after):
     .btn-sm          34 -> 45px
     .anchor-nav a    35 -> 50px
     .filters select  34 -> 47px
     .gallery__thumb  65 -> 74px
     .cmp-slot__rm    24 -> 46px effective (28px dot + 9px inset)
     .cmp-result      70 -> 76px (already passed; it holds a 44px image)
   .chip is deliberately excluded: it is an informational label,
   not an interactive control.
   ============================================================= */
@media (pointer: coarse) {
  .btn-sm            { padding: .82rem 1.05rem; font-size: .85rem; }
  .anchor-nav a      { padding: .82rem 1rem; font-size: .84rem; }
  .anchor-nav        { gap: .5rem; }
  .filters select    { padding: .80rem .85rem; font-size: .88rem; }
  .cmp-result        { padding: .7rem .7rem; gap: .8rem; }
  .faq summary       { padding: 1.05rem 1.1rem; }
  .gallery__thumbs   { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: .6rem; }
  .p-card__actions   { gap: .6rem; }

  /* The remove badge on a compare slot was a 24px tap target. Keep the
     small visual dot, extend the hit area around it with a pseudo-element. */
  .cmp-slot__rm { width: 28px; height: 28px; }
  .cmp-slot__rm::after {
    content: "";
    position: absolute;
    inset: -9px;                 /* 46x46 effective */
    border-radius: 50%;
  }
}