/* =========================================================
   GIEMME - componenti.css
   Componenti per le pagine prodotto di nuova generazione (body con classe "pagina-v2").
   Sono generici: per un altro prodotto si riusano cambiando solo il contenuto.

   INDICE
   1. Token e fondo continuo     6. Versioni a confronto
   2. Testata (hero)              7. Tabelle dati
   3. Vetro (card)                8. Schede piccole, dettagli a scomparsa
   4. Sezioni e griglie           9. Display, figure, invito finale
   5. Numeri chiave, menu sezione 10. Accessibilita' / movimento ridotto
   ========================================================= */

/* ---------- 1. TOKEN E FONDO CONTINUO ---------- */
.pagina-v2 {
  --vetro-bg: rgba(255, 255, 255, .07);
  --vetro-bg-hover: rgba(255, 255, 255, .11);
  --vetro-bordo: rgba(255, 255, 255, .16);
  --vetro-blur: blur(14px) saturate(140%);
  --raggio: 20px;
  --raggio-piccolo: 14px;
  --ombra-card: 0 10px 30px rgba(0, 0, 0, .25);
  --spazio-sezione: clamp(64px, 9vw, 120px);
  --altezza-menu: 92px;
  --testo: rgba(255, 255, 255, .86);
  --testo-tenue: rgba(255, 255, 255, .68);
  background: #1b2228;
}
/* ogni immagine del contenuto ha gli angoli arrotondati (Ale, 17 ottobre); :where() tiene la specificita' minima,
   cosi' le regole delle singole componenti (es. i display, 4% / 7.3%) restano valide */
:where(#contenuto) img { border-radius: var(--raggio-piccolo, 14px); }
/* foto del prodotto sfocata e scurita dietro a tutta la pagina (fissa anche su iOS).
   Sta sul body e non su main: cosi' contatti e footer, che hanno uno sfondo proprio, restano sopra. */
.pagina-v2 main { position: relative; color: var(--testo); }
body.pagina-v2::before,
body.pagina-v2::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
body.pagina-v2::before {
  inset: -60px;
  background: var(--hero-bg) center / cover no-repeat;
  filter: blur(20px) brightness(.5);
}
body.pagina-v2::after {
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 22, 32, .3) 0%, rgba(8, 22, 32, .78) 100%);
}

/* ---------- 2. TESTATA ---------- */
.hero-prodotto {
  min-height: min(100svh, 880px);
  display: flex;
  align-items: center;
  padding: 150px 0 120px;
  background:
    linear-gradient(90deg, rgba(8, 20, 28, .92) 0%, rgba(8, 20, 28, .78) 50%, rgba(8, 20, 28, .62) 100%),
    var(--hero-bg) center / cover no-repeat;
}
.hero-prodotto__griglia {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.occhiello {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arancio);
}
.hero-prodotto h1 {
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(42px, 6.5vw, 80px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.hero-prodotto .lead {
  max-width: 48ch;
  margin: 0 0 26px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--testo);
}
.hero-prodotto__foto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.hero-prodotto__foto figure { margin: 0; padding: 20px; text-align: center; }
.hero-prodotto__foto img {   /* 4:3 come le foto: il riquadro coincide con l'immagine e gli angoli arrotondati si vedono */
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45));
}
.hero-prodotto__foto figcaption {
  margin-top: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}
.hero-prodotto__foto figcaption small { display: block; color: var(--testo-tenue); font-weight: 400; letter-spacing: 0; }
@media (max-width: 991.98px) {
  .hero-prodotto { padding: 130px 0 110px; }
  .hero-prodotto__griglia { grid-template-columns: 1fr; }
}

/* percorso della pagina (includes/briciole.php): sopra l'occhiello, in testata */
.briciole { margin: 0 0 22px; font-size: 13px; }
.briciole ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.briciole li { display: inline-flex; align-items: center; color: var(--testo-tenue); }
.briciole li + li::before { content: "›"; margin: 0 9px; color: var(--testo-tenue); }
.briciole a { color: var(--testo-tenue); text-decoration: none; }
.briciole a:hover, .briciole a:focus-visible { color: #fff; text-decoration: underline; }
.briciole [aria-current] { color: #fff; }

/* etichette (pillole) */
.lista-chip { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--vetro-bg);
  border: 1px solid var(--vetro-bordo);
  -webkit-backdrop-filter: var(--vetro-blur);
  backdrop-filter: var(--vetro-blur);
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
}
.chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--arancio); }

