/* ──────────────────────────────────────────────────────────────────
   BERRY FRESH CAFE — Site Styles
   Three theme directions for the homepage (toggle via body class):
     .theme-playful  → bright logo palette, chunky display type, fun
     .theme-fresh    → greens, cream, editorial farm-to-table (default)
     .theme-minimal  → clean white, big food photography, restrained
   ────────────────────────────────────────────────────────────────── */

/* ── Fonts: ADA-friendly Google Fonts ──────────────────────────────
   Anton — bold condensed display (replaces Wickedgrit energy)
   Bowlby One SC — super chunky alt for playful theme
   Public Sans — high-legibility body face (replaces Pragati Narrow)
   Caveat — handwritten accent for "fresh" pull-quotes
   ────────────────────────────────────────────────────────────────── */
/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bowlby One SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bowlby-one-sc-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bowlby One SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bowlby-one-sc-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/caveat-500-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/caveat-500-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/caveat-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/caveat-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/caveat-500-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/caveat-500-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/caveat-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/caveat-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/public-sans-400-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/public-sans-400-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/public-sans-400-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/public-sans-300-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/public-sans-300-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/public-sans-300-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/public-sans-300-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/public-sans-300-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/public-sans-300-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/public-sans-300-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── BERRY FRESH BRAND PALETTE ───────────────────────────────── */
  /* Lifted from the logo: yellow halo, sky-blue wordmark,
     raspberry red, leaf green (added for farm-to-table direction). */
  /* PRIMARY — Berry Blue. Carries the wordmark, headlines, links. */
  --bf-sky:           #48A1E0;   /* bright brand blue (large areas) */
  --bf-sky-deep:      #1C74B0;   /* AA-safe blue for text/buttons */
  --bf-sky-deeper:    #145A8A;   /* pressed */

  /* PRIMARY — Sunny Yellow. Backgrounds, warmth, energy. */
  --bf-yellow:        #F0B357;
  --bf-yellow-deep:   #D2913A;

  /* ACCENT — Berry Red. Highlights, prices, CTAs. */
  --bf-raspberry:     #D33344;
  --bf-raspberry-dp:  #A8262F;

  /* SUPPORTING — green is no longer primary; used sparingly for
     "open" status, one numeral in lists, and vegan tags. */
  --bf-leaf:          #3DA35D;
  --bf-leaf-deep:     #2C7A45;

  /* NEUTRALS */
  --bf-cream:         #FFFBF2;
  --bf-cream-2:       #F3EAD8;
  --bf-slate:         #3B444B;   /* chalkboard surfaces */
  --bf-charcoal:      #2B3033;   /* ink */
  --bf-ink:           #2B3033;
  --bf-warm-gray:     #6B665E;
  --bf-line:          #E7DFCC;
  --bf-paper:         #FBF4E6;
  --bf-white:         #FFFFFF;

  /* ── DEFAULT THEME: Fresh & Natural ──────────────────────────── */
  --bg:               var(--bf-paper);
  --bg-elevated:      var(--bf-white);
  --bg-inverse:       var(--bf-charcoal);
  --surface-warm:     var(--bf-cream);
  --fg1:              var(--bf-charcoal);
  --fg2:              var(--bf-warm-gray);
  --fg3:              #8C887F;
  --fg-on-inverse:    var(--bf-cream);
  /* Blue leads. The deep tone is the interactive one so white text on
     it clears WCAG AA; the bright tone is for large/decorative fills. */
  --accent:           var(--bf-sky-deep);
  --accent-bright:    var(--bf-sky);
  --accent-deep:      var(--bf-sky-deeper);
  --accent-fg:        var(--bf-white);
  --secondary:        var(--bf-raspberry);
  --secondary-deep:   var(--bf-raspberry-dp);
  --highlight:        var(--bf-yellow);
  --border:           var(--bf-line);
  --border-strong:    #CFC8B5;

  /* Type roles (theme can override) */
  --font-display:     'Anton', 'Arial Narrow', 'Impact', sans-serif;
  --font-body:        'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:      'Caveat', cursive;
  --display-tracking: 0.01em;
  --display-weight:   400;
  --display-line:     1.0;

  /* Scale */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  --shadow-sm: 0 1px 2px rgba(20,20,20,0.06), 0 1px 3px rgba(20,20,20,0.04);
  --shadow-md: 0 4px 12px rgba(20,20,20,0.08), 0 2px 4px rgba(20,20,20,0.04);
  --shadow-lg: 0 18px 40px rgba(20,20,20,0.12), 0 6px 12px rgba(20,20,20,0.06);
  --shadow-pop: 0 6px 0 var(--bf-charcoal); /* playful "hard" shadow */

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t-base: 220ms;

  --container: 1240px;
}

/* ── THEME: BRIGHT & PLAYFUL ─────────────────────────────────────── */
body.theme-playful {
  --bg:               var(--bf-yellow);
  --bg-elevated:      var(--bf-white);
  --surface-warm:     #FFE989;
  --fg1:              var(--bf-charcoal);
  --fg2:              #4A4438;
  --accent:           var(--bf-raspberry);
  --accent-deep:      var(--bf-raspberry-dp);
  --accent-fg:        var(--bf-white);
  --secondary:        var(--bf-sky-deep);
  --secondary-deep:   var(--bf-sky-deeper);
  --highlight:        var(--bf-sky);
  --border:           #2A2A2A;
  --border-strong:    #1A1A1A;
  --font-display:     'Bowlby One SC', 'Anton', 'Impact', sans-serif;
  --display-tracking: 0.005em;
}

/* ── THEME: MODERN MINIMAL ───────────────────────────────────────── */
body.theme-minimal {
  --bg:               var(--bf-white);
  --bg-elevated:      #FAFAFA;
  --surface-warm:     #F4F1EA;
  --fg1:              #111111;
  --fg2:              #555555;
  --fg3:              #888888;
  --accent:           var(--bf-charcoal);
  --accent-deep:      #000000;
  --accent-fg:        var(--bf-white);
  --secondary:        var(--bf-raspberry);
  --secondary-deep:   var(--bf-raspberry-dp);
  --highlight:        var(--bf-yellow);
  --border:           #E6E6E6;
  --border-strong:    #CCCCCC;
  --font-display:     'Anton', 'Arial Narrow', 'Impact', sans-serif;
  --display-tracking: 0.005em;
}

/* ── BASE ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
a.link {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-strong);
}
a.link:hover { text-decoration-color: var(--accent); color: var(--accent); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── TYPOGRAPHY ──────────────────────────────────────────────────── */
.display, h1.display, h2.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--display-line);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  margin: 0;
}
.display-xxl { font-size: clamp(56px, 9vw, 132px); }
.display-xl  { font-size: clamp(44px, 6.5vw, 96px); }
.display-lg  { font-size: clamp(36px, 5vw, 72px); }
.display-md  { font-size: clamp(28px, 3.6vw, 52px); }
.display-sm  { font-size: clamp(24px, 2.6vw, 36px); }

h1, h2, h3, h4, h5 { margin: 0; color: var(--fg1); }
h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.5vw, 72px); line-height: 1; text-transform: uppercase; letter-spacing: 0.005em; }
h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 56px); line-height: 1.02; text-transform: uppercase; letter-spacing: 0.005em; }
h3 { font-family: var(--font-body); font-size: clamp(20px, 1.6vw, 24px); font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; }
h4 { font-family: var(--font-body); font-size: 18px; font-weight: 700; line-height: 1.3; }

p { margin: 0; line-height: 1.6; }
.body-lg { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; color: var(--fg1); }
.body-sm { font-size: 14px; line-height: 1.5; color: var(--fg2); }
.lead    { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; color: var(--fg2); max-width: 60ch; }

/* The handwritten eyebrow is a brand constant — one treatment used
   above every section heading, site-wide. */
.eyebrow {
  display: block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--secondary);
  margin-bottom: 4px;
}
.eyebrow::before { content: none; }
.eyebrow.no-bar::before { display: none; }
/* On dark or coloured grounds the raspberry goes muddy — use yellow */
.footer .eyebrow,
.seasonal .eyebrow,
.club .eyebrow,
[style*="--bf-charcoal"] .eyebrow { color: var(--bf-yellow); }

.display .script, h1 .script, h2 .script { font-size: 1.12em; line-height: 0.92; }
.script {
  font-family: var(--font-script);
  font-weight: 700;
  font-style: normal;
  color: var(--secondary);
  text-transform: none;
  letter-spacing: 0;
}

.text-accent    { color: var(--accent); }
.text-secondary { color: var(--secondary); }
.text-yellow    { color: var(--bf-yellow-deep); }
.text-on-yellow { color: var(--bf-charcoal); }

/* Strawberry-bullet — small berry-shaped marker for lists */
.berry-bullet {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--bf-raspberry);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  vertical-align: middle;
  margin-right: var(--space-3);
}

/* ── LAYOUT ──────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.container-wide { max-width: 1480px; }
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.stack-xl > * + * { margin-top: var(--space-10); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-md-2 { grid-template-columns: repeat(2, 1fr); }
}

.flex { display: flex; }
.row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.col { display: flex; flex-direction: column; gap: var(--space-4); }

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-fg);
  --btn-bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 26px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 18px 34px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-secondary {
  --btn-bg: var(--secondary);
  --btn-bd: var(--secondary);
  --btn-fg: var(--bf-white);
}
.btn-secondary:hover { background: var(--secondary-deep); border-color: var(--secondary-deep); }
.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg1);
  --btn-bd: var(--fg1);
}
.btn-ghost:hover { background: var(--fg1); color: var(--bg); }
.btn-yellow {
  --btn-bg: var(--bf-yellow);
  --btn-fg: var(--bf-charcoal);
  --btn-bd: var(--bf-charcoal);
}
.btn-yellow:hover { background: var(--bf-yellow-deep); border-color: var(--bf-charcoal); }

/* Playful theme overrides: hard black outline + offset shadow */
body.theme-playful .btn {
  border-width: 3px;
  border-color: var(--bf-charcoal);
  color: var(--bf-charcoal);
  box-shadow: 4px 4px 0 var(--bf-charcoal);
}
body.theme-playful .btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--bf-charcoal);
}
body.theme-playful .btn-secondary { color: var(--bf-white); }
body.theme-playful .btn-ghost { background: var(--bf-white); }

/* ── CHIPS / TAGS ────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  background: var(--surface-warm);
  color: var(--fg1);
  border: 1px solid var(--border);
}
.chip.is-vegan { background: #E8F5D8; color: #2C7A45; border-color: #C7E29A; }
.chip.is-gf    { background: #FFE8B3; color: #8C6500; border-color: #F0D58A; }
.chip.is-spicy { background: #FFE0E0; color: #B62434; border-color: #F2B8B8; }
.chip.is-keto  { background: #E8E2F5; color: #4A2C7A; border-color: #C9B8E8; }
.chip.is-new   { background: var(--bf-raspberry); color: var(--bf-white); border-color: var(--bf-raspberry); }

/* ── CARDS ───────────────────────────────────────────────────────── */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); }

body.theme-playful .card {
  border: 3px solid var(--bf-charcoal);
  box-shadow: 6px 6px 0 var(--bf-charcoal);
}
body.theme-playful .card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--bf-charcoal); }

/* ── NAVIGATION ──────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* mega panels anchor to this */
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px clamp(16px, 3vw, 48px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.nav-logo .nav-badge { height: 46px; width: 46px; flex-shrink: 0; }

/* Official wordmark — inline SVG filled with currentColor */
.nav-wordmark, .footer-wordmark { display: block; }
.nav-wordmark svg, .footer-wordmark svg { display: block; width: 100%; height: auto; }
.nav-wordmark {
  width: clamp(132px, 13vw, 178px);
  color: var(--bf-sky);   /* bright brand blue — large enough to carry it */
  transition: color var(--t-fast) var(--ease-out);
}
.nav-logo:hover .nav-wordmark { color: var(--bf-sky-deep); }
body.theme-minimal .nav-wordmark { color: var(--fg1); }
body.theme-minimal .nav-logo:hover .nav-wordmark { color: var(--bf-raspberry); }

.footer-brand-text { min-width: 0; flex: 1; }
.footer-wordmark { width: 100%; max-width: 196px; color: var(--bf-yellow); }

/* Seven top-level items (Home, Menu, About, Locations, Catering, Private
   Events, Gift Cards) — the gap is tighter than the original five-item
   nav needed, and the desktop cutover moved 1080px → 1100px below, so the
   row never has to squeeze. Labels never wrap mid-word. */
.nav-links {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  flex: 1;
  margin: 0 0 0 var(--space-5);
}
.nav-links a,
.nav-links .nav-trigger { white-space: nowrap; }
.nav-links a {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--fg1);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.nav-links a:hover, .nav-links a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* margin-left:auto rather than relying on .nav-links{flex:1} to push this
   right: .nav-links is display:none below 1100px, so without this the CTA
   group sits flush against the logo and the burger gets shunted off the
   end of the row. That is exactly what happened when a second button was
   added here in Aug 2026. */
.nav-cta { display: flex; gap: var(--space-3); align-items: center; flex-shrink: 0; margin-left: auto; }
.nav-cta .btn { white-space: nowrap; }

@media (max-width: 1100px) {
  .nav-links { display: none; }

  /* Two full-width buttons plus the logo plus the burger do not fit a
     phone. Below the desktop cutover the header keeps only the primary
     CTA; "Join waitlist" is still one tap away in the panel, which lists
     both. */
  .nav-cta .btn-ghost { display: none; }
}

/* Small screens keep the Order online button — it is the header's one
   revenue action and the owner asked for it to stay at every width. The
   row is made to fit rather than dropping the button: tighter gaps, a
   smaller wordmark and a more compact button. The burger stays last in
   the row, so it remains hard right. */
@media (max-width: 560px) {
  .nav-inner { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .nav-logo { gap: 8px; min-width: 0; }
  .nav-logo .nav-badge { height: 38px; width: 38px; }
  .nav-wordmark { width: clamp(92px, 25vw, 132px); }
  .nav-cta .btn { padding-left: 13px; padding-right: 13px; font-size: 12px; letter-spacing: 0.03em; }
}

/* Below ~380px the wordmark is the one element that can go without
   costing a tap target — the badge still carries the brand and still
   links home. Everything interactive survives. */
@media (max-width: 380px) {
  .nav-wordmark { display: none; }
}

/* ── MOBILE NAV ──────────────────────────────────────────────────────
   .nav-links/.mega are display:none under 1100px with no replacement in
   the original design — this is that replacement. A hamburger toggle
   reveals a panel stacked under .nav (same positioning approach as
   .mega); Menu/About/Locations use native <details> for the expand/
   collapse instead of custom JS, same pattern the FAQ sections already
   use elsewhere on the site.                                        */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0; margin: 0;
  background: none; border: 0; border-radius: var(--radius-sm);
  cursor: pointer; flex-shrink: 0;
}
.nav-burger:hover { background: var(--surface-warm); }
.nav-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--fg1);
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-burger { display: flex; }
}
/* Defensive: keep the mobile panel inert on desktop even if something
   (a stuck aria-expanded state from a resize mid-open, etc.) tries to
   show it. */
@media (min-width: 1101px) {
  .mobile-nav { display: none !important; }
}

.mobile-nav {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 49;
  max-height: calc(100vh - var(--nav-height, 72px));
  overflow-y: auto;
  background:
    radial-gradient(700px 260px at 12% -10%, color-mix(in oklch, var(--accent) 9%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bf-cream) 0%, var(--bf-paper) 68%, var(--bf-cream-2) 100%);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.mobile-nav.is-open { opacity: 1; transform: none; }
/* Same brand stripe as the desktop mega panels — the logo's four colors */
.mobile-nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--bf-yellow) 0 25%, var(--bf-raspberry) 25% 50%,
    var(--bf-sky) 50% 75%, var(--bf-leaf) 75% 100%);
}

/* A light stagger on open — top-level rows settle in one after another
   rather than the whole panel appearing at once. */
.mobile-nav.is-open > * { animation: mobileNavRowIn 260ms both var(--ease-out); }
.mobile-nav.is-open > *:nth-child(1) { animation-delay: 0ms; }
.mobile-nav.is-open > *:nth-child(2) { animation-delay: 25ms; }
.mobile-nav.is-open > *:nth-child(3) { animation-delay: 50ms; }
.mobile-nav.is-open > *:nth-child(4) { animation-delay: 75ms; }
.mobile-nav.is-open > *:nth-child(5) { animation-delay: 100ms; }
.mobile-nav.is-open > *:nth-child(6) { animation-delay: 125ms; }
.mobile-nav.is-open > *:nth-child(7) { animation-delay: 150ms; }
@keyframes mobileNavRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav.is-open > * { transition: none; animation: none; }
}

.mobile-nav-link {
  display: block;
  padding: var(--space-4) clamp(16px, 4vw, 32px);
  font-weight: 700; font-size: 16px; color: var(--fg1);
  border-bottom: 1px solid var(--border);
}
.mobile-nav-link:hover { color: var(--accent); }
.mobile-nav-cta { color: var(--accent); }

.mobile-nav-group { border-bottom: 1px solid var(--border); }
.mobile-nav-group summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) clamp(16px, 4vw, 32px);
  font-family: var(--font-display);
  font-size: 19px; text-transform: uppercase; letter-spacing: 0.005em; color: var(--fg1);
  cursor: pointer; list-style: none;
}
.mobile-nav-group summary::-webkit-details-marker { display: none; }
.mobile-nav-group summary .nav-chev { transition: transform 180ms var(--ease-out); color: var(--accent); }
.mobile-nav-group[open] summary .nav-chev { transform: rotate(180deg); }
.mobile-nav-group-body {
  display: flex; flex-direction: column;
  padding: 0 clamp(16px, 4vw, 32px) var(--space-5);
  gap: var(--space-2);
}
.mobile-nav-group-body a:not(.mobile-nav-loc) {
  padding: var(--space-2) 0;
  font-size: 15px; color: var(--fg2);
}
.mobile-nav-group-body a:not(.mobile-nav-loc):hover { color: var(--accent); }
.mobile-nav-sub { display: block; font-size: 12.5px; color: var(--fg3); margin-top: 2px; }

/* Locations accordion — compact single-line rows (name + address + live
   status inline) rather than the desktop's full mega-loc cards, so the
   panel stays scannable in one screen without needing its own scroll. */
