/*
 * Menù del delivery.
 *
 * Qui il tema non entra. Prima questo foglio ereditava carattere e
 * colori del sito "per non imporre nulla", e il risultato era un menù
 * che somigliava al tema e non a un'app di consegna: titoli nel
 * carattere decorativo del sito, prezzi in arancione, schede piatte.
 *
 * Glovo, Deliveroo e Just Eat hanno tutte lo stesso aspetto, ed è una
 * scelta: carattere di sistema, fondo grigio chiarissimo, schede
 * bianche con ombra appena accennata, foto quadrata a destra e un "+"
 * tondo sull'angolo. Del ristorante resta il colore identitario, che è
 * quello che serve a riconoscerlo.
 *
 * L'unica cosa che il tema può ancora rompere è la larghezza del
 * contenitore in cui lo shortcode viene messo.
 */

.yd {
    /*
     * I colori e le forme arrivano dallo stile scelto (styles.css), e
     * il colore del ristorante dal template come stile in linea. I
     * valori dopo la virgola sono la rete: se styles.css non fosse
     * stato caricato il menù resterebbe leggibile invece di uscire
     * senza colori.
     */
    --yd-brand: var(--yz-accent, #1f2933);
    --yd-on: var(--yz-on-accent, #fff);

    --yd-ink: var(--yz-ink, #16191f);
    --yd-soft-ink: var(--yz-soft, #70757e);
    --yd-page: var(--yz-well, #f6f6f7);
    --yd-card: var(--yz-card, #fff);
    --yd-line: var(--yz-line, #e7e7ea);
    --yd-soft: var(--yz-well, #f2f2f4);
    --yd-radius: var(--yz-radius, 16px);
    --yd-shadow: var(--yz-shadow, 0 1px 2px rgba(16, 19, 31, .05), 0 6px 20px rgba(16, 19, 31, .06));

    position: relative;

    /*
     * Si centra da solo invece di fidarsi del contenitore del tema.
     * Con un builder il blocco può finire in una sezione a tutta
     * larghezza o dentro una colonna storta, e il menù si ritrovava
     * spostato a sinistra con un buco a destra.
     */
    /*
     * Il fondo copre tutta la pagina, la lettura resta in colonna: la
     * larghezza la impone .yd-inner. Vedi menu.css per il perché.
     */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;

    /*
     * Il contenitore dipinge il proprio fondo.
     *
     * Serve allo stile Pub, dove il testo è chiaro: senza, uscirebbe
     * grigio chiaro sul bianco del tema e non si leggerebbe una riga.
     * Sugli stili chiari non si nota, che è il comportamento giusto.
     */
    background: var(--yz-page);

    font-family: var(--yz-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    font-size: 16px;
    line-height: 1.45;
    color: var(--yd-ink);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* La colonna: il fondo va ai bordi, il contenuto no */
.yd-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 20px 36px;
}

@media (max-width: 640px) {
    .yd-inner { padding: 16px 12px 28px; }
}

/*
 * Il tema non deve entrare.
 *
 * `!important` qui non è pigrizia. Questo menù è un componente che
 * vive dentro una pagina che non controlliamo, e i temi scrivono
 * regole sui tag — h2, h3, p — con selettori più specifici dei nostri
 * o direttamente con `!important`. Senza questo blocco il nome del
 * piatto esce nel carattere decorativo arancione del sito invece che
 * in quello del menù, ed è successo davvero.
 */
.yd,
.yd h2,
.yd h3,
.yd p,
.yd span,
.yd strong,
.yd legend,
.yd label,
.yd button,
.yd input,
.yd a,
.yd code {
    font-family: var(--yz-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-style: normal !important;
    text-shadow: none !important;
}

.yd code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* I titoli: dimensione, peso e colore decisi qui e non dal tema */
.yd h2,
.yd h3 {
    color: var(--yd-ink) !important;
    padding: 0;
}

/*
 * L'attributo `hidden` funziona attraverso il foglio di stile del
 * browser, che qualsiasi regola `display` di questo file batte. È
 * successo davvero: la scheda prodotto restava aperta e vuota, e la
 * "×" non la chiudeva perché non c'era niente da chiudere.
 */
.yd [hidden] { display: none !important; }

/*
 * Le misure comprendono bordo e imbottitura.
 *
 * Senza questa riga un campo largo `100%` occupa **cento per cento
 * piu' l'imbottitura piu' il bordo**: trenta pixel in piu' del suo
 * contenitore. Da fuori si vede cosi': la password che sporge dal
 * riquadro dell'account, e il modulo d'ordine piu' largo della finestra
 * che lo contiene, con la barra per scorrere di lato.
 *
 * Non e' un ritocco a quel campo: e' come si misurano le cose in tutto
 * questo componente, e messa qui vale anche per i campi che verranno.
 */
.yd,
.yd *,
.yd *::before,
.yd *::after {
    box-sizing: border-box;
}

/* Con una tendina aperta la pagina sotto non deve scorrere */
.yd-locked { overflow: hidden; }

/* ---------------------------------------------------------------- */
/* Categorie                                                         */

.yd-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 0 20px;
    padding: 12px 0;
    background: var(--yd-card);
    border-bottom: 1px solid var(--yd-line);
}

.yd-nav-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Le prime pillole non devono restare incollate al bordo quando si
       scorre fino in fondo */
    padding: 2px;
    margin: -2px;
}

.yd-nav-track::-webkit-scrollbar { display: none; }

.yd-nav-item {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--yd-soft);
    color: var(--yd-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color .15s, color .15s;
}

.yd-nav-item:hover { background: var(--yd-line); color: var(--yd-ink); }

.yd-nav-item.is-current,
.yd-nav-item.is-current:hover {
    background: var(--yd-brand);
    color: var(--yd-on);
}

/* ---------------------------------------------------------------- */
/* Impianto                                                          */

.yd-body { display: block; }

/* Senza questo, in griglia la colonna non scende sotto la larghezza
   del suo contenuto e le descrizioni lunghe la fanno debordare */
.yd-catalog { min-width: 0; }

.yd-category { margin-bottom: 36px; scroll-margin-top: 84px; }

.yd-category:last-child { margin-bottom: 0; }

.yd-category-title {
    margin: 0 0 2px !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.yd-category-text {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--yd-soft-ink);
}

.yd-category-title + .yd-products { margin-top: 14px; }

.yd-products { display: grid; gap: 12px; }

/* ---------------------------------------------------------------- */
/* Scheda prodotto nell'elenco                                       */

.yd-product {
    position: relative;
    display: flex;
    gap: 14px;
    /* La foto arriva a tutta altezza della scheda: così il "+" cade
       sul suo angolo e non sotto, che è il gesto delle app di consegna */
    align-items: stretch;
    min-height: 104px;
    padding: 14px;
    background: var(--yd-card);
    border: 1px solid var(--yd-line);
    border-radius: var(--yd-radius);
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s, transform .12s;
}

.yd-product:hover {
    border-color: transparent;
    box-shadow: var(--yd-shadow);
}

.yd-product:focus-visible {
    outline: 2px solid var(--yd-brand);
    outline-offset: 2px;
}

.yd-product:active { transform: scale(.994); }

.yd-product-text {
    flex: 1;
    min-width: 0;
    /* Spazio per il "+" quando il piatto non ha foto: il pulsante è
       largo 32px e sta a 10px dal bordo */
    padding-right: 50px;
}

.yd-product.has-image .yd-product-text { padding-right: 0; }

.yd-product-name {
    margin: 0 0 4px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.yd-product-desc {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--yd-soft-ink);
    line-height: 1.4;
    /* Due righe e poi i puntini: le descrizioni lunghe sfalserebbero
       l'altezza delle schede una accanto all'altra */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yd-product-price {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--yd-ink);
}

.yd-product-more {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--yd-soft-ink);
}

.yd-product-allergens {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--yd-soft-ink);
}

.yd-product-image {
    flex: 0 0 100px;
    width: 100px;
    min-height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--yd-soft);
}

/*
 * `height: auto !important` sulle immagini ce l'ha praticamente ogni
 * tema WordPress. Se vince, la foto smette di riempire il riquadro e
 * resta incorniciata da bande grigie.
 */
.yd-product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
}

/*
 * Il "+" tondo sull'angolo: è il gesto che si conosce a memoria dalle
 * app di consegna.
 *
 * Pieno e non bianco: su una scheda bianca un cerchio bianco non si
 * vede, restava un "+" solitario che non sembrava un pulsante.
 */
.yd-product-add {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--yd-brand);
    color: var(--yd-on);
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(16, 19, 31, .25);
    transition: transform .12s;
}

.yd-product:hover .yd-product-add { transform: scale(1.08); }

/*
 * Il campo carta, dentro il modulo d'ordine.
 *
 * Compare solo quando c'è da pagare, e sotto il riepilogo: è l'ultima
 * cosa che si fa, e metterlo più in alto vorrebbe dire chiedere il
 * numero della carta a chi non ha ancora deciso.
 *
 * Il riquadro dentro lo disegna Stripe e non lo tocchiamo: prende le
 * misure da sé, e ogni regola che gli si mette addosso è una cosa che
 * si rompe al loro prossimo aggiornamento.
 */
.yd-carta {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--yd-line);
    border-radius: var(--yd-radius);
    background: var(--yd-card);
}

.yd-carta-titolo {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
}

.yd-carta-errore {
    margin: 10px 0 0;
    font-size: 13px;
    color: #b3261e;
}

/* ---------------------------------------------------------------- */
/* Carrello                                                          */

.yd-cart {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(16, 19, 31, .5);
}

.yd-cart.is-open { display: flex; }

.yd-cart-title,
.yd-cart-items,
.yd-cart-foot {
    background: var(--yd-card);
    color: var(--yd-ink);
}

.yd-cart-title {
    margin: 0;
    padding: 20px 20px 12px;
    border-radius: var(--yd-radius) var(--yd-radius) 0 0;
    font-size: 18px;
    font-weight: 800;
}

.yd-cart-items {
    padding: 0 20px;
    max-height: 46vh;
    overflow-y: auto;
}

.yd-cart-empty {
    margin: 0;
    padding: 6px 0 20px;
    color: var(--yd-soft-ink);
    font-size: 15px;
}

.yd-cart-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--yd-line);
}

