/* SALSA — Base Styles (all pages) */
/* @font-face lives in base.html so its URL is generated by url_for() and
   matches the <link rel=preload> exactly. A relative url() here produced a
   second, unversioned URL: the font was downloaded twice and the preload was
   wasted. */

/* ─── LAYER SCALE ───────────────────────────────────────────────────────────
   Everything fixed on screen draws from this one ladder. Before, the upsell
   toast (1999) and install banner (2000) sat ABOVE the cart drawer (1200) and
   the modals (1300/1400), so a drink suggestion could cover an open dialog. */
:root {
  --z-sticky:   200;
  --z-nav:      900;
  --z-overlay: 1100;
  --z-drawer:  1200;
  --z-modal:   1400;
  --z-hud:     1600;   /* transient: install banner, upsell nudge, toasts */
  --z-blocking:9000;   /* modal dialogs that demand an answer */

  /* Height the bottom HUD currently occupies, so nothing hides behind it. */
  --hud-offset: 0px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* The room and the appetite.
   Charcoal, paper and tan are the printed menu: they make the site feel like
   the shop. Red is kept for everything that should make a hand move (buttons,
   prices, the dish of the day). White is kept for cards, because food photos
   want a clean plate under them. Tan is decoration only: it fails contrast as
   body text on paper, use --tan-dark for words. */
:root {
  --red: #c0182e; --red-dark: #8e0f1f;
  --black: #262626; --white: #fff;
  --paper: #eee6dd; --paper-soft: #f7f2ec;
  --tan: #c19c77; --tan-dark: #775a38;
  --cream: #f0dfc8; --green: #31582f;
  --gray-bg: var(--paper-soft); --gray-text: #6b625a;
  --border: #e2d8cc;
  /* Behind a photo while it loads: the red backdrop of the current dish photos.
     Switch to var(--black) if the dishes are re-shot on slate. */
  --photo-bg: #b3142a;
  --shadow: 0 4px 20px rgba(38,38,38,0.08);
  --shadow-lg: 0 8px 40px rgba(38,38,38,0.15);
  --radius: 14px; --radius-pill: 50px;
  --tr: 0.25s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--black);background:var(--paper-soft);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit;border:none;background:none}

