/* ============================================================
   MENU PAGE — "Modern Tokyo Menu with Samurai Blue"
   Premium redesign. Scoped to .menu-page where needed; shared
   cart / floating-WhatsApp / bottom-bar styles apply site-wide.
   ============================================================ */

.menu-page { --toolbar-h: 132px; }
@media (max-width: 860px){ .menu-page { --toolbar-h: 120px; } }

/* keep the fixed header from covering hero content */
.menu-page main { padding-top: var(--site-header-height); }

/* ---------- MENU HERO ---------- */
.mhero{ position:relative; overflow:hidden; background:
  radial-gradient(120% 90% at 85% 10%, rgba(84,199,218,0.14), transparent 55%),
  linear-gradient(180deg,#0a0a0a, #0f0f10 60%, #0b0b0c);
  border-bottom:1px solid var(--border); }
.mhero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center; padding-block:clamp(2.2rem,5vw,4rem); }
@media (max-width:900px){ .mhero__grid{ grid-template-columns:1fr; } }
.mhero__eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--samurai-blue);
  font-size:.8rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.mhero__eyebrow .sakura{ width:16px; height:16px; }
.mhero h1{ font-size:clamp(2.4rem,5.5vw,4.2rem); margin-top:.6rem; line-height:1.02; }
.mhero h1 .cy{ color:var(--samurai-blue); }
.mhero__lead{ color:var(--text-muted); font-size:var(--fs-500); max-width:46ch; margin-top:1rem; }
.mhero__stats{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.mstat{ display:flex; flex-direction:column; gap:2px; padding:.7rem 1.1rem; border:1px solid var(--border);
  border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); min-width:96px; }
.mstat b{ font-family:var(--font-display); font-size:1.5rem; color:var(--text-strong); line-height:1; }
.mstat span{ font-size:.72rem; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; }
.mhero__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.mhero__allergy{ margin-top:1rem; }
.allergy-toggle{ display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-muted);
  border:1px dashed var(--border-strong); border-radius:var(--radius-pill); padding:.5rem .9rem; }
.allergy-toggle svg{ width:16px;height:16px;color:var(--samurai-blue); }
.allergy-panel{ margin-top:.7rem; max-width:60ch; font-size:.86rem; color:var(--text-muted);
  border-inline-start:3px solid var(--samurai-blue); background:rgba(84,199,218,.07);
  padding:.8rem 1rem; border-radius:10px; }
.allergy-panel[hidden]{ display:none; }

/* Hero food composition (layered real photos + flower watermark) */
.mhero__art{ position:relative; min-height:320px; }
@media (max-width:900px){ .mhero__art{ min-height:260px; } }
.mhero__art .watermark{ position:absolute; inset:0; margin:auto; width:min(78%,420px); color:rgba(84,199,218,.10);
  z-index:0; }
.mhero__art figure{ position:absolute; border-radius:20px; overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow-lg); }
.mhero__art img{ width:100%; height:100%; object-fit:cover; }
.mhero__art .f1{ inset-inline-end:0; top:6%; width:62%; aspect-ratio:4/5; z-index:2; }
.mhero__art .f2{ inset-inline-start:0; top:24%; width:46%; aspect-ratio:4/3; z-index:3;
  box-shadow:var(--glow-cyan), var(--shadow-lg); }
.mhero__art .f3{ inset-inline-end:12%; bottom:0; width:42%; aspect-ratio:1; z-index:1; }
@media (max-width:520px){ .mhero__art .f1{ width:70%; } .mhero__art .f2{ width:52%; } .mhero__art .f3{ display:none; } }

/* ---------- STICKY MENU TOOLBAR ---------- */
.mtoolbar{ position:sticky; top:calc(var(--site-header-height) - 1px); z-index:60;
  background:color-mix(in srgb, var(--samurai-ink) 92%, transparent); backdrop-filter:saturate(1.2) blur(14px);
  border-block:1px solid var(--border); transition:padding var(--dur) var(--ease), box-shadow var(--dur); }
