/* /Components/BoxList.razor.rz.scp.css */
/* Stili delle card box: verticali e compatte, tre per riga su desktop, centrate
   quando sono meno. Il dettaglio sta nel popup, quindi la card resta corta. */

.box-list[b-jqyipopz4a] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1.5rem;
}

.box-card[b-jqyipopz4a] {
    /* Larghezza fissa: la card non si allarga se le box sono una o due. */
    flex: 0 0 440px;
    width: 440px;
    max-width: 440px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 0.9rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.box-card:hover[b-jqyipopz4a] {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(51, 51, 51, 0.14);
}

.box-card--soldout[b-jqyipopz4a] {
    /* Esaurita ma viva: cornice tratteggiata arancio, bottone pieno. */
    border: 1.5px dashed color-mix(in srgb, var(--color-terracotta) 55%, transparent);
    box-shadow: none;
}

.box-card__visual[b-jqyipopz4a] {
    position: relative;
    flex: 0 0 158px;
    width: 158px;
    height: 158px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 146, 72, 0.28), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(255, 135, 54, 0.18), transparent 55%),
        var(--color-cream-2);
}

.box-card__visual img[b-jqyipopz4a] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Il dato che conta: quante ne restano. */
.box-card__badge[b-jqyipopz4a] {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    background: rgba(47, 42, 37, 0.86);
    color: #fff;
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

.box-card__badge--out[b-jqyipopz4a] {
    background: rgba(153, 76, 64, 0.9);
}

.box-card__body[b-jqyipopz4a] {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.box-card__name[b-jqyipopz4a] {
    margin: 0;
    font-size: 1rem;
}

.box-card__price[b-jqyipopz4a] {
    margin: 0;
    font-weight: 700;
    color: var(--color-terracotta-dark);
    font-size: 0.95rem;
}

.box-card__desc[b-jqyipopz4a] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-brown-700);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.box-card__facts[b-jqyipopz4a] {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    color: var(--color-brown-500);
}

.box-card__facts strong[b-jqyipopz4a] {
    color: var(--color-brown-700);
}

.box-card__incart[b-jqyipopz4a] {
    /* Sta sull'immagine: così non ruba righe alla descrizione. */
    position: absolute;
    left: 0.45rem;
    bottom: 0.45rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-terracotta-dark);
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.box-card__foot[b-jqyipopz4a] {
    margin-top: auto;
    padding-top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Articoli dichiarati nella box. */
.box-contents[b-jqyipopz4a] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.4rem;
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    font-size: 0.78rem;
    color: var(--color-brown-700);
}

.box-contents__label[b-jqyipopz4a] {
    color: var(--color-brown-500);
}

.box-contents__link[b-jqyipopz4a] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--color-terracotta-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.box-contents__link:hover[b-jqyipopz4a] {
    color: var(--color-brown-900);
}

.box-payment-note[b-jqyipopz4a] {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
    color: var(--color-brown-500);
}

/* Popup scheda articolo: come la card prodotto, senza "aggiungi". */
.product-preview[b-jqyipopz4a] {
    max-width: 560px;
}

.product-preview__head[b-jqyipopz4a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.product-preview__head h3[b-jqyipopz4a] {
    margin: 0 0 0.4rem;
}

.product-preview__body[b-jqyipopz4a] {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.product-preview__visual[b-jqyipopz4a] {
    width: 160px;
    height: 160px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 146, 72, 0.28), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(255, 135, 54, 0.18), transparent 55%),
        var(--color-cream-2);
}

.product-preview__visual img[b-jqyipopz4a] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-preview__price[b-jqyipopz4a] {
    margin: 0 0 0.6rem;
    font-weight: 700;
    color: var(--color-terracotta-dark);
}

.product-preview__desc[b-jqyipopz4a] {
    margin: 0 0 1rem;
    color: var(--color-brown-700);
    font-size: 0.92rem;
}

.product-preview__facts[b-jqyipopz4a] {
    margin: 0;
}

.product-preview__facts dt[b-jqyipopz4a] {
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 0.6rem;
}

.product-preview__facts dd[b-jqyipopz4a] {
    margin: 0.15rem 0 0;
    color: var(--color-brown-700);
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .box-card[b-jqyipopz4a] {
        flex-basis: 100%;
    }

    .product-preview__body[b-jqyipopz4a] {
        grid-template-columns: 1fr;
    }

    .product-preview__visual[b-jqyipopz4a] {
        width: 100%;
        height: 170px;
    }
}

/* Desktop: card orizzontali più larghe, altezza fissa e immagine quadrata che
   riempie lo spazio interno (220 = 252 - 2rem di padding). */
@media (min-width: 641px) {
    .box-card[b-jqyipopz4a] {
        height: 190px;
    }

    .box-card__body[b-jqyipopz4a] {
        height: 100%;
    }

    .box-card__foot[b-jqyipopz4a] {
        margin-top: auto;
    }
}

@media (max-width: 640px) {
    /* Telefono: immagine quadrata alta quanto la card (148 + 22 di padding =
       170) e spazio a destra per nome, prezzo, descrizione su tre righe e
       bottone. */
    /* Telefono: immagine quadrata alta quanto la card (168 + 22 = 190) e, a
       destra, nome, prezzo, descrizione su due righe, contenuto e bottone. */
    .box-card[b-jqyipopz4a] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        height: 190px;
        padding: 0.7rem;
        gap: 0.7rem;
    }

    .box-card__visual[b-jqyipopz4a] {
        flex: 0 0 168px;
        width: 168px;
        height: 168px;
        font-size: 1.7rem;
    }

    .box-card__desc[b-jqyipopz4a] {
        font-size: 0.74rem;
        line-height: 1.3;
        -webkit-line-clamp: 2;
    }

    .box-card__name[b-jqyipopz4a] {
        font-size: 0.95rem;
    }

    .box-card__price[b-jqyipopz4a] {
        font-size: 0.88rem;
    }
}
/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin[b-lz1di98i91] {
    min-height: 100vh;
    background: var(--color-cream);
}

