/* ==========================================================================
 * assets/scheda-prodotto.css  —  LA SCHEDA PRODOTTO DEL SITO COME QUELLA
 * DELL'APP ANDROID (01/10/2026)
 *
 * PERCHE' ESISTE
 * Fabio, 01/10/2026, guardando la scheda prodotto del sito dal computer:
 * «sul sito pwa lo volevo trasformare esattamente come abbiamo fatto per
 * apk questa parte». Nell'app Android la scheda e' stata rifatta il 22-23/09
 * su richiesta sua: riquadri su due righe, prezzo del collo nella tessera
 * blu, quantita' e «Aggiungi colli al carrello» affiancati sul telefono, e
 * una sola fila di − e + («ci sono troppi − e +, basta 1», 22/09). Il sito
 * era rimasto com'era: riquadri grandi, la barra «Nel carrello» in piu', e
 * dal computer niente del vestito dell'app.
 *
 * DA DOVE VENGONO LE REGOLE (copiate, non inventate: ogni blocco dice la
 * sua origine)
 *  - app-bridge/modalita-app.css, sezione 30 «Scheda prodotto in modalita'
 *    app» e la parte della scheda delle sezioni 90 (entrate, tocco,
 *    movimento ridotto). Quel foglio vale solo dove <html> ha la classe
 *    ged-app (telefono dal browser, PWA installata, app): qui le stesse
 *    regole valgono anche dal computer (PARTE 1).
 *  - i fogli che l'APK aggiunge da se' (sorgenti dell'app,
 *    assets/app-bordo/): app-scheda-compatta.css, app-niente-fuoricampo.css,
 *    app-tasti-premium.css, app-splendore.css, app-movimento.css,
 *    app-piu-bella.css, app-luccichio.css. Qui valgono anche per il sito
 *    (PARTE 2).
 *
 * L'APK NON SI TOCCA (Fabio, 01/10/2026: «soltanto parte pwa saranno le
 * modifiche giusto?», e poi: nell'APK solo il prezzo ivato, che arriva dal
 * server; l'aspetto dell'app resta com'e'). L'APK carica le pagine del
 * sito, quindi anche questo foglio: per questo ogni indirizzo che vale
 * col vestito dell'app porta «:not(.ged-app-android)» (la classe che
 * _layout.php mette solo dentro l'app nativa). Dentro l'APK questo foglio
 * applica SOLO tre cose, dette ognuna al suo posto: l'entrata della riga
 * «Imponibile» (arriva dal server anche li'), il piede che tocca la
 * tastiera quando si scrive (Fabio, 01/10: «la tastiera sale troppo») e
 * «Gia' nel tuo ordine» visibile (difetto 371, ora che lo scanner apre la
 * scheda).
 *
 * COME SONO SCRITTI GLI INDIRIZZI
 *  - PARTE 1: «html:not(.ged-app) …» = solo dal computer. Stesso peso di
 *    «html.ged-app …» di modalita-app.css, che sul telefono c'e' gia'.
 *  - PARTE 2 e 3: due indirizzi per regola, «html.ged-app:not(.ged-app-
 *    android) …» (telefono dal browser e PWA) e «html:not(.ged-app) …»
 *    (computer). Le regole della scheda compatta, che nell'APK pesano doppio
 *    (html.ged-app.ged-app), qui pesano doppio anche loro.
 *  - Le misure che solo l'app conosce (--ged-fondo: la barra dei tasti di
 *    Android; --ged-cima: la barra di stato) qui hanno sempre un ripiego
 *    (0px o la zona sicura del telefono): una var() senza ripiego, dove la
 *    variabile non esiste, ANNULLA tutta la regola invece di valere zero.
 *
 * COSA NON CAMBIA: niente nel markup salvo le due righe dell'IVA
 * (prodotto.php), niente fuori dalla scheda (.modal), nessuna parola.
 *
 * COME SI VERIFICA: diff_scheda.py (lavoro\collaudi\scheda-prodotto\)
 * confronta la scheda del sito con quella dell'APK proprieta' per
 * proprieta' (font, misure, colori, posizioni, visibilita'), a 360, 390,
 * 460, 820 e 1280 px, dal computer e dal telefono, su articoli con e senza
 * pedana, in promo, esauriti, col nome con l'apostrofo.
 * ========================================================================== */


/* ==========================================================================
 * PARTE 1 — DAL COMPUTER: LA BASE DELLA SCHEDA DELL'APP
 * Origine: app-bridge/modalita-app.css, sezione 30 (righe 1138-1431).
 * I token --ged-* stanno su :root in ged-app.min.css, caricato in ogni
 * pagina (render_app_head in _layout.php): dal computer ci sono gia'.
 * ========================================================================== */

