/**
 * Il preventivatore — la pagina § 5.3.5 del brand book 5.8.0 «Carrello
 * preventivatore · Lista e riepilogo», resa con classi del figlio.
 *
 * SOLO TOKEN --nlg-*: nessun colore letterale, cosi' la pagina segue la
 * luce e il kit come il resto del sito. Le classi del brand book (.nlg-btn,
 * .nlg-campo, .nlg-etichetta, .nlg-card, .nlg-badge, .nlg-avviso,
 * .nlg-passi, .nlg-modulo) si usano come sono e non si ridefiniscono: qui
 * ci sono solo regole `nw-preventivatore__*`, che ricalcano gli stili in
 * linea del mock 1:1.
 *
 * LE COLONNE le decide il token `--nlg-g2` del brand book: sul telefono
 * vale una colonna, altrove ricade sulla coppia 1,6 : 1 del mock. Nessuna
 * soglia scritta qui; le righe della lista vanno a capo da sole (flex-wrap).
 *
 * Si carica solo su questa pagina (`@push('head')` della vista).
 */

/* ═══════════════════════ Impianto ═══════════════════════ */

.nw-preventivatore {
  background: var(--nlg-canvas);
  padding: calc(var(--nlg-s-7) * var(--nlg-passo-k, 1)) 0;
}

.nw-preventivatore__contenitore {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-6);
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: 0 var(--nlg-margine);
}

.nw-preventivatore__apertura {
  display: flex;
  align-items: baseline;
  gap: var(--nlg-s-3);
}

.nw-preventivatore__numero {
  font: 500 var(--nlg-fs-overline) var(--nlg-font-mono);
  color: var(--nlg-blue-ink);
}

.nw-preventivatore__occhiello,
.nw-preventivatore__micro {
  font-family: var(--nlg-font-mono);
  font-size: var(--nlg-etichetta-fs);
  letter-spacing: var(--nlg-ls-overline);
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

.nw-preventivatore__filo {
  flex: 1;
  align-self: center;
  height: var(--nlg-linea);
  background: var(--nlg-border);
}

.nw-preventivatore__intro {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
}

.nw-preventivatore__titolo {
  margin: 0;
  max-width: 24ch;
  font: 800 var(--nlg-fs-h1)/var(--nlg-lh-h1) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h1);
  color: var(--nlg-text-1);
  text-wrap: balance;
}

.nw-preventivatore__lead {
  margin: 0;
  max-width: 64ch;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-preventivatore__griglia {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 1.6fr) minmax(0, 1fr));
  gap: var(--nlg-s-6) var(--nlg-gutter);
  align-items: start;
}

.nw-preventivatore__principale,
.nw-preventivatore__configurazione {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-5);
  min-width: 0;
}

.nw-preventivatore__sottotitolo {
  margin: 0;
  padding: 0;
  font: 700 var(--nlg-fs-h3)/var(--nlg-lh-h3) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h3);
  color: var(--nlg-text-1);
}

/* Il titolo di una zona e il suo occhiello in riga; quando non ci stanno
   l'occhiello scende sotto il titolo, intero, invece di spezzarsi accanto. */
.nw-preventivatore__testa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--nlg-s-1) var(--nlg-s-3);
  width: 100%;
  padding: 0;
}

.nw-preventivatore__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nlg-s-3);
}

.nw-preventivatore__errori {
  margin: 0;
  padding-left: var(--nlg-s-5);
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-1);
}

.nw-preventivatore__tenue { color: var(--nlg-text-3); font-weight: 400; }

/* I pezzi che lo script riscrive dopo il ricalcolo (gli avvisi, il
   riepilogo): un segno per trovarli, senza una scatola che cambi passi e
   colonne. */
.nw-preventivatore__riscritto { display: contents; }

.nw-preventivatore__facoltativo {
  font-weight: 400;
  color: var(--nlg-text-3);
}

/* Fuori dalla vista ma letto dai lettori di schermo; la trappola ci sta
   per lo stesso motivo: `display:none` i riempitori lo saltano. */
.nw-preventivatore__fuori {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ═══════════════════════ Periodo e fasce ═══════════════════════ */

.nw-preventivatore__periodo { gap: var(--nlg-s-3); }

.nw-preventivatore__date {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--nlg-s-3);
}

.nw-preventivatore__data {
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(var(--nlg-s-9) + var(--nlg-s-7));
  min-width: 0;
}

