/* ==========================================================================
   Boostin' Bowls — design system
   Built by MackTechs / Beacon Web Services. Demo build, Aug 2026.

   Brand colors are taken from the client's OWN existing identity:
     #156246  deep green  — from her logo + Square theme primaryColor
     #5F2354  açaí plum   — from her logo inner ring + Square secondaryColor
   Everything else is derived. Contrast ratios in comments are computed, not estimated.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* brand — green ramp */
  --green-900: #0A3327;
  --green-800: #0F4835;
  --green-700: #156246;   /* BRAND PRIMARY */
  --green-600: #1D7A58;
  --green-500: #2A946D;
  --green-400: #4FB58C;
  --green-300: #86D0B1;
  --green-200: #BCE6D3;
  --green-100: #E0F3EA;
  --green-050: #F1FAF6;

  /* brand — açaí plum ramp */
  --plum-900: #2E0F28;
  --plum-800: #431839;
  --plum-700: #5F2354;   /* BRAND SECONDARY */
  --plum-600: #7C3670;
  --plum-500: #9A4E8C;
  --plum-400: #B978AD;
  --plum-300: #D3A5CA;
  --plum-200: #E8CDE3;
  --plum-100: #F5E8F2;

  /* accent — passionfruit gold. Chosen because it is the ONLY warm accent tested that
     passes WCAG AA for normal text on BOTH brand anchors: 4.76:1 on green #156246 and
     7.36:1 on plum #5F2354. That is what lets the accent be used as text on the dark
     green bands, not just as a button fill.
     Gold-filled CTA uses --ink-on-gold (#0B3528) = 8.78:1. Never white on gold (1.54:1).
     Never gold as text on cream (1.46:1). */
  --gold-600: #F7B32B;   /* hover only */
  --gold-500: #FFC857;   /* ACCENT */
  --gold-400: #FFD87F;
  --gold-200: #FFE9B8;
  --gold-100: #FFF6E2;
  --ink-on-gold: #0B3528;

  /* earth tones — added at Jenna's request: "earthy, fresh, bright, warm...
     natural, earthy tones so the design feels cohesive but still vibrant".
     terracotta: white text 4.91:1 (AA). sand: ink 11.41, green 5.65, plum 8.73. */
  --clay-700: #8F4425;
  --clay-500: #B4552F;   /* terracotta — band colour, white text */
  --clay-200: #EFCDBB;
  --sand-2:   #F6E3D5;

  /* neutrals — the Juice Bar 101 set Jenna and Tim chose on 2026-09-03.
     Ratios recomputed against the new ground #F7F1E7, not carried over. */
  --cream:     #F7F1E7;   /* page ground */
  --cream-2:   #FFFDF8;   /* lifted panels — near-white, not a second yellow */
  --sand:      #EFE4D4;   /* borders on cream */
  --ink:       #20342C;   /* body text — 11.76:1 on ground */
  --ink-2:     #506159;   /* secondary text — 5.85:1 on ground */
  --ink-3:     #5E6E66;   /* tertiary / captions — 4.71:1 on ground */
  --white:     #FFFFFF;

  /* soft accent set from the chosen look */
  --peach:     #F2C9AD;
  --sun:       #F2D27D;
  --sage:      #DCE9D6;

  --ok:   #1D7A58;
  --warn: #B4690E;
  --err:  #B02A28;

  /* type */
  /* Fredoka (display) + DM Sans (body/UI) + Caveat (handwritten accents).
     Jenna and Tim chose this on 2026-09-03 from the Juice Bar 101 direction: they
     wanted something artsy and hand-written, and Fredoka's rounded weight echoes the
     brush lettering in the wordmark. Caveat carries the eyebrows and menu labels. */
  --font-display: "Fredoka", "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* scale — 1.25 major third, clamped for fluid sizing */
  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-2xl:  clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --t-3xl:  clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  --t-4xl:  clamp(2.6rem, 1.5rem + 5vw, 5.25rem);

  /* space */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;

  --radius:    16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28,43,36,.06), 0 2px 8px rgba(28,43,36,.05);
  --shadow-md: 0 4px 12px rgba(28,43,36,.08), 0 12px 32px rgba(28,43,36,.07);
  --shadow-lg: 0 12px 28px rgba(28,43,36,.10), 0 32px 64px rgba(28,43,36,.10);

  --maxw: 1180px;
  --header-h: 72px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  overflow-x: clip;   /* guard: a stray wide child must never scroll the whole page */
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { max-width: 100%; display: block; }
a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-600); }
button { font: inherit; }
h1,h2,h3,h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--green-800);
  margin: 0 0 var(--sp-4);
  font-variation-settings: "wdth" 100, "opsz" 24;
}
h1 { font-size: var(--t-4xl); letter-spacing: -0.045em; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.035em; }
h3 { font-size: var(--t-xl); }
p  { margin: 0 0 var(--sp-4); max-width: 68ch; }
:focus-visible {
  outline: 3px solid var(--cream-2);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--plum-900);
  border-radius: 4px;
}

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-8); }
.band { background: var(--cream-2); }
/* Açaí purple is the colour of the product. It was doing nothing. */
.band--acai { background: var(--plum-700); color: var(--plum-100); }
.band--acai h2, .band--acai h3 { color: #fff; }
.band--acai .eyebrow { color: var(--gold-500); }
.band--gold { background: var(--gold-500); color: var(--ink-on-gold); }
.band--gold h2, .band--gold h3, .band--gold .eyebrow { color: var(--ink-on-gold); }
/* Earthy bands. Gold is now reserved for buttons — bright, but reads energy-drink
   rather than earthy when it covers a whole section. */
.band--sand { background: var(--sand); }
.band--sand .eyebrow { color: var(--clay-700); }
.band--clay { background: var(--clay-500); color: #fff; }
.band--clay h2, .band--clay h3 { color: #fff; }
.band--clay .eyebrow { color: var(--gold-400); }
.band--gold .lede { color: var(--ink-on-gold); opacity: .85; }
.band--gold .card { border-color: rgba(11,53,40,.18); }
.band--gold .btn--green { background: var(--green-800); }
/* Brighter, warmer page ground — less "premium beige", more juice bar. */
.band--green { background: var(--green-800); color: var(--green-100); }
.band--green h2, .band--green h3 { color: var(--white); }
.band--plum { background: var(--plum-800); color: var(--plum-100); }
.band--plum h2, .band--plum h3 { color: var(--white); }

.eyebrow {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--green-700);
  margin: 0 0 var(--sp-2);
}
.band--green .eyebrow, .band--plum .eyebrow { color: var(--gold-400); }
.lede { font-size: var(--t-lg); color: var(--ink-2); max-width: 60ch; }
.band--green .lede, .band--plum .lede, .band--acai .lede, .band--clay .lede { color: inherit; opacity: .92; }

/* ---------- buttons ---------- */
.btn {
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .8em 1.5em;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-weight: 600; font-size: var(--t-base);
  text-decoration: none; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--green-700); border-color: var(--green-700); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--green-800); border-color: var(--green-800); color: var(--white); box-shadow: var(--shadow-md); }