.mobile-nav-loc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: var(--space-2);
  padding: var(--space-2) 0 !important;
  border-bottom: 1px solid var(--border);
}
.mobile-nav-loc:last-of-type { border-bottom: 0; }
.mobile-nav-loc-name { font-weight: 700; font-size: 15px; color: var(--fg1); }
.mobile-nav-loc:hover .mobile-nav-loc-name { color: var(--accent); }
.mobile-nav-loc-addr { grid-column: 1 / -1; font-size: 12px; color: var(--fg3); }
.mobile-nav-loc-live {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #1E9E4A; white-space: nowrap;
}
.mobile-nav-loc-live .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.mobile-nav-loc-live i { display: none; } /* reopen note — no room on a compact row, the location page has it */
.mobile-nav-loc[data-open="0"] .mobile-nav-loc-live { color: var(--fg3); }

/* ── SPOTLIGHT STRIP ──────────────────────────────────────────────────
   Persistent (not tucked inside an accordion), so it's visible without
   opening anything. Rotates to a new real "What's Fresh" item each time
   the panel opens — see nav.js rotateSeasonalPromo(), same real seasonal
   data (inc/nav-data.php) the desktop Menu mega uses. */
.mobile-nav-spotlight {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--space-3);
  margin: var(--space-3) clamp(16px, 4vw, 32px) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bf-charcoal);
  color: var(--bf-cream);
  transition: transform var(--t-fast) var(--ease-out);
}
.mobile-nav-spotlight:hover { transform: translateY(-1px); }
.mobile-nav-spotlight-badge {
  grid-row: 1 / 3;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--bf-yellow);
  color: var(--bf-charcoal);
  font-family: var(--font-display);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.mobile-nav-spotlight-badge sup { font-size: 0.6em; vertical-align: top; margin-left: -0.08em; letter-spacing: 0; }
.mobile-nav-spotlight-name { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.005em; color: var(--bf-white); }
.mobile-nav-spotlight-price { grid-row: 2; grid-column: 2; font-size: 12px; color: var(--bf-yellow); font-weight: 700; }
.mobile-nav-spotlight-arrow { grid-row: 1 / 3; font-size: 16px; color: var(--bf-yellow); }

/* ── STICKY ORDER NOW ────────────────────────────────────────────── */
.sticky-order {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 16px 24px;
  background: var(--bf-raspberry);
  color: var(--bf-white);
  border: 3px solid var(--bf-charcoal);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--bf-charcoal);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.sticky-order:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--bf-charcoal);
}
.sticky-order .dot {
  width: 10px; height: 10px;
  background: var(--bf-yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,210,58,0.45);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,210,58,0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(255,210,58,0.0); }
}

