/* ============================================================================
   Arova · ניווט — סרגל עליון, תפריט מובייל ופוטר
   כל הערכים מגיעים מ-design/tokens/tokens.css.
   ============================================================================ */


/* ============================================================================
   סרגל עליון
   ============================================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-block-end: var(--border-hair) solid transparent;
  transition: border-color var(--duration-base) var(--ease-out),
              background   var(--duration-base) var(--ease-out);
}

/* הקו התחתון מופיע רק אחרי גלילה — בראש העמוד הסרגל מתמזג עם ההיירו */
.site-header.is-scrolled {
  border-block-end-color: var(--color-line);
  background: rgba(246, 240, 234, .92);
  backdrop-filter: blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-height);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* אזור לחיצה נגיש — הלוגו הוא קישור לעמוד הבית */
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  letter-spacing: .14em;
  color: var(--color-text);
  flex-shrink: 0;
}

/* ---- ניווט ראשי ---- */
.site-nav { margin-inline-start: auto; }

.site-nav__list {
  display: flex;
  gap: var(--space-7);
  font-size: var(--text-base);
}

/* צבע טקסט מלא ולא מרוכך, ומשקל בינוני — הניווט הוא מידע ולא קישוט */
.site-nav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
  font-weight: var(--weight-medium);
  padding-block: var(--space-2);
}

/* קו זהב דק שנפתח מתחת לפריט — הרמז הוויזואלי המרכזי של הסרגל */
.site-nav__list a::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--duration-base) var(--ease-out);
}
.site-nav__list a:hover        { color: var(--color-text); }
.site-nav__list a:hover::after { width: 100%; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-inline-start: var(--space-5);
}

.site-header__cta { min-height: 48px; padding-inline: var(--space-6); font-size: var(--text-sm); }


/* ---- כפתור התפריט במובייל ---- */
.menu-btn {
  display: none;              /* מוצג רק במובייל */
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px; height: 48px;  /* אזור לחיצה נגיש */
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.menu-btn__bar {
  display: block;
  width: 24px; height: 1.5px;
  margin-inline: auto;
  background: var(--color-text);
  transition: transform var(--duration-base) var(--ease-out);
}


/* ============================================================================
   מגירת התפריט במובייל
   ============================================================================ */

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(30, 21, 15, .45);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.menu-backdrop.is-open { opacity: 1; }

.mobile-menu {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;               /* נפתחת מהצד שממנו קוראים */
  z-index: var(--z-modal);
  width: min(86vw, 340px);
  padding: var(--space-6) var(--space-6) var(--space-8);
  background: var(--color-surface);
  border-inline-start: var(--border-hair) solid var(--color-line);
  display: flex;
  flex-direction: column;

  /* מוסתרת מחוץ למסך. הכיוון מתהפך אוטומטית בין עברית לאנגלית. */
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-luxe);
}
[dir="rtl"] .mobile-menu { transform: translateX(-100%); }

.mobile-menu.is-open,
[dir="rtl"] .mobile-menu.is-open { transform: translateX(0); }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-6);
}
.mobile-menu__title {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.menu-close {
  width: 44px; height: 44px;
  font-size: 1.7rem;
  line-height: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-text);
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mobile-menu__list a {
  display: block;
  padding-block: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  border-block-end: var(--border-hair) solid var(--color-line);
}
.mobile-menu__list a:hover { color: var(--color-accent-text); }

.mobile-menu__cta { margin-block-start: auto; width: 100%; }


/* ============================================================================
   נקודת המעבר למובייל
   ============================================================================ */

@media (max-width: 960px) {
  .site-nav          { display: none; }
  .site-header__cta  { display: none; }
  .menu-btn          { display: flex; }
  .site-header__actions { margin-inline-start: auto; }
}


/* ============================================================================
   פוטר
   ============================================================================ */

.site-footer {
  background: var(--color-surface-dark);
  padding-block: var(--space-10) var(--space-7);
  margin-block-start: var(--section-gap);
}

.site-footer__brand {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-invert);
  max-width: 40ch;
  margin-block-end: var(--space-9);
}

.site-footer__cols {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  padding-block-end: var(--space-8);
  border-block-end: var(--border-hair) solid var(--color-line-invert);
}

