/* בלק צ'רי — עמוד תפריט · כויל V3 (20.7.26) לפיגמה Menu 652:1471 (1440×3600) / M_menu 712:5072 (393×850).
   כל מידה כאן נמדדה מ-node-JSON ב-figma-extract/2026-07-20/raw — לא מהעין. node-id מצוין ליד כל בלוק. */

.menu-shell,
main { background: var(--bc-white); } /* פיגמה 652:1471 fill=#ffffff — הרקע מתחת להירו לבן, לא קרם */

/* גוונים שאין להם טוקן גלובלי (נמדדו בפיגמה) — מרוכזים כאן ולא פזורים בקוד */
.menu-shell,
.al-layer,
.pp-layer {
  --menu-hairline: #d6c2c4;   /* בסיס קווי-השיער — בשימוש דרך rgba(214,194,196,α) · 2131:3758 / 2131:3761 */
  --menu-strip-bg: #f4f3f1;   /* רקע רצועת האלרגנים + סטפר הכמות · 2137:3176 / 656:9212 */
  --menu-check-line: #847375; /* מסגרת תיבת-סימון לא-מסומנת · 2131:3558 */
  --menu-fs-32: 2rem;         /* כותרת מודאל האלרגנים 32px · 2137:2847 (אין טוקן 32 בסקאלה) */
  --menu-rose-line: #ead7da;  /* קווי-הפרדה בפופאפ + רקע צ'יפ נבחר · 853:1978 / 658:9756 */
  --menu-modal-shadow: -20px 0 40px rgba(43, 43, 43, .05); /* צל המודאלים · 656:6715 / 2137:2836 */
}

/* ── Hero · 652:1744 (1440×400) · מובייל 712:5113 (393×300) ── */
.menu-hero { position: relative; block-size: 400px; display: grid; place-items: center; overflow: hidden; }
.menu-hero-bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.menu-hero-overlay { position: absolute; inset: 0; background: rgba(1, 1, 1, .6); } /* 652:1746 fill #010101 a.60 */
.menu-hero-content { position: relative; text-align: center; color: var(--bc-white); padding-inline: 102px; } /* 652:1746 padding 73/102 */
/* 652:1747 Container 800×129 = כותרת 90 + תת-כותרת 39 → gap 0 */
.menu-hero-content h1 {
  font-size: var(--fs-hero); font-weight: var(--fw-regular); line-height: 1.25; /* 72/90 · 652:1812 — בלי text-shadow (אין effects בפיגמה) */
  margin: 0;
}
.menu-hero-content p {
  font-size: var(--fs-hero-sub); line-height: 1.625; /* 24/39 · 652:1751 */
  margin: 0; color: rgba(255, 255, 255, .95);
  text-shadow: 0 4px 3px rgba(0, 0, 0, .07), 0 2px 2px rgba(0, 0, 0, .06); /* 652:1750 */
}

/* ── בר טוגל · 348:6631 — 704×52, r12, padding 4, רקע #e9e8e6; מקטע 232×44 r12 ── */
/* נעיצה-בגלילה (26.7, הכרעת שילה — **אינה מהפיגמה**): כל 17,055 ה-nodes בקובץ הם
   scrollBehavior:SCROLLS, כלומר הקובץ שותק לגמרי בשאלה הזאת. בדסקטופ נעוץ הטוגל
   (חלבי/בשרי/קונדיטוריה) — מעבר-תפריט הוא הפעולה שחוזרת לאורך גלילה ארוכה; הסיידבר
   הנעוץ כבר מחזיק את הניווט הקטגורי. במובייל נעוץ הטוגל לבדו — אין שם סיידבר.
   ‏--menu-bar-top = גובה ההדר הנעוץ (103 דסקטופ / 64 מובייל). רשום ב-figma-decisions. */
.menu-shell { --menu-bar-top: 103px; }
.menu-toggle-wrap {
  display: flex; justify-content: center; margin-block-start: 48px; /* 652:1471 gap 48 */
  position: sticky; inset-block-start: var(--menu-bar-top); z-index: 20;
  /* הפס נעוץ מעל הכרטיסים — בלי רקע מלא הם נראים מבעדו. הריפוד מחזיר את המרווח
     שהרקע "בולע" ומונע קפיצת-פריסה ברגע ההיצמדות.
     ⚠ הרקע חייב להיות **המשטח שמאחורי הפס בפועל**. עד 28.7 היה כאן --bc-cream
     כי זה רקע ה-body — אבל ‎main‎/‎.menu-shell‎ בעמוד התפריט הם לבנים (נמדד:
     rgb(255,255,255)), ולכן הפס צייר פס קרם על עמוד לבן. דיווח שילה 28.7.
     ‏--bc-cream נשאר הרקע של פאנל-הכרטיס (‎.pc-body‎) — שם הוא נכון. */
  background: var(--bc-white); padding-block: 12px; margin-block-end: -12px;
}
.menu-toggle {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  inline-size: min(704px, 100%); block-size: 52px;
  background: var(--bc-gray-bg); border-radius: var(--radius-card); padding: 4px;
}
.menu-toggle-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; /* I348:6631;273:1177 gap 8 */
  min-inline-size: 0; border-radius: var(--radius-card);
  color: var(--bc-ink); font-size: var(--fs-lg); font-weight: var(--fw-regular); /* 18/20 */
  white-space: nowrap; transition: background .2s ease, color .2s ease;
}
.menu-toggle-btn i { font-size: var(--fs-md); line-height: 1; }
.menu-toggle-btn:hover { background: rgba(59, 15, 26, .06); }
.menu-toggle-btn.active { background: var(--bc-primary); color: var(--bc-white); font-weight: var(--fw-semibold); }
.menu-toggle-btn.active:hover { background: var(--bc-primary); }

/* צ'יפי סינון תזונתי (.menu-filters/.diet-chip) הוסרו 29.7.26 לפי בקשת טליה —
   סטייה מכוונת מפיגמה 2131:3544. */

/* ── פריסה · 2131:3571 — סיידבר 320 · gap 40 · גריד 984 ── */
.menu-layout {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px;
  align-items: start;
  margin-block-start: 48px; margin-block-end: 0; /* 2131:3541 gap 48; המרווח לפוטר על הפוטר עצמו */
}
/* מרווח תוכן→פוטר בעמוד התפריט = 48 (רצועה y3085 → פוטר y3133) ולא 72 הגלובלי.
   ⚠ המרווח יושב על ה-**מעטפת** ולא על margin של הפוטר: margin של הפוטר נמצא מחוץ
   ל-main ולכן נצבע ברקע ה-body (קרם #f9f5ed) בעוד main כאן לבן — ויצא פס-קרם שנקרא
   כאילו הוא מסתיר תוכן (דיווח שילה 3.8.26). אותה דרך שכבר ננקטה בגלריה, בצור-קשר
   ובהסיפור-שלנו. מתחת ל-961 המרווח 0 ממילא (chrome.css) ולכן ה-padding מותנה. */
footer.site-footer { margin-block-start: 0; }
@media (min-width: 961px) { .menu-shell { padding-block-end: 48px; } }
.menu-main { min-inline-size: 0; }
/* --cat-top = היסט ה-sticky; --cat-gap = אוויר לתחתית החלון.
   שניהם משמשים גם לחישוב הגובה המרבי של הסיידבר — ערך אחד, מקום אחד.
   26.7: מאז שבר-הטוגל נעוץ, ההיסט = 103 (הדר) + 12+52+12 (הטוגל עם ריפודו) + 12 = 191.
   בלי העדכון הזה הסיידבר היה נעצר ב-115 ונחתך מאחורי הטוגל. */
.menu-side { position: sticky; inset-block-start: var(--cat-top); min-inline-size: 0; --cat-top: 191px; --cat-gap: 24px; }

/* ── סיידבר: אקורדיון קטגוריות · 2131:3758 — 320 רחב, r8, padding 8,
      רקע לבן-שקוף .5 + מסגרת #d6c2c4 + צל + טשטוש-רקע ── */
