/* ============================================================================
   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;
}
/* ⚠️⚠️ **‎outline: none‎ צומצם ל-‎:focus:not(:focus-visible)‎ — 20/10/2026.**
   הכלל הזה הוא (0,4,0) וגבר על ‎:focus-visible‎ הגלובלי שב-base.css,
   ולכן **מחק את טבעת המיקוד גם לניווט מקלדת — בעמוד התשלום**. אדם
   שממלא את פרטי האשראי במקלדת לא ידע באיזה שדה הוא עומד.

   זה הממצא החמור מבין ארבעת ממצאי הנגישות: לא דף שיווקי אלא השלב
   שבו הלקוח מוסר פרטי תשלום. ת"י 5568, WCAG 2.4.7.

   ⚠️ הצורה הזו משאירה את העיצוב הנקי לעכבר ומחזירה את הטבעת למקלדת —
   בדיוק מה שהכלל הגלובלי ב-base.css כבר עושה לכל שאר האתר. */
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--cedar-300);
}
.woocommerce-checkout .form-row .input-text:focus:not(:focus-visible),
.woocommerce-checkout .form-row select:focus:not(:focus-visible),
.woocommerce-checkout .form-row textarea:focus:not(:focus-visible) {
  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; }

/* ======================= רצועת תת-הקטגוריות — סלולר בלבד (01/10/2026)
 *
 * «בסלולר המעבר לתת קטגוריות מאד לא נוח… הן נסתרות תחת סינון».
 *
 * ⚠️ **הגבול 1000px אינו שרירותי** — הוא חייב להיות זהה לזה של
 * ‎.filters-aside‎ ב-components.css:
 *
 *     .filters-aside { display: none; }
 *     @media (min-width: 1000px) { .filters-aside { display: block; } }
 *
 * שני הכללים הם שני צדדים של אותו מתג: מתחת לגבול פועלת הרצועה,
 * מעליו פועל סרגל הצד. שינוי אחד בלי השני ייצור או **כפילות** (שתי
 * רשימות של אותן תת-קטגוריות באותו מסך) או **חור** (רוחב שבו אין
 * שום דרך להגיע אליהן).
 *
 * ⚠️ אין כאן שום עיצוב משלה במכוון. הצ'יפים, הגלילה ומצב ‎is-active‎
 * מגיעים כולם מ-‎.catrail‎, שמוגדרת עצמאית ואינה תלויה בהדר. */
.catrail-sub { margin-block-end: var(--s-4); }

@media (min-width: 1000px) {
  .catrail-sub { display: none; }
}
/* ============================================ תצוגה מהירה של מוצר
 *
 * גוף החלונית בלבד. **המעטפת** (רקע מעומעם, פאנל, גיליון בסלולר)
 * מגיעה מ-‎.qlmodal‎ שכבר קיימת — ראו assets/js/quickview.js.
 *
 * ⚠️ המחלקות כאן **חדשות ומוגדרות כאן**, בשונה מהמעטפת. זה רכיב חדש
 * ולא שימוש חוזר בשם קיים.
 *
 * ⚠️ שתי עמודות רק מ-720px ומעלה — אותו גבול שבו ‎.qlm-panel‎ מפסיק
 * להיות גיליון מלא והופך לחלון ממורכז. שני הערכים חייבים להישאר
 * זהים, אחרת תתקבל פריסת שתי עמודות בתוך גיליון צר. */
.qv { display: grid; gap: var(--s-5); }

@media (min-width: 720px) {
  .qv {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.qv-media {
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ⚠️ ‎contain‎ ולא ‎cover‎: אלה צילומי מוצר, וחיתוך בקבוק באמצע נראה
   כמו תקלה. אותו שיקול כמו ב-‎.dept-img img‎. */
.qv-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--s-4);
  /* הכלל הגלובלי ב-base.css נותן רקע לכל תמונה; כאן הוא מיותר כי
     למכל כבר יש אותו רקע בדיוק. */
  background: transparent;
}

.qv-body {
  display: flex; flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.qv-name { margin: 0; font-size: var(--t-lg); line-height: 1.3; }
.qv-price { font-size: var(--t-2xl); font-weight: 700; }

.qv-desc {
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  margin-block: var(--s-2) 0;
}

.qv-actions {
  display: flex; align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-4);
  flex-wrap: wrap;
}

/* ⚠️ ‎.add‎ נושא ‎margin-inline-start: auto‎ מהכרטיס בגריד, ששם הוא
   נדחף לקצה. כאן הוא יושב בשורת פעולות רגילה ולכן מאופס. */
.qv-actions .add { margin-inline-start: 0; }

/* ⚠️ הפירוט הוא ילד ישיר של ‎.qv‎ ולכן נפרס על שתי העמודות. בתוך
   ‎.qv-body‎ הוא היה נדחס לעמודה שלצד התמונה. ראו inc/quickview.php.

   ⚠️ הקו העליון נדרש כאן ולא בעמוד המוצר: ‎.acc‎ נושאת קו **תחתון**
   בלבד, ובעמוד הקו העליון מגיע מ-‎.pdp-info‎. בחלון אין מעטפת כזו,
   והאקורדיון הראשון היה נראה תלוי באוויר. */
.qv-details {
  grid-column: 1 / -1;
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--s-4);
}

