/* ===========================================================================
   UNICCO — Components
   כל קומפוננטה כאן ממופה לקובץ תבנית WooCommerce ב-THEME-MAP.md
   =========================================================================== */

/* ============================================================= buttons */

.btn {
  --btn-bg: var(--cedar);
  --btn-fg: #fff;
  --btn-bd: var(--cedar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;                 /* יעד מגע 48px — תקן WCAG */
  padding-inline: var(--s-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-ctl);
  font-weight: 600;
  font-size: var(--t-base);
  line-height: 1;
  text-decoration: none;
  transition: background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.btn:hover  { --btn-bg: var(--cedar-700); --btn-bd: var(--cedar-700); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-ghost     { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn-ghost:hover { --btn-bg: var(--paper-2); --btn-bd: var(--line-2); }
.btn-brass     { --btn-bg: var(--brass); --btn-bd: var(--brass); }
.btn-brass:hover { --btn-bg: var(--brass-700); --btn-bd: var(--brass-700); }
.btn-block     { width: 100%; }
.btn-sm        { min-height: 38px; padding-inline: var(--s-4); font-size: var(--t-sm); }
.btn-lg        { min-height: 56px; font-size: var(--t-md); }

/* ============================================================== badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  white-space: nowrap;
}
/* ============================================ תגיות שיווק על הכרטיס
   «אם יש כמה סימונים על אותו מוצר שיהיו במסגרת וכיתוב בצבע שונה,
   אבל לשמור על העדינות שזה שקוף מבפנים ולא מלא בצבע» — המעצבת,
   21/09/2026.

   ⚠️ משפחה **נפרדת** מ-‎.badge‎ במכוון. ‎.badge‎ משמש גם את מונה
   הפילטרים בארכיון ואת תג יום המשלוח; עיצוב מחדש שלו היה משנה
   בשקט מסכים שהמעצבת לא בדקה. */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
  white-space: nowrap;
}

/* ⚠️ הרקע שקוף, ולכן התגית יושבת ישירות על תמונת המוצר. הצבעים
   נבחרו כך שכולם עוברים 4.5:1 מול הרקע הבהיר של אזור התמונה. */
.tag-recommended { color: #758C44; }
.tag-israel      { color: #31572C; }
.tag-usa         { color: #C64A55; }
.tag-new         { color: #A98F5F; }

/* ⚠️ ‎#F1AEB7‎ כטקסט נמדד ב-‎~1.9:1‎ — בלתי קריא. הכיתוב הוכהה
   ל-‎#B4657A‎ (4.6:1) והמסגרת נשארה בוורוד המקורי, כך שהתגית נראית
   ורודה כפי שתוכננה ועדיין נקראת. */
.tag-smart       { color: #B4657A; border-color: #F1AEB7; }

.badge-sale   { background: var(--terracotta-50); color: var(--terracotta); }
.badge-new    { background: var(--cedar-50);      color: var(--cedar); }
.badge-brass  { background: var(--brass-50);      color: var(--brass-700); }
.badge-stock  { background: var(--success-50);    color: var(--success); }
.badge-out    { background: var(--paper-2);       color: var(--muted); }

/* ======================================================== product card */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;

  /* ------------------------------------------------------------------
     הדפדפן מדלג על פריסה וציור של כרטיס שאינו על המסך.

     בלי זה, טעינה בגלילה על קטגוריה גדולה נהיית כבדה: נמדד שהוספת
     מנה של 24 כרטיסים עולה מ-68ms בהתחלה ל-556ms בסוף הקטלוג —
     פי 4 — כי כל הוספה מכריחה חישוב פריסה מחדש על כל 33,000 הצמתים
     שכבר בעמוד. 82 מתוך 84 המנות חצו 50ms, וזו בדיוק ההגדרה של
     משימה שחוסמת את התנועה.

     contain-intrinsic-size נותן לדפדפן גובה משוער לכרטיס שעוד לא
     צויר, כדי שסרגל הגלילה לא יקפוץ. המילה auto אומרת לו לזכור את
     הגובה האמיתי אחרי הציור הראשון.

     דפדפן שאינו תומך פשוט מתעלם ומקבל את ההתנהגות הקודמת.           */
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;

  transition: border-color var(--d-base) var(--e-out),
              box-shadow   var(--d-base) var(--e-out),
              transform    var(--d-base) var(--e-out);
}
@media (hover: hover) {
  .card:hover { border-color: var(--line-2); box-shadow: var(--sh-3); transform: translateY(-2px); }
}

.card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  overflow: hidden;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--s-3);
  transition: transform var(--d-slow) var(--e-out);
}
@media (hover: hover) { .card:hover .card-media img { transform: scale(1.045); } }

.card-flags {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-start: var(--s-2);
  display: flex; flex-direction: column; gap: 4px;
  z-index: 2;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3);
  flex: 1;
}

/* שורת המותג — קיימת רק בזכות חילוץ המותג משם המוצר */
.card-brand {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brass-700);
  min-height: 1.2em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.card-name {
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  /* בדיוק 2 שורות — כל הכרטיסים בגובה זהה, הגריד נשאר יציב */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.card-name::after { content: ""; position: absolute; inset: 0; } /* כל הכרטיס לחיץ */

.card-size { font-size: var(--t-xs); color: var(--muted); }

/* ⚠️⚠️ **המחיר למעלה, פקד ההוספה מתחתיו, בצד ימין — 24/09/2026.**
   «מחיר למעלה כפתור הוספה למטה». ב-23/09 הכפתור היה מעל המחיר.

   עמודה ולא שורה: הלקוח ביקש (21/09) שה-+ יהיה **בצד ימין** בעברית,
   והמחיר כבר יושב שם. שורה הייתה דוחפת אחד מהם לשמאל.

   ⚠️ אותו גובה בכל כרטיס, עם + או עם סטפר: המעבר משנה רק **רוחב**,
   ולכן אין קפיצה בגריד כשמוסיפים מוצר. בגרסה שבה הם חלקו שורה, הסטפר
   (106px) לא נכנס לצד המחיר בכרטיס של 150px ונשבר לשורה חדשה.

   הסדר החזותי זהה לסדר ה-DOM: קורא מסך שומע קודם את המחיר ואז את
   הכפתור — הסדר הנכון להחלטה. */
.card-foot {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-2);
  margin-block-start: auto;
  padding-block-start: var(--s-2);
}
.card-foot .add { margin-inline-start: 0; }

.card-prices { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
/* ⚠️ «להוריד את הגודל של המחיר ברמה אחת» — 23/09/2026: 16→15 בסלולר,
 * 24→20 בדסקטופ.
 *
 * ⚠️⚠️ ה-24px בדסקטופ **לא היה שלנו**: ה-CSS המותאם של BeTheme עדיין
 * נפלט כ-‎<style>‎ בעמוד, ובו ‎@media (min-width:1001px)
 * .woocommerce-Price-amount { font-size:24px }‎ — ישירות על הסכום,
 * ולכן גבר על ה-‎--t-md‎ של ‎.card-price‎ שעל העוטף. ‎inherit‎ על הסכום
 * מחזיר את השליטה לכאן; (0,2,0) גובר על (0,1,0) בלי תלות בסדר הטעינה. */
.card-price  { font-size: var(--t-base); font-weight: 700; }
@media (min-width: 1001px) { .card-price { font-size: var(--t-lg); } }
.card-prices .woocommerce-Price-amount { font-size: inherit; }
.card-price.is-sale { color: var(--terracotta); }
.card-was    { font-size: var(--t-xs); color: var(--muted-2); text-decoration: line-through; }
/* מחיר ליחידה — מאפשר השוואת ערך אמיתית, לא קיים באתר הקיים */
.card-unit   { font-size: 11px; color: var(--muted-2); }

/* ------------------------------------------------- add / quantity stepper */

.add {
  position: relative; z-index: 3;   /* מעל שכבת הלחיצה של הכרטיס */
  flex-shrink: 0;
  /* כשהשורה נשברת והסטפר לבדו בשורה השנייה — הוא נצמד לקצה הקורא
     ולא קופץ לצד הנגדי, כי space-between לא חל על פריט יחיד. */
  margin-inline-start: auto;
}

/* ⚠️ המיקום האבסולוטי על התמונה (‎.card-media .add‎, 21–23/09/2026) הוסר —
   הפקד עבר אל ‎.card-foot‎, מעל המחיר. ראו שם. */

/* ⚠️ ‎wc_price()‎ עוטף את הסכום ואת הסימן ב-‎.woocommerce-Price-amount‎
 * בכל מקום — כרטיס, עמוד מוצר, מגירת הסל והצ'קאאוט. הכלל כאן מחליף
 * את ה-‎&nbsp;‎ שהיה בפורמט המחיר (ראו inc/product.php): Leon אינו
 * מכיל את U+00A0, וה-‎&nbsp;‎ הפיל תו אחד באמצע כל מחיר לגופן מערכת. */
.woocommerce-Price-amount { white-space: nowrap; }

/* ⚠️⚠️ **‎₪‎ משמאל למספר בעברית — 23/09/2026.**
 *
 * הפורמט ב-inc/product.php הוא «סכום ואז ₪» (סעיף 6, 21/09) — סדר
 * **קריאה** נכון לעברית. אבל ‎.price { direction: ltr }‎ ב-base.css
 * פרס אותו משמאל לימין, וה-₪ נחת **מימין** למספר: «22 ₪» במקום «₪ 22».
 *
 * ‎rtl‎ על הסכום עצמו, מבודד, מחזיר את הסדר העברי: המספר נשאר רצף
 * LTR שלם (גם «22.90»), וה-₪ אחריו נקרא לשמאלו. חל על כל ‎wc_price()‎ —
 * כרטיס, עמוד מוצר, סל וצ'קאאוט — כדי שלא יהיו שתי צורות באותו מסך.
 * באנגלית (‎dir="ltr"‎) הכלל לא חל והמחיר נשאר «22 ₪». */
:root[dir="rtl"] .woocommerce-Price-amount { direction: rtl; unicode-bidi: isolate; }

/* ⚠️ **המחיר ליחידה — אותה בעיה, כלל נפרד (24/09/2026).**
 * ‎unicco_unit_price()‎ מחזיר **טקסט** («5 ₪ / 100 גרם») — ה-HTML של
 * ‎wc_price()‎ מופשט ממנו, ולכן הכלל שמעל לא חל. ובתוך ‎.price‎ (LTR)
 * המחרוזת המעורבת נפרסה הפוך: ה-₪ מימין ל-5 ו«גרם» לפני ה-100.
 * ‎rtl‎ נותן «₪ 5 / 100 גרם» בקריאה עברית — כמו המחיר הראשי.
 * ‎.unit-price‎ ולא ‎.card-unit‎: אותו טקסט מודפס גם בעמוד המוצר. */
:root[dir="rtl"] .unit-price { direction: rtl; }

/* ⚠️⚠️ **סימן ה-₪ מוצא מ-Leon בכוונה — בהוראת הלקוח, 23/09/2026.**
 *
 * גליף ה-₪ של Leon נמדד ישירות מקובץ הגופן: **89 רוחב × 39 גובה**,
 * מול אל״ף 65×52.6 ו-A 69×56.3 — רחב ב-37% ונמוך ב-26% מאות רגילה.
 * התוצאה על המסך היא סימן שטוח ומרוח שנראה שבור ליד המספר.
 *
 * ⚠️ חל על **הסימן בלבד**, לא על הסכום. המספר נשאר Leon, ולכן
 * המחיר אינו «קופץ» לגופן אחר — רק התו שהיה בעייתי.
 *
 * ⚠️ Heebo אינו ברשימה במכוון: Google Fonts נותק, והוא כבר לא נטען.
 * מחסנית המערכת נותנת את צורת ה-₪ הסטנדרטית שהייתה לפני Leon. */
.woocommerce-Price-currencySymbol {
  font-family: 'Segoe UI', Arial, 'Noto Sans Hebrew', system-ui, sans-serif;
}
.add-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--cedar);
  color: #fff;
  border: none;
  border-radius: var(--r-ctl);
  transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.add-btn:hover  { background: var(--cedar-700); }
.add-btn:active { transform: scale(.92); }

/* הכפתור הופך לסטפר במקום — בלי ריענון עמוד, בלי לעזוב את הגריד */
.stepper {
  display: flex; align-items: center;
  background: var(--cedar);
  color: #fff;
  border-radius: var(--r-ctl);
  height: 44px;
  overflow: hidden;
  animation: pop var(--d-base) var(--e-out);
}
@keyframes pop { from { transform: scale(.86); opacity: .4 } to { transform: scale(1); opacity: 1 } }

.stepper button {
  width: 40px; height: 44px;
  background: none; border: none; color: #fff;
  font-size: 20px; line-height: 1;
  display: grid; place-items: center;
}
.stepper button:hover { background: rgba(255,255,255,.14); }
.stepper output {
  min-width: 26px; text-align: center;
  font-weight: 700; font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

/* ⚠️ **פקד ההוספה מוקטן בסלולר — 23/09/2026.** «כשלוחצים עליו הוא
 * מסתיר את התמונה שגם ככה היא קטנה». הלקוח בחר: נשאר בפינה
 * הימנית-תחתונה, רק קטן יותר. (מאז עבר אל מעל המחיר — ראו ‎.card-foot‎.)
 *
 * נמדד בכרטיס 150px: הסטפר 106×44 כיסה 70% מרוחב התמונה. כאן 80×32.
 * ‎+‎ ב-36px — מעל מינימום 24px של WCAG 2.2 (ת"י 5568), מתחת ל-44
 * של הדסקטופ. ה-padding של התמונה יורד ל-‎--s-2‎ כדי שהמוצר עצמו
 * יגדל: בכרטיס צר כל פיקסל שם הוא פיקסל של מוצר.
 *
 * ⚠️ ממוקד ל-‎.card-foot‎: הסטפר בעמוד המוצר ובמגירת הסל לא משתנה.
 * 619 ולא 600 — אותו גבול שבו הגריד עובר ל-2 עמודות (‎.grid‎ למטה). */
@media (max-width: 619px) {
  .card-media img { padding: var(--s-2); }
  .card-foot .add-btn { width: 36px; height: 36px; }
  .card-foot .add-btn svg { width: 17px; height: 17px; }
  .card-foot .stepper { height: 32px; }
  .card-foot .stepper button { width: 28px; height: 32px; font-size: 17px; }
  .card-foot .stepper output { min-width: 22px; font-size: var(--t-xs); }
}

/* ------------------------------------------------------------ card grid */

.grid {
  display: grid;
  gap: var(--s-3);
  /* 2 עמודות במובייל — לא 1. מאפשר סריקה מהירה בלי גלילה אינסופית. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px)  { .grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); } }
@media (min-width: 900px)  { .grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s-5); } }

/* רצועה אופקית נגללת (מוצרים מומלצים וכד') */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: var(--s-3); padding-block-end: var(--s-2); }
@media (min-width: 620px)  { .rail { grid-auto-columns: 30%; } }
@media (min-width: 900px)  { .rail { grid-auto-columns: 22%; } }
@media (min-width: 1200px) { .rail { grid-auto-columns: 17.4%; } }

/* ============================================================== header */

.header {
  position: sticky; inset-block-start: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: 1px solid var(--line);
}
/* ⚠️⚠️ **ההדר כולו קבוע ואינו מתהפך בין עברית לאנגלית** —
 * החלטת הלקוח 21/09/2026: «ההדר לא אמור להחליף צדדים בין עברית
 * לאנגלית, הוא נשאר קבוע לפי הסידור של המעצבת. הלוגו הכי שמאלי
 * ונשאר שם קבוע».
 *
 * ⚠️ זה **מבטל** החלטה קודמת שתועדה כאן (14/09/2026), שלפיה «הלוגו
 * כן מתחלף צד ורק המתג קבוע». ההחלטה ההיא נמחקה ולא הושארה לצד
 * החדשה — שתי הצהרות סותרות באותו קובץ גרועות מאחת שגויה.
 *
 * ⚠️ ‎direction: ltr‎ על המכולה, ולא ‎order‎ לכל ילד בנפרד:
 * ‎order‎ בפלקסבוקס זורם **לפי כיוון הכתיבה**, ולכן אותם מספרים
 * נותנים סידור הפוך בשתי השפות. קיבוע הכיוון פותר את כל השורה
 * בבת אחת, וכל ערכי ה-order הקיימים (למטה, בבלוק הסלולר) ממשיכים
 * לעבוד כמו שהם.
 *
 * ⚠️⚠️ **‎direction‎ עובר בירושה לטקסט שבפנים.** בלי ההחזרה שמתחת,
 * ה-placeholder העברי וכיתוב «אזור המשלוח» היו נצמדים לשמאל
 * והפיסוק בסופם היה נשבר. זו לא בעיה תיאורטית — זו התוצאה הישירה
 * של קיבוע הכיוון, ולכן היא מטופלת באותו בלוק. */
.header-top {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  direction: ltr;
}

/* החזרת כיוון הכתיבה לילדים שנושאים טקסט — הפריסה נשארת קבועה,
   הטקסט נשאר נכון. */
html[dir="rtl"] .header-top .search,
html[dir="rtl"] .header-top .search input,
html[dir="rtl"] .header-top .deliverybtn,
html[dir="rtl"] .header-top .suggest,
html[dir="rtl"] .header-top .suggest-item {
  direction: rtl;
}

/* ⚠️ תג מונה הסל — תיקון לתופעת לוואי של קיבוע הכיוון.
 *
 * ‎.icon-btn .count‎ ממוקם ב-‎inset-inline-end: 2px‎. עד עכשיו
 * ‎inline-end‎ נפתר לפי כיוון העמוד, כלומר לשמאל בעברית — ולכן התג
 * ישב בפינה הנכונה של הסלסלה.
 *
 * מרגע ש-‎.header-top‎ נעול ל-‎ltr‎, ‎inline-end‎ הוא **תמיד ימין**,
 * והתג היה קופץ לצד השני של האייקון בעברית בלבד.
 *
 * ⚠️ זו בדיוק אותה מלכודת ירושה שתיארתי למעלה, רמה אחת עמוק יותר:
 * קיבוע כיוון אינו משפיע רק על טקסט אלא על **כל** התכונות הלוגיות
 * שמתחתיו. מי שמוסיף כאן אלמנט עם ‎inset-inline-*‎ או
 * ‎margin-inline-*‎ — לבדוק אותו בשתי השפות. */
html[dir="rtl"] .header-top .icon-btn .count {
  inset-inline-end: auto;
  inset-inline-start: 2px;
}
.header-logo { flex-shrink: 0; color: var(--cedar); display: block; }
/* חשוב: ל-<svg> אין גודל פנימי כמו ל-<img>. עם width:auto בלבד הוא נמתח או
   נדחס לפי ההקשר במקום לשמור על יחס ה-viewBox — מה שדחס את הלוגו לתוך שדה
   החיפוש. aspect-ratio מקבע את היחס והרוחב נגזר מהגובה. */
/* ⚠️ 40px ולא 30px בסלולר — בקשת הלקוח 17/09/2026: «הלוגו ממש קטן,
   אנשים לא יודעים לאיזה אתר הגיעו».
   הלוגו הוא לוקאפ בן שתי שורות (שם + תגית), ולכן 30px נתנו לתגית
   גובה של 6px בלבד — קטן מכדי להיקרא, ולשם עצמו נוכחות של אייקון. */
/* ⚠️ הוגדל שוב 21/09/2026 («את הלוגו להגדיל ולעשות בשחור»). 40px
   נתנו לתגית «Lifestyle Daily Market» גובה של ~8px, והיא נקראה
   כלכלוך אפור ולא כשורת מותג. */
/* 231/84 ולא 420/84 — ה-SVG בהדר חתוך לדיו של המילה, כדי שה-U יעמוד
   בקו אחד עם הבאנר. חייב להתאים ל-viewBox ב-unicco_logo( true ). */
.header-logo svg { height: 46px; width: auto; aspect-ratio: 231 / 84; flex-shrink: 0; }
@media (min-width: 900px) { .header-logo svg { height: 56px; } }

/* ⚠️ סדר ההדר בדסקטופ — נקבע במפורש 21/09/2026.
 *
 * «את כפתור השפות תזיז ימינה מאחורי איזורי המשלוח» — בקשת הלקוח.
 *
 * עד כה לא היו ערכי ‎order‎ כלל בדסקטופ, והסידור נבע מסדר ה-DOM:
 *   לוגו → חיפוש → **שפה** → אזור משלוח → חשבון → סל
 * כלומר המתג ישב לפני אזור המשלוח. הסדר החדש:
 *   לוגו → חיפוש → אזור משלוח → **שפה** → חשבון → סל
 *
 * ⚠️ **כל הששה מקבלים ערך מפורש ולא רק השניים שזזו.** פריט בלי
 * ‎order‎ מקבל 0 ונדחף לפני כל מי שיש לו ערך חיובי — כלומר שינוי של
 * שניים בלבד היה זורק את ארבעת האחרים לתחילת השורה.
 *
 * ⚠️ הלוגו נשאר בקצה השמאלי בזכות ‎flex: 1‎ של החיפוש, שדוחף את כל
 * השאר ימינה. אין צורך ב-‎margin: auto‎ כמו בסלולר.
 *
 * ⚠️ הסלולר **לא שונה** — ראו הבלוק של 899px. שם המתג אחרון בשורה
 * הראשונה, וזו הייתה החלטה מתועדת («במקום שבו מקובל המבורגר»). */
@media (min-width: 900px) {
  .header-logo                              { order: 1; }
  .header-top .search                       { order: 2; }
  .deliverybtn                              { order: 3; }
  .langtoggle                               { order: 4; }
  #btnAccount                               { order: 5; }
  .header-top > [data-drawer="#cartDrawer"] { order: 6; }
}
.footer svg { width: 100%; height: auto; aspect-ratio: 460 / 120; }

/* חובה על כל SVG עם <text> לטיני בעמוד RTL: direction:rtl יורש פנימה, ואז
   text-anchor:start נמדד מהקצה הימני — הכיתוב "UNICCO" נמתח שמאלה ומתנגש
   בסימן הגרפי. הלוגו הוא נכס לטיני קבוע ולכן תמיד LTR. */
.header-logo svg, .footer svg, .brand-mark svg { direction: ltr; }
.header-logo svg text, .footer svg text, .brand-mark svg text { direction: ltr; unicode-bidi: isolate; }

.header-break { display: none; }

/* ---------------------------------------------------------------------
   מובייל: ההדר נשבר לשתי שורות במקום לדחוס שבעה אלמנטים לשורה אחת.

     שורה 1   לוגו .................. שפה · חשבון · סל
     שורה 2   מיקום המשלוח · חיפוש

   ה-DOM לא משוכפל — סדר הדסקטופ נשמר, וכאן רק order מסדר מחדש.
   .header-break הוא שובר השורה: 100% רוחב, גובה 0.

   ⚠️ **סדר שורה 1 שונה 21/09/2026** כדי להתאים לרנדר של עדן:
   המתג עבר מהקצה (אחרי הסל) אל **לפני** החשבון והסל.

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

   ⚠️ ההערה הקודמת תיארה גם «חיפוש עם כפתור הרשימה בתוכו». הכפתור
   **הוסר** מסרגל החיפוש (ראו header.php), והתיאור תוקן — הערה
   שמתארת מצב שאינו קיים מטעה יותר מהיעדר הערה.
   --------------------------------------------------------------------- */
@media (max-width: 899px) {
  .header-top {
    flex-wrap: wrap; height: auto;
    padding-block: var(--s-2); gap: var(--s-2);
    row-gap: var(--s-3);
  }
  /* ⚠️ 34px — הועלה מ-26px ב-17/09/2026.
   *
   * ההערה הקודמת כאן אמרה ש-30px גרמו לשורה הראשונה לגלוש ומתג השפה
   * נפל לשורה משלו, ולכן הוקטן ל-26px. אבל **26px הם הגובה של
   * הלוקאפ כולו** — שם + תגית — כלומר המילה UNICCO עצמה יצאה בגובה
   * 14px בערך. זה קטן מכדי לזהות מותג, וזו בדיוק התלונה של הלקוח:
   * «אנשים לא יודעים לאיזה אתר הגיעו».
   *
   * ⚠️ ההדר בסלולר כבר ‎flex-wrap: wrap‎ עם ‎height: auto‎ (למעלה בבלוק
   * הזה), ולכן גלישה אינה שוברת כלום — היא רק מורידה את המתג לשורה
   * הבאה. נוכחות המותג שווה את זה יותר מאשר שורה אחת חסכונית. */
  .header-logo svg { height: 34px; }
  /* ⚠️ ‎margin-inline-end‎ הפך ל-‎margin-right‎ במפורש: המכולה נעולה
     כעת ל-‎direction: ltr‎, ולכן ‎inline-end‎ הוא תמיד ימין — אבל
     כתיבה מפורשת מונעת בלבול אם מישהו יחזיר את הכיוון בעתיד.
     הלוגו ראשון + דחיפה ימינה = הוא נשאר בקצה השמאלי בשתי השפות. */
  /* ⚠️ ‎margin-inline-end‎ הפך ל-‎margin-right‎ במפורש: המכולה נעולה
     כעת ל-‎direction: ltr‎, ולכן ‎inline-end‎ הוא תמיד ימין — אבל
     כתיבה מפורשת מונעת בלבול אם מישהו יחזיר את הכיוון בעתיד.
     הלוגו ראשון + דחיפה ימינה = הוא נשאר בקצה השמאלי בשתי השפות. */
  .header-logo   { order: 1; margin-right: auto; margin-inline-end: auto; }
  /* ⚠️ שפה לפני חשבון וסל — לפי הרנדר של עדן. ראו ההערה מעל הבלוק. */
  .langtoggle    { order: 2; }
  #btnAccount    { order: 3; }
  .header-top > [data-drawer="#cartDrawer"] { order: 4; }
  .header-break  { display: block; order: 5; flex-basis: 100%; height: 0; margin: 0; }
  .deliverybtn   { order: 6; }
  /* flex-basis חייב להיות 0 ולא auto: השבירה לשורות מחושבת לפי הבסיס,
     ולכן עם auto החיפוש נשבר לשורה שלישית במקום להצטמצם לצד המיקום. */
  .header-top .search { order: 7; flex: 1 1 0; min-width: 0; }

  .deliverybtn { flex-shrink: 0; }
}

/* מסכים צרים במיוחד (iPhone SE, 320px) — כיווץ נוסף בתוך אותו מבנה */
@media (max-width: 380px) {
  /* ⚠️ 30px ולא 26px. גם במסך הצר ביותר הלוגו חייב להיקרא — ראו
     הנימוק המלא בבלוק של 899px למעלה. */
  .header-logo svg { height: 30px; }
  .langtoggle button { padding-inline: var(--s-2); }
  .deliverybtn.is-set .dl-city { max-width: 88px; }
}

.icon-btn {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: none;
  border-radius: var(--r-ctl);
  color: var(--ink);
}
.icon-btn:hover { background: var(--paper-2); }
.icon-btn .count {
  position: absolute;
  inset-block-start: 4px; inset-inline-end: 2px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  background: var(--terracotta); color: #fff;
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}

/* פס הכרזה עליון */
.announce {
  background: var(--cedar);
  color: #fff;
  font-size: var(--t-xs);
  letter-spacing: .04em;
  text-align: center;
  padding-block: 7px;
}
.announce strong { font-weight: 700; }

/* ניווט ראשי — דסקטופ

   flex-wrap הוא תיקון באג, לא העדפה. עם nowrap ו-overflow:visible
   הקישורים האחרונים גלשו מחוץ לגבול ולא היו לחיצים: בעברית נחתכו
   "הכל לבית" ו"מתכונים", ובאנגלית ארבעה — כי שמות הקטגוריות באנגלית
   רחבים ב-42% (1682px מול 1185px זמינים).

   גלישה לשורה שנייה מבטיחה שכל 15 המחלקות נגישות בכל שפה ובכל רוחב,
   בלי לתלות את זה באורך המילים. row-gap קטן משמעותית מ-column-gap
   כדי ששתי השורות ייקראו כבלוק אחד ולא כשני סרגלים. */
/* .nav הוסר: היו כאן שתי רשימות מקבילות — טקסט חשוף לדסקטופ ועיגולים
   נגללים למובייל — כלומר אותם קישורים פעמיים ב-DOM. עכשיו .catrail
   משמש בכל הרוחבים, והסגנון שלו יושב מתחת. */

/* רצועת קטגוריות נגללת — מובייל */
.catrail { display: flex; gap: var(--s-2); padding-block: var(--s-2); }
.catrail a {
  flex-shrink: 0;
  padding: var(--s-2) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.catrail a:hover, .catrail a.is-active { background: var(--cedar); color: #fff; border-color: var(--cedar); }

/* ---- הרצועה שבהדר, בכל הרוחבים -------------------------------------

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

   הקושי היחיד בגלילה אופקית הוא שהיא בלתי נראית — ולכן דהייה בקצה
   וחיצים. */
.header .catrail {
  position: relative;
  padding-block: var(--s-3) var(--s-2);
  scroll-padding-inline: var(--s-6);
}
/* הפס נעלם בדסקטופ: יש חיצים, והפס מוסיף רעש מתחת להדר */
@media (min-width: 900px) {
  .header .catrail { scrollbar-width: none; }
  .header .catrail::-webkit-scrollbar { display: none; }
}
.header .catrail a { padding: 7px var(--s-4); }

/* עוגן לחיצים; הדהייה יושבת על העוטף ולא על הרצועה עצמה, אחרת היא
   הייתה נגללת יחד עם הפריטים. */
.header-top ~ .catrail, .header .wrap { position: relative; }

.railnav {
  position: absolute;
  inset-block-end: 10px;
  inline-size: 34px; block-size: 34px;
  display: none; place-items: center;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  box-shadow: var(--sh-2);
  cursor: pointer;
  z-index: 2;
}
.railnav:hover { background: var(--cedar); color: #fff; border-color: var(--cedar); }
.railnav[hidden] { display: none; }
.railnav.is-prev { inset-inline-start: -6px; }
.railnav.is-next { inset-inline-end: -6px; }
/* החיצים מיועדים לעכבר. במגע גוללים באצבע, ושם הם רק מסתירים פריטים. */
@media (hover: hover) and (min-width: 900px) {
  .railnav:not([hidden]) { display: grid; }
}
/* בעברית הרצועה מתחילה מימין, ולכן החץ צריך להצביע לכיוון ההפוך */
[dir="rtl"] .railnav svg { transform: scaleX(-1); }
/* רצועת תת-קטגוריות בתוך העמוד — נשארת גלויה בכל רוחב, בניגוד לרצועה שבהדר */
#subnav { margin-block-end: var(--s-4); flex-wrap: nowrap; }
#subnav a span { font-variant-numeric: tabular-nums; font-size: var(--t-xs); }

/* ============================================================== search */

.search { position: relative; flex: 1; min-width: 0; }
.search input {
  width: 100%;
  /* בלי זה ה-input שומר על רוחב פנימי (size=20 כברירת מחדל) ולא מתכווץ */
  min-width: 0;
  height: 44px;
  padding-inline: var(--s-10) var(--s-4);
  background: var(--field);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  font-size: var(--t-base);
}
/* --muted ולא --muted-2: הכיתוב "חיפוש מוצר, מותג או קטגוריה" הוא
   ההנחיה היחידה בשדה, ועל הרקע האפור החדש --muted-2 יורד ל-2.52:1.
   --muted מחזיר אותו ל-4.54:1 — מעל הסף, ועדיין קורא כרמז ולא כערך. */
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--cedar-300); }
.search .search-icon {
  position: absolute;
  inset-block-start: 50%; transform: translateY(-50%);
  inset-inline-start: var(--s-3);
  color: var(--muted);
  pointer-events: none;
}
/* iOS מזום לתוך שדות עם font-size < 16px. 16px מונע את זה. */
@media (max-width: 899px) { .search input { font-size: 16px; } }

.suggest {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline: 0;
  z-index: var(--z-modal);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: var(--s-2);
}
.suggest[hidden] { display: none; }
.suggest-item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-2);
  background: none; border: none;
  border-radius: var(--r-md);
  text-align: start;
  text-decoration: none;
}
.suggest-item:hover, .suggest-item.is-active { background: var(--paper-2); }
.suggest-item img { width: 40px; height: 40px; object-fit: contain; border-radius: var(--r-sm); flex-shrink: 0; }
.suggest-item .s-name { font-size: var(--t-sm); font-weight: 500; line-height: 1.3; }
.suggest-item .s-brand { font-size: 11px; color: var(--brass-700); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.suggest-item .s-price { margin-inline-start: auto; font-weight: 700; font-size: var(--t-sm); }
.suggest-head { padding: var(--s-2) var(--s-2) var(--s-1); font-size: var(--t-xs); color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.suggest-empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--muted); font-size: var(--t-sm); }

/* ============================================ sticky mobile bottom bar */
/* לא קיים באתר הקיים — הסל בלתי נראה במסך המובייל */

.mobilebar {
  position: fixed;
  inset-inline: 0; inset-block-end: 0;
  z-index: var(--z-bar);
  background: var(--cedar);
  color: #fff;
  padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--s-3);
  box-shadow: 0 -4px 24px rgba(26,26,24,.18);
  transform: translateY(110%);
  transition: transform var(--d-base) var(--e-out);
}
.mobilebar.is-visible { transform: translateY(0); }
@media (min-width: 900px) { .mobilebar { display: none; } }

.mobilebar .mb-count { font-size: var(--t-xs); opacity: .82; }
.mobilebar .mb-total { font-size: var(--t-lg); font-weight: 700; line-height: 1.1; }
.mobilebar .btn { background: #fff; color: var(--cedar); border-color: #fff; min-height: 44px; margin-inline-start: auto; }
.mobilebar .btn:hover { background: var(--paper-2); }

/* ============================================ free-shipping progress */

.ship-progress { display: flex; flex-direction: column; gap: 6px; }
.ship-progress .bar { height: 5px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.ship-progress .bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--cedar-300), var(--cedar));
  border-radius: var(--r-pill);
  transition: width var(--d-slow) var(--e-out);
}
.ship-progress .lbl { font-size: var(--t-xs); color: var(--muted); }
.ship-progress.is-free .lbl { color: var(--success); font-weight: 700; }
.mobilebar .ship-progress .bar { background: rgba(255,255,255,.28); }
.mobilebar .ship-progress .bar span { background: #fff; }
.mobilebar .ship-progress .lbl { color: rgba(255,255,255,.9); }

/* ================================================== drawer (cart/filters) */

/* ====================================================== אישור גיל
   ⚠️ מחליף את תוסף ה-age-verification. ראו inc/agegate.php.

   ⚠️ ההסתרה היא ‎[hidden]‎ ולא ‎transform‎ מחוץ למסך — אותו נימוק
   שמתועד אצל ‎.drawer‎ למטה: אלמנט ‎position: fixed‎ שמוסט ב-transform
   אינו נחתך ע"י ‎overflow-x‎ של ה-body ויוצר גלילה אופקית אמיתית
   בסלולר (נמדד: 6px ב-320px). */
.agegate {
  position: fixed; inset: 0;
  z-index: calc(var(--z-modal) + 10);
  display: grid; place-items: center;
  padding: var(--gutter);
  background: rgba(26, 26, 24, .72);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.agegate[hidden] { display: none; }

.agegate-panel {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  padding: var(--s-6) var(--s-5);
  max-inline-size: min(420px, 100%);
  text-align: center;
}
.agegate-title { margin: 0 0 var(--s-3); font-size: var(--t-lg); }
.agegate-text  { margin: 0 0 var(--s-3); font-size: var(--t-sm); line-height: 1.6; color: var(--ink); }

.agegate-actions {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-block-start: var(--s-5);
}
/* ⚠️ אנכי ולא זה לצד זה: «אני מתחת לגיל 18» חייב להיות קל לזיהוי
   ולא להיראות ככפתור משני שקל לפספס. */
.agegate-actions .btn { inline-size: 100%; }

/* ⚠️ האזהרה בקטן ומתחת לכפתורים — היא חובה משפטית, אבל היא לא
   השאלה שהמשתמש צריך לענות עליה. */
.agegate-note {
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: 1.5;
}

.scrim {
  position: fixed; inset: 0;
  z-index: var(--z-drawer);
  background: rgba(26,26,24,.42);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-base) var(--e-out);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

/* מגירה סגורה: visibility:hidden בלבד, ללא transform.
   חשוב — אסור להסתיר מגירה ע"י הסטתה מחוץ למסך ב-transform: היא position:fixed,
   ולכן overflow-x של ה-body אינו חותך אותה והיא יוצרת גלילה אופקית אמיתית
   במובייל (נמדד: 6px גלישה ב-320px). במקום זה היא נשארת במקומה ומוסתרת,
   והכניסה מונפשת ב-@keyframes. */
.drawer {
  position: fixed;
  z-index: calc(var(--z-drawer) + 1);
  background: var(--surface);
  display: flex; flex-direction: column;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer-cart {
  inset-block: 0;
  inset-inline-end: 0;
  width: min(430px, 100%);
  box-shadow: var(--sh-4);
}
:root[dir="rtl"] .drawer-cart.is-open { animation: slideFromStart var(--d-base) var(--e-out); }
:root[dir="ltr"] .drawer-cart.is-open { animation: slideFromEnd   var(--d-base) var(--e-out); }
@keyframes slideFromStart { from { transform: translateX(-101%); } to { transform: translateX(0); } }
@keyframes slideFromEnd   { from { transform: translateX(101%);  } to { transform: translateX(0); } }

/* מגירת סינון — עולה מלמטה במובייל */
.drawer-filters {
  inset-inline: 0; inset-block-end: 0;
  max-height: 86vh;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-4);
}
.drawer-filters.is-open { animation: slideFromBottom var(--d-base) var(--e-out); }
@keyframes slideFromBottom { from { transform: translateY(101%); } to { transform: translateY(0); } }

.drawer-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border-block-end: 1px solid var(--line);
  flex-shrink: 0;
}
.drawer-head h2 { margin: 0; font-size: var(--t-lg); }
.drawer-body {
  flex: 1; overflow-y: auto; padding: var(--s-4);
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* ------------------------------------------- סימון שיש עוד למטה ------
   ב-iOS סרגל הגלילה הוא שכבה שמופיעה רק תוך כדי גלילה, ולכן אין שום
   רמז סטטי לכך שהרשימה נמשכת. הצללה בקצה התחתון עושה את זה, והיא
   נעלמת כשמגיעים לסוף. המחלקות מתחלפות מ-app.js. */
.drawer-scroll { position: relative; }
.drawer-scroll::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: 44px; pointer-events: none;
  background: linear-gradient(to top, var(--surface), transparent);
  opacity: 0; transition: opacity var(--d-fast) var(--e-out);
}
.drawer-scroll.has-more::after { opacity: 1; }

/* סרגל דק וקבוע, כדי שגם בדסקטופ יהיה ברור שיש גלילה */
.drawer-body::-webkit-scrollbar { width: 6px; }
.drawer-body::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: var(--r-pill);
}
.drawer-body { scrollbar-width: thin; }

/* ------------------------------------------------- החלק התחתון של הסל
   נמדד: 334px, כלומר 40% ממסך אייפון, מול 51% לרשימת המוצרים עצמה.
   הלקוח ראה 4.5 מוצרים. כל מה שכאן מכווץ אותו בלי להסתיר מידע. */
.drawer-foot {
  flex-shrink: 0;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--line);
  background: var(--paper);
}
/* שורות הסיכום היו 132px. הרווח האנכי הצטבר על פני שלוש עד ארבע שורות. */
.drawer-foot .totals div { padding-block: 3px; }
.drawer-foot .totals .grand {
  margin-block-start: 6px; padding-block-start: var(--s-2);
}
.drawer-foot .ship-progress { margin-bottom: var(--s-2) !important; }

/* "חזרה לקניות" במגירה רק סוגר אותה — בדיוק כמו ה-X בכותרת וכמו
   לחיצה מחוץ למגירה. ככפתור מלא בגובה 48px הוא גזל מקום בשביל פעולה
   שכבר קיימת פעמיים. כקישור הוא נשאר זמין ועולה שליש מהגובה. */
.drawer-foot .btn-ghost[data-act="keepshop"] {
  min-height: 0; block-size: auto;
  padding: 6px 0; margin-top: var(--s-2) !important;
  border: 0; background: none;
  font-size: var(--t-sm); font-weight: 600;
  color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.drawer-foot .btn-ghost[data-act="keepshop"]:hover { color: var(--ink); }

/* ידית גרירה למגירה תחתונה */
.grabber { width: 40px; height: 4px; background: var(--line-2); border-radius: var(--r-pill); margin: var(--s-2) auto 0; }

/* ============================================================ cart line */

.cartline { display: flex; gap: var(--s-3); padding-block: var(--s-3); border-block-end: 1px solid var(--line); }
/* התמונה הייתה 62px בתוך שורה בגובה 130px — כלומר 44px של מקום פנוי
   שלא נוצל, והמוצר היה קטן מכדי לזהות אותו במבט. 96px מנצל את הגובה
   שכבר קיים, ולכן **מספר השורות הנראות אינו משתנה**: את גובה השורה
   קובע בלוק הטקסט (105px), לא התמונה.

   object-fit: contain נשאר — מוצר לא אמור להיחתך בסל, שם הלקוח בודק
   שהוא לקח את הפריט הנכון. השטח הנראה של המוצר גדל פי 2.4. */
.cartline img {
  width: 96px; height: 96px;
  object-fit: contain;
  background: var(--paper-2);
  border-radius: var(--r-md);
  flex-shrink: 0;
  align-self: flex-start;
}
/* מתחת ל-360px הרוחב מתחיל להילחם בטקסט */
@media (max-width: 359px) {
  .cartline img { width: 76px; height: 76px; }
}
.cartline .cl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cartline .cl-name { font-size: var(--t-sm); font-weight: 500; line-height: 1.3; }
.cartline .cl-brand { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brass-700); }
.cartline .cl-foot { display: flex; align-items: center; justify-content: space-between; margin-block-start: var(--s-2); gap: var(--s-2); }
.cartline .stepper { height: 36px; background: var(--paper-2); color: var(--ink); }
.cartline .stepper button { height: 36px; width: 34px; color: var(--ink); }
.cartline .stepper button:hover { background: var(--line); }

/* ============================================================== filters */

.fgroup { border-block-end: 1px solid var(--line); padding-block: var(--s-3); }
.fgroup summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--t-base);
  padding-block: var(--s-1);
}
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after { content: "+"; font-size: 18px; color: var(--muted); }
.fgroup[open] summary::after { content: "−"; }
.fgroup .fbody { padding-block-start: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); max-height: 240px; overflow-y: auto; }

