:root {
  --maroon: #7a1f1a;
  --maroon-dark: #5c1613;
  --orange: #e8730a;
  --orange-light: #ffb454;
  --cream: #fff8f0;
  --cream-dark: #f5e9d8;
  --charcoal: #2b2320;
  --gray: #6b6058;
  --white: #ffffff;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(43, 35, 32, 0.12);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.5;
  max-width: 100%;
}

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

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--maroon);
  color: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.logo-icon {
  height: 52px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.logo-wordmark {
  height: 34px;
  width: auto;
  display: block;
}

.logo-mark-footer { justify-content: center; margin-bottom: 12px; }
.logo-mark-footer .logo-icon { height: 44px; }
.logo-mark-footer .logo-wordmark { height: 28px; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav a {
  text-decoration: none;
  color: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.main-nav a:hover { opacity: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(232, 115, 10, 0.35);
}
.btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,0.6);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.6rem;
  cursor: pointer;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-cart-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.header-cart-count {
  position: absolute;
  top: -4px;
  right: -8px;
  background: var(--orange);
  color: var(--white);
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0 4px;
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  color: var(--white);
  padding: 64px 0 80px;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-tag {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: 3rem;
  line-height: 1.05;
  margin: 0 0 16px;
  font-weight: 900;
}
.hero h1 span { color: var(--orange-light); }

.hero p.lead {
  font-size: 1.15rem;
  opacity: 0.92;
  max-width: 480px;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-info {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  opacity: 0.9;
}
.hero-info div { display: flex; align-items: center; gap: 8px; }

.hero-image {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  transform: rotate(1.5deg);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }

/* Hero scroll-scrub video — one 100vh section; the video plays a one-shot
   logo-reveal animation and the text content sits inside the SAME section,
   pushed down against the bottom edge so it never covers the logo once the
   video settles on its final frame. */
.hero-scrub {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--maroon-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-scrub-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* On wide/short viewports, filling the width with `cover` forces a huge
     zoom that squeezes the whole logo-then-food sequence into a thin
     vertical sliver — barely any of it stays on screen at once. `contain`
     guarantees the full clip is always visible (letterboxed with the
     section's own maroon background on the sides on very wide screens)
     instead of gambling on how much any given aspect ratio can crop away.
     Mobile overrides this back to `cover` below, since portrait phones are
     already height-bound there and cover crops only the sides. */
  object-fit: contain;
  object-position: center top;
  z-index: 1;
}
/* Fills the pillarbox bars that `contain` leaves on wide/short desktop
   viewports with a heavily blurred, scaled-up copy of the hero still frame
   instead of flat maroon — the full, undistorted video on top (z-index 1
   above) still shows every frame with nothing cropped, so this is purely a
   cosmetic backdrop and never affects what's actually visible. A static
   image on purpose, not a second <video>: two copies of the same clip
   autoplaying at once fought each other for decode resources on some
   devices and could stop the foreground video from starting at all. Hidden
   on mobile below, where the foreground video already covers edge-to-edge. */
.hero-scrub-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("hero-intro-poster.jpg?v=2");
  background-size: cover;
  background-position: center top;
  transform: scale(1.2);
  filter: blur(35px) brightness(0.95) saturate(1.15);
  z-index: 0;
}
.hero-scrub-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(35,15,12,0.65) 0%, rgba(35,15,12,0.55) 45%, rgba(35,15,12,0.85) 100%);
}
.hero-scrub-content {
  position: relative;
  z-index: 3;
  color: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  /* Whether the video ends up height-bound via `cover` (mobile) or via
     `contain` (desktop), the rendered video height always matches the
     section's own height exactly — so a viewport-height-relative padding
     lands at the same fractional point in the source clip either way,
     reliably clearing the logo before any text starts. Buttons still pin
     to the bottom via margin-top: auto on .hero-actions below. */
  height: 100%;
  box-sizing: border-box;
  padding: 43vh 24px 40px;
}
.hero-scrub-content .hero-actions { margin-top: auto; }
.hero-scrub-content .hero-tag { margin-bottom: 14px; }
.hero-scrub-content h1 {
  font-size: 3.2rem;
  line-height: 1.05;
  margin: 0 0 14px;
  font-weight: 900;
}
.hero-scrub-content h1 span { color: var(--orange-light); }
.hero-scrub-content p.lead {
  font-size: 1.15rem;
  opacity: 0.95;
  margin-bottom: 22px;
}
.hero-scrub-content .hero-actions { justify-content: center; }
.hero-scrub-content .hero-info { justify-content: center; }

/* Section headings */
.section { padding: 72px 0; }
.section-alt { background: var(--cream-dark); }

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}
.section-head .eyebrow {
  color: var(--orange);
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 10px;
  display: block;
}
.section-head h2 {
  font-size: 2.1rem;
  margin: 0 0 12px;
  color: var(--maroon-dark);
}
.section-head p { color: var(--gray); margin: 0; }

.photo-disclaimer {
  text-align: center;
  color: var(--gray);
  font-size: 0.82rem;
  font-style: italic;
  margin: 32px 0 0;
}

/* Dish cards grid */
.dish-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.dish-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.dish-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.dish-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(43,35,32,0.18);
}

