/* ============================================================
   cz-home-v12.css — שכבת חוקר הרכיבים בלבד.
   נטענת אך ורק ע"י cz-home-v7.php (/cortez-2027-plus/).
   /cortez-2027/ המקורי אינו טוען אותה ואינו מושפע.
   ============================================================ */

/* הבמה — הוצאת הסגנון מה-inline אל הקובץ */
.hot-fig{position:relative;width:100%;max-width:640px;aspect-ratio:1400/1050}
.hot-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ---------- הנקודות ---------- */
/* המיקומים כוילו מול `left` פיזי. אין להחליף ל-inset-inline-start:
   המסמך RTL, וההיגיון הלוגי ישקף את חמש הנקודות לצד הלא נכון. */
.hot-fig .dot{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;
  border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--red);color:#fff;
  font-family:var(--tech,inherit);font-size:13px;font-weight:700;line-height:1;
  display:grid;place-items:center;z-index:3;transition:background .2s,transform .2s}
.hot-fig .dot .dot-n{pointer-events:none}

/* פעימה שמסגירה שהנקודה לחיצה — נעצרת ברגע שנגעו בווידג'ט */
.hot-fig .dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(229,11,5,.45);animation:czHotPulse 2.4s ease-out infinite}
@keyframes czHotPulse{0%{transform:scale(.82);opacity:.9}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}
.hot-fig .dot[aria-pressed="true"]::after,
.hot.is-live .dot::after{animation:none;border-color:transparent}
.hot-fig .dot:hover,.hot-fig .dot[aria-pressed="true"]{background:var(--ink);transform:translate(-50%,-50%) scale(1.14)}
.hot-fig .dot:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* תווית שם הרכיב ליד הנקודה — עכבר אמיתי בלבד, וגם במיקוד מקלדת */
.dot-lbl{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  white-space:nowrap;background:var(--ink);color:#fff;font-family:var(--body,inherit);font-size:12px;
  font-weight:600;padding:5px 10px;border-radius:var(--pill,999px);opacity:0;pointer-events:none;
  transition:opacity .18s;z-index:4}
@media (hover:hover) and (pointer:fine){.hot-fig .dot:hover .dot-lbl{opacity:1}}
.hot-fig .dot:focus-visible .dot-lbl{opacity:1}

/* ---------- הפאנל ---------- */
.hot-panel img{transition:opacity .24s ease}
.hot-txt{transition:opacity .24s ease}
.hot.is-swap .hot-panel img,.hot.is-swap .hot-txt{opacity:0}

.hot-cnt{display:block;font-family:var(--tech,inherit);font-style:italic;font-size:12px;
  font-weight:700;letter-spacing:.06em;color:var(--mut);margin:0 0 9px}
.hot-cnt b{color:var(--red);font-size:15px}

/* ---------- מפתח הרכיבים ---------- */
/* הליקוי המרכזי שתוקן כאן: קודם ארבעה מתוך חמישה רכיבים היו בלתי נראים
   עד שהמבקר מצא נקודה ולחץ. עכשיו כולם קריאים במנוחה, וגם מנווטים. */
.hot-idx{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0 0;padding:0}
.hx{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:start;
  background:transparent;border:0;border-top:2px solid rgba(23,23,23,.14);
  padding:11px 2px 0;cursor:pointer;transition:border-color .2s,opacity .2s;opacity:.62}
.hx:hover{opacity:1}
.hx[aria-selected="true"]{opacity:1;border-top-color:var(--red)}
.hx:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hx-n{font-family:var(--tech,inherit);font-style:italic;font-size:11px;font-weight:700;
  letter-spacing:.06em;color:var(--red)}