.nw-preventivatore__durata {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

/* La durata e' testo, come nella pagina 1:1, allineato ai campi delle
   date: la pillola (raggio 999) il libro la riserva ai cinque stati di
   noleggio (SKILL.md, Componenti), e `.nlg-pill` la libreria non la porta. */
.nw-preventivatore__durata-valore {
  display: inline-flex;
  align-items: center;
  min-height: var(--nlg-controllo-h);
  font: 600 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
  white-space: nowrap;
}

.nw-preventivatore__calcola { flex: 0 0 auto; }

.nw-preventivatore__fasce {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-2);
  padding: var(--nlg-s-3) var(--nlg-s-4);
  border-radius: var(--nlg-r-md);
  background: var(--nlg-surface-2);
}

.nw-preventivatore__fascia-testa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--nlg-s-3);
}

.nw-preventivatore__fascia-attiva {
  font: 600 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

/* La scala: un segmento per fascia, la fascia attiva in blu. Non e' un
   comando — la fascia non si sceglie (§ 5.3.5) — e non si comporta come
   tale: nessun cursore, nessun fuoco. */
.nw-preventivatore__scala {
  display: flex;
  gap: var(--nlg-s-1);
  height: var(--nlg-s-2);
}

.nw-preventivatore__segmento {
  flex: 1;
  border-radius: var(--nlg-r-segmento);
  background: var(--nlg-border);
}

.nw-preventivatore__segmento.is-attivo { background: var(--nlg-bar-blue); }

.nw-preventivatore__scala-nomi {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--nlg-s-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 var(--nlg-fs-overline)/1.3 var(--nlg-font-mono);
  color: var(--nlg-text-3);
}

.nw-preventivatore__scala-nomi .is-attivo {
  color: var(--nlg-blue-ink);
  font-weight: 500;
}

/* ═══════════════════════ Articoli ═══════════════════════ */

.nw-preventivatore__articoli {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
}

.nw-preventivatore__cerca {
  display: flex;
  gap: var(--nlg-s-2);
  align-items: center;
}

.nw-preventivatore__cerca .nw-preventivatore__fuori + .nlg-campo { flex: 1; min-width: 0; }

.nw-preventivatore__catalogo { flex: none; }

.nw-preventivatore__risultati {
  padding: var(--nlg-s-3) var(--nlg-s-4);
  border: var(--nlg-linea) solid var(--nlg-border);
  border-radius: var(--nlg-r-md);
  background: var(--nlg-surface-1);
}

.nw-preventivatore__elenco {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nw-preventivatore__trovato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nlg-s-3);
}

/* La quantita' e «Aggiungi» di un articolo trovato, insieme a destra. */
.nw-preventivatore__aggiungi {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nlg-s-2);
  margin-left: auto;
}

.nw-preventivatore__vuoto {
  margin: 0;
  padding: var(--nlg-s-4) 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
}

.nw-preventivatore__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-preventivatore__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nlg-s-4);
  padding: calc(var(--nlg-s-3) + 2px) 0;
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
}

/* L'anteprima piccola (§ 4.6.2): 56 su passepartout, col velo di
   ripiego quando l'immagine manca. */
.nw-preventivatore__miniatura {
  flex: none;
  display: block;
  width: calc(var(--nlg-s-7) + var(--nlg-s-2));
  height: calc(var(--nlg-s-7) + var(--nlg-s-2));
  overflow: hidden;
  border: var(--nlg-linea) solid var(--nlg-border);
  border-radius: var(--nlg-r-md);
  background: linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)), var(--nlg-passepartout);
}

.nw-preventivatore__miniatura--piccola {
  width: var(--nlg-s-7);
  height: var(--nlg-s-7);
}

.nw-preventivatore__miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--nlg-passepartout);
}

.nw-preventivatore__info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--nlg-s-1) - 1px);
  flex: 1 1 calc(var(--nlg-s-9) * 2);
  min-width: 0;
}

.nw-preventivatore__nome {
  font: 600 var(--nlg-fs-body)/1.35 var(--nlg-font-ui);
  color: var(--nlg-text-1);
  text-decoration: none;
}

a.nw-preventivatore__nome:hover { text-decoration: underline; }

.nw-preventivatore__dettagli {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nlg-s-2);
}

