/* ==========================================================================
   7 Tables — Visual Culinary Showcase & Minimalist 21st.dev Design System
   Covers Landing (/), Ordering & Craving Arcade (/order), and Admin (/admin)
   ========================================================================== */

:root {
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-subtle: #f3efe8;
  --surface-warm: #f8f2e8;
  --ink: #161412;
  --ink-secondary: #5c554d;
  --ink-muted: #888076;
  --border: rgba(22, 20, 18, 0.09);
  --border-strong: rgba(22, 20, 18, 0.18);

  --accent: #e53924;
  --accent-hover: #cc2d1a;
  --accent-tint: rgba(229, 57, 36, 0.09);

  --emerald: #126b52;
  --emerald-tint: rgba(18, 107, 82, 0.1);
  --whatsapp: #128c4b;

  --amber: #d97706;
  --amber-tint: rgba(217, 119, 6, 0.13);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(16, 14, 12, 0.04);
  --shadow-sm: 0 4px 14px rgba(16, 14, 12, 0.06), 0 1px 3px rgba(16, 14, 12, 0.04);
  --shadow-md: 0 14px 34px rgba(16, 14, 12, 0.1), 0 3px 8px rgba(16, 14, 12, 0.05);
  --shadow-lg: 0 26px 64px rgba(16, 14, 12, 0.17), 0 6px 18px rgba(16, 14, 12, 0.07);

  --font-display: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Physics-based linear() curves (Modern Web Guidance: `physics-based-easing`) */
  --spring-gentle: linear(
    0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.723 15.6%, 0.938 21.8%,
    1.044 27.1%, 1.077 31.4%, 1.073 35.8%, 1.036 43.8%, 1.005 52.8%,
    0.996 63.2%, 1
  );
  --spring-easing: linear(
    0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%,
    1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%,
    0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%,
    1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%,
    0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%,
    1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%,
    1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1
  );
  --bounce-easing: linear(
    0, 0.214 14.7%, 0.386 23.7%, 0.598 31.9%, 0.999 44.7%, 0.807 52.6%,
    0.762 56%, 0.747 59.4%, 0.758 62.4%, 0.793 65.6%, 0.999 77.4%,
    0.961 81.2%, 0.949 84.8%, 0.956 88%, 0.993 95.5%, 1
  );
}

/* WCAG 2.4.11 Focus Not Obscured under sticky header + toolbar */
html {
  scroll-padding-top: 156px;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  html {
    scroll-behavior: smooth;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

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

button {
  cursor: pointer;
  touch-action: manipulation;
}

/* Natural Interactions: Hover, Press & Focus Ring */
:where(button, .btn, .ghost-pill) {
  scale: 1;
  transition:
    background-color 160ms ease-out,
    border-color 160ms ease-out,
    box-shadow 180ms ease-out,
    scale 160ms ease-out,
    color 160ms ease-out;
}

:where(button:not(:disabled)):active,
:where(.btn):active {
  scale: 0.965;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

[tabindex="-1"]:focus {
  outline: none;
}

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

/* ==========================================================================
   Culinary Media Stage — Seamless Studio-Background Dissolution & Color Grade
   Turns 800×600 opaque white-canvas PNGs into lush, edge-to-edge food frames
   without aspect-ratio stretching or harsh white boxes.
   ========================================================================== */

.culinary-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  background:
    radial-gradient(circle at 50% 46%, #ffffff 32%, #fcf7ef 65%, #efe0ca 100%);
}

.culinary-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.36), transparent 52%),
    linear-gradient(180deg, rgba(22, 20, 18, 0) 68%, rgba(22, 20, 18, 0.055) 100%);
}

.culinary-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
  filter: contrast(1.06) saturate(1.22) brightness(1.01);
  /* Identity transforms prevent stacking-context shifts on hover */
  translate: 0px;
  rotate: 0deg;
  scale: 1.07;
  transition:
    scale 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.28s ease-out;
  transition-timing-function: var(--spring-gentle), ease-out;
}

.culinary-stage.is-drink .culinary-photo {
  scale: 1.01;
}

.culinary-stage.is-logo-placeholder .culinary-photo {
  object-fit: contain;
  scale: 0.46;
  opacity: 0.28;
  filter: none;
}

@supports not (animation-timing-function: linear(0, 1)) {
  .culinary-photo {
    transition-duration: 0.38s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .culinary-photo {
    transition: none;
  }
}

/* ==========================================================================
   Shared Buttons, Badges & Primitives
   ========================================================================== */

.btn {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.btn.primary {
  color: #ffffff;
  background: var(--ink);
  box-shadow: var(--shadow-xs);
}

.btn.primary:hover:not(:disabled) {
  background: #2b2723;
  box-shadow: var(--shadow-sm);
}

.btn.secondary {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border-strong);
}

.btn.secondary:hover:not(:disabled) {
  background: var(--surface-subtle);
}

.btn.ghost {
  color: var(--ink-secondary);
  background: transparent;
}

.btn.ghost:hover:not(:disabled) {
  color: var(--ink);
  background: var(--surface-subtle);
}

.btn.whatsapp-btn {
  color: #ffffff;
  background: var(--whatsapp);
}

.btn.whatsapp-btn:hover {
  background: #0e743d;
}

.btn.whatsapp-outline {
  color: var(--whatsapp);
  background: rgba(18, 140, 75, 0.07);
  border-color: rgba(18, 140, 75, 0.28);
}

.btn.whatsapp-outline:hover:not(:disabled) {
  background: rgba(18, 140, 75, 0.13);
}

.btn.compact-btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.btn.full-width {
  width: 100%;
}

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

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.link-btn:hover {
  color: var(--ink);
}

.pill-badge,
.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pill-tag.vermilion {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: transparent;
}

.pill-tag.emerald {
  color: var(--emerald);
  background: var(--emerald-tint);
  border-color: transparent;
}

.pill-badge-dot,
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-tint);
}

