/* Solo token, mai colori letterali: la palette vive in tokens.css (FF07 lo verifica).
   Il layout riprende il sito pubblico di FoodTiger (tema Argon): testata fissa, card con ombra
   larga e foto in alto, copertina del ristorante con velo e taglio obliquo, pillole delle categorie,
   finestra per le opzioni, pannello laterale del carrello, checkout a due colonne su fondo grigio. */

/* I caratteri, serviti da noi (static/fonts/VENDOR.md). swap: il testo si vede subito col ripiego di sistema. */
@font-face { font-family: "Signika"; src: url("/static/fonts/signika-latin-wght-normal.woff2") format("woff2");
             font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Kaushan Script"; src: url("/static/fonts/kaushan-script-latin-400-normal.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--testata) + 64px); }   /* le ancore non finiscono sotto testata e pillole */
body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font: var(--t-m)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
main { display: block; min-height: 60vh; }
.contenitore { max-width: var(--contenitore); margin: 0 auto; padding: var(--sp-8) var(--sp-4) var(--sp-16); }
.contenitore--largo { max-width: 1320px; }
/* Le pagine «a sezione» (checkout, ordine) stanno su fondo grigio, con le card bianche sopra. */
.contenitore--sezione { max-width: none; background: var(--carta-sezione); }
.contenitore--sezione > * { max-width: var(--contenitore); margin-left: auto; margin-right: auto; }

h1, h2, h3 { color: var(--inchiostro); font-weight: 700; line-height: 1.15; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: var(--t-2xl); margin: 0 0 var(--sp-3); }
h2 { font-size: var(--t-xl); font-weight: 650; margin: var(--sp-8) 0 var(--sp-4); }
/* I titoli di sezione della home: al centro, con un trattino d'accento sopra (forma, non colore che dice qualcosa). */
.titolo-sezione { text-align: center; margin: 0 0 var(--sp-6); }
.titolo-sezione::before { content: ""; display: block; width: 48px; height: 4px; margin: 0 auto var(--sp-3);
                          border-radius: 2px; background: var(--accento); }
.calligrafico { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; color: var(--accento); }
h3 { font-size: var(--t-l); margin: 0 0 var(--sp-2); }
a { color: var(--accento); text-decoration: none; }
a:not(.btn):not([class*="card-"]):not(.pillola-cat):hover { text-decoration: underline; }
small, .piccolo { color: var(--inchiostro-tenue); font-size: var(--t-s); }
.intro { color: var(--testo); max-width: 64ch; margin: 0 0 var(--sp-6); }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .92em; }
img { max-width: 100%; height: auto; display: block; }

/* --- skip link, testo per lettori di schermo, honeypot (→S4) ------------ */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--sp-4); top: var(--sp-2); z-index: 50; background: var(--superficie);
              padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.esca { position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- testata fissa ---------------------------------------------------------- */
/* Le tre aree, sopra la barra: scorrono via con la pagina, la barra sotto resta (sticky). */
/* Due piani, come i negozi online: sopra marchio, ricerca e azioni su bianco; sotto le voci sulla fascia scura, che va da
   bordo a bordo (box-shadow + clip-path: lo sfondo esce dal contenitore senza un elemento in piu'). */
.intestazione { position: sticky; top: 0; z-index: 30; background: var(--superficie); box-shadow: var(--ombra-testata); }
.nav { max-width: var(--contenitore); margin: 0 auto; padding: var(--sp-3) var(--sp-4) 0;
       display: flex; gap: var(--sp-3) var(--sp-6); align-items: center; flex-wrap: wrap; }
.marchio { font-weight: 700; font-size: var(--t-xl); color: var(--inchiostro); letter-spacing: -.02em; line-height: 1; }
.marchio__punto { color: var(--accento); }
.nav__cerca { flex: 1 1 260px; max-width: 440px; display: flex; background: var(--carta-sezione); border-radius: var(--raggio);
              border: 1px solid var(--linea); overflow: hidden; }
.nav__cerca input { flex: 1; min-width: 0; border: 0; box-shadow: none; background: transparent; min-height: 42px; }
.nav__cerca button .icona { width: 20px; height: 20px; }
.nav__cerca button { border: 0; background: var(--accento); color: var(--su-accento); padding: 0 var(--sp-4); cursor: pointer;
                     font: inherit; font-weight: 600; min-width: 48px; }
.nav__voci { order: 3; flex-basis: 100%; display: flex; gap: var(--sp-1) var(--sp-6); flex-wrap: wrap; align-items: center;
             min-height: 48px; margin-top: var(--sp-1); background: var(--barra);
             box-shadow: 0 0 0 100vmax var(--barra); clip-path: inset(0 -100vmax); }
.nav__voci a { color: var(--su-barra); font-weight: 600; font-size: var(--t-s); padding: var(--sp-3) 0;
               border-bottom: 3px solid transparent; transition: var(--transizione); }
.nav__azioni { display: flex; gap: var(--sp-2); align-items: center; }
.nav__carrello { color: var(--accento); box-shadow: var(--ombra-lieve); border-color: transparent; }
.conteggio { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 999px; text-align: center;
             background: var(--accento); color: var(--su-accento); font-size: var(--t-xs); font-weight: 700;
             font-variant-numeric: tabular-nums; }

/* --- I SETTE STATI (→09 §E) -------------------------------------------- */
/* 2. hover — solo col puntatore. Su touch non esiste: niente di importante vive solo qui. */
@media (hover: hover) {
  .nav__voci a:hover { border-bottom-color: var(--su-barra-tenue); text-decoration: none; }
  .btn:hover { transform: translateY(-1px); box-shadow: var(--ombra); }
  .btn--primario:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); }
  .card-r__link:hover .card-r__foto img:not(.card-r__logo), .card-p__link:hover .card-p__foto img { transform: scale(1.08); }
  .card-r__link:hover, .card-p__link:hover { box-shadow: var(--ombra); transform: translateY(-2px); }
  .pillola-cat:hover { transform: translateY(-1px); }
}
/* 3. focus visibile — :focus-visible, mai outline:none senza sostituto. */
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 3px; }
/* 4. premuto */
.btn:active, .btn-tondo:active { transform: translateY(1px); transition-duration: 60ms; }
/* 5. corrente — colore PIU' forma (→E5). */
.nav__voci a[aria-current="page"] { border-bottom-color: var(--accento); }
.voce-breve { display: none; }
.nav__carrello[aria-current="page"] { box-shadow: 0 0 0 2px var(--accento); }
/* 6. disabilitato — il motivo sta accanto, nel markup. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
/* 7. in attesa */
.attesa { display: none; color: var(--inchiostro-tenue); font-size: var(--t-s); }
.htmx-request .attesa, .htmx-request.attesa { display: inline; }

/* --- bottoni ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
       min-height: 40px; padding: 10px 20px; border: 1px solid var(--linea);
       border-radius: var(--raggio); background: var(--superficie); color: var(--inchiostro);
       font: inherit; font-size: var(--t-s); font-weight: 600; letter-spacing: .02em; cursor: pointer;
       box-shadow: var(--ombra-lieve); transition: all var(--transizione); }
.btn--primario { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.btn--muto { color: var(--testo); box-shadow: none; font-weight: 500; }
.btn--pericolo { border-color: var(--critico); color: var(--critico); box-shadow: none; }
.btn--piccolo { min-height: 32px; padding: 4px var(--sp-3); font-size: var(--t-xs); }
.btn--grande { min-height: 48px; font-size: var(--t-m); }
.btn--pieno { width: 100%; }
.btn-tondo { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--accento); background: var(--superficie);
             color: var(--accento); font-weight: 700; font-size: var(--t-m); cursor: pointer; display: inline-grid;
             place-items: center; }
.in-linea { display: inline; }
.azioni { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: var(--sp-4) 0; }

/* --- flash: uno solo, nel layout base (→F1) ----------------------------- */
#esito { position: sticky; top: calc(var(--testata) + var(--sp-2)); z-index: 25; max-width: var(--contenitore);
         margin: 0 auto; padding: 0 var(--sp-4); height: 0; overflow: visible; }
.flash { max-width: 460px; margin: var(--sp-2) 0 0 auto; padding: var(--sp-3) var(--sp-4); border-radius: var(--raggio);
         border: 1px solid var(--linea); background: var(--superficie); box-shadow: var(--ombra);
         display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.flash--ok { border-left: 4px solid var(--ok); }
.flash--errore { border-left: 4px solid var(--critico); color: var(--critico); }
.flash--avviso { border-left: 4px solid var(--attenzione); }
.flash__x { background: none; border: 0; font-size: var(--t-l); cursor: pointer; color: inherit; min-width: 40px; min-height: 40px; }

/* --- card generica ------------------------------------------------------- */
.card { background: var(--superficie); border-radius: var(--raggio-grande); box-shadow: var(--ombra);
        padding: var(--sp-6); margin-bottom: var(--sp-6); }
.card__titolo { font-size: var(--t-l); font-weight: 400; margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3);
                border-bottom: 1px solid var(--linea); }
.card--evidenza { border-top: 4px solid var(--accento); }
.card--sobria { box-shadow: none; border: 1px solid var(--linea); }
.intestazione-pagina { margin-bottom: var(--sp-6); }
.intestazione-pagina--centro { text-align: center; }
.intestazione-pagina--centro .intro { margin-left: auto; margin-right: auto; }
.distintivo { display: inline-block; margin: 0 0 var(--sp-3); padding: var(--sp-1) var(--sp-4); border-radius: var(--raggio);
              background: var(--accento); color: var(--su-accento); font-weight: 700; font-size: var(--t-l); }
.sezione { margin-bottom: var(--sp-8); }

/* --- moduli ------------------------------------------------------------- */
.modulo, .modulo-card { display: grid; gap: var(--sp-2); grid-template-columns: minmax(0, 1fr); }
.modulo { max-width: 460px; }
.modulo fieldset, fieldset { border: 0; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-2); min-width: 0; }
legend { font-weight: 700; color: var(--inchiostro); margin-bottom: var(--sp-2); padding: 0; }
label { color: var(--inchiostro); font-weight: 600; font-size: var(--t-s); }
label small { display: block; font-weight: 400; }
input, select, textarea { padding: 10px var(--sp-3); border: 1px solid var(--linea); border-radius: var(--raggio);
                          background: var(--superficie); color: var(--inchiostro); font: inherit; min-height: 44px;
                          max-width: 100%; box-shadow: var(--ombra-lieve); transition: box-shadow var(--transizione); }
input:focus, select:focus, textarea:focus { box-shadow: var(--ombra); }
.scelta { display: flex; gap: var(--sp-2); align-items: flex-start; cursor: pointer; min-height: 32px; font-weight: 500; }
.scelta input { min-height: auto; margin-top: 4px; box-shadow: none; accent-color: var(--accento); }
.scelta--grande { border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--sp-3) var(--sp-4);
                  background: var(--superficie); }
.scelta--grande span { display: grid; }
.scelta--grande:has(input:checked) { border-color: var(--accento); box-shadow: 0 0 0 1px var(--accento); }
.scelte-grandi { display: grid; gap: var(--sp-3); }
.riga-campi { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.riga-campi > div { display: grid; gap: var(--sp-1); flex: 1 1 120px; }
.riga-campi__largo { flex: 3 1 220px !important; }
.riquadro { background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra);
            padding: var(--sp-6); margin: var(--sp-4) 0; max-width: none; }
.riquadro h2, .riquadro h3 { margin-top: 0; }
.due-colonne { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.due-colonne--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.avviso-campo { color: var(--critico); }
.nota-box { background: var(--attenzione-tenue); border-left: 4px solid var(--attenzione); border-radius: var(--raggio);
            padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; color: var(--inchiostro); }
.nota-box p { margin: 0; }
.eta { display: grid; gap: var(--sp-2); justify-items: start; margin: var(--sp-2) 0; }
.nota-box--azione { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.push { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-4); }
.push[hidden] { display: none; }
.lista-avvio { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.lista-avvio li { display: flex; gap: var(--sp-2); align-items: center; }
.lista-avvio__segno { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: var(--t-xs); font-weight: 700; border: 2px solid var(--linea); flex: none; }
.lista-avvio__fatto .lista-avvio__segno { background: var(--ok); border-color: var(--ok); color: var(--su-accento); }
.vuoto { background: var(--superficie); border: 1px dashed var(--linea); border-radius: var(--raggio);
         padding: var(--sp-6); text-align: center; }
.vuoto--piccolo { padding: var(--sp-3); font-size: var(--t-s); }

/* --- chip e disponibilita' ------------------------------------------------ */
.chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px 10px; border-radius: var(--raggio);
        background: var(--carta-sezione); color: var(--testo); font-size: var(--t-xs); font-weight: 600; }
.chip--piccolo { padding: 2px 8px; font-weight: 500; }
.chip--apribile summary { cursor: pointer; }
.chip--apribile[open] { display: block; }
.chip--apribile ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); font-weight: 400; }
/* La disponibilita' si legge anche senza colore: il testo dice tutto, il segno la rafforza (→E5). */
.disponibilita { font-size: var(--t-s); font-weight: 600; display: inline-flex; gap: var(--sp-1); align-items: center; }
.disponibilita::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.disponibilita--aperto { color: var(--ok); }
.disponibilita--aperto::before { background: currentColor; }
.disponibilita--pausa { color: var(--attenzione); }
.disponibilita--chiuso { color: var(--attenzione); }

/* --- home: la vetrina con la foto del cesto ---------------------------------------- */
.eroe { position: relative; overflow: hidden; background: var(--fascia-1); }
.eroe__foto { position: absolute; inset: 0; }
.eroe__giro { position: absolute; inset: 0; margin: 0; }
.eroe__giro img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.eroe__giro figcaption { position: absolute; bottom: var(--sp-6); left: max(var(--sp-4), calc((100% - var(--contenitore)) / 2 + var(--sp-4)));
                         padding: var(--sp-1) var(--sp-3); border-radius: 999px; background: var(--superficie); color: var(--inchiostro);
                         font-weight: 600; font-size: var(--t-s); box-shadow: var(--ombra-lieve); }
/* La dissolvenza: 6 foto, 36 s il giro. Ognuna sale in 1,5 s, resta, e scende mentre sale la successiva; la prima
   sta ferma sotto e si rivede fra l'ultima e il nuovo giro. */
