/* AUTO-GENERATED: tokens.css + styles.css. Edit those, then rebuild. */
/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * LAY'S KITCHEN - DESIGN TOKENS
 * Soft pink/mauve palette - feminine, warm, premium bakery aesthetic
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* Self-hosted webfont italics. The upright variable fonts for both families
   are declared in critical.css with their full weight range so they ship
   inline on first paint and cover every weight token from one file each.
   Italics are a different VF file from Google, so they need their own face. */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/fraunces/fraunces-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/dm-sans/dm-sans-latin-400-italic.woff2') format('woff2');
}

:root {
  /* ═══════════════════════════════════════════════════════════════
     PRIMARY - Rose/Mauve (The signature Lay's Kitchen color)
     ═══════════════════════════════════════════════════════════════ */
  --primary-50: #FFF2F6;
  --primary-100: #FCE5EB;
  --primary-200: #F1D0E3;
  --primary-300: #EDC5DC;
  --primary-400: #D4A3B8;
  --primary-500: #A85D73;
  --primary-600: #7B3C4C;
  --primary-700: #5E2D3A;
  --primary-800: #462231;
  --primary-900: #2D1620;

  /* ═══════════════════════════════════════════════════════════════
     NEUTRAL - Warm grays with pink undertone
     ═══════════════════════════════════════════════════════════════ */
  --neutral-50: #FFFBFC;
  --neutral-100: #FFF2F6;
  --neutral-200: #F5EEF0;
  --neutral-300: #E8DFE2;
  --neutral-400: #8A7D82;
  --neutral-500: #6B5F63;
  --neutral-600: #5A4F53;
  --neutral-700: #4D4346;
  --neutral-800: #332D2F;
  --neutral-900: #1A1617;

  /* ═══════════════════════════════════════════════════════════════
     BACKGROUNDS
     ═══════════════════════════════════════════════════════════════ */
  --bg-primary: #FFFBFC;
  --bg-secondary: #FFF2F6;
  --bg-tertiary: #FCE5EB;
  --bg-accent: #F1D0E3;

  /* ═══════════════════════════════════════════════════════════════
     SEMANTIC COLORS
     ═══════════════════════════════════════════════════════════════ */
  --success: #6B9B7A;
  --success-light: #E8F2EB;
  --error: #C75B5B;
  --error-light: #FCEAEA;
  --warning: #D4A853;
  --warning-light: #FDF6E7;
  --info: #7A8FB5;
  --info-light: #EEF2F7;

  /* DoorDash brand red — single source of truth for the DoorDash CTA
     button background + hover (used in critical.css and styles.css). */
  --doordash: #C75B5B;
  --doordash-hover: #B54A4A;

  /* ═══════════════════════════════════════════════════════════════
     ACCENT - Complementary colors for variety
     ═══════════════════════════════════════════════════════════════ */
  --accent-gold: #D4A853;
  --accent-sage: #9DB4A0;
  --accent-cream: #F9F3E8;

  /* ═══════════════════════════════════════════════════════════════
     TEXT COLORS - Semantic text hierarchy
     ═══════════════════════════════════════════════════════════════ */
  --text-primary: var(--neutral-800);      /* Primary body text - high contrast */
  --text-secondary: var(--neutral-700);    /* Secondary/muted text */
  --text-tertiary: var(--neutral-600);     /* Tertiary/help text - meets WCAG AA */
  --text-disabled: var(--neutral-500);     /* Disabled text */
  --text-inverse: #FFFFFF;                 /* Text on dark backgrounds */

  /* Interactive Text */
  --text-link: var(--primary-500);
  --text-link-hover: var(--primary-600);

  /* Focus Ring */
  --focus-ring: var(--primary-500);
  --focus-ring-offset: 3px;

  /* ═══════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════ */
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --font-body: 'DM Sans', 'DM Sans Fallback', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes - Fluid typography */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
  --text-5xl: clamp(3rem, 2rem + 5vw, 5rem);

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.8;

  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ═══════════════════════════════════════════════════════════════
     SPACING
     ═══════════════════════════════════════════════════════════════ */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Section Spacing (responsive) */
  --section-sm: clamp(3rem, 6vw, 5rem);
  --section-md: clamp(5rem, 10vw, 8rem);
  --section-lg: clamp(7rem, 14vw, 12rem);

  /* Container */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-padding: clamp(1rem, 5vw, 2rem);

  /* ═══════════════════════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════════════════════ */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-3xl: 2.5rem;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════════════════════════
     SHADOWS (Soft, warm pink-tinted)
     ═══════════════════════════════════════════════════════════════ */
  --shadow-xs: 0 1px 2px rgba(168, 93, 115, 0.04);
  --shadow-sm: 0 2px 4px rgba(168, 93, 115, 0.06);
  --shadow-md: 0 4px 12px rgba(168, 93, 115, 0.08);
  --shadow-lg: 0 8px 24px rgba(168, 93, 115, 0.10);
  --shadow-xl: 0 16px 48px rgba(168, 93, 115, 0.12);

  /* Colored glow for buttons/interactive */
  --shadow-primary: 0 4px 14px rgba(168, 93, 115, 0.25);
  --shadow-primary-lg: 0 8px 24px rgba(168, 93, 115, 0.30);

  /* Hover state */
  --shadow-hover: 0 12px 32px rgba(168, 93, 115, 0.15);

  /* Card shadow */
  --shadow-card: 0 2px 8px rgba(168, 93, 115, 0.06),
                 0 8px 24px rgba(168, 93, 115, 0.08);
  --shadow-card-hover: 0 4px 12px rgba(168, 93, 115, 0.08),
                       0 16px 40px rgba(168, 93, 115, 0.12);

  /* ═══════════════════════════════════════════════════════════════
     TRANSITIONS & ANIMATIONS
     ═══════════════════════════════════════════════════════════════ */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* Easings */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ═══════════════════════════════════════════════════════════════
     STACKED TOP CHROME
     Navbar (80px) + Trust Strip (32px desktop / 28px mobile).
     Every page-hero `padding-top` should reference this token so
     adjusting the strip height only changes one place.
     ═══════════════════════════════════════════════════════════════ */
  --navbar-h: 80px;
  --top-bars: calc(var(--navbar-h) + 32px);
}

@media (max-width: 767px) {
  :root { --top-bars: calc(var(--navbar-h) + 28px); }
}

/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * LAY'S KITCHEN - MAIN STYLES
 * Premium bakery website styles
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY - Skip Link & Focus Styles
   ═══════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-500);
  color: white;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: calc(var(--top-bars) + var(--space-2));
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   STICKY MOBILE CTA BAR
   Mobile-only persistent "View Menu / Order DoorDash" at the bottom.
   Hidden on /order, /order-form, /custom-orders by the component itself.
   Slides up after 200 px of scroll (controlled by .is-revealed).
   ═══════════════════════════════════════════════════════════════ */
.sticky-mobile-cta {
  /* Desktop: never shown. Mobile rules below override. */
  display: none;
}

@media (max-width: 767px) {
  .sticky-mobile-cta {
    display: flex;
    gap: var(--space-2);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90; /* below modals/lightbox (z-index 9999+), above navbar */
    padding: var(--space-3) var(--space-4);
    /* Respect iOS notch / home-indicator inset. */
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    background: rgba(255, 251, 252, 0.96);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-top: 1px solid var(--neutral-300);
    box-shadow: 0 -8px 24px rgba(168, 93, 115, 0.10);
    /* Hidden by default — translate down beyond viewport. .is-revealed
       brings it back. Using transform keeps this on the compositor for
       smooth 60fps slide. */
    transform: translateY(110%);
    transition: transform var(--duration-slow) var(--ease-spring);
  }

  .sticky-mobile-cta.is-revealed {
    transform: translateY(0);
  }

  .sticky-mobile-cta__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px; /* WCAG 2.5.5 target size — comfortable thumb tap */
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }

  .sticky-mobile-cta__btn:active {
    transform: scale(0.97);
  }

  .sticky-mobile-cta__btn--primary {
    background: var(--primary-500);
    color: white;
    box-shadow: var(--shadow-primary);
  }

  .sticky-mobile-cta__btn--doordash {
    background: var(--doordash);
    color: white;
    box-shadow: 0 4px 14px rgba(199, 91, 91, 0.25);
  }

  .sticky-mobile-cta__icon {
    display: inline-flex;
    align-items: center;
    width: 18px;
    height: 18px;
  }

  .sticky-mobile-cta__icon svg {
    width: 100%;
    height: 100%;
  }

  /* Keep the visible page content above the sticky bar so the last item
     isn't permanently hidden behind it. ~72 px (bar height incl. padding). */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* Reduced-motion users get the bar fully visible immediately, no slide. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .sticky-mobile-cta {
    transition: none;
    transform: translateY(0);
  }
}

/* Scroll-to-top FAB — appears after ~600px scroll, sits above sticky CTA on mobile */
.scroll-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 89; /* sticky-cta is 90; scroll-top sits below so it doesn't overlap the CTA bar */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--primary-600);
  color: white;
  box-shadow: var(--shadow-primary);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top:hover {
  background: var(--primary-700);
}

.scroll-top:focus-visible {
  outline: 3px solid var(--accent-gold);
  outline-offset: 2px;
}

/* Mobile: sit above the sticky CTA bar (~72px tall + safe-area inset) */
@media (max-width: 767px) {
  .scroll-top {
    bottom: calc(72px + env(safe-area-inset-bottom) + var(--space-3));
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top {
    transition: opacity var(--duration-fast) linear;
    transform: none;
  }
}

/* Focus visible styles for keyboard navigation */
*:focus-visible {
  outline: 3px solid var(--primary-500);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Specific focus styles for buttons */
.btn:focus-visible {
  outline: 3px solid var(--primary-300);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(168, 93, 115, 0.2);
}

/* Focus styles for links in navigation */
.navbar-link:focus-visible,
.footer-nav-link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Focus styles for mobile menu links */
.mobile-menu-link:focus-visible {
  outline: 3px solid var(--primary-500);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  scroll-padding-top: var(--top-bars);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  background-color: var(--bg-primary);
  min-height: 100svh;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY CLASSES
   ═══════════════════════════════════════════════════════════════ */
.heading-1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--primary-600);
}

.heading-2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.heading-3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.heading-4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--neutral-700);
}

.body-large {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-tertiary);
}

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--primary-500);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-sm {
  max-width: var(--container-sm);
}

.container-md {
  max-width: var(--container-md);
}

.container-lg {
  max-width: var(--container-lg);
}

.section {
  padding-top: var(--section-md);
  padding-bottom: var(--section-md);
}

.section-sm {
  padding-top: var(--section-sm);
  padding-bottom: var(--section-sm);
}

.section-lg {
  padding-top: var(--section-lg);
  padding-bottom: var(--section-lg);
}

/* ═══════════════════════════════════════════════════════════════
   CARD BASE COMPONENT
   ═══════════════════════════════════════════════════════════════ */