.dish-card .dish-img { aspect-ratio: 1/1; overflow: hidden; }
.dish-card .dish-img img { width: 100%; height: 100%; object-fit: cover; }

.dish-body { padding: 18px 20px 22px; }
.dish-body h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: var(--maroon-dark);
}
.dish-body p {
  margin: 0 0 12px;
  color: var(--gray);
  font-size: 0.9rem;
}
.dish-price {
  font-weight: 800;
  color: var(--orange);
  font-size: 1.05rem;
}

/* Beverages banner card */
.wide-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: stretch;
}
.wide-card img { width: 100%; height: 100%; object-fit: cover; }
.wide-card .wide-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wide-body h3 { color: var(--maroon-dark); font-size: 1.4rem; margin: 0 0 10px; }
.wide-body p { color: var(--gray); margin: 0 0 16px; }

/* Combos */
.combo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.combo-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.combo-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(43,35,32,0.18); }
.combo-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.combo-card .combo-name {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 0;
  font-weight: 700;
  color: var(--charcoal);
}
.combo-card .combo-name small { display: block; font-weight: 500; color: var(--gray); font-size: 0.85rem; margin-top: 2px; }
.combo-card .combo-price {
  display: inline-flex;
  margin: 12px 20px 20px;
  background: var(--cream-dark);
  color: var(--maroon-dark);
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  width: fit-content;
}

/* CTA banner */
.cta-banner {
  background: var(--orange);
  color: var(--white);
  text-align: center;
  padding: 56px 0;
}
.cta-banner h2 { font-size: 2rem; margin: 0 0 12px; }
.cta-banner p { opacity: 0.95; margin: 0 0 26px; }
.cta-banner .btn-outline { border-color: rgba(255,255,255,0.7); }
.cta-banner .btn-primary { background: var(--maroon); box-shadow: 0 6px 16px rgba(122,31,26,0.4); }

/* Footer */
.site-footer {
  background: var(--charcoal);
  color: rgba(255,255,255,0.85);
  padding: 48px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-grid h4 {
  color: var(--white);
  margin: 0 0 14px;
  font-size: 1rem;
}
.footer-grid p, .footer-grid a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.9rem;
  margin: 0 0 8px;
  display: block;
}
.footer-grid a:hover { color: var(--orange-light); }
.footer-social {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}
a.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.footer-social-link:hover { background: var(--orange); color: var(--white); transform: translateY(-2px); }
.footer-social-link svg { width: 18px; height: 18px; }
.footer-simple .footer-social { justify-content: center; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}
.footer-bottom a { color: rgba(255,255,255,0.7); text-decoration: underline; }
.footer-bottom a:hover { color: var(--orange-light); }

/* Menu page specific */
.menu-hero {
  background: var(--maroon);
  color: var(--white);
  padding: 48px 0;
  text-align: center;
}
.menu-hero h1 { font-size: 2.3rem; margin: 0 0 10px; }
.menu-hero p { opacity: 0.9; margin: 0; }

.legal-content { max-width: 720px; margin: 0 auto; line-height: 1.65; }
.legal-content h2 { color: var(--maroon-dark); font-size: 1.25rem; margin: 32px 0 12px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin: 0 0 16px; color: var(--charcoal); }
.legal-content ul { margin: 0 0 16px; padding-left: 22px; color: var(--charcoal); }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--orange); font-weight: 700; }