.eroe__giro + .eroe__giro { opacity: 0; animation: eroe-giro 36s ease-in-out infinite; }
/* Le etichette compaiono quando la loro foto e' gia' piena e spariscono prima della successiva: mai due insieme. */
.eroe__giro figcaption { opacity: 0; animation: eroe-etichetta 36s ease-in-out infinite; }
.eroe__giro:nth-child(2) figcaption { animation-delay: 6s; }
.eroe__giro:nth-child(3) figcaption { animation-delay: 12s; }
.eroe__giro:nth-child(4) figcaption { animation-delay: 18s; }
.eroe__giro:nth-child(5) figcaption { animation-delay: 24s; }
.eroe__giro:nth-child(6) figcaption { animation-delay: 30s; }
@keyframes eroe-etichetta { 0% { opacity: 0; } 5% { opacity: 1; } 14% { opacity: 1; } 15.5% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .eroe__giro:first-child figcaption { opacity: 1; } }
.eroe__locali { margin: var(--sp-4) 0 0; font-weight: 600; }
.eroe__giro:nth-child(2) { animation-delay: 6s; }
.eroe__giro:nth-child(3) { animation-delay: 12s; }
.eroe__giro:nth-child(4) { animation-delay: 18s; }
.eroe__giro:nth-child(5) { animation-delay: 24s; }
.eroe__giro:nth-child(6) { animation-delay: 30s; }
@keyframes eroe-giro { 0% { opacity: 0; } 4% { opacity: 1; } 16.7% { opacity: 1; } 20.8% { opacity: 0; } 100% { opacity: 0; } }
/* Dietro il testo una sfumatura del fondo: la foto resta viva a sinistra, il testo si legge a destra. */
.eroe::before { content: ""; position: absolute; inset: 0; z-index: 1;
                background: linear-gradient(90deg, transparent 38%, color-mix(in srgb, var(--fascia-1) 88%, transparent) 58%); }
.eroe__dentro { z-index: 2; }
.eroe__dentro { position: relative; max-width: var(--contenitore); margin: 0 auto; padding: var(--sp-16) var(--sp-4);
                display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center;
                min-height: 520px; }
.eroe__testo { grid-column: 2; }
.eroe__richiamo { font-size: var(--t-2xl); margin: 0 0 var(--sp-1); line-height: 1.1; }
.eroe h1 { font-size: var(--t-3xl); font-weight: 700; margin-bottom: var(--sp-3); }
.eroe__sotto { font-size: var(--t-m); margin: 0 0 var(--sp-6); max-width: 34em; color: var(--testo); }
/* I tipi di locale: foto rotonde su un cerchio di colore che sporge, il nome sotto. */
.fascia-tipi { max-width: var(--contenitore); margin: 0 auto; padding: var(--sp-16) var(--sp-4) var(--sp-8); }
.tipi-tondi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4); }
.tipo-tondo { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; color: var(--inchiostro);
              font-weight: 700; text-decoration: none; }
.tipo-tondo__foto { position: relative; width: min(140px, 100%); aspect-ratio: 1; }
.tipo-tondo__foto::before { content: ""; position: absolute; inset: 6% -6% -2% 10%; border-radius: 50%; background: var(--fascia-1);
                            transition: transform var(--transizione); }
.tipo-tondo:nth-child(even) .tipo-tondo__foto::before { background: var(--fascia-2); }
.tipo-tondo__foto img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
                        box-shadow: var(--ombra-lieve); }
@media (hover: hover) {
  .tipo-tondo:hover .tipo-tondo__foto::before { transform: translate(4px, 4px) scale(1.04); }
  .tipo-tondo:hover span:last-child { color: var(--accento); }
}
/* Una fascia di colore da bordo a bordo (crema verso salvia): sotto, card bianche. */
/* border-image con outset: dipinge fino ai bordi della finestra senza allargare la pagina (niente scroll di lato, →M2). */
.fascia-colore { padding: var(--sp-16) 0; margin-top: 0;
                 border-image: linear-gradient(180deg, var(--fascia-1), var(--fascia-2)) fill 0 / / 0 100vmax; }
.cerca-card { background: var(--superficie); border-radius: var(--raggio-grande); box-shadow: var(--ombra); padding: var(--sp-6);
              display: grid; gap: var(--sp-2); }
.cerca-card__riga { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cerca-card__riga input { flex: 1 1 160px; font-size: var(--t-l); box-shadow: none; }
.cerca-card__alt { font-size: var(--t-s); }
.cerca-card--riga { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: end; margin-bottom: var(--sp-6); }
.cerca-card--riga > div { display: grid; gap: var(--sp-1); }
.conta { color: var(--inchiostro-tenue); font-size: var(--t-s); }
/* I tipi di locale (dominio/tipi_locale.py): riquadri con icona in home, schede sopra gli elenchi. La scheda
   corrente si riconosce anche senza colore: bordo pieno e testo sottolineato (→E5). */
.tipi-locale { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.tipo-locale { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: var(--sp-2) var(--sp-4);
             border: 1px solid var(--linea); border-radius: var(--raggio-grande); background: var(--superficie);
             color: var(--inchiostro); font-weight: 600; text-decoration: none;
             transition: border-color var(--transizione), box-shadow var(--transizione); }
.tipo-locale:active { transform: translateY(1px); transition-duration: 60ms; }
.tipo-locale[aria-current="true"] { border-color: var(--accento); box-shadow: 0 0 0 1px var(--accento);
                                  text-decoration: underline; text-underline-offset: 4px; }
.tipi-locale--riquadri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tipo-locale--riquadro { flex-direction: column; justify-content: center; padding: var(--sp-3) var(--sp-2);
                       box-shadow: var(--ombra-lieve); text-align: center; font-size: var(--t-s); }
.tipo-locale--riquadro .icona { color: var(--accento); }
.tipi-locale--schede { margin: 0 0 var(--sp-4); }
@media (hover: hover) {
  .tipo-locale:hover { border-color: var(--accento); box-shadow: var(--ombra-lieve); }
}
.scelte-tipo { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.scelte-tipo legend { width: 100%; }
.dichiarazione { display: grid; gap: var(--sp-1); padding: var(--sp-3); border-left: 3px solid var(--attenzione);
                 background: var(--attenzione-tenue); border-radius: var(--raggio); }
/* Senza JavaScript: l'avviso della farmacia (o del gas) compare solo con quel tipo scelto, dove :has() esiste. */
@supports selector(:has(*)) {
  form:not(:has(input[name="tipo"][value="farmacia"]:checked)) .solo-parafarmaco { display: none; }
  form:not(:has(input[name="tipo"][value="combustibili"]:checked)) .solo-gas { display: none; }
}
.come__passi { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: grid;
               grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.come__passi li { display: grid; justify-items: center; text-align: center; gap: var(--sp-3); background: var(--superficie);
                  border-radius: var(--raggio-grande); box-shadow: var(--ombra-lieve); padding: var(--sp-8) var(--sp-6) var(--sp-6);
                  margin-top: var(--sp-8); }
.come__passi li > .icona { width: 64px; height: 64px; padding: 16px; margin-top: calc(-1 * (var(--sp-8) + 32px)); border-radius: 50%;
                           background: var(--barra); color: var(--su-barra); box-shadow: var(--ombra-lieve); }
.garanzie .icona { flex: none; color: var(--accento); }
.come .garanzie { justify-content: center; margin-top: var(--sp-6); }
.come > .piccolo { text-align: center; }
.come__passi strong { color: var(--inchiostro); }
/* Le garanzie: una riga di fatti, non un banner (→C3: niente promesse che l'app non mantiene). */
.garanzie { list-style: none; padding: 0; margin: 0 0 var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
            font-size: var(--t-s); }
.garanzie li { display: flex; gap: var(--sp-2); align-items: center; }
.garanzie .icona { width: 22px; height: 22px; }
/* «Ordina di nuovo» in home */
.recenti { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
           gap: var(--sp-4); }
.recenti__voce { display: grid; gap: var(--sp-2); align-content: start; }
.recenti__voce p { margin: 0; }
.recenti__locale a { font-weight: 700; }

/* --- home: «avvisami quando arrivate» e la sezione per i locali ------------ */
.arrivo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.arrivo--compatto { margin-top: var(--sp-6); }
.arrivo__testo h2 { margin-top: 0; }
.avvisami { max-width: none; }
.avvisami__campi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-2); }
.avvisami__campi > div { display: grid; gap: var(--sp-1); min-width: 0; }
.avvisami__campi input { width: 100%; min-width: 0; }
.per-locali__voci { list-style: none; padding: 0; display: grid; gap: var(--sp-6);
                    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.per-locali__voci h3 { margin-top: 0; }
.siti-locale { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
.sito-locale { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
.sito-locale h2 { margin-top: 0; overflow-wrap: anywhere; }
.sito-locale__qr svg { width: 160px; height: 160px; display: block; border-radius: var(--raggio); }
.marchio--locale { font-weight: 700; overflow-wrap: anywhere; }
.indirizzo-proposto { min-height: 1.5em; }
.per-locali__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }

/* --- griglia delle card: 4 / 2 / 1 colonne, come FoodTiger ------------------ */
.griglia-card { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-8) var(--sp-6);
                grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-r__link, .card-p__link { display: flex; flex-direction: column; height: 100%; color: inherit; background: var(--superficie);
                               border-radius: var(--raggio-grande); box-shadow: var(--ombra-lieve); overflow: hidden;
                               border: 1px solid var(--linea); transition: box-shadow var(--transizione), transform var(--transizione); }
.card-r__foto, .card-p__foto { position: relative; display: block; height: 200px; overflow: hidden; background: var(--carta-sezione); }
.card-r__foto > img:not(.card-r__logo), .card-p__foto > img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.segnaposto { display: grid; place-items: center; height: 100%; font-size: var(--t-3xl); font-weight: 800; letter-spacing: .05em;
              color: var(--accento); background: linear-gradient(135deg, var(--segnaposto-1), var(--segnaposto-2)); }
.card-r__logo { position: absolute; left: var(--sp-3); bottom: var(--sp-3); width: 56px; height: 56px; border-radius: var(--raggio);
                object-fit: cover; box-shadow: var(--ombra-lieve); background: var(--superficie); }
.card-r__corpo, .card-p__corpo { display: grid; gap: var(--sp-1); padding: var(--sp-4); flex: 1; align-content: start; }
.card-r__nome, .card-p__nome { font-weight: 700; color: var(--inchiostro); font-size: var(--t-m); }
.card-r__cucina, .card-r__zona { font-size: var(--t-s); }
.card-r__cucina { color: var(--inchiostro-tenue); }
.card-p__desc { font-size: var(--t-s); color: var(--testo); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-p__piede { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.card-p__foto { background: var(--fascia-1); }
.card-p__link { position: relative; }
.card-p__prezzo { font-weight: 700; color: var(--accento); font-size: var(--t-l); }

/* --- pagina del ristorante: copertina con velo e taglio obliquo -------------------- */
.copertina { position: relative; min-height: 360px; display: flex; align-items: flex-end; overflow: hidden;
             background: linear-gradient(135deg, var(--accento-scuro), var(--accento)); }
.copertina__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.copertina::before { content: ""; position: absolute; inset: 0; background: var(--velo); z-index: 1; }
.copertina--senza-foto::before { background: none; }
.copertina__dentro { position: relative; z-index: 2; width: 100%; max-width: var(--contenitore); margin: 0 auto;
                     padding: var(--sp-16) var(--sp-4) calc(var(--sp-16) + var(--sp-4)); display: flex; gap: var(--sp-4); align-items: flex-end; }
.copertina__logo { width: 88px; height: 88px; border-radius: var(--raggio-grande); object-fit: cover; box-shadow: var(--ombra); background: var(--superficie); }
.copertina__nome { color: var(--su-foto); font-size: var(--t-3xl); margin: 0; }
.copertina__cucina { color: var(--su-foto); font-size: var(--t-l); margin: var(--sp-1) 0 0; opacity: .9; }
.copertina__taglio { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 64px; z-index: 3; }
.copertina__taglio polygon { fill: var(--carta); }
/* Le informazioni del locale in una scheda bianca che sale sulla copertina (come le schede della home). */
.info-ristorante { position: relative; z-index: 4; margin-top: calc(-1 * var(--sp-16)); background: var(--superficie);
                   border-radius: var(--raggio-grande); box-shadow: var(--ombra); padding: var(--sp-6); margin-bottom: var(--sp-6); }
.info-ristorante .intro { margin-bottom: var(--sp-4); }
.info-ristorante__riga { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; font-size: var(--t-s); margin: 0 0 var(--sp-3); }
.info-ristorante__sep { color: var(--linea); }
.info-ristorante__chip { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--sp-4); }
/* I giorni di un prodotto nel form della gestione: sette caselle in riga. */
.giorni-prodotto__scelte { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
/* Navigazione a un tocco (rider, uscite): i bottoni per Maps e Waze in riga. */
.naviga { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0; }
/* Le uscite del fattorino: le tappe numerate, nell'ordine in cui si fanno. */
.tappe { margin: var(--sp-2) 0; padding-left: var(--sp-6); }
.tappe li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--linea); }
.tappe__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.uscita-proposta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* L'indirizzo della stampante: lungo, si va a capo ovunque e si copia intero. */
.indirizzo-stampante { display: block; overflow-wrap: anywhere; user-select: all; padding: var(--sp-2); background: var(--carta-sezione); }
/* Il codice di ritiro: grande e leggibile, da mostrare o dettare. */
.codice-ritiro strong { font-size: var(--t-xl); letter-spacing: .15em; font-variant-numeric: tabular-nums; }
/* Il formato di un prodotto accanto al nome («500 g»): piu' piccolo, mai a capo da solo. */
.formato { font-size: var(--t-xs); font-weight: 400; color: var(--inchiostro-tenue); white-space: nowrap; }
/* I passi di un ordine in corso, in piccolo nell'elenco: pieni quelli fatti, il corrente piu' largo (→E5). */
.passi-mini { display: flex; gap: 4px; list-style: none; margin: var(--sp-1) 0 0; padding: 0; flex-basis: 100%; }
.passi-mini__passo { width: 28px; height: 6px; border-radius: 3px; background: var(--linea); }
.passi-mini__passo--fatto { background: var(--accento); }
.passi-mini__passo[aria-current="step"] { width: 44px; }
/* Mini-carrello: una tendina sotto il bottone, larga quanto basta, mai oltre lo schermo (→M2). */
.mini-carrello { position: relative; }
.mini-carrello > summary { list-style: none; }
.mini-carrello > summary::-webkit-details-marker { display: none; }
.mini-carrello__corpo { position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 40;
                        width: min(340px, calc(100vw - 2 * var(--sp-4))); padding: var(--sp-4);
                        background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
                        box-shadow: var(--ombra); font-size: var(--t-s); }
.mini-carrello__locale { margin: 0 0 var(--sp-2); }
.mini-carrello__righe { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.mini-carrello__righe li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0;
                           border-bottom: 1px solid var(--linea); }
.mini-carrello__azioni { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
/* La campanella: stessa tendina del mini-carrello; le nuove con un punto e la parola «nuova» (→E5). */
.campanella__bottone { position: relative; }
.campanella__bottone .icona { width: 20px; height: 20px; }
.campanella__conta { position: absolute; top: -4px; right: -4px; font-size: 11px; }
.campanella__elenco { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.campanella__elenco li { display: grid; gap: 2px; padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--linea);
                         position: relative; }
.campanella__nuova::before { content: ""; position: absolute; left: 0; top: calc(var(--sp-2) + 6px); width: 8px; height: 8px;
                             border-radius: 50%; background: var(--accento); }
.campanella__elenco small { color: var(--inchiostro-tenue); }
.campanella__piede { margin: 0; }
/* Quanto manca al minimo e alla consegna gratis (_macro.soglie): testo prima, la barra solo come aiuto. */
.soglie { font-size: var(--t-s); margin: var(--sp-2) 0 var(--sp-3); }
.soglie p { margin: 0 0 var(--sp-1); }
.soglie__barra { width: 100%; height: 6px; accent-color: var(--accento); }
/* Consegna e costi: le voci in riga su schermo largo, in colonna sul telefono. */
.consegna-costi { background: var(--carta-sezione); border-radius: var(--raggio-grande); padding: var(--sp-4);
                  margin-bottom: var(--sp-4); font-size: var(--t-s); }
.consegna-costi__voci { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); margin: 0; }
.consegna-costi__voci > div { position: relative; padding-left: 52px; min-height: 42px; display: grid; align-content: center; }
.consegna-costi__voci dt .icona { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
                                  padding: 10px; border-radius: 50%; background: var(--fascia-1); color: var(--accento); }
.consegna-costi__voci > div:nth-child(even) dt .icona { background: var(--fascia-2); }
.consegna-costi__voci dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--inchiostro-tenue); }
.consegna-costi__voci dd { margin: 0; font-weight: 600; }
.consegna-costi__zone { margin-top: var(--sp-2); }
.consegna-costi__zone summary { cursor: pointer; color: var(--inchiostro-tenue); min-height: 40px; display: flex; align-items: center;
                                text-decoration: underline; text-underline-offset: 3px; }
.consegna-costi__zone summary::after { content: " ▾"; white-space: pre; }
.consegna-costi__zone[open] summary::after { content: " ▴"; }
.consegna-costi__zone ul { margin: 0; padding-left: var(--sp-4); }

/* Le pillole delle categorie restano sotto la testata mentre si scorre il menu. */
.pillole { position: sticky; top: var(--testata); z-index: 20; display: flex; gap: var(--sp-2); overflow-x: auto;
           padding: var(--sp-3) 0; margin: var(--sp-4) 0 0; background: var(--carta); scrollbar-width: none; }
.pillole::-webkit-scrollbar { display: none; }
.pillola-cat { flex: none; white-space: nowrap; padding: var(--sp-2) var(--sp-4); border-radius: 999px; background: var(--superficie);
               color: var(--inchiostro); border: 1px solid var(--linea); font-weight: 600; font-size: var(--t-s);
               transition: all var(--transizione); }
.pillola-cat:focus-visible, .pillola-cat:active { background: var(--accento); color: var(--su-accento); }
/* Il catalogo grande (servizi/catalogo.sfoglia): il reparto aperto si riconosce anche senza colore (→E5). */
.pillola-cat[aria-current="true"] { background: var(--accento-tenue); color: var(--accento); text-decoration: underline;
                                    text-underline-offset: 4px; box-shadow: inset 0 0 0 1px var(--accento); }
.cerca-catalogo { display: flex; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2); }
.cerca-catalogo input { flex: 1 1 auto; min-width: 0; }
.pagine { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: center; margin: var(--sp-6) 0; }
/* Il titolo di una categoria: il trattino d'accento a sinistra e quanti prodotti ha. */
.categoria h2 { margin-top: var(--sp-8); padding-left: var(--sp-3); border-left: 4px solid var(--accento); line-height: 1.1; }
.categoria h2 small { font-weight: 400; font-size: var(--t-s); margin-left: var(--sp-1); }

/* --- finestra di scelta del piatto (:target, senza JavaScript) ----------------------- */
.modale, .pannello { display: none; position: fixed; inset: 0; z-index: 40; }
.modale:target { display: grid; place-items: center; padding: var(--sp-4); }
.modale__fondo, .pannello__fondo { position: absolute; inset: 0; background: var(--velo); }
.modale__scatola { position: relative; width: min(800px, 100%); max-height: calc(100vh - 32px); overflow: auto;
                   background: var(--superficie); border-radius: var(--raggio-grande); box-shadow: var(--ombra); }
.modale__testa { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
                 padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--linea); }
