/* ==========================================================================
   dpi-tipografia — il foglio delle PAGINE PUBBLICHE (/stampa/...).

   📅 Nato il 13/09/2026, e non e' un riordino: e' la riparazione di un difetto
   misurato dal collaudatore che guarda le pagine rese.

   COSA C'ERA PRIMA: queste stesse regole erano una stringa PHP stampata
   dentro `<style>` NEL CORPO della pagina (byte ~176.632). Il CSS del
   Customizer di WordPress sta in `<head>` (byte ~138.568) — quindi arrivava
   PRIMA, e a parita' di specificita' **vinceva il plugin**.
   ⇒ Il risultato pratico: **dal Customizer non si poteva correggere niente su
     queste pagine.** Prova rifatta da chi l'ha trovato: iniettando una regola
     nell'head, `border-radius` restava del plugin e `background` (che il
     plugin non dichiara) passava. Cioe' il Customizer sembrava rotto e non lo
     era: era coperto.
   ⇒ Adesso il foglio si accoda in `<head>` come tutti gli altri, con priorita'
     predefinita, cosi' `wp-custom-css` viene **dopo** e puo' sovrascrivere.
     Che e' l'intento: **l'ultima parola su come si vede il negozio deve
     restare a chi lo gestisce, non al plugin.**

   🔴 LA REGOLA CHE NON CAMBIA: tutto sta dentro `.dpitip-w`.
   Queste pagine sono stampate DENTRO il tema del negozio. Una regola nuda
   (`body`, `h1`, `table`) qui non aggiunge una pagina: cambia il sito, a tutti
   i 3.552 prodotti. Misurato l'11/09 — regole `.dpitip-w` presenti su `/`,
   `/shop/`, `/product/…`: zero; su `/stampa/`: sedici.
   L'unica eccezione e' `.dpitip-anteprima`, la fascia nera « ANTEPRIMA », che
   sta fuori dal contenitore apposta ed e' gia' namespacata.
   ========================================================================== */