.nw-preventivatore__codice {
  font-family: var(--nlg-font-mono);
  font-size: var(--nlg-etichetta-fs);
  letter-spacing: var(--nlg-ls-overline);
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

.nw-preventivatore__prezzo-partenza {
  font-size: var(--nlg-fs-caption);
  color: var(--nlg-text-3);
}

/* Il contatore (§ 4.6.2): meno, quantita', piu' in un bordo solo. */
.nw-preventivatore__contatore {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: var(--nlg-bordo-comando) solid var(--nlg-border-strong);
  border-radius: var(--nlg-r-md);
  background: var(--nlg-surface-1);
}

.nw-preventivatore__passo,
.nw-preventivatore__togli {
  width: var(--nlg-comando-h);
  height: var(--nlg-comando-h);
  border: 0;
  background: transparent;
  color: var(--nlg-text-1);
  font: 600 var(--nlg-fs-body) var(--nlg-font-ui);
  cursor: pointer;
}

.nw-preventivatore__passo:disabled {
  color: var(--nlg-disabled);
  cursor: not-allowed;
}

.nw-preventivatore__passo:focus-visible,
.nw-preventivatore__togli:focus-visible,
.nw-preventivatore__quantita:focus-visible {
  outline: none;
  box-shadow: var(--nlg-focus-ring);
}

.nw-preventivatore__quantita {
  width: calc(var(--nlg-s-7) - var(--nlg-s-1));
  height: var(--nlg-comando-h);
  border: 0;
  border-left: var(--nlg-linea) solid var(--nlg-border);
  border-right: var(--nlg-linea) solid var(--nlg-border);
  background: transparent;
  color: var(--nlg-text-1);
  font: 600 var(--nlg-fs-body-sm) var(--nlg-font-ui);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.nw-preventivatore__quantita::-webkit-outer-spin-button,
.nw-preventivatore__quantita::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.nw-preventivatore__importo {
  min-width: calc(var(--nlg-s-9) + 4px);
  font: 600 var(--nlg-fs-body)/1.3 var(--nlg-font-ui);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--nlg-text-1);
}

.nw-preventivatore__togli {
  border-radius: var(--nlg-r-md);
  color: var(--nlg-text-3);
  font-weight: 400;
  font-size: var(--nlg-fs-body-lg);
}

.nw-preventivatore__togli:hover { color: var(--nlg-text-1); }

/* ═══════════════════════ Servizi ═══════════════════════ */

/* Un fieldset porta bordo, margini e una larghezza minima propri del
   browser: con la card sopra si vedrebbero due cornici. */
.nw-preventivatore__servizi,
.nw-preventivatore__logistica {
  min-width: 0;
  margin: 0;
  gap: var(--nlg-s-3);
}

.nw-preventivatore__casella {
  display: flex;
  align-items: flex-start;
  gap: var(--nlg-s-3);
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-1);
  cursor: pointer;
}

.nw-preventivatore__casella input {
  margin: var(--nlg-s-1) 0 0;
  accent-color: var(--nlg-action);
}

.nw-preventivatore__casella-nome { font-weight: 600; }

.nw-preventivatore__casella .nlg-aiuto { margin-top: 0; }

/* ═══════════════════════ Trasporto ═══════════════════════ */

/* I campi del trasporto stanno in una griglia, e ogni campo ne occupa tre
   righe — etichetta, campo, errore — che condivide coi campi della stessa
   fila (subgrid): i campi restano in riga sia quando un'etichetta va a capo
   («Indirizzo di consegna (facoltativo)»), sia quando sotto uno solo
   compare un errore, che scende sotto il suo campo senza spostarlo. Le
   misure sono quelle della pagina 1:1 (flex 2 1 220px · 0 0 110px · 1 1
   160px), con la provincia stretta come il CAP: in fila quando c'entrano;
   in due file, indirizzo e CAP sopra, comune e provincia sotto, quando non
   c'entrano; sul telefono l'indirizzo prende la riga e gli altri gli vanno
   sotto. */
.nw-preventivatore__logistica { container: nw-trasporto / inline-size; }

.nw-preventivatore__campi {
  --nw-pv-stretto: calc(var(--nlg-s-9) + var(--nlg-s-3) + 2px);
  display: grid;
  grid-template-columns: var(--nw-pv-stretto) minmax(0, 1fr);
  gap: var(--nlg-s-3);
}

