/* ==========================================================================
   Leaf World Ceylon — design system

   Editorial, botanical, restrained. The rules that keep it from drifting back
   into template territory:

     · Corners are square or nearly so. Nothing is a rounded card.
     · Shadows are almost absent. Separation comes from hairlines and space.
     · Gold is a hairline, an icon, a small label — never a large fill.
     · Photography carries the page. Chrome gets out of its way.
     · One serif for voice, one sans for everything functional.

   Contrast note: --gold (#B58A3A) is 2.89:1 on ivory and FAILS WCAG for text.
   It is a decorative token only — borders, rules, icons, button fills. For any
   gold-coloured text use --gold-ink (#8E6926), which clears AA on both ivory
   (4.59:1) and white (5.00:1).
   ========================================================================== */

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* Brand palette — as specified. */
  --tea-deep:   #173F35;
  --tea-estate: #315E4B;
  --tea-fresh:  #6F8F5E;
  --gold:       #B58A3A;
  --gold-soft:  #D8BF82;
  --ivory:      #F8F5ED;
  --white:      #FFFFFF;
  --warm-grey:  #E7E4DD;
  --charcoal:   #252925;

  /* ---- Tonal family -------------------------------------------------------
     One green, stepped. Every value is either an existing brand colour or a
     tonal step derived from one, so depth between sections comes from shade
     rather than from new hues. The older names below are kept as aliases, so
     every existing rule in this file goes on working untouched. */
  --forest-950:     #0A1F19;   /* footer */
  --forest-900:     #0E2A23;   /* heritage, newsletter */
  --forest-800:     #173F35;   /* the brand green */
  --forest-700:     #245046;   /* hover, hairlines on dark */
  --botanical:      #315E4B;
  --sage:           #6F8F5E;
  --cream:          #FDFBF5;   /* brewing guide */
  --pale-botanical: #F2F6F0;   /* why-choose gradient end; chosen so gold-muted text clears AA anywhere on it */
  --gold-muted:     #8E6926;   /* the only gold safe for text */
  --text-dark:      #252925;
  --text-light:     #F1EEE4;

  /* Derived — accessibility and depth. */
  --gold-ink:    #8E6926;   /* the only gold safe for text */
  --tea-deeper:  #0E2A23;   /* footer base, hero scrim */
  --ink:         var(--charcoal);
  --ink-muted:   #5C635C;
  --ink-faint:   #8A908A;
  --line:        #DDD9CF;
  --line-soft:   #EAE6DC;
  --on-dark:     #F1EEE4;
  --on-dark-mute:#B3BDB2;

  /* Status */
  --ok: #2F6B4F;  --ok-bg: #ECF3EE;
  --warn: #8A6A24; --warn-bg: #FAF4E6;
  --err: #9A3B32;  --err-bg: #F9EDEB;

  /* Type */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Measure and rhythm */
  /* Four widths, not one. A wide monitor gets used for imagery and cards while
     running text keeps a sane measure — the width goes to the pictures, never
     to the line length. */
  --shell-wide:   1560px;   /* product + category grids, footer */
  --shell:        1320px;   /* section headings, editorial */
  --shell-narrow: 760px;    /* long-form prose */
  --gutter: clamp(1.125rem, 4vw, 4.5rem);   /* 18px phone -> 72px desktop */
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* Shape — deliberately minimal */
  --r-none: 0;
  --r-xs: 2px;
  --r-sm: 3px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --header-h: 108px;
}

/* --------------------------------------------------------------- baseline */
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-synthesis-weight: none;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--tea-deep);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { text-wrap: pretty; }
strong, b { font-weight: 600; }

/* The small uppercase label that sets the editorial tone. */
.eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: block;
}
.on-dark .eyebrow, .section--dark .eyebrow { color: var(--gold-soft); }

.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color: var(--ink-muted);
  max-width: 60ch;
}
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: .875rem; }
.tiny  { font-size: .78rem; }

/* ------------------------------------------------------------ layout ----- */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.shell-narrow { width: min(100% - (var(--gutter) * 2), var(--shell-narrow)); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--ivory { background: var(--ivory); }
.section--white { background: var(--white); }
.section--grey  { background: var(--warm-grey); }
.section--dark  { background: var(--tea-deep); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark .lede, .section--dark .muted { color: var(--on-dark-mute); }

/* Section heading block — max 62ch keeps it editorial, not marketing. */
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head .eyebrow { margin-bottom: .9rem; }
.section-head p { margin-top: 1rem; color: var(--ink-muted); }
.section--dark .section-head p { color: var(--on-dark-mute); }

.section-head--center { margin-inline: auto; text-align: center; }

/* A heading with a hairline rule running off to the side. */
.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.head-row .section-head { margin-bottom: 0; }

.rule-gold {
  height: 1px; border: 0; background: var(--gold); opacity: .5; margin: 0;
}

.stack > * + * { margin-top: var(--flow, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.25rem; }
.hide { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- buttons */
/* Square-ish, hairline, letter-spaced. Nothing pill-shaped except the cart
   badge — pills read as app UI, not as a tea house. */
.btn {
  --btn-bg: var(--tea-deep);
  --btn-fg: var(--ivory);
  --btn-bd: var(--tea-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-none);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
.btn:hover { --btn-bg: var(--tea-estate); --btn-bd: var(--tea-estate); }

.btn--gold {
  --btn-bg: var(--gold); --btn-fg: var(--charcoal); --btn-bd: var(--gold);
}
.btn--gold:hover { --btn-bg: var(--gold-soft); --btn-bd: var(--gold-soft); }

.btn--outline {
  --btn-bg: transparent; --btn-fg: var(--tea-deep); --btn-bd: var(--tea-deep);
}
.btn--outline:hover { --btn-bg: var(--tea-deep); --btn-fg: var(--ivory); }

.btn--light {
  --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: rgba(241,238,228,.5);
}
.btn--light:hover { --btn-bg: var(--on-dark); --btn-fg: var(--tea-deep); --btn-bd: var(--on-dark); }

.btn--quiet {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line);
}
.btn--quiet:hover { --btn-bd: var(--tea-deep); --btn-bg: transparent; }

.btn--sm { padding: .7rem 1.25rem; font-size: .7rem; }
.btn--lg { padding: 1.1rem 2.4rem; font-size: .8rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

/* Text link with a gold underline that draws in on hover. */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  color: var(--gold-ink); position: relative; padding-bottom: .3rem;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow .ico { transition: translate .35s var(--ease-out); }
.link-arrow:hover .ico { translate: 4px 0; }
.on-dark .link-arrow, .section--dark .link-arrow { color: var(--gold-soft); }

.ico { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

/* ----------------------------------------------------------------- header */
/* The announcement bar lives inside the header block so the two move as one.
   It keeps its own solid band even over a hero — a deliberate strip reads
   better there than a translucent one. */
.announce {
  background: var(--tea-deeper);
  color: var(--gold-soft);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: .7rem 1rem;
}

.site-header {
  position: sticky; top: 0; z-index: 80;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
/* Over a hero: fixed from the start, transparent until scrolled. Fixed rather
   than absolute-then-fixed, because switching position on scroll makes the bar
   jump by its own height. */
.site-header.is-over-hero {
  position: fixed; top: 0; left: 0; right: 0;
  /* A translucent deep-green band rather than fully transparent.
     Over a sunrise sky, white nav links measured 1.36:1 — unreadable and a
     clear WCAG failure. At 58% the photograph still reads through it while the
     navigation clears AA. No blur: a frosted panel would fight the editorial
     direction, and this is a flat band, not glassmorphism. */
  background: rgba(23, 63, 53, .66);
  border-bottom: 1px solid rgba(216, 191, 130, .16);
}
.site-header.is-over-hero .nav > a,
.site-header.is-over-hero .nav .has-menu > a,
.site-header.is-over-hero .icon-btn { color: var(--on-dark); }
.site-header.is-over-hero .brand-name { color: var(--on-dark); }
.site-header.is-over-hero .brand-sub  { color: var(--gold-soft); }
.site-header.is-over-hero.is-stuck {
  background: var(--ivory);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(23,63,53,.06);
}
.site-header.is-over-hero.is-stuck .nav > a,
.site-header.is-over-hero.is-stuck .nav .has-menu > a,
.site-header.is-over-hero.is-stuck .icon-btn { color: var(--ink-muted); }
.site-header.is-over-hero.is-stuck .brand-name { color: var(--tea-deep); }
.site-header.is-over-hero.is-stuck .brand-sub  { color: var(--gold-ink); }

/* The masthead spans the full screen while page content stays in the 1320px
   shell — on a wide monitor the centred shell left ~270px of dead air either
   side of the logo and the cart. Overridden here rather than by dropping
   `.shell` from the markup, so --gutter stays the single source of truth for
   the edge margin and mobile is unaffected (there the gutter already wins). */
.header-bar {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--header-h);
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--gutter);
}

/* The official logo is a stacked square lockup — leaf above wordmark — and the
   wordmark is only 27% of its height. Below about 64px the lettering stops
   being readable, which is why the header is taller than a typical one. */
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; position: relative; }
.brand-logo { height: 78px; width: auto; display: block; }

/* Over a hero, the white-wordmark logo shows until the header solidifies,
   then the green one takes over. Both are stacked so neither reflows. */
.brand-logo--over, .brand-logo--solid { transition: opacity .4s var(--ease); }
.brand-logo--solid { position: absolute; left: 0; top: 0; opacity: 0; }
.site-header.is-over-hero.is-stuck .brand-logo--over  { opacity: 0; }
.site-header.is-over-hero.is-stuck .brand-logo--solid { opacity: 1; }

.brand-logo--footer { height: 88px; width: auto; margin-bottom: 1.25rem; }

/* Legacy text lockup — kept for the admin panel, which still uses it. */
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--serif); font-weight: 600; font-size: 1.32rem;
  letter-spacing: .01em; color: var(--tea-deep);
  transition: color .4s var(--ease);
}
.brand-sub {
  font-family: var(--sans); font-size: .54rem; font-weight: 600;
  letter-spacing: .38em; color: var(--gold-ink); margin-top: .35rem;
  transition: color .4s var(--ease);
}

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav > a, .nav .has-menu > a {
  position: relative; display: block;
  padding: .6rem .95rem;
  font-size: .74rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted); text-decoration: none;
  transition: color .3s var(--ease);
}
.nav > a:hover, .nav .has-menu > a:hover { color: var(--tea-deep); }
.site-header.is-over-hero .nav > a:hover { color: var(--gold-soft); }
.nav a::after {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .35rem;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: center;
  transition: transform .4s var(--ease-out);
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--tea-deep); }

