@charset "UTF-8";
/* ==========================================================================
   VIRGIN CANNABIS — the storefront stylesheet.

   Every value here is lifted from "Virgin Cannabis Homepage v2.dc.html" and
   "Virgin Cannabis Shop.dc.html". The design pack styles everything inline; this
   file is that same design expressed as tokens and components so it can be
   cached once and reused across forty-odd pages. Nothing was re-tuned: if a
   number looks oddly specific (11.5px, .24em, -.012em) it is because the
   design said so.

   1. Tokens          2. Reset and base      3. Layout
   4. Type            5. Buttons and pills   6. Header, nav, mega menu
   7. Cards           8. Sections            9. Footer
   10. Drawers, dialogs, age gate           11. Shop
   12. Product        13. Forms and account  14. Editorial and utility
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* -- Ground and surfaces --------------------------------------------- */
  --cream:          #F7F4EA;  /* page ground */
  --surface:        #FCFAF5;  /* raised card on the ground */
  --surface-tint:   #F1EBDD;  /* sunken / alternate card */
  --surface-field:  #F3EEE1;  /* inputs, quiet buttons */
  --surface-hover:  #EFE9DC;  /* hover fill for quiet controls */
  --surface-deep:   #E3DCCB;
  --surface-rule:   #E0D7C2;
  --hero-a:         #FCFAF5;
  --hero-b:         #F2EDE0;
  --hero-c:         #E6DFCD;

  /* -- Botanical greens ------------------------------------------------ */
  --green:          #102B20;  /* deep botanical green — primary action */
  --green-forest:   #183B28;  /* forest green — hover, emphasis italic */
  --green-black:    #0C2119;  /* almost-black green */
  --green-panel:    #0B2113;  /* panel gradient head */

  /* -- Gold ------------------------------------------------------------ */
  --gold:           #C59A45;  /* luxury gold */
  --gold-champagne: #D8B66A;  /* refined champagne */
  --gold-pale:      #EBD497;
  --gold-light:     #F0DCA4;
  --gold-wash:      #F2E1AE;
  --gold-cream:     #FBF1D2;
  --gold-mist:      #FDF6E2;
  --gold-mid:       #B88A32;
  --gold-deep:      #B0801F;
  --gold-ink:       #8A6420;
  --gold-label:     #8A5F12;  /* eyebrow on light ground */
  --gold-eyebrow:   #7A5410;  /* hero eyebrow */
  --gold-sale:      #6B4A0C;

  /* -- Ink ------------------------------------------------------------- */
  --ink:            #171B18;  /* headings, primary text */
  --ink-body:       #454C43;  /* paragraphs */
  --ink-muted:      #5F6559;  /* meta, captions */
  --ink-nav:        #273027;  /* navigation, list links */
  --ink-quiet:      #3D443B;
  --ink-ghost:      #8A8F86;
  --ink-placeholder:#9AA093;

  /* -- Type ------------------------------------------------------------ */
  --serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* -- Radius ---------------------------------------------------------- */
  --r-pill: 999px;
  --r-xs:   12px;
  --r-sm:   14px;
  --r-md:   18px;
  --r-lg:   20px;
  --r-xl:   24px;
  --r-2xl:  26px;
  --r-3xl:  30px;
  --r-card: clamp(22px, 2.4vw, 30px);
  --r-slab: clamp(22px, 2.4vw, 32px);

  /* -- Shadow ---------------------------------------------------------- */
  --sh-card:     0 16px 40px -32px rgba(16, 45, 27, .4);
  --sh-card-sm:  0 12px 30px -26px rgba(16, 45, 27, .34);
  --sh-lift:     0 28px 50px -34px rgba(16, 45, 27, .45);
  --sh-lift-lg:  0 34px 58px -32px rgba(16, 45, 27, .45);
  --sh-tile:     0 30px 54px -30px rgba(16, 45, 27, .42);
  --sh-hero:     0 30px 70px -46px rgba(16, 45, 27, .4);
  --sh-panel:    0 30px 66px -38px rgba(7, 23, 13, .8);
  --sh-dark:     0 22px 46px -30px rgba(7, 23, 13, .6);
  --sh-menu:     0 44px 80px -44px rgba(16, 45, 27, .45);
  --sh-drawer:   -30px 0 70px -34px rgba(7, 23, 13, .55);
  --sh-modal:    0 60px 110px -50px rgba(0, 0, 0, .7);
  --sh-btn:      0 16px 32px -18px rgba(16, 45, 27, .7);
  --sh-round:    0 12px 26px -16px rgba(16, 45, 27, .5);
  --sh-quiet:    0 10px 26px -22px rgba(16, 45, 27, .4);
  --sh-gold:     0 0 0 1px rgba(184, 138, 50, .34), 0 8px 20px -12px rgba(201, 162, 74, .95);

  /* Gold does not glow on a dark ground the way it does on cream; the design
     uses a text-shadow for the label glow rather than a filter, so it stays
     crisp when the label is small. */
  --glow-label: 0 0 18px rgba(216, 185, 106, .65);
  --glow-dark:  0 0 22px rgba(216, 185, 106, .8);

  /* -- Rhythm ---------------------------------------------------------- */
  /* Contained by default; full width is a property of individual SECTIONS,
     not of the site.

     The shell caps and centres, as the design drew it. The bands that are
     meant to run edge to edge — the hero, the trust row, the lab panel,
     the footer — opt in with .bleed or their own padding, and that padding is
     calculated so their content still lines up with everything inside the
     shell. Below 1408px the shell is the viewport anyway, so phones and
     tablets are edge to edge without a separate rule. */
  --shell:      1408px;
  --gutter:     clamp(14px, 2.6vw, 32px);
  --stack:      clamp(14px, 1.8vw, 22px);
  --bleed:      max(clamp(20px, 3vw, 48px), calc(50vw - 704px));
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
  /* `clip`, not `hidden`. Both stop a stray element widening the page, but
     `hidden` makes the body a scroll container, and a sticky header inside a
     scroll container sticks to that container rather than the viewport - so
     it scrolls away instead of staying put. The header has been non-sticky
     for exactly that reason, which only became visible once it was asked to
     hide and return.

     `clip` does the same job without creating the scroll container. Engines
     without it (Safari before 16) simply get no guard, which the responsive
     sweep says costs nothing: 495 renders across nine widths with the guard
     disabled show no page-level overflow anywhere. */
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

a { color: var(--green-forest); text-decoration: none; }
a:hover { color: var(--gold-mid); }

img, svg, video { max-width: 100%; }
img { border-style: none; }

button, input, select, textarea { font: inherit; font-family: var(--sans); color: inherit; }
button { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--ink-placeholder); opacity: 1; }

::selection { background: rgba(201, 162, 74, .3); }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-mid);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Skip link — first in tab order on every page. */
.skip {
  position: absolute; left: 12px; top: -100px; z-index: 300;
  background: var(--green); color: var(--cream);
  padding: 14px 22px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  transition: top .2s ease;
}
.skip:focus { top: 12px; color: var(--cream); }

/* -- Motion ------------------------------------------------------------ */

@keyframes cl47Up    { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cl47In    { from { opacity: 0; } to { opacity: 1; } }
@keyframes cl47Panel { from { transform: translateX(103%); } to { transform: translateX(0); } }
@keyframes cl47Pop   { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes cl47Drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes cl47Spin  { to { transform: rotate(360deg); } }

/* Sections below the fold rise into place once. Set by js/shell.js; the
   no-JS fallback is simply that they are already visible. */
[data-reveal].is-hidden { opacity: 0; transform: translateY(24px); }
[data-reveal].is-shown  { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal].is-hidden { opacity: 1; transform: none; }
}

/* Film grain — fixed, non-interactive, soft-light over everything. */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .045; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22240%22 height=%22240%22 filter=%22url(%23n)%22 opacity=%220.7%22/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.page { background: var(--cream); padding-bottom: clamp(16px, 2vw, 26px); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}

/* A full-bleed band whose content still lines up with the shell. */
.bleed { padding-left: var(--bleed); padding-right: var(--bleed); }

/* Breaks a section out of the capped shell to the full viewport, then puts the
   gutter back on the inside so its content stays aligned with everything above
   it. 100vw includes the scrollbar, so the margin is derived from the parent's
   own width rather than from the viewport - otherwise the page gains a
   horizontal scrollbar of exactly the scrollbar's width. */
.fullbleed {
  width: auto;
  margin-left: calc(50% - 50vw + (var(--sbw, 0px) / 2));
  margin-right: calc(50% - 50vw + (var(--sbw, 0px) / 2));
  padding-left: var(--bleed);
  padding-right: var(--bleed);
  border-radius: 0 !important;
}
/* Tiles are a grid, so the padding has to sit on a wrapper rather than fight
   the grid's own track sizing. */
.fullbleed-wrap { margin-left: calc(50% - 50vw + (var(--sbw, 0px) / 2));
                  margin-right: calc(50% - 50vw + (var(--sbw, 0px) / 2));
                  padding: clamp(22px, 2.6vw, 40px) var(--bleed);
                  background: var(--surface-tint); }
/* Same break-out, no band colour — for a section that carries its own. */
.fullbleed-plain { background: none; padding-top: 0; padding-bottom: 0; }

.stack   { display: flex; flex-direction: column; gap: var(--stack); }
.row     { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-end { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }

/* ==========================================================================
   4. TYPE
   ========================================================================== */

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .24em;
  color: var(--gold-label); text-shadow: var(--glow-label);
}
.eyebrow-sm { font-size: 11.5px; }
.eyebrow-on-dark { color: var(--gold-light); text-shadow: 0 0 24px rgba(216, 185, 106, .85); }

.rule-eyebrow { display: flex; align-items: center; gap: 12px; }
.rule-eyebrow::before {
  content: ""; width: 36px; height: 2px; flex: none;
  background: linear-gradient(90deg, var(--gold-wash), var(--gold-deep));
  box-shadow: 0 0 14px rgba(216, 185, 106, .95);
}

.display {
  font-family: var(--serif); font-weight: 600;
  line-height: 1.03; letter-spacing: -.012em; color: var(--ink);
}
.d1 { font-size: clamp(52px, 5.6vw, 88px); line-height: 1; }
.d2 { font-size: clamp(36px, 3.8vw, 58px); }
.d3 { font-size: clamp(34px, 3.4vw, 54px); line-height: 1.05; }
.d4 { font-size: clamp(32px, 3.2vw, 50px); line-height: 1.06; }
.d5 { font-size: clamp(29px, 3.2vw, 39px); line-height: 1.1; }

/* The design italicises the second half of nearly every headline in forest
   green (or gold on a dark ground) at one weight lighter. */
.display em, .em {
  font-style: italic; font-weight: 500; color: var(--green-forest);
}
.on-dark .display, .on-dark .d1, .on-dark .d2, .on-dark .d3, .on-dark .d4 { color: var(--cream); }
.on-dark .display em, .on-dark .em { color: var(--gold-light); text-shadow: 0 0 30px rgba(216, 185, 106, .7); }

.lede  { font-size: 18.5px; line-height: 1.7;  color: var(--ink-body); max-width: 46ch; }
.lede-lg { font-size: 17.5px; line-height: 1.74; color: var(--ink-body); max-width: 54ch; }
.body  { font-size: 16.5px; line-height: 1.68; color: var(--ink-body); }
.copy  { font-size: 15.5px; line-height: 1.76; color: var(--ink-body); }
.meta  { font-size: 12.5px; color: var(--ink-body); }
.muted { color: var(--ink-muted); }

.on-dark .lede, .on-dark .lede-lg, .on-dark .body, .on-dark .copy { color: rgba(247, 244, 236, .78); }

/* ==========================================================================
   5. BUTTONS AND PILLS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: none; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700; letter-spacing: .18em;
  padding: 19px 34px; text-align: center;
  transition: background .24s ease, color .24s ease, transform .22s ease, box-shadow .22s ease;
}

.btn-primary { background: var(--green); color: var(--cream); box-shadow: var(--sh-btn); }
.btn-primary:hover { background: var(--green-forest); color: var(--cream); transform: translateY(-2px); box-shadow: 0 22px 40px -18px rgba(16, 45, 27, .75); }
.btn-primary svg { stroke: var(--gold-champagne); }

.btn-glass { background: rgba(252, 250, 245, .7); color: var(--ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-glass:hover { background: var(--surface); color: var(--ink); transform: translateY(-2px); }

.btn-quiet { background: var(--surface-field); color: var(--ink); font-size: 12px; letter-spacing: .16em; padding: 13px 22px; }
.btn-quiet:hover { background: var(--surface-hover); color: var(--ink); transform: translateY(-2px); }

.btn-light { background: rgba(247, 244, 236, .94); color: var(--green); font-size: 12px; letter-spacing: .18em; padding: 17px 28px; }
.btn-light:hover { background: var(--surface); color: var(--green); transform: translateY(-2px); }

.btn-gold {
  background: linear-gradient(140deg, var(--gold-wash), var(--gold-champagne) 42%, var(--gold-deep));
  color: var(--green-panel); font-size: 12px; letter-spacing: .16em; padding: 15px 24px;
  box-shadow: 0 14px 30px -12px rgba(201, 162, 74, .85), inset 0 1px 0 rgba(255, 250, 232, .85);
}
.btn-gold:hover { color: var(--green-panel); transform: translateY(-2px); }

.btn-ghost-gold {
  background: linear-gradient(140deg, rgba(242, 225, 174, .24), rgba(184, 138, 50, .14));
  color: var(--gold-light); font-size: 12.5px; letter-spacing: .18em; padding: 18px 32px;
  box-shadow: inset 0 0 0 1px rgba(216, 185, 106, .4), 0 0 30px -10px rgba(216, 185, 106, .7);
  text-shadow: 0 0 18px rgba(216, 185, 106, .7);
}
.btn-ghost-gold:hover { background: rgba(216, 185, 106, .24); color: var(--gold-champagne); transform: translateY(-2px); }

.btn-block { width: 100%; }
.btn-lg    { padding: 18px; font-size: 12.5px; letter-spacing: .2em; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* A quiet inline "SHOP NOW →" that is not a filled button. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; color: var(--ink);
}
.link-arrow:hover { color: var(--gold-mid); }

/* Round icon buttons — carousel arrows, close, quantity. */
.iconbtn {
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--surface-tint); color: var(--ink);
  display: grid; place-items: center; flex: none;
  transition: background .22s ease, color .22s ease, transform .2s ease;
}
.iconbtn:hover { background: var(--green); color: var(--gold-light); transform: translateY(-2px); }
.iconbtn-sm    { width: 44px; height: 44px; background: var(--surface); box-shadow: var(--sh-quiet); }
.iconbtn-glass { background: rgba(252, 250, 245, .86); box-shadow: var(--sh-round); }
.iconbtn-xs    { width: 38px; height: 38px; background: var(--surface-field); }
.iconbtn-xs:hover { background: var(--green); color: var(--gold-champagne); transform: none; }
.iconbtn-qty   { width: 28px; height: 28px; background: var(--surface-hover); }
.iconbtn-qty:hover { background: var(--surface-rule); color: var(--ink); transform: none; }

/* Header icon buttons sit on the glass bar and only tint on hover. */
.headbtn {
  width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent;
  display: grid; place-items: center; color: var(--ink); flex: none;
  transition: background .22s ease, color .22s ease;
}
.headbtn:hover { background: var(--surface-hover); color: var(--gold-mid); }

/* -- Pills ------------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  color: var(--ink-quiet); background: rgba(252, 250, 245, .88);
  border-radius: var(--r-pill); padding: 10px 17px;
  box-shadow: 0 6px 16px -12px rgba(16, 45, 27, .5);
}

.pill-batch {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: var(--gold-sale);
  background: linear-gradient(140deg, rgba(242, 225, 174, .55), rgba(184, 138, 50, .2));
  box-shadow: var(--sh-gold); border-radius: var(--r-pill); padding: 6px 10px;
}

/* The card's data pill. The design draws a star here; where a product has no
   verified rating we keep the pill and put its label data in it instead —
   same shape, same position, nothing invented. See README §4. */
.pill-data {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-field); border-radius: var(--r-pill); padding: 5px 10px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-nav); white-space: nowrap;
}
.pill-data svg { filter: drop-shadow(0 0 6px rgba(216, 185, 106, .9)); flex: none; }
.pill-data .n { font-size: 13px; font-weight: 600; color: var(--ink-nav); }
.pill-data .c { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }

.badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--surface-tint); color: var(--ink-nav);
}
.badge-seller  { background: var(--green); color: var(--cream); }
.badge-new     { background: linear-gradient(140deg, var(--gold-wash), var(--gold-champagne) 45%, var(--gold-deep)); color: var(--green-panel); }
.badge-limited { background: rgba(252, 250, 245, .94); color: var(--gold-sale); }
.badge-staff   { background: var(--surface-deep); color: var(--ink-nav); }
.badge-reserve { background: var(--green-panel); color: var(--gold-light); }

