/* ============================================================================
   Savior Kiosk
   Designed for a commercial touchscreen first: portrait 1080×1920 is the primary
   target, landscape 1920×1080 is supported. Everything scales from a viewport-
   relative type ramp so the same stylesheet is legible on a 15" and a 32" panel.

   Touch targets are never below 56px, primary actions never below 88px.
   Nothing depends on hover. Nothing depends on colour alone.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

:root{
  /* Accent is injected per-merchant by the template; these are the fallbacks. */
  --accent:#E4572E;
  --accent-2:#F2A65A;

  --bg:#0B0D12;
  --bg-1:#11141C;
  --bg-2:#171B26;
  --bg-3:#1F2431;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --ink:#F7F5F2;
  --ink-2:#B8BFCC;
  --ink-3:#7E8798;
  --good:#3DD68C;
  --bad:#FF6B5E;

  --r-sm:14px; --r-md:22px; --r-lg:32px; --r-xl:44px;

  /* Viewport-relative ramp: min, preferred, max. */
  --t-xs:clamp(.8rem, .55vw + .62rem, 1.05rem);
  --t-sm:clamp(.95rem, .75vw + .72rem, 1.3rem);
  --t-md:clamp(1.1rem, 1vw + .8rem, 1.6rem);
  --t-lg:clamp(1.4rem, 1.5vw + .95rem, 2.15rem);
  --t-xl:clamp(1.9rem, 2.6vw + 1rem, 3.2rem);
  --t-2xl:clamp(2.5rem, 4.2vw + 1rem, 4.75rem);
  --t-3xl:clamp(3.2rem, 6.5vw + 1rem, 7rem);

  --pad:clamp(1.25rem, 2.4vw, 2.75rem);
  --gap:clamp(.85rem, 1.5vw, 1.6rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.55,0,.65,1);
  --dur:.42s;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* Light panel option for bright dining rooms. */
[data-theme="daylight"]{
  --bg:#FBF8F4; --bg-1:#FFFFFF; --bg-2:#F3EFE9; --bg-3:#E9E3DA;
  --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.16);
  --ink:#15181F; --ink-2:#4A515F; --ink-3:#79808F;
}

body.sk-body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--t-md);
  line-height:1.4;
  min-height:100dvh;
  overflow:hidden;                 /* the app owns its own scroll regions */
  overscroll-behavior:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-font-smoothing:antialiased;
}

/* Accessible-reach mode: pulls interactive content into the lower two thirds so a
   seated or shorter customer can reach it. Toggled from the a11y button. */
body.sk-reach .sk-screen{padding-top:clamp(6rem,22vh,18rem)}
body.sk-reach .sk-sheet{max-height:78dvh}

body.sk-bigtext{--t-sm:1.25rem;--t-md:1.5rem;--t-lg:2.1rem;--t-xl:2.9rem}

button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;margin:0}
img{display:block;max-width:100%}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none !important}

:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px;border-radius:8px}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.sk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:88px;padding:0 clamp(1.5rem,3vw,2.75rem);
  border-radius:var(--r-lg);
  font-size:var(--t-lg);font-weight:700;letter-spacing:-.015em;
  transition:transform .16s var(--ease), filter .16s var(--ease), box-shadow .2s var(--ease);
  will-change:transform;
}
.sk-btn svg{width:1.05em;height:1.05em;stroke-width:2.6}
.sk-btn:active{transform:scale(.965)}
.sk-btn--primary{
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 30px -8px color-mix(in srgb, var(--accent) 65%, transparent);
}
.sk-btn--primary:disabled{filter:grayscale(.7) brightness(.6);box-shadow:none}
.sk-btn--ghost{background:var(--bg-3);color:var(--ink);border:2px solid var(--line-2)}

/* ══ ATTRACT ═════════════════════════════════════════════════════════════ */
.sk-attract{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  background:var(--bg);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.sk-attract.is-leaving{opacity:0;transform:scale(1.06);pointer-events:none}

.sk-attract-media{position:absolute;inset:0;overflow:hidden}
.sk-attract-video,.sk-attract-img{
  width:100%;height:100%;object-fit:cover;
  animation:sk-kenburns 26s var(--ease) infinite alternate;
}
@keyframes sk-kenburns{from{transform:scale(1.04)}to{transform:scale(1.16)}}

/* Fallback bed when the merchant has no hero: a slow drifting collage built from
   whatever dish imagery the menu resolved. Populated by JS. */
/* Explicit 4:3 cells — without them the tiles stretch into bands on a tall panel and
   object-fit crops each dish down to an unreadable stripe. */
.sk-attract-collage{
  position:absolute;inset:-8%;display:grid;gap:12px;
  grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,1fr);
  opacity:.4;filter:blur(2px) saturate(.85);
  animation:sk-drift 44s linear infinite alternate;
}
.sk-attract-collage img{width:100%;height:100%;object-fit:cover;border-radius:20px}
@media (max-aspect-ratio:3/4){.sk-attract-collage{grid-template-columns:repeat(3,1fr)}}
@media (min-aspect-ratio:1/1){.sk-attract-collage{grid-template-columns:repeat(4,1fr)}}
@keyframes sk-drift{from{transform:translate3d(0,-2%,0) scale(1.05)}
                    to{transform:translate3d(0,2%,0) scale(1.12)}}