.yd-cart-line:last-child { border-bottom: 0; }

.yd-cart-qty {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 26px;
    font-size: 15px;
}

.yd-cart-body { flex: 1; min-width: 0; }

.yd-cart-name {
    display: block;
    font-weight: 600;
    font-size: 15px;
}

.yd-cart-options {
    display: block;
    font-size: 13px;
    color: var(--yd-soft-ink);
    margin-top: 2px;
}

.yd-cart-price {
    font-weight: 700;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.yd-cart-remove {
    border: 0;
    background: none;
    color: var(--yd-soft-ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    /* Bersaglio comodo anche col pollice */
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.yd-cart-remove:hover { color: var(--yd-ink); }

.yd-cart-foot {
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--yd-line);
}

.yd-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
}

.yd-cart-total strong {
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- */
/* Pulsanti                                                          */

.yd-button {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: var(--yd-brand);
    color: var(--yd-on);
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: filter .15s;
}

.yd-button:disabled { opacity: .4; cursor: default; }

.yd-button:not(:disabled):hover { filter: brightness(1.1); }

/* Barra del carrello su telefono */

.yd-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 14px 0 10px;
    border: 0;
    border-radius: 14px;
    background: var(--yd-brand);
    color: var(--yd-on);
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 26px rgba(16, 19, 31, .28);
}

.yd-bar-count {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: 14px;
}

.yd-bar-label { flex: 1; text-align: left; }

.yd-bar-total { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- */
/* Scheda del prodotto                                               */

.yd-sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(16, 19, 31, .55);
}

.yd-sheet-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--yd-card);
    color: var(--yd-ink);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    animation: yd-rise .22s ease-out;
}