.site-footer__col-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-soft);
  margin-block-end: var(--space-4);
}

.site-footer__col ul { display: flex; flex-direction: column; }

/* min-height במקום מרווח בין הפריטים: כך כל קישור הוא אזור לחיצה של 44
   פיקסלים לפחות, כנדרש לנגישות במגע, והמרווח הוויזואלי נשמר. */
.site-footer__col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  color: rgba(234, 219, 206, .8);
}
.site-footer__col a:hover { color: var(--color-accent-soft); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding-block-start: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-invert-soft);   /* היה .6 — 4.58:1, על הגבול */
}
.site-footer__legal { margin: 0; color: inherit; max-width: none; }
.site-footer__copy  { margin: 0; color: inherit; }


/* ---- עמודת יצירת הקשר בפוטר ---- */
.site-footer__contact { display: flex; flex-direction: column; }

.site-footer__contact li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;                      /* אזור לחיצה נגיש לטלפון ולדוא״ל */
  font-size: var(--text-sm);
  color: rgba(234, 219, 206, .8);
}

.site-footer__contact a          { color: inherit; }
.site-footer__contact a[href]:hover { color: var(--color-accent-soft); }

.site-footer__contact-label {
  color: var(--color-text-invert-soft);  /* היה .55 — 4.10:1, נכשל */
  font-size: var(--text-xs);
}

/* פריט פוטר שאין לו עדיין עמוד — אותו מראה, בלי התנהגות של קישור */
[data-footer-list] span {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--color-text-invert-soft);   /* היה .5 — 3.68:1, נכשל */
}

/* ---- הלוגו בסרגל ובפוטר ---- */

/* currentColor בתוך ה-SVG מאפשר ללוגו לרשת את צבע הטקסט של ההקשר,
   כך שאותו סימן עובד על רקע בהיר וכהה בלי גרסה שנייה. */
.site-header__brand {
  width: 232px;   /* הוגדל לנוכחות. ה-viewBox של הלוגו הותאם באותו יחס */
  flex-shrink: 0;
  color: var(--color-text);
}
.site-header__brand svg { width: 100%; height: auto; display: block; }

.site-footer__logo {
  width: 230px;   /* זהה לרוחב ה-viewBox */
  margin-block-end: var(--space-6);
}
.site-footer__logo svg { width: 100%; height: auto; display: block; }

@media (max-width: 620px) {
  /* גם במובייל לא יורדים הרבה מתחת ל-1:1 — הכיווץ הוא שהרג את קו הזהב */
  .site-header__brand { width: 190px; }
}


/* ============================================================================
   קישור העגלה
   ============================================================================ */

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;                    /* אזור לחיצה נגיש */
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-out);
}
.cart-link:hover { color: var(--color-accent-text); }

.cart-link__icon { width: 24px; height: 24px; }

/* מונה הפריטים — עיגול זהב קטן בפינה */
.cart-link__count {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--clay-900);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}


/* ============================================================================
   כפתור הוספה לעגלה בכרטיס המוצר
   ============================================================================ */

.card__body .add_to_cart_button,
.card__body .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-block-start: var(--space-4);
  padding-inline: var(--space-5);
  background: transparent;
  border: var(--border-hair) solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-base);
  /* מעל שכבת הקישור שפורשת על הכרטיס, אחרת הלחיצה נבלעת */
  position: relative;
  z-index: 2;
}
.card__body .add_to_cart_button:hover,
.card__body .button:hover {
  border-color: var(--color-text);
  background: var(--color-surface-alt);
}

/* סימון "נוסף לעגלה" שוורדפרס מוסיף אחרי הוספה */
.card__body .added_to_cart {
  display: inline-block;
  margin-block-start: var(--space-2);
  margin-inline-start: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-accent-text);
  position: relative;
  z-index: 2;
}


/* ============================================================================
   טופס ההוספה לעגלה בעמוד המוצר
   ============================================================================ */

.product__cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

.product__cart .quantity input {
  width: 84px;
  min-height: 48px;
  padding: var(--space-3);
  text-align: center;
  background: var(--color-surface-raised);
  border: var(--border-hair) solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--color-text);
}