.sk-attract-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 50% 108%, color-mix(in srgb,var(--accent) 34%, transparent) 0%, transparent 62%),
    radial-gradient(75% 48% at 50% 44%, rgba(6,7,11,.86) 0%, transparent 78%),
    linear-gradient(180deg, rgba(6,7,11,.82) 0%, rgba(6,7,11,.5) 34%, rgba(6,7,11,.95) 100%);
}

.sk-attract-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:var(--pad);
  animation:sk-rise .9s var(--ease) both;
}
@keyframes sk-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.sk-attract-logo{max-width:min(58vw,520px);max-height:26vh;object-fit:contain;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.6))}
.sk-attract-wordmark{
  margin:0;font-size:var(--t-3xl);font-weight:800;letter-spacing:-.035em;line-height:.95;
  text-wrap:balance;max-width:14ch;
  text-shadow:0 10px 44px rgba(0,0,0,.65);
}
.sk-attract-tagline{
  margin:clamp(.75rem,1.6vh,1.5rem) 0 0;font-size:var(--t-lg);font-weight:500;
  color:var(--ink-2);max-width:26ch;text-wrap:balance;
}

/* Touch to Start — the single most important affordance on the whole kiosk.
   Sized so it is unmistakable from several feet away. */
.sk-touchstart{
  position:relative;margin-top:clamp(2.5rem,7vh,6rem);
  width:clamp(240px,42vw,440px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
}
.sk-touchstart-ring{
  position:absolute;inset:0;border-radius:50%;
  border:3px solid color-mix(in srgb,var(--accent-2) 70%, transparent);
  animation:sk-pulse 3.1s var(--ease-in) infinite;
}
.sk-touchstart-ring--2{animation-delay:1.05s}
@keyframes sk-pulse{
  0%{transform:scale(.82);opacity:.9}
  70%{transform:scale(1.24);opacity:0}
  100%{transform:scale(1.24);opacity:0}
}
.sk-touchstart-face{
  position:relative;width:82%;height:82%;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.4rem,1.4vh,1rem);
  background:linear-gradient(150deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow:0 26px 70px -18px color-mix(in srgb,var(--accent) 80%, transparent),
             inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform .2s var(--ease);
}
.sk-touchstart:active .sk-touchstart-face{transform:scale(.94)}
.sk-touchstart-icon{width:clamp(48px,8vw,88px);height:clamp(48px,8vw,88px);stroke-width:1.7}
.sk-touchstart-label{font-size:var(--t-xl);font-weight:800;letter-spacing:-.02em}
.sk-attract-hint{margin:clamp(1.5rem,4vh,3rem) 0 0;color:var(--ink-3);
  font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* ══ APP CHROME ══════════════════════════════════════════════════════════ */
.sk-app{display:flex;flex-direction:column;height:100dvh;position:relative}

.sk-topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--gap);
  padding:calc(var(--pad) * .6) var(--pad);
  min-height:96px;
  background:color-mix(in srgb,var(--bg-1) 92%, transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
  position:relative;z-index:20;
}
.sk-back{
  display:inline-flex;align-items:center;gap:.5em;
  min-height:64px;padding:0 1.15rem;border-radius:var(--r-md);
  background:var(--bg-3);font-size:var(--t-sm);font-weight:650;color:var(--ink-2);
  transition:transform .15s var(--ease);
}
.sk-back:active{transform:scale(.94)}
.sk-back svg{width:1.3em;height:1.3em;stroke-width:2.8}
.sk-back[hidden]{display:none}
.sk-topbar-title{
  flex:1;min-width:0;text-align:center;
  font-size:var(--t-md);font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2);
}
.sk-topbar-actions{display:flex;align-items:center;gap:.6rem}
.sk-iconbtn{
  width:64px;height:64px;border-radius:var(--r-md);background:var(--bg-3);
  display:grid;place-items:center;color:var(--ink-2);
}
.sk-iconbtn svg{width:28px;height:28px}
.sk-cartbtn{
  position:relative;width:64px;height:64px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  display:grid;place-items:center;
}
.sk-cartbtn svg{width:28px;height:28px}
.sk-cartbtn-count{
  position:absolute;top:-7px;right:-7px;min-width:30px;height:30px;padding:0 7px;
  border-radius:99px;background:var(--ink);color:var(--bg);
  font-size:.9rem;font-weight:800;display:grid;place-items:center;
  border:3px solid var(--bg-1);
}
.sk-cartbtn.is-bumped{animation:sk-bump .45s var(--ease)}
@keyframes sk-bump{0%,100%{transform:none}35%{transform:scale(1.22) rotate(-7deg)}}

/* ── Screens ─────────────────────────────────────────────────────────────── */
.sk-screen{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:var(--pad);padding-bottom:calc(var(--pad) + 160px);
  animation:sk-screen-in .38s var(--ease) both;
}
@keyframes sk-screen-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sk-screen::-webkit-scrollbar{width:10px}
.sk-screen::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}

.sk-h1{margin:0;font-size:var(--t-2xl);font-weight:800;letter-spacing:-.03em;
  line-height:1.02;text-wrap:balance}
.sk-sub{margin:.6rem 0 0;font-size:var(--t-md);color:var(--ink-3)}