@keyframes yd-rise {
    from { transform: translateY(24px); opacity: .6; }
    to { transform: none; opacity: 1; }
}

/* La linguetta che dice "questa si trascina giù" */
.yd-sheet-grip {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    /* Deve vedersi sia sul bianco sia sopra una foto scura */
    background: rgba(16, 19, 31, .28);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}

.yd-sheet-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--yd-card);
    color: var(--yd-ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(16, 19, 31, .2);
}

.yd-sheet-close:hover { background: var(--yd-soft); }

.yd-sheet-scroll { overflow-y: auto; }

/* La foto grande in cima, come nelle app: è quella che fa venire fame */
.yd-sheet-image {
    width: 100%;
    height: 210px;
    background: var(--yd-soft);
    /*
     * Senza questo la foto usciva dal suo riquadro e il titolo finiva
     * stampato sopra l'immagine. Praticamente ogni tema scrive
     * `img { height: auto }`, e se quella regola vince sulla nostra
     * l'immagine torna alle sue dimensioni vere — che per una foto da
     * telefono sono migliaia di pixel.
     */
    overflow: hidden;
}

.yd-sheet-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
}

.yd-sheet-head { padding: 20px 20px 0; }

.yd-sheet-name {
    margin: 0 0 6px !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

/*
 * Con la foto la "×" sta sopra l'immagine e non dà fastidio; senza,
 * finirebbe sul titolo. L'elemento resta nel documento anche quando è
 * nascosto, quindi la regola va su `[hidden]` e non sulla presenza.
 */
.yd-sheet-image[hidden] + .yd-sheet-head .yd-sheet-name { padding-right: 40px; }

.yd-sheet-desc {
    margin: 0;
    font-size: 15px;
    color: var(--yd-soft-ink);
    line-height: 1.5;
}

/*
 * Gli ingredienti: più piccoli della descrizione e più chiari.
 *
 * Sono un'etichetta, non un racconto — si scorrono cercando una
 * parola, di solito quella che non si vuole. Alla stessa dimensione
 * della descrizione sembrerebbero una seconda descrizione.
 */
.yd-sheet-ingredienti {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--yd-soft-ink);
    line-height: 1.5;
}