.mtoolbar.stuck{ box-shadow:0 14px 30px rgba(0,0,0,.4); }
.mtoolbar__row1{ display:flex; align-items:center; gap:.7rem; padding-block:.7rem; }
.mtoolbar.stuck .mtoolbar__row1{ padding-block:.5rem; }
.msearch{ position:relative; flex:1; min-width:0; }
.msearch input{ width:100%; height:46px; padding:0 88px 0 44px; border-radius:var(--radius-pill);
  border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-size:.98rem; }
.msearch input:focus{ border-color:var(--samurai-blue); box-shadow:0 0 0 3px rgba(84,199,218,.18); }
.msearch .s-ico{ position:absolute; inset-inline-start:15px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--text-dim); }
.msearch .kbd{ position:absolute; inset-inline-end:44px; top:50%; transform:translateY(-50%); font-size:.7rem;
  color:var(--text-dim); border:1px solid var(--border); border-radius:6px; padding:1px 6px; }
.msearch .s-clear{ position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%); }
.tbtn{ display:inline-flex; align-items:center; gap:7px; height:46px; padding:0 15px; border-radius:14px;
  border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-weight:600; font-size:.9rem; white-space:nowrap; }
.tbtn:hover{ border-color:var(--samurai-blue); }
.tbtn svg{ width:18px; height:18px; }
.tbtn .count-pill{ background:var(--samurai-blue); color:var(--on-blue); border-radius:999px; font-size:.7rem; font-weight:800; padding:1px 7px; }
.tbtn--cart{ background:var(--grad-blue); color:var(--on-blue); border-color:transparent; }
.tbtn__hide-sm{ }
.mtoolbar__results{ font-size:.85rem; color:var(--text-dim); white-space:nowrap; }
@media (max-width:860px){ .tbtn__label{ display:none; } .msearch .kbd{ display:none; } .mtoolbar__results{ display:none; } .msearch input{ padding-inline-end:44px; } }

/* category rail */
.mrail{ position:relative; }
.mcats{ display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding:.35rem .2rem .7rem; scroll-snap-type:x proximity; }
.mcats::-webkit-scrollbar{ display:none; }
.mcat-chip{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding:.5rem .95rem;
  border-radius:var(--radius-pill); border:1.5px solid var(--border); background:var(--surface); color:var(--text);
  font-weight:600; font-size:.88rem; scroll-snap-align:start; min-height:40px; transition:all var(--dur); }
.mcat-chip .sakura{ width:14px; height:14px; opacity:0; transform:scale(.4); transition:all var(--dur); color:var(--on-blue); }
.mcat-chip[aria-pressed="true"]{ background:var(--grad-blue); color:var(--on-blue); border-color:transparent; }
.mcat-chip[aria-pressed="true"] .sakura{ opacity:1; transform:scale(1); }
.mrail__hint{ position:absolute; top:0; bottom:.7rem; width:44px; display:none; pointer-events:none; z-index:1; }
@media (max-width:860px){ .mrail__hint{ display:block; }
  .mrail__hint.right{ inset-inline-end:0; background:linear-gradient(270deg, var(--samurai-ink), transparent); }
  .mrail__hint.left{ inset-inline-start:0; background:linear-gradient(90deg, var(--samurai-ink), transparent); } }

/* ---------- FEATURED (Samurai Favourites) ---------- */
.favs{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:minmax(210px,auto); gap:1rem; }
.favs .fav{ position:relative; overflow:hidden; border-radius:20px; border:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.2rem; min-height:210px; isolation:isolate; }
.favs .fav img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--ease); }
.favs .fav::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(5,5,5,.05) 0%, rgba(5,5,5,.55) 55%, rgba(5,5,5,.92) 100%); }
.favs .fav:hover img{ transform:scale(1.06); }
.favs .fav.big{ grid-row:span 2; }
.favs .fav.wide{ grid-column:span 2; }
.fav__tag{ position:absolute; top:1rem; inset-inline-start:1rem; z-index:1; font-size:.68rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--on-blue); background:var(--samurai-blue);
  padding:4px 10px; border-radius:999px; }