.nw-preventivatore__campo {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
}

.nw-preventivatore__campo > .nlg-etichetta { align-self: end; }

.nw-preventivatore__campo--largo,
.nw-preventivatore__campo--intero { grid-column: 1 / -1; }

@container nw-trasporto (min-width: 24rem) {
  .nw-preventivatore__campi { grid-template-columns: minmax(0, 1fr) var(--nw-pv-stretto); }

  .nw-preventivatore__campo--largo { grid-column: auto; }
}

@container nw-trasporto (min-width: 40rem) {
  .nw-preventivatore__campi {
    grid-template-columns:
      minmax(calc(var(--nlg-s-9) * 2 + var(--nlg-s-5)), 2fr) var(--nw-pv-stretto)
      minmax(calc(var(--nlg-s-9) + var(--nlg-s-8)), 1fr) var(--nw-pv-stretto);
  }
}

.nw-preventivatore__nota-trasporto {
  padding: var(--nlg-s-3) var(--nlg-s-4);
  border-radius: var(--nlg-r-md);
  background: var(--nlg-surface-2);
}

.nw-preventivatore__nota-trasporto .nlg-aiuto { margin-top: 0; }

/* Le due modalita' del trasporto (dal 2026-11-04), come le due card della
   pagina 1:1: una riga che va a capo, la scelta col bordo dell'azione e il
   fondo informativo. */
.nw-preventivatore__modalita {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nw-preventivatore__modo {
  display: flex;
  flex: 1 1 220px;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-md);
  background: var(--nlg-surface-1);
  cursor: pointer;
}

.nw-preventivatore__modo:has(input:checked) {
  border-color: var(--nlg-action);
  background: var(--nlg-info-bg);
}

.nw-preventivatore__modo input {
  margin: 3px 0 0;
  accent-color: var(--nlg-action);
}

.nw-preventivatore__modo-testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nw-preventivatore__modo-nome {
  font: 600 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-preventivatore__modo-nota {
  font: 400 var(--nlg-fs-caption)/var(--nlg-lh-caption) var(--nlg-font-text);
  color: var(--nlg-text-3);
}

.nw-preventivatore__stima-trasporto {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-2);
}

.nw-preventivatore__stima-trasporto:empty { display: none; }

.nw-preventivatore__stima-trasporto .nlg-aiuto { margin-top: 0; }

.nw-preventivatore__magazzino {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: var(--nlg-fs-body-sm);
  color: var(--nlg-text-2);
}

[data-nw-solo-modo][hidden],
[data-nw-altro-ritiro][hidden] { display: none; }

/* ═══════════════════════ Riepilogo ═══════════════════════ */

/* Il riepilogo e' anche il contenitore che il selettore del tipo di
   cliente misura (vedi sotto). */
.nw-preventivatore__laterale {
  container: nw-laterale / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
  min-width: 0;
}

/* La colonna destra in due blocchi (brand book 5.16.0, § 5.3.5): la card
   del riepilogo e quella del touchpoint, col banner Partner in mezzo. */
.nw-preventivatore__blocco {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
  min-width: 0;
}

/* Il riepilogo e' l'elemento fermo del sito: «sul sito, il riepilogo del
   carrello preventivatore» (brand book 5.9.0, § 4.1.10). Su desktop sta
   ACCANTO a cio' che scorre e il contenuto non lo attraversa, quindi
   «porta il filo e basta»: il bordo della card, senza la sua ombra. Si
   ferma sotto la testata (site.css, `--nw-sotto-la-testata`). */
@media (min-width: 720px) {
  .nw-preventivatore__laterale {
    position: sticky;
    top: calc(var(--nw-sotto-la-testata) + var(--nlg-s-4));
    box-shadow: none;
  }
}

/* Sul telefono il riepilogo scende sotto gli articoli (§ 5.3.5,
   «Telefono») e «si ferma in basso, col filo e l'ombra verso l'alto»
   (§ 4.1.10). La parte che si ferma e' la sua riga del totale: una
   striscia in fondo alla colonna degli articoli, ferma sul fondo della
   finestra mentre la colonna scorre e appoggiata dove il riepilogo
   comincia quando la colonna finisce. Il riepilogo intero, col modulo,
   coprirebbe la lista che si sta compilando. L'aspetto e' del libro
   (`.nlg-fermo.nlg-fermo--in-basso`: fondo pieno, filo e ombra verso
   l'alto); la meccanica — che cosa, dove, su quale strato — e'
   dell'applicativo, come il libro vuole. Sta sotto l'icona fluttuante
   (§ 4.1.9), che resta sopra: la striscia le lascia il suo angolo. */
