/* ==== tokens.css ==== */
/* Garden Brew Tea Cafe — design tokens (see docs/DESIGN.md) */
:root {
  /* colour */
  --cream: #FBF5E9;
  --cream-2: #FFFDF8;
  --kraft: #EAD9B9;
  --kraft-2: #DCC498;
  --kraft-3: #C9A96E;
  --ink: #2B2520;
  --ink-2: #5A4E45;
  --sorrel: #A3122F;
  --sorrel-2: #7E0C23;
  --hibiscus: #D93C63;
  --mango: #E8611C;
  --mango-2: #C64F14;
  --turmeric: #E9B32A;
  --turmeric-2: #F6D77A;
  --leaf: #2E7D3E;
  --leaf-2: #1D5A2B;
  --sage: #A9C7A0;
  --sage-2: #E4EEDD;
  --terracotta: #B9552C;
  --brown: #6B4423;
  --purple: #5B2A86;

  /* type */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;

  --step--1: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --step-0: clamp(1rem, 0.97rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.75vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.85rem + 2.2vw, 3.4rem);
  --step-5: clamp(2.7rem, 2rem + 3.6vw, 4.6rem);

  /* space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --section: clamp(3.5rem, 6vw + 1rem, 7rem);
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --container: 1180px;

  /* shape */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-arch: 999px 999px 20px 20px;

  --shadow: 0 10px 30px -12px rgb(60 30 10 / .25);
  --shadow-lg: 0 24px 60px -20px rgb(60 30 10 / .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
}


/* ==== fonts.css ==== */
/* Self-hosted fonts — generated by tools/fetch-fonts.mjs. Do not edit by hand. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/caveat-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 800;font-display:swap;src:url('../fonts/fraunces-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/fraunces-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito Sans';font-style:italic;font-weight:300 800;font-display:swap;src:url('../fonts/nunito-sans-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/nunito-sans-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ==== site.css ==== */
/* ==========================================================================
   Garden Brew Tea Cafe — site styles
   Mobile-first. Components documented in docs/DESIGN.md.
   ========================================================================== */

/* ---------- 0. reset & base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  position: relative;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* soft paper grain over everything */
body::before {
  content: "";
  position: absolute; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, picture, video, svg { display: block; max-width: 100%; }
.gallery picture, .card__media picture, .product-card__media picture, .media-arch picture, .media-round picture, .media-stack__second picture, .hero__frame picture, .more-tile__media picture { height: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  font-variation-settings: "SOFT" 60, "opsz" 72;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-weight: 640; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); font-variation-settings: "SOFT" 40, "opsz" 24; }
h4 { font-size: var(--step-1); font-variation-settings: "SOFT" 40, "opsz" 18; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--sorrel); }
p { margin: 0 0 var(--space-4); max-width: 65ch; }
p:last-child { margin-bottom: 0; }
a { color: var(--leaf-2); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--sorrel); }
ul, ol { padding-left: 1.2em; }
.list-plain { list-style: none; padding: 0; margin: 0; }
strong { font-weight: 700; }
small, .small { font-size: var(--step--1); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
hr { border: 0; border-top: 2px dashed var(--kraft-2); margin: var(--space-6) 0; }
::selection { background: var(--turmeric-2); color: var(--ink); }

:focus-visible { outline: 3px solid var(--leaf-2); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 6px var(--turmeric-2); }
.section--leaf :focus-visible, .section--sorrel :focus-visible { outline-color: var(--cream); box-shadow: 0 0 0 6px rgb(0 0 0 / .35); }
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 10000;
  background: var(--ink); color: var(--cream); padding: .6rem 1rem; border-radius: var(--r-sm); text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 1. layout ------------------------------------------------------ */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { --container: 820px; }
.container--wide { --container: 1360px; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--flush-top { padding-top: 0; }
.section--cream { background: var(--cream); }
.section--cream-2 { background: var(--cream-2); }
.section--kraft { background: var(--kraft); }
.section--sage { background: var(--sage-2); }
.section--leaf { background: var(--leaf-2); color: var(--cream); }
.section--sorrel { background: var(--sorrel); color: var(--cream); }
.section--leaf a:not(.btn), .section--sorrel a:not(.btn) { color: inherit; }
[hidden] { display: none !important; }
.section--leaf h1, .section--leaf h2, .section--leaf h3, .section--sorrel h1, .section--sorrel h2, .section--sorrel h3 { color: inherit; }
.section--leaf h2 em, .section--sorrel h2 em { color: var(--turmeric-2); }
.section--leaf .lead, .section--sorrel .lead { color: inherit; opacity: .9; }

.section-head { max-width: 62ch; margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }
.section-head h2 { margin-bottom: var(--space-3); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
  .split--wide-media { grid-template-columns: 1.15fr 1fr; }
  .split--media-right > .split__media { order: 2; }
}
.split__media { position: relative; }

/* wavy dividers: place <svg class="wave"> as the LAST child of a section; colour = next section's bg */
.wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(34px, 6vw, 90px); pointer-events: none; }
.wave--top { top: -1px; bottom: auto; transform: scaleY(-1); }
.wave--cream { color: var(--cream); }
.wave--cream-2 { color: var(--cream-2); }
.wave--kraft { color: var(--kraft); }
.wave--sage { color: var(--sage-2); }
.wave--leaf { color: var(--leaf-2); }
.wave--sorrel { color: var(--sorrel); }
.has-wave { padding-bottom: calc(var(--section) + clamp(34px, 6vw, 90px)); }

/* faint monstera-leaf tile (from the booth tablecloth) */
.bg-leaf { position: relative; isolation: isolate; }
.bg-leaf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M70 40c-30 10-45 45-40 80s30 70 70 75c40-5 65-40 70-75s-10-70-40-80c-10 30-10 50-30 70-20-20-20-40-30-70z'/%3E%3Cpath d='M100 195V95M100 130c-15-5-25-15-32-30M100 150c15-5 25-15 32-30M100 170c-12-4-22-12-30-24'/%3E%3Cpath d='M200 170c20 5 35 25 33 50-25 2-45-13-50-33M200 170l33 50'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}
.section--sage.bg-leaf::before, .section--cream.bg-leaf::before, .section--kraft.bg-leaf::before { filter: invert(1); opacity: .035; }

/* ---------- 2. header & nav ------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--kraft-2) 60%, transparent);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo { width: auto; height: 54px; }
@media (min-width: 880px) { .brand__logo { height: 64px; } .site-header__inner { min-height: 84px; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: 2px solid var(--kraft-2); border-radius: 999px;
  padding: .5rem .9rem; font: 700 var(--step--1) var(--font-body); color: var(--ink); cursor: pointer; min-height: 44px;
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-flex; }

.site-nav { display: none; }
.site-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream-2); border-bottom: 3px solid var(--kraft-2); box-shadow: var(--shadow-lg); }
.site-nav__list { list-style: none; margin: 0; padding: var(--space-3) var(--gutter) var(--space-5); display: flex; flex-direction: column; gap: 2px; }
.site-nav__list a:not(.btn) {
  display: block; padding: .8rem .6rem; font-weight: 700; text-decoration: none; color: var(--ink); border-radius: var(--r-sm); font-size: var(--step-0);
}
.site-nav__list a:not(.btn):hover, .site-nav__list a:not(.btn)[aria-current="page"] { color: var(--sorrel); background: color-mix(in srgb, var(--kraft) 50%, transparent); }
.site-nav__cta { margin-top: var(--space-3); }
.site-nav__cta .btn { width: 100%; }

@media (min-width: 880px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.is-open { display: block; position: static; background: none; border: 0; box-shadow: none; }
  .site-nav__list { flex-direction: row; align-items: center; gap: .2rem; padding: 0; }
  .site-nav__list a:not(.btn) { padding: .55rem .8rem; position: relative; }
  .site-nav__list a:not(.btn)[aria-current="page"] { background: none; }
  .site-nav__list a:not(.btn)[aria-current="page"]::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 3px; border-radius: 3px; background: var(--sorrel); }
  .site-nav__cta { margin: 0 0 0 var(--space-3); }
  .site-nav__cta .btn { width: auto; }
}

/* ---------- 3. buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.5rem; border-radius: 999px;
  background: var(--sorrel); color: var(--cream); border: 2px solid var(--sorrel);
  font: 700 var(--step-0) var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, border-color .18s, color .18s;
  box-shadow: 0 6px 18px -8px rgb(163 18 47 / .55);
}
.btn:hover { background: var(--sorrel-2); border-color: var(--sorrel-2); color: var(--cream); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgb(163 18 47 / .6); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.2em; height: 1.2em; }
.btn--sm { min-height: 42px; padding: .55rem 1.1rem; font-size: var(--step--1); }
.btn--lg { min-height: 56px; padding: .9rem 2rem; font-size: var(--step-1); }
.btn--secondary { background: transparent; color: var(--sorrel); box-shadow: none; }
.btn--secondary:hover { background: var(--sorrel); color: var(--cream); }
.btn--mango { background: var(--mango); border-color: var(--mango); color: var(--cream); box-shadow: 0 6px 18px -8px rgb(232 97 28 / .6); }
.btn--mango:hover { background: var(--mango-2); border-color: var(--mango-2); }
.btn--leaf { background: var(--leaf); border-color: var(--leaf); box-shadow: 0 6px 18px -8px rgb(46 125 62 / .6); }
.btn--leaf:hover { background: var(--leaf-2); border-color: var(--leaf-2); }
.btn--light { background: var(--cream); border-color: var(--cream); color: var(--sorrel); box-shadow: 0 6px 18px -8px rgb(0 0 0 / .35); }
.btn--light:hover { background: var(--turmeric-2); border-color: var(--turmeric-2); color: var(--sorrel-2); }
.btn--ghost-light { background: transparent; border-color: color-mix(in srgb, var(--cream) 70%, transparent); color: var(--cream); box-shadow: none; }
.btn--ghost-light:hover { background: color-mix(in srgb, var(--cream) 15%, transparent); border-color: var(--cream); color: var(--cream); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 480px) { .btn-row--stack .btn { width: 100%; } }

/* ---------- 4. small pieces: eyebrow, tag, sticker, placeholder, price ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 800 var(--step--1) var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--purple); margin-bottom: var(--space-3);
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--turmeric); }
.eyebrow--leaf { color: var(--leaf-2); }
.eyebrow--light { color: var(--turmeric-2); }
.eyebrow--sorrel { color: var(--sorrel); }

/* kraft tag with a punched hole + twine — the owner's handwritten tea tags */
.tag {
  --tag-rot: -3deg;
  position: relative; display: inline-block;
  background: var(--kraft-2); color: var(--ink);
  font: 600 1.35rem/1.15 var(--font-hand);
  padding: .55rem 1rem .5rem 1.7rem; border-radius: 6px 12px 12px 6px;
  box-shadow: 0 6px 14px -8px rgb(60 30 10 / .5), inset 0 0 0 1px rgb(0 0 0 / .05);
  transform: rotate(var(--tag-rot));
  clip-path: polygon(0 50%, 12px 0, 100% 0, 100% 100%, 12px 100%);
}
.tag::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--kraft-3); }
.tag--lg { font-size: 1.7rem; padding: .7rem 1.3rem .65rem 2rem; }
.tag--sm { font-size: 1.1rem; padding: .35rem .7rem .3rem 1.4rem; }
.tag--flat { --tag-rot: 0deg; }
.tag--r { --tag-rot: 3deg; }
.tag__twine { position: absolute; left: 14px; top: 50%; width: 2px; height: 46px; background: var(--kraft-3); transform-origin: top; transform: translateY(-46px) rotate(-18deg); border-radius: 2px; }