.product__cart .single_add_to_cart_button {
  min-height: 48px;
  padding-inline: var(--space-7);
  background: var(--color-surface-dark);
  color: var(--color-text-invert);
  border: var(--border-hair) solid var(--color-surface-dark);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: var(--transition-base);
}
.product__cart .single_add_to_cart_button:hover {
  background: transparent;
  color: var(--color-text);
}

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


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

.woocommerce .button,
.card__body .add_to_cart_button,
.single_add_to_cart_button {
  transform: translateY(0) scale(1);
  box-shadow: 0 0 0 rgba(30, 21, 15, 0);
  transition: background     var(--duration-fast) var(--ease-out),
              color          var(--duration-fast) var(--ease-out),
              border-color   var(--duration-fast) var(--ease-out),
              letter-spacing var(--duration-base) var(--ease-out),
              transform      var(--duration-slow) var(--ease-pop),
              box-shadow     var(--duration-slow) var(--ease-luxe);
}

.woocommerce .button:hover,
.card__body .add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.woocommerce .button:focus-visible,
.card__body .add_to_cart_button:focus-visible,
.single_add_to_cart_button:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: var(--shadow-hover);
  letter-spacing: 0.10em;
}

.woocommerce .button:active,
.card__body .add_to_cart_button:active,
.single_add_to_cart_button:active {
  transform: translateY(0) scale(.97);
  box-shadow: var(--shadow-sm);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce .button,
  .card__body .add_to_cart_button,
  .single_add_to_cart_button {
    transform: none !important;
    box-shadow: none !important;
  }
}


/* ============================================================================
   התפריט העליון — שבירת שורות
   ----------------------------------------------------------------------------
   נמדד: ארבעה מתוך ששת הקישורים בגובה 66px במקום 44 — כלומר נשברו
   לשתי שורות. "למלונות ולעסקים" ו"איך זה עובד" נחתכו באמצע וזה נראה
   כמו תקלה. פריט ניווט לעולם אינו נשבר.
   ============================================================================ */

.site-nav__list a { white-space: nowrap; }

/* המרווח יורד כדי לפנות מקום לשמות הארוכים בלי לדחוס אותם */
.site-nav__list { gap: var(--space-6); }

@media (max-width: 1200px) {
  .site-nav__list { gap: var(--space-5); font-size: var(--text-sm); }
}


/* ============================================================================
   כפתורי WooCommerce — צביעה לפי פלטת האתר
   ----------------------------------------------------------------------------
   ⚠ הכללים הקודמים היו נכונים בתוכן אך הפסידו בספציפיות ל-CSS של
   WooCommerce. התוסף מגדיר `.woocommerce div.product form.cart .button`,
   ומול זה `.product__cart .single_add_to_cart_button` פשוט לא נכנס —
   ולכן כפתור "הוספה לסל" נשאר בסגול ברירת המחדל rgb(127, 84, 179).

   הסלקטורים כאן מכוונים בכוונה עם אותה עוצמה או יותר. זה לא ניקיון
   סגנוני אלא הדרישה המינימלית כדי לנצח את גיליון התוסף.
   ============================================================================ */

.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.product__cart .single_add_to_cart_button {
  background: var(--color-surface-dark);
  color: var(--color-text-invert);
  border: var(--border-hair) solid var(--color-surface-dark);
  border-radius: var(--radius-btn);
  min-height: 48px;
  padding-inline: var(--space-7);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.product__cart .single_add_to_cart_button:hover {
  background: var(--clay-800);
  border-color: var(--clay-800);
  color: var(--color-text-invert);
}

/* הכפתור המשני בכרטיס המוצר — מסגרת בלבד, כדי שלא יתחרה בראשי */
.woocommerce .card__body .add_to_cart_button,
.woocommerce .card__body .button,
.card__body .add_to_cart_button,
.card__body .button {
  background: transparent;
  color: var(--color-text);
  border: var(--border-hair) solid var(--color-line-strong);
  border-radius: var(--radius-btn);
  text-transform: none;
}

.woocommerce .card__body .add_to_cart_button:hover,
.card__body .add_to_cart_button:hover,
.card__body .button:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-text);
  color: var(--color-text);
}