.card {
  background-color: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: all var(--duration-normal) var(--ease-spring);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* Card with top accent border */
.card--accent {
  border-top: 4px solid var(--primary-400);
}

/* Card with subtle border */
.card--bordered {
  border: 1px solid var(--primary-100);
}

/* Interactive card */
.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  transform: translateY(-6px);
}

/* Elevated card */
.card--elevated {
  box-shadow: var(--shadow-lg);
}

.card--elevated:hover {
  box-shadow: var(--shadow-xl);
}

/* Featured card */
.card--featured {
  border: 2px solid var(--primary-200);
  background: linear-gradient(135deg, white 0%, var(--primary-50) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--primary-500);
  color: white;
  box-shadow: 0 2px 8px rgba(168, 93, 115, 0.2);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--primary-600);
  box-shadow: 0 6px 20px rgba(168, 93, 115, 0.35);
  transform: translateY(-2px);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(168, 93, 115, 0.2);
}

.btn-secondary {
  background-color: rgba(255, 242, 246, 0);
  color: var(--primary-500);
  border: 2px solid var(--primary-500);
}

.btn-secondary:hover:not(:disabled) {
  background-color: rgba(255, 242, 246, 1);
  border-color: var(--primary-600);
  color: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(168, 93, 115, 0.12);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

.btn-ghost {
  background-color: rgba(255, 242, 246, 0);
  color: var(--neutral-600);
}

.btn-ghost:hover:not(:disabled) {
  background-color: rgba(255, 242, 246, 1);
  color: var(--primary-500);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-full);
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

/* DoorDash Button - Softened red that harmonizes with rose palette */
.btn-doordash {
  background-color: var(--doordash);
  color: white;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-weight: 600;
  gap: var(--space-3);
  border: 2px solid transparent;
}

.btn-doordash:hover:not(:disabled) {
  background-color: var(--doordash-hover);
  box-shadow: 0 4px 16px rgba(199, 91, 91, 0.35);
  transform: translateY(-2px);
}

.btn-doordash:active:not(:disabled) {
  transform: translateY(0);
}

.btn-doordash-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-doordash-icon svg {
  width: 20px;
  height: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   TRUST STRIP
   Thin band above the navbar with four conversion-critical trust
   signals. Static + centered on mobile (<768px) and any client that
   reports prefers-reduced-motion: reduce. Subtle horizontal marquee
   on desktop (>=1024px) — content scrolls right-to-left over ~30s,
   with a duplicated track for a seamless loop. Compositor-only:
   transform: translateX, never `left`.
   ═══════════════════════════════════════════════════════════════ */
.trust-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110; /* above navbar (100), below modals/lightbox (9999+) */
  height: 32px;
  background-color: var(--accent-cream);
  color: var(--primary-700);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  overflow: hidden;
  border-bottom: 1px solid rgba(168, 93, 115, 0.08);
  /* Soft fade at both edges so text doesn't hard-cut at the viewport
     boundary. Lives on the parent (always viewport-wide) rather than
     the track (which is content-wide via max-content) so the mask
     always aligns with the visible band. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}

.trust-strip-track {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* Size to the actual content (4 copies of the list) so the keyframe
     percentage maps to a real copy width, not the viewport. */
  width: max-content;
}

.trust-strip-list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  white-space: nowrap;
  height: 100%;
}

.trust-strip-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Tiny dot separator between items. Lives on the ::before of every
   item after the first — keeps the markup clean (no separator nodes). */
.trust-strip-item + .trust-strip-item::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--primary-300);
  margin-right: var(--space-2);
}

.trust-strip-instagram {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
  padding: 4px 6px;
  min-height: 24px;
  border-radius: var(--radius-sm);
}

.trust-strip-instagram:hover,
.trust-strip-instagram:focus-visible {
  color: var(--primary-500);
}

.trust-strip-instagram-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Duplicate track — only shown on desktop where the marquee runs. */
.trust-strip-dup {
  display: none;
}

/* Mobile: shorter strip, tighter gap, smaller dot indent. Static layout. */
@media (max-width: 767px) {
  .trust-strip {
    height: 28px;
  }
  .trust-strip-list {
    gap: var(--space-3);
    padding: 0 var(--space-3);
  }
  .trust-strip-item + .trust-strip-item::before {
    margin-right: var(--space-1);
  }
}

/* Mobile + tablet: the marquee is off and the static list is ~614px wide
   at 375vp, so it would otherwise clip at the edges. Constrain the track
   back to 100% (overriding the desktop max-content used by the marquee),
   then let the inner list overflow horizontally with a hidden scrollbar.
   The parent .trust-strip keeps overflow:hidden so the scroll lives on
   the track itself. */
@media (max-width: 1023px) {
  .trust-strip-track {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .trust-strip-track::-webkit-scrollbar { display: none; }
  .trust-strip-list { padding: 0 var(--space-3); }
}

/* Desktop: enable the marquee. Track is now max-content (holds 4 copies
   of the list ≈ 2876px) and translates left. With 4 copies, -25% is
   exactly one copy width, so the loop seam is seamless and the track
   stays full across ultrawide viewports. Edge fade lives on .trust-strip
   so it always matches the visible band. */
@media (min-width: 1024px) {
  .trust-strip-track {
    /* Switch from centered flex to a left-aligned scroller. */
    justify-content: flex-start;
    animation: trustStripScroll 30s linear infinite;
    will-change: transform;
  }
  .trust-strip-dup {
    display: flex;
  }
  /* Tiny pause on hover or keyboard focus — gives users a chance to click
     the Instagram handle without chasing it (mouse + AT-friendly). */
  .trust-strip:hover .trust-strip-track,
  .trust-strip:focus-within .trust-strip-track {
    animation-play-state: paused;
  }
}

@keyframes trustStripScroll {
  /* With 5 copies in the track (1 primary + 4 duplicates), one copy width =
     exactly 20% of the track. Shifting by -20% slides one copy off-screen
     and the loop seam falls on a copy boundary so it's invisible. The
     remaining 4 copies (~2876 px) keep the visible band filled at any
     viewport up through ultrawide 2560+. */
  from { transform: translateX(0); }
  to   { transform: translateX(-20%); }
}

/* Reduced motion: kill the marquee, recenter the single track, hide the
   duplicates. The static four-item layout takes over at every viewport. */
@media (prefers-reduced-motion: reduce) {
  .trust-strip-track {
    animation: none;
    width: 100%;
    justify-content: center;
  }
  .trust-strip {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .trust-strip-dup {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 32px; /* sits below the 32px trust strip */
  left: 0;
  right: 0;
  z-index: 100;
  height: 80px;
  background-color: var(--bg-primary);
  transition: all var(--duration-normal) var(--ease-out);
}

@media (max-width: 767px) {
  .navbar {
    top: 28px; /* trust strip is shorter on mobile */
  }
}

.navbar.scrolled {
  background-color: rgba(255, 251, 252, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--primary-100);
  box-shadow: var(--shadow-sm);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--primary-600);
  text-decoration: none;
}

.navbar-logo-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.navbar-nav {
  display: none;
  align-items: center;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .navbar-nav {
    display: flex;
  }
}

.navbar-link {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--neutral-600);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.navbar-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-500);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--ease-out);
}

.navbar-link:hover {
  color: var(--primary-500);
}

.navbar-link:hover::after {
  width: 100%;
}

.navbar-link.active {
  color: var(--primary-500);
}

.navbar-link.active::after {
  width: 100%;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.navbar-cta {
  display: none;
}

@media (min-width: 1024px) {
  .navbar-cta {
    display: inline-flex;
  }
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.menu-toggle:hover {
  background-color: var(--primary-50);
}

@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle-line {
  width: 22px;
  height: 2px;
  background-color: var(--neutral-700);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-out);
}

.menu-toggle-line:not(:last-child) {
  margin-bottom: 5px;
}

.menu-toggle.active .menu-toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active .menu-toggle-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-toggle.active .menu-toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 320px;
  background: #FFFBFC;
  z-index: 150;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .mobile-menu,
  .mobile-menu-overlay {
    display: none !important;
  }
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(123, 60, 76, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 140;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}

.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--primary-100);
  background-color: white;
  flex-shrink: 0;
}

.mobile-menu-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.mobile-menu-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--primary-600);
}

.mobile-menu-close:hover,
.mobile-menu-close:active {
  background-color: var(--primary-500);
  color: white;
}

.mobile-menu-close svg {
  width: 24px;
  height: 24px;
}

.mobile-menu-nav {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.3);
}

.mobile-menu-link {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--neutral-700) !important;
  text-decoration: none;
  padding: 16px 20px;
  border-radius: 16px;
  transition: all 0.2s ease-out;
  text-align: center;
  display: block !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(168, 93, 115, 0.2);
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-menu-link:hover,
.mobile-menu-link:active {
  color: var(--primary-600) !important;
  background-color: white !important;
  transform: translateX(8px);
}

.mobile-menu-link.active {
  color: white !important;
  background-color: var(--primary-500) !important;
  box-shadow: 0 4px 15px rgba(168, 93, 115, 0.3);
  border: none;
}

.mobile-menu-footer {
  padding: 24px;
  border-top: 1px solid var(--primary-100);
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
}

.mobile-menu-cta {
  width: 100%;
  margin-bottom: 24px;
  padding: 16px 24px;
  font-size: 1.125rem;
  display: block !important;
}

.mobile-menu-social {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.mobile-menu-social a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: var(--radius-full);
  color: var(--primary-500);
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: 0 2px 8px rgba(168, 93, 115, 0.15);
  border: 1px solid var(--primary-100);
}

.mobile-menu-social a:hover,
.mobile-menu-social a:active {
  background-color: var(--primary-500);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(168, 93, 115, 0.3);
  border-color: var(--primary-500);
}

.mobile-menu-social svg {
  width: 22px;
  height: 22px;
}

.mobile-menu-email {
  font-size: var(--text-sm);
  color: #6B5F63;
}

.mobile-menu-email a {
  color: var(--primary-500);
  text-decoration: none;
  font-weight: 500;
}

/* Mobile menu links - ensure visibility */
.mobile-menu.open .mobile-menu-link {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background-color: var(--bg-secondary);
  padding-top: var(--section-sm);
  padding-bottom: var(--space-8);
}

.footer-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--primary-600);
  text-decoration: none;
}

.footer-logo-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--neutral-500);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}

.footer-nav-link {
  font-size: var(--text-base);
  color: var(--neutral-600);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.footer-nav-link:hover {
  color: var(--primary-500);
  background-color: var(--primary-50);
}

/* Mobile footer nav - horizontal row */
@media (max-width: 480px) {
  .footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    width: 100%;
  }

  .footer-nav-link {
    font-size: var(--text-sm);
    padding: var(--space-2);
    text-align: center;
  }
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

.footer-social-link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-100);
  border-radius: var(--radius-full);
  color: var(--primary-600);
  transition: all var(--duration-fast) var(--ease-out);
}

.footer-social-link:hover {
  background-color: var(--primary-500);
  color: white;
  transform: translateY(-2px);
}