.check {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--t-sm);
  min-height: 42px;
}
.check:hover { background: var(--paper-2); }
.check input { width: 19px; height: 19px; accent-color: var(--cedar); flex-shrink: 0; }
.check .c-count { margin-inline-start: auto; font-size: var(--t-xs); color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* צ'יפים של פילטרים פעילים */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--s-3);
  background: var(--cedar-50);
  color: var(--cedar-700);
  border: 1px solid transparent;
  border-radius: var(--r-ctl-sm);
  font-size: var(--t-xs); font-weight: 600;
}
.chip button { background: none; border: none; color: inherit; font-size: 15px; line-height: 1; padding: 0; opacity: .65; }
.chip button:hover { opacity: 1; }

/* ------------------------------------------------ מועדון לקוחות ---- */
/* כפתור ההצטרפות בתוך פס המשלוח. הוא מופיע רק ברגע אחד — לא-חבר
   שכבר עבר ₪500 — ולכן הוא מודגש: זו ההצעה בעלת הערך הגבוה ביותר
   בכל המסלול, והיא מוצגת בדיוק כשהיא שווה ₪30 מדויקים. */
/* ⚠️ flex-direction: row חובה כאן, ואינו מיותר.
   הבסיס ב-.ship-progress הוא column, והכלל הזה נכתב לפריסת שורה
   (פס ברוחב מלא, ומתחתיו תווית + כפתור זה לצד זה) אך לא הצהיר על
   הציר. התוצאה נמדדה במכשיר: ב-column הערך `flex: 1 1 180px` על
   התווית אינו רוחב מינימלי אלא **גובה של 180px**, ו-flex-basis:100%
   על הפס נמדד כגובה — כך שהפס קרס ל-0×0 והסרגל התנפח ל-301px
   במקום 62px, וכיסה את תחתית העמוד באייפון. */
