/* ═══════════════════════════════════════════════════════════════════════════
   Storefront layout, own skin.

   Structure is straight ecommerce — image-first product cards, merchandised
   category tiles, hero, sticky buy box, filter sidebar, footer link columns —
   because that is what makes a catalogue read as a place to shop.

   The skin is not borrowed: black primary actions, acid-lime accent, white
   surfaces on a light neutral. No marketplace navy/amber, no star rows.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#fff;
  --surface:#f5f6f7;      /* section bands, image wells */
  --surface-2:#eceef0;
  --ink:#111316;
  --ink-2:#41464e;
  --muted:#6b7280;
  --line:#e5e7eb;
  --line-2:#d1d5db;
  --cta:#111316;          /* primary action — black */
  --cta-hover:#2f343c;
  --cta-ink:#fff;
  --accent:#d8f000;       /* acid lime — badges, highlights, accents only */
  --accent-ink:#111316;
  --sale:#d92d20;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(17,19,22,.05);
  --shadow-lift:0 8px 28px rgba(17,19,22,.11);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0e0f11;--surface:#17191c;--surface-2:#1f2226;--ink:#f2f3f4;--ink-2:#c3c7cc;
        --muted:#8d939b;--line:#26292e;--line-2:#363a41;--cta:#f2f3f4;--cta-hover:#d9dade;
        --cta-ink:#0e0f11;--shadow:none;--shadow-lift:0 8px 28px rgba(0,0,0,.5);}
}

*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1340px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ── announcement + header ──────────────────────────────────────────────── */
.announce{background:var(--ink);color:#e9eaec;font-size:12px;padding:8px 0;text-align:center}
.announce b{color:var(--accent)}
@media (prefers-color-scheme:dark){.announce{background:var(--surface-2)}}

.site-header{position:sticky;top:0;z-index:40;background:var(--bg);
  border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:26px;height:70px}
.logo{display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;
  cursor:pointer;font-family:inherit;color:inherit;white-space:nowrap}
.logo-mark{width:28px;height:28px;border-radius:7px;background:var(--ink);color:var(--accent);
  display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:-.02em}
@media (prefers-color-scheme:dark){.logo-mark{background:var(--accent);color:var(--ink)}}
.logo-word{font-size:20px;font-weight:800;letter-spacing:-.045em}
/* min-width:0 on both the flex item and the input: a flex child defaults to
   min-width:auto, and <input> has an intrinsic size, so without this the
   header cannot shrink below ~230px of search box and pushes the document
   wider than the viewport on small phones. */
.searchbar{flex:1;min-width:0;max-width:520px;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid transparent;border-radius:999px;padding:0 16px;height:42px}
.searchbar:focus-within{border-color:var(--ink);background:var(--bg)}
.searchbar input{flex:1;min-width:0;width:100%;border:0;background:none;outline:0;font:inherit;font-size:14px;color:inherit}
.searchbar input::placeholder{color:var(--muted)}
.searchbar button{background:none;border:0;cursor:pointer;color:var(--muted);font-size:16px;padding:0}
.searchbar button:hover{color:var(--ink)}
.nav{display:flex;gap:4px;margin-left:auto;align-self:stretch;align-items:stretch}
.nav-item{position:relative;display:flex;align-items:center}
.nav-link{display:flex;align-items:center;height:100%;padding:0 10px;font-size:14px;font-weight:500;
  color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent}
.nav-link:hover,.nav-item:hover .nav-link,.nav-item:has(:focus-visible) .nav-link{color:var(--ink)}
.nav-link.is-current{color:var(--ink);border-bottom-color:var(--ink)}
/* Anchored to the item's RIGHT edge. The nav sits hard against the right of
   the header, so a left-anchored 250px panel on the last few items extends
   past the viewport — and a hidden-but-laid-out panel still counts toward
   document width, which gave every page a horizontal scrollbar. */
.nav-panel{position:absolute;top:100%;left:auto;right:-10px;min-width:250px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.13);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .13s ease,transform .13s ease;z-index:50}
/* Hover, plus keyboard focus only. :focus-within would also match a mouse
   click — the clicked link keeps focus, so the panel stays pinned open after
   the pointer leaves. :focus-visible matches keyboard focus and not clicks. */
