/* ================================================================
   ANVIL v4 — base. Tokens, sky, header, footer shared across pages.
   ================================================================ */

/* ================================================================
   BRAND CONFIG — change colours / fonts here.
   ================================================================ */
:root{
  --color-primary-start: #f0a63c;
  --color-primary-end:   #3a2210;
  --color-black:         #0d0906;
  --color-gold:          #d4a24e;
  --color-bone:          #f3ead9;
  --color-success:       #2f6b4a;

  /* One variable family at two widths: Archivo at its narrowest (62) for
     display, matching the tall condensed ANVIL on the canister label, and
     at its normal width for body and UI. */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;

  --glass-bg: rgba(20, 14, 8, 0.42);
  --glass-border: rgba(244, 220, 170, 0.16);
  --radius-lg: 28px;
  --radius-md: 18px;

  /* The jar is deliberately TWO sizes. The hero clip fills the frame
     (CONFIG.hero.fit, matching v2), and the range settles to --jar-h —
     smaller than the hero, larger than a normal product shot. The
     scroll interpolates between them, so it is one jar shrinking into
     place rather than two jars swapping. */
  --jar-h: clamp(360px, 60vh, 640px);
  --jar-y: 44%;                 /* vertical centre of the jar in the stage */
}

/* ================================================================
   BASE
   ================================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }          /* Lenis drives smooth scroll */
