/* Factory runtime guard: evita il flash di contenuti demo/default prima dell'applicazione dei dati cliente. */
html.wm-runtime-pending body {
  opacity: 0;
}

html.wm-runtime-ready body {
  opacity: 1;
  transition: opacity .08s ease-out;
}

:root{
  --bg:#07070a;
  --card:#0f1016;
  --text:#f6f7fb;
  --muted:#b9bfd0;
  --line:#23283a;
  --line-soft: rgba(255,255,255,0.07);
  --line-softer: rgba(255,255,255,0.05);
  --accent:#ffb703;

  /* sticky */
  --topbar-h: 84px;

  /* HERO spacing */
  --hero-min-h: 300px;
  --hero-pad: 14px;
  --hero-gap-badge: 10px;
  --hero-gap-title: 10px;
  --hero-gap-subcopy-to-actions: 16px;
  --hero-actions-bottom: 8px;

  /* sposta SU/GIU blocco contenuto hero */
  --hero-content-shift: 0px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  scroll-padding-top: calc(var(--topbar-h) + 16px);
}

a{ color:inherit; }

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 16px 16px;
}

.muted{ color: var(--muted); }

.card{
  background: var(--card);
  border:1px solid var(--line-soft);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}

.section-title{ margin: 0 0 8px; font-size: 18px; color: var(--accent); }
.footer{ padding: 18px 0; text-align:center; }

.contact-details{
  display:grid;
  gap: 12px;
  margin-top: 16px;
}

.contact-detail{
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.contact-detail:first-child{ border-top: 0; padding-top: 0; }

.contact-detail__label{
  display:block;
  margin-bottom: 4px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .02em;
}

.contact-detail__value{
  display:inline-block;
  color: var(--text);
  text-decoration:none;
  line-height: 1.55;
  overflow-wrap:anywhere;
}

.contact-detail__value:hover{ text-decoration: underline; }

/* ------------------------------
   Buttons / Inputs
------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  background: transparent;
  border:1px solid var(--line);
  color: var(--text);
  text-decoration:none;
  cursor:pointer;
}

.input, .select{
  width: min(340px, 100%);
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: #0f1117;
  color: var(--text);
}

.menu-toolbar .input{
  width: 100% !important;
  max-width: 100% !important;
}

#search.input{
  height: 48px;
  padding: 12px 14px;
  font-size: 16px;
  border-radius: 14px;
}

/* ------------------------------
   Header / Topbar
------------------------------ */
.topbar{
  position: sticky;
  top:0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(8,8,8,.96), rgba(18,13,10,.96));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(194,138,42,.24);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);

  min-height: var(--topbar-h);
  display:flex;
  align-items:center;
}

/* Topbar: diventa SOLIDA quando il menu toolbar è sticky (premium) */
.topbar.is-solid{
  background: linear-gradient(180deg, rgb(8,8,8), rgb(18,13,10));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(194,138,42,.28);
}

.topbar__inner{
  width: 100%;
  display: grid;
  grid-template-columns: 30px 1fr 58px;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  min-height: var(--topbar-h);
}

.hamburger{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:0;
  border:0;
  background: transparent;
  box-shadow:none;
  cursor:pointer;
  padding:0;
}

.hamburger span{
  display:block;
  width:14px;
  height:2px;
  background: #f3ead9;
  margin:0.9px 0;
  border-radius:2px;
}

.hamburger.compact{
  width: 28px;
  height: 28px;
  border-radius: 0;
}

.hamburger.compact span{
  width: 14px;
  height: 2px;
  border-radius: 2px;
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
}

.brand--center{
  justify-self: center;
  text-decoration: none;
}

.brand__logoImg{
  height: 68px;
  width: auto;
  display: block;
  object-fit: contain;
}

.brand__logoImg[hidden],
.site-footer__logo[hidden]{
  display:none !important;
}

.brand__text{
  display:inline-block;
  max-width: min(52vw, 320px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color: var(--accent);
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 750;
  letter-spacing: -0.03em;
}

.langSelect{
  justify-self: end;
  width: 58px;
  height: 32px;
  border-radius: 8px;
  font-size: 13px;
  padding: 0 5px;
  background: rgba(255,255,255,.08);
  color: #f3ead9;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
}

.langSelectNative{
  display:none !important;
}

.langPicker{
  justify-self:end;
  position:relative;
  width:58px;
  height:32px;
  z-index:120;
}

.langPicker__button{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#f3ead9;
  font:inherit;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.langPicker__button::after{
  content:"▾";
  display:inline-block;
  font-size:13px;
  line-height:1;
  margin-left:3px;
  color:rgba(243,234,217,.96);
  transform:translateY(-1px) scale(1.2);
  transform-origin:center;
}

.langPicker.is-open .langPicker__button::after{
  transform:translateY(-1px) rotate(180deg) scale(1.2);
}

.langPicker.is-open .langPicker__button{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom-color:rgba(255,255,255,.08);
}

.langPicker__menu{
  position:absolute;
  top:100%;
  right:0;
  width:100%;
  display:none;
  padding:3px;
  border-radius:0 0 8px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-top:0;
  background:rgba(14,14,14,.98);
  box-shadow:0 16px 34px rgba(0,0,0,.34);
}

.langPicker.is-open .langPicker__menu{
  display:grid;
  gap:1px;
}

.langPicker__option[aria-selected="true"]{
  display:none;
}

.langPicker__option{
  width:100%;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#f3ead9;
  font:inherit;
  font-size:12px;
  line-height:1;
  text-align:center;
  padding:7px 4px;
  cursor:pointer;
}

.langPicker__option:hover,
.langPicker__option[aria-selected="true"]{
  background:rgba(194,138,42,.22);
  color:#fff7e8;
}

/* ------------------------------
   Home layout bits (legacy)
------------------------------ */
.hero{ display:grid; gap:12px; }
.hero h1{ margin:0 0 6px; font-size: 34px; line-height: 1.12; letter-spacing: -0.2px; }
.hero p{ margin:0; }
.hero__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }

.grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ------------------------------
   ABOUT (chi-siamo) – micro CTA + spacing polish
-------------------------------- */
.page-about .grid{ gap: 16px; }
.page-about .about-microcta__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.page-about .about-microcta__text{
  font-weight:800;
  letter-spacing:.1px;
}

@media (min-width: 860px){
  .grid{ grid-template-columns: 1.2fr .8fr; }
}

.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

/* ------------------------------
   HERO DEFINITIVO (HOME)
------------------------------ */
.container > .card.hero{ margin-top: 12px; }
.container > .card.hero + div{ margin-top: 6px; }

.card.hero{
  padding: 0;
  overflow: hidden;
}

/* wrapper hero (immagine) */
.card.hero .hero-bg{
  position: relative;

  display: flex;
  align-items: stretch;
  justify-content: flex-start;

  height: auto;
  min-height: var(--hero-min-h);

  padding: var(--hero-pad);
  border-radius: 18px;
}

/* overlay sopra la foto */
.card.hero .hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.88) 100%
  );
  pointer-events:none;
  z-index:0;
}

