/* ProPay restaurant kiosk — dark operational glass with a live food builder. */
@font-face{font-family:"Heebo Local";src:url("/assets/fonts/landing/heebo-hebrew.woff2") format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Heebo Local";src:url("/assets/fonts/landing/heebo-latin.woff2") format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope Local";src:url("/assets/fonts/landing/manrope-latin.woff2") format("woff2");font-weight:300 900;font-display:swap}

:root{
    --primary:#5d78ff;--secondary:#7657e8;--primary-rgb:93,120,255;
    --bg:#080a14;--bg2:#11162b;
    --card:rgba(255,255,255,.04);--card-hover:rgba(255,255,255,.07);--border:rgba(255,255,255,.08);--border-hover:rgba(255,255,255,.16);
    --text:#fff;--text2:#a7aec4;--muted:#697089;
    --success:#10b981;--error:#ef4444;--leaf:#8fd05a;
    --glow:rgba(var(--primary-rgb),.25);--radius:16px;
    --header:78px;
}
*{box-sizing:border-box;font-family:"Heebo Local","Heebo","Inter",-apple-system,BlinkMacSystemFont,sans-serif}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--text)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--glow);outline-offset:2px}
svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.num{font-family:"Manrope Local","Heebo Local",sans-serif;direction:ltr}

/* ===== shell + background effects (Menu) ===== */
.kiosk-app{position:relative;width:100%;height:100%;display:grid;grid-template-rows:var(--header) minmax(0,1fr);background:var(--bg);overflow:hidden;isolation:isolate}
.kiosk-app:before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:60px 60px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent);pointer-events:none}
.kiosk-app:after{content:"";position:absolute;z-index:0;width:420px;height:420px;top:-120px;right:6%;background:rgba(var(--primary-rgb),.13);border-radius:50%;filter:blur(90px);pointer-events:none;animation:orb 20s ease-in-out infinite}
@keyframes orb{0%,100%{transform:translate(0,0)}33%{transform:translate(20px,-20px)}66%{transform:translate(-15px,15px)}}

