/* ============================================================
   JENNINGS BREWERY — Design System v2.0 (Craig blend)
   Untold Agency · 28 April 2026 — Brand Director: Craig
   Phase 2 deck reference: render-phase2/slide-NN.png

   Primary palette extends with Wine #8B2C3A — sourced from
   the brewery tower paintwork; primary CTA colour.
   Secondary "rooted in place" trio: Mustard (beer), Sage (place),
   Teal (river) — sparing accent use only.

   Type: Playfair Display (display) + Lato (body)
   ============================================================ */

/* ── 0. FONT FALLBACK METRICS (CLS) ───────────────────────────
   Metric-matched system fallbacks so the swap to the Google webfont
   causes no layout shift (CWV / CLS). The final rendered fonts are
   unchanged; this only governs the brief load window. */
@font-face {
  font-family: 'Lato Fallback';
  src: local('Arial');
  ascent-override: 101.03%;
  descent-override: 21.8%;
  line-gap-override: 0%;
  size-adjust: 97.79%;
}
@font-face {
  font-family: 'Playfair Fallback';
  src: local('Times New Roman');
  ascent-override: 96.34%;
  descent-override: 26.94%;
  line-gap-override: 0%;
  size-adjust: 111.5%;
}

/* ── 1. CUSTOM PROPERTIES ─────────────────────────────────── */
:root {
  /* Brand palette — Craig 2.0 */
  --brand-dark:    #000000;   /* official primary black (Colours-with-HEX PDF) */
  --brand-cream:   #F5E9D8;   /* official primary cream */
  --brand-stone:   #9D9D9C;   /* PDF extended grey (was #C4B5A0, not in PDF) */
  --brand-copper:  #C6995F;   /* folded into PDF gold (was #C8703C orange, not in PDF) */
  --brand-gold:    #C6995F;   /* official primary gold */
  --brand-wine:    #97203A;   /* official primary wine/CTA */

  /* Legacy aliases — secondary palette removed (client decision 2026-05-27) */
  --brand-muted:   #6A645C;   /* darkened from #7A7570 to clear WCAG AA (5.1:1) on cream — drives --color-text-muted + chips site-wide */

  /* Extended digital tints — for boxes, forms, surfaces */
  --tint-warm-grey:  #BFB6AB;
  --tint-warm-beige: #E5DCCC;
  --tint-dusty-rose: #E8D0CF;   /* PDF extended pink tint (was #C9A8AA) */
  --tint-stone-mid:  #A39E96;

  /* Semantic */
  --color-bg:           var(--brand-cream);
  --color-surface:      #FAF4EF;
  --color-surface-2:    #FFFFFF;
  --color-divider:      #E5DED3;
  --color-border:       #D9D1C6;
  --color-text:         var(--brand-dark);
  --color-text-muted:   var(--brand-muted);
  --color-text-faint:   var(--brand-stone);
  --color-text-inverse: var(--brand-cream);
  --color-primary:      var(--brand-wine);     /* WAS gold — Craig 2.0 primary is wine */
  --color-action:       var(--brand-copper);

  /* Fluid type scale */
  --text-xs:   clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.80rem + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.00rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.20rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.20rem + 2.50vw, 3.5rem);
  --text-3xl:  clamp(2.5rem,   1.00rem + 4.00vw, 5rem);
  /* Hero title at full impact on normal viewports; only shrinks on genuinely short
     windows so content can never rise into the nav. 8rem (128px) max preserves the
     dramatic Untold scale jump; 16vh cap kicks in only when viewport height < ~800px. */
  --text-hero: clamp(2.5rem, min(0.5rem + 7vw, 16vh), 8rem);

  /* 4-px spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-9:  2.25rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Fonts — Craig 2.0 */
  --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
  --font-body:    'Lato', 'Lato Fallback', 'Helvetica Neue', Verdana, sans-serif;

  /* Layout */
  --content-narrow:  680px;
  --content-default: 980px;
  --content-wide:    1240px;
  --content-full:    100%;

  /* Radius */
  --r-sm:   0.25rem;
  --r-md:   0.5rem;
  --r-lg:   1rem;
  --r-full: 9999px;

  /* Transitions */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 200ms var(--ease);

  /* Shadows (warm-toned) */
  --shadow-sm: 0 1px 3px rgba(26,22,18,0.06);
  --shadow-md: 0 4px 16px rgba(26,22,18,0.09);
  --shadow-lg: 0 12px 40px rgba(26,22,18,0.14);
}

/* ── 2. BASE RESET ────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  min-height: 100dvh;
  line-height: 1.65;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Clip, not hidden: stops the off-canvas mobile nav (parked at left:100vw) and
     any stray wide child from creating horizontal scroll, without breaking
     position: sticky or smooth scroll. */
  overflow-x: clip;
}
img, video, picture, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; }
p, li, figcaption { text-wrap: pretty; max-width: 72ch; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: rgba(198,153,95, 0.25); color: var(--color-text); }
:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border-width: 0;
}

/* Skip-to-content link: hidden until keyboard focus. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 10000;
  padding: 12px 18px;
  background: var(--brand-dark);
  color: var(--brand-cream);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom-right-radius: var(--r-sm);
  transition: top 200ms var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}
:target { scroll-margin-top: 80px; }
[tabindex="-1"]:focus-visible { outline: none; }

/* ── 3. TYPOGRAPHY HELPERS ────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.label-caps {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.text-gold    { color: var(--brand-gold); }
.text-copper  { color: var(--brand-copper); }
.text-cream   { color: var(--brand-cream); }
.text-muted   { color: var(--color-text-muted); }
.text-faint   { color: var(--color-text-faint); }

/* ── 4. LAYOUT UTILITIES ──────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-4), 5vw, var(--sp-16));
}
.container--narrow {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-4), 5vw, var(--sp-16));
}
.container--default {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-4), 5vw, var(--sp-16));
}

.section {
  padding-block: clamp(var(--sp-16), 8vw, var(--sp-32));
}
.section--sm {
  padding-block: clamp(var(--sp-10), 5vw, var(--sp-20));
}
.section--lg {
  padding-block: clamp(var(--sp-20), 10vw, var(--sp-32));
}
.section-dark {
  background: var(--brand-dark);
  color: var(--brand-cream);
}
.section-stone {
  background: #EDE7DC;
}
.section-gold {
  background: var(--brand-gold);
  color: var(--brand-dark);
}
/* Product PDP only: trim the gap between the above-fold buy section and the
   story section below the fold. Scoped to the PDP so the global section
   rhythm on every other page stays exactly as it was. */
.pdp-above { padding-bottom: clamp(var(--sp-8), 4vw, var(--sp-16)); }
.pdp-below { padding-top: clamp(var(--sp-12), 6vw, var(--sp-24)); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
@media (max-width: 768px) {
  .split-layout { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ── 5. SECTION HEADERS ───────────────────────────────────── */
.section-header {
  margin-bottom: clamp(var(--sp-10), 5vw, var(--sp-16));
}
.section-header--center { text-align: center; }
.section-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-wine);
  margin-bottom: var(--sp-4);
}
.section-header--dark .section-tag { color: var(--brand-gold); }
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: var(--sp-4);
}
.section-header--dark .section-title { color: var(--brand-cream); }
.section-sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 56ch;
}
.section-header--center .section-sub { margin-inline: auto; }
.section-header--dark .section-sub { color: var(--brand-stone); }

/* ── 6. BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-copper {
  background: var(--brand-copper);
  color: var(--brand-dark);
  border-color: var(--brand-copper);
}
.btn-copper:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}
.btn-gold {
  background: var(--brand-gold);
  color: var(--brand-dark);
  border-color: var(--brand-gold);
}
.btn-gold:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}
.btn-ghost-cream {
  background: transparent;
  color: var(--brand-cream);
  border-color: rgba(245,240,232,0.5);
}
.btn-ghost-cream:hover {
  background: rgba(245,240,232,0.1);
  border-color: var(--brand-cream);
}
.btn-ghost-dark {
  background: transparent;
  color: var(--brand-dark);
  border-color: var(--brand-dark);
}
.btn-ghost-dark:hover {
  background: var(--brand-dark);
  color: var(--brand-cream);
}
.btn-ghost-gold {
  background: transparent;
  color: var(--brand-gold);
  border-color: var(--brand-gold);
}
.btn-ghost-gold:hover {
  background: var(--brand-gold);
  color: var(--brand-dark);
}

/* ── Craig 2.0 — Three-tier button system ──────────────── */
/* Primary: wine on any background. Hovers to copper. */
.btn-wine {
  background: var(--brand-wine);
  color: var(--brand-cream);
  border-color: var(--brand-wine);
  letter-spacing: 0.08em;
}
.btn-wine:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-1px);
}

/* Secondary on dark: cream fill, hovers to ghost. */
.btn-cream {
  background: var(--brand-cream);
  color: var(--brand-dark);
  border-color: var(--brand-cream);
  letter-spacing: 0.08em;
}
.btn-cream:hover {
  background: transparent;
  color: var(--brand-cream);
  border-color: var(--brand-cream);
}

/* Tertiary "Find Out More" — ghost on cream. */
.btn-find-out {
  background: transparent;
  color: var(--brand-dark);
  border: 2px solid var(--brand-dark);
  letter-spacing: 0.08em;
}
.btn-find-out:hover {
  background: var(--brand-dark);
  color: var(--brand-cream);
}

.btn--full { width: 100%; }
.btn--lg {
  font-size: var(--text-sm);
  padding: var(--sp-4) var(--sp-8);
  letter-spacing: 0.1em;
}

/* ── Craig 2.0 — Warm/golden image filter ─────────────── */
/* Apply to landscape / brewery photography for "consistent warmth, golden glow"
   per Phase 2 deck slide 24. Use sparingly on hero/landscape imagery. */
.img-warm-filter {
  filter: saturate(1.05) brightness(0.98) sepia(0.08) hue-rotate(-5deg);
}
.img-warm-filter--strong {
  filter: saturate(1.1) brightness(0.97) sepia(0.15) hue-rotate(-8deg);
}

