/**
 * Le pagine speciali del § 5.8 del brand book 5.8.0 — proposte di noleggio
 * (§ 5.8.1 «Indice»), scheda prodotto (§ 5.8.2 «Immagine dominante»), set
 * (§ 5.8.3 «Mosaico») — e le anteprime del § 4.6 che i blocchi del
 * gestionale portano dentro il loro corpo (public.partials.erp-blocco).
 *
 * SOLO TOKEN --nlg-*: nessun colore letterale, cosi' le pagine seguono la
 * luce e il kit come il resto del sito. Le classi del brand book (.nlg-btn,
 * .nlg-badge, .nlg-contatore, .nlg-modulo, .nlg-modale) si usano come sono e
 * non si ridefiniscono: qui ci sono solo regole `nw-*`, che ricalcano gli
 * stili in linea delle pagine 1:1 di «Layout 1-1» e dei partial
 * `sezioni/nlg-a46-*` e `nlg-b10-*`.
 *
 * LE COLONNE le decidono i token di griglia del brand book (`--nlg-g2`,
 * `--nlg-g3`, `--nlg-g4`): sul telefono valgono una colonna, altrove
 * ricadono sulle proporzioni del mock. Nessuna soglia scritta qui.
 *
 * IL RIPIEGO DELLE IMMAGINI e' quello del libro: l'immagine del brand sotto
 * velo (`immagini/nlg-pausa.png`, `nlg-trama.png`, innestate in
 * public/brand/immagini), «mai un rettangolo vuoto al posto dell'immagine»
 * (divieto del § 4.6).
 *
 * Si carica solo sulle pagine speciali (`@push('head')` di public.webpage).
 */

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

.nw-speciale__contenitore {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: 0 var(--nlg-margine, 28px);
}

.nw-speciale__apertura {
  padding: calc(var(--nlg-s-6) * var(--nlg-passo-k, 1)) 0 calc(40px * var(--nlg-passo-k, 1));
}

.nw-speciale__sezione {
  padding: calc(40px * var(--nlg-passo-k, 1)) 0;
}

.nw-speciale__sezione--stretta {
  padding-top: var(--nlg-s-2);
}

.nw-speciale__sezione--fondo {
  background: var(--nlg-surface-1);
  border-top: 1px solid var(--nlg-border);
  border-bottom: 1px solid var(--nlg-border);
}

