:root{
  --olive:#726927;
  --olive-dark:#4a4419;
  --gold:#E9A901;
  --orange:#F2790B;
  --red:#CE2B37;
  --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;
}
a{ color:var(--olive); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--cream);
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ---------- HEADER ----------
   Mobile (default): one compact row — menu | logo | lang, logo smaller.
   Desktop (≥900px, below): restored to the original two-row layout. */
.topbar{
  position:sticky; top:0; z-index:30;
  background:var(--cream);
  padding:14px 18px 10px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
}
.topbar .lang-toggle{
  display:inline-flex; background:var(--white); border-radius:var(--r-pill);
  padding:3px; box-shadow:var(--shadow);
  justify-self:end;
}
.topbar .lang-toggle button{
  border:none; background:transparent; font-family:'Inter',sans-serif;
  font-weight:700; font-size:11px; padding:4px 11px; border-radius:14px;
  color:var(--ink-soft); cursor:pointer;
}
.topbar .lang-toggle button.active{ background:var(--gold); color:var(--white); }
.topbar-logo{ justify-self:center; }
.topbar-logo img{ height:34px; width:auto; display:block; }
.menu-toggle{
  justify-self:start;
  width:36px; height:36px; flex:0 0 auto;
  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:58px; z-index:29;
  background:var(--cream);
  padding:8px 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;}
.tabs-nav{ display:none; }

/* ---------- DESKTOP TABS NAV (mouse/trackpad — no touch swipe available) ----------
   Sits outside the 480px app column, in the side margins; position is synced to the
   tabs row via JS (positionTabsNav in script.js) since the row is sticky and moves
   with scroll. Only shown when there's enough side margin to actually fit the buttons. */
@media (hover:hover) and (pointer:fine) and (min-width:640px){
  .tabs-nav{
    display:flex; align-items:center; justify-content:center;
    position:fixed; transform:translateY(-50%);
    width:34px; height:34px; flex:0 0 auto;
    border-radius:50%; border:none;
    background:var(--white); color:var(--olive-dark);
    box-shadow:var(--shadow); cursor:pointer;
    z-index:50; opacity:1;
    transition:opacity .15s ease, box-shadow .15s ease;
  }
  .tabs-nav:hover{ box-shadow:0 10px 20px -8px rgba(74,68,25,.42); }
  .tabs-nav svg{ width:16px; height:16px; }
  .tabs-nav[disabled]{ opacity:0; pointer-events: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:16px; display:flex; flex-direction:column; }
.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;
  cursor:zoom-in;
}
.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;
}
.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-badge{
  position:absolute; top:7px; left:7px; z-index:1;
  background:var(--gold); color:var(--white);
  font-family:'Inter',sans-serif; font-weight:700; font-size:9.5px; letter-spacing:.04em;
  padding:3px 7px; border-radius:var(--r-pill);
  box-shadow:0 2px 6px rgba(74,68,25,.22);
}
.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 .allergens{
  font-size:10px; color:var(--ink-soft); line-height:1.35;
  margin:0 0 8px; font-style:italic; opacity:.85;
}
.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;}

/* ---------- OFFER CARDS (Oferte Speciale) ---------- */
.offers{ padding:2px 18px 0; display:flex; flex-direction:column; gap:14px; }
.offer-card{
  position:relative;
  background:var(--white);
  border-radius:var(--r-card);
  box-shadow:0 22px 40px -16px rgba(74,68,25,.42), 0 8px 18px -10px rgba(74,68,25,.26);
  border-left:4px solid var(--gold);
  overflow:hidden;
  opacity:0; transform:translateY(8px);
  animation:rise .4s ease forwards;
}
.offer-content{ position:relative; z-index:1; padding:18px 18px 16px; }
.offer-badge{
  display:inline-block;
  background:var(--red);
  color:var(--white);
  font-family:'Inter',sans-serif; font-weight:700; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-chip);
  margin:0 0 12px;
}
.offer-title{
  font-family:'PT Serif',serif; font-weight:700; font-style:italic;
  font-size:22px; color:var(--ink); margin:0 0 8px; line-height:1.15;
}
.offer-free{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--white);
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.03em;
  padding:6px 14px; border-radius:var(--r-pill);
  box-shadow:0 4px 10px -4px rgba(233,169,1,.6);
  margin:0 0 8px;
}
.offer-desc{
  font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.55;
  color:var(--ink); margin:0 0 12px;
}
.offer-meta{
  font-size:11.5px; color:var(--ink-soft); margin:0;
  padding-top:10px; border-top:1px solid var(--line);
}