/* Text link arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  color: var(--brand-copper);
  transition: gap var(--transition);
}
.link-arrow:hover { gap: var(--sp-3); }
.link-arrow--gold { color: var(--brand-gold); }
.link-arrow--cream { color: var(--brand-cream); }

/* ── 7. ANNOUNCEMENT BAR ──────────────────────────────────── */
.announce-bar {
  background: var(--brand-dark);
  color: var(--brand-cream);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 90;
}
.announce-bar__track {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  transition: transform 600ms var(--ease);
}
.announce-bar__item {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--brand-stone);
}
.announce-bar__item span { color: var(--brand-gold); }
a.announce-bar__item--link { color: var(--brand-stone); text-decoration: none; cursor: pointer; }
a.announce-bar__item--link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 8. SITE HEADER / NAVIGATION ──────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  transition: background var(--transition), box-shadow var(--transition);
  /* offset for announcement bar */
}
.site-header.is-transparent {
  background: transparent;
}
.site-header.is-solid {
  background: var(--brand-dark);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.site-header.header-light.is-solid {
  background: var(--brand-cream);
  box-shadow: 0 2px 8px rgba(26,22,18,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) clamp(var(--sp-6), 4vw, var(--sp-12));
  gap: var(--sp-8);
  /* Lift header content above the is-transparent scrim explicitly. The scrim is
     a z-index:-1 pseudo-element; on iOS Safari a negative-z layer inside a fixed,
     stacking-context header can escape and paint OVER the content, hiding the
     burger. A positive z-index here keeps the burger on top on every browser. */
  position: relative;
  z-index: 1;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex-shrink: 0;
  color: var(--brand-cream);
  transition: color var(--transition);
}
.site-header.header-light .site-logo { color: var(--brand-dark); }
.site-header.is-solid .site-logo { color: var(--brand-cream); }
.site-header.header-light.is-solid .site-logo { color: var(--brand-dark); }

.logo-mark {
  width: 32px;
  height: 36px;
  flex-shrink: 0;
}
.logo-img {
  height: 36px;
  width: auto;
  aspect-ratio: 327 / 229;
  flex-shrink: 0;
  display: block;
}
.logo-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.logo-sub {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-top: 2px;
}

/* Primary Nav */
.primary-nav { display: flex; align-items: center; }
.primary-nav ul {
  display: flex;
  list-style: none;
  gap: 0;
  margin: 0;
  padding: 0;
}
.primary-nav > ul > li { position: relative; }
.primary-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-5);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--brand-cream);
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
}
.site-header.header-light .primary-nav > ul > li > a { color: var(--brand-dark); }
.site-header.is-solid .primary-nav > ul > li > a { color: var(--brand-cream); }
.site-header.header-light.is-solid .primary-nav > ul > li > a { color: var(--brand-dark); }

.primary-nav > ul > li > a:hover,
.primary-nav > ul > li:hover > a { color: var(--brand-gold); }

/* Dropdown chevron */
.nav-chevron {
  width: 12px; height: 12px;
  transition: transform var(--transition);
}
.primary-nav > ul > li:hover .nav-chevron,
.primary-nav > ul > li:focus-within .nav-chevron { transform: rotate(180deg); }

/* Dropdown panels */
.dropdown {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background: var(--brand-dark);
  border: 1px solid rgba(245,240,232,0.1);
  border-radius: var(--r-md);
  padding: var(--sp-3) 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  box-shadow: var(--shadow-lg);
  /* Above the page body (and the fixed header's own z-index 200) so the opaque
     panel covers content beneath it instead of letting an H1 bleed through. */
  z-index: 300;
}
/* Invisible hover bridge across the trigger-to-panel gap so the pointer can
   travel down into the menu without dropping :hover and closing it. */
.dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--sp-2));
  height: var(--sp-2);
}
.primary-nav > ul > li:hover .dropdown,
.primary-nav > ul > li:focus-within .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: block;
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--text-sm);
  color: var(--brand-stone);
  transition: color var(--transition), background var(--transition);
}
.dropdown a:hover {
  color: var(--brand-gold);
  background: rgba(245,240,232,0.05);
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-shrink: 0;
}
.header-actions .btn-members {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--brand-wine);
  border-radius: var(--r-full);
  background: var(--brand-wine);
  color: var(--brand-cream);
  text-decoration: none;
  transition: all var(--transition);
}
.header-actions .btn-members:hover {
  filter: brightness(1.08);
}
.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  padding: 10px;
  color: var(--brand-cream);
  transition: color var(--transition);
}
.site-header.header-light .cart-btn { color: var(--brand-dark); }
.site-header.is-solid .cart-btn { color: var(--brand-cream); }
.site-header.header-light.is-solid .cart-btn { color: var(--brand-dark); }
.cart-btn:hover { color: var(--brand-gold); }
.cart-count {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--brand-copper);
  color: #fff;
  width: 16px; height: 16px;
  border-radius: var(--r-full);
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Centered-logo nav (Craig phase 2 deck — slides 19, 26) ──────── */
.header-inner.header-inner--centered {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.primary-nav--left { justify-self: end; }
.primary-nav--right { justify-self: start; }
.primary-nav--left > ul,
.primary-nav--right > ul { gap: 0; }

/* Tighten link spacing inside the centered grid so both wings fit. */
.header-inner--centered .primary-nav > ul > li > a {
  padding: var(--sp-4) var(--sp-3);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.site-logo--centered {
  justify-self: center;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.site-logo--centered .logo-img { height: 80px; }
.logo-reestablished {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand-gold);
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}
.site-header.header-light .logo-reestablished { color: var(--brand-copper); }
.site-header.is-solid .logo-reestablished { color: var(--brand-gold); }
.site-header.header-light.is-solid .logo-reestablished { color: var(--brand-copper); }

.header-right {
  justify-self: stretch;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.header-inner--centered .header-actions { gap: var(--sp-3); }
.header-inner--centered .header-actions .btn-members {
  padding: 8px 14px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

@media (max-width: 1280px) {
  .header-inner.header-inner--centered {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: var(--sp-4);
  }
  .header-right { display: none; }
  .primary-nav--left { display: none; }
  .header-inner.header-inner--centered .site-logo--centered {
    justify-self: start;
    flex-direction: row;
    gap: var(--sp-3);
  }
  .header-inner.header-inner--centered .logo-reestablished { display: none; }
  .header-inner.header-inner--centered .site-logo--centered .logo-img { height: 56px; }
}

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.mobile-menu-toggle span {
  display: block;
  height: 2px;
  background: var(--brand-cream);
  border-radius: 2px;
  transition: all var(--transition);
  /* Stay legible on any hero even if the scrim fails to paint (iOS Safari). */
  filter: drop-shadow(0 1px 1.5px rgba(10, 10, 20, 0.65));
}
.site-header.header-light .mobile-menu-toggle span { background: var(--brand-dark); }
.site-header.is-solid .mobile-menu-toggle span { background: var(--brand-cream); }
.site-header.header-light.is-solid .mobile-menu-toggle span { background: var(--brand-dark); }
/* Functional top-of-header legibility scrim (same instrument as .hero__bg::after).
   Lifts the cream burger AND the cream logo off a pale hero with no box. Fades to
   fully transparent so it never reads as a bar or a decorative gradient. */
.site-header.is-transparent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 180%;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 20, 0.55) 0%,
    rgba(10, 10, 20, 0.28) 45%,
    rgba(10, 10, 20, 0) 100%
  );
}
/* Once the header goes solid it paints its own dark fill, so suppress the scrim. */
.site-header.is-transparent.is-solid::before { opacity: 0; }

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  width: min(380px, 90vw);
  height: 100%;
  background: var(--brand-dark);
  z-index: 300;
  transform: translateX(100%);
  transition: transform 400ms var(--ease);
  overflow-y: auto;
  padding: var(--sp-16) var(--sp-8) var(--sp-12);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}
.mobile-nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav-close {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  color: var(--brand-stone);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0 0;
  transition: color 200ms var(--ease);
}
.mobile-nav-close:hover,
.mobile-nav-close:focus-visible { color: var(--brand-cream); }

/* ── Mobile mega menu: every destination, grouped by section ── */
.mobile-mega {
  margin-top: var(--sp-6);
}
.mobile-mega__group {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid rgba(245,233,216,0.10);
}
.mobile-mega__group:first-child { padding-top: var(--sp-2); }
.mobile-mega__group:last-of-type { border-bottom: none; }

/* Section heading — a real link, Playfair, gold rule cue */
.mobile-mega__heading {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.1;
  color: var(--brand-cream);
  padding: var(--sp-2) 0;
  min-height: 44px;
  transition: color 200ms var(--ease);
}
.mobile-mega__heading:hover,
.mobile-mega__heading:focus-visible { color: var(--brand-gold); }
.mobile-mega__heading--solo { padding-bottom: var(--sp-2); }

/* Sub-destinations under each heading */
.mobile-mega__links {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0 0 0 var(--sp-4);
  border-left: 1px solid rgba(198,153,95,0.30); /* gold, faint */
}
.mobile-mega__links li { margin: 0; }
.mobile-mega__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-1) 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  color: var(--brand-stone);
  transition: color 200ms var(--ease);
}
.mobile-mega__links a:hover,
.mobile-mega__links a:focus-visible { color: var(--brand-gold); }

/* Members CTA pinned beneath the groups */
.mobile-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: var(--sp-8);
  padding: var(--sp-3) var(--sp-6);
  background: var(--brand-wine);
  color: var(--brand-cream);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.mobile-nav__cta:hover,
.mobile-nav__cta:focus-visible {
  background: var(--brand-gold);
  color: var(--brand-dark);
}

/* Visible focus ring for keyboard users across the whole drawer */
.mobile-nav a:focus-visible,
.mobile-nav button:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 1280px) {
  .primary-nav { display: none; }
  .mobile-menu-toggle { display: flex; }
}