.modale__testa h3 { margin: 0; }
.modale__chiudi { font-size: 28px; line-height: 1; color: var(--inchiostro-tenue); min-width: 40px; min-height: 40px;
                  display: grid; place-items: center; }
.modale__corpo { padding: var(--sp-6); }
.modale__corpo--foto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6); align-items: start; }
.modale__foto { width: 100%; border-radius: var(--raggio); }
.modale__form { display: grid; gap: var(--sp-3); }
.modale__form p { margin: 0; }
.modale__prezzo { font-size: var(--t-xl); font-weight: 700; color: var(--inchiostro); }
.modale__azione { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; border-top: 1px solid var(--linea);
                  padding-top: var(--sp-4); margin-top: var(--sp-2); }
.modale__azione .btn { flex: 1; }
.quantita { width: 84px; }
.quantita--peso { width: auto; min-width: 0; max-width: 100%; flex: 1 1 auto; }
.gruppo { margin: 0; }
.gruppo legend small { display: inline; margin-left: var(--sp-1); font-weight: 400; }
.gruppo__scelte { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Le scelte singole sono bottoni-interruttore con contorno, come le varianti di FoodTiger. */
.toggle { position: relative; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; min-height: 0; cursor: pointer; }
.toggle span { display: inline-flex; gap: var(--sp-1); align-items: center; min-height: 40px; padding: var(--sp-2) var(--sp-4);
               border: 1px solid var(--accento); border-radius: var(--raggio); color: var(--accento); font-weight: 600; font-size: var(--t-s); }
.toggle input:checked + span { background: var(--accento); color: var(--su-accento); }
.toggle input:checked + span small { color: inherit; }
.toggle input:focus-visible + span { outline: 2px solid var(--accento); outline-offset: 2px; }
.spunta { display: flex; gap: var(--sp-2); align-items: center; width: 100%; min-height: 36px; font-weight: 500; cursor: pointer; }
.spunta input { min-height: auto; box-shadow: none; accent-color: var(--accento); width: 18px; height: 18px; }

/* --- pannello laterale del carrello ------------------------------------------------ */
.pannello:target { display: block; }
.pannello__scatola { position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 100%); overflow: auto;
                     background: var(--superficie); box-shadow: var(--ombra); display: flex; flex-direction: column; gap: var(--sp-3);
                     padding-bottom: var(--sp-6); }
.pannello__scatola > :not(.modale__testa) { margin-left: var(--sp-6); margin-right: var(--sp-6); }
.pannello__scatola .btn--pieno { width: auto; }       /* il flex li allarga gia': con width 100% + margini sforerebbero */
.pannello__righe { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.riga-pannello { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3);
                 border-right: 5px solid var(--accento); background: var(--carta-sezione); border-radius: var(--raggio); }
.riga-pannello__testo { display: grid; gap: 2px; font-size: var(--t-s); }
.riga-pannello__testo strong { color: var(--inchiostro); }
.riga-pannello__azioni { display: flex; gap: var(--sp-1); align-items: center; }
.pannello__tot { display: flex; justify-content: space-between; font-size: var(--t-l); color: var(--inchiostro); margin: 0; }
.carrello-flottante { position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 35; width: 64px; height: 64px;
                      border-radius: 50%; background: var(--accento); color: var(--su-accento); display: grid; place-items: center;
                      font-size: 26px; box-shadow: var(--ombra); }
.carrello-flottante .conteggio { position: absolute; top: -4px; right: -4px; background: var(--superficie); color: var(--accento);
                                 box-shadow: var(--ombra-lieve); font-size: var(--t-s); }

/* --- righe, totali, carrello --------------------------------------------------------- */
.righe { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: grid; gap: var(--sp-2); }
.riga-conto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-2); align-items: baseline; }
.righe--modificabili .riga-conto { grid-template-columns: auto minmax(0, 1fr) auto auto; background: var(--superficie);
                                   border-right: 5px solid var(--accento); border-radius: var(--raggio); padding: var(--sp-3);
                                   box-shadow: var(--ombra-lieve); }
.riga-conto__q { font-variant-numeric: tabular-nums; color: var(--inchiostro-tenue); }
.riga-conto__nome { color: var(--inchiostro); }
.riga-conto__opz { display: block; }
.riga-conto__prezzo { font-variant-numeric: tabular-nums; text-align: right; color: var(--inchiostro); }
.totali { margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-1); }
.totali div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.totali dt { color: var(--testo); font-weight: 600; }
.totali dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--inchiostro); }
.totali__tot { border-top: 1px solid var(--linea); padding-top: var(--sp-2); font-weight: 700; font-size: var(--t-l); }
.menu-carrello__tot { display: flex; justify-content: space-between; gap: var(--sp-2); color: var(--inchiostro); }
.zone-elenco { padding-left: var(--sp-4); font-size: var(--t-s); }

/* --- checkout: due colonne su fondo grigio ------------------------------------------- */
.checkout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.checkout__destra { position: sticky; top: calc(var(--testata) + var(--sp-4)); }
.pagamento { margin: var(--sp-4) 0 var(--sp-6); }

/* --- ordine: timeline verticale tratteggiata ------------------------------------------- */
.stato-ordine__ora { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--sp-4); color: var(--inchiostro); }
.timeline { list-style: none; padding: 0; margin: 0 0 var(--sp-4); position: relative; display: grid; gap: var(--sp-4); }
.timeline::before { content: ""; position: absolute; left: 16px; top: 8px; bottom: 8px; border-left: 2px dashed var(--linea); }
.timeline__passo { position: relative; display: flex; gap: var(--sp-3); align-items: center; color: var(--inchiostro-tenue); }
.timeline__segno { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
                   font-size: var(--t-s); background: var(--superficie); border: 2px solid var(--linea); position: relative; z-index: 1; }
.timeline__passo--fatto { color: var(--inchiostro); }
.timeline__passo--fatto .timeline__segno { background: var(--ok); border-color: var(--ok); color: var(--su-accento); }
.timeline__passo--ora { color: var(--inchiostro); font-weight: 700; }
.timeline__passo--ora .timeline__segno { background: var(--accento); border-color: var(--accento); color: var(--su-accento);
                                          box-shadow: 0 0 0 4px var(--accento-tenue); }
.storico { padding-left: var(--sp-6); color: var(--inchiostro-tenue); font-size: var(--t-s); }

/* --- elenchi (ordini, gestione) ------------------------------------------------------- */
.ordini-elenco { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.ordine-riga { background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra-lieve);
               padding: var(--sp-3) var(--sp-4); display: flex; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; align-items: center; }
.ordine-riga--grande { display: grid; }
.ordine-riga__fatti { color: var(--inchiostro-tenue); font-size: var(--t-s); width: 100%; }

/* Pillole di stato: testo sempre presente, il colore rafforza (→E5, →FE4). */
.pillola { font-size: var(--t-xs); font-weight: 700; padding: 3px var(--sp-2); border-radius: var(--raggio); text-transform: uppercase;
           letter-spacing: .03em; border: 1px solid var(--linea); background: var(--superficie); white-space: nowrap; color: var(--inchiostro); }
.pillola--consegnato, .pillola--ritirato, .pillola--servito, .pillola--attivo { background: var(--ok-tenue); border-color: var(--ok); }
.pillola--nuovo, .pillola--in_attesa_pagamento, .pillola--in_revisione { background: var(--attenzione-tenue); border-color: var(--attenzione); }
.pillola--accettato, .pillola--pronto, .pillola--in_consegna { background: var(--accento-tenue); border-color: var(--accento); }
.pillola--annullato, .pillola--rifiutato, .pillola--sospeso { background: var(--critico-tenue); border-color: var(--critico); color: var(--critico); }

/* anteprime delle immagini caricate: misure dichiarate nel markup, qui solo la resa */
.anteprima { width: 100%; border-radius: var(--raggio); }
.anteprima--logo { width: 120px; }

/* --- gestione ristorante ----------------------------------------------------------- */
.schede-nav { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--linea); margin: 0 0 var(--sp-4); overflow-x: auto; scrollbar-width: thin; }
.schede-nav a { padding: var(--sp-2) var(--sp-3); color: var(--testo); font-weight: 600; font-size: var(--t-s);
                border-bottom: 3px solid transparent; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.schede-nav a[aria-current="page"] { color: var(--inchiostro); border-bottom-color: var(--accento); }
.barra-stato { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.sintesi { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
/* →D4: i numeri KPI sono neri; il colore e' riservato. «Da accettare» e' ambra perche' ASPETTA te. */
.kpi { background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra-lieve);
       padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; min-width: 140px; }
.kpi__n { font-size: var(--t-xl); font-weight: 700; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.kpi__l { color: var(--inchiostro-tenue); font-size: var(--t-s); }
.kpi--da-fare { border-left: 4px solid var(--attenzione); }
.colonne { display: grid; gap: var(--sp-4); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.colonna { background: var(--carta-sezione); border-radius: var(--raggio); padding: var(--sp-3); }
.colonna h2 { margin: 0 0 var(--sp-3); font-size: var(--t-m); font-weight: 700; display: flex; gap: var(--sp-2); align-items: center; }
.biglietto { background: var(--superficie); border-radius: var(--raggio); padding: var(--sp-3); margin-bottom: var(--sp-3);
             display: grid; gap: var(--sp-2); box-shadow: var(--ombra-lieve); }
.biglietto--nuovo { border-left: 4px solid var(--attenzione); }
.biglietto__titolo { font-weight: 700; color: var(--inchiostro); }
.biglietto__fatti, .biglietto__note { margin: 0; font-size: var(--t-s); color: var(--inchiostro-tenue); }
.biglietto__righe { margin: 0; padding-left: var(--sp-4); font-size: var(--t-s); }
.biglietto__azioni { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.categoria .ordini-elenco { margin-bottom: var(--sp-4); }

/* La tabella scorre DENTRO il suo contenitore: il body non scorre mai in orizzontale (→M2). */
.tabella-scorre { overflow-x: auto; background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra-lieve); }
.tabella { width: 100%; border-collapse: collapse; }
.tabella th, .tabella td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--linea); }
.tabella th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--inchiostro-tenue); }