.footer-social-link svg {
  width: 20px;
  height: 20px;
}

.footer-email {
  font-size: var(--text-sm);
  color: var(--neutral-500);
}

.footer-email a {
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-email a:hover {
  color: var(--primary-600);
}

.footer-divider {
  width: 100%;
  height: 1px;
  background-color: var(--primary-200);
  margin-bottom: var(--space-6);
}

.footer-bottom {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--neutral-500);
}

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Trust strip + navbar stack — adjust the token, not this rule. */
  padding-top: var(--top-bars);
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

.hero-content {
  max-width: 32rem;
}

@media (min-width: 1024px) {
  .hero-content {
    max-width: none;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--primary-100);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--primary-600);
  margin-bottom: var(--space-6);
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  background-color: var(--success);
  border-radius: var(--radius-full);
  animation: pulse-soft 2s infinite;
}

/* Sibling freshness/pickup badge — sits next to the "Now Taking Orders"
   primary badge. Softer tone to keep the green dot dominant. */
.hero-badge-pickup {
  background-color: var(--accent-cream);
  color: var(--primary-700);
  margin-left: var(--space-2);
}

/* Belt-and-braces gap for the emoji <span> next to <NextPickupBadge />.
   The .hero-badge `gap: var(--space-2)` should already handle this, but
   when NextPickupBadge re-renders post-hydration (label flips from the
   fallback to the live date) we've seen the gap collapse on some setups,
   so we pin an explicit margin too. */
.hero-badge-pickup > span[aria-hidden="true"] {
  margin-right: var(--space-1);
}

.hero-title {
  margin-bottom: var(--space-6);
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  max-width: 28rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero-doordash {
  margin-top: var(--space-4);
}

/* Hero DoorDash button - matches other hero buttons */
.btn-hero {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
  min-height: 56px;
}

.hero-doordash .btn-doordash {
  width: 100%;
  justify-content: center;
}

@media (min-width: 480px) {
  .hero-doordash .btn-doordash {
    width: auto;
    min-width: 240px;
  }
}

@media (min-width: 1024px) {
  .hero-doordash .btn-hero {
    min-width: 280px;
  }
}

.hero-image {
  position: relative;
}

.hero-image-wrapper {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: auto;
  background-color: transparent;
}

.hero-image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-2xl);
}

.hero-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--primary-400);
  font-size: var(--text-6xl);
}

.hero-image-placeholder span {
  font-size: var(--text-sm);
  color: var(--neutral-400);
}

/* Decorative elements */
.hero-decoration {
  position: absolute;
  border-radius: 50%;
  background: var(--primary-100);
  opacity: 0.6;
  z-index: -1;
}

.hero-decoration-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -50px;
}

.hero-decoration-2 {
  width: 200px;
  height: 200px;
  bottom: 50px;
  left: -100px;
}

.hero-scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--neutral-400);
  font-size: var(--text-sm);
  animation: float 3s ease-in-out infinite;
}

.hero-scroll svg {
  width: 24px;
  height: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

@keyframes pulse-soft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Animation utility classes */
.animate-fade-in-up {
  animation: fadeInUp 0.6s var(--ease-out) forwards;
}

.animate-fade-in {
  animation: fadeIn 0.4s var(--ease-out) forwards;
}

.animate-scale-in {
  animation: scaleIn 0.4s var(--ease-out) forwards;
}

.animate-delay-1 {
  animation-delay: 100ms;
}

.animate-delay-2 {
  animation-delay: 200ms;
}

.animate-delay-3 {
  animation-delay: 300ms;
}

.animate-delay-4 {
  animation-delay: 400ms;
}

/* Scroll animation classes */
.animate-on-scroll {
  opacity: 0;
}

.animate-on-scroll.visible {
  animation: fadeInUp 0.6s var(--ease-out) forwards;
}

/* ═══════════════════════════════════════════════════════════════
   CLEAN GRADIENT BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

.gradient-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--bg-primary) 0%,
    var(--primary-50) 100%
  );
}

/* Hide the blob elements - keeping simple clean background */
.gradient-blob {
  display: none;
}

/* Disabled shimmer and lines effects for clean background */
.gradient-bg::before,
.gradient-bg::after {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED BUTTON ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn:active::before {
  width: 300px;
  height: 300px;
}

/* Button icon animation */
.btn svg,
.btn span svg {
  transition: transform var(--duration-normal) var(--ease-spring);
}

.btn:hover svg,
.btn:hover span svg {
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.navbar {
  transition: all var(--duration-normal) var(--ease-out);
}

.navbar-link {
  position: relative;
  transition: all var(--duration-fast) var(--ease-out);
}

.navbar-link::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-500), transparent);
  transition: all var(--duration-normal) var(--ease-spring);
  transform: translateX(-50%);
}

.navbar-link:hover::before,
.navbar-link.active::before {
  width: 120%;
}

.navbar-link:hover {
  color: var(--primary-500);
  transform: translateY(-2px);
}

/* Logo animation */
.navbar-logo {
  transition: all var(--duration-normal) var(--ease-spring);
}

.navbar-logo:hover {
  transform: scale(1.02);
}

.navbar-logo-icon {
  transition: all var(--duration-normal) var(--ease-spring);
}

.navbar-logo:hover .navbar-logo-icon {
  transform: rotate(-5deg) scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE TRANSITION EFFECTS
   ═══════════════════════════════════════════════════════════════ */
body {
  opacity: 0;
  animation: pageEnter 0.6s var(--ease-out) 0.1s forwards;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page content stagger animation */
main {
  animation: contentEnter 0.8s var(--ease-out) 0.2s forwards;
  opacity: 0;
}

@keyframes contentEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Section entrance animations */
section {
  opacity: 0;
  transform: translateY(30px);
  animation: sectionEnter 0.7s var(--ease-out) forwards;
}

section:nth-child(1) { animation-delay: 0.1s; }
section:nth-child(2) { animation-delay: 0.2s; }
section:nth-child(3) { animation-delay: 0.3s; }
section:nth-child(4) { animation-delay: 0.4s; }
section:nth-child(5) { animation-delay: 0.5s; }

@keyframes sectionEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════
   CARD & ELEMENT ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* Menu cards hover */
.menu-item-card {
  transition: all var(--duration-normal) var(--ease-spring);
}

.menu-item-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-card-hover);
}

/* Order option cards */
.order-option-card {
  transition: all var(--duration-normal) var(--ease-spring);
}

.order-option-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.order-option-icon {
  transition: all var(--duration-normal) var(--ease-spring);
}

.order-option-card:hover .order-option-icon {
  transform: scale(1.15) rotate(-5deg);
}

/* Info cards */
.order-info-card {
  transition: all var(--duration-normal) var(--ease-spring);
}

.order-info-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Order steps animation */
.order-step {
  transition: all var(--duration-normal) var(--ease-out);
}

.order-step:hover {
  transform: translateX(10px);
}

.order-step:hover .order-step-number {
  transform: scale(1.1);
  background-color: var(--primary-500);
  color: white;
}

.order-step-number {
  transition: all var(--duration-normal) var(--ease-spring);
}

/* About page cards */
.value-card {
  transition: all var(--duration-normal) var(--ease-spring);
}

.value-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.value-icon {
  transition: all var(--duration-normal) var(--ease-spring);
}

.value-card:hover .value-icon {
  transform: scale(1.2) rotate(10deg);
}

/* ═══════════════════════════════════════════════════════════════
   WHERE TO FIND US SECTION
   ═══════════════════════════════════════════════════════════════ */
.find-us {
  padding: var(--section-md) 0;
  background-color: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.find-us-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-12);
}

.find-us-header .overline {
  display: block;
  margin-bottom: var(--space-3);
}

.find-us-header .heading-2 {
  color: var(--primary-600);
  margin-bottom: var(--space-4);
}

.find-us-header .body-large {
  color: var(--neutral-500);
}

.find-us-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
  /* Equalize row heights so the partner cards and the coming-soon card
     all stretch to the tallest in the row (coming-soon has a Button +
     smile SVG so it would otherwise be 52px taller). */
  align-items: stretch;
}

@media (min-width: 768px) {
  .find-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .find-us-grid .location-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 450px;
    justify-self: center;
  }
}

/* Location Card */
.location-card {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-spring);
  /* Column flex so .location-card-coming-soon's CTA + smile can use
     margin-top: auto to pin to the card bottom, leaving the description
     at the top — matches the partner cards' visual rhythm. */
  display: flex;
  flex-direction: column;
}

/* Push the coming-soon card's CTA and smile to the bottom so the
   description doesn't float in the middle of a taller card. */
.location-card-coming-soon .btn,
.location-card-coming-soon .location-card-smile {
  margin-top: auto;
}

.location-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
}

.location-card-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: linear-gradient(135deg, var(--success), var(--accent-sage));
  color: white;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: badgeShine 3s ease-in-out infinite;
}

@keyframes badgeShine {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.location-card-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
  font-size: 28px;
  transition: all var(--duration-normal) var(--ease-spring);
}

.location-card:hover .location-card-icon {
  transform: scale(1.1) rotate(-5deg);
}

/* Icon with image (like Spot of Coffee logo) */
.location-card-icon-img {
  overflow: hidden;
  padding: 0;
  background: white;
  border-radius: 50%;
  border: 3px solid var(--primary-300);
  box-shadow: 0 2px 8px rgba(168, 93, 115, 0.15);
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.location-card-icon-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
  clip-path: circle(50%);
}

.location-card .heading-3 {
  color: var(--primary-600);
  margin-bottom: var(--space-2);
  transition: all var(--duration-normal) var(--ease-spring);
}

.location-card:hover .heading-3 {
  color: #5E2D3A;
}

.location-card-type {
  font-size: var(--text-sm);
  color: #D4A3B8;
  font-weight: 500;
  margin-bottom: var(--space-3);
  transition: all var(--duration-normal) var(--ease-spring);
}

.location-card:hover .location-card-type {
  color: var(--primary-500);
}

.location-card-description {
  font-size: var(--text-sm);
  color: #6B5F63;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  transition: all var(--duration-normal) var(--ease-spring);
}

.location-card:hover .location-card-description {
  color: var(--neutral-700);
}

.location-card-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.location-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background-color: #FFF2F6;
  color: var(--primary-600);
  transition: all var(--duration-normal) var(--ease-spring);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--primary-100);
}

.location-card:hover .location-tag {
  background-color: var(--primary-100);
  border-color: #D4A3B8;
}

.location-card-footer {
  padding-top: var(--space-4);
  border-top: 1px solid var(--primary-100);
  opacity: 0.7;
  transform: translateY(10px);
  transition: all var(--duration-normal) var(--ease-spring);
  transition-delay: 0.15s;
}

.location-card:hover .location-card-footer {
  opacity: 1;
  transform: translateY(0);
}

.location-card-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--neutral-500);
}

.location-card-info svg {
  color: var(--primary-400);
}

/* Location card link (Google Maps) */
.location-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--primary-500);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  background-color: var(--primary-50);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) var(--ease-out);
}