body{
  margin:0;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--color-bone);
  background: var(--color-black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* Keyboard focus. The UA default here is a 1px near-black ring on a
   near-black page — present in the accessibility tree, invisible to
   the eye, which is the worst of both. Gold at 3px reads against
   every surface this page has (sky, glass card, gold button), and
   :focus-visible keeps it off mouse clicks. The offset is what stops
   it from being swallowed by the pill buttons' own border-radius. */
:where(a, button, [tabindex]):focus-visible{
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On the drenched stage gold can land on a gold ground (Vanilla), so
   focus there follows the stage ink instead. */
.stage__info :focus-visible,
.stage__hero-copy :focus-visible,
.site-header:not(.is-scrolled) :focus-visible{
  outline-color: var(--stage-ink);
}
.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }
h1,h2,h3{ font-family: var(--font-display); margin:0; }
h1,h2{ font-weight:900; font-stretch:62%; text-transform:uppercase; line-height:.9; letter-spacing:0; text-wrap:balance; }
h3{ font-family: var(--font-body); font-weight:700; line-height:1.15; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.eyebrow{
  font-family: var(--font-body); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem; color: var(--color-gold); margin:0 0 8px;
}
.section-title{ font-size: clamp(2.8rem, 6.5vw, 5rem); margin-bottom:18px; color:var(--color-bone); }

section{ position:relative; }

.btn{
  border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer;
  line-height: 1.2; -webkit-appearance: none; appearance: none;
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 28px; border-radius: 999px; font-weight:600; font-size:.95rem;
  transition: transform .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.btn--solid{ background: var(--color-gold); color: #241703; }
.btn--solid:hover{ transform: translateY(-2px); }
.btn--ghost{ border:1px solid var(--glass-border); color: var(--color-bone); }
.btn--ghost:hover{ background: rgba(255,255,255,0.07); }
.btn--lg{ padding: 18px 40px; font-size:1.02rem; }

/* ================================================================
   SKY — the single continuous backdrop.
   Fixed, behind everything, opacity-only transitions. Every layer is
   promoted to its own compositor layer so a scroll-driven opacity
   change never costs a repaint of the page underneath.
   ================================================================ */
.sky{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.sky > *{ position:absolute; inset:0; transform: translateZ(0); }

.sky__base{
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,   #23180d 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, #120c07 0%, transparent 62%),
    linear-gradient(180deg, #0f0a06 0%, #16100a 50%, #0c0805 100%);
}
/* warm amber bloom that owns the hero and dissolves away as the
   flavour wash takes over — never removed, only faded */
.sky__hero{
  background: radial-gradient(ellipse 62% 52% at 50% 44%,
              rgba(240,166,60,0.30) 0%, rgba(185,112,31,0.10) 42%, transparent 72%);
  will-change: opacity;
}
.sky__washes{ opacity:0; will-change: opacity; }
/* v5: each wash is an opaque flavour ground, not a tint. On a switch the
   incoming one is raised above the outgoing one and faded in, so the
   colour never dips through the dark base between two flavours. */
.sky__wash{
  --accent: #a3743c;
  --glow: #9a633b; --ground: #7c4b2a; --edge: #5e371f;
  position:absolute; inset:0;
  background: radial-gradient(ellipse 62% 60% at 50% 44%, var(--glow) 0%, var(--ground) 56%, var(--edge) 100%);
  opacity:0; will-change: opacity;
}
/* settles in over reviews / CTA / footer so the page ends darker than
   it started, without any section drawing an edge */
.sky__deep{
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%);
  opacity:0; will-change: opacity;
}
.sky__grain{
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
/* Deep enough that the jar always has a darker field to sit against.
   The flavour wash brightens the centre of the frame, and a black
   canister on a mid-brown wash is the one combination in the range
   with no separation — the vignette is what buys it back. */
.sky__vignette{
  background: radial-gradient(ellipse at 50% 50%, transparent 34%, rgba(0,0,0,0.74) 100%);
  will-change: opacity;
}

/* ================================================================
   HEADER
   ================================================================ */
/* Over the home stage the header has no bar: it takes the stage ink so it
   reads on every flavour ground, and nothing cuts across the hero's powder
   cloud. Past the stage, and on every other page, .is-scrolled brings the
   dark glass bar and bone text back. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding: 20px 0;
  color: var(--stage-ink);
  transition: background .35s ease, backdrop-filter .35s ease, padding .35s ease;
}
.site-header.is-scrolled{
  padding: 12px 0;
  color: var(--color-bone);
  background: rgba(13,9,6,0.6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.header__row{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; color: var(--color-bone); }
.site-header .brand{ color: inherit; }
.brand__mark{ color: var(--color-gold); }
.site-header .brand__mark{ color: var(--stage-mark); }
.site-header.is-scrolled .brand__mark{ color: var(--color-gold); }
.brand__word{ font-family: var(--font-display); font-weight:900; font-stretch:62%; text-transform:uppercase; letter-spacing:.04em; font-size:1.55rem; line-height:1; }
.site-nav{ display:flex; gap:32px; font-size:.92rem; font-weight:500; }
.site-nav a{ opacity:.85; transition: opacity .2s var(--ease-out); }
.site-nav a:hover{ opacity:1; }
.header__cta{ padding:10px 20px; font-size:.85rem; }
.site-header .btn--ghost{ color: inherit; border-color: color-mix(in srgb, currentColor 38%, transparent); }
.site-header .btn--ghost:hover{ background: color-mix(in srgb, currentColor 10%, transparent); }

/* Pre-JS resting state only. GSAP owns opacity and transform from
   there — deliberately no CSS transition, or it would fight the
   scroll-linked tween for control of the same two properties. */
.reveal-up{ opacity:0; }
.reveal-up.is-visible{ opacity:1; transform:none; }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer{ padding: 80px 0 40px; border-top:1px solid rgba(244,220,170,0.10); }
.footer__grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px; }
.footer__brand .brand{ margin-bottom:16px; }
.footer__tag{ color: rgba(243,234,217,0.5); font-size:.9rem; line-height:1.6; max-width:340px; margin:0; }
.footer__col h4{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color: var(--color-gold); margin:0 0 16px; font-weight:600; }
.footer__col a, .footer__muted{ display:block; color: rgba(243,234,217,0.62); font-size:.92rem; margin-bottom:10px; }
.footer__col a:hover{ color: var(--color-bone); }
.footer__bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:56px; padding-top:22px; border-top:1px solid var(--glass-border);
  font-size:.8rem; color: rgba(243,234,217,0.4);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px){
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px){
  .header__cta{ display:none; }
  /* Brand + nav + cart button no longer fit one row under ~430px -- the
     row hits a hard minimum width and the cart button is pushed past the
     viewport edge, clipped rather than wrapped (overflow-x:hidden). Found
     in the Task 10 visual QA pass at 390px: cartBtn.right = 425px against
     a 390px viewport. Nav goes with the header CTA on mobile so the cart
     button (the only shop entry point at this width) always stays on
     screen. */
  .site-nav{ display:none; }

  .footer__grid{ grid-template-columns: 1fr 1fr; gap:28px; }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1; transform:none; transition:none; }
}

/* ================================================================
   ADDITIONS (v4)
   ================================================================ */
:root{
  --header-h: 76px;
  --color-surface: #14100a;          /* solid panels: drawer, buy bar */
  --hairline: rgba(244,220,170,0.12);
  --text-muted: rgba(243,234,217,0.62);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
.num{ font-variant-numeric: tabular-nums; }
.btn--sm{ padding: 10px 18px; font-size: .85rem; }
.btn:active{ transform: translateY(1px); }
.textlink{ color: var(--color-gold); font-weight: 600; font-size: .9rem; }
.textlink:hover{ text-decoration: underline; text-underline-offset: 3px; }
.hairline{ border-top: 1px solid var(--hairline); }

/* --- header cart button --------------------------------------- */
.header__actions{ display:flex; align-items:center; gap:14px; }
.cart-btn{
  position:relative; display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--glass-border);
  background:transparent; color: var(--color-bone); cursor:pointer;
  transition: background .2s ease, transform .2s var(--ease-out);
}
.cart-btn:hover{ background: rgba(255,255,255,0.07); }
.cart-btn:active{ transform: scale(.96); }
.cart-btn__count{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background: var(--color-gold); color:#241703;
  font-size:.7rem; font-weight:700; line-height:18px; text-align:center;
  font-variant-numeric: tabular-nums;
}
.cart-btn__count.is-popping{ animation: badgePop .4s var(--ease-out); }
.site-header .cart-btn{ color: inherit; border-color: color-mix(in srgb, currentColor 38%, transparent); }
.site-header .cart-btn:hover{ background: color-mix(in srgb, currentColor 10%, transparent); }
.site-header .cart-btn__count{ background: var(--stage-badge); color: var(--stage-btn-text); }
.site-header.is-scrolled .cart-btn__count{ background: var(--color-gold); color: #241703; }
@keyframes badgePop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.35);} 100%{ transform:scale(1);} }

/* --- cart drawer ---------------------------------------------- */
.cart-overlay{
  position:fixed; inset:0; z-index:80; background: rgba(13,9,6,0.6);
  opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease;
}
.cart-overlay.is-open{ opacity:1; visibility:visible; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:90;
  width: min(440px, 100vw); background: var(--color-surface);
  border-left: 1px solid var(--hairline);
  display:flex; flex-direction:column;
  transform: translateX(100%); visibility:hidden;
  transition: transform .45s var(--ease-out), visibility .45s;
}
.cart-drawer.is-open{ transform: translateX(0); visibility:visible; }
.cart-drawer__head{
  display:flex; align-items:baseline; gap:10px; padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hairline);
}
.cart-drawer__head h2{ font-size:1.7rem; }
.cart-drawer__count{ color: var(--text-muted); font-size:.9rem; }
.cart-drawer__close{
  margin-left:auto; width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-border);
  background:transparent; color: var(--color-bone); cursor:pointer; display:grid; place-items:center;
}
.cart-drawer__close:hover{ background: rgba(255,255,255,0.07); }
.cart-drawer__body{ flex:1; overflow-y:auto; padding: 4px 24px; }
.cart-drawer__foot{ padding: 18px 24px 24px; border-top: 1px solid var(--hairline); display:grid; gap:12px; }
.cart-drawer__foot .btn{ width:100%; }
.cart-drawer__continue{ background:none; border:none; color: var(--text-muted); font: inherit; font-size:.9rem; cursor:pointer; }
.cart-drawer__continue:hover{ color: var(--color-bone); }

