/* web — כללי CSS ייחודיים לעמוד. הבסיס המשותף נמצא ב-assets/css/site.css */
.pg /* ===== page-specific: web ordering hero browser mockup ===== */
  .browser{position:relative; border-radius:22px; background:var(--glass-bg); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); backdrop-filter:blur(20px); overflow:hidden; transition:max-width .4s ease, margin .4s ease; max-width:100%; margin:0 auto}
.pg .browser.mobile{max-width:320px}
.pg .b-chrome{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.03)}
.pg .b-dots{display:flex; gap:6px}
.pg .b-dots i{width:11px; height:11px; border-radius:50%; display:block}
.pg .b-dots i:nth-child(1){background:#f87171}
.pg .b-dots i:nth-child(2){background:#fbbf24}
.pg .b-dots i:nth-child(3){background:#34d399}
.pg .b-addr{flex:1; display:flex; align-items:center; gap:8px; direction:ltr; font-family:var(--mono); font-size:12px; color:var(--muted); background:rgba(2,4,20,.5); border:1px solid var(--line); border-radius:9px; padding:7px 12px; overflow:hidden; white-space:nowrap}
.pg .b-addr .lock{color:var(--emerald); font-size:11px}
.pg .b-toggle{display:inline-flex; gap:3px; padding:3px; border-radius:9px; background:rgba(2,4,20,.5); border:1px solid var(--line)}
.pg .b-toggle button{border:0; background:transparent; color:var(--faint); font-family:var(--font); font-size:12px; font-weight:600; padding:5px 11px; border-radius:7px; cursor:pointer; transition:.18s}
.pg .b-toggle button.on{background:var(--grad-cta); color:#fff}
.pg .b-body{position:relative; padding:18px; min-height:412px}
.pg .b-shop{display:flex; align-items:center; gap:11px; margin-bottom:14px}
.pg .b-shop .logo{width:38px; height:38px; border-radius:11px; background:var(--grad-cta); display:grid; place-items:center; font-size:19px; flex-shrink:0}
.pg .b-shop .nm{font-weight:700; font-size:15px}
.pg .b-shop .op{font-size:11.5px; color:var(--emerald); margin-top:1px; display:flex; align-items:center; gap:5px}
.pg .b-shop .op .d{width:6px;height:6px;border-radius:50%;background:var(--emerald);animation:pulse 2s infinite}
.pg .b-layout{display:grid; grid-template-columns:1fr 232px; gap:16px}
.pg .browser.mobile .b-layout{grid-template-columns:1fr}
.pg .menu-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.pg .browser.mobile .menu-grid{grid-template-columns:repeat(2,1fr)}
.pg .dish{position:relative; padding:12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); text-align:center; overflow:hidden}
.pg .dish .emo{font-size:30px; line-height:1}
.pg .dish .dn{font-weight:700; font-size:13px; margin-top:8px}
.pg .dish .dp{font-size:12px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums}
.pg .dish .add{margin-top:9px; width:100%; border:0; border-radius:9px; padding:6px 0; font-family:var(--font); font-weight:700; font-size:12px; color:#fff; background:var(--grad-cta); cursor:pointer}
.pg .dish.flash::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 40%,rgba(52,211,153,.4),transparent 65%); opacity:0; animation:flash .7s ease}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
.pg .cart{border-radius:16px; background:rgba(2,4,20,.42); border:1px solid var(--line-2); padding:15px; display:flex; flex-direction:column; align-self:start; position:sticky; top:12px}
.pg .cart .ch{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin-bottom:12px}
.pg .cart .ch .bag{font-size:16px}
.pg .cart .ch .cnt{margin-inline-start:auto; font-family:var(--mono); font-size:11px; background:var(--grad-cta); color:#fff; border-radius:999px; padding:2px 9px; min-width:22px; text-align:center}
.pg .cart-items{display:flex; flex-direction:column; gap:8px; min-height:118px}
.pg .ci{display:flex; align-items:center; gap:9px; font-size:12.5px; opacity:0; transform:translateY(6px); animation:rise .4s forwards}
.pg .ci .q{font-family:var(--mono); font-size:11px; color:var(--purple); background:rgba(139,92,246,.14); border:1px solid var(--line-2); border-radius:7px; padding:1px 7px; flex-shrink:0}
.pg .ci .cn{flex:1; color:var(--text)}
.pg .ci .cp{color:var(--muted); font-variant-numeric:tabular-nums}
.pg .cart-empty{color:var(--faint); font-size:12.5px; text-align:center; padding:34px 0}
.pg .cart-tot{display:flex; align-items:baseline; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:var(--muted)}
.pg .cart-tot b{margin-inline-start:auto; font-size:20px; color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; transition:transform .25s}
.pg .cart-tot b.bump{transform:scale(1.16)}
.pg .cart .pay{margin-top:12px; width:100%; border:0; border-radius:11px; padding:11px 0; font-family:var(--font); font-weight:700; font-size:13.5px; color:#fff; background:var(--grad-cta); cursor:pointer; box-shadow:0 12px 30px -12px rgba(139,92,246,.7)}
.pg .b-done{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; background:rgba(2,4,20,.86); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .4s}
.pg .b-done.show{opacity:1; visibility:visible}
.pg .b-done .chk{width:66px; height:66px; border-radius:50%; background:linear-gradient(135deg,var(--emerald),#10b981); display:grid; place-items:center; font-size:34px; box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pulse 1.8s infinite}
.pg .b-done .dt{font-weight:700; font-size:20px}
.pg .b-done .ds{color:var(--muted); font-size:13.5px}
@media (max-width:900px){
  .pg .b-layout{grid-template-columns:1fr}
  .pg .cart{position:static}
}
@media (prefers-reduced-motion:reduce){
  .pg .ci{opacity:1; transform:none}
  .pg .dish.flash::after{display:none}
}
.pg /* match homepage header exactly (eliminate jump between pages) */
  nav{position:fixed; top:0; left:0; right:0; background:transparent; border-bottom:1px solid transparent; -webkit-backdrop-filter:none; backdrop-filter:none}
.pg /* nav links = plain text like the homepage (no pill padding -> no width/position jump) */
  .nav-links a{padding:0 !important; border-radius:0 !important; background:none !important; font-size:.9rem; font-weight:500; color:var(--muted); transition:color .15s}