/* NAVBAR */
.nav-bar{position:sticky;top:0;z-index:var(--z-nav);padding-top:env(safe-area-inset-top,0px);background:var(--paper-soft);border-bottom:3px solid var(--red);height:64px;width:100%;box-shadow:0 2px 12px rgba(38,38,38,0.08)}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 20px;height:100%;display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo{display:flex;align-items:center;height:42px;margin-block:auto}
.nav-logo img{height:100%;width:auto;display:block}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-links a{white-space:nowrap;font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--black);transition:color var(--tr);padding-bottom:3px;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.active{color:var(--red);border-bottom-color:var(--red)}
.nav-actions{display:flex;align-items:center;gap:10px}
.cart-btn{display:flex;align-items:center;gap:7px;background:transparent;color:var(--red);border:2px solid var(--red);border-radius:var(--radius-pill);padding:8px 16px;font-size:0.85rem;font-weight:700;transition:background var(--tr),color var(--tr),transform var(--tr)}
.cart-btn:hover{background:var(--red);color:var(--white);transform:scale(1.04)}
.cart-count{background:var(--red);color:var(--white);border-radius:50%;width:20px;height:20px;font-size:0.7rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.cart-btn:hover .cart-count{background:#fff;color:var(--red)}
.cart-count.hidden{display:none}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer}
.hamburger span{display:block;width:24px;height:2px;background:var(--black);border-radius:2px;transition:all var(--tr)}

/* MOBILE NAV */
.mobile-nav{display:none;position:fixed;inset:0;z-index:var(--z-overlay);background:var(--black);flex-direction:column;align-items:center;justify-content:center;gap:28px}
.mobile-nav.open{display:flex}
.mobile-nav a{font-size:1.8rem;font-weight:900;color:var(--white);text-transform:uppercase;letter-spacing:0.05em;transition:color var(--tr)}
.mobile-nav a:hover{color:var(--cream)}
.mobile-nav-close{position:absolute;top:20px;right:20px;color:var(--white);font-size:2rem;padding:8px}

/* CART DRAWER */
.cart-overlay{display:none;position:fixed;inset:0;background:rgba(38,38,38,0.5);z-index:var(--z-overlay)}
.cart-overlay.open{display:block}
.cart-drawer{position:fixed;top:0;right:-100%;width:100%;max-width:420px;height:100%;background:var(--white);z-index:var(--z-drawer);display:flex;flex-direction:column;transition:right 0.35s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg)}
.cart-drawer.open{right:0}
.cart-drawer-header{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.cart-drawer-header h2{font-size:1.1rem;font-weight:700}
.cart-close-btn{width:36px;height:36px;border-radius:50%;background:var(--gray-bg);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background var(--tr)}
.cart-close-btn:hover{background:var(--border)}
.cart-items-list{flex:1;overflow-y:auto;padding:24px 20px;display:flex;flex-direction:column;gap:16px;background:var(--gray-bg)}
.cart-empty{text-align:center;padding:60px 20px;color:var(--gray-text)}
.cart-empty-icon{font-size:3rem;margin-bottom:12px}
.cart-item{display:grid;grid-template-columns:1fr auto;row-gap:20px;column-gap:16px;padding:20px;background:var(--white);border-radius:20px;border:1px solid var(--border);box-shadow:0 4px 16px rgba(38,38,38,0.04);position:relative}
.cart-item-info{grid-column:1 / 2;display:flex;flex-direction:column;gap:4px}
.cart-item-name{font-weight:900;font-size:1.15rem;color:var(--black)}
.cart-item-opts{font-size:0.9rem;color:var(--gray-text)}
.cart-item-price{grid-column:2 / 3;align-self:end;justify-self:end;font-weight:900;color:var(--red);font-size:1.25rem}
.cart-item-remove{grid-column:2 / 3;justify-self:end;align-self:start;width:40px;height:40px;border-radius:50%;background:rgba(192,24,46,.08);color:var(--red);font-size:1.4rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all var(--tr);flex-shrink:0}
.cart-item-remove:hover{background:var(--red);color:var(--white)}
.cart-item-qty{grid-column:1 / 2;align-self:end;display:inline-flex;align-items:center;gap:12px;background:var(--gray-bg);border-radius:var(--radius-pill);padding:6px 10px;width:fit-content}
.cart-item-qty button{width:36px;height:36px;border-radius:50%;background:var(--white);border:1px solid var(--border);font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all var(--tr);box-shadow:0 2px 6px rgba(38,38,38,0.04)}
.cart-item-qty button:hover{background:var(--red);color:var(--white);border-color:var(--red)}
.cart-item-qty span{font-weight:900;font-size:1.1rem;min-width:24px;text-align:center}
.cart-drawer-footer{padding:24px 20px;background:var(--white);border-top:1px solid var(--border);box-shadow:0 -4px 20px rgba(38,38,38,0.05)}
.cart-total-row{display:flex;justify-content:space-between;font-size:1.1rem;font-weight:700;margin-bottom:20px;align-items:center}
.cart-total-amount{color:var(--red);font-size:1.6rem;font-weight:900}
.cart-checkout-btn{display:block;width:100%;background:var(--red);color:var(--white);text-align:center;padding:18px;border-radius:var(--radius-pill);font-size:1.1rem;font-weight:900;text-transform:uppercase;letter-spacing:0.05em;transition:all var(--tr)}
.cart-checkout-btn:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(192,24,46,0.25)}