.cat-nav {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(214, 194, 196, .3); border-radius: var(--radius-8); /* stroke #d6c2c4 @0.30 · 2131:3758 */
  padding: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05); /* DROP_SHADOW · 2131:3758 */
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* BACKGROUND_BLUR 4 */

  /* גלילה עצמאית לרשימת הקטגוריות (סטייה מכוונת מהפיגמה — ראה figma-decisions.json).
     בפיגמה הרשימה קצרה ונכנסת במלואה; בקטלוג האמיתי היא ארוכה מהמסך, ובלי גובה
     מרבי משלה הדרך היחידה להגיע לסופה היתה לגלול את כל העמוד — כלומר גלילת
     הקטגוריות והמוצרים היו כרוכות זו בזו.
     overflow: hidden auto — אופקית חסום (שומר על חיתוך הפינות המעוגלות), אנכית נגלל.
     overscroll-behavior: contain — בסוף הרשימה הגלילה נעצרת ולא "נדבקת" לעמוד. */
  max-block-size: calc(100dvh - var(--cat-top) - var(--cat-gap));
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(192, 132, 151, .45) transparent; /* --bc-primary מרוכך, לא אפור-מערכת */
}
.cat-nav::-webkit-scrollbar { inline-size: 6px; }
.cat-nav::-webkit-scrollbar-track { background: transparent; }
.cat-nav::-webkit-scrollbar-thumb {
  background: rgba(192, 132, 151, .45); border-radius: 3px;
}
.cat-nav::-webkit-scrollbar-thumb:hover { background: rgba(192, 132, 151, .7); }
/* שורת-על · 2131:3761 — 67px, padding 16/24, מפריד תחתון */
.cat-btn {
  inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-block-size: 67px; padding: 16px 24px; text-align: start;
  color: var(--bc-ink); font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.5; /* 16/24 */
  border-block-end: 1px solid rgba(214, 194, 196, .1); /* #d6c2c4 @0.10 · 2131:3761 — כמעט בלתי-נראה בכוונה */
  transition: background .18s ease, color .18s ease;
}
/* בפיגמה גם השורה האחרונה נושאת מפריד (2131:3816 stroke) — לכן אין ביטול ל-last-child */
.cat-btn:hover { background: rgba(59, 15, 26, .04); }
.cat-btn.active { color: var(--bc-primary); background: rgba(192, 132, 151, .12); }
.cat-btn .cat-chev {
  font-size: var(--fs-sm); line-height: 1; color: var(--bc-ink); flex: none; /* 2131:3763 — 14px */
  transition: transform .2s ease;
}
/* 30.7 — הכותרת אינה עוד כפתור-אקורדיון יחיד (.cat-group הוסר מ-menu.js), ולכן
   הרוטציה תלויה בשברון בלבד. */
.cat-chev-btn[aria-expanded="false"] .cat-chev { transform: rotate(180deg); } /* chevron-up ↔ down */

/* שורת כותרת-קבוצה — **כל** קבוצה, מ-30.7 (לפני כן רק אב עם מוצרים משלו).
   שני יעדי-לחיצה בשורה אחת: הטקסט בוחר את הקבוצה כולה, השברון פותח/סוגר.
   ויזואלית זהה לשורת-על רגילה — המפריד עובר מהכפתור אל השורה כדי שלא ייחתך באמצע. */
.cat-row { display: flex; align-items: stretch; border-block-end: 1px solid rgba(214, 194, 196, .1); }
.cat-row .cat-btn { flex: 1; min-inline-size: 0; padding-inline-end: 0; border-block-end: 0; }
.cat-row.active { background: rgba(192, 132, 151, .12); }
.cat-row.active .cat-btn.active { background: none; } /* הרקע על השורה כולה, לא פעמיים */
.cat-chev-btn {
  flex: none; display: flex; align-items: center; padding-inline: 16px 24px;
  background: none; border: 0; cursor: pointer; color: var(--bc-ink);
  transition: background .18s ease;
}
.cat-chev-btn:hover { background: rgba(59, 15, 26, .06); }
.cat-row:hover { background: rgba(59, 15, 26, .04); }
.cat-chev-btn:focus-visible,
.cat-row .cat-btn:focus-visible { outline: 2px solid var(--bc-primary); outline-offset: -2px; }
/* פאנל תת-קטגוריות · 2131:3765 — רקע לבן-שקוף .5; שורה 45px, padding 12/48/12/24 */
.cat-sub { background: rgba(255, 255, 255, .5); }
.cat-sub[hidden] { display: none; }
.cat-sub .cat-btn {
  min-block-size: 45px; padding-block: 12px;
  padding-inline-start: 48px; padding-inline-end: 24px; /* הזחה בצד-ההתחלה (ימין ב-RTL) */
  font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: 1.43; /* 14/20 · 2131:3767 */
  color: var(--bc-ink-soft); /* #47393b — תואם מדויק ל-2131:3767 */
  border-block-end-color: rgba(214, 194, 196, .05); /* מפריד תת-שורה @0.05 · 2131:3766 */
}

/* ── גריד מוצרים · 2131:3573 — 3×317, gap-עמודות 16, gap-שורות 24 (2131:3572) ── */
.menu-grid-sentinel { block-size: 1px; inline-size: 100%; } /* עוגן הטעינה המדורגת — אח של הרשת, לא תא בה */
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.menu-grid .product-card { min-inline-size: 0; animation: mg-in .35s ease both; }
@keyframes mg-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu-grid .product-card { animation: none; } }

/* כרטיס · 2131:3574 (317×554) — בלי צל, בלי פינות מעוגלות; רק התמונה r4 בפינות העליונות */
.menu-grid .product-card {
  background: transparent; border-radius: 0; box-shadow: none; overflow: visible;
}
.menu-grid .product-card:hover { transform: none; box-shadow: none; }
/* תמונה · 2131:3577 — r4 עליון בלבד, ריווח 4px לפאנל (2131:3576 padding-bottom 4).
   המסגרת 317×238 ולא 317×350 של הפיגמה (הכרעת תומר 21.7, אופציה א'): 4:3 = יחס
   צילומי הקטלוג, ולכן אפס חיתוך ואפס שוליים. פס-ההפרדה 4px נשמר. */
/* ── מסגרת ריבועית + עיגון-לתחתית · 4.8.26 ────────────────────────────────────
   הבעיה: צילומי הקטלוג כמעט נטולי אוויר עליון (נדגמו 50 — 6.7% חציון ≈8px,
   אחוזון-10 הוא 0), ולכן התוויות ישבו על המוצר. אין מאיפה "לגנוב" מקום בצילום.
   ההכרעה (שילה): **להאריך את הצילומים עצמם** ב-outpainting (gemini-3.1-flash-image),
   כך שמעל המוצר יש משטח אמיתי ולא סינתזה. הצילום המקורי מודבק חזרה על התחתית
   בשלב הייצור, ולכן המוצר פיקסל-זהה למקור.

   ⚠ **כלל אחד משרת את שני המקרים, וזה כל הרעיון:**
     · צילום שהורחב (ריבועי)  → ‏contain ממלא את המסגרת בדיוק. הפס = צילום אמיתי.
     · צילום שלא הורחב (4:3)  → יושב בתחתית המסגרת ומשאיר 25% פס בצבע שנדגם
       מהצילום (js/media-bg.js). כך גם הצילומים ה"מלאים" מקבלים פס־תוויות בלי
       שאיש נגע בהם — הכרעת שילה 4.8.
   בשני המקרים **גובה-הכרטיס זהה**, והמוצר מוצג באותו גודל בדיוק (contain
   מוגבל-רוחב בשני היחסים) — מה שגדל הוא המסגרת, לא המוצר.
   ⚠ ‎object-position: center bottom‎ הוא מה שמעגן את הצילום שלא הורחב לתחתית;
   בלעדיו contain ממרכז אותו והפס היה נחצה לשניים, חצי מעל וחצי מתחת.
   ⚠ טריק-הריפוד הקודם (‎content-box‎ + ‎padding-block-start‎) הוסר — הוא נדרש
   רק כל עוד הצילום היה 4:3 קשיח. אל תחזיר אותו יחד עם המסגרת הריבועית: השילוב
   ייתן פס כפול. */
.menu-grid .pc-media {
  aspect-ratio: 1 / 1; overflow: hidden;
  border-start-start-radius: var(--radius-img); border-start-end-radius: var(--radius-img);
  border-end-start-radius: 0; border-end-end-radius: 0;
  margin-block-end: 4px; background: var(--bc-cream-warm);
}
.menu-grid .pc-media img { object-position: center bottom; }
.menu-grid .product-card:hover .pc-media img { transform: scale(1.03); }
/* תגית · 2131:3575 (Component 5) — r2, padding 4/10, gap 6, 10px/700; מיקום 16 מהקצה */
/* flex-wrap + nowrap + flex:none (31.7, צילום טליה): בכרטיס מובייל צר שתי תגיות זו-לצד-זו
   נדחסו — "ללא קמח" נשבר לשתי שורות והתגיות יצאו בגדלים שונים מכרטיס לכרטיס. כל תגית
   שומרת על גודלה הטבעי; כשאין רוחב — התגית השנייה יורדת שורה (ערימת-צ'יפים), לא מתכווצת. */
.menu-grid .pc-tags { inset-block-start: 16px; inset-inline-start: 16px; gap: 6px; flex-wrap: wrap; }
/* ⚠ גובה התווית (‏23px = ריפוד 4+4 + שורה 15) הוא הקלט שקובע אם היא נכנסת בפס.
   הפס הוא 25% מרוחב-הכרטיס ונגזר מהמסגרת הריבועית, ולכן הגדלת התווית מעבר
   לרבע-הרוחב תחזיר אותה לשבת על המוצר. במובייל: פס 43px מול תווית 23. */