.header-actions { display: flex; align-items: center; gap: .2rem; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px;
  color: var(--ink-muted); text-decoration: none; position: relative;
  transition: color .3s var(--ease);
}
.icon-btn:hover { color: var(--gold-ink); }
.icon-btn .ico { width: 19px; height: 19px; }
.cart-count {
  position: absolute; top: 5px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--gold); color: var(--charcoal);
  font-size: .62rem; font-weight: 700; line-height: 1;
}
.cart-count[data-count="0"] { display: none; }
.menu-toggle { display: none; }

/* Shop dropdown — the five collections only. */
.has-menu { position: relative; }
.submenu {
  position: absolute; top: 100%; left: 50%;
  min-width: 230px; padding: .5rem;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(23,63,53,.10);
  opacity: 0; visibility: hidden; translate: -50% 8px;
  transition: opacity .25s var(--ease), translate .25s var(--ease), visibility .25s;
}
.has-menu:hover .submenu, .has-menu:focus-within .submenu {
  opacity: 1; visibility: visible; translate: -50% 0;
}
.submenu a {
  display: block; padding: .6rem .85rem;
  font-size: .8rem; letter-spacing: .05em; color: var(--ink);
  text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease);
}
.submenu a:hover { background: var(--ivory); color: var(--gold-ink); }
.submenu a::after { display: none; }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: min(86vh, 820px);
  display: flex; align-items: flex-end;
  background: var(--tea-deep);
  overflow: hidden;
  isolation: isolate;
}
/* Without a photograph there is nothing to look at in the upper two-thirds,
   so the hero shortens and the copy centres. A tall empty band reads as a
   missing asset; a shorter balanced one reads as a decision. */
.hero--noimage {
  min-height: min(62vh, 580px);
  align-items: center;
}
.hero--noimage .hero-inner { padding-block: clamp(3.5rem, 7vw, 5rem); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
}
/* Scrim.
   Two layers rather than one flat wash: a vertical gradient that is strong
   only where the copy sits, plus a soft horizontal one from the left. That
   keeps the headline at AA contrast while leaving the sunrise, the mist and
   the terraces on the right clearly visible — a single heavy overlay reads as
   "dark green box" and throws away the photograph you paid for. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(14,42,35,.80) 0%, rgba(14,42,35,.48) 36%, rgba(14,42,35,.12) 64%, rgba(14,42,35,0) 82%),
    linear-gradient(to top, rgba(14,42,35,.80) 0%, rgba(14,42,35,.34) 34%, rgba(14,42,35,.06) 62%, rgba(14,42,35,.30) 100%);
}
/* Without a photograph the scrim would only mute the placeholder, so drop the
   horizontal pass and keep the simple vertical one. */
.hero--noimage::after {
  background:
    linear-gradient(to top, rgba(14,42,35,.92) 0%, rgba(14,42,35,.55) 38%, rgba(14,42,35,.18) 70%, rgba(14,42,35,.30) 100%);
}
/* `.shell` sets margin-inline:auto, so a max-width here CENTRED the whole
   text block instead of holding it to the left edge — on a 1856px screen it
   started 292px right of the logo and of every heading further down the page.
   Keep the shell full width and cap the children instead, so the hero lines
   up with the masthead and with "Shop by collection" below it. */
.hero-inner {
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-top: calc(var(--header-h) + 3rem);
}
.hero-inner > * { max-width: 46rem; }
.hero h1 { color: var(--white); margin-top: 1.25rem; }
/* Near-white, not gold.
   Gold-soft measures only ~2.6:1 against the bright sky at this height — it is
   a beautiful colour on the deep-green sections and a liability over a sunrise
   photograph. Gold stays where it belongs on the hero: the primary button,
   which carries its own solid fill. */
.hero .eyebrow { color: rgba(255,255,255,.92); }
.hero-lede {
  color: rgba(241,238,228,.88);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  margin-top: 1.5rem; max-width: 46ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.5rem; }

/* Fallback when no photograph has been supplied: a deep estate-green field
   with the leaf mark watermarked. Deliberate, not broken-looking. */