.btn--green { background: var(--green-700); color: var(--white); }
.btn--green:hover { background: var(--green-600); color: var(--white); }
.btn--ghost { border-color: var(--green-700); color: var(--green-700); background: transparent; }
.btn--ghost:hover { background: var(--green-050); color: var(--green-800); }
.btn--on-dark { border-color: rgba(255,255,255,.5); color: var(--white); background: transparent; }
.btn--on-dark:hover { background: rgba(255,255,255,.12); color: var(--white); border-color: var(--white); }
.btn--sm { padding: .55em 1.1em; font-size: var(--t-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,248,234,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sand);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: 0 0 auto; }
.brand img { height: 44px; width: auto; }
.brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.nav { display: flex; gap: var(--sp-2); margin-left: auto; align-items: center; }
.nav a:not(.btn) {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--t-sm);
  padding: .5rem .7rem; border-radius: var(--radius-pill);
}
.nav a:not(.btn):hover { background: var(--green-050); color: var(--green-800); }
.nav a:not(.btn)[aria-current="page"] { color: var(--green-700); font-weight: 700; }

/* store switcher */
.store-pick {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--white); border: 1px solid var(--sand);
  border-radius: var(--radius-pill); padding: .3rem .35rem .3rem .8rem;
  font-size: var(--t-sm); box-shadow: var(--shadow-sm); cursor: pointer;
  color: var(--ink); font-weight: 600;
}
.store-pick:hover { border-color: var(--green-300); }
.store-pick__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.store-pick__dot[data-state="closed"] { background: var(--ink-3); }
.store-pick__dot[data-state="soon"]   { background: var(--gold-500); }
.store-pick__chev { width: 16px; height: 16px; opacity: .5; }