.nw-speciale__pila {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nw-speciale__pila--centro {
  align-items: center;
  gap: 28px;
}

/* Testata in colonna stretta a sinistra, contenuto a destra (FAQ). */
.nw-speciale__lato {
  display: grid;
  grid-template-columns: var(--nlg-g2, 1fr 2fr);
  gap: var(--nlg-s-6);
  align-items: start;
}

.nw-speciale__testata {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nw-speciale__testata--centro {
  align-items: center;
  text-align: center;
  max-width: 70ch;
  gap: var(--nlg-s-2);
}

.nw-speciale__testata--riga {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.nw-speciale__occhiello {
  font-family: var(--nlg-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

.nw-speciale__occhiello a {
  color: inherit;
  text-decoration: none;
}

.nw-speciale__occhiello a:hover {
  color: var(--nlg-blue-ink);
  text-decoration: underline;
}

.nw-speciale__micro {
  font-family: var(--nlg-font-mono);
  font-size: var(--nlg-etichetta-fs, 10.5px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

.nw-speciale__h1 {
  margin: 0;
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: var(--nlg-fs-h1);
  line-height: var(--nlg-lh-h1);
  letter-spacing: var(--nlg-ls-h1);
  text-wrap: balance;
}

.nw-speciale__h2 {
  margin: 0;
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: var(--nlg-fs-h3);
  line-height: var(--nlg-lh-h3);
  letter-spacing: var(--nlg-ls-h3);
  text-wrap: balance;
}

.nw-speciale__h4 {
  margin: 0;
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: var(--nlg-fs-h4);
  line-height: var(--nlg-lh-h4);
  letter-spacing: var(--nlg-ls-h4);
}

.nw-speciale__lead {
  margin: 0;
  font-size: var(--nlg-fs-body-lg);
  line-height: 1.55;
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-speciale__testo {
  margin: 0;
  font-size: var(--nlg-fs-body);
  line-height: 1.6;
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-speciale__nota {
  margin: 0;
  font-size: var(--nlg-fs-body-sm);
  color: var(--nlg-text-2);
  max-width: 70ch;
}

/*
 * LA TESTA DEL CORPO DENTRO L'APERTURA. Sulle proposte e sui set la testa
 * composta (l'H1 e l'abstract dell'azienda) si sposta nell'apertura del
 * layout: il suo partial e' una sezione a tutta larghezza, con fondo,
 * margini e contenitore propri, che qui dentro raddoppierebbero quelli
 * dell'apertura. Si azzerano solo questi; la tipografia resta la sua. Gli
 * `!important` servono perche' il partial scrive gli spazi negli stili in
 * linea (§ 8 di MONTAGGIO-PAGINE.md), e valgono solo dentro questa cornice.
 */
.nw-speciale__testa > * {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
}

.nw-speciale__testa > * > * {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* La tipografia dell'apertura delle pagine 1:1 («Proposte di noleggio», «I
   Set · Mosaico»): l'H1 come `.nw-speciale__h1` e l'introduzione come
   `.nw-speciale__lead`, uno sotto l'altra al passo dell'apertura (14 px
   sulla proposta, 12 sul set). Il blocco che porta l'H1 si mette in
   colonna; gli stili in linea di un'apertura del libro vincono comunque.
   Le regole con :has() stanno da sole: in una lista con un selettore
   semplice, un browser che non conosce :has() scartava la regola intera, e
   l'apertura perdeva anche la colonna, il passo e la tipografia del lead
   (collaudo del 2026-10-10, C35). Senza :has() resta il ritocco del blocco
   dell'H1, e il passo lo da' il margine del lead. */
.nw-speciale__testa {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
}

.nw-speciale__testa :has(> h1) {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
}

.nw-proposta .nw-speciale__testa {
  gap: 14px;
}

.nw-proposta .nw-speciale__testa :has(> h1) {
  gap: 14px;
}

.nw-speciale__testa h1 {
  margin: 0;
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: var(--nlg-fs-h1);
  line-height: var(--nlg-lh-h1);
  letter-spacing: var(--nlg-ls-h1);
  text-wrap: balance;
}

.nw-speciale__testa h1 ~ p {
  margin: var(--nlg-s-3) 0 0;
  font-size: var(--nlg-fs-body-lg);
  line-height: 1.55;
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* Dove il blocco dell'H1 e' in colonna, il passo e' il suo gap. */
.nw-speciale__testa :has(> h1) > p {
  margin: 0;
}

/*
 * LA ZONA «CONTENUTO» delle proposte e dei set (§ 5.6.1, § 5.6.3: «il
 * contenuto coi blocchi del § 5.4»; public.speciali.contenuto). Il corpo
 * arriva dal pannello. Nella forma del metodo — sezioni `.nlg-sezione` con
 * `.nlg-container` dentro, che fuori di qui nessun foglio veste — e nel
 * corpo senza contenitore, che la vista avvolge in `.nw-speciale__corpo`,
 * prende il contenitore del libro (MONTAGGIO-PAGINE.md § 8) e la tipografia
 * dei blocchi delle pagine 1:1: titolo h3/800, testo in --nlg-text-2 alla
 * misura di lettura, due blocchi affiancati sulla griglia `--nlg-g2`. I
 * blocchi del libro portano contenitore e tipografia in linea e non usano
 * queste classi: restano come sono, e nessun contenitore raddoppia.
 */
.nw-speciale__contenuto {
  display: block;
}

.nw-speciale__contenuto .nlg-sezione {
  padding: calc(40px * var(--nlg-passo-k, 1)) 0;
}

/* La sezione rimasta vuota quando il listing esce dal corpo. */
.nw-speciale__contenuto .nlg-sezione:has(> .nlg-container:empty) {
  display: none;
}

.nw-speciale__contenuto .nlg-container {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: 0 var(--nlg-margine, 28px);
}

.nw-speciale__corpo {
  padding-top: calc(40px * var(--nlg-passo-k, 1));
  padding-bottom: calc(40px * var(--nlg-passo-k, 1));
}

.nw-speciale__contenuto :is(.nlg-container, .nw-speciale__corpo, .nlg-container > :is(div, section, article), .nw-speciale__corpo > :is(div, section, article)) {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nw-speciale__contenuto :is(.nlg-container, .nw-speciale__corpo):has(> :is(div, section, article) + :is(div, section, article)) {
  display: grid;
  grid-template-columns: var(--nlg-g2, 1fr 1fr);
  gap: 40px;
  align-items: start;
}

.nw-speciale__contenuto :is(.nlg-container, .nw-speciale__corpo, .nlg-container > :is(div, section, article), .nw-speciale__corpo > :is(div, section, article)) > h2 {
  margin: 0;
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: var(--nlg-fs-h3);
  line-height: var(--nlg-lh-h3);
  letter-spacing: var(--nlg-ls-h3);
  color: var(--nlg-text-1);
  text-wrap: balance;
}

.nw-speciale__contenuto :is(.nlg-container, .nw-speciale__corpo, .nlg-container > :is(div, section, article), .nw-speciale__corpo > :is(div, section, article)) > p {
  margin: 0;
  max-width: 72ch;
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* Il passe-partout delle immagini di prodotto e il ripiego del brand.
   IL RIPIEGO STA SEMPRE SOTTO L'IMMAGINE, come nelle pagine 1:1 (due strati
   di sfondo sotto la foto: il velo e l'immagine del brand, COME-USARE.md
   «Anteprime e banner»): una foto che non arriva lascia il brand sotto velo,
   mai un rettangolo vuoto, e il velo all'88 % non disturba le foto senza
   sfondo (tokens/colors.css). L'<img> rotta si toglie da se'. */
.nw-speciale__passepartout {
  margin: 0;
  overflow: hidden;
  border-radius: var(--nlg-r-lg);
  background: linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)), url("../brand/immagini/nlg-pausa.png") center / cover no-repeat, var(--nlg-passepartout);
  border: 1px solid var(--nlg-border);
}

.nw-speciale__passepartout img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nw-speciale__ripiego {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)), url("../brand/immagini/nlg-pausa.png") center / cover no-repeat;
}

.nw-speciale__ripiego--trama {
  background: linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)), url("../brand/immagini/nlg-trama.png") center / cover no-repeat;
}

/* Lo stato qualitativo di disponibilita' (public.speciali.stato): pallino
   verde e testo in --nlg-success-ink, come la card per listing e la distinta
   delle pagine 1:1; nella forma `pillola` dell'apertura della scheda, la
   pillola compatta di 26 px col pallino davanti. */
.nw-stato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--nlg-fs-caption);
  font-weight: 600;
  color: var(--nlg-success-ink);
  white-space: nowrap;
}

.nw-stato__pallino {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nlg-success);
}

.nw-stato--pillola {
  box-sizing: border-box;
  height: 26px;
  padding: 0 10px;
  font-size: var(--nlg-badge-fs-compatto);
}

/* Il terzo livello delle pagine 1:1 e di COME-USARE.md («testo
   sottolineato, allineato a destra su una riga propria»): «Richiedi
   informazioni» della scheda e del set in --nlg-text-2, «Richiedi
   informazioni per questo set» delle anteprime in --nlg-blue-ink. Il
   terziario della libreria (`.nlg-btn--terziario`) e' blu e si sottolinea
   solo al passaggio: non e' questo disegno. Il tocco resta da 44 px. */
.nw-terzo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--nlg-tap-min);
  font-family: var(--nlg-font-ui);
  font-weight: 600;
  font-size: var(--nlg-fs-body-sm);
  color: var(--nlg-text-2);
  text-decoration: underline;
  text-decoration-color: var(--nlg-border-strong);
  text-underline-offset: 4px;
}

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

.nw-terzo--blu {
  color: var(--nlg-blue-ink);
  text-decoration-color: var(--nlg-info-border);
}

.nw-terzo--blu:hover {
  color: var(--nlg-blue-ink);
  text-decoration-color: currentColor;
}

/* Il bordato blu delle pagine 1:1 («Chiama» del box della proposta): la
   libreria non lo porta (`.nlg-btn--secondario` e' grigio su fondo pieno). */
.nw-bordato {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--nlg-s-4);
  border: var(--nlg-bordo-comando) solid var(--nlg-action);
  border-radius: var(--nlg-r-md);
  background: transparent;
  color: var(--nlg-blue-ink);
  font-family: var(--nlg-font-ui);
  font-weight: 700;
  font-size: var(--nlg-fs-button);
  white-space: nowrap;
  text-decoration: none;
}

.nw-bordato:hover {
  background: var(--nlg-info-bg);
  color: var(--nlg-blue-ink);
}