/* ── 9. HERO ──────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100svh; /* small viewport height — accounts for mobile chrome + always fits */
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* announce bar (40) + centered-logo header (90) = 130 actual */
  padding-top: 140px;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Dark scrim at the TOP so the transparent header is legible against the
     busy video, light middle so the imagery still reads, dark bottom for
     headline contrast. */
  background: linear-gradient(
    180deg,
    rgba(10,10,20,0.78) 0%,
    rgba(10,10,20,0.45) 18%,
    rgba(10,10,20,0.25) 40%,
    rgba(10,10,20,0.7) 78%,
    rgba(10,10,20,0.95) 100%
  );
}
/* Video background hero */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Dark scrim at the TOP so the transparent header reads cleanly against the
     busy video; light middle so the imagery still shows; dark bottom for
     headline contrast. */
  background: linear-gradient(
    180deg,
    rgba(10,10,20,0.78) 0%,
    rgba(10,10,20,0.45) 18%,
    rgba(10,10,20,0.25) 40%,
    rgba(10,10,20,0.7) 78%,
    rgba(10,10,20,0.95) 100%
  );
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  padding: clamp(var(--sp-6), 3vh, var(--sp-12)) clamp(var(--sp-6), 6vw, var(--sp-16)) clamp(var(--sp-8), 4vh, var(--sp-16));
  max-width: 820px;
}
.hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: var(--sp-4);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 0.95;
  color: var(--brand-cream);
  margin-bottom: var(--sp-6);
}
.hero__title em {
  font-style: italic;
  color: var(--brand-gold);
}
.hero__sub {
  font-size: clamp(0.9375rem, min(1.05vw, 2vh), 1.125rem);
  color: var(--brand-cream);  /* was --brand-stone (4.22:1 over photos) — cream clears AA on the hero scrim */
  margin-bottom: clamp(var(--sp-5), 2.5vh, var(--sp-8));
  max-width: 52ch;
  font-weight: 300;
  line-height: 1.5;
}
.hero__title {
  margin-bottom: clamp(var(--sp-4), 2vh, var(--sp-6));
}
/* Homepage hero headline: keep it to its two forced lines (never wrap to a third);
   each line is nowrap and the font scales down on narrow widths so neither line
   overflows. Scoped to the homepage hero so interior page heroes are untouched. */
.hero:not(.hero--interior) .hero__title {
  white-space: nowrap;
  font-size: clamp(1.9rem, min(0.5rem + 7vw, 16vh), 8rem);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
@media (max-width: 480px) {
  .hero__actions {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--sp-3);
  }
  .hero__actions .btn { padding-inline: var(--sp-3); }
}
@media (max-width: 460px) {
  .trust-bar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .trust-item__icon { width: 24px; height: 24px; }
}

/* Motion toggle (pause/play hero video). Honours prefers-reduced-motion via JS. */
.hero__motion-toggle {
  position: absolute;
  right: clamp(var(--sp-4), 3vw, var(--sp-8));
  bottom: clamp(var(--sp-4), 3vw, var(--sp-8));
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 20, 0.55);
  color: var(--brand-cream);
  border: 1px solid rgba(245, 240, 232, 0.22);
  border-radius: 50%;
  z-index: 3;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.hero__motion-toggle:hover,
.hero__motion-toggle:focus-visible {
  background: rgba(10, 10, 20, 0.85);
  border-color: rgba(245, 240, 232, 0.5);
}
.hero__motion-toggle .icon-play { display: none; }
.hero__motion-toggle[aria-pressed="true"] .icon-pause { display: none; }
.hero__motion-toggle[aria-pressed="true"] .icon-play { display: inline-block; }

/* Interior hero (shorter) */
.hero--interior {
  height: 60vh;
  min-height: 420px;
}
.hero--interior .hero__content {
  padding-bottom: clamp(var(--sp-12), 6vw, var(--sp-20));
}
.hero--interior .hero__title {
  font-size: var(--text-3xl);
}

/* Page header (no image - just dark bg) */
.page-header {
  background: var(--brand-dark);
  padding: clamp(var(--sp-20), 8vw, var(--sp-32)) clamp(var(--sp-6), 5vw, var(--sp-16)) clamp(var(--sp-12), 5vw, var(--sp-16));
  margin-top: 80px;
}
.page-header__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: var(--sp-3);
}
.page-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--brand-cream);
  margin-bottom: var(--sp-4);
}
.page-header__sub {
  font-size: var(--text-base);
  color: var(--brand-stone);
  max-width: 58ch;
}

/* ── 10. TRUST BAR ────────────────────────────────────────── */
/* Homepage campaign feature — a brand-story-style split (text on the dark left,
   image on the right) signposting the current campaign (links to a Journal
   article; printed QR codes can land there). Shorter than the brand-story block. */
.home-campaign { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; }
@media (max-width: 768px) { .home-campaign { grid-template-columns: 1fr; } }
.home-campaign__content { background: var(--brand-dark); padding: clamp(var(--sp-10), 6vw, var(--sp-20)); display: flex; flex-direction: column; justify-content: center; }
.home-campaign__img { position: relative; overflow: hidden; min-height: 300px; }
.home-campaign__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Events page: the section below (Community Campaigns) has no top padding, so give
   the slice breathing room beneath it. */
.home-campaign--spaced { margin-bottom: clamp(var(--sp-12), 6vw, var(--sp-20)); }

.trust-bar {
  background: var(--brand-dark);
  border-top: 1px solid rgba(245,240,232,0.08);
  padding: var(--sp-6) clamp(var(--sp-6), 5vw, var(--sp-16));
}
.trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  max-width: var(--content-wide);
  margin: 0 auto;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.trust-item__icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  color: var(--brand-gold);
}
.trust-item__text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-cream);
}
.trust-item__text span {
  font-size: var(--text-xs);
  color: var(--brand-stone);
}
@media (max-width: 768px) {
  .trust-bar__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .trust-bar__grid { grid-template-columns: 1fr; }
}

/* ── 11. SIBA BANNER ──────────────────────────────────────── */
.siba-banner {
  background: var(--brand-gold);
  padding: var(--sp-8) clamp(var(--sp-6), 5vw, var(--sp-16));
}
.siba-banner__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  justify-content: space-between;
}
.siba-banner__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
.siba-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--brand-dark);
}
.siba-banner__beers {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.siba-beer-tag {
  background: rgba(26,22,18,0.12);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-dark);
  letter-spacing: 0.05em;
}
/* Award medallions (replaces plain pills so the section reads as awards).
   Official SIBA Gold artwork can drop into .siba-award__medal as an <img> later. */
.siba-award {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--brand-dark);
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
}
.siba-award__medal {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--brand-gold);
}
.siba-award__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.siba-award__text strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--brand-cream);
}
.siba-award__text span {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-gold);
  font-weight: 700;
}

/* Footer SIBA member logo (official artwork) on a cream tile so the green panel
   reads as an intentional accreditation badge, not a sticker on the dark footer. */
.footer-accreditation { margin-top: var(--sp-5); display: block; }
.siba-footer-logo { width: 116px; height: auto; display: block; }

/* ── 12. PRODUCT CARDS ────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 960px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
}

.product-card {
  background: var(--color-surface-2, #fff);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
  cursor: pointer;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.product-card__img-wrap {
  display: block;
  position: relative;
  background: #F0EDE8;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.product-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--sp-6);
  transition: transform 400ms var(--ease);
}
.product-card:hover .product-card__img-wrap img {
  transform: scale(1.04);
}
.product-card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  background: var(--brand-gold);
  color: var(--brand-dark);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-full);
}
.product-card__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sensory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-height: 48px;
  align-content: flex-start;
}
.sensory-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-cream);
  background: var(--brand-wine);
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
}
/* Shop card style pills ("pebbles"): keep each on one line at every grid width so
   longer names (e.g. "Golden Pale Ale") don't wrap to two ragged lines. Scoped to
   the card so the larger PDP pills are untouched. */
.product-card__body .sensory-tags { min-height: 30px; }
.product-card__body .sensory-tag { font-size: 0.65rem; padding: 4px 10px; white-space: nowrap; letter-spacing: 0.08em; }
.product-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.25rem);
  line-height: 1.2;
  min-height: 2.4em; /* ~2 lines, so the description/price/button rows line up across cards */
  /* Cap at 2 lines so long "// Case of N" / poster titles don't balloon a card to
     5 lines and stagger the row. Full title still shows on the PDP. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
  color: var(--brand-dark);
}
.product-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.abv-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-muted);
  background: var(--color-bg);
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.product-card__format {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.product-card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-1);
  border-top: 1px solid var(--color-divider);
}
.product-card__price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--brand-dark);
}
.product-card__price-was {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-decoration: line-through;
  margin-left: var(--sp-2);
}
.btn-add-case {
  font-size: 0.75rem; /* fixed, not clamped up — keeps "Add to Basket" on one line in narrow 4-wide cards */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand-wine);
  color: #fff;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  white-space: normal; /* wrap rather than clip if a label is ever too long for the card */
  width: 100%;
  text-align: center;
  transition: background var(--transition);
}
.btn-add-case:hover { filter: brightness(0.92); }

/* ── 13. FILTER BAR ───────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-10);
}
.filter-btn {
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--sp-2) var(--sp-5);
  min-height: 44px;
  border-radius: var(--r-full);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover, .filter-btn.is-active {
  background: var(--brand-dark);
  color: var(--brand-cream);
  border-color: var(--brand-dark);
}

/* Cart progress */
.cart-progress-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.cart-progress-bar__label {
  font-size: var(--text-sm);
  color: var(--brand-muted); /* AA on cream (copper/stone failed: 1.9-3.4:1) */
  margin-bottom: var(--sp-3);
}
.cart-progress-bar__label strong { color: var(--brand-wine); } /* 7.2:1 on cream, on-brand emphasis */
.cart-progress-bar__track {
  background: var(--color-divider);
  height: 6px;
  border-radius: var(--r-full);
  overflow: hidden;
}
.cart-progress-bar__fill {
  height: 100%;
  background: var(--brand-copper);
  border-radius: var(--r-full);
  transition: width 600ms var(--ease);
}

/* ── 14. PDP ──────────────────────────────────────────────── */
.pdp {
  padding-top: 80px;
}
.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: start;
}
@media (max-width: 768px) {
  .pdp-grid { grid-template-columns: 1fr; }
}
.pdp-gallery {
  position: sticky;
  top: 100px;
}
/* Single column on mobile: a sticky gallery pins at the top and the buy column
   (name, price, tags) scrolls up behind it. Let the gallery scroll with the
   page. Placed AFTER the base rule so it wins (media queries add no specificity). */