/* pulsanti */
.azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.azioni--centrate { justify-content: center; margin-top: 28px; }
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.bottone:hover { transform: translateY(-2px); }
.bottone--pieno { background: var(--arancio); color: #1b1b1b; }
.bottone--pieno:hover, .bottone--pieno:focus { background: #ffb33d; color: #1b1b1b; }
.bottone--vetro {
  background: var(--vetro-bg);
  border-color: var(--vetro-bordo);
  -webkit-backdrop-filter: var(--vetro-blur);
  backdrop-filter: var(--vetro-blur);
  color: #fff;
}
.bottone--vetro:hover, .bottone--vetro:focus { background: var(--vetro-bg-hover); color: #fff; }

/* ---------- 3. VETRO ---------- */
.vetro {
  position: relative;
  padding: 28px;
  border-radius: var(--raggio);
  background: var(--vetro-bg);
  border: 1px solid var(--vetro-bordo);
  -webkit-backdrop-filter: var(--vetro-blur);
  backdrop-filter: var(--vetro-blur);
  box-shadow: var(--ombra-card);
  color: var(--testo);
}
.vetro h3 { margin: 0 0 12px; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.3; }
.vetro p { margin: 0 0 12px; color: var(--testo); font-size: 15.5px; line-height: 1.65; }
.vetro p:last-child { margin-bottom: 0; }
.vetro a:not(.bottone) { color: var(--arancio); text-decoration: underline; text-underline-offset: 3px; }
.vetro a:not(.bottone):hover { color: #ffc266; }
.vetro--link { display: block; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.vetro--link:hover { transform: translateY(-4px); border-color: rgba(255, 156, 0, .6); background: var(--vetro-bg-hover); }
.vetro__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin: -28px -28px 22px;
  padding: 24px;
  border-radius: var(--raggio) var(--raggio) 0 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 70%);
  border-bottom: 1px solid var(--vetro-bordo);
}
.vetro__media img { width: auto; max-width: 100%; max-height: 200px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .4)); }
.numero {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(255, 156, 0, .16);
  border: 1px solid rgba(255, 156, 0, .45);
  color: var(--arancio);
  font-weight: 800;
}

/* ---------- 4. SEZIONI E GRIGLIE ---------- */
.sezione { padding: var(--spazio-sezione) 0 0; scroll-margin-top: calc(var(--altezza-menu) + 60px); }
.sezione:last-of-type { padding-bottom: var(--spazio-sezione); }
.sezione__testa { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.sezione__testa h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.sezione__testa p { margin: 0; color: var(--testo-tenue); font-size: 17px; line-height: 1.6; }
.sezione__link { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--arancio); text-decoration: underline; text-underline-offset: 3px; }   /* link in fondo al testo della sezione, come quelli delle schede (.vetro a) */
.sezione__link:hover { color: #ffc266; }
.sezione__piede { margin: 8px 0 0; text-align: center; }   /* link centrato sotto una griglia (es. materiali -> compatibilita' chimica) */
.sezione__link-multipli { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; margin-top: 4px; }
.sezione__link-multipli .sezione__link { margin-top: 10px; }   /* piu' link in fondo alla sezione */
.sottotitolo { margin: 56px 0 20px; color: #fff; font-size: 22px; font-weight: 700; text-align: center; }
.sottotitolo[id] { scroll-margin-top: calc(var(--altezza-menu) + 70px); }
.tabella-scheda__testo { max-width: 760px; margin: -6px auto 16px; }
.testo-centrato { max-width: 760px; margin: -6px auto 24px; color: var(--testo-tenue); font-size: 16px; line-height: 1.6; text-align: center; }
.portale-schermate { margin-top: 24px; }
.portale-immagine { max-width: 820px; margin: 24px auto; }   /* NIMBUS su piu' dispositivi, sopra le funzioni */
.tabella-dati--scheda td, .tabella-dati--scheda th { white-space: nowrap; }
.tabella-dati.tabella-dati--a-capo td { white-space: normal; min-width: 13rem; line-height: 1.5; text-align: left; }
.tabella-dati--a-capo th[scope="row"] { white-space: nowrap; vertical-align: top; }

/* griglia che si adatta da sola: --min = larghezza minima di ogni scheda */
.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr));
  gap: 24px;
  align-items: stretch;
}
.griglia--2 { --min: 360px; }
.griglia--3 { --min: 280px; }
.griglia--4 { --min: 210px; }
.griglia--5 { --min: 180px; }
.griglia + .griglia { margin-top: 24px; }
/* una composizione per scheda: scheda (4 righe) + titolo + composizione nella stessa colonna, allineati tra le colonne (subgrid) */
.griglia--con-composizione > .colonna-sistema { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
.colonna-sistema > .configuratore__composizione { align-self: start; }
/* una scheda larga quanto una colonna della griglia a 2, al centro (blocchi con 'centrata': es. Centurio Tower sotto MTOWER e WT):
   meta' larghezza finche' le due colonne ci stanno (2 x --min + spazio), poi tutta la larghezza come le schede a una colonna */
.griglia--2.griglia--centrata { grid-template-columns: max(calc((100% - 24px) / 2), min(100%, calc((var(--min) * 2 + 24px - 100%) * 9999))); justify-content: center; }
.affiancati { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
@media (max-width: 991.98px) { .affiancati { grid-template-columns: 1fr; } }
.griglia--connessioni { --min: 240px; align-content: center; }
.vetro--centrato { display: flex; align-items: center; justify-content: center; }
.vetro--centrato img { width: auto; max-width: 100%; max-height: 440px; height: auto; }

/* ---------- 5. NUMERI CHIAVE E MENU DI SEZIONE ---------- */
.striscia-kpi { position: relative; z-index: 2; margin-top: -64px; }
.kpi { padding: 24px 16px; text-align: center; }
.kpi__valore { display: block; color: #fff; font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; line-height: 1.1; }
.kpi__valore small { margin-left: 4px; color: var(--arancio); font-size: .5em; font-weight: 700; }
.kpi__etichetta {
  display: block;
  margin-top: 6px;
  color: var(--testo-tenue);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sottomenu { position: sticky; top: var(--altezza-menu); z-index: 900; margin-top: 40px; padding: 0 12px; }
.sottomenu__lista {
  position: relative;
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 6px;
  overflow-x: auto;
  list-style: none;
  border-radius: 999px;
  background: rgba(20, 30, 38, .72);
  border: 1px solid var(--vetro-bordo);
  -webkit-backdrop-filter: var(--vetro-blur);
  backdrop-filter: var(--vetro-blur);
  box-shadow: var(--ombra-card);
  scrollbar-width: none;
}
.sottomenu__lista::-webkit-scrollbar { display: none; }
.sottomenu a {
  display: block;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--testo);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.sottomenu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sottomenu a.attivo { background: var(--arancio); color: #1b1b1b; }

/* ---------- 6. VERSIONI A CONFRONTO ---------- */
/* le 7 parti (foto, tag, titolo, testo, elenco, tabella, dettaglio) si allineano tra versioni affiancate */
.versione { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; scroll-margin-top: calc(var(--altezza-menu) + 70px); }
.versione__tag {
  margin-bottom: 6px;
  color: var(--arancio);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.versione .tabella-scorri { align-self: start; }
.versione > .dettaglio { align-self: end; }

/* sezione Modelli delle pagine prodotto: fascia d'acqua che si dissolve sopra e sotto (Ale, 16 ottobre) */
#modelli.sezione {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--spazio-sezione) + 40px);
}
#modelli.sezione::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255, 156, 0, .14), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 129, 203, .30), transparent 75%),
    linear-gradient(180deg, rgba(4, 97, 150, 0) 0%, rgba(4, 97, 150, .55) 14%, rgba(10, 52, 82, .75) 55%, rgba(14, 34, 54, .6) 86%, rgba(14, 34, 54, 0) 100%);
  pointer-events: none;
}

/* schemi ingrandibili al clic (main.js, initIngrandisci) */
img.ingrandibile { cursor: zoom-in; }
img.ingrandibile:focus-visible { outline: 2px solid var(--arancio); outline-offset: 4px; }
.ingrandimento {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(8, 16, 24, .92); cursor: zoom-out;
  animation: ingrandimento-entra .2s ease-out;
}
.ingrandimento img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.ingrandimento__chiudi { position: absolute; top: 14px; right: 18px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.ingrandimento__chiudi:hover, .ingrandimento__chiudi:focus-visible { background: var(--arancio); outline: none; }
body.con-ingrandimento { overflow: hidden; }
@keyframes ingrandimento-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ingrandimento { animation: none; } }

/* ---------- 7. TABELLE DATI ---------- */
.tabella-scorri { overflow-x: auto; border-radius: var(--raggio-piccolo); border: 1px solid var(--vetro-bordo); }
.tabella-dati { width: 100%; min-width: 420px; border-collapse: collapse; color: #fff; font-size: 14px; }
.tabella-dati caption {
  caption-side: top;
  padding: 12px 14px;
  color: var(--testo-tenue);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tabella-dati th {
  padding: 10px 12px;
  background: rgba(255, 156, 0, .16);
  color: var(--arancio);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}
.tabella-dati td { padding: 11px 12px; border-top: 1px solid rgba(255, 255, 255, .08); text-align: center; }
.tabella-dati tbody tr:hover td { background: rgba(255, 255, 255, .05); }
/* codice del modello in testa alla riga (configurazioni con 'codice'): ancora #vms-1505, la riga cercata si evidenzia */
/* tabelle con il codice: larghezza automatica (il codice non va a capo), intestazioni a capo tra le parole, schede piu' larghe */
.griglia--configurazioni:has(.tabella-dati--codici) { --min: 330px; }
.tabella-dati.tabella-dati--codici { min-width: 0; }
.tabella-dati--codici thead th { white-space: normal; }
.tabella-dati--codici thead th:first-child { text-align: left; }
.tabella-dati--codici th, .tabella-dati--codici td { padding-left: 10px; padding-right: 10px; }
.tabella-dati--codici tbody th { padding: 11px 10px; text-align: left; border-top: 1px solid rgba(255, 255, 255, .08); background: none; color: #fff; font-size: 14px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.tabella-dati--codici tbody tr:hover th { background: rgba(255, 255, 255, .05); }
.tabella-dati--codici tbody tr[id] { scroll-margin-top: 120px; }
.tabella-dati--codici tbody tr:target th, .tabella-dati--codici tbody tr:target td { background: rgba(255, 156, 0, .22); }

/* ---------- 8. SCHEDE PICCOLE E DETTAGLI A SCOMPARSA ---------- */
.sotto-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 16px 0; }
.mini {
  padding: 14px;
  border-radius: var(--raggio-piccolo);
  background: rgba(0, 0, 0, .2);
  border: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
}
.mini img { display: block; width: auto; max-width: 100%; max-height: 110px; margin: 0 auto 10px; object-fit: contain; }
.mini strong { display: block; margin-bottom: 4px; color: #fff; font-size: 14px; }
.mini > span { display: block; color: var(--testo-tenue); font-size: 13px; line-height: 1.5; }

.dettaglio { margin-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 14px; }
.dettaglio summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.dettaglio summary::-webkit-details-marker { display: none; }
.dettaglio summary::after { content: "+"; color: var(--arancio); font-size: 22px; line-height: 1; transition: transform .2s ease; }
.dettaglio[open] summary::after { transform: rotate(45deg); }


/* scheda accessorio (sonda, manifold, contatore) */
.accessorio { display: flex; flex-direction: column; align-items: center; text-align: center; }
.accessorio img { width: auto; max-width: 100%; height: 140px; margin-bottom: 16px; object-fit: contain; }
.accessorio h3 { font-size: 17px; }
.accessorio p { font-size: 14px; color: var(--testo-tenue); }

/* ---------- 9. DISPLAY, FIGURE, INVITO FINALE ---------- */
.display-stato { text-align: center; }
/* display 667x365 con cornice nera di 8 px e zona colorata arrotondata (raggio 19 px): il raggio in percentuale (27 px)
   resta concentrico alla zona colorata a qualunque dimensione, cosi' gli angoli non risultano smussati */
.display-stato img { width: 100%; height: auto; margin-bottom: 18px; border-radius: 4% / 7.3%; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.display-stato h3 { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; }
.display-stato p { font-size: 14.5px; }
.pallino { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.pallino--verde { background: #59e05a; }
.pallino--giallo { background: #ffd633; }
.pallino--rosso { background: #ff4d4d; }
.pallino--bianco { background: #e6f6ff; }

.figura { margin: 0; display: flex; flex-direction: column; }
.figura a { display: block; }
.figura img { width: 100%; height: auto; border-radius: var(--raggio-piccolo); background: #fff; }
/* display a colori e schermate delle impostazioni della stessa misura: due per riga (anche su tablet), uno sul telefono;
   le schermate sono centrate anche quando sono una o tre */
.griglia--display { --min: 300px; }
.griglia-schermate { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.griglia-schermate > * { flex: 0 1 calc((100% - 24px) / 2); min-width: min(100%, 300px); }
@media (max-width: 660px) { .griglia-schermate > * { flex-basis: 100%; } }
.vetro__media--display { min-height: 0; padding: 20px; background: none; }
.vetro__media--display img { width: 100%; max-height: none; height: auto; filter: none; border-radius: 4% / 7.3%; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.figura--display img { border-radius: 4% / 7.3%; background: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.figura figcaption { margin-top: 14px; color: var(--testo-tenue); font-size: 14px; text-align: center; }

/* titolo e testo allineati tra schede vicine (subgrid su 2 righe) */
.connessione { display: grid; grid-template-columns: 72px 1fr; grid-row: span 2; grid-template-rows: subgrid; column-gap: 16px; row-gap: 0; align-content: start; }
.connessione img { grid-row: 1 / span 2; width: 72px; height: 72px; object-fit: contain; }
.connessione > div { display: contents; }
.connessione h3 { grid-column: 2; font-size: 17px; margin-bottom: 6px; }
.connessione p { grid-column: 2; }
.connessione__stato { display: block; width: fit-content; margin: 6px 0 2px; white-space: nowrap; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--arancio); color: var(--arancio); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }   /* di serie / optional (Ale, 26 ottobre) */
.connessione p { font-size: 14.5px; }

/* Prodotto fuori produzione: riquadro "sostituito da" nella testata (pagina-serie, $serie['sostituito']) */
.sostituito { margin: 0 0 22px; padding: 18px 20px; border-left: 4px solid var(--arancio); }
.sostituito__etichetta { display: inline-block; margin-bottom: 6px; color: var(--arancio); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sostituito p { margin: 0 0 14px; }
.sostituito__link { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

.invito {
  margin-top: 56px;
  padding: clamp(36px, 5vw, 64px) 28px;
  text-align: center;
  background: linear-gradient(135deg, rgba(0, 129, 203, .38), rgba(255, 156, 0, .26));
}
.invito h2 { margin: 0 0 12px; color: #fff; font-size: clamp(26px, 3.5vw, 40px); font-weight: 800; }
.invito p { max-width: 60ch; margin: 0 auto; color: var(--testo); font-size: 17px; }
.invito .azioni { justify-content: center; margin-top: 26px; }

/* ---------- 9b. PAGINE DI SERIE (includes/pagina-serie.php) ---------- */
.hero-prodotto__foto--singola { grid-template-columns: 1fr; width: 100%; max-width: 440px; justify-self: center; }
.hero-prodotto__foto--singola img { aspect-ratio: auto; border-radius: var(--raggio-piccolo); filter: none; }

/* scheda modello */
/* 7 parti fisse (foto, tag, nome, descrizione, chip, dettagli, note): si allineano tra modelli affiancati */
/* card in due parti: la testa (foto, sigla, titolo, testo, modalita') e' allineata con le vicine tramite subgrid,
   il piede (dettagli apribili e note) e' indipendente, cosi' aprire i dettagli di una card non allunga le altre */
.modello-colonna { display: grid; grid-row: span 6; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; min-width: 0; }
.vetro.modello { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; scroll-margin-top: calc(var(--altezza-menu) + 70px); }
.modello--con-piede, .configurazione--con-piede { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; box-shadow: none; }
.modello__piede, .configurazione__piede { align-self: start; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0; }
.modello__piede > .modello__dettagli > .dettaglio:first-child { margin-top: 18px; }
.modello__piede .modello__note { padding-top: 12px; }
.modello > .versione__tag:empty { display: block; margin: 0; }
.modello__note { align-self: start; }
.modello__note .nota-modello { margin-top: 0 !important; }
/* modalita' e caratteristiche: titolo, testo e nota "Su: ..." allineati */
.vetro.scheda-voce { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.scheda-voce > .nota-modello { align-self: start; margin-top: 0 !important; padding-top: 14px; }
.vetro__media--foto { min-height: 0; padding: 0; overflow: hidden; background: none; }
.vetro__media--foto img { width: 100%; max-height: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: none; border-radius: var(--raggio-piccolo, 14px) var(--raggio-piccolo, 14px) 0 0; }   /* foto in testa alla card: sopra tonda, sotto a 90° (Ale) */
.nota-modello { margin-top: auto !important; padding-top: 10px; color: var(--testo-tenue) !important; font-size: 13.5px !important; }

/* etichette piccole e centrate */
.lista-chip--compatta { gap: 6px; margin: 0 0 14px; }
.lista-chip--centrata { justify-content: center; }
.chip--piccola { padding: 4px 11px; font-size: 12.5px; }
.chip--piccola::before { width: 6px; height: 6px; }

/* schede brevi (modalita', caratteristiche) */
.vetro--compatta { display: flex; flex-direction: column; padding: 22px; }
.vetro--compatta h3 { font-size: 17px; }
.vetro--compatta p { font-size: 15px; }
.vetro--senza-spazio { padding: 0; overflow: hidden; }

/* tabella di confronto tra modelli */
.tabella-scorri--piena { border: 0; border-radius: 0; }
.tabella-dati--matrice { min-width: 560px; }
.tabella-dati--matrice thead th:first-child,
.tabella-dati--matrice tbody th[scope="row"] { text-align: left; }
.tabella-dati--matrice tbody th[scope="row"] {
  padding: 11px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.tabella-dati--matrice .gruppo th {
  padding: 10px 16px;
  background: rgba(0, 129, 203, .28);
  color: #fff;
  text-align: left;
}
.si { color: var(--arancio); font-size: 16px; }

/* tabelle lunghe (motore, tabelle[] con fissa/filtro): scorrimento interno, intestazioni e prima colonna fisse */
.tabella-scorri--fissa { max-height: min(72vh, 760px); overflow: auto; overscroll-behavior: contain; }
.tabella-scorri--fissa:focus-visible { outline: 2px solid var(--arancio); outline-offset: -2px; }
.tabella-dati--fissa { border-collapse: separate; border-spacing: 0; }
.tabella-dati--fissa thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(rgba(255, 156, 0, .2), rgba(255, 156, 0, .2)), #1b2228;
  box-shadow: inset 0 -1px 0 rgba(255, 156, 0, .45);
}
.tabella-dati--fissa tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 12rem;
  max-width: 17rem;
  background: #1b2228;
  white-space: normal;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .12);
}
.tabella-dati--fissa thead th:first-child { left: 0; z-index: 3; }
.tabella-dati--fissa tbody th[scope="row"] small { display: block; margin-top: 2px; color: var(--testo-tenue); font-size: 12px; font-weight: 400; }
.tabella-dati--fissa tbody tr:hover th[scope="row"] { background: #262e35; }
@media (max-width: 767.98px) {
  .tabella-dati--fissa tbody th[scope="row"] { min-width: 8.5rem; max-width: 9.5rem; padding: 9px 10px; font-size: 13px; }
  .tabella-dati--fissa tbody th[scope="row"] small { font-size: 11px; }
  .tabella-dati--fissa td { padding: 9px 8px; }
}
.filtro-tabella { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin: 32px auto 32px; max-width: 760px; }
.filtro-tabella__campo {
  flex: 1 1 280px;
  min-width: 0;
  padding: 12px 18px;
  border: 1px solid var(--vetro-bordo);
  border-radius: 999px;
  background: var(--vetro-bg);
  color: #fff;
  font-size: 16px;
}
.filtro-tabella__campo::placeholder { color: var(--testo-tenue); }
.filtro-tabella__campo:focus { outline: none; border-color: var(--arancio); background: var(--vetro-bg-hover); }
.filtro-tabella__conteggio { color: var(--testo-tenue); font-size: 14px; white-space: nowrap; }
.filtro-tabella__vuoto { margin: 0; padding: 18px; color: var(--testo-tenue); text-align: center; }
/* gradi di compatibilita' chimica (approfondimenti-compatibilita-chimica.php) */
.grado { font-weight: 700; }
.grado--1 { color: #6fd08c; }
.grado--2 { color: #e8d36a; }
.grado--3 { color: #ff9c00; }
.grado--4 { color: #ff6b6b; }
.grado--nd { color: rgba(255, 255, 255, .35); }
.no { color: rgba(255, 255, 255, .25); }

/* configurazioni dei dati tecnici: titolo, testo, tabella e nota si allineano tra schede vicine */
.griglia--configurazioni { --min: 260px; }
.configurazione-colonna { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; min-width: 0; }
.configurazione {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}
.configurazione__piede { padding-top: 4px; }
.configurazione__piede .nota-modello { margin: 12px 0 0 !important; }
.configurazione__piede .tabella-scorri { margin-top: 4px; }

.tabella-dati.tabella-dati--compatta { min-width: 0; table-layout: fixed; }
.tabella-dati--compatta th { white-space: normal; overflow-wrap: anywhere; }

/* immagini tecniche (grafici, schemi): fondo chiaro, una o piu' affiancate */
.vetro__media--chiaro { gap: 12px; flex-wrap: wrap; align-content: center; background: rgba(255, 255, 255, .92); }
.vetro__media--chiaro img { flex: 1 1 200px; max-height: 240px; filter: none; }
.vetro__media--schema { padding: 12px; }
.vetro__media--schema img { width: 100%; max-height: none; }
/* blocchi liberi (pagina-serie.php): immagine o numero, titolo, testo e link stanno su 4 righe condivise
   tra le schede affiancate, quindi si allineano anche quando una scheda non ha immagine o link */
.scheda-blocco { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; scroll-margin-top: calc(var(--altezza-menu) + 70px); }
.scheda-blocco--si, .scheda-blocco--no { border: 2px solid var(--esito); background: var(--esito-sfondo); }   /* accento su tutta la card (Ale, 17 ottobre) */
.scheda-blocco--si { --esito: #59e05a; --esito-sfondo: rgba(89, 224, 90, .10); }
.scheda-blocco--no { --esito: #ff4d4d; --esito-sfondo: rgba(255, 77, 77, .10); }
.scheda-blocco--si > h3, .scheda-blocco--no > h3 { color: var(--esito); }
.scheda-blocco--si > h3::before { content: "✓ "; }
.scheda-blocco--no > h3::before { content: "✕ "; }
.scheda-blocco > .vetro__media,
.scheda-blocco > .numero { grid-row: 1; }
.scheda-blocco > .vetro__media { height: auto; min-height: 0; }
.scheda-blocco > .vetro__media--foto { align-items: stretch; }
.scheda-blocco > .vetro__media--foto img { height: 100%; }
/* due foto affiancate nella stessa card (Ale, 24 ottobre: la sonda e la tabella di cosa legge): ognuna in 4:3, a meta' larghezza */
.scheda-blocco > .vetro__media--doppia { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.scheda-blocco > .vetro__media--doppia img { height: auto; border-radius: 0; }
.scheda-blocco > .vetro__media--doppia img:first-child { border-top-left-radius: var(--raggio-piccolo, 14px); }
.scheda-blocco > .vetro__media--doppia img:last-child { border-top-right-radius: var(--raggio-piccolo, 14px); }   /* la foto riempie la riga anche accanto a card piu' alte (Ale, 23 ottobre: molecola dell'MDS) */
.scheda-blocco > .numero { justify-self: start; }
.scheda-blocco > h3 { grid-row: 2; }
.scheda-blocco > .scheda-blocco__testo { grid-row: 3; margin: 0; }
.scheda-blocco > .scheda-blocco__link { grid-row: 4; align-self: end; margin-top: 16px; font-weight: 700; }
.scheda-blocco__link--multipli { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.scheda-blocco__testo p { margin: 0 0 8px; }
.scheda-blocco__elenco { margin: 0; padding-left: 1.2em; list-style: disc; }
.scheda-blocco__elenco li { margin-bottom: 4px; }
.scheda-blocco__elenco li::marker { color: var(--arancio); }
/* vetrina: foto piu' grande delle schede con il testo accanto (es. impianto realizzato) */
.vetrina { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; margin-top: 24px; padding: 0; overflow: hidden; }
.vetrina > .vetro__media { margin: 0; border-radius: 0; }
.vetrina .vetro__media--foto img { border-radius: 0; }   /* la card arrotonda gia' gli angoli esterni */
.vetrina__testo { padding: 32px 40px; }
.vetrina__testo h3 { margin-top: 0; }
@media (max-width: 767.98px) { .vetrina { grid-template-columns: 1fr; } .vetrina__testo { padding: 20px 24px 24px; } }
.vetrina + .griglia { margin-top: 24px; }   /* vetrina sopra le schede (vetrina_prima: pannello di un sistema, Ale 20 ottobre) */
.blocco__immagine { margin-bottom: 24px; }
.blocco__immagine--piena { padding: 0; overflow: hidden; }
.blocco__immagine--piena img { display: block; width: 100%; max-width: none; max-height: none; height: auto; }
.nota-blocco { margin: 20px 0 0; color: var(--testo-tenue); font-size: 14px; text-align: center; }
.dettaglio--tabella { margin-top: 4px; border-top: 0; padding-top: 0; }
/* card colorate a pillola (parametri misurabili, come nelle presentazioni di Ale) */
.pillole { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.pillole li { padding: 10px 12px; border: 4px solid #f39a1e; border-radius: 10px; background: linear-gradient(180deg, #ffffff, #eef0f2); box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  color: #1b2228; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
/* schede tecniche apribili (sonde nei sistemi): una riga per scheda, la tabella si apre al clic */
.dettaglio--scheda { margin-top: 12px; border-top: 0; padding-top: 0; }
.dettaglio--scheda summary { padding: 14px 20px; border: 1px solid var(--vetro-bordo); border-radius: var(--raggio-piccolo); background: var(--vetro-bg); font-size: 16px; }
.dettaglio--scheda summary:hover { background: var(--vetro-bg-hover); }
.dettaglio--scheda[open] summary { margin-bottom: 12px; border-color: rgba(255, 156, 0, .5); }
.dettaglio--tabella summary { padding: 10px 14px; border-radius: var(--raggio-piccolo); background: rgba(255, 156, 0, .14); font-size: 14px; }
.dettaglio--tabella[open] summary { margin-bottom: 10px; }

/* ---------- 9c. PAGINE CATEGORIA (includes/pagina-categoria.php) ---------- */
.filtri {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 32px;
}
.filtri + .filtri { margin-top: -18px; }
.filtri__etichetta { flex-basis: 100%; text-align: center; color: var(--testo-tenue); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.filtri a {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--vetro-bg);
  border: 1px solid var(--vetro-bordo);
  -webkit-backdrop-filter: var(--vetro-blur);
  backdrop-filter: var(--vetro-blur);
  color: var(--testo);
  font-size: 14px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.filtri a:hover { background: var(--vetro-bg-hover); color: #fff; }
.filtri a.active { background: var(--arancio); border-color: var(--arancio); color: #1b1b1b; }
.filtri-nota { margin: -12px 0 32px; text-align: center; color: var(--testo-tenue); }   /* nota sotto i filtri (indice degli strumenti: rimando ai sistemi) */
.filtri-nota a { color: var(--arancio); font-weight: 700; }
/* Home: selettore della vista per prodotto o per settore (main.js, initVista; Ale 25 ottobre), come i filtri ma piu' grande */
.vista__bottone { padding: 11px 26px; border-radius: 999px; background: var(--vetro-bg); border: 1px solid var(--vetro-bordo); -webkit-backdrop-filter: var(--vetro-blur); backdrop-filter: var(--vetro-blur); color: var(--testo); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease; }
.vista__bottone:hover { background: var(--vetro-bg-hover); color: #fff; }
.vista__bottone.active { background: var(--arancio); border-color: var(--arancio); color: #1b1b1b; }
.vista__bottone:focus-visible { outline: 2px solid var(--arancio); outline-offset: 2px; }
[data-vista-pannello][hidden] { display: none; }
[data-vista-pannello] + [data-vista-pannello] { margin-top: 40px; }   /* senza JS: le due viste una sotto l'altra */
/* 6 parti fisse (foto, tipo, nome, testo, chip, link): si allineano tra schede affiancate (anche col filtro attivo) */
.portfolio-items > div { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
.vetro.scheda-serie { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.scheda-serie > .versione__tag:empty, .scheda-serie > p:empty, .scheda-serie > .lista-chip:empty { margin: 0; }
.portfolio-items > div.nascosto { display: none; }
.scheda-serie { display: flex; flex-direction: column; width: 100%; color: var(--testo); text-decoration: none; }
.scheda-serie:hover, .scheda-serie:focus { color: var(--testo); }
.scheda-serie h3 { font-size: 22px; }
.scheda-serie__vai {
  margin-top: auto;
  padding-top: 12px;
  color: var(--arancio);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.scheda-serie:hover .scheda-serie__vai span { display: inline-block; transform: translateX(4px); transition: transform .2s ease; }

/* ---------- 9d. HOME ---------- */
body.pagina-home { --hero-bg: url(../../img/intro/intro-bg.webp); }
.pagina-home .hero-prodotto h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.05; }
.affiancati--testo { grid-template-columns: 1.7fr 1fr; align-items: stretch; }
@media (max-width: 991.98px) { .affiancati--testo { grid-template-columns: 1fr; } }
.certificazione { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--testo); }
.certificazione:hover { color: var(--testo); }
.certificazione img { width: 140px; height: auto; margin: 10px 0 18px; }

/* ---------- 9e. PAGINE DI SERVIZIO (note legali, 404, ricerca) ---------- */
body.pagina-servizio { --hero-bg: url(../../img/intro/intro-bg.webp); }
.testata-servizio { padding: 150px 0 0; }
.testata-servizio--sola { min-height: 70svh; padding-bottom: var(--spazio-sezione); }
.testata-servizio .sezione__testa { margin-bottom: 40px; }
.testata-servizio h1 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.testata-servizio .azioni { justify-content: center; margin-top: 28px; }
.pagina-servizio .sezione:last-of-type { padding-bottom: var(--spazio-sezione); }
.testata-servizio + .sezione { padding-top: 0; }

/* testo lungo (note legali) */
.testo-lungo { max-width: 860px; margin: 0 auto; display: grid; gap: 20px; }
.testo-lungo h2 { margin: 0 0 12px; color: #fff; font-size: 21px; font-weight: 700; }
.testo-lungo ul { margin: 0 0 12px; padding-left: 20px; color: var(--testo); font-size: 15.5px; line-height: 1.65; }
.testo-lungo strong { color: #fff; }

/* ricerca */
.ricerca { display: flex; gap: 10px; max-width: 620px; margin: 0 auto 48px; }
.ricerca input {
  flex: 1;
  min-width: 0;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid var(--vetro-bordo);
  background: var(--vetro-bg);
  -webkit-backdrop-filter: var(--vetro-blur);
  backdrop-filter: var(--vetro-blur);
  color: #fff;
  font-size: 16px;
}
.ricerca input::placeholder { color: var(--testo-tenue); }
.ricerca input:focus { outline: 2px solid var(--arancio); outline-offset: 2px; }
.ricerca .bottone { border: 0; }
.risultati { max-width: 960px; margin: 0 auto; display: grid; gap: 14px; }
.risultati__conteggio { margin: 0 0 4px; color: var(--testo-tenue); text-align: center; line-height: 1.7; }
.risultati__conteggio a, .invito a:not(.bottone) { color: var(--arancio); }   /* i bottoni dell invito tengono i loro colori (Ale, 25 ottobre: testo arancione su fondo arancione) */
/* filtro per categoria (chip con il numero dei risultati) */
.risultati__filtri { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 10px; }
.risultati__filtri a {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--vetro-bordo); background: var(--vetro-bg); color: var(--testo); font-size: 14px; text-decoration: none;
}
.risultati__filtri a span { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12px; font-weight: 700; }
.risultati__filtri a:hover { background: var(--vetro-bg-hover); color: #fff; }
.risultati__filtri a.attivo { border-color: var(--arancio); background: rgba(255, 156, 0, .18); color: #fff; }
.risultato { display: flex; gap: 20px; align-items: flex-start; padding: 18px; color: var(--testo); }
.risultato__media { flex: none; }
.risultato__img { display: block; width: 132px; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.risultato__corpo { min-width: 0; }
.risultato__corpo .occhiello { margin-bottom: 4px; }
.risultato h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.vetro.risultato h2 a { color: #fff; font-weight: 700; text-decoration: none; }
.vetro.risultato h2 a:hover { color: var(--arancio); }
.risultato__sezione { color: var(--testo-tenue); font-weight: 600; }
.risultato p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.risultato mark { padding: 0 2px; border-radius: 3px; background: rgba(255, 156, 0, .35); color: #fff; }
.risultato p.risultato__altre { margin-top: 8px; color: var(--testo-tenue); font-size: 13.5px; }
.vetro.risultato .risultato__altre a { color: var(--testo); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.vetro.risultato .risultato__altre a:hover { color: var(--arancio); }
@media (max-width: 575.98px) {
  .ricerca { flex-direction: column; }
  .risultato { gap: 14px; padding: 14px; }
  .risultato__img { width: 84px; }
}

/* ---------- 10. MOVIMENTO RIDOTTO ---------- */
@media (prefers-reduced-motion: reduce) {
  .bottone, .vetro--link, .sottomenu a, .dettaglio summary::after { transition: none; }
  .bottone:hover, .vetro--link:hover { transform: none; }
}

/* ---------- PROBLEMI E MESSAGGI DI ERRORE (pagina-serie, $serie['problemi']) ---------- */
.problemi { display: grid; gap: 20px; align-items: start; }
.problemi--due { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.problemi h3 { margin: 0 0 6px; color: #fff; font-size: 19px; }
.problemi__messaggi h3 { padding: 22px 22px 12px; margin: 0; }
.guasto { margin-top: 12px; }
.guasto summary { color: #fff; }
.guasto__voci { display: grid; gap: 10px; margin: 12px 0 4px; padding: 0; list-style: none; }
.guasto__voci li { display: grid; gap: 2px; padding: 10px 14px; border-left: 3px solid var(--arancio); border-radius: 0 var(--raggio-piccolo) var(--raggio-piccolo) 0; background: rgba(255, 255, 255, .05); }
.guasto__voci strong { color: #fff; font-size: 15px; }
.guasto__voci span { color: var(--testo); font-size: 14px; }
.tabella-messaggi td, .tabella-messaggi th { vertical-align: top; text-align: left; }
.codice { display: inline-block; max-width: 100%; padding: 3px 8px; border-radius: 6px; background: rgba(255, 156, 0, .16); color: #fff; font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.problemi__tabelle { display: grid; gap: 20px; }
.problemi__nota { margin: 0; padding: 12px 22px 18px; color: var(--testo-tenue); font-size: 13px; }
.problemi__consigli { margin-top: 20px; }
.tabella-messaggi th[scope="row"] { text-transform: none; letter-spacing: 0; font-weight: 600; color: #fff; min-width: 130px; }
@media (max-width: 991.98px) { .problemi--due { grid-template-columns: 1fr; } }
/* su telefono ogni messaggio diventa una scheda: codice, significato, cosa fare */
@media (max-width: 767.98px) {
  .tabella-messaggi { min-width: 0; }
  .tabella-messaggi thead { display: none; }
  .tabella-messaggi tr { display: grid; gap: 6px; padding: 14px 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .tabella-messaggi th, .tabella-messaggi td { display: block; padding: 0; border: 0; min-width: 0; }
  .tabella-messaggi td::before { content: attr(data-etichetta); display: block; color: var(--arancio); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .codice { white-space: normal; }
}

/* ---------- FASI INTERATTIVE (pagina-serie, blocco con 'fasi' => true; JS: main.js initFasi) ---------- */
/* l'altezza segue la larghezza (unita' cqw del contenitore): l'immagine dell'aperta resta circa 4:3 e la didascalia sta sotto */
.fasi-contenitore { container-type: inline-size; }
/* --n = numero di fasi (classe fasi--nN): l'aperta prende 2/3 dello spazio, l'altezza e' 3/4 della sua larghezza piu' la didascalia */
.fasi { --n: 5; --didascalia: 185px; display: flex; gap: 12px; min-height: 480px; min-height: calc((100cqw - (var(--n) - 1) * 12px) * .5 + var(--didascalia)); }   /* minima: se il testo e' lungo la didascalia cresce invece di uscire (Ale, 18 ottobre) */
.fasi--n2 { --n: 2; } .fasi--n3 { --n: 3; } .fasi--n4 { --n: 4; } .fasi--n5 { --n: 5; } .fasi--n6 { --n: 6; }
.fasi--n7 { --n: 7; } .fasi--n8 { --n: 8; } .fasi--n9 { --n: 9; } .fasi--n10 { --n: 10; }
.fase { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--raggio); border: 1px solid var(--vetro-bordo);
        box-shadow: var(--ombra-card); cursor: pointer; background: #0e2236; transition: flex-grow .7s cubic-bezier(.34, 1.36, .5, 1), transform .5s ease; }
.fase.aperta { flex-grow: calc(2 * (var(--n) - 1)); cursor: default; display: flex; flex-direction: column; }
.fase img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease, filter .5s ease; filter: saturate(.75) brightness(.7); }
.fase.aperta img { position: relative; flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; filter: none; }   /* sempre 4:3, mai tagliata */
.fase__testo { position: absolute; inset: auto 0 0 0; padding: 18px 20px 20px; color: #fff; }
.fase.aperta .fase__testo { position: relative; inset: auto; flex: 1 1 auto; background: #0e2236; border-top: 1px solid var(--vetro-bordo); }
.fase__numero { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 50%; background: var(--arancio); color: #fff; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.fase h3 { margin: 0; font-size: 19px; color: #fff; white-space: nowrap; }
.fase p { max-height: 0; margin: 0; overflow: hidden; opacity: 0; color: var(--testo); font-size: 15px; transition: max-height .6s ease, opacity .4s ease .15s, margin .4s ease; }
.fase.aperta p { max-height: 600px; margin-top: 8px; opacity: 1; }
.fase.aperta h3 { white-space: normal; }
/* chiuse: titolo in verticale */
.fase:not(.aperta) h3 { position: absolute; left: 50%; bottom: 72px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); }
.fase:not(.aperta) .fase__testo { inset: 0; background: linear-gradient(180deg, rgba(8, 24, 40, .1), rgba(8, 24, 40, .7)); display: flex; align-items: flex-end; justify-content: center; }
/* entrata: la prima si apre con un rimbalzo, la seconda spunta un po' dal basso */
.fasi.in-vista .fase:nth-child(1) { animation: fase-rimbalzo 1.1s cubic-bezier(.3, 1.6, .5, 1) both; }
.fasi.in-vista .fase:nth-child(2):not(.aperta) { animation: fase-spunta 1s ease .5s both; transform: translateY(-14px); }
.fasi.in-vista.toccata .fase:nth-child(2):not(.aperta) { animation: none; transform: none; }
@keyframes fase-rimbalzo { 0% { transform: scale(.92); opacity: 0; } 55% { transform: scale(1.03); opacity: 1; } 75% { transform: scale(.99); } 100% { transform: scale(1); } }
@keyframes fase-spunta { 0% { transform: translateY(40px); opacity: .4; } 70% { transform: translateY(-20px); } 100% { transform: translateY(-14px); opacity: 1; } }
@media (max-width: 767.98px) {
  .fasi { flex-direction: column; height: auto; }
  .fase { flex: none; height: 70px; transition: height .6s cubic-bezier(.34, 1.3, .5, 1); }
  .fase.aperta { height: auto; min-height: 380px; min-height: calc(75cqw + 190px); }
  .fase:not(.aperta) h3 { position: static; writing-mode: horizontal-tb; transform: none; }
  .fase:not(.aperta) .fase__testo { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 16px; }
  .fase:not(.aperta) .fase__numero { margin: 0; }
  .fasi.in-vista .fase:nth-child(2):not(.aperta) { transform: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fase, .fase img, .fase p { transition: none; }
  .fasi.in-vista .fase { animation: none !important; transform: none !important; }
}
/* bottone verso la pagina dedicata del sistema, in fondo alla card del modello */
.modello__link { display: inline-block; margin-top: 16px; }   /* dentro .modello__chip: la card resta a 5 righe (subgrid) */

/* Composizione come linea guida (blocchi con 'percorsi', Ale 19 ottobre): passi da sinistra a destra, scelte separate da "oppure" */
.percorso { margin-top: 34px; }
.percorso + .percorso { margin-top: 56px; }
.percorso__testa { margin-bottom: 18px; text-align: center; }
.percorso__testa h3 { margin: 0 0 6px; color: #fff; font-size: 24px; font-weight: 800; }
.percorso__testa p { max-width: 760px; margin: 0 auto; color: var(--testo-tenue); font-size: 16px; line-height: 1.6; }
.percorso__passi { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.percorso__passi--2 { grid-template-columns: repeat(2, 1fr); }
.percorso__passi--3 { grid-template-columns: repeat(3, 1fr); }
.percorso__passi--4 { grid-template-columns: repeat(4, 1fr); }
.percorso__passo { position: relative; display: flex; flex-direction: column; gap: 12px; }
.percorso__passo:not(:last-child)::after {   /* freccia verso il passo successivo */
  content: "→"; position: absolute; top: 2px; right: -19px; color: var(--arancio); font-size: 20px; font-weight: 800; line-height: 1; }
.percorso__titolo { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.percorso__numero { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--arancio); color: #1b1b1b; font-size: 14px; letter-spacing: 0; }
.percorso__voce { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.percorso__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.percorso__corpo { padding: 14px 16px 16px; }
.percorso__corpo h4 { margin: 0 0 6px; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.3; }
.percorso__corpo p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; }
.percorso__corpo a { font-size: 14px; font-weight: 700; }
.percorso__etichetta { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--vetro-bordo); color: var(--testo-tenue); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.percorso__etichetta--prima { border-color: var(--arancio); background: var(--arancio); color: #1b1b1b; }
.percorso__oppure { display: flex; align-items: center; gap: 10px; color: var(--testo-tenue); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.percorso__oppure::before, .percorso__oppure::after { content: ""; flex: 1; height: 1px; background: var(--vetro-bordo); }
@media (max-width: 991.98px) {
  .percorso__passi--3, .percorso__passi--4 { grid-template-columns: repeat(2, 1fr); }
  .percorso__passo::after { display: none; }
}
@media (max-width: 575.98px) {
  .percorso__passi--2, .percorso__passi--3, .percorso__passi--4 { grid-template-columns: 1fr; }
}

/* Guida alla scelta del modello delle pompe (pagina-serie.php, #guida; Ale 25 ottobre): stile del configuratore + campi numerici */
.guida__campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.guida__campo { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--raggio-piccolo); background: var(--vetro-bg); border: 1px solid var(--vetro-bordo); color: #fff; }
.guida__campo > span { font-weight: 700; }
.guida__campo input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--vetro-bordo); background: rgba(0, 0, 0, .25); color: #fff; font-size: 18px; font-weight: 700; }
.guida__campo input:focus-visible { outline: 2px solid var(--arancio); outline-offset: 2px; border-color: var(--arancio); }
.guida__campo small { color: var(--testo-tenue); font-size: 13.5px; line-height: 1.4; }
.configuratore__risultato .guida__nota { max-width: 760px; margin: 18px auto 0; text-align: center; }   /* centrata sotto le schede: vince su .nota-blocco (Ale, 26 ottobre) */
/* Guida apribile sotto i filtri dell'indice delle pompe (Ale, 26 ottobre): <details> con il bottone come <summary> */
.guida-apribile { margin: -12px 0 32px; scroll-margin-top: calc(var(--altezza-menu) + 30px); }   /* il salto #guida non finisce sotto il menu fisso */
.guida-apribile > summary { list-style: none; }
.guida-apribile > summary::-webkit-details-marker { display: none; }
.guida-apribile__bottone { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 12px 22px; border: 1px solid var(--arancio); border-radius: 999px; background: rgba(255, 156, 0, .14); color: #fff; font-size: 15px; text-align: center; cursor: pointer; transition: background .2s ease; }
.guida-apribile__bottone:hover { background: rgba(255, 156, 0, .26); }
.guida-apribile__bottone:focus-visible { outline: 2px solid var(--arancio); outline-offset: 3px; }
.guida-apribile__bottone strong { color: var(--arancio); }
.guida-apribile__bottone::after { content: ''; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--arancio); border-bottom: 2px solid var(--arancio); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.guida-apribile[open] > .guida-apribile__bottone::after { transform: translateY(2px) rotate(-135deg); }
.guida-apribile__corpo { margin-top: 18px; padding: 28px; }
.guida-apribile__testa { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.guida-apribile__testa h3 { margin-bottom: 8px; color: #fff; }
.guida-apribile__testa p { margin: 0; color: var(--testo-tenue); }
@media (max-width: 575.98px) { .guida-apribile__corpo { padding: 20px 14px; } }
.configuratore__sistema.guida__proposte { max-width: none; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }   /* guida generale: consigliata e alternative affiancate */
.guida__proposte--2 { max-width: 860px; }
.configuratore__sistema.guida__proposte--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }   /* tre sistemi + stazioni: quattro in fila */
.configuratore__opzioni--piccole { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }   /* guida strumenti: parametri a caselle */
.configuratore__opzioni--piccole .configuratore__opzione > span { padding: 11px 14px; }
.guida__aiuto { margin: -4px 0 12px; color: var(--testo-tenue); font-size: 14px; }
.guida__origine { display: block; margin-bottom: 6px; color: var(--arancio); font-size: 13.5px; font-weight: 600; }   /* sistema di un altro settore, prima riga del testo */
.guida__nessuno { max-width: 640px; margin: 0 auto; text-align: center; }
.guida__nessuno .bottone { margin-top: 10px; }
.guida__stazioni { margin-top: 24px; }   /* card delle stazioni di dosaggio sotto il messaggio "nessun sistema standard" */

/* Configuratore (blocchi con 'configuratore', Ale 19 ottobre): domande a scelta e sistema consigliato */
.configuratore__domande { display: grid; gap: 22px; max-width: 980px; margin: 0 auto; }
.configuratore__domanda { margin: 0; padding: 0; border: 0; min-width: 0; }
.configuratore__domanda[hidden] { display: none; }
.configuratore__domanda legend { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.configuratore__opzioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.configuratore__opzione { position: relative; cursor: pointer; }
.configuratore__opzione input { position: absolute; opacity: 0; pointer-events: none; }
.configuratore__opzione > span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border-radius: var(--raggio-piccolo); background: var(--vetro-bg); border: 1px solid var(--vetro-bordo); color: #fff; transition: border-color .15s, background .15s; }
.configuratore__opzione small { color: var(--testo-tenue); font-size: 13.5px; line-height: 1.4; }
.configuratore__opzione:hover > span { border-color: rgba(255, 255, 255, .45); }
.configuratore__opzione input:checked + span { border-color: var(--arancio); background: rgba(255, 156, 0, .16); box-shadow: 0 0 0 1px var(--arancio) inset; }
.configuratore__opzione input:focus-visible + span { outline: 2px solid var(--arancio); outline-offset: 2px; }
.configuratore__invito { margin: 26px 0 0; color: var(--testo-tenue); text-align: center; }
.configuratore__invito[hidden], .configuratore__risultato[hidden] { display: none; }
.configuratore__risultato { margin-top: 30px; }
.configuratore__sistema { max-width: 560px; margin: 0 auto; }   /* il sistema: una card come le altre, al centro */
.configuratore__sistema h3 .percorso__etichetta { display: table; margin-bottom: 10px; }
.configuratore__sistema .scheda-blocco__link--multipli { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.configuratore__sottotitolo { margin: 34px 0 16px; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.configuratore__composizione { --min: 160px; gap: 16px; }   /* composizione: card piu' piccole, fino a 6 per riga */
.configuratore__composizione .scheda-blocco { padding: 18px; }
.configuratore__composizione .scheda-blocco > .vetro__media { margin: -18px -18px 16px; }
.configuratore__composizione .scheda-blocco h3 { font-size: 16px; }
.configuratore__composizione .scheda-blocco p { font-size: 14px; line-height: 1.5; }
.configuratore__composizione .scheda-blocco__link { font-size: 14px; }
/* composizione a righe: foto a sinistra (angoli tondi solo a sinistra), testo a destra (anteprima, Ale 23 ottobre) */
.configuratore__composizione--righe { --min: 340px; }
.configuratore__composizione--righe .scheda-blocco { grid-row: auto; grid-template-rows: auto 1fr auto; grid-template-columns: 42% minmax(0, 1fr); column-gap: 16px; padding: 0; align-content: stretch; }
.configuratore__composizione--righe .scheda-blocco > .vetro__media { grid-row: 1 / -1; grid-column: 1; margin: 0; align-self: stretch; display: flex; align-items: center;
  background: rgb(210, 203, 191); border-radius: var(--raggio-piccolo, 14px) 0 0 var(--raggio-piccolo, 14px); border-bottom: 0; }
.configuratore__composizione--righe .scheda-blocco > .vetro__media--foto { align-items: center; }
.configuratore__composizione--righe.configuratore__composizione--poche { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px)); }
.configuratore__composizione--righe .scheda-blocco > .vetro__media--ritaglio { justify-content: center; padding: 12px 8px; background: var(--fondo-ritaglio, rgb(210, 203, 191)); }   /* sfondo unico per tutti i ritagli */
.configuratore__composizione--righe .scheda-blocco > .vetro__media--ritaglio img { width: 100%; height: auto; max-height: 170px; object-fit: contain; filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .3)); }
.configuratore__composizione--righe .scheda-blocco > .vetro__media img { border-radius: 0; height: auto; aspect-ratio: 4 / 3; }   /* foto intera, il fondo si estende sopra e sotto */
.configuratore__composizione--righe .scheda-blocco > h3,
.configuratore__composizione--righe .scheda-blocco > .scheda-blocco__testo,
.configuratore__composizione--righe .scheda-blocco > .scheda-blocco__link { grid-column: 2; padding-right: 16px; }
.configuratore__composizione--righe .scheda-blocco > h3 { grid-row: 1; padding-top: 16px; margin-bottom: 6px; }
.configuratore__composizione--righe .scheda-blocco > .scheda-blocco__testo { grid-row: 2; }
.configuratore__composizione--righe .scheda-blocco > .scheda-blocco__link { grid-row: 3; padding-bottom: 16px; margin-top: 8px; }
.configuratore__composizione--poche { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 240px)); justify-content: center; }   /* una o due card piccole: centrate, senza allargarsi (Ale, 20 ottobre) */
/* schede lette per colonna (per_colonna: 2): vantaggi e limiti sotto il rispettivo strumento (Ale, 20 ottobre); ogni scheda occupa 4 righe */
@media (min-width: 768px) { .griglia--2.griglia--per-colonna-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); grid-auto-flow: column; } }
/* scheda compatta: foto a sinistra e testo accanto (versione silenziosa WN sotto la WD; Ale, 20 ottobre) */
.scheda-blocco--compatta { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 20px; align-content: center; align-self: start; padding: 0; overflow: hidden; }
.scheda-blocco--compatta > .vetro__media { grid-row: 1 / span 3; grid-column: 1; margin: 0; border-radius: 0; align-self: stretch; }
.scheda-blocco--compatta > .vetro__media { display: flex; align-items: center; background: linear-gradient(to bottom, rgb(210, 202, 192) 50%, rgb(194, 187, 171) 50%); border-radius: var(--raggio-piccolo, 14px) 0 0 var(--raggio-piccolo, 14px); }
.scheda-blocco--compatta > .vetro__media img { border-radius: 0; }   /* foto intera, sfondo esteso sopra e sotto con i colori del fondo della foto; angoli tondi a sinistra, a 90° a destra (Ale, 20 ottobre) */
.scheda-blocco--compatta > h3 { grid-row: 1; grid-column: 2; align-self: end; margin: 16px 20px 6px 0; font-size: 17px; }
.scheda-blocco--compatta > .scheda-blocco__testo { grid-row: 2; grid-column: 2; margin: 0 20px 0 0; font-size: 14px; line-height: 1.5; }
.scheda-blocco--compatta > .scheda-blocco__link { grid-row: 3; grid-column: 2; align-self: start; margin: 10px 20px 16px 0; font-size: 14px; }
.scheda-blocco--a-capo { grid-column-start: 1; }   /* la prima scheda compatta va a capo, sotto la prima colonna, a qualunque larghezza */
/* vantaggi e limiti dentro la scheda di un sistema (pagina di scelta antilegionella; Ale, 20 ottobre) */
.pro-contro { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--esito); border-radius: 10px; background: var(--esito-sfondo); }
.pro-contro--si { --esito: #59e05a; --esito-sfondo: rgba(89, 224, 90, .10); }
.pro-contro--no { --esito: #ff4d4d; --esito-sfondo: rgba(255, 77, 77, .10); }
.pro-contro h4 { margin: 0 0 6px; color: var(--esito); font-size: 15px; }
.pro-contro--si h4::before { content: "✓ "; }
.pro-contro--no h4::before { content: "✕ "; }
.pro-contro ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.pro-contro li { margin-bottom: 4px; font-size: 14px; }
.pro-contro li::marker { color: var(--esito); }
.pro-contro-blocco { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 24px; padding: 20px; }
.pro-contro-blocco .pro-contro { margin-top: 0; }
.vetrina__testo .pro-contro + .scheda-blocco__link--multipli { margin-top: 14px; }

/* ---------- CONFRONTO TRA PRODOTTI (Ale, 26 ottobre; includes/confronto.php, main.js initConfronto) ---------- */
/* casella "Confronta" sulle card: visibile solo con il JS attivo (classe con-confronto sul body) */
.confronta { display: none; align-items: center; gap: 8px; padding: 5px 13px 5px 9px; border-radius: 999px; border: 1px solid var(--vetro-bordo); background: rgba(8, 22, 32, .55); color: var(--testo); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.con-confronto .confronta { display: inline-flex; }
.confronta input { width: 16px; height: 16px; margin: 0; accent-color: var(--arancio); cursor: pointer; }
.confronta:hover { border-color: rgba(255, 156, 0, .6); color: #fff; }
.confronta:has(input:checked) { border-color: var(--arancio); background: rgba(255, 156, 0, .18); color: #fff; }
.confronta:has(input:focus-visible) { outline: 2px solid var(--arancio); outline-offset: 2px; }
/* card degli indici: in basso a destra, sulla riga di "Dettagli" (la card e' un link: la casella sta fuori, sopra) */
.portfolio-items > div { position: relative; }
.portfolio-items > div > .confronta { position: absolute; right: 22px; bottom: 22px; }
/* schede e vetrine dei sistemi nelle pagine uniche (CONFRONTO_SCHEDE): in basso a destra come nelle card degli indici (Ale, 26 ottobre),
   in una fascia propria sotto i link (padding della card), fuori dalla subgrid */
.scheda-blocco:has(> .confronta), .vetrina:has(> .confronta) .vetrina__testo { padding-bottom: 76px; }
.scheda-blocco > .confronta, .vetrina > .confronta { position: absolute; z-index: 1; right: 22px; bottom: 22px; }
/* card dei modelli: in fondo alla riga delle modalita', allineata tra le card vicine (la riga e' comune: subgrid) */
.modello__chip:has(> .confronta) { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; column-gap: 10px; }
.modello__chip > .lista-chip { flex-basis: 100%; }
.modello__chip > .confronta { margin-top: auto; margin-left: auto; }   /* in basso a destra (Ale, 26 ottobre) */
.modello__chip:has(> .confronta) { align-content: space-between; }

/* barra in basso con i prodotti scelti */
.barra-confronto { position: fixed; z-index: 1030; left: 0; right: 0; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: rgba(14, 26, 34, .88); border-top: 1px solid var(--vetro-bordo); -webkit-backdrop-filter: var(--vetro-blur); backdrop-filter: var(--vetro-blur); box-shadow: 0 -10px 30px rgba(0, 0, 0, .3); color: var(--testo); }
.barra-confronto[hidden] { display: none; }
body.con-barra-confronto { padding-bottom: 96px; }
.barra-confronto__interno { display: flex; align-items: center; gap: 16px; width: min(100% - 32px, 1290px); margin: 0 auto; }
.barra-confronto__elenco { display: flex; flex: 1; gap: 10px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.barra-confronto__prodotto, .barra-confronto__posto { display: flex; flex: 0 1 220px; align-items: center; gap: 10px; min-width: 0; height: 56px; padding: 6px 8px 6px 6px; border-radius: var(--raggio-piccolo); border: 1px solid var(--vetro-bordo); background: var(--vetro-bg); }
.barra-confronto__prodotto img { flex: none; width: 58px; height: 44px; object-fit: cover; border-radius: 9px; }
.barra-confronto__prodotto span { flex: 1; min-width: 0; overflow: hidden; color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.barra-confronto__posto { justify-content: center; border-style: dashed; background: none; color: var(--testo-tenue); font-size: 13px; }
.barra-confronto__togli { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.barra-confronto__togli:hover, .barra-confronto__togli:focus-visible { background: var(--arancio); color: #1b1b1b; outline: none; }
.barra-confronto__azioni { display: flex; flex: none; align-items: center; gap: 14px; }
.barra-confronto__svuota { padding: 0; border: 0; background: none; color: var(--testo-tenue); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.barra-confronto__svuota:hover { color: #fff; }
.barra-confronto__vai { padding: 12px 22px; white-space: nowrap; }
.barra-confronto__vai.disattivo { opacity: .45; cursor: not-allowed; transform: none; }
@media (max-width: 767.98px) {
  .barra-confronto__interno { flex-direction: column; align-items: stretch; gap: 10px; }
  .barra-confronto__elenco { gap: 6px; }
  .barra-confronto__prodotto, .barra-confronto__posto { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; height: auto; min-height: 52px; padding: 4px; position: relative; }
  .barra-confronto__prodotto img { width: 44px; height: 33px; }
  .barra-confronto__prodotto span { width: 100%; font-size: 11.5px; text-align: center; }
  .barra-confronto__posto { font-size: 11px; text-align: center; }
  .barra-confronto__togli { position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; font-size: 15px; background: #3a4650; }
  .barra-confronto__azioni { justify-content: space-between; }
  body.con-barra-confronto { padding-bottom: 150px; }
}

/* pagina del confronto: prodotti affiancati sopra la tabella */
.confronto-prodotti { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.confronto-prodotti--3 { --n: 3; }
.confronto-prodotti--4 { --n: 4; }
.vetro.confronto-prodotto { display: flex; flex-direction: column; padding: 20px; }
.confronto-prodotto .vetro__media { margin: -20px -20px 16px; }
.confronto-prodotto .versione__tag { min-height: 1em; }
.confronto-prodotto h2 { margin: 0 0 10px; color: #fff; font-size: 19px; font-weight: 700; line-height: 1.3; }
.vetro .confronto-prodotto__vai { margin-top: auto; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.confronto-prodotto__togli { position: absolute; z-index: 1; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(8, 22, 32, .7); color: #fff !important; font-size: 20px; line-height: 1; text-decoration: none !important; }
.confronto-prodotto__togli:hover, .confronto-prodotto__togli:focus-visible { background: var(--arancio); color: #1b1b1b !important; }
.confronto-comandi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.interruttore { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.interruttore input { width: 18px; height: 18px; margin: 0; accent-color: var(--arancio); cursor: pointer; }
.confronto-legenda { display: inline-flex; align-items: center; gap: 8px; color: var(--testo-tenue); font-size: 14px; }
.confronto-legenda__segno { width: 4px; height: 18px; border-radius: 2px; background: var(--arancio); }
/* tabella: prima colonna fissa durante lo scorrimento orizzontale, righe diverse con il bordo arancione */
.tabella-confronto { table-layout: fixed; }
.tabella-confronto thead th { color: #fff; font-size: 13px; text-transform: none; }
.tabella-confronto thead th:first-child, .tabella-confronto tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; width: 26%; min-width: 170px; background: #24313a; }
.tabella-confronto .gruppo th { position: static; }
.tabella-confronto td { line-height: 1.45; }
.tabella-confronto tr.diversa th[scope="row"] { box-shadow: inset 4px 0 0 var(--arancio); }
.tabella-confronto tr.diversa td { background: rgba(255, 156, 0, .07); }
.tabella-confronto.solo-differenze tbody tr:not(.diversa):not(.gruppo) { display: none; }
.tabella-confronto.solo-differenze tbody:not(:has(tr.diversa)) { display: none; }
/* elenchi nelle celle (composizione, vantaggi e limiti dei sistemi) */
.tabella-confronto td:has(.confronto-elenco) { vertical-align: top; text-align: left; }
.confronto-elenco { margin: 0; padding-left: 1.1em; list-style: disc; font-size: 13.5px; line-height: 1.45; }
.confronto-elenco li::marker { color: var(--arancio); }
.confronto-elenco li { margin-bottom: 4px; }
.confronto-elenco--si li::marker { color: #59e05a; }
.confronto-elenco--no li::marker { color: #ff4d4d; }
.confronto-nota { margin: 14px 0 0; color: var(--testo-tenue); font-size: 13.5px; }
@media (max-width: 767.98px) {
  .confronto-prodotti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vetro.confronto-prodotto { padding: 12px; }
  .confronto-prodotto .vetro__media { margin: -12px -12px 10px; }
  .confronto-prodotto h2 { font-size: 15px; }
  .tabella-confronto { min-width: 370px; }
  .tabella-confronto--3 { min-width: 490px; }
  .tabella-confronto--4 { min-width: 610px; }
  .tabella-confronto thead th:first-child, .tabella-confronto tbody th[scope="row"] { width: 130px; min-width: 130px; padding: 10px; font-size: 13px; }
}