.location-card-link:hover {
  background-color: var(--primary-100);
  color: var(--primary-600);
  transform: translateX(4px);
}

.location-card-link svg {
  width: 16px;
  height: 16px;
  color: var(--primary-400);
  transition: color var(--duration-fast) var(--ease-out);
}

.location-card-link:hover svg {
  color: var(--primary-600);
}

/* Featured Location Card */
.location-card-featured {
  border: 2px solid var(--primary-300);
  background: linear-gradient(135deg, white 0%, var(--primary-50) 100%);
}

.location-card-featured .location-card-icon {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
  color: white;
}

/* Coming Soon Card */
.location-card-coming-soon {
  background: linear-gradient(135deg, var(--neutral-50), var(--bg-secondary));
  border: 2px dashed var(--neutral-300);
  text-align: center;
}

.location-card-coming-soon .location-card-icon {
  margin-left: auto;
  margin-right: auto;
  background: var(--neutral-200);
  color: var(--neutral-500);
}

.location-card-coming-soon .heading-3 {
  color: var(--neutral-600);
}

.location-card-cta {
  font-size: var(--text-sm);
  color: var(--primary-500);
  font-weight: 500;
  margin-bottom: var(--space-4);
}

.location-card-coming-soon .btn {
  margin-top: var(--space-2);
}

.location-card-coming-soon .location-card-smile {
  width: 100px;
  height: 100px;
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
  margin-left: auto;
  margin-right: auto;
}

.location-card-coming-soon .location-card-smile svg {
  display: block;
  width: 100px;
  height: 100px;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(168, 93, 115, 0.25));
}

.location-card:hover .location-card-smile svg {
  animation: bounce 0.6s ease-in-out;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-12px) scale(1.05);
  }
  50% {
    transform: translateY(0) scale(1);
  }
  75% {
    transform: translateY(-6px) scale(1.02);
  }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER REVIEWS SECTION
   ═══════════════════════════════════════════════════════════════ */
.reviews {
  padding: var(--section-md) 0;
  background-color: var(--bg-primary);
  position: relative;
}

.reviews-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-12);
}

.reviews-header .overline {
  display: block;
  margin-bottom: var(--space-3);
}

.reviews-header .heading-2 {
  color: var(--primary-600);
  margin-bottom: var(--space-4);
}

.reviews-header .body-large {
  color: var(--neutral-500);
}

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
  justify-content: center;
}

@media (min-width: 768px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Review Card */
.review-card {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-spring);
}

.review-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
}

.review-image {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
  border: 2px solid var(--primary-100);
}

.review-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform var(--duration-normal) var(--ease-out);
}

.review-card:hover .review-image img {
  transform: scale(1.02);
}

.review-quote {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--primary-200);
}

.review-quote svg {
  width: 40px;
  height: 40px;
}

.review-stars {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.review-star {
  color: var(--accent-gold);
}

.review-star svg {
  width: 18px;
  height: 18px;
}

.review-text {
  font-size: var(--text-base);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  font-style: italic;
}

.review-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--primary-100);
}

.review-author-avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: white;
}

.review-author-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.review-author-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--neutral-800);
}

.review-author-product {
  font-size: var(--text-xs);
  color: var(--primary-500);
  font-weight: 500;
}

/* Reviews CTA */
.reviews-cta {
  text-align: center;
  margin-top: var(--space-12);
  padding: var(--space-8);
  background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-50) 100%);
  border-radius: var(--radius-2xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.reviews-cta p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--neutral-700);
  margin-bottom: var(--space-4);
}

.reviews-cta-links {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.reviews-cta-links .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.reviews-cta-links .btn svg {
  width: 18px;
  height: 18px;
}

/* Review card animations */
.review-card:nth-child(1) { animation-delay: 0.1s; }
.review-card:nth-child(2) { animation-delay: 0.2s; }
.review-card:nth-child(3) { animation-delay: 0.3s; }

/* Responsive adjustments */
@media (max-width: 480px) {
  .reviews-header {
    margin-bottom: var(--space-8);
  }

  .reviews-header .heading-2 {
    font-size: var(--text-2xl);
  }

  .review-card {
    padding: var(--space-6);
  }

  .review-quote svg {
    width: 32px;
    height: 32px;
  }

  .review-text {
    font-size: var(--text-sm);
  }

  .review-author-avatar {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
  }

  .reviews-cta {
    padding: var(--space-6);
    margin-top: var(--space-8);
  }
}

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */
.hero-title {
  animation: heroTitleEnter 1s var(--ease-out) 0.3s forwards;
  opacity: 0;
  transform: translateY(30px);
}

@keyframes heroTitleEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-subtitle {
  animation: heroSubtitleEnter 1s var(--ease-out) 0.5s forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes heroSubtitleEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-actions {
  animation: heroActionsEnter 1s var(--ease-out) 0.7s forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes heroActionsEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-badge {
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.hero-badge-dot {
  animation: dotPulse 1.5s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

/* Hero image float */
.hero-image-wrapper {
  animation: heroImageFloat 6s ease-in-out infinite;
}

@keyframes heroImageFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Scroll indicator bounce */
.hero-scroll {
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(10px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.footer-social-link {
  transition: all var(--duration-normal) var(--ease-spring);
}

.footer-social-link:hover {
  transform: translateY(-5px) scale(1.1);
  background-color: var(--primary-500);
  color: white;
}

.footer-link {
  transition: all var(--duration-fast) var(--ease-out);
}

.footer-link:hover {
  color: var(--primary-500);
  transform: translateX(5px);
}

/* ═══════════════════════════════════════════════════════════════
   INTERACTIVE FEEDBACK
   ═══════════════════════════════════════════════════════════════ */

/* Focus states with animation */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 3px;
  animation: focusPulse 0.3s var(--ease-out);
}

@keyframes focusPulse {
  0% {
    outline-offset: 0px;
  }
  100% {
    outline-offset: 3px;
  }
}

/* Loading shimmer effect */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════ */


/* Glowing border effect */
.location-card-featured::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--primary-300), var(--primary-400), var(--primary-300));
  border-radius: calc(var(--radius-2xl) + 2px);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.location-card-featured:hover::after {
  opacity: 1;
}

/* Stagger animation for lists */
.order-option-features li,
.location-card-items .location-tag {
  opacity: 0;
  animation: fadeInUp 0.4s var(--ease-out) forwards;
}

.order-option-features li:nth-child(1),
.location-card-items .location-tag:nth-child(1) { animation-delay: 0.1s; }
.order-option-features li:nth-child(2),
.location-card-items .location-tag:nth-child(2) { animation-delay: 0.15s; }
.order-option-features li:nth-child(3),
.location-card-items .location-tag:nth-child(3) { animation-delay: 0.2s; }
.order-option-features li:nth-child(4) { animation-delay: 0.25s; }


/* Number counter animation for order steps */
.order-step-number {
  position: relative;
  overflow: hidden;
}

.order-step-number::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: numberShine 3s ease-in-out infinite;
}

@keyframes numberShine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-center {
  text-align: center;
}

.text-primary {
  color: var(--primary-500);
}

.text-primary-dark {
  color: var(--primary-600);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

.bg-tertiary {
  background-color: var(--bg-tertiary);
}

/* Hide scrollbar but allow scrolling */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Responsive visibility */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MENU PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Menu Hero */
.menu-hero {
  padding-top: calc(var(--top-bars) + var(--section-sm));
  padding-bottom: var(--section-sm);
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Decorative elements for menu hero */
.menu-hero::before {
  content: '🍪';
  position: absolute;
  top: 120px;
  left: 10%;
  font-size: 48px;
  opacity: 0.15;
  animation: float 6s ease-in-out infinite;
}

.menu-hero::after {
  content: '🧁';
  position: absolute;
  top: 150px;
  right: 12%;
  font-size: 42px;
  opacity: 0.15;
  animation: float 5s ease-in-out infinite 0.5s;
}

.menu-hero-content {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.menu-hero .overline {
  margin-bottom: var(--space-4);
  display: block;
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.menu-hero .heading-1 {
  margin-bottom: var(--space-4);
  color: var(--primary-600);
  position: relative;
  display: inline-block;
}

.menu-hero .heading-1::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-300), var(--primary-500), var(--primary-300));
  border-radius: var(--radius-full);
}

.menu-hero .heading-2 {
  margin-bottom: var(--space-4);
  color: var(--primary-600);
}

.menu-hero .body-large {
  color: var(--neutral-500);
}

/* Menu Content */
.menu-content {
  padding-top: var(--space-8);
  padding-bottom: var(--section-md);
  background-color: var(--bg-primary);
}

/* Category Tabs */
.menu-tabs-wrapper {
  margin-bottom: var(--space-10);
  text-align: center;
}

.menu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  padding: var(--space-2) 0;
}

.menu-tab {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--space-2) var(--space-4);
  background-color: white;
  border: 2px solid var(--primary-100);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--neutral-600);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
  box-shadow: 0 2px 8px rgba(168, 93, 115, 0.08);
}

.menu-tab:hover {
  background-color: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(168, 93, 115, 0.15);
}

.menu-tab.active {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
  border: none;
  color: white;
  box-shadow: none;
  transform: none;
}

.menu-tab.active:hover {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  border: none;
  transform: none;
}

.menu-tab-emoji {
  font-size: var(--text-base);
  transition: transform var(--duration-fast) var(--ease-out);
}

.menu-tab:hover .menu-tab-emoji {
  transform: scale(1.1);
}

/* Menu Grid */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .menu-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Menu Empty State */
.menu-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  color: var(--neutral-500);
}

.menu-empty span {
  font-size: 4rem;
  display: block;
  margin-bottom: var(--space-4);
}

/* Menu Card */
.menu-card {
  background-color: white;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-spring);
  position: relative;
  box-shadow: 0 4px 12px rgba(168, 93, 115, 0.06);
  display: flex;
  flex-direction: column;
}

.menu-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-300), var(--primary-500), var(--primary-300));
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  z-index: 1;
}

.menu-card:hover {
  border-color: var(--primary-200);
  box-shadow: 0 12px 32px rgba(168, 93, 115, 0.15);
  transform: translateY(-6px);
}

.menu-card:hover::before {
  opacity: 1;
}

/* Menu Card Image */
.menu-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background-color: var(--primary-50);
  overflow: hidden;
}

.menu-image-zoom {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  display: block;
}

.menu-image-zoom:focus-visible {
  outline: 3px solid var(--primary-400);
  outline-offset: -3px;
}

.menu-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Menu card hover — image scale 1.03 + price subtle brighten.
   Guarded by (hover: hover) so touch devices don't get stuck-hover after tap.
   Honors prefers-reduced-motion. Uses :has() for sibling-aware price shift —
   Baseline since 2023, safe on modern browsers. Compositor-only (transform). */