.menu-grid .pc-tags .tag {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; white-space: nowrap;
  border-radius: var(--radius-hair); padding: 4px 10px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05); /* DROP_SHADOW · 2131:3575 */
}
.menu-grid .pc-tags .tag i,
.pp-tags .tag i { font-size: var(--fs-2xs); line-height: 1; } /* אייקון תג 12px · I2131:3575;426:578 */
/* פאנל מידע · 2131:3579 — בפיגמה 317×200 עם שורת-תיאור (2131:3584).
   היסטוריה: אחרי מעבר התמונה ל-4:3 (הכרעת תומר 21.7) היחס תמונה:פאנל צנח
   ל-54%, ובתגובה להערת מרינה 23.7 ("צריך 2/3–1/3") הפאנל כווץ ל-124
   ו-‎.pc-desc‎ הוסתר ב-display:none. זו הייתה סטייה שמוחקת אלמנט מעוצב,
   והיא תועדה רק כאן ולא ביומן ההחלטות — איש לא אישר אותה.
   הבעלים דיווח 27.7: "לא רואים את התיאור המקוצר של המוצרים". התיאור הוחזר.
   ⚠ המשמעות: יחס התמונה חוזר ל-54% — שאלה פתוחה למרינה, רשומה ב-openGaps.
   התיאור מוגבל לשתי שורות (הפלייסהולדרים בפיגמה הם 1–2 שורות; תיאורי הקטלוג
   האמיתיים ארוכים בהרבה, וללא הגבלה גובה-הכרטיס נעשה תלוי-תוכן).
   ⚠ 30.7 — הרצפה 176px נחשבה חוקית לכל הרוחבים (הצהרה בלתי-מותנית), אבל היא
   מחושבת עבור פאנל-הדסקטופ (שם + תיאור-2-שורות + סייג + שורת-מחיר/כפתור).
   כרטיס-המובייל (≤767, בהמשך הקובץ) מציג שם+מחיר בלבד — אין תיאור ואין כפתור —
   ולכן הרצפה הזו הייתה שטח-מת מתחתיו. הוזזה ל-@media (min-width:768px) כדי
   שתחול בדיוק היכן שנועדה: דסקטופ, טאבלט 768–960, ומסכים רחבים 1600+/2160+/2500+
   (כולם עדיין כרטיס-הדסקטופ, ר' TABLET-BREAKPOINT-768 למטה). מתחת ל-768 היא
   כלל לא מוצהרת — .pc-body הוא flex item עם flex:1 (base.css), ולכן ברירת-המחדל
   min-block-size:auto שלו היא ממילא הגודל-האוטומטי מבוסס-תוכן (לא 0) — הפאנל
   מתכווץ לתוכנו ולא נעלם. ר' גם ההצהרה המפורשת ב-@media(max-width:767px) למטה. */
.menu-grid .pc-body {
  background: var(--bc-cream); padding: 24px; gap: 0;
  justify-content: space-between;
}
/* ⚠ 4.8.26 — הרצפה עלתה 176 → 204, וזה **תיקון-אחידות ולא ניפוח**: הפאנל נדרש
   לגובה 204 כשיש תיאור (ריפוד 48 + שם 56 + אזור-תיאור 64 + שורת-מחיר/כפתור 36),
   ולכן 176 חלה בפועל רק על 64 המוצרים ללא תיאור (15%) — והם היו נמוכים ב-28px
   משכניהם, כלומר שורות-גריד בגבהים שונים. הרצפה החדשה = בדיוק גובה-הפאנל המלא,
   ולכן כל הכרטיסים זהים ושורת-המחיר יושבת על קו אחד בכל הרשת.
   ריפוד-הפיגמה (24) וגובה-השורה (1.4) לא נגעו — ההגדלה של התמונה נעשית במובייל,
   שם היא נדרשה ואינה מתנגשת עם כיול-הפיגמה. */
@media (min-width: 768px) {
  .menu-grid .pc-body { min-block-size: 204px; } /* רצפת-פאנל-הדסקטופ — לא חלה על מובייל */
}
/* 2131:3582 — 20/28, משקל 500.
   ⚠ קלמפ-2 + גובה קבוע (4.8): בלעדיהם שם בן שתי שורות דוחף את התיאור, המחיר והכפתור
   שורה למטה, והמלל של הכרטיס השכן יושב בגובה אחר. נמדד על כל 424 השמות ברוחב-הכרטיס
   בדסקטופ (269px פנימיים, 20px): שורה אחת 354 · שתיים 70 · שלוש **אפס** ⇒ בדסקטופ
   הקלמפ אינו חותך אף שם, הוא רק מקבע את הגובה. במובייל (מטה) הערכים נדרסים. */
.menu-grid .pc-name {
  font-size: var(--fs-20); font-weight: var(--fw-medium); line-height: 1.4;
  color: var(--bc-ink); margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  block-size: calc(var(--fs-20) * 1.4 * 2);
}
.menu-grid .pc-desc { /* 2131:3584 — 14/20, #444444 (רוב 6/9 הכרטיסים; #524345 בשורה 1 = סתירה פנימית בפיגמה) */
  font-size: var(--fs-sm); line-height: 1.43; color: var(--bc-ink-mute);
  margin: 8px 0 16px; /* 2131:3580 gap 8 · padding-bottom 16 */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  /* ⚠ 4.8 — ‎flex:1‎ (base.css) הוחלף בגובה קבוע. ‏flex-grow היה נותן לתיאור לבלוע
     את השטח-הפנוי של הפאנל, ולכן מיקום שורת-המחיר היה תלוי באורך התיאור. שתי שורות
     תמיד — גם לתיאור בן שורה אחת — ולכן הכפתור והמחיר על קו אחד בכל הכרטיסים. */
  flex: none;
  block-size: calc(var(--fs-sm) * 1.43 * 2);
  /* 30.7 — שבירת-שורה שהוקלדה בקטלוג (JS מנרמל \n\n→\n, ר' menu.js normalizeDesc) חייבת
     להיראות כאן כמו בפופאפ (.pp-desc), לא להתקפל לרווח. סטייה מכוונת מהפיגמה (הכרטיס
     נעול שם ללא תיאור רב-שורות) — figma-decisions.json DESC-LINEBREAK-CLAMP. */
  white-space: pre-line;
}
.menu-grid .pc-desc:empty { display: none; }
/* 30.7 סבב-2 — קלמפ-3 גלובלי (הגרסה הקודמת) נפסל בביקורת: על bc_57eec0ce9f ("פילה סלמון
   חם עם טריאקי") 69 התווים שלפני ה-Enter תפסו לבדם את שלוש השורות, ו"ללא קמח" נעלם — כל
   קלמפ קבוע נכשל כי אורך-החלק-הראשון משתנה בין מוצרים. הפתרון: menu.js (splitDesc) מפצל
   את התיאור המנורמל לשני אלמנטים — .pc-desc (החלק שלפני ה-Enter האחרון, קלמפ-2 כרגיל,
   ללא שינוי בכלל ל-415 הכרטיסים ללא שבירה) ו-.pc-desc-note כאן (שורת-הסייג התזונתית
   שאחריו — "ללא קמח"/"טבעוני"/וכו') שמוצגת תמיד במלואה, בלי קלמפ. גובה-הכרטיס חוזר
   דטרמיניסטי: 2 שורות main + שורת-סייג אחת, בלי תלות באורך. margin-block-start שלילי
   מצמצם את margin-block-end:16px הקבוע של .pc-desc מעליו למרווח קטן בין התיאור לסייג
   (דרישת עיצוב: אותו טקסט-תיאור, לא באדג', לכל היותר מרווח קטן) — margin-block-end:16px
   כאן שומר על אותו מרחק לכפתור שהיה קודם בין .pc-desc לפוטר. */
.menu-grid .pc-desc-note {
  font-size: var(--fs-sm); line-height: 1.43; color: var(--bc-ink-mute);
  margin-block: 0 16px;
  /* שורה אחת קבועה — ר' ההערה על .pc-desc-split מטה */
  block-size: calc(var(--fs-sm) * 1.43);
  overflow: hidden;
}
.menu-grid .pc-desc-note:empty { display: none; }
/* אזור-התיאור הוא **שתי שורות, תמיד** — גם כשיש שורת-סייג. בלי זה 3 המוצרים שיש
   להם סייג (נמדד על 424: בדיוק 3) היו גבוהים ב-20px מכל השאר ושוברים את האחידות.
   ‏menu.js מוסיף את המחלקה כשהוא מפצל תיאור לסייג (splitDesc), ואז: תיאור שורה
   אחת + סייג שורה אחת = אותן שתי שורות. */
.menu-grid .pc-desc.pc-desc-split {
  -webkit-line-clamp: 1; line-clamp: 1;
  block-size: calc(var(--fs-sm) * 1.43);
  margin-block-end: 0;
}
/* המחיר והכפתור בשורה אחת · 2131:3586 + 2131:3588 (אותו y ב-HORIZONTAL).
   ⚠ הכשל שתוקן (הבעלים, 27.7): "אנטריקוט שלם" ו"רוסטביף שלם" הם שני המוצרים
   היחידים בקטלוג (מתוך 400) שמחירם ארבע-ספרתי ולכן נושא פסיק-אלפים —
   "₪806 - ₪1,215" ברוחב 122px. הכרטיס 314 פחות ריפוד 48 = 266 פנויים,
   והכפתור תפס 144 ⇒ בדיוק 266, והמחיר נשבר לשתי שורות. העיצוב אומת מול
   הפלייסהולדר של הפיגמה ("₪122 - ₪336") ולא מול קיצון-התוכן האמיתי.
   המחיר ננעל לשורה אחת; הכפתור הוא זה שמתכווץ (הריפוד יורד עד 14px),
   ובתרחיש הגרוע ביותר: 122 + 96 (תווית) + 28 = 246 < 266. */