/* PASTA MODAL */
.pasta-modal-overlay{display:none;position:fixed;inset:0;background:rgba(38,38,38,0.5);z-index:calc(var(--z-modal) - 1)}
.pasta-modal-overlay.open{display:block;animation:fadeIn 0.2s ease}
.pasta-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--white);width:95%;max-width:480px;border-radius:24px;z-index:var(--z-modal);flex-direction:column;max-height:90vh;max-height:90dvh;box-shadow:var(--shadow-lg)}
.pasta-modal.open{display:flex;animation:slideUp 0.3s cubic-bezier(.4,0,.2,1)}
.pasta-modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.pasta-modal-header h3{font-size:1.25rem;font-weight:900;margin:0}
.pasta-modal-body{padding:24px;overflow-y:auto;flex:1}
.pasta-option-group{margin-bottom:28px}
.pasta-option-group:last-child{margin-bottom:0}
.pasta-option-title{font-weight:900;font-size:1.1rem;margin-bottom:12px;color:var(--black)}
.pasta-radio{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid var(--border);border-radius:16px;margin-bottom:12px;cursor:pointer;transition:all 0.2s ease;background:var(--white)}
.pasta-radio:hover{border-color:var(--red);box-shadow:0 4px 12px rgba(192,24,46,0.05)}
.pasta-radio input:checked + span{font-weight:900}
.pasta-radio input:checked{accent-color:var(--red)}
.pasta-radio input{margin-right:12px;transform:scale(1.2)}
.pasta-radio span{flex:1;font-size:0.95rem;color:var(--black)}
.pasta-radio .opt-price{text-align:right;font-weight:900;color:var(--red);flex:none;font-size:0.95rem}
.pasta-radio-out{opacity:.5;cursor:default;background:var(--gray-bg)}
.pasta-radio-out:hover{border-color:var(--border);box-shadow:none}
.pasta-modal-footer{padding:20px 24px;padding-bottom:calc(20px + var(--safe-bottom));border-top:1px solid var(--border);background:var(--gray-bg);border-radius:0 0 24px 24px}
.modal-total-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-total-label{font-weight:700;font-size:.95rem}
.modal-total-amount{font-size:1.4rem;font-weight:900;color:var(--red)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}

/* FOOTER */
.site-footer{background:var(--black);border-top:3px solid var(--tan);color:rgba(255,255,255,0.65);padding:52px 20px 24px}
.footer-inner{max-width:1000px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:36px}
.footer-logo{display:inline-block;height:54px;margin-bottom:14px}
.footer-logo img{height:100%;width:auto;display:block}
.footer-info{font-size:0.85rem;line-height:1.9}
.footer-info a{color:var(--cream)}
.footer-col-title{font-size:0.73rem;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--tan);margin-bottom:14px}
.footer-col-links{list-style:none}
.footer-col-links li{margin-bottom:8px}
.footer-col-links a{font-size:0.88rem;color:rgba(255,255,255,0.55);transition:color var(--tr)}
.footer-col-links a:hover{color:var(--cream)}
.footer-divider{border-color:rgba(193,156,119,.35);margin-bottom:20px}
.footer-bottom{text-align:center;font-size:0.78rem;color:rgba(255,255,255,0.6)}
.footer-bottom a{text-decoration:underline}

/* STORE STATUS */
.store-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--gray-bg);
  border: 1px solid var(--border);
  margin-left: 16px;
}
.store-status.is-open {
  color: var(--green);
  background: rgba(49,88,47,0.1);
  border-color: rgba(49,88,47,0.2);
}
.store-status.is-closed {
  color: var(--red);
  background: rgba(192,24,46,0.1);
  border-color: rgba(192,24,46,0.2);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-dot.open {
  background: var(--green);
  box-shadow: 0 0 0 2px rgba(49,88,47,0.2);
  animation: pulseGreen 2s infinite;
}
.status-dot.closed {
  background: var(--red);
}

@keyframes pulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(49,88,47,0.4); }
  70% { box-shadow: 0 0 0 6px rgba(49,88,47,0); }
  100% { box-shadow: 0 0 0 0 rgba(49,88,47,0); }
}

/* FLOATING WA */
.floating-wa {
  position: fixed;
  bottom: calc(24px + var(--safe-bottom) + var(--hud-offset));
  right: 24px;
  transition: bottom .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 60px;
  height: 60px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37,211,102,0.4);
  z-index: var(--z-sticky);
  transition: transform 0.3s ease, box-shadow 0.3s ease, bottom .35s ease;
}
.floating-wa:hover {
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.6);
}
.floating-wa svg {
  width: 32px;
  height: 32px;
}