.eyebrow,
.section-eyebrow {
  margin: 0 0 4px;
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Sticky Header & Scroll-Driven Compactness
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 248, 245, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.site-header.is-scrolled {
  background: rgba(250, 248, 245, 0.94);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 20px rgba(16, 14, 12, 0.045);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    @keyframes header-compact-shadow {
      to {
        border-bottom-color: rgba(22, 20, 18, 0.1);
        box-shadow: 0 6px 24px rgba(16, 14, 12, 0.05);
      }
    }

    .site-header {
      animation: header-compact-shadow auto linear both;
      animation-timeline: scroll(block root);
      animation-range: 0px 80px;
    }
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo-dark {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.header-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: 12.5px;
  font-weight: 500;
}

.header-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ghost-pill {
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.ghost-pill:hover {
  background: var(--surface-subtle);
  box-shadow: var(--shadow-xs);
}

/* Segmented Mode Control */
.mode-segmented,
.drawer-mode-bar {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
}

.drawer-mode-bar {
  width: 100%;
  margin-bottom: 16px;
}

.drawer-mode-bar .mode-seg-btn {
  flex: 1;
  justify-content: center;
}

.mode-seg-btn {
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 600;
}

.mode-seg-btn.active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.seg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.5;
}

.mode-seg-btn.active .seg-dot {
  opacity: 1;
}

.seg-dot.emerald {
  background: var(--emerald);
}

.seg-dot.vermilion {
  background: var(--accent);
}

.header-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-trigger-pill {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.game-trigger-pill:hover {
  border-color: var(--border-strong);
  background: var(--surface-warm);
}

.header-cart {
  min-height: 38px;
  padding: 0 12px 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  translate: 0px;
  scale: 1;
}

.header-cart:hover {
  background: #2b2723;
}

.cart-bag-icon {
  width: 16px;
  height: 16px;
}

.cart-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 700;
}

.cart-badge.has-items {
  background: var(--accent);
  color: #ffffff;
}

/* ==========================================================================
   Landing Page (index.html) — Visual Culinary Hero, Bento Trios & Marquee
   ========================================================================== */

.landing-hero-visual {
  position: relative;
  overflow-x: clip;
  padding: clamp(28px, 4.5vw, 54px) clamp(16px, 3vw, 32px) clamp(56px, 7vw, 84px);
}

.hero-ambient {
  position: absolute;
  inset: -120px 0 auto;
  height: 620px;
  pointer-events: none;
  background:
    radial-gradient(50% 60% at 24% 18%, rgba(229, 57, 36, 0.08), transparent 72%),
    radial-gradient(48% 58% at 78% 22%, rgba(18, 107, 82, 0.08), transparent 72%),
    radial-gradient(45% 50% at 55% 45%, rgba(217, 119, 6, 0.06), transparent 75%);
}

.landing-container {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: clamp(30px, 4.5vw, 46px);
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
}

.landing-intro {
  display: grid;
  justify-items: start;
  text-align: left;
  gap: 16px;
}

.landing-intro h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 5.2vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.036em;
}

.landing-lead {
  margin: 0;
  max-width: 520px;
  color: var(--ink-secondary);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.58;
}

.hero-quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

.hero-btn {
  min-height: 48px;
  padding: 0 22px;
  font-size: 14.5px;
}

.hero-visual-stage {
  position: relative;
  padding: 16px 18px 10px;
  display: grid;
  place-items: center;
}

.hero-plate-card {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid rgba(22, 20, 18, 0.1);
  box-shadow: var(--shadow-lg);
  translate: 0px;
  rotate: 0deg;
  scale: 1;
  transition:
    translate 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease-out;
  transition-timing-function: var(--spring-gentle), var(--spring-gentle), ease-out;
}

.hero-plate-card .culinary-stage {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.hero-plate-card.plate-main {
  width: min(86%, 430px);
  z-index: 1;
}

.hero-plate-caption {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
}

.mini-kicker {
  display: block;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-plate-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero-price-pill {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}

.hero-plate-card.plate-float-top,
.hero-plate-card.plate-float-bottom {
  position: absolute;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(16, 14, 12, 0.16), 0 3px 10px rgba(16, 14, 12, 0.06);
  z-index: 2;
}

.hero-plate-card.plate-float-top {
  top: 0;
  right: 0;
  width: clamp(142px, 31%, 172px);
  rotate: 3deg;
}

.hero-plate-card.plate-float-bottom {
  bottom: 78px;
  left: 0;
  width: clamp(150px, 33%, 182px);
  rotate: -3deg;
}

.hero-plate-mini {
  padding: 8px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--surface);
  font-size: 12px;
}

.hero-plate-mini strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
}

.hero-plate-mini span {
  font-weight: 800;
  color: var(--emerald);
  flex-shrink: 0;
}

@keyframes float-gentle-a {
  0%, 100% {
    translate: 0px 0px;
  }
  50% {
    translate: 0px -7px;
  }
}

@keyframes float-gentle-b {
  0%, 100% {
    translate: 0px 0px;
  }
  50% {
    translate: 0px 6px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-plate-card.plate-float-top {
    animation: float-gentle-a 5.4s ease-in-out infinite;
  }

  .hero-plate-card.plate-float-bottom {
    animation: float-gentle-b 6.2s ease-in-out infinite;
  }

  .hero-plate-card:hover {
    scale: 1.03;
  }

  .hero-plate-card:hover .culinary-photo {
    scale: 1.13;
  }
}

/* Bento Choice Cards with Visual Plate Trios */
.bento-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.bento-choice-card {
  padding: clamp(18px, 2.5vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  translate: 0px;
  scale: 1;
  transition:
    translate 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease-out,
    box-shadow 0.25s ease-out;
  transition-timing-function: var(--spring-gentle), ease-out, ease-out;
}

.bento-choice-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
  .bento-choice-card:hover {
    translate: 0px -4px;
  }
}

.bento-visual-header {
  position: relative;
  height: 164px;
  padding: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-visual-header.emerald-stage {
  background: radial-gradient(circle at 50% 45%, #f7fcfa 0%, #e1f1eb 100%);
  border: 1px solid rgba(18, 107, 82, 0.13);
}

.bento-visual-header.vermilion-stage {
  background: radial-gradient(circle at 50% 45%, #fff9f6 0%, #fae6df 100%);
  border: 1px solid rgba(229, 57, 36, 0.13);
}

.bento-plate-trio {
  display: flex;
  align-items: center;
  justify-content: center;
}

.trio-plate {
  width: 122px;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  border: 3px solid #ffffff;
  box-shadow: 0 12px 26px rgba(16, 14, 12, 0.15);
  flex-shrink: 0;
  translate: 0px;
  rotate: 0deg;
  scale: 1;
  transition:
    translate 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    rotate 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  transition-timing-function: var(--spring-gentle);
}

.trio-plate.trio-left {
  margin-right: -24px;
  translate: 0px 6px;
  rotate: -7deg;
  z-index: 1;
}

.trio-plate.trio-center {
  width: 138px;
  scale: 1.04;
  z-index: 3;
}

.trio-plate.trio-right {
  margin-left: -24px;
  translate: 0px 6px;
  rotate: 7deg;
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .bento-choice-card:hover .trio-plate.trio-left {
    translate: -10px 2px;
    rotate: -11deg;
  }

  .bento-choice-card:hover .trio-plate.trio-center {
    translate: 0px -5px;
    scale: 1.1;
  }

  .bento-choice-card:hover .trio-plate.trio-right {
    translate: 10px 2px;
    rotate: 11deg;
  }
}

.bento-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

.bento-tag.emerald {
  color: var(--emerald);
  background: rgba(255, 255, 255, 0.92);
}

.bento-tag.vermilion {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.92);
}

.bento-card-body h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.bento-card-body p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 14.5px;
}

.bento-perks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  color: var(--ink-secondary);
  font-size: 13px;
}

.bento-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bento-perks li::before {
  content: "✓";
  color: var(--emerald);
  font-weight: 700;
}

.bento-cta {
  margin-top: auto;
  min-height: 46px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  transition: background-color 180ms ease, color 180ms ease;
}

.cta-arrow {
  translate: 0px;
  transition: translate 220ms ease-out;
}

@media (prefers-reduced-motion: no-preference) {
  .bento-choice-card:hover .cta-arrow {
    translate: 4px 0px;
  }
}

.bento-choice-card:hover .bento-cta {
  background: var(--ink);
  color: #ffffff;
}

.bento-cta.primary-cta-tint {
  background: var(--ink);
  color: #ffffff;
}

.bento-choice-card:hover .bento-cta.primary-cta-tint {
  background: var(--accent);
}

/* Signature Dishes Marquee (WCAG 2.2.2 Pause/Play + Reduced-Motion Safe) */
.tasting-marquee-section {
  display: grid;
  gap: 14px;
}

.marquee-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.marquee-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.tasting-marquee {
  padding-block: 8px;
  overflow-x: auto;
}

.tasting-marquee-track {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  translate: 0px;
}

.marquee-dish-pill {
  padding: 7px 16px 7px 7px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  translate: 0px;
  scale: 1;
  transition: border-color 160ms ease, box-shadow 180ms ease, translate 220ms ease;
}

.marquee-dish-pill:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.marquee-thumb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(22, 20, 18, 0.08);
}

.marquee-dish-pill strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.marquee-dish-pill small {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
}

@keyframes marquee-glide {
  from {
    translate: 0px 0px;
  }
  to {
    translate: calc(-50% - 6px) 0px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tasting-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  }

  .tasting-marquee-track {
    animation: marquee-glide 34s linear infinite;
  }

  .tasting-marquee:hover .tasting-marquee-track,
  .tasting-marquee:focus-within .tasting-marquee-track,
  .tasting-marquee.is-paused .tasting-marquee-track {
    animation-play-state: paused;
  }

  .marquee-dish-pill:hover {
    translate: 0px -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-toggle,
  .marquee-dish-pill[aria-hidden="true"] {
    display: none;
  }
}

/* Craving Arcade Landing Promo Card with Visual VS Preview */
.arcade-promo-card {
  padding: clamp(22px, 3vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #ffffff 0%, #f9f2e7 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.arcade-promo-copy {
  max-width: 560px;
  display: grid;
  gap: 8px;
}

.arcade-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--amber-tint);
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
}

.arcade-promo-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 25px);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.arcade-promo-copy p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 14.5px;
}