.ship-progress.has-offer { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ship-progress.has-offer .bar { flex-basis: 100%; }
.ship-progress.has-offer .lbl { flex: 1 1 180px; }
.club-join {
  flex: none;
  background: var(--success); border-color: var(--success); color: #fff;
  white-space: nowrap;
}
.club-join:hover { background: #3E6650; border-color: #3E6650; }

.clubbox {
  border: 1px solid var(--line-2);
  border-inline-start: 3px solid var(--cedar);
  border-radius: var(--r-ctl);
  background: var(--surface);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.clubbox.is-member { border-inline-start-color: var(--success); background: var(--success-50); }
.clubbox-badge { margin: 0; font-weight: 700; color: var(--success); }
.clubbox-benefit { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.clubbox .btn { align-self: flex-start; }
/* קו מפריד: החברות והדיוור הם שני דברים, וזה חייב להיראות כך */
.clubbox-consent { padding-block-start: var(--s-3); border-block-start: 1px solid var(--line); }
.clubbox-note { margin: 0; font-size: var(--t-xs); color: var(--muted); }

/* ------------------------------------- מינימום הזמנה ותנאי משלוח ---- */
/* אזהרת המינימום. טרקוטה ולא אדום צעקני, ובלי אייקון — היא מידע
   שהלקוח צריך כדי להשלים קנייה, לא שגיאה שהוא עשה. */
.minwarn {
  margin-block: var(--s-3) 0;
  padding: var(--s-3);
  background: var(--terracotta-50);
  border-inline-start: 3px solid var(--terracotta);
  border-radius: var(--r-ctl);
  color: var(--terracotta);
  font-size: var(--t-sm); font-weight: 600;
}
.minwarn[hidden] { display: none; }

/* שלושת התנאים בפאנל אזורי המשלוח */
.dl-terms {
  list-style: none; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--paper-2); border-radius: var(--r-ctl);
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--t-sm);
}
.dl-terms li { display: flex; align-items: center; gap: var(--s-2); }
.dl-terms li::before {
  content: ''; flex: none;
  inline-size: 5px; block-size: 5px; border-radius: 50%;
  background: var(--muted-2);
}
/* המינימום הוא התנאי שהכי כואב לגלות מאוחר, ולכן הוא מודגש */
.dl-terms li.is-min { font-weight: 700; color: var(--ink); }
.dl-terms li.is-min::before { background: var(--terracotta); }

/* ------------------------------------------- רצועת הטעינה בגלילה ---- */
.moreband {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding-block: var(--s-8);
}
/* הסנטינל חייב גובה כלשהו כדי ש-IntersectionObserver יוכל לחתוך אותו;
   אלמנט בגובה 0 אינו "נכנס למסך" בחלק מהדפדפנים. */
#moreSentinel { block-size: 1px; inline-size: 100%; }
.moreband-status {
  margin: 0;
  font-size: var(--t-sm); color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ==================================================== תפריט נגישות ====
   מיקום: פינת ההתחלה התחתונה (ימין בעברית, שמאל באנגלית).

   נבחר כדי לא להתנגש בכלום:
     · הסל וכפתורי הפעולה יושבים בצד הסיום — הצד ההפוך.
     · הסרגל התחתון בסלולר תופס את כל רוחב התחתית, ולכן הכפתור
       מתרומם מעליו דרך .has-mobilebar.
     · ההודעות הצפות (toast) מרוכזות ורחבות בסלולר, ולכן הן הועלו
       מעל גובה הכפתור — ראו .toast למטה.
     · z-index נמוך מהמגירות, כך שמגירה פתוחה מכסה אותו במקום לרחף
       מתחתיו.                                                        */
.a11y {
  position: fixed;
  inset-inline-start: var(--s-4);
  inset-block-end: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index: calc(var(--z-drawer) - 1);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
}
body.has-mobilebar .a11y {
  inset-block-end: calc(var(--mobilebar-h) + var(--s-3) + env(safe-area-inset-bottom, 0px));
}

.a11y-btn {
  inline-size: 48px; block-size: 48px;     /* יעד מגע מעל 44px */
  display: grid; place-items: center;
  background: var(--cedar);
  color: #fff;
  border: 2px solid var(--surface);
  border-radius: 50%;
  box-shadow: var(--sh-3);
  cursor: pointer;
}
.a11y-btn:hover { background: var(--cedar-700); }

.a11y-panel {
  inline-size: min(300px, calc(100vw - var(--s-8)));
  max-block-size: min(70vh, 560px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  padding: var(--s-4);
}
.a11y-panel[hidden] { display: none; }

.a11y-head { display: flex; align-items: center; gap: var(--s-2); margin-block-end: var(--s-3); }
.a11y-head h2 { margin: 0; font-size: var(--t-md); }
.a11y-x {
  margin-inline-start: auto;
  inline-size: 32px; block-size: 32px;
  display: grid; place-items: center;
  background: none; border: 0; color: var(--muted);
  border-radius: var(--r-ctl-sm); cursor: pointer;
}
.a11y-x:hover { background: var(--paper-2); color: var(--ink); }

.a11y-size {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding-block: var(--s-2) var(--s-3);
  border-block-end: 1px solid var(--line);
  font-size: var(--t-sm); font-weight: 600;
}
.a11y-size-ctl { display: flex; align-items: center; gap: 2px; }
.a11y-size-ctl button {
  inline-size: 36px; block-size: 36px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-ctl-sm); font-size: 18px; line-height: 1; cursor: pointer;
}
.a11y-size-ctl button:disabled { opacity: .4; cursor: default; }
.a11y-size-ctl output {
  min-inline-size: 52px; text-align: center;
  font-variant-numeric: tabular-nums; font-size: var(--t-sm);
}

.a11y-opt {
  inline-size: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0;
  background: none; border: 0; border-block-end: 1px solid var(--line);
  font-size: var(--t-sm); text-align: start; cursor: pointer;
  color: inherit;
}
.a11y-opt:hover { color: var(--cedar); }
/* מתג ולא וי: המצב נקרא גם בלי צבע, וגם aria-pressed נושא אותו */
.a11y-mark {
  flex: none; inline-size: 38px; block-size: 22px;
  background: var(--line-2); border-radius: var(--r-pill);
  position: relative; transition: background var(--d-fast) var(--e-out);
}
.a11y-mark::after {
  content: ''; position: absolute;
  inset-block-start: 3px; inset-inline-start: 3px;
  inline-size: 16px; block-size: 16px;
  background: #fff; border-radius: 50%;
  transition: translate var(--d-fast) var(--e-out);
}
.a11y-opt.is-on .a11y-mark { background: var(--cedar); }
.a11y-opt.is-on .a11y-mark::after { translate: 16px 0; }
:root[dir="rtl"] .a11y-opt.is-on .a11y-mark::after { translate: -16px 0; }

.a11y-reset {
  inline-size: 100%; margin-block-start: var(--s-3);
  padding: var(--s-2); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  font-size: var(--t-sm); font-weight: 600; cursor: pointer;
}
.a11y-link {
  display: block; margin-block-start: var(--s-3);
  font-size: var(--t-xs); color: var(--muted); text-align: center;
}

/* ---------------------------------------- מה שההגדרות באמת עושות ---- */

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

   המחלקה חוזרת פעמיים בכוונה. :root.a11y-contrast שוקל בדיוק כמו
   :root[data-brand="stone"], וקובצי ערכות הנושא נטענים אחרי הקובץ
   הזה — כלומר בשוויון משקל הערכה ניצחה והניגודיות לא חלה כלל
   (נמדד: הרקע נשאר #FAF8F5). הכפלת המחלקה מעלה את המשקל בדרגה. */
:root.a11y-contrast.a11y-contrast {
  --paper: #FFFFFF; --paper-2: #F0F0F0; --surface: #FFFFFF; --field: #FFFFFF;
  --ink: #000000; --ink-2: #000000; --muted: #1A1A1A; --muted-2: #333333;
  --line: #000000; --line-2: #000000;
  --cedar: #000000; --cedar-700: #000000; --cedar-300: #000000; --cedar-50: #FFFFFF;
  --brand: #000000; --brand-deep: #000000;
  --brass: #000000; --brass-700: #000000; --brass-50: #FFFFFF;
  --terracotta: #A00000; --terracotta-50: #FFFFFF;
  --success: #006000; --success-50: #FFFFFF;
  --focus: #000000;
}
:root.a11y-contrast img,
:root.a11y-contrast .promo-art,
:root.a11y-contrast .pick-art { filter: grayscale(35%) contrast(115%); }
/* משטחים שנשענו על גרדיאנט מאבדים את הטקסט בניגודיות גבוהה */
:root.a11y-contrast .promo,
:root.a11y-contrast .pick,
:root.a11y-contrast .btn,
:root.a11y-contrast .hero::after { background-image: none !important; }
:root.a11y-contrast .promo,
:root.a11y-contrast .pick { color: #000 !important; border: 2px solid #000; }
:root.a11y-contrast .promo h3,
:root.a11y-contrast .promo p,
:root.a11y-contrast .pick b { color: #000 !important; }

:root.a11y-links main a,
:root.a11y-links .footer a { text-decoration: underline; text-underline-offset: 2px; }

:root.a11y-focus :focus-visible {
  outline: 4px solid #FFD400 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px rgba(0,0,0,.85) !important;
}

:root.a11y-motion *,
:root.a11y-motion *::before,
:root.a11y-motion *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}

:root.a11y-font,
:root.a11y-font body {
  font-family: Arial, "Segoe UI", "Noto Sans Hebrew", sans-serif !important;
}
:root.a11y-font h1, :root.a11y-font h2, :root.a11y-font h3, :root.a11y-font h4 {
  font-family: Arial, "Segoe UI", "Noto Sans Hebrew", sans-serif !important;
  font-weight: 700;
}
:root.a11y-font * { letter-spacing: normal !important; }

/* סמן מוגדר כ-SVG מוטמע: אין קובץ להוריד, והוא נשאר חד בכל רזולוציה */
:root.a11y-cursor,
:root.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M8 4l22 13-9 2 5 10-4 2-5-10-6 6z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}
:root.a11y-cursor a,
:root.a11y-cursor button,
:root.a11y-cursor [role="button"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M14 4c1.7 0 3 1.3 3 3v9h2v-3c0-1.7 1.3-3 3-3s3 1.3 3 3v3h2v-2c0-1.7 1.3-3 3-3s3 1.3 3 3v10c0 5-4 9-9 9h-4c-5 0-9-4-9-9V7c0-1.7 1.3-3 3-3z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 12 4, pointer !important;
}

/* ==================================================== רצועת ההשקה =====
   בוורוד של האתר הישן. יושבת מעל ההדר בזרימה רגילה ולא כדביקה —
   ההדר הוא sticky, ורצועה דביקה מעליו הייתה גוזלת שורה קבועה מהמסך
   לאורך כל הגלילה. כך היא נראית בכניסה ונגללת החוצה מעצמה. */
.welcome {
  background: var(--welcome-bg, #E74D76);
  color: var(--welcome-ink, #33060F);
  font-size: var(--t-sm);
  overflow: hidden;
  max-height: 120px;
  transition: max-height var(--d-base) var(--e-out),
              opacity    var(--d-fast) var(--e-out);
}
.welcome.is-out { max-height: 0; opacity: 0; }
.welcome-in {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
  padding-block: var(--s-3);
}
.welcome-in b { font-weight: 700; }
.welcome-in span { opacity: .88; }
.welcome-x {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  background: none; border: 0; color: inherit;
  border-radius: var(--r-ctl-sm); opacity: .7;
}
.welcome-x:hover { opacity: 1; background: rgba(0,0,0,.10); }
@media (prefers-reduced-motion: reduce) { .welcome { transition: none; } }

/* ------------------------------------- רצועת הקטגוריות השנייה (ירידה) */
/* כפופה לראשונה ולא שווה לה: תווית קטנה בהתחלה, צ׳יפים חלשים יותר.
   בלי ההיררכיה הזו שתי שורות זהות נקראות כרשימה אחת שנשברה. */
.subdrill {
  display: flex; align-items: center; gap: var(--s-3);
  margin-block-start: var(--s-2);
  min-width: 0;
}
.subdrill[hidden] { display: none; }
.subdrill-lbl {
  flex: none;
  font-size: var(--t-xs); font-weight: 600;
  color: var(--muted); white-space: nowrap;
}
.catrail.is-sub { flex: 1 1 auto; min-width: 0; }
.catrail.is-sub a {
  padding: 5px var(--s-3);
  font-size: var(--t-xs);
  background: var(--paper-2);
  border-color: transparent;
}
.catrail.is-sub a:hover { background: var(--cedar-50); color: var(--cedar); }
@media (max-width: 560px) {
  .subdrill { flex-direction: column; align-items: stretch; gap: 4px; }
}

/* ------------------------------------------------- אזור משלוח מקופל */
/* כל אזור בפאנל המשלוח הוא <details> — מקופל, ונפתח בלחיצה. */
.zonefold {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-block-start: var(--s-3);
}
/* גריד ולא flex: השם בשורה, הנתונים מתחתיו, והחץ בעמודה משלו לגובה
   שתי השורות. כך כל שורות האזורים זהות במבנה ובגובה — ללא תלות
   באורך שם האזור, שהוא מה שיצר קודם טור תגים משונן. */
.zonefold > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name chev" "meta chev";
  align-items: center;
  column-gap: var(--s-3); row-gap: 4px;
  min-height: 62px;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;            /* מסתיר את המשולש של הדפדפן */
  font-weight: 600;
}
.zonefold > summary::-webkit-details-marker { display: none; }
.zonefold > summary::marker { content: ""; }

.zonefold-name { grid-area: name; font-size: var(--t-base); }
.zonefold-meta {
  grid-area: meta;
  display: flex; align-items: center; gap: var(--s-2);
  min-width: 0;
}
/* מספר היישובים — נותן ללקוח לדעת כמה ייפתח לפני שהוא לוחץ */
.zonefold-n {
  font-size: var(--t-xs); font-weight: 600;
  color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.zonefold-chev {
  grid-area: chev;
  display: inline-flex; color: var(--muted);
  transition: transform var(--d-fast) var(--e-out);
}
.zonefold[open] > summary .zonefold-chev { transform: rotate(180deg); }
.zonefold > .chips { padding: 0 var(--s-4) var(--s-4); }
.zonefold > summary:hover { background: var(--paper-2); border-radius: var(--r-md); }

/* סרגל כלים של דף קטגוריה */
.toolbar {
  position: sticky; inset-block-start: var(--header-h);
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
  padding-block: var(--s-2);
  display: flex; align-items: center; gap: var(--s-2);
}
.toolbar select {
  height: 40px;
  padding-inline: var(--s-3) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-size: var(--t-sm); font-weight: 600;
  min-width: 0;               /* אחרת ה-select שומר על רוחב האופציה הארוכה ביותר */
  max-width: 48%;
  text-overflow: ellipsis;
}
.toolbar .count { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ב-320px כפתור הסינון + ספירת התוצאות + בורר המיון לא נכנסים לשורה אחת
   (נמדד: 6px גלישה). ספירת התוצאות יורדת לשורה משלה. */
@media (max-width: 359px) {
  .toolbar { flex-wrap: wrap; }
  .toolbar .count { order: 10; flex-basis: 100%; }
  .toolbar .spacer { display: none; }
  .toolbar select { max-width: none; flex: 1; }
}

/* פאנל סינון צדדי — דסקטופ בלבד */
.layout-cat { display: block; }

/* ------------------------------------------- סרגל הסינון המתקפל -----
   הסרגל היה 250px קבועים, כלומר 21–23% מרוחב התוכן בכל מסך, והכרטיסים
   נשארו 151–176px. קיפול משחרר 250px + מרווח 32px לגריד — הכרטיס גדל
   בכ-32% בלי לשנות את מספר העמודות.

   ⚠️ בלי transition על grid-template-columns במכוון: אנימציה שם מריצה
   חישוב פריסה מחדש על כל הכרטיסים בכל פריים, וזו בדיוק השבירה בתנועה
   שרצינו למנוע. המעבר מיידי, ולכן חינם. */
@media (min-width: 1000px) {
  .layout-cat {
    display: grid;
    grid-template-columns: var(--aside-w, 220px) minmax(0,1fr);
    gap: var(--s-8);
    align-items: start;
  }
  .filters-aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-4));
    max-height: calc(100vh - var(--header-h) - var(--s-8));
    overflow-y: auto;
  }
  .btn-filters { display: none; }

  /* מקופל — הסרגל יורד מהפריסה לגמרי והגריד לוקח את כל הרוחב */
  body.filters-off .layout-cat { grid-template-columns: minmax(0,1fr); gap: 0; }
  body.filters-off .filters-aside { display: none; }

  .filters-toggle { display: inline-flex; }
}
.filters-aside { display: none; }
@media (min-width: 1000px) { .filters-aside { display: block; } }

/* הכפתור קיים רק בדסקטופ — בסלולר הסינון ממילא במגירה */
.filters-toggle { display: none; align-items: center; gap: 6px; }
.filters-toggle svg { transition: transform var(--d-fast) var(--e-out); }
body.filters-off .filters-toggle svg { transform: rotate(180deg); }

/* ================================================================ hero */

/* באנר תחום ולא מקצה לקצה: אוויר מסביבו, פינות מעוגלות בכל הצדדים,
   וגובה שמשאיר את הסקשן הבא מציץ מלמטה — כך העין יודעת שיש המשך
   ולא נעצרת בקיר. הגובה יורד מ-74vh ל-46vh בסלולר. */
.hero {
  position: relative;
  min-height: min(46vh, 380px);
  display: grid;
  align-items: end;
  background: var(--brand-deep);
  overflow: hidden;
  border-radius: var(--r-xl);
  margin-block-start: var(--s-4);
}
@media (min-width: 900px) { .hero { min-height: min(52vh, 440px); } }

.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; }
.hero-inner { position: relative; padding: var(--s-5) var(--s-5) var(--s-6); color: #fff; max-width: 620px; }
@media (min-width: 900px) { .hero-inner { padding: var(--s-8) var(--s-9, 2.25rem) var(--s-8); } }
.hero h1 {
  color: #fff;
  margin-block-end: var(--s-2);
  /* קטן מ-h1 הרגיל — הבאנר נמוך יותר עכשיו */
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  /* הכותרת העברית נכנסת לשורה אחת והאנגלית נשברת לשתיים, ולכן מעבר
     שפה הקפיץ את כל מה שמתחת. שומרים מקום לשתי שורות תמיד — הבאנר
     נראה זהה בשתי השפות ושום דבר לא זז בהחלפה.
     1lh = גובה שורה אחת, כך שזה נשאר נכון בכל גודל גופן. */
  min-block-size: 2lh;
  text-wrap: balance;
}
/* דפדפנים בלי יחידת lh — נופלים לחישוב שקול לפי line-height */
@supports not (block-size: 1lh) {
  .hero h1 { min-block-size: calc(2 * 1.15em); }
}
.hero p { color: rgba(255,255,255,.86); font-size: var(--t-base); margin-block-end: var(--s-4); }
@media (min-width: 900px) { .hero p { font-size: var(--t-lg); } }
.hero .eyebrow { color: var(--brass); }

/* ================================================ delivery eligibility */
/* קיים כאן מעל הקיפול — באתר הקיים מתגלה רק בצ'קאאוט */

.zipcheck {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--sh-2);
}
.zipcheck form { display: flex; gap: var(--s-2); }
.zipcheck input {
  flex: 1; min-width: 0; height: 48px;
  padding-inline: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--paper);
}
@media (max-width: 899px) { .zipcheck input { font-size: 16px; } }
.zipcheck .result { margin-block-start: var(--s-3); font-size: var(--t-sm); display: flex; align-items: center; gap: var(--s-2); }
.zipcheck .result.ok  { color: var(--success); font-weight: 600; }
.zipcheck .result.no  { color: var(--terracotta); font-weight: 600; }
.zipcheck .result[hidden] { display: none; }

/* ============================================================== trust */

.trustrow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 760px) { .trustrow { grid-template-columns: repeat(4, 1fr); } }
.trust {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  padding: var(--s-5) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.trust svg { color: var(--cedar); }
.trust b { font-size: var(--t-sm); font-weight: 700; }
.trust span { font-size: var(--t-xs); color: var(--muted); line-height: 1.4; }

/* ============================================================= tiles */

/* ================================================= department rail =========
   14 מחלקות בשתי שורות, גלילה אופקית. הגרסה הקודמת הייתה גריד של 2 עמודות —
   7 שורות של טיילים גדולים שדחפו את כל שאר דף הבית מתחת לקיפול.
   כאן: פריטים קטנים, שתי שורות, וגלילה במקום אורך. */

.deptrail {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: 84px;
  gap: var(--s-4) var(--s-3);
  padding-block-end: var(--s-3);
  align-items: start;
}
@media (min-width: 700px)  { .deptrail { grid-auto-columns: 100px; gap: var(--s-5) var(--s-4); } }
@media (min-width: 1100px) { .deptrail { grid-auto-columns: 1fr; overflow: visible; } }

.dept {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}
.dept-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
/* contain, לא cover: אלה צילומי מוצר על רקע לבן ולא תמונות לייפסטייל.
   cover חתך בקבוקים וקופסאות באמצע ונראה מקרי. */
.dept-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 9px;
  transition: transform var(--d-slow) var(--e-out);
}
@media (hover: hover) {
  .dept:hover .dept-img { border-color: var(--cedar-300); box-shadow: var(--sh-2); transform: translateY(-2px); }
  .dept:hover .dept-img img { transform: scale(1.06); }
}
.dept b {
  /* --t-sm ולא --t-xs: מונה המוצרים ירד מהאריח, והשם הוא כל התוכן
     שנשאר. מדרגה אחת בסולם — 12px ל-13px. */
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  /* שתי שורות בדיוק — שומר על יישור בין כל הפריטים בשתי השורות */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* בלי min-height: שורות הגריד כבר משוות גובה בין הפריטים בשורה,
     והשמירה על 2 שורות רק יצרה חלל ריק מתחת לשמות קצרים. */
}
/* כאן ישב עיצוב מונה המוצרים שירד מהאריח. הבורר היה .dept span, והוא
   תפס גם את .dept-img שהוא span בעצמו — כלומר כלל מת שנגע ברכיב לא לו. */

/* ------------------------------------------------------------ legacy tiles */
.tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }
.tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 4;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--brand-deep);
  isolation: isolate;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--d-slow) var(--e-out); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15,32,25,.85) 12%, rgba(15,32,25,.15) 62%); }
