/* בלק צ'רי — כרום האתר (הדר + פוטר) · יישור לפיגמה, 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 {
  /* פס מלא — הלוגו וה-CTA יושבים 32 מקצה-המסך האמיתי, בכל רוחב מסך.
     כליאה ב-1440 ממורכז גרמה ל"הדר ממורכז" במסכים רחבים (דיווח שילה 20.7) —
     בפיגמה ה-Nav הוא רוחב-הפריים המלא עם padding 32 (I499:413;496:305). */
  max-inline-size: none;
  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; }
.main-nav a { font-size: var(--fs-md); font-weight: var(--fw-regular); line-height: 29px; }

/* קבוצת הפעולות: 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; }

/* badge כמות — אינו בפיגמה, נשאר בהחלטת-מוצר. מוקם מחדש לכפתור 24px. */
.header-actions .cart-count {
  inset-block-start: -6px;
  inset-inline-end: -7px;
  z-index: 2;
}

/* 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);
}

/* ── טווח-ביניים: מונע גלישה אופקית בין 961 ל-1199 (הניווט עוד מוצג) ── */
@media (max-width: 1199px) {
  .header-inner { padding-inline: 20px; }
  .main-nav { gap: 18px; }
  .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 */


/* ═══════════════════ פוטר · 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) */
.site-footer h4 {
  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 */
.footer-social .social a {
  inline-size: 32px; block-size: 32px;
  display: grid; place-items: center;
  color: var(--bc-primary);
}
.footer-social .social i { font-size: 32px; } /* 661:22542/22546 — גליפים 30.5-31.8 במיכל 32 */

/* ── פס תחתון · 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;
  }
  /* מועדון (633:3560): כותרת→תיאור 16, תיאור→טופס 24; ה-<br> של עמודת-הדסקטופ מוסתר */
  .footer-club { gap: 0; }
  .footer-club h4 { 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) */
}