/* badge TOP-LEFT */
.card.hero .hero-badge{
  position: absolute;
  top: var(--hero-pad);
  left: var(--hero-pad);
  z-index: 2;

  margin: 0 !important;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);

  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
}

/* contenuto centrato */
.card.hero .hero-content{
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  min-height: inherit;

  max-width: 340px;
  margin: 0 auto;
  text-align: center;

  /* spazio per non sovrapporre il badge */
  padding-top: 34px;

  /* sposta SU/GIU */
  transform: translateY(var(--hero-content-shift));
}

.card.hero .hero-content h1{
  margin: 0 0 var(--hero-gap-title) 0 !important;
  font-size: clamp(24px, 6.2vw, 32px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.3px;
  font-weight: 900;
  text-shadow: 0 2px 22px rgba(0,0,0,.85);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card.hero .hero-content p.muted{
  margin: 0 0 var(--hero-gap-subcopy-to-actions) 0 !important;
  color: rgba(255,255,255,.86);
  text-shadow: 0 1px 3px rgba(0,0,0,.30);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
}

/* bottoni hero: subito sotto titolo/testo, senza spingerli in basso */
.card.hero .hero__actions{
  margin-top: 12px !important;
  margin-bottom: 0 !important;

  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;

  justify-content: center !important;
  width: 100%;
}

/* ------------------------------
   HERO CTA – Premium Elegant (SOFT)
------------------------------ */
.card.hero .hero__actions .btn{
  padding: 10px 16px;
  border-radius: 14px;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    filter .15s ease,
    border-color .15s ease;
}

.card.hero .hero__actions .btn:active{
  transform: translateY(1px) scale(.99);
}

/* SECONDARY (Prenota / Contatti) */
.card.hero .hero__actions .btn:not(.btn--primary){
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.95);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 4px 14px rgba(0,0,0,.40);
}

.card.hero .hero__actions .btn:not(.btn--primary):hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.48);
  border-color: rgba(255,255,255,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 18px rgba(0,0,0,.50);
}

/* PRIMARY (Scopri il Menu) */
.card.hero .hero__actions .btn--primary{
  background: linear-gradient(180deg, #ffcc33, #ffb703);
  border: none !important;
  color: #1a1b1f;
  font-weight: 800;

  box-shadow:
    0 6px 18px rgba(255,183,3,.35),
    inset 0 1px 0 rgba(255,255,255,.45);
}

.card.hero .hero__actions .btn--primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 9px 24px rgba(255,183,3,.45),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* ------------------------------
   Menu toolbar + Tabs
------------------------------ */
.menu-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;

  position: sticky;
  top: calc(var(--topbar-h) + 8px);
  z-index: 90;
  padding: 10px;
  border-radius: 14px;
  background: rgba(15,16,22,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  margin-bottom: 14px;
}

.menu-toolbar__left{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  width: 100%;
}

/* Search con bottone "Allergeni" dentro */
.search-wrap{
  position: relative;
  width: 100%;
}

.search-wrap #menuSearch{ padding-right: 128px; }
.search-wrap #search{ padding-right: 128px; }

#menuSearch.input{
  height: 48px;
  padding: 12px 14px;
  font-size: 16px;
  border-radius: 14px;
}

.search-wrap .search-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  height: 34px;
  padding: 0 12px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,.92);

  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  white-space: nowrap;
}

.search-wrap .search-btn:active{ transform: translateY(-50%) scale(.98); }

.search-wrap .search-btn.is-active{
  border-color: rgba(255,183,3,0.55);
  background: rgba(255,183,3,0.14);
  color: rgba(255, 230, 140, 1);
}

