:root{--bg:#0b0b0b;--card:#171717;--card2:#202020;--line:#2e2e2e;--text:#f4f1e8;--muted:#b3ad9c;--gold:#F2C200;--gold2:#ffd83d;--ink:#111;--ok:#5cc58a;--bad:#ff7a6b;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0b0b0b;--card:#171717}}
:root[data-theme="dark"]{--bg:#0b0b0b;--card:#171717}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Heebo,"Arial Hebrew",Arial,sans-serif;font-size:18px;line-height:1.5}
button{font-family:inherit;font-size:17px;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:18px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:2px solid var(--gold);padding:12px 16px 10px}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand h1{margin:0;font-size:26px;font-weight:800;color:var(--gold)}
.brand span{color:var(--muted);font-size:16px}
.search{margin-top:10px;width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}
.chip{flex:none;padding:8px 14px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:16px;white-space:nowrap}
.chip.on{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}
main{max-width:1100px;margin:0 auto;padding:14px 12px 120px}
.notice{background:#2a2410;border:1px solid #6b5a12;color:#ffe7a0;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:17px}
h2.cat{color:var(--gold);font-size:22px;margin:22px 4px 10px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#000;display:block}
.cb{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.pn{font-weight:700;font-size:18px;line-height:1.3}
.pp{color:var(--gold2);font-size:16px}
.step{display:flex;align-items:center;justify-content:space-between;background:var(--card2);border-radius:10px;padding:4px;margin-top:auto}
.step button{width:42px;height:44px;flex:none;border-radius:8px;border:0;background:#333;color:var(--text);font-size:24px;line-height:1}
.step b{font-size:17px;white-space:nowrap}
.add{height:46px;border-radius:10px;border:0;background:var(--gold);color:var(--ink);font-weight:700}
.add.in{background:#2f3d2a;color:#bfe8a8}
.line{font-size:16px;color:var(--muted);text-align:center}
.bar{position:fixed;inset-inline:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line);z-index:6}
.bar button{width:100%;max-width:700px;display:flex;justify-content:space-between;margin:0 auto;height:56px;align-items:center;padding:0 18px;border-radius:12px;border:0;background:var(--gold);color:var(--ink);font-weight:800;font-size:19px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;max-width:700px;margin:0 auto 14px}
.ci{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.ci img{width:64px;height:48px;object-fit:cover;border-radius:8px}
.ci .t{flex:1;min-width:0}
.ci .t div:first-child{font-weight:700}
.x{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;height:40px;padding:0 10px}
label.f{display:block;margin:14px 0 6px;font-weight:500}
.inp{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--text)}
.err{color:var(--bad);font-size:15px;margin-top:4px;min-height:1em}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{flex:1;min-width:120px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--text);text-align:center}
.opt.on{border-color:var(--gold);background:#2a2410;color:var(--gold2);font-weight:700}
.big{width:100%;height:56px;border-radius:12px;border:0;background:var(--gold);color:var(--ink);font-weight:800;font-size:19px;margin-top:18px}
.big:disabled{background:#555;color:#aaa}
.ghost{width:100%;height:50px;border-radius:12px;border:1px solid var(--line);background:none;color:var(--text);margin-top:10px}
.tot{display:flex;justify-content:space-between;font-size:20px;font-weight:800;margin-top:12px}
.small{font-size:15px;color:var(--muted)}
footer{text-align:center;color:var(--muted);font-size:15px;padding:20px 0 90px}
footer button{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:15px}
.tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.oc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.oc.new{border:2px solid var(--gold)}
.oh{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}
.st{padding:3px 10px;border-radius:14px;font-size:15px;font-weight:700;background:#333}
.st.new{background:var(--gold);color:var(--ink)}.st.done{background:#244a33;color:#bfe8a8}.st.cancel{background:#4a2424;color:#ffb3aa}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.acts button,.acts a{flex:1;min-width:130px;height:46px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--text);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:16px}
.acts .pri{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}
.acts .wa{background:#1f3a2a;color:#bfe8a8}
.items{margin:8px 0;padding:0;list-style:none;font-size:17px}
.items li{padding:3px 0;border-bottom:1px dashed var(--line)}

.home{max-width:760px;margin:0 auto;text-align:center;padding:10px 4px 40px}
.home .logo{width:190px;max-width:55%;display:block;margin:6px auto 0}
.home h1,.home h2{font-size:40px;font-weight:800;color:var(--gold);margin:6px 0 0;line-height:1.1}
.home .city{letter-spacing:.35em;color:var(--muted);font-size:18px;margin-top:6px}
.home .orderline{font-size:32px;font-weight:800;color:#fff;margin:16px 0 0;line-height:1.2}
.home .tag{letter-spacing:.3em;color:var(--gold2);font-size:14px;margin:14px 0 0}
.home .hero{width:100%;border-radius:16px;margin:18px 0 6px;display:block}
.home p.about{font-size:19px;line-height:1.7;margin:14px 6px;text-align:right}
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.hl div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 6px;font-weight:700;font-size:17px;color:var(--gold2)}
.home .go{width:100%;height:64px;border-radius:14px;border:0;background:var(--gold);color:var(--ink);font-weight:800;font-size:22px;margin-top:10px}
.contact{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:18px;line-height:1.9}
.contact a{color:var(--gold2)}
.hdrlogo{height:40px;width:auto;border-radius:6px;cursor:pointer}
.brand{align-items:center}
.list{display:flex;flex-direction:column;gap:10px}
.row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;gap:12px;align-items:center}
.row img{width:92px;height:92px;flex:none;border-radius:10px;object-fit:cover;background:#0c0c0c;cursor:zoom-in}
.row .rb{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.row .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.row .ctl{display:flex;gap:8px;align-items:center}
.row .step{margin:0;flex:1}
.row .add{height:44px;padding:0 12px;flex:none;min-width:92px;font-size:16px}
.out{color:var(--bad);font-weight:700;font-size:16px}
@media (min-width:760px){.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:14px}
.row{flex-direction:column;align-items:stretch}.row img{width:100%;height:auto;aspect-ratio:1/1}.row .ctl{flex-direction:column;align-items:stretch}.row .add{width:100%}}
.zoom{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;flex-direction:column;gap:12px}
.zoom img{max-width:min(92vw,560px);max-height:75vh;border-radius:14px}
.zoom div{font-size:22px;font-weight:700;color:var(--gold)}
.mrow{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mrow img{width:52px;height:52px;border-radius:8px}
.mrow .nm{flex:1;min-width:140px;font-weight:500}
.mrow input{width:96px}
.mrow select{padding:10px;border-radius:10px;background:var(--card2);color:var(--text);border:1px solid var(--line)}
.mrow .sv{height:44px;padding:0 14px;border-radius:10px;border:0;background:var(--gold);color:var(--ink);font-weight:700}
.alarm{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:24px 16px;overflow:auto;animation:flash 1s steps(2,start) infinite;color:#fff}
@keyframes flash{0%{background:#c00000}50%{background:#ff2a2a}100%{background:#c00000}}
.alarm h2{font-size:44px;margin:6px 0 4px;font-weight:800;text-align:center}
.alarm .sub{font-size:20px;margin-bottom:14px;text-align:center}
.alarm .ao{background:#111;border:3px solid var(--gold);border-radius:16px;padding:16px;width:100%;max-width:620px;margin-bottom:14px;color:var(--text)}
.alarm .ao b{color:var(--gold)}
.alarm .acc{width:100%;height:70px;border-radius:14px;border:0;background:var(--gold);color:#111;font-size:26px;font-weight:800;margin-top:12px}
.alarm .times{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.alarm .times button{height:64px;border-radius:12px;border:0;background:#fff;color:#111;font-size:21px;font-weight:800}
.alarm .snd{height:56px;border-radius:12px;border:3px solid #fff;background:#111;color:#fff;font-size:20px;font-weight:700;padding:0 20px;margin-bottom:14px}
.reob{width:100%;margin-top:12px;min-height:72px;height:auto;padding:12px 18px;border-radius:14px;border:2px solid var(--gold);background:#1a1606;color:var(--gold2);display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer}
.reob .ri{font-size:30px;line-height:1}
.reob .rt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;text-align:right}
.reob .rt b{font-size:21px;font-weight:800;color:var(--gold)}
.reob .rt small{font-size:16px;color:var(--text)}
.hidden{display:none!important}

/* Local runtime indicator; the client visual design above is preserved. */
.local-status{padding:5px 12px;text-align:center;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);background:var(--bg)}
.local-status[data-state="offline"]{color:var(--bad)}
/* Keep the original product rows usable when all controls cannot fit side by side. */
@media (max-width:480px){
  .row .ctl{flex-direction:column;align-items:stretch}
  .row .step{flex:none}
  .row .add{min-width:0;width:100%}
  .row .top{flex-wrap:wrap;gap:2px 8px}
}
@media (max-width:350px){
  .row{gap:8px;padding:8px}
  .row img{width:76px;height:76px}
  .row .step button{width:36px}
  .brand h1{font-size:23px}
}

/* Local fonts avoid sending visitors' network metadata to a font provider. */
@font-face{font-family:Heebo;font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/heebo-400.ttf') format('truetype')}
@font-face{font-family:Heebo;font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/heebo-500.ttf') format('truetype')}
@font-face{font-family:Heebo;font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/heebo-700.ttf') format('truetype')}
@font-face{font-family:Heebo;font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/heebo-800.ttf') format('truetype')}

/* Visible controls and predictable keyboard navigation across all views. */
a{color:var(--gold2);text-underline-offset:.2em;overflow-wrap:anywhere}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 6px #111}
[tabindex="-1"]:focus{outline:3px solid var(--gold);outline-offset:3px}
button,input,select,textarea,a{touch-action:manipulation;scroll-margin-block:12rem 7rem}
button{min-height:44px}
input::placeholder,textarea::placeholder{color:#bababa;opacity:1}
input,select,textarea{max-width:100%;min-width:0}
.inp,.search,.chip,.opt,.x,.ghost,.step button,.mrow select,.acts button,.acts a{border:1px solid #858176}
.x{height:auto;min-height:44px;color:var(--text)}
.big,.ghost,.home .go,.bar button,.acts button,.acts a{height:auto;min-height:50px;padding-block:12px;white-space:normal}
.bar button{min-height:56px;gap:12px}
.brand-home{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:3px;background:transparent;border:0;border-radius:6px}
.brand-home .hdrlogo{display:block}
.product-zoom{display:block;border:0;padding:0;background:transparent;border-radius:10px;flex:none;width:92px;cursor:zoom-in}
.row .product-zoom img{width:100%;height:auto;aspect-ratio:1;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;inset-block-start:8px;inset-inline-start:12px;padding:12px 20px;background:var(--gold);color:#111;z-index:100;transform:translateY(-180%);border-radius:6px;font-weight:700}
.skip-link:focus{transform:translateY(0)}
.chips{scrollbar-width:auto;padding-bottom:8px}
.site-footer{padding:20px 16px 120px;border-top:1px solid var(--line)}
.site-footer nav{display:flex;justify-content:center;gap:8px 24px;flex-wrap:wrap}
.site-footer a{display:inline-flex;align-items:center;min-height:44px}
.payment-brands{display:flex;justify-content:center;align-items:center;gap:12px;margin:18px 0 8px;direction:ltr}
.payment-brands img{display:block;width:76px;height:48px}
.payment-brands-note{font-size:.85rem;color:var(--muted);text-align:center;margin:8px 0 0}
main{padding-bottom:32px}
.remember-details{display:flex;align-items:flex-start;gap:10px;margin-top:16px;text-align:start;cursor:pointer}
.remember-details input{width:24px;height:24px;flex:none;accent-color:var(--gold)}
[aria-invalid="true"]{border-color:var(--bad)}
#checkout-errors:not([hidden]){border:2px solid var(--bad);border-radius:8px;padding:12px;margin-block:12px;color:var(--text)}
#checkout-errors p{margin:0}
#checkout-errors a{display:inline-block;padding-block:5px}
.zoom,.staff-dialog{overflow:auto;max-height:100dvh;overscroll-behavior:contain}
.zoom img{max-height:60dvh;object-fit:contain;flex-shrink:1;min-height:0}
.alarm{animation:none;background:#720b0b}
.legal-page{max-width:800px;padding-block:24px 48px;overflow-wrap:anywhere}
.legal-page h1{font-size:2rem;color:var(--gold);line-height:1.3}
.legal-page h2{font-size:1.4rem;margin-top:32px;color:var(--gold2)}
.legal-page p,.legal-page li{line-height:1.8}
.legal-page li+li{margin-top:8px}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-block:20px}
.legal-nav a{min-height:44px;display:inline-flex;align-items:center}
.legal-updated{color:var(--muted)}
.privacy-note{padding:12px;border:1px solid #858176;border-radius:8px;margin-top:16px}
@media(min-width:760px){.product-zoom{width:100%}}
@media(max-width:759px){
  header{position:static}
  button,input,select,textarea,a{scroll-margin-block:20px 7rem}
  .hl{grid-template-columns:1fr}
  .ci{flex-wrap:wrap;gap:8px}
  .ci .t{flex-basis:calc(100% - 80px)}
  .home .orderline{font-size:clamp(24px,7vw,32px)}
  .home h1,.home h2{font-size:clamp(28px,8vw,40px)}
}
@media(max-width:350px){.product-zoom{width:76px}.row .product-zoom img{width:100%;height:auto}.row .step button{width:44px}.step b{white-space:normal;text-align:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){button,a,input,select,textarea{forced-color-adjust:auto}:focus-visible{outline:3px solid Highlight}.chip.on,.opt.on{border:3px solid Highlight}}
@media print{.skip-link,.bar,.site-footer,.legal-nav{display:none}body{background:white;color:black}.legal-page h1,.legal-page h2,a{color:black}}