@media (max-width: 768px) {
  .pdp-gallery { position: static; top: auto; }
}
.pdp-gallery__main {
  background: #F0EDE8;
  border-radius: var(--r-lg);
  aspect-ratio: 4/5;
  overflow: hidden;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pdp-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Mobile: shorten the hero so the title, price and above-the-fold summary come
   into view without scrolling past a full-height product image. Placed AFTER the
   base rules so it wins (media queries add no specificity). Contain keeps the
   whole bottle visible in the shorter box. */
@media (max-width: 768px) {
  .pdp-gallery__main { aspect-ratio: auto; height: 40vh; min-height: 260px; }
  .pdp-gallery__main img { object-fit: contain; padding: var(--sp-4); }
}
.pdp-thumbs {
  display: flex;
  gap: var(--sp-3);
}
.pdp-thumb {
  background: #F0EDE8;
  border-radius: var(--r-md);
  width: 80px; height: 80px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
}
.pdp-thumb.is-active { border-color: var(--brand-copper); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }

.pdp-buy .sensory-tags { margin-bottom: var(--sp-4); }
.pdp-buy__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--brand-dark);
  margin-bottom: var(--sp-3);
}
.pdp-awards {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  /* Even breathing room above and below the award lozenge: the price below adds
     its own margin-top, so keep bottom at 0 to avoid a doubled gap. */
  margin-top: var(--sp-5);
  margin-bottom: 0;
}
.award-badge {
  background: var(--brand-gold);
  color: var(--brand-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
}
.star-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--brand-copper);
}
.star-row__count { color: var(--color-text-muted); font-size: var(--text-xs); }
.pdp-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.pdp-price__main {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--brand-dark);
}
.pdp-price__per {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pdp-abv {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-6);
}
.pdp-delivery-note {
  background: rgba(151,32,58, 0.08);
  border-left: 3px solid var(--brand-gold);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--text-sm);
  color: var(--brand-wine);
  margin-bottom: var(--sp-6);
}
.pdp-options {
  margin-bottom: var(--sp-6);
}
.pdp-options__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--sp-3);
}
.format-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.format-btn {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.format-btn.is-active, .format-btn:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: var(--brand-cream);
}
.gift-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  cursor: pointer;
  margin-bottom: var(--sp-6);
  transition: border-color var(--transition);
}
.gift-toggle:hover { border-color: var(--brand-copper); }
.gift-toggle__text {
  font-size: var(--text-sm);
  font-weight: 500;
}
.gift-toggle__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.pdp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
/* Status pill for products not buyable online (taproom-only / coming soon).
   A clear, legible badge — never a disabled-looking buy button. */
.pdp-status-badge {
  display: inline-block;
  border: 1px solid var(--brand-gold);
  color: var(--brand-dark);
  background: transparent;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
}
.pdp-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── 15. BRAND STORY SPLIT ────────────────────────────────── */
.brand-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}
@media (max-width: 768px) {
  .brand-story { grid-template-columns: 1fr; }
}
.brand-story__img {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}
.brand-story__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-story__content {
  background: var(--brand-dark);
  padding: clamp(var(--sp-12), 7vw, var(--sp-24));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── 16. THREE PILLARS ────────────────────────────────────── */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
@media (max-width: 768px) {
  .pillars-grid { grid-template-columns: 1fr; }
}
.pillar-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}
.pillar-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.pillar-card:hover .pillar-card__img { transform: scale(1.05); }
.pillar-card__link { position: absolute; inset: 0; z-index: 3; }
.pillar-card:focus-within { box-shadow: inset 0 0 0 3px var(--brand-gold); }
.pillar-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10,10,20,0.9) 100%);
}
.pillar-card__body {
  position: relative;
  z-index: 2;
  padding: var(--sp-8);
}
.pillar-card__num {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand-gold);
  margin-bottom: var(--sp-2);
}
.pillar-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--brand-cream);
  margin-bottom: var(--sp-3);
}
.pillar-card__text {
  font-size: var(--text-sm);
  color: var(--brand-stone);
  max-width: 30ch;
}

/* ── 17. TAPROOM FIND US ──────────────────────────────────── */
.find-us {
  background: var(--brand-dark);
  padding: clamp(var(--sp-16), 8vw, var(--sp-24)) clamp(var(--sp-6), 5vw, var(--sp-16));
}
.find-us__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: center;
}
@media (max-width: 768px) {
  .find-us__inner { grid-template-columns: 1fr; }
}
.find-us__hours dt {
  font-weight: 600;
  color: var(--brand-cream);
  font-size: var(--text-sm);
}
.find-us__hours dd {
  font-size: var(--text-sm);
  color: var(--brand-stone);
  margin-bottom: var(--sp-2);
}
.find-us__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }

/* ── 18. LIVING GREEN ─────────────────────────────────────── */
.living-green {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
}
.living-green__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.living-green__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,10,20,0.68);
}
.living-green__content {
  position: relative;
  z-index: 2;
  padding: clamp(var(--sp-16), 8vw, var(--sp-32)) clamp(var(--sp-6), 6vw, var(--sp-20));
  max-width: 680px;
}

/* ── 19. REVIEWS ──────────────────────────────────────────── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 768px) {
  .reviews-grid { grid-template-columns: 1fr; }
}
.review-card {
  background: var(--color-surface);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  border: 1px solid var(--color-divider);
}
.review-stars {
  display: flex;
  gap: 3px;
  color: var(--brand-gold);
  margin-bottom: var(--sp-4);
  font-size: var(--text-base);
}
.review-text {
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--sp-5);
  line-height: 1.7;
}
.review-author {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.review-product {
  font-size: var(--text-xs);
  color: var(--brand-copper);
  margin-top: var(--sp-1);
}

/* ── 20. JOURNAL BENTO GRID ───────────────────────────────── */
.journal-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 280px;
  gap: var(--sp-5);
}
.journal-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition: transform 300ms var(--ease);
}
.journal-card:hover { transform: scale(1.02); }
.journal-card--featured {
  grid-column: span 8;
  grid-row: span 2;
}
.journal-card--tall {
  grid-column: span 4;
  grid-row: span 2;
}
.journal-card--wide {
  grid-column: span 8;
  grid-row: span 1;
}
.journal-card--sm {
  grid-column: span 4;
  grid-row: span 1;
}
.journal-card--medium {
  grid-column: span 6;
  grid-row: span 1;
}
.journal-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.journal-card:hover .journal-card__img { transform: scale(1.05); }
.journal-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(26,22,18,0.88) 100%);
}
.journal-card--light .journal-card__overlay {
  background: linear-gradient(180deg, transparent 20%, rgba(26,22,18,0.75) 100%);
}
.journal-card__body {
  position: relative;
  z-index: 2;
  padding: var(--sp-6) var(--sp-8);
  width: 100%;
}
.journal-card__cat {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: var(--sp-2);
}
.journal-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--brand-cream);
  line-height: 1.25;
  margin-bottom: var(--sp-2);
}
.journal-card--featured .journal-card__title {
  font-size: var(--text-xl);
}
.journal-card__meta {
  font-size: var(--text-xs);
  color: var(--brand-stone);
}

/* Promo tile */
.journal-promo {
  background: var(--brand-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-8);
  border-radius: var(--r-md);
}
.journal-promo__cat {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: var(--sp-4);
}
.journal-promo__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--brand-cream);
  margin-bottom: var(--sp-4);
}
.journal-promo__text {
  font-size: var(--text-sm);
  color: var(--brand-stone);
  margin-bottom: var(--sp-6);
}

@media (max-width: 900px) {
  .journal-bento {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 260px;
  }
  .journal-card--featured { grid-column: span 2; grid-row: span 2; }
  .journal-card--tall    { grid-column: span 1; grid-row: span 1; }
  .journal-card--wide    { grid-column: span 2; grid-row: span 1; }
  .journal-card--sm      { grid-column: span 1; grid-row: span 1; }
  .journal-card--medium  { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 560px) {
  .journal-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }
  .journal-card--featured,
  .journal-card--tall,
  .journal-card--wide,
  .journal-card--sm,
  .journal-card--medium { grid-column: span 1; grid-row: span 1; }
}

/* Journal preview strip (homepage) */
.journal-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
@media (max-width: 768px) {
  .journal-preview { grid-template-columns: 1fr; }
}
.journal-preview-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}
/* Whole-card link (image + text), not just the title. */
.journal-preview-card__link { position: absolute; inset: 0; z-index: 2; }
.journal-preview-card__link:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 4px; }
.journal-preview-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.journal-preview-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.journal-preview-card:hover .journal-preview-card__img img {
  transform: scale(1.04);
}
.journal-preview-card__cat {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-copper);
  margin-bottom: var(--sp-2);
}
.journal-preview-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--brand-dark);
  margin-bottom: var(--sp-2);
}
.journal-preview-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: auto;
  padding-top: var(--sp-3);
}

/* ── 21. MEMBERSHIP / VAULT ───────────────────────────────── */
.vault-hero {
  background: var(--brand-dark);
  padding: clamp(var(--sp-24), 10vw, var(--sp-32)) clamp(var(--sp-6), 5vw, var(--sp-16));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.vault-hero__content { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }

.vault-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
@media (max-width: 768px) {
  .vault-benefits { grid-template-columns: 1fr; }
}
.benefit-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(245,240,232,0.1);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  text-align: center;
}
.benefit-card__icon {
  width: 48px; height: 48px;
  color: var(--brand-gold);
  margin: 0 auto var(--sp-5);
}
.benefit-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--brand-cream);
  margin-bottom: var(--sp-3);
}
.benefit-card__text {
  font-size: var(--text-sm);
  color: var(--brand-stone);
}

/* --- the dark vault canvas (backs every membership section) --- */
.section-vault {
  background: var(--brand-dark);
  color: var(--brand-cream);
  padding-block: clamp(var(--sp-16), 8vw, var(--sp-32));
}
.section-vault--mid {
  border-top: 1px solid rgba(245,240,232,0.08);
}

/* --- pricing plans --- */
.vault-pricing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}
@media (max-width: 720px) {
  .vault-pricing { grid-template-columns: 1fr; max-width: 420px; }
}
.vault-price-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(245,240,232,0.1);
  border-radius: var(--r-md);
  padding: var(--sp-10) var(--sp-8);
}
.vault-price-card--featured {
  border-color: var(--brand-gold);
  background: rgba(198,153,95,0.06);
}
.vault-price-card__period {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-gold);
  margin-bottom: var(--sp-4);
}
.vault-price-card__amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--brand-cream);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.vault-price-card__sub {
  font-size: var(--text-sm);
  color: var(--brand-stone);
  margin-bottom: var(--sp-7);
}
.vault-price-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
}
.vault-price-card__features li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--brand-cream);
  line-height: 1.5;
}
.vault-price-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 1px;
  background: var(--brand-gold);
}

