/* ============================================================
   alívia — dedicated pages (menu · reserve)
   loads after styles.css + app.css; reuses their tokens
   ============================================================ */

/* ---------- nav over a dark hero (subpages) ---------- */
.nav--over-dark .nav__brand,
.nav--over-dark .nav__links a{color:var(--cream)}
.nav--over-dark .nav__links a::after{background:var(--caramel)}
.nav--over-dark .nav__toggle span{background:var(--cream)}
.nav--over-dark.nav--scrolled .nav__brand{color:var(--olive-deep)}
.nav--over-dark.nav--scrolled .nav__links a{color:var(--ink)}
.nav--over-dark.nav--scrolled .nav__toggle span{background:var(--olive-deep)}
.nav--over-dark .brandmark .logo{background:var(--cream); color:var(--olive)}
.nav--over-dark .brandmark .wordmark{color:var(--cream)}
.nav--over-dark .brandmark .sub{color:rgba(251,250,242,.7)}
.nav--over-dark .icon-btn{background:transparent; color:var(--cream); border-color:rgba(251,250,242,.4)}
.nav--over-dark .lang-toggle{background:rgba(251,250,242,.12); border-color:rgba(251,250,242,.25)}
.nav--over-dark .lang-toggle button{color:rgba(251,250,242,.8)}
.nav--over-dark.nav--scrolled .brandmark .logo{background:var(--olive); color:var(--cream)}
.nav--over-dark.nav--scrolled .brandmark .wordmark{color:var(--olive-deep)}
.nav--over-dark.nav--scrolled .brandmark .sub{color:var(--muted)}
.nav--over-dark.nav--scrolled .icon-btn{background:#FFFDF7; color:var(--olive-deep); border-color:rgba(86,85,57,.22)}
.nav--over-dark.nav--scrolled .lang-toggle{background:rgba(86,85,57,.08); border-color:rgba(86,85,57,.18)}
.nav--over-dark.nav--scrolled .lang-toggle button{color:var(--muted)}

/* ---------- page hero ---------- */
.page-hero{position:relative; min-height:62vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:9rem var(--pad) 4.5rem; color:var(--cream); overflow:hidden}
.page-hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.page-hero__veil{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(26,20,15,.5),rgba(51,51,31,.72))}
.page-hero__inner{position:relative; z-index:2; max-width:54rem}
.page-hero .eyebrow{color:var(--caramel)}
.page-hero .display{color:var(--cream)}
.page-hero__sub{font-family:var(--serif); font-size:clamp(1.15rem,1.8vw,1.5rem); color:rgba(251,250,242,.85);
  margin:1.2rem auto 0; max-width:44ch; line-height:1.55}
.page-hero__meta{display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; margin-top:1.8rem;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(251,250,242,.8)}
.page-hero__meta span{display:inline-flex; align-items:center; gap:.5rem}
.page-hero__meta i{color:var(--caramel); font-style:normal}

/* ---------- sticky category bar (menu) — single-row pills ---------- */
.catbar{position:sticky; top:90px; z-index:40; display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto;
  padding:12px var(--pad); scrollbar-width:none; -ms-overflow-style:none;
  background:rgba(251,250,242,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(86,85,57,.16)}
.catbar::-webkit-scrollbar{display:none}
.catbar a{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:9px 17px; border-radius:999px; border:1.5px solid rgba(86,85,57,.26); background:#FFFDF7;
  color:var(--ink); font-family:var(--sans); font-weight:600; font-size:14px; text-transform:none; letter-spacing:0;
  transition:all .2s var(--ease)}
.catbar a svg{width:16px; height:16px; flex:0 0 auto}
.catbar a:hover{border-color:var(--terracotta); color:var(--terracotta); transform:translateY(-1px)}
.catbar a.active{background:var(--olive); color:var(--cream); border-color:transparent;
  box-shadow:0 7px 18px -7px rgba(86,85,57,.75), inset 0 1px 0 rgba(255,255,255,.15)}
.catbar a.active svg{color:var(--cream)}

/* ---------- menu page body ---------- */
.menupage{padding:clamp(2.5rem,5vw,4.5rem) var(--pad) 5rem; max-width:var(--maxw); margin:0 auto}
.menupage__group{font-family:var(--display); font-style:italic; font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--terracotta); text-align:center; margin:clamp(2rem,4vw,3.5rem) 0 1.5rem}
.mcat{scroll-margin-top:150px; padding:2.2rem 0; border-top:1px solid rgba(86,85,57,.14)}
.mcat:first-of-type{border-top:0}
.mcat__head{display:flex; align-items:baseline; gap:1rem; margin-bottom:1.4rem}
.mcat__head h2{font-family:var(--display); font-weight:600; font-size:clamp(2rem,4vw,3rem); color:var(--olive-deep); line-height:1}
.mcat__head span{font-family:var(--sans); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.mcat__items{display:grid; grid-template-columns:1fr 1fr; gap:.2rem 3.5rem}

/* photo band between food & drinks */
.photo-band{position:relative; height:clamp(220px,34vw,420px); margin:1rem 0; overflow:hidden; border-radius:16px}
.photo-band img{width:100%; height:100%; object-fit:cover}
.photo-band__cap{position:absolute; left:0; bottom:0; right:0; padding:2rem; z-index:2; color:var(--cream);
  background:linear-gradient(180deg,transparent,rgba(26,20,15,.6)); font-family:var(--display); font-style:italic;
  font-size:clamp(1.4rem,3vw,2.2rem)}

/* ---------- reserve page ---------- */
.respage{padding:clamp(3rem,6vw,6rem) var(--pad); max-width:var(--maxw); margin:0 auto}
.respage__intro{text-align:center; max-width:50rem; margin:0 auto clamp(2.5rem,5vw,4rem)}
.resgrid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:start}
.resgrid__floor{position:sticky; top:96px}
.floorcard{background:var(--sand); border-radius:18px; padding:clamp(1.2rem,3vw,2rem)}
.floorcard .floor__map{box-shadow:none; margin-top:1rem}
.floorcard__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.floorcard__head h3{font-family:var(--display); font-size:1.5rem; color:var(--olive-deep)}
.resform{background:var(--cream); border:1px solid rgba(86,85,57,.18); border-radius:18px;
  padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow)}
