/* ==========================================================================
   Impianto "app": intestazione fissa, vetrina, righe prodotto, scheda dal basso
   Caricato dopo style.css e themes.css: le regole qui dentro hanno l'ultima
   parola sull'aspetto della pagina pubblica.
   ========================================================================== */

:root{ --caps:none; --ph:88px; --red-ink:#fff; --amber-ink:#191612; }

/* Colore del testo sopra i colori scelti dall'utente: viene calcolato dal
   gestionale in base alla luminosità, così un colore chiaro non si porta
   dietro scritte bianche illeggibili. */
.btn--primary,.cattab.is-active,.chip--warn input:checked + span{color:var(--red-ink)}
.badge,.chip input:checked + span,.btn--filter[aria-expanded="true"]{color:var(--amber-ink)}

/* ---------------------------------------------------------- intestazione -- */
/* Senza la barra in basso, la chiamata resta nell'intestazione anche da
   telefono: è l'unico posto da cui si può fare. Con la barra in basso
   (Grafica › Preset) la chiamata sta lì, e da telefono l'intestazione tiene
   solo tema e ordine, come nei menu nati prima di HopLab. */
@media (max-width:860px){
  html[data-tabbar] .hdr__act a.ico[href^="tel:"]{display:none}
}
.hdr{height:var(--hdr-h)}
.hdr__in{gap:10px}

/* ----------------------------------------------------------- vetrina ------ */
/* Payoff, carosello e banner vivono in un unico blocco con sfondo proprio,
   così si staccano nettamente dal menu che segue. */
.show{
  background:
    radial-gradient(1100px 420px at 50% -30%,color-mix(in srgb,var(--red) 22%,transparent),transparent 70%),
    var(--bg-2);
  border-bottom:1px solid var(--line);
  padding:var(--sp-show-y,26px) 0 calc(var(--sp-show-y,26px) + 4px);
}
.show__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

.show__head{text-align:center;max-width:720px;margin:0 auto 22px}
.show__kicker{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--amber);
}
.show__title{
  font-family:var(--font-d);font-size:clamp(1.9rem,6vw,3rem);line-height:1.05;
  letter-spacing:-.02em;margin-top:8px;text-transform:var(--caps);
}
.show__sub{color:var(--fg-2);font-size:.95rem;margin-top:8px}
.show__status{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:.76rem;font-weight:700;padding:6px 15px;border-radius:100px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--fg-2);
}
.show__status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fg-3)}
.show__status.is-open::before{background:var(--wa);box-shadow:0 0 0 4px rgba(37,211,102,.2)}
.show__status.is-closed::before{background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.2)}

/* il carosello resta smussato anche da telefono */
.show .car{border-radius:var(--r-lg);box-shadow:var(--shadow)}
@media (max-width:640px){.show .car{border-radius:var(--r)}}
.show .bnr:last-child{margin-bottom:0}
.show .bnr{margin:16px 0 0}

/* --------------------------------------------------------- barra di ricerca -- */
/* La barra sta dentro <main>, che ha già il suo margine laterale: sommandosi a
   quello della barra, da telefono la ricerca restava stretta e non arrivava ai
   bordi. Qui la barra torna a tutta larghezza e il suo contenuto si allinea al
   resto della pagina. */
.toolbar{margin-inline:calc(var(--gut) * -1)}
.toolbar__row{padding-inline:var(--gut)}

/* --------------------------------------------------------- macrocategorie -- */
.grp{padding-top:var(--sp-grp-top,40px)}
.grp__h{
  padding-bottom:14px;border-bottom:0;margin-bottom:4px;text-align:center;
}
.grp__h h2{
  font-family:var(--font-d);font-size:clamp(1.6rem,5vw,2.4rem);
  letter-spacing:-.02em;text-transform:var(--caps);
}
.grp__h p{color:var(--fg-3);margin:8px auto 0;font-size:.92rem;max-width:560px}

/* ------------------------------------------------------------ fisarmoniche -- */
.cat{
  padding-top:0;margin-top:10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;scroll-margin-top:calc(var(--hdr-h) + 96px);
}
.acc__h{
  padding:var(--sp-acc-h,15px) 18px;gap:12px;display:flex;align-items:center;cursor:pointer;
}
.acc__h h3{
  flex:1;font-size:1.02rem;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:10px;min-width:0;
}
.acc__h h3 .cat__n{flex:none}
.acc__ico{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--fg-3);flex:none;
  transition:transform .25s var(--ease),background .2s,color .2s;
}
.acc[open] .acc__ico{transform:rotate(180deg)}
/* La descrizione della categoria ha bisogno di respiro sopra e sotto,
   altrimenti resta incollata al titolo e al primo prodotto. */