.barra-mobile { display: none; }
.barra-basso { display: none; }

/* --- piede grigio ---------------------------------------------------------------------- */
.pie { background: var(--barra); color: var(--su-barra-tenue); font-size: var(--t-s); }
.pie a { color: var(--su-barra); }
.pie__colonne { max-width: var(--contenitore); margin: 0 auto; padding: var(--sp-8) var(--sp-4) var(--sp-4); display: grid;
                gap: var(--sp-6); grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.pie__colonne h2 { color: var(--su-barra); font-size: var(--t-m); margin: 0 0 var(--sp-3); }
.pie__colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.pie__colonne .marchio { color: var(--su-barra); display: inline-block; margin-bottom: var(--sp-3); }
.pie__dentro { max-width: var(--contenitore); margin: 0 auto; padding: var(--sp-6) var(--sp-4);
               display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.pie__legale { padding-top: var(--sp-3); padding-bottom: var(--sp-4); font-size: var(--t-xs); border-top: 1px solid var(--su-barra-tenue); }
.pie__dentro + .pie__legale { margin-top: calc(-1 * var(--sp-3)); }

/* Chi ha chiesto meno movimento non deve subirlo. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 1199px) {
  .griglia-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* Sul telefono la foto sta sopra, bassa; il testo sotto, su fondo crema. */
  .eroe__foto { position: relative; height: 120px; }      /* bassa: titolo e CAP restano nel primo schermo */
  /* Sul telefono prima il titolo e il CAP, poi la descrizione: l'azione nel primo schermo. */
  .eroe__testo { display: flex; flex-direction: column; }
  .eroe__testo .cerca-card { order: 1; margin-bottom: var(--sp-4); }
  .eroe__sotto { order: 2; font-size: var(--t-s); margin-bottom: 0; }
  .eroe__locali { order: 3; }
  .eroe__giro img { object-position: 20% center; }
  .eroe__giro figcaption { bottom: var(--sp-3); left: var(--sp-4); font-size: var(--t-xs); }
  .eroe::before { display: none; }
  .eroe__dentro { grid-template-columns: minmax(0, 1fr); padding: var(--sp-6) var(--sp-4) var(--sp-8); min-height: 0; }
  .eroe__testo { grid-column: 1; }
  .eroe h1 { font-size: var(--t-2xl); }
  .eroe__richiamo { font-size: var(--t-xl); }
  .tipi-tondi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fascia-tipi { padding-top: var(--sp-8); }
  .checkout, .due-colonne--7-5 { grid-template-columns: minmax(0, 1fr); }
  .checkout__destra { position: static; order: -1; }
  .modale__corpo--foto { grid-template-columns: minmax(0, 1fr); }
  .cerca-card--riga { grid-template-columns: minmax(0, 1fr); }
  .arrivo, .avvisami__campi, .sito-locale { grid-template-columns: minmax(0, 1fr); }
  .btn--piccolo { min-height: 40px; }        /* →M7: su un telefono anche i bottoni piccoli si toccano */
  .copertina { min-height: 240px; }
  .copertina__nome { font-size: var(--t-2xl); }
  .copertina__dentro { padding-bottom: calc(var(--sp-8) + var(--sp-4)); }
  .info-ristorante { margin-top: calc(-1 * var(--sp-6)); padding: var(--sp-4); }
  .consegna-costi__voci { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .consegna-costi__voci > div { padding-left: 40px; }
  .consegna-costi__voci dt .icona { width: 32px; height: 32px; padding: 7px; }
  .copertina__logo { width: 64px; height: 64px; }
}

@media (max-width: 760px) {
  /* Sul telefono la testata scorre via: in basso c'e' gia' la barra (e le pillole si agganciano in cima). */
  :root { --testata: 0px; }
  .intestazione { position: static; }
  .nav__cerca { display: none; }
  /* Tre ingressi (6/10/2026): con le etichette corte stanno su una riga; se non bastasse vanno a capo, mai una voce
     tagliata a meta' dal bordo. */
  .nav__voci { flex-wrap: wrap; gap: 0 var(--sp-4); }
  .voce-lunga { display: none; }
  .voce-breve { display: inline; }
  .nav__voci a { padding: var(--sp-2) 0; }
  .nav__voci a { white-space: nowrap; }
  .pie__colonne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .colonne { grid-template-columns: minmax(0, 1fr); }
  body.con-barra .pie { padding-bottom: 72px; }
  .carrello-flottante { display: none; }         /* su mobile c'e' la barra in basso (→M1, →M3: niente sovrapposizioni) */
  .barra-mobile { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
                  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; min-height: 56px;
                  padding: var(--sp-3) var(--sp-4); background: var(--accento); color: var(--su-accento); box-shadow: var(--ombra); }
  /* La barra in basso (_barra_basso.html): cinque voci a portata di pollice; la «Vedi carrello» del menu sale
     sopra di lei, e il carrello in alto si toglie (e' gia' qui sotto). */
  .barra-basso { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0;
                 bottom: 0; z-index: 36; background: var(--superficie); border-top: 1px solid var(--linea);
                 box-shadow: var(--ombra-testata); padding-bottom: env(safe-area-inset-bottom); }
  .barra-basso__voce { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 56px;
                       padding: var(--sp-2) 0 6px; font-size: var(--t-xs); color: var(--inchiostro-tenue); text-decoration: none; }
  .barra-basso__voce .icona { width: 24px; height: 24px; }
  .barra-basso__voce[aria-current="page"] { color: var(--accento); font-weight: 700; }
  .barra-basso__voce[aria-current="page"] span:not(.conteggio) { text-decoration: underline; text-underline-offset: 3px; }
  .barra-basso__conta { position: absolute; top: 4px; left: calc(50% + 6px); font-size: 11px; }
  body.con-barra-basso .pie { padding-bottom: 72px; }
  body.con-barra-basso.con-barra .pie { padding-bottom: 136px; }
  body.con-barra-basso .barra-mobile { bottom: calc(56px + env(safe-area-inset-bottom)); }
  body.con-barra-basso .nav__carrello, body.con-barra-basso .mini-carrello:not(.campanella) { display: none; }
  /* Nella scheda del prodotto «Aggiungi al carrello» resta in fondo mentre si scorrono le opzioni. */
  .modale__azione { position: sticky; bottom: 0; z-index: 1; background: var(--superficie);
                    padding-bottom: var(--sp-4); margin-bottom: calc(-1 * var(--sp-6)); }
  /* →M5: le tabelle diventano schede */
  .tabella thead { display: none; }
  .tabella tr { display: grid; border-bottom: 1px solid var(--linea); padding: var(--sp-2) var(--sp-4); }
  .tabella td { border: 0; padding: var(--sp-1) 0; }
  .tabella td::before { content: attr(data-etichetta) ": "; color: var(--inchiostro-tenue); font-size: var(--t-s); }
}

@media (max-width: 575px) {
  .griglia-card { grid-template-columns: minmax(0, 1fr); }
  /* I prodotti a riga, come nelle app di consegna: testo a sinistra, foto quadrata a destra, il «+» sulla foto. */
  .categoria .griglia-card { gap: var(--sp-3); }
  .card-p__link { flex-direction: row-reverse; min-height: 128px; }
  .card-p__foto { flex: none; width: 116px; height: auto; min-height: 116px; }
  .card-p__corpo { padding: var(--sp-3); }
  .card-p__desc { -webkit-line-clamp: 2; }
  .nav { gap: var(--sp-2); }
  .pie__colonne { grid-template-columns: minmax(0, 1fr); }
  .contenitore { padding-top: var(--sp-6); }
  .modale:target { padding: 0; align-items: end; }
  .modale__scatola { max-height: 92vh; border-radius: var(--raggio-grande) var(--raggio-grande) 0 0; }
}

/* Con una finestra o il pannello aperti, la pagina sotto non scorre. */
html:has(.modale:target), html:has(.pannello:target) { overflow: hidden; }

/* --- allergeni (Reg. UE 1169/2011) ------------------------------------------ */
.card-p__allergeni { font-size: var(--t-xs); color: var(--inchiostro-tenue); }
.allergeni-piatto { margin: var(--sp-2) 0 var(--sp-3); }
.allergeni-piatto__titolo { margin: 0 0 var(--sp-1); font-size: var(--t-s); font-weight: 600; }
.allergeni-piatto__lista { list-style: none; padding: 0; margin: 0 0 var(--sp-1); display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.filtro-allergeni { margin-bottom: var(--sp-4); }
.filtro-allergeni > summary { cursor: pointer; font-weight: 600; display: inline-flex; gap: var(--sp-2); align-items: center; }
.filtro-allergeni__form fieldset { border: 0; padding: 0; margin: var(--sp-3) 0 0; }
.filtro-allergeni__scelte, .scelte-allergeni { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 var(--sp-3); }
.filtro-allergeni__azioni { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0; }
.scelte-allergeni { margin-bottom: var(--sp-3); }

/* --- codice sconto --------------------------------------------------------------- */
.codice-sconto { margin: var(--sp-3) 0; }
.codice-sconto__riga { display: flex; gap: var(--sp-2); }
.codice-sconto__riga input { flex: 1; min-width: 0; text-transform: uppercase; }
.codice-sconto__attivo { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: 0 0 var(--sp-2); }
.codice-sconto__errore { color: var(--critico); font-size: var(--t-s); margin: 0 0 var(--sp-2); }

/* --- stelle e recensioni ------------------------------------------------------- */
.stelle { display: inline-flex; gap: var(--sp-1); align-items: baseline; white-space: nowrap; }
.stelle__piene { color: var(--accento); letter-spacing: 1px; }
.stelle__num { font-size: var(--t-s); color: var(--inchiostro-tenue); }
.recensione__testa { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; font-size: var(--t-s); }
.recensione__testo { white-space: pre-line; margin: var(--sp-2) 0; }
.recensione__risposta { border-left: 3px solid var(--linea); padding-left: var(--sp-3); margin-top: var(--sp-2); font-size: var(--t-s); }
.recensione__risposta p { margin: var(--sp-1) 0 0; white-space: pre-line; }
.recensioni-elenco { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
/* Il voto a stelle senza JavaScript: i radio in ordine 5..1 e la riga rovesciata, cosi' «~» colora
   le stelle a sinistra di quella scelta o sotto il mouse. Il radio resta nel DOM (tastiera, lettori). */
.voto { border: 0; padding: 0; }
.voto__stelle { display: inline-flex; flex-direction: row-reverse; gap: var(--sp-1); }
.voto__stelle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.voto__stelle label { font-size: 32px; line-height: 1; cursor: pointer; color: var(--linea); }
.voto__stelle label::before { content: "★"; }
.voto__stelle input:checked ~ label, .voto__stelle label:hover, .voto__stelle label:hover ~ label { color: var(--accento); }
.voto__stelle input:focus-visible + label { outline: 2px solid var(--accento); outline-offset: 2px; }
.modulo--stretto { max-width: 560px; margin-top: var(--sp-6); }

/* --- posizione del rider ------------------------------------------------------------ */
.mappa { height: 260px; border-radius: var(--raggio); overflow: hidden; margin-bottom: var(--sp-2); }
.condividi { border-top: 1px solid var(--linea); padding-top: var(--sp-2); margin-top: var(--sp-2); }
.condividi .btn[aria-pressed="true"] { background: var(--accento); color: var(--su-accento); }
.riga-compatta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.riga-compatta select, .riga-compatta input { min-width: 0; max-width: 100%; }
.utilizzo { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.utilizzo__voce { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr; gap: var(--sp-3); align-items: center; }
.utilizzo__nome { font-weight: 600; }
.utilizzo meter { width: 160px; max-width: 40%; vertical-align: middle; margin-right: var(--sp-2); }
@media (max-width: 575px) { .utilizzo__voce { grid-template-columns: 1fr; gap: var(--sp-1); } }
.elenco-puntato { padding-left: var(--sp-4); display: grid; gap: var(--sp-1); }
.faq details { border-bottom: 1px solid var(--linea); padding: var(--sp-3) 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: var(--sp-2) 0 0; }
.faq-indice { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }

/* --- guide (importate dal vecchio sito) e banner della demo ----------------------- */
.banner-demo { margin: 0; padding: var(--sp-2) var(--sp-4); text-align: center; font-size: var(--t-s);
               background: var(--attenzione-tenue); color: var(--inchiostro); border-bottom: 1px solid var(--attenzione); }
.guida { max-width: 760px; margin: 0 auto; }
.briciole { font-size: var(--t-s); color: var(--inchiostro-tenue); margin-bottom: var(--sp-2); }
.guida__testo h2 { margin-top: var(--sp-6); }
.guida__testo img { max-width: 100%; height: auto; border-radius: var(--raggio); }
.guida__testo table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; display: block; overflow-x: auto; }
.guida__testo th, .guida__testo td { border: 1px solid var(--linea); padding: var(--sp-2); text-align: left; }
.guida__testo details { border-bottom: 1px solid var(--linea); padding: var(--sp-2) 0; }
.guida__testo summary { cursor: pointer; }
.guida__testo summary h3 { display: inline; font-size: var(--t-m); }
.invito-preventivi { background: var(--accento-tenue); border-radius: var(--raggio-grande); padding: var(--sp-4);
                     margin: var(--sp-4) 0; display: grid; gap: var(--sp-2); justify-items: start; }
.guide-correlate ul, .guide-elenco { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.guide-elenco { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.guide-elenco__voce a { font-weight: 600; }

/* --- cameriere.it (app/facce.py) ----------------------------------------------------- */
.cam-azioni { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.cam-intro { text-align: center; max-width: 46em; margin-left: auto; margin-right: auto; }
.cam-funzioni { list-style: none; padding: 0; display: grid; gap: var(--sp-6);
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cam-funzione { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cam-funzione img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cam-funzione h3, .cam-funzione p, .cam-funzione ul { margin-left: var(--sp-4); margin-right: var(--sp-4); }
.cam-funzione h3 { margin-top: var(--sp-4); }
.spunte { list-style: none; padding: 0; margin-bottom: var(--sp-4); display: grid; gap: var(--sp-1); font-size: var(--t-s); }
/* La spunta sta nel margine: quando la voce va a capo, il testo resta allineato (rientro sporgente). */
.spunte li { position: relative; padding-left: 1.5em; }
.spunte li::before { content: "✓"; color: var(--accento); font-weight: 700; position: absolute; left: 0; top: 0; }
/* «in arrivo» e' un'informazione, non un giudizio: colore d'accento tenue, non verde ne' ambra (→FE4). */
.in-arrivo { display: inline-block; vertical-align: middle; margin-left: var(--sp-1); padding: 0 var(--sp-2); border-radius: 999px;
             background: var(--accento-tenue); color: var(--inchiostro); font-size: var(--t-xs); font-weight: 600;
             white-space: nowrap; }
.cam-demo-qr { display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-6); }
.cam-demo-qr__codice svg { width: 180px; height: 180px; display: block; border-radius: var(--raggio); }
.cam-finale { text-align: center; padding: var(--sp-8) var(--sp-4); background: var(--carta-sezione); border-radius: var(--raggio-grande); }

/* --- al tavolo (cameriere.it, docs/adr/0002) -------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tavolo-banner { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.tavolo-banner + .info-ristorante { margin-top: var(--sp-4); }   /* sotto il riquadro del tavolo, niente sovrapposizione */
.tavolo-ingresso { max-width: 32em; }
.tavolo-gruppi { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: var(--sp-3) 0; }
.tavolo-gruppo-nuovo { display: grid; gap: var(--sp-1); padding-left: var(--sp-6); }
.quote-conto { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.quota { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }
.quota__nome { flex: 1 1 14em; font-weight: 600; }
.quota__importo { font-size: var(--t-l); font-variant-numeric: tabular-nums; }
.quota__persone input { width: 4.5em; min-height: 32px; }
.azioni-pagamento { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.azioni-pagamento select { min-height: 32px; }
.romana { margin-top: var(--sp-3); }
.per-voce { margin-top: var(--sp-3); }
.voci { list-style: none; padding: 0; display: grid; gap: var(--sp-1); margin: var(--sp-2) 0; }
.voce { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center;
        padding: var(--sp-1) 0; border-bottom: 1px solid var(--linea); }
.voce--pagata, .voce--in_corso { color: var(--inchiostro-tenue); }
.romana input[type="number"] { width: 5em; }
.quota--mia { box-shadow: 0 0 0 2px var(--accento); }
.ordine-tavolo { margin-bottom: var(--sp-3); }
.ordine-tavolo__testa { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.riga-conto__sposta { display: flex; gap: var(--sp-1); align-items: center; flex-basis: 100%; justify-content: flex-end; }
.riga-conto__sposta select { min-height: 32px; max-width: 14em; }
.sintesi { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.sala { list-style: none; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.postazione { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.postazione__nome { font-weight: 700; font-size: var(--t-l); }
.postazione--aperta { box-shadow: 0 0 0 2px var(--accento); }
.postazione--spenta { opacity: .6; }
.postazione__altro summary { cursor: pointer; font-size: var(--t-s); color: var(--inchiostro-tenue); }
.postazione__altro code { word-break: break-all; font-size: var(--t-xs); }
/* Il foglio dei QR: schede da ritagliare, sempre bianco e nero (si stampano). Il bianco e il nero
   sono quelli della carta, non del tema: per questo vengono dai token --carta-stampa / --inchiostro-stampa. */
.foglio-qr { list-style: none; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.scheda-qr { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-1);
             padding: var(--sp-4); border: 1px dashed var(--linea); border-radius: var(--raggio-grande);
             background: var(--carta-stampa); color: var(--inchiostro-stampa); break-inside: avoid; }
.scheda-qr__locale { font-size: var(--t-s); }
.scheda-qr__nome { font-size: var(--t-xl); font-weight: 800; }
.scheda-qr__codice svg { width: 180px; height: 180px; }
.scheda-qr__invito { font-weight: 600; }
.scheda-qr__url { font-size: var(--t-xs); word-break: break-all; }
/* --- il kit stampabile (kit/stampa.html, servizi/kit.py) -----------------------------
   Misure in mm e pt: sono pezzi di carta. A schermo e' un'anteprima che scorre nel suo riquadro
   (→M2: la pagina non scorre mai in orizzontale); in stampa ogni foglio e' una pagina del suo formato. */
@page kit-quadrato { size: 200mm 200mm; margin: 0; }
@page kit-a5 { size: A5; margin: 0; }
@page kit-a6 { size: A6; margin: 0; }
@page kit-a4 { size: A4; margin: 0; }
.kit-fogli { display: grid; gap: var(--sp-6); justify-items: center; margin-top: var(--sp-6); overflow-x: auto;
             padding-bottom: var(--sp-4); }
.kit-foglio { background: var(--carta-stampa); color: var(--inchiostro-stampa); box-shadow: var(--ombra);
              box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; align-items: center;
              justify-content: center; text-align: center; gap: 4mm; padding: 12mm; flex: none;
              -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.kit-foglio p { margin: 0; }
.kit-foglio--vetrofanica { width: 200mm; height: 200mm; page: kit-quadrato; }
.kit-foglio--a5 { width: 148mm; height: 210mm; page: kit-a5; }
.kit-foglio--a6 { width: 105mm; height: 148mm; page: kit-a6; padding: 7mm; gap: 3mm; }
.kit-foglio--a4 { width: 210mm; height: 297mm; page: kit-a4; padding: 0; }
.kit-griglia { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; }
.kit-cartolina { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3mm;
                 padding: 8mm; text-align: center; border: 0.2mm dashed var(--linea); box-sizing: border-box; }
.kit-foglio--a6 .kit-cartolina { border: 0; padding: 0; height: 100%; }
.kit-cartolina--retro { align-items: stretch; text-align: left; }
.kit-locale { font-weight: 700; font-size: 13pt; color: var(--accento); text-transform: uppercase; letter-spacing: .08em; }
.kit-titolo { font-weight: 700; font-size: 30pt; line-height: 1.1; color: var(--inchiostro-stampa); }
.kit-titolo--medio { font-size: 18pt; }
.kit-titolo--piccolo { font-size: 14pt; }
.kit-sotto { font-size: 15pt; max-width: 110mm; }
.kit-invito { font-size: 13pt; max-width: 150mm; }
.kit-url { font-weight: 700; font-size: 14pt; overflow-wrap: anywhere; color: var(--accento); }
.kit-sconto { font-size: 12pt; border: 0.4mm solid var(--accento); border-radius: var(--raggio); padding: 2mm 4mm; }
.kit-passi { margin: 0; padding-left: 5mm; font-size: 10.5pt; display: grid; gap: 2mm; }
.kit-firma { font-size: 9pt; }
.kit-qr svg { display: block; width: 100mm; height: 100mm; }
.kit-foglio--a5 .kit-qr svg { width: 80mm; height: 80mm; }
.kit-foglio--a6 .kit-qr svg, .kit-griglia .kit-qr svg { width: 52mm; height: 52mm; }
.kit-adesivi { display: grid; grid-template-columns: repeat(3, 60mm); grid-auto-rows: 60mm; gap: 8mm;
               justify-content: center; align-content: center; }
.kit-adesivo { border-radius: 50%; border: 0.4mm solid var(--accento); display: flex; flex-direction: column;
               align-items: center; justify-content: center; gap: 1.5mm; padding: 7mm; text-align: center;
               box-sizing: border-box; overflow: hidden; }
.kit-adesivo .kit-qr svg { width: 28mm; height: 28mm; }
.kit-adesivo__nome { font-weight: 700; font-size: 9pt; line-height: 1.1; }
.kit-adesivo__invito { font-size: 7.5pt; }
.kit-adesivo__url { font-size: 6.5pt; font-weight: 700; overflow-wrap: anywhere; max-width: 44mm; }
.guadagni-link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
.guadagni-link__qr svg { width: 140px; height: 140px; }
.guadagni-link h2 { margin-top: 0; }
@media (max-width: 860px) { .guadagni-link { grid-template-columns: minmax(0, 1fr); } }
.kit-elenco { list-style: none; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

@media print {
  .intestazione, .pie, .banner-demo, .non-stampare, #esito { display: none !important; }
  body:has(.kit-fogli) main, body:has(.kit-fogli) .contenitore { margin: 0; padding: 0; max-width: none; }
  .kit-fogli { display: block; margin: 0; padding: 0; overflow: visible; }
  .kit-foglio { box-shadow: none; break-after: page; }
  body { background: var(--carta-stampa); }
  .foglio-qr { grid-template-columns: repeat(3, 1fr); }
}

/* --- vendite (gestione/vendite.html) ------------------------------------------------- */
.periodi { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin: var(--sp-4) 0; }
.periodi a[aria-current="true"] { font-weight: 700; border-bottom: 2px solid var(--accento); }
.cifre { list-style: none; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cifra { display: grid; gap: var(--sp-1); }
.cifra__nome { font-size: var(--t-s); color: var(--inchiostro-tenue); }
.cifra__valore { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.grafico { display: block; max-width: 100%; height: auto; min-width: 320px; }
.grafico__barra { fill: var(--accento); }
.grafico__etichetta { fill: var(--inchiostro-tenue); font-size: 9px; }
.due-colonne { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.due-colonne > * { min-width: 0; }          /* →M2: un figlio largo non allarga la pagina, si stringe o scorre dentro */

/* --- schermo cucina (gestione/cucina.html) -------------------------------------------
   Letto da un metro e mezzo, con le mani occupate: testo grande, bottoni grandi (≥ 56 px).
   Gli allergeni hanno il colore critico E la scritta «Allergeni» (→E5): il colore da solo non basta. */
.cucina-testa { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.cucina { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; margin: var(--sp-4) 0; }
.cucina__colonna h2 { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--t-l); }
.cucina__colonna--pronto .ticket { opacity: .85; }
.ticket { background: var(--superficie); border: 1px solid var(--linea); border-left: 6px solid var(--accento);
          border-radius: var(--raggio-grande); padding: var(--sp-4); margin-bottom: var(--sp-3); box-shadow: var(--ombra-lieve); }
.cucina__colonna--nuovo .ticket { border-left-color: var(--attenzione); }
.ticket--ritardo { border-left-color: var(--critico); }
.ticket--ora, .ticket--presto { border-left-color: var(--attenzione); }
.ticket__urgenza { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; }
.ticket__testa { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.ticket__dove { font-size: var(--t-xl); line-height: 1.1; }
.ticket__n { color: var(--inchiostro-tenue); font-variant-numeric: tabular-nums; }
.ticket__tempo { margin: var(--sp-1) 0 var(--sp-2); color: var(--inchiostro-tenue); }
.ticket__allergeni { margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio);
                     background: var(--critico-tenue); color: var(--critico); border: 2px solid var(--critico); font-size: var(--t-m); }
.ticket__righe { list-style: none; padding: 0; margin: 0 0 var(--sp-2); font-size: var(--t-l); display: grid; gap: var(--sp-1); }
.ticket__righe small { display: block; font-size: var(--t-s); color: var(--inchiostro-tenue); padding-left: 2.2em; }
.ticket__q { display: inline-block; min-width: 2em; font-weight: 800; font-variant-numeric: tabular-nums; }
.ticket__nota { margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio); background: var(--attenzione-tenue); }
.ticket__nota--allergia { background: var(--critico-tenue); border: 2px solid var(--critico); }
.ticket__azioni { display: flex; gap: var(--sp-2); }
.ticket__azioni form { flex: 1; }
.ticket__bottone { width: 100%; min-height: 56px; font-size: var(--t-l); }
.esauriti { list-style: none; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.esauriti__voce { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
                  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--linea); border-radius: var(--raggio); }
.esauriti__voce--finito { background: var(--critico-tenue); }
@media (max-width: 860px) { .cucina { grid-template-columns: minmax(0, 1fr); } }

/* «Non consegnato» (_macro.azione_ordine): un bottone che apre il modulo del motivo, a tutta larghezza. */
.non-consegnato summary { list-style: none; display: inline-flex; }
.non-consegnato summary::-webkit-details-marker { display: none; }
.non-consegnato[open] { flex-basis: 100%; order: 10; }
.non-consegnato[open] .modulo { margin-top: var(--sp-3); max-width: 520px; }

/* Checkout di un locale con fasce di consegna proprie: si vede la tendina del tipo scelto (senza :has, tutte e due). */
@supports selector(:has(*)) {
  form:has(input[name="tipo"][value="consegna"]:checked) .quando-ritiro { display: none; }
  form:not(:has(input[name="tipo"][value="consegna"]:checked)) .quando-consegna { display: none; }
}
.quando-consegna, .quando-ritiro { display: grid; gap: var(--sp-1); }
.mancante { border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--sp-3); display: grid; gap: var(--sp-1); }

/* I filtri rapidi sopra il menu: un tocco per accenderli o spegnerli; acceso = bordo pieno e spunta (→E5). */
.filtri-rapidi { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2); }
.filtro-rapido { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 40px; padding: var(--sp-1) var(--sp-3);
                 border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); color: var(--inchiostro);
                 font-size: var(--t-s); font-weight: 600; text-decoration: none; transition: border-color var(--transizione); }
.filtro-rapido small { color: var(--inchiostro-tenue); font-weight: 400; }
.filtro-rapido[aria-current="true"] { border-color: var(--accento); background: var(--accento-tenue); color: var(--accento);
                                      box-shadow: inset 0 0 0 1px var(--accento); }
.filtro-rapido[aria-current="true"]::before { content: "✓"; }
.filtro-rapido:active { transform: translateY(1px); transition-duration: 60ms; }
@media (hover: hover) { .filtro-rapido:hover { border-color: var(--accento); } }

/* Il cuore dei preferiti (_macro.cuore): in alto a destra sulle card, accanto al nome nella pagina del locale. Pieno =
   nei preferiti, e lo dice anche aria-pressed (→E5). */
.cuore { display: inline-flex; margin: 0; }
.cuore__bottone { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%;
                  border: 1px solid var(--linea); background: var(--superficie); color: var(--inchiostro); cursor: pointer;
                  box-shadow: var(--ombra-lieve); transition: color var(--transizione), transform 60ms; }
.cuore__bottone[aria-pressed="true"] { color: var(--accento); border-color: var(--accento); }
.cuore__bottone:active { transform: scale(.92); }
@media (hover: hover) { .cuore__bottone:hover { color: var(--accento); } }
.card-r, .card-p { position: relative; }
.card-r > .cuore, .card-p > .cuore { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 2; }
.copertina .cuore { vertical-align: middle; }
.preferiti { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
.preferiti__testa { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }

/* --- home: per i locali (il borgo) e la vetrina delle demo ---------------------------- */
.per-locali-blocco { max-width: var(--contenitore); margin: var(--sp-16) auto 0; padding: 0 var(--sp-4); }
/* La foto del paese a tutta larghezza del contenitore, il testo chiaro su una sfumatura scura da sinistra. */
.per-locali-blocco__testa { position: relative; overflow: hidden; border-radius: var(--raggio-grande); background: var(--barra);
                            color: var(--su-barra); min-height: 440px; display: grid; align-items: center; }
.per-locali-blocco__sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.per-locali-blocco__testa::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--barra) 92%, transparent) 30%, color-mix(in srgb, var(--barra) 25%, transparent) 75%); }
.per-locali-blocco__testo { position: relative; z-index: 2; max-width: 36em; padding: 48px var(--sp-8) 96px; }
.per-locali-blocco__testo h2 { color: var(--su-barra); font-size: var(--t-2xl); margin-bottom: var(--sp-3); }
.per-locali-blocco__testo p { color: var(--su-barra-tenue); }
.per-locali-blocco__richiamo { font-size: var(--t-xl); color: var(--fascia-1) !important; margin: 0 0 var(--sp-1); }
.per-locali-blocco__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-4); }
.per-locali-blocco__piani { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--t-s); margin: 0; }
.per-locali-blocco__piani strong { color: var(--su-barra); }
/* Quattro card con la foto in alto, un'icona nel titolo: la meta' alterna i due colori di fascia. */
.vantaggi-foto { list-style: none; padding: 0; margin: calc(-1 * 48px) var(--sp-6) 0; position: relative; z-index: 3;
                 display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
/* Il bordo del colore del fondo stacca le card dall'immagine su cui salgono (home). */
.vantaggio-foto { background: var(--superficie); border-radius: var(--raggio-grande); box-shadow: var(--ombra); overflow: hidden;
                  border: 6px solid var(--carta);
                  display: grid; grid-template-rows: auto 1fr; }
.vantaggio-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.vantaggio-foto > div { padding: var(--sp-4); border-top: 4px solid var(--fascia-1); }
.vantaggio-foto:nth-child(even) > div { border-top-color: var(--fascia-2); }
.vantaggio-foto h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-m); margin-bottom: var(--sp-2); }
.vantaggio-foto h3 .icona { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--accento-tenue);
                            color: var(--accento); }
.vantaggio-foto p { font-size: var(--t-s); margin: 0; }

/* Le demo: lo screenshot dentro una finta finestra del browser, l'indirizzo in alto; la prima e' piu' grande. */
.demo-blocco__intro { margin-bottom: var(--sp-8); }
.demo-schede { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.demo-scheda { display: grid; gap: var(--sp-4); align-content: start; }
.demo-scheda--evidenza { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: center;
                         padding: var(--sp-8); border-radius: var(--raggio-grande);
                         background: linear-gradient(135deg, var(--fascia-1), var(--fascia-2)); }
.demo-scheda__foto { display: block; border-radius: var(--raggio-grande); overflow: hidden; background: var(--superficie);
                     box-shadow: var(--ombra); border: 1px solid var(--linea); transition: transform var(--transizione); }
.demo-scheda__foto img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; }
.demo-scheda__barra { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--carta-sezione);
                      border-bottom: 1px solid var(--linea); }
.demo-scheda__barra > span { width: 10px; height: 10px; border-radius: 50%; background: var(--linea); flex: none; }
.demo-scheda__barra small { margin-left: var(--sp-2); padding: 2px 10px; border-radius: 999px; background: var(--superficie);
                            color: var(--inchiostro-tenue); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis;
                            white-space: nowrap; min-width: 0; }
.demo-scheda__testo h3 { font-size: var(--t-l); margin-bottom: var(--sp-3); }
.demo-scheda--evidenza .demo-scheda__testo h3 { font-size: var(--t-xl); }
.demo-scheda__etichetta { margin: 0 0 var(--sp-2); background: var(--accento); color: var(--su-accento); border-color: transparent; }
.demo-scheda .spunte { font-size: var(--t-m); }
@media (hover: hover) {
  .demo-scheda__foto:hover { transform: translateY(-3px); }
}
@media (max-width: 1199px) {
  .vantaggi-foto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .per-locali-blocco__testa { min-height: 0; }
  .per-locali-blocco__testa::before { background: color-mix(in srgb, var(--barra) 80%, transparent); }
  .per-locali-blocco__testo { padding: var(--sp-8) var(--sp-4) var(--sp-16); }
  .vantaggi-foto { margin: calc(-1 * var(--sp-8)) var(--sp-2) 0; }
  .demo-schede, .demo-scheda--evidenza { grid-template-columns: minmax(0, 1fr); }
  .demo-scheda--evidenza { padding: var(--sp-4); gap: var(--sp-4); }
}
@media (max-width: 575px) {
  .vantaggi-foto { grid-template-columns: minmax(0, 1fr); margin: calc(-1 * var(--sp-8)) 0 0; }
}

/* --- la demo: la testata lo dice, col marchio e la fascia d'accento al posto di quella scura ------------------ */
.marchio__demo { display: inline-block; vertical-align: middle; margin-left: var(--sp-1); padding: 2px 8px; border-radius: 999px;
                 background: var(--accento); color: var(--su-accento); font-size: var(--t-xs); letter-spacing: .08em;
                 text-transform: uppercase; }
.intestazione--demo .nav__voci { background: var(--accento); box-shadow: 0 0 0 100vmax var(--accento); }
.intestazione--demo .nav__voci a { color: var(--su-accento); }
.intestazione--demo .nav__voci a[aria-current="page"] { border-bottom-color: var(--su-accento); }
@media (hover: hover) {
  .intestazione--demo .nav__voci a:hover { border-bottom-color: var(--su-accento); }
}
.demo-blocco { margin-top: var(--sp-16); }

/* --- /prezzi: due colonne, il confronto, cosa e' compreso, white label -------------------------------------------- */
.prezzi-testa { padding-top: var(--sp-8); }
.prezzi-testa__richiamo { font-size: var(--t-xl); margin: 0 0 var(--sp-1); }
.prezzi-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-6);
                  max-width: 1120px; margin: var(--sp-8) auto 0; align-items: stretch; }
.prezzo { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-8) var(--sp-6);
          background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio-grande);
          box-shadow: var(--ombra-lieve); border-top: 6px solid var(--fascia-2); }
.prezzo--evidenza { border: 2px solid var(--accento); border-top-width: 6px; box-shadow: var(--ombra); }
.prezzo h2 { font-size: var(--t-xl); margin: 0; }
.prezzo__etichetta { margin: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                     color: var(--inchiostro-tenue); }
.prezzo--evidenza .prezzo__etichetta { color: var(--accento); }
.prezzo__cifra { margin: 0; display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.prezzo__cifra strong { font-size: 56px; line-height: 1; color: var(--inchiostro); letter-spacing: -.03em; }
.prezzo__cifra strong small { font-size: var(--t-xl); letter-spacing: 0; }
.prezzo__cifra span { color: var(--inchiostro-tenue); }
.prezzo__cifra { padding-bottom: var(--sp-4); border-bottom: 1px dashed var(--linea); }
.prezzo .spunte { flex: 1; font-size: var(--t-m); gap: var(--sp-2); align-content: start; }
.prezzi-nota { text-align: center; max-width: 60ch; margin: var(--sp-4) auto 0; }
.prezzi-confronto { margin-top: var(--sp-16); }
.prezzi-confronto__intro { text-align: center; margin-left: auto; margin-right: auto; }
.prezzi-tabella { font-variant-numeric: tabular-nums; }
.prezzi-tabella td { font-size: var(--t-m); white-space: nowrap; }
.prezzi-tabella__meglio { font-weight: 700; color: var(--inchiostro); }
.prezzi-tabella .chip { margin-left: var(--sp-2); background: var(--accento-tenue); color: var(--accento-scuro); }
.prezzi-confronto .tabella-scorre { max-width: 720px; margin: 0 auto; }
.prezzi-pareggio { display: flex; gap: var(--sp-3); align-items: flex-start; max-width: 720px; margin: var(--sp-6) auto 0;
                   padding: var(--sp-4); background: var(--superficie); border-radius: var(--raggio-grande); box-shadow: var(--ombra-lieve); }
.prezzi-pareggio .icona { flex: none; color: var(--accento); margin-top: 2px; }
.compreso { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.compreso li { padding: var(--sp-6) var(--sp-4); border-radius: var(--raggio-grande); background: var(--superficie);
               border: 1px solid var(--linea); }
.compreso li:nth-child(4n+1), .compreso li:nth-child(4n+3) { background: var(--fascia-1); border-color: transparent; }
.compreso li:nth-child(4n+2), .compreso li:nth-child(4n) { background: var(--fascia-2); border-color: transparent; }
.compreso .icona { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--barra); color: var(--su-barra); }
.compreso h3 { font-size: var(--t-m); margin: var(--sp-3) 0 var(--sp-1); }
.compreso p { font-size: var(--t-s); margin: 0; }
.bianca-etichetta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-8); align-items: center; }
.bianca-etichetta__testo .calligrafico { font-size: var(--t-xl); margin: 0 0 var(--sp-1); }
.bianca-etichetta__testo h2 { font-size: var(--t-2xl); }
.bianca-etichetta__testo p:last-child { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.bianca-etichetta__foto { margin: 0; border-radius: var(--raggio-grande); overflow: hidden; border: 1px solid var(--linea);
                          box-shadow: var(--ombra); transform: rotate(1deg); }
.bianca-etichetta__foto img { display: block; width: 100%; height: auto; }
.prezzi-fine { text-align: center; padding: var(--sp-16) var(--sp-4); border-radius: var(--raggio-grande); color: var(--su-barra);
               background: var(--barra); }
.prezzi-fine h2 { color: var(--su-barra); }
.prezzi-fine p { color: var(--su-barra-tenue); }
.prezzi-fine p:last-child { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 1199px) { .compreso { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .bianca-etichetta { grid-template-columns: minmax(0, 1fr); }
  .bianca-etichetta__foto { transform: none; }
  .prezzo__cifra strong { font-size: 44px; }
}
@media (max-width: 575px) { .compreso { grid-template-columns: minmax(0, 1fr); } }

/* --- aggiunta rapida sulle card dei prodotti: il carrello accanto al cuore, la tendina con quantita' e «Aggiungi» --- */
.rapido, .rapido--scheda { position: absolute; top: var(--sp-2); right: calc(var(--sp-2) + 40px + var(--sp-2)); z-index: 3; }
.rapido__bottone { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
                   background: var(--accento); color: var(--su-accento); box-shadow: var(--ombra-lieve); list-style: none;
                   transition: transform 60ms, background var(--transizione); }
.rapido__bottone::-webkit-details-marker { display: none; }
.rapido__bottone .icona { width: 20px; height: 20px; }
.rapido__bottone:active { transform: scale(.92); }
.rapido[open] .rapido__bottone { background: var(--accento-scuro); }
@media (hover: hover) { .rapido__bottone:hover { background: var(--accento-scuro); text-decoration: none; } }
.rapido__pannello { position: absolute; top: calc(100% + 6px); right: calc(-1 * (40px + var(--sp-2))); display: flex; gap: var(--sp-2);
                    align-items: center; padding: var(--sp-2); background: var(--superficie); border: 1px solid var(--linea);
                    border-radius: var(--raggio-grande); box-shadow: var(--ombra); white-space: nowrap; }
.rapido__pannello::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* ponte per il mouse */
.rapido__pannello .quantita { min-height: 40px; width: auto; }
.rapido__pannello .btn { min-height: 40px; }
/* La scheda del prodotto: i dati in righe, etichetta a sinistra. */
.modale__prezzo small { font-size: var(--t-xs); font-weight: 400; color: var(--inchiostro-tenue); }
.scheda-prodotto { display: grid; gap: 0; margin: 0 0 var(--sp-4); border-top: 1px solid var(--linea); font-size: var(--t-s); }
.scheda-prodotto > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2) 0;
                         border-bottom: 1px solid var(--linea); }
.scheda-prodotto dt { color: var(--inchiostro-tenue); font-weight: 600; }
.scheda-prodotto dd { margin: 0; color: var(--inchiostro); }

/* --- il bundle nel menu: cosa c'e' dentro, il prezzo dei prodotti presi da soli barrato, il risparmio --------- */
.card-p__dentro { font-size: var(--t-s); font-weight: 600; color: var(--inchiostro); }
.card-p__listino { font-size: var(--t-s); font-weight: 400; color: var(--inchiostro-tenue); margin-left: var(--sp-1); }
.chip--bundle { background: var(--accento-tenue); color: var(--accento-scuro); border-color: transparent; font-weight: 700; }
.bundle-dentro { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
/* Senza foto, il carrello e il cuore stanno sul testo: il nome lascia loro lo spazio. */
.card-p--senza-foto .card-p__nome { display: block; padding-right: 96px; min-height: 40px; }
.riga-componente { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
                   gap: var(--sp-2); align-items: end; margin-bottom: var(--sp-2); }
@media (max-width: 575px) { .riga-componente { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* --- badge dei locali (dominio/badge.py): informano, non giudicano: niente verde/rosso di stato (→FE4) ---------- */
.badge-locale { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 6px; border-radius: 999px;
                background: var(--accento-tenue); color: var(--accento-scuro); font-size: var(--t-xs); font-weight: 700;
                margin: 0 var(--sp-1) var(--sp-1) 0; white-space: nowrap; }
.badge-locale .icona { width: 14px; height: 14px; }
.badge-locali { display: flex; flex-wrap: wrap; margin-top: var(--sp-1); }
.badge-sintesi { font-weight: 600; }
.badge-obiettivi { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
                   gap: var(--sp-4); }
.badge-obiettivo { display: flex; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--linea); border-radius: var(--raggio-grande);
                   background: var(--superficie); }
.badge-obiettivo h2 { font-size: var(--t-m); margin: 0 0 var(--sp-1); }
.badge-obiettivo--ottenuto { border-color: var(--accento); box-shadow: 0 0 0 1px var(--accento); }
.badge-obiettivo__icona { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
                          background: var(--carta-sezione); color: var(--inchiostro-tenue); }
.badge-obiettivo--ottenuto .badge-obiettivo__icona { background: var(--accento-tenue); color: var(--accento); }
.badge-obiettivo__manca { margin: var(--sp-2) 0 0; font-size: var(--t-s); }
.chip--glutine { background: var(--fascia-1); color: var(--inchiostro); border-color: transparent; font-weight: 700; }
.gruppo-gestione form { margin-top: var(--sp-2); }
.opzioni-categoria { margin: var(--sp-2) 0 var(--sp-4); }
.opzioni-categoria summary { cursor: pointer; font-weight: 600; color: var(--accento); min-height: 40px; display: flex; align-items: center; }
.riga-campi__spunta { align-self: end; min-height: 40px; }
.ticket__glutine { text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.partner-azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-4) 0 0; }
.collabora { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-bottom: var(--sp-6); }
.collabora h2 { font-size: var(--t-l); margin: var(--sp-3) 0 var(--sp-1); }
.calcolatore { max-width: 720px; margin: var(--sp-6) auto 0; padding: var(--sp-6); background: var(--superficie);
               border-radius: var(--raggio-grande); box-shadow: var(--ombra-lieve); }
.calcolatore h3 { margin: 0 0 var(--sp-3); }
.calcolatore__campi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: end; }
.calcolatore__esito { list-style: none; padding: 0; margin: var(--sp-4) 0 var(--sp-2); display: grid; gap: var(--sp-2); }
.calcolatore__esito li { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--linea); border-radius: var(--raggio); }
.calcolatore__meglio { border-color: var(--accento) !important; box-shadow: 0 0 0 1px var(--accento); }
@media (max-width: 575px) { .calcolatore__campi { grid-template-columns: minmax(0, 1fr); } }