.resform > h3{font-family:var(--display); font-size:1.9rem; color:var(--olive-deep); margin-bottom:.3rem}
.resform > p.muted{font-family:var(--serif); color:var(--muted); margin:0 0 1.4rem; font-size:1.05rem}

/* hours / location strip */
.infostrip{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(86,85,57,.16);
  border:1px solid rgba(86,85,57,.16); border-radius:14px; overflow:hidden; margin-top:2.5rem}
.infostrip > div{background:var(--cream); padding:1.4rem 1.2rem; text-align:center}
.infostrip h4{font-family:var(--sans); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta); margin-bottom:.5rem}
.infostrip p{font-family:var(--serif); font-size:1.1rem; color:var(--ink); margin:0; line-height:1.4}

/* ---------- the space — arched gallery ---------- */
.space{padding:clamp(3.5rem,7vw,7rem) var(--pad); background:var(--sand)}
.space__head{text-align:center; margin-bottom:2.6rem}
.space__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; max-width:var(--maxw); margin:0 auto}
.space__cell{position:relative; overflow:hidden; aspect-ratio:3/4; border-radius:9999px 9999px 8px 8px}
.space__cell img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.space__cell:hover img{transform:scale(1.06)}
.space__cell--wide{aspect-ratio:auto; grid-column:span 3; border-radius:16px}
.space__cell--wide img{height:100%}

@media (max-width:900px){
  .resgrid{grid-template-columns:1fr; gap:2.5rem}
  .resgrid__floor{position:static}
  .mcat__items{grid-template-columns:1fr; gap:0}
  .space__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .infostrip{grid-template-columns:1fr}
  .space__grid{grid-template-columns:1fr}
  .space__cell{aspect-ratio:4/3; border-radius:9999px 9999px 8px 8px}
  .catbar{top:84px}
}

/* ============================================================
   MENU PAGE — dish-card design (ported from ordering platform)
   ============================================================ */
.menuhero{background:var(--cream-2); border-bottom:1px solid rgba(86,85,57,.14)}
.menuhero__in{max-width:var(--maxw); margin:0 auto; padding:calc(90px + clamp(1rem,3vw,2rem)) var(--pad) 1.8rem;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap}
.menuhero__t{flex:1 1 320px}
.menuhero h1{font-family:var(--display); font-weight:600; font-size:clamp(34px,5vw,56px); line-height:1.04;
  color:var(--olive-deep); margin:.4rem 0 0}
.menuhero__sub{font-family:var(--serif); color:var(--muted); font-size:1.18rem; margin:.5rem 0 0}
.menusearch{position:relative; flex:0 1 340px; min-width:240px}
.menusearch svg{position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--muted); width:19px; height:19px}
.menusearch input{width:100%; border:1.5px solid rgba(86,85,57,.28); background:#FFFDF7; color:var(--ink);
  border-radius:12px; padding:12px 14px 12px 42px; font-family:var(--sans); font-size:15px; outline:none;
  transition:border-color .2s, box-shadow .2s}
