:root {
  --nav: #131921; --nav2: #232f3e; --orange: #febd69; --orange-h: #f3a847;
  --bg: #eaeded; --text: #0f1111; --link: #007185; --price: #b12704; --green: #007600;
  --yellow: #ffd814; --yellow-b: #fcd200; --yellow-h: #f7ca00; --star: #de7921;
  --border: #d5d9d9; --warn: #c7511f; --ok: #067d62; --radius: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Heebo", "Amazon Ember", Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -.2px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--warn); text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: #565959; }
.ltr { direction: ltr; unicode-bidi: embed; }

/* ---------- header ---------- */
.demo-banner { background: #fff3cd; color: #664d03; text-align: center; padding: 6px 12px; font-size: 13px; border-bottom: 1px solid #ffe69c; }
.nav { background: var(--nav); color: #fff; position: sticky; top: 0; z-index: 50; }
.nav-main { display: flex; align-items: center; gap: 12px; padding: 8px 16px; max-width: 1500px; margin: 0 auto; }
.logo { color: #fff; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; padding: 6px 8px; border: 1px solid transparent; border-radius: 3px; }
.logo:hover { border-color: #fff; color: #fff; text-decoration: none; }
.logo-text { font-weight: 700; font-size: 24px; letter-spacing: -.5px; direction: ltr; }
.logo-il { color: var(--orange); }
.logo-smile { display: block; width: 64px; height: 8px; border-bottom: 3px solid var(--orange); border-radius: 0 0 50% 50% / 0 0 100% 100%; margin-top: -4px; }
.logo-sub { font-size: 11px; color: #ccc; margin-top: 4px; }
.deliver { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #ccc; padding: 6px 8px; border: 1px solid transparent; border-radius: 3px; white-space: nowrap; }
.deliver small { display: block; }
.deliver b { display: block; color: #fff; font-size: 14px; }
.deliver-icon { font-size: 18px; }
.search { flex: 1; display: flex; height: 40px; border-radius: 4px; overflow: hidden; background: #fff; min-width: 200px; }
.search:focus-within { box-shadow: 0 0 0 3px var(--orange); }
.search select { border: 0; background: #f3f3f3; color: #555; padding: 0 8px; font-size: 12px; max-width: 150px; border-inline-end: 1px solid #ccc; outline: none; }
.search input { flex: 1; border: 0; padding: 0 10px; font-size: 15px; outline: none; min-width: 0; }
.search button { border: 0; background: var(--orange); width: 45px; font-size: 18px; }
.search button:hover { background: var(--orange-h); }
.cart-link { color: #fff; display: flex; align-items: flex-end; gap: 4px; padding: 6px 8px; border: 1px solid transparent; border-radius: 3px; font-weight: 700; }
.cart-link:hover { border-color: #fff; color: #fff; text-decoration: none; }
.cart-icon { position: relative; font-size: 26px; line-height: 1; }
.cart-count { position: absolute; top: -8px; inset-inline-end: -8px; background: var(--orange); color: #111; font-size: 12px; font-weight: 700; border-radius: 10px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 4px; }
/* תפריט הקטגוריות: הרקע על כל הרוחב, הפריטים ממורכזים באותו מיכל (1500px) כמו שאר הכותרת */
.nav-sub-wrap { background: var(--nav2); }
.nav-sub { max-width: 1500px; margin: 0 auto; display: flex; gap: 2px; padding: 4px 16px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1000px) { .nav-sub { justify-content: center; } }
.nav-sub::-webkit-scrollbar { display: none; }
.nav-sub a { color: #fff; padding: 6px 10px; white-space: nowrap; border: 1px solid transparent; border-radius: 14px; font-size: 13px; }
.nav-sub a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; color: #fff; }
.nav-sub a.active { background: var(--orange); color: #111; font-weight: 700; text-decoration: none; }

/* ---------- threshold bar (live) ---------- */
.tbar-wrap { background: linear-gradient(180deg, #fff 0%, #f3f5f5 100%); border-bottom: 1px solid var(--border); padding: 10px 16px 28px; color: var(--text); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); }
.tbar { max-width: 1500px; margin: 0 auto; position: relative; }
.tbar-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.tbar-status { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.tbar-status b { direction: ltr; unicode-bidi: embed; }
.tbar-icon { font-size: 24px; line-height: 1; }
.tbar-ok .tbar-icon { animation: tpopicon .6s cubic-bezier(.34, 1.56, .64, 1); }
/* הקו הראשי מפוצל למקטעים (מצב חריגה): מקטע לכל הזמנה */
.tbar-track-split { display: flex; gap: 14px; align-items: flex-start; }
.seg { flex: 1 1 0; min-width: 120px; }
.seg-track { position: relative; height: 22px; border-radius: 11px; background: #e3e6e6; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18); overflow: hidden; }
.seg-fill { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 0; border-radius: 11px; overflow: hidden; background: linear-gradient(90deg, #ff9900, #ffbf5c); transition: width .8s cubic-bezier(.22, 1, .36, 1); }
.seg.ok .seg-fill { background: linear-gradient(90deg, #067d62, #1fb589); }
.seg.over .seg-fill { background: linear-gradient(90deg, #b12704, #e8533a); }
.seg.loading .seg-fill { background: #d5d9d9; }
.seg-min { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(0, 0, 0, .35); transform: translateX(50%); }
.seg-cart { position: absolute; top: 50%; inset-inline-end: 4px; transform: translateY(-55%); font-size: 15px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.seg-label { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: #333; flex-wrap: wrap; }
.seg-total { direction: ltr; unicode-bidi: embed; font-weight: 800; font-size: 13px; }
.seg.ok .seg-status { color: var(--green); font-weight: 700; }
.seg.below .seg-status { color: #7a4b00; font-weight: 700; }
.seg.over .seg-status { color: var(--price); font-weight: 700; }
@media (max-width: 760px) { .tbar-track-split { flex-wrap: wrap; } .seg { flex-basis: 45%; } }
.tbar-orders { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.order-mini { flex: 1 1 200px; max-width: 320px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 12px; animation: tpopicon .4s ease-out; }
.order-mini.ok { border-color: #b7dfc5; background: #f3faf5; }
.order-mini.below { border-color: #ffd98a; background: #fffaf0; }
.order-mini.over { border-color: #f5c2c0; background: #fdf3f2; }
.order-mini-head { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.order-mini-total { direction: ltr; unicode-bidi: embed; font-weight: 800; font-size: 14px; }
.order-mini-track { position: relative; height: 8px; border-radius: 4px; background: #e3e6e6; margin: 6px 0 4px; overflow: hidden; }
.order-mini-fill { height: 100%; border-radius: 4px; background: #ffa41c; transition: width .6s cubic-bezier(.22, 1, .36, 1); }
.order-mini.ok .order-mini-fill, .order-mini-fill.ok { background: var(--ok); }
.order-mini.over .order-mini-fill, .order-mini-fill.over { background: var(--price); }
.order-mini-min { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(0, 0, 0, .35); }
.order-mini-label { color: #565959; }
.order-mini.ok .order-mini-label { color: var(--green); }
.order-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; background: #e3e6e6; color: #333; margin-top: 4px; }
.order-badge.ok { background: #e6f4ea; color: var(--green); }
.order-badge.below { background: #fff8e6; color: #7a4b00; }
.order-badge.over { background: #fdecea; color: var(--price); }
.split-group.ok { border-color: #b7dfc5; }
.split-group.below { border-color: #ffd98a; }
.split-group .order-mini-track { margin: 0 0 8px; }
@keyframes tpopicon { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.tbar-over .tbar-icon { animation: tblink 1s ease-in-out 3; }
.tbar-amounts { display: flex; align-items: baseline; gap: 6px; direction: ltr; color: #565959; font-size: 14px; }
.tbar-now { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.tbar-ok .tbar-now { color: var(--ok); }
.tbar-over .tbar-now { color: var(--price); }
.tbar-over-chip { background: var(--price); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.tbar-track { position: relative; height: 22px; border-radius: 11px; background: #e3e6e6; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18); }
.tbar-zones { position: absolute; inset: 0; border-radius: 11px; overflow: hidden; display: flex; }
.tbar-zones .z { height: 100%; }
.tbar-zones .z-below { background: #fff1c9; }
.tbar-zones .z-ok { background: #cdeedc; background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(6, 125, 98, .08) 8px 16px); }
.tbar-zones .z-over { background: #fbd9d5; flex: 1; }
.tbar-fill { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; border-radius: 11px; width: 0; overflow: hidden; transition: width .8s cubic-bezier(.22, 1, .36, 1); background: linear-gradient(90deg, #ff9900, #ffbf5c); box-shadow: 0 0 10px rgba(255, 153, 0, .45); }
.tbar-ok .tbar-fill { background: linear-gradient(90deg, #067d62, #1fb589); box-shadow: 0 0 14px rgba(6, 125, 98, .55); }
.tbar-over .tbar-fill { background: linear-gradient(90deg, #b12704, #e8533a); box-shadow: 0 0 14px rgba(177, 39, 4, .5); }
.tbar-shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .55) 50%, transparent 75%); background-size: 220% 100%; animation: tshimmer 2.4s linear infinite; }
.tbar-marker { position: absolute; top: 50%; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid #555; display: grid; place-items: center; transform: translate(50%, -50%); font-size: 14px; z-index: 2; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: border-color .3s, transform .3s; }
.tbar-marker .pin { filter: grayscale(.8); line-height: 1; transition: filter .3s; }
.tbar-marker .lbl { position: absolute; top: 100%; inset-inline-start: 50%; transform: translateX(50%); font-size: 11px; font-weight: 700; color: #333; white-space: nowrap; margin-top: 5px; }
.tbar-marker.reached { border-color: var(--ok); transform: translate(50%, -50%) scale(1.15); animation: tpop .6s cubic-bezier(.34, 1.56, .64, 1); }
.tbar-marker.reached .pin { filter: none; }
.tbar-marker.reached .lbl { color: var(--ok); }
.tbar-marker.passed { border-color: var(--price); }
.tbar-marker.passed .pin { filter: none; }
.tbar-marker.passed .lbl { color: var(--price); }
.tbar-cart { position: absolute; top: 50%; inset-inline-start: 0; transform: translate(50%, -58%); font-size: 26px; line-height: 1; z-index: 3; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); transition: inset-inline-start .8s cubic-bezier(.22, 1, .36, 1); animation: tbob 1.6s ease-in-out infinite; }
.tbar-empty .tbar-cart { opacity: .55; animation: none; }
.tbar.celebrate .tbar-track { animation: tglow 1.3s ease-out; }
.tbar.shake { animation: tshake .5s ease-in-out; }
.confetti { position: absolute; top: 50%; inset-inline-start: var(--x); width: 8px; height: 8px; border-radius: 2px; background: var(--c); z-index: 4; pointer-events: none; animation: tconfetti 1.3s cubic-bezier(.2, .7, .3, 1) var(--d) forwards; }
@keyframes tshimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }
@keyframes tpop { 0% { transform: translate(50%, -50%) scale(.6); } 60% { transform: translate(50%, -50%) scale(1.35); } 100% { transform: translate(50%, -50%) scale(1.15); } }
@keyframes tblink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes tbob { 0%, 100% { margin-top: 0; } 50% { margin-top: -3px; } }
@keyframes tglow { 0% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 0 rgba(6, 125, 98, .7); } 100% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 18px rgba(6, 125, 98, 0); } }
@keyframes tshake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes tconfetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tbar *, .tbar { animation: none !important; transition: none !important; } }
@media (max-width: 600px) { .tbar-marker .lbl { font-size: 10px; } .tbar-status { font-size: 13px; } .tbar-now { font-size: 20px; } }

/* ---------- layout ---------- */
.view { flex: 1; max-width: 1500px; width: 100%; margin: 0 auto; padding: 16px; }
.breadcrumb { font-size: 13px; color: #565959; margin-bottom: 10px; }

/* ---------- home ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(1200px 400px at 90% -20%, rgba(254, 189, 105, .35), transparent 60%), linear-gradient(135deg, #131921 0%, #232f3e 55%, #37475a 100%); color: #fff; border-radius: 14px; padding: 34px 28px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; margin-bottom: 22px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); }
.hero::after { content: "🛒"; position: absolute; inset-inline-end: -10px; bottom: -22px; font-size: 150px; opacity: .08; pointer-events: none; }
.hero h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.15; font-weight: 800; }
.hero p { margin: 0 0 16px; color: #e3e6e6; font-size: 15px; }
.hero p b { color: var(--orange); }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-cta .btn { font-size: 14px; padding: 10px 18px; font-weight: 700; }
.hero-cta .btn-ghost { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; }
.hero-cta .btn-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.steps { display: grid; gap: 10px; }
.step { display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; padding: 12px 14px; font-size: 13px; backdrop-filter: blur(2px); }
.step-n { background: var(--orange); color: #111; font-weight: 800; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 22px; }
.cat-tile { position: relative; overflow: hidden; background: #fff; border-radius: 12px; padding: 18px 10px 14px; text-align: center; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); border: 1px solid #e6e9e9; transition: transform .15s, box-shadow .15s; }
.cat-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 58px; background: color-mix(in srgb, var(--c, #999) 14%, #fff); }
.cat-tile:hover { text-decoration: none; color: var(--text); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .35); }
.cat-icon { position: relative; font-size: 34px; line-height: 1; }
.cat-name { position: relative; font-weight: 700; margin-top: 10px; font-size: 13px; }

/* ---------- product cards ---------- */
.shelf { background: #fff; border-radius: 12px; padding: 18px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.shelf h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.row .card { flex: 0 0 210px; scroll-snap-align: start; }
.cat-shelf { border-top: 4px solid var(--c, var(--border)); }
.shelf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.shelf-head h2 { margin: 0; }
.shelf-head h2 a { color: var(--text); }
.shelf-head h2 a:hover { color: var(--warn); text-decoration: none; }
.shelf-head > a { font-size: 13px; white-space: nowrap; }
.top-badge { display: inline-block; background: var(--nav); color: var(--orange); font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 10px; vertical-align: middle; letter-spacing: .5px; }
.row-wrap { position: relative; }
.row-btn { position: absolute; top: 40%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: #fff; font-size: 22px; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); color: var(--text); display: grid; place-items: center; padding: 0; }
.row-btn.prev { inset-inline-start: -14px; }
.row-btn.next { inset-inline-end: -14px; }
.row-btn:hover { background: #f7fafa; }
.rank-badge { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 1; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 10px; background: #e3e6e6; color: #333; }
.rank-badge.rank-1 { background: #ffd814; color: #111; }
.rank-badge.rank-2 { background: #d9dcdc; color: #111; }
.rank-badge.rank-3 { background: #e8b27a; color: #111; }
@media (max-width: 760px) { .row-btn { display: none; } }
.card { background: #fff; border: 1px solid #e6e9e9; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; position: relative; transition: transform .15s, box-shadow .15s, border-color .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .35); border-color: #d5d9d9; }
.card-img { height: 170px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f7f8f8; border-radius: 8px; margin: -4px -4px 4px; padding: 6px; }
.card-img img { display: block; max-height: 158px; max-width: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s; }
.card:hover .card-img img { transform: scale(1.04); }
.card-title { color: var(--text); font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; direction: ltr; text-align: left; min-height: 2.6em; }
.card-title:hover { color: var(--warn); text-decoration: none; }
.card-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; width: fit-content; }
.size-chip { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px; background: #eef2ff; color: #3b4a9c; }
.size-chip-pick { background: #f3f4f6; color: #555; }
.size-box { margin: 10px 0; padding: 12px; border: 1px dashed #b9c0ff; background: #f6f7ff; border-radius: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.size-box .btn { width: fit-content; }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.share-wa { border-color: #25d366; color: #128c7e; }
.share-wa:hover { background: #e9fbef; color: #128c7e; }
.badge-ship { background: #e6f4ea; color: var(--green); }
.badge-tax { background: #fdecea; color: var(--price); }
.badge-demo { position: absolute; top: 8px; inset-inline-start: 8px; background: #232f3e; color: #fff; z-index: 1; }
.price { color: var(--text); direction: ltr; display: inline-flex; align-items: flex-start; unicode-bidi: embed; }
.price .sym, .price .frac { font-size: 12px; position: relative; top: 3px; }
.price .whole { font-size: 22px; line-height: 1; }
.stars { display: flex; align-items: center; gap: 6px; font-size: 14px; direction: ltr; }
.stars-wrap { position: relative; display: inline-block; color: #ddd; letter-spacing: 1px; line-height: 1; }
.stars-fg { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--star); white-space: nowrap; }
.stars .reviews { color: var(--link); font-size: 12px; }
.btn { display: inline-block; border: 1px solid; border-radius: 20px; padding: 8px 14px; font-size: 13px; line-height: 1.2; text-align: center; font-weight: 600; transition: background .15s, transform .1s; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-add { background: var(--yellow); border-color: var(--yellow-b); color: #111; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.btn-add:hover { background: var(--yellow-h); color: #111; }
.btn-buy { background: linear-gradient(180deg, #ffb64a, #ffa41c); border-color: #ff8f00; color: #111; font-weight: 800; padding: 11px 16px; font-size: 14px; box-shadow: 0 2px 6px -2px rgba(255, 143, 0, .6); }
.btn-buy:hover { background: linear-gradient(180deg, #ffa41c, #fa8900); color: #111; }
.btn-light { background: #fff; border-color: var(--border); color: var(--text); }
.btn-light:hover { background: #f7fafa; color: var(--text); }
.btn-link { background: none; border: 0; color: var(--link); padding: 0; font-size: 12px; }
.btn-link:hover { color: var(--warn); text-decoration: underline; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.card-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.card-hint { font-size: 12px; color: #565959; min-height: 1.4em; }
.card-hint b { direction: ltr; unicode-bidi: embed; }
.card-hint.good { color: var(--green); }
.card-hint.bad { color: var(--price); }

/* ---------- prices in ILS, deals ---------- */
.price-block { display: flex; flex-direction: column; gap: 2px; }
.price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; direction: ltr; justify-content: flex-end; }
.ils { font-size: 12px; color: #565959; direction: ltr; unicode-bidi: embed; }
.ils-block { display: block; font-weight: 400; margin-top: 2px; }
.buybox .ils, .product .price-block .ils { font-size: 14px; }
.list-price { font-size: 12px; color: #565959; text-decoration: line-through; direction: ltr; }
.badge-deal { background: #cc0c39; color: #fff; }
.tbar-ils { font-size: 13px; color: #565959; margin-inline-start: 6px; }

/* ---------- filters ---------- */
.filters label { line-height: 1.3; }
.price-form { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.price-form input { width: 64px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; direction: ltr; }
.price-form .btn { padding: 4px 10px; font-size: 12px; }
.facet-list a { padding: 2px 0; }
.facet-list details summary { cursor: pointer; color: var(--link); font-size: 13px; padding: 3px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
.chip-f { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 3px 10px; font-size: 12px; color: var(--text); }
.chip-f span { color: var(--price); font-weight: 700; margin-inline-start: 4px; }
.chip-f:hover { text-decoration: none; background: #fdecea; border-color: #f5c2c0; }
.chip-clear { font-size: 12px; margin-inline-start: 4px; }

/* ---------- search results ---------- */
.results { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
/* סרגל הפילטרים נצמד מתחת לכותרת ומקבל גלילה משלו, כך שגם רשימת מותגים ארוכה נגישה בלי לגלול את כל הדף */
.filters { background: #fff; border-radius: var(--radius); padding: 12px; position: sticky; top: calc(var(--header-h, 130px) + 12px); max-height: calc(100vh - var(--header-h, 130px) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c7cdcd transparent; }
.filters::-webkit-scrollbar { width: 8px; }
.filters::-webkit-scrollbar-thumb { background: #c7cdcd; border-radius: 4px; }
.filters::-webkit-scrollbar-thumb:hover { background: #a9b1b1; }
.filters h3:first-child { position: sticky; top: -12px; background: #fff; padding: 12px 0 6px; margin-top: -12px; z-index: 1; }
.filters h3 { font-size: 14px; margin: 14px 0 6px; }
.filters h3:first-child { margin-top: 0; }
.filters a, .filters label { display: block; padding: 3px 0; color: var(--text); font-size: 13px; cursor: pointer; }
.filters a.active { font-weight: 700; }
.filters label { display: flex; gap: 6px; align-items: center; }
.results-head { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.results-head select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); background: #f0f2f2; font-size: 13px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 16px 0; }
.sentinel { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 56px; padding: 16px; font-size: 13px; }
.sentinel .loader { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #d5d9d9; border-top-color: var(--orange-h); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.to-top { position: fixed; bottom: 24px; inset-inline-end: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); z-index: 90; transition: opacity .2s; }
.to-top:hover { background: #f7fafa; }
.smart-note { background: #fff; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; font-size: 13px; border-inline-start: 4px solid var(--ok); }
.smart-note b { direction: ltr; unicode-bidi: embed; }
.group-divider { grid-column: 1 / -1; font-weight: 700; font-size: 14px; padding: 8px 12px; border-radius: 6px; margin-top: 6px; }
.group-divider.g0 { background: #e6f4ea; color: var(--green); }
.group-divider.g1 { background: #fff8e6; color: #7a4b00; }
.group-divider.g2 { background: #fdecea; color: var(--price); }

/* ---------- product page ---------- */
.product { background: #fff; border-radius: var(--radius); padding: 20px; display: grid; grid-template-columns: minmax(240px, 1fr) 1.4fr 300px; gap: 24px; }
.product-img { display: flex; align-items: center; justify-content: center; min-height: 300px; position: relative; overflow: hidden; }
.product-img img { display: block; max-width: 100%; max-height: 420px; width: auto; height: auto; object-fit: contain; }
.product h1 { font-size: 22px; margin: 0 0 6px; direction: ltr; text-align: left; font-weight: 400; }
.product .brand { font-size: 14px; }
.divider { border-top: 1px solid var(--border); margin: 12px 0; }
.features { padding-inline-start: 0; padding-left: 18px; margin: 8px 0; direction: ltr; text-align: left; }
.features li { margin: 4px 0; }
.buybox { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.buybox .price .whole { font-size: 28px; }
.buybox select { padding: 6px; border-radius: 6px; border: 1px solid var(--border); background: #f0f2f2; }
.buybox .btn { width: 100%; padding: 10px; }
.impact { font-size: 13px; padding: 10px; border-radius: 6px; background: #f7fafa; border: 1px solid var(--border); }
.impact b { direction: ltr; unicode-bidi: embed; }
.impact.good { background: #e6f4ea; border-color: #b7dfc5; }
.impact.bad { background: #fdecea; border-color: #f5c2c0; }

/* ---------- cart ---------- */
.cart-page { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.cart-lines { background: #fff; border-radius: var(--radius); padding: 16px; }
.cart-lines h1 { font-size: 26px; margin: 0 0 12px; font-weight: 400; }
.line { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.line img { width: 120px; height: 120px; object-fit: contain; }
.line-title { font-size: 16px; direction: ltr; text-align: left; color: var(--text); display: block; }
.line-ship { color: var(--green); font-size: 12px; margin-top: 4px; }
.line-ship.stale { color: #7a4b00; }
.line-ship.bad { color: var(--price); font-weight: 700; }
.line-ship a { font-weight: 400; }
.line-size { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
.note-label { display: flex; align-items: center; gap: 6px; color: #565959; }
.note-input { width: 150px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: inherit; }
.variation-panel { border: 2px solid #b9c0ff; background: #f6f7ff; }
.variation-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; counter-reset: v; }
.variation-list li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px; counter-increment: v; position: relative; }
.variation-list li::before { content: counter(v); position: absolute; top: -8px; inset-inline-start: -8px; background: var(--nav); color: var(--orange); font-weight: 800; font-size: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.variation-list li.done { opacity: .6; }
.variation-list img { width: 64px; height: 64px; object-fit: contain; }
.variation-list .v-title { font-size: 13px; direction: ltr; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) { .variation-list li { grid-template-columns: 48px 1fr; } .variation-list .v-open { grid-column: 1 / -1; } }
.line-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: 12px; }
.line-actions select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: #f0f2f2; }
.line-price { font-weight: 700; font-size: 18px; direction: ltr; }
.cart-total { text-align: left; font-size: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.cart-total b, .summary b { direction: ltr; unicode-bidi: embed; }
.summary { background: #fff; border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--header-h, 130px) + 12px); max-height: calc(100vh - var(--header-h, 130px) - 24px); overflow-y: auto; scrollbar-width: thin; }
.summary .subtotal { font-size: 18px; }
.status-box { padding: 10px; border-radius: 6px; font-size: 13px; border: 1px solid; }
.status-below { background: #fff8e6; border-color: #ffd98a; color: #7a4b00; }
.status-ok { background: #e6f4ea; border-color: #b7dfc5; color: #0b5d1e; }
.status-over { background: #fdecea; border-color: #f5c2c0; color: #8a1c1c; }
.recs { background: #fff; border-radius: var(--radius); padding: 16px; margin-top: 16px; }
.recs h2 { font-size: 18px; margin: 0 0 4px; }
.recs h3 { font-size: 15px; }
.recs .sub { color: #565959; margin: 0 0 12px; font-size: 13px; }
.pair { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin-top: 10px; flex-wrap: wrap; }
.pair .mini { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.pair .mini img { width: 56px; height: 56px; object-fit: contain; }
.pair .mini .t { font-size: 12px; direction: ltr; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); }
.pair .plus { font-size: 20px; color: #999; }
.pair-cta { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.split-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; }
.split-group h3 { margin: 0 0 8px; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.split-group ul { margin: 0 0 10px; padding-inline-start: 0; padding-left: 16px; font-size: 13px; direction: ltr; text-align: left; flex: 1; }
.split-summary { border: 2px solid var(--ok); background: linear-gradient(180deg, #eaf7ef, #e0f3e8); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 0 0 4px rgba(6, 125, 98, .08); animation: tpopicon .5s cubic-bezier(.34, 1.56, .64, 1); }
.split-summary-title { font-weight: 800; color: #0b5d1e; font-size: 14px; }
.split-summary-totals { font-size: 13px; color: #0b5d1e; }
.split-summary-totals b { direction: ltr; unicode-bidi: embed; font-size: 16px; }
.split-summary .btn { width: 100%; }
.split-summary-link { font-size: 12px; text-align: center; }
.chip { font-size: 12px; font-weight: 400; padding: 2px 8px; border-radius: 10px; }
.chip.ok { background: #e6f4ea; color: var(--green); }
.chip.below { background: #fff8e6; color: #7a4b00; }
.chip.over { background: #fdecea; color: var(--price); }
.empty { background: #fff; border-radius: var(--radius); padding: 40px; text-align: center; }
.empty .big { font-size: 48px; }

/* ---------- static pages ---------- */
.page { max-width: 820px; margin: 0 auto; line-height: 1.6; font-size: 15px; }
.page h1 { font-size: 26px; margin: 0 0 12px; }
.page h2 { font-size: 18px; margin: 20px 0 6px; }
.page li { margin: 6px 0; }

/* ---------- misc ---------- */
.skeleton { background: linear-gradient(90deg, #eee, #f7f7f7, #eee); background-size: 200% 100%; animation: sh 1.2s infinite; border-radius: 6px; min-height: 280px; }
@keyframes sh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.toast { position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translateX(50%); background: #232f3e; color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); z-index: 100; font-size: 14px; max-width: 90vw; animation: toastin .25s ease-out; border: 1px solid rgba(255, 255, 255, .12); }
@keyframes toastin { from { opacity: 0; transform: translate(50%, 10px); } to { opacity: 1; transform: translate(50%, 0); } }
.toast.good { background: var(--ok); }
.toast.bad { background: var(--price); }
.footer { background: var(--nav2); color: #ddd; margin-top: 24px; font-size: 12px; }
.footer-inner { max-width: 1000px; margin: 0 auto; padding: 20px 16px; text-align: center; }
.footer p { margin: 6px 0; }
.footer .muted { color: #aaa; }
.error-box { background: #fdecea; border: 1px solid #f5c2c0; color: #8a1c1c; padding: 16px; border-radius: var(--radius); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .product { grid-template-columns: 1fr 1fr; }
  .buybox { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .cart-page { grid-template-columns: 1fr; }
  .summary { position: static; max-height: none; overflow: visible; }
  .split { grid-template-columns: 1fr; }
  .results { grid-template-columns: 1fr; }
  .filters { position: static; max-height: 320px; }
  .filters h3:first-child { position: static; margin-top: 0; padding-top: 0; }
}
/* ---------- mobile ---------- */
.filters-toggle { display: none; }
@media (max-width: 760px) {
  /* הכותרת לא נצמדת בסלולר (היא גבוהה); רק פס ההתקדמות הקומפקטי נשאר צמוד למעלה */
  .nav { position: static; }
  .nav-main { flex-wrap: wrap; padding: 6px 10px; gap: 6px; }
  .logo-text { font-size: 20px; }
  .logo-smile { width: 52px; }
  .search { order: 5; flex-basis: 100%; height: 38px; }
  .search select { max-width: 90px; font-size: 11px; }
  .deliver, .logo-sub { display: none; }
  .nav-sub a { font-size: 12px; padding: 5px 8px; }
  .tbar-wrap { position: sticky; top: 0; z-index: 50; padding: 6px 12px 16px; }
  .tbar-head { margin-bottom: 6px; gap: 6px; }
  .tbar-status { font-size: 12px; gap: 6px; }
  .tbar-icon { font-size: 18px; }
  .tbar-now { font-size: 18px; }
  .tbar-amounts { font-size: 12px; }
  .tbar-track { height: 14px; }
  .tbar-marker { width: 20px; height: 20px; font-size: 11px; }
  .tbar-marker .lbl { font-size: 10px; }
  .tbar-cart { font-size: 18px; }
  /* פיצול להזמנות בסלולר: כל המקטעים בשורה אחת, תוויות קצרות */
  .tbar-track-split { flex-wrap: nowrap; gap: 6px; }
  .seg { min-width: 0; flex-basis: 0; }
  .seg-track { height: 14px; }
  .seg-cart, .seg-items { display: none; }
  .seg-label { font-size: 10px; flex-direction: column; align-items: center; gap: 0; margin-top: 4px; text-align: center; }
  .seg-total { font-size: 12px; }
  .view { padding: 10px; }
  .hero { grid-template-columns: 1fr; padding: 20px 16px; gap: 16px; }
  .hero h1 { font-size: 24px; }
  .hero p { font-size: 14px; }
  .hero::after { font-size: 100px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cat-tile { padding: 12px 6px 10px; }
  .cat-icon { font-size: 28px; }
  .cat-name { font-size: 12px; }
  .shelf { padding: 12px; border-radius: 10px; }
  .shelf h2 { font-size: 17px; }
  .row .card { flex-basis: 165px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .card { padding: 8px; gap: 4px; }
  .card-img { height: 120px; }
  .card-img img { max-height: 110px; }
  .card-title { font-size: 12px; }
  .price .whole { font-size: 18px; }
  .card .btn { padding: 7px 8px; font-size: 12px; }
  .card-hint { font-size: 11px; }
  .card-badges .badge, .size-chip { font-size: 10px; }
  .results { gap: 10px; }
  .filters-toggle { display: block; width: 100%; }
  .filters { display: none; }
  .filters.open { display: block; }
  .results-head { padding: 8px 10px; }
  .smart-note { font-size: 12px; padding: 8px 10px; }
  .product { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .product h1 { font-size: 18px; }
  .product-img { min-height: 200px; }
  .product-img img { max-height: 260px; }
  .buybox .price .whole { font-size: 24px; }
  .line { grid-template-columns: 90px 1fr; }
  .line img { width: 90px; height: 90px; }
  .line-price { grid-column: 2; }
  .cart-lines h1 { font-size: 22px; }
  .recs { padding: 12px; }
  .to-top { bottom: 16px; inset-inline-end: 12px; width: 40px; height: 40px; }
  .toast { bottom: 12px; font-size: 13px; padding: 10px 14px; }
}