/* --- guarantee line --- */
.vault-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
  font-size: var(--text-sm);
  color: var(--brand-stone);
}
.vault-guarantee svg { color: var(--brand-gold); flex-shrink: 0; }

/* --- sign-up form --- */
.vault-form {
  max-width: 520px;
  margin-inline: auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(245,240,232,0.1);
  border-radius: var(--r-md);
  padding: clamp(var(--sp-8), 4vw, var(--sp-12));
}
.vault-form__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--brand-cream);
  text-align: center;
  margin-bottom: var(--sp-3);
}
.vault-form__sub {
  font-size: var(--text-sm);
  color: var(--brand-stone);
  text-align: center;
  line-height: 1.6;
  margin-bottom: var(--sp-8);
}
.vault-form__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-stone);
  margin-bottom: var(--sp-3);
}
.vault-form__toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.vault-form__option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: 1px solid rgba(245,240,232,0.2);
  border-radius: var(--r-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.vault-form__option:hover { border-color: rgba(245,240,232,0.4); }
.vault-form__option.is-selected {
  border-color: var(--brand-gold);
  background: rgba(198,153,95,0.08);
}
.vault-form__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.vault-form__option:focus-within {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}
.vault-form__option-label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--brand-cream);
}
.vault-form__option-price {
  font-size: var(--text-xs);
  color: var(--brand-stone);
}
.vault-form__group { margin-bottom: var(--sp-5); }
.vault-form__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--brand-cream);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(245,240,232,0.2);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
}
.vault-form__input::placeholder { color: rgba(157,157,156,0.7); }
.vault-form__input:focus {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
  border-color: var(--brand-gold);
}
.vault-form__cta { margin-top: var(--sp-6); }

/* --- member testimonials --- */
.vault-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
@media (max-width: 900px) {
  .vault-testimonials { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(245,240,232,0.1);
  border-radius: var(--r-md);
  padding: var(--sp-8);
}
.testimonial-card__quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--brand-cream);
  line-height: 1.5;
  margin-bottom: var(--sp-6);
  flex: 1;
}
.testimonial-card__author {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--brand-cream);
}
.testimonial-card__location {
  font-size: var(--text-xs);
  color: var(--brand-stone);
  margin-top: var(--sp-1);
}

/* ── 22. TIMELINE ─────────────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: var(--sp-12);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-divider);
}
.timeline-item {
  position: relative;
  padding-bottom: var(--sp-12);
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-12) - 1px);
  top: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brand-gold);
  border: 3px solid var(--brand-cream);
  box-shadow: 0 0 0 2px var(--brand-gold);
}
.timeline-item__year {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-copper);
  margin-bottom: var(--sp-2);
}
.timeline-item__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--brand-dark);
  margin-bottom: var(--sp-3);
}
.timeline-item__text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* ── 23. MAP PLACEHOLDER ──────────────────────────────────── */
.map-placeholder {
  background: #D6D2CB url('./assets/cockermouth-aerial.jpg') center / cover no-repeat;
  border-radius: var(--r-md);
  height: clamp(320px, 30vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.map-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,20,0) 0%, rgba(10,10,20,0.25) 100%);
  pointer-events: none;
}
.map-placeholder iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--r-md);
  z-index: 2;
}

/* ── 24. FORM ELEMENTS ────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.form-label--cream { color: var(--brand-cream); }
.form-input, .form-select, .form-textarea {
  font-size: var(--text-base);
  font-family: var(--font-body);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(198,153,95,0.15);
}
.form-input--dark, .form-select--dark, .form-textarea--dark {
  background: rgba(255,255,255,0.06);
  border-color: rgba(245,240,232,0.15);
  color: var(--brand-cream);
}
.form-input--dark::placeholder { color: var(--brand-stone); }
.form-textarea { min-height: 100px; resize: vertical; }

/* Email capture */
.email-capture {
  display: flex;
  gap: 0;
  max-width: 440px;
}
.email-capture .form-input {
  border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.email-capture .btn {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  white-space: nowrap;
}

/* ── 25. FOOTER ───────────────────────────────────────────── */
.site-footer {
  background: var(--brand-dark);
  color: var(--brand-stone);
  padding-top: clamp(var(--sp-16), 8vw, var(--sp-24));
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(var(--sp-6), 4vw, var(--sp-12));
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 clamp(var(--sp-6), 5vw, var(--sp-16)) var(--sp-16);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand .site-logo { color: var(--brand-cream); margin-bottom: var(--sp-5); }
.footer-brand p {
  font-size: var(--text-sm);
  color: var(--brand-stone);
  max-width: 30ch;
  margin-bottom: var(--sp-6);
}
.footer-map {
  margin: 0 0 var(--sp-6);
  max-width: 320px;
  border: 1px solid rgba(245,240,232,0.15);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.footer-map iframe {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
}
.footer-social {
  display: flex;
  gap: var(--sp-4);
}
.footer-social a {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  border: 1px solid rgba(245,240,232,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-stone);
  transition: all var(--transition);
}
.footer-social a:hover {
  border-color: var(--brand-gold);
  color: var(--brand-gold);
}
.footer-col h3 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-cream);
  margin-bottom: var(--sp-5);
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: var(--sp-3); }
.footer-col ul a {
  font-size: var(--text-sm);
  color: var(--brand-stone);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-col ul a:hover { color: var(--brand-gold); }
.footer-bottom {
  border-top: 1px solid rgba(245,240,232,0.08);
  padding: var(--sp-5) clamp(var(--sp-6), 5vw, var(--sp-16));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  max-width: var(--content-wide);
  margin: 0 auto;
}
.footer-bottom p {
  font-size: var(--text-xs);
  color: var(--brand-stone);  /* stone (not muted) — muted is tuned for cream, fails AA on the dark footer */
  max-width: none;
}
.footer-bottom a { color: var(--brand-stone); }
.footer-bottom a:hover { color: var(--brand-gold); }
.drinkaware {
  font-size: var(--text-xs);
  color: var(--brand-stone);
}

/* ── 26. WALKS CARDS ──────────────────────────────────────── */
.walk-card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--color-divider);
  align-items: start;
}
.walk-card:last-child { border-bottom: none; }
.walk-card__img {
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  overflow: hidden;
}
.walk-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.walk-card__badges {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.walk-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.walk-badge--green {
  background: rgba(151,32,58,0.1);
  border-color: var(--brand-wine);
  color: var(--brand-wine);
}
.walk-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: var(--sp-3);
}
.walk-card__text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-4);
}
@media (max-width: 560px) {
  .walk-card { grid-template-columns: 1fr; }
}

/* ── 27. THINGS TO DO GRID ────────────────────────────────── */
.things-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 560px) {
  .things-grid { grid-template-columns: 1fr; }
}
.thing-card {
  background: var(--color-surface);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--color-divider);
}
.thing-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.thing-card__img img { width: 100%; height: 100%; object-fit: cover; }
.thing-card__body { padding: var(--sp-6); }
.thing-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--sp-2);
}
.thing-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── 28. SCROLL REVEAL ANIMATIONS ────────────────────────── */
/* No-JS / pre-script fallback: visible by default. Initial hidden state
   is gated on `html.js`, set inline at the top of <head> in every page,
   plus a `scripting: none` media-query backstop for full-disable. */
.reveal {
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (scripting: none) {
  .reveal { opacity: 1 !important; transform: none !important; }
}
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }

/* ── 29. UGC GRID ─────────────────────────────────────────── */
.ugc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-2);
}
@media (max-width: 768px) {
  .ugc-grid { grid-template-columns: repeat(3, 1fr); }
}
.ugc-item {
  aspect-ratio: 1;
  overflow: hidden;
  background: #E8E3DB;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.ugc-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.ugc-item:hover img { transform: scale(1.08); }

/* ── 30. MISC HELPERS ─────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--color-divider);
  margin-block: var(--sp-8);
}
.gold-line {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--brand-gold);
  border-radius: 2px;
  margin: var(--sp-5) 0;
}
.gold-line--center { margin-inline: auto; }

/* Active-tab style used in taproom section */
.tab-btns {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-divider);
  margin-bottom: var(--sp-10);
}
.tab-btn {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
}
.tab-btn.is-active, .tab-btn:hover {
  color: var(--brand-dark);
  border-bottom-color: var(--brand-copper);
}

/* ── VIEW PRODUCT LINK (homepage featured cards) ──────── */
.btn-view-product {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-wine);
  border: 1px solid var(--brand-wine);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.btn-view-product:hover {
  background: var(--brand-wine);
  color: var(--brand-cream);
}

/* PDP "also available on" format chips (cask/keg/bottle/can sign-off). */
.pdp-formats__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.pdp-format-chip {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--brand-stone);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-dark);
}

/* Trade pump-clip / tap-badge gallery. White tiles (so the clips with baked white
   backgrounds sit seamlessly and the die-cut ones read clean), centred flex rows so
   incomplete rows balance rather than orphaning. */
.pump-clip-group-label { text-align: center; margin-top: var(--sp-12); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-wine); }
.pump-clip-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-5); max-width: 760px; margin-inline: auto; }
.pump-clip { width: 150px; margin: 0; text-align: center; }
.pump-clip__tile { background: #fff; border: 1px solid rgba(10,10,20,0.06); box-shadow: var(--shadow-sm); border-radius: var(--r-md); padding: var(--sp-2); display: flex; align-items: center; justify-content: center; aspect-ratio: 7 / 8; cursor: zoom-in; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pump-clip__tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pump-clip__tile img { width: 100%; height: 100%; object-fit: contain; }
/* Die-cut clips with a clear background: no tile, laid straight on the cream
   with a soft drop-shadow so the shield lifts off the page. */
.pump-clip--boxless .pump-clip__img { width: 100%; aspect-ratio: 7 / 8; object-fit: contain; display: block; filter: drop-shadow(0 8px 16px rgba(10,10,20,0.20)); transition: transform 0.3s ease; }
.pump-clip--boxless .pump-clip__img:hover { transform: translateY(-3px) scale(1.03); }
.pump-clip figcaption { margin-top: var(--sp-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-dark); }
@media (max-width: 600px) { .pump-clip { width: 130px; } }

/* Trade core-range badge strip — the four core pump clips, boxless, no captions,
   between the hero and the intro. */
.trade-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(var(--sp-5), 4vw, var(--sp-12)); max-width: var(--content-wide); margin-inline: auto; }
.trade-badge { width: clamp(120px, 15vw, 180px); height: auto; filter: drop-shadow(0 8px 16px rgba(10,10,20,0.18)); }