.hero-media--placeholder {
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(111,143,94,.30), transparent 60%),
    radial-gradient(90% 70% at 85% 80%, rgba(49,94,75,.55), transparent 65%),
    linear-gradient(160deg, #1D4C40, #0E2A23);
}
.hero-media--placeholder::before {
  content: ""; position: absolute; inset: 0;
  background-image: none;
  background-size: 230px 268px;
  opacity: .10;
  mask-image: linear-gradient(115deg, transparent 30%, #000 100%);
}

/* --------------------------------------------------------- trust strip --- */
/* Inline, hairline-separated. Explicitly NOT four feature cards. */
.trust {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.trust-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.trust-item {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.5rem 1.75rem;
  border-left: 1px solid var(--line-soft);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-item .ico { width: 20px; height: 20px; color: var(--gold); }

/* ------------------------------------------------------- collection grid  */
/* Asymmetric by design: Tea anchors, the rest balance around it. */
.collections {
  display: grid;
  gap: clamp(.6rem, 1.2vw, 1rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(215px, auto);
}
/* Tea anchors the composition at double size. With five collections the
   remaining four fill the right-hand half exactly. */
.collections .tile:first-child { grid-column: span 2; grid-row: span 2; }

/* With four, the last tile widens to close the hole under the third. */
.collections--four .tile:last-child { grid-column: span 2; }

.tile {
  position: relative; display: flex; align-items: flex-end;
  min-height: 210px; padding: 1.75rem;
  overflow: hidden; isolation: isolate;
  text-decoration: none; color: var(--white);
  background: var(--tea-estate);
}
.tile-media { position: absolute; inset: 0; z-index: -2; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(14,42,35,.88) 5%, rgba(14,42,35,.30) 55%, rgba(14,42,35,.10) 100%);
  transition: background .5s var(--ease);
}
.tile:hover::after {
  background: linear-gradient(to top, rgba(14,42,35,.92) 5%, rgba(14,42,35,.45) 60%, rgba(14,42,35,.20) 100%);
}
.tile-media img { transition: scale .8s var(--ease-out); }
.tile:hover .tile-media img { scale: 1.045; }

.tile-body { position: relative; }
.tile h3 {
  color: var(--white); font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: .01em;
}
.collections .tile:first-child h3 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.tile p {
  color: rgba(241,238,228,.82); font-size: .88rem;
  margin-top: .4rem; max-width: 34ch;
}
.tile .link-arrow { color: var(--gold-soft); margin-top: 1rem; }

/* Placeholder tint per collection, used until real photography arrives. */
.tile-media--ph { background: linear-gradient(155deg, var(--tea-estate), var(--tea-deeper)); }
.tile-media--ph[data-tone="herbal"]  { background: linear-gradient(155deg, #4A7355, var(--tea-deeper)); }
.tile-media--ph[data-tone="coffee"]  { background: linear-gradient(155deg, #4A3B2A, #241C14); }
.tile-media--ph[data-tone="spices"]  { background: linear-gradient(155deg, #7A5A2A, #33240F); }
.tile-media--ph[data-tone="gift"]    { background: linear-gradient(155deg, #5A4A6B, #241D2C); }
.tile-media--ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: none;
  background-size: 150px 175px;
  background-position: right -30px bottom -40px;
  background-repeat: no-repeat;
  opacity: .16;
}

/* --------------------------------------------------------- product cards  */
/* Photography first. No shadow, hairline only, square corners. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem) clamp(.85rem, 1.6vw, 1.6rem);
}
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.product-card { display: flex; flex-direction: column; background: transparent; }
.product-media {
  position: relative;
  aspect-ratio: 4 / 5;              /* fixed, so nothing shifts on load */
  overflow: hidden;
  background: var(--warm-grey);
  border: 1px solid var(--line-soft);
  display: block;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease-out); }
.product-card:hover .product-media img { scale: 1.04; }

/* One branded placeholder system — never pretends to be the product. */
.product-media--ph {
  display: grid; place-items: center;
  background:
    radial-gradient(80% 60% at 50% 35%, rgba(181,138,58,.10), transparent 70%),
    linear-gradient(165deg, #F1EDE2, #E3DED0);
}
.product-media--ph svg { width: 38%; height: auto; opacity: .34; }
.brand-logo.brand-logo--ph { width: 40%; height: auto; max-width: 180px; opacity: .4; margin: 0 auto; }

.product-badge {
  position: absolute; top: 0; left: 0;
  padding: .4rem .7rem;
  background: var(--ivory);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-size: .6rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-ink);
}

.product-body { padding-top: .95rem; display: flex; flex-direction: column; flex: 1; }
.product-cat {
  font-size: .62rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.product-name {
  font-family: var(--serif); font-size: 1.22rem; font-weight: 500;
  line-height: 1.2; margin-top: .35rem;
}
.product-name a { text-decoration: none; color: var(--tea-deep); transition: color .3s var(--ease); }
.product-name a:hover { color: var(--gold-ink); }
.product-note {
  font-size: .82rem; color: var(--ink-muted); margin-top: .4rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Two letter-spaced uppercase runs in a ~169px card at 390px. "Price on
   request" is nowrap (it inherits .price) and was pushing Enquire clean off
   the card, where `overflow-x: clip` silently cut it. Allow the row to wrap. */
.product-foot {
  margin-top: auto; padding-top: .85rem;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .3rem .75rem; flex-wrap: wrap;
}
.price { font-size: .98rem; font-weight: 600; color: var(--tea-deep); white-space: nowrap; }
.price small { font-weight: 400; color: var(--ink-faint); font-size: .74rem; }
.price--tbd {
  /* A phrase, not a figure — it may wrap where a real price must not. */
  white-space: normal;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-ink);
}
.product-action {
  font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted); background: none; border: 0; padding: 0;
  position: relative; padding-bottom: .25rem; text-decoration: none;
  transition: color .3s var(--ease);
}
.product-action::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.product-card:hover .product-action { color: var(--gold-ink); }
.product-card:hover .product-action::after { transform: scaleX(1); }

/* ------------------------------------------------------------ shop page -- */
.page-head { background: var(--white); border-bottom: 1px solid var(--line); }
.page-head-inner { padding-block: clamp(2rem, 4vw, 3.25rem); }
.page-head h1 { margin-top: .75rem; }
.page-head .lede { margin-top: 1rem; }

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  font-size: .74rem; color: var(--ink-faint);
}
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-ink); }

/* Collection tabs on the shop page. The taxonomy sidebar is still gone, but a
   customer landing on /shop.php now has a visible way into the five shelves
   instead of an undifferentiated wall of every product. */
.collection-nav {
  display: flex; flex-wrap: wrap; gap: .35rem 1.75rem;
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.collection-nav a {
  position: relative;
  padding: .45rem 0;
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink-muted);
  transition: color .3s var(--ease);
}
.collection-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.collection-nav a:hover { color: var(--tea-deep); }
.collection-nav a:hover::after,
.collection-nav a.is-active::after { transform: scaleX(1); }
.collection-nav a.is-active { color: var(--tea-deep); }

/* Subcategory row — one level below the collection tabs, so it is quieter:
   sentence case rather than uppercase, lighter weight, and each carries its
   count so the shelf size is visible before you click. */
.subcat-nav {
  display: flex; flex-wrap: wrap; gap: .5rem .5rem;
  margin-top: 1rem;
}
.subcat-nav a {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .4rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 500;
  color: var(--ink-muted); text-decoration: none;
  background: var(--white);
  transition: border-color .3s var(--ease), color .3s var(--ease),
              background .3s var(--ease);
}
.subcat-nav a em {
  font-style: normal; font-size: .68rem; color: var(--ink-faint);
}
.subcat-nav a:hover { border-color: var(--gold); color: var(--tea-deep); }
.subcat-nav a.is-active {
  background: var(--tea-deep); border-color: var(--tea-deep); color: var(--on-dark);
}
.subcat-nav a.is-active em { color: var(--gold-soft); }

@media (max-width: 640px) {
  .subcat-nav {
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; padding-bottom: .25rem;
  }
  .subcat-nav::-webkit-scrollbar { display: none; }
  .subcat-nav a { white-space: nowrap; }
}

@media (max-width: 640px) {
  /* Scroll sideways rather than stacking into a tall block that pushes the
     products below the fold. */
  .collection-nav {
    flex-wrap: nowrap; overflow-x: auto; gap: 1.25rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .collection-nav::-webkit-scrollbar { display: none; }
  .collection-nav a { white-space: nowrap; }
}
.breadcrumb span[aria-hidden] { color: var(--line); }

/* Utility row replaces the old sidebar entirely. */
.section--listing { padding-top: clamp(1.75rem, 3vw, 2.5rem); }

.shop-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.shop-bar__count { font-size: .78rem; color: var(--ink-faint); letter-spacing: .04em; }
.shop-bar__spacer { flex: 1; }

.shop-search { position: relative; flex: 0 1 280px; }
.shop-search .ico {
  position: absolute; left: .75rem; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none;
}
.shop-search input {
  width: 100%; padding: .62rem .9rem .62rem 2.35rem;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--white); font-size: .85rem;
  transition: border-color .25s var(--ease);
}
.shop-search input:focus { outline: none; border-color: var(--gold); }

.bar-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .62rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--white);
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); transition: border-color .25s var(--ease);
}
.bar-btn:hover { border-color: var(--tea-deep); }
.bar-btn .ico { width: 15px; height: 15px; }
.bar-btn[aria-expanded="true"] { border-color: var(--tea-deep); }

.bar-select {
  appearance: none;
  padding: .62rem 2.2rem .62rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235C635C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.bar-select:focus { outline: none; border-color: var(--gold); }

/* Filter drawer — desktop side panel, mobile bottom sheet. */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(14,42,35,.42);
  opacity: 0; visibility: hidden; z-index: 90;
  transition: opacity .35s var(--ease), visibility .35s;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(380px, 90vw);
  background: var(--white);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  translate: 100% 0;
  transition: translate .4s var(--ease-out);
}
.drawer.is-open { translate: 0; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.35rem var(--gutter); border-bottom: 1px solid var(--line);
}
.drawer__head h2 { font-size: 1.3rem; }
.drawer__body { padding: 1.5rem var(--gutter); overflow-y: auto; flex: 1; }
.drawer__foot {
  padding: 1.15rem var(--gutter); border-top: 1px solid var(--line);
  display: flex; gap: .75rem;
}
.filter-group + .filter-group { margin-top: 2rem; }
.filter-group h3 {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: .85rem;
}
.filter-opt { display: block; padding: .1rem 0; }
.filter-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-opt span {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .55rem 0; font-size: .9rem; color: var(--ink-muted);
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer; transition: color .2s var(--ease);
}
.filter-opt span::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto; order: -1;
  border: 1px solid var(--line); background: var(--white);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.filter-opt input:checked + span { color: var(--tea-deep); font-weight: 500; }
.filter-opt input:checked + span::before { background: var(--gold); border-color: var(--gold); }
.filter-opt input:focus-visible + span::before { outline: 2px solid var(--gold); outline-offset: 2px; }
.filter-opt .n { font-size: .74rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.active-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .7rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: .72rem; color: var(--ink-muted); text-decoration: none;
}
.chip:hover { border-color: var(--tea-deep); color: var(--tea-deep); }
.chip .ico { width: 12px; height: 12px; }

/* --------------------------------------------------------- product page -- */
.product-layout {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.product-hero-media {
  aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--warm-grey);
  position: sticky; top: calc(var(--header-h) + 1.5rem);
}
.product-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.variant-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.variant-opt { position: relative; }
.variant-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.variant-opt span {
  display: block; padding: .65rem 1.15rem;
  border: 1px solid var(--line); background: var(--white);
  font-size: .82rem; letter-spacing: .04em;
  transition: all .25s var(--ease);
}
.variant-opt input:checked + span {
  border-color: var(--tea-deep); background: var(--tea-deep); color: var(--ivory);
}
.variant-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); background: var(--white);
}
.qty button { width: 42px; height: 46px; font-size: 1rem; color: var(--ink-muted); }
.qty button:hover { color: var(--tea-deep); background: var(--ivory); }
.qty input {
  width: 46px; height: 46px; text-align: center; border: 0; background: none;
  font-weight: 600; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.spec-list { margin-top: 2rem; border-top: 1px solid var(--line); }
.spec-list div {
  display: flex; gap: 1.5rem; justify-content: space-between;
  padding: .85rem 0; border-bottom: 1px solid var(--line-soft); font-size: .88rem;
}
.spec-list dt { color: var(--ink-faint); letter-spacing: .04em; }
.spec-list dd { text-align: right; color: var(--ink); }

/* ------------------------------------------------------------- editorial - */
/* Asymmetric image + text. The signature layout of the whole site. */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.editorial--reverse .editorial__media { order: 2; }
.editorial__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--tea-estate);
}
.editorial__media img { width: 100%; height: 100%; object-fit: cover; }
.editorial__media--tall { aspect-ratio: 3 / 4; }
.editorial__body { max-width: 46ch; }
.editorial__body p { margin-top: 1.25rem; color: var(--ink-muted); }
.section--dark .editorial__body p { color: var(--on-dark-mute); }
.editorial__body .btn, .editorial__body .link-arrow { margin-top: 2rem; }

/* Gold hairline frame, used sparingly on editorial imagery. */
.framed { position: relative; }
.framed::after {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(216,191,130,.45); pointer-events: none;
}

.pull-quote {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.32; color: var(--tea-deep); font-weight: 500;
  border-left: 2px solid var(--gold); padding-left: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 34ch;
}
.section--dark .pull-quote { color: var(--on-dark); }

/* ------------------------------------------------------------ newsletter - */
.newsletter {
  background: var(--tea-deep); color: var(--on-dark);
}
.newsletter-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding-block: clamp(3rem, 6vw, 4.75rem);
}
.newsletter h2 { color: var(--on-dark); }
.newsletter p { color: var(--on-dark-mute); margin-top: .9rem; max-width: 42ch; }
.newsletter-form { display: flex; gap: 0; border-bottom: 1px solid rgba(216,191,130,.5); }
.newsletter-form input {
  flex: 1; min-width: 0; padding: .95rem .25rem;
  background: transparent; border: 0; color: var(--on-dark);
  font-size: .95rem;
}
.newsletter-form input::placeholder { color: rgba(179,189,178,.75); }
.newsletter-form input:focus { outline: none; }
.newsletter-form button {
  padding: .95rem 1.4rem; background: transparent; color: var(--gold-soft);
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: color .25s var(--ease);
}
.newsletter-form button:hover { color: var(--white); }

