/* בלק צ'רי — עמוד תפריט מלא (כויל V2 לפיגמה) */

/* ── Hero ── */
.menu-hero { position: relative; min-block-size: clamp(300px, 40vh, 460px); 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: linear-gradient(rgba(26,10,14,.45), rgba(26,10,14,.55)); }
.menu-hero-content { position: relative; text-align: center; color: var(--bc-white); padding-inline: 20px; }
.menu-hero-content h1 { font-size: var(--fs-hero); font-weight: 500; margin-block-end: .3em; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.menu-hero-content p { font-size: var(--fs-lg); margin: 0; opacity: .95; }

/* ── טאבים חלבי/בשרי/קונדיטוריה — גלולות גדולות עם אייקון FA לפני הטקסט (V2) ── */
.menu-tabs-wrap { text-align: center; margin-block-start: 2.2rem; }
.menu-tabs {
  display: inline-flex; gap: 6px;
  background: var(--bc-cream-warm); border-radius: var(--radius-pill); padding: 6px;
}
.menu-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-block-size: 46px; padding-inline: 2em; border-radius: var(--radius-pill);
  color: var(--bc-ink); font-size: 1.0625rem; font-weight: 500;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.menu-tab i { font-size: 1.15rem; line-height: 1; }
.menu-tab:hover { background: rgba(59,15,26,.07); }
.menu-tab.active { background: var(--bc-primary); color: var(--bc-white); }

/* ── פילטרים תזונתיים ── */
.menu-filters { display: flex; gap: 1.6rem; margin-block-start: 1.8rem; }
.diet-check {
  display: inline-flex; align-items: center; gap: .5rem;
  cursor: pointer; color: var(--bc-ink); font-size: var(--fs-sm); user-select: none;
}
.diet-check input {
  appearance: auto; inline-size: 17px; block-size: 17px; margin: 0;
  accent-color: var(--bc-primary); cursor: pointer;
}

/* ── פריסה: סיידבר (ימין ב-RTL) + גריד · ריווח 32 (V2) ── */
.menu-layout {
  display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--gap-cards);
  align-items: start; margin-block-start: 1.2rem; margin-block-end: var(--space-section);
}
.menu-main { min-inline-size: 0; }               /* V2: מונע גלישת גריד במובייל */
.menu-side { position: sticky; inset-block-start: 115px; min-inline-size: 0; } /* 103 הדר + מרווח */

/* כרטיס קטגוריות — תואם לכרטיס הסיידבר בפיגמה (רשימה נקייה) */
.cat-list {
  display: flex; flex-direction: column;
  background: var(--bc-cream-card);
  border: 1px solid rgba(59,15,26,.10); border-radius: var(--radius-card);
  padding-block: .35rem; overflow: hidden;
}
.cat-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  text-align: start; padding: .85em 1.3em;
  color: var(--bc-ink); font-size: var(--fs-md);
  border-block-end: 1px solid rgba(59,15,26,.06);
  transition: background .18s ease, color .18s ease;
}
.cat-btn:last-child { border-block-end: 0; }
.cat-btn:hover { background: rgba(59,15,26,.04); }
.cat-btn.active { color: var(--bc-primary); font-weight: 600; background: rgba(192,132,151,.12); }

/* ── גריד מוצרים — 3 עמודות, ריווח 32 (V2) ── */
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); }
.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; } }
.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;
}

/* ── תגי תזונה עם אייקון FA לפני הטקסט (V2: חלבי/טבעוני) ── */
.pc-tags .tag, .pp-tags .tag { display: inline-flex; align-items: center; gap: .3em; }