.fav h3{ font-size:clamp(1.1rem,2.2vw,1.6rem); }
.fav .fav__meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:.5rem; }
.fav .fav__price{ font-family:var(--font-display); font-weight:700; color:var(--samurai-blue); }
.fav .fav__desc{ color:var(--text-on-dark-muted); font-size:.86rem; margin-top:.35rem; }
.fav .btn{ margin-top:.8rem; align-self:flex-start; }
@media (max-width:820px){ .favs{ grid-template-columns:1fr 1fr; }
  .favs .fav.big{ grid-column:span 2; grid-row:span 1; min-height:260px; } .favs .fav.wide{ grid-column:span 2; } }
@media (max-width:520px){ .favs{ grid-template-columns:1fr; } .favs .fav.big,.favs .fav.wide{ grid-column:span 1; } }

/* ---------- CATEGORY SECTIONS ---------- */
.mcategory{ padding-top:2.6rem; scroll-margin-top:calc(var(--site-header-height) + var(--toolbar-h) + 8px); }
.mcat-intro{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; margin-bottom:1.3rem; }
.mcat-intro__img{ width:74px; height:74px; border-radius:16px; overflow:hidden; border:1px solid var(--border); flex:none; }
.mcat-intro__img img{ width:100%; height:100%; object-fit:cover; }
.mcat-intro__txt h2{ display:flex; align-items:baseline; gap:.6rem; font-size:clamp(1.5rem,3vw,2.1rem); }
.mcat-intro__txt .cnt{ font-family:var(--font-body); font-weight:600; font-size:.95rem; color:var(--samurai-blue); }
.mcat-intro__txt p{ color:var(--text-muted); font-size:.9rem; margin-top:.2rem; max-width:60ch; }
.mcat-intro__rule{ height:1px; align-self:center; min-width:40px; background:var(--metal); opacity:.6; }
@media (max-width:600px){ .mcat-intro{ grid-template-columns:auto 1fr; } .mcat-intro__rule{ display:none; } .mcat-intro__img{ width:56px;height:56px; } }

/* alternating category ambience */
.mcategory:nth-of-type(even) .mcat-intro__txt h2{ }
.mcategory--paper{ position:relative; }
.mcategory--paper::before{ content:""; position:absolute; inset:0; background-image:var(--paper); background-size:22px 22px; opacity:.5; pointer-events:none; z-index:0; }
.mcategory--timber::before{ content:""; position:absolute; inset:0; background-image:var(--timber); pointer-events:none; z-index:0; }
.mcategory > *{ position:relative; z-index:1; }

/* ---------- MENU GRID + CARDS ---------- */
.mgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media (max-width:1200px){ .mgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .mgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .mgrid{ grid-template-columns:1fr; } }

.mcard{ position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg, #161616, #101010);
  border:1px solid var(--border); border-radius:18px; overflow:hidden; transition:transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur); }
