/* Generated by VoiceBit — ms-ruby-s-bakery */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --color-primary: #C1272D;
  --color-surface: #FFFFFF;
  --color-background: #FAFAF8;
  --color-text: #111111;
  --color-text-muted: #666666;
  --color-accent: #C1272D;
  --color-border: #111111;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --border-radius: 4px;
  --border-radius-lg: 8px;
}
:root {
  --color-primary: #aa0a08;
  --color-accent: #aa0a08;
  --vb-logo-scale: 2.7;
}
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-background);
  line-height: 1.6;
  -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; }
/**
 * Pizza cuisine template — Neo-Brutalist Lite
 *
 * Design language: Swiss poster meets DoorDash. Flat design, 2px black
 * structural borders, 0-4px radius, bold uppercase headings, high contrast.
 * NO box-shadows (except modal overlay rgba). Transitions kept to 0.15s max.
 *
 * 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
 */


/* ═══════════════════════════════════════════════════════════════════════════
   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(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 300;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 2;
  line-height: 1;
  backdrop-filter: blur(4px);
  -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.04em;
  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
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 32px;
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--color-background);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.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.78rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
  text-decoration: none;
}

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

.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: 40px;
  height: 40px;
  background: none;
  border: 2px solid var(--color-text);
  border-radius: 0;
  cursor: pointer;
  color: var(--color-text);
  font-size: 1.1rem;
  transition: background-color 0.15s;
}

.vb-header__cart-btn:hover {
  background: var(--color-text);
  color: var(--color-background);
}

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

.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.04em;
  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: 4px 10px;
  border: 2px solid var(--color-text);
  background: var(--color-background);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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 {
  background: var(--color-text);
  color: 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% + 6px);
  left: 0;
  z-index: 220;
  margin: 0;
  padding: 6px 0;
  max-width: 320px;
  list-style: none;
  background: var(--color-background);
  border: 2px solid var(--color-text);
  box-shadow: 4px 4px 0 var(--color-text);
}

/* 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: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.vb-location-switcher__label:hover,
button.vb-method-switcher__label:hover {
  background: var(--color-primary);
  color: var(--color-background);
}

.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.04em;
  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. 100dvh
     tracks the currently-visible viewport and matches desktop behavior. */
  min-height: 100vh;
  min-height: 100dvh;
  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;
  background: rgba(0, 0, 0, 0.45);
  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.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
}

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

.vb-hero__description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  max-width: 500px;
}

.vb-hero__cta {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 16px 64px;
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: opacity 0.15s;
  text-decoration: none;
}

.vb-hero__cta:hover {
  opacity: 0.9;
}

.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: 10px 28px;
  border: 2px solid #fff;
  border-radius: var(--border-radius);
  color: #fff;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  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: #fff;
  color: #000;
}


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

.vb-cats {
  position: sticky;
  top: 90px;
  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: 8px 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: 0.82rem;
  font-family: var(--font-body);
  background: rgba(0,0,0,0.03);
  color: var(--color-text);
  outline: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.vb-cats__search-input:focus {
  background: var(--color-background);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(193,39,45,0.1);
}

.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__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.vb-cats__item {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  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: rgba(0,0,0,0.04);
}

.vb-cats__item--active {
  background: var(--color-text);
  color: var(--color-background);
  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: 54px;
  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: 12px;
  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;
  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: 500;
  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: 1120px;
  margin: 0 auto;
  padding: 48px 32px 40px;
  scroll-margin-top: 140px;
}

.vb-menu-section__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
  margin-bottom: 24px;
}

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

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

.vb-menu-section__badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 2px;
}

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

.vb-menu-section__availability {
  margin: -4px 0 16px;
  padding: 12px 16px;
  border: 1px solid rgba(193, 39, 45, 0.22);
  border-radius: 14px;
  background: rgba(193, 39, 45, 0.06);
  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(220px, 1fr));
  gap: 16px;
}

/* Legacy menu section — used by existing MenuSection.tsx */
.vb-section {
  padding: 40px 32px;
  scroll-margin-top: 140px;
}

.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.04em;
  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
   ═══════════════════════════════════════════════════════════════════════════ */

.vb-menu-item {
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.vb-menu-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

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

.vb-menu-item--temporarily-unavailable:hover {
  box-shadow: none;
}

.vb-menu-item__img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  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: 3px 8px;
  border-radius: 4px;
  background: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  font-weight: 700;
}

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