/* ---------------------------------------------------------------- footer - */
.site-footer { background: var(--tea-deeper); color: var(--on-dark-mute); margin-top: auto; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer-brand .brand-name { color: var(--on-dark); font-size: 1.3rem; }
.footer-brand .brand-sub { color: var(--gold-soft); }
.footer-brand p { font-size: .88rem; margin-top: 1.1rem; max-width: 34ch; line-height: 1.7; }

.site-footer h4 {
  font-family: var(--sans); font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 1.15rem;
}
.site-footer li { padding: .3rem 0; }
.site-footer a { color: var(--on-dark-mute); text-decoration: none; font-size: .88rem; transition: color .25s var(--ease); }
.site-footer a:hover { color: var(--gold-soft); }

.social-row { display: flex; gap: .5rem; margin-top: 1.75rem; }
.social-link {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(216,191,130,.28);
  color: var(--on-dark-mute);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.social-link:hover { border-color: var(--gold); color: var(--gold-soft); }
.social-link svg { width: 17px; height: 17px; }

.footer-bottom {
  border-top: 1px solid rgba(241,238,228,.10);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
  font-size: .78rem;
}
.footer-bottom a { font-size: .78rem; }

.pay-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pay-row .pay-label {
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(179,189,178,.7);
}
.pay-mark {
  display: inline-grid; place-items: center;
  height: 26px; padding: 0 .5rem;
  background: rgba(241,238,228,.94);
  border-radius: var(--r-xs);
}
.pay-mark svg { height: 15px; width: auto; }

/* ----------------------------------------------------------------- forms - */
.field { margin-bottom: 1.25rem; }
.field label {
  display: block; font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .5rem;
}
.field .req { color: var(--err); }
.input, .select, .textarea {
  width: 100%; padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--white); font-size: .95rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(181,138,58,.14);
}
.textarea { min-height: 130px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235C635C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem;
}
.field-error { color: var(--err); font-size: .78rem; margin-top: .4rem; }
.field-hint { color: var(--ink-faint); font-size: .78rem; margin-top: .4rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }

/* --------------------------------------------------------------- notices - */
.notice {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem 1.2rem; font-size: .9rem;
  border: 1px solid transparent; border-left-width: 2px;
  margin-bottom: 1.5rem;
}
.notice .ico { width: 17px; height: 17px; margin-top: 3px; }
.notice--ok   { background: var(--ok-bg);   color: #234E3A; border-color: #CBE0D4; border-left-color: var(--ok); }
.notice--warn { background: var(--warn-bg); color: #6E551D; border-color: #EADFC2; border-left-color: var(--gold); }
.notice--err  { background: var(--err-bg);  color: #7B2F28; border-color: #EDD2CE; border-left-color: var(--err); }
.notice--info { background: var(--white);   color: var(--ink); border-color: var(--line); border-left-color: var(--tea-estate); }

/* ------------------------------------------------------------- cart etc. - */
.panel {
  background: var(--white); border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.cart-layout {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start;
}
.cart-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 1.25rem; align-items: center;
  padding: 1.35rem 0; border-bottom: 1px solid var(--line-soft);
}
.cart-thumb {
  width: 92px; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--warm-grey); border: 1px solid var(--line-soft);
  display: grid; place-items: center;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb svg { width: 46%; opacity: .32; }

.summary { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.summary-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; font-size: .92rem;
}
.summary-row span:first-child { color: var(--ink-muted); }
.summary-total {
  border-top: 1px solid var(--tea-deep); margin-top: .85rem; padding-top: 1rem;
  font-size: 1.15rem; font-weight: 600; color: var(--tea-deep);
}
.summary-total span:first-child { color: var(--tea-deep); }

/* ------------------------------------------------------------- tracking -- */
.track-steps { display: grid; margin-top: 2rem; }
.track-step {
  display: grid; grid-template-columns: 32px minmax(0, 1fr);
  gap: 1.15rem; position: relative; padding-bottom: 1.75rem;
}
.track-step:last-child { padding-bottom: 0; }
.track-step::before {
  content: ""; position: absolute; left: 15px; top: 30px; bottom: 0;
  width: 1px; background: var(--line);
}
.track-step:last-child::before { display: none; }
.track-dot {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line);
  color: var(--ink-faint); z-index: 1; border-radius: var(--r-pill);
}
.track-dot .ico { width: 15px; height: 15px; }
.track-step.is-done .track-dot { background: var(--tea-deep); border-color: var(--tea-deep); color: var(--gold-soft); }
.track-step.is-done::before { background: var(--tea-deep); }
.track-step.is-current .track-dot {
  background: var(--gold); border-color: var(--gold); color: var(--charcoal);
  box-shadow: 0 0 0 4px rgba(181,138,58,.18);
}
.track-step b { font-size: .96rem; font-weight: 600; color: var(--tea-deep); }
.track-step.is-pending b { color: var(--ink-faint); font-weight: 400; }
.track-step time { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: .15rem; }

.track-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .06em; font-weight: 600; font-size: .92em;
  background: var(--warm-grey); padding: .2rem .5rem; border-radius: var(--r-xs);
  border: 0; color: var(--tea-deep);
}

.event-log { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.35rem; }
.event-log li {
  display: flex; gap: 1.25rem; justify-content: space-between;
  padding: .65rem 0; font-size: .88rem; border-bottom: 1px solid var(--line-soft);
}
.event-log time { color: var(--ink-faint); white-space: nowrap; font-size: .8rem; }

/* ------------------------------------------------------------ pagination - */
.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; padding: 0 .75rem;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--white);
  text-decoration: none; font-size: .84rem;
  transition: border-color .25s var(--ease);
}
.pagination a:hover { border-color: var(--tea-deep); }
.pagination .is-active { background: var(--tea-deep); color: var(--ivory); border-color: var(--tea-deep); }

.empty {
  text-align: center; padding: clamp(3.5rem, 8vw, 6rem) 1rem;
  border: 1px solid var(--line); background: var(--white);
}
.empty > svg { width: 54px; height: auto; margin: 0 auto 1.5rem; opacity: .3; }

/* ---------------------------------------------------------------- toasts - */
.toast-host {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 100;
  display: flex; flex-direction: column; gap: .6rem; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1.25rem;
  background: var(--tea-deep); color: var(--on-dark);
  font-size: .86rem; letter-spacing: .02em;
  box-shadow: 0 12px 34px rgba(14,42,35,.22);
  animation: toast-in .3s var(--ease-out);
  pointer-events: auto;
}
.toast .ico { color: var(--gold-soft); }
.toast.is-out { animation: toast-out .25s var(--ease) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(6px); } }

/* ----------------------------------------------------------------- motion */
/* One reveal.

   The hiding is gated on BOTH `.js` and the absence of `.reveal-off`. The
   inline head script sets `.js` unconditionally, so it alone proves nothing —
   it only tells us scripting is enabled, not that site.js actually arrived.
   A 404 on site.js would otherwise leave every product card, collection tile
   and legal section permanently at opacity 0 on a page that returns 200.
   The watchdog in header.php sets `.reveal-off` when site.js has not run. */
.js:not(.reveal-off) .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .collections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collections .tile:first-child { grid-column: span 2; grid-row: span 1; min-height: 280px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .newsletter-inner { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .menu-toggle { display: inline-grid; }
  /* The nav becomes position:fixed off-canvas below this width, so it leaves
     the flex flow and its `margin-left:auto` stops pushing anything. Without
     this the search, cart and menu icons bunch up against the logo instead of
     sitting at the right-hand edge. */
  .header-actions { margin-left: auto; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
    background: var(--ivory); flex-direction: column; align-items: stretch;
    padding: 5.5rem var(--gutter) 2rem; gap: 0;
    translate: 100% 0; transition: translate .4s var(--ease-out);
    overflow-y: auto; z-index: 92;
    border-left: 1px solid var(--line);
  }
  .nav.is-open { translate: 0; }
  .nav > a, .nav .has-menu > a {
    padding: 1rem 0; font-size: .82rem;
    border-bottom: 1px solid var(--line-soft); color: var(--tea-deep);
  }
  .nav a::after { display: none; }
  .site-header.is-over-hero .nav > a,
  .site-header.is-over-hero .nav .has-menu > a { color: var(--tea-deep); }
  .submenu {
    position: static; translate: none; opacity: 1; visibility: visible;
    border: 0; box-shadow: none; padding: 0 0 .75rem .9rem; min-width: 0;
    background: transparent;
  }
  .submenu a { padding: .55rem 0; font-size: .8rem; }
  .product-layout { grid-template-columns: 1fr; }
  .product-hero-media { position: static; max-width: 480px; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .editorial { grid-template-columns: 1fr; gap: 2rem; }
  .editorial--reverse .editorial__media { order: 0; }
  .trust-list { grid-template-columns: 1fr 1fr; }
  .trust-item { border-left: 0; border-top: 1px solid var(--line-soft); padding: 1.1rem 0; }
  .trust-item:first-child, .trust-item:nth-child(2) { border-top: 0; }
}

@media (max-width: 640px) {
  :root { --header-h: 76px; }
  .brand-logo { height: 52px; }
  .brand-logo--footer { height: 64px; }
  /* Capped as well as proportional: at 78vh alone a tall phone gives the hero
     78% of the screen and nothing below it shows. The cap leaves the next
     section peeking, which is what invites the scroll. */
  .hero { min-height: min(78vh, 620px); align-items: flex-end; }
  .hero-inner { max-width: none; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .8rem; }
  .product-name { font-size: 1.06rem; }
  /* Single column. Every span MUST be cleared here — a leftover `span 2` in a
     one-track grid makes the browser invent an implicit second column sized by
     content, which produced a 56px sliver next to a 284px tile. */
  .collections { grid-template-columns: minmax(0, 1fr); }
  .collections .tile,
  .collections .tile:first-child,
  .collections--four .tile:last-child {
    grid-column: auto;
    grid-row: auto;
    min-height: 220px;
  }
  .footer-top { grid-template-columns: 1fr; gap: 2.25rem; }
  .grid-2 { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-thumb { width: 72px; }
  .cart-row > :last-child { grid-column: 1 / -1; text-align: right; }
  .shop-bar { gap: .6rem; }
  .shop-search { flex: 1 1 100%; order: -1; }
  .footer-bottom { justify-content: flex-start; }
  .toast-host { right: 1rem; left: 1rem; bottom: 1rem; }
}

/* Two columns hold down to about 340px — a 150px card still shows the
   photograph and the name legibly. Below that a single column is honest. */
@media (max-width: 339px) {
  .product-grid { grid-template-columns: 1fr; }
  .trust-list { grid-template-columns: 1fr; }
  .trust-item { border-top: 1px solid var(--line-soft); }
  .trust-item:nth-child(2) { border-top: 1px solid var(--line-soft); }
}

/* Touch targets */
@media (pointer: coarse) {
  .btn--sm { min-height: 42px; }
  .filter-opt span { padding-block: .75rem; }
  .submenu a { min-height: 42px; display: flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .tile:hover .tile-media img,
  .product-card:hover .product-media img { scale: 1; }
}


/* ==========================================================================
   HOMEPAGE — 2026-08-27
   Nine sections, mobile first. Everything below is additive: no rule here
   redefines an existing selector, so the shop, product and checkout pages are
   unaffected by this block.
   ========================================================================== */

/* ----------------------------------------------------- container additions */
/* The wide shell exists so a 1920px monitor can be used for pictures and cards
   without dragging prose out to 140 characters. Grids get the width; sentences
   keep a measure. */
.shell-wide {
  width: min(100% - (var(--gutter) * 2), var(--shell-wide));
  margin-inline: auto;
}
.shell-full { width: 100%; }

/* Prose inside any shell stays readable however wide the container is. */
.measure     { max-width: 62ch; }
.measure-sm  { max-width: 54ch; }

/* -------------------------------------------------------- section grounds */
.section--cream { background: var(--cream); }
.section--pale  { background: linear-gradient(to bottom, var(--ivory), var(--pale-botanical)); }
.section--forest {
  background: var(--forest-900);
  color: var(--text-light);
}
.section--forest h1, .section--forest h2, .section--forest h3 { color: var(--text-light); }
.section--forest .lede, .section--forest p { color: #DCE4DB; }
.section--forest .eyebrow { color: var(--gold-soft); }

/* A hairline of gold to close a section without shouting. */
.rule-thin {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(to right, var(--gold), transparent);
  opacity: .55;
}

/* ==================================================== featured collections */
/* Editorial cards. The image is the subject; type sits quietly on top. Works
   with a photograph or with the botanical motif, so photographs drop in later
   without the markup changing. */
.featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: 1.75rem;
  overflow: hidden;
  text-decoration: none;
  background: var(--forest-800);
  isolation: isolate;
}
.feature-card__media {
  position: absolute; inset: 0; z-index: -2;
  background: var(--forest-800);
}
.feature-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Two stops, weighted to the bottom, so the photograph keeps its light while
   the type below stays legible. */
.feature-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(10, 31, 25, .88) 0%,
    rgba(10, 31, 25, .55) 38%,
    rgba(10, 31, 25, .12) 68%,
    rgba(10, 31, 25, .04) 100%);
}
.feature-card__label {
  font-size: .68rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-soft);
  margin-bottom: .55rem;
}
.feature-card h3 {
  font-size: clamp(1.35rem, 3.5vw, 1.9rem);
  color: var(--white); margin-bottom: .5rem;
}
.feature-card p {
  font-size: .9rem; color: rgba(241, 238, 228, .88);
  max-width: 40ch; margin-bottom: 1rem;
}
.feature-card__cta {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-soft);
  display: inline-flex; align-items: center; gap: .45rem;
}
.feature-card__cta .ico { width: 1em; height: 1em; }