@media (hover: hover) and (pointer: fine) {
  .menu-card-image img {
    transition: transform var(--duration-slow) var(--ease-out);
  }
  .menu-image-zoom:hover img,
  .menu-image-zoom:focus-visible img {
    transform: scale(1.03);
  }
  .menu-card:has(.menu-image-zoom:hover) .menu-card-price-main,
  .menu-card:hover .menu-card-price-main {
    filter: brightness(1.1) saturate(1.15);
  }
  .menu-card-price-main {
    transition: filter var(--duration-fast) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-card-image img,
  .menu-card-price-main {
    transition: none;
  }
  .menu-image-zoom:hover img,
  .menu-image-zoom:focus-visible img {
    transform: none;
  }
}

.menu-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-50) 100%);
  position: relative;
}

.menu-card-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
}

.menu-card-placeholder span {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(168, 93, 115, 0.2));
}

/* Menu Card Tags */
.menu-card-tags {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  pointer-events: none;
}

.menu-tag {
  padding: var(--space-1) var(--space-3);
  background-color: white;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary-600);
  box-shadow: var(--shadow-sm);
}

.menu-tag-popular {
  background-color: var(--primary-500);
  color: white;
}

/* Lighter pink + near-black text keeps the chip visually distinct from
   .menu-tag-popular and .menu-tag-protein (both primary-500 + white) and
   still passes WCAG 1.4.3 with ample contrast. */
.menu-tag-new {
  background-color: var(--primary-400);
  color: var(--neutral-900);
}

.menu-tag-protein {
  background-color: var(--primary-500);
  color: white;
}

/* Bestseller — gold accent. Surfaces items already tagged in menu.json. */
.menu-tag-bestseller {
  background-color: var(--accent-gold);
  color: var(--neutral-900);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
}

/* Menu Card Content */
.menu-card-content {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Top section: grows to fill available space */
.menu-card-body {
  flex: 1;
}

.menu-card-category {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--neutral-500);
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
}

.menu-card-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--neutral-800);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.menu-card-description {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tiny freshness reassurance under each card description. */
.menu-card-freshness {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--primary-600);
  letter-spacing: var(--tracking-wide);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.menu-card-freshness span[aria-hidden="true"] {
  color: var(--accent-gold);
}

/* Bottom section: always pinned to the card bottom */
.menu-card-bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--primary-100);
}

/* Meta row: serving + protein info — fixed height so cards stay aligned */
.menu-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  min-height: 1.25rem;
  margin-bottom: var(--space-3);
}

.menu-card-serving,
.menu-card-protein {
  font-size: var(--text-xs);
  color: var(--neutral-500);
}

.menu-card-protein {
  color: var(--primary-500);
  font-weight: 600;
}

/* Price row: price on left, View Details on right */
.menu-card-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.menu-card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 2.75rem;
  justify-content: flex-end;
}

.menu-card-price-main {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1;
  color: var(--primary-600);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Menu Image Lightbox */
html.lightbox-open,
body.lightbox-open {
  overflow: hidden;
  touch-action: none;
}

body.lightbox-open {
  animation: none;
  transform: none;
  opacity: 1;
  position: fixed;
  width: 100%;
}

.menu-image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.menu-image-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.menu-image-lightbox__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(123, 60, 76, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.menu-image-lightbox.open .menu-image-lightbox__backdrop {
  opacity: 1;
}

.menu-image-lightbox__content {
  position: relative;
  z-index: 1;
  width: min(92vw, 940px);
  max-height: calc(100vh - var(--space-12));
  max-height: calc(100dvh - var(--space-12));
  background: linear-gradient(160deg, white 0%, var(--primary-50) 100%);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--primary-200);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: scale(0.92);
  opacity: 0;
  transition: transform var(--duration-normal) var(--ease-spring),
              opacity var(--duration-normal) var(--ease-out);
}

.menu-image-lightbox__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-300), var(--primary-500), var(--primary-300));
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  opacity: 0.9;
}

.menu-image-lightbox.open .menu-image-lightbox__content {
  transform: scale(1);
  opacity: 1;
  animation: lightboxIn 420ms var(--ease-spring);
}

.menu-image-lightbox__figure {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.menu-image-lightbox__image {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius-xl);
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  box-shadow: var(--shadow-md);
}

.menu-image-lightbox.open .menu-image-lightbox__image {
  animation: menuImagePop 500ms var(--ease-out);
}

.menu-image-lightbox__caption {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--primary-700);
  text-align: center;
}

.menu-image-lightbox__caption:empty {
  display: none;
}

.menu-image-lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--primary-200);
  background: linear-gradient(135deg, white 0%, var(--primary-50) 100%);
  color: var(--primary-600);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.menu-image-lightbox.open .menu-image-lightbox__close {
  animation: lightboxCloseIn 260ms var(--ease-out);
}

.menu-image-lightbox__close-icon svg {
  width: 18px;
  height: 18px;
}

.menu-image-lightbox__close-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-image-lightbox__close:hover {
  transform: translateY(-1px) scale(1);
  box-shadow: var(--shadow-md);
}

.menu-image-lightbox__close:active {
  transform: translateY(0) scale(1);
}

@keyframes lightboxIn {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  70% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lightboxCloseIn {
  from {
    transform: scale(0.92);
  }
  to {
    transform: scale(1);
  }
}

@keyframes menuImagePop {
  0% {
    transform: scale(0.98);
    opacity: 0;
  }
  60% {
    transform: scale(1.02);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 640px) {
  .menu-image-lightbox {
    padding: var(--space-4);
  }

  .menu-image-lightbox__content {
    padding: var(--space-5);
  }

  .menu-image-lightbox__close {
    top: var(--space-3);
    right: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-image-lightbox,
  .menu-image-lightbox__backdrop,
  .menu-image-lightbox__content,
  .menu-image-lightbox.open .menu-image-lightbox__content,
  .menu-image-lightbox__image,
  .menu-image-lightbox.open .menu-image-lightbox__image,
  .menu-image-lightbox__close,
  .menu-image-lightbox.open .menu-image-lightbox__close {
    transition: none;
    animation: none;
  }
}

/* WCAG 2.3.3 — disable the three always-running hero animations for users
   with vestibular conditions. Also saves CPU on low-end mobile. */
@media (prefers-reduced-motion: reduce) {
  .hero-badge,
  .hero-badge-dot,
  .hero-image-wrapper {
    animation: none;
  }
}

/* Menu Bottom CTA — combined custom orders + email */
.menu-bottom-cta {
  margin-top: var(--section-sm);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--primary-50);
  border: 2px solid var(--primary-200);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.menu-bottom-cta-card {
  padding: var(--space-10) var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.menu-bottom-cta-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.menu-bottom-cta-card .heading-4 {
  color: var(--primary-700);
  margin: 0;
}

.menu-bottom-cta-card p {
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  max-width: 280px;
  margin: 0;
  font-size: var(--text-sm);
}

.menu-bottom-cta-divider {
  width: 1px;
  height: 60%;
  background: var(--primary-200);
  align-self: center;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════ */

/* About Hero */
.about-hero {
  padding-top: calc(var(--top-bars) + var(--section-sm));
  padding-bottom: var(--section-sm);
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.about-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .about-hero-inner {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-16);
  }
}

/* About Hero Image */
.about-hero-image {
  position: relative;
  display: flex;
  justify-content: center;
}

.about-hero-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background-color: var(--primary-100);
}

.about-hero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero-badge {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background-color: white;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--primary-600);
  box-shadow: var(--shadow-md);
}

/* About Hero Content */
.about-hero-content {
  max-width: 540px;
}

.about-hero-content .overline {
  margin-bottom: var(--space-3);
  display: block;
}

.about-hero-content .heading-2 {
  color: var(--primary-600);
  margin-bottom: var(--space-4);
}

.about-hero-intro {
  color: var(--neutral-700);
  margin-bottom: var(--space-4);
  font-weight: 500;
}

.about-hero-content .body {
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

.about-hero-location {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--primary-100);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--primary-600);
}

/* About Story */
.about-story {
  padding: var(--section-md) 0;
}

.about-story-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.about-story-content .heading-3 {
  color: var(--primary-600);
  margin-bottom: var(--space-8);
}

.about-story-text {
  text-align: left;
}

.about-story-text p {
  margin-bottom: var(--space-5);
  line-height: var(--leading-relaxed);
  color: var(--neutral-600);
}

.about-story-text p:last-child {
  margin-bottom: 0;
}

.about-story-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--neutral-700);
  text-align: center;
  margin-top: var(--space-8);
}

/* About Values */
.about-values {
  padding: var(--section-md) 0;
}

.about-values-header {
  text-align: center;
  max-width: 500px;
  margin: 0 auto var(--space-12);
}

.about-values-header .heading-3 {
  color: var(--primary-600);
  margin-bottom: var(--space-3);
}

.about-values-header .body-large {
  color: var(--neutral-500);
}

.about-values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .about-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Value Card */
.value-card {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: white;
  border-radius: var(--radius-xl);
  transition: all var(--duration-normal) var(--ease-spring);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: var(--shadow-card);
}

.value-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  padding: 2px;
  background: linear-gradient(135deg, var(--primary-200), transparent, var(--primary-200));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.value-card:hover::before {
  opacity: 1;
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

/* Different accent colors for each value card */
.value-card:nth-child(1) .value-card-emoji {
  background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
}

.value-card:nth-child(2) .value-card-emoji {
  background: linear-gradient(135deg, var(--primary-50), var(--primary-150, var(--primary-100)));
}

.value-card:nth-child(3) .value-card-emoji {
  background: linear-gradient(135deg, var(--primary-200), var(--primary-300));
}

.value-card:nth-child(4) .value-card-emoji {
  background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
}

.value-card-emoji {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-spring);
}

.value-card:hover .value-card-emoji {
  transform: scale(1.1) rotate(-5deg);
}

.value-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--neutral-800);
  margin-bottom: var(--space-3);
}

.value-card-description {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════════
   ORDER PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Order Hero */
.order-hero {
  padding-top: calc(var(--top-bars) + var(--section-sm));
  padding-bottom: var(--section-sm);
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  text-align: center;
}

.order-hero-content {
  max-width: 600px;
  margin: 0 auto;
}

.order-hero .overline {
  margin-bottom: var(--space-4);
  display: block;
}

.order-hero .heading-2 {
  margin-bottom: var(--space-4);
  color: var(--primary-600);
}

.order-hero .body-large {
  color: var(--neutral-500);
}

/* Order Options Section */
.order-options {
  padding: var(--space-8) 0 var(--section-md);
  background-color: var(--bg-primary);
}

.order-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .order-options-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .order-option-custom {
    grid-column: 1 / -1;
    max-width: 420px;
    justify-self: center;
  }
}

/* Order Option Card */
.order-option-card {
  background-color: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: all var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.order-option-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.order-option-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-50) 100%);
  border-radius: var(--radius-full);
  font-size: 2.5rem;
}

.order-option-icon-doordash {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
}

.order-option-icon-doordash svg {
  width: 40px;
  height: 40px;
  color: #FF3008;
}

.order-option-card .heading-3 {
  color: var(--primary-600);
  margin-bottom: var(--space-2);
}