/* round sticker label — the white circular labels on the tea pouches */
.sticker {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  width: 4.6rem; height: 4.6rem; border-radius: 50%; padding: .4rem;
  background: var(--cream-2); color: var(--sorrel); border: 3px solid var(--cream-2);
  font: 800 .72rem/1.05 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 6px 16px -8px rgb(60 30 10 / .5); transform: rotate(-8deg);
}
.sticker--most-loved { background: var(--sorrel); color: var(--cream); border-color: var(--cream-2); }
.sticker--garden-grown { background: var(--leaf); color: var(--cream); border-color: var(--cream-2); }
.sticker--new, .sticker--seasonal { background: var(--turmeric); color: var(--ink); border-color: var(--cream-2); }
.sticker--lg { width: 6.5rem; height: 6.5rem; font-size: .9rem; }
/* numbered step marker — one style for every "how it works" list on the site */
.sticker--num { flex: none; width: 2.8rem; height: 2.8rem; padding: 0; background: var(--turmeric); color: var(--ink); border-color: var(--cream-2); font: 700 1.25rem var(--font-display); font-variation-settings: "SOFT" 40; letter-spacing: 0; text-transform: none; }
.sticker--num + .sticker--num { margin: 0; }
.sticker + .sticker { margin-left: -.6rem; transform: rotate(6deg); }

/* placeholders — bright, impossible to miss, easy to grep */
mark.placeholder { background: var(--turmeric-2); color: var(--sorrel-2); padding: 0 .3em; border-radius: 4px; outline: 1.5px dashed var(--mango); font-weight: 600; font-style: normal; }
.price { font: 700 var(--step-0) var(--font-body); color: var(--ink); }
.price--placeholder { background: var(--turmeric-2); color: var(--sorrel-2); padding: .1rem .5rem; border-radius: 4px; outline: 1.5px dashed var(--mango); font-size: var(--step--1); }
.img-missing { aspect-ratio: 4 / 5; display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--kraft), var(--kraft) 10px, var(--kraft-2) 10px, var(--kraft-2) 20px); color: var(--brown); font: 600 .9rem var(--font-body); border-radius: var(--r-md); }

/* ---------- 5. cards & products --------------------------------------------- */
.card { background: var(--cream-2); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.card--kraft { background: var(--kraft); }
.card__media { position: relative; aspect-ratio: 16 / 10; background: var(--kraft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media .tag, .card__media .media-caption { position: absolute; left: var(--space-4); bottom: var(--space-4); }
.card__body { padding: var(--space-5); }

.product-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--cream-2); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product-card__media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--kraft); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__media--placeholder { display: grid; place-items: center; background: repeating-linear-gradient(-45deg, var(--kraft), var(--kraft) 12px, #f1e4cb 12px, #f1e4cb 24px); color: var(--brown); }
.product-card__media--placeholder .botanical { width: 34%; height: auto; opacity: .55; stroke-width: 1.4; }
.product-card__media--placeholder span { position: absolute; bottom: .8rem; left: 0; right: 0; text-align: center; font: 600 .8rem var(--font-body); }
.product-card__badges { position: absolute; top: .9rem; left: .9rem; display: flex; }
.product-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.product-card__title { margin: 0; font-size: var(--step-2); }
.product-card__tagline { font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.1; color: var(--sorrel); margin: 0; }
.product-card__desc { color: var(--ink-2); margin: var(--space-2) 0 0; font-size: var(--step--1); }
.product-card__ingredients { margin: var(--space-2) 0 0; font-size: var(--step--1); color: var(--ink-2); }
.product-card__ingredients strong { color: var(--leaf-2); }
.product-card__foot { margin-top: auto; padding-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.product-card__link { font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; color: var(--leaf-2); }
.product-card__link .icon { width: 1.1em; height: 1.1em; transition: transform .2s; }
.product-card__link:hover .icon { transform: translateX(3px); }
.product-card--placeholder { outline: 2px dashed var(--mango); outline-offset: -8px; background: var(--cream); box-shadow: none; }
.product-card--placeholder:hover { transform: none; }
.product-card--unavailable .product-card__media { filter: grayscale(.6); }
.availability { display: inline-flex; align-items: center; gap: .35rem; font: 700 .78rem var(--font-body); color: var(--leaf-2); letter-spacing: .04em; text-transform: uppercase; }
.availability::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--leaf); }
.availability--off { color: var(--ink-2); }
.availability--off::before { background: var(--kraft-3); }

.product-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .product-grid { grid-template-columns: repeat(3, 1fr); } .product-grid .product-card--feature { grid-column: 1 / -1; } }
@media (min-width: 960px) {
  .product-card--feature { flex-direction: row; }
  .product-card--feature .product-card__media { flex: 1 1 50%; aspect-ratio: 4 / 3; min-height: 100%; }
  .product-card--feature .product-card__body { flex: 1 1 48%; padding: var(--space-6); justify-content: center; }
  .product-card--feature .product-card__foot { margin-top: var(--space-5); }
  .product-card--feature .product-card__title { font-size: var(--step-3); }
}

/* ---------- 6. hero ---------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 88% 18%, color-mix(in srgb, var(--turmeric-2) 75%, transparent) 0%, transparent 70%),
    radial-gradient(45% 40% at 5% 92%, color-mix(in srgb, var(--sage-2) 90%, transparent) 0%, transparent 70%),
    radial-gradient(35% 30% at 75% 90%, color-mix(in srgb, #F8D9DE 80%, transparent) 0%, transparent 70%);
}
.hero__inner { position: relative; z-index: 1; display: grid; gap: var(--space-6); align-items: center; }
.hero__copy { max-width: 36rem; }
.hero__copy h1 { margin-bottom: var(--space-4); }
.hero__copy .lead { margin-bottom: var(--space-5); }
.hero__media { position: relative; margin-inline: auto; width: min(100%, 520px); }
.hero__frame { border-radius: var(--r-arch); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; background: var(--kraft); }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__tag { position: absolute; left: -.5rem; bottom: 14%; z-index: 2; }
.hero__sticker { position: absolute; right: -.5rem; top: 8%; z-index: 2; }
.hero__note { display: flex; align-items: center; gap: .6rem; margin-top: var(--space-5); font-size: var(--step--1); color: var(--ink-2); }
.hero__note .icon { width: 1.3em; height: 1.3em; color: var(--leaf); flex: none; }
@media (min-width: 880px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
  .hero__media { width: min(100%, 560px); justify-self: end; }
  .hero__tag { left: -2.2rem; }
  .hero__sticker { right: -1.4rem; }
}
/* orchestrated hero reveal on load */
.hero__copy > *:not(h1), .hero__media { opacity: 0; transform: translateY(14px); animation: rise .8s var(--ease) forwards; }
.hero__copy > h1 { transform: translateY(10px); animation: rise-solid .7s var(--ease) forwards; }
.hero__media { opacity: 1; animation-name: rise-solid; }
@keyframes rise-solid { to { transform: none; } }
.hero__copy > :nth-child(1) { animation-delay: .05s; }
.hero__copy > :nth-child(2) { animation-delay: .15s; }
.hero__copy > :nth-child(3) { animation-delay: .28s; }
.hero__copy > :nth-child(4) { animation-delay: .4s; }
.hero__copy > :nth-child(5) { animation-delay: .5s; }
.hero__media { animation-delay: .25s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* floating botanical decorations */
.float-leaf { position: absolute; z-index: 0; pointer-events: none; color: var(--leaf); opacity: .22; width: clamp(48px, 7vw, 96px); height: auto; animation: drift 11s ease-in-out infinite; left: 2%; top: 4%; }
.float-leaf--tr { left: auto; right: 3%; top: 6%; }
.float-leaf--bl { top: auto; bottom: 6%; left: 2%; }
.float-leaf--br { top: auto; left: auto; right: 3%; bottom: 8%; }
.float-leaf--mid-l { top: 45%; left: 1%; }
.float-leaf--sorrel { color: var(--sorrel); }
.float-leaf--turmeric { color: var(--mango); }
.float-leaf--slow { animation-duration: 15s; }
.float-leaf--delay { animation-delay: -6s; }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(5deg); } }

