/* ==========================================================================
   Shroom Health Amsterdam: shop stylesheet (concept "Forest", build in work/build.py)
   Textured dark-green header/hero/footer, cream paper content, rounded cards.
   Mobile first (375). Fonts are self-hosted (OFL); no request leaves the site.
   ========================================================================== */

@font-face { font-family: "Fraunces"; src: url(/assets/fonts/fraunces-600-latin.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Commissioner"; src: url(/assets/fonts/commissioner-var-latin.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---- Design tokens ------------------------------------------------------------ */
:root {
  --forest-950: #0F2117;
  --forest-900: #142A1E;   /* header, hero, footer */
  --forest-800: #1B3626;   /* primary button on cream */
  --forest-700: #24472F;
  --moss-500:   #4F6B3F;   /* small text on cream: 5.6:1 on cream-50, 5.2:1 on cream-100, 6.0:1 on white */
  --moss-300:   #D0DCC4;   /* muted text on forest (footer). Measured on the real textured pixels, not a flat colour:
                              >= 5.9:1 at the median pixel, >= 4.5:1 at the lightest 10 % (moss glow bottom-left) */
  --moss-100:   #E3EBD8;
  --cream-50:   #FBF7EE;   /* page */
  --cream-100:  #F5EEDD;
  --cream-200:  #EBE1C9;
  --cream-300:  #DCCFAF;
  --ink-900:    #1D1A14;   /* body text, 15.9:1 on cream-50 */
  --ink-700:    #3D372D;
  --ink-500:    #645B4D;   /* muted text, 6.3:1 on cream-50 */
  --mustard-400:#F2C12E;   /* logo yellow */
  --mustard-300:#F7D46A;
  --brick-600:  #B3352B;   /* logo red, toned: prices, remove, errors */

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-text: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .8125rem;  --fs-sm: .9375rem;  --fs-md: 1.0625rem;  --fs-lg: 1.25rem;
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-h2: clamp(1.875rem, 1.45rem + 1.8vw, 2.75rem);
  --fs-h1: clamp(2.6rem, 1.7rem + 3.9vw, 4.75rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 16px; --maxw: 1180px; --tap: 48px;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --shadow-card: 0 1px 0 rgba(29,26,20,.05), 0 14px 30px -18px rgba(20,42,30,.45);
  --shadow-lift: 0 30px 60px -24px rgba(0,0,0,.55);

  /* texture as inline SVG noise (no image files): grain = felt, mottle = forest floor, paper = cream */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 .92  0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  --tex-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .009' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .03  0 0 0 0 .08  0 0 0 0 .05  0 0 0 1.7 -.62'/%3E%3C/filter%3E%3Crect width='900' height='600' filter='url(%23m)'/%3E%3C/svg%3E");
  --tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .16  0 0 0 .35 -.12'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E");
}
@media (min-width: 768px)  { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ---- Base ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink-900); background: var(--cream-50);
  font: 400 var(--fs-md)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--mustard-400); outline-offset: 3px; border-radius: 6px; }
.paper :focus-visible { outline-color: var(--forest-800); }
#main:focus { outline: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s3); top: -80px; z-index: 50; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--mustard-400); color: var(--forest-900); font-weight: 700; }
.skip:focus { top: var(--s3); }
.eyebrow { font: 700 var(--fs-xs)/1.2 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mustard-300); }
.eyebrow--moss { color: var(--moss-500); }
.eyebrow i { font-style: italic; font-weight: 600; text-transform: none; letter-spacing: 0; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* buttons: pill, at least 52 px tall (tap target 48 px) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s5); border-radius: var(--r-pill); border: 2px solid transparent;
  font: 700 var(--fs-md)/1 var(--font-text); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn--mustard { background: var(--mustard-400); color: var(--forest-900); }