.acc__d{color:var(--fg-3);font-size:.86rem;line-height:1.45;
  margin:var(--sp-catdesc-top,14px) 18px var(--sp-catdesc-bottom,14px)}
.acc__body{padding:0 18px 8px}
.acc__d + .acc__body .prod:first-child{border-top:1px solid var(--line)}

/* ------------------------------------------------------- righe di prodotto -- */
.grid{display:block}

.prod{
  display:flex;align-items:flex-start;gap:12px;
  padding:var(--sp-prod-y,14px) 0;border-top:1px solid var(--line);position:relative;
}
.prod:first-child{border-top:0}
.prod.is-hidden{display:none}

/* zona che apre la scheda: foto + testo */
.prod__main{
  flex:1;min-width:0;display:flex;gap:13px;align-items:flex-start;
  text-align:left;background:none;border:0;padding:0;color:inherit;cursor:pointer;
}
.prod__ph{
  flex:none;width:var(--ph);height:var(--ph);border-radius:var(--ph-r,18px);overflow:hidden;
  background:var(--bg-3);position:relative;
}
.prod__ph img{width:100%;height:100%;object-fit:cover;display:block}
.prod__ph--ph{display:grid;place-items:center}
.prod__ph--ph span{
  font-family:var(--font-d);font-size:1.5rem;color:var(--fg-3);opacity:.5;
  text-transform:uppercase;letter-spacing:.04em;
}
.prod--noimg .prod__ph{display:none}

.prod__b{flex:1;min-width:0;padding-top:1px}
.prod__t{
  font-size:.98rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.prod__d{
  font-size:.85rem;color:var(--fg-2);margin-top:4px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:var(--prod-lines,2);line-clamp:var(--prod-lines,2);
  -webkit-box-orient:vertical;overflow:hidden;
}
.prod__price{
  display:flex;align-items:baseline;gap:6px;margin-top:7px;
  font-family:var(--font-d);font-size:1.12rem;font-weight:700;color:var(--amber);
}
.prod__price small{
  font-family:var(--font);font-size:.68rem;font-weight:600;color:var(--fg-3);
  text-transform:uppercase;letter-spacing:.05em;
}
.prod__from{font-family:var(--font);font-size:.68rem;color:var(--fg-3);font-weight:600}
.prod .allg{margin-top:7px}

/* riga tecnica delle bevande: stile, produttore, gradazione */
.prod__spec{
  display:block;font-size:.76rem;color:var(--fg-3);margin-top:3px;
  letter-spacing:.02em;text-transform:uppercase;font-weight:600;
}

/* I loghi di birre e bibite non vanno ritagliati come una foto di piatto:
   vanno mostrati interi dentro il riquadro. */
.prod__ph--logo{background:var(--bg-3);padding:8px}
.prod__ph--logo img{object-fit:contain}

/* scelta del formato: apre la scheda dove i centilitri stanno comodi */
.prod__pick{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--red) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--red) 32%,transparent);
  color:var(--red);transition:.16s;
}
.prod__pick:hover{background:var(--red);color:var(--red-ink)}
.prod__pick svg{width:19px;height:19px;stroke-width:2.4}

/* colonna dei comandi */
.prod__act{flex:none;display:flex;flex-direction:column;justify-content:center;
  align-self:stretch;padding-left:2px}

/* Pulsante di aggiunta.
   A riposo è un cerchio nel colore principale, in tinta tenue: si vede che è
   da premere senza urlare. Quando ci sono pezzi nell'ordine diventa pieno e
   il testo prende il colore calcolato per quel fondo, mai bianco a caso. */
.qty:not(.has){
  background:color-mix(in srgb,var(--red) 10%,transparent);
  border-color:color-mix(in srgb,var(--red) 32%,transparent);
}
.qty:not(.has) .qty__b.add{color:var(--red)}
.qty:not(.has) .qty__b.add:hover{background:var(--red);color:var(--red-ink)}
.qty.has{background:var(--red);border-color:var(--red)}
.qty.has .qty__b,.qty.has .qty__n{color:var(--red-ink)}
.qty.has .qty__b:hover{background:rgba(0,0,0,.2)}

/* pastiglia video */
.prod__video{
  position:absolute;left:6px;bottom:6px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff;
  border:1px solid rgba(255,255,255,.3);
}
.prod__video svg{width:13px;height:13px;margin-left:1px}