.admin-header[b-lz1di98i91] {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-brown-900);
    color: var(--color-cream-2);
    padding: 0;
}

/* Stessa gabbia del sito pubblico: logo nella stessa posizione. */
.admin-header__inner[b-lz1di98i91] {
    /* riferimento per il menu a tendina: cosi' si apre sotto il burger,
       non contro il bordo destro della finestra (la gabbia e' centrata
       e su schermi larghi il burger sta ~400px dentro) */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
}

.admin-brand[b-lz1di98i91] {
    color: var(--color-cream);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1;
}

.admin-brand img[b-lz1di98i91] {
    display: block;
    /* Stessa altezza del logo del sito pubblico. */
    height: 2.5rem;
    width: auto;
}

.admin-brand span[b-lz1di98i91] {
    /* Come una piccola etichetta: si centra otticamente col logo invece di
       sembrare appoggiata in alto. */
    align-self: center;
    display: inline-flex;
    align-items: center;
    height: 1.4rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.62rem;
    opacity: 0.9;
    line-height: 1;
    /* Il testo del logo sta ~1,2px sotto il centro geometrico: la targhetta
       scende di altrettanto per risultare centrata a occhio. */
    transform: translateY(1.4px);
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
}

.admin-header__right[b-lz1di98i91] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ::deep because NavLink is a child component — see the note on .admin-nav
   below for why a plain scoped selector wouldn't match its rendered <a>. */
.admin-header__right[b-lz1di98i91]  .admin-dashboard-link,
.admin-header__right .admin-dashboard-link[b-lz1di98i91] {
    color: var(--color-cream-2);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}

.admin-header__right[b-lz1di98i91]  .admin-dashboard-link:hover,
.admin-header__right .admin-dashboard-link:hover[b-lz1di98i91] {
    background: rgba(255, 255, 255, 0.08);
}

.admin-header__right[b-lz1di98i91]  .admin-dashboard-link.active,
.admin-header__right .admin-dashboard-link.active[b-lz1di98i91] {
    background: var(--color-terracotta);
    color: white;
}

/* The toggle stays visible at every screen width — this is a top-right
   burger menu on desktop too, not just a mobile fallback. */
.admin-nav-toggle[b-lz1di98i91] {
    display: none;
}

.admin-nav-toggle-label[b-lz1di98i91] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.5rem;
}

.admin-nav-toggle-label span[b-lz1di98i91] {
    width: 24px;
    height: 2px;
    background: var(--color-cream);
    border-radius: 2px;
}

.admin-nav[b-lz1di98i91] {
    position: absolute;
    top: 100%;
    right: 1.25rem;
    display: none;
    flex-direction: column;
    background: var(--color-brown-900);
    border-radius: 12px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    box-shadow: var(--shadow-soft);
    min-width: 200px;
    gap: 0.2rem;
}

.admin-nav-toggle:checked ~ .admin-nav[b-lz1di98i91] {
    display: flex;
}

/* NavLink and the logout <button> are rendered by child components/forms,
   so a plain scoped selector never matches — ::deep reaches into them. */
.admin-nav[b-lz1di98i91]  a,
.admin-nav a[b-lz1di98i91] {
    color: var(--color-cream-2);
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
}

.admin-nav[b-lz1di98i91]  a:hover,
.admin-nav a:hover[b-lz1di98i91] {
    background: rgba(255, 255, 255, 0.08);
}

.admin-nav[b-lz1di98i91]  a.active,
.admin-nav a.active[b-lz1di98i91] {
    background: var(--color-terracotta);
    color: white;
}

.logout-form[b-lz1di98i91] {
    margin: 0;
}

.admin-logout[b-lz1di98i91] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--color-cream-2);
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
}

.admin-logout:hover[b-lz1di98i91] {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.admin-content[b-lz1di98i91] {
    padding: 2rem 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 800px) {
    .admin-content[b-lz1di98i91] {
        padding: 1.5rem 1rem;
    }
}

/* Il link in alto a destra ora porta al sito pubblico, non alla dashboard:
   niente stato "active". */
.admin-dashboard-link[b-lz1di98i91] {
    text-decoration: none;
    white-space: nowrap;
}

.admin-dashboard-link:hover[b-lz1di98i91] {
    background: rgba(255, 255, 255, 0.08);
}
/* /Components/Layout/CartBadge.razor.rz.scp.css */
.cart-widget[b-72f7jpnjys] {
    /* niente position: relative — il pannello prende come riferimento la
       testata, così si ancora alla riga dei menu e non al bottone */
    display: inline-flex;
    align-items: center;
}

.cart-link[b-72f7jpnjys] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.cart-badge[b-72f7jpnjys] {
    margin-left: 0.4rem;
    background: var(--color-terracotta);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    transition: transform 0.2s ease;
}

.cart-badge.is-bumping[b-72f7jpnjys] {
    animation: cart-badge-bump-b-72f7jpnjys 0.4s ease;
}

@keyframes cart-badge-bump-b-72f7jpnjys {
    0% { transform: scale(1); }
    40% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .cart-badge.is-bumping[b-72f7jpnjys] {
        animation: none;
    }
}

/* ---- il pannello: scheda staccata sotto la riga dei menu ---- */

.cart-panel[b-72f7jpnjys] {
    position: absolute;
    /* 12px sotto la riga della testata, allineato al margine del contenuto.
       Nessuna freccia: non è più legato al bottone. */
    top: calc(100% + 0.75rem);
    right: 1.25rem;
    z-index: 10;
    width: 18.75rem;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-cream-2);
    border-radius: 0.94rem;
    box-shadow: 0 1.25rem 2.9rem rgba(40, 30, 20, 0.18);
}

