/* DNA Gestionale Web — l'aspetto del sito pubblico.
 *
 * IL PLUGIN VIVE DENTRO IL TEMA DI QUALCUN ALTRO, MA L'AREA DEL CONTENUTO È SUA.
 * Non controlla intestazione e piè di pagina. Controlla tutto il resto, e lì fa
 * larghezza piena, tipografia propria e struttura propria. Dal tema si prende
 * UNA COSA SOLA: i colori. Non i font, non le spaziature, non i raggi.
 *
 * LA DIREZIONE, in una riga: IL REGISTRO DI STOCK. Non una vetrina pubblicitaria
 * ma il registro che il concessionario tiene davvero — una fascia d'inchiostro in
 * testa che dice quante auto ci sono, e sotto un elenco di voci incolonnate, tutte
 * con la stessa geometria, dove il prezzo cade a destra come il totale di una
 * riga di conto. Niente ombre morbide, niente angoli tondi da applicazione:
 * filetti sottili, angoli quasi vivi, cifre tabulari. Chi cerca un'auto usata la
 * sera col telefono scorre dei NUMERI: la pagina è costruita perché quei numeri
 * si leggano in colonna.
 *
 * IL GESTO PER CUI SI RICORDA, e resta uno solo: LE CIFRE TABULARI, ereditate
 * dalla passata precedente e portate fino in fondo. «tabular-nums» dà a ogni
 * cifra la stessa larghezza. Nella scheda breve i quattro dati stanno in una
 * griglia 2×2 fra due filetti — sopra i due NUMERI (immatricolazione,
 * chilometri) in corpo pieno, sotto le due PAROLE (alimentazione, cambio) in
 * maiuscoletto tracciato — e il prezzo chiude la voce allineato a destra. Da
 * scheda a scheda i chilometri cadono nella stessa colonna e i prezzi si
 * confrontano per cifra invece che per lunghezza. Le stesse cifre tornano nel
 * conteggio della fascia, nei numeri dei filtri, nel contatore della galleria e
 * nelle caratteristiche. Non aggiungere un secondo gesto: uno solo si ricorda.
 *
 * LE QUATTRO REGOLE CHE GOVERNANO OGNI RIGA DI QUESTO FILE
 *
 * 1. IL CARATTERE È NOSTRO E STA QUI DENTRO. Archivo variabile, un file solo,
 *    servito da assets/font/. Nessun @import, nessuna richiesta a un server
 *    terzo: su un sito italiano caricare font da fuori è una dipendenza di rete
 *    e un problema di privacy. La pila di sistema resta dietro come ripiego.
 * 2. NIENTE STILI GLOBALI. Ogni selettore comincia per «.dnagw-». Non si tocca
 *    body, né h1/a generici: quello che va azzerato si azzera DENTRO
 *    «.dnagw-contenitore», dove il danno non può uscire.
 * 3. TUTTO PASSA DA VARIABILI --dnagw-*. Un colore, una misura o un peso
 *    scritti a mano dentro una regola sono un difetto: la fase 4 fa
 *    sovrascrivere queste variabili dal pannello Aspetto del concessionario, e
 *    un valore letterale è un valore che quel pannello non raggiunge.
 * 4. I COLORI ARRIVANO DAL TEMA, E POSSONO ESSERE QUALUNQUE COSA. Si prendono
 *    solo le due che ogni tema garantisce leggibili l'una sull'altra — il testo
 *    e il fondo del corpo — e tutto il resto si DERIVA da quelle due. Vedi «La
 *    tavolozza» qui sotto: è la parte da leggere prima di cambiare un colore.
 *
 * E LA GARANZIA CHE NON SI TOCCA: filtri, galleria e dotazioni funzionano
 * SENZA JavaScript. Nel foglio di stile questo si traduce in una regola sola:
 * niente si nasconde se non dietro una classe che lo SCRIPT aggiunge. Tre test
 * scandiscono questo file per farla rispettare (PannelloFiltriTest,
 * SchedaVeicoloTest, ModuloContattoTest). Se diventano rossi non vanno
 * aggirati: vuol dire che si sta rompendo la garanzia. Anche le due barre fisse
 * del telefono rispettano il verso: quella dell'elenco nasce «hidden» nel
 * markup ed è lo script a scoprirla, quella della scheda è un'ancora normale
 * che funziona senza script.
 */

/* --------------------------------------------------------------------------
 * IL CARATTERE
 *
 * Archivo (Omnibus-Type), licenza SIL OFL 1.1 — la copia della licenza sta
 * accanto al file, in assets/font/OFL.txt. È un grottesco stretto, disegnato
 * per reggere ai corpi piccoli e per stampare tabelle: ha cifre tabulari vere e
 * uno zero che non si confonde con la O. Un file solo, 34 kB, un asse di peso
 * (400→700): tre pesi diversi sarebbero tre richieste.
 *
 * Il sottoinsieme è quello latino: copre l'italiano, l'euro e le virgolette. I
 * due segni fuori sottoinsieme — la spunta delle dotazioni e la ✕ del pannello
 * filtri — li disegna il carattere di sistema, e va bene così: sono icone, non
 * testo.
 *
 * L'indirizzo è RELATIVO al foglio di stile, quindi segue plugins_url() da solo:
 * la cartella del plugin resta spostabile e non serve una riga di PHP in più.
 * ------------------------------------------------------------------------ */
