/* ============================================================================
   Arova · רכיבי יסוד
   ----------------------------------------------------------------------------
   הרכיבים המשותפים לכל האתר. כל פיצ'ר בונה על אלה ולא ממציא מחדש כפתור,
   כרטיס או שדה טופס.

   כלל RTL: כל מרווח ומיקום כתובים בתכונות לוגיות
   (inline-start / inline-end) ולא ב-left / right. כך אותו קוד בדיוק
   עובד גם בעברית מימין-לשמאל וגם באנגלית משמאל-לימין.
   ============================================================================ */


/* ============================================================================
   פריסה
   ============================================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section        { padding-block: var(--section-gap); }
.section--alt   { background: var(--color-surface-alt); }
.section--dark  { background: var(--color-surface-dark); }

/* כותרת מקטע ממורכזת — התבנית החוזרת בעמוד הבית */
.section-head {
  text-align: center;
  max-width: 58ch;
  margin-inline: auto;
  margin-block-end: var(--space-9);
}
.section-head p { margin-inline: auto; }


/* ============================================================================
   כפתורים
   ============================================================================ */

.btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  /* גובה מינימלי 48px — דרישת נגישות לאזור לחיצה נוח במובייל */
  min-height: 48px;
  padding-inline: var(--space-7);
  padding-block: var(--space-3);

  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-align: center;

  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;

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

/* הברק האלכסוני שהיה כאן הוסר.
   פס אור שחוצה כפתור ב-hover הוא חתימה ויזואלית של 2013–2016, והוא
   הדבר היחיד באתר שסימן אותו כמיושן. ההתקרבות והצל נשארו — הם
   מספקים את אותה תחושה בלי הגימיק. */

/* ההתקרבות. 6% ו-4px — מורגש בבירור, ועדיין לא מטשטש את הטקסט. */
.btn:hover,
.btn:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: var(--shadow-hover);
  letter-spacing: 0.10em;   /* בין wide ל-wider — האותיות נפתחות מעט */
}

/* לחיצה — הכפתור נלחץ פנימה. משוב מיידי, בלי צל ובלי חריגה. */
.btn:active {
  transform: translateY(0) scale(.97);
  box-shadow: var(--shadow-sm);
  transition-duration: 90ms;
  transition-timing-function: var(--ease-out);
}

/* מי שביקש מהמערכת פחות תנועה מקבל את שינוי הצבע בלבד. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active,
  .btn:focus-visible {
    transform: none;
    box-shadow: none;
    letter-spacing: var(--tracking-wide);
  }
}

/* ראשי — הפעולה החשובה במסך. אחד בלבד לכל מסך. */
.btn--primary {
  background: var(--color-surface-dark);
  color: var(--color-text-invert);
  border-color: var(--color-surface-dark);
}
/* ב-hover הכפתור נשאר מלא ורק מבהיר גוון אחד.
   קודם הוא התהפך לשקוף לגמרי — וזה מה שנקרא כקפיצה חדה. */
.btn--primary:hover {
  background: var(--clay-800);
  border-color: var(--clay-800);
  color: var(--color-text-invert);
}

/* משני — פעולה חלופית לצד הראשית */
.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-line-strong);
}
.btn--secondary:hover {
  border-color: var(--color-text);
  background: var(--color-surface-alt);
}

/* זהב — לשימוש חסכוני בלבד, על רקע כהה */
.btn--gold {
  background: var(--color-accent);
  color: var(--clay-900);
  border-color: var(--color-accent);
}
.btn--gold:hover {
  background: transparent;
  color: var(--color-accent-soft);
}

/* טקסט בלבד — פעולה שלישונית, עם חץ שזז ב-hover */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  padding-inline: 0;
  color: var(--color-accent-text);
  min-height: auto;
}
.btn--ghost .btn__arrow {
  transition: transform var(--duration-base) var(--ease-out);
}
/* החץ זז תמיד "קדימה" לפי כיוון הקריאה — לכן ערך שלילי ב-RTL */
.btn--ghost:hover .btn__arrow          { transform: translateX(4px); }
[dir="rtl"] .btn--ghost:hover .btn__arrow { transform: translateX(-4px); }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* על רקע כהה הכפתור המשני מתהפך */
.on-dark .btn--secondary {
  color: var(--color-text-invert);
  border-color: var(--color-line-invert);
}
.on-dark .btn--secondary:hover {
  border-color: var(--color-accent-soft);
  background: rgba(234, 219, 206, .06);
}


