:root{--bg:#121110;--surface:#1c1a18;--line:#2c2925;--gold:#e3b23c;--red:#b8352b;--text:#f4efe6;--muted:#a99f8f;--top:0px;--tabs:64px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--top)}
body{margin:0;background:#070606;color:var(--text);font-family:'Poppins',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}

/* mobile column on every screen size */
.app{max-width:480px;margin:0 auto;background:var(--bg);min-height:100vh;position:relative;box-shadow:0 0 0 1px var(--line);padding-bottom:calc(var(--tabs) + env(safe-area-inset-bottom,0px))}
/* first screen = full-width logo + hero, together exactly one screen tall */
.first-screen{height:calc(100svh - var(--tabs) - env(safe-area-inset-bottom,0px));min-height:440px;display:flex;flex-direction:column}
.logo-banner{flex:none;width:100%;background:#000;text-align:center}
.logo{display:block;width:100%;height:56px;object-fit:contain}
.brand{display:block;color:var(--gold);font-weight:700;letter-spacing:.14em;font-size:20px;padding:16px}

/* hero: 1 screen height, horizontal swipe/wheel scrubs video */
.hero{flex:1;min-height:0;position:relative}
.hero-stage{
  position:absolute;inset:0;
  overflow:hidden;background:#000;
  touch-action:pan-y; /* Allows vertical page scroll, JS handles horizontal */
}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,6,.85) 0%,rgba(8,8,6,0) 55%)}
.hero-copy{position:absolute;left:20px;right:20px;bottom:56px}
.slide{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(14px);pointer-events:none;will-change:opacity,transform}
.slide.on{pointer-events:auto}
.slide h1,.slide h2{margin:0 0 8px;font-size:30px;line-height:1.15}
.slide p{margin:0;color:#d8cfbf;font-size:14px}
.cta{display:inline-block;margin-top:10px;background:var(--gold);color:#1a1408;font-weight:700;text-decoration:none;padding:11px 22px;border-radius:999px;font-size:14px}
.hero-meter{position:absolute;left:20px;bottom:20px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.hero-meter .bar{width:110px;height:2px;background:rgba(244,239,230,.2)}
.hero-meter i{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.hero.ready .hero-meter{display:none}
.hero-cue{position:absolute;left:20px;bottom:18px;font-size:12px;color:var(--muted);display:none;transition:opacity .4s}
.hero.ready .hero-cue{display:block}
.hero.used .hero-cue{opacity:0;pointer-events:none}
.hero.no-manual .hero-cue{display:none!important}
.cue-touch{display:none;align-items:center;gap:8px}
.cue-touch i,.hint i{font-style:normal;font-size:18px;line-height:1;color:var(--gold)}
.cue-touch i:first-child,.hint i:first-child{animation:nudgeL 1.2s ease-in-out infinite}
.cue-touch i:last-child,.hint i:last-child{animation:nudgeR 1.2s ease-in-out infinite}
@keyframes nudgeL{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
@keyframes nudgeR{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (pointer:coarse){.cue-touch{display:inline-flex}.cue-mouse{display:none}}
.hero-stage{user-select:none;-webkit-user-select:none}

/* sections */
.section{padding:28px 16px 8px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.sec-head h2{margin:0;font-size:22px}.sub{font-size:12px;color:var(--muted)}

/* popular: 1 column x 6 rows; each card's video is dragged left/right */
.pop-row{display:grid;grid-template-columns:1fr;gap:22px;margin:0;padding:0}
.pop{position:relative}
.pop .vid{
  position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;
  touch-action:pan-y; /* vertical = page scroll, horizontal = JS scrub */
  user-select:none;-webkit-user-select:none;cursor:grab;
}
.pop .vid.dragging{cursor:grabbing}
.pop video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.pop .scrub{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(244,239,230,.22)}
.pop .scrub b{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  background:rgba(0,0,0,.55);color:#f4efe6;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;
  pointer-events:none;transition:opacity .4s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hints-off .hint{opacity:0}
.pop .nm{margin:8px 2px 0;font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop .pr{margin:2px 2px 0;font-size:13px;color:var(--gold);font-weight:600}
.dots{display:none}

/* top pick: one dish with an optional 3D / AR model (the 3D file is only downloaded after the tap) */
.tp-stage{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.tp-stage>img{width:100%;height:100%;object-fit:contain;display:block}
.tp-stage model-viewer{display:block;width:100%;height:100%;--poster-color:#000}
.tp-3d{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);border:0;border-radius:999px;background:var(--gold);color:#1a1408;font:700 13px 'Poppins',sans-serif;padding:9px 18px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.tp-info{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:8px 2px 0}
.tp-info .nm{margin:0;font-size:15px;font-weight:600;line-height:1.25;cursor:pointer}
.tp-info .pr{margin:0;font-size:13px;color:var(--gold);font-weight:600}
.sort{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.sort select{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:6px 10px;font:600 12px 'Poppins',sans-serif;max-width:170px}

/* menu */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 8px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:600 12px 'Poppins',sans-serif;cursor:pointer}
.chip.on{background:var(--gold);color:#1a1408;border-color:var(--gold)}
.offer{font-size:10px;color:var(--red);border:1px solid var(--red);border-radius:6px;padding:1px 6px;margin-right:6px}
.foot-note{text-align:center;color:var(--muted);font-size:11px;padding:28px 0 10px}

/* bottom nav */
.tabs{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(480px,100%);height:calc(var(--tabs) + env(safe-area-inset-bottom,0px));z-index:60;background:var(--surface);border-top:1px solid var(--line);display:flex;padding:0 4px env(safe-area-inset-bottom,0px)}
.tabs button{flex:1;background:none;border:0;color:var(--muted);font:500 11px 'Poppins',sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;cursor:pointer}
.tabs button.active{color:var(--gold)}
.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic{position:relative;display:block;width:22px;height:22px}
.badge[hidden]{display:none}
.badge{position:absolute;top:-6px;right:-10px;background:var(--red);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* sheets */
.sheet{position:fixed;inset:0 0 calc(var(--tabs) + env(safe-area-inset-bottom,0px)) 0;z-index:40;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center}
.sheet.open{display:flex}
.sheet-card{width:min(480px,100%);max-height:calc(88svh - var(--tabs));overflow-y:auto;background:var(--bg);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;padding:18px 16px 24px}
.sheet h3{margin:0 0 4px;font-size:20px}.sheet .muted{color:var(--muted);font-size:13px;margin:0 0 14px}
.sheet .big{width:100%;aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:12px;margin-bottom:12px}
.btn{width:100%;border:0;border-radius:12px;background:var(--gold);color:#1a1408;font:700 15px 'Poppins',sans-serif;padding:13px;cursor:pointer;margin-top:10px}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.line{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;gap:10px}
.qty button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}
.total{display:flex;justify-content:space-between;font-weight:700;padding:14px 0 0}
.trk{list-style:none;margin:14px 0 6px;padding:0}
.trk li{position:relative;padding:6px 0 6px 26px;color:var(--muted);font-size:14px}
.trk li:before{content:"";position:absolute;left:0;top:11px;width:12px;height:12px;border-radius:50%;border:2px solid var(--line)}
.trk li.done{color:var(--text)}.trk li.done:before{background:var(--gold);border-color:var(--gold)}
.trk li.now{color:var(--gold);font-weight:700}.trk li.now:before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px rgba(227,178,60,.25)}
.toast{position:fixed;left:50%;bottom:calc(var(--tabs) + 18px);transform:translate(-50%,20px);background:var(--gold);color:#1a1408;font-weight:600;font-size:13px;padding:9px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hint i,.cue-touch i{animation:none!important}}
/* 3D / AR viewer in the item sheet */
.sheet model-viewer{display:block;width:100%;height:260px;background:#000;border-radius:12px;margin-bottom:12px;--poster-color:#000}
.ar-btn{position:absolute;right:10px;bottom:10px;border:0;border-radius:999px;background:var(--gold);color:#1a1408;font:700 12px 'Poppins',sans-serif;padding:8px 14px;cursor:pointer}
.btn.wa{background:#25d366;color:#052e16}

/* ===== MENU CARD: three layers in one 2.5:1 box (ported from MenuSystem) =====
   1 .bg    background picture (item.bg), dark brown gradient when none
   2 .card  parchment panel over the right two thirds: ornaments, name, price
   3 .food  transparent food PNG, right-aligned, drawn over background AND card
   Tune with --card-w and --food-overlap (shares of the box width). */
.row{--u:calc(min(100vw - 32px, 448px) / 100);--card-w:66.6667%;--food-overlap:20%;--paper:#f6f1e6;--paper-edge:#e9e0cd;--ornament:#b8975a;--ink:#2b2622;
  position:relative;display:block;width:100%;aspect-ratio:2.5/1;margin:0 0 14px;overflow:hidden;color:var(--ink);
  background:radial-gradient(120% 120% at 25% 30%,#3a2d24 0%,#2a211b 60%,#1d1612 100%)}
.row .bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block}
.row .card{position:absolute;inset-block:0;inset-inline-end:0;z-index:1;width:var(--card-w);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2.4*var(--u));text-align:center;
  padding:calc(4*var(--u)) calc(3*var(--u)) calc(11*var(--u));padding-inline-start:calc(var(--food-overlap) + 1.5*var(--u));
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .25  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(120% 90% at 50% 40%,#fbf8f0 0%,var(--paper) 55%,var(--paper-edge) 100%);
  box-shadow:calc(-1.2*var(--u)) 0 calc(3*var(--u)) rgba(0,0,0,.35)}
.row .card::before{content:"";position:absolute;inset:calc(1.6*var(--u));border:1px solid rgba(184,151,90,.55);pointer-events:none}
.row .corner{position:absolute;width:calc(4.6*var(--u));height:calc(4.6*var(--u));color:var(--ornament);pointer-events:none}
.row .corner.tl{top:calc(1.1*var(--u));left:calc(1.1*var(--u))}
.row .corner.tr{top:calc(1.1*var(--u));right:calc(1.1*var(--u));transform:scaleX(-1)}
.row .corner.bl{bottom:calc(1.1*var(--u));left:calc(1.1*var(--u));transform:scaleY(-1)}
.row .corner.br{bottom:calc(1.1*var(--u));right:calc(1.1*var(--u));transform:scale(-1,-1)}
.row .flourish{width:calc(11*var(--u));height:auto;color:var(--ornament)}
.row .name{margin:0;font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:max(12px,calc(3.2*var(--u)));line-height:1.2;overflow-wrap:anywhere}
.row .price{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:max(16px,calc(4.6*var(--u)));line-height:1;letter-spacing:.02em;color:#5b4a2c}
.row .offer{position:absolute;top:calc(2.6*var(--u));right:calc(8*var(--u));margin:0;font-size:9px;background:var(--red);color:#fff;border:0;border-radius:0;padding:2px 6px;letter-spacing:.08em}
.row .food{position:absolute;z-index:2;pointer-events:none;inset-block:5%;inset-inline-start:0;width:calc(100% - var(--card-w) + var(--food-overlap));display:flex;align-items:center;justify-content:flex-end}
.row .food img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:right center;filter:drop-shadow(0 calc(1*var(--u)) calc(1.4*var(--u)) rgba(0,0,0,.45))}
.row .open{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:rgba(227,178,60,.18)}
.row .open:active{background:rgba(227,178,60,.08)}
.row .open:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}

/* Add to cart: centred in the card's text column (card starts at 33.3u, text column is offset by the food overlap) */
.row .add{position:absolute;z-index:4;left:calc(75.9*var(--u));transform:translateX(-50%);bottom:calc(4.6*var(--u));border:0;cursor:pointer;white-space:nowrap;
  background:var(--gold);color:#1a1408;padding:max(8px,calc(1.5*var(--u))) max(14px,calc(3.4*var(--u)));
  font:600 max(11px,calc(2*var(--u)))/1 'Poppins',sans-serif;letter-spacing:.03em;box-shadow:0 calc(.3*var(--u)) calc(1*var(--u)) rgba(0,0,0,.3);transition:filter .15s}
.row .add:hover{filter:brightness(1.07)}.row .add:active{transform:translateX(-50%) translateY(1px)}
.row .card{padding-bottom:calc(11*var(--u))}

/* ===== speed controller (Special section) ===== */
.speed{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12px;color:var(--muted)}
.speed label{font-weight:600}
.speed input[type=range]{flex:1;min-width:0;accent-color:var(--gold);height:28px;cursor:pointer}
.speed output{min-width:18px;text-align:right;color:var(--gold);font-weight:700}

/* ===== menu: sticky search + filter bar ===== */
.menu-bar{position:sticky;top:var(--top);z-index:5;background:var(--bg);margin:0 -16px 8px;padding:4px 16px 0}
.filters{display:flex;gap:8px;align-items:center;padding-bottom:8px}
.filters input[type=search]{flex:1;min-width:0;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:500 16px 'Poppins',sans-serif;-webkit-appearance:none;appearance:none}
.filters input[type=search]::placeholder{color:var(--muted)}
.filters input[type=search]:focus{outline:2px solid var(--gold);outline-offset:1px}
#offerOnly[hidden]{display:none}
.chip[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:24px 0}
.empty[hidden]{display:none}

/* ===== floating WhatsApp button (above the footer, aligned with the 480px column) ===== */
.wa-float{position:fixed;right:max(14px,calc(50% - 226px));bottom:calc(var(--tabs) + 14px + env(safe-area-inset-bottom,0px));z-index:35;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.5);-webkit-tap-highlight-color:transparent}
.wa-float[hidden]{display:none}
.wa-float svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wa-float:active{transform:scale(.95)}
/* the AI chat bubble (assistant.js) moves up so the two never overlap */
body.has-wa .ai-fab{bottom:calc(var(--tabs) + 82px + env(safe-area-inset-bottom,0px))}
body.has-wa .ai-panel{bottom:calc(var(--tabs) + 142px + env(safe-area-inset-bottom,0px))}

/* ===== forms, account, orders, footer info ===== */
.seg{display:flex;gap:6px;margin:10px 0 4px}
.seg button{flex:1;background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:8px 6px;font:600 12px 'Poppins',sans-serif;cursor:pointer}
.seg button.on{background:var(--gold);color:#1a1408;border-color:var(--gold)}
.fl{display:block;font-size:12px;color:var(--gold);font-weight:600;margin:12px 0 6px}
.fi{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:500 16px 'Poppins',sans-serif}
.fi:focus{outline:2px solid var(--gold);outline-offset:1px}
.fmsg{min-height:18px;margin:10px 0 0;font-size:13px;color:#ff8a7a}
.fmsg.ok{color:#4caf7d}
.link{display:block;width:100%;background:none;border:0;color:var(--gold);font:500 13px 'Poppins',sans-serif;margin-top:12px;cursor:pointer;text-decoration:underline}
a.btn{display:block;text-align:center;text-decoration:none}
.btn:disabled{opacity:.6;cursor:default}
.st{font-size:11px;font-weight:700;text-transform:capitalize;color:var(--gold)}
.info{text-align:center;color:var(--muted);font-size:12px;padding:24px 16px 8px}
.info p{margin:0 0 6px}
.info a{color:var(--gold);text-decoration:none}
.info .sort{justify-content:center;margin-top:10px}

/* ===== opening hours, closed banner, ready-by picker ===== */
.closed-bar{margin:10px 16px 0;background:rgba(255,90,70,.12);border:1px solid rgba(255,90,70,.45);color:#ffb3a7;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.45}
.closed-bar b{color:#ff8a7a}
.hours{margin-top:14px;text-align:left}
.hours>p{margin:0 0 6px;color:var(--text)}
.hours ul{list-style:none;margin:0;padding:0;font-size:12px;color:var(--muted)}
.hours li{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.hours li.today{color:var(--gold);font-weight:600}
.open-tag,.closed-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;vertical-align:middle}
.open-tag{background:rgba(76,175,125,.15);color:#4caf7d}
.closed-tag{background:rgba(255,90,70,.15);color:#ff8a7a}