/* ❄️ VESTE T2 DEL SITO PUBBLICO («Scheda prodotto», colori Google) — nata con T2-H (home), 24/09/2026.
   Solo var(--g-*) da static/css/g_variabili.css: nessun esadecimale qui (test_t2_esadecimali.py).
   Misure, raggi e spaziature dalle tavole T2-H_home_pc.html (1280) e T2-H_home_telefono.html (390).
   ⚠ Testo piccolo in blu: --g-blu-scuro, non --g-blu. Il blu #1a73e8 su fondo chiaro sta sotto 4,5:1 (misurato 4,28 su
   --g-fondo, 3,93 su --g-blu-chiaro): va bene per bottoni pieni e titoli grandi, non per etichette da 11-13 px.
   ⚠ D-1 (T2-1, CRISTALLO-64, 25/09/2026): OGNI regola e' confinata alla veste T2. `:where(.t2)` davanti a un selettore lo
   limita alle pagine con body.t2 SENZA aggiungere specificita' (zero): la cascata della home resta quella di prima, e il
   foglio si puo' caricare in qualunque pagina senza toccarne il resto. Le due regole su <html> (box-sizing non serve lassu')
   passano a html:has(> body.t2), con gli stessi valori. Prima: `*` e `html` nudi, globali. */

:where(.t2), :where(.t2) *, :where(.t2) *::before, :where(.t2) *::after { box-sizing: border-box; }
html:has(> body.t2) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(> body.t2) { scroll-behavior: auto; } }
body.t2 { margin: 0; font-family: var(--g-font); background: var(--g-fondo); color: var(--g-testo); line-height: 1.5; }
.t2 a { color: var(--g-blu-scuro); }
.t2 h1, .t2 h2, .t2 h3 { font-family: var(--g-font); letter-spacing: -0.01em; }
.t2 :focus-visible { outline: 3px solid var(--g-blu); outline-offset: 2px; border-radius: 6px; }
:where(.t2) .t2-salta { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 10px 14px; background: var(--g-bianco); border-radius: var(--g-raggio-12); }
:where(.t2) .t2-salta:focus { left: 8px; }
:where(.t2) .t2-contenitore { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ── intestazione ─────────────────────────────────────────────────────────── */
:where(.t2) .t2-testata { background: var(--g-bianco); border-bottom: 1px solid var(--g-bordo); position: relative; z-index: 20; }
:where(.t2) .t2-testata-riga { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
:where(.t2) .t2-marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--g-testo); }
.t2 .t2-marchio { color: var(--g-testo); }
:where(.t2) .t2-marchio-nome { font-weight: 800; font-size: 17px; letter-spacing: 0.06em; }
:where(.t2) .t2-nav { display: flex; gap: 2px; height: 68px; }
:where(.t2) .t2-nav a { padding: 0 12px; display: flex; align-items: center; color: var(--g-secondario); text-decoration: none; font-size: 13px; font-weight: 700; border-bottom: 3px solid transparent; transition: color var(--g-transizione), border-color var(--g-transizione); }
:where(.t2) .t2-nav a:hover { color: var(--g-testo); border-bottom-color: var(--g-blu); }
/* T2-1: voce della pagina in cui si e' (testata delle pagine categoria) e «Tutte le categorie» in blu */
:where(.t2) .t2-nav a[aria-current="page"] { color: var(--g-testo); border-bottom-color: var(--g-blu); }
:where(.t2) .t2-nav a.t2-nav-tutte { color: var(--g-blu-scuro); }
:where(.t2) .t2-azioni { display: flex; align-items: center; gap: 14px; }
:where(.t2) .t2-telefono { font-size: 13px; font-weight: 700; color: var(--g-testo); text-decoration: none; }
.t2 .t2-telefono { color: var(--g-testo); }
:where(.t2) .t2-icona-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--g-raggio-12); background: transparent; border: 0; cursor: pointer; text-decoration: none; transition: background var(--g-transizione); }
.t2 .t2-icona-btn { color: var(--g-testo); }
:where(.t2) .t2-icona-btn:hover { background: var(--g-superficie); }
:where(.t2) .t2-icona-btn svg { stroke: currentColor; }
/* ⚠ Il telefono dell'intestazione porta la classe fab-call (v. _testata_t2.html: cosi' app.js non aggiunge il suo
   pulsante fluttuante), e /css/styles.css da' a .fab-call uno stile FISSO in basso a destra, verde, pulsante.
   Qui dentro l'intestazione si annulla tutto: resta un'icona come le altre. Misurato alla prima cattura a 390 px. */
