/* =========================================================================
   Padelkit — design system (build-less: one style.css, one app.js)
   Art direction: "the storage wall" — the whole site is one calm modular
   shelving elevation. Content lives in hairline-framed compartments on a
   chalk ground; sections divide along strong architectural rules; a single
   deep-spruce green carries the brand, oak-brown warms the labels, warmth
   otherwise comes from wood-toned photography. One typeface — Familjen
   Grotesk (Swedish) — used architecturally at committed scale contrast.
   Light + dark. Operated by Botlease. International (EN) home-org store.
   ========================================================================= */
@font-face{
  font-family:"Familjen Grotesk";
  src:url("fonts/familjen-grotesk-var-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Familjen Grotesk";
  src:url("fonts/familjen-grotesk-var-latin-italic.woff2") format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  /* palette (light): chalk-painted wall, spruce, oak */
  --bg:#FFFFFF; --surface:#F5F7F4; --surface-2:#EAEEE9;
  --ink:#16211B; --ink-soft:#53645B; --muted:#647468;
  --line:#E3E8E3; --line-soft:#EEF1EE; --rule:#16211B;
  --accent:#0A6E3E; --accent-bright:#0BBF62; --accent-hover:#075730; --on-accent:#FFFFFF;
  --wood:#0BBF62; --wood-bright:#C6F833;
  --spruce-deep:#0E1B12;
  --dark:#0E1B12; --on-dark:#EAF1EC; --on-dark-muted:#A7BFB0;
  --success:#0A8A4F; --danger:#E0261A;
  --img-filter:saturate(.92) contrast(1.02) brightness(1.01) sepia(.05);
  color-scheme:light;

  /* type + metrics (theme-independent) */
  --sans:"Familjen Grotesk",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --radius:2px; --radius-sm:2px; --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#10140F; --surface:#171C15; --surface-2:#1E241B;
  --ink:#EAF1EC; --ink-soft:#BFD3C6; --muted:#93A899;
  --line:#2A322A; --line-soft:#232A23; --rule:#4A564C;
  --accent:#3FD07E; --accent-bright:#57E08E; --accent-hover:#57E08E; --on-accent:#0C1A10;
  --wood:#57E08E; --wood-bright:#C6F833;
  --spruce-deep:#0C140E;
  --dark:#0A0F0A; --on-dark:#EAF1EC; --on-dark-muted:#A7BFB0;
  --success:#57E08E; --danger:#E0776F;
  --img-filter:brightness(.84) saturate(.88) contrast(1.04) sepia(.04);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#10140F; --surface:#171C15; --surface-2:#1E241B;
  --ink:#EAF1EC; --ink-soft:#BFD3C6; --muted:#93A899;
  --line:#2A322A; --line-soft:#232A23; --rule:#4A564C;
  --accent:#3FD07E; --accent-bright:#57E08E; --accent-hover:#57E08E; --on-accent:#0C1A10;
  --wood:#57E08E; --wood-bright:#C6F833;
  --spruce-deep:#0C140E;
  --dark:#0A0F0A; --on-dark:#EAF1EC; --on-dark-muted:#A7BFB0;
  --success:#57E08E; --danger:#E0776F;
  --img-filter:brightness(.84) saturate(.88) contrast(1.04) sepia(.04);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --surface:#F5F7F4; --surface-2:#EAEEE9;
  --ink:#16211B; --ink-soft:#53645B; --muted:#647468;
  --line:#E3E8E3; --line-soft:#EEF1EE; --rule:#16211B;
  --accent:#0A6E3E; --accent-bright:#0BBF62; --accent-hover:#075730; --on-accent:#FFFFFF;
  --wood:#0BBF62; --wood-bright:#C6F833;
  --spruce-deep:#0E1B12;
  --dark:#0E1B12; --on-dark:#EAF1EC; --on-dark-muted:#A7BFB0;
  --success:#0A8A4F; --danger:#E0261A;
  --img-filter:saturate(.92) contrast(1.02) brightness(1.01) sepia(.05);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.56;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
h4{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.2}
p{margin:0}
figure{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tnum{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1}
/* Brand flag: one quiet italic label — never tracked caps, never repeated as section grammar */
.eyebrow{display:block;font-style:italic;font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--wood)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--radius-sm);font-weight:600}
.skip-link:focus{left:16px}

/* Top announcement bar (injected into header) */
.topbar{background:var(--spruce-deep);color:var(--on-dark)}
.topbar .wrap{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;padding:9px 40px;font-size:12.5px;letter-spacing:.02em}
.topbar span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;opacity:.94}
.topbar .dot{width:4px;height:4px;background:var(--wood-bright);flex:none}

/* Header — solid chalk, one strong rule below (no glass) */
header{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:21px;letter-spacing:-.02em}
.brand .mark{width:24px;height:24px;color:var(--accent);flex:none}
.nav-links{display:flex;gap:24px;margin-left:18px}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink-soft);padding:6px 0;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--accent);transition:right .28s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--ink-soft)}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.cartbtn{position:relative}
.cartbtn .count{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:700;display:grid;place-items:center;line-height:1}