.menu-section { padding: 56px 0; border-bottom: 1px solid var(--cream-dark); }
.menu-section:last-of-type { border-bottom: none; }

.menu-section h2 {
  color: var(--maroon-dark);
  font-size: 1.6rem;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.menu-note {
  color: var(--gray);
  font-size: 0.9rem;
  margin: 0 0 24px;
  font-style: italic;
}

/* Full-width video banner above a menu section's table (Poutines, Sous-marins).
   Desktop: wide rectangle filling the section width. Mobile: natural video
   aspect ratio, no forced cropping (overridden in the 700px breakpoint). */
.menu-video-banner {
  margin: 0 0 24px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 21/9;
  background: var(--charcoal);
}
.menu-video-banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.table-scroll .menu-table { box-shadow: none; }

.menu-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.menu-table th {
  background: var(--cream-dark);
  color: var(--maroon-dark);
  text-align: left;
  padding: 12px 18px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.menu-table th.price-col, .menu-table td.price-col { text-align: right; white-space: nowrap; }
.menu-table td {
  padding: 12px 18px;
  border-top: 1px solid var(--cream-dark);
  font-size: 0.95rem;
}
.menu-table tr:hover td { background: #fffaf3; }
.menu-table td.price-col { font-weight: 700; color: var(--orange); }

/* Size selector + add-to-cart column inside menu tables */
.menu-table th.size-head { width: 46%; }
.menu-table th.add-head { width: 90px; }
.size-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.size-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--charcoal);
  cursor: pointer;
}
.size-option input[type="radio"] {
  accent-color: var(--orange);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.size-option .opt-price { font-weight: 700; color: var(--orange); margin-left: auto; padding-left: 12px; }
.menu-table td.add-col { text-align: center; white-space: nowrap; }

.btn-add {
  background: var(--orange);
  color: var(--white);
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  white-space: nowrap;
}
.btn-add:hover { background: #d1650a; transform: translateY(-1px); }
.btn-add.added { background: var(--maroon); }

/* Floating cart button */
.cart-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  background: var(--maroon);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 16px 22px;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.15s;
}
.cart-fab:hover { transform: translateY(-3px); }
.cart-fab .cart-count {
  background: var(--orange);
  color: var(--white);
  border-radius: 999px;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  padding: 0 6px;
}

/* Cart panel */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 12, 0.55);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--cream);
  z-index: 301;
  box-shadow: -12px 0 40px rgba(0,0,0,0.25);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
.cart-panel.open { transform: translateX(0); }

.cart-header {
  background: var(--maroon);
  color: var(--white);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-header h3 { margin: 0; font-size: 1.2rem; }
.cart-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.cart-empty { color: var(--gray); text-align: center; padding: 40px 0; }
/* Full-screen "thank you" takeover shown after an order is successfully
   sent — the video plays once, then the message + return button fade in
   below it once it ends (see cart.js). Not dismissible by clicking the
   backdrop: the button is the only intended way out. */
.order-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(20, 12, 10, 0.88);
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.order-confirm-overlay.open { display: flex; opacity: 1; }
.order-confirm-card {
  width: min(92vw, 480px);
  background: var(--cream);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.order-confirm-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--maroon-dark); }
.order-confirm-message {
  padding: 26px 26px 30px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.order-confirm-message.show { opacity: 1; transform: translateY(0); }
.order-confirm-message h3 { color: var(--maroon-dark); font-size: 1.25rem; margin: 0 0 20px; line-height: 1.4; }
.order-confirm-message .btn { width: 100%; justify-content: center; }

.cart-clear-btn {
  display: block;
  margin: 0 0 14px auto;
  background: none;
  border: none;
  color: var(--gray);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.cart-clear-btn:hover { color: var(--maroon-dark); }

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cream-dark);
}
.cart-item-info { flex: 1; }
.cart-item-name { font-weight: 700; color: var(--maroon-dark); font-size: 0.95rem; }
.cart-item-size { color: var(--gray); font-size: 0.82rem; margin-top: 2px; }
.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.qty-btn {
  background: var(--cream-dark);
  border: none;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  color: var(--maroon-dark);
  touch-action: manipulation;
  flex-shrink: 0;
}
.qty-value { font-weight: 700; min-width: 20px; text-align: center; }
.cart-item-price { font-weight: 800; color: var(--orange); white-space: nowrap; }
.cart-item-remove {
  background: none;
  border: none;
  color: var(--gray);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 6px;
  padding: 0;
}