/* ── Fulfillment ─────────────────────────────────────────────────────────── */
.sk-screen--fulfil{display:flex;flex-direction:column;justify-content:center;text-align:center}
.sk-fulfil-grid{
  display:grid;gap:var(--gap);margin-top:clamp(2rem,5vh,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
}
.sk-fulfil{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.9rem,2vh,1.6rem);
  padding:clamp(2.25rem,5vh,4rem) 1.5rem;
  border-radius:var(--r-xl);background:var(--bg-2);
  border:2px solid var(--line);
  transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.sk-fulfil:active{transform:scale(.97);border-color:var(--accent);background:var(--bg-3)}
.sk-fulfil-icon{
  width:clamp(88px,13vw,152px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
}
.sk-fulfil-icon svg{width:52%;height:52%;stroke-width:1.9}
.sk-fulfil-name{font-size:var(--t-xl);font-weight:800;letter-spacing:-.02em}
.sk-fulfil-desc{font-size:var(--t-sm);color:var(--ink-3);max-width:22ch;text-wrap:balance}

/* ── Menu: category rail + item grid ─────────────────────────────────────── */
.sk-screen--menu{display:grid;gap:0;padding:0;overflow:hidden;
  grid-template-columns:clamp(200px,22vw,330px) 1fr}

.sk-catrail{
  overflow-y:auto;overscroll-behavior:contain;
  padding:var(--pad) calc(var(--pad) * .5) calc(var(--pad) + 160px);
  background:var(--bg-1);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:.7rem;
}
.sk-catrail::-webkit-scrollbar{width:0}
.sk-cat{
  position:relative;display:flex;align-items:center;gap:.9rem;
  min-height:96px;padding:.7rem;border-radius:var(--r-md);
  background:var(--bg-2);border:2px solid transparent;text-align:left;
  transition:transform .16s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  overflow:hidden;
}
.sk-cat:active{transform:scale(.97)}
.sk-cat.is-active{border-color:var(--accent);background:var(--bg-3)}
/* Active state is marked by a bar as well as colour — never colour alone. */
.sk-cat.is-active::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:5px;
  border-radius:0 4px 4px 0;background:linear-gradient(var(--accent),var(--accent-2));
}
.sk-cat-thumb{
  width:70px;height:70px;flex:0 0 auto;border-radius:16px;object-fit:cover;
  background:var(--bg-3);
}
.sk-cat-fallback{
  width:70px;height:70px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;
  font-size:1.9rem;background:linear-gradient(140deg,var(--bg-3),var(--bg-2));
}
.sk-cat-label{font-size:var(--t-sm);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.sk-cat-n{display:block;font-size:.82em;font-weight:500;color:var(--ink-3);margin-top:.2em}

.sk-menu-main{overflow-y:auto;overscroll-behavior:contain;
  padding:var(--pad);padding-bottom:calc(var(--pad) + 170px)}
.sk-menu-head{margin-bottom:var(--gap)}
.sk-menu-title{margin:0;font-size:var(--t-xl);font-weight:800;letter-spacing:-.028em}
.sk-menu-count{margin:.3rem 0 0;color:var(--ink-3);font-size:var(--t-sm)}

.sk-itemgrid{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
}

/* ── Item card: photo-dominant ───────────────────────────────────────────── */
.sk-item{
  position:relative;display:flex;flex-direction:column;text-align:left;
  border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);
  transition:transform .18s var(--ease), box-shadow .22s var(--ease);
  animation:sk-card-in .4s var(--ease) both;
}
@keyframes sk-card-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
/* Unattended-hardware safety net. A staggered entrance uses fill-mode:both, so an
   animation that never runs — throttled tab, stalled compositor, animations disabled
   at the OS level — would leave menu items invisible forever. JS stamps this class
   shortly after render to force the finished state no matter what the animation did. */
.sk-anim-done .sk-item,.sk-anim-done .sk-line{
  animation:none !important;opacity:1 !important;transform:none !important;
}
.sk-item:active{transform:scale(.975)}
.sk-item.is-added{animation:sk-added .5s var(--ease)}
@keyframes sk-added{0%,100%{transform:none}40%{transform:scale(1.03)}}

.sk-item-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-3)}
.sk-item-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.sk-item:active .sk-item-media img{transform:scale(1.05)}

/* No photograph available: a composed typographic tile rather than a grey box. */
.sk-item-media--none{
  display:grid;place-items:center;
  background:
    radial-gradient(90% 90% at 30% 15%, color-mix(in srgb,var(--accent) 26%, transparent), transparent 70%),
    linear-gradient(150deg,var(--bg-3),var(--bg-2));
}
.sk-item-initial{
  font-size:clamp(2.6rem,6vw,4.2rem);font-weight:800;letter-spacing:-.05em;
  color:color-mix(in srgb,var(--ink) 26%, transparent);
}
.sk-item-body{padding:clamp(.9rem,1.7vw,1.4rem);display:flex;flex-direction:column;gap:.4rem;flex:1}
.sk-item-name{font-size:var(--t-md);font-weight:700;letter-spacing:-.015em;line-height:1.18;
  text-wrap:balance}