.btn--mustard:hover { background: var(--mustard-300); }
.btn--ghost { color: var(--cream-50); border-color: rgba(251,247,238,.45); }
.btn--ghost:hover { border-color: var(--cream-50); background: rgba(251,247,238,.06); }
.btn--forest { background: var(--forest-800); color: var(--cream-50); }
.btn--forest:hover:not([disabled]) { background: var(--forest-700); }
.btn--line { background: #fff; color: var(--forest-900); border-color: var(--cream-300); }
.btn--line:hover { border-color: var(--forest-800); }
.btn--block { width: 100%; }
.btn--lg { min-height: 58px; font-size: var(--fs-lg); }
.btn--sm { min-height: 48px; padding: 0 var(--s4); font-size: var(--fs-sm); }

/* ---- Announcement + header ------------------------------------------------------- */
.announce { background: var(--mustard-400); color: var(--forest-900); font: 600 var(--fs-xs)/1.3 var(--font-text); }
.announce__in { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px var(--s3); padding-block: 8px; text-align: center; }
.announce .opt { display: none; }
@media (min-width: 768px) { .announce .opt { display: inline; } }

.forest {
  background-color: var(--forest-900);
  background-image:
    var(--tex-grain),
    var(--tex-mottle),
    radial-gradient(55% 70% at 88% 18%, rgba(242,193,46,.13), transparent 62%),
    radial-gradient(45% 60% at 8% 95%, rgba(94,127,75,.38), transparent 70%),
    linear-gradient(165deg, #1E3B29 0%, var(--forest-900) 55%, var(--forest-950) 100%);
  background-size: 240px 240px, 900px 600px, auto, auto, auto;
  color: var(--cream-50);
}
.top--inner { padding-bottom: calc(var(--r-xl) + var(--s2)); }
.header { position: relative; z-index: 2; }
.header__bar {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand cart" "nav nav";
  align-items: center; gap: var(--s3) var(--s4); padding-block: var(--s3) var(--s2);
}
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; min-height: var(--tap); justify-self: start; }
.brand img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 3px var(--cream-100); }
.brand__name { display: block; font: 600 1.1875rem/1 var(--font-display); }
.brand__city { display: block; margin-top: 3px; font: 700 .6875rem/1 var(--font-text); letter-spacing: .26em; text-transform: uppercase; color: var(--mustard-300); }
.nav { grid-area: nav; }
.nav ul { display: flex; gap: var(--s2); list-style: none; }
.nav li { flex: 1 1 auto; display: flex; }
.nav a {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; white-space: nowrap;
  border-radius: var(--r-pill); background: rgba(251,247,238,.07); text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
}
.nav a[aria-current] { background: var(--cream-50); color: var(--forest-900); }
.cartbtn {
  grid-area: cart; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--s3); border-radius: var(--r-pill);
  background: var(--cream-50); color: var(--forest-900); text-decoration: none; font-weight: 700;
}
.cartbtn__label { display: none; }
.badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--brick-600); color: #fff; font: 700 .75rem/22px var(--font-text); text-align: center; box-shadow: 0 0 0 2px var(--forest-900);
}
@media (min-width: 768px) {
  .header__bar { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav cart"; padding-block: var(--s4); }
  .nav ul { justify-content: center; gap: var(--s1); }
  .nav li { flex: none; }
  .nav a { background: none; font-size: var(--fs-md); }
  .nav a:hover { background: rgba(251,247,238,.08); }
  .nav a[aria-current] { background: var(--cream-50); }
  .brand img { width: 56px; height: 56px; }
  .brand__name { font-size: 1.375rem; }
  .cartbtn { padding: 0 var(--s5) 0 var(--s4); }
  .cartbtn__label { display: inline; }
  .badge { position: static; box-shadow: none; }
}

/* ---- Hero (home) ------------------------------------------------------------------ */
.hero { padding-block: var(--s5) calc(var(--s8) + var(--s6)); }
.hero__in { display: grid; gap: var(--s6); align-items: center; }
.hero__copy { display: grid; gap: var(--s4); justify-items: start; }
.hero h1 { font-size: var(--fs-h1); color: var(--cream-50); max-width: 11ch; }
.hero h1 em { font-style: normal; color: var(--mustard-400); }
.lead { font-size: var(--fs-lg); line-height: 1.5; color: #E4E8DA; max-width: 34ch; }
.hero__cta { display: grid; gap: var(--s3); width: 100%; margin-top: var(--s2); }
.hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.hero__facts li {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: var(--r-pill);
  background: rgba(15,33,23,.55); border: 1px solid rgba(169,191,149,.28); font-size: var(--fs-sm); color: #DDE6D2;
}
.hero__facts .icon { width: 18px; height: 18px; color: var(--mustard-400); }
.hero__badge { order: -1; justify-self: center; position: relative; }
.patch { position: relative; width: 168px; aspect-ratio: 1; padding: 10px; border-radius: 50%; background: var(--cream-100); transform: rotate(-7deg); box-shadow: var(--shadow-lift); }
.patch::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px dashed rgba(247,212,106,.5); }
.patch img { width: 100%; height: 100%; }
@media (min-width: 560px) { .hero__cta { display: flex; flex-wrap: wrap; width: auto; } }
@media (min-width: 900px) {
  .hero { padding-block: var(--s7) calc(var(--s9) + var(--s5)); }
  .hero__in { grid-template-columns: 1.15fr .85fr; gap: var(--s7); }
  .hero__badge { order: 0; }
  .patch { width: min(380px, 100%); padding: 18px; }
  .patch::before { inset: -22px; border-width: 3px; }
}

/* ---- Cream paper overlapping the green with a rounded edge ------------------------- */
.paper { position: relative; margin-top: calc(-1 * var(--r-xl)); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--cream-50) var(--tex-paper); }
.section { padding-block: var(--s7); }
.section--tight { padding-block: var(--s6) var(--s7); }
@media (min-width: 900px) { .section { padding-block: var(--s8); } }
.section__head { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.section__head h1, .section__head h2 { font-size: var(--fs-h2); color: var(--forest-900); }
.section__note { color: var(--ink-500); max-width: 42ch; }
@media (min-width: 900px) { .section__head { grid-template-columns: 1fr auto; align-items: end; margin-bottom: var(--s6); } .section__note { text-align: right; } }
.page-title { font-size: var(--fs-h2); color: var(--forest-900); margin-bottom: var(--s5); }

/* ---- Product cards --------------------------------------------------------------- */
.grid3 { display: grid; gap: var(--s4); list-style: none; }
.card {
  height: 100%; display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto 1fr; gap: var(--s3) var(--s4); padding: var(--s3);
  background: #fff; border: 1px solid var(--cream-200); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.tile { display: block; border-radius: var(--r-md); background: var(--tint, var(--cream-100)); overflow: hidden; align-self: start; }
.tile img { mix-blend-mode: multiply; transition: transform .3s; }   /* the white photo background takes the tint */
.card:hover .tile img { transform: scale(1.03); }
.card__body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.card__latin { font-size: var(--fs-xs); font-style: italic; color: var(--ink-500); }
.card__display { font: 600 1.625rem/1 var(--font-display); color: var(--forest-900); }
.card h2, .card h3 { font: 600 var(--fs-sm)/1.35 var(--font-text); letter-spacing: 0; color: var(--ink-700); }
.card h2 a, .card h3 a { text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.chips li { padding: 3px 10px; border-radius: var(--r-pill); background: var(--moss-100); color: #33472A; font: 600 .75rem/1.6 var(--font-text); }
.card__buy { grid-column: 1 / -1; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--cream-200); }
.price { font: 600 1.5rem/1 var(--font-display); color: var(--brick-600); }
.price small { display: block; margin-top: 4px; font: 500 var(--fs-xs)/1 var(--font-text); color: var(--ink-500); }
.soldout { font-weight: 700; font-size: var(--fs-sm); color: var(--brick-600); }
@media (min-width: 640px) {
  .grid3 { grid-template-columns: repeat(2, 1fr); }
  .card { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: var(--s3) var(--s3) var(--s4); }
  .card__body, .card__buy { padding-inline: var(--s2); }
  .card__display { font-size: 2rem; }
}
@media (min-width: 1024px) { .grid3 { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }

/* ---- Trust strip ------------------------------------------------------------------ */
.trust { display: grid; gap: 2px; border-radius: var(--r-lg); overflow: hidden; background: var(--cream-200); border: 1px solid var(--cream-200); list-style: none; }
.trust__item { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4) var(--s5); background: var(--cream-100); }
.trust__ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--forest-800); color: var(--mustard-400); }
.trust__item strong { display: block; font-size: var(--fs-md); line-height: 1.3; color: var(--forest-900); }
.trust__item p span { display: block; font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.45; }
.trust__item a { color: var(--ink-500); }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust { grid-template-columns: repeat(4, 1fr); } }

