/* SALSA — Menu Page Styles */

/* MENU SECTION */
.menu-section{padding:52px 20px}
.menu-section-title{font-size:1.5rem;font-weight:900;margin-bottom:28px;padding-bottom:12px;border-bottom:2px solid var(--tan);display:flex;align-items:center;gap:12px}
.menu-section-title span{font-size:1.3rem}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}

/* MENU ITEM CARD */
.menu-card{background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 3px 16px rgba(38,38,38,0.07);border:1px solid var(--border);transition:transform 0.2s ease,box-shadow 0.2s ease;display:flex;flex-direction:column}
.menu-card:hover{transform:translateY(-4px);box-shadow:0 10px 32px rgba(38,38,38,0.12)}
.menu-card-img{width:100%;height:180px;object-fit:cover;background:var(--photo-bg);flex-shrink:0}
.menu-card-body{padding:16px;flex:1;display:flex;flex-direction:column}
.menu-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.menu-card-name{font-size:1rem;font-weight:700;line-height:1.3}
.menu-card-badge{font-size:0.68rem;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap;flex-shrink:0}
.menu-card-badge.green{background:rgba(49,88,47,0.12);color:var(--green)}
.menu-card-badge.red{background:rgba(192,24,46,0.1);color:var(--red)}
.menu-card-desc{font-size:0.82rem;color:var(--gray-text);line-height:1.5;flex:1;margin-bottom:14px}

/* SPICY TOGGLE */

.menu-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.menu-card-price{font-size:1.15rem;font-weight:900;color:var(--red)}
.menu-card-price sup{font-size:0.72rem;font-weight:600;color:var(--gray-text)}
.add-menu-btn{display:flex;align-items:center;gap:6px;background:var(--red);color:var(--white);border-radius:var(--radius-pill);padding:9px 16px;font-size:0.82rem;font-weight:700;transition:all 0.2s ease}
.add-menu-btn:hover{background:var(--red-dark);transform:scale(1.04)}

/* ADDED ANIMATION */
@keyframes addPop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.add-menu-btn.popped{animation:addPop 0.25s ease}

/* BOISSON SUB-SECTIONS */
.subsection-title{font-size:.9rem;font-weight:700;color:var(--gray-text);text-transform:uppercase;letter-spacing:.08em;margin:28px 0 14px;padding-left:8px;border-left:3px solid var(--red)}

/* RESPONSIVE */
@media(max-width:600px){
  .menu-grid{grid-template-columns:1fr}
}

/* Sticky order bar must clear the iOS home indicator */
.menu-sticky-bar{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}

/* ─── SOLD OUT / PLAT DU JOUR ───────────────────────────────────────────────
   A finished dish stays on the page, greyed: a customer who came for it should
   be told it is gone, not left wondering whether the site is broken. */
.menu-card.is-sold-out,.dish-card.is-sold-out{opacity:.62;cursor:default !important}
.menu-card.is-sold-out picture,.dish-card.is-sold-out picture{filter:grayscale(1)}
.menu-card.is-sold-out:hover,.dish-card.is-sold-out:hover{transform:none;box-shadow:0 3px 16px rgba(38,38,38,.07)}
.sold-out-tag{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border-radius:var(--radius-pill,50px);background:var(--gray-bg);color:var(--gray-text);
  font-weight:900;font-size:.82rem;white-space:nowrap}
.menu-card-badge.special,.dish-badge-star{background:var(--red);color:#fff;font-weight:900}
.menu-card-badge.bestseller,.dish-badge-best{background:var(--black);color:var(--tan);font-weight:900}
.menu-card.is-special,.dish-card.is-special{border-color:var(--red);box-shadow:0 6px 24px rgba(192,24,46,.14)}

/* ─── CATEGORY NAV ─── */
.menu-intro{opacity:.88;font-size:.95rem;max-width:560px;margin:10px auto 0;line-height:1.5}
.menu-cats{position:sticky;top:64px;z-index:var(--z-sticky);background:var(--white);display:flex;gap:8px;
  padding:10px 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);
  box-shadow:0 4px 12px rgba(38,38,38,.04);justify-content:safe center}
.menu-cats::-webkit-scrollbar{display:none}
.menu-cat{flex-shrink:0;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:50px;
  border:1.5px solid var(--tan);font-weight:800;font-size:.86rem;background:var(--paper-soft);color:var(--black);
  transition:all .2s ease}
.menu-cat.is-on{background:var(--black);border-color:var(--black);color:#fff}
.menu-section,.subsection-title{scroll-margin-top:130px}
h2.menu-section-title,h3.subsection-title,h3.menu-card-name{margin-top:0}
h3.subsection-title{margin:28px 0 14px}

/* Drinks are simple: two per row on a phone halves the scrolling. */
@media(max-width:600px){
  .menu-section{padding:32px 14px}
  .menu-grid.menu-grid-compact{grid-template-columns:1fr 1fr;gap:12px}
  .menu-grid-compact .menu-card-img{height:112px}
  .menu-grid-compact .menu-card-body{padding:12px}
  .menu-grid-compact .menu-card-name{font-size:.88rem}
  .menu-grid-compact .menu-card-desc{display:none}
  .menu-grid-compact .menu-card-top{margin-bottom:10px;min-height:2.3em}
  .menu-grid-compact .menu-card-footer{flex-direction:column;align-items:stretch;gap:8px}
  .menu-grid-compact .add-menu-btn{justify-content:center;min-height:44px}
  .menu-grid-compact .sold-out-tag{justify-content:center;font-size:.75rem;padding:0 8px}
}

/* ─── STICKY CART BAR ─── */
.menu-sticky-bar{position:sticky;bottom:0;z-index:var(--z-sticky);background:var(--black);padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu-sticky-bar[hidden]{display:none}
.msb-cart{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:.92rem;min-height:48px;flex:1;text-align:left}
.msb-count{background:var(--cream);color:var(--black);min-width:28px;height:28px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-weight:900;font-size:.85rem}
.msb-total{margin-left:auto;color:var(--cream);font-weight:900;white-space:nowrap}
@media(max-width:380px){.msb-label{display:none}}

.menu-card-liked{font-size:.78rem;font-weight:700;color:var(--green);margin-top:6px}

.menu-card-name a:hover{text-decoration:underline}
/* Dish page */
.dish-page{max-width:1000px;padding-bottom:calc(48px + var(--safe-bottom))}
.dish-hero.menu-card{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:0;cursor:default}
.dish-hero.menu-card:hover{transform:none}
.dish-photo{background:var(--photo-bg);aspect-ratio:1/1}
.dish-photo img,.dish-photo .img-placeholder{width:100%;height:100%;object-fit:cover;display:block}
.dish-body{padding:28px}
.dish-body h1{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:900;margin:6px 0 8px}
.dish-body h2{font-size:1rem;font-weight:900;margin:22px 0 8px}
.dish-desc{color:var(--gray-text);line-height:1.6}
.dish-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.dish-buy .menu-card-price{font-size:1.6rem}
.dish-buy .add-menu-btn{padding:13px 22px;font-size:.95rem;min-height:48px}
.dish-options,.dish-facts{list-style:none;display:grid;gap:6px;font-size:.92rem;line-height:1.5}
.dish-facts a{text-decoration:underline}
.dish-related{margin-top:40px}
.dish-related>h2{font-size:1.3rem;font-weight:900;margin-bottom:16px}
.dish-related .menu-card-body{padding:12px}
@media (max-width:760px){.dish-hero.menu-card{grid-template-columns:1fr}.dish-body{padding:20px}}