/* ==========================================================================
   6. HEADER, NAV, MEGA MENU
   ========================================================================== */

/* Edge to edge and always moving, on every device.

   The track holds the message set twice and translates by exactly -50%, so the
   second copy is under the cursor at the moment the first leaves — a marquee
   that loops without a visible jump. Duration scales with viewport width so
   the type crosses at the same apparent speed on a phone and on a monitor.

   It pauses on hover, and stops entirely under prefers-reduced-motion, where
   the strip becomes a static, horizontally scrollable row instead. */
.announce {
  position: relative;
  width: 100%;
  background: var(--green-black);
  overflow: hidden;
  padding: 11px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.announce-track {
  display: flex; align-items: center; gap: 16px;
  white-space: nowrap; width: max-content;
  animation: cl47Marquee var(--marquee, 34s) linear infinite;
}
.announce:hover .announce-track,
.announce:focus-within .announce-track { animation-play-state: paused; }

.announce span {
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
  color: rgba(247, 244, 236, .9);
}
.announce .dot {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--gold-pale); box-shadow: 0 0 12px rgba(216, 185, 106, 1);
}

/* The duplicated half is one element so it can be hidden or dropped wholesale,
   but it must not become a single flex item — its spans need the track's own
   gap, so it lays out as if the wrapper were not there. */
.announce-track > [data-dup] { display: contents; }

@keyframes cl47Marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .announce { -webkit-mask-image: none; mask-image: none; overflow-x: auto; scrollbar-width: none; }
  .announce::-webkit-scrollbar { display: none; }
  .announce-track { animation: none; padding: 0 var(--gutter); }
  /* The duplicated half is redundant once nothing moves, and a screen reader
     would otherwise read every message twice. */
  .announce-track > [data-dup] { display: none; }
}

/* The wrapper carries the stickiness, not the bar. A sticky element is only
   sticky inside its parent's box, and the bar's parent is exactly as tall as
   the bar - so it came unstuck after about 145px and rode the page down. The
   wrapper is a direct child of .page, whose box is the whole document. */
.shell-header {
  position: sticky; top: 10px; z-index: 90;
  transition: transform .34s var(--ease);
  will-change: transform;
}
.shell-header.is-away { transform: translateY(calc(-100% - 18px)); }
@media (min-width: 1024px) { .shell-header { top: 0; } }
@media (prefers-reduced-motion: reduce) { .shell-header { transition: none; } }
@media print { .shell-header { position: static; transform: none; } }

.header {
  background: rgba(252, 250, 245, .86);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 22px;
  box-shadow: 0 10px 30px -26px rgba(16, 45, 27, .4);
  transition: box-shadow .4s ease;
}
.header.is-stuck { box-shadow: 0 22px 44px -34px rgba(16, 45, 27, .5); }

/* The header runs the full width of the viewport on a desktop, with its own
   gutter, while the page content below stays inside the capped shell. It is
   chrome, not content — a navigation bar that stops short of the screen edge
   on a wide monitor reads as a mistake. Below 1024px it is already full width
   because the shell is. */
@media (min-width: 1024px) {
  .header {
    margin-left: calc(50% - 50vw + (var(--sbw, 0px) / 2));
    margin-right: calc(50% - 50vw + (var(--sbw, 0px) / 2));
    border-radius: 0;
    top: 0;
  }
  .header-in { padding-left: var(--bleed); padding-right: var(--bleed); }
}

.header-in {
  padding: 12px clamp(14px, 1.6vw, 22px);
  display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
/* The gold halo, breathing on a 5.5s cycle — the same effect at both ends of
   the page, but NOT the same values.

   The footer lockup sits on near-black green, where champagne #D8B96A at 42%
   reads as a warm bloom. The header sits on rgba(252,250,245,.86) — near-white
   — and that identical filter is simply invisible there: a pale glow on a pale
   ground has nowhere to go. Copying the footer's declaration verbatim applied
   the effect and showed nothing, which is worse than not applying it.

   So the header uses a deeper bronze (#B0801F, the palette's --gold-deep) at
   much higher opacity and a tighter radius. On cream that reads as a halo with
   an edge rather than a haze, and it pulses over the same interval so the two
   marks feel like one behaviour. */
.brand img {
  height: clamp(54px, 4.4vw, 66px); width: auto; display: block;
  filter: drop-shadow(0 3px 7px rgba(11, 33, 19, .30))
          drop-shadow(0 0 13px rgba(176, 128, 31, .58));
  animation: cl47GoldLight 5.5s ease-in-out infinite;
  will-change: filter;
}
@keyframes cl47GoldLight {
  0%, 100% { filter: drop-shadow(0 3px 7px rgba(11, 33, 19, .30))
                     drop-shadow(0 0 13px rgba(176, 128, 31, .58)); }
  50%      { filter: drop-shadow(0 3px 7px rgba(11, 33, 19, .30))
                     drop-shadow(0 0 22px rgba(201, 162, 74, .95))
                     drop-shadow(0 0 34px rgba(216, 185, 106, .45)); }
}

/* On the dark ground the pale champagne is the one that reads. */
@keyframes cl47Gold {
  0%, 100% { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45)) drop-shadow(0 0 26px rgba(216, 185, 106, .42)); }
  50%      { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45)) drop-shadow(0 0 40px rgba(216, 185, 106, .78)); }
}
.footer-brand img { animation: cl47Gold 5.5s ease-in-out infinite; will-change: filter; }

/* The age gate's lockup also sits on cream. */
.agegate img { animation: cl47GoldLight 5.5s ease-in-out infinite; }

.nav {
  order: 2; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
}
.nav a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  color: var(--ink-nav); padding: 9px 11px; border-radius: var(--r-pill);
  transition: background .22s ease, color .22s ease;
}
.nav a:hover, .nav a:focus-visible { background: var(--surface-hover); color: var(--ink); }
.nav a.is-current { background: var(--surface-hover); color: var(--ink); }
.nav .nav-strong { font-weight: 700; color: var(--ink); padding: 9px 12px; }
.nav .nav-sale {
  font-weight: 700; color: var(--gold-sale); padding: 10px 14px; gap: 7px;
  background: linear-gradient(140deg, rgba(242, 225, 174, .6), rgba(184, 138, 50, .22));
  box-shadow: var(--sh-gold);
}
.nav .nav-sale:hover { background: rgba(184, 138, 50, .22); color: #8A6420; }

/* EXOTIC is a shelf, not an offer. It sits directly beside the gold SALE chip,
   and two filled chips side by side read as two competing promotions, so this
   one is outlined in botanical green instead of filled: present enough to be
   found, quiet enough to leave SALE the loudest thing in the nav. */
.nav .nav-shelf {
  font-weight: 700; color: var(--green); padding: 9px 13px;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 27, .22);
}
.nav .nav-shelf:hover, .nav .nav-shelf:focus-visible {
  background: rgba(16, 45, 27, .07); color: var(--green-black);
  box-shadow: inset 0 0 0 1px rgba(16, 45, 27, .38);
}
.nav .nav-shelf.is-current { background: rgba(16, 45, 27, .09); color: var(--green-black); }
.nav-has-menu { display: inline-flex; }

.header-tools { order: 3; margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

.search {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-field); border-radius: var(--r-pill);
  padding: 11px 16px; max-width: 210px;
  transition: box-shadow .25s ease, background .25s ease;
}
.search:focus-within { background: var(--surface); box-shadow: 0 0 0 2px rgba(184, 138, 50, .4); }
.search svg { flex: none; }
.search input {
  border: none; background: transparent; outline: none;
  font-size: 14px; font-weight: 400; color: var(--ink); width: 100%; min-width: 0;
}

.bagbtn {
  position: relative; height: 44px; padding: 0 18px 0 16px;
  border-radius: var(--r-pill); background: var(--green); border: none;
  display: inline-flex; align-items: center; gap: 10px; color: var(--cream);
  transition: transform .2s ease, background .22s ease;
}
.bagbtn:hover { background: var(--green-forest); transform: translateY(-1px); }
.bagbtn .label { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; }
.bagbtn .count {
  min-width: 19px; height: 19px; border-radius: var(--r-pill);
  background: var(--gold-champagne); color: var(--green-black);
  font-size: 10px; font-weight: 600; display: grid; place-items: center; padding: 0 5px;
}
.bagbtn .count[hidden] { display: none; }

/* -- Location control ---------------------------------------------------
   Present on every device. On a phone it collapses to the state abbreviation,
   because the row has a logo, a menu button and a bag to fit as well. */
.locbtn {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  height: 44px; padding: 0 15px; border: none; border-radius: var(--r-pill);
  background: var(--surface-field); color: var(--ink); text-align: left;
  transition: background .22s ease, transform .2s ease;
}
.locbtn:hover { background: var(--surface-hover); transform: translateY(-1px); }
.locbtn svg { flex: none; }
.locbtn .lines { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.locbtn .k { font-size: 8.5px; font-weight: 700; letter-spacing: .16em; color: var(--gold-label); }
.locbtn .v { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.locbtn .ab { display: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
@media (max-width: 1180px) {
  .locbtn { padding: 0 12px; gap: 7px; }
  .locbtn .lines { display: none; }
  .locbtn .ab { display: block; }
}

.locsheet {
  position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 20px;
}
.locsheet[hidden] { display: none; }
.locsheet .scrim {
  position: absolute; inset: 0; background: rgba(7, 23, 13, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: cl47In .25s ease both; border: none;
}
.locsheet .box {
  position: relative; width: min(680px, 96vw); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--surface); border-radius: var(--r-3xl); padding: clamp(24px, 3.4vw, 40px);
  box-shadow: var(--sh-modal); animation: cl47Pop .35s var(--ease) both;
}
.locsheet h2 { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); font-weight: 600; color: var(--ink); margin-top: 10px; }
.locsheet .states { margin-top: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.locopt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--surface-field); border: none; border-radius: var(--r-lg);
  padding: 14px 16px; text-align: left;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.locopt:hover { background: var(--surface-hover); transform: translateY(-2px); }
.locopt[aria-pressed="true"] { background: var(--green); box-shadow: 0 0 0 2px var(--gold-mid); }
.locopt[aria-pressed="true"] .s, .locopt[aria-pressed="true"] .c { color: var(--cream); }
.locopt[aria-pressed="true"] .badge-ab { background: var(--gold-champagne); color: var(--green); }
.locopt .badge-ab {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--surface); display: grid; place-items: center;
  font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--gold-ink);
}
.locopt .s { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.locopt .c { display: block; font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }

/* -- Bottom navigation (phones) ----------------------------------------
   A thumb-reachable bar. The header is at the top of a tall page and the bag
   is the control people reach for most, so it is repeated where the hand is. */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; align-items: stretch;
  background: rgba(252, 250, 245, .94);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 -12px 34px -22px rgba(16, 45, 27, .55);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottomnav a, .bottomnav button {
  flex: 1; border: none; background: none; padding: 10px 4px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--ink-nav);
  position: relative; min-height: 56px; justify-content: center;
}
.bottomnav a.is-current { color: var(--green); }
.bottomnav a.is-current svg { stroke: var(--green); }
.bottomnav .count {
  position: absolute; top: 6px; right: 50%; transform: translateX(18px);
  min-width: 17px; height: 17px; border-radius: var(--r-pill);
  background: var(--green); color: var(--gold-light);
  font-size: 9.5px; font-weight: 700; display: grid; place-items: center; padding: 0 4px;
}
.bottomnav .count[hidden] { display: none; }

@media (max-width: 860px) {
  .bottomnav { display: flex; }
  /* Clear the bar, plus the home indicator on a notched phone. All three read
     the same token, so the bar cannot grow without the rest following. */
  body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
  .drawer { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
}

/* -- Mega menu --------------------------------------------------------- */

.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-menu);
  padding: 36px clamp(22px, 3vw, 40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(24px, 3vw, 44px);
  animation: cl47Pop .3s var(--ease) both;
}
.mega[hidden] { display: none; }
.mega .col-head { font-size: 11.5px; font-weight: 700; letter-spacing: .24em; color: var(--gold-label); text-shadow: var(--glow-label); }
.mega .col-list { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.mega .col-list a { font-size: 15.5px; font-weight: 400; color: var(--ink-nav); }
.mega .col-list a:hover { color: var(--gold-mid); }

/* The shop menu carries five link columns plus the card. auto-fit fits only
   five tracks at this width, which dropped the card onto a second row and left
   the panel half empty, so the shop panel states its own six-track layout and
   gives the card the wider last track. The other two menus keep auto-fit —
   four items still fit. Scoped to the width where the desktop nav exists at
   all; below 1180px the mega menus are replaced by the mobile drawer. */
@media (min-width: 1181px) {
  #mega-shop {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 1.45fr;
    gap: clamp(18px, 2.2vw, 34px);
  }
}
.mega-card {
  display: block; background: var(--surface-field); border-radius: var(--r-lg); padding: 16px;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.mega-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -26px rgba(16, 45, 27, .4); }
.mega-card .thumb { display: block; border-radius: var(--r-sm); overflow: hidden; }
.mega-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.mega-card .k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .24em; color: var(--gold-label); text-shadow: var(--glow-label); margin-top: 15px; }
.mega-card .t { display: block; font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); margin-top: 6px; line-height: 1.22; }

/* -- Mobile nav -------------------------------------------------------- */

.navtoggle { display: none; }

@media (max-width: 1180px) {
  .nav { display: none; }
  .navtoggle { display: grid; }
  .header-tools { order: 2; }
  .search { max-width: 168px; }
}
@media (max-width: 720px) {
  .header-in { gap: 10px; }
  .header .search { display: none; }
  .brand img { height: 46px; }
  .bagbtn { padding: 0 14px 0 12px; }
  .bagbtn .label { display: none; }
}

.mobilenav {
  position: fixed; inset: 0; z-index: 150;
  background: var(--cream); overflow-y: auto;
  padding: 22px var(--gutter) 60px;
  animation: cl47In .22s ease both;
}
.mobilenav[hidden] { display: none; }
.mobilenav .top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.mobilenav .group { margin-top: 30px; }
.mobilenav .group h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .24em; color: var(--gold-label); text-shadow: var(--glow-label); }
.mobilenav .group div { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.mobilenav .group a { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); padding: 6px 0; }

/* ==========================================================================
   7. CARDS
   ========================================================================== */

/* -- Product card ------------------------------------------------------ */

.pcard {
  min-width: 0; background: var(--surface); border-radius: var(--r-2xl);
  padding: 14px 14px 20px; box-shadow: var(--sh-card-sm);
  display: flex; flex-direction: column;
  transition: transform .34s var(--ease), box-shadow .34s ease;
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lift-lg); }
.pcard-tint { background: var(--cream); border-radius: var(--r-xl); padding: 12px 12px 16px; box-shadow: none; }
.pcard-tint:hover { transform: translateY(-5px); box-shadow: var(--sh-lift); }

.pcard .shot {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-tint); aspect-ratio: 1;
}
.pcard-tint .shot { border-radius: var(--r-md); }
.pcard .shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.pcard:hover .shot img { transform: scale(1.07); }
.pcard-tint:hover .shot img { transform: scale(1.06); }

/* Packshots that were cut out sit on the tint with air around them rather
   than being cropped to fill — a cut-out scaled to cover loses its edges. */
.pcard .shot img.is-cutout { object-fit: contain; padding: 8%; }

.wish {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(252, 250, 245, .9);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; color: var(--ink);
  transition: transform .2s ease, color .2s ease;
}
.wish:hover { transform: scale(1.08); }
.wish[aria-pressed="true"] { color: var(--gold-mid); }
.wish[aria-pressed="true"] svg { fill: currentColor; }

.pcard .body { padding: 16px 6px 0; display: flex; flex-direction: column; flex: 1; }
.pcard-tint .body { padding: 14px 6px 0; }
.pcard h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.12; color: var(--ink); }
.pcard-tint h3 { font-size: 21px; }
.pcard h3 a { color: inherit; }
.pcard h3 a:hover { color: var(--green-forest); }
.pcard .sub { font-size: 12.5px; font-weight: 400; color: var(--ink-body); margin-top: 5px; }
.pcard-tint .sub { font-size: 12px; }
.pcard .price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pcard-tint .price-row { margin-top: 11px; }
.pcard .price { font-size: 19px; font-weight: 600; color: var(--ink); }
.pcard-tint .price { font-size: 18px; }
/* "From" on a variable-priced card: present but subordinate to the figure,
   because the number is what a shopper scans for and the qualifier is what
   stops the number being a lie. */
/* -- Bag size selector on the product page ------------------------------
   A product sold in four sizes has four prices, so the option carries its own
   figure. Showing the price on the button is the whole point: the choice is
   between amounts of money, not between labels. */