/* ============================================================================
   כרטיסים
   ============================================================================ */

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

   הרקע זהה לרקע העמוד במכוון. כרטיס לבן על רקע חימר צועק "תיבה";
   כרטיס באותו גוון שמופרד בקו שערה נקרא כשטח מוגדר ולא כחפץ
   שהונח מלמעלה. ההפרדה מגיעה מהקו ומהריווח, לא מניגוד. */
.card {
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow   var(--duration-fast) var(--ease-out),
              transform    var(--duration-fast) var(--ease-out);
}
.card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);   /* הרמה עדינה בלבד — קפיצה גדולה משדרת זול */
}

/* במסך מגע ההרמה נתקעת אחרי הלחיצה ונשארת תלויה */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; }
}

.card__media {
  /* display: block הוא חובה ולא קישוט. בקטלוג עטיפת התמונה היא <a>,
     שהוא inline כברירת מחדל — ועל אלמנט inline הכלל aspect-ratio אינו חל,
     כך שהתמונה בלעה את הכרטיס וגוף הכרטיס נדחק החוצה. */
  display: block;
  aspect-ratio: 4 / 5;           /* פורמט אנכי — מחמיא לצילום מוצר */
  background: var(--color-surface-alt);
  overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-luxe);
}
.card:hover .card__media img { transform: scale(1.04); }

/* מציין מקום למוצר שטרם צולם. יושב כאן ולא בקובץ של עמוד מסוים,
   כי הוא בשימוש בעמוד הבית, בקטלוג ובעמוד המוצר. */
.card__media--empty {
  display: grid;
  place-items: center;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-5);
}

/* עמודת flex עם gap, כמו בכרטיס לוח הבקרה, במקום שרשרת מרווחים
   על כל אלמנט בנפרד. */
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;                       /* ממלא את גובה הכרטיס, כדי שהמחיר יוכל לרדת לתחתית */
}

.card__title { font-family: var(--font-heading); font-size: var(--text-xl); margin: 0; }
.card__text  { font-size: var(--text-sm); color: var(--color-text-soft); margin: 0; }

/* ⚠ margin-block-start: auto דוחף את המחיר לתחתית הכרטיס.
   בלעדיו המחיר צמוד לתיאור, ותיאורים באורך שונה מפזרים את המחירים
   בגבהים שונים לאורך השורה — העין לא מצליחה להשוות ביניהם. */
.card__price {
  display: block;
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-accent-text);
}

/* הכרטיס עצמו עמודה, אחרת הגוף לא יכול למלא את הגובה */
.card { display: flex; flex-direction: column; }

/* רשת כרטיסים — נשברת לבד לפי רוחב, בלי media query.

   ⚠ המינימום הוא 200 ולא 210. ברוחב הרצועה כאן חמש עמודות יוצאות
   209.6 פיקסלים כל אחת — פחות מ-210, ולכן מינימום 210 היה מחזיר
   את הרשת לארבע עמודות. הערך חייב להיות מתחת לרוחב העמודה שרוצים
   לקבל, לא שווה לו.

   ב-1440 זה חמישה מוצרים בשורה במקום ארבעה, וכרטיס של 209
   פיקסלים במקום 268. מוצר בודד גדול תובע
   תשומת לב שהוא לא בהכרח מצדיק; קולקציה נסרקת טוב יותר כשרואים
   ממנה יותר בבת אחת. */
.card-grid {
  display: grid;
  gap: var(--space-5);

  /* שורת תצוגה — מעט מוצרים נבחרים, כמו בעמוד הבית.

     ⚠ auto-fit ולא auto-fill. auto-fill יוצר מסלולים גם כשאין מה
     למלא אותם; נמדד בעמוד הבית שלושה מוצרים בתוך חמישה מסלולים
     ו-467 פיקסלים ריקים בצד אחד, כאילו נשמטו מוצרים מהשורה.

     ⚠ התקרה היא 280px ולא 1fr. עם 1fr שלושה מוצרים היו נמתחים
     ל-365 פיקסלים כל אחד — גדולים יותר מלפני הצמצום. */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 280px));
  justify-content: center;
}

