/* sito-pubblico/public/stile.css — il kit grafico del sito pubblico (Phase 24, D-19).
   In parole semplici: grafica 1 a 1 dall'originale demolizioneferrarini.it, spostata una volta dal bozzetto approvato
   (anteprime/bozzetto-sito.html resta come storia). Colori e misure del sito stanno solo qui: ogni colore è scritto una
   volta sola, tra le variabili di :root; il resto del file le usa con var() o, per un colore trasparente, con
   color-mix(in srgb, var(--x) N%, transparent), che dà lo stesso identico colore. Resta scritto a mano solo il grigio
   della freccia dei menu dentro l'indirizzo data: (lì var() non va).
   In cima i due caratteri Inter del sito (D-07 della Phase 24.4). */
/* Inter © The Inter Project Authors, licenza SIL OFL 1.1; i due file sono quelli che Google Fonts serviva il 2026-11-02 (D-07 della Phase 24.4) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ===== Kit grafico del sito originale (variabili 1 a 1 da home.html) ===== */
:root {
  --primary-color: #1B2F52;
  --primary-dark: color-mix(in srgb, var(--primary-color) 80%, black);
  --secondary-color: #FFFFFF;
  --accent-color: #FF0E00; /* il rosso del logo, l'unico rosso del sito (D-22 della Phase 24.7) */
  /* grigi di Tailwind usati dall'originale */
  --g50:#f9fafb; --g100:#f3f4f6; --g200:#e5e7eb; --g300:#d1d5db; --g400:#9ca3af; --g500:#6b7280;
  --g600:#4b5563; --g700:#374151; --g800:#1f2937; --g900:#111827; --g950:#030712;
  --verde50:#f0fdf4; --verde500:#22c55e; --verde600:#16a34a; --rosso50:#fef2f2;
  --verde-wa: #25D366; /* il verde di WhatsApp */
  --ombra-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --ombra-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --ombra-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --ombra-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);
  /* le ombre delle schede: normale e col mouse sopra */
  --ombra-scheda: 0 1px 3px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .04);
  --ombra-scheda-su: 0 4px 16px rgb(0 0 0 / .12), 0 8px 24px rgb(0 0 0 / .06);
  --riga-titolo: 1.35; /* l'altezza di riga del titolo delle schede, che ne riserva 2 righe (3 nei ricambi; D-18 della Phase 24.7, owner 03/11) */
  --righe-titolo: 3; /* le righe del titolo delle schede di ricambi, auto e pezzi da smontare (4 per le auto al telefono, owner 03/11) */
  --testo-scheda: .875rem; /* la misura del titolo delle schede, e di «Da smontare» in fondo a quelle dei pezzi da smontare (owner 03/11) */
  --tocco: 2.75rem; /* l'altezza di una voce dell'elenco «scrivi e scegli», 44 px per il dito (N6 della Phase 24.2) */
  --alto-casella: 3rem; /* un'altezza sola (48 px) per la barra di ricerca, le caselle del riquadro dell'auto e i tasti accanto (Phase 24.7) */
  --bordo-miniatura: 3px; /* il bordo rosso della miniatura scelta della galleria, e lo spazio uguale tutto intorno alla colonna che scorre, così non viene tagliato */
  --spazio-scorrimento: .5rem; /* lo spazio fra le miniature e la barra di scorrimento della galleria */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Inter', sans-serif; background: var(--g50); color: var(--g800);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
