/* ש.א אתרים — שכבת סגנון משותפת.
   כל ערכי העיצוב (צבעים/מידות/ריווחים) מקורם בקבצי reference/*.dc.html והם המקור המחייב.
   כאן יושב רק מה שאי-אפשר להביע ב-style inline: :hover / :focus, רספונסיביות (@media),
   ומצב "פעיל" בתפריט. שאר הפריסה נשארת inline בקבצי ה-HTML — נאמן למקור. */

/* ---- גלובלי (מתוך <helmet><style> של הרפרנס) ---- */
* { box-sizing: border-box; }
body { margin: 0; background: #232220; font-family: 'Rubik', sans-serif; }
a { color: #4aa657; text-decoration: none; }
a:hover { color: #5fbf6c; }
input::placeholder, textarea::placeholder { color: #7d766a; }

/* ---- קישורי תפריט עליון (navbar) — צבע/משקל/קו-תחתון דרך CSS כדי ש-:hover יעבוד ---- */
.nav-link { color: #d8d2c6; font-weight: 500; border-bottom: 3px solid transparent; transition: color .15s; }
.nav-link:hover { color: #fff; }
.nav-link.is-active { color: #fff; font-weight: 800; border-bottom-color: #c9a25e; }

/* ---- קישורי תפריט-צד (sidebar) ---- */
.side-link { color: #d8d2c6; font-weight: 500; border-inline-start: 3px solid transparent; }
.side-link:hover { background: #35342f; color: #fff; }
.side-link.is-active { color: #fff; font-weight: 800; border-inline-start-color: #c9a25e; }

/* ---- קישור "עברית" (תפריט עליון + סייד-בר) — צבע דרך CSS כדי ש-:hover יעבוד ---- */
.muted-link { color: #d8d2c6; }
.muted-link:hover { color: #fff; }

/* ---- כלי-עזר ל-hover/focus ---- */
.hov-white:hover { color: #fff; }
.hov-op:hover { opacity: .85; }
.hov-scale:hover { transform: scale(1.08); }
.hov-scale106:hover { transform: scale(1.06); }
.hov-card:hover { border-color: #c9a25e; transform: translateY(-3px); }
.btn-green:hover { background: #3a8244; }   /* 4.71:1 מול לבן */
.chat-opt:hover { background: rgba(74, 166, 87, .15); }
/* היה rgba של כחול-וויז; הכפתור עבר לירוק של האתר (ר' contact.html) */
.waze-btn:hover { background: rgba(74, 166, 87, .12); }
.field:focus { border-color: #c9a25e; }
.gold-link { color: #c9a25e; }
.gold-link:hover { color: #dbb877; }

/* איש קשר: טלפון/מייל */
.contact-phone { color: #fff; }
.contact-phone:hover { color: #4aa657; }

/* ---- רשת הקטלוג: 3 מוצרים בשורה בדסקטופ ----
   היה `auto-fill` שהתאים את מספר העמודות לרוחב — במסך רחב זה נתן
   5 כרטיסים צרים. עכשיו המספר קבוע, והכרטיס הוא שמתרחב.
   minmax(0,1fr) ולא 1fr: בלי זה שם מוצר ארוך מנפח את העמודה
   מעבר לחלקה, כי ברירת המחדל של פריט גריד היא `min-content`. */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 22px;
}
@media (max-width: 1120px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 620px) {
  .catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ============================ כרטיס מוצר בקטלוג ============================
   מכל כהה מופרד מהעמוד, הילת אמבר רכה, והמוצר "צף" בלי ריבוע לבן.

   שתי משפחות תמונות, ולכן שני טיפולים:
     .is-cut — נחתך הרקע הלבן ויש אלפא אמיתי. drop-shadow עוקב אחרי
               צורת המוצר עצמו, וזה מקור ההילה שנראית טבעית.
     .is-raw — החיתוך נפסל (מוצר לבן על לבן / צילום שטח). כאן מסכה
               רדיאלית מרככת את קצוות הריבוע הלבן עד להיעלמות, כך
               שהוא נקרא כזרקור מכוון ולא כמדבקה.
   -------------------------------------------------------------------------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 18px;
  border-radius: 16px;
  /* הרקע היה כמעט שחור (#2b2a27) ונקרא קודר מול העמוד (#232220).
     כרטיס מורם צריך להיות **בהיר** מהעמוד, לא כהה ממנו. */
  background: linear-gradient(180deg, #35342f 0%, #2b2a27 100%);
  /* הדפדפן מיישר עובי מסגרת לפיקסלי מסך שלמים. במסך עם
     devicePixelRatio=1.25 גם 1px וגם 1.5px התגלגלו לפיקסל אחד
     (=0.8px מחושב) והמסגרת כמעט נעלמה. 2px חוצה את הסף לשני
     פיקסלים ונשאר נראה בכל צפיפות. */
  border: 2px solid rgba(201, 162, 94, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
              0 14px 30px -18px rgba(0, 0, 0, .95);
  cursor: pointer;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1),
              border-color .28s ease, box-shadow .28s ease;
}

/* ההילה בשכבה נפרדת: אפשר להעצים אותה ב-hover בלי לגעת בגבול עצמו */
.product-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 26px -6px rgba(201, 162, 94, .42);
  opacity: .85;
  transition: opacity .28s ease, box-shadow .28s ease;
}

.product-card:hover,
.product-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 94, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08),
              0 22px 40px -20px rgba(0, 0, 0, 1);
}
.product-card:hover::after,
.product-card:focus-visible::after {
  opacity: 1;
  box-shadow: 0 0 44px -4px rgba(201, 162, 94, .7);
}

/* ---- אזור התמונה ---- */
/* בדסקטופ הכרטיס רחב פי שניים מקודם (3 בשורה במקום 5), ואזור
   תמונה של 200px נראה מול זה נמוך ומעוך. */
.pc-media {
  position: relative;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}
/* זוהר רדיאלי מאחורי המוצר — נותן את העומק שבלעדיו המוצר "מודבק" */
.pc-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 54% at 50% 50%,
              rgba(201, 162, 94, .26) 0%,
              rgba(201, 162, 94, .08) 46%,
              transparent 74%);
  transition: opacity .28s ease;
}
/* opacity מעל 1 נחתך ל-1 ולכן ה-hover לא עשה כלום. מגדילים את
   הזוהר בשכבה שנייה במקום. */
.pc-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 52% 48% at 50% 50%,
              rgba(201, 162, 94, .30) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .28s ease;
}
.product-card:hover .pc-media::after { opacity: 1; }

.pc-img {
  position: relative;
  max-width: 100%;
  max-height: 244px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), filter .28s ease;
}
.product-card:hover .pc-img { transform: scale(1.05); }

.pc-img.is-cut {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6))
          drop-shadow(0 0 14px rgba(201, 162, 94, .26));
}
.product-card:hover .pc-img.is-cut {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .65))
          drop-shadow(0 0 22px rgba(201, 162, 94, .45));
}

/* -webkit-mask נשאר: ספארי עדיין דורש אותו לצד התקן.
   הדעיכה מתחילה מוקדם (36%) ומסתיימת לפני הקצה (94%) — כך פינות
   הריבוע הלבן נעלמות לגמרי במקום להשאיר קו חד.
   ה-sepia הופך את הלבן הצורם לשנהב חמים שמתיישב עם הזהב. */
.pc-img.is-raw {
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%,
                      #000 36%, rgba(0, 0, 0, .55) 70%, transparent 94%);
          mask-image: radial-gradient(ellipse 62% 60% at 50% 50%,
                      #000 36%, rgba(0, 0, 0, .55) 70%, transparent 94%);
  filter: sepia(.16) brightness(.9) saturate(.95);
}
.product-card:hover .pc-img.is-raw {
  filter: sepia(.08) brightness(1) saturate(1);
}

/* ---- טיפוגרפיה: היררכיה ברורה בין שם לקטגוריה ---- */
.pc-body { display: flex; flex-direction: column; gap: 6px; }
.prod-name {
  color: #f4f0e7;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  transition: color .2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* שני שורות — אחרת הכרטיסים לא אחידים */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-cat {
  color: rgba(201, 162, 94, .72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .2s;
}
.product-card:hover .prod-name { color: #fff; }
.product-card:hover .prod-cat { color: rgba(201, 162, 94, .95); }
.prod-desc { color: #b9b2a6; transition: color .2s; }

/* ---- "לפרטים נוספים": רמז חזותי, לא קישור עצמאי ----
   .pc-body הוא flex column, ולכן span ברירת המחדל (inline) לא נמתח
   לרוחב מלא. display:flex עליו + justify-content:center הופך אותו
   לכפתור מלא-רוחב עם טקסט ממורכז, בלי לשנות את display:flex column
   של ההורה. */
.pc-more {
  display: flex; align-items: center; justify-content: center;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(201, 162, 94, .55);
  color: #e8cf9a;
  font-size: 13px; font-weight: 700;
  transition: background .28s ease, border-color .28s ease, color .28s ease;
}
.product-card:hover .pc-more {
  background: rgba(201, 162, 94, .16);
  border-color: rgba(201, 162, 94, .95);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) { .pc-more { transition: none; } }

/* הגובה המוגדל שייך לדסקטופ בלבד. הכלל הזה חייב לשבת **אחרי**
   `.pc-media`, אחרת הכלל הראשי גובר עליו — אותה ספציפיות, והמאוחר
   מנצח. הצבתי אותו קודם ליד רשת הקטלוג והוא לא עשה כלום. */
@media (max-width: 1120px) {
  .pc-media { height: 200px; }
  .pc-img { max-height: 184px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card, .pc-img { transition: none; }
  .product-card:hover { transform: none; }
  .product-card:hover .pc-img { transform: none; }
}

/* ---- הדר דביק: נשאר על המסך בגלילה (בקשת עמר 2026-07-30) ----
   sticky ולא fixed: sticky שומר על ההדר **בתוך הזרימה**, ולכן התוכן
   שאחריו לא נדחף מתחתיו ולא צריך padding-top מפצה שתלוי בגובה ההדר
   (שמשתנה בין דסקטופ למובייל, ובין עמוד לעמוד).
   z-index:40 — אותה שכבה שכבר הייתה בשימוש להדר בדף הבית: מעל שכבות
   ההירו (2) ומתחת לסייד-בר/כיסוי/צ'אט (97-99), כך שתפריט פתוח עדיין
   מכסה אותו כמצופה.
   בדף הבית במובייל יש דריסה ל-position:absolute (ר' הבלוק למטה)
   שגוברת על זה — שם ההדר מרחף מעל ההירו ולא נשאר בגלילה. */
header { position: sticky; top: 0; z-index: 40; }

/* ⚠️ בלי הכלל הזה ה-sticky למעלה **לא עובד בכלל** (נמדד: ההדר נגלל
   החוצה ב--1200px בדיוק כגובה הגלילה).
   הסיבה: לעוטף העמוד יש overflow-x:hidden כ-inline style בכל 890
   העמודים. לפי המפרט, כש-ציר אחד אינו visible השני הופך ל-auto —
   כלומר העוטף נעשה **scroll container**, ו-sticky נצמד אליו במקום
   ל-viewport. העוטף גדל עם התוכן ולעולם לא גולל בעצמו, ולכן ההדר
   פשוט נגלל עם העמוד.
   clip ולא hidden: שניהם חותכים תוכן חורג בדיוק אותו דבר, אבל clip
   **אינו** יוצר scroll container — וזו כל ההגנה מגלישה אופקית שנשמרת
   כאן. בדפדפן ישן שלא מכיר clip הערך נפסל, ה-inline hidden גובר,
   וההדר חוזר להיות לא-דביק — נסיגה חיננית, בלי שבירה ויזואלית. */
body > div { overflow-x: clip !important; }

/* ---- שלד רספונסיבי: הסף הוא 1120px (כמו ברפרנס) ---- */
.hamburger { display: none; }                 /* דסקטופ: אין המבורגר */
.top-logo { display: block; }                 /* דסקטופ: לוגו בהדר */
.navbar { display: block; }                   /* דסקטופ: שורת ניווט */
.hero-img, .hero-grad, .hero-inset, .hero-pyr { display: block; }
.hero-inner { background-image: none; }

@media (max-width: 1120px) {
  .hamburger { display: flex; }               /* מובייל: המבורגר */
  /* 2026-07-30 (בקשת עמר): הלוגו חוזר להדר במובייל, **לפני** ההמבורגר,
     כקישור לדף הבית. לא נדרש מרקאפ חדש ב-889 העמודים — ה-
     <a class="top-logo"> כבר קיים בכולם (בעמודי המוצר ה-href הוא
     ../index.html), הוא רק היה display:none במובייל.
     order:-1 ולא שינוי סדר ב-DOM: ב-DOM ההמבורגר קודם, ובקונטיינר
     ה-flex זה מציב את הלוגו ראשון — כלומר בקצה ההתחלה (ימין ב-RTL),
     לפני ההמבורגר.
     ה-!important על הגובה נדרש כי 74px יושב כ-inline style על ה-<img>.

     2026-07-30 (בקשת עמר): במובייל מוצג **רק סמל הלוגו** — הגגות +
     "ש.א אתרים" — בלי שורת התיאור ובלי פס מספר הטלפון. בדסקטופ הלוגו
     המלא נשאר, שם יש רוחב והטלפון הוא נכס.
     החיתוך נעשה ב-CSS ולא בקובץ PNG חדש: logo-full.png כבר נטען
     במובייל בשביל הסייד-בר, ולכן עותק חתוך היה 218KB מיותרים; וגם
     החלפת src הייתה דורשת נגיעה ב-889 העמודים.
     תיבת החיתוך נמדדה מהמקור (1024x437): x 581..939, y 0..269, כלומר
     358x269. ה-<a> הוא חלון ה-overflow וה-<img> ממוקם בתוכו ב-
     absolute. ה-left פיזי במכוון — ב-RTL ‏margin/inset-inline היו
     מתהפכים והחיתוך היה נופל על הצד הלא נכון של התמונה.
     ה---logo-h הוא הידית היחידה לשינוי גודל; כל השאר נגזר ממנו. */
  .top-logo {
    display: block; order: -1;
    --logo-h: 46px;
    /* מרווח סביב הסמל. לא `padding`: החלון הזה הוא תיבת החיתוך, ו-
       padding היה מזיז את נקודת הייחוס של ה-<img> ושובר את החיתוך.
       במקום זה החלון גדל ב-2*pad וה-<img> מוזז ב-pad — כך תיבת
       החיתוך נשארת מדויקת והמרווח נוסף סביבה. */
    --logo-pad: 0px;
    position: relative; overflow: hidden;
    width: calc(358 * var(--logo-h) / 269 + 2 * var(--logo-pad));
    height: calc(var(--logo-h) + 2 * var(--logo-pad));
  }
  .top-logo img {
    position: absolute;
    top: var(--logo-pad);
    left: calc(-581 * var(--logo-h) / 269 + var(--logo-pad));
    height: calc(437 * var(--logo-h) / 269) !important;
    width: auto !important; max-width: none !important;
  }
  /* 2026-07-30 (בקשת עמר): רק בדף הבית — שם הלוגו יושב על תמונת ההירו
     — מגבירים את הניגודיות של הסמל עצמו כדי שיבלוט.
     גרסה קודמת הייתה פאנל "זכוכית חלבית" (backdrop-filter:blur) מאחורי
     הלוגו; עמר ביקש לבטל את הטשטוש ולהחליף אותו בניגודיות על הסמל,
     ולכן גם ה---logo-pad וה-border-radius ירדו — בלי רקע נראה אין
     מה לרפד.
     drop-shadow ולא box-shadow: ב-filter הצל נגזר מ**צללית האלפא** של
     ה-PNG, כלומר עוטף את קווי הגגות והאותיות עצמם ולא את התיבה
     המלבנית סביבם. זו גם השפה שכבר בשימוש בכפתור הוואטסאפ ובאווטאר
     הצ'אט. contrast+brightness מרחיבים את הטווח בין הכסף/ירוק לרקע. */
  body[data-page="home"] .top-logo img {
    filter: contrast(1.25) brightness(1.12)
            drop-shadow(0 2px 5px rgba(0, 0, 0, .85));
  }
  .navbar { display: none; }                  /* מובייל: אין שורת ניווט — היא בסייד-בר */
  /* אין "פס" הדר במובייל (בקשת עמר): הרקע והקו התחתון של ה-<header>
     מבוטלים, כך שהלוגו וההמבורגר יושבים ישר על רקע העמוד במקום על
     באנר שאין בו כלום. שני הערכים יושבים כ-inline style על ה-<header>
     בכל 889 העמודים, ולכן !important — בלעדיו הכלל לא גובר.

     הסרת הפס חלה בכל העמודים. */
  header { background: transparent !important; border-bottom: 0 !important; }

  /* 2026-07-30 (בקשת עמר): ההדר **מרחף מעל תמונת ההירו** ולא יושב
     מעליה. position:absolute מוציא אותו מהזרימה, וההירו — שהוא האח
     הבא ב-DOM — עולה לראש העמוד מתחתיו. זה עדיף על margin-top שלילי
     על ההירו, שהיה דורש לקודד קשיח את גובה ההדר ולהישבר בכל שינוי בו.
     ה-position:relative על העוטף הוא מה שנותן ל-absolute עוגן; בלעדיו
     ההדר היה נתלה ב-viewport ומתנהג כמו fixed-בלי-גלילה.
     z-index:40 — מעל שכבות ההירו (2) ומתחת לסייד-בר/צ'אט (97-99).

     ⚠️ מוגבל ל-data-page="home" בכוונה: תמונת הירו קיימת **רק** בדף
     הבית. כשהכלל היה גלובלי הוא הוציא את ההדר מהזרימה גם ב-888
     העמודים האחרים, ושם אין הירו לרחף מעליו — אז הוא כיסה את כותרת
     העמוד (נמדד: 18px חפיפה על ה-h1 של "צור קשר"). */
  /* fx.js מזריק בזמן ריצה בדיוק את אותו כלל לדף הבית (ר' fx.js:35),
     ולכן זה עשוי להיראות מיותר. הוא נשאר כאן במכוון: הפריסה לא צריכה
     להיות תלויה בתופעת-לוואי של סקריפט שנטען ב-defer. */
  body[data-page="home"] > div { position: relative; }
  /* fixed ולא absolute (בקשת עמר 2026-07-30: "שיצוף ממש כמו כפתור
     הנגישות"). absolute היה מרחף מעל ההירו אבל **נגלל איתו** — ולכן
     במובייל בדף הבית ההמבורגר והלוגו נעלמו בגלילה, למרות ה-sticky
     הגלובלי (הכלל הזה גובר עליו).
     fixed שומר על אותה פריסה בדיוק — שניהם מוציאים את ההדר מהזרימה,
     כך שההירו עדיין עולה לראש העמוד מתחתיו — ורק מוסיף שההדר נשאר
     במקומו בגלילה, כמו כפתור הנגישות והוואטסאפ. */
  body[data-page="home"] header {
    position: fixed; top: 0; inset-inline: 0; z-index: 40;
  }
  .hero-img, .hero-grad, .hero-inset, .hero-pyr { display: none; }
  .hero-inner {
    background-image: linear-gradient(rgba(24, 22, 19, .75), rgba(24, 22, 19, .75)), url('assets/hero-wide.png');
    background-size: cover;
    background-position: left center;
  }
}

/* ---- סייד-בר נייד + כיסוי: נשלטים ע"י class על ה-body (app.js) ---- */
.menu-overlay { display: none; }
.sidebar { display: none; flex-direction: column; }
body.menu-open .menu-overlay { display: block; }
body.menu-open .sidebar { display: flex; }

/* ---- מודאל מוצר (קטלוג): מוסתר עד שנפתח ---- */
.product-modal-wrap { display: none; }
body.modal-open .product-modal-wrap { display: block; }

/* ---- פאנל צ'אט (דף הבית): מוסתר עד שנפתח ---- */
.chat-panel { display: none; }
.chat-panel.open { display: flex; }

/* ---- סינון קטגוריות: רשימה נפתחת עם תיבות סימון ---- */
.dropdown { position: relative; }

.dd-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  background: #1d1c1a;
  border: 1px solid #4b4945;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Rubik', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #e8e2d6;
  cursor: pointer;
  transition: border-color .15s;
}
.dd-trigger:hover { border-color: #c9a25e; }
.dropdown.open .dd-trigger { border-color: #c9a25e; }
.dd-caret { margin-inline-start: auto; color: #c9a25e; font-size: 10px; transition: transform .15s; }
.dropdown.open .dd-caret { transform: rotate(180deg); }

.dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 50;
  width: min(360px, calc(100vw - 60px));
  max-height: 340px;
  overflow-y: auto;
  background: #2e2d2a;
  border: 1px solid #5a5854;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  padding: 6px;
}
.dropdown.open .dd-panel { display: block; }

.dd-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'Rubik', sans-serif;
  font-size: 14.5px;
  color: #d8d2c6;
  text-align: start;
  cursor: pointer;
}
.dd-opt:hover { background: #35342f; color: #fff; }

/* תיבת הסימון: ה-✓ קיים תמיד, שקוף כשלא מסומן — כך הריבוע לא "קופץ" */
.dd-box {
  flex: none;
  width: 19px;
  height: 19px;
  border: 1.5px solid #5a5854;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: transparent;
  transition: background .12s, border-color .12s;
}
.dd-opt[aria-selected="true"] .dd-box {
  background: #2e7d33;
  border-color: #2e7d33;
  color: #fff;
}
.dd-opt[aria-selected="true"] .dd-name { color: #fff; font-weight: 700; }
.dd-name { flex: 1; }
.dd-count { flex: none; color: #7d766a; font-size: 12.5px; }
.dd-opt[aria-selected="true"] .dd-count { color: #4aa657; }

#clear-filters {
  background: none;
  border: 1px solid #4b4945;
  color: #b9b2a6;
  border-radius: 8px;
  padding: 10px 16px;
  font-family: 'Rubik', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
#clear-filters:hover { border-color: #c9a25e; color: #fff; }

/* ---- עמוד מוצר: תמונה עם זכוכית מגדלת ---- */
/* התמונות במקור ~4000px. בלי תקרה הן נפרשות על מסך שלם ומרסקות את העמוד,
   ולכן התצוגה מוגבלת — והזום הוא זה שנותן את הפרטים. */
.zoom-fig { max-width: 520px; margin-inline: auto; }

/* overflow:hidden מכוון — העדשה נחתכת בשולי המסגרת ולא "בורחת" ממנה. */
.zoom {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #292826;
  border: 1px solid #434240;
  padding: 14px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: crosshair;
}
.zoom img {
  display: block;
  /* max-* בלבד, בלי object-fit: כך תיבת האלמנט שווה בדיוק לתמונה הנראית,
     ואין "שוליים" שיזיזו את חישוב העדשה. */
  max-width: 100%;
  max-height: 360px;
  width: auto;
  height: auto;
  border-radius: 6px;
}
.zoom-lens {
  display: none;
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 2px solid #c9a25e;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .6);
  background-repeat: no-repeat;
  background-color: #2e2d2a;
  pointer-events: none;  /* אחרת העדשה חוטפת את ה-mousemove מהמכל */
}
.zoom.is-zooming .zoom-lens { display: block; }

.zoom-hint {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  background: rgba(24, 22, 19, .82);
  border: 1px solid #4b4945;
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 12px;
  color: #d8d2c6;
  pointer-events: none;
  transition: opacity .15s;
}
.zoom.is-zooming .zoom-hint { opacity: 0; }

/* תמונה שהמקור שלה קטן מדי להגדלה אמיתית — בלי סמן-זכוכית ובלי הבטחה */
.zoom.no-zoom { cursor: default; }
.zoom.no-zoom .zoom-hint { display: none; }

/* במסכי מגע אין ריחוף — הרמז מטעה, והזום לא יופעל בכל מקרה */
@media (hover: none) {
  .zoom { cursor: default; }
  .zoom-hint { display: none; }
}

@media (max-width: 520px) {
  .zoom-lens { width: 150px; height: 150px; }
}

/* ---- קישורים בכותרת התחתונה (נגישות / פרטיות) ----
   ממוקמים בקצה השמאלי (ב-RTL: end) ובאותו גודל של שורת הקרדיט,
   בלבן ובלי קו תחתון — לבקשת Omer.
   הקו חוזר ב-hover וב-focus: בלעדיו הצבע לבדו מבחין בין קישור
   לטקסט, וזה נכשל ב-WCAG 1.4.1. */
.footer-link {
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
.footer-link:hover,
.footer-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- עימוד ---- */
.page-btn {
  background: none;
  border: 1px solid #4b4945;
  color: #d8d2c6;
  border-radius: 8px;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.page-btn:hover:not(:disabled) { border-color: #c9a25e; color: #fff; }
.page-btn[aria-current="true"] {
  background: #2e7d33;
  border-color: #2e7d33;
  color: #fff;
}
.page-btn:disabled { opacity: .35; cursor: default; }
.page-gap { color: #7d766a; padding: 0 4px; }

/* ============================ עמודים משפטיים (privacy) ============================
   טקסט רץ ארוך, ולכן כאן — בשונה משאר האתר — הטיפוגרפיה יושבת ב-CSS ולא inline:
   inline על כל <p> ב-17 סעיפים היה בלתי-קריא לחלוטין. הפריסה (max-width, padding)
   נשארת inline בקובץ ה-HTML, נאמן למוסכמה.
   -------------------------------------------------------------------------------- */
.legal h2 {
  margin: 0 0 18px;
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 900;
  color: #fff;
  scroll-margin-top: 20px;          /* אחרת כותרת היעד נדבקת לקצה אחרי קפיצת עוגן */
  padding-bottom: 12px;
  border-bottom: 1px solid #434240;
}
.legal h3 {
  margin: 28px 0 12px;
  font-size: 17px;
  font-weight: 800;
  color: #c9a25e;
}
.legal p  { margin: 0 0 14px; font-size: 16px; color: #d8d2c6; line-height: 1.95; }
.legal ul { margin: 0 0 14px; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 9px; }
.legal li { font-size: 16px; color: #d8d2c6; line-height: 1.85; }
.legal li::marker { color: #c9a25e; }
.legal strong { color: #fff; font-weight: 700; }
.legal code {
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 14px;
  background: #1d1c1a;
  border: 1px solid #4b4945;
  border-radius: 4px;
  padding: 1px 7px;
  color: #c9a25e;
}
.legal > div > *:last-child { margin-bottom: 0; }

/* שדה שטרם אומת. צהוב-אזהרה ולא זהב-מותג — הוא חייב לצעוק "לא לפרסם ככה",
   ולכן הוא לא מתחפש לטקסט רגיל. overflow-wrap: הטקסט בפנים ארוך ובלעדיו
   הוא מותח את הטבלה מעבר לרוחב המסך במובייל. */
.fill-in {
  display: inline;
  background: rgba(201, 162, 94, .13);
  border: 1px dashed #c9a25e;
  border-radius: 5px;
  padding: 1px 8px;
  font-size: .93em;
  font-weight: 600;
  color: #e0bd7e;
  overflow-wrap: anywhere;
}

/* טבלאות: הגלילה היא **בתוך** הטבלה ולא בעמוד — דרישת החוזה הרספונסיבי. */
.legal-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-size: 15px;
}
.legal-table th,
.legal-table td {
  border: 1px solid #434240;
  padding: 12px 15px;
  text-align: start;
  vertical-align: top;
  color: #d8d2c6;
  line-height: 1.75;
  min-width: 130px;
}
.legal-table thead th { background: #333230; color: #c9a25e; font-weight: 700; white-space: nowrap; }
.legal-table tbody th { background: #2e2d2a; color: #fff; font-weight: 700; }

@media (max-width: 1120px) {
  .legal p, .legal li { font-size: 15.5px; }
  .legal-table { font-size: 14px; }
  .legal-table th, .legal-table td { padding: 10px 12px; }
}

/* ==========================================================================
   BLOCK — עמוד מוצר (public/product/*.html), עיצוב מחדש לפי ההדמיה
   ==========================================================================
   כל הכללים כאן מסוננים דרך `body[data-page="product"]` בכוונה: 880 עמודי
   המוצר הם היחידים שנושאים את התכונה הזו, ולכן שום כלל כאן לא יכול לדלוף
   לעמודי הבית/הקטלוג שמתוחזקים בנפרד.

   הבררן הכפול הזה גם מנצח בסלקטיביות את הכללים הכלליים שלמעלה בקובץ
   (`.zoom`) — ולכן כל hover שנדרס מוגדר כאן מחדש. אם מוחקים כלל כאן,
   לבדוק שה-hover לא נעלם איתו.

   המבנה (`.pp-*`) מיוצר ב-tools/build_product_pages.py. שינוי שם מחלקה
   כאן בלי שינוי שם שם — ולהפך — נכשל בשקט, בלי שגיאה בקונסולה.
   ========================================================================== */

body[data-page="product"] .pp {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 72px;
}

/* ---- 1. פירורי לחם ---- */
body[data-page="product"] .pp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 13px;
  color: #9c958a;
}
/* אפור ולא זהב: זו שורת מיקום, לא קריאה לפעולה. הזהב נשמר ל-hover
   כדי שעדיין יהיה ברור שאלה קישורים. */
body[data-page="product"] .pp-crumb-link {
  color: #9c958a;
  transition: color .15s;
}
body[data-page="product"] .pp-crumb-link:hover,
body[data-page="product"] .pp-crumb-link:focus-visible { color: #c9a25e; }

/* ---- 2 + 3. כותרת ותת-כותרת ---- */
body[data-page="product"] .pp-title {
  margin: 0 0 7px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: #f2efe9;
  line-height: 1.3;
}
body[data-page="product"] .pp-sub {
  font-size: 15px;
  font-weight: 500;
  color: #9c958a;
}

/* ---- 4. קו מפריד ----
   קו ניטרלי (#434240) ולא הקו הזהוב שהיה כאן: הזהב שמור לכרטיסיות
   התמונה, ושני מוקדי זהב באותו מבט מבטלים זה את זה. */
body[data-page="product"] .pp-rule {
  height: 1px;
  background: #434240;
  margin: 18px 0 30px;
}

/* ---- 5. רשת הכרטיסיות ----
   ב-RTL הפריט הראשון ברשת נופל מימין — ולכן התמונה הראשית מימין
   ותמונת המפרט משמאל, בלי צורך ב-order. */
body[data-page="product"] .pp-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}
/* בלי תמונת מפרט (48 מוצרים): עמודה אחת ממורכזת — לא חצי עמוד ריק */
body[data-page="product"] .pp-media--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  margin-inline: auto;
}
body[data-page="product"] .pp-media-col { min-width: 0; }

/* הכרטיסייה עצמה.
   `.zoom` הוא גם המכל שה-JS מודד בו את מיקום העדשה, ולכן כאן משנים
   **רק מראה** — רקע, מסגרת, פינות, ריפוד. אין לגעת ב-position/overflow/
   display, אחרת חישוב העדשה ב-app.js יסטה או ייחתך.
   ההילה היא box-shadow חיצוני, ו-overflow:hidden של האלמנט לא חותך אותה. */
body[data-page="product"] .zoom {
  background: #2e2d2a;
  border: 2px solid rgba(201, 162, 94, .5);
  border-radius: 16px;
  box-shadow: 0 0 30px -6px rgba(201, 162, 94, .45);
  padding: 18px;
}

/* ---- 6. שם המוצר מתחת לכרטיסייה הראשית ---- */
body[data-page="product"] .pp-caption {
  margin-top: 12px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #9c958a;
}

/* ---- 7. ניווט תחתון: הקודם מימין · חזרה לקטלוג במרכז · הבא משמאל ----
   רשת 1fr/auto/1fr ולא space-between: עם space-between מיקום הקישור
   האמצעי תלוי ברוחב שני הצדדים, והוא סטה מהמרכז ב-7px — ובמוצר הראשון
   והאחרון, שבהם צד אחד הוא <span> ריק, הסטייה הייתה גדולה בהרבה.
   ב-RTL הפריט הראשון (הקודם) נצמד ל-start = ימין. */
body[data-page="product"] .pp-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
body[data-page="product"] .pp-nav > :first-child { justify-self: start; }
body[data-page="product"] .pp-nav > :last-child { justify-self: end; }

/* מתחת ל-860px שתי כרטיסיות זו לצד זו מקטינות את התמונה מתחת לסף
   שבו הזום בכלל תורם — לכן עמודה אחת, ממורכזת. */
@media (max-width: 860px) {
  body[data-page="product"] .pp-media {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
}

/* בטלפון מצמצמים ריפוד ורווחים כדי שהתמונות יקבלו כמה שיותר רוחב —
   הן העיקר בעמוד. */
@media (max-width: 640px) {
  body[data-page="product"] .pp { padding: 20px 16px 60px; }
  body[data-page="product"] .pp-rule { margin: 14px 0 24px; }
  body[data-page="product"] .zoom { padding: 12px; border-radius: 14px; }
  body[data-page="product"] .pp-media { gap: 22px; }
  body[data-page="product"] .pp-nav { gap: 10px; }
}
/* ===================== END BLOCK — עמוד מוצר ===================== */

/* ==================== המוצרים שלנו — סליל וידאו תלת-ממדי ====================
   עיבוד של `hero-carousel-he.html` (סליל 3D מסתובב: perspective + rotateY +
   translateZ, עם גרירה/גלגלת/חיצים) לפלטת האתר ולתוכן האמיתי. סטיות מודעות
   מהמקור וההסבר שלהן:
   • 4 פאנלים במקום 8 — יש בדיוק 4 סרטוני מוצר. להמציא עוד = תוכן שאין.
     המרווח הזוויתי הוא 90° (360/4), ולכן הפאנל הקדמי ניצב שטוח למצלמה
     (זווית 0) — בדיוק מה שצריך כדי לצפות בסרטון — והשכנים נסוגים לצדדים.
   • הפאנל הקדמי מחזיק <video> אמיתי הניתן לניגון/השהיה/מסך-מלא, לא לולאת
     autoplay אילמת. שאר הפאנלים מציגים פוסטר עד שמסובבים אליהם.
   • אין drift נצחי כמו במקור: זהו אזור מוצרים שבו *צופים* בסרטון, לא הירו
     דקורטיבי. במקום זה "מצב משיכה": סיבוב עדין עד המגע הראשון ואז נעצר ונח.
   • object-fit: הפוסטר (16:9 נחתה) ב-cover ממלא את הפאנל; ה-<video>
     (לאורך/מרובע) ב-contain כדי לא לחתוך את הכתוביות הצרובות ואת התוכן.
   • גופן Rubik בלבד — המקור משך Frank Ruhl/Assistant/Plex; לא הוספנו טעינות
     פונט חוסמות-רינדור רק בשביל הקרוסלה.
   הגיאומטריה של הטבעת פיזית (left:50%, מרכוז) — היא ניטרלית לכיוון, בדיוק
   כמו במקור; טקסט ובקרות משתמשים בתכונות לוגיות (inset-inline).
   ------------------------------------------------------------------- */
.pv-reel {
  /* משתני המידה מרוכזים כאן ומשתנים לפי breakpoint — הטרנספורמים ב-JS
     מפנים ל-var(--pv-radius), כך שמעבר רספונסיבי לא דורש חישוב מחדש. */
  /* ×1.2 על המידה הבסיסית (300×420): קודם +50%, ואז ‎-20%‎ לבקשת עמר.
     --pv-gap ו---pv-pad **לא** משתנים איתם: הם המספרים שהוא נתן במפורש
     (רווח נראה של 30px, ריפוד פנימי של 10px), והרדיוס נגזר מהם. */
  --pv-panel-w: 360px; --pv-panel-h: 504px;
  --pv-persp: 1500px;
  /* הרווח החיצוני המבוקש הוא **30px על המסך**. הערך כאן הוא 42 ולא 30,
     ובכוונה: הוא נמדד במרחב הטבעת, לפני שהפאנל הקדמי מוגדל ב-scale(1.08).
     ההגדלה הזו מוסיפה ~16px לרוחבו הנראה — 8px לכל צד — ובולעת חצי
     מהרווח. נמדד בדפדפן: 30→16.2px, 40→27.2px, 48→36.1px; 42 נותן ~30.
     אם מבטלים אי-פעם את ההגדלה של הפאנל הפעיל, הערך הזה חוזר ל-30. */
  --pv-gap: 42px;
  --pv-pad: 10px;      /* ריפוד פנימי — הרקע הריק סביב הסרטון */

  /* הרדיוס **נגזר**, לא נבחר. שמונת הפאנלים הם צלעות של מתומן משוכלל
     שהרדיוס הזה הוא האפותם שלו, ואורך צלע = 2·R·tan(180°/N). כדי
     שיישאר --pv-gap בין צלע לצלע:  R = (רוחב + רווח) / (2·tan(22.5°)),
     ו-2·tan(22.5°) = 0.82842712.
     בלי הנוסחה טעינו פעמיים: --pv-radius:360 עם פאנל 300 נותן מרווח
     של 298.2px לפאנל שרוחבו 300 — חפיפה של 1.8px. זו בדיוק ה"ערבוביה
     בלי רווחים" שנראתה בצילום, ולא בעיה של גודל או של פונט. */
  --pv-radius: calc((var(--pv-panel-w) + var(--pv-gap)) / 0.82842712);
  position: relative;
}

/* הבמה: מרחב הפרספקטיבה. overflow:hidden מבטיח שסיבוב הסליל לא ייצור
   גלילה אופקית בעמוד — הדרישה הקשיחה scrollWidth==innerWidth. */
.pv-stage {
  position: relative;
  /* 1.62 ו-top:17% ולא 1.5/11%: הרדיוס גדל (רווח חיצוני), ואיתו הגדלת
     הפרספקטיבה של הפאנל הקדמי — persp/(persp−R)·1.08 ≈ ×1.49. בגובה
     הישן ראש הסרטון נחתך בכ-30px. נמדד בדפדפן בכל ה-breakpoints. */
  height: calc(var(--pv-panel-h) * 1.62);
  perspective: var(--pv-persp);
  perspective-origin: 50% 44%;
  touch-action: pan-y;                 /* גרירה אופקית מסובבת; אנכית גוללת עמוד */
  cursor: grab;
  overflow: hidden;
}
.pv-stage.pv-dragging { cursor: grabbing; }

.pv-ring {
  position: absolute; left: 50%; top: 17%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--pv-angle, 0deg));
}

.pv-panel {
  position: absolute;
  left: calc(var(--pv-panel-w) / -2); top: 0;
  width: var(--pv-panel-w); height: var(--pv-panel-h);
  margin: 0; padding: 0; border: 0;
  background: #2e2d2a;
  border-radius: 14px; overflow: hidden;
  cursor: pointer; color: inherit; text-align: start;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  will-change: opacity, transform;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(233, 231, 226, .06) inset;
  filter: brightness(.62) saturate(.8);
  transition: transform .5s cubic-bezier(.22, .8, .28, 1), box-shadow .5s ease, filter .5s ease;
}
/* הפאנל הפעיל: מובהר, מוגדל, וטבעת-זוהר זהב — המיפוי כמעט 1:1 מ---gold
   של המקור אל צבעי האתר. */
.pv-panel[data-active="1"] {
  filter: brightness(1.04) saturate(1);
  box-shadow: 0 42px 90px -30px rgba(0, 0, 0, .95),
              0 0 0 1px rgba(201, 162, 94, .7) inset,
              0 0 48px -10px rgba(201, 162, 94, .4);
}
.pv-panel:focus-visible { outline: 3px solid #c9a25e; outline-offset: 4px; }

/* הריפוד הפנימי: הרקע של הפאנל (#2e2d2a) נראה כמסגרת ריקה סביב הסרטון.
   כל מה ששייך לסרטון — פוסטר, וידאו, תג, כותרת, פקדים — הוא ילד של
   .pv-media, ולכן inset יחיד מזיז את כולם יחד ואף פקד לא יכול לשבת על
   המסגרת. overflow:hidden כאן הוא מה שמונע פיזית מכותרת ארוכה לחרוג
   מהסרטון — זו הייתה הבעיה בצילום, ולא גודל הפונט. */
.pv-media {
  position: absolute; inset: var(--pv-pad);
  border-radius: 6px; overflow: hidden;
}
/* הפוסטר (16:9) ב-cover — הנושא ממורכז, החיתוך בצדדים בלבד. */
.pv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* הווידאו (לאורך/מרובע) ב-contain — שום דבר לא נחתך, הפסים בצבע הפאנל.
   נחשף רק כשהפאנל פעיל וכבר נגעו בו (data-engaged) — עד אז הפוסטר מציג. */
.pv-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; background: #1a1917;
  opacity: 0; transition: opacity .35s ease;
}
.pv-panel[data-active="1"][data-engaged="1"] .pv-video { opacity: 1; }

/* ---- מצב .pv-allplay (AUTOPLAY_CENTER ב-app.js) ----
   השם נשאר מהגרסה הקודמת (כל הנראים רצו בו-זמנית), אבל 2026-07-29
   הניגון הוגבל לפאנל האמצעי בלבד — ר' ההערה ב-app.js. כלל שהיה כאן
   קודם, `.pv-allplay .pv-video{opacity:1}`, חשף באופן גורף את ה-video
   של **כל** פאנל נראה, לא רק הפעיל; כשרק המרכזי מנגן, השכנים היו
   מציגים תיבת וידאו שחורה/ריקה במקום הפוסטר. הכלל הבסיסי
   `[data-active="1"][data-engaged="1"] .pv-video{opacity:1}` למעלה
   כבר עושה את מה שנדרש — נחשף רק כשהפאנל גם פעיל וגם באמת התחיל
   לנגן — ולכן לא נשאר צורך בכלל נפרד כאן.
   הכותרת **לא** נעלמת בזמן ניגון כאן: הכלל המקורי (שנועד לפנות את
   המסך בזמן צפייה) היה מוחק אותה לתמיד — כלומר מבטל בשקט את הכיתוב
   בשליש התחתון. הסלקטור הזה כבר תפור לפאנל האמצעי בלבד
   (data-active="1"][data-playing="1"]), ולכן נשאר כמו שהוא. */
.pv-allplay .pv-panel[data-active="1"][data-playing="1"] .pv-onvid-title {
  opacity: 1; transform: none;
}

/* Scrim: הכובד עבר לשליש התחתון, כי לשם עברה הכותרת. הכהות מתחילה
   ב-55% ומתעצמת — כך הכותרת עומדת ב-4.5:1 גם מול פריים כמעט-לבן
   (בסרטונים יש פריימים בלומיננס ~0.97). בראש נשארה שכבה קלה בלבד,
   בשביל תג משך הסרטון. סרגל הבקרות מוסיף גרדיאנט משלו מתחת לזה. */
.pv-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
     rgba(15, 14, 13, .5) 0%, rgba(15, 14, 13, 0) 22%,
     rgba(15, 14, 13, 0) 55%, rgba(15, 14, 13, .55) 74%, rgba(15, 14, 13, .88) 100%);
}
/* הצללה על פאנלים רחוקים — הם נסוגים לרקע. */
.pv-panel[data-far="1"]::after {
  content: ''; position: absolute; inset: 0; background: #0c0e10; opacity: .42; pointer-events: none;
}

.pv-badge {
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #f2efe9; background: rgba(12, 11, 10, .82);
  padding: 3px 8px; border-radius: 5px;
}

/* כותרת (בלבד) על הסרטון, בשליש התחתון שלו. נעלמת בזמן ניגון וחוזרת
   בהשהיה/עצירה — מחוברת ל-data-playing שנקבע מאירועי ה-<video> עצמו.
   inset-block-start:66.667% ולא מרכוז בתוך השליש: סרגל הבקרות תופס את
   תחתית השליש, ומרכוז היה מעמיד את הטקסט מתחתיו.
   line-clamp:2 — כותרת ארוכה נחתכת ולא גולשת. זו הרשת הראשונה;
   overflow:hidden של .pv-media היא השנייה. */
.pv-onvid-title {
  position: absolute; inset-inline: 12px; inset-block-start: 66.667%; text-align: start;
  font-family: 'Rubik', sans-serif; font-weight: 900; font-size: 18px; line-height: 1.25;
  color: #e8cf9a;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .92), 0 0 22px rgba(201, 162, 94, .35);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.pv-panel[data-active="1"] .pv-onvid-title { opacity: 1; transform: none; }
.pv-panel[data-active="1"][data-playing="1"] .pv-onvid-title { opacity: 0; transform: translateY(8px); }

/* כפתור פליי מרכזי — גלוי על הפאנל הפעיל כשלא מנגן. */
.pv-bigplay {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px;
  display: grid; place-items: center;
  border-radius: 50%; border: 2px solid #c9a25e; background: rgba(35, 34, 32, .82);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
  cursor: pointer; padding: 0; opacity: 0; transform: scale(.9); pointer-events: none; visibility: hidden;
  transition: opacity .35s ease, transform .35s ease, background .2s, border-color .2s;
}
.pv-panel[data-active="1"] .pv-bigplay { opacity: 1; transform: scale(1); pointer-events: auto; visibility: visible; }
.pv-panel[data-active="1"][data-playing="1"] .pv-bigplay { opacity: 0; transform: scale(.9); pointer-events: none; }
.pv-bigplay:hover { background: rgba(46, 45, 42, .92); border-color: #e8cf9a; transform: scale(1.06); }
.pv-bigplay:focus-visible { outline: 3px solid #c9a25e; outline-offset: 4px; }
/* המשולש גבול-CSS ולא תו — לא תלוי בגופן; border-right מצביע שמאלה, כמו
   שאר סימני הפליי באתר. */
.pv-tri {
  width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  border-right: 19px solid #fff; transform: translateX(-3px);
}

/* ---- סרגל בקרות בסטייל יוטיוב ----
   שורה תחתונה על גבי הסרטון: פס-התקדמות דק + כפתורים לבנים, על גרדיאנט
   כהה שנמוג כלפי מעלה (לא רקע מלא). צבע ההדגשה הוא הירוק של האתר (#4aa657)
   במקום האדום של יוטיוב.

   נראוּת:
   • בסיס (כולל מסכי מגע ללא hover): גלוי תמיד על הפאנל הפעיל — במובייל
     אין hover, ו-:hover "נדבק" אחרי נגיעה, אז לא מסתמכים עליו שם.
   • דסקטופ (@media hover:hover): מוסתר בזמן ניגון, מופיע בריחוף/פוקוס;
     בהשהיה נשאר גלוי.
   נגישות: הפאנל הלא-פעיל מקבל visibility:hidden כדי שכפתוריו יֵצאו מסדר
   ה-Tab (כפתור שקוף עדיין מקבל פוקוס); :focus-within מחזיר את השורה
   כשמשתמש מקלדת מגיע אליה, ולכל כפתור יש aria-label. */
.pv-ctrl {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 26px 8px 8px;
  background: linear-gradient(180deg, rgba(11, 10, 9, 0) 0%, rgba(11, 10, 9, .5) 55%, rgba(11, 10, 9, .82) 100%);
  opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .25s ease;
}
.pv-panel[data-active="1"] .pv-ctrl { opacity: 1; pointer-events: auto; visibility: visible; }
@media (hover: hover) {
  .pv-panel[data-active="1"][data-playing="1"] .pv-ctrl { opacity: 0; pointer-events: none; }
  .pv-panel[data-active="1"]:hover .pv-ctrl { opacity: 1; pointer-events: auto; }
  .pv-panel[data-active="1"]:focus-within .pv-ctrl { opacity: 1; pointer-events: auto; }
}
.pv-ctrl-row { display: flex; align-items: center; gap: 4px; }
.pv-spacer { flex: 1; }
.pv-ctrl button {
  flex: none; width: 34px; height: 34px; border-radius: 8px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: transparent; border: none; color: #fff;
  transition: color .2s, background .2s;
}
.pv-ctrl button:hover { color: #7ed88a; background: rgba(255, 255, 255, .14); }
.pv-ctrl button:focus-visible { outline: 2px solid #7ed88a; outline-offset: 2px; }
.pv-ctrl svg { width: 20px; height: 20px; display: block; }
.pv-ic { display: none; }
.pv-panel[data-playing="0"] .pv-ic-play { display: block; }
.pv-panel[data-playing="1"] .pv-ic-pause { display: block; }
/* ‎.pv-ctrl .pv-exit‏ (0,2,0) ולא ‎.pv-exit‏ (0,1,0): הכלל ‎.pv-ctrl button‏
   (0,1,1) גובר על מחלקה בודדת, ואז כפתור היציאה נשאר grid גם מחוץ למסך
   מלא. שני מחלקות מנצחות אותו; כללי ה-:fullscreen (0,3,0) עדיין גוברים. */
.pv-ctrl .pv-exit { display: none; }

/* פס התקדמות — בראש הסרגל, מתעבה בריחוף (דסקטופ). */
.pv-progress {
  position: relative; width: 100%; height: 3px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .28); transition: height .15s ease;
}
.pv-progress > span { display: block; height: 100%; width: 0; background: #4aa657; }
@media (hover: hover) {
  .pv-panel[data-active="1"]:hover .pv-progress { height: 5px; }
}

/* ---- מסך מלא ----
   כל בלוק :fullscreen ו-:-webkit-full-screen נכתב בנפרד: סלקטור לא-מוכר
   בתוך רשימה מקובצת מבטל בשקט את כל הכלל בחלק מהדפדפנים. במסך מלא הפאנל
   יוצא מהקשר ה-3D, ולכן מנטרלים בכפייה טרנספורם/פילטר/opacity שה-JS מציב
   inline בכל פריים (לכן !important). */
.pv-panel:fullscreen {
  width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important;
  transform: none !important; opacity: 1 !important; filter: none !important;
  border-radius: 0 !important; background: #0b0a09 !important; box-shadow: none !important;
}
.pv-panel:-webkit-full-screen {
  width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important;
  transform: none !important; opacity: 1 !important; filter: none !important;
  border-radius: 0 !important; background: #0b0a09 !important; box-shadow: none !important;
}
/* במסך מלא אין מסגרת: הריפוד של 10px היה משאיר פס שחור סביב הסרטון. */
.pv-panel:fullscreen .pv-media { inset: 0; border-radius: 0; }
.pv-panel:-webkit-full-screen .pv-media { inset: 0; border-radius: 0; }
.pv-panel:fullscreen .pv-poster { display: none; }
.pv-panel:-webkit-full-screen .pv-poster { display: none; }
.pv-panel:fullscreen .pv-video { opacity: 1 !important; }
.pv-panel:-webkit-full-screen .pv-video { opacity: 1 !important; }
/* במסך מלא השליש התחתון הוא שטח ענק — 66.667% היה מציב את הכותרת
   באמצע המסך. נעגנת מלמטה, מעל סרגל הבקרות. */
.pv-panel:fullscreen .pv-onvid-title { font-size: 30px; inset-block-start: auto; inset-block-end: 104px; }
.pv-panel:-webkit-full-screen .pv-onvid-title { font-size: 30px; inset-block-start: auto; inset-block-end: 104px; }
.pv-panel:fullscreen .pv-ctrl { opacity: 1 !important; pointer-events: auto !important; }
.pv-panel:-webkit-full-screen .pv-ctrl { opacity: 1 !important; pointer-events: auto !important; }
.pv-panel:fullscreen .pv-fs { display: none; }
.pv-panel:-webkit-full-screen .pv-fs { display: none; }
.pv-panel:fullscreen .pv-exit { display: grid; }
.pv-panel:-webkit-full-screen .pv-exit { display: grid; }
.pv-panel:fullscreen .pv-bigplay { opacity: 1 !important; pointer-events: auto !important; }
.pv-panel:-webkit-full-screen .pv-bigplay { opacity: 1 !important; pointer-events: auto !important; }

/* ============ ניסוי: עקומה הפוכה (ענף carousel-concave) ============
   בטבעת הקמורה הצופה נמצא **מחוץ** לגליל, ולכן הקצה החיצוני של כל שכן
   נסוג אחורה. כאן הצופה נמצא **בתוך** הגליל: כל פאנל מסתובב סביב ציר
   שנמצא --pv-arc לפניו, ולכן קצהו החיצוני בא קדימה. זה ה"סיבוב ההפוך".

   **העקומה חייבת להיות רדודה, וזה לא עניין של טעם.** בקשת קעורה השכנים
   קרובים יותר לצופה מהפאנל הקדמי, ולכן הפרספקטיבה מגדילה אותם. בניסיון
   ראשון עם 30° לפאנל יצא שכן של 508×796 מול פאנל קדמי של 392×549 — היררכיה
   הפוכה, הצדדים משכו את העין. ב-20° ההפרש יורד לכ-9%, והקדמי חוזר לשלוט.

   --pv-arc נגזר בדיוק כמו --pv-radius: מרווח בין צלעות = 2·arc·tan(STEP/2),
   ולכן arc = (רוחב + רווח) / (2·tan(10°)), ו-2·tan(10°) = 0.35265396.
   **ה-10° כאן חייבים להישאר חצי מ-STEP שב-app.js.** אין דרך לגזור את זה
   ב-CSS, אז זו הצמדה ידנית: משנים אחד — משנים את השני.

   אין push קדימה: הפאנל הקדמי יושב ב-z=0 ובלי הגדלת פרספקטיבה. דחיפה
   קדימה מגדילה את כולם, ומנפחת גם את המרווח האופקי, כך שהשכנים נזרקים
   מחוץ למסך. המחיר: הקדמי כאן צר מהגרסה הקמורה.

   הטרנספורם של כל פאנל מחושב ב-JS בכל פריים — סיבוב של קשת קעורה אינו
   ניתן לביטוי כסיבוב יחיד של ההורה. לכן transform יוצא מרשימת
   הטרנזישנים: אחרת כל פריים מתחיל טרנזישן של חצי שנייה, והגרירה נמרחת. */
.pv-reel.pv-concave {
  --pv-arc: calc((var(--pv-panel-w) + var(--pv-gap)) / 0.35265396);
}
.pv-reel.pv-concave .pv-ring { transform: none; top: var(--pv-ring-top, 21%); }
/* גובה הבמה תלוי בזום: כשהאמצעי מוגדל פי 1.5 מהשכנים הוא ~×1.59 מגודלו
   הבסיסי ובגובה 1.62 הוא נחתך, ולכן צריך 1.78. כשהזום כבוי, 1.78 הוא
   רק חלל ריק. app.js קובע את המקדם לפי ZOOM — מקור אמת אחד, כדי שלא
   יישכח כאן מספר שלא מתאים למצב שם. */
.pv-reel.pv-concave .pv-stage { height: calc(var(--pv-panel-h) * var(--pv-stage-h, 1.62)); }
.pv-reel.pv-concave .pv-panel { transition: box-shadow .5s ease, filter .5s ease; }

/* ---- ציר-זמן ותיאור "עכשיו בסליל" ---- */
.pv-plan { max-width: min(760px, 90%); margin: 14px auto 0; }
.pv-track { position: relative; height: 26px; }
.pv-datum { position: absolute; inset-inline: 0; top: 12px; height: 1px; background: #434240; }
.pv-tick {
  position: absolute; top: 6px; left: 0; width: 2px; height: 9px; border-radius: 2px;
  background: #8c8880; transform: translateX(-50%); opacity: .35;
  transition: height .3s ease, background .3s ease, box-shadow .3s ease;
}
.pv-tick.on { height: 20px; top: 2px; background: #e8cf9a; opacity: 1; box-shadow: 0 0 10px rgba(201, 162, 94, .8); }

.pv-now { text-align: center; margin-top: 14px; }
.pv-now-title {
  display: block; font-family: 'Rubik', sans-serif; font-weight: 900;
  font-size: clamp(24px, 4vw, 40px); line-height: 1.08; letter-spacing: -.01em;
  background: linear-gradient(180deg, #f4e3bd 0%, #e8cf9a 45%, #c9a25e 75%, #a07f3e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: opacity .3s ease, transform .3s ease;
}
.pv-now-title.pv-swap { opacity: 0; transform: translateY(8px); }
.pv-now-sub {
  max-width: 60ch; margin: 12px auto 0; color: #b9b2a6; font-size: 14px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- רספונסיביות: מכווצים פאנל+רדיוס כדי שהפאנל הקדמי (מוגדל בפרספקטיבה)
   יישאר צר מה-viewport בכל מסך. הרוחב הנראה ≈ panel-w × persp/(persp-radius). */
/* ה-breakpoints קובעים רק רוחב/גובה — --pv-radius נגזר מהם ומ---pv-gap
   בנוסחה למעלה, ולכן אי אפשר יותר ששלושה רדיוסים יצאו לא-מסונכרנים
   עם רוחב הפאנל. הרווח (30px) והריפוד (10px) נשארים קבועים בכל מסך. */
@media (max-width: 900px) {
  .pv-reel { --pv-panel-w: 293px; --pv-panel-h: 410px; }
}
@media (max-width: 560px) {
  .pv-reel { --pv-panel-w: 247px; --pv-panel-h: 348px; --pv-persp: 1200px; }
  /* שורה אחת ולא שתיים: השליש התחתון כאן הוא ~90px, וסרגל הבקרות תופס
     ממנו ~79px. נמדד — בשתי שורות הכותרת יושבת על פס ההתקדמות. */
  .pv-onvid-title { font-size: 15px; -webkit-line-clamp: 1; }
  .pv-ctrl button { width: 36px; height: 36px; }
}
@media (max-width: 380px) {
  .pv-reel { --pv-panel-w: 216px; --pv-panel-h: 302px; }
}

/* reduced-motion: אין drift, אין מעברים, אין הבהוב — הסליל עדיין שמיש
   (גרירה/חיצים מקפיצים מיידית). */
@media (prefers-reduced-motion: reduce) {
  .pv-panel, .pv-video, .pv-onvid-title, .pv-bigplay, .pv-ctrl, .pv-ctrl button,
  .pv-now-title, .pv-tick, .pv-progress { transition: none !important; }
}

/* ============ עמוד מוצר: פריסת הירו חדשה ============
   מקור: `עמוד מוצר - עצמאי.html` (x-dc). הצבעים מותאמים לראמפ הבהיר.
   שינוי מודע מול קובץ העיצוב: שם הגדלת המפרט היא scale(1.6) בריחוף.
   כאן נשארה זכוכית המגדלת הקיימת — היא מגיעה עד 8.4× על סריקה של
   4032px, וזה מה שהופך טבלאות מידות לקריאות. 1.6× היה נסיגה. */
body[data-page="product"] .pp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
  max-width: 1180px;
  margin: 26px auto 0;
}
body[data-page="product"] .pp-info { display: flex; flex-direction: column; gap: 20px; text-align: start; }

body[data-page="product"] .pp-pill {
  align-self: flex-start;
  padding: 5px 14px;
  border: 1px solid #c9a25e;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: #c9a25e;
}
body[data-page="product"] .pp-pill:hover { background: rgba(201, 162, 94, .12); color: #dbb877; }

body[data-page="product"] .pp-lead { margin: 0; font-size: 15.5px; color: #c6bfb2; line-height: 1.8; }

body[data-page="product"] .pp-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
body[data-page="product"] .pp-points li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; color: #e8e2d6; line-height: 1.5;
}
/* הוי הוא קישוט: מחוץ לזרם הטקסט כדי שקורא-מסך לא יקריא "וי" לפני
   כל שורה. `content` ב-::before אינו מוקרא ברוב הקוראים. */
body[data-page="product"] .pp-points li::before {
  content: '✓'; color: #4aa657; font-weight: 900; flex: none;
}

body[data-page="product"] .pp-service {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 18px; border-top: 1px solid #434240;
}
body[data-page="product"] .pp-service span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #b9b2a6; }
body[data-page="product"] .pp-service i { color: #c9a25e; font-size: 15px; font-style: normal; }

body[data-page="product"] .pp-hero-media,
body[data-page="product"] .pp-spec {
  border: 1px solid #c9a25e;
  border-radius: 16px;
  background: #292826;
  overflow: hidden;
  box-shadow: 0 0 26px rgba(201, 162, 94, .18), 0 14px 40px rgba(0, 0, 0, .4);
}
body[data-page="product"] .pp-hero-media { padding: 12px; }

body[data-page="product"] .pp-spec { max-width: 1180px; margin: 44px auto 0; }
body[data-page="product"] .pp-spec-head {
  padding: 13px 20px;
  border-bottom: 1px solid #434240;
  display: flex; justify-content: flex-end;
  font-size: 12px; color: #9c958a;
}
/* :has — כשה-JS קבע שאין מספיק רזולוציה להגדלה, הכותרת יורדת יחד */
body[data-page="product"] .pp-spec:has(.no-zoom) .pp-spec-head { display: none; }
body[data-page="product"] .pp-spec .zoom-hint,
body[data-page="product"] .pp-hero-media .zoom-hint { display: none; }
body[data-page="product"] .pp-spec .zoom-fig { max-width: 100%; margin: 12px; }
body[data-page="product"] .pp-spec .zoom img { max-height: 440px; }

@media (max-width: 1120px) {
  body[data-page="product"] .pp-hero { grid-template-columns: 1fr; gap: 26px; }
  body[data-page="product"] .pp-spec { margin-top: 28px; }
}

/* ---- גובה ההירו ----
   נגן הווידאו שישב בעמודת הטקסט הוא שהחזיק את הסקשן גבוה. אחרי
   שהוסר, הסקשן ירד ל-374px ויחס המכל הגיע ל-3.72 — רחב בהרבה
   מיחס התמונה עצמה (1701×608 = 2.80). עם object-fit:cover זה אומר
   שהתמונה הוגדלה לרוחב **והגובה נחתך**, בדיוק באמצע דמות העובד.
   min-height מחזיר את יחס המכל אל מתחת ל-2.80, ואז נראית כל התמונה.
   36vw נבחר כך שיעבור את הסף גם ב-1121px וגם ב-1440px. */
@media (min-width: 1121px) {
  body[data-page="home"] .hero-inner { min-height: clamp(420px, 36vw, 560px); }
}

/* ---- המעבר מההירו לסקשן שמתחתיו ----
   היה קו אופקי חד: התמונה נגמרת, והרקע הכהה מתחיל. שני תיקונים:

   1. **דעיכה** — שכבת gradient בתחתית ההירו שנמסה אל צבע העמוד.
      ‎z-index‏ 1 לדעיכה ו-2 לתוכן, אחרת ה-::after (שמצויר אחרי
      ‎.hero-inner בסדר הצביעה) היה מכסה את הכותרת.
   2. **אוויר** — 96px מעל הכותרת הבאה במקום 56.
   ה-!important נדרש כי הריפוד כתוב inline ב-HTML (נאמנות לרפרנס). */
body[data-page="home"] section:has(.hero-inner) { isolation: isolate; }
body[data-page="home"] section:has(.hero-inner)::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  /* 46% אכלו כמעט חצי מהתמונה. 26% מספיקים למעבר רך, והעכירות
     מתחילה מאוחר (55%) כדי שרוב הגובה יישאר שקוף לגמרי. */
  height: 26%;
  background: linear-gradient(to bottom,
              rgba(35, 34, 32, 0) 0%,
              rgba(35, 34, 32, .12) 55%,
              rgba(35, 34, 32, .55) 82%,
              #232220 100%);
  pointer-events: none;
  z-index: 1;
}
body[data-page="home"] .hero-inner { z-index: 2; }
body[data-page="home"] .hero-inner { padding-bottom: 78px !important; }
/* מרווח הבריחה מהדעיכה בתחתית ההירו. עד 2026-07-29 הוא ישב על #pv,
   כי הקרוסלה הייתה המקטע הראשון אחרי ההירו. מאז נכנס ביניהם מקטע
   הטקסט על העסק, ולכן ה-96px עברו אליו: בלי זה הטקסט יושב בתוך
   הגרדיאנט של ההירו (וזה מה שנראה "לא ממוקם"), ו-#pv שומר מרווח
   ענק שהוא כבר לא צריך. אם מקטע אחר יוכנס להיות הראשון אחרי
   ההירו — הכלל הזה צריך לעבור אליו. */
body[data-page="home"] .home-intro { padding-top: 96px !important; }

@media (max-width: 1120px) {
  body[data-page="home"] .hero-inner { padding-bottom: 52px !important; }
  body[data-page="home"] .home-intro { padding-top: 64px !important; }
}

/* ---- קישור דילוג לתוכן ----
   מוסתר עד שמקבל פוקוס. לא display:none ולא visibility:hidden —
   שניהם מוציאים אותו מסדר ה-Tab ואז הוא חסר תועלת. הטכניקה היא
   הזזה אל מחוץ למסך, וחזרה כשהמקלדת מגיעה אליו. */
.skip-link {
  position: fixed;
  top: 8px;
  inset-inline-start: -9999px;
  z-index: 2147483600;          /* מעל כל הכפתורים הצפים */
  background: #c9a25e;
  color: #232220;               /* 6.67:1 */
  font-weight: 800;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.skip-link:focus {
  inset-inline-start: 8px;
  color: #232220;
  outline: 3px solid #4aa657;
  outline-offset: 2px;
}
/* היעד מקבל פוקוס בתכנות בלבד — בלי מסגרת שתיראה כטעות */
#sa-main:focus { outline: none; }

/* ============ מפרט המוצר (חולץ מגיליונות היצרן) ============
   התוכן מגיע מ-data/spec_extracted.json — 116 תמונות מפרט סרוקות
   שהטקסט שלהן חולץ. זה החלק שהופך את העמוד מ"תמונה ושם" לעמוד
   מכירה: מה זה, מאיזה חומר, ובאילו מידות הוא קיים. */
body[data-page="product"] .sp {
  max-width: 1180px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body[data-page="product"] .sp-block {
  background: #2e2d2a;
  border: 1px solid #434240;
  border-radius: 14px;
  padding: 22px 26px;
}
body[data-page="product"] .sp-h {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 900;
  color: #c9a25e;
}
body[data-page="product"] .sp-p {
  margin: 0 0 10px;
  font-size: 15.5px;
  color: #c6bfb2;
  line-height: 1.85;
}
body[data-page="product"] .sp-p:last-child { margin-bottom: 0; }

/* טבלת המידות — הפרט שהקונה הכי מחפש */
body[data-page="product"] .sp-tablewrap { overflow-x: auto; }
body[data-page="product"] .sp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 320px;
}
body[data-page="product"] .sp-table th,
body[data-page="product"] .sp-table td {
  padding: 9px 14px;
  text-align: start;
  border-bottom: 1px solid #434240;
  white-space: nowrap;
}
body[data-page="product"] .sp-table th {
  color: #f4f0e7;
  font-weight: 800;
  background: #35342f;
  position: sticky;
  top: 0;
}
body[data-page="product"] .sp-table td { color: #e8e2d6; }
body[data-page="product"] .sp-table tbody tr:hover td { background: #35342f; }

body[data-page="product"] .sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-page="product"] .sp-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #5a5854;
  color: #e8e2d6;
  font-size: 13.5px;
  font-weight: 700;
}
/* תקן הוא טענה מחייבת — מסומן אחרת כדי שלא ייקרא כתכונה שיווקית */
body[data-page="product"] .sp-chip--std {
  border-color: #c9a25e;
  color: #e8c98a;
  background: rgba(201, 162, 94, .10);
}

/* הערות ואזהרות היצרן: מובלטות בכוונה. חלקן הוראות בטיחות
   מבניות ("קוטר הווים ומספר נקודות העיגון יקבעו ע"י המתכנן"),
   ואסור שייבלעו בתוך פסקה. */
body[data-page="product"] .sp-notes {
  border-color: rgba(201, 162, 94, .5);
  background: linear-gradient(180deg, #35342f 0%, #2e2d2a 100%);
}
body[data-page="product"] .sp-notes ul { margin: 0; padding-inline-start: 20px; }
body[data-page="product"] .sp-notes li {
  font-size: 14.5px;
  color: #e8e2d6;
  line-height: 1.75;
  margin-bottom: 8px;
}
body[data-page="product"] .sp-src {
  margin: 0;
  font-size: 12.5px;
  color: #9c958a;
  text-align: start;
}
@media (max-width: 1120px) {
  body[data-page="product"] .sp { margin-top: 26px; }
  body[data-page="product"] .sp-block { padding: 18px 18px; }
}

/* ---- כפתור הפעולה בהירו ----
   הירוק #3a8244 ולא #4aa657: טקסט לבן על
   #4aa657 נותן 3.05:1 ונכשל ב-WCAG AA. שטח מגע 48px גובה. */
/* align-items:center — מאז שנוסף קישור "צור קשר" לצד הכפתור (כמו
   בהירו של הנייד), שני הפריטים בגבהים שונים וצריך ליישר אותם לציר
   אחד. gap גדול יותר כדי שהקישור לא יידבק לכפתור. */
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 800;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.cta:focus-visible { outline: 3px solid #c9a25e; outline-offset: 3px; }
.cta--primary { background: #3a8244; color: #fff; }      /* 4.71:1 */
.cta--primary:hover { background: #337549; color: #fff; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .cta:hover { transform: none; } }

/* ---- מרווח לכפתור הוואטסאפ הצף ----
   הקישורים בפוטר יושבים בקצה ה-inline-end, שהוא בעברית הצד השמאלי —
   ושם בדיוק מרחף כפתור הוואטסאפ (inset-inline-end:22px, רוחב 74px,
   כלומר הוא תופס עד x≈96). בגלילה לתחתית הם התנגשו.
   ‎!important נדרש כי הריפוד כתוב inline ב-HTML. */
/* המרווח חושב לכפתור של 74px. אחרי ההגדלה ל-111 הוא תופס עד
   x=133, ולכן 118 כבר לא הספיק והקישורים חזרו להתנגש בו. */
footer > div { padding-inline-end: 158px !important; }
@media (max-width: 1120px) {
  /* בנייד הפוטר נשבר לשתי שורות; ריפוד תחתון מרחיק את השורה
     האחרונה מהכפתור במקום להסתמך על הצד בלבד. */
  footer > div { padding-inline-end: 24px !important; padding-bottom: 104px !important; }
}


/* ============ לולאת וידאו ברקע ההירו (דסקטופ בלבד) ============
   נבנה ב-tools/build_hero_clip.py מ-hero-video.mp4 (1024x1024).
   רצועה ביחס 2.75 היא 36% מהפריים — לעומת 20% בלבד מסרטון לאורך,
   שזה מה שנראה "בזום" בשתי הגרסאות הקודמות.
   הרצועה מתחילה ב-17% מהגובה, **מתחת לסימן המים "AIReel"**
   שנמדד ב-y 3.6%-9.5%.
   הפריימים מוכהים בקידוד (x0.62), ולכן שכבת ה-CSS קלה והווידאו
   נראה לכל הרוחב במקום חצי מסך שחור. */
.hero-video, .hero-scrim { display: none; }

@media (min-width: 1121px) {
  .hero-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain ולא cover: cover ממלא את המכל וחותך את מה שחורג.
       גם כשהיחסים כמעט זהים (הקליפ 2.75, ההירו 2.75), כל שינוי
       בגובה ההירו — טקסט שנשבר לשורה נוספת — הופך אותו לחיתוך.
       contain מבטיח שהפריים המלא נראה תמיד, ובמקום חיתוך מתקבלים
       פסים דקים בגוון העמוד. */
    object-fit: contain;
    object-position: center;
    background: #232220;
    z-index: 0;
    /* הקליפ מוכהה בקידוד (x0.62, ואף יותר בגרסה מאוחרת יותר) באופן
       אחיד, ולכן גם הצד השמאלי — שאין בו טקסט ולא צריך הגנה — יצא
       כהה מדי. מאירים כאן בחזרה, והכהייה נשארת רק היכן שהיא נחוצה:
       בשכבת ה-scrim שמעל הטקסט.
       2026-07-29 (בקשת עמר): הכהייה בקידוד הייתה חזקה מדי בפועל —
       brightness(3) כאן ב-CSS, לא re-encode של הקליפ. */
    filter: saturate(1.06) brightness(3);
  }
  body[data-page="home"] .hero-img { display: none; }

  .hero-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* השכבה הזו כבר לא מכהה את כל צד הטקסט — היא רק מאחדת גוון.
       ההגנה על הקריאוּת עברה ללוח מקומי מתחת לטקסט (.hero-inner>div),
       ולכן שאר הצד הימני נשאר בהיר והווידאו נראה בו. */
    /* שתי שכבות. הראשונה היא אליפסה גדולה ורכה שממורכזת על עמודת
       הטקסט: היא מכהה מקומית בלי קצה נראה — לא קופסה, לא מסגרת,
       רק הצללה. הדעיכה נמשכת עד 88% מהרדיוס כדי שלא ייווצר קו.
       השנייה היא מדרג כללי קל שמאחד גוון.
       הצל כאן קטן פי שלושה מגרסה קודמת (0.30 מול 0.90 משוקלל).
       זה התאפשר רק בגלל שהקליפ עצמו הוכהה בקידוד מ-0.62 ל-0.44:
       ככל שהמקור כהה יותר, כך הצל הדרוש מאחורי הטקסט קטן — והוא
       זה שנראה ככתם. נמדד: הרצפה בבהירות הזו היא 0.07 בלבד. */
    background:
      radial-gradient(ellipse 72% 110% at 79% 50%,
                rgba(35, 34, 32, .24) 0%,
                rgba(35, 34, 32, .20) 46%,
                rgba(35, 34, 32, .10) 72%,
                rgba(35, 34, 32, 0) 92%),
      linear-gradient(to left,
                rgba(35, 34, 32, .12) 0%,
                rgba(35, 34, 32, .09) 55%,
                rgba(35, 34, 32, .03) 82%,
                rgba(35, 34, 32, 0) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none !important; }
  body[data-page="home"] .hero-img { display: block !important; }
}





/* ---- הירוק בכותרת ההירו ----
   #4aa657 עובד מצוין על הרקע הכהה של האתר (5.21:1), אבל מעל
   לולאת הווידאו הוא יורד ל-2.73:1 — מתחת אפילו לסף 3:1 של טקסט
   גדול. הגוון הבהיר נמדד 4.79:1 באותו מקום, כלומר עובר את הסף
   המלא. הוא מוחל רק בהירו של דף הבית; שאר האתר נשאר על המקורי.

   🔴 שאילתת המדיה הוסרה. הכלל היה מוגבל ל-min-width:1121px, כלומר
   לווידאו בלבד — אבל בנייד יש **תמונה** מאחורי אותו טקסט, ומדידה
   על פיקסלים אמיתיים נתנה שם 2.94:1 ב-768px. אותה בעיה בדיוק,
   ובדקתי רק את הדסקטופ. הגוון הבהיר נותן שם 5.16:1. */
.hero-accent { color: #4aa657; }
body[data-page="home"] .hero-accent { color: #7ed88a; }

/* ---- זהב בהירו מעל הרקע המצולם ----
   #c9a25e נותן 6.67:1 על רקע האתר, אבל מעל הווידאו רק 2.66:1 —
   מתחת לסף 3:1 של טקסט גדול. הזהב בהירו הוא פיסוק בכותרת בלבד
   (טקסט גדול), ולכן גוון בהיר פותר: 5.42-8.15:1 נמדד.

   כפתור "לייעוץ מקצועי מהיר" (`.cta--ghost`) נמחק לבקשת Omer,
   ואיתו כללי הזהב על רקע כהה שהיו נחוצים רק לו — הוא היה 15.5px
   מודגש, כלומר **לא** טקסט גדול, וסף 4.5 ולא 3. */
/* גם כאן שאילתת המדיה הוסרה, מאותה סיבה: בנייד הזהב נמדד 3.76:1
   ב-768px, כלומר הבעיה לא הייתה של הווידאו אלא של כל רקע מצולם. */
.hero-gold { color: #c9a25e; }
body[data-page="home"] .hero-gold { color: #e8cf9a; }





/* ============ הירו בנייד — גרסה קודמת (מוחלפת ב---hero-m2 למטה) ============
   הבלוק הקודם כאן ("הירו בנייד", .hero-inner בנייד/בטאבלט) נמחק ולא
   הושאר כ"מת אבל לא מזיק": ‎.hero-desktop‏ מקבל display:none באותו טווח
   רוחב בדיוק ‎(≤1120px)‏ שהכללים ההם כוונו אליו, ולכן הם לעולם לא היו
   שוב מתבצעים — קוד שרץ פעם ולא ירוץ שוב הוא בלבול, לא רשת ביטחון.
   הגרסה הישנה עדיין קיימת בהיסטוריית git אם צריך לחזור אליה. */

/* ============ הירו בנייד/טאבלט — .hero-m2 (≤1120px) ============
   מבוסס על mobile_hero/hero-mobile.html שעמר סיפק (ר' ההערה ב-HTML
   ליד .hero-m2 להסבר שלוש הסטיות המכוונות מהרפרנס: בלי topbar/burger
   משלו, בלי min-height:100vh, וגוונים שכבר קיימים באתר במקום F7B500).

   כל הסלקטורים כאן ממוענים תחת .hero-m2 בכוונה, גם כשזה נראה מיותר —
   הרפרנס משתמש בשמות גנריים כמו .title/.frame/.content/.cta, ובלי
   המיעון הם היו מתנגשים עם מחלקות זהות בשאר גיליון הסגנון (בפועל
   רק .cta התנגש בפועל, אבל שאר השמות עלולים להתווסף בעתיד). שמות
   ה-keyframes קיבלו קידומת hm2 מאותה סיבה בדיוק — keyframes הם
   namespace גלובלי גם כש-class הוא מקומי. */
.hero-desktop { display: block; }
@media (max-width: 1120px) { .hero-desktop { display: none; } }

.hero-m2 {
  display: none;                 /* ברירת מחדל: דסקטופ. נדרס למטה */
  --hm2-pad: 22px;
  position: relative;
}
@media (max-width: 1120px) { .hero-m2 { display: block; } }
/* בלי חסם עליון (max-width) על שאילתות ה---720 שבהמשך: מעל 1120px
   ‎.hero-m2‏ עצמו display:none ולכן הן חלות על אלמנט בלתי-נראה —
   בדיוק כמו ברפרנס, שגם שם לא היה חסם עליון. */
@media (min-width: 720px) { .hero-m2 { --hm2-pad: 48px; } }

/* ---------- הפריים: התמונה נשארת שלמה, נמסה אל תוך רקע האתר ---------- */
.hero-m2__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;            /* המקור (hero-mobile.jpg) הוא 1170×1170 */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, .6) 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, .6) 82%, transparent 100%);
  animation: hm2FrameIn 1.1s ease both;
}
@keyframes hm2FrameIn { from { opacity: 0 } to { opacity: 1 } }

@media (min-width: 720px) {
  /* מעל 720px הפריים הריבועי היה תופס גובה עצום; 16:9 שומר על יחס
     סביר ל-tablet. object-position:center 30% כבר ממורכז על הקסדה
     והפנים, ולכן החיתוך הנוסף נופל על פלג הגוף התחתון, לא על הפנים. */
  .hero-m2__frame { aspect-ratio: 16 / 9; }
}

.hero-m2__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: contrast(1.05) saturate(1.04);
  will-change: transform;
  animation: hm2Drift 20s ease-in-out infinite alternate;
}
@keyframes hm2Drift {
  from { transform: scale(1.02) translate3d(0, 0, 0) }
  to   { transform: scale(1.09) translate3d(-1.6%, -1.8%, 0) }
}

/* קרן שמש עדינה שחולפת על התמונה */
.hero-m2__shaft {
  position: absolute; inset: -30% -45%;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg,
    transparent 34%, rgba(255, 193, 84, .13) 43%, rgba(255, 228, 162, .30) 50%,
    rgba(255, 193, 84, .13) 57%, transparent 66%);
  animation: hm2Shaft 14s ease-in-out infinite;
}
@keyframes hm2Shaft {
  0% { transform: translateX(-25%) } 50% { transform: translateX(25%) } 100% { transform: translateX(-25%) }
}

/* width/height:100% ולא רק inset:0: קנבס הוא replaced element, ואחרי
   שה-JS קובע cv.width/cv.height (תכונות, לא CSS), הדפדפן משתמש בהן
   כגודל האינטרינזי שלו ומתעלם מ-inset:0 בלי width/height מפורשים.
   נמדד בפועל: בלי זה הקנבס רינדר ב-600×300 בתוך פריים של 390×390 —
   שיטוח קואורדינטות שגוי, לא רק חריגה חזותית. */
.hero-m2__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

.hero-m2__grain {
  position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='hm2n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23hm2n)'/></svg>");
}

/* ---------- תוכן ---------- */
.hero-m2__content {
  position: relative; z-index: 2;
  margin-top: -13vw;              /* נכנס לתוך ההיתוך, שלא ייראה כמו שתי קומות */
  padding: 0 var(--hm2-pad);
}
@media (min-width: 720px) { .hero-m2__content { margin-top: -7vw; } }

/* הכותרת יושבת בתוך .hero-m2__frame (ראה ה-HTML), לא בתוך .hero-m2__content —
   overlay מוחלט מעל התמונה, בפינה הימנית-עליונה: האזור הפנוי היחיד
   שאין בו את העובד עצמו (תפוס מהמרכז ושמאלה) ולא את הכלים על השולחן
   (תפוסים למטה מימין). panel מטושטש (backdrop-filter) עומד מאחורי
   הטקסט כדי שהוא ייקרא על כל פריים באנימציית ה-drift, בלי תלות
   ב-scrim/mask שכבר משרתים את הכותרת/כפתורים שבתחתית הפריים. */
.hero-m2__title {
  position: absolute; z-index: 2;
  /* 2026-07-30: היה 6%. ההדר (לוגו + המבורגר) מרחף עכשיו מעל התמונה,
     ובגובה כזה הכותרת יושבת מתחתיו. הערך ב-px ולא ב-% בכוונה: גובה
     ההדר קבוע (~70px) בכל רוחב, בזמן שגובה הפריים משתנה מריבוע בנייד
     ל-16:9 בטאבלט — אחוז היה מרחיק את הכותרת יותר ויותר ככל שהמסך
     גדל, בלי שום קשר לגובה ההדר שהוא בא לפנות. */
  inset-block-start: 88px;
  inset-inline-start: var(--hm2-pad);   /* RTL: start = ימין, שם המקום הפנוי */
  max-width: 56%;
  margin: 0;
  padding: 5px 15px;
  border-radius: 12px;
  /* אין יותר tint צבעוני מאחורי הטקסט בכלל — רק הטשטוש (backdrop-filter)
     עצמו, בלי שכבת רקע. "זכוכית חלבית" נטו: מה שנראה מאחורי הטקסט הוא
     התמונה המטושטשת, לא כהיה נוספת עליה. */
  /* בלי פאנל מאחורי הטקסט בכלל (עמר, 2026-08-23: "בולט מדי, צריך
     פחות רקע"). גם טשטוש עדין יוצר מלבן שרואים את גבולותיו, וזה
     מה שנקרא "רקע" — לא הכהיה אלא הקצה.
     מה שמחזיק את הקריאות במקומו: צל טקסט בשתי שכבות — אחת רחבה
     ורכה שמנתקת את האותיות מהרקע, ואחת צרה וכהה שמחדדת את הקצה.
     נבדק על שני האזורים הקשים בתמונה: השמיים הבהירים בעברית
     והחולצה הכהה באנגלית. */
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  /* שלוש שכבות ולא שתיים: הילה רחבה שמנתקת מהרקע, בינונית שמחזירה
     צפיפות, וצרה שמחדדת את קצה האות. שכבה אחת חזקה הייתה נראית
     כמו הכתם המלבני שהוסר. */
  text-shadow:
    0 0 34px rgba(0, 0, 0, .75),
    0 2px 14px rgba(0, 0, 0, .9),
    0 1px 3px rgba(0, 0, 0, 1);
  font-family: "Suez One", Georgia, serif; font-weight: 400;
  /* היה clamp(1.3rem,5.6vw,1.85rem) — הוגדל: יש מקום בפאנל (56% מרוחב
     הפריים) שלא נוצל. נבדק שהשורות לא נשברות לשורה שלישית. */
  font-size: clamp(1.4rem, 6vw, 2rem);
  line-height: 1.04; letter-spacing: -.005em;
  text-align: start;
}
@media (min-width: 720px) { .hero-m2__title { font-size: clamp(1.85rem, 3.9vw, 2.6rem); } }
/* דפדפן בלי תמיכה ב-backdrop-filter (Firefox ישן, בעיקר): בלי הטשטוש
   הרקע חייב להיות אטום יותר, אחרת הטקסט נופל ישירות על התמונה. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-m2__title { background: rgba(17, 16, 15, .82); }
}
.hero-m2__line { display: block; overflow: hidden; padding-block: .1em; margin-block: -.1em; }
.hero-m2__line > span { display: block; transform: translateY(112%); animation: hm2LineUp .95s cubic-bezier(.16, 1, .3, 1) both; }
.hero-m2__line:nth-of-type(1) > span { animation-delay: .32s; }
.hero-m2__line:nth-of-type(2) > span { animation-delay: .45s; }
.hero-m2__line:nth-of-type(3) > span { animation-delay: .58s; }
@keyframes hm2LineUp { to { transform: translateY(0) } }
/* הזהב הזה כבר קיים ומכויל לניגודיות מעל תמונה — ר' ההערה למעלה על
   .hero-gold/.hero-accent (2.66:1 לעומת 5.42-8.15:1). לא F7B500 חדש. */
.hero-m2__title em { font-style: normal; color: #e8cf9a; }

@keyframes hm2FadeUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.hero-m2__cta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px;
  animation: hm2FadeUp .8s cubic-bezier(.16, 1, .3, 1) .96s both;
}
/* פעימה עדינה על ה-CTA הראשי — רק כאן, לא על cta--primary בכל האתר. */
.hero-m2__cta .cta--primary { animation: hm2Breathe 3.4s ease-in-out 1.8s infinite; }
@keyframes hm2Breathe {
  0%, 100% { box-shadow: 0 10px 24px -14px rgba(58, 130, 68, .6) }
  50%      { box-shadow: 0 12px 32px -10px rgba(58, 130, 68, .95) }
}
.hero-m2__link {
  color: #f2efe9; font-weight: 600; font-size: .95rem; text-decoration: none;
  border-bottom: 1px solid rgba(242, 239, 233, .35); padding-bottom: 3px;
  transition: border-color .18s ease, color .18s ease;
}
.hero-m2__link:hover, .hero-m2__link:active { border-color: #c9a25e; color: #e8cf9a; }
.hero-m2__link:focus-visible { outline: 2px solid #c9a25e; outline-offset: 3px; border-radius: 2px; }

/* ---------- טיקר קטגוריות ---------- */
.hero-m2__ticker {
  position: relative; z-index: 2; margin-top: 20px; overflow: hidden;
  border-top: 1px solid rgba(242, 239, 233, .14);
  padding: 13px 0 4px;
  animation: hm2FadeUp .8s ease 1.15s both;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
}
.hero-m2__ticker-row { display: flex; width: max-content; animation: hm2Tick 46s linear infinite; }
.hero-m2__ticker-group { display: flex; align-items: center; flex: none; }
.hero-m2__ticker-group span {
  font-size: .8rem; font-weight: 600; letter-spacing: .03em;
  color: rgba(242, 239, 233, .68); white-space: nowrap; padding: 0 16px;
}
.hero-m2__ticker-group span::after {
  content: ""; display: inline-block; width: 4px; height: 4px; background: #c9a25e;
  margin-inline-start: 16px; transform: rotate(45deg) translateY(-1px);
}
@keyframes hm2Tick { from { transform: translateX(0) } to { transform: translateX(50%) } }

@media (prefers-reduced-motion: reduce) {
  .hero-m2__frame, .hero-m2__img, .hero-m2__shaft, .hero-m2__line > span,
  .hero-m2__cta, .hero-m2__cta .cta--primary,
  .hero-m2__ticker, .hero-m2__ticker-row {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .hero-m2__img { transform: scale(1.02) !important; }
  .hero-m2__shaft, .hero-m2__dust { display: none; }
}


/* ============ הכותרת: הניווט באותה שורה עם הלוגו ============
   ה-<nav> הועבר ב-HTML אל תוך שורת הלוגו (ולא נמשך למעלה בשוליים
   שליליים — שתי שכבות חופפות היו נשברות בכל שינוי גובה של הלוגו).
   כאן רק מנטרלים את מה שהיה שייך לו כשורה עצמאית: רקע, גבול, רוחב
   מרבי וריפוד.
   הלוגו גבוה מהתפריט (74px מול ~50) וזה מכוון — align-items:center
   בשורה מיישר את שניהם סביב אותו ציר. */
header .navbar {
  flex: 1;
  min-width: 0;
  /* ‎!important: הרקע והגבול של ה-nav כתובים inline ב-HTML
     (‎background:#2e2d2a;border-bottom:1px solid #434240) — שרידים
     מהתקופה שהוא היה שורה עצמאית מתחת לכותרת. בלי !important הם
     מנצחים, ונוצר פס כהה בגוון אחר בתוך הכותרת. */
  background: transparent !important;
  border-bottom: none !important;
  z-index: auto;
  /* השורה יורדת לתחתית הכותרת, בקו אחד עם תחתית הלוגו.
     align-self גובר על ה-align-items:center שכתוב inline על
     שורת הכותרת. */
  align-self: flex-end;
}
header .navbar > div {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-start;
  /* ‎!important נדרש: `align-items:stretch` ו-`padding` כתובים inline
     ב-HTML (נאמנות לרפרנס), ובלעדיו הם מנצחים וכל הכלל לא עושה כלום.
     stretch מתח את הקישורים ל-78px וניפח את הכותרת. */
  align-items: flex-end !important;
}
header .navbar > div > div { align-items: flex-end !important; }

/* הריפוד האנכי היה 16px כשהניווט היה שורה בפני עצמה. בשורת הלוגו
   הוא רק מנפח, והתחתון יורד כמעט לאפס כדי שתחתית הטקסט תפגוש את
   תחתית הלוגו. */
header .navbar .nav-link {
  padding-top: 6px !important;
  padding-bottom: 4px !important;
  /* בלי זה "קטלוג מוצרים" ו"הורדת קטלוג" נשברים לשתי שורות
     ברגע שהמקום מצטמצם, והתפריט מקבל גובה כפול */
  white-space: nowrap;
  padding-inline: 13px !important;
  gap: 6px !important;
  font-size: 14.5px !important;
}
/* פס הגרירה: `overflow-x:auto` כתוב inline ב-HTML והיה נחוץ כשהניווט
   היה שורה מלאה ברוחב המסך. בתוך שורת הלוגו הוא רק מייצר סרגל גלילה
   מכוער — הקישורים נכנסים, הם פשוט צריכים רשות לא להישבר. */
header .navbar > div { overflow: visible !important; }
header .navbar > div > div { flex: none !important; }
header .navbar .nav-link.is-active { border-bottom-width: 2px; }


/* המרווח הגמיש בשורת הכותרת נוצר כשהיו שם אייקוני התחברות/עגלה,
   כדי להחזיק את הלוגו בקצה. עכשיו הניווט יושב באותה שורה, ושניהם
   `flex:1` — כלומר הם חולקים את המקום שווה בשווה, והתפריט נשאר עם
   584px מתוך 1230 ומקבל סרגל גלילה.
   `:empty` מזהה בדיוק את המרווח הריק ולא נוגע במעטפת החיפוש בעמוד
   הקטלוג, שיש בה תוכן. */
header > div > div:empty { flex: 0 0 auto !important; min-width: 0 !important; }

/* בעמוד הקטלוג יש בשורת הכותרת גם מעטפת לתיבת החיפוש עם `flex:1`.
   היא לא ריקה, ולכן `:empty` לא תפס אותה — והיא לקחה מהתפריט מקום
   בדיוק כמו המרווח. התיבה עצמה רחבה 240px לכל היותר, אז אין סיבה
   שהמעטפת תגדל. */
header > div > div:has(.catalog-search) {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* ============ כפתורים צפים: גדולים ב-150% וגבוהים יותר ============
   הגדלים והמיקום כתובים inline ב-HTML, ולכן !important.
   וואטסאפ 74px -> 111, העוזרת 72 -> 108.
   התחתית: 22 -> 84 -> **34** (עמר, 2026-08-24: "עוד למטה").
   פאנל הצ'אט חייב לעלות יחד עם הכפתור, אחרת הוא יושב עליו:
   34 (תחתית) + 108 (כפתור) + 14 (נשימה) = 156. */
a[href*="wa.me"].hov-scale { bottom: 34px !important; }
a[href*="wa.me"].hov-scale img { width: 111px !important; }

#chat-toggle { bottom: 34px !important; }
#chat-toggle img { width: 108px !important; height: 108px !important; }
/* נקודת החיווי הירוקה גדלה יחד, אחרת היא נבלעת.
   `:not(.chat-badge)` אינו קישוט: בלעדיו `width:20px !important`
   תפס גם את תגית השם וכיווץ אותה ל-28px. */
#chat-toggle > span:not(.chat-badge) {
  width: 20px !important; height: 20px !important;
  bottom: 7px !important; inset-inline-end: 4px !important;
}
#chat-panel { bottom: 156px !important; }

/* במסך צר 111px הם רבע מהרוחב — מקטינים, אבל עדיין גדולים מהמקור */
@media (max-width: 560px) {
  a[href*="wa.me"].hov-scale img { width: 88px !important; }
  #chat-toggle img { width: 86px !important; height: 86px !important; }
  #chat-panel { bottom: 132px !important; }
}

/* ---- הפוטר: יותר אוויר ----
   היה 20px ריפוד ושורה צפופה. הפוטר הוא הדבר האחרון שרואים, ושורה
   דחוסה שם נקראת כמו הערת שוליים ולא כמו סיום.
   הסלקטור הוא `.footer-legal` ולא `footer > div` הגנרי — מאז שנוסף
   `.sf-grid` (עמודות הפוטר) מעל השורה הזו, `footer` יש לו שני div ילדים
   ישירים, וסלקטור גנרי היה מדביק את הריפוד/gap האלה גם על ה-grid. */
.footer-legal {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  gap: 14px 28px !important;
  line-height: 2 !important;
}
.footer-legal > span:first-child { letter-spacing: .01em; }

/* טלפון botik — קטן ומאופק, לא מתחרה בשם החברה */
.footer-phone {
  color: #9c958a;
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
  padding-inline-start: 4px;
  transition: color .15s;
}
.footer-phone:hover, .footer-phone:focus-visible { color: #c9a25e; }

@media (max-width: 700px) {
  .footer-legal { padding-top: 24px !important; gap: 10px 18px !important; }
}

/* ‎190px‏ של ריפוד תחתון ירדו מכאן. הם נועדו להרחיק את הקישורים
   מהכפתורים הצפים, אבל הכפתורים תופסים את 170 הפיקסלים התחתונים
   בשתי הפינות — כך שכל תוכן שם נופל מתחתיהם, והריפוד רק הזיז את
   הבעיה והשאיר פס ריק שנראה כאילו הפוטר "קפץ למעלה".
   הפתרון עבר ל-JS: `initFloatingHide` מוסיף `at-footer` ל-body
   כשהפוטר נכנס לתצוגה, והכפתורים נעלמים. */
@media (max-width: 1120px) {
  .footer-legal {
    padding-inline-end: 24px !important;
    padding-bottom: 34px !important;
  }
}

/* ---------- הפוטר: 4 עמודות (ניווט / פרויקטים / קטגוריות / יצירת קשר) ----------
   אותה טכניקת מחיצה כמו פס היתרונות בדף הבית: אין grid-gap, כל עמודה
   נושאת את הריפוד שלה + border-inline-start, והראשונה מקבלת גבול
   שקוף כדי לשמור על ריפוד זהה בלי קו באמצע הדבק לשוליים. */
.sf-grid {
  display: grid;
  /* שלוש עמודות ולא ארבע: עמודת "פרויקטים" הוסרה (עמר, 2026-08-23) —
     היא הכילה placeholders "[[ למילוי ]]" שמעולם לא מולאו. */
  grid-template-columns: repeat(3, 1fr);
}
.sf-col {
  padding: 0 28px 28px;
  border-inline-start: 1px solid #434240;
}
.sf-col:first-child { border-inline-start: 1px solid transparent; padding-inline-start: 0; }
.sf-head {
  color: #c9a25e;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 16px;
}
.sf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sf-list a {
  color: #b9b2a6;
  font-size: 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color .15s;
}
.sf-list a::before {
  content: "‹";
  color: #c9a25e;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: transform .15s;
}
.sf-list a:hover, .sf-list a:focus-visible {
  color: #f2efe9;
}
.sf-list a:hover::before, .sf-list a:focus-visible::before {
  transform: translateX(-3px);
}
[dir="rtl"] .sf-list a:hover::before,
[dir="rtl"] .sf-list a:focus-visible::before {
  transform: translateX(3px);
}

.sf-connect { display: flex; flex-direction: column; gap: 14px; }
.sf-contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f2efe9;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: color .15s;
}
.sf-contact-line svg { flex: none; }
.sf-contact-line:hover, .sf-contact-line:focus-visible { color: #c9a25e; }
.sf-contact-line.sf-whatsapp { color: #4aa657; }
.sf-contact-line.sf-whatsapp:hover, .sf-contact-line.sf-whatsapp:focus-visible { color: #6cc978; }

.sf-social { display: flex; gap: 10px; margin-top: 4px; }
.sf-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #4b4945;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b9b2a6;
  transition: color .15s, border-color .15s, transform .15s;
}
.sf-social-btn:hover, .sf-social-btn:focus-visible {
  color: #c9a25e;
  border-color: #c9a25e;
  transform: translateY(-2px) scale(1.06);
}
.sf-social-btn svg { width: 17px; height: 17px; }

@media (max-width: 1120px) {
  .sf-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-col { padding: 24px 20px 4px; border-inline-start: none !important; border-top: 1px solid #434240; }
  .sf-col:nth-child(-n+2) { border-top: none; padding-top: 0; }
}
@media (max-width: 620px) {
  .sf-grid { grid-template-columns: 1fr; }
  .sf-col:nth-child(-n+2) { border-top: none; }
  .sf-col:not(:first-child) { border-top: 1px solid #434240; }
  .sf-col:first-child { padding-top: 32px; }
}

/* הכפתורים הצפים נעלמים בפוטר.
   ‎visibility‏ ולא ‎display:none‏: הוא ניתן להנפשה, ולכן ההיעלמות היא
   דעיכה ולא קפיצה — וגם מוציא אותם מסדר ה-Tab בזמן שהם מוסתרים,
   שזה הנכון (כפתור שקוף שאפשר להגיע אליו במקלדת הוא מלכודת). */
/* `:not(:has(...))` — פאנל צ'אט פתוח גובר. אין טעם להעלים כפתור
   שהמשתמש בדיוק פתח ממנו שיחה, גם אם הוא גלל לפוטר בזמן שדיבר. */
body.at-footer:not(:has(#chat-panel.open)) #chat-toggle,
body.at-footer:not(:has(#chat-panel.open)) a[href*="wa.me"].hov-scale {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
#chat-toggle,
a[href*="wa.me"].hov-scale {
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  body.at-footer #chat-toggle,
  body.at-footer a[href*="wa.me"].hov-scale { transform: none; transition: none; }
}

/* ---- תגית השם מתחת לעוזר החכם ----
   הכפתור עצמו הוא `position:fixed` **בלי רוחב מוגדר** — רוחבו הוא
   רוחב התמונה (108px), והתגית רחבה ממנו. לכן היא ממורכזת ביחס אליו
   (`left:50%` + `translateX(-50%)`) וגולשת החוצה לשני הצדדים במידה
   שווה, במקום להימתח ולשבור את מרכוז העיגול.
   `pointer-events:none` — הכפתור כולו לחיץ, והתגית לא צריכה לחטוף
   את הקליק ולא להפריע ל-hover של ההגדלה. */
#chat-toggle .chat-badge {
  position: absolute;
  top: calc(100% - 8px);        /* הורם 40, ואז הורד 25 — חפיפה של 8px בלבד */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 13px;
  border-radius: 999px;
  /* שקיפות 60% על **הרקע בלבד**, לא על האלמנט.
     `opacity: .6` על כל התגית מדהה גם את הטקסט: שני הצבעים נעים
     יחד לעבר מה שמאחור, והיחס ביניהם קורס. נמדד: ירוק+טקסט כהה
     ב-opacity .6 נותנים 2.74:1, וגם החלפה ללבן מחמירה ל-2.41:1.
     רקע rgba שקוף + טקסט אטום נותן בדיוק את אותו מראה — 5.80:1. */
  background: rgba(74, 166, 87, .6);   /* ירוק הפלטה #4aa657 ב-60% */
  border: 1.5px solid rgba(35, 34, 32, .75);
  color: #fff;                    /* 5.80:1 מול הירוק המעורבב על רקע האתר */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  pointer-events: none;
}
/* במסך צר הכפתור קטן (86px) והתגית כמעט נוגעת בשפת המסך — מכווצים */
@media (max-width: 560px) {
  #chat-toggle .chat-badge { font-size: 11px; padding: 3px 10px; }
}

/* התגית הורמה לתוך התמונה ויושבת בדיוק מעל נקודת ה"מחובר" (bottom:7px),
   ומכסה אותה. משאירים אותה מוסתרת במפורש במקום להשאיר עיגול שנבלע
   למחצה: הירוק של התגית ממלא את אותו תפקיד. אם התגית תרד שוב מתחת
   לתמונה — למחוק את הכלל הזה. */
#chat-toggle > span:not(.chat-badge) { display: none !important; }

/* ---------- לקוחות מרוצים — רצועת לוגואים ---------- */
.clients-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
}
.clients-track {
  display: flex;
  width: max-content;
  animation: clientsTick 160s linear infinite;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }
.clients-group { display: flex; align-items: center; flex: none; }
.clients-cell {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  opacity: .72;
  transition: opacity .2s ease;
}
.clients-cell:hover { opacity: 1; }
.clients-cell img { display: block; height: 64px; width: auto; max-width: 200px; object-fit: contain; }
/* translateX שלילי = תנועה פיזית שמאלה, כך שהתוכן החדש נכנס מימין —
   זו התנועה "מימין לשמאל" בלי קשר לכיווניות RTL של המסמך. dir="ltr"
   על .clients-marquee ב-HTML הוא מה שהופך את זה ללופ תקין (ר' ההערה
   שם) ולא רק לכיוון תנועה. */
@keyframes clientsTick { from { transform: translateX(0) } to { transform: translateX(-50%) } }

@media (max-width: 620px) {
  .clients-cell { padding: 0 24px; }
  .clients-cell img { height: 44px; max-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none !important; }
  .clients-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- המוצרים שלנו — קרוסלת קטגוריות ----------
   מבוסס על עיצוב שעמר ייבא (קרוסלת מוצרים - ייצוא.html); הצורה
   (הפינה הימנית-עליונה מעוגלת חזק, השאר רבועות) נשארה מהמקור —
   זה שפת עיצוב, לא צבע/פונט. הפלטה, הפונט וההזזה ל-CSS/JS רגיל
   הם ההתאמה למערכת שלנו. כרטיסייה אחת = קטגוריה אחת, לא מוצר. */
.catcar { position: relative; width: min(980px, 100%); margin: 0 auto; }
.catcar-stage {
  display: block;
  position: relative;
  background: #23201c;
  border: 1px solid #3a352f;
  border-radius: 0 90px 24px 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
  min-height: 460px;
}
.catcar-slide { display: none; }
.catcar-slide.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: catFade .45s ease both;
}
@keyframes catFade { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.catcar-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 20px;
  width: 100%;
}
.catcar-glow {
  position: absolute; inset: -60px;
  background: radial-gradient(ellipse at center, rgba(201, 162, 94, .30) 0%, rgba(201, 162, 94, .10) 45%, transparent 72%);
  pointer-events: none;
}
.catcar-media img {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  /* 2026-07-29 (בקשת עמר): הייתה כאן מסכת radial-gradient בסגנון
     המקור — "closest-side" נשען על הצלע הקצרה של הקופסה, ולכן בכל
     תמונה שלא מרובעת בערך (כל מוצר מאורך: זווית, מוט, צינור) הדעיכה
     שהתחילה ב-55% "אכלה" בפועל את קצוות המוצר עצמו, לא רק את הרקע.
     ה-glow למטה (רדיאל-גרדיאנט ברקע, לא על התמונה) נותן את אפקט
     "הזוהר הרך" בלי לחתוך שום פיקסל מהמוצר. */
  animation: catImgFade .5s ease both;
}
@keyframes catImgFade { from { opacity: 0; transform: scale(1.04) } to { opacity: 1; transform: none } }
.catcar-info { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 40px 40px; max-width: 620px; }
.catcar-info h3 { margin: 0; font-size: 21px; font-weight: 800; color: #fff; text-wrap: pretty; }
.catcar-info p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #b9b2a6; text-wrap: pretty; }
.catcar-info a {
  margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(201, 162, 94, .55);
  border-radius: 10px;
  padding: 10px 26px;
  font-size: 14.5px; font-weight: 700;
  color: #e8c98a; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.catcar-info a:hover, .catcar-info a:focus-visible {
  background: rgba(201, 162, 94, .12); color: #fff; border-color: #c9a25e;
}

.catcar-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(201, 162, 94, .45);
  background: #23201c; color: #e8c98a;
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.catcar-arrow:hover, .catcar-arrow:focus-visible { background: #c9a25e; color: #23201c; }
.catcar-prev { inset-inline-start: -18px; }
.catcar-next { inset-inline-end: -18px; }
@media (max-width: 700px) {
  .catcar-prev { inset-inline-start: 6px; }
  .catcar-next { inset-inline-end: 6px; }
}

.catcar-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.catcar-dot {
  width: 8px; height: 8px; border-radius: 99px; border: none; padding: 0; cursor: pointer;
  background: rgba(242, 239, 233, .25);
  transition: width .3s, background .3s;
}
.catcar-dot.is-active { width: 26px; background: #c9a25e; }
.catcar-dot:focus-visible { outline: 2px solid #c9a25e; outline-offset: 2px; }

@media (max-width: 620px) {
  .catcar-stage { border-radius: 0 48px 18px 18px; min-height: 420px; }
  .catcar-info { padding: 8px 24px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .catcar-slide.is-active, .catcar-media img { animation: none !important; }
}

/* ---------- צור קשר — טופס פנייה ----------
   מבוסס על עיצוב שעמר ייבא (Downloads/contact-form.html). ההתאמות
   למערכת שלנו: ה-CSS עבר לכאן מ-<style> מוטבע בעמוד, וכל המחלקות
   מוטבע בעמוד, וכל המחלקות קיבלו תחילית `cf-` — `.field` כבר תפוס
   באתר (ר' `.field:focus` בראש הקובץ) ו-`.submit`/`.check`/`.services`
   גנריים מדי לקובץ סגנונות משותף ל-887 עמודים.
   הפלטה של המקור כבר הייתה של האתר (#232220/#292826/#c9a25e), ולכן
   הצבעים לא שונו — רק אומתו מול המשתנים הקיימים. */
/* 40px למעלה ולא 8px: בדף הבית הטופס יושב אחרי רצועת הלקוחות,
   ובמרווח הקטן הוא נדבק אליה. אותו ריתמוס כמו שאר מקטעי הדף. */
.cf-section { padding: 40px 20px 72px; }
.cf-wrap { max-width: 1100px; margin: 0 auto; }
/* הבאנר הזהב של המקור (גרדיאנט + צל, ממוקם ב-absolute מעל הכרטיס)
   הוסר לבקשת עמר — הוא היה מסיבי מדי. במקומו כותרת פשוטה בירוק,
   ולכן גם נפלו איתו כל ההאקים שהוא חייב: padding-top על ה-wrap
   ו-padding:112px על הכרטיס, שנועדו רק לפנות לו מקום.
   #4aa657 ולא #3a8244: זה טקסט על רקע כהה (5.92:1) — ההיפוך
   נכון רק למשטח ירוק עם טקסט לבן. ר' ההערה ליד .cta--primary. */
.cf-title {
  margin: 0 0 26px; text-align: center;
  font-size: clamp(19px, 2vw, 24px); font-weight: 800; line-height: 1.4;
  color: #4aa657;
}
.cf-card {
  background: #292826; border: 1px solid #434240; border-radius: 14px;
  padding: 38px 42px 40px;
}
.cf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 30px; }
.cf-f label { display: block; font-size: 14.5px; font-weight: 600; color: #c6bfb2; margin-bottom: 10px; }
.cf-f input, .cf-f textarea {
  width: 100%; background: transparent;
  border: 0; border-bottom: 1px solid #434240;
  color: #fff; font-size: 16px;
  /* font-family: inherit ולא שם גופן קשיח: כך הטופס תמיד תואם את
     הגופן של העמוד שהוא יושב בו, בלי לשכפל את ההחלטה. (עד
     2026-07-30 האתר היה חצוי בין Heebo ל-Rubik וזה היה קריטי;
     גם אחרי שהכול עבר ל-Rubik זו עדיין ההגדרה הנכונה.) */
  font-family: inherit;
  padding: 8px 2px; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cf-f textarea { resize: vertical; min-height: 58px; line-height: 1.6; }
.cf-f input:hover, .cf-f textarea:hover { border-bottom-color: #5a5854; }
.cf-f input:focus, .cf-f textarea:focus { border-bottom-color: #c9a25e; box-shadow: 0 1px 0 0 #c9a25e; }
.cf-full { margin-bottom: 26px; }
/* כפתור קטן ולא ברוחב מלא, בירוק של האתר: #3a8244 עם טקסט לבן
   (4.71:1) — בדיוק כמו .cta--primary/.btn-green, ולא ירוק אחר. */
.cf-submit {
  display: inline-block; width: auto;
  border: 0; border-radius: 8px; padding: 11px 34px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: #fff; background: #3a8244; cursor: pointer;
  transition: background .18s ease;
}
.cf-submit:hover { background: #337549; }
.cf-submit:focus-visible { outline: 3px solid #c9a25e; outline-offset: 3px; }
/* עוטף שמרכז את הכפתור וההערות שאחריו. text-align על העוטף ולא
   margin:auto על הכפתור — הכפתור הוא inline-block, ו-margin:auto
   לא מרכז inline-block. */
.cf-actions { text-align: center; }
.cf-note { margin: 14px 0 0; font-size: 13.5px; color: #9c958a; line-height: 1.6; }
.cf-sent { display: block; margin-top: 12px; font-size: 14.5px; font-weight: 600; color: #4aa657; }

@media (max-width: 820px) {
  .cf-row { grid-template-columns: 1fr; gap: 22px; }
  .cf-card { padding: 28px 22px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-submit, .cf-f input, .cf-f textarea { transition: none; }
}

/* ── טקסט משני מתחת לכותרת סקשן ────────────────────────────────────
   ממורכז בכל רוחב מסך, כולל מובייל (עמר, 2026-08-23). הייתה כאן
   החרגה שיישרה לימין מתחת ל-620px; היא הוסרה — הבקשה היא מרכוז אחיד,
   כמו הפסקה שמתחת ל"הקטלוג שלנו".
   text-wrap:pretty מונע מילה בודדת בשורה האחרונה, שזה מה שמקלקל
   מרכוז יותר מכל דבר אחר. */
.sec-sub {
  margin: 16px auto 0;
  max-width: 640px;
  font-size: 15.5px;
  line-height: 1.75;
  color: #b9b2a6;
  text-align: center;
  text-wrap: pretty;
}

/* ── מתג שפה עברית/אנגלית ──────────────────────────────────────────
   יושב **לימין** כפתור הנגישות ולא במקומו: הנגישות היא רכיב תקן
   שמשתמשים מחפשים בפינה עצמה, והזזתה שוברת הרגל. 22 + 56 + 12 = 90.
   `left` פיזי ולא inset-inline-start, מאותה סיבה שרשומה ב-a11y.css:
   הבקשה היא "שמאל" ממש, וב-RTL הלוגי היה מקפיץ אותו לימין — וגם
   מזיז אותו בכל החלפת שפה, שזה הדבר האחרון שרוצים ממתג שפה.
   z-index רק מתחת לנגישות, שהיא תמיד העליונה. */
.lang-toggle {
  position: fixed;
  top: 22px;
  left: 90px;
  z-index: 2147482999;

  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #c9a25e;
  background: #2e2d2a;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.lang-toggle svg {
  border-radius: 3px;
  display: block;
  /* מסגרת דקה: הפס הלבן של שני הדגלים נעלם על רקע בהיר */
  outline: 1px solid rgba(0, 0, 0, .25);
  outline-offset: -1px;
}
.lang-toggle:hover { transform: scale(1.06); }
.lang-toggle:focus-visible {
  outline: 3px solid #4aa657;
  outline-offset: 3px;
}
@media (max-width: 620px) {
  /* בנייד כפתור הנגישות קטן יותר ויושב צמוד יותר לפינה */
  .lang-toggle { width: 48px; height: 48px; left: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-toggle { transition: none; }
  .lang-toggle:hover { transform: none; }
}

/* ── תיקוני פריסה למצב אנגלית (dir=ltr) ────────────────────────────
   האתר נבנה RTL, וחלק מהעיצוב הוא inline ופיזי ולא לוגי. הבלוק הזה
   מתקן את המקומות שבהם היפוך הכיוון שובר משהו. כל כלל כאן קיים בגלל
   תקלה שנראתה במסך, לא "ליתר ביטחון".
   כולם ספציפיים ל-[dir="ltr"], ולכן העברית לא מושפעת בכלל. */

/* 1. ההדר. כפתורי הנגישות והשפה מרחפים ב-left:22/90px. בעברית הלוגו
      יושב מימין והפינה השמאלית פנויה; ב-LTR הלוגו קופץ שמאלה ונדרס
      על ידם. הריפוד מפנה להם את המקום. 90+56+14 = 160. */
[dir="ltr"] .top-logo { margin-left: 160px; }
@media (max-width: 620px) {
  [dir="ltr"] .top-logo { margin-left: 0; }
}

/* 2. הירו בדסקטופ. שלושתם היו פיזיים ומכוונים לימין:
      הטקסט, האפלת הרקע שמאחוריו, ומיקוד התמונה. */
/* !important נדרש: היישור לימין הוא inline על ה-div עצמו, וסלקטור
   מחלקה לא גובר על inline בלי זה. */
[dir="ltr"] .hero-inner > div:first-child { text-align: left !important; }
[dir="ltr"] .hero-inner > div:first-child h1,
[dir="ltr"] .hero-inner > div:first-child p { text-align: left; }

/* תגית השם של עומר ממורכזת מתחת לכפתור (left:50% + translateX).
   בעברית הכפתור בצד ימין והתגית נכנסת פנימה; ב-LTR הוא ב-left:22px
   והתגית — רחבה מהכפתור פי שלושה — נחתכת בשפת המסך. עוגן לשמאל
   הכפתור במקום מרכוז. */
[dir="ltr"] #chat-toggle .chat-badge {
  left: 0;
  transform: none;
}
[dir="ltr"] .hero-grad {
  background: linear-gradient(to right,
    rgba(24, 22, 19, .88) 0%, rgba(24, 22, 19, .72) 32%,
    rgba(24, 22, 19, .15) 58%, rgba(24, 22, 19, 0) 75%) !important;
}
[dir="ltr"] .hero-img { object-position: right top !important; }

/* 3. הכפתורים הצפים התחתונים. שניהם על inset-inline-*, ולכן החליפו
      צד בהיפוך — וואטסאפ קפץ שמאלה והצ'אט ימינה. משתמש שלמד איפה הם
      לא אמור לחפש אותם מחדש כשהוא מחליף שפה, ולכן הם ננעצים פיזית. */


/* 4. טקסט משני וכותרות סקשן שהוגדרו ממורכזות נשארות ממורכזות —
      אין כאן מה לתקן. הכלל הזה קיים רק כדי שהפסקאות של הגוף,
      שיורשות text-align מההורה ה-RTL, ייושרו לשמאל באנגלית. */
[dir="ltr"] .home-intro { text-align: center; }

/* 5. ההדר של עמוד הקטלוג באנגלית. המילים האנגליות ארוכות מהעבריות
      ("Download Catalogue" מול "הורדת קטלוג"), שורת הניווט מתרחבת,
      ותיבת החיפוש — שיושבת ב-flex:1 באותה שורה — נדרסת מתחתיה.
      הצרת הריפוד בין פריטי הניווט מחזירה את השורה לרוחב שנכנס, בלי
      לגעת בגודל הטקסט עצמו. */
[dir="ltr"] .navbar { min-width: 0; }
[dir="ltr"] .navbar .nav-link { padding-inline: 13px !important; }
[dir="ltr"] .catalog-search { min-width: 0; }
/*    העטיפה של תיבת החיפוש היא `flex:1` ולכן היא לוקחת את כל השארית
      ומשאירה לניווט פחות ממה שהוא צריך (נמדד: 813px בפועל מול 887px
      נדרשים באנגלית). היפוך הקדימות — הניווט מקבל את רוחבו הטבעי,
      והחיפוש מתכווץ למה שנשאר. */
[dir="ltr"] header > div > div:last-child { flex: 0 1 200px !important; }

/* ── פס התגים עד הפינה ─────────────────────────────────────────────
   ה-div האחרון בשורת ההדר הוא עטיפת תיבת החיפוש: מלא בעמוד הקטלוג,
   **ריק בכל שאר העמודים**. גם כשהוא ריק הוא תופס מקום — 200px
   באנגלית (הכלל שמעל) או את כל השארית בעברית (inline style) — ודוחף
   את פס התגים פנימה. נמדד: הפס נגמר ב-1038 ושפת ההדר ב-1241, כלומר
   200px של אוויר בפינה.
   `:empty` מסיר אותו רק היכן שאין בו כלום; בעמוד הקטלוג הוא נשאר
   ומחזיק את החיפוש. `display:none` ולא `flex:0` — ברוחב אפס הוא
   עדיין גורר את ה-gap של 18px מהשורה, והפס נעצר 18px לפני הקצה.
   מוגבל ל-1121px ומעלה, אותו סף שבו הפס בכלל מוצג: מתחתיו ה-div
   הזה משתתף ביישור הלוגו וההמבורגר, ואין סיבה לגעת בו. */
@media (min-width: 1121px) {
  header > div > div:last-child:empty { display: none; }
}

/* ── פס תגי אמון בשורת הניווט ───────────────────────────────────────
   יושב בקצה השמאלי של שורת הניווט, כלומר משמאל ל"הורדת קטלוג" ב-RTL
   (בקשת הלקוח). `margin-inline-start:auto` ולא `float`/`position` —
   השורה היא flex, וזה מה שדוחף אותו לקצה בלי לשבור את הגלילה
   האופקית שכבר קיימת שם.
   הפס דקורטיבי-אינפורמטיבי; הוא לא קישור ולא פותח כלום. */
.trust-badges {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-inline-start: auto;
  padding-inline-start: 18px;
  flex: none;
}
/* בעברית הפס נוחת בקצה השמאלי — בדיוק שם שמרחפים כפתור הנגישות
   (left:22px) וכפתור השפה (left:90px), שניהם 56px. הם fixed ולכן לא
   משתתפים בזרימה, והפס נכנס מתחתיהם. 90+56+16 = 162.
   באנגלית הפס בצד ימין ואין התנגשות, ולכן הכלל מוגבל ל-RTL. */
/* היה 162px כדי לא להיכנס מתחת לכפתורי הנגישות והשפה, שריחפו
   בשורת ההדר. הם ירדו שורה מתחתיו, והמקום התפנה. */
[dir="rtl"] .trust-badges { margin-inline-end: 0; }

.tb-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
}
.tb-slot img {
  height: 42px;
  width: auto;
  display: block;
}

/* החותם מתחלף עם השפה: עברית -> החותם העברי, אנגלית -> האנגלי.
   שניהם ב-HTML ואחד מוסתר, כדי שמעבר שפה לא יגרור טעינת תמונה
   מחדש (הבהוב).
   הסלקטור כולל `.tb-slot` בכוונה: `.tb-slot img` למעלה הוא (0,1,1)
   ומכריע `display:block` על `.tb-seal--en` שהוא (0,1,0) — בלי זה
   שני החותמים מוצגים יחד. */
.tb-slot .tb-seal--en { display: none; }
[dir="ltr"] .tb-slot .tb-seal--he { display: none; }
[dir="ltr"] .tb-slot .tb-seal--en { display: block; }

/* שני סימני התקן הם קבצים רשמיים של גופי ההסמכה ולא עיצוב שלנו:
   הלוגו של מת"י (מכון התקנים הישראלי) וסימן ה-ETA האירופי, שניהם
   כפי שהלקוח שלח אותם. הפרופורציות נשמרו בדיוק.
   מת"י הגיע כצילום-מסך על נייר לבן, וההדר כהה. במקום אריח לבן —
   שנראה כמדבקה מודבקת — הרקע הוסר מהקובץ עצמו: הדיו האכרומטי
   הופך לקרם (#e8e3d9), והטיפה נשארת כחולה אבל מוארת (#969cf0).
   הכחול המקורי כהה מאוד, ועל חום-כהה הוא פשוט נעלם; ההארה שומרת
   על זהות הסימן במקום למחוק אותה לטובת חד-גוניות.
   ETA לעומתו **שומר על הרקע הכחול שלו** — טבעת הכוכבים על כחול
   היא הסימן עצמו, כמו דגל האיחוד, ולא רקע שאפשר להסיר. הוא הגיע
   כריבוע, ונחתך לעיגול כדי לשמור על שפת הפס: חותם דן אנד ברדסטריט
   שלצדו הוא עיגול, וריבוע מלא ביניהם קרע את השורה. האיור כווץ ל-84%
   לפני החיתוך — בלעדיו הכוכבים בשעה 12/3/6/9 נחתכו בשפת העיגול.
   הגובה של שניהם נקבע בהמשך הקובץ, אחרי הדריסה ל-52px. */

/* מתחת ל-1120px שורת הניווט מוסתרת לטובת הסייד-בר, והפס נעלם איתה.
   הוא מוחזר בסייד-בר עצמו ולא כאן. */
@media (max-width: 1120px) {
  .trust-badges { display: none; }
}

/* ── אותם תגים, בתחתית הסייד-בר ─────────────────────────────────────
   ההערה שמעל הבטיחה "מוחזר בסייד-בר" — עד עכשיו זה לא קרה בפועל,
   ובנייד התגים פשוט לא הופיעו בשום מקום.
   אין צורך ב-media query: הסייד-בר עצמו `display:none` עד
   `body.menu-open`, וההמבורגר שפותח אותו מוסתר מעל 1120px.
   מי שדוחף לתחתית הוא **רשימת הקישורים**, לא הפס עצמו. הניסיון
   הראשון היה `margin-top:auto` על הפס — ובעמודי השורש יצאו שני
   רווחים במקום אחד: שורת הטלפון כבר נושאת `margin-top:auto` משלה,
   ושני שוליים אוטומטיים באותה עמודה **מתחלקים** בשארית ולא נבלעים
   על ידי הראשון. `flex:1` על רשימת הקישורים בולע את כל השארית
   במקום אחד, וכל מה שאחריה נדחס לתחתית — עם שורת טלפון וגם בלעדיה.
   `div:nth-child(2)` ולא מחלקה, כי לרשימה אין מחלקה: הסייד-בר בנוי
   [כותרת][קישורים][טלפון?][תגים] בכל 890 העמודים.
   ה-`.tb-slot` הם אותם מחלקות של הפס העליון בכוונה — הגבהים והחלפת
   החותם לפי שפה מגיעים משם, ולא צריך להחזיק שני עותקים שיתפצלו. */
.sidebar > div:nth-child(2) { flex: 1; }
.side-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px 20px;
  border-top: 1px solid #434240;
}

/* ── טיפוגרפיה של הגרסה האנגלית ─────────────────────────────────────
   Rubik תוכנן קודם כל לעברית; הלטינית שלו רחבה ורכה ונקראת באנגלית
   כמו ברירת מחדל של דפדפן. לכן באנגלית בלבד:
     כותרות — Space Grotesk (אופי טכני-תעשייתי, מתאים לענף)
     גוף     — Inter (תוכנן לקריאות על מסך בגדלים קטנים)
   העברית לא נוגעת בזה בכלל.

   `*` עם `!important` הוא לא עצלנות: font-family מוגדר inline
   בעשרות מקומות ב-HTML (`style="font-family:'Rubik',sans-serif"`),
   וסלקטור רגיל לא מנצח inline. זה בדיוק המקרה שבו זה מוצדק. */
[dir="ltr"],
[dir="ltr"] * {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
/* אחרי הכלל הגורף, ולכן מנצח אותו */
[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3,
[dir="ltr"] h1 *,
[dir="ltr"] h2 *,
[dir="ltr"] h3 *,
[dir="ltr"] .hero-m2__title,
[dir="ltr"] .hero-m2__title *,
[dir="ltr"] .cta,
[dir="ltr"] .nav-link,
[dir="ltr"] .sf-head,
[dir="ltr"] .catcar-info h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  letter-spacing: -.01em;
}

/* ── הירו באנגלית: פחות דחוס ──────────────────────────────────────
   שלוש בעיות שנראו במסך: הכותרת גלשה לארבע שורות, הפסקה נדחסה אל
   הכפתורים, והכל יחד דחף את ה-CTA מתחת לקיפול.
   Space Grotesk גם רחב יותר מ-Rubik באותו גודל, ולכן הכותרת יורדת
   מ-clamp(28,2.9vw,42) ל-clamp(26,2.4vw,38). */
[dir="ltr"] .hero-inner h1 {
  font-size: clamp(26px, 2.4vw, 38px) !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em;
}
[dir="ltr"] .hero-inner p {
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  max-width: 560px !important;
}
[dir="ltr"] .hero-inner > div:first-child { gap: 18px !important; }

/* ── כפתורים צפים במצב אנגלית ───────────────────────────────────────
   ב-LTR עמודת הטקסט של ההירו עוברת לצד שמאל — בדיוק מעל משגר הצ'אט
   שנעוץ ב-left:22px, והאווטאר של עומר נחת על כפתור "View catalogue".
   בעברית זה לא קורה כי הטקסט מימין.
   הפתרון: ב-LTR כל ה-UI הצף עובר ימינה, שם אין תוכן. הצ'אט מעל
   הוואטסאפ ולא לצידו, כדי שלא יידחסו יחד בנייד. */
/* פינות נגדיות ובאותו גובה (עמר): וואטסאפ שמאל-תחתון, הסוכן
   ימין-תחתון.
   **רק הציר האופקי נדרס כאן.** שניהם כבר יושבים על
   `bottom: 34px !important` בכלל משותף (שורה ~1867), ולכן הם
   מקבילים מעצמם — דריסת bottom כאן רק הייתה מפרקת את היישור.
   קודם שניהם היו בימין והסוכן הועלה ל-210px כדי לא להיערם על
   הוואטסאפ; משהם בפינות נפרדות הערימה מיותרת ובוטלה. */
/* **בנייד בלבד.** בדסקטופ ב-LTR עמודת הטקסט של ההירו יושבת בשמאל
   וכפתור "View catalogue" תופס את הפינה השמאלית-תחתונה — נמדד:
   הכפתור 447-495, הוואטסאפ 464-558. ניסיתי להרים את תוכן ההירו
   (ריפוד תחתון, ואז עיגון לראש) ובשני המקרים נשארה חפיפה, כי גובה
   ההירו נגזר מהתוכן. בנייד הכפתורים יושבים מתחת לתמונה ולא לצידה,
   ולכן שם אין התנגשות והסידור עובד. */
@media (max-width: 1120px) {
  [dir="ltr"] .hov-scale[href*="wa.me"] { right: auto !important; left: 22px !important; }
  [dir="ltr"] #chat-toggle { left: auto !important; right: 22px !important; }
  [dir="ltr"] #chat-panel  { left: auto !important; right: 22px !important; }
}
/* דסקטופ: שניהם בימין, הסוכן מעל הוואטסאפ. הפינה השמאלית שייכת
   לכפתור ההירו. */
@media (min-width: 1121px) {
  [dir="ltr"] .hov-scale[href*="wa.me"] { left: auto !important; right: 22px !important; }
  [dir="ltr"] #chat-toggle { left: auto !important; right: 22px !important; bottom: 160px !important; }
  [dir="ltr"] #chat-panel  { left: auto !important; right: 22px !important; bottom: 250px !important; }
}
/* התגית ממורכזת מתחת לאווטאר; בפינה הימנית היא גולשת מהמסך, ולכן
   מעוגנת לקצה הימני של הכפתור. */
[dir="ltr"] #chat-toggle .chat-badge { left: auto; right: 0; transform: none; }

/* ── פס התגים: גדול מספיק כדי לזהות מה כתוב בחותם ────────────────
   42px היה נקודה טורקיז. 52px עדיין נכנס בשורת הניווט. */
.tb-slot { height: 52px; }
.tb-slot img { height: 52px; }
/* סימני התקן גדלים יחד עם הפס, אבל נשארים קטנים מהחותם: הם יושבים
   על אריח לבן, והאריח הוא זה שצריך למלא את 52px. הכלל חייב להיות
   כאן ולא ליד `.tb-mark` למעלה — `.tb-slot img` שבשורה הקודמת הוא
   באותה ספציפיות (0,1,1), וסדר הקובץ הוא שמכריע. */
/* מת"י נחתך מהמקור ל-465px רוחב מול 52px תצוגה — פי 9, חד בכל
   צפיפות מסך. */
.tb-mark img { height: 52px; }
/* ETA הוא עיגול **מלא**, לא ציור-קווים, ולכן במסה נראית הוא כבד
   משכניו גם באותו גובה. 48px מאזן את המסה ולא את הגובה — הוא נמוך
   ב-4px מהחותם העגול שלצדו בכוונה, ולא מרשלנות. */
.tb-mark--eta img { height: 48px; }

/* ── נייד: לפרום את הדחיסות ────────────────────────────────────────
   1. ההמבורגר נעלם מתחת לכפתורי הנגישות והשפה שמרחפים בפינה
      השמאלית. הוא הניווט היחיד בנייד, ולכן זו לא בעיה קוסמטית.
      הכפתורים יורדים מתחת להדר. */
@media (max-width: 1120px) {
  /* רק מתג השפה זז. כפתור הנגישות **לא ניתן להזזה מכאן**: a11y.js
     מזריק אותו לתוך אב שיש עליו filter, וזה יוצר containing block
     חדש ל-position:fixed שבתוכו — נמדד: right:16px מיקם אותו ב-x=16
     במקום ב-496. הוא נשאר בפינה השמאלית, ובמקום להזיז אותו מפנים
     לו מקום בהדר.
     מתג השפה מוצמד ל-body ולכן כן נשמע להוראה. */
  /* ארבעה פריטים בשורת ההדר בנייד — המבורגר, לוגו, נגישות, שפה —
     ישבו על שלושה קווי מרכז שונים (35 / 42 / 50, נמדד). זה מה
     שנקרא "לא ממוקם טוב": לא המיקום האופקי אלא היישור האנכי.
     שורת ההדר גובהה 70px ומרכזה 35, ולכן שניהם 44px עם top:13. */
  #sa-a11y-btn {
    top: 13px !important;
  }
  #sa-a11y-btn,
  .lang-toggle {
    bottom: auto !important;
    width: 44px !important;
    height: 44px !important;
  }
  /* הדגל **מתחת** לכפתור הנגישות (עמר), ולא לצידו: 13 + 44 + 10 = 67.
     אותו left בדיוק לשני הכיוונים — 22px, הערך שכפתור הנגישות
     נושא ב-a11y.css. בבדיקה ב-iframe הם נראו במרחק 15px זה מזה
     ב-RTL, אבל זה פס הגלילה של ה-iframe שיושב בשמאל ומזיז את
     ראשית הצירים; במכשיר אמיתי אין לו רוחב והם מיושרים. */
  /* עברית: מתחת לכפתור הנגישות בשמאל (שם הוא תקוע).
     אנגלית: מתחת להמבורגר בימין — שם יושבים הלוגו וההמבורגר,
     והנגישות לבדה בשמאל. 24px הוא הריפוד הימני של ההדר, כך
     שהדגל וההמבורגר מיושרים על אותו קו. */
  .lang-toggle { top: 67px !important; }
  [dir="rtl"] .lang-toggle { right: auto !important; left: 22px !important; }
  [dir="ltr"] .lang-toggle { left: auto !important; right: 24px !important; }

  /* בעברית הלוגו בימין וכפתור הנגישות בשמאל — אין התנגשות.
     באנגלית הלוגו עובר שמאלה, ישר מתחת לכפתור. 22+56+10 = 88. */
  [dir="ltr"] .top-logo,
  [dir="ltr"] .hamburger { margin-left: 0; }
  [dir="ltr"] header > div { padding-left: 88px !important; }
}
/* 2. כותרת ההירו בנייד באנגלית: Space Grotesk רחב מ-Rubik, והכותרת
      גלשה לארבע שורות שדחפו את הכפתורים מתחת לקיפול. */
@media (max-width: 1120px) {
  /* max-width:56% כוון לעברית ("הכוח שמאחורי" — 12 תווים). באנגלית
     "The Strength Behind" הוא 19 תווים והשורה נשברה, כך שהכותרת ירדה
     לארבע שורות ודחפה את הכפתורים מתחת לקיפול. 74% עדיין משאיר את
     הפועל בתמונה גלוי מימין. */
  [dir="ltr"] .hero-m2__title {
    font-size: clamp(21px, 5.6vw, 31px) !important;
    line-height: 1.14 !important;
    max-width: 74% !important;
    /* עמר ביקש להוריד את הכותרת בערך 200px באנגלית. ערך קבוע לא
       עובד: גובה הפריים משתנה עם רוחב המסך (נמדד 285px ברוחב 300),
       ו-288px זרק את הכותרת מחוץ לפריים — `overflow:hidden` בלע
       אותה לגמרי. עיגון לתחתית התמונה נותן את אותה תוצאה בפועל
       ולא נשבר באף רוחב. בעברית היא נשארת למעלה: הקומפוזיציה שם
       כוונה לשלוש שורות קצרות. */
    inset-block-start: auto !important;
    /* 50 ולא 14: שורת הכפתורים יושבת על margin-top שלילי של 56px
       ולכן נכנסת 32px לתוך התמונה — נמדד. ב-14px "Your Project"
       נעלם מאחורי "View catalogue". */
    inset-block-end: 50px !important;
  }
}

/* ── ההמבורגר בנייד: רקע כמו לשני הכפתורים האחרים ─────────────────
   ההדר מרחף מעל תמונת ההירו בלי פס רקע, וכפתורי הנגישות והשפה
   נושאים רקע כהה משלהם. ההמבורגר היה מסגרת זהב על אוויר, ועל הקסדה
   הצהובה הוא נעלם כמעט לגמרי — זה מה שנראה כמו "לא ממוקם טוב".
   אותו רקע ואותו טשטוש, כך שהשלושה נקראים כקבוצה אחת. */
@media (max-width: 1120px) {
  .hamburger {
    background: rgba(46, 45, 42, .72) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border-radius: 10px;
  }
}

/* ── נייד באנגלית: הלוגו וההמבורגר נגררים ימינה ────────────────────
   בעברית הלוגו יושב בימין ממילא. באנגלית הוא קפץ שמאלה ונחת בדיוק
   על ראשו של הפועל בתמונת ההירו.
   שלושה חלקים, כולם נדרשים:
   1. ה-div האחרון בשורה (עטיפת החיפוש) תופס 200px בסיס ודוחף את
      הקבוצה שמאלה — מתכווץ לאפס בנייד, שם אין בו חיפוש
   2. margin-inline-start:auto על הלוגו בולע את כל השארית ומעיף את
      הקבוצה לקצה
   3. ריפוד ימני רגיל (24px). היה 80 כדי לפנות מקום לכפתור השפה
      שישב בפינה הימנית — מאז הוא עבר מתחת לכפתור הנגישות בשמאל,
      ו-80px נשארו כרווח ריק שגרר את הקבוצה פנימה. */
@media (max-width: 1120px) {
  [dir="ltr"] header > div { padding-right: 24px !important; }
  [dir="ltr"] header > div > div:last-child {
    flex: 0 1 0 !important;
    min-width: 0 !important;
  }
  /* גם ברוחב אפס ה-div הזה עדיין גורר את ה-gap של 18px מהשורה,
     והקבוצה נעצרת 18px לפני הקצה. `:empty` מסיר אותו רק בעמודים
     שבהם הוא באמת ריק — בעמוד הקטלוג הוא מחזיק את תיבת החיפוש,
     ושם הוא נשאר. */
  [dir="ltr"] header > div > div:last-child:empty { display: none !important; }
  [dir="ltr"] .top-logo { margin-inline-start: auto !important; }
}

/* ── סדר ההמבורגר והלוגו בנייד בעברית ──────────────────────────────
   ‎`.top-logo { order: -1 }` (שורה ~305) מציב את הלוגו ראשון, כלומר
   בקצה הימני ב-RTL, וההמבורגר נדחק פנימה. עמר ביקש הפוך: ההמבורגר
   צמוד לקצה הימני והלוגו משמאלו.
   ביטול ה-order מחזיר את סדר ה-DOM, שבו ההמבורגר קודם ממילא.
   באנגלית לא נוגעים: שם order:-1 מציב את הלוגו בשמאל וההמבורגר
   בקצה הימני, וזה כבר אושר. */
@media (max-width: 1120px) {
  [dir="rtl"] .top-logo { order: 0 !important; }
}



/* ── דסקטופ: הנגישות והשפה יורדים שורה מתחת להדר ───────────────────
   היו ב-top:22px, כלומר בתוך שורת ההדר עצמה — מה שחייב באנגלית
   לדחוף את הלוגו 160px ימינה כדי לפנות להם מקום.
   ההדר נגמר ב-99px (נמדד), ולכן 115 מציב אותם שורה מתחתיו, מרחפים
   מעל ראש ההירו. שתי השפות זהות — הם נשארים בפינה השמאלית בשתיהן,
   כפי שהיה מלכתחילה.
   כפועל יוצא הלוגו באנגלית חוזר למקומו הטבעי; ההזחה הייתה קיימת
   רק בגללם. */
@media (min-width: 1121px) {
  #sa-a11y-btn { top: 115px !important; }
  .lang-toggle { top: 115px !important; }
  [dir="ltr"] .top-logo { margin-left: 0; }
}

/* ── דסקטופ בעברית: פינות נגדיות, באותו גובה ───────────────
   קודם שני הכפתורים הצפים נערמו בפינה השמאלית, הסוכן מעל
   הוואטסאפ, כדי שהאווטר לא יסתיר את "לקטלוג המוצרים"
   שבעמודת ההירו הימנית. עכשיו הסוכן חוזר לפינה הימנית
   (עמר), מול הוואטסאף ולא מעליו.
   **רק הציר האופקי נדרס כאן.** שניהם יושבים על
   `bottom: 34px !important` בכלל משותף (שורה ~1871), ולכן הם
   מקבילים מעצמם — דריסת bottom כאן רק היתה מפרקת את היישור.
   זה בדיוק הסידור שכבר עובד באנגלית בנייד, מרובע לעברית. */
@media (min-width: 1121px) {
  [dir="rtl"] #chat-toggle,
  [dir="rtl"] #chat-panel {
    inset-inline-start: auto !important;
    left: auto !important;
    right: 22px !important;
  }
}