/* Trade venue gallery — two-row broken grid (one feature tile + varying tiles),
   lightbox-enabled. Tuned for ~6 images filling exactly two rows. */
.broken-gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(92px, 9vw, 150px); gap: var(--sp-3); max-width: var(--content-wide); margin-inline: auto; }
.broken-gallery__item { border-radius: var(--r-md); overflow: hidden; }
.broken-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.broken-gallery__item:hover img { transform: scale(1.04); }
.broken-gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.broken-gallery__item:nth-child(2),
.broken-gallery__item:nth-child(3),
.broken-gallery__item:nth-child(4) { grid-column: span 2; }
.broken-gallery__item:nth-child(5),
.broken-gallery__item:nth-child(6) { grid-column: span 1; }
@media (max-width: 700px) {
  .broken-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 38vw; }
  .broken-gallery__item { grid-column: span 1 !important; grid-row: span 1 !important; }
  .broken-gallery__item:nth-child(1) { grid-column: span 2 !important; }
}

/* ── DETAILS GRID (tours, escape-room) ────────────────── */
.details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 560px) {
  /* Keep the 3 short stats as a scannable row rather than a tall 1-col stack */
  .details-grid { gap: var(--sp-3); }
  .details-grid p { font-size: var(--text-sm) !important; }
}

/* ── AGE GATE ────────────────────────────────────────────── */
.age-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,20,0.92);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.age-gate.is-visible { opacity: 1; }
.age-gate__card {
  text-align: center;
  max-width: 420px;
  padding: var(--sp-10) var(--sp-8);
}
.age-gate__logo {
  display: block;
  margin: 0 auto var(--sp-8);
  width: 140px;
  height: auto;
}
.age-gate__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--brand-cream);
  font-weight: 400;
  margin-bottom: var(--sp-3);
}
.age-gate__text {
  font-size: var(--text-sm);
  color: var(--brand-stone);
  margin-bottom: var(--sp-8);
}
.age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.age-gate__btn {
  display: block;
  width: 100%;
  padding: var(--sp-4) var(--sp-6);
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.age-gate__btn--yes {
  background: var(--brand-wine);
  color: var(--brand-cream);
}
.age-gate__btn--yes:hover { filter: brightness(0.9); }
.age-gate__btn--no {
  background: transparent;
  color: var(--brand-stone);
  border: 1px solid rgba(196,181,160,0.3);
}
.age-gate__btn--no:hover {
  border-color: var(--brand-stone);
  color: var(--brand-cream);
}
.age-gate__btn:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}
.age-gate__legal {
  font-size: var(--text-xs);
  color: var(--brand-stone);
  margin-top: var(--sp-6);
}
.age-gate__legal a {
  color: var(--brand-stone);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── NEWSLETTER SIGNUP ───────────────────────────────────── */
.newsletter-signup {
  display: flex;
  gap: var(--sp-3);
  max-width: 440px;
}
.newsletter-signup__input {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(196,181,160,0.3);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.06);
  color: var(--brand-cream);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.newsletter-signup__input::placeholder { color: var(--brand-stone); }
.newsletter-signup__btn {
  padding: var(--sp-3) var(--sp-5);
  border: none;
  border-radius: var(--r-md);
  background: var(--brand-wine);
  color: var(--brand-cream);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.newsletter-signup__btn:hover { filter: brightness(0.9); }
@media (max-width: 480px) {
  .newsletter-signup { flex-direction: column; }
}

/* ── CART DRAWER ─────────────────────────────────────────── */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 399;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}
.cart-drawer-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 92vw);
  height: 100%;
  background: var(--brand-dark);
  border-left: 1px solid rgba(196,181,160,0.12);
  z-index: 400;
  transform: translateX(100%);
  transition: transform 400ms var(--ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cart-drawer.is-open {
  transform: translateX(0);
}
.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid rgba(196,181,160,0.12);
  flex-shrink: 0;
}
.cart-drawer__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--brand-cream);
  margin: 0;
}
.cart-drawer__close {
  color: var(--brand-stone);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-1);
  line-height: 0;
  transition: color 0.2s;
}
.cart-drawer__close:hover { color: var(--brand-cream); }
.cart-drawer__close:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
  border-radius: 2px;
}
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-8);
}
.cart-drawer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cart-drawer__empty {
  color: var(--brand-stone);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--sp-12) 0;
  display: none;
}
.cart-drawer__empty.is-visible { display: block; }
.cart-drawer__empty a {
  color: var(--brand-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Cart item row */
.cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid rgba(196,181,160,0.08);
}
.cart-item:last-child { border-bottom: none; }
.cart-item__img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: rgba(196,181,160,0.08);
  flex-shrink: 0;
}
.cart-item__img-placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  background: rgba(196,181,160,0.08);
  flex-shrink: 0;
}
.cart-item__info { min-width: 0; }
.cart-item__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--brand-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 var(--sp-2);
}
.cart-item__price {
  font-size: var(--text-xs);
  color: var(--brand-gold);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cart-item__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
}
.cart-item__qty {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.cart-item__qty-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(196,181,160,0.1);
  border: none;
  border-radius: var(--r-sm);
  color: var(--brand-cream);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: 1;
  transition: background 0.2s;
}
.cart-item__qty-btn:hover { background: rgba(196,181,160,0.2); }
.cart-item__qty-btn:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}
.cart-item__qty-value {
  font-size: var(--text-sm);
  color: var(--brand-cream);
  min-width: 18px;
  text-align: center;
}
.cart-item__remove {
  background: none;
  border: none;
  color: var(--brand-stone);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
.cart-item__remove:hover { color: var(--brand-wine); }

/* Cart footer */
.cart-drawer__footer {
  flex-shrink: 0;
  padding: var(--sp-6) var(--sp-8);
  border-top: 1px solid rgba(196,181,160,0.12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cart-drawer__progress .cart-progress-bar__label {
  font-size: var(--text-xs);
  color: var(--brand-muted); /* progress pill is a light surface even in the dark drawer; stone failed AA (1.9:1) */
  margin-bottom: var(--sp-2);
}
.cart-drawer__total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-drawer__total-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-stone);
}
.cart-drawer__total-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--brand-cream);
}
.cart-drawer__checkout-btn {
  display: block;
  width: 100%;
  padding: var(--sp-4) var(--sp-6);
  background: var(--brand-wine);
  color: var(--brand-cream);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background 0.2s;
}
.cart-drawer__checkout-btn:hover { filter: brightness(0.9); }
.cart-drawer__checkout-btn:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}
.cart-drawer__checkout-btn.is-disabled {
  background: rgba(196,181,160,0.15);
  color: var(--brand-stone);
  pointer-events: none;
}

/* ============================================================
   WALKS PAGE (Seven Walks, Seven Pints) — page-specific styles.
   Card rules are scoped under .walks-grid so they never affect the
   global .walk-card list rows used on the Our Home page.
   No gradients / shadows / glassmorphism (brand rule). Flat scrims.
   ============================================================ */
.walks-hero {
  position: relative;
  min-height: clamp(480px, 76svh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-16) clamp(var(--sp-6), 5vw, var(--sp-16)) var(--sp-12);
  background: var(--brand-dark);
  overflow: hidden;
}
.walks-hero__bg {
  position: absolute; inset: 0;
  background-image: url('/assets/brewery-aerial.jpg');
  background-size: cover; background-position: center 40%;
  opacity: 1;
}
/* Retained for the JS hook; the LCP background now paints immediately (no fade). */
.walks-hero__bg.is-loaded { opacity: 1; }
.walks-hero__overlay { position: absolute; inset: 0; background: rgba(10, 10, 20, 0.6); }
/* Breadcrumb (structural reset — horizontal row, no list markers; safe on any page) */
.breadcrumb__inner { width: 100%; }
.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.breadcrumb__list li { display: inline-flex; align-items: center; margin: 0; }
.breadcrumb__list a { text-decoration: none; transition: opacity var(--transition); }
.breadcrumb__list a:hover,
.breadcrumb__list a:focus-visible { text-decoration: underline; }

/* Breadcrumb colours for the dark walks hero */
.walks-hero .breadcrumb { position: relative; z-index: 2; margin-bottom: var(--sp-5); }
.walks-hero .breadcrumb__list a { color: var(--brand-cream); opacity: 0.75; }
.walks-hero .breadcrumb__list a:hover,
.walks-hero .breadcrumb__list a:focus-visible { opacity: 1; }
.walks-hero .breadcrumb__list [aria-current="page"] { color: var(--brand-gold); opacity: 1; }
.walks-hero .breadcrumb__sep { color: var(--brand-cream); opacity: 0.4; }

/* Taproom cross-link box-outs (Tours / Events / Venue Hire / Escape Room) */
.boxout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}
.boxout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: var(--sp-8) var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-md);
  transition: border-color var(--transition), transform var(--transition);
}
.boxout:hover,
.boxout:focus-visible { border-color: var(--brand-gold); transform: translateY(-3px); }
.boxout__title { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.boxout__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--sp-5); }
.boxout__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-wine);
  transition: gap var(--transition);
}
.boxout:hover .boxout__link { gap: var(--sp-3); }
@media (max-width: 1000px) { .boxout-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .boxout-grid { grid-template-columns: 1fr; } }

/* Team roster grid: 3-up so 9 members land 3/3/3 (no lone orphan card); 1-up on mobile */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); margin-top: var(--sp-8); }
@media (max-width: 768px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
.walks-hero__content { position: relative; z-index: 2; max-width: 760px; color: var(--brand-cream); }
.walks-hero__eyebrow {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brand-gold); margin-bottom: var(--sp-4);
}
.walks-hero__title {
  font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02; font-weight: 600; margin-bottom: var(--sp-5);
}
.walks-hero__title em { font-style: italic; color: var(--brand-gold); }
.walks-hero__sub { font-size: var(--text-lg); line-height: 1.6; color: var(--brand-stone); max-width: 48ch; }
.walks-hero__scroll { position: absolute; bottom: var(--sp-5); left: 50%; transform: translateX(-50%); z-index: 2; }
.walks-hero__scroll-line { width: 1px; height: 48px; background: var(--brand-gold); opacity: 0.5; }