.section-tabs{
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding: 0;
  overflow-x: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.section-tabs::-webkit-scrollbar{ display:none; }

.section-tabs .tab{
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.section-tabs .tab:active{ transform: scale(.98); }

.section-tabs .tab.is-active{
  background: rgba(255, 200, 0, .16);
  border-color: rgba(255, 200, 0, .30);
  color: rgba(255, 230, 140, 1);
}

/* ------------------------------
   MENU sections + items (FIX IMMAGINI GIGANTI)
------------------------------ */
.menu-section{
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}

.menu-section h2{
  margin: 18px 0 10px;
  font-size: 18px;
  color: var(--accent);
}

.menu-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 14px 0;
}

.menu-item:first-of-type{ border-top: none; }

.menu-item__img{
  width: 76px;
  height: 76px;
  border-radius: 16px;
  object-fit: cover;
  border:1px solid var(--line);
  background:#0f1117;
  flex: 0 0 auto;
}

.menu-item__main{
  flex: 1;
  min-width: 0;
}

.menu-item__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.menu-item__title{
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price{
  font-weight: 900;
  font-size: 16px;
  letter-spacing:.2px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.menu-item__desc{
  font-size: 14px;
  margin-top: 3px;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}

.featured{
  border: 1px solid rgba(255,183,3,.35);
  background: rgba(255,183,3,.06);
}

.featured h2{ margin-top: 0; }


.menu-empty-state{
  margin-top: 16px;
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.025);
  color: var(--muted);
  display: grid;
  gap: 6px;
}

.menu-empty-state strong{
  color: rgba(255,255,255,.9);
  font-size: 16px;
}

.menu-empty-state span{
  font-size: 13px;
  line-height: 1.5;
}

/* ------------------------------
   Drawer (menu laterale)
------------------------------ */

body.scroll-locked {
  overflow: hidden;
}

.drawer-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index: 1000;
}

.drawer-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.drawer{
  position:fixed;
  top:0;
  left:0;
  width: 280px;
  height: 100vh;
  background: var(--card);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform .22s ease;
  z-index: 1010;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.drawer.open{ transform: translateX(0); }

.drawer-link{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 900;
}

.drawer-group{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer-group-title{
  display: block;
  font-weight: 900;
  padding: 10px 12px;
  margin: 0;
  letter-spacing: .2px;
  text-decoration: none;
  cursor: pointer;
}

.drawer-sublink{
  padding: 8px 12px 8px 26px;
  text-decoration: none !important;
}

/* ------------------------------
   Drawer: NO highlight giallo su pagina corrente / click
------------------------------ */
.drawer-link,
.drawer-group-title,
.drawer-sublink{
  border: 1px solid transparent;
  background: transparent;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* niente “giallo” su hover/active/focus */
.drawer-link:hover,
.drawer-link:active,
.drawer-link:focus,
.drawer-link:focus-visible,
.drawer-group-title:hover,
.drawer-group-title:active,
.drawer-group-title:focus,
.drawer-group-title:focus-visible,
.drawer-sublink:hover,
.drawer-sublink:active,
.drawer-sublink:focus,
.drawer-sublink:focus-visible{
  border-color: transparent !important;
  background: transparent !important;
  outline: none !important;
}

/* nel caso tu abbia classi tipo is-active/active/current */
.drawer-link.is-active,
.drawer-group-title.is-active,
.drawer-sublink.is-active,
.drawer-link.active,
.drawer-group-title.active,
.drawer-sublink.active{
  border-color: transparent !important;
  background: transparent !important;
}

.drawer-social{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.social{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  font-size: 13px;
}

.social svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: .9;
}

.drawer-legal{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12.5px;
  opacity: .85;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* ------------------------------
   Bottom bar (mobile)
------------------------------ */
.bottom-bar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 80;

  display: flex;
  gap: 10px;

  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(15,16,22,.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .22s ease, opacity .22s ease;
  will-change: transform;
}

.bottom-bar a{
  flex: 1;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 10px;
  min-height: 44px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  color: var(--text);

  font-weight: 850;
  font-size: 15px;
  letter-spacing: .1px;

  white-space: nowrap;
}

.bottom-bar.is-hidden{
  transform: translateX(-50%) translateY(140%);
  opacity: 0;
  pointer-events: none;
}

.bottom-bar.is-visible{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

body.drawer-open .bottom-bar{
  transform: translateX(-50%) translateY(140%);
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 520px){
  :root{
    --topbar-h: 74px;
    --hero-min-h: 290px;
    --hero-actions-bottom: 6px;
  }

  .brand__logoImg{ height: 61px; }
  .container{ padding-top: 18px; }
}

@media (max-width: 820px){
  body{ padding-bottom: 0; }
  .site-footer{
    margin-bottom: 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

/* ================================
   ALLERGENI
================================ */
.allergen-info-panel{
  margin: 12px 0 18px;
  padding: 16px;
  border: 1px solid rgba(255,183,3,0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,183,3,0.12), rgba(255,255,255,0.035));
  box-shadow: 0 16px 36px rgba(0,0,0,0.18);
}

.allergen-info-panel[hidden]{
  display: none;
}

.allergen-info-panel__head{
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}

.allergen-info-panel__head strong{
  font-size: 16px;
  letter-spacing: -0.01em;
}

.allergen-info-panel__head span,
.allergen-info-panel__note,
.allergen-info-panel__hint{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.allergen-legend-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
}

.allergen-legend-chip,
.allergen-row .allergen{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 9px;
  border-radius: 999px;

  font-size: 12px;
  line-height: 1;
  white-space: nowrap;

  border: 1px solid rgba(255,183,3,0.40);
  background: rgba(255,183,3,0.12);
  color: var(--text);
}

.allergen-info-panel__note,
.allergen-info-panel__hint{
  margin: 8px 0 0;
}

.allergen-info-panel__note{
  color: var(--text);
}

.allergen-info-panel__hint{
  font-size: 12px;
}

.allergen-row{
  margin-top: 6px;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  display: none;
}

body.show-allergens .allergen-row{
  display: flex;
}

/* Fail-safe: drawer and allergen rows must never be visually open together. */
body.drawer-open.show-allergens .allergen-info-panel,
body.drawer-open.show-allergens .allergen-row{
  display: none;
}

/* tooltip */
.allergen-row .allergen[data-tip]{
  position: relative;
  cursor: help;
}
.allergen-row .allergen[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 240px;

  padding: 8px 10px;
  border-radius: 10px;

  background: rgba(15,16,22,0.96);
  border: 1px solid var(--line);
  color: var(--text);

  font-size: 12px;
  line-height: 1.2;

  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: 180ms ease;
  z-index: 50;
}
.allergen-row .allergen[data-tip]:hover::after{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 620px){
  .allergen-info-panel{
    padding: 14px;
    border-radius: 16px;
  }

  .allergen-legend-grid{
    gap: 6px;
  }

  .allergen-legend-chip,
  .allergen-row .allergen{
    font-size: 11.5px;
    padding: 5px 8px;
  }
}

/* ------------------------------
   Site Footer (BrushDream-like)
------------------------------ */
.site-footer{
  margin-top: 22px;
  padding: 26px 0 28px;
  background: rgba(0,0,0,.42);
  border-top: 1px solid rgba(255,255,255,.06);
}

.site-footer__inner{
  padding-top: 0;
}

.site-footer__grid{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 860px){
  .site-footer__grid{
    grid-template-columns: 1.2fr .9fr 1fr;
    align-items: start;
  }
}

.site-footer__brand{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,0.010);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

.site-footer__logoRow{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}

.site-footer__logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

.site-footer__name{
  font-weight: 900;
  letter-spacing: .2px;
}

.site-footer__desc{
  margin: 0;
  line-height: 1.6;
  font-size: 14px;
}

.site-footer__title{
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 10px;
}

.site-footer__nav{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,0.010);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

.site-footer__link,
.site-footer__sublink{
  display:block;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.site-footer__link:hover,
.site-footer__sublink:hover{
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.site-footer__link--strong{
  font-weight: 900;
}

.site-footer__group{
  margin: 6px 0 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.site-footer__sublink{
  padding-left: 22px;
  color: rgba(255,255,255,.86);
}

.site-footer__social{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,0.010);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

.site-footer__chips{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.site-footer__chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  text-decoration:none;
  font-size: 13px;
}

.site-footer__chip:hover{
  border-color: rgba(255,183,3,0.35);
  background: rgba(255,183,3,0.06);
}

.site-footer__bottom{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.site-footer__legalPanel{
  max-width: 920px;
  margin: 0 auto 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.012);
}

.site-footer__legalPanel[hidden]{
  display: none !important;
}

.site-footer__legalTitle{
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .2px;
}

.site-footer__legalRows{
  display: flex;
  justify-content: center;
  gap: 7px 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  line-height: 1.45;
}

.site-footer__legalRow{
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
}

.site-footer__legalLabel{
  color: var(--muted);
  font-weight: 800;
}

.site-footer__legalValue{
  color: var(--text);
  font-weight: 650;
}

.site-footer__legalNote{
  margin: 8px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
}

.site-footer__legalNote[hidden]{
  display: none !important;
}

.site-footer__legal{
  text-align: center;
  font-size: 12.5px;
}

/* se vuoi nascondere il blocco brand nel footer */
.site-footer__brand{ display:none !important; }

@media (min-width: 860px){
  .site-footer__grid{ grid-template-columns: 1fr 1fr; }
}

/* micro-premium: ring + feel più “clickabile” */
.card.hero .hero__actions .btn{
  min-height: 44px;
}

.card.hero .hero__actions .btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,183,3,.22),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 6px 18px rgba(0,0,0,.50);
}

.card.hero .hero__actions .btn--primary{
  letter-spacing: .2px;
}

/* =========================================
   DRAWER: rimuovi highlight giallo (focus/active)
   ========================================= */
.drawer a,
.drawer-link,
.drawer-group-title,
.drawer-sublink{
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* niente bordo/sfondo "attivo" */
.drawer-link,
.drawer-group-title,
.drawer-sublink{
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* rimuove il bordo che resta dopo il tap (focus) */
.drawer-link:focus,
.drawer-link:focus-visible,
.drawer-group-title:focus,
.drawer-group-title:focus-visible,
.drawer-sublink:focus,
.drawer-sublink:focus-visible{
  outline: none !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* rimuove anche l'effetto "premuto" */
.drawer-link:active,
.drawer-group-title:active,
.drawer-sublink:active{
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================
   FOOTER/NAV: niente giallo su link attivi/visitati/focus
   ========================================= */

/* link footer sempre colore normale */
.site-footer a,
.site-footer a:visited{
  color: rgba(255,255,255,.90) !important;
}

/* footer: annulla anche eventuali style INLINE (highlight pagina corrente) */
.site-footer .site-footer__link,
.site-footer .site-footer__sublink{
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* se qualche JS mette classi di "pagina corrente", annullale */
.site-footer a.is-active,
.site-footer a.active,
.site-footer a.current,
.site-footer a[aria-current="page"]{
  color: rgba(255,255,255,.90) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* niente "tap highlight" e niente outline giallo */
.site-footer a{
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.site-footer a:focus,
.site-footer a:focus-visible,
.site-footer a:active{
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================
   FOOTER: niente evidenziazione "pagina corrente"
   (no giallo, no bordo, no background)
   ========================================= */

.site-footer__nav a,
.site-footer__nav a:visited{
  color: rgba(255,255,255,.90) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* se il JS mette aria-current o classi "active" */
.site-footer__nav a[aria-current="page"],
.site-footer__nav a.is-active,
.site-footer__nav a.active,
.site-footer__nav a.current{
  color: rgba(255,255,255,.90) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* evita anche focus/active (mobile tap) */
.site-footer__nav a:focus,
.site-footer__nav a:focus-visible,
.site-footer__nav a:active{
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  background: transparent !important;
}

.site-footer__nav a{
  -webkit-tap-highlight-color: transparent;
}

/* =========================================
   DRAWER: niente evidenziazione gialla "pagina corrente"
   (no testo giallo, no bordo, no background)
   ========================================= */

.drawer-nav a,
.drawer-nav a:visited{
  color: rgba(255,255,255,.90) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* se JS mette aria-current o classi */
.drawer-nav a[aria-current="page"],
.drawer-nav a.is-active,
.drawer-nav a.active,
.drawer-nav a.current{
  color: rgba(255,255,255,.90) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* tap/focus su mobile (evita flash giallo) */
.drawer-nav a:focus,
.drawer-nav a:focus-visible,
.drawer-nav a:active{
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  background: transparent !important;
}

.drawer-nav a{
  -webkit-tap-highlight-color: transparent;
}

/* =========================================
   DRAWER: niente testo giallo "pagina corrente"
   ========================================= */

.drawer a,
.drawer a:visited,
.drawer-link,
.drawer-group-title,
.drawer-sublink{
  color: rgba(255,255,255,.90) !important;
}

/* se nav.js o HTML mettono la pagina corrente */
.drawer a[aria-current="page"],
.drawer a.is-active,
.drawer a.active,
.drawer a.current,
.drawer-link.is-active,
.drawer-link.active,
.drawer-link.current,
.drawer-sublink.is-active,
.drawer-sublink.active,
.drawer-sublink.current{
  color: rgba(255,255,255,.90) !important;
}

/* anche su hover/active/focus (mobile tap) */
.drawer a:hover,
.drawer a:active,
.drawer a:focus,
.drawer a:focus-visible{
  color: rgba(255,255,255,.90) !important;
}

/* === MENU: Sticky toolbar premium (quando attacca) === */
.menu-toolbar{
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.menu-toolbar.is-sticky{
  /* SOLIDA: niente contenuto che traspare */
  background: rgb(10,11,15);
  border-color: rgba(255,255,255,0.14);

  /* Effetto premium */
  box-shadow:
    0 18px 45px rgba(0,0,0,0.60),
    0 1px 0 rgba(255,255,255,0.08) inset;

  /* Se vuoi “solida vera”, disattiva il blur in sticky */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Tabs più contrastate */
.menu-toolbar.is-sticky .section-tabs .tab{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}

/* Search più “solida” */
.menu-toolbar.is-sticky input[type="search"]{
  background: rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.16);
}

/* === MENU: Compact mode quando è sticky === */
.menu-toolbar.is-compact{
  padding: 8px;
  gap: 8px;
}

.menu-toolbar.is-compact input[type="search"]{
  height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
}

.menu-toolbar.is-compact .search-wrap .search-btn{
  height: 30px;
  padding: 0 10px;
  border-radius: 11px;
  font-size: 12px;
}

.menu-toolbar.is-compact .section-tabs{
  gap: 8px;
  margin-top: 8px;
}

.menu-toolbar.is-compact .section-tabs .tab{
  padding: 8px 12px;
  font-size: 13px;
}



/* C5-16.C3: Privacy & Cookie page */
.legal-page{
  padding-bottom: 20px;
}

.legal-page__hero,
.legal-page__card{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.legal-page__lead{
  max-width: 760px;
  line-height: 1.7;
}

.legal-details{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.legal-detail{
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.018);
}

.legal-detail__label{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}

.legal-detail__value{
  color: var(--text);
  font-weight: 700;
  word-break: break-word;
}

.legal-detail a.legal-detail__value{
  color: var(--accent);
  text-decoration: none;
}

@media (min-width: 760px){
  .legal-details{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html[data-theme="light"] .legal-detail{
  background: rgba(255,255,255,.62);
  border-color: var(--line-soft);
}

html[data-theme="light"] .legal-detail__value{
  color: var(--text);
}

/* =========================================
   THEME: Light mode runtime palette
   C5-16.B3 - restaurant-premium-v1
   ========================================= */
html[data-theme="light"]{
  color-scheme: light;
  --bg:#f6f2e9;
  --card:#fffdf8;
  --text:#171717;
  --muted:#5f636b;
  --line:#ded7ca;
  --line-soft: rgba(23,23,23,0.12);
  --line-softer: rgba(23,23,23,0.08);
}

html[data-theme="light"],
html[data-theme="light"] body{
  background: var(--bg);
  color: var(--text);
}

html[data-theme="light"] .container{ color: var(--text); }
html[data-theme="light"] .muted{ color: var(--muted); }

html[data-theme="light"] .card,
html[data-theme="light"] .menu-section,
html[data-theme="light"] .contact-detail,
html[data-theme="light"] .site-footer__nav,
html[data-theme="light"] .site-footer__social,
html[data-theme="light"] .site-footer__brand{
  background: var(--card);
  border-color: var(--line-soft);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(23,23,23,.08);
}

html[data-theme="light"] .section-title,
html[data-theme="light"] .site-footer__title,
html[data-theme="light"] .contact-detail__label,
html[data-theme="light"] .menu-section h2{
  color: var(--accent);
}

html[data-theme="light"] .topbar{
  background: rgba(255,253,248,.88);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px rgba(23,23,23,.06);
}

html[data-theme="light"] .topbar.is-solid{
  background: rgb(255,253,248);
  border-bottom-color: var(--line-soft);
}

html[data-theme="light"] .hamburger{
  background: rgba(23,23,23,.035);
  border-color: var(--line-soft);
}

html[data-theme="light"] .hamburger span{ background: var(--text); }
html[data-theme="light"] .brand__text{ color: var(--accent); }

html[data-theme="light"] .langSelect,
html[data-theme="light"] .input,
html[data-theme="light"] .select,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{
  background: #fffefa;
  color: var(--text);
  border-color: var(--line-soft);
}

html[data-theme="light"] .btn,
html[data-theme="light"] .social,
html[data-theme="light"] .site-footer__chip{
  background: rgba(255,255,255,.78);
  border-color: var(--line-soft);
  color: var(--text);
}

html[data-theme="light"] .btn:hover,
html[data-theme="light"] .social:hover,
html[data-theme="light"] .site-footer__chip:hover{
  background: rgba(255,183,3,.10);
  border-color: rgba(255,183,3,.34);
}

html[data-theme="light"] .btn--primary,
html[data-theme="light"] .card.hero .hero__actions .btn--primary{
  background: linear-gradient(180deg, #ffd65c, var(--accent));
  color: #171717;
  box-shadow: 0 8px 20px rgba(255,183,3,.24), inset 0 1px 0 rgba(255,255,255,.55);
}

html[data-theme="light"] .card.hero{
  background: var(--card);
  border-color: var(--line-soft);
}

html[data-theme="light"] .card.hero .hero-badge,
html[data-theme="light"] .badge{
  background: rgba(255,255,255,.76);
  border-color: rgba(255,255,255,.40);
  color: #1f2328;
}

html[data-theme="light"] .card.hero .hero-content h1,
html[data-theme="light"] .card.hero .hero-content p.muted,
html[data-theme="light"] .card.hero .hero__actions .btn:not(.btn--primary){
  color: rgba(255,255,255,.96);
}

html[data-theme="light"] .card.hero .hero__actions .btn:not(.btn--primary){
  background: rgba(20,20,24,.52);
  border-color: rgba(255,255,255,.18);
}


/* C5-16.B3.1: Light theme contrast fix for Home content cards.
   Keep the hero overlay text white on the photo, but restore dark readable text
   inside the editorial cards nested below the hero image. */
html[data-theme="light"] .card.hero > div:not(.hero-bg) .card,
html[data-theme="light"] .card.hero > div:not(.hero-bg) .card p,
html[data-theme="light"] .card.hero > div:not(.hero-bg) .card li,
html[data-theme="light"] .card.hero > div:not(.hero-bg) .card .muted{
  color: var(--muted) !important;
  text-shadow: none !important;
}

html[data-theme="light"] .card.hero > div:not(.hero-bg) .card .section-title{
  color: var(--accent) !important;
  text-shadow: none !important;
}

html[data-theme="light"] .menu-toolbar{
  background: rgba(255,253,248,.90);
  border-color: var(--line-soft);
  box-shadow: 0 12px 30px rgba(23,23,23,.08);
}

html[data-theme="light"] .menu-toolbar.is-sticky{
  background: rgb(255,253,248);
  border-color: var(--line-soft);
  box-shadow: 0 18px 38px rgba(23,23,23,.12), 0 1px 0 rgba(255,255,255,.80) inset;
}

html[data-theme="light"] .menu-toolbar.is-sticky .section-tabs .tab,
html[data-theme="light"] .section-tabs .tab{
  background: rgba(255,255,255,.82);
  border-color: var(--line-soft);
  color: var(--text);
}

html[data-theme="light"] .section-tabs .tab.is-active{
  background: rgba(255,183,3,.18);
  border-color: rgba(255,183,3,.42);
  color: #2a2300;
}

html[data-theme="light"] .search-wrap .search-btn{
  background: rgba(246,242,233,.92);
  border-color: var(--line-soft);
  color: var(--text);
}

html[data-theme="light"] .search-wrap .search-btn.is-active{
  background: rgba(255,183,3,.18);
  border-color: rgba(255,183,3,.48);
  color: #2a2300;
}

html[data-theme="light"] .menu-item{
  border-top-color: var(--line-softer);
}

html[data-theme="light"] .menu-item__img{
  background: #fffefa;
  border-color: var(--line-soft);
}

html[data-theme="light"] .tag{
  background: rgba(23,23,23,.035);
  border-color: var(--line-soft);
  color: var(--muted);
}

html[data-theme="light"] .featured{
  border-color: rgba(255,183,3,.42);
  background: rgba(255,183,3,.10);
}

html[data-theme="light"] .menu-empty-state{
  background: rgba(255,255,255,.72);
  border-color: rgba(23,23,23,.16);
  color: var(--muted);
}

html[data-theme="light"] .menu-empty-state strong{
  color: var(--text);
}

html[data-theme="light"] .allergen-row .allergen{
  background: rgba(255,183,3,.14);
  border-color: rgba(255,183,3,.42);
  color: var(--text);
}

html[data-theme="light"] .allergen-row .allergen[data-tip]::after{
  background: #fffefa;
  border-color: var(--line-soft);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(23,23,23,.14);
}

html[data-theme="light"] .drawer{
  background: #fffdf8;
  border-right-color: var(--line-soft);
  color: var(--text);
}

html[data-theme="light"] .drawer-backdrop{ background: rgba(23,23,23,.36); }
html[data-theme="light"] .drawer-group,
html[data-theme="light"] .drawer-social,
html[data-theme="light"] .drawer-legal{ border-color: var(--line-soft); }

html[data-theme="light"] .drawer a,
html[data-theme="light"] .drawer a:visited,
html[data-theme="light"] .drawer-link,
html[data-theme="light"] .drawer-group-title,
html[data-theme="light"] .drawer-sublink,
html[data-theme="light"] .drawer-nav a,
html[data-theme="light"] .drawer-nav a:visited{
  color: var(--text) !important;
}

html[data-theme="light"] .site-footer{
  background: rgba(239,232,219,.72);
  border-top-color: var(--line-soft);
}

html[data-theme="light"] .site-footer a,
html[data-theme="light"] .site-footer a:visited,
html[data-theme="light"] .site-footer__nav a,
html[data-theme="light"] .site-footer__nav a:visited,
html[data-theme="light"] .site-footer__sublink{
  color: var(--text) !important;
}

html[data-theme="light"] .site-footer__group,
html[data-theme="light"] .site-footer__bottom{
  border-color: var(--line-soft);
}

html[data-theme="light"] .site-footer__legalPanel{
  background: rgba(255,255,255,.54);
  border-color: var(--line-soft);
}

html[data-theme="light"] .site-footer__legalValue{
  color: var(--text);
}

html[data-theme="light"] .site-footer__logo{
  background: #fffefa;
  border-color: var(--line-soft);
}

html[data-theme="light"] .bottom-bar{
  background: rgba(255,253,248,.94);
  border-color: var(--line-soft);
  box-shadow: 0 18px 40px rgba(23,23,23,.14);
}

html[data-theme="light"] .bottom-bar a{
  background: rgba(23,23,23,.035);
  border-color: var(--line-soft);
  color: var(--text);
}

html[data-theme="light"] .bottom-bar a.primary,
html[data-theme="light"] .bottom-bar a:hover{
  background: rgba(255,183,3,.14);
  border-color: rgba(255,183,3,.36);
}

html[data-theme="light"] hr{ border-top-color: var(--line-soft) !important; }


/* C5-16.C6: advanced menu options kept visually lightweight */
.menu-info-panel{
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.menu-info-panel__title{
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.menu-info-panel__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.menu-info-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.menu-options{
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.menu-options__label{
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.menu-options__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.menu-option-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.menu-option-chip strong{
  color: var(--accent);
  font-size: 12px;
}

.menu-item__img--empty{
  display: block;
  background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}

html[data-theme="light"] .menu-info-panel,
html[data-theme="light"] .menu-info-chip,
html[data-theme="light"] .menu-option-chip{
  background: rgba(255,255,255,.68);
  border-color: var(--line-soft);
}

html[data-theme="light"] .menu-option-chip{
  color: var(--text);
}

html[data-theme="light"] .menu-item__img--empty{
  background: linear-gradient(135deg, rgba(23,23,23,.045), rgba(23,23,23,.02));
}

@media (max-width: 520px){
  .menu-item__head{
    align-items: flex-start;
  }
  .menu-option-chip,
  .menu-info-chip{
    border-radius: 14px;
  }
}


/* --------------------------------------------------
   V3 HOME ONLY — micro-polish da base menu-pieno
   Obiettivo: home più reale e commerciale senza redesign globale.
-------------------------------------------------- */




.home-page .home-sections{
  background: linear-gradient(180deg, rgba(255,183,3,.035), rgba(255,255,255,0));
}

.home-page .home-card{
  border-color: rgba(255,255,255,.075);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}

.home-page .home-card .section-title{
  font-size: 19px;
  letter-spacing: -.01em;
}

.home-page .home-card ul li{ margin: 5px 0; }

.home-page .home-quick-actions{
  margin-top: 14px;
}

.home-page .home-quick-actions .btn{
  flex: 1 1 118px;
}



/* --------------------------------------------------
   Mille Sapori Pro v21 - Home photo gallery
   Scope: solo Home, nessuna modifica a menu/contatti/about.
-------------------------------------------------- */
.home-page .home-gallery{
  display:grid;
  gap:10px;
  margin:0;
}

.home-page .home-gallery__pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.home-page .home-gallery__item{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  box-shadow:0 18px 34px rgba(0,0,0,.22);
}

.home-page .home-gallery__item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:4 / 3;
  filter:saturate(.98) contrast(1.03);
}

.home-page .home-gallery__item--wide img{
  aspect-ratio:16 / 9;
}

.home-page .home-gallery__item::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18)),
    radial-gradient(circle at 50% 0%, rgba(255,183,3,.10), transparent 52%);
}

@media (max-width:520px){
  .home-page .home-gallery{
    gap:9px;
  }

  .home-page .home-gallery__pair{
    gap:9px;
  }

  .home-page .home-gallery__item{
    border-radius:16px;
  }
}


/* --------------------------------------------------
   Mille Sapori Pro v28 - Home typography polish
   Scope: solo testi/sezioni Home; hero, header e gallery invariati.
-------------------------------------------------- */
.home-page .home-card{
  padding: 20px 18px;
}

.home-page .home-kicker{
  margin: 0 0 7px;
  color: rgba(255, 210, 106, .78);
  font-size: 11px;
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.home-page .home-title{
  margin: 0 0 10px !important;
  color: #f1bd32;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px !important;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-shadow: 0 8px 24px rgba(255,183,3,.14);
}

.home-page .home-copy{
  margin: 0;
  line-height: 1.72;
  color: rgba(238,238,238,.82);
  font-size: 15.5px;
}

.home-page .home-feature-list{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  line-height: 1.55;
}

.home-page .home-feature-list li{
  position: relative;
  padding-left: 18px;
}

.home-page .home-feature-list li::before{
  content:"";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd76a, #b9851b);
  box-shadow: 0 0 12px rgba(255,183,3,.28);
}

.home-page .home-card__actions{
  margin-top: 14px;
}

.home-page .home-link{
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.025);
  font-weight: 750;
  letter-spacing: .01em;
}

.home-page .home-link:hover{
  border-color: rgba(255,183,3,.38);
  background: rgba(255,183,3,.06);
}

@media (max-width:520px){
  .home-page .home-card{
    padding: 18px 16px;
  }

  .home-page .home-title{
    font-size: 21px !important;
  }

  .home-page .home-copy{
    font-size: 15px;
  }
}


/* --------------------------------------------------
   Mille Sapori Pro v29 - Home section titles centered
   Scope: solo titoli sezioni Home; hero/header/footer/contenuti invariati.
-------------------------------------------------- */
.home-page .home-title{
  text-align:center;
}


/* --------------------------------------------------
   Mille Sapori Pro v30 - Home title spacing
   Scope: solo spazi tra etichette, titoli e descrizioni Home.
-------------------------------------------------- */
.home-page .home-kicker{
  margin-bottom: 12px;
}

.home-page .home-title{
  margin-bottom: 16px !important;
}


/* --------------------------------------------------
   Mille Sapori Pro v31 - Home title spacing plus
   Scope: solo ulteriore spazio tra etichette, titoli e descrizioni Home.
-------------------------------------------------- */
.home-page .home-kicker{
  margin-bottom: 16px;
}

.home-page .home-title{
  margin-bottom: 20px !important;
}


/* --------------------------------------------------
   Mille Sapori Pro v36 - Identità line break
   Scope: permette il ritorno a capo nel testo Home.
-------------------------------------------------- */
.home-page .home-copy{
  white-space: pre-line;
}


/* --------------------------------------------------
   Mille Sapori Pro v38 - Hero badge + light polish
   Scope: solo badge hero e leggibilità centrale immagine.
-------------------------------------------------- */
.card.hero .hero-bg::after{
  background:
    radial-gradient(ellipse at 50% 47%, rgba(255,255,255,.11) 0%, rgba(255,255,255,.055) 28%, rgba(0,0,0,0) 55%),
    linear-gradient(
      180deg,
      rgba(0,0,0,.16) 0%,
      rgba(0,0,0,.45) 45%,
      rgba(0,0,0,.84) 100%
    );
}

/* --------------------------------------------------
   Mille Sapori Pro v39 - Hero title font only
   Scope: cambia solo il font del titolo hero "Mille Sapori"
-------------------------------------------------- */
.card.hero .hero-content h1{
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.02em;
}


/* --------------------------------------------------
   Mille Sapori Pro v40 - Hero title premium robust
   Scope: solo font/presenza del titolo hero "Mille Sapori".
-------------------------------------------------- */
.card.hero .hero-content h1{
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 6.8vw, 34px) !important;
  font-weight: 800;
  letter-spacing: .01em;
  color: #ffffff;
  text-shadow:
    0 2px 5px rgba(0,0,0,.85),
    0 12px 28px rgba(0,0,0,.65),
    0 0 18px rgba(255,183,3,.13);
}


/* --------------------------------------------------
   Mille Sapori Pro v44 - Allergeni visibili nel menu
   Scope: rimuove la dipendenza dal tasto Allergeni e mostra gli allergeni direttamente sotto ogni prodotto.
-------------------------------------------------- */
.search-wrap #menuSearch,
.search-wrap #search{
  padding-right: 14px;
}

.allergen-row{
  display: flex;
  margin-top: 7px;
  margin-bottom: 7px;
}

.allergen-row:empty{
  display: none;
}

.allergen-row__label{
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
  color: rgba(255, 210, 106, .92);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .02em;
  white-space: nowrap;
}

body.drawer-open.show-allergens .allergen-row{
  display: flex;
}




/* --------------------------------------------------
   Mille Sapori Pro v49 - Menu toolbar statica
   Scope: rimuove effetto sticky/compact dalla tabella search+tab delle pagine menu.
-------------------------------------------------- */
.menu-toolbar{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

.menu-toolbar.is-sticky,
.menu-toolbar.is-compact{
  padding: 10px;
  gap: 10px;
  background: rgba(15,16,22,.85);
  border-color: var(--line);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.menu-toolbar.is-compact input[type="search"]{
  height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
}

.menu-toolbar.is-compact .section-tabs{
  gap: 10px;
  margin-top: 0;
}

.menu-toolbar.is-compact .section-tabs .tab{
  padding: 10px 14px;
  font-size: 14px;
}




/* --------------------------------------------------
   Mille Sapori Pro v54 - Allergeni come tag
   Scope: mantiene "Allergeni:" bianco e rende i chip allergeni coerenti con i tag prodotto.
-------------------------------------------------- */
.allergen-row__label{
  color: rgba(255,255,255,.94) !important;
}

.allergen-row .allergen{
  color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}


/* --------------------------------------------------
   Mille Sapori Pro v55 - Informazioni menu sopra la toolbar
   Scope: posiziona il pannello Informazioni menu prima di ricerca/tab.
-------------------------------------------------- */
#menuInfoTop .menu-info-panel{
  margin-bottom: 14px;
}


/* --------------------------------------------------
   Mille Sapori Pro v61 - Cleanup finale menu/demo
   Scope: tab menu più compatti su mobile dopo aggiunta Vini.
-------------------------------------------------- */
@media (max-width: 520px){
  .section-tabs{
    gap: 8px;
  }

  .section-tabs .tab{
    padding: 9px 12px;
    font-size: 13px;
  }
}


/* --------------------------------------------------
   Mille Sapori Pro v63 - Pulizia menu/testi
   Scope: titoli prodotto leggibili e tag coerenti.
-------------------------------------------------- */
.menu-item__head{
  align-items: flex-start;
}

.menu-item__title{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.16;
}

.tag{
  text-transform: none !important;
}


/* --------------------------------------------------
   Mille Sapori Pro v66 - Header language switch fix
   Scope: selettore lingua compatto e stabile in IT/EN/DE.
-------------------------------------------------- */
.topbar__inner{
  grid-template-columns: 30px 1fr 64px;
}

.langSelect,
.langPicker{
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  flex: 0 0 64px;
}

.langPicker__button,
.langPicker__option{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1;
}

.langPicker__button{
  font-size: 12px;
  letter-spacing: -0.01em;
}

.langPicker__button::after{
  flex: 0 0 auto;
  margin-left: 2px;
}

.langPicker__option{
  font-size: 12px;
}