/* ---- About / how ------------------------------------------------------------------- */
.about { display: grid; gap: var(--s6); }
.about__copy { display: grid; gap: var(--s4); align-content: start; }
.about__copy h2 { font-size: var(--fs-h2); color: var(--forest-900); }
.about__copy p { color: var(--ink-700); max-width: 52ch; }
.quality { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin-top: var(--s2); }
.quality li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--cream-300); background: #fff; font-weight: 600; font-size: var(--fs-sm); color: var(--forest-900); }
.quality .icon { width: 18px; height: 18px; color: var(--moss-500); }
.how { display: grid; gap: var(--s3); list-style: none; counter-reset: how; }
.how li { position: relative; padding: var(--s5) var(--s5) var(--s5) 76px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--cream-200); box-shadow: var(--shadow-card); }
.how li::before {
  counter-increment: how; content: counter(how); position: absolute; left: var(--s5); top: var(--s5);
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mustard-400); color: var(--forest-900); font: 600 1.125rem/1 var(--font-display);
}
.how h3 { font-size: var(--fs-h3); color: var(--forest-900); margin-bottom: 6px; }
.how p { color: var(--ink-700); }
@media (min-width: 900px) { .about { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; } }

/* ---- Visit the store ------------------------------------------------------------------ */
.visit { border-radius: var(--r-xl); padding: var(--s6) var(--s5); display: grid; gap: var(--s6); align-items: center; overflow: hidden; scroll-margin-top: var(--s4); }
.visit__copy { display: grid; gap: var(--s4); justify-items: start; }
.visit h2 { font-size: var(--fs-h2); }
.visit p { color: #E4E8DA; max-width: 46ch; }
.visit strong { color: var(--mustard-300); }
.visit address { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-lg); line-height: 1.4; }
.visit address .icon { color: var(--mustard-400); margin-top: 2px; }
.visit .btn { width: 100%; }
.plaque { justify-self: center; width: min(100%, 380px); padding: var(--s5); border-radius: var(--r-md); background: #C42D27; border: 5px solid #fff; box-shadow: 0 0 0 4px #C42D27, var(--shadow-lift); color: #fff; text-align: center; transform: rotate(2deg); }
.plaque__x { display: block; font: 800 1.375rem/1 var(--font-text); letter-spacing: .3em; margin-bottom: var(--s3); }
.plaque__name { display: block; font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2rem)/1.05 var(--font-text); letter-spacing: .01em; text-transform: uppercase; }
.plaque__no { display: block; margin-top: var(--s3); font: 700 var(--fs-sm)/1 var(--font-text); letter-spacing: .2em; opacity: .9; }
@media (min-width: 560px) { .visit .btn { width: auto; } }
@media (min-width: 900px) { .visit { grid-template-columns: 1.3fr 1fr; padding: var(--s8); } }