@font-face {
    font-family: "DNA Archivo";
    src: url("../font/archivo-variabile.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
 * I TOKEN
 *
 * L'unico blocco di questo file che non comincia per «.dnagw-», e l'eccezione
 * è deliberata: qui dentro si DICHIARANO soltanto proprietà personalizzate —
 * non c'è una sola dichiarazione che dipinga qualcosa — quindi non tocca nulla
 * del tema ospite.
 *
 * QUI STANNO SOLO LE COSE CHE NESSUNO PERSONALIZZA: la tipografia, la scala
 * degli spazi, le forme, le misure — e le due SORGENTI di colore prese dal
 * tema. I RUOLI di colore e tutto ciò che se ne deriva stanno invece nel
 * blocco «.dnagw-contenitore» più in basso, e lì c'è scritto perché: dal 10
 * agosto 2026 il pannello DNA Gestionale ▸ Impostazioni ▸ Aspetto stampa i
 * colori del concessionario come attributo «style» del contenitore, e una
 * proprietà personalizzata si risolve DOVE È DICHIARATA. Su :root i derivati si
 * calcolerebbero con l'inchiostro del TEMA e i discendenti ne erediterebbero
 * il risultato già cotto: la scelta del concessionario arriverebbe troppo
 * tardi per cambiarli.
 * ------------------------------------------------------------------------ */
:root {
    /* LA TAVOLOZZA — due colori presi, tutti gli altri derivati.
     *
     * WordPress espone la tavolozza del tema come «--wp--preset--color--<slug>».
     * Di tutti quegli slug se ne prendono DUE, e sono i due che qualunque tema
     * garantisce leggibili l'uno sull'altro perché ci scrive il proprio testo:
     * il colore del testo e il colore del fondo. Ogni altra combinazione di
     * questa pagina si costruisce da quelle due, quindi il contrasto non può
     * mai essere peggiore di quello che il tema usa per sé.
     *
     * Il motivo per cui NON si prende «primary» come colore del testo o dei
     * bottoni: primary può essere un giallo paglierino, e bianco su giallo
     * paglierino è illeggibile. Un colore che non si sa leggere non si mette
     * mai sotto del testo. Vedi --dnagw-accento più in basso per l'unico uso
     * che se ne fa.
     *
     * I nomi degli slug cambiano da tema a tema, da cui le catene di ripiego;
     * in fondo alla catena ci sono i due valori nostri (14,8:1 fra loro). */
    --dnagw-tema-testo: var(--wp--preset--color--foreground, var(--wp--preset--color--contrast, #10243a));
    --dnagw-tema-fondo: var(--wp--preset--color--background, var(--wp--preset--color--base, #ffffff));

    /* IL SEGNALE — ruggine. Compare SOLO dove dice qualcosa che il visitatore
       deve sapere: «Venduta», «In evidenza», «non più disponibile», il modulo
       che non è partito. E compare sempre come RIEMPIMENTO con testo bianco
       sopra (5,0:1, sempre, su qualunque tema) o come filetto: mai come colore
       del testo su un fondo che non conosciamo — su un tema scuro sarebbe
       illeggibile. È l'unico colore di questo file che non viene dal tema, ed è
       giusto così: un avviso non cambia colore con la marca. Resta qui su :root
       perché non si deriva da niente e non si personalizza: non ha nulla da
       ricalcolare. */
    --dnagw-segnale: #b4531a;
    --dnagw-segnale-testo: #ffffff;

    /* TIPOGRAFIA — TRE RUOLI, non uno di più.
     *
     * 1. IL NUMERO   peso 700, spaziatura stretta, cifre tabulari. Il conteggio
     *                della fascia, i prezzi, i due dati in cima alla riga.
     * 2. IL TESTO    peso 400. Titoli, versioni, descrizione, campi.
     * 3. L'ETICHETTA peso 600, maiuscolo, spaziatura larga. Occhielli, legende,
     *                le due parole in fondo alla riga dati.
     *
     * Un carattere solo per tutti e tre: due famiglie diverse fra testo e
     * numeri, in una scheda alta sei righe, si vedrebbero. */
    --dnagw-font: "DNA Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* La scala. Fluida dove il salto si vede (clamp), fissa dove no: le
       etichette a 12px restano 12px ovunque, perché rimpicciolirle su un
       telefono vorrebbe dire renderle illeggibili proprio dove si legge peggio. */
    --dnagw-t-etichetta: .75rem;                                   /* 12px */
    --dnagw-t-dato: .8125rem;                                      /* 13px */
    --dnagw-t-corpo: clamp(.9375rem, .91rem + .1vw, 1rem);         /* 15→16px */
    --dnagw-t-numero: clamp(.9375rem, .88rem + .26vw, 1.0625rem);  /* 15→17px */
    --dnagw-t-titolo: clamp(1.0625rem, 1.01rem + .26vw, 1.1875rem);/* 17→19px */
    --dnagw-t-sezione: clamp(1.0625rem, .98rem + .4vw, 1.25rem);   /* 17→20px */
    --dnagw-t-prezzo: clamp(1.375rem, 1.2rem + .78vw, 1.75rem);    /* 22→28px */
    --dnagw-t-pagina: clamp(1.5rem, 1.29rem + .95vw, 2rem);        /* 24→32px */
    --dnagw-t-prezzo-grande: clamp(1.875rem, 1.6rem + 1.25vw, 2.5rem); /* 30→40px */
    /* Il conteggio della fascia: l'unico corpo davvero grande di tutta la
       pagina, e l'audacia si spende tutta qui. */
    --dnagw-t-display: clamp(1.875rem, 1.1rem + 3.6vw, 3.5rem);    /* 30→56px */

    /* Tre pesi, decisi. 600 è il peso di lavoro (titoli, etichette, bottoni),
       700 è riservato ai numeri: se tutto fosse 400 e 700 non ci sarebbe una
       gerarchia, ci sarebbero due voci. */
    --dnagw-peso-testo: 400;
    --dnagw-peso-forte: 600;
    --dnagw-peso-prezzo: 700;

    /* Spazio. Una sola scala per margini, spaziature e distanze. */
    --dnagw-s1: .25rem;
    --dnagw-s2: .5rem;
    --dnagw-s3: .75rem;
    --dnagw-s4: 1rem;
    --dnagw-s5: 1.5rem;
    --dnagw-s6: 2rem;
    --dnagw-s7: 3rem;

    /* Forma. Quasi vivi: un registro non ha gli angoli tondi, e dieci pixel di
       raggio sono la firma di qualunque applicazione fatta in fretta. Il nome
       --dnagw-raggio resta questo perché il piano della fase 4 lo stampa già così. */
    --dnagw-raggio: 3px;
    --dnagw-raggio-piccolo: 2px;

    /* La misura minima di un bersaglio da toccare col pollice. Non è un
       arrotondamento: la maggior parte di chi guarda è su un telefono, la sera. */
    --dnagw-tocco: 44px;

    /* L'altezza delle due barre fisse del telefono. Sta in una variabile perché
       la usano in due: la barra, per essere alta così, e il contenitore, per
       lasciare sotto lo spazio corrispondente — senza, la barra coprirebbe la
       paginazione e l'ultimo elemento che prende il fuoco. */
    --dnagw-barra-h: 4rem;

    /* La misura massima di una riga di testo lungo. Oltre, l'occhio perde il
       capo della riga successiva: vale per la descrizione dell'annuncio, che è
       l'unico testo davvero lungo di tutto il plugin. */
    --dnagw-misura: 66ch;

    /* LA COLONNA FISSA del riquadro del prezzo, dentro «.dnagw-scheda» (il
       contenuto si prende il resto, «minmax(0, 1fr)»: è una misura fissa
       perché è il CONTENUTO del riquadro a decidere quanto gli serve, non il
       monitor). In una variabile perché la usa anche il pannello del modulo,
       che sta fuori da quella griglia e deve allinearsi allo stesso bordo —
       vedi il commento sopra «.dnagw-scheda__modulo». Scritta due volte a
       mano, la stessa misura potrebbe divergere alla prima modifica; così no. */
    --dnagw-scheda-colonna: 360px;

    /* La larghezza massima di un campo BREVE del modulo di contatto — nome,
       email, telefono, città, una tendina. Oltre questa misura un campo si
       compila peggio anche quando la cella della griglia che lo contiene è
       più larga: un riquadro generoso non deve tradursi in caselle enormi. Il
       messaggio (l'unico campo lungo) resta escluso ed è largo quanto la sua
       riga, com'è giusto per un testo. */
    --dnagw-campo-max: 26rem;

    /* LA COLONNA DELLE MINIATURE, su schermo largo. Tre misure che dipendono
       l'una dall'altra e che quindi si dicono UNA VOLTA SOLA: la larghezza
       della colonna, l'altezza di una miniatura dentro di lei, e quante se ne
       vedono senza scorrere.
       L'altezza è una CONSEGUENZA, non una scelta: la miniatura è larga quanto
       la colonna meno il suo spazio interno (148 − 2×6 = 136px) e alta di
       conseguenza, perché sta in proporzione 16/9 — 136 × 9 ÷ 16 = 76,5px.
       Prima questi numeri stavano tutti dentro un calc() scritto a mano, e la
       loro aritmetica andava rifatta a memoria a ogni ritocco: è così che gli
       84px della vecchia striscia ORIZZONTALE erano sopravvissuti al passaggio
       delle miniature in colonna. Ora il tetto in altezza e l'altezza della
       riga si costruiscono dalle stesse due variabili, e non possono
       divergere.
       «--dnagw-miniature-visibili» ha un GEMELLO nel JavaScript, che marca
       l'ultima visibile col contrassegno «+N» e quel numero ce l'ha scritto
       dentro. Non è un doppione tollerato, ed è la stessa forma di
       «--dnagw-limite-telefono» qui sotto: SchedaRiferimentoTest legge questa
       variabile e va a cercare NEL FILE DELLO SCRIPT le due espressioni che la
       usano, e diventa rosso se divergono. Cambiandone uno si cambia
       l'altro. */
    --dnagw-miniature-larghezza: 148px;
    --dnagw-miniatura-stacco: 6px;
    --dnagw-miniatura-h: 76.5px;
    --dnagw-miniature-visibili: 4;

    /* IL LIMITE fra il telefono e lo schermo largo — la larghezza a cui
       l'impianto passa a colonna singola, detta UNA volta sola.
       Le media query non sanno leggere var(), quindi il numero resta scritto
       per esteso anche nel «@media (max-width: 900px)» in fondo al file: questa
       riga è la stessa misura ripetuta in un posto che il JavaScript possa
       leggere (getComputedStyle), perché è lui a decidere dove i filtri si
       applicano da soli e dove no, e deve decidere sulla STESSA soglia che la
       pagina sta mostrando. Non è un doppione tollerato: FiltriAutomaticiTest
       confronta i due numeri e diventa rosso se divergono. Cambiandone uno si
       cambia l'altro. */
    --dnagw-limite-telefono: 900px;
}

/* --------------------------------------------------------------------------
 * I RUOLI DI COLORE, E TUTTO CIÒ CHE SE NE DERIVA — sul CONTENITORE
 *
 * Questo blocco stava su :root fino al 10 agosto 2026, ed è sceso qui per una
 * ragione sola: è qui che il pannello DNA Gestionale ▸ Impostazioni ▸
 * Aspetto scrive i colori del concessionario, come attributo «style» del tag
 * (vedi DnaGw\Wp\Aspetto).
 *
 * IL MECCANISMO, perché nessuno lo rimetta su :root «per ordine». Una
 * proprietà personalizzata si risolve DOVE È DICHIARATA, non dove viene usata:
 * è la stessa trappola che «.dnagw-inverso» qui sotto documenta e per cui deve
 * rimiscelare i derivati uno per uno. Con «--dnagw-tenue: color-mix(…
 * var(--dnagw-inchiostro) …)» scritto su :root, il grigio dei pannelli viene
 * calcolato SULL'ELEMENTO RADICE — cioè con l'inchiostro del TEMA — e i
 * discendenti ne ereditano il risultato già cotto. L'inchiostro scelto dal
 * concessionario, che arriva sul contenitore, cambierebbe il testo e nient'altro:
 * pannelli, filetti e testo tenue resterebbero intonati alla tavolozza di
 * qualcun altro. Dichiarati QUI si risolvono qui, dove l'attributo «style» ha
 * già vinto, e si ricalcolano tutti da soli.
 *
 * E lo scope è quello giusto anche per l'altro verso: tutto ciò che è nostro
 * sta nel documento dentro «.dnagw-contenitore» — comprese le due barre fisse
 * del telefono e il pannello dei filtri, che sono «position: fixed» ma restano
 * DISCENDENTI, e le variabili si ereditano per albero e non per posizione.
 * Lo misura AspettoColoriTest, che rende il markup e conta i nodi.
 * ------------------------------------------------------------------------ */
.dnagw-contenitore {
    /* I DUE RUOLI. «inchiostro» e «fondo» non sono due colori: sono due RUOLI,
       e la classe .dnagw-inverso più in basso li scambia. Tutto il file parla
       solo di ruoli, mai di chiaro e scuro — così la stessa regola funziona
       sulla carta e dentro la fascia d'inchiostro, e su un tema scuro funziona
       lo stesso senza una riga in più. */
    --dnagw-inchiostro: var(--dnagw-tema-testo);
    --dnagw-fondo: var(--dnagw-tema-fondo);

    /* I DERIVATI. Ogni fondo secondario e ogni filetto è una miscela dei due
       ruoli: così restano intonati a QUALUNQUE tavolozza — quella del tema o
       quella scelta in DNA Gestionale ▸ Impostazioni ▸ Aspetto — invece di
       essere tre grigi freddi che su una tavolozza calda stonano.
       Il valore letterale viene PRIMA e la miscela DOPO: un browser che non
       conosce color-mix() ignora la seconda dichiarazione e tiene la prima, che
       è la tavolozza di ripiego collaudata. È un doppione voluto. */
    --dnagw-tenue: #f3f5f8;
    --dnagw-tenue: color-mix(in srgb, var(--dnagw-inchiostro) 6%, var(--dnagw-fondo));
    --dnagw-linea: #d8dfe7;
    --dnagw-linea: color-mix(in srgb, var(--dnagw-inchiostro) 20%, var(--dnagw-fondo));

    /* IL FONDO DELLA PAGINA, dietro i pannelli (veste del 10 agosto 2026).
       Appena più scuro del fondo — la METÀ dello stacco di «tenue», che è già
       il grigio più chiaro del foglio — perché il suo mestiere è solo far
       galleggiare i pannelli, non diventare una tinta a sua volta. Derivato
       come tutti gli altri: su una tavolozza scura si scurisce da sé, e il
       concessionario che sceglie il proprio «Fondo» se lo ritrova intonato
       senza aver dovuto scegliere un secondo colore. */
    --dnagw-pagina: #f8fafb;
    --dnagw-pagina: color-mix(in srgb, var(--dnagw-inchiostro) 3%, var(--dnagw-fondo));

    /* L'inchiostro appena schiarito per i dati secondari. È la trappola del
       contrasto: un grigio «tenue» scende sotto AA senza che si veda. All'85%
       resta all'85% del contrasto che la tavolozza usa per il PROPRIO testo —
       una tavolozza che fallisce qui sta già fallendo col suo corpo del testo.
       Non schiarirlo «perché è troppo forte»: la gerarchia di questa pagina la
       fa la tipografia (corpo, peso, spaziatura), non il grigio. */
    --dnagw-inchiostro-tenue: #4d6379;
    --dnagw-inchiostro-tenue: color-mix(in srgb, var(--dnagw-inchiostro) 85%, var(--dnagw-fondo));

    /* L'ACCENTO — l'unico posto in cui entra un colore di marca del tema, e
       entra SOLO come segno, mai sotto del testo: il filetto sotto «Filtri», il
       bordo della miniatura attiva, il filo sopra la barra del telefono. Se il
       tema non dichiara un primary si ricade sull'AZIONE — cioè sul colore che
       il concessionario ha scelto in DNA Gestionale ▸ Impostazioni ▸ Aspetto,
       se ne ha scelto uno, e sull'inchiostro altrimenti. Nessuna di queste tre cose è testo, quindi
       nessuna può diventare illeggibile. */
    --dnagw-accento: var(--wp--preset--color--primary, var(--wp--preset--color--accent, var(--dnagw-azione)));

    /* L'AZIONE. Separata dall'inchiostro perché è l'unica che il concessionario
       cambia davvero: DNA Gestionale ▸ Impostazioni ▸ Aspetto scrive
       «--dnagw-azione» e «--dnagw-azione-testo» direttamente su questo
       elemento, e queste due righe sono il ripiego di quando non ha scelto
       niente — inchiostro su fondo, cioè la coppia che il tema garantisce
       leggibile. «--dnagw-primario»
       resta ammesso come sorgente per chi (un tema figlio, uno snippet) l'avesse
       già impostata.
       IL CONTRASTO DEL TESTO NON SI DERIVA QUI: quando l'azione è scelta dal
       concessionario, il colore da metterci sopra lo calcola PHP dalla luminanza
       (Aspetto::testoSopra()). Un «color-mix» non sa dire se una tinta sia
       chiara o scura, e su un giallo di marca il testo bianco sparisce. */
    --dnagw-azione: var(--dnagw-primario, var(--dnagw-inchiostro));
    --dnagw-azione-testo: var(--dnagw-fondo);
}

/* LO SCAMBIO DEI RUOLI — la classe che regge la fascia in testa e la fascia
   della galleria, ed è tutta l'impaginazione di questa pagina in sei righe.
   Scambia inchiostro e fondo e RIDERIVA i derivati: le proprietà
   personalizzate non si ricalcolano da sole quando si ridichiara ciò da cui
   dipendono — il loro valore si risolve dove sono DICHIARATE, cioè su :root —
   quindi vanno rimiscelate qui una per una. È l'unica ripetizione del file, ed
   è meno costosa di un secondo blocco di regole «scure».
   Da qui in poi tutto quello che sta dentro la fascia — filetti, testo tenue,
   frecce della galleria, e soprattutto l'ANELLO DEL FUOCO — si corregge da sé. */
.dnagw-inverso {
    --dnagw-inchiostro: var(--dnagw-tema-fondo);
    --dnagw-fondo: var(--dnagw-tema-testo);
    --dnagw-tenue: #24384c;
    --dnagw-tenue: color-mix(in srgb, var(--dnagw-tema-fondo) 14%, var(--dnagw-tema-testo));
    --dnagw-linea: #3d5064;
    --dnagw-linea: color-mix(in srgb, var(--dnagw-tema-fondo) 30%, var(--dnagw-tema-testo));
    --dnagw-inchiostro-tenue: #cfd8e2;
    --dnagw-inchiostro-tenue: color-mix(in srgb, var(--dnagw-tema-fondo) 82%, var(--dnagw-tema-testo));
    /* Anche il fondo della pagina, per la stessa ragione delle righe qui
       sopra: i derivati non si ricalcolano da soli. Nessuno lo usa oggi dentro
       una fascia invertita, ma lasciarlo fuori vorrebbe dire che il primo che
       ce ne mettesse uno si ritroverebbe il grigio chiaro dentro il nero. */
    --dnagw-pagina: #1a2c3e;
    --dnagw-pagina: color-mix(in srgb, var(--dnagw-tema-fondo) 3%, var(--dnagw-tema-testo));
    --dnagw-azione: var(--dnagw-primario, var(--dnagw-tema-fondo));
    --dnagw-azione-testo: var(--dnagw-tema-testo);
    background: var(--dnagw-fondo);
    color: var(--dnagw-inchiostro);
}

/* LA FASCIA A LARGHEZZA PIENA.
   Il plugin non sa quanto è largo il contenitore del tema, quindi per uscirne
   non può contare su una misura: conta su un'OMBRA. «box-shadow» con 100vmax di
   diffusione dipinge il colore della fascia fino ai bordi della finestra, e le
   ombre — al contrario di «width: 100vw» — non fanno MAI comparire una barra di
   scorrimento orizzontale, nemmeno con la barra verticale di Windows che si
   mangia quindici pixel di viewport. Il clip-path riporta il taglio a filo
   sopra e sotto, così l'ombra allarga e non allunga.
   Chi non conosce clip-path vede una fascia che deborda in verticale: brutta,
   non rotta. Chi non conosce nemmeno box-shadow vede una fascia larga quanto il
   contenitore, che è il disegno di prima. Degrada in due gradini, e mai in una
   pagina che scorre di lato. */
.dnagw-piena {
    box-shadow: 0 0 0 100vmax var(--dnagw-fondo);
    clip-path: inset(0 -100vmax);
}

/* --------------------------------------------------------------------------
 * IL CONTENITORE, e gli azzeramenti — tutti dentro di lui
 * ------------------------------------------------------------------------ */
.dnagw-contenitore {
    max-width: 1280px;
    margin: 0 auto;
    /* NIENTE FONDO PROPRIO: le due pagine del plugin stanno sul fondo del tema.
       Dal 10 agosto 2026 al 16 qui c'era «--dnagw-pagina», un grigio appena
       accennato, e il commento spiegava per bene perché non uscisse fino ai
       bordi della finestra — le due tecniche per farlo uscire sono entrambe
       rotte: «box-shadow» con 100vmax dipinge anche SOPRA l'intestazione del
       tema, che non è nostra, e chiuderla con «clip-path» RITAGLIA i
       discendenti «position: fixed», cioè le due barre del telefono e il
       pannello dei filtri. Tutto vero, e restava il risultato: su un monitor
       largo il grigio si fermava a 1280px e ai lati comparivano due bande del
       colore del tema. Il committente le ha viste sul sito di un cliente il 16
       agosto 2026 — «danno al sito l'idea di un sito molto, molto vecchio» — e
       ha scelto la terza strada, che non è nessuna delle due tecniche: togliere
       il colore. Senza stacco non c'è banda, a qualunque larghezza, e non
       serve uscire da nessun contenitore altrui.
       QUELLO CHE ORA STACCA LE SCHEDE non è più il fondo dietro di loro: è
       l'OMBRA sotto ognuna. È il «più rilievo» chiesto nello stesso messaggio,
       ed è la metà che rende possibile questa.
       (Nella prima versione c'era anche un rettangolo dei dati tingibile: il
       committente l'ha guardato e l'ha fatto togliere lo stesso giorno. Di
       quella richiesta restano i due colori del NOME e del PREZZO — vedi
       «--dnagw-card-titolo» e «--dnagw-card-prezzo» più in basso.) */
    padding: var(--dnagw-s4) var(--dnagw-s4) var(--dnagw-s7);
    /* TRASPARENTE, e non «--dnagw-fondo»: sono due cose diverse, e la
       differenza si vede solo su un tema che non sia bianco. Dipingere il
       NOSTRO fondo rifarebbe le bande al contrario — un rettangolo bianco in
       mezzo a una pagina grigia — e sarebbe di nuovo il plugin che decide il
       colore di una pagina che non è sua. Non dipingendo niente, dietro c'è
       quello che il tema ha messo, qualunque cosa sia. Misurato con una sonda
       in Chromium il 16 agosto 2026: era proprio questa la riga sbagliata. */
    background: transparent;
    font-family: var(--dnagw-font);
    font-size: var(--dnagw-t-corpo);
    font-weight: var(--dnagw-peso-testo);
    line-height: 1.55;
    color: var(--dnagw-inchiostro);
    /* Alcuni temi centrano il testo di tutto il contenuto: qui dentro no. */
    text-align: left;
}
/* IL BOX-SIZING STA NEL BLINDAGGIO, più in basso, e non qui.
   Fino al 16 agosto 2026 c'era qui una regola senza «!important», con scritto
   accanto il difetto che previene — «senza, un padding su un <input> largo il
   100% lo fa uscire dalla colonna». Descriveva giusto e non teneva: vale
   (0,1,0), e un «#main input» del tema la batte. È successo sul sito di un
   cliente, misurato: il campo di ricerca sbordava di 61,8px e copriva la
   tendina «Marca». Vedi la regola ⑤ del blindaggio. */
.dnagw-contenitore a {
    color: var(--dnagw-inchiostro);
    text-underline-offset: .16em;
}
/* LA TRAPPOLA DELLA SPECIFICITÀ, e non è teoria: il selettore qui sopra vale
   una classe più un elemento, «.dnagw-bottone» vale una classe sola, quindi su
   un BOTTONE CHE È UN COLLEGAMENTO — e ce n'è uno, «Richiedi informazioni»
   nella barra fissa della scheda — vinceva quello di sopra e il testo usciva
   inchiostro su inchiostro: un rettangolo nero senza scritte. Questa riga
   rimette il colore giusto ai soli <a> che sono bottoni. Non si risolve
   scopando «.dnagw-bottone» dentro il contenitore: gli si alzerebbe la
   specificità e vincerebbe su «.dnagw-solo-mobile», riportando il pulsante
   «Filtri» in mezzo alla pagina di uno schermo largo. */
.dnagw-contenitore a.dnagw-bottone { color: var(--dnagw-azione-testo); }

/* --------------------------------------------------------------------------
 * IL BLINDAGGIO DEI CONTROLLI — l'unico blocco del foglio che usa !important,
 * e l'unico che possa usarlo
 *
 * LA CLASSE DEL DIFETTO, che conta più dei due casi che l'hanno fatta vedere.
 * Ogni altra regola di questo file dipinge quello che vuole ottenere e tace su
 * tutto il resto; e va benissimo finché il tema ospite tace anche lui. Ma un
 * tema è un foglio di stile che gira PRIMA del nostro sullo stesso documento, e
 * ne perdiamo il confronto in due modi diversi:
 *
 * ① PROPRIETÀ CHE NON DICHIARIAMO AFFATTO. Di «visibility» e «opacity» questo
 *    file non parlava da nessuna parte, quindi non c'era nessun confronto da
 *    vincere: un tema che scrive «select { opacity: 0; visibility: hidden }»
 *    (è il modo con cui si costruisce una tendina finta) spegne i NOSTRI
 *    <select> e nessuna regola nostra lo contraddice. Sul sito vero questo si
 *    legge «la colonna dei filtri è vuota» e «il campo che ho aggiunto al
 *    modulo non esce»: il markup è pieno e giusto, e non dipinge niente.
 * ② SPECIFICITÀ PERSA CONTRO UN SELETTORE CON ID. «#wrapper button» vale
 *    (1,0,1); «.dnagw-galleria__freccia» vale (0,1,0). Contro un ID non c'è
 *    quantità di classi che basti — gli ID si contano PRIMA delle classi —
 *    quindi il «color: #fff» del tema vince su tutte le nostre frecce, e le
 *    frecce diventano bianche su trasparente. I temi commerciali scrivono
 *    «#wrapper», «#main», «#content» per la stessa ragione per cui noi non lo
 *    facciamo: per non perdere mai un confronto.
 *
 * Misurato dal vivo il 12 agosto 2026 su un sito con tema Motors, risalendo in
 * Chromium al file sorgente della regola vincente: i due modi sopra, più
 * «input[type=text] { height: 47px; color: #888; background: #eceff3;
 * font-size: 14px }», che ci prendeva altezza, colore e fondo di ogni campo.
 *
 * PERCHÉ «!important», e perché è l'unica strada. Contro (1,0,1) l'unica altra
 * mossa sarebbe mettere un ID nostro nel markup, cioè cominciare una gara di
 * ID sul sito di qualcun altro: la si vince finché il tema successivo non ne
 * mette due. «!important» sta sopra la specificità e chiude la questione in un
 * posto solo, che è esattamente quello che serve a un prodotto che deve girare
 * su QUALSIASI tema. Resta scoped sotto «.dnagw-contenitore», come tutto il
 * resto: fuori di lì non tocchiamo un controllo di nessuno.
 *
 * E PERCHÉ NON BLOCCA NOI STESSI, che è la trappola ovvia di questa tecnica.
 * Qui l'«!important» sta sulla PROPRIETÀ, mai sul VALORE: il valore arriva da
 * una proprietà personalizzata che ogni componente del foglio può impostare
 * con la specificità normale — «.dnagw-bottone» dice
 * «--dnagw-controllo-fondo: var(--dnagw-azione)» e il blindaggio lo dipinge.
 * Un componente che vuole il valore predefinito non scrive niente. Le sette
 * variabili, coi loro predefiniti:
 *
 *   --dnagw-controllo-testo        (color)          var(--dnagw-inchiostro)
 *   --dnagw-controllo-fondo        (background)     var(--dnagw-fondo)
 *   --dnagw-controllo-t            (font-size)      var(--dnagw-t-corpo)
 *   --dnagw-controllo-h            (height)         auto
 *   --dnagw-controllo-maiuscolo    (text-transform) none
 *   --dnagw-controllo-tracciatura  (letter-spacing) normal
 *   --dnagw-controllo-opacita      (opacity)        1
 *
 * LA LISTA DELLE PROPRIETÀ È CURATA, e si allunga solo con una misura in mano.
 * Ci sta dentro ciò che, messo storto dal tema, rende un controllo INVISIBILE o
 * ILLEGGIBILE. Restano fuori apposta, e vale la pena dire perché:
 *   · «background-image» e «appearance»: un tema che rimpiazza la freccia del
 *     <select> con un'immagine propria è una divergenza estetica, non un
 *     difetto; e forzare «background-image: none» senza forzare anche
 *     «appearance» lascerebbe un <select> con NESSUNA freccia, che è peggio
 *     della freccia di qualcun altro.
 *   · «width» e «min-height»: un tema che li forza fa un controllo largo o
 *     alto in modo strano, non un controllo che sparisce.
 *   · «display»: spegnerlo è l'unico modo che il nostro stesso JavaScript ha
 *     per nascondere ciò che deve nascondere ([hidden] sul pulsante «Mostra i
 *     veicoli», sulla barra del telefono, sulle foto non attive della
 *     galleria). Blindarlo vorrebbe dire rompere il miglioramento progressivo.
 *
 * LE TRE ESCLUSIONI, ognuna per una ragione sua:
 *   · CASELLE E RADIO restano fuori dalla seconda regola. Il loro disegno lo fa
 *     il sistema operativo, e forzargli sotto un fondo o un'altezza è il modo
 *     di ritrovarsi un quadrato vuoto senza spunta. Della prima regola —
 *     visibilità e opacità — hanno invece bisogno più di tutti: «input[type=
 *     checkbox] { opacity: 0 }» è il modo standard con cui un tema si disegna
 *     le proprie caselle, e spegnerebbe le nostre.
 *   · «height» NON si blinda sui <textarea>: quando si trascina l'angolo di un
 *     campo ridimensionabile il browser scrive un «height» in linea, e una
 *     regola «!important» batte anche quello — «resize: vertical» smetterebbe
 *     di funzionare sotto le dita di chi lo usa.
 *   · I <a> che portano «.dnagw-bottone» NON sono controlli e non entrano qui.
 *     Il loro colore resta affidato alla specificità normale (vedi la trappola
 *     documentata qui sopra), e per questo ogni componente che vive su tutti e
 *     due — bottone e collegamento — dichiara la variabile E la proprietà,
 *     leggendo la seconda dalla prima: il valore resta scritto UNA volta sola e
 *     non può divergere.
 *
 * La rete che tiene in piedi tutto questo NON è nella suite PHPUnit, perché
 * nessun test PHP guarda un pixel: è il banco «tema ostile»,
 * «strumenti/banco-tema-ostile.js», che rende il markup vero con questo foglio
 * vero e le regole del tema vero e misura in Chromium. Si esegue con
 * «node strumenti/banco-tema-ostile.js». Chi tocca questo blocco lo riesegue.
 * ------------------------------------------------------------------------ */
/* ① Ciò che fa sparire un controllo. Le caselle ci stanno dentro. */
.dnagw-contenitore select,
.dnagw-contenitore textarea,
.dnagw-contenitore button,
.dnagw-contenitore input {
    visibility: visible !important;
    opacity: var(--dnagw-controllo-opacita, 1) !important;
}
/* ② Ciò che lo rende illeggibile. Caselle e radio restano fuori. */
.dnagw-contenitore select,
.dnagw-contenitore textarea,
.dnagw-contenitore button,
.dnagw-contenitore input:not([type="checkbox"]):not([type="radio"]) {
    color: var(--dnagw-controllo-testo, var(--dnagw-inchiostro)) !important;
    background-color: var(--dnagw-controllo-fondo, var(--dnagw-fondo)) !important;
    font-family: var(--dnagw-font) !important;
    font-size: var(--dnagw-controllo-t, var(--dnagw-t-corpo)) !important;
    text-transform: var(--dnagw-controllo-maiuscolo, none) !important;
    letter-spacing: var(--dnagw-controllo-tracciatura, normal) !important;
}
/* ③ L'altezza, senza i <textarea>: vedi «resize: vertical» qui sopra. */
.dnagw-contenitore select,
.dnagw-contenitore button,
.dnagw-contenitore input:not([type="checkbox"]):not([type="radio"]) {
    height: var(--dnagw-controllo-h, auto) !important;
}
/* ④ LO SPAZIO CHE TIENE IL TESTO LONTANO DALLA LENTE, e vale per il solo campo
   di ricerca.
   Non è finito nei tre blocchi qui sopra apposta: quelli valgono per OGNI
   controllo, e il padding di un campo è la proprietà che cambia di più fra un
   <select>, una casella numerica e un'area di testo — blindarlo per tutti
   vorrebbe dire imporre a ognuno la misura di un altro.
   Qui invece la lente è disegnata SOPRA il campo, in «position: absolute»: se
   il tema si riprende il padding, il testo non si sposta di lato e la prima
   lettera finisce sotto l'icona. Non è estetica — è un pezzo di interfaccia
   che ne copre un altro. Misurato il 16 agosto 2026 sul sito di un cliente:
   «🔍Cerca marca, modello…», i due attaccati.
   L'«!important» sta sulla PROPRIETÀ e il valore arriva da una proprietà
   personalizzata, che è la regola di tutto questo blocco: il calcolo resta uno
   solo, sta accanto alla lente che deve schivare, e questa riga non lo
   duplica. */
.dnagw-contenitore .dnagw-filtri__cerca-campo {
    padding-left: var(--dnagw-cerca-scostamento) !important;
}
/* ⑤ COME SI MISURA UNA LARGHEZZA, e vale per tutto ciò che sta qui dentro.
   Questa regola stava più in su, senza «!important», con accanto scritto
   esattamente il difetto che previene: «un padding su un <input> largo il 100%
   lo fa uscire dalla colonna». Descriveva giusto e non teneva — «.dnagw-contenitore *»
   vale (0,1,0), e un «#main input { box-sizing: content-box }» la batte.
   Il 16 agosto 2026 è successo sul sito di un cliente, e la regola ④ qui sopra
   l'ha resa VISIBILE invece di causarla: finché il tema si riprendeva anche il
   padding, il campo restava largo il 100% e sbordava di zero; blindato il
   padding e non la larghezza, quei 61,8px sono usciti dal contenitore e sono
   finiti sopra la tendina «Marca».
   Le due regole vanno insieme, e questa è la ragione per cui non si torna
   indietro su una sola delle due.
   Qui il valore NON arriva da una proprietà personalizzata, ed è l'unica del
   blocco: non c'è niente da variare per componente — «content-box» non lo
   vuole nessun pezzo di questo foglio, e una proprietà che potesse dire
   altrimenti sarebbe soltanto un modo in più di sbagliare. */
.dnagw-contenitore,
.dnagw-contenitore *,
.dnagw-contenitore *::before,
.dnagw-contenitore *::after {
    box-sizing: border-box !important;
}
/* ⑥ IL COLORE DEL NOME DELL'AUTO E DEL PREZZO, nelle schede dell'elenco.
   Sono gli unici due testi che il concessionario sceglie a mano, e a differenza
   di tutto il resto del foglio un colore perso qui non e' un dettaglio
   estetico: e' una configurazione che ha pagato e che non si vede.
   IL DIFETTO VERO, 16 agosto 2026, sul sito di un cliente: il nome era del
   colore scelto e passandoci sopra col mouse diventava nero. Nessuna nostra
   regola tocca quel colore all'hover — a prenderselo era il tema, con un
   «#main a:hover» che batte la nostra «.dnagw-contenitore a» (0,1,1). Contro un
   ID non c'e' quantita' di classi che basti: la sola strada e' questa.
   IL TITOLO E' UN <h3> CON DENTRO UN <a>, e servono tutti e due nel selettore:
   il colore dei link e' proprio la regola che lo porta via, quindi blindare il
   solo contenitore lascerebbe scoperto l'elemento che il difetto colpisce.
   Il valore arriva dalle due variabili qui sopra e non e' scritto qui: e' la
   regola di questo blocco, e serve a che il prezzo barrato di un venduto possa
   restare tenue senza combattere con un «!important». */
.dnagw-contenitore .dnagw-card__titolo,
.dnagw-contenitore .dnagw-card__titolo a {
    color: var(--dnagw-titolo-colore, var(--dnagw-inchiostro)) !important;
}
.dnagw-contenitore .dnagw-card__prezzo-importo {
    color: var(--dnagw-prezzo-colore, var(--dnagw-inchiostro)) !important;
}

/* --------------------------------------------------------------------------
 * LA FILIGRANA DEL PERIODO DI PROVA (T21)
 *
 * Primo figlio del contenitore, su entrambe le pagine pubbliche, e SOLO
 * durante una demo valida: il markup lo stampa Frontend\Filigrana, che fuori da
 * quel caso risponde la stringa vuota — quindi questa regola non ha mai
 * bisogno di essere «spenta».
 *
 * I MARGINI NEGATIVI la fanno arrivare ai bordi del contenitore, che ha un
 * padding suo: una banda incassata dentro il padding sembrerebbe un avviso del
 * sito — una delle tante scatole colorate che i plugin lasciano in giro —
 * mentre questa deve leggersi come un timbro SOPRA la pagina. Sono sicuri qui:
 * il contenitore non ha «overflow: hidden» né «clip-path» (vedi il commento sul
 * fondo grigio), quindi non tagliano niente e non aprono lo scorrimento
 * orizzontale, perché tolgono spazio invece di aggiungerne.
 *
 * I COLORI SONO CABLATI, ed è l'unica regola di tutto il foglio che lo faccia
 * di proposito: ambra scura e bianco, non i ruoli di colore. Un concessionario
 * che sceglie i tre colori in DNA Gestionale ▸ Impostazioni ▸ Aspetto non
 * deve poter far sparire la filigrana con un ambra su ambra — né per malizia né, molto più
 * probabilmente, per caso. Il contrasto di questa coppia è ~8:1, quindi regge
 * anche se il tema di casa cambia le dimensioni del testo.
 * ------------------------------------------------------------------------ */
.dnagw-demo-banda {
    margin: calc(var(--dnagw-s4) * -1) calc(var(--dnagw-s4) * -1) var(--dnagw-s5);
    padding: var(--dnagw-s3) var(--dnagw-s4);
    background: #92400e;
    color: #fff;
    font-size: var(--dnagw-t-dato);
    font-weight: var(--dnagw-peso-forte);
    letter-spacing: .06em;
    text-align: center;
    /* Un titolo lungo non deve uscire dalla banda su un telefono stretto. */
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * IL PANNELLO — la veste del 10 agosto 2026, in una regola sola
 *
 * «io vorrei un layout più bello», parole del committente guardando la nostra
 * scheda dal telefono accanto a quella del riferimento. Il cambio è tutto qui:
 * la pagina si abbassa di un tono (il fondo appena grigio del contenitore) e i
 * blocchi di contenuto SALGONO — fondo pieno, angoli tondi, un filetto — così
 * la scheda si legge come una pila di schede invece che come un unico foglio
 * diviso da filetti.
 *
 * UNA CLASSE, NON UNA REGOLA PER BLOCCO. La portano il riquadro del prezzo, la
 * galleria, le pillole, le tre sezioni dei dettagli, il riquadro del
 * concessionario e il modulo: scrivere «anche questo è un pannello» sei volte
 * avrebbe voluto dire tenerle uguali a mano, e la prima correzione le avrebbe
 * fatte divergere.
 *
 * CHI NON È UN PANNELLO, e non per dimenticanza: la testata della scheda (è il
 * titolo della pagina, non un blocco di contenuto), la colonna dei filtri
 * dell'elenco, le schede dell'elenco — che riquadri lo sono già di loro — e il
 * nastro dei «Veicoli simili», che nel mockup approvato resta un nastro. Il
 * nastro sta FUORI da «.dnagw-scheda__contenuto» nel documento, e
 * VesteSchedaTest è ciò che impedisce che ci finisca dentro per sbaglio.
 * ------------------------------------------------------------------------ */
/* I PANNELLI DELLA SCHEDA, e la stessa ombra delle schede del catalogo.
   Fino al 16 agosto 2026 a staccarli era il fondo appena grigio della pagina:
   pannello bianco su grigio. Tolto il grigio — le bande laterali che il
   committente non voleva piu' — un pannello bianco su bianco sarebbe rimasto in
   piedi col solo filo del bordo, cioe' una pila di rettangoli piatti su una
   pagina lunga. L'ombra e' piu' leggera di quella delle schede del catalogo,
   perche' qui i pannelli sono grandi e pochi: la stessa intensita' peserebbe. */
.dnagw-pannello {
    padding: var(--dnagw-s4);
    background: var(--dnagw-fondo);
    border: 1px solid var(--dnagw-linea);
    border-radius: var(--dnagw-raggio);
    box-shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 4px 12px rgba(17, 17, 17, .05);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--dnagw-inchiostro) 6%, transparent),
        0 4px 12px color-mix(in srgb, var(--dnagw-inchiostro) 6%, transparent);
}
/* Lo stacco fra un pannello e il successivo. Sta sul CONTENITORE dei
   dettagli e non sulla classe del pannello, perché il primo di una colonna
   non deve avere spazio sopra: «+» sceglie solo quelli che ne hanno uno
   davanti. Il valore è più piccolo dei «s6» che le sezioni avevano prima:
   allora lo spazio era l'unica cosa che separava un blocco dall'altro, adesso
   ci sono il bordo e l'ombra a dirlo e lo stesso vuoto sembrerebbe un buco. */
.dnagw-scheda__contenuto > .dnagw-pannello + .dnagw-pannello,
.dnagw-scheda__modulo .dnagw-pannello {
    margin-top: var(--dnagw-s4);
}

/* IL FUOCO DELLA TASTIERA. Due anelli e non uno: quello chiaro all'interno
   stacca su una fotografia scura, quello scuro all'esterno stacca su fondo
   bianco. Un anello solo è sempre invisibile da una delle due parti — e su
   questa pagina si passa col tabulatore da un bottone bianco alla foto di
   un'auto nera nel giro di due tasti. Dentro le fasce d'inchiostro i due anelli
   si scambiano da soli, perché sono scritti sui RUOLI e .dnagw-inverso li
   scambia: è la ragione per cui quella classe esiste.
   Solo :focus-visible: il clic del mouse non deve accendere niente, e i
   browser che non lo conoscono tengono il proprio anello di sistema, che è
   comunque meglio di nessun anello. */
.dnagw-contenitore a:focus-visible,
.dnagw-contenitore button:focus-visible,
.dnagw-contenitore input:focus-visible,
.dnagw-contenitore select:focus-visible,
.dnagw-contenitore summary:focus-visible,
.dnagw-contenitore textarea:focus-visible {
    outline: 3px solid var(--dnagw-inchiostro);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--dnagw-fondo);
}

/* --------------------------------------------------------------------------
 * LA FASCIA IN TESTA ALL'ELENCO — l'unico gesto forte della pagina
 *
 * Fondo d'inchiostro da un bordo all'altro della finestra, e dentro
 * l'inversione della gerarchia consueta: il titolo scende a OCCHIELLO — dodici
 * pixel, maiuscolo, tracciato — e a fare il titolo è IL CONTEGGIO, «47 veicoli
 * disponibili», in cifre tabulari a cinquantasei pixel.
 *
 * Non è un vezzo: il soggetto di questa pagina non è «Le nostre auto», che è
 * quello che dice ogni concessionario del mondo, è QUANTE auto ci sono adesso.
 * Chi arriva vuole sapere se vale la pena guardare, e il numero glielo dice
 * prima di ogni altra cosa. Ed è lo stesso carattere, con le stesse cifre
 * tabulari, dei chilometri delle schede più sotto: la fascia non è un cappello
 * decorativo, è la prima riga del registro.
 * ------------------------------------------------------------------------ */
.dnagw-testata {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--dnagw-s4) var(--dnagw-s5);
    /* Senza più la fascia scura (9 agosto), la testata si comporta come quella
       della scheda: aria sopra e sotto misurata sul testo, e un filetto che la
       separa dai risultati al posto del colore che la separava prima. I due
       «s6» di padding servivano a dare corpo a un rettangolo colorato: su fondo
       bianco erano solo un buco. */
    margin: 0 0 var(--dnagw-s5);
    padding: var(--dnagw-s5) 0 var(--dnagw-s4);
    border-bottom: 1px solid var(--dnagw-linea);
}
.dnagw-testata__titolo { min-width: 0; }
.dnagw-testata h1 {
    margin: 0 0 var(--dnagw-s2);
    font-family: inherit;
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--dnagw-inchiostro-tenue);
}
.dnagw-testata__conteggio {
    margin: 0;
    font-size: var(--dnagw-t-display);
    font-weight: var(--dnagw-peso-prezzo);
    line-height: 1.02;
    letter-spacing: -.03em;
    color: var(--dnagw-inchiostro);
}
.dnagw-ordina {
    display: inline-flex;
    align-items: center;
    gap: var(--dnagw-s2);
}
.dnagw-ordina__etichetta {
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--dnagw-inchiostro-tenue);
}
/* Il menu «Ordina» (Task 3) vive nella barra dei risultati, sopra la
   griglia: FUORI dalla fascia d'inchiostro «.dnagw-inverso». Lì fuori
   --dnagw-fondo e --dnagw-inchiostro valgono già gli stessi due colori del
   tema che questa regola nominava per nome: passare ai RUOLI non cambia
   niente di quello che si vede oggi, e allinea il menu a ogni altro campo
   della pagina (border: 1px solid var(--dnagw-linea)). Il rischio del
   pannello a tendina disegnato dal sistema operativo — che su alcuni
   browser eredita i colori dell'elemento chiuso, e un menu scuro con voci
   scure è un menu che non si legge — resta un buon motivo per non farlo mai
   invertire: se il menu tornasse un giorno dentro una fascia scura andrebbe
   rivalutato, non dato per scontato. */
.dnagw-ordina select {
    min-height: var(--dnagw-tocco);
    padding: 0 var(--dnagw-s3);
    border: 1px solid var(--dnagw-linea);
    border-radius: var(--dnagw-raggio-piccolo);
    background: var(--dnagw-fondo);
    color: var(--dnagw-inchiostro);
    font-family: inherit;
    font-size: var(--dnagw-t-corpo);
    font-weight: var(--dnagw-peso-forte);
}

/* --------------------------------------------------------------------------
 * L'IMPIANTO: barra dei filtri sopra, griglia sotto
 *
 * FINO AL 12 AGOSTO 2026 era una griglia a due colonne — 264px di filtri a
 * sinistra, l'elenco a destra — con la colonna appiccicata allo scorrimento.
 * Il committente l'ha respinta: i filtri si usano per pochi secondi e si
 * tenevano un quarto della pagina per sempre, mentre le schede — che sono
 * quello che il visitatore e' venuto a guardare — restavano schiacciate su tre
 * quarti di schermo. Oggi i filtri stanno in una BARRA sopra la griglia e la
 * griglia prende tutta la larghezza.
 *
 * «.dnagw-layout» resta, ed e' a colonna unica: il markup ce l'ha ancora
 * attorno alla griglia, e sul telefono il blocco @media in fondo al file lo
 * nomina.
 * ------------------------------------------------------------------------ */
.dnagw-layout {
    display: block;
    min-width: 0;
}
/* Griglia fluida: nessuna larghezza fissa e nessun conteggio di colonne
   scritto a mano. Su 1440, senza piu' la colonna dei filtri a sottrarre
   spazio, fa quattro schede invece di tre; su un tablet due, su un telefono
   una, e su uno schermo molto largo il contenitore mette il tetto prima che le
   schede diventino cartelloni. */
.dnagw-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
    gap: var(--dnagw-s5) var(--dnagw-s4);
    align-content: start;
}