/* ── HERO ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 128px);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-title { line-height: 0.92; }
.hero-title em { font-family: var(--font-script); font-style: normal; font-size: 0.85em; color: var(--secondary); display: inline-block; transform: translateY(-0.08em) rotate(-2deg); }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.hero-meta .label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg2); margin-bottom: 4px; }
.hero-meta .value { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; color: var(--fg1); letter-spacing: 0.01em; line-height: 1.1; }

/* Hero collage: stacked image plates with rotation */
.hero-collage {
  position: relative;
  aspect-ratio: 1 / 1.05;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
}
.plate {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-warm);
}
.plate-main {
  top: 0; left: 8%; width: 78%; height: 70%;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.plate-side {
  bottom: 4%; right: 0; width: 56%; height: 46%;
  transform: rotate(3deg);
  box-shadow: var(--shadow-md);
  z-index: 3;
}
.plate-tag {
  position: absolute;
  bottom: 8%; left: 0;
  z-index: 4;
  background: var(--bf-yellow);
  color: var(--bf-charcoal);
  padding: 14px 20px;
  border: 2px solid var(--bf-charcoal);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  transform: rotate(-6deg);
  box-shadow: 4px 4px 0 var(--bf-charcoal);
}

body.theme-playful .plate { border: 3px solid var(--bf-charcoal); }
body.theme-playful .plate-main, body.theme-playful .plate-side { box-shadow: 8px 8px 0 var(--bf-charcoal); }

body.theme-minimal .plate { border: 0; border-radius: var(--radius-md); }
body.theme-minimal .plate-main, body.theme-minimal .plate-side { box-shadow: var(--shadow-md); }
body.theme-minimal .plate-main { transform: rotate(0); top: 0; left: 0; width: 70%; height: 80%; }
body.theme-minimal .plate-side { transform: rotate(0); bottom: 0; right: 0; width: 50%; height: 42%; }
body.theme-minimal .plate-tag { display: none; }

/* Photo placeholder */
.photo {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--ph-1, #E8E2D3) 0%, var(--ph-2, #C9C2AE) 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(0,0,0,0.35);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-4);
}
.photo svg { opacity: 0.9; }
.photo.berry-bowl  { --ph-1: #FF8A99; --ph-2: #C03048; color: rgba(255,255,255,0.85); }
.photo.avocado     { --ph-1: #C7E29A; --ph-2: #6FA847; color: rgba(255,255,255,0.85); }
.photo.toast       { --ph-1: #F5D38A; --ph-2: #C49545; color: rgba(255,255,255,0.85); }
.photo.pancakes    { --ph-1: #F5C97A; --ph-2: #B07820; color: rgba(255,255,255,0.85); }
.photo.coffee      { --ph-1: #6B4A2E; --ph-2: #2A1A0E; color: rgba(255,255,255,0.85); }
.photo.salad       { --ph-1: #B8DC85; --ph-2: #4A8330; color: rgba(255,255,255,0.85); }
.photo.smoothie    { --ph-1: #C97FB8; --ph-2: #722A60; color: rgba(255,255,255,0.85); }
.photo.eggs        { --ph-1: #FFE89A; --ph-2: #F2B040; color: rgba(255,255,255,0.85); }
.photo.burger      { --ph-1: #D89060; --ph-2: #7A4220; color: rgba(255,255,255,0.85); }
.photo.acai        { --ph-1: #8E5BC9; --ph-2: #3E1A6F; color: rgba(255,255,255,0.85); }
.photo.bowl        { --ph-1: #E3B080; --ph-2: #8E5530; color: rgba(255,255,255,0.85); }
.photo.tacos       { --ph-1: #F2B26E; --ph-2: #A85220; color: rgba(255,255,255,0.85); }
.photo.cafe-interior { --ph-1: #D4B894; --ph-2: #6B4A2E; color: rgba(255,255,255,0.85); }
.photo.cafe-patio  { --ph-1: #A8C28A; --ph-2: #4A6B30; color: rgba(255,255,255,0.85); }
.photo.team        { --ph-1: #E3C49A; --ph-2: #8E6530; color: rgba(255,255,255,0.85); }
.photo.farm        { --ph-1: #C7D89A; --ph-2: #5A7A30; color: rgba(255,255,255,0.85); }
.photo.berries     { --ph-1: #E83A6A; --ph-2: #6A0A30; color: rgba(255,255,255,0.85); }
.photo.waffles     { --ph-1: #F0C070; --ph-2: #8A4A14; color: rgba(255,255,255,0.85); }
.photo.caesar      { --ph-1: #C6DE8E; --ph-2: #55772C; color: rgba(255,255,255,0.85); }
.photo.wrap        { --ph-1: #E0C48A; --ph-2: #7A5A26; color: rgba(255,255,255,0.85); }
.photo.lemonade    { --ph-1: #FF9BA8; --ph-2: #C4364C; color: rgba(255,255,255,0.85); }
.photo.catering    { --ph-1: #D2E9F8; --ph-2: #A9D2EF; color: rgba(24,54,78,0.6); }

/* ── MARQUEE STRIP ───────────────────────────────────────────────── */
.marquee {
  background: var(--bf-charcoal);
  color: var(--bf-cream);
  padding: 18px 0;
  overflow: hidden;
  border-top: 2px solid var(--bf-charcoal);
  border-bottom: 2px solid var(--bf-charcoal);
}
.marquee-track {
  display: flex;
  gap: var(--space-8);
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-items: center;
}
.marquee-track span { display: flex; align-items: center; gap: var(--space-8); }
.marquee-track .dot { width: 14px; height: 14px; background: var(--bf-yellow); border-radius: 50%; flex-shrink: 0; }
.marquee-track .dot.r { background: var(--bf-raspberry); }
.marquee-track .dot.b { background: var(--bf-sky); }
.marquee-track .dot.g { background: var(--bf-leaf); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

body.theme-playful .marquee { background: var(--bf-sky-deep); color: var(--bf-white); }
body.theme-playful .marquee-track .dot { background: var(--bf-yellow); }

/* ── PILLAR CARDS ────────────────────────────────────────────────── */
.pillar {
  padding: var(--space-8);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}
.pillar-num {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0;
}
.pillar h3 { font-family: var(--font-display); font-size: 28px; text-transform: uppercase; letter-spacing: 0.005em; font-weight: 400; line-height: 1.05; }

body.theme-playful .pillar { border: 3px solid var(--bf-charcoal); box-shadow: 6px 6px 0 var(--bf-charcoal); }
body.theme-playful .pillar:nth-child(1) { background: var(--bf-yellow); }
body.theme-playful .pillar:nth-child(2) { background: var(--bf-sky-deep); color: var(--bf-white); }
body.theme-playful .pillar:nth-child(2) h3, body.theme-playful .pillar:nth-child(2) .pillar-num { color: var(--bf-white); }
body.theme-playful .pillar:nth-child(3) { background: var(--bf-raspberry); color: var(--bf-white); }
body.theme-playful .pillar:nth-child(3) h3, body.theme-playful .pillar:nth-child(3) .pillar-num { color: var(--bf-white); }

/* ── MENU ITEM ───────────────────────────────────────────────────── */
.menu-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.menu-item:last-child { border-bottom: 0; }
.menu-item .thumb {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.menu-item .name {
  font-family: var(--font-display);
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-bottom: 6px;
  line-height: 1.05;
}
.menu-item .desc { color: var(--fg2); font-size: 15px; line-height: 1.5; max-width: 56ch; }
.menu-item .price {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.005em;
  color: var(--accent);
  white-space: nowrap;
}
.menu-item .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--space-3); }
@media (max-width: 700px) {
  .menu-item { grid-template-columns: 80px 1fr; }
  .menu-item .thumb { width: 80px; height: 80px; }
  .menu-item .price { grid-column: 2; }
}

/* ── DIVIDER ─────────────────────────────────────────────────────── */
.divider-wavy {
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q 15 0 30 7 T 60 7 T 90 7 T 120 7' fill='none' stroke='%23E63A4A' stroke-width='2.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 120px 14px;
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.footer {
  background: var(--bf-charcoal);
  color: var(--bf-cream);
  padding: clamp(40px, 5vw, 64px) 0 var(--space-6);
}
.footer h4 { color: var(--bf-yellow); font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-4); }
.footer a { color: var(--bf-cream); display: block; padding: 4px 0; font-size: 15px; }
.footer a:hover { color: var(--bf-yellow); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid #3A3F42; }
/* Three items on one row while they fit, wrapping to their own lines
   rather than being crushed into three narrow columns. `.footer a` is a
   block-level 15px cream link for the nav columns above; the two links
   down here are inline body text and opt out of all three of those. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-6);
  font-size: 13px;
  color: #8a8580;
}
.footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4em; }
.footer .footer-legal-link { display: inline; padding: 0; font-size: 13px; color: #8a8580; text-decoration: underline; text-decoration-color: #4a4540; text-underline-offset: 3px; }
.footer .footer-legal-link:hover { color: var(--bf-yellow); text-decoration-color: var(--bf-yellow); }
/* Separator belongs to the link, so it can never strand itself at the
   start of a wrapped line the way a loose &middot; between them does. */
.footer .footer-legal-link::before { content: "\00b7"; margin-right: 0.4em; color: #5a5550; text-decoration: none; }

@media (max-width: 1080px) {
  .footer-bottom { justify-content: flex-start; }
  .footer-hours-line, .footer-credit { text-align: left; }
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .footer .footer-legal-link::before { content: none; }
}

/* ── BEVERAGE MENU ───────────────────────────────────────────────
   /beverage-menu reuses .lp-picks for the rows themselves; these are
   only the bits it needs on top — the jump list, the two-column split
   inside Specialty Coffees, and the per-section footnotes. */
.bev-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.bev-jump a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg2);
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.bev-jump a:hover, .bev-jump a:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--bg2); }
.bev-jump a span { font-weight: 500; color: var(--fg3, var(--fg2)); opacity: .75; }

/* Sections after the first sit tighter: fifteen full .section paddings
   in a row reads as fifteen pages rather than one menu. */
.bev-section { padding-top: var(--space-10); padding-bottom: 0; }
.bev-section:last-of-type { padding-bottom: var(--space-10); }
/* scroll-margin so the jump links don't land under the sticky header */
.bev-section { scroll-margin-top: 96px; }

.bev-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8) var(--space-10);
  margin-top: var(--space-6);
}
.bev-group .sem-sub-head { margin-bottom: var(--space-3); }
/* Coffee rows are a name and a price, nothing else. .lp-picks' default
   row padding is sized for a dish with a description under it and reads
   as dead air on four stacked one-line rows. */
.bev-group .lp-picks li { padding: var(--space-3) 0; }

.bev-footnotes {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.bev-footnotes li {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--secondary);
  letter-spacing: 0.01em;
}

@media (max-width: 700px) {
  .bev-groups { grid-template-columns: 1fr; gap: var(--space-7); }
  .bev-section { padding-top: var(--space-8); }
}

/* ── UTILITIES ───────────────────────────────────────────────────── */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-prose { max-width: 64ch; }
.divider-line { height: 1px; background: var(--border); margin: var(--space-12) 0; }

.tag-strip {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Tilt for visual rhythm */
.tilt-l { transform: rotate(-1.2deg); }
.tilt-r { transform: rotate(1.2deg); }

/* Theme banner (top of homepage in tweaks mode) */
.theme-banner {
  background: var(--bf-charcoal);
  color: var(--bf-cream);
  padding: 8px 16px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.theme-banner b { color: var(--bf-yellow); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .marquee-track { animation: none; }
}


/* ══════════════════════════════════════════════════════════════════
   2026 ENHANCEMENT LAYER
   Scroll-driven reveals, live status, spotlight cards, snap carousel,
   bento pillars, and the <instagram-feed> component.
   ══════════════════════════════════════════════════════════════════ */

@property --spot-a { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* ── SCROLL-DRIVEN REVEALS ──────────────────────────────────────── */
@keyframes bf-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes bf-rise-native { from { transform: translateY(26px); } to { transform: none; } }
@keyframes bf-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

[data-reveal] { opacity: 0; }
[data-reveal].is-in { opacity: 1; animation: bf-rise 0.7s var(--ease-out) both; }
/* Native scroll-driven: transform only — opacity stays 1 so a tall
   element can never get stuck hidden outside the animation range. */
@supports (animation-timeline: view()) {
  [data-reveal] { opacity: 1 !important; animation: bf-rise-native linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
}
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; animation: none !important; } }

/* Editorial image wipe — pure CSS scroll-driven where supported */
.wipe-in { clip-path: inset(0 0 0 0); }
@supports (animation-timeline: view()) {
  .wipe-in { animation: bf-wipe linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
}

/* ── LIVE STATUS PILL ───────────────────────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  font-size: 14px; font-weight: 600; line-height: 1.2;
  width: fit-content;
}
.status-pill .beacon { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--fg3); flex-shrink: 0; }
.status-pill .beacon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; }
.status-pill[data-state="open"]   .beacon { background: #22B24C; }
.status-pill[data-state="soon"]   .beacon { background: var(--bf-yellow-deep); }
.status-pill[data-state="closed"] .beacon { background: #9A9590; }
.status-pill[data-state="open"] .beacon::after,
.status-pill[data-state="soon"] .beacon::after { animation: beacon 2s var(--ease-out) infinite; }
@keyframes beacon { 0% { transform: scale(1); opacity: 0.7; } 70%,100% { transform: scale(3.2); opacity: 0; } }
.status-pill [data-status-label] { color: var(--fg1); }
.status-pill .sep { width: 1px; height: 14px; background: var(--border-strong); }
.status-pill [data-status-detail] { color: var(--fg2); font-weight: 500; }
body.theme-playful .status-pill { border: 2px solid var(--bf-charcoal); box-shadow: 3px 3px 0 var(--bf-charcoal); }

/* ── HERO COLLAGE TILT ──────────────────────────────────────────── */
.hero-collage[data-tilt] {
  --tilt-x: 0deg; --tilt-y: 0deg;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.hero-collage[data-tilt] .plate,
.hero-collage[data-tilt] .plate-tag {
  transition: transform 400ms var(--ease-out);
}
.hero-collage[data-tilt] .plate-main { transform: rotate(-2deg) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0); }
.hero-collage[data-tilt] .plate-side { transform: rotate(3deg) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(30px); }
.hero-collage[data-tilt] .plate-tag  { transform: rotate(-6deg) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(55px); }
body.theme-minimal .hero-collage[data-tilt] .plate-main { transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
body.theme-minimal .hero-collage[data-tilt] .plate-side { transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(30px); }

/* ── SPOTLIGHT SURFACE ──────────────────────────────────────────── */
[data-spotlight] { position: relative; isolation: isolate; overflow: hidden; }
[data-spotlight]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in oklch, var(--accent) 24%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--t-base) var(--ease-out);
}
[data-spotlight]:hover::before { opacity: 1; }
[data-spotlight] > * { position: relative; z-index: 1; }
@media (hover: none) { [data-spotlight]::before { display: none; } }

/* ── BENTO PILLARS ──────────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.bento > .pillar-lead { grid-column: span 2; }
.bento > .bento-status { grid-column: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento > .pillar-lead, .bento > .bento-status { grid-column: span 1; }
}
.pillar-lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); align-items: center; }
.pillar-lead .pillar-lead-photo { aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; }
@media (max-width: 620px) { .pillar-lead { grid-template-columns: 1fr; } }

/* The bento status tile — live hours + order CTA */
.bento-status {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  background: var(--bf-charcoal); color: var(--bf-cream);
  border-color: var(--bf-charcoal);
}
.bento-status .bs-hours { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); color: var(--bf-white); text-transform: uppercase; line-height: 1; letter-spacing: 0.005em; }
.bento-status .bs-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-yellow); margin-bottom: 8px; }
.bento-status .status-pill { background: #1F1F1F; border-color: #333; color: var(--bf-cream); }
.bento-status .status-pill [data-status-label] { color: var(--bf-white); }
.bento-status .status-pill [data-status-detail] { color: #a8a39c; }
.bento-status .status-pill .sep { background: #444; }
body.theme-playful .bento-status .status-pill { box-shadow: none; border-color: #333; }

/* ── SNAP CAROUSEL ──────────────────────────────────────────────── */
.snap-wrap { position: relative; }
.snap-rail {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding-bottom: var(--space-4);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.snap-rail::-webkit-scrollbar { display: none; }
.snap-rail > * {
  scroll-snap-align: start;
  flex: 0 0 clamp(280px, 31%, 400px);
}
@media (max-width: 720px) { .snap-rail > * { flex: 0 0 84%; } }

.snap-controls { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.snap-btn {
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 2px solid var(--fg1);
  background: transparent; color: var(--fg1);
  cursor: pointer; font-size: 17px; line-height: 1;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.snap-btn:hover:not(:disabled) { background: var(--fg1); color: var(--bg); }
.snap-btn:disabled { opacity: 0.28; cursor: default; }
body.theme-playful .snap-btn { border-width: 3px; box-shadow: 3px 3px 0 var(--bf-charcoal); background: var(--bf-white); }

.snap-dots { display: flex; gap: 8px; margin-left: auto; }
.snap-dot {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%; border: 0; cursor: pointer;
  background: var(--border-strong);
  transition: width var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.snap-dot[aria-current="true"] { width: 30px; border-radius: var(--radius-pill); background: var(--accent); }

/* Scroll-linked progress bar */
.snap-progress { height: 3px; background: var(--border); border-radius: 99px; overflow: hidden; flex: 1; max-width: 220px; }
.snap-progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0.3); }
@supports (animation-timeline: scroll()) {
  .snap-progress span { animation: bf-progress linear both; animation-timeline: scroll(nearest inline); }
  @keyframes bf-progress { from { transform: scaleX(0.08); } to { transform: scaleX(1); } }
}

/* ── DISH CARD (carousel item) ──────────────────────────────────── */
.dish { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.dish .dish-photo { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.dish .dish-photo .rank {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em;
  background: var(--bf-charcoal); color: var(--bf-yellow);
  padding: 5px 11px; border-radius: var(--radius-pill);
}
.dish .dish-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.dish h3 { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; font-weight: 400; line-height: 1.05; }
.dish p { color: var(--fg2); font-size: 15px; flex: 1; }
.dish .dish-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.dish .dish-price { font-family: var(--font-display); font-size: 26px; color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   LOCATION CARDS — LIVE DAY / NIGHT STOREFRONT STATES
   ──────────────────────────────────────────────────────────────────
   Each card cross-fades between a daytime and a nighttime image based
   on whether that cafe is currently open (7am–3pm ET), set by
   enhance.js as data-open="1" | "0".

   DROPPING IN REAL PHOTOS — two options:

   1) Two photos per location (best):
        <span class="loc-scene loc-scene-day"
              style="--img: url('assets/stuart-day.jpg')"></span>
        <span class="loc-scene loc-scene-night" data-night-photo
              style="--img: url('assets/stuart-night.jpg')"></span>

   2) One photo per location — the night state is graded in CSS
      (blue-shifted, darkened, warm window glow layered on top):
        <span class="loc-scene loc-scene-day"
              style="--img: url('assets/stuart.jpg')"></span>
        <span class="loc-scene loc-scene-night"
              style="--img: url('assets/stuart.jpg')"></span>
   ══════════════════════════════════════════════════════════════════ */

.loc-card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid #2A2A2A;
  border-radius: var(--radius-md);
  background: #141414;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.loc-card:hover { transform: translateY(-4px); border-color: #3D3D3D; }

/* ── Photo stage ─────────────────────────────────────────────────── */
.loc-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0B1730;
  isolation: isolate;
}
.loc-scene {
  position: absolute; inset: 0;
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
  transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out);
}

/* Gradient stand-ins until real storefront photos land.
   Day = bright Florida sky; night = deep blue hour. */
.loc-scene-day  { opacity: 1; }
.loc-scene-night { opacity: 0; }

.ph-stuart-day  { background-color: #7FC9E8; background-image: var(--img, linear-gradient(168deg, #8FD4F0 0%, #CFE9F5 42%, #F2D9A8 100%)); }
.ph-psl-day     { background-color: #86CFE0; background-image: var(--img, linear-gradient(168deg, #9BDCEC 0%, #D8EDE4 45%, #EFDCA8 100%)); }
.ph-jupiter-day { background-color: #7CCBDE; background-image: var(--img, linear-gradient(168deg, #8ED8EA 0%, #C9E8D8 40%, #F5DFA0 100%)); }
.ph-pbg-day     { background-color: #8FD0C8; background-image: var(--img, linear-gradient(168deg, #A2DCE0 0%, #D4EBCC 45%, #F0DDA2 100%)); }
.ph-wpb-day     { background-color: #7AC5E5; background-image: var(--img, linear-gradient(168deg, #8CD2F2 0%, #C6E4EE 40%, #F2D6A4 100%)); }

.ph-stuart-night  { background-color: #0B1730; background-image: var(--img, linear-gradient(168deg, #0A1428 0%, #14203C 55%, #241C34 100%)); }
.ph-psl-night     { background-color: #0A1628; background-image: var(--img, linear-gradient(168deg, #08121F 0%, #121E33 55%, #1F1B2E 100%)); }
.ph-jupiter-night { background-color: #0B1A2E; background-image: var(--img, linear-gradient(168deg, #091524 0%, #10203A 55%, #221D33 100%)); }
.ph-pbg-night     { background-color: #0A182A; background-image: var(--img, linear-gradient(168deg, #081320 0%, #101E34 55%, #1D1C30 100%)); }
.ph-wpb-night     { background-color: #0A1730; background-image: var(--img, linear-gradient(168deg, #071223 0%, #111F38 55%, #201C35 100%)); }

/* Warm interior window glow — only visible in the night state */
.loc-windows { position: absolute; inset: 0; pointer-events: none; }
.loc-windows::before {
  content: ''; position: absolute;
  left: 18%; right: 18%; bottom: 14%; height: 30%;
  border-radius: 4px;
  background: linear-gradient(to top, rgba(255,182,52,0.55), rgba(255,206,110,0.16));
  box-shadow: 0 0 40px 16px rgba(255,178,48,0.30), 0 0 110px 44px rgba(255,160,32,0.14);
  filter: blur(1.5px);
}
.loc-windows::after {
  content: ''; position: absolute;
  left: 50%; top: 14%;
  width: 15px; height: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #F2EFE0;
  box-shadow: 0 0 22px 7px rgba(240,238,220,0.5);
}

/* When a real night photo is supplied, drop the synthetic glow +
   grade and just show the photograph. */
.loc-scene-night[data-night-photo] .loc-windows { display: none; }

/* Single-photo mode: grade the day image into night */
.loc-scene-night:not([data-night-photo]) { filter: saturate(0.72) brightness(0.5) contrast(1.08) hue-rotate(202deg); }

/* ── State switch ────────────────────────────────────────────────── */
.loc-card[data-open="0"] .loc-scene-day   { opacity: 0; }
.loc-card[data-open="0"] .loc-scene-night { opacity: 1; }

.loc-photo-label {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  padding: var(--space-3);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; color: rgba(255,255,255,0.62);
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
  pointer-events: none;
}

/* Sun / moon state chip over the photo */
.loc-state-chip-unused {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 7px;
  border-radius: var(--radius-pill);
  background: rgba(12,12,12,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff;
}
.loc-state-chip .sky-ico {
  width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
  background: #FFC94A;
  box-shadow: 0 0 0 3px rgba(255,201,74,0.28);
  transition: background var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), clip-path var(--t-base) var(--ease-out);
}
/* Crescent moon for the closed/night state */
.loc-card[data-open="0"] .loc-state-chip .sky-ico {
  background: #E8EDF7;
  box-shadow: 0 0 0 3px rgba(200,214,240,0.18), inset -3px 0 0 0 rgba(20,26,42,0.9);
}

/* ── Card body ───────────────────────────────────────────────────── */
.loc-body { padding: var(--space-5); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.loc-card h3 { color: var(--bf-white); font-family: var(--font-display); font-size: 22px; text-transform: uppercase; font-weight: 400; letter-spacing: 0.005em; line-height: 1.1; }
.loc-marker { font-family: var(--font-display); font-size: 14px; color: var(--bf-yellow); letter-spacing: 0.1em; }
.loc-meta { font-size: 13px; color: #a8a39c; line-height: 1.4; }
.loc-link { color: var(--bf-yellow); font-weight: 700; font-size: 14px; margin-top: auto; padding-top: var(--space-3); }
.loc-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Live open/closed line */
.loc-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #6ED88C; }
.loc-live .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; position: relative; }
.loc-live .d::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: beacon 2.4s var(--ease-out) infinite; }
.loc-card[data-open="0"] .loc-live { color: #8A93A3; }
.loc-card[data-open="0"] .loc-live .d::after { animation: none; }

body.theme-playful .loc-card { border: 3px solid var(--bf-charcoal); }
body.theme-playful .loc-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 rgba(0,0,0,0.45); }

/* ── INSTAGRAM FEED — 9:16 REELS RAIL ───────────────────────────── */
instagram-feed { display: block; }

/* Header */
.if-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.if-id { display: flex; align-items: center; gap: var(--space-4); }
.if-head-actions { display: flex; align-items: center; gap: var(--space-3); }
.if-ring {
  width: 52px; height: 52px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%; color: var(--bf-white);
  background: conic-gradient(from 200deg, #F5B800, #E63A4A, #C13584, #1FB6E5, #3DA35D, #F5B800);
}
/* Real avatar photo (Site Settings → Instagram Avatar / per-post override)
   in place of the generic gradient icon, once one's been uploaded. */
.if-ring.has-photo, .if-user-ring.has-photo { background: none; overflow: hidden; }
.if-ring.has-photo img, .if-user-ring.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.if-handle { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); text-transform: lowercase; letter-spacing: 0.005em; line-height: 1; color: var(--fg1); }
.if-handle:hover { color: var(--accent); }
.if-sub { font-size: 13px; color: var(--fg2); margin-top: 4px; }
.if-follow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-pill);
  border: 2px solid var(--fg1); color: var(--fg1);
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.if-follow:hover { background: var(--fg1); color: var(--bg); }
body.theme-playful .if-follow { border-width: 3px; box-shadow: 4px 4px 0 var(--bf-charcoal); background: var(--bf-white); }

/* Rotate pause/play control */
.if-ctrl {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 2px solid var(--border-strong); background: var(--bg-elevated); color: var(--fg1);
  font-size: 12px; line-height: 1;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.if-ctrl:hover { background: var(--fg1); color: var(--bg); border-color: var(--fg1); }
.if-ctrl .if-ctrl-play { display: none; }
instagram-feed[data-paused="1"] .if-ctrl .if-ctrl-play { display: block; }
instagram-feed[data-paused="1"] .if-ctrl .if-ctrl-pause { display: none; }

/* Viewport + rail */
.if-viewport { position: relative; }
.if-rail {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: none; /* continuous drift, not stepped snapping */
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: 2px;
}
.if-rail::-webkit-scrollbar { display: none; }

/* 9:16 reel tile */
.if-reel {
  position: relative;
  flex: 0 0 clamp(210px, 19%, 300px);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bf-charcoal);
  isolation: isolate;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
@media (max-width: 900px) { .if-reel { flex: 0 0 44%; } }
@media (max-width: 560px) { .if-reel { flex: 0 0 68%; } }
.if-reel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
body.theme-playful .if-reel { border: 3px solid var(--bf-charcoal); }
body.theme-playful .if-reel:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--bf-charcoal); }

.if-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.if-photo { display: block; background: linear-gradient(160deg, var(--p1, #E8E2D3), var(--p2, #C9C2AE)); }
.ph-pancakes { --p1: #F5C97A; --p2: #8E5A10; }
.ph-acai     { --p1: #9B68D8; --p2: #2E1055; }
.ph-avocado  { --p1: #C7E29A; --p2: #4A7A28; }
.ph-coffee   { --p1: #7A5636; --p2: #1E1108; }
.ph-eggs     { --p1: #FFE89A; --p2: #D98A10; }
.ph-smoothie { --p1: #D68FC4; --p2: #58154A; }
.ph-burger   { --p1: #D89060; --p2: #5A2C12; }
.ph-tacos    { --p1: #F2B26E; --p2: #8A3E12; }

/* Gradient scrim so the username + caption stay legible */
.if-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 32%),
    linear-gradient(to top, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.15) 42%, rgba(10,10,10,0) 62%);
}

/* USERNAME ON TOP OF THE VIDEO */
.if-user {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: var(--radius-pill);
  background: rgba(18,18,18,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  max-width: calc(100% - 24px);
}
.if-user-ring {
  width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%; color: #fff;
  background: conic-gradient(from 200deg, #F5B800, #E63A4A, #C13584, #1FB6E5, #3DA35D, #F5B800);
}
.if-user-ring svg { width: 13px; height: 13px; }
.if-user-name {
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  color: #fff; letter-spacing: 0.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Play button — centered, fades out while playing */
.if-play {
  position: absolute; top: 50%; left: 50%; z-index: 4;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 2px solid rgba(255,255,255,0.85);
  background: rgba(18,18,18,0.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 17px; line-height: 1; padding-left: 3px;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.if-play:hover { background: rgba(230,58,74,0.85); transform: translate(-50%, -50%) scale(1.07); }
.if-reel[data-playing] .if-play { opacity: 0; pointer-events: none; }
.if-reel[data-playing]:hover .if-play { opacity: 1; pointer-events: auto; }

/* Mute toggle + duration badge */
.if-mute {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.22);
  background: rgba(18,18,18,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-size: 13px; line-height: 1;
}
.if-mute:hover { background: rgba(18,18,18,0.8); }
.if-dur {
  position: absolute; top: 14px; right: 12px; z-index: 3;
  font-size: 11px; font-weight: 700; color: #fff;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: rgba(18,18,18,0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  letter-spacing: 0.04em;
}

/* Caption + stats footer */
.if-foot { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: var(--space-4); display: flex; flex-direction: column; gap: 8px; }
.if-cap {
  font-size: 13px; line-height: 1.4; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.if-stats { display: flex; gap: var(--space-4); font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.92); }

/* Whole-tile link sits under the controls */
.if-hit { position: absolute; inset: 0; z-index: 2; }

/* Nav arrows */
.if-nav {
  position: absolute; top: 50%; z-index: 6;
  transform: translateY(-50%);
  width: 46px; height: 46px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--fg1);
  background: var(--bg-elevated); color: var(--fg1);
  font-size: 17px; line-height: 1;
  box-shadow: var(--shadow-md);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.if-nav:hover:not(:disabled) { background: var(--fg1); color: var(--bg); }
.if-nav:disabled { opacity: 0.25; cursor: default; }
.if-nav-prev { left: -14px; }
.if-nav-next { right: -14px; }
@media (max-width: 700px) { .if-nav { display: none; } }
body.theme-playful .if-nav { border-width: 3px; box-shadow: 3px 3px 0 var(--bf-charcoal); background: var(--bf-white); }

/* Scroll progress */
.if-progress { height: 3px; background: var(--border); border-radius: 99px; overflow: hidden; margin-top: var(--space-5); }
.if-progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0.04); }

/* Loading skeleton */
.if-skel {
  aspect-ratio: 9 / 16;
  flex: 0 0 clamp(210px, 19%, 300px);
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--surface-warm) 30%, var(--bg-elevated) 50%, var(--surface-warm) 70%);
  background-size: 220% 100%;
  animation: if-shimmer 1.4s linear infinite;
}
@keyframes if-shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }

.if-note { margin-top: var(--space-5); font-size: 13px; color: var(--fg2); text-align: center; }
.if-note code { background: var(--surface-warm); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .if-rail { scroll-behavior: auto; }
  .if-skel { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MENU PAGE — actions, GLP-1 section, print / PDF
   ══════════════════════════════════════════════════════════════════ */

.menu-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.menu-actions .btn { gap: 10px; }

/* GLP-1 chip */
.chip.is-glp1 { background: #E6F2FB; color: var(--bf-sky-deeper); border-color: #BFDDF2; }
body.theme-playful .chip.is-glp1 { background: var(--bf-sky); color: #fff; border-color: var(--bf-charcoal); }

.menu-toc a.toc-glp1 { background: #E6F2FB; color: var(--bf-sky-deeper); border-color: #BFDDF2; }
.menu-toc a.toc-glp1:hover, .menu-toc a.toc-glp1.is-active { background: var(--bf-sky-deep); color: #fff; border-color: var(--bf-sky-deep); }

/* GLP-1 section */
.glp1-section { background: linear-gradient(180deg, #F2F9FD 0%, var(--bg) 100%); }
body.theme-playful .glp1-section { background: #DCF0FA; }
body.theme-minimal .glp1-section { background: #F7FAFC; }
.glp1-section .menu-section-head h2 { color: var(--bf-sky-deep); }
body.theme-minimal .glp1-section .menu-section-head h2 { color: var(--fg1); }

/* Macro readout */
.macros { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.macros span { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg2); font-weight: 600; }
.macros b { font-family: var(--font-display); font-size: 17px; color: var(--bf-sky-deeper); letter-spacing: 0; margin-right: 3px; }
body.theme-minimal .macros b { color: var(--fg1); }

.glp1-disclaimer {
  margin-top: var(--space-8);
  padding: var(--space-5);
  border-left: 3px solid var(--bf-sky);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg2);
  max-width: 82ch;
}

/* ── PRINT COVER (screen-hidden) ─────────────────────────────────── */
.print-cover { display: none; }

/* ══════════════════════════════════════════════════════════════════
   PRINT / PDF — strips site chrome and sets the menu on paper
   ══════════════════════════════════════════════════════════════════ */
@media print {
  @page { margin: 14mm 14mm 16mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    line-height: 1.42;
  }

  /* Hide everything that isn't menu content. The second row was added
     Aug 2026 when print moved beyond /breakfast-menu to the catering,
     GLP-1 and special event menus — chrome those pages carry that the
     original list had never seen. */
  .nav, .sticky-order, .menu-toc, .footer, .menu-actions,
  .toast-note, #bf-tweaks-mount, instagram-feed,
  .menu-item .thumb, .photo, .divider-wavy,
  .promo-bar, .mobile-nav, .mega, .row .btn, .btn,
  .lp-hero-photo, .lp-others, .cat-inquiry, .contact-cards, .sem-two,
  .ep-cta, .cat-quickfacts .lp-label ~ .btn { display: none !important; }

  /* Cards flatten to paper: no fills, no shadows, hairline rules only.
     Printers render the site's cream/blue panels as grey wash, which
     eats ink and hurts legibility at 10.5pt. */
  .sem-package, .sem-note, .sem-terms, .ep-card, .card, .callout,
  .lp-pick, .vals-purpose {
    background: none !important;
    box-shadow: none !important;
    border-color: #999 !important;
    break-inside: avoid;
  }

  /* Prices and section heads must survive greyscale. */
  .lp-pick-price, .sem-extra-price, .ep-list li b { color: #000 !important; font-weight: 700; }
  .sem-courses dt { color: #000 !important; }

  /* Multi-column blocks stack; two 22pt columns on A4 is unreadable. */
  .sem-dinner-grid, .ep-grid, .sem-two, .sem-terms {
    display: block !important;
  }
  .sem-package, .ep-card { margin-bottom: 10pt; }

  /* A menu package should not be split across a page break. */
  .lp-picks li, .sem-extras li { break-inside: avoid; }

  /* Print-only masthead */
  .print-cover {
    display: flex !important;
    align-items: center;
    gap: 12pt;
    padding-bottom: 8pt;
    margin-bottom: 14pt;
    border-bottom: 2pt solid #000;
  }
  .print-logo { width: 46pt; height: 46pt; }
  .nav-wordmark, .footer-wordmark { display: none !important; }
  .print-brand { font-family: var(--font-display); font-size: 24pt; text-transform: uppercase; line-height: 1; letter-spacing: 0.01em; }
  .print-tag { font-size: 9.5pt; font-weight: 700; margin-top: 3pt; }
  .print-meta { font-size: 8pt; color: #444; margin-top: 3pt; }

  /* Menu hero collapses to a single line of intro */
  .menu-hero { padding: 0 0 10pt !important; background: none !important; border: 0 !important; }
  .menu-hero h1 { font-size: 20pt !important; margin-bottom: 4pt; }
  .menu-hero .lead { font-size: 9pt !important; }
  .menu-hero .eyebrow { display: none !important; }

  /* Sections flow continuously; no forced page per section */
  .menu-section, .section, .section-tight {
    padding: 10pt 0 6pt !important;
    background: none !important;
    border-bottom: 0 !important;
    break-inside: auto;
  }
  .glp1-section { background: none !important; }
  .container { max-width: none !important; padding: 0 !important; }

  .menu-section-head {
    display: block !important;
    margin-bottom: 8pt !important;
    break-after: avoid;
  }
  .menu-section-head h2 {
    font-size: 17pt !important;
    color: #000 !important;
    border-bottom: 1pt solid #000;
    padding-bottom: 3pt;
    margin-bottom: 4pt;
  }
  .menu-section-head h2 br { display: none; }
  .menu-section-head .lead { font-size: 9pt !important; color: #333 !important; max-width: none !important; }
  .menu-section-head .eyebrow { font-size: 7.5pt !important; color: #555 !important; }
  .menu-section-head .eyebrow::before { display: none; }
  .menu-section-head .tag-strip { display: none !important; }

  /* Two-column menu list saves paper */
  .menu-list { columns: 2; column-gap: 20pt; }
  .menu-item {
    display: block !important;
    break-inside: avoid;
    padding: 5pt 0 !important;
    border-bottom: 0.5pt dotted #999 !important;
  }
  .menu-item .name { font-size: 11pt !important; margin-bottom: 1pt; display: inline; }
  .menu-item .price { font-size: 11pt !important; color: #000 !important; float: right; }
  .menu-item .desc { font-size: 8.5pt !important; color: #333 !important; max-width: none !important; margin-top: 2pt; }
  .menu-item .tags { margin-top: 2pt !important; }
  .chip {
    font-size: 6.5pt !important;
    padding: 1pt 4pt !important;
    background: none !important;
    color: #000 !important;
    border: 0.5pt solid #666 !important;
  }
  .macros { gap: 8pt !important; margin-top: 2pt !important; }
  .macros span { font-size: 7.5pt !important; color: #333 !important; }
  .macros b { font-size: 9pt !important; color: #000 !important; }

  /* Drinks cards flatten */
  .card { border: 0 !important; padding: 0 !important; box-shadow: none !important; background: none !important; break-inside: avoid; }
  .drink-row { font-size: 9pt !important; padding: 2.5pt 0 !important; }
  .drink-row span:last-child { font-size: 9.5pt !important; color: #000 !important; }
  .divider-line { margin: 4pt 0 !important; background: #000 !important; }

  .glp1-disclaimer {
    font-size: 7.5pt !important;
    padding: 6pt 8pt !important;
    background: none !important;
    border-left: 1.5pt solid #000 !important;
    break-inside: avoid;
  }

  /* Start the GLP-1 menu on a fresh page */
  #glp1 { break-before: page; }

  a { text-decoration: none !important; color: #000 !important; }
  h2, h3 { break-after: avoid; }
}

/* ══════════════════════════════════════════════════════════════════
   MEGA MENU
   ══════════════════════════════════════════════════════════════════ */

.nav-item { position: relative; display: flex; }

.nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 0; margin: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
  color: var(--fg1);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.nav-trigger:hover, .nav-trigger.is-active, .nav-trigger[aria-expanded="true"] {
  color: var(--accent); border-bottom-color: var(--accent);
}
.nav-chev { transition: transform var(--t-fast) var(--ease-out); }
.nav-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }

/* ── Panel shell ─────────────────────────────────────────────────── */
.mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 49;
  background:
    radial-gradient(900px 320px at 18% -10%, color-mix(in oklch, var(--accent) 9%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bf-cream) 0%, var(--bf-paper) 68%, var(--bf-cream-2) 100%);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 24px 48px rgba(26,20,10,0.14), 0 6px 14px rgba(26,20,10,0.06);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
/* Brand stripe across the top edge — the logo's four colors */
.mega::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--bf-yellow) 0 25%, var(--bf-raspberry) 25% 50%,
    var(--bf-sky) 50% 75%, var(--bf-leaf) 75% 100%);
}
body.theme-playful .mega {
  background: linear-gradient(180deg, #FFF6DC 0%, #FFEFC2 100%);
}
body.theme-minimal .mega {
  background: linear-gradient(180deg, #FAFAF9 0%, #F2F1EE 100%);
}
body.theme-minimal .mega::before {
  background: linear-gradient(90deg, var(--fg1) 0 60%, var(--bf-raspberry) 60% 100%);
}
.mega.is-open { opacity: 1; transform: none; }
.mega[hidden] { display: none; }
.mega-inner { max-width: var(--container); margin: 0 auto; padding: var(--space-8) clamp(20px, 4vw, 48px) var(--space-6); }
body.theme-playful .mega { border-bottom: 3px solid var(--bf-charcoal); }

.mega-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.mega-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.mega-title { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 36px); text-transform: uppercase; line-height: 1; letter-spacing: 0.005em; margin-top: 6px; color: var(--fg1); }
.mega-head-link { font-weight: 700; font-size: 14px; color: var(--accent); white-space: nowrap; }
.mega-head-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Locations grid ──────────────────────────────────────────────── */
.mega-locs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
@media (max-width: 1100px) { .mega-locs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .mega-locs { grid-template-columns: repeat(2, 1fr); } }

.mega-loc {
  display: flex; flex-direction: column; gap: 5px;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bf-white);
  box-shadow: 0 1px 2px rgba(26,20,10,0.04);
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.mega-loc:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,20,10,0.09); }
body.theme-playful .mega-loc { border: 2px solid var(--bf-charcoal); }
body.theme-playful .mega-loc:hover { box-shadow: 4px 4px 0 var(--bf-charcoal); }

.mega-loc-num  { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em; color: var(--secondary); }
.mega-loc-city { font-family: var(--font-display); font-size: 19px; text-transform: uppercase; line-height: 1.05; letter-spacing: 0.005em; color: var(--fg1); }
.mega-loc-addr { font-size: 12.5px; color: var(--fg2); line-height: 1.35; }
.mega-loc-note { font-size: 11px; color: var(--fg3); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.mega-loc-live {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 6px;
  margin-top: auto; padding-top: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #1E9E4A;
}
.mega-loc-live .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.mega-loc-live b { font-weight: 700; }
/* Reopen line — sits under the status, aligned past the dot */
.mega-loc-live i {
  grid-column: 2;
  font-style: normal;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fg2);
}
.mega-loc-live i:empty { display: none; }
.mega-loc[data-open="0"] .mega-loc-live { color: var(--fg3); }

.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: 13px; color: var(--fg2); }
.mega-foot-links { display: flex; gap: var(--space-5); }
.mega-foot-links a { font-weight: 700; color: var(--accent); font-size: 13px; }
.mega-foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── About panel ─────────────────────────────────────────────────── */
.mega-narrow .mega-inner { max-width: 1000px; }
.mega-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-8); }
@media (max-width: 860px) { .mega-cols { grid-template-columns: 1fr; } }

.mega-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (max-width: 560px) { .mega-links { grid-template-columns: 1fr; } }
.mega-link {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast) var(--ease-out);
}
.mega-link:hover { background: var(--bf-white); box-shadow: 0 1px 2px rgba(26,20,10,0.05); }
.mega-link-label { font-weight: 700; font-size: 15px; color: var(--fg1); }
.mega-link:hover .mega-link-label { color: var(--accent); }
.mega-link-desc { font-size: 12.5px; color: var(--fg2); line-height: 1.35; }

.mega-promo {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--bf-charcoal);
  color: var(--bf-cream);
  transition: transform var(--t-fast) var(--ease-out);
}
.mega-promo:hover { transform: translateY(-2px); }
body.theme-playful .mega-promo { border: 3px solid var(--bf-charcoal); box-shadow: 6px 6px 0 var(--bf-raspberry); }
.mega-promo-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-yellow); }
.mega-promo-title { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; line-height: 1; color: var(--bf-white); letter-spacing: 0.005em; }
.mega-promo-copy { font-size: 13.5px; line-height: 1.5; color: #bcb6ad; }
.mega-promo-cta { font-weight: 700; font-size: 13px; color: var(--bf-yellow); margin-top: auto; padding-top: var(--space-3); letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 1100px) { .mega { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } }

/* ══════════════════════════════════════════════════════════════════
   SEASONAL — "WHAT'S FRESH™" FEATURE
   Rotates through the four limited-run items; the season label is
   derived from the current date in enhance.js.
   ══════════════════════════════════════════════════════════════════ */

/* Blackboard ground (client request, Aug 2026). Not decoration for its
   own sake: the "What's Fresh" menu is a real blackboard in the cafes —
   /about calls it "our 'What's Fresh' blackboard menu... a monthly
   showcase for our talented chefs' latest creations" — so the section
   that carries those items now looks like the board it comes from.

   Uses the client-supplied chalkboard photo. The charcoal base colour
   below it is the image's own average tone, so the section still reads
   correctly while the photo loads (or if it ever 404s) rather than
   flashing the cream page background behind white type.

   Two things make it read as a board rather than just a dark band:

   1. The overlay is deliberately light. The photo's whole value is its
      chalk smear and grain; darken it much and you're back to a flat
      charcoal rectangle. It only has to lift enough contrast for the
      body copy — the display type is white on near-black and was never
      at risk.
   2. A real wooden surround on all four edges, with a bevel: dark inner
      line, then a faint highlight. A stripe top-and-bottom reads as a
      coloured band; a framed rectangle reads as a board on a wall.
      Sides are thinner than top/bottom, the way a real frame sits. */
.seasonal {
  background-color: #2E2E2E;
  background-image: url("../img/chalkboard.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--bf-cream);
  overflow: hidden;
  position: relative;
  border: 8px solid var(--bf-yellow-deep);
  border-left-width: 6px;
  border-right-width: 6px;
  /* Warm grain across the frame so it reads as wood, not a flat swatch. */
  border-image: linear-gradient(135deg, #E0A54D 0%, var(--bf-yellow-deep) 22%, #A8712A 50%, var(--bf-yellow-deep) 74%, #E0A54D 100%) 1;
}
.seasonal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.04) 42%, rgba(0,0,0,0.24) 100%),
    radial-gradient(130% 108% at 50% 40%, transparent 44%, rgba(0,0,0,0.34) 100%);
  /* Bevel: the board sitting down inside its frame. */
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.5),
    inset 0 0 0 3px rgba(255,255,255,0.07),
    inset 0 3px 22px rgba(0,0,0,0.45);
}
.seasonal > .container { position: relative; z-index: 1; }

/* The theme variants keep their own grounds — the blackboard belongs to
   the default theme, and .theme-playful's bright blue is a deliberate
   inversion that a chalk texture would muddy. */
body.theme-playful .seasonal { background: var(--bf-sky); border-color: var(--bf-charcoal); }
body.theme-playful .seasonal::after { display: none; }
body.theme-minimal .seasonal { background: #111; border-color: #111; }
body.theme-minimal .seasonal::after { display: none; }

.seasonal-head { max-width: 60ch; margin-bottom: clamp(32px, 4vw, 56px); }
.seasonal-head h2 { color: var(--bf-white); margin: var(--space-3) 0 var(--space-4); line-height: 1.04; }
/* Faint chalk bloom so the display type reads as written on the board
   rather than printed over it. Default theme only — see .seasonal above. */
body:not(.theme-playful):not(.theme-minimal) .seasonal-head h2 { text-shadow: 0 0 12px rgba(255,255,255,0.16); }
.seasonal-head .lead { color: #bcb6ad; }
body.theme-playful .seasonal-head h2 { color: var(--bf-charcoal); }
body.theme-playful .seasonal-head .lead { color: #204652; }

.seasonal-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px 8px 13px;
  border-radius: var(--radius-pill);
  background: var(--bf-yellow);
  color: var(--bf-charcoal);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 19px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
.seasonal-badge sup { font-size: 0.48em; vertical-align: super; margin-left: -0.1em; letter-spacing: 0; }
.seasonal-leaf {
  width: 13px; height: 13px; flex-shrink: 0;
  background: var(--bf-leaf);
  border-radius: 50% 8% 50% 8%;
  transform: rotate(-20deg);
}
body.theme-playful .seasonal-badge { border: 2px solid var(--bf-charcoal); box-shadow: 3px 3px 0 var(--bf-charcoal); }

/* Stage */
.seasonal-stage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 940px) { .seasonal-stage { grid-template-columns: 1fr; } }

/* Cross-fading photo */
.seasonal-photo {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid #2E2E2E;
}
body.theme-playful .seasonal-photo { border: 3px solid var(--bf-charcoal); box-shadow: 10px 10px 0 var(--bf-charcoal); }
.seasonal-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 700ms var(--ease-out), transform 1200ms var(--ease-out);
}
.seasonal-slide.is-active { opacity: 1; transform: none; }
.seasonal-flag {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--bf-raspberry);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}

/* Detail panels */
.seasonal-detail { position: relative; }
.seasonal-panel { display: none; }
.seasonal-panel.is-active { display: block; animation: seasonal-in 460ms var(--ease-out) both; }
@keyframes seasonal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.seasonal-kicker {
  display: block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bf-yellow);
}
body.theme-playful .seasonal-kicker { color: var(--bf-charcoal); }
.seasonal-panel h3 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 50px);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--bf-white);
  margin: var(--space-3) 0 var(--space-4);
}
body.theme-playful .seasonal-panel h3 { color: var(--bf-charcoal); }
.seasonal-panel p { color: #bcb6ad; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; max-width: 52ch; }
body.theme-playful .seasonal-panel p { color: #1D4450; }
.seasonal-price {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 40px);
  color: var(--bf-yellow);
  margin-top: var(--space-4);
  letter-spacing: 0.005em;
}
body.theme-playful .seasonal-price { color: var(--bf-raspberry); }

/* Tabs with fill-progress bars */
.seasonal-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-top: var(--space-8); }
@media (max-width: 520px) { .seasonal-tabs { grid-template-columns: 1fr; } }
.seasonal-tab {
  position: relative;
  display: flex; align-items: center;
  padding: 12px 14px 14px;
  text-align: left; cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1px solid #333;
  border-radius: var(--radius-sm);
  color: #a8a39c;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1.25;
  overflow: hidden;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.seasonal-tab:hover { color: var(--bf-white); border-color: #4A4A4A; background: rgba(255,255,255,0.08); }
.seasonal-tab.is-active { color: var(--bf-white); background: rgba(255,255,255,0.1); border-color: var(--bf-yellow); }
body.theme-playful .seasonal-tab { background: rgba(255,255,255,0.5); border-color: var(--bf-charcoal); color: #24505C; }
body.theme-playful .seasonal-tab.is-active { background: var(--bf-white); color: var(--bf-charcoal); }
.seasonal-tab .t-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--bf-yellow);
  transform: scaleX(0); transform-origin: left;
}
.seasonal-tab.is-active .t-bar { animation: seasonal-fill var(--seasonal-dur, 6500ms) linear both; }
@keyframes seasonal-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-seasonal][data-paused="1"] .seasonal-tab.is-active .t-bar { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .seasonal-slide { transition: none; }
  .seasonal-tab.is-active .t-bar { animation: none; transform: scaleX(1); }
  .seasonal-panel.is-active { animation: none; }
}

/* ── MEGA MENU: "MENU" PANEL ─────────────────────────────────────
   One column of links · one full-height seasonal card · two stacked.
   ──────────────────────────────────────────────────────────────── */
.mega-menu-cols {
  display: grid;
  grid-template-columns: 0.92fr 1.05fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
@media (max-width: 1100px) { .mega-menu-cols { grid-template-columns: 1fr 1fr; } .mega-stack { grid-column: 1 / -1; flex-direction: row !important; } }
@media (max-width: 900px)  { .mega-menu-cols { grid-template-columns: 1fr; } .mega-stack { flex-direction: column !important; } }

/* Column 1 — links stacked single-file */
.mega-links-single {
  display: flex; flex-direction: column; gap: 0;
  padding-right: var(--space-5);
  border-right: 1px solid var(--border);
}
@media (max-width: 1100px) { .mega-links-single { border-right: 0; padding-right: 0; } }
.mega-col-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg3); padding: 0 var(--space-4) var(--space-3);
}
.mega-links-single .mega-link { padding: 9px var(--space-4); }

/* Column 2 — full-height seasonal card */
.mega-seasonal {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bf-charcoal);
  color: var(--bf-cream);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.mega-seasonal:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
body.theme-playful .mega-seasonal { border: 3px solid var(--bf-charcoal); box-shadow: 6px 6px 0 var(--bf-yellow); }

.mega-seasonal-body { display: flex; flex-direction: column; gap: 8px; padding: var(--space-5) var(--space-5) var(--space-4); }
.mega-seasonal-badge {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--bf-yellow);
  color: var(--bf-charcoal);
  font-family: var(--font-display);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1.5; white-space: nowrap;
}
.mega-seasonal-badge sup { font-size: 0.5em; vertical-align: top; margin-left: -0.08em; letter-spacing: 0; }
.mega-seasonal-name {
  font-family: var(--font-display);
  font-size: 23px; text-transform: uppercase; line-height: 1.05;
  letter-spacing: 0.005em; color: var(--bf-white);
}
.mega-seasonal-desc { font-size: 13px; line-height: 1.45; color: #b5afa6; }

/* Photo takes whatever height is left, so the card fills the row */
/* position:relative + absolutely-positioned media (see nav.js) keeps a
   real (portrait/tall) photo or video pinned to this box's own height
   instead of stretching the flex column to the media's own aspect
   ratio — a percentage-height child on a flex:1 item without this can
   still inflate the row to fit a tall video/image. */
.mega-seasonal-tall .mega-seasonal-photo { position: relative; flex: 1; min-height: 120px; display: block; overflow: hidden; }
.mega-seasonal-photo .photo { height: 100%; font-size: 11px; }

.mega-seasonal-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid #2E2E2E;
}
.mega-seasonal-foot b { font-family: var(--font-display); font-size: 24px; color: var(--bf-yellow); letter-spacing: 0.005em; }
.mega-seasonal-foot em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-raspberry); }
body.theme-playful .mega-seasonal-foot em { color: var(--bf-yellow); }

/* Column 3 — two stacked cards */
.mega-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.mega-card {
  flex: 1;
  display: flex; flex-direction: column; gap: 7px;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bf-white);
  box-shadow: 0 1px 2px rgba(26,20,10,0.04);
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.mega-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,20,10,0.09); }
body.theme-playful .mega-card { border: 2px solid var(--bf-charcoal); }
body.theme-playful .mega-card:hover { box-shadow: 5px 5px 0 var(--bf-charcoal); }

.mega-card-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 14%, var(--bf-white));
  color: var(--accent);
  margin-bottom: 2px;
}
.mega-card-title { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; line-height: 1.05; letter-spacing: 0.005em; color: var(--fg1); }
.mega-card-desc { font-size: 13px; line-height: 1.45; color: var(--fg2); }
.mega-card-cta { margin-top: auto; padding-top: var(--space-3); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

.mega-card-glp1 .mega-card-icon { background: #E6F2FB; color: var(--bf-sky-deeper); }
.mega-card-glp1:hover { border-color: var(--bf-sky); }
.mega-card-pdf:hover { border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   REFERENCE-ALIGNED COMPONENTS
   Script eyebrows · handwritten stickers · numbered lists ·
   leader-dot menu rows · split colour bands · club signup ·
   announcement bar
   ══════════════════════════════════════════════════════════════════ */

/* ── Script eyebrow (Caveat) ─────────────────────────────────────── */
.script-eyebrow {
  display: block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.1;
  color: var(--secondary);
  margin-bottom: 6px;
}
.script-eyebrow.on-dark { color: var(--bf-yellow); }
.script-eyebrow.on-blue { color: rgba(255,255,255,0.92); }

/* Script sign-off line */
.script-signoff {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 26px);
  color: var(--secondary);
  line-height: 1.2;
}

/* ── Handwritten sticker label ───────────────────────────────────── */
.sticker {
  position: absolute;
  bottom: 20px; left: 20px;
  z-index: 4;
  padding: 9px 18px;
  background: var(--bf-white);
  color: var(--bf-charcoal);
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.15;
  border-radius: 3px;
  transform: rotate(-1.6deg);
  box-shadow: 0 3px 10px rgba(20,16,8,0.16);
  max-width: calc(100% - 40px);
}
.sticker.top-right { top: 20px; bottom: auto; left: auto; right: 20px; transform: rotate(1.8deg); }

/* Inline variant for use outside a photo */
/* Rotated labels need a little extra room so they clear the headline */
.hero .row:has(.sticker-inline) { margin-bottom: var(--space-3); }
.sticker-inline {
  position: static;
  display: inline-block;
  bottom: auto; left: auto;
  font-size: clamp(17px, 1.5vw, 21px);
  padding: 10px 20px;
  transform: rotate(-1.4deg);
  max-width: none;
}
body.theme-playful .sticker-inline,
body.theme-playful .sticker-pill { border: 2px solid var(--bf-charcoal); box-shadow: 3px 3px 0 var(--bf-charcoal); }

/* Status pill picks up the same tape-label treatment */
.status-pill.sticker-pill {
  border: 0;
  border-radius: 3px;
  background: var(--bf-white);
  padding: 11px 18px;
  transform: rotate(1.1deg);
  box-shadow: 0 3px 10px rgba(20,16,8,0.16);
}
.status-pill.sticker-pill [data-status-label] {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0;
}
.status-pill.sticker-pill [data-status-detail] {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 18px;
  color: var(--fg2);
}
.status-pill.sticker-pill .sep { height: 17px; background: var(--border); }

/* ── Numbered list (01 / 02 / 03 with rules) ─────────────────────── */
.numlist { border-top: 1px solid var(--border); margin-top: var(--space-6); }
.numlist-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 4px var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.numlist-num {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0;
}
.numlist-item:nth-child(1) .numlist-num { color: var(--bf-leaf); }
.numlist-item:nth-child(2) .numlist-num { color: var(--bf-yellow-deep); }
.numlist-item:nth-child(3) .numlist-num { color: var(--bf-sky); }
.numlist-item:nth-child(4) .numlist-num { color: var(--bf-raspberry); }
.numlist-title { font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; line-height: 1.25; color: var(--fg1); }
.numlist-copy { grid-column: 2; font-size: 15.5px; line-height: 1.55; color: var(--fg2); max-width: 62ch; }
@media (max-width: 560px) { .numlist-item { grid-template-columns: 42px 1fr; } .numlist-num { font-size: 26px; } }

/* ── Editorial split: photo panel + copy panel ───────────────────── */
.split-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
@media (max-width: 860px) { .split-band { grid-template-columns: 1fr; } }
.split-figure { position: relative; min-height: 340px; background: var(--surface-warm); overflow: hidden; }
.split-figure .photo { height: 100%; }
/* A real <img> has to fill the band the same way the .photo placeholder
   does. Left in normal flow it contributes its own intrinsic height, so
   a portrait shot (the kitchen crew photo is 576×1024) stretched the
   band to ~850px and left the copy column stranded in whitespace.
   Absolute + object-fit lets the copy side set the height, as intended. */
.split-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.split-copy { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); align-items: flex-start; }
.split-copy h2 { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 50px); text-transform: uppercase; line-height: 1; letter-spacing: 0.005em; }
.split-copy p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; max-width: 48ch; }

/* Catering variant — brand sky blue */
.split-catering .split-figure { background: #B6DCF2; }
.split-catering .split-copy { background: var(--bf-sky-deep); color: var(--bf-white); }
.split-catering .split-copy h2 { color: var(--bf-white); }
.split-catering .split-copy p { color: rgba(255,255,255,0.94); }
.split-catering .split-copy .btn {
  background: var(--bf-white); color: var(--bf-sky-deeper); border-color: var(--bf-white);
}
.split-catering .split-copy .btn:hover { background: var(--bf-cream); border-color: var(--bf-cream); }
body.theme-playful .split-band { border: 3px solid var(--bf-charcoal); box-shadow: 10px 10px 0 var(--bf-charcoal); }

/* ── CHECKLIST — a two-column list of real, verifiable facts (sourcing,
   ingredients, etc.), each with a small checkmark rather than a bullet.
   Multi-column (not grid) so the fill order stays top-to-bottom within
   each column, same reading order an author typed the list in. ── */
.checklist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--space-8); }
.checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--fg2); break-inside: avoid; margin-bottom: var(--space-3); }
.checklist svg { color: var(--bf-leaf-deep); flex-shrink: 0; margin-top: 3px; }
@media (max-width: 700px) { .checklist { columns: 1; } }

/* ── LEADER-DOT MENU ROWS ────────────────────────────────────────
   Classic printed-menu setting: item name, dotted leader, price.
   Replaces the old thumbnail rows.
   ──────────────────────────────────────────────────────────────── */
.menu-item {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 0;
}
.menu-item .thumb { display: none; }
.menu-item .name {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 19px);
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--fg1);
  margin-bottom: 4px;
}
/* Dotted leader fills the gap out to the price */
/* Anonymous text runs get order 0, so the leader (1) lands between
   the name and the appended price (2). */
.menu-item .name::after {
  content: "";
  order: 1;
  flex: 1;
  min-width: 24px;
  margin: 0 10px;
  align-self: flex-end;
  height: 0;
  border-bottom: 1.5px dotted var(--border-strong);
  transform: translateY(-5px);
}
.menu-item .name .price { order: 2; }
.menu-item .price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--secondary);
  letter-spacing: -0.01em;
  flex-shrink: 0;
  white-space: nowrap;
}
.menu-item .desc { color: var(--fg2); font-size: 15px; line-height: 1.5; max-width: 62ch; }
.menu-item .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--space-3); }
body.theme-minimal .menu-item .price { color: var(--fg1); }

/* Price needs to live inside the name row — JS moves it there */
.menu-item .name .price { margin-left: 0; }

/* Section heading with a rule running to the right */
.menu-section-head h2 { display: flex; align-items: center; gap: var(--space-5); }
.menu-section-head h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
  min-width: 40px;
}
.menu-section-sub { font-style: italic; color: var(--fg2); font-size: clamp(15px, 1.2vw, 17px); margin-top: var(--space-2); }

/* Two-up item columns on wide screens */
.menu-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 5vw, 72px); }
@media (max-width: 820px) { .menu-list { grid-template-columns: 1fr; } }

/* ── BERRY FRESH CLUB (email capture) ────────────────────────────── */
/* Club offer sits at the top of the footer as one continuous dark
   region — no second slab, no duplicated signup form. */
.footer-club {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-bottom: clamp(32px, 4vw, 52px);
  margin-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid #3A3F42;
}
@media (max-width: 860px) { .footer-club { grid-template-columns: 1fr; } }
.footer-club h2 { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 44px); text-transform: uppercase; color: var(--bf-white); line-height: 1.02; letter-spacing: 0.005em; }
.footer-club p { color: #bcb6ad; font-size: clamp(14px, 1.1vw, 16px); max-width: 46ch; margin-top: var(--space-3); }
.footer-club .eyebrow { color: var(--bf-yellow); }
.club-form { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.club-input {
  flex: 0 1 380px;
  min-width: 220px;
  padding: 15px 22px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background: var(--bf-white);
  color: var(--bf-charcoal);
  font-family: var(--font-body);
  font-size: 16px;
}
.club-input::placeholder { color: #8C887F; }
.club-input:focus-visible { outline: none; border-color: var(--bf-yellow); }
.club-note { font-size: 12.5px; color: #8a8580; margin-top: var(--space-4); }

/* ── ANNOUNCEMENT BAR ────────────────────────────────────────────── */
.ann-bar {
  background: var(--bf-yellow);
  color: var(--bf-charcoal);
  padding: 11px clamp(16px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  position: relative;
  z-index: 55;
}
.ann-bar p {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 19px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.ann-bar .btn {
  padding: 8px 20px;
  font-size: 12.5px;
  background: var(--bf-charcoal);
  border-color: var(--bf-charcoal);
  color: var(--bf-cream);
  box-shadow: none;
}
.ann-bar .btn:hover { background: #000; border-color: #000; }
.ann-close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--bf-charcoal); font-size: 17px; line-height: 1;
}
.ann-close:hover { background: rgba(0,0,0,0.1); }
@media (max-width: 620px) { .ann-close { display: none; } }

/* ── FOOTER UPGRADES ─────────────────────────────────────────────── */
.footer-loc { margin-bottom: var(--space-4); }
.footer-loc-city { font-weight: 700; color: var(--bf-white); font-size: 14.5px; margin-bottom: 2px; }
.footer-loc-addr { font-size: 13.5px; color: #a8a39c; line-height: 1.45; }
.footer-loc-addr a { display: inline; padding: 0; color: #a8a39c; font-size: 13.5px; }
.footer-loc-addr a:hover { color: var(--bf-yellow); }

.footer-club-form { display: flex; gap: 8px; margin-top: var(--space-4); }
.footer-club-input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid #3A3A3A;
  background: #1C1C1C;
  color: var(--bf-cream);
  font-family: var(--font-body);
  font-size: 14px;
}
.footer-club-input::placeholder { color: #7a756f; }
.footer-club-input:focus-visible { outline: none; border-color: var(--bf-yellow); }
.footer-club-btn {
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  border: 0;
  background: var(--bf-raspberry);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.footer-club-btn:hover { background: var(--bf-raspberry-dp); }

.footer-socials { display: flex; gap: 8px; margin-top: var(--space-4); }
.footer-socials a {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid #3A3A3A;
  background: #1C1C1C;
  color: var(--bf-cream);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
/* Brand glyphs replaced the old IG/TT/IN text labels (Aug 2026). The
   font-size/weight above is now inert for these but left in place as the
   fallback if a chip ever carries text again. */
.footer-socials a svg { display: block; }
.footer-socials a:hover { background: var(--bf-yellow); color: var(--bf-charcoal); border-color: var(--bf-yellow); }
.footer-socials a:focus-visible { outline: 2px solid var(--bf-yellow); outline-offset: 2px; }

.footer-hours-line { font-size: 13px; color: #8a8580; text-align: center; }
@media (max-width: 760px) { .footer-hours-line { text-align: left; } }

.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;
}

/* ══════════════════════════════════════════════════════════════════
   FULL-BLEED VIDEO HERO
   Keyword-forward H1 over a looping video, with an image poster
   fallback so the section never renders empty.
   ══════════════════════════════════════════════════════════════════ */
.hero-media {
  position: relative;
  min-height: clamp(520px, 76vh, 780px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-video, .hero-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Poster sits under the video; if the video can't load, this shows.
   Always a real <img> now (front-page.php picks one of the real hero
   photos per pageview) — no more placeholder-caption text, so none of
   the text-positioning properties that used to live here apply. */
.hero-poster {
  z-index: 0;
}
.hero-video { z-index: 1; background: transparent; }
.hero-video:not([src]):not(:has(source[src])) { display: none; }

/* Darkened + evened out vs. a single fixed hero photo: with 5 real
   photos rotating in (varying a lot in brightness — a dark-plated dish
   vs. a sunlit patio shot), the text needs reliable contrast against
   any of them, not just the one this was originally tuned for. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(10,8,6,0.52) 0%, rgba(10,8,6,0.34) 30%, rgba(10,8,6,0.34) 62%, rgba(10,8,6,0.56) 100%),
    radial-gradient(115% 75% at 50% 44%, rgba(10,8,6,0.06) 0%, rgba(10,8,6,0.38) 100%);
}

.hero-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-5);
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.hero-pill {
  display: inline-block;
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 104px);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
  max-width: 26ch;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.55);
  margin: 0;
}

.hero-sub {
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.5;
  color: rgba(255,255,255,0.94);
  max-width: 54ch;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 1px 14px rgba(0,0,0,0.45);
}

.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }

/* Glass secondary button, for use over media */
.btn-glass {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255,255,255,0.94); border-color: #fff; color: var(--bf-charcoal); }
body.theme-playful .btn-glass { box-shadow: none; }

/* Live-status tape label, bottom-right over the media */
.sticker-hero {
  z-index: 4;
  bottom: 26px; left: auto; right: clamp(16px, 3vw, 40px);
  transform: rotate(-1.6deg);
  font-size: clamp(15px, 1.3vw, 18px);
  white-space: nowrap;
}
.sticker-hero [data-status-label] { color: var(--bf-charcoal); }
.sticker-hero [data-status-detail] { color: var(--fg2); }
@media (max-width: 560px) { .sticker-hero { right: 50%; transform: translateX(50%) rotate(-1.6deg); } }

/* The hero owns the top of the page, so let the nav sit tight to it */
.hero-media + .marquee { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.seasonal-head h2 .tm { font-size: 0.3em; vertical-align: top; margin-left: 0.1em; letter-spacing: 0; }
/* Centred eyebrows in centred sections */
.text-center .eyebrow, .club .eyebrow { text-align: center; }

h1.display.mx-auto, h2.display.mx-auto, .display.mx-auto { margin-inline: auto; }

/* Wordmark standing in for the club column heading */
.footer-wordmark-head { max-width: 176px; margin-bottom: var(--space-3); }

/* Build credit, bottom-right of the sub-footer */
.footer-credit { color: #8a8580; font-size: 13px; text-align: right; }
.footer-credit a { display: inline; padding: 0; font-size: 13px; color: var(--bf-cream); text-decoration: underline; text-decoration-color: #4a4540; text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--bf-yellow); text-decoration-color: var(--bf-yellow); }
@media (max-width: 760px) { .footer-credit { text-align: left; } }

/* ══════════════════════════════════════════════════════════════════
   LOCATION STATUS — tape sticker, matching the photo captions
   ══════════════════════════════════════════════════════════════════ */
.loc-sticker {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 8px;
  background: var(--bf-white);
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 1px 0 rgba(0,0,0,0.06);
  transform: rotate(-1.5deg);
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.15;
  color: var(--bf-charcoal);
  white-space: nowrap;
}
.loc-sticker b { font-weight: 700; }
.loc-sticker span[data-loc-hours] { color: var(--fg2); }
.loc-sticker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bf-warm-gray);
  flex: none;
}
[data-open="1"] .loc-sticker-dot { background: var(--bf-leaf); box-shadow: 0 0 0 3px rgba(61,163,93,0.22); }

/* ══════════════════════════════════════════════════════════════════
   SOCIAL PROOF — rating panel + per-platform breakdown
   ══════════════════════════════════════════════════════════════════ */
.proof-head { max-width: 46ch; margin-bottom: var(--space-10); }
.proof-head .lead { margin-top: var(--space-4); }

.proof-panel {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  background: var(--bf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-14);
}
@media (max-width: 800px) { .proof-panel { grid-template-columns: 1fr; } }

.proof-score {
  padding: clamp(28px, 3.4vw, 44px);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
}
@media (max-width: 800px) { .proof-score { border-right: 0; border-bottom: 1px solid var(--border); } }
.proof-score-num {
  font-family: var(--font-display);
  font-size: clamp(76px, 9vw, 128px);
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.stars { display: flex; gap: 2px; color: var(--bf-yellow-deep); }
body.theme-playful .stars { color: var(--bf-charcoal); }
.proof-score-sub { font-size: 14px; line-height: 1.5; color: var(--fg2); max-width: 26ch; }

/* Leader-dot rows, reusing the printed-menu motif */
.proof-rows { list-style: none; padding: clamp(20px, 2.6vw, 32px) clamp(24px, 3vw, 40px); display: flex; flex-direction: column; }
.proof-rows li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}
.proof-rows li:last-child { border-bottom: 0; }
.pr-name { font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 21px); text-transform: uppercase; letter-spacing: 0.01em; color: var(--fg1); }
.pr-dots { flex: 1; height: 0; border-bottom: 1.5px dotted var(--border-strong); transform: translateY(-4px); min-width: 20px; }
.pr-val { font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 21px); color: var(--secondary); letter-spacing: 0; white-space: nowrap; }
.pr-val em { font-family: var(--font-body); font-style: normal; font-size: 13px; font-weight: 400; color: var(--fg2); margin-left: 7px; letter-spacing: 0; }

/* Press — uniform type, no invented logo lockups */
.press-strip {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: var(--space-8);
}
@media (max-width: 760px) { .press-strip { grid-template-columns: 1fr; gap: var(--space-4); } }
.press-label {
  font-family: var(--font-script);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--secondary);
  white-space: nowrap;
}
.press-names {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px clamp(20px, 3vw, 40px);
}
.press-names li {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.25vw, 17px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg2);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   LOCATION DETAIL PAGES
   ══════════════════════════════════════════════════════════════════ */
.lp-crumbs { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--fg2); margin-bottom: var(--space-8); flex-wrap: wrap; }
.lp-crumbs a { color: var(--fg2); text-decoration: none; }
.lp-crumbs a:hover { color: var(--accent); text-decoration: underline; }
.lp-crumbs span[aria-hidden] { color: var(--border-strong); }
.lp-crumbs [aria-current] { color: var(--fg1); font-weight: 700; }

.lp-hero { padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 88px); }
/* Photo column widened (was 1.05fr / 0.95fr). The copy column loses
   what the photo gains, which is why the hero action row below is
   compacted — four buttons have to fit the narrower column on one
   line. */
.lp-hero-grid { display: grid; grid-template-columns: 1fr 1.18fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
@media (max-width: 900px) { .lp-hero-grid { grid-template-columns: 1fr; } }
.lp-hero h1 { font-size: clamp(34px, 4.6vw, 68px); line-height: 1.0; text-transform: uppercase; max-width: 20ch; margin-bottom: var(--space-4); }
.lp-hero .lead { max-width: 48ch; }
/* The aspect-ratio has to sit on the CONTAINER, not just the child.
   berryfresh_the_photo_placeholder() emits a real <img> carrying an
   inline height:100% (which it needs inside fixed-ratio boxes like
   .loc-photo). Inline styles beat the height:auto below, so without a
   definite height here that 100% resolves against an indefinite parent
   and the image collapses to zero. Giving the wrapper the same 4/3 it
   was already imposing on the child fixes every hero that uses a real
   photo — location pages included — and changes nothing for the
   placeholder <div> path. */
/* 16/9, not the 4/3 this used to force: every real photo we have is wider
   than 4/3 — the location storefronts are natively 16/9 (1672×941) and the
   supplied page-hero banners are ~2.1/1 — so a 4/3 box was cropping the
   sides off all of them. 16/9 fits the location shots exactly and trims
   the banners only slightly. */
/* width:100% + min-width:0 are load-bearing, not tidying. A grid item
   defaults to min-width:auto, so with only an aspect-ratio set this box
   resolved its height first and then derived a width from it — on
   /locations/ that came out at 1307px inside an 835px column, which
   overflowed the page and squeezed the headline into a vertical stack.
   Pinning the width makes the aspect-ratio drive the height instead. */
.lp-hero-photo { position: relative; aspect-ratio: 16/9; width: 100%; min-width: 0; }
.lp-hero-grid > * { min-width: 0; }
.lp-hero-photo .photo,
.lp-hero-photo img { aspect-ratio: 16/9; border-radius: var(--radius-lg); width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-quickfacts { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-6); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border); justify-content: start; }
@media (max-width: 620px) { .lp-quickfacts { grid-template-columns: 1fr 1fr; } }
.lp-label { display: block; font-family: var(--font-script); font-size: 18px; color: var(--secondary); margin-bottom: 2px; }
.lp-value { display: block; font-size: 15px; line-height: 1.5; color: var(--fg1); }

.lp-two { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
@media (max-width: 860px) { .lp-two { grid-template-columns: 1fr; } }

/* Signature picks — leader dots, same motif as the printed menu */
.lp-picks { list-style: none; padding: 0; margin: 0; }
.lp-picks li { padding: var(--space-5) 0; border-bottom: 1px solid var(--border); }
.lp-picks li:first-child { padding-top: 0; }
.lp-picks li:last-child { border-bottom: 0; }
.lp-pick-top { display: flex; align-items: baseline; gap: 10px; }
.lp-pick-name { font-family: var(--font-display); font-size: clamp(19px, 1.7vw, 25px); text-transform: uppercase; color: var(--fg1); }
.lp-dots { flex: 1; height: 0; border-bottom: 1.5px dotted var(--border-strong); transform: translateY(-5px); min-width: 20px; }
.lp-pick-price { font-family: var(--font-display); font-size: clamp(19px, 1.7vw, 25px); color: var(--secondary); letter-spacing: 0; }
.lp-pick-desc { font-size: 15px; color: var(--fg2); margin-top: 6px; max-width: 54ch; }

.lp-find { background: var(--bf-cream); }
.lp-map .photo { aspect-ratio: 16/10; border-radius: var(--radius-lg); }
.lp-map-embed { aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.lp-map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.lp-map-note { font-size: 13px; color: var(--fg2); margin-top: var(--space-3); }
.lp-map-note a { color: var(--accent); font-weight: 700; }
.lp-map-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

.lp-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 760px) { .lp-reviews { grid-template-columns: 1fr; } }

/* FAQ — the AEO surface */
.lp-faq-wrap { background: var(--bf-cream); }
.lp-faq { max-width: 76ch; border-top: 1px solid var(--border); }
.lp-faq details { border-bottom: 1px solid var(--border); }
.lp-faq summary {
  cursor: pointer; list-style: none;
  padding: var(--space-5) var(--space-8) var(--space-5) 0;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--fg1);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 24px; font-weight: 400; color: var(--secondary); line-height: 1;
}
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq summary:hover { color: var(--accent); }
.lp-faq p { padding: 0 var(--space-8) var(--space-6) 0; color: var(--fg2); max-width: 68ch; }

/* Sibling cafes — internal linking */
.lp-others { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .lp-others { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .lp-others { grid-template-columns: 1fr; } }
.lp-other {
  display: grid; gap: 4px;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bf-white);
  text-decoration: none;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.lp-other:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.lp-other-num { font-family: var(--font-display); font-size: 15px; color: var(--secondary); letter-spacing: 0; }
.lp-other-name { font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 23px); text-transform: uppercase; color: var(--fg1); line-height: 1.05; }
.lp-other-meta { font-size: 13px; color: var(--fg2); }
.lp-other-go { font-size: 16px; color: var(--accent); margin-top: 6px; }
.loc-h2-link { color: inherit; text-decoration: none; }
.loc-h2-link:hover { color: var(--accent); }
.footer-loc-city a { color: inherit; text-decoration: none; padding: 0; font-size: inherit; }
.footer-loc-city a:hover { color: var(--bf-yellow); }

/* ══════════════════════════════════════════════════════════════════
   WAITLIST — modal + inline card
   ══════════════════════════════════════════════════════════════════ */
.wl-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20,16,10,0.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: clamp(12px, 3vw, 32px); overflow-y: auto; }
.wl-overlay[hidden] { display: none; }
.wl-panel { position: relative; width: min(720px, 100%); background: var(--bf-paper); border-radius: var(--radius-lg); box-shadow: 0 28px 70px rgba(0,0,0,0.4); padding: clamp(24px, 4vw, 44px); max-height: 100%; overflow-y: auto; animation: wlIn 260ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes wlIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
@media (prefers-reduced-motion: reduce) { .wl-panel { animation: none; } }
.wl-close { position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; font-size: 28px; line-height: 1; color: var(--fg2); cursor: pointer; }
.wl-close:hover { background: var(--bf-cream-2); color: var(--fg1); }
.wl-panel h2 { font-size: clamp(26px, 3.2vw, 40px); text-transform: uppercase; line-height: 1.02; margin-bottom: var(--space-3); }
.wl-intro { font-size: 15px; line-height: 1.55; color: var(--fg2); max-width: 54ch; }

.wl-field { border: 0; padding: 0; margin: var(--space-6) 0 0; }
.wl-legend { display: block; font-family: var(--font-script); font-size: 19px; color: var(--secondary); margin-bottom: var(--space-3); padding: 0; }

.wl-cafes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.wl-cafe { display: grid; gap: 2px; text-align: left; padding: 11px 13px; background: var(--bf-white); border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.wl-cafe:hover { border-color: var(--accent); }
.wl-cafe.is-on { border-color: var(--accent); background: #EAF2F9; }
.wl-cafe-name { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; color: var(--fg1); line-height: 1.1; }
.wl-cafe-note { font-size: 12px; color: var(--fg2); }
.wl-cafe-wait { font-size: 12px; font-weight: 700; color: var(--bf-leaf-deep); margin-top: 3px; }
.wl-cafe-wait.is-busy { color: var(--bf-raspberry-dp); }
.wl-cafe-wait.is-off { color: var(--fg2); }

.wl-party { display: flex; gap: 7px; flex-wrap: wrap; }
.wl-size { min-width: 46px; height: 46px; padding: 0 12px; background: var(--bf-white); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 17px; color: var(--fg1); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.wl-size:hover { border-color: var(--accent); }
.wl-size.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.wl-wait { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); align-items: center; margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); background: var(--bf-white); border: 1px solid var(--border); border-left: 4px solid var(--bf-leaf); border-radius: var(--radius-sm); }
.wl-wait.is-off { border-left-color: var(--bf-warm-gray); }
.wl-wait-dot { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--bf-leaf); box-shadow: 0 0 0 4px rgba(61,163,93,0.2); }
.wl-wait.is-off .wl-wait-dot { background: var(--bf-warm-gray); box-shadow: none; }
.wl-wait-main { font-size: 16px; color: var(--fg1); }
.wl-wait-main b { font-family: var(--font-display); font-size: 19px; letter-spacing: 0; }
.wl-wait-sub { font-size: 13px; color: var(--fg2); }

.wl-form { margin-top: var(--space-6); }
.wl-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 520px) { .wl-row { grid-template-columns: 1fr; } }
.wl-input-wrap { display: block; }
.wl-input-wrap input { width: 100%; margin-top: 2px; padding: 13px 15px; font-family: var(--font-body); font-size: 16px; color: var(--fg1); background: var(--bf-white); border: 1.5px solid var(--border); border-radius: var(--radius-sm); }
.wl-input-wrap input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(28,116,176,0.18); }
.wl-error { margin-top: var(--space-3); font-size: 14px; font-weight: 700; color: var(--bf-raspberry-dp); }
.wl-submit { margin-top: var(--space-4); width: 100%; justify-content: center; }
.wl-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.wl-fine { margin-top: var(--space-4); font-size: 12.5px; line-height: 1.5; color: var(--fg2); }

.wl-done { text-align: left; }
.wl-receipt { display: grid; gap: 0; margin: var(--space-6) 0; border-top: 1px solid var(--border); }
.wl-receipt > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--border); }
.wl-receipt-k { font-size: 14px; color: var(--fg2); }
.wl-receipt-v { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; color: var(--fg1); letter-spacing: 0.01em; }

/* Inline "how long is the wait" band */
.waitlist-band { background: var(--bf-charcoal); color: var(--bf-cream); }
.waitlist-inner { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 4vw, 56px); align-items: center; }
@media (max-width: 800px) { .waitlist-inner { grid-template-columns: 1fr; } }
.waitlist-band h2 { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 44px); text-transform: uppercase; color: var(--bf-white); line-height: 1.02; }
.waitlist-band .eyebrow { color: var(--bf-yellow); }
.waitlist-band p { color: #bcb6ad; font-size: clamp(14px, 1.1vw, 16px); margin-top: var(--space-3); max-width: 50ch; }
.waitlist-now { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: clamp(20px, 2.6vw, 30px); background: #34393C; border-radius: var(--radius-md); min-width: 260px; }
.waitlist-now-label { font-family: var(--font-script); font-size: 19px; color: var(--bf-yellow); }
.waitlist-now-value { font-family: var(--font-display); font-size: clamp(38px, 4.6vw, 62px); line-height: 0.9; color: var(--bf-white); letter-spacing: 0; }
[data-state="busy"] .waitlist-now-value { color: var(--bf-yellow); }
.waitlist-now-detail { font-size: 13px; color: #bcb6ad; }
.lp-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }
@media (max-width: 520px) { .lp-actions { gap: var(--space-4); } .lp-actions .btn { width: 100%; justify-content: center; } }


/* ══════════════════════════════════════════════════════════════════
   LOCATION PAGE — Aug 2026 layout pass
   Components and their x/y arrangement follow the client's wireframe;
   every colour, font, size and radius below is an existing theme token,
   because the wireframe was supplied as a layout guide only.
   ══════════════════════════════════════════════════════════════════ */

/* Yellow action button. The palette already has --highlight; it just had
   no button variant, and the wireframe puts "Order now" and the promo
   CTA on it. Charcoal text, not white: yellow/white fails AA (CLAUDE.md
   4.3's note on which tone carries interactive text). */
.btn-highlight {
  background: var(--highlight);
  border-color: var(--highlight);
  color: var(--bf-charcoal);
}
.btn-highlight:hover { background: var(--bf-yellow-deep); border-color: var(--bf-yellow-deep); color: var(--bf-charcoal); }

/* ── Hero quickfacts as bordered cards ── */
.lp-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-7);
}
@media (max-width: 620px) { .lp-facts { grid-template-columns: 1fr; } }
.lp-fact {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bf-white);
}
.lp-fact-icon { display: block; color: var(--accent); margin-bottom: 6px; }
.lp-fact .lp-label { font-size: 15px; }
.lp-fact .lp-value { font-size: 14px; line-height: 1.45; }

/* ── Hero action row: four buttons, one line ──
   The row carries Join waitlist / Get directions / Order now / Catering
   menu. At the base .btn size that overflows the copy column, so this
   trims type and padding rather than letting it wrap to three ragged
   rows. Kept at 12px/700 uppercase — the theme's smallest existing button
   type — not smaller. Below 520px the existing full-width rule takes over,
   so touch targets on mobile are unaffected. */
.lp-hero .lp-actions { gap: var(--space-2); flex-wrap: wrap; }
.lp-hero .lp-actions .btn {
  padding: 11px 15px;
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  /* Below the desktop nav cutover the column narrows again — let the row
     wrap here rather than shrinking type any further. */
  .lp-hero .lp-actions .btn { padding: 11px 16px; font-size: 13px; }
}

/* ── Hero photo overlays ── */
.lp-rating {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  display: grid; gap: 2px;
  padding: 10px var(--space-4);
  background: var(--bf-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-width: 62%;
}
.lp-rating b { font-family: var(--font-display); font-size: 20px; line-height: 1; color: var(--fg1); letter-spacing: 0; }
.lp-rating i { font-style: normal; font-size: 11px; color: var(--fg2); line-height: 1.3; }
.lp-hero-chip {
  position: absolute; right: var(--space-4); bottom: var(--space-4);
  padding: 5px 12px;
  background: rgba(43,48,51,0.82);
  color: var(--bf-white);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  backdrop-filter: blur(6px);
}

/* ── What's Fresh: the homepage seasonal component, reused ──
   .seasonal carries the chalkboard ground, type and tab behaviour, so
   the location version inherits all of it and only needs the head row
   rearranged (title left, "Full menu" right) per the wireframe. */
.lp-fresh-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6);
  max-width: none;
}
.lp-fresh-head h2 { max-width: 18ch; }
.lp-fresh-full { color: var(--bf-yellow); white-space: nowrap; }
.lp-fresh-full:hover { color: var(--bf-white); }
@media (max-width: 700px) {
  .lp-fresh-head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ── Reviews ── */
.lp-reviews-wrap { background: var(--bf-cream); }
.lp-reviews-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); margin-bottom: var(--space-8);
}
@media (max-width: 760px) { .lp-reviews-head { flex-direction: column; align-items: flex-start; } }
.lp-reviews-agg {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.lp-reviews-agg b { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--fg1); letter-spacing: 0; }
.lp-reviews-agg i { font-style: normal; font-size: 11px; color: var(--fg2); line-height: 1.3; }

.lp-review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1040px) { .lp-review-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lp-review-grid { grid-template-columns: 1fr; } }
.lp-review {
  margin: 0;
  padding: var(--space-5);
  background: var(--bf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid; gap: 6px;
}
.lp-review-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.lp-review-author { font-weight: 700; color: var(--fg1); font-size: 14px; }
.lp-review-src {
  font-size: 9px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--fg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  flex-shrink: 0;
}
.lp-review-date { font-size: 11px; color: var(--fg2); }
.lp-review p { font-size: 13px; line-height: 1.55; color: var(--fg2); margin: 4px 0 0; }
.lp-reviews-all { text-align: center; margin-top: var(--space-7); }

/* ── Promotion band ──
   The wireframe's diagonal charcoal/yellow split. The wedge is a clip-path
   on a pseudo-element so it degrades to a clean two-tone block wherever
   clip-path isn't supported, rather than losing the yellow entirely. */
.lp-promo { background: var(--bf-charcoal); color: var(--bf-cream); position: relative; overflow: hidden; }
.lp-promo::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: var(--highlight);
  /* The wedge has to clear the copy column entirely — body text
     straddling the charcoal/yellow edge is unreadable on both sides.
     These stops keep the diagonal well right of the paragraph while
     still putting the offer card fully on yellow. */
  clip-path: polygon(52% 0, 100% 0, 100% 100%, 42% 100%);
}
@media (max-width: 860px) { .lp-promo::before { clip-path: polygon(0 62%, 100% 48%, 100% 100%, 0 100%); } }
.lp-promo > .container { position: relative; z-index: 1; }
.lp-promo-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 860px) { .lp-promo-inner { grid-template-columns: 1fr; } }
.lp-promo-copy h2 { color: var(--bf-white); margin: var(--space-3) 0 var(--space-4); max-width: 12ch; line-height: 1.04; }
.lp-promo-copy p { color: #bcb6ad; max-width: 42ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; }
.lp-promo-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--secondary);
  color: var(--bf-white);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
}
.lp-promo-card {
  display: grid; gap: var(--space-3);
  padding: var(--space-7);
  background: var(--bf-charcoal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  justify-items: center;
}
.lp-promo-offer { font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); color: var(--highlight); line-height: 1; }
.lp-promo-offer-sub { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: #bcb6ad; }
.lp-promo-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: 6px; text-align: left; }
.lp-promo-list li { font-size: 13px; color: var(--bf-cream); padding-left: 20px; position: relative; }
.lp-promo-list li::before { content: "✓"; position: absolute; left: 0; color: var(--bf-leaf); font-weight: 700; }
.lp-promo-card .btn { width: 100%; justify-content: center; margin-top: var(--space-3); }
.lp-promo-fine { font-size: 10px; color: rgba(255,255,255,0.62); line-height: 1.4; }

/* ── Map info card ── */
.lp-map { position: relative; }
.lp-map-card {
  position: absolute; left: var(--space-4); bottom: calc(var(--space-4) + 28px);
  display: grid; gap: 2px;
  padding: 10px var(--space-4);
  background: var(--bf-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-width: 78%;
}
.lp-map-card b { font-size: 13px; color: var(--fg1); }
.lp-map-card span { font-size: 11px; color: var(--fg2); }
.lp-map-card-live { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.lp-map-card-live b { font-size: 11px; }
.lp-map-card-live i { font-style: normal; color: var(--fg2); }

/* ── FAQ centred, per the wireframe ──
   Position only: the accordion keeps its own type, borders and behaviour. */
.lp-faq-wrap .eyebrow,
.lp-faq-wrap #faq-title { text-align: center; }
.lp-faq-wrap .lp-faq { margin-left: auto; margin-right: auto; }

/* ── Other cafes: address + hours per the wireframe ── */
.lp-other-hours {
  font-size: 12px; font-weight: 700; color: var(--accent);
  letter-spacing: 0.03em; margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   CATERING
   ══════════════════════════════════════════════════════════════════ */
.cat-quickfacts { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-6); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border); justify-content: start; }
@media (max-width: 620px) { .cat-quickfacts { grid-template-columns: 1fr 1fr; } }

/* Anchor target for the hero's "Order catering" button. Without this the
   section lands at the very top of the viewport, i.e. underneath the
   sticky .nav — same problem /breakfast-menu's TOC pills solve, minus
   the second stacked bar. --nav-height is measured and set by nav.js. */
.cat-inquiry-section { scroll-margin-top: calc(var(--nav-height, 72px) + var(--space-6)); }

/* Per-location catering inquiry cards (/catering-menu).

   Five columns, not the four .lp-others uses: with exactly five cafes a
   four-up grid strands West Palm Beach alone on a second row, which is
   what this replaced. The photo does the work of telling the five cards
   apart — city names alone all read the same at this width. */
.cat-inquiry { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin-top: var(--space-8); }
@media (max-width: 1080px) { .cat-inquiry { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cat-inquiry { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px)  { .cat-inquiry { grid-template-columns: 1fr; } }
.cat-inquiry-card {
  display: flex; flex-direction: column;
  background: var(--bf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.cat-inquiry-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cat-inquiry-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-warm); }
.cat-inquiry-photo img, .cat-inquiry-photo .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-inquiry-card:hover .cat-inquiry-photo img { transform: scale(1.03); }
.cat-inquiry-photo img { transition: transform var(--t-med, 300ms) ease; }
.cat-inquiry-body { display: grid; gap: 4px; padding: var(--space-5); }
.cat-inquiry-name { font-family: var(--font-display); font-size: clamp(17px, 1.4vw, 21px); text-transform: uppercase; color: var(--fg1); line-height: 1.05; }
.cat-inquiry-cta { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; }
.cat-inquiry-phone { font-size: 12px; color: var(--fg3); }

.cat-packages { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1040px) { .cat-packages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cat-packages { grid-template-columns: 1fr; } }
.cat-pkg { position: relative; overflow: visible; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--bf-white); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.cat-pkg:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cat-pkg.is-featured { border-color: var(--accent); border-width: 2px; }
.cat-pkg .tag-signature { position: absolute; top: -12px; right: var(--space-5); align-self: auto; margin: 0; box-shadow: var(--shadow-sm); }
.cat-pkg-num { font-family: var(--font-display); font-size: 14px; color: var(--secondary); letter-spacing: 0.06em; }
.cat-pkg h3 { font-family: var(--font-display); font-size: clamp(21px, 1.9vw, 27px); text-transform: uppercase; line-height: 1.04; color: var(--fg1); }
.cat-pkg-price { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 32px); color: var(--secondary); letter-spacing: 0; line-height: 1; }
.cat-pkg-price em { font-family: var(--font-body); font-style: normal; font-size: 13px; font-weight: 400; color: var(--fg2); letter-spacing: 0; margin-left: 4px; }
.cat-pkg-desc { font-size: 14px; line-height: 1.5; color: var(--fg2); }
.cat-pkg-list { list-style: none; padding: var(--space-4) 0 0; margin: 0; display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--border); }
.cat-pkg-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.45; color: var(--fg1); }
.cat-pkg-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--bf-yellow); }
.cat-pkg-tag { margin-top: auto; padding-top: var(--space-4); font-family: var(--font-script); font-size: 17px; color: var(--fg2); }

.cat-quote-wrap { background: var(--bf-cream); }
.cat-quote { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
@media (max-width: 880px) { .cat-quote { grid-template-columns: 1fr; } }
.cat-quote-contact { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.cat-quote-contact .link { font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); letter-spacing: 0; }
.cat-form { background: var(--bf-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 36px); }
.cat-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
@media (max-width: 520px) { .cat-row { grid-template-columns: 1fr; } }
.cat-form .wl-input-wrap { display: block; margin-bottom: var(--space-3); }
.cat-form select, .cat-form textarea { width: 100%; margin-top: 2px; padding: 13px 15px; font-family: var(--font-body); font-size: 16px; color: var(--fg1); background: var(--bf-white); border: 1.5px solid var(--border); border-radius: var(--radius-sm); }
.cat-form textarea { resize: vertical; }
.cat-form select:focus-visible, .cat-form textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(28,116,176,0.18); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cat-chip { padding: 9px 14px; font-family: var(--font-body); font-size: 14px; color: var(--fg1); background: var(--bf-white); border: 1.5px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.cat-chip:hover { border-color: var(--accent); }
.cat-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-done { text-align: left; }
.cat-done h3 { text-transform: uppercase; margin-top: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════
   TAG — signature / featured badge
   ══════════════════════════════════════════════════════════════════ */
.tag-signature { display: inline-block; padding: 5px 12px 6px; background: var(--bf-raspberry); color: #fff; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.1; border-radius: var(--radius-pill); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════
   AWARD CARD — [bf_awards], shared by /recipe-for-success and /press
   ══════════════════════════════════════════════════════════════════ */
.award-card { display: flex; flex-direction: column; align-items: flex-start; }
.award-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--surface-warm);
  color: var(--bf-leaf-deep);
}

/* ══════════════════════════════════════════════════════════════════
   AUG 2026 LAYOUT PASS — shared components
   Introduced together for the /fundraising, /about, /press and
   /employment redesigns. Defined once here (rather than per page) so
   the four pages stay visually consistent and a change lands in all of
   them at once. Every value is an existing token.
   ══════════════════════════════════════════════════════════════════ */

/* Short accent rule under a section heading. Sits directly after the
   h2 in source order, so it reads as part of the heading, not a divider
   between sections. */
.rule-under { width: 48px; height: 3px; background: var(--bf-leaf-deep); margin: var(--space-3) 0 var(--space-2); }
.rule-under.is-red    { background: var(--secondary); }
.rule-under.is-yellow { background: var(--bf-yellow-deep); }

/* A heading preceded by a circular outlined icon. */
.head-icon-row { display: flex; align-items: center; gap: var(--space-5); }
.head-icon {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.head-icon.is-yellow { color: var(--bf-yellow-deep); }
.head-icon.is-red    { color: var(--secondary); }
.head-icon.is-green  { color: var(--bf-leaf-deep); }
@media (max-width: 560px) { .head-icon { width: 48px; height: 48px; } }

/* Card whose heading carries a small circular icon badge. */
.icon-card-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.icon-card-head h3 { margin: 0; }
.icon-card-badge {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  color: var(--accent);
}
.icon-card-badge.is-green { color: var(--bf-leaf-deep); }

/* Compact "call this cafe" cards — used where a page's next step is a
   phone call to a specific location (fundraising, careers). */
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 1080px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .contact-cards { grid-template-columns: 1fr; } }
.contact-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.contact-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-warm);
  color: var(--bf-leaf-deep);
}
.contact-card-name { display: block; font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg1); line-height: 1.1; }
.contact-card-num  { display: block; font-size: 14px; color: var(--fg2); margin-top: 3px; }

/* A line of body copy led by a small icon (email, hours, etc.). */
.icon-note { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--fg2); margin-top: var(--space-4); max-width: 66ch; }
.icon-note svg { color: var(--bf-leaf-deep); flex-shrink: 0; margin-top: 3px; }

/* Two-column value list with circular outlined icons, divided by rules.
   Used for the careers "what we stand for" set. */
.value-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-10); }
@media (max-width: 860px) { .value-list { grid-template-columns: 1fr; } }
.value-item { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--border); }
.value-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.value-icon.is-green  { color: var(--bf-leaf-deep); }
.value-icon.is-yellow { color: var(--bf-yellow-deep); }
.value-icon.is-blue   { color: var(--accent); }
.value-item p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg1); }

/* Bordered callout with a leading icon — a single emphasised aside. */
.callout {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.callout svg { flex-shrink: 0; margin-top: 2px; }
.callout p { margin: 0; color: var(--fg1); line-height: 1.55; }

/* Numbered pillar cards, side by side and rule-separated (about page). */
.pillar-row { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); overflow: hidden; }
@media (max-width: 860px) { .pillar-row { grid-template-columns: 1fr; } }
.pillar-cell { padding: var(--space-8) var(--space-6); text-align: center; border-right: 1px solid var(--border); }
.pillar-cell:last-child { border-right: 0; }
@media (max-width: 860px) { .pillar-cell { border-right: 0; border-bottom: 1px solid var(--border); } .pillar-cell:last-child { border-bottom: 0; } }
.pillar-cell .pillar-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto var(--space-4); border-radius: 50%; border: 2px solid currentColor; }
.pillar-cell .pillar-num { font-family: var(--font-display); font-size: 34px; line-height: 1; letter-spacing: 0; }
.pillar-cell .pillar-title { font-weight: 700; font-size: 16px; margin-top: var(--space-2); }
.pillar-cell p { margin-top: var(--space-3); font-size: 14.5px; line-height: 1.55; color: var(--fg2); }
.pillar-cell.is-green  { --pc: var(--bf-leaf-deep); }
.pillar-cell.is-yellow { --pc: var(--bf-yellow-deep); }
.pillar-cell.is-blue   { --pc: var(--accent); }
.pillar-cell .pillar-icon, .pillar-cell .pillar-num, .pillar-cell .pillar-title { color: var(--pc, var(--accent)); }

/* Press coverage as a card grid. The thumbnail is optional: no article
   image is invented when the client hasn't supplied one — the card just
   leads with its headline instead. */
.press-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width: 1080px) { .press-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .press-grid { grid-template-columns: 1fr; } }
.press-card {
  display: flex; flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.press-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.press-card-figure { aspect-ratio: 16/10; overflow: hidden; background: var(--surface-warm); }
.press-card-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.press-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.press-card-headline { font-family: var(--font-display); font-size: 18px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; color: var(--fg1); }
.press-card-meta { font-size: 13.5px; color: var(--fg2); }
.press-card-go { margin-top: auto; padding-top: var(--space-3); color: var(--accent); font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════
   QUOTE CARD — reviews and testimonials
   ══════════════════════════════════════════════════════════════════ */
.quote-card { position: relative; background: var(--bf-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); padding-top: clamp(30px, 3.4vw, 44px); }
.quote-card::before { content: "\201C"; position: absolute; top: clamp(4px, 0.8vw, 10px); left: clamp(18px, 2.4vw, 28px); font-family: var(--font-display); font-size: clamp(56px, 6vw, 82px); line-height: 1; color: var(--bf-raspberry); opacity: 0.9; pointer-events: none; }
.quote-card > p { position: relative; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--fg1); text-wrap: pretty; }
.quote-card > footer { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: 13.5px; color: var(--fg2); }
.quote-card > footer b { font-weight: 700; color: var(--fg1); }

/* ── WHAT'S SPECIAL — the recurring weekday deals, rendered by
   berryfresh_the_whats_special() on the homepage and all five location
   pages. Deliberately a <ul> of cards rather than the single-offer
   .lp-promo band: these are several concurrent deals of equal weight, so
   nothing here should out-shout its neighbours. Auto-fit rather than a
   fixed grid-3 because the deal count is client-editable and a hardcoded
   three columns leaves a lone orphan card whenever they run four. ── */
.whats-special { background: var(--surface-warm); }
.whats-special-head { max-width: 62ch; }
.whats-special-head .lead { margin-top: var(--space-3); color: var(--fg2); }

.special-grid {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.special-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: 4px solid var(--secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
}

.special-when {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--bf-sky-deep);
}
.special-name {
  font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 26px);
  text-transform: uppercase; line-height: 1.05; letter-spacing: 0.005em;
  margin: 0;
}
.special-price {
  font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1; color: var(--secondary);
}
.special-detail { font-size: 15px; line-height: 1.55; color: var(--fg2); margin: 0; }
.special-fine { display: block; margin-top: var(--space-5); font-size: 13px; color: var(--fg2); }

body.theme-playful .special-card {
  border: 3px solid var(--bf-charcoal); border-top-width: 3px;
  box-shadow: 6px 6px 0 var(--bf-charcoal);
}

/* ══════════════════════════════════════════════════════════════════
   AWARDS BAND — [bf_awards mode="banner"]
   Added Aug 2026 to the client's supplied artwork: two-tone display
   headline, blue subline, five gold stars, one line of detail.
   Lives in site.css rather than front-page.css because the shortcode
   is global and /press or /recipe-for-success may adopt this treatment.
   ══════════════════════════════════════════════════════════════════ */

.aw-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  text-align: center;
}

.aw-item { max-width: 34ch; margin-inline: auto; }

.aw-title {
  margin: 0;
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(21px, 2.5vw, 30px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--fg1, var(--bf-charcoal));
  text-wrap: balance;
  /* Reserve two lines so the sublines, stars and detail stay on a shared
     baseline across the row even when one award's title fits on one. */
  min-height: 2.12em;
}

@media (max-width: 620px) { .aw-title { min-height: 0; } }

/* The accent half of the headline. A span rather than a second heading
   so the award still reads as one phrase to a screen reader. */
.aw-accent { color: var(--bf-raspberry, #D33344); }

.aw-sub {
  margin-top: var(--space-2);
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(15px, 1.7vw, 19px);
  color: var(--bf-sky, #48A1E0);
}

.aw-sub a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.aw-sub a:hover { color: var(--accent, var(--bf-sky-deep)); }

.aw-stars {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: var(--space-3);
  color: var(--bf-yellow, #F0B357);
}

.aw-detail {
  margin: var(--space-3) 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg2, var(--bf-warm-gray));
}

/* ══════════════════════════════════════════════════════════════════
   HOW WE SHOW UP (the ten values)
   Moved out of about.css Aug 2026: /employment renders the same grid
   via berryfresh_the_values_grid(), and about.css is only enqueued on
   /about. One copy here, both pages styled.
   ══════════════════════════════════════════════════════════════════ */
/* Built to the client's Aug 2026 comp. The four tones are taken from
   the supplied icon artwork rather than the theme's brand tokens: the
   icons are hand-drawn in a softer palette (#5d855e vs --bf-leaf's
   #3DA35D, and so on), and a number badge in the brighter theme green
   sitting beside a muted green icon reads as a mistake. Matching the
   art is the point here. */

.vals-section {
  --val-green:  #5d855e;
  --val-blue:   #3c5e98;
  --val-red:    #ab4039;
  --val-yellow: #ecb454;
  background: var(--surface-warm, var(--bf-cream));
}

.vals-head { text-align: center; max-width: 46ch; margin-inline: auto; }
.vals-head .display { text-wrap: nowrap; }
@media (max-width: 560px) { .vals-head .display { text-wrap: balance; } }
.vals-head .head-icon { margin: 0 auto var(--space-4); }
.vals-head .rule-under { margin-top: var(--space-3); }

.vals-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
  color: var(--fg2, var(--bf-warm-gray));
  font-size: clamp(15px, 1.7vw, 17px);
}

.vals-sub svg { flex: none; color: var(--val-blue); }

/* 5 x 2 as in the comp, stepping down rather than reflowing to ragged
   rows: 5 -> 3 -> 2 -> 1. */
.vals-grid {
  list-style: none;
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  counter-reset: none;
}

@media (max-width: 1100px) { .vals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .vals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px)  { .vals-grid { grid-template-columns: 1fr; } }

.vals-item {
  position: relative;
  text-align: center;
  padding: clamp(18px, 2.2vw, 28px) clamp(12px, 1.6vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hairline rules between cells, drawn with pseudo-elements so the outer
   edges of the grid stay open the way the comp has them. */
.vals-item::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  border-left: 1px solid var(--border, var(--bf-line));
}

.vals-grid > .vals-item:nth-child(5n + 1)::before { border-left: 0; }

@media (max-width: 1100px) {
  .vals-grid > .vals-item:nth-child(5n + 1)::before { border-left: 1px solid var(--border, var(--bf-line)); }
  .vals-grid > .vals-item:nth-child(3n + 1)::before { border-left: 0; }
}
@media (max-width: 760px) {
  .vals-grid > .vals-item:nth-child(3n + 1)::before { border-left: 1px solid var(--border, var(--bf-line)); }
  .vals-grid > .vals-item:nth-child(2n + 1)::before { border-left: 0; }
}
@media (max-width: 440px) { .vals-item::before { border-left: 0 !important; } }

/* Rule between the two rows. */
.vals-grid > .vals-item:nth-child(n + 6) { border-top: 1px solid var(--border, var(--bf-line)); }

@media (max-width: 1100px) {
  .vals-grid > .vals-item:nth-child(n + 6) { border-top: 0; }
  .vals-grid > .vals-item:nth-child(n + 4) { border-top: 1px solid var(--border, var(--bf-line)); }
}
@media (max-width: 760px) {
  .vals-grid > .vals-item:nth-child(n + 4) { border-top: 0; }
  .vals-grid > .vals-item:nth-child(n + 3) { border-top: 1px solid var(--border, var(--bf-line)); }
}
@media (max-width: 440px) {
  .vals-grid > .vals-item:nth-child(n + 3) { border-top: 0; }
  .vals-grid > .vals-item + .vals-item { border-top: 1px solid var(--border, var(--bf-line)); }
}

.vals-icon {
  width: clamp(64px, 7vw, 92px);
  height: auto;
  margin-bottom: var(--space-4);
}

.vals-title {
  display: flex;
  align-items: center;
  justify-content: center;
  /* nowrap keeps the number beside its title the way the comp has it —
     with wrap, the longer labels ("Everyone gets respect.") pushed the
     badge onto a line of its own. The label itself still wraps. */
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(15px, 1.55vw, 18px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid currentColor;
}


.vals-num {
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--tone, var(--fg1));
  display: grid;
  place-items: center;
  font-family: var(--font-body, "Public Sans", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* The glyph punches out to the section background; the disc behind it is
   the tone. Both come from --tone rather than currentColor, which would
   otherwise collapse to a single colour and hide the number. */
.vals-num { color: var(--surface-warm, var(--bf-cream)); }

.vals-item.is-green  { --tone: var(--val-green); }
.vals-item.is-blue   { --tone: var(--val-blue); }
.vals-item.is-red    { --tone: var(--val-red); }
.vals-item.is-yellow { --tone: var(--val-yellow); }

.vals-title { color: var(--tone, var(--fg1)); }

.vals-text {
  margin: var(--space-4) 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg2, var(--bf-warm-gray));
  max-width: 26ch;
}

/* ── CAREERS BAND ─────────────────────────────────────────────────── */

.vals-careers {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.1fr) minmax(0, 0.6fr);
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--accent, var(--bf-sky-deep));
  border-radius: var(--radius-lg, 18px);
  background: var(--bg-elevated, #fff);
}

@media (max-width: 980px) { .vals-careers { grid-template-columns: 1fr; text-align: center; } }

/* Same taped-polaroid language as the hero, tilted the other way. */
.vals-careers-photo {
  background: #fff;
  padding: 8px 8px 10px;
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(43, 48, 51, 0.18);
  transform: rotate(-2deg);
}

@media (max-width: 980px) { .vals-careers-photo { max-width: 320px; margin-inline: auto; } }

.vals-careers-photo > span {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bf-cream-2, #F3EAD8);
}

.vals-careers-photo img,
.vals-careers-photo .photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vals-careers-copy h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.08;
  color: var(--fg1, var(--bf-charcoal));
}

.vals-careers-copy h3 em {
  font-family: var(--font-script, Caveat, cursive);
  font-style: normal;
  text-transform: none;
  font-size: 1.24em;
  color: var(--bf-raspberry, #D33344);
}

.vals-careers-copy p {
  margin: 0;
  color: var(--fg2, var(--bf-warm-gray));
  font-size: 15px;
  line-height: 1.6;
}

.vals-careers-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.vals-careers-cta .btn { gap: 8px; }

.vals-careers-script {
  font-family: var(--font-script, Caveat, cursive);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--accent, var(--bf-sky-deep));
  text-align: center;
}

/* Purpose statement panel above the values grid (/employment). Sits in
   site.css beside .vals-* because it shares that section's tone tokens. */
.vals-purpose {
  max-width: 62ch;
  margin: clamp(24px, 3vw, 36px) auto 0;
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 32px);
  border-radius: var(--radius-lg, 18px);
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, var(--bf-line));
  text-align: center;
}

.vals-purpose-label {
  display: block;
  font-family: var(--font-script, Caveat, cursive);
  font-size: clamp(19px, 2.1vw, 24px);
  color: var(--bf-raspberry, #D33344);
  margin-bottom: var(--space-2);
}

.vals-purpose p {
  margin: 0;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.5;
  font-weight: 700;
  color: var(--fg1, var(--bf-charcoal));
}

/* ══════════════════════════════════════════════════════════════════
   SPECIAL EVENT MENU (/special-event-menu)
   Reuses the .lp-picks / .lp-dots leader-dot pattern from the catering
   menu for the priced rows; everything below is the bits that page
   doesn't have — the terms strip, per-tray extras, and the multi-course
   dinner packages.
   ══════════════════════════════════════════════════════════════════ */

.sem-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 36px);
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px);
  border-radius: var(--radius-lg, 18px);
  background: var(--surface-warm, var(--bf-cream));
  border: 1px solid var(--border, var(--bf-line));
}

@media (max-width: 700px) { .sem-terms { grid-template-columns: 1fr; } }

.sem-term {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.sem-term-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, var(--bf-line));
  color: var(--accent, var(--bf-sky-deep));
}

.sem-terms > .sem-term:nth-child(2) .sem-term-icon { color: var(--bf-leaf-deep, #2C7A45); }
.sem-terms > .sem-term:nth-child(3) .sem-term-icon { color: var(--bf-raspberry, #D33344); }

.sem-term .sem-term-label,
.sem-term b { grid-column: 2; }
.sem-term .sem-term-label { margin-bottom: 2px; }

.sem-term + .sem-term { border-left: 1px solid var(--border, var(--bf-line)); padding-left: clamp(12px, 2vw, 24px); }
@media (max-width: 700px) { .sem-term + .sem-term { border-left: 0; padding-left: 0; border-top: 1px solid var(--border, var(--bf-line)); padding-top: var(--space-3); } }

.sem-term-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg2, var(--bf-warm-gray));
  margin-bottom: 6px;
}

.sem-term b {
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.15;
  color: var(--fg1, var(--bf-charcoal));
}

/* Add-on lines sit under a package description, dimmer and italic so the
   package copy stays the thing you read first. */
.sem-add {
  font-style: italic;
  font-size: 14px;
  opacity: 0.85;
}

.sem-sub-head {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--fg1, var(--bf-charcoal));
}

.sem-sub-note { margin: 4px 0 var(--space-4); font-size: 14px; color: var(--fg2, var(--bf-warm-gray)); }

.sem-extras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px clamp(16px, 3vw, 40px);
}

.sem-extras li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--border, var(--bf-line));
}