/* --------------------------------------------------------- shop by category */
/* Tonal variation inside one palette: each shelf gets a different depth of the
   same green rather than four unrelated colours. */
.cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .85rem;
}
.cat-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 220px; padding: 1.35rem;
  overflow: hidden; text-decoration: none;
  isolation: isolate;
  background: var(--tone, var(--forest-800));
}
.cat-card__media { position: absolute; inset: 0; z-index: -2; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cat-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--tone, var(--forest-800)) 92%, transparent) 0%,
    color-mix(in srgb, var(--tone, var(--forest-800)) 58%, transparent) 45%,
    color-mix(in srgb, var(--tone, var(--forest-800)) 22%, transparent) 100%);
}
/* Older browsers without color-mix still get a readable scrim. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .cat-card::after {
    background: linear-gradient(to top, rgba(10,31,25,.9), rgba(10,31,25,.25));
  }
}
.cat-card[data-tone="tea"]     { --tone: var(--forest-800); }
.cat-card[data-tone="herbal"]  { --tone: var(--botanical); }
.cat-card[data-tone="coffee"]  { --tone: #3A3326; }
.cat-card[data-tone="spices"]  { --tone: #4A4128; }
/* Bronze, matching the gift pages — and clearly distinct from Tea, which is
   also a deep forest green and sits right beside it. */
.cat-card[data-tone="gift"]    { --tone: #2E2513; }

.cat-card h3 {
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  color: var(--white); margin-bottom: .2rem;
}
.cat-card__count {
  font-size: .7rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(241, 238, 228, .78);
}
.cat-card__motif {
  position: absolute; right: 1.1rem; top: 1.1rem;
  width: 34px; height: 34px; opacity: .3; z-index: -1;
}
.cat-card__motif svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------ why choose */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 2rem;
}
.why-item { display: flex; flex-direction: column; gap: .55rem; }
.why-item__icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--gold-muted);
}
.why-item__icon .ico { width: 26px; height: 26px; }
.why-item h3 {
  font-family: var(--sans);
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tea-deep);
}
.why-item p { font-size: .9rem; color: var(--ink-muted); max-width: 42ch; }

/* -------------------------------------------------------------- heritage */
.heritage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
.heritage__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--forest-800);
  overflow: hidden;
}
.heritage__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.heritage__media .tile-media--ph { position: absolute; inset: 0; }
.heritage__body { display: flex; flex-direction: column; gap: 1rem; }
.heritage__body h2 { font-size: clamp(1.9rem, 5vw, 3rem); }
.heritage__body p { font-size: 1rem; line-height: 1.7; }

/* The timeline is a vertical list on a phone and stays one on a tablet. It
   only becomes a row when there is genuinely width for five stops. */
.timeline {
  display: flex; flex-direction: column;
  gap: 0; margin-top: .5rem; padding: 0; list-style: none;
}
.timeline li {
  position: relative;
  padding: 0 0 1.1rem 1.6rem;
  border-left: 1px solid rgba(216, 191, 130, .3);
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: ""; position: absolute; left: -4px; top: .42rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
}
.timeline .yr {
  display: block;
  font-size: .68rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-soft);
  margin-bottom: .15rem;
}
.timeline .what { font-size: .95rem; color: #DCE4DB; }

/* --------------------------------------------------------- brewing guide */
/* Cards on a phone, a table only where a table actually fits. Built as cards
   first so nothing has to be un-tabled at small widths. */
.brew-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .85rem;
}
.brew-card {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1.15rem 1.25rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.brew-card h3 {
  font-size: 1.15rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.brew-card h3 span {
  font-family: var(--sans); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-muted);
  white-space: nowrap;
}
.brew-spec {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem; padding-top: .2rem;
}
.brew-spec div { display: flex; flex-direction: column; gap: .15rem; }
.brew-spec dt {
  font-size: .62rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.brew-spec dd {
  margin: 0; font-size: .95rem; font-weight: 600; color: var(--tea-deep);
  font-variant-numeric: tabular-nums;
}
.brew-card p { font-size: .88rem; color: var(--ink-muted); }

/* The FAQ pairs. Plain <details> — no library, keyboard accessible already. */
.faq-list { display: flex; flex-direction: column; gap: 0; margin-top: 2rem; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 1.05rem 2.5rem 1.05rem 0;
  position: relative;
  font-family: var(--serif); font-size: 1.1rem; color: var(--tea-deep);
  min-height: 44px; display: flex; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--gold-muted);
  border-bottom: 1.5px solid var(--gold-muted);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item .answer {
  padding: 0 0 1.15rem; font-size: .95rem; color: var(--ink-muted); max-width: 68ch;
}

/* --------------------------------------------------- footer track-order cta */
/* Order tracking left the homepage as a section, so it needs a clear home in
   the footer rather than only a text link in a list. */
.footer-track {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(241, 238, 228, .12);
  margin-bottom: 2rem;
}
.footer-track__text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 260px; }
.footer-track__text b {
  font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--on-dark);
}
.footer-track__text span { font-size: .84rem; color: var(--on-dark-mute); }

/* ------------------------------------------------------------- responsive */
@media (min-width: 480px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card { min-height: 420px; }
}

@media (min-width: 900px) {
  /* 55/45 as briefed: the photograph leads, the story sits beside it. */
  .heritage { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(2rem, 4vw, 4rem); }
  .heritage--reverse .heritage__media { order: 2; }
  .why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brew-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-card { min-height: 300px; }

  /* The first collection is the largest — an editorial hierarchy rather than
     four identical boxes. */
  .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .featured-grid .feature-card:first-child { grid-column: span 2; grid-row: span 2; min-height: 520px; }
}

@media (min-width: 1400px) {
  /* The extra width on a large monitor goes to the pictures and the grid, not
     to the line length — .measure keeps prose where it was. */
  .feature-card { min-height: 460px; }
  .featured-grid .feature-card:first-child { min-height: 560px; }
  .cat-card { min-height: 340px; }
}

/* Hover is an enhancement only: every card is fully legible without it, which
   is what makes the same markup work on a phone. */
@media (hover: hover) {
  .feature-card__media img,
  .cat-card__media img,
  .heritage__media img {
    transition: scale .7s var(--ease-out);
  }
  .feature-card:hover .feature-card__media img,
  .cat-card:hover .cat-card__media img { scale: 1.03; }
  .feature-card:hover .feature-card__cta { color: var(--white); }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card__media img,
  .cat-card__media img,
  .heritage__media img { transition: none; }
  .feature-card:hover .feature-card__media img,
  .cat-card:hover .cat-card__media img { scale: 1; }
  .faq-item summary::after { transition: none; }
}


/* ------------------------------------------------- homepage fixes, tested */
/* The grade list beside a brewing heading is long ("Hibiscus · Chamomile ·
   Blue pea · Lemongrass") and was set nowrap, so at 390px it ran 47px past the
   viewport edge. Stack it under the heading until there is room for a row. */
.brew-card h3 { flex-direction: column; align-items: flex-start; gap: .25rem; }
.brew-card h3 span { white-space: normal; font-size: .7rem; }
/* The grade list is never set nowrap: at 1024px the three-up card is about
   290px wide, which is narrower than "Hibiscus · Chamomile · Blue pea ·
   Lemongrass" on one line. It wraps at every width and simply sits beside the
   heading when there is room. */