/* ---------- 7. marquee ribbon (market banner) ------------------------------ */
.ribbon-wrap { position: relative; overflow: hidden; padding-block: .4rem; }
.ribbon__pause { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--cream) 85%, transparent); color: var(--sorrel-2); font-size: .8rem; cursor: pointer; }
.ribbon__pause:hover { background: var(--cream); }
.ribbon-wrap.is-paused .ribbon__track { animation-play-state: paused; }
.ribbon { background: var(--sorrel); color: var(--cream); overflow: hidden; padding: .85rem 0; transform: rotate(-1.2deg) scale(1.02); margin-block: var(--space-6) var(--space-4); }
.ribbon__track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 40s linear infinite; font: 800 var(--step--1) var(--font-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ribbon__track span { display: inline-flex; align-items: center; gap: 2.5rem; }
.ribbon__track i { font-style: normal; color: var(--turmeric); }
@keyframes marquee { to { transform: translateX(-50%); } }
.ribbon:hover .ribbon__track { animation-play-state: paused; }

/* ---------- 8. story / feature splits ---------------------------------------- */
.media-arch { border-radius: var(--r-arch); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; background: var(--kraft); }
.media-arch img { width: 100%; height: 100%; object-fit: cover; }
.media-round { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: var(--kraft); }
.media-round img { width: 100%; height: 100%; object-fit: cover; }
.media-round--portrait { aspect-ratio: 4 / 5; }
.media-stack { position: relative; padding-bottom: 18%; }
.media-stack__main { width: 82%; }
.media-stack__second { position: absolute; right: 0; bottom: 0; width: 46%; border: 6px solid var(--cream); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 1; background: var(--kraft); }
.media-stack__second img { width: 100%; height: 100%; object-fit: cover; }
.media-caption { position: absolute; z-index: 2; }
.media-caption--bl { left: -.4rem; bottom: 6%; }
.media-caption--tr { right: -.4rem; top: 6%; }
.media-caption--br { right: -.4rem; bottom: 6%; }

.checklist { list-style: none; padding: 0; margin: var(--space-5) 0; display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; }
.checklist .icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--cream); background: var(--leaf); border-radius: 50%; padding: .25rem; margin-top: .15rem; }

.pillars { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { position: relative; padding: var(--space-5) var(--space-5) var(--space-5) var(--space-5); background: var(--cream-2); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.pillar:nth-child(2) { background: var(--kraft); }
.pillar:nth-child(3) { background: var(--sage-2); }
@media (min-width: 720px) { .pillar:nth-child(2) { transform: translateY(1.5rem); } }
.pillar .botanical { width: 56px; height: 56px; color: var(--sorrel); stroke-width: 1.6; margin-bottom: var(--space-3); }
.pillar:nth-child(2) .botanical { color: var(--mango); }
.pillar:nth-child(3) .botanical { color: var(--leaf); }
.pillar h3 { margin-bottom: var(--space-2); }
.pillar p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }

/* ---------- 9. garden / ingredients -------------------------------------------- */
.ingredients { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .ingredients { grid-template-columns: repeat(4, 1fr); } }
.ingredient { position: relative; text-align: center; padding: var(--space-5) var(--space-3) var(--space-4); background: color-mix(in srgb, var(--cream) 12%, transparent); border: 1.5px solid color-mix(in srgb, var(--cream) 25%, transparent); border-radius: var(--r-lg); }
.ingredient .botanical { width: 64px; height: 64px; margin: 0 auto var(--space-3); color: var(--turmeric-2); stroke-width: 1.5; }
.ingredient:nth-child(2) .botanical { color: var(--sage); }
.ingredient:nth-child(3) .botanical { color: var(--turmeric); }
.ingredient:nth-child(4) .botanical { color: var(--mango); }
.ingredient h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.ingredient p { margin: 0; font-size: var(--step--1); opacity: .9; }
.ingredient .tag { position: absolute; top: -.9rem; right: -.4rem; }
@media (min-width: 720px) { .ingredient:nth-child(even) { transform: translateY(1.2rem); } }

/* ---------- 10. markets ------------------------------------------------------- */
.market-list { display: grid; gap: var(--space-4); }
.market-card {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--space-5);
  background: var(--cream-2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--space-5);
  border-left: 8px solid var(--leaf);
}
.market-card--example { border-left-color: var(--mango); outline: 2px dashed var(--mango); outline-offset: -8px; background: var(--cream); box-shadow: none; }
.market-card__date { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .5rem .9rem; background: var(--sage-2); border-radius: var(--r-md); }
.market-card__date b { font: 700 1.9rem/1 var(--font-display); color: var(--leaf-2); font-variation-settings: "SOFT" 40; }
.market-card__date span { font: 800 .78rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--leaf-2); }
.market-card__date small { font-size: .78rem; color: var(--ink-2); }
.market-card__date--tbd b { font-size: 1rem; }
@media (min-width: 600px) {
  .market-card { grid-template-columns: auto 1fr; }
  .market-card__date { flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 5.2rem; padding: .6rem .5rem; text-align: center; align-self: start; }
  .market-card__date b { font-size: 2.2rem; }
  .market-card__date small { margin-top: .2rem; }
}
.market-card__title { margin: 0 0 .25rem; font-size: var(--step-2); }
.market-card__meta { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: .35rem; color: var(--ink-2); font-size: var(--step--1); }
.market-card__meta li { display: flex; gap: .5rem; align-items: flex-start; }
.market-card__meta .icon { flex: none; width: 1.2em; height: 1.2em; color: var(--leaf); margin-top: .15em; }
.market-card__notes { font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.2; color: var(--sorrel); margin: 0 0 var(--space-3); }
.market-card__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 720px) { .market-card__actions { grid-column: 2; } }
.market-card__example-label { grid-column: 1 / -1; font: 800 .75rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mango-2); }

.notice {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--turmeric-2); color: var(--ink); border-radius: var(--r-md); padding: var(--space-4) var(--space-5);
  border-left: 6px solid var(--turmeric); font-size: var(--step--1);
}
.notice .icon { flex: none; width: 1.4em; height: 1.4em; color: var(--brown); margin-top: .1em; }
.notice p { margin: 0; max-width: none; }
.notice--sorrel { background: #fbe3e8; border-left-color: var(--sorrel); }
.notice--sorrel .icon { color: var(--sorrel); }

/* phone-shaped video frame for the booth clip */
.video-frame { position: relative; margin-inline: auto; width: min(100%, 360px); aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--kraft); }
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-frame__btn {
  position: absolute; right: .8rem; bottom: .8rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .9rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 70%, transparent); color: var(--cream); border: 0; font: 700 .85rem var(--font-body); cursor: pointer; backdrop-filter: blur(6px);
}
.video-frame__btn:hover { background: var(--ink); }
.video-frame__btn--pause { right: auto; left: .8rem; }

/* ---------- 11. FAQ ------------------------------------------------------------- */
.faq { display: grid; gap: var(--space-3); }
.faq details { background: var(--cream-2); border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); font: 700 var(--step-0) var(--font-body); color: var(--ink); min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--sage-2); color: var(--leaf-2); font: 700 1.3rem var(--font-body); transition: transform .2s; }
.faq details[open] summary::after { content: "–"; transform: rotate(180deg); }
.faq details[open] summary { color: var(--sorrel); }
.faq__body { padding: 0 var(--space-5) var(--space-5); color: var(--ink-2); }
.faq__body p { max-width: none; }

/* ---------- 12. forms ----------------------------------------------------------- */
.form { display: grid; gap: var(--space-4); }
.form__row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .35rem; }
.field label, .field legend { font-weight: 700; font-size: var(--step--1); }
.field .hint { font-size: .85rem; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .7rem .95rem; border-radius: var(--r-sm);
  border: 2px solid #9C7A4A; background: var(--cream-2); color: var(--ink);
  font: 500 var(--step-0) var(--font-body); transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 4px color-mix(in srgb, var(--leaf) 20%, transparent); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--sorrel); }
.field .error { color: var(--sorrel-2); font-size: .85rem; font-weight: 700; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%232B2520' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.6rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__optional, .form__required { font-weight: 400; color: var(--ink-2); font-size: .85em; }
.form__required { color: var(--sorrel-2); }

/* preorder item picker — one row per product, with a quantity stepper */
.picker { display: grid; gap: var(--space-2); }
.picker__group { font: 800 .8rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--leaf-2); margin: var(--space-3) 0 .2rem; }
.picker__item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); padding: .7rem .9rem; background: var(--cream-2); border: 2px solid var(--kraft-2); border-radius: var(--r-md); transition: border-color .15s, background .15s; }
.picker__item:has(.picker__qty input:not([value="0"])), .picker__item.is-active { border-color: var(--leaf); background: #f3f8ef; }
.picker__name { font-weight: 700; }
.picker__sub { display: block; font-size: .82rem; color: var(--ink-2); }
.picker__qty { display: inline-flex; align-items: center; border: 2px solid #9C7A4A; border-radius: 999px; background: var(--cream-2); }
.picker__qty:focus-within { border-color: var(--leaf-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--leaf) 25%, transparent); }
.picker__qty input:focus-visible { outline: 2px solid var(--leaf-2); outline-offset: -2px; box-shadow: none; }
.picker__qty button { width: 42px; height: 42px; border: 0; background: transparent; font: 700 1.3rem var(--font-body); color: var(--sorrel); cursor: pointer; border-radius: 999px; }
.picker__qty button:hover { background: var(--kraft); }
.picker__qty input { width: 2.6rem; min-height: 0; text-align: center; border: 0; background: transparent; padding: 0; font-weight: 800; -moz-appearance: textfield; }
.picker__qty input::-webkit-outer-spin-button, .picker__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.form-status { display: none; gap: .7rem; align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--r-md); font-weight: 600; }
.form-status.is-visible { display: flex; }
.form-status--ok { background: var(--sage-2); color: var(--leaf-2); }
.form-status--error { background: #fbe3e8; color: var(--sorrel-2); }
.form-status .icon { flex: none; width: 1.4em; height: 1.4em; margin-top: .1em; }
.form-status p { max-width: none; margin: 0; }
.form-status pre { white-space: pre-wrap; font: 500 .9rem/1.5 var(--font-body); background: var(--cream-2); padding: var(--space-3); border-radius: var(--r-sm); margin: var(--space-3) 0 0; max-height: 240px; overflow: auto; }

/* ---------- 13. gallery / instagram -------------------------------------------- */
.gallery { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
.gallery > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: .8rem; } }
.gallery a { display: block; position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--kraft); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery a:hover img { transform: scale(1.05); }
.gallery a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(163 18 47 / .35), transparent 50%); opacity: 0; transition: opacity .3s; }
.gallery a:hover::after { opacity: 1; }
.gallery a .icon { position: absolute; right: .6rem; bottom: .6rem; width: 1.4rem; height: 1.4rem; color: var(--cream); opacity: 0; z-index: 1; transition: opacity .3s; }
.gallery a:hover .icon { opacity: 1; }

