:root{
  --paper:#FFFFFF; --sunk:#F4F6F8; --plate:#F7F8FA; --surface:#FFFFFF;
  --ink:#0A0E14; --strong:#1B222C; --muted:#58616E; --faint:#8A929D;
  --rule:#E2E6EB; --rule-soft:#EDF0F3;
  --accent:#14538F; --accent-soft:#EAF1F8;
  --action:#0A0E14; --action-ink:#FFFFFF;
  --good:#10654B; --good-soft:#E8F3EE; --err:#B3261E;
  --warn:#B3261E; --warn-ink:#FFFFFF; --warn-soft:#FDEBE9;
  --shadow:0 1px 2px rgba(10,14,20,.05), 0 8px 24px -12px rgba(10,14,20,.18);
  --shadow-lift:0 2px 6px rgba(10,14,20,.07), 0 18px 44px -16px rgba(10,14,20,.28);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#0C1116; --sunk:#141B23; --plate:#F7F8FA; --surface:#121921;
  --ink:#E9EDF2; --strong:#D3DAE2; --muted:#98A3B0; --faint:#76818E;
  --rule:#222C36; --rule-soft:#1B242D;
  --accent:#7DB4E6; --accent-soft:#13283A;
  --action:#E9EDF2; --action-ink:#0A0E14;
  --good:#4FBE98; --good-soft:#12302A; --err:#F2A9A2;
  --warn:#F2A9A2; --warn-ink:#0A0E14; --warn-soft:#3A1C19;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 18px 44px -16px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --paper:#0C1116; --sunk:#141B23; --plate:#F7F8FA; --surface:#121921;
  --ink:#E9EDF2; --strong:#D3DAE2; --muted:#98A3B0; --faint:#76818E;
  --rule:#222C36; --rule-soft:#1B242D;
  --accent:#7DB4E6; --accent-soft:#13283A;
  --action:#E9EDF2; --action-ink:#0A0E14;
  --good:#4FBE98; --good-soft:#12302A; --err:#F2A9A2;
  --warn:#F2A9A2; --warn-ink:#0A0E14; --warn-soft:#3A1C19;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 18px 44px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink); direction:rtl;
  font-family:"Assistant",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 0;
}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:none; padding:0;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; direction:ltr; unicode-bidi:isolate}
.n{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ שער כניסה ============ */
#gate{min-height:100dvh; display:grid; place-items:center; padding:28px 20px; background:var(--paper)}
.gate-card{width:100%; max-width:420px}
.gate-mark{display:flex; align-items:baseline; gap:9px; margin-bottom:34px}
.gate-mark b{font-size:1.4rem; font-weight:800; letter-spacing:-.02em}
.gate-mark span{font-size:10px; font-weight:700; letter-spacing:.22em;
  color:var(--faint); text-transform:uppercase; direction:ltr}
#gate h1{font-size:1.75rem; font-weight:700; letter-spacing:-.025em; margin:0 0 8px; text-wrap:balance}
#gate p.lead{color:var(--muted); margin:0 0 28px; font-weight:300; font-size:1.02rem}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.field label{font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.01em}
.field input, .field textarea, .field select{
  background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  padding:12px 14px; font-size:16px; transition:border-color .15s, box-shadow .15s; width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)
}
#code{font-weight:600; letter-spacing:.16em; font-variant-numeric:tabular-nums; text-transform:uppercase; direction:ltr; text-align:left}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--action); color:var(--action-ink); border-radius:10px; padding:13px 20px;
  font-weight:600; font-size:15px; transition:transform .12s ease, opacity .15s; width:100%}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.35; pointer-events:none}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--rule)}
.btn-ghost:hover{background:var(--sunk); opacity:1}
.err{color:var(--err); font-size:13px; margin:10px 0 0; min-height:19px; font-weight:600}
.gate-note{margin-top:30px; padding-top:20px; border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--faint); line-height:1.7}
.gate-note b{color:var(--muted); font-weight:600}

/* ============ מסגרת ראשית ============ */
#app{display:none}
#app.on{display:block}
header.top{position:sticky; top:0; z-index:40; background:var(--paper);
  border-bottom:1px solid var(--rule)}
.top-in{max-width:1220px; margin:0 auto; padding:0 18px; height:58px;
  display:flex; align-items:center; gap:14px}
