/*
 * Il CSS delle tre viste dei percorsi (Task 3: l'indice; Task successivi:
 * compositore e dettaglio useranno lo stesso scope `.nzeb-percorsi`).
 *
 * ⚠️ A differenza di Catalogo.dc.html e Homepage-Redesign-Tavolo-Tecnico.dc.html
 * (che portano una regione `<style>` con classi vere, sincronizzata in questo
 * foglio da uno script), Percorsi.dc.html è un canvas di sole regole INLINE
 * (`style="…"`), senza un solo `class=` sulla griglia dell'indice — verificato
 * leggendo il file, non assunto. Non esiste quindi una fonte da sincronizzare
 * byte per byte: questo foglio è scritto a mano, copiando le PROPORZIONI del
 * mockup (spaziature, raggi, rapporti dei caratteri) sui token del design
 * system corrente (tokens.css) — che sono diversi dai colori grezzi del
 * mockup (es. il verde del mockup è #94A93A, il lime del sistema è #BBBF26:
 * il mockup è un'iterazione precedente della palette). Consuma i token del
 * chrome e i componenti del corpo pagina: va caricato DOPO tokens.css,
 * chrome-wp.css e componenti.css — la dipendenza dichiarata in
 * inc/percorsi-viste.php è `nzb-componenti`, che è l'ultimo anello della
 * catena e implica gli altri.
 */

/* ⚠️ Dal 7 ago 2026 (Task 12) questo foglio NON disegna componenti: shell,
   testata, titolo, occhiello, sottotitolo, briciole e scorciatoie arrivano da
   componenti.css (fonte: partials/componenti.css) e sono resi dai partial di
   template-parts/sistema/. Qui resta la sola composizione delle tre viste.
   Se ti serve una forma nuova, o è una variante dichiarata o è un componente
   — e allora nasce nel sistema.

   Che fine hanno fatto le classi del censimento del 6 ago 2026:
     .nzeb-percorsi__shell             → .section-shell
     .nzeb-percorsi__titolo            → l'H1 della testata di sistema
     .nzeb-percorsi__occhiello         → .section-intro (era il SOTTOtitolo,
                                          nonostante il nome)
     .nzeb-percorso-componi__occhiello → .section-intro
     .nzeb-percorsi-filtri             → .chip-list
     .nzeb-percorsi-filtri__chip       → .shortcut (rettangolare: la pillola
                                          scura nel resto del sito è
                                          .active-chip, che TOGLIE un filtro
                                          — questa lo mette)
     .nzeb-percorso-dettaglio__briciole → .breadcrumb
   Restano come classi di SUPERFICIE, non di componente:
     .nzeb-percorsi__hero, .nzeb-percorso-componi__hero — accanto a
     `.page-hero` sulla stessa <section>, esattamente come `.catalog-hero` su
     /shop/: portano il solo bordo inferiore e le regole di composizione.
     .nzeb-percorso-dettaglio__testata — NON è la testata di sistema: è a due
     colonne (informazioni + riquadro prezzo). Lì è entrato il solo
     breadcrumb. */

.nzeb-percorsi {
  box-sizing: border-box;
  width: 100%;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}
.nzeb-percorsi *, .nzeb-percorsi *::before, .nzeb-percorsi *::after { box-sizing: border-box; }
/* :where() a specificità zero: le classi dei componenti (chip attive, CTA)
   restano libere di vincere senza rincorrere la specificità del reset —
   stessa ricetta di `.catalog` (assets/css/catalogo.css). */
:where(.nzeb-percorsi) a { color: inherit; text-decoration: none; }

/* ---- La testata delle due viste editoriali: SOLO composizione ----
   La forma arriva dal sistema — `.page-hero` (fondo a carta millimetrata e
   respiro della shell), `.breadcrumb`, `.section-kicker`, `.section-intro`,
   `.chip-list`/`.shortcut` — resa da template-parts/sistema/testata.php. Qui
   resta ciò che è di QUESTA superficie, con lo stesso taglio con cui
   partials/catalogo.css tiene le proprie: il bordo che separa la testata da
   ciò che viene sotto, il colore dell'occhiello, la scala del titolo e lo
   stacco della barra di chip.

   ⚠️ Sparisce `background: var(--surface)` (bianco pieno): il fondo lo dà
   `.page-hero`, cioè la carta millimetrata su `--paper` che /shop/ e la home
   hanno già. Era una delle ragioni per cui la pagina «non c'entrava quasi
   nulla con le altre» — la sola differenza di tono si vedeva prima di
   leggere una riga. */
