/* Generated by VoiceBit — mirchi-grill */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --color-primary: #522B5B;
  --color-surface: #FFFFFF;
  --color-background: #FBF7F2;
  --color-text: #2A1810;
  --color-text-muted: #7A6A5E;
  --color-accent: #854F6C;
  --color-border: #E2D5C5;
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --border-radius: 8px;
  --border-radius-lg: 16px;
}
:root {
  --color-primary: #B23A1E;
  --color-accent: #E8A317;
  --color-surface: #FFFDF8;
  --color-background: #FBF3E6;
  --color-text: #2B1A12;
  --color-text-muted: #8A6D57;
  --color-border: #E8D9C0;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', 'Inter', system-ui, sans-serif;
  --border-radius: 10px;
  --border-radius-lg: 20px;
  --vb-logo-scale: 3;
}
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/**
 * Site base — owner.com design language (VOI-168)
 *
 * Calm neutral canvas, one confident brand colour, generous whitespace, soft
 * rounded cards on low wide shadows, pill-shaped order affordances, clean
 * normal-case type. Cuisine identity comes through the palette + display font
 * (per-cuisine tokens) and the corner radius, so it still reads as one system
 * with the VOI-166 footer.
 *
 * Custom properties set by inline <style> via tokensToCSS():
 *   --color-primary, --color-surface, --color-background, --color-text,
 *   --color-text-muted, --color-accent, --color-border,
 *   --font-display, --font-body, --border-radius, --border-radius-lg
 *
 * Card corners route through --border-radius-lg (so a per-restaurant
 * themeOverride still lands); pills are a fixed 999px to match the footer.
 */

:root {
  --vb-maxw: 1120px;
  /* Soft, low-opacity shadow scale — cards float on the page background. */
  --vb-shadow-sm:         0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --vb-shadow-card:       0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.06);
  --vb-shadow-card-hover: 0 10px 30px rgba(16, 24, 40, 0.12);
  --vb-shadow-pop:        0 24px 48px rgba(16, 24, 40, 0.18);
  --vb-shadow-bar:        0 6px 24px rgba(16, 24, 40, 0.06);
  /* Hairline separators + soft borders honour a themeOverride colorBorder. */
  --vb-hairline: rgba(16, 24, 40, 0.08);
  --vb-line:     var(--color-border, rgba(16, 24, 40, 0.10));
  /* Brand-tinted focus ring; degrades to no ring where color-mix is absent. */
  --vb-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-hidden {
  display: none;
}

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


/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
  /* Prevent two-axis rubber-band scroll on iOS/Android touchscreens — the
     page still scrolls vertically, but horizontal drag and pull-to-refresh
     bounces are contained, which eliminates the "very flexible when dragging"
     feel on phones. */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  overscroll-behavior-y: none;
}

/* When a modal (cart or checkout overlay) is open, lock the background page
   so the scrollbar disappears, background content cannot be scrolled, and the
   modal's internal scroll is the only scrollable region. */
html.vb-modal-open,
body.vb-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.vb-site {
  min-height: 100vh;
}

/* Lightbox for full-size item photos */
.vb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 24px;
  transition: background 0.25s ease;
  -webkit-user-select: none;
  user-select: none;
}

.vb-lightbox--open {
  background: rgba(0, 0, 0, 0.9);
}

.vb-lightbox[hidden] {
  display: none;
}

.vb-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: var(--border-radius);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 2;
  line-height: 1;
  -webkit-backdrop-filter: blur(4px);
}

.vb-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.vb-lightbox__hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  pointer-events: none;
  transition: opacity 0.3s;
}

.vb-lightbox__img-container {
  position: relative;
  touch-action: none;
  transform-origin: center center;
  transition: transform 0.2s ease;
  will-change: transform;
}

.vb-lightbox__img-container--zoomed {
  transition: none;
  cursor: grab;
}

.vb-lightbox__img-container--dragging {
  cursor: grabbing;
}

.vb-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
  pointer-events: none;
}

.vb-lightbox--open .vb-lightbox__img {
  transform: scale(1);
  opacity: 1;
}

/* Ordering paused banner */
.vb-ordering-paused {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.vb-ordering-paused__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  margin: 16px 0;
  background: #fef9e7;
  border: 1px solid #f5d76e;
  border-radius: var(--border-radius);
  color: #8a6d0b;
  font-size: 0.88rem;
  font-family: var(--font-body);
  line-height: 1.5;
}

.vb-ordering-paused__inner svg {
  flex-shrink: 0;
  color: #d4a017;
}

/* 2-column menu layout: sidebar nav + content (desktop only) */
.vb-menu-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  max-width: 1120px;
  margin: 0 auto;
}

.vb-menu-layout > .vb-cats {
  grid-column: 1;
  min-width: 0;
}

.vb-menu-layout > .vb-content {
  grid-column: 2;
  min-width: 0;
}

.vb-content {
  padding-top: 16px;
}



/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --vb-header-h: 73px;
  --vb-cats-h: 56px;
  /* Neutral fill for quiet controls (ADD buttons, active nav items). Matches
     the footer card's default tint but is deliberately its own variable so
     owner footer-color overrides don't repaint controls. */
  --vb-fill: #ececee;
}

@media (max-width: 768px) {
  :root { --vb-header-h: 65px; }
}

@media (max-width: 420px) {
  :root { --vb-header-h: 61px; }
}

/* The bar paints full-bleed (background + border span the viewport);
   .vb-header__inner aligns the content to the shared 1120px rhythm. */
.vb-header {
  position: sticky;
  /* Offset by the promo banner's height when present (set on :root by
     promo-banner.ts). Defaults to 0 — no banner, no shift. */
  top: var(--vb-promo-banner-h, 0px);
  z-index: 200;
  background: var(--color-background);
  background: color-mix(in srgb, var(--color-background) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--vb-hairline);
}

.vb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 32px;
}

.vb-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vb-header__logo {
  /* Owner-adjustable via branding.logoScale (emitted as --vb-logo-scale).
     Hard-capped to match the 40×40 cart button on the right of the navbar
     so a runaway scale (e.g. 5x) can't blow out the sticky header. The
     hero render site carries the full scale below.

     Sizing pattern (mirrors .vb-hero__logo): max-height + max-width: 100%
     with both axes auto so the browser drives layout off the image's
     intrinsic aspect ratio. If the cap (or the navbar's available width)
     clamps one axis, the other shrinks proportionally instead of stretching
     the box. */
  max-height: min(calc(56px * var(--vb-logo-scale, 1)), 40px);
  max-width: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.vb-header__brand:hover .vb-header__logo {
  transform: scale(1.15);
}

.vb-header__address {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
  text-decoration: none;
}

.vb-header__address:hover {
  color: var(--color-text);
}

/* Open-now status button — replaces the address in the navbar (VOI-163).
   New class (not .vb-header__address) so cuisine overrides don't clobber it.
   Dot colour is driven by [data-open-status], resolved client-side in cart.ts. */
.vb-header__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--vb-line);
  background: var(--color-background);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.vb-header__status:hover {
  border-color: var(--color-text-muted);
}

.vb-header__status-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9ca3af;
}

.vb-header__status[data-open-status="open"] .vb-header__status-dot {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.vb-header__status[data-open-status="closed"] .vb-header__status-dot {
  background: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.vb-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.vb-header__cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: var(--vb-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.vb-header__cart-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--vb-shadow-card);
  filter: brightness(1.05);
}

.vb-header__cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  background: var(--color-text);
  color: var(--color-background);
  font-size: 0.66rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 5px;
  box-shadow: 0 0 0 2px var(--color-background);
}

.vb-header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.vb-header__nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}

.vb-header__nav-link:hover,
.vb-header__nav-link--active {
  border-bottom-color: var(--color-text);
}

/* Location + method switchers — shared <details>/<summary> disclosure pattern.
   Zero-JS visual; location switcher is link-based, method switcher is click-handled
   by cart.ts but both use the same visual language. */
.vb-location-switcher,
.vb-method-switcher {
  position: relative;
  font-family: var(--font-body);
}

.vb-location-switcher__trigger,
.vb-method-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  background: var(--color-background);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.vb-location-switcher__trigger::-webkit-details-marker,
.vb-method-switcher__trigger::-webkit-details-marker {
  display: none;
}

.vb-location-switcher__trigger:hover,
.vb-method-switcher__trigger:hover {
  border-color: var(--color-text-muted);
  background: var(--color-background);
}

.vb-location-switcher__current,
.vb-method-switcher__current {
  overflow: hidden;
  text-overflow: ellipsis;
}

.vb-location-switcher__chevron,
.vb-method-switcher__chevron {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.vb-location-switcher[open] .vb-location-switcher__chevron,
.vb-method-switcher[open] .vb-method-switcher__chevron {
  transform: rotate(180deg);
}

.vb-location-switcher__menu,
.vb-method-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 220;
  margin: 0;
  padding: 6px;
  max-width: 320px;
  list-style: none;
  background: var(--color-background);
  border: 1px solid var(--vb-line);
  border-radius: 14px;
  box-shadow: var(--vb-shadow-pop);
}