/* ----------------------------------------------------------------------------
   רשת צפופה — הקטלוג
   ----------------------------------------------------------------------------
   ⚠ כאן התקרה חייבת להיות 1fr ולא אורך קבוע.
   כשה-max הוא אורך, הדפדפן סופר את מספר המסלולים לפיו ולא לפי
   המינימום. נמדד: עם תקרה של 280px הקטלוג ירד לשלוש עמודות של
   280 — רחבות יותר מאשר לפני הצמצום, ההפך מהמבוקש.

   עם 1fr הספירה נעשית לפי המינימום, 190px, ומתקבלות חמש עמודות
   של 209 פיקסלים. אין צורך בתקרה: בקטלוג יש די מוצרים כדי למלא
   את כל המסלולים, ולכן אף אחד מהם אינו נמתח.
   ---------------------------------------------------------------------------- */

.card-grid--dense {
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  justify-content: stretch;
}


/* ============================================================================
   תגיות
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  border: var(--border-hair) solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent-text);
}
.badge--solid { background: var(--color-surface-dark); color: var(--color-text-invert); border-color: transparent; }


/* ============================================================================
   שדות טופס
   ============================================================================ */

.field { margin-block-end: var(--space-5); }

.field__label {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* סימון שדה חובה — כוכבית לעין, ומילה מלאה לקורא מסך */
.field__required { color: var(--color-error); margin-inline-start: 2px; }

/* ⚠ אותה הגדרה בדיוק כמו לשדות WooCommerce (account.css).
   המסגרת הודקה מ-line-strong ל-line: קו כהה סביב כל שדה הפך את
   הטופס לרשת של תיבות, במקום לשורות שממתינות לתוכן. */
.field__control,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  min-height: var(--field-height);
  padding: 0 var(--space-4);
  background: var(--color-surface-raised);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-field);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.field__control::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: var(--color-text-muted); }

.field__control:hover,
.wpcf7 input:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover { border-color: var(--color-text-muted); }

.field__control:focus,
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(203, 171, 146, .30);
  outline: none;
}

textarea.field__control,
.wpcf7 textarea {
  min-height: 120px;
  padding-block: var(--space-3);
  resize: vertical;
  line-height: var(--leading-normal);
}

/* הודעת שגיאה — מסומנת גם בצבע וגם בסימן, כי צבע לבדו אינו נגיש */
.field__error {
  display: none;
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-error);
}
.field[data-invalid="true"] .field__control { border-color: var(--color-error); }
.field[data-invalid="true"] .field__error   { display: block; }

.field__hint { margin-block-start: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }


/* ============================================================================
   מפריד מעוטר — קו דק עם יהלום זהב במרכז
   ============================================================================ */

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-8);
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-line);
}
.divider__mark {
  width: 6px; height: 6px;
  background: var(--color-accent);
  transform: rotate(45deg);
}


/* ============================================================================
   מתג שפה
   ============================================================================ */

.lang-toggle {
  display: inline-flex;
  border: var(--border-hair) solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.lang-toggle button {
  min-height: 40px;
  padding-inline: var(--space-4);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  transition: background var(--duration-fast) var(--ease-out),
              color      var(--duration-fast) var(--ease-out);
}
.lang-toggle [aria-current="true"] {
  background: var(--color-surface-dark);
  color: var(--color-text-invert);
}
/* גם כשהמתג עצמו נושא את המחלקה on-dark, וגם כשהוא יושב בתוך אזור כהה */
.on-dark .lang-toggle,
.lang-toggle.on-dark { border-color: var(--color-line-invert); }

.on-dark .lang-toggle button,
.lang-toggle.on-dark button { color: var(--color-text-invert); }

.on-dark .lang-toggle [aria-current="true"],
.lang-toggle.on-dark [aria-current="true"] { background: var(--color-accent); color: var(--clay-900); }


/* ============================================================================
   כניסת אלמנט למסך בגלילה

   כלל קריטי: התוכן גלוי כברירת מחדל, ואינו מוסתר כאן.
   ההסתרה מופעלת רק אחרי ש-JavaScript הוסיף את המחלקה js-reveal לשורש —
   כלומר רק אחרי שהוא הוכיח שהוא מסוגל לחשוף את התוכן בחזרה.

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

/* ============================================================================
   מעבר בין עמודים

   View Transitions של CSS — הדפדפן מצלם את העמוד היוצא ואת הנכנס
   ומנפיש ביניהם. אין כאן שורת JavaScript אחת.

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

@media (prefers-reduced-motion: no-preference) {

  /* ⚠ @view-transition ישב מחוץ למדיה-קווארי הזה, ולכן מעבר העמוד רץ
     גם למי שביקש מהמערכת פחות תנועה.

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

     כאן הוא מותנה בהעדפה, כמו כל שאר התנועה באתר. */
  @view-transition { navigation: auto; }

  /* היוצא נמוג מהר, הנכנס נכנס לאט יותר — כך העין לא קולטת "הבהוב" */
  ::view-transition-old(root) {
    animation: page-leave var(--duration-fast) var(--ease-out) both;
  }
  ::view-transition-new(root) {
    animation: page-enter var(--duration-slow) var(--ease-luxe) both;
  }

  @keyframes page-leave {
    to { opacity: 0; }
  }

  @keyframes page-enter {
    /* הזזה זעירה בלבד. תנועה גדולה במעבר עמוד מרגישה זולה. */
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }

}