/* Il prezzo «a partire da», in ogni sua forma. */
.nw-speciale__prezzo {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.nw-speciale__prezzo-da {
  font-size: 11px;
  color: var(--nlg-text-3);
}

.nw-speciale__prezzo-cifra {
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: var(--nlg-fs-h4);
}

.nw-speciale__prezzo-nota {
  font-size: 11px;
  color: var(--nlg-text-3);
}

/* La nota con le barre del marchio (§ 5.8.1 «Con grafica»): «Descrizione del prodotto / del set». */
.nw-speciale__nota-marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 96px;
  padding: var(--nlg-s-4) 100px 38px 76px;
  background: var(--nlg-canvas);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-lg);
}

.nw-speciale__barre {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background:
    linear-gradient(var(--nlg-bar-red), var(--nlg-bar-red)) 32px 0 / 12px calc(100% - 25px) no-repeat,
    linear-gradient(var(--nlg-bar-red), var(--nlg-bar-red)) 32px 100% / 12px 5px no-repeat,
    linear-gradient(var(--nlg-bar-blue), var(--nlg-bar-blue)) 0 calc(100% - 10px) / calc(100% - 73px) 10px no-repeat,
    linear-gradient(var(--nlg-bar-blue), var(--nlg-bar-blue)) 100% calc(100% - 10px) / 51px 10px no-repeat,
    linear-gradient(var(--nlg-bar-yellow), var(--nlg-bar-yellow)) calc(100% - 56px) 100% / 12px 58% no-repeat;
}

.nw-speciale__nota-testo {
  position: relative;
  font-size: var(--nlg-fs-body-sm);
  line-height: 1.5;
  color: var(--nlg-text-1);
}

.nw-speciale__nota-marca .nw-speciale__micro {
  position: relative;
}

/* Il disclaimer cromatico, tono informazione (§ 5.8.1 «Cromatico»):
   l'icona e la colonna del testo in riga, come la pagina 1:1 «Scheda
   prodotto» e sezioni/nlg-b10-disclaimer-cromatico.html («il colore sta su
   fondo, bordo e icona»). */
.nw-speciale__disclaimer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--nlg-s-3) var(--nlg-s-4);
  background: var(--nlg-info-bg);
  border: 1px solid var(--nlg-info-border);
  border-radius: var(--nlg-r-lg);
  color: var(--nlg-info-ink);
}

.nw-speciale__disclaimer-icona {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nw-speciale__disclaimer-testi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nw-speciale__disclaimer .nw-speciale__micro {
  color: var(--nlg-info-ink);
}

.nw-speciale__disclaimer .nw-speciale__nota-testo {
  color: var(--nlg-text-1);
}

/* Il filo dopo l'occhiello («Galleria ———»). */
.nw-speciale__filo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nw-speciale__filo-linea {
  flex: 1;
  height: 1px;
  background: var(--nlg-border);
}

/* ═══════════════════════ Il contatore ═══════════════════════ */

.nw-contatore {
  display: inline-flex;
  align-items: center;
  height: 36px;
  overflow: hidden;
  border: var(--nlg-bordo-comando) solid var(--nlg-border-strong);
  border-radius: var(--nlg-r-md);
  background: var(--nlg-surface-1);
}

.nw-contatore__passo {
  width: 32px;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--nlg-text-2);
  font-size: var(--nlg-fs-body);
  cursor: pointer;
}

.nw-contatore__valore {
  width: 40px;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--nlg-text-1);
  font-family: var(--nlg-font-mono);
  font-size: var(--nlg-fs-caption);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

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

/* ═══════════════════════ Anteprima prodotto · card e distinta (§ 4.6.2) ═══════════════════════ */

.nw-prodotti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--nlg-g4, repeat(4, minmax(0, 1fr)));
  gap: 18px;
  align-items: stretch;
}

.nw-prodotti--3 {
  grid-template-columns: var(--nlg-g3, repeat(3, minmax(0, 1fr)));
}

.nw-prodotti__card {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  min-width: 0;
  padding: var(--nlg-s-3) var(--nlg-s-3) var(--nlg-s-4);
  background: var(--nlg-canvas);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-prodotti__card:hover {
  border-color: var(--nlg-border-strong);
  box-shadow: var(--nlg-shadow-sm);
}

/* Card e fondo non hanno mai lo stesso colore: le pagine 1:1 mettono la
   card su --nlg-canvas nelle fasce --nlg-surface-1 («Puoi noleggiare
   anche», «Le nostre proposte di allestimento») e su --nlg-surface-1 nelle
   sezioni su canvas (il listing della proposta, «Altre proposte di
   allestimento» del set). */
.nw-speciale__sezione:not(.nw-speciale__sezione--fondo) :is(.nw-prodotti__card, .nw-set__voce) {
  background: var(--nlg-surface-1);
}

/* «Misure e peso» dell'anteprima (slot facoltativo). */
.nw-prodotti__misure {
  font-size: var(--nlg-fs-caption);
  color: var(--nlg-text-3);
}

.nw-prodotti__immagine {
  aspect-ratio: 1 / 1;
}

.nw-prodotti__testi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  padding: 0 6px;
}

.nw-prodotti__codice {
  font-family: var(--nlg-font-mono);
  font-size: 11px;
  color: var(--nlg-text-3);
}

.nw-prodotti__nome {
  font-family: var(--nlg-font-ui);
  font-weight: 700;
  font-size: var(--nlg-fs-body);
  line-height: 1.3;
  color: var(--nlg-text-1);
  text-decoration: none;
}

a.nw-prodotti__nome:hover {
  color: var(--nlg-blue-ink);
}

.nw-prodotti__azione {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-1);
  width: 100%;
  margin-top: auto;
  padding-top: var(--nlg-s-1);
}