/* --- pagine delle funzioni (contenuti/funzioni.py) ------------------------------------------------------------ */
.funzione { max-width: 920px; margin: 0 auto; }
.funzione__testa { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-8); align-items: center;
                   padding: var(--sp-8) 0; }
.funzione__richiamo { font-size: var(--t-xl); margin: 0 0 var(--sp-1); }
.funzione__foto { width: 100%; height: auto; border-radius: var(--raggio-grande); box-shadow: var(--ombra); }
.funzione__sezione { margin: var(--sp-8) 0; }
.funzione__sezione .spunte { font-size: var(--t-m); gap: var(--sp-2); }
.funzione__correlate ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.funzione__correlate a { display: inline-block; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--linea);
                         border-radius: var(--raggio-grande); min-height: 40px; }
@media (max-width: 860px) { .funzione__testa { grid-template-columns: minmax(0, 1fr); padding-top: var(--sp-4); }
  .funzione__foto { max-height: 200px; object-fit: cover; } }
.prezzo__chiave { margin: 0; font-size: var(--t-m); font-weight: 600; color: var(--inchiostro); }
.prezzo__chiave strong { color: var(--accento-scuro); text-decoration: underline; text-underline-offset: 3px; }
.matrice-piani th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: var(--t-s); color: var(--inchiostro); font-weight: 600; }
.matrice-piani td { font-size: var(--t-s); }
.matrice-si { color: var(--accento); font-weight: 700; font-size: var(--t-l); }
.matrice-no { color: var(--inchiostro-tenue); }
#ogni-piano .tabella-scorre { max-width: 960px; margin: 0 auto; }
@media (max-width: 760px) {
  .matrice-piani th[scope="row"] { border: 0; padding: var(--sp-1) 0; }
  .matrice-piani .matrice-si, .matrice-piani .matrice-no { font-size: var(--t-m); }
}