/* ============================ דף מוצר — רקע לבן וטקסט שחור
 *
 * בקשת הלקוח 16/10/2026: «הרקע של התמונה היום ירקרק צריך לשנות אותו
 * ללבן», «כל הטקסט להחליף לצבע שחור», «כל זה שינויים בדף מוצר בלבד».
 *
 * ⚠️⚠️ **הרקע הירקרק אינו באלמנט — הוא בתמונה עצמה.** ‎base.css‎ נותן
 * ‎img { background: var(--paper-2) }‎ לכל תמונה באתר, ובערכת olive
 * ‎--paper-2‎ הוא ‎#F7F9F4‎. זו אותה מלכודת בדיוק שתפסה אותנו באריחי
 * המחלקות — שם חיפשנו את המקור בצילום המוצר במקום בכלל הגלובלי.
 *
 * ⚠️ ולכן הכלל כאן **חייב לכסות גם את ‎img‎ וגם את המכל**. אחד מהם
 * לבדו משאיר ריבוע ירקרק מאחורי צילום מוצר שקוף.
 *
 * ⚠️ ‎#fff‎ ולא ‎var(--surface)‎ במכוון: הבקשה הייתה «לבן», ולא «מה
 * שהערכה קוראת לו משטח». היום הם זהים; אם מישהו יצבע ‎--surface‎
 * בעתיד, עמוד המוצר לא אמור להשתנות איתו.
 *
 * ⚠️ הכלל הגלובלי ב-base.css **נשאר על כנו** לכל שאר האתר: שם הרקע
 * הירקרק הוא חלק מהעיצוב (אריחי מחלקות, כרטיסים ברצועות). */