.mark{display:flex; align-items:baseline; gap:8px; flex-shrink:0}
.mark b{font-size:1.02rem; font-weight:800; letter-spacing:-.02em}
.mark span{font-size:9.5px; font-weight:700; letter-spacing:.2em;
  color:var(--faint); text-transform:uppercase; direction:ltr}
.who{font-size:12.5px; color:var(--muted); border-inline-start:1px solid var(--rule);
  padding-inline-start:14px; margin-inline-start:2px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:190px}
.who b{color:var(--ink); font-weight:600}
.top-sp{flex:1}
.search{position:relative; width:min(300px,38vw)}
.search input{width:100%; background:var(--sunk); border:1px solid transparent; border-radius:9px;
  padding:9px 34px 9px 12px; font-size:14px}
.search input:focus{outline:none; background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.search svg{position:absolute; inset-inline-start:11px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--faint); pointer-events:none}
.cartbtn{display:flex; align-items:center; gap:7px; background:var(--action); color:var(--action-ink);
  border-radius:9px; padding:9px 14px; font-weight:600; font-size:13.5px; white-space:nowrap}
.cartbtn .n{background:var(--action-ink); color:var(--action); border-radius:99px;
  min-width:19px; height:19px; display:grid; place-items:center; font-size:11px;
  font-weight:700; font-variant-numeric:tabular-nums; padding:0 5px}
.catbtn{display:flex; align-items:center; gap:7px; border:1px solid var(--ink); border-radius:9px;
  padding:8px 13px; font-weight:700; font-size:13.5px; white-space:nowrap; transition:all .15s}
.catbtn svg{width:15px; height:15px}
.catbtn:hover{background:var(--ink); color:var(--paper)}
.linkish{color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.exit{font-size:12.5px; color:var(--faint); font-weight:500}
.exit:hover{color:var(--ink)}

/* ============ סרגל סינון ============ */
.filters{position:sticky; top:58px; z-index:30; background:var(--paper);
  border-bottom:1px solid var(--rule)}
.filters-in{max-width:1220px; margin:0 auto; padding:0 18px}
.tabs{display:flex; gap:26px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:13px 0 11px; font-size:14.5px; font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--ink)}
.tab .c{font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--faint); margin-inline-start:5px}
.chips{display:flex; gap:7px; padding:11px 0 12px; overflow-x:auto; scrollbar-width:none;
  border-top:1px solid var(--rule-soft)}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--rule); border-radius:99px; padding:5px 13px; font-size:12.5px;
  font-weight:600; color:var(--muted); white-space:nowrap; transition:all .15s; background:var(--paper)}
.chip:hover{border-color:var(--faint); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chip-sep{width:1px; background:var(--rule); margin:2px 5px; flex-shrink:0}

/* ============ רשת מוצרים ============ */
main{max-width:1220px; margin:0 auto; padding:22px 18px 120px}
.count{font-size:12.5px; color:var(--faint); margin:0 0 16px}
.count b{color:var(--muted); font-weight:600}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s, border-color .2s}
.card:hover{border-color:var(--rule); box-shadow:var(--shadow)}
.plate{background:var(--plate); aspect-ratio:4/3; display:grid; place-items:center;
  padding:16px; position:relative; border-bottom:1px solid var(--rule-soft)}
.plate img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply}
.plate .ph{font-size:11px; font-weight:600; color:#A7AFB9;
  letter-spacing:.08em; text-align:center; line-height:1.9}
.badge{position:absolute; inset-block-start:10px; inset-inline-start:10px;
  background:var(--ink); color:var(--paper); font-size:10px; font-weight:700;
  letter-spacing:.04em; padding:3px 8px; border-radius:5px}
/* ── מלאי אחרון: תג על התמונה, שורה אדומה בכרטיס, טבעת סביב הצבע ── */
.badge.last{inset-block-start:auto; inset-block-end:10px;
  background:var(--warn); color:var(--warn-ink)}
p.low{margin:0; font-size:11.5px; font-weight:700; color:var(--warn); line-height:1.4}
.sws button.low{border-color:var(--warn)}
.sws button.low[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--warn)}
.line .info p.low{margin-top:2px; font-size:11px}

