/*
 * La carta del ristorante.
 *
 * Non somiglia al menù del delivery, ed è voluto: quello imita le app
 * di consegna perché lì si ordina e la foto vende, questa si legge.
 *
 * Tutto quello che cambia fra un pub e un ristorante di livello sta
 * nelle variabili di styles.css. Qui c'è solo la disposizione, che è la
 * stessa per tutti e quattro.
 */

.ym {
    /*
     * Il fondo copre tutta la pagina, la lettura resta in colonna.
     *
     * Prima erano la stessa cosa, e con lo stile scuro il risultato era
     * una striscia nera incollata in mezzo al grigio del tema: sembrava
     * un ritaglio, non una pagina. Il fondo di un menù è metà del menù,
     * e deve arrivare ai bordi dello schermo.
     *
     * Si allarga quanto la finestra e si riporta indietro della metà
     * della differenza: funziona dentro qualsiasi contenitore, anche
     * annidato, senza sapere quanto è largo.
     */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;

    background: var(--yz-page);

    font-family: var(--yz-font);
    font-size: var(--yz-body-size);
    line-height: 1.55;
    color: var(--yz-ink);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* La colonna di lettura: larga quanto basta a leggere una riga */
.ym-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 52px 26px 60px;
}

@media (max-width: 640px) {
    .ym-inner { padding: 30px 18px 40px; }
}

/*
 * Il tema non deve entrare.
 *
 * Questo blocco era stato indebolito per lasciare che fossero gli stili
 * a decidere carattere e maiuscolo. È stato un errore: togliendo le
 * difese non ha deciso lo stile, ha deciso il tema. Su Breakdance il
 * nome del ristorante usciva nel carattere decorativo arancione del
 * sito e i piatti tutti in maiuscolo, identici in tutti e quattro gli
 * stili — che era esattamente il problema che gli stili dovevano
 * risolvere.
 *
 * Ora i valori li impongono le variabili: `!important` vince sul tema,
 * e la variabile vince fra uno stile e l'altro.
 */
.ym,
.ym h2,
.ym p,
.ym span,
.ym a,
.ym li,
.ym div {
    font-family: var(--yz-font) !important;
    font-style: normal !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: inherit;
}

.ym h2 {
    padding: 0;
    color: var(--yz-ink) !important;
}

.ym ul {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.ym li::before,
.ym li::marker { content: none !important; }

/* ------------------------------------------------------------------ */
/* L'intestazione                                                      */

/*
 * Il nome del ristorante in cima alla carta. Non è un doppione del
 * titolo della pagina: quello lo scrive il tema, e su una pagina a
 * tutta larghezza spesso non c'è affatto.
 */
.ym-head {
    text-align: center;
    padding: 0 0 34px;
    margin-bottom: var(--yz-section-gap);
    border-bottom: var(--yz-title-rule);
}

.ym-logo {
    display: block;
    max-height: 96px;
    max-width: 280px;
    width: auto !important;
    height: auto !important;
    margin: 0 auto 20px;
}

.ym-title {
    margin: 0 !important;
    font-family: var(--yz-display) !important;
    font-size: clamp(28px, calc(var(--yz-title-size) * 1.7), 46px) !important;
    font-weight: var(--yz-title-weight) !important;
    letter-spacing: var(--yz-title-spacing) !important;
    text-transform: var(--yz-title-transform) !important;
    line-height: 1.15 !important;
}

.ym-tag {
    margin: 10px 0 0 !important;
    color: var(--yz-soft) !important;
    font-size: var(--yz-body-size) !important;
}

/* ------------------------------------------------------------------ */
/* Indice                                                              */

/* La navigazione resta attaccata in alto scorrendo, come nel delivery.

   Su una carta lunga si scorre fino alla fine dei secondi e poi si
   vuole saltare ai dolci: senza questa riga bisogna risalire fino in
   cima, e chi legge dal telefono a tavola non lo fa — chiude.

   `flex-wrap: nowrap` e lo scorrimento di lato: appiccicata in alto,
   una fila che va a capo su tre righe si mangerebbe meta schermo.
   Sotto invece resta a capo, perche li lo spazio c e. */
.ym-index {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 7px;
    margin: 0 0 var(--yz-section-gap);
    padding: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--yz-page);
    border-bottom: var(--yz-rule);
}

