/* ===========================================================================
   PIZZERIA ARCADIA — le pagine del sito
   Si appoggia alle variabili di arcadia.css (palette, font, raggi, ease):
   questo foglio aggiunge solo quello che il menù non aveva — testata, piede,
   pagine di racconto e moduli. Mobile first come il resto.
   ======================================================================== */

/* ---------------------------------------------------------------- utilità */
.salta{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--rosso); color:#fff; padding:12px 18px; border-radius:0 0 12px 0;
  font-size:14px; font-weight:600;
}
.salta:focus{ left:0 }

.bottone{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:100px; white-space:nowrap;
  font-size:15px; font-weight:600; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer;
  transition:background .22s var(--ease), border-color .22s var(--ease),
             color .22s var(--ease), transform .22s var(--ease);
}
.bottone svg{ width:16px; height:16px; fill:currentColor; flex:0 0 auto }
.bottone--pieno{ background:var(--rosso); color:#fff; border-color:var(--rosso-viv) }
.bottone--pieno:hover{ background:var(--rosso-viv) }
.bottone--fantasma{ border-color:var(--linea-2); color:var(--crema-2) }
.bottone--fantasma:hover{ border-color:var(--fumo); color:var(--crema); background:var(--carta) }
.bottone--grande{ padding:16px 30px; font-size:16px }
.bottone:active{ transform:scale(.97) }

/* =============================================================== testata */
/* Non è appiccicata in alto: su telefono ogni pixel fisso è tolto al
   contenuto, e queste pagine si leggono, non si consultano di corsa come il
   menù (che invece la barra fissa ce l'ha, ed è quella delle categorie). */
.testata{
  position:relative; z-index:30;
  background:rgba(15,11,10,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.testata__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  min-height:66px; padding-block:10px;
}
.testata__marchio{ flex:0 0 auto; display:block; line-height:0 }
.testata__marchio img{ width:132px; height:auto }

.testata__nav{
  display:flex; gap:2px; align-items:center;
  margin-inline:auto; order:3; width:100%;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  /* su telefono le voci scorrono: la sfumatura a destra lo dice */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
}
.testata__nav::-webkit-scrollbar{ display:none }
.testata__nav a{
  flex:0 0 auto; padding:8px 13px; border-radius:100px; white-space:nowrap;
  font-size:14px; font-weight:500; color:var(--fumo);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.testata__nav a:hover{ color:var(--crema-2) }
.testata__nav a[aria-current="page"]{ color:var(--crema); background:var(--carta-2) }

.testata__azioni{ margin-left:auto; display:flex; gap:8px; align-items:center }
.testata__tel{ display:none }
.testata__azioni .bottone{ padding:10px 18px; font-size:14px }

/* ================================================================== piede */
.piede{
  margin-top:60px; padding-block:40px 22px;
  background:var(--nero-2); border-top:1px solid var(--linea);
}
.piede__in{ display:grid; gap:28px }
.piede__nome{
  font-family:var(--display); font-size:21px; font-weight:600;
  margin:0 0 6px; color:var(--crema);
}
.piede__tit{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oro); font-weight:600; margin:0 0 10px;
}
.piede__riga{ margin:0 0 7px; font-size:14px; line-height:1.6; color:var(--crema-2) }
.piede__riga a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--linea-2) }
.piede__riga a:hover{ color:var(--crema); border-color:var(--fumo) }
.piede__riga--spenta{ color:var(--fumo-2) }
.piede__coda{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between;
  margin-top:32px; padding-top:18px; border-top:1px solid var(--linea);
  font-size:12.5px; color:var(--fumo-2);
}
.piede__coda p{ margin:0 }
.piede__coda a{ color:var(--fumo); text-decoration:underline }

/* ============================================================ intestazioni */
/* Testata di pagina con foto: stessa grammatica delle sezioni del menù. */
.cima{ position:relative; isolation:isolate; overflow:hidden; margin-bottom:8px }
.cima__media{ position:absolute; inset:0; z-index:-2 }
.cima__media img,.cima__media video{ width:100%; height:100%; object-fit:cover; transform:scale(1.04) }
.cima::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,rgba(15,11,10,.62) 0%,rgba(15,11,10,.38) 40%,
             rgba(15,11,10,.82) 78%,var(--nero) 100%);
}
.cima__in{ padding-block:78px 54px }
.cima h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(34px,9vw,62px); line-height:1.04; letter-spacing:-.015em;
  margin:6px 0 12px; color:var(--crema);
  text-shadow:0 3px 26px rgba(0,0,0,.6);
}
.cima__sotto{
  font-size:clamp(15px,3.6vw,18px); line-height:1.6; color:var(--crema-2);
  margin:0; max-width:34em;
}