.sem-extra-name { font-weight: 700; color: var(--fg1, var(--bf-charcoal)); }
.sem-extra-serves { flex: 1 1 auto; font-size: 13px; color: var(--fg2, var(--bf-warm-gray)); }
.sem-extra-price { font-weight: 700; color: var(--bf-raspberry, #D33344); font-variant-numeric: tabular-nums; }

.sem-dinner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: var(--space-6);
}

@media (max-width: 1000px) { .sem-dinner-grid { grid-template-columns: 1fr; } }

.sem-package {
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius-lg, 18px);
  border: 1px solid var(--border, var(--bf-line));
  background: var(--bg-elevated, #fff);
}

.sem-courses { margin: var(--space-4) 0 0; }

.sem-courses dt {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent, var(--bf-sky-deep));
  margin-top: var(--space-4);
}

.sem-courses dt:first-child { margin-top: 0; }

.sem-courses dd {
  margin: 5px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg2, var(--bf-warm-gray));
}

.sem-subs {
  margin-top: var(--space-6);
  font-size: 14px;
  color: var(--fg2, var(--bf-warm-gray));
  text-align: center;
}

.sem-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

@media (max-width: 700px) { .sem-two { grid-template-columns: 1fr; } }

.sem-note {
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius-lg, 18px);
  background: var(--surface-warm, var(--bf-cream));
  border: 1px solid var(--border, var(--bf-line));
}