.menu-toggle { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; color: var(--green-800); }

@media (max-width: 979px) {
  /* The desktop nav needs about 965px for seven links plus the order button, so it
     appears at 980px, not 900 — between the two the row ran off the page.
     Only ONE margin-left:auto in this row. Two of them fight, and the loser
     (the hamburger) gets pushed past the viewport edge.
     The hamburger leads the row: right-aligned it read as an afterthought. */
  .menu-toggle { display: block; order: 1; margin-left: -.6rem; flex: 0 0 auto; }
  .brand { order: 2; flex: 0 0 auto; }
  .brand img { height: 36px; }
  .nav {
    order: 4; width: 100%; margin: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: var(--sp-4); border-top: 1px solid var(--sand); padding-top: var(--sp-3);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .7rem .5rem; border-radius: var(--radius); }
  .site-header__inner { flex-wrap: wrap; gap: var(--sp-3); }
  .store-pick { order: 3; margin-left: auto; min-width: 0; }
  .store-pick span[data-bb-storename] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- location suggestion bar ---------- */
.geo-bar {
  background: var(--green-800); color: var(--green-100);
  font-size: var(--t-sm);
}
.geo-bar[hidden] { display: none !important; }
/* CLS: the bar used to be hidden in HTML then revealed by JS, shoving <main> down
   (measured 0.181). An inline head script now decides before first paint. */
html.bb-geo-hide .geo-bar { display: none !important; }
.geo-bar__inner { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); padding-block: .7rem; flex-wrap: wrap; }
.geo-bar .btn { white-space: normal; }
.geo-bar p { margin: 0; max-width: none; }
.geo-bar strong { color: var(--white); }
.geo-bar .btn-row { margin-left: auto; min-width: 0; }
@media (max-width: 760px) {
  .geo-bar__inner { align-items: flex-start; }
  .geo-bar .btn-row { margin-left: 0; width: 100%; }
  .geo-bar__close { position: absolute; right: .6rem; top: .4rem; }
  .geo-bar { position: relative; }
}
.geo-bar__close {
  background: none; border: 0; color: var(--green-200); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: .2rem .4rem;
}
.geo-bar__close:hover { color: var(--white); }

/* ---------- store sheet (switcher dropdown) ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--sp-4); }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(10,51,39,.45); backdrop-filter: blur(3px); }
.sheet__panel {
  position: relative; background: var(--cream); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: min(100%, 560px); padding: var(--sp-6);
  max-height: 90vh; overflow: auto;
}
.sheet__panel h2 { font-size: var(--t-2xl); margin-bottom: var(--sp-2); }
.store-option {
  display: block; width: 100%; text-align: left; background: var(--white);
  border: 2px solid var(--sand); border-radius: var(--radius); padding: var(--sp-4);
  margin-bottom: var(--sp-3); cursor: pointer; text-decoration: none; color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.store-option:hover { border-color: var(--green-400); box-shadow: var(--shadow-sm); color: var(--ink); }
.store-option[aria-pressed="true"] { border-color: var(--green-700); background: var(--green-050); }
.store-option__top { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.store-option__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--green-800); }
.store-option__meta { font-size: var(--t-sm); color: var(--ink-2); margin: .15rem 0 0; }
.store-option__dist { margin-left: auto; font-size: var(--t-sm); color: var(--plum-600); font-weight: 600; }

/* ---------- badges / status ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .35em .8em; border-radius: var(--radius-pill);
}
.badge--open   { background: var(--green-100); color: var(--green-800); }
.badge--closed { background: var(--sand);      color: var(--ink-2); }
.badge--soon   { background: var(--gold-200); color: #6B4405; }
.badge--new    { background: var(--plum-700);  color: var(--white); }

/* ---------- location photo hero ----------
   The shop pages keep the photographed hero with the plum scrim. It used to share
   the .hero class with the homepage; when the homepage became a light panel the
   on-dark buttons went white-on-white, so it has its own name now. */
.hero-photo { position: relative; overflow: hidden; background: var(--green-900); }
.hero-photo__media { position: absolute; inset: 0; }
.hero-photo__media picture { display: block; width: 100%; height: 100%; }
.hero-photo__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(46,15,40,.78) 0%, rgba(46,15,40,.50) 40%,
              rgba(46,15,40,.30) 100%);
}
.hero-photo__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero-photo .eyebrow { color: var(--gold-500); }
.hero-photo h1 { color: var(--white); font-size: var(--t-3xl); max-width: 18ch; margin-bottom: var(--sp-4); }
.hero-photo .lede { color: rgba(255,255,255,.9); max-width: 46ch; }
.hero-photo .btn-row { margin-top: var(--sp-5); }