/* --------------------------------------------------------------------------
 * LA BARRA DEI RISULTATI (Task 3) — conteggio a sinistra, «Ordina» a destra,
 * sopra la griglia: è lì che si guarda, non nella fascia scura. Vive dentro
 * .dnagw-griglia (che è un grid) ma non è una scheda: grid-column: 1 / -1 la
 * fa uscire dalle celle, come già .dnagw-vuoto e .dnagw-paginazione qui
 * sotto. Il menu «Ordina» riusa .dnagw-ordina di sempre, solo spostato.
 * ------------------------------------------------------------------------ */
.dnagw-risultati {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dnagw-s3);
    padding-bottom: var(--dnagw-s4);
    margin-bottom: var(--dnagw-s1);
    border-bottom: 1px solid var(--dnagw-linea);
}
.dnagw-risultati__conteggio {
    margin: 0;
    font-size: var(--dnagw-t-dato);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dnagw-inchiostro-tenue);
}

/* --------------------------------------------------------------------------
 * LO STATO D'ATTESA — quando i filtri si applicano da soli
 *
 * Fra il tocco e la pagina nuova passa qualche decimo di secondo, e una pagina
 * che non reagisce si tocca due volte. Si vela la zona dei risultati — quella
 * che sta per cambiare — e basta: nessuna rotella che gira, nessun velo grigio
 * sopra, nessuna animazione. Il movimento che chi ha chiesto di non vederne non
 * vede: la dissolvenza è già spenta dal blocco «prefers-reduced-motion» in
 * fondo al file, che vale per tutto ciò che sta dentro .dnagw-contenitore.
 *
 * L'ANNUNCIO per chi la velatura non la vede vive in un paragrafo che il markup
 * porta già, vuoto: tolto dagli occhi ma non dall'albero, perché una regione
 * aria-live nascosta con «display: none» non annuncia niente. Il ritaglio a un
 * pixel è il modo con cui si toglie qualcosa dagli occhi lasciandolo agli
 * screen reader — «clip» per i browser vecchi, «clip-path» per gli altri.
 * ------------------------------------------------------------------------ */
.dnagw-attesa {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}
.dnagw-griglia--attesa {
    opacity: .5;
    transition: opacity 160ms ease;
}

/* --------------------------------------------------------------------------
 * LA BARRA DEI FILTRI (12 agosto 2026, sul mockup approvato dal committente)
 *
 * Non e' un riquadro: i riquadri di questa pagina sono le auto. Bastano lo
 * spazio e un filetto sotto — il peso visivo deve restare sulle foto. I
 * controlli pero' portano il proprio fondo, perche' il fondo del tema non si
 * conosce.
 *
 * NIENTE «overflow» QUI DENTRO, e non e' una dimenticanza: i pannelli delle
 * tendine sono «position: absolute» ed escono dal riquadro della barra. Un
 * «overflow: hidden» messo qui per ordine li taglierebbe a meta', e la tendina
 * piu' bassa diventerebbe inutilizzabile senza che nessun test se ne accorga.
 * ------------------------------------------------------------------------ */
.dnagw-filtri {
    min-width: 0;
    margin-bottom: var(--dnagw-s5);
}
.dnagw-filtri__form {
    display: flex;
    flex-direction: column;
    gap: var(--dnagw-s3);
}
/* IL TITOLO «Filtri» serve solo dentro il pannello del telefono, dove il
   pannello copre la pagina e va detto che cos'e'. Su schermo largo la barra si
   spiega da se' — c'e' scritto «Marca», «Prezzo» — e un titoletto in piu'
   sarebbe una riga di rumore sopra i controlli. Si toglie dagli OCCHI, non
   dall'albero: chi naviga con uno screen reader continua a trovarlo, ed e' il
   solo modo di sapere che cosa sia quel gruppo di comandi. E' lo stesso
   ritaglio a un pixel di «.dnagw-attesa» qui sopra. */
.dnagw-filtri__titolo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}
/* LA RIGA: il campo di ricerca a sinistra, le tendine che riempiono il resto e
   vanno a capo da sole quando non ci stanno piu'. Nessun conteggio di colonne
   scritto a mano: le famiglie sono nove quando il concessionario ha tutto
   valorizzato e due quando ha solo marca e modello. */
.dnagw-filtri__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--dnagw-s2) var(--dnagw-s3);
    padding-bottom: var(--dnagw-s3);
    border-bottom: 1px solid var(--dnagw-linea);
}
.dnagw-filtri__tendine {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--dnagw-s2);
    flex: 1 1 auto;
    min-width: 0;
}
/* --------------------------------------------------------------------------
 * LA RICERCA LIBERA, primo controllo della barra
 *
 * LA LENTE STA DENTRO IL CAMPO e centrata sull'altezza del campo, non
 * appoggiata accanto: il committente l'aveva vista «mal posizionata» il 12
 * agosto 2026. Il contenitore avvolge il SOLO input — se contenesse altro,
 * «top: 50%» si misurerebbe su un'altezza che non e' quella del campo — e lo
 * scostamento del testo si costruisce da UNA misura sola («--dnagw-lente»: la
 * larghezza della lente) piu' due volte lo spazio interno, invece dei due
 * numeri scritti a mano che c'erano prima e che si scollavano al primo
 * ritocco.
 *
 * La lente non intercetta il clic (pointer-events: none), altrimenti toccare
 * l'icona non aprirebbe la tastiera.
 * ------------------------------------------------------------------------ */
.dnagw-filtri__cerca {
    --dnagw-lente: 1.05rem;
    /* LO STACCO FRA LA LENTE E LA PRIMA LETTERA, scritto una volta sola perché
       lo leggono in due: il padding del campo e il banco che lo misura. Era
       «--dnagw-s3» (.75rem) ed è salito a «--dnagw-s4» (1rem) il 16 agosto
       2026 — «la lente non deve essere così attaccata alla parola Cerca»,
       rilievo del committente su un sito vero. */
    --dnagw-lente-stacco: var(--dnagw-s4);
    /* Il punto in cui comincia il testo: bordo sinistro + lente + stacco. Da
       QUI in giù è una misura sola, e non i tre numeri scritti a mano che si
       scollavano al primo ritocco. */
    --dnagw-cerca-scostamento: calc(var(--dnagw-s3) + var(--dnagw-lente) + var(--dnagw-lente-stacco));
    position: relative;
    display: block;
    flex: 1 1 15rem;
    max-width: 22rem;
    min-width: 0;
}
.dnagw-filtri__cerca-campo {
    display: block;
    width: 100%;
    min-height: var(--dnagw-tocco);
    padding: var(--dnagw-s2) var(--dnagw-s3);
    padding-left: var(--dnagw-cerca-scostamento);
    border: 1px solid var(--dnagw-linea);
    border-radius: var(--dnagw-raggio-piccolo);
    background: var(--dnagw-fondo);
    color: var(--dnagw-inchiostro);
    font-family: inherit;
    font-size: var(--dnagw-t-corpo);
}
.dnagw-filtri__cerca-icona {
    position: absolute;
    left: var(--dnagw-s3);
    top: 50%;
    width: var(--dnagw-lente);
    height: var(--dnagw-lente);
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--dnagw-inchiostro-tenue);
}

/* --------------------------------------------------------------------------
 * LE TENDINE — un <details> per famiglia
 *
 * Si aprono e si chiudono da se', da tastiera, senza una riga di JavaScript.
 * Il pannello e' «position: absolute» e sta SOPRA il contenuto: la barra non
 * si allunga aprendo una tendina, e l'elenco sotto non salta.
 *
 * IL «display: flex» NON STA MAI SUL <summary>. Su Safari ha una storia di
 * rotture che lasciano il <details> incapace di aprirsi — cioe' il filtro
 * irraggiungibile proprio su meta' dei telefoni. Il flex sta sullo <span>
 * dentro, che e' la stessa forma gia' in uso in wp-admin e sorvegliata da un
 * test suo. Il <summary> qui prende «list-style: none» (piu' il marcatore di
 * webkit spento a parte), che di display non parla affatto.
 * ------------------------------------------------------------------------ */
.dnagw-tendina {
    position: relative;
}
.dnagw-tendina__testa {
    list-style: none;
    cursor: pointer;
}
.dnagw-tendina__testa::-webkit-details-marker { display: none; }
.dnagw-tendina__testa::marker { content: ""; }
/* Il flex E' QUI, sullo span, e non sul <summary>: vedi sopra. */
.dnagw-tendina__etichetta {
    display: flex;
    align-items: center;
    gap: var(--dnagw-s2);
    min-height: var(--dnagw-tocco);
    padding: 0 var(--dnagw-s3);
    border: 1px solid var(--dnagw-linea);
    border-radius: var(--dnagw-raggio-piccolo);
    background: var(--dnagw-fondo);
    font-size: var(--dnagw-t-dato);
    font-weight: var(--dnagw-peso-forte);
    color: var(--dnagw-inchiostro);
    white-space: nowrap;
}
/* Il triangolo predefinito di <summary> lo disegna il browser, e cambia forma
   da Chrome a Firefox a Safari: si spegne (le due righe qui sopra) e se ne
   disegna uno proprio, con due lati di un quadrato ruotato — niente immagini,
   niente font, solo CSS, e ruota con una transizione che la regola di
   "prefers-reduced-motion" piu' in basso in questo file azzera per chi non
   vuole animazioni. */
.dnagw-tendina__etichetta::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}
.dnagw-tendina[open] > .dnagw-tendina__testa .dnagw-tendina__etichetta::after {
    transform: translateY(2px) rotate(-135deg);
}
/* Il pallino col numero di scelte accese: e' l'unico modo di sapere, a tendina
   CHIUSA, che li' dentro c'e' qualcosa. Porta il colore di marca perche' e' un
   segno, non del testo. */
.dnagw-tendina__acceso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--dnagw-azione);
    color: var(--dnagw-azione-testo);
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    font-variant-numeric: tabular-nums;
}
/* Una tendina APERTA si vede che e' aperta anche col pannello fuori dal campo
   visivo (una tendina in fondo alla riga, su uno schermo corto). */
.dnagw-tendina[open] > .dnagw-tendina__testa .dnagw-tendina__etichetta {
    border-color: var(--dnagw-inchiostro);
}
.dnagw-tendina__pannello {
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--dnagw-s1));
    left: 0;
    min-width: 16rem;
    max-width: min(24rem, 92vw);
    padding: var(--dnagw-s3);
    border: 1px solid var(--dnagw-linea);
    border-radius: var(--dnagw-raggio);
    background: var(--dnagw-fondo);
    color: var(--dnagw-inchiostro);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}
/* L'ultima tendina della riga aprirebbe il pannello oltre il bordo destro
   della finestra, e su una pagina che non scorre in orizzontale quel pezzo
   sarebbe irraggiungibile. Le ultime due si ancorano a destra: e' una regola
   sola e non una misura da tenere aggiornata. */
.dnagw-tendina:last-child > .dnagw-tendina__pannello,
.dnagw-tendina:nth-last-child(2) > .dnagw-tendina__pannello {
    left: auto;
    right: 0;
}
/* Le liste lunghe (i modelli, che sul parco reale sono ventiquattro) scorrono
   dentro il pannello invece di allungarlo fino a uscire dallo schermo. */
.dnagw-tendina__voci {
    max-height: 17rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--dnagw-linea) transparent;
}
/* IL VALORE PRECISO, sotto le fasce e separato da un filetto: e' l'«oppure»
   del mockup. Resta per chi ha in mente un numero — «non oltre 12.500» — che
   nessuna fascia puo' indovinare. */
.dnagw-tendina__preciso {
    margin-top: var(--dnagw-s3);
    padding-top: var(--dnagw-s3);
    border-top: 1px solid var(--dnagw-linea);
}
.dnagw-tendina__oppure {
    display: block;
    margin-bottom: var(--dnagw-s2);
    font-size: var(--dnagw-t-etichetta);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--dnagw-inchiostro-tenue);
}
.dnagw-tendina__piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dnagw-s3);
    margin-top: var(--dnagw-s3);
    padding-top: var(--dnagw-s3);
    border-top: 1px solid var(--dnagw-linea);
}
.dnagw-tendina__applica {
    flex: 1 1 auto;
    justify-content: center;
}
.dnagw-tendina__azzera {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--dnagw-tocco);
    font-size: var(--dnagw-t-dato);
    color: var(--dnagw-inchiostro-tenue);
}
.dnagw-filtri__intervallo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dnagw-s2);
}
.dnagw-filtri__intervallo input {
    width: 100%;
    min-width: 0;
    min-height: var(--dnagw-tocco);
    padding: var(--dnagw-s2) var(--dnagw-s3);
    border: 1px solid var(--dnagw-linea);
    border-radius: var(--dnagw-raggio-piccolo);
    background: var(--dnagw-fondo);
    color: var(--dnagw-inchiostro);
    font-family: inherit;
    font-size: var(--dnagw-t-corpo);
}
/* Casella, nome, numero: tre colonne, e il numero cade a destra. Con le cifre
   tabulari i conteggi si leggono in colonna come i chilometri delle schede —
   e' lo stesso gesto, applicato dove serve altrettanto. */
.dnagw-filtri__voce {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--dnagw-s2);
    min-height: 2rem;
    padding: var(--dnagw-s1) 0;
    cursor: pointer;
}
.dnagw-filtri__voce input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--dnagw-inchiostro);
}
.dnagw-filtri__numero {
    font-size: var(--dnagw-t-dato);
    font-variant-numeric: tabular-nums;
    color: var(--dnagw-inchiostro-tenue);
}
/* La capitalizzazione dei termini arriva dal gestionale e non e' uniforme:
   «ALFA ROMEO», «Elettrica/Benzina», «km 0». Nessuna trasformazione globale li
   salva tutti — `capitalize` farebbe «Mercedes-benz» — mentre la sola
   maiuscola iniziale sistema gli stati d'uso in minuscolo e non tocca
   nient'altro. ::first-letter vuole un contenitore di blocco, da cui
   l'inline-block. */
.dnagw-filtri__nome { display: inline-block; }
.dnagw-filtri__nome::first-letter { text-transform: uppercase; }

/* --------------------------------------------------------------------------
 * I FILTRI ATTIVI — la fila di pillole
 *
 * Ogni pillola e' un COLLEGAMENTO all'indirizzo senza quel filtro: funziona a
 * script spento, si copia, si condivide. Vedi la classe Pillole per il perche'
 * non sia un pulsante.
 * ------------------------------------------------------------------------ */
/* LA RIGA DEI FILTRI ACCESI, e lo spazio che la stacca dalle tendine.
   Qui c'era un margine superiore NEGATIVO di «--dnagw-s5», che annullava lo
   spazio del blocco precedente e incollava le pillole al filo sotto la barra:
   misurato col banco, 0px esatti. Il committente l'ha vista «troppo attaccata
   alla linea superiore» il 16 agosto 2026, e aveva ragione — non era una
   scelta, era una compensazione che si portava via tutto.
   Adesso la riga respira come qualunque altro blocco della pagina, e il banco
   pretende almeno 12px di stacco. */
.dnagw-attivi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dnagw-s2) var(--dnagw-s3);
    margin: var(--dnagw-s4) 0 var(--dnagw-s5);
}
.dnagw-attivi__titolo {
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--dnagw-inchiostro-tenue);
}
.dnagw-attivi__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnagw-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.dnagw-attivi__voce { display: flex; }
.dnagw-pillola {
    display: inline-flex;
    align-items: center;
    gap: var(--dnagw-s2);
    min-height: 2rem;
    padding: 0 var(--dnagw-s2) 0 var(--dnagw-s3);
    border: 1px solid var(--dnagw-linea);
    border-radius: 999px;
    background: var(--dnagw-fondo);
    font-size: var(--dnagw-t-dato);
    color: var(--dnagw-inchiostro);
    text-decoration: none;
}
.dnagw-pillola__testo::first-letter { text-transform: uppercase; }
/* La croce dentro un tondo: il bersaglio e' tutta la pillola, questo e' solo
   il segno che dice che cosa fa. */
.dnagw-pillola__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: var(--dnagw-pagina);
    font-size: .7rem;
    line-height: 1;
    color: var(--dnagw-inchiostro-tenue);
}
.dnagw-attivi__cancella {
    margin-left: auto;
    font-size: var(--dnagw-t-dato);
    color: var(--dnagw-inchiostro-tenue);
}

/* IL PULSANTE UNICO in fondo al form. Su schermo largo NON serve — ogni
   tendina ha il suo «Applica» — e sta fuori dagli occhi; sul telefono, dove le
   tendine stanno tutte dentro un pannello che copre la pagina, torna ed e' il
   comando che chiude applicando, col conteggio dal vivo scritto dentro
   («Mostra 17 veicoli»). Il blocco @media in fondo al file lo rimette.
   Nel markup nasce SEMPRE, e non e' a carico del JavaScript: e' il ripiego di
   chi non esegue lo script.

   IL SELETTORE PORTA «.dnagw-contenitore» APPOSTA, e non e' decorazione:
   «.dnagw-bottone» dichiara «display: inline-flex» e sta piu' in basso in
   questo file — a parita' di specificita' vince chi e' scritto per ultimo,
   quindi la riga qui sotto, da sola, PERDEVA. Misurato in Chromium il 12
   agosto 2026: il pulsante era largo 1248px in mezzo alla pagina a 1440.
   Un test che legga il TESTO del foglio non se ne accorge — la riga c'e' —
   e infatti non se n'era accorto. */