/* ============================================================================
   עוגנים בתוך עמוד

   scroll-margin מרחיק את היעד מהקצה העליון, אחרת הכותרת של המקטע
   נחתכת מתחת לסרגל הדביק וגולש שלחץ "אודות" נוחת באמצע פסקה.
   ============================================================================ */

:target,
section[id],
[id^="hero"], [id^="values"], [id^="business"],
[id^="collection"], [id^="how"], [id^="about"], [id^="contact"] {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-6));
}


/* המימוש הוא אנימציה מבוססת ציר גלילה של CSS, בלי JavaScript כלל.

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

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

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

   למה הפוך: בגרסה הקודמת הכול היה עטוף ב-@media no-preference, ולכן
   די היה בכך שמערכת ההפעלה מבקשת פחות תנועה כדי שאף אפקט לא ירוץ —
   בלי שום דרך לראות אותם. עכשיו יש מתג עקיפה אחד (.motion-preview),
   וההתנהגות מול משתמש אמיתי לא השתנתה כהוא זה.

   מצב הכשל נשאר "בלי אפקט" ולעולם לא "בלי תוכן":
     · fill-mode הוא backwards — מצב הפתיחה חל רק במהלך ההשהיה
     · אין שום כלל שמסתיר את התוכן מחוץ לאנימציה עצמה
   ============================================================================ */