/* ── Unified interior page header (PageHeader.astro) ──────────────
   Mirrors the approved walks-hero composition; background image supplied per
   page via inline style so one component serves every page. Named `page-hero`
   to avoid the pre-existing text-only `.page-header` (shop/journal/membership). */
.page-hero {
  position: relative;
  min-height: clamp(480px, 76svh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-16) clamp(var(--sp-6), 5vw, var(--sp-16)) var(--sp-12);
  background: var(--brand-dark);
  overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 40%;
}
.page-hero__overlay { position: absolute; inset: 0; background: rgba(10, 10, 20, 0.6); }
/* Bottom scrim keeps the overline/title/sub legible over bright photos (esp.
   mobile, e.g. taproom + venue-hire). Applied to walks too for parity. */
.page-hero::after, .walks-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 20, 0.78) 0%, rgba(10, 10, 20, 0) 46%);
}
.page-hero .breadcrumb { position: relative; z-index: 2; margin-bottom: var(--sp-5); }
.page-hero .breadcrumb__list a { color: var(--brand-cream); opacity: 0.75; }
.page-hero .breadcrumb__list a:hover,
.page-hero .breadcrumb__list a:focus-visible { opacity: 1; }
.page-hero .breadcrumb__list [aria-current="page"] { color: var(--brand-gold); opacity: 1; }
.page-hero .breadcrumb__sep { color: var(--brand-cream); opacity: 0.4; }
.page-hero__content { position: relative; z-index: 2; max-width: 760px; color: var(--brand-cream); }
.page-hero__eyebrow {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brand-gold); margin-bottom: var(--sp-4);
}
.page-hero__title {
  font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02; font-weight: 600; margin-bottom: var(--sp-5);
}
.page-hero__title em { font-style: italic; color: var(--brand-gold); }
.page-hero__sub { font-size: var(--text-lg); line-height: 1.6; color: var(--brand-stone); max-width: 48ch; }

/* PDP "what goes in" ingredient cards (products/[slug].astro). These rules lived
   only in the prototype's inline styles and were never ported, so the dynamic
   PDP rendered the cards as bare floating text. */
.ingredients-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
@media (max-width: 560px) { .ingredients-grid { grid-template-columns: 1fr; } }
.ingredient-item {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.walks-intro { background: var(--color-bg); padding: clamp(var(--sp-16), 9vw, var(--sp-32)) clamp(var(--sp-6), 5vw, var(--sp-16)); }
.walks-intro__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(var(--sp-10), 6vw, var(--sp-24)); align-items: start; }
.walks-intro__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-copper); margin-bottom: var(--sp-3); }
.walks-intro__heading { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.15; margin: var(--sp-4) 0 var(--sp-5); }
.walks-intro__body { font-size: var(--text-base); line-height: 1.8; color: var(--color-text-muted); margin-bottom: var(--sp-4); max-width: 60ch; }
.walks-intro__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); border-top: 1px solid var(--color-divider); padding-top: var(--sp-8); }
.walks-intro__stats .stat-item__num { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--brand-wine); line-height: 1; }
.walks-intro__stats .stat-item__label { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-top: var(--sp-2); }

.walks-section { background: var(--color-bg); padding: 0 clamp(var(--sp-6), 5vw, var(--sp-16)) clamp(var(--sp-16), 9vw, var(--sp-32)); }
.walks-section__inner { max-width: 1100px; margin: 0 auto; }
.walks-section-header { margin-bottom: var(--sp-12); max-width: 62ch; }
.walks-section-header__tag { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-copper); margin-bottom: var(--sp-2); }
.walks-section-header__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--sp-3); }
.walks-section-header__sub { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7; }

/* Our Home -> Walks & Routes box-out (replaces the old inline 3-walk list; the
   detail lives on /walks). Horizontal text + CTA, stacks on small screens. */
.walks-boxout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
  background: var(--brand-dark);
  border-radius: var(--r-lg);
  padding: clamp(var(--sp-8), 5vw, var(--sp-12));
}
.walks-boxout__text { max-width: 48ch; }
.walks-boxout__title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--brand-cream); font-weight: 400; margin: var(--sp-3) 0; }
.walks-boxout__sub { font-size: var(--text-base); color: var(--brand-stone); line-height: 1.7; font-weight: 300; }
.walks-boxout__btn { flex-shrink: 0; }
@media (max-width: 640px) { .walks-boxout { flex-direction: column; align-items: flex-start; } }

/* Taproom photo gallery — a real responsive grid (was unstyled, so the images
   stacked into one long column). Auto-fits up to 4 across on desktop down to 1
   on phones. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-4);
}
.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}

/* Small 2x2 gallery in the taproom Food column — fills the column beside the
   tap board and adds colour. Reuses the CMS gallery images. */
.food-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.food-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
}

/* Walks list — single-column stack of horizontal cream rows: photo left,
   content + map right, thin dividers, no dark card chrome. */
.walks-grid { display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto; }
.walks-grid .walk-card {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr) 300px;
  align-items: stretch;
  min-height: 320px;
  background: #ffffff;
  border: 1px solid rgba(10,10,20,0.08);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: clamp(var(--sp-5), 2.5vw, var(--sp-8));
  color: var(--brand-dark);
}
/* Photo: flush left, landscape, anchored to the top of the card (width-driven
   aspect so it never overflows its 440px column) */
.walks-grid .walk-card__photo { position: relative; background: var(--brand-stone); width: 100%; aspect-ratio: 11 / 8; }
.walks-grid .walk-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Standard 3-pane cards: inset the photo so it reads as a padded, rounded image
   sitting inside the white card (matching the text + map insets), rather than
   bleeding to the card edge. The full-width last card keeps its flush banner. */
.walks-grid .walk-card:not(.walk-card--full) .walk-card__photo { --photo-pad: clamp(var(--sp-6), 2vw, var(--sp-8)); background: transparent; }
.walks-grid .walk-card:not(.walk-card--full) .walk-card__photo img { inset: var(--photo-pad); width: calc(100% - 2 * var(--photo-pad)); height: calc(100% - 2 * var(--photo-pad)); border-radius: 12px; }
/* Text column */
.walks-grid .walk-card__text { padding: clamp(var(--sp-7), 2.6vw, var(--sp-9)) clamp(var(--sp-5), 2vw, var(--sp-7)) clamp(var(--sp-7), 2.6vw, var(--sp-9)) clamp(var(--sp-7), 2.6vw, var(--sp-9)); display: flex; flex-direction: column; min-width: 0; }
.walks-grid .walk-card__toprow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.walks-grid .walk-card__num { font-family: var(--font-display); font-size: clamp(2.6rem, 3.4vw, 3.4rem); line-height: 1; color: var(--brand-wine); font-weight: 400; }
.walks-grid .walk-card__pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.walks-grid .walk-pill { min-width: 84px; text-align: center; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-full); border: 1px solid var(--color-border); color: var(--brand-dark); background: transparent; }
.walks-grid .walk-pill--challenging { background: var(--brand-wine); border-color: var(--brand-wine); color: var(--brand-cream); }
.walks-grid .walk-pill--moderate { background: var(--brand-copper); border-color: var(--brand-copper); color: var(--brand-dark); }
.walks-grid .walk-card__title { font-family: var(--font-display); color: var(--brand-dark); font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 400; line-height: 1.1; margin-bottom: var(--sp-3); }
.walks-grid .walk-card__desc { font-size: var(--text-sm); line-height: 1.65; color: var(--color-text-muted); margin-bottom: var(--sp-4); max-width: 46ch; }
.walks-grid .walk-card__pub { font-size: var(--text-sm); color: var(--brand-dark); margin-bottom: var(--sp-5); }
.walks-grid .walk-card__pin { color: var(--brand-wine); }
.walks-grid .walk-card__actions { margin-top: auto; }
.walks-grid .walk-card__actions .btn-wine { min-width: 180px; text-align: center; }
/* Map: right column, illustrated route map, links to directions */
.walks-grid .walk-card__map { display: flex; align-items: center; justify-content: center; padding: clamp(var(--sp-4), 2vw, var(--sp-6)) clamp(var(--sp-5), 2.4vw, var(--sp-8)) clamp(var(--sp-4), 2vw, var(--sp-6)) 0; min-width: 0; }
.walks-grid .walk-card__map img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
/* Last card: full-width photo banner, text below */
/* Coming-soon walk (no map yet): drop the map column so the card is photo + text. */
.walks-grid .walk-card--soon { grid-template-columns: 440px minmax(0, 1fr); }
.walks-grid .walk-card--full { display: block; padding-bottom: clamp(var(--sp-7), 3vw, var(--sp-10)); }
.walks-grid .walk-card--full .walk-card__photo { position: relative; width: 100%; aspect-ratio: 1200/340; }
.walks-grid .walk-card--full .walk-card__photo img { position: absolute; inset: 0; }
.walks-grid .walk-card--full .walk-card__text { max-width: none; padding-bottom: 0; }
.walks-grid .walk-card--full .walk-card__desc { max-width: 70ch; }
.walks-grid .walk-card--full .walk-card__map { display: none; }
@media (max-width: 900px) {
  .walks-grid .walk-card { grid-template-columns: 1fr; min-height: 0; }
  .walks-grid .walk-card__photo { aspect-ratio: 16/10; }
  .walks-grid .walk-card__photo img { position: absolute; }
  .walks-grid .walk-card__text { padding: clamp(var(--sp-6), 5vw, var(--sp-8)); }
  .walks-grid .walk-card__map { justify-content: flex-start; padding: 0 clamp(var(--sp-6), 5vw, var(--sp-8)) clamp(var(--sp-6), 5vw, var(--sp-8)); }
  .walks-grid .walk-card__map img { max-width: 480px; }
  .walks-grid .walk-card--full .walk-card__photo { aspect-ratio: 16/9; }
}