@media (max-width:400px){
  :root{--ph:74px}
  .prod__t{font-size:.94rem}
}

/* --------------------------------------------------- scheda dal basso ----- */
.sheet{
  position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;
  justify-content:center;pointer-events:none;
}
.sheet[hidden]{display:none!important}
/* Il velo è posizionato: senza uno z-index esplicito verrebbe disegnato SOPRA
   la scheda, che è un normale blocco di flusso, e la coprirebbe di scuro. */
.sheet__in{
  position:relative;z-index:1;overflow:hidden;
  width:min(560px,100%);max-height:92vh;background:var(--bg-2);color:var(--fg);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;pointer-events:auto;
  transform:translateY(100%);transition:transform .3s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.sheet.is-on .sheet__in{transform:none}
@media (min-width:700px){
  .sheet{align-items:center}
  .sheet__in{border-radius:var(--r-lg);max-height:88vh}
  .sheet__in{transform:translateY(24px) scale(.97);opacity:0;transition:.26s var(--ease)}
  .sheet.is-on .sheet__in{transform:none;opacity:1}
}
.sheet__grab{
  width:100%;padding:10px 0 4px;display:grid;place-items:center;flex:none;touch-action:none;
}
.sheet__grab::before{
  content:"";width:44px;height:5px;border-radius:100px;background:var(--line-2);
}
@media (min-width:700px){.sheet__grab{display:none}}
/* La chiusura sta dentro la scheda, non sullo schermo: prima finiva in cima
   alla pagina perché mancava un riferimento di posizionamento. */
.sheet__x{
  position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;line-height:1;font-weight:400;
  background:var(--bg-2);color:var(--fg);border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
}
.sheet__x:hover{background:var(--bg-4)}
.sheet__b{overflow-y:auto;overscroll-behavior:contain;flex:1;position:relative}
.sheet__img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg-3);display:block}
/* Spazio in fondo prima del bordo del piede: la descrizione non deve
   toccare la riga di separazione. */
.sheet__c{padding:var(--sp-sheet,20px) var(--gut) calc(var(--sp-sheet,20px) + 2px)}
.sheet__t{font-size:1.35rem;letter-spacing:-.02em}
.sheet__spec{
  font-size:.78rem;color:var(--fg-3);margin-top:6px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
}
.sheet__p{
  font-family:var(--font-d);font-size:1.5rem;color:var(--amber);margin-top:10px;font-weight:700;
}
.sheet__d{color:var(--fg-2);font-size:.94rem;margin-top:14px;line-height:1.6}
.sheet__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* Allergeni e caratteristiche sono informazione di servizio, non un titolo:
   carattere del testo, corpo piccolo, nessun maiuscolo decorativo. */
.sheet__meta span{
  font-family:var(--font);font-size:.72rem;font-weight:500;line-height:1.35;
  text-transform:none;letter-spacing:0;
  padding:4px 10px;border-radius:100px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--fg-2);
}
.sheet__sec{margin-top:16px}
.sheet__sec h4{
  font-family:var(--font);
  font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);
  margin-bottom:6px;font-weight:700;
}
.sheet__f{
  flex:none;padding:14px var(--gut) 16px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;background:var(--bg-2);flex-wrap:wrap;
}
.sheet__f .btn{flex:1;min-width:160px}
/* menu solo da consultare: una scheda senza comandi non lascia la fascia vuota */
.sheet__f[hidden],.rinfo__f[hidden]{display:none}
.sheet__f .qty__b{width:36px;height:36px}
.sheet__vars{display:grid;gap:8px;width:100%}
.sheet__vars .dvar{justify-content:space-between;width:100%}

/* Velo: dietro alla scheda (z-index 0 contro 1) ma cliccabile, altrimenti i
   tocchi fuori dalla scheda finirebbero sul menu sottostante. */
.sheet__ovl{
  position:absolute;inset:0;z-index:0;pointer-events:auto;
  background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s;
}
.sheet.is-on .sheet__ovl{opacity:1}

/* ------------------------------------------------- schede "i più richiesti" -- */
/* Anche queste si aprono: la foto e il testo sono un unico pulsante, mentre
   "Aggiungi" resta un comando a sé e non fa scattare la scheda. */