@media (hover: hover) { .tile:hover img { transform: scale(1.06); } }
.tile b { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 500; line-height: 1.2; }
.tile span { font-size: var(--t-xs); opacity: .82; }

/* ====================================================== lifestyle picks ====
   ארבעה שערים מעל המחלקות. הם לא מחליפים את סרגל המחלקות אלא עומדים לפניו:
   המחלקות הן הטקסונומיה המלאה (14 פריטים קטנים), ואלה ארבעה כיווני קנייה
   שנבחרו ידנית ע"י השיווק ולא בהכרח מקבילים לעץ הקטגוריות.

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

/* ⚠️ **האריחים אינם מתהפכים בין עברית לאנגלית** — החלטת הלקוח
 * 21/09/2026: «האריחים אמורים להישאר באותו מקום גם כשמשנים שפה».
 *
 * ⚠️ אותו פתרון בדיוק כמו בהדר: קיבוע ‎direction‎ על המכולה. בגריד,
 * כמו בפלקס, הפריטים זורמים **לפי כיוון הכתיבה** — ולכן אותו
 * ‎grid-column: span‎ נותן סידור מראה בשתי השפות.
 *
 * ⚠️ מוקפא ל-‎rtl‎ ולא ל-‎ltr‎ במכוון: עברית היא שפת המקור של האתר
 * ושם הסידור אושר. הקפאה ל-LTR הייתה מזיזה את האריחים במסך שהלקוח
 * כבר בדק ואישר, במקום ליישר אליו את האנגלית.
 *
 * ⚠️ הכיתוב בתוך האריחים ממורכז (‎text-align: center‎ בערכת olive),
 * ולכן קיבוע הכיוון אינו משפיע עליו — להבדיל מההדר, שבו היה צריך
 * להחזיר ‎rtl‎ לשדות הטקסט במפורש.
 *
 * ⚠️ מה שזה **אינו** עושה: הוא אינו מעביר אריח למקום אחר. עדן
 * ביקשה «בייקרי בצד ימין למעלה» ואצלנו הוא משמאל — זו החלטה נפרדת
 * שמזיזה גם רוחבים (7/5/5/7 נקבע לפי מיקום) וגם את הגדרות המתאם
 * (‎pick1..pick4‎ ממופות לפי מיקום, לא לפי זהות האריח). */