/* Gli stili in riga di prodotto.php (colore della disponibilita', «/ pz»,
   riga dei pezzi) puntano alle variabili del sito: dentro la scheda
   diventano i colori del disegno dell'app, senza forzature. */
html:not(.ged-app) .modal {
  --verde: var(--ged-green);
  --ambra: var(--ged-warn);
  --rosso: var(--ged-red);
  --ink-mute: var(--ged-text-3);
}

/* Il nome apre la scheda, le righe di servizio gli stanno sotto: la
   colonna flessibile riordina solo l'occhio, il markup resta com'e'. */
html:not(.ged-app) .modal .m-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

html:not(.ged-app) .modal .m-name {
  order: -2;
  margin: 2px 0 7px;
  font-family: var(--ged-font-display);
  font-size: var(--ged-fs-h1);
  font-weight: 800;
  letter-spacing: var(--ged-ls-tight);
  line-height: 1.15;
  color: var(--ged-text);
}

/* Riga di servizio: categorie, codice, EAN — quiete, senza pillole */
html:not(.ged-app) .modal .m-cat {
  order: -1;
  margin: 0;
  font-size: var(--ged-fs-label);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.6;
  color: var(--ged-text-3);
}

html:not(.ged-app) .modal .m-cat span { color: var(--ged-text-3); }

html:not(.ged-app) .modal .m-cod-line { gap: 4px 8px; margin: 1px 0 0; }

html:not(.ged-app) .modal .m-cod,
html:not(.ged-app) .modal .m-ean {
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  border-radius: 0;
  font-size: var(--ged-fs-label);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ged-text-3);
}

/* Il markup porta solo il numero; «Cod.» lo mette il vestito. La
   scheda-anteprima (modal-preview-info) lo porta gia' nel testo. */
html:not(.ged-app) .modal .m-info:not(.modal-preview-info) .m-cod::before { content: 'Cod. '; }
html:not(.ged-app) .modal .m-ean::before { content: '\00B7\00A0'; }

/* Bottone chiudi: tondo, campo chiaro, bordo fine */
html:not(.ged-app) .modal .m-x {
  background: var(--ged-field);
  border: 1px solid var(--ged-border);
  color: var(--ged-navy-600);
  box-shadow: var(--ged-sh-card);
}

/* Sotto i 760px la scheda e' a tutto schermo: il chiudi si fissa in alto
   a destra sopra la foto e non ruba una riga al contenuto. */
@media (max-width: 760px) {
  html:not(.ged-app) .modal .m-x {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
    margin: 0;
    width: 44px;
    height: 44px;
  }
}

/* Foto: su bianco, intera */
@media (max-width: 899px) {
  html:not(.ged-app) .modal .m-ph { padding: 14px 16px 4px; }

  html:not(.ged-app) .modal .m-ph img,
  html:not(.ged-app) .modal .m-ph .modal-product-img,
  html:not(.ged-app) .modal .m-ph .modal-product-img.img-ultra-portrait,
  html:not(.ged-app) .modal .m-ph .modal-product-img.img-portrait,
  html:not(.ged-app) .modal .m-ph .modal-product-img.img-square,
  html:not(.ged-app) .modal .m-ph .modal-product-img.img-landscape {
    max-height: 26vh;
    max-width: 80%;
  }
}

/* Tessere chiare, tranne quella del prezzo che veste il navy */
html:not(.ged-app) .modal .m-grid { gap: 10px; margin: 12px 0 2px; }

html:not(.ged-app) .modal .m-stat {
  background: var(--ged-field);
  border-radius: 15px;
  padding: 12px 14px;
}

html:not(.ged-app) .modal .m-stat .k {
  font-size: var(--ged-fs-label);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ged-text-3);
}

html:not(.ged-app) .modal .m-stat .v {
  margin-top: 4px;
  font-size: var(--ged-fs-body);
  font-weight: 800;
  color: var(--ged-text);
}

/* La tessera del prezzo e' sempre la terzultima (dopo vengono solo
   Disponibilita' e IVA), anche con la Pedana. Nell'anteprima il prezzo
   chiude la coppia. */
html:not(.ged-app) .modal .m-grid .m-stat:nth-last-child(3),
html:not(.ged-app) .modal .m-grid.modal-preview-grid .m-stat:last-child {
  background: var(--ged-navy-600);
}

html:not(.ged-app) .modal .m-grid .m-stat:nth-last-child(3) .k,
html:not(.ged-app) .modal .m-grid.modal-preview-grid .m-stat:last-child .k {
  color: var(--ged-yellow);
}