/* ===== header ===== */
.app-header{position:relative;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 16px;background:rgba(16,14,7,.86);border-bottom:1px solid var(--border);backdrop-filter:blur(18px)}
.merchant-lockup{display:flex;align-items:center;gap:10px;min-width:0}
.merchant-logo{width:94px;height:34px;padding:0;object-fit:contain;background:transparent;border-radius:0}
.merchant-lockup>div{display:grid;gap:1px;min-width:0}
.merchant-lockup strong{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.merchant-lockup span{color:var(--text2);font-size:.64rem;white-space:nowrap}

.stepper{margin:0;padding:0;display:flex;justify-content:center;align-items:center;gap:0;list-style:none;min-width:0}
.stepper li{position:relative;display:flex;align-items:center;gap:7px;padding:0 10px;color:var(--muted)}
.stepper li+li:before{content:"";position:absolute;right:-13px;top:50%;width:26px;height:2px;background:var(--border);border-radius:2px}
.stepper li.done+li:before{background:linear-gradient(90deg,var(--secondary),var(--primary))}
.stepper i{position:relative;width:28px;height:28px;display:grid;place-items:center;background:var(--card);border:1px solid var(--border);border-radius:50%;font-style:normal;transition:.3s}
.stepper i b{font:800 .68rem/1 "Manrope Local",sans-serif;color:var(--text2)}
.stepper i svg{position:absolute;width:15px;stroke-width:2.6;stroke:#fff;opacity:0;transform:scale(.5);transition:.25s}
.stepper span{display:grid;gap:0;line-height:1.05}
.stepper strong{font-size:.68rem;font-weight:800}
.stepper small{font-size:.5rem;color:var(--muted)}
.stepper li.active{color:var(--text)}
.stepper li.active i{border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 0 18px var(--glow)}
.stepper li.active i b{color:#fff}
.stepper li.active small{color:var(--text2)}
.stepper li.done{color:var(--text2)}
.stepper li.done i{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.45)}
.stepper li.done i b{opacity:0}
.stepper li.done i svg{opacity:1;transform:scale(1)}

.header-actions{display:flex;gap:6px;direction:ltr}
.header-icon{width:42px;height:42px;display:grid;place-items:center;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:11px;transition:.2s}
.header-icon:hover{background:var(--card-hover);border-color:var(--border-hover)}
.header-icon svg{width:20px;stroke-width:1.8}
.header-icon span{font:800 .66rem/1 "Manrope Local",sans-serif}
.demo-trigger{color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:transparent;box-shadow:0 0 18px var(--glow)}
.demo-trigger svg{fill:currentColor;stroke:none}
.demo-trigger.running{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(var(--primary-rgb),.12)}}

/* ===== category rail (side, Menu language) ===== */
.ordering-layout{position:relative;z-index:1;min-height:0;display:grid;grid-template-columns:120px minmax(0,1fr);direction:rtl}
.category-rail{position:relative;z-index:8;min-height:0;padding:12px 8px 10px;display:flex;flex-direction:column;gap:7px;background:rgba(16,14,7,.72);border-left:1px solid var(--border);backdrop-filter:blur(12px);overflow-y:auto;scrollbar-width:none}
.category-rail::-webkit-scrollbar{display:none}
.rail-title{padding:2px 4px 6px;color:var(--muted);font-size:.58rem;font-weight:800;text-align:center;letter-spacing:.04em}
.rail-list{display:flex;flex-direction:column;gap:7px}
.category-button{position:relative;min-height:78px;padding:9px 6px;display:grid;place-items:center;gap:4px;color:var(--text2);background:var(--card);border:1px solid var(--border);border-radius:14px;font-size:.7rem;font-weight:600;transition:.3s}
.category-button:hover{color:var(--text);border-color:var(--primary);background:var(--card-hover)}
.category-button .category-icon{width:30px;height:30px;display:grid;place-items:center}
.category-button .category-icon svg{width:30px;height:30px;stroke-width:1.9}
.category-button small{position:absolute;top:6px;left:7px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;color:var(--text2);background:rgba(255,255,255,.08);border-radius:99px;font:700 .52rem/1 "Manrope Local",sans-serif}
.category-button.active{color:#fff;background:linear-gradient(150deg,rgba(var(--primary-rgb),.34),rgba(154,106,43,.22));border-color:rgba(var(--primary-rgb),.5);box-shadow:inset 3px 0 0 var(--primary),0 0 22px var(--glow)}
.category-button.active small{color:#2b1d07;background:var(--primary)}
.rail-brand{margin-top:auto;padding-top:9px;display:grid;place-items:center;gap:2px;border-top:1px solid var(--border);color:var(--muted);font-size:.48rem}
.rail-brand img{width:62px;height:auto;opacity:.85}

/* ===== catalog ===== */
.catalog{position:relative;min-width:0;min-height:0;padding:14px 16px 104px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a3325 transparent}
html.embedded .catalog{scrollbar-width:none}
html.embedded .catalog::-webkit-scrollbar{display:none}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.catalog-toolbar>div{display:grid;gap:1px;min-width:0}
.catalog-kicker{color:var(--primary);font-size:.62rem;font-weight:800;letter-spacing:.02em}
.catalog h1{margin:0;font-size:clamp(1.3rem,4vw,1.9rem);font-weight:800;letter-spacing:-.03em;line-height:1;background:linear-gradient(135deg,#fff,#b8ae9c);-webkit-background-clip:text;background-clip:text;color:transparent}
.search-button{height:42px;padding:0 6px 0 12px;display:flex;align-items:center;gap:8px;color:var(--text2);background:var(--card);border:1px solid var(--border);border-radius:12px;transition:.3s;white-space:nowrap}
.search-button:hover{border-color:var(--primary);color:var(--text);box-shadow:0 0 18px var(--glow)}
.search-button svg{width:17px;stroke-width:1.9}
.search-button span{font-size:.68rem;font-weight:600}
.search-button kbd{width:26px;height:26px;display:grid;place-items:center;background:rgba(255,255,255,.06);border-radius:7px;font:700 .7rem/1 sans-serif}

.subcategory-row{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.subcategory-row::-webkit-scrollbar{display:none}
.subcategory-row:empty{display:none}
.subcategory-row button{flex:0 0 auto;padding:6px 12px;color:var(--text2);background:transparent;border:1px solid var(--border);border-radius:50px;font-size:.62rem;font-weight:600;transition:.25s}
.subcategory-row button.active{color:var(--primary);border-color:rgba(var(--primary-rgb),.5);background:rgba(var(--primary-rgb),.1)}

.featured-strip{position:relative;min-height:86px;margin-bottom:12px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;background:linear-gradient(125deg,var(--primary),var(--secondary));border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px var(--glow)}
.featured-strip:before{content:"";position:absolute;width:150px;height:150px;left:-45px;top:-60px;background:rgba(255,255,255,.14);border-radius:50%}
.featured-strip[hidden]{display:none}
.featured-copy{position:relative;display:grid;gap:2px}
.featured-copy span{color:rgba(255,255,255,.75);font-size:.58rem;font-weight:800}
.featured-copy strong{font-size:.9rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.featured-copy small{color:rgba(255,255,255,.8);font-size:.6rem}
.featured-action{position:relative;height:36px;padding:0 12px;display:flex;align-items:center;gap:5px;color:#2b1d07;background:#fff;border:0;border-radius:10px;font-size:.66rem;font-weight:800;white-space:nowrap}
.featured-action svg{width:15px;stroke-width:2;transform:rotate(180deg)}

.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.product-card{position:relative;min-width:0;padding:0;text-align:right;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 2px 12px rgba(0,0,0,.2);overflow:hidden;backdrop-filter:blur(10px);transition:all .3s cubic-bezier(.4,0,.2,1);animation:card-in .35s ease both}
@keyframes card-in{from{opacity:0;transform:translateY(8px)}}
.product-card:hover{transform:translateY(-4px);border-color:var(--border-hover);box-shadow:0 8px 32px rgba(0,0,0,.3),0 0 20px var(--glow)}
.product-media{position:relative;display:block;width:100%;aspect-ratio:1/.82;overflow:hidden;background:linear-gradient(135deg,#10152c,#18143a)}
.product-media img{width:100%;height:100%;display:block;object-fit:cover}
.product-media.illustrated{display:grid;place-items:center;color:rgba(var(--primary-rgb),.85)}
.product-media.illustrated svg{width:44%;height:44%;stroke-width:1.5}
.hero-product .product-media img{object-position:center 54%}
.product-media i{position:absolute;top:8px;right:8px;padding:4px 8px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:99px;font-size:.52rem;font-style:normal;font-weight:800;box-shadow:0 3px 12px var(--glow)}
.product-body{min-height:58px;padding:9px 10px 8px;display:flex;align-items:start;justify-content:space-between;gap:6px}
.product-body>span{min-width:0;display:grid;gap:2px}
.product-body strong{font-size:.76rem;font-weight:700;line-height:1.15}
.product-body small{color:var(--text2);font-size:.56rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-body b{color:var(--primary);font:800 .74rem/1 "Manrope Local",sans-serif;direction:ltr;white-space:nowrap}
.quick-add{position:absolute;left:8px;bottom:8px;width:28px;height:28px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:9px;box-shadow:0 4px 14px var(--glow)}
.quick-add svg{width:15px;stroke-width:2.1}
.product-cta{min-height:32px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;color:var(--primary);background:rgba(var(--primary-rgb),.08);border-top:1px solid rgba(var(--primary-rgb),.18);font-size:.58rem;font-weight:800}
.product-cta svg{width:16px;stroke-width:2}
.catalog-empty{padding:40px 10px;display:grid;justify-items:center;gap:4px;color:var(--text2);text-align:center}
.catalog-empty strong{color:var(--text)}
.catalog-empty span{font-size:.7rem}

/* ===== cart dock ===== */
.cart-dock{position:absolute;z-index:28;left:14px;right:14px;bottom:12px;min-height:68px;padding:9px 12px;display:grid;grid-template-columns:44px 1fr auto 18px;align-items:center;gap:9px;color:#fff;text-align:right;background:rgba(17,17,19,.92);border:1px solid var(--border-hover);border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(var(--primary-rgb),.08);backdrop-filter:blur(16px)}
.cart-dock.bump{animation:bump .45s cubic-bezier(.2,1.4,.3,1)}
@keyframes bump{40%{transform:scale(1.03)}}
.cart-icon{position:relative;width:43px;height:43px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:12px;box-shadow:0 0 18px var(--glow)}
.cart-icon svg{width:23px;stroke-width:1.8}
.cart-icon i{position:absolute;top:-6px;left:-6px;min-width:19px;height:19px;padding:0 4px;display:grid;place-items:center;color:#fff;background:var(--success);border:2px solid #111113;border-radius:99px;font:800 .55rem/1 "Manrope Local",sans-serif;font-style:normal}
.cart-dock>span:nth-child(2){min-width:0;display:grid;gap:1px}
.cart-dock strong{font-size:.78rem;font-weight:700}
.cart-dock small{color:var(--text2);font-size:.57rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-dock>b{color:var(--primary);font:800 .98rem/1 "Manrope Local",sans-serif;direction:ltr}
.cart-arrow{width:17px;stroke-width:2;transform:rotate(180deg);color:var(--text2)}

/* ===== overlays shared ===== */
.back-button{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--card);border:1px solid var(--border);border-radius:11px}
.back-button svg{width:20px;stroke-width:2}
@keyframes panel-in{from{opacity:0;transform:translateX(-30px)}}
@keyframes fade-up{from{opacity:0;transform:translateY(12px)}}

/* ===== search panel ===== */
.search-panel{position:absolute;z-index:55;inset:0;display:grid;grid-template-rows:74px minmax(0,1fr);background:var(--bg);animation:fade-up .3s cubic-bezier(.2,.78,.2,1) both}
.search-panel[hidden]{display:none}
.search-head{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;padding:14px 14px 10px;background:rgba(16,14,7,.8);border-bottom:1px solid var(--border)}
.search-field{position:relative;height:48px;padding:0 14px;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);border:1px solid rgba(var(--primary-rgb),.5);border-radius:14px;box-shadow:0 0 0 4px rgba(var(--primary-rgb),.12)}
.search-field>svg{width:19px;stroke-width:2;color:var(--primary);flex:0 0 auto}
.search-field span{min-width:0;flex:1;font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-field span.placeholder{color:var(--muted);font-weight:500}
.search-field .caret{width:2px;height:22px;background:var(--primary);border-radius:2px;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.search-field button{width:28px;height:28px;display:grid;place-items:center;color:var(--text);background:rgba(255,255,255,.08);border:0;border-radius:50%;font-size:1.1rem;line-height:1}
.search-field button[hidden]{display:none}
.search-body{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
.search-results{min-height:0;padding:12px 16px 14px;overflow-y:auto;scrollbar-width:none}
.search-results::-webkit-scrollbar{display:none}
.search-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.search-chips button{padding:7px 12px;color:var(--text2);background:var(--card);border:1px solid var(--border);border-radius:50px;font-size:.64rem;font-weight:600;transition:.25s}
.search-chips button:hover,.search-chips button.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--secondary))}
.search-meta{margin-bottom:10px;color:var(--text2);font-size:.66rem;font-weight:600}
.search-meta mark{color:var(--primary);background:none}
.keyboard{display:grid;gap:6px;padding:10px 12px 14px;background:rgba(17,17,19,.92);border-top:1px solid var(--border);backdrop-filter:blur(14px);direction:rtl}
.keyboard-row{display:flex;justify-content:center;gap:5px}
.keyboard button{flex:1 1 0;max-width:56px;height:46px;display:grid;place-items:center;color:var(--text);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06);border-radius:9px;font-size:1rem;font-weight:600;transition:.12s}
.keyboard button:active{background:var(--primary);color:#2b1d07;transform:scale(.96)}
.keyboard button.wide{flex:2.2 1 0;max-width:none;font-size:.7rem;font-weight:700;color:var(--text2)}
.keyboard button.space{flex:5 1 0;max-width:none}
.keyboard button.go{color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:transparent}
.keyboard button svg{width:20px;stroke-width:2}

/* ===== customizer: counter + commercial sandwich build ===== */
.customizer{position:absolute;z-index:60;inset:0;display:grid;grid-template-rows:72px minmax(0,1fr);background:#0a0b0c;animation:panel-in .34s cubic-bezier(.2,.78,.2,1) both}
.customizer[hidden]{display:none}
.customizer-header{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;padding:10px 16px;background:#111214;border-bottom:1px solid rgba(255,255,255,.09)}
.customizer-header>div{display:grid;gap:1px}
.customizer-header>div span{color:#8e9298;font-size:.59rem}
.customizer-header>div strong{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.customizer-step{padding:6px 10px;color:var(--primary);background:rgba(var(--primary-rgb),.08);border:1px solid rgba(var(--primary-rgb),.3);border-radius:99px;font-size:.59rem;font-weight:800;white-space:nowrap}
.build-layout{min-height:0;display:grid;grid-template-columns:clamp(310px,27vw,370px) minmax(0,1fr);direction:ltr}

/* --- real burger toppings bar --- */
.salad-bar{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:20px 16px 16px;direction:rtl;background:#101113;border-right:1px solid rgba(255,255,255,.1);overflow:hidden}
.bar-head{display:grid;gap:14px}
.bar-title{display:grid;gap:2px;text-align:right}
.bar-title span{color:var(--primary);font-size:.56rem;font-weight:800;letter-spacing:.04em}
.bar-title strong{color:#fff;font-size:1.15rem;font-weight:800;letter-spacing:-.035em}
.counter-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.counter-tabs button{min-width:0;padding:8px 4px;color:#93979c;background:#191b1e;border:1px solid #2b2e32;border-radius:8px;font-size:.59rem;font-weight:750;white-space:nowrap;transition:.2s}
.counter-tabs button.active{color:#211705;background:var(--primary);border-color:var(--primary);box-shadow:0 7px 20px rgba(var(--primary-rgb),.16)}
.bar-hint{display:flex;align-items:center;justify-content:center;gap:7px;color:#878b90;font-size:.57rem;font-weight:650;text-align:center}
.bar-hint i{width:6px;height:6px;background:var(--leaf);border-radius:50%;box-shadow:0 0 0 4px rgba(143,208,90,.1)}
.bar-glass{position:relative;min-height:0;padding:10px;background:#292c30;border:1px solid #4a4e54;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 38px rgba(0,0,0,.4);overflow:hidden}
.bar-glass:before{content:"";position:absolute;z-index:3;inset:0 0 auto;height:38px;background:linear-gradient(180deg,rgba(255,255,255,.13),transparent);pointer-events:none}
.trays{height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:132px;gap:9px;overflow-y:auto;padding:1px 2px 8px;scrollbar-width:thin;scrollbar-color:#62666d transparent;overscroll-behavior:contain}
.tray{position:relative;min-width:0;padding:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;background:#151719;border:1px solid #565b62;border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 5px 12px rgba(0,0,0,.36);text-align:right;transition:.2s}
.tray:hover{border-color:#d2b96d;transform:translateY(-2px)}
.tray-food{position:relative;min-height:0;overflow:hidden;background:#0d0e0f}
.tray-food img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s}
.tray-food:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 38%,rgba(0,0,0,.3));pointer-events:none}
.tray-label{padding:6px 8px 7px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;background:#111315}
.tray-label strong{color:#fff;font-size:.61rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray-label small{color:#8e9399;font-size:.48rem;white-space:nowrap}
.tray-label small.paid{color:var(--primary);font-weight:800}
.tray .pick{position:absolute;z-index:4;top:7px;left:7px;width:23px;height:23px;display:grid;place-items:center;color:#201707;background:var(--primary);border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,.45);font:800 .62rem/1 "Manrope Local",sans-serif;opacity:0;transform:scale(.55);transition:.22s cubic-bezier(.2,1.5,.3,1)}
.tray.on{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--primary-rgb),.38),0 8px 18px rgba(0,0,0,.42)}
.tray.on .pick{opacity:1;transform:none}
.tray.on .tray-food img{transform:scale(1.055)}

/* --- compact side-view sandwich studio --- */
.bagel-stage{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,20vw,270px);gap:14px;padding:16px;direction:ltr;background:#0a0b0c}
.bagel-build{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 62%,#30271d 0,#181512 46%,#0b0c0d 79%);border:1px solid rgba(255,255,255,.1);border-radius:22px;box-shadow:inset 0 0 70px rgba(0,0,0,.5),0 22px 48px rgba(0,0,0,.28);direction:rtl}
.bagel-build:before{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(ellipse at 50% 72%,rgba(232,190,100,.14),transparent 44%),linear-gradient(112deg,rgba(255,255,255,.035),transparent 27%);pointer-events:none}
.studio-copy{position:absolute;z-index:10;top:18px;right:20px;display:grid;gap:2px;text-align:right}
.studio-copy span{color:var(--primary);font:800 .55rem/1 "Manrope Local",sans-serif;letter-spacing:.18em;direction:ltr}
.studio-copy strong{color:rgba(255,255,255,.9);font-size:.84rem;font-weight:750}
.bagel-live{position:absolute;z-index:10;top:18px;left:18px;padding:6px 10px;display:flex;align-items:center;gap:6px;color:#e8e8e8;background:rgba(12,13,14,.7);border:1px solid rgba(255,255,255,.12);border-radius:99px;backdrop-filter:blur(8px);font-size:.53rem;font-weight:700}
.bagel-live i{width:6px;height:6px;background:var(--leaf);border-radius:50%;box-shadow:0 0 0 4px rgba(143,208,90,.13)}
.bagel-assembly{--fill-count:0;position:absolute;z-index:2;inset:58px 12px 8px;isolation:isolate}
.bagel-half{position:absolute;display:block;height:auto;filter:drop-shadow(0 22px 22px rgba(0,0,0,.52));will-change:transform}
.bagel-top{z-index:7;left:50%;bottom:calc(31% + var(--stack-height) + 8px);width:70%;transform:translateX(-50%);transform-origin:center bottom;transition:transform .58s cubic-bezier(.2,.8,.22,1),bottom .58s cubic-bezier(.2,.8,.22,1)}
.bagel-assembly[data-has-solids="false"] .bagel-top{bottom:32.5%}
.bagel-bottom{z-index:2;left:50%;bottom:2%;width:70%;transform:translateX(-50%)}
.build-shadow{position:absolute;z-index:0;left:50%;bottom:1%;width:64%;height:12%;background:radial-gradient(ellipse,rgba(0,0,0,.76),transparent 69%);transform:translate(-50%,46%);filter:blur(10px)}
.filling{position:absolute;z-index:4;left:50%;bottom:22%;width:66%;aspect-ratio:720/180;transform:translateX(-50%);transform-origin:center;pointer-events:none;transition:transform .42s ease,opacity .28s ease}
.layer{position:absolute;inset:0;width:100%;height:100%;transform:translateY(calc(var(--stack-y)*-1)) rotate(var(--tilt)) scale(var(--layer-scale));transform-origin:center;will-change:transform}
.layer img{width:100%;height:100%;display:block;object-fit:contain}
.layer-surface{transform:translateY(26px) rotate(var(--tilt)) scaleX(var(--layer-scale)) scaleY(.54);transform-origin:50% 72%;filter:none}
.layer-solid{filter:drop-shadow(0 10px 9px rgba(0,0,0,.36))}
.layer-sparse img{-webkit-mask-image:none;mask-image:none}
.layer-surface.fresh img{animation:spread-on .88s cubic-bezier(.2,.72,.2,1) both}
.layer-solid.fresh img{animation:topping-land .62s cubic-bezier(.18,1.15,.3,1) both}
.layer.out img{animation:layer-out .28s ease forwards}
@keyframes spread-on{0%{opacity:0;clip-path:inset(0 50%);transform:scaleX(.35);filter:saturate(1.18)}75%{opacity:1;clip-path:inset(0);transform:scaleX(1.02)}100%{clip-path:inset(0);transform:none;filter:none}}
@keyframes topping-land{0%{opacity:0;transform:translateY(-72px) scale(.88) rotate(-2deg);filter:blur(2px)}72%{opacity:1;transform:translateY(4px) scale(1.01) rotate(.4deg)}100%{opacity:1;transform:none;filter:none}}
@keyframes layer-out{to{opacity:0;transform:translateY(-26px) scale(.86)}}
.bagel-assembly.adding .bagel-top{animation:parked-bun .48s cubic-bezier(.2,.8,.3,1)}
@keyframes parked-bun{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-50%) translateY(-7px) rotate(-.6deg)}}
.bagel-assembly[data-add-mode="surface"].adding .bagel-bottom{animation:bread-spread .72s ease}
@keyframes bread-spread{0%,100%{filter:drop-shadow(0 22px 22px rgba(0,0,0,.52))}45%{filter:drop-shadow(0 18px 28px rgba(225,185,92,.35))}}
.bagel-assembly.closing .bagel-top{bottom:calc(30% + var(--stack-height-compact));z-index:40;transform:translateX(-50%) scale(1.01)}
.bagel-assembly.closing .filling{transform:translateX(-50%) scale(.98);opacity:.92}
.bagel-glow{position:absolute;z-index:1;left:50%;top:66%;width:76%;height:36%;background:radial-gradient(ellipse,rgba(244,205,114,.24),transparent 68%);transform:translate(-50%,-50%) scale(.7);opacity:0;pointer-events:none;transition:.42s}
.bagel-glow.show{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
.bagel-ready{position:absolute;z-index:12;left:50%;bottom:17px;padding:7px 14px;color:#241805;background:var(--primary);border-radius:99px;font-size:.62rem;font-weight:800;box-shadow:0 10px 24px rgba(0,0,0,.42);opacity:0;transform:translate(-50%,12px)}
.bagel-ready.show{animation:ready 1.25s ease both}
@keyframes ready{0%{opacity:0;transform:translate(-50%,12px)}18%,74%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-7px)}}
.flying-bite{position:fixed;z-index:999;width:220px;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.48));will-change:transform,opacity}
.flying-bite img{width:100%;display:block}
.flying-bagel{position:fixed;z-index:999;width:112px;height:78px;border-radius:14px;overflow:hidden;background:#16130e;box-shadow:0 14px 30px rgba(0,0,0,.5);pointer-events:none}
.flying-bagel img{width:100%;height:100%;object-fit:contain}

.build-side{min-height:0;padding:16px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;align-content:start;direction:rtl;background:#121315;border:1px solid rgba(255,255,255,.09);border-radius:18px}
.build-head{display:flex;align-items:start;justify-content:space-between;gap:8px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.build-head>div{display:grid;gap:3px;min-width:0}
.build-kicker{color:var(--primary);font-size:.57rem;font-weight:800}
.build-head strong{font-size:.94rem;font-weight:800;letter-spacing:-.025em}
.build-price{font:800 1.18rem/1 "Manrope Local",sans-serif;color:var(--primary);direction:ltr}
.presets{display:flex;flex-wrap:wrap;gap:6px}
.presets button{padding:7px 10px;color:#aeb1b5;background:#191b1e;border:1px solid #2d3034;border-radius:8px;font-size:.57rem;font-weight:700;white-space:nowrap;transition:.2s}
.presets button:hover{color:#211705;background:var(--primary);border-color:var(--primary)}
.chosen{min-height:72px;max-height:100%;display:flex;align-content:start;flex-wrap:wrap;gap:6px;padding:10px;background:#0f1012;border:1px solid #282b2f;border-radius:11px;overflow-y:auto;scrollbar-width:none}
.chosen::-webkit-scrollbar{display:none}
.chosen-empty{color:#8c9095;font-size:.6rem;line-height:1.55}
.chip{display:flex;align-items:center;gap:6px;height:27px;padding:0 6px 0 9px;color:#fff;background:#1b1d20;border:1px solid #32353a;border-radius:99px;font-size:.58rem;font-weight:700;animation:fade-up .22s ease both}
.chip img{width:18px;height:18px;border-radius:50%;object-fit:cover}
.chip b{color:var(--primary);font:800 .55rem/1 "Manrope Local",sans-serif}
.chip i{width:14px;height:14px;display:grid;place-items:center;color:#a8acb1;background:#2b2e32;border-radius:50%;font-style:normal;font-size:.6rem;line-height:1}
.add-cart-button{position:relative;min-height:54px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#211705;background:var(--primary);border:0;border-radius:11px;box-shadow:0 10px 26px rgba(var(--primary-rgb),.16);font-weight:800;overflow:hidden;transition:.25s}
.add-cart-button:hover{transform:translateY(-2px);filter:brightness(1.04)}
.add-cart-button:disabled{opacity:.72}
.add-cart-button span{font-size:.82rem}
.add-cart-button strong{font:800 .96rem/1 "Manrope Local",sans-serif;direction:ltr}

/* ===== cart sheet (Menu bottom sheet) ===== */
.cart-sheet{position:absolute;z-index:70;inset:0}
.cart-sheet[hidden]{display:none}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);border:0;backdrop-filter:blur(4px)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;padding:0 16px 18px;display:grid;gap:10px;background:#111113;border:1px solid var(--border);border-bottom:0;border-radius:24px 24px 0 0;animation:sheet-in .32s ease-out both}
@keyframes sheet-in{from{transform:translateY(100%)}}
.sheet-handle{width:40px;height:4px;margin:12px auto 2px;background:rgba(255,255,255,.15);border-radius:2px}
.sheet-title{display:flex;align-items:center;justify-content:space-between}
.sheet-title>div{display:grid;gap:1px}
.sheet-title span{color:var(--text2);font-size:.58rem}
.sheet-title h2{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.sheet-title button{width:34px;height:34px;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:50%;font-size:1.1rem;line-height:1}
.empty-state{padding:16px;display:grid;gap:2px;text-align:center;color:var(--text2);background:var(--card);border:1px dashed var(--border-hover);border-radius:14px}
.empty-state[hidden]{display:none}
.empty-state strong{color:var(--text);font-size:.8rem}
.empty-state span{font-size:.62rem}
.cart-lines{display:grid;gap:7px}
.cart-line{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;padding:8px;background:var(--card);border:1px solid var(--border);border-radius:13px;animation:fade-up .3s ease both}
.cart-line img,.cart-line .line-icon{width:52px;height:46px;object-fit:cover;object-position:center 58%;border-radius:9px}
.cart-line .line-icon{display:grid;place-items:center;background:linear-gradient(135deg,#10152c,#18143a);color:var(--primary)}
.cart-line .line-icon svg{width:24px;stroke-width:1.6}
.cart-line div{display:grid;gap:2px;min-width:0}
.cart-line strong{font-size:.76rem;font-weight:700}
.cart-line span{color:var(--text2);font-size:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-line b{color:var(--primary);font:800 .82rem/1 "Manrope Local",sans-serif;direction:ltr}
.sheet-total{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid var(--border)}
.sheet-total span{color:var(--text2);font-size:.74rem}
.sheet-total strong{font:800 1.3rem/1 "Manrope Local",sans-serif;direction:ltr}
.checkout-button{min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border:0;border-radius:13px;box-shadow:0 0 30px var(--glow);font-size:.9rem;font-weight:800;transition:.3s}
.checkout-button:hover{transform:translateY(-2px)}
.checkout-button:disabled{opacity:.45;box-shadow:none;cursor:not-allowed;transform:none}
.checkout-button svg{width:18px;stroke-width:2.2;transform:rotate(180deg)}
.checkout-powered{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:.56rem}
.checkout-powered img{width:60px;filter:invert(1) brightness(1.6);opacity:.7}

/* ===== toast ===== */
.toast{position:fixed;z-index:120;left:50%;bottom:92px;max-width:88%;padding:11px 20px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:50px;box-shadow:0 4px 20px var(--glow);font-size:.74rem;font-weight:600;text-align:center;opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== high contrast ===== */
body.high-contrast{--bg:#000;--bg2:#000;--card:#111;--border:rgba(255,255,255,.35);--text2:#e6e6e6;--muted:#cfcfcf}
body.high-contrast .catalog h1{background:none;color:#fff}

/* ===== responsive ===== */
@media(max-width:560px){
    :root{--header:70px}
    .merchant-lockup span,.stepper small{display:none}
    .ordering-layout{grid-template-columns:96px minmax(0,1fr)}
    .category-button{min-height:66px;font-size:.62rem}
    .category-button .category-icon,.category-button .category-icon svg{width:24px;height:24px}
    .stepper li{padding:0 6px}
    .merchant-logo{width:78px;height:30px}
    .header-icon{width:38px;height:38px}
    .search-button span{display:none}
    .product-grid{gap:9px}
    .addon-list{grid-template-columns:1fr}
}
@media(min-width:900px){
    .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1050px){
    .build-layout{grid-template-columns:290px minmax(0,1fr)}
    .bagel-stage{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
    .build-side{grid-template-columns:1fr 1.4fr;grid-template-rows:auto auto;gap:8px 12px;padding:11px 13px}
    .build-head{padding:0 0 8px}
    .presets{align-content:start}
    .chosen{grid-column:1;grid-row:2;max-height:72px}
    .add-cart-button{grid-column:2;grid-row:2}
    .bagel-assembly{inset:52px 10px 6px}
    .bagel-top{left:50%;bottom:calc(31% + var(--stack-height-compact) + 10px);width:74%}
    .bagel-assembly[data-has-solids="false"] .bagel-top{bottom:29%}
    .bagel-bottom{left:50%;bottom:1%;width:74%}
    .filling{left:50%;bottom:21%;width:70%}
    .bagel-assembly.closing .bagel-top{bottom:calc(29% + var(--stack-height-mobile));transform:translateX(-50%) scale(1.01)}
}
@media(max-width:700px){
    .customizer{grid-template-rows:68px minmax(0,1fr)}
    .build-layout{grid-template-columns:1fr;grid-template-rows:220px minmax(0,1fr)}
    .salad-bar{padding:10px 12px;grid-template-rows:auto minmax(0,1fr);gap:8px;border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
    .bar-head{grid-template-columns:auto 1fr;align-items:end;gap:10px}
    .bar-title strong{font-size:.9rem}
    .bar-title span,.bar-hint{display:none}
    .trays{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:120px;grid-template-rows:1fr;overflow-x:auto;overflow-y:hidden}
    .bagel-stage{padding:9px;gap:8px}
    .bagel-top{left:50%;bottom:calc(25% + var(--stack-height-mobile) + 10px);width:78%}
    .bagel-assembly[data-has-solids="false"] .bagel-top{bottom:20%}
    .bagel-bottom{left:50%;bottom:0;width:78%}
    .filling{left:50%;bottom:18%;width:73%}
    .bagel-glow,.bagel-ready{left:50%}
    .bagel-assembly.closing .bagel-top{bottom:calc(23% + var(--stack-height-close));transform:translateX(-50%) scale(1.01)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}