.walks-living-green { position: relative; padding: clamp(var(--sp-16), 9vw, var(--sp-32)) clamp(var(--sp-6), 5vw, var(--sp-16)); background: var(--brand-dark); overflow: hidden; }
.walks-living-green__bg { position: absolute; inset: 0; background-image: url('/assets/brewery-aerial.jpg'); background-size: cover; background-position: center; opacity: 0.22; }
.walks-living-green__overlay { position: absolute; inset: 0; background: rgba(10,10,20,0.72); }
.walks-living-green__content { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(var(--sp-10), 6vw, var(--sp-20)); align-items: center; }
.walks-living-green__heading { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3rem); color: var(--brand-cream); line-height: 1.15; margin: var(--sp-4) 0 var(--sp-5); }
.walks-living-green__heading em { font-style: italic; color: var(--brand-gold); }
.walks-living-green__body { font-size: var(--text-base); line-height: 1.7; color: var(--brand-stone); margin-bottom: var(--sp-6); max-width: 50ch; }
.walks-living-green__pull-quote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-style: italic; color: var(--brand-cream); line-height: 1.4; border-left: 2px solid var(--brand-gold); padding-left: var(--sp-5); }
.walks-living-green__pull-attr { font-size: var(--text-sm); color: var(--brand-gold); margin-top: var(--sp-4); padding-left: var(--sp-5); }

.taproom-float { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 50; max-width: 280px; background: var(--brand-dark); border: 1px solid var(--brand-gold); border-radius: var(--r-md); padding: var(--sp-5); opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.taproom-float.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.taproom-float__label { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-gold); margin-bottom: var(--sp-2); }
.taproom-float__text { font-size: var(--text-sm); color: var(--brand-stone); margin-bottom: var(--sp-4); }

@media (max-width: 880px) {
  .walks-intro__inner { grid-template-columns: 1fr; }
  .walks-living-green__content { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .taproom-float { left: var(--sp-4); right: var(--sp-4); max-width: none; }
}

/* Taproom "What's On Tap" — items sit on a dark grid, so force legible light
   text (they were inheriting near-black on near-black = invisible). */
.on-tap-grid { display: grid; grid-template-columns: 1fr 1fr; }
.on-tap-grid .tap-item { padding: var(--sp-3) 0; border-bottom: 1px solid rgba(245,240,232,0.1); }
.on-tap-grid .tap-item__name { font-family: var(--font-display); font-size: var(--text-base); color: var(--brand-cream); margin-bottom: 2px; }
.on-tap-grid .tap-item__abv { font-size: var(--text-xs); color: var(--brand-stone); }
.on-tap-grid .tap-item__note { font-size: var(--text-xs); color: var(--brand-gold); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 560px) { .on-tap-grid { grid-template-columns: 1fr; } }

/* Link out to the live Untappd venue menu, below the tap board. Wine (not gold)
   for AA contrast on the cream background; underlined so it reads as a link
   without relying on colour alone. */
.tap-untappd-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-wine);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: gap 0.2s ease, color 0.2s ease;
}
.tap-untappd-link:hover { gap: var(--sp-3); color: var(--brand-dark); }

/* History timeline (our-story/history) */
.history-timeline { list-style: none; margin: var(--sp-10) 0 0; padding: 0 0 0 var(--sp-8); position: relative; }
.history-timeline__item:not(:last-child)::after { content: ''; position: absolute; left: -27px; top: calc(var(--text-xl) / 2); bottom: calc(-1 * var(--text-xl) / 2); width: 2px; background: var(--color-divider); }
.history-timeline__item { position: relative; padding-bottom: var(--sp-10); }
.history-timeline__item:last-child { padding-bottom: 0; }
.history-timeline__item::before { content: ''; position: absolute; left: -32px; top: calc(var(--text-xl) / 2 - 5.5px); width: 11px; height: 11px; background: var(--brand-gold); transform: rotate(45deg); }
.history-timeline__year { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--brand-gold); line-height: 1; margin-bottom: var(--sp-3); }
.history-timeline__title { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.history-timeline__text { line-height: 1.8; color: var(--color-text-muted); max-width: 70ch; }
@media (max-width: 560px) { .history-timeline { padding-left: var(--sp-6); } .history-timeline__item::before { left: -24px; } .history-timeline__item:not(:last-child)::after { left: -19px; } }

/* History timeline images */
.history-timeline__figure { margin: var(--sp-5) 0 0; max-width: 560px; }
.history-timeline__figure img { display: block; width: 100%; height: clamp(220px, 28vw, 300px); object-fit: cover; border-radius: var(--r-sm); }
.history-timeline__credit { margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; }

/* Mixed case promo card (shop): layout owned here, stacks on small screens */
.mixed-case-card {
  background: var(--brand-dark);
  border-radius: var(--r-md);
  overflow: hidden;
  grid-column: span 2;
  display: grid;
  grid-template-columns: 220px 1fr;
}
@media (max-width: 640px) {
  .mixed-case-card {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
}

/* fixbatch:home — per-bottle price note (no line-through; price-was reserved for genuine compare-at prices) */
.product-card__price-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-left: var(--sp-2);
}

/* fixbatch:home — hero motion toggle overlaps Our Story CTA at 375px (clear the 44px toggle below the CTA row) */
@media (max-width: 480px) {
  .hero__content { padding-bottom: calc(var(--sp-8) + 56px); }
}

/* fixbatch:home — pillar card solid dark base so text reads before/without the lazy image */
.pillar-card { background: var(--brand-dark); }

/* fixbatch:visit — announce-bar items clipped at 375px (wrap instead of nowrap-in-overflow) */
@media (max-width: 560px) {
  .announce-bar {
    height: auto;
    min-height: 40px;
    padding: 6px var(--sp-4);
    text-align: center;
  }
  .announce-bar__item {
    white-space: normal;
    line-height: 1.4;
  }
}

/* fixbatch:visit — benefit-card body text left-aligned (DESIGN.md: no centred body text; icon + title stay centred) */
.benefit-card__text { text-align: left; }

/* fixbatch:story — rec/accom card system (our-home Picks + Accommodation, classes existed only in markup) */
.rec-grid, .accom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 900px) { .rec-grid, .accom-grid { grid-template-columns: 1fr; } }
.rec-card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--r-md); padding: var(--sp-8); }
.rec-card__type { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-wine); margin-bottom: var(--sp-3); }
.rec-card__name { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.rec-card__address { font-size: var(--text-xs); color: var(--brand-wine); font-weight: 600; }

/* fixbatch:visit — living-green compact modifier (replaces inline min-height on sibling pages; homepage keeps the 500px default) */
.living-green--compact { min-height: 400px; }

/* fixbatch:story — walks box-out CTA overflow at 375px (long nowrap label wider than card content box) */
@media (max-width: 640px) {
  .walks-boxout__btn { flex-shrink: 1; max-width: 100%; white-space: normal; text-align: center; }
}

/* fixbatch:chrome — announce bar text clipped on mobile (wrap instead of nowrap; fixed-header offset tracks variable height via ResizeObserver in main.js) */
@media (max-width: 600px) {
  .announce-bar { height: auto; min-height: 40px; }
  .announce-bar__item {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 6px 16px;
  }
}

/* fixbatch:chrome — taproom second hero CTA clipped at right edge at 375px (scoped to .page-hero so the homepage 3fr/2fr pattern is untouched) */
@media (max-width: 480px) {
  .page-hero .hero__actions { grid-template-columns: 1fr; }
  .page-hero .hero__actions .btn { width: 100%; justify-content: center; }
}

/* fixbatch:events-journal — announce-bar item clips mid-word at 375px */
@media (max-width: 480px) {
  .announce-bar__item { font-size: 10px; letter-spacing: 0.02em; }
}

/* fixbatch:events-journal — journal bento backstop: fill holes for other article counts */
.journal-bento { grid-auto-flow: dense; }

/* fixbatch:contact — long-label buttons wrap instead of overflowing small viewports */
@media (max-width: 480px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* fixbatch:walks-trade-policy — living-green italic phrase gold on dark.
   The shared CTA band's h2 em had no colour rule and inherited cream, breaking
   the gold-italic-on-dark convention. One rule covers trade/tours/our-home/
   escape-room/journal. */
.living-green__content h2 em { color: var(--brand-gold); }

/* fixbatch:walks-trade-policy — announce bar clipping at 375px.
   Items are nowrap inside an overflow-hidden 40px bar; the longest item is cut
   at both ends on small screens. Allow wrap and let the bar grow (the header
   offset in main.js reads the bar's offsetHeight, so it follows). */
@media (max-width: 480px) {
  .announce-bar { height: auto; min-height: 40px; padding: 6px var(--sp-4); }
  .announce-bar__item { white-space: normal; text-align: center; line-height: 1.35; }
}

/* fixbatch:walks-trade-policy — card 07 mobile image sliver.
   The 3-class 21/9 rule beats the 2-class 16/10 mobile override, leaving a
   ~160px sliver at 375px. Match the override's media block at full specificity. */
@media (max-width: 880px) {
  .walks-grid .walk-card--full .walk-card__photo { aspect-ratio: 16/10; }
}

/* fixbatch:walks-trade-policy — taproom float dismiss control */
.taproom-float__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--brand-stone);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.taproom-float__close:hover,
.taproom-float__close:focus-visible { color: var(--brand-cream); }

/* fixbatch:shop-pdp — pdp story grid mobile collapse (replaces inline 1fr 1fr grid on [slug].astro) */
.pdp-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: start;
}
.pdp-story-grid--single {
  grid-template-columns: 1fr;
  max-width: 65ch;
}
@media (max-width: 768px) {
  .pdp-story-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* fixbatch:shop-pdp — add-to-case button label clipping at 375px (wrap instead of nowrap overflow) */
@media (max-width: 480px) {
  .btn-add-case {
    white-space: normal;
    padding: var(--sp-3) var(--sp-2);
    letter-spacing: 0.04em;
  }
}

/* fixbatch:shop-pdp — status badge reads as a dead button; restyle as a quiet status chip
   (overrides the border/padding in the earlier .pdp-status-badge rule by cascade order) */
.pdp-status-badge {
  border: none;
  background: var(--tint-warm-beige, #E5DCCC);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-xs);
}

/* fixbatch:shop-pdp — announce bar mobile overflow guard (items wider than the
   viewport clipped mid-word at both ends; clip with ellipsis at one end instead) */
@media (max-width: 560px) {
  .announce-bar { justify-content: center; padding-inline: var(--sp-3); }
  .announce-bar__item { max-width: calc(100vw - 24px); }
}
@media (max-width: 480px) {
  .announce-bar__item { font-size: 0.6rem; letter-spacing: 0.03em; }
}