/* La barra di scorrimento non si mostra: e una fila di pastiglie, si
   capisce da sola che si trascina */
.ym-index::-webkit-scrollbar { display: none; }

/* Le pastiglie non si schiacciano per stare in riga */
.ym-index a { flex: 0 0 auto; }

@media (min-width: 720px) {
    /* Su schermo largo torna centrata e a capo: lo spazio c e, e una
       fila che scorre di lato su un monitor e scomoda col mouse */
    .ym-index {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }
}

.ym-index a {
    padding: 6px 14px;
    border: var(--yz-rule);
    border-radius: 999px;
    color: var(--yz-soft) !important;
    text-decoration: none !important;
    font-size: 14px;
    line-height: 1.3;
    transition: color .15s ease, border-color .15s ease;
}

.ym-index a:hover {
    border-color: var(--yz-accent);
    color: var(--yz-accent) !important;
}

/* ------------------------------------------------------------------ */
/* Sezioni                                                             */

.ym-category { margin: 0 0 var(--yz-section-gap); }

/*
 * Il titolo della sezione al centro, con un filo che lo attraversa.
 * Costa tre righe di flex e fa più della metà del lavoro: è quello che
 * distingue una carta da un elenco di prodotti.
 */
.ym-category-name {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 10px !important;

    font-family: var(--yz-display) !important;
    font-size: var(--yz-title-size) !important;
    font-weight: var(--yz-title-weight) !important;
    letter-spacing: var(--yz-title-spacing) !important;
    text-transform: var(--yz-title-transform) !important;
    line-height: 1.25 !important;
    color: var(--yz-ink) !important;
}

.ym-category-name::before,
.ym-category-name::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--yz-line);
}

.ym-category-note {
    margin: 0 0 4px !important;
    text-align: center;
    color: var(--yz-soft) !important;
    font-size: var(--yz-body-size) !important;
}

/* ------------------------------------------------------------------ */
/* Piatti                                                              */

.ym-items { margin-top: 26px !important; }

.ym-item {
    display: flex;
    gap: 16px;
    padding: 0 0 var(--yz-rhythm);
    margin-bottom: var(--yz-rhythm);
    border-bottom: var(--yz-rule);
}

.ym-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ym-text { flex: 1 1 auto; min-width: 0; }

/*
 * La foto è piccola e sta a sinistra: su una carta è un dettaglio, non
 * il richiamo. Le misure sull'immagine servono contro i temi che
 * scrivono `height: auto !important` su ogni img.
 *
 * La colonna della foto resta anche quando la foto non c'è.
 *
 * Senza, in un elenco dove due piatti hanno la foto e il terzo no, il
 * terzo partiva dal bordo mentre gli altri erano rientrati: tre nomi su
 * due allineamenti diversi, che è la cosa che si nota per prima
 * guardando un menù senza saper dire perché non va.
 */
.ym-item:not(.has-photo) .ym-text {
    margin-left: calc(var(--yz-photo-size, 88px) + 16px);
}

.ym-photo {
    flex: 0 0 auto;
    width: var(--yz-photo-size, 88px);
    height: var(--yz-photo-size, 88px);
    border-radius: var(--yz-radius-small);
    overflow: hidden;
    background: var(--yz-well);
}

.ym-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    border-radius: 0 !important;
}

/*
 * Nome, filo, prezzo. Il filo è un fondo ripetuto e non dei caratteri:
 * così non finisce letto ad alta voce da uno screen reader, e non si
 * copia insieme al nome del piatto.
 */
.ym-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 !important;
    font-size: var(--yz-item-size) !important;
    line-height: 1.35 !important;
}

.ym-name {
    flex: 0 1 auto;
    font-family: var(--yz-item-font, var(--yz-font)) !important;
    font-weight: var(--yz-item-weight);
    text-transform: var(--yz-item-transform, none) !important;
    letter-spacing: var(--yz-item-spacing, normal) !important;
}

.ym-dots {
    flex: 1 1 auto;
    min-width: 18px;
    height: 1px;
    align-self: flex-end;
    margin-bottom: 5px;
    background-image: var(--yz-leader);
    background-size: var(--yz-leader-size);
    background-repeat: repeat-x;
    background-position: bottom;
}