.picks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-3);
  direction: rtl;
}
.pick:nth-child(4n+1) { grid-column: span 7; }
.pick:nth-child(4n+2) { grid-column: span 5; }
.pick:nth-child(4n+3) { grid-column: span 5; }
.pick:nth-child(4n+4) { grid-column: span 7; }

@media (min-width: 760px) {
  .picks { gap: var(--s-4); }
  .pick:nth-child(4n+1),
  .pick:nth-child(4n+2),
  .pick:nth-child(4n+3),
  .pick:nth-child(4n+4) { grid-column: span 3; }
}

.pick {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* גובה מפורש ולא aspect-ratio: יחס גובה-רוחב יחד עם min-height נותן
     גם *רוחב* מינימלי (min-height × היחס), וזה הצמיד את שני הטיילים ל-185px
     כל אחד — יותר מרוחב הגריד — ודחף את השורה אל מחוץ למסך. */
  min-height: 96px;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--pick-tint, var(--brand));
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
@media (min-width: 760px) { .pick { min-height: 138px; } }

/* מדליון עגול, לא תמונה מלבנית.
   צילומי המוצר בקטלוג הם על רקע לבן; contain הציג את הרקע הזה כמלבן לבן
   שחתך את הצבע לשניים, ו-cover מלבני הפך את כל הצד לשטח לבן. חיתוך לעיגול
   מוציא את הפינות הלבנות, משאיר את המוצר במרכז, ונקרא כאלמנט מכוון. */
