/* Ordara customer site, redesign (approved hifi 4 Nov 2026). One file, no build step.
   Tokens: --rest = restaurant brand colour (set in guest layout from the Theme setting).
   All classes are prefixed cs- so nothing clashes with Tailwind. Dark mode = html.dark. */
:root{
  --accent:#FFD43B;
  --bg:#F6F5F0; --surface:#FFFFFF; --surface2:#EEEDE5; --line:#E2E0D6; --line-strong:#838B85;
  --ink:#14201A; --ink2:#38443D; --muted:#58645D;
  --brand:var(--rest); --brand-ink:color-mix(in oklab,var(--rest) var(--cs-ink-mix,100%),black);
  --brand-hover:color-mix(in oklab,var(--rest) 82%,black); --on-brand:var(--cs-on,#fff);
  --brand-soft:color-mix(in oklab,var(--rest) 12%,var(--surface)); --brand-line:color-mix(in oklab,var(--rest) 32%,var(--surface));
  --ok:#14633F; --ok-soft:#E1F3E8; --warn:#7A4F00; --warn-soft:#FFF1CC; --bad:#A3201A; --bad-soft:#FBE9E7;
  --veg:#1B8A3F; --nonveg:#B3261E; --focus:color-mix(in oklab,var(--rest) 55%,transparent);
  --shadow:0 10px 30px rgba(14,40,28,.14),0 1px 3px rgba(14,40,28,.08);
  --ease:cubic-bezier(.23,1,.32,1);
  --f-head:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --f-body:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html.dark{
  --bg:#0C130F; --surface:#141D18; --surface2:#1B2721; --line:#25322A; --line-strong:#6F8277;
  --ink:#EAF2ED; --ink2:#C6D4CB; --muted:#9BAEA2;
  --brand:color-mix(in oklab,var(--rest) 40%,white); --brand-ink:var(--brand); --brand-hover:color-mix(in oklab,var(--rest) 28%,white); --on-brand:#0B1410;
  --brand-soft:color-mix(in oklab,var(--rest) 22%,var(--surface)); --brand-line:color-mix(in oklab,var(--rest) 45%,var(--surface));
  --ok:#7FE0AE; --ok-soft:#10281C; --warn:#F3C969; --warn-soft:#2E2410; --bad:#FFB4AB; --bad-soft:#34130F;
  --veg:#5FD39B; --nonveg:#FF8A80; --focus:color-mix(in oklab,var(--rest) 40%,white); --shadow:0 10px 30px rgba(0,0,0,.5);
}

/* ===== page shell ===== */
body.cs{font-family:var(--f-body);background:var(--bg)!important;color:var(--ink);-webkit-font-smoothing:antialiased}
body.cs .cs-shell{width:100%;min-width:0;max-width:1280px;margin:0 auto;overflow-x:clip}
body.cs #main-content{background:transparent!important}
body.cs .cs-page{margin-top:0!important;padding-top:8px;background:transparent!important}
body.cs footer.cs-foot{background:var(--surface)!important;border-color:var(--line)!important;color:var(--muted)}
body.cs :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
.cs-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cs-num{font-variant-numeric:tabular-nums}
.cs-trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-sp{flex:1;min-width:0}
.cs-row{display:flex;align-items:center;gap:12px}

/* ===== shared components ===== */
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;font-weight:700;font-size:16px;border:1.5px solid transparent;transition:transform 60ms,background-color 120ms var(--ease),border-color 120ms;text-decoration:none;white-space:nowrap;cursor:pointer;line-height:1.2}
.cs-btn:active{transform:scale(.97)}
.cs-btn-primary{background:var(--brand);color:var(--on-brand)}.cs-btn-primary:hover{background:var(--brand-hover)}
.cs-btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}.cs-btn-ghost:hover{background:var(--surface2)}
.cs-btn-danger{border-color:var(--bad);color:var(--bad);background:transparent}
.cs-btn-block{width:100%}.cs-btn-sm{min-height:44px;padding:0 16px;font-size:15px}
.cs-btn[disabled],.cs-btn.cs-dis{opacity:.45;pointer-events:none}
.cs-ibtn{width:44px;height:44px;border-radius:12px;display:inline-grid;place-items:center;color:var(--ink2);position:relative;transition:background-color 120ms;background:transparent;border:0;cursor:pointer;flex:none}
.cs-ibtn:hover{background:var(--surface2)}.cs-ibtn:active{transform:scale(.95)}
.cs-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;font-size:15px;color:var(--ink2);white-space:nowrap;transition:background-color 120ms,border-color 120ms,color 120ms;cursor:pointer}
.cs-chip.cs-on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.cs-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700}
.cs-pill.ok{background:var(--ok-soft);color:var(--ok)}.cs-pill.warn{background:var(--warn-soft);color:var(--warn)}.cs-pill.bad{background:var(--bad-soft);color:var(--bad)}.cs-pill.n{background:var(--surface2);color:var(--ink2)}
.cs-card{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.cs-field{display:flex;flex-direction:column;gap:6px}
.cs-lbl{font-weight:700;font-size:14px;color:var(--ink2)}
.cs-in{min-height:48px;width:100%;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);padding:0 14px;font-size:16px;color:var(--ink)}
.cs-in::placeholder{color:var(--muted)}
.cs-in:focus{outline:3px solid var(--focus);outline-offset:0;border-color:var(--brand)}
.cs-hint{font-size:13.5px;color:var(--muted);line-height:1.4}
.cs-err{font-size:13.5px;color:var(--bad);font-weight:600;display:flex;gap:6px;align-items:flex-start}
.cs-stp{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:12px;overflow:hidden;background:var(--surface)}
.cs-stp button{width:44px;height:42px;display:grid;place-items:center;color:var(--brand-ink);background:transparent;border:0;cursor:pointer}
.cs-stp button:hover{background:var(--brand-soft)}
.cs-stp b{min-width:32px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.cs-seg3{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface2);border-radius:14px;padding:4px;gap:4px}
.cs-seg3>button,.cs-seg3>a{min-height:44px;border-radius:11px;font-weight:700;font-size:14.5px;color:var(--ink2);display:flex;align-items:center;justify-content:center;gap:6px;transition:background-color 120ms,color 120ms;background:transparent;border:0;cursor:pointer;padding:0 6px}
.cs-seg3>.cs-on{background:var(--surface);color:var(--brand-ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
html.dark .cs-seg3>.cs-on{box-shadow:0 0 0 1px var(--brand-line)}
.cs-sw{position:relative;width:52px;height:32px;border-radius:999px;background:var(--line-strong);transition:background-color 120ms;flex:none;display:inline-block}
.cs-sw::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform 200ms var(--ease)}
.cs-sw.cs-on{background:var(--brand)}.cs-sw.cs-on::after{transform:translateX(20px)}
.cs-vegdot{width:16px;height:16px;border:1.5px solid var(--veg);border-radius:3px;display:inline-grid;place-items:center;flex:none}
.cs-vegdot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--veg)}
.cs-vegdot.nv{border-color:var(--nonveg)}.cs-vegdot.nv::after{background:var(--nonveg)}
.cs-alert{display:flex;gap:12px;padding:14px;border-radius:14px;font-size:14.5px;line-height:1.45;align-items:flex-start}
.cs-alert.warn{background:var(--warn-soft);color:var(--warn)}.cs-alert.bad{background:var(--bad-soft);color:var(--bad)}.cs-alert.ok{background:var(--ok-soft);color:var(--ok)}.cs-alert.info{background:var(--brand-soft);color:var(--brand-ink)}
.cs-alert b{display:block;font-size:15.5px;margin-bottom:2px}
.cs-alert .cs-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cs-sk{background:linear-gradient(90deg,var(--surface2),var(--line),var(--surface2));background-size:200% 100%;animation:cs-sk 1.4s linear infinite;border-radius:10px}
@keyframes cs-sk{to{background-position:-200% 0}}
.cs-sep{height:1px;background:var(--line)}
.cs-h1{font:800 26px/1.15 var(--f-head);letter-spacing:-.01em}.cs-h2{font:700 20px/1.2 var(--f-head)}.cs-h3{font:700 17px/1.25 var(--f-head)}
.cs-cap{font-size:13px;color:var(--muted)}
.cs-lnk{color:var(--brand-ink);font-weight:700;font-size:14px;min-height:44px;display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;cursor:pointer;text-decoration:none}

/* sheets / dialogs (bottom sheet on phone, centred dialog from 700px) */
.cs-scrim{position:fixed;inset:0;background:rgba(6,14,10,.55);z-index:80}
.cs-sheet{position:fixed;left:0;right:0;bottom:0;z-index:90;max-height:92%;background:var(--surface);color:var(--ink);border-radius:24px 24px 0 0;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.cs-sheet .cs-grab{width:40px;height:5px;border-radius:3px;background:var(--line-strong);margin:8px auto 0;opacity:.6;flex:none}
.cs-sheet .cs-hd{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 20px;flex:none}
.cs-sheet .cs-hd .cs-h2{flex:1}
.cs-sheet .cs-bd{overflow:auto;padding:4px 20px 20px;display:flex;flex-direction:column;gap:16px}
.cs-sheet .cs-bd>*{flex:none}
.cs-sheet .cs-fx{padding:12px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex:none;display:flex;gap:10px;background:var(--surface)}
.cs-enter{animation:cs-up 280ms var(--ease) both}
@keyframes cs-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:700px){
  .cs-sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(520px,92%);max-height:88%;border-radius:24px;transform:translate(-50%,-50%)}
  .cs-sheet .cs-grab{display:none}
  .cs-enter{animation:cs-pop 240ms var(--ease) both}
  @keyframes cs-pop{from{opacity:0;transform:translate(-50%,-47%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%)}}
}
.cs-rowl{display:flex;align-items:center;gap:12px;padding:0 4px;min-height:56px;border-top:1px solid var(--line);width:100%;text-align:left;font-weight:600;color:var(--ink);text-decoration:none;background:transparent;border-left:0;border-right:0;border-bottom:0;cursor:pointer}
.cs-rowl:first-child{border-top:0}.cs-rowl svg{color:var(--brand-ink)}.cs-rowl .cs-c{margin-left:auto;color:var(--muted)}
.cs-rowl.out,.cs-rowl.out svg{color:var(--bad)}