@media (min-width: 1200px) {
  .brew-card h3 { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .brew-card h3 span { text-align: right; }
}

/* Micro-labels are an editorial device here, not body copy, but nothing should
   drop below the size the site already uses for .eyebrow. */
.feature-card__label,
.feature-card__cta,
.cat-card__count,
.timeline .yr { font-size: .7rem; }
.brew-spec dt { font-size: .7rem; }

/* Touch targets. The visible size of these is deliberate — a 44px tall "Add"
   would unbalance the product card — so the hit area is extended with a
   pseudo-element instead. The control looks identical and is comfortably
   tappable. This also fixes the same controls on the shop page. */
.product-action::before,
.link-arrow::before {
  content: "";
  position: absolute;
  inset: -11px -10px;
}
.link-arrow { position: relative; }

/* Best sellers shows a fixed four, so it never uses a three-column step — that
   would strand one card alone on a second row. Two or four, nothing else. */
@media (max-width: 899px) {
  .best-sellers .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .best-sellers .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 42px was two short of the 44px target minimum. */
.icon-btn { min-width: 44px; min-height: 44px; }
.footer-track .btn { min-height: 44px; }


/* The botanical placeholder is a positioned block with an absolutely placed
   ::before, so it needs real dimensions. Dropped into a card as a bare <span>
   it collapsed to nothing and the card read as an empty panel. */
.feature-card__media .tile-media--ph,
.heritage__media .tile-media--ph,
.cat-card__media .tile-media--ph {
  position: absolute; inset: 0; display: block;
}

/* A feature card is far larger than a collection tile, so the motif is scaled
   up and lifted to carry it until a photograph arrives. */
.feature-card__media .tile-media--ph::before {
  background-size: min(46%, 340px) auto;
  background-position: right -6% top 12%;
  opacity: .2;
}
.heritage__media .tile-media--ph::before {
  background-size: min(60%, 320px) auto;
  background-position: center 42%;
  opacity: .22;
}

/* Without photography these cards are tall blocks of flat colour. Until images
   land, keep them closer to a natural card height. */
@media (min-width: 900px) {
  .featured-grid .feature-card:first-child:not(:has(img)) { min-height: 440px; }
  .feature-card:not(:has(img)) { min-height: 210px; }
}
@media (min-width: 1400px) {
  .featured-grid .feature-card:first-child:not(:has(img)) { min-height: 480px; }
  .feature-card:not(:has(img)) { min-height: 230px; }
}


/* ==========================================================================
   GIFT COLLECTIONS
   A shade more considered than the ordinary category cards — a wider frame,
   a gold hairline, a visible status — while staying in the same palette. The
   luxury is in the spacing and the restraint, not in effects.
   ========================================================================== */

.page-head--gift {
  background: linear-gradient(to bottom, var(--white), var(--ivory));
  border-bottom: 1px solid var(--line);
}
.page-head--gift h1 { margin-top: .5rem; }

/* ------------------------------------------------------------- the cards */
.gift-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.gift-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 330px;
  padding: 1.5rem;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  background: var(--tone-bg, var(--forest-800));
  /* The hairline is the whole "premium" gesture. It does not glow. */
  outline: 1px solid rgba(216, 191, 130, .22);
  outline-offset: -9px;
  transition: outline-color .4s var(--ease);
}
.gift-card[data-tone="tea"]    { --tone-bg: var(--forest-800); }
.gift-card[data-tone="herbal"] { --tone-bg: var(--botanical); }
.gift-card[data-tone="coffee"] { --tone-bg: #3A3326; }
.gift-card[data-tone="spices"] { --tone-bg: #4A4128; }
/* Deep bronze, not the old placeholder purple: "Golden Luxury" should read as
   gold turned down, and purple is not in the Leaf World palette. */
.gift-card[data-tone="gift"]   { --tone-bg: #2E2513; }
/* Applies wherever the gift tone appears — the cards and the coming-soon panel
   — so the two never disagree about what "Golden Luxury" looks like. */
.tile-media--ph[data-tone="gift"] {
  background: linear-gradient(155deg, #6B5320, #241B08);
}

.gift-card__media { position: absolute; inset: 0; z-index: -2; }
.gift-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gift-card__media .tile-media--ph { position: absolute; inset: 0; display: block; }
.gift-card__media .tile-media--ph::before {
  background-size: min(48%, 300px) auto;
  background-position: right -4% top 14%;
  opacity: .2;
}
.gift-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(10, 31, 25, .90) 0%,
    rgba(10, 31, 25, .60) 42%,
    rgba(10, 31, 25, .15) 74%,
    rgba(10, 31, 25, .05) 100%);
}

/* The status is a promise about availability, so it is never decorative and
   never hidden behind a hover. */
.gift-card__status {
  position: absolute; top: 1.25rem; left: 1.25rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest-950);
  background: var(--gold-soft);
  padding: .35rem .65rem;
}
.gift-card__status.is-live { background: #A8D0B4; }

.gift-card__body { display: flex; flex-direction: column; gap: .45rem; }
.gift-card h3 {
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  color: var(--white);
}
.gift-card p {
  font-size: .9rem; line-height: 1.55;
  color: rgba(241, 238, 228, .86);
  max-width: 44ch;
}
.gift-card__cta {
  margin-top: .35rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-soft);
  display: inline-flex; align-items: center; gap: .45rem;
}
.gift-card__cta .ico { width: 1em; height: 1em; }

/* ---------------------------------------------------- the coming-soon panel */
.gift-soon__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
.gift-soon__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--forest-800);
  outline: 1px solid rgba(216, 191, 130, .2);
  outline-offset: -10px;
}
.gift-soon__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gift-soon__media .tile-media--ph { position: absolute; inset: 0; display: block; }
.gift-soon__media .tile-media--ph::before {
  background-size: min(58%, 300px) auto;
  background-position: center 44%;
  opacity: .22;
}
.gift-soon__body { display: flex; flex-direction: column; gap: 1rem; }
.gift-soon__body h2 { font-size: clamp(1.9rem, 5.5vw, 3rem); }
.gift-soon__body p { font-size: 1rem; line-height: 1.7; }

/* ------------------------------------------------------------- responsive */
@media (min-width: 560px) {
  .gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  /* Editorial rather than five equal boxes: the lead collection takes two
     thirds of the first row, the next sits beside it, and the remaining three
     run as a row of thirds beneath. */
  .gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gift-grid .gift-card--lead { grid-column: span 2; min-height: 440px; }
  .gift-card { min-height: 380px; }

  /* On a collection page the four siblings are simply equal. */
  .gift-grid--even { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gift-grid--even .gift-card { min-height: 300px; }

  .gift-soon__inner { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: clamp(2rem, 4vw, 4rem); }
}

@media (min-width: 1400px) {
  .gift-grid .gift-card--lead { min-height: 480px; }
  .gift-card { min-height: 400px; }
  .gift-grid--even .gift-card { min-height: 320px; }
}

@media (hover: hover) {
  .gift-card__media img { transition: scale .7s var(--ease-out); }
  .gift-card:hover .gift-card__media img { scale: 1.03; }
  .gift-card:hover { outline-color: rgba(216, 191, 130, .5); }
  .gift-card:hover .gift-card__cta { color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-card__media img { transition: none; }
  .gift-card:hover .gift-card__media img { scale: 1; }
  .gift-card { transition: none; }
}


/* -------------------------------------------- gift collections, permanent */
/* The status badge is gone: these are finished collection pages, not holding
   notices, so a card carries the collection and nothing else. */
.gift-card__status { display: none; }

/* A wide, quiet band under the page head. Not a second hero competing with the
   home page — a strip of the collection's own colour to set the tone. */
.gift-hero {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(160px, 26vw, 340px);
  overflow: hidden;
  background: var(--forest-800);
}
.gift-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gift-hero .tile-media--ph { position: absolute; inset: 0; display: block; }
.gift-hero .tile-media--ph::before {
  background-size: min(28%, 220px) auto;
  background-position: right 6% center;
  opacity: .18;
}

/* The empty state lives where the product grid will be, so the page reads as
   finished with one clearly marked gap rather than as a different page. */
.gift-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .9rem;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter);
  border: 1px solid var(--line);
  background: var(--white);
}
.gift-empty__mark { width: 54px; height: 54px; display: block; opacity: .9; }
.gift-empty__mark svg { width: 100%; height: 100%; }
.gift-empty p {
  max-width: 48ch;
  color: var(--ink-muted);
  font-size: .98rem;
}
.gift-empty .btn { margin-top: .4rem; }

@media (min-width: 900px) {
  /* Four siblings, so the row divides cleanly. */
  .gift-grid--even { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ------------------------------------------- category cards, now standalone */
/* Featured Collections was removed — it repeated these same shelves — so the
   description it carried moves here. These cards are the only collection block
   on the page now, so they are taller and carry more. */
.cat-card__body { display: flex; flex-direction: column; gap: .3rem; }
.cat-card__body p {
  font-size: .86rem; line-height: 1.5;
  color: rgba(241, 238, 228, .84);
  max-width: 34ch;
  /* Always two lines tall, so every card title sits on the same baseline no
     matter how long its sentence is. Longer text is trimmed rather than
     pushing that card's heading up above its neighbours. */
  min-height: 3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-card h3 { margin-bottom: 0; }

@media (min-width: 900px) {
  /* One large card and a 2x2 beside it. Tea is the biggest shelf by far — 90
     of the 148 products — so it earns the space, and five items finally sit in
     a rectangle instead of leaving one stranded. */
  .cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(210px, auto);
  }
  .cat-card { min-height: 0; }
  .cat-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1400px) {
  .cat-grid { grid-auto-rows: minmax(235px, auto); }
}


/* Between 480 and 900 the grid is two across, which leaves the fifth card
   alone on the last row. Let it take the full width there so the block still
   ends square. */
@media (min-width: 480px) and (max-width: 899px) {
  .cat-card:nth-child(5) { grid-column: 1 / -1; min-height: 240px; }
}


/* ==========================================================================
   OUR STORY + BREWING GUIDE — 2026-08-29
   Additive. No existing selector is redefined, so every other page is
   untouched by this block.
   ========================================================================== */

/* --------------------------------------------------------- story timeline */
/* Vertical on a phone, four across on a desktop. The rule that connects the
   stops is drawn differently in each direction rather than a single layout
   being squeezed — a horizontal timeline crushed onto 360px is unreadable. */
.story-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.story-timeline li {
  position: relative;
  padding: 0 0 2rem 1.9rem;
  border-left: 1px solid rgba(216, 191, 130, .28);
}
.story-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.story-timeline li::before {
  content: "";
  position: absolute; left: -5px; top: .55rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
}
.story-timeline__when {
  display: block;
  font-size: .68rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-soft);
  margin-bottom: .5rem;
}
.story-timeline h3 {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  color: var(--text-light);
  margin-bottom: .5rem;
}
.story-timeline p {
  font-size: .95rem; line-height: 1.65;
  color: #DCE4DB; max-width: 46ch;
}

/* ------------------------------------------------------------- pillars */
.pillars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem 2rem;
}
.pillar { display: flex; flex-direction: column; gap: .5rem; position: relative; }
.pillar__n {
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  color: var(--gold);
}
.pillar__icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--gold-muted); }
.pillar__icon .ico { width: 24px; height: 24px; }
.pillar__label {
  font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.pillar h3 {
  font-family: var(--serif); font-size: 1.2rem; color: var(--tea-deep);
}
.pillar p { font-size: .92rem; color: var(--ink-muted); max-width: 42ch; }

/* ==================================================== homepage brew entries */
.brew-entries {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .85rem;
}
.brew-entry {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 210px; padding: 1.4rem;
  overflow: hidden; text-decoration: none; isolation: isolate;
  background: var(--tone, var(--forest-800));
}
.brew-entry[data-tone="tea"]    { --tone: var(--forest-800); }
.brew-entry[data-tone="herbal"] { --tone: var(--botanical); }
.brew-entry[data-tone="spices"] { --tone: #4A4128; }
.brew-entry[data-tone="coffee"] { --tone: #3A3326; }
.brew-entry::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10,31,25,.5), rgba(10,31,25,0) 70%);
}
.brew-entry__motif {
  position: absolute; right: 1rem; top: 1rem;
  width: 32px; height: 32px; opacity: .28; z-index: -1;
}
.brew-entry__motif svg { width: 100%; height: 100%; }
.brew-entry h3 {
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  color: var(--white); margin-bottom: .35rem;
}
.brew-entry p {
  font-size: .87rem; line-height: 1.5;
  color: rgba(241, 238, 228, .85); max-width: 32ch;
  min-height: 2.6em;
}
.brew-entry__cta {
  margin-top: .6rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-soft);
  display: inline-flex; align-items: center; gap: .4rem;
}
.brew-entry__cta .ico { width: 1em; height: 1em; }