.pick-art {
  position: absolute;
  z-index: -1;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.24), 0 0 0 3px rgba(255,255,255,.16);
  transition: transform var(--d-slow) var(--e-out);
}
@media (min-width: 760px) {
  .pick-art { width: 74px; height: 74px; inset-block-start: 14px; inset-inline-end: 14px; }
}
.pick::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.34) 4%, transparent 58%);
}
.pick b {
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* היה כאן max-width: 9ch — תקרה קשיחה שכוילה לתוויות העבריות.
     באנגלית "AMERICAN BRANDS" הוא 15 תווים באותיות גדולות ועם ריווח,
     והכיתוב נחתך בכל הרוחבים. הגבול האמיתי הוא רוחב האריח, לא ספירת
     תווים, ולכן הוא זה שקובע — והטקסט נשבר לשורה שנייה כשצריך. */
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
}
@media (min-width: 760px) { .pick b { font-size: var(--t-base); } }

@media (hover: hover) {
  .pick:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
  .pick:hover .pick-art { transform: scale(1.07) rotate(-3deg); }
}

/* ========================================================= promo banner ====
   באנר שיווקי בין קרוסלות. הוא <a> יחיד ולא כרטיס עם כפתור בפנים:
   כל השטח לחיץ, וזה קריטי בסלולר שבו מטרת מגע קטנה בתוך באנר גדול
   היא מקור קבוע להחטאות. ה"כפתור" הוא ויזואלי בלבד (span). */

.promo {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--s-2);
  align-content: center;
  min-height: 168px;
  padding: var(--s-5);
  /* מקום שמור למדליון בצד — כדי שהטקסט לא יזלוג מתחתיו בשום רוחב */
  padding-inline-end: 128px;
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--promo-tint, var(--brand));
}
@media (min-width: 760px) {
  .promo { min-height: 216px; padding: var(--s-8) var(--s-10); padding-inline-end: 300px; }
}

/* אותו היגיון כמו ב-.pick-art: עיגול, לא מלבן על רקע לבן */
.promo-art {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--s-5);
  transform: translateY(-50%);
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 4px rgba(255,255,255,.14);
  transition: transform var(--d-slow) var(--e-out);
}
@media (min-width: 760px) {
  .promo-art { width: 184px; height: 184px; inset-inline-end: var(--s-10); }
}

/* section ריק (באנר עם active:false) עדיין נושא padding ומשאיר פס לבן */
.section:empty { display: none; }

.promo .eyebrow { color: rgba(255,255,255,.78); margin: 0; }
.promo h3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  color: #fff;
  max-width: 16ch;
}
@media (min-width: 760px) { .promo h3 { font-size: var(--t-2xl); } }
.promo p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: rgba(255,255,255,.88);
  max-width: 34ch;
}
.promo .fauxbtn {
  justify-self: start;
  margin-block-start: var(--s-2);
  padding: 9px 18px;
  border-radius: var(--r-ctl);
  background: #fff;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 700;
  transition: transform var(--d-base) var(--e-out);
}
@media (hover: hover) {
  /* חייב לחזור על translateY(-50%) — transform הוא מאפיין אחד,
     והשמה חדשה מוחקת את המרכוז האנכי */
  .promo:hover .promo-art { transform: translateY(-50%) scale(1.05); }
  .promo:hover .fauxbtn { transform: translateY(-1px); }
}

/* ================================================================ PDP */

.pdp { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .pdp { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: var(--s-12); align-items: start; } }
.pdp-gallery { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pdp-main { aspect-ratio: 1/1; display: grid; place-items: center; padding: var(--s-6); }
.pdp-main img { max-height: 100%; object-fit: contain; }
.pdp-thumbs { display: flex; gap: var(--s-2); padding: var(--s-3); border-block-start: 1px solid var(--line); }
.pdp-thumbs button { width: 60px; height: 60px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); padding: 4px; }
.pdp-thumbs button[aria-selected="true"] { border-color: var(--cedar); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 900px) { .pdp-buy { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-4)); } }

.pdp-price { font-size: var(--t-2xl); font-weight: 700; font-family: var(--font-display); }
/* ⚠️ 30px בדסקטופ — הגודל שהלקוח ראה עד 0.9.51. הוא הגיע מקטע
   BeTheme (‎.single-product .woocommerce-Price-amount‎) שנחסם; בלעדיו
   ‎--t-2xl‎ היה מגדיל את המחיר ל-36px — הפוך ממה שהלקוח ביקש. */
@media (min-width: 1001px) { .pdp-price { font-size: 1.875rem; } }
.pdp-price.is-sale { color: var(--terracotta); }

.speclist { border-block-start: 1px solid var(--line); margin-block-start: var(--s-5); }
.speclist div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-block-end: 1px solid var(--line); font-size: var(--t-sm); }
.speclist dt { color: var(--muted); }
.speclist dd { margin: 0; font-weight: 600; text-align: end; }

/* ---- אקורדיון מידע המוצר.
   התיאורים מהיצרן ארוכים (רכיבים, סימון תזונתי, אלרגנים) ומציפים את הדף,
   ולכן כל פאנל סגור כברירת מחדל. מבוסס <details> — הפתיחה/סגירה נטיבית,
   נגישה מהמקלדת ועובדת גם בלי JS. */

.pdp-info { margin-block-start: var(--s-12); border-block-start: 1px solid var(--line); }
@media (min-width: 900px) { .pdp-info { max-width: 72ch; } }

.acc { border-block-end: 1px solid var(--line); }
.acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 600;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:focus-visible { outline: 2px solid var(--cedar); outline-offset: 2px; border-radius: var(--r-sm); }
.acc > summary:hover { color: var(--cedar); }
/* חץ שמתהפך בפתיחה. בלי margin-inline-start:auto — ‎space-between‎ כבר דוחף
   אותו לקצה, והשילוב של שניהם עם ה-gap הרחיב את השורה מעבר לרוחב הזמין. */
.acc > summary::after {
  content: ''; flex: none; width: 11px; height: 11px;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.acc[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

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

   עמום ולא מוסתר: הכותרת חלשה יותר, אבל הפאנל עדיין נפתח ונקרא. */
.acc.is-empty > summary { color: var(--muted); font-weight: 500; }
.acc.is-empty > summary:hover { color: var(--ink-2); }
.acc-missing {
  margin-inline-start: auto;
  font-family: var(--font-body);
  font-size: var(--t-xs); font-weight: 600;
  color: var(--muted-2);
  background: var(--paper-2);
  border-radius: var(--r-ctl-sm);
  padding: 2px 8px;
}
.acc-empty { color: var(--muted); margin: 0; }
.acc-body { padding-block-end: var(--s-5); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.7; }
.acc-body > :first-child { margin-block-start: 0; }
.acc-body > :last-child  { margin-block-end: 0; }
.acc-body p { margin-block: var(--s-3); }
.acc-body p:empty { display: none; }
.acc-body h3, .acc-body h4 { font-family: var(--font-display); font-size: var(--t-md); margin-block: var(--s-4) var(--s-2); color: var(--ink); }
.acc-body ul, .acc-body ol { padding-inline-start: var(--s-5); margin-block: var(--s-3); }
.acc-body li { margin-block: 4px; }

@media (prefers-reduced-motion: reduce) { .acc > summary::after { transition: none; } }

/* טבלת סימון תזונתי — גוללת לרוחב במסכים צרים במקום לשבור את הפריסה */
.nutri-wrap { overflow-x: auto; }
.nutri { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.nutri th, .nutri td { padding: var(--s-2) var(--s-3); border-block-end: 1px solid var(--line); text-align: start; }
.nutri thead th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.nutri tbody th { font-weight: 400; color: var(--ink-2); }
.nutri tbody td { font-weight: 600; white-space: nowrap; }
.nutri tbody tr:last-child th, .nutri tbody tr:last-child td { border-block-end: 0; }
/* כותרת משנה בתוך הטבלה ("מתוכם:") — פורשת על כל הרוחב */
.nutri tbody tr.nutri-sub th { color: var(--muted); font-weight: 600; padding-block-start: var(--s-4); }

.factlist { margin: 0; }
.factlist > div { padding-block: var(--s-3); border-block-end: 1px solid var(--line); }
.factlist > div:last-child { border-block-end: 0; }
.factlist dt { color: var(--muted); font-size: var(--t-sm); margin-block-end: 2px; }
.factlist dd { margin: 0; }

.pdp-note { font-size: var(--t-xs); color: var(--muted-2); line-height: 1.6; margin-block-start: var(--s-4); }

/* ============================================================ checkout */

.co { display: grid; gap: var(--s-6); }
@media (min-width: 950px) { .co { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: var(--s-10); align-items: start; } }
.co-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
@media (min-width: 950px) { .co-summary { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-4)); } }

.field { display: flex; flex-direction: column; gap: 6px; margin-block-end: var(--s-4); }
.field label { font-size: var(--t-sm); font-weight: 600; }
.field input, .field select, .field textarea {
  height: 48px; padding-inline: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.field textarea { height: auto; padding: var(--s-3) var(--s-4); min-height: 84px; }
@media (max-width: 899px) { .field input, .field select, .field textarea { font-size: 16px; } }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cedar-300); }
.field .hint { font-size: var(--t-xs); color: var(--muted); }

/* min-width:0 הוא חובה: פריטי grid מקבלים min-width:auto כברירת מחדל, ולכן
   שני inputs זה לצד זה לא מתכווצים מתחת לרוחב הפנימי שלהם (~180px כל אחד)
   ויוצרים גלישה אופקית במסכים צרים. */