.sk-item-desc{font-size:var(--t-xs);color:var(--ink-3);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sk-item-foot{display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;margin-top:auto;padding-top:.6rem}
.sk-item-price{font-size:var(--t-md);font-weight:800;letter-spacing:-.02em}
.sk-item-price small{font-size:.62em;font-weight:600;color:var(--ink-3);margin-right:.3em}
.sk-item-add{
  width:60px;height:60px;flex:0 0 auto;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  display:grid;place-items:center;font-size:1.9rem;font-weight:400;line-height:1;
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--accent) 70%, transparent);
}
.sk-item-add svg{width:26px;height:26px;stroke-width:2.6}

.sk-item-badge{
  position:absolute;top:.85rem;left:.85rem;
  padding:.4em .8em;border-radius:99px;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.02em;
  background:rgba(8,10,14,.72);color:#fff;backdrop-filter:blur(10px);
}
.sk-item.is-out{opacity:.5}
.sk-item.is-out .sk-item-add{display:none}
.sk-item-out{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(8,10,14,.62);backdrop-filter:blur(3px);
  font-size:var(--t-sm);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}

/* Internal-only marker on demo imagery so nobody mistakes it for the real dish. */
.sk-demo-flag{
  position:absolute;bottom:.6rem;right:.6rem;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  padding:.28em .6em;border-radius:6px;
  background:rgba(8,10,14,.66);color:rgba(255,255,255,.62);backdrop-filter:blur(6px);
}
body:not(.sk-show-demo-flags) .sk-demo-flag{display:none}

/* ══ CONFIGURATOR SHEET ══════════════════════════════════════════════════ */
.sk-sheet-scrim{
  position:fixed;inset:0;z-index:70;
  background:rgba(4,6,10,.72);backdrop-filter:blur(10px);
  display:flex;align-items:flex-end;justify-content:center;
  animation:sk-fade .28s var(--ease) both;
}
@keyframes sk-fade{from{opacity:0}to{opacity:1}}
.sk-sheet-scrim.is-closing{animation:sk-fade .24s var(--ease-in) reverse both}

.sk-sheet{
  width:min(1000px,100%);max-height:92dvh;
  display:flex;flex-direction:column;
  background:var(--bg-1);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  border:1px solid var(--line-2);border-bottom:0;
  box-shadow:0 -30px 90px rgba(0,0,0,.6);
  animation:sk-sheet-up .42s var(--ease) both;
}
@keyframes sk-sheet-up{from{transform:translateY(100%)}to{transform:none}}
.sk-sheet-scrim.is-closing .sk-sheet{animation:sk-sheet-up .26s var(--ease-in) reverse both}

.sk-sheet-head{
  flex:0 0 auto;display:flex;align-items:flex-start;gap:var(--gap);
  padding:var(--pad) var(--pad) calc(var(--pad) * .7);
  border-bottom:1px solid var(--line);
}
.sk-sheet-heading{flex:1;min-width:0}
.sk-sheet-title{margin:0;font-size:var(--t-xl);font-weight:800;letter-spacing:-.028em;
  line-height:1.06;text-wrap:balance}
.sk-sheet-desc{margin:.45rem 0 0;font-size:var(--t-sm);color:var(--ink-3);line-height:1.35}
.sk-sheet-close{
  width:64px;height:64px;flex:0 0 auto;border-radius:50%;
  background:var(--bg-3);display:grid;place-items:center;color:var(--ink-2);
}
.sk-sheet-close svg{width:26px;height:26px;stroke-width:2.6}

.sk-sheet-body{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--pad);display:flex;flex-direction:column;gap:clamp(1.4rem,3vh,2.4rem);
}
.sk-sheet-body::-webkit-scrollbar{width:10px}
.sk-sheet-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}

.sk-group{display:flex;flex-direction:column;gap:.9rem}
.sk-group-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.sk-group-label{font-size:var(--t-lg);font-weight:750;letter-spacing:-.02em}
.sk-pill{
  font-size:var(--t-xs);font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  padding:.32em .8em;border-radius:99px;
}
.sk-pill--req{background:color-mix(in srgb,var(--accent) 22%, transparent);
  color:var(--accent-2);border:1px solid color-mix(in srgb,var(--accent) 42%, transparent)}
.sk-pill--opt{background:var(--bg-3);color:var(--ink-3)}
.sk-group.is-missing .sk-group-label{color:var(--accent-2)}
.sk-group.is-missing{animation:sk-shake .4s var(--ease)}
@keyframes sk-shake{0%,100%{transform:none}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}