.cart-panel__head[b-72f7jpnjys] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.62rem 0.75rem 0.5rem;
    border-bottom: 1px solid #f1e8d9;
}

.cart-panel__title[b-72f7jpnjys] {
    flex: 1;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a8d7c;
}

.cart-panel__clear[b-72f7jpnjys] {
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    color: #b3a493;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cart-panel__clear:hover[b-72f7jpnjys] {
    color: #8a7f70;
}

.cart-panel__close[b-72f7jpnjys] {
    width: 1.25rem;
    height: 1.25rem;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 999px;
    background: #f6efe3;
    color: #8a7f70;
    font-size: 0.58rem;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
}

.cart-panel__close:hover[b-72f7jpnjys] {
    background: #efe5d4;
}

/* la lista mostra 3 righe esatte, poi scorre */
.cart-panel__list[b-72f7jpnjys] {
    margin: 0;
    padding: 0.2rem 0.45rem 0.35rem;
    list-style: none;
    max-height: calc(2.375rem * 3);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #d9c9b2 #faf5ec;
}

.cart-panel__list[b-72f7jpnjys]::-webkit-scrollbar {
    width: 9px;
}

.cart-panel__list[b-72f7jpnjys]::-webkit-scrollbar-track {
    background: #faf5ec;
    border-radius: 999px;
}

.cart-panel__list[b-72f7jpnjys]::-webkit-scrollbar-thumb {
    background: #d9c9b2;
    border-radius: 999px;
    border: 2px solid #faf5ec;
}

.cart-panel__item[b-72f7jpnjys] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.375rem;
    padding: 0 0.2rem;
    border-bottom: 1px dashed #f4ecdd;
}

.cart-panel__item:last-child[b-72f7jpnjys] {
    border-bottom: none;
}

.cart-panel__name[b-72f7jpnjys] {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-brown-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* i + / - come nella pagina del carrello, ma in scala ridotta:
   la riga è alta 38px e il pannello 300px */
.cart-panel__stepper[b-72f7jpnjys] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.cart-panel__qty[b-72f7jpnjys] {
    min-width: 1.05rem;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--color-brown-900);
}

.cart-panel__stepper .qty-btn[b-72f7jpnjys] {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.9rem;
    border-width: 1px;
}

/* il piede porta al carrello: senza freccia e senza bottone sopra,
   questa è l'unica strada dichiarata */
.cart-panel__foot[b-72f7jpnjys] {
    padding: 0.55rem 0.75rem 0.68rem;
    border-top: 1px solid #f1e8d9;
    background: #fdfaf4;
    border-radius: 0 0 0.94rem 0.94rem;
}

.cart-panel__foot a[b-72f7jpnjys] {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--color-terracotta-dark);
    text-decoration: none;
}

.cart-panel__foot a:hover[b-72f7jpnjys] {
    text-decoration: underline;
}

/* Sotto i 720px il carrello è la pillola in basso (CartSummaryBar),
   non un pannello dentro l'header — che a quella larghezza vive dentro
   l'hamburger e sarebbe comunque nascosto. */
@media (max-width: 719.98px) {
    .cart-panel[b-72f7jpnjys] {
        display: none;
    }
}
/* /Components/Layout/CartSummaryBar.razor.rz.scp.css */
/* La pillola del carrello: solo telefono. Sopra i 720px il carrello vive
   nel pannello dell'header (CartBadge), quindi qui si spegne. */
.cart-summary-bar[b-1h9z2vky67] {
    position: fixed;
    left: 0.625rem;
    right: 0.625rem;
    bottom: 0.625rem;
    /* su iPhone senza tasto home la barra dei gesti sta proprio qui sotto */
    bottom: calc(0.625rem + env(safe-area-inset-bottom));
    z-index: 150;

    display: flex;
    align-items: center;
    gap: 0.5625rem;

    padding: 0.75rem;
    background: var(--color-white);
    color: var(--color-brown-900);
    border: 1px solid var(--color-cream-2);
    border-radius: 0.94rem;
    box-shadow: 0 0.625rem 1.625rem rgba(60, 45, 28, 0.16);

    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cart-summary-bar:active[b-1h9z2vky67] {
    transform: scale(0.99);
    box-shadow: 0 0.35rem 0.9rem rgba(60, 45, 28, 0.18);
}

/* l'icona porta un accenno di terracotta, spento: su bianco un'icona
   grigia fa sembrare la barra disabilitata */
.cart-summary-bar__icon[b-1h9z2vky67] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #b08c6a;
    opacity: 0.85;
}

.cart-summary-bar__icon svg[b-1h9z2vky67] {
    display: block;
}

/* i nomi: una riga sola, si spengono verso destra invece di troncare */
.cart-summary-bar__names[b-1h9z2vky67] {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-brown-900);
    white-space: nowrap;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, #000 82%, transparent 100%);
}

/* il “+N” quando i nomi non ci stanno tutti */
.cart-summary-bar__more[b-1h9z2vky67] {
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 700;
    color: #a49786;
    letter-spacing: 0.02em;
}

.cart-summary-bar__chev[b-1h9z2vky67] {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1;
    color: #c1b3a0;
}

/* sopra la soglia comanda il pannello dell'header */
@media (min-width: 720px) {
    .cart-summary-bar[b-1h9z2vky67] {
        display: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site[b-go1u4mrh8e] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header[b-go1u4mrh8e] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 244, 233, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-cream-2);
}

.site-header__inner[b-go1u4mrh8e] {
    /* riferimento per il pannello del carrello: cosi' si aggancia
       alla riga dei menu invece che al bottone */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
}

.brand[b-go1u4mrh8e] {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-brown-900);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.brand img[b-go1u4mrh8e] {
    height: 2.5rem;
    width: auto;
}