.order-option-subtitle {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary-400);
  margin-bottom: var(--space-4);
}

.order-option-description {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.order-option-features {
  list-style: none;
  text-align: left;
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

.order-option-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--neutral-600);
}

.order-option-features li span {
  color: var(--success);
  font-weight: 600;
}

.order-option-btn {
  width: 100%;
  justify-content: center;
}

/* Pre-Order Card */
.order-option-preorder {
  border: 2px solid var(--primary-100);
}

.order-option-preorder:hover {
  border-color: var(--primary-200);
}

/* DoorDash Card */
.order-option-doordash {
  border: 2px solid #FECACA;
}

.order-option-doordash .heading-3 {
  color: #DC2626;
}

.order-option-doordash .order-option-subtitle {
  color: #F87171;
}

/* Order Info Section */
.order-info {
  padding: var(--section-md) 0;
}

.order-info-header {
  text-align: center;
  max-width: 500px;
  margin: 0 auto var(--space-12);
}

.order-info-header .heading-3 {
  color: var(--primary-600);
  margin-bottom: var(--space-3);
}

.order-info-header .body-large {
  color: var(--neutral-500);
}

/* Order Info Steps */
.order-info-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.order-step {
  flex: 1;
  min-width: 180px;
  max-width: 220px;
  text-align: center;
  position: relative;
}

.order-step-number {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-500);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: white;
}

.order-step-emoji {
  font-size: 2rem;
  margin-bottom: var(--space-3);
}

.order-step-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--neutral-800);
  margin-bottom: var(--space-2);
}

.order-step-description {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  line-height: var(--leading-relaxed);
}

/* Order Info Cards */
.order-info-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .order-info-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.order-info-card {
  background-color: white;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

.order-info-card .heading-4 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary-600);
  margin-bottom: var(--space-4);
}

.order-info-card .heading-4 span {
  font-size: var(--text-xl);
}

.order-info-card p {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.order-info-card p:last-child {
  margin-bottom: 0;
}

.order-info-card strong {
  color: var(--neutral-800);
}

.order-info-card em {
  font-size: var(--text-xs);
  color: var(--neutral-400);
}

/* Order Info Schedule */
.order-info-schedule {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background-color: var(--primary-50);
  border-radius: var(--radius-lg);
}

.order-info-schedule h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--primary-600);
  margin-bottom: var(--space-3);
}

.order-info-schedule ul {
  list-style: none;
}

.order-info-schedule li {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  padding: var(--space-1) 0;
}

.order-info-schedule li strong {
  color: var(--neutral-800);
}

/* Delivery Rates List */
.delivery-rates-list {
  list-style: none;
}

.delivery-rates-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--primary-100);
}

.delivery-rates-list li:last-child {
  border-bottom: none;
}

.delivery-rates-list li span {
  font-size: var(--text-sm);
  color: var(--neutral-600);
}

.delivery-rates-list li strong {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--primary-600);
}

/* Wholesale Card Highlight */
.order-info-card-highlight {
  border: 2px solid var(--primary-300);
  background: linear-gradient(135deg, white 0%, var(--primary-50) 100%);
  position: relative;
  overflow: hidden;
}

.order-info-card-highlight::before {
  content: 'WHOLESALE';
  position: absolute;
  top: 12px;
  right: -32px;
  background: var(--primary-500);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 40px;
  transform: rotate(45deg);
}

/* Pricing Items */
.order-info-pricing {
  margin: var(--space-4) 0;
}

.pricing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background-color: white;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  border: 1px solid var(--primary-100);
}

.pricing-item:last-child {
  margin-bottom: 0;
}

.pricing-label {
  font-size: var(--text-sm);
  color: var(--neutral-600);
}

.pricing-value {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--primary-600);
}

.order-info-note {
  font-size: var(--text-xs) !important;
  color: var(--neutral-400) !important;
  text-align: center;
  margin-top: var(--space-2);
}

/* Contact Card */
.order-info-card:last-child {
  text-align: center;
}

.order-info-card .btn {
  width: 100%;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   FAQ SECTION
   ═══════════════════════════════════════════════════════════════ */
.order-faq {
  padding: var(--space-16) 0;
}

.order-faq-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.order-faq-header .heading-3 {
  margin-bottom: var(--space-3);
}

.order-faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.order-faq-item {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.order-faq-item:hover {
  border-color: var(--primary-200);
}

.order-faq-item[open] {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-sm);
}

.order-faq-question {
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--neutral-800);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: color 0.3s ease;
}

.order-faq-question::-webkit-details-marker {
  display: none;
}

.order-faq-question::after {
  content: "+";
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--primary-500);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.order-faq-item[open] .order-faq-question::after {
  transform: rotate(45deg);
}

.order-faq-question:hover {
  color: var(--primary-600);
}

.order-faq-answer {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--neutral-600);
  line-height: 1.7;
  font-size: var(--text-sm);
}

/* Footer location */
.footer-location {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  margin-bottom: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
  /* Hero adjustments - compact for mobile.
     padding-top resolves to navbar + trust strip via the responsive token. */
  .hero {
    min-height: auto;
    padding-top: var(--top-bars);
    padding-bottom: var(--space-8);
  }

  .hero-inner {
    gap: var(--space-6);
  }

  .hero-badge {
    margin-bottom: var(--space-3);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
  }

  .hero-title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
  }

  .hero-subtitle {
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--space-2);
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }

  .hero-doordash {
    width: 100%;
    margin-top: var(--space-2);
  }

  .hero-doordash .btn-doordash {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }

  .hero-image {
    display: flex;
    justify-content: center;
  }

  .hero-image-wrapper {
    max-width: 280px;
  }

  .hero-scroll {
    display: none;
  }

  /* Menu page adjustments */
  .menu-hero {
    padding-top: calc(var(--top-bars) + var(--space-10));
    padding-bottom: var(--space-10);
  }

  .menu-hero .heading-2 {
    font-size: var(--text-2xl);
  }

  .menu-tab {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
  }

  .menu-card-content {
    padding: var(--space-4);
  }

  .menu-card-name {
    font-size: var(--text-lg);
  }

  .menu-bottom-cta {
    grid-template-columns: 1fr;
  }

  .menu-bottom-cta-divider {
    width: 60%;
    height: 1px;
    justify-self: center;
  }

  .menu-bottom-cta-card {
    padding: var(--space-8) var(--space-6);
  }

  /* Order page adjustments */
  .order-hero {
    padding-top: calc(var(--top-bars) + var(--space-8));
  }

  .order-option-card {
    padding: var(--space-6);
  }

  .order-option-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }

  .order-step {
    min-width: 140px;
    max-width: 160px;
  }

  .order-step-emoji {
    font-size: 1.5rem;
  }

  .order-step-title {
    font-size: var(--text-sm);
  }

  .order-step-description {
    font-size: var(--text-xs);
  }

  .order-info-card {
    padding: var(--space-5);
  }

  /* About page adjustments */
  .about-hero {
    padding-top: calc(var(--top-bars) + var(--space-8));
  }

  .about-hero-image-wrapper {
    max-width: 280px;
  }

  .about-hero-content .heading-2 {
    font-size: var(--text-2xl);
  }

  .value-card {
    padding: var(--space-6) var(--space-4);
  }

  .value-card-emoji {
    font-size: 2rem;
  }

  /* Navigation adjustments */
  .navbar-logo {
    font-size: var(--text-lg);
  }

  .navbar-logo-icon {
    width: 32px;
    height: 32px;
  }

  /* Find Us section */
  .location-card {
    padding: var(--space-6);
  }

  .location-card-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .location-card .heading-3 {
    font-size: var(--text-xl);
  }

  /* Footer adjustments */
  .footer-main {
    gap: var(--space-5);
  }

  .footer-tagline {
    font-size: var(--text-base);
  }

  .footer-social {
    gap: var(--space-3);
  }

  .footer-social-link {
    width: 40px;
    height: 40px;
  }

  .footer-social-link svg {
    width: 18px;
    height: 18px;
  }
}

/* Small devices (phones in landscape, small tablets) */
@media (max-width: 640px) {
  .find-us-header {
    margin-bottom: var(--space-8);
  }

  .find-us-header .heading-2 {
    font-size: var(--text-2xl);
  }

  .about-values-header {
    margin-bottom: var(--space-8);
  }

  .order-info-header {
    margin-bottom: var(--space-8);
  }

  .order-info-steps {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .order-step {
    max-width: 280px;
  }
}

/* Medium devices (tablets) */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-inner {
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-subtitle {
    max-width: 32rem;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-doordash {
    display: flex;
    justify-content: center;
  }

  .hero-image {
    display: flex;
    justify-content: center;
  }

  .hero-image-wrapper {
    max-width: 500px;
  }
}

/* Tablet portrait and up */
@media (min-width: 768px) {
  .menu-tabs {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Large screens */
@media (min-width: 1280px) {
  .menu-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover animations on touch devices */
  .btn:hover {
    transform: none;
  }

  .menu-card:hover {
    transform: none;
  }

  .location-card:hover {
    transform: none;
  }

  .order-option-card:hover {
    transform: none;
  }

  .value-card:hover {
    transform: none;
  }

  /* Increase tap targets */
  .menu-tab {
    min-height: 44px;
  }

  .btn {
    min-height: 44px;
  }

  .navbar-link {
    padding: var(--space-2) var(--space-3);
  }
}

/* Ensure visibility on mobile */
@media (max-width: 768px) {
  .menu-card,
  .menu-item,
  .order-option-card,
  .order-step,
  .order-info-card,
  .value-card,
  .location-card {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .mobile-menu-link {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .menu-card-image img,
  .hero-image-wrapper img,
  .about-hero-image-wrapper img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Print styles */
@page {
  margin: 0.5in 0.4in;
}

@media print {
  /* Hide all interactive / decorative chrome */
  .navbar, .mobile-menu, .mobile-menu-overlay, .gradient-bg, .hero-scroll,
  .footer-social, .footer, .sticky-mobile-cta, .scroll-top, .trust-strip,
  .blog-sidebar, .menu-card-view-btn, .hero-actions, .hero-decoration,
  .hero-decoration-1, .hero-decoration-2,
  noscript, [data-print-hide] {
    display: none !important;
  }

  /* Ink-saving palette */
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.4;
  }
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Kill all motion */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* CRITICAL BUG FIX: .menu-card-price-main uses background-clip:text with
     transparent fill. Universal "background: transparent" above blanks the
     gradient, leaving prices INVISIBLE on print. Reset to solid black ink. */
  .menu-card-price-main {
    -webkit-text-fill-color: #000 !important;
    background: none !important;
    color: #000 !important;
    font-weight: 700;
  }

  /* Menu/product link URLs printed inline so paper is actionable.
     Prefix with the domain so root-relative paths become full URLs. */
  .menu-card-name a[href]::after {
    content: " (layskitchen.co" attr(href) ")";
    font-size: 9pt;
    font-weight: 400;
    color: #555;
  }
  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  a[href^="mailto:"]::after,
  .menu-card-image a::after { content: "" !important; }

  /* Pagination — avoid orphaned cards/headings across pages */
  .menu-card, .menu-item, article {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h1, h2, h3 {
    break-after: avoid;
  }

  /* Ensure images don't run off page */
  img { max-width: 100% !important; height: auto !important; }
}

/* Error Page */
.error-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8);
}

.error-page-inner {
  max-width: 480px;
}

.error-page-code {
  margin-bottom: var(--space-4);
}

.error-page-emoji {
  font-size: 4rem;
  margin-bottom: var(--space-6);
}

.error-page-title {
  margin-bottom: var(--space-4);
}

.error-page-message {
  margin-bottom: var(--space-8);
  color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.product-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  padding-top: var(--space-4);
}

.product-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-breadcrumb a:hover {
  color: var(--primary-500);
}

.product-breadcrumb-sep {
  color: var(--text-tertiary);
}

.product-breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
}

/* Product Detail Grid */
.product-detail {
  padding-top: calc(var(--top-bars) + var(--section-sm));
  padding-bottom: var(--space-12);
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 768px) {
  .product-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

/* Product Image */
.product-detail-image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-secondary);
}

.product-image-zoom {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: zoom-in;
}

.product-image-zoom img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-xl);
  transition: transform 0.3s ease;
}

.product-image-zoom:hover img {
  transform: scale(1.03);
}

.product-image-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: var(--surface-secondary);
  border-radius: var(--radius-xl);
}