.arcade-promo-actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.arcade-vs-preview {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.vs-mini-card {
  width: 138px;
  padding: 7px 7px 9px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-align: center;
  translate: 0px;
  rotate: 0deg;
  scale: 1;
  transition:
    translate 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    rotate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-timing-function: var(--spring-gentle);
}

.vs-mini-card .culinary-stage {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  margin-bottom: 6px;
}

.vs-mini-card span {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.vs-mini-card.vs-left {
  rotate: -4deg;
}

.vs-mini-card.vs-right {
  rotate: 4deg;
}

.vs-spark-orb {
  width: 34px;
  height: 34px;
  margin-inline: -12px;
  z-index: 2;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(229, 57, 36, 0.32);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .arcade-promo-card:hover .vs-mini-card.vs-left {
    translate: -5px -3px;
    rotate: -8deg;
  }

  .arcade-promo-card:hover .vs-mini-card.vs-right {
    translate: 5px -3px;
    rotate: 8deg;
  }
}

.steps-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.step-item {
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--border);
}

.step-num {
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: var(--surface-subtle);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
}

.step-item strong {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
}

.step-item p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 13px;
}

/* ==========================================================================
   Order Page (/order) — Top Banner, Sticky Visual Filters & Product Grid
   ========================================================================== */

.page-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px clamp(16px, 3vw, 32px) 140px;
  display: grid;
  gap: 28px;
}