.site-nav[b-go1u4mrh8e] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.site-nav[b-go1u4mrh8e]  a,
.site-nav a[b-go1u4mrh8e] {
    font-weight: 600;
    color: var(--color-brown-700);
}

.site-nav[b-go1u4mrh8e]  a.active,
.site-nav a.active[b-go1u4mrh8e] {
    color: var(--color-terracotta-dark);
}

.cart-nav-item[b-go1u4mrh8e] {
    display: inline-flex;
}

.nav-toggle[b-go1u4mrh8e] {
    display: none;
}

.nav-toggle-label[b-go1u4mrh8e] {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.nav-toggle-label span[b-go1u4mrh8e] {
    width: 24px;
    height: 2px;
    background: var(--color-brown-900);
    border-radius: 2px;
}

main[b-go1u4mrh8e] {
    flex: 1;
}

.site-footer[b-go1u4mrh8e] {
    background: var(--color-brown-900);
    color: var(--color-cream-2);
    padding: 1.5rem 1.25rem;
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
}

/* La pillola del carrello esiste solo sul telefono: sopra i 720px il
   carrello vive nel pannello dell'header. La regola deve stare dentro la
   media query, perche' l'elemento resta nel DOM anche su desktop (solo
   display:none) e :has() aggiungerebbe spazio per una barra invisibile. */
@media (max-width: 719.98px) {
    .site:has(.cart-summary-bar) .site-footer[b-go1u4mrh8e] {
        padding-bottom: 5rem;
    }
}

.site-footer a[b-go1u4mrh8e] {
    color: var(--color-gold);
}

.site-footer p[b-go1u4mrh8e] {
    margin: 0 0 0.35rem;
    line-height: 1.5;
}

.site-footer__name[b-go1u4mrh8e] {
    font-family: 'Gochu', 'Darumadrop One', Georgia, serif;
    font-size: 1.1rem;
    color: var(--color-cream);
}

.site-footer__line[b-go1u4mrh8e] {
    opacity: 0.9;
}

.site-footer__sep[b-go1u4mrh8e] {
    margin: 0 0.5rem;
    opacity: 0.5;
}

.site-footer__legal[b-go1u4mrh8e] {
    opacity: 0.55;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.site-footer__nowrap[b-go1u4mrh8e] {
    white-space: nowrap;
}

.site-footer__admin[b-go1u4mrh8e] {
    opacity: 0.7;
    font-size: 0.8rem;
    margin-top: 0.75rem;
}

@media (max-width: 560px) {
    .site-footer__sep[b-go1u4mrh8e] {
        display: none;
    }

    .site-footer__line[b-go1u4mrh8e] {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }
}

#blazor-error-ui[b-go1u4mrh8e] {
    background: var(--color-terracotta-dark);
    color: white;
    bottom: 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.9rem 1.25rem 0.9rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-go1u4mrh8e] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.75rem;
}

@media (max-width: 720px) {
    .nav-toggle-label[b-go1u4mrh8e] {
        display: flex;
    }

    .site-nav[b-go1u4mrh8e] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-cream);
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.5rem 1.25rem 1rem;
        border-bottom: 1px solid var(--color-cream-2);
        display: none;
    }

    .nav-toggle:checked ~ .site-nav[b-go1u4mrh8e] {
        display: flex;
    }

    /* Home/Prodotti/Carrello are all rendered by child components
       (NavLink, CartBadge) — Blazor's CSS scope attribute only lands on
       elements written directly in this file, so a plain scoped selector
       never matches an <a> a child component renders. ::deep is the
       escape hatch that reaches into them. */
    .site-nav[b-go1u4mrh8e]  a,
    .site-nav a[b-go1u4mrh8e] {
        width: 100%;
        padding: 0.6rem 0;
    }

    .cart-nav-item[b-go1u4mrh8e] {
        width: 100%;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-rcg3addn4x],
.components-reconnect-repeated-attempt-visible[b-rcg3addn4x],
.components-reconnect-failed-visible[b-rcg3addn4x],
.components-pause-visible[b-rcg3addn4x],
.components-resume-failed-visible[b-rcg3addn4x],
.components-rejoining-animation[b-rcg3addn4x] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-rcg3addn4x],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-rcg3addn4x],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-rcg3addn4x],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-rcg3addn4x],
#components-reconnect-modal.components-reconnect-retrying[b-rcg3addn4x],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-rcg3addn4x],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-rcg3addn4x],
#components-reconnect-modal.components-reconnect-failed[b-rcg3addn4x],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-rcg3addn4x] {
    display: block;
}


#components-reconnect-modal[b-rcg3addn4x] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-rcg3addn4x 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-rcg3addn4x 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-rcg3addn4x 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-rcg3addn4x]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-rcg3addn4x 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-rcg3addn4x {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-rcg3addn4x {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-rcg3addn4x {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-rcg3addn4x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-rcg3addn4x] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-rcg3addn4x] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-rcg3addn4x] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-rcg3addn4x] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-rcg3addn4x] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-rcg3addn4x] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-rcg3addn4x 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-rcg3addn4x] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-rcg3addn4x {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
/* Dashboard compatta: stesso impianto di prima, spazi ridotti per stare in
   una schermata desktop. Ordini occupa tutta la colonna sinistra, a destra
   stanno box del giorno e da preparare, così le griglie restano allineate. */
h1[b-uywds6kqcs] {
    margin-bottom: 0.5rem;
}

.date-picker[b-uywds6kqcs] {
    margin-bottom: 0.9rem;
}