/* --- la pagina del carrello (carrello.html): prodotti a sinistra, riepilogo e «prosegui» a destra ------------------ */
.contenitore--sezione > .carrello { max-width: 1040px; }
.carrello > h1 { margin-bottom: var(--sp-2); }
.carrello > .intro { margin: 0 0 var(--sp-6); max-width: 60ch; text-align: left; }
.carrello__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); align-items: start; }
.carrello__prodotti, .carrello__riepilogo { background: var(--superficie); border-radius: var(--raggio-grande);
                                            box-shadow: var(--ombra-lieve); padding: var(--sp-4) var(--sp-6); }
.carrello__riepilogo { position: sticky; top: var(--sp-4); }
.carrello__titolo { font-size: var(--t-m); margin: 0 0 var(--sp-3); }
.carrello__righe { list-style: none; padding: 0; margin: 0; }
.carrello__riga { display: grid; grid-template-columns: minmax(1.8em, auto) minmax(0, 1fr) auto auto; gap: var(--sp-3);
                  align-items: center; padding: var(--sp-3) 0; border-top: 1px solid var(--linea); }
.carrello__q { font-variant-numeric: tabular-nums; color: var(--inchiostro-tenue); font-weight: 600; }
.carrello__nome { color: var(--inchiostro); font-weight: 600; }
.carrello__opz { display: block; font-weight: 400; }
.carrello__prezzo { font-variant-numeric: tabular-nums; text-align: right; color: var(--inchiostro); font-weight: 600; }
.carrello__togli { margin: 0; }
.carrello__piede { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
                   border-top: 1px solid var(--linea); padding-top: var(--sp-3); }
