/* ============================================================================
   Sabores Oaxaqueños — Menu
   Shares the homepage palette (cream / terracotta / marigold) + serif type.
   Layouts: desktop sticky-scroll · tablet cards · mobile image cards.
   ========================================================================== */
:root{
  --ink:#1a120b; --cream:#f7efe2; --marigold:#f4a300; --ember:#c1440e;
  --paper:#f3e7d2; --paper-2:#fbf3e3; --paper-3:#ecdfc7;
  --brown:#4a2a16; --brown-2:#5a4233; --line:rgba(58,36,24,.16);
  --nav-h:60px; --pills-h:56px;
  --shadow:0 20px 40px -22px rgba(74,42,22,.5);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:'EB Garamond',Georgia,serif; color:var(--brown-2);
  background:radial-gradient(130% 95% at 80% 0%, #fbf3e3 0%, #f3e7d1 55%, #ecdfc7 100%), var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:min(1240px,92vw); margin-inline:auto; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* subtle paper grain overlay */
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── top navigation ───────────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:40; height:var(--nav-h);
  background:rgba(247,239,226,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); }
.nav .wrap{ height:100%; display:flex; align-items:center; gap:22px; }
.brand{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:22px; letter-spacing:.02em;
  color:var(--brown); white-space:nowrap; }
.brand b{ color:var(--ember); font-weight:700; }
.nav-links{ display:flex; gap:22px; margin-left:8px; }
.nav-links a{ font-size:15px; letter-spacing:.02em; color:var(--brown-2); padding:6px 2px; position:relative; }
.nav-links a[aria-current="page"]{ color:var(--ember); }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px; background:var(--ember); transition:right .3s; }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ right:0; }
/* Gallery: truthful disabled state until a Gallery page exists */
.nav-links .nav-disabled{ font-size:15px; letter-spacing:.02em; color:#a9917a; cursor:default;
  display:inline-flex; align-items:center; gap:7px; padding:6px 2px; }