.nw-preventivatore__fermo { display: none; }

@media (max-width: 719px) {
  .nw-preventivatore__fermo {
    position: sticky;
    bottom: 0;
    z-index: calc(var(--nlg-z-fluttuante) - 1);
    display: flex;
    align-items: baseline;
    gap: var(--nlg-s-3);
    margin: 0 calc(var(--nlg-margine) * -1);
    padding: var(--nlg-s-3) calc(var(--nlg-flutt-margine) + var(--nlg-flutt-misura) + var(--nlg-s-3)) var(--nlg-s-3) var(--nlg-margine);
  }

  a.nw-preventivatore__fermo:is(:link, :visited, :hover, :focus, :active) {
    color: var(--nlg-text-1);
    text-decoration: none;
  }

  .nw-preventivatore__fermo .nw-preventivatore__totale-cifra { margin-left: auto; }
}

.nw-preventivatore__dati {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--nlg-s-2) var(--nlg-s-4);
  margin: 0;
  font-size: var(--nlg-fs-body-sm);
  color: var(--nlg-text-2);
}

.nw-preventivatore__dati dt {
  font-family: var(--nlg-font-mono);
  font-size: var(--nlg-etichetta-fs);
  letter-spacing: var(--nlg-ls-overline);
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

.nw-preventivatore__dati dd {
  margin: 0;
  color: var(--nlg-text-1);
}

.nw-preventivatore__conti {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-2);
  padding-top: var(--nlg-s-3);
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-preventivatore__conto {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--nlg-s-3);
  font-size: var(--nlg-fs-body-sm);
  color: var(--nlg-text-2);
}

.nw-preventivatore__cifra {
  font: 600 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-ui);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--nlg-text-1);
}

.nw-preventivatore__totale {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--nlg-s-3);
  padding-top: var(--nlg-s-3);
  border-top: var(--nlg-segno) solid var(--nlg-text-1);
}

.nw-preventivatore__totale-nome {
  font: 700 var(--nlg-fs-body)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-preventivatore__totale-nome .nw-preventivatore__tenue {
  display: block;
  font-size: var(--nlg-fs-caption);
}

.nw-preventivatore__totale-cifra {
  font: 800 var(--nlg-fs-h3)/1.1 var(--nlg-font-ui);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--nlg-text-1);
}

.nw-preventivatore__nota {
  margin: 0;
  font: 400 var(--nlg-fs-caption)/var(--nlg-lh-caption) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* ═══════════════════════ Banner Partner § 5.8.3 ═══════════════════════ */

.nw-preventivatore__partner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--nlg-s-1) + 2px);
  min-height: var(--nlg-s-9);
  padding: calc(var(--nlg-s-3) + 2px) var(--nlg-s-4) calc(var(--nlg-s-5) + var(--nlg-s-1)) calc(var(--nlg-s-8) + var(--nlg-s-1));
  border: var(--nlg-linea) solid var(--nlg-border);
  border-radius: var(--nlg-r-lg);
  background: var(--nlg-canvas);
  color: var(--nlg-text-1);
  font-size: var(--nlg-fs-caption);
  line-height: 1.5;
  text-decoration: none;
}

/* Sotto il puntatore cambiano il bordo e l'ombra, non l'inchiostro: la
   classe da sola pesa meno di `a:hover` del libro (typography.css), che
   scriverebbe tutto il banner in --nlg-action-hover. */
.nw-preventivatore__partner:hover {
  border-color: var(--nlg-border-strong);
  box-shadow: var(--nlg-shadow-sm);
  color: var(--nlg-text-1);
}

.nw-preventivatore__partner:focus-visible {
  outline: none;
  box-shadow: var(--nlg-focus-ring);
}

.nw-preventivatore__partner-segno {
  position: absolute;
  opacity: .14;
}

.nw-preventivatore__partner-segno--rosso {
  left: calc(var(--nlg-s-5) - var(--nlg-s-1));
  top: 0;
  bottom: calc(var(--nlg-s-5) - 1px);
  width: calc(var(--nlg-s-2) + 2px);
  background: var(--nlg-bar-red);
}