.menu-grid .pc-foot { margin-block-start: 0; align-items: center; column-gap: 8px; }
.menu-grid .pc-price {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.556; color: var(--bc-ink); /* 2131:3588 — 18/28 */
  white-space: nowrap; flex: none;
}
.menu-grid .pc-foot .btn { /* 2131:3586 — 145×36, r54, padding 12/24, 16/20 */
  border-radius: var(--radius-hero); padding-block: 8px; min-block-size: 36px;
  padding-inline: clamp(14px, 1.7vw, 24px);
  font-size: var(--fs-md); font-weight: var(--fw-regular); line-height: 1.25;
  white-space: nowrap; flex: 0 1 auto; min-inline-size: 0;
}

.menu-empty {
  text-align: center; color: var(--bc-ink-soft); font-size: var(--fs-lg);
  background: var(--bc-cream-warm); border-radius: var(--radius-card);
  padding-block: 4rem; padding-inline: 1.5rem;
}

/* ── רצועת אלרגנים · 2137:3176 — 984×46, r6, רקע #f4f3f1, padding 8/16, gap 10,
      צמודה לתחילת-השורה; מרווח 24 מהשורה האחרונה (2131:3572 gap 24).
      בפיגמה אין כפתור סגירה ואין "הבנתי" → הרצועה קבועה. ── */
.allergy-strip {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  min-block-size: 46px; margin-block-start: 24px;
  padding: 8px 16px; border-radius: var(--radius-btn);
  background: var(--menu-strip-bg);
}
.allergy-strip i { font-size: var(--fs-md); line-height: 1; color: var(--bc-ink); flex: none; } /* 2149:3474 — 16px */
.allergy-strip p {
  margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.83; /* 2137:3177 — 16/29.3 */
  color: var(--bc-ink);
}

/* ── מודאל אלרגנים · דסקטופ 2137:2835/2836 · מובייל 2137:3000 ──
   z-index 120 — מעל ההדר הדביק (50), התפריט הנייד (90) ופופאפ המוצר (100) */
.al-layer {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(26, 28, 27, .6); /* 2137:2835 fill #1a1c1b a.60 */
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* BACKGROUND_BLUR r4 · 2137:2835 */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 170px 32px 32px; /* 2137:2835 padding 170/32/32/32 */
  overflow: auto; overscroll-behavior: contain;
}
.al-layer[hidden] { display: none; }
.al-box { /* 2137:2836 — 474×336, r16; Frame 42 (2137:2837) ממלא את המשטח כולו בלבן */
  inline-size: 474px; max-inline-size: 100%;
  background: var(--bc-white); border-radius: var(--radius-lg);
  box-shadow: var(--menu-modal-shadow); overflow: hidden; text-align: center;
}
.al-head { /* 2137:2838 — 474×72 = pad-top 24 + כפתור 30 + 18; ה-X בצד שמאל (סוף-השורה ב-RTL) */
  display: flex; justify-content: flex-end; align-items: center;
  min-block-size: 72px; padding: 24px 24px 18px; background: var(--bc-white);
}
.al-close { /* 2137:2839 — הריבוע בפיגמה 30×30; הכפתור הוגדל ל-44 והמרג'ין השלילי
     מחזיר לו את תפיסת-המקום של 30 — כך גובה הכותרת (72) לא זז. */
  inline-size: var(--bc-close-size); block-size: var(--bc-close-size);
  margin: calc((30px - var(--bc-close-size)) / 2);
  display: grid; place-items: center;
  border-radius: var(--radius-card); color: var(--bc-ink);
  transition: background .18s ease;
}
.al-close:hover { background: rgba(59, 15, 26, .08); }
.al-close svg { inline-size: var(--bc-close-icon); block-size: var(--bc-close-icon); }
.al-body { padding: 16px 32px 32px; background: var(--bc-white); } /* 2137:2842 padding 16/32 · 2137:2837 padding-bottom 32 */
.al-title { /* 2137:2847 — 32/40, משקל 400, בורדו */
  font-size: var(--menu-fs-32); font-weight: var(--fw-regular); line-height: 1.25;
  color: var(--bc-primary); margin: 0;
}
.al-text { /* 2137:2848 — 16/23.5, #444444 */
  font-size: var(--fs-md); line-height: 1.47; color: var(--bc-ink-mute);
  margin: 8px 0 0; /* 2137:2845 gap 8 */
}
.al-actions { margin-block-start: 48px; } /* 2137:2842 gap 48 */
.al-ok { /* I2137:2876 — 154×48, r54, בורדו, 18/20 לבן */
  min-inline-size: 154px; min-block-size: 48px; padding: 12px 32px;
  border-radius: var(--radius-hero); background: var(--bc-primary); color: var(--bc-white);
  font-size: var(--fs-lg); font-weight: var(--fw-regular); line-height: 1.25;
  transition: background .2s ease;
}
.al-ok:hover { background: var(--bc-primary-deep); }
.al-ok:focus-visible, .al-close:focus-visible { outline: 2px solid var(--bc-primary); outline-offset: 3px; }
/* "אל תציג יותר" (4.8.26) — תיבה שקטה מתחת לכפתור; משתיקה את המודאל לסשן בלבד */
.al-optout {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-block-start: 16px; cursor: pointer;
  font-size: var(--fs-sm); color: var(--bc-ink-mute);
}
.al-optout input { accent-color: var(--bc-primary); inline-size: 16px; block-size: 16px; margin: 0; cursor: pointer; }
.al-optout input:focus-visible { outline: 2px solid var(--bc-primary); outline-offset: 2px; }
.al-note { /* 2137:2879 — 12/16, #444444, מרווח 32 מהכפתור */
  font-size: var(--fs-2xs); line-height: 1.33; color: var(--bc-ink-mute);
  margin: 24px 0 0;
}

/* ── פופאפ מוצר · Item_preview_1 656:6714/6715 (מודאל 1152×800 על overlay) ── */
.pp-layer {
  position: fixed; inset: 0; z-index: 100; background: rgba(26, 28, 27, .6); /* #1a1c1b99 · 656:6714 */
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; overflow: auto; padding: 32px;
}
.pp-layer[hidden] { display: none; }
.pp-box { /* 656:6715 — 1152×800, r16, #faf9f7; תקרת vh נשמרת למסכים נמוכים (הפריים גבוה 1126) */
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  inline-size: min(1152px, 94vw); block-size: min(800px, 88vh);
  background: var(--bc-paper); border-radius: var(--radius-lg);
  box-shadow: var(--menu-modal-shadow); overflow: hidden;
}
.pp-media { position: relative; background: var(--bc-cream-warm); }
/* עד 28.7 היה כאן contain (הכרעת-תומר 21.7, content-type — אותה הכרעה כמו הכרטיס).
   29.7 — הכרעת שילה במפורש: בפופאפ (לחיצה על מוצר) התמונה תמלא את הפריים כמו
   בפיגמה, גם במחיר חיתוך צדדי של צילומי 4:3 בתוך פאנל פורטרטי 576×800.
   ⚠ בכוונה **לא** לגעת בכרטיס (.pc-media) — שם contain/4:3 נשאר כפי שהוכרע (לא
   בביקורת-קונפורמנס, ר' blackcherry_product_card_image_frame): הבקשה הייתה
   מפורשת רק לתמונה שנפתחת בלחיצה, לא לתפריט הנגלל. */
.pp-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pp-tags { position: absolute; inset-block-start: 24px; inset-inline-start: 24px; display: flex; gap: 8px; flex-wrap: wrap; } /* padding 24, gap 8 · 658:9775 */

/* ── דפדוף בין תמונות המוצר · 4.8.26 (בקשת שילה) ──────────────────────────────
   ⚠ סטייה מהפיגמה: ‏Item_preview_1 (656:6715) מחזיק תמונה אחת. הקטלוג לא —
   נמדד 4.8: **150 מתוך 424 המוצרים הציבוריים (35%) מחזיקים יותר מתמונה אחת**,
   עד 9, והן זוויות/הגשות שונות של אותו מוצר ולא כפילויות. עד היום כל התמונות
   שאינן הראשית היו בלתי-נגישות ללקוח לחלוטין.
   ⚠ כל אלמנט כאן חייב כלל ‎[hidden]‎ מפורש: ‏display מהמחלקה גובר על אטריביוט
   hidden, ובלעדיו החצים והנקודות היו גלויים גם למוצר עם תמונה אחת
   (memory: feedback_hidden_attr_loses_to_class_display). */