.fcard{display:flex;flex-direction:column}
.fcard__main{
  display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  color:inherit;cursor:pointer;
}
.fcard__b{display:block;padding:14px 15px 10px}
.fcard__t{display:block;font-size:1rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.fcard__d{
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.83rem;color:var(--fg-3);margin-top:5px;min-height:2.4em;
}
.fcard__f{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 15px 15px;margin-top:auto;
}

/* ------------------------------------------------------- simboli e allergeni -- */
/* Più piccoli: accanto a un nome di prodotto i cerchi da 28px pesavano troppo.
   Toccandoli compare il nome per esteso, non solo il suggerimento del mouse. */
.allg__i{width:24px;height:24px;cursor:pointer}
.ico-a{width:15px;height:15px}
.prod__t .allg__i{width:21px;height:21px}
.prod__t .allg__i .ico-a{width:13px;height:13px}
.allg__lbl{font-size:.68rem}

/* ------------------------------------------------------------ ritocchi ----- */
/* La barra delle categorie non deve più rincorrere lo scorrimento. */
.cattabs{scroll-behavior:smooth}

/* Il messaggino stava sotto la scheda prodotto: toccando un simbolo dentro
   la scheda la spiegazione restava nascosta. */
.toast{z-index:140}

/* Anche qui il testo segue il colore scelto, non un bianco fisso. */
.acc[open] .acc__ico{background:var(--red);color:var(--red-ink);border-color:var(--red)}

/* Titoli con il carattere da insegna scelto nel gestionale. */
.feat__h,.about h2,.where h2,.faq h2{font-family:var(--font-d);text-transform:var(--caps)}
.price,.prod__price,.sheet__p{font-family:var(--font-d)}

/* ==========================================================================
   Dati dell'ordine: ritiro o consegna, indirizzo, orario
   ========================================================================== */
.ord{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.ord h3{font-size:.95rem;margin-bottom:14px}
.ord .fld{margin-bottom:14px}

/* Quando lo vuoi: prima il giorno, poi l'orario, a tocchi. Il <select> resta
   nascosto e tiene solo il valore. Stessi fondi e bordi dei pulsanti
   «Sono al locale / Ritiro in negozio» qui sopra, in chiaro e in scuro. */
.when__store{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.when{display:grid;gap:10px}
.when__days{
  position:relative;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  margin:0 -2px;padding:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.when__days::-webkit-scrollbar{display:none}
.when button{
  font:inherit;color:var(--fg);cursor:pointer;
  border:1px solid var(--line);background:var(--bg-3);transition:.16s;
  -webkit-tap-highlight-color:transparent;
}
.when button:hover{border-color:var(--line-2)}
.when button.is-on{
  border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent);
}
.when button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.when__day{
  flex:none;scroll-snap-align:start;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;min-width:78px;min-height:52px;
  padding:8px 13px;border-radius:var(--r-sm);line-height:1.15;
}
.when__day b{font-size:.84rem;font-weight:600}
.when__day small{font-size:.72rem;color:var(--fg-3)}
.when__day.is-on small{color:inherit;opacity:.8}
.when__times{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
.when__times--wide{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.when__time{
  padding:9px 4px;border-radius:var(--r-sm);font-size:.86rem;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:center;
}

.ord__grp{border:0;padding:0;margin-bottom:14px}
.ord__grp legend{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-3);font-weight:700;margin-bottom:9px;
}

/* scelta a due pulsanti larghi: si prendono bene anche col pollice */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg__o input{position:absolute;opacity:0;width:0;height:0}
.seg__o > span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;text-align:center;min-height:74px;padding:12px 10px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3);
  font-size:.84rem;font-weight:600;line-height:1.25;transition:.16s;
}
.seg__o > span svg{width:22px;height:22px;color:var(--fg-3);transition:color .16s}
.seg__o:hover > span{border-color:var(--line-2)}
.seg__o input:checked + span{
  border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent);
}
.seg__o input:checked + span svg{color:var(--red)}
.seg__o input:focus-visible + span{outline:2.5px solid var(--amber);outline-offset:2px}

.hint--err{color:var(--red);font-weight:600;font-style:normal}

/* avviso sull'orario: è un'informazione importante, non una postilla */
.ord__warn{
  display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;
  padding:12px 14px;border-radius:var(--r);
  background:color-mix(in srgb,var(--amber) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 34%,transparent);
  font-size:.82rem;line-height:1.45;color:var(--fg-2);
}
.ord__warn svg{width:18px;height:18px;color:var(--amber);flex:none;margin-top:1px}
.ord__warn strong{color:var(--fg)}

@media (max-width:380px){
  .seg{grid-template-columns:1fr}
  .seg__o > span{flex-direction:row;min-height:0;justify-content:flex-start}
}


/* ==========================================================================
   Sottosezioni del menu (Cocktail List, Carta dei Vini, Distillati)
   e categorie di sola consultazione
   ========================================================================== */
.grp__sec{
  margin:30px 0 6px;padding-top:14px;border-top:2px solid var(--line);
  font-family:var(--font-d);text-transform:uppercase;letter-spacing:.08em;
  font-size:1rem;color:var(--fg-2);
}
.grp__sec:first-of-type{margin-top:18px}
.prod__ro{
  flex:none;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--fg-3);border:1px solid var(--line);padding:6px 9px;white-space:nowrap;
  border-radius:var(--r-sm);
}
.sheet__ro{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-bottom:10px}
.sheet__ro span{
  display:flex;align-items:baseline;gap:10px;padding:9px 13px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--font-d);font-weight:700;color:var(--amber);
}
.sheet__ro span b{font-family:var(--font);font-size:.8rem;font-weight:600;color:var(--fg-2)}
.sheet__note{width:100%;font-size:.85rem;color:var(--fg-3);margin:0}