.pdp-sizes { margin-top: 26px; }
.pdp-sizes .l { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ink); margin-bottom: 10px; }
.pdp-size-set { display: flex; flex-wrap: wrap; gap: 9px; }
.size-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 15px; cursor: pointer; text-align: left;
  background: var(--surface-field); border: 1px solid rgba(23, 25, 20, .12);
  border-radius: var(--r-md); transition: border-color .18s ease, background .18s ease;
}
.size-opt:hover { border-color: var(--gold-mid); }
.size-opt[aria-checked="true"] { background: var(--green); border-color: var(--green); }
.size-opt .s { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.size-opt .p { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.size-opt[aria-checked="true"] .s { color: rgba(247, 244, 236, .8); }
.size-opt[aria-checked="true"] .p { color: var(--cream); }
.size-opt:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.price-from { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); letter-spacing: .01em; }
.pcard .was { font-size: 13.5px; font-weight: 400; color: var(--ink-muted); text-decoration: line-through; margin-left: 7px; }
.pcard .lab-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pcard .coa { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--ink-body); }
.pcard .coa:hover { color: var(--gold-mid); }

/* Deep botanical green with champagne type, inverting to champagne with deep
   green type on hover. Both states are drawn from the palette, so the button
   reads as the brand at rest rather than only on interaction. */
.pcard .add {
  margin-top: 16px; width: 100%;
  background: var(--green); color: var(--gold-champagne); border: none;
  border-radius: var(--r-pill); padding: 14px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; white-space: nowrap;
  transition: background .24s ease, color .24s ease, transform .2s ease;
}
.pcard .add:hover,
.pcard .add:focus-visible {
  background: var(--gold-champagne); color: var(--green); transform: translateY(-2px);
}
.pcard-tint .add { margin-top: 13px; padding: 13px 10px; letter-spacing: .12em; }
.pcard-tint .add:hover { transform: none; }
.pcard .add.is-done { background: var(--gold-champagne); color: var(--green); }
.pcard .add:disabled { background: var(--surface-tint); color: var(--ink-muted); }

/* -- Category circles -------------------------------------------------- */

.cats { margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 18px; row-gap: 28px; }
.cat { text-align: center; display: block; }
.cat .ring {
  display: block; width: 100%; max-width: 112px; aspect-ratio: 1;
  border-radius: 50%; background: var(--surface-tint); padding: 6px; margin: 0 auto;
  transition: transform .32s var(--ease), box-shadow .32s ease;
}
.cat:hover .ring { transform: translateY(-6px) scale(1.03); box-shadow: 0 22px 34px -20px rgba(16, 45, 27, .45); }
.cat .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.cat .ring.is-all { background: var(--green); display: grid; place-items: center; padding: 0; }
.cat .name { display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--ink); margin-top: 15px; }
.cat .n { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-muted); margin-top: 4px; }

/* -- Carousel rails ---------------------------------------------------- */

.rail-clip { margin-top: 26px; overflow: hidden; }
/* Two products per row on a phone, in the rails as well as the shop grid. A
   single 300px card on a 390px screen wastes half the viewport. */
@media (max-width: 560px) {
  .rail-track > * { flex: 0 0 calc((100% - 10px) / 2); }
  .grid-rail { grid-auto-columns: calc((100% - 10px) / 2); gap: 10px; }
  .rail-track { gap: 10px; }
  .rail-clip .pcard { padding: 8px 8px 14px; border-radius: var(--r-lg); }
  .rail-clip .pcard h3 { font-size: 17px; }
  .rail-clip .pcard .sub { font-size: 11.5px; }
  .rail-clip .pcard .price { font-size: 16px; }
  .rail-clip .pcard .add { padding: 11px 6px; font-size: 10px; letter-spacing: .1em; }
  .rail-clip .pill-data { padding: 4px 8px; font-size: 11px; }
  .rail-clip .pill-data .n { font-size: 11px; }
  .rail-clip .pill-batch { font-size: 8.5px; padding: 5px 8px; }
  .rail-clip .coa { font-size: 9.5px; }
}
.rail-track { display: flex; gap: 14px; transition: transform .7s var(--ease); }
.rail-track > * { flex: 0 0 var(--card-w, 300px); }
.grid-rail {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(0, auto));
  grid-auto-columns: var(--card-w, 220px);
  gap: 14px; transition: transform .7s var(--ease);
}

.dots { margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.dot {
  width: 8px; height: 8px; border-radius: var(--r-pill); border: none; padding: 0;
  background: var(--surface-rule); transition: width .3s ease, background .3s ease;
}
.dot.is-on { width: 30px; background: var(--green); }
.dots-lg { gap: 12px; }
.dots-lg .set { display: flex; align-items: center; gap: 8px; }

/* Hero pagination is 6px and sits inline with the arrows. */
.hero-dots { display: flex; align-items: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-dots .sep { width: 1px; height: 22px; background: rgba(23, 25, 20, .14); }
.hero-dots .dot { height: 6px; }

/* ==========================================================================
   8. SECTIONS
   ========================================================================== */

.section {
  background: var(--surface); border-radius: var(--r-card);
  padding: clamp(26px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
  box-shadow: var(--sh-card);
}
.section-tint { background: var(--surface-tint); border-radius: var(--r-card); padding: clamp(30px, 3.6vw, 54px) clamp(22px, 2.8vw, 44px); box-shadow: none; }
.section-plain { padding-top: clamp(18px, 2vw, 28px); }
.section-cats { background: var(--surface); border-radius: var(--r-2xl); padding: clamp(26px, 3vw, 38px) clamp(18px, 2.4vw, 32px); box-shadow: 0 16px 40px -30px rgba(16, 45, 27, .34); }

/* -- Hero -------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden; margin: clamp(14px, 1.8vw, 22px) 0;
  background: linear-gradient(118deg, var(--hero-a) 0%, var(--hero-b) 46%, var(--hero-c) 100%);
  box-shadow: var(--sh-hero);
}
.hero-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: stretch; min-height: clamp(520px, 46vw, 720px);
}
.hero-copy {
  padding: clamp(34px, 4.4vw, 64px) clamp(24px, 3vw, 56px) clamp(34px, 4.4vw, 64px) var(--bleed);
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.hero-copy.is-fading { opacity: 0; transform: translateY(12px); }
.hero-copy h1 { margin-top: 20px; }
.hero-copy .lede { margin-top: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.hero-art { position: relative; min-height: 320px; }
.hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .45s ease; }
.hero-art img.is-fading { opacity: 0; }
.hero-art .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 244, 236, .55), rgba(247, 244, 236, 0) 26%); }

/* The hero frame sits inside the band instead of bleeding off it, so all four
   rounded corners are visible rather than only the two facing the copy.

   The inset is stated on each layer rather than as padding on .hero-art,
   because an absolutely positioned child resolves `inset` against its
   containing block's *padding edge* — padding on the parent would not move the
   image at all. One variable drives the photograph, its scrim and the chip, so
   the three can never drift apart. */
.hero-art { --hero-inset: clamp(14px, 1.6vw, 24px); }
.hero-art img,
.hero-art .scrim {
  inset: var(--hero-inset);
  /* Sized explicitly rather than left to the four offsets. An <img> is a
     replaced element: with `width: auto` it takes its intrinsic size and
     ignores the right and bottom offsets entirely, which anchors it top-left
     and runs it off the frame. The base rule's 100% would likewise overflow by
     exactly the inset, so both axes subtract it twice — once per edge. */
  width: calc(100% - var(--hero-inset) * 2);
  height: calc(100% - var(--hero-inset) * 2);
  border-radius: var(--r-card);
}
/* The chip is positioned against the same padding edge, so it needs the inset
   added to its own offset or it would sit half off the photograph. */
.hero-chip {
  left: calc(var(--hero-inset, 0px) + clamp(14px, 2vw, 26px));
  bottom: calc(var(--hero-inset, 0px) + clamp(14px, 2vw, 26px));
}

.hero-chip {
  position: absolute; left: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px);
  background: rgba(252, 250, 245, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-lg); padding: 16px 20px; width: min(250px, 72%);
  box-shadow: 0 26px 50px -28px rgba(16, 45, 27, .5);
  animation: cl47Drift 8s ease-in-out infinite;
}
.hero-chip .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hero-chip .k { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; color: var(--gold-label); text-shadow: var(--glow-label); }
.hero-chip .t { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.hero-chip .seal {
  width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--surface-hover);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--gold-ink);
}
.hero-chip .m {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(23, 25, 20, .09);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; line-height: 1.8;
  color: var(--ink-nav); white-space: pre-line;
}

/* -- Trust band -------------------------------------------------------- */

.trust {
  background: radial-gradient(120% 140% at 8% 0%, rgba(216, 185, 106, .14), transparent 58%),
              linear-gradient(150deg, var(--green-forest), var(--green-black));
  margin-bottom: clamp(14px, 1.8vw, 22px);
  padding: 30px var(--bleed);
  box-shadow: var(--sh-dark);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px;
}
.trust .item { display: flex; align-items: center; gap: 14px; }
.trust .ico {
  width: 50px; height: 50px; flex: none; border-radius: 50%;
  background: rgba(216, 185, 106, .12);
  box-shadow: inset 0 0 0 1px rgba(216, 185, 106, .42), 0 0 24px -8px rgba(216, 185, 106, .75);
  display: grid; place-items: center;
}
.trust .k { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; color: var(--gold-light); text-shadow: var(--glow-dark); }
.trust .v { font-size: 14.5px; font-weight: 400; color: rgba(247, 244, 236, .82); margin-top: 5px; }

/* The light version of the same band, used low on the page. */
.trust-light { background: var(--surface); border-radius: var(--r-card); padding: clamp(26px, 3vw, 40px) clamp(22px, 2.8vw, 40px); box-shadow: var(--sh-card); }
.trust-light .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.trust-light .item { display: flex; align-items: flex-start; gap: 14px; }
.trust-light .ico {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, var(--gold-mist), var(--surface-tint));
  box-shadow: inset 0 0 0 1px rgba(184, 138, 50, .3), 0 0 20px -6px rgba(201, 162, 74, .65);
  display: grid; place-items: center;
}
.trust-light .k { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; color: var(--gold-light); text-shadow: var(--glow-dark); }
.trust-light .v { font-size: 14px; font-weight: 400; color: var(--ink-body); margin-top: 4px; line-height: 1.55; }

/* -- Promo tiles ------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.tile {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: var(--surface-tint); padding: 26px 24px 96px; display: block; min-height: 270px;
  transition: transform .32s var(--ease), box-shadow .32s ease;
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--sh-tile); }
.tile-light { background: var(--surface); box-shadow: var(--sh-card-sm); }
.tile .t { display: block; font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.08; color: var(--ink); }
.tile .s { display: block; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--ink-body); margin-top: 11px; max-width: 20ch; }
.tile .link-arrow { margin-top: 16px; position: relative; z-index: 2; }
.tile .art-round { position: absolute; right: -14px; bottom: -14px; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; }
.tile .art-cut   { position: absolute; right: -10px; bottom: -10px; width: 138px; height: 138px; object-fit: cover; border-radius: 22px 0 24px 0; }

.tile-dark {
  background: linear-gradient(150deg, var(--green-forest), var(--green-black));
  padding: 26px 24px; display: flex; flex-direction: column;
  box-shadow: 0 22px 46px -26px rgba(7, 23, 13, .7); color: var(--cream);
}
.tile-dark:hover { box-shadow: 0 34px 60px -28px rgba(7, 23, 13, .8); color: var(--cream); }
.tile-dark .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .24; }
.tile-dark > * { position: relative; }
.tile-dark .k { font-size: 11.5px; font-weight: 700; letter-spacing: .22em; color: var(--gold-light); text-shadow: 0 0 24px rgba(216, 185, 106, .85); }
.tile-dark .big { display: block; font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1; color: var(--cream); margin-top: 12px; }
.tile-dark .s { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(247, 244, 236, .72); margin-top: 8px; max-width: none; }
.tile-dark .code { letter-spacing: .16em; font-weight: 700; color: var(--gold-light); text-shadow: 0 0 20px rgba(216, 185, 106, .9); }
.tile-dark .btn-gold { margin-top: auto; align-self: flex-start; }

/* -- Featured bento ---------------------------------------------------- */

.bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.bento-hero {
  position: relative; overflow: hidden; border-radius: var(--r-2xl); min-height: 420px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(26px, 3vw, 40px); box-shadow: 0 24px 50px -32px rgba(16, 45, 27, .44);
}
.bento-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento-hero .scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 23, 13, .82), rgba(7, 23, 13, .25) 52%, rgba(7, 23, 13, .05)); }
.bento-hero .in { position: relative; }
.bento-col { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-rows: 1fr 1fr; }
.bento-row {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  background: var(--surface); border-radius: var(--r-2xl); padding: 26px; box-shadow: var(--sh-card-sm);
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.bento-row:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -30px rgba(16, 45, 27, .42); }
.bento-row-tint { background: var(--surface-tint); box-shadow: none; }
.bento-row .k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .22em; color: var(--gold-label); text-shadow: var(--glow-label); }
.bento-row .t { display: block; font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--ink); margin-top: 9px; }
.bento-row .s { display: block; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--ink-body); margin-top: 9px; max-width: 30ch; }
.bento-row .link-arrow { margin-top: 14px; }
.bento-row img { width: clamp(88px, 10vw, 124px); aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); background: var(--surface-tint); }

/* -- the quality standard --------------------------------------------- */

.lab {
  position: relative; overflow: hidden; border-radius: var(--r-slab);
  background: radial-gradient(120% 120% at 88% 8%, rgba(216, 185, 106, .16), transparent 56%),
              linear-gradient(150deg, var(--green-panel), var(--green-black));
  box-shadow: var(--sh-panel); margin-top: clamp(10px, 1.4vw, 18px);
}
.lab .ghost47 {
  position: absolute; right: -24px; top: -96px;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: min(420px, 44vw); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(216, 185, 106, .1);
  user-select: none; pointer-events: none;
}
.lab .in {
  position: relative; padding: clamp(36px, 5vw, 72px) clamp(24px, 3.6vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(40px, 5vw, 72px); align-items: center;
}
.lab-stats { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.lab-stat { background: rgba(247, 244, 236, .05); border-radius: var(--r-lg); padding: 20px; }
.lab-stat .n {
  font-family: var(--serif); font-size: 48px; font-weight: 600; line-height: 1;
  background: linear-gradient(140deg, var(--gold-cream), var(--gold-champagne) 45%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(216, 185, 106, .6));
}
.lab-stat .k { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: rgba(247, 244, 236, .76); line-height: 1.55; }

/* The COA card is deliberately off-square — it reads as a document laid down
   on the panel rather than a UI panel. */
.coa-card {
  background: var(--surface); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 50px 90px -46px rgba(0, 0, 0, .7); transform: rotate(-1.2deg);
  max-width: 520px; width: 100%; justify-self: center;
}
.coa-card .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.coa-card .k { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--ink-body); }
.coa-card .seal {
  width: 30px; height: 30px; border-radius: 50%; background: var(--surface-tint);
  display: grid; place-items: center; font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--gold-ink);
}
.coa-card .t { margin-top: 16px; font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--ink); }
.coa-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(23, 25, 20, .07); }
.coa-row:last-child { border-bottom: none; }
.coa-row .l { font-size: 12.5px; font-weight: 500; color: var(--ink-body); }
.coa-row .v { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.coa-pass { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--green-forest); }

/* -- Experience tabs --------------------------------------------------- */

.exp { background: var(--surface-tint); border-radius: var(--r-card); padding: clamp(28px, 3.4vw, 48px) clamp(20px, 2.8vw, 40px); }
.exp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.exp-tab {
  border: none; border-radius: var(--r-pill); background: transparent;
  padding: 13px 22px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--ink-nav);
  transition: background .24s ease, color .24s ease;
}
.exp-tab:hover { background: rgba(252, 250, 245, .7); }
.exp-tab[aria-selected="true"] { background: var(--green); color: var(--cream); }
.exp-panel {
  margin-top: 26px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 44px); align-items: center;
  transition: opacity .3s var(--ease);
}
.exp-panel.is-fading { opacity: 0; }
.exp-panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); display: block; }
.exp-terps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.exp-terp {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--ink-nav);
  background: var(--surface); border-radius: var(--r-pill); padding: 9px 15px;
}

/* -- How it works ------------------------------------------------------ */

.steps { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(22px, 2.6vw, 40px); }
.step .n {
  font-family: var(--serif); font-style: italic; font-size: 44px; font-weight: 500; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(184, 138, 50, .5);
}
.step h3 { font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--ink); margin-top: 14px; line-height: 1.16; }
.step p { font-size: 15px; line-height: 1.68; color: var(--ink-body); margin-top: 9px; }

/* -- Journal ----------------------------------------------------------- */