.dpitip-w{max-width:880px;margin:0 auto;padding:28px 20px 60px;font:16px/1.55 inherit;color:inherit}
.dpitip-w h1{font-size:30px;margin:.2em 0 .1em}
.dpitip-w h2{font-size:20px;margin:1.6em 0 .4em}
.dpitip-w .sott{color:#646970;margin:0 0 26px}
.dpitip-w .card{border:1px solid #dcdcde;border-radius:12px;padding:16px 18px;margin:0 0 12px}
.dpitip-w .card a{color:#135e96;text-decoration:none;font-weight:600;font-size:18px}
.dpitip-w .da{float:right;font-weight:700}
.dpitip-w table{border-collapse:collapse;width:100%;max-width:520px}
.dpitip-w th,.dpitip-w td{text-align:left;padding:9px 12px;border-bottom:1px solid #f0f0f1}
.dpitip-w th{color:#646970;font-weight:600;font-size:13px}
.dpitip-w td.p{font-weight:700;text-align:right}
.dpitip-w td.q{font-variant-numeric:tabular-nums}
.dpitip-w .data{color:#646970;font-size:13px;margin-top:10px}
.dpitip-w .avviso{background:#fcf6ef;border-left:4px solid #b26200;padding:10px 14px;margin:0 0 20px;border-radius:0 6px 6px 0}

/* la fascia dell'anteprima sta FUORI dal recinto apposta: e' gia' un nome nostro */
.dpitip-anteprima{background:#1d2327;color:#fff;padding:9px 20px;font-size:13px}

/* le foto dei prodotti (#15): si vedono solo quando sono NOSTRE — vedi DPITIP_Immagini */
.dpitip-w .dpitip-foto{display:block;max-width:100%;height:auto;margin:0 0 16px;border:1px solid #dcdcde}
.dpitip-w .dpitip-mini{display:block;width:100%;height:132px;object-fit:cover;margin:0 0 10px;border:1px solid #dcdcde}

/* il configuratore */
.dpitip-w .cfg{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.dpitip-w .cfg label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#646970}
.dpitip-w .cfg select{font:15px/1.3 inherit;padding:8px 10px;border:1px solid #c3c4c7;border-radius:8px;background:#fff;min-width:190px}

/* il modulo di acquisto */
.dpitip-w .dpitip-compra{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0 0}
.dpitip-w .dpitip-compra select{font:15px/1.3 inherit;padding:8px 10px;border:1px solid #c3c4c7;border-radius:8px;background:#fff}
.dpitip-w .dpitip-btn{font:600 15px/1 inherit;padding:13px 22px;border:0;border-radius:8px;background:#135e96;color:#fff;cursor:pointer}

/* ── IL VOCABOLARIO DI /stampa/ — 15/09/2026 ───────────────────────────────
   Otto nomi ricavati CONTANDO le ripetizioni nel canvas « Tipografia DpiShop
   — /stampa/ »: 1.407 style= inline, di cui 1.051 sono copie di 148 blocchi.
   Questi otto ne coprono circa 280. Non sono inventati: erano gia' componenti
   senza nome.

   📌 Nessun markup li emette ancora: questo commit NON muove un pixel. Serve
      a dare dei ganci, perche' il tema puo' vestire solo le classi.

   🔴 I token del PUBBLICO hanno nomi ITALIANI (themes/dpi-style/.../tokens.css,
      100 definiti). Il vocabolario INGLESE — --dpi-ink, --dpi-line, --dpi-measure —
      vive in dpi-wp-marketing.css e vale SOLO in wp-admin. LEGGIMI-CHI-DISEGNA
      §4 documenta quello inglese senza dirlo: qui si usa l'italiano, e i ripieghi
      sono i valori che il disegno aveva scritto a mano.

   📐 Fuori scala di proposito, e dichiarato: 21px del titolo (la scala ha
      18/16/13/11) e i raggi 5/9px (la scala ha 8/12). Decisioni, non sviste.
   ⚠️ Nessun token di famiglia di carattere esiste nel set italiano: Barlow
      Condensed resta letterale finche' non ne nasce uno.
   ────────────────────────────────────────────────────────────────────────── */
.dpitip-w .dpitip-riga{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid var(--ast-global-color-7,#EAF0F7)}
.dpitip-w .dpitip-riga__nome{font-size:14.5px;font-weight:var(--dpi-peso-medio,600);color:var(--ast-global-color-2,#0B1F45)}
.dpitip-w .dpitip-riga__punti{flex-grow:1;border-bottom:1px dotted var(--ast-global-color-6,#DFE6EF);transform:translateY(-3px)}
.dpitip-w .dpitip-riga__prezzo{color:var(--ast-global-color-2,#0B1F45);font-variant-numeric:tabular-nums}
.dpitip-w .dpitip-riga__nota{font-size:var(--dpi-testo-s,13px);color:var(--ast-global-color-3,#63708A);white-space:nowrap}
.dpitip-w .dpitip-chip{padding:3px 9px;background:var(--ast-global-color-5,#F5F8FC);border-radius:5px}
.dpitip-w .dpitip-tassello{border:1px solid var(--ast-global-color-6,#DFE6EF);border-radius:9px;background:var(--ast-global-color-5,#F5F8FC);padding:10px 10px 8px;text-align:center}
.dpitip-w .dpitip-cod{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--ast-global-color-3,#63708A);margin-top:4px}
.dpitip-w .dpitip-piede{padding:13px 18px;font-size:14.5px;color:var(--ast-global-color-3,#63708A);border-top:1px solid var(--ast-global-color-7,#EAF0F7)}
.dpitip-w .dpitip-titolo{font-family:'Barlow Condensed',Barlow,sans-serif;font-size:21px;font-weight:var(--dpi-peso-forte,700);color:var(--ast-global-color-2,#0B1F45)}
.dpitip-w .dpitip-barra{flex-grow:1;height:4px}
.dpitip-w .dpitip-barra--giallo{background:#FFD400}
.dpitip-w .dpitip-barra--magenta{background:#EC008C}

/* LE DUE CELLE CHE ERANO INLINE — 15/09/2026.
   `td.consegna` stava scritta DUE VOLTE, identica, su due percorsi diversi:
   righe_scaletta() r.468 la stampa dal SERVER al primo caricamento, e il template
   JavaScript r.382 la ristampa dopo OGNI cambio di menu. Due copie dello stesso
   letterale: bastava che una cambiasse e la colonna si muoveva sotto le dita del
   cliente. Una classe sola le rende impossibili da far divergere. */
.dpitip-w th.num{text-align:right}
.dpitip-w td.consegna{text-align:right;color:var(--ast-global-color-3,#63708A)}

/* PERCHE' I COLORI VENGONO DA ASTRA E NON DAI --dpi-* — 15/09/2026.

   Misurato: sul vivo --ast-global-color-2 = #0B1F45, -5 = #F5F8FC, -6 = #DFE6EF,
   -7 = #EAF0F7. Sono ESATTAMENTE i colori del canvas di /stampa/. E tokens.css e'
   la stessa tavolozza con nomi italiani: --dpi-blu-900 = ast-2, --dpi-azzurro-025
   = ast-5, --dpi-azzurro-200 = ast-6, --dpi-azzurro-600 = ast-3.

   Non sono due tavolozze: sono DUE VOCABOLARI SOPRA UNA TAVOLOZZA SOLA. Ma non sono
   intercambiabili, e la differenza e' una sola: tokens.css scrive gli esadecimali a
   MANO. Cambiando la tavolozza dal Customizer, Astra si muove e i --dpi-* restano
   fermi. Legare i colori ai --dpi-* li CONGELA.

   ⇒ Colori da --ast-global-color-*, cosi' seguono chi gestisce il negozio. Spazi,
     raggi, pesi e corpi restano --dpi-*: Astra quelli non li ha. Due sorgenti, nessuna
     sovrapposizione.
   📌 E' l'intento scritto in due posti diversi: il canvas dice « cosi' se cambiate la
     tavolozza del tema cambia anche la tipografia », e questo foglio il 13/09 e' stato
     spostato in <head> proprio perche' « l'ultima parola deve restare a chi gestisce ».

   COLLASSATI sugli otto, come dice il canvas (« Otto colori, uno solo per agire »):
     #5E6B82 -> ast-3 (#63708A)   scarto 5-5-8
     #F2F6FB -> ast-5 (#F5F8FC)   scarto 3-2-1
     #C3CCDA -> ast-6 (#DFE6EF)   il filetto puntinato schiarisce
     #47536B -> ast-3 (#63708A)   il piu' lontano, 28-29-31: se stona, e' questo
   Nessuno dei quattro si vede oggi: nessun markup emette ancora queste classi.

   FUORI dagli otto di proposito: il giallo #FFD400 e il magenta #EC008C, che sono
   accenti di marca e non colori di interfaccia. */

/* ── 0.12.0 · 27/09/2026 — IL DISEGNO DELL'ARTIFACT « Tipografia DpiShop » (13/09), PORTATO SUL VIVO ──
   Prima di oggi nessun markup emetteva queste classi: il vivo era ancora « 24 card identiche ».
   Colori da --ast-global-color-* (seguono il Customizer, vedi sopra perche'); il magenta del
   prezzo resta l'accento di marca #EC008C gia' dichiarato qui sopra.
   Tutto dentro .dpitip-w, come sempre.                                                        */

.dpitip-w{max-width:1100px}
.dpitip-w .dpitip-conta{font-size:13px;color:var(--ast-global-color-3,#63708A);margin:-14px 0 22px}
.dpitip-w .dpitip-briciole{font-size:13px;color:var(--ast-global-color-3,#63708A);margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px}
.dpitip-w .dpitip-briciole a{color:inherit;text-decoration:none;border-bottom:1px solid var(--ast-global-color-6,#DFE6EF)}
.dpitip-w .dpitip-briciole a:hover{color:var(--ast-global-color-0,#135e96)}

/* il vetro: il posto della foto. Tiene la proporzione anche vuoto, cosi' quando le foto
   arrivano la pagina non si sposta di una riga. */
.dpitip-w .dpitip-vetro{display:block;aspect-ratio:4/3;background:var(--ast-global-color-5,#F5F8FC);overflow:hidden;border-bottom:1px solid var(--ast-global-color-7,#EAF0F7)}
.dpitip-w .dpitip-vetro img{display:block;width:100%;height:100%;object-fit:cover;margin:0;border:0}

/* indice: i reparti che pesano */
.dpitip-w .dpitip-reparti{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 34px}
.dpitip-w .dpitip-reparto{display:flex;flex-direction:column;border:1px solid var(--ast-global-color-6,#DFE6EF);border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.dpitip-w .dpitip-reparto:hover{border-color:var(--ast-global-color-0,#135e96);box-shadow:0 4px 14px rgba(11,31,69,.08)}
.dpitip-w .dpitip-reparto__corpo{display:grid;gap:4px;padding:14px 16px 16px}
.dpitip-w .dpitip-reparto__nome{font-size:18px;font-weight:700;line-height:1.2;color:var(--ast-global-color-2,#0B1F45)}
.dpitip-w .dpitip-reparto__u{font-size:13px;color:var(--ast-global-color-3,#63708A)}
.dpitip-w .dpitip-reparto__u b,.dpitip-w .dpitip-resto__da{color:#EC008C;font-weight:700;font-variant-numeric:tabular-nums}

/* indice: tutto il resto */
.dpitip-w .dpitip-resto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--ast-global-color-6,#DFE6EF)}
.dpitip-w .dpitip-resto a{display:flex;align-items:baseline;gap:10px;padding:11px 2px;border-bottom:1px solid var(--ast-global-color-7,#EAF0F7);text-decoration:none;color:var(--ast-global-color-2,#0B1F45);font-size:15px}
.dpitip-w .dpitip-resto a:hover .dpitip-resto__nome{color:var(--ast-global-color-0,#135e96)}
.dpitip-w .dpitip-resto__nome{flex:1;font-weight:600}
.dpitip-w .dpitip-resto__n{font-size:12px;color:var(--ast-global-color-3,#63708A);white-space:nowrap}
.dpitip-w .dpitip-resto__da{font-size:13px;white-space:nowrap}

/* categoria: le tessere */
.dpitip-w .dpitip-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dpitip-w .dpitip-tessera{display:flex;flex-direction:column;border:1px solid var(--ast-global-color-6,#DFE6EF);border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.dpitip-w .dpitip-tessera:hover{border-color:var(--ast-global-color-0,#135e96);box-shadow:0 4px 14px rgba(11,31,69,.08)}
.dpitip-w .dpitip-tessera__corpo{display:grid;gap:6px;padding:14px 16px 16px}
.dpitip-w .dpitip-tessera__nome{font-size:16px;font-weight:600;line-height:1.28;color:var(--ast-global-color-2,#0B1F45)}
.dpitip-w .dpitip-da{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.dpitip-w .dpitip-da small{font-size:12px;color:var(--ast-global-color-3,#63708A);text-transform:uppercase;letter-spacing:.06em}
.dpitip-w .dpitip-da b{font-size:20px;color:#EC008C}
.dpitip-w .dpitip-tessera .data{margin:0;font-size:12px}

/* scheda prodotto: due colonne, il modulo d'acquisto resta a vista */
.dpitip-w .dpitip-scheda{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
.dpitip-w .dpitip-figura{margin:0 0 18px;border:1px solid var(--ast-global-color-6,#DFE6EF);border-radius:12px;overflow:hidden;background:var(--ast-global-color-5,#F5F8FC)}
.dpitip-w .dpitip-figura .dpitip-foto{display:block;width:100%;height:auto;margin:0;border:0}
.dpitip-w .dpitip-testo{color:var(--ast-global-color-3,#63708A);font-size:15.5px;line-height:1.6;max-width:66ch;margin:0 0 12px}
.dpitip-w .dpitip-pregi{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.dpitip-w .dpitip-pregi li{position:relative;padding-left:18px;font-size:14.5px;color:var(--ast-global-color-2,#0B1F45)}
.dpitip-w .dpitip-pregi li::before{content:"—";position:absolute;left:0;color:#EC008C}
.dpitip-w .dpitip-scroll{overflow-x:auto}
.dpitip-w #dpitip-scaletta{max-width:none}
.dpitip-w #dpitip-scaletta caption{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ast-global-color-3,#63708A);padding:0 0 8px}
.dpitip-w #dpitip-scaletta td.p{color:#EC008C}
.dpitip-w #dpitip-scaletta td.unit{text-align:right;font-variant-numeric:tabular-nums;color:var(--ast-global-color-2,#0B1F45)}
.dpitip-w #dpitip-scaletta tbody tr:hover td{background:var(--ast-global-color-5,#F5F8FC)}
.dpitip-w .dpitip-scheda__lato{position:sticky;top:24px}
.dpitip-w .dpitip-scheda__lato .dpitip-compra{display:grid;gap:12px;margin:0;padding:18px;border:1px solid var(--ast-global-color-6,#DFE6EF);border-radius:12px;background:var(--ast-global-color-5,#F5F8FC)}
.dpitip-w .dpitip-compra h3{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ast-global-color-3,#63708A)}
.dpitip-w .dpitip-compra label{display:grid;gap:5px;font-size:13px;color:var(--ast-global-color-3,#63708A)}
.dpitip-w .dpitip-compra select{width:100%}
.dpitip-w .dpitip-compra .dpitip-btn{width:100%}
.dpitip-w .dpitip-sotto{margin:0;font-size:12px;color:var(--ast-global-color-3,#63708A)}

/* la sagoma: finche' le foto non sono pubblicabili (vedi src() nel PHP, marchio del fornitore),
   il vetro disegna il FORMATO vero del prodotto, in proporzione. Un foglio, non un buco. */
.dpitip-w .dpitip-vetro{display:grid;place-items:center}
.dpitip-w .dpitip-sagoma{display:grid;place-items:center;background:#fff;border:1px solid var(--ast-global-color-6,#DFE6EF);border-radius:3px;box-shadow:0 6px 18px rgba(11,31,69,.10),0 1px 2px rgba(11,31,69,.08);font-size:11px;letter-spacing:.06em;color:var(--ast-global-color-3,#63708A);font-variant-numeric:tabular-nums;white-space:nowrap;position:relative;overflow:hidden}
.dpitip-w .dpitip-sagoma::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#00AEEF 0 33%,#EC008C 33% 66%,#FFD400 66%)}
.dpitip-w .dpitip-figura.dpitip-vetro{aspect-ratio:2/1;border-bottom:1px solid var(--ast-global-color-6,#DFE6EF)}
.dpitip-w .dpitip-figura .dpitip-sagoma{transform:scale(.6);font-size:15px}

/* ── IL CONFIGURATORE VESTITO — 27/09/2026 (vedi script_vestito() nel PHP) ──────────────
   Ale: « ci sono menu a tendina per tutte le parti, fa schifo ». Pastiglie dove le scelte sono
   poche, righe della scaletta cliccabili, un riquadro che riassume. I <select> restano, nascosti
   quando c'e' la pastiglia: sono loro che parlano col server. */
.dpitip-w .cfg{display:grid;gap:18px;margin:0 0 24px}
.dpitip-w .cfg label{display:grid;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ast-global-color-3,#63708A)}
.dpitip-w .cfg select{width:100%;max-width:520px;min-width:0;text-transform:none;letter-spacing:0;color:var(--ast-global-color-2,#0B1F45)}
.dpitip-w .cfg select[hidden]{display:none!important}
.dpitip-w .cfg__past{display:flex;flex-wrap:wrap;gap:8px;text-transform:none;letter-spacing:0}
.dpitip-w .cfg__past button{font:500 14px/1.25 inherit;padding:9px 14px;border:1px solid var(--ast-global-color-6,#DFE6EF);border-radius:8px;background:#fff;color:var(--ast-global-color-2,#0B1F45);cursor:pointer;text-align:left;transition:border-color .12s,background .12s}
.dpitip-w .cfg__past button:hover{border-color:var(--ast-global-color-0,#135e96)}
.dpitip-w .cfg__past button[aria-pressed="true"]{background:var(--ast-global-color-2,#0B1F45);border-color:var(--ast-global-color-2,#0B1F45);color:#fff}
.dpitip-w .cfg__past button:focus-visible{outline:2px solid var(--ast-global-color-0,#135e96);outline-offset:2px}
.dpitip-w #dpitip-scaletta tbody tr[data-qty]{cursor:pointer}
.dpitip-w #dpitip-scaletta tbody tr.scelta td{background:var(--ast-global-color-5,#F5F8FC);font-weight:700}
.dpitip-w #dpitip-scaletta tbody tr.scelta td.q{box-shadow:inset 3px 0 0 #EC008C}
.dpitip-w .dpitip-riep{display:grid}
.dpitip-w .dpitip-riga-spec{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--ast-global-color-6,#DFE6EF);font-size:13px}
.dpitip-w .dpitip-riga-spec span:first-child{color:var(--ast-global-color-3,#63708A)}
.dpitip-w .dpitip-riga-spec span:last-child{text-align:right;color:var(--ast-global-color-2,#0B1F45);font-weight:600}
.dpitip-w .dpitip-totale{font-size:34px;line-height:1;font-weight:700;color:#EC008C;font-variant-numeric:tabular-nums;margin-top:6px}
.dpitip-w .dpitip-compra label{text-transform:none}
.dpitip-w .dpitip-file{display:grid;gap:6px;padding:12px;border:1px dashed var(--ast-global-color-6,#DFE6EF);border-radius:8px;background:#fff;font-size:13px;font-weight:600;color:var(--ast-global-color-2,#0B1F45)}
.dpitip-w .dpitip-file input[type=file]{font-size:13px;max-width:100%}
.dpitip-w .dpitip-figura.dpitip-vetro{aspect-ratio:3/1}
.dpitip-w .dpitip-figura .dpitip-sagoma{transform:scale(.5)}
/* l'ordine di lettura: prima si configura, poi si legge. La descrizione del fornitore e' lunga
   (1.391 caratteri sui Biglietti classici) e prima spingeva il configuratore fuori dallo schermo.
   Solo ordine visivo: nel sorgente il testo resta prima, per chi legge la pagina senza stili. */
.dpitip-w .dpitip-scheda__main{display:flex;flex-direction:column}
.dpitip-w .dpitip-scheda__main > .dpitip-testo,.dpitip-w .dpitip-scheda__main > .dpitip-pregi{order:2}
.dpitip-w .dpitip-scheda__main > .dpitip-testo{margin-top:28px;padding-top:20px;border-top:1px solid var(--ast-global-color-6,#DFE6EF)}
.dpitip-w .dpitip-scheda__main > h2:first-of-type{margin-top:4px}

@media (max-width:900px){
  .dpitip-w .dpitip-reparti{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dpitip-w .dpitip-resto{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dpitip-w .dpitip-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dpitip-w .dpitip-scheda{grid-template-columns:minmax(0,1fr)}
  .dpitip-w .dpitip-scheda__lato{position:static}
}
@media (max-width:560px){
  .dpitip-w{padding:20px 16px 40px}
  .dpitip-w .dpitip-reparti,.dpitip-w .dpitip-resto,.dpitip-w .dpitip-griglia{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.dpitip-w .dpitip-reparto,.dpitip-w .dpitip-tessera{transition:none}}

/* ══ LA SCHEDA DELLA TELA — 28/09/2026 ════════════════════════════════════════════════
   Dalla tela « Tipografia DpiShop — /stampa/ » (Prodotto.dc.html), valori copiati dal suo
   sorgente: colonna della materia 560px a sinistra, colonna della scelta a destra, passi in una
   carta, scaletta coi pallini, barra blu. I colori della tela sono quelli di Astra (navy
   #0B1F45 = ast-2, #2364A4 = ast-0/1, #5E6B82 ~ ast-3) e il rosso d'azione #E2001A del ponte.
   🔴 La larghezza: il foglio ponte nel Customizer stringe la scheda a 860px con
      `.dpitip-w:has(#dpitip-scaletta)`. Con 860 le due colonne della tela non ci stanno (560 +
      56 + la scelta). Qui si riporta a 1180 — la misura della tela — con `body` davanti, che
      basta a vincere quella regola senza !important. Se Ale la vuole piu' stretta, la cambia
      nel Customizer scrivendo `body .dpitip-w:has(.dpitip-sc)`. */
body .dpitip-w:has(.dpitip-sc){max-width:1180px}
.dpitip-w .dpitip-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dpitip-w .dpitip-sc{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:56px;align-items:start;color:#47536B}
.dpitip-w .dpitip-sc__scelta{grid-column:2;grid-row:1;min-width:0}
.dpitip-w .dpitip-sc__materia{grid-column:1;grid-row:1;min-width:0;position:sticky;top:24px}

/* testa */
.dpitip-w .dpitip-occhiello{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#E2001A;margin:0 0 10px}
.dpitip-w .dpitip-occhiello--muto{font-size:11.5px;letter-spacing:.12em;color:#5E6B82;margin:0}
.dpitip-w .dpitip-sc h1{font-family:'Barlow Condensed',Barlow,sans-serif;font-size:54px;line-height:1;font-weight:700;color:#0B1F45;margin:0 0 14px;letter-spacing:0}
.dpitip-w .dpitip-attacco{font-size:17px;line-height:1.5;color:#5E6B82;margin:0 0 30px;text-wrap:pretty}

/* la carta dei passi */
.dpitip-w .dpitip-carta-cfg,.dpitip-w .dpitip-carta-q,.dpitip-w .dpitip-carta-file{background:#fff;border:1px solid #DFE6EF;border-radius:14px;box-shadow:0 2px 10px rgba(11,31,69,.04)}
.dpitip-w .dpitip-carta-cfg{padding:26px 26px 28px}
.dpitip-w .dpitip-sc .cfg{display:block;margin:0}
.dpitip-w .dpitip-passo + .dpitip-passo{margin-top:30px}
.dpitip-w .dpitip-passo--muto{display:none}
.dpitip-w .dpitip-passo__testa{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.dpitip-w .dpitip-passo__n{width:24px;height:24px;border-radius:999px;background:#0B1F45;color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dpitip-w .dpitip-passo__tit{font-size:18px;font-weight:600;color:#0B1F45}
.dpitip-w .dpitip-passo__nota{margin-left:auto;font-size:13px;color:#5E6B82;text-align:right}
.dpitip-w .dpitip-sc .cfg label{display:block;text-transform:none;letter-spacing:0;font-size:inherit;color:inherit}
.dpitip-w .dpitip-sc .cfg label[hidden]{display:none!important}
.dpitip-w .dpitip-sc .cfg select{width:100%;max-width:none;font:500 15px/1.3 Barlow,inherit;padding:12px 14px;border:1.5px solid #0B1F45;border-radius:10px;background:#fff;color:#0B1F45}
.dpitip-w .dpitip-vesti button{font-family:inherit;cursor:pointer;background:#fff;transition:border-color .12s,background .12s,color .12s}
.dpitip-w .dpitip-vesti button:focus-visible{outline:2px solid #2364A4;outline-offset:2px}

/* 1 · formato: il foglio disegnato in proporzione */
.dpitip-w .dpitip-tessere-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.dpitip-w .dpitip-tessere-f button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;border:1px solid #DFE6EF;border-radius:11px;padding:14px 9px 13px}
.dpitip-w .dpitip-tessera-f__vano{height:72px;display:flex;align-items:center}
.dpitip-w .dpitip-tessera-f__foglio{display:block;background:#fff;border:1.5px solid #B7C3D4;border-radius:2px}
.dpitip-w .dpitip-tessera-f__txt{font-size:12.5px;font-weight:500;color:#5E6B82;white-space:nowrap}
.dpitip-w .dpitip-tessere-f button:hover{border-color:#B7C3D4}
.dpitip-w .dpitip-tessere-f button[aria-pressed="true"]{border:2px solid #0B1F45;padding:13px 8px 12px}
.dpitip-w .dpitip-tessere-f button[aria-pressed="true"] .dpitip-tessera-f__foglio{border-color:#0B1F45;box-shadow:0 3px 8px rgba(11,31,69,.14)}
.dpitip-w .dpitip-tessere-f button[aria-pressed="true"] .dpitip-tessera-f__txt{font-weight:600;color:#0B1F45}

/* 2 · carta: il menu vestito da riquadro, e le grammature sotto */
.dpitip-w .dpitip-menu-carta{position:relative}
.dpitip-w .dpitip-menu-carta::before{content:"";position:absolute;left:16px;top:50%;width:38px;height:38px;margin-top:-21px;border-radius:5px;background:#F4F2EE;box-shadow:0 3px 0 0 #D9D4C9;pointer-events:none}
.dpitip-w .dpitip-sc .cfg .dpitip-menu-carta select{-webkit-appearance:none;appearance:none;padding:20px 44px 20px 68px;font-size:16.5px;font-weight:600;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235E6B82' stroke-width='2.4'%3E%3Cpath d='M5 9l7 7 7-7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;cursor:pointer}
.dpitip-w .dpitip-gruppi-carta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.dpitip-w .dpitip-gruppi-carta button{font-size:12.5px;padding:5px 11px;border:0;border-radius:999px;background:#F2F6FB;color:#47536B}
.dpitip-w .dpitip-gruppi-carta button:hover{background:#E4EBF4}
.dpitip-w .dpitip-gruppi-carta button.verde{background:#E4F2E6;color:#177430;font-weight:600}
.dpitip-w .dpitip-gruppi-carta button[aria-pressed="true"]{background:#0B1F45;color:#fff}
.dpitip-w .dpitip-gruppi-carta button.verde[aria-pressed="true"]{background:#177430;color:#fff}

/* 3 · stampa: tre tessere con l'icona */
.dpitip-w .dpitip-tessere-s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dpitip-w .dpitip-tessere-s button{display:block;text-align:left;border:1px solid #DFE6EF;border-radius:11px;padding:16px 17px;color:#5E6B82}
.dpitip-w .dpitip-tessere-s button svg{display:block}
.dpitip-w .dpitip-tessera-s__tit{display:block;font-size:15px;font-weight:600;color:#0B1F45;margin-top:11px;line-height:1.25}
.dpitip-w .dpitip-tessera-s__sotto{display:block;font-size:12.5px;color:#5E6B82;margin-top:2px}
.dpitip-w .dpitip-tessere-s button:hover{border-color:#B7C3D4}
.dpitip-w .dpitip-tessere-s button[aria-pressed="true"]{border:2px solid #0B1F45;padding:15px 16px;color:#0B1F45}

/* consegna (e ogni altra scelta corta): pastiglie */
.dpitip-w .dpitip-pastiglie{display:flex;flex-wrap:wrap;gap:8px}
.dpitip-w .dpitip-pastiglie button{font-size:14px;font-weight:500;padding:9px 14px;border:1px solid #DFE6EF;border-radius:8px;color:#0B1F45}
.dpitip-w .dpitip-pastiglie button[aria-pressed="true"]{background:#0B1F45;border-color:#0B1F45;color:#fff}

/* 4 · la scaletta coi pallini */
.dpitip-w .dpitip-carta-q{margin-top:18px;overflow:hidden}
.dpitip-w .dpitip-carta-q > .dpitip-passo__testa{padding:26px 26px 16px;margin:0}
.dpitip-w .dpitip-sc #dpitip-scaletta{width:100%;max-width:none;border-collapse:collapse;margin:0;font-variant-numeric:tabular-nums}
.dpitip-w .dpitip-sc #dpitip-scaletta th{padding:0 20px 10px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5E6B82;border:0;background:none;text-align:left}
.dpitip-w .dpitip-sc #dpitip-scaletta th.num{text-align:right}
.dpitip-w .dpitip-sc #dpitip-scaletta th:first-child{padding-left:50px}
.dpitip-w .dpitip-sc #dpitip-scaletta tbody tr{cursor:pointer}
.dpitip-w .dpitip-sc #dpitip-scaletta td{padding:13px 20px;border:0;border-top:1px solid #EAF0F7;background:#fff}
.dpitip-w .dpitip-sc #dpitip-scaletta tbody tr:first-child td{border-top-color:#DFE6EF}
.dpitip-w .dpitip-sc #dpitip-scaletta td.q{position:relative;padding-left:50px;font-size:15.5px;color:#0B1F45;box-shadow:none}
.dpitip-w .dpitip-sc #dpitip-scaletta td.q::before{content:"";position:absolute;left:20px;top:50%;width:13px;height:13px;margin-top:-8.5px;border-radius:999px;border:1.9px solid #C3CCDA;background:#fff}
.dpitip-w .dpitip-sc #dpitip-scaletta td.p{text-align:right;font-size:16px;font-weight:600;color:#0B1F45}
.dpitip-w .dpitip-sc #dpitip-scaletta td.unit{text-align:right;font-size:14px;color:#5E6B82}
.dpitip-w .dpitip-sc #dpitip-scaletta td.consegna{text-align:right;font-size:13.5px;color:#5E6B82}
.dpitip-w .dpitip-sc #dpitip-scaletta tbody tr:hover td{background:#F7F9FC}
.dpitip-w .dpitip-sc #dpitip-scaletta tr.scelta td{background:#fff;font-weight:inherit;padding-top:15px;padding-bottom:15px}
.dpitip-w .dpitip-sc #dpitip-scaletta tr.scelta td:first-child{box-shadow:inset 3px 0 0 #E2001A}
.dpitip-w .dpitip-sc #dpitip-scaletta tr.scelta td.q{font-size:16.5px;font-weight:700}
.dpitip-w .dpitip-sc #dpitip-scaletta tr.scelta td.q::before{border-color:#0B1F45;background:radial-gradient(circle,#E2001A 0 3.6px,#fff 4.4px)}
.dpitip-w .dpitip-sc #dpitip-scaletta tr.scelta td.p{font-size:18px;font-weight:700}
.dpitip-w .dpitip-sc #dpitip-scaletta tr.scelta td.unit{font-size:15px;font-weight:600;color:#2364A4}
.dpitip-w .dpitip-carta-q .data{margin:0;padding:15px 26px 20px;font-size:13px;color:#5E6B82;border-top:1px solid #EAF0F7}

/* 5 · il file */
.dpitip-w .dpitip-sc .dpitip-compra{display:block;margin:0;padding:0;background:none;border:0}
.dpitip-w .dpitip-carta-file{margin-top:18px;padding:22px 26px}
.dpitip-w .dpitip-carta-file > .dpitip-passo__testa{margin-bottom:14px}
.dpitip-w .dpitip-sc .dpitip-file{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border:1.5px dashed #C3CCDA;border-radius:10px;background:#F7F9FC;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400}
.dpitip-w .dpitip-sc .dpitip-file:hover{border-color:#2364A4}
.dpitip-w .dpitip-sc .dpitip-file input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dpitip-w .dpitip-file__cta{font-size:14.5px;font-weight:600;color:#0B1F45;background:#fff;border:1px solid #DFE6EF;border-radius:8px;padding:8px 14px}
.dpitip-w .dpitip-file__nome{font-size:13px;color:#5E6B82}
.dpitip-w .dpitip-sc .dpitip-file.pieno{border-style:solid;border-color:#177430;background:#F1F8F2}
.dpitip-w .dpitip-sc .dpitip-file.pieno .dpitip-file__nome{color:#177430;font-weight:600}

/* la barra d'acquisto */
.dpitip-w .dpitip-barra-acquisto{display:flex;align-items:center;gap:26px;flex-wrap:wrap;background:#0B1F45;border-radius:14px;padding:22px 26px;margin-top:18px;box-shadow:0 14px 34px rgba(11,31,69,.22)}
.dpitip-w .dpitip-barra-acquisto__conto{min-width:0}
.dpitip-w .dpitip-barra-acquisto__riep{font-size:13px;color:#93A6C4}
.dpitip-w .dpitip-barra-acquisto__cifra{display:flex;align-items:baseline;gap:12px;margin-top:4px}
.dpitip-w .dpitip-sc .dpitip-totale{font-family:'Barlow Condensed',Barlow,sans-serif;font-size:44px;font-weight:700;color:#fff;line-height:1;font-variant-numeric:tabular-nums;margin:0}
.dpitip-w .dpitip-barra-acquisto__iva{font-size:14px;line-height:1.3;color:#93A6C4}
.dpitip-w .dpitip-barra-acquisto__azione{margin-left:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.dpitip-w .dpitip-barra-acquisto__cons{text-align:right;font-size:13px;color:#93A6C4;line-height:1.4}
.dpitip-w .dpitip-barra-acquisto__cons strong{color:#fff;font-size:15px}
.dpitip-w .dpitip-sc .dpitip-btn{display:flex;align-items:center;gap:10px;width:auto;background:#E2001A;color:#fff;font:600 16.5px/1 Barlow,inherit;padding:17px 32px;border:0;border-radius:10px;white-space:nowrap;cursor:pointer}
.dpitip-w .dpitip-sc .dpitip-btn:hover{background:#C40017}

/* ═══ colonna della materia ═══ */
.dpitip-w .dpitip-foglio{margin:0;background:#F2F6FB;border:1px solid #E4EBF4;border-radius:14px;padding:40px 36px 30px}
.dpitip-w .dpitip-foglio[hidden]{display:none}
.dpitip-w .dpitip-foglio svg{display:block;font-family:Barlow,sans-serif}
.dpitip-w .dpitip-foglio figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px;padding-top:18px;border-top:1px solid #E4EBF4;font-size:13px;color:#5E6B82}
.dpitip-w .dpitip-foglio figcaption span{display:flex;align-items:center;gap:8px}
.dpitip-w .dpitip-foglio figcaption span::before{content:"";width:20px;border-top:1.7px solid #0B1F45}
.dpitip-w .dpitip-foglio .dpitip-foglio__vivo::before{border-top:1.5px dashed #E2001A}
.dpitip-w .dpitip-cartascelta{display:grid;grid-template-columns:148px minmax(0,1fr);gap:22px;align-items:center;margin-top:20px;background:#fff;border:1px solid #DFE6EF;border-radius:14px;padding:22px 24px}
.dpitip-w .dpitip-cartascelta__campione{display:block;height:92px;border-radius:4px 4px 3px 3px;background:#F4F2EE;box-shadow:0 5px 0 0 #D9D4C9,0 10px 20px rgba(11,31,69,.10)}
.dpitip-w .dpitip-cartascelta__nome{font-size:19px;font-weight:600;color:#0B1F45;margin:4px 0 0;line-height:1.3}
.dpitip-w .dpitip-requisiti{margin-top:34px}
.dpitip-w .dpitip-requisiti h2,.dpitip-w .dpitip-descr h2{font-family:'Barlow Condensed',Barlow,sans-serif;font-size:26px;font-weight:600;color:#0B1F45;margin:0 0 16px}
.dpitip-w .dpitip-requisiti__righe{display:flex;flex-direction:column;gap:1px;background:#EAF0F7;border:1px solid #DFE6EF;border-radius:12px;overflow:hidden}
.dpitip-w .dpitip-requisiti__righe > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;background:#fff;padding:14px 20px}
.dpitip-w .dpitip-requisiti__righe > div > span:first-child{font-size:14px;color:#5E6B82}
.dpitip-w .dpitip-requisiti__righe > div > span:last-child{font-size:14.5px;color:#0B1F45}
.dpitip-w .dpitip-descr{margin-top:34px}
.dpitip-w .dpitip-descr .dpitip-testo{margin:0;font-size:15px}

/* telefono e tablet: una colonna sola, nell'ordine della tela mobile —
   titolo, disegno, configura, scaletta, cosa serve, file e barra, poi il resto */
@media (max-width:1000px){
  .dpitip-w .dpitip-sc{display:flex;flex-direction:column;gap:0}
  .dpitip-w .dpitip-sc__scelta,.dpitip-w .dpitip-sc__materia{display:contents}
  .dpitip-w .dpitip-sc__testa{order:1}
  .dpitip-w .dpitip-foglio{order:2;margin-bottom:18px;padding:24px 18px 18px}
  .dpitip-w .dpitip-carta-cfg{order:3}
  .dpitip-w .dpitip-carta-q{order:4}
  .dpitip-w .dpitip-requisiti{order:5;margin-top:26px}
  .dpitip-w .dpitip-sc .dpitip-compra{order:6;position:sticky;bottom:0;z-index:5;padding-bottom:10px}
  .dpitip-w .dpitip-cartascelta{order:7}
  .dpitip-w .dpitip-descr{order:8}
  .dpitip-w .dpitip-sc h1{font-size:40px}
}
@media (max-width:560px){
  .dpitip-w .dpitip-carta-cfg{padding:20px 16px 22px}
  .dpitip-w .dpitip-tessere-f{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .dpitip-w .dpitip-tessere-s{grid-template-columns:minmax(0,1fr)}
  .dpitip-w .dpitip-tessere-s button{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:center}
  .dpitip-w .dpitip-tessere-s button svg{grid-row:span 2}
  .dpitip-w .dpitip-tessera-s__tit{margin-top:0}
  .dpitip-w .dpitip-sc #dpitip-scaletta th,.dpitip-w .dpitip-sc #dpitip-scaletta td{padding-left:12px;padding-right:12px}
  .dpitip-w .dpitip-sc #dpitip-scaletta td.q,.dpitip-w .dpitip-sc #dpitip-scaletta th:first-child{padding-left:38px}
  .dpitip-w .dpitip-sc #dpitip-scaletta td.q::before{left:12px}
  .dpitip-w .dpitip-sc #dpitip-scaletta td.consegna,.dpitip-w .dpitip-sc #dpitip-scaletta th:last-child{display:none}
  .dpitip-w .dpitip-barra-acquisto{padding:16px 18px;gap:14px}
  .dpitip-w .dpitip-barra-acquisto__azione{margin-left:0;width:100%;justify-content:space-between}
  .dpitip-w .dpitip-sc .dpitip-totale{font-size:36px}
  .dpitip-w .dpitip-cartascelta{grid-template-columns:72px minmax(0,1fr)}
  .dpitip-w .dpitip-cartascelta__campione{height:48px}
  .dpitip-w .dpitip-requisiti__righe > div{grid-template-columns:minmax(0,1fr)}
}

/* ── collaudo sul demo, 28/09/2026 — due cose misurate sulla pagina resa ──
   1. LA LARGHEZZA. Il foglio ponte nel Customizer ha `.dpitip-w:has(#dpitip-scaletta){max-width:860px}`,
      che pesa 1-1-0 (dentro :has conta l'id). `body .dpitip-w:has(.dpitip-sc)` qui sopra pesa 0-2-1 e
      perdeva: la scheda restava a 860 e la colonna della scelta a 204px. Con un id e `body`: 1-1-1.
      Se Ale la vuole piu' stretta, la cambia nel Customizer con questo stesso selettore.
   2. LA SCATOLA NELLA SCATOLA. Il foglio ponte veste `.dpitip-w .cfg` con bordo, fondo e 20px:
      dentro la carta dei passi disegnava una seconda cornice. */
body .dpitip-w:has(#dpitip-foglio){max-width:1180px}
.dpitip-w .dpitip-carta-cfg .cfg{border:0;border-radius:0;padding:0;background:none;box-shadow:none}
/* 3. LA CARTA TAGLIATA A META'. Il tema da' ai <select> un'altezza fissa (52px, misurata): con i 20px
      sopra e sotto della tela il nome della carta restava visibile per meta'. */
.dpitip-w .dpitip-sc .cfg .dpitip-menu-carta select{height:auto;min-height:0;line-height:1.3}