/* Location labels can be long city/branch strings — keep the 220px min-width
   that edd6d0d established to avoid truncation at desktop. Method labels are
   short (Pickup / Delivery / Dine-in / Curbside) so 180px is enough. */
.vb-location-switcher__menu { min-width: 220px; }

/* Method switcher sits on the right side of the header — anchor its dropdown
   to the right edge of the trigger so it doesn't overflow the viewport. */
.vb-method-switcher__menu {
  min-width: 180px;
  left: auto;
  right: 0;
}

.vb-location-switcher__item,
.vb-method-switcher__item {
  display: block;
}

.vb-location-switcher__label,
.vb-method-switcher__label {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease;
}

a.vb-location-switcher__label:hover,
button.vb-method-switcher__label:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-text);
}

.vb-location-switcher__item--current .vb-location-switcher__label,
.vb-method-switcher__item--current .vb-method-switcher__label {
  cursor: default;
  opacity: 0.6;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The method switcher's label is a <button> so clicks are wired up by cart.ts;
   override the default button chrome to match the <a> label used by locations. */
button.vb-method-switcher__label {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* Legacy header nav — used by existing Header.tsx JSX */
.vb-logo {
  display: flex;
  align-items: center;
}

.vb-logo__badge {
  width: 44px;
  height: 44px;
  border: 2px solid var(--color-text);
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  gap: 0;
  padding: 6px;
  text-align: center;
}

.vb-logo__badge span {
  display: block;
  width: 50%;
  text-align: center;
}

.vb-logo__img {
  height: 40px;
  width: auto;
}

.vb-nav {
  display: flex;
  gap: 24px;
  position: static;
  border: none;
  background: none;
  padding: 0;
}

.vb-nav__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
  white-space: nowrap;
}

.vb-nav__link:hover,
.vb-nav__link--active {
  border-bottom-color: var(--color-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESTAURANT INFO BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-info {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 32px;
  border-bottom: 1px solid var(--color-text);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  overflow-x: auto;
}

.vb-info__detail {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO — full-bleed background with centered overlay content
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-hero {
  position: relative;
  /* 100vh on iOS Safari is the *largest* possible viewport (URL bar collapsed),
     so the hero overflows the visible area before the user scrolls. dvh tracks
     the currently-visible viewport. Leave a sliver of the menu peeking below
     the fold so the page reads as an ordering site, not a splash screen. */
  min-height: 86vh;
  min-height: 86dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.vb-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.vb-hero__bg img,
.vb-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vb-hero__overlay {
  position: absolute;
  inset: 0;
  /* Bottom-weighted scrim keeps the top of the photo bright while guaranteeing
     legible white type over the centered content. */
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.28) 0%, rgba(10, 12, 16, 0.30) 42%, rgba(10, 12, 16, 0.62) 100%);
  z-index: 1;
}

.vb-hero__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 700px;
  padding: 0 32px;
}

.vb-hero__logo {
  /* Owner-adjustable via branding.logoScale (emitted as --vb-logo-scale).
     The hero gets the full scale — it's the dramatic "make the logo huge"
     render site. Mobile breakpoints below keep the same multiplier.

     Sizing uses max-height + max-width: 100% with both axes left auto so the
     browser drives layout off the image's intrinsic aspect ratio. If the
     viewport is narrow enough that max-width kicks in first, height auto-
     shrinks proportionally instead of stretching the box (which used to
     happen when this was an explicit `height` rule paired with `width: auto`
     — width clamped to the parent while height stayed pinned at the
     calc'd value, breaking the ratio). For raster logos, growth tops out at
     the intrinsic source resolution; SVG logos scale freely. */
  max-height: calc(140px * var(--vb-logo-scale, 1));
  max-width: 100%;
  height: auto;
  width: auto;
  margin-bottom: 8px;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.vb-hero__logo:hover {
  transform: scale(1.12);
}

.vb-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}

.vb-hero__subheading {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  margin-top: 2px;
}

.vb-hero__description {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.65;
  max-width: 540px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

.vb-hero__cta {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 16px 44px;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  text-decoration: none;
  cursor: pointer;
}

.vb-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
  filter: brightness(1.05);
}

.vb-hero__custom-btns {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.vb-hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.vb-hero__action-btn {
  padding: 11px 26px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
  font-family: var(--font-body);
  text-decoration: none;
  /* Keep multi-word labels (e.g. "About Us") on a single line so every
   * button shares the same height and the row stays visually aligned. */
  white-space: nowrap;
}

.vb-hero__action-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.85);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CATEGORY NAV
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-cats {
  position: sticky;
  /* 90px = header height on desktop; + promo banner height when present. */
  top: calc(var(--vb-header-h) + var(--vb-promo-banner-h, 0px));
  z-index: 150;
  background: var(--color-background);
  padding: 16px 16px 16px 32px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Search bar — sits above category links in both sidebar and mobile nav */
.vb-cats__search {
  padding-top: 6px;
  margin-bottom: 8px;
}

.vb-cats__search-input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-family: var(--font-body);
  background: var(--color-background);
  color: var(--color-text);
  outline: none;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.vb-cats__search-input:focus {
  background: var(--color-background);
  border-color: var(--color-primary);
  box-shadow: var(--vb-ring);
}

.vb-cats__search-input::placeholder {
  color: var(--color-text-muted);
}

/* When stuck: search becomes more prominent with subtle shadow */
.vb-cats--stuck .vb-cats__search-input {
  background: var(--color-background);
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.vb-cats__bar {
  display: contents;
}

.vb-cats__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.vb-cats__list::-webkit-scrollbar {
  display: none;
}

/* Hamburger trigger — desktop hides it (the sidebar lists every category
 * already). Mobile keeps the swipe strip and exposes a tap-target for the
 * full list, mirroring DoorDash's pattern. */
.vb-cats__hamburger {
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  background: var(--color-background);
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vb-cats__hamburger:hover {
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
.vb-cats__hamburger[aria-expanded="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.vb-cats__sheet {
  display: none;
}

.vb-cats__item {
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  font-family: var(--font-body);
  text-decoration: none;
}

.vb-cats__item:hover {
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text);
}

.vb-cats__item--active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-weight: 600;
}

/* Legacy category nav — used when CategoryNav renders inside #menu with
   .vb-nav classes. Overrides the header-style .vb-nav when inside #menu. */
#menu .vb-nav {
  position: sticky;
  top: calc(54px + var(--vb-promo-banner-h, 0px));
  z-index: 150;
  background: var(--color-background);
  border-bottom: 2px solid var(--color-text);
  padding: 12px 32px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

#menu .vb-nav::-webkit-scrollbar {
  display: none;
}

#menu .vb-nav .vb-nav__link {
  padding: 6px 14px;
  border: 2px solid var(--color-text);
  border-radius: var(--border-radius);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom-width: 2px;
  transition: background-color 0.15s, color 0.15s;
}

#menu .vb-nav .vb-nav__link:hover,
#menu .vb-nav .vb-nav__link--active {
  background: var(--color-text);
  color: var(--color-background);
  border-color: var(--color-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   MENU SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

/* Veg / non-veg segmented filter — rendered above the first category when enabled */
.vb-dietary-filter {
  max-width: 1120px;
  margin: 24px auto 0;
  padding: 0 32px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.vb-dietary-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  /* Deliberately pill-shaped — the veg/non-veg filter reads as a distinct
     filter chip family, apart from the token-radius controls. */
  border-radius: 999px;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.vb-dietary-filter__btn:hover {
  border-color: var(--color-primary);
}

.vb-dietary-filter__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.vb-dietary-filter__btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.vb-dietary-filter__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  flex-shrink: 0;
}

.vb-dietary-filter__dot--veg { background: #16a34a; }
.vb-dietary-filter__dot--non-veg { background: #dc2626; }

/* The filter script sets the `hidden` attribute on filtered items / empty sections.
   The UA default `[hidden] { display: none }` is otherwise overridden by
   `.vb-menu-item { display: flex }` — so re-assert it with matching specificity. */
.vb-menu-item[hidden],
.vb-menu-section[hidden] {
  display: none !important;
}

.vb-menu-section {
  max-width: var(--vb-maxw);
  margin: 0 auto;
  padding: 52px 32px 8px;
  scroll-margin-top: calc(var(--vb-header-h) + var(--vb-cats-h) + var(--vb-promo-banner-h, 0px) + 8px);
}

.vb-menu-section__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--color-text);
  margin-bottom: 20px;
}

.vb-menu-section__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.vb-menu-section__header .vb-menu-section__title {
  margin-bottom: 0;
}

.vb-menu-section__badge {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  border-radius: 999px;
}

.vb-menu-section__promo {
  font-size: 0.82rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 16px;
  margin-top: -16px;
}

/* Advance-notice rule for a category (e.g. catering "order 7 days ahead").
   Neutral info pill so it reads as a heads-up, not a promo. */
.vb-menu-section__advance {
  display: inline-block;
  margin: -8px 0 16px;
  padding: 4px 12px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.vb-menu-section__availability {
  margin: -4px 0 16px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  color: var(--color-primary);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
}

.vb-menu-section__availability[data-category-availability-state="open"] {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: var(--color-text-muted);
}

.vb-menu-section__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 22px;
}

/* Legacy menu section — used by existing MenuSection.tsx */
.vb-section {
  padding: 40px 32px;
  scroll-margin-top: calc(var(--vb-header-h) + var(--vb-cats-h) + var(--vb-promo-banner-h, 0px) + 8px);
}

.vb-section__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.vb-section__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--color-text);
}

.vb-section__line {
  flex: 1;
  height: 1px;
  background: var(--color-text);
  opacity: 0.15;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MENU ITEM — vertical card layout with image on top
   ═══════════════════════════════════════════════════════════════════════════ */

/* Deliberately quiet: hairline border, no shadow or lift on hover — the UI
   recedes so the food and the order flow hold attention. */
.vb-menu-item {
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}

.vb-menu-item:hover {
  border-color: rgba(0, 0, 0, 0.35);
}

.vb-menu-item--temporarily-unavailable {
  cursor: default;
}

.vb-menu-item--temporarily-unavailable:hover {
  border-color: rgba(0, 0, 0, 0.1);
}

.vb-menu-item__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.vb-menu-item__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.vb-menu-item__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, var(--color-surface, #f5f5f5), var(--color-background, #fafafa));
  display: flex;
  align-items: center;
  justify-content: center;
}

.vb-menu-item__placeholder::after {
  content: '';
  width: 44px;
  height: 44px;
  opacity: 0.13;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E") no-repeat center / contain;
}

.vb-menu-item__tags {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.vb-menu-item__tag {
  font-size: 0.6rem;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #111827;
  font-weight: 700;
  box-shadow: var(--vb-shadow-sm);
}

.vb-menu-item--sold-out {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(30%);
}

.vb-menu-item__sold-out-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(17, 24, 39, 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

.vb-menu-item__type-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  z-index: 2;
}

.vb-menu-item__type-dot--veg {
  background: #16a34a;
}

.vb-menu-item__type-dot--non-veg {
  background: #dc2626;
}

.vb-menu-item__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
  gap: 5px;
  min-width: 0;
}

.vb-menu-item__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1.3;
}

.vb-menu-item__labels {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.vb-menu-item__label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  border-radius: 999px;
}

.vb-menu-item__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vb-menu-item__promo {
  font-size: 0.72rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-top: 4px;
}

.vb-menu-item__availability {
  font-size: 0.72rem;
  color: #b45309;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 4px;
}

.vb-menu-item__availability[data-item-availability-state="open"] {
  color: var(--color-text-muted);
  font-weight: 600;
}

.vb-menu-item__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
}

