/* =====================================================================
   «Crea il tuo vassoio» — Vassoio Virtuale
   Lomazzi Federico (c) 2026 — https://lomazzifederico.it
   Quasi solo smartphone: header sticky (formato + posti) → categorie → card → riepilogo sticky sopra la bottom nav.
   I posti sono mostrati come celle di una griglia (misura dello spazio, NON disposizione reale dei dolci).
   Il colore non è mai l'unico segnale: testo «12 / 20 posti utilizzati» sempre presente.
   ===================================================================== */

.page-tray .app-content { animation: none; }   /* la dock "fixed" deve restare sopra la nav */
.vt { --dock-h: 88px; --vt-ink: var(--color-primary); display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-6); }
.vt--compose { padding-bottom: calc(var(--dock-h) + var(--space-6)); }

/* palette dei dolci nelle celle (5 toni caldi, contrasto tra loro) */
.t0 { --cell: #C2410C; } .t1 { --cell: #E8445A; } .t2 { --cell: #B45309; } .t3 { --cell: #7C3AED; } .t4 { --cell: #0F766E; }

/* ---------- Testata ---------- */
.vt-hero { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-1); }
.vt-kicker {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-caramel-strong);
}
.vt-title { font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.03em; color: var(--vt-ink); }
.vt-lead { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text-muted); max-width: 34ch; }

.vt-flash {
    display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.4;
    background: var(--color-surface-alt); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border-strong);
}
.vt-flash .icon { flex: none; margin-top: 2px; }
.vt-flash--error { background: #FFF1EF; color: var(--color-danger); box-shadow: inset 0 0 0 1px rgba(180, 35, 53, 0.25); }
.vt-flash--warning { background: #FFF4E0; color: #6B4A12; box-shadow: inset 0 0 0 1px rgba(183, 121, 31, 0.3); }
.vt-flash--success { background: #E9F5EC; color: #245C37; box-shadow: inset 0 0 0 1px rgba(62, 142, 90, 0.3); }
.vt-msgs { display: flex; flex-direction: column; gap: var(--space-2); }
.vt-msgs:empty { display: none; }

/* ---------- Vassoi in corso ---------- */
.vt-resume {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); align-items: center;
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); text-decoration: none;
    background: var(--color-primary); color: var(--color-primary-contrast); box-shadow: var(--shadow-raised);
}
.vt-resume--order { background: #fff; color: var(--color-text); box-shadow: var(--shadow-card), inset 0 0 0 2px var(--color-caramel); }
.vt-resume__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, 0.16); font-size: 1.15rem; }
.vt-resume--order .vt-resume__icon { background: var(--tint-caramel); color: var(--color-caramel-strong); }
.vt-resume__text { display: flex; flex-direction: column; min-width: 0; }
.vt-resume__text span { font-size: var(--fs-xs); font-weight: var(--fw-bold); opacity: 0.85; }
.vt-resume__go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-heavy); }