/* ---------- hero ---------- */
/* ---------- hero ----------
   Ported from the Juice Bar 101 direction Jenna and Tim chose on 2026-09-03.
   The hero is its own lighter panel with a curved bottom edge; on wide screens the
   headline sits over the photo collage. Contrast of every line is measured against
   the rendered backdrop pixels, not estimated — see scratchpad/afa/herocontrast.mjs. */
.hero {
  position: relative;
  padding: clamp(1.25rem, 4.5vw, 3.4rem) 0 clamp(2.4rem, 5vw, 3.6rem);
  border-bottom: 1px solid var(--peach);
  border-radius: 0 0 clamp(2.5rem, 7vw, 5rem) clamp(2.5rem, 7vw, 5rem);
  background: var(--cream-2);
  box-shadow: 0 1.6rem 3rem -1.2rem rgba(32,52,44,.22);
  text-align: center;
}
.hero::before, .hero::after { display: none; }
@media (min-width: 43rem) { .hero::before, .hero::after { display: block; } }
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 6.2rem; left: max(1.2rem, calc(50% - 36rem));
  width: clamp(3.6rem, 8vw, 6rem); aspect-ratio: 1;
  border: 1.4rem solid var(--sage); border-radius: 50%;
}
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 13rem; right: max(1rem, calc(50% - 37rem));
  width: clamp(3rem, 7vw, 5rem); aspect-ratio: 1;
  background: var(--peach); border-radius: 50%;
}
.hero__stack { display: grid; gap: 1rem; position: relative; z-index: 1; }
.hero__inner { position: relative; z-index: 3; width: min(100%, 45rem); margin-inline: auto; }
.hero .eyebrow { color: var(--green-700); }
.hero h1 { color: var(--plum-700); max-width: 19ch; margin: 0 auto var(--sp-4); }
.hero .lede {
  color: var(--ink-2); max-width: none;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); margin-inline: auto;
}
.hero .btn-row { margin-top: var(--sp-4); justify-content: center; }
.hero__note { margin-top: var(--sp-3); font-size: var(--t-sm); color: var(--ink-2); }
.hero__note a, .hero__note button { color: var(--green-700); }

/* the collage */
.cluster {
  position: relative; z-index: 1; isolation: isolate;
  width: min(100%, 56rem); height: clamp(21rem, 92vw, 31rem); margin: 0 auto;
}
.cluster::before {
  content: ""; position: absolute; z-index: -2; top: 4%; left: 2%; width: 96%; height: 88%;
  border-radius: 48% 52% 45% 55% / 54% 39% 61% 46%; transform: rotate(-3deg); opacity: .55;
  background: radial-gradient(closest-side, var(--sun) 0%, rgba(242,210,125,0) 100%);
}
.cluster::after {
  content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; width: 56%; height: 46%;
  border-radius: 50%; transform: rotate(10deg); opacity: .75;
  background: radial-gradient(closest-side, var(--sage) 0%, rgba(220,233,214,0) 100%);
}
.cluster__photo {
  position: absolute; margin: 0; overflow: hidden;
  border: .42rem solid var(--cream-2); background: var(--cream-2);
  box-shadow: 0 1.1rem 2.4rem rgba(32,52,44,.14);
}
.cluster__photo img { width: 100%; height: 100%; object-fit: cover; }
.cluster__photo--main {
  z-index: 2; top: 8%; left: 19%; width: 62%; aspect-ratio: 1.15 / 1;
  border-radius: 44% 56% 50% 50% / 55% 45% 55% 45%; transform: rotate(-2deg);
}
.cluster__photo--bowl {
  z-index: 3; top: 0; left: 0; width: 30%; aspect-ratio: 1;
  border-radius: 50%; transform: rotate(-8deg);
}
.cluster__photo--smoothie {
  z-index: 3; top: 4%; right: 0; width: 27%; aspect-ratio: 1;
  border-radius: 50% 50% 45% 55%; transform: rotate(7deg);
}
.cluster__photo--accent {
  z-index: 4; bottom: 2%; left: 3%; width: 31%; aspect-ratio: 1;
  border-radius: 46% 54% 50% 50%; transform: rotate(8deg);
}
.stamp {
  position: absolute; z-index: 5; right: 1%; bottom: 3%;
  display: grid; width: clamp(7rem, 19vw, 10rem); aspect-ratio: 1; place-items: center;
  padding: .65rem; border: .18rem solid var(--plum-700); border-radius: 50%;
  background: var(--cream); color: var(--plum-700);
  box-shadow: inset 0 0 0 .34rem var(--cream), inset 0 0 0 .46rem var(--plum-700), 0 .7rem 1.5rem rgba(32,52,44,.14);
  font-size: clamp(.57rem, 1.6vw, .72rem); font-weight: 700; letter-spacing: .13em;
  line-height: 1.35; text-align: center; text-transform: uppercase; transform: rotate(8deg);
}
.stamp strong {
  display: block; font-family: var(--font-display);
  font-size: clamp(1rem, 3vw, 1.45rem); letter-spacing: -.02em; line-height: 1;
}
.scribble {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  margin: 1rem 0 0; color: var(--green-700);
  font-family: var(--font-hand); font-size: 1.45rem; font-weight: 700; letter-spacing: .01em;
}
.scribble::before, .scribble::after {
  content: ""; width: min(16vw, 7rem); height: 1px; background: var(--green-700);
}