html:not(.ged-app) .modal .m-grid .m-stat:nth-last-child(3) .v,
html:not(.ged-app) .modal .m-grid.modal-preview-grid .m-stat:last-child .v {
  color: var(--ged-on-navy);
  font-family: var(--ged-font-display);
  font-size: 17px;
  letter-spacing: var(--ged-ls-tight);
}

/* Prezzo grande: Bricolage pieno, navy */
html:not(.ged-app) .modal .m-price {
  margin-top: 4px;
  font-family: var(--ged-font-display);
  font-size: 33px;
  font-weight: 900;
  letter-spacing: var(--ged-ls-tight);
  color: var(--ged-navy-600);
}

/* «Gia' nel tuo ordine»: il verde del disegno */
html:not(.ged-app) .modal .gia-ordine {
  background: var(--ged-green-bg);
  border: 1px solid var(--ged-green-bd);
  border-radius: 13px;
  color: var(--ged-green-ink);
}

html:not(.ged-app) .modal .gia-spunta { background: var(--ged-green); }

html:not(.ged-app) .modal .gia-ordine b {
  color: var(--ged-green-ink);
  font-family: var(--ged-font-display);
  font-weight: 800;
  letter-spacing: var(--ged-ls-tight);
}

@media (max-width: 899px) {
  html:not(.ged-app) .modal .gia-ordine { max-width: none; }
}
/* ⚠ La regola di modalita-app che SPEGNE «Gia' nel tuo ordine» sotto i
   980px qui NON si copia: c'era perche' il conto lo diceva la barra
   «Nel carrello», che nella scheda dell'app non c'e' piu' (PARTE 2). Vedi
   la PARTE 3: sul sito e nella PWA il riquadro si vede. */

/* Stepper dei colli: campo chiaro, cifre navy */
html:not(.ged-app) .modal .stepper {
  border: 0;
  background: var(--ged-field);
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}

html:not(.ged-app) .modal .stepper button {
  background: none;
  height: 48px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ged-navy-600);
}

html:not(.ged-app) .modal .stepper input {
  background: none;
  border: 0;
  height: 48px;
  font-size: 16px;
  font-weight: 900;
  color: var(--ged-navy-600);
}

/* Con la colonna flessibile la zona d'azione si distende */
html:not(.ged-app) .modal .buy { align-self: stretch; }

/* Aggiungi colli: il bottone primario del disegno */
html:not(.ged-app) .modal .buy .add {
  min-height: 52px;
  border-radius: var(--ged-r-lg);
  background: var(--ged-grad-btn-blue);
  box-shadow: var(--ged-sh-blue);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .03em;
}

html:not(.ged-app) .modal .buy .add svg {
  width: 18px;
  height: 18px;
  color: var(--ged-yellow-soft);
}

/* Il tasto spento si riconosce (difetto 272, assets/style.css:270-275 per
   la modalita' app): un articolo non ordinabile non deve sembrare
   ordinabile col blu pieno qui sopra. */
html:not(.ged-app) #modal .buy .add:disabled,
html:not(.ged-app) #modal .buy .add.disabled {
  background: #aeb6cc;
  box-shadow: none;
  cursor: not-allowed;
}

/* La zona d'azione incollata in fondo (il sito la fa sticky fino a 980px):
   bordo e ombra da foglio, e il foglio bianco arriva ai bordi. */