.dash-kpis[b-uywds6kqcs] {
    margin: 0 0 1rem;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

[b-uywds6kqcs] .dash-kpi {
    padding: 0.7rem 0.9rem;
}

[b-uywds6kqcs] .dash-kpi__value {
    font-size: 1.35rem;
}

.dashboard-grid[b-uywds6kqcs] {
    gap: 1rem;
    grid-template-columns: 1.4fr 1fr;
    align-items: stretch;
}

.dashboard-grid__main[b-uywds6kqcs] {
    grid-row: span 2;
}

.dashboard-grid[b-uywds6kqcs]  .card.panel {
    padding: 1rem 1.1rem;
}

/* Solo i pannelli della colonna destra hanno un tetto e scorrono dentro. */
.dashboard-grid[b-uywds6kqcs]  .card.panel:not(.dashboard-grid__main) {
    max-height: 18rem;
    overflow: auto;
}

.dashboard-grid[b-uywds6kqcs]  .card.panel h2 {
    margin-bottom: 0.55rem;
    font-size: 1.05rem;
}

.dashboard-grid[b-uywds6kqcs]  .admin-table {
    font-size: 0.84rem;
}

@media (max-width: 900px) {
    .dashboard-grid[b-uywds6kqcs] {
        grid-template-columns: 1fr;
    }

    .dashboard-grid__main[b-uywds6kqcs] {
        grid-row: auto;
    }
}
/* /Components/Pages/Admin/Ordini.razor.rz.scp.css */
/* Interruttore Prodotti/Box: due etichette e un cursore che scorre. */
.orders-switch[b-w0rxmojf0v] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
}

.orders-switch__label[b-w0rxmojf0v] {
    font-size: 0.9rem;
    color: var(--color-brown-500);
    transition: color 0.2s ease;
}

.orders-switch__label--active[b-w0rxmojf0v] {
    color: var(--color-brown-900);
    font-weight: 700;
}

.orders-switch__control[b-w0rxmojf0v] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    cursor: pointer;
}

.orders-switch__control input[b-w0rxmojf0v] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.orders-switch__slider[b-w0rxmojf0v] {
    position: absolute;
    inset: 0;
    background: var(--color-cream-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.orders-switch__slider[b-w0rxmojf0v]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.orders-switch__control input:checked + .orders-switch__slider[b-w0rxmojf0v] {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.orders-switch__control input:checked + .orders-switch__slider[b-w0rxmojf0v]::before {
    transform: translateX(24px);
}

.orders-switch__control input:focus-visible + .orders-switch__slider[b-w0rxmojf0v] {
    outline: 2px solid var(--color-terracotta-dark);
    outline-offset: 2px;
}

/* Le liste d'attesa stanno in fondo alla pagina, staccate dagli ordini. */
.waitlist-section[b-w0rxmojf0v] {
    margin-top: 1.75rem;
}
/* /Components/Pages/Cart.razor.rz.scp.css */
.cart-page[b-u36zo6mc8n] {
    padding: 2.5rem 1.25rem 5rem;
    max-width: 760px;
}

.cart-summary[b-u36zo6mc8n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: var(--color-cream-2);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1.15rem;
}

.cart-summary__total[b-u36zo6mc8n] {
    color: var(--color-terracotta-dark);
    font-size: 1.4rem;
}

.cart-actions[b-u36zo6mc8n] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* /Components/Pages/Checkout.razor.rz.scp.css */
.checkout-page[b-c1bx7cotoj] {
    padding: 2.5rem 1.25rem 5rem;
}

.checkout-grid[b-c1bx7cotoj] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: start;
}

.checkout-form[b-c1bx7cotoj],
.checkout-summary[b-c1bx7cotoj] {
    padding: 2.25rem;
}

.checkout-summary[b-c1bx7cotoj] {
    position: sticky;
    top: 1.5rem;
}

.checkout-form h2[b-c1bx7cotoj] {
    font-size: 1.2rem;
    margin: 0 0 1.25rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-cream-2);
}

/* EditForm injects a hidden antiforgery <input> as the form's actual
   first child, so the visually-first h2 is never :first-child — use
   :first-of-type instead, which ignores that non-h2 sibling. */
.checkout-form h2:first-of-type[b-c1bx7cotoj] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Checkout's .form-hint usages sit right after a .form-row (as a sibling)
   rather than inside one, so the global -tuned-for-inside-a-row default
   sits a bit far below — pull it back up under the row above. Base
   .form-row/.form-field/.form-hint styling itself now lives in app.css. */
.form-hint[b-c1bx7cotoj] {
    margin: -0.75rem 0 1.4rem;
}

.address-field[b-c1bx7cotoj] {
    position: relative;
}

/* Same nested-vs-sibling spacing issue as .address-field .form-hint below:
   this hint sits inside its .form-row, right under the input, so the
   sibling-tuned negative margin above would cram it into the field. */
.form-row .form-hint[b-c1bx7cotoj] {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
}


/* .form-hint's -0.75rem top margin is tuned for when the hint is a
   sibling right AFTER a .form-row (pulling it up to offset that row's own
   margin-bottom). Here the hint is nested INSIDE .address-field's row,
   directly under the input with nothing to offset — the negative margin
   just crammed it against the field above instead. */
.address-field .form-hint[b-c1bx7cotoj] {
    margin: 0.5rem 0 0;
}

/* The suggestion list is plain DOM created by address-autocomplete.js,
   not Blazor markup, so it carries no scope attribute at all — ::deep
   drops the scope requirement on the right-hand selector so these rules
   still reach it. */
.address-field[b-c1bx7cotoj]  .address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.3rem;
    background: var(--color-white);
    border: 1.5px solid var(--color-cream-2);
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
    max-height: 260px;
    overflow-y: auto;
    z-index: 30;
    list-style: none;
    padding: 0.35rem;
}

.address-field[b-c1bx7cotoj]  .address-suggestions li {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-brown-900);
}

.address-field[b-c1bx7cotoj]  .address-suggestions li:hover,
.address-field[b-c1bx7cotoj]  .address-suggestions li.is-active {
    background: var(--color-cream-2);
}