@supports (animation-timeline: view()) {

  /* חשיפה בגלילה — התוכן נכנס מצד הקריאה ולא רק עולה מלמטה */
  .reveal {
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 34%;
  }

  /* פריטים באותה שורת רשת מגיעים לאותו גובה בדיוק ולכן נחשפו כגוש
     אחד. טווח ארוך יותר לכל פריט עוקב יוצר מדרגה. */
  .card-grid  > .reveal:nth-child(2),
  .value-grid > .reveal:nth-child(2),
  .step-list  > .reveal:nth-child(2) { animation-range: entry 0% cover 44%; }

  .card-grid  > .reveal:nth-child(3),
  .value-grid > .reveal:nth-child(3),
  .step-list  > .reveal:nth-child(3) { animation-range: entry 0% cover 54%; }

  .card-grid  > .reveal:nth-child(4),
  .value-grid > .reveal:nth-child(4),
  .step-list  > .reveal:nth-child(4) { animation-range: entry 0% cover 64%; }

  @keyframes reveal-in {
    from { opacity: 0; transform: translateX(var(--enter-shift)) translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

}

/* כניסת המסך הראשון — פריט אחרי פריט, בלי תלות בגלילה */
.enter-stagger > * {
  animation: enter-inline var(--duration-slower) var(--ease-luxe) backwards;
  animation-delay: calc(var(--i, 0) * var(--enter-step));
}

.enter-stagger > :nth-child(1) { --i: 0; }
.enter-stagger > :nth-child(2) { --i: 1; }
.enter-stagger > :nth-child(3) { --i: 2; }
.enter-stagger > :nth-child(4) { --i: 3; }
.enter-stagger > :nth-child(5) { --i: 4; }
.enter-stagger > :nth-child(6) { --i: 5; }
.enter-stagger > :nth-child(7) { --i: 6; }

@keyframes enter-inline {
  from { opacity: 0; transform: translateX(var(--enter-shift)); }
}

/* התמונה נכנסת בתנועה משלה — איטית והפוכה באופייה, כדי שתיקרא
   כרקע שמתייצב ולא כעוד פריט ברשימה. */
.hero--cover .hero__bg {
  animation: hero-settle calc(var(--duration-slower) * 1.6) var(--ease-luxe) backwards;
}

@keyframes hero-settle {
  from { opacity: 0; transform: scale(1.06); }
}


/* ----------------------------------------------------------------------------
   כיבוד בקשת "הפחתת תנועה" של מערכת ההפעלה.
   ב-Windows זו ההגדרה נגישות ← אפקטים חזותיים ← אפקטי הנפשה.

   html.motion-preview עוקף — כדי שבעל האתר יוכל לראות את האפקטים
   בלי לשנות הגדרת נגישות במחשב שלו. מבקר רגיל לעולם לא מקבל את
   המחלקה הזו, ולכן ההתנהגות מולו נשארת תקנית.
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-preview) .reveal,
  html:not(.motion-preview) .enter-stagger > *,
  html:not(.motion-preview) .hero--cover .hero__bg {
    animation: none;
  }
}


/* ============================================================================
   כרטיס מוצר — צפיפות מודרנית
   ----------------------------------------------------------------------------
   נמדד לפני: כרטיס בגובה 677px ובתוכו אזור תמונה של 448px, כלומר
   שני שלישים מהכרטיס הם תמונה. ביחס 4:5 ובעמודה רחבה זה יוצא ענק,
   והמשתמש רואה מוצר אחד וחצי במסך. יחס 1:1 מוריד את הכרטיס בכ-35%
   בלי לפגוע בהצגת המוצר — המוצר עצמו רחב ולא אנכי.
   ============================================================================ */

.card__media { aspect-ratio: 1 / 1; }

/* ריפוד אחיד מכל הצדדים — כמו בכרטיסי לוח הבקרה, מהודק לרוחב
   הכרטיס החדש. 32 פיקסלים מכל צד על כרטיס של 209 היו בולעים
   שליש מהרוחב. */
.card__body  { padding: var(--space-5); }
.card__title { font-size: var(--text-lg); margin: 0; }
.card__text  {
  font-size: var(--text-sm);
  /* שתי שורות לכל היותר. תיאור באורך משתנה שבר את יישור השורה
     בין הכרטיסים, וכרטיסים בגבהים שונים נראים כתקלה. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================================
   מצב ריק — קטלוג ללא תוצאות, ועמוד 404
   ----------------------------------------------------------------------------
   הועבר לכאן מ-catalog.css. עמוד 404 אינו טוען את catalog.css, ולכן
   הכותרת, הטקסט והכפתורים שם נגעו זה בזה באפס פיקסלים ושני הכפתורים
   הופרדו ב-4 פיקסלים של תו רווח בלבד.
   ============================================================================ */

.empty-state {
  text-align: center;
  padding-block: var(--space-10);
  max-width: 46ch;
  margin-inline: auto;
}

.empty-state__title { font-size: var(--text-2xl); margin-block-end: var(--space-4); }
.empty-state p      { margin-inline: auto; margin-block-end: var(--space-6); }

/* הכפתורים נשענו על תו רווח בין תגיות כדי להיפרד. flex נותן להם
   מרווח אמיתי, וגם מסדר אותם זה מתחת לזה במסך צר. */
.empty-state__actions,
.empty-state .btn + .btn { margin-inline-start: 0; }

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}


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

.prose > * + *   { margin-block-start: var(--space-5); }
.prose p         { line-height: var(--leading-relaxed); }
.prose h2        { font-size: var(--text-2xl); margin-block-start: var(--space-8); }
.prose h3        { font-size: var(--text-xl);  margin-block-start: var(--space-7); }
.prose h2:first-child,
.prose h3:first-child { margin-block-start: 0; }

.prose ul,
.prose ol {
  padding-inline-start: var(--space-6);
  list-style: revert;              /* מחזיר את התבליטים שהאיפוס הסיר */
}
.prose li + li { margin-block-start: var(--space-2); }

.prose a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--color-text); }

.prose strong { font-weight: var(--weight-semibold); }

.prose blockquote {
  padding-inline-start: var(--space-5);
  border-inline-start: var(--border-thin) solid var(--color-accent);
  color: var(--color-text-soft);
}

.prose img { border-radius: var(--radius-sm); }


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

.section--tight { padding-block: var(--section-gap-sm); }
.section--loose { padding-block: var(--section-gap-lg); }

/* מקטע הסיום הוא הקריאה לפעולה האחרונה בעמוד — הוא צריך לנשום */
.section.closing { padding-block: var(--section-gap-lg); }


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

   ברירת המחדל יורדת ל-32px, ורק רגעי ההצהרה — המקטע הכהה ומקטע
   הסיום — מקבלים את ה-44. כך ההבדל נושא משמעות.
   ============================================================================ */