.sem-note p { margin: var(--space-2) 0 0; color: var(--fg2, var(--bf-warm-gray)); }

/* ══════════════════════════════════════════════════════════════════
   EVENT PACKAGE PREVIEW — [bf_event_packages], used on /private-events
   ══════════════════════════════════════════════════════════════════ */

.ep-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  margin-top: var(--space-6);
}

@media (max-width: 800px) { .ep-grid { grid-template-columns: 1fr; } }

.ep-card {
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: var(--radius-lg, 18px);
  border: 1px solid var(--border, var(--bf-line));
  background: var(--bg-elevated, #fff);
}

.ep-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ep-card-head h3 {
  margin: 0;
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.06;
  color: var(--fg1, var(--bf-charcoal));
}

.ep-from {
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  font-size: clamp(17px, 1.9vw, 21px);
  color: var(--bf-raspberry, #D33344);
  white-space: nowrap;
}

.ep-from small { font-size: 11px; letter-spacing: 0.04em; opacity: 0.8; }

.ep-card-desc {
  margin: var(--space-3) 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg2, var(--bf-warm-gray));
}

.ep-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border, var(--bf-line));
}

.ep-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 15px;
  color: var(--fg1, var(--bf-charcoal));
}

.ep-list li b {
  color: var(--bf-raspberry, #D33344);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ep-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

.ep-cta .btn { gap: 8px; }
.ep-cta-note { font-size: 14px; color: var(--fg2, var(--bf-warm-gray)); }

/* ══════════════════════════════════════════════════════════════════
   LOCATION CARD GRID — .oo-grid / .oo-card
   Shared component. Lived in order-online.css until Aug 2026, when
   /private-events adopted the same treatment for "Ready to book";
   moved here rather than copied, so the two can't drift. The .oo-
   prefix is kept because /order-online's markup already ships with it
   and renaming would touch a working page for no functional gain.
   ══════════════════════════════════════════════════════════════════ */
/* ── LOCATION GRID ────────────────────────────────────────────────── */

/* Five columns, not four. Every page using this grid renders all five
   cafes, so a four-up row stranded West Palm Beach alone on a second
   row — the same thing /catering-menu's .cat-inquiry grid avoids. The
   step down is 5 → 3 → 2 → 1: dropping to 4 would re-create the orphan
   at a narrower width instead of fixing it. */
.oo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: var(--space-8);
}

@media (max-width: 1180px) { .oo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .oo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .oo-grid { grid-template-columns: 1fr; } }

.oo-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, var(--bf-line));
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-base, 200ms) var(--ease-out, ease),
              box-shadow var(--t-base, 200ms) var(--ease-out, ease),
              border-color var(--t-base, 200ms) var(--ease-out, ease);
}