.dnagw-contenitore .dnagw-filtri__applica { display: none; }
/* MIGLIORAMENTO PROGRESSIVO — il verso conta piu' della regola.
   Il pannello dei filtri e' APERTO per difetto: senza JavaScript, su telefono,
   il visitatore vede la barra intera — lunga ma usabile — e il form funziona
   lo stesso, perche' l'invio e' un GET normale. E' il JavaScript a CHIUDERLO
   al caricamento, a scoprire il pulsante che lo riapre e ad aggiungere la
   croce. Al contrario — nascosto qui e aperto dal JavaScript — un browser che
   non esegue lo script lascia i filtri IRRAGGIUNGIBILI proprio sul telefono,
   cioe' sul dispositivo per cui il pannello esiste. E' il difetto che questa
   riga corregge: non scriverlo mai piu' in quel verso. */
.dnagw-filtri__chiudi { display: none; }

/* --------------------------------------------------------------------------
 * LA SCHEDA BREVE — la voce del registro
 *
 * Foto, nome, versione, LA RIGA DATI fra due filetti, il prezzo a destra. E
 * basta: il bottone «Vedi scheda» che stava in fondo non c'è più. Era un
 * accessorio — la scheda intera è già un collegamento, grazie al velo che il
 * titolo stende sopra di lei qui sotto — e cinquanta bottoni in fila erano
 * cinquanta macchie sopra le fotografie. Toglierlo accorcia ogni scheda di
 * sessanta pixel, che su un telefono vuol dire più auto per schermata: che è
 * poi tutto il mestiere di questa pagina.
 * ------------------------------------------------------------------------ */
/* Niente «overflow: hidden» sulla scheda, e non è una svista: ritagliandola si
   ritaglierebbe l'anello del fuoco intorno al collegamento della foto. A
   smussare l'angolo ci pensa la foto per conto suo, qui sotto. */
/* LA SCHEDA DEL CATALOGO, e il rilievo che si e' preso il 16 agosto 2026.
   Fino a quel giorno stava su un fondo appena grigio, e a staccarla era quello.
   Tolto il grigio — vedi il commento sul contenitore — servivano due cose al suo
   posto, e sono le due che il committente ha chiesto: un'OMBRA sotto, e un
   RETTANGOLO DEI DATI che puo' avere un colore suo.
   L'ombra e' sempre accesa, anche senza colori scelti: su fondo bianco e'
   l'unica cosa che dica dove finisce una scheda e comincia la pagina. E' tenue
   apposta — una griglia di ventiquattro schede con l'ombra pesante diventa un
   muro — e cresce al passaggio del mouse invece di cambiare il bordo, che era
   un segno che su un tema chiaro quasi non si vedeva.
   IL COLORE DELL'OMBRA E' L'INCHIOSTRO, non un nero scritto qui: su una
   tavolozza calda un'ombra nera stona, e l'inchiostro e' il colore che quella
   tavolozza usa gia' per il testo. Il letterale viene PRIMA e la miscela DOPO,
   com'e' la regola di questo foglio. */
.dnagw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--dnagw-fondo);
    border: 1px solid var(--dnagw-linea);
    border-radius: var(--dnagw-raggio);
    /* Il ripiego per chi non conosce color-mix(): un grigio neutro tenue. */
    box-shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 6px 18px rgba(17, 17, 17, .07);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--dnagw-inchiostro) 7%, transparent),
        0 6px 18px color-mix(in srgb, var(--dnagw-inchiostro) 8%, transparent);
    /* Le foto stanno a filo del bordo superiore e hanno il loro raggio: senza
       questo, un pixel della foto esce dall'angolo arrotondato e si vede. */
    overflow: hidden;
    transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.dnagw-card:hover,
.dnagw-card:focus-within {
    border-color: var(--dnagw-linea-forte, var(--dnagw-linea));
    box-shadow: 0 2px 4px rgba(17, 17, 17, .08), 0 14px 32px rgba(17, 17, 17, .12);
    box-shadow:
        0 2px 4px color-mix(in srgb, var(--dnagw-inchiostro) 9%, transparent),
        0 14px 32px color-mix(in srgb, var(--dnagw-inchiostro) 14%, transparent);
}
/* IL SOLLEVAMENTO SOLO DOVE E' GRADITO: chi ha chiesto meno animazioni al
   sistema operativo non vuole ventiquattro schede che si muovono sotto il
   mouse. Il blocco «prefers-reduced-motion» in fondo al foglio spegne gia' le
   transizioni; qui si toglie anche lo spostamento. */
@media (prefers-reduced-motion: no-preference) {
    .dnagw-card:hover,
    .dnagw-card:focus-within { transform: translateY(-2px); }
}
.dnagw-card__foto {
    position: relative;
    display: block;
    /* 4:3 — ED È LA PROPORZIONE IN CUI IL FORNITORE MANDA LE FOTO, misurata
       sulle API il 10 agosto 2026 e non dedotta: GestionaleAuto serve quattro
       misure e sono TUTTE 4:3 — original 1024×768, large 640×480, medium
       320×240, small 160×120.
       Qui c'era 16 / 9, con un commento che affermava l'esatto contrario. Il
       costo era un quarto dell'altezza di OGNI foto buttato via dal ritaglio, e
       si vedeva: sull'elenco vero del sito di prova, a 16:9, la Peugeot 2008,
       le due Jeep Avenger e la 500e erano decapitate. A 4:3 non si ritaglia
       niente,
       pixel per pixel, e le auto restano intere. Il prezzo è una griglia più
       alta di circa il 10%. Deciso col committente guardando le due griglie
       vere affiancate, non a tavolino. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: calc(var(--dnagw-raggio) - 1px) calc(var(--dnagw-raggio) - 1px) 0 0;
    background: var(--dnagw-tenue);
}
.dnagw-card__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dnagw-card__nofoto {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: var(--dnagw-t-dato);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dnagw-inchiostro-tenue);
}
/* La ruggine, primo dei quattro posti in cui compare in tutto il plugin — e,
   come gli altri tre, come RIEMPIMENTO con testo bianco sopra. */
.dnagw-card__fascia {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--dnagw-s2) var(--dnagw-s3);
    background: var(--dnagw-segnale);
    color: var(--dnagw-segnale-testo);
    text-align: center;
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .16em;
}
.dnagw-card__vetrina {
    position: absolute;
    top: 0;
    left: 0;
    padding: .25rem var(--dnagw-s2);
    background: var(--dnagw-segnale);
    color: var(--dnagw-segnale-testo);
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1.5;
}
.dnagw-card--venduta img { filter: grayscale(65%); }
/* IL CORPO DELLA SCHEDA NON HA UN COLORE SUO, ed e' la seconda forma di una
   richiesta: il 16 agosto 2026 questo rettangolo poteva essere tinto tutto —
   fondo e testo — e il committente lo ha guardato sul proprio catalogo e lo ha
   respinto lo stesso giorno. «Toglila di mezzo. Si deve poter personalizzare
   solo il colore del nome della macchina e del prezzo.»
   Quindi qui non si dipinge niente: la scheda resta quella del tema, e a
   staccarla dalla pagina e' l'ombra. I due colori si sono spostati sui due
   testi, piu' in basso. */
.dnagw-card__corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--dnagw-s3) var(--dnagw-s4) var(--dnagw-s4);
}
/* IL NOME DELL'AUTO, e il colore che il concessionario puo' sceglierne in
   DNA Gestionale > Impostazioni > Aspetto («Nome dell'auto»).
   IL RIPIEGO DENTRO LA var() E' IL COMPORTAMENTO DI IERI — l'inchiostro, cioe'
   il colore del resto del testo — ed e' la ragione per cui nessun sito gia'
   installato cambia aspetto da solo: chi non sceglie niente non vede niente di
   diverso.
   QUI NON SI CALCOLA NIENTE, al contrario del testo dentro i bottoni: la' il
   colore scelto e' un FONDO e il testo sopra lo deve decidere qualcuno, qui il
   colore scelto E' il testo. Se contrasta poco col fondo lo dice la schermata,
   che e' il posto dove chi sceglie sta guardando. */
.dnagw-card__titolo {
    margin: 0 0 var(--dnagw-s1);
    font-family: inherit;
    font-size: var(--dnagw-t-titolo);
    font-weight: var(--dnagw-peso-forte);
    line-height: 1.22;
    letter-spacing: -.015em;
    --dnagw-titolo-colore: var(--dnagw-card-titolo, var(--dnagw-inchiostro));
    color: var(--dnagw-titolo-colore);
}
/* «inherit» E NON il colore di nuovo: il titolo e' un <h3> con dentro un <a>,
   e il colore va scritto in un posto solo — quello sopra. Senza questa riga il
   collegamento prenderebbe il colore dei link, che e' l'azione. */
.dnagw-card__titolo a {
    color: inherit;
    text-decoration: none;
}
/* IL VELO. Il collegamento del titolo si allarga fino a coprire tutta la
   scheda, così su un telefono il bersaglio è il rettangolo intero invece di
   due righe di testo — ed è per questo che il bottone in fondo si è potuto
   togliere. Resta UN collegamento solo per la tastiera e per chi legge con uno
   screen reader (quello della foto porta allo stesso posto), e il testo resta
   selezionabile perché il velo è un pseudo-elemento, non un blocco sopra. */
.dnagw-card__titolo a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.dnagw-card:hover .dnagw-card__titolo a { text-decoration: underline; }
/* Nessuna altezza riservata qui, e non è una dimenticanza: a tenere allineate
   le righe dati di schede affiancate — che è tutto il punto — ci pensa il
   «margin: auto» della riga dati stessa, che la spinge in fondo alla scheda.
   Riservare DUE righe anche a una versione corta, come si faceva prima, era
   fare due volte lo stesso lavoro e lasciare un buco in mezzo a metà delle
   schede. */
.dnagw-card__versione {
    margin: 0 0 var(--dnagw-s3);
    font-size: var(--dnagw-t-dato);
    line-height: 1.35;
    color: var(--dnagw-inchiostro-tenue);
}
/* LA RIGA DATI — il gesto della pagina, e l'unica cosa che il committente ha
   chiesto di non perdere. Scelta del committente sul mockup approvato: sale
   IN CIMA al corpo della scheda, sopra il titolo, e da griglia 2×2 diventa
   una colonna di righe — un'icona SVG disegnata a mano per ognuna, col testo
   sempre accanto (l'icona è aria-hidden nel template: chi non la vede non
   perde nulla). Un solo filetto sotto, non più due intorno: da quando sta in
   cima non ha più bisogno di staccarsi anche dall'alto, la foto sopra di lei
   fa già da confine.
   Nessun fondo, come prima: un riquadro grigio farebbe una macchia in mezzo
   alla scheda e ruberebbe peso alla foto. */
.dnagw-card__dati {
    display: flex;
    flex-direction: column;
    gap: var(--dnagw-s1);
    margin: 0 0 var(--dnagw-s3);
    padding: 0 0 var(--dnagw-s3);
    border-bottom: 1px solid var(--dnagw-linea);
}
.dnagw-card__dato {
    display: flex;
    align-items: center;
    gap: var(--dnagw-s2);
    min-width: 0;
    font-size: var(--dnagw-t-dato);
    font-weight: var(--dnagw-peso-forte);
    line-height: 1.3;
    color: var(--dnagw-inchiostro-tenue);
    overflow-wrap: break-word;
}
/* L'icona: misura fissa, perché non deve mai essere lei a decidere quanto è
   alta la riga — ci pensa il testo, come ovunque in questa pagina.
   currentColor la fa combaciare col testo che le sta accanto, anche dentro
   la fascia d'inchiostro, senza bisogno di dichiararlo qui. */
.dnagw-icona-dato {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
}
/* IL TOTALE DELLA VOCE — etichettato e piccolo, scelta del committente sul
   mockup approvato: «Prezzo» sopra, l'importo sotto, non più il corpo enorme
   di prima. Resta l'ULTIMA cosa della card, ed è ora lui — non più la riga
   dati — a portare il «margin: auto» che lo spinge in fondo al corpo:
   scorrendo l'elenco i prezzi restano allineati fra schede la cui versione
   occupa un numero diverso di righe. Il filetto sopra è SUO, non più quello
   della riga dati: da quando la riga dati è salita in cima, il prezzo ha
   bisogno di un rigo tutto per sé per restare «il totale della voce». */
.dnagw-card__prezzo {
    margin: auto 0 0;
    padding-top: var(--dnagw-s3);
    border-top: 1px solid var(--dnagw-linea);
    text-align: right;
}
.dnagw-card__prezzo-etichetta {
    display: block;
    margin: 0 0 .1rem;
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dnagw-inchiostro-tenue);
}
/* L'importo: --dnagw-t-numero è lo stesso registro NUMERO — peso 700, cifre
   tabulari — usato altrove per ciò che si confronta scheda per scheda. Più
   piccolo di prima (che usava --dnagw-t-prezzo) perché ora il prezzo sta da
   solo, senza la riga dati sopra a fargli da contrappeso: un corpo enorme
   avrebbe pesato più della fotografia. Resta comunque in evidenza — peso
   pieno, non il peso di un'etichetta. */
/* IL PREZZO, col suo colore scelto e lo stesso ripiego del titolo. L'etichetta
   «Prezzo» qui sopra NON lo prende: e' un'etichetta tenue, e tingerla vorrebbe
   dire due righe dello stesso colore dove una sola deve saltare all'occhio. */
.dnagw-card__prezzo-importo {
    display: block;
    font-size: var(--dnagw-t-numero);
    font-weight: var(--dnagw-peso-prezzo);
    line-height: 1.2;
    letter-spacing: -.02em;
    --dnagw-prezzo-colore: var(--dnagw-card-prezzo, var(--dnagw-inchiostro));
    color: var(--dnagw-prezzo-colore);
}
/* IL PREZZO DI UN'AUTO VENDUTA — barrato e tenue. Cambia la VARIABILE e non la
   proprieta', ed e' l'unico modo di sopravvivere al blindaggio ⑥ qui sotto: un
   «color» scritto qui verrebbe cancellato da quell'«!important», e il prezzo di
   un venduto tornerebbe acceso come quello di un'auto in vendita. E' la stessa
   forma con cui ogni componente parla col blindaggio dei controlli. */
.dnagw-prezzo--barrato {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    --dnagw-prezzo-colore: var(--dnagw-inchiostro-tenue);
}

/* --------------------------------------------------------------------------
 * I COMANDI
 *
 * Un bottone solo, pieno, e ne restano pochissimi in tutta la pagina: «Mostra
 * i veicoli», «Invia richiesta», «Richiedi informazioni» della barra del
 * telefono. Sono le tre azioni che contano, e nient'altro è un bottone.
 * ------------------------------------------------------------------------ */
.dnagw-bottone {
    /* I TRE VALORI CHE IL BLINDAGGIO DIPINGE, scritti una volta sola. Le due
       righe «background»/«color»/«letter-spacing» più sotto li rileggono da qui
       invece di ripeterli: servono agli <a> che portano questa classe — la
       barra fissa della scheda, «Richiedi informazioni» — che controlli non
       sono e dal blindaggio non passano. Un valore scritto in due posti è un
       valore che alla prima correzione diverge. */
    --dnagw-controllo-fondo: var(--dnagw-azione);
    --dnagw-controllo-testo: var(--dnagw-azione-testo);
    --dnagw-controllo-tracciatura: .01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Lo spazio fra l'icona e il testo, per i tre comandi che l'icona ce
       l'hanno (veste del 10 agosto 2026). Sui comandi senza icona un gap non
       ha nulla da separare e non fa niente. */
    gap: var(--dnagw-s2);
    min-height: var(--dnagw-tocco);
    padding: var(--dnagw-s2) var(--dnagw-s4);
    border: 1px solid var(--dnagw-azione);
    border-radius: var(--dnagw-raggio-piccolo);
    background: var(--dnagw-controllo-fondo);
    color: var(--dnagw-controllo-testo);
    font-family: inherit;
    font-size: var(--dnagw-t-corpo);
    font-weight: var(--dnagw-peso-forte);
    line-height: 1.2;
    letter-spacing: var(--dnagw-controllo-tracciatura);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 160ms ease;
}
.dnagw-bottone:hover {
    /* L'opacità passa dalla variabile perché il blindaggio la tiene ferma a 1:
       senza questa riga il bottone non risponderebbe più al passaggio del
       mouse — ed è il caso da tenere a mente ogni volta che si blinda una
       proprietà che ha anche uno stato. */
    --dnagw-controllo-opacita: .86;
    color: var(--dnagw-controllo-testo);
    opacity: var(--dnagw-controllo-opacita);
}
/* IL COMANDO GRANDE — «Richiedi informazioni», il gesto per cui la scheda
   esiste. Piena larghezza, più alto del bersaglio minimo, e la freccia in
   coda al testo come nel mockup approvato. */
.dnagw-bottone--grande {
    width: 100%;
    min-height: 3.25rem;
}
/* I COMANDI COL SOLO BORDO — «Chiama» e «WhatsApp», secondi per costruzione:
   il colore di marca lo portano come BORDO, il testo resta inchiostro.
   Non è un ripiego grafico, è la seconda metà della guardia sul contrasto.
   Il colore dell'azione lo sceglie il concessionario in DNA Gestionale ▸
   Impostazioni ▸ Aspetto e può essere qualunque cosa: scritto come TESTO sul
   fondo del pannello, un giallo di marca non si leggerebbe — e qui, al
   contrario del bottone pieno,
   non c'è nessun colore da calcolare, perché il fondo è quello della pagina.
   L'inchiostro sul fondo è invece la coppia che qualunque tavolozza
   garantisce leggibile, ed è la stessa scelta che il foglio fa da sempre per
   --dnagw-accento: il colore di marca entra come SEGNO, mai sotto del testo.

   IL SELETTORE DOPPIO È OBBLIGATORIO, ed è la trappola della specificità già
   documentata in cima al file: «.dnagw-contenitore a.dnagw-bottone» vale una
   classe più un tipo più una classe, quindi su un <a> vincerebbe su una
   classe sola e il testo tornerebbe «--dnagw-azione-testo» — bianco su
   trasparente, cioè un rettangolo bordato e vuoto. La seconda riga pareggia
   la specificità e viene DOPO nel file: l'ordine non è cosmetico. */
.dnagw-bottone--contorno,
.dnagw-contenitore a.dnagw-bottone--contorno {
    /* Le due variabili vanno RIMESSE, non solo le due proprietà:
       «.dnagw-bottone» le ha già impostate su questo stesso elemento, e il
       blindaggio legge quelle. Dimenticarle qui vorrebbe dire un bottone col
       solo bordo dipinto pieno di colore d'azione. */
    --dnagw-controllo-fondo: transparent;
    --dnagw-controllo-testo: var(--dnagw-inchiostro);
    background: var(--dnagw-controllo-fondo);
    border-color: var(--dnagw-azione);
    color: var(--dnagw-controllo-testo);
}
.dnagw-bottone--contorno:hover,
.dnagw-contenitore a.dnagw-bottone--contorno:hover {
    --dnagw-controllo-fondo: var(--dnagw-tenue);
    --dnagw-controllo-opacita: 1;
    color: var(--dnagw-controllo-testo);
    background: var(--dnagw-controllo-fondo);
    opacity: var(--dnagw-controllo-opacita);
}
/* L'icona dentro un comando. Misura sua, diversa da «dnagw-icona-dato»: lì
   accompagna un'etichetta da tredici pixel, qui un testo di corpo pieno.
   «flex: none» perché non si stringa quando il testo va stretto. */
.dnagw-icona-comando {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
}
/* Il pulsante «Filtri» esiste solo sul telefono. Questa riga sta DOPO
   «.dnagw-bottone» e non prima, ed è l'ordine a farla valere: il pulsante porta
   tutte e due le classi, che hanno la stessa specificità, quindi vince l'ultima
   scritta. Spostata più in su tornerebbe un pulsante «Filtri» in mezzo alla
   testata di uno schermo largo, dove i filtri sono già tutti in colonna. */
.dnagw-solo-mobile { display: none; }

/* --------------------------------------------------------------------------
 * LA BARRA DEL TELEFONO, nell'elenco
 *
 * «47 auto» e «Filtri (2)», fissi in fondo allo schermo: è il comando che fa
 * trovare l'auto e deve stare sotto il pollice, non in cima a una pagina lunga
 * quarantasette schede.
 *
 * IL VERSO, come per il pannello: nel markup la barra nasce «hidden» ed è lo
 * SCRIPT a scoprirla, perché il pulsante che contiene lo sa aprire solo lui.
 * Senza JavaScript la barra non c'è affatto — e non manca niente: i filtri sono
 * tutti in pagina, aperti, e il conteggio è nella fascia in testa. Una barra
 * con dentro un pulsante inerte sarebbe peggio di nessuna barra.
 * ------------------------------------------------------------------------ */
.dnagw-barra { display: none; }

/* --------------------------------------------------------------------------
 * PAGINAZIONE E STATI VUOTI
 * ------------------------------------------------------------------------ */
.dnagw-paginazione {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dnagw-s2);
    margin-top: var(--dnagw-s5);
}
/* «page-numbers» lo scrive paginate_links() e non si può prefissare: resta
   scopato sotto .dnagw-paginazione, dove non può raggiungere nient'altro. */
.dnagw-paginazione .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dnagw-tocco);
    min-height: var(--dnagw-tocco);
    padding: 0 var(--dnagw-s2);
    border: 1px solid var(--dnagw-linea);
    border-radius: var(--dnagw-raggio-piccolo);
    font-size: var(--dnagw-t-dato);
    font-weight: var(--dnagw-peso-forte);
    text-decoration: none;
}
.dnagw-paginazione a.page-numbers:hover { border-color: var(--dnagw-inchiostro); }
.dnagw-paginazione .current {
    background: var(--dnagw-inchiostro);
    border-color: var(--dnagw-inchiostro);
    color: var(--dnagw-fondo);
}
.dnagw-paginazione .dots { border-color: transparent; }
/* «Nessun veicolo corrisponde ai filtri scelti» e «Scheda non disponibile»:
   un posto vuoto è un invito ad agire, non un buco. Il grid-column vale
   nell'elenco e viene ignorato nella scheda, dove il genitore non è una
   griglia — stessa classe, due posti, nessuna regola in più. */
.dnagw-vuoto {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--dnagw-s6) var(--dnagw-s4);
    background: var(--dnagw-tenue);
    border-radius: var(--dnagw-raggio);
    text-align: center;
    color: var(--dnagw-inchiostro-tenue);
}
.dnagw-vuoto a {
    font-weight: var(--dnagw-peso-forte);
    color: var(--dnagw-inchiostro);
}

/* --------------------------------------------------------------------------
 * LA SCHEDA DEL SINGOLO VEICOLO
 * ------------------------------------------------------------------------ */
/* LE BRICIOLE DI PANE, in cima alla scheda. Hanno preso il posto del «‹ Torna
   ai veicoli» che stava qui — dicono la stessa cosa e tre in più — quindi ne
   ereditano il registro: etichetta, maiuscolo tracciato, inchiostro tenue.
   Sono una lista in FLEX che va a capo: su un telefono stretto «Home /
   Veicoli / MERCEDES-BENZ / Classe A 180 d» non ci sta in una riga, e
   troncarla nasconderebbe proprio la voce che dice dove sei. */