/* ---- Footer ------------------------------------------------------------------------- */
.footer { padding-block: var(--s7) var(--s5); margin-top: var(--s7); }
.footer__grid { display: grid; gap: var(--s6); }
.footer__brand { display: grid; gap: var(--s3); justify-items: start; }
.footer__brand img { width: 84px; height: 84px; }
.footer__brand .tag { font: 600 1.375rem/1.2 var(--font-display); color: var(--mustard-300); }
.footer h2 { font: 700 var(--fs-xs)/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--moss-300); margin-bottom: var(--s3); }
.footer ul { list-style: none; display: grid; }
.footer li a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: #E4E8DA; }
.footer li a:hover { color: var(--cream-50); text-decoration: underline; }
.footer address, .footer__co p { color: #E4E8DA; line-height: 1.7; font-size: var(--fs-sm); }
.footer__co a { color: var(--mustard-300); overflow-wrap: anywhere; }
.footer small { color: var(--moss-300); font-size: var(--fs-sm); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(169,191,149,.22); color: var(--moss-300); font-size: var(--fs-sm); }
.footer .paylist { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
/* cream-50, not #E4E8DA: on the lightest 10 % of the textured footer the chips were 4.47:1 at 375 px (now ~5.2:1) */
.paylist li { padding: 4px 10px; border-radius: 6px; background: rgba(251,247,238,.08); color: var(--cream-50); font-weight: 600; font-size: var(--fs-xs); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.1fr 1.3fr; } }

/* ---- Breadcrumbs ----------------------------------------------------------------------- */
.crumbs ol { display: flex; gap: 6px; list-style: none; font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--s4); }
.crumbs li { white-space: nowrap; }
.crumbs li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* long post titles: one line */
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink-500); }
.crumbs a { text-decoration: none; color: var(--forest-800); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }

/* ---- Product page ------------------------------------------------------------------------ */
.pdp { display: grid; gap: var(--s5); }
.gallery { display: grid; gap: var(--s3); min-width: 0; }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r-xl); scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track .tile { flex: 0 0 100%; scroll-snap-align: start; border-radius: 0; }
.gallery__thumbs { display: flex; gap: var(--s2); list-style: none; flex-wrap: wrap; }
.gallery__thumbs a { display: block; width: 64px; border-radius: var(--r-sm); overflow: hidden; border: 2px solid var(--cream-200); background: var(--tint, var(--cream-100)); }
.gallery__thumbs a[aria-current] { border-color: var(--forest-800); }
.gallery__thumbs img { mix-blend-mode: multiply; }
.pdp__info { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.pdp h1 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); color: var(--forest-900); }
.pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.pdp__price .price { font-size: 2.25rem; }
.pdp__price span { color: var(--ink-500); font-size: var(--fs-sm); }
.short { display: grid; gap: var(--s2); }
.short ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.short li { padding: 6px 12px; border-radius: var(--r-pill); background: var(--cream-100); border: 1px solid var(--cream-200); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); }
.short p { font-weight: 600; color: var(--moss-500); }
.buy { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); }
.qty { display: inline-flex; align-items: center; border: 2px solid var(--cream-300); border-radius: var(--r-pill); background: #fff; height: 56px; }
.qty button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: none; font: 600 1.5rem/1 var(--font-text); color: var(--forest-900); cursor: pointer; }
.qty button:hover:not([disabled]) { background: var(--cream-100); }
.qty button[disabled] { color: var(--cream-300); cursor: default; }
.qty output, .qty input { width: 2.4ch; text-align: center; font: 700 var(--fs-lg)/1 var(--font-text); border: 0; background: none; color: var(--ink-900); padding: 0; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ship { border-radius: var(--r-lg); background: var(--cream-100); border: 1px solid var(--cream-200); overflow: hidden; list-style: none; }
.ship__row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); }
.ship__row + .ship__row { border-top: 1px solid var(--cream-200); }
.ship__row .icon { color: var(--moss-500); }
.ship__row b { display: block; font-size: var(--fs-sm); color: var(--forest-900); }
.ship__row span { display: block; font-size: var(--fs-xs); color: var(--ink-500); }
.ship__row em { font-style: normal; font-weight: 700; font-size: var(--fs-sm); color: var(--forest-900); text-align: right; }
.ship__row--pickup { background: var(--moss-100); }
.ship__row--pickup em { color: #3F5A31; }
.ship__more { display: block; padding: var(--s3) var(--s4); border-top: 1px solid var(--cream-200); font-size: var(--fs-sm); font-weight: 600; color: var(--forest-800); }
.desc { margin-top: var(--s6); padding: var(--s5); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--cream-200); columns: 1; overflow-wrap: break-word; }
.desc .desc__kicker { font: 700 var(--fs-xs)/1.4 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--moss-500); margin-bottom: var(--s3); column-span: all; }
.desc .desc__lead { column-span: all; font-size: var(--fs-lg); line-height: 1.55; color: var(--ink-700); margin-bottom: var(--s5); max-width: 70ch; }
.desc .desc__lead strong { font-weight: 400; }   /* bold in the WordPress source, regular weight on live */
.desc h3 { font-size: var(--fs-h3); color: var(--forest-900); margin: var(--s4) 0 var(--s2); break-after: avoid; }
.desc ul { padding-left: 1.2em; margin-bottom: var(--s3); }
.desc li { margin-bottom: 4px; break-inside: avoid; }
.desc li::marker { color: var(--moss-500); }
.desc p { color: var(--ink-700); margin-bottom: var(--s3); }
.related { margin-top: var(--s7); }
.related h2 { font-size: var(--fs-h3); color: var(--forest-900); margin-bottom: var(--s4); }
@media (min-width: 900px) {
  .pdp { grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
  .gallery { position: sticky; top: var(--s5); }
  .desc { padding: var(--s7); columns: 2; column-gap: var(--s7); }
}

/* mobile sticky buy bar: sticks to the bottom while the product section is on screen. shop.js adds .is-on only
   once the main Add-to-cart form has scrolled up out of view, so on first view it never covers the price line. */
.buybar { display: none; }
@media (max-width: 899px) {
  .buybar {
    display: flex; position: sticky; bottom: 0; z-index: 20; align-items: center; gap: var(--s3);
    margin-top: var(--s6); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(251,247,238,.97); border-top: 1px solid var(--cream-300); box-shadow: 0 -12px 24px -18px rgba(20,42,30,.5);
    transform: translateY(110%); visibility: hidden; transition: transform .2s, visibility 0s .2s;
  }
  .buybar.is-on { transform: none; visibility: visible; transition: transform .2s; }
  .buybar small { font-weight: 500; color: var(--ink-500); }
  .buybar__img { width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); overflow: hidden; background: var(--tint, var(--cream-100)); }
  .buybar__img img { mix-blend-mode: multiply; }
  .buybar p { flex: 1; min-width: 0; font-size: var(--fs-sm); line-height: 1.25; }
  .buybar b { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--forest-900); }
  .buybar span { color: var(--brick-600); font-weight: 700; }
  .buybar .btn { min-height: 48px; padding: 0 var(--s4); font-size: var(--fs-sm); }
}

