/* I CARATTERI DELLE INTESTAZIONI (DIGITAL_MENU.md, Tema 25)
 *
 * Ospitati con il sito e non presi da Google Fonts: da lì il file
 * arriverebbe dai server di Google a ogni scansione del QR, cioè
 * manderemmo l'indirizzo IP del cliente seduto al tavolo a un terzo senza
 * che nessuno gliel'abbia chiesto.
 *
 * Un peso per famiglia e i soli sottoinsiemi latino e latino esteso: le
 * intestazioni sono due, non serve la famiglia intera. Il browser scarica
 * SOLO la famiglia che quel locale usa davvero — le regole qui sotto non
 * costano niente finché nessun testo le richiede.
 *
 * font-display: swap — il nome del locale si legge subito col carattere di
 * sistema e cambia quando il file è arrivato. Aspettare il carattere
 * vorrebbe dire un'intestazione vuota a chi ha appena inquadrato il QR.
 *
 * La licenza (OFL) sta in fonts/OFL.txt: chiede di accompagnare i file.
 */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/jost-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-corpo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-corpo-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-corpo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-corpo-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jost-corpo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jost-corpo-latin.woff2') format('woff2');
  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;
}

/* Menù al tavolo — /menu/[slug]
 *
 * Una colonna sola, pensata per un telefono tenuto in mano fra i bicchieri.
 * Su schermi larghi NON si allarga: resta una colonna stretta al centro,
 * perché è così che la vedranno tutti i clienti veri, e un menù disteso su
 * un monitor farebbe giudicare al ristoratore un'impaginazione che nessuno
 * incontrerà mai.
 *
 * --accent è il colore scelto dal ristoratore, messo sul body dal server.
 * Fa da fondo SOLO all'intestazione e alle pastiglie accese: sul testo dei
 * piatti il contrasto sarebbe una scelta lasciata a lui.
 */

.menu-body {
  margin: 0;
  background: var(--bg-alt);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  /* LA GRANDEZZA DEI TESTI (DIGITAL_MENU, Tema 27): un moltiplicatore solo,
     scritto sulla radice dalla pagina (`--ms` nello style di <body>) e letto
     da ogni misura del contenuto qui sotto. 1 = Normale; Compatta e Ampia
     arrivano da lì. Se l'attributo non c'è — uno scatto preso prima che la
     manopola esistesse — vale questo 1 e la pagina è quella di sempre.

     Scala il CONTENUTO, cioè quello che si legge: nome del locale, sezioni,
     piatti, prezzi, descrizioni, condizioni. NON scalano i comandi — lingue,
     filtro, pastiglie, foglio dei filtri, marchio in coda: sono bersagli da
     toccare, e un dito non rimpicciolisce con la carta.

     ⚠️ IL PAVIMENTO: la riga degli allergeni e il motivo dell'esclusione
     usano max(), quindi Compatta NON li rimpicciolisce — crescono con Ampia
     e basta. Quella riga la legge una persona con un'allergia, in una sala
     poco illuminata, mentre qualcuno le chiede cosa ordina. Chi toglie il
     max() si tiene la responsabilità di quella riga. */
  --ms: 1;
  /* L'INTERLINEA (migration 711), stessa ricetta: un moltiplicatore solo,
     scritto sulla radice dalla pagina, e ogni interlinea del contenuto è
     calc(N * var(--lh, 1)). Sono due manopole indipendenti — la grandezza
     cambia quanto sono grandi le lettere, l'interlinea quanto respirano fra
     loro — e su un menù di una pagina sola la seconda si nota più della
     prima.

     ⚠️ Stesso pavimento e sulle stesse righe: allergeni, motivo
     dell'esclusione e condizioni al tavolo usano max(), quindi 'Stretta'
     avvicina la carta ma non impasta la riga che si legge con un'allergia.
     E come sopra, i comandi non si toccano. */
  --lh: 1;
}