.yd-sheet-groups { padding: 0 20px 12px; }

.yd-sheet-head + .yd-sheet-groups { margin-top: 18px; }

.yd-group {
    border: 0;
    border-top: 1px solid var(--yd-line);
    margin: 0;
    padding: 16px 0 4px;
}

.yd-group:first-child { border-top: 0; padding-top: 4px; }

.yd-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    float: none;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
}

.yd-group-hint {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--yd-soft);
    color: var(--yd-soft-ink);
}

.yd-group-hint.is-required {
    background: #fdecea;
    color: #b3261e;
}


.yd-option {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 44px: si tocca col pollice */
    min-height: 44px;
    padding: 4px 0;
    font-size: 15px;
    cursor: pointer;
}

.yd-option.is-off { opacity: .45; cursor: default; }

.yd-option input {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--yd-brand);
}

.yd-option-label { flex: 1; }

.yd-option-extra {
    font-size: 14px;
    color: var(--yd-soft-ink);
    font-variant-numeric: tabular-nums;
}

.yd-sheet-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--yd-line);
    background: var(--yd-card);
}

.yd-qty {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    border: 1px solid var(--yd-line);
    border-radius: 12px;
    padding: 4px;
}

.yd-qty-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 9px;
    background: var(--yd-soft);
    color: var(--yd-ink);
    font-family: inherit;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.yd-qty-btn:hover { background: #e6e6e9; }

.yd-qty-value {
    min-width: 34px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.yd-sheet-add { flex: 1; }

/* ---------------------------------------------------------------- */
/* Ordine                                                            */

/* Avviso in cima: orari e zona di consegna, prima che uno riempia il
   carrello e scopra che non si consegna a casa sua */
.yd-notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--yd-soft);
    font-size: 14px;
    line-height: 1.5;
}

/* Il modulo d'ordine è più lungo di una scheda prodotto */
.yd-checkout .yd-sheet-panel { max-width: 560px; }

/*
 * Il modulo contiene sia il corpo sia il piede col pulsante. Senza
 * questo il piede scorreva via insieme ai campi, e su telefono il
 * pulsante "Invia l'ordine" finiva fuori dallo schermo proprio quando
 * serviva.
 */
.yd-checkout-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.yd-checkout-body {
    padding: 0 20px 16px;
    overflow-y: auto;
}

.yd-prefill-note {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--yd-soft);
    font-size: 14px;
    line-height: 1.45;
    color: var(--yd-soft-ink);
}

.yd-choice-row {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.yd-choice {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--yd-line);
    border-radius: 12px;
    font-size: 15px;
    cursor: pointer;
}

.yd-choice input { accent-color: var(--yd-brand); margin: 0; }