/* Size selector — big, visual, unmistakable. */
.sk-sizes{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}
.sk-size{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:clamp(1.1rem,2.4vh,1.9rem) 1rem;border-radius:var(--r-md);
  background:var(--bg-2);border:2px solid var(--line);
  transition:transform .16s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.sk-size:active{transform:scale(.96)}
.sk-size.is-sel{border-color:var(--accent);background:var(--bg-3)}
.sk-size-disc{
  width:clamp(46px,7vw,74px);aspect-ratio:1;border-radius:50%;
  border:3px solid var(--line-2);
  background:radial-gradient(circle at 38% 32%, color-mix(in srgb,var(--accent-2) 55%, transparent), transparent 62%);
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.sk-size.is-sel .sk-size-disc{border-color:var(--accent);transform:scale(1.07)}
.sk-size--sm .sk-size-disc{width:clamp(36px,5vw,54px)}
.sk-size--lg .sk-size-disc{width:clamp(56px,9vw,92px)}
.sk-size-name{font-size:var(--t-sm);font-weight:750;letter-spacing:-.01em;text-align:center}
.sk-size-price{font-size:var(--t-sm);font-weight:800;color:var(--ink-2)}
.sk-size.is-sel .sk-size-price{color:var(--accent-2)}

/* Whole / First half / Second half — the pizza split control. */
.sk-halves{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  padding:.5rem;background:var(--bg-2);border-radius:var(--r-md);border:1px solid var(--line)}
.sk-half{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  padding:clamp(.9rem,2vh,1.5rem) .5rem;border-radius:var(--r-sm);
  transition:background .18s var(--ease), transform .16s var(--ease);
}
.sk-half:active{transform:scale(.96)}
.sk-half.is-sel{background:var(--bg-3);box-shadow:inset 0 0 0 2px var(--accent)}
.sk-half-viz{width:clamp(42px,6.5vw,64px);aspect-ratio:1;border-radius:50%;
  border:3px solid var(--line-2);position:relative;overflow:hidden}
.sk-half.is-sel .sk-half-viz{border-color:var(--accent)}
.sk-half-viz i{position:absolute;inset:0;background:linear-gradient(var(--accent),var(--accent-2));opacity:.9}
.sk-half-viz--full i{inset:0}
.sk-half-viz--first i{right:50%}
.sk-half-viz--second i{left:50%}
.sk-half-name{font-size:var(--t-xs);font-weight:750;text-align:center;line-height:1.2}
.sk-half-n{font-size:var(--t-xs);color:var(--ink-3);font-weight:650}
.sk-half.is-sel .sk-half-n{color:var(--accent-2)}

/* Topping / option chips */
.sk-chips{display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr))}
.sk-chip{
  position:relative;display:flex;align-items:center;gap:.7rem;
  min-height:76px;padding:.8rem 1rem;border-radius:var(--r-md);text-align:left;
  background:var(--bg-2);border:2px solid var(--line);
  transition:transform .14s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.sk-chip:active{transform:scale(.965)}
.sk-chip.is-sel{border-color:var(--accent);background:var(--bg-3)}
.sk-chip-box{
  width:32px;height:32px;flex:0 0 auto;border-radius:10px;
  border:2.5px solid var(--line-2);display:grid;place-items:center;color:#fff;
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.sk-chip--radio .sk-chip-box{border-radius:50%}
.sk-chip.is-sel .sk-chip-box{background:var(--accent);border-color:var(--accent)}
.sk-chip-box svg{width:18px;height:18px;stroke-width:3.4;opacity:0;transition:opacity .14s}
.sk-chip.is-sel .sk-chip-box svg{opacity:1}
.sk-chip-text{flex:1;min-width:0}
/* Both are spans; without block they run together as "Sausage+$2.00". */
.sk-chip-name{display:block;font-size:var(--t-sm);font-weight:650;line-height:1.2}
.sk-chip-cost{display:block;font-size:var(--t-xs);font-weight:750;color:var(--accent-2);margin-top:.2em}

.sk-sheet-foot{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--gap);
  padding:calc(var(--pad) * .8) var(--pad);
  padding-bottom:max(calc(var(--pad) * .8), env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--bg-2);
}
.sk-qty{display:flex;align-items:center;gap:.3rem;flex:0 0 auto;
  background:var(--bg-3);border-radius:var(--r-lg);padding:.35rem}
.sk-qty-btn{width:66px;height:66px;border-radius:50%;background:var(--bg-1);
  font-size:1.9rem;font-weight:600;display:grid;place-items:center;line-height:1}
.sk-qty-btn:active{transform:scale(.92)}
.sk-qty-btn:disabled{opacity:.35}
.sk-qty-val{min-width:2.2ch;text-align:center;font-size:var(--t-lg);font-weight:800}
.sk-sheet-add{flex:1}
.sk-sheet-add-price{
  margin-left:auto;padding-left:1rem;font-variant-numeric:tabular-nums;
  border-left:1px solid rgba(255,255,255,.28);
}

/* ══ CART ════════════════════════════════════════════════════════════════ */
.sk-cartlist{display:flex;flex-direction:column;gap:var(--gap);margin-top:var(--gap)}
.sk-line{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--gap);align-items:center;
  padding:clamp(.9rem,1.8vw,1.4rem);border-radius:var(--r-lg);
  background:var(--bg-2);border:1px solid var(--line);
  animation:sk-card-in .3s var(--ease) both;
}
.sk-line.is-leaving{animation:sk-line-out .3s var(--ease-in) forwards}
@keyframes sk-line-out{to{opacity:0;transform:translateX(-40px) scale(.95);
  max-height:0;padding-block:0;margin-bottom:calc(var(--gap) * -1)}}
.sk-line-thumb{width:clamp(76px,10vw,116px);aspect-ratio:1;border-radius:var(--r-md);
  object-fit:cover;background:var(--bg-3)}
.sk-line-thumb--none{display:grid;place-items:center;font-size:1.7rem;font-weight:800;
  color:var(--ink-3);background:linear-gradient(140deg,var(--bg-3),var(--bg-2))}
