/* NIENTE `@import` qui: l'URL che ne uscirebbe non porterebbe l'impronta del contenuto, e
   `token.css` resterebbe in cache su Cloudflare anche dopo un deploy che lo cambia. I
   fogli si caricano dal layout, uno per <link>, ognuno con la sua versione. (Ci si
   guadagna anche un giro di rete in meno: un `@import` si scopre solo dopo aver scaricato
   il file che lo contiene.) */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Sfondo esplicito sul body: senza, in dark mode resta il bianco del browser sotto
     al contenuto e il contrasto salta. */
  background: var(--sfondo);
  color: var(--inchiostro);
  font: 1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: var(--misura); margin: 0 auto; padding: 2rem 1rem 4rem; }
/* La misura di lettura e' giusta per la prosa e sbagliata per una griglia di copertine:
   dentro la scheda il testo resta corto comunque. */
main.largo { max-width: var(--misura-larga); }
/* ---- Il carattere dei titoli -------------------------------------------------
   Fraunces, **ospitato da noi** come Leaflet. Non da un CDN di Google: ogni pagina
   manderebbe l'indirizzo IP di chi legge a un terzo, e questo e' un sito che parla a
   persone con una diagnosi — mentre scriviamo la privacy policy, per giunta.

   **Un file solo, 35 KB**, un peso solo (700) e la dimensione ottica variabile da 9 a
   144. La variabile e' il motivo per cui basta un file: il browser sceglie da solo il
   disegno giusto per un titolo da 38px e per uno da 18px — con un peso statico il
   secondo sarebbe stato tozzo o il primo esile. Due pesi costavano 67 KB, cioe' il
   doppio per una differenza che a questa scala non si vede.

   Il corpo del testo resta il carattere di sistema: si disegna all'istante, ed e' la
   parte della pagina che si legge davvero.

   `url()` senza impronta, a differenza dei fogli di stile: questo file non cambia mai.
   Se un giorno cambiasse, cambierebbe il nome. Licenza SIL OFL 1.1, accanto al file. */
@font-face {
  font-family: Fraunces;
  src: url(/font/fraunces-latin-700.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* ⚠️ Perche' `optional` e non `swap`, che e' la scelta solita.

   Con `swap` il titolo si disegna nel carattere di ripiego e poi **cambia**: se la
   larghezza non coincide, il titolo si riimpagina e tutto cio' che sta sotto salta.
   E' CLS, e su questo sito e' una regola, non una preferenza.

   Ho provato a compensarlo con `size-adjust` su un ripiego dichiarato, dopo aver
   misurato in pagina che Georgia e' l'11,9% piu' stretta di Fraunces. Non funziona, e
   il motivo e' istruttivo: quel numero vale per Georgia, ma **quale** carattere faccia
   da ripiego lo decide il sistema di chi legge — Georgia su Windows e Mac, Liberation
   Serif o DejaVu su Linux, Times altrove — e ognuno ha metriche sue. Misurato qui, la
   compensazione portava lo scarto da -11,9% a -6,2% invece che a zero, perche' stavo
   correggendo un carattere diverso da quello che il browser aveva scelto. Un numero
   giusto su un sistema e sbagliato sugli altri non e' una correzione, e' un
   arrotondamento travestito.

   `optional` toglie il problema invece di compensarlo: il browser usa il ripiego
   **oppure** Fraunces, e non scambia mai. Zero spostamento per costruzione, senza
   nessun numero da difendere.

   Il prezzo: chi arriva per la prima volta su una rete lenta vede i titoli nel serif di
   sistema. Il file e' 35 KB, precaricato e dallo stesso dominio, quindi quasi sempre
   arriva in tempo; e dalla seconda pagina e' in cache. Un titolo in Georgia e' un
   titolo meno caratterizzato, non una pagina rotta. */
h1, h2, h3 {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 700; letter-spacing: -.01em;
}
/* Un `h2` che non e' un titolo ma un'etichetta di gruppo: in un serif da titolo
   sembrerebbe importante quanto il contenuto a cui si riferisce. */
.piede-venditori h2 {
  font-family: inherit; font-weight: 600; letter-spacing: normal;
}
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height: 1.2; margin: 0 0 .5rem; }
.intro { color: var(--inchiostro-tenue); font-size: 1.1rem; margin-top: 0; }
/* Dentro `main.largo` un'introduzione prenderebbe tutti i 1.184px e l'occhio perderebbe
   il capo della riga dopo. 52rem sono circa 95 caratteri: piu' della misura di lettura,
   perche' sono due righe e non un articolo, ma lontani dalla larghezza della pagina. */
.intro--larga { max-width: 52rem; }
a { color: var(--marchio-forte); }

/* Intestazione e pie'. Larghi quanto la griglia della home, non quanto la misura di
   lettura: un menu non e' prosa, e incolonnarlo a 68ch lo farebbe sembrare storto
   rispetto al contenuto piu' largo che ha sotto. */
.capo, .piede > * { max-width: var(--misura-larga); margin-inline: auto; }
/* `1fr auto 1fr`: le due colonne laterali prendono lo stesso spazio qualunque cosa ci
   sia dentro, quindi il marchio sta al centro della BARRA e non al centro del
   contenuto. E' la differenza fra un centro che resta fermo e uno che si sposta quando
   qualcuno entra e a destra compaiono due voci in piu'. */
.capo {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  gap: .6rem 2rem; padding: 1rem; border-bottom: 1px solid var(--bordo);
}
.capo-sx .menu { justify-content: flex-end; }
.capo-dx { font-size: .9rem; }
/* ⚠️ «Carrello» e' un'icona, e l'area che si tocca e' 44x44 — la misura raccomandata
   per un dito — mentre il disegno ne occupa 22. Senza il `min-height` il bersaglio
   sarebbe alto quanto il tratto, cioe' meta' di quello che serve, e sul telefono si
   manca. Richiesta del committente, 2026-10-21, ed e' una di quelle che si verificano
   solo misurando: a guardare la barra l'icona sembra gia' abbastanza grande. */
.capo-azione {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: -11px 0; padding: 0;
}
.capo-azione svg { width: 22px; height: 22px; }
/* ⚠️ A 1.000px «Negozio» andava a capo su una seconda riga, e il committente l'ha
   visto prima di me (2026-10-21). Non e' il marchio a essere storto: la griglia e'
   `1fr auto 1fr` da sempre e lo scarto misurato e' zero a 1.366, 1.280 e 1.100 pixel.
   E' la colonna di sinistra che a quella larghezza non ci sta in una riga, e una barra
   alta due righe con cinque voci da una parte e quattro dall'altra SEMBRA sbilanciata
   anche quando non lo e'.

   Qui le due colonne si stringono insieme invece che a occhio: stesso corpo a destra e
   a sinistra e spazi piu' corti, dai 1.100 pixel in giu'.

   ⚠️ Non serve che reggano piu' giu' di 960px: li' questa barra sparisce del tutto
   (`display: none`) e prende il suo posto quella del telefono. Misurato a 965, 1.000 e
   1.024: una riga sola, marchio al centro con scarto zero. La regola a 52rem piu' in
   basso in questo file, che impilerebbe le tre colonne, oggi non la raggiunge
   nessuno — resta perche' e' la rete di sicurezza se quel 60rem cambiasse. */
@media (max-width: 1100px) {
  .capo { gap: .6rem 1.2rem; }
  .capo-sx { font-size: .9rem; }
  .capo-sx .menu, .capo-dx .menu { gap: .3rem .9rem; }
  .marchio img { width: 128px; }
}
/* La riga delle aree riservate: sotto la barra, piu' piccola, e si vede solo a chi e'
   entrato. Non e' navigazione del sito, e' la cassetta degli attrezzi di chi ci lavora. */
.capo-riservate {
  max-width: var(--misura-larga); margin-inline: auto;
  padding: .4rem 1rem; border-bottom: 1px solid var(--bordo); font-size: .85rem;
}
.capo-riservate .menu { justify-content: flex-end; gap: .3rem 1.2rem; }
.capo-dx .menu { justify-content: flex-start; gap: .3rem 1rem; }
/* Sotto i 52rem le tre colonne diventano tre righe, col marchio in cima: su un telefono
   un marchio al centro di una riga stretta spezza il menu in due mozziconi. */
@media (max-width: 52rem) {
  .capo { grid-template-columns: 1fr; justify-items: center; gap: .5rem; }
  .capo-sx .menu, .capo-dx .menu, .capo-riservate .menu { justify-content: center; }
  .marchio { order: -1; }
}
/* Il bottone «esci» e' una POST — uscire cambia stato, quindi non e' un collegamento —
   ma si deve leggere come il resto della barra, non come un bottone di modulo. */
.esci { display: inline; }
.esci button { background: none; border: 0; padding: .2rem 0; cursor: pointer;
  color: var(--marchio-forte); font: inherit; text-decoration: none; }
.esci button:hover { text-decoration: underline; }
/* ## L'inversione del logo sta sull'IMMAGINE, non sul contenitore
   Il file e' nero su trasparente e al buio va invertito. Fino al 2026-10-15 la regola
   era legata a `.marchio`, cioe' al collegamento che lo avvolge nell'intestazione —
   e il logo compare in TRE posti con tre classi diverse. Risultato: nella barra del
   telefono era nero su fondo nero, e lo e' diventato anche nel pie' appena l'ho
   aggiunto. Una regola legata al contenitore si perde ogni volta che nasce un
   contenitore nuovo; legata all'immagine vale per costruzione, e
   `InvariantiStaticiTest` controlla che ogni logo porti la sua classe.

   Il marchio. L'immagine e' nera su trasparente e il tema scuro la inverte: una forma
   sola, nessuna seconda copia che possa divergere dalla prima. I selettori sono gli
   STESSI dei token — preferenza di sistema piu' `data-tema` — perche' se il logo
   seguisse una regola diversa dai colori, prima o poi si vedrebbe nero sul nero. */
.marchio { display: block; line-height: 0; }
.marchio img { display: block; width: 150px; height: auto; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .logo { filter: invert(1); }
}
:root[data-tema="scuro"] .logo { filter: invert(1); }
.menu, .sottomenu, .menu-piede { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: baseline; }
.menu > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.menu a, .menu-piede a { text-decoration: none; padding: .2rem 0; }
.menu a:hover, .menu-piede a:hover { text-decoration: underline; }
/* La voce corrente si distingue anche senza colore: il colore da solo non basta a chi non
   lo vede, e la semantica dei token non si presta a decorare. */
.menu a[aria-current] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--marchio); }
.menu a[aria-current="true"] { font-weight: 600; }
/* Il secondo livello esiste solo dove serve — oggi le Ricette — e si vede che e' secondo:
   piu' piccolo, staccato da un separatore, non una riga di pari dignita'. */
.sottomenu { font-size: .9rem; gap: .2rem .8rem; }
.sottomenu::before { content: "·"; color: var(--inchiostro-tenue); }
.sottomenu a { color: var(--inchiostro-tenue); }

/* ## Il pie' di pagina
   `--grano` e non `--superficie`: e' il tono caldo della tavolozza, e da' al pie' un
   peso che lo stacca dal contenuto senza aggiungere un colore nuovo. I token restano
   quelli (invariante 11), e quelli con una semantica — pericolo, attenzione, conferma —
   non si usano per decorare.

   ⚠️ Niente `margin-top`. `main` ha gia' 4rem di spazio sotto: sommati facevano 128px
   di vuoto fra l'ultimo blocco e il pie', e si vedeva da quando la home e' diventata
   corta (2026-10-15). Lo spazio lo mette il contenuto, una volta sola. */
.piede {
  border-top: 1px solid var(--bordo); background: var(--grano);
  padding: 2.5rem 1rem 1.5rem;
}
.piede__griglia {
  max-width: var(--misura-larga); margin-inline: auto;
  display: grid; gap: 2rem; grid-template-columns: 1fr;
}
/* Due colonne, poi quattro: gli stessi passi del resto del sito. Il salto da 2 a 4 e
   non a 3 tiene i gruppi in pari — tre colonne lascerebbero l'ultima da sola. */