/* ---------- 14. CTA band --------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 880px) { .cta-band__inner { grid-template-columns: 1.2fr .8fr; } .cta-band__actions { justify-self: end; } }
.cta-band .float-leaf { opacity: .18; color: var(--cream); }

/* ---------- 15. footer ------------------------------------------------------------ */
.site-footer { background: var(--kraft); color: var(--ink); padding: var(--space-8) 0 var(--space-6); margin-top: 0; position: relative; }
.site-footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--space-7); } }
.site-footer__brand img { width: 180px; height: auto; margin-bottom: var(--space-4); }
.site-footer__statement { color: var(--ink-2); font-size: var(--step--1); max-width: 34ch; }
.site-footer__heading { font: 800 .8rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--brown); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.site-footer li { display: flex; align-items: flex-start; gap: .5rem; }
.site-footer li .icon { flex: none; width: 1.2em; height: 1.2em; color: var(--sorrel); margin-top: .2em; }
.site-footer a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; }
.site-footer a:hover { color: var(--sorrel); text-decoration: underline; }
.site-footer__note { display: flex; gap: .5rem; align-items: flex-start; margin-top: var(--space-4); font-size: .85rem; color: var(--ink-2); background: color-mix(in srgb, var(--cream) 55%, transparent); padding: .8rem 1rem; border-radius: var(--r-md); }
.site-footer__note .icon { flex: none; width: 1.2em; height: 1.2em; color: var(--brown); margin-top: .15em; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 2px dashed var(--kraft-3); font-size: .85rem; color: var(--ink-2); }
.site-footer__legal p { margin: 0; }
.site-footer__disclaimer { font-size: .8rem; color: var(--ink-2); max-width: 90ch; margin-top: var(--space-4); }
.social { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.social__link { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; background: var(--cream-2); font-weight: 700; text-decoration: none; min-height: 44px; }
.social__link .icon { width: 1.3em; height: 1.3em; color: var(--sorrel); }
.social__link:hover { background: var(--sorrel); color: var(--cream) !important; text-decoration: none !important; }
.social__link:hover .icon { color: var(--cream); }

/* ---------- 16. page hero (inner pages) ---------------------------------------------- */
.page-hero { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 60% at 90% 10%, color-mix(in srgb, var(--turmeric-2) 70%, transparent), transparent 70%), radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--sage-2) 90%, transparent), transparent 70%); }
.page-hero .container { position: relative; }
.page-hero h1 { font-size: var(--step-4); max-width: 16ch; }
.page-hero .lead { max-width: 58ch; }
.breadcrumb { font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--space-3); }
.breadcrumb a { color: var(--ink-2); }

/* ---------- 17. scroll reveal & motion prefs ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay-1 { transition-delay: .1s; }
.reveal--delay-2 { transition-delay: .2s; }
.reveal--delay-3 { transition-delay: .3s; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .hero__copy > *, .hero__media { opacity: 1; transform: none; }
  .ribbon__track { animation: none; }
}

/* anchors land below the sticky header */
[id] { scroll-margin-top: calc(84px + var(--space-4)); }
:target.product-card { outline: 3px solid var(--turmeric); outline-offset: 4px; }

/* row of tags used as chips (e.g. garden ingredients) */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem; }
.chips__label { font: 800 .8rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }

/* ---------- 18. utilities ------------------------------------------------------------- */
.text-center { text-align: center; }
.muted { color: var(--ink-2); }
.text-lg { font-size: var(--step-1); }
.mt-8 { margin-top: var(--space-8); }
.link-icon { display: inline-flex; align-items: center; gap: .6rem; }
.btn-row--center { justify-content: center; }
.split--top { align-items: start; }
.media-arch--sm { width: min(100%, 460px); margin-inline: auto; }
.media-caption--br-in { right: 8%; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0 !important; }
.flow > * + * { margin-top: var(--space-4); }
.max-ch { max-width: 65ch; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.botanical { width: 64px; height: 64px; }

/* ---------- 19. 'more' tile that completes a product grid ------------------------------ */
.more-tile { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--sage-2); overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.more-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--ink); }
.more-tile__media { position: relative; aspect-ratio: 4 / 3.4; background: var(--kraft); }
.more-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.more-tile__media .sticker { position: absolute; left: .9rem; top: .9rem; }
.more-tile__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.more-tile h3 { margin: 0; font-size: var(--step-1); }
.more-tile p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.more-tile .product-card__link { margin-top: auto; padding-top: var(--space-3); }


/* ==== pages\404.css ==== */
/* ---------- 404 page (src/pages/404.mjs) ------------------------------------------ */
.page-404 .page-hero { padding-block: clamp(4rem, 12vw, 9rem); text-align: center; }
.page-404 .page-hero h1, .page-404 .page-hero .lead { margin-inline: auto; }
.page-404 .page-hero .btn-row { justify-content: center; margin-top: var(--space-6); }
.page-404__art { width: clamp(84px, 16vw, 132px); height: auto; margin: 0 auto var(--space-4); color: var(--sorrel); stroke-width: 1.4; }
.page-404 .float-leaf { width: clamp(120px, 18vw, 220px); opacity: .14; }


/* ==== pages\about.css ==== */
/* ==========================================================================
   Our Story (about) — page-specific pieces. Everything else reuses site.css.
   ========================================================================== */

/* ---- "Grown & blended" alternating timeline (on the leaf-green block) ---- */
.page-about .process { position: relative; display: grid; gap: var(--space-7); margin: var(--space-6) 0 0; padding: 0; }
/* the twine: a dashed line the steps hang from */
.page-about .process::before {
  content: ""; position: absolute; top: .5rem; bottom: .5rem; left: 1.35rem;
  border-left: 2px dashed color-mix(in srgb, var(--cream) 45%, transparent);
}
.page-about .process__step { position: relative; display: grid; gap: var(--space-5); padding-left: 3.6rem; }
.page-about .process__num { position: absolute; left: 0; top: 0; z-index: 1; box-shadow: 0 0 0 6px var(--leaf-2), var(--shadow); }
.page-about .process__copy .botanical { width: 56px; height: 56px; color: var(--turmeric-2); stroke-width: 1.5; margin-bottom: var(--space-3); }
.page-about .process__copy h3 { margin-bottom: var(--space-2); }
.page-about .process__copy p { opacity: .92; max-width: 48ch; }
.page-about .process__media { position: relative; width: min(100%, 400px); }
.page-about .process__step:nth-child(even) .process__media { width: min(100%, 440px); }

@media (min-width: 880px) {
  .page-about .process { gap: var(--space-8); margin-top: var(--space-7); }
  .page-about .process::before { left: 50%; transform: translateX(-50%); }
  .page-about .process__step { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 8vw, 6rem); align-items: center; padding-left: 0; }
  .page-about .process__num { left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .page-about .process__copy, .page-about .process__media { grid-row: 1; }
  /* odd steps: words left, photo right — even steps: swap */
  .page-about .process__step:nth-child(odd) .process__copy { grid-column: 1; justify-self: end; }
  .page-about .process__step:nth-child(odd) .process__media { grid-column: 2; justify-self: start; }
  .page-about .process__step:nth-child(even) .process__copy { grid-column: 2; }
  .page-about .process__step:nth-child(even) .process__media { grid-column: 1; justify-self: end; }
  /* a gentle stagger so the four steps never line up like boxes */
  .page-about .process__step:nth-child(even) { margin-top: calc(var(--space-6) * -1); }
}

/* ---- gift boxes: two photos, the second one dropped a little ---- */
.page-about .gift-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.page-about .gift-duo__item { position: relative; }
.page-about .gift-duo__item:nth-child(2) { margin-top: var(--space-7); }


/* ---- About us · mission · vision (Radia's words) ---- */
.page-about .about-story { max-width: 68ch; margin-inline: auto; text-align: center; }
.page-about .about-story p:not(.lead) { color: var(--ink-2); font-size: var(--step-0); line-height: 1.7; }
.page-about .mv-grid { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
@media (min-width: 800px) { .page-about .mv-grid { grid-template-columns: 1.25fr 1fr; align-items: stretch; } }
.page-about .mv-card { position: relative; padding: var(--space-6); background: var(--cream-2); border-radius: var(--r-lg); box-shadow: var(--shadow); border-top: 5px solid var(--sorrel); }
.page-about .mv-card--vision { border-top-color: var(--leaf); }
.page-about .mv-card .icon, .page-about .mv-card .botanical { width: 2.4rem; height: 2.4rem; margin-bottom: var(--space-3); color: var(--sorrel); stroke-width: 1.6; }
.page-about .mv-card--vision .botanical { color: var(--leaf); }
.page-about .mv-card p:last-child { margin: 0; color: var(--ink-2); }
.page-about .mv-card--vision p:last-child { font: 500 var(--step-1)/1.45 var(--font-display); color: var(--ink); }
.page-about .mv-verse { margin: var(--space-7) auto 0; max-width: 40ch; text-align: center; }
.page-about .mv-verse blockquote { margin: 0; }
.page-about .mv-verse blockquote p { margin: 0; font: 400 clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem)/1.15 var(--font-hand); color: var(--sorrel-2); }
.page-about .mv-verse figcaption { margin-top: var(--space-2); font: 800 .78rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }


/* ==== pages\contact.css ==== */
/* ==========================================================================
   Contact page — small additions on top of site.css components
   ========================================================================== */

/* hero byline: a tiny round portrait + name/title under the lead */
.contact-byline { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.contact-byline__avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 3px solid var(--cream-2); box-shadow: var(--shadow); background: var(--kraft); }
.contact-byline__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.contact-byline p { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.35; }
.contact-byline strong { display: block; color: var(--ink); font-size: var(--step-0); }

/* form + contact card split */
.contact-split { align-items: start; }
.contact-aside { position: relative; }
.contact-aside__tag { position: absolute; top: -1.1rem; right: .6rem; z-index: 2; }
.contact-card { padding: var(--space-6) var(--space-5) var(--space-5); display: grid; gap: var(--space-5); }
@media (min-width: 880px) { .contact-card { padding: var(--space-6); } }
.contact-card h3 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.contact-card address { font-style: normal; }
.contact-card .notice { margin: 0; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.contact-list li { display: flex; gap: .8rem; align-items: flex-start; }
.contact-list .icon { flex: none; width: 1.4em; height: 1.4em; color: var(--sorrel); margin-top: .55em; }
.contact-list__label { display: block; font: 800 .74rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--brown); }
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration-color: var(--kraft-3); overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--sorrel); }
.contact-form__note { font-size: var(--step--1); color: var(--ink-2); margin: 0; }

/* "what people ask" pillars sit on kraft here, so the middle card gets the pale turmeric wash instead of kraft-on-kraft */
.page-contact .section--kraft .pillar:nth-child(2) { background: var(--turmeric-2); }
.page-contact .pillar .btn { margin-top: var(--space-4); }


/* ==== pages\manage.css ==== */
/* ---------- Radia's private schedule page (src/pages/manage.mjs) ---------------------------
   Big, friendly, thumb-sized controls — it's mostly used on a phone at the market. */
.page-manage .manage { position: relative; min-height: 70vh; }
.manage__wrap { position: relative; z-index: 1; }

/* locked state */
.manage-locked { max-width: 520px; margin: var(--space-7) auto; padding: var(--space-7) var(--space-6); text-align: center; }
.manage-locked > .icon { display: block; margin-inline: auto; width: 3rem; height: 3rem; color: var(--sorrel); margin-bottom: var(--space-3); }
.manage-locked h1 { font-size: var(--step-3); margin-bottom: var(--space-3); }
.manage-locked p { color: var(--ink-2); }
.manage-locked__muted { font-size: var(--step--1); margin-top: var(--space-5); }
.manage-locked__field { text-align: left; margin: var(--space-5) 0 var(--space-3); }
.manage-locked__field input { font-size: 1.2rem; letter-spacing: .08em; }
.manage-remember { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; margin-bottom: var(--space-4); font-weight: 700; font-size: var(--step--1); color: var(--ink-2); cursor: pointer; }
.manage-remember input { width: 1.25rem; height: 1.25rem; accent-color: var(--leaf); }
.manage-locked .btn { width: 100%; justify-content: center; }
.manage-locked .manage-error { text-align: left; }

/* hello */
.manage-hello { max-width: 62ch; margin-bottom: var(--space-6); }
.manage-hello h1 { font-size: var(--step-4); margin-bottom: var(--space-3); }
.manage-hello .btn .icon { width: 1em; height: 1em; }

.manage-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 960px) { .manage-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .manage-form { position: sticky; top: 96px; } }

/* form */
.manage-form { padding: var(--space-6); border-top: 6px solid var(--sorrel); }
@media (max-width: 479px) { .manage-form { padding: var(--space-5) var(--space-4); } }
.manage-form h2 { font-size: var(--step-2); margin-bottom: var(--space-4); }
.mfield { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--space-4); }
.mfield-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.mfield input { min-width: 0; }
.mfield-row .mfield { margin-bottom: 0; }
.mfield label, .manage-label { font: 800 var(--step--1) var(--font-body); color: var(--ink); }
.manage-opt { font-weight: 600; color: var(--ink-2); font-size: .82rem; margin-left: .3rem; }
.mfield input, .mfield select, .mfield textarea {
  width: 100%; min-height: 52px; padding: .7rem .9rem; border: 2px solid var(--kraft-2); border-radius: var(--r-md);
  background: var(--cream); color: var(--ink); font: 600 1.05rem var(--font-body); transition: border-color .15s, box-shadow .15s; }
.mfield textarea { min-height: 76px; resize: vertical; }
.mfield input:focus, .mfield select:focus, .mfield textarea:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 4px color-mix(in srgb, var(--leaf) 20%, transparent); }
.mfield input[type="date"], .mfield input[type="time"] { font-variant-numeric: tabular-nums; }

/* chips: recent markets + hours */
.manage-recent { margin-bottom: var(--space-4); padding: var(--space-4); border-radius: var(--r-md); background: var(--sage-2); }
.manage-recent .manage-label { display: block; margin: 0 0 .5rem; }
.manage-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.manage-chips--times { margin-bottom: .6rem; }
.mchip { min-height: 44px; padding: .45rem 1rem; border: 2px solid var(--kraft-2); border-radius: 999px; background: var(--cream-2); color: var(--ink); font: 700 var(--step--1) var(--font-body); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.mchip:hover { border-color: var(--leaf); transform: translateY(-1px); }
.mchip[aria-pressed="true"] { background: var(--leaf-2); border-color: var(--leaf-2); color: var(--cream); }
.mchip--market { border-color: var(--leaf); }
.mchip:focus-visible, .mbtn:focus-visible { outline: 3px solid var(--sorrel); outline-offset: 2px; }

.manage-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.manage-actions .btn--lg { flex: 1 1 auto; justify-content: center; }
.manage-actions .btn.is-busy { opacity: .7; cursor: progress; }
.manage-error { margin: 0 0 var(--space-4); padding: .7rem .9rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--hibiscus) 14%, var(--cream-2)); color: var(--sorrel-2); font-weight: 700; }

/* upcoming list */
.manage-list h2 { font-size: var(--step-2); margin-bottom: var(--space-3); }
.manage-month { margin: var(--space-5) 0 var(--space-3); font: 800 .8rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--leaf-2); }
.manage-month:first-of-type { margin-top: 0; }
.manage-days { display: grid; gap: var(--space-3); }
.manage-day { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); align-items: center; padding: var(--space-4); background: var(--cream-2); border-radius: var(--r-lg); box-shadow: var(--shadow); border-left: 5px solid var(--leaf); }
.manage-day.is-editing { border-left-color: var(--turmeric); box-shadow: 0 0 0 3px var(--turmeric), var(--shadow); }
.manage-day__date { display: grid; place-items: center; width: 3.6rem; padding: .45rem 0; border-radius: var(--r-md); background: var(--sorrel); color: var(--cream); line-height: 1; }
.manage-day__date span { font: 800 .7rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.manage-day__date b { font: 700 1.7rem var(--font-display); margin-top: .15rem; }
.manage-day__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.manage-day__info strong { font-size: var(--step-0); overflow-wrap: anywhere; }
.manage-day__info span { color: var(--ink-2); font-size: var(--step--1); }
.manage-day__info em { color: var(--ink-2); font-size: .85rem; }
.manage-day__actions { grid-column: 1 / -1; display: flex; gap: .5rem; justify-content: flex-end; }
@media (min-width: 560px) { .manage-day { grid-template-columns: auto 1fr auto; } .manage-day__actions { grid-column: auto; } }
.mbtn { display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; padding: .4rem 1rem; border: 2px solid var(--kraft-2); border-radius: 999px; background: transparent; color: var(--ink); font: 700 var(--step--1) var(--font-body); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.mbtn:hover { background: var(--kraft); }
.mbtn--danger { color: var(--sorrel); border-color: color-mix(in srgb, var(--sorrel) 40%, transparent); }
.mbtn--danger:hover, .mbtn--danger[data-confirm="1"] { background: var(--sorrel); border-color: var(--sorrel); color: var(--cream); }
.manage-empty { display: flex; gap: .6rem; align-items: center; padding: var(--space-5); border: 2px dashed var(--kraft-2); border-radius: var(--r-lg); color: var(--ink-2); }
.manage-empty .icon { width: 1.4rem; height: 1.4rem; color: var(--leaf); flex: none; }

/* toast */
.manage-toast { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); z-index: 300; max-width: calc(100% - 2rem); padding: .9rem 1.4rem; border-radius: 999px; background: var(--leaf-2); color: var(--cream); font-weight: 800; box-shadow: var(--shadow-lg); transform: translate(-50%, 20px); opacity: 0; transition: opacity .25s, transform .25s var(--ease); }
.manage-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .manage-toast { transition: none; } }