/* ── פופאפ מוצר (flex-centering, כמו cert-layer) ── */
.pp-layer {
  position: fixed; inset: 0; z-index: 100; background: rgba(26,10,14,.6);
  display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px;
}
.pp-layer[hidden] { display: none; }
.pp-box {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  inline-size: min(1100px, 94vw); block-size: min(660px, 88vh);
  background: var(--bc-white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop); overflow: hidden;
}
.pp-media { position: relative; background: var(--bc-cream-warm); }
.pp-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pp-tags { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; display: flex; gap: 6px; }
.pp-body { position: relative; display: flex; flex-direction: column; padding: 2.2rem 2.6rem 1.6rem; min-block-size: 0; }
.pp-close {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  color: var(--bc-ink);
}
.pp-scroll { flex: 1; overflow-y: auto; min-block-size: 0; padding-block-start: 1.4rem; scrollbar-width: thin; }
.pp-name { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 500; color: var(--bc-primary); margin-block-end: .5rem; }
.pp-desc { color: var(--bc-ink-soft); margin-block-end: 1.4rem; }
.pp-price { font-size: 1.5rem; font-weight: 600; color: var(--bc-primary); margin-block-end: 1.1rem; }
.pp-price .pp-unit { font-size: 1.05rem; font-weight: 400; color: var(--bc-ink-soft); }
.pp-hr { border: 0; border-block-start: 1px solid rgba(59,15,26,.14); margin-block: 0 1.2rem; }
.pp-group { margin-block-end: 1.4rem; }
.pp-label { font-weight: 600; margin-block-end: .6rem; }
.pp-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.pp-chip {
  padding: .45em 1.1em; border-radius: 8px;
  border: 1px solid rgba(59,15,26,.3); background: var(--bc-white); color: var(--bc-ink);
  font-size: var(--fs-sm); 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 {
  background: rgba(216,167,177,.45); border-color: transparent;
  color: var(--bc-primary); font-weight: 600;
}
.pp-foot { padding-block-start: 1.2rem; }
.pp-actions { display: flex; align-items: center; gap: 1rem; }
.qty-stepper {
  display: inline-flex; align-items: center;
  border-radius: 8px;
  background: rgba(59,15,26,.06); block-size: 50px;
  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: 8px;
}
.qty-btn:hover { background: rgba(59,15,26,.06); }
.qty-val { min-inline-size: 2.2ch; text-align: center; font-weight: 600; }
.pp-add { flex: 1; border-radius: 10px; block-size: 50px; font-size: var(--fs-lg); }

/* ── רספונסיב ── */
@media (max-width: 960px) {
  /* טאבים נגללים */
  .menu-tabs-wrap { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; display: flex; justify-content: safe center; max-inline-size: 100%; }
  .menu-tabs-wrap::-webkit-scrollbar { display: none; }
  .menu-tabs { display: flex; inline-size: max-content; margin-inline: 0; flex: none; }
  .menu-tab { padding-inline: 1.4em; min-block-size: 44px; }

  /* פריסה חד-עמודתית — minmax מונע גלישה מעבר ל-viewport */
  .menu-layout { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .menu-side { position: static; min-inline-size: 0; }

  /* סיידבר → שורת צ'יפים אופקית נגללת (כמו m-menu בפיגמה) */
  .cat-list {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    background: transparent; border: 0; border-radius: 0; padding: 0 2px;
    gap: .2rem;
  }
  .cat-list::-webkit-scrollbar { display: none; }
  .cat-btn {
    border-block-end: 2px solid transparent;
    padding: .55em .9em; white-space: nowrap; font-size: var(--fs-md);
    flex: 0 0 auto; justify-content: center;
  }
  .cat-btn:hover { background: transparent; }
  .cat-btn.active { background: transparent; color: var(--bc-primary); font-weight: 600; border-block-end-color: var(--bc-primary); }

  /* כרטיסים במובייל — שם + מחיר, בלי תיאור וכפתור; הקלקה על הכרטיס פותחת פופאפ */
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .menu-grid .pc-desc { display: none; }
  .menu-grid .pc-foot .btn { display: none; }
  .menu-grid .product-card { cursor: pointer; }

  /* פופאפ → sheet מסך מלא */
  .pp-layer { padding: 0; }
  .pp-box {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: 38vh 1fr;
    inline-size: 100%; block-size: 100dvh; border-radius: 0;
  }
  .pp-body { position: static; padding: 1.4rem 1.2rem 1rem; }
  .pp-scroll { padding-block-start: .6rem; }
  .pp-close {
    inset-block-start: 14px; /* מעוגן לראש ה-sheet (pp-box) */
    background: var(--bc-white); box-shadow: 0 2px 10px rgba(0,0,0,.18);
  }
  .pp-actions { gap: .7rem; }
  .qty-btn { inline-size: 40px; }
}
@media (min-width: 961px) and (max-width: 1120px) {
  .menu-layout { grid-template-columns: 250px minmax(0, 1fr); }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}