.pp-gnav {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 44px; block-size: 44px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--bc-ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: background .18s ease;
}
.pp-gnav[hidden] { display: none; }
.pp-gnav:hover { background: var(--bc-white); }
.pp-gnav:focus-visible { outline: 2px solid var(--bc-primary); outline-offset: 2px; }
.pp-gnav svg { inline-size: 20px; block-size: 20px; }
/* ‏RTL: הקודם בצד-ההתחלה (ימין), הבא בצד-הסיום (שמאל) — כמו סדר הקריאה */
.pp-gprev { inset-inline-start: 12px; }
.pp-gnext { inset-inline-end: 12px; }

.pp-gdots {
  position: absolute; inset-block-end: 16px; inset-inline: 0; z-index: 2;
  display: flex; justify-content: center; gap: 2px;
  /* צילומי הקטלוג מצולמים על רקע לבן-חם, ולכן נקודה לבנה-למחצה נבלעת בהם (נמדד
     בתצוגה-מקדימה 4.8). ‏drop-shadow על המכולה מקיף את הנקודות עצמן — לא ריבוע —
     ולכן הן נקראות גם על צילום בהיר וגם על כהה, בלי רצועת-רקע שחוצה את התמונה. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}
.pp-gdots[hidden] { display: none; }
/* יעד-המגע 24px והנקודה הנראית 8px: ‏background-clip מצייר רק בתיבת-התוכן,
   ולכן אין צורך באלמנט-פסאודו ואין נקודה בגודל 8px שאי-אפשר לפגוע בה באצבע. */
.pp-gdot {
  inline-size: 24px; block-size: 24px; padding: 8px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .55); background-clip: content-box;
  box-shadow: none; transition: background .18s ease;
}
.pp-gdot.active { background: var(--bc-white); }
.pp-gdot:hover { background: rgba(255, 255, 255, .85); }
.pp-gdot:focus-visible { outline: 2px solid var(--bc-white); outline-offset: -2px; }
.pp-tags .tag { display: inline-flex; align-items: center; gap: .3em; flex: none; white-space: nowrap; } /* אחידות-גודל — כמו בכרטיס (31.7) */
.pp-body { position: relative; display: flex; flex-direction: column; padding: 2.2rem 2.6rem 1.6rem; min-block-size: 0; }
.pp-close { /* 658:9564 — מרכז האייקון 36 מהפינה; האופסט = 36 פחות חצי מגודל הכפתור */
  position: absolute;
  inset-block-start: calc(36px - var(--bc-close-size) / 2);
  inset-inline-end: calc(36px - var(--bc-close-size) / 2);
  inline-size: var(--bc-close-size); block-size: var(--bc-close-size);
  color: #464747; /* 658:9565 */
}
.pp-close svg { inline-size: var(--bc-close-icon); block-size: var(--bc-close-icon); }
/* מירכוז אנכי · פיגמה 2127:2137 "Frame 239" — בלוק-התוכן (כותרת/תיאור/מחיר/צ'יפים)
   יושב 158.69px מתחת לראש העמודה, כלומר **ממורכז** בשטח הפנוי, לא צמוד לראש.
   עד 26.7 התוכן היה צמוד לראש ("הכותרות עולות למעלה" — דיווח שילה): במוצר בלי
   גודל/טעם נפער חלל ריק ענק מתחת לכותרת.
   ‏`margin-block: auto` על העוטף ולא `justify-content: center` על המכולה: כשהתוכן
   גבוה מהחלל, מירכוז-פלקס חותך את ראשו ואי אפשר לגלול אליו — ‏auto-margins
   מתמרכזים כשיש מקום ומתאפסים כשאין. */
.pp-scroll { flex: 1; overflow-y: auto; min-block-size: 0; padding-block-start: 1.4rem; scrollbar-width: thin; display: flex; flex-direction: column; }
.pp-scroll > .pp-center { margin-block: auto; inline-size: 100%; }
.pp-name { /* 656:6735 — Heebo 400 60/60; רצפת ה-clamp = ערך המובייל 24 (658:10509) */
  font-size: clamp(1.5rem, 4.2vw, var(--fs-60)); font-weight: var(--fw-regular); line-height: 1;
  color: var(--bc-primary); margin-block-end: 24px; /* כותרת→תיאור 24 · 656:6731 */
}
/* white-space:pre-line (29.7, בקשת טליה): ppDesc.textContent שומר על ה-\n שהוקלד
   בעורך הקטלוג (textarea גולמי) — בלי זה HTML קורס כל ירידת-שורה לרווח יחיד. */