.sk-line-body{min-width:0}
.sk-line-name{font-size:var(--t-md);font-weight:750;letter-spacing:-.015em}
.sk-line-meta{margin-top:.3rem;font-size:var(--t-xs);color:var(--ink-3);line-height:1.4}
.sk-line-meta b{color:var(--ink-2);font-weight:650}
.sk-line-actions{display:flex;align-items:center;gap:.5rem;margin-top:.65rem;flex-wrap:wrap}
.sk-line-link{font-size:var(--t-xs);font-weight:750;color:var(--ink-2);
  padding:.5em .85em;border-radius:10px;background:var(--bg-3);min-height:48px;
  display:inline-flex;align-items:center}
.sk-line-link--danger{color:var(--bad)}
.sk-line-right{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.sk-line-price{font-size:var(--t-md);font-weight:800;font-variant-numeric:tabular-nums}
.sk-line-qty{display:flex;align-items:center;gap:.2rem;background:var(--bg-3);
  border-radius:99px;padding:.25rem}
.sk-line-qty button{width:52px;height:52px;border-radius:50%;background:var(--bg-1);
  font-size:1.5rem;display:grid;place-items:center;line-height:1}
.sk-line-qty span{min-width:2ch;text-align:center;font-weight:800}

.sk-empty{text-align:center;padding:clamp(3rem,10vh,7rem) 1rem;color:var(--ink-3)}
.sk-empty-icon{font-size:clamp(3rem,8vw,5rem);opacity:.4}
.sk-empty p{font-size:var(--t-lg);font-weight:700;color:var(--ink-2);margin:.8rem 0 .3rem}

.sk-upsell{margin-top:clamp(2rem,4vh,3.2rem)}
.sk-upsell-title{margin:0 0 var(--gap);font-size:var(--t-lg);font-weight:750;letter-spacing:-.02em}
.sk-upsell-row{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}
.sk-up{
  display:flex;flex-direction:column;border-radius:var(--r-md);overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);text-align:left;
}
.sk-up:active{transform:scale(.97)}
.sk-up-media{aspect-ratio:16/10;background:var(--bg-3);position:relative}
.sk-up-media img{width:100%;height:100%;object-fit:cover}
.sk-up-body{padding:.85rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.sk-up-name{font-size:var(--t-sm);font-weight:700;line-height:1.2}
.sk-up-price{font-size:var(--t-sm);font-weight:800;color:var(--accent-2);white-space:nowrap}

/* ── Totals + order bar ──────────────────────────────────────────────────── */
.sk-totals{margin-top:clamp(1.6rem,3vh,2.4rem);padding:var(--pad);
  border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line)}
.sk-total-row{display:flex;justify-content:space-between;gap:1rem;
  font-size:var(--t-sm);color:var(--ink-2);padding:.45rem 0}
.sk-total-row--grand{font-size:var(--t-lg);font-weight:800;color:var(--ink);
  border-top:1px solid var(--line);margin-top:.6rem;padding-top:1rem}
.sk-total-row span:last-child{font-variant-numeric:tabular-nums}

.sk-orderbar{
  position:absolute;left:0;right:0;bottom:0;z-index:30;
  display:flex;align-items:center;gap:var(--gap);
  padding:calc(var(--pad) * .75) var(--pad);
  padding-bottom:max(calc(var(--pad) * .75), env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg-1) 94%, transparent);
  border-top:1px solid var(--line-2);backdrop-filter:blur(20px);
  animation:sk-bar-up .4s var(--ease) both;
}
@keyframes sk-bar-up{from{transform:translateY(100%)}to{transform:none}}
.sk-orderbar-info{display:flex;flex-direction:column;gap:.15rem;flex:0 0 auto}
.sk-orderbar-count{font-size:var(--t-xs);color:var(--ink-3);font-weight:650;
  text-transform:uppercase;letter-spacing:.06em}
.sk-orderbar-total{font-size:var(--t-xl);font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.sk-orderbar-cta{flex:1}

/* ══ TIP ═════════════════════════════════════════════════════════════════ */
.sk-screen--tip{display:flex;flex-direction:column;justify-content:center;text-align:center}
.sk-tipgrid{display:grid;gap:var(--gap);margin-top:clamp(2rem,5vh,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(180px,45%),1fr))}
.sk-tip{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:clamp(1.6rem,4vh,2.8rem) 1rem;border-radius:var(--r-lg);
  background:var(--bg-2);border:2px solid var(--line);
}
.sk-tip:active{transform:scale(.96)}
.sk-tip.is-sel{border-color:var(--accent);background:var(--bg-3)}
.sk-tip-pct{font-size:var(--t-2xl);font-weight:800;letter-spacing:-.04em;line-height:1}
.sk-tip-amt{font-size:var(--t-sm);color:var(--ink-3);font-weight:650}
.sk-tip-none{margin:clamp(1.6rem,3.5vh,2.6rem) auto 0;min-height:72px;padding:0 2.5rem;
  border-radius:var(--r-lg);background:var(--bg-3);color:var(--ink-2);
  font-size:var(--t-md);font-weight:700}

/* ══ PAYMENT ═════════════════════════════════════════════════════════════ */
.sk-screen--pay{display:grid;place-items:center;text-align:center}
.sk-pay-inner{display:flex;flex-direction:column;align-items:center;
  gap:clamp(.7rem,2vh,1.5rem);max-width:44rem}
.sk-pay-label{margin:0;font-size:var(--t-md);color:var(--ink-3);font-weight:650;
  text-transform:uppercase;letter-spacing:.1em}