/* ======================================================================
   Hop-Consigli — la rubrica dei locali consigliati
   ====================================================================== */
.hcon{max-width:var(--wrap);margin:0 auto;padding:8px var(--gut) 46px}
.hcon__box{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:38px 0 26px;overflow:hidden;
}
.hcon__head{text-align:center;padding:0 22px 26px}
.hcon__t{
  font-family:var(--font-d);
  font-size:clamp(1.9rem,6vw,3.1rem);line-height:1;letter-spacing:.01em;
  text-transform:uppercase;color:var(--fg);
}
.hcon__s{
  margin-top:14px;font-size:clamp(.95rem,2.4vw,1.15rem);line-height:1.5;color:var(--fg-2);
}
.hcon__hl{color:var(--amber);font-weight:600}

.hcon__rail{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 22px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.hcon__rail::-webkit-scrollbar{display:none}

/* min-width:0 è quello che tiene la scheda alla sua larghezza: senza, un tag
   Instagram lungo la farebbe allargare e sborderebbe invece di accorciarsi. */
.hcard{flex:0 0 clamp(180px,44vw,236px);min-width:0;scroll-snap-align:start}
.hcard__l{display:block;text-decoration:none;color:inherit}
.hcard__ph{
  display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--r);background:var(--bg-4);
}
.hcard__ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--ease)}
.hcard__l:hover .hcard__ph img{transform:scale(1.05)}
.hcard__noimg{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--fg-3);
}
.hcard__noimg svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.5}
/* Il tag sta su una riga sola: i nomi lunghi vengono troncati con i puntini
   invece di andare a capo, altrimenti le schede del carosello finiscono con
   didascalie di altezza diversa e la fila si disallinea. */