.dnagw-briciole { padding: var(--dnagw-s4) 0; }
.dnagw-briciole__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--dnagw-s1) var(--dnagw-s2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--dnagw-inchiostro-tenue);
}
.dnagw-briciole__voce {
    display: flex;
    align-items: baseline;
    gap: var(--dnagw-s2);
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Il separatore è nel markup con aria-hidden, non in un ::before: un contenuto
   generato dal CSS certi lettori di schermo lo annunciano lo stesso, e «Home
   barra Veicoli» non è quello che deve sentire chi naviga così. Qui resta solo
   il colore, che lo tiene indietro rispetto alle voci. */
.dnagw-briciole__separatore { color: var(--dnagw-linea); }
/* Stessa specificità di «.dnagw-contenitore a» (una classe più un elemento):
   vince questa perché viene DOPO nel file. Non è cosmetico — l'ordine è la
   regola. */
.dnagw-briciole a {
    color: var(--dnagw-inchiostro-tenue);
    text-decoration: none;
}
.dnagw-briciole a:hover {
    color: var(--dnagw-inchiostro);
    text-decoration: underline;
}
/* La voce corrente non è un collegamento: si distingue per PESO del colore,
   non per il solo colore — chi non distingue i due grigi la riconosce comunque
   perché è l'unica che non si può premere. */
.dnagw-briciole__testo[aria-current] { color: var(--dnagw-inchiostro); }
.dnagw-scheda__testata {
    margin: 0 0 var(--dnagw-s5);
    padding-bottom: var(--dnagw-s4);
    border-bottom: 1px solid var(--dnagw-linea);
}
.dnagw-scheda__testata h1 {
    margin: 0 0 var(--dnagw-s1);
    font-family: inherit;
    font-size: var(--dnagw-t-pagina);
    font-weight: var(--dnagw-peso-prezzo);
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--dnagw-inchiostro);
}
/* La versione è la seconda riga del titolo, non un paragrafo a sé: si stacca
   dall'<h1> quanto basta e resta attaccata a lui. */
.dnagw-scheda__testata .dnagw-scheda__versione {
    margin: 0 0 var(--dnagw-s3);
    font-size: var(--dnagw-t-sezione);
    font-weight: var(--dnagw-peso-testo);
    line-height: 1.3;
    color: var(--dnagw-inchiostro-tenue);
}
/* «Usato · Immatricolata 03/2022 · 45.300 km»: la stessa riga dati della
   scheda breve, qui in una riga sola perché lo spazio c'è. */
.dnagw-scheda__riga {
    margin: 0;
    font-size: var(--dnagw-t-dato);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dnagw-inchiostro-tenue);
}
.dnagw-fascia-venduta {
    margin: 0 0 var(--dnagw-s5);
    padding: var(--dnagw-s3) var(--dnagw-s4);
    background: var(--dnagw-segnale);
    color: var(--dnagw-segnale-testo);
    border-radius: var(--dnagw-raggio);
    text-align: center;
    font-size: var(--dnagw-t-dato);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .18em;
}
/* DUE COLONNE DALL'ALTO — il cambio del 9 agosto 2026, chiesto dal committente
   guardando galdieriauto.it: titolo e galleria erano SOPRA le due colonne,
   adesso stanno DENTRO quella di sinistra, così il riquadro del prezzo
   comincia alla stessa altezza del titolo. Le proporzioni sono quelle del
   riferimento (là 776 e 384 su 1200): la colonna del prezzo è una misura
   FISSA, perché è il contenuto a decidere quanto le serve — un riquadro che
   si allarga col monitor non diventa più utile — e i dettagli si prendono
   tutto il resto. */
.dnagw-scheda {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--dnagw-scheda-colonna);
    gap: var(--dnagw-s5) var(--dnagw-s6);
    align-items: start;
}
/* LE QUATTRO COLLOCAZIONI sono esplicite perché nel MARKUP l'ordine è quello
   del TELEFONO — titolo, foto, prezzo, dettagli — che è l'ordine giusto in
   colonna singola e per chi legge senza foglio di stile. Su schermo largo la
   griglia lo rimette com'è disegnato senza doverlo cambiare nel documento.
   Il riquadro occupa la seconda colonna per TUTTE E TRE le righe: non per
   riempirla, ma perché quello è lo spazio dentro cui l'appiccicamento scorre —
   con «grid-row: 1» soltanto, la sua cella sarebbe alta quanto il titolo e non
   avrebbe niente lungo cui viaggiare. */
.dnagw-scheda__testata { grid-column: 1; grid-row: 1; min-width: 0; }
.dnagw-scheda__foto { grid-column: 1; grid-row: 2; min-width: 0; }
.dnagw-scheda__contenuto { grid-column: 1; grid-row: 3; min-width: 0; }
.dnagw-scheda__colonna { grid-column: 2; grid-row: 1 / span 3; }
/* IL MODULO IN FONDO ALLA PAGINA: da qui in poi le due colonne di
   «.dnagw-scheda» sono finite, ed è un DIV FRATELLO di quella griglia — non
   un suo figlio — per due ragioni che non si toccano:
   1. il riquadro del prezzo appiccicato occupa la colonna 2 per tutte e tre
      le righe della griglia («grid-row: 1 / span 3»): un quarto figlio
      allungherebbe quello span o aprirebbe una riga in più dentro la
      griglia, e in nessuno dei due casi l'appiccicamento resterebbe quello
      voluto;
   2. dentro una griglia lo spazio fra le righe è il «row-gap» del
      contenitore (--dnagw-s5), che si sommerebbe al margine che il modulo
      porta già qui sotto (--dnagw-s6, più largo apposta: il modulo resta il
      gesto principale della pagina) e lo staccherebbe più del voluto.
   Dal 10 agosto 2026 il RIQUADRO è largo quanto gli altri pannelli — prima si
   fermava a 42rem. Il problema che quel limite risolveva è vero e resta («Nome
   e cognome» largo milleduecento pixel non è generosità, è un difetto), e la
   soluzione resta quella del 10 agosto — i CAMPI su due colonne, non un
   riquadro ristretto, vedi «.dnagw-modulo__form» più sotto — ma «largo quanto
   gli altri pannelli» era rimasto un'intenzione: stando FUORI dalla griglia il
   riquadro prendeva tutta la larghezza del contenitore, non quella della
   colonna 1. Misurato dal vivo il 10 agosto: a 1280px i pannelli sopra
   finivano a 857px, il modulo a 1249px.
   IL RIMEDIO: rifare a mano, su un elemento che della griglia non fa parte,
   la STESSA aritmetica che la griglia farebbe per un suo figlio in colonna 1
   — cento per cento meno la colonna fissa del prezzo meno lo spazio fra le
   due colonne — con la STESSA variabile «--dnagw-scheda-colonna» che
   «.dnagw-scheda» usa per quella colonna, così le due misure non possono
   divergere alla prima modifica. La regola vive nel blocco
   «@media (min-width: 901px)» più in basso, insieme alle miniature della
   galleria: è già il complemento esatto dell'unico
   «@media (max-width: 900px)» del file, e la scheda passa a due colonne alla
   STESSA soglia — un secondo blocco identico avrebbe solo duplicato la
   condizione. Vale quindi solo dove la scheda È a due colonne: sotto i 901px
   «.dnagw-scheda» torna a una colonna sola e il modulo, già largo quanto il
   contenitore, non ha nulla da correggere (misurato a 768px: coincide già). */
.dnagw-scheda__modulo { margin-top: var(--dnagw-s6); }
/* Il riquadro del prezzo NON ha più regole di forma sue: dal 10 agosto 2026
   porta «dnagw-pannello» come tutti gli altri blocchi della scheda, e da lì
   prende fondo, filetto, angoli e spazio interno. Aveva un bordo d'inchiostro
   pieno per staccarsi dalla pagina bianca; su fondo grigio non serve più, e un
   riquadro più marcato degli altri lo faceva sembrare un elemento di un altro
   disegno. */
.dnagw-riquadro__etichetta {
    margin: 0 0 .1rem;
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dnagw-inchiostro-tenue);
}
/* I DUE COMANDI SECONDARI, affiancati sotto quello pieno. «auto-fit» e non
   due colonne fisse: quando il concessionario ha un solo recapito, il comando
   che c'è si prende tutta la riga invece di lasciare mezzo riquadro vuoto. */
.dnagw-riquadro__contatti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--dnagw-s2);
    margin: var(--dnagw-s2) 0 0;
}
.dnagw-riquadro__prezzo {
    margin: 0 0 var(--dnagw-s2);
    font-size: var(--dnagw-t-prezzo-grande);
    font-weight: var(--dnagw-peso-prezzo);
    line-height: 1.02;
    letter-spacing: -.035em;
}
.dnagw-riquadro__note {
    margin: 0 0 var(--dnagw-s3);
    font-size: var(--dnagw-t-dato);
    color: var(--dnagw-inchiostro-tenue);
}
/* Il comando che porta al modulo, sceso in fondo alla pagina. È largo quanto il
   riquadro perché è l'unica cosa da fare qui dentro: il prezzo si legge, il
   riferimento si copia, questo si preme. */
.dnagw-riquadro__azione { margin: 0; }
/* «flex» e non «block», e la differenza si vede: dal 10 agosto 2026 il comando
   porta la freccia in coda al testo, e con «display: block» il flex del
   bottone si spegneva — l'icona sarebbe caduta come un carattere qualunque,
   senza lo spazio del «gap» e senza allinearsi in mezzo alla riga. La
   larghezza piena, che era il motivo per cui c'era «block», la dà «width». */
.dnagw-riquadro__azione .dnagw-bottone {
    display: flex;
    width: 100%;
    text-align: center;
}
/* Ruggine: «non più disponibile» è esattamente ciò che il visitatore deve
   sapere prima di leggere il resto. Riempimento e non colore del testo, come
   gli altri tre posti in cui la ruggine compare: su un tema scuro la ruggine
   scritta su fondo scuro non si leggerebbe. */
.dnagw-riquadro__nondisponibile {
    display: inline-block;
    margin: 0 0 var(--dnagw-s3);
    padding: .15rem var(--dnagw-s2);
    background: var(--dnagw-segnale);
    color: var(--dnagw-segnale-testo);
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.dnagw-riquadro__riferimento {
    margin: var(--dnagw-s4) 0 0;
    padding-top: var(--dnagw-s3);
    border-top: 1px solid var(--dnagw-linea);
    font-size: var(--dnagw-t-etichetta);
    color: var(--dnagw-inchiostro-tenue);
}
/* --------------------------------------------------------------------------
 * LE PILLOLE — sei dati con la propria icona, sopra la scheda tecnica.
 *
 * Scelta del committente sul mockup approvato: tre colonne su schermo
 * largo (qui sotto), due sul telefono (dentro l'unico blocco
 * «@media (max-width: 900px)» del file). Nessun fondo, nessun bordo: sono
 * un elenco compatto, non altrettante schede — il segno è l'icona, non un
 * riquadro intorno.
 * ------------------------------------------------------------------------ */
.dnagw-pillole {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dnagw-s3) var(--dnagw-s4);
    /* Nessun margine sotto: da quando è un pannello, lo stacco dal blocco
       successivo lo dà la regola «pannello + pannello» in cima al file — una
       misura sola per tutta la colonna invece di una per blocco. Il padding
       viene da «dnagw-pannello» e qui si azzera solo quello che <ul> porta di
       suo (l'incolonnamento dei segni di elenco). */
    margin: 0;
    padding: var(--dnagw-s4);
    list-style: none;
}
.dnagw-pillola {
    display: flex;
    align-items: center;
    gap: var(--dnagw-s2);
    min-width: 0;
}
.dnagw-pillola__testo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dnagw-pillola__etichetta {
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dnagw-inchiostro-tenue);
}
/* Il valore può essere lungo («Elettrica/Benzina», «Automatico, 8 marce»):
   niente troncamento con puntini, che nasconderebbe parte del dato senza
   modo di recuperarlo — va a capo dentro la sua colonna, come farebbe
   qualunque altro testo di questa pagina. */
.dnagw-pillola__valore {
    overflow-wrap: break-word;
    font-size: var(--dnagw-t-corpo);
    font-weight: var(--dnagw-peso-forte);
    color: var(--dnagw-inchiostro);
}
.dnagw-sezione { margin-top: var(--dnagw-s6); }
/* --------------------------------------------------------------------------
 * IL RIQUADRO DEL CONCESSIONARIO — ultimo pannello della colonna dei
 * dettagli: dopo aver letto l'auto si legge da chi si va a prenderla.
 * Segnaposto a sinistra, tre righe a destra. Non ha un titolo visibile
 * (il mockup approvato non ne prevede uno): il suo nome, per chi naviga con
 * uno screen reader, sta nell'aria-label del <section> nel template.
 * ------------------------------------------------------------------------ */
.dnagw-concessionario {
    display: flex;
    align-items: flex-start;
    gap: var(--dnagw-s3);
}
.dnagw-concessionario__testo { min-width: 0; }
.dnagw-concessionario__nome {
    margin: 0;
    font-size: var(--dnagw-t-corpo);
    font-weight: var(--dnagw-peso-forte);
    line-height: 1.3;
    color: var(--dnagw-inchiostro);
}
.dnagw-concessionario__indirizzo {
    margin: var(--dnagw-s1) 0 0;
    font-size: var(--dnagw-t-dato);
    color: var(--dnagw-inchiostro-tenue);
    overflow-wrap: break-word;
}
.dnagw-concessionario__mappa {
    margin: var(--dnagw-s2) 0 0;
    font-size: var(--dnagw-t-dato);
    font-weight: var(--dnagw-peso-forte);
}
/* --------------------------------------------------------------------------
 * LE SEDI (S1, 10 agosto 2026) — la seconda forma dello stesso pannello:
 * il nome del concessionario in testa e sotto la griglia dei punti vendita.
 * Il modificatore torna da «flex» a «block» perché qui il segnaposto non sta
 * più accanto al testo del riquadro: sta dentro OGNI cella.
 *
 * «minmax(0, 1fr)» e non «1fr», che è «minmax(auto, 1fr)»: il minimo
 * automatico di una cella è il suo contenuto, e un indirizzo lungo senza
 * spazi — un nome di via attaccato al numero civico, un collegamento
 * incollato per sbaglio — impedirebbe alla colonna di stringersi e farebbe
 * uscire il pannello dal contenitore. La stessa forma difensiva è già usata
 * da «.dnagw-scheda».
 *
 * Le due soglie sono quelle che il resto del foglio usa già — 900px per il
 * passaggio a due colonne e 560px per quello a una — e stanno TUTTE E DUE in
 * fondo al file, nei blocchi già esistenti. La posizione non è un dettaglio:
 * i due blocchi combaciano entrambi su un telefono, e a parità di specificità
 * vince l'ultimo scritto. Vedi il commento del blocco 560px, che racconta il
 * difetto misurato che ha portato la regola lì.
 * Non se ne aggiungono di nuove — un foglio con sei soglie diverse è un foglio
 * che nessuno riesce più a tenere allineato.
 * ------------------------------------------------------------------------ */
.dnagw-concessionario--sedi { display: block; }
.dnagw-concessionario--sedi .dnagw-concessionario__nome {
    margin-bottom: var(--dnagw-s3);
}
.dnagw-sedi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dnagw-s4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.dnagw-sede {
    display: flex;
    align-items: flex-start;
    gap: var(--dnagw-s3);
    /* Il puntino dell'elenco lo toglie «list-style: none» sul contenitore;
       questo tiene fuori anche il rientro che alcuni temi rimettono. */
    margin: 0;
    padding: 0;
}
.dnagw-sede__testo { min-width: 0; }
.dnagw-sede__nome {
    margin: 0;
    font-size: var(--dnagw-t-corpo);
    font-weight: var(--dnagw-peso-forte);
    line-height: 1.3;
    color: var(--dnagw-inchiostro);
}
.dnagw-sede__indirizzo {
    margin: var(--dnagw-s1) 0 0;
    font-size: var(--dnagw-t-dato);
    color: var(--dnagw-inchiostro-tenue);
    overflow-wrap: break-word;
}
.dnagw-sede__mappa {
    margin: var(--dnagw-s2) 0 0;
    font-size: var(--dnagw-t-dato);
    font-weight: var(--dnagw-peso-forte);
}
/* Le due soglie NON stanno qui: il foglio ha UN SOLO «@media (max-width: 900px)»
   e un solo «@media (max-width: 599px)», in fondo, e le regole delle sedi
   stanno dentro quelli. Aprirne di nuovi accanto alla regola che governano
   sembra più leggibile e non lo è: la soglia si sposterebbe in un posto e non
   nell'altro, e c'è già un test che conta su quell'unicità. */
.dnagw-sezione h2 {
    margin: 0 0 var(--dnagw-s3);
    padding-bottom: var(--dnagw-s2);
    border-bottom: 1px solid var(--dnagw-inchiostro);
    font-family: inherit;
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--dnagw-inchiostro);
}
/* Etichetta a sinistra in tenue, valore a destra in inchiostro: allineare a
   destra è ciò che mette in colonna «110 kW», «1.598 cc», «129 g/km». */
.dnagw-caratteristiche {
    width: 100%;
    border-collapse: collapse;
}
.dnagw-caratteristiche td {
    padding: var(--dnagw-s2) 0;
    border-bottom: 1px solid var(--dnagw-linea);
    vertical-align: baseline;
    font-size: var(--dnagw-t-dato);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dnagw-inchiostro-tenue);
}
.dnagw-caratteristiche td + td {
    text-align: right;
    font-size: var(--dnagw-t-corpo);
    text-transform: none;
    letter-spacing: normal;
    color: var(--dnagw-inchiostro);
}
.dnagw-caratteristiche strong { font-weight: var(--dnagw-peso-forte); }
/* La descrizione è l'unico markup di tutto il plugin scritto da fuori (il
   concessionario, filtrato da wp_kses_post). Qui si dànno margini e misure a
   ciò che può arrivarci dentro: senza, un'immagine larga 2000px o un titolo
   del tema sfondano la colonna. E si mette il tetto alla riga: su uno schermo
   largo una riga di centoventi caratteri non si segue. */
.dnagw-descrizione {
    max-width: var(--dnagw-misura);
    line-height: 1.65;
    overflow-wrap: break-word;
}
.dnagw-descrizione > * { margin: 0 0 var(--dnagw-s3); }
.dnagw-descrizione > :last-child { margin-bottom: 0; }
.dnagw-descrizione h1,
.dnagw-descrizione h2,
.dnagw-descrizione h3,
.dnagw-descrizione h4,
.dnagw-descrizione h5,
.dnagw-descrizione h6 {
    margin: var(--dnagw-s4) 0 var(--dnagw-s2);
    font-size: var(--dnagw-t-titolo);
    font-weight: var(--dnagw-peso-forte);
    line-height: 1.3;
}
.dnagw-descrizione ul,
.dnagw-descrizione ol { padding-left: 1.25rem; }
.dnagw-descrizione a { text-decoration: underline; }
.dnagw-descrizione img {
    max-width: 100%;
    height: auto;
    border-radius: var(--dnagw-raggio-piccolo);
}
.dnagw-descrizione table {
    width: 100%;
    border-collapse: collapse;
}
.dnagw-dotazioni {
    columns: 2;
    column-gap: var(--dnagw-s5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.dnagw-dotazioni li {
    break-inside: avoid;
    padding: var(--dnagw-s1) 0;
    font-size: var(--dnagw-t-dato);
}
/* «Mostra tutte le 30» è un <button> senza riquadro: quattro dei suoi valori
   non sono i predefiniti del blindaggio e vanno detti come variabili, o li
   dipinge lui coi propri. Era il secondo posto in cui il «color: #fff» di
   «#wrapper button» rendeva un comando invisibile. */
.dnagw-dotazioni__mostra {
    --dnagw-controllo-fondo: transparent;
    --dnagw-controllo-t: var(--dnagw-t-dato);
    --dnagw-controllo-maiuscolo: uppercase;
    --dnagw-controllo-tracciatura: .1em;
    display: inline-flex;
    align-items: center;
    min-height: var(--dnagw-tocco);
    margin-top: var(--dnagw-s2);
    padding: 0;
    border: 0;
    background: var(--dnagw-controllo-fondo);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--dnagw-controllo-t);
    font-weight: var(--dnagw-peso-forte);
    text-transform: var(--dnagw-controllo-maiuscolo);
    letter-spacing: var(--dnagw-controllo-tracciatura);
    color: var(--dnagw-inchiostro);
    text-decoration: underline;
    text-underline-offset: .18em;
}
/* MIGLIORAMENTO PROGRESSIVO — il verso conta più della regola, come per il
   pannello dei filtri e per la galleria.
   Senza JavaScript le dotazioni si vedono TUTTE, che è il comportamento di
   sempre: nel markup ci sono tutte e trenta e nessuna regola le tocca. È lo
   script a marcare quelle oltre le prime sei e ad accendere
   «dnagw-dotazioni--ridotte» sull'elenco, e solo da lì in poi vale la riga qui
   sotto — insieme al comando «Mostra tutte le 30», che pure costruisce lui.
   Scritto al contrario — nascoste qui, riaperte dallo script — un browser che
   non lo esegue lascerebbe ventiquattro dotazioni su trenta irraggiungibili. */
.dnagw-dotazioni--ridotte .dnagw-dotazioni__voce--oltre { display: none; }

/* --------------------------------------------------------------------------
 * LA GALLERIA
 * ------------------------------------------------------------------------ */
.dnagw-galleria { min-width: 0; }
.dnagw-galleria__foto {
    display: grid;
    gap: var(--dnagw-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.dnagw-galleria__ingrandisci { display: block; }
/* Le proporzioni sono fisse SEMPRE, non solo a script acceso: è ciò che
   impedisce alla pagina di saltare mentre le foto caricano — e su una scheda
   con trentuno foto la pagina salterebbe trentuno volte. «contain» e non
   «cover»: di un'automobile non si ritaglia niente, e il tetto in altezza
   impedisce che una foto sola si prenda tutta la prima schermata. */
.dnagw-galleria__voce img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Il tetto in altezza è misurato, non scelto a occhio: a 68vh — che è quanto
       una foto 4:3 «contain» si prendeva da sola — sotto la fotografia non
       restava spazio per il NOME dell'auto, e chi arriva deve capire in tre
       secondi che macchina sta guardando. A 52vh la fotografia resta la cosa più
       grande della pagina e il titolo si affaccia sotto la piega. */
    max-height: 52vh;
    object-fit: contain;
    /* IL FONDO DIETRO LA FOTO, riscritto il 9 agosto 2026 insieme alla fine
       della fascia d'inchiostro. «contain» lascia scoperto ciò che avanza ai
       lati di uno scatto verticale: prima era l'inchiostro della fascia, e la
       fascia il committente l'ha chiesta via. Un fondo pagina lo lascerebbe
       come un buco bianco che non si capisce se sia la foto o la pagina; il
       tenue lo chiude in un rettangolo, la stessa tinta con cui la miniatura
       aspetta la propria immagine. */
    background: var(--dnagw-tenue);
}
.dnagw-galleria--venduta img { filter: grayscale(65%); }
.dnagw-galleria .dnagw-card__nofoto {
    margin: 0;
    aspect-ratio: 16 / 9;
    height: auto;
    background: var(--dnagw-tenue);
}
.dnagw-galleria__nota {
    margin: var(--dnagw-s2) 0 0;
    font-size: var(--dnagw-t-dato);
    color: var(--dnagw-inchiostro-tenue);
}
/* MIGLIORAMENTO PROGRESSIVO — il verso conta più della regola, come per il
   pannello dei filtri qui sopra e per la stessa ragione.
   Senza JavaScript la galleria è l'elenco completo delle foto, ciascuna col suo
   collegamento alla versione a piena risoluzione: lungo, ma tutto
   raggiungibile. È il JavaScript ad AGGIUNGERE la classe «dnagw-galleria--js»,
   e solo da lì in poi si vede la sola foto attiva.
   Scritto al contrario — foto nascoste qui, mostrate dallo script — un browser
   che non lo esegue lascia trenta foto su trentuno irraggiungibili, ed è
   esattamente il difetto del pannello filtri del Task 15: non riscriverlo mai
   in quel verso. Le due regole qui sotto hanno la stessa specificità, quindi
   vince la seconda: l'ordine non è cosmetico. */
.dnagw-galleria--js .dnagw-galleria__voce { display: none; }
.dnagw-galleria--js .dnagw-galleria__voce--attiva { display: block; }
/* Contatore e frecce: non ci sono nel markup, li costruisce lo script. Senza
   di lui non servirebbero — le foto si vedono tutte — e sarebbero due pulsanti
   che non scorrono niente. */
.dnagw-galleria__comandi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dnagw-s3);
    margin-top: var(--dnagw-s2);
}
/* LE FRECCE, e perché il loro segno NON È PIÙ UN GLIFO (12 agosto 2026).
   Erano «‹» e «›», due caratteri di testo dentro un <button>, e su un tema con
   «#wrapper button { color: #fff }» diventavano bianche su trasparente: due
   quadratini vuoti al posto dei comandi della galleria. Il blindaggio qui sopra
   basterebbe a rimetterle nere — ma il segno resterebbe appeso a due proprietà
   che su un sito ospite sono le più contese di tutte, «color» e «font-family»:
   un tema che imponga un carattere di icone (FontAwesome e simili) a
   «#wrapper button» farebbe uscire da «‹» un disegno qualunque, e il
   blindaggio della famiglia lo eviterebbe soltanto finché nessuno tocca quella
   riga.
   Il segno lo disegnano adesso DUE BORDI RUOTATI, come già fa la fisarmonica
   dei filtri («.dnagw-filtri__sommario::after») — che infatti su quel sito si
   vede benissimo. Nessun testo, nessun carattere, nessuna immagine, nessuna
   risorsa dalla rete. E il colore del segno è scritto sul RUOLO
   («var(--dnagw-inchiostro)») invece che su «currentColor»: così il disegno non
   dipende più nemmeno dalla proprietà «color» dell'elemento, che è la sola cosa
   che il tema era riuscito a cambiarci. Dentro «.dnagw-inverso» il ruolo si
   scambia da sé, come tutto il resto del foglio.
   IL GLIFO NEL MARKUP RESTA: lo mette pubblico.js, e il nome accessibile del
   bottone non è lui ma l'«aria-label» («Foto precedente» / «Foto successiva»),
   quindi non si perde niente a non stamparlo. A spegnerlo è
   «--dnagw-controllo-t: 0», cioè la variabile del blindaggio: un
   «font-size: 0» scritto a mano qui verrebbe sovrascritto dal blindaggio
   stesso, ed è il primo modo in cui questa tecnica si ritorce contro chi la
   usa. */