.nw-prodotti__prezzo-riga {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.nw-prodotti__aggiungi {
  height: 40px;
  justify-content: center;
  margin-top: var(--nlg-s-1);
  font-size: var(--nlg-fs-body-sm);
}

.nw-distinta__cornice {
  overflow: hidden;
  background: var(--nlg-canvas);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-distinta {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nw-distinta__riga {
  display: grid;
  grid-template-columns: var(--nlg-g5, 72px minmax(0, 1fr) auto auto auto);
  gap: 18px;
  align-items: center;
  padding: var(--nlg-s-3) 18px;
  border-bottom: 1px solid var(--nlg-border);
}

.nw-distinta__immagine {
  width: 72px;
  aspect-ratio: 1 / 1;
  border-radius: var(--nlg-r-md);
}

.nw-distinta__testi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.nw-distinta__quantita {
  font-family: var(--nlg-font-mono);
  font-size: var(--nlg-fs-caption);
  white-space: nowrap;
}

.nw-distinta__prezzo {
  align-items: flex-end;
  min-width: 96px;
}

.nw-distinta__prezzo .nw-speciale__prezzo-cifra {
  font-size: var(--nlg-fs-body-lg);
}

/* Il totale: la cifra a 22 px e «+ IVA» non si separano; se la riga non
   basta (il telefono) la cifra scende sotto l'etichetta, a destra. */
.nw-distinta__totale {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: var(--nlg-s-1) 14px;
  margin: 0;
  padding: 14px 18px;
}

.nw-distinta__totale .nw-set-pagina__cifra {
  font-size: 22px;
}

/* ═══════════════════════ Anteprima set piccola (§ 4.6.4) ═══════════════════════ */

.nw-set {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--nlg-g4, repeat(4, minmax(0, 1fr)));
  gap: 18px;
}

.nw-set__voce {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  min-width: 0;
  padding: var(--nlg-s-3) var(--nlg-s-3) var(--nlg-s-4);
  background: var(--nlg-canvas);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-set__voce:hover {
  border-color: var(--nlg-border-strong);
  box-shadow: var(--nlg-shadow-sm);
}

.nw-set__immagini {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Il ripiego del brand sotto l'immagine, come il passe-partout: la pausa
   sotto le immagini grandi, la trama sotto le miniature (pagine 1:1). */
.nw-set__immagine,
.nw-mosaico__principale,
.nw-allestimento__immagine {
  background: linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)), url("../brand/immagini/nlg-pausa.png") center / cover no-repeat, var(--nlg-immagine-fondo);
}

.nw-set__miniatura,
.nw-mosaico__tessera {
  background: linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)), url("../brand/immagini/nlg-trama.png") center / cover no-repeat;
}

.nw-set__immagine {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--nlg-r-lg);
}

.nw-set__immagine img,
.nw-set__miniatura img,
.nw-mosaico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nw-set__galleria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.nw-set__miniatura {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--nlg-r-md);
}

.nw-set__testi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 6px;
}

.nw-set__nome {
  font-family: var(--nlg-font-ui);
  font-weight: 700;
  font-size: var(--nlg-fs-body-lg);
  line-height: 1.3;
  color: var(--nlg-text-1);
  text-decoration: none;
}

/* Come il nome di un prodotto (`a.nw-prodotti__nome:hover`): l'inchiostro
   blu sotto il puntatore, non il --nlg-action-hover di `a:hover`. */
a.nw-set__nome:hover {
  color: var(--nlg-blue-ink);
}

.nw-set__testi .nw-speciale__micro {
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* «Richiedi informazioni per questo set →» (terzo livello, `.nw-terzo--blu`)
   va a capo dentro la card: sporgeva dalla voce di 22 px a 360, di 118 a
   1024 e di 64 a 1280 quando non andava a capo (revisione del 2026-10-01).
   Il tocco resta da 44 px. */
.nw-set__informazioni {
  height: auto;
  min-height: var(--nlg-tap-min);
  padding: 0;
  justify-content: flex-start;
  margin-top: 2px;
  white-space: normal;
  text-align: left;
}

/* ═══════════════════════ Servizi extra (§ 4.6.3, § 5.8.2) ═══════════════════════ */

.nw-servizi {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: var(--nlg-g2, repeat(2, minmax(0, 1fr)));
  gap: 18px var(--nlg-s-6);
}

.nw-servizi--scheda {
  grid-template-columns: var(--nlg-g3, repeat(3, minmax(0, 1fr)));
  gap: 18px;
}

/* I gruppi della scheda prodotto, «Inclusi» e «Su richiesta»
   (Personalizzazione 0.2.0): un titolo e il suo elenco, uno sotto l'altro. */
.nw-servizi__gruppo {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  width: 100%;
}

.nw-servizi__gruppo-titolo {
  margin: 0;
}

.nw-servizi__voce {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: var(--nlg-s-3) var(--nlg-s-4) var(--nlg-s-3) var(--nlg-s-3);
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-servizi__voce--banner {
  gap: 20px;
  padding: 14px;
  background: var(--nlg-canvas);
}

.nw-servizi__immagine {
  flex: none;
  width: 88px;
  aspect-ratio: 1 / 1;
}

.nw-servizi__immagine--grande {
  width: 160px;
  max-width: 40%;
}

.nw-servizi__nome {
  font-family: var(--nlg-font-ui);
  font-weight: 700;
  font-size: var(--nlg-fs-body);
  line-height: 1.3;
}

.nw-servizi__nome--banner {
  font-size: var(--nlg-fs-h4);
  line-height: var(--nlg-lh-h4);
  color: var(--nlg-blue-ink);
}

/* ═══════════════════════ Proposte di noleggio (§ 5.6.1) ═══════════════════════ */

/* L'apertura: introduzione e indice a sinistra, il box a destra su due
   righe. Nel markup l'ordine e' quello del telefono — introduzione, box,
   indice (§ 5.6.1: «il box subito dopo l'introduzione e l'indice dopo il
   box») —: il box prende l'ultima colonna, che sul desktop e' la seconda e
   sul telefono, a una colonna, e' la sola, e la seconda riga flessibile
   tiene l'indice attaccato all'introduzione mentre il box la allunga. */
.nw-proposta__apertura {
  display: grid;
  grid-template-columns: var(--nlg-g2, 1.3fr 1fr);
  grid-template-rows: auto 1fr;
  gap: 22px 40px;
  align-items: start;
}

.nw-proposta__apertura > * {
  min-width: 0;
}

.nw-proposta__box {
  grid-column: -2 / -1;
  grid-row: span 2;
}

.nw-proposta__testa {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nw-proposta__percorso {
  margin: 0;
  font-size: var(--nlg-fs-overline);
}

.nw-indice {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--nlg-action);
}

.nw-indice__titolo {
  padding: 14px 0 6px;
}

/* Una riga dell'indice (pagina 1:1): nome e riga breve, «N disponibili» col
   pallino, la freccia. */
.nw-indice__voce {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--nlg-border);
  color: inherit;
  text-decoration: none;
}

.nw-indice__voce:hover {
  color: var(--nlg-blue-ink);
}

.nw-indice__testi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nw-indice__nome {
  font-family: var(--nlg-font-ui);
  font-weight: 700;
  font-size: var(--nlg-fs-body-lg);
  line-height: 1.3;
}

.nw-indice__breve {
  font-size: var(--nlg-fs-body-sm);
  color: var(--nlg-text-2);
}

/* La freccia e' del foglio, fuori dal nome che il lettore di schermo legge;
   la seconda dichiarazione le toglie anche la voce, dove il browser la capisce. */
.nw-indice__voce::after {
  content: "→";
  content: "→" / "";
  grid-column: 3;
  font-family: var(--nlg-font-ui);
  font-weight: 700;
  color: var(--nlg-blue-ink);
}

/* La figlia non ancora online (Proposte::indice): la stessa riga, coi
   testi della 1:1, ma non e' un collegamento e non ne ha l'aspetto —
   niente freccia, niente blu al passaggio. Il conto non c'e': la vista
   non lo scrive. */
.nw-indice__voce--muta::after {
  content: none;
}

.nw-indice__voce--muta:hover {
  color: inherit;
}

.nw-proposta__box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--nlg-s-5);
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  box-shadow: var(--nlg-shadow-sm);
}