@media (min-width: 40rem) { .piede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .piede__griglia { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.piede__marchio { display: block; line-height: 0; }
.piede__marchio img { display: block; width: 10rem; height: auto; }
.piede__frase {
  color: var(--inchiostro-tenue); font-size: .92rem; line-height: 1.5;
  margin: .8rem 0 0; max-width: 24rem;
}

.piede__titolo {
  font-family: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--inchiostro-tenue);
  margin: 0 0 .7rem;
}
.piede__voci { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.piede__voci a {
  text-decoration: none; color: var(--inchiostro); font-size: .95rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.piede__voci a:hover { text-decoration: underline; }
/* La voce corrente si distingue anche a colori spenti: il grassetto non dipende dalla
   vista dei colori. Stessa regola del menu in cima. */
.piede__voci a[aria-current] { font-weight: 700; }
/* L'icona prende il verde del marchio e si rimpicciolisce con il testo. `flex-shrink`
   a zero: con un'etichetta di due righe, senza, l'icona si schiaccerebbe in un ovale. */
.piede__icona { display: inline-flex; flex: 0 0 auto; color: var(--marchio); }
.piede__icona svg { width: 1.05rem; height: 1.05rem; display: block; }

/* ⚠️ Niente filetto sopra la riga legale, e non e' una dimenticanza: ce l'avevo messo
   e NON SI VEDEVA. `--bordo` su `--grano` fa 1,02:1 — misurato — cioe' lo stesso
   colore. Il token del bordo e' tarato su `--sfondo` e `--superficie`, che sono quasi
   bianchi; sul fondo caldo del pie' sparisce.

   Un token nuovo per questa riga sola non si giustifica: `--grano` si usa in due posti
   in tutto il sito, e l'altro (`.fascia-accento`) non ha bordi dentro. Quindi separa
   lo spazio, che e' quello che stava gia' facendo da solo. Chi volesse rimettere una
   linea qui sappia che deve portarsi anche il colore con cui farla. */
.piede__legale {
  max-width: var(--misura-larga); margin: 2rem auto 0; padding-top: 1.2rem;
  color: var(--inchiostro-tenue); font-size: .82rem; line-height: 1.6;
}
.piede-altro { margin-top: 1rem; }
.piede-altro summary { cursor: pointer; color: var(--inchiostro-tenue); font-size: .9rem; }
.piede-altro .menu-piede { margin-top: .6rem; font-size: .92rem; }
/* «vuota» accanto al link: detto prima del clic, non scoperto dopo. */
.spenta { color: var(--inchiostro-tenue); font-size: .8rem; font-style: italic; }

/* Il salto al contenuto: primo elemento focalizzabile, visibile solo da tastiera. */
.salta {
  position: absolute; left: -9999px;
  background: var(--sfondo); color: var(--inchiostro);
  padding: .6rem 1rem; border: 2px solid var(--marchio); border-radius: var(--raggio);
}
.salta:focus { left: 1rem; top: 1rem; z-index: 10; }

/* Sette stati interattivi: il focus visibile non e' un dettaglio estetico, e' l'unico
   modo di usare il sito da tastiera. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--marchio); outline-offset: 2px;
}

/* Immagini: mai piu' larghe del contenitore, e con un rapporto stabile in lista cosi'
   che il layout non salti mentre caricano. */
img { max-width: 100%; height: auto; }
.copertina { margin: 0 0 1.5rem; }
.copertina img { border-radius: var(--raggio); }
.articoli { list-style: none; padding: 0; display: grid; gap: 2rem; }
.articolo h3 { margin: .4rem 0 .3rem; }
.miniatura { display: block; }
.miniatura img { border-radius: var(--raggio); aspect-ratio: 16 / 9; object-fit: cover; }
.meta { color: var(--inchiostro-tenue); font-size: .9rem; margin: .2rem 0; }
.prosa { max-width: var(--misura); }
.prosa h2 { margin-top: 2rem; }
/* ─── Le due pagine istituzionali (committente, 2026-10-22) ─────────────────────────
   Le due righe che smistano chi non deve usare il modulo: un titolare di locale e un
   produttore hanno ciascuno una strada propria, piu' veloce di una mail. Stanno in un
   riquadro leggero e non fra la prosa perche' non sono il discorso della pagina — sono
   due uscite laterali, e chi non e' nessuno dei due le deve poter saltare in un colpo
   d'occhio. */
.smistamento {
  max-width: var(--misura); margin: 1.5rem 0;
  border-left: 3px solid var(--marchio); padding: .2rem 0 .2rem 1rem;
}
.smistamento p { margin: .5rem 0; color: var(--inchiostro-tenue); }
.recapiti { max-width: var(--misura); margin: 1.5rem 0; padding-left: 1.2rem; }
.recapiti li { margin: .4rem 0; }
/* «(facoltativo)» scritto per esteso: su un modulo dove tre campi su quattro sono
   obbligatori, chi legge in fretta legge gli asterischi, non le loro mancanze. Tenue
   e piu' piccolo perche' e' una nota sull'etichetta, non parte del nome del campo. */
.facoltativo { font-weight: 400; font-size: .9em; color: var(--inchiostro-tenue); }
.tassonomia { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.tassonomia a {
  border: 1px solid var(--bordo); border-radius: 999px; padding: .2rem .8rem;
  text-decoration: none; font-size: .9rem;
}
.tassonomia a span { color: var(--inchiostro-tenue); font-variant-numeric: tabular-nums; }

/*
 * Le sottosezioni non sono tag: sono l'unico modo di entrare in «Dolci» e «Salate» da
 * quando il menu ha un livello solo. Stesso disegno dei tag — e' l'interfaccia che c'e'
 * gia' — ma piu' grandi e sopra agli articoli, perche' qui sono una scelta, non una coda.
 */
.sottosezioni { margin: 0 0 2rem; }
/* Nel verde del marchio, per decisione del committente del 2026-10-06. Pieno e non
   bordato: un contorno verde su fondo chiaro ha un contrasto di 1,9:1 contro lo sfondo e
   sparisce, il pieno porta il bianco a 5,3:1 sopra. Il conteggio dentro il pulsante
   smette di essere tenue — `--inchiostro-tenue` sul verde non si legge — e si distingue
   dal nome per il peso. */
.sottosezioni a {
  padding: .45rem 1.1rem; font-size: 1rem; font-weight: 600;
  background: var(--marchio); border-color: var(--marchio); color: var(--su-marchio);
}
.sottosezioni a span { color: var(--su-marchio); font-weight: 400; }
.sottosezioni a:hover { background: var(--marchio-forte); border-color: var(--marchio-forte); }

/* ─── Il carrello ───────────────────────────────────────────────────────────────
   Una riga per prodotto: nome, prezzo unitario, quantita', totale di riga, e il modo
   di toglierlo. Su telefono va a capo e resta leggibile, perche' le colonne hanno una
   larghezza minima invece di una fissa. */
.carrello { list-style: none; padding: 0; margin: 1.5rem 0; max-width: var(--misura-larga); }
.carrello__riga {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--bordo);
}
.carrello__nome { flex: 1 1 14rem; font-weight: 600; }
.carrello__prezzo, .carrello__riga-totale {
  font-variant-numeric: tabular-nums; color: var(--inchiostro-tenue);
}
.carrello__riga-totale { font-weight: 700; color: var(--inchiostro); min-width: 5rem; text-align: right; }
.carrello__quantita { display: flex; gap: .4rem; align-items: center; margin: 0; }
.carrello__quantita input { width: 4.5rem; }
.carrello__togli { margin: 0; }
.carrello__togli button, .carrello__quantita button {
  background: none; border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: .3rem .7rem; cursor: pointer; font: inherit; color: var(--inchiostro);
}
.carrello__togli button:hover, .carrello__quantita button:hover { border-color: var(--bordo-campo); }
.carrello__totale {
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: baseline;
  margin: 1.2rem 0; font-size: 1.15rem;
}
.carrello__totale span { color: var(--inchiostro-tenue); font-size: .95rem; }
.carrello__totale strong:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
/* Il pulsante «aggiungi» sulla scheda: e' l'azione principale della pagina, quindi ha
   il peso di un bottone e non di un collegamento. */
.al-carrello { margin: 1rem 0; }
.al-carrello button {
  background: var(--marchio); color: var(--su-marchio); border: 0;
  border-radius: var(--raggio); padding: .6rem 1.2rem; cursor: pointer;
  font: inherit; font-weight: 600;
}
.al-carrello button:hover { background: var(--marchio-forte); }
.al-carrello__invito { margin: 1rem 0; }

/* ─── Le barre dei numeri (committente, 2026-10-21) ──────────────────────────────
   Nome a sinistra, barra elastica, numero a destra allineato. Il nome ha una
   larghezza fissa perche' le barre devono partire tutte dallo stesso punto: a
   larghezze diverse il confronto fra due righe non si legge piu'. */
.barre__elenco { list-style: none; padding: 0; margin: .6rem 0 0; }
.barra-riga a {
  display: flex; align-items: center; gap: .75rem;
  min-height: 2.25rem; text-decoration: none; color: var(--inchiostro);
}
.barra-riga a:hover .barra-riga__nome { text-decoration: underline; }
.barra-riga__nome { flex: 0 0 9rem; }
.barra-riga__barra {
  flex: 1 1 auto; display: block; height: 8px;
  background: var(--superficie); border-radius: 999px; overflow: hidden;
}
/* La `width` sta nell'attributo dell'SVG, non qui: e' il dato. Vedi `_barra`. */
.barra-riga__pieno { display: block; height: 8px; }
.barra-riga__pieno rect { fill: var(--marchio); }
.barra-riga__numero {
  flex: 0 0 2.5rem; text-align: right;
  color: var(--inchiostro-tenue); font-variant-numeric: tabular-nums;
}
/* Sul telefono il nome di un comune lungo mangerebbe la barra: il nome va sopra e la
   barra prende la riga sua. */
@media (max-width: 34rem) {
  .barra-riga a { flex-wrap: wrap; gap: .25rem .75rem; }
  .barra-riga__nome { flex: 1 1 100%; }
  /* ⚠️ `0` e non `auto`: con la base automatica la barra chiede al contenuto quanto
     e' larga, non resta spazio per il numero sulla stessa riga, e il numero finisce
     da solo su una terza riga sotto la barra. Con dodici cucine in fila quel difetto
     — che con otto citta' passava inosservato — diventa mezza schermata di vuoto. */
  .barra-riga__barra { flex: 1 1 0; }
}

/* L'anteprima dell'Italia in testata: la colonna le da' la misura, non il contrario. */
.testata-illo__mappa .anteprima-mappa { display: block; max-width: 15rem; margin-inline: auto; }
/* ⚠️ NON centrata, e la prima stesura la centrava. L'ha fermata il controllo sul
   centramento, e aveva ragione due volte: non sta nel file del committente — l'ho
   aggiunta io — e un'attribuzione di licenza non e' una didascalia decorativa, e'
   una riga di testo che si legge come tutte le altre. */
.testata-illo__mappa .fonte { font-size: .78rem; margin-top: .4rem; }
/* I due numeri della testata. */
.cifre { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .8rem 0 1rem; }
.cifra { color: var(--inchiostro-tenue); font-size: .95rem; }
.cifra strong {
  display: block; font-size: 1.8rem; color: var(--marchio-forte);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

/* ─── Testata illustrata e card (committente, 2026-10-21) ────────────────────────
   Fondo PIENO, mai un motivo: «niente sfondo con i chicchi di riso, in nessuna
   pagina». Il colore e' `--grano`, che in tema scuro diventa un bruno scuro da se'.

   La fascia esce dalla misura della pagina con un margine negativo e si ripaga il
   padding: cosi' il colore arriva ai bordi su una pagina `largo` senza che il testo
   dentro smetta di allinearsi col resto. */
.testata-illo {
  background: var(--grano); border-radius: var(--raggio);
  padding: 1.6rem 1.4rem; margin: 0 0 1.6rem;
  display: grid; gap: 1rem; align-items: center;
}
.testata-illo__testo > :first-child { margin-top: 0; }
.testata-illo .ricerca-veloce { margin-bottom: 0; }
/* L'illustrazione va a destra solo quando c'e' spazio: sotto, si impila e si
   rimpicciolisce. A 52rem il testo avrebbe meno di trenta caratteri per riga. */
@media (min-width: 52rem) {
  .testata-illo { grid-template-columns: minmax(0, 1fr) 15rem; gap: 2rem; padding: 2rem; }
}

/* ⚠️ Le illustrazioni NON hanno `width`/`height` nel markup: la CSP non applica uno
   stile scritto li', e una misura fissa nell'SVG non si adatta alla colonna. Il
   `viewBox` tiene le proporzioni, questa regola da' la dimensione. */
.illo { display: block; width: 100%; height: auto; }
.illo--testata { max-width: 15rem; margin-inline: auto; }
/* Nel file l'illustrazione di una card e' larga quanto la card e alta 120px: il
   `viewBox` la centra dentro quello spazio da solo, senza deformarla. */
.illo--card { height: 7.5rem; }

/* Le tre card. `auto-fit` e non tre colonne fisse: con la sezione alimenti sospesa i
   verdetti pubblicati sono due su quattro, quindi le card possono essere due o tre, e
   una griglia da tre lascerebbe un buco. */
.card-illo {
  list-style: none; padding: 0; margin: 0 0 1.6rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
/* ⚠️ Allineate a SINISTRA e numero IN LINEA: e' come sta nel file del committente,
   e la prima stesura le aveva centrate col numero grande sotto. L'ha fermata il
   controllo che vieta di centrare testo fuori dalla landing — scritto apposta perche'
   aggiungere un centramento costi «una riga e una ragione» — e la ragione non c'era:
   avevo interpretato invece di copiare. */
.card-illo a {
  display: block; text-decoration: none;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: .8rem 1rem 1.1rem; color: var(--inchiostro); height: 100%;
}
.card-illo a:hover { border-color: var(--marchio); }
.card-illo__titolo {
  display: block; margin-top: .6rem;
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-size: 1.25rem; font-weight: 700; line-height: 1.25;
}
/* ⚠️ Il numero e' un DATO, non una decorazione: sta nel testo e non nella grafica,
   perche' l'illustrazione e' `aria-hidden` e chi ascolta la pagina sentirebbe solo il
   titolo. Vale la stessa regola delle barre su «Mangiare fuori». */
.card-illo__numero {
  font-family: system-ui, sans-serif; font-size: .9rem; font-weight: 400;
  color: var(--inchiostro-tenue); font-variant-numeric: tabular-nums;
}

.indice { columns: 2; column-gap: 2.5rem; margin: 0 0 1rem; padding-left: 1.1rem; }
.indice li { break-inside: avoid; margin: .15rem 0; }
/* Un indice LUNGO dentro una pagina larga prende `elenco--colonne`, che dichiara la
   larghezza di una colonna invece del numero. Il selettore e' composto apposta: le due
   regole hanno la stessa specificita' e oggi vince `.elenco--colonne` solo perche' sta
   piu' in basso nel file. Scritto cosi' smette di dipendere dall'ordine delle righe.

   ⚠️ Avendo due classi batte anche il `columns: 1` sotto i 40rem qui sopra, che su
   questi elenchi quindi NON si applica piu'. E' voluto: quella media query serviva a
   `columns: 2`, dove due colonne di larghezza non dichiarata su un telefono diventano
   due strisce illeggibili. Con `column-width` il problema non esiste — il browser ne
   mette una sola quando ne entra una sola — ed e' esattamente il motivo per cui
   `.elenco--colonne` dichiara una larghezza invece di un numero. */
.indice.elenco--colonne { columns: 14rem; }
/* ⚠️ Dentro una pagina larga un indice NON opta per `elenco--colonne`: prende una
   colonna piu' larga, e il `:not()` serve a lasciare in pace chi ha gia' scelto.

   Il motivo e' che non tutti gli indici sono elenchi di nomi corti. Su `/alimenti/`
   lo sono — «Amaranto», «Burro» — e 14rem bastano. Su `/ricerca/` e `/statistiche/`
   ogni voce ha un titolo **e** una riga di dettaglio sotto («Fusilli · 6,90 € · Molino
   di Prova», «Trattoria del Borgo · 12 locali»), e a 14rem quella seconda riga va a
   capo due volte. Applicarci la stessa classe sarebbe stato il modo veloce e
   sbagliato: la classe dichiara una larghezza, e la larghezza giusta dipende da cosa
   c'e' dentro.

   21rem fanno tre colonne nel contenitore largo invece delle due fisse di prima, e
   tengono la riga di dettaglio su una riga sola. */
main.largo .indice:not(.elenco--colonne) { columns: 21rem; }
@media (max-width: 40rem) { .indice { columns: 1; } }

/* `max-height` e non solo `max-width`: una foto 4:3 larga quanto la colonna e' alta
   mezzo schermo, e spinge sotto la piega il prezzo — cioe' la cosa per cui si e' aperta
   la pagina. Con `width: auto` vale anche per le foto in verticale, che sono peggio. */
.foto-prodotto {
  display: block; max-width: 100%; max-height: 380px; width: auto; height: auto;
  border-radius: var(--raggio); border: 1px solid var(--bordo); margin: 0 0 1.2rem;
}
.miniatura-prodotto {
  width: 96px; height: 96px; object-fit: cover; border-radius: var(--raggio);
  border: 1px solid var(--bordo); flex: 0 0 auto;
}
.attivita--con-foto { display: flex; gap: 1rem; align-items: flex-start; }
.attivita--con-foto > div { min-width: 0; flex: 1; }
.campo-foto { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem 1.2rem; margin: 0 0 1.2rem; }
.campo-foto legend { padding: 0 .4rem; font-weight: 600; }
.anteprima-foto {
  display: block; max-width: 220px; height: auto; border-radius: var(--raggio);
  border: 1px solid var(--bordo); margin: 0 0 .8rem;
}

/* Leaflet colora da JavaScript: qui si riprende il controllo con una classe, cosi' il
   colore resta un token come ovunque (invariante 11) e segue il tema. */
/* Leaflet colora da JavaScript: qui si riprende il controllo con una classe, cosi' il
   colore resta un token come ovunque (invariante 11) e segue il tema chiaro e scuro.
   Il bordo e' `--su-marchio` e non il verde: sopra una mappa che e' gia' verde di
   campagna, un cerchio verde con bordo verde non si stacca da niente. */
.punto-comune {
  fill: var(--marchio); fill-opacity: .7;
  stroke: var(--su-marchio); stroke-opacity: .95;
}
.punto-comune:hover { fill-opacity: 1; }

/* Le prime tabelle del sito, nelle statistiche. `overflow-wrap` perche' un percorso
   lungo su un telefono allargherebbe la pagina invece di andare a capo. */
.tabella { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .95rem; }
.tabella th, .tabella td {
  text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--bordo);
  overflow-wrap: anywhere;
}
.tabella th { font-weight: 600; color: var(--inchiostro-tenue); }
.tabella td:last-child, .tabella th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Il collegamento d'invito: un <textarea> e non un <p>, perche' si deve poter
   selezionare tutto con un tocco e copiare — e perche' va a capo senza allargare la
   pagina su un telefono. `readonly` e non `disabled`: disabilitato non si seleziona. */
.gettone {
  width: 100%; font-family: ui-monospace, monospace; font-size: .9rem;
  padding: .6rem; border: 1px solid var(--bordo-campo); border-radius: var(--raggio);
  background: var(--superficie); color: var(--inchiostro); resize: vertical;
}

/* La barra di ricerca. `flex: 1` sul campo e non una larghezza fissa: deve riempire
   quello che resta accanto al titolo, qualunque sia la lunghezza del titolo. */
/* La barra di ricerca. `flex: 1` sul campo e non una larghezza fissa: deve riempire
   quello che resta accanto al titolo, qualunque sia la lunghezza del titolo.

   Lo stile e' quello del resto del sito — stessa pillola dei badge e del bottone dei
   preferiti — perche' prima sembrava un campo di sistema capitato li': bordo sottile,
   nessuna altezza, un bottoncino grigio accanto. Una casella di ricerca che non sembra
   una casella di ricerca non la usa nessuno. */
.ricerca-veloce { display: flex; gap: .5rem; align-items: center; flex: 1 1 18rem; }
.ricerca-veloce input {
  flex: 1 1 auto; min-width: 0;
  padding: .6rem 1.1rem; border: 1px solid var(--bordo-campo); border-radius: 999px;
  background: var(--sfondo); color: var(--inchiostro); font: inherit;
}
.ricerca-veloce input::placeholder { color: var(--inchiostro-tenue); opacity: 1; }
.ricerca-veloce input:hover { border-color: var(--marchio); }
.ricerca-veloce button {
  padding: .6rem 1.4rem; border: 0; border-radius: 999px;
  background: var(--marchio); color: var(--su-marchio);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ricerca-veloce button:hover { background: var(--marchio-forte); }
/* La stessa barra dentro una sezione: non e' in una riga con altro, quindi non deve
   allungarsi quanto la pagina — oltre una certa larghezza un campo di ricerca sembra
   un campo di testo libero. `flex` torna a zero perche' qui non divide spazio con
   nessuno. */
.ricerca-veloce--sezione { flex: 0 1 auto; max-width: 30rem; margin: 0 0 1.2rem; }
/* L'esito della ricerca. `role="status"` nel markup: chi usa uno screen reader sente
   quanti risultati sono senza doverli contare. */
.esito-ricerca {
  color: var(--inchiostro-tenue); font-size: .95rem; margin: 0 0 1.2rem;
}
/* La barra dei filtri: stesso componente delle scorciatoie ai gruppi, ma e' un'altra
   cosa — quelle portano piu' in basso nella stessa pagina, questi cambiano cosa c'e'
   nella pagina. La voce attiva si distingue con il fondo pieno e non solo col colore:
   il colore da solo non basta a chi non lo vede. */
.tassonomia--filtro { margin-bottom: 1.2rem; }
.tassonomia--filtro a[aria-current] {
  background: var(--marchio); color: var(--su-marchio);
  border-color: var(--marchio); font-weight: 600;
}
/* Visibile a chi legge con la voce, non a chi guarda: un campo senza etichetta si
   annuncia come «campo di testo» e basta. Il segnaposto non e' un'etichetta — sparisce
   appena si scrive. */
.solo-voce {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Titolo a sinistra e barra a destra sulla stessa riga; sotto i 40rem vanno a capo,
   perche' su un telefono starebbero strette tutte e due. */
.riga-ricerca { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; margin: 0 0 1.5rem; }
.riga-ricerca h2 { margin: 0; }

.centrato { text-align: center; }

/* Gli orari, una riga per regola: un elenco e non un paragrafo, perche' si leggono
   cercando il proprio giorno e non dall'inizio alla fine. */
.orari { list-style: none; margin: 0; padding: 0; }
.orari li { font-variant-numeric: tabular-nums; }

.vuoto { color: var(--inchiostro-tenue); }

/* La ricetta in sintesi: e' cio' che lo schema dichiara, quindi deve leggersi bene. */
.ricetta {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 1.2rem 1.4rem; margin: 0 0 2rem;
}
.ricetta h2:first-child { margin-top: 0; }
.farine { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; margin: 0 0 1rem; }
.ingredienti, .passaggi { margin: .4rem 0 1.2rem; padding-left: 1.3rem; }
/* L'intestazione di un gruppo di ingredienti («Per la frolla»). E' un `<li>` perche'
   dentro una `<ul>` non puo' esserci altro, ma non e' una voce: si toglie il pallino e
   si rientra la riga a sinistra, cosi' si legge come il titolo del blocco che segue.
   `margin-top` solo dal secondo in poi — `:not(:first-child)` — o il primo gruppo
   staccherebbe dal titolo «Ingredienti» piu' di quanto stacchi dal proprio elenco. */
.ingredienti__gruppo {
  list-style: none; margin-left: -1.3rem; font-weight: 600;
}
.ingredienti__gruppo:not(:first-child) { margin-top: .8rem; }
.passaggi li { margin-bottom: .6rem; }

/* Le schede della home. `auto-fill` invece di un numero di colonne: la griglia decide da
   se' quante ce ne stanno, e non serve una media query per ogni larghezza. */
/* `auto-fill` con una larghezza minima: la griglia decide da se' quante colonne ci
   stanno, e non serve una media query per ogni formato. A 74rem sono quattro, su un
   portatile tre, sul telefono una. */
.schede { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.scheda { display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.scheda__figura { display: block; }
.scheda__figura img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.scheda__corpo { display: flex; flex-direction: column; gap: .45rem; flex: 1;
  padding: .9rem 1.1rem 1.1rem; }
.scheda h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.scheda h3 a { text-decoration: none; }
.scheda h3 a:hover { text-decoration: underline; }
.scheda p { margin: 0; font-size: .92rem; color: var(--inchiostro-tenue); }
/* `margin-top: auto` incolla la riga in fondo: le schede hanno la stessa altezza anche
   con estratti di lunghezza diversa, e le date si leggono allineate. */
.scheda .meta { margin-top: auto; padding-top: .35rem;
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.sezione { margin-top: 3rem; }
.sezione h2 { margin-bottom: .2rem; }
.sezione .intro { font-size: 1rem; margin-bottom: 1.2rem; }

/* Moduli ed esiti */
.modulo { max-width: 24rem; }
.modulo--riga { max-width: none; margin: 1rem 0; }
/* ⚠️ `--bordo-campo` e non `--bordo`, su TUTTI i campi: un campo ha lo stesso fondo
   della pagina, quindi il suo contorno e' l'unica cosa che dice dove si scrive, e
   `--bordo` contro `--sfondo` fa 1,30:1. Le linee guida chiedono 3:1 per i contorni dei
   componenti. Misurato il 2026-10-14; il perche' per esteso sta in `token.css`. */
.modulo textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--bordo-campo);
  border-radius: var(--raggio); background: var(--sfondo); color: var(--inchiostro);
  font: inherit; }
.modulo .scelta { display: flex; gap: .5rem; align-items: baseline; }
.modulo .scelta label { font-weight: 400; }
.modulo .scelta input { width: auto; }
.modulo label { display: block; font-weight: 600; margin-bottom: .2rem; }
.modulo input {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--bordo-campo);
  border-radius: var(--raggio); background: var(--sfondo); color: var(--inchiostro);
}
.modulo button {
  padding: .6rem 1.4rem; border: 0; border-radius: var(--raggio);
  background: var(--marchio); color: var(--su-marchio); font-weight: 600; cursor: pointer;
}
/* L'esito si vede anche senza colore: ha un bordo spesso a sinistra e un ruolo ARIA. */
.esito { border-left: 4px solid var(--bordo); padding: .6rem 1rem; margin: 0 0 1.2rem;
  background: var(--superficie); border-radius: var(--raggio); }
.esito--ok { border-left-color: var(--conferma); }
.esito--avviso { border-left-color: var(--attenzione); }
.esito--errore { border-left-color: var(--pericolo); font-weight: 600; }

/* La mappa. Altezza esplicita: Leaflet dentro un contenitore alto zero non disegna
   niente, e il guasto sembra «la mappa non funziona» invece di «manca una riga di CSS».
   `[hidden]` lo rispetta anche contro il `display:block` che Leaflet mette da se'. */
/* `isolation: isolate` e non un numero piu' grande altrove.

   Leaflet dispone i suoi riquadri con `z-index` da 400 a 1000, e senza questa riga
   quei numeri valgono nel contesto della pagina: la barra in basso del telefono, che
   sta a 30, finiva **dipinta sotto la mappa** sulla pagina piu' importante del sito.
   Trovato il 2026-10-07 da uno screenshot — `elementFromPoint` diceva il contrario,
   perche' il tocco e la pittura non seguono la stessa regola, e quello che conta e'
   cosa si vede.

   Rincorrere Leaflet con 1100 avrebbe funzionato oggi e rotto al prossimo elemento
   sovrapposto. Qui la mappa diventa un contesto suo: i suoi numeri non escono piu'. */
.mappa { height: 24rem; margin: 1.5rem 0; border: 1px solid var(--bordo);
  border-radius: var(--raggio); isolation: isolate; }
/* L'Italia e' alta e stretta: nella scatola normale resta un francobollo circondato dal
   mare. Qui la mappa e' il contenuto principale della pagina, non un corredo. */
.mappa--paese { height: min(44rem, 82vh); margin-top: 0; }
/* Su un telefono l'80% dell'altezza e' quasi tutto lo schermo: la mappa diventa l'unica
   cosa che si vede e nasconde che sotto c'e' la ricerca e l'elenco delle province. */
@media (max-width: 40rem) { .mappa--paese { height: 60vh; } }

/* L'hub: mappa a sinistra, scorciatoie a destra.

   La forma dell'Italia decide la griglia. In un contenitore largo 1.184px una mappa a
   tutta larghezza avrebbe il paese in mezzo e due terzi di mare ai lati — spazio pagato
   e non usato. Dandogli una colonna di 21rem accanto, la mappa resta larga quanto le
   serve e puo' crescere in **altezza**, che e' la direzione in cui l'Italia ha bisogno
   di spazio.

   Sotto i 60rem torna una colonna sola: a quel punto la mappa larga quanto lo schermo e'
   gia' tutto quello che si puo' dare. */
.hub-mappa { display: grid; gap: 1.5rem; margin: 1.5rem 0 2rem; }
@media (min-width: 60rem) {
  .hub-mappa { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
}
.hub-lato { display: flex; flex-direction: column; gap: 1rem; }

/* La scorciatoia alle cucine dedicate: era una riga di testo fra le altre, ed e' la
   risposta piu' importante che questi dati sappiano dare. Il bordo pieno nel verde del
   marchio la distingue dalla ricerca, che e' incolore apposta. */
.hub-dedicata {
  display: block; padding: 1rem 1.1rem; text-decoration: none;
  border: 1px solid var(--marchio); border-radius: var(--raggio);
  background: var(--superficie); color: var(--inchiostro);
}
.hub-dedicata:hover { border-color: var(--marchio-forte); }
.hub-dedicata__etichetta {
  display: block; font-weight: 700; color: var(--marchio-forte); margin-bottom: .2rem;
}
.hub-dedicata__testo { display: block; font-size: .95rem; color: var(--inchiostro-tenue); }
.cerca--lato { margin: 0; }
.cerca--lato input { min-width: 0; flex: 1 1 8rem; }

/* Le citta' con piu' locali, nella colonna accanto alla mappa: dal 2026-10-22 e' questo
   il blocco che sta li', al posto delle province (committente).

   Stesse barre della sezione larga, dentro 21rem invece che dentro 1.184px. L'unica cosa
   che cambia e' la larghezza del nome: a 9rem, nella colonna, alla barra resterebbero
   sei caratteri di spazio e il confronto fra due righe — che e' tutto il motivo per cui
   la barra esiste — non si leggerebbe piu'. */
.barre--lato { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .2rem 1.1rem 1rem; }
.barre--lato h2 { font-size: 1.05rem; margin: .9rem 0 0; }
.barre--lato .barra-riga__nome { flex: 0 0 6.5rem; }
.barre--lato .barra-riga__numero { flex: 0 0 2rem; }

/* La scorciatoia sopra la mappa: una frase con dentro un pulsante, non un pulsante con
   sopra una frase. Si allinea alla base del testo e va a capo intera sul telefono. */
.hub-scorciatoia {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 0 0 1.2rem; font-size: 1.1rem; color: var(--inchiostro-tenue);
}
/* Gli articoli sotto la mappa: separati da una riga, perche' qui cambia il mestiere
   della pagina — sopra si decide dove andare, sotto si legge. */
.hub-articoli { border-top: 1px solid var(--bordo); padding-top: 1.5rem; }

/* Un elenco lungo di nomi corti va in colonne, e si dichiara la LARGHEZZA di una colonna
   invece del numero: cosi' il browser ne mette quante ne entrano davvero — quattro nel
   contenitore largo, una sul telefono — senza una media query per ogni soglia.

   `column-width` riempie verso il basso: l'ordine alfabetico scende lungo la colonna,
   che e' come si legge un elenco. Una griglia lo avrebbe disposto per righe, e la A
   sarebbe finita accanto alla Z. */
.elenco--colonne { columns: 14rem; column-gap: 2.5rem; }
.elenco--colonne li { break-inside: avoid; }

/* La riga «Per chi vende» nel pie'. Un titolo piccolo e in linea con i collegamenti:
   e' un'etichetta di gruppo, non una sezione — e un `<h2>` grosso in fondo alla pagina
   peserebbe piu' del contenuto a cui si riferisce. */
.piede-venditori { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.piede-venditori h2 {
  font-size: .9rem; font-weight: 600; margin: 0; color: var(--inchiostro-tenue);
}
.mappa[hidden] { display: none; }
.mappa a { color: var(--marchio-forte); }

/* Directory */
.badge-riga { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0; }
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--bordo); border-radius: 999px;
  padding: .15rem .7rem; font-size: .85rem; color: var(--inchiostro-tenue);
}
.badge svg { width: .95em; height: .95em; flex: none; }

/* ---- La scala della sicurezza ----------------------------------------------
   Tre stati che si distinguono **prima per forma che per tinta**: pieno, bordato,
   niente. Un uomo su dodici non distingue il verde dall'ambra, e nemmeno una stampa
   in bianco e nero o uno schermo al sole: se la differenza fosse solo il colore,
   l'unica informazione per cui qualcuno apre questa pagina sparirebbe.

   E' la stessa lezione imparata il 2026-10-06 con gli spilli sulla mappa, dove la
   cucina dedicata si distingue per **dimensione e riempimento**, non per colore.

   `--conferma` e `--attenzione` sono colori riservati alla semantica (invariante 11):
   qui sono al loro posto, perche' questa **e'** semantica. */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  LA DOMANDA DA FARSI PRIMA DI AGGIUNGERE UN BADGE NUOVO: CHI LO DICE?    ║
   ║                                                                          ║
   ║    lo dice qualcun altro ..................... BORDATO                   ║
   ║    lo diciamo noi E POSSIAMO PROVARLO ........ PIENO                     ║
   ║                                                                          ║
   ║  Regola del committente, 2026-10-20, scritta qui su sua richiesta        ║
   ║  «cosi' chi arriva dopo non deve ricostruirla».                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   «La regola funziona proprio perche' esistono tutti e due. Se togliessimo anche
   l'ultimo pieno, la distinzione sparirebbe e resterebbe solo una forma per tutto.»

   ⚠️ «E possiamo provarlo» non e' un abbellimento: e' la meta' che tiene. «Verificato
   da noi» su un venditore e' pieno perche' la telefonata la facciamo noi, la prova la
   archiviamo noi e la data la scriviamo noi. Un badge nostro che non sapremmo provare
   e' una promessa, e le promesse su questo sito vanno bordate come tutto il resto.

   Oggi: pieni «Senza glutine» su un alimento (lo scriviamo noi, dalla legge) e
   «Verificato da noi» su un venditore. Bordato «Cucina 100% senza glutine» su un
   locale, che lo dichiara il locale.

   ──────────────────────────────────────────────────────────────────────────────

   ⚠️ DUE CLASSI DOVE PRIMA CE N'ERA UNA, E LE DIVIDE **CHI LO DICE**.
   Fino al 2026-10-20 `badge--dedicato` era una sola, piena di verde, e serviva tre
   cose con provenienze opposte: «Cucina 100% senza glutine» su un locale — che
   dichiara il locale e che nessuno ha controllato — il verdetto di un alimento, e
   «Verificato da noi» su un venditore. Le ultime due sono nostre, la prima no.

   Regola del committente, 2026-10-20: «Nessuna dichiarazione non controllata deve
   vestirsi del colore ufficiale del sito». Quindi il riempimento resta a cio' che
   diciamo noi, e cio' che dichiarano gli altri e' bordato.

   ⚠️ Togliendo il riempimento la scala non perde la distinzione di forma, e il
   motivo va saputo: NON e' il bordo — 2px contro 1,5px non li distingue nessuno — e'
   l'ICONA. Scudo pieno, scudo d'avviso, niente: tre sagome diverse che reggono in
   bianco e nero e per chi non distingue il verde dall'ambra. `ScalaSicurezzaTest`
   adesso conta anche quella nell'impronta, perche' e' li' che vive la garanzia. */
.badge--dichiarato {
  border-color: var(--conferma); border-width: 2px;
  color: var(--conferma); font-weight: 700;
}
.badge--nostro {
  background: var(--conferma); border-color: var(--conferma);
  /* `--su-conferma` e non `--su-marchio`: il testo deve stare sopra QUESTO fondo. */
  color: var(--su-conferma); font-weight: 700;
}
.badge--misto {
  border-color: var(--attenzione); border-width: 1.5px;
  color: var(--attenzione); font-weight: 600;
}
/* `neutro` = non ha una cucina. Resta grigio perche' non c'e' niente da segnalare:
   dipingerlo d'ambra direbbe «attenzione» di un supermercato, dove di contaminazione
   in cucina non si puo' parlare perche' una cucina non c'e'. */
.badge--neutro { }

.badge--forte { border-color: var(--conferma); color: var(--conferma); font-weight: 600; }
.badge--debole { border-style: dashed; }

/* ⚠️ Il segno «prodotto di prova» sulla card della vetrina (2026-10-25).
   `--attenzione` e non `--pericolo`: il prodotto non fa male, semplicemente non
   esiste. Il rosso qui sopra e' riservato a cio' che puo' danneggiare qualcuno, e
   consumarlo su un avviso di servizio lo rende piu' debole il giorno che serve. */
.badge--avviso {
  border-color: var(--attenzione);
  color: var(--attenzione);
  font-weight: 600;
}
.comuni, .province, .attivita-elenco { list-style: none; padding: 0; }
.comuni li, .province li { padding: .35rem 0; border-bottom: 1px solid var(--bordo); }
.attivita-elenco li { padding: 1rem 0; border-bottom: 1px solid var(--bordo); }
.briciole { font-size: .9rem; color: var(--inchiostro-tenue); margin-bottom: 1rem; }
.cerca { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: 1.5rem 0; }
.cerca label { display: block; width: 100%; font-size: .9rem; }
.cerca input { padding: .5rem .7rem; border: 1px solid var(--bordo-campo); border-radius: var(--raggio);
  background: var(--sfondo); color: var(--inchiostro); min-width: 16rem; }
.cerca button { padding: .55rem 1.1rem; border: 0; border-radius: var(--raggio);
  background: var(--marchio); color: var(--su-marchio); font-weight: 600; cursor: pointer; }
/* `max-width` come `.intro--larga`, e per la stessa ragione: un avviso e' prosa, e
   dentro `main.largo` arriverebbe a 1.184px. Sulle pagine strette non cambia niente,
   perche' la misura di lettura e' gia' sotto i 52rem. */
.avviso { border-left: 3px solid var(--attenzione); padding-left: 1rem; color: var(--inchiostro-tenue); max-width: 52rem; }
/* ⚠️ L'avviso che non si puo' non leggere: lo porta la scheda di un prodotto di
   PROVA, e su un sito dove qualcuno decide se mangiare leggendo una scheda, un
   avvertimento in grigio tenue non e' un avvertimento. Fondo pieno, inchiostro
   normale, e il colore dell'attenzione — che su questo sito e' riservato, e qui e'
   usato per cio' per cui esiste. */
.avviso--forte {
  background: var(--grano); border-left-width: 5px; color: var(--inchiostro);
  padding: .9rem 1.1rem; border-radius: 0 var(--raggio) var(--raggio) 0;
}
.dati dt { font-weight: 600; margin-top: .6rem; }
.dati dd { margin: 0; }
.fonte { font-size: .85rem; color: var(--inchiostro-tenue); margin-top: 2rem; }

/* ─── Le sezioni della home (2026-10-05) ─────────────────────────────────────────────
   Sei sezioni chieste dal committente: negozio, ricette, guide, locali, venditori,
   contatti. Titoli e testi centrati.

   ⚠️ Per i pulsanti e' stato chiesto un verde preciso, scritto come codice esadecimale.
   Qui **non si scrive un colore letterale** (invariante 11 → FE4): si usa `--marchio`.
   Non e' pignoleria, ed e' il caso che spiega la regola meglio di qualunque esempio.

   Il verde chiesto e' pensato su fondo bianco. Questo sito ha anche un tema scuro, e
   li' un verde medio su fondo quasi nero scende sotto la soglia di contrasto leggibile:
   un valore fisso sarebbe giusto in una pagina su due. I token hanno due valori apposta
   e cambiano insieme.

   Se il verde del sito deve diventare quell'altro, si cambia in `token.css` e cambia
   **ovunque**, chiaro e scuro: e' una riga. Ma e' una decisione sul marchio, non sul
   pulsante di una sezione — e il codice esatto sta nel commit che ha introdotto questo
   blocco, non qui, perche' qui lo troverebbe il controllo e avrebbe ragione lui. */
.sezione--centrata { text-align: center; }
/* La prosa resta leggibile anche centrata: oltre la misura, l'occhio perde il capo riga
   — e centrata lo perde prima, perche' nemmeno il margine sinistro lo aiuta. */
.sezione--centrata > .intro { max-width: var(--misura); margin-left: auto; margin-right: auto; }
/* Dentro le schede si torna allineati a sinistra: un titolo di tre righe centrato in una
   scheda stretta e' piu' difficile da leggere, e la data sotto balla. */
.sezione--centrata .scheda__corpo { text-align: left; }
.sezione--invito { padding: 2rem 0; border-top: 1px solid var(--bordo); }

/* ## I tre inviti in fondo alla home, in fila

   Impilati, i tre blocchi finali — locali, venditori, contatti — sono tre schermate di
   scorrimento per dire tre cose brevi. Affiancati entrano in una, e restano paralleli:
   ognuno ha un titolo, una frase e una cosa da fare.

   I due passi sono quelli che il sito usa gia' altrove (`.motivi`, `.vd-passi`): due
   colonne a 40rem, tre a 60rem. Non un punto di rottura nuovo scelto a occhio.

   A due colonne il modulo di contatto prende tutta la riga sotto: e' l'unico dei tre che
   chiede di scrivere, e in mezza colonna stretta i campi e gli errori di validazione si
   accavallano. A tre colonne lo spazio c'e'. */
.trittico > .sezione { margin-top: 3rem; }

@media (min-width: 40rem) {
  .trittico {
    display: grid; gap: 1rem 2.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .trittico > .sezione { margin-top: 0; }
  /* Il modulo sotto, per tutta la larghezza: vedi sopra. */
  .trittico > .sezione:last-child { grid-column: 1 / -1; }
}

@media (min-width: 60rem) {
  .trittico { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trittico > .sezione:last-child { grid-column: auto; }
}

/* In fila il bordo superiore va sul gruppo, non su ogni blocco: tre segmenti separati
   dalle colonne sembrerebbero una linea rotta, non un confine di sezione. */
@media (min-width: 40rem) {
  .trittico { border-top: 1px solid var(--bordo); padding-top: 2rem; }
  .trittico .sezione--invito { border-top: 0; padding-top: 0; }
  /* Dentro una colonna la cartina e il modulo riempiono lo spazio che hanno: i loro
     tetti (28rem e 24rem) servono a non farli dilagare a tutta pagina, e qui la colonna
     quel compito lo fa gia'. */
  .trittico .anteprima-mappa,
  .trittico .modulo { max-width: none; }
}

.azione { margin: 1.5rem 0 0; }
.bottone {
  display: inline-block; padding: .7rem 1.6rem; border-radius: var(--raggio);
  background: var(--marchio); color: var(--su-marchio);
  font-weight: 600; text-decoration: none;
}
/* `:focus-visible` oltre a `:hover`: chi naviga con la tastiera deve vedere dov'e'.
   L'outline e' staccato dal bordo, se no su fondo verde sparisce dentro il pulsante. */
.bottone:hover { background: var(--marchio-forte); }
.bottone:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 2px; }

/* Le schede «in arrivo»: tratteggiate, cosi' chi guarda e non legge vede subito che non
   sono merce. Niente immagine, niente prezzo, niente link. */
.scheda--attesa { border-style: dashed; background: var(--superficie); }
.scheda--attesa .scheda__corpo {
  text-align: center; display: flex; flex-direction: column; align-items: center;
  gap: .6rem; padding: 2rem 1rem;
}
.attesa-testo { margin: 0; color: var(--inchiostro-tenue); font-weight: 600; }
.cuore { color: var(--marchio); }

/* Il modulo di contatto. Centrato nella pagina ma con le etichette a sinistra: un
   modulo con le etichette centrate si legge male, perche' l'occhio non trova il punto
   da cui ripartire a ogni campo. */
.modulo--contatti { margin: 1.5rem auto 0; text-align: left; }
.modulo--contatti .scelta { justify-content: flex-start; }
.modulo--contatti .azione { text-align: center; }
.modulo abbr[title] { text-decoration: none; color: var(--pericolo); }

/* Il campo trappola: fuori dallo schermo, non `display:none`.
   Un robot che legge l'HTML salta cio' che e' `hidden` o `display:none` — e' il primo
   controllo che fa. Fuori dal flusso visivo ma presente, invece, lo compila. E chi usa
   uno screen reader non ci arriva comunque: `aria-hidden` e `tabindex="-1"` nel markup. */
.trappola {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* ─── La posta del modulo di contatto (2026-10-05) ───────────────────────────────────
   Una scheda per richiesta. Larga quanto la lettura e non quanto la pagina: il
   messaggio e' prosa, e oltre la misura l'occhio perde il capo riga. */
.richieste { list-style: none; padding: 0; max-width: var(--misura); }
.richiesta { border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1rem 1.2rem; margin-bottom: 1.2rem; background: var(--superficie); }
.richiesta h2, .richiesta h3 { margin-top: 0; }
/* Due code sulla stessa pagina (2026-10-17): i reclami dei locali e i contatti. Una
   riga sopra il secondo titolo basta a dire che si cambia argomento — senza, le due
   liste sembrano una sola e il confine cade dove capita. */
.coda + .coda { margin-top: 2.5rem; border-top: 1px solid var(--bordo);
  padding-top: 1.5rem; }
/* Un reclamo su un locale gia' collegato resta in elenco e deve restarci — puo' essere
   il titolare vero che contesta il primo — ma non e' quello da lavorare oggi. Si
   smorza, non si nasconde: nessuna informazione sparisce, cambia solo il peso. */
.richiesta--chiusa { opacity: 0.72; background: transparent; }
/* I due bottoni di un reclamo stanno sulla stessa riga ma non si somigliano: uno
   collega, l'altro butta via. Affiancati e distinti e' piu' onesto che impilati e
   uguali — chi clicca di fretta deve vedere che sono due cose diverse. */
.azioni-riga { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.dati-contatto { font-weight: 600; }
.messaggio { white-space: normal; }
.messaggio.vuoto { color: var(--inchiostro-tenue); font-style: italic; }
/* Il bottone che cancella non e' verde come gli altri: il colore semantico e' riservato
   (invariante 11 → FE4), e questo e' esattamente il caso per cui lo si riserva. */
.richiesta button.pericolo { background: var(--pericolo); color: var(--su-marchio); }

/* Sul telefono le schede «in arrivo» diventano un muro.
   In griglia stanno su due righe e si leggono in un colpo d'occhio; a una colonna sono
   cinque scatole identiche in fila, **689 px misurati a 375 di larghezza** — quasi uno
   schermo intero di niente, prima di arrivare a qualcosa di vero. Due dicono la stessa
   cosa: «il negozio apre». Non si toglie informazione, perche' non ce n'era. */
@media (max-width: 40rem) {
  .scheda--attesa:nth-child(n+3) { display: none; }
}

/* Il numero di richieste che aspettano, accanto alla voce «Richieste» del menu riservato.
   Non e' un colore semantico (quelli sono riservati): e' il verde del marchio, perche'
   dice «c'e' qualcosa», non «c'e' un problema». */
.conteggio {
  display: inline-block; min-width: 1.4em; padding: 0 .4em; margin-left: .35em;
  border-radius: 999px; background: var(--marchio); color: var(--su-marchio);
  font-size: .8rem; font-weight: 700; text-align: center; line-height: 1.5;
}

/* Il bottone dei preferiti. Nasce nascosto e lo accende il JavaScript: senza, non c'e'.
   Non usa il verde del marchio — quello e' dei pulsanti che portano da qualche parte —
   ma il bordo, perche' questo commuta uno stato e non naviga. */
.azione-preferito { margin: .4rem 0 1rem; }
.preferito {
  padding: .45rem 1rem; border: 1px solid var(--bordo); border-radius: 999px;
  background: var(--sfondo); color: var(--inchiostro); font: inherit; cursor: pointer;
}
.preferito:hover { border-color: var(--marchio); }
/* Lo stato premuto si vede **anche senza colore**: il bordo diventa spesso. Chi non
   distingue il verde deve capire lo stesso se ha salvato o no. */
.preferito[aria-pressed="true"] {
  border: 2px solid var(--marchio); color: var(--marchio-forte); font-weight: 600;
  padding: calc(.45rem - 1px) calc(1rem - 1px);
}

/* «Togli» accanto a una voce dei preferiti: un bottone, non un link, perche' non porta
   da nessuna parte. Discreto ma raggiungibile: il focus lo rende evidente come gli altri. */
.togli {
  border: 0; background: none; padding: .1rem .4rem; font: inherit; font-size: .85rem;
  color: var(--inchiostro-tenue); text-decoration: underline; cursor: pointer;
}
.togli:hover { color: var(--pericolo); }

/* I punti dei locali sulla mappa di un comune. La differenza fra cucina dedicata e
   cucina mista sta **anche** nella dimensione e nello spessore del bordo, non solo nel
   colore: e' un'informazione di sicurezza, e una differenza affidata al colore non
   esiste per chi non lo distingue.

   `--conferma` e' il colore semantico che il badge usa gia' per la stessa cosa: qui non
   si inventa una convenzione nuova, si ripete quella che c'e'. */
/* ⚠️ `--marchio` e `--conferma` in questo tema sono **lo stesso verde**: affidare la
   differenza al colore non l'avrebbe resa visibile nemmeno a chi i colori li vede. Sta
   tutta nella forma — **pieno contro vuoto**, grande contro piccolo — che funziona
   anche in bianco e nero.

   E il punto «mista» resta ben visibile: al primo tentativo l'avevo messo al 35% di
   opacita' e sulla cartina chiara spariva. Erano 18 locali su 18 a Bologna: avevo
   peggiorato il caso normale per evidenziare quello raro. */
.punto-locale { fill: var(--mappa-punto-bordo); fill-opacity: .9; stroke: var(--mappa-punto); }
.punto-locale--dedicato {
  fill: var(--mappa-punto); fill-opacity: 1; stroke: var(--mappa-punto-bordo);
}
/* L'alone del locale di cui parla la pagina: un cerchio tratteggiato dietro lo spillo,
   non una forma diversa. La forma dice gia' se la cucina e' dedicata, e due
   informazioni sullo stesso segnale se ne fanno leggere una sola.

   Sono DUE cerchi sovrapposti. Quello chiaro sotto e' la fascia che rende leggibile il
   tratteggio: da solo, un verde sottile sopra le piastrelle di OpenStreetMap — che di
   verde, di grigio e di righine sono piene — non si vede. E' lo stesso espediente che
   gia' tiene a galla gli spilli qui sopra. */
.punto-questo-sotto { fill: none; stroke: var(--mappa-punto-bordo); stroke-opacity: .85; }
.punto-questo { fill: none; stroke: var(--mappa-punto); stroke-dasharray: 3 3; }

/* La legenda: una differenza che nessuno sa leggere e' decorazione. */
.legenda-mappa { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .9rem;
  color: var(--inchiostro-tenue); margin: .4rem 0 1rem; }
.legenda-mappa span { display: inline-flex; align-items: center; gap: .4rem; }
/* La legenda ripete i simboli della mappa, quindi usa gli stessi colori fissi: se
   seguisse il tema, spiegherebbe dei punti diversi da quelli disegnati. */
.legenda-mappa i { width: .9rem; height: .9rem; border-radius: 50%;
  background: var(--mappa-punto-bordo); border: 2px solid var(--mappa-punto); }
.legenda-mappa .dedicata i { width: 1.2rem; height: 1.2rem;
  background: var(--mappa-punto); border: 3px solid var(--mappa-punto-bordo); }
/* L'alone, spiegato con lo stesso tratteggio che si vede sulla cartina. */
.legenda-mappa .questo i { background: none; border: 2px dashed var(--mappa-punto); }

/* Le schede «in arrivo» stanno su UNA riga, a qualunque larghezza.

   La griglia automatica ne metteva quattro e ne lasciava una orfana a capo — e a 900 px
   tre piu' due. Una fila spezzata fa sembrare che manchi qualcosa, proprio nel punto in
   cui si vuole dire «sta arrivando».

   Quante ne entrano dipende dallo spazio, quindi cambia il NUMERO MOSTRATO invece di
   stringere le schede: quattro in larghezza, tre a meta' strada, due sul telefono. Sono
   segnaposto, non merce: due dicono la stessa cosa di quattro.

   Quattro e non cinque perche' quante ne esistono lo decide `PER_SEZIONE`, che il
   committente ha portato a 4. Le due cose devono concordare: una colonna in piu' delle
   schede che ci sono lascia un buco a destra, e un buco in una riga di segnaposto
   sembra una scheda che non ha caricato. */
@media (min-width: 60rem) {
  .schede--attesa { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .schede--attesa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scheda--attesa:nth-child(n+4) { display: none; }
}

/* ============================================================================
   LA NAVIGAZIONE SUL TELEFONO
   ============================================================================

   Due barre al posto di una: in alto cosa si fa, in basso dove si va. Il perche'
   sta in `layout/_barra-mobile.blade.php` e in `Navigazione::schede()`.

   Sopra i 60rem esiste solo l'intestazione a tre colonne; sotto, solo queste due.
   Mai tutte e due insieme: `display: none` toglie anche dall'albero di
   accessibilita', quindi chi legge con la voce sente una navigazione sola. */
.telefono-capo, .telefono-schede { display: none; }

@media (max-width: 59.99rem) {
  .capo, .capo-riservate { display: none; }
  .telefono-capo { display: flex; align-items: center; gap: .25rem; padding: 0 .5rem;
    height: 3.5rem; border-bottom: 1px solid var(--bordo); background: var(--sfondo); }

  /* Il marchio tiene il centro: le due azioni ai lati sono larghe uguale. */
  /* Il marchio e' un collegamento alla home: deve essere alto quanto gli altri
     bersagli, non quanto la sua immagine. Misurato: l'immagine da 1,6rem lasciava un
     bersaglio di 26px contro i 44 degli altri due. */
  .telefono-marchio {
    flex: 1 1 auto; min-width: 0; min-height: 2.75rem;
    display: flex; align-items: center; justify-content: center;
  }
  .telefono-marchio img { width: auto; height: 1.6rem; }

  /* 2,75rem = 44px: la misura sotto la quale un dito sbaglia bersaglio. */
  .telefono-azione, .telefono-menu > summary {
    flex: none; width: 2.75rem; height: 2.75rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--inchiostro); cursor: pointer;
  }
  .telefono-azione svg, .telefono-menu > summary svg { width: 1.35rem; height: 1.35rem; }

  /* `<details>` invece di un menu in JavaScript: si apre col dito, con la tastiera e
     con lo screen reader. Il triangolino di sistema va tolto in due modi — i browser
     non sono d'accordo su quale dei due ascoltare. */
  .telefono-menu { position: relative; }
  .telefono-menu > summary { list-style: none; border-radius: 999px; }
  .telefono-menu > summary::-webkit-details-marker { display: none; }
  .telefono-menu[open] > summary { background: var(--superficie); }
  .telefono-menu__pannello {
    position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0;
    min-width: 13rem; padding: .35rem 0;
    /* Due pixel di bordo e nessun'ombra. L'ombra l'avevo scritta con un nero
       letterale e l'ha bocciata `test_nessun_colore_letterale_fuori_dai_token`
       (invariante 11), che e' il suo mestiere: per averla servirebbe un token nuovo
       in tutti e tre gli stati del tema, e questo sito il rilievo lo fa col bordo
       dappertutto. Sopra la mappa serve pero' che si stacchi, da qui il doppio
       spessore invece del solito uno. */
    border: 2px solid var(--bordo); border-radius: var(--raggio);
    background: var(--sfondo);
  }
  .telefono-menu__pannello ul { list-style: none; margin: 0; padding: 0; }
  .telefono-menu__pannello a {
    display: flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem;
    text-decoration: none; color: var(--inchiostro); font-weight: 600;
  }
  .telefono-menu__pannello a[aria-current] { color: var(--marchio-forte); }

  /* La barra in basso e' fissa: le cinque destinazioni restano sotto il pollice
     mentre si scorre una pagina di mille locali. */
  .telefono-schede {
    display: block; position: fixed; z-index: 30; inset: auto 0 0 0;
    border-top: 1px solid var(--bordo); background: var(--sfondo);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .telefono-schede ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  }
  .telefono-schede a {
    min-height: 3.5rem; padding: .35rem .15rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; text-decoration: none; color: var(--inchiostro-tenue);
    border-top: 3px solid transparent; margin-top: -1px;
  }
  .telefono-schede svg { width: 1.35rem; height: 1.35rem; }
  .telefono-schede span { font-size: .68rem; font-weight: 600; line-height: 1; }

  /* La scheda corrente si distingue per COLORE, PESO e una barra in alto: il colore da
     solo non lo vede una persona su dodici, e qui non c'e' nemmeno un testo
     sottolineato a cui appoggiarsi. */
  .telefono-schede a[aria-current] {
    color: var(--marchio-forte); border-top-color: var(--marchio);
  }
  .telefono-schede a[aria-current] span { font-weight: 700; }

  /* Lo spazio sotto il contenuto, o la barra fissa copre le ultime righe della pagina
     e il pie'. 3.5rem di barra piu' il bordo, piu' l'incavo dell'iPhone. */
  body { padding-bottom: calc(3.5rem + 1px + env(safe-area-inset-bottom)); }
}

/* ---- /venditori/ ------------------------------------------------------------
   Due componenti nuovi, e lo sono davvero: in questo foglio non c'era ne' una
   griglia di argomenti con icona ne' un elenco di nomi con un contatore. I
   pulsanti invece sono quelli che ci sono gia' (`.bottone`), e le icone vengono
   dal set del sito, `layout/_icona.blade.php`. */

/* Tre colonne, due, una — numeri fissi e non `auto-fit`. Sei card si dividono per
   tre, per due e per uno senza mai lasciare una cella vuota in fondo; con
   `auto-fit` il contenitore largo ne metterebbe quattro e l'ultima riga avrebbe
   due buchi, che in una griglia di argomenti sembrano card non caricate. */
.motivi { list-style: none; margin: 1.2rem 0 1.5rem; padding: 0;
  display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .motivi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .motivi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Due per riga anche sul largo: serve dove le card sono QUATTRO, su `/preferiti/`.
   Con la griglia a tre, la quarta andrebbe a capo da sola e una card sola sull'ultima
   riga sembra un errore di impaginazione piu' che una scelta. Un modificatore e non una
   regola nuova: `.motivi` lo usano anche `/venditori/` e la pagina del venditore, dove
   le card sono sei e tre colonne vanno bene. */
@media (min-width: 60rem) {
  .motivi--due-per-riga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.motivo { border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--superficie); padding: 1.2rem 1.3rem; }
.motivo h3 { margin: .7rem 0 .3rem; font-size: 1.1rem; }
.motivo p { margin: 0; color: var(--inchiostro-tenue); }
/* L'icona nel verde del marchio. Non e' decorazione colorata a caso: e' l'unico
   colore della card, e dice dove comincia a leggere l'occhio. */
.motivo__icona { display: block; color: var(--marchio); }
.motivo__icona svg { width: 1.75rem; height: 1.75rem; }

/* L'elenco dei venditori: nomi e un contatore, senza collegamento — una pagina
   profilo del venditore non esiste ancora. */
.venditori { list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; gap: .1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 45rem) { .venditori { grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem; } }
.venditori li { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .3rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--bordo); }
.venditori__nome { font-weight: 600; }

/* ---- /diventa-venditore/: la landing dei venditori -------------------------
   Riusa `.bottone`, `.modulo`, `.sezione`, `.intro--larga` e il set di icone. Qui
   sotto c'e' solo cio' che non esisteva: i tre punti dell'apertura, la griglia dei
   quattro gruppi, le quattro voci di costo, i passi numerati e la fascia d'urgenza. */

.vd-apertura { margin-top: 1.5rem; }
/* I tre punti: in riga dove c'e' spazio, in colonna sul telefono. `flex-wrap` e non
   una media query — vanno a capo quando servono, non a una soglia decisa a tavolino. */
.punti-spunta { list-style: none; margin: 1.2rem 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
.punti-spunta li { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.punti-spunta svg { width: 1.1rem; height: 1.1rem; color: var(--marchio); flex: none; }
/* In colonna, sempre. Dentro meta' schermo il `flex-wrap` qui sopra ne mette due su una
   riga e una sotto: un 2+1 che sembra un incidente invece di un elenco. Lo usa
   `/accedi/`, dove i punti stanno accanto a un modulo e non sotto un titolo largo. */
.punti-spunta--colonna { flex-direction: column; gap: .5rem; }
.punti-spunta--colonna li { align-items: flex-start; }
.punti-spunta--colonna svg { margin-top: .2rem; }
.vd-cta { margin: 1.5rem 0 .4rem; }

/* Quattro gruppi, due colonne. Quattro si divide per due e per uno senza lasciare
   celle vuote; per tre no — ed e' il motivo per cui qui le colonne sono due e nelle
   sei card di /venditori/ erano tre. */
.vd-gruppi { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr);
  margin: 1.2rem 0 0; }
@media (min-width: 48rem) { .vd-gruppi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vd-gruppo { border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--superficie); padding: 1.2rem 1.3rem; }
.vd-gruppo h3 { margin: .6rem 0 .5rem; font-size: 1.15rem; }
.vd-gruppo ul { margin: 0; padding-left: 1.1rem; }
.vd-gruppo li { margin-bottom: .5rem; color: var(--inchiostro-tenue); }
.vd-gruppo li strong { color: var(--inchiostro); }
.vd-gruppo li:last-child { margin-bottom: 0; }
.vd-gruppo__icona { display: block; color: var(--marchio); }
.vd-gruppo__icona svg { width: 1.75rem; height: 1.75rem; }

/* I costi: coppie voce-valore, non una tabella da confrontare per righe. */
.vd-costi { display: grid; grid-template-columns: auto 1fr; gap: .1rem 1.5rem;
  margin: 1.2rem 0 0; max-width: 34rem; }
.vd-costi dt { font-weight: 600; padding: .55rem 0; border-bottom: 1px solid var(--bordo); }
.vd-costi dd { margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--bordo);
  color: var(--inchiostro-tenue); }
.vd-costi dt:last-of-type, .vd-costi dd:last-of-type { border-bottom: 0; }

/* I passi: quattro blocchi impilati, affiancati dove c'e' spazio.

   ⚠️ Il numero e' un `<span>` nel markup e **non** un `::before` con `counter`.
   Scritto col contatore, il `<li>` doveva essere una griglia a due colonne — e dentro
   una griglia il testo non avvolto da un tag diventa una cella sua, che finiva nella
   colonna larga quanto il numero: una parola per riga. Il contatore costava un bug che
   si vedeva solo guardando la pagina. Qui i numeri sono quattro e scritti: se un
   giorno diventano sei, si scrivono sei.

   Quattro colonne, due, una: quattro si divide per tutte e tre senza lasciare celle
   vuote. `minmax(12rem, 1fr)` perche' nessuna colonna deve stringersi sotto la
   larghezza di una frase — era esattamente il guasto di prima. */
.vd-passi { list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 1.5rem; grid-template-columns: minmax(12rem, 1fr); }
@media (min-width: 40rem) { .vd-passi { grid-template-columns: repeat(2, minmax(12rem, 1fr)); } }
@media (min-width: 62rem) { .vd-passi { grid-template-columns: repeat(4, minmax(12rem, 1fr)); } }
.vd-passi li { display: block; }
.vd-passi p { margin: .3rem 0 0; color: var(--inchiostro-tenue); }
.vd-passo__numero { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1;
  color: var(--marchio); font-variant-numeric: tabular-nums; margin-bottom: .4rem; }

/* La fascia d'urgenza, nel colore caldo dei token. Niente animazioni: una pagina che
   si muove da sola per creare fretta e' una cosa che si fa a chi legge, non per lui. */
/* La fascia d'accento: la usano la sezione d'urgenza di `/diventa-venditore/` e il
   riquadro «In arrivo» di `/preferiti/`. Una regola per due, perche' e' lo stesso
   componente: due copie divergono, e poi una delle due pagine stona senza che nessuno
   sappia quale sia quella giusta. */
.fascia-accento, .vd-urgenza { background: var(--grano); border-radius: var(--raggio);
  padding: 1.6rem 1.8rem; margin-top: 2.5rem; }
.fascia-accento h2, .vd-urgenza h2 { margin-top: 0; }
.fascia-accento p, .vd-urgenza p { margin-bottom: 0; max-width: var(--misura); }
.fascia-accento p + p { margin-top: .9rem; }

/* La card intera cliccabile: una fermata di tabulazione invece di tre. `color: inherit`
   e nessuna sottolineatura perche' il bersaglio e' il riquadro, non la parola. */
.motivo--via { display: block; color: inherit; text-decoration: none; height: 100%; }
.motivo--via:hover { border-color: var(--marchio); }
.motivo--via:focus-visible { outline: 3px solid var(--marchio); outline-offset: 2px; }

.vd-faq h3 { margin: 1.4rem 0 .2rem; font-size: 1.1rem; }
.vd-faq p { margin: 0; color: var(--inchiostro-tenue); max-width: var(--misura); }

.vd-modulo { max-width: 34rem; }
.vd-modulo select { padding: .5rem .7rem; border: 1px solid var(--bordo-campo);
  border-radius: var(--raggio); background: var(--sfondo); color: var(--inchiostro);
  font: inherit; width: 100%; }
/* Il pulsante spento si vede che e' spento, e resta leggibile: un grigio su grigio
   sotto il 4.5:1 lo renderebbe invisibile proprio a chi fatica gia' a leggere. */
.modulo button[disabled] { background: var(--superficie); color: var(--inchiostro-tenue);
  border: 1px solid var(--bordo); cursor: not-allowed; }
.vd-presto { font-weight: 600; color: var(--attenzione); }


/* ---- .landing: il testo centrato di /diventa-venditore/ --------------------
   Vale su **questa pagina sola**, per decisione del committente: e' una pagina
   pubblicitaria, non un articolo. Gli stili globali restano quelli — gli stessi
   componenti (`.bottone`, `.modulo`, `.sezione`, `.intro--larga`, `.scelta`) sono
   usati da /contatti/ e /venditori/, che non devono cambiare. */
.landing { text-align: center; }
/* I paragrafi restano dentro una misura di lettura, centrata: una riga centrata
   lunga 1.184px e' illeggibile anche se e' centrata bene. */
.landing p, .landing dl, .landing ol, .landing ul { margin-inline: auto; }
.landing p { max-width: 65ch; }
.landing .punti-spunta { justify-content: center; }

/* Le due eccezioni dichiarate: un elenco puntato centrato perde la colonna dei punti,
   e un modulo con le etichette centrate costringe l'occhio a ricominciare da capo a
   ogni campo. Il blocco resta centrato nella pagina, il contenuto no. */
.landing .vd-gruppo ul { text-align: left; }
.landing .vd-modulo { text-align: left; }

/* I costi: il blocco centrato, voce a sinistra e valore a destra — restano due colonne
   leggibili. Sotto i 30rem diventa un elenco verticale e allora si centrano tutte e
   due, perche' a quella larghezza «Pacchetti per crescere» e «facoltativi, in arrivo»
   su una riga sola si toccherebbero. */
.landing .vd-costi { text-align: left; justify-content: center; }
.landing .vd-costi dd { text-align: right; }
@media (max-width: 30rem) {
  .landing .vd-costi { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .landing .vd-costi dd { text-align: center; border-bottom: 1px solid var(--bordo); }
  .landing .vd-costi dt { border-bottom: 0; padding-bottom: 0; }
}

/* ---------------------------------------------------------------- /accedi/

   Due colonne affiancate da 48rem in su, una sotto l'altra sotto. La soglia e' la
   stessa dei gruppi di `/diventa-venditore/`: sotto, due moduli affiancati diventano
   due colonne di campi larghe meta' schermo, che si compilano male.

   `align-items: start` perche' le due colonne hanno altezze diverse — a destra c'e'
   un campo in piu' e l'elenco dei vantaggi — e senza, la piu' corta si stira e il suo
   bordo arriva dove non finisce niente. */
.accedi-colonne { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr);
  align-items: start; }
@media (min-width: 48rem) {
  .accedi-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}
/* «Password dimenticata?» sta sotto il campo, non accanto all'etichetta: accanto
   all'etichetta sarebbe la seconda cosa che si legge di una riga che ne chiede una
   sola. `display: block` perche' dentro un `<p>` di modulo e' in mezzo a input e span. */
.accedi-dimenticata { display: block; margin-top: .35rem; }

/* Il pulsante secondario: stesso ingombro e stessa forma di `.bottone`, ma di contorno.
   Serve dove in pagina c'e' gia' un'azione primaria e la seconda non deve competerci —
   su `/accedi/`, «Scopri come vendere» accanto a «Accedi» e «Crea il tuo account».
   Il colore del testo e' quello del marchio e non l'inchiostro: su fondo trasparente
   un contorno verde con dentro testo nero sembra un campo, non un pulsante. */
.bottone--contorno { background: transparent; color: var(--marchio);
  box-shadow: inset 0 0 0 2px var(--marchio); }
/* Al passaggio si riempie della superficie, non di un verde chiaro: un token per «verde
   tenue» non esiste, e inventarlo per un hover vorrebbe dire aggiungere un colore alla
   tavolozza del sito per un caso solo (invariante 11). `--superficie` e' il fondo delle
   schede, quindi lo stacco c'e' in tutti e due i temi senza niente di nuovo. */
.bottone--contorno:hover { background: var(--superficie); color: var(--marchio-forte);
  box-shadow: inset 0 0 0 2px var(--marchio-forte); }

/* «Contiene glutine»: l'unico badge del sito che dice un divieto, e l'unico che usa il
   colore del pericolo. La scala resta quella dei locali — dedicato, misto, neutro — con
   questo stato in piu', che li' non serve: un locale «contiene glutine» non si
   pubblica, un alimento si', ed e' anzi la meta' del motivo per cui l'elenco esiste.
   Il colore non e' l'unico segnale: la parola lo dice per intero (invariante 11). */
.badge--pericolo { border-color: var(--pericolo); color: var(--pericolo); font-weight: 600; }

/* La tabella dei valori nutrizionali: due colonne, la voce e il numero. Allineata a
   sinistra perche' non si fanno somme in colonna — si cerca una riga. */
.nutrienti { border-collapse: collapse; margin: .6rem 0; }
.nutrienti th, .nutrienti td { text-align: left; padding: .3rem 1.4rem .3rem 0;
  border-bottom: 1px solid var(--bordo); font-weight: 400; }
.nutrienti th { color: var(--inchiostro-tenue); }

/* ===================================================================== la stampa
 *
 * Non c'era, e su un sito di ricette la stampa non e' un caso di scuola: qualcuno
 * stampa la pagina e la porta in cucina, dove il telefono si sporca e lo schermo si
 * spegne da solo.
 *
 * I **colori** della carta stanno in `token.css`, che e' il file che li definisce:
 * li' c'e' anche il difetto peggiore che questo blocco corregge, cioe' il testo
 * chiaro del tema scuro stampato su carta bianca.
 */
@media print {
  /* Il contorno non si stampa: intestazione, barra del telefono, piede, il salto al
     contenuto, la ricerca e la mappa. Sono comandi, e su carta un comando e'
     inchiostro speso per una cosa che non si puo' premere. La mappa in piu' sarebbe
     un riquadro vuoto: le piastrelle arrivano dalla rete. */
  .salta, .capo, .telefono-capo, .piede, .ricerca-veloce, .mappa, .legenda-mappa,
  .azione-preferito { display: none !important; }

  body { background: var(--sfondo); color: var(--inchiostro); }
  main { max-width: none; margin: 0; padding: 0; }

  /* Niente ombre e niente fondi: su alcune stampanti un fondo diventa una campitura
     grigia che mangia il testo. */
  * { box-shadow: none !important; }
  .motivo, .scheda, .fascia-accento, .vd-urgenza, .esito { background: var(--sfondo); }

  /* Un titolo non resta da solo in fondo al foglio, e un elenco di ingredienti non si
     spezza fra due pagine: e' il motivo per cui si stampa una ricetta. */
  h1, h2, h3 { break-after: avoid-page; }
  .ingredienti, .passaggi li, .scheda { break-inside: avoid-page; }

  /* Le immagini si stampano piccole: identificano la ricetta senza prendersi mezza
     pagina di inchiostro. */
  img { max-width: 8cm; height: auto; }

  /* Dove si e' preso il foglio. Su carta un indirizzo non si clicca, ma si ricopia —
     e una ricetta stampata gira di mano in mano. */
  .solo-stampa { display: block !important; margin-top: 1.5rem; padding-top: .6rem;
    border-top: 1px solid var(--bordo); font-size: .85rem;
    color: var(--inchiostro-tenue); }
}

/* Sullo schermo non esiste: e' la riga che compare solo sul foglio. */
.solo-stampa { display: none; }

/* ---- L'evidenza di cosa e' cambiato, nella coda di revisione ----------------
   Un prodotto che era in vetrina e che il produttore ha riscritto. Chi revisiona
   deve poter confrontare senza cercare: il valore approvato e quello di adesso
   uno sotto l'altro, con il secondo in evidenza perche' e' quello su cui sta
   decidendo. Niente colore per distinguerli — si distinguono per peso e per
   etichetta, che si leggono anche in grigio e ad alta voce. */
.modifiche {
  margin: .6rem 0; padding: .6rem .8rem;
  border-left: 3px solid var(--pericolo);
  background: var(--superficie); border-radius: var(--raggio);
}
.modifiche-intro { margin: 0 0 .5rem; font-size: .9rem; color: var(--inchiostro-tenue); }
.modifiche-elenco { margin: 0; font-size: .9rem; }
.modifiche-elenco dt {
  font-weight: 600; margin-top: .45rem; color: var(--inchiostro);
}
.modifiche-elenco dt:first-child { margin-top: 0; }
.modifiche-elenco dd { margin: .1rem 0 0; }
.modifica-prima, .modifica-dopo { display: block; }
.modifica-prima { color: var(--inchiostro-tenue); text-decoration: line-through; }
.modifica-dopo { color: var(--inchiostro); font-weight: 500; }

/* ---- L'anteprima statica della mappa, in home ------------------------------
   Un disegno, non una mappa: una sagoma dell'Italia e un punto per comune, tutto
   dentro l'HTML. Nessuna richiesta a nessuno.

   ## Le misure, e perche' non sono l'80% che sembra

   Il committente ha chiesto «larghezza massima circa l'80% della mappa di
   /mangiare-fuori/». Misurata su un desktop da 1440 px, quella mappa e' un
   riquadro di 792x704 px — ma dentro quel riquadro l'Italia e' alta ~660 px e
   larga ~560: il resto e' mare. L'80% preso sul riquadro darebbe un'anteprima di
   634 px di larghezza, che — stando stretta attorno all'Italia, com'e' stato
   chiesto per l'inquadratura — sarebbe alta 750 px, cioe' PIU ALTA della mappa
   che fa da anteprima a. Le due richieste si contraddicono.

   Quindi l'80% e' preso sull'Italia disegnata, non sul riquadro: 28rem = 448 px,
   che e' l'80% dei 560, ed e' piu' piccola della mappa vera in tutte e due le
   direzioni. La proporzione la fissa il viewBox dell'SVG, non il CSS.

   ## Niente colore nuovo

   `--marchio` per i punti e `--su-marchio` per il loro bordo sono esattamente i
   token di `.punto-comune`, cioe' della mappa vera; la terra e' `--superficie`
   con il bordo `--bordo`, come una qualunque scheda del sito. Zero colori
   letterali (invariante 11) e due temi senza una riga in piu': l'SVG e' in
   linea, quindi i token li vede. */
.anteprima-mappa {
  display: block; width: 100%; max-width: 28rem; margin: 1.2rem auto 0;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--sfondo); padding: .6rem; cursor: pointer;
  transition: border-color .15s ease;
}
/* Lo stesso passaggio del mouse delle card del sito: cambia il bordo, non l'ombra.
   `focus-visible` c'e' lo stesso benche' il collegamento non sia raggiungibile da
   tastiera (tabindex="-1"): se un giorno qualcuno togliesse quell'attributo, il
   contorno del fuoco sarebbe gia' al suo posto invece di mancare in silenzio. */
.anteprima-mappa:hover { border-color: var(--marchio); }
.anteprima-mappa:focus-visible { outline: 3px solid var(--marchio); outline-offset: 2px; }
.anteprima-mappa__disegno { display: block; width: 100%; height: auto; }
/* La costa e' verde e la terra resta neutra, e non e' una scelta estetica: misurata.
   Con la terra tinta di verde al 12% il contrasto fra un punto e la terra scende a
   2,88:1 — sotto il 3:1 che il committente ha chiesto. Il verde sta sulla linea di
   costa, dove disegna la forma senza entrare sotto i punti. */
.anteprima-mappa__terra {
  fill: var(--superficie);
  stroke: var(--marchio); stroke-opacity: .45; stroke-width: 1.4;
}
/* ⚠️ Pieni, mentre sulla mappa vera sono al 70%. Li' la trasparenza serve a far
   vedere la citta' sotto, perche' sotto ci sono i riquadri di OpenStreetMap; qui
   sotto c'e' un grigio piatto e non c'e' niente da far trasparire. Col 70% il
   contrasto punto/terra sarebbe 3,02:1 — tecnicamente sopra la soglia chiesta, ma
   con un margine che non regge a nessun ritocco dei token. Pieni fa 5,5:1 in chiaro
   e 8,7:1 in scuro. */
.anteprima-mappa__punti circle {
  fill: var(--marchio);
  stroke: var(--su-marchio); stroke-opacity: .95; stroke-width: 1;
}
/* Su un telefono la larghezza e' tutta quella del contenitore: a 375 px il massimo
   di 28rem non si raggiunge mai, e la riga serve a dirlo invece di lasciarlo
   dedurre dal fatto che `width: 100%` c'e' gia'. */
@media (max-width: 40rem) { .anteprima-mappa { max-width: 100%; } }

/* ---- Il blocco dimostrativo di Casa Rovere ---------------------------------
   Tre card prodotto nella sezione Negozio della home e una scheda venditore in
   tre posti. Marchio, foto e testi del committente.

   ⚠️ Niente qui dentro reagisce al passaggio del mouse, e non e' una
   dimenticanza: «sono immagini, non interfaccia». Una card che si illumina
   promette che cliccandola succede qualcosa, e non succede niente. */
/* ⚠️ 5/8 e non piu' 260/232, dal 2026-10-23. Le foto nuove del committente sono
   verticali — una confezione in piedi — e con la proporzione quasi quadrata di prima
   nessuno dei tre pacchi ci stava intero. «Tenendo il prodotto intero dentro la card»
   e' la condizione che ha posto lui, e in una card larga quanto alta non si puo'
   rispettare: o si taglia il prodotto o la card diventa alta. Scelta la seconda. */
.scheda--dimostrativa .scheda__figura {
  display: block; width: 100%; height: auto;
  aspect-ratio: 5 / 8; object-fit: cover;
  border-radius: var(--raggio) var(--raggio) 0 0;
}
/* Le iniziali al posto del logo: un quadrato nel verde del marchio, come nel
   mockup. Mai una foto di repertorio — un produttore senza logo deve sembrare un
   produttore senza logo. */
.dim-monogramma {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; flex: none;
  background: var(--marchio); color: var(--su-marchio);
  border-radius: var(--raggio); font-size: .75rem; font-weight: 700;
  letter-spacing: .02em;
}
.dim-monogramma--grande { width: 2.6rem; height: 2.6rem; font-size: 1rem; }
.dim-produttore {
  display: flex; align-items: center; gap: .5rem;
  margin: .6rem 0 .4rem; font-size: .9rem; color: var(--inchiostro-tenue);
}
.dim-nome { overflow-wrap: anywhere; }
.dim-scudetto { display: inline-flex; color: var(--marchio); flex: none; }
.dim-scudetto svg { width: 1.05rem; height: 1.05rem; }
/* Il prezzo con il carattere dei titoli: e' il numero che si cerca per primo. */
.dim-prezzo {
  margin: 0; font-family: Fraunces, Georgia, "Times New Roman", serif; font-size: 1.25rem;
  font-weight: 700; color: var(--inchiostro);
}
/* La riga che dice che non e' merce vera. Grigio tenue come ha chiesto il
   committente, ma non piu' piccola del resto: una dichiarazione che si legge
   solo con la lente non e' una dichiarazione. */
.dim-nota {
  margin: .8rem 0 0; text-align: center;
  font-size: .9rem; color: var(--inchiostro-tenue);
}

/* ---- La scheda venditore 4:3 ---- */
.vd-esempio { margin: 1.4rem 0 0; }
.vd-esempio__scheda {
  max-width: 32.5rem; margin: 0 auto; overflow: hidden;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--superficie);
}
.vd-esempio__cover {
  display: block; width: 100%; height: auto;
  aspect-ratio: 520 / 196; object-fit: cover;
}
/* Il monogramma scavalca il bordo della foto, come nel mockup: lega le due meta'
   del riquadro invece di lasciarle una sopra l'altra. */
.vd-esempio__corpo { padding: 0 1.2rem 1.2rem; text-align: left; }
.vd-esempio__corpo .dim-monogramma--grande {
  margin-top: -1.3rem; position: relative;
  border: 2px solid var(--superficie);
}
.vd-esempio__nome {
  margin: .6rem 0 .3rem;
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-size: 1.2rem; font-weight: 700; color: var(--inchiostro);
}
.vd-esempio__scudetto {
  display: flex; align-items: center; gap: .35rem; margin: 0 0 .4rem;
  font-size: .85rem; font-weight: 600; color: var(--marchio);
}
.vd-esempio__scudetto svg { width: 1rem; height: 1rem; flex: none; }
.vd-esempio__meta { margin: 0 0 .5rem; font-size: .85rem; color: var(--inchiostro-tenue); }
.vd-esempio__testo { margin: 0; font-size: .95rem; color: var(--inchiostro); }

/* ─── Le otto dichiarazioni del locale (2026-10-17) ──────────────────────────────────
   Nel modulo: un gruppo per domanda, la ragione sotto il titolo in piccolo. Le tre
   scelte stanno in riga perche' sono tre parole corte, e otto gruppi da tre righe
   ciascuno diventerebbero una pagina che nessuno finisce. */
.dichiarazioni { border: 0; padding: 0; margin: 2rem 0 0; }
.dichiarazioni > legend { padding: 0; }
.dichiarazioni > legend h2 { margin: 0; }
.dichiarazione fieldset { border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: .7rem .9rem; margin: 0 0 .8rem; }
.dichiarazione legend { font-weight: 600; padding: 0 .3rem; }
.dichiarazione legend .meta { display: block; font-weight: 400; }
.dichiarazione .scelta { display: inline-flex; gap: .35rem; align-items: baseline;
  margin-right: 1.2rem; }
.dichiarazione .scelta input { width: auto; }
.dichiarazione .scelta label { display: inline; font-weight: 400; }

/* Sulla scheda pubblica: la RISPOSTA per prima, in grassetto, perche' e' quello che si
   cerca scorrendo.

   ⚠️ Le risposte **non sono colorate**, e la prima stesura lo faceva: verde al «sì»,
   rosso al «no». E' sbagliato, e non per l'invariante 11 — per il significato. Alla
   settima domanda, «serve prenotare per il senza glutine», il **no e' la buona
   notizia**: vuol dire che si entra e si mangia. Un verde e un rosso applicati a tutte
   e otto direbbero il contrario della verita' su una di loro, e sarebbe proprio la riga
   che un lettore scorre piu' in fretta.

   Le tre parole — «Sì», «No», «Non so» — bastano, e si leggono uguali su una stampa, al
   sole e per chi non distingue le tinte. */
.dichiarate { list-style: none; padding: 0; max-width: var(--misura); }
.dichiarata { padding: .45rem 0 .45rem .7rem; border-left: 3px solid var(--bordo); }
.dichiarata .meta { display: block; }

/* Gli ingredienti di un prodotto si leggono come un'etichetta, non come prosa: a capo
   dove l'ha messi chi li ha copiati dalla confezione, perche' l'ordine e la
   punteggiatura di un elenco ingredienti sono informazione. */
.ingredienti { white-space: pre-line; }

/* «Cosa manca» nel pannello di chi vende: un riquadro, non una riga fra le altre.
   E' l'unica cosa che fa tornare qualcuno su una bozza ferma, quindi si vede. */
.manca { border-left: 3px solid var(--attenzione); padding: .5rem 0 .5rem .8rem;
  margin-top: .6rem; }
.manca p { margin: 0 0 .3rem; }
.manca ul { margin: 0; padding-left: 1.2rem; }

/* Il verdetto della revisione nel pannello di chi vende. Due esiti, due pesi: «da
   correggere» e' un invito e «rifiutato» e' una porta chiusa, e si vedono diversi
   prima di leggerli. Il colore e' semantico davvero — attenzione e rifiuto — e qui
   l'invariante 11 e' rispettato proprio usandolo per cio' per cui e' riservato. */
.verdetto { border-left: 3px solid var(--bordo); padding: .6rem 0 .6rem .8rem;
  margin-top: .6rem; }
.verdetto p { margin: 0 0 .3rem; }
.verdetto--da_correggere { border-left-color: var(--attenzione); }
.verdetto--rifiutato { border-left-color: var(--pericolo); }

/* ─── Gli stati vuoti delle aree riservate (2026-10-19) ──────────────────────────────
   Uno schermo a zero dati non dice «non c'e' niente»: dice qual e' il primo passo. I
   passi sono numerati perche' sono in ordine e il secondo non si puo' fare prima del
   primo — una lista puntata direbbe «scegli», e qui non c'e' da scegliere. */
.primi-passi { max-width: var(--misura); padding-left: 1.3rem; }
.primi-passi li { margin-bottom: 1rem; }
.primi-passi .bottone { display: inline-block; margin-top: .4rem; }