.dnagw-galleria__freccia {
    --dnagw-controllo-fondo: transparent;
    --dnagw-controllo-h: var(--dnagw-tocco);
    --dnagw-controllo-t: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dnagw-tocco);
    height: var(--dnagw-controllo-h);
    padding: 0;
    border: 1px solid var(--dnagw-linea);
    border-radius: var(--dnagw-raggio-piccolo);
    background: var(--dnagw-controllo-fondo);
    color: var(--dnagw-inchiostro);
    line-height: 1;
    cursor: pointer;
}
.dnagw-galleria__freccia::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--dnagw-inchiostro);
    border-bottom: 2px solid var(--dnagw-inchiostro);
}
/* QUALE DELLE DUE punta da che parte lo dice la POSIZIONE, non una classe: i
   comandi li costruisce pubblico.js e mette sempre tre figli in quest'ordine —
   freccia indietro, contatore, freccia avanti. Una classe modificatrice
   vorrebbe dire toccare lo script per una cosa che è solo aspetto; l'ordine è
   invece già scritto lì e il banco «tema ostile» lo misura sul DOM che lo
   script produce davvero, non su un markup ricopiato a mano.
   Le rotazioni: l'angolo formato da bordo destro e bordo inferiore punta in
   basso a destra, quindi +135° lo porta a sinistra e −45° a destra (a +45° e
   −135° punta in basso e in alto, ed è la fisarmonica). */
.dnagw-galleria__comandi > .dnagw-galleria__freccia:first-child::before {
    transform: rotate(135deg);
    margin-right: -3px;
}
.dnagw-galleria__comandi > .dnagw-galleria__freccia:last-child::before {
    transform: rotate(-45deg);
    margin-left: -3px;
}
.dnagw-galleria__freccia:hover { border-color: var(--dnagw-inchiostro); }
/* Larghezza minima e cifre tabulari: passando da «9 / 31» a «10 / 31» le due
   frecce non si spostano di un pixel. */
.dnagw-galleria__contatore {
    margin: 0;
    min-width: 4.5rem;
    text-align: center;
    font-size: var(--dnagw-t-dato);
    font-weight: var(--dnagw-peso-forte);
    letter-spacing: .06em;
    color: var(--dnagw-inchiostro-tenue);
}
/* LA STRISCIA. Una riga sola che scorre di lato invece di una griglia che si
   piega su quattro file: con trentuno foto la griglia era alta quanto la foto
   grande, e spingeva fuori schermo la cosa per cui la pagina esiste. Lo scatto
   («snap») fa fermare lo scorrimento su una miniatura intera. */
.dnagw-galleria__miniature {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84px;
    gap: var(--dnagw-s2);
    margin-top: var(--dnagw-s3);
    padding-bottom: var(--dnagw-s2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* Come la colonna dei filtri: la barra di scorrimento è un dettaglio di
       servizio, e sopra l'inchiostro quella di sistema è una striscia grigia
       larga diciassette pixel in mezzo al disegno. */
    scrollbar-width: thin;
    scrollbar-color: var(--dnagw-linea) transparent;
}
.dnagw-galleria__miniatura {
    /* Ancora per la pillola «+N» della quarta miniatura, su schermo largo
       (vedi il blocco «SCHERMO LARGO: le miniature...» più in basso): senza,
       il suo ::after assoluto si ancorerebbe al primo antenato posizionato
       che trova, non a questo bottone. Nessun effetto qui, a nessuna
       larghezza: «relative» senza uno scarto non muove niente. */
    position: relative;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--dnagw-raggio-piccolo);
    overflow: hidden;
    /* Il fondo passa dalla variabile del blindaggio: è un <button>, quindi il
       suo «background-color» lo dipinge quella regola. L'altezza no — la fa
       «aspect-ratio», e «auto» è già il predefinito. */
    --dnagw-controllo-fondo: var(--dnagw-tenue);
    background: var(--dnagw-controllo-fondo);
    cursor: pointer;
    scroll-snap-align: start;
}
.dnagw-galleria__miniatura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
    transition: opacity 160ms ease;
}
.dnagw-galleria__miniatura:hover img { opacity: 1; }
/* Il colore di marca del tema, secondo dei suoi tre soli posti — e anche qui
   è un bordo, non del testo. L'opacità piena raddoppia il segnale per chi il
   colore non lo distingue. */
.dnagw-galleria__miniatura--attiva { border-color: var(--dnagw-accento); }
.dnagw-galleria__miniatura--attiva img { opacity: 1; }

/* --------------------------------------------------------------------------
 * SCHERMO LARGO: le miniature passano di fianco alla foto grande
 *
 * Scelta del committente sul mockup approvato. Sotto i 901px la striscia
 * resta quella di sempre — una riga che scorre di lato SOTTO la foto, con
 * TUTTE le miniature: il Task 5 lo chiede esplicitamente («sul telefono
 * resta com'è oggi»), non è una dimenticanza. Il punto di rottura è lo
 * stesso della colonna filtri sticky qui sopra, e il complemento esatto
 * dell'unico «@media (max-width: 900px)» del file.
 * ------------------------------------------------------------------------ */
@media (min-width: 901px) {
    .dnagw-galleria--js {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--dnagw-miniature-larghezza);
        gap: 0 var(--dnagw-s3);
        align-items: start;
    }
    .dnagw-galleria--js .dnagw-galleria__foto { grid-column: 1; grid-row: 1; }
    /* La nota («Altre N foto disponibili su richiesta») va ESPLICITAMENTE
       posizionata: senza, l'auto-placement della griglia la collocherebbe
       nella prima cella libera che trova, e con foto, comandi e miniature già
       tutte piazzate a mano quella cella finiva sotto le frecce (dopo
       «comandi») invece che subito sotto la foto, dov'è nel documento. Un
       ramo raro sui dati reali (vedi il commento in parti/galleria.php), ma è
       markup pubblico lo stesso. Quando la nota non c'è questa riga resta
       vuota e non lascia un vuoto visibile. */
    .dnagw-galleria--js .dnagw-galleria__nota { grid-column: 1; grid-row: 2; }
    .dnagw-galleria--js .dnagw-galleria__comandi { grid-column: 1; grid-row: 3; }
    /* Da riga a colonna: la striscia passa DI FIANCO alla foto. Non è un
       taglio a quattro: resta scorrevole («overflow-y: auto»), quindi chi
       tabula da tastiera raggiunge comunque ogni miniatura — è solo lo
       spazio verticale a mostrarne quattro senza dover scorrere, che sono
       le «4 visibili» del mockup approvato. */
    .dnagw-galleria--js .dnagw-galleria__miniature {
        grid-column: 2;
        grid-row: 1 / span 3;
        grid-auto-flow: row;
        grid-auto-columns: unset;
        margin-top: 0;
        /* Il «padding-bottom» della regola di base serve alla striscia
           ORIZZONTALE, per lasciare posto alla sua barra di scorrimento sotto
           le miniature: qui, in colonna, non serve — lo spazio per il fuoco
           qui sotto lo sostituisce comunque su tutti e quattro i lati.
           MINORE 3 (revisione finale, coda agosto 2026): l'ANELLO DEL FUOCO
           delle miniature sporge 5px oltre il bordo del bottone
           (outline-offset 2px + outline-width 3px, vedi IL FUOCO DELLA
           TASTIERA più sopra) su OGNI lato, non solo a destra e a sinistra.
           Prima c'era «padding-inline» da solo: bastava a non tagliare
           l'anello ai due lati, ma sopra e sotto restava tagliato lo stesso —
           un contenitore che scorre ritaglia il contenuto ai bordi del
           proprio riquadro su ENTRAMBI gli assi, quale che sia l'overflow
           dichiarato su ciascuno (qui «hidden» in orizzontale e «auto» in
           verticale: nessuno dei due è «visible», quindi nessuno dei due
           lascia sporgere nulla). Il padding ora è uguale sui quattro lati —
           stessa tecnica di «.dnagw-filtri» qui sopra, che ce l'ha solo a
           destra perché scorre solo in verticale e comincia dal bordo
           sinistro della pagina, non da un riquadro chiuso su tutti i lati
           come questo. */
        padding: var(--dnagw-miniatura-stacco);
        /* LE RIGHE HANNO UN'ALTEZZA DICHIARATA, e questa riga è la correzione
           del difetto misurato dal vivo il 9 agosto 2026 su una scheda con
           ventuno foto: le miniature si ACCAVALLAVANO l'una sull'altra, e il
           committente l'ha cerchiata in rosso.
           IL MECCANISMO, perché non torni: la colonna ha un tetto in altezza
           definito e le righe erano automatiche; su una griglia di altezza
           definita «align-content» vale «normal», che per la griglia si
           comporta come «stretch», e le righe vengono DISTRIBUITE per riempire
           il contenitore — ventuno righe dentro 342px fanno 8,09px l'una.
           Le miniature però conservano la propria altezza (aspect-ratio su
           larghezza piena) e traboccavano nella riga successiva. Con quattro o
           cinque foto le righe erano già alte abbastanza e non si vedeva
           niente: il difetto CRESCEVA col numero di foto, che è il modo
           peggiore di essere invisibili.
           Dichiarando l'altezza, la riga non è più «automatica»: non c'è più
           niente da distribuire, la miniatura è alta uguale che ce ne siano due
           o trentuno, e il totale che sfora il tetto lo prende in carico
           l'«overflow-y: auto» qui sotto — che c'era già ed è il modo per
           raggiungere le altre.
           «align-content: start» è la seconda cintura: se una riga automatica
           dovesse ricomparire (un contenuto imprevisto, una miniatura senza
           immagine), le righe restano attaccate in cima invece di ridistribuirsi.
           MINORE 4 della revisione di agosto viveva qui e resta chiuso: gli 84px
           erano la LARGHEZZA delle miniature orizzontali di prima, mai
           ricalcolata quando sono passate in colonna. Ora né 84 né 76,5 sono
           scritti qui: vengono dalle variabili in cima al file, e il tetto si
           costruisce dalle stesse — quante se ne vedono, per quanto è alta
           ciascuna, più gli spazi fra loro e il bordo. */
        grid-auto-rows: var(--dnagw-miniatura-h);
        align-content: start;
        max-height: calc(
            var(--dnagw-miniature-visibili) * var(--dnagw-miniatura-h)
            + (var(--dnagw-miniature-visibili) - 1) * var(--dnagw-s2)
            + 2 * var(--dnagw-miniatura-stacco)
        );
        overflow-x: hidden;
        overflow-y: auto;
    }
    .dnagw-galleria--js .dnagw-galleria__miniatura { width: 100%; }
    /* La quarta miniatura porta il conteggio delle restanti, quando ce ne
       sono più di quattro: lo script — che già conosce il totale — scrive
       «data-restanti» su di lei (mai sulla striscia: attr() nel content di
       uno pseudo-elemento legge solo l'attributo dell'elemento a cui quello
       pseudo-elemento appartiene). È un SOVRAPPIÙ decorativo, non un taglio:
       la miniatura resta un bottone vero — salta comunque alla quarta foto —
       e le successive restano raggiungibili scorrendo la colonna qui sopra.
       IL CONTRASSEGNO STA IN UN ANGOLO E NON COPRE LA FOTO: coprirla per
       intero («inset: 0», la stesura precedente) faceva vedere «+N» al posto
       della quarta fotografia — sembrava un bottone diverso, «vedi le altre
       N foto» — mentre uno screen reader la annunciava comunque «Foto 4 di
       N» e il clic portava alla quarta foto, non a una galleria delle N
       restanti: l'etichetta visibile e il nome accessibile dicevano due cose
       diverse. Con la foto sempre visibile e solo un angolo occupato,
       tornano a dire la stessa cosa. */
    .dnagw-galleria__miniatura[data-restanti]::after {
        content: "+" attr(data-restanti);
        position: absolute;
        right: 4px;
        bottom: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 1.3rem;
        padding: .05rem .25rem;
        border-radius: var(--dnagw-raggio-piccolo);
        /* Il valore letterale PRIMA e la miscela DOPO, come da convenzione in
           cima al foglio: un browser che non conosce color-mix() tiene questa
           riga invece di lasciare il numero senza alcuno sfondo sotto un
           testo bianco. */
        background: rgba(16, 36, 58, .72);
        background: color-mix(in srgb, var(--dnagw-inchiostro) 72%, transparent);
        color: var(--dnagw-fondo);
        font-size: var(--dnagw-t-etichetta);
        font-weight: var(--dnagw-peso-forte);
        line-height: 1.4;
    }
    /* IL PANNELLO DEL MODULO SI ALLINEA ALLA COLONNA DEI DETTAGLI (collaudo
       dal vivo del 10 agosto 2026): la regola vive QUI, nel blocco che è già
       il complemento esatto dell'unico «@media (max-width: 900px)» del file
       — cioè alla STESSA soglia a cui «.dnagw-scheda» passa a due colonne —
       invece che in un secondo blocco identico. Vedi il commento sopra
       «.dnagw-scheda__modulo» in cima al file per il perché dell'aritmetica. */
    .dnagw-scheda__modulo {
        max-width: calc(100% - var(--dnagw-scheda-colonna) - var(--dnagw-s6));
    }
}

/* --------------------------------------------------------------------------
 * IL MODULO DI RICHIESTA INFORMAZIONI
 *
 * È la ragione per cui la scheda esiste: tutto il resto del sito serve a
 * portare un visitatore fin qui.
 *
 * Qui NON c'è nessun miglioramento progressivo da governare — il modulo
 * funziona senza JavaScript perché è un form normale, non perché una regola lo
 * riveli — quindi nulla di ciò che sta dentro «dnagw-modulo» va mai nascosto:
 * non ci sarebbe niente e nessuno a riaprirlo, e un campo obbligatorio
 * invisibile rende il modulo impossibile da inviare. Lo misura
 * ModuloContattoTest scandendo questo file. Vale anche per la barra fissa del
 * telefono, che al modulo ci porta con un'ancora: se il modulo fosse nascosto,
 * l'ancora non porterebbe da nessuna parte.
 * ------------------------------------------------------------------------ */
.dnagw-modulo {
    /* Dal 10 agosto 2026 il modulo è un pannello come gli altri: fondo,
       filetto tutt'attorno, angoli e spazio interno vengono da
       «dnagw-pannello». Qui resta il solo margine sopra — il filetto che lo
       separava dal resto non serve più, perché adesso il pannello ha un bordo
       suo su tutti e quattro i lati. */
    margin-top: var(--dnagw-s4);
    /* L'ancora della barra fissa porta qui: senza questo margine il titolo del
       modulo finirebbe sotto il bordo alto della finestra. */
    scroll-margin-top: var(--dnagw-s4);
    /* IN EVIDENZA (mockup approvato del 10 agosto 2026). È l'unico pannello
       della pagina che chiede di fare qualcosa, e in una pila di riquadri tutti
       uguali si perdeva: bordo nel COLORE D'AZIONE — quello che il
       concessionario sceglie in DNA Gestionale ▸ Impostazioni ▸ Aspetto, mai
       un colore scritto qui — e fondo appena tinto dello stesso.
       Il letterale viene PRIMA e la miscela DOPO, com'è la regola di questo
       file: un browser che non conosce color-mix() ignora la seconda
       dichiarazione e tiene il grigio tenue, che è il ripiego collaudato.
       Il 4% è volutamente pochissimo: qui sopra ci va del TESTO e ci vanno dei
       campi da compilare, e una tinta più forte — con un'azione scura scelta da
       un concessionario — porterebbe il contrasto sotto la soglia. Lo stacco lo
       fa il bordo, il fondo lo accompagna e basta. */
    border-color: var(--dnagw-azione);
    background: var(--dnagw-tenue);
    background: color-mix(in srgb, var(--dnagw-azione) 4%, var(--dnagw-fondo));
}
.dnagw-modulo__titolo {
    margin: 0 0 var(--dnagw-s3);
    font-family: inherit;
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--dnagw-inchiostro);
}
/* L'INVITO DEL VENDUTO (0b, 12 agosto 2026): compare solo sulla scheda di
   un'auto già venduta e dice perché lì sotto c'è un modulo. Senza, un modulo
   sotto un prezzo barrato e un «non più disponibile» si legge come un errore
   della pagina — e il visitatore non capisce che gli si sta chiedendo un'altra
   cosa, cioè di farsi avvisare quando ne arriva una simile.
   Niente colori suoi: eredita i tre configurabili come tutto il resto. */
.dnagw-modulo__invito {
    margin: 0 0 var(--dnagw-s4);
    font-size: var(--dnagw-t-corpo);
    color: var(--dnagw-inchiostro-tenue);
}
/* I CAMPI SU DUE COLONNE (mockup approvato del 10 agosto 2026), ed è la metà
   che rende sostenibile il riquadro largo: un campo di testo largo ottocento
   pixel è brutto e si compila peggio.
   LA SOGLIA È IL TABLET (~600px), NON IL DESKTOP — collaudo dal vivo del 10
   agosto 2026, lo stesso giorno del cambio qui sopra: sotto tornano su una
   colonna sola, in un blocco dedicato subito qui sotto, e apposta NON dentro
   il «@media (max-width: 900px)» in fondo al file, che è la soglia del resto
   della pagina (filtri, griglia, scheda). Fra 600 e 900px la scheda è già a
   colonna singola ma il modulo resta a due: un campo «nome» da 687px si
   compila peggio di due da circa 330px, e a quella larghezza ci stanno
   comodamente.
   Griglia e non flex: serve che alcune celle occupino tutta la riga (il testo
   lungo, il consenso, il bottone), e con flex ognuna di quelle vorrebbe un
   «flex-basis: 100%» scritto a mano.
   «minmax(0, 1fr)» e non «1fr» (correzione del 10 agosto 2026, come in
   «.dnagw-scheda» più sotto): «1fr» ha per larghezza MINIMA il contenuto, e le
   voci di un menù a tendina le scrive il concessionario — «Sì, entro un mese,
   se trovo l'usato giusto» è una voce legittima. Un <select> largo di contenuto
   impedirebbe alla colonna di stringersi, e il modulo uscirebbe dal pannello
   portandosi dietro la barra di scorrimento orizzontale della pagina. */
.dnagw-modulo__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dnagw-s3);
    align-items: start;
}
/* Il testo lungo, il consenso e il bottone prendono tutta la riga: mezza
   colonna farebbe del textarea una finestrella in cui non ci sta una frase, e
   di «Invia richiesta» un bottone spaiato accanto al vuoto. */
.dnagw-modulo__campo--largo,
.dnagw-modulo__form .dnagw-modulo__consenso,
.dnagw-modulo__form .dnagw-bottone {
    grid-column: 1 / span 2;
}
/* Il campo trappola NON ha bisogno di alcuna regola di griglia, e le due che
   aveva sono state tolte il 10 agosto 2026: «.dnagw-nascosto» è
   «position: absolute», quindi è fuori dal flusso — non è un elemento della
   griglia e non occupa nessuna cella, e né «grid-column» né «margin» facevano
   qualcosa. Il commento che le accompagnava descriveva un buco fra i campi che
   non può esistere. Vedi «.dnagw-nascosto» più sotto per la regola che conta
   davvero. */
/* --------------------------------------------------------------------------
 * IL MODULO SOTTO IL TABLET: una colonna sola
 *
 * Blocco a sé, con una soglia SUA (599px) e non quella del resto della
 * pagina: sotto i 900px la scheda è già a colonna singola, ma il modulo
 * resta a due finché ci sono almeno 600px, perché a quella larghezza due
 * campi affiancati si compilano bene lo stesso. Le tre celle che occupavano
 * tutta la riga tornano a occuparne una, che qui è già tutta la larghezza.
 * ------------------------------------------------------------------------ */
@media (max-width: 599px) {
    .dnagw-modulo__form { grid-template-columns: 1fr; }
    .dnagw-modulo__campo--largo,
    .dnagw-modulo__form .dnagw-modulo__consenso,
    .dnagw-modulo__form .dnagw-bottone { grid-column: 1; }
}
.dnagw-modulo__form label {
    display: flex;
    flex-direction: column;
    gap: var(--dnagw-s1);
    font-size: var(--dnagw-t-etichetta);
    font-weight: var(--dnagw-peso-forte);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dnagw-inchiostro);
}
/* Il maiuscolo dell'etichetta si eredita: senza queste due righe si
   scriverebbe IN STAMPATELLO dentro i campi. Non è una rifinitura. Il
   «select» di una tendina è qui dentro insieme a input e textarea: senza,
   resterebbe col disegno grezzo del sistema mentre tutto il resto del
   modulo porta il fondo, il filetto e gli angoli della pagina. */