.journal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 1.6vw, 20px); margin-top: 30px; }
.jcard {
  display: block; background: var(--surface); border-radius: var(--r-2xl); overflow: hidden;
  box-shadow: var(--sh-card-sm); transition: transform .32s var(--ease), box-shadow .32s ease;
}
.jcard:hover { transform: translateY(-5px); box-shadow: var(--sh-tile); }
.jcard img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.jcard .in { padding: 24px; }
.jcard .k { font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--gold-label); text-shadow: var(--glow-label); }
.jcard h3 { font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.16; color: var(--ink); margin-top: 10px; }
.jcard p { font-size: 14.5px; line-height: 1.62; color: var(--ink-body); margin-top: 9px; }
.jcard .when { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; color: var(--ink-muted); margin-top: 16px; display: block; }

/* -- FAQ --------------------------------------------------------------- */

.faq { background: var(--surface-tint); border-radius: var(--r-card); padding: clamp(30px, 3.6vw, 56px) clamp(22px, 2.8vw, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 3vw, 52px); align-items: start; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid rgba(23, 25, 20, .1); }
.faq-q {
  width: 100%; background: none; border: none; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 22px 0; font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink);
  transition: color .2s ease;
}
.faq-q:hover { color: var(--green-forest); }
.faq-q .mark { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; transition: transform .3s var(--ease), background .24s ease; }
.faq-q[aria-expanded="true"] .mark { transform: rotate(45deg); background: var(--green); color: var(--gold-light); }
.faq-a { overflow: hidden; }
.faq-a[hidden] { display: none; }
.faq-a p { font-size: 15.5px; line-height: 1.74; color: var(--ink-body); padding: 0 0 24px; max-width: 62ch; }

/* -- Reviews ----------------------------------------------------------- */

/* A rail of cards, four at a time on a desktop and two on a phone, moving on
   its own. The single rotating quote showed one opinion and hid nine; four at
   a time reads as a body of opinion, and every card is in the served HTML so
   an answer engine can quote any of them. */
.reviews {
  background: var(--surface); border-radius: var(--r-card);
  padding: clamp(30px, 3.6vw, 56px) clamp(22px, 2.8vw, 44px);
  box-shadow: 0 16px 44px -34px rgba(16, 45, 27, .4);
}
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.reviews .stars { display: inline-flex; gap: 5px; }
.reviews .sample { font-size: 12px; color: var(--ink-muted); font-style: italic; max-width: 46ch; margin-top: 8px; }

.rcard {
  background: var(--cream); border-radius: var(--r-xl);
  padding: clamp(18px, 1.9vw, 24px);
  display: flex; flex-direction: column; gap: 13px; min-width: 0; height: 100%;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.rcard:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.rcard .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rcard .tag {
  font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--gold-sale);
  background: linear-gradient(140deg, rgba(242, 225, 174, .55), rgba(184, 138, 50, .2));
  box-shadow: var(--sh-gold); border-radius: var(--r-pill); padding: 5px 9px; white-space: nowrap;
}
.rcard blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 17.5px; line-height: 1.45; color: var(--ink); flex: 1;
}
.rcard .who { display: flex; align-items: center; gap: 11px; }
.rcard .av {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, var(--gold-mist), var(--surface-tint));
  box-shadow: inset 0 0 0 1px rgba(184, 138, 50, .32);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--gold-ink);
}
.rcard .nm { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rcard .wh { display: block; font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }

.reviews .rail-track > * { flex: 0 0 calc((100% - 3 * 14px) / 4); }
@media (max-width: 1200px) { .reviews .rail-track > * { flex: 0 0 calc((100% - 2 * 14px) / 3); } }
@media (max-width: 900px)  { .reviews .rail-track > * { flex: 0 0 calc((100% - 14px) / 2); } }
@media (max-width: 560px) {
  .reviews .rail-track { gap: 10px; }
  .reviews .rail-track > * { flex: 0 0 calc((100% - 10px) / 2); }
  .rcard { padding: 14px; gap: 10px; }
  .rcard blockquote { font-size: 15px; line-height: 1.4; }
  .rcard .tag { font-size: 8px; padding: 4px 7px; }
  .rcard .av { width: 30px; height: 30px; font-size: 13px; }
  .rcard .nm { font-size: 12px; }
  .rcard .wh { font-size: 10.5px; }
}

/* -- Inner Circle ------------------------------------------------------ */

.circle { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.circle-dark {
  position: relative; overflow: hidden; border-radius: var(--r-card);
  background: linear-gradient(150deg, var(--green-forest), var(--green-black));
  padding: clamp(30px, 3.6vw, 52px); box-shadow: var(--sh-dark); color: var(--cream);
}
.circle-dark > * { position: relative; }
.circle-dark .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.signup { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.signup input {
  flex: 1 1 200px; min-width: 0; border: none; border-radius: var(--r-pill);
  background: rgba(247, 244, 236, .1); color: var(--cream);
  padding: 17px 22px; font-size: 14.5px; outline: none;
  box-shadow: inset 0 0 0 1px rgba(216, 185, 106, .28);
  transition: box-shadow .24s ease, background .24s ease;
}
.signup input::placeholder { color: rgba(247, 244, 236, .5); }
.signup input:focus { background: rgba(247, 244, 236, .16); box-shadow: inset 0 0 0 1px rgba(216, 185, 106, .7); }
.signup .consent { flex: 1 1 100%; font-size: 12px; line-height: 1.6; color: rgba(247, 244, 236, .55); margin-top: 4px; }
.signup .done { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold-light); margin-top: 16px; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.footer {
  background: linear-gradient(160deg, var(--green-panel), var(--green-black));
  padding: clamp(36px, 4.4vw, 64px) var(--bleed) clamp(24px, 2.6vw, 34px);
  color: var(--cream);
}
.footer-grid {
  display: grid; gap: clamp(24px, 2.6vw, 40px);
  grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)) 1.2fr;
}
@media (max-width: 1280px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }
@media (max-width: 840px)  { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-col h2.mt-3 { margin-top: 26px; }
.footer-brand { grid-column: span 1; min-width: 0; }
@media (max-width: 840px) { .footer-brand { grid-column: 1 / -1; } }
.footer-brand img {
  width: min(190px, 68%); height: auto; display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45)) drop-shadow(0 0 26px rgba(216, 185, 106, .42));
}
/* The lockup is a link home, as the header one is. The anchor carries the
   sizing and the image fills it, so the hit area is the logo itself rather
   than the empty width of the column beside it. */
.footer-brand .footer-logo { display: block; width: min(190px, 68%); border-radius: 8px; }
.footer-brand .footer-logo img { width: 100%; }
.footer-brand .footer-logo:focus-visible {
  outline: 2px solid var(--gold-champagne); outline-offset: 8px;
}
.footer-brand p { margin-top: 20px; max-width: 30ch; font-size: 15.5px; font-weight: 400; line-height: 1.76; color: rgba(247, 244, 236, .72); }
.footer-social { display: flex; gap: 8px; margin-top: 22px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(247, 244, 236, .07);
  display: grid; place-items: center; color: rgba(247, 244, 236, .75);
  transition: background .22s ease, color .22s ease;
}
.footer-social a:hover { background: rgba(216, 185, 106, .2); color: var(--gold-champagne); }
.footer h2 { font-size: 11.5px; font-weight: 700; letter-spacing: .24em; color: var(--gold-pale); text-shadow: var(--glow-dark); }
.footer-col div { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.footer-col a { font-size: 15px; font-weight: 400; color: rgba(247, 244, 236, .84); }
.footer-col a:hover { color: var(--gold-champagne); }

.footer-hours, .footer-addr {
  margin-top: 16px; font-size: 13px; line-height: 1.75; color: rgba(247, 244, 236, .72);
}
.footer-hours strong { color: var(--gold-light); font-weight: 600; }
.footer-lic { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: rgba(247, 244, 236, .5); }

/* A row of plain, checkable statements. Specific facts get quoted; slogans do
   not, so each of these is something a customer could verify. */
.footer-badges {
  margin-top: clamp(28px, 3vw, 40px); padding-top: 24px;
  border-top: 1px solid rgba(216, 185, 106, .16);
  display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.fbadge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  color: var(--gold-light); background: rgba(216, 185, 106, .08);
  box-shadow: inset 0 0 0 1px rgba(216, 185, 106, .22);
  border-radius: var(--r-pill); padding: 9px 14px;
}
.fbadge svg { flex: none; opacity: .85; }
@media (max-width: 620px) { .fbadge { font-size: 9px; padding: 8px 11px; letter-spacing: .1em; } }

/* Category and producer on a product card are links into the shelf. */
.sub-link { color: var(--ink-body); text-decoration: none; border-bottom: 1px solid rgba(184, 138, 50, .35); }
.sub-link:hover { color: var(--green-forest); border-bottom-color: var(--gold-mid); }

/* Lineage is a facet, so wherever it is named — the card pill, the PDP spec
   table — it links into the shop filter that means the same thing. Colour is
   inherited so the token keeps the weight of whatever encloses it; only the
   rule underneath says it is a link. */
.lineage-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(184, 138, 50, .45); }
.lineage-link:hover { color: var(--green-forest); border-bottom-color: var(--gold-mid); }

.footer-pay {
  margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(216, 185, 106, .16);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.footer-pay .k { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; color: var(--gold-pale); text-shadow: var(--glow-dark); }
.footer-pay .set { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paymark { display: flex; flex-direction: column; align-items: center; gap: 9px; }

/* No plate and no glow. The marks sit directly on the footer's dark green.

   The glow used to be load-bearing: Apple Pay's mark is black and Google Pay's
   wordmark is grey, and on dark green both read as holes rather than logos. It
   was separating them from the ground. That job now belongs to the markDark
   variants, which are drawn in white, so the halo has nothing left to do and
   the marks are cleaner without it. */
.paymark .mark {
  height: 40px; display: flex; align-items: center; justify-content: center;
  transition: transform .24s ease, filter .24s ease;
}
/* An explicit HEIGHT, not auto. These SVGs carry a 24x24 intrinsic size from
   their viewBox, so `height:auto` renders them at 24px and max-height only
   ever caps — it never scales up. Height drives, width follows the aspect. */
.paymark .mark img,
.paymark .mark svg {
  height: 38px; width: auto;
  max-width: 132px;
  object-fit: contain; display: block;
}
/* Per-mark heights. Each brand draws its logo to a different optical weight,
   so one shared height leaves some shouting and others timid. Google Pay is a
   wide horizontal lockup, which Google asks is not shown smaller than the
   brands beside it - so it gets a width allowance rather than a height cut.
   The [src*=] hooks match the plain and the -light variants alike. */
.paymark .mark img[src*="googlepay"] { height: 26px; max-width: 140px; }
.paymark .mark img[src*="applepay"]  { height: 32px; }
.paymark .mark img[src*="cashapp"]   { height: 34px; border-radius: 7px; }
.paymark .mark img[src*="chime"]     { height: 34px; border-radius: 7px; }
.paymark .mark img[src*="zelle"]     { height: 38px; }
.paymark .mark img[src*="bitcoin"]   { height: 34px; }

.paymark:hover .mark { transform: translateY(-3px); }

.paymark .wordmark { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--gold-light); }
.paymark .n { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: rgba(247, 244, 236, .62); }

@media (max-width: 620px) {
  .paymark .mark { height: 30px; }
  .paymark .mark img, .paymark .mark svg { height: 30px; max-width: 104px; }
  .paymark .mark img[src*="cashapp"], .paymark .mark img[src*="chime"] { height: 27px; }
  .paymark .mark img[src*="googlepay"] { height: 20px; max-width: 108px; }
  .paymark .mark img[src*="applepay"] { height: 25px; }
  .paymark .mark img[src*="bitcoin"] { height: 27px; }
  .paymark .n { font-size: 8.5px; letter-spacing: .1em; }
  .footer-pay .set { gap: 16px 18px; justify-content: flex-start; }
}

/* -- Checkout payment rows --------------------------------------------- */
.choice-pay .in { align-items: center; gap: 16px; }
.paylogo {
  width: 74px; height: 44px; flex: none; border-radius: 10px;
  background: var(--surface-tint); display: grid; place-items: center; padding: 8px;
}
.choice-pay input:checked + .in .paylogo { background: var(--surface-field); }
.paylogo img { height: 24px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.paylogo img[src*="googlepay"] { height: 15px; }
.paylogo img[src*="bitcoin"] { height: 26px; }
.tag-primary {
  margin-left: 9px; font-size: 9px; font-weight: 700; letter-spacing: .14em;
  color: var(--gold-sale); vertical-align: 2px;
  background: linear-gradient(140deg, rgba(242, 225, 174, .55), rgba(184, 138, 50, .2));
  box-shadow: var(--sh-gold); border-radius: var(--r-pill); padding: 4px 8px;
}
@media (max-width: 520px) {
  .choice-pay .in { gap: 12px; }
  .paylogo { width: 50px; height: 34px; }
  .tag-primary { display: block; margin: 6px 0 0; width: max-content; }
}

.footer-legal {
  margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(216, 185, 106, .16);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
.footer-legal span, .footer-legal a { font-size: 12px; letter-spacing: .08em; color: rgba(247, 244, 236, .62); }
.footer-legal a { font-weight: 600; color: rgba(247, 244, 236, .72); }
.footer-legal a:hover { color: var(--gold-champagne); }
.footer-legal .links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-notice { margin-top: 18px; max-width: 920px; font-size: 11.5px; line-height: 1.7; color: rgba(247, 244, 236, .5); }

/* ==========================================================================
   10. DRAWERS, DIALOGS, AGE GATE
   ========================================================================== */

.scrim-fixed {
  position: fixed; inset: 0; z-index: 140; background: rgba(7, 23, 13, .42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: cl47In .25s ease both; border: none;
}
.scrim-fixed[hidden] { display: none; }

.drawer {
  position: fixed; top: 10px; right: 10px; bottom: 10px;
  width: min(440px, calc(100vw - 20px));
  background: var(--surface); border-radius: var(--r-2xl); z-index: 150;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--sh-drawer); animation: cl47Panel .4s var(--ease) both;
}
.drawer[hidden] { display: none; }
.drawer .head { padding: 24px 28px 18px; display: flex; justify-content: space-between; align-items: center; }
.drawer .head .t { font-size: 12.5px; font-weight: 700; letter-spacing: .2em; color: var(--ink); }
.drawer .ship { margin: 0 20px; background: var(--surface-tint); border-radius: var(--r-md); padding: 14px 18px; }
.drawer .ship .msg { font-size: 14px; font-weight: 500; color: var(--ink-nav); }
.drawer .ship .bar { margin-top: 10px; height: 5px; border-radius: var(--r-pill); background: var(--surface-rule); overflow: hidden; }
.drawer .ship .bar i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-wash));
  box-shadow: 0 0 14px rgba(216, 185, 106, .95);
  transition: width .55s var(--ease);
}
.drawer .items { flex: 1; overflow-y: auto; padding: 8px 20px 4px; }
.drawer .empty { padding: 48px 8px; text-align: center; }
.drawer .empty .t { font-family: var(--serif); font-style: italic; font-size: 23px; color: var(--ink-body); }
.drawer .foot { padding: 18px 24px 24px; }
.drawer .foot .line { display: flex; justify-content: space-between; align-items: baseline; }
.drawer .foot .k { font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--ink); }
.drawer .foot .v { font-size: 22px; font-weight: 600; color: var(--ink); }
.drawer .foot .note { margin-top: 6px; font-size: 13px; color: var(--ink-muted); }
.drawer .foot .btn { margin-top: 16px; }

.citem {
  display: grid; grid-template-columns: 66px 1fr auto; gap: 14px; align-items: center;
  background: var(--cream); border-radius: var(--r-lg); padding: 14px; margin-top: 10px;
}
.citem img { width: 66px; height: 66px; object-fit: cover; border-radius: var(--r-sm); display: block; background: var(--surface-tint); }
.citem .n { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.citem .m { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; }
.citem .qty { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.citem .qty .q { min-width: 26px; text-align: center; font-size: 15px; font-weight: 600; }
.citem .rm { margin-left: 8px; background: none; border: none; padding: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--ink-muted); transition: color .2s ease; }
.citem .rm:hover { color: var(--gold-mid); }
.citem .line { font-size: 16px; font-weight: 600; color: var(--ink); }

/* -- Age gate ---------------------------------------------------------- */

.agegate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.agegate[hidden] { display: none; }
.agegate .scrim {
  position: absolute; inset: 0; background: rgba(7, 23, 13, .6);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  animation: cl47In .4s ease both;
}
.agegate .box {
  position: relative; width: min(470px, 94vw); background: var(--surface);
  border-radius: var(--r-3xl); padding: clamp(32px, 5vw, 50px); text-align: center;
  box-shadow: var(--sh-modal); animation: cl47Pop .5s var(--ease) .08s both;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.agegate img { width: min(210px, 62%); height: auto; margin: 0 auto; display: block; }
.agegate .k { font-size: 11.5px; font-weight: 700; letter-spacing: .22em; color: var(--gold-label); text-shadow: var(--glow-label); margin-top: 22px; }
.agegate h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(29px, 3.2vw, 39px); line-height: 1.1; color: var(--ink); margin-top: 12px; }
.agegate p { margin: 12px auto 0; max-width: 40ch; font-size: 15.5px; line-height: 1.66; color: var(--ink-body); }
.agegate .actions { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; }
.agegate .deny {
  width: 100%; background: transparent; border: none; border-radius: var(--r-pill); padding: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--ink-muted); transition: color .2s ease;
}
.agegate .deny:hover { color: var(--gold-mid); }
.agegate .denied { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 15.5px; color: var(--gold-mid); }