.fulfillment-toggle[b-c1bx7cotoj] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.fulfillment-toggle label[b-c1bx7cotoj] {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 0.75rem;
    border: 1.5px solid var(--color-cream-2);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-brown-700);
}

.fulfillment-toggle label.active[b-c1bx7cotoj] {
    border-color: var(--color-terracotta);
    background: var(--color-cream-2);
    color: var(--color-terracotta-dark);
}

/* display: none removes the input from the tab order entirely, not just
   from view — that made it (and the whole radio group) unreachable by
   keyboard, and left the :has(input:focus-visible) rule below permanently
   dead since a display:none element can never receive focus. Visually
   hidden but still focusable keeps the custom label styling while restoring
   real keyboard access. */
.fulfillment-toggle input[b-c1bx7cotoj] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.fulfillment-toggle label:has(input:focus-visible)[b-c1bx7cotoj] {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 2px;
}

.checkout-error[b-c1bx7cotoj] {
    color: #b3261e;
    font-weight: 600;
    margin-bottom: 1rem;
}

.btn-block[b-c1bx7cotoj] {
    width: 100%;
    margin-top: 0.5rem;
}

.checkout-summary ul[b-c1bx7cotoj] {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkout-summary li[b-c1bx7cotoj] {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.checkout-summary__total[b-c1bx7cotoj] {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.2rem;
    border-top: 1px solid var(--color-cream-2);
    padding-top: 1rem;
    color: var(--color-terracotta-dark);
}

.checkout-summary__note[b-c1bx7cotoj] {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--color-brown-500);
}

@media (max-width: 860px) {
    .checkout-grid[b-c1bx7cotoj] {
        grid-template-columns: 1fr;
    }

    .checkout-summary[b-c1bx7cotoj] {
        order: -1;
        position: static;
    }

    .checkout-form[b-c1bx7cotoj],
    .checkout-summary[b-c1bx7cotoj] {
        padding: 1.5rem;
    }

    .form-row--split[b-c1bx7cotoj] {
        grid-template-columns: 1fr;
    }
}

.box-pickup-note[b-c1bx7cotoj] {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-cream-2) 55%, var(--color-white));
    color: var(--color-brown-700);
    font-size: 0.9rem;
}

.checkout-summary__facts[b-c1bx7cotoj] {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    color: var(--color-brown-700);
}
/* /Components/Pages/Contatti.razor.rz.scp.css */
.contact-page[b-xit2j37zqp] {
    max-width: 620px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 5rem;
}

.contact-lead[b-xit2j37zqp] {
    color: var(--color-brown-700);
    margin-bottom: 1.75rem;
}

.contact-form[b-xit2j37zqp],
.contact-success[b-xit2j37zqp] {
    padding: 2.25rem;
}

/* This page's .form-hint sits right after a .form-row--split (as a
   sibling), so it needs to pull back up under it — base .form-row /
   .form-field / .form-hint styling now lives in app.css. */
.form-hint[b-xit2j37zqp] {
    margin: -0.75rem 0 1.4rem;
}

.contact-error[b-xit2j37zqp] {
    color: #b3261e;
    font-weight: 600;
    margin-bottom: 1rem;
}

.btn-block[b-xit2j37zqp] {
    width: 100%;
    margin-top: 0.5rem;
}

.contact-success p[b-xit2j37zqp] {
    margin: 0;
    font-weight: 600;
    color: var(--color-brown-900);
}

@media (max-width: 620px) {
    .contact-form[b-xit2j37zqp],
    .contact-success[b-xit2j37zqp] {
        padding: 1.5rem;
    }
}

.contact-hours[b-xit2j37zqp] {
    margin-top: 2.5rem;
}

.contact-hours h2[b-xit2j37zqp] {
    margin: 0 0 1rem;
}

.contact-hours__list[b-xit2j37zqp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-hours__list li[b-xit2j37zqp] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--color-brown-900);
}

.contact-hours__list li:last-child[b-xit2j37zqp] {
    color: var(--color-brown-700);
}

.contact-map[b-xit2j37zqp] {
    margin-top: 2.5rem;
}

.contact-map iframe[b-xit2j37zqp] {
    width: 100%;
    height: 320px;
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.contact-map__link[b-xit2j37zqp] {
    display: inline-block;
    margin-top: 0.6rem;
    font-weight: 600;
    font-size: 0.9rem;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.hero[b-om7b4aak7j] {
    /* Più bassa: prima occupava quasi tutta la prima schermata. */
    position: relative;
    padding: 1.9rem 0 1.6rem;
}

/* L'alone non appartiene alla hero: sta sul blocco che comprende hero e box,
   così sfocia nella sezione sotto e si spegne lentamente nel crema. */
.home-top[b-om7b4aak7j] {
    position: relative;
    isolation: isolate;
    /* Sta sopra le sezioni che seguono: così i modali aperti dentro la lista
       box non finiscono sotto le categorie o il footer. */
    z-index: 3;
}

.home-top[b-om7b4aak7j]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /* Alto abbastanza da arrivare alle card box e spegnersi lì. */
    height: 980px;
    background: radial-gradient(
        ellipse 78% 52% at 50% 6%,
        rgba(255, 128, 40, 0.42) 0%,
        rgba(255, 156, 86, 0.27) 30%,
        rgba(255, 188, 128, 0.13) 52%,
        rgba(255, 214, 172, 0.05) 70%,
        transparent 84%
    );
    pointer-events: none;
    z-index: -1;
}

.hero__inner[b-om7b4aak7j] {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.hero__eyebrow[b-om7b4aak7j] {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-terracotta-dark);
    margin-bottom: 0.5rem;
}

.hero__inner h1[b-om7b4aak7j] {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.hero__lead[b-om7b4aak7j] {
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--color-brown-700);
    max-width: 46ch;
    margin: 0.6rem auto 0;
}

.hero__chips[b-om7b4aak7j] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
}