.oo-card:hover,
.oo-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent, var(--bf-sky-deep));
  box-shadow: var(--shadow-md, 0 12px 30px rgba(43, 48, 51, 0.12));
}

/* position:relative is load-bearing — .loc-scene (site.css) positions
   absolutely against this box. */
.oo-card-photo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bf-cream-2, #F3EAD8);
}

.oo-card-body { display: block; padding: var(--space-4) var(--space-5) var(--space-5); }

.oo-card-name {
  display: block;
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  text-transform: uppercase;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.1;
  color: var(--fg1, var(--bf-charcoal));
}

.oo-card-meta {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--fg2, var(--bf-warm-gray));
}

.oo-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border, var(--bf-line));
  width: 100%;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent, var(--bf-sky-deep));
}

.oo-card:hover .oo-card-cta svg { transform: translateX(3px); }
.oo-card-cta svg { transition: transform var(--t-base, 200ms) var(--ease-out, ease); }


/* ══════════════════════════════════════════════════════════════════
   /private-events — Aug 2026 comp pass
   The four changes taken from the client's comp. The comp's champagne
   line drawing is NOT used in the venue-hire band: the real photograph
   already there shows an actual buyout in one of the cafes, which is
   evidence a line drawing can't be. It is tinted instead.
   ══════════════════════════════════════════════════════════════════ */