/* ---- variant: offer card with photo background ---- */
.offer-card.has-bg{
  border-left:none;
  min-height:340px;
}
.offer-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:80% 58%;
}
.offer-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(20,18,8,.90) 0%, rgba(20,18,8,.74) 30%, rgba(20,18,8,.34) 55%, rgba(20,18,8,0) 78%);
}
.offer-card.has-bg .offer-badge{
  position:absolute; top:14px; left:14px; z-index:2; margin:0;
  box-shadow:0 4px 10px -3px rgba(0,0,0,.4);
}
.offer-card.has-bg .offer-free{
  position:absolute; top:14px; right:14px; z-index:2; margin:0;
  width:72px; height:72px; border-radius:50%;
  flex-direction:column; text-align:center;
  font-size:11px; font-weight:800; line-height:1.2;
  text-transform:uppercase; letter-spacing:0; padding:4px;
  box-shadow:0 8px 16px -5px rgba(0,0,0,.5), 0 0 0 3px rgba(255,255,255,.28) inset;
}
.offer-card.has-bg .offer-content{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  min-height:340px;
  max-width:66%;
  padding:56px 8px 18px 18px;
}
.offer-card.has-bg .offer-title{ color:var(--white); text-shadow:0 2px 12px rgba(0,0,0,.45); font-size:26px; }
.offer-card.has-bg .offer-desc{ color:rgba(255,255,255,.92); margin:0; }
.offer-card.has-bg .offer-meta{
  margin-top:auto;
  padding-top:12px;
  color:rgba(255,255,255,.68); border-top-color:rgba(255,255,255,.22);
}
.offer-desc b{ font-size:1.18em; font-weight:800; }
.offer-gratuit{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--gold);
}

/* ---- offer schedule (mini-table of time slots, e.g. Happy Hours) ---- */
.offer-schedule{ display:flex; flex-direction:column; gap:10px; margin:0 0 4px; }
.offer-slot{ display:flex; flex-direction:column; gap:2px; }
.offer-slot-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 8px; }
.offer-slot-time{
  font-family:'Inter',sans-serif; font-weight:800; font-size:13px;
  color:var(--olive-dark);
}
.offer-slot-days{
  font-family:'Inter',sans-serif; font-weight:600; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.03em;
  color:var(--ink-soft);
}
.offer-slot-deal{
  font-family:'Inter',sans-serif; font-size:12px; line-height:1.4;
  color:var(--ink);
}
.offer-slot-deal b{ font-weight:700; }
.offer-card.has-bg .offer-slot-time{ color:var(--gold); }
.offer-card.has-bg .offer-slot-days{ color:rgba(255,255,255,.55); }
.offer-card.has-bg .offer-slot-deal{ color:rgba(255,255,255,.88); }
.offer-card.has-bg .offer-slot-deal b{ color:#ffffff; }

/* ---------- 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 .allergens{ font-size:10.5px; color:var(--ink-soft); line-height:1.35; margin:2px 0 0; font-style:italic; opacity:.85; }
.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); } }

/* ---------- SUBSECTION LABEL (Băuturi groups) ---------- */
.sub-label{
  display:inline-block;
  margin:24px 18px 12px;
  padding:6px 16px;
  background:var(--olive-dark);
  color:var(--cream);
  font-family:'Inter',sans-serif; font-weight:700;
  font-size:12.5px; letter-spacing:.05em;
  text-transform:uppercase;
  border-radius:var(--r-chip);
  box-shadow:0 6px 14px -9px rgba(74,68,25,.55);
}
.list + .sub-label{ margin-top:14px; }

/* ---------- 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);
}
.allergen-note.thaw-note{
  margin-top:8px;
  background:var(--white);
  border:1px solid var(--tint);
}

/* ---------- BOTTOM CTA ---------- */
/* ---------- BOTTOM CTA ----------
   Mobile (default): a slim bar — just the address line + a small toggle.
   The 3 action cards stay hidden and only open, as an overlay above the
   bar, when the toggle is tapped (see .cta.open below). Desktop restores
   the cards to always-visible, in-flow (see the min-width:900px block). */
.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:10px 16px calc(6px + 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:13px; text-align:center;
  margin:0; color:var(--cream); opacity:.92;
}
.cta .dine b{ color:var(--gold); }

.cta-toggle{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:22px; margin:2px auto 0;
  background:rgba(253,250,240,.14); border:none; border-radius:11px; padding:0;
  color:var(--gold);
  cursor:pointer;
  animation:ctaPulse 2.2s ease-in-out infinite;
}
.cta.open .cta-toggle{ animation:none; background:rgba(253,250,240,.22); }
.cta-toggle svg{ width:17px; height:17px; stroke-width:3.2; transition:transform .25s ease; }
.cta.open .cta-toggle svg{ transform:rotate(180deg); }
@keyframes ctaPulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.12); }
}