@media (max-width: 980px) {
  html:not(.ged-app) .modal .buy {
    border-top: 1px solid var(--ged-divider);
    box-shadow: var(--ged-sh-sheet);
    gap: 10px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Lo scorrimento si ferma dentro la scheda (modalita-app, sezione 80) */
html:not(.ged-app) .modal .box { overscroll-behavior: contain; }

/* Le entrate della scheda (modalita-app, sezione 90): prima la foto, poi
   il nome, le righe di servizio, le tessere una dietro l'altra, il
   prezzo; il foglio d'azione sale da sotto. Mai «forwards»: lo stato
   finale e' sempre quello naturale. La cornice NON ha transform: sul
   telefono il chiudi e' fixed e un transform lo aggancerebbe alla scheda. */
html:not(.ged-app) .modal .box {
  animation: ged-appare .2s ease-out backwards;
}

html:not(.ged-app) .modal .m-ph {
  animation: ged-foto-entra .34s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: 30ms;
}

html:not(.ged-app) .modal .m-name {
  animation: ged-entra-su .3s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: 60ms;
}

html:not(.ged-app) .modal .m-cat,
html:not(.ged-app) .modal .m-cod-line {
  animation: ged-entra-su .3s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: 90ms;
}

html:not(.ged-app) .modal .m-grid .m-stat {
  animation: ged-entra-lieve .28s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: 120ms;
}
html:not(.ged-app) .modal .m-grid .m-stat:nth-child(2) { animation-delay: 150ms; }
html:not(.ged-app) .modal .m-grid .m-stat:nth-child(3) { animation-delay: 180ms; }
html:not(.ged-app) .modal .m-grid .m-stat:nth-child(4) { animation-delay: 210ms; }
html:not(.ged-app) .modal .m-grid .m-stat:nth-child(5) { animation-delay: 240ms; }

html:not(.ged-app) .modal .m-price,
html:not(.ged-app) .modal .m-price + div {
  animation: ged-entra-lieve .3s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: 240ms;
}

html:not(.ged-app) .modal .buy {
  animation: ged-entra-su .3s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: 140ms;
}

/* Il bottone primario preme come un tasto vero */
html:not(.ged-app) .modal .buy .add:active {
  transform: scale(.98);
  transition: transform .08s ease;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.ged-app) .modal .box,
  html:not(.ged-app) .modal .m-ph,
  html:not(.ged-app) .modal .m-name,
  html:not(.ged-app) .modal .m-cat,
  html:not(.ged-app) .modal .m-cod-line,
  html:not(.ged-app) .modal .m-grid .m-stat,
  html:not(.ged-app) .modal .m-price,
  html:not(.ged-app) .modal .m-price + div,
  html:not(.ged-app) .modal .buy {
    animation: none;
  }
  html:not(.ged-app) .modal .buy .add:active {
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
 * PARTE 2 — SITO E PWA: LE CURE CHE L'APK AGGIUNGE ALLA SCHEDA
 * Due indirizzi per regola: «html.ged-app:not(.ged-app-android) …»
 * (telefono dal browser, PWA) e «html:not(.ged-app) …» (computer). Dentro
 * l'APK non valgono: l'APK queste regole le ha gia' nei suoi fogli.
 * ========================================================================== */

/* --- app-niente-fuoricampo.css: nessun testo sotto i 12px ---------------- */
html.ged-app:not(.ged-app-android) .modal .m-cod,          html:not(.ged-app) .modal .m-cod { font-size: 12px; }
html.ged-app:not(.ged-app-android) .modal .m-ean,          html:not(.ged-app) .modal .m-ean { font-size: 12px; }
html.ged-app:not(.ged-app-android) .modal .m-cat,
html.ged-app:not(.ged-app-android) .modal .m-cat span,
html:not(.ged-app) .modal .m-cat,
html:not(.ged-app) .modal .m-cat span { font-size: 12px; }
html.ged-app:not(.ged-app-android) .modal .m-stat .k,      html:not(.ged-app) .modal .m-stat .k { font-size: 12px; }

/* --- app-niente-fuoricampo.css: tasti mai sotto i 44px ------------------- */
/* La fascia d'ascolto del chiudi: invisibile, almeno 44x44. Il chiudi e'
   gia' posizionato (absolute/sticky/fixed): non gli si cambia position. */
html.ged-app:not(.ged-app-android) .modal .m-x::after,
html:not(.ged-app) .modal .m-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
html.ged-app:not(.ged-app-android) .modal .stepper button, html:not(.ged-app) .modal .stepper button { width: 44px; }
html.ged-app:not(.ged-app-android) .modal .m-x,            html:not(.ged-app) .modal .m-x { width: 44px; height: 44px; }

/* --- app-niente-fuoricampo.css: il piede non finisce sotto i tasti ------- */
/* Nell'app --ged-fondo e' la barra dei tasti di Android; nel browser non
   esiste e vale 0: i 12px di sempre. */
html.ged-app:not(.ged-app-android) .modal .buy,
html:not(.ged-app) .modal .buy { padding-bottom: calc(12px + var(--ged-fondo, 0px)) !important; }

/* CON LA TASTIERA APERTA IL PIEDE TOCCA LA TASTIERA (Fabio, 01/10/2026,
   sul suo S23 nell'app: «la tastiera numerica sale troppo»). Nell'APK la
   pagina si accorcia fino alla tastiera, ma il piede si teneva sotto lo
   spazio dei tasti di Android (--ged-fondo, 48px coi tre tasti), che la
   tastiera copre: fra «− 1 +» e la tastiera restava una fascia bianca vuota
   di circa 60px (registrato fotogramma per fotogramma, secondi 43,5-45,2,
   lavoro\collaudi\scheda-prodotto\registrazioni). Con la tastiera aperta
   (classe ged-tastiera, la mette sorvegliaTastiera in app-bridge/app-ui.js)
   lo spazio torna ai 12px di sempre. Questa regola vale ANCHE dentro l'APK
   (nessuna esclusione): e' la correzione che Fabio ha chiesto li'. Pesa piu'
   della regola dell'APK (app-niente-fuoricampo.css, html.ged-app .modal
   .buy, !important) e viene dopo quella qui sopra. */
html.ged-app.ged-tastiera .modal .buy { padding-bottom: 12px !important; }

/* --- app-niente-fuoricampo.css: UNA sola fila di − e + (Fabio, 22/09) ----
   Nella scheda convivevano lo stepper «− 1 +» (i colli da ordinare) e la
   barra «− Nel carrello: N +» (_layout.php, Modal.pistola), che tocca il
   carrello all'istante: «ci sono troppi − e +, basta 1». Resta lo stepper
   con «Aggiungi colli al carrello», il gesto che il cliente conosce; i
   colli gia' nel carrello li dice «Gia' nel tuo ordine» (PARTE 3). La
   barra resta viva nello scanner, che e' un'altra finestra. */
html.ged-app:not(.ged-app-android) .modal .pistola-bar,
html:not(.ged-app) .modal .pistola-bar { display: none !important; }

/* La scheda non si infila sotto la barra di stato (solo l'app la misura) */
html.ged-app:not(.ged-app-android) .modal .box,
html:not(.ged-app) .modal .box { padding-top: var(--ged-cima, 0px); }

/* --- app-piu-bella.css: il chiudi sotto la barra di stato --------------- */
@media (max-width: 760px) {
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-x,
  html:not(.ged-app):not(.ged-app) .modal .m-x {
    top: calc(10px + var(--ged-cima, env(safe-area-inset-top, 0px)));
  }
}

/* --- app-splendore.css: senza foto, un pittogramma quieto ---------------
   La foto sta dentro .product-media, che ha un suo fondo e copre .m-ph:
   il pittogramma va sul contenitore; la regola su .m-ph e' il paracadute. */
html.ged-app:not(.ged-app-android) .modal .m-ph .product-media:has(> img[src$="no-img.svg"]),
html.ged-app:not(.ged-app-android) .modal .m-ph:has(img[src$="no-img.svg"]),
html:not(.ged-app) .modal .m-ph .product-media:has(> img[src$="no-img.svg"]),
html:not(.ged-app) .modal .m-ph:has(img[src$="no-img.svg"]) {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6D0E4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fbfcfe 0%, #f3f6fc 100%);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 56px, cover;
}

html.ged-app:not(.ged-app-android) .modal .m-ph img[src$="no-img.svg"],
html:not(.ged-app) .modal .m-ph img[src$="no-img.svg"] {
  opacity: 0;
}

/* --- app-movimento.css e app-tasti-premium.css: i tasti rispondono ------ */
html.ged-app:not(.ged-app-android) .modal .m-x,
html:not(.ged-app) .modal .m-x {
  transition: transform .16s cubic-bezier(.2, .8, .2, 1);
}
html.ged-app:not(.ged-app-android) .modal .m-x:active,
html:not(.ged-app) .modal .m-x:active {
  transform: scale(.92);
  transition: transform .08s ease;
}

html.ged-app:not(.ged-app-android) .modal .stepper button,
html:not(.ged-app) .modal .stepper button {
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), background-color .12s ease;
}
html.ged-app:not(.ged-app-android) .modal .stepper button:active,
html:not(.ged-app) .modal .stepper button:active {
  transform: scale(.9);
  transition: transform .08s ease;
}

/* Due tocchi veloci sul + non diventano mai uno zoom della pagina */
html.ged-app:not(.ged-app-android) .modal .m-x,
html.ged-app:not(.ged-app-android) .modal .stepper button,
html.ged-app:not(.ged-app-android) .modal .stepper input,
html.ged-app:not(.ged-app-android) .modal .buy .add,
html:not(.ged-app) .modal .m-x,
html:not(.ged-app) .modal .stepper button,
html:not(.ged-app) .modal .stepper input,
html:not(.ged-app) .modal .buy .add {
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  html.ged-app:not(.ged-app-android) .modal .m-x,
  html.ged-app:not(.ged-app-android) .modal .stepper button,
  html:not(.ged-app) .modal .m-x,
  html:not(.ged-app) .modal .stepper button {
    transition: none;
  }
  html.ged-app:not(.ged-app-android) .modal .m-x:active,
  html.ged-app:not(.ged-app-android) .modal .stepper button:active,
  html:not(.ged-app) .modal .m-x:active,
  html:not(.ged-app) .modal .stepper button:active {
    transform: none;
    transition: none;
  }
}

/* --- app-luccichio.css: la luce su «Aggiungi colli al carrello» ---------
   Fabio, 26/08: «crea ai tasti gli effetti belli, come quelli che
   luccicano». La ricetta e' quella di «Conferma e invia ordine»
   (carrello.php, luce-conferma): una spazzata di luce che attraversa il
   tasto e riposa. UN tasto per schermata, quello che chiude il gesto: qui
   solo l'«Aggiungi» della scheda (#modalBox), mai i tastini delle card.
   I fotogrammi sono gli stessi di «ged-luccica» dell'APK, con un nome
   suo: due @keyframes con lo stesso nome si sostituiscono a vicenda, e
   l'APK non deve ricevere niente da questo foglio. */
html.ged-app:not(.ged-app-android) #modalBox .add:not(.disabled),
html:not(.ged-app) #modalBox .add:not(.disabled) {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);      /* il proprio strato: la luce non fa ridisegnare la pagina */
}

html.ged-app:not(.ged-app-android) #modalBox .add:not(.disabled)::after,
html:not(.ged-app) #modalBox .add:not(.disabled)::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 55%;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, .08) 32%,
    rgba(255, 255, 255, .60) 50%,
    rgba(255, 255, 255, .08) 68%,
    transparent 100%);
  transform: translateX(-190%) skewX(-18deg);
  animation: ged-scheda-luccica 3s ease-in-out infinite;
}