/* ---------- Preorders page (src/pages/preorders-admin.mjs) ------------------------------------- */
.po-mailnote { display: flex; gap: .6rem; align-items: flex-start; max-width: 70ch; margin: 0 0 var(--space-5); padding: .8rem 1rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--turmeric-2) 45%, var(--cream-2)); font-size: var(--step--1); }
.po-mailnote .icon { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .1rem; color: var(--mango-2); }
.po-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-5); }
.po-tabs .mchip span { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; margin-left: .3rem; padding: 0 .35rem; border-radius: 999px; background: var(--kraft); font-size: .78rem; }
.po-tabs .mchip[aria-pressed="true"] span { background: color-mix(in srgb, var(--cream) 22%, transparent); }
.po-list { display: grid; gap: var(--space-4); max-width: 760px; }
.po-card { padding: var(--space-5); background: var(--cream-2); border-radius: var(--r-lg); box-shadow: var(--shadow); border-left: 6px solid var(--turmeric); }
.po-card--accepted { border-left-color: var(--leaf); }
.po-card--declined { border-left-color: var(--kraft-3); opacity: .92; }
.po-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-bottom: var(--space-3); }
.po-card__name { margin: 0; font-size: var(--step-1); overflow-wrap: anywhere; }
.po-card__time { flex-basis: 100%; font-size: .82rem; color: var(--ink-2); }
.po-status { padding: .15rem .65rem; border-radius: 999px; font: 800 .72rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.po-status--new { background: var(--turmeric); color: var(--ink); }
.po-status--accepted { background: var(--leaf); color: var(--cream); }
.po-status--declined { background: var(--kraft-2); color: var(--ink); }
.po-items { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--sage-2); }
.po-items li { padding: .2rem 0; overflow-wrap: anywhere; }
.po-items b { color: var(--leaf-2); }
.po-meta { display: grid; grid-template-columns: auto 1fr; gap: .3rem var(--space-3); margin: 0 0 var(--space-4); font-size: var(--step--1); }
.po-meta dt { font-weight: 800; color: var(--ink-2); }
.po-meta dd { margin: 0; overflow-wrap: anywhere; }
.po-meta a { color: var(--sorrel); font-weight: 700; }
.po-notes { white-space: pre-line; }
.po-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.po-actions .btn { min-height: 44px; }
.po-decided { margin: 0; font-size: var(--step--1); font-weight: 700; color: var(--ink-2); flex: 1 1 auto; }
.po-note-sent { flex-basis: 100%; margin: 0; font-size: var(--step--1); font-style: italic; color: var(--ink-2); }
.po-panel { flex-basis: 100%; display: grid; gap: .5rem; padding: var(--space-4); border-radius: var(--r-md); background: var(--sage-2); }
.po-panel--decline { background: color-mix(in srgb, var(--kraft) 55%, var(--cream-2)); }
.po-panel label { font-weight: 800; font-size: var(--step--1); }
.po-panel textarea { width: 100%; min-height: 80px; padding: .7rem .9rem; border: 2px solid var(--kraft-2); border-radius: var(--r-md); background: var(--cream-2); font: 600 1rem var(--font-body); resize: vertical; }
.po-panel textarea:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 4px color-mix(in srgb, var(--leaf) 20%, transparent); }
.po-panel__hint { margin: 0; font-size: .85rem; color: var(--ink-2); }
.po-panel__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* ---------- Stock page (src/pages/stock-admin.mjs) ---------- */
.stock-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem var(--space-4); max-width: 760px; margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--sage-2); font-weight: 800; }
.stock-group { max-width: 760px; margin-bottom: var(--space-6); }
.stock-group h2 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.stock-list { display: grid; gap: .5rem; }
.stock-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: .55rem .9rem .55rem 1.1rem; background: var(--cream-2); border: 2px solid var(--kraft-2); border-radius: var(--r-md); transition: border-color .15s, background-color .15s; }
.stock-row.is-out { background: var(--kraft); border-color: var(--kraft-3); }
.stock-row__label { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; min-height: 44px; align-content: center; cursor: pointer; }
.stock-row__name { font-weight: 800; overflow-wrap: anywhere; }
.stock-row.is-out .stock-row__name { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.stock-row__note { font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.stock-switch { position: relative; flex: none; display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; }
.stock-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.stock-switch__ui { position: relative; width: 3.4rem; height: 2rem; border-radius: 999px; background: var(--leaf); transition: background-color .15s; flex: none; }
.stock-switch__ui::after { content: ""; position: absolute; top: .25rem; left: 1.65rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--cream-2); box-shadow: 0 1px 4px rgb(0 0 0 / .3); transition: left .15s var(--ease); }
.stock-switch input:not(:checked) + .stock-switch__ui { background: var(--sorrel); }
.stock-switch input:not(:checked) + .stock-switch__ui::after { left: .25rem; }
.stock-switch input:focus-visible + .stock-switch__ui { outline: 3px solid var(--turmeric); outline-offset: 3px; }
.stock-switch input:disabled { cursor: progress; }
.stock-switch__text { min-width: 5.6rem; font: 800 var(--step--1) var(--font-body); color: var(--leaf-2); }
.stock-row.is-out .stock-switch__text { color: var(--sorrel); }
@media (prefers-reduced-motion: reduce) { .stock-switch__ui, .stock-switch__ui::after { transition: none; } }


/* ==== pages\markets.css ==== */
/* ==========================================================================
   Markets page — small additions on top of site.css (tokens only)
   ========================================================================== */

/* hero: the no-storefront notice sits directly under the lead and must not be missed */
.page-markets .page-hero .notice { margin-top: var(--space-5); max-width: 62ch; }
.page-markets .page-hero .notice p { font-size: var(--step-0); font-weight: 600; }

/* aside beside the market list: the tent photo + "usually you'll find us" */
.market-aside .card__body h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.market-aside__muted { color: var(--ink-2); font-size: var(--step--1); }
@media (min-width: 880px) { .market-aside { position: sticky; top: calc(84px + var(--space-4)); } }

/* numbered "how to spot the tent" list — uses the shared numbered sticker */
.spot-list { margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); }
.spot-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.spot-list h3 { font-size: var(--step-1); margin: .35rem 0 .2rem; }
.spot-list p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }

/* preorder "how it works" card with an overlapping sticker */
.pickup-card { position: relative; padding: var(--space-6) var(--space-5) var(--space-5); width: min(100%, 520px); margin-inline: auto; overflow: visible; }
.pickup-card h3 { margin-bottom: var(--space-3); }
.pickup-card .checklist { margin: 0; }
.pickup-card__sticker { position: absolute; top: -1.2rem; right: 1rem; }


/* ---------- live booth calendar (filled by assets/js/schedule.js) ------------------------------ */
.booth-cal { padding: var(--space-5); margin-bottom: var(--space-6); border-top: 6px solid var(--sorrel); background:
  radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--turmeric-2) 35%, transparent) 0%, transparent 60%), var(--cream-2); }