/* שדות הכמות והחיפוש של WooCommerce מקבלים את אותה שפה */
.woocommerce .quantity .qty,
/* ⚠ הרשימה כאן החמיצה את input[type="password"], ולכן שדות
   הסיסמה יצאו 46px בעוד השאר 48 — הפרש שנראה כשורות לא מיושרות
   בעמוד פרטי החשבון. הגובה והמסגרת מגיעים כעת מהאסימונים, כמו
   בכל שאר טפסי האתר. */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select {
  border-radius: var(--radius-field);
  border: var(--border-hair) solid var(--color-line);
  background: var(--color-surface-raised);
  color: var(--color-text);
  min-height: var(--field-height);
}

.woocommerce textarea { min-height: 120px; }

/* הכפתור בסרגל העליון נשבר לשלוש שורות ברוחב בינוני, ואז הוא גבוה
   מהסרגל עצמו ודוחף אותו. כפתור קריאה לפעולה לעולם אינו נשבר. */
.site-header__cta { white-space: nowrap; }

/* ברוחב בינוני אין מקום גם לתפריט מלא וגם לכפתור רחב — הכפתור
   מתכווץ בריווח ובגודל הטקסט במקום להישבר. */
@media (max-width: 1200px) {
  .site-header__cta {
    padding-inline: var(--space-5);
    font-size: var(--text-xs);
  }
}


/* ============================================================================
   סרגל עליון שמגיב לגלילה — ללא JavaScript
   ----------------------------------------------------------------------------
   הסרגל היה סטטי, והמחלקה is-scrolled הייתה תלויה בסקריפט. כאן הכול
   נשען על animation-timeline: scroll() — הדפדפן מקשר את ההנפשה למיקום
   הגלילה עצמו, בלי מאזין ובלי חישוב בכל פריים.

   זהו מצב ממשק ולא קישוט, ולכן הוא אינו מכובה בהפחתת תנועה: הסרגל
   פשוט מגיע למצבו הסופי בלי מעבר מונפש.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   שני מצבי הסרגל
   ----------------------------------------------------------------------------
   המצב המצומצם מוגדר פעם אחת ומופעל משני מקורות:
     · עמוד הבית — המחלקה is-condensed שהסקריפט מוסיף אחרי 200px
     · כל עמוד אחר — קבוע, בלי גלילה ובלי סקריפט

   ⚠ קודם לכן זה נשען על animation-timeline: scroll(). נמדד שההנפשה
   דווחה כרצה אך אורכה נפתר ל-0% והיא לא התקדמה מעולם, בגלל איפוס
   prefers-reduced-motion שחל על כל האתר. המעבר כאן הוא transition
   רגיל, שנעצר מעצמו כשהמשתמש מבקש פחות תנועה.
   ---------------------------------------------------------------------------- */

/* ⚠ min-height אינו ברשימת המעברים, ומשתי סיבות.

   הראשונה נמדדה: כשהוא נכלל, הגובה נתקע על 96px ולא זז — אפילו
   הצהרה אינליין עם important לא שינתה אותו, כי ערך שנמצא באמצע
   מעבר גובר על כל גיליון סגנון. תחת prefers-reduced-motion משך
   המעבר יורד ל-0.001s, והדפדפן אינו מסיים אותו. עם transition:none
   אותו ערך נתפס מיד.

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

   הגובה מתחלף מיידית; הרושם של מעבר רך מגיע מהלוגו ומהרקע, ששניהם
   מונפשים בתכונות שאינן נוגעות בפריסה. */
.site-header,
.site-header__brand svg {
  transition: background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.site-header__brand svg { transform-origin: center; }

/* ⚠ ביטול מפורש של מעברים על הרצועה הפנימית.
   נמדד: transition-property שלה היה "all" — יורש מכלל גלובלי —
   ולכן min-height המשיך לעבור מעבר גם אחרי שהוסר מרשימת המעברים
   כאן, ונתקע שוב על 96px. שום דבר ברצועה הזו אינו אמור לעבור
   מעבר: הגובה מתחלף מיידית, והרכות מגיעה מהלוגו ומהרקע. */
.site-header__inner { transition-property: none; }

.site-header.is-condensed,
body:not(.home) .site-header {
  background: rgba(246, 240, 234, .88);
  border-block-end-color: var(--color-line);
  box-shadow: 0 1px 24px -12px rgba(30, 21, 15, .35);
}

.site-header.is-condensed .site-header__inner,
body:not(.home) .site-header__inner { min-height: 68px; }

.site-header.is-condensed .site-header__brand svg,
body:not(.home) .site-header__brand svg { transform: scale(.84); }

/* הטשטוש קבוע ואינו מונפש — הוא ניכר רק כשהרקע נעשה שקוף למחצה */
.site-header { backdrop-filter: blur(12px); }


/* ============================================================================
   מד התקדמות גלילה
   ----------------------------------------------------------------------------
   קו דק בראש המסך שמראה כמה נשאר. transform-origin נקבע לפי כיוון
   הקריאה — בעברית הקו גדל מימין לשמאל.
   ============================================================================ */

.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: right center;
  background: linear-gradient(to left, var(--clay-400), var(--clay-700));
}