.nzeb-percorsi__hero, .nzeb-percorso-componi__hero { border-bottom: 1px solid var(--line); }
.nzeb-percorsi .page-hero .section-kicker { color: var(--bark); }
/* ⚠️ DEBITO DICHIARATO, non copia nascosta. Queste sono, valore per valore,
   le stesse dichiarazioni di `.catalog-hero h1` (partials/catalogo.css): la
   casa giusta è `.page-hero h1` in partials/componenti.css, dove ce n'è UNA
   per tutte le testate. Spostarla lì significa riscrivere il foglio del
   catalogo, cioè /shop/, che il Task 12 ha il divieto esplicito di toccare —
   la resa di home e catalogo non si muove di un pixel. Scopato a
   `.nzeb-percorsi` perché percorsi.css è accodato solo sulle tre viste:
   /shop/ non lo carica affatto.

   Il selettore nomina apposta `.page-hero` invece di `.nzeb-percorsi__hero`,
   così che il censimento delle duplicazioni VEDA il debito invece di perderlo
   come ha perso per mesi le classi rinominate. ⚠️ Quando questa riga è stata
   scritta la prima volta (7 ago 2026) era FALSA, e l'ha dimostrato la
   revisione eseguendo lo strumento: `.page-hero` non compariva, perché
   `scripts/censimento-duplicazioni.py` non aveva `componenti.css` — la casa
   dei componenti — fra i fogli scansionati. Lo strumento nato per trovare le
   duplicazioni era cieco proprio su quelle che il lotto stava creando.
   Corretto (fonte `392a4b0`) e RIMISURATO:

     $ python3 scripts/censimento-duplicazioni.py
     Classi vestite in piu' di un foglio: 43
     .page-hero        componenti:2 · percorsi:1

   Adesso il meccanismo descritto qui sopra esiste davvero. Nota la sfumatura,
   perché conta: il censimento elenca `.page-hero` fra le classi condivise ma
   NON la marca «STESSE PROPRIETA'» — di là vive il contenitore, qui il titolo.
   Il debito è visibile come classe vestita in due case, non come proprietà
   contesa: è la stessa forma con cui compaiono `.chip-list` e
   `.section-kicker`, che invece sono composizione legittima di superficie. Chi
   legge l'uscita deve venire qui per sapere quale delle due è. */
.nzeb-percorsi .page-hero h1 {
  max-width: 720px;
  margin: var(--space-sm) 0 var(--space-md);
  color: var(--bark);
  font: var(--display-weight) clamp(2rem, 4vw, 2.75rem)/1.05 var(--font-display);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}
/* Lo stacco verso ciò che sta sopra è composizione di pagina, non identità
   del componente: `.chip-list` porta da componenti.css solo display/wrap/gap,
   e ogni superficie dichiara il proprio margine (24px sul catalogo, 16px
   sulla home). Qui è quello del catalogo, perché è la stessa testata. */
.nzeb-percorsi .page-hero .chip-list { margin-top: var(--space-md); }

/* ---- La griglia dell'indice ---- */
.nzeb-percorsi__griglia-sezione { padding: var(--space-lg) 0 var(--space-section); }
.nzeb-percorsi__griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); align-items: stretch; }
.nzeb-percorsi__vuoto { max-width: 60ch; margin: var(--space-lg) 0; color: var(--ink-2); font-size: var(--body-size); }

/* ---- La card di un percorso ---- */
.nzeb-percorso-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.nzeb-percorso-card__media { height: 150px; margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-sm); overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.nzeb-percorso-card:hover { border-color: var(--bark); box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--bark) 55%, transparent); }

.nzeb-percorso-card__occhiello { margin: 0 0 var(--space-xs); color: var(--olive); font-size: var(--label-size); font-weight: var(--label-weight); line-height: var(--label-leading); letter-spacing: var(--label-tracking); text-transform: uppercase; }
.nzeb-percorso-card__titolo { margin: 0 0 var(--space-xs); font: var(--title-weight) var(--title-size)/var(--title-leading) var(--font-display); letter-spacing: var(--title-tracking); }
.nzeb-percorso-card__titolo a { color: var(--bark); }
.nzeb-percorso-card__titolo a:hover { color: var(--bark); text-decoration: underline; text-underline-offset: 3px; }
.nzeb-percorso-card__descrizione {
  --nzb-card-desc-righe: 2;
  margin: 0 0 var(--space-sm);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--nzb-card-desc-righe);
  line-clamp: var(--nzb-card-desc-righe);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.nzeb-percorso-card__dati { margin: 0 0 var(--space-sm); color: var(--ink); font-size: 0.875rem; }