.booth-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.booth-cal__title { margin: 0; font-size: var(--step-2); text-align: center; flex: 1; }
.booth-cal__nav { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--kraft-2); border-radius: 50%; background: var(--cream); color: var(--ink); cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; }
.booth-cal__nav .icon { width: 1.2rem; height: 1.2rem; transform: rotate(180deg); }
.booth-cal__nav--next .icon { transform: none; }
.booth-cal__nav:hover:not(:disabled) { border-color: var(--leaf); background: var(--sage-2); }
.booth-cal__nav:disabled { opacity: .35; cursor: default; }
.booth-cal__nav:focus-visible, .booth-cal__day:focus-visible { outline: 3px solid var(--sorrel); outline-offset: 2px; }
.booth-cal__table { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.booth-cal__table th { padding: 0 0 .4rem; font: 800 .72rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.booth-cal__table td { padding: 0; text-align: center; }
.booth-cal__day { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-height: 64px; margin: 0 auto; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font: 700 var(--step--1) var(--font-body); font-variant-numeric: tabular-nums; }
.booth-cal__day.is-out { color: color-mix(in srgb, var(--ink-2) 35%, transparent); }
.booth-cal__day.is-past:not(.is-out) { color: color-mix(in srgb, var(--ink-2) 60%, transparent); }
.booth-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--leaf); color: var(--leaf-2); }
.booth-cal__day.has-market { background: color-mix(in srgb, var(--sorrel) 12%, var(--cream)); color: var(--sorrel-2); cursor: pointer; transition: background-color .15s, color .15s, transform .15s; min-height: 44px; }
.booth-cal__day.has-market:hover { background: color-mix(in srgb, var(--sorrel) 22%, var(--cream)); transform: translateY(-1px); }
.booth-cal__day.has-market[aria-pressed="true"] { background: var(--sorrel); color: var(--cream); box-shadow: 0 8px 18px -8px rgb(163 18 47 / .6); }
.booth-cal__dot { position: absolute; bottom: 18%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--sorrel); }
.booth-cal__day[aria-pressed="true"] .booth-cal__dot { background: var(--turmeric-2); }
.booth-cal__detail { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--r-md); background: var(--sage-2); min-height: 3.5rem; }
.booth-cal__date { margin: 0 0 .5rem; font: 600 var(--step-1) var(--font-display); color: var(--leaf-2); }
.booth-cal__event { display: grid; grid-template-columns: 1fr auto; gap: .1rem var(--space-3); align-items: center; padding: .55rem 0; border-top: 1px dashed color-mix(in srgb, var(--leaf) 30%, transparent); }
.booth-cal__event:first-of-type { border-top: 0; padding-top: 0; }
.booth-cal__event strong { grid-column: 1; }
.booth-cal__event span { grid-column: 1; font-size: var(--step--1); color: var(--ink-2); }
.booth-cal__map { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: var(--leaf); color: var(--cream) !important; font: 800 var(--step--1) var(--font-body); text-decoration: none; }
.booth-cal__map:hover { background: var(--leaf-2); }
.booth-cal__hint { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.booth-cal__legend { display: flex; align-items: center; gap: .5rem; margin: var(--space-3) 0 0; font-size: .8rem; color: var(--ink-2); }
.booth-cal__legend .booth-cal__dot { position: static; margin: 0; }
.market-list__title { font-size: var(--step-1); margin: 0 0 var(--space-3); }
@media (max-width: 479px) { .booth-cal { padding: var(--space-4) var(--space-3); } .booth-cal__table { border-spacing: 2px; } .booth-cal__day { border-radius: 10px; } }
.market-aside .card__body > .btn--leaf { margin-bottom: var(--space-3); }


/* ==== pages\menu.css ==== */
/* ---------- menu page (src/pages/menu.mjs) ------------------------------------------
   Small additions on top of the shared product-card component. Tokens only. */

/* hero: the row of jump pills + sticky-header-safe anchors */
.page-menu .menu-jump { margin-top: var(--space-5); }
@media (max-width: 879px) {
  /* on phones the category pills stick under the header so you can hop between teas / pastries / gifts */
  .page-menu .menu-jump { position: sticky; top: 72px; z-index: 90; margin: var(--space-5) calc(var(--gutter) * -1) 0; padding: .6rem var(--gutter); background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .page-menu .menu-jump::-webkit-scrollbar { display: none; }
  .page-menu .menu-jump .btn { flex: none; }
}
.page-menu .btn--sm { min-height: 44px; }

/* card extras: status row, serving note, variety pills, allergens */
.product-card__status { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.product-card__note { margin: var(--space-2) 0 0; font-size: var(--step--1); font-style: italic; color: var(--ink-2); }
.product-card__variants { margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: var(--step--1); color: var(--ink-2); }
.product-card__variants strong { color: var(--leaf-2); margin-right: .15rem; }
.pill { display: inline-flex; align-items: center; padding: .15rem .7rem; border-radius: 999px; background: var(--kraft); color: var(--ink); font: 700 .78rem/1.5 var(--font-body); letter-spacing: .03em; }
.product-card__allergens { margin: var(--space-2) 0 0; font-size: .82rem; color: var(--ink-2); }
.product-card--placeholder .product-card__body { justify-content: center; }
.product-card--unavailable .btn { display: none; }

/* split head (gift boxes) sits above its grid */
.menu-split { margin-bottom: var(--space-7); }

/* brewing guide: photo + copy inside a kraft card */
.brew-card { display: grid; align-items: stretch; }
.brew-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--kraft-2); }
.brew-card__media picture { position: absolute; inset: 0; }
.brew-card__media img { width: 100%; height: 100%; object-fit: cover; }
.brew-card__body { padding: var(--space-6); }
.brew-card__body .botanical { width: 48px; height: 48px; color: var(--sorrel); stroke-width: 1.6; margin-bottom: var(--space-3); }
.brew-card__body h3 { margin-bottom: var(--space-3); }
.brew-card__body p:not(.eyebrow) { color: var(--ink-2); }
.brew-card__tag { margin-top: var(--space-5); padding-left: .4rem; }
@media (min-width: 720px) {
  .brew-card { grid-template-columns: .9fr 1.1fr; }
  .brew-card__media { aspect-ratio: auto; }
  .brew-card__body { padding: var(--space-7); }
}

/* ---------- illustrated jar label (teas without a photo yet) --------------------------
   Used on menu + homepage cards; --accent comes from menu.json → accent. */
.product-card__media--art { background: var(--accent, var(--leaf)); }
.art-tile { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; color: var(--cream);
  background:
    radial-gradient(110% 85% at 25% 15%, color-mix(in srgb, var(--accent) 45%, var(--cream)) 0%, transparent 60%),
    radial-gradient(90% 80% at 90% 100%, color-mix(in srgb, var(--accent) 70%, #000) 0%, transparent 70%),
    var(--accent); }
.art-tile .botanical { position: absolute; stroke-width: 1.3; transition: transform .8s var(--ease); }
.art-tile__big { width: 72%; height: auto; right: -12%; bottom: -14%; opacity: .32; transform: rotate(-14deg); }
.art-tile__small { width: 30%; height: auto; left: 6%; top: 8%; opacity: .2; transform: rotate(18deg); }
.product-card:hover .art-tile__big { transform: rotate(-6deg) scale(1.05); }
.art-tile__label { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; max-width: 78%; padding: .9rem 1.6rem 1rem;
  background: var(--cream-2); color: var(--ink); text-align: center; border-radius: 999px;
  box-shadow: 0 0 0 4px var(--cream-2), 0 0 0 6px color-mix(in srgb, var(--accent) 75%, #000), 0 14px 30px -12px rgb(0 0 0 / .45);
  transform: rotate(-3deg); }
.art-tile__label small { font: 800 .66rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.art-tile__label b { font: 600 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.1 var(--font-display); font-variation-settings: "SOFT" 60; }
.product-card--feature .art-tile__label b { font-size: var(--step-2); }
@media (prefers-reduced-motion: reduce) { .art-tile .botanical { transition: none; } }

/* Small / Large prices (teas) */
.price-sizes { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.price-size { display: inline-flex; align-items: baseline; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; background: var(--sage-2); }
.price-size small { font: 800 .7rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--leaf-2); }
.price-size .price { font-size: var(--step--1); }

.price__unit { font-weight: 600; font-size: .8em; color: var(--ink-2); }
.price--note { font-size: var(--step--1); font-weight: 700; color: var(--leaf-2); }

/* caffeine sticker */
.sticker--caffeine { background: var(--brown); color: var(--cream); border-color: var(--cream-2); }

/* per-blend brewing note */
.product-card__brew { display: flex; gap: .5rem; align-items: flex-start; margin: var(--space-2) 0 0; padding: .6rem .8rem; border-radius: var(--r-sm); background: color-mix(in srgb, var(--kraft) 55%, transparent); font-size: .86rem; color: var(--ink-2); }
.product-card__brew .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; color: var(--sorrel); }
.product-card__brew strong { color: var(--ink); }
.brew-card__exceptions { font-size: var(--step--1); }

/* ---------- clickable herb ingredients ------------------------------------------------- */
.herb-link { color: var(--leaf-2); font-weight: 700; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--leaf) 60%, transparent); border-radius: 3px; transition: color .15s, background-color .15s; }
.herb-link:hover { color: var(--sorrel); text-decoration-style: solid; background: color-mix(in srgb, var(--turmeric-2) 45%, transparent); }
.herb-hint { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 var(--space-5); font-size: var(--step--1); color: var(--ink-2); }
.herb-hint .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: var(--leaf); }
.herb-hint__sample { color: var(--leaf-2); font-weight: 700; text-decoration: underline dotted 2px; text-underline-offset: .22em; }

/* ---------- tea finder pills --------------------------------------------------------------- */
.tea-filter { margin: calc(var(--space-5) * -1) 0 var(--space-4); }
.tea-filter__label { display: flex; align-items: center; gap: .4rem; margin: 0 0 var(--space-3); font: 700 var(--step--1) var(--font-body); color: var(--leaf-2); }
.tea-filter__label .icon { width: 1.1rem; height: 1.1rem; }
.tea-filter__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-pill { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem 1rem; border: 2px solid var(--kraft-2); border-radius: 999px; background: var(--cream-2); color: var(--ink); font: 700 var(--step--1) var(--font-body); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.filter-pill span { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 999px; background: var(--kraft); font-size: .78rem; }
.filter-pill:hover { border-color: var(--leaf); transform: translateY(-1px); }
.filter-pill[aria-pressed="true"] { background: var(--leaf-2); border-color: var(--leaf-2); color: var(--cream); }
.filter-pill[aria-pressed="true"] span { background: color-mix(in srgb, var(--cream) 22%, transparent); }
.filter-pill:focus-visible { outline: 3px solid var(--sorrel); outline-offset: 2px; }
@media (max-width: 639px) {
  .tea-filter__opts { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .3rem; scrollbar-width: none; }
  .tea-filter__opts::-webkit-scrollbar { display: none; }
  .filter-pill { flex: none; }
}
/* when filtered, the feature card stops spanning the row so results stay a tidy grid */
@media (min-width: 960px) {
  .product-grid.is-filtered .product-card--feature { grid-column: auto; flex-direction: column; }
  .product-grid.is-filtered .product-card--feature .product-card__media { flex: none; aspect-ratio: 4 / 3.4; min-height: 0; }
  .product-grid.is-filtered .product-card--feature .product-card__body { padding: var(--space-5); justify-content: flex-start; }
  .product-grid.is-filtered .product-card--feature .product-card__title { font-size: var(--step-2); }
}

/* ---------- herb shelf --------------------------------------------------------------------- */
.herb-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .herb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .herb-grid { grid-template-columns: repeat(3, 1fr); } }
.herb-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--cream-2); border-radius: var(--r-lg); box-shadow: var(--shadow); border-top: 4px solid var(--sage); scroll-margin-top: 96px; }
.herb-card:nth-child(3n+2) { border-top-color: var(--turmeric); }
.herb-card:nth-child(3n) { border-top-color: var(--hibiscus); }
.herb-card:target { box-shadow: 0 0 0 3px var(--leaf), var(--shadow-lg); }
.herb-card__head { display: flex; align-items: center; gap: var(--space-3); }
.herb-card__art { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--sage-2); color: var(--leaf-2); }
.herb-card__art .botanical, .herb-card__art .icon { width: 2.1rem; height: 2.1rem; stroke-width: 1.6; }
.herb-card__name { margin: 0; font-size: var(--step-1); }
.herb-card__aka { margin: .1rem 0 0; font-size: .82rem; font-style: italic; color: var(--ink-2); }
.herb-card__summary { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: var(--step--1); }
.herb-card__links { font-size: .86rem; color: var(--ink-2); }
.herb-card__links p { margin: 0 0 .25rem; }
.herb-card__links strong { color: var(--ink); }
.herb-card__links a { color: var(--sorrel); font-weight: 700; }
.herb-card__more { margin-top: auto; padding-top: var(--space-2); }
.herb-card__more > summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem; border-radius: 999px; background: var(--leaf); color: var(--cream); font: 700 var(--step--1) var(--font-body); cursor: pointer; list-style: none; transition: background-color .15s, transform .15s; }
.herb-card__more > summary::-webkit-details-marker { display: none; }
.herb-card__more > summary::after { content: "+"; font-size: 1.1em; line-height: 1; }
.herb-card__more[open] > summary::after { content: "\2013"; }
.herb-card__more > summary:hover { background: var(--leaf-2); transform: translateY(-1px); }
.herb-card__more > summary:focus-visible { outline: 3px solid var(--sorrel); outline-offset: 2px; }
.herb-notes { padding-top: var(--space-4); }
.herb-benefits li { position: relative; padding-left: 1.4rem; margin-bottom: .6rem; font-size: var(--step--1); color: var(--ink-2); }
.herb-benefits li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55rem; height: .55rem; border-radius: 50% 0 50% 0; background: var(--leaf); }
.herb-benefits strong { display: block; color: var(--ink); }
.herb-caution { display: flex; gap: .55rem; align-items: flex-start; margin: var(--space-3) 0 0; padding: .75rem .9rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--turmeric-2) 45%, var(--cream-2)); font-size: .88rem; color: var(--ink); }
.herb-caution .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; color: var(--mango-2); }
.herb-disclaimer { display: flex; gap: .6rem; align-items: flex-start; max-width: 70ch; margin: var(--space-7) auto 0; font-size: .86rem; color: var(--ink-2); }
.herb-disclaimer .icon { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .1rem; }