@media (min-width: 43rem) {
  /* Wide screens have room for the headline to sit over the collage. A full overlay
     measured 1.00:1 where the green eyebrow crossed the green smoothie, so the copy
     rides the top of a tall cell and the bowls fill the bottom, overlapping between. */
  .hero__stack { grid-template-areas: "stack"; gap: 0; min-height: clamp(34rem, 80vw, 44rem); }
  .hero__stack > * { grid-area: stack; }
  .hero__inner {
    align-self: start; justify-self: center;
    padding: clamp(1.1rem, 3vw, 1.9rem) clamp(1rem, 3vw, 1.8rem);
    background: radial-gradient(82% 76% at 50% 46%,
                rgba(255,253,248,.97) 0%, rgba(255,253,248,.93) 62%, rgba(255,253,248,0) 100%);
  }
  .hero__stack .cluster { align-self: end; height: clamp(26rem, 52vw, 34rem); }
}

/* ---------- grids / cards ---------- */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--sand);
  display: flex; flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease;
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--green-100); }
/* <picture> is inline by default, so a height:100% img inside it never resolves and
   leaves a strip of the placeholder background showing. */
.card__media picture { display: block; width: 100%; height: 100%; }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__body { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; }
.card__body h3 { margin-bottom: var(--sp-2); }
.card__body p { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: var(--sp-4); }
.card__body .btn-row { margin-top: auto; }

/* location cards */
.loc-card__addr { font-style: normal; color: var(--ink-2); font-size: var(--t-sm); margin-bottom: var(--sp-3); }
.loc-card__hours { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--sp-4); }