/* FOOTER SOCIALS */
.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  color: var(--white);
  transition: all 0.3s ease;
}
.footer-socials a:hover {
  background: var(--cream);
  color: var(--black);
  transform: translateY(-2px);
}
.footer-socials svg {
  width: 18px;
  height: 18px;
}

/* SHARED */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:72px 20px}
.eyebrow{font-size:0.72rem;font-weight:700;letter-spacing:0.17em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:8px}
.section-heading{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;line-height:1.15}
.section-sub{font-size:1rem;color:var(--gray-text);line-height:1.7;margin-top:8px}

.js-anim .reveal{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
.js-anim .reveal.visible{opacity:1;transform:none}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--radius-pill);font-size:0.95rem;font-weight:700;letter-spacing:0.04em;transition:all var(--tr);cursor:pointer;border:2px solid transparent}
.btn-red{background:var(--red);color:var(--white);border-color:var(--red)}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-outline-white{background:transparent;color:var(--white);border-color:var(--white)}
.btn-outline-white:hover{background:var(--white);color:var(--black)}
.btn-white{background:var(--white);color:var(--black);border-color:var(--white)}
.btn-white:hover{background:var(--cream)}
.btn-green{background:var(--green);color:var(--white);border-color:var(--green)}
.btn-green:hover{background:#264824}
.btn-outline{background:transparent;color:var(--black);border-color:var(--border)}
.btn-outline:hover{background:var(--gray-bg);border-color:#ccc}
.btn-full{width:100%;justify-content:center}
.btn-lg{padding:18px 36px;font-size:1.05rem}
.btn-sm{padding:10px 20px;font-size:0.82rem}

/* RESPONSIVE */
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .section{padding:48px 16px}
  .cart-drawer{max-width:100%}
}

/* ─── CONTACT SECTION (Shared) ─── */
.contact-section {
  background: var(--cream);
  padding: 80px 20px;
}

.contact-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.contact-card {
  background: var(--white);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(38,38,38, 0.06);
}

.contact-card h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  margin-bottom: 28px;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.contact-detail-icon {
  width: 40px;
  height: 40px;
  background: var(--cream);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--red);
}

.contact-detail-text .cd-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-text);
  margin-bottom: 2px;
}

.contact-detail-text .cd-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--black);
}

.contact-detail-text a {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
}

.contact-detail-text a:hover {
  text-decoration: underline;
}

.contact-order-actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.map-card {
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(38,38,38, 0.06);
}

.map-embed {
  height: 300px;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.map-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 0.82rem;
  color: var(--gray-text);
  font-weight: 500;
  border-top: 1px solid rgba(38,38,38, 0.06);
}

.map-caption svg {
  flex-shrink: 0;
  color: var(--red);
}

@media (max-width: 768px) {
  .contact-inner {
    grid-template-columns: 1fr;
  }
  .contact-card, .map-card {
    border-radius: 20px;
  }
}

