/* ==========================================================================
   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) ---------- */
/* Shop picker must sit above the persistent order bar (110). */
.sheet { position: fixed; inset: 0; z-index: 115; 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
   copy and product collage have separate columns. Text stays on the solid cream
   background; phone layout retains its compact stacked composition. */
.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);
}

/* Tablet keeps a clear vertical composition; desktop gives copy and products
   their own columns. No translucent surface obscures the photography. */
@media (min-width: 43rem) and (max-width: 979px) {
  .hero h1 { font-size: clamp(2.6rem, 5.5vw, 3.5rem); }
  .hero__stack .cluster { width: min(100%, 36rem); height: 29rem; }
}
@media (min-width: 980px) {
  .hero { padding-block: clamp(2.5rem, 4vw, 4rem) 2rem; }
  .hero::before, .hero::after { display: none; }
  .hero__stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  .hero__inner { width: 100%; text-align: left; margin: 0; }
  .hero h1 { font-size: clamp(3rem, 4.4vw, 4rem); line-height: 1.08; max-width: 14ch; margin-inline: 0; }
  .hero .lede { max-width: 36ch; margin-inline: 0; font-size: 1.125rem; }
  .hero .btn-row { justify-content: flex-start; }
  .hero__stack .cluster { width: 100%; height: clamp(24rem, 36vw, 32rem); }
  .hero .stamp { width: clamp(7rem, 10vw, 9rem); font-size: .58rem; }
  .hero .stamp strong { font-size: clamp(1rem, 1.4vw, 1.25rem); max-width: 6ch; margin-inline: auto; }
  .hero .scribble { margin-top: 1.5rem; }
}

/* ---------- grids / cards ---------- */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 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; }
}

/* September 2026 mobile review: preserve Juice Bar 101, put product first.
   Phone location selection remains available in navigation and the hero. */
.nav__shop { display: none; }
@media (max-width: 687px) {
  .site-header__inner > .store-pick, .geo-bar { display: none; }
  .nav__shop { display: inline-flex; margin-bottom: var(--sp-3); }
  .hero { padding-top: 1.25rem; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .hero__stack { gap: .25rem; }
  .cluster { height: clamp(17rem, 76vw, 23rem); }
  .hero .btn { padding-inline: 1.1em; }
  .hero .lede { font-size: 1rem; }
  .story__collage { min-height: 0; aspect-ratio: .94; }
  .nav.is-open { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }
}
/* Fluid controls prevent the old 300px form columns escaping narrow cards. */
form label, form input, form select, form textarea { min-width: 0; max-width: 100%; }
form textarea { resize: vertical; }
form input, form select, form textarea { color: var(--ink); }
[data-bb-form-status], .demo-form-note {
  padding: var(--sp-3); margin-top: var(--sp-4); border-radius: var(--radius);
  background: var(--green-050); color: var(--green-800);
  /* #0F4835 on #F1FAF6: 9.88:1 (WCAG luminance computation). */
}
.btn { max-width: 100%; white-space: normal; text-align: center; }
.store-pick, .menu-nav a, .menu-item__add, .bb-cart__qty-button { min-height: 44px; }
.bb-cart__foot { padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom)); }
@media (max-width: 520px) { .sheet__panel { padding: var(--sp-4); } }

/* Owner review: a compact, product-led phone hero. Location discovery lives in
   the hamburger; order-time location selection remains enforced by cart.js. */
@media (max-width: 687px) {
  .hero { padding-block: .85rem 1.6rem; }
  .hero__inner { display: contents; }
  .hero__stack { gap: .55rem; }
  .hero .eyebrow { order: 1; margin: 0; font-size: 1.4rem; }
  .hero h1 { order: 2; font-size: clamp(1.9rem, 8vw, 2.3rem); line-height: 1.08; max-width: 18ch; margin: 0 auto; }
  .hero__stack > .cluster { order: 3; width: min(100%, 24rem); height: clamp(16rem, 72vw, 19rem); margin-top: .1rem; }
  .hero .lede { order: 4; font-size: .95rem; line-height: 1.5; max-width: 34ch; margin: .2rem auto 0; }
  .hero .btn-row { order: 5; margin-top: .35rem; gap: 1rem; }
  .hero .btn--ghost { border-color: transparent; padding-inline: .3rem; text-decoration: underline; text-underline-offset: .25em; }
  .hero__note, .hero .stamp, .hero .scribble, .section--shops { display: none; }
}

/* Follow-up: keep the convenient header picker and put phone actions on photos. */
@media (max-width: 687px) {
  .site-header__inner > .store-pick { display: inline-flex; max-width: 44%; }
  .nav__shop { display: none; }
  .hero .btn-row {
    order: 4; position: relative; z-index: 6;
    width: fit-content; max-width: 100%; margin: -7rem auto 3.5rem; gap: .5rem;
  }
  .hero .btn { min-height: 48px; padding: .85em 1.05em; font-size: .95rem; border: 2px solid var(--cream-2); box-shadow: 0 .3rem 1rem rgba(10,51,39,.2); }
  .hero .btn--ghost { background: var(--cream-2); color: var(--green-800); text-decoration: none; }
  .hero .lede { order: 5; margin-top: .25rem; }
}
@media (min-width: 980px) {
  .hero > .wrap:last-child .scribble { width: calc((100% - clamp(2rem, 4vw, 4rem)) / 2.08); margin-inline: 0; }
  .hero .stamp {
    bottom: 16%; right: 0; transform: rotate(-12deg);
    background: transparent; border: .3rem double var(--plum-700);
    box-shadow: none; opacity: .9;
  }
  .hero .stamp::after { content: ""; position: absolute; inset: .35rem; border: 1px dashed currentColor; border-radius: 50%; opacity: .55; pointer-events: none; }
  .hero .stamp strong { letter-spacing: .015em; }
}
/* Location discovery is in the header / Locations page, not a repeated home section. */
.section--shops { display: none; }

/* Phone actions occupy the collage's open lower-right corner, leaving the
   main bowl unobscured. No screen-wide overlay or translucent surface. */
@media (max-width: 687px) {
  .hero__stack { grid-template-areas: "eyebrow" "title" "collage" "description"; }
  .hero .eyebrow { grid-area: eyebrow; }
  .hero h1 { grid-area: title; }
  .hero__stack > .cluster { grid-area: collage; height: clamp(19rem, 84vw, 22rem); }
  .hero .lede { grid-area: description; }
  .hero .btn-row {
    grid-area: collage; align-self: end; justify-self: end;
    flex-direction: column; align-items: stretch; justify-content: center;
    width: min(52%, 11rem); max-width: 100%; margin: 0 .25rem .25rem;
    padding: 0; top: auto; transform: none; background: none; gap: .15rem;
  }
  .hero .btn--primary { box-shadow: 0 .2rem .6rem rgba(10,51,39,.12); }
  .hero .btn--ghost {
    background: transparent; border-color: transparent; box-shadow: none;
    text-decoration: underline; text-underline-offset: .25em; min-height: 44px;
    padding-block: .55rem;
  }
}