.ym-price {
    flex: 0 0 auto;
    font-weight: var(--yz-item-weight);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ym-desc {
    margin: 5px 0 0 !important;
    color: var(--yz-soft) !important;
    font-size: var(--yz-body-size) !important;
    line-height: 1.5 !important;
}

.ym-allergens {
    margin: 6px 0 0 !important;
    font-size: 13px !important;
    color: var(--yz-soft) !important;
}

.ym-allergens span { font-weight: 600; }

/* ------------------------------------------------------------------ */
/* In fondo                                                            */

.ym-cta {
    margin: calc(var(--yz-section-gap) * .8) 0 0 !important;
    text-align: center;
}

.ym-btn {
    display: inline-block;
    padding: 15px 34px;
    border-radius: 999px;
    background: var(--yz-accent);
    color: var(--yz-on-accent) !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
}

.ym-foot {
    margin: 30px 0 0 !important;
    padding-top: 18px;
    border-top: var(--yz-rule);
    text-align: center;
    color: var(--yz-soft) !important;
    font-size: 13px !important;
}

.ym-admin-note {
    margin-top: 10px !important;
    padding: 11px 13px;
    background: #fff8e6;
    border-left: 3px solid #d9a300;
    color: #6b5300 !important;
    font-size: 14px !important;
}

.ym-empty { padding: 22px 0; }

/* ------------------------------------------------------------------ */
/* Telefono                                                            */

@media (max-width: 560px) {
    .ym-photo { width: 66px; height: 66px; }

    /*
     * Sotto una certa larghezza il filo non ha più spazio e il prezzo
     * finisce appiccicato al nome: meglio mandarlo a capo.
     */
    .ym-line { flex-wrap: wrap; }

    .ym-dots { display: none; }

    .ym-price { margin-left: auto; }

    .ym-category-name::before { display: none; }
}

/* ------------------------------------------------------------------ */
/* Sulla carta                                                         */

/*
 * Un ristorante la carta la stampa. Il tema intorno non si può
 * nascondere — header e footer non sono nostri — ma la parte che è
 * nostra esce leggibile: nero su bianco, foto via (in stampa sono
 * macchie grigie), nessun piatto tagliato fra due pagine.
 */
@media print {
    .ym {
        max-width: none;
        color: #000;
        font-size: 12pt;
        background: #fff;
    }

    .ym-photo,
    .ym-index,
    .ym-cta { display: none !important; }

    .ym-item { break-inside: avoid; page-break-inside: avoid; }

    .ym-category-name { break-after: avoid; page-break-after: avoid; }

    .ym-desc,
    .ym-allergens,
    .ym-category-note,
    .ym-tag,
    .ym-foot { color: #333 !important; }

    .ym-item,
    .ym-foot { border-color: #bbb; }

    .ym-head { border-bottom-color: #000; }
}

/* ================================================================== */
/* Quello che cambia davvero fra uno stile e l'altro                   */

/*
 * Le variabili non bastavano.
 *
 * Con i soli colori e le sole misure i quattro stili si somigliavano
 * tutti: la stessa carta con caratteri leggermente diversi. Quello che
 * distingue una carta da pub da una da ristorante di livello è
 * l'impianto — dove sta il titolo, se ci sono le foto, come è scritto
 * il prezzo — e l'impianto va scritto, non parametrizzato.
 *
 * Quindi qui ci sono quattro blocchi di regole vere. Aggiungerne un
 * quinto adesso costa più di prima, ed è il prezzo giusto da pagare:
 * quattro stili diversi valgono più di dodici che si assomigliano.
 */

/* ------------------------------------------------------------------ */
/* Elegante: la carta di un ristorante che non ha bisogno di foto      */

/*
 * Le foto spariscono. Non è una dimenticanza: un ristorante di livello
 * la foto del piatto non la mette, perché la fotografia anticipa
 * un'attesa precisa e in una cucina di quel tipo il piatto cambia con
 * la stagione. È la differenza più forte fra questo stile e gli altri
 * tre, e si vede al primo sguardo.
 */
.is-elegante .ym-photo { display: none; }

.is-elegante .ym-item:not(.has-photo) .ym-text { margin-left: 0; }

.is-elegante .ym-head {
    border-bottom: 0;
    padding-bottom: 8px;
}

/* Un filo corto sotto il nome, invece di una riga da parte a parte */
.is-elegante .ym-head::after {
    content: '';
    display: block;
    width: 54px;
    height: 1px;
    margin: 22px auto 0;
    background: var(--yz-accent-alt);
}

/* Il titolo di sezione senza fili laterali, staccato dal bianco */
.is-elegante .ym-category-name {
    justify-content: center;
    margin-bottom: 20px !important;
}

.is-elegante .ym-category-name::before,
.is-elegante .ym-category-name::after { display: none; }

/* Nessuna riga fra un piatto e l'altro: li separa lo spazio */
.is-elegante .ym-item { border-bottom: 0; }

.is-elegante .ym-line { gap: 20px; }

.is-elegante .ym-price { color: var(--yz-soft); }

.is-elegante .ym-desc { font-style: italic !important; }

/* ------------------------------------------------------------------ */
/* Trattoria: la tovaglietta                                           */

/*
 * Il titolo di sezione diventa un cartellino a sinistra, come il
 * timbro su una tovaglietta stampata. Niente centro: qui l'ordine è
 * quello di una lavagna, non di un libro.
 */
.is-trattoria .ym-category-name {
    display: inline-flex;
    gap: 0;
    padding: 7px 18px !important;
    margin-bottom: 18px !important;
    border: 2px solid var(--yz-accent-alt);
    border-radius: 999px;
    color: var(--yz-accent-alt) !important;
}

.is-trattoria .ym-category-name::before,
.is-trattoria .ym-category-name::after { display: none; }

.is-trattoria .ym-category-note { text-align: left; }

/* Le foto più tonde e un filo più grandi: qui il piatto si mostra */
.is-trattoria { --yz-photo-size: 96px; }

.is-trattoria .ym-photo { border-radius: 14px; }

.is-trattoria .ym-head {
    padding-bottom: 22px;
    border-bottom-width: 3px;
}

.is-trattoria .ym-price { color: var(--yz-accent-alt); }

/* ------------------------------------------------------------------ */
/* Pub: la lavagna                                                     */

/*
 * Il titolo di sezione è una fascia piena che attraversa la colonna.
 * Su fondo scuro un titolo sottile si perde, e una fascia si legge da
 * tre metri — che è la distanza da cui si guarda un menù appeso.
 */
.is-pub .ym-category-name {
    display: block;
    padding: 9px 16px !important;
    margin-bottom: 20px !important;
    background: var(--yz-accent-alt);
    color: var(--yz-on-accent) !important;
    border-radius: var(--yz-radius-small);
}

.is-pub .ym-category-name::before,
.is-pub .ym-category-name::after { display: none; }

.is-pub .ym-category-note { text-align: left; }

/* Foto squadrate: gli angoli tondi ammorbidiscono, e qui non serve */
.is-pub { --yz-photo-size: 78px; }

.is-pub .ym-photo { border-radius: 0; }

/* Il prezzo in un cartellino, come sul listino di un banco */
.is-pub .ym-price {
    padding: 2px 9px;
    border: 1px solid var(--yz-line);
    border-radius: 4px;
    background: var(--yz-well);
}

.is-pub .ym-head { padding-bottom: 20px; }

.is-pub .ym-index a { background: var(--yz-card); }

/* ------------------------------------------------------------------ */
/* Moderno: schede staccate                                            */

/*
 * Ogni piatto è una scheda con il suo fondo, come nelle app. È lo
 * stile che assomiglia di più al delivery, ed è coerente: chi lo
 * sceglie ha un locale nato dopo le app di consegna.
 */
.is-moderno .ym-item {
    padding: 14px;
    border: 1px solid var(--yz-line);
    border-radius: var(--yz-radius);
    background: var(--yz-card);
    margin-bottom: 10px;
}

.is-moderno .ym-item:last-child { padding: 14px; }

.is-moderno .ym-category-name {
    justify-content: flex-start;
    gap: 0;
}

.is-moderno .ym-category-name::before { display: none; }

.is-moderno .ym-category-name::after { margin-left: 16px; }

.is-moderno .ym-category-note { text-align: left; }

.is-moderno .ym-index { justify-content: flex-start; }

/* ------------------------------------------------------------------ */
/* In evidenza                                                         */

/*
 * La fascia in cima. Compare solo se c'è qualcosa dentro — quello lo
 * decide il PHP — e usa il colore secondario del ristorante, così si
 * stacca dal resto della carta senza litigarci.
 */
.ym-featured {
    margin: 0 0 var(--yz-section-gap);
    padding: 22px;
    border-radius: var(--yz-radius);
    background: var(--yz-well);
    border: 1px solid var(--yz-line);
}

.ym-featured-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 18px;
    margin: 0 !important;
}

.ym-featured-item { min-width: 0; }

.ym-featured-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--yz-radius-small);
    overflow: hidden;
    background: var(--yz-card);
    margin-bottom: 10px;
}

.ym-featured-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    border-radius: 0 !important;
}