.vb-menu-item__price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.vb-menu-item__cal {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.vb-menu-item__add-btn {
  padding: 8px 16px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: var(--vb-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  font-family: var(--font-body);
}

.vb-menu-item__add-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--vb-shadow-card);
  filter: brightness(1.05);
}

.vb-menu-item__add-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY ITEM CARDS — grid layout used by existing ItemCard.tsx
   Styled in neo-brutalist fashion (flat, bordered, no shadows)
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0;
}

.vb-item {
  background: var(--color-background);
  border: 2px solid var(--color-text);
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.15s;
  margin: -1px; /* collapse borders between grid items */
}

.vb-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

.vb-item__img-wrap {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-bottom: 2px solid var(--color-text);
}

.vb-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vb-item__body {
  padding: 14px 16px;
}

.vb-item__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.vb-item__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}

.vb-item__price {
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  font-size: 0.88rem;
}

.vb-item__desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vb-item__flags {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.vb-item__flag {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ITEM MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.vb-modal[hidden] {
  display: none;
}

.vb-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.vb-modal__dialog {
  background: var(--color-background);
  width: 100%;
  max-width: 680px;
  /* dvh tracks the visible viewport; plain vh resolves to the largest (toolbar-
     collapsed) viewport, so in-app browsers (Maps, iOS) clip the modal top. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow: hidden;
  border: 1px solid var(--vb-line);
  border-radius: calc(var(--border-radius-lg) + 6px);
  box-shadow: var(--vb-shadow-pop);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.vb-modal__scroll {
  flex: 1;
  overflow-y: auto;
}

.vb-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  border: none;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text);
  transition: background-color 0.15s;
  line-height: 1;
}

.vb-modal__close:hover {
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
}

/* Item + bundle modals open over a full-bleed photo — a frosted white chip
   keeps the close affordance legible on any image. */
[data-item-modal] .vb-modal__close,
[data-bundle-modal] .vb-modal__close {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #111827;
  box-shadow: var(--vb-shadow-sm);
}

[data-item-modal] .vb-modal__close:hover,
[data-bundle-modal] .vb-modal__close:hover {
  background: #fff;
}

.vb-modal__img-wrap {
  width: 100%;
  overflow: hidden;
}

/* ── Item-modal image sizing ────────────────────────────────────────────────
 * Three fit modes, selected by the modifier class stamped on `.vb-modal__img-wrap`:
 *   --wide     → 16:9, cover (default, matches the legacy look)
 *   --narrow   → 4:3,  cover (taller crop, less aggressive on portrait photos)
 *   --original → no ratio, contain + height:auto — the container grows to the
 *                image's natural aspect. No letterbox gap, ever: the image is
 *                the container, so there's nothing to fill.
 * The rules target both `.vb-modal__image` (the legacy class) and `.vb-modal__img`
 * (what the cart JS currently injects) to stay backward-compatible with any
 * pre-built sites whose modules were emitted before this change.
 */
.vb-modal__image,
.vb-modal__img {
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s;
  display: block;
}

.vb-modal__img-wrap--wide .vb-modal__image,
.vb-modal__img-wrap--wide .vb-modal__img {
  aspect-ratio: 16 / 9;
}

.vb-modal__img-wrap--narrow .vb-modal__image,
.vb-modal__img-wrap--narrow .vb-modal__img {
  aspect-ratio: 4 / 3;
}

.vb-modal__img-wrap--original .vb-modal__image,
.vb-modal__img-wrap--original .vb-modal__img {
  /* No ratio lock — image renders at its natural aspect. Because the container
   * IS the image, there's no surrounding box to letterbox. Very tall portrait
   * photos push the rest of the modal down and scroll within the modal body —
   * we'd rather accept that than reintroduce the colored-border problem. */
  height: auto;
  object-fit: contain;
}

.vb-modal__image:hover,
.vb-modal__img:hover {
  transform: scale(1.02);
}

.vb-modal__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.vb-modal__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.vb-modal__price {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.vb-modal__desc {
  padding: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   VARIANT SELECTOR
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-variants {
  padding: 0 20px 16px;
}

.vb-variants__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: 10px;
}

.vb-variants__list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vb-variants__option {
  padding: 9px 18px;
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-background);
  color: var(--color-text);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  font-family: var(--font-body);
}

.vb-variants__option:hover {
  border-color: var(--color-text-muted);
}

/* Selected = brand-tinted, not a black slab: the brand color marks the
   customer's own choices. color-mix keeps the tint derived from the theme;
   the rgba line is the fallback for engines without color-mix. */
.vb-variants__option--active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODIFIER GROUPS
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-mod-group {
  padding: 12px 20px 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.vb-mod-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 4px;
}

.vb-mod-group__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.vb-mod-group__badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  color: var(--color-text-muted);
}

.vb-mod-group__subtitle {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  padding-bottom: 6px;
}

.vb-mod-group__error {
  font-size: 0.75rem;
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  padding: 6px 8px;
  margin: 0 0 8px;
}

.vb-mod-group--error > .vb-mod-group__title {
  color: #b91c1c;
}

.vb-mod-group__options {
  display: flex;
  flex-direction: column;
}

/*
 * Tile layout for an option list — opt-in via `item.modalLayout === 'tiles'`.
 * Each option becomes a self-contained card in a responsive auto-fill grid:
 * checkbox/radio top-left, name to its right, price below. Hover lifts the
 * border; selected (`--active`) fills the card with the primary brand color
 * for an unmistakable selected state. Independent of displayStyle —
 * a radio group can render as tiles, a checkbox group can stay as rows.
 */
.vb-mod-group__options--tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.vb-mod-group__options--tiles .vb-mod-option {
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-surface);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Override the row layout's `:last-child { border-bottom: none }` — every
 * tile is a self-contained card and needs its full border. */
.vb-mod-group__options--tiles .vb-mod-option:last-child {
  border-bottom: 1px solid var(--color-border);
}
.vb-mod-group__options--tiles .vb-mod-option:hover {
  border-color: var(--color-text-muted);
}
.vb-mod-group__options--tiles .vb-mod-option__label {
  flex: 0 1 auto;
  font-size: 0.84rem;
}
.vb-mod-group__options--tiles .vb-mod-option__price {
  /* Align price under the name, past the checkbox glyph + its 8px gap. */
  margin-left: 24px;
  margin-top: 2px;
}
/* Active = selected. JS toggles `--active` on the wrapper when the input
 * is checked; we fill the card with the primary brand color for an
 * unmistakable selected state.
 *
 * `.vb-mod-option__label` and `__price` carry their own color rules in
 * the row layout, so a `color:` on the wrapper here would be overridden
 * by them via cascade specificity — the active-state colour overrides
 * have to target the label and price elements directly.
 *
 * Hardcoded `#fff` (instead of `var(--color-surface)`) for the on-tile
 * chrome so contrast is guaranteed regardless of how the surface token
 * resolves on a given cuisine theme. */
.vb-mod-group__options--tiles .vb-mod-option--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.vb-mod-group__options--tiles .vb-mod-option--active .vb-mod-option__label {
  color: #fff;
}
.vb-mod-group__options--tiles .vb-mod-option--active .vb-mod-option__price {
  color: rgba(255, 255, 255, 0.9);
}
/* Unchecked checkbox/radio on an active card: white border, transparent
 * interior so the brand-fill shows through. */
.vb-mod-group__options--tiles .vb-mod-option--active .vb-mod-option__input ~ .vb-mod-option__label::before {
  border-color: #fff;
  background: transparent;
}
/* Checked: fill the box white and stamp a dark glyph inside.
 * The base design uses fill-as-tick (no glyph) which works on light cards
 * but disappears on a primary-fill tile (white-on-white inside the box).
 * Inline SVG with hardcoded dark stroke is theme-agnostic — always visible
 * on the white-filled box. */
.vb-mod-group__options--tiles .vb-mod-option--active .vb-mod-option__input[type="checkbox"]:checked ~ .vb-mod-option__label::before {
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%231a1a1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}
.vb-mod-group__options--tiles .vb-mod-option--active .vb-mod-option__input[type="radio"]:checked ~ .vb-mod-option__label::before {
  background-color: #fff;
  background-image: radial-gradient(circle, #1a1a1a 0 30%, transparent 33%);
}

/* Variant tile layout — same idea, applied to the variant picker. */
.vb-variants__list--tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.vb-variants__list--tiles .vb-variants__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 10px;
  font-size: 0.86rem;
  line-height: 1.3;
  white-space: normal;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODIFIER OPTIONS + CUSTOM CHECKBOX / RADIO
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-mod-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.vb-mod-option:last-child {
  border-bottom: none;
}

/* Hide native inputs */
.vb-mod-option__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkbox / radio indicator */
.vb-mod-option__input ~ .vb-mod-option__label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border, rgba(16, 24, 40, 0.28));
  border-radius: 6px;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background-color 0.15s, border-color 0.15s;
}

/* Radio inputs get a circle */
.vb-mod-option__input[type="radio"] ~ .vb-mod-option__label::before {
  border-radius: 50%;
}

/* Checked state — brand-filled square (checkbox) or circle (radio) */
.vb-mod-option__input:checked ~ .vb-mod-option__label::before {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.vb-mod-option__label {
  display: flex;
  align-items: center;
  font-size: 0.82rem;
  color: var(--color-text);
  cursor: pointer;
  flex: 1;
}

.vb-mod-option__price {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-left: auto;
}

.vb-mod-option__stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  overflow: hidden;
}

.vb-mod-option__stepper button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text);
  transition: background-color 0.15s;
}