.hero__chips li[b-om7b4aak7j] {
    background: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
    font-size: 0.8rem;
    color: var(--color-brown-700);
}

.hero__actions[b-om7b4aak7j] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.section-categories[b-om7b4aak7j] {
    padding: 2rem 1.25rem;
    text-align: left;
}

.section-categories__head[b-om7b4aak7j] {
    margin-bottom: 0.25rem;
}

.category-grid[b-om7b4aak7j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    text-align: left;
}

.category-card[b-om7b4aak7j] {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    color: var(--color-brown-900);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover[b-om7b4aak7j] {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(51, 51, 51, 0.16);
}

.category-card__icon[b-om7b4aak7j] {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 146, 72, 0.28), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(255, 135, 54, 0.18), transparent 55%),
        var(--color-cream-2);
}

.category-card__image[b-om7b4aak7j] {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
}

.category-card__name[b-om7b4aak7j] {
    flex: 1;
    font-weight: 600;
}

.category-card .badge[b-om7b4aak7j] {
    flex-shrink: 0;
}

.section-story[b-om7b4aak7j] {
    padding: 1rem 1.25rem 2rem;
}

.story-card[b-om7b4aak7j] {
    background: var(--color-brown-900);
    color: var(--color-cream);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.story-card h2[b-om7b4aak7j] {
    color: var(--color-cream);
}

.story-card p[b-om7b4aak7j] {
    color: var(--color-cream-2);
    max-width: 55ch;
    margin: 0.75rem auto 1.25rem;
}

.category-card--soon[b-om7b4aak7j] {
    filter: grayscale(1);
    opacity: 0.6;
}

.section-coming-soon[b-om7b4aak7j] {
    padding-top: 0;
}

@media (max-width: 640px) {
    .home-top[b-om7b4aak7j]::before {
        height: 780px;
    }
}
/* /Components/Pages/Menu.razor.rz.scp.css */
.menu-page[b-gc6c05qokd] {
    padding: 3rem 1.25rem 5rem;
}

.menu-header[b-gc6c05qokd] {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto 3rem;
}

.menu-header p[b-gc6c05qokd] {
    color: var(--color-brown-700);
}

.menu-category[b-gc6c05qokd] {
    margin-bottom: 3rem;
    scroll-margin-top: 6rem;
}

.menu-category h2[b-gc6c05qokd] {
    border-bottom: 2px solid var(--color-cream-2);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    /* Il badge non deve incollarsi al nome della categoria. */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.product-grid[b-gc6c05qokd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.product-card[b-gc6c05qokd] {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover[b-gc6c05qokd] {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(51, 51, 51, 0.15);
}

.product-card--unavailable[b-gc6c05qokd] {
    opacity: 0.6;
}

.product-card__link[b-gc6c05qokd] {
    color: inherit;
    display: block;
    margin-bottom: 1rem;
}

.product-card__visual[b-gc6c05qokd] {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 146, 72, 0.28), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(255, 135, 54, 0.18), transparent 55%),
        var(--color-cream-2);
    font-size: 2.5rem;
}

.product-card__visual img[b-gc6c05qokd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card__link h3[b-gc6c05qokd] {
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}

.product-card__price[b-gc6c05qokd] {
    font-weight: 700;
    color: var(--color-terracotta-dark);
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

.product-card__desc[b-gc6c05qokd] {
    font-size: 0.9rem;
    color: var(--color-brown-700);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__facts[b-gc6c05qokd] {
    font-size: 0.78rem;
    color: var(--color-brown-500);
    margin: 0.4rem 0 0;
}

.product-card__facts strong[b-gc6c05qokd] {
    color: var(--color-brown-700);
}

.product-card__footer[b-gc6c05qokd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.product-card__price[b-gc6c05qokd] {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-terracotta-dark);
}

.btn-sm[b-gc6c05qokd] {
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
}

/* Smaller, denser cards on phones so more of the catalog is visible at
   once without endless one-at-a-time scrolling. */
@media (max-width: 640px) {
    .menu-page[b-gc6c05qokd] {
        padding: 2rem 0.85rem 3rem;
    }

    .product-grid[b-gc6c05qokd] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .product-card[b-gc6c05qokd] {
        padding: 0.75rem;
    }

    .product-card__visual[b-gc6c05qokd] {
        aspect-ratio: 1 / 1;
        margin-bottom: 0.6rem;
        font-size: 1.75rem;
    }

    .product-card__link[b-gc6c05qokd] {
        margin-bottom: 0.6rem;
    }

    .product-card__link h3[b-gc6c05qokd] {
        font-size: 0.95rem;
        margin-bottom: 0.25rem;
    }

    .product-card__desc[b-gc6c05qokd] {
        font-size: 0.78rem;
    }

    .product-card__facts[b-gc6c05qokd] {
        display: none;
    }

    .product-card__price[b-gc6c05qokd] {
        font-size: 0.95rem;
    }

    .btn-sm[b-gc6c05qokd] {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ---- Surprise boxes ---------------------------------------------------- */

.product-grid--boxes[b-gc6c05qokd] {
    margin-bottom: 0.5rem;
}

.product-card--box[b-gc6c05qokd] {
    border: 1px solid color-mix(in srgb, var(--color-terracotta-dark) 25%, transparent);
}

/* Teaser for categories whose real catalogue isn't online yet: visible, but
   clearly not buyable — no price, no detail page, muted colours. */
.product-card--soon[b-gc6c05qokd] {
    filter: grayscale(1);
    opacity: 0.55;
    cursor: default;
}

.product-card--soon:hover[b-gc6c05qokd] {
    transform: none;
    box-shadow: var(--shadow-soft);
}

.product-card__soon-label[b-gc6c05qokd] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-brown-500);
    margin: 0 0 0.5rem;
}

.menu-category--soon h2[b-gc6c05qokd] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.box-meta[b-gc6c05qokd] {
    font-size: 0.82rem;
    color: var(--color-brown-700);
    margin: 0.5rem 0 0;
}

.box-meta--cart[b-gc6c05qokd] {
    color: var(--color-terracotta-dark);
    font-weight: 600;
}

.box-window[b-gc6c05qokd] {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    color: var(--color-brown-700);
}

.box-payment-note[b-gc6c05qokd] {
    margin: 0.75rem 0 1.5rem;
    font-size: 0.85rem;
    color: var(--color-brown-500);
}
/* /Components/Pages/OrderConfirmation.razor.rz.scp.css */
.confirmation-page[b-2fy56h3zar] {
    padding: 3rem 1.25rem 5rem;
    display: flex;
    justify-content: center;
}

.confirmation-stack[b-2fy56h3zar] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 560px;
    width: 100%;
}

.confirmation-card[b-2fy56h3zar] {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 3rem;
    text-align: center;
}

.confirmation-icon[b-2fy56h3zar] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-terracotta);
    color: white;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.confirmation-details[b-2fy56h3zar] {
    background: var(--color-cream-2);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.95rem;
}

.confirmation-items[b-2fy56h3zar] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.confirmation-items li[b-2fy56h3zar] {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.confirmation-total[b-2fy56h3zar] {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.2rem;
    border-top: 1px solid var(--color-cream-2);
    padding-top: 1rem;
    margin-bottom: 1.75rem;
    color: var(--color-terracotta-dark);
}

.confirmation-icon--cancelled[b-2fy56h3zar] {
    background: #b3261e;
}

.confirmation-edit[b-2fy56h3zar] {
    padding: 2rem;
    text-align: left;
}

.confirmation-edit__hint[b-2fy56h3zar] {
    font-size: 0.9rem;
    color: var(--color-brown-500);
    margin: -0.5rem 0 1.25rem;
}

.confirmation-edit__message[b-2fy56h3zar] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-terracotta-dark);
    margin-bottom: 1rem;
}

.confirmation-edit__items[b-2fy56h3zar] {
    margin-bottom: 0.75rem;
}

.sheet-category[b-2fy56h3zar] {
    margin: 1.1rem 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brown-500);
}

.sheet-category:first-of-type[b-2fy56h3zar] {
    margin-top: 0;
}

.sheet-empty[b-2fy56h3zar] {
    text-align: center;
    color: var(--color-brown-500);
    font-size: 0.9rem;
    padding: 1.5rem 0;
}

.product-grid[b-2fy56h3zar] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.product-card[b-2fy56h3zar] {
    background: var(--color-cream);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-card__visual[b-2fy56h3zar] {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 146, 72, 0.28), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(255, 135, 54, 0.18), transparent 55%),
        var(--color-cream-2);
    font-size: 1.8rem;
}