/* -- Toast ------------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 190; background: var(--green); color: var(--cream);
  border-radius: var(--r-pill); padding: 15px 26px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  box-shadow: 0 26px 50px -26px rgba(7, 23, 13, .8);
  animation: cl47Pop .3s var(--ease) both;
}
.toast[hidden] { display: none; }

/* ==========================================================================
   11. SHOP
   ========================================================================== */

.pagehead {
  background: radial-gradient(120% 140% at 88% 4%, rgba(216, 185, 106, .14), transparent 58%),
              linear-gradient(150deg, var(--green-panel), var(--green-black));
  border-radius: var(--r-card); padding: clamp(34px, 4vw, 60px) clamp(24px, 3vw, 48px);
  box-shadow: var(--sh-dark); color: var(--cream);
}
.pagehead h1 { margin-top: 14px; }
.pagehead p { margin-top: 16px; }
.crumbs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; }
.crumbs a { color: rgba(247, 244, 236, .7); }
.crumbs a:hover { color: var(--gold-champagne); }
.crumbs .sep { color: rgba(247, 244, 236, .4); }
.crumbs [aria-current] { color: var(--gold-light); }
.crumbs-light a { color: var(--ink-muted); }
.crumbs-light .sep { color: var(--ink-ghost); }
.crumbs-light [aria-current] { color: var(--ink); }

.toolbar {
  background: var(--surface); border-radius: var(--r-lg); padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: var(--sh-card-sm);
}
.toolbar .count { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; color: var(--ink-muted); margin-right: auto; }
.toolbar .count b { color: var(--ink); font-weight: 700; }

/* On a phone the four controls wrap onto two rows and the bar costs 120px of
   the first screen before a single product appears. Tightened here rather than
   dropped: the sort and the layout switch both earn their place, they just do
   not need desktop padding to do it. */
@media (max-width: 700px) {
  .toolbar { padding: 10px 12px; gap: 8px 10px; }
  .toolbar .count { font-size: 11.5px; letter-spacing: .08em; }
  .toolbar .select { padding: 9px 32px 9px 14px; }
  .toolbar .viewtoggle button { padding: 8px 10px; }
  .toolbar .chip { padding: 8px 12px; }
}

.select {
  appearance: none; -webkit-appearance: none; border: none;
  background: var(--surface-field); border-radius: var(--r-pill);
  padding: 12px 38px 12px 18px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23171914' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  transition: background-color .22s ease;
}
.select:hover { background-color: var(--surface-hover); }

.viewtoggle { display: flex; gap: 4px; background: var(--surface-field); border-radius: var(--r-pill); padding: 4px; }
.viewtoggle button {
  width: 38px; height: 38px; border: none; border-radius: 50%; background: transparent;
  display: grid; place-items: center; color: var(--ink-muted); transition: background .22s ease, color .22s ease;
}
.viewtoggle button[aria-pressed="true"] { background: var(--green); color: var(--gold-light); }

.shop-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(18px, 2.2vw, 30px); align-items: start; }
@media (max-width: 1000px) { .shop-layout { grid-template-columns: minmax(0, 1fr); } }

/* A main column with a sidebar.

   These were previously set with an inline `grid-template-columns`, which
   quietly defeated the media query that collapses them: an inline style beats
   a stylesheet rule, so the 340px sidebar never wrapped and every page using
   it overflowed below about 430px. Classes instead, so the breakpoint wins. */
.split { display: grid; gap: clamp(16px, 2.2vw, 30px); align-items: start;
         grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.split-left { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
@media (max-width: 900px) {
  .split, .split-left { grid-template-columns: minmax(0, 1fr); }
  .split > .summary, .split-left > .summary { position: static; }
}

.facets {
  background: var(--surface); border-radius: var(--r-card); padding: 26px 24px;
  box-shadow: var(--sh-card-sm); position: sticky; top: 92px;
  max-height: calc(100vh - 110px); overflow-y: auto;
}
@media (max-width: 1000px) {
  /* Below the sidebar breakpoint the refine panel is a dropdown, not a block
     in the flow.
     In the flow it sat above the grid, so every category visit began with a
     full-height panel and the products only started after it ended — a long
     scroll to reach the thing the visitor came for. Floating it over the grid
     leaves the products exactly where they are and lets it be dismissed by
     tapping anywhere else. The toolbar above stays visible while it is open,
     so the "Showing n of m" count reads as a live answer to each tap. */
  .shop-layout { position: relative; }
  .facets {
    position: absolute; top: 0; left: 0; right: 0; z-index: 40;
    display: none; max-height: min(68vh, 540px); overflow-y: auto;
    box-shadow: 0 22px 48px rgba(23, 25, 20, .26), 0 0 0 1px rgba(23, 25, 20, .07);
    animation: facet-drop .16s ease-out both;
  }
  .facets.is-open { display: block; }
}
@keyframes facet-drop { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .facets { animation: none; } }
.facet { border-top: 1px solid rgba(23, 25, 20, .09); padding: 18px 0 4px; }
.facet:first-child { border-top: none; padding-top: 0; }
.facet > h3 { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--ink); }
.facet .opts { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; max-height: 232px; overflow-y: auto; }
.facet .more { background: none; border: none; padding: 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--gold-label); }

.check { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--ink-nav); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  width: 19px; height: 19px; flex: none; border-radius: 6px; background: var(--surface-field);
  box-shadow: inset 0 0 0 1px rgba(23, 25, 20, .12);
  display: grid; place-items: center; transition: background .18s ease, box-shadow .18s ease;
}
.check .box svg { opacity: 0; transition: opacity .18s ease; }
.check input:checked + .box { background: var(--green); box-shadow: none; }
.check input:checked + .box svg { opacity: 1; }
.check input:focus-visible + .box { outline: 2px solid var(--gold-mid); outline-offset: 3px; }
.check .n { margin-left: auto; font-size: 12px; color: var(--ink-muted); }

/* The rating facet is a threshold, so its controls are radios: choosing "3
   and up" replaces "4 and up" rather than adding to it, and a round control
   is how that difference is normally signalled. The tick stays — a filled
   round box with a check reads as chosen in either shape. */
.check .box-radio { border-radius: 50%; }
.rate-stars { color: var(--gold-mid); letter-spacing: 1px; font-size: 12px; }
.check:hover { color: var(--ink); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; border: none;
  background: var(--surface-field); border-radius: var(--r-pill); padding: 9px 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--ink-nav);
  transition: background .22s ease, color .22s ease;
}
.chip:hover { background: var(--green); color: var(--cream); }
.chip-clear { background: transparent; color: var(--gold-label); font-weight: 700; letter-spacing: .14em; }
.chip-clear:hover { background: transparent; color: var(--gold-mid); }

/* Two products per row on a phone. auto-fill with a 244px minimum resolves to
   a single column below ~500px, which wastes half the screen on a catalogue
   this size; below that width the track count is set explicitly instead. */
.grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr)); gap: clamp(14px, 1.6vw, 20px); }
@media (max-width: 560px) {
  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid-products .pcard { padding: 8px 8px 14px; border-radius: var(--r-lg); }
  .grid-products .pcard h3 { font-size: 17px; }
  .grid-products .pcard .sub { font-size: 11.5px; }
  .grid-products .pcard .price { font-size: 16px; }
  .grid-products .pcard .add { padding: 11px 6px; font-size: 10px; letter-spacing: .1em; }
  .grid-products .pill-data { padding: 4px 8px; font-size: 11px; }
  .grid-products .pill-data .n { font-size: 11px; }
  .grid-products .lab-row { gap: 6px; }
  .grid-products .pill-batch { font-size: 8.5px; padding: 5px 8px; }
  .grid-products .coa { font-size: 9.5px; }
  /* List view stays one-up: two columns of horizontal rows is unreadable. */
  .grid-products.is-list { grid-template-columns: minmax(0, 1fr); }
}
.grid-products.is-list { grid-template-columns: minmax(0, 1fr); }
.grid-products.is-list .pcard { flex-direction: row; align-items: center; gap: 22px; padding: 18px; }
.grid-products.is-list .pcard .shot { width: clamp(120px, 18vw, 180px); flex: none; }
.grid-products.is-list .pcard .body { padding: 0; }
.grid-products.is-list .pcard .add { max-width: 240px; }

.empty-state { background: var(--surface); border-radius: var(--r-card); padding: clamp(40px, 5vw, 72px) 28px; text-align: center; box-shadow: var(--sh-card-sm); }
.empty-state .t { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 34px); color: var(--ink); }
.empty-state p { font-size: 15.5px; color: var(--ink-body); margin-top: 12px; }

.loadmore { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }
.loadmore .n { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--ink-muted); }

.skel { background: linear-gradient(100deg, var(--surface-tint) 30%, var(--surface-field) 50%, var(--surface-tint) 70%); background-size: 300% 100%; animation: skel 1.4s linear infinite; border-radius: var(--r-lg); }
@keyframes skel { to { background-position: -150% 0; } }

/* ==========================================================================
   12. PRODUCT
   ========================================================================== */

.pdp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; }
.pdp-gallery { background: var(--surface); border-radius: var(--r-card); padding: clamp(16px, 2vw, 26px); box-shadow: var(--sh-card-sm); position: sticky; top: 92px; }
@media (max-width: 900px) { .pdp-gallery { position: static; } }
.pdp-shot { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--surface-tint); aspect-ratio: 1; }
.pdp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-shot img.is-cutout { object-fit: contain; padding: 7%; }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pdp-thumb { width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden; border: none; background: var(--surface-tint); padding: 0; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold-mid); }

.pdp-info h1 { margin-top: 12px; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.pdp-price .now { font-size: 34px; font-weight: 600; color: var(--ink); }
.pdp-price .was { font-size: 19px; color: var(--ink-muted); text-decoration: line-through; }
.pdp-panel { background: var(--surface); border-radius: var(--r-xl); padding: 22px 24px; box-shadow: var(--sh-card-sm); margin-top: 24px; }
.pdp-panel h2 { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--ink); }
.pdp-spec { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(23, 25, 20, .07); }
.pdp-spec:last-child { border-bottom: none; }
.pdp-spec .l { font-size: 13px; color: var(--ink-muted); }
.pdp-spec .v { font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right; }
.pdp-buy { display: flex; gap: 10px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.qtybox { display: flex; align-items: center; gap: 4px; background: var(--surface-field); border-radius: var(--r-pill); padding: 5px; }
.qtybox .q { min-width: 34px; text-align: center; font-size: 15px; font-weight: 600; }
.pdp-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }

.related { margin-top: clamp(30px, 4vw, 56px); }

/* ==========================================================================
   13. FORMS, CHECKOUT, ACCOUNT, LOCATIONS
   ========================================================================== */

.field { display: block; margin-top: 16px; }
.field > .l { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ink); margin-bottom: 8px; }
.input, .textarea, select.input {
  width: 100%; border: none; border-radius: var(--r-md);
  background: var(--surface-field); color: var(--ink);
  padding: 15px 18px; font-size: 15px; outline: none;
  box-shadow: inset 0 0 0 1px rgba(23, 25, 20, .07);
  transition: background .22s ease, box-shadow .22s ease;
}
.textarea { border-radius: var(--r-md); min-height: 130px; resize: vertical; }
.input:focus, .textarea:focus { background: var(--surface); box-shadow: inset 0 0 0 2px rgba(184, 138, 50, .55); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #A63A22; }
.field .err { font-size: 12.5px; color: #A63A22; margin-top: 7px; }
.field .hint { font-size: 12.5px; color: var(--ink-muted); margin-top: 7px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 16px; }

.formstep {
  font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--ink);
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(23, 25, 20, .09);
}
.formstep:first-of-type { margin-top: 26px; }
.req { color: var(--gold-mid); }
.checkgrid {
  display: grid; gap: 2px 16px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}
.asklist { margin-top: 14px; padding-left: 18px; }
.asklist li { font-size: 13px; line-height: 1.7; color: var(--ink-muted); margin-bottom: 9px; }
.asklist li::marker { color: var(--gold-mid); }
#wholesale-done, #contact-done {
  color: var(--green-forest); font-family: var(--serif); font-style: italic; font-size: 18px;
}

.card-panel { background: var(--surface); border-radius: var(--r-card); padding: clamp(24px, 3vw, 38px); box-shadow: var(--sh-card-sm); }
.card-panel + .card-panel { margin-top: var(--stack); }
.card-panel > h2 { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; color: var(--ink); }

.choice { display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice .in {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface-field); border-radius: var(--r-lg); padding: 18px 20px;
  box-shadow: inset 0 0 0 1px transparent; transition: background .2s ease, box-shadow .2s ease;
}
.choice:hover .in { background: var(--surface-hover); }
.choice input:checked + .in { background: var(--surface); box-shadow: inset 0 0 0 2px var(--green); }
.choice input:focus-visible + .in { outline: 2px solid var(--gold-mid); outline-offset: 3px; }
.choice .radio { width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(23, 25, 20, .2); margin-top: 2px; display: grid; place-items: center; }
.choice input:checked + .in .radio { box-shadow: inset 0 0 0 1.5px var(--green); }
.choice input:checked + .in .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
/* Both are spans so the whole row stays one label; they still need to stack,
   or the method name and its note run together as one sentence. */
.choice .t { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.choice .s { display: block; font-size: 13.5px; color: var(--ink-muted); margin-top: 4px; line-height: 1.55; }
.choice .p { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--ink); }

/* Checkout.

   Two columns where there is room, one below 1000px. The summary was a fixed
   360px track, which on a 360px phone left nothing for the form and pushed the
   page sideways. Both tracks are now minmax(0,1fr)-safe, so nothing can force
   an overflow. */
.checkout-grid {
  display: grid; gap: clamp(16px, 2.2vw, 30px); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
}
@media (max-width: 1000px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
  /* The summary leads on a phone: people want the total before the form. */
  .checkout-grid > .summary { order: -1; position: static; }
}
@media (max-width: 560px) {
  .checkout-grid .card-panel { padding: 18px 15px; border-radius: var(--r-lg); }
  .checkout-grid .summary { padding: 18px 15px; }
  .checkout-grid .field-row { grid-template-columns: minmax(0, 1fr); }
  .steps-bar { gap: 6px; }
  .steps-bar .s { font-size: 9.5px; letter-spacing: .1em; gap: 6px; }
  .steps-bar .s .n { width: 22px; height: 22px; font-size: 10px; }
  .choice .in { padding: 14px 14px; gap: 11px; }
  .input, .textarea, select.input { padding: 13px 14px; font-size: 16px; }
}

.summary { background: var(--surface); border-radius: var(--r-card); padding: 26px; box-shadow: var(--sh-card-sm); position: sticky; top: 92px; }
@media (max-width: 900px) { .summary { position: static; } }
.summary .line { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14.5px; color: var(--ink-body); }
.summary .line.total { border-top: 1px solid rgba(23, 25, 20, .1); margin-top: 8px; padding-top: 16px; font-size: 20px; font-weight: 600; color: var(--ink); }
.summary .line .save { color: var(--green-forest); font-weight: 600; }

.steps-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.steps-bar .s { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--ink-muted); }
.steps-bar .s .n { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-field); display: grid; place-items: center; font-size: 11px; }
.steps-bar .s.is-on { color: var(--ink); }
.steps-bar .s.is-on .n { background: var(--green); color: var(--gold-light); }
.steps-bar .s.is-done .n { background: var(--green-forest); color: var(--gold-light); }
.steps-bar .arrow { color: var(--ink-ghost); }

/* -- Producer index ------------------------------------------------------ */
.brandgrid {
  display: grid; gap: 12px; margin: 16px 0 34px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
}
.brandcard {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--surface-field); border-radius: var(--r-lg); padding: 16px 18px;
  transition: background .2s ease, transform .24s var(--ease), box-shadow .24s ease;
}
.brandcard:hover { background: var(--surface); transform: translateY(-3px); box-shadow: var(--sh-card-sm); }
.brandcard .bn { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.brandcard .bm { font-size: 11.5px; color: var(--ink-muted); }
.brandcard .bp { font-size: 12.5px; font-weight: 600; color: var(--gold-ink); margin-top: 2px; }
@media (max-width: 560px) { .brandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brandcard { padding: 12px 13px; } .brandcard .bn { font-size: 13.5px; } }

/* -- Order tracking on a phone ------------------------------------------
   The result block is a status, a number, a stamp, five milestones and the
   contents. At 320px the number and the stamp were sharing a row and the item
   rows kept a 66px image column beside a name that had nowhere to wrap. */
@media (max-width: 560px) {
  #track-result .row-end { flex-direction: column; align-items: flex-start; gap: 10px; }
  #track-result .display { font-size: 26px; word-break: break-all; }
  #r-placed { align-self: flex-start; }
  #r-milestones .row { gap: 11px; padding: 12px 0; }
  #r-milestones .meta { font-size: 11.5px; line-height: 1.5; }
  #r-items .citem {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 11px; padding: 11px; border-radius: var(--r-sm);
  }
  #r-items .citem img { width: 52px; height: 52px; }
  #r-items .citem .n { font-size: 16px; line-height: 1.2; }
  #r-items .citem .m { font-size: 11.5px; }
  #track-form .field-row { grid-template-columns: minmax(0, 1fr); }
  /* 16px keeps iOS from zooming the viewport when the field takes focus. */
  #track-form .input { font-size: 16px; }
}