.hx-t{font-family:var(--disp,inherit);font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.hx-v{font-size:12px;color:var(--mut);line-height:1.35}

@media (max-width:900px){
  /* שורה נגללת. `flex-start` מפורש — מרכוז על שורה נגללת מוציא את
     הפריט הראשון מחוץ לטווח הגלילה ואי אפשר להגיע אליו. */
  .hot-idx{display:flex;justify-content:flex-start;overflow-x:auto;gap:12px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .hx{flex:0 0 auto;min-width:148px;max-width:190px;scroll-snap-align:start}
  .hot-fig .dot{width:30px;height:30px;font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .hot-fig .dot::after{animation:none}
  .hot-panel img,.hot-txt,.hot-fig .dot,.dot-lbl{transition:none}
}

/* ============================================================
   Birzia — הפונט לכל הטקסט בעברית (כותרות + טקסט רץ).
   הועתק מ-sgo.co.il ומוגש מאותו דומיין — אחרת הדפדפן דורש CORS
   לפונטים והיה נופל בשקט חזרה לפונט הגיבוי.

   ⚠ ל-Birzia יש ארבעה משקלים בלבד, והעמוד מבקש 700/800/900.
   משקל שאין לו קובץ מקבל הסמדה סינתטית או נופל לפונט מערכת,
   ולכן כל טווח משקלים ממופה מפורשות לקובץ אמיתי.
   ============================================================ */
@font-face{font-family:"Birzia";src:url("/wp-content/uploads/cz-fonts/Birzia-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Birzia";src:url("/wp-content/uploads/cz-fonts/Birzia-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Birzia";src:url("/wp-content/uploads/cz-fonts/Birzia-Medium.woff2") format("woff2");
  font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Birzia";src:url("/wp-content/uploads/cz-fonts/Birzia-Black.woff2") format("woff2");
  font-weight:700 900;font-style:normal;font-display:swap}

/* הכותרות והטקסט הרץ עוברים ל-Birzia. הפונטים הקודמים נשארים כגיבוי. */
:root{
  --disp:"Birzia","Rubik","Heebo","Noto Sans Hebrew",system-ui,sans-serif;
  --body:"Birzia","Noto Sans Hebrew","Heebo",system-ui,sans-serif;
  /* --tech לא מוגדר כאן במכוון: Chakra Petch הנטוי נשאר על המחירים. */
}

/* body נושא font-family מפורש בשכבה מוקדמת — המשתנה לבדו לא מספיק */
body{font-family:var(--body)}


/* ============================================================
   קוביות המוצרים במגה — כרטיס לבן אחד, לא קופסה דו-גונית.
   לפני: חלק תמונה בהיר #F4F2EE על גוף כהה #1D1D26 — שתי שכבות שנחתכות באמצע.
   הטוקנים לקוחים מהמדידה של XI Mobility: radius 15px, אפס צללים, קו שערה במקום.

   הספציפיות היא `.mega .mega-items a` במכוון: ב-v7 יש בלוק <style> inline
   שמופיע אחרי קישורי ה-CSS, ולכן בספציפיות שווה הוא היה מנצח את השכבה הזאת.
   ============================================================ */
.mega .mega-items a{
  background:#FFFFFF;
  border:1px solid rgba(20,20,24,.10);
  border-radius:15px;
  box-shadow:none;
  transition:border-color .22s ease, transform .22s ease}
.mega .mega-items a:hover{background:#FFFFFF;border-color:rgba(20,20,24,.30);transform:translateY(-3px)}
.mega .mega-items .mi-im{background:#FFFFFF}

/* הייררכיה: שם דגם כהה → מחיר אדום → תשלומים מושתק */
.mega .mega-items b{color:#141418;padding:12px 13px 3px;font-size:12.5px;letter-spacing:.01em}
.mega .mega-items span{color:var(--red,#E50B05);padding:0 13px;font-size:14px}
.mega .mega-items .mi12{color:#6B6862;padding:3px 13px 13px;font-size:10.5px;opacity:1}
.mega .mega-items a::after{height:3px}

@media (prefers-reduced-motion:reduce){ .mega .mega-items a{transition:none} .mega .mega-items a:hover{transform:none} }

/* ============================================================
   מסילת מותגים רצה במקום גריד של שבע קופסות סטטיות.
   direction:ltr על המסילה במכוון — הלוגואים לועזיים, וזה הופך את
   חשבון ה-translateX לחד-משמעי בלי להישען על כיוון המסמך.
   הסט של 50% מדויק = סט אחד מלא, כי המסילה מכילה שתי חזרות זהות.
   ============================================================ */
.brand-rail{position:relative;overflow:hidden;margin-top:36px;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.brand-track{display:flex;width:max-content;gap:10px;animation:czBrandRun 42s linear infinite}
.brand-rail:hover .brand-track,.brand-rail:focus-within .brand-track{animation-play-state:paused}
.brand-track a{flex:0 0 auto;width:190px;min-height:112px;display:grid;place-items:center;
  padding:26px 18px;background:var(--card);border-radius:15px;transition:background .22s ease}
.brand-track a:hover{background:#20202A}
.brand-track a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.brand-track img{max-height:46px;width:auto;opacity:.86;transition:opacity .22s ease}
.brand-track a:hover img{opacity:1}
@keyframes czBrandRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:640px){
  .brand-track a{width:152px;min-height:96px;padding:20px 14px}
  .brand-track img{max-height:38px}
}

/* העדפת תנועה מופחתת: הלולאה נעצרת לגמרי והסט הכפילויות נעלם,
   אחרת המבקר היה רואה כל לוגו פעמיים בלי סיבה. */
@media (prefers-reduced-motion:reduce){
  .brand-rail{-webkit-mask-image:none;mask-image:none}
  .brand-track{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
  .brand-track a[aria-hidden="true"]{display:none}
}


/* ============================================================
   תיקוני קוביית המגה — נגזרו מחיתוך כרטיס אחד בהגדלה פי 3.
   ============================================================ */

/* (א) תמונות המוצר הן portrait (למשל 819×1024) והושמו בקופסה 4/3 שוכבת.
   object-fit:contain התאים לפי הגובה, ולכן האופניים יצאו צרים במרכז
   עם חלל לבן משני הצדדים. קופסה ריבועית מגדילה את המוצר בפועל.
   ה-!important הכרחי: בלוק ה-<style> ה-inline של v7 קובע aspect-ratio:4/3 !important. */
.mega .mega-items .mi-im{aspect-ratio:1/1 !important}
.mega .mega-items .mi-im img{inset:8px !important;width:calc(100% - 16px) !important;height:calc(100% - 16px) !important}

/* (ב) המחיר הוצג הפוך: "₪ 2,990" במקום "2,990 ₪", ו-"12 × ₪ 250" במקום "250 ₪ × 12".
   סימן השקל הוא European Terminator באלגוריתם ה-bidi, ובפסקה RTL הרצף המספרי
   מסתובב כיחידה. כפיית כיוון LTR על הרכיב עצמו פותרת את הסדר;
   text-align:right מחזיר את היישור לצד של שאר הכרטיס.
   זה אותו דפוס שכבר נשבר על "20×3.0" שהתהפך ל-"3.0×20". */
.mega .mega-items span{direction:ltr;text-align:right;unicode-bidi:isolate}
.mega .mega-items b{text-align:right}

/* (ג) צמצום החלל המת בין התמונה לטקסט */
.mega .mega-items b{padding:10px 12px 2px}
.mega .mega-items span{padding:0 12px}
.mega .mega-items .mi12{padding:2px 12px 11px}


/* ============================================================
   סבב תיקונים לפי שלושת השערים (taste 40-54 · motion 46 · impeccable slop 4 / quality 49)
   ============================================================ */

/* א. נגישות — כשל AA אמיתי ב-24 מקומות.
   האדום #E50B05 על הרקעים הבהירים מחזיר 4.21:1 על שמנת ו-3.63:1 על חול,
   מול 4.5:1 הנדרשים. לפי חוק 38(ד) מזיזים את הצד הצבעוני בלבד, בהסטת
   בהירות מינימלית ובאותו גוון ורוויה — לעולם לא את רקע העמוד.
   HSL זהה, בהירות 0.46 → 0.40. תוצאה: 5.27 / 4.54 / 6.00. האדום על כהה לא נוגע. */
.s-bone .idx i,.s-sand .idx i,
.s-bone .hot-txt .val,.s-sand .hot-txt .val,
.s-bone .hx-n,.s-sand .hx-n,
.s-bone .pc-x12,.s-sand .pc-x12{color:#C80A04}
.s-bone .hot-txt .val,.s-sand .hot-txt .val{background:rgba(200,10,4,.10)}

/* ב. פרק הרחוב הממוזג היה צפוף — שורת הווידאו והמוזאיקה נגעו זו בזו
   ונקראו כלוח אחד. זה נוצר במיזוג עצמו, ולכן מתוקן כאן. */
.motion{gap:clamp(14px,1.4vw,20px);margin-bottom:clamp(20px,3vw,42px)}
.gal{gap:clamp(12px,1.2vw,16px)}

/* ג. שורות ה-FAQ רצו על כ-150 תווים. היעד הקריא הוא מתחת ל-80. */
.faq details p{max-width:74ch}

/* ד. מעברים שמכריחים חישוב פריסה.
   סרגל ההתקדמות מעדכן את הרוחב בכל פריים של גלילה, אז המעבר מיותר
   ורק מכריח layout על כל פריים. אפס אובדן חזותי. */
#prog{transition:none}

/* ה. הילת אור אדומה מסוג radial-spotlight — חתימה מובהקת של עיצוב מחולל.
   נמצאת ב-cz-home-v9.css שהוא קובץ משותף, ולכן נדרסת כאן ולא שם. */
.story-pin{background:#0E0E13}


/* ============================================================
   אזור המותגים — יצא מהחושך, והקופסאות ירדו.
   שבע קופסאות כהות עם לוגו במרכז הן הדפוס החלש ביותר להציג בו מותגים;
   רצועה נקייה על רקע בהיר נותנת לסימן עצמו לנשום.

   ⚠ הלוגואים הם קו-אמנות לבנה על שקוף. על רקע בהיר הם פשוט נעלמים,
   ולכן חובה brightness(0) שהופך אותם לשחורים. בלעדיו הסקשן ייראה ריק.
   ============================================================ */
#brands .brand-rail{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}

.s-bone .brand-track a,.s-sand .brand-track a{
  background:transparent;border-radius:0;width:200px;min-height:104px;padding:20px 22px}
.s-bone .brand-track a:hover,.s-sand .brand-track a:hover{background:transparent}
/* לא להפוך את הלוגואים. brightness(0) מחץ גם את הפרט הפנימי האפור
   לאותו שחור, ו-SHARK/COPPER/MOVIX/SUPRA יצאו כתמים. המותגים נשארים
   בדיוק כפי שעוצבו, והרצועה סביבם היא שנעשית כהה. */
.s-bone .brand-track img,.s-sand .brand-track img{
  filter:none;opacity:.78;max-height:50px;transition:opacity .22s ease}
.s-bone .brand-track a:hover img,.s-sand .brand-track a:hover img{opacity:1}
.s-bone .brand-track a:focus-visible,.s-sand .brand-track a:focus-visible{outline:3px solid #141418;outline-offset:2px}

/* קו מפריד עדין בין הרצועה למונים, במקום שהכל יצוף */
#brands .trust{
  border-top:1px solid rgba(20,20,24,.12);padding-top:clamp(22px,2.6vw,38px);margin-top:clamp(24px,3vw,44px) !important}

@media (max-width:640px){
  .s-bone .brand-track a,.s-sand .brand-track a{width:150px;min-height:84px;padding:16px}
  .s-bone .brand-track img,.s-sand .brand-track img{max-height:40px}
}

/* רצועה כהה אחת על קרקע בהירה: הסקשן מפסיק להיות חשוך,
   והלוגואים נשארים קריאים בלי לגעת בהם. */
#brands .brand-rail{
  background:transparent;padding:6px 0;overflow:hidden}
#brands .brand-track a:hover{background:rgba(255,255,255,.06);border-radius:12px}
#brands .brand-track a:focus-visible{outline:3px solid #fff;outline-offset:-4px}

/* השהיית סגירה למגה-נאב — ראה ההערה ב-JS. המצב מתוחזק עוד 280ms
   אחרי שהעכבר עוזב, כדי שאפשר יהיה לחצות את הפער של 57px. */
.wgroup.is-open .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}


/* ============================================================
   שני סקשנים חדשים שנכנסו במקום מניפסט וסיפור MAX 6:
   נתיב המכירה האמיתי (124 חנויות) והכנסה ה-B2B (גיוס משווקים).
   ============================================================ */

/* ---------- מצאו חנות ---------- */
.cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:clamp(22px,2.6vw,36px)}
.cities a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  background:var(--card);border-radius:15px;padding:16px 18px;
  transition:background .2s ease,transform .2s ease}
.cities a:hover{transform:translateY(-2px)}
.cities a:focus-visible{outline:3px solid var(--on);outline-offset:3px}
.cities b{font-family:var(--disp);font-weight:800;font-size:15px;line-height:1.2}
/* המונה הוא מספר בלבד — מיושר בעמודות כדי שלא ירקד בין הכרטיסים */
.cities span{font-family:var(--tech);font-style:italic;font-weight:700;font-size:15px;
  color:var(--red);font-variant-numeric:tabular-nums}
.cities-all{background:var(--red) !important;color:#fff}
.cities-all b{color:#fff}
.cities-all span{color:#fff;font-size:20px;line-height:1}

.s-sand .cities a{background:#fff}
.s-sand .cities a:hover{background:#FBF9F5}
.s-sand .cities span{color:#C80A04}
.s-sand .cities-all span{color:#fff}

/* ---------- גיוס משווקים ---------- */
.dealer{display:grid;grid-template-columns:1fr .85fr;gap:clamp(24px,3.4vw,52px);align-items:center}
.dealer-tx{display:grid;gap:clamp(18px,2.2vw,28px);justify-items:start}
.dealer-l{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;width:100%}
.dealer-l li{list-style:none;background:var(--card);border-radius:15px;padding:20px 22px}
.dealer-l b{display:block;font-family:var(--disp);font-weight:800;font-size:17px;line-height:1.2}
.dealer-l span{display:block;margin-top:7px;font-size:14px;color:var(--mut);line-height:1.5}
.dealer-im{display:block;position:relative;border-radius:15px;overflow:hidden;aspect-ratio:4/5;min-height:340px}
.dealer-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){ .dealer-im:hover img{transform:scale(1.05)} }
.dealer-im::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,4,6,.55),transparent 52%)}

@media (max-width:900px){
  .dealer{grid-template-columns:1fr;gap:24px}
  .dealer-im{aspect-ratio:16/10;min-height:0;order:-1}
  .dealer-l{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cities{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
  .cities a{padding:13px 14px}
}
@media (prefers-reduced-motion:reduce){
  .cities a,.dealer-im img{transition:none}
  .cities a:hover{transform:none}
}




/* ============================================================
   רשת המשווקים — משווקים אמיתיים על העמוד, לא רק מספר.
   הוויזואליות נבנית מטיפוגרפיה ומהיררכיה ולא מתמונות:
   79 מהחנויות נושאות את אותו קובץ לוגו ולא חזית חנות, ושמונה עותקים
   של אותה תמונה היו נראים מזויפים יותר מאשר מרשימים.
   ============================================================ */
.shops{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;margin-top:clamp(22px,2.6vw,36px)}

.shop{display:flex;flex-direction:column;gap:5px;background:#fff;border-radius:15px;
  padding:20px 22px;transition:transform .22s ease;position:relative;overflow:hidden}
.shop::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){
  .shop:hover{transform:translateY(-3px)}
  .shop:hover::after{transform:scaleY(1)}
}
.shop:focus-visible{outline:3px solid #141418;outline-offset:3px}

.shop-c{font-family:var(--tech);font-style:italic;font-weight:700;font-size:11.5px;
  letter-spacing:.06em;color:#C80A04}
.shop-n{font-family:var(--disp);font-weight:800;font-size:16px;line-height:1.25;color:#141418}
.shop-a{font-size:13px;color:#6B6862;line-height:1.45}
/* הטלפון מסומן dir="ltr" ב-HTML — בלעדיו ספרת הקידומת נודדת לסוף */
.shop-t{margin-top:4px;font-family:var(--tech);font-style:italic;font-weight:700;font-size:14px;
  color:#141418;font-variant-numeric:tabular-nums;text-align:start}

.shop-all{background:#141419;justify-content:center;gap:2px}
.shop-all b{font-family:var(--tech);font-style:italic;font-weight:700;font-size:38px;color:#fff;line-height:1}
.shop-all > span{font-size:13px;color:#8C8C98}
.shop-all .shop-go{margin-top:12px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--body);font-weight:700;font-size:13.5px;color:#fff}
.shop-all .shop-go svg{width:15px;height:15px}
.shop-all::after{background:#fff}

/* ---------- רצועת ה-B2B, עכשיו עם צילום ---------- */
.dband{display:grid;grid-template-columns:.8fr 1.2fr;gap:0;align-items:stretch;
  margin-top:clamp(26px,3.2vw,46px);background:#141419;color:#F4F4F6;border-radius:15px;overflow:hidden}
.dband-im{position:relative;min-height:230px;overflow:hidden}
.dband-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dband-im::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to inline-start,rgba(20,20,25,.92),rgba(20,20,25,.15))}
.dband-tx{padding:clamp(24px,2.8vw,38px);display:grid;gap:14px;justify-items:start;align-content:center}
.dband-tx b{display:block;font-family:var(--tech);font-style:italic;font-weight:700;font-size:12px;
  letter-spacing:.06em;color:#8C8C98}
.dband-tx b em{display:block;margin-top:6px;font-family:var(--disp);font-style:normal;font-weight:800;
  font-size:clamp(20px,2.2vw,28px);letter-spacing:.01em;color:#fff;line-height:1.2}
.dband-tx p{margin:0;font-size:14.5px;color:#9A9AA6;line-height:1.55;max-width:48ch}
.dband-l{display:flex;gap:clamp(18px,2.2vw,34px);margin:0;padding:0}
.dband-l li{list-style:none}
.dband-l b{display:block;font-family:var(--tech);font-style:italic;font-weight:700;font-size:26px;color:#fff;line-height:1}
.dband-l span{display:block;margin-top:5px;font-size:12px;color:#8C8C98}

@media (max-width:900px){
  .dband{grid-template-columns:1fr}
  .dband-im{min-height:180px}
  .dband-im::after{background:linear-gradient(to top,rgba(20,20,25,.92),rgba(20,20,25,.15))}
}
@media (max-width:640px){
  .shops{grid-template-columns:1fr 1fr;gap:9px}
  .shop{padding:15px 16px}
  .shop-n{font-size:14px}
  .shop-a{font-size:12px}
  .shop-all b{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .shop,.shop::after{transition:none}
  .shop:hover{transform:none}
}


/* ============================================================
   הלוגו כרכיב גרפי — הווריאציה האנכית (crtz.png), כמו בעמוד הבית הקיים.
   המרכוז האנכי נעשה ב-top/bottom+margin ולא ב-transform, כדי ש-GSAP יוכל
   להניע את הרכיב בלי לדרוס את המיקום.
   ============================================================ */
.hero .ghost-v{
  display:block;position:absolute;z-index:1;
  top:0;bottom:0;margin:auto 0;left:3%;
  height:min(116%,880px);width:auto;max-width:none;
  opacity:.13;pointer-events:none;will-change:transform}

@media (max-width:900px){ .hero .ghost-v{left:-12%;height:min(80%,520px);opacity:.10} }

/* סימן חוזר בפרק הכהה — אותו לוגו, בקנה מידה אחר */
.has-mark{position:relative;overflow:hidden}
.has-mark > .wrap{position:relative;z-index:2}
.secmark{position:absolute;z-index:0;top:0;bottom:0;margin:auto 0;
  inset-inline-end:-3%;height:min(150%,1000px);width:auto;max-width:none;
  opacity:.055;pointer-events:none;will-change:transform}
@media (max-width:900px){ .secmark{height:min(90%,560px);opacity:.045} }

/* ============================================================
   ניקוי שער התנועה — השער החזיר 46 עם 18 כללי hover לא מגודרים.
   במכשיר מגע אין :hover אמיתי, והדפדפן משאיר את המצב תקוע אחרי נגיעה.
   אי אפשר לבטל כלל שכתוב בשכבה קודמת, אז אנחנו מנטרלים את האפקט במגע.
   ============================================================ */
@media (hover:none){
  .pc:hover,.tile:hover,.gal a:hover,.mega-items a:hover,.shop:hover,
  .cities a:hover,.brand-track a:hover,.hot-fig .dot:hover,.dealer-im:hover{transform:none}
  .pc:hover img,.tile:hover img,.gal a:hover img,.mega-items a:hover .mi-im img,
  .mega-shot:hover img,.dband-im:hover img,.dealer-im:hover img,.story-pin:hover img{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .hero .ghost-v,.secmark{will-change:auto}
}

/* החץ דחף את הכפתור לשתי שורות. CTA שנשבר נראה שבור, לא מזמין. */
.dband .btn,.shead .btn,.dband-tx .btn{white-space:nowrap}

/* ============================================================
   שני מעברים שמכריחים חישוב פריסה בכל פריים של גלילה.
   ההדר הנפיש padding בהתכווצות; הוא עדיין מתכווץ, רק בלי טוון ששובר פריימים.
   מוגבל לעמוד הזה בלבד — הכלל המקורי יושב בקובץ משותף עם /cortez-2027/.
   ============================================================ */
.hrow1{transition:none}

/* שלושה שווים במקום מוזאיקה שבורה. התוויות נראות תמיד — מיקום
   שמתגלה רק בריחוף לא קיים במגע ומבזבז את הסיפור הגאוגרפי. */
.gal.gal-3{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:clamp(12px,1.2vw,16px)}
.gal.gal-3 a{aspect-ratio:4/5;height:auto}
.gal.gal-3 b{opacity:1;transform:none;inset-inline-start:18px;bottom:18px;
  text-shadow:0 1px 14px rgba(0,0,0,.6)}
.gal.gal-3 a::after{opacity:1;background:linear-gradient(to top,rgba(4,4,6,.72),transparent 46%)}
@media (max-width:640px){ .gal.gal-3{grid-template-columns:1fr 1fr} .gal.gal-3 a:first-child{grid-column:span 2;aspect-ratio:16/10} }


/* ============================================================
   מפת הפריסה — 121 נקודות מקואורדינטות אמיתיות של החנויות.
   רשימת כרטיסים לא מראה “רשת ארצית”. פרישה על מפה — כן.
   ============================================================ */
.netgrid{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,2.6vw,40px);
  align-items:stretch;margin-top:clamp(22px,2.6vw,36px)}

.netmap{position:relative;background:#fff;border-radius:15px;
  padding:clamp(16px,1.8vw,26px);display:flex;flex-direction:column;align-items:center;gap:12px}
.netmap svg{display:block;height:clamp(340px,44vw,520px);width:auto;max-width:100%;overflow:visible}

/* הנקודות. אדום המותג, באטימות נמוכה כדי שהצפיפות תקרא כהצטברות */
.nd{fill:#C80A04;opacity:.5;transition:opacity .2s ease,r .2s ease}
.netmap svg:hover .nd{opacity:.28}
.netmap svg .nd:hover{opacity:1}

.netmap-cap{font-family:var(--tech);font-style:italic;font-size:12.5px;color:#6B6862;letter-spacing:.04em}
.netmap-cap b{font-size:16px;color:#C80A04;font-weight:700}

.netside{display:flex;align-items:stretch}
.netside .shops{margin-top:0;width:100%;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

@media (max-width:980px){
  /* מפה צרה וגבוהה לא עובדת ליד עמודה צרה. עוברת למעלה, נמוכה יותר. */
  .netgrid{grid-template-columns:1fr}
  .netmap{flex-direction:row;justify-content:center;gap:18px}
  .netmap svg{height:clamp(240px,52vw,320px)}
}
@media (max-width:640px){
  .netmap{flex-direction:column}
  .netmap svg{height:260px}
}
@media (prefers-reduced-motion:reduce){ .nd{transition:none} }


/* ============================================================
   מאתר חנויות — האזור מתפקד ולא רק מציג.
   בחירת עיר, איתור לפי מיקום, ולחיצה על נקודה במפה.
   ============================================================ */
.finder-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;
  margin-top:clamp(20px,2.4vw,32px)}
.fb-field{display:flex;flex-direction:column;gap:6px;min-width:230px}
.fb-field label{font-family:var(--tech);font-style:italic;font-weight:700;font-size:11.5px;
  letter-spacing:.06em;color:#6B6862}
.fb-field select{appearance:none;-webkit-appearance:none;
  background:#fff;border:1px solid rgba(20,20,24,.16);border-radius:15px;
  padding:13px 16px;font-family:var(--body);font-size:15px;font-weight:600;color:#141418;
  cursor:pointer;min-height:48px;background-image:linear-gradient(45deg,transparent 50%,#141418 50%),linear-gradient(135deg,#141418 50%,transparent 50%);
  background-position:calc(0% + 18px) calc(50% + 2px),calc(0% + 23px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fb-field select:focus-visible{outline:3px solid #141418;outline-offset:2px}
.finder-bar .btn{min-height:48px}
.fb-note{font-size:13.5px;color:#6B6862;align-self:center;min-height:1em}

.shops-empty{margin:0;padding:22px;background:#fff;border-radius:15px;font-size:14.5px;color:#6B6862;grid-column:1/-1}

/* תוויות העוגן על המפה */
.nl{font-family:var(--body,sans-serif);font-size:7px;font-weight:700;fill:#8A867E;
  paint-order:stroke;stroke:#fff;stroke-width:2.6px;stroke-linejoin:round}

/* מצב מסונן: העיר שנבחרה בולטת, השאר נסוגות */
.netmap.filtered .nd{opacity:.14}
.netmap .nd.on{opacity:1;fill:#C80A04}
.netmap.filtered .nd.on{opacity:1}

.netside{flex-direction:column;gap:14px}
.netside .btn{align-self:start}

@media (max-width:640px){
  .finder-bar{flex-direction:column;align-items:stretch}
  .fb-field{min-width:0}
  .finder-bar .btn{justify-content:center}
}

/* ============================================================
   §06 · רשת המשווקים — מסך אחד, מפה גדולה (18/9/2026)
   המדידה שהולידה את השינוי, 1440×820: הסעיף היה 1590px — שני מסכים.
   המפה צוירה 164×520 בתוך עמודה של 215, ולצידה 1107px שמחציתם אוויר:
   שש כרטיסים בשורה אחת ו-303px ריקים מתחתם.
   המפה עוברת לעמודה שלמה ומשתרעת על כל גובה הסעיף;
   האוויר שהתפנה הולך לבאנר ההצטרפות, שעכשיו בתוך אותו מסך.
   ============================================================ */
#findstore{padding-block:clamp(32px,3.8vw,52px)}
#findstore .shead{margin-bottom:clamp(14px,1.6vw,22px)}
#findstore .shead h2{font-size:clamp(25px,2.4vw,37px);line-height:1.08}
#findstore .shead .lede{font-size:14.5px;max-width:54ch}

.netwrap{display:grid;
  grid-template-columns:clamp(196px,17.5vw,268px) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"map finder" "map shops" "map join";
  gap:12px clamp(16px,2vw,28px);
  min-height:min(66vh,650px)}

.netwrap .netmap{grid-area:map;margin:0;padding:14px 12px 12px;
  display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;
  background:#fff;border-radius:15px;border:1px solid rgba(20,20,24,.09)}
.netwrap .netmap svg{display:block;width:100%;height:100%;min-height:0;max-width:100%;overflow:visible}
/* מתאר הארץ. בלעדיו 118 נקודות נקראות כתרשים פיזור. */
.ilmap{fill:#F1ECE2;stroke:#D6CEBF;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.netwrap .netmap-cap{text-align:center;line-height:1.4;align-self:end}

.netwrap .finder-bar{grid-area:finder;margin:0}
.netwrap .shops{grid-area:shops;margin:0;align-content:stretch;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.netwrap .shops .shop{justify-content:space-between}
.netwrap .dband{grid-area:join;margin:0}

/* קישור כל החנויות עבר לשורת הכלים — כפתור שלישי מתחת לכרטיסים היה שורה מיותרת */
.fb-note{flex:1 1 150px;min-width:0}
.fb-all{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--tech);font-style:italic;font-weight:700;font-size:12.5px;letter-spacing:.06em;
  color:#141418;text-decoration:none;padding-bottom:3px;border-bottom:1px solid rgba(20,20,24,.3)}
.fb-all:hover{color:#C80A04;border-bottom-color:#C80A04}
.fb-all:focus-visible{outline:3px solid #141418;outline-offset:3px}
.fb-all svg{width:14px;height:14px}

/* רצועת ההצטרפות — אופקית ונמוכה, כדי שתיכנס לאותו מסך */
.netwrap .dband{grid-template-columns:clamp(110px,13%,176px) minmax(0,1.25fr) auto auto;
  align-items:center;padding-inline-end:clamp(14px,1.8vw,26px)}
.netwrap .dband-im{min-height:0;align-self:stretch}
.netwrap .dband-tx{padding:16px clamp(16px,1.8vw,26px);gap:7px}
.netwrap .dband-tx b{font-size:11px}
.netwrap .dband-tx b em{margin-top:4px;font-size:clamp(17px,1.65vw,24px)}
.netwrap .dband-tx p{font-size:13px;max-width:40ch;line-height:1.45}
.netwrap .dband-l{gap:clamp(14px,1.7vw,26px);padding-inline-end:clamp(14px,1.8vw,26px)}
.netwrap .dband-l b{font-size:23px}
.netwrap .dband-cta{white-space:nowrap}

@media (max-width:1180px){
  .netwrap{grid-template-columns:clamp(168px,20vw,214px) minmax(0,1fr)}
  .netwrap .shops{grid-template-columns:repeat(2,minmax(0,1fr))}
  .netwrap .dband{grid-template-columns:clamp(96px,14%,150px) minmax(0,1fr) auto;
    grid-template-areas:"im tx cta"}
  .netwrap .dband-im{grid-area:im}
  .netwrap .dband-tx{grid-area:tx}
  .netwrap .dband-cta{grid-area:cta}
  .netwrap .dband-l{display:none}
}

@media (max-width:900px){
  .netwrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;
    grid-template-areas:"finder" "map" "shops" "join";min-height:0;gap:14px}
  .netwrap .netmap{grid-template-rows:auto auto}
  .netwrap .netmap svg{height:clamp(300px,56vw,430px)}
  .fb-all{margin-inline-start:0}
}

@media (max-width:640px){
  .netwrap .shops{grid-template-columns:minmax(0,1fr)}
  .netwrap .dband{grid-template-columns:minmax(0,1fr);grid-template-areas:"im" "tx" "cta";
    padding-inline-end:0}
  .netwrap .dband-im{min-height:150px}
  .netwrap .dband-cta{margin:0 clamp(16px,1.8vw,26px) 20px}
}

/* ---------- כותרת הסעיף ושורת הכלים בשורה אחת ----------
   שתי שורות נפרדות עלו 236px על כותרת ועוד 72 על המאתר. איחודן משחרר
   כ-190px לטובת המפה, וגם נכון יותר: הכותרת והכלי שלה יושבים ביחד. */
.netwrap{grid-template-areas:"map head" "map shops" "map join"}
.nethead{grid-area:head;display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:10px clamp(16px,2vw,30px)}
.nh-t{flex:1 1 280px;min-width:0}
.nh-t h2{margin:7px 0 5px;font-size:clamp(24px,2.25vw,35px);line-height:1.06}
.nh-t .lede{margin:0;font-size:13.5px;max-width:48ch;line-height:1.5}
.nethead .finder-bar{margin:0;flex:0 1 auto;align-items:flex-end}
.nethead .fb-all{margin-inline-start:6px}
.nethead > .fb-note{flex:1 1 100%;align-self:flex-start;min-height:0}
.nethead > .fb-note:empty{display:none}

@media (max-width:1180px){
  .nethead{align-items:stretch}
  .nethead .finder-bar{flex:1 1 100%}
  .nethead .fb-all{margin-inline-start:auto}
}


/* ============================================================
   §05 · חוקר הרכיבים — שני עולמות, כחצי מהגובה (18/9/2026)
   נמדד לפני: 1186px ב-1440×820 — כותרת 291, גוף 600, רשימת מפתח 67,
   וכ-230 ריפוד. שתי תמונות נפרדות לאותו רכיב הן שילמו את הגובה הזה:
   צילום הבסיס עם הנקודות, ועוד צילום מקרוב שמראה את אותו דבר.
   נשאר צילום אחד שהנקודה מצביעה עליו — וזה גם מה שמאפשר לעולם האופניים
   להיכנס לכאן בלי להמציא צילומי מקרוב שאין לנו.
   ============================================================ */
#mia{padding-block:clamp(34px,4vw,56px)}
.anat{display:grid;gap:clamp(16px,2vw,26px)}

.anat-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px clamp(16px,2vw,30px)}
.ah-t{flex:1 1 300px;min-width:0}
.ah-t h2{margin:7px 0 0;font-size:clamp(24px,2.35vw,36px);line-height:1.06}

/* מתג העולמות — הוא גם העדות שיש שני עולמות בקטלוג */
.anat-sw{display:inline-flex;gap:4px;padding:4px;background:#fff;
  border:1px solid rgba(20,20,24,.1);border-radius:15px}
.aw{appearance:none;-webkit-appearance:none;border:0;background:none;cursor:pointer;
  border-radius:12px;padding:9px 18px;display:grid;gap:2px;text-align:center;
  transition:background .2s ease}
.aw b{font-family:var(--disp);font-weight:800;font-size:14.5px;line-height:1.2;color:#141418}
.aw span{font-family:var(--tech);font-style:italic;font-weight:700;font-size:10.5px;
  letter-spacing:.07em;color:#6B6862}
.aw[aria-selected="true"]{background:#141419}
.aw[aria-selected="true"] b{color:#fff}
.aw[aria-selected="true"] span{color:#9A9AA6}
.aw:focus-visible{outline:3px solid #141418;outline-offset:2px}

.anat-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(16px,2vw,28px);align-items:stretch}

.anat-fig{background:#fff;border:1px solid rgba(20,20,24,.09);border-radius:15px;
  height:clamp(280px,31vw,420px);display:flex;align-items:center;justify-content:center;padding:14px}
/* הקואורדינטות נמדדו משמאל התמונה, אז המסגרת נשארת LTR גם בעמוד RTL */
.af-in{position:relative;height:100%;aspect-ratio:var(--ar,4/3);max-width:100%;direction:ltr}
.af-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

.adot{display:none;position:absolute;transform:translate(-50%,-50%);
  width:30px;height:30px;padding:0;border-radius:50%;border:2px solid #fff;
  background:#C80A04;color:#fff;cursor:pointer;place-items:center;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),background .2s ease}
.anat[data-w="0"] .adot[data-w="0"],.anat[data-w="1"] .adot[data-w="1"]{display:grid}
.adot i{font-family:var(--tech);font-style:italic;font-weight:700;font-size:13px;line-height:1}
.adot[aria-pressed="true"]{background:#141419;transform:translate(-50%,-50%) scale(1.3)}
.adot:focus-visible{outline:3px solid #141418;outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .adot:hover{transform:translate(-50%,-50%) scale(1.18)}
  .adot[aria-pressed="true"]:hover{transform:translate(-50%,-50%) scale(1.3)}
}
/* פעימה קצרה שמסגירה שהנקודות לחיצות. שלוש חזרות ודי — לולאה אין-סופית היא רעש. */
@keyframes czAdot{0%{box-shadow:0 0 0 0 rgba(200,10,4,.42)}70%{box-shadow:0 0 0 12px rgba(200,10,4,0)}100%{box-shadow:0 0 0 0 rgba(200,10,4,0)}}
.anat:not(.is-live) .adot{animation:czAdot 2.4s ease-out 3}

.anat-pan{background:#fff;border:1px solid rgba(20,20,24,.09);border-radius:15px;
  padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:9px}
.ap-c{font-family:var(--tech);font-style:italic;font-weight:700;font-size:12.5px;
  letter-spacing:.05em;color:#6B6862}
.ap-c b{color:#C80A04;font-size:16px}
.anat-pan h3{margin:0;font-family:var(--disp);font-weight:800;line-height:1.2;color:#141418;
  font-size:clamp(19px,1.8vw,25px)}
.anat-pan p{margin:0;font-size:14.5px;line-height:1.6;color:#57544F}
.anat-pan .val{align-self:flex-start;font-family:var(--tech);font-style:italic;font-weight:700;
  font-size:12.5px;letter-spacing:.05em;color:#C80A04;background:#FBEDEC;border-radius:999px;padding:7px 14px}

.ap-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:8px}
.apc{display:none;align-items:center;gap:7px;cursor:pointer;border-radius:999px;
  border:1px solid rgba(20,20,24,.14);background:#fff;padding:6px 13px 6px 7px;
  font-family:var(--body);font-weight:600;font-size:12.5px;color:#57544F;
  transition:border-color .2s ease,color .2s ease}
.anat[data-w="0"] .apc[data-w="0"],.anat[data-w="1"] .apc[data-w="1"]{display:inline-flex}
.apc i{width:19px;height:19px;border-radius:50%;background:#F1ECE2;display:grid;place-items:center;
  font-family:var(--tech);font-style:italic;font-weight:700;font-size:11px;color:#6B6862}
.apc[aria-pressed="true"]{border-color:#141419;color:#141418}
.apc[aria-pressed="true"] i{background:#C80A04;color:#fff}
.apc:focus-visible{outline:3px solid #141418;outline-offset:2px}
.anat-pan .btn{align-self:flex-start;margin-top:10px}

@media (max-width:900px){
  .anat-body{grid-template-columns:minmax(0,1fr)}
  .anat-fig{height:clamp(250px,58vw,370px)}
  .anat-sw{width:100%}
  .aw{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){
  .anat:not(.is-live) .adot{animation:none}
  .adot{transition:none}
}

/* עמודת הצילום מתאימה לכיוון התמונה: הקורקינט לרוחב, האופניים לאורך.
   בלי זה אחד מהשניים יושב עם 190px לבן מכל צד. */
.anat-body{transition:grid-template-columns .35s cubic-bezier(.2,.7,.2,1)}
.anat[data-w="0"] .anat-body{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)}
.anat[data-w="1"] .anat-body{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
.anat-fig{height:clamp(280px,33vw,466px)}
.ah-t .lede{margin:6px 0 0;font-size:13.5px;max-width:52ch;line-height:1.5}
@media (max-width:900px){
  .anat[data-w="0"] .anat-body,.anat[data-w="1"] .anat-body{grid-template-columns:minmax(0,1fr)}
  .anat-fig{height:clamp(250px,58vw,370px)}
}
@media (prefers-reduced-motion:reduce){ .anat-body{transition:none} }

/* תיקון מובייל לרשת המשווקים: בלוק ה-900 הקודם עדיין דיבר על אזור בשם "finder",
   שהוחלף ב-"head" כשאיחדתי את הכותרת עם שורת הכלים. תבנית שמציינת אזור שלא קיים
   נפסלת בשלמותה, ולכן המפה נשארה בעמודה של 15px בצד. נמדד ב-390. */
@media (max-width:900px){
  .netwrap{grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    grid-template-areas:"head" "map" "shops" "join";
    min-height:0;gap:14px}
  .netwrap .netmap{grid-template-rows:auto auto}
  .netwrap .netmap svg{height:clamp(300px,56vw,430px)}
  .nethead{align-items:stretch}
  .nethead .finder-bar{flex:1 1 100%}
  .nethead .fb-all{margin-inline-start:auto}
}


/* ============================================================
   §01 · היירו של שני עולמות (18/9/2026)
   עד כאן ההיירו הציג דגם אחד של אופניים, ושנים-עשר דגמי הקורקינט
   לא קיבלו אזכור במסך הראשון. שני הסרטונים הם צילום אמיתי של קורטז
   מעמוד הבית הישן, שקודד מחדש מ-29MB ל-1.4MB כל אחד.
   ============================================================ */
.hstage{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  transition:opacity .85s cubic-bezier(.2,.7,.2,1)}
.hero[data-w="0"] .hstage[data-w="0"],
.hero[data-w="1"] .hstage[data-w="1"]{opacity:1}
.hstage .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hstage .hero-vid{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1)}
.hstage .hero-vid.on{opacity:1}

/* החלפת תוכן לפי עולם — מסתירים את מה שלא נבחר בלבד,
   כך שאף ערך display קיים לא נדרס בדרך */
.hero[data-w="0"] .hero-box > [data-w="1"],
.hero[data-w="1"] .hero-box > [data-w="0"],
.hero[data-w="0"] > aside.float[data-w="1"],
.hero[data-w="1"] > aside.float[data-w="0"]{display:none}

/* הלוגוטיפ האנכי — היה מוגדר display:none בשכבה v8 ומעולם לא נראה.
   זה הנכס שעמוד הבית הישן משתמש בו (crtz.png, 249×693). */
.hero .ghost.ghost-v{display:block;position:absolute;z-index:2;pointer-events:none;
  inset-inline-start:clamp(14px,3.4vw,58px);top:0;
  height:clamp(190px,36vh,340px);width:auto;opacity:.17;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 62%,transparent 100%)}

/* מתג העולמות — בצד המנוגד לקופי, כדי שלא יתנגש בכותרת */
.hswitch{position:absolute;z-index:4;inset-inline-end:clamp(16px,3vw,44px);
  bottom:clamp(18px,3vw,56px);display:flex;gap:4px;padding:5px;
  background:rgba(14,14,18,.58);border:1px solid rgba(255,255,255,.16);
  border-radius:15px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hsw{appearance:none;-webkit-appearance:none;border:0;background:none;cursor:pointer;position:relative;
  padding:9px 17px 13px;border-radius:11px;color:#D2D2D8;
  font-family:var(--disp);font-weight:800;font-size:13.5px;line-height:1;
  transition:color .2s ease,background-color .2s ease}
.hsw:hover{color:#fff}
.hsw[aria-selected="true"]{background:rgba(255,255,255,.11);color:#fff}
.hsw:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hsw-bar{position:absolute;inset-inline:13px;bottom:6px;height:2px;display:block;
  background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.hsw-bar i{display:block;height:100%;width:0;background:#E8231C;border-radius:2px}
.hero.ticking .hsw[aria-selected="true"] .hsw-bar i{animation:czTick 7s linear forwards}
@keyframes czTick{from{width:0}to{width:100%}}

@media (max-width:980px){
  .hero .ghost.ghost-v{height:clamp(150px,26vh,230px);opacity:.14}
  .hswitch{inset-inline-end:auto;inset-inline-start:var(--pad,20px);bottom:auto;top:calc(100% - 100% + 18px)}
}
@media (max-width:760px){
  .hswitch{position:static;margin:0 var(--pad,20px) 18px;align-self:flex-start;
    inset:auto;width:calc(100% - (var(--pad,20px) * 2))}
  .hsw{flex:1 1 0;text-align:center}
  .hero{flex-direction:column;justify-content:flex-end}
  .hero .ghost.ghost-v{inset-inline-start:auto;inset-inline-end:14px;opacity:.12}
}
@media (prefers-reduced-motion:reduce){
  .hstage{transition:none}
  .hsw-bar i{animation:none !important}
  .hstage .hero-vid{display:none}
}

/* תיקוני היירו אחרי מדידה ב-1440×900:
   הסעיף יצא 792px מתחת להדר של 173px — סך 965, וה-CTA ירד מתחת לקו הקיפול.
   בנוסף כרטיס המפרט מוצמד לתחתית (bottom:56px משכבה קודמת) והתנגש במתג. */
.hero{min-height:min(70vh,680px)}
.hero aside.float{top:clamp(86px,15%,140px);bottom:auto}
.hstage[data-w="1"] .hero-img{object-position:50% 45%}
.hero .ghost.ghost-v{opacity:.3}

@media (max-width:1100px){
  .hero aside.float{display:none !important}
  .hero .ghost.ghost-v{height:clamp(140px,22vh,210px)}
}
@media (max-width:760px){
  .hero{min-height:min(76vh,620px)}
}


/* ============================================================
   §12 · רצועת נסיעת המבחן + פוטר מלא + כפתור צף + באנר עוגיות (18/9/2026)
   הרקע הוא פריים מסרטון רחוב אמיתי של קורטז שלא מופיע בשום מקום אחר בעמוד.
   ============================================================ */
.tride{position:relative;overflow:hidden;isolation:isolate;background:#141419;color:#F4F4F6}
.tride-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.tride::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,13,17,.72),rgba(13,13,17,.9))}
.tride-mark{position:absolute;z-index:-1;inset-inline-end:clamp(10px,3vw,60px);top:50%;
  transform:translateY(-50%);height:clamp(180px,62%,420px);width:auto;opacity:.14;pointer-events:none}
.tride-in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,3.4vw,54px);align-items:center;padding-block:clamp(46px,5.6vw,84px)}
.tride-tx h2{margin:8px 0 12px;color:#fff}
.tride-tx .lede{margin:0;color:rgba(255,255,255,.8);max-width:44ch;font-size:15.5px;line-height:1.6}
.tride .idx i{background:rgba(255,255,255,.16);color:#fff}
.tride .idx b{color:rgba(255,255,255,.74)}
.tride-l{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,38px);margin:22px 0 0;padding:0}
.tride-l li{list-style:none}
.tride-l b{display:block;font-family:var(--tech);font-style:italic;font-weight:700;font-size:26px;color:#fff;line-height:1}
.tride-l span{display:block;margin-top:5px;font-size:12.5px;color:rgba(255,255,255,.62)}

.tride-f{background:#fff;border-radius:15px;padding:clamp(20px,2.4vw,32px);display:grid;gap:13px;color:#141418}
.tride-f h3{margin:0;font-family:var(--disp);font-weight:800;font-size:clamp(18px,1.8vw,23px);color:#141418}
.tf-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tf-fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.tf-fld label{font-family:var(--tech);font-style:italic;font-weight:700;font-size:11.5px;letter-spacing:.06em;color:#6B6862}
.tf-fld input,.tf-fld select{appearance:none;-webkit-appearance:none;width:100%;min-height:48px;
  background:#FAF8F4;border:1px solid rgba(20,20,24,.16);border-radius:12px;padding:12px 14px;
  font-family:var(--body);font-size:15px;font-weight:600;color:#141418}
.tf-fld input:focus-visible,.tf-fld select:focus-visible{outline:3px solid #141418;outline-offset:2px}
.tride-f .btn{justify-self:start;min-height:50px}
.tf-note{margin:0;font-size:12.5px;color:#6B6862}
.tf-note a{color:#C80A04;font-weight:700}
.tf-ok{margin:0;padding:11px 14px;border-radius:12px;background:#EAF6EC;color:#1E5B2B;font-size:14px;font-weight:700}
.tf-err{margin:0;padding:11px 14px;border-radius:12px;background:#FBEDEC;color:#9B0A05;font-size:14px;font-weight:700}
.tf-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- פוטר ---------- */
.ft-in{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}
.ft-brand p{margin:16px 0 0;font-size:14px;max-width:36ch;line-height:1.6}
.ft-soc{display:flex;gap:9px;margin:18px 0 0;padding:0}
.ft-soc li{list-style:none}
.ft-soc a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);color:#fff;transition:background-color .2s ease,border-color .2s ease}
.ft-soc svg{width:18px;height:18px;fill:currentColor}
.ft-soc a:hover{background:#C80A04;border-color:#C80A04;color:#fff}
.ft-cont li{list-style:none}
.ft-b{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.ft-cr a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.34)}
.ft-cr a:hover{color:#E8231C;border-bottom-color:#E8231C}

/* ---------- כפתור צף ---------- */
.cfab{position:fixed;z-index:90;right:clamp(14px,1.8vw,26px);bottom:clamp(14px,1.8vw,26px);
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility .3s}
.cfab.show{opacity:1;visibility:visible;transform:none}
.cfab-items{display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transform-origin:bottom right;
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.7,.2,1),visibility .25s}
.cfab.open .cfab-items{opacity:1;visibility:visible;transform:none}
.cfab-i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#141419;color:#fff;border:1px solid rgba(255,255,255,.2);text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease}
.cfab-i svg{width:19px;height:19px;fill:currentColor;stroke:none}
.cfab-i:hover,.cfab-i:focus-visible{background:#C80A04;border-color:#C80A04;color:#fff}
.cfab-row{display:flex;align-items:center;gap:8px}
.cfab-cta{background:#C80A04;color:#fff;border-radius:999px;padding:13px 21px;text-decoration:none;
  font-family:var(--disp);font-weight:800;font-size:14px;white-space:nowrap;
  transition:background-color .2s ease}
.cfab-cta:hover,.cfab-cta:focus-visible{background:#9E0803;color:#fff}
.cfab-tog{width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:#141419;color:#fff;border:1px solid rgba(255,255,255,.22);padding:0}
.cfab-tog svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.cfab.open .cfab-tog svg{transform:rotate(45deg)}
.cfab-tog:hover{background:#C80A04;border-color:#C80A04}
.cfab a:focus-visible,.cfab button:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---------- באנר עוגיות ---------- */
.ckie{position:fixed;z-index:95;left:50%;transform:translateX(-50%) translateY(12px);
  bottom:clamp(12px,1.8vw,24px);width:min(560px,calc(100vw - 28px));
  background:#fff;border:1px solid rgba(20,20,24,.16);border-radius:15px;
  padding:15px 18px;display:grid;gap:12px;opacity:0;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.ckie.in{opacity:1;transform:translateX(-50%)}
.ckie p{margin:0;font-size:13.5px;line-height:1.55;color:#57544F}
.ckie p a{color:#C80A04;font-weight:700}
.ckie-b{display:flex;gap:9px;flex-wrap:wrap}
.ckie-b .btn{min-height:42px;padding-block:10px;font-size:13.5px}

/* ---------- שאלות נפוצות: שתי עמודות במסך רחב, אחת בצר ---------- */
@media (min-width:1080px){
  .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(16px,1.8vw,26px);align-content:start}
  .faq details{margin:0}
}

@media (max-width:1000px){
  .tride-in{grid-template-columns:minmax(0,1fr)}
  .tride-mark{opacity:.1;height:clamp(150px,44%,280px)}
  .ft-in{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:760px){
  .cfab{display:none}
  .ckie{bottom:calc(69px + 12px)}
  .tf-g{grid-template-columns:1fr}
  .tride-f .btn{justify-self:stretch;text-align:center;justify-content:center}
  .ft-in{grid-template-columns:1fr 1fr}
  .ft-b{justify-content:flex-start}
}
@media (max-width:520px){
  .ft-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cfab,.cfab-items,.ckie,.cfab-tog svg{transition:none}
}

/* תיקונים אחרי מדידה בדפדפן:
   1. איקוני הרשתות בפוטר הסתדרו טור אנכי — שכבה קודמת קובעת display:grid לכל ul בפוטר.
   2. כפתור «רק הכרחיות» יצא טקסט בצבע rgb(244,244,246) על כרטיס לבן — בלתי נראה לחלוטין.
      btn-ghost עוצב לרקע כהה; בכל משטח בהיר חייבים להפוך אותו.
   3. סימן הלוגו ברצועה הסתתר מאחורי כרטיס הטופס. */
.ft .ft-in .ft-soc{display:flex;flex-direction:row;flex-wrap:wrap;gap:9px;align-items:center}

.ckie .btn-ghost,.tride-f .btn-ghost,.shops .btn-ghost{color:#141418;border-color:rgba(20,20,24,.34);opacity:1}
.ckie .btn-ghost:hover,.tride-f .btn-ghost:hover,.shops .btn-ghost:hover{background:#141418;color:#fff;border-color:#141418}

.tride-mark{inset-inline-start:auto;inset-inline-end:auto;right:-3%;left:auto;
  top:auto;bottom:-14%;transform:none;height:clamp(200px,96%,480px);opacity:.11}
@media (max-width:1000px){
  .tride-mark{right:-8%;bottom:-8%;height:clamp(150px,52%,300px);opacity:.09}
}

/* ============================================================
   ניגודיות — נמדדה בדפדפן על הצבעים שהוא חישב בפועל, לא נקראה מהקוד.
   24 כשלים, 6 ייחודיים. כל תיקון מזיז רק את הצד הצבעוני, באותו גוון ורוויה (חוק 38ד).
   רקע חול (#E8DFD0): טקסט מועעם #6E6757 נתן 4.25 — יורד ל-#5F5A50 ועולה ל-5.28.
   ============================================================ */
.s-sand .lede,.s-bone .lede,.s-sand .idx b,.s-bone .idx b{color:#5F5A50}
.s-sand .fb-field label,.s-bone .fb-field label,.nethead .fb-field label,
.s-sand .tf-fld label,.s-bone .tf-fld label{color:#5F5A50}
.s-sand .chip,.s-bone .chip,.s-sand .pc .chip:first-child,.s-bone .pc .chip:first-child{color:#C80A04;border-color:#C80A04}
.specbar .sl{color:#5A5750}

/* התיקון הקודם של ה-specbar היה שגוי: הרצועה אדומה (#E50B05) ולא לבנה,
   והכהייתי טקסט שיושב על אדום — 1.5 בלבד. נמדד ותוקן. */
.specbar .sl{color:#fff}
.trust span{color:#5F5C57}


/* ============================================================
   הדר ותפריט (18/9/2026)
   הדר של 173px מעל היירו של 630 משאיר מעט מאוד מהמסך לתוכן,
   ולכן הוא מתכווץ בגלילה. במובייל הניווט עובר למגירה במקום להישבר לשתי שורות.
   ============================================================ */
.hdr{transition:box-shadow .25s ease,background-color .25s ease}
.hdr .hrow1,.hdr .hrow2{transition:padding-block .3s cubic-bezier(.2,.7,.2,1)}
.hdr.small{box-shadow:0 1px 0 rgba(255,255,255,.08)}
@media (min-width:1101px){
  .hdr.small .hrow1{padding-block:5px}
  .hdr.small .hrow2{padding-block:2px}
  .hdr.small .hrow1 img{max-height:34px}
}

/* קו תחתון נפתח בריחוף — סימן ניווט ברור במקום שינוי צבע בלבד */
.hrow2 a{position:relative}
.hrow2 a::after{content:"";position:absolute;inset-inline:0;bottom:-5px;height:2px;
  background:#E8231C;border-radius:2px;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.hrow2 a:hover::after,.hrow2 a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.hrow2 a.nav-all::after{background:#fff}

.hburger{display:none}
.hdraw{display:none}

@media (max-width:1100px){
  .hburger{display:grid;place-items:center;align-content:center;gap:5px;
    width:44px;height:44px;padding:0;border-radius:12px;cursor:pointer;
    border:1px solid rgba(255,255,255,.22);background:transparent}
  .hburger span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;
    transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .18s ease}
  .hburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hburger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hburger:focus-visible{outline:3px solid #fff;outline-offset:2px}

  .hdr .worlds,.hdr .hrow2,.hdr .testride{display:none}
  .hdr .hrow1{gap:10px}

  .hdraw{display:grid;position:fixed;z-index:75;inset-inline:0;
    top:var(--czHdr,120px);bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;
    background:#0D0D11;padding:18px var(--pad,20px) calc(30px + env(safe-area-inset-bottom,0px));
    align-content:start;gap:12px;opacity:0;transform:translateY(-10px);
    transition:opacity .25s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
  .hdraw.open{opacity:1;transform:none}
  .hd-worlds{display:grid;gap:10px}
  .hd-w{display:grid;gap:3px;padding:16px 18px;border-radius:15px;text-decoration:none;
    background:#17171C;border:1px solid rgba(255,255,255,.1)}
  .hd-w b{font-family:var(--disp);font-weight:800;font-size:16px;color:#fff}
  .hd-w span{font-family:var(--tech);font-style:italic;font-weight:700;font-size:11.5px;
    letter-spacing:.06em;color:#9A9AA6}
  .hd-w:hover,.hd-w:focus-visible{border-color:#C80A04}
  .hd-nav{display:grid;margin-top:4px}
  .hd-nav a{padding:13px 2px;font-family:var(--disp);font-weight:700;font-size:15.5px;
    color:#E6E6EA;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .hd-nav a:hover,.hd-nav a:focus-visible{color:#fff}
  .hd-cta{margin-top:10px;justify-content:center;min-height:52px}
  .hd-tel{justify-self:center;margin-top:2px;font-family:var(--tech);font-style:italic;
    font-weight:700;font-size:16px;color:#fff;text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:3px}
  body.czdraw{overflow:hidden}
}

@media (max-width:640px){
  .strip li:nth-child(n+3){display:none}
}

/* ויניטה בפינה שבה יושב הלוגוטיפ האנכי — בלעדיה לוגו לבן על קיר בהיר פשוט נעלם */
.hero::before{content:"";position:absolute;z-index:1;inset-inline-start:0;top:0;
  width:min(38%,460px);height:min(62%,420px);pointer-events:none;
  background:radial-gradient(130% 100% at 100% 0%,rgba(8,8,12,.62),rgba(8,8,12,0) 72%)}

@media (prefers-reduced-motion:reduce){
  .hdr .hrow1,.hdr .hrow2,.hdraw,.hburger span,.hrow2 a::after{transition:none}
}

/* תיקוני מובייל אחרי צילום ב-390:
   מתג העולמות נפל מתחת ל-CTA והוסתר בידי באנר העוגיות;
   הבאנר הופיע גם מעל המגירה הפתוחה. */
@media (max-width:760px){
  .hswitch{order:-1;align-self:flex-start;margin:0 var(--pad,20px) 14px;
    margin-top:clamp(14px,3vw,22px)}
  .hero{justify-content:space-between}
  .hero-in{margin-top:auto}
}
body.czdraw .ckie{display:none}
body.czdraw .cfab{display:none}
@media (max-width:1100px){
  .hdraw{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .hd-cta{position:sticky;bottom:0;margin-top:14px}
}


/* ============================================================
   הבאג שהבעלים ראה: כפתור רפאים שהופך לשחור-על-שחור בריחוף (18/9/2026)
   השורש: שכבה קודמת קובעת `.btn-ghost:hover{background:currentColor;color:var(--w)}`.
   רקע currentColor נפתר מערך ה-color הסופי של אותו אלמנט, ולכן כל כלל מאוחר
   שמשנה את ה-color מזיז את הרקע איתו — והשניים לעולם לא ייצרו ניגודיות.
   בהיירו `.hero .btn-ghost:hover{color:var(--black)}` הפך את הרקע לשחור גם הוא.
   מעכשיו כל מצב ריחוף קובע זוג מפורש של רקע וטקסט, לעולם לא currentColor.
   ============================================================ */
.btn-ghost:hover,.btn-ghost:focus-visible{opacity:1;background:#FFFFFF;color:#141418;border-color:#FFFFFF}

/* על רקע כהה — גלולה לבנה עם טקסט כהה */
.hero .btn-ghost:hover,.hero .btn-ghost:focus-visible,
.s-carbon .btn-ghost:hover,.s-carbon .btn-ghost:focus-visible,
.tride .btn-ghost:hover,.tride .btn-ghost:focus-visible,
.bar .btn-ghost:hover,.bar .btn-ghost:focus-visible,
.dband .btn-ghost:hover,.dband .btn-ghost:focus-visible,
.hdraw .btn-ghost:hover,.hdraw .btn-ghost:focus-visible{background:#FFFFFF;color:#141418;border-color:#FFFFFF}

/* על רקע בהיר — גלולה כהה עם טקסט לבן */
.s-bone .btn-ghost:hover,.s-bone .btn-ghost:focus-visible,
.s-sand .btn-ghost:hover,.s-sand .btn-ghost:focus-visible,
.ckie .btn-ghost:hover,.ckie .btn-ghost:focus-visible,
.tride-f .btn-ghost:hover,.tride-f .btn-ghost:focus-visible,
.netwrap .btn-ghost:hover,.netwrap .btn-ghost:focus-visible,
.anat-pan .btn-ghost:hover,.anat-pan .btn-ghost:focus-visible{background:#141418;color:#FFFFFF;border-color:#141418}

/* אותה מלכודת קיימת גם בכפתורים האחרים — נעילת זוג מפורש */
.btn-red:hover,.btn-red:focus-visible{background:#9E0803;color:#fff;border-color:#9E0803}
.btn-ink:hover,.btn-ink:focus-visible{background:#C80A04;color:#fff;border-color:#C80A04}
.btn-white:hover,.btn-white:focus-visible{background:#C80A04;color:#fff;border-color:#C80A04}

/* קרדיט SGO בריחוף: #E8231C על #0A0A0C נמדד 4.42 — מתחת לסף. אותו גוון, בהיר יותר. */
.ft-cr a:hover,.ft-cr a:focus-visible{color:#F2453E;border-bottom-color:#F2453E}


/* ============================================================
   מפרט הכרטיס — רשת 2×2 עם איקונים במקום ארבע תגיות שנשברו 3+1 (18/9/2026)
   ============================================================ */
.pspecs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px clamp(8px,1vw,14px);
  margin:10px 0 2px}
.ps{display:flex;align-items:center;gap:7px;min-width:0}
.ps svg{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:#C80A04;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ps b{font-family:var(--body);font-weight:600;font-size:12.5px;line-height:1.3;color:#57544F;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-carbon .ps b,.hero .ps b{color:#B9B9C2}
.s-carbon .ps svg,.hero .ps svg{stroke:#E8231C}
@media (max-width:420px){
  .pspecs{gap:6px 8px}
  .ps b{font-size:12px}
}

/* ---------- זכוכית מגדלת בחוקר הרכיבים ----------
   מראה את הרכיב מקרוב בלי להוסיף ולו פיקסל אחד לגובה הסעיף.
   בעולם הקורקינט זה צילום מקרוב אמיתי; בעולם האופניים זו הגדלה של אותו צילום עצמו,
   כי אין לנו צילומי מקרוב לאופניים ולא המצאתי כאלה. */
.anat-fig{position:relative}
.af-loupe{position:absolute;z-index:3;left:14px;bottom:14px;
  width:clamp(104px,27%,172px);aspect-ratio:4/3;border-radius:13px;
  border:2px solid #fff;background:#F1ECE2 center/cover no-repeat;
  opacity:0;transform:translateY(8px) scale(.97);pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
.anat.is-live .af-loupe{opacity:1;transform:none}
@media (max-width:640px){ .af-loupe{width:34%;left:10px;bottom:10px} }

/* ---------- פס הלוגו בין הסעיפים ----------
   רצועה כהה דקה עם הלוגוטיפ במרכז. הלוגו לבן ולכן הוא חייב רקע כהה —
   היפוך צבעים ב-filter היה הופך את האדום שבו לתכלת. */
.secrule{background:#141419;display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.6vw,38px);padding:clamp(16px,2vw,26px) var(--pad,28px)}
.secrule i{flex:1 1 0;max-width:340px;height:1px;
  background:linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,.24),rgba(255,255,255,0))}
.secrule img{height:clamp(18px,2vw,26px);width:auto;opacity:.82;flex:0 0 auto}

/* ---------- הרחבת המפה ---------- */
.netmap{position:relative}
.netmap-exp{position:absolute;top:10px;inset-inline-end:10px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:7px 11px;border-radius:999px;border:1px solid rgba(20,20,24,.16);
  background:#fff;color:#141418;font-family:var(--body);font-weight:700;font-size:12px;
  transition:border-color .2s ease,color .2s ease}
.netmap-exp svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.netmap-exp:hover{border-color:#C80A04;color:#C80A04}
.netmap-exp:focus-visible{outline:3px solid #141418;outline-offset:2px}

.mmodal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(12px,3vw,40px);background:rgba(10,10,14,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .28s ease}
.mmodal.in{opacity:1}
.mm-card{position:relative;background:#fff;border-radius:15px;padding:clamp(14px,2vw,26px);
  width:min(100%,540px);max-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}
.mm-card h3{margin:0;font-family:var(--disp);font-weight:800;font-size:clamp(17px,2vw,22px);color:#141418;
  padding-inline-end:44px}
.mm-body{min-height:0;display:grid;place-items:center}
.mm-body svg{width:auto;height:100%;max-height:min(66vh,620px);max-width:100%;display:block;overflow:visible}
.mm-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.mm-foot span{font-family:var(--tech);font-style:italic;font-size:12.5px;color:#6B6862}
.mm-x{position:absolute;top:10px;inset-inline-end:10px;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(20,20,24,.16);background:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.mm-x svg{width:16px;height:16px;fill:none;stroke:#141418;stroke-width:2;stroke-linecap:round}
.mm-x:hover{background:#141418}
.mm-x:hover svg{stroke:#fff}
.mm-x:focus-visible{outline:3px solid #141418;outline-offset:2px}
body.czmm{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .af-loupe,.mmodal,.netmap-exp{transition:none}
}

/* הלופה נראית מהרגע הראשון ולא רק אחרי לחיצה — הבעלים ביקש שתוצג תמונה, לא שתתגלה */
.af-loupe{opacity:1;transform:none;
  transition:background-image .2s ease,opacity .28s ease,transform .28s cubic-bezier(.2,.7,.2,1)}

/* הלופה נקראה כמוצר שני צף בפינה ולא כהגדלה של הנקודה הנבחרת.
   מסגרת לבנה על כרטיס לבן היא גם בלתי נראית. עכשיו יש לה קו שיער, רקע חול ומספר. */
.af-loupe{border:1px solid rgba(20,20,24,.14);background-color:#F4F0E8;
  box-shadow:0 0 0 5px rgba(255,255,255,.9)}
.af-loupe::after{content:attr(data-n);position:absolute;top:-9px;inset-inline-start:-9px;
  width:26px;height:26px;border-radius:50%;background:#C80A04;color:#fff;
  display:grid;place-items:center;font-family:var(--tech);font-style:italic;font-weight:700;
  font-size:11.5px;border:2px solid #fff}

/* פס הלוגו יצא עדין מדי במדידה — לוגו גדול יותר וקו שיער נראה יותר */
.secrule{padding-block:clamp(20px,2.4vw,32px)}
.secrule img{height:clamp(22px,2.4vw,32px);opacity:.9}
.secrule i{max-width:400px;
  background:linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,.34),rgba(255,255,255,0))}

/* ═══════════════════════════════════════════════════════════════════
   תיקון חוסם: שכבות שהוסתרו ב-opacity:0 בלבד המשיכו לקבל לחיצות.
   .mmodal פרוש על כל המסך ב-z-index 120, ולכן בלע כל לחיצה בעמוד.
   .hdraw עושה אותו דבר במובייל. .ckie חוסם רצועה בתחתית.
   opacity אינו מנגנון הסתרה — הוא מנגנון שקיפות.
   בנוסף: opacity:0 לבדו משאיר את התוכן במסלול ה-Tab ובקורא המסך.
   ═══════════════════════════════════════════════════════════════════ */
.mmodal{visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s}
.mmodal.in{visibility:visible;pointer-events:auto;
  transition:opacity .28s ease,visibility 0s linear 0s}

.ckie{visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s linear .3s}
.ckie.in{visibility:visible;pointer-events:auto;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s linear 0s}

@media (max-width:1100px){
  .hdraw{visibility:hidden;pointer-events:none;
    transition:opacity .25s ease,transform .25s cubic-bezier(.2,.7,.2,1),visibility 0s linear .25s}
  .hdraw.open{visibility:visible;pointer-events:auto;
    transition:opacity .25s ease,transform .25s cubic-bezier(.2,.7,.2,1),visibility 0s linear 0s}
}

@media (prefers-reduced-motion:reduce){
  .mmodal,.mmodal.in,.ckie,.ckie.in{transition:none}
  .hdraw,.hdraw.open{transition:none}
}

/* ═════ שכבה 13 ═════ */

/* כפתור צף: ב-RTL, align-items:flex-end בעמודת flex מיישר שמאלה ולא ימינה,
   ולכן טור האיקונים נצמד לקצה השמאלי של השורה הרחבה במקום לשבת מעל המתג. */
.cfab{align-items:flex-start}
.cfab-items{align-items:flex-start;transform-origin:bottom right}

/* שאלות נפוצות: שני טורים עצמאיים.
   קודם כל שאלה הייתה תא בגריד של שני טורים, ושורת גריד חולקת גובה —
   לכן פתיחת שאלה בטור אחד מתחה את השכנה מולה. עכשיו כל טור הוא תא אחד
   שמכיל ערימה עצמאית, ולכן הוא גדל לבד בלי לגעת בשכן. */
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;
  max-width:940px;margin-inline:auto;align-items:start}
.faq-col{display:grid;gap:10px;align-content:start;min-width:0}
@media (min-width:1080px){
  .faq{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,26px);
    max-width:1180px;align-items:start}
  .faq details{margin:0}
}

/* רצועת הלוגו בין הסקשנים.
   הסלוגן המאומת שלהם — CHARGE. RIDE. CORTEZ. REPEAT. — כשהלוגו עצמו
   תופס את מקומה של המילה CORTEZ. המילים רפאים והלוגו הוא הדבר היחיד שבולט. */
.lband{background:#141419;overflow:hidden;position:relative;
  display:flex;justify-content:center;padding-block:clamp(18px,2.2vw,30px)}
.lband::before,.lband::after{content:"";position:absolute;top:0;bottom:0;z-index:2;
  width:clamp(36px,7vw,120px);pointer-events:none}
.lband::before{left:0;background:linear-gradient(to right,#141419,rgba(20,20,25,0))}
.lband::after{right:0;background:linear-gradient(to left,#141419,rgba(20,20,25,0))}
.lb-t{display:flex;align-items:center;flex:0 0 auto;direction:ltr;
  gap:clamp(16px,2.3vw,32px);will-change:transform}
.lb-u{display:flex;align-items:center;gap:clamp(16px,2.3vw,32px);flex:0 0 auto}
.lb-u i{font-family:var(--disp);font-style:normal;font-weight:800;text-transform:uppercase;
  letter-spacing:.13em;font-size:clamp(12px,1.45vw,19px);white-space:nowrap;
  color:rgba(255,255,255,.15)}
.lb-u img{height:clamp(16px,1.85vw,25px);width:auto;opacity:.92;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){
  .lb-t{transform:none !important}
}

/* ═════ שכבה 14 ═════ */

/* אייקון ההגדלה נמתח ל-300×300 ובלע את המפה.
   הסיבה: הכלל `.netwrap .netmap svg` נועד למפה עצמה, אבל הוא תופס כל svg צאצא
   והספציפיות שלו (0,3,1) גבוהה מזו של `.netmap-exp svg` (0,2,1). */
.netmap .netmap-exp svg,
.netwrap .netmap .netmap-exp svg{width:14px;height:14px;min-height:0;flex:0 0 auto}

/* הדר: שורת הניווט נעלמה לגמרי בגלילה (display:none בשכבה v8),
   ולכן מהרגע שמתחילים לגלול אי אפשר לנווט. עכשיו היא מתכווצת במקום להיעלם. */
@media (min-width:1101px){
  .hdr.small .hrow2{display:flex;padding-block:0 9px;gap:22px}
  .hdr.small .hrow2 a{font-size:14px}
  .hdr.small .hrow1{padding-block:5px}
}

/* הסעיף שנמצא עכשיו במסך מסומן — שורת ניווט שאינה אומרת איפה אנחנו
   היא רשימת קישורים, לא מפת מיקום. */
.hrow2 a.is-cur{color:#fff}
.hrow2 a.is-cur::after{transform:scaleX(1);transform-origin:0 50%}

.hdr.small{box-shadow:0 1px 0 rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.3)}
#prog{height:3px;box-shadow:0 0 10px rgba(232,35,28,.45)}

/* רצועת המותגים נעצרת כשהיא מחוץ למסך או כשהלשונית ברקע */
.brand-rail.paused .brand-track{animation-play-state:paused}

/* התמונה באודות נסחפת קלות — המסגרת חותכת כדי שלא ייפתח פס ריק */
.about-im{overflow:hidden}
.about-im img{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .brand-track{animation:none}
  .about-im img{transform:none !important}
}

/* ═════ שכבה 16 — התפריט מוביל לכל האתר, לא רק בתוך העמוד ═════ */

.hrow2{flex-wrap:nowrap;gap:clamp(12px,1.5vw,24px)}
.hrow2 a.nav-all{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:800}
.hrow2 a.nav-all i{font-style:normal;font-family:var(--tech,inherit);font-size:11px;font-weight:700;
  line-height:1;padding:3px 6px;border-radius:999px;background:#E8231C;color:#fff}

/* תפריט הקפיצה לסעיפי העמוד — שומר על שורה אחת ועדיין נותן את כל הסעיפים */
.hjump{position:relative}
.hjump-b{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:5px 11px;
  border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;
  font-family:var(--body);font-size:14px;font-weight:600;color:rgba(255,255,255,.8);
  transition:border-color .2s ease,color .2s ease}
.hjump-b:hover,.hjump-b[aria-expanded="true"]{color:#fff;border-color:rgba(255,255,255,.55)}
.hjump-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.hjump-b[aria-expanded="true"] svg{transform:rotate(180deg)}
.hjump-c{color:#E8231C;font-weight:800;white-space:nowrap}
.hjump-c:empty{display:none}
.hjump-c::before{content:"·";margin-inline-end:5px;color:rgba(255,255,255,.35)}

.hjump-m{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:80;
  min-width:210px;display:grid;gap:2px;padding:8px;border-radius:15px;
  background:#17171C;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.7,.2,1),visibility .2s}
.hjump.open .hjump-m{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hjump-m a{display:block;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:600;
  color:rgba(255,255,255,.82);white-space:nowrap;transition:background-color .18s ease,color .18s ease}
.hjump-m a::after{display:none}
.hjump-m a:hover,.hjump-m a:focus-visible{background:#22222B;color:#fff}
.hjump-m a.is-cur{background:#E8231C;color:#fff}

/* המגירה במובייל: מפרידים בין עמודי האתר לסעיפי העמוד */
.hd-sep{display:block;margin:14px 0 2px;font-family:var(--tech);font-style:italic;
  font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.4)}

@media (max-width:1240px){
  .hrow2{overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-inline:22px}
  .hrow2::-webkit-scrollbar{display:none}
  .hjump-m{inset-inline-end:auto;inset-inline-start:0}
}
@media (prefers-reduced-motion:reduce){
  .hjump-m,.hjump-b svg{transition:none}
}

/* ═════ שכבה 17 ═════ */

/* פס ההתקדמות עובר לשליטת JS — הוא מודד את הסרטון ולא שבע שניות קצובות */
.hero.ticking .hsw[aria-selected="true"] .hsw-bar i,
.hsw-bar i{animation:none}
.hsw-bar i{transition:width .08s linear}

/* כניסת התוכן במעבר בין העולמות — הטקסט עולה במדרגות במקום להחליף בבת-אחת */
@keyframes czHeroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero.swap .hero-box > [data-w] > *{animation:czHeroIn .58s cubic-bezier(.2,.7,.2,1) both}
.hero.swap .hero-box > [data-w] > *:nth-child(1){animation-delay:.03s}
.hero.swap .hero-box > [data-w] > *:nth-child(2){animation-delay:.10s}
.hero.swap .hero-box > [data-w] > *:nth-child(3){animation-delay:.17s}
.hero.swap .hero-box > [data-w] > *:nth-child(4){animation-delay:.24s}
.hero.swap .hero-box > [data-w] > *:nth-child(5){animation-delay:.31s}
.hero.swap .hero-box > [data-w] > *:nth-child(6){animation-delay:.38s}
.hero.swap aside.float{animation:czHeroIn .58s cubic-bezier(.2,.7,.2,1) .26s both}

/* כש-GSAP מנהל את הכניסות, מעבר ה-CSS מפסיק להתחרות איתו על אותו אלמנט */
.gsap-rv .rv{transition:none}

@media (prefers-reduced-motion:reduce){
  .hero.swap .hero-box > [data-w] > *,
  .hero.swap aside.float{animation:none}
  .hsw-bar i{transition:none}
}

/* ═════ שכבה 18 ═════ */

/* רצועת הלוגו היא טקסט לטיני בלבד, ולכן היא לוקחת את הפונט הטכני של המערכת
   ולא את פונט הכותרות העברי. Chakra Petch נטען במשקלי איטליק בלבד. */
.lb-u i{font-family:var(--tech);font-style:italic;font-weight:700;letter-spacing:.1em}

/* ═════ שכבה 19 — הפאנל של חוקר הרכיבים ═════ */

/* במסך רחב הפאנל היה גבוה מהתוכן שלו ונפער באמצע שטח מת.
   עכשיו הוא נושא את המפרט האמיתי של הדגם ואת שורת המחיר —
   מידע שקיים בעמוד המוצר שלהם, לא מילוי. */
.anat-pan{display:flex;flex-direction:column;gap:14px}
.ap-spec{margin-top:6px}
.aps{display:none}
.anat[data-w="0"] .aps[data-w="0"],
.anat[data-w="1"] .aps[data-w="1"]{display:grid;gap:12px}
.aps-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding-top:12px;border-top:1px solid rgba(20,20,24,.1)}
.aps-p b{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.2vw,26px);color:#141418;line-height:1}
.aps-p span{font-family:var(--tech);font-style:italic;font-size:12.5px;color:#6B6862}
.ap-chips{margin-top:auto}

@media (max-width:900px){
  .anat-pan{gap:12px}
  .ap-spec{margin-top:2px}
  .aps-p b{font-size:20px}
}

/* ═════ שכבה 20 ═════ */

/* הכלל שמקטין את הלוגו בגלילה נכתב כ-`.hdr.small .hrow1 img`,
   ולכן הוא תפס כל תמונה בשורה — גם את צילום המגה, שנמעך מ-356px ל-34px.
   התסמין היה שהתמונה נראתה תקינה בראש העמוד ונחתכה רק אחרי גלילה. */
.hdr.small .hrow1 img{max-height:none}
.hdr.small .hrow1 .logo img{max-height:34px}

/* ═════ שכבה 21 — ההיירו ═════ */

/* הקופי ישב על וילון אחיד שהחשיך גם את הכלי.
   עכשיו הכהות מכוונת לצד הטקסט בלבד — הטקסט קריא, הכלי נשאר נראה. */
.hero::before{background:
  linear-gradient(to left, rgba(9,9,13,.88) 0%, rgba(9,9,13,.68) 28%, rgba(9,9,13,.26) 56%, rgba(9,9,13,0) 86%),
  linear-gradient(to top, rgba(9,9,13,.62) 0%, rgba(9,9,13,0) 36%)}

/* הרצועה האדומה חתכה את הסרטון לשניים.
   עכשיו היא רצועת זכוכית בתוך ההיירו: הסרטון רץ מאחוריה בלי להיקטע,
   והנתונים נראים כבר במסך הראשון. הקו האדום נשאר כרמז מותגי דק. */
@media (min-width:761px){
  .hero{min-height:calc(100vh - var(--czHdr,120px));
        min-height:calc(100svh - var(--czHdr,120px));
        padding-bottom:calc(var(--czSpec,78px) + 10px)}
  .specbar{position:absolute;inset-inline:0;bottom:0;z-index:5;
    background:rgba(11,11,15,.5);
    -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
    border-top:1px solid rgba(232,35,28,.9)}
  .specbar .sv{color:#FFFFFF}
  .specbar .sl{color:rgba(255,255,255,.76)}
  .hswitch{bottom:calc(var(--czSpec,78px) + clamp(14px,2vw,28px))}
}

/* במובייל הרצועה נשארת בזרימה — אין מספיק גובה להציף אותה על הסרטון */
@media (max-width:760px){
  .specbar{position:static}
}

@media (prefers-reduced-motion:reduce){
  .hero-box > [data-w] > *{opacity:1 !important;transform:none !important}
}

/* ═════ שכבה 22 ═════ */

/* שתי הקוביות בחוקר הרכיבים באותו גובה כשהן מקבילות */
@media (min-width:901px){
  .anat-body{align-items:stretch}
  .anat-fig,.anat-pan{height:100%}
}

/* שורת הגוונים — הצבעים נדגמו מהצילומים עצמם, לא נוחשו */
.af-cols{display:none;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.anat[data-w="0"] .af-cols[data-w="0"],
.anat[data-w="1"] .af-cols[data-w="1"]{display:flex}
.afc-l{font-family:var(--tech);font-style:italic;font-size:12px;color:#6B6862;margin-inline-end:4px}
.afc{appearance:none;-webkit-appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px 5px 6px;border-radius:999px;background:#fff;
  border:1px solid rgba(20,20,24,.14);font-family:var(--body);font-size:12.5px;font-weight:600;color:#57544F;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.afc::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--sw,#999);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);flex:0 0 auto}
.afc:hover{border-color:rgba(20,20,24,.42);color:#141418}
.afc[aria-pressed="true"]{background:#141418;border-color:#141418;color:#fff}
.afc:focus-visible{outline:3px solid #141418;outline-offset:2px}

/* התקריב ניתן ללחיצה ונפתח בגדול */
button.af-loupe{appearance:none;-webkit-appearance:none;padding:0;cursor:zoom-in}
.af-loupe:focus-visible{outline:3px solid #141418;outline-offset:3px}
.im-body{display:grid;place-items:center;min-height:0}
.im-body img{max-width:100%;max-height:min(70vh,640px);width:auto;height:auto;display:block;border-radius:12px}
.imodal .mm-card{width:min(100%,760px)}

/* שבבי הרכיבים והכפתור — שורה אחת נקייה במקום ערבוביה */
.ap-chips{display:flex;flex-wrap:wrap;gap:7px}
.ap-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(20,20,24,.1)}
.anat-pan > .btn-ghost{align-self:flex-start;margin-top:4px}

/* כרטיס משווק — שם שהוא קישור, ושלושה קיצורי דרך אמיתיים במקום קובייה פסיבית */
.shops .shop{display:flex;flex-direction:column;gap:5px;background:#fff;border-radius:15px;
  padding:16px 18px 14px;border:1px solid rgba(20,20,24,.09);
  transition:border-color .2s ease,box-shadow .2s ease}
.shops .shop:hover{border-color:rgba(20,20,24,.2);box-shadow:0 10px 26px rgba(20,20,24,.08)}
.shops .shop-c{font-family:var(--tech);font-style:italic;font-size:12px;color:#C80A04}
.shops a.shop-n{font-family:var(--disp);font-weight:800;font-size:16px;color:#141418;text-decoration:none}
.shops a.shop-n:hover{color:#C80A04}
.shops .shop-a{font-size:13.5px;color:#6B6862;line-height:1.45}
.shop-act{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.sact{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  padding:7px 12px;border-radius:999px;font-family:var(--body);font-size:12.5px;font-weight:700;
  border:1px solid rgba(20,20,24,.14);color:#141418;background:#fff;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.sact svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sact:hover,.sact:focus-visible{background:#141418;border-color:#141418;color:#fff}
.sact-w:hover,.sact-w:focus-visible{background:#33CCFF;border-color:#33CCFF;color:#0A2A33}
.sact-a:hover,.sact-a:focus-visible{background:#25D366;border-color:#25D366;color:#06351A}
.sact-t{direction:ltr}

@media (max-width:520px){
  .shop-act{gap:6px}
  .sact{padding:8px 11px;font-size:12px}
}

/* ═════ שכבה 23 ═════ */

/* לבן על #E8231C נמדד 4.48 מול סף 4.5. מזיזים את הצד הצבעוני בלבד,
   לאדום הכהה שכבר קיים במערכת — אותו גוון, 6.0. */
.hrow2 a.nav-all i{background:#C80A04;font-size:11.5px;padding:3px 7px}

/* ═════ שכבה 24 ═════ */

/* שש תמונות ברשת 3×2 הן קיר של תמונות.
   שורה אחת רצה שמערבת אופניים וקורקינטים מראה יותר דגמים בפחות גובה. */
.galrail{position:relative;overflow:hidden;margin-top:30px;direction:ltr;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.galtrack{display:flex;width:max-content;gap:14px;animation:czGalRun 68s linear infinite}
.galrail:hover .galtrack,.galrail:focus-within .galtrack{animation-play-state:paused}
.galrail.paused .galtrack{animation-play-state:paused}
@keyframes czGalRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.galtrack a{position:relative;flex:0 0 auto;width:clamp(230px,24vw,340px);
  border-radius:15px;overflow:hidden;display:block;text-decoration:none;background:#16161B}
.galtrack img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.galtrack a:hover img,.galtrack a:focus-visible img{transform:scale(1.045)}
.galtrack a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.gl-c{position:absolute;inset-inline:0;bottom:0;display:grid;gap:1px;direction:rtl;
  padding:26px 14px 12px;
  background:linear-gradient(to top,rgba(8,8,11,.88),rgba(8,8,11,.45) 55%,rgba(8,8,11,0))}
.gl-c b{font-family:var(--disp);font-weight:800;font-size:14.5px;color:#fff;line-height:1.2}
.gl-c i{font-family:var(--tech);font-style:italic;font-size:12px;color:rgba(255,255,255,.72)}

/* שורת הגוונים עברה לפאנל: במסגרת התמונה היא נעשתה פריט flex צר
   ליד הצילום ונערמה לעמודה מעליו. בפאנל היא בזרימה וברוחב מלא. */
.anat-pan .af-cols{margin:2px 0 0}

@media (prefers-reduced-motion:reduce){
  .galtrack{animation:none}
  .galtrack img{transition:none}
}
@media (max-width:640px){
  .gl-c{padding:22px 12px 10px}
  .gl-c b{font-size:13.5px}
}

/* ═════ שכבה 25 — בורר הגוונים ═════ */

/* גלולות עם שם לכל גוון נשברו לשתי שורות ונראו כמו רשימת תגיות.
   בורר צבעים נקרא במבט אחד: עיגולים בשורה אחת, טבעת על הנבחר,
   והשם מופיע פעם אחת בתווית שמתעדכנת. השם נשמר ב-aria-label לקורא המסך. */
.af-cols{display:none;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:2px 0 0}
.anat[data-w="0"] .af-cols[data-w="0"],
.anat[data-w="1"] .af-cols[data-w="1"]{display:flex}
.afc-l{font-family:var(--tech);font-style:italic;font-size:12.5px;color:#6B6862;white-space:nowrap}
.afc-l b{font-style:normal;font-family:var(--body);font-weight:700;color:#141418}
.afc-row{display:flex;gap:9px}
.afc{appearance:none;-webkit-appearance:none;width:26px;height:26px;border-radius:50%;padding:0;
  cursor:pointer;background:var(--sw,#999);border:1px solid rgba(20,20,24,.2);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease}
.afc::before{content:none}
.afc:hover{transform:scale(1.1)}
.afc[aria-pressed="true"]{box-shadow:0 0 0 2px #FBF9F5,0 0 0 4px #141418}
.afc:focus-visible{outline:3px solid #141418;outline-offset:4px}

@media (prefers-reduced-motion:reduce){ .afc{transition:none} }

/* ═════ שכבה 26 ═════ */

/* הגוון הנבחר יצא שחור: לכלל הגלולה הישן `.afc[aria-pressed=true]{background:#141418}`
   ספציפיות (0,2,0) מול (0,1,0) של הכלל החדש, ולכן הוא גבר על הצבע האמיתי. */
.afc[aria-pressed="true"]{background:var(--sw,#999);border-color:rgba(20,20,24,.24);color:inherit}
.afc[aria-pressed="true"]::before{content:none}

/* ═════ שכבה 27 ═════ */

/* הרצועות נבנו לארבעה פריטים. אחרי שהסרתי את הכפילויות
   נותרו שלושה, והעמודה הריקה דחפה את הכל לצד אחד. */
@media (min-width:901px){
  .specbar ul{grid-template-columns:repeat(3,1fr)}
  .trust{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .trust li:last-child:nth-child(odd){grid-column:1 / -1}
  .specbar li:last-child:nth-child(odd){grid-column:1 / -1}
}

/* בטווח 761–980 מתג העולמות מקבל top משכבה קודמת ו-bottom משלי,
   ולכן הוא נמתח לכל גובה ההיירו ובלע את הלחיצה על כפתור ה-CTA. */
@media (min-width:761px) and (max-width:980px){
  .hswitch{bottom:auto}
}

/* הכהות ההיירו הייתה אופקית, ולכן במסך צר — שבו הקופי נפרש לרוחב המלא —
   הצד השני נשאר בהיר והטקסט לא נקרא. שם הכהות עולה מלמטה, אחרי התוכן. */
@media (max-width:1000px){
  .hero::before{background:
    linear-gradient(to top, rgba(9,9,13,.93) 0%, rgba(9,9,13,.78) 38%, rgba(9,9,13,.44) 68%, rgba(9,9,13,.22) 100%)}
}

/* חותם המותג על צילום האודות — הנכס שלהם עצמם, כמו חותמת יצרן */
.about-im{position:relative}
.ab-seal{position:absolute;z-index:3;inset-inline-start:clamp(12px,1.4vw,20px);bottom:clamp(12px,1.4vw,20px);
  width:clamp(76px,8vw,112px);aspect-ratio:1;border-radius:16px;overflow:hidden;display:block;
  box-shadow:0 16px 36px rgba(20,20,24,.34);border:1px solid rgba(255,255,255,.16)}
.ab-seal img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:520px){
  .ab-seal{width:68px;border-radius:13px}
}

/* ═════ שכבה 28 — חוויית חוקר הרכיבים ═════ */

/* הצילום הוחלף בקפיצה חדה. עכשיו הוא נמוג ועולה,
   והתמונה הבאה נטענת לפני ההחלפה כדי שלא ייפתח רגע ריק. */
#anatImg{transition:opacity .26s ease}
#anatImg.img-sw{opacity:0}

/* נקודה פעילה מולטת, השאר נסוגות — העין יודעת לאן להביט */
.adot{opacity:.58;transition:opacity .2s ease,transform .2s cubic-bezier(.2,.7,.2,1)}
.adot:hover,.adot:focus-visible{opacity:1}
.adot[aria-pressed="true"]{opacity:1;transform:scale(1.1)}
.adot[aria-pressed="true"]::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(232,35,28,.5);pointer-events:none}
.anat-fig:hover .adot{opacity:1}

/* טקסט הפאנל עולה במקום להתחלף בבת-אחת */
@keyframes czPanIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.anat-pan.pan-in .ap-c,
.anat-pan.pan-in #anatT,
.anat-pan.pan-in #anatD,
.anat-pan.pan-in .val{animation:czPanIn .42s cubic-bezier(.2,.7,.2,1) both}
.anat-pan.pan-in #anatT{animation-delay:.04s}
.anat-pan.pan-in #anatD{animation-delay:.08s}
.anat-pan.pan-in .val{animation-delay:.12s}

/* מונה הרכיבים — המספר הנוכחי בולט מול הסה״כ */
.ap-c{font-family:var(--tech);font-style:italic;color:#9A968E;font-size:13px}
.ap-c b{font-size:19px;color:#141418;font-weight:700}

@media (prefers-reduced-motion:reduce){
  #anatImg,.adot{transition:none}
  .anat-pan.pan-in .ap-c,.anat-pan.pan-in #anatT,
  .anat-pan.pan-in #anatD,.anat-pan.pan-in .val{animation:none}
}

/* ═════ שכבה 29 — עמוד קטגוריה ועגלה צפה ═════ */

/* ראש הקטגוריה — פסקה אחת ונתונים, בלי מסה של טקסט מעל המוצרים */
.cath{padding-block:clamp(34px,4.4vw,64px)}
.cath-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:end}
.cath h1{margin:0 0 10px}
.cath .lede{max-width:56ch}
.cath-l{display:flex;flex-wrap:wrap;gap:10px 30px;margin:20px 0 0;padding:0;list-style:none}
.cath-l li{display:grid;gap:2px}
.cath-l b{font-family:var(--tech);font-style:italic;font-weight:700;font-size:clamp(20px,2.3vw,28px);color:#fff;line-height:1}
.cath-l span{font-size:12.5px;color:rgba(255,255,255,.62)}
.cath-sw{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.csw{display:grid;gap:3px;padding:15px 17px;border-radius:15px;text-decoration:none;
  background:#17171C;border:1px solid rgba(255,255,255,.12);transition:border-color .2s ease,background-color .2s ease}
.csw b{font-family:var(--disp);font-weight:800;font-size:15.5px;color:#fff}
.csw span{font-family:var(--tech);font-style:italic;font-size:12px;color:rgba(255,255,255,.6)}
.csw:hover{border-color:rgba(255,255,255,.4)}
.csw.on{background:#E8231C;border-color:#E8231C}
.csw.on span{color:rgba(255,255,255,.85)}
.csw:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* סרגל הסינון — נדבק מתחת להדר כדי שהוא זמין גם אחרי גלילה ארוכה */
.fbar{position:sticky;top:var(--czHdrS,96px);z-index:60;background:rgba(251,249,245,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(20,20,24,.09)}
.fbar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;
  padding-block:11px}
.fchips{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.fchip{appearance:none;-webkit-appearance:none;cursor:pointer;white-space:nowrap;
  padding:8px 14px;border-radius:999px;border:1px solid rgba(20,20,24,.16);background:#fff;
  font-family:var(--body);font-size:13px;font-weight:700;color:#57544F;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.fchip:hover{border-color:rgba(20,20,24,.45);color:#141418}
.fchip.on{background:#141418;border-color:#141418;color:#fff}
.fchip:focus-visible{outline:3px solid #141418;outline-offset:2px}
.fbar-r{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.fsort{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#6B6862}
.fsort select{font-family:var(--body);font-size:13px;font-weight:700;color:#141418;
  padding:7px 10px;border-radius:10px;border:1px solid rgba(20,20,24,.16);background:#fff;cursor:pointer}
.fcount{font-family:var(--tech);font-style:italic;font-size:12.5px;color:#6B6862;white-space:nowrap}

/* כרטיס המוצר בקטגוריה הוא article ולא קישור אחד,
   כדי שהכפתור "הוספה לעגלה" יהיה כפתור אמיתי ולא קישור בתוך קישור. */
article.pc{display:flex;flex-direction:column}
article.pc .pc-im{display:block}
a.pc-n{text-decoration:none}
a.pc-n:hover{color:#C80A04}
.pc-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pc-act .btn{flex:1 1 auto;min-height:42px;padding:11px 16px;font-size:13.5px;justify-content:center}
.pc-add.is-adding{opacity:.6;pointer-events:none}
.pc-add.is-added{background:#0E7A3C;border-color:#0E7A3C}
.cat-empty{text-align:center;margin:40px 0 0;font-size:15px;color:#6B6862}
.lnk{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:#C80A04;font-weight:700;text-decoration:underline}

/* טבלת ההשוואה */
.ctab-w{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:15px;border:1px solid rgba(20,20,24,.1);background:#fff}
.ctab{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.ctab th{background:#141418;color:#fff;font-family:var(--disp);font-weight:800;font-size:13.5px;
  text-align:right;padding:13px 14px;white-space:nowrap}
.ctab td{padding:12px 14px;border-top:1px solid rgba(20,20,24,.08);color:#57544F}
.ctab td:first-child{font-weight:700;color:#141418}
.ctab td a{color:#141418;text-decoration:none;border-bottom:1px solid rgba(20,20,24,.22)}
.ctab td a:hover{color:#C80A04;border-bottom-color:#C80A04}
.ctab tbody tr:hover{background:#FBF9F5}

@media (max-width:900px){
  .cath-in{grid-template-columns:minmax(0,1fr)}
  .fbar-in{gap:9px}
  .fchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .fchips::-webkit-scrollbar{display:none}
  .fbar-r{width:100%;justify-content:space-between}
}

/* ═════ שכבה 30 — העגלה הצפה ═════ */

/* יושבת בצד שמאל הפיסי, מעל וידג׳ט הנגישות ולא עליו —
   חפיפה על כפתור הנגישות היא ליקוי תאימות. מופיעה רק כשיש בה משהו. */
.czcart{position:fixed;z-index:93;left:clamp(14px,1.8vw,26px);
  bottom:calc(clamp(14px,1.8vw,26px) + 68px);
  display:none;direction:rtl}
.czcart.has{display:block}
.czcart-t{appearance:none;-webkit-appearance:none;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:9px;padding:11px 16px 11px 13px;border-radius:999px;
  background:#141419;color:#fff;border:1px solid rgba(255,255,255,.2);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  font-family:var(--disp);font-weight:800;font-size:13.5px;
  transition:background-color .2s ease,border-color .2s ease}
.czcart-t:hover{background:#C80A04;border-color:#C80A04}
.czcart-t:focus-visible{outline:3px solid #fff;outline-offset:3px}
.czcart-t svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.czcart-n{position:absolute;top:-5px;inset-inline-start:-5px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:#E8231C;color:#fff;display:grid;place-items:center;
  font-family:var(--tech);font-style:italic;font-size:11.5px;font-weight:700;line-height:1;
  border:2px solid #141419}
.czcart-s{font-family:var(--tech);font-style:italic;font-weight:700;color:rgba(255,255,255,.82)}
.czcart.busy{opacity:.72;pointer-events:none}

.czcart-p{position:absolute;bottom:calc(100% + 12px);inset-inline-start:0;width:min(88vw,340px);
  background:#fff;border-radius:15px;border:1px solid rgba(20,20,24,.12);
  box-shadow:0 22px 52px rgba(0,0,0,.26);padding:14px;
  display:grid;gap:12px;
  opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.2,1),visibility .22s}
.czcart.open .czcart-p{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.czcart-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.czcart-h b{font-family:var(--disp);font-weight:800;font-size:15.5px;color:#141418}
.czcart-x{appearance:none;background:none;border:0;cursor:pointer;padding:4px;line-height:0;color:#6B6862}
.czcart-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.czcart-x:hover{color:#141418}
.czcart-l{display:grid;gap:10px;max-height:min(46vh,340px);overflow:auto}
.czcart-e{margin:0;padding:14px 0;text-align:center;font-size:13.5px;color:#6B6862}
.czci{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:9px}
.czci img,.czci-ph{width:48px;height:48px;border-radius:10px;object-fit:cover;background:#F1EFEA;display:block}
.czci-b{display:grid;gap:2px;min-width:0}
.czci-b a{font-size:13px;font-weight:700;color:#141418;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.czci-b a:hover{color:#C80A04}
.czci-b i{font-family:var(--tech);font-style:italic;font-size:12px;color:#6B6862}
.czci-q{display:inline-flex;align-items:center;gap:2px;border:1px solid rgba(20,20,24,.14);border-radius:999px;padding:2px}
.czci-q button{appearance:none;background:none;border:0;cursor:pointer;width:22px;height:22px;
  border-radius:50%;font-size:14px;line-height:1;color:#141418}
.czci-q button:hover{background:#F1EFEA}
.czci-q b{min-width:18px;text-align:center;font-family:var(--tech);font-style:italic;font-size:13px}
.czci-x{appearance:none;background:none;border:0;cursor:pointer;font-size:17px;line-height:1;color:#9A968E;padding:2px 4px}
.czci-x:hover{color:#C80A04}
.czcart-f{display:grid;gap:8px;padding-top:12px;border-top:1px solid rgba(20,20,24,.1)}
.czcart-sum{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.czcart-sum i{font-family:var(--tech);font-style:italic;font-size:12.5px;color:#6B6862}
.czcart-sum b{font-family:var(--disp);font-weight:800;font-size:19px;color:#141418}
.czcart-f .btn{width:100%;justify-content:center;min-height:44px}

@media (max-width:760px){
  .czcart{left:12px;bottom:calc(69px + 12px)}
  .czcart-p{width:min(92vw,330px)}
}
@media (prefers-reduced-motion:reduce){
  .czcart-p,.czcart-t{transition:none}
}

/* ═════ שכבה 31 ═════ */

/* .line נבנה לחמשת דגמי הליין. בקטלוג של 18 דגמים חמישה טורים מצרים כל כרטיס. */
#catGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
@media (max-width:1100px){#catGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){#catGrid{grid-template-columns:minmax(0,1fr)}}

/* ═════ שכבה 32 — עמוד המוצר ═════ */

.pdp{padding-block:clamp(22px,2.6vw,38px) clamp(34px,4vw,58px)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 clamp(18px,2.4vw,30px);
  font-family:var(--tech);font-style:italic;font-size:12.5px;color:#8A867E}
.crumb a{color:#57544F;text-decoration:none}
.crumb a:hover{color:#C80A04}
.crumb i{font-style:normal;color:#C4BFB6}

.pdp-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,3.4vw,54px);align-items:start}
.pdp-gal{display:grid;gap:12px}
.pg-main{position:relative;background:#fff;border-radius:15px;overflow:hidden;
  border:1px solid rgba(20,20,24,.08);aspect-ratio:1/1;display:grid;place-items:center}
.pg-main img{width:100%;height:100%;object-fit:contain;padding:clamp(14px,2vw,30px);
  transition:opacity .26s ease}
.pg-main img.img-sw{opacity:0}
.pg-zoom{position:absolute;top:12px;inset-inline-end:12px;z-index:2;cursor:pointer;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;padding:0;
  background:#fff;border:1px solid rgba(20,20,24,.16);color:#141418;
  transition:background-color .2s ease,color .2s ease}
.pg-zoom svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.pg-zoom:hover{background:#141418;color:#fff}
.pg-zoom:focus-visible{outline:3px solid #141418;outline-offset:2px}
.pg-th{display:flex;gap:9px;flex-wrap:wrap}
.pgt{width:72px;height:72px;padding:5px;border-radius:12px;cursor:pointer;background:#fff;
  border:1px solid rgba(20,20,24,.12);transition:border-color .2s ease}
.pgt img{width:100%;height:100%;object-fit:contain;display:block}
.pgt:hover{border-color:rgba(20,20,24,.4)}
.pgt.on{border-color:#141418;box-shadow:0 0 0 1px #141418}
.pgt:focus-visible{outline:3px solid #141418;outline-offset:2px}

.pdp-buy{display:grid;gap:clamp(14px,1.8vw,22px);align-content:start}
.pdp-eyebrow{display:inline-block;font-family:var(--tech);font-style:italic;font-size:12.5px;
  color:#C80A04;margin-bottom:6px}
.pdp-buy h1{margin:0 0 10px}
.pdp-buy .lede{max-width:52ch;margin:0}
.pdp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding-bottom:16px;border-bottom:1px solid rgba(20,20,24,.1)}
.pdp-price b{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.4vw,42px);color:#141418;line-height:1}
.pdp-price span{font-family:var(--tech);font-style:italic;font-size:13px;color:#6B6862}
.pdp-cols{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}

.pdp-act{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.pdp-qty{display:inline-flex;align-items:center;gap:2px;border:1px solid rgba(20,20,24,.16);
  border-radius:999px;padding:3px;background:#fff}
.pdp-qty button{appearance:none;background:none;border:0;cursor:pointer;width:36px;height:38px;
  border-radius:999px;font-size:17px;line-height:1;color:#141418}
.pdp-qty button:hover{background:#F1EFEA}
.pdp-qty input{width:40px;height:38px;border:0;background:none;text-align:center;
  font-family:var(--tech);font-style:italic;font-weight:700;font-size:15px;color:#141418;
  -moz-appearance:textfield}
.pdp-qty input::-webkit-outer-spin-button,.pdp-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp-act .btn{min-height:46px;justify-content:center}
.pdp-add{flex:1 1 200px}
.pdp-add.is-adding{opacity:.6;pointer-events:none}
.pdp-add.is-added{background:#0E7A3C;border-color:#0E7A3C}

.pdp-tr{display:grid;gap:9px;margin:2px 0 0;padding:0;list-style:none}
.pdp-tr li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#57544F}
.pdp-tr svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:#C80A04;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.pdp-low{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(22px,3.2vw,48px);align-items:start}
.pdp-tab{min-width:0}
.pdp-tab th{width:40%;text-align:right;background:#141418}
.pdp-tab td{background:#fff}
.pdp-acc{display:grid;gap:8px;align-content:start}
.pdp-acc details{background:#fff;border-radius:15px;border:1px solid rgba(20,20,24,.09);overflow:hidden}
.pdp-acc summary{cursor:pointer;list-style:none;padding:16px 18px;font-family:var(--disp);
  font-weight:800;font-size:15px;color:#141418;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pdp-acc summary::-webkit-details-marker{display:none}
.pdp-acc summary::after{content:"+";font-family:var(--tech);font-style:italic;font-size:20px;color:#C80A04;
  transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.pdp-acc details[open] summary::after{transform:rotate(45deg)}
.pdp-acc p{margin:0;padding:0 18px 17px;font-size:14px;line-height:1.6;color:#57544F}
.pdp-acc a{color:#C80A04;font-weight:700}

.pdp-bar{position:fixed;inset-inline:0;bottom:0;z-index:88;display:none;
  align-items:center;gap:10px;padding:10px clamp(12px,3vw,20px) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(12,12,16,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.12);
  transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.pdp-bar.show{transform:none}
.pb-n{font-family:var(--disp);font-weight:800;font-size:13.5px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}
.pb-p{font-family:var(--tech);font-style:italic;font-weight:700;font-size:15px;color:#fff;white-space:nowrap}
.pdp-bar .btn{min-height:42px;padding:11px 20px;white-space:nowrap}

@media (max-width:980px){
  .pdp-g{grid-template-columns:minmax(0,1fr)}
  .pdp-low{grid-template-columns:minmax(0,1fr)}
  .pdp-tab th{width:46%}
}
@media (max-width:760px){
  .pdp-bar{display:flex}
  .czcart{bottom:calc(69px + 12px)}
  .pgt{width:60px;height:60px}
}
@media (prefers-reduced-motion:reduce){
  .pg-main img,.pdp-bar,.pdp-acc summary::after{transition:none}
}

/* ═════ שכבה 33 ═════ */

/* לבן על #E8231C נמדד 4.48 מול סף 4.5 — אותה מחלקה כמו תג הניווט.
   מזיזים את הצד הצבעוני לאדום הכהה שכבר במערכת — אותו גוון, 6.0. */
.csw.on{background:#C80A04;border-color:#C80A04}
.csw.on span{color:rgba(255,255,255,.88)}

/* ═════ שכבה 34 ═════ */

/* שם העמוד הנוכחי בנתיב הניווט נמדד 3.19 מול סף 4.5.
   מכהים את הטקסט בתוך אותה משפחת אפורים חמים — 4.88. */
.crumb span{color:#6B6862}

/* ═════ שכבה 35 ═════ */

/* העגלה יושבת בצד שמאל הפיסי, ו-inset-inline-start ב-RTL הוא ימין —
   לכן הפאנל נפרש שמאלה ונחתך מחוץ למסך. מיקום פיזי במקום לוגי. */
.czcart-p{left:0;right:auto;inset-inline-start:auto}
@media (max-width:420px){ .czcart-p{width:calc(100vw - 24px)} }

/* ═════ שכבה 36 ═════ */

/* שם לטיני בשורה אחת נחתך בצד הלא נכון בעטיפה RTL — שתי שורות במקום חיתוך */
.czci-b a{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.3}
.czci{align-items:start}
.czci img,.czci-ph{margin-top:2px}

/* כפתור הרפאים בתוך פאנל לבן לא נכלל במפת הרקעים של שכבה 12 */
.czcart-f .btn-ghost{border-color:rgba(20,20,24,.3);color:#141418}
.czcart-f .btn-ghost:hover,.czcart-f .btn-ghost:focus-visible{background:#141418;color:#FFFFFF;border-color:#141418}

/* ═════ שכבה 37 ═════ */

/* מספר הכמות ירש צבע בהיר וכמעט לא נקרא */
.czci-q b{color:#141418}

/* ═════ שכבה 38 ═════ */

/* העגלה הוסתרה כולה כשהיא ריקה, ולכן לחיצה על אייקון ההדר לא פתחה כלום.
   עכשיו המיכל קיים תמיד ורק הכפתור הצף מותנה בתוכן. */
.czcart{display:block}
.czcart-t{display:none}
.czcart.has .czcart-t{display:inline-flex}
.czcart:not(.has):not(.open){pointer-events:none}
.czcart.open{pointer-events:auto}

/* ═════ שכבה 39 — מגע במובייל ═════ */

/* שני סרגלים קבועים בתחתית המסך יושבים זה על זה בעמוד המוצר.
   סרגל הרכישה הוא הרלוונטי שם, ולכן הכללי נסוג. */
.pdp-bar ~ .bar{display:none}

/* אזורי מגע — קישורים בגובה 16–20px קשים לפגיעה באצבע (WCAG 2.5.8 — 24×24) */
.ft ul a{display:inline-block;padding-block:5px}
.ft-cont li{padding-block:3px}
a.pc-n{display:inline-block;padding-block:3px}
.crumb a{display:inline-block;padding-block:4px}
.fsort select{min-height:40px}
.pdp-qty button{width:40px;height:40px}
.pdp-qty input{height:40px}
.czci-q button{width:26px;height:26px}

/* ═════ שכבה 40 ═════ */

/* שמות הדגמים בטבלת ההשוואה הם קישורים בגובה 15px */
.ctab td a{display:inline-block;padding-block:5px}

/* ═════ שכבה 41 — העמודים הפנימיים ═════ */

/* שלושה עמודי שירות בעמוד הסיפור */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(22px,2.6vw,36px)}
.trio > div{background:#fff;border:1px solid rgba(20,20,24,.08);border-radius:15px;padding:clamp(18px,2vw,26px)}
.trio b{display:block;font-family:var(--disp);font-weight:800;font-size:16px;color:#141418;margin-bottom:7px}
.trio p{margin:0;font-size:14px;line-height:1.6;color:#57544F}

.vision{margin-top:clamp(24px,3vw,42px);padding:clamp(22px,3vw,40px);border-radius:15px;
  background:#141419;color:#fff;position:relative;overflow:hidden}
.vision h3{margin:0 0 12px;font-family:var(--disp);font-weight:800;font-size:clamp(19px,2.2vw,26px);color:#fff}
.vision p{margin:0;max-width:70ch;font-size:15px;line-height:1.7;color:rgba(255,255,255,.78)}
.vision-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px !important}

/* רשת החנויות המלאה */
.stgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
@media (max-width:1000px){.stgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.stgrid{grid-template-columns:minmax(0,1fr)}}

/* צור קשר */
.ct-g{display:grid;gap:clamp(14px,1.8vw,22px)}
.ct-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,18px)}
.ct-card{display:grid;gap:5px;background:#fff;border:1px solid rgba(20,20,24,.08);border-radius:15px;
  padding:clamp(18px,2vw,24px);text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease}
a.ct-card:hover{border-color:rgba(20,20,24,.24);box-shadow:0 12px 28px rgba(20,20,24,.08)}
.ct-card svg{width:20px;height:20px;fill:none;stroke:#C80A04;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.ct-card b{font-family:var(--disp);font-weight:800;font-size:16px;color:#141418}
.ct-card span{font-size:14px;color:#57544F}
.ct-soc{grid-column:1 / -1;display:flex;gap:9px;margin:2px 0 0;padding:0;list-style:none}
.ct-soc a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(20,20,24,.16);color:#141418;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.ct-soc svg{width:18px;height:18px;fill:currentColor}
.ct-soc a:hover{background:#141418;border-color:#141418;color:#fff}
@media (max-width:760px){.ct-info{grid-template-columns:minmax(0,1fr)}}

/* בלוג */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.bcard{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid rgba(20,20,24,.08);
  border-radius:15px;overflow:hidden;text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.bcard:hover{border-color:rgba(20,20,24,.2);box-shadow:0 14px 32px rgba(20,20,24,.1);transform:translateY(-3px)}
.bc-im{display:block;aspect-ratio:16/10;background:#F1EFEA;overflow:hidden}
.bc-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bcard:hover .bc-im img{transform:scale(1.04)}
.bc-b{display:grid;gap:7px;align-content:start;padding:clamp(16px,1.8vw,22px)}
.bc-b time{font-family:var(--tech);font-style:italic;font-size:12px;color:#9A968E}
.bc-b b{font-family:var(--disp);font-weight:800;font-size:clamp(15px,1.6vw,18px);line-height:1.3;color:#141418}
.bc-b em{font-style:normal;font-size:13.5px;line-height:1.55;color:#6B6862}
.bc-b i{font-style:normal;font-family:var(--tech);font-size:12.5px;font-weight:700;color:#C80A04;margin-top:3px}
.bcard:hover .bc-b i{text-decoration:underline}
@media (max-width:1000px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.bgrid{grid-template-columns:minmax(0,1fr)}}

/* מסמכים */
.legal{max-width:78ch;margin-inline:auto}
.legal h2{font-family:var(--disp);font-weight:800;font-size:clamp(17px,2vw,22px);color:#141418;margin:28px 0 10px}
.legal p{margin:0 0 14px;font-size:15px;line-height:1.75;color:#45423D}
.legal-src{margin-top:28px;padding-top:16px;border-top:1px solid rgba(20,20,24,.1);
  font-family:var(--tech);font-style:italic;font-size:13px;color:#6B6862}
.legal-src a{color:#C80A04;font-weight:700}

@media (max-width:760px){
  .trio{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .bcard,.bc-im img{transition:none}
}

/* ═════ שכבה 42 ═════ */

/* 124 שמות חנויות בגובה 20px — מתחת לסף המגע */
.shops a.shop-n{display:inline-block;padding-block:3px}

/* מלכודת הבוטים תפסה לחיצה על כרטיס שמתחתיה. היא לעולם לא צריכה
   לקבל מצביע — בוט ממלא אותה דרך ה-DOM ולא בלחיצה. */
.tf-hp,.tf-hp *{pointer-events:none}

/* ═════ שכבה 43 — עמוד חנות בודדת ═════ */

.st-g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start}
.st-main{display:grid;gap:clamp(16px,2vw,24px);align-content:start}
.st-main h1{margin:0 0 8px}
.st-main .lede{margin:0;max-width:44ch}
.st-act{display:flex;flex-wrap:wrap;gap:9px}
.st-act .btn{min-height:46px;justify-content:center}

.st-map{background:#fff;border:1px solid rgba(20,20,24,.08);border-radius:15px;
  padding:clamp(14px,1.8vw,22px);display:grid;gap:10px;justify-items:center}
.st-map svg{display:block;width:auto;height:clamp(260px,34vw,420px);max-width:100%;overflow:visible}
.st-map .ilmap{fill:#EFEBE3;stroke:rgba(20,20,24,.16);stroke-width:1}
.st-pin{fill:#E8231C}
.st-pin-h{fill:rgba(232,35,28,.16)}
.st-cap{display:grid;gap:2px;text-align:center}
.st-cap b{font-family:var(--disp);font-weight:800;font-size:15px;color:#141418}
.st-cap{font-family:var(--tech);font-style:italic;font-size:12.5px;color:#6B6862}

.st-worlds{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);margin-top:clamp(18px,2.2vw,30px)}
.st-w{display:grid;gap:4px;padding:clamp(20px,2.4vw,30px);border-radius:15px;text-decoration:none;
  background:#fff;border:1px solid rgba(20,20,24,.09);
  transition:border-color .2s ease,box-shadow .2s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.st-w:hover{border-color:rgba(20,20,24,.24);box-shadow:0 14px 32px rgba(20,20,24,.09);transform:translateY(-2px)}
.st-w b{font-family:var(--disp);font-weight:800;font-size:clamp(17px,2vw,21px);color:#141418}
.st-w span{font-family:var(--tech);font-style:italic;font-size:13px;color:#6B6862}
.st-w i{font-style:normal;display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-family:var(--body);font-weight:700;font-size:13.5px;color:#C80A04}
.st-w svg{width:15px;height:15px}

@media (max-width:900px){
  .st-g{grid-template-columns:minmax(0,1fr)}
  .st-worlds{grid-template-columns:minmax(0,1fr)}
  .st-act .btn{flex:1 1 calc(50% - 5px)}
}
@media (prefers-reduced-motion:reduce){ .st-w{transition:none} }

/* ═════ שכבה 44 — חיזוק מובייל ═════ */

@media (max-width:760px){
  /* שדה קלט מתחת ל-16px גורם לספארי ב-iOS להתקרב לעמוד בכל פוקוס,
     והגולש נשאר עם עמוד מוגדל שהוא צריך לצבוט ידנית. */
  input[type="text"],input[type="tel"],input[type="email"],input[type="search"],
  input[type="number"],select,textarea{font-size:16px}
  .tf-fld input,.tf-fld select{font-size:16px}
  .fsort select,#stQ{font-size:16px}

  /* סרגל הסינון תפס 118px — עם ההדר יחד 23% מגובה המסך לפני שרואים מוצר אחד */
  .fbar-in{padding-block:8px;gap:7px}
  .fchip{padding:7px 12px;font-size:12.5px}
  .fbar-r{gap:10px;align-items:center}
  .fsort{gap:6px}
  .fsort > span{display:none}
  .fsort select{padding:7px 9px;min-height:36px;font-size:16px}
  .fcount{font-size:12px}

  /* שורת פעולות בעמוד החנות — כפתור אחד נשבר לשתי שורות והשורה יצאה לא אחידה */
  .st-act .btn{white-space:nowrap;padding-inline:14px;font-size:13.5px}

  /* הקפדה על רווח לנשימה בראש העמודים הפנימיים */
  .cath{padding-block:26px 30px}
  .cath-l{gap:8px 20px}
}

@media (max-width:420px){
  .st-act .btn{flex:1 1 100%}
  .fchips{gap:6px}
}

/* ═════ שכבה 45 ═════ */

/* ההדר וסרגל הסינון בלעו 22% מגובה המסך לפני שנראה מוצר אחד */
@media (max-width:760px){
  .fbar-in{padding-block:6px;gap:5px}
  .fchip{padding:6px 11px;font-size:12px}
  .fsort select{min-height:32px;padding:5px 8px}
  .fcount{font-size:11.5px}
  #stQ{min-height:32px;padding:5px 10px !important}
}

/* ═════ שכבה 46 ═════ */

/* המונה ירד מהסרגל הדביק אל מעל הרשת — הוא חיווי מצב, לא פקד,
   והסרגל יכול עכשיו להיות שורה אחת במובייל. */
.fcount-top{margin:0 0 14px;font-family:var(--tech);font-style:italic;font-size:13px;color:#6B6862}
@media (max-width:760px){
  .fbar-in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fbar-in::-webkit-scrollbar{display:none}
  .fchips{flex-wrap:nowrap;overflow:visible;flex:0 0 auto}
  .fbar-r{width:auto;flex:0 0 auto;justify-content:flex-start}
  .fcount-top{font-size:12.5px;margin-bottom:12px}
}

/* ═════ שכבה 47 ═════ */

/* «בית» בנתיב הניווט הוא 18px רוחב. נתיב ניווט הוא ניווט,
   ולכן החריג של קישור בתוך משפט רץ אינו חל עליו. */
.crumb a{padding-inline:4px;min-width:24px;text-align:center}

/* ═════ שכבה 48 — בלוקי פיצ׳ר בעמוד המוצר ═════ */

.pfeat .pf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,54px);align-items:center;
  padding-block:clamp(26px,3.4vw,52px)}
.pfeat .pf + .pf{border-top:1px solid rgba(20,20,24,.08)}
.pf.alt .pf-im{order:2}
.pf-im{border-radius:15px;overflow:hidden;background:#fff;border:1px solid rgba(20,20,24,.07);
  aspect-ratio:4/3;display:grid;place-items:center}
.pf-im img{width:100%;height:100%;object-fit:contain;padding:clamp(10px,1.4vw,22px);display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pf:hover .pf-im img{transform:scale(1.03)}
.pf-tx{display:grid;gap:10px;align-content:center;min-width:0}
.pf-n{font-family:var(--tech);font-style:italic;font-weight:700;font-size:13px;color:#C80A04;
  letter-spacing:.06em}
.pf-tx h3{margin:0;font-family:var(--disp);font-weight:800;line-height:1.15;
  font-size:clamp(20px,2.6vw,32px);color:#141418}
.pf-tx p{margin:0;font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.7;color:#45423D;max-width:52ch}

@media (max-width:860px){
  .pfeat .pf{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:24px}
  .pf.alt .pf-im{order:0}
  .pf-im{aspect-ratio:16/11}
  .pf-tx p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .pf-im img{transition:none}
}

/* ═════ שכבה 49 — הצעות בעגלה ═════ */

.czcart-u{display:grid;gap:8px;padding-top:12px;border-top:1px solid rgba(20,20,24,.1)}
.czcu-h{font-family:var(--tech);font-style:italic;font-size:12.5px;color:#6B6862}
.czcu{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:9px}
.czcu img,.czcu .czci-ph{width:40px;height:40px;border-radius:9px;object-fit:cover;background:#F1EFEA;display:block}
.czcu-b{display:grid;gap:1px;min-width:0}
.czcu-b a{font-size:12.5px;font-weight:700;color:#141418;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.czcu-b a:hover{color:#C80A04}
.czcu-b i{font-family:var(--tech);font-style:italic;font-size:11.5px;color:#6B6862}
.czcu-a{appearance:none;cursor:pointer;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(20,20,24,.18);background:#fff;color:#141418;font-size:17px;line-height:1;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.czcu-a:hover{background:#141418;border-color:#141418;color:#fff}
.czcu-a.is-adding{opacity:.5;pointer-events:none}
.czcu-a:focus-visible{outline:3px solid #141418;outline-offset:2px}

/* ═════ שכבה 50 — טופס נסיעת המבחן ═════ */

/* הטופס היה אוסף שדות בלי הבטחה ובלי הסבר מה קורה אחרי שלוחים.
   קו אדום בראש הכרטיס מסמן אותו כמוקד הפעולה בסעיף. */
.tride-f{position:relative;overflow:hidden}
.tride-f::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;
  background:linear-gradient(to left,#E8231C,#C80A04)}
.tride-f h3{margin-bottom:4px}
.tf-sub{margin:0 0 4px;font-size:14px;line-height:1.55;color:#57544F}
.tf-sub b{color:#141418;font-weight:700}

.tf-fld input,.tf-fld select{transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.tf-fld input:hover,.tf-fld select:hover{border-color:rgba(20,20,24,.34)}
.tf-fld input:focus,.tf-fld select:focus{outline:none;border-color:#C80A04;
  box-shadow:0 0 0 3px rgba(200,10,4,.14);background:#fff}
.tf-fld input::placeholder{color:#A9A49B}

.tf-go{width:100%;justify-content:center;min-height:52px;font-size:16px}

/* שלושת הצעדים — הגולש יודע למה הוא נכנס לפני שהוא מוסר טלפון */
.tf-steps{display:grid;gap:9px;margin:14px 0 0;padding:14px 0 0;list-style:none;
  border-top:1px solid rgba(20,20,24,.1)}
.tf-steps li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#57544F}
.tf-steps b{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:#F1EFEA;color:#141418;font-family:var(--tech);font-style:italic;font-size:12px;font-weight:700}

@media (max-width:760px){
  .tf-steps{gap:8px}
  .tf-go{min-height:50px}
}
@media (prefers-reduced-motion:reduce){
  .tf-fld input,.tf-fld select{transition:none}
}

/* ═════ שכבה 51 ═════ */

/* .pc-alt נכתב במרקאפ ומעולם לא עוצב — אין אף כלל עבורו באף שכבה.
   לכן הוא נשאר בזרימה, וקצה תמונה שנייה הציץ בתחתית כל כרטיס.
   זו הייתה אמורה להיות החלפת תמונה בריחוף. */
.pc-im{position:relative}
.pc-im img.pc-alt{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:14px;opacity:0;pointer-events:none;
  transition:opacity .35s ease}
.pc:hover .pc-im img.pc-alt,
.pc:focus-within .pc-im img.pc-alt{opacity:1}
@media (hover:none){ .pc-im img.pc-alt{display:none} }
@media (prefers-reduced-motion:reduce){ .pc-im img.pc-alt{transition:none} }

/* 52 מגירה ניידת */
.hdraw .hd-nav a{min-height:44px;display:flex;align-items:center}
.hdraw .hd-nav a[hidden]{display:none!important}
.hdraw a:focus-visible,.hdraw button:focus-visible{outline:2px solid #e8231c;outline-offset:2px;border-radius:4px}

.hdraw .hd-tel{min-height:44px;display:flex;align-items:center;justify-content:center}

/* ============ 53 עדשת ההגדלה של ֧05 ============
   התקריב המרחף כיסה 13.4% מהצילום בנייד (נמדד). במקומו ההגדלה
   יושבת על הכלי עצמו, בדיוק בנקודה שנבחרה. */
.af-lens{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  clip-path:circle(0px at 50% 50%);-webkit-clip-path:circle(0px at 50% 50%);
  transition:clip-path .52s cubic-bezier(.22,1,.36,1),-webkit-clip-path .52s cubic-bezier(.22,1,.36,1),opacity .34s ease}
.anat.lens-on .af-lens{opacity:1}
.af-in .af-lens img.af-lens-i{position:absolute;inset:auto;max-width:none;display:block;
  object-fit:contain;will-change:transform;
  transition:transform .52s cubic-bezier(.22,1,.36,1)}

.af-ring{position:absolute;z-index:4;pointer-events:none;left:50%;top:50%;right:auto;bottom:auto;
  width:calc(var(--lr,70px)*2);height:calc(var(--lr,70px)*2);border-radius:50%;
  border:1.5px solid rgba(200,10,4,.82);opacity:0;
  transform:translate(-50%,-50%) scale(.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.7) inset,0 14px 34px rgba(11,11,15,.16);
  transition:left .52s cubic-bezier(.22,1,.36,1),top .52s cubic-bezier(.22,1,.36,1),
             opacity .34s ease,transform .52s cubic-bezier(.22,1,.36,1)}
.anat.lens-on .af-ring{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* במעקב אחר העכבר העדשה חייבת להידבק לסמן, אחרת היא נגררת אחריו */
.anat.lens-jump .af-lens,.anat.lens-jump .af-lens-i,.anat.lens-jump .af-ring{transition:none!important}
.anat.lens-free{cursor:zoom-in}
.anat.lens-free .af-ring{border-color:rgba(20,20,24,.5)}

/* הנקודות — יעד מגע של 44px בלי להגדיל את העיגול הנראה */
.adot{z-index:5}
/* יעד המגע יושב על ::before בכוונה.
   ::after תפוס כבר על ידי ההילה האדומה של הנקודה הפעילה (inset:-6px),
   והוולם המידות וה-transform שלי הזיזו אותה 22px שמאלה ולמעלה. */
.adot::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border-radius:50%;background:transparent}

/* תקריב הרכיב — ירד מהצילום ועלה לפאנל, ועכשיו הוא גם לחיץ בפועל */
.ap-zoom{display:flex;align-items:center;gap:11px;margin-top:4px}
.ap-zoom .af-loupe{position:static!important;inset:auto!important;opacity:1!important;
  transform:none!important;pointer-events:auto!important;cursor:zoom-in;
  width:64px!important;height:48px;aspect-ratio:auto;flex:0 0 auto;border-radius:10px;
  border:1px solid rgba(20,20,24,.16);
  transition:transform .24s cubic-bezier(.2,.7,.2,1),border-color .24s ease,box-shadow .24s ease}
.ap-zoom .af-loupe:hover,.ap-zoom .af-loupe:focus-visible{transform:scale(1.05)!important;
  border-color:rgba(200,10,4,.7);box-shadow:0 8px 20px rgba(11,11,15,.14)}
.ap-zoom-c{font-size:12.5px;letter-spacing:.03em;color:#6B6862}

/* פס התקדמות — מראה כמה מהנקודות כבר נפתחו */
.ap-rail{display:flex;gap:5px;max-width:190px;margin:-3px 0 3px}
.ap-rail i{flex:1 1 0;height:3px;border-radius:2px;background:rgba(20,20,24,.13);
  transition:background .34s ease,transform .34s cubic-bezier(.2,.7,.2,1)}
.ap-rail i.seen{background:rgba(20,20,24,.36)}
.ap-rail i.on{background:#C80A04;transform:scaleY(2)}
.apc.seen:not([aria-pressed="true"]){border-color:rgba(20,20,24,.24)}

@media (prefers-reduced-motion:reduce){
  .af-lens,.af-lens-i,.af-ring,.ap-rail i,.ap-zoom .af-loupe{transition:none!important}
}
@media (max-width:760px){
  .af-ring{border-width:1.5px}
  .ap-rail{max-width:none}
}

/* ============ 54 מרכוז הנקודות במרווח ולא ב-transform ============
   GSAP כותב transform inline על הנקודות ומוחק את translate(-50%,-50%).
   כתוצאה נקודה 1 נמדדה 15px מתחת ומימין לנקודה שלה. מרווח אינו ניד לאנימציה. */
.adot{--dot:30px;width:var(--dot);height:var(--dot);
  margin-inline-start:calc(var(--dot) / -2);margin-top:calc(var(--dot) / -2);
  transform:none}
.adot[aria-pressed="true"]{transform:scale(1.3)}
@media (hover:hover) and (pointer:fine){
  .adot:hover{transform:scale(1.18)}
  .adot[aria-pressed="true"]:hover{transform:scale(1.3)}
}
@media (max-width:760px){ .adot{--dot:34px} .adot i{font-size:14px} }

/* ============ 55 הדר מובייל ============
   (א) ההדר היה במלוא הרוחב בעמוד הבית בלבד, דרך שלוש שורות inline שלא
   הגיעו לשאר העמודים. שם הוא נמדד 370px עם שוליים 10px ופינות מעוגלות. */
.hdr{padding:0}
.hdr-in{padding:0}
.hpanel{border-radius:0}
@media (min-width:1100px){ .hrow1,.hrow2{padding-inline:clamp(22px,2.4vw,46px)} }

/* (ב) כשהמגירה נפתחת אחרי גלילה, body{overflow:hidden} מחליף את אלמנט הגלילה
   ו-position:sticky מפסיק להידבק — ההדר נעלם ואי אפשר לסגור את התפריט (נמדד). */
body.czdraw .hdr{position:fixed;top:0;left:0;right:0;width:100%}
/* הסרגל התחתון מתחרה במגירה על אותה פעולה ומכסה את תחתיתה */
body.czdraw .bar{opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease}

/* ערפול קטן מעל כפתור הפעולה הדביק, כדי שיהיה ברור שהרשימה נגללת מתחתיו */
.hdraw{position:fixed}
.hdraw .hd-cta{position:relative;z-index:2}
.hdraw .hd-cta::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;
  background:linear-gradient(to top,rgba(13,13,17,.96),rgba(13,13,17,0));pointer-events:none}

@media (prefers-reduced-motion:reduce){ body.czdraw .bar{transition:none} }


/* ============ 57 החשכת ההירו — על ::after ============
   ::before אינו הסרגל: הוא מכווץ ל-inset:0 0 351px 980px, כלומר פינה בלבד.
   ::after הוא היחיד שפרוש על כל ההירו ומעל הווידאו, ולכן הוא שקובע קריאות.
   נמדד לפני: בכותרת הראשית כ-0.42 כיסוי בנייד וכ-0.55 במחשב, מעל צילום רחוב בהיר. */
@media (min-width:1001px){
  .hero::after{
    background:
      linear-gradient(to left, rgba(4,4,6,.60) 0%, rgba(4,4,6,.50) 26%, rgba(4,4,6,.32) 46%,
                     rgba(4,4,6,.14) 68%, rgba(4,4,6,0) 88%),
      linear-gradient(to top, rgba(4,4,6,.42) 0%, rgba(4,4,6,.16) 34%, rgba(4,4,6,0) 60%);
  }
}
@media (max-width:1000px){
  /* בנייד המלל יושב ב-10%-44% העליוניים של ההירו (נמדד), ולכן סרגל
     שעולה מלמטה משאיר את כל החושך מתחת לקו הקיפול. הכיוון מתהפך. */
  .hero::after{
    background:linear-gradient(to bottom, rgba(4,4,6,.36) 0%, rgba(4,4,6,.32) 26%,
               rgba(4,4,6,.22) 44%, rgba(4,4,6,.20) 58%, rgba(4,4,6,.30) 80%, rgba(4,4,6,.50) 100%);

  }
}


/* ============ 58 עגלה: מצבי טעינה, מלאי ופס משלוח ============ */
.czci.czci-sk{pointer-events:none}
.czci-sk .czci-ph,.czci-sk .sk-l,.czci-sk .sk-s{
  background:linear-gradient(90deg,rgba(255,255,255,.07) 25%,rgba(255,255,255,.15) 37%,rgba(255,255,255,.07) 63%);
  background-size:400% 100%;animation:czcSk 1.2s ease-in-out infinite;border-radius:6px;display:block}
.czci-sk .sk-l{height:11px;width:72%;margin-bottom:7px}
.czci-sk .sk-s{height:9px;width:44%}
@keyframes czcSk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* שורה שהשרת עדיין מאשר — הכמות כבר התעדכנה, המחיר עדיין לא */
.czci.is-pending i{opacity:.4;transition:opacity .2s ease}
.czci.is-pending{position:relative}

.czci-st{display:block;font-style:normal;font-size:11.5px;font-weight:700;margin-top:3px;letter-spacing:.02em}
.czci-st.low{color:#FFB020}
.czci-st.bo{color:#8FB8FF}
.czci-st.out{color:#FF6B63}

.czcart-fs{padding:10px 16px 2px;display:block}
.czcart-fs[hidden]{display:none}
.czcf-t{display:block;font-size:12.5px;color:rgba(255,255,255,.78);margin-bottom:6px}
.czcf-t b{color:#fff}
.czcf-r{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.czcf-r i{display:block;height:100%;border-radius:3px;background:#C80A04;
  transition:width .45s cubic-bezier(.22,1,.36,1)}

@media (prefers-reduced-motion:reduce){
  .czci-sk .czci-ph,.czci-sk .sk-l,.czci-sk .sk-s{animation:none}
  .czcf-r i{transition:none}
}

/* ============ 59 הסרגל חייב להיות מעל המדיה ============
   זו הסיבה שההחשכה לא נראתה: .hstage הוא z-index:1 ו-.hero::after הוא auto,
   ולכן הצילום והווידאו נצבעו מעל הסרגל. המלל (.hero-in) הוא z-index:3,
   אז 2 מכניס את הסרגל בדיוק בין הצילום למלל. */
.hero::after{z-index:2}

/* ============ 60 העגלה לא מתעמעמת בפתיחה ============
   .czcart.busy היה opacity:.72 עם pointer-events:none, ולכן כל פתיחה עיממה
   והקפיאה את העגלה למשך הלוך וחזור של השרת. */
.czcart.busy{opacity:1;pointer-events:auto}
.czcart-p{position:relative}
.czcart-p::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(200,10,4,0),#C80A04,rgba(200,10,4,0));
  background-size:40% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .2s ease;pointer-events:none}
.czcart.busy-slow .czcart-p::before{opacity:1;animation:czcProg 1s linear infinite}
@keyframes czcProg{0%{background-position:-40% 0}100%{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){.czcart.busy-slow .czcart-p::before{animation:none}}

/* ============ 61 נגישות — קישור דילוג ============
   מוסתר לחלוטין עד שמקבל מיקוד מהמקלדת. אפס שינוי למשתמש עכבר/מגע. */
.czskip{position:fixed;top:-100px;inset-inline-start:12px;z-index:200;
  background:#141419;color:#fff;font-weight:700;font-size:14px;
  padding:12px 18px;border-radius:10px;text-decoration:none;
  border:2px solid #C80A04;transition:top .18s ease}
.czskip:focus{top:12px;outline:3px solid #fff;outline-offset:2px}
/* יעד הדילוג בלבד, כדי שיהיה ברור איכן הגיע המיקוד */
#czmain:focus-visible{outline:2px dashed rgba(200,10,4,.7);outline-offset:-6px}
@media (prefers-reduced-motion:reduce){ .czskip{transition:none} }

/* ============ 62 סרגל המסננים בנייד ============
   נמדד ב-390: .fchips ברוחב 761px בתוך .fbar-in של 390 עם flex-wrap:nowrap,
   ולכן חמישה צ'יפים וכל תפריט המיון ישבו ב-left שלילי (עד −573).
   ומכיוון ש-html,body הם overflow-x:clip — אין גלילה שמגיעה לשם. תוכן בלתי נגיש, לא רק צר. */
@media (max-width:900px){
  .fbar-in{flex-wrap:wrap;row-gap:10px}
  .fchips{flex:1 1 100%;min-width:0;flex-wrap:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;
    padding-bottom:2px;
    /* רמז דהייה בקצה כדי שיהיה ברור שיש עוד */
    -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent)}
  .fchips::-webkit-scrollbar{display:none}
  .fchip{flex:0 0 auto;scroll-snap-align:start}
  .fbar-r{flex:1 1 100%;min-width:0;justify-content:flex-start}
  .fbar-r select,.fbar-r label{max-width:100%}
  #fsort{max-width:100%}
}
/* כשהצ'יפים נכנסים בלאו הכי — אין סיבה לרמז גלילה */
@media (max-width:900px){
  .fchips:not(:hover){scroll-behavior:smooth}
}

/* ============ 63 סרגל המסננים — גלישה במקום גלילה ============
   ניסיתי overflow-x:auto והמדידה הראתה ש-scrollLeft נשאר 0 גם אחרי השמה מפורשת:
   גלילה אופקית ב-RTL אינה אמינה, וחמישה צ'יפים נשארו בלתי נגישים.
   צ'יפים שנגללים עדיפים על תוכן נסתר: הכל נראה, בלי מחווה סמויה. */
@media (max-width:900px){
  .fchips{flex-wrap:wrap!important;overflow-x:visible!important;
    -webkit-mask-image:none!important;mask-image:none!important;
    row-gap:8px}
  .fchip{flex:0 1 auto;min-width:0}
}

/* 64 כותרות הפוטר עברו ל-h2 מסיבות מדרג — העיצוב זהה במכוון */
.ft h2.ft-h{color:#fff;font-size:13px;font-weight:800;letter-spacing:.1em;margin:0 0 16px;text-transform:uppercase;line-height:1.3;font-family:inherit}

/* 65 כותרת הכרטיס הצף היא תווית ממשק ולא כותרת מסמך — עיצוב זהה */
.float .hw-h{margin:0 0 14px;font-family:var(--tech);font-style:italic;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--red2);display:flex;align-items:center;gap:8px}

/* ============ 66 שלושה כשלי ניגודיות AA ============
   בכל השלושה זז רק הצד הצבעוני, באותו גוון ורוויה. רקע העמוד לא נוגע. */

/* ספרת האינדקס 01/02 על רקע חול — נמדד 3.89:1 */
.idx i,.s-sand .idx i,.s-bone .idx i{color:#B40904}

/* תאריכי הבלוג — נמדד 2.95:1 */
.bc-b time,.blog time,article time{color:#79756C}

/* מציין הטלפון בטופס — נמדד 2.34:1 */
#czv7_tel::placeholder,.tf input::placeholder,input[type=tel]::placeholder{color:#6E6A62;opacity:1}

/* 67 מפת המשווק הבודד עברה לתצוגת אזור — ובלי חיתוך הצללית נשפכת מהכרטיס */
.st-map{overflow:hidden;position:relative}
.st-map svg{overflow:hidden;width:100%;height:100%;display:block}

/* ============ 68 מפת המשווקים בעמוד המשווקים ============
   העמוד שאליו נוחת חיפוש "משווק קרוב אליי" היה היחיד בלי מפה. */
.stmap-s{padding-block:clamp(22px,3vw,40px)}
.stmap{position:relative;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(20,20,24,.09);border-radius:15px;
  padding:clamp(14px,2vw,26px);overflow:hidden}
.stmap svg{width:auto;height:clamp(300px,42vw,520px);max-width:100%;display:block;overflow:visible}
.stmap .ilmap{fill:#EFEAE0}
.stmap .nd{fill:#C80A04;opacity:.78;cursor:pointer;
  transition:opacity .2s ease,r .2s cubic-bezier(.2,.7,.2,1)}
.stmap .nd:hover,.stmap .nd:focus-visible{opacity:1;r:5.4}
.stmap .nd:focus-visible{outline:2px solid #141419;outline-offset:2px}
.stmap .nd.on{fill:#141419;opacity:1}
.stmap-c{position:absolute;inset-inline-start:clamp(14px,2vw,26px);bottom:clamp(12px,1.6vw,20px);
  font-size:12.5px;color:#6B6862;background:rgba(255,255,255,.9);
  padding:6px 12px;border-radius:999px;border:1px solid rgba(20,20,24,.08)}
.stmap-c b{color:#141419;font-weight:800}
@media (max-width:760px){
  .stmap svg{height:clamp(260px,64vw,400px)}
  .stmap-c{position:static;margin-top:10px;text-align:center}
  .stmap{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){ .stmap .nd{transition:none} }

/* 69 המפה צרה (212px) בכרטיס של 1200 — מצמצמים ומגדילים */
.stmap{max-width:560px;margin-inline:auto}
.stmap svg{height:clamp(360px,50vw,620px)}
@media (max-width:760px){ .stmap{max-width:none} .stmap svg{height:clamp(300px,74vw,440px)} }

/* ===== 70. חוקר הרכיבים בעמוד המוצר =====
   בעמוד הבית הפאנל נושא מפרט, מחיר וגוונים ולכן הוא גבוה מהצילום.
   בעמוד המוצר שלושתם יושבים בקופסת הרכישה, הפאנל קצר, ו-align-items:stretch
   כיווץ את הצילום ל-262px ב-1920 — קטן ממנו ב-1280. נמדד, לא הוסק.
   רצפה לגובה מחזירה לצילום נוכחות, בלי לגעת בעמוד הבית. */
@media (min-width:1001px){
  .anat-solo .anat-fig{min-height:clamp(420px,31vw,520px)}
  .anat-solo[data-w="1"] .anat-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:1000px){
  .anat-solo .anat-fig{height:clamp(300px,70vw,420px)}
}

/* ===== 71. מונה הנקודות בחוקר הרכיבים — כשל ניגודיות AA שהסריקה החמיצה =====
   #anatTot נמדד ב-#9A968E על לבן, יחס 2.94 מול 4.5 הנדרשים.
   הוא קיים גם בעמוד הבית ולא דווח שם, כי axe מדלג על טקסט בסעיף
   שטרם נחשף בגלילה — כלומר "אפס כשלי ניגודיות" כיסה רק מה שכבר נראה.
   מוזז רק הצד הצבעוני, באותו גוון ורוויה, לפי חוק 38(ד). יחס חדש 4.59. */
.ap-c{color:#79756C}

/* ===== 72. מפת המשווקים בטלפון — תצוגה, לא פקד =====
   נמדד ב-390px: 115 סיכות בנות 4.2–5.1 פיקסלים, 50 מהן עם מרכז מכוסה.
   הגדלת המפה מגדילה גם את הרדיוס ולכן אינה משנה את יחס החפיפה;
   הקטנת הרדיוס הורידה ל-31 במחיר סיכות של 2px. שתי הדרכים נוסו ונמדדו.
   לכן בטלפון הסיכות אינן לחיצות, והסינון נעשה בבורר שישב ישירות מעל. */
.smc-m{display:none}
@media (max-width:760px){
  .smc-d{display:none}
  .smc-m{display:inline}
  .stmap .nd{pointer-events:none}
  .stmap svg{height:clamp(330px,86vw,470px)}
}

/* ===== 73. משוב לסיכה שמתחת לסמן =====
   נמדד: 50 מתוך 115 הסיכות חופפות זו על זו בגוש דן, בכל רוחב — זו הגאוגרפיה.
   בעכבר הלחיצה נופלת על הסיכה שרואים, ולכן מה שחסר הוא לדעת איזו עיר זו
   לפני הלחיצה. תגית title נותנת את השם, וההגדלה בריחוף מבדילה אותה משכנותיה. */
@media (hover:hover) and (pointer:fine){
  .stmap .nd{transition:r .12s ease,fill .12s ease}
  .stmap .nd:hover,.stmap .nd:focus-visible{fill:#8F0703;stroke:#FFFFFF;stroke-width:1.1}
}
.stmap .nd.on{fill:#141419;stroke:#FFFFFF;stroke-width:1.1}
.stmap .nd:focus-visible{outline:none;stroke:#141418;stroke-width:1.4}
@media (prefers-reduced-motion:reduce){ .stmap .nd{transition:none} }