/* ================================================= brewing guide, the page */
.brew-jump {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.75rem;
}
.brew-jump a {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  padding: .6rem 1rem;
  min-height: 44px; display: inline-flex; align-items: center;
  background: var(--white);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.brew-jump a:hover { border-color: var(--gold); color: var(--tea-deep); }

.brew-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
/* .brew-card and .brew-spec already exist from the first homepage build; only
   the additions below are new. */
.brew-card__resteep {
  font-size: .84rem; color: var(--ink-muted);
  padding-top: .55rem; border-top: 1px solid var(--soft, var(--line-soft));
}
.brew-card__resteep b {
  font-size: .64rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-right: .4rem;
}
.brew-card__note {
  font-size: .82rem; color: var(--ink-muted);
  background: var(--ivory); border-left: 2px solid var(--gold);
  padding: .6rem .8rem;
}
/* Temperature and time carry the most weight — they change the cup most. */
.brew-spec .is-key dd { color: var(--tea-deep); font-size: 1.05rem; }
.brew-spec--dark dt { color: rgba(241, 238, 228, .6); }
.brew-spec--dark dd { color: var(--gold-soft); }

.brew-warn {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .9rem; color: var(--gold-soft);
}
.brew-warn .ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; margin-top: .15em; }

/* Matcha, numbered */
.brew-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.brew-steps li { display: flex; gap: .9rem; align-items: flex-start; }
.brew-steps__n {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  color: var(--gold); flex: 0 0 auto; padding-top: .15rem;
}
.brew-steps li > span:last-child { display: flex; flex-direction: column; gap: .15rem; }
.brew-steps b { color: var(--text-light); font-weight: 600; font-size: .95rem; }
.brew-steps span span { font-size: .9rem; color: #DCE4DB; }

/* The five simple steps */
.brew-flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem;
}
.brew-flow li {
  display: flex; flex-direction: column; gap: .4rem;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.brew-flow__n {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--gold);
}
.brew-flow h3 {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tea-deep);
}
.brew-flow p { font-size: .9rem; color: var(--ink-muted); }

.brew-aside {
  border: 1px solid var(--line); background: var(--white);
  padding: 1.5rem 1.6rem;
  display: flex; flex-direction: column; gap: .8rem;
}
.brew-aside h3 { font-size: 1.25rem; }
.brew-aside p { font-size: .93rem; color: var(--ink-muted); }

/* ------------------------------------------- product page: how to brew */
.how-brew {
  margin-top: 2rem; padding: 1.15rem 1.3rem;
  border: 1px solid var(--line); background: var(--ivory);
  display: flex; flex-direction: column; gap: .8rem;
}
.how-brew__title {
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-muted);
}
.how-brew .brew-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.how-brew .link-arrow { font-size: .72rem; }