/* ---------- Come funziona (posti) ---------- */
.vt-how { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--tint-butter); }
.vt-how__text { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #6B4A12; }
.vt-how__text .icon { margin-top: 3px; flex: none; }
.vt-how__units { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.vt-units {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 6px; border-radius: var(--radius-pill);
    background: #fff; color: var(--color-primary); font-size: var(--fs-xs); font-weight: var(--fw-heavy); white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
}
.vt-units__dots { display: inline-flex; gap: 2px; }
.vt-units__dots i { width: 8px; height: 8px; border-radius: 2px; background: var(--color-caramel); }
.vt-units--2 .vt-units__dots i { background: #C2410C; }
.vt-units--3 .vt-units__dots i { background: var(--color-accent); }

/* ---------- Formati (bento) ---------- */
.vt-formats { display: grid; gap: var(--space-3); }
.vt-format-form { margin: 0; }
.vt-format {
    position: relative; width: 100%; display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto auto auto; column-gap: var(--space-4);
    align-items: center; text-align: left; padding: var(--space-4); border: 0; border-radius: var(--radius-xl); cursor: pointer;
    background: #fff; color: var(--color-text); font: inherit; overflow: hidden;
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease;
    touch-action: manipulation; animation: vt-rise var(--dur-slow) var(--ease-out) both;
}
li:nth-child(2) > .vt-format-form .vt-format { animation-delay: 50ms; }
li:nth-child(3) > .vt-format-form .vt-format { animation-delay: 100ms; }
@keyframes vt-rise { from { opacity: 0; transform: translateY(10px); } }
.vt-format::before {   /* fascia diagonale: carattere "pasticceria", non decorazione gratuita */
    content: ""; position: absolute; inset: 0 auto 0 0; width: 138px;
    background: repeating-linear-gradient(-45deg, var(--vt-band, var(--tint-caramel)) 0 10px, transparent 10px 20px); opacity: 0.55;
}
.vt-format--1 { --vt-band: var(--tint-rose); }
.vt-format--2 { --vt-band: var(--tint-peach); }
.vt-format--3 { --vt-band: var(--tint-butter); }
.vt-format:active { transform: scale(0.98); }
.vt-format:hover { box-shadow: var(--shadow-raised), inset 0 0 0 2px var(--color-caramel); }
.vt-format__art { position: relative; grid-row: 1 / -1; display: grid; place-items: center; width: 112px; }
.vt-format__name { font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem); font-weight: 900; letter-spacing: -0.01em; line-height: 1; color: var(--vt-ink); }
.vt-format__size { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.vt-format__cap { font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.vt-format__fee {
    justify-self: start; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-primary-contrast);
    font-size: var(--fs-xs); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums;
}
.vt-format__go {
    position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--color-bg-deep); color: var(--vt-ink);
}

.tray-art { width: 100%; height: auto; overflow: visible; }
.tray-art__shadow { fill: rgba(62, 32, 22, 0.14); }
.tray-art__lace circle { fill: #FFF8EF; stroke: rgba(154, 84, 24, 0.35); stroke-width: 1; }
.tray-art__base { fill: #E9C79A; stroke: #9A5418; stroke-width: 2.2; }
.tray-art__inner { fill: #F6E1C1; stroke: rgba(154, 84, 24, 0.35); stroke-width: 1; stroke-dasharray: 3 3; }

.vt-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vt-steps li {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: var(--radius-pill);
    background: var(--color-surface-alt); font-size: var(--fs-xs); font-weight: var(--fw-heavy); color: var(--color-text-muted);
}
.vt-steps span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--vt-ink); }
.vt-steps li.is-on { background: var(--color-primary); color: var(--color-primary-contrast); }
.vt-note { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.vt-note .icon { margin-top: 3px; color: var(--color-caramel-strong); }

.vt-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-7) var(--space-4); border-radius: var(--radius-xl); background: var(--color-surface-alt); }
.vt-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #fff; color: var(--color-caramel-strong); font-size: 1.6rem; }
.vt-empty__title { font-size: var(--fs-lg); font-weight: 900; max-width: 28ch; color: var(--vt-ink); }
.vt-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

/* ---------- Composizione: header sticky ---------- */
.vt-bar {
    position: sticky; top: 0; z-index: 8; margin-inline: calc(-1 * var(--page-gutter)); padding: var(--space-2) var(--page-gutter) var(--space-3);
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg) 88%, rgba(251, 243, 234, 0.0) 100%);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.vt-bar__row { display: flex; align-items: center; gap: var(--space-3); }
.vt-bar__back {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: #fff; color: var(--vt-ink); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border-strong);
}
.vt-bar__main { flex: 1; min-width: 0; }
.vt-bar__title { font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--vt-ink); }
.vt-meter { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border); }
.vt-meter__text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.vt-meter__text strong { color: var(--color-text); font-weight: 900; }
.vt-meter__text [data-fill] { font-variant-numeric: tabular-nums; }

.vt-cells { display: flex; gap: 3px; }
.vt-cell { display: block; flex: 1 1 0; min-width: 3px; height: 14px; border-radius: 3px; background: var(--color-bg-deep); box-shadow: inset 0 0 0 1px rgba(92, 46, 28, 0.08); transition: background-color var(--dur-base) ease, transform var(--dur-base) var(--ease-out); }
.vt-cell.is-on { background: var(--cell, var(--color-caramel)); box-shadow: none; }
.vt-cell.is-new { animation: vt-pop 320ms var(--ease-out); }
@keyframes vt-pop { 40% { transform: scaleY(1.45); } }
.vt-cells--lg { gap: 4px; }
.vt-cells--lg .vt-cell { height: 20px; border-radius: 4px; }

.vt-change { position: relative; flex: none; }
.vt-change__btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-pill);
    background: var(--color-surface-alt); color: var(--vt-ink); font-size: var(--fs-sm); font-weight: var(--fw-heavy); cursor: pointer; list-style: none;
    box-shadow: inset 0 0 0 1px var(--color-border-strong); white-space: nowrap;
}
.vt-change__btn::-webkit-details-marker { display: none; }
.vt-change[open] .vt-change__btn { background: var(--color-primary); color: var(--color-primary-contrast); }
.vt-change__pop {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(92vw, 380px);
    display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg);
    background: #fff; box-shadow: var(--shadow-raised), inset 0 0 0 1px var(--color-border);
    animation: vt-rise var(--dur-base) var(--ease-out) both;
}
.vt-change__h { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-text-muted); padding: 0 var(--space-1); }
.vt-fopt { margin: 0; }
.vt-fopt__btn {
    width: 100%; display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3); align-items: center; text-align: left;
    padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font: inherit; cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.vt-fopt__btn:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--color-caramel); }