.vb-mod-option__stepper button:hover {
  background: var(--color-text);
  color: var(--color-background);
}

.vb-mod-option__stepper span {
  width: 28px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  border-left: 1px solid var(--vb-line);
  border-right: 1px solid var(--vb-line);
  line-height: 28px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODIFIER EXTRAS  —  included badge, placement toggle, section headers
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-mod-option__price--included {
  color: #16a34a;
  font-weight: 600;
  font-size: 0.72rem;
}

/* Placement card — modifier option with segmented control */
.vb-mod-option--placement {
  flex-direction: column;
  align-items: stretch;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--border-radius);
  padding: 10px 12px;
  gap: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.vb-mod-option--placement .vb-mod-option__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

/* Name always takes full width → price consistently wraps to next line */
.vb-mod-option--placement .vb-mod-option__label {
  flex: 1 1 100%;
}

.vb-mod-option--placement .vb-mod-option__price {
  margin-left: 24px;
  font-size: 0.72rem;
}

/* Segmented control for placement: Left Half | Right Half | Whole */
.vb-placement-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f1f1;
}

.vb-placement-seg__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: none;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  font-family: var(--font-body);
  white-space: nowrap;
}

.vb-placement-seg__btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.vb-placement-seg__btn--active {
  background: rgba(0, 0, 0, 0.05);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.vb-placement-seg__btn--active:hover {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.vb-placement-seg__btn svg {
  flex-shrink: 0;
}

/* Tiled grid layout for placement modifier groups */
.vb-mod-group__options--tiled {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.vb-mod-group__options--tiled .vb-mod-option--placement {
  flex: 1 1 calc(25% - 6px);
  min-width: 140px;
  margin-bottom: 0;
}

/* Active placement tile expands to full row so the segmented control has space */
.vb-mod-group__options--tiled .vb-mod-option--placement.vb-mod-option--active {
  flex: 1 1 100%;
}

/* Hide placement segmented control when modifier is unchecked */
.vb-mod-option--placement:not(.vb-mod-option--active) .vb-placement-seg {
  display: none;
}

/* Section sub-headers within modifier groups */
.vb-mod-section__title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 10px 0 4px;
  width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SPECIAL INSTRUCTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-instructions {
  padding: 0 20px 16px;
}

.vb-instructions__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: 8px;
  display: block;
}

.vb-instructions__textarea {
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--vb-line);
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  background: var(--color-background);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vb-instructions__textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--vb-ring);
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODAL FOOTER — quantity + add to order
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-modal__footer {
  position: sticky;
  bottom: 0;
  background: var(--color-background);
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vb-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  overflow: hidden;
}

.vb-qty__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text);
  transition: background-color 0.15s, color 0.15s;
}

.vb-qty__btn:hover {
  background: rgba(0,0,0,0.06);
}

.vb-qty__val {
  width: 36px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  border-left: 1px solid rgba(0,0,0,0.15);
  border-right: 1px solid rgba(0,0,0,0.15);
  line-height: 32px;
}

.vb-modal__add-btn {
  flex: 1;
  padding: 0 22px;
  height: 50px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--vb-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  font-family: var(--font-body);
}

.vb-modal__add-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--vb-shadow-card);
  filter: brightness(1.05);
}

.vb-modal__add-btn--ghost {
  flex: 0 0 auto;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--vb-line);
  box-shadow: none;
}

.vb-modal__add-btn--ghost:hover {
  transform: none;
  box-shadow: none;
  filter: none;
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

/* ── Cross-sell step ──────────────────────────────────────────────────────── */

/* The footer holds two mutually-exclusive action rows; JS toggles [hidden].
   The [hidden] guard is required: the UA default `[hidden] { display: none }`
   is otherwise overridden by the `display: flex` rules below, leaving both
   rows visible at once. */
.vb-modal__footer-main[hidden],
.vb-xsell__actions[hidden] {
  display: none;
}

.vb-modal__footer-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vb-xsell__actions {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Cross-sell step content lives directly in the modal body, which has no
   padding of its own — every section supplies its own (header, variants,
   instructions). This container was missing that rule, so the "Added to your
   order" heading and cards butted against the modal edges. The horizontal
   padding (20px) matches the header so the step stays visually aligned. */
.vb-xsell {
  padding: 12px 20px 16px;
}

.vb-xsell__heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--color-text);
}

.vb-xsell__group {
  margin-bottom: 18px;
}

.vb-xsell__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--color-text);
}

.vb-xsell__subtitle {
  font-size: 0.78rem;
  color: var(--color-text-muted, rgba(0,0,0,0.55));
  margin: 0 0 10px;
}

.vb-xsell__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--border-radius);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.vb-xsell__item:hover {
  border-color: var(--color-primary);
}

.vb-xsell__item--active {
  border-color: var(--color-primary);
  background: rgba(0,0,0,0.03);
}

/* Configurable recommendation — a full-width button that opens the item's
   own modal instead of a one-tap checkbox row. */
.vb-xsell__item--configure {
  width: 100%;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
}

.vb-xsell__cta {
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.vb-xsell__input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.vb-xsell__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.vb-xsell__info {
  flex: 1;
  min-width: 0;
}

.vb-xsell__name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.vb-xsell__desc {
  font-size: 0.74rem;
  color: var(--color-text-muted, rgba(0,0,0,0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vb-xsell__price {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUNDLES — combo cards (reuse .vb-menu-item) + bundle builder modal slots
   ═══════════════════════════════════════════════════════════════════════════ */

/* "Bundle" ribbon on the combo card image. */
.vb-bundle-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 8px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--color-primary);
  border-radius: 4px;
}

/* Slot pickers inside the bundle modal. */
.vb-bundle-slots {
  padding: 4px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vb-bundle-slot__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.vb-bundle-slot__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
}

.vb-bundle-slot__hint {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, rgba(0,0,0,0.55));
  white-space: nowrap;
}

/* Unmet required-slot highlight, toggled by the cart JS on a failed add. */
.vb-bundle-slot--error .vb-bundle-slot__hint {
  color: var(--color-primary);
}

.vb-bundle-slot__options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vb-bundle-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text);
  transition: border-color 0.15s, background-color 0.15s;
}