html[dir="ltr"] .scroll-progress { transform-origin: left center; }

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-grow { to { transform: scaleX(1); } }
}

/* דפדפן ללא תמיכה לא יראה את הקו כלל — עדיף מקו קפוא שנראה כתקלה */
@supports not (animation-timeline: scroll()) {
  .scroll-progress { display: none; }
}


/* ============================================================================
   צמצום הפוטר
   ----------------------------------------------------------------------------
   נמדד: 688 פיקסלים — 76% מגובה המסך. פוטר הוא סיום, לא מקטע בפני
   עצמו; כשהוא תופס שלושה רבעי מסך הוא נקרא כעמוד נוסף.
   הצמצום נעשה בריווח ובגדלים, בלי להסיר שום תוכן.
   ============================================================================ */

.site-footer {
  padding-block: var(--space-8) var(--space-5);
  margin-block-start: var(--section-gap-sm);
}

/* המשפט התיאורי היה בגודל כותרת ועם 64px אוויר מתחתיו */
.site-footer__brand {
  font-size: var(--text-base);
  max-width: 46ch;
  margin-block-end: var(--space-6);
}

.site-footer__logo {
  width: 170px;
  margin-block-end: var(--space-4);
}

.site-footer__cols {
  gap: var(--space-6);
  padding-block-end: var(--space-5);
}

.site-footer__col-title { margin-block-end: var(--space-3); }

/* 44px לכל שורת קשר נועדו לאזור לחיצה — נחוץ רק לקישורים בפועל.
   שורת טקסט שאינה לחיצה אינה זקוקה לזה. */
.site-footer__contact li { min-height: 0; }
.site-footer__contact li:has(a[href]) { min-height: 44px; }

.site-footer__col ul { gap: var(--space-1); }

.site-footer__bottom { padding-block-start: var(--space-4); }


/* ============================================================================
   כניסה לחשבון בסרגל העליון
   ============================================================================ */

.account-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out);
}
.account-link:hover { background: var(--color-surface-alt); }

.account-link__icon { width: 22px; height: 22px; flex-shrink: 0; }


/* ============================================================================
   הסרגל העליון — מדרגות רספונסיביות
   ----------------------------------------------------------------------------
   ⚠ הוספת הקישור לחשבון שברה את הסרגל: נמדדה גלישה של 77 פיקסלים,
   וכפתור הקריאה לפעולה נדחף אל מחוץ למסך משמאל. בסרגל מתחרים חמישה
   רכיבים על אותו רוחב — לוגו, ניווט, חשבון, סל וכפתור — ולכן הוא
   זקוק למדרגות ולא לנקודת שבירה אחת.

   סדר הוויתור נקבע לפי חשיבות: שם המשתמש ← גודל הכפתור ← הניווט.
   ============================================================================ */

@media (max-width: 1300px) {
  .account-link__text { display: none; }
  .account-link { padding-inline: var(--space-2); }
}

/* ⚠ הרצועה של ההאדר רחבה מזו של התוכן, ורק במסכים גדולים.
   נמדד ב-1920: תוכן ההאדר דורש 1357px, והמיכל נעצר ב-1240 בכל
   רוחב מסך — מסך רחב יותר נותן יותר שוליים, לא יותר מקום. התוצאה
   הייתה גלישה של 117px החוצה משמאל: ההאדר היה ממורכז, אבל התוכן
   שלו נשפך מצד אחד.

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

   מתחת ל-1500 אין מספיק רוחב להרחבה, ושם ההידוק ממשיך לעבוד
   כפי שעבד עד היום. */