@keyframes ged-scheda-luccica {
  0%        { transform: translateX(-190%) skewX(-18deg); }
  42%, 50%  { transform: translateX(290%)  skewX(-18deg); }
  92%, 100% { transform: translateX(-190%) skewX(-18deg); }
}

/* Chi chiede al sistema meno movimento non riceve nessuna luce. */
@media (prefers-reduced-motion: reduce) {
  html.ged-app:not(.ged-app-android) #modalBox .add::after,
  html:not(.ged-app) #modalBox .add::after {
    animation: none;
    display: none;
  }
}

/* --- app-scheda-compatta.css: la scheda piu' corta (Fabio, 23/09) -------
   Riquadri su DUE righe: sopra i dati corti (Confezione, Pedana, IVA),
   sotto i due che contano per ordinare (Prezzo collo, Disponibilita').
   Senza pedana: Confezione e IVA a meta' riga ciascuno. Testi mai sotto
   12px, tasti mai sotto 44px, niente testo tagliato. Il peso doppio
   (html.ged-app.ged-app) e' quello dell'originale: vince sulle regole
   della modalita' app senza !important. */
html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid),
html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 2px;
}
html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid) > .m-stat,
html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) > .m-stat {
  grid-column: span 2;                 /* riga di sopra: tre per riga */
  order: 1;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 12px;
}
/* Chi sta dove: l'ordine nel markup e' Confezione, [Pedana], Prezzo
   collo, Disponibilita', IVA; si conta DAL FONDO perche' la pedana non
   c'e' sempre. */
