/* ============================================================================
   Arova · קטלוג המוצרים
   ============================================================================ */


/* ============================================================================
   כותרת עמוד — משותפת לקטלוג ולעמודי תוכן נוספים בהמשך
   ============================================================================ */

/* .page-head עבר ל-components.css — הוא בשימוש גם ב-index.php
   וב-page.php, שאינם טוענים את הקובץ הזה. */


/* ============================================================================
   מסננים
   ============================================================================ */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-7);
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-6);
  border-block-end: var(--border-hair) solid var(--color-line);
}

/* fieldset מביא עיצוב ברירת מחדל של הדפדפן — מנטרלים אותו */
.filter-group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.filter-group__label {
  padding: 0;
  margin-block-end: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.filter-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  /* ⚠ inline-flex הוא חובה ולא קישוט: הצ׳יפ הוא <a>, כלומר inline,
     ועל אלמנט inline הכלל min-height אינו מרכז דבר — הטקסט נשאר
     צמוד לראש התיבה בעוד המסגרת נמתחת סביבו. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                /* אזור לחיצה נגיש */
  padding-inline: var(--space-5);
  background: transparent;
  border: var(--border-hair) solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--color-text); color: var(--color-text); }

.filter-chip[aria-current="true"] {
  background: var(--color-surface-dark);
  border-color: var(--color-surface-dark);
  color: var(--color-text-invert);
}

/* מונה התוצאות נדחף לקצה הנגדי של השורה */
.filters__count {
  margin: 0;
  margin-inline-start: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ============================================================================
   אנימציית כניסה של תוצאות הסינון

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

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

/* מצב ברירת המחדל. הכיבוי נעשה בבלוק הפחתת התנועה שב-components.css. */
@supports (transition-behavior: allow-discrete) {

  /* מצב המנוחה הוא גלוי לחלוטין. זה קריטי:
     אילו היינו משתמשים ב-animation עם fill-mode: both, מצב המנוחה היה
     שקיפות 0, וכל הקשר שבו האנימציה אינה רצה היה משאיר את הכרטיסים
     בלתי נראים לצמיתות. */
  .card--enter {
    opacity: 1;
    transform: none;

    /* איטי בכוונה. כניסה מהירה של רשת מוצרים מרגישה כמו טעינה,
       כניסה איטית מרגישה כמו הצגה. */
    transition: opacity   var(--duration-slower) var(--ease-luxe),
                transform var(--duration-slower) var(--ease-luxe);

    /* השהיה מדורגת — הכרטיסים נכנסים בזה אחר זה ולא כמקשה אחת */
    transition-delay: calc(var(--card-index, 0) * 90ms);

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

  /* @starting-style מגדיר מאיפה האלמנט מתחיל ברגע שהוא נוסף למסמך.
     דפדפן שאינו תומך פשוט מציג את הכרטיס מיד, בלי אנימציה —
     כלומר מצב הכשל הוא "בלי אפקט", לעולם לא "בלי תוכן". */
  @starting-style {
    .card--enter {
      opacity: 0;
      transform: translateX(var(--enter-shift, 40px));
    }
  }

}


/* ============================================================================
   כרטיס בקטלוג
   ============================================================================ */

/* כל הכרטיס נראה לחיץ, אך רק הכותרת היא הקישור בפועל —
   כך יש קישור אחד בלבד לכל מוצר בסדר הניווט במקלדת. */
.card__link { display: block; color: inherit; }
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.card { position: relative; }

.card__link:hover { color: var(--color-accent-text); }

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


/* ============================================================================
   מצב ריק
   ============================================================================ */

/* .empty-state עבר ל-components.css — הוא בשימוש גם בעמוד 404,
   ש-catalog.css אינו נטען בו. */


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

/* המסננים נצמדים לרשת ולא מרחפים באמצע */
.filters {
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-4);
}

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

/* ריפוד המקטע הכללי מוגזם לרשת מוצרים שאמורה להתחיל מיד */
.section.catalog {
  padding-block: var(--space-6) var(--space-9);
}

/* ----------------------------------------------------------------------------
   כפתור ההוספה לסל בכרטיס
   ----------------------------------------------------------------------------
   ⚠ WooCommerce מייצר את הכפתור כ-<a> ברמת בלוק, ויורש ממנו
   text-align: start. נמדד: הטקסט ישב 17px מקצה אחד ו-99 מהשני —
   צמוד לצד ולא במרכז.

   inline-flex עם מירכוז בשני הצירים מטפל גם בטקסט וגם במצב הטעינה,
   שבו WooCommerce מוסיף ספינר לצד הטקסט.
   ---------------------------------------------------------------------------- */

.card .button,
.card .add_to_cart_button,
.card .added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  text-align: center;
  gap: var(--space-2);
}