/* La scelta fatta si vede senza dover guardare il pallino */
.yd-choice:has(input:checked) {
    border-color: var(--yd-brand);
    background: var(--yd-soft);
}

.yd-field {
    display: block;
    margin-bottom: 14px;
}

.yd-field > span {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
}

.yd-field em {
    font-style: normal;
    font-weight: 400;
    color: var(--yd-soft-ink);
}

/*
 * I campi da riempire.
 *
 * Le caselle da spuntare restano fuori, e non e' un dettaglio: senza
 * quell'esclusione una casella dentro un campo si prendeva la
 * larghezza intera, il bordo e l'imbottitura, e usciva come un
 * rettangolo vuoto lungo tutto il modulo con l'etichetta di fianco.
 * E' successo davvero, sulla spunta per creare l'account.
 */
.yd-field input:not([type="checkbox"]):not([type="radio"]),
.yd-field textarea {
    width: 100%;
    /* 16px: sotto questa misura il telefono ingrandisce la pagina da
       solo quando si tocca il campo */
    font-size: 16px;
    padding: 12px 14px;
    border: 1px solid var(--yd-line);
    border-radius: 10px;
    background: var(--yd-card);
    color: var(--yd-ink);
}

.yd-field input:not([type="checkbox"]):not([type="radio"]):focus,
.yd-field textarea:focus {
    outline: 2px solid var(--yd-brand);
    outline-offset: 1px;
    border-color: transparent;
}

.yd-field textarea { resize: vertical; }

/*
 * I suggerimenti li disegniamo noi.
 *
 * Il widget di Google è stato provato e scartato: su telefono apriva
 * un pannello a tutto schermo dentro il modulo d'ordine, e non c'era
 * modo di impaginarlo.
 */
.yd-address { position: relative; }

.yd-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--yd-card);
    border: 1px solid var(--yd-line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 19, 31, .14);
}