.nav-item:hover .nav-panel,.nav-item:has(:focus-visible) .nav-panel{opacity:1;visibility:visible;transform:none}
@supports not selector(:has(*)){
  .nav-item:focus-within .nav-panel{opacity:1;visibility:visible;transform:none}
  .nav-item:focus-within .nav-link{color:var(--ink)}
}
.nav-panel ul{list-style:none;margin:0;padding:0}
.nav-panel li a{display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.nav-panel li a:hover{background:var(--surface);color:var(--ink)}
.nav-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.nav-panel-all{display:block;margin-top:6px;padding:9px 10px;border-top:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--ink)}
.nav-mobile{display:none;border-top:1px solid var(--line);overflow:hidden}
.nav-mobile-row{display:flex;gap:18px;overflow-x:auto;padding:11px 24px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.nav-mobile-row::after{content:"";flex:0 0 4px}
.nav-mobile-row::-webkit-scrollbar{display:none}
.nav-mobile-row a{font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
@media(max-width:1080px){.nav{display:none}.nav-mobile{display:block}}
@media(max-width:640px){.searchbar{max-width:none}}
.foot-depts{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  padding:0 0 22px;font-size:13px;color:var(--muted)}
.foot-depts a{color:var(--ink-2)}
.foot-depts a:hover{color:var(--ink);text-decoration:underline}
.dept-row{display:flex;flex-wrap:wrap;gap:10px}
.dept-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);font-size:14px;font-weight:600;color:var(--ink)}
.dept-chip span{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface);
  border-radius:999px;padding:2px 8px;font-variant-numeric:tabular-nums}
.dept-chip:hover{border-color:var(--ink);background:var(--surface)}
.dept-chip--empty{opacity:.5}
.hub-intro{max-width:70ch;margin-bottom:8px}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:var(--surface);
  border-radius:var(--radius);overflow:hidden;margin:24px 0 0;min-height:400px}
@media(max-width:860px){.hero{grid-template-columns:1fr;min-height:0}}
.hero-copy{padding:52px 48px;display:flex;flex-direction:column;justify-content:center;gap:16px}
@media(max-width:860px){.hero-copy{padding:36px 26px}}
.hero-kicker{display:inline-flex;align-items:center;gap:7px;background:var(--accent);
  color:var(--accent-ink);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;align-self:flex-start}
.hero h1{margin:0;font-size:clamp(32px,4.4vw,54px);font-weight:800;letter-spacing:-.045em;line-height:1.03}
.hero p{margin:0;font-size:17px;color:var(--ink-2);max-width:44ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hero-collage{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.hero-tile{background:var(--bg);display:grid;place-items:center;padding:20px;min-height:150px}
.hero-tile img{width:100%;height:100%;max-height:170px;object-fit:contain;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.hero-tile img{mix-blend-mode:normal}}

/* ── trust strip ────────────────────────────────────────────────────────── */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);margin:16px 0 0;overflow:hidden}
@media(max-width:800px){.trust{grid-template-columns:repeat(2,1fr)}}
.trust div{background:var(--bg);padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.trust b{font-size:13.5px;font-weight:600}
.trust span{font-size:12.5px;color:var(--muted)}

/* ── section headers ────────────────────────────────────────────────────── */
.section{margin:52px 0 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:20px;flex-wrap:wrap}
.section-head h2{margin:0;font-size:clamp(21px,2.4vw,27px);font-weight:800;letter-spacing:-.03em}
.section-head p{margin:5px 0 0;color:var(--muted);font-size:14px}
.section-link{font-size:14px;font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:1px}

/* ── category merchandising tiles ───────────────────────────────────────── */
.cat-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cat-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--bg);display:flex;flex-direction:column;transition:.16s}
.cat-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px);border-color:var(--line-2)}
.cat-img{aspect-ratio:4/3;background:var(--surface);display:grid;place-items:center;padding:18px}
.cat-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.cat-img img{mix-blend-mode:normal}}
.cat-body{padding:14px 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cat-name{font-size:15px;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.cat-count{font-size:12.5px;color:var(--muted);white-space:nowrap}
.cat-card--thin .cat-count{color:var(--sale)}

/* ── product cards: image-first ─────────────────────────────────────────── */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.16s;position:relative}
.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px);border-color:var(--line-2)}
.card-media{display:block;aspect-ratio:1;background:var(--surface);padding:22px;position:relative}
.card-img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.card-img{mix-blend-mode:normal}}
.card-badges{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:5px;z-index:2}
.card-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-brand{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.card-title{margin:0;font-size:14px;line-height:1.4;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-title a:hover{text-decoration:underline}
.card-foot{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:11px}
.card-price{font-size:21px;font-weight:750;letter-spacing:-.035em}
.card-price--none{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}

/* badges */
.badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:5px}
.badge--top{background:var(--accent);color:var(--accent-ink)}
.badge--rank{background:var(--ink);color:var(--bg)}
.badge--draft{background:var(--surface-2);color:var(--muted)}
.badge--value{background:var(--sale);color:#fff}

/* rating — compact bar, not a star row */
.rating{display:flex;align-items:center;gap:7px;font-size:12.5px}
.rating-val{font-weight:700;letter-spacing:-.02em}
.rating-bar{width:52px;height:4px;border-radius:2px;background:var(--surface-2);
  position:relative;overflow:hidden;flex:none}
.rating-bar i{position:absolute;inset:0 auto 0 0;background:var(--ink);border-radius:2px}
.rating-n{color:var(--muted);font-variant-numeric:tabular-nums}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn,.buy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--cta);color:var(--cta-ink);border:1px solid var(--cta);border-radius:999px;
  font:inherit;font-size:13.5px;font-weight:650;padding:11px 20px;cursor:pointer;
  transition:.14s;white-space:nowrap;letter-spacing:-.01em}