.carrello__riepilogo .totali { margin-bottom: var(--sp-2); }
.carrello__nota { margin: 0 0 var(--sp-3); }
.carrello__riepilogo .btn--primario { margin-top: var(--sp-2); }
@media (max-width: 860px) {
  .carrello__corpo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .carrello__riepilogo { position: static; }
  .carrello__prodotti, .carrello__riepilogo { padding: var(--sp-3) var(--sp-4); }
  .carrello__riga { grid-template-columns: minmax(2.2em, auto) minmax(0, 1fr) auto; row-gap: var(--sp-1); }
  .carrello__togli { grid-column: 2 / -1; justify-self: end; }
}
.carrello__subtotale { font-weight: 700; font-size: var(--t-l); }

/* --- /partner (partner.html): il sito d'esempio in alto, i passi, le funzioni, la candidatura ---------------------- */
.partner-eroe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-8); align-items: center;
                padding: var(--sp-8) 0; }
.partner-eroe__richiamo { font-size: var(--t-xl); margin: 0 0 var(--sp-1); }
.partner-eroe h1 { font-size: var(--t-3xl); line-height: 1.1; }
.partner-eroe__foto { margin: 0; border-radius: var(--raggio-grande); overflow: hidden; border: 1px solid var(--linea);
                      box-shadow: var(--ombra); background: var(--superficie); }
.partner-eroe__foto img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; }
.partner-gratis { display: flex; gap: var(--sp-3); align-items: center; max-width: 860px; margin: 0 auto var(--sp-16);
                  padding: var(--sp-4) var(--sp-6); border-radius: var(--raggio-grande); font-size: var(--t-m);
                  background: linear-gradient(135deg, var(--fascia-1), var(--fascia-2)); color: var(--inchiostro); }
.partner-gratis .icona { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--accento);
                         color: var(--su-accento); }
.partner-gratis strong { text-decoration: underline; text-decoration-color: var(--accento); text-underline-offset: 3px; }
.partner-passi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                 gap: var(--sp-4); counter-reset: none; }
.partner-passi li { background: var(--superficie); border-radius: var(--raggio-grande); box-shadow: var(--ombra-lieve);
                    padding: var(--sp-6) var(--sp-4) var(--sp-4); border-top: 4px solid var(--accento); }
.partner-passi__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
                    background: var(--accento-tenue); color: var(--accento); font-weight: 700; font-size: var(--t-l); }
.partner-passi h3 { font-size: var(--t-m); margin: var(--sp-3) 0 var(--sp-1); }
.partner-passi p { font-size: var(--t-s); margin: 0; }
.vantaggi-foto--libere { margin: 0; }
.partner-approfondisci { text-align: center; font-size: var(--t-s); margin: var(--sp-6) 0 0; }
.partner-candida { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start;
                   padding: var(--sp-8); margin-bottom: var(--sp-8); border-radius: var(--raggio-grande);
                   background: var(--carta-sezione); scroll-margin-top: var(--sp-4); }
.partner-candida__testo h2 { font-size: var(--t-2xl); }
.partner-candida__testo { position: sticky; top: var(--sp-6); }
.partner-candida__modulo { margin: 0; }
@media (max-width: 1199px) {
  .partner-passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .partner-eroe, .partner-candida { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .partner-eroe { padding: var(--sp-4) 0; }
  .partner-eroe h1 { font-size: var(--t-2xl); }
  .partner-candida { padding: var(--sp-4); }
  .partner-candida__testo { position: static; }
  .partner-gratis { margin-bottom: var(--sp-8); padding: var(--sp-4); align-items: flex-start; }
}
@media (max-width: 575px) {
  .partner-passi { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .partner-passi li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--sp-3); align-items: center;
                      padding: var(--sp-4); }
  .partner-passi__n { grid-row: span 2; align-self: start; }
  .partner-passi h3 { margin: 0; }
}
.btn--icona { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.btn--icona .icona { width: 20px; height: 20px; display: block; }
/* La gestione della demo (demo_gestione.html): il pulsante per entrare, al centro. */
.demo-entra { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; padding: var(--sp-8) var(--sp-4);
              border-radius: var(--raggio-grande); background: linear-gradient(135deg, var(--fascia-1), var(--fascia-2)); }
.demo-entra form { margin: var(--sp-4) 0; }
.banner-visita { background: var(--accento-tenue); }
/* Le schermate della demo nelle pagine delle funzioni: nel browser a tutta larghezza, il telefono accanto. */
.schermate { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8);
             align-items: start; }
.schermata { margin: 0; }
.schermata img { display: block; width: 100%; height: auto; border-radius: var(--raggio-grande); border: 1px solid var(--linea);
                 box-shadow: var(--ombra); background: var(--superficie); }
.schermata:not(.schermata--telefono) img { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
.schermata .demo-scheda__barra { border: 1px solid var(--linea); border-bottom: 0; border-radius: var(--raggio-grande) var(--raggio-grande) 0 0; }
.schermata--telefono { max-width: 300px; justify-self: center; }
.schermata--telefono img { border-radius: 28px; border: 8px solid var(--barra); }
.schermata figcaption { font-size: var(--t-s); color: var(--inchiostro-tenue); margin-top: var(--sp-2); text-align: center; }
/* La zona pilota (formello.html): chi ha un locale e chi ordina, affiancati. */
.zona-pilota { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--sp-6);
               align-items: start; margin-bottom: var(--sp-8); }
.zona-pilota__parte .card__titolo { display: flex; align-items: center; gap: var(--sp-2); }
.zona-pilota__parte .card__titolo .icona { width: 30px; height: 30px; color: var(--accento); flex: none; }
.zona-pilota .avvisami { box-shadow: none; padding: 0; margin-top: var(--sp-4); }
.partner-domande { max-width: 860px; margin-left: auto; margin-right: auto; }
/* Il menu con l'assistente AI (menu_con_ai.html). */
.menu-ai__passi { max-width: 1040px; margin: 0 auto var(--sp-6); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .menu-ai__passi { grid-template-columns: minmax(0, 1fr); }
}
.menu-ai__blocco { max-width: 860px; margin: 0 auto var(--sp-6); }
.menu-ai__istruzioni, .menu-ai__blocco textarea { width: 100%; font-family: var(--font-mono, monospace); font-size: var(--t-s); }
.menu-ai__anteprima { max-width: 860px; margin-left: auto; margin-right: auto; }
.menu-ai__categoria { margin: var(--sp-6) 0 var(--sp-2); }
.menu-ai__prodotti { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.menu-ai__prodotto { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: start; margin: 0; }
.menu-ai__prodotto p { margin: var(--sp-1) 0 0; }
.menu-ai__prezzo { font-weight: 700; color: var(--inchiostro); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Il menu in più lingue (menu.html, dominio/lingue.py): il selettore della lingua. */
.lingue-menu { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; margin: var(--sp-3) 0;
               font-size: var(--t-s); }
.lingue-menu__titolo { color: var(--inchiostro-tenue); }
.lingue-menu a { padding: var(--sp-1) var(--sp-2); border-radius: 999px; border: 1px solid var(--linea); min-height: 32px;
                 display: inline-flex; align-items: center; }
.lingue-menu a[aria-current="true"] { border-color: var(--accento); color: var(--accento); font-weight: 700; }
.lingue-istruzioni textarea { width: 100%; font-family: var(--font-mono, monospace); font-size: var(--t-s); }

/* ---------------------------------------------------------- la sala dal tablet (cameriere.it) --- */
/* I tavoli si toccano col dito: riquadri grandi (≥ 96 px), il numero in grande. Il bordo dice lo stato insieme
   all'icona e all'etichetta (→E5); la semantica dei colori resta quella di sempre (→FE4): ambra = c'è da fare,
   verde = fatto, accento = in corso. Libero = bordo tratteggiato, occupato = pieno. */
.sala-sintesi { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sala-sintesi__voce { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3);
  border: 2px solid var(--linea); border-radius: 999px; font-size: var(--t-s); }
.sala-sintesi__voce .icona { width: 18px; height: 18px; }
.sala-aree { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.sala-aree a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; color: var(--inchiostro); }
.sala-aree a[aria-current] { background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro);
  text-decoration: underline; text-underline-offset: 3px; }
.sala-griglia__area { font-size: var(--t-l); margin: var(--sp-6) 0 var(--sp-3); }
.sala-griglia__tavoli { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.tavolo { display: flex; flex-direction: column; gap: var(--sp-1); min-height: 112px; padding: var(--sp-3);
  border: 3px solid var(--inchiostro-tenue); border-radius: var(--raggio-grande); background: var(--superficie);
  color: var(--inchiostro); text-decoration: none; transition: transform 60ms ease, box-shadow var(--transizione); }
.tavolo:active { transform: translateY(1px); }
@media (hover: hover) { .tavolo:hover { box-shadow: var(--ombra-lieve); } }
.tavolo:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.tavolo__nome { font-size: var(--t-2xl); font-weight: 700; line-height: 1; }
.tavolo__stato { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 700; font-size: var(--t-s); }
.tavolo__stato .icona, .tavolo__dati .icona { width: 18px; height: 18px; }
.tavolo__dati { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-s); color: var(--testo); }
.tavolo__conto { font-size: var(--t-s); }
.tavolo__conto small { display: block; color: var(--inchiostro-tenue); }
.tavolo--libero { border-style: dashed; border-color: var(--linea); color: var(--inchiostro-tenue); }
.tavolo--seduti { border-color: var(--inchiostro-tenue); }
.tavolo--in_cucina { border-color: var(--accento); }
.tavolo--in_cucina .tavolo__stato { color: var(--accento-scuro); }
.tavolo--da_confermare, .tavolo--da_servire { border-color: var(--attenzione); background: var(--attenzione-tenue); }
.tavolo--da_confermare .tavolo__stato, .tavolo--da_servire .tavolo__stato { color: var(--attenzione); }
.tavolo--da_servire { border-width: 5px; }
.tavolo--pagato { border-color: var(--ok); }
.tavolo--pagato .tavolo__stato { color: var(--ok); }
.tavolo--spento { opacity: .6; border-style: dotted; }

.tavolo-apri .scelte-persone { display: flex; flex-wrap: wrap; gap: var(--sp-2); border: 0; padding: 0; margin: 0 0 var(--sp-3); }
.tavolo-apri .scelte-persone legend { font-weight: 700; margin-bottom: var(--sp-2); }
.tavolo-apri .toggle span { min-width: 52px; min-height: 52px; justify-content: center; font-size: var(--t-l); }
.tavolo-azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-4) 0; }
.tavolo-azioni .btn .icona { width: 22px; height: 22px; margin-right: var(--sp-1); }
.ordine-tavolo { margin-bottom: var(--sp-3); }
.ordine-tavolo__testa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.ordine-tavolo__righe { margin: 0 0 var(--sp-2); padding-left: var(--sp-4); }
.ordine-tavolo__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ordine-tavolo__azioni .icona { width: 20px; height: 20px; margin-right: var(--sp-1); }
.ordine-tavolo--pronto { box-shadow: inset 4px 0 0 var(--attenzione); }