.order-top-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
  align-items: stretch;
  gap: 18px;
}

.order-banner-copy {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.order-banner-text {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.step-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  font-size: 12px;
  color: var(--ink-muted);
}

.step-pill {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--ink-secondary);
  font-weight: 600;
}

.step-pill.is-current {
  background: var(--ink);
  color: #ffffff;
}

.step-pill.is-done {
  background: var(--emerald-tint);
  color: var(--emerald);
}

.order-banner-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.order-banner-copy p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 14px;
}

.banner-dish-stack {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.stack-orb {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  translate: 0px;
  scale: 1;
  transition:
    translate 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  transition-timing-function: var(--spring-gentle);
}

.stack-orb + .stack-orb {
  margin-left: -18px;
}

.stack-orb.orb-2 {
  z-index: 2;
}

.stack-orb.orb-3 {
  z-index: 3;
}

@media (prefers-reduced-motion: no-preference) {
  .order-banner-copy:hover .stack-orb.orb-1 {
    translate: -5px -2px;
  }

  .order-banner-copy:hover .stack-orb.orb-2 {
    translate: 0px -4px;
    scale: 1.06;
  }

  .order-banner-copy:hover .stack-orb.orb-3 {
    translate: 5px -2px;
  }
}

.craving-banner-card {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, #1a1715 0%, #2c2520 100%);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.craving-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.craving-banner-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.craving-spark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 18px;
}

.craving-banner-head strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.015em;
}

.craving-banner-head p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12.5px;
}

.craving-mini-thumbs {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mini-duel-thumb {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.mini-vs-dot {
  width: 22px;
  height: 22px;
  margin-inline: -7px;
  z-index: 2;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
}

.craving-game-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-game-btn {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
}

.mini-game-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.mini-game-btn.primary-tint {
  background: var(--accent);
  border-color: var(--accent);
}

.mini-game-btn.primary-tint:hover {
  background: var(--accent-hover);
}

/* Sticky Search & Visual Category Filter Bar */
.menu-toolbar-sticky {
  position: sticky;
  top: 62px;
  z-index: 30;
  margin-inline: calc(-1 * clamp(16px, 3vw, 32px));
  padding: 12px clamp(16px, 3vw, 32px);
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.search-field {
  position: relative;
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: var(--ink-muted);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 14px;
}

.search-field input::placeholder {
  color: var(--ink-muted);
}

.search-clear {
  position: absolute;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface-subtle);
  color: var(--ink-secondary);
  font-size: 16px;
  line-height: 1;
}

.toolbar-meta {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.chips-scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: 2px;
  touch-action: manipulation;
  scrollbar-width: none;
}

.chips-scroller::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 40px;
  padding: 4px 13px 4px 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 600;
}

.chip:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}

.chip-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(22, 20, 18, 0.08);
}

.chip small {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
}

.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
  box-shadow: var(--shadow-xs);
}

.chip.active .chip-thumb {
  border-color: rgba(255, 255, 255, 0.36);
}

.chip.active small {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ==========================================================================
   Guest Favorites Carousel & Inline Scroll-Driven Slide Effects
   ========================================================================== */

.carousel-section {
  display: grid;
  gap: 14px;
}

.section-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.section-bar h2,
.menu-category-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.carousel-controls {
  display: flex;
  gap: 8px;
}

.carousel-arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
}

.carousel-arrow svg {
  width: 18px;
  height: 18px;
}

.carousel-arrow:hover {
  background: var(--surface-subtle);
}

.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 4px 10px;
  touch-action: manipulation;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .carousel-track {
    scroll-behavior: smooth;
  }
}

.carousel-slide {
  flex: 0 0 min(272px, 78vw);
  scroll-snap-align: start;
  display: flex;
  translate: 0px;
  scale: 1;
}

.carousel-slide .dish-card {
  width: 100%;
}

@keyframes carousel-slide-focus {
  0% {
    scale: 0.93;
    opacity: 0.76;
  }
  18%,
  82% {
    scale: 1;
    opacity: 1;
  }
  100% {
    scale: 0.93;
    opacity: 0.76;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .carousel-track > .carousel-slide {
      animation: carousel-slide-focus auto linear both;
      animation-timeline: view(inline);
    }
  }
}

.carousel-markers {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(22, 20, 18, 0.18);
  transition: width 200ms ease, background-color 200ms ease;
}

.carousel-dot[aria-current="true"] {
  width: 24px;
  background: var(--ink);
}

/* ==========================================================================
   Menu Sections, Mouth-Watering Product Cards & Scroll Entry Reveals
   ========================================================================== */