svg { flex-shrink: 0; }
.wrap7 { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.wrap6 { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.wrap4 { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
.nascosto { display: none !important; }

/* ===== Barra contatti (1 a 1) ===== */
.barra-contatti { background: var(--primary-dark); color: var(--secondary-color); font-size: 1.0625rem; }
.barra-contatti .wrap7 { padding-top: .5rem; padding-bottom: .5rem; display: flex; align-items: center; justify-content: space-between; }
.barra-contatti .sx { display: flex; align-items: center; gap: 1.25rem; }
.barra-contatti a, .barra-contatti .indirizzo { display: flex; align-items: center; gap: .5rem; font-weight: 500; transition: color .15s; }
.barra-contatti a:hover { color: var(--g200); }
.barra-contatti svg { width: 1.3125rem; height: 1.3125rem; }
.barra-contatti .indirizzo { display: none; }
@media (min-width: 768px) { .barra-contatti .indirizzo { display: flex; } }
/* Bozzetto approvato del 02/11 (anteprime/bozzetto-home-2/proposta.css): il telefono più grande (sopra) e WhatsApp come tasto
   verde (il tasto verde di .tasto-wa-grande, più sotto), qui solo più basso e largo quanto la scritta: 38px sul computer, 42px
   sul telefono. Al telefono l'indirizzo resta nascosto. Le stesse misure per il tasto verde dell'elenco vuoto (owner 04/11). */
.barra-contatti a.contatto-wa, .vuoto-compatto a.tasto-wa-grande { width: auto; margin-top: 0; height: 2.375rem; padding: 0 1rem; font-weight: 700; color: var(--secondary-color); }
.barra-contatti a.contatto-wa svg, .vuoto-compatto a.tasto-wa-grande svg { width: 1.375rem; height: 1.375rem; }
@media (max-width: 767px) {
  .barra-contatti .sx { gap: 1rem; }
  .barra-contatti svg { width: 1.375rem; height: 1.375rem; }
  .barra-contatti a.contatto-wa, .vuoto-compatto a.tasto-wa-grande { height: 2.625rem; padding: 0 .875rem; }
  .barra-contatti a.contatto-wa svg, .vuoto-compatto a.tasto-wa-grande svg { width: 1.625rem; height: 1.625rem; }
}
/* I link «Ricambi · Auto» della striscia (D-02 della Phase 24.7), al posto del menu: a destra, subito dopo l'indirizzo; la
   voce della pagina bianca e sottolineata. Al telefono (l'indirizzo è nascosto) vanno in una seconda riga della striscia,
   metà e metà, alti quanto un dito (--tocco). */
.barra-contatti .wrap7 { flex-wrap: wrap; }
.barra-contatti .indirizzo { margin-left: auto; }
.voci-striscia { display: flex; align-items: center; gap: 1.25rem; margin-left: 1.25rem; padding-left: 1.25rem; border-left: 1px solid color-mix(in srgb, var(--secondary-color) 25%, transparent); }
.voci-striscia a { padding: .125rem 0; border-bottom: 2px solid transparent; font-weight: 600; color: color-mix(in srgb, var(--secondary-color) 75%, transparent); }
.voci-striscia a:hover, .voci-striscia a.attiva { color: var(--secondary-color); }
.voci-striscia a.attiva { border-bottom-color: var(--secondary-color); }
@media (max-width: 767px) {
  .barra-contatti .wrap7 { padding-bottom: 0; }
  .voci-striscia { flex: 1 1 100%; gap: 0; margin: .5rem 0 0; padding: 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--secondary-color) 25%, transparent); }
  .voci-striscia a { flex: 1; display: flex; align-items: center; justify-content: center; height: var(--tocco); padding: 0; border-bottom-width: 3px; }
  .voci-striscia a + a { border-left: 1px solid color-mix(in srgb, var(--secondary-color) 25%, transparent); }
}

/* ===== La parte alta di ogni pagina (D-01 … D-08 della Phase 24.7): fascia blu, targa col logo, barra, riquadro dell'auto ===== */
/* La fascia non taglia ciò che esce (l'elenco dei suggerimenti va sopra il riquadro dell'auto): a tenersi dentro è la sola griglia.
   Dentro, una colonna sola: la targa centrata, la barra e il riquadro, larghi al massimo 60rem e centrati. */
.testata { position: relative; overflow: visible; background: linear-gradient(to bottom right, var(--primary-color), var(--primary-dark)); }
.testata .griglia { position: absolute; inset: 0; opacity: .1; overflow: hidden; }
.testata .griglia svg { width: 100%; height: 100%; color: var(--secondary-color); }
.testata .dentro { --margine-fascia: 1rem; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem var(--margine-fascia) 1.5rem; text-align: left; }
.testata .dentro > * { width: 100%; max-width: 60rem; justify-self: center; margin: 0; }
/* La targa (D-03): il logo grande sulla targa bianca, h1 nella home e div altrove, uguali; il testo blu sulla targa si vede
   solo se il logo non arriva. */
.testata .logo-testata { max-width: 23rem; background: var(--secondary-color); border-radius: 1rem; padding: .75rem 1rem; box-shadow: var(--ombra-lg); font-size: 1.5rem; font-weight: 700; color: var(--primary-color); }
.logo-testata a { display: block; }
.logo-testata img { width: 100%; height: auto; }
/* I tasti rossi della parte alta (Cerca, Salva, Cambia auto) e «Vedi tutti» delle sezioni (testaSezione, D-22
   della Phase 24.7): alti come le caselle, scritta grande e in grassetto. */
.testata .tasto-cerca, .testa-sezione .tutti { display: inline-flex; align-items: center; justify-content: center; height: var(--alto-casella); padding: 0 1rem; font-size: 1.0625rem; font-weight: 700; line-height: 1; white-space: nowrap; }
/* La barra di ricerca della sezione (D-04): la casella bianca col bordo sottile, niente cornice; accanto il tasto rosso
   «Cerca», largo sempre uguale, anche al telefono. I suggerimenti si aprono sotto la casella, larghi come lei, sopra il riquadro. */
.barra-normale .cerca-riga { --largo-tasto: 5.75rem; --spazio-tasto: .75rem; gap: var(--spazio-tasto); }
.barra-normale .campo input { height: var(--alto-casella); padding: 0 1rem 0 3rem; background: var(--secondary-color); border: 1px solid var(--g300); border-radius: .5rem; color: var(--g900); font-size: 1rem; }
.barra-normale .campo input::placeholder { color: var(--g700); }
.barra-normale .campo svg { color: var(--g600); }
.barra-normale .tasto-cerca { width: var(--largo-tasto); }
.barra-normale .cerca-riga > .scegli-voci { right: calc(var(--largo-tasto) + var(--spazio-tasto)); }
/* Lo schermo largo, per lo script del browser: solo qui la barra dei ricambi dice la frase lunga con l'auto salvata (D-05
   della Phase 24.7; al telefono non ci sta e resta «Cerca ricambi...»). I 768 px restano solo in questo foglio di stile. */
@media (min-width: 768px) { :root { --barra-lunga: 1; } }
/* Il riquadro bianco «Qual è la tua auto?» (D-06): una form sola con due facce nella stessa cella, i campi e la scheda
   dell'auto salvata; si vede una faccia sola. Sul computer la faccia nascosta tiene il suo posto, invisibile e fuori dal giro
   del tasto Tab: il riquadro è alto quanto la faccia più alta e la scheda ha la sua stessa misura (D-08); al telefono la
   faccia nascosta non c'è e la scheda è più corta. */
.riquadro-auto { background: var(--secondary-color); border-radius: 1rem; box-shadow: var(--ombra-lg); padding: 1rem 1.25rem 1.25rem; }
.riquadro-auto h2 { font-size: 1.125rem; font-weight: 700; color: var(--primary-color); margin-bottom: .75rem; }
.riquadro-facce { display: grid; }
.riquadro-facce > .faccia { grid-area: 1 / 1; min-width: 0; }
/* Marca, Modello, Motore e Anno e il tasto «Salva» (variante C scelta dall'owner il 03/11, anteprime/riquadro-auto-larghezze.html).
   Al telefono Marca e Anno affiancati, sotto Modello e poi Motore a tutta larghezza, poi il tasto a tutta larghezza; l'ordine
   nell'HTML non cambia (Marca, Modello, Motore, Anno): Anno risale accanto a Marca con grid-auto-flow: dense. */
.fila-auto { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: end; }
.fila-auto .filtri-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fila-auto > .tasto-cerca { width: 100%; }
@media (max-width: 767px) {
  .fila-auto .filtri-griglia { grid-auto-flow: dense; }
  .fila-auto .filtri-griglia > div:nth-child(2), .fila-auto .filtri-griglia > div:nth-child(3) { grid-column: 1 / -1; }
}
/* «Scegli almeno la marca e il modello», sotto i campi solo quando serve (D-07). */
.avviso-auto { margin-top: .5rem; font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--g800); }
/* L'aiuto sotto i campi quando i motori non arrivano (D-06): testo piccolo, senza grassetto. */
.aiuto-menu { margin-top: .5rem; font-size: .8125rem; line-height: 1.35; color: var(--g600); }
/* La scheda dell'auto salvata (D-08, D-09): a sinistra l'auto in un cerchio, accanto il nome in grassetto e sotto motore e
   anno (fra due parti che ci sono il separatore « · », scritto solo qui), a destra «Cambia auto» e «✕ Togli»; al telefono
   i due tasti sotto, metà e metà. */