/* -- Locations --------------------------------------------------------- */

.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.state {
  display: block; background: var(--surface); border-radius: var(--r-2xl); padding: 26px;
  box-shadow: var(--sh-card-sm); transition: transform .3s var(--ease), box-shadow .3s ease;
}
.state:hover { transform: translateY(-5px); box-shadow: var(--sh-tile); }
.state .ab {
  font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1;
  background: linear-gradient(140deg, var(--gold-ink), var(--gold-deep) 45%, var(--gold-mid));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.state h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink); margin-top: 8px; }
.state .city { font-size: 14px; color: var(--ink-body); margin-top: 8px; line-height: 1.6; }
.state .lic { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ink-muted); margin-top: 14px; }
.state .modes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.state .mode { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: var(--gold-sale); background: linear-gradient(140deg, rgba(242, 225, 174, .55), rgba(184, 138, 50, .2)); box-shadow: var(--sh-gold); border-radius: var(--r-pill); padding: 6px 10px; }

/* ==========================================================================
   14. EDITORIAL AND UTILITY
   ========================================================================== */

/* Long-form pages — learn, journal entries, policies. One measured column. */
.prose { max-width: 74ch; }
.prose h2 { font-family: var(--serif); font-size: clamp(28px, 2.8vw, 40px); font-weight: 600; line-height: 1.12; color: var(--ink); margin-top: 48px; }
.prose h3 { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); font-weight: 600; color: var(--ink); margin-top: 34px; }
.prose h4 { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--gold-label); text-shadow: var(--glow-label); margin-top: 28px; }
.prose p  { font-size: 16.5px; line-height: 1.78; color: var(--ink-body); margin-top: 16px; }
.prose ul, .prose ol { margin-top: 16px; padding-left: 22px; }
.prose li { font-size: 16.5px; line-height: 1.72; color: var(--ink-body); margin-top: 9px; }
.prose li::marker { color: var(--gold-mid); }
.prose a { color: var(--green-forest); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(184, 138, 50, .5); }
.prose a:hover { color: var(--gold-mid); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose blockquote {
  margin-top: 26px; padding: 20px 26px; background: var(--surface-tint);
  border-radius: var(--r-md); font-family: var(--serif); font-style: italic;
  font-size: 20px; line-height: 1.5; color: var(--ink-nav);
}
.prose table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 14.5px; }
.prose th, .prose td { text-align: left; padding: 13px 14px; border-bottom: 1px solid rgba(23, 25, 20, .1); }
.prose th { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--ink); }
.prose td { color: var(--ink-body); }
.prose > :first-child { margin-top: 0; }

/* A scroll-spy contents rail, used on the long education page. */
.with-rail { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(24px, 3vw, 52px); align-items: start; }
@media (max-width: 940px) { .with-rail { grid-template-columns: minmax(0, 1fr); } .rail { position: static !important; } }
.rail { position: sticky; top: 96px; }
.rail h2 { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--ink); }
.rail ol { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.rail a { display: block; font-size: 14px; color: var(--ink-muted); padding: 8px 12px; border-radius: var(--r-xs); line-height: 1.4; }
.rail a:hover { background: var(--surface); color: var(--ink); }
.rail a[aria-current="true"] { background: var(--surface); color: var(--ink); font-weight: 600; }

.note {
  background: var(--surface-tint); border-radius: var(--r-md); padding: 18px 22px;
  font-size: 14.5px; line-height: 1.66; color: var(--ink-body);
}
.note strong { color: var(--ink); }

.divider { height: 1px; background: rgba(23, 25, 20, .1); margin: clamp(28px, 3vw, 44px) 0; border: none; }

.center { text-align: center; }
.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: 10px; }
.mt-2  { margin-top: 18px; }
.mt-3  { margin-top: 26px; }
.mt-4  { margin-top: 34px; }
[hidden] { display: none !important; }

/* -- Narrow screens ---------------------------------------------------- */

@media (max-width: 900px) {
  .hero-copy { padding-left: clamp(24px, 6vw, 48px); padding-right: clamp(24px, 6vw, 48px); }
  .hero-grid { min-height: 0; }
  .hero-art { min-height: 380px; order: -1; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 620px) {
  .lab .ghost47 { display: none; }
  .coa-card { transform: none; }
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-legal { justify-content: flex-start; }
  .tile { padding-bottom: 84px; min-height: 240px; }
  .drawer { top: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; border-radius: 0; }
}

/* -- Back to top --------------------------------------------------------
   Appears once the visitor is a screen or so down, which is the only point at
   which it is useful. It sits clear of the cart drawer and, on a phone, clear
   of the home indicator. */
.totop {
  position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px);
  z-index: 80; width: 50px; height: 50px; border-radius: 50%; border: none;
  background: var(--green); color: var(--gold-light);
  display: grid; place-items: center;
  box-shadow: 0 18px 34px -18px rgba(7, 23, 13, .8), inset 0 0 0 1px rgba(216, 185, 106, .3);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s var(--ease), visibility .3s, background .22s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.totop.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.totop:hover { background: var(--green-forest); color: var(--gold-champagne); }
@media (max-width: 620px) { .totop { width: 46px; height: 46px; } }
@media print { .totop { display: none; } }

/* -- Print ------------------------------------------------------------- */

@media print {
  .header, .announce, .footer, .drawer, .scrim-fixed, .agegate, .grain, .skip, .toolbar, .facets { display: none !important; }
  body { background: #fff; }
  .section, .card-panel { box-shadow: none; }
}

/* --------------------------------------------------------------------------
   PAGE HEAD — full width on desktop
   The dark title band at the top of every inner page breaks out of the shell
   from 1024px up, so the header reads as a band across the window rather than
   a card floating on the ground. Below that it stays inside the gutter: a
   full-bleed dark block on a phone leaves no margin for the eye and pushes the
   first line of copy against the screen edge.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .pagehead {
    width: auto;
    margin-left: calc(50% - 50vw + (var(--sbw, 0px) / 2));
    margin-right: calc(50% - 50vw + (var(--sbw, 0px) / 2));
    padding-left: var(--bleed);
    padding-right: var(--bleed);
    border-radius: 0;
  }
  /* The band is the first thing under the header, so it should meet it. */
  .shell > .pagehead:first-child { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   FOOTER — the contact column
   Replaces the old BY EXPERIENCE and LOCATIONS lists. Those two were link
   rails, and the same links already sit in the header mega menu on every page,
   so nothing became unreachable; what the footer was missing was a way to
   reach a person. It takes two grid tracks on desktop because five labelled
   rows do not read in a 150px column.
   -------------------------------------------------------------------------- */
/* Desktop gets the contact column; below 1024px the link rails come back and
   the contact facts move to the brand column, which is already there. One
   statement of each fact per viewport, never two. */
.footer-col--contact { min-width: 0; display: none; }
.footer-col--links { min-width: 0; }
@media (min-width: 1024px) {
  .footer-col--contact { display: block; }
  .footer-col--links { display: none; }
  .footer-brand-detail { display: none; }
}
/* Desktop: seven columns on one row, contact at the far right.
   The grid defines seven tracks, but the visible columns were asking for eight
   tracks' worth — brand, SHOP, CATEGORIES, CUSTOMER CARE, LEARN, LEGAL, and a
   contact column spanning two — so LEGAL, being last, dropped onto a second row
   by itself. Contact now takes a single wider track at the end instead of
   spanning two, and the band carries its own wider bleed so seven columns have
   the room the old two-track contact column was borrowing. `order` moves
   contact past the link columns without touching the markup, which matters
   because the footer is repeated in all fifty-four pages. Below 1281px none of
   this applies and the existing rules stand unchanged. */
@media (min-width: 1281px) {
  .footer { --bleed: max(clamp(20px, 3vw, 48px), calc(50vw - 830px)); }
  .footer-grid { grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr)) 1.55fr; }
  .footer-col--contact { order: 1; }
}

.footer-contact { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 15px; }
.footer-contact li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 11px; align-items: start; }
.footer-contact li > svg { margin-top: 3px; color: var(--gold-champagne); opacity: .9; }
.footer-contact span {
  font-size: 14px; font-weight: 400; line-height: 1.62; color: rgba(247, 244, 236, .78);
}
.footer-contact strong {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(247, 244, 236, .48); margin-bottom: 3px;
}
.footer-contact a { font-size: 14px; color: rgba(247, 244, 236, .88); border-bottom: 1px solid rgba(216, 185, 106, .3); }
.footer-contact a:hover { color: var(--gold-champagne); border-bottom-color: var(--gold-champagne); }

.footer-contact-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(216, 185, 106, .12); border: 1px solid rgba(216, 185, 106, .34);
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--gold-champagne) !important;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.footer-contact-cta:hover {
  background: var(--gold-champagne); border-color: var(--gold-champagne);
  color: var(--green-black) !important;
}
.footer-contact-cta svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   CONTACT LINKS
   An email or telephone link is the one link on a page a reader is looking
   for, so it gets the gold rather than the body-link green. It also fixes a
   real defect: on the dark footer the default green link sat at roughly 1.4:1
   against the ground, which is to say invisible.
   -------------------------------------------------------------------------- */
a[href^="mailto:"],
a[href^="tel:"] {
  color: var(--gold-ink);
  font-weight: 500;
  border-bottom: 1px solid rgba(201, 162, 74, .38);
  transition: color .2s ease, border-color .2s ease;
}
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }

/* On any dark ground the same links take the light gold. */
.footer a[href^="mailto:"],
.footer a[href^="tel:"],
.on-dark a[href^="mailto:"],
.on-dark a[href^="tel:"],
.pagehead a[href^="mailto:"],
.pagehead a[href^="tel:"] {
  color: var(--gold-champagne);
  border-bottom-color: rgba(216, 185, 106, .38);
}
.footer a[href^="mailto:"]:hover,
.footer a[href^="tel:"]:hover,
.on-dark a[href^="mailto:"]:hover,
.on-dark a[href^="tel:"]:hover {
  color: var(--gold-pale); border-bottom-color: var(--gold-pale);
}

/* --------------------------------------------------------------------------
   SUGGESTIONS
   The list under the header search and the checkout state field. It sits above
   everything including the mega menus, and it is scrollable rather than tall,
   so a long list never runs off a short screen.
   -------------------------------------------------------------------------- */