.menu-grid {
  display: grid;
  gap: 38px;
}

.menu-category-section {
  display: grid;
  gap: 16px;
  scroll-margin-top: 156px;
}

.menu-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.menu-category-head span {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
}

.category-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: 18px;
}

.category-items.drinks-grid {
  grid-template-columns: repeat(auto-fill, minmax(234px, 1fr));
}

.dish-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  /* Identity transforms required by `individual-transform-properties` */
  translate: 0px;
  rotate: 0deg;
  scale: 1;
  transition:
    translate 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s ease-out,
    box-shadow 0.24s ease-out;
  transition-timing-function: var(--spring-gentle), ease-out, ease-out;
}

.dish-card:hover {
  border-color: rgba(22, 20, 18, 0.18);
  box-shadow: var(--shadow-md);
}

.dish-card.in-cart {
  border-color: rgba(18, 107, 82, 0.42);
  box-shadow: 0 0 0 1px rgba(18, 107, 82, 0.16), var(--shadow-sm);
}

/* Native 4:3 edge-to-edge food frame matching the 800×600 studio photography */
.dish-card-media {
  width: 100%;
  aspect-ratio: 4 / 3;
}

@media (prefers-reduced-motion: no-preference) {
  .dish-card:hover {
    translate: 0px -4px;
  }

  .dish-card:hover .culinary-photo {
    scale: 1.13;
    filter: contrast(1.08) saturate(1.26) brightness(1.015);
  }

  .dish-card:hover .culinary-stage.is-drink .culinary-photo {
    scale: 1.06;
  }

  .dish-card:hover .culinary-stage.is-logo-placeholder .culinary-photo {
    scale: 0.5;
    filter: none;
  }
}

@keyframes culinary-card-enter {
  from {
    opacity: 0;
    translate: 0px 22px;
    scale: 0.97;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .menu-grid .dish-card,
    .reveal-on-scroll {
      animation: culinary-card-enter auto linear backwards;
      animation-timeline: view(block);
      animation-range: entry 0% entry 48%;
    }
  }
}

.dish-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(22, 20, 18, 0.08);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

.dish-badge.popular-badge {
  background: rgba(22, 20, 18, 0.88);
  color: #ffffff;
  border-color: transparent;
}

.dish-badge.vermilion-badge {
  background: var(--accent);
  color: #ffffff;
  border-color: transparent;
}

.dish-badge.emerald-badge {
  background: var(--emerald);
  color: #ffffff;
  border-color: transparent;
}

.dish-inbag-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--emerald);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

.dish-inbag-pill[hidden] {
  display: none;
}