/* ─── PWA INSTALL BANNER ─── */
#pwa-install-banner {
  /* positioned by #hud-stack now, not by its own fixed coordinates */
  display: none;
  width: 100%;
}
#pwa-install-banner.visible {
  display: block;
  animation: hudIn .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pwa-banner-inner {
  background: rgba(26, 10, 0, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(192, 24, 46, 0.35);
  border-radius: 20px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 16px 48px rgba(38,38,38,0.45), 0 0 0 1px rgba(255,255,255,0.05);
  animation: none;
}
.pwa-banner-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--white);
  padding: 4px;
  flex-shrink: 0;
}
.pwa-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pwa-banner-text strong {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--white);
  white-space: nowrap;
}
.pwa-banner-text span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-btn-install {
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 50px;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.pwa-btn-install:hover {
  background: var(--red-dark);
  transform: scale(1.04);
}
.pwa-btn-dismiss {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.pwa-btn-dismiss:hover {
  background: rgba(255,255,255,0.2);
  color: var(--white);
}

/* ─── UPSELL NUDGE TOAST ─── */
#upsell-nudge {
  /* positioned by #hud-stack now */
  display: none;
  width: 100%;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(38,38,38,0.16), 0 0 0 1px rgba(38,38,38,0.06);
  padding: 16px;
  align-items: center;
  gap: 14px;
}
#upsell-nudge.visible { display: flex; animation: hudIn .4s cubic-bezier(0.34, 1.56, 0.64, 1); }

.upsell-nudge-emoji {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}
.upsell-nudge-body {
  flex: 1;
  min-width: 0;
}
.upsell-nudge-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray-text);
  margin-bottom: 2px;
}
.upsell-nudge-name {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upsell-nudge-price {
  font-size: 0.82rem;
  color: var(--red);
  font-weight: 700;
  margin-top: 1px;
}
.upsell-nudge-add {
  background: var(--red);
  color: var(--white);
  border-radius: 50px;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.upsell-nudge-add:hover {
  background: var(--red-dark);
  transform: scale(1.05);
}
.upsell-nudge-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gray-bg);
  color: var(--gray-text);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.upsell-nudge-close:hover {
  background: var(--border);
  color: var(--black);
}


/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─── RESPONSIVE <picture> WRAPPERS ─── */
/* <picture> is inline by default; these wrap images that used to be direct
   flex/grid children, so they must behave like the <img> they replaced. */
.menu-card picture,
.dish-card picture,
.hero-img-wrap picture,
.nav-logo picture,
.footer-logo picture,
.pwa-banner-inner picture { display: block; }
.menu-card picture { flex-shrink: 0; }
img { max-width: 100%; height: auto; }


/* ─── BOTTOM HUD STACK ──────────────────────────────────────────────────────
   The install banner, the upsell nudge and the error toast used to be three
   independent fixed elements that landed on top of each other (and on the
   WhatsApp button). They are now rows in one column, shown one at a time. */
#hud-stack {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: var(--z-hud);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 12px calc(12px + var(--safe-bottom));
  pointer-events: none;
}
#hud-stack > * { pointer-events: auto; width: 100%; max-width: 420px; }

/* Toast */
.hud-toast {
  display: none;
  background: var(--red); color: #fff;
  padding: 14px 20px; border-radius: 16px;
  font-weight: 700; font-size: .9rem; text-align: center;
  box-shadow: 0 8px 28px rgba(38,38,38,0.22);
}
.hud-toast.visible { display: block; animation: hudIn .28s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes hudIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 420px) {
  #hud-stack > * { max-width: none; }
}

/* ─── TOUCH TARGETS & FOCUS ─────────────────────────────────────────────────
   Nothing interactive should be smaller than a fingertip (~44px), and every
   control needs a visible focus ring for keyboard and switch users. */
.cart-item-qty button,
.cart-item-remove,
.order-item-qty button,
.order-item-remove,
.cart-close-btn,
.mobile-nav-close,
.pwa-btn-dismiss,
.upsell-nudge-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 6px;
}
.hero-btns a:focus-visible,
.btn-white:focus-visible,
.btn-outline-white:focus-visible { outline-color: #fff; }

/* Hover effects only where a real pointer exists — on a touchscreen they stick
   after a tap and leave cards looking permanently lifted. */
@media (hover: none) {
  .menu-card:hover,
  .dish-card:hover { transform: none; box-shadow: 0 3px 16px rgba(38,38,38,0.07); }
  .floating-wa:hover { transform: none; }
  .pasta-radio:hover { border-color: var(--border); box-shadow: none; }
}

/* ─── SHORT VIEWPORTS (phone in landscape) ─── */
@media (max-height: 520px) {
  .pasta-modal { max-height: 96dvh; }
  .pasta-modal-body { padding: 14px 20px; }
  .pasta-option-group { margin-bottom: 16px; }
  .pasta-modal-header, .pasta-modal-footer { padding-top: 12px; padding-bottom: 12px; }
  .mobile-nav { gap: 14px; overflow-y: auto; }
}

/* ─── TABLET BAND (768–1024) ─── */
@media (min-width: 769px) and (max-width: 1024px) {
  .contact-inner { grid-template-columns: 1fr; }
}

/* ─── CART NOTICE ───────────────────────────────────────────────────────────
   Shown when a cart held in the browser no longer matches today's menu. Placed
   at the top rather than in the bottom HUD: this changes what the customer is
   about to pay for, so it must not be missable. */
.cart-notice{background:var(--cream);border-bottom:2px solid var(--red)}
.cart-notice-inner{max-width:1000px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:flex-start;gap:12px;font-size:.9rem;line-height:1.45}
.cart-notice-icon{font-size:1.2rem;flex-shrink:0}
.cart-notice-text{flex:1;color:var(--black)}
.cart-notice-text strong{font-weight:900}
.cart-notice-close{flex-shrink:0;min-width:44px;min-height:44px;display:flex;
  align-items:center;justify-content:center;font-size:1rem;color:var(--gray-text)}

/* ─── FREE-DELIVERY PROGRESS ────────────────────────────────────────────────
   Turns the upsell into help: the customer can see exactly what they gain. */
.delivery-progress{background:var(--cream);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.dp-text{font-size:.85rem;font-weight:700;line-height:1.4;margin-bottom:8px}
.dp-text strong{color:var(--red);font-weight:900}
.dp-text.dp-done{color:var(--green)}
.dp-bar{height:8px;background:rgba(193,156,119,.3);border-radius:20px;overflow:hidden}
.dp-bar span{display:block;height:100%;background:var(--red);border-radius:20px;transition:width .4s ease}
.dp-done + .dp-bar span{background:var(--green)}

/* ─── RETURNING-CUSTOMER SHORTCUTS ─── */
.reorder-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--white);border:2px solid var(--cream);border-radius:16px;
  padding:14px 16px;margin-bottom:16px}