html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid) > .m-stat:last-child,
html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) > .m-stat:last-child { order: 3; }
html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid) > .m-stat:nth-last-child(3),
html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) > .m-stat:nth-last-child(3) { order: 4; grid-column: span 3; }
html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid) > .m-stat:nth-last-child(2),
html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) > .m-stat:nth-last-child(2) { order: 5; grid-column: span 3; }
html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid) > .m-stat:nth-child(2):nth-last-child(4),
html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) > .m-stat:nth-child(2):nth-last-child(4) { order: 2; }
/* Senza pedana i riquadri sono quattro: Confezione e IVA a meta' riga. */
html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid) > .m-stat:first-child:nth-last-child(4),
html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid) > .m-stat:last-child:nth-child(4),
html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) > .m-stat:first-child:nth-last-child(4),
html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) > .m-stat:last-child:nth-child(4) { grid-column: span 3; }

html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid) > .m-stat .k,
html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) > .m-stat .k {
  font-size: 12px;
  letter-spacing: .03em;
  line-height: 1.25;
}
html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid) > .m-stat .v,
html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) > .m-stat .v {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;             /* «In arrivo il 25/09/2026» va a capo, non esce */
}

/* Titolo, categoria, prezzo */
html.ged-app.ged-app:not(.ged-app-android) .modal .m-name,
html:not(.ged-app):not(.ged-app) .modal .m-name {
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.18;
}
html.ged-app.ged-app:not(.ged-app-android) .modal .m-cat,
html:not(.ged-app):not(.ged-app) .modal .m-cat { line-height: 1.4; }
html.ged-app.ged-app:not(.ged-app-android) .modal .m-price,
html:not(.ged-app):not(.ged-app) .modal .m-price {
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.1;
}
html.ged-app.ged-app:not(.ged-app-android) .modal .m-price + div,
html:not(.ged-app):not(.ged-app) .modal .m-price + div { margin-top: 3px !important; }   /* stile in linea del portale */