.nw-proposta__box-testa {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-1);
}

.nw-proposta__box-testa .nw-speciale__micro {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.nw-proposta__richiedi,
.nw-proposta__chiama {
  justify-content: center;
}

/* La nota della pagina 1:1 in coda al box. */
.nw-proposta__nota {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nlg-text-3);
}

.nw-proposta__nota a {
  text-decoration: underline;
}

/* «Carica altri 25 prodotti» in coda al listing (pagina 1:1): il bordato
   blu, piu' basso del «Chiama» del box — 44 px e 22 di lato — e al centro
   della colonna. Nasce `hidden` e lo scopre js/listing.js. */
.nw-proposta__altri {
  align-self: center;
  height: 44px;
  padding: 0 22px;
  cursor: pointer;
}

/* ═══════════════════════ Scheda prodotto (§ 5.6.2) ═══════════════════════ */

.nw-scheda__apertura {
  padding: var(--nlg-s-5) 0 36px;
}

.nw-scheda__griglia {
  display: grid;
  grid-template-columns: var(--nlg-g2, 1.45fr 1fr);
  gap: 36px;
  align-items: stretch;
}

.nw-scheda__immagine {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 640px;
  overflow: hidden;
  border-radius: var(--nlg-r-xl);
  background: linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)), url("../brand/immagini/nlg-pausa.png") center / cover no-repeat, var(--nlg-passepartout);
  border: 1px solid var(--nlg-border);
}

.nw-scheda__foto {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 720px;
  object-fit: contain;
}

.nw-scheda__immagine .nw-speciale__ripiego {
  min-height: 640px;
}

.nw-scheda__dati {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-width: 0;
}

.nw-scheda__titolo {
  margin: 0;
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: var(--nlg-fs-h2);
  line-height: var(--nlg-lh-h2);
  letter-spacing: var(--nlg-ls-h2);
  text-wrap: balance;
}

.nw-scheda__breve {
  margin: 0;
  font-size: var(--nlg-fs-body);
  line-height: 1.6;
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-scheda__vivi {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nw-scheda__codice-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.nw-scheda__codice {
  font-family: var(--nlg-font-mono);
  font-size: var(--nlg-fs-caption);
  color: var(--nlg-text-3);
}

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

.nw-scheda__cifra {
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: var(--nlg-fs-h2);
  letter-spacing: var(--nlg-ls-h2);
}

.nw-scheda__box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  box-shadow: var(--nlg-shadow-sm);
}

/* La riga dei campi (inizio, fine, provincia) prende la riga intera e va a
   capo da sola (css/moduli.css); contatore e «Aggiungi al noleggio» restano
   sulla stessa riga anche sul telefono, come nella pagina 1:1. */
.nw-scheda__aggiungi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nlg-s-3);
}

.nw-scheda__aggiungi .nw-contatore {
  height: 48px;
  flex: none;
  background: var(--nlg-canvas);
}

/* Il contatore dell'apertura della pagina 1:1: bottoni da 44 px a 18, la
   cifra a 15 — il tocco minimo (SKILL.md, «Tocco minimo 44×44 sempre»);
   la card dei correlati resta a 32. */
.nw-scheda__aggiungi .nw-contatore__passo {
  width: 44px;
  font-size: var(--nlg-fs-body-lg);
}

.nw-scheda__aggiungi .nw-contatore__valore {
  min-width: 32px;
  font-size: var(--nlg-fs-button);
}

/* Base zero e scritta che va a capo dentro il bottone: il bottone sta
   accanto al contatore e non esce mai dalla scheda (a 360 px, quando non
   andava a capo, usciva dalla scheda e dalla finestra: revisione del
   2026-10-01). Ma non scende sotto 8.5rem, dove «Aggiungi al noleggio» sta
   in due righe: fra 720 e 820 px, e a 320, il bottone largo 70-111 px
   portava la scritta su tre righe, fuori dai 48 px (collaudo del
   2026-10-10, V02). Dove accanto al contatore non c'e' posto, la riga del
   box (che va a capo) lo porta sotto, a tutta larghezza. */
.nw-scheda__aggiungi-bottone {
  flex: 1 1 0;
  min-width: 8.5rem;
  height: 48px;
  padding: 0 var(--nlg-s-4);
  justify-content: center;
  white-space: normal;
  text-align: center;
}

.nw-scheda__informazioni {
  align-self: flex-end;
}

/* La tipografia dell'apertura della pagina 1:1: l'occhiello a 12 px, le
   etichette dei campi a 11 px, la nota del prezzo al corpo di base in
   --nlg-text-2; campi e contatore su --nlg-canvas dentro il box bianco. */
.nw-scheda__dati > .nw-speciale__occhiello {
  font-size: var(--nlg-fs-overline);
}