.pp-desc { color: var(--bc-ink-mute); line-height: 1.47; margin-block-end: 16px; white-space: pre-line; } /* 16/23.5 #444444 · 658:9735; תיאור→מחיר 16 */
.pp-price { /* 656:9278 — כל השורה "₪X | יחידה" Heebo 700 30/36; padding-block 16 + קו תחתון */
  font-size: 1.875rem; font-weight: var(--fw-bold); line-height: 1.2;
  color: var(--bc-primary); padding-block: 16px; margin-block: 0;
}
.pp-hr { border: 0; border-block-start: 1px solid var(--menu-rose-line); margin-block: 0 24px; } /* #ead7da · 853:1978 */
.pp-group { margin-block-end: 24px; } /* בין סקציות 24 · 656:6731 */
.pp-label { font-weight: 600; margin-block-end: 16px; } /* תווית→צ'יפים 16 · 656:6743 */
.pp-chips { display: flex; flex-wrap: wrap; gap: 16px; } /* 656:6745 */
.pp-chip { /* Selection_chip 656:6748 — h36 (20 שורה + 8+8), r4, pad-inline 24, טקסט 16/20 #47393b */
  padding: 8px 24px; border-radius: var(--radius-img);
  border: 1px solid var(--bc-ink-soft); background: var(--bc-white); color: var(--bc-ink-soft);
  font-size: var(--fs-md); line-height: 1.25; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.pp-chip:hover { border-color: var(--bc-primary); }
.pp-chip.active { /* 658:9938 — רקע #ead7da, טקסט #1a1a1a (כלל-הרוב), משקל נשאר 400 */
  background: var(--menu-rose-line); border-color: transparent;
  color: var(--bc-ink); font-weight: var(--fw-regular);
}
.pp-foot { padding-block-start: 0; } /* הקו העליון (pp-hr) יושב על גבול הפוטר · 656:9178 */
.pp-actions { display: flex; align-items: center; gap: 32px; } /* 656:9181 */
.qty-stepper { /* 656:9212 — r2, #f4f3f1, מסגרת #d6c2c4 @0.20, גובה 48 */
  display: inline-flex; align-items: center;
  border-radius: var(--radius-hair);
  background: var(--menu-strip-bg); border: 1px solid rgba(214, 194, 196, .2);
  block-size: 48px;
  direction: ltr; /* כמו בעיצוב: מינוס משמאל, פלוס מימין */
}
.qty-btn {
  inline-size: 46px; block-size: 100%; display: grid; place-items: center;
  font-size: 1.25rem; color: var(--bc-ink); border-radius: var(--radius-hair);
}
.qty-btn:hover { background: rgba(59,15,26,.06); }
.qty-btn[aria-disabled="true"] { opacity: .4; background: transparent; cursor: default; } /* מינוס מעומעם בכמות=1 · 656:9215 */
.qty-val { min-inline-size: 2.2ch; text-align: center; font-weight: 600; font-size: var(--fs-lg); } /* Heebo 600 18 · 656:9217 */
.pp-add { /* 656:9182 — h48, r54 (pill), Heebo 400 18 */
  flex: 1; border-radius: var(--radius-hero); block-size: 48px;
  font-size: var(--fs-lg); font-weight: var(--fw-regular);
}

/* ── ביניים: 961–1200 — גריד 2 עמודות, סיידבר צר יותר ── */
@media (min-width: 961px) and (max-width: 1200px) {
  .menu-layout { grid-template-columns: 268px minmax(0, 1fr); gap: 24px; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-hero-content { padding-inline: 48px; }
}

/* ── מובייל · M_menu 712:5072 (393 רחב) ── */
@media (max-width: 960px) {
  .menu-hero { block-size: 300px; } /* 712:5113 — 393×300 */
  .menu-hero-content { padding-inline: 24px; }
  /* 652:1820 — ‏48 / lineHeightPx 90 (=1.875, כמו store 712:3041); בלי זה תת-הכותרת
     טיפסה 14px והכותרת צנחה 16px מול הפיגמה (נמדד 29.7). ‏48 · 712:5116 (סתירת 48/60 — נבחר 48). */
  .menu-hero-content h1 { font-size: 3rem; line-height: 1.875; }
  .menu-hero-content p { line-height: 1.25; } /* 18/22.5 · 712:5117 */

  /* ההדר במובייל 64px (chrome.css:175) ולא 103 */
  .menu-shell { --menu-bar-top: 64px; }
  .menu-toggle-wrap { margin-block-start: 32px; padding-block: 8px; margin-block-end: -8px; } /* 712:5073 gap 32 */
  .menu-toggle { inline-size: 100%; } /* 712:5119 — 361×52 בתוך 393 (padding 16) */
  .menu-toggle-btn { font-size: var(--fs-md); } /* gap 8 כמו בדסקטופ · I712:5119;273:1169 */

  /* 712:5073 Frame 115 — gap 32 בין בלוק-הקטגוריות (Frame 126) לבלוק-הכרטיסים
     (Frame 119). היה 16 → השורה הנגללת נצמדה לגריד. */
  .menu-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-block-start: 24px; }
  /* תיקון 29.7 (דיווח שילה — הצ'יפים נעלמו בגלילה): הנעיצה הייתה על .cat-nav עצמה,
     שהיא היחידה בתוך .menu-side. sticky זז רק בתוך גבולות ה-containing block שלו —
     וכש-.menu-side (עם position:static) שווה בגובהו בדיוק לגובה .cat-nav, אין ל-sticky
     "מסלול" בכלל: הרגע שבו הוא אמור להיצמד הוא גם הרגע שבו קצה ההורה מגיע, ולכן
     האלמנט ממשיך לזוז 1:1 עם הגלילה במקום להיעצר ב-132px (אומת ב-Playwright: top
     עבר מ-181 ל-21 בין scrollY=300 ל-460, בלי לעצור אף פעם ב-132 — "0px stick range").
     הפתרון: הנעיצה עוברת להורה (.menu-side), שה-containing block שלו הוא .menu-layout
     כולו (כולל גריד המוצרים) — שם יש מסלול ממשי להיצמד לאורכו. .cat-nav חוזרת לזרימה
     רגילה בתוך ה-.menu-side הנעוץ. */
  .menu-side { --cat-top: 132px; min-inline-size: 0; z-index: 19; }

  /* סיידבר → שורת קטגוריות אופקית נגללת (712:5120).
     ⚠ סטייה מהפיגמה — הכרעת שילה 28.7, רשומה ב-figma-decisions כ-CATNAV-CONTAINED.
     בפיגמה השורה יוצאת לרוחב-הפריים המלא. הבנייה מימשה זאת ב-‎margin-inline‎ שלילי,
     והתוצאה הייתה באג-צביעה: הפס הנעוץ מעליה (‎.menu-toggle-wrap‎) הוא ברוחב-הקונטיינר,
     ולכן שתי רצועות-הגאטר שלו נשארו שקופות והקטגוריות של השורה הזאת נראו מבעדן
     בזמן גלילה — 16px במובייל, 48px בטאבלט (דיווח תומר 27.7: "טקסט חתוך בקצה המסך").
     שילה בחר לכלוא את השורה בקונטיינר במקום להרחיב את הפס.
     קו-השיער (712:5447) נשמר, ומשתרע עכשיו ברוחב-התוכן ולא ברוחב-המסך. */
  /* נעיצה עם הטוגל (29.7, בקשת טליה — פותר CATNAV-PIN): שורת-הקטגוריות מצטרפת
     לפס הנעוץ במקום להיגלל החוצה, כמו ב-Frame 126 בפיגמה. ‏132px = אותו מיקום
     שבו נעצה שורת-הצ'יפים התזונתיים שהוסרה (64 הדר + 8+52+8 הטוגל עם ריפודו) —
     ‏המחיר שהטריד את ההכרעה הקודמת (170px≈20% מהמסך) ירד ל-114px כי הצ'יפים כבר לא שם.
     ה-sticky עצמו עבר ל-.menu-side (למעלה) — .cat-nav נשארת במיקום רגיל בזרימה. */
  .cat-nav {
    display: flex; flex-wrap: nowrap; scrollbar-width: none;
    gap: 32px; background: var(--bc-white); border: 0; border-radius: 0;
    border-block-end: 1px solid rgba(214, 194, 196, .2); /* קו-שיער לשורה · 712:5447 */
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    margin-inline: 0;
    padding: 16px 0;
    /* ביטול מפורש של הגלילה-האנכית מהדסקטופ: כאן הרשימה היא שורת-צ'יפים אופקית
       (712:5120) ואין לה גובה מרבי. שורת overflow אחת ומלאה — לא overflow-x לבדו,
       שהיה משאיר את ה-y:auto של הדסקטופ ומצייר פס-גלילה אנכי מיותר. */
    overflow: auto hidden;
    max-block-size: none;
    overscroll-behavior: auto;
  }
  .cat-nav::-webkit-scrollbar { display: none; }
  /* במובייל (712:5121) אין אקורדיון — הקטגוריות מוצגות שטוחות בשורת צ'יפים אחת,
     והפאנל נפרש תמיד (גם אם קופל קודם בדסקטופ ואז המסך הוקטן).
     ⚠ 30.7 — עד היום `.cat-nav .cat-group { display:none }` הסתיר את כותרות-הקבוצה
     במובייל לגמרי, ולכן "סלטים"/"קינוחים" פשוט לא היו קיימות בשורת הצ'יפים.
     מהרגע שהכותרת היא יעד-בחירה ("כל הסלטים") היא **חייבת** להופיע כצ'יפ, אחרת
     המובייל מאבד את הפיצ'ר. הכלל הוסר, והכותרת עוברת דרך מסלול ה-.cat-row מטה. */
  .cat-nav .cat-group-wrap { display: contents; }
  /* כותרת-קבוצה במובייל: השורה מתפרקת, השברון נעלם, והכותרת נשארת צ'יפ ככל
     האחרות — כך "תוספות" נבחרת בשורה השטוחה ולא נבלעת עם האקורדיון. */
  .cat-nav .cat-row { display: contents; }
  .cat-nav .cat-chev-btn { display: none; }
  .cat-nav .cat-row.active { background: none; }
  /* החזרת הקו-התחתון שדריסת-הדסקטופ (.cat-row .cat-btn { border-block-end: 0 })
     ביטלה — בלעדיו כותרת-הקבוצה היתה הצ'יפ היחיד בשורה בלי חיווי-פעיל. */
  .cat-nav .cat-row .cat-btn {
    flex: 0 0 auto; padding-inline-end: 0;
    border-block-end: 2px solid transparent;
  }
  .cat-nav .cat-row .cat-btn.active { border-block-end-color: var(--bc-primary); }
  /* ⚠ 6.8.26 (הערת טליה): במובייל מוצגות **כותרות-הקבוצה בלבד**, בלי הבנות.
     נמדד חי לפני השינוי: 32 צ'יפים בטאב חלבי, 19 מהם תת-קטגוריות, ורוחב-גלילה
     של 3,212px על מסך 361 — כמעט תשעה מסכים. "סלטים" לבדה תפסה 5 צ'יפים
     (הכותרת + 4 בנות), וזה מה שנראה כמו "כמה אפשרויות של סלטים".
     הכותרת היא יעד-בחירה מלא (‏group= בשרת ⇒ האב וכל בנותיו), ולכן אף מוצר
     אינו נעלם — מה שאובד הוא סינון לתת-קטגוריה בודדת בטלפון. מכוון.
     ⚠ אסור להיפוך: עד 30.7 היה כאן `.cat-group { display:none }` שהסתיר את
     ה**כותרות** והשאיר את הבנות, ואז "סלטים" ו"קינוחים" לא היו קיימות במובייל
     כלל. מי שנוגע כאן — לוודא שהנסתר הוא `.cat-sub` ולא `.cat-group-self`. */
  .cat-nav .cat-sub,
  .cat-nav .cat-sub[hidden] { display: none; }
  /* חריג יחיד: אם תת-קטגוריה היא הבחירה הפעילה (קישור-עומק, או מסך שהוקטן
     אחרי בחירה בדסקטופ) — היא כן מוצגת, אחרת המסך מסונן ואין שום צ'יפ מסומן
     שמסביר למה. שיפור-מתקדם: דפדפן בלי ‎:has()‎ פשוט חוזר להתנהגות שמעליו. */
  .cat-nav .cat-sub:has(.cat-btn.active) { display: contents; }
  .cat-nav .cat-sub:has(.cat-btn.active) .cat-btn:not(.active) { display: none; }
  /* פריט בלי padding פנימי — gap 32 בין הטקסטים · 712:5449-5457 */
  .cat-btn {
    inline-size: auto; flex: 0 0 auto; min-block-size: 30px;
    padding: 0; border-block-end: 2px solid transparent; border-radius: 0;
    justify-content: center; white-space: nowrap;
    font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--bc-ink);
  }
  /* נירמול מלא של תת-קטגוריות לשורה השטוחה — בלי זה כללי-הדסקטופ (ספציפיות 0,2,0)
     משאירים להן 45px/padding-block 12/צבע-משני, והקו-התחתון הפעיל יושב בגובה שונה */
  .cat-sub .cat-btn {
    padding: 0; min-block-size: 30px; font-size: var(--fs-md); line-height: 1.5;
    color: var(--bc-ink); border-block-end-color: transparent;
  }
  .cat-btn:hover { background: transparent; }
  /* פעיל = קו תחתון 2px + משקל 700 · 712:5457/5458, עקבי ב-4 פריימים (712:5399, 656:9007,
     658:10445, 652:2031); ההפניה הישנה ל-2137:2943 (מסגרת-box) היא פריים חריג מחוץ ליחידה */
  .cat-btn.active {
    background: transparent; color: var(--bc-primary);
    font-weight: var(--fw-bold); border-block-end-color: var(--bc-primary);
  }
  .cat-btn .cat-chev { display: none; }

  /* כרטיסים · 712:5134 — 2 עמודות, gap 16. הכרטיס עצמו מוגדר לפי הטווח:
     ≤767 = כרטיס-הטלפון (712:5134) · 768–960 = כרטיס-הדסקטופ בשתי עמודות. */
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .menu-grid .product-card { cursor: pointer; }

  .allergy-strip { align-items: flex-start; margin-block-start: 16px; } /* מרווח 16 מהשורה האחרונה · 652:1903 gap 16 */
  .allergy-strip i { margin-block-start: 4px; }
  .allergy-strip p { line-height: 1.375; } /* 16/22 · 2137:3183 */

  /* מודאל אלרגנים · 2137:3000 — 361×344 r16 לבן, 147 מלמעלה, safe-area */
  .al-layer {
    background: rgba(0, 0, 0, .6); /* 2137:2999 */
    backdrop-filter: none; -webkit-backdrop-filter: none; /* במובייל אין blur · 2137:2999 */
    padding-block-start: 147px;
    padding-block-end: max(24px, env(safe-area-inset-bottom));
    /* ל-env() אין וריאנט לוגי — ב-RTL תחילת-השורה היא הקצה הימני, ולכן המיפוי הפוך בכוונה */
    padding-inline-start: max(16px, env(safe-area-inset-right));
    padding-inline-end: max(16px, env(safe-area-inset-left));
  }
  .al-box { inline-size: 361px; background: var(--bc-white); }
  /* 2137:3001 — שורה 64 = pad-top 16 + כפתור 30 + 18 (מיכל הפיגמה 24, שלנו 30 כיעד-מגע) */
  .al-head { min-block-size: 64px; padding: 16px 16px 18px; background: var(--bc-white); }
  /* במובייל האייקון מגיע מ---bc-close-icon כמו בדסקטופ (2137:3003 מדד 16) */
  .al-body { padding: 16px 32px 24px; } /* 2137:3005 padding 16/32 · 2137:3004 padding-bottom 24 */
  .al-ok { inline-size: 100%; max-inline-size: 267px; } /* 2137:3173 — 267×48 */

  /* פופאפ מוצר → sheet מסך מלא · M_menu_item_scroll 658:10387 */
  .pp-layer { padding: 0; }
  .pp-box {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: min(270px, 38vh) 1fr; /* תמונה 270 · 658:10503; vh-guard למסכים נמוכים */
    inline-size: 100%; block-size: 100dvh; border-radius: 0;
  }
  .pp-body { position: static; padding: 32px 16px 24px; } /* 658:10504 */
  .pp-scroll { padding-block-start: 0; } /* padding-top 32 מגיע מ-.pp-body */
  .pp-close { /* inset 16 יורש מהדסקטופ — תואם 658:10538 (x16) */
    background: var(--bc-white); box-shadow: 0 2px 10px rgba(0,0,0,.18);
  }
  .pp-name { font-size: 1.5rem; font-weight: var(--fw-semibold); line-height: 1.47; } /* Heebo 600 24/35.3 · 658:10509 */
  .pp-price { font-size: var(--fs-lg); line-height: 2; } /* Heebo 700 18/36 · 853:1987 */
  .pp-actions { gap: 24px; } /* Frame 134 gap 24 · 661:26572 */
  .qty-btn { inline-size: 40px; }
}