.section-head h2 {
  font-size: var(--text-2xl);
}

.section--dark .section-head h2,
.section.closing .section-head h2 {
  font-size: var(--text-3xl);
}

/* המרווח מתחת לכותרת מקטע היה קבוע. כותרת קטנה צריכה פחות אוויר
   מתחתיה, אחרת היא נראית מנותקת מהתוכן שהיא מובילה. */
.section-head { margin-block-end: var(--space-8); }
.section--dark .section-head,
.section.closing .section-head { margin-block-end: var(--space-9); }


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

.card__media--empty {
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(115% 85% at 50% 0%, var(--clay-100) 0%, var(--clay-200) 78%);
  color: transparent;                 /* הטקסט "טרם צולם" מוסתר ויזואלית */
  font-size: 0;
  overflow: hidden;
}

/* מונוגרמה — אות המותג, גדולה ושקופה למחצה */
.card__media--empty::before {
  content: "A";
  font-family: var(--font-heading-en);
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 1;
  color: var(--clay-300);
  opacity: .55;
}

/* מסגרת פנימית דקה — הופכת את השטח לממוסגר במקום ריק */
.card__media--empty::after {
  content: "";
  position: absolute;
  inset: var(--space-4);
  border: var(--border-hair) solid var(--clay-300);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* אותו טיפול לגלריה בעמוד המוצר, בקנה מידה גדול יותר */
.gallery__main--empty {
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(115% 85% at 50% 0%, var(--clay-100) 0%, var(--clay-200) 78%);
  overflow: hidden;
}
.gallery__main--empty::before {
  content: "A";
  font-family: var(--font-heading-en);
  font-size: clamp(6rem, 16vw, 11rem);
  line-height: 1;
  color: var(--clay-300);
  opacity: .5;
}
.gallery__main--empty::after {
  content: "";
  position: absolute;
  inset: var(--space-6);
  border: var(--border-hair) solid var(--clay-300);
  border-radius: var(--radius-sm);
}


/* ============================================================================
   חריג לאיפוס הפחתת התנועה — רכיבי ממשק מונחי גלילה
   ----------------------------------------------------------------------------
   ב-tokens.css יש איפוס סטנדרטי: `animation-duration: 1ms !important`
   על כל אלמנט. הוא נכון לאנימציות שרצות מעצמן לאורך זמן.

   ⚠ אבל הוא הורג גם אנימציות מונחות-גלילה. אלה זקוקות ל-duration: auto
   כדי להתמפות לציר, ועם משך סופי הן פשוט קופצות למצב הסיום ונתקעות שם.
   נמדד: הסרגל נשאר 96px, מד ההתקדמות תקוע ב-scaleX(0), וכל האנימציות
   דיווחו על מצב "finished" כבר בטעינה.

   ההבחנה המהותית: אנימציה מונחית-גלילה אינה תנועה שקורית למשתמש —
   היא מיפוי ישיר של מיקום הגלילה למצב. אין בה הפתעה ואין תנועה
   אוטומטית, ולכן שימורה עולה בקנה אחד עם כוונת ההגדרה.
   התנועה הדקורטיבית (.reveal, .enter-stagger) נשארת מכובה.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .site-header,
  .site-header__inner,
  .site-header__brand svg,
  .buybar {
    animation-duration: auto !important;
  }
}


/* ============================================================================
   ראש עמוד — משותף לקטלוג, לאודות, ליצירת קשר, לעמוד רגיל ולארכיון
   ----------------------------------------------------------------------------
   ישב ב-catalog.css, ש-index.php ו-page.php אינם טוענים. כל עמוד
   שנוצר בלוח הבקרה הציג כותרת בלי שום עיצוב.
   ============================================================================ */

.page-head {
  padding-block: var(--space-6) var(--space-4);
  border-block-end: var(--border-hair) solid var(--color-line);
}

.page-head h1 {
  font-size: var(--text-2xl);
  margin-block-end: var(--space-2);
}

.page-head .lead {
  font-size: var(--text-base);
  max-width: 62ch;
}


/* ============================================================================
   חלון הסל
   ----------------------------------------------------------------------------
   נבנה על <dialog>, ולכן שכבת ההכהיה היא ::backdrop — פסאודו-אלמנט
   שהדפדפן מנהל בעצמו. אין כאן div של רקע ואין ניהול z-index ידני.
   ============================================================================ */

.cart-modal {
  width: min(36rem, calc(100vw - var(--space-6)));
  max-height: min(42rem, calc(100vh - var(--space-8)));
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 32px 80px -24px rgba(30, 21, 15, .45);
  overflow: hidden;

  /* מרכוז אמיתי. dialog ברירת המחדל נצמד למעלה. */
  margin: auto;
}

/* שכבת ההכהיה — בגוון הכהה של הפלטה ולא בשחור.
   שחור על פלטה חמה נקרא כזר; החמרה הכהה שומרת על אותה משפחה. */
.cart-modal::backdrop {
  background: rgba(62, 44, 31, .55);
  backdrop-filter: blur(3px);
}

.cart-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-block-end: var(--border-hair) solid var(--color-line);
}