.nw-scheda__campo .nw-speciale__micro {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.nw-scheda__prezzo .nw-speciale__nota {
  font-size: var(--nlg-fs-body);
  color: var(--nlg-text-2);
}

.nw-scheda__box .nlg-campo {
  background: var(--nlg-canvas);
}

.nw-scheda__contenuto {
  padding-top: 40px;
  background: var(--nlg-surface-1);
  border-top: 1px solid var(--nlg-border);
  border-bottom: 1px solid var(--nlg-border);
}

/* La scheda senza prosa: la zona libera e' vuota, e la nota «Descrizione
   del prodotto» e' l'ultima cosa della fascia. Lo spazio sotto lo davano le
   sezioni della prosa; senza, la nota toccava il bordo. Prende lo stesso
   respiro della testa, come nella pagina 1:1. Una scheda con la prosa non
   lo raddoppia: li' la nota non e' l'ultima. */
.nw-scheda__contenuto > .nw-speciale__contenitore:last-child {
  padding-bottom: 40px;
}

/* La prosa della scheda (§ 5.6.2, [Sezione Contenuto]; dal 2026-11-02):
   nella colonna della nota, come nella pagina 1:1 «Scheda prodotto» —
   titoli H2 di peso 800 alla misura H3, paragrafi in --nlg-text-2, 22 px
   fra l'uno e l'altro e dalla nota. La monta App\Services\Montaggio\
   ProsaDelProdotto. */
.nw-scheda__prosa {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 22px;
}

.nw-scheda__prosa h2 {
  margin: 0;
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: var(--nlg-fs-h3);
  line-height: var(--nlg-lh-h3);
  letter-spacing: var(--nlg-ls-h3);
  color: var(--nlg-text-1);
  text-wrap: balance;
}

.nw-scheda__prosa h3 {
  margin: 0;
  font-family: var(--nlg-font-ui);
  font-weight: 700;
  font-size: var(--nlg-fs-body-lg);
  line-height: 1.3;
  color: var(--nlg-text-1);
}

.nw-scheda__prosa p,
.nw-scheda__prosa ul,
.nw-scheda__prosa ol {
  margin: 0;
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-scheda__prosa ul,
.nw-scheda__prosa ol {
  padding-left: 1.25em;
}

/* Il Banner Partner «Diventa partner» (§ 5.8.3). */
.nw-partner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
  padding: var(--nlg-s-4) 18px 30px 100px;
  background: var(--nlg-canvas);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-lg);
  color: var(--nlg-text-1);
  font-size: var(--nlg-fs-body-sm);
  line-height: 1.5;
  text-decoration: none;
}

/* Bordo e ombra, non l'inchiostro: senza il colore qui, `a:hover` del
   libro (typography.css, (0,1,1)) scriverebbe il banner in
   --nlg-action-hover. */
.nw-partner:hover {
  border-color: var(--nlg-border-strong);
  box-shadow: var(--nlg-shadow-sm);
  color: var(--nlg-text-1);
}

/* La signature del Banner Partner (pagina 1:1, sezioni/nlg-b10-partner-
   diventa.html): la rossa a 32 px col suo moncone, la blu continua a tutta
   larghezza, la gialla accanto alla rossa (61 px) dal 42 % al fondo. Non e'
   la geometria del disclaimer con grafica (`.nw-speciale__barre`). */
.nw-partner__barre {
  background:
    linear-gradient(var(--nlg-bar-red), var(--nlg-bar-red)) 32px 0 / 12px calc(100% - 25px) no-repeat,
    linear-gradient(var(--nlg-bar-red), var(--nlg-bar-red)) 32px 100% / 12px 5px no-repeat,
    linear-gradient(var(--nlg-bar-blue), var(--nlg-bar-blue)) 0 calc(100% - 10px) / 100% 10px no-repeat,
    linear-gradient(var(--nlg-bar-yellow), var(--nlg-bar-yellow)) 61px 100% / 12px 58% no-repeat;
}

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

.nw-partner__azione {
  position: relative;
  align-self: flex-end;
  font-family: var(--nlg-font-ui);
  font-weight: 600;
  font-size: var(--nlg-fs-body-sm);
  color: var(--nlg-success-ink);
  text-decoration: underline;
  text-decoration-color: var(--nlg-success-border);
  text-underline-offset: 4px;
  white-space: nowrap;
}

/* Gli allestimenti della scheda: la card «Allestimento» della pagina 1:1,
   tre per riga, intera cliccabile — immagine 16 : 10, «Allestimento · N
   prodotti», nome, riga breve. */
.nw-allestimenti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--nlg-g3, repeat(3, minmax(0, 1fr)));
  gap: 18px;
}

.nw-allestimento {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  height: 100%;
  box-sizing: border-box;
  padding: var(--nlg-s-3);
  background: var(--nlg-canvas);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  color: inherit;
  text-decoration: none;
}

.nw-allestimento:hover {
  border-color: var(--nlg-border-strong);
  box-shadow: var(--nlg-shadow-sm);
  color: inherit;
}

.nw-allestimento__immagine {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--nlg-r-lg);
}

.nw-allestimento__immagine img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nw-allestimento__testi {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-1);
  padding: 0 6px 6px;
}

.nw-allestimento__micro {
  font-family: var(--nlg-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

.nw-allestimento__nome {
  font-family: var(--nlg-font-ui);
  font-weight: 700;
  font-size: var(--nlg-fs-body-lg);
  line-height: 1.3;
  color: var(--nlg-text-1);
}

.nw-allestimento__nota {
  font-size: var(--nlg-fs-body-sm);
  color: var(--nlg-text-2);
}

/* Galleria, scheda tecnica, FAQ. */
.nw-galleria {
  display: grid;
  grid-template-columns: var(--nlg-g4, repeat(4, 1fr));
  gap: 14px;
}

.nw-galleria__voce {
  aspect-ratio: 4 / 3;
}

.nw-galleria__voce img {
  object-fit: cover;
}

/* § 5.6.2 · la galleria in grande (brand book 5.17.0, «Layout 1-1»): il
   collegamento di ogni immagine la apre in una finestra sopra il velo. */
.nw-galleria__apri {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  cursor: zoom-in;
}

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

.nw-galleria__voce:has(.nw-galleria__apri:hover) {
  border-color: var(--nlg-action);
}

.nw-galleria__finestra {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--nlg-s-5);
  border: 0;
  background: transparent;
  color: var(--nlg-text-1);
}

.nw-galleria__finestra[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nw-galleria__finestra::backdrop {
  background: var(--nlg-scrim);
}

.nw-galleria__riquadro {
  box-sizing: border-box;
  width: min(1120px, 100%);
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--nlg-surface-1);
  border-radius: var(--nlg-r-xl);
  box-shadow: var(--nlg-shadow-lg);
}

.nw-galleria__barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px 0 6px;
}

.nw-galleria__conto {
  flex: none;
  font-family: var(--nlg-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--nlg-text-3);
}