.reorder-text{flex:1;min-width:160px;font-size:.9rem;line-height:1.45}
.reorder-text strong{font-weight:900}

/* ─── LEGAL / PRIVACY ─── */
.legal-page{max-width:720px;margin:0 auto;padding:40px 20px calc(48px + var(--safe-bottom));line-height:1.7}
.legal-page h1{font-size:clamp(1.8rem,5vw,2.4rem);font-weight:900;margin-bottom:12px}
.legal-intro{font-size:1.02rem;color:var(--gray-text);margin-bottom:28px}
.legal-page h2{font-size:1.15rem;font-weight:900;margin:28px 0 10px}
.legal-page ul{padding-left:20px;margin-bottom:8px}
.legal-page li{margin-bottom:8px}
.legal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ─── A LIVE ORDER FOLLOWS YOU ──────────────────────────────────────────────
   Placing an order and then losing any way back to it is the worst dead end on
   the site, so it is surfaced in the banner AND in both navigations. */
.active-order-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:rgba(49,88,47,.08);border-bottom:2px solid var(--green);
  padding:12px 20px;margin:0}
.active-order-card .reorder-text{flex:1;min-width:150px;font-size:.9rem}
.active-order-dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex-shrink:0}
@media (prefers-reduced-motion: no-preference){
  .active-order-dot{animation:orderPulse 1.8s ease-in-out infinite}
}
@keyframes orderPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(49,88,47,.5)}
  70%{box-shadow:0 0 0 7px rgba(49,88,47,0)}
}
.nav-track-link{color:var(--green) !important;font-weight:900 !important}
.mobile-nav-track{color:var(--cream) !important;font-weight:900}

/* ─── REVIEW POLISH ─────────────────────────────────────────────────────────── */
.cart-pay-note{font-size:.8rem;font-weight:700;color:var(--green);text-align:center;margin:-8px 0 14px}
/* One line, always: the pill used to wrap to two at 375px and crowd the logo. */
.store-status{white-space:nowrap}
.upsell-nudge-label{white-space:nowrap;letter-spacing:.06em}
@media (max-width:420px){
  .status-ar{display:none}
  .store-status{margin-left:8px;padding:4px 8px}
  .cart-btn{padding:10px 14px}
}
/* Skip link for keyboard users */

.wa-fallback{display:block;text-align:center;margin-top:12px;font-size:.9rem;font-weight:700;color:#128c4a;text-decoration:underline}

/* Page headers: the charcoal band of the printed menu, with its tan rule. */
.page-band{background:var(--black);color:#fff;text-align:center;padding:40px 20px;border-bottom:3px solid var(--tan)}
.page-band p{color:var(--paper)}
.page-band .band-kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--tan);margin-bottom:6px}