.cart-modal__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
}

.cart-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;        /* אזור לחיצה נגיש */
  border: none;
  background: transparent;
  color: var(--color-text-soft);
  font-size: var(--text-2xl);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-btn);
}
.cart-modal__close:hover { background: var(--color-surface-alt); color: var(--color-text); }

.cart-modal__body {
  overflow-y: auto;
  max-height: calc(42rem - 150px);
}

.cart-modal__list { padding: var(--space-4) var(--space-6); }

.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  border-block-end: var(--border-hair) solid var(--color-line);
}
.cart-line:last-child { border-block-end: none; }

.cart-line__media img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.cart-line__info { display: flex; flex-direction: column; min-width: 0; }

.cart-line__name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-line__meta { font-size: var(--text-sm); color: var(--color-text-muted); }

.cart-line__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cart-line__total {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent-text);
  white-space: nowrap;
}

.cart-line__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--radius-btn);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1;
}
.cart-line__remove:hover { background: var(--color-surface-alt); color: var(--color-error); }

.cart-modal__foot {
  padding: var(--space-5) var(--space-6) var(--space-6);
  border-block-start: var(--border-hair) solid var(--color-line);
  background: var(--color-surface-alt);
}

.cart-modal__sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-base);
  margin-block-end: var(--space-2);
}
.cart-modal__sum strong { font-family: var(--font-mono); color: var(--color-text); }

.cart-modal__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-end: var(--space-5);
}

.cart-modal__cta { width: 100%; }
.cart-modal__cta + .cart-modal__cta { margin-block-start: var(--space-3); }



/* בזמן הסרת פריט — מונע לחיצה כפולה */
.cart-modal.is-busy .cart-modal__body { opacity: .5; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .cart-modal[open] { animation: cart-modal-in var(--duration-base) var(--ease-luxe); }
  .cart-modal[open]::backdrop { animation: cart-backdrop-in var(--duration-base) var(--ease-out); }

  @keyframes cart-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
  }
  @keyframes cart-backdrop-in {
    from { opacity: 0; }
  }
}

/* ---- מצב סל ריק ----
   הכפתור ישב קודם ישירות בגוף החלון ונצמד לקצוות בלי ריווח.
   כאן הוא בתוך תיבה מרופדת, ולצידו מונוגרמה וטקסט שנותנים למצב
   הריק נוכחות במקום שורה בודדת באמצע חלל. */
.cart-modal__empty {
  padding: var(--space-9) var(--space-7);
  text-align: center;
}

.cart-modal__empty-mark {
  display: block;
  font-family: var(--font-heading-en);
  font-size: 4rem;
  line-height: 1;
  color: var(--clay-300);
  margin-block-end: var(--space-5);
}

.cart-modal__empty-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-block-end: var(--space-3);
}

.cart-modal__empty-text {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  max-width: 32ch;
  margin-inline: auto;
  margin-block-end: var(--space-7);
}

.cart-modal__empty .btn { min-width: 14rem; }

/* ---- בקרת כמות בחלון הסל ---- */
.qty-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
  border: var(--border-hair) solid var(--color-line-strong);
  border-radius: var(--radius-btn);
  padding: 2px;
  width: fit-content;
}

.qty-control__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-btn);
}
.qty-control__btn:hover { background: var(--color-surface-alt); }

.qty-control__value {
  min-width: 2.25rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
}


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

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

