/* Premium black-and-red visual system — presentation only; ordering logic stays untouched. */
:root {
  --cream: #f4f0eb;
  --paper: #fcfaf8;
  --ink: #111113;
  --ember: #e3272d;
  --ember-deep: #94151e;
  --basil: #251013;
  --tomato: #e3272d;
  --sand: #e9e2dc;
  --line: rgba(255, 255, 255, .12);
  --muted: #867c7d;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

html { background: #f4efe6 !important; }
body { background: #f4efe6 !important; color: #2c241c !important; box-shadow: none !important; }
body::selection { background: var(--ember); color: #fff; }
em { color: var(--ember); }
.eyebrow { color: #ff5c5f; letter-spacing: .22em; }

.topbar {
  height: 76px; padding: 8px 20px; background: rgba(10, 10, 12, .88);
  border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: none; backdrop-filter: blur(20px);
}
.brand, .brand img, .brand-video { width: 132px; height: 60px; filter: drop-shadow(0 5px 14px rgba(227, 39, 45, .22)); }
.brand { position: relative; display: block; }
.brand-video, .brand-fallback { position: absolute; inset: 0; display: block; object-fit: contain; }
.brand-video { opacity: 0; transition: opacity .2s ease; }
.brand-video.is-playing { opacity: 1; }
.brand-video.is-ended { display: none; }
.brand-fallback { opacity: 1; transition: opacity .2s ease; }
.brand-fallback.is-hidden { opacity: 0; }
.owner-link, .outline-button {
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; padding: 9px 13px;
  color: #fff; background: rgba(255, 255, 255, .04); box-shadow: none; transition: .25s ease;
}
.owner-link:hover, .outline-button:hover { border-color: var(--ember); background: var(--ember); box-shadow: 0 8px 25px rgba(227, 39, 45, .26); }

/* A single food-hero object, inspired by the supplied reel's realistic pizza reveal. */
.hero-scrub{--hero-stage-height:620px;--hero-scrub-distance:50vh;--hero-sticky-top:76px;position:relative;height:calc(var(--hero-stage-height) + var(--hero-scrub-distance) + var(--hero-sticky-top));background:transparent!important}.hero{position:sticky;top:var(--hero-sticky-top);min-height:620px;padding:68px 28px;background:transparent!important;isolation:isolate;overflow:hidden}.hero-video{position:absolute;z-index:0;top:-8%;right:-9%;width:min(79vw,440px);height:auto;aspect-ratio:1;object-fit:contain;pointer-events:none;filter:none!important;background:transparent!important;border:0;outline:0;will-change:contents;opacity:1!important;box-shadow:none!important;mix-blend-mode:normal!important}.hero-video:not([data-video-ready]){background:transparent!important}.hero::after,.hero::before{display:none!important;background:none!important}.hero-shade{z-index:1;background:transparent!important}.hero-video{box-shadow:none!important;opacity:1!important;mix-blend-mode:normal!important;transform:none;transform-origin:center;mask-image:none!important;-webkit-mask-image:none!important}
.hero-content { position: relative; z-index: 2; transform: translateY(-34px); }
.hero .eyebrow { color: #ff696c; }
.hero h1 { max-width: 400px; text-shadow: 0 12px 45px #000; }
.hero h1 em { color: #f14247; }
.intro { color: rgba(255, 255, 255, .7); }
.button { border: 1px solid #f04a4e; border-radius: 2px; background: linear-gradient(115deg, #ed373d, #b51620); box-shadow: 0 14px 28px rgba(227, 39, 45, .26); color: #fff; }
.button:hover { background: #f3464a; box-shadow: 0 18px 36px rgba(227, 39, 45, .34); transform: translateY(-2px); }
.badges span { border-color: rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .25); color: #f7eeee; }
.hero-script { display:none; }

/* The pizza lifts away from its crust/shadow on the trip into the menu. */
.hero-video.is-fallback{background:url('assets/pizza-hero.jpeg') center/cover no-repeat}

.live-strip { padding: 14px 18px; background: #e3272d; color: white; font-size: .69rem; }
.cashback-strip { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; background: linear-gradient(115deg, #ed373d, #b51620); color: #fff; font-size: .69rem; box-shadow: 0 12px 24px rgba(227, 39, 45, .18); border-radius: 0; }
.cashback-strip .live-dot { background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .22); }
.cashback-strip b { letter-spacing: .08em; }
.live-dot { background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .22); }
.menu { background: #111114; padding: 82px 21px; }
.section-head { position: relative; padding-bottom: 17px; margin-bottom: 39px; }
.section-head h2 { color: #fff; text-shadow: none; }
.section-head > p:not(.eyebrow) { color: rgba(255, 255, 255, .57); }
.section-head::after { content: ""; display: block; width: 52px; height: 2px; margin-top: 17px; background: var(--ember); }
.back-to-landing, .back-to-menu { border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: transparent; color: #fff; }
.back-to-landing:hover, .back-to-menu:hover { border-color: var(--ember); background: rgba(227, 39, 45, .12); color: #fff; }
.menu-group { border-top: 1px solid rgba(255, 255, 255, .11); padding-top: 18px; }
.food-card { border: 1px solid rgba(255, 255, 255, .11); border-left: 1px solid rgba(255, 255, 255, .11); border-radius: 4px; background: #19191c; box-shadow: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.food-card:hover { border-color: rgba(241, 66, 71, .72); box-shadow: 0 16px 32px rgba(0, 0, 0, .3); transform: translateY(-3px); }
.food-image { border-bottom-color: rgba(255, 255, 255, .1); filter: saturate(.92) contrast(1.05); }
.food-body h3 { color: #fff; }
.food-body p { color: rgba(255, 255, 255, .53); }
.food-bottom { border-top-color: rgba(255, 255, 255, .1); }
.food-bottom > b { color: #ff676b; }
.stepper { border-color: rgba(255, 255, 255, .18); background: #111113; }
.stepper button { color: #fff; }
.stepper button:hover:not(:disabled) { background: var(--ember); color: #fff; }
.pizza-customization { color: rgba(255, 255, 255, .62); }
.pizza-customization select { border-color: rgba(255, 255, 255, .17); background: #101013; color: #fff; }
.extra-cheese, .extra-chicken { color: #eee; }
.extra-cheese b, .extra-chicken b { color: #ff6367; }

.summary { border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(13, 13, 15, .97); box-shadow: 0 -18px 42px rgba(0, 0, 0, .38); }
.summary-row { color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .09); }
.summary-row b, .total strong, .cart-count { color: #ff6468; }
.summary-button { background: linear-gradient(115deg, #ed373d, #ae1420); }
.details { background: linear-gradient(135deg, #1c0c0f, #080809 62%); color: #fff; }
.details .eyebrow, .details h2 em, .quote { color: #ff5c61; }
.details-copy > p:not(.eyebrow) { color: rgba(255, 255, 255, .64); }
#order-form { border: 1px solid rgba(255, 255, 255, .12); background: #161619; box-shadow: 0 22px 45px rgba(0, 0, 0, .25); color: #fff; }
#order-form label { color: rgba(255, 255, 255, .86); }
#order-form input, #order-form select { border-color: rgba(255, 255, 255, .17); background: #0e0e10; color: #fff; }
#order-form input:focus { border-color: #ed373d; box-shadow: 0 0 0 3px rgba(227, 39, 45, .18); }
.thank-you { background: #111114; color: #fff; }
.thank-you > p:not(.eyebrow), .order-status-card p { color: rgba(255, 255, 255, .62); }
.thank-you #thanks-summary, .thank-you .order-status-card { background: #1a1a1d; color: #fff; box-shadow: none; }

.location { background: radial-gradient(circle at 90% 20%, #4b1118, transparent 42%), #09090b; }
.location h2 { color: #fff; }
.location .eyebrow, .location h2 em, .location a, .location-art span { color: #ff5b60; }
.location p, .location-art p { color: rgba(255, 255, 255, .67); }
.location-art { border-color: rgba(255, 255, 255, .14); background: linear-gradient(135deg, rgba(227, 39, 45, .2), rgba(255, 255, 255, .02)); }
footer { background: #060607; color: rgba(255, 255, 255, .72); }
footer a { color: #ff6468; }
.footer-brand{position:relative;width:170px;height:86px;margin:0 auto 12px;overflow:hidden}.footer-brand-video,.footer-brand-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.footer-brand-video{opacity:0;transition:opacity .2s ease}.footer-brand-video.is-playing{opacity:1}.footer-brand-video.is-ended{display:none}.footer-brand-fallback.is-hidden{display:none}

.dashboard, .order-detail { background: #151518; color: #f5f1ed; }
.admin-head, .kanban-column > header { border-color: rgba(255, 255, 255, .12); }
.admin-head h2, .order-detail h2 { color: #fff; }
.sales-head > div, .order-card, .order-actions, .order-actions button { background: #202024; color: #fff; border-color: rgba(255, 255, 255, .1); }
.sales-head > div:first-child { background: #a71720; }
.kanban-column { border-color: rgba(255, 255, 255, .1); background: #1a1a1e; }
.kanban-column[data-status="ready"] { background: #1b191c; }
.kanban-column[data-status="picked_up"] { background: #17171a; }
.order-card { border-left-color: #e3272d; }
.order-card p, .customer-line, .no-orders, .drop-hint { color: rgba(255, 255, 255, .56); }
.order-card strong, .sales-items b, .detail-total strong { color: #ff6569; }

/* Kinetic premium detailing — fired embers and considered scroll entrances. */
.hero-shade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at 71% 35%, #ffbc79 0 1px, transparent 2px),
    radial-gradient(circle at 86% 48%, #ff4d54 0 2px, transparent 3px),
    radial-gradient(circle at 77% 61%, #f8444b 0 1px, transparent 2px),
    radial-gradient(circle at 93% 68%, #ffb07c 0 1px, transparent 2px),
    radial-gradient(circle at 66% 72%, #e3272d 0 2px, transparent 3px),
    radial-gradient(circle at 88% 26%, #ff6267 0 1px, transparent 2px);
  filter: drop-shadow(0 0 8px rgba(227, 39, 45, .7));
}
.menu { position: relative; isolation: isolate; overflow: clip; }
.menu > * { position: relative; z-index: 1; }
.menu::before, .menu::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.menu::before {
  width: 410px; height: 410px; top: 80px; right: -280px; border-radius: 50%; opacity: .5;
  background: radial-gradient(circle, rgba(227, 39, 45, .18), rgba(227, 39, 45, .04) 31%, transparent 68%);
  filter: blur(8px);
}
.menu::after {
  inset: 0; opacity: 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 186, 123, .92) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 18%, rgba(255, 74, 80, .88) 0 2px, transparent 3px),
    radial-gradient(circle at 73% 38%, rgba(227, 39, 45, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 20% 44%, rgba(255, 99, 104, .76) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 61%, rgba(255, 198, 137, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 10% 82%, rgba(227, 39, 45, .68) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 88%, rgba(255, 93, 98, .8) 0 2px, transparent 3px);
  filter: drop-shadow(0 0 9px rgba(227, 39, 45, .55));
}

@supports (animation-timeline: scroll()) {
  .hero-shade::after { animation: hero-ember-burst linear both; animation-timeline: scroll(root); animation-range: 2vh 72vh; }
}
@supports (animation-timeline: view()) {
  .menu::before { animation: menu-halo linear both; animation-timeline: view(); animation-range: entry 0% cover 58%; }
  .menu::after { animation: menu-embers linear both; animation-timeline: view(); animation-range: entry 0% cover 65%; }
  .menu .section-head { animation: headline-arrival linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
  .menu-group { animation: group-arrival linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
  .food-card { animation: card-arrival linear both; animation-timeline: view(); animation-range: entry 3% cover 23%; }
  .food-card:nth-child(3n + 2) { animation-range: entry 7% cover 28%; }
  .food-card:nth-child(3n) { animation-range: entry 11% cover 32%; }
}
@keyframes hero-ember-burst {
  0% { opacity: 0; transform: scale(.48) rotate(-8deg); }
  36% { opacity: .95; transform: scale(1.03) rotate(3deg); }
  100% { opacity: 0; transform: scale(1.62) rotate(12deg); }
}
@keyframes menu-halo {
  from { transform: translate3d(110px, -40px, 0) scale(.58); opacity: .05; }
  to { transform: translate3d(-60px, 420px, 0) scale(1.3); opacity: .72; }
}
@keyframes menu-embers {
  0% { opacity: 0; transform: scale(.45); }
  34% { opacity: .85; transform: scale(1); }
  100% { opacity: .16; transform: scale(1.55); }
}
@keyframes headline-arrival {
  from { opacity: .1; transform: translate3d(0, 52px, 0); filter: blur(9px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes group-arrival {
  from { opacity: .15; transform: translate3d(0, 66px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes card-arrival {
  from { opacity: .12; transform: translate3d(0, 42px, 0) scale(.96); filter: saturate(.5); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: saturate(1); }
}

@media (max-width: 480px) {
  .hero-scrub{--hero-stage-height:570px;--hero-scrub-distance:50vh}.hero{position:sticky;top:76px;min-height:570px;padding:46px 22px}.hero-video{width:68vw;right:-22%;top:-18%;opacity:.7;mask-image:radial-gradient(ellipse 63% 55% at 50% 50%,#000 0 8%,rgba(0,0,0,.68) 44%,rgba(0,0,0,.14) 70%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 63% 55% at 50% 50%,#000 0 8%,rgba(0,0,0,.68) 44%,rgba(0,0,0,.14) 70%,transparent 100%)}.hero-content{max-width:330px;transform:translateY(-20px)}.hero h1{font-size:clamp(3rem,12vw,4rem)}.intro{max-width:290px}
  .live-strip { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero-shade::after, .menu::before, .menu::after, .menu .section-head, .menu-group, .food-card { animation: none !important; }
  .food-card, .button { transition: none; }
  .hero-scrub{height:auto}.hero-video{display:none}
}
.menu-enhanced .food-card {
  animation: none;
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.985);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .25s ease;
}
.menu-enhanced .food-card.is-visible {
  opacity: 1;
  transform: none;
}
.menu-enhanced .food-card:nth-child(3n + 2) { transition-delay: 70ms; }
.menu-enhanced .food-card:nth-child(3n) { transition-delay: 140ms; }
.menu-nav button[aria-current="true"] {
  border-color: var(--ember);
  background: var(--ember);
  color: #fff;
  box-shadow: 0 7px 18px rgba(227, 39, 45, .25);
}
.food-card .food-image {
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}
.food-card:hover .food-image,
.food-card:focus-within .food-image {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .menu-enhanced .food-card,
  .menu-enhanced .food-card.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .food-card .food-image { transition: none; }
}
.menu-nav{position:sticky;top:76px;z-index:4;display:flex;gap:7px;overflow-x:auto;margin:-18px -21px 32px;padding:10px 21px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.1);background:rgba(17,17,20,.92);backdrop-filter:blur(16px);scrollbar-width:none}.menu-nav::-webkit-scrollbar{display:none}.menu-nav button{flex:0 0 auto;border:1px solid rgba(255,255,255,.17);border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.72);cursor:pointer;font:700 .63rem var(--sans);letter-spacing:.03em;transition:background .2s ease,border-color .2s ease,color .2s ease}.menu-nav button:hover,.menu-nav button:focus-visible{border-color:var(--ember);background:var(--ember);color:#fff;outline:none}.menu-group{scroll-margin-top:132px}
.menu-mode{display:flex;gap:4px;width:max-content;margin:0 auto 30px;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.05)}.menu-mode-option{border:0;border-radius:999px;padding:10px 15px;background:transparent;color:rgba(255,255,255,.58);cursor:pointer;font:700 .68rem var(--sans);transition:background .2s ease,color .2s ease}.menu-mode-option.active,.menu-mode-option:hover,.menu-mode-option:focus-visible{background:var(--ember);color:#fff;outline:none}
.food-card.sold-out{opacity:.62;filter:saturate(.35)}.sold-out-label{display:inline-flex;align-items:center;width:max-content;margin:6px 0 8px;padding:4px 7px;border:1px solid rgba(255,111,115,.45);border-radius:999px;color:#ff8588;font:700 .57rem var(--sans);letter-spacing:.08em;text-transform:uppercase}.food-card.sold-out .stepper{opacity:.55}.food-card.sold-out .stepper button[data-change="1"]{cursor:not-allowed}
.customer-loyalty-note{display:inline-block;margin:-3px 0 14px;padding:7px 10px;border:1px solid rgba(255,99,104,.35);border-radius:999px;background:rgba(227,39,45,.1);color:#ff8588!important;font-size:.76rem;font-weight:700!important;letter-spacing:.02em}
.live-strip #store-status{font-weight:700}.live-strip #store-status.is-closed{color:#ffd5d5}
@media (max-width:600px){.menu{padding:62px 16px 110px}.menu-nav{top:76px;margin:-10px -16px 26px;padding:9px 16px}.menu-group{scroll-margin-top:124px}body:not(.owner-mode) .product-grid{grid-template-columns:1fr!important;gap:12px}.food-card{min-height:136px!important}.food-image,.food-image-mango{flex-basis:36%!important;min-height:136px!important}.food-body{padding:12px!important}.food-body h3{font-size:.9rem!important;line-height:1.15!important}.food-body p{font-size:.64rem!important;line-height:1.3!important}.food-bottom>b{font-size:.82rem!important}.stepper button{width:27px!important;height:27px!important;font-size:.8rem!important}.stepper span{min-width:22px!important;font-size:.7rem!important}}
.hero-video:not([data-video-ready]),.hero-video.is-fallback{background:transparent!important}

html, body { background: #f4efe6 !important; }
.hero-scrub, .hero, .hero-shade, .hero-video-frame, .hero-video-frame::after, .hero-video:not([data-video-ready]), .hero-video.is-fallback { background: transparent !important; }
.hero-video { filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; }

/* Final usability pass: make scanning, checkout, and live operations more deliberate. */
html{scroll-behavior:smooth}body{min-height:100vh}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ff8588;outline-offset:3px}.topbar{position:sticky;top:0;z-index:20}.topbar::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,105,108,.75),transparent);opacity:.7}.owner-link{min-height:40px;font-size:.72rem;letter-spacing:.02em}.hero-content .button{min-height:50px;padding-inline:21px;font-size:.84rem;letter-spacing:.02em}.live-strip{position:relative;overflow:hidden}.live-strip::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.18) 49%,transparent 61%);transform:translateX(-120%);animation:strip-shine 5s ease-in-out infinite}.menu-nav button{min-height:35px}.menu-group>.eyebrow{display:flex;align-items:center;gap:9px}.menu-group>.eyebrow::after{content:"";width:34px;height:1px;background:currentColor;opacity:.55}.food-card{overflow:hidden}.food-card::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid transparent;border-radius:inherit;transition:border-color .25s ease}.food-card:hover::after{border-color:rgba(255,125,128,.58)}.food-image{position:relative}.food-image::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 42%,rgba(0,0,0,.38))}.food-body h3{letter-spacing:-.015em}.food-body p{min-height:2.7em}.pizza-customization{padding-top:4px}.pizza-customization select{min-height:34px;border-radius:5px}.stepper{border-radius:999px;overflow:hidden}.stepper button{min-width:32px;min-height:32px}.summary{border-top-color:rgba(255,100,104,.4)}.summary-button:not(:disabled){min-height:48px;border-radius:3px;box-shadow:0 11px 24px rgba(227,39,45,.25);transition:transform .18s ease,box-shadow .18s ease}.summary-button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 16px 31px rgba(227,39,45,.4)}.details{background:radial-gradient(circle at 88% 8%,rgba(227,39,45,.24),transparent 29%),linear-gradient(135deg,#1c0c0f,#080809 62%)}.modal{padding:18px;background:rgba(2,2,3,.76);backdrop-filter:blur(12px)}.order-detail{border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 28px 80px rgba(0,0,0,.55)}.owner-page{background:radial-gradient(circle at 92% 4%,rgba(227,39,45,.16),transparent 27%),#0c0c0e}.dashboard{max-width:1240px;margin-inline:auto}.kanban-column{min-height:270px}.order-card{border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,.16)}.order-card:hover{transform:translateY(-2px);box-shadow:0 13px 26px rgba(0,0,0,.3)}@keyframes strip-shine{0%,48%{transform:translateX(-120%)}72%,100%{transform:translateX(120%)}}@media (min-width:760px){.hero{padding-inline:clamp(42px,7vw,100px)}.hero-content{max-width:540px}.hero h1{max-width:520px;font-size:clamp(4rem,6.4vw,6.5rem)}.hero-video{right:4%;width:min(58vw,610px)}.menu{padding-inline:clamp(32px,6vw,96px)}.menu-nav{margin-inline:calc(clamp(32px,6vw,96px)*-1);padding-inline:clamp(32px,6vw,96px)}.product-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.summary{position:sticky;bottom:0}}@media (max-width:600px){.owner-link{padding-inline:11px;font-size:.64rem}.hero-content .button{width:100%;justify-content:center}.food-body p{min-height:0}.summary{padding-bottom:max(14px,env(safe-area-inset-bottom))}}
/* The app is constrained to 560px, so this mid-width treatment prevents the cart from hiding the opening pizza frame. */
@media (min-width:481px) and (max-width:759px){.hero-scrub{--hero-stage-height:650px}.hero{min-height:650px;padding:48px 28px}.hero-content{max-width:500px;transform:translateY(-10px)}.hero h1{max-width:500px;font-size:clamp(3.8rem,10vw,4.4rem)}.hero-video{top:52%;right:-5%;width:min(80vw,500px)}.intro{max-width:390px}.badges{margin-top:24px}}
@media (hover:none){.food-card:hover{border-color:rgba(255,255,255,.11);box-shadow:none;transform:none}.food-card:hover::after{border-color:transparent}.food-card:hover .food-image{transform:none}}
.cart-line-edit{display:flex;align-items:center;gap:9px;margin-top:6px}.cart-line-edit button{display:grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font:700 .9rem var(--sans)}.cart-line-edit button:hover{border-color:var(--ember);background:rgba(227,39,45,.2)}.cart-line-edit button:disabled{opacity:.4;cursor:not-allowed}.cart-line-edit b{font-size:.72rem}.cart-line-edit button:focus-visible,.carousel-btn:focus-visible,.stepper button:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%}

/* Keep the opening frame appetising while the video seeks to its scroll position. */
.hero::before{display:block;position:absolute;z-index:0;top:42%;right:-11%;width:min(82vw,470px);height:min(82vw,470px);background:url('assets/pizza-hero.jpeg') center/contain no-repeat;filter:saturate(1.08) contrast(1.08) drop-shadow(0 26px 30px rgba(0,0,0,.52));opacity:.9;transform:perspective(850px) rotateX(11deg) rotateZ(-8deg);pointer-events:none}.hero-video{z-index:1;mix-blend-mode:screen}.hero-shade{z-index:2}.hero-content{z-index:3}@media (min-width:481px) and (max-width:759px){.hero::before{top:52%;right:-5%;width:min(80vw,500px);height:min(80vw,500px)}}

/* An empty cart should be a compact status line, not cover the first hero frame. */
.summary:has(.summary-button:disabled){padding-block:10px}.summary:has(.summary-button:disabled) .total,.summary:has(.summary-button:disabled) .summary-button{display:none!important}.summary:has(.summary-button:disabled) .summary-title{min-height:24px;align-items:center}

/* The first frame stays visible above the dark readability shade; the scrub video still plays beneath it. */
.hero-video{z-index:2;opacity:1;mix-blend-mode:normal;filter:brightness(1.35) saturate(1.15) contrast(1.08)}.hero-shade{z-index:1}.hero::before{display:none!important}.hero-content{z-index:3}

/* On the narrow ordering shell, copy occupies the top and the pizza owns a separate lower stage. */
@media (max-width:600px){.hero-scrub{--hero-stage-height:530px}.hero{min-height:530px;padding:36px 28px 120px}.hero-content{max-width:none;transform:none}.hero h1{max-width:none;font-size:clamp(3.2rem,11vw,3.7rem);line-height:.96;white-space:nowrap}.hero h1 em{display:inline-block}.hero .intro{max-width:330px;margin-bottom:18px}.hero-content .button{width:auto;min-width:150px}.hero-video,.hero::before{top:65%;right:-14%;width:88vw;height:88vw}.hero-video{z-index:2}.hero::before{z-index:1;opacity:.38}.hero-shade{z-index:0}.hero-content{z-index:3}}
@media (min-width:760px){.hero-video{top:42%}.hero::before{top:42%}}
.hero-video-frame{position:absolute;z-index:2;top:42%;right:4%;width:min(58vw,610px);aspect-ratio:1;overflow:hidden;mask-image:radial-gradient(ellipse 60% 49% at 50% 50%,#000 0 27%,rgba(0,0,0,.86) 48%,rgba(0,0,0,.32) 68%,transparent 91%);-webkit-mask-image:radial-gradient(ellipse 60% 49% at 50% 50%,#000 0 27%,rgba(0,0,0,.86) 48%,rgba(0,0,0,.32) 68%,transparent 91%)}
.hero-video-frame .hero-video{position:relative;inset:auto;display:block;width:100%;height:100%;aspect-ratio:auto;mask:none;-webkit-mask:none}
.hero-video-frame::after{content:none!important;position:absolute;inset:0;z-index:1;pointer-events:none;background:transparent!important}
.hero-scrub:not(.is-complete)+.live-strip{visibility:hidden;opacity:0;pointer-events:none}
.hero-scrub.is-complete+.live-strip{visibility:visible;opacity:1;transition:opacity .18s ease}
@media (min-width:481px) and (max-width:759px){.hero-video-frame{top:52%;right:-5%;width:min(80vw,500px)}}
@media (max-width:600px){.hero-video-frame{top:44%;right:-5%;width:96vw;height:42vw;aspect-ratio:auto}}
@media (min-width:601px) and (max-width:759px){.hero-scrub{--hero-stage-height:530px}.hero{min-height:530px;padding:36px 28px 120px}.hero-content{max-width:none;transform:none}.hero h1{max-width:none;font-size:clamp(3.2rem,11vw,3.7rem);line-height:.96;white-space:nowrap}.hero h1 em{display:inline-block}.hero .intro{max-width:330px;margin-bottom:18px}.hero-content .button{width:auto;min-width:150px}.hero-video-frame{top:44%;right:-5%;width:96vw;height:42vw;aspect-ratio:auto}}
/* Keep customer cards spacious and make the primary add action unmistakable. */
body:not(.owner-mode) .product-grid {
  gap: 16px;
}
body:not(.owner-mode) .food-card {
  display: block;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
}
body:not(.owner-mode) .food-image,
body:not(.owner-mode) .food-image-mango {
  display: block;
  width: 100%;
  height: 154px !important;
  min-height: 154px;
  border-radius: 11px 11px 0 0;
  background-position: center;
}
body:not(.owner-mode) .food-body {
  display: flex;
  min-height: 142px;
  padding: 14px 14px 13px;
}
body:not(.owner-mode) .food-body h3 {
  margin-bottom: 7px;
  font-size: .9rem;
  line-height: 1.18;
}
body:not(.owner-mode) .food-body p {
  font-size: .65rem;
  line-height: 1.35;
}
body:not(.owner-mode) .food-bottom {
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
body:not(.owner-mode) .food-bottom > b {
  font-size: .86rem;
}
body:not(.owner-mode) .stepper {
  gap: 4px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
body:not(.owner-mode) .stepper button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: #28282c;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}
body:not(.owner-mode) .stepper button:last-child {
  border-color: #f04a4e;
  background: #e3272d;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
}
body:not(.owner-mode) .stepper button:last-child:disabled {
  border-color: #5f2529;
  background: #5f2529;
  color: #fff;
  opacity: .65;
}
body:not(.owner-mode) .stepper span {
  min-width: 18px;
  color: #fff;
  font-size: .72rem;
  text-align: center;
}
@media (max-width: 480px) {
  body:not(.owner-mode) .product-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  body:not(.owner-mode) .food-image,
  body:not(.owner-mode) .food-image-mango {
    height: 190px !important;
    min-height: 190px;
  }
}