.soon-tag{ font-style:normal; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#a9917a; border:1px solid var(--line); border-radius:999px; padding:2px 7px; }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }

.lang{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:13px; }
.lang button{ background:none; border:0; padding:6px 12px; cursor:pointer; color:var(--brown-2);
  font-family:inherit; letter-spacing:.06em; }
.lang button[aria-pressed="true"]{ background:var(--ember); color:#fff5ea; }

.btn{ font-family:'EB Garamond',serif; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  font-size:13px; padding:11px 22px; border-radius:8px; cursor:pointer; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:9px; transition:transform .2s, background .2s, box-shadow .2s; }
.btn-primary{ color:#fbf3e6; background:linear-gradient(180deg,#c75a2b,#b3461f);
  box-shadow:0 14px 30px -12px rgba(150,60,20,.6); border-color:rgba(255,255,255,.12); }
.btn-primary:hover{ background:linear-gradient(180deg,#d2602e,#a83f1b); }
.btn-ghost{ color:var(--brown); background:transparent; border-color:var(--line); }
.btn-ghost:hover{ background:rgba(193,68,14,.08); border-color:var(--ember); }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:16px; height:16px; }

.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:8px;
  width:40px; height:38px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle svg{ width:20px; height:20px; color:var(--brown); }

/* ── menu masthead ────────────────────────────────────────────────────────── */
.masthead{ position:relative; z-index:1; text-align:center; padding:clamp(40px,7vw,84px) 0 clamp(20px,3vw,30px); }
.masthead .eyebrow{ font-size:14px; letter-spacing:.42em; text-transform:uppercase; color:var(--ember);
  font-weight:600; display:flex; align-items:center; justify-content:center; gap:14px; }
.masthead .eyebrow::before,.masthead .eyebrow::after{ content:""; width:34px; height:1px; background:var(--ember); opacity:.5; }
.masthead h1{ font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--brown);
  font-size:clamp(52px,10vw,120px); line-height:.9; margin:14px 0 8px; letter-spacing:.01em; }
.masthead p{ font-size:clamp(16px,1.4vw,20px); color:var(--brown-2); font-style:italic; max-width:52ch; margin:0 auto; }
.masthead .note{ margin-top:14px; font-size:13px; letter-spacing:.04em; color:#8a6f57; font-style:normal; }

/* ── category pill nav (sticky under top nav) ─────────────────────────────── */
.pills{ position:sticky; top:var(--nav-h); z-index:30; padding:10px 0;
  background:rgba(247,239,226,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); }
.pills-track{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity; padding-bottom:2px; }
.pills-track::-webkit-scrollbar{ display:none; }
.pill{ flex:0 0 auto; scroll-snap-align:start; font-family:inherit; font-size:14px; letter-spacing:.04em;
  padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.35);
  color:var(--brown-2); cursor:pointer; white-space:nowrap; transition:background .2s,color .2s,border-color .2s; }
.pill:hover{ border-color:var(--ember); color:var(--ember); }
.pill[aria-current="true"]{ background:var(--ember); color:#fff5ea; border-color:var(--ember); }

/* ── category section ─────────────────────────────────────────────────────── */
.cat{ position:relative; z-index:1; padding:clamp(40px,6vw,88px) 0 clamp(24px,4vw,48px); scroll-margin-top:calc(var(--nav-h) + var(--pills-h) + 8px); }
.cat + .cat{ border-top:1px solid var(--line); }
.cat-head{ margin-bottom:clamp(20px,3vw,36px); }
.cat-head .k{ font-size:13px; letter-spacing:.4em; text-transform:uppercase; color:var(--ember); font-weight:600; }
.cat-head h2{ font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--brown);
  font-size:clamp(36px,5.2vw,68px); line-height:.95; text-transform:uppercase; letter-spacing:.01em; }
.cat-head .count{ font-size:13px; color:#8a6f57; letter-spacing:.05em; margin-top:6px; }

.cat-body{ position:relative; }

/* dish list — default (mobile/tablet) is a responsive card grid */
.dish-list{ list-style:none; display:grid; gap:clamp(16px,2.4vw,26px);
  grid-template-columns:1fr; }

/* ── mobile / tablet image card ───────────────────────────────────────────── */
.dish{ position:relative; }
.dish-card{ position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  background:#e8d9bf; margin:0; }
.dish-card .imgbox{ position:relative; width:100%; aspect-ratio:4/3; background:#e2d2b6; }
.dish-card .imgbox img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dish-card .grad{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,12,6,.82) 0%, rgba(20,12,6,.35) 30%, transparent 58%); }
.dish-label{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; color:#fff8ee; z-index:2; }
.dish-label .n{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:clamp(20px,4.6vw,26px);
  line-height:1.04; letter-spacing:.01em; text-shadow:0 3px 18px rgba(0,0,0,.5); }
.dish-label .d{ font-size:14px; color:rgba(255,248,238,.86); margin-top:3px; line-height:1.4; }
.dish-label .pending{ font-style:italic; opacity:.8; }
.dish-expand{ position:absolute; top:12px; right:12px; z-index:3; width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.4); background:rgba(20,12,6,.4); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.dish-expand svg{ width:18px; height:18px; }
.feat-tag{ position:absolute; top:12px; left:12px; z-index:3; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px; background:var(--marigold); color:#3a2205; font-weight:600; }

/* the desktop-only text column + sticky media — hidden on small screens */
.dish-copy{ display:none; }
.sticky-media{ display:none; }

/* ── TABLET: 2-column card grid (portrait → 1 col handled by max-width) ────── */
@media (min-width:640px){
  .dish-list{ grid-template-columns:repeat(2,1fr); }
  .dish-card .imgbox{ aspect-ratio:3/2; }
}
@media (min-width:640px) and (orientation:portrait) and (max-width:820px){
  .dish-list{ grid-template-columns:1fr; }  /* tablet portrait → single column */
}

/* ── DESKTOP: premium sticky-scroll ───────────────────────────────────────── */
@media (min-width:1024px){
  .cat-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,4vw,72px); align-items:start; }

  /* sticky image panel (left) */
  .sticky-media{ display:block; position:sticky; top:calc(var(--nav-h) + var(--pills-h) + 22px);
    height:min(66vh,560px); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); background:#e2d2b6; }
  .sticky-media .layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
    transition:opacity .55s ease; will-change:opacity; }
  .sticky-media .layer.on{ opacity:1; }
  .sticky-media .cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px 26px; color:#fff8ee;
    background:linear-gradient(to top, rgba(20,12,6,.8), transparent 78%); }
  .sticky-media .cap .n{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:32px; line-height:1;
    text-shadow:0 3px 20px rgba(0,0,0,.5); }
  .sticky-media .cap .d{ font-size:15px; color:rgba(255,248,238,.88); margin-top:5px; }

  /* the media panel sits on the LEFT for even categories, RIGHT for odd (rhythm) */
  .cat:nth-of-type(even) .sticky-media{ order:2; }
  .cat:nth-of-type(even) .dish-list{ order:1; }

  /* right column becomes an editorial text list; the per-card image is hidden */
  .dish-list{ display:block; }
  .dish{ padding:26px 0; border-bottom:1px solid var(--line); opacity:.42; transition:opacity .4s ease; cursor:pointer; }
  .dish:first-child{ padding-top:0; }
  .dish.active{ opacity:1; }
  .dish:focus-visible{ outline:2px solid var(--ember); outline-offset:6px; border-radius:6px; opacity:1; }
  .dish-card{ display:none; }              /* image lives in the sticky panel on desktop */
  .dish-copy{ display:block; }
  .dish-copy .idx{ font-size:13px; letter-spacing:.2em; color:var(--ember); font-weight:600; }
  .dish-copy .n{ font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--brown);
    font-size:clamp(26px,2.4vw,40px); line-height:1.02; margin-top:2px; letter-spacing:.01em; }
  .dish-copy .n .feat-dot{ display:inline-block; width:8px; height:8px; background:var(--marigold);
    border-radius:2px; transform:rotate(45deg); margin-left:10px; vertical-align:middle; }
  .dish-copy .d{ font-size:16px; color:var(--brown-2); margin-top:8px; max-width:44ch; line-height:1.6; }
  .dish-copy .pending{ font-style:italic; color:#8a6f57; }
  .dish.active .dish-copy .n{ color:var(--ember); }
}
@media (prefers-reduced-motion: reduce){
  .sticky-media .layer,.dish,.dish-copy .n{ transition:none !important; }
}

/* ── lightbox ─────────────────────────────────────────────────────────────── */
.lightbox{ position:fixed; inset:0; z-index:60; background:rgba(14,9,5,.9); display:none;
  align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(6px); }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(96vw,1200px); max-height:88vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox .lb-cap{ position:absolute; bottom:26px; left:0; right:0; text-align:center; color:#fff8ee;
  font-family:'Cormorant Garamond',serif; font-size:26px; text-shadow:0 3px 20px rgba(0,0,0,.6); }
.lightbox .lb-close{ position:absolute; top:20px; right:22px; width:46px; height:46px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.35); color:#fff; cursor:pointer; font-size:22px; }

/* ── footer / actions ─────────────────────────────────────────────────────── */
.foot{ position:relative; z-index:1; margin-top:40px; background:linear-gradient(180deg,#2a1a0f,#1a120b); color:#f2e4cf; }
.foot .wrap{ padding:clamp(44px,6vw,80px) 0 34px; }
.foot-cta{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  padding-bottom:34px; border-bottom:1px solid rgba(242,228,207,.14); }
.foot-cta h3{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:clamp(28px,4vw,44px); color:#fff6e8; line-height:1; }
.foot-cta .actions{ display:flex; gap:14px; flex-wrap:wrap; }
.foot-cta .btn-ghost{ color:#f2e4cf; border-color:rgba(242,228,207,.3); }
.foot-cta .btn-ghost:hover{ background:rgba(244,163,0,.12); border-color:var(--marigold); }
.foot-grid{ display:grid; grid-template-columns:1.25fr 0.9fr 1.2fr 0.85fr; gap:30px; padding-top:34px; }
.foot h4{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--marigold); margin-bottom:12px; font-weight:600; }
.foot p,.foot a{ font-size:15px; color:#e6d6bd; line-height:1.7; }
.foot a:hover{ color:#fff; }

/* confirmed address + business hours */
.foot .addr{ font-style:normal; }
.foot .addr-line{ display:block; font-size:15px; color:#e6d6bd; line-height:1.65; }
.foot .hours{ display:flex; flex-direction:column; gap:4px; }
.hours-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.hours-day{ font-size:14.5px; color:#e6d6bd; }
.hours-time{ font-size:13.5px; color:#c9b79a; white-space:nowrap; font-variant-numeric:tabular-nums; }
.socials{ display:flex; gap:12px; margin-top:6px; }
.socials a{ width:42px; height:42px; border-radius:999px; border:1px solid rgba(242,228,207,.25);
  display:flex; align-items:center; justify-content:center; }
.socials a[aria-disabled="true"]{ opacity:.5; cursor:default; }
.socials svg{ width:19px; height:19px; }
.foot .fineprint{ margin-top:30px; font-size:12.5px; color:#b6a488; letter-spacing:.03em; }
.pending-flag{ color:var(--marigold); font-size:12px; letter-spacing:.04em; }

@media (max-width:1024px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:26px 30px; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; gap:22px; } }
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav.open .nav-links{ display:flex; position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; gap:0; background:var(--cream); border-bottom:1px solid var(--line); padding:6px 0; }
  .nav.open .nav-links a{ padding:13px 6vw; }
  .nav.open .nav-links .nav-disabled{ padding:13px 6vw; }
  .nav .brand{ font-size:19px; }
  .nav-right .btn span{ display:none; }  /* icon-only on small */
  .nav-right .btn{ padding:11px 14px; }
}

/* ── footer anchor offset (Contacto y Ubicación jumps here) ───────────────── */
.foot{ scroll-margin-top:calc(var(--nav-h) + var(--pills-h) + 8px); }

/* ── back-to-categories relief (mobile/tablet only, appears after scroll) ─── */
.backtop{
  position:fixed; z-index:35; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:none; align-items:center; gap:7px; font-family:'EB Garamond',serif; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brown); cursor:pointer;
  padding:10px 16px; border-radius:999px; border:1px solid var(--line);
  background:rgba(247,239,226,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 26px -12px rgba(74,42,22,.55);
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s, background .2s;
}
.backtop svg{ width:15px; height:15px; color:var(--ember); }
.backtop.show{ display:inline-flex; opacity:1; transform:translateY(0); }
.backtop:hover{ background:rgba(255,255,255,.98); border-color:var(--ember); }
.backtop:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
@media (min-width:1024px){ .backtop{ display:none !important; } }   /* desktop has the pill nav */
@media (prefers-reduced-motion: reduce){ .backtop{ transition:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM POLISH LAYER — detail refinements only (no redesign).
   Shared easing, consistent focus-visible, restrained hover, softer contrast.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --ease:cubic-bezier(.22,.61,.36,1); --dur:.24s; --muted:#6f573f; }

/* — unified, keyboard-only focus ring across every interactive element (a11y) — */
.nav-links a:focus-visible, .pill:focus-visible, .lang button:focus-visible, .btn:focus-visible,
.nav-toggle:focus-visible, .dish-expand:focus-visible, .backtop:focus-visible{
  outline:2px solid var(--ember); outline-offset:3px; border-radius:6px; }
/* light ring where the surface is dark */
.socials a:focus-visible, .lb-close:focus-visible{ outline:2px solid var(--marigold); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }

/* — softer, higher-contrast muted text (was #8a6f57 ≈ 3.4:1) — */
.masthead .note, .cat-head .count{ color:var(--muted); }

/* — consistent easing on existing transitions — */
.nav-links a::after{ transition:right .3s var(--ease); }
.pill{ transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
  border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pill[aria-current="true"]{ box-shadow:0 6px 16px -9px rgba(193,68,14,.55); }
.lang button{ transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.lang button:hover{ color:var(--ember); }
.lang button[aria-pressed="true"]:hover{ color:#fff5ea; }
.btn{ transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 18px 34px -12px rgba(150,60,20,.66); }

/* — dish cards: gentle load-in + restrained hover lift (hover-capable devices) — */
.dish-card .imgbox img{ opacity:0; transition:opacity .5s var(--ease), transform .6s var(--ease); }
.dish-card .imgbox img.loaded{ opacity:1; }
.dish-expand{ transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (hover:hover){
  .dish-card{ transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .dish:hover .dish-card{ transform:translateY(-4px); box-shadow:0 28px 52px -26px rgba(74,42,22,.62); }
  .dish:hover .dish-card .imgbox img.loaded{ transform:scale(1.045); }
  .dish-expand:hover{ background:rgba(20,12,6,.6); transform:scale(1.06); }
}

/* — desktop sticky-scroll: same easing on the crossfade + row fade — */
.sticky-media .layer{ transition:opacity .55s var(--ease); }
@media (min-width:1024px){ .dish{ transition:opacity .4s var(--ease); } }

/* — lightbox: fade + gentle scale-in (replaces the instant display swap) — */
.lightbox{ display:flex; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), visibility 0s .28s; }
.lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .28s var(--ease); }
.lightbox img{ transform:scale(.965); transition:transform .3s var(--ease); }
.lightbox.open img{ transform:scale(1); }
.lb-close{ transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lb-close:hover{ background:rgba(0,0,0,.55); transform:rotate(90deg); }

/* — honor reduced-motion for every polish transition — */
@media (prefers-reduced-motion: reduce){
  .dish-card, .dish-card .imgbox img, .dish-card .imgbox img.loaded,
  .lightbox, .lightbox img, .btn, .pill, .lb-close, .dish-expand{ transition:none !important; transform:none !important; }
  .dish-card .imgbox img{ opacity:1 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALL TO ORDER — confirmed phone actions (single central config in menu.js)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Order button while no platform is enabled: a muted, non-navigating
   "Próximamente / Coming Soon" state (not a primary CTA, not a link to '#'). */
.btn.is-soon{ background:transparent; color:var(--muted); border-color:var(--line);
  box-shadow:none; cursor:default; }
.btn.is-soon:hover{ background:transparent; transform:none; box-shadow:none; }
.btn.is-soon .soon-tag{ color:inherit; }
.foot .btn.is-soon{ color:#c9b79a; border-color:rgba(242,228,207,.3); }

/* ═══════════════════════════════════════════════════════════════════════════
   ORDER ONLINE — shared popover (desktop) / bottom sheet (mobile).
   Elegant, not promotional: cream card, serif titles, one neutral monochrome
   mark per row (no brand logos), external-link affordance. Built by
   assets/shared/order-menu.js from CONFIG.orderPlatforms.
   ═══════════════════════════════════════════════════════════════════════════ */
.order-pop{ position:fixed; inset:0; z-index:70; pointer-events:none; }
.order-pop[hidden]{ display:none; }
.order-pop-panel{ position:fixed; pointer-events:auto; width:min(324px,92vw);
  background:var(--cream); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(74,42,22,.55); overflow:hidden;
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right;
  transition:opacity .2s var(--ease), transform .2s var(--ease); }
.order-pop.open .order-pop-panel{ opacity:1; transform:none; }
.order-pop-head{ display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px; border-bottom:1px solid var(--line); }
.order-pop-title{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:20px; color:var(--brown); letter-spacing:.01em; }
.order-pop-close{ width:30px; height:30px; border:0; background:none; cursor:pointer; color:var(--muted);
  font-size:22px; line-height:1; border-radius:8px; transition:color var(--dur) var(--ease); }
.order-pop-close:hover{ color:var(--ember); }
.order-pop-close:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.order-pop-list{ list-style:none; margin:0; padding:6px; }
.order-item{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; color:var(--brown);
  transition:background var(--dur) var(--ease); }
.order-item:hover{ background:rgba(193,68,14,.07); }
.order-item:focus-visible{ outline:2px solid var(--ember); outline-offset:-2px; background:rgba(193,68,14,.07); }
.order-item-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:rgba(193,68,14,.08); color:var(--ember); }
.order-item-ic svg{ width:18px; height:18px; }
.order-item-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.order-item-name{ font-family:'EB Garamond',serif; font-weight:600; font-size:16px; }
.order-item-sub{ font-size:12px; color:var(--muted); letter-spacing:.03em; margin-top:1px; }
.order-item-go{ flex:0 0 auto; color:#b39a80; display:flex; }
.order-item-go svg{ width:16px; height:16px; }

@media (max-width:640px){
  .order-pop{ pointer-events:auto; background:rgba(14,9,5,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; transition:opacity .25s var(--ease); }
  .order-pop.open{ opacity:1; }
  .order-pop-panel{ position:absolute; left:0; right:0; bottom:0; top:auto !important; width:100%;
    border-radius:18px 18px 0 0; border-left:0; border-right:0; border-bottom:0;
    transform:translateY(100%); opacity:1 !important; transition:transform .28s var(--ease);
    padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)); }
  .order-pop.open .order-pop-panel{ transform:none; }
  .order-pop-head{ padding:16px 18px 12px; }
  .order-pop-title{ font-size:22px; }
  .order-item{ padding:15px 14px; }     /* larger touch targets */
  .order-item-name{ font-size:17px; }
}
@media (prefers-reduced-motion: reduce){
  .order-pop, .order-pop-panel{ transition:none !important; transform:none !important; }
}

/* mobile: an order entry inside the open hamburger menu (top-of-page access) */
.nav-order-m{ display:none; }
@media (max-width:860px){ .nav.open .nav-order-m{ display:inline-flex; margin:8px 6vw 4px; } }

.call-btn .call-num{ letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.masthead-call{ margin-top:24px; text-transform:none; letter-spacing:.02em; font-size:14px; }
.masthead-call .call-num{ font-variant-numeric:tabular-nums; }
.masthead-call .dot{ opacity:.5; }
.foot [data-call]{ font-variant-numeric:tabular-nums; }
.foot [data-call]:hover{ color:var(--marigold); }

/* At ≤1100px the header would crowd with full links + lang + call + order, so
   the pending Order button is hidden (still on ≥1101px desktop + in the footer)
   and Call collapses to an icon — label preserved via aria-label. This keeps the
   confirmed Call present everywhere with a comfortable tap target and no overflow. */
@media (max-width:1100px){
  #orderBtn{ display:none; }
  .call-btn .call-num{ display:none; }
  .nav-right .call-btn{ padding:11px 13px; }
}
/* very small phones: reclaim header space so brand + lang + call + menu all
   sit inside the wrap with even margins (no edge-touching, no clipping). */
@media (max-width:430px){
  .nav .wrap{ gap:10px; }
  .nav .brand{ font-size:17px; }
  .nav-right{ gap:8px; }
}