/* ============================================================================
   UNICCO — גשר בין WooCommerce לעיצוב שלנו

   ⚠️ הקובץ הזה שייך **לתבנית בלבד** ואינו מסונכרן מהפרוטוטייפ.
   הסיבה: בפרוטוטייפ הגריד הוא `<div class="grid">`, ואילו WooCommerce
   פולט `<ul class="products columns-4">`. המחלקה הזו פשוט לא קיימת
   בפרוטוטייפ, ולכן אין לה שם מקום — ואסור להוסיף אותה ל-components.css
   שעובר בין השניים ללא שינוי.

   מה שקרה בלי הקובץ הזה, ונמדד באתר: ביטלנו את ה-CSS של WooCommerce
   (woocommerce_enqueue_styles → מערך ריק) כי components.css מעצב הכל
   בעצמו — אבל `ul.products` נשאר בלי שום כלל גריד, לא שלנו ולא שלהם.
   התוצאה: כל כרטיס מוצר נמתח לרוחב מלא, והתמונות נראו ענקיות.

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

/* ------------------------------------------------------------ גריד המוצרים */

.woocommerce ul.products,
ul.products {
  display: grid;
  gap: var(--s-3);
  /* 2 עמודות במובייל — לא 1. מאפשר סריקה מהירה בלי גלילה אינסופית. */
  grid-template-columns: repeat(2, minmax(0, 1fr));

  /* ⚠️ איפוס הרשימה חובה: זהו <ul> ובלי זה נשארות תבליטים והזחה,
     והעמודה הראשונה נדחפת פנימה ביחס לשאר. */
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 620px)  { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); } }
@media (min-width: 900px)  { .woocommerce ul.products, ul.products { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1200px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s-5); } }

/* ⚠️ כאן היה כלל שניסה "לנטרל" את המחלקה columns-N של WooCommerce:

       ul.products[class*="columns-"] { grid-template-columns: inherit; }

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

   אין צורך בשום נטרול. columns-N משפיע רק דרך ה-CSS של WooCommerce,
   והוא ממילא מנוטרל ב-functions.php. */

/* WooCommerce מוסיף first/last לפריטים לצורך פריסת float ישנה.
   בגריד הן מיותרות ומזיקות. */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last { clear: none; margin: 0; width: auto; float: none; }

/* הכרטיס עצמו הוא <li>. מבטלים כל שארית של פריסת float. */
ul.products > li {
  float: none;
  width: auto;
  margin: 0;
  list-style: none;
}

/* ------------------------------------------------- אריחי קטגוריה בעמוד החנות
   כשעמוד החנות מוגדר להציג קטגוריות, WooCommerce פולט
   li.product-category עם תמונה וכותרת. אין לו מקבילה בפרוטוטייפ,
   ולכן הוא מקבל כאן טיפול מינימלי שמתיישב עם שפת העיצוב. */
.woocommerce ul.products li.product-category {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: center;
}
.woocommerce ul.products li.product-category img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: var(--s-3);
  background: var(--paper-2);
}
.woocommerce ul.products li.product-category h2 {
  font-size: var(--t-sm);
  font-weight: 600;
  padding: var(--s-3);
  margin: 0;
}
.woocommerce ul.products li.product-category mark {
  background: none;
  color: var(--muted-2);
  font-weight: 400;
}

/* ============================================ סינון בסלולר — מגירה

   ⚠️ מתחת ל-1000px ‏.filters-aside מוסתר (‎.layout-cat חוזר ל-block),
   ולכן בלי הכללים כאן **אין בסלולר שום דרך לסנן**. נמדד: רוחב הסרגל 0.

   הפרוטוטייפ פתר את זה במגירה נפרדת (#filterDrawer) — כלומר עותק שני
   של אותם פילטרים ב-DOM. כאן אותו אלמנט עצמו הופך למגירה ב-CSS:
   מקור אחד, בלי מזהים כפולים, ובלי שתי גרסאות שצריך לשמור זהות. */