.vt-fopt.is-selected .vt-fopt__btn { background: var(--tint-caramel); box-shadow: inset 0 0 0 2px var(--color-caramel-strong); cursor: default; }
.vt-fopt.is-small .vt-fopt__btn { opacity: 0.6; cursor: not-allowed; }
.vt-fopt__text { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-sm); }
.vt-fopt__text strong { font-size: var(--fs-md); font-weight: 900; color: var(--vt-ink); }
.vt-fopt__state { font-size: var(--fs-xs); font-weight: var(--fw-heavy); color: var(--color-caramel-strong); }
.vt-fopt.is-small .vt-fopt__state { color: var(--color-danger); }

/* ---------- Stato: spazio residuo, pieno, suggerimenti ---------- */
.vt-state { display: flex; flex-direction: column; gap: var(--space-2); }
.vt-state__msg { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.vt-state__full { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; margin-right: 4px; border-radius: var(--radius-pill); background: var(--color-success); color: #fff; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); }
.vt-suggest {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); margin: 0;
}
.vt-suggest[hidden] { display: none; }
.vt-suggest--up { background: linear-gradient(120deg, #3E2016 0%, #6E3620 100%); color: #FFF6EE; box-shadow: var(--shadow-raised); }
.vt-suggest--down { padding: 0 0 0 var(--space-3); border-radius: 0; border-left: 3px solid var(--color-caramel); font-size: var(--fs-sm); }
.vt-suggest--down .vt-suggest__text { font-weight: var(--fw-regular); color: var(--color-text-muted); }
.vt-suggest__text { flex: 1 1 200px; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.vt-suggest__btn {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill);
    background: #FFF6EE; color: var(--color-primary); font: inherit; font-weight: 900; cursor: pointer; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--fs-sm);
}
.vt-suggest__link { min-height: 44px; padding: 0 var(--space-2); border: 0; background: none; color: var(--color-caramel-strong); font: inherit; font-weight: var(--fw-heavy); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* gli avvisi stanno sopra il riepilogo sticky, mai sopra il pulsante «Continua» */
.page-tray .toast-region { bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--dock-h, 88px) + var(--space-2)); }
@media (max-width: 599px) { .vt-bar .vt-kicker, .vt-hide-sm { display: none; } }

/* ---------- Categorie ---------- */
.vt-cats { margin-inline: calc(-1 * var(--page-gutter)); padding: 0 var(--page-gutter); }
.vt-cats__track { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.vt-cats__track::-webkit-scrollbar { display: none; }
.vt-cat {
    flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill);
    background: var(--color-surface-alt); color: var(--vt-ink); text-decoration: none; font-weight: var(--fw-heavy); font-size: var(--fs-sm);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.vt-cat.is-on { background: linear-gradient(180deg, #9C5530 0%, #6E3620 100%); color: #FFF6EE; box-shadow: 0 10px 20px -12px rgba(92, 46, 28, 0.85); }

/* ---------- Card dei dolci ---------- */
.vt-list { display: grid; gap: var(--space-3); }
.vt-cat-h { margin-top: var(--space-2); font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-caramel-strong); scroll-margin-top: 170px; }
.vt-card {
    display: grid; grid-template-columns: 92px 1fr; gap: var(--space-3); align-items: start;
    padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface);
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border); scroll-margin-top: 170px;
}
.vt-card[hidden], .vt-cat-h[hidden] { display: none; }
.vt-card__media { width: 92px; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-alt); }
.vt-card__img { width: 100%; height: 100%; object-fit: cover; }
.vt-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vt-card__name { font-size: 1.05rem; font-weight: 900; line-height: 1.2; }
.vt-card__desc { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-lines { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.vt-line {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-2);
    padding: 4px 0 4px var(--space-2); border-radius: var(--radius-sm); transition: background-color var(--dur-base) ease;
}
.vt-line.is-picked { background: var(--tint-caramel); }
.vt-line__info { display: flex; flex-direction: column; min-width: 0; }
.vt-line__label { font-weight: var(--fw-heavy); font-size: var(--fs-sm); }
.vt-line__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vt-line__price { font-weight: 900; color: var(--vt-ink); font-variant-numeric: tabular-nums; }
.vt-line__why { grid-column: 1 / -1; font-size: var(--fs-xs); font-weight: var(--fw-heavy); color: var(--color-caramel-strong); }
.vt-line__why[hidden] { display: none; }

.vt-qty { margin: 0; }
.qty { display: inline-flex; align-items: center; gap: 2px; }
.qty__btn {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 13px; cursor: pointer; font-size: 0.95rem;
    transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, opacity var(--dur-fast) ease; touch-action: manipulation;
}
.qty__btn:active { transform: scale(0.9); }
.qty__btn--minus { background: var(--color-bg-deep); color: var(--color-primary); }
.qty__btn--plus { background: var(--color-primary); color: var(--color-primary-contrast); }
.qty__btn--plus.is-blocked { background: var(--color-bg-deep); color: rgba(92, 46, 28, 0.4); cursor: help; }
.qty__val { min-width: 30px; text-align: center; font-size: 1.1rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--color-text); }
.qty:not(.has-qty) .qty__btn--minus, .qty:not(.has-qty) .qty__val { display: none; }
.qty__val.is-bump { animation: vt-bump 260ms var(--ease-out); }
@keyframes vt-bump { 40% { transform: scale(1.35); color: var(--color-accent-strong); } }

.vt-off { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: #FFF1EF; }
.vt-off__h { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 900; color: var(--color-danger); }
.vt-off__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; font-weight: var(--fw-bold); }

/* ---------- Dock: riepilogo sempre visibile ---------- */
.vt-dock {
    position: fixed; z-index: 35; left: 0; right: 0; bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding: var(--space-3) var(--page-gutter) var(--space-2);
    background: linear-gradient(to top, var(--color-bg) 72%, rgba(251, 243, 234, 0));
}
.vt-dock__inner {
    display: flex; align-items: center; gap: var(--space-3); max-width: 680px; margin: 0 auto; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-raised), inset 0 0 0 1px var(--color-border);
}
.vt-dock__sum { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.vt-dock__count { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-dock__total { font-size: 1.2rem; font-weight: 900; color: var(--vt-ink); font-variant-numeric: tabular-nums; }
.vt-dock__cta { flex: none; min-width: 148px; justify-content: center; text-transform: uppercase; letter-spacing: 0.04em; }
.vt-dock__cta.is-disabled { opacity: 0.45; pointer-events: none; }

/* ---------- Riepilogo ---------- */
.vt-hero--step .vt-title { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.8rem); }
.vt-sum { display: grid; gap: var(--space-3); }
.vt-sum__tray {
    display: grid; grid-template-columns: 96px 1fr; gap: var(--space-2) var(--space-4); align-items: center;
    padding: var(--space-4); border-radius: var(--radius-xl); color: #FFF6EE;
    background: linear-gradient(135deg, #3E2016 0%, #6E3620 70%, #9C5530 100%); box-shadow: var(--shadow-raised);
}
.vt-sum__tray .tray-art__base { fill: #F1D3A8; }
.vt-sum__art { width: 96px; }
.vt-sum__name { font-size: 1.6rem; font-weight: 900; line-height: 1; }
.vt-sum__size { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-sm); font-weight: var(--fw-bold); opacity: 0.85; }
.vt-sum__stats { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-2) 0 0; }
.vt-sum__stats div { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.1); }
.vt-sum__stats dt { font-size: var(--fs-xs); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }
.vt-sum__stats dd { margin: 0; font-size: 1.9rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.vt-sum__stats small { font-size: 1rem; opacity: 0.75; }
.vt-sum__tray .vt-cells { grid-column: 1 / -1; }
.vt-sum__tray .vt-cell { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
.vt-sum__tray .vt-cell.is-on { background: var(--cell); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.vt-sum__box { padding: var(--space-4); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border); }
.vt-sum__h { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--fs-md); font-weight: 900; color: var(--vt-ink); }
.vt-comp { display: flex; flex-direction: column; }
.vt-comp__row { display: grid; grid-template-columns: 10px auto 1fr auto; gap: var(--space-2); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border-strong); }
.vt-comp__row.is-off .vt-comp__name { color: var(--color-danger); text-decoration: line-through; }
.vt-comp__sw { align-self: center; width: 10px; height: 10px; border-radius: 3px; background: var(--cell); }
.vt-comp__qty { font-weight: 900; font-variant-numeric: tabular-nums; }
.vt-comp__name { display: flex; flex-direction: column; font-weight: var(--fw-heavy); min-width: 0; }
.vt-comp__name small { font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: var(--fw-bold); }
.vt-comp__tot { font-weight: 900; font-variant-numeric: tabular-nums; }
.vt-money { display: grid; gap: 4px; margin: var(--space-3) 0 0; }
.vt-money div { display: flex; justify-content: space-between; font-weight: var(--fw-bold); }
.vt-money dd { margin: 0; font-variant-numeric: tabular-nums; }
.vt-money dd.is-free { color: var(--color-success); font-weight: var(--fw-heavy); }
.vt-money__total { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 2px solid var(--color-primary); font-size: var(--fs-lg); }
.vt-money__total dt, .vt-money__total dd { font-weight: 900; color: var(--vt-ink); }
.vt-money__total dd { font-size: 1.6rem; }
.vt-pay { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-success); font-weight: var(--fw-heavy); }
.vt-alg__dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); margin: 0; font-size: var(--fs-sm); }
.vt-alg__dl dt { font-weight: 900; }
.vt-alg__dl dd { margin: 0; }
.vt-alg .food-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.vt-alg .food-badge { padding: 4px 10px; border-radius: 999px; background: #E9F3EC; color: #2E5E3F; font-size: 0.8rem; font-weight: var(--fw-heavy); }
.vt-alg__note { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.vt-alg__note.is-warn { background: #FFF4E0; color: #6B4A12; }
.vt-alg__note .icon { margin-top: 2px; flex: none; }

.vt-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.vt-actions form { margin: 0; }
.vt-actions .cake-cta, .vt-actions .btn-soft { width: 100%; justify-content: center; }
.vt-actions__main { text-transform: uppercase; letter-spacing: 0.04em; min-height: 56px; }
.vt-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
.vt-delete { display: flex; justify-content: center; margin: 0; }
.vt-delete__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-3); border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; border-radius: var(--radius-sm); }
.vt-delete__btn:hover { color: var(--color-danger); background: #FFF1EF; }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 600px) {
    .vt-formats { grid-template-columns: repeat(2, 1fr); }
    .vt-format { grid-template-columns: 1fr; grid-template-rows: auto; text-align: left; padding: var(--space-5); min-height: 280px; align-content: start; row-gap: 6px; }
    .vt-format::before { width: auto; inset: 0 0 auto 0; height: 150px; }
    .vt-format__art { grid-row: auto; width: 100%; height: 140px; margin-bottom: var(--space-2); }
    .vt-format__art .tray-art { max-width: 170px; }
    .vt-format__go { top: auto; bottom: var(--space-4); transform: none; }
    .vt-card { grid-template-columns: 108px 1fr; }
    .vt-card__media { width: 108px; }
    .vt-sum { grid-template-columns: 1fr 1fr; align-items: start; }
    .vt-sum__tray { grid-row: span 2; }
    .vt-actions { flex-direction: row; flex-wrap: wrap; }
    .vt-actions form:first-child { flex: 1 1 100%; }
    .vt-actions > * { flex: 1 1 0; }
}
@media (min-width: 900px) {
    .vt-formats { grid-template-columns: repeat(3, 1fr); }
    .vt-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
    .vt-cat-h { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .page-tray .toast-region { bottom: calc(var(--dock-h, 88px) + var(--space-6)); }
    .vt-dock { left: var(--sidebar-w); bottom: 0; padding-bottom: var(--space-4); }
    .vt-bar { margin-inline: 0; padding-inline: 0; }
    .vt-cats { margin-inline: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .vt-format, .vt-change__pop, .vt-cell.is-new, .qty__val.is-bump { animation: none; }
}

/* ---------- prodotti venduti al kg, scelti a pezzi: peso e prezzo INDICATIVI ---------- */
.vt-line__weight { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted, #7a5a4a); white-space: nowrap; }
.vt-line__weight .icon { width: 0.9em; height: 0.9em; opacity: 0.8; }
.vt-meter__weight { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 0.82rem; color: var(--color-text-muted, #7a5a4a); }
.vt-meter__weight[hidden] { display: none; }
.vt-meter__weight strong { color: var(--color-text, #3b2016); }
.vt-dock__est { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted, #7a5a4a); }
.vt-dock__est[hidden] { display: none; }
.vt-estimate { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(214, 160, 70, 0.14);
    font-size: 0.82rem; line-height: 1.45; color: var(--color-text, #3b2016); }
.vt-estimate .icon { flex: none; margin-top: 2px; color: #a8661c; }
.vt-sum__stats .vt-sum__wbox { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.vt-sum__stats dd.vt-sum__w { white-space: nowrap; font-size: 1.5rem; }
.vt-nowrap { white-space: nowrap; }