.dish-card-body {
  padding: 15px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

/* Stretched button pattern — avoids nesting buttons inside buttons */
.dish-card-open {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  display: grid;
  gap: 5px;
}

.dish-card-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.dish-title {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.016em;
  color: var(--ink);
}

.dish-desc {
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.46;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dish-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dish-price-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.dish-price {
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dish-cal {
  color: var(--ink-muted);
  font-size: 11.5px;
}

.card-action-slot {
  position: relative;
  z-index: 2;
}

.quick-add-btn {
  min-height: 36px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.quick-add-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

.qty-pill {
  height: 36px;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #ffffff;
}

.qty-pill.compact {
  height: 32px;
}

.qty-step-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.qty-pill.compact .qty-step-btn {
  width: 26px;
  height: 26px;
  font-size: 14px;
}

.qty-step-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.qty-count {
  min-width: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.empty-state-card {
  padding: 40px 24px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  justify-items: center;
  gap: 8px;
}

.empty-state-card p {
  margin: 0 0 8px;
  color: var(--ink-secondary);
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ==========================================================================
   Fly-to-Bag Token & Floating Sticky Checkout Dock
   ========================================================================== */

.fly-dish-token {
  position: fixed;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  z-index: 95;
  pointer-events: none;
  border: 2px solid #ffffff;
  box-shadow: var(--shadow-md);
}

@keyframes bag-spring-pulse {
  0% {
    scale: 1;
  }
  35% {
    scale: 1.09;
  }
  68% {
    scale: 0.96;
  }
  100% {
    scale: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .is-bouncing {
    animation: bag-spring-pulse 0.48s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-timing-function: var(--bounce-easing);
  }
}

.floating-cart-dock {
  position: fixed;
  right: 16px;
  bottom: 18px;
  left: 16px;
  z-index: 35;
  display: flex;
  justify-content: center;
  pointer-events: none;
  translate: 0px;
  scale: 1;
  transition: opacity 180ms ease-out;
}

.floating-cart-dock[hidden] {
  display: none;
}

body:has(dialog[open]) .floating-cart-dock {
  opacity: 0;
  pointer-events: none;
}

.floating-cart-btn {
  pointer-events: auto;
  width: min(520px, 100%);
  min-height: 56px;
  padding: 8px 10px 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  background: rgba(22, 20, 18, 0.95);
  backdrop-filter: blur(14px);
  color: #ffffff;
  box-shadow: var(--shadow-lg);
}

.floating-cart-btn:hover {
  background: #24201c;
}

.dock-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dock-count {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  font-size: 13px;
}

.dock-mode {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  font-weight: 500;
}

.dock-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dock-total {
  font-family: var(--font-display);
  font-size: 16px;
}

.dock-cta {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
}

/* ==========================================================================
   Native <dialog> Modals & Drawer
   ========================================================================== */

dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: rgba(16, 14, 12, 0);
  backdrop-filter: blur(5px);
  transition-property: background-color, display, overlay;
  transition-duration: 0.24s;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;
}

.app-dialog {
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition-property: opacity, transform, display, overlay;
  transition-duration: 0.26s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-behavior: allow-discrete;
}

.item-dialog,
.game-dialog {
  width: min(660px, calc(100vw - 24px));
  max-height: min(90dvh, 800px);
  margin: auto;
  border-radius: var(--radius-xl);
}

.game-dialog {
  width: min(780px, calc(100vw - 24px));
}

.drawer-dialog {
  width: min(460px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

@media (prefers-reduced-motion: no-preference) {
  .item-dialog,
  .game-dialog {
    transform: scale(0.95) translateY(8px);
  }

  .drawer-dialog {
    transform: translateX(100%);
  }
}

:is(.app-dialog[open]):where(:not([data-closing])) {
  opacity: 1;

  @starting-style {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    transform: scale(1) translate(0, 0);

    @starting-style {
      transform: scale(0.95) translateY(8px);
    }
  }

  &::backdrop {
    background-color: rgba(16, 14, 12, 0.5);

    @starting-style {
      background-color: rgba(16, 14, 12, 0);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.drawer-dialog[open]):where(:not([data-closing])) {
    transform: translateX(0);

    @starting-style {
      transform: translateX(100%);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-dialog,
  .app-dialog::backdrop {
    transition-duration: 0.1s;
  }
}

.dialog-surface {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.drawer-surface {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dialog-topbar,
.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.drawer-header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}

.drawer-header h2,
.game-topbar h2 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.icon-close-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.icon-close-btn:hover {
  background: #e7e2d9;
}

/* Item Customization Dialog Content */
.item-modal-hero {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.item-modal-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.item-modal-summary h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.item-modal-desc {
  margin: 0 0 12px;
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.item-meta-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.item-base-price {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
}

.item-meta-pills span {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 600;
}

.macro-strip {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.macro-strip div {
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  text-align: center;
}

.macro-strip dt {
  color: var(--ink-muted);
  font-size: 11px;
}

.macro-strip dd {
  margin: 1px 0 0;
  font-weight: 700;
  font-size: 13px;
}

.allergen-note {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.item-modal-options {
  display: grid;
  gap: 16px;
}

.addon-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.addon-fieldset legend {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}

.addon-fieldset legend span,
.field-group label span {
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 12px;
}

.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 8px;
}

.addon-chip-option {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
}

.addon-chip-option:has(input:checked) {
  border-color: var(--ink);
  background: var(--surface-warm);
}

.addon-opt-name {
  flex: 1;
  font-weight: 500;
}

.addon-opt-price {
  color: var(--ink-secondary);
  font-size: 12.5px;
}

.field-group {
  display: grid;
  gap: 6px;
}

.field-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.field-group input,
.field-group textarea {
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 14px;
}

.field-group input.field-invalid,
.field-group textarea.field-invalid {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.item-modal-footer {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-qty-stepper {
  height: 44px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-subtle);
}

.modal-qty-stepper button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  font-size: 18px;
  font-weight: 700;
}

.modal-qty-stepper strong {
  min-width: 24px;
  text-align: center;
  font-size: 15px;
}

.modal-add-cta {
  flex: 1;
}

/* ==========================================================================
   Order Slide-Over Drawer
   ========================================================================== */

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-lines-list {
  display: grid;
  gap: 10px;
}

.cart-line-card {
  padding: 12px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
}

.cart-line-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.cart-line-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.cart-line-meta,
.cart-line-note {
  margin: 3px 0 0;
  color: var(--ink-secondary);
  font-size: 12px;
}

.cart-line-note {
  font-style: italic;
}

.cart-line-controls {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-action-btn {
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ink-secondary);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-action-btn:hover {
  color: var(--ink);
}

.empty-cart-box {
  padding: 36px 20px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: 1px dashed var(--border-strong);
  display: grid;
  gap: 6px;
}

.empty-cart-box p {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
}

.empty-cart-box span {
  color: var(--ink-secondary);
  font-size: 13.5px;
}

.empty-cart-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Smart Upsell Strip */
.upsell-strip {
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface-warm);
  border: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

.upsell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}

.upsell-head span {
  color: var(--ink-muted);
}

.upsell-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.upsell-chip {
  flex: 0 0 auto;
  padding: 6px 12px 6px 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: left;
}

.upsell-chip:hover {
  border-color: var(--ink);
}

.upsell-thumb {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex-shrink: 0;
  border: 1px solid rgba(22, 20, 18, 0.08);
}

.upsell-chip strong {
  display: block;
  font-size: 12px;
}

.upsell-chip small {
  color: var(--emerald);
  font-size: 11.5px;
  font-weight: 700;
}

/* Checkout Form & Quick Table Selector */
.checkout-section {
  display: grid;
  gap: 12px;
}

.checkout-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.checkout-section-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
}

.checkout-section-head span {
  color: var(--ink-muted);
  font-size: 12px;
}

.table-quick-pills {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.table-pill {
  min-height: 36px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
}

.table-pill.active {
  background: var(--emerald);
  border-color: var(--emerald);
  color: #ffffff;
}

.checkout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.checkout-grid .full-span {
  grid-column: 1 / -1;
}

.drawer-footer {
  padding: 16px 22px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  gap: 12px;
}

.drawer-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.drawer-total-row span {
  color: var(--ink-secondary);
  font-size: 14px;
}

.drawer-total-row strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
}

.drawer-submit-stack {
  display: grid;
  gap: 8px;
}

.order-feedback {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  font-size: 13px;
  font-weight: 600;
}

.order-feedback.error {
  color: var(--accent);
  background: var(--accent-tint);
}

.order-confirmed-card {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--emerald-tint);
  border: 1px solid rgba(18, 107, 82, 0.25);
  display: grid;
  gap: 8px;
}

.confirmed-badge {
  width: max-content;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--emerald);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.order-confirmed-card h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
}

.confirmed-num,
.confirmed-sub {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 13.5px;
}

.confirmed-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================================
   Craving Arcade Games (Dish Duel, Spin Wheel, 3-Tap Matcher)
   ========================================================================== */

.game-tabs {
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
}

.game-tab {
  min-height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 700;
}

.game-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

.game-stage-body {
  display: grid;
  gap: 16px;
}

.game-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-chip {
  min-height: 30px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 600;
}

.mini-chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

/* Game 1: Dish Duel — Full-Bleed 4:3 Competing Plates */
.duel-progress-wrap {
  display: grid;
  gap: 6px;
}

.duel-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.duel-progress-meta span {
  color: var(--ink-muted);
}

.duel-progress-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  overflow: hidden;
}

.duel-progress-track span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width 260ms ease;
}

.duel-arena {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.duel-vs-badge {
  align-self: center;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(229, 57, 36, 0.28);
}

.duel-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  background: var(--surface);
  translate: 0px;
  scale: 1;
  transition:
    translate 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s ease-out,
    box-shadow 0.22s ease-out;
  transition-timing-function: var(--spring-gentle), ease-out, ease-out;
}

.duel-card:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
  .duel-card:hover {
    translate: 0px -4px;
  }

  .duel-card:hover .culinary-photo {
    scale: 1.13;
  }
}

.duel-img-box {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.streak-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: max-content;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 248, 235, 0.94);
  backdrop-filter: blur(8px);
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

.streak-pill.subtle {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-secondary);
}

.duel-card-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.duel-cat {
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.duel-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.22;
}

.duel-card p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 12.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.duel-card-foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.duel-card-foot strong {
  font-family: var(--font-display);
  font-size: 17px;
}

.duel-choose-pill {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  font-size: 12px;
  font-weight: 700;
}

.duel-card:hover .duel-choose-pill {
  background: var(--ink);
  color: #ffffff;
}

/* Winner Spotlight */
.game-winner-spotlight {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface-warm);
  border: 1px solid var(--border);
  display: grid;
  gap: 14px;
}

.winner-crown {
  display: inline-flex;
  width: max-content;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--amber-tint);
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
}

.winner-card-inner {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.winner-media-stage {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.winner-card-copy h3 {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: 22px;
}

.winner-card-copy p {
  margin: 0 0 10px;
  color: var(--ink-secondary);
  font-size: 13.5px;
}

.winner-price {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 20px;
}

.winner-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Game 2: Spin the Table Wheel */
.wheel-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.wheel-col {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.roulette-stage {
  position: relative;
  width: 268px;
  height: 268px;
  display: grid;
  place-items: center;
}

.roulette-pointer {
  position: absolute;
  top: -6px;
  z-index: 3;
  color: var(--accent);
  font-size: 22px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.roulette-svg {
  width: 100%;
  height: 100%;
  will-change: transform;
}

.wheel-controls {
  display: flex;
  gap: 8px;
}

.wheel-winner-card,
.wheel-placeholder {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface-warm);
  border: 1px solid var(--border);
  display: grid;
  justify-items: start;
  gap: 8px;
}

.wheel-winner-stage {
  width: min(220px, 100%);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.wheel-winner-card h3,
.wheel-placeholder h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
}

.wheel-winner-card p,
.wheel-placeholder p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 13.5px;
}

.wheel-placeholder-icon {
  font-size: 30px;
}

/* Game 3: 3-Tap Craving Matcher */
.quiz-step-box {
  display: grid;
  gap: 14px;
}

.quiz-question {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
}

.quiz-options-stack {
  display: grid;
  gap: 10px;
}

.quiz-option-card {
  padding: 15px 18px;
  text-align: left;
  display: grid;
  gap: 3px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.quiz-option-card:hover {
  border-color: var(--ink);
  background: var(--surface-warm);
}

.quiz-option-card strong {
  font-size: 15px;
}

.quiz-option-card span {
  color: var(--ink-secondary);
  font-size: 13px;
}

.quiz-results-wrap {
  display: grid;
  gap: 14px;
}

.quiz-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quiz-results-head h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
}

.quiz-head-actions {
  display: flex;
  gap: 6px;
}

.quiz-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quiz-match-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.quiz-match-stage {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.quiz-match-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quiz-match-card h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
}

.quiz-match-card p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 12.5px;
}

.quiz-card-foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px clamp(16px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-secondary);
  font-size: 13px;
}

.footer-brand img {
  height: 26px;
  width: auto;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  color: var(--ink-secondary);
  font-size: 13.5px;
  font-weight: 500;
}

.footer-links a:hover {
  color: var(--ink);
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: 12px;
}

.loaf-credit-logo {
  height: 20px;
  width: auto;
}

/* ==========================================================================
   Admin Dashboard (/admin) — Clean Unified Styles
   ========================================================================== */

.admin-page {
  background: var(--bg);
}

.admin-app-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}

.admin-sidebar {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #161412;
  color: #ffffff;
}

.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.admin-sidebar-brand img {
  height: 28px;
  width: auto;
}

.admin-side-nav {
  display: grid;
  gap: 4px;
}

.admin-side-nav button {
  min-height: 40px;
  padding: 0 12px;
  text-align: left;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}

.admin-side-nav button:hover,
.admin-side-nav button.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.admin-sidebar-card {
  margin-top: auto;
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.admin-sidebar-card span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11.5px;
}

.admin-sidebar-backdrop,
.admin-menu-toggle {
  display: none;
}

.admin-main {
  padding: 24px clamp(16px, 3vw, 36px);
  display: grid;
  align-content: start;
  gap: 20px;
}

.admin-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.admin-title-block h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
}

.admin-title-block p:not(.eyebrow) {
  margin: 4px 0 0;
  color: var(--ink-secondary);
  font-size: 14px;
}

.admin-status-message {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.success {
  color: var(--emerald);
}

.error {
  color: var(--accent);
}

.admin-view {
  display: none;
}

.admin-view.active {
  display: grid;
  gap: 20px;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.admin-metrics article,
.admin-command-grid button,
.admin-panel,
.admin-list,
.admin-orders,
.admin-form {
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.admin-metrics article span,
.admin-command-grid span {
  display: block;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
}

.admin-metrics article strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 26px;
}

.admin-command-grid,
.admin-user-grid,
.admin-analytics-grid,
.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.admin-command-grid button {
  text-align: left;
  display: grid;
  gap: 4px;
}

.admin-command-grid small {
  color: var(--ink-secondary);
}

.admin-list-head,
.admin-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-list-head h2,
.admin-panel-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
}

.order-filter-row,
.admin-list-actions,
.admin-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.order-filter-row label,
.admin-form label {
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.order-filter-row select,
.admin-list-actions input,
.admin-form input:not([type="checkbox"]):not([type="file"]),
.admin-form textarea,
.admin-order-foot select {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.admin-orders-list,
.admin-items {
  display: grid;
  gap: 10px;
}

.admin-order-card {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  display: grid;
  gap: 12px;
}

.admin-order-card.status-ready,
.admin-order-card.status-fulfilled {
  border-left-color: var(--emerald);
}

.admin-order-head,
.admin-order-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-order-head h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

.admin-order-head p {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.order-kicker,
.order-status-pill,
.status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.order-kicker,
.status-badge {
  background: var(--emerald-tint);
  color: var(--emerald);
}

.order-status-pill,
.status-badge.hidden {
  background: var(--accent-tint);
  color: var(--accent);
}

.admin-order-customer {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: grid;
  gap: 2px;
  font-size: 13px;
}

.admin-order-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.admin-order-items li {
  padding-top: 6px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
}

.admin-order-items small {
  display: block;
  color: var(--ink-muted);
}

.admin-demo-note,
.empty {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--ink-secondary);
  font-size: 13px;
}

.admin-item {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.admin-item-thumb {
  width: 64px;
  height: 64px;
  padding: 6px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.admin-item-meta {
  display: grid;
  gap: 3px;
}

.admin-item-meta span {
  color: var(--ink-secondary);
  font-size: 13px;
}

.admin-item-actions {
  display: flex;
  gap: 8px;
}

.admin-item-actions button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
}

.admin-item-actions button.danger {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.admin-editor-form {
  display: grid;
  gap: 16px;
  max-width: 820px;
}

.image-uploader {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.image-preview {
  height: 150px;
  padding: 12px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-warm);
}

.image-preview img {
  max-height: 126px;
  object-fit: contain;
}

.image-tools,
.form-row,
.form-actions {
  display: grid;
  gap: 12px;
}

.form-row,
.form-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.switch-row {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.admin-user-grid article,
.admin-analytics-grid article,
.admin-insight-panel,
.admin-settings-grid a {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  gap: 4px;
}

.admin-insight-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.ranked-list,
.insight-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.ranked-list li,
.insight-list div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 920px) {
  .header-status-pill {
    display: none;
  }

  .hero-split,
  .bento-choice-grid,
  .order-top-banner,
  .steps-strip,
  .wheel-layout {
    grid-template-columns: 1fr;
  }

  .landing-intro {
    justify-items: center;
    text-align: center;
    margin: 0 auto;
  }

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

  .hero-visual-stage {
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
  }

  .arcade-promo-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .arcade-vs-preview {
    align-self: center;
  }

  .admin-app-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }

  .admin-page.admin-nav-open .admin-sidebar {
    transform: translateX(0);
  }

  .admin-menu-toggle {
    display: inline-flex;
    min-height: 36px;
    padding: 0 12px;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-weight: 600;
  }
}

@media (max-width: 680px) {
  .order-header-inner {
    flex-wrap: wrap;
  }

  .game-trigger-pill span:last-child {
    display: none;
  }

  .game-trigger-pill {
    padding: 0 10px;
  }

  .header-cart-label {
    display: none;
  }

  .hero-visual-stage {
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .hero-plate-card.plate-main {
    grid-column: 1 / -1;
    width: 100%;
  }

  .hero-plate-card.plate-float-top,
  .hero-plate-card.plate-float-bottom {
    position: static;
    width: 100%;
    rotate: 0deg;
    animation: none;
  }

  .order-banner-copy {
    flex-direction: column;
    align-items: flex-start;
  }

  .craving-mini-thumbs {
    display: none;
  }

  .toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }

  .search-field {
    max-width: none;
  }

  .toolbar-meta {
    display: none;
  }

  .marquee-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .item-modal-hero,
  .winner-card-inner,
  .duel-arena,
  .quiz-pair-grid,
  .checkout-grid,
  .form-row,
  .image-uploader {
    grid-template-columns: 1fr;
  }

  .duel-vs-badge {
    justify-self: center;
  }

  .table-quick-pills {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .drawer-dialog {
    width: 100vw;
    border-radius: 0;
  }
}