/* Tablet in verticale (761-980px): due colonne come in orizzontale, foto a
   sinistra e dati a destra, invece di una striscia stretta al centro. */
@media (min-width: 761px) and (max-width: 980px) {
  html.ged-app.ged-app:not(.ged-app-android) .modal .box,
  html:not(.ged-app):not(.ged-app) .modal .box {
    grid-template-columns: 1fr 1fr;
    max-width: 760px;
  }
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph,
  html:not(.ged-app):not(.ged-app) .modal .m-ph {
    border-right: 1px solid var(--line-2, #eef1f7);
    border-bottom: 0;
    padding: 20px;
  }
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph img,
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph .modal-product-img,
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph .modal-product-img.img-ultra-portrait,
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph .modal-product-img.img-portrait,
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph .modal-product-img.img-square,
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph .modal-product-img.img-landscape,
  html:not(.ged-app):not(.ged-app) .modal .m-ph img,
  html:not(.ged-app):not(.ged-app) .modal .m-ph .modal-product-img,
  html:not(.ged-app):not(.ged-app) .modal .m-ph .modal-product-img.img-ultra-portrait,
  html:not(.ged-app):not(.ged-app) .modal .m-ph .modal-product-img.img-portrait,
  html:not(.ged-app):not(.ged-app) .modal .m-ph .modal-product-img.img-square,
  html:not(.ged-app):not(.ged-app) .modal .m-ph .modal-product-img.img-landscape {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(46vh, 380px);
  }
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-info,
  html:not(.ged-app):not(.ged-app) .modal .m-info { padding: 20px 20px 16px; }
}

/* Telefono: la scheda occupa ESATTAMENTE lo schermo. Le informazioni
   prendono l'altezza che servono e tutto lo spazio che resta va alla foto
   (mai sotto il 28% dello schermo: su un telefono basso si scorre invece
   di schiacciarla). Il piede con quantita' e «Aggiungi» tocca il fondo. */
@media (max-width: 760px) {
  html.ged-app.ged-app:not(.ged-app-android) .modal .box,
  html:not(.ged-app):not(.ged-app) .modal .box {
    display: flex;
    flex-direction: column;
  }
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph,
  html:not(.ged-app):not(.ged-app) .modal .m-ph {
    flex: 1 1 auto;
    min-height: 28vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px 6px;
  }
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph .product-media,
  html:not(.ged-app):not(.ged-app) .modal .m-ph .product-media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph img,
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph .modal-product-img,
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph .modal-product-img.img-ultra-portrait,
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph .modal-product-img.img-portrait,
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph .modal-product-img.img-square,
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-ph .modal-product-img.img-landscape,
  html:not(.ged-app):not(.ged-app) .modal .m-ph img,
  html:not(.ged-app):not(.ged-app) .modal .m-ph .modal-product-img,
  html:not(.ged-app):not(.ged-app) .modal .m-ph .modal-product-img.img-ultra-portrait,
  html:not(.ged-app):not(.ged-app) .modal .m-ph .modal-product-img.img-portrait,
  html:not(.ged-app):not(.ged-app) .modal .m-ph .modal-product-img.img-square,
  html:not(.ged-app):not(.ged-app) .modal .m-ph .modal-product-img.img-landscape {
    width: auto;
    height: auto;
    max-width: 88%;
    max-height: 100%;
    object-fit: contain;
  }
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-info,
  html:not(.ged-app):not(.ged-app) .modal .m-info { flex: 0 0 auto; padding-top: 10px; padding-bottom: 0; }
}

/* Telefono: quantita' e «Aggiungi» sulla stessa riga */
@media (max-width: 760px) {
  html.ged-app.ged-app:not(.ged-app-android) .modal .buy,
  html:not(.ged-app):not(.ged-app) .modal .buy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
  }
  html.ged-app.ged-app:not(.ged-app-android) .modal .buy .stepper,
  html:not(.ged-app):not(.ged-app) .modal .buy .stepper {
    display: grid;
    grid-template-columns: 44px 52px 44px;
    width: auto;
    height: 48px;
  }
  html.ged-app.ged-app:not(.ged-app-android) .modal .buy .stepper button,
  html.ged-app.ged-app:not(.ged-app-android) .modal .buy .stepper input,
  html:not(.ged-app):not(.ged-app) .modal .buy .stepper button,
  html:not(.ged-app):not(.ged-app) .modal .buy .stepper input { height: 48px; min-width: 0; }
  html.ged-app.ged-app:not(.ged-app-android) .modal .buy .stepper input,
  html:not(.ged-app):not(.ged-app) .modal .buy .stepper input { width: 52px; padding: 0; text-align: center; }
  html.ged-app.ged-app:not(.ged-app-android) .modal .buy .add,
  html:not(.ged-app):not(.ged-app) .modal .buy .add {
    min-height: 48px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.15;
    white-space: normal;               /* il testo va su due righe, non si taglia */
    text-align: center;
  }
}