/* ---- Toast (add-to-cart feedback) ------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: 40; transform: translate(-50%, 140%);
  width: min(100% - 2 * var(--gutter), 460px); padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--forest-900); color: var(--cream-50); box-shadow: var(--shadow-lift); font-size: var(--fs-sm); line-height: 1.4;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); visibility: hidden; transition: transform .25s, visibility 0s .25s;
}
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .25s; }
.toast a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-pill); background: var(--mustard-400); color: var(--forest-900); font-weight: 700; text-decoration: none; }
@media (max-width: 899px) { .has-buybar:has(.buybar.is-on) .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ---- Cart --------------------------------------------------------------------------------------- */
.cart__grid { display: grid; gap: var(--s5); align-items: start; }
.panel { border-radius: var(--r-lg); background: #fff; border: 1px solid var(--cream-200); box-shadow: var(--shadow-card); }
.lines { list-style: none; }
.line { display: grid; grid-template-columns: 84px 1fr; gap: var(--s3) var(--s4); padding: var(--s4); }
.line + .line { border-top: 1px solid var(--cream-200); }
.line .tile { border-radius: var(--r-sm); }
.line__name { font-weight: 700; line-height: 1.35; color: var(--forest-900); text-decoration: none; }
.line__name:hover { text-decoration: underline; }
.line__unit { font-size: var(--fs-sm); color: var(--ink-500); }
.line__ctl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.line__ctl .qty { height: 52px; }
.line__total { font: 600 1.25rem/1 var(--font-display); color: var(--ink-900); margin-left: auto; min-width: 4.6em; text-align: right; }
.linkbtn { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s2); border: 0; background: none; color: var(--brick-600); font: 600 var(--fs-sm)/1 var(--font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.progress { margin: 0 var(--s4) var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--moss-100); color: #2C4123; font-size: var(--fs-sm); font-weight: 600; }
.progress__bar { height: 8px; margin-top: var(--s2); border-radius: var(--r-pill); background: rgba(79,107,63,.25); overflow: hidden; }
.progress__bar i { display: block; height: 100%; width: 0; background: var(--moss-500); border-radius: inherit; transition: width .3s; }
.summary { padding: var(--s5); display: grid; gap: var(--s4); }
.summary h2 { font-size: var(--fs-h3); color: var(--forest-900); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: var(--fs-sm); color: var(--forest-900); }
.select { position: relative; }
.select select {
  width: 100%; min-height: 52px; padding: 0 44px 0 var(--s4); border: 2px solid var(--cream-300); border-radius: var(--r-md);
  background: #fff; color: var(--ink-900); font: 600 var(--fs-md)/1 var(--font-text); appearance: none; -webkit-appearance: none;
}
.select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border: solid var(--forest-800); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.opts { display: grid; gap: var(--s2); list-style: none; }
.opts li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: var(--r-md); border: 1px solid var(--cream-200); background: var(--cream-50); }
.opts .icon { color: var(--moss-500); }
.opts b { display: block; font-size: var(--fs-sm); color: var(--forest-900); line-height: 1.3; }
.opts span { display: block; font-size: var(--fs-xs); color: var(--ink-500); }
.opts em { font-style: normal; font-weight: 700; font-size: var(--fs-sm); color: var(--forest-900); text-align: right; white-space: nowrap; }
.opts em.is-free { color: #3F5A31; }
.opts s { color: var(--ink-500); font-weight: 500; margin-right: 4px; }
.note { font-size: var(--fs-xs); color: var(--ink-500); }
.opts + .note { margin-top: var(--s2); }
.totals { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--cream-200); margin: 0; }
.totals div { display: flex; justify-content: space-between; gap: var(--s3); color: var(--ink-700); }
.totals dd { margin: 0; text-align: right; }
.totals .grand { padding-top: var(--s2); font: 600 1.5rem/1.2 var(--font-display); color: var(--forest-900); }
.vatline { font-size: var(--fs-xs); color: var(--ink-500); text-align: right; }
.secure { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-xs); color: var(--ink-500); }
.secure .icon { width: 18px; height: 18px; color: var(--moss-500); }
.alert { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: #FBE9E6; border: 1px solid #EBC0B9; color: #8A2A22; font-size: var(--fs-sm); font-weight: 600; }
.alert:empty { display: none; }
.alert a { color: inherit; }
.back { justify-self: center; font-weight: 600; color: var(--forest-800); min-height: 44px; display: inline-flex; align-items: center; }
.cart__empty { display: grid; gap: var(--s4); justify-items: start; padding: var(--s5); }
.cart__empty p { color: var(--ink-700); }
.cart:not(.is-empty) .cart__empty, .cart.is-empty .cart__grid { display: none; }
.cart.is-empty .cart__more { display: block; }
.cart__more { display: none; margin-top: var(--s7); }
.cart__more h2 { font-size: var(--fs-h3); color: var(--forest-900); margin-bottom: var(--s4); }
.btn.is-busy { cursor: progress; }
@media (min-width: 900px) {
  .cart__grid { grid-template-columns: 1.55fr 1fr; gap: var(--s6); }
  .line { grid-template-columns: 96px 1fr auto; align-items: center; }
  .line__ctl { grid-column: auto; flex-wrap: nowrap; }
  .summary { position: sticky; top: var(--s5); }
}

/* ---- Text pages (legal; blog posts too when the blog is on) ---------------------------------------- */
.prose { max-width: 72ch; color: var(--ink-700); overflow-wrap: anywhere; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); color: var(--forest-900); margin-top: var(--s6); }
.prose h3, .prose h4 { font: 700 var(--fs-lg)/1.3 var(--font-text); letter-spacing: 0; color: var(--forest-900); margin-top: var(--s5); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li, .prose li > ul { margin-top: 6px; }
.prose li::marker { color: var(--moss-500); }
.prose a { color: var(--forest-800); text-underline-offset: 3px; }
.prose strong { color: var(--ink-900); }
.prose hr { border: 0; border-top: 1px solid var(--cream-300); margin-block: var(--s5); }
.legal { padding: var(--s5) var(--s4); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--cream-200); }
@media (min-width: 560px) { .legal { padding: var(--s5); } }
@media (min-width: 900px) { .legal { padding: var(--s7); } }
.updated { font-size: var(--fs-sm); color: var(--ink-500); margin-top: calc(-1 * var(--s3)); margin-bottom: var(--s5); }