.hcard__tag{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
  margin-top:11px;font-size:.82rem;color:var(--fg-2);
}
.hcard__ig{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;color:var(--amber)}
.hcard__nm,
.hcard__at{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hcard__nm{color:var(--fg);font-weight:700;font-size:.88rem;flex:0 1 auto}
/* quando c'è anche il nome del locale, a cedere per prima è la chiocciola */
.hcard__at{flex:1 1 auto}
.hcard__note{
  display:block;margin-top:4px;font-size:.78rem;color:var(--fg-3);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.hcon__bar{
  /* binario volutamente tenue: alcuni preset grafici usano bordi a contrasto
     pieno, che qui sembrerebbero una barra già arrivata in fondo */
  height:4px;border-radius:100px;
  background:color-mix(in srgb,var(--fg) 15%,transparent);
  margin:20px 22px 0;overflow:hidden;
}
.hcon__bar span{
  display:block;height:100%;width:26%;border-radius:100px;
  background:var(--amber);transition:width .18s linear,transform .18s linear;
  transform-origin:left center;
}
@media (max-width:640px){
  .hcon{padding:4px 0 34px}
  .hcon__box{border-radius:0;border-left:0;border-right:0;padding-top:30px}
}

/* ---------------------------------------------- banner con sola immagine -- */
.bnr--image{
  display:block;padding:0;border:0;background:none;overflow:hidden;
  border-radius:var(--r-lg);
}
.bnr--image img{width:100%;height:auto;display:block}
.bnr--image a{display:block}
@media (max-width:640px){.bnr--image{border-radius:var(--r)}}

/* ------------------------------------------- carosello in formato verticale
   Le grafiche verticali (storie, locandine) vanno viste intere: qui il media
   non viene ritagliato ma contenuto, dentro una colonna stretta e centrata. */
.car--tall{max-width:min(430px,100%);background:var(--bg)}
.car--tall .car__s{max-height:min(78vh,720px);background:var(--bg)}
.car--tall .car__s img,
.car--tall .car__s video{object-fit:contain}

/* ======================================================================
   Invito alla recensione su Google
   ====================================================================== */
.rev{padding:8px var(--gut) 52px}
.rev__in{
  max-width:640px;margin:0 auto;text-align:center;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:38px 26px 34px;
}
.rev__stars{font-size:1.5rem;letter-spacing:.22em;color:var(--amber);line-height:1}
.rev__h{margin-top:14px;font-family:var(--font-d);font-size:clamp(1.5rem,4.6vw,2.2rem);
  line-height:1.05;color:var(--fg)}
.rev__p{margin:10px auto 20px;max-width:430px;font-size:.95rem;line-height:1.55;color:var(--fg-2)}
@media (max-width:640px){
  .rev{padding:4px 16px 40px}
  .rev__in{padding:30px 20px 28px}
  .rev__in .btn{width:100%}
}

/* ======================================================================
   Carattere dei sottotitoli (Boho Lifestyle)
   Il carattere manoscritto resta ai testi brevi di accompagnamento: usarlo
   anche sui testi lunghi renderebbe il menu faticoso da leggere.
   ====================================================================== */
/* Valore di ripiego: se dal pannello non è stato scelto un carattere per i
   sottotitoli, restano uguali ai titoli. La scelta fatta in «Colori» arriva
   dopo, con specificità maggiore, e vince su questa riga. */
:root{--font-s:var(--font-d)}
.show__sub,
.grp__h p,
.acc__d,
.hcon__s,
.rev__p,
.feat__h + p,
.about__lead{
  font-family:var(--font-s);
  letter-spacing:.01em;
}
.show__sub{font-size:1.12rem}
.grp__h p,.hcon__s,.rev__p{font-size:clamp(1rem,2.3vw,1.18rem);line-height:1.5}
.acc__d{font-size:1.02rem;line-height:1.5}

/* Sottotitoli «classici» (Grafica › Preset): piccoli e senza spaziatura,
   come nei menu nati prima di HopLab. Il carattere resta quello scelto in
   Caratteri › Sottotitoli; per questi menu parte da «Come il testo». */
html[data-sub="classici"] :is(.show__sub,.grp__h p,.acc__d,.hcon__s,.rev__p,.feat__h + p,.about__lead){letter-spacing:normal}
html[data-sub="classici"] .show__sub{font-size:.95rem}
html[data-sub="classici"] :is(.grp__h p,.hcon__s,.rev__p){font-size:.92rem;line-height:inherit}
html[data-sub="classici"] .acc__d{font-size:.86rem;line-height:1.45}

/* ======================================================================
   Barra in basso sul telefono (Grafica › Preset)
   Valori di base a specificità zero: lo style.css del locale, se la
   disegna a modo suo, vince sempre.
   ====================================================================== */
:where(.tabbar){
  position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
}
:where(.tabbar) :where(a,button){
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;
  font-size:.66rem;font-weight:600;color:var(--fg-3);position:relative;transition:color .15s;
}
:where(.tabbar) :where(a,button):active{color:var(--red)}
:where(.tabbar) :where(svg){width:21px;height:21px}
:where(.tabbar) :where(.badge){position:absolute;top:3px;right:calc(50% - 22px)}
@media (max-width:860px){
  :where(.tabbar){display:grid}
  /* il piede non deve finire sotto la barra (108px è quanto lasciavano già
     gli stili dei locali che la avevano) */
  html[data-tabbar] .ftr{padding-bottom:max(108px,calc(76px + env(safe-area-inset-bottom)))}
}
/* menu solo da consultare: senza «Ordine» restano tre pulsanti, a tutta larghezza */
.tabbar.tabbar--3{grid-template-columns:repeat(3,1fr)}
@media print{:where(.tabbar){display:none}}

/* ======================================================================
   Prodotti correlati dentro la scheda + riquadro informazioni sovrapposto
   ====================================================================== */
.rel__rail{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:4px;margin:0 calc(var(--gut) * -1);padding-inline:var(--gut);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rel__rail::-webkit-scrollbar{display:none}

.rcard{
  flex:0 0 min(268px,82%);min-width:0;scroll-snap-align:start;
  display:flex;align-items:center;gap:10px;padding:8px 10px 8px 8px;
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);
}
.rcard__ph{
  flex:0 0 auto;width:52px;height:52px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg-4);display:grid;place-items:center;padding:0;border:0;
}
.rcard__ph img{width:100%;height:100%;object-fit:cover}
.rcard__noimg{
  font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--fg-3);
  text-transform:uppercase;
}
.rcard__b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
/* il nome sta su una riga sola: le card devono restare tutte della stessa altezza */
.rcard__t{
  font-family:var(--font);font-size:.85rem;font-weight:600;color:var(--fg);
  background:none;border:0;padding:0;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.rcard__p{font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--amber);line-height:1.1}