.nw-preventivatore__partner-segno--rosso-piede {
  left: calc(var(--nlg-s-5) - var(--nlg-s-1));
  bottom: 0;
  height: calc(var(--nlg-s-1) + 1px);
  width: calc(var(--nlg-s-2) + 2px);
  background: var(--nlg-bar-red);
}

.nw-preventivatore__partner-segno--blu {
  left: 0;
  right: 0;
  bottom: calc(var(--nlg-s-2) + 2px);
  height: var(--nlg-s-2);
  background: var(--nlg-bar-blue);
}

.nw-preventivatore__partner-segno--giallo {
  left: calc(var(--nlg-s-6) + var(--nlg-s-3));
  top: 42%;
  bottom: 0;
  width: calc(var(--nlg-s-2) + 2px);
  background: var(--nlg-bar-yellow);
}

.nw-preventivatore__partner-testo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nw-preventivatore__partner-azione {
  position: relative;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nlg-s-1) + 2px);
  min-height: var(--nlg-s-6);
  padding: 0 var(--nlg-s-1);
  font: 600 var(--nlg-fs-body-sm) var(--nlg-font-ui);
  color: var(--nlg-success-ink);
  text-decoration: underline;
  text-decoration-color: var(--nlg-success-border);
  text-underline-offset: var(--nlg-s-1);
  white-space: nowrap;
}

/* ═══════════════════════ Modulo a passi ═══════════════════════ */

.nw-preventivatore__modulo {
  gap: var(--nlg-s-3);
  padding-top: var(--nlg-s-3);
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-preventivatore__avanzamento-testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--nlg-s-3);
}

.nw-preventivatore__avanzamento-nome {
  font: 600 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-preventivatore__passo-modulo {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.nw-preventivatore__legenda {
  padding: 0;
  margin-bottom: var(--nlg-s-1);
  font: 600 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

/* Con lo script i passi si vedono uno alla volta, e la legenda la dice
   gia' l'indicatore; senza script stanno tutti e due, uno sotto l'altro. */
.nw-preventivatore__modulo.is-a-passi .nw-preventivatore__passo-modulo:not(.is-corrente) { display: none; }

.nw-preventivatore__modulo.is-a-passi .nw-preventivatore__legenda {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Privato · Azienda · PA: il selettore a pillole del mock. Le pillole stanno
   in fila finche' «Pubblica amministrazione» ci sta (almeno 12rem), poi
   vanno in colonna: in tre colonne fisse la terza traboccava di 9–37 px a
   ogni larghezza, e il suo radio cadeva dentro la pillola «Azienda»
   (revisione del 2026-10-01). */
.nw-preventivatore__tipi {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--nlg-s-1);
  padding: var(--nlg-s-1);
  border-radius: var(--nlg-r-md);
  background: var(--nlg-surface-2);
}

/* Mai una pillola sola su una seconda riga: dove le tre non stanno in
   fila (tre volte 12rem, coi passi), vanno in colonna tutte e tre. */
@container nw-laterale (max-width: 37rem) {
  .nw-preventivatore__tipi { grid-template-columns: minmax(0, 1fr); }
}

.nw-preventivatore__tipo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--nlg-s-2);
  min-width: 0;
  min-height: var(--nlg-comando-h);
  padding: 0 var(--nlg-s-2);
  border: var(--nlg-linea) solid transparent;
  border-radius: calc(var(--nlg-r-md) - 2px);
  font: 600 var(--nlg-fs-caption) var(--nlg-font-ui);
  color: var(--nlg-text-2);
  text-align: center;
  cursor: pointer;
}

.nw-preventivatore__tipo:has(input:checked) {
  border-color: var(--nlg-border);
  background: var(--nlg-surface-1);
  color: var(--nlg-text-1);
  box-shadow: var(--nlg-shadow-sm, none);
}

.nw-preventivatore__tipo input {
  margin: 0;
  accent-color: var(--nlg-action);
}

.nw-preventivatore__business {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
}

.nw-preventivatore__business[hidden] { display: none; }

.nw-preventivatore__invio {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-2);
}

.nw-preventivatore__largo { width: 100%; }

.nw-preventivatore__promessa {
  text-align: center;
  font: 400 var(--nlg-fs-caption)/var(--nlg-lh-caption) var(--nlg-font-text);
  color: var(--nlg-text-3);
}