/* Buttons — squared, decisive */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;letter-spacing:.005em;transition:transform .12s,background .2s,border-color .2s,color .2s;border:1px solid transparent}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-block{width:100%}
.btn-lg{padding:15px 30px;font-size:15.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ── Home hero: headline beside the storage wall ─────────────────────────── */
.hero{border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,5vw,72px);align-items:center;padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(44px,6vw,84px)}
.hero h1{font-size:clamp(42px,5vw,68px);letter-spacing:-.028em;max-width:12ch}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p.lede{margin-top:22px;font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:var(--ink-soft);max-width:38ch}
.hero .cta-row{margin-top:30px}
.hero-facts{margin-top:34px;display:flex;flex-wrap:wrap;row-gap:8px;border-top:1px solid var(--rule);padding-top:14px;font-size:13px;color:var(--ink-soft)}
.hero-facts span{padding-right:18px}
.hero-facts span+span{border-left:1px solid var(--line);padding-left:18px}
/* the wall: shared 1px compartments, one spruce bay, one line-art bay */
.hero-wall{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(0,.72fr);gap:1px;background:var(--rule);border:1px solid var(--rule);height:clamp(380px,42vw,560px)}
.hw-cell{background:var(--surface);position:relative;overflow:hidden;min-height:0;min-width:0}
.hw-cell img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.hw-a{grid-column:1/3;grid-row:1/3}
.hw-motto{grid-column:3;grid-row:1;background:var(--accent);color:var(--on-accent);display:flex;align-items:flex-end;padding:clamp(12px,1.4vw,20px)}
.hw-motto p{font-style:italic;font-weight:500;font-size:clamp(15px,1.5vw,20px);line-height:1.32}
.hw-b{grid-column:3;grid-row:2}
.hw-art{grid-column:1;grid-row:3;display:grid;place-items:center;background:var(--surface-2);color:var(--accent)}
.hw-art svg{width:min(44%,72px)}
.hw-c{grid-column:2/4;grid-row:3}
@media (prefers-reduced-motion:no-preference){
  /* one composed entrance: the copy steps in, then the finished wall is hung
     as a single unit (per-cell stagger would flash the ink backdrop) */
  .hero-copy>*{animation:rise .7s var(--ease) backwards}
  .hero-copy>:nth-child(2){animation-delay:.07s}
  .hero-copy>:nth-child(3){animation-delay:.14s}
  .hero-copy>:nth-child(4){animation-delay:.21s}
  .hero-wall{animation:rise .9s var(--ease) .18s backwards}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Sections — sheet divisions along strong rules */
section.pad{padding:clamp(52px,6.5vw,88px) 0}
/* The home hero's primary button jumps to #range. The header is sticky, so
   without this the section heading lands underneath it and the first thing the
   visitor sees is the middle of the tier strip. */
section[id]{scroll-margin-top:84px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:28px;border-top:1px solid var(--rule);padding-top:20px}
.sec-head h2{font-size:clamp(26px,3vw,38px)}
.sec-head p{color:var(--ink-soft);margin-top:9px;max-width:52ch;font-size:15px;line-height:1.5}
.link-more{font-size:14px;font-weight:600;color:var(--accent);white-space:nowrap;border-bottom:1.5px solid transparent;transition:border-color .2s}
.link-more:hover{border-color:var(--accent)}
.geo{max-width:66ch;margin:0;border-top:1px solid var(--line);padding-top:22px;font-size:15px;line-height:1.6;color:var(--muted)}
.geo strong{color:var(--ink-soft);font-weight:600}

/* Category index (home) — an architect's register, not a card rack */
.cat-index{display:grid}
.ci-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"m n c" "m b c";column-gap:clamp(20px,3vw,36px);align-items:center;border-top:1px solid var(--line);padding:18px 0}
.ci-row:first-child{border-top:none}
.ci-row:last-child{border-bottom:1px solid var(--rule)}
.ci-media{grid-area:m;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.ci-media img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);transition:transform .6s var(--ease)}
.ci-row h3{grid-area:n;font-size:clamp(20px,2.2vw,27px);align-self:end}
.ci-row p{grid-area:b;color:var(--muted);font-size:14px;line-height:1.5;max-width:60ch;align-self:start;margin-top:4px}
.ci-count{grid-area:c;font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:var(--ink-soft);white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.ci-count::after{content:"→";color:var(--accent);font-weight:600;transition:transform .25s var(--ease)}
.ci-row:hover h3{color:var(--accent)}
.ci-row:hover .ci-count::after{transform:translateX(4px)}
.ci-row:hover .ci-media img{transform:scale(1.05)}

/* Editorial band (Journal) — one drenched spruce sheet */
.editorial{background:var(--spruce-deep);color:var(--on-dark)}
.editorial .eb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,4vw,64px);align-items:center;padding-top:clamp(56px,6vw,84px);padding-bottom:clamp(56px,6vw,84px)}
.editorial .eyebrow{color:var(--wood-bright)}
.editorial h2{color:var(--on-dark);font-size:clamp(27px,3.2vw,42px);margin-top:12px}
.editorial p{color:var(--on-dark-muted);margin-top:16px;font-size:16px;line-height:1.62;max-width:52ch}
.editorial .sig{margin-top:20px;font-style:italic;font-size:16px;color:var(--on-dark)}
.editorial .eb-media{overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(237,239,231,.28);background:var(--surface-2)}
.editorial .eb-media img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.editorial .btn-ghost{border-color:var(--on-dark-muted);color:var(--on-dark)}
.editorial .btn-ghost:hover{background:var(--on-dark);color:var(--spruce-deep)}
.editorial :focus-visible{outline-color:var(--wood-bright)}