.brandtag{position:absolute; inset-block-start:10px; inset-inline-end:10px;
  font-size:9.5px; font-weight:700; letter-spacing:.14em;
  color:#8C95A0; direction:ltr}
.body{padding:14px 15px 15px; display:flex; flex-direction:column; gap:10px; flex:1}
.card h3{margin:0; font-size:14.5px; font-weight:700; line-height:1.35; letter-spacing:-.01em}
.sub{font-size:11.5px; color:var(--faint); margin:0; display:flex; gap:7px; flex-wrap:wrap}
.sub span{white-space:nowrap}

.prices{display:flex; align-items:flex-end; gap:14px; padding-top:2px}
.pmain .lbl{display:block; font-size:10px; font-weight:600; color:var(--muted); letter-spacing:.02em}
.pmain .v{font-weight:700; font-size:1.3rem; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  letter-spacing:-.02em; display:block; margin-top:1px}
.pside{font-size:11px; color:var(--faint); line-height:1.5; padding-bottom:3px}
.pside .v{color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums}
.marg{color:var(--good); font-weight:700; background:var(--good-soft);
  border-radius:5px; padding:1px 6px; font-size:10.5px; white-space:nowrap}

/* ── בורר גרסה: דגם ← צבע ← כמות. שורה אחת לכל שלב, לא שורה לכל מק״ט ── */
.pick{margin-top:auto; padding-top:11px; border-top:1px solid var(--rule);
  display:flex; flex-direction:column; gap:9px}
.models{display:flex; gap:5px; flex-wrap:wrap}
.models button{border:1px solid var(--rule); border-radius:7px; padding:4px 9px;
  font-size:11.5px; font-weight:600; color:var(--muted); line-height:1.35; transition:all .13s}
.models button:hover{border-color:var(--faint); color:var(--ink)}
.models button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.sws{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.sws button{position:relative; width:23px; height:23px; border-radius:50%;
  display:grid; place-items:center; border:1.5px solid transparent; transition:border-color .13s}
.sws button:hover{border-color:var(--faint)}
.sws button[aria-pressed="true"]{border-color:var(--ink)}
.sws button .q{position:absolute; inset-block-start:-3px; inset-inline-end:-3px;
  background:var(--ink); color:var(--paper); font-size:9px; font-weight:700; line-height:1;
  min-width:13px; height:13px; border-radius:99px; display:grid; place-items:center;
  padding:0 3px; border:1.5px solid var(--surface); font-variant-numeric:tabular-nums}
.sw{width:15px; height:15px; border-radius:50%; display:block;
  border:1px solid rgba(10,14,20,.18); box-shadow:inset 0 -3px 5px -3px rgba(10,14,20,.35)}
.sw.clear{background:
  linear-gradient(135deg,transparent 46%,rgba(10,14,20,.3) 46%,rgba(10,14,20,.3) 54%,transparent 54%),
  var(--surface)}
.chosen{display:flex; align-items:baseline; gap:8px; min-height:17px}
.chosen .nm{font-size:12.5px; font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chosen .bc{font-size:10px; color:var(--faint); direction:ltr; unicode-bidi:isolate;
  font-variant-numeric:tabular-nums; margin-inline-start:auto; flex-shrink:0}
.buy{display:flex; align-items:center; gap:9px}
.buy .sp{flex:1}
.buy .in{font-size:11.5px; font-weight:700; color:var(--good); background:var(--good-soft);
  border-radius:6px; padding:2px 8px; white-space:nowrap}
.buy.has .step{border-color:var(--ink)}
.step{display:flex; align-items:center; border:1px solid var(--rule); border-radius:8px;
  overflow:hidden; flex-shrink:0; touch-action:manipulation; user-select:none}
.step button{width:28px; height:28px; display:grid; place-items:center; font-size:15px;
  color:var(--muted); transition:background .12s}
.step button:hover{background:var(--sunk); color:var(--ink)}
.step input{width:34px; height:28px; text-align:center; border:none; background:transparent;
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; padding:0;
  border-inline:1px solid var(--rule-soft); -moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step input:focus{outline:none; background:var(--accent-soft)}

.empty{text-align:center; padding:70px 20px; color:var(--faint)}
.empty b{display:block; color:var(--ink); font-size:1.1rem; font-weight:700; margin-bottom:6px}

/* ============ סל ============ */
.scrim{position:fixed; inset:0; background:rgba(10,14,20,.42); opacity:0; pointer-events:none;
  transition:opacity .22s; z-index:50; backdrop-filter:blur(2px)}
.scrim.on{opacity:1; pointer-events:auto}
aside.cart{position:fixed; inset-block:0; inset-inline-start:0; width:min(430px,100vw);
  background:var(--paper); z-index:60; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.32,.72,0,1);
  box-shadow:var(--shadow-lift)}
aside.cart.on{transform:none}
.cart-head{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--rule)}
.cart-head h2{margin:0; font-size:1.05rem; font-weight:700; flex:1}
.x{width:32px; height:32px; display:grid; place-items:center; border-radius:8px;
  color:var(--muted); font-size:19px}
.x:hover{background:var(--sunk); color:var(--ink)}
.cart-body{flex:1; overflow-y:auto; padding:6px 18px}
.line{display:flex; gap:11px; padding:13px 0; border-bottom:1px solid var(--rule-soft); align-items:flex-start}
.line .thumb{width:50px; height:50px; background:var(--plate); border-radius:8px;
  display:grid; place-items:center; flex-shrink:0; overflow:hidden}
.line .thumb img{max-width:82%; max-height:82%; object-fit:contain; mix-blend-mode:multiply}
.line .info{flex:1; min-width:0}
.line .info h4{margin:0 0 1px; font-size:13px; font-weight:600; line-height:1.35}
.line .info p{margin:0; font-size:11px; color:var(--faint)}
.line .info .sk{font-size:10px; font-weight:500; font-variant-numeric:tabular-nums; direction:ltr}
.line .right{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0}
.line .amt{font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums}
.line .rm{font-size:11px; color:var(--faint)}
.line .rm:hover{color:var(--err)}
.cart-foot{border-top:1px solid var(--rule); padding:15px 18px 18px;
  background:var(--paper); display:flex; flex-direction:column; gap:12px}
.sums{display:flex; flex-direction:column; gap:6px; font-size:13px}
.srow{display:flex; justify-content:space-between; color:var(--muted)}
.srow .v{font-weight:600; font-variant-numeric:tabular-nums}
.srow.tot{padding-top:9px; border-top:1px solid var(--rule); color:var(--ink);
  font-weight:700; font-size:15.5px}
.srow.tot .v{font-weight:700; font-size:17px; letter-spacing:-.02em}
.minwarn{background:var(--sunk); border-radius:9px; padding:10px 12px; font-size:12px;
  color:var(--muted); line-height:1.5}
.minwarn b{color:var(--ink)}

/* ============ מסך סיום ============ */
.sheet{position:fixed; inset:0; z-index:70; background:var(--paper); overflow-y:auto; display:none}
.sheet.on{display:block}
.sheet-in{max-width:620px; margin:0 auto; padding:26px 20px 60px}
.sheet h2{font-size:1.4rem; font-weight:700; letter-spacing:-.02em; margin:0 0 6px}
.sheet .lead{color:var(--muted); margin:0 0 24px; font-weight:300}
.ok-mark{width:46px; height:46px; border-radius:50%; background:var(--good-soft); color:var(--good);
  display:grid; place-items:center; font-size:22px; margin-bottom:16px}
.recap{border:1px solid var(--rule); border-radius:12px; overflow:hidden; margin:20px 0}
.recap .rh{background:var(--sunk); padding:11px 15px; font-size:12px; font-weight:700;
  color:var(--muted); display:flex; justify-content:space-between}
.recap .rh .mono{font-size:12px}
.recap table{width:100%; border-collapse:collapse; font-size:13px}
.recap td{padding:9px 15px; border-top:1px solid var(--rule-soft); vertical-align:top}
.recap td.q,.recap td.a{text-align:end; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap; width:1%}
.recap td .sk{font-size:10px; font-variant-numeric:tabular-nums; color:var(--faint); direction:ltr; display:block}
.recap tfoot td{border-top:1px solid var(--rule); font-weight:700}
.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:520px){ .two{grid-template-columns:1fr} }

/* ============ הקטלוג המלא ============ */
.sheet.cat{background:var(--paper)}
.cat-top{position:sticky; top:0; z-index:5; background:var(--paper); border-bottom:1px solid var(--rule)}
.cat-top-in{max-width:1000px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px}
.cat-top h2{margin:0; font-size:1.1rem; font-weight:800; letter-spacing:-.02em; white-space:nowrap}
.cat-nav{display:flex; gap:14px; flex:1; overflow-x:auto; scrollbar-width:none}
.cat-nav::-webkit-scrollbar{display:none}
.cat-nav a{font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap}
.cat-nav a:hover{color:var(--ink)}
.cat-nav .c{font-size:10.5px; color:var(--faint); font-variant-numeric:tabular-nums; margin-inline-start:3px}
.cat-in{max-width:1000px; margin:0 auto; padding:20px 20px 80px}
.catlead{font-size:13.5px; color:var(--muted); margin:0 0 26px; line-height:1.7; max-width:62ch}
.catlead b{color:var(--ink); font-weight:700}
.cathead{font-size:1.5rem; font-weight:800; letter-spacing:-.025em; margin:34px 0 16px;
  padding-bottom:10px; border-bottom:2px solid var(--ink); display:flex; align-items:baseline; gap:10px}
.cathead span{font-size:12px; font-weight:600; color:var(--faint); letter-spacing:0}
.catitem{display:grid; grid-template-columns:260px 1fr; gap:22px; padding:22px 0;
  border-bottom:1px solid var(--rule-soft)}
.catpix{min-width:0}
.cathero{background:var(--plate); border-radius:12px; aspect-ratio:1; display:grid; place-items:center;
  padding:16px; position:relative; overflow:hidden}
.cathero img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; cursor:zoom-in}
.cathero .ph{font-size:11px; font-weight:700; color:#A7AFB9; letter-spacing:.1em}
.strip{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.strip button{width:46px; height:46px; border-radius:8px; background:var(--plate);
  border:1px solid var(--rule-soft); overflow:hidden; display:grid; place-items:center; cursor:zoom-in}
.strip button img{max-width:84%; max-height:84%; object-fit:contain; mix-blend-mode:multiply}
.strip .more{font-size:11.5px; font-weight:700; color:var(--muted)}
.catbody{min-width:0; display:flex; flex-direction:column; gap:9px}
.eyebrow{margin:0; font-size:10.5px; font-weight:700; letter-spacing:.12em; color:var(--faint)}
.catitem h3{margin:0; font-size:1.22rem; font-weight:800; letter-spacing:-.02em; line-height:1.3}
.attach{margin:0; font-size:12px; color:var(--muted)}
.catdesc{font-size:13.5px; line-height:1.75; color:var(--strong); max-width:70ch}
.catdesc p{margin:0 0 5px}
.catdesc.none{color:var(--faint); font-style:italic}
.cattbl{overflow-x:auto; border:1px solid var(--rule); border-radius:10px}
.cattbl table{width:100%; border-collapse:collapse; font-size:12.5px; min-width:420px}
.cattbl th{background:var(--sunk); padding:8px 11px; text-align:right; font-size:11px;
  font-weight:700; color:var(--muted); white-space:nowrap}
.cattbl td{padding:8px 11px; border-top:1px solid var(--rule-soft); vertical-align:middle}
.cattbl tr.on{background:var(--accent-soft)}
.cattbl td.c{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.cattbl td.bcc{font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
  color:var(--faint); font-size:11.5px; white-space:nowrap}
.cattbl th.a, .cattbl td.a{text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600}
.lowtag{color:var(--warn); font-size:10.5px; font-weight:700}
.catitem .pick{margin-top:4px; border-top:none; padding-top:0}

/* ============ הגדלת תמונה ============ */
.lbox{position:fixed; inset:0; z-index:90; background:rgba(8,11,16,.94); display:none;
  align-items:center; justify-content:center; padding:56px 16px 104px}
.lbox.on{display:flex}
.lfig{margin:0; max-width:min(960px,94vw); max-height:100%; display:flex;
  flex-direction:column; align-items:center; gap:12px}
.lfig img{max-width:100%; max-height:calc(100dvh - 210px); object-fit:contain;
  border-radius:10px; background:#fff}
.lfig figcaption{color:#D3DAE2; font-size:13px; font-weight:600; text-align:center}
.lx{position:absolute; inset-block-start:14px; inset-inline-end:16px; width:40px; height:40px;
  border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:19px;
  display:grid; place-items:center}
.lx:hover{background:rgba(255,255,255,.22)}
.lnav{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px;
  border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:28px; line-height:1;
  display:grid; place-items:center}
.lnav:hover{background:rgba(255,255,255,.22)}
.lnav[hidden]{display:none}
.lprev{inset-inline-end:14px}
.lnext{inset-inline-start:14px}
.lthumbs{position:absolute; inset-block-end:16px; inset-inline:0; display:flex; gap:8px;
  justify-content:center; padding:0 16px; overflow-x:auto; scrollbar-width:none}
.lthumbs::-webkit-scrollbar{display:none}
.lthumbs button{width:54px; height:54px; border-radius:9px; background:#fff; flex-shrink:0;
  overflow:hidden; display:grid; place-items:center; opacity:.45; transition:opacity .15s;
  border:2px solid transparent}
.lthumbs button[aria-pressed="true"]{opacity:1; border-color:#fff}
.lthumbs button img{max-width:84%; max-height:84%; object-fit:contain}
.plate img[data-zoom]{cursor:zoom-in}

/* ============ סרגל תחתון בנייד ============ */
.mbar{position:fixed; inset-inline:0; bottom:0; z-index:35; background:var(--paper);
  border-top:1px solid var(--rule); padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:none; align-items:center; gap:12px; box-shadow:0 -6px 22px -14px rgba(10,14,20,.3)}
.mbar.on{display:flex}
.mbar .t{flex:1; font-size:12px; color:var(--muted); line-height:1.35}
.mbar .t b{display:block; font-size:17px; font-variant-numeric:tabular-nums;
  color:var(--ink); font-weight:700; letter-spacing:-.02em}
.mbar .btn{width:auto; padding:11px 22px}

@media (max-width:760px){
  .who{display:none}
  .search{width:auto; flex:1}
  .top-in{gap:10px; padding:0 14px}
  .exit{display:none}
  .filters-in, main{padding-inline:14px}
  main{padding-bottom:150px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
  .tabs{gap:18px}
  aside.cart{width:100vw}
}

/* ============ פריסת טלפון ============
   לא דסקטופ מכווץ: טור אחד, כרטיס שוכב, וכל מה שלוחצים עליו בגודל אצבע. */
@media (max-width:560px){
  .top-in{height:54px}
  .search input{font-size:16px; padding:10px 34px 10px 12px}   /* 16px מונע זום באייפון */
  .cartbtn{padding:10px 13px}
  .tab{padding:12px 0 10px; font-size:14px}
  .chip{padding:7px 14px; font-size:13px}

  .grid{grid-template-columns:1fr; gap:10px}
  .card{flex-direction:row; align-items:stretch}
  .plate{width:116px; flex-shrink:0; aspect-ratio:auto; padding:10px;
    border-bottom:none; border-inline-end:1px solid var(--rule-soft)}
  .plate .brandtag{display:none}
  .badge{inset-block-start:6px; inset-inline-start:6px; font-size:9px; padding:2px 6px}
  .body{padding:12px 13px 13px; gap:9px; min-width:0}
  .card h3{font-size:14px}
  .sub{font-size:11px}
  .prices{gap:10px; align-items:baseline}
  .pmain .v{font-size:1.18rem}

  .pick{padding-top:10px; gap:10px}
  .models button{font-size:12.5px; padding:8px 12px; border-radius:8px}
  .sws{gap:9px}
  .sws button{width:34px; height:34px}                         /* שטח מגע אמיתי */
  .sw{width:20px; height:20px}
  .sws button .q{font-size:9.5px; min-width:15px; height:15px; inset-block-start:-2px; inset-inline-end:-2px}
  .badge.last{inset-block-end:6px}
  p.low{font-size:12px}
  .chosen .nm{font-size:12.5px}
  .chosen .bc{font-size:10.5px}
  .step{border-radius:9px}
  .step button{width:40px; height:40px; font-size:19px}
  .step input{width:48px; height:40px; font-size:16px}
  .buy .in{font-size:12px; padding:3px 9px}

  .line .thumb{width:56px; height:56px}
  .line .info h4{font-size:13.5px}
  .cart-body{padding:6px 14px}
  .cart-foot{padding:14px 14px 16px}
  .mbar{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .mbar .btn{padding:13px 24px}
  .sheet-in{padding:22px 16px 60px}
  .catbtn span{display:none}
  .catbtn{padding:10px 12px}
  .cat-top-in{padding:10px 14px; gap:12px}
  .cat-top h2{font-size:1rem}
  .cat-in{padding:16px 14px 70px}
  .cathead{font-size:1.25rem; margin:26px 0 12px}
  .catitem{grid-template-columns:1fr; gap:14px; padding:18px 0}
  .cathero{aspect-ratio:16/10}
  .catitem h3{font-size:1.1rem}
  .lbox{padding:52px 10px 92px}
  .lfig img{max-height:calc(100dvh - 190px)}
  .lthumbs button{width:46px; height:46px}
  .lnav{width:40px; height:40px; font-size:24px}
}
@media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms !important; animation-duration:.01ms !important} }