/* ===== header bar ===== */
.cs-bar{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--surface) 94%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.cs-bar-in{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 16px;min-height:60px;max-width:1280px;margin:auto}
.cs-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;overflow:hidden;background:var(--surface2)}
.cs-logo img{width:100%;height:100%;object-fit:contain}
.cs-rname{font:700 17px/1.1 var(--f-head);color:var(--ink)}
.cs-home{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:inherit}
.cs-bpick{white-space:nowrap;display:inline-flex;align-items:center;gap:4px;font-size:13.5px;color:var(--ink2);font-weight:600;min-height:28px;background:transparent;border:0;padding:0;cursor:pointer;max-width:100%}
.cs-bpick .cs-i{width:15px;height:15px}
.cs-nav-links{display:none;gap:4px;margin:0 12px}
.cs-nav-links a{padding:10px 14px;border-radius:10px;font-weight:600;color:var(--ink2);text-decoration:none;font-size:15px}
.cs-nav-links a:hover{background:var(--surface2)}.cs-nav-links a.cs-on{color:var(--brand-ink)}
.cs-bell-m{display:none}
.cs-nav-m{display:inline-grid}
body:has(#cs-waiter-host) .cs-bell-m{display:inline-grid}
.cs-hdr-cart{display:none}
.cs-badge{position:absolute;top:2px;right:2px;min-width:20px;height:20px;border-radius:10px;background:var(--brand);color:var(--on-brand);font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px}
.cs-drop{position:absolute;z-index:60;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-width:220px;padding:6px}
.cs-drop a,.cs-drop button.cs-di{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:10px;font-weight:600;color:var(--ink);text-decoration:none;font-size:15px;width:100%;text-align:left;background:transparent;border:0;cursor:pointer}
.cs-drop a:hover,.cs-drop button.cs-di:hover{background:var(--surface2)}
.cs-avatar{width:48px;height:48px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;font:800 17px var(--f-head);flex:none}
/* call waiter bell (host on phone is hidden, the header bell proxies the click) */
#cs-waiter-host{height:0;overflow:visible}
#cs-waiter-host [data-cs-waiter-trigger]{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;overflow:hidden;pointer-events:none}
.cs-login-float{display:none!important}
@media (min-width:700px){.cs-bar-in{padding:10px 24px;min-height:68px}}
@media (min-width:1024px){.cs-nav-links{display:flex}.cs-bell-m{display:none!important}.cs-nav-m{display:none!important}}
body.cs:has(.cs-railwrap) .cs-hdr-cart{display:none!important}
@media (min-width:1024px){body.cs:not(:has(.cs-railwrap)) .cs-hdr-cart{display:inline-grid}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.cs-waiter-btn{padding:0 14px}
.cs-bar .cs-waiter-btn{width:44px;min-height:44px;height:44px;padding:0;border:0;border-radius:12px;color:var(--ink2)}
.cs-bar .cs-waiter-btn:hover{background:var(--surface2)}
.cs-bar .cs-waiter-lbl,#cs-waiter-host .cs-waiter-lbl{display:none}
.cs-sp>div{min-width:0}

.cs-bell-d{display:none}
@media (min-width:1024px){.cs-bell-d{display:inline-flex}}

/* ===== wave 2: menu page ===== */
.cs-wrap{padding:0 16px;max-width:1280px;margin:0 auto;width:100%}
@media (min-width:700px){.cs-wrap{padding:0 24px}}
:root{--hero-bg:var(--rest);--hero-ink:#fff;--hero-sub:rgba(255,255,255,.88);--hero-btn:var(--accent);--hero-btn-ink:#241D00;--hero-chip:rgba(255,255,255,.16);--hero-glow:rgba(255,255,255,.1);
 --h-disc:rgba(255,255,255,.1);--h-bowl:#FFFFFF;--h-rim:#D9E6DE;--h-food:var(--accent);--h-hl:#fff;--h-bag:#F1D9A8;--h-bagfold:#D9BC82;--h-leaf:#8FE3B1}
html.dark{--hero-bg:color-mix(in oklab,var(--rest) 30%,var(--surface));--hero-ink:var(--ink);--hero-sub:var(--ink2);--hero-btn:var(--brand);--hero-btn-ink:var(--on-brand);--hero-chip:rgba(255,255,255,.08);--hero-glow:rgba(255,255,255,.06);
 --h-disc:rgba(255,255,255,.1);--h-bowl:#E9F2EC;--h-rim:#BCD0C4;--h-bag:#D8BE86;--h-bagfold:#B79B63;--h-leaf:var(--brand)}
.cs-hero{margin-top:12px;border-radius:26px;padding:18px 18px 20px;background:var(--hero-bg);color:var(--hero-ink);display:block;position:relative;overflow:hidden;border:1px solid transparent}
html.dark .cs-hero{border-color:var(--brand-line)}
.cs-hero::before{content:"";position:absolute;right:-60px;bottom:-80px;width:240px;height:240px;border-radius:50%;background:var(--hero-glow);opacity:0}
.cs-hx{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}
.cs-hrow{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:10px}
.cs-hchip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:var(--hero-chip);font-size:13px;font-weight:700}
.cs-hdot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:cs-hpulse 2s ease-in-out infinite}
@keyframes cs-hpulse{50%{transform:scale(1.5);opacity:.55}}
.cs-hh{font:800 19px/1.2 var(--f-head);letter-spacing:-.01em;max-width:30ch;color:inherit}
.cs-hs{margin-top:8px;font-size:15px;line-height:1.45;color:var(--hero-sub);max-width:42ch}
.cs-hbtn{background:var(--hero-btn);color:var(--hero-btn-ink);min-height:46px;padding:0 20px;font-size:15px;margin-top:16px;border-radius:14px}
.cs-hbtn:hover{filter:brightness(1.06)}
.cs-hart{display:block;overflow:visible}
.cs-hart-s{width:92px;height:70px;margin:-14px -6px -10px 0}
.cs-hart-l{display:none}
.h-disc{fill:var(--h-disc)}.h-bowl{fill:var(--h-bowl)}.h-rim{fill:var(--h-rim)}.h-food{fill:var(--h-food)}
.h-hl{stroke:var(--h-hl);stroke-width:3;fill:none;stroke-linecap:round;opacity:.7}
.h-steam path{stroke:var(--hero-ink);stroke-width:3;fill:none;stroke-linecap:round;opacity:0;animation:cs-steam 2.6s ease-out infinite}
.h-steam path:nth-child(2){animation-delay:.6s}.h-steam path:nth-child(3){animation-delay:1.2s}
@keyframes cs-steam{0%{opacity:0;transform:translateY(6px)}30%{opacity:.8}100%{opacity:0;transform:translateY(-8px)}}
.h-bagb{fill:var(--h-bag)}.h-fold{stroke:var(--h-bagfold);stroke-width:4;fill:none}.h-hand{stroke:var(--h-bagfold);stroke-width:3;fill:none}
.h-bag{transform-box:fill-box;transform-origin:50% 100%;animation:cs-hbob 3.4s ease-in-out infinite}
@keyframes cs-hbob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}
.h-bits *{fill:var(--h-leaf);transform-box:fill-box;transform-origin:center;animation:cs-hfloat 4s ease-in-out infinite}
.h-bits .h-b2{fill:var(--accent);animation-delay:-1s}.h-bits .h-b3{animation-delay:-2s}.h-bits .h-b4{fill:var(--accent);animation-delay:-3s}.h-bits .h-b5{animation-delay:-1.6s}
@keyframes cs-hfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(25deg)}}
.cs-hero-img{margin-top:12px}

/* grid: hero on top, then order card, menu row, categories, list, rail */
.cs-menu-l{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"ctx" "mrow" "cats" "list";padding-bottom:96px;max-width:1280px;margin:0 auto;padding-left:16px;padding-right:16px}
.cs-menu-l .tt-shop-client-menu-root,.cs-menu-l .tt-shop-client-menu-root>div{display:contents}
.cs-ctx{grid-area:ctx;margin:12px 0 0;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:18px;position:relative;z-index:3}
.cs-ctx .cs-line{display:flex;align-items:center;gap:10px;padding:10px 10px 6px;font-size:14.5px;color:var(--ink2);min-height:44px}
.cs-ctx .cs-line b{color:var(--ink)}
.cs-ctx .cs-line svg{color:var(--brand-ink)}
.cs-ctx .cs-line a,.cs-ctx .cs-line button.cs-chg{margin-left:auto;color:var(--brand-ink);font-weight:700;font-size:14px;text-decoration:none;min-height:44px;display:flex;align-items:center;background:transparent;border:0;cursor:pointer}
.cs-facts{display:none}
.cs-mrow{grid-area:mrow;display:flex;flex-direction:column}
.cs-mrow .cs-tools{order:-1}
.cs-menus{display:flex;gap:6px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.cs-menus button{min-height:44px;padding:0 4px;margin-right:12px;font:700 17px var(--f-head);color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;background:transparent;border-top:0;border-left:0;border-right:0;cursor:pointer}
.cs-menus button.cs-on{color:var(--ink);border-bottom-color:var(--accent)}
.cs-tools{display:flex;gap:10px;align-items:center;margin-top:12px}
.cs-search{position:relative;flex:1}
.cs-search svg{position:absolute;left:14px;top:14px;color:var(--muted)}
.cs-search .cs-in{padding-left:44px}
.cs-vegsw{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 4px 0 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);font-weight:600;font-size:14.5px;cursor:pointer;color:var(--ink)}
.cs-vegsw input{position:absolute;opacity:0;width:1px;height:1px}
.cs-vegsw input:focus-visible+.cs-sw{outline:3px solid var(--focus);outline-offset:2px}
.cs-cats{grid-area:cats;position:sticky;top:60px;z-index:20;background:var(--bg);padding:10px 0;margin-top:6px}
.cs-cats-scr{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 16px;margin:0 -16px}
.cs-catrail{display:none}
.cs-list{grid-area:list;min-width:0}
.cs-sec{margin-top:18px}
.cs-sec>.cs-h2{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.cs-sec>.cs-h2 small{font:500 14px var(--f-body);color:var(--muted)}
.cs-grid{display:grid;gap:12px}
.cs-item{display:grid;grid-template-columns:116px 1fr;gap:14px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;position:relative;transition:border-color 120ms,box-shadow 200ms var(--ease);cursor:pointer}
.cs-item:hover{border-color:var(--brand-line)}
.cs-item.cs-out{opacity:.6}
.cs-ph{height:116px;border-radius:14px;overflow:hidden;background:var(--surface2)}
.cs-ph img{width:100%;height:100%;object-fit:cover}
.cs-item.cs-noimg{grid-template-columns:1fr}
.cs-tx{display:flex;flex-direction:column;min-width:0}
.cs-nm{display:flex;gap:8px;align-items:center;font:700 16.5px/1.25 var(--f-head);color:var(--ink)}
.cs-nm img{height:16px;width:16px}
.cs-ds{font-size:14px;color:var(--muted);line-height:1.4;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-meta{font-size:12.5px;color:var(--muted);margin-top:4px}
.cs-ft{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:auto;padding-top:8px;gap:8px}
.cs-ft>*{min-width:0}
.cs-ft>div:last-child{margin-left:auto}
.cs-price{font:700 17px var(--f-head);font-variant-numeric:tabular-nums;color:var(--ink)}
.cs-add{min-height:44px;padding:0 20px;border-radius:12px;border:1.5px solid var(--brand-ink);color:var(--brand-ink);font-weight:800;font-size:15px;background:var(--surface);transition:background-color 120ms,transform 60ms;cursor:pointer}
.cs-add:hover{background:var(--brand-soft)}.cs-add:active{transform:scale(.96)}
.cs-add{white-space:nowrap;max-width:100%}
@media(max-width:430px){.cs-add{padding:0 14px;font-size:14px}}
.cs-oos{color:var(--bad);font-weight:700;font-size:14px}
.cs-allergens{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cs-allergens span{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 8px;border-radius:8px;background:var(--surface2);color:var(--ink2)}
.cs-allergens img{width:14px;height:14px;object-fit:contain}
.cs-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px;color:var(--muted)}
.cs-cartbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 40%);pointer-events:none}
.cs-cartbar button{pointer-events:auto;width:100%;max-width:1248px;margin:0 auto;display:flex;min-height:58px;border-radius:16px;background:var(--brand);color:var(--on-brand);align-items:center;gap:12px;padding:0 18px;font-weight:700;box-shadow:var(--shadow);transition:transform 60ms;border:0;cursor:pointer;text-align:left}
.cs-cartbar button:active{transform:scale(.98)}
.cs-cartbar .cs-cnt{background:var(--on-brand);color:var(--brand);min-width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:14px;font-weight:800}
.cs-cartbar .cs-sub{font-weight:500;font-size:12.5px;opacity:.85;display:block}
.cs-rail{display:none}
.cs-skel{display:grid;gap:12px}
@media (min-width:700px){
  .cs-hero{margin:12px 0 0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:34px 36px 64px 40px;min-height:230px;border-radius:28px}
  .cs-hero::before{opacity:1;width:380px;height:380px;right:-40px;bottom:-140px}
  .cs-hh{font-size:30px;max-width:460px}.cs-hs{font-size:16px}.cs-hrow{margin-bottom:14px}
  .cs-hart-s{display:none}.cs-hart-l{display:block;width:230px;height:176px;flex:none;position:relative;z-index:1;margin-right:12px}
  .cs-menu-l{padding-left:24px;padding-right:24px;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"ctx ctx" "mrow mrow" "cats rail" "list rail";column-gap:24px}
  .cs-ctx{margin:-34px 24px 0;padding:14px 18px;display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);align-items:center;gap:8px 24px;border-radius:22px;box-shadow:var(--shadow)}
  .cs-ctx .cs-line{padding:0 0 0 24px;min-height:0;border-left:1px solid var(--line)}
  .cs-mrow{flex-direction:row;align-items:center;gap:20px;margin-top:20px}
  .cs-mrow .cs-tools{order:0}
  .cs-mrow .cs-menus{margin:0;flex:none}.cs-mrow .cs-menus button{margin-right:20px}
  .cs-mrow .cs-tools{margin:0;flex:1;justify-content:flex-end}
  .cs-mrow .cs-search{max-width:520px;margin-left:auto}
  .cs-cats{top:68px}.cs-cats-scr{padding:0 24px;margin:0 -24px}
  .cs-rail{display:block;grid-area:rail;position:sticky;top:92px;margin-top:18px;align-self:start}
  .cs-rail .cs-card{padding:16px;display:flex;flex-direction:column;gap:12px}
  .cs-cartbar{display:none}
  .cs-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .cs-item{grid-template-columns:1fr;gap:10px;padding:10px}
  .cs-ph{height:150px}
  .cs-tx{padding:2px 6px 6px}
  .cs-item .cs-ft{padding-top:10px}
}
@media (min-width:1080px){
  .cs-hh{font-size:34px;max-width:580px}.cs-hart-l{width:300px;height:230px}.cs-hero{padding:36px 48px 68px 52px;min-height:250px}
  .cs-ctx{margin:-38px 40px 0;grid-template-columns:minmax(280px,360px) minmax(0,1fr) minmax(190px,230px)}
  .cs-facts{display:block;border-left:1px solid var(--line);padding-left:24px}
  .cs-fact{display:flex;align-items:center;gap:8px;min-height:30px;font-size:13.5px;color:var(--muted)}
  .cs-fact b{margin-left:auto;color:var(--ink);font-weight:700;font-size:14px}
  .cs-fact svg{width:16px;height:16px;color:var(--brand-ink)}
  .cs-menu-l{grid-template-columns:200px minmax(0,1fr) 360px;grid-template-areas:"ctx ctx ctx" "mrow mrow mrow" "catrail list rail"}
  .cs-cats{display:none}
  .cs-catrail{display:block;grid-area:catrail;position:sticky;top:92px;margin-top:18px;align-self:start}
  .cs-catrail a,.cs-catrail button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 14px;border-radius:12px;color:var(--ink2);font-weight:600;text-decoration:none;cursor:pointer;background:transparent;border:0;text-align:left}
  .cs-catrail .cs-on{background:var(--brand-soft);color:var(--brand-ink);font-weight:800}
  .cs-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