.menusearch input:focus{border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(139,85,48,.18)}

/* category head: icon tile + intro */
.mcat__head{align-items:flex-start; gap:16px}
.mcat__icon{width:50px; height:50px; border-radius:14px; background:#E7EBD6; color:var(--olive);
  display:grid; place-items:center; flex:0 0 auto; margin-top:4px}
.mcat__icon svg{width:26px; height:26px}
.mcat__intro{font-family:var(--display); font-style:italic; font-size:1.08rem; color:var(--muted); margin:.35rem 0 0; max-width:62ch; line-height:1.4}

/* grid + card */
.dishgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px}
.dish{display:flex; flex-direction:column; overflow:hidden; position:relative; background:#FFFDF7;
  border:1px solid rgba(86,85,57,.16); border-radius:18px;
  box-shadow:0 1px 4px rgba(56,46,24,.05), 0 6px 16px -10px rgba(56,46,24,.16);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
.dish:hover{transform:translateY(-3px); box-shadow:0 14px 32px -14px rgba(56,46,24,.32); border-color:rgba(139,85,48,.35)}
.dish-thumb{aspect-ratio:16/10; position:relative; overflow:hidden}
.dish-thumb .ph{position:absolute; inset:0; display:grid; place-items:center}
.dish-thumb .ph-tex{position:absolute; inset:0}
.dish-thumb .plate{width:34%; aspect-ratio:1; border-radius:50%; position:relative; color:#6E6354;
  display:grid; place-items:center;
  background:radial-gradient(circle at 38% 32%,#FFFEF8 0%,#F6F0DD 55%,#E7DDC4 100%);
  box-shadow:0 14px 26px -10px rgba(56,46,24,.36), inset 0 0 0 1px rgba(154,116,52,.28),
    inset 0 0 0 7px rgba(255,255,255,.55), inset 0 -6px 14px rgba(154,116,52,.13)}
.dish-thumb .plate svg{width:34px; height:34px}
.dish:hover .plate{transform:rotate(8deg) scale(1.04); transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.dish-body{padding:17px 18px 18px; display:flex; flex-direction:column; gap:9px; flex:1}
.dish-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.dish-name{font-family:var(--display); font-weight:600; font-size:21px; line-height:1.16; color:var(--olive-deep)}
.dish-price{font-family:var(--display); font-weight:700; font-size:16px; color:var(--olive-deep); white-space:nowrap}
.dish-price .cur{font-family:var(--sans); font-size:11px; font-weight:500; color:var(--muted); margin-inline-start:2px}
.dish-desc{font-size:13.5px; line-height:1.5; color:var(--muted); flex:1}
.dish-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px}
.dish-tags{display:flex; gap:8px; flex-wrap:wrap}
.tag-dot{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; color:var(--muted); text-transform:capitalize}
.tag-dot i{width:7px; height:7px; border-radius:50%; display:inline-block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.add-btn{width:38px; height:38px; border-radius:50%; border:none; background:var(--olive); color:#FCFBEF;
  display:grid; place-items:center; cursor:pointer; flex:0 0 auto;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s;
  box-shadow:0 6px 14px -5px rgba(86,85,57,.7), inset 0 1px 0 rgba(255,255,255,.2)}
.add-btn:hover{transform:scale(1.12) rotate(90deg); background:var(--olive-2)}
.add-btn:active{transform:scale(.92)}
.add-btn svg{width:20px; height:20px}
/* in-card quantity stepper (shown once a dish is in the order) */
.dish-add{display:inline-flex}
.dish-qty{display:inline-flex; align-items:center; gap:2px; background:var(--olive); border-radius:999px; padding:3px;
  box-shadow:0 6px 14px -5px rgba(86,85,57,.7)}
.dish-qty button{width:32px; height:32px; border-radius:50%; border:0; background:transparent; color:var(--cream);
  cursor:pointer; display:grid; place-items:center; transition:background .2s}
.dish-qty button:hover{background:rgba(255,255,255,.16)}
.dish-qty span{color:var(--cream); font-family:var(--sans); font-weight:600; font-size:.92rem; min-width:22px; text-align:center}
.dish-qty svg{width:18px; height:18px}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; padding:5px 11px;
  border-radius:999px; white-space:nowrap; background:#F1E6D3; color:var(--terracotta); align-self:flex-start}
.chip svg{width:12px; height:12px}
.menu-empty{text-align:center; padding:80px 0; color:var(--muted)}
.menu-empty .display{font-size:26px; margin-top:.5rem}
@media (max-width:640px){.dishgrid{grid-template-columns:1fr; gap:14px}}