.contact-inner.container{max-width:900px}

/* The primary action, always one tap away on a wide screen. Phones have it in
   the drawer and the sticky bars, and no room for it here. */
.nav-order-btn{display:none;align-items:center;gap:8px;white-space:nowrap;min-height:40px;padding:0 20px;border-radius:var(--radius-pill);background:var(--red);border:2px solid var(--red);color:#fff;font-weight:800;font-size:.9rem;transition:background var(--tr),border-color var(--tr)}
.nav-order-btn:hover{background:var(--red-dark);border-color:var(--red-dark)}
.nav-order-btn [lang=ar]{font-size:.85em;opacity:.9}
@media (min-width:900px){.nav-order-btn{display:inline-flex}}

/* A dish without a photo yet: a calm paper tile, never a broken image. */
.img-placeholder{display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--tan);font-size:2.6rem;aspect-ratio:1/1;width:100%}

.section-cta{text-align:center;margin-top:32px}

/* What customers say */
.band-proof{margin-top:10px;font-size:.92rem;color:var(--paper)}
.band-proof strong{color:#fff}

/* Real photos of the place and the people (Admin → Photos) */
.photo-strip{padding-top:0}
.photo-strip-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);max-width:1000px}
.photo-strip-2{grid-template-columns:repeat(2,1fr)}
.photo-strip-1{grid-template-columns:minmax(0,640px);justify-content:center}
.photo-strip-item{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--photo-bg);aspect-ratio:4/3}
.photo-strip-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.photo-strip-item:hover img{transform:scale(1.04)}
.storefront-photo{aspect-ratio:4/3;overflow:hidden}
.storefront-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px){.photo-strip-grid,.photo-strip-2{grid-template-columns:1fr}}

/* Tunisian Arabic beside the French (i18n_ar.py). Lighter and smaller: it
   accompanies the label, it does not compete with it. System Arabic fonts, so
   nothing extra is downloaded on a slow connection. */
.ar{font-family:'Segoe UI','Noto Sans Arabic','Geeza Pro',Tahoma,sans-serif;font-size:.82em;font-weight:500;opacity:.85;
  unicode-bidi:isolate;margin-inline-start:.35em;white-space:nowrap;letter-spacing:0}
.ar-block{display:block;margin:2px 0 0;font-size:.78em}
h1 .ar,h2 .ar,h3 .ar{font-weight:600;opacity:.75}
.btn .ar{opacity:.9}

/* Shared by the information pages (FAQ, livraison, contact, dish) */
.page-band h1{font-size:clamp(1.8rem,4.5vw,3rem);font-weight:900}
.band-ar{margin:0 0 6px;color:var(--tan)}
.crumbs{font-size:.82rem;color:var(--gray-text);padding:18px 0 8px}
.crumbs a{text-decoration:underline}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:8px 0 12px}
.fact{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center}
.fact strong{display:block;font-size:1.25rem;font-weight:900;color:var(--red)}
.fact span{font-size:.8rem;color:var(--gray-text)}
.zone-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0 !important}
.zone-list li{background:var(--white);border:1px solid var(--tan);border-radius:var(--radius-pill);padding:6px 14px;font-size:.88rem;margin:0}
.legal-page ol{padding-left:20px}.legal-page ol li{margin-bottom:8px}
.legal-page a{color:var(--red);text-decoration:underline}
.legal-page .btn{text-decoration:none}.legal-page .btn-red{color:#fff}
.faq-page .faq-item{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:0 18px;margin-bottom:10px}
.faq-page summary{cursor:pointer;padding:16px 0;list-style-position:outside}
.faq-page summary h2{display:inline;font-size:1.02rem;margin:0}
.faq-page .faq-item p{padding:0 0 16px}
.section-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pager{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:24px}
.pager a{color:var(--red);font-weight:700}
.terms-line{text-align:center;font-size:.8rem;color:var(--gray-text);margin-top:12px}
.terms-line a{text-decoration:underline}