.t2 .t2-testata .fab-call { position: static; z-index: auto; width: 44px; height: 44px; border-radius: var(--g-raggio-12); background: transparent; color: var(--g-testo); box-shadow: none; animation: none; }
.t2 .t2-testata .fab-call:hover { transform: none; box-shadow: none; background: var(--g-superficie); }
:where(.t2) .t2-preventivo { height: 42px; padding: 0 16px 0 12px; border-radius: var(--g-raggio-12); background: var(--g-blu); display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 13px; font-weight: 700; transition: background var(--g-transizione), box-shadow var(--g-transizione); }
.t2 .t2-preventivo { color: var(--g-bianco); }
:where(.t2) .t2-preventivo:hover { background: var(--g-blu-scuro); }
:where(.t2) .t2-preventivo:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); }
:where(.t2) .t2-preventivo svg { stroke: var(--g-bianco); }
:where(.t2) .t2-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--g-giallo); color: var(--g-testo); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
:where(.t2) .t2-solo-telefono { display: none; }
:where(.t2) .t2-riga-colori { height: 4px; background: var(--g-riga-4-colori); }
:where(.t2) .t2-menu { display: none; background: var(--g-bianco); border-bottom: 1px solid var(--g-bordo); }
:where(.t2) .t2-menu.open { display: block; }
:where(.t2) .t2-menu ul { list-style: none; margin: 0; padding: 8px 16px 12px; }
:where(.t2) .t2-menu a { display: flex; align-items: center; min-height: 44px; color: var(--g-testo); text-decoration: none; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--g-superficie); }

/* ── piè di pagina ────────────────────────────────────────────────────────── */
:where(.t2) .t2-piede { margin-top: 64px; border-top: 1px solid var(--g-bordo); padding: 28px 0 32px; font-size: 13px; color: var(--g-secondario); }
:where(.t2) .t2-piede-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
:where(.t2) .t2-piede-col { display: flex; flex-direction: column; gap: 6px; }
:where(.t2) .t2-piede-col--destra { align-items: flex-end; }
:where(.t2) .t2-piede-nome { font-weight: 800; color: var(--g-testo); letter-spacing: 0.06em; }
.t2 .t2-piede a { color: var(--g-testo); text-decoration: none; }
.t2 .t2-piede a:hover { text-decoration: underline; }
.t2 .t2-piede .t2-piede-tenue { color: var(--g-secondario); }
.t2 .t2-piede .t2-piede-blu { color: var(--g-blu-scuro); }

/* ── bottoni comuni ───────────────────────────────────────────────────────── */
:where(.t2) .t2-btn { height: 54px; padding: 0 24px; border-radius: var(--g-raggio-14); text-decoration: none; font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background var(--g-transizione), box-shadow var(--g-transizione), transform var(--g-transizione); }
:where(.t2) .t2-btn:active { transform: translateY(1px); }
.t2 .t2-btn--primario { background: var(--g-blu); color: var(--g-bianco); box-shadow: var(--g-ombra-bottone); }
.t2 .t2-btn--primario:hover { background: var(--g-blu-scuro); }
.t2 .t2-btn--primario svg { stroke: var(--g-bianco); }
.t2 .t2-btn--secondario { background: var(--g-bianco); border: 1px solid var(--g-bordo); color: var(--g-testo); font-weight: 700; }
.t2 .t2-btn--secondario:hover { background: var(--g-superficie); }
.t2 .t2-btn--secondario svg { stroke: var(--g-testo); }
.t2 .t2-btn--giallo { height: 52px; background: var(--g-giallo); color: var(--g-testo); }
.t2 .t2-btn--giallo:hover { background: var(--g-ambra); }
.t2 .t2-btn--giallo svg { stroke: var(--g-testo); }