/* Overlay the Popular / New / Protein chips on top of the product image,
   matching MenuCard's pattern so /menu/ and /[slug]/ feel like the same
   component family. The parent .product-detail-image is already
   position: relative, so this anchors to its top-left corner. */
.product-detail-tags {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  z-index: 1;
}

/* Product Info */
.product-detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-detail-category {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-detail-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.product-detail-description {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Product Specs */
.product-detail-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-secondary);
  border-radius: var(--radius-lg);
}

.product-detail-spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.product-detail-spec-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.product-detail-spec-value {
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: 500;
}

.product-detail-price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary-600);
}

.product-detail-location {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  padding: var(--space-4);
  border-left: 3px solid var(--primary-200);
  background: rgba(168, 93, 115, 0.04);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Product Actions */
.product-detail-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .product-detail-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Related Products */
.product-related {
  padding: var(--space-12) 0;
}

.product-related h2 {
  margin-bottom: var(--space-8);
  text-align: center;
}

.product-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

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

.product-related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--border-light);
}

.product-related-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.product-related-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-secondary);
}

.product-related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-related-card:hover .product-related-image img {
  transform: scale(1.05);
}

.product-related-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.product-related-info {
  padding: var(--space-4);
}

.product-related-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

.product-related-price {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary-600);
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM ORDERS PAGE
   ═══════════════════════════════════════════════════════════════ */

.custom-hero {
  padding-top: calc(var(--top-bars) + var(--section-sm));
  padding-bottom: var(--space-8);
  text-align: center;
}

.custom-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.custom-hero-content .product-breadcrumb {
  justify-content: center;
  margin-bottom: var(--space-6);
}

.custom-hero-content h1 {
  margin-bottom: var(--space-4);
}

.custom-hero-content p {
  color: var(--text-secondary);
}

/* Custom Options Grid */
.custom-options {
  padding: var(--space-8) 0 var(--space-12);
}

.custom-options h2 {
  text-align: center;
  margin-bottom: var(--space-2);
}

.custom-options-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.custom-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .custom-options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .custom-options-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.custom-option-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 1px solid var(--border-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.custom-option-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.custom-option-emoji {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}

.custom-option-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.custom-option-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Custom Process Steps */
/* Custom Options CTA */
.custom-options-cta {
  margin-top: var(--space-10);
  text-align: center;
}

.custom-options-cta p {
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  font-size: var(--text-lg);
}

.custom-cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Outline button variant */
.btn-outline {
  background: rgba(168, 93, 115, 0);
  color: var(--primary-500);
  border: 2px solid var(--primary-500);
}

.btn-outline:hover:not(:disabled) {
  background: rgba(168, 93, 115, 1);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(168, 93, 115, 0.25);
}

.btn-outline:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* Menu card link wrapper for product pages */
.menu-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  transition: color 0.2s ease;
}

.menu-card-link:hover {
  color: var(--primary-500);
}

.menu-card-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.menu-card-name a:hover {
  color: var(--primary-500);
}

/* View Details button on menu cards */
.menu-card-view-btn {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary-500);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid var(--primary-500);
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.menu-card-view-btn:hover {
  background: var(--primary-500);
  color: white;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT FAQ SECTION
   ═══════════════════════════════════════════════════════════════ */
.product-faq {
  padding: var(--section-md) 0;
}

.product-faq .heading-3 {
  margin-bottom: var(--space-8);
}

/* ═══════════════════════════════════════════════════════════════
   ORDER FORM PAGE
   ═══════════════════════════════════════════════════════════════ */
.order-form-hero {
  padding: calc(var(--top-bars) + var(--section-sm)) 0 var(--space-8);
  background: var(--bg-secondary);
  text-align: center;
}

.order-form-hero .overline {
  display: inline-block;
  margin-bottom: var(--space-3);
}

.order-form-hero .heading-2 {
  margin-bottom: var(--space-4);
}

.order-form-hero .body-large {
  max-width: 640px;
  margin: 0 auto;
}

.order-form-section {
  padding: var(--space-12) 0 var(--section-md);
}

.order-form {
  display: block;
}

.order-form-layout {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .order-form-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
}

.order-form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-10);
}

.order-form-fieldset > legend {
  margin-bottom: var(--space-5);
  padding: 0;
}

/* Drop the step legends from 36px (text-3xl from .heading-3) to 24px
   so they don't compete with the 60px page H1. They still read as
   section titles, just no longer scream. */
.order-form-fieldset > legend.heading-3 {
  font-size: var(--text-2xl);
}

.order-form-helper {
  margin-bottom: var(--space-5);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.order-form-row {
  margin-bottom: var(--space-5);
}

.order-form-row-pair {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .order-form-row-pair {
    grid-template-columns: 1fr 1fr;
  }
}

.order-form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.order-form-required {
  color: var(--primary-500);
  margin-left: 0.15em;
}

.order-form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: white;
  /* 2px so the border lands on a real pixel grid across DPRs — at 1.5px
     some integer-DPR devices snap to 1px and the input looks thinner
     than the surrounding radio pills. */
  border: 2px solid var(--neutral-300);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.order-form-input:hover {
  border-color: var(--primary-300);
}

.order-form-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(168, 93, 115, 0.18);
}

.order-form-input[aria-invalid="true"] {
  border-color: var(--error);
}

.order-form-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(199, 91, 91, 0.18);
}

.order-form-textarea {
  resize: vertical;
  min-height: 96px;
}

.order-form-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.order-form-error {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--error-light);
  color: var(--error);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Categories + product rows */
.order-form-category {
  margin-bottom: var(--space-6);
}

.order-form-category-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--primary-600);
  margin-bottom: var(--space-3);
}

.order-form-products {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.order-form-product {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3);
  background: white;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.order-form-product:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-sm);
}

.order-form-product-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.order-form-product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.order-form-product-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-base);
}

.order-form-product-serving {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.order-form-product-price {
  font-weight: 600;
  color: var(--primary-600);
  font-size: var(--text-sm);
}

@media (max-width: 480px) {
  .order-form-product {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
  }
  .order-form-product-image {
    width: 48px;
    height: 48px;
    grid-row: span 2;
  }
  .qty-stepper {
    grid-column: 2;
  }
}

/* Quantity stepper */
.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--neutral-300);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: white;
}

.qty-stepper-btn {
  width: 36px;
  height: 36px;
  font-size: var(--text-lg);
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--primary-600);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.qty-stepper-btn:hover:not(:disabled) {
  background: var(--primary-50);
}

.qty-stepper-btn:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.qty-stepper-input {
  width: 44px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--text-primary);
  -moz-appearance: textfield;
}

.qty-stepper-input::-webkit-outer-spin-button,
.qty-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-stepper-input:focus {
  outline: none;
  background: var(--primary-50);
}

/* Radios */
.order-form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.order-form-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: white;
  border: 1.5px solid var(--neutral-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-weight: 500;
  transition: border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.order-form-radio:hover {
  border-color: var(--primary-300);
}

.order-form-radio:has(input:checked) {
  border-color: var(--primary-500);
  background: var(--primary-50);
  color: var(--primary-700);
}

.order-form-radio input {
  accent-color: var(--primary-500);
}

/* Sticky summary */
.order-form-summary {
  background: var(--bg-secondary);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

@media (min-width: 960px) {
  .order-form-summary {
    position: sticky;
    top: calc(var(--top-bars) + var(--space-4));
  }
}

.order-form-summary .heading-4 {
  margin-bottom: var(--space-4);
}

.order-form-summary-empty {
  color: var(--text-tertiary);
  font-style: italic;
  padding: var(--space-4) 0;
}

.order-form-summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.order-form-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.order-form-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-4);
  margin-bottom: var(--space-5);
  border-top: 1.5px solid var(--neutral-300);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--primary-600);
}

.order-form-submit {
  width: 100%;
  justify-content: center;
}

.order-form-summary-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
}

/* Success state */
.order-form-success {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-10);
  background: var(--success-light);
  border: 1px solid var(--success);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.order-form-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  background: var(--success);
  color: white;
  font-size: var(--text-2xl);
  font-weight: 700;
  border-radius: var(--radius-full);
}

.order-form-success .heading-3 {
  margin-bottom: var(--space-3);
}

.order-form-success-summary {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: white;
  border-radius: var(--radius-md);
  text-align: left;
}

.order-form-success-summary .heading-4 {
  margin-bottom: var(--space-3);
}

.order-form-success-summary ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-3);
}