.btn:hover,.buy-btn:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:var(--cta-ink)}
.buy-btn{width:100%}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.buy-btn--sm{padding:8px 14px;font-size:12.5px;width:auto}
.buy-btn--lg{padding:16px 30px;font-size:15.5px;width:100%}

/* ── breadcrumb + page head ─────────────────────────────────────────────── */
.crumbs{display:flex;gap:7px;flex-wrap:wrap;padding:20px 0 0;font-size:13px;color:var(--muted)}
.crumbs button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;padding:0}
.crumbs a:hover,.crumbs button:hover{color:var(--ink);text-decoration:underline}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  flex-wrap:wrap;padding:14px 0 20px}
.page-head h1{margin:0;font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.04em;line-height:1.08}
.page-sub{margin:6px 0 0;color:var(--muted);font-size:14px}
.sortbar{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted)}
.sortbar select{padding:9px 12px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}

/* ── shop layout: filters + results ─────────────────────────────────────── */
.layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:34px;padding:0 0 60px}
@media(max-width:920px){.layout{grid-template-columns:1fr}.rail{display:none}}
.rail{align-self:start;position:sticky;top:88px}
.rail-box{border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 6px}
.rail section{margin-bottom:20px}
.rail h3{font-size:13.5px;font-weight:700;margin:0 0 10px;letter-spacing:-.01em}
.rail label{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;
  font-size:13.5px;color:var(--ink-2)}
.rail label:hover{color:var(--ink)}
.rail input{appearance:none;width:17px;height:17px;flex:none;border:1.5px solid var(--line-2);
  border-radius:5px;cursor:pointer;position:relative;background:var(--bg);transition:.12s}
.rail input:checked{background:var(--ink);border-color:var(--ink)}
.rail input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
  border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(42deg)}
.rail .count{margin-left:auto;font-size:12px;color:var(--muted)}
.rail-clear{background:none;border:0;color:var(--muted);font:inherit;font-size:12.5px;
  cursor:pointer;text-decoration:underline;padding:0 0 14px}
.rail-clear:hover{color:var(--ink)}

/* ── product detail ─────────────────────────────────────────────────────── */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:44px;padding:12px 0 20px;align-items:start}
@media(max-width:980px){.pdp{grid-template-columns:1fr;gap:26px}}
.gallery{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px}
@media(max-width:560px){.gallery{grid-template-columns:1fr}.thumbs{display:none}}
.thumbs{display:flex;flex-direction:column;gap:10px}
.thumb{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);display:grid;place-items:center;padding:8px;cursor:pointer}
.thumb--on{border-color:var(--ink);border-width:2px}
.thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.thumb img{mix-blend-mode:normal}}
.gallery-main{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:44px;display:grid;place-items:center;aspect-ratio:1}
.hero-img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.hero-img{mix-blend-mode:normal}}

