/* בלק צ'רי — כרום האתר (הדר + פוטר) · יישור לפיגמה, 20.7.26
   ─────────────────────────────────────────────────────────────────────────────
   מקור-אמת: figma-extract/2026-07-20/raw/nodes-01.json (מסך Home 348:1850)
     הדר   → 499:413  "Header - TopNavBar"       1440×103
     פוטר  → 661:22479 "Footer"                   1440×467
     מובייל → nodes-03.json, M_Home 633:3322 (הדר 633:3570 · פוטר 633:3512)
   כל מידה כאן נמדדה מה-JSON, לא מהעין. ה-node-id מצוין ליד כל בלוק.

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

   ‼ אזהרה לבעל base.css: הקובץ הזה **יורש** מ-base.css ואינו מחליף אותו —
   ‏`.site-header` (sticky/z-index/רקע), `.header-inner` (display:flex),
   ‏`.brand .brand-logo` (ה-mask של logo.svg), `.main-nav` (display:flex),
   ‏`.icon-btn`, `.cart-count`, `.mobile-menu` — כולם עדיין מגיעים משם.
   מחיקת בלוקי ההדר/פוטר מ-base.css תפרק את הכרום.
   מתו באמת (אין להם צרכן ב-HTML אחרי השינוי) רק שלושה סלקטורים:
   ‏`.footer-grid` · `.footer-brand-card` (על כל צאצאיו) · `.brand .brand-tag`.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════ הדר · node 499:413 ═══════════════════
   Nav (I499:413;496:305): רוחב מלא 1440, padding 24/32, SPACE_BETWEEN, align CENTER.
   סדר RTL: לוגו(ימין) · ניווט(מרכז) · [משתמש · סל · CTA](שמאל).            */

.site-header {
  /* 499:413 · individualStrokeWeights bottom:1 · צבע #d6c3a3 = --bc-gold-soft */
  border-block-end: 1px solid var(--bc-gold-soft);
}

.header-inner {
  /* בפיגמה ה-Nav הוא רוחב-הפריים המלא עם padding 32 (I499:413;496:305) —
     וב-1440 "רוחב הפריים" ו"רוחב התוכן" הם אותו דבר. מעל זה הם נפרדים,
     והקובץ שותק.

     היסטוריה: עד 20.7 ההדר היה כלוא ב-1440 ממורכז — ובמסך רחב הוא נראה
     כ"הדר ממורכז" צף (דיווח שילה 20.7), ולכן שוחרר ל-full-bleed. ‏27.7 הגיע
     הדיווח ההפוך: "יש בעיה במרכוז, יותר מדי חיתוכים, החל בכותרות למעלה".
     שתי התלונות נכונות — שתיהן על **חוסר-התאמה** בין ההדר לעמודת התוכן:
     נמדד ב-2545: הלוגו 32 מקצה-המסך, ועמודת התוכן נגמרת ב-441 מהקצה,
     כלומר הלוגו יושב 408px **מחוץ** לתוכן שמתחתיו.

     הפתרון: כליאה ברוחב עמודת-התוכן הרחבה באתר (--shell-max = 1760, רוחב
     עמוד התפריט מ-22.7). מתחת ל-1760 אין שום שינוי — ההדר עדיין נוגע בקצוות
     עם padding 32, כפי שהוכרע ב-20.7. מעל 1760 הוא מתיישר עם התוכן.
     ⚠ ההכרעה גוברת על 20.7 ורשומה ב-figma-decisions (HEADER-ALIGN-WIDE).

     29.7 (בקשת טליה, "המלל בסרגל לא נמצא בקצוות במסך גדול"): var(--shell-max)
     הוחלף ב-var(--container). הסיבה — WIDE-TIERS מ-28.7 הרחיב את --container
     ל-2100/2432 מעל 2160/2500px (ר' tokens.css), אבל ההדר נשאר קבוע על 1760 —
     בדיוק אותה "בעיית-מרכוז" שהוכרעה כאן ב-27.7, חוזרת מהכיוון ההפוך במסכים
     ענקיים. ‏--container = --shell-max מתחת ל-2160 (tokens.css:120), כך שאין
     שינוי מתחת לסף הזה — רק מעליו ההדר עוקב אחרי התוכן כפי שהכוונה המקורית
     של WIDE-TIERS הצהירה ("ההדר, התוכן והפוטר יישארו ברוחב אחד"). */
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: 32px;
  min-block-size: 103px;
  gap: 24px;
  justify-content: space-between;
}

/* לוגו 180×53 (I499:413;496:325). הנכס logo.svg (viewBox 351×103, יחס 3.41)
   כולל את שורת-המשנה הלטינית — לכן אין תת-כותרת טקסטואלית נפרדת בהדר. */
.brand { flex-direction: row; align-items: center; gap: 0; }
.brand .brand-logo { inline-size: 180px; block-size: 53px; }