.nw-galleria__didascalia {
  flex: 1;
  min-width: 0;
  font-family: var(--nlg-font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--nlg-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nw-galleria__scena {
  position: relative;
  min-height: 0;
}

.nw-galleria__grande {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: var(--nlg-r-lg);
  background: var(--nlg-passepartout);
}

.nw-galleria__tondo {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nlg-r-pill);
  border: 1px solid var(--nlg-border-strong);
  background: var(--nlg-surface-1);
  color: var(--nlg-text-1);
  cursor: pointer;
}

.nw-galleria__tondo:hover {
  border-color: var(--nlg-action);
  color: var(--nlg-blue-ink);
}

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

.nw-galleria__tondo svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.nw-galleria__freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: var(--nlg-shadow-sm);
}

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

.nw-galleria__freccia--prec {
  left: 12px;
}

.nw-galleria__freccia--succ {
  right: 12px;
}

.nw-tecnica {
  display: grid;
  grid-template-columns: var(--nlg-g2, 1fr 1fr);
  gap: 18px;
}

.nw-tecnica__riquadro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-tecnica__titolo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--nlg-font-ui);
  font-weight: 700;
  font-size: var(--nlg-fs-h4);
  line-height: var(--nlg-lh-h4);
  letter-spacing: var(--nlg-ls-h4);
}

.nw-tecnica__tacca {
  width: 4px;
  height: 22px;
  border-radius: var(--nlg-r-tacca);
  background: var(--nlg-bar-blue);
}

.nw-tecnica__voci {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.nw-tecnica__voce {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--nlg-border);
}

.nw-tecnica__voce dt {
  font-family: var(--nlg-font-mono);
  font-size: var(--nlg-etichetta-fs, 10.5px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nlg-text-3);
}
/* La «i» informativa accanto all'etichetta (2026-10-28): il comando del
   libro (.nlg-info, 44 px al tocco) senza allargare la riga. */
.nw-tecnica__info { vertical-align: middle; margin: calc((var(--nlg-tap-min) - 1lh) / -2) 0 calc((var(--nlg-tap-min) - 1lh) / -2) var(--nlg-s-1); }
.nw-campo-info__tipo, .nw-campo-info__valori { color: var(--nlg-text-3); font-size: var(--nlg-fs-caption); }

.nw-tecnica__voce dd {
  margin: 0;
  font-size: var(--nlg-fs-body-sm);
  line-height: 1.5;
  color: var(--nlg-text-1);
}

.nw-faq {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-faq__voce {
  padding: 0 20px;
  border-bottom: 1px solid var(--nlg-border);
}

.nw-faq__domanda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nlg-s-4);
  min-height: 52px;
  padding: var(--nlg-s-3) 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--nlg-font-ui);
  font-weight: 600;
  font-size: var(--nlg-fs-body);
}

.nw-faq__domanda::-webkit-details-marker {
  display: none;
}

/* Il chevron della pagina 1:1 (18 px, tratto --nlg-text-3), capovolto a
   voce aperta. */
.nw-faq__segno {
  flex: none;
  fill: none;
  stroke: var(--nlg-text-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nw-faq__voce[open] .nw-faq__segno {
  transform: rotate(180deg);
}

/* La misura di lettura e' quella del contratto, 72ch, in css/site.css: il
   70ch della pagina 1:1, scritto qui, la riscriveva (collaudo del
   2026-10-10, C38). */
.nw-faq__risposta {
  margin: 0 0 var(--nlg-s-4);
  font-size: var(--nlg-fs-body-sm);
  line-height: 1.6;
  color: var(--nlg-text-2);
}

/* ═══════════════════════ Set · Mosaico (§ 5.6.3) ═══════════════════════ */

.nw-set-pagina__testa {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  max-width: 820px;
}

.nw-mosaico {
  display: grid;
  grid-template-columns: var(--nlg-g3, 2fr 1fr 1fr);
  gap: var(--nlg-s-3);
}

.nw-set-pagina__testa .nw-speciale__occhiello {
  margin: 0;
  font-size: var(--nlg-fs-overline);
}

.nw-mosaico__principale {
  grid-row: 1 / span 2;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--nlg-r-xl);
  border: 1px solid var(--nlg-border);
}

.nw-mosaico__tessera {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--nlg-r-xl);
  border: 1px solid var(--nlg-border);
}

/* Sul telefono «una grande e due piccole» (§ 5.6.3, didascalia del
   Mosaico): la grande su tutta la riga, due tessere affiancate sotto, le
   altre due a riposo. La soglia e' quella della banda telefono di
   tokens/dispositivo.css. */
@media (max-width: 719px) {
  .nw-mosaico {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nw-mosaico__principale {
    grid-row: auto;
    grid-column: 1 / -1;
  }

  .nw-mosaico__tessera:nth-of-type(n + 3) {
    display: none;
  }
}

.nw-set-pagina__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nlg-s-4);
  padding: 18px 22px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  box-shadow: var(--nlg-shadow-sm);
}

.nw-set-pagina__prezzo {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-1);
}