.ym-featured-name {
    margin: 6px 0 0 !important;
    font-family: var(--yz-item-font, var(--yz-font)) !important;
    font-size: var(--yz-item-size) !important;
    font-weight: var(--yz-item-weight) !important;
    text-transform: var(--yz-item-transform, none) !important;
    line-height: 1.3 !important;
}

.ym-featured-price {
    margin: 3px 0 0 !important;
    font-weight: var(--yz-item-weight);
    font-variant-numeric: tabular-nums;
    color: var(--yz-soft) !important;
}

/*
 * L'etichetta. Piccola e in maiuscoletto: deve dire "guarda qui" senza
 * gridare, perché su una carta il grido lo si legge una volta sola e
 * poi si smette di vederlo.
 */
.ym-tagline {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--yz-accent-alt);
    color: var(--yz-on-accent) !important;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    line-height: 1.7;
    white-space: nowrap;
    vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Icone degli allergeni                                               */

/*
 * Piccole e discrete, in fila con la nota scritta a mano. Non sono un
 * avvertimento da mettere in rosso: sono un'informazione che chi la
 * cerca trova, e chi non ne ha bisogno non deve leggere.
 */
.ym-allergens {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 7px 0 0 !important;
    font-size: 13px !important;
    color: var(--yz-soft) !important;
}

