/* ש.א אתרים — שכבת סגנון משותפת.
   כל ערכי העיצוב (צבעים/מידות/ריווחים) מקורם בקבצי 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; }
}

/* ---- שלד רספונסיבי: הסף הוא 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; }
  body[data-page="home"] header {
    position: absolute; 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 גובה. */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; 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)
     עצמו, בלי שכבת רקע. "זכוכית חלבית" נטו: מה שנראה מאחורי הטקסט הוא
     התמונה המטושטשת, לא כהיה נוספת עליה. */
  background: transparent;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
          backdrop-filter: blur(14px) saturate(1.15);
  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, והתחתית 22px -> 84.
   פאנל הצ'אט חייב לעלות יחד עם הכפתור, אחרת הוא יושב עליו:
   84 (תחתית) + 108 (כפתור) + 14 (נשימה) = 206. */
a[href*="wa.me"].hov-scale { bottom: 84px !important; }
a[href*="wa.me"].hov-scale img { width: 111px !important; }

#chat-toggle { bottom: 84px !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: 206px !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: 182px !important; }
}

/* ---- הפוטר: יותר אוויר ----
   היה 20px ריפוד ושורה צפופה. הפוטר הוא הדבר האחרון שרואים, ושורה
   דחוסה שם נקראת כמו הערת שוליים ולא כמו סיום.
   הסלקטור הוא `.footer-legal` ולא `footer > div` הגנרי — מאז שנוסף
   `.sf-grid` (4 העמודות) מעל השורה הזו, `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;
  grid-template-columns: repeat(4, 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; }
}