.dnagw-modulo__form input,
.dnagw-modulo__form select,
.dnagw-modulo__form textarea {
    width: 100%;
    min-height: var(--dnagw-tocco);
    padding: var(--dnagw-s2) var(--dnagw-s3);
    border: 1px solid var(--dnagw-linea);
    border-radius: var(--dnagw-raggio-piccolo);
    background: var(--dnagw-fondo);
    color: var(--dnagw-inchiostro);
    font-family: inherit;
    font-size: var(--dnagw-t-corpo);
    font-weight: var(--dnagw-peso-testo);
    text-transform: none;
    letter-spacing: normal;
}
.dnagw-modulo__form textarea {
    resize: vertical;
    line-height: 1.5;
}
/* I CAMPI BREVI NON DIVENTANO LARGHISSIMI (collaudo dal vivo del 10 agosto
   2026), anche quando la cella della griglia che li contiene è più larga del
   necessario: un campo «nome» da seicento pixel si compila peggio di uno da
   quattrocento. Il solo «width: 100%» qui sopra li farebbe crescere fino al
   bordo della cella; qui li si tiene a un «max-width», che è la strada più
   semplice perché non tocca né la griglia né le altre regole: sotto quella
   misura il campo resta fluido com'è oggi, sopra smette di crescere.
   Restano fuori — apposta — il checkbox del consenso (larghezza sua, vedi
   qui sotto), il campo trappola (fuori schermo, la sua larghezza non conta) e
   il textarea del messaggio, che è l'unico campo lungo e resta a piena
   larghezza per definizione. */
.dnagw-modulo__form input:not([type="checkbox"]):not([type="hidden"]),
.dnagw-modulo__form select {
    max-width: var(--dnagw-campo-max);
}
.dnagw-modulo__form .dnagw-bottone { width: 100%; }
/* «dnagw-modulo__nota» non c'è più (10 agosto 2026): era la nota «Lascia
   almeno un recapito: email o telefono», che serviva finché la regola era
   «uno dei due» e il markup non sapeva esprimerla. Adesso l'email è sempre
   obbligatoria e ogni campo lo dichiara da sé con «required» e con
   l'asterisco. */
.dnagw-modulo__ancora {
    margin: var(--dnagw-s2) 0 0;
    font-size: var(--dnagw-t-dato);
}
/* Il consenso è l'unica etichetta in riga: la casella sta accanto al testo,
   non sopra, e il testo è una frase con un collegamento dentro — quindi né
   maiuscolo né in grassetto. Il selettore nomina anche il form perché quello
   generico qui sopra ha una classe e un tipo, e senza vincerebbe lui: sono i
   due punti di specificità che tolgono gli !important che c'erano prima. */
.dnagw-modulo__form .dnagw-modulo__consenso {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--dnagw-s2);
    font-size: var(--dnagw-t-dato);
    font-weight: var(--dnagw-peso-testo);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.45;
}
.dnagw-modulo__form .dnagw-modulo__consenso input {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    min-height: 0;
    margin-top: .2rem;
    padding: 0;
    accent-color: var(--dnagw-inchiostro);
}
/* IL COLLEGAMENTO ALL'INFORMATIVA È SOTTOLINEATO, e non è una preferenza
   estetica: è una richiesta esplicita del committente ed è anche la cosa
   giusta. Sotto una casella di consenso quel collegamento va riconosciuto come
   collegamento anche da chi non distingue i colori — e il colore, qui, lo
   sceglie il concessionario, quindi non c'è modo di sapere quanto stacchi dal
   testo intorno. */
.dnagw-modulo__consenso a {
    text-decoration: underline;
    color: inherit;
}
/* Gli esiti dell'invio. Nessun verde e nessun rosso: la tavolozza è quella che
   è e non se ne aggiungono due per due riquadri. Li distingue il filetto a
   sinistra — inchiostro quando è andata, ruggine quando no — e la ruggine è
   coerente col resto del plugin, perché «la richiesta non è partita» è
   esattamente il genere di cosa che il visitatore deve sapere. */
.dnagw-modulo__ok,
.dnagw-modulo__errore {
    margin: 0 0 var(--dnagw-s3);
    padding: var(--dnagw-s3);
    background: var(--dnagw-tenue);
    border-radius: var(--dnagw-raggio-piccolo);
    font-size: var(--dnagw-t-corpo);
    color: var(--dnagw-inchiostro);
}
.dnagw-modulo__ok { border-left: 3px solid var(--dnagw-inchiostro); }
.dnagw-modulo__errore { border-left: 3px solid var(--dnagw-segnale); }
/* Qui stavano «dnagw-modulo__oppure» e «dnagw-modulo__recapito», cioè il blocco
   «OPPURE CONTATTACI DIRETTAMENTE» col telefono e l'email sotto il modulo. Il
   committente l'ha barrato in rosso il 10 agosto 2026: gli stessi recapiti
   stanno nei due comandi grandi in cima alla scheda e nella barra fissa del
   telefono, e ripeterli qui rubava attenzione al gesto per cui il riquadro
   esiste. Le regole se ne sono andate col markup — un foglio di stile che
   descrive elementi che nessuno stampa più è un foglio in cui, la prossima
   volta, non si capisce che cosa sia vivo. */
/* Il campo trappola: fuori dallo schermo, ma NON «display: none» — un campo
   così alcuni automatismi lo saltano, e la trappola non scatterebbe. Chi
   naviga con un lettore di schermo non ci arriva comunque, perché il markup lo
   toglie dall'albero di accessibilità con aria-hidden: quella è la difesa che
   conta, e sta lì apposta. */
.dnagw-nascosto {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
 * LA BARRA DEL TELEFONO, nella scheda
 *
 * Prezzo a sinistra, «Richiedi informazioni» a destra, fissi in fondo allo
 * schermo. Sui portali veri è l'elemento che fa la differenza, ed è il motivo
 * per cui la pagina esiste.
 *
 * NON ha bisogno dello script e non ne aspetta nessuno: il pulsante è
 * un'ANCORA verso «#dnagw-modulo», cioè un collegamento normale, che porta al
 * modulo anche a JavaScript spento. Sta nel markup dentro il ramo del veicolo
 * DISPONIBILE, quindi su un venduto non c'è: chiedere informazioni su un'auto
 * che non c'è più è una richiesta che nasce già delusa.
 * ------------------------------------------------------------------------ */
.dnagw-barra-veicolo { display: none; }

/* --------------------------------------------------------------------------
 * LE CIFRE
 *
 * Il gesto di tutta la pagina, in una regola sola. «tabular-nums» dà a ogni
 * cifra la stessa larghezza: i chilometri della scheda breve cadono in colonna
 * attraverso la griglia, i prezzi si confrontano cifra per cifra, i conteggi
 * dei filtri si leggono incolonnati a destra, il contatore della galleria non
 * fa saltare le frecce da «9 / 31» a «10 / 31», e nelle caratteristiche le
 * potenze e le cilindrate si confrontano a occhio. «lining-nums» tiene le cifre
 * tutte alte dove il carattere di ripiego avrebbe cifre minuscole; il filo di
 * spaziatura in più le fa respirare.
 * font-feature-settings ripete la stessa cosa per i browser che conoscono
 * quello e non l'altro: è un doppione voluto, non una dimenticanza.
 * ------------------------------------------------------------------------ */
.dnagw-testata__conteggio,
.dnagw-card__dati,
.dnagw-card__prezzo,
.dnagw-pillole,
.dnagw-filtri__numero,
.dnagw-filtri__intervallo input,
.dnagw-scheda__riga,
.dnagw-riquadro__prezzo,
.dnagw-riquadro__riferimento,
.dnagw-caratteristiche td + td,
.dnagw-galleria__contatore,
.dnagw-barra__conteggio,
.dnagw-barra-veicolo__prezzo,
.dnagw-paginazione .page-numbers {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: .012em;
}
/* L'UNICO CONTROLLO dell'elenco qui sopra — i due campi «da/a» degli
   intervalli — deve dire la sua tracciatura anche come variabile, perché su un
   controllo la «letter-spacing» la dipinge il blindaggio e la riga qui sopra
   non la raggiunge. Misurato al momento di scrivere il blindaggio: senza questa
   riga i due campi passavano da .012em a «normal», cioè perdevano la
   spaziatura delle cifre tabulari che tutta questa sezione esiste per dare.
   La variabile si mette QUI e non nell'elenco di sopra apposta: dichiararla su
   «.dnagw-pillole» o su «.dnagw-card__prezzo» la farebbe EREDITARE a qualunque
   controllo ci finisse dentro un domani, e sarebbe una tracciatura scelta per
   una ragione che a quel controllo non riguarda. */
.dnagw-filtri__intervallo input { --dnagw-controllo-tracciatura: .012em; }

/* --------------------------------------------------------------------------
 * CHI HA CHIESTO DI NON VEDERE ANIMAZIONI NON NE VEDE
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .dnagw-contenitore *,
    .dnagw-contenitore *::before,
    .dnagw-contenitore *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    /* E lo scatto dello scorrimento a strappi — la striscia delle miniature e,
       sul telefono senza script, la fila delle foto: è poco, ma è movimento che
       il dito non ha chiesto. */
    .dnagw-galleria__miniature,
    .dnagw-galleria__foto { scroll-snap-type: none; }
}

/* --------------------------------------------------------------------------
 * SCHERMO LARGO: la colonna del prezzo segue la lettura
 *
 * Richiesta del committente del 9 agosto 2026: «scorrendo la pagina il modulo a
 * destra resta fisso». Fisso è il RIQUADRO, non il modulo — il modulo è sceso
 * in fondo alla pagina proprio per questo, perché con lui dentro il riquadro
 * era alto seicento pixel e appiccicato sarebbe diventato una trappola: la sua
 * parte bassa, cioè «Invia richiesta», non si sarebbe potuta raggiungere in
 * nessun modo. Adesso dentro ci sono prezzo, un comando e il riferimento:
 * duecento pixel scarsi.
 *
 * TRE GUARDIE, e nessuna è di troppo, perché il verdetto inerte qui è «non
 * incollarti»:
 *
 * 1. la media query non si applica sotto i 560px di ALTEZZA di finestra: sotto
 *    quella soglia il riquadro torna a scorrere con la pagina, com'è sempre
 *    stato. Il numero è più del doppio dell'altezza del riquadro, quindi non è
 *    tarato al pelo — la soglia precedente era 760px perché il riquadro era
 *    alto tre volte tanto;
 * 2. il tetto in altezza è legato alla FINESTRA e non a un numero: chi ingrandisce
 *    i caratteri del browser fa crescere il riquadro, non la finestra;
 * 3. se il contenuto supera quel tetto, «overflow-y: auto» lo fa scorrere DENTRO
 *    il riquadro. Nessuna delle tre da sola basta: la prima non conosce i
 *    caratteri ingranditi, la seconda senza la terza ritaglierebbe e basta.
 *
 * LO STACCO DALL'ALTO non può conoscere l'intestazione appiccicata di un tema
 * qualunque — non si può, e non è nostra: si sceglie uno stacco onesto e ci si
 * ferma lì. Della BARRA DI AMMINISTRAZIONE di WordPress invece si tiene conto,
 * perché quella è di WordPress e non del tema: «body.admin-bar» è la sua
 * classe, alta 32px su schermo largo, ed è il concessionario connesso — cioè la
 * prima persona che guarda la propria scheda — a vedersela. I 46px dell'altra
 * misura non servono: valgono sotto i 783px di larghezza, dove
 * l'appiccicamento non c'è affatto.
 * «body.admin-bar» è l'unico selettore di questo file che non cominci per
 * «.dnagw-», e non contraddice la regola 2 in cima: non DICHIARA niente su
 * body — lo usa come contesto, e tutto ciò che dipinge è nostro.
 * ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------
 * UN «overflow: hidden» DI UN ANTENATO SPEGNE «position: sticky», e non c'e'
 * «!important» che tenga — 25 agosto 2026.
 *
 * IL DIFETTO, misurato sul sito di un cliente e non dedotto: sulla scheda
 * veicolo il riquadro col prezzo e i due contatti doveva restare in primo piano
 * scorrendo, e se ne andava su con la pagina. La nostra regola c'era ed era
 * applicata — «position: sticky», «top: 24px», letti dal browser — ma il tema
 * Motors mette «overflow: hidden» su «div#wrapper», che avvolge tutto.
 *
 * PERCHE' NON E' UNA QUESTIONE DI SPECIFICITA'. Tutte le altre esposizioni al
 * tema si chiudono blindando una NOSTRA proprieta' che il tema sovrascrive; qui
 * la nostra proprieta' vince gia'. A rompere e' una proprieta' LORO su un
 * elemento LORO: un antenato con overflow diverso da «visible» diventa il
 * contenitore di scorrimento dello sticky, e siccome quel contenitore non
 * scorre — e' alto quanto il contenuto — l'elemento non si appiccica mai.
 *
 * IL RIMEDIO E' CHIRURGICO, e va letto per quello che tocca e per quello che
 * NON tocca. «:has()» seleziona gli antenati del NOSTRO contenitore, quindi la
 * regola non esiste su nessuna pagina che non sia una delle nostre due: sul
 * resto del sito il tema resta esattamente com'e'. «body *» tiene fuori «html»
 * e «body», dove il tema puo' avere un «overflow-y: scroll» che serve a lui —
 * toglierlo cambierebbe il comportamento della barra di scorrimento su tutto il
 * sito.
 *
 * IL RISCHIO, dichiarato: un tema puo' avere messo «overflow: hidden» per
 * contenere qualcosa che sborda, e togliendolo su queste due pagine quella cosa
 * potrebbe uscire. Misurato sul sito vero il 25 agosto 2026 — 1600x900, scheda
 * veicolo reale — la colonna passa da «scorsa via a -695px» a «ferma a 24px», e
 * lo scorrimento orizzontale NON compare: era la sola conseguenza plausibile, ed
 * e' stata guardata.
 *
 * Chi non supporta «:has()» torna al comportamento di prima: la colonna scorre
 * con la pagina. Nessuno resta peggio di com'era.
 * ------------------------------------------------------------------------ */
@media (min-width: 901px) and (min-height: 560px) {
    body *:has(.dnagw-contenitore) {
        overflow: visible !important;
    }
    .dnagw-scheda__colonna {
        position: sticky;
        top: var(--dnagw-s5);
        max-height: calc(100vh - 2 * var(--dnagw-s5));
        overflow-y: auto;
        /* Lo spazio per l'ANELLO DEL FUOCO, come nella colonna dei filtri e in
           quella delle miniature: dentro un contenitore che scorre, un anello
           disegnato sul filo del bordo viene tagliato — e qui l'elemento che
           prende il fuoco è il comando «Richiedi informazioni», cioè il motivo
           per cui la pagina esiste. Il ritaglio vale su ENTRAMBI gli assi
           quale che sia l'overflow dichiarato su ciascuno, quindi il padding è
           uguale sui quattro lati. */
        padding: var(--dnagw-miniatura-stacco);
        scrollbar-width: thin;
        scrollbar-color: var(--dnagw-linea) transparent;
    }
    body.admin-bar .dnagw-scheda__colonna {
        top: calc(var(--dnagw-s5) + 32px);
        max-height: calc(100vh - 2 * var(--dnagw-s5) - 32px);
    }
}

/* --------------------------------------------------------------------------
 * TELEFONO E TABLET
 *
 * La larghezza a cui l'impianto passa a colonna singola. È l'UNICO blocco
 * «@media (max-width: 900px)» del file, ed è meglio che resti tale:
 * PannelloFiltriTest legge il primo che trova e ci cerca dentro le tre regole
 * del pannello a scomparsa.
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
    /* Le sedi passano da tre a due per riga (S1, mockup approvato). Sta qui e
       non accanto alla regola che governa perché questo blocco deve restare
       l'unico a 900px del file — vedi il commento qui sopra. */
    .dnagw-sedi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* LA BARRA DIVENTA UNA COLONNA. Le tendine, che su schermo largo stanno in
       riga con i pannelli sospesi sopra il contenuto, qui si incolonnano e i
       pannelli tornano NEL FLUSSO: un pannello sospeso dentro un altro
       pannello che scorre finirebbe fuori dallo schermo alla prima tendina
       aperta in fondo. */
    .dnagw-filtri__barra {
        display: block;
        border-bottom: 0;
    }
    .dnagw-filtri__tendine {
        display: block;
        margin-top: var(--dnagw-s3);
    }
    .dnagw-filtri__cerca { max-width: none; }
    .dnagw-tendina {
        border-top: 1px solid var(--dnagw-linea);
    }
    .dnagw-tendina__etichetta {
        border: 0;
        padding: 0;
        min-height: var(--dnagw-tocco);
        font-size: var(--dnagw-t-etichetta);
        text-transform: uppercase;
        letter-spacing: .1em;
    }
    .dnagw-tendina[open] > .dnagw-tendina__testa .dnagw-tendina__etichetta {
        border: 0;
    }
    .dnagw-tendina__pannello {
        position: static;
        min-width: 0;
        max-width: none;
        padding: 0 0 var(--dnagw-s3);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .dnagw-tendina__voci { max-height: none; }
    /* Il piede della tendina perde «Applica»: dentro il pannello del telefono
       si spuntano piu' filtri di seguito e si conferma UNA volta sola, col
       pulsante in fondo che porta il conteggio dal vivo. Un «Applica» per
       famiglia chiuderebbe il pannello dopo ogni scelta. «Azzera» resta: e' un
       collegamento, e toglie una famiglia sola. */
    .dnagw-tendina__applica { display: none; }
    .dnagw-tendina__piede {
        justify-content: flex-end;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
    /* IL TITOLO «Filtri» torna visibile: qui il pannello copre la pagina, e va
       detto che cos'e'. E' l'unico posto in cui compare il colore di marca in
       questa barra: un filetto di tre pixel, che e' un segno e non del testo. */
    .dnagw-filtri__titolo {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        padding-bottom: var(--dnagw-s2);
        border-bottom: 3px solid var(--dnagw-accento);
        overflow: visible;
        clip: auto;
        clip-path: none;
        font-family: inherit;
        font-size: var(--dnagw-t-etichetta);
        font-weight: var(--dnagw-peso-forte);
        text-transform: uppercase;
        letter-spacing: .18em;
        color: var(--dnagw-inchiostro);
    }
    /* IL PULSANTE UNICO torna, e resta in fondo alla colonna che scorre: e'
       dove sta il numero che cambia mentre si spunta («Mostra 17 veicoli»).
       L'anello di fondo lo stacca dalle voci che gli passano sotto — senza,
       una casella tagliata a meta' dal bordo del pulsante sembra un difetto —
       ed e' del colore della PAGINA e non del fondo: la barra sta sul fondo
       appena grigio della veste a schede, e un anello bianco li' sopra sarebbe
       un alone attorno al pulsante invece di una continuazione della pagina. */
    .dnagw-contenitore .dnagw-filtri__applica {
        display: flex;
        position: sticky;
        bottom: 0;
        width: 100%;
        justify-content: center;
        margin-top: var(--dnagw-s2);
        box-shadow: 0 0 0 6px var(--dnagw-pagina);
    }
    .dnagw-solo-mobile { display: inline-flex; }
    /* Finché il JavaScript non lo scopre, il pulsante non c'è: senza script non
       aprirebbe niente, e un pulsante inerte è peggio di un pulsante assente —
       chi lo preme conclude che il sito è rotto. Classe + attributo batte la
       riga qui sopra per specificità, a qualunque ordine. */
    .dnagw-solo-mobile[hidden] { display: none; }
    /* LA CHIUSURA la mette il JavaScript, e vale solo a questa larghezza.
       CHIUSO NON VUOL DIRE SPARITO: resta in pagina il CAMPO DI RICERCA, che è
       il mockup approvato dal committente e la via più rapida per chi sa già
       che cosa cerca — «compass», «500», «panda». Chiuderlo insieme al resto
       vorrebbe dire che sul telefono, per scrivere una parola, bisogna prima
       aprire un pannello che copre la pagina. Spariscono le tendine, il
       titolo e il pulsante che applica: quelli vivono nel pannello, e il
       pannello lo apre il comando in fondo allo schermo.
       Fino al 12 agosto 2026 questa regola era «display: none» sull'intero
       pannello. */
    .dnagw-filtri--chiuso .dnagw-filtri__titolo,
    .dnagw-filtri--chiuso .dnagw-filtri__tendine,
    .dnagw-contenitore .dnagw-filtri--chiuso .dnagw-filtri__applica { display: none; }
    /* Aperto, il pannello copre la pagina e scorre: su un telefono una colonna
       laterale lunga come questa spingerebbe l'elenco fuori dalla prima
       schermata. Porta il proprio fondo perché copre il contenuto del tema. */
    .dnagw-filtri--aperto {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9999;
        padding: var(--dnagw-s4);
        background: var(--dnagw-fondo);
        color: var(--dnagw-inchiostro);
        overflow: auto;
        overscroll-behavior: contain;
    }
    /* La ✕ si vede solo mentre il pannello copre la pagina: nella colonna di
       destra non ci sarebbe niente da chiudere. */
    .dnagw-filtri--aperto .dnagw-filtri__chiudi {
        /* Le tre variabili del blindaggio: senza, la ✕ tornerebbe del colore
           che il tema dà ai <button> — cioè, sul tema misurato, bianca su
           bianco — e il pannello dei filtri del telefono non si chiuderebbe
           più a vista d'occhio. La ✕ è fuori dal sottoinsieme di Archivo e la
           disegna il carattere di sistema: il blindaggio della famiglia non
           cambia niente per lei, la catena di ripiego è la stessa. */
        --dnagw-controllo-fondo: transparent;
        --dnagw-controllo-h: var(--dnagw-tocco);
        --dnagw-controllo-t: 1.5rem;
        display: block;
        width: var(--dnagw-tocco);
        height: var(--dnagw-controllo-h);
        margin-left: auto;
        padding: 0;
        border: 0;
        background: var(--dnagw-controllo-fondo);
        cursor: pointer;
        font-family: inherit;
        font-size: var(--dnagw-controllo-t);
        line-height: 1;
        color: var(--dnagw-inchiostro);
    }
    /* Col pollice le voci vogliono il bersaglio pieno, non i 32px del mouse. */
    .dnagw-filtri__voce { min-height: var(--dnagw-tocco); }
    /* LE DUE BARRE FISSE. Stessa altezza, stesso filo di marca in cima, stesso
       posto: una per l'elenco, una per la scheda, e non compaiono mai insieme
       perché non esistono nella stessa pagina. */
    .dnagw-barra,
    .dnagw-barra-veicolo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--dnagw-s3);
        position: fixed;
        inset: auto 0 0 0;
        z-index: 40;
        min-height: var(--dnagw-barra-h);
        padding: var(--dnagw-s2) var(--dnagw-s4);
        /* Il filo di marca in cima, terzo e ultimo posto in cui il colore del
           tema entra in questa pagina: stacca la barra dal contenuto che le
           scorre sotto e dice che è un pezzo di questo sito. */
        border-top: 3px solid var(--dnagw-accento);
        background: var(--dnagw-fondo);
        /* Sui telefoni con la tacca in fondo, lo spazio che il sistema chiede. */
        padding-bottom: max(var(--dnagw-s2), env(safe-area-inset-bottom));
    }
    /* La barra dell'elenco non c'è finché lo script non la scopre: dentro c'è
       solo il pulsante «Filtri», e quello lo sa aprire solo lui. Stessa forma
       di «.dnagw-solo-mobile[hidden]» qui sopra, e per la stessa ragione. */
    .dnagw-barra[hidden] { display: none; }
    .dnagw-barra__conteggio {
        margin: 0;
        font-size: var(--dnagw-t-dato);
        font-weight: var(--dnagw-peso-forte);
        text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--dnagw-inchiostro-tenue);
    }
    .dnagw-barra .dnagw-bottone { flex: 0 1 auto; }
    .dnagw-barra-veicolo__prezzo {
        margin: 0;
        font-size: var(--dnagw-t-prezzo);
        font-weight: var(--dnagw-peso-prezzo);
        line-height: 1.1;
        letter-spacing: -.02em;
        white-space: nowrap;
    }
    .dnagw-barra-veicolo .dnagw-bottone {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 62%;
        padding: var(--dnagw-s2) var(--dnagw-s3);
    }
    /* Lo spazio sotto al contenuto: senza, la barra fissa coprirebbe la
       paginazione, il piè di pagina del tema e — cosa peggiore — l'ultimo
       elemento che prende il fuoco della tastiera. */
    .dnagw-contenitore { padding-bottom: calc(var(--dnagw-s6) + var(--dnagw-barra-h)); }
    .dnagw-scheda { grid-template-columns: 1fr; }
    /* In colonna singola le collocazioni esplicite farebbero danno: si torna
       all'ordine del documento, che è già quello chiesto per il telefono —
       titolo, foto, prezzo, poi i dettagli. Sono QUATTRO da azzerare, non due:
       dal 9 agosto 2026 anche titolo e galleria sono figli della griglia, e una
       collocazione rimasta indietro rimetterebbe un elemento in una colonna che
       a questa larghezza non esiste più. */
    .dnagw-scheda__testata,
    .dnagw-scheda__foto,
    .dnagw-scheda__colonna,
    .dnagw-scheda__contenuto {
        grid-column: auto;
        grid-row: auto;
    }
    /* I CAMPI DEL MODULO NON SI TOCCANO QUI: hanno una soglia LORO, 599px,
       più stretta di questa — vedi il blocco dedicato accanto a
       «.dnagw-modulo__form». Fra 600 e 900px il modulo resta a due colonne
       mentre il resto della pagina, scheda compresa, è già in colonna
       singola: un campo si compila bene anche su un tablet stretto. */
    .dnagw-dotazioni { columns: 1; }
    /* Le pillole: tre colonne su schermo largo (regola di base), due qui —
       scelta del committente sul mockup approvato. */
    .dnagw-pillole { grid-template-columns: repeat(2, 1fr); }
    /* L'ETICHETTA VA A CAPO INVECE DI USCIRE DAL RIQUADRO — 25 agosto 2026.
       IL DIFETTO, misurato sul sito di un cliente a 390 e a 360px e non
       dedotto: «IMMATRICOLAZIONE» chiede 137px di testo e nella pillola ce ne
       sono 107, «ALIMENTAZIONE» 110 — quindi uscivano dal bordo, e a 360px
       usciva anche «CARROZZERIA». La causa e' che l'etichetta aveva
       «overflow-wrap: normal» mentre il valore sotto ha «break-word»: quelle
       sono PAROLE SOLE, e una parola sola che non ci sta non va a capo — esce.
       PERCHE' NON BASTA STRINGERE. Servono ~185px per quella pillola (testo
       piu' icona piu' spazi) e a 390px ce ne sono 154: nessuna riduzione
       ragionevole di corpo o spaziatura ci arriva. E le due colonne su telefono
       sono una scelta del committente sul mockup approvato: non si toccano.
       PERCHE' «anywhere» E NON LA SILLABAZIONE. Provate tutt'e due sul sito
       vero: «hyphens: auto» spezza l'italiano in TRE righe («IM-MA-TRI…»),
       «anywhere» in due. Su un'etichetta in maiuscoletto — non su della prosa —
       due righe senza trattino si leggono meglio di tre col trattino.
       Il corpo scende di un punto e la spaziatura si stringe: non bastano da
       soli, ma tolgono una riga di troppo alle altre etichette. */
    .dnagw-pillola__etichetta {
        overflow-wrap: anywhere;
        font-size: .6875rem;
        letter-spacing: .02em;
    }
    /* LA GALLERIA SENZA SCRIPT, SU TELEFONO. Con lo script attivo si vede una
       foto sola con la striscia sotto, ed è la forma giusta. Senza script, in
       colonna, sarebbero trentuno fotografie una sopra l'altra: qui diventano
       una fila che scorre di lato con lo scatto, così restano tutte
       raggiungibili — che è la garanzia — senza essere una pagina lunga
       trecento schermate. Nulla si nasconde: è solo un altro verso di lettura. */
    .dnagw-galleria:not(.dnagw-galleria--js) .dnagw-galleria__foto {
        grid-auto-flow: column;
        grid-auto-columns: 88%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: var(--dnagw-linea) transparent;
    }
    .dnagw-galleria:not(.dnagw-galleria--js) .dnagw-galleria__voce {
        scroll-snap-align: center;
    }
    .dnagw-galleria__voce img { max-height: 52vh; }
    .dnagw-galleria__miniature { grid-auto-columns: 72px; }
    /* LA RIGA DATI E IL PREZZO DELLA CARD — scostamento dal mockup approvato
       (misurato a 390px) chiuso dalla revisione. La regola di base li impila
       in colonna, righe separate, prezzo allineato a destra: sotto i 901px
       la card cresce di due o tre righe, contro l'obiettivo dichiarato di
       questa pagina — far stare più auto in una schermata. Qui si RIDICHIARA
       la disposizione per lo schermo stretto: i dati tornano su UNA riga
       sola («▣ 24.800 km   ⛽ Ibrida», con l'a capo di riserva se non ci
       stanno tutti) e «Prezzo   19.950 €» torna sulla stessa riga, a
       sinistra.
       MINORE 6 (revisione finale, coda agosto 2026): queste quattro regole
       stavano nel blocco «@media (max-width: 560px)», mentre l'IMPIANTO —
       la colonna dei filtri che si accosta alla griglia, qui sopra — passa a
       colonna singola già a 900px. Fra 561px e 900px (un tablet in
       verticale, per esempio) la card restava quella «alta» — dati impilati,
       prezzo su una riga a sé — mentre tutto il resto della pagina aveva già
       lo spazio di un telefono. Spostarle in QUESTO blocco allinea i due
       limiti: la card compatta scatta esattamente dove scatta il resto
       dell'impianto, non quaranta pixel più stretto. */
    .dnagw-card__dati {
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: var(--dnagw-s1);
        column-gap: var(--dnagw-s4);
    }
    .dnagw-card__prezzo {
        display: flex;
        align-items: baseline;
        gap: var(--dnagw-s2);
        text-align: left;
    }
    .dnagw-card__prezzo-etichetta { display: inline; margin: 0; }
    .dnagw-card__prezzo-importo { display: inline; }
}

