/* «Completa l'ordine» (lotto 2, 8 nov 2026): il carosello di prodotti proposti, nel carrello, nel carrello di fascio e alla cassa.
   Grafica APPROVATA da Francesco nelle tre anteprime statiche (`anteprima-completa-ordine.html`, `-fascio.html`, `-cassa.html`); qui sono ricopiate
   le regole delle anteprime. Il markup e' `templates/shop/_completa_ordine.html`, il comportamento `scripts/modules/completa-ordine.js`.
   NON verificato a video in questo lavoro (nessun browser): le regole sono quelle delle anteprime, non confrontate pixel per pixel. */

/* ── Il colore del negozio (correzione del 9 nov 2026) ─────────────────────────────────────────────────────────────────────────
   Il tasto «Aggiungi», la sua ombra e il lampo della riga nuova prendono il colore PRINCIPALE della pelle del sito (`Domain.skin`, scritta da
   `__base.html` in `<html data-pelle="...">`), non piu' il magenta di Celero fisso. I valori sono il `background-color` di `.app-button--primary`
   letto nei fogli compilati `dist/app-skin-*.css` (9 nov 2026); il chiaro e' quel colore al 9,5% sul bianco, e per Celero resta #f6e7f0 dell'anteprima
   approvata. Senza pelle riconosciuta valgono i colori di Celero (`:root`). Se una pelle cambia colore, va riletto anche qui. */