/* When a page's body opens with a full-width hero photo, the generic
   .section top padding (124px) leaves it floating a long way below the
   lead. /catering-menu solves this with an inline padding-top on its own
   photo section; page.php's body wrapper can't take one, so this matches
   that spacing structurally instead of by page id — ids differ between
   local, staging and production, so a .page-id-105 rule would silently
   stop working on deploy. */
.section:has(> .container > .page-body > .stack-lg > .lp-hero-photo:first-child) {
  padding-top: var(--space-8);
}

/* The venue-hire pitch, now that the photo has moved out of it and up to
   the top of the page as a clean full-width band (matching how
   /catering-menu presents its hero). Single column, so the copy is no
   longer squeezed into half the width beside an image. */
.pe-intro {
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.2vw, 40px);
  border-radius: var(--radius-lg, 18px);
  background: color-mix(in srgb, var(--bf-sky, #48A1E0) 9%, var(--bg-elevated, #fff));
  border: 1px solid color-mix(in srgb, var(--bf-sky, #48A1E0) 22%, transparent);
}

.pe-intro h2 {
  margin: var(--space-2) 0 var(--space-3);
  max-width: 22ch;
}

.pe-intro p {
  color: var(--fg2, var(--bf-warm-gray));
  max-width: 62ch;
  margin-bottom: var(--space-6);
}

/* Quick facts: icons give the row something to catch the eye. Without
   them it reads as three unlabelled strings and gets skimmed.

   The icon sits BESIDE the text, as the comp has it, not above it —
   .cat-quickfacts uses `repeat(3, auto)` columns, so a block-level icon
   above the label left the three cells at wildly different widths and
   the row read as misaligned. Equal columns + a horizontal pairing
   fixes both at once. */
.pe-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  gap: 0;
  align-items: stretch;
  /* .cat-quickfacts pads below its own top rule; here each cell carries
     its own padding instead, so the hairlines meet the text evenly. */
  padding-top: 0;
  border-top: 1px solid var(--border, var(--bf-line));
  border-bottom: 1px solid var(--border, var(--bf-line));
}

/* Hairlines between the three, not just around them. At 1fr each the
   columns sit a long way apart on a wide screen; without a rule the gap
   reads as three things that drifted rather than one spec strip. */
.pe-facts > div + div { border-left: 1px solid var(--border, var(--bf-line)); }

@media (max-width: 760px) {
  .pe-facts { grid-template-columns: 1fr; }
  .pe-facts > div + div { border-left: 0; border-top: 1px solid var(--border, var(--bf-line)); }
}

.pe-facts > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  /* Row gap deliberately not the column gap: 14px reads right between
     the icon and the text, but the same figure between the script label
     and its value pulls the pair apart into two unrelated lines. */
  column-gap: 14px;
  row-gap: 3px;
  padding: var(--space-5) clamp(16px, 2.2vw, 28px);
}

@media (min-width: 761px) { .pe-facts > div:first-child { padding-left: 0; } }

/* The label and value stack in the second column, beside the icon.
   Both are pinned to column 2 explicitly, so the pairing survives the
   block editor: WordPress's wpautop turns a newline between the two
   spans into a <br>, which would otherwise land in the grid as a third
   item and knock the value onto its own row under the icon. The rule
   below drops any such <br> rather than relying on the client never
   pressing return in the right place. */
.pe-facts > div br { display: none; }
.pe-facts > div .lp-label { grid-column: 2; margin-bottom: 0; line-height: 1.1; }
.pe-facts > div .lp-value { grid-column: 2; align-self: start; max-width: 26ch; }

.pe-fact-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-warm, var(--bf-cream));
  border: 1px solid var(--border, var(--bf-line));
  color: var(--accent, var(--bf-sky-deep));
}