/* ================================================================ sezioni */
.sezione{ padding-block:44px 6px }
.sezione--stretta{ max-width:60ch }
.sezione h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(25px,6vw,38px); line-height:1.1; letter-spacing:-.01em;
  margin:4px 0 14px; color:var(--crema);
}
.sezione h3{
  font-family:var(--display); font-weight:600; font-size:20px;
  margin:0 0 8px; color:var(--crema);
}
.sezione p{ font-size:15.5px; line-height:1.72; color:var(--crema-2); margin:0 0 16px }
.sezione p:last-child{ margin-bottom:0 }
.testo-lungo{ max-width:68ch }

.azioni{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }

/* --- riquadri affiancati --------------------------------------------- */
.griglia{ display:grid; gap:14px; margin-top:20px }
.riquadro{
  background:linear-gradient(160deg,var(--carta-2),var(--carta) 68%);
  border:1px solid var(--linea); border-radius:var(--r); padding:20px;
}
.riquadro h3{ margin-bottom:6px }
.riquadro p{ font-size:14.5px; margin:0 }
.riquadro__icona{
  width:38px; height:38px; margin-bottom:12px; fill:var(--rosso-viv);
}

/* --- numeri grossi ---------------------------------------------------- */
.numeri{ display:grid; gap:18px; margin-top:26px }
.numero b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:44px; line-height:1; color:var(--rosso-viv);
}
.numero span{ display:block; font-size:14px; color:var(--fumo); margin-top:6px; line-height:1.5 }

/* --- galleria del locale ---------------------------------------------- */
/* Le foto sono di formati diversi e sarebbe un mosaico storto: si ritagliano
   tutte allo stesso rapporto e si lascia parlare il contenuto. */
.galleria{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px }
.galleria img{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-s);
  border:1px solid var(--linea);
}
.galleria figure{ margin:0; grid-column:span 1 }
.galleria figure:first-child{ grid-column:span 2 }
.galleria figure:first-child img{ aspect-ratio:16/10 }
.galleria figcaption{ font-size:12px; color:var(--fumo-2); margin-top:6px; line-height:1.4 }

/* ================================================================ moduli */
.modulo{ max-width:34rem }
.campo{ display:block; margin-bottom:18px }
.campo__et{
  display:block; font-size:13px; font-weight:600; color:var(--crema-2);
  letter-spacing:.01em; margin-bottom:7px;
}
.campo__et small{ display:block; font-weight:400; color:var(--fumo-2); font-size:12px; margin-top:2px }
.campo input,.campo select,.campo textarea{
  width:100%; padding:13px 15px; border-radius:var(--r-s);
  background:var(--carta); border:1px solid var(--linea-2); color:var(--crema);
  font-family:var(--sans); font-size:16px;   /* 16px: sotto, iOS zooma da solo */
  transition:border-color .2s var(--ease);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--oro);
}
.campo textarea{ resize:vertical; min-height:110px; line-height:1.6 }
.campo--errore input,.campo--errore select,.campo--errore textarea{ border-color:var(--rosso-viv) }
.campo__errore{ display:block; font-size:13px; color:var(--rosso-viv); margin-top:6px }
.due-campi{ display:grid; gap:0 14px }