.suggest {
  /* Anchored to the right edge and allowed to be wider than its field. The
     header search is a narrow control; a list the same width truncates every
     product name to two characters, which is not a suggestion. */
  position: absolute; right: 0; left: auto; top: calc(100% + 8px); z-index: 120;
  width: max(100%, 360px); max-width: min(440px, calc(100vw - 28px));
  background: var(--surface); border: 1px solid var(--surface-rule);
  border-radius: var(--r-card); box-shadow: var(--sh-2);
  padding: 6px; max-height: min(58vh, 420px); overflow-y: auto;
  overscroll-behavior: contain;
}
.suggest-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 11px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
  transition: background .14s ease;
}
.suggest-row:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; }
.suggest-row img {
  width: 38px; height: 38px; border-radius: 8px; object-fit: contain;
  background: var(--surface-tint); flex: none;
}
.suggest-row .sg-t {
  font-size: 14px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggest-row .sg-t b { font-weight: 700; color: var(--gold-ink); }
.suggest-row .sg-m { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
.suggest-row:hover, .suggest-row.is-on { background: var(--surface-hover); }
.suggest-row.is-on .sg-t { color: var(--green-forest); }

@media (max-width: 620px) {
  /* On a phone the field is already full width, so the list matches it. */
  .suggest { left: 0; right: 0; width: auto; max-width: none;
             max-height: min(48vh, 320px); }
  .suggest-row img { width: 32px; height: 32px; }
  .suggest-row .sg-t { font-size: 13.5px; }
}

/* --------------------------------------------------------------------------
   MEGA MENU WIDTH
   The header breaks out to the window edge on desktop, and the panel was
   inheriting that: left:0/right:0 against a full-width header is a full-width
   panel. Four columns stretched across 1920px puts the first link and the last
   half a metre apart. The panel is pinned to the shell instead, so it lines up
   with the navigation that opened it.

   Written as insets rather than a centring transform because the open
   animation already owns `transform`.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .mega {
    left: max(var(--bleed), calc(50% - (var(--shell) / 2)));
    right: max(var(--bleed), calc(50% - (var(--shell) / 2)));
  }
}

/* --------------------------------------------------------------------------
   MOBILE DRAWER — account tiles
   The account links were four words in a list, indistinguishable from the
   category rails above them. They are the actions somebody opens this menu to
   perform, so they are buttons: a target big enough for a thumb, an icon to
   find them by, and the current delivery state shown on its own tile.
   -------------------------------------------------------------------------- */
.mobilenav .top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.mobilenav .group .navtiles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 16px;
}
.mobilenav .group .navtile {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; padding: 11px 13px;
}
.navtile {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 11px 13px;
  background: var(--surface-field); border: 1px solid var(--surface-rule);
  border-radius: var(--r-md); font-size: 13.5px; font-weight: 500; color: var(--ink) !important;
  text-align: left; width: 100%; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.navtile svg { flex: none; color: var(--green-forest); }
.navtile span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.navtile b { font-weight: 700; color: var(--gold-ink); }
.navtile:hover, .navtile:active {
  background: var(--green); border-color: var(--green); color: var(--gold-champagne) !important;
  transform: translateY(-1px);
}
.navtile:hover svg, .navtile:active svg { color: var(--gold-champagne); }
.navtile:hover b, .navtile:active b { color: var(--gold-pale); }

/* --------------------------------------------------------------------------
   MOBILE HEADER — search in place of the state selector
   On a phone the header holds five controls in about 360px. The state selector
   was one of them, and it is the least urgent: the state is already shown on
   the bottom bar and on its own tile in the drawer, and it changes once. Search
   is the thing people reach for and had nowhere to be, because the header field
   is hidden at this width. So below 720px the two swap.
   -------------------------------------------------------------------------- */
.headbtn-search { display: none; }
@media (max-width: 720px) {
  .headbtn-search { display: grid; }
  .locbtn { display: none; }
}

/* --------------------------------------------------------------------------
   BACK TO TOP
   Gold on a phone rather than green: it floats over the page and, above the
   dark footer, a dark green disc on dark green is a button nobody can find.
   Its clearance is derived from the bar height rather than guessed, so the two
   cannot drift apart.
   -------------------------------------------------------------------------- */
:root { --bottomnav-h: 58px; }

@media (max-width: 860px) {
  .totop {
    width: 50px; height: 50px;
    bottom: calc(var(--bottomnav-h) + 16px + env(safe-area-inset-bottom, 0px));
    background: var(--gold-champagne); color: var(--green-black);
    box-shadow: 0 10px 26px -8px rgba(7, 23, 13, .55),
                inset 0 0 0 1px rgba(255, 255, 255, .45);
  }
  .totop:hover, .totop:active { background: var(--gold-pale); color: var(--green-black); }
  .totop svg { stroke-width: 2.4; }
}

/* ==========================================================================
   INVOICE
   A document, not a page. The type is tighter and more even than the rest of
   the site because it is meant to be read as a record and printed: numerals
   are tabular throughout, so a column of money lines up on the decimal.
   ========================================================================== */

/* -- the demand -------------------------------------------------------- */
.paypanel {
  background: linear-gradient(150deg, var(--green-panel), var(--green-black));
  color: var(--cream); border: none;
  box-shadow: var(--sh-dark);
}
.paypanel .eyebrow { color: var(--gold-champagne); }
.paypanel-head {
  display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap;
  padding-bottom: 22px; border-bottom: 1px solid rgba(216, 185, 106, .22);
}
.paypanel-total {
  font-family: var(--serif); font-size: clamp(38px, 5.5vw, 58px); font-weight: 600;
  line-height: 1; color: var(--gold-champagne); margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.paypanel-head .muted { color: rgba(247, 244, 236, .72) !important; margin-top: 10px; max-width: 44ch; }
.paypanel-mark { margin-left: auto; }
.paypanel-mark img { height: 34px; width: auto; max-width: 140px; object-fit: contain; }
.paypanel-body { padding-top: 22px; }
.pay-how { font-size: 15px; line-height: 1.7; color: rgba(247, 244, 236, .84); margin: 0 0 20px; }

.pay-facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pay-fact { display: grid; gap: 7px; }
.pf-l { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: rgba(247, 244, 236, .5); }

/* A value you must type exactly, with a copy button welded to it. */
.copyfield {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 12px 13px; border-radius: var(--r-sm); cursor: pointer;
  background: rgba(247, 244, 236, .07); border: 1px solid rgba(216, 185, 106, .28);
  color: var(--cream); text-align: left;
  transition: background .2s ease, border-color .2s ease;
}
.copyfield:hover { background: rgba(247, 244, 236, .12); border-color: var(--gold-champagne); }
.copyfield .cf-v {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.copyfield .cf-b {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: var(--gold-champagne);
}
.copyfield.is-copied { border-color: var(--gold-pale); background: rgba(216, 185, 106, .18); }
.copyfield.is-copied .cf-b::after { content: '✓'; }

.paypanel .note-quiet {
  background: rgba(247, 244, 236, .06); border: 1px solid rgba(216, 185, 106, .24);
  color: rgba(247, 244, 236, .82);
}
.paypanel .note-quiet b { color: var(--gold-champagne); }
.paypanel .btn-quiet {
  background: transparent; border: 1px solid rgba(216, 185, 106, .34); color: var(--gold-champagne);
}
.paypanel .btn-quiet:hover { background: rgba(216, 185, 106, .16); }
.paypanel .muted { color: rgba(247, 244, 236, .6) !important; }

/* -- settled ----------------------------------------------------------- */
.paid-banner {
  display: flex; align-items: center; gap: 15px;
  background: linear-gradient(140deg, rgba(46, 125, 82, .14), rgba(46, 125, 82, .05));
  border: 1px solid rgba(46, 125, 82, .32); color: var(--green-forest);
}
.paid-banner b { display: block; font-size: 17px; font-weight: 600; }
.paid-banner span { display: block; font-size: 14px; color: var(--ink-muted); }
.paid-banner svg { flex: none; color: #2E7D52; }
.paid-banner.is-void {
  background: linear-gradient(140deg, rgba(158, 52, 70, .1), rgba(158, 52, 70, .04));
  border-color: rgba(158, 52, 70, .3); color: #7B2A3A;
}
.paid-banner.is-void svg { color: #9E3446; }

/* -- the document ------------------------------------------------------ */
.invoice { font-variant-numeric: tabular-nums; }

.inv-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px;
  align-items: start; padding-bottom: 26px; border-bottom: 2px solid var(--green);
}
.inv-brand img { width: 148px; height: auto; }
.inv-seller { margin-top: 16px; display: grid; gap: 3px; font-size: 13px; line-height: 1.6; color: var(--ink-muted); }
.inv-seller b { font-size: 15px; color: var(--ink); font-weight: 600; }
.inv-lic { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--gold-ink); margin-top: 4px; }

.inv-meta { text-align: right; min-width: 0; }
.inv-no span {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; color: var(--ink-muted);
}
.inv-no b {
  display: block; font-family: var(--serif); font-size: clamp(26px, 3vw, 34px);
  font-weight: 600; color: var(--green); line-height: 1.1; margin-top: 4px;
}
.inv-facts {
  display: grid; grid-template-columns: auto auto; gap: 6px 16px;
  justify-content: end; margin-top: 18px; font-size: 13px;
}
.inv-facts dt { color: var(--ink-muted); }
.inv-facts dd { margin: 0; font-weight: 500; color: var(--ink); }

.inv-status {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.inv-status.is-due  { background: rgba(201, 162, 74, .2); color: var(--gold-sale); }
.inv-status.is-paid { background: rgba(46, 125, 82, .16); color: #206B45; }
.inv-status.is-void { background: rgba(158, 52, 70, .13); color: #7B2A3A; }

.inv-parties {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px; padding: 26px 0; border-bottom: 1px solid var(--surface-rule);
}
.inv-lbl { font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--ink-muted); margin-bottom: 9px; }
.inv-parties b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.inv-parties span { display: block; font-size: 13.5px; line-height: 1.7; color: var(--ink-muted); margin-top: 3px; }

.inv-lines { overflow-x: auto; }
.inv-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.inv-table th {
  text-align: left; padding: 18px 10px 12px; font-size: 10px; font-weight: 700;
  letter-spacing: .18em; color: var(--ink-muted); border-bottom: 1px solid var(--surface-rule);
}
.inv-table th.num, .inv-table td.num { text-align: right; }
.inv-table td { padding: 13px 10px; border-bottom: 1px solid var(--surface-rule); font-size: 14px; }
.inv-table td.num { white-space: nowrap; color: var(--ink-body); }
.inv-table td.strong { font-weight: 600; color: var(--ink); }
.inv-table th:first-child, .inv-table td:first-child { padding-left: 0; }
.inv-table th:last-child, .inv-table td:last-child { padding-right: 0; }

.inv-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inv-item img {
  width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: contain;
  background: var(--surface-tint); flex: none;
}
.inv-item b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.inv-item span { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

.inv-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 30px; padding-top: 24px; align-items: start;
}
.inv-note p { font-size: 13.5px; line-height: 1.7; color: var(--ink-body); margin: 0; }
.inv-totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; margin: 0; }
.inv-totals dt { font-size: 13.5px; color: var(--ink-muted); }
.inv-totals dd { margin: 0; font-size: 13.5px; font-weight: 500; text-align: right; color: var(--ink); }
.inv-totals .grand {
  padding-top: 13px; margin-top: 3px; border-top: 2px solid var(--green);
  font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--green);
}

.inv-legal { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--surface-rule); }
.inv-legal p { font-size: 11.5px; line-height: 1.7; color: var(--ink-muted); margin: 0 0 6px; }

.inv-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--stack); }
.inv-actions .btn { flex: 1 1 auto; justify-content: center; gap: 8px; }

@media (max-width: 720px) {
  .inv-top { grid-template-columns: minmax(0, 1fr); }
  .inv-meta { text-align: left; }
  .inv-facts { justify-content: start; }
  .inv-foot { grid-template-columns: minmax(0, 1fr); }
  .paypanel-mark { margin-left: 0; }
}

/* -- print --------------------------------------------------------------
   What comes out of the printer is the invoice and nothing else: no header,
   no footer, no navigation, no demand for payment, no buttons. Backgrounds
   are dropped because a customer should not spend a cartridge on our green.
   ------------------------------------------------------------------------ */
@media print {
  .header, .footer, .announce, .bottomnav, .totop, .agegate, .drawer, .scrim,
  .mobilenav, .mega, .locsheet, .no-print, .inv-actions, .paypanel, .paid-banner,
  #inv-lookup, .crumbs { display: none !important; }

  .pagehead { display: none !important; }

  body { background: #fff !important; padding: 0 !important; }
  .shell { max-width: none !important; padding: 0 !important; }

  .invoice {
    background: #fff !important; box-shadow: none !important;
    border: none !important; border-radius: 0 !important; padding: 0 !important;
  }
  .inv-table { min-width: 0; }
  .inv-item img { display: none; }        /* ink, and it adds nothing on paper */
  .inv-status { border: 1px solid #999; background: none !important; color: #000 !important; }
  a { text-decoration: none; color: #000 !important; }
  .inv-legal { break-inside: avoid; }
  tr { break-inside: avoid; }
}

/* ==========================================================================
   14. PRODUCT REVIEWS
   The score, the spread and the reviews themselves, plus the form that writes
   one. Everything here is empty until somebody approves a review, which is
   deliberate: the shop publishes a lab panel for every batch, and a review
   wall that filled itself would undo the point of the rest of the page.
   ========================================================================== */

.pdp-reviews { margin-top: clamp(28px, 3.4vw, 48px); }
.rv-wrap {
  display: grid; gap: clamp(24px, 3vw, 44px); margin-top: clamp(20px, 2.4vw, 32px);
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) { .rv-wrap { grid-template-columns: minmax(0, 1fr); } }
/* No approved reviews yet: the score column is not rendered at all, so the
   remaining content takes the full width rather than the narrow first track. */
.rv-wrap.is-solo { grid-template-columns: minmax(0, 1fr); }

/* -- the score ----------------------------------------------------------- */

.rv-score {
  background: var(--surface-field); border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 28px); position: sticky; top: 96px;
}
@media (max-width: 860px) { .rv-score { position: static; } }
.rv-score-n { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1; color: var(--ink); }
.rv-score-of { font-size: 18px; font-weight: 400; color: var(--ink-muted); margin-left: 6px; }
.rv-score-stars { margin-top: 10px; }
.rv-score .meta { margin-top: 6px; }

.rv-stars { letter-spacing: 2px; font-size: 14px; line-height: 1; white-space: nowrap; }
.rv-stars-lg { font-size: 19px; }
.rv-on { color: var(--gold-mid); }
.rv-off { color: rgba(23, 25, 20, .2); }

.rv-bars { margin-top: 18px; display: grid; gap: 7px; }
.rv-bar { display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; gap: 9px; align-items: center; }
.rv-bar-k { font-size: 11.5px; font-weight: 600; color: var(--ink-muted); }
.rv-bar-n { font-size: 11.5px; color: var(--ink-muted); text-align: right; }
.rv-bar-track { height: 6px; border-radius: 99px; background: rgba(23, 25, 20, .1); overflow: hidden; }
.rv-bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--gold-mid); }

/* -- one review ---------------------------------------------------------- */

.rv-item { padding: 22px 0; border-bottom: 1px solid rgba(23, 25, 20, .07); }
.rv-item:first-child { padding-top: 0; }
.rv-item-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-forest); background: rgba(46, 125, 82, .13);
  border-radius: var(--r-pill); padding: 4px 9px;
}
.rv-date { margin-left: auto; font-size: 12px; }
.rv-item-title { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); margin-top: 12px; }
.rv-item-body { font-size: 15.5px; line-height: 1.72; color: var(--ink-body); margin-top: 9px; white-space: pre-wrap; }
.rv-item-who { margin-top: 12px; font-size: 12.5px; }

/* A reply is the shop speaking, so it is indented under the review rather
   than sitting beside it as though it were another customer. */
.rv-item-reply {
  margin-top: 16px; margin-left: clamp(12px, 2vw, 26px);
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface-field); border-left: 3px solid var(--green-forest);
}
.rv-item-reply b { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.rv-item-reply p { font-size: 14.5px; line-height: 1.7; color: var(--ink-body); margin-top: 7px; white-space: pre-wrap; }

.rv-none { margin-top: 4px; font-size: 15px; }

/* -- the form ------------------------------------------------------------ */

.rv-form {
  margin-top: 30px; padding: clamp(20px, 2.4vw, 30px);
  background: var(--surface-field); border-radius: var(--r-lg);
}
.rv-form h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.rv-form > .meta { margin-top: 8px; line-height: 1.65; }
.rv-form .opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.rv-rate { border: 0; padding: 0; margin: 18px 0 0; }
.rv-rate .l { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ink); margin-bottom: 8px; padding: 0; }
.rv-rate-set { display: inline-flex; gap: 4px; }
.rv-rate-star {
  background: none; border: 0; cursor: pointer; padding: 2px 3px; line-height: 1;
  font-size: 27px; color: rgba(23, 25, 20, .22);
  transition: color .15s ease, transform .15s var(--ease);
}
.rv-rate-star[aria-pressed="true"] { color: var(--gold-mid); }
.rv-rate-star:hover { transform: translateY(-2px); }
.rv-rate-star:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 2px; border-radius: 4px; }

/* The honeypot is reachable by nothing a person drives — off-screen rather
   than display:none, because some bots skip what is explicitly hidden. */
.rv-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.rv-form .done, .rv-done {
  font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--green-forest);
}

/* ==========================================================================
   INTERACTION ZOOM
   A product card already zooms its photograph on hover, which is half the
   population. A phone has no hover at all, so the same feedback is bound to
   the press instead: the moment a finger lands, the photograph scales and the
   card settles a fraction. That is what makes a tap feel like it registered
   in the beat before the page actually changes.

   `:active` alone is not enough — Safari on iOS only applies it to elements
   with a touch handler attached, and it is dropped the instant a scroll
   begins. So js/shell.js sets .is-press on pointerdown and clears it on
   pointerup, pointercancel and scroll. Both are declared here: `:active`
   covers keyboard and mouse for free, the class covers touch properly.
   ========================================================================== */

.pcard.is-press,
.pcard:active {
  transform: translateY(-3px) scale(.988);
  transition-duration: .12s;
}
.pcard.is-press .shot img,
.pcard:active .shot img {
  transform: scale(1.1);
  transition-duration: .3s;
}

/* The product page's own photograph, which has no hover state at all. */
.pdp-shot img { transition: transform .5s var(--ease); }
.pdp-shot.is-press img,
.pdp-shot:active img { transform: scale(1.09); }
@media (hover: hover) {
  .pdp-shot:hover img { transform: scale(1.05); }
}

/* Anything else worth pressing: the add button, the rail cards, the tiles. */
.pcard .add.is-press,
.btn.is-press,
.mega-card.is-press,
.tile.is-press,
.brandcard.is-press {
  transform: scale(.97);
  transition-duration: .1s;
}

/* A one-shot pulse when a product is actually taken — added to the bag, or
   favourited. It confirms the action on the thing that was acted on, which is
   more legible on a small screen than a message somewhere else. */