.cta .delivery{
  display:flex; gap:8px;
  position:absolute; left:16px; right:16px; bottom:100%; z-index:1;
  margin-bottom:10px;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.98);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.cta.open .delivery{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
  pointer-events:auto;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.cta .delivery a{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:flex-start; gap:6px;
  background:var(--olive-dark);
  border:1px solid rgba(253,250,240,.16);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.5);
  color:var(--cream);
  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(--olive); }
.cta .delivery a span{ text-align:left; line-height:1.25; overflow-wrap:break-word; min-width:0; }
.cta .delivery svg{ width:28px; height:28px; flex:0 0 auto; }

/* ---------- 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;
  flex:0 1 auto;
  height:clamp(230px, 38vh, 330px);
  width:auto;
  max-width:calc(min(100vw, 480px) - 92px);
  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-photo-row{
  display:flex; align-items:center; justify-content:center;
  gap:6px;
  width:min(100vw, 480px);
}
.lightbox-nav{
  flex:0 0 36px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  border:none; background:rgba(253,250,240,.16);
  color:var(--cream);
  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-nav svg{ width:18px; height:18px; }
.lightbox.open .lightbox-nav{ opacity:1; transform:scale(1); }

/* ---------- LIGHTBOX INFO ---------- */
.lightbox-info{
  width:min(100vw, 480px);
  margin-top:19px;
  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 .own-note{
  font-family:'Inter',sans-serif; font-weight:600; font-size:11px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--gold);
  margin:0 0 16px;
}
.lightbox-info .ing{
  font-size:13px; color:rgba(255,255,255,.56); line-height:1.55;
  margin:0 0 16px;
}
.lightbox-info .allergens{
  font-size:11.5px; color:rgba(255,255,255,.44); line-height:1.5;
  font-style:italic;
  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);
  display:flex; flex-direction:column;
  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-social{ display:flex; gap:8px; flex-wrap:wrap; }
.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-foot{ margin-top:auto; padding-top:22px; font-size:11px; color:var(--ink-soft); text-align:center; }
footer.foot .foot-legal, .drawer-foot-legal{ margin:2px 0 0; font-size:10.5px; color:var(--ink-soft); text-align:center; }
.foot-legal a, .drawer-foot-legal a{ color:var(--ink-soft); text-decoration:underline; }
.foot-legal a:hover, .drawer-foot-legal a:hover{ color:var(--olive); }

/* ---------- PAGE-LEVEL FOOTER (copyright + legal links) ----------
   Mobile (default): .cta above is position:fixed, pinned to the viewport bottom,
   so this footer needs its own bottom padding to clear it — otherwise the fixed
   bar visually covers it. Desktop (≥900px, below): .cta is position:relative and
   this footer lives inside main's own internal scroll (moved there in the HTML,
   as main's last child) so it scrolls away with the content instead of sitting
   next to the always-visible .cta bar — no clearance needed there, so the
   min-width:900px block resets this back to a normal small footer padding. */
footer.foot{ text-align:center; padding:22px 18px calc(78px + env(safe-area-inset-bottom)); margin-top:auto; }
footer.foot p{ font-family:'Inter',sans-serif; font-size:10.5px; color:var(--ink-soft); margin:0; }

/* ---------- DESKTOP HERO BACKGROUND ----------
   Mobile is untouched — kicks in once there's enough width for the 480px
   app to float as a card instead of filling the screen edge-to-edge. */