.cart-totals { padding: 14px 0 0; }
.cart-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--gray);
  padding: 3px 0;
}
.cart-totals-row.cart-total-grand {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--maroon-dark);
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--cream-dark);
}
.cart-delivery-hint {
  font-size: 0.78rem;
  color: var(--gray);
  text-align: right;
  margin: -2px 0 4px;
}
.cart-delivery-hint.is-free {
  color: #15803d;
  font-weight: 700;
}

.order-type-toggle {
  display: flex;
  gap: 10px;
  margin: 18px 0;
}
.order-type-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid var(--cream-dark);
  background: var(--white);
  font-weight: 700;
  color: var(--gray);
  cursor: pointer;
  font-size: 0.9rem;
}
.order-type-btn.active {
  border-color: var(--orange);
  color: var(--orange);
  background: #fff4e8;
}

.cart-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.cart-form label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--charcoal);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cart-form input, .cart-form textarea {
  border: 1px solid var(--cream-dark);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--white);
}
.cart-form textarea { resize: vertical; min-height: 50px; }
.cart-field-note { font-size: 0.78rem; color: var(--gray); margin: -4px 0 0; }

.cart-footer {
  padding: 18px 24px 24px;
  border-top: 1px solid var(--cream-dark);
  background: var(--cream-dark);
}
.cart-footer .btn { width: 100%; justify-content: center; margin-bottom: 10px; }
.cart-error {
  color: #b3261e;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 10px;
  display: none;
}
.cart-error.show { display: block; }

/* Flavor picker modal (canned drinks) */
.flavor-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 12, 0.55);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.flavor-modal-overlay.open { opacity: 1; pointer-events: auto; }

.flavor-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 401;
  background: var(--cream);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  padding: 28px 26px 24px;
  width: 90%;
  max-width: 380px;
  max-height: 82vh;
  overflow-y: auto;
  text-align: center;
}
.flavor-modal.open {
  display: block;
  animation: flavor-modal-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.flavor-modal.closing {
  animation: flavor-modal-out 0.25s ease forwards;
}
@keyframes flavor-modal-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
@keyframes flavor-modal-out {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(6deg); }
}
.flavor-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--gray);
  cursor: pointer;
  line-height: 1;
}
.flavor-modal-icon { font-size: 2.4rem; margin-bottom: 6px; }
.flavor-modal h3 { color: var(--maroon-dark); margin: 0 0 4px; font-size: 1.25rem; }
.flavor-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 24px;
}
.flavor-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--cream-dark);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.flavor-option:hover { background: var(--cream-dark); }
.flavor-option.selected { border-color: var(--orange); background: #fff4e8; }
.flavor-option input[type="radio"] { accent-color: var(--orange); width: 18px; height: 18px; cursor: pointer; }
.flavor-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.2);
}
.flavor-name { font-weight: 700; color: var(--charcoal); }
.flavor-modal-add { width: 100%; justify-content: center; }

/* Quick-nav floating shortcut (menu page) — hidden via a small, element-relative
   transform (not a huge vw-based offset) plus visibility/pointer-events. A
   `position: fixed` element transformed by a large viewport-relative distance
   is a known Mobile Safari trap: it can corrupt the page's own horizontal
   scroll bounds, causing the whole page to rubber-band sideways on scroll —
   invisible in desktop/Chrome testing, very visible on a real iPhone. */
.quick-nav-wrap {
  position: fixed;
  bottom: 92px;
  right: 24px;
  z-index: 199;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: translateX(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s, visibility 0s linear 0.35s;
}
.quick-nav-wrap.visible {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
}

.quick-nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--orange);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  cursor: pointer;
}
.quick-nav-arrow-icon {
  color: var(--orange);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  animation: nudge-left 1.4s infinite;
}
.quick-nav-wrap.used .quick-nav-arrow-icon { animation: none; opacity: 0.6; }
@keyframes nudge-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}
.quick-nav-btn img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }

.quick-nav-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.quick-nav-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.quick-nav-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--charcoal);
  font-weight: 700;
  font-size: 0.9rem;
}
.quick-nav-menu a:hover { background: var(--cream-dark); }

.menu-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

/* Menu section: photo(s) on the left, matching menu content on the right */
.menu-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
}
.menu-photos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 96px;
}
.menu-photos .dish-img { aspect-ratio: 4/3; }
.menu-photos .photo-disclaimer {
  text-align: left;
  margin: 2px 2px 0;
}
.menu-content { min-width: 0; }
.menu-content .menu-table + .menu-table { margin-top: 20px; }

/* Trust badges — infinite auto-scrolling marquee */
.trust-section { padding: 32px 0; background: var(--white); }
.trust-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  gap: 10px;
  animation: trust-scroll 30s linear infinite;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }
@keyframes trust-scroll {
  /* 8 identical badge sets are rendered in the track (see index.html) so
     that even on very wide/ultrawide screens there's always at least one
     full extra set of buffer content ahead of the visible window — with
     fewer sets, wide viewports could outrun the buffer and show a blank
     gap on the right before the loop caught up. -12.5% is exactly 1/8. */
  from { transform: translateX(-12.5%); }
  to { transform: translateX(0); }
}
.trust-item {
  flex: 0 0 auto;
  text-align: center;
  padding: 0 16px;
}
.trust-badge-img {
  width: 108px;
  height: 108px;
  margin: 0 auto 10px;
  display: block;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(43,35,32,0.15);
}
.trust-item h4 {
  margin: 0;
  color: var(--maroon-dark);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

/* How to order steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.step-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 22px;
  box-shadow: var(--shadow);
  text-align: center;
}
.step-number {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  margin: 0 auto 18px;
}
.step-card h3 { color: var(--maroon-dark); font-size: 1.05rem; margin: 0 0 8px; }
.step-card p { color: var(--gray); font-size: 0.88rem; margin: 0; line-height: 1.5; }

/* FAQ accordion */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 22px;
  font-weight: 700;
  color: var(--maroon-dark);
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: inherit;
}
.faq-icon {
  font-size: 1.4rem;
  color: var(--orange);
  transition: transform 0.25s;
  flex-shrink: 0;
  line-height: 1;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 22px;
}
.faq-item.open .faq-answer { max-height: 320px; padding: 0 22px 20px; }
.faq-answer p { margin: 0; color: var(--gray); font-size: 0.92rem; line-height: 1.6; }

/* Contact + map */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 28px;
  align-items: stretch;
}
.contact-info {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.contact-info h3 { color: var(--maroon-dark); margin: 0 0 18px; font-size: 1.2rem; }
.contact-info p { margin: 0 0 12px; color: var(--charcoal); font-size: 0.95rem; }
.contact-info a { color: var(--maroon-dark); font-weight: 700; }
.contact-map {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 340px;
}
.contact-map iframe { width: 100%; height: 100%; min-height: 340px; display: block; }

/* Simple footer */
.footer-simple {
  padding: 28px 0;
  text-align: center;
}
.footer-simple .logo-badge-footer { display: inline-flex; margin: 0 auto 12px; }
.footer-simple p { margin: 0; color: var(--gray); font-size: 0.85rem; }
.footer-simple p a { color: var(--orange); text-decoration: underline; }
.footer-simple p a:hover { color: var(--orange-light); }

/* Product carousel */
.carousel-wrap { position: relative; margin: 0 0 8px; }
.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 18px;
  scrollbar-width: thin;
}
.carousel-card {
  scroll-snap-align: start;
  flex: 0 0 270px;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.carousel-img { aspect-ratio: 4/3; overflow: hidden; }
.carousel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.carousel-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--cream-dark);
  color: var(--maroon-dark);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.carousel-body h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--maroon-dark); }