/*
 * La misura del simbolo sta in `styles.css`, il foglio che le due
 * pagine hanno in comune: stava qui, e sul delivery la legenda usciva
 * senza icone.
 */

/* La nota a mano si stacca dalle icone */
.ym-allergens span { margin-left: 2px; }

@media print {
    .ym-featured { border-color: #bbb; background: transparent; }

    .ym-featured-photo { display: none !important; }

    /* Su carta il fondo colorato dell'etichetta esce come una macchia:
       meglio il contorno */
    .ym-tagline {
        background: transparent;
        color: #000 !important;
        border: 1px solid #666;
    }
}

/* ------------------------------------------------------------------ */
/* I cartellini dei piatti in evidenza                                 */

/*
 * Tre cose diverse, e devono sembrare tre cose diverse.
 *
 *  - **In promozione** parla di soldi: è un'etichetta appiccicata
 *    sopra, come il cartellino di un ribasso
 *  - **Il più scelto** è il giudizio degli altri clienti: pieno,
 *    solido, con la stellina
 *  - **Lo consigliamo** è la voce della casa: sobrio, di contorno,
 *    perché è un consiglio e non un annuncio
 *
 * Prima erano tutti e tre la stessa pillola colorata, e allora tanto
 * valeva scrivere "in evidenza" tre volte.
 */
.ym-tagline::before {
    margin-right: 5px;
    font-weight: 700;
}

.ym-tagline-promo {
    background: #c0392b !important;
    color: #fff !important;
    border-radius: 3px;
    /* Spigolo tagliato: il cartellino del prezzo strappato */
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
    padding-right: 13px;
}

.ym-tagline-promo::before { content: '%'; }

.ym-tagline-popular {
    background: var(--yz-accent) !important;
    color: var(--yz-on-accent) !important;
}

.ym-tagline-popular::before { content: '\2605'; }

/* Il consiglio della casa non urla: contorno, non pieno */
.ym-tagline-chef {
    background: transparent !important;
    color: var(--yz-ink) !important;
    border: 1px solid currentColor;
    opacity: .75;
}

.ym-tagline-chef::before { content: '\270E'; }

/* --- Elegante: niente pillole, il menù si legge piano --- */

.is-elegante .ym-tagline,
.is-elegante .ym-tagline-promo,
.is-elegante .ym-tagline-popular,
.is-elegante .ym-tagline-chef {
    background: transparent !important;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    clip-path: none;
    padding: 0 0 1px;
    opacity: 1;
    letter-spacing: .18em !important;
    font-weight: 400;
    font-size: 10px !important;
}

.is-elegante .ym-tagline-promo { color: #8a2f24 !important; }
.is-elegante .ym-tagline-popular { color: var(--yz-accent) !important; }
/* `--yz-muted` non e mai esistita: questa riga veniva buttata via
   intera dal browser, quindi il consiglio della casa restava del
   colore del testo invece che smorzato. La variabile giusta si
   chiama `--yz-soft`, ed e definita in ogni stile. */
.is-elegante .ym-tagline-chef { color: var(--yz-soft) !important; }

/* --- Trattoria: sembra un timbro messo a mano --- */

.is-trattoria .ym-tagline {
    border-radius: 2px;
    clip-path: none;
    padding: 2px 7px;
    /* Storto di un grado: il timbro non lo mette nessuno dritto */
    transform: rotate(-1.2deg);
    font-weight: 700;
}

.is-trattoria .ym-tagline-promo {
    background: transparent !important;
    color: #b03a2e !important;
    border: 2px solid currentColor;
}

.is-trattoria .ym-tagline-popular {
    background: transparent !important;
    color: var(--yz-accent) !important;
    border: 2px solid currentColor;
}

.is-trattoria .ym-tagline-chef {
    border: 1px dashed currentColor;
    transform: rotate(.8deg);
}

/* --- Pub: grosso e senza mezze misure --- */

.is-pub .ym-tagline {
    border-radius: 0;
    clip-path: none;
    padding: 3px 9px;
    font-weight: 800;
    letter-spacing: .1em !important;
    font-size: 10px !important;
}

.is-pub .ym-tagline-promo {
    background: #e8b021 !important;
    color: #1b1b1b !important;
}

.is-pub .ym-tagline-chef {
    background: transparent !important;
    border: 2px solid currentColor;
    opacity: 1;
}

/* --- La scheda di un piatto ------------------------------------- */

/* Si apre solo quando c'è qualcosa da vedere: una foto grande, o una
   descrizione che sulla riga starebbe stretta. */
.ym-scheda {
    width: min(92vw, 420px);
    max-height: 88vh;
    padding: 0;
    border: 0;
    border-radius: var(--yz-radius);
    background: var(--yz-card);
    color: var(--yz-ink);
    overflow: auto;
}

.ym-scheda::backdrop {
    background: rgba(12, 14, 18, .55);
}

/* La chiusura galleggia sopra la foto: dentro il flusso spingerebbe
   giù l'immagine, che è la cosa per cui la scheda si è aperta */
.ym-scheda-chiudi {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    height: 0;
}

.ym-scheda-chiudi button {
    margin: 8px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(12, 14, 18, .55);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* Qui la foto è grande: è il motivo per cui si apre la scheda */
.ym-scheda-foto {
    display: block;
    width: 100%;
    height: auto;
    max-height: 46vh;
    object-fit: cover;
}

.ym-scheda-testo {
    padding: 18px 20px 22px;
}

.ym-scheda-nome {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 4px;
    font-family: var(--yz-display);
    font-size: 20px;
}

.ym-scheda-prezzo {
    margin: 0 0 12px;
    font-weight: 600;
}

.ym-scheda-desc {
    margin: 0 0 12px;
    color: var(--yz-soft);
    line-height: 1.55;
}

/*
 * Gli ingredienti sono un'etichetta, non un racconto: più piccoli
 * della descrizione, così si distinguono senza doverli leggere.
 */
.ym-scheda-ingredienti {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--yz-soft);
    line-height: 1.55;
}

.ym-scheda-allergeni {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--yz-soft);
}

/* La riga che si può aprire lo dice col cursore e con un cenno al
   passaggio: senza, nessuno prova a toccarla */
.ym-item.is-apribile {
    cursor: pointer;
}

.ym-item.is-apribile:hover .ym-name,
.ym-item.is-apribile:focus-visible .ym-name {
    text-decoration: underline;
    text-underline-offset: 3px;
}