.field input, .field select, .field textarea { min-width: 0; width: 100%; }
.field-row { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
.field-row > * { min-width: 0; }
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* בורר חלון משלוח ויזואלי */
.slots { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.slot {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.slot:hover { border-color: var(--line-2); }
.slot input { position: absolute; opacity: 0; }
.slot:has(input:checked) { border-color: var(--cedar); background: var(--cedar-50); }
.slot:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.slot b { display: block; font-size: var(--t-sm); font-weight: 700; }
.slot span { font-size: var(--t-xs); color: var(--muted); }
.slot em { font-style: normal; font-size: var(--t-xs); color: var(--success); font-weight: 700; }
.slot.is-full { opacity: .45; pointer-events: none; }

/* מועד שנקבע מראש ואין עליו בחירה — אזור שבועי, או הזמנה לפני הקאט-אוף.
   נראה כמו סלוט נבחר אבל אינו לחיץ, כי אין למה ללחוץ. */
.slots.is-fixed { grid-template-columns: 1fr; max-width: 340px; }
.slot.is-set { cursor: default; border-color: var(--cedar); background: var(--cedar-50); }

/* "זמן אחר" — פותח שדה טקסט, ולכן מסומן במסגרת מרוסקת */
.slot-other { border-style: dashed; }

/* בחירה מרשימה אנכית, כשהאפשרויות משפטים ולא תאריכים */
.choicelist { display: flex; flex-direction: column; gap: var(--s-2); }
.choice {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--s-3);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  font-size: var(--t-sm);
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.choice:hover { border-color: var(--line-2); }
.choice:has(input:checked) { border-color: var(--cedar); background: var(--cedar-50); }
.choice:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }
/* עיגול הרדיו מצויר ידנית כדי שייראה זהה בכל דפדפן ובשני כיווני הכתיבה */
.choice input { position: absolute; opacity: 0; }
.choice::before {
  content: ''; flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 2px;
  border: 1.5px solid var(--line-2); border-radius: 50%;
  background: var(--surface);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.choice:has(input:checked)::before {
  border-color: var(--cedar);
  box-shadow: inset 0 0 0 4px var(--cedar);
}

.totals div { display: flex; justify-content: space-between; padding-block: var(--s-2); font-size: var(--t-sm); }
.totals .grand { border-block-start: 1px solid var(--line); margin-block-start: var(--s-2); padding-block-start: var(--s-3); font-size: var(--t-lg); font-weight: 700; }

/* =============================================================== footer */

.footer { background: var(--brand-deep); color: rgba(255,255,255,.78); margin-block-start: var(--s-16); }
.footer a { color: rgba(255,255,255,.78); text-decoration: none; font-size: var(--t-sm); }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer h4 { color: #fff; font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase; margin-block-end: var(--s-3); }
.footer-grid { display: grid; gap: var(--s-8); padding-block: var(--s-12); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.footer-bottom { border-block-start: 1px solid rgba(255,255,255,.14); padding-block: var(--s-5); font-size: var(--t-xs); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; }

/* ======================================================== delivery area */
/* יושב בהדר לצד הסל: אזור המשלוח קובע אם אפשר בכלל להזמין, ולכן הוא
   צריך להיות נוכח בכל דף — לא כרטיס חד-פעמי בדף הבית. */
.deliverybtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding-inline: var(--s-3);
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 600;
  max-width: 148px;
  flex-shrink: 0;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.deliverybtn:hover { background: var(--line); color: var(--ink); }
.deliverybtn svg { flex-shrink: 0; }
.deliverybtn .dl-city {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* כשנבחר יישוב הכפתור מקבל את צבע המותג — סימן שהמצב הוגדר */
.deliverybtn.is-set { background: var(--cedar-50); color: var(--cedar); border-color: var(--cedar-300); }

/* תג המועד. באזור יומי הוא ירוק ("עד היום"); באזור שבועי הוא פליז ומציג
   את היום הקבוע — כדי שלקוח בירושלים לא יצפה למשלוח היום. */
.deliverybtn .dl-when {
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 6px; border-radius: var(--r-sm);
  background: var(--success-50); color: var(--success);
  white-space: nowrap;
}
.deliverybtn .dl-when:empty { display: none; }
.deliverybtn.is-weekly .dl-when { background: var(--brass-50); color: var(--brass-700); }

/* קודם נשאר כאן האייקון בלבד, כי הכל נדחס לשורה אחת וההדר נשבר.
   מאז המיקום עבר לשורה משלו יחד עם החיפוש, ולכן הכיתוב חוזר —
   כפתור עגול בלי מילה לא אומר ללקוח שאפשר לבחור אזור משלוח.
   מה שכן יורד במסך צר הוא תג "מתי", שהוא מידע משני. */
@media (max-width: 560px) {
  .deliverybtn { padding-inline: var(--s-3); max-width: none; }
  .deliverybtn .dl-city { display: block; max-width: 11ch; }
  .deliverybtn .dl-when { display: none; }
}

/* ============================================================ language */

/* ⚠️ **הסלקטור כאן היה שגוי וזו הסיבה שהמתג נראה כמו טקסט מקווקו.**
 *
 * הכללים נכתבו לפרוטוטייפ, שבו המתג היה שני ‎<button aria-pressed>‎.
 * בתבנית הוא נפלט כשני ‎<a aria-current>‎ — קישורים אמיתיים, שהם
 * הבחירה הנכונה: החלפת שפה היא ניווט לכתובת אחרת, לא פעולה בעמוד,
 * והיא חייבת לעבוד גם בלי JS ולהיקרא ע"י מנועי חיפוש.
 *
 * אבל אף כלל עיצוב לא חל עליהם, ולכן הם קיבלו את ברירת המחדל של
 * הדפדפן לקישור: כחול, קו תחתון. נמדד באתר החי 13/09/2026.
 *
 * ⚠️ שני הסלקטורים נשמרים — ‎a‎ ו-‎button‎, ‎aria-current‎ ו-‎aria-pressed‎ —
 * כדי שהחלפה חזרה לא תשבור שוב בשקט.
 */
.langtoggle {
  display: inline-flex;
  background: var(--olive-tint, var(--paper-2));
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
  gap: 2px;
}
.langtoggle a,
.langtoggle button {
  min-height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 11px;
  background: none; border: none; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--cedar-700, var(--muted));
  text-decoration: none;
  transition: background var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
/* הצ'יפ הלבן של האפשרות הפעילה — כמו בעיצוב */
.langtoggle a[aria-current="true"],
.langtoggle a[aria-current="page"],
.langtoggle button[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-1);
}

/* =============================================================== toast */

.toast {
  position: fixed;
  inset-inline: var(--gutter);
  /* +64px: בסלולר ההודעה כמעט ברוחב המסך ויושבת בדיוק על כפתור
     הנגישות שבפינה. בדסקטופ היא צרה וממורכזת ולכן לא צריך את זה. */
  inset-block-end: calc(var(--mobilebar-h) + var(--s-4) + 64px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  margin-inline: auto;
  max-width: 420px;
  background: var(--ink);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  font-size: var(--t-sm);
  display: flex; align-items: center; gap: var(--s-3);
  opacity: 0; transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
@media (min-width: 900px) { .toast { inset-block-end: var(--s-6); } }

/* ============================================================ skeleton */

.skel { background: linear-gradient(90deg, var(--paper-2) 25%, var(--line) 37%, var(--paper-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s infinite linear; border-radius: var(--r-md); }
@keyframes shimmer { to { background-position: -135% 0; } }

/* ============================================================== empty */

.empty { text-align: center; padding: var(--s-16) var(--s-4); color: var(--muted); }
.empty h3 { color: var(--ink); }


/* ========================================================== quick list

   רשימה מהירה — הדבקת רשימת קניות במקום חיפוש מוצר-מוצר.

   הכל בתכונות לוגיות (inline-start/end), ולכן המודאל מתהפך מעצמו
   בין עברית לאנגלית בלי גיליון נפרד — בדיוק כמו שאר האתר.
   =========================================================================== */

/* --- הכפתור שרוכב על שדה החיפוש ---------------------------------------

   מיקום: בתוך .search ולא לצדו. ההדר כבר צפוף (לוגו, חיפוש, שפה, אזור,
   חשבון, סל), וכפתור נוסף בשורה היה דוחק את החיפוש. כאן הוא לא עולה
   רוחב בכלל, והוא יושב בדיוק במקום שאליו הלקוח מסתכל כשהוא רוצה למצוא
   מוצרים — מה שהופך אותו לחלופה מובנת לחיפוש, לא לפיצ'ר נסתר. */
.qlbtn {
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding-inline: var(--s-3);
  /* לבן על השדה האפור — הכפתור הוא הדבר הבהיר בתוך משטח שקוע,
     ולכן הוא קופץ ממנו. קודם שניהם היו בהירים והוא נבלע. */
  background: var(--surface);
  color: var(--cedar);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  box-shadow: var(--sh-1);
  font-size: var(--t-sm); font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.qlbtn:hover { background: var(--cedar); color: #fff; border-color: var(--cedar); }
.qlbtn svg { flex-shrink: 0; }
/* מתחת ל-620px נשאר האייקון בלבד — הטקסט היה גונב מחצית משדה החיפוש */
.qlbtn .qlbtn-txt { display: none; }
@media (min-width: 620px) {
  .qlbtn .qlbtn-txt { display: inline; }
}
/* מקום לכפתור בתוך השדה, כדי שהטקסט המוקלד לא יזחל מתחתיו */
/* ⚠️ **הריפוד הזה אופס 21/09/2026.**
   הוא שמר מקום לכפתור «רשימה» שישב בתוך שדה החיפוש. הכפתור הוסר
   (ראו header.php), ובלי האיפוס נשאר חור של 52–104px בקצה השדה
   וה-placeholder היה נראה תלוי באמצע. */
.search input { padding-inline-end: var(--s-4); }

/* --- הבאנר בדף הבית --------------------------------------------------- */

.qlband {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-5) var(--s-6);
  background: var(--cedar-50);
  border: 1px solid var(--cedar-300);
  border-radius: var(--r-lg);
}
.qlband-ico { color: var(--cedar); flex-shrink: 0; }
.qlband-txt { flex: 1; min-width: 220px; }
.qlband h3 { font-size: var(--t-lg); margin-block-end: 2px; }
.qlband p { font-size: var(--t-sm); color: var(--ink-2); }

/* --- המודאל ----------------------------------------------------------- */

.qlmodal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; }
.qlmodal[hidden] { display: none; }
.qlm-backdrop { position: absolute; inset: 0; background: rgba(26,26,24,.46); }

.qlm-panel {
  position: relative;
  margin: auto;
  inline-size: min(760px, 100%);
  max-block-size: 100dvh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  overflow: hidden;
  animation: qlpop var(--d-base) var(--e-out);
}
@keyframes qlpop { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } }

/* במובייל: גיליון מלא מלמטה. הרשימה ארוכה ומקלדת נפתחת מעליה. */
@media (max-width: 719px) {
  .qlm-panel {
    margin: 0; margin-block-start: auto;
    inline-size: 100%;
    block-size: 92dvh;
    border-start-start-radius: var(--r-xl);
    border-start-end-radius: var(--r-xl);
    border-end-start-radius: 0; border-end-end-radius: 0;
  }
}

.qlm-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--line);
}
.qlm-head h2 { font-size: var(--t-xl); }
.qlm-head .icon-btn { margin-inline-start: auto; }

.qlm-body { flex: 1; overflow-y: auto; padding: var(--s-5); }
.qlm-sub { color: var(--muted); font-size: var(--t-sm); margin-block-end: var(--s-4); }

.qlm-input {
  inline-size: 100%;
  min-block-size: 190px;
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-family: inherit;
  font-size: var(--t-md);   /* 16px — מונע זום אוטומטי ב-iOS */
  line-height: var(--lh-body);
  resize: vertical;
}
.qlm-input:focus { border-color: var(--cedar-300); outline: none; }
.qlm-hint { font-size: var(--t-xs); color: var(--muted); margin-block: var(--s-3); }
.qlm-count { font-size: var(--t-sm); font-weight: 700; color: var(--cedar); margin-block-end: var(--s-3); }

.qlm-foot { padding: var(--s-4) var(--s-5); border-block-start: 1px solid var(--line); background: var(--paper); }
.qlm-actions { display: flex; gap: var(--s-3); }
.qlm-actions .btn:last-child { flex: 1; }

/* --- שורת תוצאה ------------------------------------------------------- */

.qlrows { display: flex; flex-direction: column; gap: var(--s-2); }

.qlrow {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
/* התאמה שאינה חד-משמעית — סימון עדין שמזמין בדיקה, לא אזהרה מבהילה */
.qlrow.is-unsure { border-inline-start: 3px solid var(--brass); }
.qlrow.is-miss {
  grid-template-columns: 1fr auto;
  background: var(--terracotta-50);
  border-color: var(--terracotta);
}

.qlr-img { inline-size: 56px; block-size: 56px; object-fit: contain; border-radius: var(--r-md); background: #fff; }
.qlr-main { min-inline-size: 0; }
.qlr-said { font-size: var(--t-xs); color: var(--muted); margin-block-end: 4px; }
.qlr-label { font-weight: 700; }
.qlr-said em { font-style: normal; color: var(--warning); font-weight: 700; }
.qlr-none { font-size: var(--t-sm); font-weight: 600; color: var(--terracotta); }
.qlr-oos { font-size: var(--t-xs); color: var(--terracotta); font-weight: 700; margin-block-start: 4px; }

.qlr-pick select {
  inline-size: 100%;
  max-inline-size: 100%;
  padding: 6px var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  font-family: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--ink);
}
.qlr-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qlr-side .price { font-size: var(--t-sm); }

.stepper-sm { height: 34px; }
.stepper-sm button { inline-size: 30px; block-size: 34px; font-size: 17px; }
.stepper-sm output { min-inline-size: 22px; font-size: var(--t-xs); }

.qlr-x {
  inline-size: 30px; block-size: 30px;
  background: none; border: none;
  color: var(--muted); font-size: 20px; line-height: 1;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.qlr-x:hover { background: var(--line); color: var(--ink); }

/* צר: התמונה והכמות יורדות לשורה משלהן במקום לרסק את שם המוצר */
@media (max-width: 519px) {
  .qlrow { grid-template-columns: 44px 1fr auto; }
  .qlr-img { inline-size: 44px; block-size: 44px; }
  .qlr-side { grid-column: 2 / -1; flex-direction: row; justify-content: flex-start; gap: var(--s-3); }
}

/* --- צילום רשימה בכתב יד ---------------------------------------------- */

/* הצילום מוצג כשטח לחיץ גדול ולא ככפתור קטן: זו הדרך שדורשת מהלקוח
   הכי פחות עבודה, ולכן היא צריכה להיות הדבר הראשון שהעין נופלת עליו. */
.qlphoto {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--cedar-50);
  border: 1px dashed var(--cedar-300);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out);
}
.qlphoto:hover { background: var(--surface); border-style: solid; }
.qlphoto:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.qlphoto-ico {
  flex-shrink: 0;
  inline-size: 46px; block-size: 46px;
  display: grid; place-items: center;
  background: var(--cedar); color: #fff;
  border-radius: var(--r-pill);
}
.qlphoto-txt { min-inline-size: 0; }
.qlphoto-txt b { display: block; font-size: var(--t-md); }
.qlphoto-txt small { display: block; font-size: var(--t-xs); color: var(--muted); line-height: var(--lh-snug); }

/* מפריד "או" — מבהיר שאלו שתי דרכים חלופיות, לא שני שלבים */
.qlm-or {
  display: flex; align-items: center; gap: var(--s-3);
  margin-block: var(--s-4);
  color: var(--muted); font-size: var(--t-sm);
}
.qlm-or::before, .qlm-or::after {
  content: ''; flex: 1; block-size: 1px; background: var(--line);
}

/* מצב קריאה */
.qlbusy { text-align: center; padding: var(--s-12) var(--s-4); }
.qlbusy h3 { margin-block: var(--s-4) var(--s-1); }
.qlbusy p { color: var(--muted); font-size: var(--t-sm); }
.qlbusy-spin {
  inline-size: 38px; block-size: 38px; margin-inline: auto;
  border: 3px solid var(--line);
  border-block-start-color: var(--cedar);
  border-radius: 50%;
  animation: qlspin .9s linear infinite;
}
@keyframes qlspin { to { transform: rotate(360deg); } }
/* מכבד העדפת צמצום תנועה: פעימה במקום סיבוב */
@media (prefers-reduced-motion: reduce) {
  .qlbusy-spin { animation: qlpulse 1.4s ease-in-out infinite; }
  @keyframes qlpulse { 50% { opacity: .35; } }
}

/* הודעת שגיאה בשלב הקלט */
.qlm-err {
  margin-block-start: var(--s-3);
  padding: var(--s-3);
  background: var(--terracotta-50);
  border: 1px solid var(--terracotta);
  border-radius: var(--r-md);
  color: var(--terracotta);
  font-size: var(--t-sm); font-weight: 600;
}
.qlm-err[hidden] { display: none; }

/* הערה על מילים שלא היו ברורות בכתב היד */
.qlm-note {
  margin-block-end: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--brass-50);
  border-inline-start: 3px solid var(--brass);
  border-radius: var(--r-md);
  font-size: var(--t-sm); color: var(--ink-2);
}

/* ============================================================ recipes

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

.reccards {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .reccards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .reccards { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.reccard {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.reccard:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }

/* האריח גדל מ-150 ל-210 והאמוג׳י מ-54 ל-84: בגודל הקודם הכרטיס נראה
   כמו שורת רשימה ולא הזמין להיכנס. */
.reccard-art, .rechead-art {
  display: grid; place-items: center;
  font-size: 84px; line-height: 1;
  background: var(--cedar-50);
  overflow: hidden;
}
.reccard-art { block-size: 210px; }
.rechead-art {
  inline-size: 150px; block-size: 150px;
  border-radius: var(--r-lg);
  font-size: 62px;
  flex-shrink: 0;
}
/* כשיש תמונה אמיתית — צילום מנה או צילום מוצר — היא ממלאה את האריח */
.reccard-art.has-photo, .rechead-art.has-photo { background: var(--surface); }
.reccard-art img, .rechead-art img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  display: block;
}
/* צילומי מוצר מהקטלוג הם על רקע לבן עם שוליים — contain שומר עליהם
   שלמים במקום לחתוך את האריזה. */
.reccard-art.has-photo img, .rechead-art.has-photo img { object-fit: contain; padding: var(--s-3); }
/* התמונה מתקרבת קלות בריחוף — סימן שהכרטיס לחיץ */
.reccard:hover .reccard-art img { transform: scale(1.04); }
.reccard-art img { transition: transform var(--d-base) var(--e-out); }
@media (prefers-reduced-motion: reduce) { .reccard-art img { transition: none; } }

/* סיכום עלות בסל */
.bsk-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 2px solid var(--line);
  font-size: var(--t-base);
}
.bsk-total .price { font-size: var(--t-lg); }
/* גוון לפי סוג המנה — נותן לרשת גיוון בלי צילומים */
[data-tint="terracotta"] { background: var(--terracotta-50); }
[data-tint="brass"]      { background: var(--brass-50); }
[data-tint="cedar"]      { background: var(--cedar-50); }

.reccard-body { display: flex; flex-direction: column; gap: 4px; padding: var(--s-4); }
.reccard-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.reccard-name { font-size: var(--t-lg); font-weight: 700; line-height: var(--lh-snug); }
.reccard-blurb { font-size: var(--t-sm); color: var(--muted); line-height: var(--lh-snug); }
.reccard-meta {
  margin-block-start: var(--s-2);
  font-size: var(--t-xs); color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

/* ---- דף המתכון */

.rechead {
  display: flex; align-items: flex-start; gap: var(--s-5);
  flex-wrap: wrap;
  margin-block-end: var(--s-8);
}

.recgrid { display: grid; gap: var(--s-8); align-items: start; }
/* הרכיבים נשארים בעמודה צרה וקבועה — הם רשימה, לא טקסט רץ */
@media (min-width: 900px) { .recgrid { grid-template-columns: 360px 1fr; gap: var(--s-10); } }

.recings { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.recing {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--s-2);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--line);
}
.recing-text { font-weight: 600; }
/* המוצר שיתווסף בפועל — קטן ומשני, אבל גלוי לפני הלחיצה */
.recing-prod {
  grid-column: 1 / -1;
  display: flex; gap: var(--s-2); align-items: baseline;
  font-size: var(--t-xs); color: var(--muted);
}
.recing-prod .price { color: var(--ink-2); font-weight: 700; }
.recing-none { color: var(--terracotta); font-weight: 600; }
.recing.is-pantry .recing-text { color: var(--muted); }

.recsteps { margin: var(--s-4) 0 0; padding-inline-start: var(--s-5); }
.recsteps li {
  margin-block-end: var(--s-4);
  line-height: var(--lh-body);
  padding-inline-start: var(--s-2);
}
.recsteps li::marker { color: var(--cedar); font-weight: 700; }

/* ---- "יש לי כבר" בשורת מסך האישור */

.qlrow { grid-template-columns: auto 56px 1fr auto auto; }
.qlrow.is-miss { grid-template-columns: 1fr auto; }
.qlr-have { display: grid; place-items: center; }
.qlr-have input {
  inline-size: 20px; block-size: 20px;
  accent-color: var(--cedar);
  cursor: pointer;
}
/* שורה שהוסרה נשארת גלויה אבל עמומה — הלקוח רואה שהרכיב זוהה */
.qlrow.is-off { opacity: .5; }
.qlrow.is-off .qlr-img { filter: grayscale(1); }

@media (max-width: 519px) {
  .qlrow { grid-template-columns: auto 44px 1fr auto; }
  .qlr-side { grid-column: 3 / -1; }
}

/* ---- שני באנרים באותו סלוט ------------------------------------------
   בצר הם נערמים; מ-760px הם חולקים את השורה בחלקים שווים. */
.promopair { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .promopair { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* טאב פעיל ברשימת המתכונים */
.chip.is-on {
  background: var(--cedar);
  border-color: var(--cedar);
  color: #fff;
}

/* ---- מסירת התשלום לחברת הסליקה --------------------------------------
   שדות הכרטיס הוסרו; מה שנשאר הוא הסבר מה עומד לקרות. */
.payhand {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--cedar-50);
  border: 1px solid var(--cedar-300);
  border-radius: var(--r-lg);
}
.payhand-ico {
  flex-shrink: 0;
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  background: var(--cedar); color: #fff;
  border-radius: var(--r-pill);
}
.payhand b { display: block; font-size: var(--t-md); margin-block-end: 2px; }
.payhand p { font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-snug); }
.payhand-provider { margin-block-start: var(--s-2); color: var(--muted); }
.payhand-provider strong { color: var(--ink); letter-spacing: .02em; }

.paynotes {
  margin-block-start: var(--s-3);
  padding-inline-start: var(--s-5);
  font-size: var(--t-sm); color: var(--muted);
}
.paynotes li { margin-block-end: 4px; line-height: var(--lh-snug); }
/* ============================================================== coupon

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

/* מסגרת מודגשת ולא קו מפריד עדין: בגרסה הראשונה השדה ישב בעמודת
   הסיכום עם גבול דק, ופשוט לא נראה. פס הצבע בקצה מסמן "כאן יש כסף
   לחסוך" ומבדיל אותו מקופסת התשלום הירוקה שמתחתיו. */
.coupon {
  padding: var(--s-4);
  background: var(--brass-50);
  border: 1px solid var(--brass);
  border-inline-start: 4px solid var(--brass);
  border-radius: var(--r-lg);
}
.coupon-row { display: flex; gap: var(--s-2); }
.coupon-row input {
  flex: 1; min-inline-size: 0;
  height: 46px; padding-inline: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--brass);
  border-radius: var(--r-md);
  font-family: inherit; font-size: var(--t-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.coupon-row input::placeholder { font-weight: 400; letter-spacing: 0; text-transform: none; }
/* "החלה" נצבע בפליז כדי לבלוט בתוך מסגרת הקופון החומה. מאז שהאתר
   ירד לאפור בטון ופסטלים הוא נשאר הכתם החום היחיד בעמוד ההזמנה,
   וקרא כמו רכיב משריד. עכשיו הוא כמו כל כפתור ראשי אחר באתר. */
.coupon-row .btn { min-height: 46px; background: var(--cedar); border-color: var(--cedar); color: #fff; }
.coupon-row .btn:hover { background: var(--cedar-700); border-color: var(--cedar-700); }

/* מתחת ל-420px השדה והכפתור לא נכנסים לשורה אחת בלי לרסק את השדה */
@media (max-width: 419px) {
  .coupon-row { flex-direction: column; }
  .coupon-row .btn { inline-size: 100%; }
}
.coupon-row input:focus { border-color: var(--cedar-300); outline: none; }
.coupon-row .btn { flex-shrink: 0; }

/* גיוס לרשימת הדיוור, מתחת לשדה הקופון. מופרד בקו ולא בקופסה נוספת:
   הוא הצעה, לא שדה שני שצריך למלא. */
.coupon-news {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1px dashed var(--line-2);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.coupon-news p {
  margin: 0; font-size: var(--t-sm); color: var(--muted); flex: 1 1 200px;
}
.coupon-news .btn { flex-shrink: 0; }

.coupon-msg { margin-block-start: var(--s-2); font-size: var(--t-sm); font-weight: 600; }
.coupon-msg.is-bad { color: var(--terracotta); }
.coupon-msg[hidden] { display: none; }

/* אחרי החלה: המסגרת עצמה הופכת ירוקה במקום לקנן קופסה ירוקה בתוך
   קופסה חומה. שינוי הצבע הוא האישור — לא צריך עוד גבול. */
.coupon.is-applied {
  background: var(--success-50);
  border-color: var(--success);
  border-inline-start-color: var(--success);
}
.coupon-on { display: flex; align-items: center; gap: var(--s-3); }
.coupon-on div { flex: 1; min-inline-size: 0; }
.coupon-on b { display: block; font-size: var(--t-base); letter-spacing: .06em; }
.coupon-on small { display: block; font-size: var(--t-xs); color: var(--ink-2); }

/* שורת ההנחה בסיכום — ירוקה ומסומנת במינוס, כדי שתיקרא כהפחתה */
.totals .is-discount span { color: var(--success); font-weight: 700; }
/* ---- התיבה כשהיא ראשונה בעמוד -----------------------------------------
   ברגע שרצועת האמון ירדה למטה, התיבה הזו היא הדבר הראשון אחרי ההירו.
   בגודל הקודם היא נראתה כמו הערת שוליים במקום שער כניסה. */
.qlband.is-lead {
  padding: var(--s-6);
  border-width: 2px;
  box-shadow: var(--sh-2);
}
.qlband.is-lead h3 { font-size: var(--t-xl); }
.qlband.is-lead p { font-size: var(--t-base); }
.qlband.is-lead .qlband-ico { color: var(--cedar); }
.qlband.is-lead .qlband-ico svg { width: 42px; height: 42px; }

/* שני הכפתורים יחד: הראשי, ומתחתיו קיצור לצילום */
.qlband-cta { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.qlband-photo {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px var(--s-3);
  background: none; border: 1px solid transparent;
  color: var(--cedar); font-family: inherit;
  font-size: var(--t-sm); font-weight: 700;
  border-radius: var(--r-ctl); cursor: pointer;
}
.qlband-photo:hover { border-color: var(--cedar-300); background: var(--surface); }
@media (max-width: 619px) {
  .qlband-cta { inline-size: 100%; }
  .qlband.is-lead .btn { inline-size: 100%; }
}

/* ============================================================ נארז בשבילך
   עמוד הסלים המוכנים. ראו page-baskets.php ו-inc/baskets.php.

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

   ⚠️ נשען רק על טוקנים קיימים (--paper/--line/--ink/--s-*/--t-*), ולכן
   עובד בכל ערכות הנושא ובשני מצבי הכיווניות בלי כלל נוסף. */

.bsk-intro { max-inline-size: 60ch; margin-block-end: var(--s-6); }
.bsk-intro h1 { margin-block-end: var(--s-3); }
.bsk-intro p { color: var(--muted); line-height: 1.6; }
.bsk-note { font-size: var(--t-sm); color: var(--muted-2); margin-block-start: var(--s-2); }

/* ⚠️ auto-fill עם minmax ולא מספר עמודות קבוע: מספר הסלים משתנה
   (הלקוח יוסיף ויסיר), ורשת קשיחה הייתה משאירה חור בשורה האחרונה. */
.bsk-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  align-items: start;
}

.bsk {
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
}

.bsk-head {
  padding: var(--s-4);
  /* ⚠️ הגוון נכנס כרקע עדין ולא כמילוי מלא: טקסט לבן על terracotta
     בגודל רגיל אינו עומד ב-4.5:1 (ת"י 5568), והכותרות כאן קטנות. */
  background: color-mix(in srgb, var(--bsk-tint, var(--cedar)) 10%, transparent);
  border-block-end: 1px solid var(--line);
}

.bsk-emoji { font-size: 26px; line-height: 1; display: block; margin-block-end: var(--s-2); }
.bsk-name  { margin: 0 0 4px; font-size: var(--t-lg, 1.1rem); }
.bsk-blurb { margin: 0 0 var(--s-3); font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }

/* ⚠️ גובה מוגבל עם גלילה. «ממלאים את הבית» הוא 50 פריטים — בלי התקרה
   כרטיס אחד היה דוחף את כל השאר מתחת לקפל, ובסלולר העמוד היה נפתח
   באורך של כמה מסכים. */
.bsk-items {
  list-style: none;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  max-block-size: 300px;
  overflow-y: auto;
  flex: 1;
}

.bsk-item { display: flex; align-items: center; gap: var(--s-2); padding-block: 5px; }
.bsk-item input { inline-size: 18px; block-size: 18px; flex-shrink: 0; accent-color: var(--bsk-tint, var(--cedar)); }
.bsk-item label { font-size: var(--t-sm); cursor: pointer; min-inline-size: 0; }

/* פריט לא מסומן — «כנראה כבר בבית». עמום, אך לא מתחת לסף הקריאות. */
.bsk-item input:not(:checked) + label { color: var(--muted); }

.bsk-foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4);
  border-block-start: 1px solid var(--line);
  background: var(--paper);
}

.bsk-foot .btn { flex: 1; min-inline-size: 140px; }
.bsk-count { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

.bsk-fill[disabled] { opacity: .55; cursor: not-allowed; }

@media (max-width: 619px) {
  .bsk-grid { grid-template-columns: 1fr; }
  .bsk-items { max-block-size: 240px; }
  .bsk-foot .btn { inline-size: 100%; }
}