@media (min-width:900px){
  body{
    display:flex; align-items:center; justify-content:center;
    min-height:100vh;
    background:#141310;
  }
  body::before{
    content:"";
    position:fixed; inset:-30px;
    z-index:-2;
    background-image:url(../img/hero-family.webp);
    background-size:cover;
    background-position:68% 42%;
    filter:blur(7px) saturate(1.05) brightness(.88);
    transform:scale(1.06);
  }
  body::after{
    content:"";
    position:fixed; inset:0;
    z-index:-1;
    background:linear-gradient(175deg, rgba(20,19,16,.42) 0%, rgba(20,19,16,.66) 62%, rgba(20,19,16,.78) 100%);
  }
  .app{
    width:100%;
    min-height:auto;
    height:min(860px, calc(100vh - 80px));
    border-radius:28px;
    box-shadow:0 44px 90px -24px rgba(20,19,10,.55), 0 12px 30px -12px rgba(20,19,10,.35);
    overflow:hidden;
  }
  .topbar{
    flex:0 0 auto;
    padding:14px 18px 6px;
    grid-template-columns:36px 1fr 36px;
    grid-template-areas:
      "toggle lang ."
      "logo logo logo";
    row-gap:18px;
  }
  .menu-toggle{ grid-area:toggle; }
  .topbar .lang-toggle{ grid-area:lang; justify-self:center; }
  .topbar .lang-toggle button{ font-size:12px; padding:6px 16px; border-radius:16px; }
  .topbar-logo{ grid-area:logo; }
  .topbar-logo img{ height:52px; }
  .tabs-wrap{ flex:0 0 auto; top:122px; padding:22px 0 4px; }
  /* main is the ONLY internally-scrolling region (as before) — footer.foot now
     lives inside it (moved there in the HTML) so copyright+links scroll away
     with the rest of the content instead of sitting static next to the
     always-pinned .cta bar below. */
  main{ flex:1; overflow-y:auto; padding-bottom:24px; display:flex; flex-direction:column; }
  footer.foot{ margin-top:auto; }
  footer.foot{ padding:22px 18px 18px; }
  .cta{
    /* relative (not fixed) so it sits flush at the bottom of the floating card
       itself, not the raw browser viewport — but still a positioning context
       for .delivery's absolute overlay, same collapsed form as on mobile. */
    position:relative; flex:0 0 auto;
    width:100%; max-width:none; margin:0;
    border-radius:0;
    box-shadow:none;
  }
}

/* ---------- SINGLE PRODUCT PAGE (produs.php — /meniu/<slug>/) ----------
   Same visual language as .card/.lightbox-info (tokens, gold price pill, photo tile)
   but laid out as normal page content instead of a fixed-position overlay. */
.product-page{ padding:14px 18px 16px; text-align:center; }
.product-page .breadcrumb{
  font-size:11px; color:var(--ink-soft); margin:0 0 14px; line-height:1.5;
}
.product-page .breadcrumb a{ color:var(--ink-soft); text-decoration:none; }
.product-page .breadcrumb a:hover{ text-decoration:underline; }
.product-photo-row{
  position:relative;
}
.product-nav-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,18,8,.32); color:var(--cream);
  text-decoration:none;
}
.product-nav-btn--prev{ left:10px; }
.product-nav-btn--next{ right:10px; }
.product-nav-btn svg{ width:18px; height:18px; }
.product-nav-btn:active{ background:rgba(20,18,8,.5); }
.product-photo{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--r-card);
  background:linear-gradient(160deg,var(--tint),var(--white));
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  margin-bottom:16px;
}
.product-photo img{
  max-width:82%; max-height:82%;
  object-fit:contain;
  filter:drop-shadow(0 10px 14px rgba(74,68,25,.28));
}
.product-page h1{
  font-family:'PT Serif',serif; font-weight:700;
  font-size:21px; margin:0 0 8px; color:var(--ink); line-height:1.2;
}
.product-page .ing{ font-size:14px; color:var(--ink-soft); line-height:1.5; margin:0 0 10px; }
.product-page .allergens{ font-size:12.5px; color:var(--ink-soft); font-style:italic; opacity:.85; margin:0 0 10px; }
.product-page .own-note{ font-size:12.5px; color:var(--olive-dark); font-weight:600; margin:0 0 14px; }
.product-page .row-bottom{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:22px; }
.product-page .weight{ font-size:13px; color:var(--ink-soft); font-weight:500; }
.product-page .price{
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
  background:var(--gold); color:var(--white);
  padding:7px 16px; border-radius:var(--r-pill);
}
.back-to-menu{ display:inline-block; font-size:13px; color:var(--ink-soft); text-decoration:none; }
.back-to-menu:hover{ text-decoration:underline; }