#cs-menus{scroll-margin-top:72px}
@media (min-width:700px) and (max-width:1079px){.cs-mrow{flex-wrap:wrap;row-gap:12px}.cs-mrow .cs-tools{flex:1 1 320px}}

/* ===== wave 3: order type popup ===== */
.cs-otg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cs-otc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 8px;min-height:196px;border:1.5px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);transition:transform 200ms var(--ease),border-color 120ms,box-shadow 200ms var(--ease),background-color 120ms;cursor:pointer}
.cs-otc:hover{transform:translateY(-3px);border-color:var(--brand-line);box-shadow:var(--shadow)}
.cs-otc:active{transform:scale(.97)}
.cs-otc.cs-on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px var(--brand-soft)}
.cs-otc b{font:700 16px var(--f-head)}.cs-otc .cs-otd{font-size:12.5px;color:var(--muted);line-height:1.35}
.cs-otc.cs-on b{color:var(--brand-ink)}
.cs-ill{width:100%;max-width:104px;height:auto;margin-bottom:6px;overflow:visible}
.cs-ill .f1{fill:var(--rest)}.cs-ill .f2{fill:var(--line-strong);opacity:.45}.cs-ill .f3{fill:var(--accent)}
html.dark .cs-ill .f1{fill:var(--brand)}
.cs-ill .ln{stroke:var(--accent);stroke-width:3;fill:none;stroke-linecap:round}.cs-ill .ln2{stroke:var(--ink2);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cs-ill .wh{fill:var(--surface);stroke:var(--ink2);stroke-width:4}.cs-ill .road{stroke:var(--line-strong);stroke-width:3;stroke-dasharray:8 8;fill:none;stroke-linecap:round;animation:cs-road 1s linear infinite}
.cs-ill .steam path{stroke:var(--ink2);stroke-width:3;fill:none;stroke-linecap:round;opacity:0;animation:cs-steam 2.4s ease-out infinite}
.cs-ill .steam path:nth-child(2){animation-delay:.5s}.cs-ill .steam path:nth-child(3){animation-delay:1s}
.cs-ill .awn{transform-box:fill-box;transform-origin:50% 100%;animation:cs-awn 3s var(--ease) infinite}
@keyframes cs-awn{0%,70%,100%{transform:scaleY(1)}78%{transform:scaleY(1.1) translateY(-1px)}88%{transform:scaleY(.96)}}
.cs-ill .rider{animation:cs-ride 3.2s ease-in-out infinite}
@keyframes cs-ride{0%,100%{transform:translateX(-6px)}50%{transform:translateX(8px)}}
@keyframes cs-road{to{stroke-dashoffset:-16}}
.cs-otc:hover .rider{animation-duration:1.6s}
@media (min-width:700px){.cs-sheet.cs-wide3{width:min(680px,92%)}.cs-otc{min-height:230px;padding:20px 12px}.cs-otc .cs-otd{font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.cs-ill *{animation:none!important}.cs-ill .steam path{opacity:.6}}

/* ===== wave 3: call waiter ===== */
/* Call waiter: service bell. rung = soft ring + wave arcs + check badge; swing = pending */
.cs-wb{position:relative;width:132px;height:112px;margin:0 auto 6px;display:grid;place-items:center}
.cs-wb svg{width:120px;height:100px;overflow:visible;position:relative;z-index:1}
.w-body{fill:var(--brand)}.w-base{fill:var(--brand-hover)}.w-knob{fill:var(--accent)}.w-stem{fill:var(--accent)}.w-hl{stroke:#fff;stroke-width:4;fill:none;stroke-linecap:round;opacity:.55}
html.dark .w-hl{stroke:var(--on-brand)}
.w-waves path{stroke:var(--brand);stroke-width:4;fill:none;stroke-linecap:round;opacity:0}
.w-dome{transform-box:fill-box;transform-origin:50% 100%}
.cs-wring{position:absolute;left:50%;top:52%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:3px solid var(--brand);opacity:0}
.cs-wbadge{position:absolute;right:6px;bottom:2px;width:32px;height:32px;border-radius:50%;background:var(--ok);color:var(--surface);display:grid;place-items:center;z-index:2;border:3px solid var(--surface);transform:scale(0)}
.cs-wbadge svg{width:16px;height:16px;stroke:currentColor;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cs-wb.rung .w-dome{animation:cs-wring 1.1s var(--ease) 1 both,cs-wring 5s ease-in-out 2.4s infinite}
@keyframes cs-wring{0%{transform:rotate(0)}15%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
.cs-wb.rung .w-waves path{animation:cs-wwave 1.1s ease-out 1 both,cs-wwave 5s ease-out 2.4s infinite}
.cs-wb.rung .w-waves path:nth-child(2n){animation-delay:.1s,2.5s}
@keyframes cs-wwave{0%{opacity:0}20%{opacity:.9}100%{opacity:0}}
.cs-wb.rung .cs-wring{animation:cs-wpulse 2.4s ease-out infinite}.cs-wb.rung .cs-wring.r2{animation-delay:1.2s}
@keyframes cs-wpulse{0%{opacity:.45;transform:scale(.7)}100%{opacity:0;transform:scale(1.55)}}
.cs-wb.rung .cs-wbadge{animation:cs-wpop 420ms var(--ease) .5s both}
@keyframes cs-wpop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.cs-wb.swing .w-dome{animation:cs-wswing 1.6s ease-in-out infinite}
@keyframes cs-wswing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.cs-wb.swing .cs-wring{animation:cs-wpulse 1.8s ease-out infinite}
.cs-dots i{font-style:normal;animation:cs-wdot 1.2s infinite}.cs-dots i:nth-child(2){animation-delay:.2s}.cs-dots i:nth-child(3){animation-delay:.4s}
@keyframes cs-wdot{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.cs-wb *,.cs-dots i{animation:none!important}.cs-wbadge{transform:scale(1)}.w-waves path{opacity:.7}.cs-dots i{opacity:1}}


/* ===== wave 3: item options ===== */
.cs-opts{display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.cs-opt-head{display:flex;gap:14px;align-items:flex-start}
.cs-opt-photo{width:72px;height:72px;border-radius:14px;object-fit:cover;flex:none}
.cs-og{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cs-gh{padding:12px 14px;background:var(--surface2)}
.cs-rule{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface);color:var(--ink2);flex:none}
.cs-rule.req{background:var(--warn-soft);color:var(--warn)}
.cs-opt{display:flex;align-items:center;gap:12px;padding:0 14px;min-height:52px;border-top:1px solid var(--line);width:100%;text-align:left;background:transparent;color:var(--ink)}
.cs-optbtn{border-left:0;border-right:0;border-bottom:0;cursor:pointer}
.cs-opt.cs-sel{background:var(--brand-soft)}
.cs-opt.cs-off{opacity:.5;cursor:not-allowed}
.cs-nm2{flex:1;font-weight:600}
.cs-pr{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}.cs-pr-on{color:var(--ink);font-weight:600}
.cs-rd,.cs-ck{width:22px;height:22px;border:2px solid var(--line-strong);display:grid;place-items:center;flex:none;color:var(--on-brand)}
.cs-rd{border-radius:50%}.cs-ck{border-radius:6px}
.cs-rd.cs-on{border-color:var(--brand)}.cs-rd.cs-on::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--brand)}
.cs-ck.cs-on{background:var(--brand);border-color:var(--brand)}
.cs-stp-sm button{width:40px;height:40px;font-size:20px;line-height:1}
.cs-stp button:disabled{opacity:.3}
.cs-optfoot{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 0 2px;background:var(--surface);border-top:1px solid var(--line);margin-top:4px}

/* ===== waves 4 and 5 (skin only): cart, checkout and order pages keep their structure and every function,
   they get the new colours, radii, buttons and fields by re-skinning the existing utility classes. Customer site only (body.cs). ===== */
body.cs .bg-white,body.cs .bg-gray-50,body.cs .bg-gray-100{background-color:var(--surface)}
body.cs .bg-gray-50,body.cs .bg-gray-100,body.cs [class*="bg-skin-base/[.1]"],body.cs [class*="bg-skin-base/[0.08]"]{background-color:var(--surface2)}
html.dark body.cs [class*="dark:bg-gray-800"],html.dark body.cs [class*="dark:bg-gray-900"],html.dark body.cs [class*="dark:bg-gray-700"]{background-color:var(--surface)}
html.dark body.cs [class*="dark:bg-gray-700"]{background-color:var(--surface2)}
body.cs .border-gray-100,body.cs .border-gray-200,body.cs .border-gray-300,body.cs .divide-gray-100>*+*,body.cs .divide-gray-200>*+*{border-color:var(--line)}
html.dark body.cs [class*="dark:border-gray-"],html.dark body.cs [class*="dark:divide-gray-"]>*+*{border-color:var(--line)}
body.cs .text-gray-900,body.cs .text-gray-800,body.cs .text-gray-700{color:var(--ink)}
body.cs .text-gray-600,body.cs .text-gray-500,body.cs .text-gray-400{color:var(--muted)}
html.dark body.cs [class*="dark:text-white"],html.dark body.cs [class*="dark:text-gray-100"],html.dark body.cs [class*="dark:text-gray-200"]{color:var(--ink)}
html.dark body.cs [class*="dark:text-gray-300"],html.dark body.cs [class*="dark:text-gray-400"],html.dark body.cs [class*="dark:text-neutral"]{color:var(--ink2)}
body.cs .text-skin-base{color:var(--brand-ink)}
html.dark body.cs [class*="dark:text-skin-base"]{color:var(--brand)}
body.cs .rounded-lg,body.cs .rounded-md,body.cs .rounded-xl{border-radius:14px}
body.cs .shadow-sm,body.cs .shadow,body.cs .shadow-md,body.cs .shadow-lg{box-shadow:none}
body.cs main .bg-white.rounded-lg,body.cs main .bg-white.rounded-md{border:1px solid var(--line)}
/* main buttons: x-button, x-cart-button, secondary */
body.cs button.bg-skin-base,body.cs a.bg-skin-base{background-color:var(--brand);color:var(--on-brand);border-radius:12px;min-height:44px;font-weight:700;font-size:15px;padding:0 18px}
body.cs button.bg-skin-base:hover{background-color:var(--brand-hover)}
body.cs button.bg-skin-base *{color:inherit}
body.cs button.border-skin-base.text-skin-base{border-color:var(--brand-ink);color:var(--brand-ink);background:var(--surface);border-radius:12px;min-height:44px;font-weight:800;font-size:15px;padding:0 18px}
body.cs button.border-gray-300.text-gray-700,body.cs button.border-gray-500.text-gray-300{border-color:var(--line-strong);color:var(--ink);background:var(--surface);border-radius:12px;min-height:44px;font-weight:700;font-size:15px;padding:0 18px}
body.cs button.bg-red-500,body.cs button.bg-red-600{border-radius:12px;min-height:44px}
/* fields */
body.cs main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([readonly]),body.cs main select,body.cs main textarea,
body.cs [role=dialog] input:not([type=checkbox]):not([type=radio]),body.cs [role=dialog] select,body.cs [role=dialog] textarea{border:1.5px solid var(--line-strong);border-radius:12px;background-color:var(--surface);color:var(--ink);min-height:46px;font-size:16px}
body.cs main input:focus,body.cs main select:focus,body.cs main textarea:focus{outline:3px solid var(--focus);outline-offset:0;border-color:var(--brand);box-shadow:none}
body.cs main label,body.cs main .block.font-medium{color:var(--ink2)}
/* modal shells used by the guest dialogs */
body.cs .fixed.inset-0 .bg-white,html.dark body.cs .fixed.inset-0 [class*="dark:bg-gray-800"]{background-color:var(--surface);color:var(--ink);border-radius:22px}
body.cs h1,body.cs h2,body.cs h3{font-family:var(--f-head)}

/* ===== wave 4 (layout): cart and checkout in four numbered steps, summary always visible ===== */
.cs-co{max-width:1280px;margin:0 auto;padding:4px 16px 190px}
.cs-co-title{font:800 28px/1.1 var(--f-head);letter-spacing:-.01em;color:var(--ink);margin:10px 0 16px}
.cs-co-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.cs-co-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.cs-step{padding:18px 16px}
.cs-step-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cs-step-h h2{font:700 19px/1.2 var(--f-head);color:var(--ink);flex:1;min-width:0;margin:0}
.cs-stepn{width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font:800 15px var(--f-head);flex:none}
body.cs .cs-addmore{color:var(--brand-ink);font-weight:700;font-size:15px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
html.dark body.cs .cs-addmore{color:var(--brand)}
.cs-tableline{display:flex;align-items:center;gap:8px;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--brand-soft);color:var(--ink);font-weight:700}
.cs-detail{font-size:16px;line-height:1.5;color:var(--ink);margin-bottom:6px}
/* step 1: order type as a segmented switch (same buttons and actions as before) */
.cs-step [data-testid=order-type-switch]{padding:0;margin:0}
.cs-step [data-testid=order-type-switch]>div{border:0;padding:0;background:transparent!important}
.cs-step [data-testid=order-type-switch] p{display:none}
.cs-step [data-testid=order-type-switch] [role=group]{background:var(--surface2);border-radius:14px;padding:4px;gap:4px;flex-wrap:nowrap}
.cs-step [data-testid=order-type-switch] button{border:0!important;background:transparent!important;color:var(--ink2)!important;min-height:44px;border-radius:11px;font-weight:700;box-shadow:none}
.cs-step [data-testid=order-type-switch] button[aria-pressed=true]{background:var(--surface)!important;color:var(--brand-ink)!important;box-shadow:0 1px 4px rgba(14,40,28,.18);font-weight:800}
html.dark .cs-step [data-testid=order-type-switch] button[aria-pressed=true]{color:var(--brand)!important}
/* step 1: delivery address block inside the card */
.cs-step .cs-step>*{margin:0}
.cs-step .bg-gray-50.rounded.select-none{margin-top:14px!important;background:transparent!important;padding:0!important}
/* step 2: item lines */
.cs-lines>div{border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.cs-lines>div:last-child{border-bottom:0!important}
.cs-lines>div>div{background:transparent!important;padding:12px 0!important}
.cs-lines img.object-cover{width:56px;height:56px;border-radius:12px}
.cs-lines button.h-8{width:40px;height:40px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);display:grid;place-items:center;padding:0}
.cs-lines button.h-8 svg{width:14px;height:14px}
.cs-lines input.w-12{height:40px;width:44px;background:transparent;border:0;border-top:1.5px solid var(--line-strong);border-bottom:1.5px solid var(--line-strong);font-weight:700;color:var(--ink);padding:0;min-height:40px}
/* summary */
.cs-co-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.cs-sum{padding:18px 16px;text-align:left}
.cs-sum>div{text-align:left}
.cs-sum-h{font:700 19px var(--f-head);color:var(--ink);margin:0 0 4px}
.cs-sum .text-sm,.cs-sum .text-xs{color:var(--ink2)}
.cs-sum>div.font-medium{border-top:1px dashed var(--line-strong);padding-top:12px;font:800 20px var(--f-head);color:var(--ink)}
/* pay bar: sticky at the bottom on phone, in the side column on wider screens */
.cs-paybar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;box-shadow:0 -6px 20px rgba(14,40,28,.12)}
.cs-paybar>div:first-of-type,.cs-paybar>.flex{max-width:640px;margin:0 auto}
.cs-paybar-total{display:flex;align-items:baseline;gap:10px;max-width:640px;margin:0 auto 10px;color:var(--ink2);font-size:15px}
.cs-paybar-total b{font:800 22px var(--f-head);color:var(--ink)}
.cs-paybar button{min-height:48px}
.cs-co-side>div:last-child{padding:0 4px}
@media (min-width:700px){
  .cs-co{padding:4px 24px 48px}
  .cs-co-title{font-size:32px}
  .cs-co-grid{grid-template-columns:minmax(0,1fr) 300px;gap:20px}
  .cs-co-grid:not(:has(.cs-co-side)){grid-template-columns:minmax(0,1fr)}
  .cs-co-side{position:sticky;top:88px}
  .cs-paybar{position:static;border:1px solid var(--line);border-radius:16px;padding:16px!important;box-shadow:none}
  .cs-paybar-total{display:none}
  .cs-step{padding:22px 24px}
}
@media (min-width:1024px){.cs-co-grid{grid-template-columns:minmax(0,1fr) 360px}}
.cs-paybar{text-align:left}
.cs-paybar .grid>:only-child{grid-column:1/-1}

/* dish photo in the Item Description pop-up: full width, fixed ratio, no side bars */
.cs-dishhero{width:100%!important;height:auto!important;aspect-ratio:16/10;background:var(--surface2)!important;overflow:hidden}
.cs-dishhero .cs-dishhero-img,.cs-dishhero-img{display:block;width:100%!important;max-width:none!important;max-height:none!important;height:100%!important;object-fit:cover!important}
img.cs-dishhero-img:not(.cs-dishhero img){height:auto!important;aspect-ratio:16/10;border-radius:14px}
.cs-dishhero img{aspect-ratio:16/10}
.cs-dimodal{position:relative;border-radius:22px!important}
.cs-dimodal:has(.cs-dishhero) .cs-dihead{position:absolute;top:10px;right:10px;padding:0;border:0;background:transparent;z-index:2}
.cs-dimodal:has(.cs-dishhero) .cs-dihead h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cs-dimodal:has(.cs-dishhero) .cs-dihead button{width:44px;height:44px;border-radius:50%;background:rgba(10,20,15,.62);color:#fff;display:grid;place-items:center}
.cs-lines [class*="md:max-w-"]{max-width:none!important}
.cs-lines .sm\:flex-row{flex-wrap:wrap}
/* cart rail on the menu page: item lines with steppers */
.cs-railitems{display:flex;flex-direction:column;gap:10px;max-height:44vh;overflow:auto}
.cs-railitem{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cs-railnm{font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.25}
.cs-railstp{display:flex;align-items:center;gap:2px;flex:none}
.cs-railstp button{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:18px;font-weight:700;display:grid;place-items:center}
.cs-railstp span{min-width:26px;text-align:center;font-weight:700}
/* out of range card */
.cs-oor{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--bad-soft);border:1.5px solid var(--bad);color:var(--ink)}
.cs-oor-h{display:flex;align-items:center;gap:8px;color:var(--bad);font-size:16px}
.cs-oor p{margin:6px 0 12px;font-size:14.5px;line-height:1.4;color:var(--ink2)}
.cs-oor-x{display:flex;flex-wrap:wrap;gap:8px}
.cs-oor-x .cs-btn{min-height:44px;font-size:14.5px;padding:0 14px}
.cs-co:has(.cs-oor) .cs-paybar button{opacity:.45;pointer-events:none}
.cs-incart{text-align:center;margin-top:4px;font-weight:600}
/* branch sheet */
.cs-branches{min-width:300px;max-width:min(420px,94vw)}
.cs-branches .cs-bro{align-items:center;min-height:56px;padding:8px 12px;height:auto}
.cs-branches .cs-sp{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-branches .cs-bn{font-weight:700}
@media (max-width:699px){.cs-branches{position:fixed!important;left:12px!important;right:12px!important;top:64px!important;bottom:auto!important;transform:none!important;inset:64px 12px auto 12px!important;max-width:none;width:auto;z-index:95}}

/* wave 5: My orders */
.cs-ord{max-width:860px;margin:0 auto;padding:4px 16px 40px}
.cs-chips{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.cs-ordlist{display:flex;flex-direction:column;gap:12px;list-style:none;padding:0;margin:0}
.cs-ordcard{padding:16px}
.cs-ordcard>a{display:block;text-decoration:none;color:var(--ink)}
.cs-ordcard .truncate{font:700 17px var(--f-head);color:var(--ink)}
.cs-ordcard .cs-pill{margin-top:6px}
@media (min-width:700px){.cs-ord{padding:4px 24px 48px}}
.cs-ordcard .mt-1 .truncate{font:400 13.5px var(--f-body);color:var(--muted)}
.cs-ordcard .grid a,.cs-ordcard .grid button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* wave 5 (second pass): About, Contact, Book a table */
.cs-page2{max-width:960px;margin:0 auto;padding:12px 16px 48px}
.cs-abouthero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand),color-mix(in oklab,var(--brand) 70%,black));color:var(--on-brand);border-radius:20px;padding:30px 24px;margin-bottom:16px;min-height:132px}
.cs-abouthero h1{font:800 26px/1.15 var(--f-head);margin:0 0 6px;max-width:70%}
.cs-abouthero p{margin:0;opacity:.9;font-size:16px;max-width:70%}
.cs-abouthero::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;background:var(--accent);opacity:.95}
.cs-infocard{padding:20px}
.cs-abouttext{color:var(--ink2);line-height:1.6;font-size:16px;text-align:left}
.cs-mapbox{border-radius:14px;overflow:hidden;margin:14px 0;border:1px solid var(--line)}
.cs-contactrows{display:flex;flex-direction:column}
.cs-crow{display:flex;align-items:center;gap:14px;min-height:64px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;padding:8px 0}
.cs-crow:first-child{border-top:0}
.cs-crow small{display:block;color:var(--muted);font-size:13px;font-weight:600}
.cs-crow>.cs-i:first-child{color:var(--brand-ink)}
html.dark .cs-crow>.cs-i:first-child{color:var(--brand)}
.cs-crow>.cs-i:last-child{color:var(--muted)}
@media (min-width:700px){.cs-page2{padding:16px 24px 56px}.cs-abouthero{padding:44px 40px;min-height:180px}.cs-abouthero h1{font-size:34px}.cs-abouthero::after{width:260px;height:260px}}
.cs-bookwrap{max-width:860px;margin-left:auto;margin-right:auto}
.cs-bookwrap>h4{font:800 28px var(--f-head)!important;color:var(--ink)}
.cs-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.cs-day{flex:none;min-width:68px;min-height:84px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 8px;font-size:13px;font-weight:600}
.cs-day b{font:800 20px var(--f-head)}
.cs-day.cs-on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.cs-bookwrap label[for^="timeSlot"],.cs-bookwrap label[for^="areaPreference"]{border-radius:14px}
/* order detail: two columns on wide screens (status and tracker on the right, items and payment on the left) */
@media (min-width:1024px){
  .cs-odetail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:24px;align-items:start}
  .cs-odetail>*{grid-column:1/-1;margin-top:0}
  .cs-odetail>.cs-od-items{grid-column:1;grid-row:3}
  .cs-odetail>.cs-od-pay{grid-column:1;grid-row:4}
  .cs-odetail>.cs-od-status{grid-column:2;grid-row:3 / span 3;position:sticky;top:88px}
}
.cs-closedbar{display:flex;align-items:center;gap:12px;margin:12px 0;padding:12px 16px;border-radius:14px;background:var(--warn-soft);border:1.5px solid var(--warn);color:var(--ink)}
.cs-closedbar b{display:block;color:var(--warn)}.cs-closedbar span{font-size:14px;color:var(--ink2)}
.cs-closedbar .cs-i{color:var(--warn)}
.cs-abouthero h1,.cs-abouthero p{position:relative;z-index:1;max-width:72%;overflow-wrap:anywhere}
.cs-abouthero::after{width:110px;height:110px;right:-30px;top:-30px}
@media (min-width:700px){.cs-abouthero::after{width:230px;height:230px;right:-50px;top:-50px}}

/* order success: banner, vertical tracker, two columns on tablet landscape and desktop */
.cs-os{max-width:1180px;margin:0 auto;padding:8px 16px 40px;color:var(--ink)}
.cs-os-grid{display:flex;flex-direction:column;gap:14px}
.cs-os-l,.cs-os-r{display:flex;flex-direction:column;gap:14px;min-width:0}
.cs-os-ban{padding:24px 20px;text-align:center;background:var(--brand);color:var(--on-brand);border-radius:20px}
.cs-os-tick{width:60px;height:60px;border-radius:50%;background:var(--accent);color:#2A2200;display:grid;place-items:center;margin:0 auto 12px}
.cs-os-h{font:800 26px/1.15 var(--f-head);margin:0}
.cs-os-sub{opacity:.92;margin-top:6px;font-size:16px}
.cs-os-card{padding:18px}
.cs-os-ct{font:800 19px var(--f-head);color:var(--ink);margin-bottom:10px}
.cs-os-card .dark\:text-white,.cs-os-card .text-gray-900{color:var(--ink)}
.cs-os-card .divide-y>*{border-color:var(--line)}
.cs-os-card [class*="bg-gray-50"]{background:var(--surface2)}
.cs-os-act{display:flex;flex-direction:column;gap:14px;align-items:stretch}.cs-os-btns{display:flex;gap:10px;flex-wrap:wrap}.cs-os-btns .cs-btn{flex:1 1 0;min-height:48px;text-decoration:none}.cs-os-call{align-self:center;color:var(--muted)}
.cs-os-new{min-height:48px;border-radius:12px!important;font-size:16px!important;font-weight:700!important;padding:0 20px!important;display:inline-flex;align-items:center;justify-content:center;width:100%}
.cs-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cs-tl li{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding-bottom:0;font-size:16px;color:var(--muted)}
.cs-tl li b{font-weight:700}.cs-tl li .cs-cap{display:block;font-weight:400}
.cs-tl li:not(:last-child)::before{content:"";position:absolute;left:14px;top:30px;bottom:-14px;width:3px;background:var(--line);border-radius:2px}
.cs-tl li.done:not(:last-child)::before{background:var(--brand)}
.cs-tl .cs-d{width:30px;height:30px;border-radius:50%;border:2.5px solid var(--line-strong);display:grid;place-items:center;flex:none;background:var(--surface);position:relative;z-index:1}
.cs-tl .cs-d .cs-i{width:16px;height:16px;stroke-width:3}
.cs-tl li.done{color:var(--ink)}.cs-tl li.done .cs-d{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.cs-tl li.now{color:var(--ink)}.cs-tl li.now .cs-d{border-color:var(--brand);box-shadow:0 0 0 5px var(--brand-soft)}
.cs-tl li.now .cs-d::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--brand)}
@media (min-width:1000px){
  .cs-os{padding:16px 24px 56px}
  .cs-os-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
  .cs-os-l{position:sticky;top:88px}
  .cs-os-new{width:auto}
}
@media (prefers-reduced-motion:reduce){.cs-tl *{transition:none!important;animation:none!important}}

/* menu loading and error states */
.cs-lsk{display:grid;gap:12px;margin-top:6px}
.cs-lsk .cs-lcard{display:flex;gap:14px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.cs-lsk .cs-lph{width:116px;height:116px;border-radius:12px;flex:none}
.cs-lsk .cs-lbody{flex:1;display:flex;flex-direction:column;gap:10px;padding-top:6px;min-width:0}
.cs-lsk .cs-lbtn{width:96px;height:44px;margin-top:auto;border-radius:12px}
@media (min-width:700px){.cs-lsk{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-lsk .cs-lph{width:150px;height:130px}}
.cs-errstate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px;color:var(--muted)}
.cs-errstate .cs-erric{width:84px;height:84px;border-radius:50%;background:var(--bad-soft);color:var(--bad);display:grid;place-items:center;margin-bottom:6px}
.cs-errstate .cs-erric .cs-i{width:40px;height:40px}
.cs-errstate h3{font:800 24px var(--f-head);color:var(--ink);margin:0}
.cs-errstate p{margin:0;font-size:16px;max-width:360px}
.cs-errstate .cs-btn{margin-top:8px}
@media (prefers-reduced-motion:reduce){.cs-sk{animation:none}}
.cs-lsk,.cs-errstate{grid-area:list}

/* ===== dish placeholder (no photo): soft illustration, tone on tone with the restaurant colour (5 Nov) ===== */
.cs-art{--pa-bg1:color-mix(in oklab,var(--rest) 15%,var(--surface));--pa-bg2:color-mix(in oklab,var(--rest) 7%,var(--surface2));
  --pa-sh:color-mix(in oklab,var(--rest) 24%,transparent);--pa-plate:color-mix(in oklab,var(--rest) 5%,#fff);--pa-rim:color-mix(in oklab,var(--rest) 26%,#fff);
  --pa-body:color-mix(in oklab,var(--rest) 40%,#fff);--pa-f1:color-mix(in oklab,var(--rest) 55%,#fff);--pa-f2:color-mix(in oklab,var(--accent) 70%,#fff);
  --pa-f3:color-mix(in oklab,#8fd6a0 72%,var(--rest) 28%);--pa-bun:color-mix(in oklab,var(--accent) 55%,#fff);--pa-seed:color-mix(in oklab,var(--accent) 30%,#fff);
  --pa-cut:color-mix(in oklab,var(--accent) 45%,#c99a3c);--pa-hl:rgba(255,255,255,.7);--pa-steam:color-mix(in oklab,var(--rest) 55%,#fff);
  display:block;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%,var(--pa-bg1),var(--pa-bg2) 78%);color:inherit}
html.dark .cs-art{--pa-bg1:color-mix(in oklab,var(--rest) 24%,var(--surface));--pa-bg2:color-mix(in oklab,var(--rest) 12%,var(--surface));
  --pa-sh:rgba(0,0,0,.28);--pa-plate:color-mix(in oklab,var(--rest) 22%,var(--surface2));--pa-rim:color-mix(in oklab,var(--rest) 34%,var(--surface2));
  --pa-body:color-mix(in oklab,var(--rest) 40%,var(--surface2));--pa-f1:color-mix(in oklab,var(--rest) 62%,var(--surface2));--pa-f2:color-mix(in oklab,var(--accent) 66%,#6b4a1c);
  --pa-f3:color-mix(in oklab,#5fbf7c 72%,var(--rest) 28%);--pa-bun:color-mix(in oklab,var(--accent) 66%,#6b4a1c);--pa-seed:color-mix(in oklab,var(--accent) 55%,#fff);
  --pa-cut:color-mix(in oklab,var(--accent) 40%,var(--surface2));--pa-hl:rgba(255,255,255,.22);--pa-steam:color-mix(in oklab,var(--rest) 45%,#fff)}
.cs-art svg{display:block;width:100%;height:100%;padding:3%;box-sizing:border-box}
.pa-sh{fill:var(--pa-sh)}.pa-plate{fill:var(--pa-plate)}.pa-rim{fill:var(--pa-rim)}.pa-body{fill:var(--pa-body)}
.pa-f1{fill:var(--pa-f1)}.pa-f2{fill:var(--pa-f2)}.pa-f3{fill:var(--pa-f3)}.pa-bun{fill:var(--pa-bun)}
.pa-seed,.pa-seed *{fill:var(--pa-seed)}.pa-straw{stroke:var(--pa-f2);stroke-width:6;stroke-linecap:round}
.pa-hl{stroke:var(--pa-hl);stroke-width:3;stroke-linecap:round;fill:none}.pa-cut{stroke:var(--pa-cut);stroke-width:3;stroke-linecap:round;fill:none}
.pa-steam{fill:none;stroke:var(--pa-steam);stroke-width:4;stroke-linecap:round;opacity:.75}
@media (prefers-reduced-motion:no-preference){.pa-steam{animation:cs-pasteam 3.6s ease-in-out infinite}}
@keyframes cs-pasteam{0%,100%{opacity:.4}50%{opacity:.85}}
.cs-ph .cs-art{width:100%;height:100%}
.cs-dishhero .cs-art{width:100%;height:100%}
.cs-art.cs-art-hero{width:100%;aspect-ratio:16/10;border-radius:14px}
.cs-opt-head .cs-art{width:72px;height:72px;border-radius:14px;flex:none}

/* login / sign-up dialog: hifi dialog, input and button styles */
.cs-lg-title{font:800 24px/1.2 var(--f-head);color:var(--ink);margin:0}
.cs-lg-hint{font:400 15px/1.45 var(--f-body);color:var(--muted);margin:6px 0 0}
.cs-lg-fields{display:flex;flex-direction:column;gap:16px}
.cs-lg-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;padding-bottom:4px}
.cs-lg-act .cs-btn{width:100%;min-height:48px;border-radius:12px}
.cs-lg .cs-in{display:block;min-height:48px;box-shadow:none}
.cs-lg .cs-in:focus,.cs-lg .cs-in:focus-visible{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--rest) 22%,transparent)}
.cs-lg .cs-lg-code{display:flex;align-items:center;justify-content:space-between;font-size:16px;cursor:pointer}
.cs-lg .cs-lg-code:focus-visible{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--rest) 22%,transparent)}
.cs-lg ul[role=listbox],.cs-lg ul{background:var(--surface);color:var(--ink);border-radius:12px;border:1px solid var(--line)}
.cs-lg ul li{color:var(--ink)}
.cs-lg .cs-lnk{font-weight:700;color:var(--brand-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
body.cs .cs-lg input.cs-in:focus{outline:0}
/* Cart step 3 details, Contact message form, opening hours (4 Nov, hifi gaps) */
.cs-detform{display:flex;flex-direction:column;gap:14px}
.cs-phonerow{display:grid;grid-template-columns:104px 1fr;gap:8px}
.cs-ta{min-height:96px;padding:12px 14px;resize:vertical;font-family:inherit}
.cs-addrfound{margin-top:8px;padding:12px;border-radius:12px;background:var(--ok-soft);color:var(--ink);font-size:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cs-addrfound p{margin:0}
.cs-hours{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cs-about-hours .cs-hours,[data-testid=cs-about-hours] .cs-hours{margin-top:0;padding-top:0;border-top:0}
.cs-hr{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:15.5px;color:var(--ink2)}
.cs-hr .cs-num{color:var(--ink);font-weight:600;text-align:right}
.cs-hours .cs-h3{margin-bottom:4px;color:var(--ink)}
.cs-page2 .cs-infocard+.cs-infocard{margin-top:14px}
.cs-page2 .cs-infocard .cs-h2{margin-bottom:12px}
.cs-page2 .cs-infocard .cs-row .cs-h2{margin-bottom:0}
.cs-okmsg{padding:14px;border-radius:12px;background:var(--ok-soft);color:var(--ok);font-weight:700}
.cs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Final review 4 Nov: cart step 1 like the hifi (switch with icons, info card, delivery address block), tighter step badge, back arrow in the header on the cart */
.cs-step{padding:16px}
.cs-step-h{gap:10px;margin-bottom:12px}
.cs-step-h h2{font:700 17px/1.25 var(--f-head)}
.cs-stepn{width:26px;height:26px;font-size:13px}
.cs-step .cs-seg3{margin-top:0}
.cs-step .cs-alert{margin-top:12px}
.cs-step .cs-alert .cs-i{flex:none;margin-top:2px}
.cs-addr{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.cs-addr-t{font-weight:700;font-size:14px;color:var(--ink)}
.cs-addr-v{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink)}
.cs-addr-v p{margin:0;font-size:15.5px;line-height:1.4}
.cs-addr-v .cs-i{flex:none;margin-top:2px;color:var(--brand-ink)}
.cs-addr-b{display:flex;gap:8px;flex-wrap:wrap}
.cs-addr-b .cs-btn{flex:0 0 auto}
.cs-addr .cs-alert{margin-top:0}
.cs-hdr-back{display:none}
.cs-hdr-back-l{display:inline-grid}
@media (min-width:1024px){.cs-hdr-back-l{display:none}}
body:not(:has(#cs-waiter-host)) .cs-bell-d{display:inline-flex}
@media (max-width:699px){
  body:has(.cs-co) .cs-hdr-back{display:inline-flex}
  body:has(.cs-co) .cs-bar .cs-logo{display:none}
}
@media (max-width:699px){body:has(.cs-hdr-back-l) .cs-bar .cs-logo{display:none}}

/* Final review: details dialog (name, phone, address, map) in the hifi sheet style */
.cs-dlg{font-size:15px;color:var(--ink)}
.cs-dlg label{display:block;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:6px}
.cs-dlg input[type=text],.cs-dlg input[type=tel],.cs-dlg input[type=email],.cs-dlg textarea{width:100%;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);min-height:48px;padding:10px 14px;font:inherit;font-size:16px}
.cs-dlg textarea{min-height:76px}
.cs-dlg input:focus,.cs-dlg textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 22%,transparent)}
.cs-dlg [class*="bg-gray-50"][class*="rounded-lg"]{border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);min-height:48px;display:flex;align-items:center;padding:0 12px}
.cs-dlg #cart-address-map{height:220px;border-radius:14px;border:1px solid var(--line);box-shadow:none}
.cs-dlg #cart-place-autocomplete-card{border-radius:12px;border-color:var(--line-strong)}
.cs-dlg-act{display:flex;flex-direction:column;gap:10px;margin-top:20px;padding-bottom:6px}
.cs-dlg .cs-btn-ghost,.cs-dlg-act .cs-btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.cs-dlg [class*="text-xs"].inline-flex,.cs-dlg button[wire\:click="requestCustomerLocation"]{min-height:44px;border-radius:12px;font-size:14.5px;font-weight:700;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:0 14px;text-transform:none;letter-spacing:0}
.cs-dlg-title{font:700 20px/1.2 var(--f-head);color:var(--ink)}
.cs-dlg #cart-place-autocomplete-card{border:0;padding:0}
.cs-dlg #cart-place-autocomplete-card input{border:1.5px solid var(--line-strong)}

/* Final review: service row (Book a table, Call waiter) and empty search like the hifi */
.cs-svc{display:flex;gap:10px;flex-wrap:wrap;padding:16px 0 8px}
.cs-svc .cs-btn{flex:1 1 150px;min-height:48px}
.cs-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:28px 16px}
.cs-empty-ic{width:64px;height:64px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center}
.cs-empty .cs-h3{font:700 20px/1.2 var(--f-head);color:var(--ink)}
.cs-empty .cs-cap{max-width:34ch}
.cs-bar input::placeholder,.cs-search input::placeholder{text-overflow:ellipsis}
input[type=search]::placeholder,input[placeholder]::placeholder{text-overflow:ellipsis}
.cs-foot-links{display:flex;gap:16px;flex-wrap:wrap;font-weight:700;font-size:14px;margin-top:8px}
.cs-foot-links a{color:var(--ink);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.cs-foot-links a:hover{text-decoration:underline}
@media (min-width:640px){.cs-foot-links{margin-top:0}}
.cs-svc .cs-btn{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
/* Final review 2: dialog footers in the hifi look (location dialog) */
body.cs .fixed.inset-0 .bg-gray-100,html.dark body.cs .fixed.inset-0 [class*="dark:bg-gray-800"].flex-row{background:transparent}
/* Final review 2: cart line: name and price on top, stepper below, Remove link (hifi) */
.cs-lines .cs-ln-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:start}
.cs-lines .cs-ln-qp{display:contents}
.cs-lines .cs-ln-top>div:first-child{grid-column:1;grid-row:1}
.cs-lines .cs-ln-price{grid-column:2;grid-row:1;align-items:flex-end}
.cs-lines .cs-ln-price>div{order:2;font-size:12px}
.cs-lines .cs-ln-price>span{order:1;font-size:16px;font-weight:700;color:var(--ink)}
.cs-lines .cs-ln-stp{grid-column:1/-1;grid-row:2;justify-self:start}
.cs-lines .cs-ln-stp button{height:40px!important;width:44px;border-color:var(--line-strong)!important;background:var(--surface)!important}
.cs-lines .cs-ln-stp input{height:40px!important}
.cs-ln-rm{margin-top:4px}
.cs-ln-rm .cs-lnk{min-height:36px;color:var(--ink2);font-weight:600}

/* Final review 2: My orders card as in the hifi */
.cs-oc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cs-oc-no{font:700 17px var(--f-head);color:var(--ink);text-decoration:none}
.cs-ordcard .cs-oc-top .cs-pill{margin-top:0}
.cs-ordcard>.cs-cap{margin-top:6px}
.cs-oc-items{display:block;margin-top:10px;color:var(--ink);text-decoration:none;font-size:16px;line-height:1.35}
.cs-oc-bot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.cs-oc-tot{font:700 18px var(--f-head);color:var(--ink);display:flex;flex-direction:column}
.cs-oc-tot .cs-cap{font:400 12px var(--f-body)}
.cs-oc-btns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.cs-oc-btns .cs-btn{min-height:44px;text-decoration:none}
/* the header is re-rendered by Livewire, where the route test misses: never show the page back link on the cart (it has its own back arrow) */
body:has(.cs-co) .cs-hdr-back-l{display:none!important}
/* Final review 2: branch picker as a bottom sheet on phone, radio rows (hifi) */
.cs-bsh-t{display:block;font:700 20px/1.2 var(--f-head);color:var(--ink);margin:0}
.cs-branches .cs-bro::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);flex:none;display:none}
@media (max-width:699px){
  .cs-branches{inset:auto 0 0 0!important;top:auto!important;left:0!important;right:0!important;max-width:none!important;min-width:0!important;border-radius:24px 24px 0 0;padding:16px 16px 24px;transform:none!important;position:fixed!important;box-shadow:0 -12px 40px rgba(0,0,0,.28);max-height:80vh;overflow:auto}
  .cs-bsh-t{display:block;font:700 20px/1.2 var(--f-head);color:var(--ink);margin:4px 4px 12px}
  .cs-branches ul{display:flex;flex-direction:column;gap:10px}
  .cs-branches .cs-bro{border:1.5px solid var(--line-strong);border-radius:14px;min-height:64px;padding:10px 14px}
  .cs-branches .cs-bro::before{display:block}
  .cs-branches .cs-bro.cs-cur{border-color:var(--brand);background:var(--brand-soft)}
  .cs-branches .cs-bro.cs-cur::before{border-color:var(--brand);background:radial-gradient(circle,var(--brand) 0 5px,transparent 6px)}
}
/* backdrop-filter would make the fixed dialog position against the bar: drop it while the picker is open */
@media (min-width:700px){.cs-bar:has(.cs-branches:not([style*="display: none"])),.cs-hdr:has(.cs-branches:not([style*="display: none"])){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important}}
/* Final verify: branch picker as a centred dialog on tablet and desktop (hifi), radio rows, dimmed page behind */
@media (min-width:700px){
  .cs-branches{position:fixed!important;inset:auto!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(520px,92vw);max-width:none!important;border-radius:20px;padding:20px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45),0 20px 60px rgba(0,0,0,.3);max-height:84vh;overflow:auto;z-index:80}
  .cs-bsh-t{display:block;font:700 20px/1.2 var(--f-head);color:var(--ink);margin:0 4px 12px}
  .cs-branches ul{display:flex;flex-direction:column;gap:10px}
  .cs-branches .cs-bro{border:1.5px solid var(--line-strong);border-radius:14px;min-height:64px;padding:10px 14px}
  .cs-branches .cs-bro::before{display:block}
  .cs-branches .cs-bro.cs-cur{border-color:var(--brand);background:var(--brand-soft)}
  .cs-branches .cs-bro.cs-cur::before{border-color:var(--brand);background:radial-gradient(circle,var(--brand) 0 5px,transparent 6px)}
}
.cs-bookwrap>.cs-book-sub{margin:6px 0 0!important}
.cs-bookwrap>.cs-book-sub+*{margin-top:20px!important}
@media (max-width:699px){.cs-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}}
.cs-mapcard{position:relative;display:block;width:100%;height:150px;border-radius:14px;border:1px solid var(--line);overflow:hidden;background:color-mix(in oklab,var(--brand) 10%,var(--surface2));cursor:pointer;padding:0}
.cs-mapcard::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,color-mix(in oklab,var(--surface) 70%,transparent) 40% 46%,transparent 46%),linear-gradient(0deg,transparent 58%,color-mix(in oklab,var(--surface) 70%,transparent) 58% 64%,transparent 64%)}
.cs-mapzone{position:absolute;left:12%;top:14%;width:66%;height:62%;border:2px dashed var(--brand);border-radius:46% 54% 50% 50%;background:color-mix(in oklab,var(--brand) 14%,transparent)}
.cs-mappin{position:absolute;left:46%;top:34%;color:var(--bad,#b3261e)}
.cs-mappin .cs-i{width:30px;height:30px}
.cs-maplab{position:absolute;left:10px;bottom:10px;background:var(--surface);color:var(--ink);font-weight:700;font-size:12px;padding:5px 10px;border-radius:99px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
body:has(#cs-menus) .cs-hdr-back-l{display:none!important}
.cs-step [data-testid=order-type-switch]>.cs-seg3{background:var(--surface2)!important;padding:4px!important;border-radius:14px!important}
/* Final review 2: My bookings */
.cs-bks .cs-bklist{margin-top:14px}
.cs-bk-time{font-weight:600;color:var(--ink2)}
.cs-bk-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cs-bk-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--surface2);color:var(--ink2);font-size:14px;font-weight:600}
.cs-bk-chip .cs-i{width:16px;height:16px;color:var(--brand-ink)}
.cs-bk-note{display:flex;gap:8px;margin-top:10px;font-size:15px;color:var(--ink2);align-items:flex-start}
.cs-bk-note .cs-i{width:18px;height:18px;flex:none;margin-top:1px;color:var(--muted)}
.cs-bk-who{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.cs-bk-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:32px 20px;margin-top:14px}
.cs-bk-empty p{margin:0}
.cs-empty-ic{width:64px;height:64px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center}
.cs-empty-ic .cs-i{width:28px;height:28px}
@media (min-width:700px){.cs-bks .cs-bklist{display:grid;grid-template-columns:1fr 1fr}}

/* Final review 2: order success items and totals */
.cs-os-card [class*="bg-gray-50"]{background:transparent;border-top:1px solid var(--line)}
.cs-os-card .rounded-lg.border{border-radius:12px}
/* Final review 2: Book a table seating areas, compact */
.cs-bookwrap label[for^="areaPreference"]{min-height:0!important;padding:12px!important}
.cs-bookwrap label[for^="areaPreference"] button.group img{height:56px!important}
.cs-bookwrap label[for^="areaPreference"] button.group{margin-left:-12px!important;margin-top:-12px!important;margin-bottom:8px!important;width:calc(100% + 24px)!important}
.cs-bookwrap label[for^="areaPreference"] .mt-2{margin-top:6px!important}
.cs-bookwrap ul.grid.items-start{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.cs-bookwrap ul.grid.items-start{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cs-bookwrap .animate-spin{display:none}
.cs-dlg label[for=pickup_datetime]{font-weight:700;font-size:14px}
.cs-dlg [class*="py-12"]{padding-top:4px!important;padding-bottom:4px!important;min-height:0!important}

/* ===== account pages (4 Nov 2026): profile, my addresses, my bookings, loyalty. Shared: .cs-ac, fields, phone control ===== */
.cs-ac{max-width:760px;margin:0 auto;padding:4px 16px 48px}
.cs-ac-narrow{max-width:640px}
.cs-ac-back{display:none;align-items:center;gap:4px;min-height:44px;color:var(--brand-ink);font-weight:700;text-decoration:none;font-size:15px}
.cs-ac-back .cs-i{width:18px;height:18px}
@media (min-width:1024px){.cs-ac-back{display:inline-flex}}
.cs-ac-head{margin:0 0 14px}.cs-ac-head .cs-co-title{margin:10px 0 4px}.cs-ac-head .cs-cap{margin:0}
.cs-ac-head-row{display:flex;align-items:flex-end;gap:12px;justify-content:space-between}
.cs-ac-head-row .cs-btn{flex:none}
.cs-ac-form{display:flex;flex-direction:column;gap:14px}
.cs-ac-sec{padding:18px 16px;display:flex;flex-direction:column;gap:16px}
.cs-ac-sech{font:700 17px/1.2 var(--f-head);color:var(--ink);margin:0}
.cs-ac-who{display:flex;align-items:flex-end;gap:14px}
.cs-ac-who .cs-avatar{width:56px;height:56px;font-size:22px;margin-bottom:0}
.cs-ac-save{display:flex;justify-content:flex-end}
@media (max-width:699px){.cs-ac-save .cs-btn{width:100%}.cs-ac-who .cs-avatar{display:none}}
.cs-in.cs-bad,.cs-phone-box.cs-bad{border-color:var(--bad)}
.cs-in.cs-bad:focus{outline-color:color-mix(in oklab,var(--bad) 40%,transparent)}
.cs-err{display:flex;gap:6px;align-items:flex-start;margin:0;color:var(--bad);font-size:14px;font-weight:600;line-height:1.35}
.cs-err .cs-i{width:16px;height:16px;margin-top:1px}
.cs-hint{margin:0;color:var(--muted);font-size:13.5px;line-height:1.4}
.cs-lnk{color:var(--brand-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
body.cs main textarea.cs-ta,.cs-ta{min-height:96px;padding:12px 14px;resize:vertical;line-height:1.4}
.cs-ro{position:relative}
body.cs main .cs-ro input[readonly],.cs-ro input[readonly]{width:100%;min-height:48px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:0 44px 0 14px;font-size:16px;text-overflow:ellipsis}
body.cs main .cs-ro input[readonly]:focus{outline:3px solid var(--focus);border-color:var(--brand)}
.cs-ro .cs-i{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
/* phone control: one line, one border, one focus ring */
.cs-phone{position:relative}
.cs-phone-box{display:flex;align-items:stretch;height:48px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);overflow:hidden;transition:border-color 120ms}
.cs-phone-box:focus-within{outline:3px solid var(--focus);border-color:var(--brand)}
.cs-phone-code{display:flex;align-items:center;justify-content:space-between;gap:6px;width:96px;flex:none;padding:0 10px 0 14px;background:transparent;color:var(--ink);font:600 16px var(--f-body);border:0;border-right:1.5px solid var(--line);cursor:pointer}
.cs-phone-code:hover{background:var(--surface2)}
.cs-phone-code .cs-i{width:16px;height:16px;color:var(--muted)}
body.cs main .cs-phone-box input,.cs-phone-box input{flex:1;min-width:0;height:100%;min-height:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;padding:0 14px;font-size:16px;color:var(--ink)}
.cs-phone-list{position:absolute;z-index:30;left:0;top:calc(100% + 4px);width:min(260px,100%);max-height:260px;overflow:auto;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.cs-phone-list li{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 12px;border-radius:10px;cursor:pointer;font-weight:600;color:var(--ink)}
.cs-phone-list li:hover{background:var(--surface2)}.cs-phone-list li.cs-on{background:var(--brand-soft);color:var(--brand-ink)}
.cs-phone-list .cs-phone-s{position:sticky;top:-6px;background:var(--surface);padding:6px 0;cursor:default}.cs-phone-list .cs-phone-s:hover{background:var(--surface)}
.cs-phone-list .cs-none{color:var(--muted);cursor:default}
/* addresses */
.cs-ac-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
@media (min-width:700px){.cs-ac-list{display:grid;grid-template-columns:1fr 1fr}}
.cs-adr{display:flex;align-items:flex-start;gap:12px;padding:14px}
.cs-adr-ic{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;flex:none}
.cs-adr-tx{flex:1;min-width:0}
.cs-adr-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cs-adr-lab{font:700 17px/1.25 var(--f-head);margin:0;color:var(--ink);max-width:100%}
.cs-adr-ad{margin:4px 0 0;color:var(--ink2);font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.cs-adr-act{display:flex;gap:6px;flex:none}
.cs-ac-ib{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color 120ms,transform 60ms}
.cs-ac-ib:hover{background:var(--surface2)}.cs-ac-ib:active{transform:scale(.95)}
.cs-ac-ib.bad{color:var(--bad);border-color:color-mix(in oklab,var(--bad) 45%,var(--line))}.cs-ac-ib.bad:hover{background:var(--bad-soft)}
.cs-ac-empty,.cs-bk-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:32px 20px}
.cs-ac-empty .cs-cap,.cs-bk-empty .cs-cap{max-width:34ch;margin:0}
.cs-ac-emh{font:700 19px/1.25 var(--f-head);margin:0;color:var(--ink)}
.cs-ac-sheetform{display:flex;flex-direction:column;min-height:0;flex:1}
.cs-ac-sheetform .cs-bd{flex:1}
.cs-ac-map{position:relative;z-index:0;height:220px;border-radius:12px;border:1px solid var(--line);overflow:hidden}
.cs-ac-search{border:1.5px solid var(--line-strong);border-radius:12px;padding:2px;position:relative;z-index:5}
.cs-btn-danger-fill{background:var(--bad);color:#fff}.cs-btn-danger-fill:hover{filter:brightness(.92)}
html.dark .cs-btn-danger-fill{color:#1b0a08}
/* bookings */
.cs-bks .cs-bklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.cs-bkc{padding:16px}
.cs-bkc-top{display:flex;align-items:flex-start;gap:12px}
.cs-bkc-when{font:800 20px/1.2 var(--f-head);color:var(--ink)}
.cs-bkc-who{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--ink2)}
.cs-bkc-who span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.cs-bkc-who .cs-i{width:16px;height:16px;color:var(--muted)}
/* loyalty */
.cs-loy{--tc:#CD7F32;position:relative;overflow:hidden;border-radius:18px;padding:16px;margin-bottom:12px;background:linear-gradient(135deg,color-mix(in oklab,var(--tc) 16%,var(--surface)),var(--surface) 78%);border:1.5px solid color-mix(in oklab,var(--tc) 45%,var(--line))}
.cs-loy-top{display:flex;align-items:center;gap:14px}
.cs-loy-tx{min-width:0;flex:1}
.cs-loy-name{font:800 28px/1.1 var(--f-head);color:var(--ink);letter-spacing:-.01em}
.cs-loy-next{margin-top:4px;font-size:15px;color:var(--ink2)}.cs-loy-next b{font-weight:800;color:var(--ink)}
.cs-loy-ben{margin-top:2px}
.cs-medal{width:84px;height:84px;flex:none;overflow:visible;animation:cs-medalin 280ms var(--ease) both}
.cs-medal .rb{fill:color-mix(in oklab,var(--tc) 55%,var(--surface))}.cs-medal .rb2{opacity:.75}
.cs-medal .ring{fill:color-mix(in oklab,var(--tc) 72%,#000)}.cs-medal .face{fill:var(--tc)}
.cs-medal .star{fill:color-mix(in oklab,var(--tc) 38%,#1b1405)}
.cs-medal .shine{fill:#fff;opacity:0;animation:cs-shine 4.6s ease-in-out 1s infinite}
.cs-medal .sp{fill:none;stroke:var(--tc);stroke-width:2.2;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:cs-twink 3s ease-in-out infinite}
.cs-medal .sp2{animation-delay:1.3s}
@keyframes cs-medalin{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes cs-shine{0%,50%{transform:translateX(0);opacity:0}58%{opacity:.7}78%{transform:translateX(90px);opacity:0}100%{transform:translateX(90px);opacity:0}}
@keyframes cs-twink{0%,100%{transform:scale(.55);opacity:.35}50%{transform:scale(1);opacity:1}}
.cs-loy-prog{margin-top:14px}
.cs-loy-bar{height:10px;border-radius:99px;background:color-mix(in oklab,var(--tc) 18%,var(--surface2));overflow:hidden}
.cs-loy-bar i{display:block;height:100%;width:var(--w);border-radius:99px;background:linear-gradient(90deg,color-mix(in oklab,var(--tc) 80%,#000),var(--tc));transform-origin:left;animation:cs-fill 900ms var(--ease) .2s both;min-width:0}
@keyframes cs-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cs-loy-lbls{display:flex;justify-content:space-between;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.cs-loy-lbls span:nth-child(2){color:var(--ink);font-weight:800}
.cs-loy-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.cs-stat{padding:12px 14px}.cs-stat-v{font:800 24px/1.15 var(--f-head);color:var(--ink);margin-top:2px;overflow-wrap:anywhere}
.cs-loy-meta{display:flex;align-items:center;gap:6px;margin:10px 2px 14px}.cs-loy-meta .cs-i{width:16px;height:16px}.cs-loy-meta b{color:var(--ink2);font-weight:700}
.cs-ledger{padding:6px 16px 8px}.cs-ledger .cs-ac-sech{padding:12px 0 6px}
.cs-led{list-style:none;margin:0;padding:0}
.cs-led-r{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.cs-led-r:first-child{border-top:0}
.cs-led-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface2);color:var(--ink2)}
.cs-led-ic.ok{background:var(--ok-soft);color:var(--ok)}.cs-led-ic.bad{background:var(--bad-soft);color:var(--bad)}.cs-led-ic .cs-i{width:18px;height:18px}
.cs-led-m{font-weight:700;color:var(--ink);font-size:15px}
.cs-led-p{font:800 17px var(--f-head);white-space:nowrap}.cs-led-p.ok{color:var(--ok)}.cs-led-p.bad{color:var(--bad)}
.cs-led-pg{padding:8px 0}
.cs-led-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 0 22px}
.cs-led-empty .cs-cap{margin:0;max-width:32ch}.cs-led-eh{font:700 17px var(--f-head);margin:6px 0 0;color:var(--ink)}
.cs-led-ill{width:120px;height:90px}
.cs-led-ill .sh{fill:color-mix(in oklab,var(--rest) 18%,transparent)}
.cs-led-ill .coin circle:first-child{fill:var(--accent)}.cs-led-ill .coin .in{fill:color-mix(in oklab,var(--accent) 60%,#fff)}.cs-led-ill .coin .st{fill:color-mix(in oklab,var(--accent) 45%,#8a6200)}
.cs-led-ill .coin{animation:cs-coinfl 3.6s ease-in-out infinite}
.cs-led-ill .sp{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:cs-twink 3s ease-in-out infinite}.cs-led-ill .sp2{animation-delay:1.2s}
@keyframes cs-coinfl{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.cs-medal,.cs-medal *,.cs-loy-bar i,.cs-led-ill,.cs-led-ill *{animation:none!important}.cs-medal .shine{opacity:0}}
/* toast (saved messages) */
body.cs .swal2-popup.swal2-toast{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 14px;font-family:var(--f-body)}
body.cs .swal2-popup.swal2-toast .swal2-title{font-size:15px;font-weight:700;color:var(--ink)}

/* Final review 2: closed bar as in the hifi (above the banner, neutral card) */
.cs-closedbar{background:var(--surface2);border:0;margin:12px 0 0}
.cs-closedbar b{color:var(--ink);font-size:16px}.cs-closedbar .cs-i{color:var(--warn)}
.cs-closedbar .cs-btn{flex:none}
/* Final review 3: phone code list flows inside dialogs instead of being clipped */
.fixed .cs-phone-list{position:static;width:100%;max-height:200px;margin-top:6px}
.cs-dlg .pika-single{z-index:2000}
/* pickup date popup on phone: the calendar docks at the bottom of the screen instead of covering the buttons */
@media (max-width:699px){
  body:has([data-testid=cs-pickup-dialog]) .pika-single.is-bound{position:fixed!important;left:12px!important;right:12px!important;top:auto!important;bottom:12px!important;width:auto!important;z-index:3000}
  body:has([data-testid=cs-pickup-dialog]) .pika-single .pika-lendar{width:100%}
}
.cs-fail{position:fixed;left:12px;right:12px;bottom:84px;z-index:5000;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);color:var(--ink);border:1px solid var(--bad);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);font-weight:600}
@media (min-width:700px){.cs-fail{left:auto;right:24px;bottom:24px;max-width:420px}}

/* Final review 2b: order block (success, payment not completed) as a compact hifi list */
.cs-os-card .rounded-lg.border{border:0;border-radius:0;overflow:visible}
.cs-os-card .divide-y>*{padding:12px 0!important;border-color:var(--line)}
.cs-os-card .divide-y>.p-3:first-child{padding-top:4px!important}
.cs-os-card .cs-os-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.cs-os-card .cs-os-price b{font:700 17px var(--f-head);color:var(--ink)}
.cs-os-card .cs-os-price .cs-cap{font-size:13px}
.cs-os-card [class*="bg-gray-50"]{padding:12px 0 0!important}
.cs-os-card dl{font-size:15px}
.cs-os-card dl.border-t{border-top:1px dashed var(--line-strong);padding-top:12px;margin-top:6px}
.cs-os-card dl.border-t dt,.cs-os-card dl.border-t dd{font:700 20px var(--f-head);color:var(--ink)}
.cs-os-card img.rounded-md,.cs-os-card .w-12.h-12{width:52px;height:52px;border-radius:12px}
.cs-os-card [class*="bg-gray-50"],.cs-os-card [class*="bg-gray-50"]:is(.dark *){background:transparent!important}
.cs-os-card dl.border-t dt,.cs-os-card dl.border-t dd{font-size:20px}
.cs-os-card .space-y-4>.space-y-2{padding:0 0 4px}
/* Final review 2b: order detail and the Payment not completed block in the hifi card style */
.cs-os .cs-odetail>.flex:first-of-type{display:none}
.cs-odetail{font-family:var(--f-body)}
.cs-odetail .cs-od-status{background:var(--surface)!important;border:1.5px solid var(--line);border-radius:12px;box-shadow:none}
.cs-odetail [class*="bg-gray-50"],.cs-odetail [class*="bg-gray-100"]{background:var(--surface)!important}
.cs-odetail .rounded-lg,.cs-odetail .rounded-md{border-radius:12px}
.cs-odetail h3,.cs-odetail h2{font-family:var(--f-head);color:var(--ink)}
.cs-odetail button.text-white,.cs-odetail .bg-skin-base{background:var(--brand);color:var(--on-brand);border-radius:12px;min-height:48px;font-weight:700}
.cs-os .cs-odetail [class*="bg-blue-50"]{display:none}
.cs-os .cs-odetail>div:has(>h2){display:none}
body.cs:has(.cs-rail) .cs-hdr-cart,body:has(.cs-rail) .cs-hdr-cart{display:none!important}

/* Final review 5: dish options dialog frame (dish name + close X, hifi) */
.cs-opt-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cs-opt-title .cs-x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:transparent;color:var(--ink);border:0;cursor:pointer;margin-right:-10px}
.cs-opt-title .cs-x:hover{background:var(--surface2)}
.cs-opts{margin-top:-6px}
.cs-optfoot .cs-btn{width:100%;min-height:52px;font-size:16px}
@media (max-width:639px){
  .jetstream-modal:has([data-testid=dish-options]) .fixed.inset-0{align-items:flex-end}
}
.cs-abouttext{font-size:16px!important;line-height:1.55;color:var(--ink2)}.cs-abouttext *{font-size:inherit}
/* Final review 5: links inside the order type popup are plain bold brand text (hifi), no underline */
.cs-sheet .cs-lnk{text-decoration:none}
/* Final review 5: menu error state shows no order rail (hifi) and the message stays on one line */
body:has(#cs-menu-error:not([style*="none"])) .cs-rail{display:none}
.cs-errstate h3{text-wrap:balance}
@media (min-width:700px){body:has(#cs-menu-error:not([style*="none"])) .cs-list-wrap,body:has(#cs-menu-error:not([style*="none"])) #cs-menu-error{grid-column:1/-1}}

/* Final review 2c: compact loyalty card on the order pages */
.cs-loy{margin-top:14px;padding:14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.cs-loy-top{display:flex;align-items:center;gap:12px}
.cs-loy-ic{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;flex:none}
.cs-loy-t{font:700 16px var(--f-head);color:var(--ink)}
.cs-loy-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:color-mix(in oklab,var(--tc) 16%,var(--surface));color:var(--ink);font-weight:700;font-size:13px}
.cs-loy-chip i{width:10px;height:10px;border-radius:50%;background:var(--tc)}
.cs-loy-bar{height:6px;border-radius:999px;background:var(--surface2);overflow:hidden}
.cs-loy-bar i{display:block;height:100%;background:var(--brand);border-radius:999px}

/* Date picker (Book a table, pickup dialog): Pikaday restyled to the hifi. Scoped to the customer site (body.cs), admin pickers are untouched. */
body.cs .pika-single{font-family:var(--f-body)!important;color:var(--ink)!important;background:var(--surface)!important;border:0!important;border-radius:16px!important;box-shadow:0 18px 50px rgba(20,32,26,.18),0 2px 8px rgba(20,32,26,.08)!important;padding:18px 20px 20px!important;box-sizing:border-box!important;width:320px!important;z-index:3000!important}
html.dark body.cs .pika-single{box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px var(--line)!important}
body.cs .pika-single:before{content:none!important}
body.cs .pika-single .pika-lendar{float:none!important;width:100%!important;margin:0!important}
body.cs .pika-single .pika-title{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;height:44px!important;margin:0 0 6px!important;text-align:center!important}
body.cs .pika-single .pika-label{position:static!important;display:block!important;padding:0 8px!important;margin:0!important;background:none!important;font:600 16px var(--f-head)!important;color:var(--ink)!important;z-index:auto!important}
body.cs .pika-single .pika-label+.pika-label{margin-left:2px!important}
body.cs .pika-single .pika-title select{cursor:pointer!important}
body.cs .pika-single .pika-prev,body.cs .pika-single .pika-next,body.cs .pika-single .pika-prev:hover,body.cs .pika-single .pika-next:hover,body.cs .pika-single .pika-prev.is-disabled,body.cs .pika-single .pika-next.is-disabled{filter:none!important}
body.cs .pika-single .pika-prev,body.cs .pika-single .pika-next{position:absolute!important;top:0!important;width:44px!important;height:44px!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:none!important;background-image:none!important;font-size:0!important;line-height:0!important;color:var(--ink)!important;opacity:1!important;cursor:pointer!important;float:none!important;-webkit-tap-highlight-color:transparent!important;transition:transform .15s ease!important}
body.cs .pika-single .pika-prev{left:-8px!important;right:auto!important}
body.cs .pika-single .pika-next{right:-8px!important;left:auto!important}
body.cs .pika-single .pika-prev:before,body.cs .pika-single .pika-next:before{content:""!important;position:absolute!important;inset:6px!important;border-radius:50%!important;background:var(--surface2)!important;transition:background .15s ease!important}
body.cs .pika-single .pika-prev:after,body.cs .pika-single .pika-next:after{content:""!important;position:absolute!important;inset:6px!important;background:currentColor!important;-webkit-mask:var(--chev) center/16px 16px no-repeat!important;mask:var(--chev) center/16px 16px no-repeat!important}
body.cs .pika-single .pika-prev{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")!important}
body.cs .pika-single .pika-next{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")!important}
body.cs .pika-single .pika-prev:hover:before,body.cs .pika-single .pika-next:hover:before{background:var(--brand-soft)!important}
body.cs .pika-single .pika-prev:active,body.cs .pika-single .pika-next:active{transform:scale(.97)!important}
body.cs .pika-single .pika-prev.is-disabled,body.cs .pika-single .pika-next.is-disabled{opacity:.3!important;cursor:default!important;pointer-events:none!important}
body.cs .pika-single .pika-prev:focus-visible,body.cs .pika-single .pika-next:focus-visible{outline:2px solid var(--focus)!important;outline-offset:0!important}
body.cs .pika-single .pika-table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;table-layout:fixed!important;border:0!important;animation:cs-pika-in .2s ease-out both!important}
body.cs .pika-single .pika-table th,body.cs .pika-single .pika-table td{width:auto!important;padding:0!important;border:0!important;background:none!important;text-align:center!important}
body.cs .pika-single .pika-table th{height:28px!important;font:600 11px var(--f-body)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--muted)!important;line-height:28px!important}
body.cs .pika-single .pika-table th abbr{text-decoration:none!important;border:0!important;cursor:default!important}
body.cs .pika-single .pika-table td{height:44px!important;padding:2px 0!important}
body.cs .pika-single .pika-button{position:relative!important;display:grid!important;place-items:center!important;width:40px!important;height:40px!important;margin:0 auto!important;padding:0!important;border:0!important;border-radius:50%!important;background:none!important;color:var(--ink)!important;font:700 15px var(--f-body)!important;text-align:center!important;box-shadow:none!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important;transition:transform .15s ease,background .15s ease,color .15s ease!important}
body.cs .pika-single .pika-button:hover{background:color-mix(in oklab,var(--rest) 22%,var(--surface))!important;color:var(--ink)!important;border-radius:50%!important;box-shadow:none!important}
body.cs .pika-single .pika-button:active{transform:scale(.97)!important}
body.cs .pika-single .pika-button:focus-visible{outline:2px solid var(--focus)!important;outline-offset:2px!important}
body.cs .pika-single .is-today .pika-button{font-weight:700!important;color:var(--ink)!important}
body.cs .pika-single .is-today .pika-button:after{content:""!important;position:absolute!important;left:50%!important;bottom:5px!important;width:4px!important;height:4px!important;margin-left:-2px!important;border-radius:50%!important;background:currentColor!important}
body.cs .pika-single .is-selected .pika-button,body.cs .pika-single .is-selected .pika-button:hover{background:var(--brand)!important;color:var(--on-brand)!important;font-weight:700!important;box-shadow:none!important;border-radius:50%!important}
body.cs .pika-single .is-disabled .pika-button,body.cs .pika-single .is-disabled .pika-button:hover{background:none!important;color:var(--muted)!important;font-weight:500!important;opacity:.55!important;pointer-events:none!important;cursor:default!important;box-shadow:none!important;transform:none!important}
body.cs .pika-single .is-outside-current-month .pika-button{opacity:.4!important}
body.cs .pika-single .cs-pika-done{display:none!important}
@keyframes cs-pika-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.cs .pika-single .pika-table{animation:none!important}body.cs .pika-single .pika-button,body.cs .pika-single .pika-prev,body.cs .pika-single .pika-next{transition:none!important}}
/* phone: the calendar docks at the bottom as a sheet with a grab handle and a Done button */
@media (max-width:699px){
  body.cs .pika-single.is-bound{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;border-radius:20px 20px 0 0!important;padding:8px 20px calc(16px + env(safe-area-inset-bottom))!important;box-shadow:0 0 0 100vmax rgba(10,18,14,.38),0 -10px 40px rgba(0,0,0,.2)!important;z-index:3000!important}
  body.cs .pika-single.is-bound:before{content:""!important;display:block!important;width:40px!important;height:5px!important;border-radius:3px!important;background:var(--line-strong)!important;opacity:.6!important;margin:0 auto 10px!important}
  body.cs .pika-single.is-bound.is-hidden{display:none!important}
  body.cs .pika-single .cs-pika-done{display:block!important;width:100%!important;height:48px!important;margin-top:12px!important;border:0!important;border-radius:12px!important;background:var(--brand)!important;color:var(--on-brand)!important;font:700 16px var(--f-body)!important;cursor:pointer!important}
  body.cs .pika-single .cs-pika-done:active{transform:scale(.97)!important}
  body.cs .pika-single .cs-pika-done:focus-visible{outline:2px solid var(--focus)!important;outline-offset:2px!important}
}

/* Final review 6: legacy options dialog (restaurants not on the rules dialog) in hifi rows */
.cs-hid{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.cs-optlab{cursor:pointer}
.cs-hid:checked + .cs-rd{border-color:var(--brand)}
.cs-hid:checked + .cs-rd::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--brand)}
.cs-hid:checked + .cs-ck{background:var(--brand);border-color:var(--brand)}
.cs-hid:checked + .cs-ck::after{content:"";width:6px;height:11px;border:solid var(--on-brand);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.cs-hid:focus-visible + .cs-box{outline:2px solid var(--brand);outline-offset:2px}
.cs-optlab{position:relative}
.cs-optfoot .cs-btn{width:100%}
/* Final review 6: branch sheet header with close X and the price footnote (all sizes) */
.cs-bsh-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 4px 10px}
.cs-bsh-h .cs-bsh-t{margin:0}
.cs-bsh-x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:transparent;border:0;color:var(--ink);cursor:pointer;margin-right:-8px}
.cs-bsh-x:hover{background:var(--surface2)}
.cs-bsh-note{padding:10px 8px 4px;color:var(--muted);text-align:center}
/* menu search placeholder: never clipped, fits 320px */
.cs-search input{text-overflow:ellipsis;font-size:16px}
@media (max-width:360px){.cs-search input{padding-left:40px;padding-right:8px}}
@media (max-width:360px){.cs-tools{flex-wrap:wrap}.cs-tools .cs-search{flex:1 1 100%;min-width:0}}
/* variations dialog: plain list, no table header */
body.cs .jetstream-modal thead{display:none!important}
/* Final review 6: details and options dialogs fit the screen: the panel scrolls inside, nothing is cut off on tablet landscape and desktop */
body.cs .jetstream-modal:has(.cs-dlg,.cs-opts)>div:last-child{margin-top:max(16px,calc((100dvh - 760px)/2));max-height:calc(100dvh - 32px);overflow-y:auto}
body.cs .jetstream-modal:has(.cs-dlg,.cs-opts) .cs-optfoot{position:sticky;bottom:0}
body.cs .jetstream-modal .cs-dlg-act{position:sticky;bottom:0;background:var(--surface);padding-top:12px;margin-top:12px}