/* מיכל הטוסטים — יושב מתחת לסרגל, בצד שממנו העין מתחילה לקרוא */
.arova-toasts {
  position: fixed;
  inset-block-start: calc(var(--header-height) + var(--space-4));
  inset-inline-start: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(24rem, calc(100vw - var(--space-6)));
  pointer-events: none;   /* המיכל שקוף ללחיצות; רק הטוסטים עצמם קולטים */
}

.arova-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  /* רקע בגוון הפלטה ולא לבן — לבן על רקע חמים נקרא כזר */
  background: var(--clay-50);
  border: var(--border-hair) solid var(--color-line);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px -16px rgba(30, 21, 15, .35);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.arova-toast a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.arova-toast__text { flex: 1; min-width: 0; }

.arova-toast__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-btn);
}
.arova-toast__close:hover { background: var(--color-surface-alt); color: var(--color-text); }

@media (prefers-reduced-motion: no-preference) {
  .arova-toast { animation: toast-in var(--duration-base) var(--ease-luxe); }

  /* נכנס מהצד שממנו הוא יושב — בעברית מימין, באנגלית משמאל */
  @keyframes toast-in {
    from { opacity: 0; transform: translateX(calc(var(--enter-shift) * -1)); }
  }

  .arova-toast.is-leaving {
    opacity: 0;
    transform: translateX(calc(var(--enter-shift) * -1));
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
  }
}

@media (max-width: 620px) {
  .arova-toasts {
    inset-inline: var(--space-4);
    width: auto;
  }
}


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

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-error {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-2) var(--space-4);

  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: var(--border-hair) solid var(--color-line);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 10px 30px -22px rgba(30, 21, 15, .5);

  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  list-style: none;
}

/* ⚠ WooCommerce מדפיס אייקון משלו ב-::before וממקם אותו במיקום
   מוחלט. שניהם מוחלפים כאן באייקון שמשתתף ברשת. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: "";
  position: static;
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  font-size: 0;
  background-color: currentColor;
  color: var(--color-accent);

  /* האייקון נצבע דרך המסכה בצבע הסטטוס, ולכן אותו מנגנון משרת
     את שלושת הסוגים ומשתנה רק בנתיב */
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.woocommerce-message::before {
  color: var(--color-success);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8.5 12.3l2.4 2.4 4.6-5"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8.5 12.3l2.4 2.4 4.6-5"/></svg>');
}

.woocommerce-info::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 7.6v.6"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 7.6v.6"/></svg>');
}

.woocommerce-error::before {
  color: var(--color-error);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.8v5"/><path d="M12 16.2v.6"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.8v5"/><path d="M12 16.2v.6"/></svg>');
}

.woocommerce-message { border-inline-start-color: var(--color-success); }

.woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-error {
  border-inline-start-color: var(--color-error);
}

/* שגיאה אחת היא משפט; כמה שגיאות הן רשימה. שתיהן יושבות בעמודה
   השנייה, לצד האייקון ולא מתחתיו. */
.woocommerce-error li {
  grid-column: 2;
  margin-block-start: var(--space-2);
}
.woocommerce-error li:first-of-type { margin-block-start: 0; }

/* ⚠ WooCommerce מדפיס את כפתור הפעולה לפני הטקסט, ומסתמך על float
   כדי להעיף אותו הצידה. בתוך רשת אין ציפה, ולכן הוא נחת בשורה
   הראשונה והטקסט נדחף מתחתיו — הכפתור הופיע לפני שידעת למה.

   order דוחף אותו אחרי הטקסט. הטקסט עצמו הוא צומת טקסט חשוף
   שהרשת עוטפת בפריט אנונימי, ואי אפשר לכוון אליו — אבל פריט
   אנונימי מקבל order אפס, ולכן די בלהרים את זה של הכפתור. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  order: 2;
  grid-column: 2;
  justify-self: start;
  float: none;
  margin-block-start: var(--space-4);
}


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

   הכלל כאן חל על כל הטפסים ולא רק על מסכי החשבון, כי הבעיה זהה
   בכולם — WooCommerce, Contact Form 7 ותגובות.
   ============================================================================ */

input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-inline-end: var(--space-2);
  accent-color: var(--color-surface-dark);
  cursor: pointer;
  flex-shrink: 0;
}

/* Contact Form 7 עוטף כל אפשרות ב-label בלי for. ה-label עצמו
   כן לחיץ, ולכן מספיק להגדיל אותו לשטח נוח. */
.wpcf7-list-item label,
.wpcf7-acceptance label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
}

.wpcf7-list-item { margin-inline-start: 0; }