/* Header chrome — the single source for the bar that sits on top of
   index.html, product.html, checkout.html and policies.html.

   This used to be duplicated: index.html carried a light bar with the nav on
   the left in its inline <style>, shop.css carried a dark bar with the nav on
   the right. The two drifted, so the same site showed two headers, and the
   light one flipped to dark under 600px and took its ink-coloured cart icon
   down with it — an invisible cart on exactly the screens most people shop on.
   One file, one header. Do not re-fork it.

   Tokens come from the host page (index.html inline, shop.css elsewhere). */

/* Height of the sticky bar, rounded up to the tallest variant (index carries
   a Buy now button the other pages do not). Anchor targets and the sticky FAQ
   heading offset themselves by this, so it lives beside the header it
   describes rather than in each page's own tokens. */
:root{--header-h:80px}
@media (max-width:820px){:root{--header-h:70px}}

.dropbar{background:var(--ink);color:var(--volt);text-align:center;padding:9px clamp(16px,3vw,44px);font-size:.78rem;font-weight:500}

/* ---------- Header — one design across index, product and checkout ----------
   Dark bar, wordmark left, nav right, cart last. index.html used to run a
   light bar with the nav on the left; the flip between pages cost more than
   the variety was worth, and on mobile the light version turned dark and
   took the ink-on-ink cart icon down with it. */
.header{position:sticky;top:0;z-index:70;background:var(--ink);border-bottom:var(--rule)}
.header-inner{max-width:var(--container);margin-inline:auto;padding:12px clamp(20px,3.5vw,48px);display:flex;align-items:center;gap:clamp(14px,2vw,24px)}
.header .nav{display:flex;gap:clamp(16px,2vw,26px);margin-left:auto;font-size:.875rem;font-weight:500}
.header .nav a{color:#fff;text-decoration:none;border-bottom:2px solid transparent;padding-block:3px;transition:border-color var(--dur) var(--ease)}
.header .nav a:hover{border-bottom-color:var(--volt)}
.header .nav + .cart-btn,.header .nav + .header-cta{margin-left:0}
.cart-btn{display:inline-flex;align-items:center;min-height:44px;gap:8px;background:transparent;border:0;color:#fff;font:600 .8rem/1 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;padding:8px;text-decoration:none;margin-left:auto}
.header .nav ~ .cart-btn{margin-left:0}
.cart-btn:hover{color:var(--volt)}
.cart-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;background:var(--volt);color:var(--ink);font:700 .7rem/1 'IBM Plex Mono',monospace;border-radius:10px}
.cart-badge[hidden]{display:none}

/* Compact header CTA. Sits after the cart so the reading order is
   browse → cart → buy. */
.header-cta{min-height:42px;padding:0 18px;font-size:.78rem}

/* ---------- Mobile nav ----------
   The nav used to vanish under 700px with nothing in its place, which left
   phones with no route to How it works, the FAQ or the policies. */
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:0;color:#fff;cursor:pointer}
.nav-toggle:hover{color:var(--volt)}
.nav-toggle .bar{display:block;width:20px;height:2px;background:currentColor;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.nav-toggle .bar + .bar{margin-top:5px}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Legal page belongs in the footer on desktop; on a phone the collapsed
   panel is the only menu there is, so it earns a row there. */
.nav .nav-more{display:none}

@media (max-width:820px){
  .nav-toggle{display:flex;margin-left:auto}
  .nav .nav-more{display:block}
  .header-inner{gap:8px}
  .header .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid rgba(255,255,255,.18);
    margin-left:0; padding:6px clamp(20px,3.5vw,48px) 14px;
  }
  .header .nav[hidden]{display:none}
  .header .nav a{
    padding-block:14px; border-bottom:1px solid rgba(255,255,255,.12);
    font-size:1rem;
  }
  .header .nav a:hover{border-bottom-color:rgba(255,255,255,.12);color:var(--volt)}
  .header .nav a:last-child{border-bottom:0}
  .header .header-cta{display:none}
  .header .nav ~ .cart-btn{margin-left:0}
}

/* Anchor targets clear the sticky header instead of landing under it. */
[id]{scroll-margin-top:calc(var(--header-h,72px) + 12px)}