.vb-bundle-opt:hover {
  border-color: var(--color-primary);
}

.vb-bundle-opt--active {
  border-color: var(--color-primary);
  background: rgba(0,0,0,0.03);
}

.vb-bundle-opt__input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.vb-bundle-opt__label {
  flex: 1;
  min-width: 0;
}

/* Config-needed slot option: name + captured summary on the left, Choose/Edit
   + Remove on the right. Opens the full item modal to configure. */
.vb-bundle-opt--config {
  cursor: default;
}

.vb-bundle-opt__summary {
  color: var(--color-text-muted, rgba(0,0,0,0.55));
  font-size: 0.8rem;
}

.vb-bundle-opt__cfg-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vb-bundle-opt__config-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  white-space: nowrap;
}

.vb-bundle-opt__remove {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.74rem;
  color: var(--color-text-muted, rgba(0,0,0,0.55));
  cursor: pointer;
  white-space: nowrap;
}

.vb-bundle-opt__remove:hover {
  color: var(--color-text);
}

/* Hide the qty stepper while the item modal is configuring a bundle component
   (a slot pick is always quantity 1 within the combo). */
[data-item-modal].vb-capture [data-modal-qty] {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CART FAB — now lives in the header navbar (.vb-header__cart-btn)
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-cart-fab {
  display: none;
}

.vb-cart-fab:hover {
  transform: scale(1.05);
}

.vb-cart-fab__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 5px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CART OVERLAY PANEL — opens on FAB click
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-cart {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.vb-cart--open {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.vb-cart__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.vb-cart__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 428px;
  /* 100vh on iOS Safari is the largest possible viewport (URL bar collapsed),
     so the cart header or bottom checkout button can fall outside the visible
     area. 100dvh tracks the currently-visible viewport so both remain reachable. */
  height: 100vh;
  height: 100dvh;
  background: var(--color-background);
  border-left: 1px solid var(--vb-line);
  box-shadow: -24px 0 48px rgba(16, 24, 40, 0.14);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

.vb-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

/* Panel titles are bare <h2>s — pin their size so the UA default (1.5em)
   doesn't stack on top of the container's font-size. */
.vb-cart__header h2 {
  font-size: 1.0625rem;
  font-weight: 700;
}

.vb-cart__close {
  background: rgba(0,0,0,0.05);
  border: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text);
  transition: background-color 0.15s;
}

.vb-cart__close:hover {
  background: rgba(0,0,0,0.1);
}

.vb-cart__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.vb-cart__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.vb-cart__empty-sub {
  font-size: 0.75rem;
  margin-top: 4px;
}

.vb-cart__footer {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 16px 20px;
}

.vb-cart__items {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.vb-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--vb-hairline);
}

.vb-cart-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.vb-cart-item__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.vb-cart-item__name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.vb-cart-item__mods {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

.vb-cart-item__note {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 2px;
}

.vb-cart-item__price {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vb-cart-item__qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  overflow: hidden;
}

.vb-cart-item__qty button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text);
  transition: background-color 0.15s;
}

.vb-cart-item__qty button:hover {
  background: rgba(0,0,0,0.06);
}

.vb-cart-item__qty span {
  width: 24px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  border-left: 1px solid rgba(0,0,0,0.15);
  border-right: 1px solid rgba(0,0,0,0.15);
  line-height: 24px;
}

.vb-cart-item__remove {
  background: none;
  border: none;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0 2px;
  transition: color 0.15s;
}

.vb-cart-item__remove:hover {
  color: var(--color-primary);
}

.vb-cart-item__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.vb-cart-item__edit {
  background: none;
  border: none;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Discount / Rule Pricing ─────────────────────────────────────── */

.vb-cart-item__price--discounted {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.vb-cart-item__original-price {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 400;
}

.vb-cart-item__effective-price {
  color: #16a34a;
  font-weight: 700;
  font-size: 0.82rem;
}

.vb-cart-item__rule-badge {
  font-size: 0.65rem;
  color: #16a34a;
  font-weight: 600;
  margin-top: 2px;
}

.vb-cart__savings-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 20px;
  font-size: 0.82rem;
  color: #16a34a;
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.vb-mod-option__price--free {
  color: #16a34a;
  font-weight: 600;
}

.vb-mod-option__price--free del {
  color: var(--color-text-muted);
  margin-right: 4px;
}

.vb-cart__summary {
  border-top: 1px solid var(--vb-line);
  padding: 16px 20px;
}

.vb-cart__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.vb-cart__checkout-btn {
  display: block;
  width: 100%;
  padding: 15px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--vb-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  font-family: var(--font-body);
}

.vb-cart__checkout-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--vb-shadow-card);
  filter: brightness(1.05);
}

.vb-cart__checkout-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT OVERLAY — fullscreen checkout flow
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: var(--color-background);
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.vb-checkout-overlay[hidden] {
  display: none;
}

.vb-checkout-overlay__panel {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  /* 100vh on iOS Safari doesn't shrink for the URL bar, pushing the
     "Proceed to Checkout" footer off-screen. 100dvh keeps it in view. */
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: contain;
}

.vb-checkout-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.vb-checkout-overlay__header h2 {
  font-size: 1.0625rem;
  font-weight: 700;
}

.vb-checkout-overlay__close {
  background: rgba(0,0,0,0.05);
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text);
  transition: background-color 0.15s;
}

.vb-checkout-overlay__close:hover {
  background: rgba(0,0,0,0.1);
}

.vb-checkout-overlay__body {
  /* Grows and scrolls internally so the total/submit footer stays pinned to
     the bottom of the panel with flex space in between (pre-#197 behavior). */
  flex: 1;
  overflow-y: auto;
  padding: 0 24px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.vb-checkout-section {
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.vb-checkout-section--last {
  border-bottom: none;
}

.vb-checkout-section__title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  color: var(--color-text);
}

/* Checkout form fields */
.vb-checkout-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vb-checkout-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vb-checkout-label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.vb-checkout-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--vb-line);
  border-radius: 12px;
  font-size: 0.9rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: var(--color-background);
  color: var(--color-text);
}

.vb-checkout-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--vb-ring);
}

/* Radio buttons for method and time */
.vb-checkout-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--vb-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  margin-bottom: 8px;
}

.vb-checkout-radio:last-child {
  margin-bottom: 0;
}

.vb-checkout-radio--active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
}

/* Greyed out — used by ASAP when the cart has an advance-notice category
 * and same-day fulfilment isn't possible. Click-blocked via the input's
 * disabled attribute; this styles the visible chrome. */
.vb-checkout-radio--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.vb-checkout-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.vb-checkout-radio__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.25);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s;
}

.vb-checkout-radio--active .vb-checkout-radio__dot {
  border-color: var(--color-primary);
}

.vb-checkout-radio--active .vb-checkout-radio__dot::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.vb-checkout-radio__text {
  display: flex;
  flex-direction: column;
}

.vb-checkout-radio__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.vb-checkout-radio__helper {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 1px;
}

/* Method options inline layout */
.vb-checkout-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.vb-checkout-methods .vb-checkout-radio {
  margin-bottom: 0;
}

/* Pickup time */
.vb-checkout-time-options {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.vb-checkout-time-options .vb-checkout-radio {
  flex: 1;
  margin-bottom: 0;
}

.vb-checkout-schedule__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Coupon */
.vb-checkout-coupon {
  display: flex;
  gap: 8px;
}

.vb-checkout-coupon .vb-checkout-input {
  flex: 1;
}

.vb-checkout-coupon__btn {
  padding: 12px 22px;
  background: var(--color-background);
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text);
  font-family: var(--font-body);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.vb-checkout-coupon__btn:hover {
  border-color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.vb-checkout-coupon__status {
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 8px;
}

.vb-checkout-coupon__status--error {
  color: #dc2626;
}

.vb-checkout-coupon__status--success {
  color: #16a34a;
}

/* Checkout overlay items */
.vb-co-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.vb-co-item:last-child {
  border-bottom: none;
}

.vb-co-item__info {
  flex: 1;
  min-width: 0;
}

.vb-co-item__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.vb-co-item__variant {
  font-weight: 400;
  color: var(--color-text-muted);
}

.vb-co-item__mods {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.vb-co-item__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.vb-co-item__qty {
  display: flex;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  overflow: hidden;
}

.vb-co-item__qty .vb-qty__btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text);
  transition: background-color 0.15s;
}

.vb-co-item__qty .vb-qty__btn:hover {
  background: rgba(0,0,0,0.06);
}

.vb-co-item__qty .vb-qty__val {
  width: 28px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  border-left: 1px solid rgba(0,0,0,0.15);
  border-right: 1px solid rgba(0,0,0,0.15);
  line-height: 28px;
}

.vb-co-item__price {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vb-co-item__remove {
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0 2px;
  transition: color 0.15s;
}

.vb-co-item__remove:hover {
  color: #dc2626;
}

/* Footer */
.vb-checkout-overlay__footer {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 16px 24px;
  flex-shrink: 0;
}

.vb-checkout-overlay__error {
  color: #dc2626;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.vb-checkout-overlay__breakdown {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.vb-checkout-overlay__breakdown-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}

.vb-checkout-overlay__breakdown-row--discount {
  color: #16a34a;
}

.vb-checkout-overlay__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.vb-checkout-overlay__submit {
  display: block;
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent, var(--color-primary)));
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--vb-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  font-family: var(--font-body);
}

.vb-checkout-overlay__submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--vb-shadow-card);
  filter: brightness(1.05);
}