.zoom-pop { animation: cl47ZoomPop .42s var(--ease); }
@keyframes cl47ZoomPop {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* Touch highlights fight the zoom: iOS paints a grey box over the element at
   the same moment, which reads as the interaction rather than the scale. */
.pcard, .pcard .add, .pdp-shot, .mega-card, .tile, .brandcard, .navtile {
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .pcard.is-press, .pcard:active,
  .pcard.is-press .shot img, .pcard:active .shot img,
  .pdp-shot.is-press img, .pdp-shot:active img,
  .pcard .add.is-press, .btn.is-press, .mega-card.is-press,
  .tile.is-press, .brandcard.is-press { transform: none; }
  .zoom-pop { animation: none; }
}

/* --------------------------------------------------------------------------
   HEADER — out of the way going down, back on the way up
   Scrolling up is how a reader says they want to leave the page they are on,
   and the way out is the navigation. So the bar slides off going down and
   returns on the first upward movement, at every width.

   Transformed rather than repositioned: `position: sticky` stays intact, so
   nothing below reflows and the page does not jump by the header's height
   each time it hides.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   PRODUCT CARD — no dead space under the button
   Two separate causes, both of which left a gap below "ADD TO BAG":

   1. Product names run from three words to twelve, so one card in a row set
      the height for all of them. A card with a one-line title was carrying
      119px of empty space; one with a five-line title, none. Clamping the
      title to two lines makes the whole grid uniform and takes roughly 70px
      off the tallest card.

   2. The body is the flex child that grows, and the button had a fixed top
      margin, so whatever height was left over landed underneath it. `auto`
      pins the button to the bottom edge, which is where a call to action
      belongs, and any remaining slack opens above it instead.

   The clamp is visual only — the full name stays in the DOM for screen
   readers and for search, and the product page shows it in full.
   -------------------------------------------------------------------------- */
.pcard h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Always two lines tall, whether the name needs one or two. Clamping alone
     made the cards uniform in a row but left a one-line card slack above its
     button; reserving the second line makes every card in the grid identical,
     so there is no gap to distribute in the first place. 1.12 is the h3
     line-height, so 2.24em is exactly two lines. */
  min-height: 2.24em;
}
.pcard .sub {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard .add { margin-top: auto; }
/* The gap the button gave up when its margin became auto, moved onto whatever
   element precedes it — the lab row on a full card, the price row on a tint. */
.pcard .body > :nth-last-child(2) { margin-bottom: 16px; }
.pcard-tint .body > :nth-last-child(2) { margin-bottom: 13px; }

/* The last of the slack: in a dense rail the potency pill did not fit beside
   the price, so the row wrapped to a second line on some cards and not others
   — a 38px difference that reopened the gap above the button. The row now
   holds one line and the pill takes a smaller size in the dense grids, which
   is the same treatment .pill-batch already gets there. The potency figure is
   kept in full: rounding a published lab number to make it fit would be the
   wrong trade on a site whose premise is the panel. */
.pcard .price-row { flex-wrap: nowrap; }
.pcard .price { flex: 0 0 auto; }
.pcard .price-row .pill-data { min-width: 0; }
.pcard .price-row .pill-data .n {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-clip .pcard .price-row .pill-data,
.grid-products .pcard .price-row .pill-data { font-size: 10.5px; padding: 5px 9px; }
/* Same again for the lab row: a long producer name pushed the COA link onto a
   second line on some cards. The producer is also a link in the subtitle
   above, so clipping the badge here costs nothing. */
.pcard .lab-row { flex-wrap: nowrap; }
.pcard .lab-row .pill-batch {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard .lab-row .coa { flex: 0 0 auto; }

/* ==========================================================================
   THE GOLD WORDMARK
   CANNA 47, set giant into the ground of the three surfaces that carry the
   brand: the title band on every inner page, the homepage hero, and the
   footer.

   Gold leaf rather than grey. Each one is filled with a raking gradient that
   runs from champagne through deep gold and back, so the letterforms catch
   light across their length the way stamped foil does, and outlined in a
   heavier gold hairline that gives the edge its bite. The gradient is what
   stops a large flat area of gold from reading as a solid printed block.

   Sized to fit rather than bled off the edge — the whole wordmark is inside
   its surface, so CANNA 47 reads as a wordmark instead of as a fragment.
   Dropping four characters from the old string is what bought the room: a
   shorter word can be set far larger and still land inside the box.

   The hero is the exception in weight, not in kind: on cream the gold has to
   go several steps darker and heavier, because a champagne tint that reads
   as metal against deep green is invisible against a warm off-white.

   Built from pseudo-elements, so it applies to every page without a change to
   markup, and `content: "..." / ""` carries empty alt text so a screen reader
   passes over it rather than announcing the brand three times a page.
   ========================================================================== */

.pagehead,
.footer { position: relative; overflow: hidden; }

.pagehead::before,
.hero::before,
.footer::before {
  content: none;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  letter-spacing: .04em;
  line-height: 1.26;

  /* Foil: a raking gradient through the glyphs, plus a harder gold edge.
     background-clip carries the fill, so -webkit-text-fill-color has to be
     transparent for it to show; the stroke draws independently of it. */
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .1;
}

.pagehead > *,
.hero > *,
.footer > * { position: relative; z-index: 1; }

/* -- page title band ------------------------------------------------------
   Centred in the band and sized to sit inside it. The mask is a light touch
   on the left only, where the headline starts — enough to keep the type
   clean without dimming the wordmark everywhere else. */
.pagehead::before {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: min(15vw, 210px);
  background-image: linear-gradient(96deg,
      #D8B96A 0%, #C9A24A 34%, #F0DCA4 58%, #B88A32 100%);
  -webkit-text-stroke: 1.7px #C9A24A;
}

/* -- homepage hero --------------------------------------------------------
   Lives in the cream column on the left; the photograph owns the right and is
   opaque, so anything under it would simply be lost. Sized to that column and
   dropped low, under the copy. Much darker gold: on a warm off-white the
   champagne end of the palette has almost no contrast left. */
.hero::before {
  left: var(--bleed);
  bottom: clamp(2px, .6vw, 10px);
  font-size: min(12vw, 132px);
  background-image: linear-gradient(96deg,
      #8A6420 0%, #B0801F 40%, #C9A24A 70%, #8A6420 100%);
  -webkit-text-stroke: 1.9px #8A6420;
}

/* -- footer ---------------------------------------------------------------
   The largest of the three and fully inside the frame, centred low across the
   whole width where the legal line sits. Nothing here is a headline, so it
   takes no mask at all and shows at full strength. */
.footer::before {
  left: 50%;
  bottom: clamp(2px, .6vw, 12px);
  transform: translateX(-50%);
  font-size: min(17vw, 260px);
  background-image: linear-gradient(96deg,
      #D8B96A 0%, #C9A24A 30%, #F0DCA4 56%, #B88A32 100%);
  -webkit-text-stroke: 1.8px #C9A24A;
}

/* On a phone every surface is narrow and the copy runs edge to edge, so the
   wordmark takes the width it can have and steps back a little in strength.
   It still sits whole inside its box. */
@media (max-width: 700px) {
  .pagehead::before {
    font-size: min(19vw, 104px);
    -webkit-text-stroke-width: 1.2px;
  }
  .hero::before {
    left: 50%;
    transform: translateX(-50%);
    font-size: min(20vw, 112px);
    -webkit-text-stroke-width: 1.4px;
  }
  .footer::before {
    font-size: min(21vw, 118px);
    -webkit-text-stroke-width: 1.3px;
  }
}

/* Forced-colours repaints the stroke as real text, which turns a background
   flourish into a giant word laid across the page. */
@media (forced-colors: active) {
  .pagehead::before,
  .hero::before,
  .footer::before { display: none; }
}

@media print {
  .pagehead::before,
  .hero::before,
  .footer::before { display: none; }
}

/* --------------------------------------------------------------------------
   INVOICE — payment steps and long values
   -------------------------------------------------------------------------- */
.pay-steps {
  margin: 0 0 20px; padding: 0 0 0 1.3em; display: grid; gap: 10px;
  font-size: 14.5px; line-height: 1.65; color: rgba(247, 244, 236, .84);
}
.pay-steps li::marker { color: var(--gold-champagne); font-weight: 700; }

/* A bitcoin address has to be checked character by character against the
   wallet before sending, so it takes the whole row instead of being
   ellipsised into a column beside the amount. */
.pay-fact.is-wide { grid-column: 1 / -1; }

/* The bitcoin payment code.
   Dark modules on white, with the four-module quiet margin the encoder draws
   left intact and a white plate under it. The panel behind is near-black, and
   a code that is inverted, tinted, or bled to the edge of its container is one
   a scanner refuses — there is no partial credit here, it either reads or it
   does not. Sized so each module lands on roughly four device pixels, which is
   what a phone camera needs off a screen. */
.pay-qr { margin: 24px 0 0; display: grid; justify-items: center; gap: 12px; }
.pay-qr-code {
  background: #FFFFFF; padding: 10px; border-radius: var(--r-sm);
  width: 218px; max-width: 62vw;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.pay-qr-code svg { display: block; width: 100%; height: auto; }
.pay-qr-cap {
  margin: 0; font-size: 12.5px; line-height: 1.6; text-align: center;
  max-width: 36ch; color: rgba(247, 244, 236, .62);
}
/* The one value on the page that must be readable end to end, so it wraps
   instead of ellipsising. A bech32 address broken over two lines can still be
   checked against the wallet; one cut off at "bc1qmwww..." cannot, and this
   is the field where being unable to check it costs the customer the money.
   min-width:0 lets the flex item shrink at all -- without it the 42 characters
   set a floor that pushed the whole page wider than a 320px phone. */
.pay-fact.is-wide .cf-v {
  font-size: 13.5px; letter-spacing: 0;
  min-width: 0; white-space: normal; word-break: break-all; overflow: visible;
  line-height: 1.45;
}
.pay-fact.is-wide .copyfield { align-items: flex-start; }
.pay-fact.is-wide .cf-b { margin-top: 2px; }
@media (max-width: 560px) { .pay-fact.is-wide .cf-v { font-size: 12px; } }

/* Every other copy field can shrink too; a long handle should ellipsise
   rather than widen the page. */
.copyfield .cf-v { min-width: 0; }

/* A lapsed quote is a caution, not a note — it changes what the customer
   should do, so it does not look like the surrounding copy. */
.paypanel .note-warn {
  background: rgba(180, 98, 60, .16); border: 1px solid rgba(216, 185, 106, .45);
  color: rgba(247, 244, 236, .9);
}
.paypanel .note-warn b { color: var(--gold-pale); }
/* A handle inside a sentence can still be one long unbreakable token — a
   Zelle address, a cashtag — so the steps break rather than widen the page. */
.pay-steps li { overflow-wrap: anywhere; }

/* The product shot before the product resolves. It was the brand mark, so
   every click showed the logo and then swapped to the product — which reads
   as the wrong image loading rather than the right one arriving. A tinted
   frame of the same dimensions holds the space and claims nothing. */
.pdp-shot.is-waiting { background: var(--surface-tint); }
.pdp-shot.is-waiting img { opacity: 0; }
.pdp-shot img { transition: opacity .28s ease; }

/* --------------------------------------------------------------------------
   PRODUCT NAME IN A TABLE
   The listing tables — Exotic shelf, brand pages, gummies, vapes, strains —
   carried names and numbers only. The photograph is the thing being shopped
   for, so it sits beside the name. Real product shots, lazily loaded and
   sized in the markup so a forty-row table does not reflow as they arrive.
   -------------------------------------------------------------------------- */
.tprod {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  color: inherit; text-decoration: none;
}
.tprod img,
.tprod i {
  width: 44px; height: 44px; flex: none; border-radius: 9px;
  background: var(--surface-tint); object-fit: cover;
  border: 1px solid var(--surface-rule);
}
/* Cut-outs are shot on a light ground and read better with room around them. */
.tprod img { object-fit: contain; padding: 2px; }
.tprod span {
  min-width: 0; font-weight: 600; line-height: 1.3;
  text-decoration: underline; text-decoration-color: var(--surface-rule);
  text-underline-offset: 3px;
}
.tprod:hover span { text-decoration-color: var(--gold-mid); color: var(--green-forest); }

@media (max-width: 560px) {
  .tprod { gap: 9px; }
  .tprod img, .tprod i { width: 36px; height: 36px; border-radius: 7px; }
}

/* --------------------------------------------------------------------------
   STATE LICENCE SEALS
   Each state carries a struck seal rather than two letters of plain text.
   The SVG inherits `currentColor`, so the gold lives here and the mark can be
   restyled without regenerating a single page.
   -------------------------------------------------------------------------- */
.seal { color: var(--gold-champagne); display: block; flex: none; }
.state .ab {
  display: block; margin-bottom: 14px;
  filter: drop-shadow(0 6px 18px rgba(7, 23, 13, .45));
}
.state:hover .seal { color: var(--gold-pale); }
.state .seal { transition: color .24s var(--ease), transform .3s var(--ease); }
.state:hover .seal { transform: rotate(-4deg) scale(1.04); }

/* The seal on a state's own page sits opposite the title, and steps out of
   the way entirely on a phone where the head is already full. */
.pagehead.has-badge { position: relative; }
.pagehead-badge {
  position: absolute; top: clamp(24px, 3vw, 44px); right: var(--bleed);
  filter: drop-shadow(0 8px 24px rgba(7, 23, 13, .5));
}
.pagehead-badge .seal { color: var(--gold-champagne); }
@media (max-width: 900px) {
  .pagehead-badge { position: static; margin-bottom: 18px; }
  .pagehead-badge .seal { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .state .seal { transition: none; }
  .state:hover .seal { transform: none; }
}

/* The order floor, stated where the money is. Amber rather than red: the
   basket is not wrong, it is just not finished. */
.minnote {
  margin-top: 12px; padding: 11px 13px; border-radius: var(--r-sm);
  background: rgba(184, 138, 50, .12); border: 1px solid rgba(201, 162, 74, .4);
  color: var(--gold-sale); font-size: 13px; font-weight: 600; line-height: 1.5;
}

/* --------------------------------------------------------------------------
   RETURN TO YOUR ORDER
   A payment made on the hosted Cash App page leaves this site, and that page
   is not ours to put a link back on. So the way back lives here instead.
   -------------------------------------------------------------------------- */
.returnbar {
  position: fixed; left: 50%; bottom: 18px; z-index: 120;
  transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: min(680px, calc(100vw - 28px));
  padding: 13px 16px; border-radius: var(--r-pill);
  background: var(--green); color: var(--cream);
  box-shadow: 0 18px 44px -18px rgba(7, 23, 13, .6);
  transition: transform .38s var(--ease);
  font-size: 13.5px;
}
.returnbar.is-in { transform: translate(-50%, 0); }
.returnbar .rb-t { font-weight: 700; color: var(--gold-champagne); }
.returnbar .rb-s { color: rgba(247, 244, 236, .78); }
.returnbar .rb-a {
  margin-left: auto; flex: none; padding: 8px 15px; border-radius: var(--r-pill);
  background: var(--gold-champagne); color: var(--green);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; white-space: nowrap;
}
.returnbar .rb-a:hover { background: var(--gold-pale); }
.returnbar .rb-x {
  flex: none; background: none; border: 0; color: rgba(247, 244, 236, .6);
  font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer;
}
.returnbar .rb-x:hover { color: var(--cream); }
/* Clear of the bottom navigation on a phone. */
@media (max-width: 860px) {
  .returnbar { bottom: calc(var(--bottomnav-h, 58px) + 14px + env(safe-area-inset-bottom, 0px)); }
  .returnbar .rb-s { display: none; }
}

.backmerchant {
  padding: 16px 17px; border-radius: var(--r-md);
  background: rgba(247, 244, 236, .06); border: 1px solid rgba(216, 185, 106, .26);
}
.backmerchant b { display: block; color: var(--gold-champagne); font-size: 13px;
                  letter-spacing: .04em; margin-bottom: 8px; }
.backmerchant p { margin: 0 0 8px; font-size: 13px; line-height: 1.65;
                  color: rgba(247, 244, 236, .84); }
.backmerchant p:last-child { margin-bottom: 0; }
.backmerchant strong { color: var(--cream); }
.backmerchant .bm-ref { font-size: 12px; color: rgba(247, 244, 236, .62); }
.backmerchant .bm-ref a { color: var(--gold-champagne); text-decoration: underline; }


/* ==========================================================================
   VIRGIN CANNABIS — original identity layer
   Tokens follow the design pack. Hero is a full-bleed cinematic still.
   ========================================================================== */

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { display: block; }
.vc-lockup { display: none; }
.vc-words { display: block; line-height: 1; }
.vc-name { display: block; font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: .10em; color: var(--green); }
.vc-sub { display: block; font-family: var(--sans); font-weight: 600; font-size: 8.5px; letter-spacing: .42em; color: var(--gold); margin-top: 4px; }
.footer-logo .vc-name, .agegate .vc-name { color: var(--cream); }
.footer-logo .vc-sub, .agegate .vc-sub { color: var(--gold-champagne); }
.footer-logo .vc-lockup path[fill="#244A30"] { fill: #83B94D; }

.header { background: rgba(247,244,234,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.header.is-stuck { box-shadow: 0 1px 0 rgba(16,43,32,.09), 0 12px 30px -26px rgba(16,43,32,.45); }

/* Full-bleed cinematic hero */
.hero.hero-cinematic {
  margin: 0;
  min-height: min(92vh, 920px);
  background: #0C2119;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.hero-cinematic .hero-grid {
  position: relative;
  z-index: 2;
  min-height: min(92vh, 920px);
  grid-template-columns: 1fr;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 110px) var(--bleed) clamp(56px, 7vw, 96px);
}
.hero-cinematic .hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-cinematic .hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%;
  border-radius: 0;
}
.hero-cinematic .hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,33,25,.88) 0%, rgba(12,33,25,.62) 38%, rgba(12,33,25,.18) 68%, rgba(12,33,25,.35) 100%),
    linear-gradient(180deg, rgba(16,43,32,.2) 0%, rgba(12,33,25,.45) 100%);
}
.hero-cinematic .hero-copy {
  max-width: 640px;
  padding: 0;
  color: #F7F4EA;
}
.hero-cinematic .hero-copy h1,
.hero-cinematic .hero-copy .d1 { color: #F7F4EA; margin-top: 18px; }
.hero-cinematic .hero-copy .lede { color: rgba(247,244,234,.78); }
.hero-cinematic .eyebrow { color: #D8B66A; letter-spacing: .24em; }
.hero-cinematic .hero-art { display: none; }
.hero-cinematic .hero-dots { display: none; }
.hero-cinematic .hero-chip {
  position: absolute; right: var(--bleed); bottom: clamp(28px, 5vw, 64px);
  left: auto; width: clamp(120px, 15vw, 164px); height: clamp(120px, 15vw, 164px);
  border-radius: 999px; padding: 0;
  display: grid; place-items: center; text-align: center;
  background: #FFFDF8; animation: none;
}
.hero-cinematic .hero-chip .k { font-size: 8px; letter-spacing: .26em; color: #C59A45; text-shadow: none; }
.hero-cinematic .hero-chip .t { font-size: clamp(30px, 4vw, 40px); font-weight: 400; color: #102B20; margin: 7px 0 5px; }
.hero-cinematic .hero-chip .m { border: 0; padding: 0; margin: 0; font-size: 8px; letter-spacing: .18em; line-height: 1.4; color: rgba(23,27,24,.5); }
.hero-cinematic .hero-chip .seal { display: none; }
.hero-cinematic .btn-glass {
  border: 1px solid rgba(197,154,69,.65);
  background: rgba(255,253,248,.12);
  color: #F7F4EA;
}
.hero-cinematic .pill {
  background: rgba(247,244,234,.1);
  color: #F7F4EA;
  border-color: rgba(247,244,234,.18);
}

.ghost47 { display: none !important; }

@media (max-width: 820px) {
  .hero.hero-cinematic { min-height: 78vh; }
  .hero-cinematic .hero-grid { min-height: 78vh; padding-top: 48px; }
  .hero-cinematic .hero-chip { width: 108px; height: 108px; right: 16px; bottom: 16px; }
  .hero-cinematic .hero-bg img { object-position: 70% 40%; }
}

@media (max-width: 1280px) {
  .nav > a[href*="cat="],
  .nav > a[href="vapes.html"],
  .nav > a[href="brands.html"],
  .nav > a[href="about.html"] { display: none; }
}