/* ---------- split feature ---------- */
.split { display: grid; gap: var(--sp-7); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.split__media picture { display: block; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split--flip .split__media { order: 2; }
@media (max-width: 760px) { .split--flip .split__media { order: 0; } }

/* ---------- menu ---------- */
.menu-nav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(255,248,234,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand); padding-block: .7rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.menu-nav ul { display: flex; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.menu-nav a {
  display: block; padding: .4rem .9rem; border-radius: var(--radius-pill);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
}
.menu-nav a:hover { background: var(--green-050); color: var(--green-800); border-color: var(--green-200); }

.menu-group { margin-bottom: var(--sp-8); scroll-margin-top: calc(var(--header-h) + 70px); }
.menu-group__head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.menu-group__head h2 { margin: 0; }
.menu-group__note { font-size: var(--t-sm); color: var(--ink-3); }

.menu-list { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
/* Menu cards, ported from the chosen design: a rounded pill-ish card with a round
   photo, alternating through paper / sage / peach so a long list keeps a rhythm. */
.menu-item {
  display: grid; grid-template-columns: 6.8rem minmax(0, 1fr);
  gap: var(--sp-4); align-items: center;
  padding: .8rem 1rem .8rem .8rem;
  background: var(--cream-2); border: 1px solid var(--peach); border-radius: 2rem;
  box-shadow: 0 .5rem 1.3rem rgba(32,52,44,.14);
}
.menu-item:nth-child(3n + 2) { background: var(--sage); }
.menu-item:nth-child(3n + 3) { background: var(--peach); }
.menu-item__thumb {
  width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  background: var(--cream);
  transition: transform 300ms ease;
}
.menu-item:hover .menu-item__thumb { transform: scale(1.04); }
.menu-item__main { min-width: 0; }
/* Items with no photograph use the whole card rather than the photo column. */
.menu-item--no-image { grid-template-columns: minmax(0, 1fr); padding-left: 1.4rem; }
@media (max-width: 380px) {
  .menu-item { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--sp-3); }
  .menu-item--no-image { grid-template-columns: minmax(0, 1fr); }
}
.menu-item__top { display: flex; gap: var(--sp-3); align-items: baseline; }
.menu-item__name { font-weight: 700; font-size: var(--t-base); color: var(--ink); margin: 0; font-family: var(--font-body); }
.menu-item__price { margin-left: auto; font-weight: 700; color: var(--plum-700); white-space: nowrap; }
.menu-item__desc { font-size: var(--t-sm); color: var(--ink-2); margin: .3rem 0 0; }
.menu-item:nth-child(3n + 2) .menu-item__desc,
.menu-item:nth-child(3n + 3) .menu-item__desc { color: var(--ink); }
.menu-item__tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.tag {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .2em .6em; border-radius: var(--radius-pill);
  background: var(--green-100); color: var(--green-800);
}
.tag--df { background: var(--plum-100); color: var(--plum-700); }
.tag--gf { background: var(--gold-100); color: #6B4405; }
.tag--only { background: var(--sand); color: var(--ink-2); }

/* ---------- hours table ---------- */
.hours { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.hours th, .hours td { text-align: left; padding: .5rem 0; border-bottom: 1px solid var(--sand); }
.hours th { font-weight: 500; color: var(--ink-2); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr[data-today] th, .hours tr[data-today] td { font-weight: 700; color: var(--green-800); }

/* ---------- info list ---------- */
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.info-list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--t-sm); }
.info-list svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--green-600); margin-top: 2px; }
.info-list strong { display: block; color: var(--ink); }
.info-list span { color: var(--ink-2); }

/* ---------- faq ---------- */
.faq details {
  background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3);
}
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--green-800); list-style: none;
  display: flex; align-items: center; gap: var(--sp-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--green-500); font-weight: 400;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: var(--sp-3) 0 0; color: var(--ink-2); font-size: var(--t-sm); }

/* ---------- gallery strip ---------- */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.strip picture { display: block; }
.strip img { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; width: 100%; }

/* ---------- footer ---------- */
.site-footer { background: var(--green-900); color: var(--green-200); padding-block: var(--sp-8) var(--sp-6); margin-top: var(--sp-9); }
.site-footer h3 { color: var(--white); font-size: var(--t-base); font-family: var(--font-body); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.site-footer a {
  color: var(--green-200); text-decoration: underline; text-decoration-color: rgba(255,255,255,.45);
  display: inline-flex; align-items: center; min-height: 24px; padding-block: .15rem;
}
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: var(--t-sm); }
.site-footer__logo img { height: 62px; width: auto; margin-bottom: var(--sp-4); }
.site-footer__bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--t-xs); color: var(--green-300);
}
.site-footer__bottom p { margin: 0; }
.social { display: flex; gap: var(--sp-3); }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); }
.social a:hover { background: var(--gold-500); color: var(--ink-on-gold); }
.social svg { width: 18px; height: 18px; }

/* ---------- demo ribbon (removed on client handoff) ---------- */
.demo-ribbon {
  background: var(--plum-800); color: var(--plum-100); font-size: var(--t-xs);
  text-align: center; padding: .55rem 1rem; letter-spacing: .02em;
}
.demo-ribbon strong { color: var(--gold-400); }
.demo-ribbon a { color: var(--white); }

/* ---------- utility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green-700); color: var(--white); padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* Location pages: the two columns are independent blocks, not a hero pairing,
   so they should share a top edge rather than float to a shared centre line. */
.split--top { align-items: start; }

/* ---------- demonstrated pickup cart ---------- */
body.bb-cart-open { overflow: hidden; }