.nw-set-pagina__prezzo .nw-speciale__micro {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.nw-set-pagina__cifra {
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}

/* «+ IVA» accanto alle cifre grandi: 13 px in peso 500, non l'800 della cifra. */
.nw-set-pagina__cifra .nw-speciale__prezzo-nota {
  font-size: var(--nlg-fs-caption);
  font-weight: 500;
}

.nw-set-pagina__informazioni {
  min-height: 48px;
  padding: 0 6px;
  white-space: nowrap;
}

/* La descrizione: il disclaimer e il corpo nella stessa sezione, 40 px sotto
   la distinta e il corpo 22 px sotto il disclaimer (pagina 1:1). Il
   disclaimer sta su --nlg-surface-1: la sezione e' su canvas. */
.nw-set-pagina__descrizione {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.nw-set-pagina__descrizione .nw-speciale__nota-marca {
  background: var(--nlg-surface-1);
}

.nw-set-pagina__descrizione .nw-speciale__contenuto {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.nw-set-pagina__descrizione .nlg-sezione,
.nw-set-pagina__descrizione .nw-speciale__corpo {
  padding-top: 0;
  padding-bottom: 0;
}

/* Il Banner «Noleggiare con Noleggiando» (§ 5.8.4) nella forma della
   pagina 1:1 del set (public.speciali.noleggiare): fascia piena coi fili,
   niente card. */
.nw-noleggiare {
  background: var(--nlg-surface-1);
  border-top: 1px solid var(--nlg-border);
  border-bottom: 1px solid var(--nlg-border);
}

.nw-noleggiare__riga {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: calc(52px * var(--nlg-passo-k, 1)) var(--nlg-margine, 28px) calc(48px * var(--nlg-passo-k, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  color: var(--nlg-text-1);
}

.nw-noleggiare__testa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nlg-s-3);
  max-width: 760px;
  text-align: center;
}

.nw-noleggiare__raggera {
  display: flex;
  justify-content: center;
}

.nw-noleggiare__raggera svg {
  flex: none;
  height: 32px;
  fill: var(--nlg-mark);
}

.nw-noleggiare__titolo {
  margin: 0;
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: var(--nlg-fs-h2);
  line-height: var(--nlg-lh-h2);
  letter-spacing: var(--nlg-ls-h2);
  text-wrap: balance;
}

/* Il nome e il «?» stanno insieme: il punto non resta solo su una riga. */
.nw-noleggiare__insieme {
  white-space: nowrap;
}

/* Sotto i 360 px il nome col «?», che non va a capo, e' piu' largo della
   colonna a 34 px: a 320 usciva ai due lati e la «N» e il «?» si leggevano
   tagliati (collaudo del 2026-10-10, C39). Il titolo scende ai quattro
   quinti; alle larghezze che il libro verifica, 360 e 390, resta a 34. */
@media (max-width: 359px) {
  .nw-noleggiare__titolo { font-size: calc(var(--nlg-fs-h2) * 0.8); }
}

.nw-noleggiare__nome {
  position: relative;
  display: inline-block;
  padding: 0 0.12em;
}

.nw-noleggiare__logotipo {
  font-family: var(--nlg-font-logo);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--nlg-logotype);
}

.nw-noleggiare__com {
  color: var(--nlg-logo-dot);
  font-weight: 600;
}

.nw-noleggiare__cerchio {
  position: absolute;
  left: -6%;
  top: -22%;
  width: 112%;
  height: 150%;
  overflow: visible;
  pointer-events: none;
}

.nw-noleggiare__sotto {
  margin: 0;
  font-size: var(--nlg-fs-body-lg);
  color: var(--nlg-text-2);
}

.nw-noleggiare__punti {
  display: grid;
  grid-template-columns: var(--nlg-g4, repeat(4, minmax(0, 1fr)));
  gap: 28px;
  width: 100%;
}

.nw-noleggiare__punto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nlg-s-3);
  padding: 0 var(--nlg-s-2);
  text-align: center;
}

.nw-noleggiare__icona {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--nlg-r-lg);
  background: var(--nlg-info-bg);
  border: 1px solid var(--nlg-info-border);
  color: var(--nlg-blue-ink);
}

.nw-noleggiare__icona svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.nw-noleggiare__voce {
  font-family: var(--nlg-font-ui);
  font-weight: 700;
  font-size: var(--nlg-fs-h4);
  line-height: var(--nlg-lh-h4);
  letter-spacing: var(--nlg-ls-h4);
}

.nw-noleggiare__testo {
  font-size: var(--nlg-fs-body-sm);
  line-height: 1.55;
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-noleggiare__testo b {
  color: var(--nlg-text-1);
}

/* ═══════════════════════ I blocchi del gestionale nel corpo (erp-blocco) ═══════════════════════ */

.nw-erp--listing {
  margin: var(--nlg-s-5) 0;
}

.nw-erp--prodotto {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 400px) minmax(0, 1fr));
  gap: 28px;
  align-items: start;
  margin: var(--nlg-s-5) 0;
  padding: 20px;
  background: var(--nlg-canvas);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-erp__immagine {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--nlg-r-lg);
  background: var(--nlg-passepartout);
  border: 1px solid var(--nlg-border);
}

.nw-erp__immagine img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nw-erp__ripiego {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)), url("../brand/immagini/nlg-pausa.png") center / cover no-repeat;
}

.nw-erp__ripiego--piccolo {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--nlg-r-md);
}

.nw-erp__dati {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 6px 0;
}

.nw-erp__codice {
  font-family: var(--nlg-font-mono);
  font-size: 11px;
  color: var(--nlg-text-3);
}

.nw-erp--prodotto .nw-erp__title {
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: var(--nlg-fs-h3);
  line-height: var(--nlg-lh-h3);
  letter-spacing: var(--nlg-ls-h3);
  color: var(--nlg-text-1);
  text-decoration: none;
}

.nw-erp__acquisto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid var(--nlg-border);
}

.nw-erp__prezzo {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  line-height: 1.15;
}

.nw-erp__prezzo-da,
.nw-erp__prezzo-nota {
  font-size: var(--nlg-fs-overline);
  color: var(--nlg-text-3);
}

.nw-erp__cifra {
  font-family: var(--nlg-font-ui);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.nw-erp__aggiungi {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nw-erp__informazioni {
  align-self: flex-end;
  padding: 0;
}

.nw-erp--servizio {
  display: inline-flex;
  align-items: center;
  gap: var(--nlg-s-3);
  margin: var(--nlg-s-2) 0;
  padding: 10px 14px 10px 10px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-erp__servizio {
  font-family: var(--nlg-font-ui);
  font-weight: 700;
  font-size: var(--nlg-fs-body);
}

/* ═══════════════════════ Il carosello di «Puoi noleggiare anche» (§ 5.6.2, brand book 5.16.0) ═══════════════════════ */

/* Card scorrevoli in orizzontale, quattro visibili su desktop, frecce
   accanto al titolo; su telefono si scorre col dito. Le misure sono
   quelle della pagina 1:1 «Scheda prodotto» (colonne fra 240 e 320 px,
   18 px fra le card, aggancio all'inizio della card). */
.nw-carosello__testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nlg-s-4);
}

.nw-carosello__comandi {
  display: flex;
  gap: 8px;
  flex: none;
}

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

.nw-carosello__freccia {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nlg-r-md);
  border: var(--nlg-bordo-comando, 1.5px) solid var(--nlg-border-strong);
  background: var(--nlg-surface-1);
  color: var(--nlg-text-1);
  cursor: pointer;
}

.nw-carosello__freccia:hover:not(:disabled) {
  border-color: var(--nlg-action);
  color: var(--nlg-blue-ink);
}

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

.nw-carosello__freccia:disabled { opacity: 0.4; cursor: default; }

.nw-carosello__binario .nw-prodotti {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, calc((100% - 54px) / 4), 320px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 10px;
}

.nw-carosello__binario .nw-prodotti__card { scroll-snap-align: start; }

@media (max-width: 719px) {
  .nw-carosello__comandi { display: none; }
  .nw-carosello__binario .nw-prodotti { grid-auto-columns: 78%; }
}