@media (max-width: 999px) {
  .filters-aside {
    display: block;
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(340px, 88vw);
    z-index: var(--z-drawer);
    background: var(--surface);
    border-inline-start: 1px solid var(--line);
    box-shadow: -8px 0 32px rgba(46, 45, 42, .18);
    padding: var(--s-4);
    padding-block-end: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;

    /* סגור כברירת מחדל. visibility ולא display, כדי שהמעבר יונפש
       וכדי שקורא מסך לא ימצא אותו כשהוא סגור. */
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform var(--d-base) var(--e-out), visibility var(--d-base);
  }
  [dir="ltr"] .filters-aside { transform: translateX(100%); }

  body.filters-open .filters-aside {
    visibility: visible;
    transform: translateX(0);
  }

  /* ⚠️ נעילת גלילת הרקע. בלעדיה גלילה במגירה מזיזה את העמוד שמאחוריה,
     והמשתמש מאבד את מקומו ברשימת המוצרים. */
  body.filters-open { overflow: hidden; }

  .filters-close {
    display: flex; align-items: center; justify-content: center;
    inline-size: 40px; block-size: 40px;
    margin-inline-start: auto; margin-block-end: var(--s-2);
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink);
  }

  /* כפתור הקיפול של הדסקטופ חסר משמעות כשיש מגירה */
  .filters-toggle { display: none; }
}

@media (min-width: 1000px) {
  .btn-filters,
  .filters-close { display: none; }
}

/* ================================================= פילטרים כקישורים

   בפרוטוטייפ הפילטר הוא <input type="checkbox"> בתוך <label class="check">.
   בתבנית הוא <a class="check"> — כי קישור עובד בלי JavaScript, נפתח
   בלשונית חדשה, נשמר במועדפים וחוזר נכון בכפתור "אחורה". טופס שנשלח
   ב-JS שובר את שלושת אלה.

   המחיר: אין input אמיתי, ולכן צריך לצייר את תיבת הסימון. הכללים כאן
   מייצרים בדיוק את המראה של .check input, על אלמנט <span>.            */

.check-box {
  inline-size: 19px; block-size: 19px;
  border: 2px solid var(--line-2);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}

a.check {
  text-decoration: none;
  color: inherit;
}

/* מסומן. aria-current הוא גם הסימון הנגיש וגם הוו הסלקטור — מצב אחד,
   לא שניים שיכולים להיפרד. */
a.check[aria-current="true"] .check-box {
  background: var(--cedar);
  border-color: var(--cedar);
}
a.check[aria-current="true"] .check-box::after {
  content: "";
  position: absolute;
  inset-block-start: 1px; inset-inline-start: 5px;
  inline-size: 5px; block-size: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
a.check[aria-current="true"] { font-weight: 600; }

/* ⚠️ מצב פוקוס חובה: הפילטרים ניתנים לניווט במקלדת, ובלי טבעת פוקוס
   נראית אי אפשר לדעת איפה נמצאים. */
a.check:focus-visible {
  outline: 2px solid var(--focus, var(--cedar));
  outline-offset: 2px;
}

/* --------------------------------------------------------- שבב ניקוי */

.chips a.chip { text-decoration: none; }

.chip-clear {
  background: transparent;
  color: var(--muted);
  border-color: var(--line-2);
}
.chip-clear:hover { background: var(--paper-2); color: var(--ink); }

/* ================================================ עמוד מוצר — השלמות

   .pdp על כל חלקיו כבר מעוצב ב-components.css ועובר כמו שהוא. מה
   שכאן הוא רק מה ש-WooCommerce מוסיף מסביב ואין לו מקבילה בפרוטוטייפ:
   רצועת "מוצרים דומים" וקישור החזרה.

   ⚠️ רשת הביטחון הזמנית שהייתה כאן (הגבלת הגלריה של WooCommerce)
   הוסרה — עמוד המוצר נבנה, ו-single-product.php שלנו מחליף אותה. */

.single-product .related.products,
.single-product .upsells.products {
  margin-block-start: var(--s-12);
  padding-block-start: var(--s-8);
  border-block-start: 1px solid var(--line);
}
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-xl);
  margin-block-end: var(--s-4);
}