/* ── טלפון בלבד ≤767 · כרטיס M_menu 712:5134 (173×340) ──
   הכרטיס הזה שייך לפריים המובייל ולא ל"דסקטופ מכווץ": בפיגמה הפאנל מכיל
   שם ומחיר בלבד — אין בו שורת-תיאור ואין כפתור. אומת מחילוץ העץ המלא של
   712:5134 (28.7), והכרעת שילה באותו יום: להשאיר כמו בפיגמה.
   יחס תמונה:פאנל (30.7 — ההכרעה מ-28.7 "נשארים על 50:50" נהפכה; ר' MOBILE-CARD-RATIO
   ב-figma-decisions.json): בקשת מרינה, אליסה והבעלים — התמונה נראתה קטנה מול המלל,
   והפאנל הקבוע (124px) השאיר שטח מת מתחת לשמות קצרים. הפתרון של מרינה: להגדיל את
   *מסגרת* התמונה בלבד ולתת ל-contain (base.css שורה 204) למלא את השוליים העודפים
   ברקע-המסגרת ‎--bc-cream-warm‎ — בלי לחתוך אף צילום ובלי לייצר נכס חדש. מסגרת התמונה
   חוזרת ליחס-הפיגמה 173:220 (מבטלת את 4:3 של תומר 21.7 בסעיף הזה בלבד — הכרעת ה-contain
   עצמה, base.css, לא נגעה). min-block-size על הפאנל הוסר: פאנל עם שם קצר מתכווץ לתוכנו.
   align-items:start על הגריד מנתק את מתיחת-שורת-הגריד (ברירת-המחדל stretch) — בלעדיו שם
   ארוך בשכן-שורה היה ממתח גם כרטיס עם שם קצר לגובהו, בדיוק ההתנהגות שהתבקש לבטל.
   נמדד חי 30.7 על 288 מוצרים אמיתיים (12 כרטיסים לדוגמה — ר' commit): שם בשורה-1
   (117, 41%) → 71.8% תמונה; שורה-2 (135, 47%, הרוב) → 66.7% — הכי קרוב ל-65:35 של
   הפיגמה; שורה-3 (35, 12%) → 62.3%; שורה-4 (1) → 58.4%. ממוצע-משוקלל ≈68%. הפאנל
   לא יכול לרדת מתחת לתוכנו (ריפוד+שם+מחיר) ולכן 65:35 המדויק לא מושג בכל השורות —
   רק בשורה-2, שהיא הנפוצה ביותר. מוצר בלי תמונה (66/288, 23%): המסגרת 210px נשארת
   ריבוע-קרם ריק וגדלה יחד עם האחרות — אין placeholder בכוונה (הבעלים: להשלים תמונות).

   ⚠ 3.8.26 — המסגרת חוזרת ל-4:3 (הכרעת שילה). מה שנמדד ומה שהכריע:
   · 343 מתוך 349 צילומי-הקטלוג הם 4:3. מסגרת 173:220 היא לאורך, ולכן contain צייר
     צילום 171×128 בתוך מסגרת 171×218 — **פס שטוח 45px מעל ומתחת, 41% מגובה המסגרת**.
   · הצילום עצמו לא הוקטן ולא הוגדל: ‏contain מוגבל-רוחב בשני היחסים, ולכן ב-4:3
     הוא מצויר בדיוק באותו גודל (171×128). המסגרת הגדולה הוסיפה שוליים ריקים בלבד —
     ולא הגדילה את הצילום. מה שמשתנה כאן הוא גובה-הכרטיס (‎−90px‎), לא גודל-המוצר.
   · טענת-הסגירה של 30.7 ("התפר נבדק חי ואינו נראה") נשענה על 13 צילומים. מדידה על
     כל 349 (3.8): ‏102 צילומים בהפרש >6 נקודות מצבע-המסגרת, 72 בהפרש >10, ו-17
     שבהם media-bg.js נסוג לברירת-המחדל כי שולי-הצילום אינם אחידים. כלומר התפר כן
     נראה — ברבע מהקטלוג. ר' MOBILE-CARD-RATIO ב-figma-decisions.json.
   · הערת-אוכלוסייה: 351 מוצרים ציבוריים מפנים לתמונה, 349 מהן נטענות. שתיים
     שבורות (המפתח ב-D1 מצביע לאובייקט שאינו ב-R2): "צ'אזה טופו מוקפץ",
     "פסטה ברוטב פורטובלו" — לתיקון בדשבורד, אינו קשור ליחס-המסגרת. */