.rcard__from{
  font-family:var(--font);font-size:.6rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--fg-3);
}
.rcard__act{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.rcard__i,.rcard__add{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--fg-2);transition:.15s;
}
.rcard__i svg,.rcard__add svg{width:16px;height:16px}
.rcard__i:hover{color:var(--fg);border-color:var(--fg-3)}
.rcard__add{background:var(--red);border-color:var(--red);color:var(--red-ink,#fff)}
.rcard__add:hover{background:var(--red-d);border-color:var(--red-d)}

/* ------------------------------------------------ riquadro informazioni -- */
/* Sta sopra la scheda (z-index 140 contro 120) e il suo velo intercetta i clic,
   così sotto non si tocca niente finché non lo si chiude. */
.rinfo{
  position:fixed;inset:0;z-index:140;display:flex;align-items:center;
  justify-content:center;padding:20px;
}
.rinfo[hidden]{display:none!important}
.rinfo__ovl{position:absolute;inset:0;background:rgba(0,0,0,.66);opacity:0;transition:opacity .24s}
.rinfo.is-on .rinfo__ovl{opacity:1}
.rinfo__in{
  position:relative;z-index:1;width:min(440px,100%);max-height:82vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-2);color:var(--fg);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  transform:translateY(14px) scale(.97);opacity:0;
  transition:transform .26s var(--ease),opacity .26s var(--ease);
}
.rinfo.is-on .rinfo__in{transform:none;opacity:1}
.rinfo__x{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;line-height:1;
  background:var(--bg-3);border:1px solid var(--line);color:var(--fg-2);
}
.rinfo__b{padding:22px var(--gut) 18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.rinfo__t{font-size:1.2rem;letter-spacing:-.02em;padding-right:38px}
.rinfo__spec{
  font-family:var(--font);font-size:.72rem;color:var(--fg-3);margin-top:5px;
  font-weight:600;text-transform:uppercase;letter-spacing:.05em;
}
.rinfo__p{font-family:var(--font-d);font-size:1.35rem;font-weight:700;color:var(--amber);margin-top:9px}
.rinfo__p small{font-family:var(--font);font-size:.68rem;font-weight:600;color:var(--fg-3)}
.rinfo__d{font-size:.9rem;line-height:1.6;color:var(--fg-2);margin-top:12px}
.rinfo__sec{margin-top:15px}
.rinfo__sec h4{
  font-family:var(--font);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-3);margin-bottom:6px;font-weight:700;
}
.rinfo__note{font-family:var(--font);font-size:.75rem;color:var(--fg-3);margin-top:8px;line-height:1.5}
.rinfo__f{
  flex:none;padding:12px var(--gut) calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--bg-2);
}
.rinfo__f .btn{width:100%}
@media (max-width:520px){
  .rinfo{padding:0;align-items:flex-end}
  .rinfo__in{width:100%;max-height:88vh;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
}

/* ======================================================================
   Upsell nel carrello (modulo DLC)
   ====================================================================== */
.ups{
  margin:18px 0 4px;padding:16px 0 14px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.ups[hidden]{display:none!important}
.ups__t{font-family:var(--font-d);font-size:1.05rem;letter-spacing:-.01em;color:var(--fg)}
.ups__n{font-family:var(--font-s);font-size:.9rem;color:var(--fg-2);margin-top:3px}
.ups__rail{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:12px;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ups__rail::-webkit-scrollbar{display:none}
.ups__rail .rcard{flex:0 0 min(250px,86%)}

/* ======================================================================
   Banner dei cookie
   ====================================================================== */
.cban{position:fixed;left:0;right:0;bottom:0;z-index:200;padding:14px;pointer-events:none}
.cban[hidden]{display:none!important}
.cban--center{top:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);padding:20px}
.cban__in{
  pointer-events:auto;max-width:min(560px,100%);margin:0 auto;
  background:var(--bg-2);color:var(--fg);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:0 14px 44px rgba(0,0,0,.4);
  padding:20px var(--gut) calc(18px + env(safe-area-inset-bottom));
  max-height:86vh;overflow-y:auto;
  transform:translateY(16px);opacity:0;transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.cban.is-on .cban__in{transform:none;opacity:1}
.cban__t{font-family:var(--font-d);font-size:1.15rem;letter-spacing:-.01em}
.cban__d{font-size:.88rem;line-height:1.55;color:var(--fg-2);margin-top:7px}
.cban__d a{color:var(--amber);text-decoration:underline}

.cban__pref{margin-top:14px;display:grid;gap:10px}
.cban__g{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;cursor:pointer}
.cban__g.is-fixed{cursor:default;opacity:.82}
.cban__g input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--red);flex:0 0 auto}
.cban__g b{display:block;font-size:.85rem;color:var(--fg)}
.cban__g em{display:block;font-style:normal;color:var(--fg-3);line-height:1.45;margin-top:2px}

.cban__act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}
.cban__act .btn{flex:1 1 auto;min-width:118px}
@media (min-width:560px){.cban__act .btn{flex:0 0 auto}}