/* Props — open ruled triptych */
.props{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
.prop{padding:26px 24px 6px 0;display:flex;gap:14px;align-items:flex-start}
.prop+.prop{border-left:1px solid var(--line);padding-left:24px}
.prop svg{width:24px;height:24px;color:var(--accent);flex:none;margin-top:2px;stroke-width:1.5}
.prop h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.prop p{color:var(--ink-soft);font-size:13px;margin-top:5px;line-height:1.5}

/* Grid — the shelving unit: shared hairlines via card borders; when a row is
   not full the frame simply ends (an open shelf), no tinted filler bays */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.grid>span{display:contents}
.card{background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;overflow:hidden;display:flex;flex-direction:column;transition:background .25s}
.card:hover{background:var(--surface-2)}
.card .thumb{aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--surface-2)}
.card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:var(--img-filter);transition:transform .6s var(--ease)}
.card:hover .thumb img{transform:scale(1.04)}
.card .thumb .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent)}
.card .thumb .ph svg{width:50%}
.card .badge{position:absolute;top:0;left:0;z-index:2;background:var(--surface);color:var(--ink-soft);border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;padding:6px 10px}
.card .badge.sale{background:var(--wood);color:#FCF9F4;border-color:var(--wood)}
/* Unavailable (api/_stock.js): the card stays — the product is still findable
   and the page still ranks — but it must read as "look, don't buy" at a
   glance. Muted photo, plain-spoken badge, price greyed so it cannot be
   mistaken for a live offer. */
.card .badge.out{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.card.is-out .thumb img{opacity:.45;filter:var(--img-filter) saturate(.25)}
.card.is-out .price{color:var(--muted)}
.card .cbody{padding:16px 17px 18px;display:flex;flex-direction:column;gap:4px;flex:1;border-top:1px solid var(--line-soft)}
.card .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--wood);font-weight:600}
.card h3{font-size:16.5px;font-weight:550;letter-spacing:-.012em;margin-top:2px;line-height:1.25}
.card:hover h3{color:var(--accent)}
.card .spec{font-size:13px;color:var(--ink-soft);line-height:1.45;text-wrap:pretty}
.card .price{margin-top:auto;padding-top:12px;font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:0}
.card .price s{color:var(--muted);font-weight:400;font-size:13px;margin-left:7px}
.card.guide .thumb{aspect-ratio:16/10}

/* Chips — rectangular tabs */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chip{padding:9px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink-soft);transition:border-color .18s,color .18s,background .18s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hidden{display:none!important}
.subnav{font-size:13.5px;color:var(--muted);margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.subnav > span:first-child{font-weight:600;color:var(--ink-soft)}
.subnav a{color:var(--accent);font-weight:600}
.subnav a:hover{text-decoration:underline;text-underline-offset:2px}
.subnav [aria-hidden]{color:var(--line)}

/* Breadcrumb */
.breadcrumb{font-size:12.5px;color:var(--muted);padding:20px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span[aria-current]{color:var(--ink-soft)}

/* Page hero (category / sub / guide / news) — drawing-sheet header, photo in a compartment */
.page-hero{border-bottom:1px solid var(--rule)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,64px);align-items:end;padding-bottom:clamp(28px,3.5vw,48px)}
.ph-copy .breadcrumb{padding-top:24px}
.ph-copy h1{font-size:clamp(32px,4.2vw,54px);letter-spacing:-.025em;margin-top:clamp(18px,2.6vw,34px);max-width:20ch}
.ph-intro{color:var(--ink-soft);margin-top:14px;max-width:58ch;font-size:16px;line-height:1.55}
.ph-media{aspect-ratio:3/2;overflow:hidden;border:1px solid var(--rule);background:var(--surface-2);margin-top:24px}
.ph-media img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}