@media (max-width: 1023px) {
  :where(.t2) .t2-nav, :where(.t2) .t2-telefono { display: none; }
}
@media (max-width: 767px) {
  :where(.t2) .t2-contenitore { padding: 0 16px; }
  :where(.t2) .t2-testata-riga { height: 56px; }
  :where(.t2) .t2-marchio-nome { font-size: 15px; }
  :where(.t2) .t2-marchio svg { width: 26px; height: 26px; }
  :where(.t2) .t2-azioni { gap: 4px; }
  :where(.t2) .t2-preventivo { display: none; }
  :where(.t2) .t2-solo-telefono { display: inline-flex; }
  :where(.t2) .t2-piede { padding: 22px 0 24px; font-size: 12px; }
  :where(.t2) .t2-piede-griglia { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  :where(.t2) .t2-piede-col--destra { align-items: flex-start; }
}
/* il pulsante del menu vive dove la navigazione e' nascosta (sotto 1024 px); sopra, la navigazione e' in riga */
@media (min-width: 1024px) {
  :where(.t2) .t2-hamburger { display: none; }
  :where(.t2) .t2-menu.open { display: none; }
}

/* ══ SCHEDA PRODOTTO (T2-1, CRISTALLO-64, 25/09/2026) ═══════════════════════════════════════════════════════════════
   La pagina di una categoria con configuratore: a sinistra anteprima in scala e striscia dei modelli, a destra la card
   col prezzo e i passi numerati. Tavole T2-1_alluminio_pc (1280) e _telefono (390). Nata per l'alluminio; le classi non
   nominano la categoria, cosi' il PVC (T2-2) le riusa. Nessun numero e nessun testo qui: solo forma. */
:where(.t2) .t2-sp { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 28px; padding-top: 22px; align-items: start; }
:where(.t2) .t2-sp-sinistra { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
:where(.t2) .t2-sp-briciole { font-size: 12px; color: var(--g-secondario); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.t2 .t2-sp-briciole a { color: var(--g-secondario); text-decoration: none; }
.t2 .t2-sp-briciole a:hover { text-decoration: underline; }
:where(.t2) .t2-sp-briciole b { color: var(--g-testo); font-weight: 700; }
:where(.t2) .t2-sp-anteprima { position: relative; height: 520px; border-radius: var(--g-raggio-24); background: var(--g-bianco); border: 1px solid var(--g-bordo); box-shadow: var(--g-ombra-card); overflow: hidden; display: flex; align-items: center; justify-content: center; }
:where(.t2) .t2-sp-parete { position: absolute; left: 0; right: 0; top: 0; bottom: 96px; background: var(--g-superficie); }
:where(.t2) .t2-sp-pavimento { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: var(--g-superficie-2); border-top: 1px solid var(--g-bordo); }
:where(.t2) .t2-sp-cornice { position: relative; margin-bottom: 40px; padding: 8px; background: var(--g-fondo); border: 1px solid var(--g-bordo); border-radius: 4px; max-width: 86%; }
/* finche' lo script non ha disegnato il serramento la cornice e' vuota (18 × 18): se si vedesse, al disegno «salterebbe»
   a 309 × 358 e sarebbe uno spostamento di impaginazione (misurato: CLS 0,013 a 1280 e a 390). Nascosta finche' e' vuota,
   compare gia' grande: per il CLS un elemento che prima non si vedeva non si e' spostato. */
:where(.t2) .t2-sp-cornice:empty { visibility: hidden; }
/* l'anteprima di anteprima_alluminio.js porta uno style= suo (width 100%, max-height 16rem): qui si vince con !important,
   come fa la scena della home (home.html, .h-cornice svg) */
:where(.t2) .t2-sp-cornice svg { display: block; height: 340px !important; width: auto !important; max-width: 100%; max-height: none !important; }
/* linee e riempimenti dei disegni (anteprima e striscia): geometria delle classi ic-* di anteprima_alluminio.js e delle
   icone; colori della veste come nella scena della home (CRISTALLO-23: battente blu, ribalta ambra). Gli spessori in
   PIXEL REALI (non-scaling-stroke): in unita' del viewBox diventerebbero frazioni di pixel. */
:where(.t2) .t2-sp-anteprima, :where(.t2) .t2-sp-modelli { --icona-telaio: var(--g-secondario); --icona-battente: var(--g-blu); --icona-ribalta: var(--g-ambra); --icona-interno: var(--g-secondario); }
.t2 .t2-sp-anteprima svg .ic-telaio { stroke: var(--icona-telaio); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.t2 .t2-sp-modello svg .ic-telaio { stroke: var(--icona-telaio); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.t2 .t2-sp-anteprima svg .ic-linea, .t2 .t2-sp-modello svg .ic-linea { stroke: var(--icona-interno); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.t2 .t2-sp-anteprima svg .ic-maniglia, .t2 .t2-sp-modello svg .ic-maniglia { stroke: var(--icona-interno); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.t2 .t2-sp-anteprima svg .ic-battente, .t2 .t2-sp-modello svg .ic-battente { stroke: var(--icona-battente); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.t2 .t2-sp-anteprima svg .ic-ribalta, .t2 .t2-sp-modello svg .ic-ribalta { stroke: var(--icona-ribalta); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
/* riempimenti delle icone della striscia per CLASSE, non per attributo: window.svgPortabile li copia CALCOLATI nella
   miniatura del carrello (un fill scritto a mano sarebbe un esadecimale; uno in style= con var() morirebbe fuori pagina) */
.t2 .t2-sp-modello svg .ic-telaio, .t2 .t2-sp-modello svg .ic-pieno { fill: var(--g-bianco); }
.t2 .t2-sp-modello svg .ic-vetro { fill: var(--g-vetro); }
.t2 .t2-sp-modello svg .ic-maniglia { fill: var(--g-fondo); }
:where(.t2) .t2-sp-pillola { position: absolute; top: 16px; padding: 7px 12px; border-radius: var(--g-raggio-pillola); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
:where(.t2) .t2-sp-pillola--misure { left: 16px; background: var(--g-bianco); border: 1px solid var(--g-bordo); color: var(--g-scuro); }
:where(.t2) .t2-sp-pillola--misure svg { stroke: var(--g-blu); fill: none; flex-shrink: 0; }
:where(.t2) .t2-sp-pillola--n { right: 16px; background: var(--g-blu); color: var(--g-bianco); }
:where(.t2) .t2-sp-vista { position: absolute; bottom: 16px; right: 16px; font-size: 11px; font-weight: 600; color: var(--g-secondario); }
:where(.t2) .t2-sp-modelli { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
:where(.t2) .t2-sp-modello { height: 84px; margin: 0; padding: 6px 4px; border-radius: var(--g-raggio-14); border: 1px solid var(--g-bordo); background: var(--g-bianco); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--g-font); font-size: 11px; font-weight: 700; color: var(--g-secondario); cursor: pointer; transition: border-color var(--g-transizione), background var(--g-transizione); }
:where(.t2) .t2-sp-modello:hover { border-color: var(--g-blu); }
:where(.t2) .t2-sp-modello[aria-checked="true"] { border: 2px solid var(--g-blu); background: var(--g-blu-chiaro); color: var(--g-testo); font-weight: 800; }
:where(.t2) .t2-sp-modello svg { display: block; height: 40px; width: auto; max-width: 100%; overflow: visible; }
/* ❄️ T2-1b: il posto della miniatura (anta_renderer.thumbSVG) e' riservato ad altezza fissa, cosi' l'arrivo del disegno non
   sposta l'etichetta; lo style= della miniatura (larghezza in px) si vince con !important come nella cornice */
:where(.t2) .t2-sp-modello-icona { display: flex; align-items: center; justify-content: center; height: 40px; max-width: 100%; }
:where(.t2) .t2-sp-modello-icona svg { height: 40px !important; width: auto !important; max-width: 100%; }
/* ❄️ T2-1b: i COLORI DELLE APERTURE del disegnatore di Prisma sul sito, dai token T2 (D1 di Ignazio, 25/09: blu e ambra della
   tavolozza). anta_renderer.js li scrive come attributi di presentazione e una regola CSS vince sugli attributi: i tratti si
   scelgono per FORMA — tratteggio «4 4» = ribalta, tratto a giunzioni arrotondate senza tratteggio = battente — e mai per
   colore (niente esadecimali in questo foglio). Anche i cerchietti del selettore passano alla tavolozza. */
.t2 .t2-ap svg path[stroke-linejoin="round"]:not([stroke-dasharray]) { stroke: var(--g-blu); }
.t2 .t2-ap svg path[stroke-dasharray="4 4"] { stroke: var(--g-ambra); }
.t2 .t2-ap svg [data-ar-cycle] circle { fill: var(--g-blu-chiaro); stroke: var(--g-blu); }
.t2 .t2-ap svg [data-ar-cycle] text { fill: var(--g-blu-scuro); }
.t2 .t2-ap svg [tabindex]:focus-visible { outline: 2px solid var(--g-blu); outline-offset: 2px; }
/* il selettore nasce vuoto e il disegnatore lo riempie dopo il primo disegno: senza posto riservato passava da 0 a 250 px e
   spingeva giu' i passi sotto (misurato: CLS 0,031 a 1280 e 0,020 a 390). 250 px = il disegno del selettore coi suoi
   cerchietti e pillole (riquadro max 160 + margini 32 + fascia dei comandi 58); il disegnatore poi fissa l'altezza vera.
   In COLONNA e centrato, mai «stirato»: con la riga flex (align-items: stretch) il disegno prendeva l'altezza del contenitore
   e il disegnatore, che la rilegge dopo ogni disegno, non la faceva piu' scendere — misurato: dopo un'anta fissa 250 -> 496 px,
   e 496 anche tornando a battente, col disegno in mezzo a una fascia vuota. La nota dell'anta fissa va SOTTO il disegno. */
:where(.t2) .t2-sp-apertura-disegno { display: flex; flex-direction: column; align-items: center; min-height: 250px; }
.t2 .t2-sp-apertura-aiuto { margin: 0; font-size: 11px; line-height: 1.4; color: var(--g-secondario); }
:where(.t2) .t2-sp-passo[hidden] { display: none; }
:where(.t2) .t2-sp-scheda { border-radius: var(--g-raggio-24); background: var(--g-bianco); border: 1px solid var(--g-bordo); box-shadow: var(--g-ombra-card); padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
:where(.t2) .t2-sp-testa { display: flex; flex-direction: column; gap: 8px; }
.t2 .t2-sp-titolo { margin: 0; display: flex; flex-direction: column; gap: 6px; }
:where(.t2) .t2-sp-titolo > span { display: block; }
:where(.t2) .t2-sp-categoria { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--g-blu-scuro); text-transform: uppercase; }
.t2 .t2-sp-nome { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; color: var(--g-testo); }
:where(.t2) .t2-sp-cartellini { display: flex; gap: 6px; flex-wrap: wrap; }
:where(.t2) .t2-sp-cartellino { padding: 5px 10px; border-radius: var(--g-raggio-pillola); background: var(--g-superficie); font-size: 11px; font-weight: 700; color: var(--g-scuro); }
:where(.t2) .t2-sp-prezzo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--g-raggio-14); background: var(--g-fondo); border: 1px solid var(--g-bordo); }
:where(.t2) .t2-sp-cifra { font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--g-testo); }
:where(.t2) .t2-sp-cifra--nota { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--g-secondario); }
:where(.t2) .t2-sp-prezzo-note { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--g-secondario); text-align: right; }
:where(.t2) .t2-sp-prezzo-note b { font-weight: 700; color: var(--g-scuro); }
:where(.t2) .t2-sp-passo { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
:where(.t2) .t2-sp-passo-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:where(.t2) .t2-sp-passo-titolo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--g-scuro); padding: 0; }
:where(.t2) .t2-sp-num { width: 20px; height: 20px; border-radius: 10px; background: var(--g-blu); color: var(--g-bianco); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
:where(.t2) .t2-sp-scelto { font-size: 12px; font-weight: 700; color: var(--g-blu-scuro); }
:where(.t2) .t2-sp-misure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
:where(.t2) .t2-sp-misura { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border: 1px solid var(--g-bordo); border-radius: var(--g-raggio-12); background: var(--g-bianco); font-size: 12px; font-weight: 700; color: var(--g-secondario); }
:where(.t2) .t2-sp-misura:focus-within { border-color: var(--g-blu); box-shadow: 0 0 0 2px var(--g-blu-chiaro); }
.t2 .t2-sp-misura input { flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none; background: transparent; font-family: var(--g-font); font-size: 16px; font-weight: 700; color: var(--g-testo); text-align: right; }
:where(.t2) .t2-sp-colori { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
:where(.t2) .t2-sp-colore { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: transparent; font-family: var(--g-font); font-size: 10px; font-weight: 600; color: var(--g-secondario); cursor: pointer; }
:where(.t2) .t2-sp-disco { width: 44px; height: 44px; border-radius: 22px; border: 3px solid var(--g-bianco); box-shadow: 0 0 0 1px var(--g-bordo); display: block; }
:where(.t2) .t2-sp-colore[aria-checked="true"] { color: var(--g-testo); font-weight: 700; }
:where(.t2) .t2-sp-colore[aria-checked="true"] .t2-sp-disco { border-color: var(--g-blu); box-shadow: none; }
:where(.t2) .t2-sp-vetri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
:where(.t2) .t2-sp-vetro { margin: 0; padding: 10px 12px; border-radius: var(--g-raggio-12); border: 1px solid var(--g-bordo); background: var(--g-bianco); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font-family: var(--g-font); cursor: pointer; }
:where(.t2) .t2-sp-vetro[aria-checked="true"] { border: 2px solid var(--g-blu); background: var(--g-blu-chiaro); padding: 9px 11px; }
:where(.t2) .t2-sp-vetro-nome { font-size: 13px; font-weight: 800; color: var(--g-testo); }
:where(.t2) .t2-sp-vetro-nota { font-size: 11px; color: var(--g-secondario); }
:where(.t2) .t2-sp-riga { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--g-raggio-12); border: 1px solid var(--g-bordo); background: var(--g-bianco); cursor: pointer; }
:where(.t2) .t2-sp-riga-testi { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; min-width: 0; }
:where(.t2) .t2-sp-riga-nome { font-size: 13px; font-weight: 800; color: var(--g-testo); }
:where(.t2) .t2-sp-riga-nota { font-size: 11px; color: var(--g-secondario); }
:where(.t2) .t2-sp-riga-costo { font-size: 13px; font-weight: 800; color: var(--g-testo); white-space: nowrap; }
.t2 .t2-sp-riga input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--g-blu); flex-shrink: 0; }
:where(.t2) .t2-sp-aggiungi { display: flex; gap: 10px; align-items: center; }
:where(.t2) .t2-sp-quantita { display: flex; align-items: center; border: 1px solid var(--g-bordo); border-radius: var(--g-raggio-12); overflow: hidden; background: var(--g-bianco); flex-shrink: 0; }
:where(.t2) .t2-sp-q-btn { width: 44px; height: 50px; margin: 0; border: 0; background: var(--g-bianco); color: var(--g-testo); font-family: var(--g-font); font-size: 20px; font-weight: 700; cursor: pointer; }
:where(.t2) .t2-sp-q-btn:hover { background: var(--g-superficie); }
.t2 .t2-sp-quantita input { width: 32px; margin: 0; padding: 0; border: 0; background: transparent; text-align: center; font-family: var(--g-font); font-size: 16px; font-weight: 800; color: var(--g-testo); -moz-appearance: textfield; appearance: textfield; }
.t2 .t2-sp-quantita input::-webkit-outer-spin-button, .t2 .t2-sp-quantita input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:where(.t2) .t2-sp-bottone { flex-grow: 1; height: 50px; margin: 0; border: 0; border-radius: var(--g-raggio-12); background: var(--g-blu); color: var(--g-bianco); font-family: var(--g-font); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; box-shadow: var(--g-ombra-bottone); cursor: pointer; transition: background var(--g-transizione); }
:where(.t2) .t2-sp-bottone:hover { background: var(--g-blu-scuro); }
:where(.t2) .t2-sp-bottone-totale { font-weight: 800; white-space: nowrap; }
:where(.t2) .t2-sp-solo-tel { display: none; }
:where(.t2) .t2-sp-bottone:disabled { background: var(--g-superficie-2); color: var(--g-secondario); box-shadow: none; cursor: not-allowed; }
:where(.t2) .t2-sp-fiducia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--g-bordo); }
:where(.t2) .t2-sp-fiducia > * { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--g-secondario); text-decoration: none; }
.t2 .t2-sp-fiducia a { color: var(--g-blu-scuro); }
:where(.t2) .t2-sp-fiducia svg { stroke: var(--g-blu); fill: none; flex-shrink: 0; }
:where(.t2) .t2-sp-sotto { margin-top: 48px; display: flex; flex-direction: column; gap: 24px; }
:where(.t2) .t2-sp-tecnica { border-radius: var(--g-raggio-18); background: var(--g-bianco); border: 1px solid var(--g-bordo); overflow: hidden; }
.t2 .t2-sp-tecnica h2 { margin: 0; padding: 18px 22px; font-size: 20px; font-weight: 800; border-bottom: 1px solid var(--g-bordo); }
:where(.t2) .t2-sp-tecnica dl { margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
:where(.t2) .t2-sp-tecnica dt, :where(.t2) .t2-sp-tecnica dd { margin: 0; padding: 14px 22px; font-size: 14px; border-bottom: 1px solid var(--g-superficie); }
:where(.t2) .t2-sp-tecnica dt { font-weight: 700; color: var(--g-secondario); }
:where(.t2) .t2-sp-tecnica dd { color: var(--g-testo); }
.t2 .t2-sp-tecnica dl > :nth-last-child(-n+2) { border-bottom: 0; }

@media (max-width: 1023px) {
  :where(.t2) .t2-sp { grid-template-columns: minmax(0, 1fr); }
  :where(.t2) .t2-sp-modelli { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :where(.t2) .t2-sp { padding-top: 12px; gap: 12px; }
  :where(.t2) .t2-sp-briciole { display: none; }
  :where(.t2) .t2-sp-anteprima { height: 232px; border-radius: 20px; }
  :where(.t2) .t2-sp-parete { bottom: 56px; }
  :where(.t2) .t2-sp-pavimento { height: 56px; }
  /* il disegno si appoggia sul pavimento, sotto le due pillole in alto (a centro le copriva, misurato a 390) */
  :where(.t2) .t2-sp-anteprima { align-items: flex-end; padding-bottom: 26px; }
  :where(.t2) .t2-sp-cornice { margin-bottom: 0; padding: 4px; }
  :where(.t2) .t2-sp-cornice svg { height: 150px !important; }
  :where(.t2) .t2-sp-pillola { top: 12px; padding: 5px 10px; font-size: 11px; }
  :where(.t2) .t2-sp-pillola--misure { left: 12px; }
  :where(.t2) .t2-sp-pillola--n { right: 12px; }
  :where(.t2) .t2-sp-vista { display: none; }
  /* la striscia dei modelli scorre in orizzontale, dentro se stessa: la pagina non si allarga (D-2) */
  :where(.t2) .t2-sp-modelli { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x proximity; }
  :where(.t2) .t2-sp-modello { flex: 0 0 76px; height: 66px; scroll-snap-align: start; }
  :where(.t2) .t2-sp-modello svg { height: 30px; }
  :where(.t2) .t2-sp-modello-icona { height: 30px; }
  :where(.t2) .t2-sp-modello-icona svg { height: 30px !important; }
  :where(.t2) .t2-sp-scheda { padding: 16px; border-radius: 20px; }
  .t2 .t2-sp-nome { font-size: 22px; }
  :where(.t2) .t2-sp-cifra { font-size: 24px; }
  /* la nota sotto la cifra, non accanto: accanto andava a capo quando «€ 0,00» diventava «€ 1.479,81» e spingeva giu'
     i passi (misurato a 360: 23 px, CLS 0,013). In colonna la larghezza della cifra non tocca piu' la nota. */
  :where(.t2) .t2-sp-prezzo { flex-direction: column; align-items: flex-start; gap: 2px; }
  :where(.t2) .t2-sp-prezzo-note { flex-direction: row; flex-wrap: wrap; gap: 0 6px; align-items: baseline; text-align: left; }
  :where(.t2) .t2-sp-vetri { grid-template-columns: minmax(0, 1fr); }
  :where(.t2) .t2-sp-fiducia { grid-template-columns: minmax(0, 1fr); }
  /* barra fissa in basso: quantita' e «Aggiungi» (tavola telefono). Lo spazio sotto la pagina lo riserva body.t2:has(.t2-sp-aggiungi), qui sotto */
  :where(.t2) .t2-sp-aggiungi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000; padding: 12px 16px; background: var(--g-bianco); border-top: 1px solid var(--g-bordo); box-shadow: 0 -6px 16px rgba(60, 64, 67, 0.10); }
  /* sotto l'ultima riga della pagina (il piede) resta lo spazio della barra: senza, l'indirizzo e i recapiti finivano
     sotto «Aggiungi» (misurato alla seconda cattura a 390) */
  body.t2:has(.t2-sp-aggiungi) { padding-bottom: 76px; }
  :where(.t2) .t2-sp-solo-pc { display: none; }
  :where(.t2) .t2-sp-solo-tel { display: inline; }
  :where(.t2) .t2-sp-tecnica dl { grid-template-columns: minmax(0, 1fr); }
  :where(.t2) .t2-sp-tecnica dt { padding-bottom: 0; border-bottom: 0; }
}