/* Telefono stretto: la griglia a una colonna sola, invece di lasciare che
   «auto-fill» ne pieghi due da 150px.
   Qui sta anche la terza soglia delle SEDI (S1), e la posizione È IL PUNTO:
   MISURATO SU UN TELEFONO VERO, non dedotto. La prima stesura metteva la
   regola «una colonna» nel blocco «@media (max-width: 599px)» di più sopra —
   corretta a leggerla, e sbagliata a guardarla: quel blocco viene PRIMA del
   «@media (max-width: 900px)» in fondo al file, e a 390px combaciano
   entrambi. A parità di specificità vince l'ultimo scritto, cioè il 900px con
   le sue DUE colonne: sul telefono le sedi restavano affiancate a 154px
   l'una. I test erano verdi lo stesso, perché nessuno di loro apre un
   browser. Se questa regola si sposta più in su, il difetto torna. */
@media (max-width: 560px) {
    .dnagw-sedi { grid-template-columns: minmax(0, 1fr); }
    /* IL MARGINE LATERALE NON SI STRINGE PIÙ (9 agosto 2026, dal collaudo sul
       telefono del committente). Qui c'era «padding: s3», cioè 12px: dodici
       pixel guadagnati in larghezza, pagati con le etichette della tabella
       «Caratteristiche principali» appiccicate al bordo dello schermo — è la
       prima cosa che si è vista aprendo una scheda da telefono. E il conto non
       tornava nemmeno con noi stessi: la barra fissa in fondo, che sta sulla
       stessa verticale, ne usa 16 (s4), quindi il prezzo della barra e le
       etichette della tabella cominciavano a quattro pixel di distanza l'uno
       dalle altre, disallineate.
       Ora vale il margine di base — s4, 16px, il passo con cui sono spaziate
       tutte le altre cose del foglio — e la colonna resta larga 358px su un
       telefono da 390: abbastanza per «Sequenziale, 6 marce» su una riga sola.
       Se un giorno servisse ridurlo, va ridotto ANCHE alla barra fissa: sono
       lo stesso margine visivo, non due. */
    .dnagw-griglia { grid-template-columns: 1fr; }

    /* I VEICOLI SIMILI SCORRONO DI LATO (9 agosto 2026, scelta del committente
       sul modello del riferimento). Impilate, quattro schede aggiungevano
       duemila pixel in fondo a una pagina che è già lunga, e chi arrivava fin
       lì aveva già deciso: sono una vetrina da sbirciare, non una lista da
       percorrere. L'elenco di /veicoli/ resta impilato — lì è il contrario.

       Niente JavaScript: è lo scorrimento del browser più CSS Scroll Snap.
       Le schede restano tutte nel documento e nell'ordine di tabulazione, e
       portando il fuoco su una il browser la porta in vista da sé.

       IL MARGINE NEGATIVO più il padding uguale e contrario fa una cosa sola:
       il nastro esce fino ai bordi dello schermo (così la scheda dopo si taglia
       sul bordo, com'è nel riferimento) mentre la PRIMA scheda comincia
       esattamente incolonnata col titolo «Veicoli simili» qui sopra. Senza il
       padding la prima partirebbe attaccata al vetro; senza il margine il
       nastro finirebbe a sedici pixel dal bordo e la scheda dopo si
       taglierebbe a mezz'aria. «scroll-padding» ripete la stessa misura per
       l'aggancio, o lo scatto porterebbe la scheda sotto il margine. */
    .dnagw-griglia--carosello {
        display: flex;
        grid-template-columns: none;
        gap: var(--dnagw-s4);
        margin-inline: calc(-1 * var(--dnagw-s4));
        padding-inline: var(--dnagw-s4);
        padding-bottom: var(--dnagw-s2);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--dnagw-s4);
        overscroll-behavior-x: contain;
        /* Come la striscia delle miniature e la colonna dei filtri: la barra di
           scorrimento è un dettaglio di servizio, non un elemento del disegno. */
        scrollbar-width: thin;
        scrollbar-color: var(--dnagw-linea) transparent;
    }
    /* 82%: la scheda prende quasi tutta la larghezza e quel che resta è la
       sbirciata: abbastanza da far capire che ce n'è un'altra, troppo poco per
       sembrare una colonna tagliata male. «0 0» perché non si allarghi né si
       stringa al variare di quante ne restano. */
    .dnagw-griglia--carosello > * {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
    .dnagw-testata {
        display: block;
        padding: var(--dnagw-s5) 0;
    }
    /* IL RIQUADRO DEL PREZZO RESTA UN PANNELLO anche sul telefono stretto (10
       agosto 2026). Qui c'era il contrario — bordo via, solo un filetto in
       cima — e aveva ragione finché la pagina era bianca: un rettangolo dentro
       un rettangolo bianco è spazio perso. Su fondo grigio è l'opposto: il
       pannello è ciò che fa galleggiare il prezzo, ed è la prima cosa che il
       committente ha guardato dal telefono. Le due regole si contraddicevano,
       quindi quella vecchia è andata via invece di essere neutralizzata. */
}

/* --------------------------------------------------------------------------
 * IL VISORE DELLE FOTO — 16 agosto 2026, mockup approvato dal committente
 *
 * Clic sulla foto grande della scheda e le foto si aprono sopra la pagina, con
 * frecce, contatore e miniature; sul telefono si sfoglia col dito. Il markup lo
 * costruisce assets/js/pubblico.js e non esiste senza JavaScript: là il clic
 * resta il link alla foto a piena risoluzione, esattamente com'era.
 *
 * I COLORI SONO CABLATI, ed è la seconda regola di questo foglio a farlo di
 * proposito (la prima è la filigrana della demo). La ragione qui è un'altra:
 * sotto c'è una FOTOGRAFIA, e il fondo esiste per spegnere tutto il resto. Con
 * i colori di Impostazioni ▸ Aspetto una tavolozza chiara darebbe una foto che
 * non stacca, e nel caso sfortunato — fondo chiaro, azione chiara — frecce
 * dello stesso colore di ciò che ci sta dietro. La tavolozza è tre valori:
 * fondo quasi nero, segno bianco, filetto bianco tenue.
 *
 * IL VISORE È DISCENDENTE DI «.dnagw-contenitore», mai figlio di <body>: fuori
 * di lì non si risolvono le proprietà personalizzate e non arriva il blindaggio
 * dei controlli. Che un «position: fixed» funzioni da discendente è misurato —
 * lo sono già le due barre fisse e il pannello dei filtri.
 * ------------------------------------------------------------------------ */
.dnagw-visore {
    --dnagw-visore-fondo: rgba(12, 12, 14, .94);
    --dnagw-visore-segno: #ffffff;
    --dnagw-visore-filetto: rgba(255, 255, 255, .34);
    /* I controlli qui dentro stanno su fondo scuro: le proprietà del blindaggio
       si impostano QUI, con la specificità normale, ed è così che quel blocco è
       fatto per essere usato — l'«!important» sta sulla proprietà e il valore
       arriva da queste. */
    --dnagw-controllo-fondo: transparent;
    --dnagw-controllo-testo: var(--dnagw-visore-segno);
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    grid-template-rows: auto 1fr auto;
    background: var(--dnagw-visore-fondo);
    color: var(--dnagw-visore-segno);
}
.dnagw-visore--aperto { display: grid; }

.dnagw-visore__testa {
    display: flex;
    align-items: center;
    gap: var(--dnagw-s3);
    padding: var(--dnagw-s3) var(--dnagw-s4);
    border-bottom: 1px solid var(--dnagw-visore-filetto);
}
.dnagw-visore__titolo {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    /* Un nome lungo non deve spingere fuori il contatore e la ✕: quelli sono
       comandi, il titolo è un riferimento. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--dnagw-t-corpo);
    font-weight: 600;
}
/* Cifre tabulari e larghezza minima: passando da «9 / 26» a «10 / 26» la ✕ non
   si sposta di un pixel. Stessa scelta del contatore della galleria. */
.dnagw-visore__contatore {
    flex: 0 0 auto;
    margin: 0;
    min-width: 4.5rem;
    text-align: right;
    font-size: var(--dnagw-t-dato);
    font-variant-numeric: tabular-nums;
    color: var(--dnagw-visore-segno);
}

/* LA ✕ È DIPINTA, non è il glifo «✕»: un segno fatto di testo dipende da
   «color» e «font-family», cioè dalle due proprietà più contese che esistano
   sul sito di qualcun altro. È la stessa correzione già fatta sulle frecce
   della galleria, dove il glifo spariva sul tema Motors. */
.dnagw-visore__chiudi,
.dnagw-visore__freccia {
    --dnagw-controllo-h: var(--dnagw-tocco);
    --dnagw-controllo-t: 0;
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dnagw-tocco);
    height: var(--dnagw-controllo-h);
    padding: 0;
    border: 1px solid var(--dnagw-visore-filetto);
    border-radius: var(--dnagw-raggio-piccolo);
    background: transparent;
    cursor: pointer;
}
.dnagw-visore__chiudi:hover,
.dnagw-visore__freccia:hover { border-color: var(--dnagw-visore-segno); }
.dnagw-visore__chiudi::before,
.dnagw-visore__chiudi::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 2px;
    background: var(--dnagw-visore-segno);
}
.dnagw-visore__chiudi::before { transform: rotate(45deg); }
.dnagw-visore__chiudi::after { transform: rotate(-45deg); }

.dnagw-visore__palco {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dnagw-s4);
    min-height: 0;
    padding: var(--dnagw-s4);
}
/* LA FOTO NON SI TAGLIA E NON SI STIRA. «contain» e i due massimi in percentuale
   del palco: qualunque proporzione arrivi dal gestionale — sono 4:3, misurate —
   entra intera. Un «cover» qui vorrebbe dire mostrare mezza carrozzeria proprio
   nella schermata che esiste per guardare la carrozzeria. */
.dnagw-visore__foto {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--dnagw-raggio-piccolo);
}
/* Il segno delle frecce: due filetti ruotati, come la fisarmonica dei filtri e
   come i comandi della galleria. L'angolo di bordo destro + bordo inferiore
   punta in basso a destra: +135° lo porta a sinistra, −45° a destra. */
.dnagw-visore__freccia::before {
    content: "";
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--dnagw-visore-segno);
    border-bottom: 2px solid var(--dnagw-visore-segno);
}
.dnagw-visore__freccia--indietro::before {
    transform: rotate(135deg);
    margin-right: -3px;
}
.dnagw-visore__freccia--avanti::before {
    transform: rotate(-45deg);
    margin-left: -3px;
}

.dnagw-visore__miniature {
    display: flex;
    gap: var(--dnagw-s2);
    padding: var(--dnagw-s3) var(--dnagw-s4);
    border-top: 1px solid var(--dnagw-visore-filetto);
    overflow-x: auto;
    /* Sul telefono la striscia si scorre col dito, e la barra di scorrimento
       nativa su fondo scuro è un filo chiaro che sembra un errore. */
    scrollbar-width: thin;
}
.dnagw-visore__miniatura {
    --dnagw-controllo-h: auto;
    flex: 0 0 auto;
    width: 76px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--dnagw-raggio-piccolo);
    background: transparent;
    cursor: pointer;
    line-height: 0;
}
.dnagw-visore__miniatura img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    /* Le non attive sono in ombra: è il modo di dire quale si sta guardando
       senza aggiungere un secondo segno accanto al bordo. */
    opacity: .55;
}
.dnagw-visore__miniatura:hover img { opacity: 1; }
.dnagw-visore__miniatura--attiva { border-color: var(--dnagw-visore-segno); }
.dnagw-visore__miniatura--attiva img { opacity: 1; }

/* IL CURSORE A LENTE LO METTE SOLO LO SCRIPT (classe «--js»): a script spento
   quel link porta davvero altrove, e un cursore che promette un ingrandimento
   in pagina prometterebbe una cosa che non succede. */
.dnagw-galleria__ingrandisci--js { cursor: zoom-in; }

@media (max-width: 47.99em) {
    /* SUL TELEFONO LE FRECCE NON CI SONO: si sfoglia col dito, e due bersagli
       da 44px sui lati mangerebbero un quarto della larghezza della foto —
       proprio dove la foto è già piccola. Restano le miniature e il dito, e la
       tastiera per chi ne ha una. */
    .dnagw-visore__freccia { display: none; }
    .dnagw-visore__palco { padding: var(--dnagw-s2); }
    .dnagw-visore__testa { padding: var(--dnagw-s2) var(--dnagw-s3); }
    .dnagw-visore__miniature { padding: var(--dnagw-s2) var(--dnagw-s3); }
    .dnagw-visore__miniatura { width: 58px; }
    /* Il nome dell'auto sul telefono sparisce: nella testa restano il contatore
       e la ✕, che sono i due comandi. Il nome è a due dita di distanza, sulla
       scheda che sta sotto. */
    .dnagw-visore__titolo { display: none; }
}

/* ---------------------------------------------------------------------------
 * LA PAGINA DI RINGRAZIAMENTO (31 agosto 2026), sul mockup approvato.
 *
 * Una colonna stretta e centrata, tre blocchi: l'esito, il riquadro del
 * concessionario (che è quello già esistente, non toccato) e le due uscite.
 * Niente foto, niente prezzo, niente modulo — è tutto il punto della pagina.
 * ------------------------------------------------------------------------ */
.dnagw-grazie {
    /* La stessa misura di lettura del resto del plugin, ma più stretta: qui non
       c'è una griglia da riempire, c'è una frase da leggere. Sotto i 640px il
       margine automatico non fa niente e il padding del contenitore governa. */
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--dnagw-s6) 0;
}

.dnagw-grazie__esito { text-align: center; }

/* IL SEGNO DI RIUSCITA, DISEGNATO e non scritto.
   Il glifo «✓» dipende da «color» e «font-family» — le due proprietà che un
   tema ospite si riprende per prime, e la ragione per cui su un tema Motors
   vero le frecce della galleria erano sparite. Qui il segno è un elemento
   vuoto: due filetti in ::after, ruotati di 45°, dentro un tondo. Non c'è
   nessun testo da perdere, e il colore arriva dai ruoli del plugin. */
.dnagw-grazie__segno {
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--dnagw-s4);
    border-radius: 50%;
    background: var(--dnagw-azione);
    position: relative;
}
.dnagw-grazie__segno::after {
    content: "";
    position: absolute;
    /* Il baricentro ottico di una spunta non è il centro geometrico: la gamba
       lunga la sbilancia in basso a destra, e centrata «a numeri» sembra
       storta. Questi due valori la rimettono a posto a occhio. */
    top: .95rem;
    left: 1.05rem;
    width: .55rem;
    height: 1.05rem;
    border-right: 3px solid var(--dnagw-azione-testo, #fff);
    border-bottom: 3px solid var(--dnagw-azione-testo, #fff);
    transform: rotate(45deg);
}

.dnagw-grazie__titolo {
    margin: 0 0 var(--dnagw-s2);
    font-size: var(--dnagw-t-pagina);
    line-height: 1.2;
}

.dnagw-grazie__testo {
    margin: 0;
    font-size: var(--dnagw-t-corpo);
    color: var(--dnagw-inchiostro-tenue);
}

/* IL VEICOLO NOMINATO. Un riquadro appena staccato dal pannello che lo
   contiene: è la conferma di QUALE auto, cioè la cosa che il paragrafo grigio
   di prima non diceva. */
.dnagw-grazie__veicolo {
    margin: var(--dnagw-s5) 0 0;
    padding: var(--dnagw-s4);
    background: var(--dnagw-tenue);
    border-radius: var(--dnagw-raggio);
    text-align: left;
}
.dnagw-grazie__veicolo-etichetta {
    margin: 0 0 var(--dnagw-s1);
    font-size: var(--dnagw-t-etichetta);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dnagw-inchiostro-tenue);
}
.dnagw-grazie__veicolo-nome {
    margin: 0;
    font-size: var(--dnagw-t-titolo);
    font-weight: 600;
    /* Il nome arriva dal gestionale e può essere lungo: va a capo, non esce. */
    overflow-wrap: anywhere;
}
.dnagw-grazie__veicolo-riferimento {
    margin: var(--dnagw-s1) 0 0;
    font-size: var(--dnagw-t-dato);
    color: var(--dnagw-inchiostro-tenue);
}

/* QUI STAVANO «.dnagw-grazie__sottotitolo» e «.dnagw-grazie__punti», cioè il
   blocco «Cosa succede adesso»: tolto il 31 agosto 2026 dal committente stesso,
   poche ore dopo averlo dettato, perché prometteva l'email automatica e la
   telefonata del suo team — il flusso di UN concessionario, non di chiunque
   compri il plugin. Le regole se ne vanno col markup: un selettore che non
   corrisponde più a niente è peso morto che il prossimo legge come una cosa da
   ripristinare. Il perché per esteso sta nel template. */

/* Lo stacco fra i blocchi, sul CONTENITORE e non sul pannello: il primo non
   deve avere spazio sopra. È lo stesso schema della scheda. */
.dnagw-grazie > * + * { margin-top: var(--dnagw-s4); }

/* LE DUE USCITE. Affiancate se ci stanno, impilate se no — e su telefono
   ciascuna prende tutta la larghezza, perché è un bersaglio da pollice. */
.dnagw-grazie__uscite {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnagw-s3);
    margin: 0;
}
.dnagw-grazie__uscite .dnagw-bottone { flex: 1 1 12rem; justify-content: center; }

@media (max-width: 47.99em) {
    .dnagw-grazie { padding: var(--dnagw-s5) 0; }
    .dnagw-grazie__uscite .dnagw-bottone { flex-basis: 100%; }
}