.sk-pay-total{margin:0;font-size:var(--t-3xl);font-weight:800;letter-spacing:-.045em;
  line-height:1;font-variant-numeric:tabular-nums}
.sk-pay-msg{margin:0;font-size:var(--t-lg);font-weight:650;color:var(--ink-2);
  min-height:2.6em;max-width:22ch;text-wrap:balance}
.sk-pay-actions{display:flex;gap:var(--gap);flex-wrap:wrap;justify-content:center;
  margin-top:clamp(.6rem,2vh,1.4rem)}

/* Terminal illustration — its state class is what animates. */
.sk-terminal{width:clamp(200px,32vw,320px);margin:clamp(.5rem,2vh,1.5rem) 0}
.sk-terminal-svg{overflow:visible}
/* The reader is the instruction on this screen, so it has to read clearly across a
   dim dining room — panel tokens alone leave it almost invisible on the dark ground. */
.sk-t-body{fill:#39404F;stroke:#697487;stroke-width:3}
.sk-t-screen{fill:#151A24;stroke:#697487;stroke-width:1.5}
.sk-t-key{fill:#5A6474;stroke:none}
.sk-t-card{opacity:0;transform-origin:100px 25px}
.sk-t-card rect{fill:var(--accent);stroke:none}
.sk-t-chip{fill:rgba(255,255,255,.75)!important}
.sk-t-tick,.sk-t-cross{opacity:0}
.sk-t-tick path{stroke:var(--good);stroke-width:7;stroke-dasharray:70;stroke-dashoffset:70}
.sk-t-cross path{stroke:var(--bad);stroke-width:7}

/* waiting: the card drifts toward the reader, over and over */
.sk-terminal[data-state="waiting_for_card"] .sk-t-card{
  opacity:1;animation:sk-card-in-slot 2.4s var(--ease) infinite}
@keyframes sk-card-in-slot{
  0%{transform:translateY(-34px);opacity:0}
  25%{opacity:1}
  60%{transform:translateY(4px);opacity:1}
  85%,100%{transform:translateY(4px);opacity:0}
}
.sk-terminal[data-state="waiting_for_card"] .sk-t-screen{
  animation:sk-screen-glow 1.7s ease-in-out infinite}
@keyframes sk-screen-glow{0%,100%{fill:var(--bg-1)}50%{fill:color-mix(in srgb,var(--accent) 34%, var(--bg-1))}}

.sk-terminal[data-state="processing"] .sk-t-card{opacity:1;transform:translateY(4px)}
.sk-terminal[data-state="processing"] .sk-t-screen{
  animation:sk-screen-scan 1s linear infinite}
@keyframes sk-screen-scan{0%,100%{fill:var(--bg-1)}50%{fill:color-mix(in srgb,var(--accent-2) 45%, var(--bg-1))}}

.sk-terminal[data-state="approved"] .sk-t-screen{fill:color-mix(in srgb,var(--good) 20%, var(--bg-1))}
.sk-terminal[data-state="approved"] .sk-t-tick{opacity:1}
.sk-terminal[data-state="approved"] .sk-t-tick path{animation:sk-draw .5s var(--ease) forwards}
@keyframes sk-draw{to{stroke-dashoffset:0}}

.sk-terminal[data-state="declined"] .sk-t-screen,
.sk-terminal[data-state="timeout"] .sk-t-screen,
.sk-terminal[data-state="error"] .sk-t-screen,
.sk-terminal[data-state="device_unavailable"] .sk-t-screen{
  fill:color-mix(in srgb,var(--bad) 20%, var(--bg-1))}
.sk-terminal[data-state="declined"] .sk-t-cross,
.sk-terminal[data-state="timeout"] .sk-t-cross,
.sk-terminal[data-state="error"] .sk-t-cross,
.sk-terminal[data-state="device_unavailable"] .sk-t-cross{opacity:1;animation:sk-shake .4s var(--ease)}

/* ══ CONFIRMATION ════════════════════════════════════════════════════════ */
.sk-screen--done{display:grid;place-items:center;text-align:center}
.sk-done-inner{display:flex;flex-direction:column;align-items:center;
  gap:clamp(.6rem,1.8vh,1.3rem);max-width:40rem}
.sk-done-mark{width:clamp(110px,17vw,180px);color:var(--good)}
.sk-done-circle{fill:none;stroke:var(--good);stroke-width:2.5;
  stroke-dasharray:151;stroke-dashoffset:151;animation:sk-draw .6s var(--ease) .1s forwards}
.sk-done-check{fill:none;stroke:var(--good);stroke-width:4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;
  animation:sk-draw .4s var(--ease) .55s forwards}
.sk-done-title{margin:.5rem 0 0;font-size:var(--t-2xl);font-weight:800;letter-spacing:-.035em}
.sk-done-sub{margin:0;font-size:var(--t-lg);color:var(--ink-2);text-wrap:balance}
.sk-done-number{margin-top:clamp(1rem,3vh,2rem);padding:clamp(1.1rem,2.6vh,2rem) clamp(2rem,5vw,3.5rem);
  border-radius:var(--r-lg);background:var(--bg-2);border:2px dashed var(--line-2);
  display:flex;flex-direction:column;gap:.35rem}
.sk-done-number-label{font-size:var(--t-xs);color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.12em;font-weight:700}
.sk-done-number-val{font-size:var(--t-2xl);font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--accent-2)}
.sk-done-note{margin:.6rem 0 0;font-size:var(--t-md);color:var(--ink-2);text-wrap:balance}
.sk-done-btn{margin-top:clamp(1rem,3vh,2rem);min-width:16rem}
.sk-done-reset{margin:.9rem 0 0;font-size:var(--t-xs);color:var(--ink-3)}

/* ══ OVERLAYS ════════════════════════════════════════════════════════════ */
.sk-idle,.sk-blocker{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--pad);
  background:rgba(4,6,10,.82);backdrop-filter:blur(14px);
  animation:sk-fade .26s var(--ease) both;
}
.sk-idle-card,.sk-blocker-card{
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:clamp(2rem,5vh,3.5rem);text-align:center;max-width:38rem;width:100%;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:sk-pop .38s var(--ease) both;
}
@keyframes sk-pop{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:none}}
.sk-idle-title,.sk-blocker-card h2{margin:0;font-size:var(--t-xl);font-weight:800;letter-spacing:-.028em}
.sk-idle-sub,.sk-blocker-card p{margin:.8rem 0 0;font-size:var(--t-md);color:var(--ink-2)}
.sk-idle-sub span{font-weight:800;color:var(--accent-2);font-variant-numeric:tabular-nums}
.sk-idle-actions{display:flex;flex-direction:column;gap:.85rem;margin-top:clamp(1.6rem,4vh,2.6rem)}