/* --- scelta a pastiglie (numero di persone, orario) -------------------- */
.scelte{ display:flex; flex-wrap:wrap; gap:8px }
.scelte input{ position:absolute; opacity:0; width:1px; height:1px }
.scelte label{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:52px; padding:11px 15px; border-radius:100px; cursor:pointer;
  border:1px solid var(--linea-2); color:var(--crema-2);
  font-size:15px; font-weight:550;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.scelte label:hover{ border-color:var(--fumo) }
.scelte input:checked + label{
  background:var(--rosso); border-color:var(--rosso-viv); color:#fff;
}
.scelte input:focus-visible + label{ outline:2px solid var(--oro); outline-offset:2px }
.scelte input:disabled + label{
  opacity:.34; cursor:not-allowed; text-decoration:line-through;
}

/* --- avvisi ----------------------------------------------------------- */
.avviso-box{
  border-radius:var(--r); padding:16px 18px; margin-bottom:22px;
  font-size:14.5px; line-height:1.6;
}
.avviso-box p{ margin:0 0 8px; font-size:inherit; color:inherit }
.avviso-box p:last-child{ margin-bottom:0 }
.avviso-box strong{ display:block; margin-bottom:4px; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase }
.avviso-box--ok{
  background:rgba(140,164,99,.11); border:1px solid rgba(140,164,99,.42); color:var(--crema);
}
.avviso-box--ok strong{ color:var(--verde) }
.avviso-box--no{
  background:rgba(216,35,42,.10); border:1px solid rgba(242,73,74,.40); color:var(--crema);
}
.avviso-box--no strong{ color:var(--rosso-viv) }
.avviso-box--nota{
  background:var(--carta); border:1px solid var(--linea-2); color:var(--crema-2);
}
.avviso-box--nota strong{ color:var(--oro) }

/* --- riepilogo della prenotazione fatta -------------------------------- */
.esito{ max-width:34rem }
.esito__codice{
  display:inline-block; font-family:var(--display); font-size:30px; font-weight:600;
  letter-spacing:.12em; color:var(--oro); background:var(--carta);
  border:1px dashed var(--oro-cupo); border-radius:var(--r-s); padding:10px 20px;
  margin:6px 0 18px;
}
.esito__voci{ list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--linea) }
.esito__voci li{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--linea); font-size:15px;
}
.esito__voci span{ color:var(--fumo) }
.esito__voci b{ font-weight:600; color:var(--crema); text-align:right }

/* --- mappa ------------------------------------------------------------- */
/* Non incorporiamo l'iframe di Google: carica tracciamento di terze parti su
   ogni visita (e la CSP lo bloccherebbe). Una foto statica con il link fa lo
   stesso servizio senza far entrare nessuno. */
.mappa{
  display:block; position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--linea-2); margin-top:20px;
  background:var(--carta);
}
.mappa img{ width:100%; height:auto; display:block }
.mappa__etichetta{
  position:absolute; left:14px; bottom:14px; right:14px;
  display:flex; align-items:center; gap:10px;
  background:rgba(15,11,10,.90); backdrop-filter:blur(8px);
  border:1px solid var(--linea-2); border-radius:100px; padding:11px 18px;
}
.mappa__etichetta svg{ width:18px; height:18px; fill:var(--rosso-viv); flex:0 0 auto }
.mappa__etichetta span{ font-size:14px; color:var(--crema); font-weight:550 }

/* --- elenco orari ------------------------------------------------------ */
.orari-lista{
  list-style:none; margin:18px 0 0; padding:0;
  border:1px solid var(--linea); border-radius:var(--r-s); overflow:hidden;
  max-width:26rem;
}
.orari-lista li{
  display:flex; justify-content:space-between; gap:14px;
  padding:11px 16px; border-bottom:1px solid var(--linea); font-size:14.5px;
}
.orari-lista li:last-child{ border-bottom:0 }
.orari-lista li[data-oggi="1"]{ background:var(--carta-2) }
.orari-lista b{ font-weight:550; color:var(--crema) }
.orari-lista span{ color:var(--fumo) }
.orari-lista .chiuso{ color:var(--fumo-2) }

/* ============================================ schermi più larghi (720+) */
@media (min-width:720px){
  .testata__in{ min-height:74px; flex-wrap:nowrap }
  .testata__marchio img{ width:150px }
  .testata__nav{ order:0; width:auto; margin-inline:22px 0; mask-image:none; -webkit-mask-image:none }
  .testata__tel{ display:inline-flex }
  .griglia{ grid-template-columns:1fr 1fr }
  .numeri{ grid-template-columns:repeat(3,1fr) }
  .due-campi{ grid-template-columns:1fr 1fr }
  .piede__in{ grid-template-columns:1.4fr 1fr 1fr; gap:36px }
  .galleria{ grid-template-columns:repeat(3,1fr) }
  .galleria figure:first-child{ grid-column:span 3 }
  .cima__in{ padding-block:104px 66px }
}

