/* ==========================================================================
   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 -- */
/* Da telefono la chiamata sparisce perché è già nella barra in basso, ma il
   cambio chiaro/scuro resta: è l'unico posto in cui si trova. */
@media (max-width:860px){
  .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:var(--red)}

/* 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}

/* --------------------------------------------------------- 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:12px}
.sheet__meta span{
  font-size:.75rem;font-weight:600;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-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);
  margin-bottom:8px;font-weight:800;
}
.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}
.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}

.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}
}