.faccia-scheda { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-left: .5rem; }
.tondo-auto { display: grid; place-items: center; width: 4rem; height: 4rem; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--primary-color) 12%, transparent); color: var(--primary-color); }
.tondo-auto svg { width: 2.75rem; height: 2.75rem; }
.chi-auto { flex: 1; min-width: 0; display: grid; align-content: center; gap: .25rem; }
.chi-auto b { font-size: 1.25rem; line-height: 1.2; color: var(--g900); }
.chi-auto small { font-size: .8125rem; line-height: 1.35; color: var(--g600); }
.riga-auto { font-size: 1.0625rem; color: var(--g800); }
.riga-auto span:not(:empty) + span:not(:empty)::before { content: ' · '; }
.faccia-scheda .comandi { display: flex; gap: .75rem; flex-basis: 100%; }
.faccia-scheda .comandi > * { flex: 1; }
.tasto-bordo { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: var(--alto-casella); padding: 0 1.25rem; border: 2px solid var(--g800); border-radius: .75rem; background: var(--secondary-color); color: var(--g900); font: inherit; font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.tasto-bordo:hover { background: var(--g100); }
@media (min-width: 768px) {
  .testata .dentro { gap: 1.25rem; padding: 1.25rem 1.5rem 2rem; }
  .testata .logo-testata { padding: 1rem 1.5rem; }
  .testata .tasto-cerca, .testa-sezione .tutti { padding: 0 1.75rem; font-size: 1.1875rem; }
  .barra-normale .cerca-riga { --largo-tasto: 7.5rem; }
  .barra-normale .campo input { font-size: 1.0625rem; }
  .fila-auto { grid-template-columns: minmax(0, 1fr) auto; }
  /* Una fila sola: Marca stretta, Modello con tutto lo spazio che resta, Motore per circa 8-9 lettere, Anno stretto. */
  .fila-auto .filtri-griglia { grid-template-columns: 8rem minmax(0, 1fr) 9rem 6rem; }
  .fila-auto > .tasto-cerca { width: auto; }
  .riquadro-facce > .faccia-menu.nascosto { display: block !important; visibility: hidden; }
  .riquadro-facce > .faccia-scheda.nascosto { display: flex !important; visibility: hidden; }
  .faccia-scheda { flex-wrap: nowrap; gap: 1.5rem; padding-left: 1.25rem; }
  .tondo-auto { width: 5rem; height: 5rem; }
  .tondo-auto svg { width: 3.25rem; height: 3.25rem; }
  .chi-auto b { font-size: 1.5rem; }
  .faccia-scheda .comandi { flex-basis: auto; flex-shrink: 0; }
  .faccia-scheda .comandi > * { flex: none; }
}
/* La riga della ricerca (campo + tasto) è il riferimento dell'elenco dei suggerimenti, che va in fondo a lei: largo quanto tutta la riga anche sul telefono stretto (i menu dei filtri partono dalla loro casella, regola .filtri-griglia .scegli-voci). */
.cerca-riga { position: relative; display: flex; align-items: center; gap: .5rem; }
.campo { position: relative; flex: 1; min-width: 0; }
.campo svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--g400); pointer-events: none; }
.campo input { width: 100%; padding: .875rem 1rem .875rem 3rem; border-radius: .75rem; border: 0; background: var(--g50); color: var(--g800); font: inherit; font-size: .875rem; transition: all .15s; }
.campo input::placeholder { color: var(--g400); }
.campo input:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 30%, transparent); background: var(--secondary-color); }
.tasto-cerca { flex-shrink: 0; background: var(--accent-color); color: var(--secondary-color); font-weight: 600; padding: .875rem 1.5rem; border-radius: .75rem; border: 0; font-size: .875rem; box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--accent-color) 25%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--accent-color) 25%, transparent); transition: all .2s; }
.tasto-cerca:hover { filter: brightness(1.1); }
@media (min-width: 768px) { .campo input, .tasto-cerca { font-size: 1rem; } }
/* Owner 04/11, solo al telefono: il tasto «Cerca» della barra diventa la lente rossa dentro la casella, in fondo a destra,
   larga quanto la barra è alta (48 px per il dito); la lente grigia a sinistra non si vede (una lente sola) e la casella
   arriva al bordo destro; la parola resta il nome del tasto per la lettura vocale (aria-label). I suggerimenti della ricerca
   da bordo a bordo dello schermo, sopra il margine laterale della fascia (--margine-fascia di .testata .dentro, che vale al
   telefono). Sul computer il tasto di sempre: la sua lente non si vede. */
.tasto-cerca > svg { display: none; }
@media (max-width: 767px) {
  .barra-normale .cerca-riga { --largo-tasto: var(--alto-casella); --spazio-tasto: 0px; }
  .barra-normale .campo svg, .barra-normale .tasto-cerca > span { display: none; }
  .barra-normale .campo input { padding: 0 var(--largo-tasto) 0 1rem; }
  .barra-normale .tasto-cerca { position: absolute; top: 0; right: 0; padding: 0; background: none; box-shadow: none; color: var(--accent-color); }
  .barra-normale .tasto-cerca > svg { display: block; width: 1.5rem; height: 1.5rem; }
  .barra-normale .cerca-riga > .scegli-voci { left: calc(-1 * var(--margine-fascia)); right: calc(-1 * var(--margine-fascia)); border-radius: 0; }
}