/* ================================================= desktop vero (1180+) */
@media (min-width:1180px){
  .griglia--tre{ grid-template-columns:repeat(3,1fr) }
  .sezione{ padding-block:60px 6px }
  .cima__in{ padding-block:132px 82px }
  .piede{ margin-top:84px }
}

/* ============================================ pezzi propri della home */

/* L'apertura con il video: più alta delle altre intestazioni ma non a
   schermo pieno — chi arriva deve vedere subito che sotto c'è dell'altro. */
.cima--home .cima__in{ padding-block:86px 46px }
.cima--home h1{ font-size:clamp(38px,10vw,74px) }

/* "Oggi siamo aperti / chiusi": è la domanda numero uno di chi cerca una
   pizzeria alle otto di sera, quindi sta nella prima schermata. */
.stato-oggi{
  display:inline-flex; align-items:center; gap:9px;
  margin:24px 0 0; padding:9px 16px 9px 13px;
  background:rgba(20,14,12,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--linea-2); border-radius:100px;
  font-size:13.5px; color:var(--crema-2); line-height:1.4;
}
.stato-oggi__pallino{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--verde); box-shadow:0 0 0 4px rgba(140,164,99,.18);
}
.stato-oggi--chiuso .stato-oggi__pallino{ background:var(--fumo-2); box-shadow:none }

/* Il carosello delle pizze in home sta dentro .wrap, che il rientro laterale
   ce l'ha già: qui va tolto, altrimenti si somma e la prima tessera scappa
   dentro. Il rientro negativo lo fa sconfinare fino al bordo, che è il modo
   in cui si capisce che scorre. */
.vetrina__rail--home{
  padding-inline:var(--pad);
  margin-inline:calc(var(--pad) * -1);
  margin-top:4px;
}
.vetrina__rail--home .vcard{ text-align:center }

@media (min-width:1180px){
  .cima--home .cima__in{ padding-block:150px 74px }
  /* Da qui il carosello diventa griglia, come nel menù: su un monitor le
     tessere che escono a destra nel nero sembrano un errore, non un invito. */
  .vetrina__rail--home{
    display:grid; grid-template-columns:repeat(4,1fr); gap:58px 20px;
    overflow:visible; margin-inline:0; padding-inline:0; padding-block:46px 10px;
  }
  .vetrina__rail--home::after{ display:none }
}

/* --- note sotto i campi ------------------------------------------------ */
.nota-campo{
  display:block; font-size:12.5px; line-height:1.55; color:var(--fumo-2); margin-top:8px;
}
.nota-campo a{ color:var(--oro) }
.aiuto-modulo{ font-size:14.5px; color:var(--fumo); margin:0 0 16px }
fieldset.campo{ border:0; padding:0; margin:0 0 22px; min-width:0 }
fieldset.campo legend{ padding:0; margin-bottom:9px }

/* ------------------------------------------------------- scheda "mappa" */
/* Non c'è un'immagine di mappa: senza le coordinate esatte del civico un
   segnaposto sarebbe nel posto sbagliato, che è peggio di nessun segnaposto.
   Quello che serve davvero — l'indirizzo e un tocco per la navigazione — c'è. */
.mappa-card{
  background:linear-gradient(150deg,var(--carta-2),var(--carta) 70%);
  border:1px solid var(--linea-2); border-radius:var(--r);
  padding:24px; margin-top:24px;
  position:relative; overflow:hidden;
}
/* la trama di sfondo che ricorda una mappa, disegnata col CSS: zero richieste */
.mappa-card::before{
  content:""; position:absolute; inset:0; opacity:.055; pointer-events:none;
  background-image:
    linear-gradient(var(--crema) 1px, transparent 1px),
    linear-gradient(90deg, var(--crema) 1px, transparent 1px);
  background-size:34px 34px;
}
.mappa-card > *{ position:relative }
.mappa-card__via{
  font-family:var(--display); font-size:clamp(22px,5.4vw,30px); font-weight:600;
  color:var(--crema); margin:2px 0 2px; line-height:1.15;
}
.mappa-card__citta{ font-size:15px; color:var(--fumo); margin:0 }
.mappa-card__bottoni{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px }
.mappa-card__nota{ font-size:12.5px; color:var(--fumo-2); margin:14px 0 0; line-height:1.55 }