.carousel-body p { margin: 0 0 14px; color: var(--gray); font-size: 0.85rem; flex: 1; }
.carousel-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.carousel-price { font-weight: 800; color: var(--orange); font-size: 1.05rem; white-space: nowrap; }
.carousel-actions { display: flex; align-items: center; gap: 8px; }
.carousel-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-dark);
  border-radius: 999px;
  padding: 4px 6px;
}
.carousel-qty-btn {
  background: none;
  border: none;
  width: 22px;
  height: 22px;
  font-weight: 800;
  color: var(--maroon-dark);
  cursor: pointer;
  font-size: 0.95rem;
}
.carousel-qty-value { min-width: 14px; text-align: center; font-weight: 700; font-size: 0.88rem; }
.carousel-add-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  border: none;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.carousel-add-btn:hover { background: #d1650a; transform: scale(1.07); }
.carousel-add-btn.added { background: var(--maroon); }

.carousel-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow);
  border: none;
  color: var(--maroon-dark);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-arrow:hover { background: var(--cream-dark); }
.carousel-prev { left: -20px; }
.carousel-next { right: -20px; }

/* Homepage categories: vertical stack of clickable, auto-playing video cards.
   Cards enter with a translateX(±48px) reveal animation (see .reveal-left /
   .reveal-right below) — per the CSS Transforms spec, that offset counts
   toward the page's scrollable area for as long as the card hasn't been
   revealed yet, which is real, spec-compliant horizontal overflow (not a
   rendering bug). `overflow-x: hidden` here clips it at the source instead
   of relying solely on the page-level `overflow-x: hidden` on <html>. */