.pdp-gallery,
.pdp-main,
.pdp-main img,
.pdp-thumbs button,
.pdp-thumbs img,
.qv-media,
.qv-media img { background: #fff; }

/* ⚠️ רשימה מפורשת ולא ‎.pdp *‎. סלקטור גורף היה מוחק גם את מה שצבעו
 * **נושא מידע** ולא קישוט, וזה לא מה שהתבקש:
 *   • ‎.pdp-price.is-sale‎ — טרקוטה, מסמן שהמחיר מוזל.
 *   • ‎.badge-stock / .badge-out‎ — ירוק מול אדום, מצב המלאי.
 *   • ‎.card-was‎ — המחיר הקודם, מעומעם במכוון כדי שלא יתחרה בחדש.
 *   • הכפתורים והסטפר — צבעי הפעולה של האתר.
 *
 * ⚠️ ‎var(--ink)‎ ולא ‎#000‎: ‎#323232‎, יחס ניגודיות 12.82 מול לבן.
 * שחור מוחלט על לבן נקרא קשה יותר בגוש טקסט, וזה גוף הטקסט של כל
 * האתר — עמוד מוצר בשחור אחר היה נראה כמו עמוד מאתר אחר. */
/* ⚠️⚠️ **‎:root‎ בראש כל סלקטור — נוסף 18/10/2026 אחרי ש«עדיין לא
 * הכל שחור».** הגרסה הקודמת של הרשימה הזו נכתבה בלי ‎:root‎, והיא
 * **הפסידה בספציפיות**: ‎:root[data-brand="olive"] .card-brand‎ היא
 * (0,3,0) מול (0,2,0) שלנו, ולכן שם המותג נשאר ירוק ומחיר היחידה
 * נשאר ירוק. אותו סיפור ב-‎.card-unit‎.
 *
 * ⚠️ ‎:root‎ מעלה אותנו ל-(0,3,0) — **תיקו** מול הערכה, ואז מכריע
 * סדר המקור. ‎woocommerce.css‎ נרשם עם ‎unicco-theme‎ כתלות
 * (functions.php) ולכן נטען אחריה. אם מישהו ישנה את סדר הטעינה,
 * הכללים האלה מתים בשקט — זו התלות שצריך לדעת עליה.
 *
 * ⚠️ נוספו גם ‎* ‎ בתוך המחיר, גוף האקורדיון והמפרט: שם יושבים
 * ‎<span>‎ של הסכום ושל ה-₪, ותגיות מתוך תיאור היצרן. */
:root .pdp h1,
:root .pdp .card-brand,
:root .pdp-buy > p,
:root .pdp .unit-price,
:root .pdp-price:not(.is-sale),
:root .pdp-info,
:root .pdp-info .acc > summary,
:root .pdp-info .acc-body,
:root .pdp-info .acc-body *,
:root .pdp-info .speclist div,
:root .pdp-info .speclist div *,
:root .pdp .pdp-note,
:root .qv-name,
:root .qv-desc,
:root .qv-price,
:root .qv-price *,
:root .qv .card-brand,
:root .qv .card-size,
:root .qv .card-unit,
:root .qv .acc > summary,
:root .qv .acc-body,
:root .qv .acc-body *,
:root .qv .speclist div,
:root .qv .speclist div *,
:root .qv .pdp-note { color: var(--ink); }

/* ============================ החלון הצף בסלולר — הכל במסך אחד
 *
 * בקשת הלקוח 16/10/2026: «אצלו בסלולר הכל בדף אחד, התמונה, הטקסט
 * והמחיר, אצלנו צריך לגלול».
 *
 * ⚠️⚠️ **הגנב האמיתי היה התמונה הריבועית.** ‎.qv-media‎ היא
 * ‎aspect-ratio: 1/1‎ ברוחב מלא — על מסך 390px זה 390px גובה, לפני
 * שהשם, המחיר וכפתור ההוספה בכלל התחילו. החלפת הרוחב בגובה משאירה
 * אותה ריבועית אבל חוסמת אותה בשליש מגובה המסך.
 *
 * ⚠️ ‎justify-self: center‎ חובה: ילד גריד הוא ‎stretch‎ כברירת מחדל,
 * וה-‎stretch‎ היה כופה רוחב מלא ומבטל את ה-‎aspect-ratio‎.
 *
 * ⚠️ ‎.is-qv‎ ולא ‎.qlmodal‎: אותה מעטפת משרתת גם את חלון הרשימה,
 * ושם הגיליון **צריך** להיות בגובה קבוע — הוא מכיל רשימה ארוכה
 * ושדה שמעליו נפתחת מקלדת. */
@media (max-width: 719px) {

  .qlmodal.is-qv .qlm-panel { block-size: auto; max-block-size: 92dvh; }
  .qlmodal.is-qv .qlm-head { padding: var(--s-3) var(--s-4); }
  .qlmodal.is-qv .qlm-head h2 { font-size: var(--t-md); }
  .qlmodal.is-qv .qlm-body { padding: var(--s-4); }

  .qv { gap: var(--s-3); }

  .qv-media {
    block-size: min(34dvh, 260px);
    inline-size: auto;
    aspect-ratio: 1 / 1;
    justify-self: center;
  }

  .qv-media img { padding: var(--s-2); }

  .qv-actions { margin-block-start: var(--s-3); }
  .qv-details { margin-block-start: var(--s-3); }
}

/* ============================ «הוספה לסל» במילים — דף מוצר בלבד
 *
 * בקשת הלקוח 18/10/2026: «להחליף רק בדף המוצר את ה-+ בכפתור שכתוב
 * עליו הוסף לסל, וכשלוחצים עליו נפתח +/- להוסיף כמות».
 *
 * ⚠️ המעבר לסטפר **כבר עבד** ולא נגעתי בו: ‎paintControl()‎ מחליף את
 * תוכן ‎.add‎ ברגע שהכמות גדולה מאפס. השינוי כאן הוא בכיתוב בלבד.
 *
 * ⚠️ התווית נפלטת תמיד ומוסתרת כאן — ראו unicco_add_control(). */
.add-btn-txt { display: none; }

/* ⚠️ ‎.pdp .add‎ ו-‎.qv .add‎ בלבד. הכרטיסים ברצועות ובגריד נשארים עם
 * «+» עגול: שם אין רוחב לכיתוב, וזה המקום היחיד שהלקוח ביקש לשנות. */
.pdp .add .add-btn,
.qv .add .add-btn {
  inline-size: 100%;
  border-radius: var(--r-md);
  gap: var(--s-2);
  padding-inline: var(--s-4);
  font-weight: 600;
}

.pdp .add .add-btn svg,
.qv .add .add-btn svg { display: none; }

.pdp .add .add-btn .add-btn-txt,
.qv .add .add-btn .add-btn-txt { display: inline; }

/* ⚠️ ‎flex: 1‎ על ‎.add‎ בחלון: בלעדיו הכפתור מתכווץ לרוחב הטקסט
 * ויושב לצד «לעמוד המוצר» כשני כפתורים קטנים. בעמוד המוצר
 * ‎style="flex:1"‎ כבר יושב על ה-‎div‎ עצמו. */
.qv-actions .add { flex: 1; min-inline-size: 160px; }

/* ⚠️⚠️ **הסטפר חייב להיות ברוחב הכפתור.** בלי זה הכפתור הרחב קורס
 * לסטפר צר ברגע הלחיצה — קפיצה שנראית כמו תקלה, ובדיוק המצב שהערת
 * האזהרה על «מבנה שונה בין PHP ל-JS» נועדה למנוע. כאן זה לא מבנה
 * שונה אלא רוחב שונה, והתחושה זהה. */
.pdp .add .stepper,
.qv .add .stepper {
  inline-size: 100%;
  justify-content: space-between;
}