.nzeb-percorso-card__piede { margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--paper-alt); }
.nzeb-percorso-card__singoli { margin: 0 0 2px; color: var(--ink-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.nzeb-percorso-card__singoli del { text-decoration: line-through; }
.nzeb-percorso-card__prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: var(--space-xs) 0 var(--space-sm); font-variant-numeric: tabular-nums; }
.nzeb-percorso-card__cifra { font: 800 var(--headline-size)/1 var(--font-display); font-size: 1.5rem; color: var(--ink); }
.nzeb-percorso-card__iva { color: var(--ink-2); font-size: 0.875rem; font-weight: 400; }
/* I due badge (risparmi € e −N%) vanno a capo INSIEME sotto il prezzo, mai
   uno per riga: contenitore inline-flex senza wrap (committente, 3 set 2026). */
.nzeb-percorso-card__badges { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.nzeb-percorso-card__risparmio { padding: 3px 9px; color: var(--olive); background: var(--lime-wash); border-radius: var(--radius-sm); font-size: var(--label-size); font-weight: 700; }
.nzeb-percorso-card__apertura { margin: 0 0 var(--space-xs); color: var(--ink-2); font-size: var(--body-size); font-weight: 600; }

/* Il colore viene dal componente di sistema (.button/.button--primary,
   components.css): qui resta solo ciò che è posizione e larghezza della CTA
   dentro la card. Stessa specificità di `.button` (0,1,0): l'ordine di
   caricamento (percorsi.css dopo components.css) fa vincere queste
   dichiarazioni sulle omonime del componente quando servono a QUESTA card
   (es. `display: flex` invece di `inline-flex`, per riempire il piede della
   card), mai per introdurre un colore locale. */
.nzeb-percorso-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  text-align: center;
}

/* ---- L'invito al compositore: la tessera in coda alla griglia ---- */
.nzeb-percorso-card--componi { justify-content: center; background: var(--lime-wash); border-color: var(--lime-soft); text-align: left; }
.nzeb-percorso-card--componi__titolo { margin: 0 0 var(--space-xs); font: 700 1.1875rem/1.25 var(--font-display); letter-spacing: var(--title-tracking); color: var(--bark); }
.nzeb-percorso-card--componi__testo { margin: 0 0 var(--space-sm); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; }
.nzeb-percorso-card--componi .nzeb-percorso-card__cta svg { width: 16px; height: 16px; flex: none; }

@media (max-width: 1099.98px) {
  .nzeb-percorsi__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .nzeb-percorsi__griglia { grid-template-columns: 1fr; }
}

/* =====================================================================
 * Il dettaglio (Task 4): /percorsi/<slug>/
 * Scope dedicato (`.nzeb-percorso-dettaglio`, `.nzeb-percorso-prezzo`, …):
 * nessuna di queste regole nomina `.single_add_to_cart_button`, `.cart` o
 * `.quantity` FUORI da quello scope — sulle 109 schede ordinarie il bottone
 * canonico di WooCommerce resta quello di sempre, invariato.
 * ===================================================================== */

.nzeb-percorso-dettaglio__testata { background: var(--surface); border-bottom: 1px solid var(--line); }
.nzeb-percorso-dettaglio__testata-griglia {
  padding: clamp(28px, 4vw, 44px) 0;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-lg);
  align-items: start;
}
/* Le briciole sono un componente (`.breadcrumb`, componenti.css): margine,
   inchiostro, corpo, hover e voce corrente arrivano da lì, e il markup da
   template-parts/sistema/briciole.php. Qui non resta niente da comporre —
   l'unica differenza della copia che viveva qui era un corpo di 0,8125rem
   contro `--label-size`, e non era una variante voluta: era una seconda
   scrittura della stessa cosa, fatta prima che il componente esistesse. */
.nzeb-percorso-dettaglio__occhiello { margin: 0 0 var(--space-xs); color: var(--olive); font-size: var(--label-size); font-weight: var(--label-weight); line-height: var(--label-leading); letter-spacing: var(--label-tracking); text-transform: uppercase; }
.nzeb-percorso-dettaglio__titolo {
  max-width: 640px;
  margin: 0 0 var(--space-sm);
  color: var(--bark);
  /* Peso 800 per decisione del committente (11 ago 2026): non tocca
     --headline-weight (700, consumato altrove — catalogo.css, .cart-page__titolo,
     homepage-tavolo.css), riusa --display-weight, già l'unico token del foglio
     che vale 800 e già impiegato più sopra (riga ~116, .page-hero h1) disaccoppiato
     dalla propria dimensione: qui prende il peso, non la misura. */
  font: var(--display-weight) var(--headline-size)/var(--headline-leading) var(--font-display);
  letter-spacing: var(--headline-tracking);
  text-wrap: balance;
}
.nzeb-percorso-dettaglio__descrizione { max-width: 560px; margin: 0 0 var(--space-sm); color: var(--ink-2); font-size: var(--lead-size); font-weight: var(--lead-weight); line-height: var(--lead-leading); }

.nzeb-percorso-dettaglio__statistiche { display: flex; flex-wrap: wrap; gap: var(--space-lg); font-variant-numeric: tabular-nums; }
.nzeb-percorso-dettaglio__stat-cifra { font: 800 1.375rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.nzeb-percorso-dettaglio__stat-etichetta { margin-top: 2px; color: var(--ink-2); font-size: 0.875rem; }

.nzeb-percorso-dettaglio__riquadro-hero { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-md); }

.nzeb-percorso-dettaglio__corpo { padding: var(--space-lg) 0 var(--space-section); display: grid; grid-template-columns: 1fr 380px; gap: var(--space-lg); align-items: start; }
.nzeb-percorso-dettaglio__colonna { min-width: 0; }
.nzeb-percorso-dettaglio__sezione { margin-top: var(--space-lg); }
.nzeb-percorso-dettaglio__sezione:first-child { margin-top: 0; }
/* Da 1.375rem (22px) a 1.625rem (26px), decisione del committente (11 ago 2026):
   l'800 letterale diventa --display-weight, per lo stesso motivo del titolo
   qui sopra — Manrope è variabile con range 200-800, 800 resta il tetto reale. */