/* --- cart lines (shared by drawer and cart page) ---------------- */
.cart-line{
  display:grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items:center;
  padding: 18px 0; border-bottom: 1px solid var(--hairline);
}
.cart-line__thumb{ width:64px; height:64px; object-fit:contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.5)); }
.cart-line__name{ font-weight:600; font-size:.98rem; }
.cart-line__meta{ color: var(--text-muted); font-size:.82rem; margin-top:2px; }
.cart-line__price{ font-weight:600; font-variant-numeric: tabular-nums; text-align:right; }
.cart-line__row{ display:flex; align-items:center; gap:14px; margin-top:10px; }
.cart-line__remove{ background:none; border:none; color: var(--text-muted); font:inherit; font-size:.8rem; cursor:pointer; padding:0; }
.cart-line__remove:hover{ color: var(--color-bone); text-decoration:underline; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--glass-border); border-radius:999px; }
.qty button{
  width:32px; height:32px; border:none; background:transparent; color: var(--color-bone); cursor:pointer;
  display:grid; place-items:center; border-radius:50%;
}
.qty button:hover{ background: rgba(255,255,255,0.07); }
.qty button:disabled{ opacity:.35; cursor:default; }
.qty output{ min-width:24px; text-align:center; font-weight:600; font-variant-numeric: tabular-nums; font-size:.92rem; }