.bb-cart {
  position: fixed; inset: 0; z-index: 120;
}
.bb-cart[hidden] { display: none; }
.bb-cart__scrim {
  position: absolute; inset: 0; background: var(--green-900); opacity: .72;
}
.bb-cart__panel {
  position: absolute; inset: 0 0 0 auto; width: min(100%, 500px);
  background: var(--cream); box-shadow: var(--shadow-lg); overflow: hidden;
}
.bb-cart__view { height: 100%; display: flex; flex-direction: column; }
.bb-cart__view[hidden] { display: none; }
.bb-cart__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5); border-bottom: 1px solid var(--sand); background: var(--cream);
}
.bb-cart__head .eyebrow { margin-bottom: var(--sp-1); }
.bb-cart__head h2 { font-size: var(--t-2xl); margin: 0; }
.bb-cart__close {
  display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px;
  border: 1px solid var(--sand); border-radius: var(--radius-pill); background: var(--white);
  color: var(--green-800); font-size: var(--t-2xl); line-height: 1; cursor: pointer;
}
.bb-cart__close:hover { background: var(--green-050); border-color: var(--green-300); }
.bb-cart__notice {
  margin: var(--sp-5) var(--sp-5) 0; padding: var(--sp-4);
  border: 2px solid var(--gold-500); border-radius: var(--radius); background: var(--gold-100);
}
.bb-cart__notice[hidden] { display: none; }
.bb-cart__notice h3 { font-size: var(--t-lg); margin-bottom: var(--sp-2); }
.bb-cart__notice p { color: var(--ink-2); font-size: var(--t-sm); }
.bb-cart__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-5); }
.bb-cart__empty { color: var(--ink-2); }
.bb-cart__empty[hidden] { display: none; }
.bb-cart__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.bb-cart__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--sand); border-radius: var(--radius); background: var(--white);
}
.bb-cart__item-details { min-width: 0; display: grid; }
.bb-cart__item-details strong { color: var(--green-800); }
.bb-cart__item-details span { color: var(--ink-2); font-size: var(--t-sm); }
.bb-cart__item-controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
.bb-cart__qty-button {
  min-width: 36px; min-height: 36px; padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--green-300); border-radius: var(--radius-pill); background: var(--green-050);
  color: var(--green-800); font-weight: 700; cursor: pointer;
}
.bb-cart__qty-button:hover { background: var(--green-100); }
.bb-cart__quantity { min-width: 1.5em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.bb-cart__remove { min-width: auto; border-color: var(--sand); background: var(--cream); font-size: var(--t-xs); }
.bb-cart__foot { padding: var(--sp-5); border-top: 1px solid var(--sand); background: var(--cream-2); }
.bb-cart__foot p { margin: var(--sp-2) 0 var(--sp-4); color: var(--ink-2); font-size: var(--t-xs); }
.bb-cart__foot .btn { width: 100%; }
.bb-cart__foot .btn:disabled { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }
.bb-cart__subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.bb-cart__subtotal strong { color: var(--plum-700); font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.bb-cart__checkout { padding-bottom: var(--sp-5); overflow-y: auto; }
.bb-cart__checkout > p, .bb-cart__checkout > .btn { margin-inline: var(--sp-5); }
.bb-cart__checkout > p { margin-top: var(--sp-5); color: var(--ink-2); }
.bb-cart__checkout > .btn { align-self: flex-start; }
.bb-cart :focus-visible, .menu-item__add:focus-visible { outline-color: var(--green-800); }
.bb-cart-count {
  display: inline-grid; place-items: center; min-width: 1.65em; min-height: 1.65em; padding-inline: .35em;
  border-radius: var(--radius-pill); background: var(--gold-500); color: var(--ink-on-gold);
  font-size: var(--t-xs); line-height: 1;
}
.menu-item__actions { margin-top: var(--sp-3); }
.menu-item__add { display: none; }
html.bb-js .menu-item__add { display: inline-flex; }
.menu-item__add { padding-block: .4em; }
.current-order-link { margin: var(--sp-3) 0 0; font-size: var(--t-xs); }

@media (max-width: 520px) {
  .bb-cart__head, .bb-cart__body, .bb-cart__foot { padding: var(--sp-4); }
  .bb-cart__notice { margin: var(--sp-4) var(--sp-4) 0; }
  .bb-cart__item { align-items: flex-start; flex-direction: column; }
  .bb-cart__item-controls { justify-content: flex-start; }
  .bb-cart__checkout > p, .bb-cart__checkout > .btn { margin-inline: var(--sp-4); }
}

/* theme switcher styles now live inside js/theme.js so the standalone
   preview pages can use the same bar. */

/* Inline links and buttons that sit inside a sentence were 16-23px tall. Vertical
   padding on an inline box grows the hit area without moving the surrounding text,
   so the copy is untouched and the target clears 24px.
   Measured on / , /menu/ and /contact/ at 1280 and 390. */
.linkish {
  background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--gold-500); text-decoration: underline;
}

.hero__note button,
.current-order-link a,
p a[href^="tel:"],
address a[href^="tel:"],
span a[href^="tel:"] {
  padding-block: .35rem;
}

/* ---------- standing order bar (phone) ----------
   Added 2026-09-03: on a phone the header cart control sits inside the collapsed nav
   and the page's own Order buttons can be 17,000px away, so adding an item left no
   visible route back to the order. cart.js creates this only while the cart has
   something in it, and removes it when the cart empties. */
#bb-order-bar {
  position: fixed; z-index: 110; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--cream-2) 92%, transparent);
  border-top: 1px solid var(--sand);
  box-shadow: 0 -.5rem 1.4rem rgba(32,52,44,.12);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  #bb-order-bar { background: var(--cream-2); }
}
#bb-order-bar .btn { width: min(100%, 26rem); }
/* reserve the space instead of covering the end of the page */
body.has-order-bar { padding-bottom: 5.5rem; }
@media (min-width: 980px) {
  #bb-order-bar { display: none; }
  body.has-order-bar { padding-bottom: 0; }
}