/* ---- Thank-you / 404 ----------------------------------------------------------------------------------------- */
.done { display: grid; gap: var(--s4); max-width: 60ch; padding: var(--s6) var(--s5); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--cream-200); box-shadow: var(--shadow-card); }
.done h1 { font-size: var(--fs-h2); color: var(--forest-900); }
.done p { color: var(--ink-700); }
.done__tick { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--moss-100); color: var(--moss-500); }
.done__tick .icon { width: 30px; height: 30px; stroke-width: 2.2; }
.done address { color: var(--ink-700); line-height: 1.6; }
.done .btns { display: flex; flex-wrap: wrap; gap: var(--s3); }
.mocknote { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: #FFF6D9; border: 1px solid #F0DC9C; color: #5B4A12; font-size: var(--fs-sm); font-weight: 600; }
@media (min-width: 900px) { .done { padding: var(--s7); } }

/* ---- Age gate (every page until confirmed; gate.js + localStorage, no cookie) ------------------------------------ */
/* Hidden by default: only shown when the inline <head> script ran (html.js) and the visitor has not confirmed yet
   (html.age-ok). Visitors and crawlers without JavaScript are never trapped behind buttons that do nothing. */
.gate { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: var(--s5) var(--gutter); overflow-y: auto; }
.js:not(.age-ok) .gate { display: grid; }
.gate-open, .gate-open body { overflow: hidden; }
.gate__card { width: min(100%, 520px); padding: var(--s6) var(--s5); border-radius: var(--r-xl); background: var(--cream-50); color: var(--ink-900); text-align: center; display: grid; gap: var(--s4); justify-items: center; box-shadow: var(--shadow-lift); }
.gate__card:focus { outline: none; }
.gate__card img { width: 104px; height: 104px; }
.gate h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); color: var(--forest-900); }
.gate__btns { display: grid; gap: var(--s3); width: 100%; }
.gate__btns .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: var(--s2); text-wrap: balance; }
.btn--yes { background: var(--forest-800); color: var(--cream-50); }
.btn--yes:hover { background: var(--forest-700); }
.btn--no { background: var(--brick-600); color: #fff; border-color: var(--brick-600); }   /* solid red as on live; white on it 6.1:1 */
.btn--no:hover { background: #9A2C23; border-color: #9A2C23; }
.gate__err { color: var(--brick-600); font-weight: 600; font-size: var(--fs-sm); }
.gate__notice { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.55; }
.gate__notice strong { display: block; color: var(--ink-700); margin-bottom: 4px; }
.gate :focus-visible { outline-color: var(--forest-800); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}