/* ---------- herb popup (native <dialog>) ------------------------------------------------------ */
html.has-dialog { overflow: hidden; scrollbar-gutter: stable; }
.herb-disclaimer--teas { margin-top: var(--space-6); }
.herb-dialog { width: min(560px, calc(100% - 2rem)); max-height: min(86vh, 760px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--cream-2); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; }
.herb-dialog::backdrop { background: rgb(43 37 32 / .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.herb-dialog[open] { animation: herb-pop .28s var(--ease); }
.herb-dialog[open]::backdrop { animation: herb-fade .28s ease; }
@keyframes herb-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes herb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes herb-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.herb-dialog__inner { position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6) var(--space-6) var(--space-5); border-top: 6px solid var(--leaf); }
.herb-dialog__close { position: absolute; top: .8rem; right: .8rem; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--kraft); color: var(--ink); cursor: pointer; transition: background-color .15s; }
.herb-dialog__close:hover { background: var(--kraft-2); }
.herb-dialog__close:focus-visible { outline: 3px solid var(--sorrel); outline-offset: 2px; }
.herb-dialog__close .icon { width: 1.3rem; height: 1.3rem; }
.herb-dialog__head { display: flex; align-items: center; gap: var(--space-4); padding-right: 3rem; }
.herb-dialog__head .herb-card__art { width: 4rem; height: 4rem; }
.herb-dialog__head .herb-card__art .botanical { width: 2.7rem; height: 2.7rem; }
.herb-dialog__head .eyebrow { margin-bottom: .2rem; }
.herb-dialog__head h2 { margin: 0; font-size: var(--step-3); line-height: 1.05; }
.herb-dialog__summary { margin: var(--space-4) 0 0; font-size: var(--step-0); color: var(--ink-2); }
.herb-dialog [data-herb-body] { margin-top: var(--space-4); }
.herb-dialog .herb-card__links { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--kraft-2); }
.herb-dialog__disclaimer { margin: var(--space-4) 0 0; font-size: .76rem; color: var(--ink-2); }
@media (max-width: 639px) {
  /* bottom sheet on phones */
  .herb-dialog { width: 100%; max-width: none; max-height: 88vh; max-height: 88dvh; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .herb-dialog[open] { animation-name: herb-sheet; }
  .herb-dialog__inner { padding: var(--space-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .herb-dialog[open], .herb-dialog[open]::backdrop { animation: none; } }

/* drinks: only two cards, so centre them instead of leaving an empty third column */
@media (min-width: 960px) { #drinks .product-grid { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; } }

/* ---------- sold-out items (set by Radia on her Stock page; src/assets/js/stock.js) ---------- */
.sticker--soldout { background: var(--ink); color: var(--cream); border-color: var(--cream-2); }
.product-card.is-soldout .product-card__title,
.product-card.is-soldout .product-card__tagline { opacity: .7; }
.product-card.is-soldout .product-card__media img,
.product-card.is-soldout .art-tile { filter: grayscale(.85); opacity: .75; }


/* ==== pages\preorder.css ==== */
/* ==========================================================================
   Preorder page (src/pages/preorder.mjs) — page-specific layout only.
   Everything else reuses site.css components. All selectors are prefixed
   so they cannot collide with other pages' CSS in the bundle.
   ========================================================================== */

/* hero: copy + photo, stacks on mobile */
.page-preorder .page-hero h1 { max-width: 20ch; }
.preorder-hero { display: grid; gap: var(--space-6); align-items: center; }
.preorder-hero__media { position: relative; width: min(100%, 480px); margin-inline: auto; }
.preorder-hero__sticker { position: absolute; right: -.5rem; top: -1rem; z-index: 2; }
@media (min-width: 880px) {
  .preorder-hero { grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); }
  .preorder-hero__media { justify-self: end; }
  .preorder-hero__sticker { right: -1.2rem; }
}

/* the 3-step strip: numbered stickers, like the labels on the pouches */
.preorder-steps { list-style: none; padding: 0; margin: var(--space-7) 0 0; display: grid; gap: var(--space-3); }
.preorder-step {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--cream-2) 85%, transparent);
  border: 1.5px solid var(--kraft-2); border-radius: var(--r-md);
}
.preorder-step__title { display: block; font-weight: 800; margin-bottom: .15rem; }
.preorder-step p { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
@media (min-width: 720px) {
  .preorder-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .preorder-step:nth-child(2) { transform: translateY(.6rem); }
}

/* form (≈60%) + "good to know" sidebar; form first on mobile */
.preorder-layout { display: grid; gap: var(--space-6); }
@media (min-width: 960px) {
  .preorder-layout { grid-template-columns: 1.4fr .8fr; align-items: start; gap: clamp(2rem, 5vw, 4rem); }
  .preorder-aside { position: sticky; top: calc(84px + var(--space-4)); }
}

/* item picker: display-font legend, 44px tap targets on the steppers */
.page-preorder .preorder-picker legend { font: 600 var(--step-1)/1.2 var(--font-display); font-variation-settings: "SOFT" 40, "opsz" 24; padding: 0; margin-bottom: .2rem; }
.preorder-picker .picker { margin-top: var(--space-2); }
.page-preorder .picker__qty button { width: 44px; height: 44px; }

/* sidebar card */
.preorder-aside__body h2 { font-size: var(--step-2); margin-bottom: var(--space-3); }
.preorder-aside .checklist { margin: 0 0 var(--space-4); }
.preorder-aside__disclaimer { font-size: .82rem; color: var(--ink-2); margin-bottom: var(--space-5); }

/* size toggle (Small / Large) — one row per product, the toggle sits under the name */
.picker__item--sized { grid-template-columns: 1fr auto; grid-template-areas: "name qty" "sizes sizes"; }
.picker__item--sized > div:first-child { grid-area: name; }
.picker__item--sized .picker__qty { grid-area: qty; }
.picker__sizes { grid-area: sizes; display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.size-opt { position: relative; display: inline-flex; cursor: pointer; }
.size-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.size-opt span { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .35rem .95rem; border: 2px solid var(--kraft-2); border-radius: 999px; background: var(--cream); font: 700 var(--step--1) var(--font-body); color: var(--ink); transition: background-color .15s, border-color .15s, color .15s; }
.size-opt span b { font-weight: 800; color: var(--ink-2); }
.size-opt:hover span { border-color: var(--leaf); }
.size-opt input:checked + span { background: var(--leaf-2); border-color: var(--leaf-2); color: var(--cream); }
.size-opt input:checked + span b { color: var(--cream); }
.size-opt input:focus-visible + span { outline: 3px solid var(--sorrel); outline-offset: 2px; }
@media (min-width: 640px) {
  .picker__item--sized { grid-template-columns: 1fr auto auto; grid-template-areas: "name sizes qty"; }
}

/* preorder rows that are sold out: dimmed, no controls */
.picker__item.is-soldout { background: var(--kraft); border-color: var(--kraft-2); }
.picker__item.is-soldout .picker__name { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.picker__item.is-soldout .picker__sub { font-weight: 800; color: var(--sorrel); }
.picker__item.is-soldout .picker__qty, .picker__item.is-soldout .picker__sizes { display: none; }


/* ==== pages\privacy.css ==== */
/* ---------- privacy policy page (src/pages/privacy.mjs) ---------------------------- */
.policy .notice { margin-top: var(--space-2); }
.policy__glance { padding: var(--space-5); margin-top: var(--space-6); }
.policy__glance h2 { font-size: var(--step-2); margin-bottom: var(--space-3); }
.policy__glance .checklist { margin: 0; }

.policy-toc { margin: var(--space-6) 0 var(--space-4); padding: var(--space-4) var(--space-5); background: var(--sage-2); border-radius: var(--r-md); }
.policy-toc__title { font: 800 .8rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--leaf-2); margin: 0 0 var(--space-2); }
.policy-toc ol { margin: 0; padding-left: 1.3em; font-size: var(--step--1); column-gap: var(--space-6); }
.policy-toc li { break-inside: avoid; padding: .2rem 0; }
.policy-toc a { display: inline-block; min-height: 28px; }
@media (min-width: 640px) { .policy-toc ol { columns: 2; } }

.policy__section { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 2px dashed var(--kraft-2); }
.policy__section h2 { font-size: var(--step-2); margin-bottom: var(--space-3); }
.policy__section h3 { font-size: var(--step-1); margin: var(--space-5) 0 var(--space-2); }
.policy__section ul { margin: 0 0 var(--space-4); max-width: 65ch; }
.policy__section li + li { margin-top: .3rem; }


/* ==== generated: product accents ==== */
.accent-e9b32a { --accent: #e9b32a; }
.accent-6b4423 { --accent: #6b4423; }
.accent-b9552c { --accent: #b9552c; }
.accent-5b2a86 { --accent: #5b2a86; }
.accent-7a5ba6 { --accent: #7a5ba6; }
.accent-6e9a3c { --accent: #6e9a3c; }
.accent-2e7d3e { --accent: #2e7d3e; }
.accent-d93c63 { --accent: #d93c63; }
.accent-1d5a2b { --accent: #1d5a2b; }
.accent-e8611c { --accent: #e8611c; }
.accent-4e8b5f { --accent: #4e8b5f; }
.accent-3f7f8c { --accent: #3f7f8c; }
.accent-c9a23a { --accent: #c9a23a; }
.accent-55703a { --accent: #55703a; }
.accent-7e0c23 { --accent: #7e0c23; }
.accent-4a5da0 { --accent: #4a5da0; }
.accent-a3122f { --accent: #a3122f; }
.accent-5e7f3b { --accent: #5e7f3b; }
.accent-a9763b { --accent: #a9763b; }