.ordina { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) {
  .ordina { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .ordina__comanda { position: sticky; top: calc(var(--testata) + var(--sp-2)); max-height: calc(100vh - var(--testata) - var(--sp-4)); overflow-y: auto; }
}
.ordina__categorie { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); }
.ordina__categorie a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; color: var(--inchiostro); }
.ordina__categoria { scroll-margin-top: calc(var(--testata) + var(--sp-2)); }
.ordina__categoria h2 { font-size: var(--t-l); margin: var(--sp-4) 0 var(--sp-2); }
.ordina__prodotti { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ordina__prodotti > li { scroll-margin-top: calc(var(--testata) + var(--sp-8)); }
.ordina__prodotti form { margin: 0; }
.ordina__prodotto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); width: 100%; min-height: 84px;
  padding: var(--sp-3); border: 2px solid var(--linea); border-radius: var(--raggio-grande); background: var(--superficie);
  color: var(--inchiostro); font: inherit; text-align: left; cursor: pointer; transition: transform 60ms ease, border-color var(--transizione); }
.ordina__prodotto:active { transform: translateY(1px); }
@media (hover: hover) { .ordina__prodotto:hover { border-color: var(--accento); } }
.ordina__prodotto:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.ordina__prodotto small { color: var(--inchiostro-tenue); }
.ordina__prodotto--spento { cursor: not-allowed; opacity: .6; }
.ordina__nome { font-weight: 700; }
.ordina__prezzo { color: var(--testo); }
.ordina__prodotti > li:has(details[open]) { grid-column: 1 / -1; }
.ordina__varianti { display: block; margin-top: var(--sp-1); font-size: var(--t-s); }
.ordina__varianti > summary { cursor: pointer; color: var(--accento-scuro); min-height: 40px; display: flex; align-items: center; }
.ordina__scelta summary { list-style: none; }
.ordina__scelta summary::-webkit-details-marker { display: none; }
.ordina__scelta[open] summary { border-color: var(--accento); }
.ordina__opzioni { padding: var(--sp-3) 0; }
.ordina__righe { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.ordina__righe li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--linea); }
.ordina__passi { display: inline-flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.ordina__passi .btn { min-width: 40px; min-height: 40px; }
.ordina__importo { min-width: 64px; text-align: right; }
.ordina__totale { font-size: var(--t-l); margin: 0 0 var(--sp-3); }
.ordina__barra { position: sticky; bottom: var(--sp-2); z-index: 5; display: flex; justify-content: center; align-items: center;
  min-height: 48px; margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-4); border-radius: 999px; background: var(--accento);
  color: var(--su-accento); font-weight: 700; text-decoration: none; box-shadow: var(--ombra-lieve); }
@media (min-width: 900px) { .ordina__barra { display: none; } }

/* La pianta (dominio/pianta.py): 10 colonne, i tavoli nella loro casella (grid-area dal server, solo numeri). Sul
   telefono la pianta scorre dentro il suo riquadro, la pagina no (→M2). */
.pianta-scorre { overflow-x: auto; padding-bottom: var(--sp-2); }
.pianta { list-style: none; margin: 0; padding: var(--sp-3); display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(10, minmax(84px, 1fr)); grid-auto-rows: minmax(96px, auto);
  min-width: calc(10 * 84px + 9 * var(--sp-2) + 2 * var(--sp-3));
  background: var(--carta-sezione); border: 1px solid var(--linea); border-radius: var(--raggio-grande); }
.pianta > li { display: flex; }
.pianta > li > .tavolo { flex: 1; min-height: 0; }
.pianta .forma--rotondo > .tavolo, .pianta__tavolo.forma--rotondo { border-radius: 999px; align-items: center; text-align: center; justify-content: center; }
.pianta .tavolo__nome { font-size: var(--t-xl); }
.sala-griglia__fuori { font-size: var(--t-m); margin: var(--sp-4) 0 var(--sp-2); color: var(--inchiostro-tenue); }

.pianta--editor { grid-auto-rows: 72px; grid-template-columns: repeat(10, minmax(64px, 1fr));
  min-width: calc(10 * 64px + 9 * var(--sp-2) + 2 * var(--sp-3)); }
.pianta__cella { min-height: 0; border: 2px dashed var(--linea); border-radius: var(--raggio); background: transparent;
  cursor: pointer; transition: border-color var(--transizione), background var(--transizione); }
@media (hover: hover) { .pianta__cella:hover { border-color: var(--accento); background: var(--accento-tenue); } }
.pianta__cella:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.pianta__cella:active { transform: translateY(1px); }
.pianta__tavolo { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 3px solid var(--inchiostro-tenue); border-radius: var(--raggio-grande); background: var(--superficie);
  color: var(--inchiostro); font-size: var(--t-xl); font-weight: 700; }
.pianta__tavolo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pianta__tavolo:has(input:checked) { border-color: var(--accento); background: var(--accento-tenue); box-shadow: 0 0 0 3px var(--accento); }
.pianta__tavolo:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; }
.pianta-editor__fuori { display: flex; flex-wrap: wrap; gap: var(--sp-2); border: 0; padding: 0; margin: 0 0 var(--sp-3); }
.pianta-editor__fuori legend { font-weight: 700; margin-bottom: var(--sp-2); }
.riga-scelta { background: var(--accento-tenue); }

/* Quando ordinano (gestione/vendite.html): la mappa giorno × ora. Il numero è nella casella; l'intensità è un dato,
   non uno stato: si usa l'accento, mai i colori di ok/attenzione (→FE4). */
.mappa-ore { border-collapse: separate; border-spacing: 3px; font-size: var(--t-s); }
.mappa-ore th { font-weight: 600; color: var(--inchiostro-tenue); padding: var(--sp-1); text-align: center; }
.mappa-ore tbody th { text-align: left; }
.mappa-ore td { min-width: 32px; height: 32px; text-align: center; border-radius: 6px; background: var(--carta-sezione);
  color: var(--inchiostro); }
.mappa-ore .calore-1 { background: color-mix(in srgb, var(--accento) 18%, var(--carta-sezione)); }
.mappa-ore .calore-2 { background: color-mix(in srgb, var(--accento) 38%, var(--carta-sezione)); }
.mappa-ore .calore-3 { background: color-mix(in srgb, var(--accento) 62%, var(--carta-sezione)); color: var(--su-accento); }
.mappa-ore .calore-4 { background: var(--accento); color: var(--su-accento); font-weight: 700; }

/* Il menu da stampare (gestione/menu_stampa.html): un foglio A4 nero su bianco anche col tema scuro, come i QR. */
.stampa-scelte { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.menu-stampa { max-width: 210mm; margin: 0 auto var(--sp-8); padding: 14mm 14mm 10mm; background: var(--carta-stampa);
  color: var(--inchiostro-stampa); box-shadow: var(--ombra); font-size: 10.5pt; line-height: 1.35; }
.menu-stampa__testa { text-align: center; margin-bottom: 8mm; }
.menu-stampa__locale { font-family: var(--font-script); font-size: 28pt; margin: 0; line-height: 1.1; }
.menu-stampa__cucina { margin: 1mm 0 0; font-size: 11pt; letter-spacing: .08em; text-transform: uppercase; }
.menu-stampa__dove { margin: 1mm 0 0; font-size: 9pt; }
.menu-stampa__corpo { column-count: 2; column-gap: 10mm; }
.menu-stampa--una .menu-stampa__corpo { column-count: 1; max-width: 140mm; margin: 0 auto; }
.menu-stampa__categoria h2 { break-after: avoid; font-size: 13pt; margin: 0 0 2.5mm; padding-bottom: 1mm;
  border-bottom: 1.5pt solid var(--inchiostro-stampa); text-transform: uppercase; letter-spacing: .06em; color: inherit; }
.menu-stampa__categoria { margin-bottom: 6mm; }
.menu-stampa__piatto { break-inside: avoid; margin-bottom: 2.5mm; }
.menu-stampa__riga { display: flex; align-items: baseline; gap: 2mm; margin: 0; }
.menu-stampa__nome { font-weight: 700; }
.menu-stampa__nome small { font-weight: 400; font-size: 8.5pt; }
.menu-stampa__allergeni { font-weight: 400; font-size: 7pt; margin-left: .5mm; }
.menu-stampa__punti { flex: 1; border-bottom: 1pt dotted var(--inchiostro-stampa); opacity: .5; transform: translateY(-1mm); }
.menu-stampa__prezzo { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-stampa__desc { margin: .5mm 0 0; font-size: 9pt; font-style: italic; }
.menu-stampa__car { margin: .5mm 0 0; font-size: 8pt; text-transform: lowercase; }
.menu-stampa__piede { margin-top: 6mm; padding-top: 3mm; border-top: 1pt solid var(--inchiostro-stampa); font-size: 8pt;
  display: grid; gap: 2mm; }
.menu-stampa__piede p { margin: 0; }
.menu-stampa__qr { display: flex; align-items: center; gap: 4mm; break-inside: avoid; }
.menu-stampa__qr svg { width: 24mm; height: 24mm; flex-shrink: 0; }
@media (max-width: 700px) {
  .menu-stampa { padding: var(--sp-4); }
  .menu-stampa__corpo { column-count: 1; }
}
/* Una pagina con nome (come i fogli del kit): i margini valgono su ogni pagina, anche la seconda di un menu lungo. */
@page menu-a4 { size: A4; margin: 12mm 13mm; }
@media print {
  body:has(.menu-stampa) main, body:has(.menu-stampa) .contenitore { margin: 0; padding: 0; max-width: none; }
  .menu-stampa { page: menu-a4; box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .menu-stampa__corpo { column-count: 2; }
  .menu-stampa--una .menu-stampa__corpo { column-count: 1; }
}

/* Collegare un tablet (gestione/dispositivo_collega.html): il QR grande, nero su bianco anche col tema scuro. */
.collega-qr { display: grid; gap: var(--sp-6); grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.collega-qr__codice { background: var(--carta-stampa); padding: var(--sp-2); border-radius: var(--raggio); }
.collega-qr__codice svg { display: block; width: 240px; height: 240px; }
.collega-qr__link code { word-break: break-all; font-size: var(--t-xs); }
@media (max-width: 700px) { .collega-qr { grid-template-columns: minmax(0, 1fr); } .collega-qr__codice svg { width: 200px; height: 200px; } }
.azioni-riga { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* Il menu «in lista» (dominio/tema.LAYOUT, scelto dal locale): compatto come un menu di carta. Niente foto, una riga
   per piatto con il prezzo, due colonne sugli schermi larghi. Il carrello e il cuore restano in alto a destra. */
.griglia-card.griglia-card--lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-6); }
@media (max-width: 991px) { .griglia-card.griglia-card--lista { grid-template-columns: minmax(0, 1fr); } }
.griglia-card--lista .card-p__link { flex-direction: row; min-height: 0; box-shadow: none; border-width: 0 0 1px;
  border-radius: 0; background: transparent; }
.griglia-card--lista .card-p__foto { display: none; }
.griglia-card--lista .card-p__corpo { padding: var(--sp-3) 0; }
.griglia-card--lista .card-p__nome { display: block; padding-right: 96px; min-height: 40px; }
.griglia-card--lista .card-p__desc { -webkit-line-clamp: 2; }
.griglia-card--lista .card-p__prezzo { font-size: var(--t-m); }
.griglia-card--lista .card-p__piede { margin-top: var(--sp-1); }

/* I campioni dei temi (gestione/sito.html): il cerchio prende l'accento della classe .tema-<codice> (tokens.css). */
.scelte-temi { display: flex; flex-wrap: wrap; gap: var(--sp-2); border: 0; padding: 0; margin: 0 0 var(--sp-3); }
.scelte-temi legend { font-weight: 700; margin-bottom: var(--sp-2); }
.tema-campione { position: relative; cursor: pointer; }
.tema-campione input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tema-campione > span { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--linea); border-radius: 999px; color: var(--inchiostro); }
.tema-campione__colore { width: 22px; height: 22px; border-radius: 50%; background: var(--accento); }
.tema-campione input:checked + span { border-color: var(--accento); background: var(--accento-tenue); font-weight: 700; }
.tema-campione input:focus-visible + span { outline: 2px solid var(--accento); outline-offset: 2px; }

/* Il calendario degli ordini programmati (gestione/programmati.html). */
.programmati-giorno h2 small { font-weight: 400; color: var(--inchiostro-tenue); font-size: var(--t-s); }
.programmati-giorno__pezzi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* La prova del Pro su /prezzi: un riquadro tenue, non un colore di stato. */
.prezzi-prova { max-width: 760px; margin: var(--sp-4) auto 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--raggio-grande);
  background: var(--accento-tenue); color: var(--inchiostro); }

/* L'indirizzo con i suggerimenti e la mappa nel checkout (mappa.js, integrazioni/geocodifica.py). */
.proposte-indirizzo { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; gap: 2px; }
.proposte-indirizzo:empty { display: none; }
.proposta-indirizzo { width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3); text-align: left; cursor: pointer;
  border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--superficie); color: var(--inchiostro); font: inherit; }
@media (hover: hover) { .proposta-indirizzo:hover { border-color: var(--accento); } }
.proposta-indirizzo:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.mappa-indirizzo { margin: var(--sp-3) 0; }
.mappa--piccola { height: 220px; }