:root { --co-colore: #980f60; --co-ombra: rgba(152, 15, 96, .25); --co-chiaro: #f6e7f0; }
html[data-pelle="app-skin-black"] { --co-colore: #2e2834; --co-ombra: rgba(46, 40, 52, .25); --co-chiaro: #ebebec; }
html[data-pelle="app-skin-blue-dark"] { --co-colore: #2b354e; --co-ombra: rgba(43, 53, 78, .25); --co-chiaro: #ebecee; }
html[data-pelle="app-skin-blue-light"] { --co-colore: #17b0b2; --co-ombra: rgba(23, 176, 178, .25); --co-chiaro: #e9f7f8; }
html[data-pelle="app-skin-blue"] { --co-colore: #3663e6; --co-ombra: rgba(54, 99, 230, .25); --co-chiaro: #ecf0fd; }
html[data-pelle="app-skin-brown-dark"] { --co-colore: #4a2706; --co-ombra: rgba(74, 39, 6, .25); --co-chiaro: #eeeae7; }
html[data-pelle="app-skin-brown"] { --co-colore: #713d0b; --co-ombra: rgba(113, 61, 11, .25); --co-chiaro: #f2ede8; }
html[data-pelle="app-skin-celero"] { --co-colore: #980f60; --co-ombra: rgba(152, 15, 96, .25); --co-chiaro: #f6e7f0; }
html[data-pelle="app-skin-gray-dark"] { --co-colore: #4c4650; --co-ombra: rgba(76, 70, 80, .25); --co-chiaro: #eeedee; }
html[data-pelle="app-skin-gray"] { --co-colore: #6a6171; --co-ombra: rgba(106, 97, 113, .25); --co-chiaro: #f1f0f2; }
html[data-pelle="app-skin-green-dark"] { --co-colore: #317d11; --co-ombra: rgba(49, 125, 17, .25); --co-chiaro: #ebf3e8; }
html[data-pelle="app-skin-green"] { --co-colore: #58b136; --co-ombra: rgba(88, 177, 54, .25); --co-chiaro: #eff8ec; }
html[data-pelle="app-skin-orange-dark"] { --co-colore: #b53d30; --co-ombra: rgba(181, 61, 48, .25); --co-chiaro: #f8edeb; }
html[data-pelle="app-skin-orange"] { --co-colore: #e95044; --co-ombra: rgba(233, 80, 68, .25); --co-chiaro: #fdeeed; }
html[data-pelle="app-skin-pink-dark"] { --co-colore: #9e3364; --co-ombra: rgba(158, 51, 100, .25); --co-chiaro: #f6ecf0; }
html[data-pelle="app-skin-pink"] { --co-colore: #d0548c; --co-ombra: rgba(208, 84, 140, .25); --co-chiaro: #fbeff4; }
html[data-pelle="app-skin-purple-dark"] { --co-colore: #4d2e7a; --co-ombra: rgba(77, 46, 122, .25); --co-chiaro: #eeebf2; }
html[data-pelle="app-skin-purple"] { --co-colore: #7955b1; --co-ombra: rgba(121, 85, 177, .25); --co-chiaro: #f2eff8; }
html[data-pelle="app-skin-red-dark"] { --co-colore: #b7123c; --co-ombra: rgba(183, 18, 60, .25); --co-chiaro: #f8e8ec; }
html[data-pelle="app-skin-red"] { --co-colore: #e21f50; --co-ombra: rgba(226, 31, 80, .25); --co-chiaro: #fceaee; }
html[data-pelle="app-skin-yellow-dark"] { --co-colore: #9e6800; --co-ombra: rgba(158, 104, 0, .25); --co-chiaro: #f6f1e7; }
html[data-pelle="app-skin-yellow"] { --co-colore: #d48b00; --co-ombra: rgba(212, 139, 0, .25); --co-chiaro: #fbf4e7; }

.co { padding: 14px 0 18px; border-top: 1px solid #eee; margin-top: 6px; }
.co__titolo { font: 700 15px/1.2 Nunito, system-ui, sans-serif; color: #2e2834; padding: 0 14px 2px; }
.co__sotto { font: 400 12px/1.3 Nunito, system-ui, sans-serif; color: #7a7480; padding: 0 14px 10px; }
.co__fila { display: flex; gap: 10px; overflow-x: auto; padding: 0 14px 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.co__fila::-webkit-scrollbar { display: none; }
.co__scheda { flex: 0 0 var(--scheda, 128px); scroll-snap-align: start; border: 1px solid #ece8ef; border-radius: 10px; overflow: hidden; background: #fff; position: relative; }
/* Le foto dei prodotti sono quadrate: riquadro quadrato e foto intera, mai ritagliata. */
.co__foto { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain; display: block; background: #fff; border-bottom: 1px solid #f1eef3; }
.co__nome { font: 600 12px/1.25 Nunito, system-ui, sans-serif; color: #000; padding: 7px 8px 0; height: 52px; box-sizing: border-box; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.co__piede { padding: 2px 8px 8px; }
.co__prezzo { display: block; font: 600 13px Nunito, system-ui, sans-serif; color: #2e2834; margin-bottom: 6px; }
.co__piu { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 34px; border: 0; border-radius: 4.5px; background: var(--co-colore); color: #fff; font: 600 14px/1 Nunito, system-ui, sans-serif; padding: 0; box-shadow: 0 2px 6px var(--co-ombra); cursor: pointer; }
.co__piu b { font-size: 18px; font-weight: 600; }
.co__piu:active { transform: scale(.96); }
.co__piu[disabled] { opacity: .6; cursor: default; }
.co__gia { position: absolute; top: 6px; left: 6px; z-index: 1; background: #2e2834; color: #fff; font: 700 10px/1 Nunito, system-ui, sans-serif; padding: 4px 6px; border-radius: 4px; }
/* Carrello di fascio: ogni scheda dice il negozio. */
.co__negozio { display: block; font: 600 10px/1.2 Nunito, system-ui, sans-serif; color: #8a8390; text-transform: uppercase; letter-spacing: .04em; padding: 7px 8px 0; }
.co__negozio + .co__nome { padding-top: 2px; }
/* La riga appena aggiunta dai suggeriti si colora per circa un secondo (Francesco, 9 nov 2026), col colore del tasto «Aggiungi»: `--co-colore`
   della pelle del negozio (in cima a questo file) al 16% sul bianco. Il ripiego per i browser senza `color-mix` e' il chiaro della pelle e passa da
   `@supports`, non da una seconda dichiarazione: una dichiarazione con `var()` non si scarta alla lettura, e se la funzione non e' conosciuta lo
   sfondo diventa trasparente e il ripiego scritto prima si perde (misurato nel browser il 9 nov 2026 con una funzione inesistente al posto di
   `color-mix`: sfondo rgba(0, 0, 0, 0) con `var()`, il ripiego senza). */
.app-cart__item.e-nuova { --co-nuova: var(--co-chiaro, #f6e7f0); animation: co-entra 1.1s ease-out; }
@supports (color: color-mix(in srgb, red 16%, #fff)) {
  .app-cart__item.e-nuova { --co-nuova: color-mix(in srgb, var(--co-colore, #980f60) 16%, #fff); }
}
/* Quantita' e cuore hanno lo sfondo bianco: sulla riga colorata facevano due macchie (visto nel simulatore il 9 nov 2026). Trasparenti, sulla riga
   bianca non cambia niente. */
.app-cart__item.e-nuova .app-field--quantity,
.app-cart__item.e-nuova .app-field__value,
.app-cart__item.e-nuova .app-button--favorite { background: transparent; border-color: transparent; }
@keyframes co-entra {
  0%, 45% { background: var(--co-nuova, #f6e7f0); }
  100% { background: #fff; }
}

/* ── Alla cassa ──────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.co--cassa { border-top: 0; margin-top: 0; padding: 16px 0 18px; }
.co--cassa .co__titolo { font-size: 17px; }
.co--cassa .co__sotto--ok { color: #3d8a1f; font-weight: 700; }
/* Schede strette (sotto i 110 px): testo e tasto un po' piu' piccoli, perche' «+ Aggiungi» stia su una riga. */
.co--strette .co__nome { font-size: 11px; height: 46px; padding: 6px 6px 0; }
.co--strette .co__piede { padding: 2px 6px 6px; }
.co--strette .co__prezzo { font-size: 12px; margin-bottom: 5px; }
.co--strette .co__piu { height: 30px; font-size: 12px; gap: 3px; }
.co--strette .co__piu b { font-size: 15px; }
.co--strette .co__gia { font-size: 9px; padding: 3px 5px; top: 4px; left: 4px; white-space: nowrap; }
/* Secondo gradino: quando anche la scheda piu' stretta non entra in altezza, la scheda diventa orizzontale (foto a sinistra). */
.co--riga .co__scheda { flex: 0 0 220px; display: grid; grid-template-columns: 68px 1fr; grid-template-rows: auto auto 1fr; column-gap: 8px; padding: 6px; box-sizing: border-box; }
.co--riga .co__foto { grid-row: 1 / span 3; width: 68px; border: 0; border-radius: 6px; }
.co--riga .co__gia { position: static; grid-column: 2; justify-self: start; font-size: 9px; padding: 2px 5px; margin-bottom: 2px; }
.co--riga .co__nome { grid-column: 2; height: auto; max-height: 28px; padding: 0; font-size: 11px; -webkit-line-clamp: 2; }
.co--riga .co__piede { grid-column: 2; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; align-self: end; }
.co--riga .co__prezzo { margin: 0; font-size: 12px; white-space: nowrap; }
.co--riga .co__piu { width: auto; padding: 0 10px; height: 28px; font-size: 12px; gap: 3px; }
.co--riga .co__piu b { font-size: 15px; }

/* Veste Scaffale alla cassa (`html.has-scaffale-cassa`): pagamenti su fondo rosa, prodotti su bianco da bordo a bordo.
   `.app-dialog__body` e' un flex in riga che centra: il blocco prende `flex: 0 0 calc(100% + 33.75px)` con i margini negativi che annullano il
   padding di 16,875 px (valori dell'anteprima approvata e della spec, NON rimisurati qui), altrimenti esce dallo schermo a sinistra. */
html.has-scaffale-cassa .app-dialog,
html.has-scaffale-cassa .app-dialog__header,
html.has-scaffale-cassa .app-dialog__body { background: #f5eef3; }
html.has-scaffale-cassa .app-progress__icon,
html.has-scaffale-cassa .app-progress__icon .app-icon { background-color: transparent; }
html.has-scaffale-cassa .app-page,
html.has-scaffale-cassa .app-page__content,
html.has-scaffale-cassa body { background: #fff; }
html.has-scaffale-cassa #completa { min-width: 0; flex: 0 0 calc(100% + 33.75px); margin: 12px -16.875px -16.875px; background: #fff; border-top: 3px solid #e3cfdc; }
html.has-scaffale-cassa #completa .co { padding: 36px 16.875px 22px; }
html.has-scaffale-cassa #completa.co--molti-pagamenti .co { padding-top: 18px; }
html.has-scaffale-cassa #completa .co__titolo,
html.has-scaffale-cassa #completa .co__sotto,
html.has-scaffale-cassa #completa .co__fila { padding-left: 0; padding-right: 0; }
html.has-scaffale-cassa #completa .co__scheda { border-color: #eadde5; box-shadow: 0 1px 3px rgba(46, 40, 52, .06); }

/* ── Nel cassetto del carrello: fascia FISSA sopra il «Procedi» (9 nov 2026) ─────────────────────────────────────────────────────
   Francesco, 9 nov 2026: «fare in modo che rimangano sempre visibili e fissi i prodotti suggeriti», con l'elenco dei prodotti (e le spese di
   servizio, ultima riga dell'elenco) che scorre da solo. Il carosello sta nel PIEDE del cassetto (`cart_detail.html`, `cart_detail_gruppo.html`, dentro
   `.co-fisso.co--riga`): schede orizzontali, quelle che la cassa usa quando lo spazio manca, con altezza FISSA. L'altezza fissa serve al corpo:
   in `_drawer.styl` il corpo ha un'altezza calcolata per un piede basso e il piede gli sta SOPRA; come gia' fa il carrello di fascio
   (`.app-cart__body--gruppo`, 4em), il corpo prende in fondo uno spazio pari a quello che il piede copre in piu', cosi' l'ultima riga si puo'
   ancora portare sopra il piede scorrendo. Se si cambia un'altezza qui sotto, va rifatto il conto di `--co-fisso-h`:
   1 (filetto) + 10 (sopra) + 18 (titolo) + 4 + 162 (scheda verticale) + 2 + 8 (sotto) = 205 px (dall'11 nov 2026, senza la riga del sottotitolo e con la scheda verticale; scritti in riga sui template). La barra di scorrimento
   orizzontale della fila e' spenta anche fuori da WebKit (`scrollbar-width`), o su Firefox desktop occuperebbe altezza e verrebbe tagliata. */
:root { --co-fisso-h: 205px; }
.app-cart__footer--con-co { border-top: 0; }
.co-fisso { margin: calc(-0.75em + 2px) -1em calc(0.75em - 2px); background: #fff; box-shadow: 0 -6px 10px -6px rgba(46, 40, 52, .22); }
.co-fisso .co { box-sizing: border-box; height: var(--co-fisso-h); overflow: hidden; margin: 0; padding: 10px 0 8px; border-top: 1px solid #eee; line-height: normal; }
.co-fisso .co__titolo { height: 18px; padding-bottom: 4px; box-sizing: content-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-fisso .co__sotto { height: 15px; padding-bottom: 8px; box-sizing: content-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-fisso .co__fila { padding-bottom: 2px; scrollbar-width: none; }
/* ⭐ SCHEDA VERTICALE DEL CASSETTO (Francesco, 11 nov 2026, «confermo la 3 con 3.5 secondi»): 2 schede e mezza in vista (la terza a meta' dice che si scorre
   verso destra), foto sopra, nome su 2 righe, prezzo, e «Aggiungi» che dopo il tocco diventa «− quantita' +»; dopo 3,5 secondi senza tocchi la scheda si
   spegne e le altre scorrono a sinistra a chiudere il posto (`modules/completa-ordine.js`). Niente «Ordinato in passato» (copriva la foto) e niente frase sotto
   il titolo. Altezza FISSA di 162 px: foto 64 + negozio 12 (solo nel fascio) + nome 32 + piede 54 (2 + 18 + 4 + 30; nel fascio 51) dentro 160 px (162 meno i bordi). Se si cambia, va rifatto `--co-fisso-h`. */
:root { --co-attesa: 3500ms; --co-chiude: 700ms; }
.co-fisso .co__fila { gap: 8px; scroll-padding-left: 14px; }
.co-fisso .co__scheda { flex: 0 0 calc((100% - 2px) / 2.5); min-width: 0; height: 162px; box-sizing: border-box; padding: 0; display: flex; flex-direction: column;
  transition: flex-basis var(--co-chiude) ease-in-out, margin var(--co-chiude) ease-in-out, opacity .25s ease-out; }
.co-fisso .co__foto { position: static; width: 100%; height: 64px; flex: 0 0 64px; aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 0; }
.co-fisso .co__negozio { flex: 0 0 12px; height: 12px; box-sizing: border-box; padding: 1px 6px 0; margin: 0; font-size: 9px; line-height: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-fisso .co__nome, .co-fisso .co__negozio + .co__nome { flex: 0 0 32px; height: 32px; max-height: none; box-sizing: border-box; padding: 3px 6px 0; font: 700 12px/1.2 Nunito, system-ui, sans-serif; -webkit-line-clamp: 2; }
.co-fisso .co__piede { position: static; align-self: stretch; justify-content: normal; display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; grid-template-rows: 18px 30px; gap: 4px 2px; padding: 2px 6px 0; align-items: center; }
/* Fascio: con la riga del negozio (12 px) il contenuto interno (160 px: 162 meno i due bordi) sforava (misurato nel browser: piede che finiva a 163 px dall'alto della scheda, il contenuto a 161): 2 px in meno fra prezzo e tasto, 1 in meno sopra. */
.co-fisso .co--fascio .co__piede { gap: 2px 2px; padding-top: 1px; }
.co-fisso .co__prezzo { grid-column: 1 / -1; margin: 0; font: 700 13px/18px Nunito, system-ui, sans-serif; white-space: nowrap; overflow: hidden; }
.co-fisso .co__prezzo--etto .co__unita { display: inline; margin-left: 2px; font-size: 10px; line-height: inherit; }
.co-fisso .co__piu { grid-column: 1 / -1; width: 100%; height: 30px; min-width: 0; border-radius: 6px; font-size: 12px; font-weight: 700; padding: 0 4px; white-space: nowrap; }
.co-fisso .co__piu b { font-size: 16px; }
/* Dopo il tocco: «−  quantita'  +», e la barra che si consuma in 3,5 secondi. */
.co-fisso .co__q-meno, .co-fisso .co__q-piu { min-width: 0; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 0 0 2px; cursor: pointer; font-family: Nunito, system-ui, sans-serif; }
.co-fisso .co__q-meno { background: #fff; color: var(--co-colore); border: 1.5px solid var(--co-chiaro); font-size: 18px; font-weight: 600; }
.co-fisso .co__q-piu { background: var(--co-colore); color: #fff; border: 0; font-size: 20px; font-weight: 600; }
.co-fisso .co__q-meno:active, .co-fisso .co__q-piu:active { transform: scale(.96); }
.co-fisso .co__q-meno[disabled], .co-fisso .co__q-piu[disabled] { opacity: .6; cursor: default; }
.co-fisso .co__qt { font: 700 10px/1 Nunito, system-ui, sans-serif; color: #2e2834; text-align: center; white-space: nowrap; min-width: 0; }
.co-fisso .co__barra { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--co-colore); transform-origin: left; animation: co-conto var(--co-attesa) linear forwards; }
@keyframes co-conto { to { transform: scaleX(0); } }
.co-fisso .co__scheda.e-esce { opacity: 0; pointer-events: none; }
.co-fisso .co__scheda.e-chiude { flex-basis: 0 !important; margin-right: -8px; border-width: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .co-fisso .co__barra { animation: none; }
  :root { --co-chiude: 0ms; }
  .co-fisso .co__scheda { transition: none; }
}
/* Carrello di UN negozio: il sottotitolo «Da <negozio>, arriverebbero insieme al tuo ordine» (testo scelto da Francesco il 7 nov) su una riga
   veniva tagliato coi puntini (misurato nel browser il 9 nov, anche rimpicciolito a 11 px: la riga sfora di 1 px con «Hiromi Sushi» e di 18 px
   con «Gelatero Centro», il nome piu' lungo fra i negozi attivi). Qui va su DUE righe e la fascia cresce di 16 px, solo nel carrello di un negozio (il fascio ha
   «Dai negozi del tuo ordine», che sta su una riga). */
/* 11 nov 2026: nel carrello di un negozio la frase sotto il titolo non c'e' piu' (come nel fascio): niente piu' i 16 px per le due righe; l'altezza e' `--co-fisso-h` (139 px, scritta in riga nei template). */
/* Lo spazio in fondo al corpo: quello di sempre piu' la fascia. */
.app-cart__body--con-co { padding-bottom: calc(var(--co-fisso-h) + 1.5em); }
.app-cart__body--gruppo.app-cart__body--con-co { padding-bottom: calc(var(--co-fisso-h) + 4em); }
/* ⭐ Difetto PREESISTENTE (c'era gia' prima della fascia, trovato dal confutatore il 9 nov 2026): i 4em del fascio coprono la sola riga
   «Consegna»; quando nel piede c'e' anche la riga dell'omaggio (`gruppo.omaggio_testo`; con un testo di prova su 3 righe il piede cresceva di 60 px, misura del confutatore; la lunghezza dei
   testi veri non e' misurata) l'ultima riga
   dell'elenco restava in parte sotto il piede. Il corpo prende 4,5em in piu'. */
.app-cart__body--gruppo.app-cart__body--con-omaggio { padding-bottom: 8.5em; }
.app-cart__body--gruppo.app-cart__body--con-co.app-cart__body--con-omaggio { padding-bottom: calc(var(--co-fisso-h) + 8.5em); }
/* ⭐ Prodotti a GRAMMI (11 nov 2026): «€ 0,50 l'etto». Nel cassetto (`.co-fisso`) e alla cassa in riga (`.co--riga`) «l'etto» va sotto il prezzo, piccolo: cosi' ne
   prezzo ne «Aggiungi» rischiano di uscire dalla scheda (con la scritta «100 g · € 1,20» sulla stessa riga il tasto si tagliava nel simulatore iPhone; «€ 0,50 l'etto» sulla stessa riga NON
   e' stato provato); altrove resta accanto. */
.co__unita { font-weight: 400; font-size: 11px; color: #7a7480; }
.co--riga:not(.co-fisso) .co__prezzo--etto { line-height: 1.1; }
.co--riga:not(.co-fisso) .co__prezzo--etto .co__unita { display: block; font-size: 10px; }