/* Telefoni stretti (fino a 350px): due riquadri per riga; l'IVA scende in
   fondo, cosi' Prezzo collo e Disponibilita' restano insieme. */
@media (max-width: 350px) {
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid) > .m-stat,
  html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) > .m-stat { grid-column: span 3; }
  html.ged-app.ged-app:not(.ged-app-android) .modal .m-grid:not(.modal-preview-grid) > .m-stat:last-child,
  html:not(.ged-app):not(.ged-app) .modal .m-grid:not(.modal-preview-grid) > .m-stat:last-child { order: 6; }
}


/* ==========================================================================
 * PARTE 3 — NUOVO DEL 01/10/2026 (sito e PWA)
 * ========================================================================== */

/* «Gia' nel tuo ordine» SI VEDE anche sotto i 980px. La modalita' app lo
   spegneva li' (modalita-app.css, sezione 30) perche' il conto lo diceva
   la barra «Nel carrello»; ma dal 22/09 quella barra nella scheda non c'e'
   piu' (PARTE 2), e il foglio dell'APK che l'ha tolta scrive proprio
   «il riquadro Gia' nel tuo ordine continua a dire quanti colli ci sono».
   Misurato il 01/10 sulla scheda dell'APK: il riquadro c'era, con il
   numero giusto, ma display:none — sul telefono la scheda non diceva piu'
   quanti colli erano gia' nel carrello. :not([hidden]) e' obbligatorio:
   il riquadro esiste sempre e Modal.pistola lo nasconde con hidden quando
   i colli sono zero; un display scritto qui senza quel filtro lo
   mostrerebbe vuoto. Dal pomeriggio del 01/10 vale ANCHE nell'APK (difetto
   371): da quando il bip dello scanner apre questa scheda (Fabio:
   «applicalo anche su apk»), il foglio dello scanner che diceva «Gia' nel
   carrello: N» non c'e' piu', e senza questo riquadro nell'app nessuno
   direbbe piu' quanti colli sono gia' nel carrello. */
@media (max-width: 980px) {
  html.ged-app.ged-app .modal .gia-ordine:not([hidden]),
  html:not(.ged-app):not(.ged-app) .modal .gia-ordine:not([hidden]) {
    display: flex;
  }
}

/* IL TITOLO NON PASSA SOTTO LA × (misurato il 01/10/2026). Sopra i 760px
   il tondo di chiusura sta in alto a destra della colonna dei dati, sulla
   stessa fascia del nome: un nome lungo ci finiva sotto. Misure prima di
   questa regola: sul sito di oggi a 990, 1024 e 1280px la prima riga di
   «COLLAUDO PASTA SPAGHETTI GR500» arrivava a 1px dalla ×; con la scheda
   nuova a 820px (tablet in verticale) ci passava sotto di 28px. Il nome
   lascia alla × il suo posto: 44px del tondo + 8 d'aria. Sotto i 760px la
   × e' fissa sopra la foto e il nome ha tutta la riga. Nell'APK resta
   com'e' (Fabio: l'APK non cambia aspetto): difetto registrato a parte. */
@media (min-width: 761px) {
  html.ged-app:not(.ged-app-android) .modal .m-name,
  html:not(.ged-app) .modal .m-name { padding-right: 52px; }
}

/* IL PREZZO DELLA SCHEDA E' IVATO (Fabio, 01/10/2026). Accanto al prezzo
   grande la scritta «IVA inclusa», sotto la riga dei pezzi l'imponibile in
   piccolo: il loro stile sta IN RIGA in prodotto.php (come «/ pz»), cosi'
   si leggono giusti anche senza questo foglio. Qui solo l'entrata: la riga
   dell'imponibile entra insieme al prezzo e alla riga dei pezzi. Questa
   regola vale ANCHE nell'APK (html.ged-app senza esclusione): la riga e'
   nuova anche li', arriva dal server col prezzo ivato, e senza l'entrata
   comparirebbe prima del prezzo che le sta sopra. */
html.ged-app .modal .m-imponibile,
html:not(.ged-app) .modal .m-imponibile {
  animation: ged-entra-lieve .3s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: 240ms;
}
@media (prefers-reduced-motion: reduce) {
  html.ged-app .modal .m-imponibile,
  html:not(.ged-app) .modal .m-imponibile { animation: none; }
}