.product-card__visual img[b-2fy56h3zar] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card .pname[b-2fy56h3zar] {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.product-card button[b-2fy56h3zar] {
    align-self: flex-start;
    background: var(--color-terracotta);
    color: var(--color-white);
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.product-card button:hover[b-2fy56h3zar] {
    background: var(--color-terracotta-dark);
}

.confirmation-edit__actions[b-2fy56h3zar] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .confirmation-edit[b-2fy56h3zar] {
        padding: 1.5rem;
    }
}
/* /Components/Pages/ProductDetail.razor.rz.scp.css */
.product-detail[b-buawsvgc4g] {
    padding: 2.5rem 1.25rem 5rem;
}

.back-link[b-buawsvgc4g] {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-weight: 600;
    color: var(--color-brown-700);
}
.product-detail__card[b-buawsvgc4g] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2rem;
    align-items: start;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    max-width: 980px;
    margin: 0 auto;
}
.product-detail__visual[b-buawsvgc4g] {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    font-size: 5rem;
    text-align: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 146, 72, 0.28), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(255, 135, 54, 0.18), transparent 55%),
        var(--color-cream-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail__visual img[b-buawsvgc4g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail__price[b-buawsvgc4g] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-terracotta-dark);
    margin: 0.25rem 0 1rem;
}

.product-detail__desc[b-buawsvgc4g] {
    color: var(--color-brown-700);
    margin-bottom: 1.5rem;
}

.product-detail__facts[b-buawsvgc4g] {
    margin: 0 0 2rem;
}

.product-detail__facts dt[b-buawsvgc4g] {
    font-weight: 700;
    margin-top: 0.75rem;
}

.product-detail__facts dd[b-buawsvgc4g] {
    margin: 0.2rem 0 0;
    color: var(--color-brown-700);
}

.product-detail__actions[b-buawsvgc4g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.product-detail__qty[b-buawsvgc4g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.product-detail__qty input[b-buawsvgc4g] {
    width: 3.5rem;
    text-align: center;
    padding: 0.65rem 0.4rem;
}

@media (max-width: 720px) {
    .product-detail__card[b-buawsvgc4g] {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

    .product-detail__visual[b-buawsvgc4g] {
        font-size: 5rem;
    }
}

/* Proportions: the card stops at 980px and the photo is a 4:3 block capped at
   400px wide (≈300px tall) instead of a full square column. On narrow screens
   it stacks and the photo takes the full width. */
@media (max-width: 900px) {
    .product-detail__card[b-buawsvgc4g] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .product-detail__visual[b-buawsvgc4g] {
        max-width: none;
    }
}

/* Coming-soon notice: badge and sentence on one baseline, no phantom gaps from
   the form-hint margins. */
.product-detail__soon[b-buawsvgc4g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.product-detail__soon-text[b-buawsvgc4g] {
    font-size: 0.85rem;
    color: var(--color-brown-700);
    line-height: 1.35;
}