.mcard:hover{ transform:translateY(-4px); border-color:rgba(84,199,218,.5); box-shadow:var(--glow-cyan); }
.mcard:focus-within{ border-color:var(--samurai-blue); }
.mcard__media{ position:relative; aspect-ratio:4/3; background:var(--surface); overflow:hidden; cursor:pointer; }
.mcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease), opacity .3s; }
.mcard:hover .mcard__media img{ transform:scale(1.07); }
.mcard__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(5,5,5,.5)); pointer-events:none; }
.mcard__media.loading img{ opacity:0; }
.mcard__skeleton{ position:absolute; inset:0; }
.mcard__fav{ position:absolute; top:10px; inset-inline-end:10px; z-index:2; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:rgba(5,5,5,.5); backdrop-filter:blur(6px); border:1px solid var(--border); color:#fff; }
.mcard__fav svg{ width:18px; height:18px; transition:transform var(--dur); }
.mcard__fav[aria-pressed="true"]{ color:var(--samurai-blue); border-color:var(--samurai-blue); }
.mcard__fav[aria-pressed="true"] svg{ fill:var(--samurai-blue); transform:scale(1.12); }
.mcard__reco{ position:absolute; top:10px; inset-inline-start:10px; z-index:2; font-size:.64rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--on-blue); background:var(--samurai-blue); padding:3px 8px; border-radius:999px; }
.mcard__view{ position:absolute; bottom:10px; inset-inline-start:10px; z-index:2; font-size:.72rem; font-weight:600;
  color:#fff; background:rgba(5,5,5,.5); backdrop-filter:blur(6px); border:1px solid var(--border); padding:5px 10px; border-radius:999px;
  opacity:0; transform:translateY(6px); transition:all var(--dur); }
.mcard__media:hover .mcard__view, .mcard:focus-within .mcard__view{ opacity:1; transform:none; }
.mcard__body{ display:flex; flex-direction:column; gap:.5rem; padding:.95rem 1rem 1rem; flex:1; }
.mcard__top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.mcard__name{ font-size:1.02rem; font-weight:600; color:var(--text-strong); }
.mcard__price{ font-family:var(--font-display); font-weight:700; color:var(--samurai-blue); white-space:nowrap; }
.mcard__desc{ font-size:.84rem; color:var(--text-muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mcard__tags{ display:flex; flex-wrap:wrap; gap:5px; }
.mtag{ display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--border); color:var(--text-dim); }
.mtag svg{ width:11px; height:11px; }
.mtag--veg{ color:var(--samurai-success); border-color:rgba(86,184,138,.4); }
.mtag--raw{ color:var(--samurai-blue); border-color:rgba(84,199,218,.4); }
.mtag--spicy{ color:var(--samurai-danger); border-color:rgba(215,104,104,.45); }
.mcard__foot{ margin-top:auto; padding-top:.4rem; }
.mcard__add{ width:100%; height:44px; border-radius:12px; background:rgba(84,199,218,.12); color:var(--samurai-blue);
  border:1.5px solid rgba(84,199,218,.4); font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:all var(--dur); }
.mcard__add:hover{ background:var(--grad-blue); color:var(--on-blue); border-color:transparent; }
.mcard__add svg{ width:18px; height:18px; }
/* add → stepper */
.mstepper{ display:none; height:44px; border-radius:12px; border:1.5px solid var(--samurai-blue); overflow:hidden; align-items:center; justify-content:space-between; background:rgba(84,199,218,.1); }
.mstepper button{ width:46px; height:100%; display:grid; place-items:center; color:var(--samurai-blue); }
.mstepper button:hover{ background:rgba(84,199,218,.2); }
.mstepper output{ font-weight:800; color:var(--text-strong); font-variant-numeric:tabular-nums; }
.mcard.in-cart .mcard__add{ display:none; }
.mcard.in-cart .mstepper{ display:flex; }
.mcard__soldout{ font-size:.8rem; font-weight:700; color:var(--samurai-danger); text-align:center; padding:.6rem; }
.mcard.out{ opacity:.6; }
.mcard.just-added{ animation:pop .4s var(--ease); }
@keyframes pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.03); box-shadow:var(--glow-cyan);} 100%{ transform:scale(1);} }

/* no results */
.mnoresults{ text-align:center; padding:3rem 1rem; display:grid; gap:.7rem; place-items:center; }
.mnoresults .sakura{ width:44px; height:44px; color:var(--text-dim); }
.mnoresults .btn-row{ justify-content:center; }