/* ⚠️ ה-h2 יושב **בתוך** ה-<section> שגם מכיל את ul.products. בלי
   ההצהרה הזו הוא הופך לפריט בגריד ותופס עמודה משלו ליד המוצרים. */
.single-product .related.products,
.single-product .upsells.products { display: block; }

/* ------------------------------------------------------------ תוצאות וסידור */

.woocommerce-result-count { color: var(--muted); font-size: var(--t-sm); }

/* ⚠️ ‎.toolbar select‎ ב-components.css מוגדר עם ‎min-width: 0‎, כדי שלא
   ישמור על רוחב האופציה הארוכה ביותר. בפרוטוטייפ זה עבד כי ה-select
   ישב ישירות בסרגל; כאן WooCommerce עוטף אותו ב-<form>, והעוטף מתכווץ
   לרוחב מינימלי — הבורר יצא ברוחב ~100px והתווית «מיון: מומלץ» נחתכה
   ל«מי…».

   רוחב מינימלי שמתאים לתווית הארוכה ביותר, ותקרה שלא תשתלט על הסרגל
   במסך צר. */
.toolbar .woocommerce-ordering {
  flex: 0 1 auto;
  min-inline-size: 0;
  margin: 0;
}
.toolbar .woocommerce-ordering select,
.woocommerce-ordering select {
  font-family: var(--font-body);
  min-inline-size: 170px;
  max-inline-size: min(260px, 52vw);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding-inline: var(--s-3) var(--s-6);
  background: var(--surface);
  color: var(--ink);
}

/* ⚠️ ספירת התוצאות מופיעה פעמיים: פעם ב-.toolbar שלנו ופעם דרך
   woocommerce_before_shop_loop. השנייה מיותרת ומבלבלת. */
.woocommerce-notices-wrapper + .woocommerce-result-count,
.layout-cat .woocommerce-result-count { display: none; }

/* פירורי לחם */
.woocommerce-breadcrumb {
  font-size: var(--t-sm);
  color: var(--muted);
  margin-block-end: var(--s-4);
}
.woocommerce-breadcrumb a { color: var(--muted); }

/* כותרת העמוד */
.woocommerce-products-header__title {
  font-family: var(--font-display);
  font-weight: 500;
}

/* ------------------------------------------------------------ עטיפת התוכן
   ⚠️ WooCommerce מרנדר את התוכן שלו בלי מכל, ולכן בלי זה הגריד נצמד
   לשולי החלון ואין לו רוחב מרבי — בדסקטופ רחב הכרטיסים נמתחים לרוחב
   כל המסך. .wrap הוא אותו מכל שמשמש את שאר האתר. */
.woocommerce-page #main > .woocommerce,
#main > .woocommerce {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--s-6);
}


/* ==================================================== סיכום הסל במגירה

   ⚠️ נמדד ב-390px: ‎.drawer-foot‎ תפס 310px מול 317px לרשימת המוצרים —
   44% מהמגירה, ורק שני מוצרים נראים בכל רגע. הלקוח דיווח על זה.

   הפתרון אינו לכווץ עוד טקסט אלא לחלק מחדש: פס המשלוח ופירוט הסכומים
   ירדו לסוף אזור **הגלילה** (unicco_cart_lines_html), והתחתית הקבועה
   נשארה עם הסה״כ וכפתור התשלום בלבד. שום מידע לא הוסתר. */
.cart-summary {
  margin-block-start: var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
}
/* שורת ה-cartline האחרונה נגמרת בקו, והסיכום פותח בקו. שניים ברצף
   נקראים כתקלה. */