.menu-header,
.menu-filter,
.menu-main,
.menu-brand {
  max-width: 480px;
  margin-inline: auto;
}

/* ── Intestazione ──────────────────────────────────────────────── */
/* Il respiro sopra e sotto il nome è quello che fa sembrare la fascia
   un'intestazione e non una barra di servizio: stretta com'era, il nome del
   ristorante stava schiacciato fra il bordo dello schermo e il filtro. È la
   prima cosa che si vede dopo aver inquadrato il QR, e nei menù di carta il
   nome del locale ha sempre aria intorno. */
.menu-header {
  background: var(--accent);
  color: #fff;
  padding: 28px 16px 24px;
}
/* Con la copertina il colore resta SOTTO l'immagine: se la foto non arriva —
   rete lenta, file sparito — l'intestazione non diventa bianca col nome
   bianco sopra. La velatura scura sta nel gradiente ed è obbligatoria (Tema
   25): senza, il nome su una foto chiara sparisce. */
.menu-header.has-cover {
  background-size: cover;
  background-position: center;
  background-color: var(--accent);
  /* Con la copertina serve ancora più aria: il nome sta sopra un'immagine, e
     appiccicato al bordo sembra una didascalia incollata sopra la foto. */
  padding-top: 34px;
  padding-bottom: 30px;
}
.menu-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.menu-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.menu-venue {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: calc(22px * var(--ms, 1));
  font-weight: 600;
  line-height: calc(1.25 * var(--lh, 1));
}


.menu-intro {
  margin: 10px 0 0;
  font-size: calc(14px * var(--ms, 1));
  line-height: calc(1.4 * var(--lh, 1));
  color: rgba(255, 255, 255, 0.85);
  white-space: pre-line;
}

/* Le lingue: due lettere, non una bandiera — una bandiera dice il paese, non
   la lingua, e sbaglia con tutti quelli che la parlano altrove. */