@media (min-width: 1501px) {
  .site-header__inner { max-width: 1400px; }
}

@media (max-width: 1500px) {
  /* שישה מרווחים בין פריטי הניווט — כל הקטנה מוכפלת בשישה */
  .site-nav__list     { gap: var(--space-3); font-size: var(--text-sm); }
  .site-header__cta   { padding-inline: var(--space-4); font-size: var(--text-xs); }
  .site-header__inner { gap: var(--space-3); }
}

@media (max-width: 1260px) {
  .site-nav__list   { gap: var(--space-3); }
  .site-header__cta { padding-inline: var(--space-3); }
}

@media (max-width: 1000px) {
  .site-header__brand { width: 180px; }
  .site-nav__list     { gap: var(--space-3); }
}

/* מתחת ל-900 הניווט עובר לתפריט המובייל.
   החשבון והסל נשארים גלויים — הם פעולות ולא ניווט.
   הכפתור מוסתר כאן כי הוא קיים בתוך תפריט המובייל. */
@media (max-width: 900px) {
  .site-header__cta { display: none; }
}

@media (max-width: 620px) {
  .site-header__brand { width: 168px; }
  .site-header__inner { gap: var(--space-2); }
  .account-link,
  .cart-link { padding-inline: var(--space-2); }
}


/* ============================================================================
   תפריט החשבון הצף
   ----------------------------------------------------------------------------
   נפתח בריחוף ובמיקוד מקלדת. הטריגר עצמו נשאר קישור עובד, ולכן
   מצב הכשל — בלי CSS, בלי JS, או במסך מגע — הוא מעבר רגיל לעמוד
   החשבון, ולא פעולה אבודה.
   ============================================================================ */

.account-menu { position: relative; }

.account-menu__panel {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  /* ⚠ מוצמד לקצה של הטריגר ולא ממורכז עליו.
     ניסיון המרכוז השתמש ב-inset-inline-start יחד עם translate
     פיזי — ב-RTL שניהם מושכים לאותו כיוון, והחלון נחת הרחק
     משמאל לאייקון.

     ההצמדה היא לקצה הפותח של הטריגר — בעברית הצד הימני — והחלון
     נפתח משם פנימה, לכיוון שבו הטקסט זורם. */
  inset-inline-start: 0;
  z-index: var(--z-dropdown);

  min-width: 15rem;
  padding: var(--space-4);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 18px 40px -18px rgba(30, 21, 15, .35);

  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity var(--duration-fast) var(--ease-out),
              translate var(--duration-fast) var(--ease-out),
              visibility var(--duration-fast);
}

/* ⚠ גשר בין הטריגר לפאנל. בלעדיו המרווח של 10px מפיל את הריחוף
   באמצע הדרך והתפריט נסגר בזמן שהעכבר עובר אליו. */
.account-menu__panel::before {
  content: "";
  position: absolute;
  inset-block-end: 100%;
  inset-inline: 0;
  height: 12px;
}

.account-menu:hover .account-menu__panel,
.account-menu:focus-within .account-menu__panel {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.account-menu__who {
  margin: 0 0 var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-hair) solid var(--color-line);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  line-height: var(--leading-snug);
}

.account-menu__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-text);
  word-break: break-word;               /* שם ארוך לא ירחיב את הפאנל */
}

.account-menu__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-menu__list a,
.account-menu__logout {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-out);
}

.account-menu__list a:hover,
.account-menu__logout:hover { background: var(--color-surface-alt); }

.account-menu__logout {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-hair) solid var(--color-line);
  border-radius: 0;
  color: var(--color-text-soft);
}

/* ⚠ במסך מגע אין ריחוף, ופאנל שנפתח בלחיצה היה חוטף את הניווט
   מהקישור. שם הטריגר פשוט מוביל לעמוד החשבון, שבו אותם יעדים
   קיימים כשורת לשוניות. */
@media (hover: none) {
  .account-menu__panel { display: none; }
}

/* מתחת לרוחב הזה שם המשתמש כבר מוסתר והאייקון עומד לבדו */
@media (max-width: 900px) {
  .account-menu__panel { display: none; }
}