.vb-checkout-overlay__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER (owner.com-style: tabs + map card + nav + download + attribution)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Owner.com-style footer (VOI-166): the section sits on the page background;
   the location cards render directly on it, followed by a rounded, tinted
   footer card (logo | nav grid | order pill, then legal) and a final
   attribution strip. --vb-footer-bg / --vb-footer-text theme the CARD. */
.vb-footer {
  background: var(--color-background, #fff);
  padding: 56px 20px 28px;
  color: var(--color-text, #111827);
}

.vb-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1120px;
  margin: 0 auto;
}

.vb-footer__card {
  background: var(--vb-footer-bg, #f4f4f5);
  color: var(--vb-footer-text, #1f2937);
  border-radius: 20px;
  padding: 36px 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.vb-footer__tagline {
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
  color: inherit;
  opacity: 0.75;
  max-width: 56ch;
  align-self: center;
}

/* ── Location tabs ───────────────────────────────────────────────────────── */

.vb-footer-tabs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vb-footer-tabs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.vb-footer-tabs__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text, #111827);
  margin: 0;
}

.vb-footer-tabs__arrows {
  display: inline-flex;
  gap: 8px;
}

.vb-footer-tabs__arrow {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text, #111827);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.vb-footer-tabs__arrow:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.2);
}

.vb-footer-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vb-footer-tabs__pill {
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text, #374151);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}

.vb-footer-tabs__pill:not(.vb-footer-tabs__pill--active):hover {
  background: rgba(0, 0, 0, 0.09);
}

.vb-footer-tabs__pill--active,
.vb-footer-tabs__pill--active:hover {
  background: var(--color-background, #fff);
  color: var(--color-text, #111827);
  border-color: currentColor;
}

/* ── Location card ───────────────────────────────────────────────────────── */

.vb-footer__cards {
  display: block;
  position: relative;
}

.vb-footer-loc {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  background: var(--color-background, #fff);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  overflow: hidden;
}

.vb-footer-loc[hidden] {
  display: none;
}

.vb-footer-loc__map {
  min-height: 260px;
  background: #e5e7eb;
  /* Strict overflow guard — Google's embedded map iframe ships its own
   * controls that overflow horizontally if the parent doesn't clip them.
   * Without this, narrow viewports (≤768px) saw the controls escape the
   * card and the footer width would balloon past the viewport. */
  overflow: hidden;
}

.vb-footer-loc__map iframe {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  display: block;
  max-width: 100%;
}

.vb-footer-loc__body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vb-footer-loc__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.vb-footer-loc__title {
  font-size: 1.2rem;
  color: var(--color-text, #111827);
  margin: 0 0 2px 0;
  font-weight: 700;
}

.vb-footer-loc__sub {
  font-size: 0.82rem;
  color: var(--color-text-muted, #6b7280);
}

.vb-footer-loc__dir {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--color-text, #111827);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.vb-footer-loc__dir:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.25);
}

.vb-footer-loc__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0;
}

.vb-footer-loc__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  font-size: 0.84rem;
}

.vb-footer-loc__row dt {
  color: var(--color-text-muted, #6b7280);
  font-weight: 600;
}

.vb-footer-loc__row dd {
  color: var(--color-text, #111827);
  margin: 0;
}

.vb-footer-loc__link {
  color: var(--color-text, #111827);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.vb-footer-loc__link:hover {
  border-bottom-color: currentColor;
}

.vb-footer-loc__rule {
  border: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 4px 0 6px;
}

.vb-footer-loc__today {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.86rem;
}

.vb-footer-loc__today-text {
  color: var(--color-text, #111827);
  font-weight: 600;
}

.vb-footer-loc__hours-btn {
  background: transparent;
  border: 0;
  color: var(--color-accent, var(--color-primary));
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vb-footer-loc__hours-btn:hover {
  filter: brightness(0.85);
}

.vb-footer-loc__order {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--color-accent, var(--color-primary));
  color: #fff;
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
}

.vb-footer-loc__order:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ── Bottom nav row ──────────────────────────────────────────────────────── */

.vb-footer-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.vb-footer-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.vb-footer-nav__logo {
  /* Owner-adjustable via branding.logoScale. Footer wordmark is small by
     design so the scale is capped tighter than the hero. */
  height: min(calc(32px * var(--vb-logo-scale, 1)), 80px);
  width: auto;
  display: block;
}

.vb-footer-nav__wordmark {
  color: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Links flow down in columns of three, owner.com-style
   (Menu/Gallery/Hiring · Catering/Locations/Gift Cards · …). */
.vb-footer-nav__links {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 12px 44px;
  justify-content: start;
  margin-right: auto;
}

.vb-footer-nav__link {
  color: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}

.vb-footer-nav__link:hover {
  opacity: 0.65;
}

.vb-footer-nav__order {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-accent, var(--color-primary));
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
}

.vb-footer-nav__order:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ── Download app + legal ────────────────────────────────────────────────── */

.vb-footer-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
}

.vb-footer-app__block {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.vb-footer-app__qr {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  display: block;
}

.vb-footer-app__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vb-footer-app__heading {
  font-size: 0.98rem;
  color: inherit;
  margin: 0;
  font-weight: 700;
}

.vb-footer-app__desc {
  font-size: 0.82rem;
  color: inherit;
  opacity: 0.7;
  margin: 0;
  max-width: 36ch;
}

.vb-footer-app__stores {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.vb-footer-app__store {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.vb-footer-app__store:hover {
  background: rgba(0, 0, 0, 0.05);
}

.vb-footer-app__legal {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.vb-footer-app__legal-link {
  color: inherit;
  opacity: 0.7;
  font-size: 0.82rem;
  text-decoration: none;
  transition: opacity 0.15s;
}

.vb-footer-app__legal-link:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Legal links row (always rendered — VOI-167) ─────────────────────────── */

.vb-footer-legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.vb-footer-legal__link {
  color: inherit;
  opacity: 0.7;
  font-size: 0.82rem;
  text-decoration: none;
  transition: opacity 0.15s;
}

.vb-footer-legal__link:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Attribution row ─────────────────────────────────────────────────────── */

/* Three balanced zones on the page background: socials | © centered | powered-by. */
.vb-footer-attribution {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.vb-footer-attribution__socials {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
}

.vb-footer-attribution__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--color-text-muted, #6b7280);
  transition: color 0.15s, transform 0.15s;
}

.vb-footer-attribution__social svg {
  width: 100%;
  height: 100%;
  display: block;
}

.vb-footer-attribution__social:hover {
  color: var(--color-text, #111827);
  transform: translateY(-1px);
}

.vb-footer-attribution__text {
  color: var(--color-text-muted, #6b7280);
  font-size: 0.78rem;
  text-align: center;
}

.vb-footer-attribution__powered {
  color: var(--color-text-muted, #6b7280);
  font-size: 0.78rem;
  justify-self: end;
}

.vb-footer-attribution__link {
  color: var(--color-text, #111827);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vb-footer-attribution__link:hover {
  opacity: 0.7;
}




/* ═══════════════════════════════════════════════════════════════════════════
   INFO MODALS (About Us + Contact)
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-info-modal .vb-modal__dialog {
  max-width: 880px;
}

/* Hours and Contact modals — compact variant. About Us keeps the wider 880px
   layout because it carries images, team grids and longer prose. */
#vb-hours-modal .vb-modal__dialog,
#vb-contact-modal .vb-modal__dialog {
  max-width: 440px;
}

#vb-hours-modal .vb-info-modal__body,
#vb-contact-modal .vb-info-modal__body {
  padding: 22px 20px;
}

#vb-hours-modal .vb-about__heading,
#vb-contact-modal .vb-about__heading {
  font-size: 1.25rem;
  margin-bottom: 14px;
}

.vb-info-modal__body {
  padding: 32px 28px;
}

.vb-about__heading {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 8px;
}

.vb-about__founded {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.vb-about__story {
  max-width: 720px;
  margin-bottom: 24px;
}

.vb-about__story p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 12px;
}

.vb-about__story p:last-child {
  margin-bottom: 0;
}

.vb-about__mission {
  border-left: 4px solid var(--color-primary);
  padding: 12px 20px;
  margin: 0 0 24px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 720px;
}

.vb-about__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.vb-about__highlight {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--vb-line);
  border-radius: 999px;
  padding: 7px 15px;
}

.vb-about__sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}

.vb-about__section {
  display: grid;
  gap: 20px 24px;
}

.vb-about__section--text {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy";
}

.vb-about__section--image {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media";
}

.vb-about__section--text-left-image-right {
  grid-template-columns: minmax(0, var(--vb-about-left-flex, 1.2fr)) minmax(0, var(--vb-about-right-flex, 0.8fr));
  grid-template-areas: "copy media";
  align-items: center;
}

.vb-about__section--image-left-text-right {
  grid-template-columns: minmax(0, var(--vb-about-left-flex, 0.8fr)) minmax(0, var(--vb-about-right-flex, 1.2fr));
  grid-template-areas: "media copy";
  align-items: center;
}

.vb-about__section--text-above-image {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "copy"
    "media";
}

.vb-about__section--image-above-text {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "media"
    "copy";
}

.vb-about__section-copy {
  grid-area: copy;
  max-width: 56ch;
}

/* Text-only sections are "Full width" in the editor — let the copy span the modal. */
.vb-about__section--text .vb-about__section-copy {
  max-width: none;
}

.vb-about__section-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 10px;
}

.vb-about__section-copy p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 12px;
}

.vb-about__section-copy p:last-child {
  margin-bottom: 0;
}

.vb-about__section-media {
  grid-area: media;
  margin: 0;
}

.vb-about__section-image {
  display: block;
  width: 100%;
  border-radius: calc(var(--border-radius) * 1.2);
  object-fit: cover;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
}

.vb-about__section--image .vb-about__section-image,
.vb-about__section--text-above-image .vb-about__section-image,
.vb-about__section--image-above-text .vb-about__section-image {
  aspect-ratio: 16 / 9;
}

.vb-about__section--text-left-image-right .vb-about__section-image,
.vb-about__section--image-left-text-right .vb-about__section-image {
  aspect-ratio: 4 / 5;
}

/* Per-section image-shape overrides — emitted via vb-about__section-image--ratio-*. */
.vb-about__section-image.vb-about__section-image--ratio-wide {
  aspect-ratio: 16 / 9;
}

.vb-about__section-image.vb-about__section-image--ratio-portrait {
  aspect-ratio: 4 / 5;
}

.vb-about__section-image.vb-about__section-image--ratio-tall {
  aspect-ratio: 9 / 16;
  max-height: 80vh;
  max-width: 100%;
  width: auto;
  margin-inline: auto;
}

.vb-about__section-image.vb-about__section-image--ratio-square {
  aspect-ratio: 1 / 1;
}

.vb-about__section-image.vb-about__section-image--ratio-original {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

.vb-about__section-caption {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.vb-about__team {
  margin-bottom: 32px;
}

.vb-about__team-heading {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin: 0 0 16px;
}

.vb-about__team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.vb-about__member {
  border: 1px solid var(--vb-line);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  background: var(--color-background);
  box-shadow: var(--vb-shadow-sm);
}

.vb-about__member-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border, rgba(0,0,0,0.12));
  margin-bottom: 12px;
}

.vb-about__member-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 2px;
}

.vb-about__member-role {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.vb-about__member-bio {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

.vb-about__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.vb-about__gallery-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border: 1px solid var(--vb-line);
  border-radius: var(--border-radius-lg);
}

@media (max-width: 720px) {
  .vb-about__section--text-left-image-right,
  .vb-about__section--image-left-text-right {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Contact modal */
.vb-contact__details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.vb-contact__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vb-contact__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.vb-contact__value {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  margin: 0;
}

.vb-contact__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.vb-contact__link:hover {
  text-decoration: underline;
}

.vb-contact__link--big {
  font-size: 1.3rem;
  font-weight: 700;
}

.vb-contact__row--featured {
  background: var(--color-surface, rgba(0,0,0,0.03));
  border: 1px solid var(--vb-line);
  border-radius: var(--border-radius-lg);
  padding: 16px;
}

.vb-contact__hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vb-contact__info-list {
  list-style: disc outside;
  padding-left: 20px;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vb-contact__info-item {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
}

.vb-contact__hours-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 0.85rem;
}

.vb-contact__hours-row:last-child {
  border-bottom: none;
}

.vb-contact__day {
  font-weight: 600;
  color: var(--color-text);
}

.vb-contact__time {
  color: var(--color-text-muted);
}

.vb-contact__socials {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.vb-contact__socials-heading {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin: 0 0 12px;
}

.vb-contact__socials-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.vb-contact__social-link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--color-border, rgba(0,0,0,0.15));
  border-radius: var(--border-radius);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.vb-contact__social-link:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Compact density tweaks for the narrow Hours / Contact modals */
#vb-hours-modal .vb-contact__hours-row,
#vb-contact-modal .vb-contact__hours-row {
  font-size: 0.8rem;
  padding: 5px 0;
}

#vb-contact-modal .vb-contact__details {
  gap: 12px;
  margin-bottom: 20px;
}

#vb-contact-modal .vb-contact__row--featured {
  padding: 12px 14px;
}

#vb-contact-modal .vb-contact__link--big {
  font-size: 1.1rem;
}

#vb-contact-modal .vb-contact__value,
#vb-contact-modal .vb-contact__info-item {
  font-size: 0.88rem;
}

#vb-contact-modal .vb-contact__label {
  font-size: 0.62rem;
}

#vb-contact-modal .vb-contact__socials {
  margin-top: 18px;
  padding-top: 14px;
}

#vb-contact-modal .vb-contact__socials-heading {
  font-size: 0.85rem;
  margin-bottom: 10px;
}

#vb-contact-modal .vb-contact__social-link {
  padding: 5px 11px;
  font-size: 0.78rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 768px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Header */
  .vb-header__inner {
    padding: 12px 16px;
  }

  .vb-header__address {
    font-size: 0.7rem;
    max-width: 140px;
  }

  .vb-header__status {
    font-size: 0.7rem;
    gap: 6px;
  }

  .vb-location-switcher__trigger {
    font-size: 0.7rem;
    max-width: 160px;
    padding: 3px 8px;
  }

  .vb-location-switcher__menu {
    min-width: 180px;
    max-width: 260px;
  }

  .vb-nav {
    gap: 16px;
  }

  .vb-logo__badge {
    width: 36px;
    height: 36px;
    font-size: 0.55rem;
    padding: 4px;
  }

  .vb-logo__img {
    height: 32px;
  }

  /* Info banner */
  .vb-info {
    padding: 8px 16px;
    gap: 16px;
    font-size: 0.72rem;
  }

  /* Hero — inherits full-viewport (100dvh) from the base rule so mobile
     matches desktop. Only adjust typography/sizing below, not height. */
  .vb-hero__logo {
    max-height: calc(150px * var(--vb-logo-scale, 1));
  }

  .vb-hero__heading {
    font-size: 1.8rem;
  }

  .vb-hero__subheading {
    font-size: 1.1rem;
  }

  .vb-hero__cta {
    padding: 14px 48px;
  }

  .vb-hero__actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Collapse 2-column to single column on mobile */
  .vb-menu-layout {
    display: block;
  }

  /* Category nav — revert to horizontal pills on mobile */
  .vb-cats {
    position: sticky;
    /* 60px = header height on mobile; + promo banner height when present.
       (Was the source of the floating gap: the promo override hardcoded the
       desktop 90px base on mobile.) */
    top: calc(var(--vb-header-h) + var(--vb-promo-banner-h, 0px));
    padding: 12px 16px;
    border-bottom: 1px solid var(--vb-hairline);
    max-height: none;
    overflow-y: visible;
    overflow-x: visible;
    width: auto;
  }

  /* Hamburger sits flush with the swipe strip on phones. */
  .vb-cats__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .vb-cats__hamburger {
    display: inline-flex;
  }

  .vb-cats__list {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 0;
    flex: 1;
    min-width: 0;
  }

  .vb-cats__item {
    white-space: nowrap;
    padding: 8px 15px;
    border: 1px solid var(--vb-line);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
  }

  /* Sheet anchored to the sticky nav — full bleed of the nav with the
   * brutalist 6px offset shadow used elsewhere in the template. */
  .vb-cats__sheet {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 160;
    flex-direction: column;
    gap: 10px;
    background: var(--color-background);
    border: 1px solid rgba(0,0,0,0.15);
    border-top: none;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    padding: 14px 16px 12px;
    max-height: min(70dvh, calc(100dvh - var(--vb-header-h) - var(--vb-promo-banner-h, 0px) - 16px));
    overflow-y: auto;
  }
  .vb-cats__sheet[hidden] { display: none; }
  .vb-cats__sheet-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(0,0,0,0.15);
  }
  .vb-cats__sheet-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .vb-cats__sheet-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
  }
  .vb-cats__sheet-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .vb-cats__sheet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: var(--border-radius);
    background: var(--color-background);
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
  }
  .vb-cats__sheet-item:hover { background: rgba(0,0,0,0.04); }
  .vb-cats__sheet-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vb-cats__sheet-count {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  #menu .vb-nav {
    padding: 10px 16px;
    top: calc(var(--vb-header-h) + var(--vb-promo-banner-h, 0px));
  }

  #menu .vb-nav .vb-nav__link {
    font-size: 0.65rem;
    padding: 5px 10px;
  }

  /* Menu sections */
  .vb-menu-section,
  .vb-section {
    padding: 28px 16px;
  }

  .vb-menu-section__title,
  .vb-section__title {
    font-size: 1rem;
  }

  /* Menu grid — 2 columns on tablet */
  .vb-menu-section__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .vb-menu-item__img-wrap {
    height: 140px;
  }

  .vb-menu-item__name {
    font-size: 0.88rem;
  }

  /* Grid items */
  .vb-grid {
    grid-template-columns: 1fr;
  }

  .vb-item__img-wrap {
    height: 160px;
  }

  /* Modal — fullscreen on mobile */
  .vb-modal {
    padding: 0;
    align-items: flex-end;
  }

  .vb-modal__dialog {
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 12px 12px 0 0;
  }

  #vb-hours-modal.vb-modal,
  #vb-contact-modal.vb-modal {
    align-items: center;
    padding: 18px;
  }

  #vb-hours-modal .vb-modal__dialog,
  #vb-contact-modal .vb-modal__dialog {
    max-width: min(440px, 100%);
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    border-radius: 16px;
  }

  /* Item modal uses the full mobile viewport so the product configurator
     covers the page instead of floating as a partial bottom sheet.
     of how many options the item has. The body (.vb-modal__scroll) scrolls
     inside, so the footer (qty + Add to Order) always sits pinned at the
     bottom of the screen instead of floating wherever short content ends.
     Scoped to [data-item-modal] so the hours/contact info modals still size
     to their content. */
  [data-item-modal] .vb-modal__dialog {
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* Cart panel — full width on mobile */
  .vb-cart__panel {
    max-width: 100%;
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.1);
  }

  /* iOS Safari auto-zooms when an <input>/<textarea> with font-size < 16px
     gains focus. Force 16px on mobile so focusing cart/checkout fields no
     longer triggers the zoom-in jump. */
  .vb-checkout-input,
  .vb-instructions__textarea,
  .vb-cats__search-input {
    font-size: 16px;
  }

  /* Keep buttons responsive on touch — avoids the 300ms double-tap zoom
     delay that can make the "Proceed to Checkout" button feel blocked. */
  .vb-cart__checkout-btn,
  .vb-checkout-overlay__submit,
  .vb-checkout-overlay__close,
  .vb-cart__close,
  .vb-checkout-coupon__btn {
    touch-action: manipulation;
  }

  /* Checkout overlay */
  .vb-checkout-overlay__body {
    padding: 0 16px;
  }

  .vb-checkout-overlay__header {
    padding: 14px 16px;
  }

  .vb-checkout-overlay__footer {
    padding: 14px 16px;
  }

  .vb-checkout-fields {
    grid-template-columns: 1fr;
  }

  .vb-checkout-methods {
    grid-template-columns: 1fr;
  }

  .vb-checkout-time-options {
    flex-direction: column;
  }

  .vb-checkout-schedule__row {
    grid-template-columns: 1fr;
  }

  /* Cart FAB — smaller on mobile */
  .vb-cart-fab {
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }

  .vb-about__team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer location card — stack map above body on phone. Without this,
   * the 1.1fr/1fr two-column layout left the map at ~50% width on phones
   * (which forced Google's embed UI to clip / overflow horizontally and
   * "cut off the UI"). Stacking gives the map full card width with a
   * sensible aspect ratio. */
  .vb-footer-loc {
    grid-template-columns: 1fr;
  }
  .vb-footer-loc__map {
    /* aspect-ratio fills the full card width predictably; height: auto
     * lets the iframe size to the ratio instead of inheriting min-height
     * from the desktop default. */
    aspect-ratio: 16 / 10;
    min-height: 0;
    height: auto;
  }
  .vb-footer-loc__map iframe {
    height: 100%;
    min-height: 0;
  }

}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (max-width: 420px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 420px) {
  .vb-header__inner {
    padding: 10px 12px;
  }

  /* Hero inherits full-viewport (100dvh) from the base rule. */
  .vb-hero__logo {
    max-height: calc(190px * var(--vb-logo-scale, 1));
  }

  .vb-hero__heading {
    font-size: 1.5rem;
  }

  .vb-hero__subheading {
    font-size: 1rem;
  }

  .vb-hero__cta {
    padding: 12px 36px;
    font-size: 0.82rem;
  }

  .vb-hero__action-btn {
    padding: 8px 16px;
    font-size: 0.68rem;
  }

  .vb-menu-section,
  .vb-section {
    padding: 20px 12px;
  }

  .vb-menu-section__list {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .vb-menu-item__img-wrap {
    height: 120px;
  }

  .vb-menu-item__info {
    padding: 10px 12px;
  }

  .vb-menu-item__desc {
    -webkit-line-clamp: 2;
  }

  .vb-menu-item__add-btn {
    padding: 4px 10px;
    font-size: 0.65rem;
  }

  .vb-footer {
    padding: 32px 14px 22px;
  }

  .vb-footer__inner {
    gap: 24px;
  }

  .vb-footer__card {
    padding: 24px 18px 18px;
    border-radius: var(--border-radius-lg);
    gap: 20px;
  }

  .vb-footer-loc {
    grid-template-columns: 1fr;
  }

  .vb-footer-loc__map {
    min-height: 0;
  }

  .vb-footer-loc__body {
    padding: 16px 18px;
  }

  .vb-footer-loc__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .vb-footer-loc__today {
    gap: 10px;
  }

  .vb-footer-loc__order {
    margin-left: 0;
  }

  .vb-footer-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .vb-footer-nav__order {
    width: 100%;
    justify-content: center;
  }

  .vb-footer-app {
    flex-direction: column;
    align-items: flex-start;
  }

  .vb-footer-attribution {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }

  .vb-footer-attribution__socials,
  .vb-footer-attribution__powered {
    justify-self: center;
  }

  .vb-footer-tabs__pill {
    font-size: 0.78rem;
    padding: 6px 12px;
  }

  .vb-cats {
    padding: 10px 12px;
  }

  #menu .vb-nav {
    padding: 8px 12px;
  }

  .vb-modal__header {
    padding: 16px 16px 8px;
  }

  .vb-modal__desc {
    padding: 0;
  }

  .vb-modal__footer {
    padding: 12px 16px;
  }

  .vb-variants {
    padding: 0 16px 12px;
  }

  .vb-mod-group {
    padding: 12px 16px 10px;
  }

  .vb-mod-group__options--tiled .vb-mod-option--placement {
    flex: 1 1 calc(50% - 4px);
  }

  .vb-instructions {
    padding: 0 16px 12px;
  }

  .vb-xsell {
    padding: 8px 16px 12px;
  }

  .vb-bundle-slots {
    padding: 4px 16px 8px;
  }

  .vb-about__heading {
    font-size: 1.2rem;
  }

  .vb-about__team-grid {
    grid-template-columns: 1fr;
  }

  .vb-about__gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .vb-about__gallery-img {
    height: 140px;
  }

  .vb-info-modal__body {
    padding: 24px 16px;
  }
}