.yd-suggestion {
    display: block;
    width: 100%;
    /* 44px: si tocca col pollice */
    min-height: 44px;
    padding: 11px 14px;
    border: 0;
    background: none;
    color: var(--yd-ink);
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.yd-suggestion + .yd-suggestion { border-top: 1px solid var(--yd-line); }

.yd-suggestion.is-on,
.yd-suggestion:hover { background: var(--yd-soft); }

/* Sul telefono è il gesto più veloce: due tocchi invece di venti */
.yd-locate {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: 8px;
    padding: 0 14px;
    border: 1px solid var(--yd-line);
    border-radius: 10px;
    background: var(--yd-card);
    color: var(--yd-brand);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.yd-locate:disabled { opacity: .6; cursor: default; }

.yd-address-note {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fdf3e0;
    color: #6b4d13;
    font-size: 14px;
    line-height: 1.45;
}

/* Quanto è lontano: si dice prima di ordinare, non dopo */
.yd-distance {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--yd-soft);
    font-size: 14px;
    color: var(--yd-soft-ink);
}

/* In attesa dell'indirizzo: c'è ma non pretende attenzione */
.yd-distance.is-waiting {
    background: none;
    padding: 4px 0 0;
}

.yd-distance.is-known {
    background: #eef4f0;
    color: #1e5c46;
    font-weight: 600;
}

.yd-distance.is-far {
    background: #fdf3e0;
    color: #6b4d13;
    font-weight: 600;
}

/* ---------------------------------------------------------------- */
/* Fasce di consegna                                                 */

.yd-slots > span {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.yd-slot-days {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 10px;
}

.yd-slot-days:empty { display: none; }

.yd-slot-days::-webkit-scrollbar { display: none; }

.yd-slot-day {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--yd-line);
    border-radius: 999px;
    background: var(--yd-card);
    color: var(--yd-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.yd-slot-day.is-on {
    background: var(--yd-brand);
    border-color: var(--yd-brand);
    color: var(--yd-on);
}

/* Le fasce a griglia: si scorrono con l'occhio, non con il dito */
.yd-slot-times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.yd-slot {
    /* 44px: si tocca col pollice */
    min-height: 44px;
    padding: 6px 8px;
    border: 1px solid var(--yd-line);
    border-radius: 10px;
    background: var(--yd-card);
    color: var(--yd-ink);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.yd-slot.is-on {
    border-color: var(--yd-brand);
    box-shadow: inset 0 0 0 1px var(--yd-brand);
    background: var(--yd-soft);
}

.yd-slot-left {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #b7791f;
}

.yd-slots-none {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fdf3e0;
    color: #6b4d13;
    font-size: 15px;
    line-height: 1.45;
}

.yd-checkout-total {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--yd-soft);
}

.yd-checkout-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.yd-checkout-line.is-total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--yd-line);
    font-size: 17px;
    font-weight: 700;
}

.yd-checkout-error {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fdecea;
    color: #b3261e;
    font-size: 15px;
    line-height: 1.45;
}

/* Ordine partito */

.yd-done {
    padding: 40px 24px 44px;
    text-align: center;
}

.yd-done-mark {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #e3f4ed;
    color: #1e7e5a;
    font-size: 28px;
}

.yd-done-title {
    margin: 0 0 8px !important;
    font-size: 21px !important;
    font-weight: 800 !important;
}

/* Il codice si legge a voce al telefono: grande e spaziato */
.yd-done-code {
    margin: 0 0 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .16em !important;
}

.yd-done-text {
    margin: 0;
    color: var(--yd-soft-ink);
    line-height: 1.5;
}

/* ---------------------------------------------------------------- */
/* Menù ancora vuoto                                                 */

.yummyit-delivery-empty { color: var(--yd-soft-ink); }

.yd-admin-note {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff8e6;
    border: 1px solid #f0dfae;
    color: #6b4d13;
    font-size: 14px;
    line-height: 1.5;
}

.yd-admin-note a { color: inherit; font-weight: 700; }

/* ---------------------------------------------------------------- */
/* Schermo grande: due colonne, carrello sempre visibile             */

@media (min-width: 900px) {
    .yd-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 28px;
        align-items: start;
    }

    .yd-products { grid-template-columns: 1fr 1fr; }

    /* Il carrello smette di essere una tendina e diventa una colonna */
    .yd-cart {
        position: sticky;
        top: 88px;
        inset: auto;
        display: flex;
        background: var(--yd-card);
        border: 1px solid var(--yd-line);
        border-radius: var(--yd-radius);
        box-shadow: var(--yd-shadow);
        overflow: hidden;
    }

    .yd-cart-title { border-radius: 0; }

    .yd-cart-items { max-height: 48vh; }

    .yd-bar { display: none; }

    .yd-sheet { align-items: center; }

    .yd-sheet-panel { border-radius: 20px; }

    .yd-sheet-grip { display: none; }

    @keyframes yd-rise {
        from { transform: scale(.97); opacity: .6; }
        to { transform: none; opacity: 1; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .yd-product,
    .yd-product-add,
    .yd-button,
    .yd-nav-item { transition: none; }

    .yd-sheet-panel { animation: none; }
}

/* ---------------------------------------------------------------- */
/* In evidenza e allergeni                                           */

/*
 * L'etichetta sopra il nome del piatto. Sul delivery sta dentro alla
 * scheda e non in una fascia a parte: qui si scorre per cercare, e una
 * fascia in cima si supera al primo tocco senza guardarla.
 */
.yd-tagline {
    display: inline-block;
    margin-bottom: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--yz-accent-alt, var(--yd-brand));
    color: var(--yd-on) !important;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    line-height: 1.7;
}

.yd-product-allergens {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--yd-soft-ink);
}

.yd-product-allergens .yz-allergen {
    display: inline-flex;
    width: 17px;
    height: 17px;
    color: var(--yd-soft-ink);
    cursor: help;
}

.yd-product-allergens .yz-allergen svg {
    width: 100%;
    height: 100%;
    display: block;
}

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

/*
 * Gli stessi tre del menù, con lo stesso significato: se sul menù
 * "in promozione" è rosso con la percentuale e sul delivery fosse
 * verde con la stella, il cliente che guarda tutti e due penserebbe di
 * vedere due cose diverse.
 */
.yd-tagline::before {
    margin-right: 5px;
    font-weight: 700;
}

.yd-tagline-promo {
    background: #c0392b !important;
    color: #fff !important;
    border-radius: 3px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
    padding-right: 13px;
}

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