/* קישורי ניווט: gap 48, Heebo 400 16px lh 29.3, #1a1a1a (I499:413;496:312/314) */
.main-nav { gap: 48px; margin-inline-start: 0; flex-wrap: wrap; min-inline-size: 0; }
.main-nav a { font-size: var(--fs-md); font-weight: var(--fw-regular); line-height: 29px; white-space: nowrap; }

/* ⚠ ההגנה הזאת הייתה בתוך `@media (max-width: 1199px)` בלבד — ולכן בטווח 1200-1599
   הדפדפן שבר מילים **בתוך** קישור בודד ("חנות/המפעל", "ניהול/עסקי"), והקו-התחתון של
   הפריט הפעיל נשאר מתחת לשורה השנייה. התנאי לא היה הרוחב אלא **תכולת ההדר**:
   ללקוח מחובר ההדר נושא שני רכיבים נוספים (הקישור «ניהול עסקי» + בלוק «שם המשתמש»),
   וההגנה שכוילה לאורח לא כיסתה את המצב הזה. לכן nowrap ו-flex-wrap הם עכשיו
   ללא-תנאי: תווית-ניווט לא נשברת באמצע בשום רוחב, והקבוצה יורדת כיחידה אם צריך.
   ‏(אומת ב-A/B שזה לא נבע מתיקון ה-[hidden] של אייקון-המשתמש: 7/7 נשברו גם בלעדיו.) */

/* ── צמצום ה-gap: רק כשההדר באמת צפוף ──
   ‏27.7: הספים היו 1599 ו-1399, ולכן **ברוחב הפריים של העיצוב עצמו (1440)**
   ה-gap רונדר 24 — חצי מערך הפיגמה. דיווח שילה: "הכותרות מאוד קרובות אחת
   לשנייה, זה לא כך בפיגמה". הספים כוילו למצב-המחובר והוחלו על כולם.

   נמדד על האתר החי (סכום הקישורים + gap מול המקום הפנוי בהדר):
     אורח (7 קישורים):    48 נכנס עד ~1265 · ב-1425 נשארו 163px עודף
     מחובר (8 קישורים):   48 עד ~1560 · 32 עד ~1470 · 24 עד ~1370
   לכן: 48 הוא ברירת-המחדל בכל הרוחבים שבהם הוא נכנס, והצמצום מותנה
   ב**תכולת ההדר** (‏:has על בלוק-המשתמש) ולא בניחוש-רוחב גורף.

   ⚠ הסיבה שהמצב המחובר צפוף אינה בעיצוב: הפיגמה נותנת gap 48 גם לו
   (‏I2008:2872;2008:2711 — 753×36), אבל הדר-הפורטל שלה מכיל עגלה+שם-משתמש
   בלבד, בעוד שבאתר נשארו גם אייקון-החיפוש וגם ה-CTA. ר' openGap
   PORTAL-SEARCH-ICON — סגירתו תחזיר 48 גם במצב המחובר. */
