:root{
  --olive:#726927;
  --olive-dark:#4a4419;
  --gold:#E9A901;
  --orange:#F2790B;
  --cream:#FDFAF0;
  --tint:#F5EFDA;
  --ink:#3d3826;
  --ink-soft:#7a7360;
  --white:#ffffff;
  --line:#e8e0c8;
  --shadow: 0 10px 24px -12px rgba(74,68,25,.28);
  --r-card:18px;
  --r-tile:12px;
  --r-pill:20px;
  --r-chip:10px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
.app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--cream);
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ---------- HEADER ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  background:var(--cream);
  padding:14px 18px 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.topbar-row{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; margin-bottom:18px;
}
.topbar .lang-toggle{
  display:inline-flex; background:var(--white); border-radius:var(--r-pill);
  padding:3px; box-shadow:var(--shadow);
}
.topbar .lang-toggle button{
  border:none; background:transparent; font-family:'Inter',sans-serif;
  font-weight:700; font-size:12px; padding:6px 16px; border-radius:16px;
  color:var(--ink-soft); cursor:pointer;
}
.topbar .lang-toggle button.active{ background:var(--gold); color:var(--white); }
.topbar img{ height:52px; width:auto; display:block; }
.menu-toggle, .topbar-spacer{ width:36px; height:36px; flex:0 0 auto; }
.menu-toggle{
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:none; border-radius:50%;
  box-shadow:var(--shadow); color:var(--ink); cursor:pointer; padding:0;
}
.menu-toggle svg{ width:19px; height:19px; }