.sk-toast{
  position:fixed;left:50%;bottom:calc(190px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:95;
  padding:1rem 1.75rem;border-radius:99px;
  background:var(--ink);color:var(--bg);font-size:var(--t-sm);font-weight:750;
  box-shadow:0 16px 44px rgba(0,0,0,.45);
  animation:sk-toast-in .34s var(--ease) both;max-width:min(90vw,34rem);text-align:center;
}
@keyframes sk-toast-in{from{opacity:0;transform:translate(-50%,22px)}to{opacity:1;transform:translate(-50%,0)}}
.sk-toast.is-leaving{animation:sk-toast-in .28s var(--ease-in) reverse both}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */

/* Landscape / wide: give the category rail more room, widen the item grid. */
@media (min-aspect-ratio:1/1) and (min-width:1100px){
  .sk-screen--menu{grid-template-columns:clamp(260px,19vw,360px) 1fr}
  .sk-itemgrid{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
  .sk-sheet{max-height:88dvh;border-radius:var(--r-xl);align-self:center}
  .sk-sheet-scrim{align-items:center}
  .sk-attract-inner{max-width:60rem}
}

/* Tall portrait kiosk (1080×1920 and similar): the canonical target. */
@media (max-aspect-ratio:3/4){
  .sk-screen--menu{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .sk-catrail{
    flex-direction:row;overflow-x:auto;overflow-y:hidden;
    border-right:0;border-bottom:1px solid var(--line);
    padding:calc(var(--pad) * .7) var(--pad);
    scroll-snap-type:x proximity;
  }
  .sk-cat{flex:0 0 auto;flex-direction:column;width:clamp(124px,26vw,168px);
    min-height:auto;padding:.85rem;text-align:center;scroll-snap-align:start}
  .sk-cat.is-active::before{left:14%;right:14%;top:auto;bottom:0;width:auto;height:5px;
    border-radius:4px 4px 0 0}
  .sk-cat-thumb,.sk-cat-fallback{width:100%;height:auto;aspect-ratio:1}
  .sk-itemgrid{grid-template-columns:repeat(auto-fill,minmax(min(280px,47%),1fr))}
}

/* Small panels — keep everything reachable, drop to one column. */
@media (max-width:560px){
  .sk-itemgrid{grid-template-columns:1fr}
  .sk-line{grid-template-columns:auto 1fr;row-gap:.8rem}
  .sk-line-right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .sk-halves{grid-template-columns:1fr}
  .sk-half{flex-direction:row;justify-content:flex-start;gap:1rem;padding-inline:1rem}
  .sk-sheet-foot{flex-wrap:wrap}
  .sk-sheet-add{width:100%}
}

/* ══ ACCESSIBILITY ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .sk-attract-video{animation:none}
}
/* Explicit in-app toggle, for customers whose device preference is not set. */
body.sk-calm *,body.sk-calm *::before,body.sk-calm *::after{
  animation-duration:.01ms !important;animation-iteration-count:1 !important;
  transition-duration:.08s !important;
}
body.sk-calm .sk-attract-video,body.sk-calm .sk-attract-img{animation:none}

@media (prefers-contrast:more){
  :root{--line:rgba(255,255,255,.3);--line-2:rgba(255,255,255,.5);--ink-3:#A8B0BE}
  .sk-item,.sk-chip,.sk-size,.sk-fulfil{border-width:2.5px}
}
body.sk-contrast{--line:rgba(255,255,255,.34);--line-2:rgba(255,255,255,.58);
  --ink-2:#E4E8EF;--ink-3:#B9C0CC;--bg-2:#151924;--bg-3:#222836}
body.sk-contrast .sk-item,body.sk-contrast .sk-chip,
body.sk-contrast .sk-size,body.sk-contrast .sk-fulfil{border-width:2.5px}

@media print{.sk-body{display:none}}