@media (max-width: 1359px) { .main-nav { gap: 24px; } }
@media (max-width: 1559px) { .header-inner:has(#hdrUser:not([hidden])) .main-nav { gap: 32px; } }
@media (max-width: 1469px) { .header-inner:has(#hdrUser:not([hidden])) .main-nav { gap: 24px; } }
@media (max-width: 1369px) { .header-inner:has(#hdrUser:not([hidden])) .main-nav { gap: 12px; } }
/* מחובר = 7 קישורים במקום 6 + בלוק-השם; מתחת ל-1400 צריך gap צר יותר כדי שהקבוצה
   תישאר בשורה אחת במקום לרדת לשתיים. נמדד: 12px מחזיק שורה אחת עד 1024. */
/* הסף האחרון לאורח לפני שהניווט יורד לתפריט-המבורגר (960). ‏1399 היה מוקדם
   מדי: ב-1345 עדיין נשארו 83px עודף עם gap 48. */
@media (max-width: 1199px) { .main-nav { gap: 12px; } }

/* קבוצת הפעולות: Container gap 32 (I499:413;496:306) */
.header-actions { gap: 32px; margin-inline-start: 0; }

/* אייקוני משתמש + סל: 24×24, radius 6, גליף 16×20 בורדו.
   24×24 = מינימום WCAG 2.2 AA ל-Target Size, והריווח ביניהם 32px — עומד בתקן.
   ::before מרחיב את שטח-הלחיצה ל-40×40 בלי לשנות את הפריסה. */
.header-actions .icon-btn {
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-btn);
  overflow: visible;
}
.header-actions .icon-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  transition: background .2s ease;
}
.header-actions .icon-btn:hover { background: none; }
.header-actions .icon-btn:hover::before { background: rgba(59, 15, 26, .07); }
.header-actions .icon-btn i { font-size: 20px; position: relative; z-index: 1; }
/* ⚠ `[hidden]` של הדפדפן הוא `display:none` בספציפיות 0 — והכלל שמעליו מנצח אותו,
   ולכן `#userBtn.hidden = true` (הסקריפט בהדר, כשיש עוגיית bc_portal_name) לא הסתיר
   כלום ובכל עמודי הפורטל הוצגו **שני** אייקוני-משתמש זה לצד זה. אותה תקלה בדיוק כבר
   טופלה נקודתית ל-`.hdr-user-menu[hidden]` למטה; זה התיקון המקביל לאייקון. */
.header-actions .icon-btn[hidden] { display: none; }

/* חיווי-העגלה מוקם ב-base.css לפי הגיאומטריה של רכיב `Icon Button` בפיגמה (24×24),
   וזה בדיוק גודל הכפתור כאן — אין צורך בהיסט נוסף. */

/* CTA: 177×48, r54, fill #3b0f1a, padding 12/32, Heebo 400 18px
   (I499:413;496:307 + ;496:285). line-height 24 כדי ש-12+24+12=48 בדיוק. */
.btn-primary.header-cta {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: 24px;
  padding-block: 12px;
  padding-inline: 32px;
  border-radius: var(--radius-hero);
}

/* ── משתמש עסקי מחובר · וריאנט "Business user logged in" ──────────────────
      מחליף את אייקון-המשתמש אחרי התחברות לפורטל. מוצג ע"י הסקריפט בהדר
      לפי עוגיית-התצוגה bc_portal_name (קוסמטית בלבד — ראו header.html). */
.hdr-user { position: relative; }

.hdr-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 8px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--bc-ink);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 20px;
  cursor: pointer;
}
.hdr-user-btn:hover { background: rgba(59, 15, 26, .07); }
.hdr-user-btn i { font-size: 18px; }
.hdr-user-btn .fa-chevron-down { font-size: 12px; }
.hdr-user-name {
  max-inline-size: 12ch;               /* שם ארוך לא דוחף את ה-CTA מהשורה */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdr-user-menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;                 /* RTL: נפתח לכיוון פנים-המסך */
  z-index: 60;
  min-inline-size: 190px;
  display: flex;
  flex-direction: column;
  padding-block: 8px;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-pop);
}
.hdr-user-menu[hidden] { display: none; }
.hdr-user-menu a,
.hdr-user-menu button {
  padding-block: 10px;
  padding-inline: 16px;
  border: 0;
  background: none;
  color: var(--bc-ink);
  font-family: inherit;
  font-size: var(--fs-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.hdr-user-menu a:hover,
.hdr-user-menu button:hover { background: var(--bc-cream); }
.hdr-user-menu button { color: var(--bc-primary); }

@media (max-width: 960px) {
  /* במובייל ההדר צר — נשאר האייקון בלבד, בלי השם (סדר RTL מהפיגמה נשמר) */
  .hdr-user-name,
  .hdr-user-btn .fa-chevron-down { display: none; }
  .hdr-user-btn { padding-inline: 8px; }
}

/* ── טווח-ביניים: מונע גלישה אופקית בין 961 ל-1199 (הניווט עוד מוצג) ── */
@media (max-width: 1199px) {
  .header-inner { padding-inline: 20px; }
  /* בלי flex-wrap+min-inline-size:0 כאן, main-nav (flex item בלי הגנה, בניגוד לכל שאר
     ילדי-flex בקובץ — ר' footer-cols/footer-quicknav/footer-club) נדחק ע"י הדפדפן לשבור
     מילה בתוך קישור בודד ('חבילות אירוח' וכו') כי אין לו לאן להתכווץ כקבוצה. white-space:
     nowrap על הקישורים מונע שבירת-מילה; flex-wrap מאפשר לכל השורה לרדת יחד כיחידה
     כשאין מקום — אותה קבוצה, לא קישור בודד שנשבר. */
  .main-nav { gap: 12px; }
  .main-nav a { white-space: nowrap; }
  .header-actions { gap: 16px; }
  .btn-primary.header-cta { padding-inline: 20px; }
}

/* ── הדר מובייל · node 633:3570 (413×64, padding-inline 16, SPACE_BETWEEN)
      סדר RTL: המבורגר(ימין) · לוגו 119×35(מרכז) · [סל · משתמש](שמאל)
      קו-התחתית במובייל ורוד #d6c2c4 (--bc-rose-line) — שיטתי בכל פריימי-המובייל
      (הדר + מפרידי-מגירה), יושם 20.7 כנאמנות-מילולית לפיגמה; ממתין לאשרור מרינה. ── */
@media (max-width: 960px) {
  .site-header { border-block-end-color: var(--bc-rose-line); }
  .header-inner { padding-inline: 16px; gap: 12px; min-block-size: 64px; }
  .brand .brand-logo { inline-size: 119px; block-size: 35px; }
  .header-actions { gap: 16px; }
  /* המבורגר/סגירה נשארים 40px — יעדי-מגע, ולא חלק מקבוצת-הפעולות */
  .nav-toggle, .mobile-menu .icon-btn { inline-size: 40px; block-size: 40px; }
}

/* לוגו במגירת המובייל: 128×38 (node 628:405, מסך "Menu open") */
.mobile-menu .brand .brand-logo { inline-size: 128px; block-size: 38px; }
.mobile-menu .mm-foot .mm-copy { font-size: var(--fs-sm); color: #524345; } /* 628:489 */

/* ── מגירת מובייל: ראש דביק + גלילה אחידה לכל התוכן (31.7.26, דיווח שילה) ──
   base.css נותן ל-<nav> גלילה עצמאית משלו (flex:1 + overflow-y:auto) בעוד
   .mm-foot (סושיאל+זכויות+משפטי) קבוע-בגובהו ותמיד-גלוי-במלואו, ואינו מתכווץ.
   על מסך נמוך (≈660px גובה-תצוגה בפועל — סקאלת iPhone עם שורת-הכתובת/סרגל-
   הכלים של ספארי גלויים) .mm-foot לבדו תופס ~205px, ולכן ל-nav נשארים רק
   ~390px — פחות מ-6 שורות (תקציב ~74px לפריט) — הפריט השישי ("הסיפור שלנו")
   נחתך בדיוק במקום שבו הפוטר-הפנימי מתחיל, ונראה כאילו "פוטר מציץ מתחת"
   (דיווח שילה, iPhone, 31.7 — שוחזר חי ב-Playwright, 390×660: 5 פריטים בלבד
   נכנסו לפני שה-mm-foot "בלע" את שאר הגובה).
   ⚠ זה **לא** אותו באג-דביק שכבר טופל למעלה (translateY דלף בכרום-אנדרואיד,
   5.7.26) — זו תחרות-שטח פנימית בין nav ל-mm-foot, לא בעיית גובה-דינמי.

   התיקון: nav לא גולל בבידוד — **כל המגירה גוללת כיחידה אחת**, וראש-המגירה
   (mm-head, הלוגו+כפתור-הסגירה) בלבד נשאר דביק למעלה. כך רשימת-הניווט מקבלת
   קודם את מלוא השטח הפנוי (השורה הראשונה בגלילה), והפוטר-הפנימי בא **אחריה**
   בגלילה טבעית — לא גוזל שטח מובטח-מראש שדוחס את הרשימה. על iPhone SE
   (667px) זה משאיר את **כל שבעת פריטי-הניווט** גלויים בלי שום גלילה
   (64 ראש + 7×74 ≈ 582px < 667) — רק הפוטר-הפנימי דורש גלילה קצרה, במקום
   שהניווט עצמו ייחתך. אין שינוי במבנה ה-DOM — רק מי-גולל. */
.mobile-menu {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu .mm-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--bc-cream);
}
.mobile-menu nav {
  flex: none;
  overflow-y: visible;
  min-block-size: 0;
}
/* מסך גבוה (תוכן קצר מהמגירה): בלי flex:1 על nav הפוטר-הפנימי היה "צף" מיד אחרי
   הפריט האחרון ומשאיר קרם ריק מתחתיו. margin-auto מחזיר את העיגון-לתחתית של קודם —
   ופסיבי לגמרי כשהתוכן גבוה מהמסך (אז הוא פשוט זורם בגלילה). */
.mobile-menu .mm-foot { margin-block-start: auto; }

/* ═══════════════════ פוטר · node 661:22479 ═══════════════════ */

.site-footer {
  background: var(--bc-gray-bg);
  margin-block-start: var(--space-section);
}

/* Frame 59 (661:22480): padding 48, gap 125, align CENTER.
   ה-gap מוגדר ב-clamp כדי שיהיה 125 בדיוק ברוחב-העיצוב 1440 ולא ישבור מסכים צרים. */
.footer-main {
  max-inline-size: 1440px;
  margin-inline: auto;
  padding: 48px;
  display: flex;
  align-items: center;
  gap: clamp(48px, 8.7vw, 125px);
}

/* Frame 84 (661:22481): gap 48, מיושר לקצה (בעברית — לשמאל) */
.footer-cols {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 48px;
}

/* 661:22482 "Frame 73" (מועדון) = VERTICAL gap 32 · 661:22492 "Frame 80" (ניווט)
   = HORIZONTAL gap 32 של שתי עמודות 200. שתיהן מיושרות לימין (align MAX). */
.footer-quicknav,
.footer-club {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  min-inline-size: 0;
  text-align: start;
}
.footer-club { flex: 1 1 467px; max-inline-size: 467px; }  /* פיגמה: 467 */
.footer-quicknav { flex: 0 1 auto; }

/* כותרות עמודה: Heebo 500 18px lh28 #1a1a1a (661:22483 / 661:22499)
   ‏.footer-title ולא h4 — התגית שונתה ל-h2 מטעמי מבנה, העיצוב לא. */
.site-footer .footer-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 28px;
  color: var(--bc-ink);
  margin: 0;
}

/* שתי עמודות ניווט 200px, gap 32 אופקי / 20 אנכי; 4 פריטים בעמודה הימנית
   (661:22500 = דף הבית/תפריט/חבילות/גלריה · 661:22494 = סיפור/חנות/צור קשר) */
.footer-nav {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: 20px 32px;
  justify-content: start;
}
.footer-nav a {
  font-size: var(--fs-md);
  line-height: 24px;
  color: var(--bc-ink-mute);   /* פיגמה #444444 */
}

.footer-club p {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 24px;
  color: var(--bc-ink-mute);
}

/* טופס המועדון (661:22486): HORIZONTAL gap 16, גובה 54, radius 2.
   כפתור 93×54 שחור מלא · שדה 358×54 לבן עם מסגרת שחורה 1px. */
.club-form {
  display: flex;
  gap: 16px;
  margin: 0;
  inline-size: 100%;
}
.club-form input {
  flex: 1;
  min-inline-size: 0;
  block-size: 54px;
  padding: 16px;
  border: 1px solid #000;              /* פיגמה 661:22489 stroke #000000 */
  border-radius: var(--radius-hair);
  background: var(--bc-white);
  font-size: var(--fs-sm);
}
.club-form .btn {
  flex: 0 0 93px;
  block-size: 54px;
  padding: 0;
  border-radius: var(--radius-hair);
  background: #000;                    /* פיגמה 661:22487 fill #000000 */
  color: var(--bc-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
}

/* ── כרטיס סושיאל · node 661:22505 — 295×299, r16, מסגרת זהב, gap 32 ──
   padding בפיגמה 32/48, אבל התוכן (לוגו 217 / טקסט 242) חורג ממנו כי
   clipsContent=false; 26px משחזר את הרנדר בפועל (295 - 242 חלקי 2). */
.footer-social {
  flex: 0 0 295px;
  inline-size: 295px;
  min-block-size: 299px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  border: 1px solid var(--bc-gold);
  border-radius: var(--radius-lg);
  text-align: center;
}
/* לוגו גדול 217×64 (661:22507) */
.footer-social .footer-logo {
  display: block;
  inline-size: 217px;
  block-size: 64px;
  background-color: var(--bc-primary);
  -webkit-mask: url('/assets/logo.svg') no-repeat center / contain;
          mask: url('/assets/logo.svg') no-repeat center / contain;
}
.footer-social .fs-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;               /* 661:22537 itemSpacing */
}
.footer-social .fs-title {
  margin: 0;
  font-size: var(--fs-lg); /* 18px */
  font-weight: var(--fw-regular);
  line-height: 20px;
  color: var(--bc-ink);
}
.footer-social .social { display: flex; gap: 24px; }   /* 661:22541 */
/* flex ולא grid: הגליף רחב 40 במיכל 32, ובגריד עודף-הרוחב נשפך כולו לצד-הסוף (שמאל ב-RTL)
   ומזיז את האייקון 4px מהמרכז. flex מחלק אותו שווה לשני הצדדים. */
.footer-social .social a {
  inline-size: 32px; block-size: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bc-primary);
}
.footer-social .social i { font-size: 32px; } /* 661:22542/22546 — גליפים 30.5-31.8 במיכל 32 */

/* ── שורת המסמכים המשפטיים ──
   אינה בפיגמה: תוספת-חובה (תקנה 35 — הצהרת נגישות "במקום בולט";
   חוק הגנת הצרכן — קישור ייעודי לביטול עסקה). ממוקמת מעל הפס התחתון
   ומשתמשת באותו רקע ובאותו divider זהב, כדי שתיקרא כחלק מהפוטר. */
.footer-legal {
  background: var(--bc-gray-bg);
  border-block-start: 1px solid var(--bc-gold-soft);
}
.footer-legal-inner {
  max-inline-size: 1440px;
  margin-inline: auto;
  padding: 14px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--fs-sm);
}
.footer-legal-inner a { color: var(--bc-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal-inner a:hover { color: var(--bc-primary); }
.footer-legal-inner .sep { color: var(--bc-gold); }
/* שורת דרכי-הביטול — צמודה לקישור הייעודי כדרישת סעיף 14ט(ה)(2)+(ו) */
.footer-cancel-info {
  max-inline-size: 1440px;
  margin: 0 auto;
  padding: 0 48px 14px;
  text-align: center;
  font-size: var(--fs-2xs);
  line-height: 1.7;
  color: var(--bc-ink-soft);
}
.footer-cancel-info a { color: var(--bc-ink); text-decoration: underline; text-underline-offset: 2px; }
.footer-cancel-info a:hover { color: var(--bc-primary); }
@media (max-width: 760px) { .footer-cancel-info { padding-inline: 16px; } }
@media (max-width: 760px) {
  .footer-legal-inner { padding-inline: 16px; }
  .footer-legal-inner .sep { display: none; }
  .footer-legal-inner { gap: 10px 18px; }
}
/* הפס התחתון כבר נושא את ה-divider שלו — כשהשורה המשפטית מעליו, מבטלים כפילות קו. */
.footer-legal + .footer-bottom { border-block-start: 0; }

/* ── פס תחתון · node 661:22550 "Frame 50" — 72px, padding 24/48,
      border-top 1px #d6c3a3 = ה-divider הזהב, ברוחב מלא ── */
.footer-bottom {
  display: block;
  padding-block: 0;
  border-block-start: 1px solid var(--bc-gold-soft);
  background: var(--bc-gray-bg);
  font-size: var(--fs-md);
  color: var(--bc-ink);
}
.footer-bottom-inner {
  max-inline-size: 1440px;
  margin-inline: auto;
  min-block-size: 72px;
  padding: 24px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 90px;
  flex-wrap: wrap;
}
/* © בימין (inline-start), פרטי-קשר בשמאל — כמו בפיגמה */
.footer-bottom .copyright {
  order: 0;
  margin-inline-end: 0;
  font-size: var(--fs-sm);   /* 661:22565 — 14px */
  color: var(--bc-ink);
}
.footer-contact { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
/* דסקטופ (697:1788, 661:22558): בטלפון ובמייל האייקון משמאל לערך; בכתובת מימין.
   במובייל (826:3449) שלושתם אייקון מימין — reset ב-@960. */
.footer-contact a.item { flex-direction: row-reverse; }
.footer-contact .item {
  display: inline-flex; align-items: center;
  gap: 12px;                 /* 697:1787 / 661:22557 / 661:22561 itemSpacing */
  line-height: 24px;         /* פריט 24px גובה — שומר על פס 72px */
  color: var(--bc-ink);
}
/* line-height:1 שומר על שורת 24px ולכן על גובה הפס 72 בדיוק */
.footer-contact .item i { font-size: 20px; line-height: 1; color: #000; } /* פיגמה: שחור בשני הפריימים (697:1789, 826:3456) */

/* ── טווח-ביניים: העמודות עוברות לשורה משלהן לפני שהן נדחסות ── */
@media (max-width: 1199px) and (min-width: 961px) {
  .footer-main { flex-wrap: wrap; gap: 40px; justify-content: center; }
  .footer-cols { flex: 1 1 100%; justify-content: space-between; }
}

/* ── פוטר מובייל · node 633:3512 (Frame 97: padding 24/20, gap 24)
      בפיגמה הכול מיושר לימין (align MAX), הכרטיס נמתח לרוחב, וטור
      "ניווט מהיר" אינו מופיע — כאן הוא נשמר ומועבר לסוף. ── */
@media (max-width: 960px) {
  /* 633:3512: הפוטר צמוד לסקשן האחרון (ללא רצועת-קרם); padding-top כולל 72 */
  .site-footer { margin-block-start: 0; }
  .footer-main {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 72px 20px 24px;
    text-align: start;
  }
  /* עמודת "ניווט מהיר" — absent-by-design במובייל: 20 מופעים בפריימי הדסקטופ,
     **אפס** בכל פריימי ה-M_* (26.7). replaced-by: תפריט ההמבורגר בהדר, שמכיל את
     אותם קישורים. שורת המסמכים המשפטיים (.footer-legal) נשארת — חובת חוק בכל עמוד. */
  .footer-quicknav { display: none; }

  /* מועדון (633:3560): כותרת→תיאור 16, תיאור→טופס 24; ה-<br> של עמודת-הדסקטופ מוסתר */
  .footer-club { gap: 0; }
  .footer-club .footer-title { margin-block-end: 16px; }
  .footer-club p { margin-block-end: 24px; }
  .footer-club p br { display: none; }
  .footer-social {
    flex: 0 0 auto;
    inline-size: 100%;
    max-inline-size: 373px;   /* פיגמה 633:3514 */
    margin-inline: auto;
  }
  .footer-cols {
    flex-direction: column-reverse;  /* מועדון-לקוחות מיד אחרי הכרטיס, כמו בפיגמה */
    align-items: stretch;
    gap: 24px;
  }
  .footer-quicknav, .footer-club {
    flex: 0 0 auto;
    inline-size: 100%;
    max-inline-size: none;
    align-items: flex-start;
    gap: 24px;
  }
  .footer-nav { justify-content: start; justify-items: start; }
  .club-form { max-inline-size: none; margin-inline: 0; }

  /* 826:3450: מפריד-הזהב במובייל יושב מעל שורת ה-© בלבד, בתוך ה-padding — לא full-bleed */
  .footer-bottom { border-block-start: 0; }
  .footer-bottom-inner {
    flex-direction: column-reverse;   /* פרטי-קשר מעל ה-© */
    align-items: flex-start;
    gap: 24px;
    padding: 24px 20px;
  }
  .footer-bottom .copyright {
    inline-size: 100%;
    border-block-start: 1px solid var(--bc-gold-soft);
    padding-block-start: 16px;
  }
  .footer-contact { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-contact a.item { flex-direction: row; } /* מובייל: אייקון מימין בכל השלושה (826:3449) */
}

/* ── מסך רחב ≥1600px · 22.7.26 — יישור הפוטר לרוחב-התוכן. ──
   27.7: הערך הקשיח 1600 הוחלף ב---shell-max. עד אז הפוטר היה 1600 בזמן
   שעמוד התפריט היה 1760 וההדר full-bleed — שלושה רוחבים באותו עמוד.
   29.7: --shell-max → --container, אותו תיקון ואותה סיבה כמו .header-inner
   (ר' ההערה שם) — מעל 2160/2500 הפוטר עקב היה נשאר צר מהתוכן. */
@media (min-width: 1600px) {
  .footer-main { max-inline-size: var(--container); }
  .footer-bottom-inner { max-inline-size: var(--container); }
}

/* ══ באנר ההסכמה לעוגיות שיווקיות · 3.8.26 ═══════════════════════════════════
   מוסתר ב-hidden ונפתח ע"י js/consent.js רק כשמוגדר מזהה-פיקסל.

   ⚠ שני הכפתורים **חייבים** להישאר זהים לחלוטין — אותו רקע, אותה מסגרת, אותו
     גודל, אותו משקל. "אישור" בולט מול "דחייה" הוא בדיוק הדפוס שנקנס ב-150M€
     (Google) וב-60M€ (Facebook). אל תוסיף לאחד מהם צבע-מותג.
   ⚠ `hidden` נכנע לכל כלל-מחלקה עם display (לקח feedback_hidden_attr_loses_to_class_display),
     ולכן הסלקטור כאן מפורש: [hidden] אחרי המחלקה. */
.bc-consent {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 900;                       /* מתחת למודאלים (1000+), מעל התוכן */
  background: var(--bc-cream-warm, #f4ede2);
  border-block-start: 2px solid var(--bc-gold, #c6a96b);
  box-shadow: 0 -6px 24px rgba(59, 15, 26, .14);
  padding: 16px clamp(16px, 4vw, 40px);
  /* iOS: מעל סרגל-המערכת התחתון */
  padding-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
}
.bc-consent[hidden] { display: none; }

.bc-consent-inner {
  max-inline-size: var(--container, 1344px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
}
.bc-consent-text { flex: 1 1 320px; min-inline-size: 0; }
.bc-consent-text strong {
  display: block;
  font-size: 16px;
  color: var(--bc-wine, #3b0f1a);
  margin-block-end: 4px;
}
.bc-consent-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bc-ink, #1f1418);
}
.bc-consent-text a { color: var(--bc-wine, #3b0f1a); text-decoration: underline; }

.bc-consent-actions { display: flex; gap: 12px; flex: 0 0 auto; }
.bc-consent-btn {
  /* ערכים זהים לשני הכפתורים — ראו האזהרה למעלה */
  min-inline-size: 116px;
  padding: 11px 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--bc-wine, #3b0f1a);
  background: #fff;
  border: 1.5px solid var(--bc-wine, #3b0f1a);
  border-radius: 8px;
  cursor: pointer;
}
.bc-consent-btn:hover { background: var(--bc-cream, #f7f2ea); }
.bc-consent-btn:focus-visible { outline: 3px solid var(--bc-gold, #c6a96b); outline-offset: 2px; }

/* ── פאנל ההעדפות ("נהל העדפות") · 9.8.26 ──────────────────────────────────
   ⚠ הבאנר הוא `position: fixed` בתחתית המסך, ופתיחת הפאנל מכפילה את גובהו.
     במובייל נמוך זה חוסם את כל המסך, ולכן התקרה + הגלילה הפנימית כאן אינן
     ליטוש אלא תנאי לכך שאפשר יהיה בכלל להגיע לכפתור "שמירת ההעדפות". */
.bc-consent { max-block-size: 85dvh; overflow-y: auto; }

.bc-consent-prefs {
  max-inline-size: var(--container, 1344px);
  margin-inline: auto;
  margin-block-start: 16px;
  padding-block-start: 16px;
  border-block-start: 1px solid rgba(59, 15, 26, .18);
}
.bc-consent-prefs[hidden] { display: none; }

.bc-consent-cats { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.bc-consent-cats legend {
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--bc-wine, #3b0f1a);
  margin-block-end: 10px;
}

.bc-consent-cat {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-block-end: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bc-ink, #1f1418);
  cursor: pointer;
}
/* ⚠ inline-size/block-size מפורשים: בלעדיהם התיבה נמעכת ב-flex כשהטקסט לצידה
   ארוך (‏flex-shrink ברירת-מחדל 1 חל גם על input). */
.bc-consent-cat input {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 2px;
  accent-color: var(--bc-wine, #3b0f1a);
}
/* תיבה מושבתת שנראית פעילה מטעה. העמעום הוא ההודעה "זו הצהרה, לא בחירה". */
.bc-consent-cat input:disabled { cursor: not-allowed; opacity: .65; }
.bc-consent-cat input:disabled + span { cursor: default; }
.bc-consent-cat strong { color: var(--bc-wine, #3b0f1a); }

.bc-consent-prefs-note {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--bc-ink-soft, #6b5a60);
}
.bc-consent-prefs-note[hidden] { display: none; }

/* ── כפתור הסגירה ───────────────────────────────────────────────────────────
   ⚠ **`inset-inline-*` ולא `right`/`left`.** הבאנר הוא RTL, ומאפיין פיזי היה
     מציב את הכפתור בצד הלא-נכון — מעל שורת הכפתורים במקום בפינת הטקסט
     (‏feedback_logical_inset_needs_logical_partner).
   ⚠ מטרת-נגיעה 44px גם כשהסימן קטן — תקנה 35 ו-WCAG 2.5.8.
   ⚠ ההיסט של `.bc-consent-text` הוא מה שמונע חפיפה, ולא חישוב-גובה: הכפתור
     תופס פינה בגודל קבוע, והטקסט פשוט מתחיל אחריה. אל תחליף אותו בהזחה של
     שורת-הכותרת בלבד — הפסקה שמתחתיה חוזרת לזחול מתחת לכפתור. */
/* ⚠ **56 ולא 44.** ההיסט חייב לכסות את רוחב הכפתור **ואת הריווח שלו מהקצה**
   (‏8 + 44 = 52). ב-44 נמדד חפיפה של 8px על תחילת הכותרת — כלומר על האות
   הראשונה של "עוגיות", שהיא בקצה הימני ב-RTL. */
.bc-consent-text { padding-inline-start: 56px; }
.bc-consent-close {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  color: var(--bc-wine, #3b0f1a);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.bc-consent-close:hover { background: rgba(59, 15, 26, .07); }
.bc-consent-close:focus-visible { outline: 3px solid var(--bc-gold, #c6a96b); outline-offset: 2px; }
/* ⚠ העוגן הוא **`.bc-consent-inner` ולא `.bc-consent`.** שניהם היו "עובדים"
   (‏.bc-consent הוא fixed), אבל העוטף החיצוני נמתח על כל רוחב המסך בעוד התוכן
   מוגבל ל-‎--container‎ וממורכז — ובמסך רחב הכפתור היה נוחת כ-280px מהטקסט
   שהוא אמור לסגור. */
.bc-consent-inner { position: relative; }

@media (max-width: 640px) {
  .bc-consent-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .bc-consent-actions { justify-content: stretch; }
  .bc-consent-btn { flex: 1 1 0; }
  /* ⚠ שלושה כפתורים בשורה אחת במובייל = כ-33% רוחב כל אחד, ו"דחה עוגיות
     שיווקיות" נשבר לשלוש שורות בעוד "קבל הכל" נשאר בשורה אחת. הפער הזה הוא
     בדיוק אי-הסימטריה שהאזהרה למעלה אוסרת — לכן במובייל הם נערמים. */
  .bc-consent-actions { flex-direction: column; }
  .bc-consent-btn { inline-size: 100%; }
}

/* ── מועדון הלקוחות: טלפון + הסכמת דיוור · 3.8.26 ────────────────────────────
   ⚠ הטופס הוא שורת flex עם flex-wrap (turnstile.js מזריק שם את הווידג'ט ומסתמך
     על העטיפה — ראו ההערה בקובץ ההוא). הפריטים החדשים מקבלים flex-basis:100%
     כדי לקבל שורה משלהם ולא להידחס לצד הכפתור. */
.club-form .club-phone { flex: 1 1 100%; }
.club-consent {
  flex: 1 1 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.club-consent input[type="checkbox"] {
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: 2px;            /* יישור לשורה הראשונה של הטקסט */
  accent-color: var(--bc-gold, #c6a96b);
}
.club-consent span { flex: 1 1 auto; min-inline-size: 0; }