.order-form-success-summary li {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.order-form-success-meta {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Payment instructions inside the success state */
.order-form-payment {
  margin: var(--space-6) 0;
  padding: var(--space-6);
  background: white;
  border: 1.5px solid var(--primary-300);
  border-radius: var(--radius-md);
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.order-form-payment .heading-4 {
  margin-bottom: var(--space-3);
  color: var(--primary-700);
}

.order-form-payment p {
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.order-form-payment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--space-4);
}

.order-form-payment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.order-form-payment-meta code {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--primary-700);
  font-weight: 600;
  word-break: break-all;
}

.order-form-payment-meta-stack {
  flex-wrap: wrap;
}

.order-form-copy-btn {
  padding: var(--space-1) var(--space-3);
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.order-form-copy-btn:hover {
  background: var(--primary-600);
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED PRODUCTS (homepage)
   ═══════════════════════════════════════════════════════════════ */
.featured-products {
  padding: var(--section-md) 0;
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE REVIEWS BAND — "Loved by Pittsburgh"
   Renders only when data/reviews.json has real entries.
   ═══════════════════════════════════════════════════════════════ */
.homepage-reviews {
  padding: var(--section-md) 0;
  background: linear-gradient(180deg, transparent 0%, var(--primary-50) 100%);
}

.homepage-reviews-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.homepage-reviews-header .overline {
  display: inline-block;
  margin-bottom: var(--space-3);
}

.homepage-reviews-header .heading-2 {
  margin-bottom: var(--space-3);
}

.homepage-reviews-aggregate {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.homepage-reviews-aggregate span[aria-hidden="true"] {
  color: var(--accent-gold);
  font-size: var(--text-lg);
}

.homepage-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .homepage-reviews-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: turn the grid into a horizontal scroll-snap row so users swipe
   through reviews instead of stacking a tall column. */
@media (max-width: 767px) {
  .homepage-reviews-grid {
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .homepage-reviews-grid > * {
    scroll-snap-align: start;
  }
}

.featured-products-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.featured-products-header .overline {
  display: inline-block;
  margin-bottom: var(--space-3);
}

.featured-products-header .heading-2 {
  margin-bottom: var(--space-4);
}

.featured-products-header .body-large {
  max-width: 700px;
  margin: 0 auto;
}

.featured-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

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

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

.featured-product-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

.featured-product-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-card-hover);
}

.featured-product-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-secondary);
}

.featured-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.featured-product-card:hover .featured-product-image img {
  transform: scale(1.04);
}

.featured-product-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.featured-product-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--primary-700);
  line-height: var(--leading-snug);
  margin: 0;
}

.featured-product-serving {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: 0;
}

.featured-product-price {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--primary-600);
}

.featured-products-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-8);
}

.featured-products-social {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--neutral-300);
}

.featured-products-social p {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DESCRIPTION (visible on /[slug] pages)
   ═══════════════════════════════════════════════════════════════ */
.product-description {
  padding: var(--section-sm) 0;
}

.product-description .heading-3 {
  margin-bottom: var(--space-6);
  text-align: center;
}

.product-description-body {
  max-width: 760px;
  margin: 0 auto var(--space-8);
}

.product-description-body p {
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.product-description-meta {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-5);
  background: white;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
}

.product-description-meta p {
  margin: 0;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.product-description-meta p + p {
  border-top: 1px solid var(--neutral-300);
}

.product-description-meta strong {
  color: var(--primary-700);
  margin-right: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT — Visit Us block
   ═══════════════════════════════════════════════════════════════ */
.about-visit {
  padding: var(--section-sm) 0 var(--section-md);
}

.about-visit-card {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-8);
  background: white;
  border: 1px solid var(--primary-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.about-visit-card .heading-3 {
  margin-bottom: var(--space-4);
}

.about-visit-card .body-large {
  margin-bottom: var(--space-5);
}

.about-visit-address {
  display: inline-block;
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-5);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-style: normal;
}

.about-visit-address a {
  color: var(--primary-700);
  text-decoration: none;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.about-visit-address a:hover {
  text-decoration: underline;
}

.about-visit-card p {
  margin: var(--space-2) 0;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT story CTA buttons
   ═══════════════════════════════════════════════════════════════ */
.about-story-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════
   MENU PAGE — intro paragraph
   ═══════════════════════════════════════════════════════════════ */
.menu-hero-intro {
  max-width: 760px;
  margin: var(--space-5) auto 0;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.menu-hero-intro strong {
  color: var(--primary-700);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER address (overrides legacy footer-location)
   ═══════════════════════════════════════════════════════════════ */
.footer-location {
  margin: var(--space-2) 0 var(--space-4);
  font-style: normal;
}

.footer-location a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-location a:hover {
  color: var(--primary-500);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   BLOG — index list
   ═══════════════════════════════════════════════════════════════ */
.blog-hero {
  padding: calc(var(--top-bars) + var(--section-sm)) 0 var(--space-8);
  background: var(--bg-secondary);
}

.blog-hero .product-breadcrumb {
  margin-bottom: var(--space-5);
}

.blog-hero .overline {
  display: inline-block;
  margin-bottom: var(--space-3);
}

.blog-hero .heading-2 {
  margin-bottom: var(--space-4);
}

.blog-hero .body-large {
  max-width: 640px;
}

.blog-list-section {
  padding: var(--space-12) 0 var(--section-md);
}

.blog-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .blog-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.blog-list-item {
  margin: 0;
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-card-hover);
}

.blog-card-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-secondary);
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.04);
}

.blog-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.blog-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--primary-700);
  line-height: var(--leading-snug);
  margin: 0;
}

.blog-card-excerpt {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.blog-card-readmore {
  margin-top: auto;
  color: var(--primary-500);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════
   BLOG — post detail
   ═══════════════════════════════════════════════════════════════ */
.blog-post {
  padding-bottom: var(--section-md);
}

.blog-post-header {
  padding: calc(var(--top-bars) + var(--section-sm)) 0 var(--space-6);
  background: var(--bg-secondary);
}

.blog-post-header .product-breadcrumb {
  margin-bottom: var(--space-4);
}

.blog-post-category {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--primary-100);
  color: var(--primary-700);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.blog-post-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--primary-700);
  margin: 0 0 var(--space-4);
  max-width: 800px;
}

.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.blog-post-hero-image {
  margin: 0 auto;
  max-width: 1200px;
  padding: var(--space-8) var(--container-padding) 0;
}

.blog-post-hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.blog-post-body {
  max-width: 720px;
  margin: var(--space-10) auto 0;
  /* Long-form reading: 18px (text-lg) is the comfortable lower bound
     for sustained article reading. 16px (text-base) felt cramped. */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.blog-post-body p {
  margin: 0 0 var(--space-5);
}

.blog-post-body h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--primary-700);
  margin: var(--space-10) 0 var(--space-4);
  line-height: var(--leading-snug);
}

.blog-post-body h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--text-primary);
  margin: var(--space-8) 0 var(--space-3);
}

.blog-post-body ul,
.blog-post-body ol {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
  list-style-position: outside;
}

.blog-post-body ul {
  list-style: disc;
}

.blog-post-body ol {
  list-style: decimal;
}

.blog-post-body li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
}

.blog-post-body a {
  color: var(--primary-500);
  text-decoration: underline;
  text-decoration-color: rgba(168, 93, 115, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.blog-post-body a:hover {
  text-decoration-color: var(--primary-500);
}

.blog-post-body strong {
  color: var(--text-primary);
  font-weight: 600;
}

.blog-post-tags {
  max-width: 720px;
  margin: var(--space-8) auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.blog-post-tag {
  padding: var(--space-1) var(--space-3);
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
}

.blog-post-cta {
  max-width: 720px;
  margin: var(--space-10) auto 0;
  padding: var(--space-8);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  text-align: center;
}

.blog-post-cta .heading-3 {
  margin-bottom: var(--space-3);
}

.blog-post-cta p {
  margin-bottom: var(--space-5);
  color: var(--text-secondary);
}

.blog-post-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* Related posts */
.blog-related {
  padding: var(--section-md) 0;
  background: var(--bg-secondary);
}

.blog-related .heading-3 {
  margin-bottom: var(--space-8);
  text-align: center;
}

.blog-related-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .blog-related-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-related-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--neutral-300);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.blog-related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.blog-related-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.blog-related-card div {
  padding: var(--space-5);
}

.blog-related-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--primary-700);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-snug);
}

.blog-related-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERNAL LINK STRIPS — SEO/AEO internal linking pass
   Used by the menu intro, the menu page blog strip, the product-detail blog
   callout, and the order-form trust paragraph. Designed to read as soft
   editorial callouts, not banner ads.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inline prose links inside the menu hero intro */
.menu-prose-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(
    to right,
    var(--primary-500),
    var(--primary-500)
  );
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

.menu-prose-link:hover,
.menu-prose-link:focus-visible {
  color: var(--text-link-hover);
  background-size: 100% 2px;
}

/* Menu page → blog strip (soft pink callout, simple bullet list) */
.menu-blog-strip {
  background-color: var(--bg-secondary);
  padding: var(--section-sm) 0;
  border-top: 1px solid var(--bg-tertiary);
}

/* Overline label + heading match the .featured-products-header rhythm
   so this section reads as part of the same visual family. */
.menu-blog-strip .overline {
  display: inline-block;
  margin-bottom: var(--space-3);
}

.menu-blog-strip h2 {
  margin: 0 0 var(--space-4);
  color: var(--primary-700);
}

.menu-blog-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.menu-blog-strip-list li {
  margin: 0;
}

.menu-blog-strip-list a {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-link);
  text-decoration: none;
  padding-bottom: 2px;
  line-height: var(--leading-snug);
}

.menu-blog-strip-list a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-500);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--ease-out);
}

.menu-blog-strip-list a:hover::after,
.menu-blog-strip-list a:focus-visible::after {
  width: 100%;
}

/* Product detail → "Read the story" callout. Center-aligned so it
   matches the surrounding sections (.product-description h2,
   .product-faq h2, .product-related h2 are all centered) instead of
   floating left and looking orphaned. */
.product-related-blog {
  background-color: var(--bg-secondary);
  padding: var(--section-sm) 0;
  text-align: center;
}

.product-related-blog h2 {
  margin: 0 0 var(--space-3);
  color: var(--primary-700);
}

.product-related-blog ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.product-related-blog li {
  margin: 0;
  display: inline-block;
}

.product-related-blog a {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-link);
  text-decoration: none;
  padding-bottom: 2px;
  line-height: var(--leading-snug);
}

.product-related-blog a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-500);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--ease-out);
}

.product-related-blog a:hover::after,
.product-related-blog a:focus-visible::after {
  width: 100%;
}

/* Order-form trust paragraph (above the form). Reads as a real
   sentence — not a footnote — to bridge the 60px H1 and the form. */
.order-form-trust {
  margin: var(--space-4) auto var(--space-8);
  max-width: 38rem;
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.order-form-trust a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-normal) var(--ease-out);
}

.order-form-trust a:hover,
.order-form-trust a:focus-visible {
  color: var(--text-link-hover);
}

/* Local Business Strip — visible NAP under hero for local SEO + UX */
.local-strip {
  background-color: var(--surface-secondary, #faf7f2);
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  padding: 0.75rem 0;
  font-size: 0.95rem;
}

.local-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.25rem;
  text-align: center;
}

.local-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-primary, #1a1a1a);
  text-decoration: none;
  line-height: 1.4;
}

.local-strip-item[href]:hover,
.local-strip-item[href]:focus-visible {
  color: var(--text-link-hover, #8a4500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.local-strip-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-link, #b85c00);
}

.local-strip-icon svg {
  width: 1rem;
  height: 1rem;
}

.local-strip-dot {
  opacity: 0.4;
  font-weight: 700;
}

@media (max-width: 640px) {
  .local-strip {
    font-size: 0.875rem;
    padding: 0.6rem 0;
  }

  .local-strip-inner {
    gap: 0.25rem 0.8rem;
  }

  /* Hide separators on mobile to avoid orphan dots when wrapping */
  .local-strip-dot {
    display: none;
  }
}