/* ======================================================================
   Pagine legali (privacy e cookie policy)
   ====================================================================== */
.legal{max-width:760px;margin:0 auto;padding:40px var(--gut) 60px}
.legal h1{font-family:var(--font-d);font-size:clamp(1.7rem,5vw,2.4rem);letter-spacing:-.02em}
.legal h2{font-family:var(--font-d);font-size:clamp(1.1rem,3vw,1.4rem);margin-top:34px;color:var(--fg)}
.legal h3{font-size:1rem;margin-top:20px;color:var(--fg)}
.legal p,.legal li{font-size:.94rem;line-height:1.68;color:var(--fg-2);margin-top:10px}
.legal ul{margin-top:8px;padding-left:20px}
.legal li{margin-top:6px}
.legal strong{color:var(--fg)}
.legal a{color:var(--amber);text-decoration:underline}
.legal__meta{font-size:.8rem;color:var(--fg-3);margin-top:6px}
.legal__note{font-size:.84rem;color:var(--fg-3)}
.legal__t{width:100%;border-collapse:collapse;margin-top:12px;font-size:.85rem;display:block;overflow-x:auto}
.legal__t th,.legal__t td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal__t th{color:var(--fg-3);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.legal__t td{color:var(--fg-2)}
.legal__back{margin-top:40px}

/* Niente zoom col doppio tocco (il pizzico è bloccato dal viewport sul menu) */
html{touch-action:manipulation}

/* ======================================================================
   Barra di ricerca: mostrare o nascondere le parti (Grafica › Preset)
   Le classi e gli attributi qui sotto esistono solo se il locale ha scelto
   qualcosa di diverso dal solito: di partenza il sito non ne ha nessuno.
   «Telefono» = fino a 860 px, come la barra in basso.
   ====================================================================== */
@media (max-width:860px){
  .srch-hm{display:none!important}
  .toolbar .cattabs--solo-m{padding-top:12px}
}
@media (min-width:861px){
  .srch-hd{display:none!important}
  .toolbar .cattabs--solo-d{padding-top:12px}
}
/* barra che scorre con la pagina invece di restare agganciata in alto */
html[data-srch-static] .toolbar{position:static}
/* con la fascia cambiata gli scorrimenti seguono la sua altezza vera
   (--tb-h la misura app.js: 0 se non è agganciata o non c'è) */
html[data-srch]{scroll-padding-top:calc(var(--hdr-h) + var(--tb-h,0px) + 6px)}
html[data-srch] .cat{scroll-margin-top:0}

/* =========================================================================
   Bandierina della lingua (modulo «Menu in più lingue»)
   Il pulsante è un .ico come chiaro/scuro: forma e colori li dà lo stile del
   locale. Qui solo la bandiera tonda e il piccolo elenco delle lingue.
   ====================================================================== */
.lang{position:relative;display:inline-flex}
.lang__btn{padding:0;overflow:hidden}
.lang__flag{width:24px;height:24px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lang__list{position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:170px;margin:0;padding:6px;
  list-style:none;background:var(--bg-2,var(--bg));border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.28)}
.lang__list[hidden]{display:none}
.lang__list button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;
  background:none;color:inherit;font:inherit;font-size:.92rem;text-align:left;cursor:pointer}
.lang__list button:hover,.lang__list button[aria-current=true]{background:var(--bg-3,rgba(127,127,127,.12))}
.lang__list button[aria-current=true]{font-weight:700}
.lang__list img{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.gt_wrap{display:none!important}
@media print{.lang{display:none}}