/* ==========================================================================
   FOFO COFFEE — landing page styles
   Mobile-first. Design tokens only; no hardcoded colours below :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette, sampled from the logo and printed menu */
  --maroon:        #4a0e12;
  --maroon-deep:   #33080b;
  --maroon-soft:   #6d2126;
  --cream:         #f4ece7;
  --cream-warm:    #ece0d8;
  --cream-deep:    #ddcabe;
  --espresso:      #170c09;
  --espresso-soft: #241511;
  --gold:          #c98a4b;
  --ink:           #2b0a0c;
  --white:         #ffffff;

  /* Semantic */
  --bg:            var(--cream);
  --surface:       var(--white);
  --text:          var(--ink);
  --text-muted:    #7b5c5c;
  --accent:        var(--maroon);
  --line:          rgba(74, 14, 18, .14);
  --line-strong:   rgba(74, 14, 18, .28);

  /* Type */
  --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Space */
  --gutter: 1.25rem;
  --radius:      14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(74, 14, 18, .07);
  --shadow-md: 0 8px 26px rgba(74, 14, 18, .12);
  --shadow-lg: 0 -6px 30px rgba(74, 14, 18, .16);

  --nav-h: 62px;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip`, not `hidden`, and on html rather than body.
     `overflow-x: hidden` on the body makes the body its own scroll container,
     which stops ScrollTrigger pinning working — the events-page video refused
     to expand on phones because of exactly this. `clip` suppresses sideways
     scrolling without creating a scroll container, so pinning survives. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* While the cart drawer is open, every blurred bar behind it is invisible —
   the scrim and the drawer cover them. iOS still re-samples a backdrop-filter
   every frame something moves above it, and four of them at once made
   scrolling inside the drawer stutter on a phone while desktop stayed at
   60fps. Switching them off while locked costs nothing visually.        */
body.is-locked .nav,
body.is-locked .cat-nav,
body.is-locked .cart-bar,
body.is-locked .dock__inner {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Held still while the cart drawer is open. position:fixed rather than
   overflow:hidden because iOS Safari ignores the latter; checkout.js sets the
   top offset and restores the scroll position on close. */
body.is-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -.01em;
}

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s var(--ease), background-color .2s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--maroon); color: var(--cream); }
.btn--primary:hover:not(:disabled) { background: var(--maroon-deep); }

.btn--cream { background: var(--cream); color: var(--maroon); }
.btn--cream:hover { background: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--maroon);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--ghost:hover { background: rgba(74, 14, 18, .06); }

.btn--wa { background: #25d366; color: #06331a; }
.btn--wa:hover:not(:disabled) { background: #1fb857; }

.btn--block { width: 100%; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.125rem; }

/* Directions button — icon sits inline with the label */
.btn--map { gap: .55rem; padding: .85rem 1.4rem; font-size: 1rem; }
.btn--map svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  background: rgba(244, 236, 231, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  margin-right: auto;
}
.nav__logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  object-fit: cover;
}
.nav__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .02em;
  color: var(--maroon);
  line-height: 1;
}
.nav__links { display: none; gap: 1.6rem; }
.nav__links a {
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--maroon);
  opacity: .78;
  transition: opacity .18s;
}
.nav__links a:hover, .nav__links a[aria-current='page'] { opacity: 1; }

.nav__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--maroon);
  color: var(--cream);
  border: 0;
  border-radius: var(--radius-pill);
  padding: .5rem 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}
.nav__cart[hidden] { display: none; }

@media (min-width: 720px) {
  :root { --gutter: 2rem; --nav-h: 72px; }
  .nav__links { display: flex; }
  .nav__logo { width: 44px; height: 44px; }
  .nav__word { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--espresso);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* the radial pass keeps the centred logo legible over the busy glassware */
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,
      rgba(23, 12, 9, .74) 0%,
      rgba(23, 12, 9, .40) 55%,
      rgba(23, 12, 9, 0) 100%),
    linear-gradient(to bottom,
      rgba(23, 12, 9, .80) 0%,
      rgba(23, 12, 9, .48) 38%,
      rgba(23, 12, 9, .66) 72%,
      rgba(23, 12, 9, .96) 100%);
}
.hero__inner {
  min-height: 84svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 6rem 5rem;
  text-align: center;
}

/* The logo is the headline — the wordmark is part of the artwork, so the
   alt text carries the h1 for screen readers and search. */
.hero__logo {
  width: min(84vw, 480px);
  margin: 0 auto 1.25rem;
}
.hero__logo img { width: 100%; height: auto; }
.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.hero__title {
  font-size: clamp(2.6rem, 12vw, 5.5rem);
  color: var(--cream);
  margin-bottom: .6rem;
}
.hero__title span { display: block; font-size: .52em; color: var(--cream-deep); letter-spacing: .04em; }
.hero__lede {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  line-height: 1.5;
  color: rgba(244, 236, 231, .86);
  max-width: 34ch;
  margin: 0 auto 2rem;
}
.hero__actions { display: flex; flex-direction: column; gap: .75rem; align-items: center; }
.hero__actions .btn { width: 100%; max-width: 320px; }

@media (min-width: 720px) {
  .hero__inner { min-height: 90svh; }
  .hero__actions { flex-direction: row; justify-content: center; }
  .hero__actions .btn { width: auto; }
}

/* --------------------------------------------------------------------------
   6. Sections
   -------------------------------------------------------------------------- */
.section { padding-block: 4rem; }
.section--tight { padding-block: 2.5rem; }
.section--cream { background: var(--cream); }
.section--warm  { background: var(--cream-warm); }
.section--dark  { background: var(--espresso); color: var(--cream); }

.section__eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--maroon-soft);
  margin: 0 0 .85rem;
}
.section--dark .section__eyebrow { color: var(--gold); }

.section__title {
  font-size: clamp(2rem, 8vw, 3.25rem);
  color: var(--maroon);
  margin-bottom: 1rem;
}
.section--dark .section__title { color: var(--cream); }

.section__body {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.72;
  color: var(--text);
  max-width: 60ch;
}
.section--dark .section__body { color: rgba(244, 236, 231, .82); }
.section__body p { margin: 0 0 1.15rem; }
.section__body p:last-child { margin-bottom: 0; }

@media (min-width: 720px) {
  .section { padding-block: 6rem; }
}

/* --------------------------------------------------------------------------
   7. Story
   -------------------------------------------------------------------------- */
.story { display: grid; gap: 2.5rem; align-items: center; }
.story__art {
  position: relative;          /* anchors the tap-to-play button */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--maroon);
}
/* height:auto is load-bearing — the width/height HTML attributes act as
   presentational hints, and without it the media renders at its attribute
   height and looks stretched. */
.story__art img,
.story__art video { width: 100%; height: auto; display: block; }

/* Video variants of .story__art. The aspect modifier decides the shape so the
   clip is never squashed to fit a box built for a still. */
.story__art--video { width: 100%; }
.story__art--video video { height: 100%; object-fit: cover; }

/* 9:16 reel — full column width, matching the cards beside it */
.story__art--portrait {
  aspect-ratio: 9 / 16;
  background: var(--espresso);
}

/* 1:1 logo animation sitting straight on the page — no card, no frame.
   The clip is maroon-on-white; multiply drops the white onto the cream.
   The cream background here is load-bearing: GSAP's reveal leaves a transform
   on this element, which makes it a stacking context, and mix-blend-mode only
   blends within that context. Without a background of its own the white would
   have nothing to blend against and would render as a visible square. */
.story__art--square {
  aspect-ratio: 1;
  background: var(--cream);
  box-shadow: none;
  border-radius: 0;
}
/* No mix-blend-mode here: the artwork already carries the cream ground.
   Blending a <video> renders inconsistently on mobile browsers. */
.story__art--square video,
.story__art--square img,
.story__art--square picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pillars {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
  grid-template-columns: 1fr;
}
.pillar {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.pillar h3 { font-size: 1.2rem; color: var(--maroon); margin-bottom: .4rem; }
.pillar p { margin: 0; font-size: .95rem; color: var(--text-muted); line-height: 1.6; }

@media (min-width: 720px) {
  .story { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .pillars { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   8. Featured drinks (home)
   -------------------------------------------------------------------------- */
.featured {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2.5rem;
}
.f-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.f-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.f-card__img { aspect-ratio: 1; background: var(--white); overflow: hidden; }
.f-card__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.f-card__body { padding: .9rem 1rem 1.15rem; }
.f-card__name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--maroon);
  line-height: 1.2;
}
.f-card__price {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: .2rem;
}

@media (min-width: 900px) { .featured { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   9. Menu page
   -------------------------------------------------------------------------- */
.menu-head {
  background: var(--maroon);
  color: var(--cream);
  padding-block: 2.75rem 3.25rem;
  text-align: center;
}
.menu-head h1 { font-size: clamp(2.4rem, 11vw, 4rem); color: var(--cream); }
.menu-head p {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: rgba(244, 236, 231, .8);
  margin: .5rem 0 0;
}

.cat-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: rgba(244, 236, 231, .93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.cat-nav__inner {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-block: .7rem;
  scrollbar-width: none;
}
.cat-nav__inner::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--maroon);
  border-radius: var(--radius-pill);
  padding: .45rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.cat-chip.is-active {
  background: var(--maroon);
  color: var(--cream);
  box-shadow: none;
}

.menu-list { padding-block: 2rem 1rem; }
.menu-cat { scroll-margin-top: calc(var(--nav-h) + 58px); }
.menu-cat + .menu-cat { margin-top: 2.75rem; }
.menu-cat__title {
  font-size: 1.9rem;
  color: var(--maroon);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--line);
}

/* --- item (accordion) --- */
.item {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .25s;
}
.item + .item { margin-top: .85rem; }
.item.is-open { box-shadow: var(--shadow-md); }
.item.is-unavailable { opacity: .55; }

.item__head {
  width: 100%;
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: .8rem;
  background: transparent;
  border: 0;
  text-align: left;
}
.item__thumb {
  width: 76px; height: 76px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}
.item__thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

/* These are <span>s inside a grid item, so they need blockifying explicitly —
   otherwise the description runs on straight after the name on one line. */
.item__info { display: block; min-width: 0; }

.item__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--maroon);
  line-height: 1.15;
}
.item__desc {
  display: block;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: .2rem;
}
.item__soldout,
.item__low {
  display: inline-block;
  margin-top: .3rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: .15rem .6rem;
}
.item__soldout { color: var(--maroon-soft); background: var(--cream-warm); }
/* running low — warm amber, distinct from "sold out" at a glance */
.item__low { color: #8a5a12; background: #fdf1d6; }

.item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.item__price {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--maroon);
  white-space: nowrap;
}
.item__chev {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--maroon-soft);
  transition: transform .3s var(--ease);
}
.item.is-open .item__chev { transform: rotate(180deg); }

/* --- customizer panel --- */
.item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ease);
}
.item.is-open .item__panel { grid-template-rows: 1fr; }
.item__panel > div { overflow: hidden; }
.item__panel-inner { padding: 0 .9rem 1rem; }
.item.is-open .item__panel-inner { border-top: 1px solid var(--line); padding-top: 1rem; }

.opt + .opt { margin-top: 1.1rem; }
.opt__label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .55rem;
}
.opt__choices { display: flex; flex-wrap: wrap; gap: .5rem; }

.choice {
  border: 0;
  background: var(--cream);
  box-shadow: inset 0 0 0 1.5px transparent;
  color: var(--maroon);
  border-radius: var(--radius-pill);
  /* keeps the chip on a 44px touch target — these get tapped a lot */
  padding: .66rem 1.1rem;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 500;
  transition: background-color .18s, color .18s, box-shadow .18s;
}
.choice:hover { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.choice.is-selected {
  background: var(--maroon);
  color: var(--cream);
  box-shadow: none;
  font-weight: 600;
}

/* add-ons as checkable rows */
.addon {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  border: 0;
  background: var(--cream);
  border-radius: 10px;
  padding: .7rem .85rem;
  text-align: left;
  transition: background-color .18s;
}
.addon + .addon { margin-top: .45rem; }
.addon.is-selected { background: var(--cream-deep); }
.addon__box {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  display: grid; place-items: center;
  color: transparent;
  transition: background-color .18s, color .18s;
}
.addon.is-selected .addon__box { background: var(--maroon); color: var(--cream); box-shadow: none; }
.addon__name { flex: 1; font-size: .95rem; color: var(--maroon); }
.addon__price { font-family: var(--font-serif); font-size: .95rem; color: var(--text-muted); }

/* qty + add row */
.item__foot {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.4rem;
}
.qty {
  display: flex;
  align-items: center;
  background: var(--cream);
  border-radius: var(--radius-pill);
  padding: .25rem;
  flex: 0 0 auto;
}
.qty__btn {
  width: 44px; height: 44px;
  border: 0;
  background: var(--surface);
  color: var(--maroon);
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform .15s;
}
.qty__btn:active { transform: scale(.9); }
.qty__btn:disabled { opacity: .35; }
.qty__val {
  min-width: 32px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--maroon);
}
/* nowrap + tighter padding so "Add · RM 10.00" stays on one line next to the
   44px quantity control on a 375px screen */
.item__foot .btn {
  flex: 1;
  white-space: nowrap;
  padding-inline: 1rem;
}

/* --------------------------------------------------------------------------
   10. Sticky cart bar
   -------------------------------------------------------------------------- */
.cart-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(244, 236, 231, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(120%);
  transition: transform .35s var(--ease);
}
.cart-bar.is-visible { transform: translateY(0); }
.cart-bar__inner {
  max-width: 1120px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.cart-bar__summary { flex: 1; min-width: 0; }
.cart-bar__count { font-size: .8rem; color: var(--text-muted); }
.cart-bar__total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--maroon);
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   11. Checkout drawer
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(23, 12, 9, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(101%);
  transition: transform .4s var(--ease);
}
.drawer.is-open { transform: translateY(0); }

.drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem var(--gutter) .9rem;
  border-bottom: 1px solid var(--line);
}
.drawer__title { font-size: 1.5rem; color: var(--maroon); flex: 1; }
.drawer__close {
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--cream-warm);
  color: var(--maroon);
  display: grid; place-items: center;
}
.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* -webkit-overflow-scrolling: touch is deliberately NOT set. It does nothing
     on iOS 13+, and combined with overscroll-behavior it makes the scroller
     freeze when it is resting exactly at the top or bottom — the first swipe
     back is swallowed and you have to nudge it the other way first. */
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 1.25rem var(--gutter);
}
.drawer__foot {
  flex: 0 0 auto;
  padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--cream-warm);
}

@media (min-width: 720px) {
  .drawer {
    left: auto; right: 0; top: 0; bottom: 0;
    width: 460px;
    max-height: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    transform: translateX(101%);
  }
  .drawer.is-open { transform: translateX(0); }
}

/* --- cart lines --- */
.line { display: flex; gap: .85rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.line:first-child { padding-top: 0; }
.line__qty {
  flex: 0 0 auto;
  min-width: 28px; height: 28px;
  padding-inline: .4rem;
  border-radius: 8px;
  background: var(--maroon);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  display: grid; place-items: center;
}
.line__main { flex: 1; min-width: 0; }
.line__name { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; color: var(--maroon); line-height: 1.2; }
.line__opts { font-size: .8rem; color: var(--text-muted); line-height: 1.5; margin-top: .2rem; }
.line__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.line__price { font-family: var(--font-serif); font-weight: 600; color: var(--maroon); white-space: nowrap; }
.line__remove {
  border: 0; background: transparent;
  color: var(--text-muted);
  font-size: .75rem;
  text-decoration: underline;
  padding: 0;
}
.line__remove:hover { color: var(--maroon); }

/* sold-out clash at send time */
.shortage {
  background: #fdecea;
  color: #9c2620;
  border: 1.5px solid #f0b4ad;
  border-radius: 10px;
  padding: .8rem .9rem;
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.cart-empty { text-align: center; padding: 3rem 0; color: var(--text-muted); }
.cart-empty p { font-family: var(--font-serif); font-size: 1.15rem; margin: 0 0 1.5rem; }

/* --- checkout form --- */
.field { margin-bottom: 1.1rem; }
.field__label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .45rem;
}
.field__label .req { color: var(--maroon); }
.field input[type='text'],
.field textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: .8rem .9rem;
  transition: border-color .18s;
}
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--maroon-soft); }
.field textarea { resize: vertical; min-height: 72px; }
.field__error { font-size: .8rem; color: #b3261e; margin-top: .35rem; display: none; }
.field.has-error input { border-color: #b3261e; }
.field.has-error .field__error { display: block; }

/* --- pickup location picker --- */
.loc {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  border: 0;
  background: var(--surface);
  border-radius: 10px;
  padding: .8rem .9rem;
  text-align: left;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: background-color .18s, box-shadow .18s;
}
.loc + .loc { margin-top: .5rem; }
.loc:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.loc.is-selected { background: var(--maroon); box-shadow: none; }
.loc.is-closed { opacity: .5; cursor: not-allowed; }

.loc__main { flex: 1; min-width: 0; }
.loc__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--maroon);
  line-height: 1.2;
}
.loc__addr {
  display: block;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: .1rem;
}
.loc__status {
  flex: 0 0 auto;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1c6b33;
  white-space: nowrap;
}
.loc__status--closed { color: var(--maroon-soft); }
.loc.is-selected .loc__name { color: var(--cream); }
.loc.is-selected .loc__addr { color: rgba(244, 236, 231, .72); }
.loc.is-selected .loc__status { color: var(--cream-deep); }

/* --- issued order number --- */
.order-no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--maroon);
  background: var(--cream-warm);
  border-radius: 10px;
  padding: .7rem 1rem;
  margin: 0 0 1.25rem;
  display: inline-block;
}

.daytabs { display: flex; gap: .5rem; margin-bottom: .75rem; }
.daytab {
  flex: 1;
  border: 0;
  background: var(--surface);
  color: var(--maroon);
  border-radius: 10px;
  padding: .6rem .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.2;
  transition: background-color .18s, color .18s;
}
.daytab small { display: block; font-family: var(--font-ui); font-weight: 400; font-size: .72rem; opacity: .65; }
.daytab.is-active { background: var(--maroon); color: var(--cream); }
.daytab:disabled { opacity: .4; cursor: not-allowed; }

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: .45rem;
  max-height: 168px;
  overflow-y: auto;
  padding: .15rem;
}
.slot {
  border: 0;
  background: var(--surface);
  color: var(--maroon);
  border-radius: 8px;
  padding: .55rem .3rem;
  min-height: 44px;
  font-size: .88rem;
  font-weight: 500;
  transition: background-color .18s, color .18s;
}
.slot.is-selected { background: var(--maroon); color: var(--cream); font-weight: 600; }
.slots__empty { font-size: .9rem; color: var(--text-muted); font-family: var(--font-serif); font-size: 1rem; }

.totals { margin-top: .5rem; }
.totals__row { display: flex; justify-content: space-between; align-items: baseline; padding: .3rem 0; font-size: .95rem; color: var(--text-muted); }
.totals__row--grand {
  border-top: 2px solid var(--line);
  margin-top: .5rem;
  padding-top: .7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--maroon);
}
.wa-note { font-size: .78rem; color: var(--text-muted); text-align: center; margin: .7rem 0 0; line-height: 1.5; }

/* --------------------------------------------------------------------------
   12. Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 6.5rem;
  z-index: 90;
  transform: translate(-50%, 1.5rem);
  background: var(--maroon);
  color: var(--cream);
  border-radius: var(--radius-pill);
  padding: .7rem 1.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease);
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   13. Visit page
   -------------------------------------------------------------------------- */
.visit-grid { display: grid; gap: 2rem; }
.info-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}
.info-card h3 { font-size: 1.15rem; color: var(--maroon); margin-bottom: .6rem; }
.info-card p { margin: 0; color: var(--text-muted); line-height: 1.7; }
/* :not(.btn) so a button inside a card keeps its own colours */
.info-card a:not(.btn) { color: var(--maroon); text-decoration: none; font-weight: 500; }
.info-card a:not(.btn):hover { text-decoration: underline; }
.info-card + .info-card { margin-top: 1rem; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: var(--radius-pill);
  padding: .35rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.status-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill--open   { background: #e3f2e6; color: #1c6b33; }
.status-pill--closed { background: var(--cream-warm); color: var(--maroon-soft); }

@media (min-width: 820px) { .visit-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* --------------------------------------------------------------------------
   13b. Private events page
   -------------------------------------------------------------------------- */
.events-hero { background: var(--cream); padding-block: 2rem 3.5rem; }
.events-hero__inner { display: grid; gap: 1rem; align-items: center; }

/* No card, no frame — the drawing sits straight on the page so the copy and
   the cart read as one scene. The artwork is maroon line art on white, and
   multiply drops that white onto the cream.
   The cream background here is load-bearing: GSAP's reveal leaves a transform
   on this element, making it a stacking context, and mix-blend-mode only
   blends within that context. Without a background of its own the white
   would have nothing to blend against and would show as a hard rectangle. */
.events-hero__art {
  background: var(--cream);
  border-radius: 0;
  box-shadow: none;
}
.events-hero__art img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

@media (min-width: 880px) {
  .events-hero { padding-block: 3.5rem 5rem; }
  /* the art column runs wider and pulls left so the copy sits beside the
     stall rather than in a separate panel */
  .events-hero__inner {
    grid-template-columns: 0.92fr 1.25fr;
    gap: 0;
    align-items: center;
  }
  .events-hero__copy { position: relative; z-index: 1; }
  .events-hero__art { margin-left: -4%; margin-right: -3%; }
}

/* showcase: portrait clip beside copy */
.showcase { display: grid; gap: 2.5rem; align-items: center; }
.showcase__video { max-width: 340px; margin-inline: auto; }
@media (min-width: 880px) {
  .showcase { grid-template-columns: 340px 1fr; gap: 4rem; }
  .showcase__video { margin-inline: 0; }
}

/* --- enquiry form --- */
.ev-form .field { margin-bottom: 1.35rem; }
.ev-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 620px) { .ev-row { grid-template-columns: 1fr 1fr; } }

.ev-form input[type='text'],
.ev-form input[type='tel'],
.ev-form input[type='number'],
.ev-form input[type='date'],
.ev-form input[type='time'],
.ev-form select,
.ev-form textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: .85rem .9rem;
  min-height: 48px;
  transition: border-color .18s;
  -webkit-appearance: none;
  appearance: none;
}
.ev-form select {
  /* keep the native chevron visible after appearance:none */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236d2126' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}
.ev-form textarea { resize: vertical; min-height: 96px; }
.ev-form input:focus, .ev-form select:focus, .ev-form textarea:focus {
  outline: 0; border-color: var(--maroon-soft);
}
.ev-form .field.has-error input,
.ev-form .field.has-error select,
.ev-form .field.has-error textarea { border-color: #b3261e; }

/* drink picker */
.ev-drinks { display: flex; flex-wrap: wrap; gap: .5rem; }
.ev-drink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: .6rem 1rem .6rem .8rem;
  min-height: 44px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: background-color .18s, box-shadow .18s;
}
.ev-drink:hover { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.ev-drink input { width: 18px; height: 18px; accent-color: var(--maroon); margin: 0; }
.ev-drink__name { font-size: .92rem; color: var(--maroon); }
.ev-drink:has(input:checked) { background: var(--cream-deep); box-shadow: none; }
[data-drinks-field].has-error .ev-drinks { outline: 1.5px solid #b3261e; outline-offset: 4px; border-radius: 10px; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--maroon); color: var(--cream); padding-block: 3rem 2.5rem; }
.footer__grid { display: grid; gap: 2rem; }
.footer__logo { width: 56px; height: 56px; border-radius: 12px; margin-bottom: .9rem; }
.footer h4 {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-deep);
  margin: 0 0 .7rem;
}
.footer p, .footer a { font-size: .92rem; color: rgba(244, 236, 231, .82); line-height: 1.7; margin: 0; text-decoration: none; }
.footer a:hover { color: var(--cream); text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 236, 231, .16);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .8rem;
  color: rgba(244, 236, 231, .6);
}

@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }

/* --------------------------------------------------------------------------
   15. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Bundle prices
   A bundle chip is a quantity shortcut wearing the same pill as the other
   choices, with the saving underneath so the offer reads at a glance.
   -------------------------------------------------------------------------- */
.choice.bundle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .05rem;
  line-height: 1.25;
}
.choice.bundle small {
  font-size: .68rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .01em;
}
.choice.bundle.is-selected small { color: inherit; opacity: .85; }

/* the hint on the collapsed row, under the single price */
.item__bundle {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Payment QR
   Sized so it scans from a phone held at arm's length without dominating the
   drawer. Capped in px rather than %, because a QR that fills a large screen
   is no easier to scan than one at 240px, just louder.
   -------------------------------------------------------------------------- */
.payqr {
  margin: 1.5rem 0 .25rem;
  padding: 1rem;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.payqr__label {
  margin: 0 0 .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.payqr__img {
  width: min(240px, 62vw);
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
  border-radius: 10px;
  /* a white quiet zone matters: QR readers need the margin around the code */
  background: var(--white);
}
.payqr__note {
  margin: .65rem 0 0;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.payqr--sent { margin-top: 1.5rem; }