/* ---------- shop cards (ported from the chosen design) ----------
   Two shops, told apart by colour and a number rather than by reading the heading:
   Manayunk is green on sage, Lafayette Hill is plum on peach. Used on the homepage,
   /locations/ and /contact/ so the same pattern means the same thing everywhere. */
.location-picker {
  display: grid; gap: 1rem; max-width: 54rem;
  margin: clamp(2.2rem, 6vw, 4rem) auto 0;
}
.location-card {
  position: relative; display: grid; min-width: 0;
  padding: 1.6rem;
  border: 2px solid var(--green-700); border-radius: 2.25rem;
  background: var(--sage); color: var(--ink);
}
.location-card--alt { border-color: var(--plum-700); background: var(--peach); }
.location-card__number {
  display: grid; width: 2.8rem; aspect-ratio: 1; margin-bottom: 1.8rem;
  place-items: center; border-radius: 50%;
  background: var(--green-700); color: var(--white);
  font-family: var(--font-display); font-weight: 700;
}
.location-card--alt .location-card__number { background: var(--plum-700); }
.location-card h3 {
  margin: 0 0 .85rem; color: var(--green-700);
  font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1;
}
.location-card--alt h3 { color: var(--plum-700); }
.location-card address, .location-card p { margin: 0; font-style: normal; max-width: none; }
.location-card__meta { display: grid; gap: .2rem; margin-top: 1.2rem; font-size: .94rem; font-weight: 700; }
.location-card__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; align-items: center; }
.location-card__link { width: fit-content; color: var(--green-700); font-weight: 700; }
.location-card--alt .location-card__link { color: var(--plum-700); }
@media (min-width: 43rem) { .location-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- section rhythm ----------
   The reference gives each section its own fluid rhythm rather than one global pad. */
.section--favorites { padding-block: clamp(5.25rem, 11vw, 9.5rem) clamp(4.5rem, 10vw, 8.5rem); }
.section--shops     { padding-block: clamp(4.5rem, 10vw, 8rem); }
.section--story     { padding-block: clamp(5.5rem, 12vw, 10rem); }

/* ---------- story collage (ported from the chosen design) ----------
   Two overlapping photos instead of one rectangle beside the text. */
.story__layout { display: grid; align-items: center; gap: 3rem; max-width: 62rem; margin-inline: auto; }
.story__collage { position: relative; width: min(100%, 29rem); min-height: 31rem; margin-inline: auto; }
.story__portrait, .story__detail {
  position: absolute; overflow: hidden; margin: 0;
  border: .5rem solid var(--cream-2); box-shadow: 0 1rem 2.6rem rgba(32,52,44,.22);
}
.story__portrait { top: 0; left: 3%; width: 76%; aspect-ratio: .8; border-radius: 48% 48% 2rem 2rem; transform: rotate(-2deg); }
.story__detail   { right: 0; bottom: 0; width: 48%; aspect-ratio: 1; border-radius: 50%; transform: rotate(5deg); }
.story__portrait img, .story__detail img,
.story__portrait picture, .story__detail picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.story__copy { max-width: 31rem; margin-inline: auto; text-align: center; }
@media (min-width: 43rem) {
  .story__layout { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(3rem, 8vw, 6rem); }
  .story__copy { text-align: left; margin-inline: 0; }
}