.yd-tagline-popular {
    background: var(--yz-accent, var(--yd-brand)) !important;
}

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

.yd-tagline-chef {
    background: transparent !important;
    color: var(--yz-ink, var(--yd-ink)) !important;
    border: 1px solid currentColor;
    opacity: .75;
}

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

/* --- Elegante --- */

.is-elegante .yd-tagline,
.is-elegante .yd-tagline-promo,
.is-elegante .yd-tagline-popular,
.is-elegante .yd-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 .yd-tagline-promo { color: #8a2f24 !important; }
.is-elegante .yd-tagline-popular { color: var(--yz-accent, var(--yd-brand)) !important; }

/* --- Trattoria --- */

.is-trattoria .yd-tagline {
    border-radius: 2px;
    clip-path: none;
    padding: 2px 7px;
    transform: rotate(-1.2deg);
}

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

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

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

/* --- Pub --- */

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

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

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

/* L'account offerto al checkout.

   Leggero e tratteggiato: chi ordina da mangiare ha fame ed è già al
   terzo passaggio. Qualunque cosa somigli a "registrati per continuare"
   fa chiudere la pagina e ordinare da un'altra parte. */
.yd-account {
    padding: 12px 14px;
    border: 1px dashed #d6dae0;
    border-radius: 10px;
}

.yd-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/*
 * La casella prende il colore del locale.
 *
 * Una riga sola, e cambia parecchio: una spunta grigia di sistema in
 * mezzo a un modulo colorato sembra roba di un altro sito.
 */
.yd-check input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--yd-brand);
    cursor: pointer;
}

/*
 * L'invito a farsi l'account.
 *
 * Sta in mezzo a un modulo che il cliente sta compilando di corsa per
 * finire, e in mezzo a quello una riga qualunque non la legge nessuno:
 * si arriva in fondo, si preme, e l'account non si fa mai.
 *
 * Quindi si stacca dal resto — fondo col colore del locale appena
 * accennato, un filo di bordo — abbastanza da farsi guardare, non
 * tanto da sembrare una pubblicita' in mezzo all'ordine. Il vantaggio
 * sta scritto sotto in una riga: *la prossima volta ci sono gia'*, che
 * e' l'unica ragione per cui uno lo farebbe.
 */
.yd-account {
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid var(--yd-brand);
    border-radius: var(--yd-radius);
    /*
     * Il colore del locale appena accennato: si vede che e' un
     * riquadro, e resta leggibile con qualunque colore scelto.
     *
     * La riga prima e' la rete per i browser vecchi che non sanno
     * mescolare i colori: li' il riquadro resta grigino, che e' meno
     * bello ma non e' rotto.
     */
    background: var(--yd-soft);
    background: color-mix(in srgb, var(--yd-brand) 5%, var(--yd-card));
}

.yd-account .yd-check span {
    font-weight: 700;
    font-size: 15px;
}

.yd-account .yd-hint {
    /* Rientrata sotto l'etichetta, non sotto la casella: si legge come
       la continuazione della frase sopra */
    margin-left: 30px;
}

.yd-account .yd-field { margin-top: 12px; }

.yd-hint {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6b7684;
}

/* ------------------------------------------------------------------ */
/* Menù combinati                                                      */

/* La scheda di un menù si disegna come quella di un prodotto: cambia
   solo il cartellino, perché chi guarda deve capire in un colpo che
   quello non è un piatto ma un menù da comporre */
.yd-combo {
    border-color: var(--yz-brand, #2563eb);
}

.yd-combo-tag {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--yz-brand, #2563eb);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Una parte del menù dentro il riquadro: stesso passo dei gruppi di
   scelta, così comporre un menù e personalizzare un panino si
   assomigliano invece di essere due mestieri */
.yd-parte-scelta {
    margin-bottom: 22px;
}

.yd-group-name {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
}

/* Il sovrapprezzo accanto al nome della parte, non sul singolo
   prodotto: è così che si conta, e mostrarlo su ogni riga farebbe
   credere che si paghi per ognuna */
.yd-parte-extra {
    font-size: 13px;
    font-weight: 600;
    color: var(--yz-brand, #2563eb);
}

.yd-group-rule {
    margin: 0 0 10px;
    font-size: 13px;
    color: #6b7280;
}