.pe-facts > div:nth-child(2) .pe-fact-icon { color: var(--bf-leaf-deep, #2C7A45); }
.pe-facts > div:nth-child(3) .pe-fact-icon { color: var(--bf-yellow-deep, #D2913A); }

/* Chef note and the careers aside, side by side. */
.pe-notes {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: var(--space-8);
}

@media (max-width: 860px) { .pe-notes { grid-template-columns: 1fr; } }

.pe-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(18px, 2.2vw, 24px);
  border-radius: var(--radius-lg, 18px);
  background: var(--surface-warm, var(--bf-cream));
  border: 1px solid var(--border, var(--bf-line));
}

.pe-note p { margin: 0; color: var(--fg2, var(--bf-warm-gray)); font-size: 15px; line-height: 1.6; }

.pe-note-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-elevated, #fff);
  color: var(--bf-raspberry, #D33344);
}

/* The careers aside is secondary — dashed edge, no fill, so it reads as
   an aside rather than a second equal callout. */
.pe-note-aside {
  background: none;
  border-style: dashed;
  align-items: center;
}

.pe-note-aside p { font-size: 15px; }

/* Packages left, extras sidebar right (/special-event-menu). The two are
   priced in different units — per person vs per tray — so separating
   them visually is doing real work, not decoration. */
.sem-split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

@media (max-width: 940px) { .sem-split { grid-template-columns: 1fr; } }

.sem-extras-panel {
  margin-top: var(--space-6);
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius-lg, 18px);
  background: color-mix(in srgb, var(--bf-leaf, #3DA35D) 7%, var(--bg-elevated, #fff));
  border: 1px solid color-mix(in srgb, var(--bf-leaf, #3DA35D) 22%, transparent);
}

.sem-extras-panel .sem-sub-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

.sem-extras-plus {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--bf-leaf-deep, #2C7A45);
  color: var(--bf-leaf-deep, #2C7A45);
}

/* One column inside the panel — the sidebar is too narrow for the
   auto-fit grid the full-width version used. */
.sem-extras-panel .sem-extras { grid-template-columns: 1fr; gap: 0; }