/* --- riquadri che si toccano (contatti) --- */
.riquadro--tocco{ display:block; text-decoration:none }
.riquadro--tocco:hover{ border-color:var(--linea-2); background:var(--carta-2) }
.fioco{ color:var(--fumo-2); font-size:13px }

/* --- galleria completa di chi-siamo --- */
.galleria--tutte figure:first-child{ grid-column:span 2 }
.galleria--tutte figure:first-child img{ aspect-ratio:1 }
@media (min-width:720px){
  .galleria--tutte figure:first-child{ grid-column:span 1 }
}
@media (min-width:1180px){
  .galleria--tutte{ grid-template-columns:repeat(4,1fr) }
  .mappa-card{ display:flex; align-items:center; gap:32px; padding:32px }
  .mappa-card__testo{ flex:1 1 auto }
  .mappa-card__bottoni{ margin-top:0; flex:0 0 auto; flex-direction:column }
  .mappa-card__nota{ flex-basis:100% }
}

/* ==========================================================================
   ORDINAZIONI — pagina pubblica
   Si usa in piedi, al tavolo, con una mano e la luce bassa: tocchi grandi,
   prezzi leggibili, e il totale sempre in vista senza dover aprire niente.
   ========================================================================= */

.p-ordina .testata{ display:none }        /* al tavolo non si naviga: si ordina */

.ord__testa{ padding:22px 0 16px; border-bottom:1px solid var(--linea) }
.ord__testa h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(26px,7vw,40px); line-height:1.1; margin:4px 0 10px; color:var(--crema);
}
.ord__sotto{ font-size:14.5px; line-height:1.62; color:var(--fumo); margin:0; max-width:44ch }
.ord__sotto b{ color:var(--crema-2) }

/* barra delle categorie, appiccicata in alto */
.ord__cat{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(to bottom,rgba(15,11,10,.97),rgba(15,11,10,.9));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.ord__cat__scroll{
  display:flex; gap:6px; align-items:center; height:52px;
  overflow-x:auto; scrollbar-width:none;
  padding-inline:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
}
.ord__cat__scroll::-webkit-scrollbar{ display:none }
.ord__cat a{
  flex:0 0 auto; padding:8px 14px; border-radius:100px; white-space:nowrap;
  font-size:13.5px; font-weight:500; color:var(--fumo);
}
.ord__cat a[aria-current="true"]{ background:var(--rosso); color:#fff }

.ord__lista{ padding-top:6px }
.ord__gruppo{ padding-top:26px; scroll-margin-top:62px }
.ord__gruppo h2{
  font-family:var(--display); font-weight:600; font-size:23px;
  margin:0 0 8px; color:var(--crema);
}
/* spazio in fondo: la barra del carrello non deve coprire l'ultima voce */
.ord__coda{ height:12px }
body.ha-carrello .ord__coda{ height:calc(84px + env(safe-area-inset-bottom)) }

/* --- una voce ordinabile --- */
.ov{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--linea);
}
.ov__foto{
  width:54px; height:54px; flex:0 0 auto; border-radius:12px; object-fit:contain;
  background:var(--carta); padding:2px;
}
.ov__testo{ flex:1 1 auto; min-width:0 }
.ov__testo h3{
  font-family:var(--display); font-weight:600; font-size:16px; line-height:1.25;
  margin:0 0 2px; color:var(--crema);
}
.ov__testo h3 em{ font-style:normal; font-weight:400; font-size:12.5px; color:var(--fumo-2) }
.ov__testo p{ font-size:12.5px; line-height:1.45; color:var(--fumo); margin:0 0 4px }
.ov__prezzo{ font-size:14px; font-weight:600; color:var(--oro); font-variant-numeric:tabular-nums }
.ov__piu{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  background:var(--rosso); border:1px solid var(--rosso-viv); color:#fff;
  font-size:24px; line-height:1; font-weight:400;
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.ov__piu:active{ transform:scale(.9) }
.ov__piu--ok{ background:var(--verde); border-color:var(--verde); transform:scale(1.12) }
.ov__finita{
  flex:0 0 auto; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rosso-viv); border:1px solid rgba(242,73,74,.4);
  border-radius:100px; padding:5px 10px;
}
.ov--out{ opacity:.48 }
.ov--out .ov__foto{ filter:grayscale(.85) }

/* --- la barra del carrello --- */
.carrello{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--nero) 62%,rgba(15,11,10,0));
}
.carrello__apri{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-radius:100px;
  background:var(--rosso); border:1px solid var(--rosso-viv); color:#fff;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  font-size:15px; font-weight:600;
}
.carrello__n{
  min-width:26px; height:26px; border-radius:100px; background:rgba(255,255,255,.22);
  display:grid; place-items:center; font-size:13px; font-weight:700; padding:0 6px;
}
.carrello__et{ flex:1 1 auto; text-align:left }
.carrello__tot{ font-variant-numeric:tabular-nums }