/* ===== Sezioni della home (1 a 1) ===== */
.sezione { padding: 4rem 0; }
.sezione.grigia { background: var(--g50); }
.sezione h2 { font-size: 1.5rem; font-weight: 700; color: var(--g900); text-align: center; margin-bottom: .75rem; }
.sezione .sotto { color: var(--g500); text-align: center; max-width: 36rem; margin: 0 auto 3rem; }
@media (min-width: 768px) { .sezione { padding: 5rem 0; } .sezione h2 { font-size: 1.875rem; } }
.dove { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
@media (min-width: 1024px) { .dove { grid-template-columns: 1fr 1fr; } }
.scheda-contatti { background: var(--secondary-color); border-radius: 1rem; box-shadow: var(--ombra-sm); border: 1px solid var(--g100); padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.scheda-contatti h3 { font-size: 1.125rem; font-weight: 600; color: var(--g900); margin-bottom: 1.5rem; }
.scheda-contatti .voce { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.scheda-contatti .voce:last-child { margin-bottom: 0; }
.icona-q { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.icona-q svg { width: 1.25rem; height: 1.25rem; }
.icona-q.blu { background: color-mix(in srgb, var(--primary-color) 10%, transparent); color: var(--primary-color); }
.voce:hover .icona-q.blu { background: var(--primary-color); color: var(--secondary-color); }
.icona-q.verde { background: var(--verde50); color: var(--verde600); }
.voce:hover .icona-q.verde { background: var(--verde600); color: var(--secondary-color); }
.icona-q.rossa { background: color-mix(in srgb, var(--accent-color) 10%, transparent); color: var(--accent-color); }
.etichetta-p { font-size: .75rem; color: var(--g400); text-transform: uppercase; letter-spacing: .025em; font-weight: 500; }
.valore-p { color: var(--g800); font-weight: 500; }
.mappa { border-radius: 1rem; overflow: hidden; box-shadow: var(--ombra-sm); border: 1px solid var(--g100); min-height: 350px; }
.mappa iframe { width: 100%; height: 100%; min-height: 350px; border: 0; display: block; }
/* Il riquadro della mappa prima del tocco (D-08 della Phase 24.4) */
.mappa-chiusa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 2rem 1.5rem; text-align: center; background: var(--secondary-color); }
.mappa-chiusa strong { font-weight: 600; color: var(--g900); }
.mappa-chiusa .tasto-secondario { margin-top: 0; }
.mappa-chiusa p { font-size: .875rem; color: var(--g500); max-width: 22rem; }
.mappa-chiusa a { font-size: .875rem; font-weight: 600; color: var(--primary-color); text-decoration: underline; }
/* «Perché sceglierci» con 4 schede alte uguali (D-19 della Phase 24.3): una sotto l'altra al telefono, 2 × 2 da 768 px, 4 in fila da 1024 px. */
.pilastri { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 2rem; }
@media (min-width: 768px) { .pilastri { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pilastri { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .pilastri .pilastro { padding: 2rem 1.5rem; } }
.pilastro { text-align: center; padding: 2rem; border-radius: 1rem; border: 1px solid var(--g100); background: var(--secondary-color); transition: all .3s; }
.pilastro:hover { border-color: color-mix(in srgb, var(--primary-color) 20%, transparent); box-shadow: var(--ombra-lg); }
.pilastro .ic { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 1rem; margin-bottom: 1.5rem; transition: transform .15s; }
.pilastro:hover .ic { transform: scale(1.1); }
.pilastro .ic svg { width: 2rem; height: 2rem; }
.pilastro .ic.blu { background: color-mix(in srgb, var(--primary-color) 10%, transparent); color: var(--primary-color); }
.pilastro .ic.rossa { background: color-mix(in srgb, var(--accent-color) 10%, transparent); color: var(--accent-color); }
.pilastro .ic.verde { background: var(--verde50); color: var(--verde600); }
.pilastro h3 { font-size: 1.125rem; font-weight: 600; color: var(--g900); margin-bottom: .5rem; }
.pilastro p { color: var(--g500); font-size: .875rem; line-height: 1.625; }

/* ===== Piè di pagina (1 a 1) ===== */
.piede { background: linear-gradient(to bottom, var(--g900), var(--g950)); color: var(--g300); }
.piede .wrap6 { padding-top: 3rem; padding-bottom: 3rem; }
.piede .colonne { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .piede .wrap6 { padding-top: 4rem; padding-bottom: 4rem; } .piede .colonne { grid-template-columns: repeat(3, 1fr); } }
.piede .marca-piede { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.piede .marca-piede img { height: 2.5rem; width: auto; object-fit: contain; border-radius: .25rem; }
.piede .marca-piede span { font-size: 1.25rem; font-weight: 700; color: var(--secondary-color); }
.piede p { font-size: .875rem; color: var(--g400); line-height: 1.625; }
.piede h4 { color: var(--secondary-color); font-weight: 600; margin-bottom: 1rem; }
.piede ul { list-style: none; margin: 0; padding: 0; font-size: .875rem; display: grid; gap: .5rem; }
.piede ul.contatti { gap: .75rem; }
.piede li { display: flex; align-items: flex-start; gap: .5rem; }
.piede li svg { width: 1rem; height: 1rem; color: var(--g500); margin-top: .125rem; }
.piede a:hover { color: var(--secondary-color); }
.piede .copy { border-top: 1px solid var(--g800); padding-top: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .75rem; font-size: .75rem; color: var(--g500); }
@media (min-width: 768px) { .piede .copy { flex-direction: row; } }
/* Dati legali e link della privacy nel piè di pagina (D-11 della Phase 24.4) */
.piede .legale { border-top: 1px solid var(--g800); padding: 1.5rem 0; margin-bottom: 0; display: grid; gap: .5rem; }
.piede .legale p { font-size: .8125rem; }
.piede .link-legali { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .875rem; font-weight: 600; color: var(--g300); }

/* ===== site.css originale (1 a 1) ===== */
.thumb-item { cursor: pointer; border: var(--bordo-miniatura) solid transparent; border-radius: .75rem; overflow: hidden; transition: border-color .2s, opacity .2s; flex-shrink: 0; }
.thumb-item:hover { opacity: .85; }
.thumb-item.active { border-color: var(--accent-color); }
.img-not-loaded { opacity: 0 !important; }
.img-loaded { transition: opacity .3s ease; }
.img-loader { position: absolute; inset: 0; z-index: 5; background: linear-gradient(90deg, var(--g100) 25%, var(--g200) 50%, var(--g100) 75%);
  background-size: 200% 100%; animation: imgShimmer 1.5s ease-in-out infinite; }
.img-loader-hide { opacity: 0; transition: opacity .3s ease; }
@keyframes imgShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Caselle dei filtri (riquadro dell'auto e barra dei filtri degli elenchi; le tendine Select2 rese con <select>) ===== */
.pagina { padding-top: 2rem; padding-bottom: 2rem; }
/* Le colonne le danno le due sole griglie, .fila-auto (riquadro dell'auto) e .barra-filtri (barra della Categoria). */
.filtri-griglia { display: grid; gap: .75rem; }
/* Il nome sta dentro la casella; l'etichetta resta solo per i lettori di schermo (Phase 24.7): fuori dalla vista, mai tagliata via. */
.solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Una regola sola per le caselle dei menu e dell'anno (D-09; D-29e, N9 della Phase 24.7): i menu, le loro caselle «scrivi e
   scegli» e la casella dell'anno dell'auto, nel riquadro dell'auto e nella barra della Categoria, alte come la barra, anche
   vuote o spente; sotto i 768 px il testo a 16 px, così il telefono (iOS) non ingrandisce la pagina quando la si tocca. */
.filtri-griglia > div { position: relative; }
.filtri-griglia select, .filtri-griglia input { width: 100%; height: var(--alto-casella); border: 1px solid var(--g300);
  background: var(--secondary-color); border-radius: .5rem; color: var(--g900); font: inherit; font-size: 1rem; }
@media (min-width: 768px) { .filtri-griglia select, .filtri-griglia input { font-size: 1.0625rem; } }
.filtri-griglia input::placeholder { color: var(--g700); }
.filtri-griglia select:disabled, .filtri-griglia input:disabled { color: var(--g600); background-color: var(--g100); border-color: var(--g200); }
.filtri-griglia select, .filtri-griglia input[role="combobox"] { padding: 0 2rem 0 .75rem; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; }
.filtri-griglia select:focus, .filtri-griglia input:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 30%, transparent); }
.filtri-griglia input[role="combobox"]::placeholder { color: var(--g500); }
.filtri-griglia input:disabled::placeholder { color: var(--g400); }
/* L'elenco delle voci di una casella «scrivi e scegli»: nei menu sotto la casella, nella ricerca libera sotto la riga del campo
   e largo come tutta la riga (campo + tasto); sopra il resto; mai una barra di scorrimento orizzontale (una parola troppo
   lunga va a capo); 8 voci alla vista, poi si scorre; ogni voce alta --tocco (44 px per il dito); le serie rientrate; la voce
   scelta in grassetto; quella accesa (tastiera) o sotto il mouse in grigio deciso (owner 04/11). */
.scegli-voci { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .25rem; list-style: none;
  max-height: calc(8 * var(--tocco) + .5rem); overflow-x: hidden; overflow-y: auto; background: var(--secondary-color); border-radius: .75rem;
  box-shadow: var(--ombra-lg), 0 0 0 1px var(--g200); text-align: left; }
/* Nei menu (riquadro dell'auto e Categoria) l'elenco è largo quanto le sue voci, così quasi ogni modello sta su una riga:
   almeno quanto la casella, al massimo 24rem e mai più dello schermo meno 3,25rem (il bordo del riquadro dell'auto, 2,25rem,
   e 1rem di margine). Si apre verso destra; le caselle sul bordo destro lo aprono verso sinistra: la Categoria sempre, al
   telefono anche quelle della colonna di destra del riquadro (Modello). */
.filtri-griglia .scegli-voci { right: auto; width: max-content; min-width: 100%; max-width: min(24rem, calc(100vw - 3.25rem)); }
.barra-filtri .scegli-voci { left: auto; right: 0; }
@media (max-width: 767px) { .fila-auto .filtri-griglia > div:nth-child(even) .scegli-voci { left: auto; right: 0; } }
.scegli-voci li { min-height: var(--tocco); display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .375rem .75rem; border-radius: .5rem; font-size: .9375rem; color: var(--g800); cursor: pointer; }
.scegli-voci li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.scegli-voci li[role="option"]:hover, .scegli-voci li.accesa { background: var(--g300); }
.scegli-voci li[aria-selected="true"] { font-weight: 600; }
.scegli-voci li.serie { padding-left: 1.75rem; color: var(--g600); }
.scegli-voci .tipo { flex-shrink: 0; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--g500); }
.scegli-voci li[role="option"]:hover .tipo, .scegli-voci li.accesa .tipo { color: var(--g700); }
/* I pezzi di una voce del menu Modello (data-pezzo-… di lib/pagine/pezzi.js): il nome in grassetto, il codice della serie
   (o «(tutte le serie)») normale e piccolo, gli anni piccoli e in grassetto, mai spezzati a capo sul trattino. */
.scegli-voci .pezzo-nome, .scegli-voci .pezzo-anni { font-weight: 700; }
.scegli-voci .pezzo-anni { white-space: nowrap; }
.scegli-voci .pezzo-codice { font-weight: 400; }
.scegli-voci .pezzo-codice, .scegli-voci .pezzo-anni { font-size: .82em; }
/* La casella dell'anno: corta, solo cifre; scritto male ha il bordo e l'aiuto sotto col colore d'errore della pagina d'errore. */
.casella-anno input { padding: 0 .75rem; }
.casella-anno input.sbagliato { box-shadow: 0 0 0 2px var(--accent-color); }
.casella-anno .aiuto { margin-top: .25rem; font-size: .75rem; color: var(--accent-color); }
/* Sotto i 768 px il campo della ricerca a 16 px: così il telefono (iOS) non ingrandisce la pagina quando lo si tocca (le caselle
   dei menu e dell'anno lo hanno dalla loro regola sola). */
@media (max-width: 767px) { .campo input { font-size: 1rem; } }
/* La riga in cima a un elenco (D-19 della Phase 24.7, al posto della colonna dei filtri), nello stesso contenitore della home:
   a sinistra il titolo col numero («Ricambi · 113 trovati»), a destra la barra dei filtri (solo nei ricambi: la Categoria,
   una casella come quelle del riquadro dell'auto). Al telefono il titolo sopra e la barra sotto, a tutta larghezza. */
/* Il bersaglio della ricerca (owner 04/11), subito sopra la riga del titolo: sul computer non c'è, così il browser non scorre;
   al telefono la pagina dei risultati si apre lì, con un piccolo margine sopra. */
.ancora-risultati { display: none; }
@media (max-width: 767px) { .ancora-risultati { display: block; scroll-margin-top: .5rem; } }
.testa-elenco { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.5rem; }
.titolo-pagina { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
.titolo-pagina h1, .titolo-pagina #conteggio { font-size: 1.375rem; font-weight: 700; color: var(--g900); }
.titolo-pagina #conteggio { font-weight: 400; color: var(--g500); }
/* La frase dei pezzi da smontare e l'etichetta «Solo l'auto …» vanno a capo, sotto il titolo. */
.titolo-pagina > p:not(#conteggio) { flex-basis: 100%; margin-top: .25rem; font-size: .875rem; color: var(--g500); }
@media (min-width: 768px) { .titolo-pagina h1, .titolo-pagina #conteggio { font-size: 1.875rem; } }
.barra-filtri { flex: 0 1 18rem; min-width: 0; }
.barra-filtri .filtri-griglia { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 767px) { .barra-filtri { flex-basis: 100%; } }
.vuoto { text-align: center; padding: 5rem 0; }
.vuoto > svg { margin: 0 auto 1rem; width: 4rem; height: 4rem; color: var(--g300); display: block; }
.vuoto p, .vuoto h1 { color: var(--g500); font-size: 1.125rem; }
.vuoto h1 { font-weight: 400; }
.vuoto .piccolo { font-size: .875rem; margin-top: .5rem; }
/* L'elenco vuoto dopo una ricerca (owner 04/11, anteprime/bozzetto-ricerca-sda/): una riga bassa con l'icona piccola, il
   testo, il tasto verde (misure della striscia, sopra) e «Cancella la ricerca» piccolo; al telefono il tasto a tutta riga. */
.vuoto.vuoto-compatto { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; text-align: left; padding: 1rem 1.25rem; background: var(--secondary-color); border: 1px solid var(--g200); border-radius: 1rem; box-shadow: var(--ombra-sm); }
.vuoto-compatto > svg { width: 2.25rem; height: 2.25rem; margin: 0; flex: none; }
.vuoto-compatto .vuoto-testo { flex: 1 1 16rem; min-width: 0; }
.vuoto-compatto .vuoto-testo p { font-size: 1.0625rem; font-weight: 700; color: var(--g900); }
.vuoto-compatto .vuoto-testo .piccolo { margin-top: .125rem; font-size: .875rem; font-weight: 400; color: var(--g500); }
.vuoto-compatto .vuoto-tasti { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vuoto-compatto .cancella { font-size: .875rem; color: var(--g500); text-decoration: underline; }
@media (max-width: 767px) { .vuoto-compatto .vuoto-tasti { width: 100%; } .vuoto-compatto a.tasto-wa-grande { flex: 1; white-space: nowrap; } }
.tasto-secondario { display: inline-block; margin-top: 1.25rem; padding: .625rem 1.25rem; border-radius: .75rem; border: 1px solid var(--g200); background: var(--secondary-color); color: var(--g700); font-size: .875rem; font-weight: 600; }
.tasto-secondario:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* ===== Schede (ricostruite: la forma esatta delle schede piene non è nell'originale) ===== */
/* La griglia ferma del sito (D-15, D-19 della Phase 24.7), per tutte le schede corte (home, elenchi, pagina di un'auto,
   riquadro «Anche da smontare»; D-29e N10): schede tutte a vista, larghe e alte uguali; 2 per riga al telefono, 3 dal tablet,
   5 (auto) o 6 (ricambi, pezzi da smontare) dal computer. */
.griglia-ferma { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 768px) { .griglia-ferma { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .griglia-ferma--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .griglia-ferma--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.scheda { display: flex; flex-direction: column; background: var(--secondary-color); border-radius: 1rem; overflow: hidden; box-shadow: var(--ombra-scheda); transition: box-shadow .3s, transform .3s; height: 100%; }
a.scheda-link:hover .scheda { box-shadow: var(--ombra-scheda-su); transform: translateY(-2px); }
a.scheda-link { display: block; height: 100%; }
.photo-carousel { position: relative; aspect-ratio: 4 / 3; background: var(--g100); overflow: hidden; flex-shrink: 0; }
.photo-carousel img.carousel-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.opacity-0 { opacity: 0; }
.carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 2rem; height: 2rem; border-radius: 9999px; border: 0;
  background: color-mix(in srgb, var(--secondary-color) 85%, transparent); color: var(--g800); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; box-shadow: var(--ombra-md); }
.carousel-prev { left: .5rem; } .carousel-next { right: .5rem; }
.photo-carousel:hover .carousel-prev, .photo-carousel:hover .carousel-next { opacity: 1; }
@media (hover: none) { .carousel-prev, .carousel-next { opacity: 1; } }
.carousel-prev svg, .carousel-next svg { width: 1rem; height: 1rem; }
.carousel-dots { position: absolute; left: 0; right: 0; bottom: .5rem; z-index: 6; display: flex; justify-content: center; gap: .375rem; }
.carousel-dot { width: .5rem; height: .5rem; border-radius: 9999px; }
.bg-white { background: var(--secondary-color); } .bg-white-50 { background: color-mix(in srgb, var(--secondary-color) 50%, transparent); }
.foto-assente { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--g400); font-size: .75rem; background: var(--g100); }
.foto-assente svg { width: 2rem; height: 2rem; }
.scheda .corpo { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.scheda .cat { font-size: .75rem; font-weight: 600; color: var(--accent-color); text-transform: uppercase; letter-spacing: .025em; }
/* D-18 della Phase 24.7 (supera D-12 della Phase 24.1): 2 righe riservate a 14px e mai di più, il resto dietro «…»; una regola
   sola. Ricambi, auto e pezzi da smontare ne riservano --righe-titolo (.scheda-ricambio h3, .scheda-auto h3, .scheda-sda h3,
   owner 03/11): cambia solo il numero di righe. */
.scheda h3 { font-size: var(--testo-scheda); font-weight: 600; color: var(--g900); margin-top: .25rem; line-height: var(--riga-titolo); min-height: calc(2em * var(--riga-titolo));
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Owner 03/11 (supera D-18 della Phase 24.7): il titolo dei ricambi, quello di un'auto (il titolo di SCRIC) e l'auto di un pezzo
   da smontare su --righe-titolo righe, una regola sola; al telefono le auto ne hanno 4, gli altri restano a 3. */
.scheda-ricambio h3, .scheda-auto h3, .scheda-sda h3 { min-height: calc(var(--righe-titolo) * 1em * var(--riga-titolo)); -webkit-line-clamp: var(--righe-titolo); line-clamp: var(--righe-titolo); }
@media (max-width: 767px) { .scheda-auto h3 { --righe-titolo: 4; } }
/* Owner 03/11: nella scheda di un'auto il titolo a metà fra quello dei ricambi (.875rem) e il nome delle categorie (1.125rem). */
.scheda-auto h3 { font-size: 1rem; }
.scheda .fondo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .75rem; }
.scheda .codice { white-space: nowrap; font-size: .75rem; color: var(--g400); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.scheda .prezzo { font-size: 1.25rem; font-weight: 700; color: var(--primary-color); }
/* Owner 03/11: «Da smontare» in fondo alla scheda, su una riga, grande quanto il titolo; colore e peso da .chiedi-prezzo. */
.scheda .scritta-sda { font-size: var(--testo-scheda); white-space: nowrap; }
/* Le sezioni a griglia ferma della home (Ultimi ricambi, Categorie, Ultime auto; D-15 della Phase 24.7). */
.sezione-griglia { padding: 3rem 0 2rem; }
.sezione-griglia h2 { font-size: 1.5rem; font-weight: 700; color: var(--g900); }
@media (min-width: 768px) { .sezione-griglia h2 { font-size: 1.875rem; } }
/* La scheda di una categoria (D-17): foto e nome, centrato e più grande; la scheda finisce subito dopo il nome. */
.scheda-categoria .corpo { padding: .75rem 1rem; justify-content: center; }
.scheda-categoria h3 { min-height: 0; margin: 0; text-align: center; font-size: 1.125rem; font-weight: 700; }

/* ===== Pagina di dettaglio (galleria 1 a 1 da site.js; il resto ricostruito) ===== */
.indietro { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 500; color: var(--g500); margin-bottom: 1.25rem; }
.indietro:hover { color: var(--primary-color); }
.indietro svg { width: 1rem; height: 1rem; }
.dettaglio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.dettaglio > div { min-width: 0; }
@media (min-width: 1024px) { .dettaglio { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.galleria { display: flex; flex-direction: column; gap: .75rem; }
.galleria .grande { position: relative; border-radius: 1rem; overflow: hidden; background: var(--secondary-color); box-shadow: var(--ombra-sm); aspect-ratio: 4 / 3; flex: 1; min-width: 0; }
.galleria .grande img#main-photo { width: 100%; height: 100%; object-fit: contain; background: var(--secondary-color); }
#gallery-prev, #gallery-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 0;
  background: color-mix(in srgb, var(--secondary-color) 85%, transparent); color: var(--g800); display: flex; align-items: center; justify-content: center; box-shadow: var(--ombra-md); }
#gallery-prev { left: .75rem; } #gallery-next { right: .75rem; }
#gallery-prev:hover, #gallery-next:hover { background: var(--secondary-color); color: var(--primary-color); }
#gallery-prev svg, #gallery-next svg { width: 1.25rem; height: 1.25rem; }
/* La lista che scorre taglia quello che esce dai suoi bordi: uno spazio interno pari al bordo della miniatura (anche quando
   scorre da sola fino a quella scelta, scroll-padding) lascia intero il bordo rosso della prima e dell'ultima; più spazio
   dal lato della barra di scorrimento (sotto sul telefono, a destra sul computer). */
#thumb-list { display: flex; gap: .5rem; overflow-x: auto; padding: var(--bordo-miniatura) var(--bordo-miniatura) var(--spazio-scorrimento); scroll-padding: var(--bordo-miniatura); }
.thumb-item { width: 4.5rem; height: 4.5rem; background: var(--secondary-color); }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .galleria { flex-direction: row; align-items: flex-start; } #thumb-list { flex-direction: column; overflow-x: hidden; overflow-y: auto; width: max-content; flex-shrink: 0; scrollbar-gutter: stable; order: -1; padding: var(--bordo-miniatura) var(--spazio-scorrimento) var(--bordo-miniatura) var(--bordo-miniatura); }
  .thumb-item { width: 5.25rem; height: 5.25rem; }
}
.info { background: var(--secondary-color); border-radius: 1rem; box-shadow: var(--ombra-sm); border: 1px solid var(--g100); padding: 1.5rem; }
.info .cat { font-size: .75rem; font-weight: 600; color: var(--accent-color); text-transform: uppercase; letter-spacing: .025em; }
.info h1 { font-size: 1.5rem; font-weight: 700; color: var(--g900); line-height: 1.25; margin-top: .25rem; }
.info .prezzo { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin-top: 1rem; }
.info .iva { font-size: .75rem; color: var(--g400); }
.disponibile { display: inline-flex; align-items: center; gap: .375rem; margin-top: .75rem; padding: .25rem .75rem; border-radius: 9999px; background: var(--verde50); color: var(--verde600); font-size: .8125rem; font-weight: 600; }
.disponibile::before { content: ''; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--verde500); }
.tabella-dati { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: .875rem; }
.tabella-dati th { text-align: left; font-weight: 500; color: var(--g500); padding: .5rem 1rem .5rem 0; vertical-align: top; width: 40%; border-top: 1px solid var(--g100); }
.tabella-dati td { color: var(--g800); padding: .5rem 0; border-top: 1px solid var(--g100); word-break: break-word; }
/* Il tasto verde WhatsApp: lo stesso per il tasto grande della pagina di un pezzo e per quello della striscia dei contatti
   (.contatto-wa, misure nella sezione della striscia). La striscia ha una classe sua e non .tasto-wa-grande perché il tasto
   rotondo (initTondoWa di public/sito.js) guarda solo il tasto grande della pagina. */
.tasto-wa-grande, .barra-contatti .contatto-wa { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.5rem; width: 100%; padding: .875rem 1rem; border-radius: .75rem; background: var(--verde-wa); color: var(--secondary-color); font-weight: 600; }
.tasto-wa-grande:hover, .barra-contatti .contatto-wa:hover { filter: brightness(1.05); }
.tasto-wa-grande svg { width: 1.25rem; height: 1.25rem; }
.tasto-tel { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .5rem; width: 100%; padding: .75rem 1rem; border-radius: .75rem; border: 1px solid var(--g200); color: var(--g700); font-weight: 600; font-size: .875rem; }
.tasto-tel:hover { border-color: var(--primary-color); color: var(--primary-color); }
.tasto-tel svg { width: 1rem; height: 1rem; }
.blocco { background: var(--secondary-color); border-radius: 1rem; box-shadow: var(--ombra-sm); border: 1px solid var(--g100); padding: 1.5rem; margin-top: 2rem; }
.blocco h2 { font-size: 1.125rem; font-weight: 600; color: var(--g900); margin-bottom: 1rem; }
.chip { display: inline-block; margin: 0 .375rem .375rem 0; padding: .25rem .625rem; border-radius: .5rem; background: var(--g100); color: var(--g700); font-size: .8125rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.elenco-compat { margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.elenco-compat li { padding: .5rem 0; border-top: 1px solid var(--g100); }
.elenco-compat li:first-child { border-top: 0; }
#wa-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: var(--verde-wa); color: var(--secondary-color);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--verde-wa) 50%, transparent); transition: transform .2s; }
#wa-fab:hover { transform: scale(1.08); }
#wa-fab svg { width: 1.75rem; height: 1.75rem; }

/* ===== Stati: caricamento, errore, senza rete ===== */
.avviso-errore { text-align: center; padding: 4rem 1rem; max-width: 32rem; margin: 0 auto; }
.avviso-errore svg { width: 3.5rem; height: 3.5rem; color: var(--accent-color); margin: 0 auto 1rem; display: block; }
.avviso-errore h2 { font-size: 1.25rem; font-weight: 700; color: var(--g900); }
.avviso-errore p { color: var(--g500); margin-top: .5rem; }
.striscia-rete { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--g900); color: var(--secondary-color); font-size: .875rem; text-align: center; padding: .75rem 1rem; }

/* ===== Pezzi nuovi del sito, costruiti solo con le variabili e le misure del kit qui sopra ===== */
/* La scritta del prezzo da chiedere va a capo se non ci sta, mai tagliata (D-29g della Phase 24.7). */
.chiedi-prezzo { font-size: .9375rem; font-weight: 700; color: var(--primary-color); }
.info .chiedi { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); margin-top: 1rem; }
.scritta-danneggiato { position: absolute; top: .5rem; left: .5rem; z-index: 7; background: var(--accent-color); color: var(--secondary-color); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: .25rem .625rem; border-radius: .5rem; box-shadow: var(--ombra-md); }
.avviso-danneggiato { margin-top: 1rem; padding: .75rem 1rem; border-radius: .75rem; background: var(--rosso50); border-left: 4px solid var(--accent-color); color: var(--g800); font-size: .875rem; }
.avviso-danneggiato b { display: block; color: var(--accent-color); font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; }
.da-smontare { display: inline-flex; align-items: center; margin-top: .75rem; padding: .25rem .75rem; border-radius: 9999px; background: color-mix(in srgb, var(--primary-color) 8%, transparent); color: var(--primary-color); font-size: .8125rem; font-weight: 600; }
.pagine { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .375rem; margin-top: 2.5rem; }
.pagine a, .pagine span { min-width: 2.5rem; height: 2.5rem; padding: 0 .5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; font-size: .875rem; font-weight: 600; }
.pagine a { border: 1px solid var(--g200); background: var(--secondary-color); color: var(--g700); }
.pagine a:hover { border-color: var(--primary-color); color: var(--primary-color); }
.pagine a.attuale { background: var(--primary-color); border-color: var(--primary-color); color: var(--secondary-color); }
.pagine .puntini { color: var(--g400); min-width: 1.25rem; padding: 0; }
.pagine .spenta { border: 1px solid var(--g100); background: var(--secondary-color); color: var(--g300); }
.pagine svg { width: 1rem; height: 1rem; }
.riquadro-sda { margin-top: 3rem; background: var(--secondary-color); border-radius: 1rem; box-shadow: var(--ombra-sm); border: 1px solid var(--g100); padding: 1.5rem; }
/* La testata di una sezione (testaSezione: home, riquadro «Anche da smontare», pagina di un'auto): il titolo e subito di
   fianco, centrato con lui, «Vedi tutti» come tasto rosso (.tasto-cerca); al telefono va sotto se non ci sta (D-22). */
.testa-sezione { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .75rem 1.25rem; margin-bottom: 1.25rem; }
.riquadro-sda h2 { font-size: 1.25rem; font-weight: 700; color: var(--g900); }
.testa-sezione h2 { margin-bottom: 0; }
/* «· M trovati» accanto al titolo della sezione dei pezzi da smontare (owner 04/11), come il numero in cima agli elenchi. */
.testa-sezione h2 .conteggio { font-weight: 400; color: var(--g500); }
.sotto-r { font-size: .875rem; color: var(--g500); margin-top: .25rem; }
.titolo-pagina .tutti { font-size: .875rem; font-weight: 600; color: var(--accent-color); }
.wrap-riquadro { margin-top: 2rem; }
.thumb-item .foto-assente span { display: none; }
/* adattamento: queste classi prendono il posto degli attributi style del bozzetto (nessuno style= nelle pagine) */
.icone-nascoste { position: absolute; }
.solo-auto { margin-top: .5rem; }