.cart-ship{ padding: 16px 0 6px; font-size:.84rem; color: var(--text-muted); }
.cart-ship__bar{ height:2px; background: rgba(243,234,217,0.12); margin-top:8px; overflow:hidden; }
.cart-ship__fill{ height:100%; background: var(--color-gold); transform-origin:left; transform: scaleX(0); transition: transform .5s var(--ease-out); }
.cart-summary-row{ display:flex; justify-content:space-between; font-size:.95rem; }
.cart-summary-row strong{ font-variant-numeric: tabular-nums; }

.cart-empty{ text-align:center; padding: 48px 12px; color: var(--text-muted); }
.cart-empty svg{ width:52px; height:auto; color: var(--color-bone); opacity:.22; margin-bottom:14px; }
.cart-empty p{ margin:0 0 12px; color: var(--color-bone); font-weight:600; }
.cart-empty nav{ display:flex; flex-wrap:wrap; justify-content:center; gap: 6px 16px; font-size:.88rem; }
.cart-empty nav a{ color: var(--color-gold); }

body.drawer-open{ overflow:hidden; }

@media (max-width:768px){
  :root{ --header-h: 64px; }
  .header__actions .header__cta{ display:none; }
}

/* Cross-document view transition: the jar morphs from the home stage to
   its PDP in Chromium. Other browsers navigate normally; the shared sky
   means there is no flash either way. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration: .35s; }
::view-transition-group(jar){ animation-duration: .55s; animation-timing-function: cubic-bezier(0.16,1,0.3,1); }
@media (prefers-reduced-motion: reduce){ @view-transition { navigation: none; } }

/* ================================================================
   STAGE THEME (v5). js/home.js writes these onto <html> while a flavour
   owns the stage and removes them again otherwise, so the hero and every
   other page run on the values below. Registered as <color> so a flavour
   switch fades the ink rather than snapping it.
   ================================================================ */
@property --stage-ink      { syntax: '<color>'; inherits: true; initial-value: #f3ead9; }
@property --stage-mark     { syntax: '<color>'; inherits: true; initial-value: #d4a24e; }
@property --stage-badge    { syntax: '<color>'; inherits: true; initial-value: #d4a24e; }
@property --stage-btn-text { syntax: '<color>'; inherits: true; initial-value: #241703; }
@property --stage-word     { syntax: '<color>'; inherits: true; initial-value: rgba(243,234,217,0.09); }
@property --pt-shadow      { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,0.5); }
:root{
  --stage-ink: #f3ead9; --stage-mark: #d4a24e; --stage-badge: #d4a24e;
  --stage-btn-text: #241703; --stage-word: rgba(243,234,217,0.09); --pt-shadow: rgba(0,0,0,0.5);
}
html{
  transition: --stage-ink .8s ease, --stage-mark .8s ease, --stage-badge .8s ease,
              --stage-btn-text .8s ease, --stage-word .8s ease, --pt-shadow .8s ease;
}
@media (prefers-reduced-motion: reduce){ html{ transition: none; } }