/* --- i fogli che salgono dal basso --- */
.foglio{
  position:fixed; inset:0; z-index:80; display:none;
  align-items:flex-end; justify-content:center;
}
.foglio.aperto{ display:flex }
.foglio__velo{ position:absolute; inset:0; background:rgba(8,5,4,.76); backdrop-filter:blur(3px) }
.foglio__box{
  position:relative; width:100%; max-width:520px;
  max-height:88svh; overflow-y:auto;
  background:linear-gradient(180deg,var(--carta-2),var(--nero-2) 42%);
  border:1px solid var(--linea-2); border-bottom:0; border-radius:22px 22px 0 0;
  padding:0 var(--pad) calc(24px + env(safe-area-inset-bottom));
  animation:su .3s var(--ease-out);
}
.foglio__presa{ width:38px; height:4px; border-radius:4px; background:var(--linea-2); margin:10px auto 6px }
.foglio__box h2{
  font-family:var(--display); font-weight:600; font-size:22px;
  margin:6px 0 14px; color:var(--crema);
}
.foglio__vuoto{ color:var(--fumo); font-size:14.5px; padding:12px 0 18px }
.foglio__tot{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:14px 0 4px; margin:0; border-top:1px solid var(--linea);
  font-size:15px; color:var(--fumo);
}
.foglio__tot b{ font-size:24px; font-weight:600; color:var(--oro); font-variant-numeric:tabular-nums }
.foglio__box .bottone{ width:100%; margin-top:10px }

/* --- righe del carrello --- */
.cr{ list-style:none; margin:0; padding:0 }
.cr__v{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--linea);
}
.cr__testo{ flex:1 1 auto; min-width:0 }
.cr__testo b{ display:block; font-size:15px; font-weight:550; color:var(--crema); line-height:1.3 }
.cr__agg{ display:block; font-size:12.5px; color:var(--oro); margin-top:2px }
.cr__prezzo{ display:block; font-size:12.5px; color:var(--fumo-2); margin-top:2px }
.cr__q{ display:flex; align-items:center; gap:4px; flex:0 0 auto }
.cr__q span{ min-width:26px; text-align:center; font-size:15px; font-weight:600;
  font-variant-numeric:tabular-nums }
.cr__b{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--linea-2);
  color:var(--crema-2); font-size:19px; line-height:1;
}
.cr__b:active{ background:var(--carta) }

/* --- scelta delle aggiunte --- */
.agg-scelta{ display:grid; gap:6px; margin-bottom:16px }
.agg-scelta__v{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-radius:12px;
  background:var(--carta); border:1px solid var(--linea); cursor:pointer;
}
.agg-scelta__v span{ flex:1 1 auto; font-size:14.5px; color:var(--crema-2) }
.agg-scelta__v b{ font-size:13px; color:var(--oro); font-weight:600 }
.agg-scelta__v input{ width:20px; height:20px; accent-color:var(--rosso) }
.agg-scelta__v:has(input:checked){ border-color:var(--rosso-viv); background:var(--carta-2) }

.esito__tot{ border-bottom:0 !important; padding-top:14px !important }
.esito__tot b{ font-size:20px; color:var(--oro) }

@media (min-width:720px){
  .ord__gruppo{ padding-top:34px }
  .ov__foto{ width:64px; height:64px }
}

/* Riga di servizio: c'e' solo quando la pagina la usa un cameriere loggato. */
.staff-riga{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px var(--pad); background:var(--carta-2);
  border-bottom:1px solid var(--linea-2); font-size:13px; color:var(--fumo);
}
.staff-riga a{ color:var(--oro); font-weight:600; white-space:nowrap }
.staff-riga b{ color:var(--crema-2) }
.p-ordina .staff-riga + .ord__testa{ padding-top:16px }