.category-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-x: hidden;
}
.category-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.category-media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--charcoal);
}
.category-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.category-body {
  padding: 28px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.category-body h3 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  color: var(--maroon-dark);
}
.category-body p {
  margin: 0 0 16px;
  color: var(--gray);
  font-size: 0.95rem;
}
.category-cta {
  color: var(--orange);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.category-cta:hover { text-decoration: underline; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card-grid .carousel-card { height: 100%; }

.carousel-note {
  text-align: center;
  color: var(--gray);
  font-size: 0.82rem;
  font-style: italic;
  margin: 0 0 32px;
}

/* Customer reviews */
.review-card {
  scroll-snap-align: start;
  flex: 0 0 320px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}
.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-who { min-width: 0; }
.review-name {
  font-weight: 700;
  color: var(--maroon-dark);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-meta {
  color: var(--gray);
  font-size: 0.76rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-stars {
  color: #f5a623;
  letter-spacing: 2px;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.review-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--cream-dark);
  color: var(--maroon-dark);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.review-text {
  color: var(--charcoal);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.reveal-left { transform: translateX(-48px); }
.reveal.reveal-right { transform: translateX(48px); }
.reveal.reveal-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Responsive */
@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .main-nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--maroon);
    flex-direction: column;
    padding: 20px 24px 28px;
    gap: 16px;
  }
  .hero .container { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.2rem; }
  .hero-image { order: -1; max-width: 420px; margin: 0 auto; }
  /* Portrait phones are already height-bound under `cover` (the video's
     height matches the section, only the sides get cropped), so it stays
     full-bleed here instead of the desktop `contain` letterbox. */
  .hero-scrub-video { object-fit: cover; }
  .hero-scrub-bg { display: none; }
  .hero-scrub-overlay { background: linear-gradient(180deg, rgba(35,15,12,0.45) 0%, rgba(35,15,12,0.35) 45%, rgba(35,15,12,0.72) 100%); }
  .hero-scrub-content h1,
  .hero-scrub-content p.lead { text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
  .hero-scrub-content { padding: 43vh 20px 20px; }
  .hero-scrub-content .hero-tag { font-size: 0.68rem; padding: 5px 12px; margin-bottom: 10px; }
  .hero-scrub-content h1 { font-size: clamp(1rem, 5.15vw, 1.6rem); margin-bottom: 8px; white-space: nowrap; }
  .hero-scrub-content p.lead { font-size: 0.85rem; margin-bottom: 0; line-height: 1.35; }
  .hero-scrub-content .hero-actions { gap: 8px; margin-top: auto; margin-bottom: 0; }
  .hero-scrub-content .hero-actions .btn { padding: 10px 18px; font-size: 0.88rem; }
  .hero-scrub-content .hero-info { display: none; }
  .dish-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-featured-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-layout { grid-template-columns: 1fr; }
  .menu-photos { position: static; flex-direction: row; flex-wrap: wrap; }
  .menu-photos .dish-card { flex: 1 1 220px; }
  .menu-photos .photo-disclaimer { flex-basis: 100%; }
  .wide-card { grid-template-columns: 1fr; }
  .wide-card img { aspect-ratio: 16/9; }
  .combo-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .cart-panel { width: 100%; }
  .cart-fab span.cart-label { display: none; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-map { min-height: 280px; }
  .contact-map iframe { min-height: 280px; }
  .carousel-arrow { display: none; }
  .carousel-card { flex-basis: 240px; }
  .review-card { flex-basis: 270px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .category-card { grid-template-columns: 1fr; }
  .category-media { aspect-ratio: 16/9; }
  .category-body { padding: 20px 22px 24px; }
  .logo-icon { height: 40px; }
  .logo-wordmark { height: 26px; }
}

/* Phone-specific rework: menu tables become stacked cards instead of a
   horizontally-scrolling table, and carousels show a peek of the next card. */
@media (max-width: 700px) {
  /* These specific banner videos are all natively square (1440x1440).
     A fixed 1:1 ratio here (instead of the previous "auto", which left the
     container's height undefined until the video's own metadata finished
     loading) shows the full frame with zero crop AND gives the container a
     real height from the very first paint — no more race where the
     autoplay-on-visible check ran against a still-zero-height element. */
  .menu-video-banner { aspect-ratio: 1 / 1; }

  .table-scroll { overflow-x: visible; box-shadow: none; border-radius: 0; }

  .menu-table thead { display: none; }
  .menu-table, .menu-table tbody { display: block; width: 100%; }
  .menu-table tr {
    display: block;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    margin-bottom: 12px;
  }
  .menu-table td {
    display: block;
    padding: 5px 0;
    border-top: none;
  }
  .menu-table td:first-child {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--maroon-dark);
    padding-bottom: 8px;
  }
  .menu-table td:first-child small {
    display: block;
    font-weight: 500;
    color: var(--gray);
    font-size: 0.82rem;
    margin-top: 3px;
  }
  .menu-table td.price-col {
    text-align: left;
    font-size: 1.15rem;
    padding-top: 2px;
  }
  .menu-table td.size-col { padding-top: 4px; }
  .menu-table td.add-col { padding-top: 12px; }
  .menu-table td.add-col .btn-add {
    width: 100%;
    padding: 13px;
    font-size: 0.92rem;
  }
  .size-option { padding: 5px 0; }
  .size-option input[type="radio"] { width: 19px; height: 19px; }
  .carousel-qty-btn { width: 28px; height: 28px; font-size: 1.1rem; }
  .carousel-add-btn { width: 44px; height: 44px; font-size: 1.2rem; }

  /* Carousels: "coverflow" style — the centered card is active/full-size,
     the cards on each side are dimmed, scaled down, and only half-visible
     behind it. Padding on the track lets the first/last card actually
     reach a centered scroll position; tapping a side card (or swiping)
     brings it to the front, and the previous active card slides to the
     other side. */
  /* Scoped to direct children of .carousel-track only — .carousel-card is
     also reused inside .card-grid (Combos, Express) as a plain, non-scrolling
     grid, which must stay untouched at full size/opacity. */
  .carousel-track > .carousel-card, .carousel-track > .review-card {
    scroll-snap-align: center;
    flex-basis: 78%;
    max-width: 300px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .carousel-track > .carousel-card:not(.is-active), .carousel-track > .review-card:not(.is-active) {
    transform: scale(0.88);
    opacity: 0.55;
  }
  .carousel-track {
    padding: 4px 11% 18px;
    scroll-padding-inline: 11%;
  }
}

@media (max-width: 520px) {
  .dish-grid { grid-template-columns: 1fr; }
  .menu-featured-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.8rem; }
  .section { padding: 48px 0; }
  .steps-grid { grid-template-columns: 1fr; }
  .faq-question { font-size: 0.92rem; padding: 16px 18px; }

  /* Combos/Express card grid: two compact cards per row instead of one big one.
     Every text block gets a fixed height (ellipsis on the title, a clamped
     min-height on the description) so price/button rows land at the exact
     same spot on every card, regardless of how the text wraps. */
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-grid .carousel-img { aspect-ratio: 1/1; }
  .card-grid .carousel-body { padding: 10px 10px 12px; }
  .card-grid .carousel-tag { font-size: 0.6rem; padding: 3px 8px; margin-bottom: 6px; }
  .card-grid .carousel-body h3 {
    font-size: 0.85rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-grid .carousel-body p {
    font-size: 0.72rem;
    margin-bottom: 8px;
    min-height: 2.5em;
    line-height: 1.25em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex-grow: 0;
  }
  .card-grid .carousel-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: auto;
  }
  .card-grid .carousel-price { font-size: 0.85rem; }
  .card-grid .carousel-actions { justify-content: space-between; }
  .card-grid .carousel-qty { padding: 3px 5px; gap: 3px; }
  .card-grid .carousel-qty-btn { width: 20px; height: 20px; font-size: 0.8rem; }
  .card-grid .carousel-qty-value { font-size: 0.75rem; min-width: 11px; }
  .card-grid .carousel-add-btn { width: 30px; height: 30px; font-size: 0.85rem; }
}

/* Category picker (menu.html — shown on arrival via a generic "Menu complet" link) */
body.category-picker-locked { overflow: hidden; }

.category-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: radial-gradient(circle at 50% 20%, rgba(122, 31, 26, 0.5), rgba(20, 12, 10, 0.72));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.category-picker-overlay.open { opacity: 1; pointer-events: auto; }

.category-picker-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 501;
  width: min(92vw, 640px);
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(165deg, var(--white) 0%, var(--cream) 100%);
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(20, 12, 10, 0.45);
  padding: 34px 30px 28px;
  text-align: center;
}
.category-picker-modal.open {
  display: block;
  animation: cp-modal-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.category-picker-modal.closing {
  animation: cp-modal-out 0.22s ease forwards;
}
@keyframes cp-modal-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.88) translateY(10px); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); }
}
@keyframes cp-modal-out {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
}