/* ── Keyboard focus (single global affordance) ───────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Mobile ergonomics: 44px touch floor + iOS safe areas ────────────────── */

@media (max-width: 768px) {
  .vb-menu-item__add-btn,
  .vb-qty__btn,
  .vb-modal__close,
  .vb-cart__close,
  .vb-checkout-overlay__close,
  .vb-method-switcher__trigger,
  .vb-location-switcher__trigger,
  .vb-footer-tabs__arrow {
    min-height: 44px;
    min-width: 44px;
  }

  .vb-cart__footer,
  .vb-checkout-overlay__footer,
  .vb-modal__footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .vb-cart-fab {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

/* ── Add-to-cart feedback ─────────────────────────────────────────────────── */

.vb-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--color-text);
  color: var(--color-background);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 1200;
  max-width: min(90vw, 420px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vb-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes vb-count-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.vb-header__cart-count--bump {
  animation: vb-count-bump 0.3s ease;
}

/* ── Search empty state ───────────────────────────────────────────────────── */

.vb-search-empty {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* ── Empty-cart return path ───────────────────────────────────────────────── */

.vb-cart__browse-btn {
  margin-top: 14px;
  padding: 10px 22px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.vb-cart__browse-btn:hover {
  background: var(--color-primary);
  color: #fff;
}


/* ── Color scheme ──────────────────────────────── */

/* Twilight — Near-black purple to warm ivory, refined, moody, elegant */
:root {
  --color-1: #190019;
  --color-2: #2B124C;
  --color-3: #522B5B;
  --color-4: #854F6C;
  --color-5: #DFB6B2;
  --color-6: #FBE4D8;
}


/* ── Cuisine overrides ─────────────────────────── */

/**
 * Indian overrides — Rich Spice Elegance
 * Color scheme: Twilight (--color-1 #190019 .. --color-6 #FBE4D8)
 *
 * base.css (owner.com system) owns all structure. This layer carries the
 * cuisine mood: a moody twilight-purple hero scrim. Plum palette + DM Sans
 * (from tokens) differentiate the rest.
 */

.vb-hero__overlay {
  background: linear-gradient(180deg, rgba(25, 0, 25, 0.34) 0%, rgba(43, 18, 76, 0.40) 45%, rgba(25, 0, 25, 0.68) 100%);
}