/* ------------------------------------------------------------ responsive */
@media (min-width: 560px) {
  .brew-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brew-cards   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brew-flow    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .brew-entries { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brew-cards   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brew-flow    { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pillars      { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Four stops across, with the rule running through them rather than down. */
  .story-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; }
  .story-timeline li {
    padding: 2rem 0 0;
    border-left: 0;
    border-top: 1px solid rgba(216, 191, 130, .28);
  }
  .story-timeline li:last-child { border-top-color: rgba(216, 191, 130, .28); }
  .story-timeline li::before { left: 0; top: -5px; }
  .story-timeline p { max-width: none; }
}

@media (min-width: 1400px) {
  .brew-entry { min-height: 240px; }
}

@media (hover: hover) {
  .brew-entry { transition: background .4s var(--ease); }
  .brew-entry:hover .brew-entry__cta { color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  .brew-entry, .brew-jump a { transition: none; }
}

@media print {
  .site-header, .site-footer, .announce, .btn, .toast-host, .drawer, .drawer-backdrop { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ------------------------------- product gallery (front / back / loose) --
   Up to three views switched by radio inputs, so no JavaScript is involved
   and the gallery cannot break if site.js fails. The inputs sit before the
   stage and the thumbnails in the markup, which is what makes these sibling
   selectors work. A product with one photograph renders none of this. */
.pgal { position: relative; }
.pgal-pick {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.pgal-stage { position: relative; }
.pgal-stage .pgal-v { display: none; width: 100%; height: 100%; }
.pgal-pick1:checked ~ .pgal-stage .pgal-v1,
.pgal-pick2:checked ~ .pgal-stage .pgal-v2,
.pgal-pick3:checked ~ .pgal-stage .pgal-v3 { display: block; }

.pgal-thumbs { display: flex; gap: .55rem; margin-top: .6rem; flex-wrap: wrap; }
.pgal-thumb {
  flex: 0 0 auto; width: 92px; aspect-ratio: 4 / 5;
  overflow: hidden; cursor: pointer; display: block;
  border: 1px solid var(--line-soft);
  opacity: .5;
  transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
.pgal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgal-thumb:hover { opacity: .8; }
.pgal-pick1:checked ~ .pgal-thumbs .pgal-t1,
.pgal-pick2:checked ~ .pgal-thumbs .pgal-t2,
.pgal-pick3:checked ~ .pgal-thumbs .pgal-t3 { opacity: 1; border-color: var(--gold); }
.pgal-pick:focus-visible ~ .pgal-thumbs .pgal-thumb {
  outline: 2px solid var(--gold); outline-offset: 3px;
}


/* --------------------------------- gallery and the sticky product image --
   .product-hero-media is position:sticky so the photograph follows the details
   column as it scrolls. Once it sits inside a gallery, the image and its
   thumbnails have to stick as ONE unit: otherwise the image slides up on
   scroll while the thumbnails stay in normal flow, and they end up sitting on
   top of the picture. So the stickiness moves to the wrapper and the stage
   goes back to being an ordinary block. */
.pgal {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}
.pgal .pgal-stage {
  position: relative;
  top: auto;
}

@media (max-width: 900px) {
  /* Mirrors the rule that unsticks .product-hero-media at this width. */
  .pgal { position: static; max-width: 480px; }
}


/* ------------------------------------------------- market switch (LKR/USD) --
   A quiet pair of pills in the header. It is a real form, not links, because
   choosing a market changes prices. */
.market-switch {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 2px; margin-right: .35rem; background: transparent;
}
.market-switch__opt {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .66rem; font-weight: 600; letter-spacing: .09em;
  padding: .3rem .55rem; border-radius: 999px; line-height: 1;
  color: var(--ink-muted, #6b6b6b);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.market-switch__opt:hover { color: var(--text-dark); }
.market-switch__opt.is-on { background: var(--forest-800); color: #fff; }
.market-switch__opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 700px) { .market-switch { margin-right: .15rem; } .market-switch__opt { padding: .28rem .45rem; font-size: .62rem; } }

/* Logo on the payment, thank-you, manual-payment and empty-cart panels. The
   header rule fixes the height at 78px; here the width leads and the height
   follows so the mark keeps its proportions and sits centred in the panel. */
.brand-logo.brand-logo--panel { width: 88px; height: auto; margin: 0 auto; }

/* Caption under "Shop by category" on the home page. */
.cat-caption { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); max-width: 62ch; }
.cat-caption h3 { font-family: var(--serif); font-size: clamp(1.35rem, 2.8vw, 1.8rem); font-weight: 500; line-height: 1.25; color: var(--tea-deep); margin: 0 0 .6rem; }
.cat-caption p { margin: 0; color: var(--ink-muted); }
.section-head h2 + .cat-caption { margin-top: 1rem; padding-top: 0; border-top: 0; }

/* ============================================================== mobile menu ==
   A full-height panel that does not depend on the page's main script: the
   toggle is a link to #menu, so before menu.js arrives (or if it never does)
   the :target rule opens it. menu.js then adds the close button behaviour,
   Escape, focus handling and scroll lock. */
.mnav { display: none; }

@media (max-width: 900px) {
  .menu-toggle { display: inline-grid; }
  .nav { display: none; }

  .mnav {
    display: block; position: fixed; inset: 0; z-index: 120;
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear .4s;
  }
  .mnav.is-open,
  html:not(.menu-js) .mnav:target { visibility: visible; pointer-events: auto; transition-delay: 0s; }

  .mnav__backdrop {
    position: absolute; inset: 0; background: rgba(8, 26, 21, .58);
    opacity: 0; transition: opacity .3s var(--ease);
  }
  .mnav.is-open .mnav__backdrop,
  html:not(.menu-js) .mnav:target .mnav__backdrop { opacity: 1; }

  .mnav__panel {
    position: absolute; inset: 0 0 0 auto; width: min(92vw, 400px);
    display: flex; flex-direction: column; background: var(--ivory);
    transform: translateX(104%); transition: transform .38s var(--ease-out);
    box-shadow: -18px 0 48px rgba(0, 0, 0, .28);
  }
  .mnav.is-open .mnav__panel,
  html:not(.menu-js) .mnav:target .mnav__panel { transform: none; }

  .mnav__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .75rem .6rem 1.25rem; border-bottom: 1px solid var(--line);
  }
  .mnav__title {
    font: 600 .72rem/1 var(--sans); letter-spacing: .22em;
    text-transform: uppercase; color: var(--gold-ink);
  }
  .mnav__close {
    width: 48px; height: 48px; display: grid; place-items: center;
    color: var(--tea-deep); border-radius: 50%;
  }
  .mnav__close .ico { width: 22px; height: 22px; }

  .mnav__scroll {
    flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: 1rem 1.25rem 1.5rem;
  }

  .mnav__search { position: relative; margin-bottom: .5rem; }
  .mnav__search .ico {
    position: absolute; left: .95rem; top: 50%; translate: 0 -50%;
    width: 18px; height: 18px; color: var(--ink-muted); pointer-events: none;
  }
  .mnav__search input {
    width: 100%; min-height: 48px; padding: .7rem 1rem .7rem 2.75rem;
    border: 1px solid var(--line); border-radius: var(--r-xs);
    background: var(--white); color: var(--ink); font-size: 16px;
  }

  .mnav__label {
    margin: 1.4rem 0 .15rem; font: 600 .68rem/1 var(--sans);
    letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink);
  }

  .mnav__link,
  .mnav__group > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; padding: .45rem 0; text-decoration: none; cursor: pointer;
    font: 600 .84rem/1.2 var(--sans); letter-spacing: .13em; text-transform: uppercase;
    color: var(--tea-deep); border-bottom: 1px solid var(--line-soft);
  }
  .mnav__link.is-active { color: var(--gold-ink); }
  .mnav__group > summary { list-style: none; }
  .mnav__group > summary::-webkit-details-marker { display: none; }
  .mnav__group > summary::after {
    content: ""; width: 8px; height: 8px; margin-right: .3rem;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    rotate: 45deg; transition: rotate .25s var(--ease);
  }
  .mnav__group[open] > summary::after { rotate: -135deg; }
  .mnav__sub { padding: .1rem 0 .5rem; border-bottom: 1px solid var(--line-soft); }
  .mnav__sub a {
    display: flex; align-items: center; min-height: 46px; padding-left: .9rem;
    font-size: 1rem; color: var(--ink); text-decoration: none;
  }

  .mnav__legal { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-top: 1.1rem; }
  .mnav__legal a {
    display: inline-flex; align-items: center; min-height: 42px;
    font-size: .88rem; color: var(--ink-muted); text-decoration: none;
  }

  .mnav__foot {
    padding: .85rem 1.25rem calc(.9rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--white); display: grid; gap: .6rem;
  }
  .mnav__cta { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .mnav__cta .btn { min-height: 48px; justify-content: center; }
  .mnav__note { margin: 0; font-size: .78rem; color: var(--ink-muted); text-align: center; }

  html.menu-open, html.menu-open body { overflow: hidden; }

  /* On a phone the announcement strip scrolls away; only the bar stays. */
  .site-header:not(.is-over-hero) { top: calc(-1 * var(--announce-h, 0px)); }
  .site-header.is-over-hero.is-stuck .announce { display: none; }
  .announce { font-size: .66rem; letter-spacing: .1em; padding: .5rem .9rem; line-height: 1.35; }

  /* 16px stops iPhones zooming the page when a field is tapped. */
  input[type=text], input[type=email], input[type=tel], input[type=search],
  input[type=number], input[type=password], select, textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mnav__panel, .mnav__backdrop, .mnav { transition: none; }
}

/* ------------------------------------------------------ mobile polish - */
/* Comfortable touch sizes, readable type, no iPhone zoom on focus. Placed last
   so equal-specificity rules here win by order. */
.buybar { display: none; }
.buybar[hidden] { display: none; }

@media (max-width: 900px) {
  html { -webkit-tap-highlight-color: rgba(181,138,58,.16); }

  /* Nothing a customer has to read is smaller than 12px. */
  .announce { font-size: .75rem; letter-spacing: .08em; }
  .eyebrow { font-size: .75rem; letter-spacing: .18em; }
  .product-badge { font-size: .68rem; }
  .product-cat { font-size: .7rem; }
  .cat-card__count { font-size: .75rem; }
  .breadcrumb { font-size: .84rem; }
  .link-arrow { font-size: .78rem; }
  .collection-nav a { font-size: .78rem; }
  .site-footer h4 { font-size: .74rem; }
  .pay-row .pay-label { font-size: .72rem; }
  .price small { font-size: .78rem; }
  .price--tbd { font-size: .76rem; }
  .mnav__label { font-size: .72rem; }

  /* Buttons: wrap rather than push the page wider; 48px tall. */
  .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; min-height: 48px; }
  .btn--sm { min-height: 44px; }

  /* Fields: 16px stops the zoom, 48px is easy to hit. */
  .input, .select, .textarea, .bar-select, .qty input { font-size: 16px; }
  .input, .select { min-height: 48px; }
  .bar-select { min-height: 44px; letter-spacing: .02em; text-transform: none; font-weight: 500; }
  .qty button { width: 46px; }

  /* Card controls. Negative margins keep the card the same height while the
     tappable area grows to 44px. */
  .product-action {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 .55rem; margin: -.8rem -.55rem; font-size: .76rem;
  }
  .product-action::after { bottom: .8rem; left: .55rem; right: .55rem; }
  .product-name a { display: inline-block; padding-block: .4rem; margin-block: -.4rem; }

  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -.7rem; }
  .link-arrow { min-height: 44px; padding-bottom: 0; }
  .link-arrow::after { bottom: .6rem; }
  .collection-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .collection-nav a::after { bottom: .55rem; }
  .subcat-nav a { align-items: center; min-height: 42px; padding-inline: 1rem; }
  .subcat-nav a em { font-size: .74rem; }
  details.panel > summary { padding-block: .8rem; margin-block: -.8rem; }

  /* Footer links and social icons. */
  .site-footer li { padding: 0; }
  .site-footer li a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .social-link { width: 44px; height: 44px; }

  /* Product page: slim buy bar while the main button is off screen. */
  .buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; align-items: center; gap: .85rem;
    padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(23,48,40,.08);
    transform: translateY(110%); visibility: hidden;
    transition: transform .35s var(--ease-out), visibility 0s linear .35s;
  }
  .buybar[hidden] { display: none; }
  .buybar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
  .buybar__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
  .buybar__name {
    font: 500 1.05rem/1.2 var(--serif); color: var(--tea-deep);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .buybar__meta { font-size: .82rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar .btn { flex: 0 0 auto; padding-inline: 1.3rem; }
  html.has-buybar .site-footer { padding-bottom: 4.75rem; }
  html.has-buybar .toast-host { bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .buybar { transition: none; }
}
@media print {
  .buybar { display: none !important; }
}
/* type floor, second pass: the remaining micro-labels reach 12px on phones */
@media (max-width: 900px) {
  .product-badge, .product-cat, .yr, .story-timeline__when, .pillar__n, .pillar__label { font-size: .75rem; }
  .brew-entry__cta, .gift-card__cta, .how-brew .link-arrow { font-size: .76rem; }
  .newsletter-form button, .bar-btn, .filter-group h3, .site-footer h4, .btn--sm { font-size: .76rem; }
  .subcat-nav a em, .collection-nav em, .filter-opt em { font-size: .76rem; }
  .how-brew__title, .how-brew dt, .spec-list dt { font-size: .78rem; }
  .field label, .field .req { font-size: .8rem; }
}
/* compact shop bar: search on top, then Filter and Sort side by side, then the
   count, so the first products show higher up the screen on a phone */
@media (max-width: 640px) {
  .shop-bar { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-items: stretch; }
  .shop-search { grid-column: 1 / -1; flex: none; }
  .shop-bar__spacer { display: none; }
  .shop-bar__count { grid-column: 1 / -1; order: 5; }
  .shop-bar .bar-btn { justify-content: center; width: 100%; min-height: 48px; }
  .shop-bar label:not(.shop-search) { display: block; min-width: 0; }
  .shop-bar .bar-select { width: 100%; min-height: 48px; }
}
.shop-bar noscript { grid-column: 1 / -1; }
/* six collections: the lead card is tall (two columns by two rows), two cards
   stack beside it and three run along the bottom. The strip of the other five
   on a collection page splits two over three. */
@media (min-width: 900px) {
  .gift-grid:not(.gift-grid--even) .gift-card--lead { grid-row: span 2; }
  .gift-grid--even { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gift-grid--even .gift-card { grid-column: span 2; }
  .gift-grid--even .gift-card:nth-child(-n+2) { grid-column: span 3; }
}
/* one collection: the card takes the full width */
@media (min-width: 560px) {
  .gift-grid:not(.gift-grid--even) .gift-card--lead:only-child { grid-column: 1 / -1; grid-row: auto; min-height: clamp(460px, 50vw, 680px); }
}

/* the price of a gift box, on its collection page and on the card */
.gift-buy { align-items: center; gap: 1.25rem; }
.gift-buy__price { font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 500; color: var(--tea-deep); }
.gift-card__price { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; color: var(--gold-soft); }

/* the saving on each larger pack, so the discount is easy to see */
.variant-opt { display: flex; }
.variant-opt span { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.variant-save { display: block; margin-top: .2rem; font-size: .75rem; font-weight: 600; letter-spacing: .03em; color: var(--ok, #2e7d52); }
.variant-opt input:checked + span .variant-save { color: var(--gold-soft); }

/* a second call button in the mobile menu spans the full width */
.mnav__cta .mnav__cta-wide { grid-column: 1 / -1; }

/* stock: sold-out cards, packs and notices */
.product-card.is-soldout .product-media img { opacity: .5; }
.product-soldout-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .7rem; text-align: center; background: rgba(23,48,40,.88); color: var(--ivory); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.product-action--off { color: var(--ink-faint); cursor: default; }
.product-action--off::after { display: none; }
.variant-opt input:disabled { cursor: not-allowed; }
.variant-opt input:disabled + span { opacity: .45; cursor: not-allowed; }
.variant-save--off { color: var(--ink-faint); }