/* ---------- CATEGORY TABS ---------- */
.tabs-wrap{
  position:sticky; top:122px; z-index:29;
  background:var(--cream);
  padding:22px 0 4px;
}
.tabs{
  display:flex; gap:8px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding:0 18px 14px;
  /* subtle right-edge fade, always pinned to the viewport edge (not the scrolled content) so it
     reads consistently as "more to scroll" no matter how far the row has been scrolled */
  -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
  mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  flex:0 0 auto;
  scroll-snap-align:start;
  font-family:'Inter',sans-serif;
  font-size:13.5px; font-weight:600;
  letter-spacing:.1px;
  padding:10px 18px;
  border:none;
  border-radius:var(--r-chip);
  background:var(--olive-dark);
  color:var(--white);
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 6px 14px -9px rgba(74,68,25,.55);
  transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.tab:hover{ background:var(--olive); }
.tab.active{
  background:var(--white);
  color:var(--olive);
  box-shadow:var(--shadow);
  border-bottom:3px solid var(--orange);
}
.tab:active{ transform:scale(.97); }

/* ---------- CLAIM BANNER ---------- */
.claim{
  margin:2px 18px 16px;
  padding:10px 14px;
  background:var(--white);
  border-radius:var(--r-chip);
  display:flex; align-items:center; gap:10px;
  font-family:'PT Serif',serif;
  font-size:13.5px;
  color:var(--olive-dark);
  overflow:hidden;
}
.claim b{ color:var(--gold); font-weight:700; }
.claim .bars{ display:inline-flex; width:18px; height:12px; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px var(--line);}
.claim .bars span{flex:1;}
.claim .bars span:nth-child(1){background:#009246;}
.claim .bars span:nth-child(2){background:#fff;}
.claim .bars span:nth-child(3){background:#ce2b37;}
.claim-fixed{ flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.claim-sep{ flex:0 0 auto; width:1px; align-self:stretch; background:var(--line); }
.claim-ticker{
  flex:1; min-width:0; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.claim-ticker-track{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:'Inter',sans-serif; font-weight:500; font-size:12px; color:var(--ink-soft);
  animation:claimScroll 16s linear infinite;
}
.claim-dot{ color:var(--gold); font-size:9px; }
@keyframes claimScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- MAIN ---------- */
main{ flex:1; padding-bottom:112px; }
.panel{ display:none; }
.panel.active{ display:block; }

/* ---------- PHOTO GRID ---------- */
.grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  padding:0 18px;
}
.card{
  background:var(--white);
  border-radius:var(--r-card);
  padding:10px 10px 12px;
  box-shadow:var(--shadow);
  opacity:0; transform:translateY(8px);
  animation:rise .4s ease forwards;
  display:flex; flex-direction:column;
}
.card .photo{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--r-tile);
  background:linear-gradient(160deg,var(--tint),var(--white));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
  overflow:hidden;
  cursor:zoom-in;
}
.card .photo img{
  max-width:86%; max-height:86%;
  object-fit:contain;
  filter:drop-shadow(0 10px 14px rgba(74,68,25,.28));
}
.zoom-hint{
  position:absolute; top:7px; right:7px; z-index:1;
  width:23px; height:23px; border-radius:50%;
  background:rgba(253,250,240,.88);
  backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  color:var(--olive-dark);
  box-shadow:0 2px 6px rgba(74,68,25,.22);
  opacity:.88;
  pointer-events:none;
}
.zoom-hint svg{ width:12px; height:12px; display:block; }
.card h3{
  font-family:'PT Serif',serif; font-weight:700;
  font-size:14.5px; margin:0 0 3px; color:var(--ink);
  line-height:1.18;
}
.card .ing{
  font-size:11px; color:var(--ink-soft); line-height:1.4;
  margin:0 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}
.card .row-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.price{
  font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px;
  background:var(--gold); color:var(--white);
  padding:5px 11px; border-radius:var(--r-pill);
}
.weight{ font-size:10.5px; color:var(--ink-soft); font-weight:500;}

/* ---------- NO-PHOTO LIST (Junior) ---------- */
.list{ padding:0 18px; display:flex; flex-direction:column; gap:2px; }
.item-row{
  display:flex; align-items:center; gap:12px;
  padding:14px 4px;
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(8px);
  animation:rise .4s ease forwards;
}
.item-row .bar{ width:3px; align-self:stretch; background:var(--gold); border-radius:2px; flex:0 0 auto; opacity:.7;}
.item-row .body{ flex:1; min-width:0; }
.item-row h4{ font-family:'PT Serif',serif; font-weight:700; font-size:15.5px; margin:0 0 3px; color:var(--ink); }
.item-row .ing{ font-size:12px; color:var(--ink-soft); line-height:1.4; margin:0; }
.item-row .right{ text-align:right; flex:0 0 auto; }
.item-row .price{ padding:5px 11px; font-size:12.5px; }
.item-row .weight{ display:block; margin-top:4px; font-size:10.5px; }

@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* ---------- EMPTY CATEGORY ---------- */
.empty-state{
  margin:8px 18px 0;
  padding:32px 20px;
  background:var(--white);
  border:1px dashed var(--line);
  border-radius:var(--r-card);
  text-align:center;
  font-family:'PT Serif',serif;
  font-style:italic;
  font-size:14px;
  color:var(--ink-soft);
}

.allergen-note{
  margin:16px 18px 0;
  padding:12px 14px;
  background:var(--tint);
  border-radius:var(--r-chip);
  font-size:11.5px; line-height:1.5; color:var(--ink-soft);
}

/* ---------- BOTTOM CTA ---------- */
.cta{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:480px; margin:0 auto;
  background:var(--olive-dark);
  color:var(--cream);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-radius:var(--r-tile) var(--r-tile) 0 0;
  box-shadow:0 -10px 24px -10px rgba(0,0,0,.35);
}
.cta .dine{
  font-family:'PT Serif',serif; font-size:13.5px; text-align:center;
  margin:0 0 10px; color:var(--cream); opacity:.92;
}
.cta .dine b{ color:var(--gold); }
.cta .dine-link{ color:inherit; text-decoration:none; }
.cta .dine-link:active{ opacity:.7; }
.cta .delivery{ display:flex; gap:8px; }
.cta .delivery a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--cream);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  color:var(--olive-dark);
  font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px;
  padding:10px 6px; border-radius:var(--r-chip);
  text-decoration:none;
}
.cta .delivery a:active{ background:var(--tint); }
.brand-ico{ width:15px; height:15px; flex:0 0 auto; fill:currentColor; }
.brand-ico--wolt{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:4px; border:1.4px solid currentColor;
  font-family:'Inter',sans-serif; font-weight:800; font-size:10px; line-height:1;
}

/* ---------- LIGHTBOX (product photo zoom) ---------- */
body.lightbox-locked{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(20,18,8,.92);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.lightbox.open{
  opacity:1; visibility:visible;
  transition:opacity .25s ease, visibility 0s linear 0s;
}
.lightbox-inner{
  min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(64px + env(safe-area-inset-top)) 0 calc(90px + env(safe-area-inset-bottom));
}
.lightbox img{
  display:block;
  width:min(100vw, 480px);
  height:auto;
  max-height:58vh;
  object-fit:contain;
  will-change:transform;
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.45)) drop-shadow(0 6px 40px rgba(0,0,0,.3));
}
.lightbox-close{
  position:fixed; top:calc(14px + env(safe-area-inset-top)); right:14px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  border:none; background:rgba(253,250,240,.16);
  color:var(--cream);
  font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  opacity:0; transform:scale(.8);
  transition:opacity .2s ease .12s, transform .2s ease .12s;
}
.lightbox.open .lightbox-close{ opacity:1; transform:scale(1); }

/* ---------- LIGHTBOX INFO ---------- */
.lightbox-info{
  width:min(100vw, 480px);
  margin-top:22px;
  padding:0 26px calc(20px + env(safe-area-inset-bottom));
  text-align:center;
  opacity:0; transform:translateY(16px);
  transition:opacity .25s ease, transform .25s ease;
}
.lightbox.open .lightbox-info{
  opacity:1; transform:none;
  transition:opacity .3s ease .16s, transform .3s ease .16s;
}
.lightbox-info h3{
  font-family:'PT Serif',serif; font-weight:700;
  font-size:20px; margin:0 0 8px; color:#fff;
  line-height:1.25;
}
.lightbox-info .ing{
  font-size:13px; color:rgba(255,255,255,.56); line-height:1.55;
  margin:0 0 16px;
}
.lightbox-info .row-bottom{ position:relative; z-index:4; display:flex; align-items:center; justify-content:center; gap:14px; }
.lightbox-info .weight{ font-size:12px; color:rgba(255,255,255,.5); }
.review-nudge{
  position:fixed; left:0; right:0; bottom:0; z-index:3;
  max-width:480px; margin:0 auto;
  height:50%;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  text-align:center;
  padding:0 26px calc(48px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(20,18,8,.92) 0%, rgba(20,18,8,.7) 45%, rgba(20,18,8,0) 100%);
  opacity:0; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.lightbox.open .review-nudge{
  opacity:1; transform:none;
  transition:opacity .3s ease .18s, transform .3s ease .18s;
}
.review-nudge p{
  margin:0 0 10px;
  font-size:11px; line-height:1.5;
  color:rgba(255,255,255,.5);
}
.review-badge{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.22);
  text-decoration:none;
  color:rgba(255,255,255,.85);
  font-family:'Inter',sans-serif; font-weight:600; font-size:13px;
  transition:background .15s ease;
}
.review-badge:active{ background:rgba(255,255,255,.18); }

/* ---------- GENERAL MENU DRAWER ---------- */
body.drawer-locked{ overflow:hidden; }
.menu-drawer{
  position:fixed; inset:0; z-index:110;
  background:rgba(20,18,8,.55);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.menu-drawer.open{
  opacity:1; visibility:visible;
  transition:opacity .25s ease, visibility 0s linear 0s;
}
.menu-drawer-panel{
  position:absolute; top:0; left:0; bottom:0;
  width:min(84vw, 340px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--cream);
  box-shadow:16px 0 40px -18px rgba(0,0,0,.4);
  padding:calc(20px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.22,.7,.3,1);
}
.menu-drawer.open .menu-drawer-panel{ transform:translateX(0); }
.menu-drawer-close{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px;
  width:32px; height:32px; border-radius:50%;
  border:none; background:var(--tint); color:var(--ink);
  font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.drawer-logo{ display:block; margin:0 0 22px; }
.drawer-logo img{ height:40px; width:auto; display:block; }
.drawer-nav{ display:flex; flex-direction:column; gap:2px; }
.drawer-link{
  display:flex; align-items:center; gap:12px;
  padding:11px 8px; border-radius:var(--r-tile);
  text-decoration:none; color:var(--ink);
}
.drawer-link.active{ background:var(--tint); }
.drawer-link .drawer-icon{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:var(--tint); color:var(--olive-dark);
  display:flex; align-items:center; justify-content:center;
}
.drawer-link.active .drawer-icon{ background:var(--gold); color:#fff; }
.drawer-link .drawer-icon svg{ width:16px; height:16px; }
.drawer-link .drawer-txt{ display:flex; flex-direction:column; min-width:0; flex:1; }
.drawer-link .drawer-txt b{ font-size:13.5px; font-weight:700; }
.drawer-link .drawer-txt small{ font-size:11px; color:var(--ink-soft); margin-top:1px; }
.drawer-link.soon{ opacity:.6; }
.drawer-badge{
  font-size:9.5px; font-weight:700; color:var(--olive-dark);
  background:var(--tint); padding:3px 8px; border-radius:var(--r-chip);
  flex:0 0 auto;
}
.drawer-section{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.drawer-label{ font-size:11px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px; }
.drawer-delivery, .drawer-social{ display:flex; gap:8px; flex-wrap:wrap; }
.drawer-delivery a, .drawer-social a{
  flex:1 1 auto; text-align:center; min-width:0;
  background:var(--tint); color:var(--ink);
  font-weight:600; font-size:12px;
  padding:9px 6px; border-radius:var(--r-chip);
  text-decoration:none;
}
.drawer-delivery a{ display:flex; align-items:center; justify-content:center; gap:6px; }
.drawer-foot{ margin:22px 0 0; font-size:11px; color:var(--ink-soft); text-align:center; }