.buybox{border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  position:sticky;top:88px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.buybox .brand{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.buybox h1{margin:0;font-size:22px;font-weight:700;line-height:1.28;letter-spacing:-.025em}
.price{padding:2px 0 0}
.price__amount{font-size:36px;font-weight:800;letter-spacing:-.045em;display:block;line-height:1}
.price__stamp{display:block;font-size:12px;color:var(--muted);margin-top:8px}
.price__disclaimer{font-size:11.5px;color:var(--muted);margin:9px 0 0;line-height:1.5}
.price--unavailable .price__cta-note{font-size:15px;color:var(--muted)}
.cta-note{font-size:11.5px;color:var(--muted);margin:0;text-align:center}
.buybox-list{list-style:none;margin:4px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-2);display:flex;flex-direction:column;gap:8px}
.buybox-list li{display:flex;gap:9px;align-items:flex-start}
.buybox-list li::before{content:"✓";color:var(--ink);font-weight:700;font-size:12px;line-height:1.35}

.pdp-detail{padding:12px 0 0;max-width:820px}
.verdict{background:var(--surface);border-radius:var(--radius);padding:24px 26px;margin:0 0 22px}
.verdict h2{font-size:17px;margin:0 0 10px;font-weight:750;letter-spacing:-.02em}
.verdict p{margin:0 0 10px;font-size:16px;line-height:1.62;color:var(--ink-2)}
.best-for{font-size:14px;color:var(--muted);margin:0}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 24px}
@media(max-width:600px){.proscons{grid-template-columns:1fr}}
.proscons>div{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.proscons h3{font-size:12px;letter-spacing:.07em;text-transform:uppercase;margin:0 0 10px;font-weight:700}
.proscons ul{margin:0;padding:0;list-style:none;font-size:14px;display:flex;flex-direction:column;gap:7px}
.proscons li{padding-left:20px;position:relative;line-height:1.45}
.pros li::before{content:"+";position:absolute;left:0;font-weight:800;color:var(--ink)}
.cons li::before{content:"–";position:absolute;left:0;font-weight:800;color:var(--sale)}
.specs{width:100%;border-collapse:collapse;font-size:14px;border-top:1px solid var(--line)}
.specs th,.specs td{padding:13px 0;border-bottom:1px solid var(--line);text-align:left}
.specs th{width:170px;color:var(--muted);font-weight:500}
.specs td{font-variant-numeric:tabular-nums}

/* ── notes ──────────────────────────────────────────────────────────────── */
.note{background:var(--surface);border-radius:var(--radius);padding:15px 18px;font-size:13.5px;
  margin:0 0 22px;line-height:1.55;color:var(--ink-2)}
.note strong{color:var(--ink)}
.note code{background:var(--surface-2);padding:2px 6px;border-radius:4px;font-size:12.5px;
  font-family:ui-monospace,Menlo,monospace}

/* ── image fallbacks ────────────────────────────────────────────────────── */
.img-wrap{display:grid;place-items:center;width:100%;height:100%}
.img-wrap--failed{background:var(--surface)}
.img-wrap--failed::after{content:attr(data-letter);font-size:34px;font-weight:800;
  color:var(--line-2);letter-spacing:-.03em}
.product-img--placeholder{display:grid;place-items:center;width:100%;height:100%;background:var(--surface)}
.product-img--placeholder span{font-size:34px;font-weight:800;color:var(--line-2)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer{background:var(--surface);margin-top:64px;padding:48px 0 40px;
  border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px;padding-bottom:34px;
  border-bottom:1px solid var(--line-2)}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h4{font-size:13px;font-weight:700;margin:0 0 12px;letter-spacing:-.01em}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  font-size:13.5px;color:var(--muted)}
.foot-grid a:hover{color:var(--ink);text-decoration:underline}
.foot-blurb{font-size:13.5px;color:var(--muted);margin:12px 0 0;max-width:34ch;line-height:1.6}
.foot-legal{padding-top:22px;font-size:12px;color:var(--muted);line-height:1.65;max-width:92ch}
.foot-legal p{margin:0 0 6px}

/* ── consent bar ────────────────────────────────────────────────────────── */
#consent-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:680px;
  margin:0 auto;background:var(--ink);color:var(--bg);border-radius:var(--radius);
  padding:16px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  box-shadow:0 10px 34px rgba(0,0,0,.22)}
#consent-bar[hidden]{display:none}
#consent-bar p{margin:0;font-size:13.5px;flex:1;min-width:220px;line-height:1.5}
#consent-bar div{display:flex;gap:9px}
#consent-bar .btn{background:var(--bg);color:var(--ink);border-color:var(--bg);
  padding:9px 18px;font-size:13px}
#consent-bar .btn:hover{background:var(--surface-2);border-color:var(--surface-2);color:var(--ink)}
#consent-bar .btn--ghost{background:transparent;color:var(--bg);border-color:#4a4f57}
#consent-bar .btn--ghost:hover{background:#2b3038;color:var(--bg);border-color:#2b3038}

/* ── category buying guidance ───────────────────────────────────────────── */
.cat-intro{max-width:70ch;margin:0 0 30px;font-size:15.5px;line-height:1.68;color:var(--ink-2)}
.cat-intro h2{font-size:19px;font-weight:750;letter-spacing:-.02em;margin:26px 0 8px;color:var(--ink)}
.cat-intro p{margin:0 0 14px}
.cat-intro ul{margin:0 0 14px;padding-left:20px}
.cat-intro li{margin-bottom:6px}
.cat-intro strong{color:var(--ink);font-weight:650}