/* Product detail */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start;padding-top:18px}
/* Gallery: one framed compartment (the stage) + a quiet film-strip of thumbs */
.pd-media{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
.pd-stage{position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--surface-2);aspect-ratio:1/1}
.pd-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:var(--img-filter)}
.pd-stage .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent)}
.pd-stage .ph svg{width:44%}
.pd-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.pd-thumb{width:64px;height:64px;flex:none;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);opacity:.68;transition:opacity .18s,border-color .18s,box-shadow .18s}
.pd-thumb:hover{opacity:1;border-color:var(--ink)}
.pd-thumb.active{opacity:1;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pd-thumb img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.pd h1{font-size:clamp(30px,3.4vw,42px);margin-top:6px}
.pd .price-lg{font-family:var(--mono);font-size:clamp(24px,2.2vw,28px);font-weight:600;margin:18px 0 20px}
.price-lg s{color:var(--muted);font-weight:400;font-size:17px;margin-left:8px}
.price-lg .vat{font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--muted);margin-left:10px;letter-spacing:.01em}
.price-lg .save{font-size:12.5px;font-weight:700;color:#FCF9F4;background:var(--wood);padding:4px 10px;vertical-align:middle;margin-left:10px}
.pd .lede{color:var(--ink-soft);font-size:16px;line-height:1.6}
.specs{margin:24px 0;border-top:1px solid var(--rule)}
.specs .row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.specs .row span:first-child{color:var(--muted)}
.specs .row span:last-child{font-weight:600;text-align:right}
.qty{display:inline-flex;align-items:center;border:1px solid var(--ink);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.qty button{width:42px;height:48px;font-size:19px;color:var(--ink-soft)}
.qty button:hover{background:var(--surface-2);color:var(--ink)}
.qty span{min-width:34px;text-align:center;font-weight:600}
.buy-row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin-top:24px}
.buy-row .btn{flex:1;min-width:200px}
/* Multi-buy tiers. Deliberately plain — no struck-through reference price, no
   ribbon, no countdown: each row states what that quantity actually costs, and
   the saving is a real difference from the price we charge at quantity 1. The
   numbers are generated from api/_tiers.js, the same module that prices the
   order, so the table cannot drift from the charge. */
.tier-live{flex:1 0 100%;margin:4px 0 0;font-size:14px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.tier-live strong{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.tier-on{color:var(--accent-bright);font-weight:600}
.tier-next{color:var(--muted)}
.tiers{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.tiers h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 12px;line-height:1.3}
.tier-tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tier-tbl th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 0 8px}
.tier-tbl th+th,.tier-tbl td+td{text-align:right}
.tier-tbl td{padding:9px 0;border-top:1px solid var(--line);color:var(--ink-soft)}
.tier-pct{color:var(--accent-bright);font-weight:600}
.tier-rule{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
/* The same tier, on the surfaces where it used to be invisible: one line per
   card in every grid, and one sentence above the grid on the home page and the
   shop. Flat and ruled like the rest of the shop — a hairline box, square
   corners, no ribbon and no colour that pretends to be a sale badge, because
   this is a standing rule and not a promotion. */
.tierstrip{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 24px;padding:14px 18px;border:1px solid var(--line);background:var(--surface-2)}
.tierstrip b{font-size:16px;font-weight:650;color:var(--ink);white-space:nowrap}
.tierstrip span{font-size:14px;line-height:1.55;color:var(--ink-soft);max-width:74ch;text-wrap:pretty}
.tierstrip .ts-why{font-size:12.5px;color:var(--muted)}
/* Under the price, never over it: the single-unit price stays the headline
   figure, the tier is the footnote. Both halves are their own box so a narrow
   card wraps between them instead of inside a price. */
.card .ctier{display:flex;flex-wrap:wrap;gap:1px 9px;margin:5px 0 0;font-family:var(--mono);font-size:11.5px;line-height:1.35}
.card .ct-line{color:var(--accent-bright);font-weight:600}
.card .ct-pct{color:var(--muted)}
.stock{font-size:13px;color:var(--success);font-weight:600;display:inline-flex;gap:7px;align-items:center;margin-top:14px}
.stock i{width:7px;height:7px;background:var(--success);display:inline-block}
/* Same dot, different truth. Muted rather than alarm-red: nothing is broken,
   we simply cannot ship this one today. */
.stock.out{color:var(--muted)}
.stock.out i{background:var(--muted)}
/* Sits exactly where the buy row used to, so the eye lands on the explanation
   instead of hunting for a button that is not there. */
.unavailable{margin-top:20px;padding:18px 20px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.unavailable p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;text-wrap:pretty}
.unavailable-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.unavailable-cta .btn{flex:1;min-width:190px}
.ticks{list-style:none;padding:0;margin:2px 0 24px;display:grid;gap:9px}
.ticks li{position:relative;padding-left:28px;color:var(--ink-soft);font-size:14.5px;line-height:1.4}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border:1px solid var(--line);background:var(--surface)}
.ticks li::after{content:"✓";position:absolute;left:0;top:2px;width:17px;height:17px;line-height:17px;text-align:center;font-size:11px;font-weight:800;color:var(--accent)}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.trust div{font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center}
.trust svg{width:18px;height:18px;color:var(--accent);flex:none}
.gpsr{margin-top:20px;border-top:1px solid var(--line);padding:12px 0 0}
.gpsr summary{font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.gpsr summary:hover{color:var(--ink)}
.gpsr p{font-size:13px;color:var(--muted);line-height:1.55;margin-top:10px;max-width:62ch}
.pay-trust{display:flex;align-items:center;gap:8px;margin:12px 0 2px;font-size:13.5px;color:var(--muted)}
.pay-trust svg{width:18px;height:18px;flex:none;color:var(--accent)}
.pay-trust b{color:var(--ink);font-weight:600}

/* FAQ */
.faq{max-width:780px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:2px 0}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{padding:16px 0;font-weight:600;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 16px;color:var(--ink-soft);font-size:15px;line-height:1.6;max-width:62ch}

/* Cart / checkout */
.page-head{padding:40px 0 6px}
.page-head h1{font-size:clamp(34px,4.4vw,52px);letter-spacing:-.025em}
.layout-2{display:grid;grid-template-columns:1.55fr .95fr;gap:34px;align-items:start;padding-top:24px;padding-bottom:60px}
.line{display:grid;grid-template-columns:78px 1fr auto;grid-template-areas:"t b r";gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.line .lthumb{grid-area:t;width:78px;height:78px;background:var(--surface-2);position:relative;overflow:hidden;border:1px solid var(--line);color:var(--accent)}
.line .lthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:var(--img-filter)}
.line .lthumb .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent)}
.line .lthumb .ph svg{width:60%}
.line h4{font-size:17px;font-weight:600;margin:0}
.line h4 a:hover{color:var(--accent)}
.line .kicker{font-size:12px;letter-spacing:.01em;color:var(--wood);font-weight:600}
.line .lmeta{color:var(--muted);font-size:13px;margin-top:2px}
.line .lright{grid-area:r;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
/* The tier, on the line it applies to: either what the discount is worth, or
   what the next step up would cost — stated in full, never as "save more". */
.line .ltier{font-size:12.5px;margin-top:4px;color:var(--muted);line-height:1.5}
.ltier-on{color:var(--accent-bright);font-weight:600}
.link-tier{color:var(--accent-bright);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.link-tier:hover{color:var(--accent-hover)}
.line .lsave{font-size:12.5px;color:var(--accent-bright);font-weight:600;margin-top:-4px;font-variant-numeric:tabular-nums}
/* Items that went unshippable while they sat in the basket. Above the cart,
   never inside the totals — the shopper has to be told why the total dropped
   before he starts wondering whether we lost his order. */
.cart-gone{margin-bottom:26px;padding:18px 20px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.cart-gone h2{font-size:17px;letter-spacing:-.01em;margin-bottom:6px}
.cart-gone>p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;text-wrap:pretty}
.cart-gone-line{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}
.cart-gone-line a{font-size:14.5px;font-weight:550}
.cart-gone-why{font-size:12.5px;color:var(--muted);margin-right:auto}
.link-remove{font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.link-remove:hover{color:var(--danger)}
.summary{background:var(--surface);border:1px solid var(--rule);padding:24px;position:sticky;top:96px}
.summary h3,.summary h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 16px;line-height:1.3}
.summary .sl{display:flex;justify-content:space-between;padding:8px 0;font-size:14.5px;color:var(--ink-soft)}
.summary .sl-save{color:var(--accent-bright);font-weight:600}
.sl-tier{font-size:11.5px;color:var(--accent-bright);font-weight:600}
.summary .tier-rule{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.summary .tot{display:flex;justify-content:space-between;padding:14px 0 4px;margin-top:8px;border-top:1px solid var(--rule);font-size:19px;font-weight:650}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.empty svg{width:54px;height:54px;color:var(--line);margin:0 auto 16px}
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.field input,.field select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:15px;font-family:inherit}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.card-box{background:var(--surface);border:1px solid var(--line);padding:24px;margin-bottom:22px}
.card-box > h3,.card-box > h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 18px;line-height:1.3;display:flex;gap:10px;align-items:center}
.card-box > h3 .n,.card-box > h2 .n{width:22px;height:22px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:12px;flex:none}
.pay-opts{display:flex;flex-direction:column;gap:10px}
.pay{display:flex;gap:13px;align-items:center;padding:15px;border:1px solid var(--line);border-radius:var(--radius-sm);transition:border-color .18s,background .18s;text-align:left;width:100%;background:var(--surface)}
.pay:hover{border-color:var(--accent)}
.pay[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.pay .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center}
.pay[aria-pressed="true"] .dot{border-color:var(--accent)}
.pay[aria-pressed="true"] .dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
/* display:block on both — they are spans inside one flex child, so without it
   the label and the description render on a single run-on line. */
.pay .plabel{display:block;font-weight:600;font-size:15px}
.pay .pdesc{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.pay .pico{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.pay .btc{color:var(--wood)}
.btc-panel{margin-top:16px;border:1px dashed var(--accent);padding:20px;background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.btc-panel .amt{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--ink)}
.btc-panel .amt small{font-size:13px;color:var(--muted);font-weight:400}
.addr{display:flex;gap:8px;align-items:center;margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px}
.addr code{font-family:var(--mono);font-size:12.5px;word-break:break-all;color:var(--ink-soft);line-height:1.5}
.addr button{flex:none;font-size:12px;font-weight:700;color:var(--accent);padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.demo-tag{display:inline-flex;gap:7px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-top:14px}
.demo-tag::before{content:"";width:7px;height:7px;background:var(--accent)}

/* Order confirmation */
.order-hero{text-align:center;padding:56px 20px 20px}
.order-hero .check{width:64px;height:64px;background:color-mix(in srgb,var(--success) 16%,transparent);display:grid;place-items:center;margin:0 auto 20px}
.order-hero .check svg{width:32px;height:32px;color:var(--success)}
.order-hero h1{font-size:clamp(32px,4vw,44px)}
.order-hero p{color:var(--muted);margin-top:10px}
.reff{font-family:var(--mono);font-weight:600;color:var(--ink);background:var(--surface-2);padding:3px 9px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:34px 0}
.tl{position:relative;text-align:center;padding-top:26px}
.tl::before{content:"";position:absolute;top:7px;left:50%;width:100%;height:1px;background:var(--rule)}
.tl:last-child::before{display:none}
.tl .d{position:absolute;top:0;left:calc(50% - 8px);width:16px;height:16px;background:var(--surface);border:1px solid var(--rule);z-index:1}
.tl.done .d{background:var(--success);border-color:var(--success)}
.tl.active .d{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
.tl b{font-size:13px;display:block}
.tl span{font-size:12.5px;color:var(--muted)}
.email{border:1px solid var(--rule);overflow:hidden;max-width:560px;margin:0 auto;background:var(--surface);text-align:left}
.email .ehead{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:13px}
.email .ehead .from{font-weight:600}
.email .ehead .sub{color:var(--muted);margin-top:2px}
.email .ebody{padding:18px}
.email .ebody p{font-size:14px;color:var(--ink-soft);margin-bottom:10px;line-height:1.55}
.email .eitems{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:12px 0}
.email .eitems .ei{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0}
.email .ei{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0}

/* Site directory — the crawlable half of the footer. Emitted as real html by
   tools/generate.mjs (the rest of the footer is written by app.js at runtime),
   so it shares the footer's dark base and sits flush against it: one block to
   the reader, two elements to the DOM. */
.sitedir{background:var(--dark);color:var(--on-dark);margin-top:22px}
.sitedir + footer{margin-top:0}
.dir{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-block:52px 40px;border-bottom:1px solid rgba(237,239,231,.14)}
.dir h2{margin:0 0 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);font-weight:600;line-height:1.2}
.dir ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.dir a{font-size:13.5px;color:var(--on-dark);opacity:.84;line-height:1.4;display:inline-block}
.dir a:hover{opacity:1}
/* Sub-categories hang under their category, so the hierarchy reads at a glance
   instead of arriving as one flat list of names. */
.dir li ul{margin-top:10px;padding-left:13px;border-left:1px solid rgba(237,239,231,.16);gap:9px}
.dir li ul a{font-size:12.5px;color:var(--on-dark-muted)}
.dir li ul a:hover{color:var(--on-dark)}
.sitedir :focus-visible{outline-color:var(--wood-bright)}

/* Footer — the spruce base of the wall */
footer{background:var(--dark);color:var(--on-dark);margin-top:22px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-block:56px 36px}
/* Slim variant: used on generated pages, where .dir above already carries the
   navigation and only identity, contact and legal are left to show. The single
   column moves to the last track so it lines up with the directory's right-hand
   column instead of floating in the middle. */
@media (min-width:901px){.foot-slim>:last-child{grid-column:4}}
.foot .brand{color:var(--on-dark);font-size:21px}
.foot .brand .mark{color:var(--accent-bright)}
.foot p{color:var(--on-dark-muted);font-size:13.5px;margin-top:12px;max-width:34ch;line-height:1.6}
.foot h2{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);font-weight:600;margin-bottom:14px;line-height:1.2}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot ul a{font-size:13.5px;color:var(--on-dark);opacity:.84}
.foot ul a:hover{opacity:1}
footer :focus-visible{outline-color:var(--wood-bright)}
.paybar{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;align-items:center}
.paybar span{font-size:11px;font-weight:600;letter-spacing:.03em;border:1px solid rgba(237,239,231,.18);padding:6px 9px;color:var(--on-dark-muted)}
.paybar span.ideal{color:var(--on-dark-muted)}
.paybar span.btc{color:var(--wood-bright);border-color:rgba(200,154,100,.35)}
.foot-legal{border-top:1px solid rgba(237,239,231,.14);padding-block:18px 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-legal p{color:var(--on-dark-muted);font-size:12.5px;margin:0;max-width:62ch;line-height:1.5}
.foot-legal .sister{flex-basis:100%;order:9}

.note{background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));border-radius:var(--radius-sm);padding:13px 16px;font-size:13px;color:var(--ink-soft);display:flex;gap:10px;margin:18px 0;line-height:1.5}
.note svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:1px}

/* Prose (legal + info pages) */
.prose{max-width:780px}
.prose h2{font-size:clamp(24px,2.6vw,30px);margin:38px 0 12px;max-width:30ch;border-top:1px solid var(--rule);padding-top:18px}
.prose h3{font-size:19px;margin:22px 0 8px}
.prose p{color:var(--ink-soft);margin-bottom:14px;max-width:62ch;text-wrap:pretty}
.prose ul{color:var(--ink-soft);margin:0 0 14px;padding-left:22px;max-width:62ch}
.prose li{margin-bottom:7px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.updated{font-size:13px;color:var(--muted)}

/* AEO answer block — a standfirst directly under a hub H1 */
.answer{font-size:17.5px;font-weight:500;line-height:1.55;color:var(--ink);max-width:58ch;margin:0 0 24px;text-wrap:pretty}

/* Guide "at a glance" comparison table — open editorial rules */
.tablewrap{overflow-x:auto;margin:8px 0 22px}
.gtable{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
.gtable th,.gtable td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.gtable th{border-bottom:1px solid var(--rule);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700}
.gtable th:first-child,.gtable td:first-child{padding-left:0}
.gtable tr:last-child td{border-bottom:1px solid var(--rule)}
.gtable td:nth-child(3){font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600}
.gtable a{font-weight:600}

/* Related-guides topic-cluster block */
.related{margin:36px 0 0;border-top:1px solid var(--rule);padding-top:22px}
.related h2{margin:0 0 14px;border-top:none;padding-top:0}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.related li{position:relative;padding-left:22px}
.related li::before{content:"→";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
.related li a{color:var(--ink);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color .15s}
.related li a:hover{border-bottom-color:var(--accent)}

/* Product embeds inside prose (guides/news) — a catalog ledger, not a shop rack */
.prose a.card{color:inherit;text-decoration:none}
.prose .grid{display:flex;flex-direction:column;gap:0;border:1px solid var(--line)}
.prose .grid .card{flex-direction:row;align-items:stretch;border:0}
.prose .grid .card+.card{border-top:1px solid var(--line)}
.prose .grid .card .thumb{aspect-ratio:1/1;width:132px;flex:none;border-right:1px solid var(--line-soft)}
.prose .grid .card .cbody{border-top:none;justify-content:center;padding:14px 18px}
.prose .grid .card .price{margin-top:6px;padding-top:0}
@media (max-width:560px){.prose .grid .card .thumb{width:96px}.prose .grid .card .cbody{padding:10px 12px}.prose .grid .card .spec{display:block}}

/* News sources list */
.sources{color:var(--ink-soft);font-size:14px}
.sources a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:var(--bg);padding:13px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;z-index:80;transition:opacity .25s,transform .25s;pointer-events:none;display:flex;gap:9px;align-items:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{color:var(--accent-bright)}

/* Cookie consent bar (ePrivacy). One compartment pinned to the bottom rule,
   same chalk surface and hairline as every other panel. Accept and Decline get
   identical size, weight and hit area — declining is never the harder click.
   Sits above the toast; while it is open the toast steps up out of its way.
   Capped at 40% of the viewport (dvh so a phone's shrinking toolbar counts) and
   scrolled beyond that, so the bar can never swallow the page it asks about. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--surface);border-top:1px solid var(--rule);max-height:40vh;max-height:40dvh;overflow-y:auto;overscroll-behavior:contain}
.consent:focus{outline:none}                                    /* programmatic focus stays quiet */
.consent:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.consent .wrap{display:flex;align-items:center;gap:22px;padding:14px 40px}
.consent p{font-size:13.5px;line-height:1.5;color:var(--ink-soft);max-width:76ch}
.consent p strong{color:var(--ink);font-weight:650}
.consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.consent-actions{display:flex;gap:10px;margin-left:auto;flex-shrink:0}
.consent-actions .btn{padding:11px 22px;font-size:14px;min-width:118px}
/* --consent-h is the bar's measured height, set by app.js and re-measured on
   resize/orientationchange. The fallbacks only cover the first paint; how far
   the text wraps depends on viewport and font, which is why it is measured. */
.consent-open .toast{bottom:calc(var(--consent-h,120px) + 26px)}
.consent-open body{padding-bottom:calc(var(--consent-h,120px) + 22px)}   /* keep the bar off the last line of the footer */
@media (max-width:760px){
  .consent .wrap{flex-direction:column;align-items:stretch;gap:12px;padding:14px 20px}
  .consent p{max-width:none}
  .consent-actions{margin-left:0}
  .consent-actions .btn{flex:1 1 0;min-width:0}
  .consent-open .toast{bottom:calc(var(--consent-h,200px) + 22px)}
  .consent-open body{padding-bottom:calc(var(--consent-h,200px) + 22px)}
}
@media (max-width:380px){
  .consent .wrap{padding:12px 15px;gap:10px}
  .consent p{font-size:13px}
  .consent-actions .btn{padding:12px 10px}
}

/* Mobile navigation */
.navtoggle{display:none}
.mobile-menu{position:fixed;inset:0;z-index:200}
.mobile-menu[hidden]{display:none}
.mm-backdrop{position:absolute;inset:0;background:rgba(16,23,17,.5)}
.mm-panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,340px);background:var(--surface);border-left:1px solid var(--rule);display:flex;flex-direction:column;padding:16px 18px;gap:8px;animation:mmIn .26s var(--ease)}
@keyframes mmIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.mm-head .brand{font-size:18px;font-weight:650;display:flex;align-items:center;gap:8px;color:var(--ink)}
.mm-head .brand .mark svg{width:22px;height:22px}
.mm-links{display:flex;flex-direction:column;margin-top:6px}
.mm-links a{font-size:18px;font-weight:500;letter-spacing:-.01em;padding:13px 4px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.mm-links a:active{color:var(--accent)}
.mm-foot{margin-top:auto;padding-top:14px;color:var(--muted);font-size:12px;line-height:1.5}
@media (max-width:560px){.navtoggle{display:inline-flex}}
@media (min-width:561px){.mobile-menu{display:none!important}}

/* Scroll accent (decorative, enhance-only): a spruce dash draws along each
   section rule as it enters view. The rule itself is always visible; if JS
   or IntersectionObserver never run, nothing is missing from the page. */
.sec-head{position:relative}
.sec-head::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:76px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .1s}
.sec-head.rv-in::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.sec-head::before{transform:none}}

/* Responsive */
@media (max-width:900px){
  .wrap{padding:0 28px}
  .topbar .wrap{padding:9px 28px}
  .hero-grid{grid-template-columns:1fr;gap:34px;padding-top:40px;padding-bottom:44px}
  .hero h1{font-size:clamp(38px,9vw,48px)}
  .hero-wall{height:clamp(260px,52vw,380px);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .hw-art{display:none}
  .hw-a{grid-column:1/3;grid-row:1}
  .hw-motto{grid-column:3;grid-row:1}
  .hw-b{grid-column:1;grid-row:2}
  .hw-c{grid-column:2/4;grid-row:2}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .editorial .eb-grid{grid-template-columns:1fr;gap:26px}
  .ph-grid{grid-template-columns:1fr;gap:0;align-items:start}
  .ph-media{aspect-ratio:2/1;margin-top:22px}
  .pd{grid-template-columns:1fr;gap:26px}.pd-media{position:relative;top:auto}.pd-stage{aspect-ratio:4/3}
  .layout-2{grid-template-columns:1fr}.summary{position:static}
  .props{grid-template-columns:1fr}
  .prop{padding:18px 0 14px;border-bottom:1px solid var(--line)}
  .prop+.prop{border-left:none;padding-left:0}
  .prop:last-child{border-bottom:none}
  .foot{grid-template-columns:1fr 1fr}
  .dir{grid-template-columns:1fr 1fr;gap:30px 36px;padding-block:44px 34px}
  .timeline{grid-template-columns:1fr 1fr}.tl::before{display:none}
  .ci-row{grid-template-columns:76px minmax(0,1fr) auto}
}
@media (max-width:560px){
  .nav-links{display:none}
  .wrap{padding:0 20px}
  .topbar .wrap{padding:9px 20px}
  .hero-grid{padding-top:32px;padding-bottom:36px}
  .hero h1{font-size:clamp(34px,10.5vw,42px)}
  .hero-facts{column-gap:16px}
  .hero-facts span{padding-right:0}
  .hero-facts span+span{border-left:none;padding-left:0}
  .grid{grid-template-columns:repeat(2,1fr)}
  .card .cbody{padding:12px 12px 14px}
  .card h3{font-size:14.5px}
  .card .spec{font-size:12px}
  .card .price{font-size:15px;padding-top:8px}
  .pd-thumbs{gap:8px}
  .pd-thumb{width:56px;height:56px}
  .ci-row{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"m n" "m c" "b b";row-gap:4px}
  .ci-row p{margin-top:6px}
  .ci-count{justify-self:start}
  .topbar span:nth-child(n+3){display:none}
  .foot{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}
  .dir{grid-template-columns:1fr;gap:28px;padding-block:38px 30px}
  .line{grid-template-columns:60px 1fr;grid-template-areas:"t b" "t r"}.line .lthumb{width:60px;height:60px}
  .line .lright{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .buy-row .btn{min-width:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.rv{opacity:1;transform:none}}