.menu-langs {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
}
.menu-lang {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.menu-lang.is-on {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
}

/* I PACCHETTI DI STILE (DIGITAL_MENU.md, Tema 25)
 *
 * Un pacchetto decide TUTTA la tipografia del menù, non solo i titoli: metà
 * pagina in un carattere e metà in un altro sembra un errore, non una scelta.
 * Quindi la famiglia si applica al corpo intero e sotto si aggiustano solo i
 * pesi, che cambiano col ruolo — un nome di piatto in Archivo 700 sarebbe un
 * muro di grassetto, un titolo in Jost 400 non sarebbe un titolo.
 *
 * ⚠️ DOVE IL CARATTERE COSTA LEGGIBILITÀ, SI COMPENSA invece di fare
 * un'eccezione. La riga degli allergeni è di 10px e grigia: in un serif o in
 * un geometrico leggero, a quella misura, si legge peggio del carattere di
 * sistema — e quella riga la legge una persona con un'allergia, in una sala
 * poco illuminata, mentre le chiedono cosa ordina. Nei pacchetti "classico" e
 * "sottile" cresce di un punto e si scurisce. Chi toglie questa compensazione
 * si tenga la responsabilità di quella riga.
 */
.font-classic {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
}
.font-bold {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
}
.font-light {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* I pesi per ruolo. Il corpo (nomi, descrizioni) tiene il peso leggero della
   famiglia; titoli e prezzi quello marcato. */
.font-classic .menu-venue,
.font-classic .menu-section-title,
.font-classic .menu-price,
.font-classic .menu-detail-price {
  font-weight: 600;
}
.font-classic .menu-item-name,
.font-classic .menu-note-title,
.font-classic .menu-detail-head h3 {
  font-weight: 400;
}

.font-bold .menu-venue,
.font-bold .menu-section-title,
.font-bold .menu-price,
.font-bold .menu-detail-price {
  font-weight: 700;
}
.font-bold .menu-item-name,
.font-bold .menu-note-title,
.font-bold .menu-detail-head h3 {
  font-weight: 500;
}

.font-light .menu-venue,
.font-light .menu-section-title {
  font-weight: 300;
}
.font-light .menu-item-name,
.font-light .menu-note-title,
.font-light .menu-detail-head h3,
.font-light .menu-price,
.font-light .menu-detail-price {
  font-weight: 400;
}
/* Il maiuscoletto stretto, con un carattere leggero, si legge peggio: gli si
   allarga la spaziatura invece di lasciarlo compresso. */
.font-light .menu-section-title.is-underline,
.font-light .menu-section-title.is-banner {
  letter-spacing: 0.09em;
}

/* LA COMPENSAZIONE: un punto in più e un grigio più scuro sulle righe minute
   che portano informazione — allergeni, motivo dell'esclusione, descrizioni. */
.font-classic .menu-item-allergens,
.font-classic .menu-item-reason,
.font-light .menu-item-allergens,
.font-light .menu-item-reason {
  /* il pavimento qui è il punto in più della compensazione, non gli 11px */
  font-size: max(12px, calc(12px * var(--ms, 1)));
  color: #6b6b6b;
}
.font-classic .menu-item-desc,
.font-light .menu-item-desc {
  font-size: calc(13.5px * var(--ms, 1));
}

/* ── Il filtro ─────────────────────────────────────────────────── */
/* NON È AGGANCIATO IN CIMA, e prima lo era. Restando fermo mentre il menù
   gli scorreva sotto, la carta sembrava passargli dietro — un effetto da
   pagina rotta più che da comando sempre a portata. Sta in alto e basta:
   il cliente lo incontra appena apre, lo tocca, e da lì in poi legge il
   menù senza una barra che gli mangia lo schermo. Chi lo rimette sticky si
   ricordi che sotto ci passano le fasce colorate delle sezioni. */
.menu-filter {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px 8px;
}
.menu-filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.menu-filter-hint {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9e9e9e;
}
.menu-filter-count {
  margin: 0;
  font-size: 10px;
  color: #9e9e9e;
  font-variant-numeric: tabular-nums;
}
/* IL BOTTONE DEI FILTRI STA NELLA FILA e scorre con le pastiglie
   (2026-09-03): una fila sola invece di un elemento fermo più una che
   scorre. Solo l'icona — la parola "Filtri" ripeteva quello che l'icona già
   dice, e in una fila di pastiglie che si leggono era l'unica scritta che
   non era una scelta. Il nome resta in aria-label e title.
   Non è una .menu-pill: è quello che lo tiene primo quando il filtro
   riordina la fila (v. menu-page.js). */
.menu-filter-button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.menu-filter-badge {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.menu-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  /* LA FILA SBORDA DA TUTT'E DUE I LATI, e i due margini fanno due mestieri
     diversi. Il margine negativo porta il contenitore fino al bordo dello
     schermo: una fila che si ferma prima del margine sembra finita anche
     quando non lo è, e una pastiglia che esce dev'essere tagliata dal bordo
     vero — non svanire due centimetri prima, come se qualcosa la coprisse.
     Il padding uguale e contrario rimette il contenuto sul margine della
     pagina quando la fila è ferma ai suoi capi, così da fermi le pastiglie
     sono allineate a tutto il resto.
     ⚠️ Vanno insieme e sono simmetrici: solo a destra (com'era fino al
     2026-09-03) vuol dire che le pastiglie entrano dal bordo dello schermo e
     spariscono al margine, cioè due regole diverse per lo stesso gesto. */
  margin-inline: -16px;
  padding-inline: 16px;
  scrollbar-width: none;
}
.menu-pills::-webkit-scrollbar { display: none; }
.menu-pills.is-wrap {
  flex-wrap: wrap;
  overflow: visible;
  margin-top: 0;
  margin-inline: 0;
  padding-inline: 0;
}
.menu-pill {
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.menu-pill[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* L'unica riga che parla a nome nostro, e sta attaccata al filtro perché il
   filtro è l'unica cosa nostra in questa pagina. Non è un disclaimer in
   fondo: dice da dove viene il dato su cui il filtro lavora. */
.menu-declared {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.3;
  color: #b0b0b0;
}

/* ── Il menù ───────────────────────────────────────────────────── */
.menu-main {
  background: var(--bg);
  padding: 14px 16px 24px;
  min-height: 40vh;
}
.menu-empty {
  padding: 40px 0;
  text-align: center;
  color: #9e9e9e;
  font-size: 14px;
}
.menu-section { margin-bottom: 22px; }
/* ⚠️ LO SPAZIO SOTTO NON PUÒ ESSERE MINORE DI QUELLO FRA I PIATTI (13px, v.
   .menu-items): era 5, e il filetto sembrava appoggiato sopra la prima riga —
   il titolo stava più vicino al primo piatto di quanto i piatti stessero fra
   loro. La regola è che sotto un'intestazione vada MENO spazio che sopra (così
   si lega a quello che annuncia) ma non meno dello spazio interno della lista,
   o ci sbatte contro. Sopra la sezione ce ne sono 22. */
.menu-section-title {
  margin: 0 0 10px;
  font-size: calc(14px * var(--ms, 1));
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Filetto: quello di sempre. Sobrio, da carta stampata. */
.menu-section-title.is-underline {
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
/* Fascia: esce dai margini della colonna, o non è una fascia — è un
   rettangolo con due strisce bianche ai lati. Il bianco sopra regge perché
   le tinte le scegliamo noi (DIGITAL_MENU, Temi 8 e 25). */
.menu-section-title.is-banner {
  margin: 0 -16px 10px;
  padding: 5px 16px;
  background: var(--accent);
  color: #fff;
}
/* Solo testo: più grande, scuro, senza colore e senza filetto. L'unico dei
   tre che non usa la tinta del locale. */
.menu-section-title.is-plain {
  margin-bottom: 10px;
  font-size: calc(18px * var(--ms, 1));
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
/* CON LA DESCRIZIONE SOTTO, il titolo le sta VICINO: la didascalia è del
   titolo, non della lista, e lo spazio grande sta fra la descrizione e i
   piatti — ce l'ha già lei. La classe la mette chi rende, in tutt'e due le
   copie, invece di `:has()`: così la regola è identica di qua e di là e
   `npm run gemelle` la può confrontare.
   Sta DOPO le tre varianti apposta: stessa specificità, vince l'ultima. */
.menu-section-title.has-desc { margin-bottom: 5px; }

.menu-section-desc {
  margin: 0 0 10px;
  font-size: calc(12px * var(--ms, 1));
  line-height: calc(1.4 * var(--lh, 1));
  color: var(--text-secondary);
  white-space: pre-line;
}
.menu-note {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-alt);
}
.menu-note-title {
  margin: 0;
  font-size: calc(13px * var(--ms, 1));
  font-weight: 600;
  line-height: calc(1.35 * var(--lh, 1));
}
.menu-note-text {
  margin: 2px 0 0;
  font-size: calc(12px * var(--ms, 1));
  line-height: calc(1.45 * var(--lh, 1));
  color: var(--text-secondary);
  white-space: pre-line;
}

.menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.menu-item.is-highlighted {
  margin-inline: -6px;
  padding: 4px 6px;
  border-radius: 10px;
  background: #fffbeb;
}
/* Il piatto che il filtro esclude NON sparisce: sbiadisce e scende in fondo
   alla sua sezione, col motivo scritto sotto. */
.menu-item.is-off { opacity: 0.45; }

.menu-item-row {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
/* Un piatto senza foto tiene comunque lo spazio: senza, le righe fotografate
   e quelle no partirebbero da punti diversi e la carta sembrerebbe storta */
.menu-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.menu-thumb-empty { background: var(--bg-alt); }
/* Tonde, se il ristoratore le vuole così (migration 711). Vale per la LISTA:
   la foto grande dentro il popup del piatto resta rettangolare — un cerchio
   al posto di una foto non è una scelta di stile, è un ritaglio in meno. */
.menu-thumb.is-round { border-radius: 50%; }
.menu-item-body {
  flex: 1;
  min-width: 0;
  display: block;
}
.menu-item-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.menu-star { color: #f59e0b; flex-shrink: 0; }
.menu-info { color: #bdbdbd; flex-shrink: 0; }
/* IL NOME E LA "i" SONO UNA COSA SOLA, e prima non lo erano: il nome si
   prendeva tutto lo spazio disponibile e l'icona finiva spinta contro il
   prezzo, dove si legge come un'informazione SUL PREZZO. Adesso è questo
   involucro a prendersi lo spazio, e la "i" resta attaccata al nome del
   piatto — che è la cosa di cui parla. Stessa forma dell'anteprima nel
   portale (MenuPreview), che era già stata sistemata così. */
.menu-item-title {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
/* IL NOME VA A CAPO, non si tronca. Con i puntini un piatto dal nome lungo
   diventava "Tagliatelle al ragù di cingh…", che al tavolo è esattamente la
   riga che non si può leggere — e crescendo i testi (Tema 28) sarebbe
   successo più spesso, non meno. Le righe perdono un po' di altezza uniforme,
   e va bene: l'uniformità serviva a scorrere, il nome serve a ordinare. */
.menu-item-name {
  min-width: 0;
  font-size: calc(16px * var(--ms, 1));
  font-weight: 500;
  line-height: calc(1.3 * var(--lh, 1));
  overflow-wrap: anywhere;
}
.menu-price {
  flex-shrink: 0;
  font-size: calc(16px * var(--ms, 1));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.menu-item-desc {
  display: block;
  margin-top: 3px;
  font-size: calc(13px * var(--ms, 1));
  line-height: calc(1.4 * var(--lh, 1));
  color: var(--text-secondary);
}
.menu-item-note {
  display: block;
  margin-top: 3px;
  font-size: calc(12px * var(--ms, 1));
  font-weight: 500;
  color: #b45309;
}
.menu-item-allergens,
.menu-item-reason {
  display: block;
  margin-top: 3px;
  /* max() e non calc(): Compatta non scende sotto gli 11px (v. .menu-body) */
  font-size: max(11px, calc(11px * var(--ms, 1)));
  line-height: max(1.3, calc(1.35 * var(--lh, 1)));
  color: #9e9e9e;
}
.menu-item-allergens:empty { display: none; }
/* display:block qui sopra è più forte della regola predefinita del browser
   per [hidden]: senza questa riga, la riga degli allergeni resterebbe visibile
   sotto al motivo dell'esclusione, dicendo due volte la stessa cosa. */
.menu-item-allergens[hidden],
.menu-item-reason[hidden] { display: none; }
.menu-item-reason {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ── L'IMPAGINAZIONE A BLOCCO ──────────────────────────────────────
   La carta dei ristoranti che non mettono fotografie: nome, descrizione e
   prezzo incolonnati e centrati. È tutta QUI, nel CSS, sulla stessa marcatura
   della riga — due marcature avrebbero voluto dire due dettagli da tenere
   allineati, e uno di quei dettagli è la riga degli allergeni.

   Il trucco è `display: contents` sulla riga: i suoi figli (nome e prezzo)
   diventano figli del corpo, e da lì `order` mette il prezzo sotto la
   descrizione. Senza, il prezzo resterebbe incollato al nome perché gli sta
   dentro.

   ⚠️ È UNO STILE, NON UN PRESET: non tocca colore, carattere, grandezza né
   interlinea, che restano quelli scelti dal ristoratore. */
.layout-block .menu-item-row {
  display: block;
  text-align: center;
}
.layout-block .menu-item-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.layout-block .menu-item-line { display: contents; }
.layout-block .menu-item-title {
  flex: 0 1 auto;
  order: 1;
  justify-content: center;
}
.layout-block .menu-item-desc {
  order: 2;
  margin-top: 4px;
  /* Il corsivo è quello delle carte stampate: distingue la descrizione dal
     nome senza rimpicciolirla ancora. */
  font-style: italic;
}
.layout-block .menu-price {
  order: 3;
  margin-top: 6px;
  font-size: calc(14px * var(--ms, 1));
}
.layout-block .menu-item-note { order: 4; }
.layout-block .menu-item-allergens,
.layout-block .menu-item-reason { order: 5; }

/* ── IL SEGNO FRA UN PIATTO E L'ALTRO ──────────────────────────────
   Vale in tutt'e due le impaginazioni: il filetto sta bene anche nella carta
   a riga, e legarlo al blocco avrebbe aggiunto una seconda voce che compare e
   sparisce. Sta SOPRA la riga (+ .menu-item) e non sotto, così l'ultimo
   piatto di una sezione non si porta dietro un segno che sembra l'inizio di
   qualcos'altro — e sul primo non c'è, dove sarebbe una seconda linea sotto
   il titolo della sezione. */
.sep-rule .menu-items,
.sep-ornament .menu-items { gap: 0; }
.sep-rule .menu-item + .menu-item {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid #eee;
}
.sep-ornament .menu-item + .menu-item {
  position: relative;
  margin-top: 15px;
  padding-top: 17px;
}
.sep-ornament .menu-item + .menu-item::before {
  content: "\25C6";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  line-height: 1;
  color: var(--accent);
}

/* Il fondo è del ristoratore: coperto, servizio, pagamenti */
.menu-conditions {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  /* Contenuto del ristoratore, e dice cosa può garantire su una
     contaminazione: cresce con Ampia, non scende con Compatta. */
  font-size: max(11px, calc(11px * var(--ms, 1)));
  line-height: max(1.4, calc(1.5 * var(--lh, 1)));
  color: var(--text-secondary);
  white-space: pre-line;
}

/* ── Il marchio: piccolo, in coda, e non sopra il menù ─────────── */
.menu-brand {
  padding: 14px 16px 18px;
  text-align: center;
}
.menu-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: none;
}
.menu-brand-logo { width: 18px; height: 18px; }

/* ── Il foglio dei filtri, e il popup del piatto ───────────────── */
/* Sono due cose diverse e si comportano da cose diverse. Il FOGLIO dei filtri
   sale dal basso: è un comando, sta sotto il pollice e si chiude tornando al
   menù. Il POPUP del piatto (.is-dialog) sta al centro e ha la sua X: è
   contenuto da leggere, non un comando, e prima — incollato al bordo
   inferiore senza un modo evidente di chiuderlo — sembrava rotto, soprattutto
   da computer. */
.menu-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
.menu-sheet[hidden] { display: none; }
.menu-sheet-panel {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  background: var(--bg);
  padding-bottom: 20px;
  animation: menu-sheet-up 0.18s ease-out;
}
@keyframes menu-sheet-up {
  from { transform: translateY(12px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-sheet-panel { animation: none; }
}
.menu-sheet-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 6px;
  background: var(--bg);
}
.menu-sheet-grip {
  grid-column: 2;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
}
.menu-sheet-title {
  grid-column: 2;
  grid-row: 2;
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.menu-sheet-reset {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  border: 0;
  background: none;
  padding: 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.menu-sheet-body { padding: 6px 16px 0; }

/* ── Il popup del piatto ───────────────────────────────────────── */
.menu-sheet.is-dialog {
  align-items: center;
  padding: 16px;
}
.menu-sheet-panel.is-dialog {
  /* Più stretto della colonna del menù: è una scheda, non una pagina. E più
     basso dello schermo, così si vede che sotto e sopra c'è dell'altro. */
  max-width: 380px;
  max-height: 82vh;
  border-radius: 18px;
  padding-bottom: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: menu-dialog-in 0.16s ease-out;
}
@keyframes menu-dialog-in {
  from { transform: scale(0.97); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-sheet-panel.is-dialog { animation: none; }
}
/* La barra dei comandi resta in vista mentre si scorre la scheda: la X di un
   popup che se ne va in cima è la X che non si trova più. */
.menu-dialog-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 4px;
  background: var(--bg);
}
.menu-dialog-nav,
.menu-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
/* Ai capi della carta la freccia si SPEGNE e non sparisce: sparendo,
   sposterebbe l'altra sotto il dito proprio mentre lo si sta usando. */
.menu-dialog-nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.menu-dialog-close {
  margin-left: auto;
}
.menu-sheet-label {
  margin: 12px 0 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9e9e9e;
}

/* La foto arriva quadrata (il portale la ritaglia così), ma dentro un popup
   un quadrato a tutta larghezza si mangiava la finestra e spingeva gli
   allergeni sotto il bordo — cioè la cosa per cui il piatto si apre. Qui si
   guarda 4:3: si perde un quarto dell'altezza al centro, e si vede il piatto
   INSIEME a quello che c'è scritto sotto. */
.menu-detail-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.menu-detail-body { padding: 10px 16px 0; }
.menu-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.menu-detail-head h3 { margin: 0; font-size: calc(19px * var(--ms, 1)); line-height: calc(1.3 * var(--lh, 1)); }
.menu-detail-price { font-size: calc(18px * var(--ms, 1)); font-weight: 600; font-variant-numeric: tabular-nums; }
.menu-detail-desc {
  margin: 6px 0 0;
  font-size: calc(15px * var(--ms, 1));
  line-height: calc(1.45 * var(--lh, 1));
  color: var(--text-secondary);
}
.menu-detail-label {
  margin: 12px 0 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9e9e9e;
}
.menu-detail-none { margin: 0; font-size: calc(15px * var(--ms, 1)); color: var(--text-secondary); }
.menu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.menu-chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: calc(13px * var(--ms, 1));
  font-weight: 500;
  color: var(--text-secondary);
}
/* L'allergene che il cliente ha appena escluso, dentro il dettaglio: si vede
   subito qual è quello che lo riguarda, senza rileggere tutta la lista */
.menu-chip.is-hit {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #b91c1c;
}
.menu-chip.is-diet {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}
.menu-detail-photo-note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  line-height: 1.4;
  color: #b0b0b0;
}

/* La pagina di cortesia: menù non disponibile, o un errore. Non è un 404 del
   browser perché chi la legge è seduto a un tavolo col telefono in mano e il
   QR appena inquadrato. */
.menu-message {
  max-width: 380px;
  margin: 0 auto;
  padding: 64px 24px;
  text-align: center;
}
.menu-message-logo { width: 44px; height: 44px; }
.menu-message h1 {
  margin: 16px 0 0;
  font-size: 18px;
  font-weight: 600;
}
.menu-message p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Il piede del sito (privacy, termini, contatti) è condiviso con /r/ e /u/,
   ma il suo stile vive in restaurant-page.css: qui si ripete il minimo invece
   di tirarsi dentro un foglio intero fatto per un'altra pagina. Al tavolo
   deve restare sottovoce — è nostro, non del ristorante. */
.restaurant-footer {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding: 18px 16px 26px;
  background: var(--bg-alt);
}
.footer-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #9e9e9e;
}
.footer-inner a { color: #9e9e9e; text-decoration: none; }

/* Su schermo largo il menù resta una colonna, con la pagina attorno */
@media (min-width: 720px) {
  .menu-body { padding-bottom: 8px; }
}