@media (max-width: 767px) {
  /* ⚠ 4.8.26 — ‎align-items:start‎ (30.7) בוטל. הוא היה **הסיבה** לתלונה "אין גודל אחיד
     לכרטיסים במובייל": הוא מנתק את מתיחת-שורת-הגריד, ולכן גובה כל כרטיס נגזר מתוכנו,
     כלומר ממספר שורות השם. נמדד חי 4.8 על 24 כרטיסים בטאב חלבי: **שלושה גבהים שונים**
     — 210px (3 כרטיסים, שם בשורה אחת) · 233px (19, שתי שורות) · 255px (2, שלוש שורות),
     והמחיר נחת בגובה אחר בכל כרטיס. ‏stretch לבדו לא היה פותר: הוא משווה כרטיסים
     **בתוך שורה** בלבד, ורק בצירוף רצפת-השם הקבועה (מטה) הגובה אחיד בכל הרשת. */
  .menu-grid { align-items: stretch; }
  .menu-grid .product-card { block-size: 100%; }
  /* ⚠ 4.8 סבב-4 — כאן ישבה הצהרת ‎aspect-ratio: 4/3‎ למובייל, והיא **דרסה בשקט**
     את המסגרת הריבועית שנקבעה למעלה: נמדד חי 165×124 במקום 165×165, כלומר
     הצילומים המורחבים הוצגו חתוכים והתוויות חזרו לשבת על המוצר. אותה ספציפיות
     (0,2,0) — הכלל המאוחר יותר במקור מנצח, וזה היה זה.
     המסגרת מוגדרת **במקום אחד בלבד** (‎.menu-grid .pc-media‎ הראשי), ואין כאן
     דריסה פר-רוחב. אל תחזיר הצהרת יחס לבלוק הזה. */
  /* min-block-size:124px הוסר ב-30.7 בלי תחליף — הרצפה הבלתי-מותנית 176px (אז) המשיכה
     לחול על מובייל ונעשתה השטח-המת שהמשימה נועדה לבטל. 30.7 סבב-2: הרצפה 176px
     הוזזה ל-@media(min-width:768px) למעלה, כך שמתחת ל-768 היא כלל לא קיימת בקסקייד.
     ה-min-block-size:auto כאן מפורש בכוונה (ולא רק "העדר-כלל") כרשת-ביטחון: אם הרצפה
     הבלתי-מותנית תחזור אי-פעם, השורה הזו — מאוחרת יותר במקור ובאותה ספציפיות — מנצחת
     ומחזירה auto (גודל-מינימום-אוטומטי מבוסס-תוכן ל-flex item, base.css .pc-body flex:1).
     הריפוד ירד 16→10/12 (4.8): כל פיקסל שיורד מהפאנל הולך לתמונה. */
  .menu-grid .pc-body { padding: 10px 12px 12px; min-block-size: auto; }
  /* ⚠ רצפת-השם היא הלב של "מלל בשורה ישרה" (בקשת שילה 4.8): השם תופס **תמיד** שתי
     שורות — גם כשהוא שורה אחת — ולכן המחיר של כל הכרטיסים יושב באותו גובה, וגובה
     הכרטיס אינו תלוי-תוכן. ‏block-size (ולא min) כדי ששם ארוך ייחתך ולא ימתח.
     נמדד על כל 424 שמות-המוצרים ברוחב-הכרטיס במובייל (141px פנימיים, 16px/500):
     שורה אחת 180 · שתיים 205 · שלוש 37 · ארבע 2 ⇒ 39 שמות (9%) נחתכים ב-"…".
     השם המלא נשאר במלואו בפופאפ, במרחק לחיצה אחת. */
  .menu-grid .pc-name {
    font-size: var(--fs-md); line-height: 1.25; font-weight: var(--fw-medium);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden;
    block-size: calc(var(--fs-md) * 1.25 * 2);
  }
  /* 712:5144 — המחיר במובייל 16/lh28 (בדסקטופ 2131:3588 — 18/lh28).
     ‏lh 1.75→1.3 (4.8): 28px גובה-שורה למחיר בן-שורה-אחת הם 7px אוויר מיותר בכל כרטיס. */
  .menu-grid .pc-price { font-size: var(--fs-md); line-height: 1.3; }
  /* ⚠ 7.8.26 — רצפת-פוטר, מאותה משפחה של רצפת-השם מעל: **גובה הכרטיס אינו
     תלוי-תוכן**. מרגע שהפוטר מחליף בין מצב-0 (מחיר בלבד, 20.8px) למדרגת-הכמות
     (BCStepper, 26px) הוא נהיה דו-מצבי, ובלי רצפה הכרטיס גדל ב-11px ברגע
     ההוספה לסל — וב-‏align-items:stretch גם השכן שלו בשורה גדל איתו (נמדד
     7.8: 258→269.2 לשניהם). ‏26px = בדיוק גובה המדרגה במובייל, והריפוד ירד
     ל-0 כדי שהרצפה לא תוסיף לגובה: הפוטר 26px בשני המצבים במקום 26.8px היום.
     ⚠ מי שמשנה את גובה המדרגה ב-cart.css חייב לשנות כאן, ולהפך. */
  .menu-grid .pc-foot { margin-block-start: auto; padding-block-start: 0; min-block-size: 26px; }
  .menu-grid .pc-desc { display: none; }
  .menu-grid .pc-desc-note { display: none; } /* 30.7 סבב-2 — עקבי עם pc-desc; מובייל ממילא בלי תיאור */
  .menu-grid .pc-foot .btn { display: none; }
  /* 712:5462 — top 11 / right 14. ⚠ 4.8: ההיסטים והריפוד הודקו כדי שהצירוף הרחב
     ביותר בקטלוג ייכנס ל**שורה אחת** ולא ישבור את הפס לשתי שורות.
     נמדד: בקטלוג יש בדיוק שני צירופי-זוג — "טבעוני + ללא קמח" (30 מוצרים)
     ו"חלבי + ללא קמח" (2); שלוש תוויות אינן קיימות. הרחב מביניהם הוא
     70+80+gap6 = 156px מול 151 זמינים ב-393 ⇒ נשבר לשתי שורות, והשנייה נחתה על
     המוצר. אחרי ההידוק (ריפוד-אופקי 10→7, gap 6→4, היסט 14→12): 74+64+4 = 142,
     ונכנס גם בטלפון צר 360 (144 זמינים).
     הפס עצמו הוא 25% מרוחב-הכרטיס (המסגרת ריבועית והצילום 4:3) — 43px ב-393,
     כלומר 8+23 של התוויות ועוד 12 אוויר. */
  .menu-grid .pc-tags { inset-block-start: 8px; inset-inline-start: 12px; gap: 4px; }
  .menu-grid .pc-tags .tag { padding-inline: 7px; }
}

/* ── טאבלט 768–960 · אין לו פריים בפיגמה — הכרעת שילה 28.7 ──
   רשום ב-figma-decisions כ-TABLET-BREAKPOINT-768. הקובץ מחזיק 1440 ו-393 בלבד,
   והטווח ביניהם לא הוכרע מעולם: ‎@media (max-width:960)‎ אחד החיל את מפרט-הטלפון
   על טאבלט שלם, ויצא כרטיס 328 רחב בלי תיאור ובלי כפתור — טלפון מנופח.
   ההכרעה: מ-768 ומעלה הכרטיס הוא כרטיס-הדסקטופ (2131:3574), בשתי עמודות.
   הכרום סביבו נשאר מובייל (שורת-קטגוריות אופקית, פופאפ-sheet) — ב-768 אין
   רוחב לסיידבר 320: 672 תוכן פחות 360 משאירים 312, כלומר כרטיס יחיד.
   הכרטיס בפועל: (672−16)/2 = 328 — קרוב ל-317 של הפיגמה, ולכן כללי-הדסקטופ
   חלים כלשונם בלי דריסת-מידות. */
@media (min-width: 768px) and (max-width: 960px) {
  .menu-grid { gap: 24px 16px; } /* ריווח-הדסקטופ: הכרטיס גבוה יותר ודורש אוויר אנכי */
}

/* מסכים צרים מאוד — שומר על אפס גלילה אופקית */
@media (max-width: 380px) {
  .menu-toggle-btn { font-size: var(--fs-sm); padding-inline: 4px; }
  .menu-toggle-btn i { display: none; }
}

/* ── מסך רחב ≥1600px · 22.7.26 — 4 כרטיסים בשורה ──
   הדריסה המקומית ל-1760 הוסרה 27.7: הערך עבר ל---shell-max ב-tokens.css וכל
   האתר (הדר, תוכן, פוטר) חולק אותו. עד אז עמוד התפריט היה רחב ב-160px מכל
   שאר העמודים — קפיצת-רוחב במעבר בין עמודים, ואחד ממקורות "בעיית המרכוז". */
@media (min-width: 1600px) {
  .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── מסכים רחבים מאוד 2160 / 2500 · הכרעת שילה 28.7 (TABLET-BREAKPOINT-768 · WIDE-TIERS) ──
   נמדד ב-2560: התוכן היה אי של 1760 עם 400px ריקים בכל צד, כי --shell-max נעצר שם.
   הכלל שנשמר מהכרעת 22.7: **רוחב הכרטיס נשאר ~317 של הפיגמה, ומוסיפים עמודות** —
   לא מותחים ארבעה כרטיסים על פני המסך. הנוסחה: גריד = N×316 + (N−1)×16;
   תוכן = גריד + 320 (סיידבר) + 40 (gap); קונטיינר = תוכן + 96 (gutter).
   ‏5 עמודות ⇒ 2100 · 6 עמודות ⇒ 2432. ערכי ה---container עצמם ב-tokens.css,
   כדי שההדר והפוטר ימשיכו להתיישר עם התוכן (הלקח מ-27.7). */
@media (min-width: 2160px) {
  .menu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 2500px) {
  .menu-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}