.nzeb-percorso-dettaglio__sezione-titolo { margin: 0 0 var(--space-sm); font: var(--display-weight) 1.625rem/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--bark); }
.nzeb-percorso-dettaglio__sezione-lead { max-width: 65ch; margin: 0 0 var(--space-sm); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }

.nzeb-percorso-dettaglio__risultati { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: var(--space-sm) var(--space-md); list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.nzeb-percorso-dettaglio__risultati li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; line-height: 1.5; }
.nzeb-percorso-dettaglio__risultati svg { flex: none; width: 18px; height: 18px; margin-top: 2px; stroke: var(--olive); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Il `top` sommava solo l'header e lo spazio: sotto la barra di WordPress
   (che aggiunge 32px a `html` e fa scendere l'header sticky con lei) il
   riquadro restava ancorato a 94px fissi e finiva incollato alla barra —
   misurato sul servito: stacco 33px senza barra, 1px con la barra. La
   barra espone `--wp-admin--admin-bar--height` su `html` (32px, 46px sotto
   i 782px) solo quando il suo foglio è caricato: il ripiego a 0px lascia
   invariato chi non amministra. Sotto i 1100px la colonna passa a
   `position: static` (poco sotto), quindi il valore mobile della barra
   (46px) non entra mai in questo calcolo. */
.nzeb-percorso-dettaglio__sticky { position: sticky; top: calc(var(--bb-header-height, 0px) + var(--space-md) + var(--wp-admin--admin-bar--height, 0px)); align-self: start; }

/* ---- Le testimonianze (Task 6) ---- */
.nzeb-percorso-testimonianze { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-sm); }
.nzeb-percorso-testimonianze__scheda { position: relative; margin: 0; padding: var(--space-md); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.nzeb-percorso-testimonianze__virgolette { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 22px; height: 22px; fill: var(--lime-wash); }
.nzeb-percorso-testimonianze__testo { margin: 0 0 var(--space-sm); }
.nzeb-percorso-testimonianze__testo p { margin: 0; color: var(--ink); font-size: 0.9375rem; line-height: 1.6; }
.nzeb-percorso-testimonianze__firma { color: var(--ink-2); font-size: 0.875rem; }
.nzeb-percorso-testimonianze__firma strong { color: var(--bark); }

/* ---- La roadmap ---- */
.nzeb-percorso-roadmap { display: flex; flex-direction: column; }
.nzeb-percorso-roadmap__riga { display: flex; gap: 16px; }
.nzeb-percorso-roadmap__indice { display: flex; flex-direction: column; align-items: center; flex: none; }
.nzeb-percorso-roadmap__pallino {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bark); color: var(--paper);
  font: 700 0.875rem var(--font-body);
}
.nzeb-percorso-roadmap__filo { width: 2px; flex: 1; margin: 4px 0; background: var(--line); }
.nzeb-percorso-roadmap__scheda { flex: 1; margin-bottom: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.nzeb-percorso-roadmap__testata { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: var(--space-xs); }
.nzeb-percorso-roadmap__titolo { margin: 0; font: 700 1.0625rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.nzeb-percorso-roadmap__titolo a { color: var(--ink); }
.nzeb-percorso-roadmap__titolo a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.nzeb-percorso-roadmap__badge { flex: none; padding: 4px 9px; border-radius: var(--radius-sm); background: var(--lime-wash); color: var(--olive); font-size: 0.8125rem; font-weight: 700; }
.nzeb-percorso-roadmap__fase { margin: 0 0 var(--space-xs); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.nzeb-percorso-roadmap__fase strong { color: var(--bark); }
.nzeb-percorso-roadmap__prerequisito { display: block; margin-top: 4px; color: var(--ink-2); font-size: 0.875rem; }
.nzeb-percorso-roadmap__dati { margin: 0; color: var(--ink); font-size: 0.875rem; }

/* ---- Il riquadro prezzo (riusato: testata + colonna sticky) ---- */
.nzeb-percorso-prezzo__apertura { margin: 0 0 var(--space-xs); color: var(--ink-2); font-size: var(--body-size); font-weight: 600; }
.nzeb-percorso-prezzo__apertura-nota { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.nzeb-percorso-prezzo__singoli { margin: 0 0 2px; color: var(--ink-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.nzeb-percorso-prezzo__singoli del { text-decoration: line-through; }
.nzeb-percorso-prezzo__cifra-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: var(--space-xs) 0 var(--space-sm); font-variant-numeric: tabular-nums; }
.nzeb-percorso-prezzo__cifra { font: 800 2rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.nzeb-percorso-prezzo__iva { color: var(--ink-2); font-size: 0.875rem; font-weight: 400; }
.nzeb-percorso-prezzo__badges { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.nzeb-percorso-prezzo__risparmio { padding: 3px 9px; color: var(--olive); background: var(--lime-wash); border-radius: var(--radius-sm); font-size: var(--label-size); font-weight: 700; }

.nzeb-percorso-prezzo__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1.5px solid var(--bark); border-radius: var(--radius-sm);
  color: var(--bark); background: transparent;
  font-family: var(--font-body); font-size: var(--body-size); font-weight: 700; text-align: center;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.nzeb-percorso-prezzo__cta:hover, .nzeb-percorso-prezzo__cta:focus-visible { color: var(--paper); background: var(--bark); }

/* ⚠️ I 48px sono RATIFICATI, e la regola è questa (decisione del committente,
   6 ago 2026 — prima esistevano due valori senza che nessuno avesse deciso):

     44px  il bersaglio di DEFAULT di tutto il sito — navigazione, .button,
           footer, mega-menu, e anche la CTA secondaria qui sopra
           (.nzeb-percorso-prezzo__cta). È il minimo WCAG 2.5.5 AA.
     48px  SOLO le due CTA primarie a larghezza piena che concludono un
           acquisto: questa e .nzeb-percorso-componi__submit. È il valore
           consigliato da Material, e su un bersaglio d'acquisto un pollice in
           più non toglie niente a nessuno.

   Non è una gerarchia da estendere a piacere: sono due punti, entrambi
   elencati qui, e una guardia nel banco del tema li conta. Un terzo valore —
   o un 48 su qualcosa che non sia una CTA d'acquisto full-width — è una
   deriva, non una decisione, ed è esattamente ciò che questa nota esiste per
   impedire. */
.nzeb-percorso-prezzo .cart { margin: 0; }
.nzeb-percorso-prezzo .quantity { display: none; }
/* Task 5 (9 ago 2026): il bottone riceve `button--primary` dalla sovrascrittura
   di woocommerce/single-product/add-to-cart/simple.php. Fondo e inchiostro
   arrivano da `.button--primary` (components.css); bordo, raggio e
   tipografia arrivano invece dal RIVESTIMENTO del ponte (chrome-wp.css,
   Giro di rimedio 1 del Task 5), che li copia identici da `.button` — non
   da components.css direttamente, che su questa superficie perderebbe
   comunque per ordine di caricamento contro il `.button` del tema padre
   (stessa ragione dell'azzeratore, poche righe sopra in chrome-wp.css).
   ⚠️ Correzione, Giro di rimedio 3: la TRANSIZIONE non è vestita da
   nessuna delle due parti — quella applicata è il `transition: all linear
   0.2s` generico del tema padre. L'effetto a video è indistinguibile, ma
   la riga precedente di questo commento la attribuiva erroneamente a
   components.css: corretto perché un'attribuzione falsa è peggio di
   nessuna attribuzione. Restano solo le tre eccezioni che il componente di
   sistema non conosce: larghezza piena, il bersaglio a 48px (RATIFICATO,
   vedi nota sopra) e l'azzeramento del margine del <button>. */
.nzeb-percorso-prezzo .single_add_to_cart_button {
  width: 100%;
  min-height: 48px;
  margin: 0;
}
.nzeb-percorso-prezzo .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }

/* Il messaggio delle rate PayPal (plugin PayPal Payments 4.1.2) esce dall'hook
   `woocommerce_after_add_to_cart_form` come FRATELLO SUCCESSIVO di `form.cart`,
   con margine zero: senza questa riga si appoggia al bottone «Aggiungi al
   carrello» (rilievo del committente, 10 ago 2026). `:not(:empty)` perché
   quando lo SDK non risponde il div resta in pagina vuoto, e uno spazio
   fantasma sotto il bottone sarebbe peggio del difetto curato. */
.nzeb-percorso-prezzo .ppcp-messages:not(:empty) { margin-top: var(--space-sm); }

.nzeb-percorso-prezzo__pdf {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin-top: var(--space-xs); padding: 0 20px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--bark); font-size: 0.9375rem; font-weight: 700; text-align: center;
}
/* Rilievo 5 del committente (10 ago 2026) — QUARTA ricorrenza della stessa
   forma già curata il 2 ago su breadcrumb/chip e il 10 ago sui titoli-link
   dei percorsi (più sopra, e in tests/percorsi-nel-sistema.test.cjs): una
   regola :hover nostra cambia bordo e fondo ma dimentica `color`, e
   `a:hover { color: var(--bb-primary-color) }` del tema padre (specificità
   (0,1,1), un elemento nel selettore) vince sulla regola a riposo di pura
   classe (0,1,0) — misurato sul servito: da rgb(90,74,68)/--bark, contrasto
   7,67, a rgb(187,191,38) lime, contrasto 1,55. La riga `color` qui sotto
   porta il gruppo a (0,2,0): vince per conteggio delle classi, senza
   `!important` e restando su un token esistente. Contrasto tornato a 7,67. */
.nzeb-percorso-prezzo__pdf:hover, .nzeb-percorso-prezzo__pdf:focus-visible { border-color: var(--bark); background: var(--paper-alt); color: var(--bark); }
.nzeb-percorso-prezzo__pdf svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- La colonna sticky «Incluso nel percorso» ---- */
.nzeb-percorso-incluso__riquadro { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-md); }
.nzeb-percorso-incluso__titolo { margin: 0 0 var(--space-sm); font: 800 1rem var(--font-display); letter-spacing: -0.01em; }
.nzeb-percorso-incluso__elenco { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--space-sm); padding: 0; list-style: none; }
.nzeb-percorso-incluso__elenco li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; line-height: 1.5; }
.nzeb-percorso-incluso__spunta { flex: none; width: 16px; height: 16px; margin-top: 3px; stroke: var(--olive); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nzeb-percorso-incluso__riquadro .nzeb-percorso-prezzo { padding-top: var(--space-sm); border-top: 1px solid var(--paper-alt); }

@media (max-width: 1099.98px) {
  .nzeb-percorso-dettaglio__testata-griglia,
  .nzeb-percorso-dettaglio__corpo { grid-template-columns: 1fr; }
  .nzeb-percorso-dettaglio__sticky { position: static; }
}

/* =====================================================================
 * Il compositore (Task 5): /percorsi/componi/
 * Un solo `<form>` avvolge lista e riepilogo — le regole qui sotto non
 * nominano `.woocommerce`/`.cart` fuori da questo scope, stessa disciplina
 * del dettaglio: sulle 109 schede ordinarie e su `/shop/` nulla cambia.
 * ===================================================================== */

/* La testata del compositore è la stessa dell'indice: bordo e composizione
   stanno insieme alle sue, in cima a questo foglio. Il respiro della shell
   era l'unica cosa che divergeva (clamp 28..44 contro 32..56) e converge sul
   valore del componente: due testate sorelle non hanno ragione di respirare
   in modo diverso, e nessuno l'aveva mai deciso — era solo un secondo numero
   scritto un giorno diverso. */

/* ---- Il blocco sotto la testata: avvisi e nota sul filtro ----
   ⚠️ Giro di correzione 1 (M-4, 7 ago 2026). Fino al Task 12 questi due
   vivevano DENTRO la testata e prendevano il suo padding; ora stanno in una
   `.section-shell` a sé, che di padding non ne ha. L'aria sopra la portano
   loro — non il contenitore — perché quando tacciono entrambi non deve
   restare una fascia vuota fra il bordo della testata e la lista dei corsi.
   Il margine è quello di prima verso il basso, girato verso l'alto: la
   distanza dal bordo è la stessa che avevano dalle chip.
   `:empty` sugli avvisi funziona SOLO perché il template li stampa senza un
   a capo dentro la `<div>` (vedi la nota in template-percorsi-componi.php):
   la regola esisteva dal Task 5 e non aveva mai potuto scattare. */
.nzeb-percorso-componi__avvisi:empty { display: none; }
.nzeb-percorso-componi__avvisi { margin: var(--space-md) 0 0; }
/* Task 6 (10 ago 2026), giro di rimedio 1: questo contenitore ospitava una
   regola `.nzeb-percorso-componi__avvisi ul { margin: 0; padding-left:
   1.2em; }`. Il `padding-left: 1.2em` schiacciava il rientro che
   WooCommerce riserva alla propria icona `::before` (3.5em, ancorata a
   `left: 1.5em`): il cerchio rosso finiva SOPRA la prima parola (misurato
   sul servito, prima della cura: testo a x=120, icona 125.5-142.5). Tolto.
   Il `margin: 0` è sparito insieme: sul server `.woocommerce-error,
   .woocommerce-info, .woocommerce-message` dichiarano `margin: 0 0 2em` —
   la nostra regola aveva specificità (0,1,1) contro la loro (0,1,0) e
   VINCEVA sempre, a prescindere dall'ordine di caricamento dei fogli,
   azzerando quei 2em sotto l'avviso. Non era innocuo (giro di rimedio 1:
   il rapporto del Task 6 lo dava per tale, sbagliando — qui non c'era
   contesa da prima è falso, la contesa c'era e la vincevamo noi). Tolta
   l'intera regola: l'avviso torna al margine che WooCommerce già usa
   ovunque nel sito (carrello, checkout) — si compone, non si ridisegna.
   Verificato che nessun altro punto dipendesse da questo azzeramento:
   nessun riferimento a `.nzeb-percorso-componi__avvisi ul` fuori da questo
   file (né in template-percorsi-componi.php, né in JS, né nel banco di
   geometria della fonte) — solo `.nzeb-percorso-componi__avvisi { margin:
   var(--space-md) 0 0; }`, sopra, che è l'aria SOPRA il contenitore e non
   tocca questa regola.
   Il brief proponeva anche una seconda regola ristretta alle liste NOSTRE
   (`> ul:not([class])`, per non nominare `woocommerce` nel selettore e non
   violare la guardia `impianto-layout`): non c'è. In questo contenitore
   l'unico markup è `wc_print_notices()` (template-percorsi-componi.php),
   e dei tre template di notifica di WooCommerce solo `notices/error.php`
   stampa un `<ul class="woocommerce-error">` (classe sempre valorizzata);
   `notices/notice.php` e `notices/success.php` stampano un `<div>`, non
   un `<ul>` — verificato sui file del plugin sul server. Un selettore
   `:not([class])` su un `ul` qui non selezionerebbe comunque mai niente:
   codice morto, tolto invece di lasciato a mentire. */
.nzeb-percorso-componi__filtro-nota { margin: var(--space-md) 0 0; color: var(--ink-2); font-size: 0.875rem; }

.nzeb-percorso-componi__corpo { padding: var(--space-lg) 0 var(--space-section); }
/* `margin: 0` NON è ornamentale: il tema padre porta `form, .form-item
   { margin-bottom: 2rem }` (theme.css:1534) e questa regola non dichiarava
   il margine, quindi non c'era contesa — vinceva l'ospite per assenza.
   Misurato sul servito il 6 ago 2026: **32px** sotto il form del
   compositore, contro gli 0px del `<form>` del catalogo, che quella fuga la
   conosce e la azzera (partials/catalogo.css, con lo stesso commento). */
.nzeb-percorso-componi__form { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-lg); align-items: start; margin: 0; }

/* ---- La lista dei corsi selezionabili ---- */
.nzeb-percorso-componi__lista { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.nzeb-percorso-componi__riga {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.nzeb-percorso-componi__riga:has(.nzeb-percorso-componi__checkbox:checked) { border-color: var(--lime); background: var(--lime-wash); }
.nzeb-percorso-componi__riga--posseduto { background: var(--paper-alt); border-style: dashed; }

/* Lo scope `.nzeb-percorso-componi__riga` in più nel selettore non è
   decorazione, ed è la correzione di UNA misura sbagliata (giro di rimedio
   1, revisione 6 ago 2026, Important 3b).
   Prima stesura (5 ago 2026): `.nzeb-percorso-componi__checkbox[type="checkbox"]`.
   Misurato allora con getComputedStyle: la spunta era un quadratino da
   ~4px invece dei 22px dichiarati. Causa VERA (contata sui token del CSS
   servito, non a mente): il tema padre (BuddyBoss, forms.css) porta
   `input[type="radio"], input[type="checkbox"] { width:auto; height:auto; … }`
   — un selettore di TAG + ATTRIBUTO, specificità (0,1,1) — mentre la
   regola di QUESTO file, prima del rimedio, era una singola CLASSE,
   specificità (0,1,0). (0,1,1) > (0,1,0): il tema padre vinceva per
   specificità VERA, non per l'ordine di caricamento — la nota originaria
   («stessa specificità, decide l'ordine») era una diagnosi sbagliata,
   scritta dopo aver visto QUALE regola vincesse ma non calcolata sul
   PERCHÉ. `[type="checkbox"]` aggiunto allora (classe + attributo,
   specificità (0,2,0)) batteva comunque (0,1,1) — il rimedio numerico era
   giusto per caso, non per il ragionamento che lo accompagnava.
   Secondo difetto, introdotto dallo STESSO rimedio: `[type="checkbox"]`
   esclude per costruzione lo `<span class="nzeb-percorso-componi__checkbox">`
   dei corsi già posseduti (nessun attributo `type` su uno `<span>`) — quella
   riga tornava a un `<span>` 0×0. Rimedio DEFINITIVO: scope per ANTENATO
   (`.nzeb-percorso-componi__riga .nzeb-percorso-componi__checkbox`, due
   CLASSI, specificità (0,2,0)) — batte (0,1,1) per costruzione (il
   confronto si decide già sul numero di classi, prima ancora di guardare
   tag/attributi), e matcha SIA l'`<input>` SIA lo `<span>`, perché entrambi
   sono discendenti della stessa riga. Verificato di nuovo con
   getComputedStyle su entrambi i rami dopo il rilascio. */
.nzeb-percorso-componi__riga .nzeb-percorso-componi__checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 6px;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.nzeb-percorso-componi__checkbox:hover { border-color: var(--bark); }
.nzeb-percorso-componi__checkbox:focus-visible { outline: 2px solid var(--bark); outline-offset: 2px; }
.nzeb-percorso-componi__checkbox:checked { background: var(--lime); border-color: var(--lime); }
.nzeb-percorso-componi__checkbox:checked::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid var(--ink-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.nzeb-percorso-componi__checkbox:disabled { background: var(--paper-alt); border-color: var(--line); cursor: not-allowed; }

.nzeb-percorso-componi__testo { flex: 1; min-width: 0; cursor: pointer; }
.nzeb-percorso-componi__riga--posseduto .nzeb-percorso-componi__testo { cursor: default; }
.nzeb-percorso-componi__titolo { display: block; font: 700 0.9375rem/1.35 var(--font-body); letter-spacing: -0.005em; color: var(--ink); }
.nzeb-percorso-componi__badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--lime); border-radius: var(--radius-sm); color: var(--olive); background: var(--surface); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; vertical-align: middle; }
.nzeb-percorso-componi__meta { display: block; margin-top: 2px; color: var(--ink-2); font-size: 0.875rem; }

.nzeb-percorso-componi__prezzo { flex: none; text-align: right; font-variant-numeric: tabular-nums; font: 800 1rem/1 var(--font-display); color: var(--ink); }
.nzeb-percorso-componi__iva { display: block; margin-top: 2px; color: var(--ink-2); font-size: 0.875rem; font-weight: 400; }

.nzeb-percorso-componi__vai { flex: none; color: var(--olive); font-size: 0.875rem; font-weight: 700; }
.nzeb-percorso-componi__vai:hover, .nzeb-percorso-componi__vai:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Il riepilogo, colonna sticky ---- */
/* Stessa forma della colonna sticky del dettaglio (sopra): il `top`
   sommava solo l'header e lo spazio, ignorando la barra di WordPress che
   sposta l'header sticky di 32px senza spostare il `top` cablato — sul
   servito lo stacco crollava da 33px a 1px. `--wp-admin--admin-bar--height`
   arriva a 0px per chi non ha la barra. Sotto i 1100px questa colonna
   passa a `position: static` (poco sotto), quindi il valore mobile della
   barra (46px) non entra mai in questo calcolo. */
.nzeb-percorso-componi__riepilogo { position: sticky; top: calc(var(--bb-header-height, 0px) + var(--space-md) + var(--wp-admin--admin-bar--height, 0px)); align-self: start; padding: var(--space-md); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.nzeb-percorso-componi__riepilogo-titolo { margin: 0 0 var(--space-xs); font: 800 1.0625rem var(--font-display); letter-spacing: -0.01em; color: var(--bark); }
.nzeb-percorso-componi__conteggio { margin: 0 0 var(--space-sm); color: var(--ink-2); font-size: 0.875rem; }

.nzeb-percorso-componi__elenco { display: flex; flex-direction: column; gap: 8px; margin: 0 0 var(--space-sm); padding: 0; list-style: none; }
.nzeb-percorso-componi__elenco:empty { display: none; margin: 0; }
.nzeb-percorso-componi__elenco li { display: flex; justify-content: space-between; gap: 10px; font: 600 0.8125rem var(--font-body); color: var(--ink); }
.nzeb-percorso-componi__elenco li span:last-child { flex: none; font-variant-numeric: tabular-nums; }

.nzeb-percorso-componi__subtotale { margin: 0 0 var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--paper-alt); color: var(--ink); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nzeb-percorso-componi__subtotale[hidden] { display: none; }

.nzeb-percorso-componi__scalini { margin: 0 0 var(--space-sm); padding: 12px 14px; background: var(--paper); border-radius: var(--radius-sm); }
.nzeb-percorso-componi__scalini-titolo { margin: 0 0 var(--space-xs); font: 700 0.8125rem var(--font-body); color: var(--bark); }
.nzeb-percorso-componi__scalini-elenco { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nzeb-percorso-componi__scalino { padding: 4px 9px; border-radius: var(--radius-sm); background: var(--paper-alt); color: var(--ink-2); font-size: 0.8125rem; font-weight: 700; transition: background-color .18s var(--ease-out), color .18s var(--ease-out); }
.nzeb-percorso-componi__scalino.is-raggiunto { background: var(--lime-wash); color: var(--olive); }
.nzeb-percorso-componi__scalini-nota { margin: var(--space-xs) 0 0; min-height: 1em; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.nzeb-percorso-componi__scalini-nota:empty { margin: 0; }

/* Task 4 (9 ago 2026): il bottone di sistema (.button.button--primary sul
   markup) copre già fondo, colore, padding, arrotondamento, tipografia e
   transizione — qui resta solo ciò che il componente non conosce: la
   larghezza piena del compositore e il bersaglio a 48px, RATIFICATO (nota
   sopra, righe ~303-318): questo è una delle due CTA d'acquisto full-width,
   non scende a 44. Il margine sotto era 10px cablato, fuori scala: passa a
   --space-xs (8px). NESSUN precedente nel file ha lo stesso ruolo esatto —
   un bottone pieno full-width seguito da una didascalia di solo testo — e non
   ne ho inventato uno: .nzeb-percorso-prezzo__pdf (bordo, padding, min-height
   44px, stati propri) è un SECONDO bottone, quindi il suo margin-top: 8px è
   spaziatura bottone-a-bottone; .nzeb-percorso-componi__scalini-nota segue un
   elenco di chip, non un bottone. La scelta di 8px invece di --space-sm (16px)
   si regge solo sulla vicinanza numerica al valore di partenza: 10px dista 2
   da 8 e 6 da 16, quindi 8 è la normalizzazione più conservativa disponibile
   sulla scala dei token, non l'eco di un pattern che il file non dichiara. */
.nzeb-percorso-componi__submit {
  width: 100%;
  min-height: 48px;
  margin: 0 0 var(--space-xs);
}

.nzeb-percorso-componi__anteprima-nota { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }

@media (max-width: 1099.98px) {
  .nzeb-percorso-componi__form { grid-template-columns: 1fr; }
  .nzeb-percorso-componi__riepilogo { position: static; }
}
@media (max-width: 599.98px) {
  .nzeb-percorso-componi__riga { flex-wrap: wrap; }
  .nzeb-percorso-componi__prezzo { margin-left: 36px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .nzeb-percorsi *, .nzeb-percorsi *::before, .nzeb-percorsi *::after { transition-duration: .01ms !important; }
}