{"id":10,"date":"2026-09-07T14:57:50","date_gmt":"2026-09-07T14:57:50","guid":{"rendered":"https:\/\/www.soluzionemenu.it\/prenota\/menu\/"},"modified":"2026-09-07T14:57:50","modified_gmt":"2026-09-07T14:57:50","slug":"menu","status":"publish","type":"page","link":"https:\/\/www.soluzionemenu.it\/prenota\/menu\/","title":{"rendered":"Il nostro men\u00f9"},"content":{"rendered":"<style>\/*\n * I quattro stili delle pagine pubbliche.\n *\n * Qui non c'\u00e8 nessuna regola di disposizione: solo variabili. Il men\u00f9,\n * il delivery e il profilo disegnano s\u00e9 stessi leggendo queste, e non\n * sanno quale stile \u00e8 attivo. Aggiungerne un quinto vuol dire scrivere\n * un blocco qui e nient'altro.\n *\n * Ogni stile dichiara la stessa lista di variabili. Se una manca, quel\n * pezzo di pagina eredita il valore di \"moderno\" \u2014 che \u00e8 il blocco\n * :root qui sotto \u2014 invece di sparire.\n *\n * Le famiglie di caratteri sono quelle presenti sul dispositivo.\n * Caricarle da Google significherebbe mandare l'indirizzo IP di ogni\n * visitatore a Google, e in Europa su questo ci sono gi\u00e0 state\n * condanne.\n *\/\n\n.yummyit-style {\n    \/* --- Moderno: \u00e8 anche il valore di partenza per tutti gli altri --- *\/\n\n    --yz-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    --yz-display: var(--yz-font);\n\n    --yz-ink: #16191f;\n    --yz-soft: #6b7280;\n    --yz-page: #ffffff;\n    --yz-card: #ffffff;\n    --yz-line: #e5e7eb;\n    --yz-well: #f6f6f7;\n\n    \/*\n     * I colori del ristorante entrano da qui: il template li scrive\n     * in linea sul contenitore, calcolati da BrandService.\n     *\n     * Il secondario ricade sul principale: chi non lo sceglie non deve\n     * ritrovarsi i titoli di un colore che non ha mai indicato.\n     *\/\n    --yz-accent: #1f2933;\n    --yz-on-accent: #ffffff;\n    --yz-accent-alt: var(--yz-accent);\n\n    --yz-radius: 14px;\n    --yz-radius-small: 9px;\n\n    --yz-title-size: 21px;\n    --yz-title-weight: 700;\n    --yz-title-spacing: -0.01em;\n    --yz-title-transform: none;\n\n    --yz-item-size: 17px;\n    --yz-item-weight: 600;\n    --yz-item-font: var(--yz-font);\n    --yz-item-transform: none;\n    --yz-item-spacing: normal;\n\n    --yz-body-size: 15px;\n    --yz-rhythm: 18px;\n    --yz-section-gap: 52px;\n\n    \/* Il filo fra il nome del piatto e il prezzo *\/\n    --yz-leader: radial-gradient(circle, var(--yz-line) 1px, transparent 1px);\n    --yz-leader-size: 5px 2px;\n\n    --yz-rule: 1px solid var(--yz-line);\n    --yz-title-rule: 2px solid var(--yz-accent);\n\n    --yz-shadow: 0 1px 2px rgba(16, 19, 31, .05), 0 6px 20px rgba(16, 19, 31, .06);\n}\n\n\/* ------------------------------------------------------------------ *\/\n\/* Elegante                                                            *\/\n\n\/*\n * Grazie sottili e molta aria. Le due cose che fanno il lavoro sono la\n * spaziatura fra le lettere dei titoli e il ritmo verticale: un men\u00f9\n * costoso \u00e8 un men\u00f9 in cui ogni piatto ha spazio intorno, perch\u00e9 il\n * tempo di leggerlo fa parte di quello che si compra.\n *\/\n.yummyit-style.is-elegante {\n    --yz-font: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;\n    --yz-display: var(--yz-font);\n\n    --yz-ink: #23201d;\n    --yz-soft: #7d766d;\n    --yz-page: #fdfcfa;\n    --yz-card: #fdfcfa;\n    --yz-line: #e0dbd3;\n    --yz-well: #f6f3ee;\n\n    --yz-radius: 2px;\n    --yz-radius-small: 2px;\n\n    --yz-title-size: 19px;\n    --yz-title-weight: 400;\n    --yz-title-spacing: .18em;\n    --yz-title-transform: uppercase;\n\n    --yz-item-size: 18px;\n    --yz-item-weight: 400;\n    --yz-item-font: var(--yz-font);\n    --yz-item-transform: none;\n    --yz-item-spacing: .02em;\n\n    --yz-body-size: 15px;\n    --yz-rhythm: 28px;\n    --yz-section-gap: 76px;\n\n    \/* Nessun filo puntinato: su una carta di questo tipo \u00e8 rumore *\/\n    --yz-leader: none;\n\n    --yz-rule: 1px solid #ece7e0;\n    --yz-title-rule: 1px solid #c9c0b4;\n\n    --yz-shadow: none;\n}\n\n\/* ------------------------------------------------------------------ *\/\n\/* Trattoria                                                           *\/\n\n\/*\n * Carta color panna e caldo. Angoli morbidi e un filo pi\u00f9 marcato: il\n * riferimento \u00e8 la tovaglietta stampata, non il libro.\n *\/\n.yummyit-style.is-trattoria {\n    --yz-font: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;\n    --yz-display: var(--yz-font);\n\n    --yz-ink: #33271c;\n    --yz-soft: #7a6a58;\n    --yz-page: #fbf6ec;\n    --yz-card: #fffdf8;\n    --yz-line: #e2d5c0;\n    --yz-well: #f5ecdd;\n\n    --yz-radius: 10px;\n    --yz-radius-small: 7px;\n\n    --yz-title-size: 23px;\n    --yz-title-weight: 700;\n    --yz-title-spacing: 0;\n    --yz-title-transform: none;\n\n    --yz-item-size: 17px;\n    --yz-item-weight: 700;\n    --yz-item-font: var(--yz-font);\n    --yz-item-transform: none;\n    --yz-item-spacing: normal;\n\n    --yz-body-size: 15px;\n    --yz-rhythm: 20px;\n    --yz-section-gap: 56px;\n\n    --yz-leader: radial-gradient(circle, #c9b795 1px, transparent 1px);\n    --yz-leader-size: 6px 2px;\n\n    --yz-rule: 1px dashed #ddceb4;\n    --yz-title-rule: 3px double var(--yz-accent);\n\n    --yz-shadow: 0 1px 0 rgba(120, 90, 50, .06);\n}\n\n\/* ------------------------------------------------------------------ *\/\n\/* Pub                                                                 *\/\n\n\/*\n * Fondo scuro e titoli in stampatello stretto. Sul nero il testo\n * chiaro affatica, quindi il corpo non \u00e8 bianco puro ma leggermente\n * spento \u2014 e la spaziatura fra le righe \u00e8 pi\u00f9 larga del solito, che\n * sul fondo scuro serve davvero.\n *\/\n.yummyit-style.is-pub {\n    --yz-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    --yz-display: 'Arial Narrow', 'Helvetica Neue', Impact, var(--yz-font);\n\n    --yz-ink: #ececec;\n    --yz-soft: #9aa0a6;\n    --yz-page: #16181c;\n    --yz-card: #202329;\n    --yz-line: #33383f;\n    --yz-well: #23272e;\n\n    --yz-radius: 6px;\n    --yz-radius-small: 4px;\n\n    --yz-title-size: 26px;\n    --yz-title-weight: 800;\n    --yz-title-spacing: .06em;\n    --yz-title-transform: uppercase;\n\n    --yz-item-size: 17px;\n    --yz-item-weight: 700;\n    --yz-item-font: var(--yz-display);\n    --yz-item-transform: uppercase;\n    --yz-item-spacing: .04em;\n\n    --yz-body-size: 15px;\n    --yz-rhythm: 18px;\n    --yz-section-gap: 54px;\n\n    --yz-leader: radial-gradient(circle, #454b53 1px, transparent 1px);\n    --yz-leader-size: 5px 2px;\n\n    --yz-rule: 1px solid #2c3037;\n    --yz-title-rule: 3px solid var(--yz-accent);\n\n    --yz-shadow: none;\n}\n\n\/*\n * Sul fondo scuro il colore del ristorante pu\u00f2 essere illeggibile: un\n * blu notte su nero sparisce. Il contrasto del testo sopra l'accento lo\n * calcola gi\u00e0 il PHP; qui si alza solo la separazione fra le schede e\n * il fondo, che \u00e8 l'unica cosa che il colore non risolve.\n *\/\n.yummyit-style.is-pub .yz-card { border: 1px solid var(--yz-line); }\n\n\/* ==================================================================\n * Promozioni, conto alla rovescia e legenda degli allergeni\n *\n * Stanno nel foglio condiviso e non in quelli delle due pagine perch\u00e9\n * servono a tutte e due: un prezzo scontato disegnato diversamente sul\n * men\u00f9 e sul delivery fa pensare a un errore, e su un prezzo quel\n * dubbio costa l'ordine.\n * ================================================================== *\/\n\n.yz-price {\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n}\n\n\/*\n * Il prezzo in promozione \u00e8 una riga sola: sbarrato, nuovo, sconto.\n * In quest'ordine, perch\u00e9 senza il termine di paragone \"8 \u20ac\" \u00e8 solo un\n * prezzo \u2014 con accanto \"12 \u20ac\" sbarrato \u00e8 un affare.\n *\/\n.yz-price.is-promo {\n    display: inline-flex;\n    align-items: baseline;\n    gap: 7px;\n    flex-wrap: wrap;\n}\n\n.yz-price-was {\n    color: var(--yz-soft);\n    font-weight: 400;\n    \/* Il barrato del browser \u00e8 sottile e su schermo si perde *\/\n    text-decoration: line-through 1.5px;\n    opacity: .75;\n}\n\n.yz-price-now {\n    color: #b4232a;\n    font-weight: 700;\n}\n\n.yz-price-off {\n    font-size: .72em;\n    font-weight: 700;\n    letter-spacing: .02em;\n    padding: 2px 6px;\n    border-radius: 999px;\n    background: #b4232a;\n    color: #fff;\n    white-space: nowrap;\n}\n\n\/*\n * Il conto alla rovescia va sotto il prezzo, non accanto: accanto\n * allunga la riga e su un telefono manda il prezzo a capo, che \u00e8\n * esattamente la cosa che non deve succedere.\n *\/\n.yz-countdown {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    margin-top: 4px;\n    font-size: 12px;\n    line-height: 1.3;\n    color: var(--yz-soft);\n    white-space: nowrap;\n}\n\n.yz-countdown-value {\n    font-variant-numeric: tabular-nums;\n    font-weight: 700;\n    color: var(--yz-ink);\n}\n\n\/* L'ultima ora si fa notare: \u00e8 quando il conto serve a qualcosa *\/\n.yz-countdown.is-urgent .yz-countdown-value { color: #b4232a; }\n\n.yz-countdown.is-over .yz-countdown-label { display: none; }\n.yz-countdown.is-over .yz-countdown-value { color: var(--yz-soft); font-weight: 400; }\n\n\/* --- La legenda dei simboli --- *\/\n\n.yz-legend {\n    margin: 34px 0 0;\n    padding: 22px 20px;\n    border-radius: var(--yz-radius);\n    background: var(--yz-well);\n}\n\n.yz-legend-title {\n    margin: 0 0 14px;\n    font-family: var(--yz-display);\n    font-size: 15px;\n    font-weight: 700;\n    letter-spacing: .03em;\n    text-transform: uppercase;\n    color: var(--yz-soft);\n}\n\n\/*\n * A colonne che si adattano: su un telefono ne sta una, su un tavolo\n * tre. Con `auto-fill` e un minimo, senza media query da tenere\n * allineate a mano.\n *\/\n.yz-legend-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));\n    gap: 10px 18px;\n}\n\n.yz-legend-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 9px;\n    line-height: 1.35;\n}\n\n\/*\n * La misura base del simbolo, qui e non nel foglio di una pagina sola.\n *\n * Stava solo in `menu.css`. Sul delivery esisteva unicamente dentro\n * `.yd-product-allergens`, quindi nella legenda \u2014 che sta fuori da quel\n * contenitore \u2014 l'SVG restava senza dimensioni e spariva: si vedevano\n * le etichette e nessuna icona, cio\u00e8 una legenda che non spiega niente.\n *\n * Adesso il simbolo ha una misura ovunque venga messo; le due pagine\n * possono ancora ritoccarla dove serve.\n *\/\n.yz-allergen {\n    display: inline-flex;\n    width: 18px;\n    height: 18px;\n    color: var(--yz-soft);\n    \/* Il puntatore a domanda dice che c'\u00e8 un titolo da leggere: senza,\n       nessuno prova a passarci sopra *\/\n    cursor: help;\n}\n\n.yz-allergen svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n}\n\n.yz-legend-item .yz-allergen {\n    flex: 0 0 auto;\n    margin-top: 1px;\n}\n\n.yz-legend-text {\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n}\n\n.yz-legend-text em {\n    font-style: normal;\n    font-size: 12.5px;\n    color: var(--yz-soft);\n}\n\n.yz-legend-note {\n    margin: 16px 0 0;\n    font-size: 12.5px;\n    line-height: 1.55;\n    color: var(--yz-soft);\n}\n\n\/* ==================================================================\n * La fotografia di apertura di una categoria\n *\n * La foto si caricava gi\u00e0 dal pannello e non compariva da nessuna\n * parte. Adesso apre la sezione, e quando c'\u00e8 **sostituisce** il\n * titolo scritto invece di aggiungersi: leggere due volte lo stesso\n * nome \u00e8 la cosa che fa sembrare un sito fatto male.\n * ================================================================== *\/\n\n.yz-cat-hero {\n    position: relative;\n    display: flex;\n    align-items: flex-end;\n    \/*\n     * Alta quanto basta a far vedere il piatto, non tanto da spingere\n     * il men\u00f9 fuori dalla prima schermata: chi arriva deve vedere una\n     * foto **e** l'inizio dell'elenco, senn\u00f2 scrolla via senza guardare\n     * n\u00e9 l'una n\u00e9 l'altro.\n     *\/\n    min-height: 190px;\n    margin: 0 0 20px;\n    padding: 22px;\n    border-radius: var(--yz-radius);\n    overflow: hidden;\n    background-color: #1a1a1a;\n    background-size: cover;\n    background-position: center;\n}\n\n\/*\n * Il velo \u00e8 un elemento e non un filtro sull'immagine: un filtro\n * spegnerebbe anche il testo. Sfuma dal basso, dove sta la scritta,\n * verso l'alto, dove si guarda la foto.\n *\/\n.yz-cat-hero-veil {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, .12) 100%);\n}\n\n.yz-cat-hero-text {\n    position: relative;\n    max-width: 34rem;\n}\n\n.yz-cat-hero-name {\n    margin: 0;\n    font-family: var(--yz-display);\n    font-size: clamp(24px, 4vw, 34px);\n    font-weight: var(--yz-title-weight);\n    letter-spacing: var(--yz-title-spacing);\n    text-transform: var(--yz-title-transform);\n    line-height: 1.12;\n    \/* Bianco fisso e non la variabile del testo: sotto c'\u00e8 una foto,\n       non il fondo della pagina, e su una foto il colore del tema pu\u00f2\n       essere qualsiasi cosa *\/\n    color: #fff;\n    \/* L'ombra regge anche sulle foto chiarissime, dove il velo da solo\n       non basta *\/\n    text-shadow: 0 1px 12px rgba(0, 0, 0, .55);\n}\n\n.yz-cat-hero-note {\n    margin: 8px 0 0;\n    font-size: 15px;\n    line-height: 1.5;\n    color: rgba(255, 255, 255, .88);\n    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);\n}\n\n@media (max-width: 560px) {\n    .yz-cat-hero {\n        min-height: 150px;\n        padding: 18px;\n    }\n}\n\n@media print {\n    \/* Su carta la foto mangia il toner e non aggiunge niente: resta il\n       nome, che \u00e8 l'unica cosa che serve leggere *\/\n    .yz-cat-hero {\n        min-height: 0;\n        padding: 0;\n        background: none;\n        border-radius: 0;\n    }\n\n    .yz-cat-hero-veil { display: none; }\n    .yz-cat-hero-name,\n    .yz-cat-hero-note { color: #000; text-shadow: none; }\n}\n\n\/* L'account offerto dentro il modulo di prenotazione.\n\n   Riquadro leggero e non colorato: \u00e8 una cosa in pi\u00f9 che si pu\u00f2 fare,\n   non un passaggio da superare. Un blocco vistoso qui farebbe sembrare\n   obbligatorio registrarsi per prenotare, e non lo \u00e8. *\/\n.yummyit-account {\n    padding: 12px 14px;\n    border: 1px dashed #d6dae0;\n    border-radius: 8px;\n}\n\n.yummyit-account-password {\n    margin-top: 10px;\n}\n\n\/* \"con YummyIt\": la firma in fondo alle pagine che vede il cliente.\n\n   Piccola, grigia, centrata, sempre come ultima cosa. Il logo \u00e8 alto\n   quattordici pixel \u2014 l'altezza di una riga di testo \u2014 e non di pi\u00f9:\n   un marchio grosso sulla pagina di un ristorante fa sembrare la\n   pagina nostra e non sua, e il primo che se ne accorge \u00e8 il\n   ristoratore che paga. *\/\n.yz-firma {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    margin: 28px 0 0;\n    padding: 0 0 4px;\n    font-size: 11px;\n    line-height: 1;\n    color: #9aa5b1;\n    text-decoration: none;\n    \/* Smorzata finch\u00e9 non ci si passa sopra: chi legge la pagina non\n       deve inciampare in un secondo marchio *\/\n    opacity: .7;\n    transition: opacity .15s ease;\n}\n\n.yz-firma:hover,\n.yz-firma:focus {\n    opacity: 1;\n}\n\n\/*\n * Le misure del logo con `!important`, e qui serve davvero.\n *\n * Quasi tutti i temi scrivono `img { height: auto !important }` per\n * far stare le foto dentro le colonne. Quella riga vince sulla nostra,\n * e il logo \u2014 che il file lo porta a 480 pixel \u2014 usciva **gigante in\n * fondo al modulo**: la cosa pi\u00f9 vistosa della pagina, che \u00e8\n * esattamente il contrario di quello che deve essere.\n *\n * Anche `max-width`, per i temi che allargano le immagini invece di\n * restringerle.\n *\/\n.yz-firma img {\n    display: block !important;\n    height: 14px !important;\n    width: auto !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    border: 0 !important;\n    box-shadow: none !important;\n}\n\n\/* --- Esaurito ---------------------------------------------------- *\/\n\n\/* La fascetta di un piatto finito.\n\n   Sta nello strato comune perch\u00e9 la portano tutte e due le pagine \u2014 la\n   carta e il delivery \u2014 e una copia per foglio diverge alla prima\n   modifica: il giorno che cambia la parola, cambierebbe in una sola. *\/\n.yz-esaurito {\n    display: inline-block;\n    padding: 2px 8px;\n    border-radius: 999px;\n    background: #6b7280;\n    color: #fff;\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: .08em;\n    text-transform: uppercase;\n    line-height: 1.6;\n    vertical-align: middle;\n}\n\n\/* Il piatto esaurito resta leggibile ma spento: si deve capire che c'\u00e8\n   e che oggi non c'\u00e8, non farlo sparire \u2014 sparire era il difetto di\n   prima. Il testo resta pieno, cos\u00ec il nome si legge lo stesso. *\/\n.is-esaurito {\n    position: relative;\n    opacity: .55;\n}\n\n\/* Niente cursore da cosa cliccabile e nessun sollevamento al\n   passaggio: un piatto che reagisce al dito e poi non fa niente\n   sembra rotto *\/\n.is-esaurito,\n.is-esaurito * {\n    cursor: default;\n    pointer-events: none;\n}\n\n\/* La fascetta invece resta a piena tinta: \u00e8 l'unica cosa che deve\n   saltare all'occhio in un blocco smorzato *\/\n.is-esaurito .yz-esaurito {\n    opacity: 1;\n}\n<\/style><style>\/*\n * La carta del ristorante.\n *\n * Non somiglia al men\u00f9 del delivery, ed \u00e8 voluto: quello imita le app\n * di consegna perch\u00e9 l\u00ec si ordina e la foto vende, questa si legge.\n *\n * Tutto quello che cambia fra un pub e un ristorante di livello sta\n * nelle variabili di styles.css. Qui c'\u00e8 solo la disposizione, che \u00e8 la\n * stessa per tutti e quattro.\n *\/\n\n.ym {\n    \/*\n     * Il fondo copre tutta la pagina, la lettura resta in colonna.\n     *\n     * Prima erano la stessa cosa, e con lo stile scuro il risultato era\n     * una striscia nera incollata in mezzo al grigio del tema: sembrava\n     * un ritaglio, non una pagina. Il fondo di un men\u00f9 \u00e8 met\u00e0 del men\u00f9,\n     * e deve arrivare ai bordi dello schermo.\n     *\n     * Si allarga quanto la finestra e si riporta indietro della met\u00e0\n     * della differenza: funziona dentro qualsiasi contenitore, anche\n     * annidato, senza sapere quanto \u00e8 largo.\n     *\/\n    width: 100vw;\n    max-width: 100vw;\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n    padding: 0;\n\n    background: var(--yz-page);\n\n    font-family: var(--yz-font);\n    font-size: var(--yz-body-size);\n    line-height: 1.55;\n    color: var(--yz-ink);\n    text-align: left;\n    -webkit-font-smoothing: antialiased;\n}\n\n\/* La colonna di lettura: larga quanto basta a leggere una riga *\/\n.ym-inner {\n    max-width: 900px;\n    margin: 0 auto;\n    padding: 52px 26px 60px;\n}\n\n@media (max-width: 640px) {\n    .ym-inner { padding: 30px 18px 40px; }\n}\n\n\/*\n * Il tema non deve entrare.\n *\n * Questo blocco era stato indebolito per lasciare che fossero gli stili\n * a decidere carattere e maiuscolo. \u00c8 stato un errore: togliendo le\n * difese non ha deciso lo stile, ha deciso il tema. Su Breakdance il\n * nome del ristorante usciva nel carattere decorativo arancione del\n * sito e i piatti tutti in maiuscolo, identici in tutti e quattro gli\n * stili \u2014 che era esattamente il problema che gli stili dovevano\n * risolvere.\n *\n * Ora i valori li impongono le variabili: `!important` vince sul tema,\n * e la variabile vince fra uno stile e l'altro.\n *\/\n.ym,\n.ym h2,\n.ym p,\n.ym span,\n.ym a,\n.ym li,\n.ym div {\n    font-family: var(--yz-font) !important;\n    font-style: normal !important;\n    text-shadow: none !important;\n    text-transform: none !important;\n    letter-spacing: normal !important;\n    color: inherit;\n}\n\n.ym h2 {\n    padding: 0;\n    color: var(--yz-ink) !important;\n}\n\n.ym ul {\n    list-style: none !important;\n    margin: 0;\n    padding: 0;\n}\n\n.ym li::before,\n.ym li::marker { content: none !important; }\n\n\/* ------------------------------------------------------------------ *\/\n\/* L'intestazione                                                      *\/\n\n\/*\n * Il nome del ristorante in cima alla carta. Non \u00e8 un doppione del\n * titolo della pagina: quello lo scrive il tema, e su una pagina a\n * tutta larghezza spesso non c'\u00e8 affatto.\n *\/\n.ym-head {\n    text-align: center;\n    padding: 0 0 34px;\n    margin-bottom: var(--yz-section-gap);\n    border-bottom: var(--yz-title-rule);\n}\n\n.ym-logo {\n    display: block;\n    max-height: 96px;\n    max-width: 280px;\n    width: auto !important;\n    height: auto !important;\n    margin: 0 auto 20px;\n}\n\n.ym-title {\n    margin: 0 !important;\n    font-family: var(--yz-display) !important;\n    font-size: clamp(28px, calc(var(--yz-title-size) * 1.7), 46px) !important;\n    font-weight: var(--yz-title-weight) !important;\n    letter-spacing: var(--yz-title-spacing) !important;\n    text-transform: var(--yz-title-transform) !important;\n    line-height: 1.15 !important;\n}\n\n.ym-tag {\n    margin: 10px 0 0 !important;\n    color: var(--yz-soft) !important;\n    font-size: var(--yz-body-size) !important;\n}\n\n\/* ------------------------------------------------------------------ *\/\n\/* Indice                                                              *\/\n\n\/* La navigazione resta attaccata in alto scorrendo, come nel delivery.\n\n   Su una carta lunga si scorre fino alla fine dei secondi e poi si\n   vuole saltare ai dolci: senza questa riga bisogna risalire fino in\n   cima, e chi legge dal telefono a tavola non lo fa \u2014 chiude.\n\n   `flex-wrap: nowrap` e lo scorrimento di lato: appiccicata in alto,\n   una fila che va a capo su tre righe si mangerebbe meta schermo.\n   Sotto invece resta a capo, perche li lo spazio c e. *\/\n.ym-index {\n    position: sticky;\n    top: 0;\n    z-index: 20;\n    display: flex;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: 7px;\n    margin: 0 0 var(--yz-section-gap);\n    padding: 10px 0;\n    overflow-x: auto;\n    scrollbar-width: none;\n    background: var(--yz-page);\n    border-bottom: var(--yz-rule);\n}\n\n\/* La barra di scorrimento non si mostra: e una fila di pastiglie, si\n   capisce da sola che si trascina *\/\n.ym-index::-webkit-scrollbar { display: none; }\n\n\/* Le pastiglie non si schiacciano per stare in riga *\/\n.ym-index a { flex: 0 0 auto; }\n\n@media (min-width: 720px) {\n    \/* Su schermo largo torna centrata e a capo: lo spazio c e, e una\n       fila che scorre di lato su un monitor e scomoda col mouse *\/\n    .ym-index {\n        flex-wrap: wrap;\n        justify-content: center;\n        overflow-x: visible;\n    }\n}\n\n.ym-index a {\n    padding: 6px 14px;\n    border: var(--yz-rule);\n    border-radius: 999px;\n    color: var(--yz-soft) !important;\n    text-decoration: none !important;\n    font-size: 14px;\n    line-height: 1.3;\n    transition: color .15s ease, border-color .15s ease;\n}\n\n.ym-index a:hover {\n    border-color: var(--yz-accent);\n    color: var(--yz-accent) !important;\n}\n\n\/* ------------------------------------------------------------------ *\/\n\/* Sezioni                                                             *\/\n\n.ym-category { margin: 0 0 var(--yz-section-gap); }\n\n\/*\n * Il titolo della sezione al centro, con un filo che lo attraversa.\n * Costa tre righe di flex e fa pi\u00f9 della met\u00e0 del lavoro: \u00e8 quello che\n * distingue una carta da un elenco di prodotti.\n *\/\n.ym-category-name {\n    display: flex;\n    align-items: center;\n    gap: 18px;\n    margin: 0 0 10px !important;\n\n    font-family: var(--yz-display) !important;\n    font-size: var(--yz-title-size) !important;\n    font-weight: var(--yz-title-weight) !important;\n    letter-spacing: var(--yz-title-spacing) !important;\n    text-transform: var(--yz-title-transform) !important;\n    line-height: 1.25 !important;\n    color: var(--yz-ink) !important;\n}\n\n.ym-category-name::before,\n.ym-category-name::after {\n    content: '';\n    flex: 1 1 auto;\n    height: 1px;\n    background: var(--yz-line);\n}\n\n.ym-category-note {\n    margin: 0 0 4px !important;\n    text-align: center;\n    color: var(--yz-soft) !important;\n    font-size: var(--yz-body-size) !important;\n}\n\n\/* ------------------------------------------------------------------ *\/\n\/* Piatti                                                              *\/\n\n.ym-items { margin-top: 26px !important; }\n\n.ym-item {\n    display: flex;\n    gap: 16px;\n    padding: 0 0 var(--yz-rhythm);\n    margin-bottom: var(--yz-rhythm);\n    border-bottom: var(--yz-rule);\n}\n\n.ym-item:last-child {\n    border-bottom: 0;\n    margin-bottom: 0;\n    padding-bottom: 0;\n}\n\n.ym-text { flex: 1 1 auto; min-width: 0; }\n\n\/*\n * La foto \u00e8 piccola e sta a sinistra: su una carta \u00e8 un dettaglio, non\n * il richiamo. Le misure sull'immagine servono contro i temi che\n * scrivono `height: auto !important` su ogni img.\n *\n * La colonna della foto resta anche quando la foto non c'\u00e8.\n *\n * Senza, in un elenco dove due piatti hanno la foto e il terzo no, il\n * terzo partiva dal bordo mentre gli altri erano rientrati: tre nomi su\n * due allineamenti diversi, che \u00e8 la cosa che si nota per prima\n * guardando un men\u00f9 senza saper dire perch\u00e9 non va.\n *\/\n.ym-item:not(.has-photo) .ym-text {\n    margin-left: calc(var(--yz-photo-size, 88px) + 16px);\n}\n\n.ym-photo {\n    flex: 0 0 auto;\n    width: var(--yz-photo-size, 88px);\n    height: var(--yz-photo-size, 88px);\n    border-radius: var(--yz-radius-small);\n    overflow: hidden;\n    background: var(--yz-well);\n}\n\n.ym-photo img {\n    width: 100% !important;\n    height: 100% !important;\n    max-width: none !important;\n    object-fit: cover;\n    display: block;\n    margin: 0 !important;\n    border-radius: 0 !important;\n}\n\n\/*\n * Nome, filo, prezzo. Il filo \u00e8 un fondo ripetuto e non dei caratteri:\n * cos\u00ec non finisce letto ad alta voce da uno screen reader, e non si\n * copia insieme al nome del piatto.\n *\/\n.ym-line {\n    display: flex;\n    align-items: baseline;\n    gap: 8px;\n    margin: 0 !important;\n    font-size: var(--yz-item-size) !important;\n    line-height: 1.35 !important;\n}\n\n.ym-name {\n    flex: 0 1 auto;\n    font-family: var(--yz-item-font, var(--yz-font)) !important;\n    font-weight: var(--yz-item-weight);\n    text-transform: var(--yz-item-transform, none) !important;\n    letter-spacing: var(--yz-item-spacing, normal) !important;\n}\n\n.ym-dots {\n    flex: 1 1 auto;\n    min-width: 18px;\n    height: 1px;\n    align-self: flex-end;\n    margin-bottom: 5px;\n    background-image: var(--yz-leader);\n    background-size: var(--yz-leader-size);\n    background-repeat: repeat-x;\n    background-position: bottom;\n}\n\n.ym-price {\n    flex: 0 0 auto;\n    font-weight: var(--yz-item-weight);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n}\n\n.ym-desc {\n    margin: 5px 0 0 !important;\n    color: var(--yz-soft) !important;\n    font-size: var(--yz-body-size) !important;\n    line-height: 1.5 !important;\n}\n\n.ym-allergens {\n    margin: 6px 0 0 !important;\n    font-size: 13px !important;\n    color: var(--yz-soft) !important;\n}\n\n.ym-allergens span { font-weight: 600; }\n\n\/* ------------------------------------------------------------------ *\/\n\/* In fondo                                                            *\/\n\n.ym-cta {\n    margin: calc(var(--yz-section-gap) * .8) 0 0 !important;\n    text-align: center;\n}\n\n.ym-btn {\n    display: inline-block;\n    padding: 15px 34px;\n    border-radius: 999px;\n    background: var(--yz-accent);\n    color: var(--yz-on-accent) !important;\n    text-decoration: none !important;\n    font-size: 16px;\n    font-weight: 600;\n    letter-spacing: .01em;\n}\n\n.ym-foot {\n    margin: 30px 0 0 !important;\n    padding-top: 18px;\n    border-top: var(--yz-rule);\n    text-align: center;\n    color: var(--yz-soft) !important;\n    font-size: 13px !important;\n}\n\n.ym-admin-note {\n    margin-top: 10px !important;\n    padding: 11px 13px;\n    background: #fff8e6;\n    border-left: 3px solid #d9a300;\n    color: #6b5300 !important;\n    font-size: 14px !important;\n}\n\n.ym-empty { padding: 22px 0; }\n\n\/* ------------------------------------------------------------------ *\/\n\/* Telefono                                                            *\/\n\n@media (max-width: 560px) {\n    .ym-photo { width: 66px; height: 66px; }\n\n    \/*\n     * Sotto una certa larghezza il filo non ha pi\u00f9 spazio e il prezzo\n     * finisce appiccicato al nome: meglio mandarlo a capo.\n     *\/\n    .ym-line { flex-wrap: wrap; }\n\n    .ym-dots { display: none; }\n\n    .ym-price { margin-left: auto; }\n\n    .ym-category-name::before { display: none; }\n}\n\n\/* ------------------------------------------------------------------ *\/\n\/* Sulla carta                                                         *\/\n\n\/*\n * Un ristorante la carta la stampa. Il tema intorno non si pu\u00f2\n * nascondere \u2014 header e footer non sono nostri \u2014 ma la parte che \u00e8\n * nostra esce leggibile: nero su bianco, foto via (in stampa sono\n * macchie grigie), nessun piatto tagliato fra due pagine.\n *\/\n@media print {\n    .ym {\n        max-width: none;\n        color: #000;\n        font-size: 12pt;\n        background: #fff;\n    }\n\n    .ym-photo,\n    .ym-index,\n    .ym-cta { display: none !important; }\n\n    .ym-item { break-inside: avoid; page-break-inside: avoid; }\n\n    .ym-category-name { break-after: avoid; page-break-after: avoid; }\n\n    .ym-desc,\n    .ym-allergens,\n    .ym-category-note,\n    .ym-tag,\n    .ym-foot { color: #333 !important; }\n\n    .ym-item,\n    .ym-foot { border-color: #bbb; }\n\n    .ym-head { border-bottom-color: #000; }\n}\n\n\/* ================================================================== *\/\n\/* Quello che cambia davvero fra uno stile e l'altro                   *\/\n\n\/*\n * Le variabili non bastavano.\n *\n * Con i soli colori e le sole misure i quattro stili si somigliavano\n * tutti: la stessa carta con caratteri leggermente diversi. Quello che\n * distingue una carta da pub da una da ristorante di livello \u00e8\n * l'impianto \u2014 dove sta il titolo, se ci sono le foto, come \u00e8 scritto\n * il prezzo \u2014 e l'impianto va scritto, non parametrizzato.\n *\n * Quindi qui ci sono quattro blocchi di regole vere. Aggiungerne un\n * quinto adesso costa pi\u00f9 di prima, ed \u00e8 il prezzo giusto da pagare:\n * quattro stili diversi valgono pi\u00f9 di dodici che si assomigliano.\n *\/\n\n\/* ------------------------------------------------------------------ *\/\n\/* Elegante: la carta di un ristorante che non ha bisogno di foto      *\/\n\n\/*\n * Le foto spariscono. Non \u00e8 una dimenticanza: un ristorante di livello\n * la foto del piatto non la mette, perch\u00e9 la fotografia anticipa\n * un'attesa precisa e in una cucina di quel tipo il piatto cambia con\n * la stagione. \u00c8 la differenza pi\u00f9 forte fra questo stile e gli altri\n * tre, e si vede al primo sguardo.\n *\/\n.is-elegante .ym-photo { display: none; }\n\n.is-elegante .ym-item:not(.has-photo) .ym-text { margin-left: 0; }\n\n.is-elegante .ym-head {\n    border-bottom: 0;\n    padding-bottom: 8px;\n}\n\n\/* Un filo corto sotto il nome, invece di una riga da parte a parte *\/\n.is-elegante .ym-head::after {\n    content: '';\n    display: block;\n    width: 54px;\n    height: 1px;\n    margin: 22px auto 0;\n    background: var(--yz-accent-alt);\n}\n\n\/* Il titolo di sezione senza fili laterali, staccato dal bianco *\/\n.is-elegante .ym-category-name {\n    justify-content: center;\n    margin-bottom: 20px !important;\n}\n\n.is-elegante .ym-category-name::before,\n.is-elegante .ym-category-name::after { display: none; }\n\n\/* Nessuna riga fra un piatto e l'altro: li separa lo spazio *\/\n.is-elegante .ym-item { border-bottom: 0; }\n\n.is-elegante .ym-line { gap: 20px; }\n\n.is-elegante .ym-price { color: var(--yz-soft); }\n\n.is-elegante .ym-desc { font-style: italic !important; }\n\n\/* ------------------------------------------------------------------ *\/\n\/* Trattoria: la tovaglietta                                           *\/\n\n\/*\n * Il titolo di sezione diventa un cartellino a sinistra, come il\n * timbro su una tovaglietta stampata. Niente centro: qui l'ordine \u00e8\n * quello di una lavagna, non di un libro.\n *\/\n.is-trattoria .ym-category-name {\n    display: inline-flex;\n    gap: 0;\n    padding: 7px 18px !important;\n    margin-bottom: 18px !important;\n    border: 2px solid var(--yz-accent-alt);\n    border-radius: 999px;\n    color: var(--yz-accent-alt) !important;\n}\n\n.is-trattoria .ym-category-name::before,\n.is-trattoria .ym-category-name::after { display: none; }\n\n.is-trattoria .ym-category-note { text-align: left; }\n\n\/* Le foto pi\u00f9 tonde e un filo pi\u00f9 grandi: qui il piatto si mostra *\/\n.is-trattoria { --yz-photo-size: 96px; }\n\n.is-trattoria .ym-photo { border-radius: 14px; }\n\n.is-trattoria .ym-head {\n    padding-bottom: 22px;\n    border-bottom-width: 3px;\n}\n\n.is-trattoria .ym-price { color: var(--yz-accent-alt); }\n\n\/* ------------------------------------------------------------------ *\/\n\/* Pub: la lavagna                                                     *\/\n\n\/*\n * Il titolo di sezione \u00e8 una fascia piena che attraversa la colonna.\n * Su fondo scuro un titolo sottile si perde, e una fascia si legge da\n * tre metri \u2014 che \u00e8 la distanza da cui si guarda un men\u00f9 appeso.\n *\/\n.is-pub .ym-category-name {\n    display: block;\n    padding: 9px 16px !important;\n    margin-bottom: 20px !important;\n    background: var(--yz-accent-alt);\n    color: var(--yz-on-accent) !important;\n    border-radius: var(--yz-radius-small);\n}\n\n.is-pub .ym-category-name::before,\n.is-pub .ym-category-name::after { display: none; }\n\n.is-pub .ym-category-note { text-align: left; }\n\n\/* Foto squadrate: gli angoli tondi ammorbidiscono, e qui non serve *\/\n.is-pub { --yz-photo-size: 78px; }\n\n.is-pub .ym-photo { border-radius: 0; }\n\n\/* Il prezzo in un cartellino, come sul listino di un banco *\/\n.is-pub .ym-price {\n    padding: 2px 9px;\n    border: 1px solid var(--yz-line);\n    border-radius: 4px;\n    background: var(--yz-well);\n}\n\n.is-pub .ym-head { padding-bottom: 20px; }\n\n.is-pub .ym-index a { background: var(--yz-card); }\n\n\/* ------------------------------------------------------------------ *\/\n\/* Moderno: schede staccate                                            *\/\n\n\/*\n * Ogni piatto \u00e8 una scheda con il suo fondo, come nelle app. \u00c8 lo\n * stile che assomiglia di pi\u00f9 al delivery, ed \u00e8 coerente: chi lo\n * sceglie ha un locale nato dopo le app di consegna.\n *\/\n.is-moderno .ym-item {\n    padding: 14px;\n    border: 1px solid var(--yz-line);\n    border-radius: var(--yz-radius);\n    background: var(--yz-card);\n    margin-bottom: 10px;\n}\n\n.is-moderno .ym-item:last-child { padding: 14px; }\n\n.is-moderno .ym-category-name {\n    justify-content: flex-start;\n    gap: 0;\n}\n\n.is-moderno .ym-category-name::before { display: none; }\n\n.is-moderno .ym-category-name::after { margin-left: 16px; }\n\n.is-moderno .ym-category-note { text-align: left; }\n\n.is-moderno .ym-index { justify-content: flex-start; }\n\n\/* ------------------------------------------------------------------ *\/\n\/* In evidenza                                                         *\/\n\n\/*\n * La fascia in cima. Compare solo se c'\u00e8 qualcosa dentro \u2014 quello lo\n * decide il PHP \u2014 e usa il colore secondario del ristorante, cos\u00ec si\n * stacca dal resto della carta senza litigarci.\n *\/\n.ym-featured {\n    margin: 0 0 var(--yz-section-gap);\n    padding: 22px;\n    border-radius: var(--yz-radius);\n    background: var(--yz-well);\n    border: 1px solid var(--yz-line);\n}\n\n.ym-featured-list {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n    gap: 18px;\n    margin: 0 !important;\n}\n\n.ym-featured-item { min-width: 0; }\n\n.ym-featured-photo {\n    width: 100%;\n    aspect-ratio: 4 \/ 3;\n    border-radius: var(--yz-radius-small);\n    overflow: hidden;\n    background: var(--yz-card);\n    margin-bottom: 10px;\n}\n\n.ym-featured-photo img {\n    width: 100% !important;\n    height: 100% !important;\n    max-width: none !important;\n    object-fit: cover;\n    display: block;\n    margin: 0 !important;\n    border-radius: 0 !important;\n}\n\n.ym-featured-name {\n    margin: 6px 0 0 !important;\n    font-family: var(--yz-item-font, var(--yz-font)) !important;\n    font-size: var(--yz-item-size) !important;\n    font-weight: var(--yz-item-weight) !important;\n    text-transform: var(--yz-item-transform, none) !important;\n    line-height: 1.3 !important;\n}\n\n.ym-featured-price {\n    margin: 3px 0 0 !important;\n    font-weight: var(--yz-item-weight);\n    font-variant-numeric: tabular-nums;\n    color: var(--yz-soft) !important;\n}\n\n\/*\n * L'etichetta. Piccola e in maiuscoletto: deve dire \"guarda qui\" senza\n * gridare, perch\u00e9 su una carta il grido lo si legge una volta sola e\n * poi si smette di vederlo.\n *\/\n.ym-tagline {\n    display: inline-block;\n    padding: 2px 8px;\n    border-radius: 999px;\n    background: var(--yz-accent-alt);\n    color: var(--yz-on-accent) !important;\n    font-size: 11px !important;\n    font-weight: 700;\n    text-transform: uppercase !important;\n    letter-spacing: .06em !important;\n    line-height: 1.7;\n    white-space: nowrap;\n    vertical-align: middle;\n}\n\n\/* ------------------------------------------------------------------ *\/\n\/* Icone degli allergeni                                               *\/\n\n\/*\n * Piccole e discrete, in fila con la nota scritta a mano. Non sono un\n * avvertimento da mettere in rosso: sono un'informazione che chi la\n * cerca trova, e chi non ne ha bisogno non deve leggere.\n *\/\n.ym-allergens {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    flex-wrap: wrap;\n    margin: 7px 0 0 !important;\n    font-size: 13px !important;\n    color: var(--yz-soft) !important;\n}\n\n\/*\n * La misura del simbolo sta in `styles.css`, il foglio che le due\n * pagine hanno in comune: stava qui, e sul delivery la legenda usciva\n * senza icone.\n *\/\n\n\/* La nota a mano si stacca dalle icone *\/\n.ym-allergens span { margin-left: 2px; }\n\n@media print {\n    .ym-featured { border-color: #bbb; background: transparent; }\n\n    .ym-featured-photo { display: none !important; }\n\n    \/* Su carta il fondo colorato dell'etichetta esce come una macchia:\n       meglio il contorno *\/\n    .ym-tagline {\n        background: transparent;\n        color: #000 !important;\n        border: 1px solid #666;\n    }\n}\n\n\/* ------------------------------------------------------------------ *\/\n\/* I cartellini dei piatti in evidenza                                 *\/\n\n\/*\n * Tre cose diverse, e devono sembrare tre cose diverse.\n *\n *  - **In promozione** parla di soldi: \u00e8 un'etichetta appiccicata\n *    sopra, come il cartellino di un ribasso\n *  - **Il pi\u00f9 scelto** \u00e8 il giudizio degli altri clienti: pieno,\n *    solido, con la stellina\n *  - **Lo consigliamo** \u00e8 la voce della casa: sobrio, di contorno,\n *    perch\u00e9 \u00e8 un consiglio e non un annuncio\n *\n * Prima erano tutti e tre la stessa pillola colorata, e allora tanto\n * valeva scrivere \"in evidenza\" tre volte.\n *\/\n.ym-tagline::before {\n    margin-right: 5px;\n    font-weight: 700;\n}\n\n.ym-tagline-promo {\n    background: #c0392b !important;\n    color: #fff !important;\n    border-radius: 3px;\n    \/* Spigolo tagliato: il cartellino del prezzo strappato *\/\n    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);\n    padding-right: 13px;\n}\n\n.ym-tagline-promo::before { content: '%'; }\n\n.ym-tagline-popular {\n    background: var(--yz-accent) !important;\n    color: var(--yz-on-accent) !important;\n}\n\n.ym-tagline-popular::before { content: '\\2605'; }\n\n\/* Il consiglio della casa non urla: contorno, non pieno *\/\n.ym-tagline-chef {\n    background: transparent !important;\n    color: var(--yz-ink) !important;\n    border: 1px solid currentColor;\n    opacity: .75;\n}\n\n.ym-tagline-chef::before { content: '\\270E'; }\n\n\/* --- Elegante: niente pillole, il men\u00f9 si legge piano --- *\/\n\n.is-elegante .ym-tagline,\n.is-elegante .ym-tagline-promo,\n.is-elegante .ym-tagline-popular,\n.is-elegante .ym-tagline-chef {\n    background: transparent !important;\n    border: 0;\n    border-bottom: 1px solid currentColor;\n    border-radius: 0;\n    clip-path: none;\n    padding: 0 0 1px;\n    opacity: 1;\n    letter-spacing: .18em !important;\n    font-weight: 400;\n    font-size: 10px !important;\n}\n\n.is-elegante .ym-tagline-promo { color: #8a2f24 !important; }\n.is-elegante .ym-tagline-popular { color: var(--yz-accent) !important; }\n\/* `--yz-muted` non e mai esistita: questa riga veniva buttata via\n   intera dal browser, quindi il consiglio della casa restava del\n   colore del testo invece che smorzato. La variabile giusta si\n   chiama `--yz-soft`, ed e definita in ogni stile. *\/\n.is-elegante .ym-tagline-chef { color: var(--yz-soft) !important; }\n\n\/* --- Trattoria: sembra un timbro messo a mano --- *\/\n\n.is-trattoria .ym-tagline {\n    border-radius: 2px;\n    clip-path: none;\n    padding: 2px 7px;\n    \/* Storto di un grado: il timbro non lo mette nessuno dritto *\/\n    transform: rotate(-1.2deg);\n    font-weight: 700;\n}\n\n.is-trattoria .ym-tagline-promo {\n    background: transparent !important;\n    color: #b03a2e !important;\n    border: 2px solid currentColor;\n}\n\n.is-trattoria .ym-tagline-popular {\n    background: transparent !important;\n    color: var(--yz-accent) !important;\n    border: 2px solid currentColor;\n}\n\n.is-trattoria .ym-tagline-chef {\n    border: 1px dashed currentColor;\n    transform: rotate(.8deg);\n}\n\n\/* --- Pub: grosso e senza mezze misure --- *\/\n\n.is-pub .ym-tagline {\n    border-radius: 0;\n    clip-path: none;\n    padding: 3px 9px;\n    font-weight: 800;\n    letter-spacing: .1em !important;\n    font-size: 10px !important;\n}\n\n.is-pub .ym-tagline-promo {\n    background: #e8b021 !important;\n    color: #1b1b1b !important;\n}\n\n.is-pub .ym-tagline-chef {\n    background: transparent !important;\n    border: 2px solid currentColor;\n    opacity: 1;\n}\n\n\/* --- La scheda di un piatto ------------------------------------- *\/\n\n\/* Si apre solo quando c'\u00e8 qualcosa da vedere: una foto grande, o una\n   descrizione che sulla riga starebbe stretta. *\/\n.ym-scheda {\n    width: min(92vw, 420px);\n    max-height: 88vh;\n    padding: 0;\n    border: 0;\n    border-radius: var(--yz-radius);\n    background: var(--yz-card);\n    color: var(--yz-ink);\n    overflow: auto;\n}\n\n.ym-scheda::backdrop {\n    background: rgba(12, 14, 18, .55);\n}\n\n\/* La chiusura galleggia sopra la foto: dentro il flusso spingerebbe\n   gi\u00f9 l'immagine, che \u00e8 la cosa per cui la scheda si \u00e8 aperta *\/\n.ym-scheda-chiudi {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    justify-content: flex-end;\n    height: 0;\n}\n\n.ym-scheda-chiudi button {\n    margin: 8px;\n    width: 34px;\n    height: 34px;\n    border: 0;\n    border-radius: 999px;\n    background: rgba(12, 14, 18, .55);\n    color: #fff;\n    font-size: 22px;\n    line-height: 1;\n    cursor: pointer;\n}\n\n\/* Qui la foto \u00e8 grande: \u00e8 il motivo per cui si apre la scheda *\/\n.ym-scheda-foto {\n    display: block;\n    width: 100%;\n    height: auto;\n    max-height: 46vh;\n    object-fit: cover;\n}\n\n.ym-scheda-testo {\n    padding: 18px 20px 22px;\n}\n\n.ym-scheda-nome {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n    margin: 0 0 4px;\n    font-family: var(--yz-display);\n    font-size: 20px;\n}\n\n.ym-scheda-prezzo {\n    margin: 0 0 12px;\n    font-weight: 600;\n}\n\n.ym-scheda-desc {\n    margin: 0 0 12px;\n    color: var(--yz-soft);\n    line-height: 1.55;\n}\n\n\/*\n * Gli ingredienti sono un'etichetta, non un racconto: pi\u00f9 piccoli\n * della descrizione, cos\u00ec si distinguono senza doverli leggere.\n *\/\n.ym-scheda-ingredienti {\n    margin: 0 0 12px;\n    font-size: 13px;\n    color: var(--yz-soft);\n    line-height: 1.55;\n}\n\n.ym-scheda-allergeni {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--yz-soft);\n}\n\n\/* La riga che si pu\u00f2 aprire lo dice col cursore e con un cenno al\n   passaggio: senza, nessuno prova a toccarla *\/\n.ym-item.is-apribile {\n    cursor: pointer;\n}\n\n.ym-item.is-apribile:hover .ym-name,\n.ym-item.is-apribile:focus-visible .ym-name {\n    text-decoration: underline;\n    text-underline-offset: 3px;\n}\n<\/style>\n<div class=\"ym yummyit-style is-moderno\"\n     style=\"--yz-accent: #1f2933; --yz-on-accent: #ffffff; --yz-accent-alt: #1f2933;\">\n<div class=\"ym-inner\">\n\n    <header class=\"ym-head\">\n        \n        <h2 class=\"ym-title\">My Blog<\/h2>\n\n            <\/header>\n\n    \n    \n            <section class=\"ym-category\" id=\"ym-cat-2\">\n                            <h2 class=\"ym-category-name\">Pizze<\/h2>\n\n                            \n            <ul class=\"ym-items\">\n                                    <li class=\"ym-item is-apribile\"\n                                                    data-scheda=\"1\"\n                            tabindex=\"0\" role=\"button\"\n                            aria-label=\"Apri Margherita\"\n                        >\n                        \n                        \n                        <div class=\"ym-text\">\n                                                        <p class=\"ym-line\">\n                                <span class=\"ym-name\">Margherita<\/span>\n\n                                \n                                <span class=\"ym-dots\" aria-hidden=\"true\"><\/span>\n                                \n\n    <span class=\"yz-price\">7,00 \u20ac<\/span>\n\n                            <\/p>\n\n                                                            <p class=\"ym-desc\">Fior di latte, pomodoro San Marzano, olio EVO<\/p>\n                            \n                                                    <\/div>\n                    <\/li>\n                            <\/ul>\n        <\/section>\n    \n            <p class=\"ym-cta\">\n            <a class=\"ym-btn\" href=\"https:\/\/www.soluzionemenu.it\/prenota\/delivery\/\">\n                Ordina a domicilio            <\/a>\n        <\/p>\n    \n    \n    <p class=\"ym-foot\">\n        Prezzi in vigore alla data odierna.    <\/p>\n\n\n\n                    <dialog class=\"ym-scheda\" id=\"ym-scheda-1\">\n            <form method=\"dialog\" class=\"ym-scheda-chiudi\">\n                <button aria-label=\"Chiudi\">&times;<\/button>\n            <\/form>\n\n            \n            <div class=\"ym-scheda-testo\">\n                <h3 class=\"ym-scheda-nome\">\n                    Margherita\n                                    <\/h3>\n\n                <p class=\"ym-scheda-prezzo\">\n\n    <span class=\"yz-price\">7,00 \u20ac<\/span>\n\n<\/p>\n\n                                    <p class=\"ym-scheda-desc\">Fior di latte, pomodoro San Marzano, olio EVO<\/p>\n                \n                \n                            <\/div>\n        <\/dialog>\n    \n    <a class=\"yz-firma\" href=\"https:\/\/yummyit.app\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span>con<\/span><img src=\"https:\/\/www.soluzionemenu.it\/prenota\/wp-content\/plugins\/YummyIt\/assets\/brand\/yummyit.webp\" alt=\"YummyIt\" width=\"48\" height=\"14\" loading=\"lazy\" decoding=\"async\"><\/a><\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"yummyit-wide","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.soluzionemenu.it\/prenota\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.soluzionemenu.it\/prenota\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.soluzionemenu.it\/prenota\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.soluzionemenu.it\/prenota\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.soluzionemenu.it\/prenota\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":0,"href":"https:\/\/www.soluzionemenu.it\/prenota\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.soluzionemenu.it\/prenota\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}