/* ---------- FILTER / SORT POPOVER + SHEET ---------- */
.sheet{ position:fixed; inset:0; z-index:var(--z-modal); visibility:hidden; }
.sheet[aria-hidden="false"]{ visibility:visible; }
.sheet__scrim{ position:absolute; inset:0; background:var(--overlay); opacity:0; transition:opacity var(--dur); }
.sheet[aria-hidden="false"] .sheet__scrim{ opacity:1; }
.sheet__panel{ position:absolute; inset-inline:0; bottom:0; background:var(--bg-2); border-top:1px solid var(--border);
  border-radius:22px 22px 0 0; padding:1.2rem 1.2rem calc(1.2rem + var(--safe-b)); transform:translateY(100%); transition:transform var(--dur) var(--ease);
  max-height:82vh; overflow-y:auto; }
.sheet[aria-hidden="false"] .sheet__panel{ transform:none; }
.sheet__grip{ width:44px; height:5px; border-radius:3px; background:var(--border-strong); margin:0 auto .9rem; }
/* desktop: render filters as an anchored popover */
@media (min-width:861px){
  .sheet#filter-sheet .sheet__scrim{ background:transparent; }
  .sheet#filter-sheet .sheet__panel{ position:absolute; inset:auto; top:calc(var(--site-header-height) + 64px);
    inset-inline-end:max(16px,calc((100vw - var(--container))/2 + 16px)); bottom:auto; width:min(420px,92vw);
    border:1px solid var(--border); border-radius:18px; transform:translateY(-8px); box-shadow:var(--shadow-lg); }
  .sheet#filter-sheet .sheet__grip{ display:none; }
}
.filter-group h4{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin:.9rem 0 .5rem; }
.filter-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.fchip{ padding:.45rem .85rem; border-radius:999px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-weight:600; font-size:.83rem; }
.fchip[aria-pressed="true"]{ background:var(--hover); border-color:var(--samurai-blue); color:var(--samurai-blue); }
.sheet__foot{ display:flex; gap:.6rem; margin-top:1.2rem; position:sticky; bottom:0; padding-top:.8rem; background:linear-gradient(180deg,transparent,var(--bg-2) 30%); }

/* ---------- QUICK VIEW ---------- */
.qv2{ position:fixed; inset:0; z-index:var(--z-modal); display:none; }
.qv2[aria-hidden="false"]{ display:block; }
.qv2__scrim{ position:absolute; inset:0; background:var(--overlay); }
.qv2__panel{ position:absolute; inset:0; margin:auto; width:min(920px,94vw); max-height:92vh; height:max-content;
  background:var(--bg-2); border:1px solid var(--border); border-radius:22px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr;
  box-shadow:var(--shadow-lg); }
.qv2__media{ position:relative; }
.qv2__media img{ width:100%; height:100%; object-fit:cover; min-height:320px; }
.qv2__body{ padding:1.4rem 1.5rem; overflow-y:auto; display:flex; flex-direction:column; gap:.7rem; }
.qv2__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.qv2__price{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--samurai-blue); }
.qv2__note input{ width:100%; height:44px; padding:0 12px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); }
.qv2 .opt-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.qv2 .opt-btn{ padding:.5rem .9rem; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-weight:600; }
.qv2 .opt-btn[aria-pressed="true"]{ background:var(--hover); border-color:var(--samurai-blue); color:var(--samurai-blue); }
.qv2__actions{ display:flex; gap:.6rem; margin-top:.3rem; }
.qv2__related{ display:flex; gap:.6rem; overflow-x:auto; scrollbar-width:none; }
.qv2__related img{ width:84px; height:64px; object-fit:cover; border-radius:10px; flex:none; cursor:pointer; }
@media (max-width:760px){
  .qv2__panel{ inset:auto 0 0 0; margin:0; width:100%; height:92vh; max-height:92vh; grid-template-columns:1fr;
    grid-template-rows:auto 1fr; border-radius:22px 22px 0 0; }
  .qv2__media img{ min-height:200px; max-height:34vh; }
}