.vb-menu-item__sold-out-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 2px;
  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: 14px 16px;
  gap: 4px;
  min-width: 0;
}

.vb-menu-item__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  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.04em;
  padding: 2px 6px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 2px;
}

.vb-menu-item__desc {
  font-size: 0.78rem;
  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: 500;
  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.88rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

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

.vb-menu-item__add-btn {
  padding: 6px 14px;
  background: var(--color-text);
  color: var(--color-background);
  border: none;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.15s;
  font-family: var(--font-body);
}

.vb-menu-item__add-btn:hover {
  opacity: 0.85;
}

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


/* ═══════════════════════════════════════════════════════════════════════════
   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.05em;
  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(0, 0, 0, 0.6);
}

.vb-modal__dialog {
  background: var(--color-background);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

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

.vb-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  border: none;
  border-radius: 50%;
  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: rgba(0,0,0,0.1);
}

[data-item-modal] .vb-modal__close {
  background: #dc2626;
  color: #fff;
}

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

.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.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.vb-modal__price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
}

.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: 8px 16px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  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 {
  background: rgba(0, 0, 0, 0.04);
}

.vb-variants__option--active {
  background: var(--color-text);
  color: var(--color-background);
}


/* ═══════════════════════════════════════════════════════════════════════════
   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.04em;
  padding: 2px 6px;
  border: 1px solid var(--color-text);
  border-radius: 2px;
  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: 16px;
  height: 16px;
  border: 2px solid var(--color-text);
  border-radius: 0;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background-color 0.15s;
}

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

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

.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: 2px solid var(--color-text);
}

.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: 2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
  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: 8px;
  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: 500;
  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: var(--color-text);
  color: #fff;
}

.vb-placement-seg__btn--active:hover {
  background: var(--color-text);
  color: #fff;
  opacity: 0.92;
}

.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.04em;
  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: 10px 12px;
  border: 2px solid var(--color-text);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text);
  background: var(--color-background);
  resize: vertical;
  outline: none;
}

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


/* ═══════════════════════════════════════════════════════════════════════════
   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 rgba(0,0,0,0.15);
  border-radius: 6px;
  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 20px;
  height: 40px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.15s;
  font-family: var(--font-body);
}

.vb-modal__add-btn:hover {
  opacity: 0.9;
}


/* ═══════════════════════════════════════════════════════════════════════════
   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: 420px;
  /* 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 rgba(0,0,0,0.1);
  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;
}

.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: 50%;
  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: 14px 20px;
  border-bottom: 1px solid var(--color-text);
}

.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.82rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.vb-cart-item__qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  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: 2px solid var(--color-text);
  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: 12px;
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s, color 0.15s;
  font-family: var(--font-body);
}

.vb-cart__checkout-btn:hover {
  background: var(--color-background);
  color: var(--color-primary);
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   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__close {
  background: rgba(0,0,0,0.05);
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  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 {
  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.75rem;
  font-weight: 600;
  color: var(--color-text);
}

.vb-checkout-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--border-radius, 4px);
  font-size: 0.88rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.15s;
  background: var(--color-background);
  color: var(--color-text);
}

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

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

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

.vb-checkout-radio--active {
  border-color: var(--color-primary);
  background: rgba(0,0,0,0.02);
}

/* 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: 10px 20px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--border-radius, 4px);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text);
  font-family: var(--font-body);
  transition: background-color 0.15s;
  white-space: nowrap;
}

.vb-checkout-coupon__btn:hover {
  background: rgba(0,0,0,0.14);
}

.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.85rem;
  font-weight: 700;
  color: var(--color-text);
  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: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent, var(--color-primary)));
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s;
  font-family: var(--font-body);
}

.vb-checkout-overlay__submit:hover {
  opacity: 0.9;
}

.vb-checkout-overlay__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


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

.vb-footer {
  background: #111827;
  padding: 56px 20px 32px;
  color: #e5e7eb;
}

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

.vb-footer__divider {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0;
}

.vb-footer__tagline {
  margin: 4px 0 0;
  text-align: center;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  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: #fff;
  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(255, 255, 255, 0.18);
  background: transparent;
  color: #e5e7eb;
  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(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

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

.vb-footer-tabs__pill {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #d1d5db;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  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 {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
}

.vb-footer-tabs__pill--active,
.vb-footer-tabs__pill--active:hover {
  background: #fff;
  color: #111827;
  border-color: #fff;
}

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

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

.vb-footer-loc {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
}

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

.vb-footer-loc__map {
  min-height: 260px;
  background: #1f2937;
}

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

.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: #fff;
  margin: 0 0 2px 0;
  font-weight: 700;
}

.vb-footer-loc__sub {
  font-size: 0.82rem;
  color: #9ca3af;
}

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

.vb-footer-loc__dir:hover {
  background: rgba(255, 255, 255, 0.16);
}

.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: #9ca3af;
  font-weight: 500;
}

.vb-footer-loc__row dd {
  color: #e5e7eb;
  margin: 0;
}

.vb-footer-loc__link {
  color: #e5e7eb;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

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

.vb-footer-loc__rule {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 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: #e5e7eb;
  font-weight: 500;
}

.vb-footer-loc__hours-btn {
  background: transparent;
  border: 0;
  color: #a7f3d0;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vb-footer-loc__hours-btn:hover {
  color: #fff;
}

.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, #12a594);
  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: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

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

.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: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.vb-footer-nav__links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

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

.vb-footer-nav__link:hover {
  color: #fff;
}

/* ── 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(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 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: #fff;
  margin: 0;
  font-weight: 700;
}

.vb-footer-app__desc {
  font-size: 0.82rem;
  color: #9ca3af;
  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(255, 255, 255, 0.2);
  color: #e5e7eb;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.vb-footer-app__store:hover {
  background: rgba(255, 255, 255, 0.08);
}

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

.vb-footer-app__legal-link {
  color: #9ca3af;
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 0.15s;
}

.vb-footer-app__legal-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.vb-footer-attribution {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 10px;
}

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

.vb-footer-attribution__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #9ca3af;
  transition: color 0.15s, transform 0.15s;
}

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

.vb-footer-attribution__social:hover {
  color: #fff;
  transform: translateY(-1px);
}

.vb-footer-attribution__text {
  display: inline-flex;
  gap: 8px;
  color: #9ca3af;
  font-size: 0.78rem;
  align-items: center;
  flex-wrap: wrap;
}

.vb-footer-attribution__sep {
  color: #4b5563;
}

.vb-footer-attribution__link {
  color: #e5e7eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vb-footer-attribution__link:hover {
  color: #fff;
}




/* ═══════════════════════════════════════════════════════════════════════════
   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.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  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.04em;
  color: var(--color-text);
  background: var(--color-surface, var(--color-background));
  border: 2px solid var(--color-border, rgba(0,0,0,0.12));
  border-radius: var(--border-radius);
  padding: 6px 14px;
}

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

.vb-about__section-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  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;
}

.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: 2px solid var(--color-border, rgba(0,0,0,0.12));
  border-radius: var(--border-radius);
  padding: 20px;
  background: var(--color-background);
}

.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.04em;
  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: 2px solid var(--color-border, rgba(0,0,0,0.12));
  border-radius: var(--border-radius);
}

@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: 2px solid var(--color-border, rgba(0,0,0,0.12));
  border-radius: var(--border-radius);
  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 {
    padding: 12px 16px;
  }

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

  .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(220px * 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;
    top: 60px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    max-height: none;
    overflow-y: visible;
    overflow-x: visible;
    width: auto;
  }

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

  .vb-cats__item {
    white-space: nowrap;
    padding: 6px 14px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
  }

  #menu .vb-nav {
    padding: 10px 16px;
    top: 46px;
  }

  #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;
    border-radius: 12px 12px 0 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);
  }

}


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

@media (max-width: 420px) {
  .vb-header {
    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-loc {
    grid-template-columns: 1fr;
  }

  .vb-footer-loc__map {
    min-height: 180px;
  }

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

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

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

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

  .vb-cats {
    padding: 0 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-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;
  }
}


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

/**
 * Pizza overrides — Neo-Brutalist Lite
 *
 * Pizza IS the base design language, so almost nothing to override.
 * The base.css was designed around this aesthetic: flat, 2px structural
 * borders, 0-4px radius, bold uppercase headings, high contrast.
 * Colors/fonts/radii come from pizzaTokens via CSS variables.
 */

/* Pizza uses the base design as-is */