.category-picker-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream-dark);
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gray);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.category-picker-close:hover { background: var(--orange); color: var(--white); transform: rotate(90deg); }

.category-picker-header { margin-bottom: 22px; }
.category-picker-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(232, 115, 10, 0.12);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.category-picker-header h2 {
  margin: 0 0 8px;
  color: var(--maroon-dark);
  font-size: 1.5rem;
  line-height: 1.25;
}
.category-picker-header p { margin: 0; color: var(--gray); font-size: 0.92rem; }

.category-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.category-picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 8px 14px;
  border-radius: 18px;
  border: 1px solid var(--cream-dark);
  background: var(--white);
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  animation: cp-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.08s + var(--cp-i) * 0.05s);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.category-picker-modal:not(.open) .category-picker-card { animation: none; opacity: 0; }
.category-picker-card:hover {
  transform: translateY(-5px);
  border-color: var(--orange-light);
  box-shadow: 0 14px 26px rgba(122, 31, 26, 0.16);
}
@keyframes cp-card-in {
  0% { opacity: 0; transform: translateY(14px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.category-picker-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--orange) 0%, var(--maroon) 100%);
  color: var(--white);
  box-shadow: 0 8px 16px rgba(232, 115, 10, 0.28);
  transition: transform 0.2s ease;
}
.category-picker-card:hover .category-picker-icon { transform: scale(1.08) rotate(-4deg); }
.category-picker-icon svg { width: 26px; height: 26px; }
.category-picker-label { font-weight: 700; color: var(--charcoal); font-size: 0.88rem; }

.category-picker-skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--gray);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.category-picker-skip:hover { color: var(--maroon-dark); border-color: var(--maroon-dark); }
.category-picker-skip span { transition: transform 0.2s ease; }
.category-picker-skip:hover span { transform: translateY(2px); }

@media (max-width: 640px) {
  .category-picker-modal { padding: 28px 18px 22px; border-radius: 22px; }
  .category-picker-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-picker-header h2 { font-size: 1.25rem; }
  .category-picker-icon { width: 46px; height: 46px; }
  .category-picker-icon svg { width: 22px; height: 22px; }
}