.drawer-body .cartline:last-of-type { border-block-end: 0; }

/* בתחתית יש רק שורה אחת, וההפרדה מהרשימה כבר נעשית ע"י ‎.drawer-foot‎
   עצמו. הקו והריווח של ‎.grand‎ נועדו להפריד אותה משורות שכבר אינן שם. */
.drawer-foot .totals .grand {
  border-block-start: 0;
  margin-block-start: 0;
  padding-block-start: 0;
}

/* ================================================ שדות הצ׳קאאוט

   ⚠️ WooCommerce פולט את השדות בתוך ‎.form-row‎ עם ‎label‎ ו-
   ‎input.input-text‎. ‎.field‎ של הפרוטוטייפ — שמעצב את כל זה — **אינו
   מופיע במרקאפ הזה כלל**, ולכן השדות נשארו בעיצוב ברירת המחדל של
   הדפדפן.

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

   הכללים כאן מועתקים אחד-לאחד מ-‎.field‎ ולא נכתבו מחדש: שתי משפחות
   שדות שנראות שונה באותו טופס הן באג ויזואלי בפני עצמו. */
.woocommerce-checkout .form-row,
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-end: var(--s-4);
}
.woocommerce-checkout .form-row label,
.woocommerce-billing-fields .form-row label,
.woocommerce-shipping-fields .form-row label,
.woocommerce-additional-fields .form-row label {
  font-size: var(--t-sm);
  font-weight: 600;
}
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 48px;
  padding-inline: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
/* ⚠️ block-size: auto חובה — בלעדיו ה-textarea נלכד ב-48px של השורה
   שמעליו וחוזר להיות הריבוע הזעיר. */
.woocommerce-checkout .form-row textarea {
  block-size: auto;
  min-block-size: 96px;
  padding: var(--s-3) var(--s-4);
  line-height: 1.5;
  resize: vertical;
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--cedar-300);
  outline: none;
}
/* ⚠️ 16px בסלולר — iOS מקרב את התצוגה אוטומטית בכל שדה קטן מזה,
   והמשתמש נשאר מקורב אחרי שהמקלדת נסגרת. */
@media (max-width: 899px) {
  .woocommerce-checkout .form-row .input-text,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .form-row textarea { font-size: 16px; }
}
.woocommerce-checkout .form-row .description,
.woocommerce-checkout .form-row .woocommerce-input-wrapper + .description {
  font-size: var(--t-xs);
  color: var(--muted);
}
.woocommerce-checkout .form-row abbr.required {
  color: var(--danger, #b3261e);
  text-decoration: none;
}

/* רחוב ומספר בית זה לצד זה — הם פרט אחד שנקטע לשניים, והצגתם
   כשתי שורות נפרדות גורמת לדלג על השני. */
@media (min-width: 480px) {
  .woocommerce-billing-fields .form-row-first,
  .woocommerce-shipping-fields .form-row-first { inline-size: 100%; }
  .uc-street-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: var(--s-3);
  }
}

/* ============================================ «טעינת עוד מוצרים» */
.uc-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-block-start: var(--s-8);
}
.uc-loadmore { min-inline-size: 220px; }

/* כשה-JS פעיל, העימוד המספרי מיותר — הכפתור עושה את אותו דבר בלי
   לקטוע את הגלילה. בלי JS הוא נשאר הניווט היחיד, וגם מנועי החיפוש
   הולכים אחריו. */
.js-on .woocommerce-pagination { display: none; }

/* מצב טעינה של הגריד. ⚠️ הגריד נשאר במקומו ובגובהו ורק מתעמעם —
   החלפתו בשלד הייתה מקפיצה את העמוד ומאבדת את מקום הגלילה. */
#uGrid { transition: opacity var(--d-fast, .15s) ease; }
#uGrid.is-loading { opacity: .45; pointer-events: none; }