body.single-product #main{--sci-righello:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.6' y='8.6' width='20.8' height='6.8' rx='1.6'/%3E%3Cpath d='M6 8.6v2.8M10 8.6v4.2M14 8.6v2.8M18 8.6v4.2'/%3E%3C/svg%3E");

  /* campionario: una griglia di campioni fra cui scegliere (gruppi di immagini) */
  --sci-campionario: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.4' height='7.4' rx='1.6'/%3E%3Crect x='13.6' y='3' width='7.4' height='7.4' rx='1.6'/%3E%3Crect x='3' y='13.6' width='7.4' height='7.4' rx='1.6'/%3E%3Crect x='13.6' y='13.6' width='7.4' height='7.4' rx='1.6'/%3E%3C/svg%3E");

  /* tavolozza: un colore da scegliere (gruppi Pantone) */
  --sci-tavolozza: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.9a9.1 9.1 0 0 0 0 18.2c1.1 0 1.9-.8 1.9-1.8 0-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2 0-1 .8-1.8 1.8-1.8h1.4a5.3 5.3 0 0 0 5-5.3c0-4-4.1-6.9-9.1-6.9z'/%3E%3Ccircle cx='7.3' cy='11.4' r='1.15' fill='%23000' stroke='none'/%3E%3Ccircle cx='10.6' cy='7.3' r='1.15' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.6' cy='8.2' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E");

  /* matita: un testo da scrivere (nome progetto, note) */
  --sci-matita: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.1h4.1L18.8 9.4a2.2 2.2 0 0 0-3.1-3.1L5 17v3.1z'/%3E%3Cpath d='M14.6 7.4l3.1 3.1'/%3E%3C/svg%3E");

  /* graffetta: un file da caricare */
  --sci-graffetta: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.3l-8.4 8.4a5 5 0 0 1-7.1-7.1l8.7-8.7a3.3 3.3 0 0 1 4.7 4.7l-8.6 8.6a1.7 1.7 0 0 1-2.4-2.4l7.9-7.9'/%3E%3C/svg%3E");

  /* elenco puntato: una scelta multipla scritta (checkbox, radio) */
  --sci-elenco: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 6.2h12M8.4 12h12M8.4 17.8h12M3.6 6.2h.01M3.6 12h.01M3.6 17.8h.01'/%3E%3C/svg%3E");

  /* --- indicatori di stato ------------------------------------------------ */

  /* spunta: passo completato, opzione scelta */
  --sci-spunta: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l4.9 4.9L19.6 7.2'/%3E%3C/svg%3E");

  /* freccia in giu': fisarmonica chiusa; ruota di 180 gradi quando si apre */
  --sci-freccia: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 9.2L12 15.6l6.4-6.4'/%3E%3C/svg%3E");

  /* --- colonna di destra e riepilogo costi -------------------------------- */

  /* distinta: PROJECT RECAP */
  --sci-distinta: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.4h8a1.6 1.6 0 0 1 1.6 1.6v.6h1.8A1.6 1.6 0 0 1 21 7.2v12.2a1.6 1.6 0 0 1-1.6 1.6H4.6A1.6 1.6 0 0 1 3 19.4V7.2a1.6 1.6 0 0 1 1.6-1.6h1.8V5A1.6 1.6 0 0 1 8 3.4z'/%3E%3Cpath d='M7.6 11.4h8.8M7.6 15.6h5.6'/%3E%3C/svg%3E");

  /* calcolatrice: PROJECT QUOTATION */
  --sci-calcolatrice: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.4' y='2.6' width='15.2' height='18.8' rx='2'/%3E%3Crect x='7.8' y='5.8' width='8.4' height='3.4' rx='1'/%3E%3Cpath d='M8.4 13.2h.01M12 13.2h.01M15.6 13.2h.01M8.4 17.2h.01M12 17.2h.01M15.6 17.2h.01'/%3E%3C/svg%3E");

  /* scontrino: TOTAL */
  --sci-scontrino: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.8 2.8h12.4v18.4l-2.1-1.5-2 1.5-2.1-1.5-2.1 1.5-2-1.5-2.1 1.5z'/%3E%3Cpath d='M9 8.2h6M9 12.4h6'/%3E%3C/svg%3E");

  /* percentuale: ITALY VAT */
  --sci-percento: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.8 5.2L5.2 18.8'/%3E%3Ccircle cx='7.6' cy='7.6' r='2.5'/%3E%3Ccircle cx='16.4' cy='16.4' r='2.5'/%3E%3C/svg%3E");

  /* camion: SHIPPING */
  --sci-camion: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.4h10.6v9.8H2.6z'/%3E%3Cpath d='M13.2 9.6h3.7l3 3.2v3.4h-6.7'/%3E%3Ccircle cx='6.6' cy='17.9' r='1.8'/%3E%3Ccircle cx='16.6' cy='17.9' r='1.8'/%3E%3C/svg%3E");

  /* cartellino: ESTIMATE, e l'etichetta "starting from" in testata */
  --sci-cartellino: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 11.7V4.6a1.2 1.2 0 0 1 1.2-1.2h7.1c.3 0 .6.1.9.4l8 8a1.2 1.2 0 0 1 0 1.7l-6.9 6.9a1.2 1.2 0 0 1-1.7 0l-8-8a1.2 1.2 0 0 1-.6-.7z'/%3E%3Ccircle cx='8.2' cy='8.2' r='1.3'/%3E%3C/svg%3E");

  /* --- matrice prezzi ----------------------------------------------------- */

  /* calendario: la fascia "select dates and quantities" */
  --sci-calendario: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='5' width='17.2' height='16' rx='2'/%3E%3Cpath d='M3.4 10h17.2M8 2.9v4.2M16 2.9v4.2'/%3E%3C/svg%3E");

  /* pila di scatole: la testatina "quantity" */
  --sci-pila: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l9 4.4-9 4.4-9-4.4z'/%3E%3Cpath d='M3 12l9 4.4 9-4.4M3 16.6l9 4.4 9-4.4'/%3E%3C/svg%3E");
}


/* =============================================================================
   1 · IL FOGLIO
   Il fondo pagina lo mette 01-base. Qui dichiaro il fondo della SOLA area
   prodotto, perche' la scheda deve reggere anche guardata da sola e perche'
   i riquadri di coda hanno fondi decisi da Elementor.
   ========================================================================== */

body.single-product #main .elementor-location-single {
  background-color: var(--sc-fondo);
  color: var(--sc-ink-2);
  font-family: var(--sc-testo);
  font-size: var(--sc-t-p);
}

/* Il reticolo da tavolo da disegno che stava qui apparteneva alla direzione
   scura. Su carta bianca non c'e' niente da reticolare: il gettone
   `--sc-reticolo` e' `none` e la regola era diventata rumore. Tolta. */


/* =============================================================================
   2 · LA MACCHINA DELLE ICONE
   -----------------------------------------------------------------------------
   Una sola dichiarazione della meccanica per tutte le icone della scheda:
   sagoma dal gettone `--sci-…`, colore da `currentColor`. Sotto, ogni punto
   dice soltanto QUALE sagoma vuole e quanto grande.

   `position: static` non e' superfluo. Il tema forza `position: absolute` sui
   `::before` delle voci di menu (trappola gia' pagata su 04-rifiniture: senza,
   l'icona finisce SOPRA la scritta invece che accanto). Qui siamo dentro
   `#main` e la regola del tema non arriva, ma la dichiarazione costa nulla e
   mette al riparo dal giorno in cui qualcuno allarghera' quel selettore.

   TRAPPOLA, PAGATA IN QUESTA STESSA RISCRITTURA: in questo elenco possono
   stare solo le icone che ci sono SEMPRE. La spunta del passo completato,
   `.wcpa_field_wrap::after`, era finita qui dentro: siccome il blocco dichiara
   `content: ""`, ogni passo — anche quello non ancora scelto — si ritrovava un
   riquadro di 18 px col fondo di currentColor e nessuna maschera addosso,
   cioe' un quadratino nero in fondo alla scheda. Le icone CONDIZIONATE
   dichiarano la propria meccanica per intero, dentro la regola che le accende.
   ========================================================================== */

body.single-product #main .wcpa_wrap .wcpa_field_label::before,
body.single-product #main .elementor-location-single .e-n-accordion-item-title-text::before,
body.single-product #main .elementor-location-single .e-n-accordion-item-title-icon::before,
body.single-product #main .elementor-location-single .elementor-element-5943aeb h2.elementor-heading-title::before,
body.single-product #main .dd_quantity_table .dd_table_title div.dd_col::before,
body.single-product #main .dd_quantity_table thead th.dd_quantity_title div.dd_col::before,
body.single-product #main .dd_calculations .dd_calc_heading::before {
  content: "";
  position: static;
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;   /* l'icona prende il colore del testo */
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/* =============================================================================
   3 · TESTATA: nome, descrizione, caratteristiche, prezzo di partenza
   ========================================================================== */

body.single-product #main .elementor-location-single h1.product_title {
  font-family: var(--sc-disp);
  font-weight: 900;
  font-size: var(--sc-t-h1);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--sc-ink);
}

/* La descrizione: su bianco una riga lunga 800 px si perde. Un limite in `ch`
   la tiene sotto le ~72 battute, che e' la misura in cui l'occhio ritrova
   l'inizio della riga successiva senza cercarlo. */
body.single-product #main .elementor-location-single .elementor-widget-text-editor,
body.single-product #main .elementor-location-single .elementor-widget-text-editor p {
  color: var(--sc-ink-2);
  line-height: 1.7;
  max-width: 72ch;
}

/* L'elenco delle caratteristiche con la spunta.
   Erano due righe di mono grigio minuscolo, indistinguibili dal resto. Adesso
   sono due PASTIGLIE: fondo appena incassato, angolo morbido, spunta petrolio.
   Si leggono come garanzie, che e' quello che sono. */
body.single-product #main .elementor-location-single .elementor-widget-icon-list .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-s2);
}
body.single-product #main .elementor-location-single .elementor-widget-icon-list .elementor-icon-list-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-s2);
  padding: 8px var(--sc-s3);
  background-color: var(--sc-incasso);
  /* angolo della direzione, non una pastiglia a stadio: su `foam` queste voci
     sono due frasi intere che occupano tutta la larghezza, e un raggio da
     999 px le trasformava in due tubi. 12 px reggono sia l'etichetta corta di
     due parole sia la frase su due righe. */
  border-radius: var(--sc-r);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sc-ink-2);
}
body.single-product #main .elementor-location-single .elementor-icon-list-icon svg,
body.single-product #main .elementor-location-single .elementor-icon-list-icon i {
  color: var(--sc-mar-testo);
  fill: var(--sc-mar-testo);
  font-size: 12px;
}

/* --- IL PREZZO DI PARTENZA ------------------------------------------------
   "Starting from" e "€ 8.00" sono due widget heading distinti. Gli id di
   elemento appartengono al modello unico della scheda prodotto (#5162), quindi
   valgono su TUTTI i prodotti, non solo su questo: verificati dal vivo.
   Vanno letti come una cosa sola: etichetta piccola, cifra grande. */
body.single-product #main .elementor-location-single .elementor-element-5943aeb h2.elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  margin: 0 0 var(--sc-s2);
}
body.single-product #main .elementor-location-single .elementor-element-5943aeb h2.elementor-heading-title::before {
  width: 15px;
  height: 15px;
  -webkit-mask-image: var(--sci-cartellino);
          mask-image: var(--sci-cartellino);
}
/* LA CIFRA E' IN INCHIOSTRO, NON IN CREMISI — e' un cambio di direzione, non
   una svista. `--sc-urg` e' il gettone di sconto/urgenza/errore, e "a partire da 8 euro" non e' nessuna delle tre: colorarlo di rosso prometteva una
   promozione che non c'e'. La direzione dice inoltre "petrolio come unico colore": un secondo colore acceso in testata se lo mangia. Se il
   proprietario rivuole il cremisi, e' una riga sola — vedi il resoconto. */
body.single-product #main .elementor-location-single .elementor-element-c835a48 h2.elementor-heading-title {
  font-family: var(--sc-disp);
  font-weight: 900;
  font-size: var(--sc-t-h2);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--sc-ink);
  font-variant-numeric: tabular-nums;
}

/* --- LA GALLERIA ----------------------------------------------------------
   Le foto prodotto sono fotografie su fondo BIANCO. Su una pagina bianca si
   fondono: il contorno della scatola galleggia senza un piano d'appoggio, e
   una foto senza bordi su fondo dello stesso colore non si legge come una
   foto, si legge come un buco.
   Un bordo marcato risolverebbe e incupirebbe. Invece il piano scende di un
   tono — bianco su grigio-carta — e tanto basta: la fotografia si stacca da
   sola e la pagina resta chiara. Nessun bordo, nessuna ombra: e' un vassoio
   incassato, non una scheda sollevata. */
body.single-product #main .elementor-location-single .elementor-widget-image-carousel > .elementor-widget-container {
  background-color: var(--sc-incasso);
  border: 0;
  border-radius: var(--sc-r);
  padding: var(--sc-s5);
}
body.single-product #main .elementor-location-single .elementor-image-carousel-wrapper {
  background-color: transparent;
  border: 0;
  border-radius: var(--sc-r);
}
body.single-product #main .elementor-location-single .swiper-pagination-bullet {
  background-color: var(--sc-quota);
  border-radius: 999px;
  width: 20px;
  height: 3px;
  opacity: 1;
  transition: background-color var(--sc-veloce) var(--sc-curva);
}
body.single-product #main .elementor-location-single .swiper-pagination-bullet-active {
  background-color: var(--sc-mar-testo);
}


/* =============================================================================
   4 · I TITOLI DELLA SCHEDA
   ========================================================================== */

body.single-product #main .elementor-location-single h2.elementor-heading-title,
body.single-product #main .elementor-location-single h3.elementor-heading-title {
  font-family: var(--sc-disp);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--sc-ink);
}

/* Le voci di PROJECT RECAP (Dimension, Paper, Addons…) sono anch'esse widget
   heading h2. Come titoli sarebbero enormi; sono invece le tappe del modulo, e
   devono somigliare a una distinta: una riga tecnica per tappa. La regola sta
   dopo quella generale apposta — qui la si corregge. */
body.single-product #main .elementor-location-single .e-n-accordion h2.elementor-heading-title,
body.single-product #main .elementor-location-single .e-n-accordion h3.elementor-heading-title {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  margin: 0;
  padding: 0;
}

body.single-product #main .elementor-location-single .elementor-divider-separator {
  border-top-color: var(--sc-linea);
}


/* =============================================================================
   5 · I DIECI PASSI — il problema numero uno di questa pagina
   -----------------------------------------------------------------------------
   Il modulo e' lungo quattromila pixel e non dice mai a che punto sei.

   Nella versione scura ogni gruppo era un riquadro tracciato con due tratti
   sottili e un numero appeso fuori dall'angolo. Su bianco quei tratti sono
   quasi invisibili e il numero appeso sembrava un errore di impaginazione.

   Adesso ogni gruppo e' una SCHEDA BIANCA appoggiata sul foglio: si stacca
   perche' fa ombra. Dentro, la riga di intestazione dice tre cose in un colpo:
     [01]  (icona del tipo di scelta)  TITOLO DEL PASSO        (spunta)
   il numero a sinistra dice dove sei, l'icona dice che genere di decisione ti
   aspetta, la spunta a destra compare quando il passo e' fatto.

   Il passo COMPLETATO si riconosce da due segnali indipendenti, come vuole la
   norma sul non affidarsi al solo colore:
     1) la pastiglia del numero si riempie di petrolio;
     2) COMPARE una spunta che prima non c'era — e' una presenza, non una
        tinta, quindi la vede anche chi non distingue i colori.
   ========================================================================== */

body.single-product #main .wcpa_wrap {
  counter-reset: sc-passo;
}

body.single-product #main .wcpa_wrap .wcpa_row {
  margin: 0 0 var(--sc-s4);
}

body.single-product #main .wcpa_wrap .wcpa_field_wrap {
  position: relative;
  /* `flow-root` racchiude il titolo flottante (vedi piu' sotto perche' flotta)
     dentro la scheda. Senza, il float uscirebbe dal fondo e l'ombra si
     chiuderebbe a meta' del contenuto. E' il rimedio moderno a `clearfix`, e a
     differenza di `overflow: hidden` non taglia l'anello di selezione dei
     campioni che sfiora il bordo. */
  display: flow-root;
  padding: var(--sc-s5);
  background-color: var(--sc-fondo);
  border: 0;
  border-radius: var(--sc-r);
  /* Due strati, e servono tutti e due. L'ombra da' la profondita' ma cade
     verso il basso: il BORDO SUPERIORE della scheda resterebbe invisibile e
     dieci schede di fila si fonderebbero l'una nell'altra. L'anello da un
     pixel in `--sc-linea` — un tono appena sopra il bianco, non una linea
     disegnata — chiude il contorno tutt'intorno. Verificato a occhio: con la
     sola ombra le schede non si contavano. */
  box-shadow: 0 0 0 1px var(--sc-linea), var(--sc-ombra-1);
}

/* --- la pastiglia del numero, in alto a sinistra dentro la scheda ---------
   Il numero lo conta il CSS, quindi resta giusto sui prodotti con sette passi
   (perfume-box) come su quelli con dieci. */
body.single-product #main .wcpa_wrap .wcpa_field_wrap::before {
  counter-increment: sc-passo;
  content: counter(sc-passo, decimal-leading-zero);
  position: absolute;
  left: var(--sc-s5);
  top: var(--sc-s5);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .02em;
  color: var(--sc-ink-3);
  background-color: var(--sc-incasso);
  border-radius: 9px;
  transition: background-color var(--sc-medio) var(--sc-curva),
              color var(--sc-medio) var(--sc-curva);
}

/* --- il passo completato --------------------------------------------------
   Due modi di essere completo: una casella/pastiglia scelta, oppure una
   tendina valorizzata (il valore vuoto e' `value=""`). */
body.single-product #main .wcpa_wrap .wcpa_field_wrap:has(input:checked)::before,
body.single-product #main .wcpa_wrap .wcpa_field_wrap:has(select option:checked:not([value=""]))::before {
  /* petrolio SCURO, non il petrolio pieno: il numero e' testo piccolo (11 px)
     e sopra `--sc-mar` farebbe 3,94:1, sotto la soglia AA. Su `--sc-mar-vivo`
     il bianco fa 5,88:1 e passa. E' la stessa regola che governa tutti i
     riempimenti di questa pagina che portano testo piccolo. */
  background-color: var(--sc-mar-vivo);
  color: var(--sc-mar-ombra);
  font-weight: 700;
}

/* La spunta che COMPARE a destra quando il passo e' fatto.
   Dichiara la propria meccanica per intero e non entra nel blocco condiviso
   della sezione 2: li' `content: ""` vale sempre, e un'icona che deve esistere
   solo a condizione verificata non puo' ereditare un `content` incondizionato
   (vedi la trappola annotata in quella sezione). */
body.single-product #main .wcpa_wrap .wcpa_field_wrap:has(input:checked)::after,
body.single-product #main .wcpa_wrap .wcpa_field_wrap:has(select option:checked:not([value=""]))::after {
  content: "";
  position: absolute;
  right: var(--sc-s5);
  top: calc(var(--sc-s5) + 6px);
  display: block;
  width: 19px;
  height: 19px;
  /* `--sc-ok` e non il petrolio: e' il gettone semantico del "fatto", non un
     secondo colore decorativo. Su bianco fa 5,9:1. */
  background-color: var(--sc-ok);
  -webkit-mask-image: var(--sci-spunta);
          mask-image: var(--sci-spunta);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* --- Non tutti i riquadri sono un PASSO ----------------------------------
   Fra un gruppo e l'altro il configuratore infila blocchi di servizio (il
   "download template" che compare dopo la misura). Quelli non prendono numero
   — altrimenti il conteggio direbbe undici passi dove le scelte sono dieci —
   e non prendono nemmeno la scheda: sono note a margine, non decisioni. */
body.single-product #main .wcpa_wrap .wcpa_field_wrap.wcpa_type_content::before,
body.single-product #main .wcpa_wrap .wcpa_field_wrap.wcpa_type_html::before {
  content: none;
}
body.single-product #main .wcpa_wrap .wcpa_field_wrap.wcpa_type_content,
body.single-product #main .wcpa_wrap .wcpa_field_wrap.wcpa_type_html {
  padding: var(--sc-s4) var(--sc-s5);
  background-color: var(--sc-incasso);
  box-shadow: none;
}

/* --- IL TITOLO DEL PASSO --------------------------------------------------
   Nove gruppi su dieci sono <fieldset> e il titolo e' una <legend>: per
   impostazione del browser la legend "sfonda" il bordo superiore e si porta
   fuori dal riquadro, cosi' il numero del passo finiva una riga piu' in basso
   del titolo. `float: left` riporta la legend a comportarsi da blocco normale
   dentro il fieldset — e' il rimedio standard — e i due tornano allineati.
   (E' anche il motivo del `display: flow-root` sulla scheda, sopra.)

   Il rientro di 42 px lascia il posto alla pastiglia del numero; il rientro a
   destra lascia il posto alla spunta e impedisce a un titolo lungo di
   finirci sotto. */
body.single-product #main .wcpa_wrap .wcpa_field_label {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin: 0 0 var(--sc-s4);
  padding: 3px 34px 0 42px;
  font-family: var(--sc-disp);
  font-weight: 700;
  font-size: var(--sc-t-h3);
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--sc-ink);
}

/* l'icona del tipo di scelta, in linea prima del testo */
body.single-product #main .wcpa_wrap .wcpa_field_label::before {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: -4px;
  color: var(--sc-mar-testo);
  background-color: var(--sc-mar-testo);   /* qui il colore e' esplicito:
       il titolo e' quasi nero e l'icona in nero pieno sarebbe un blocco */
  -webkit-mask-image: var(--sci-elenco);   /* sagoma di ripiego */
          mask-image: var(--sci-elenco);
}
/* …e la sagoma giusta per ciascun tipo di campo. Le classi `wcpa_type_…` sono
   le stesse su tutti i prodotti: e' l'unico aggancio stabile, perche' gli id
   dei gruppi sono impronte generate (`image-group_10672d225dd715c`). */
body.single-product #main .wcpa_wrap .wcpa_type_select .wcpa_field_label::before,
body.single-product #main .wcpa_wrap .wcpa_type_number .wcpa_field_label::before {
  -webkit-mask-image: var(--sci-righello);
          mask-image: var(--sci-righello);
}
body.single-product #main .wcpa_wrap .wcpa_type_image-group .wcpa_field_label::before,
body.single-product #main .wcpa_wrap .wcpa_type_image .wcpa_field_label::before {
  -webkit-mask-image: var(--sci-campionario);
          mask-image: var(--sci-campionario);
}
body.single-product #main .wcpa_wrap .wcpa_type_color-group .wcpa_field_label::before,
body.single-product #main .wcpa_wrap .wcpa_type_color .wcpa_field_label::before {
  -webkit-mask-image: var(--sci-tavolozza);
          mask-image: var(--sci-tavolozza);
}
body.single-product #main .wcpa_wrap .wcpa_type_text .wcpa_field_label::before,
body.single-product #main .wcpa_wrap .wcpa_type_textarea .wcpa_field_label::before {
  -webkit-mask-image: var(--sci-matita);
          mask-image: var(--sci-matita);
}
body.single-product #main .wcpa_wrap .wcpa_type_file .wcpa_field_label::before,
body.single-product #main .wcpa_wrap .wcpa_type_upload .wcpa_field_label::before {
  -webkit-mask-image: var(--sci-graffetta);
          mask-image: var(--sci-graffetta);
}

body.single-product #main .wcpa_wrap .wcpa_required_ast {
  color: var(--sc-urg);
  margin-left: 4px;
}
body.single-product #main .wcpa_wrap .wcpa_desc,
body.single-product #main .wcpa_wrap .wcpa_field_desc {
  clear: both;
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  line-height: 1.7;
  color: var(--sc-ink-3);
}

/* i pulsanti dentro un passo (scarica il template): contorno, mai pieni —
   l'unico pieno della pagina deve restare ADD TO CART */
body.single-product #main .wcpa_wrap .wcpa_field_wrap a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sc-s4);
  background-color: transparent;
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  color: var(--sc-mar-testo);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--sc-veloce) var(--sc-curva),
              border-color var(--sc-veloce) var(--sc-curva);
}
body.single-product #main .wcpa_wrap .wcpa_field_wrap a:hover {
  background-color: var(--sc-mar-velo);
  border-color: var(--sc-mar-testo);
}
/* IL BOTTONE INVISIBILE — quinta eccezione con `!important`, l'unica che non
   riguarda il configuratore ne' la matrice.
   Il collegamento "download template" che compare dopo aver scelto la misura
   porta la classe `template`, e un foglio di Elementor generato per un'ALTRA
   pagina (post-2168.css, che finisce comunque in coda a questa) dichiara
   `a.template { color: #fff !important }`. Era stato scritto per un fondo
   scuro. Su carta bianca il risultato e' bianco su bianco: il pulsante c'e',
   si preme, e non si legge. Verificato dal vivo prima e dopo.
   Nessuna catena di selettori batte un `!important`: si risponde in natura. */
body.single-product #main .wcpa_wrap .wcpa_field_wrap a.template {
  color: var(--sc-mar-testo) !important;
}


/* =============================================================================
   6 · CAMPI SCRITTI: menu a tendina e casella di testo
   Le misure sono numeri: vanno in mono, dove le cifre hanno tutte la stessa
   larghezza e "100x100x100" si legge come su un disegno.
   ========================================================================== */

body.single-product #main .wcpa_wrap select.wcpa_field,
body.single-product #main .wcpa_wrap input[type="text"].wcpa_field,
body.single-product #main .wcpa_wrap input[type="number"].wcpa_field,
body.single-product #main .wcpa_wrap textarea.wcpa_field {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--sc-s4);
  font-family: var(--sc-mono);
  /* 16 px FISSI, non la scala fluida: sotto i 16 px iPhone ingrandisce la
     pagina appena si tocca il campo e non la rimpicciolisce piu'. La scala
     `--sc-t-p` scende a 15 px sugli schermi stretti — cioe' proprio dove il
     guaio si verifica. `--sc-t-campo` esiste in 00-fondamenta per questo. */
  font-size: var(--sc-t-campo);
  color: var(--sc-ink);
  background-color: var(--sc-incasso);
  border: 1px solid transparent;
  border-radius: var(--sc-r);
  /* era `dark`, residuo della direzione scura: faceva aprire al sistema una
     tendina nera su una pagina bianca */
  color-scheme: light;
  transition: background-color var(--sc-veloce) var(--sc-curva),
              border-color var(--sc-veloce) var(--sc-curva);
}
body.single-product #main .wcpa_wrap textarea.wcpa_field {
  padding: var(--sc-s3) var(--sc-s4);
  line-height: 1.6;
}
body.single-product #main .wcpa_wrap select.wcpa_field:hover,
body.single-product #main .wcpa_wrap input[type="text"].wcpa_field:hover {
  border-color: var(--sc-linea-2);
}
body.single-product #main .wcpa_wrap select.wcpa_field:focus,
body.single-product #main .wcpa_wrap input[type="text"].wcpa_field:focus,
body.single-product #main .wcpa_wrap textarea.wcpa_field:focus {
  background-color: var(--sc-fondo);
  border-color: var(--sc-mar-testo);
}
/* una tendina gia' scelta si vede da lontano: esce dall'incasso e sale sul
   bianco, con il filo di petrolio */
body.single-product #main .wcpa_wrap select.wcpa_field:has(option:checked:not([value=""])) {
  background-color: var(--sc-fondo);
  border-color: var(--sc-mar-vivo);
  color: var(--sc-ink);
}


/* =============================================================================
   7 · I CAMPIONI (carte, nastri, tipi di scatola, aree di stampa)
   -----------------------------------------------------------------------------
   Tre guasti da riparare, tutti causati dal plugin o dal travaso al bianco:

   a) la cornice riceve width/height INLINE (167x100 qui, 100x100 altrove)
      mentre le immagini sono TUTTE quadrate 150x150: il rettangolo lascia
      bande vuote ai lati e il plugin impone anche `height: 100px`.
      Cornice quadrata e `height: auto !important`, quindi.

   b) `object-fit: cover` taglia i bordi. Una piastrella e' una SCRITTA
      ("NO INTERNAL SHAPE"), non una foto: con cover perde la prima e l'ultima
      riga di testo. Siccome cornice e immagine sono entrambe quadrate,
      `contain` da' lo stesso risultato di `cover` sulle fotografie e salva la
      scritta. Non e' un compromesso: e' gratis.

   c) IL GUASTO DEL TRAVASO. Il fondo della cornice era `--sc-ink-2`, cioe'
      GRIGIO SCURO: nella direzione scura serviva a far leggere il tratto nero
      dei PNG trasparenti su un tavolo blu notte, e nel passaggio al bianco
      nessuno lo aveva toccato. Risultato misurato in pagina: le piastrelle di
      "printing area" e "no internal shape" erano quadrati scuri in mezzo a
      una scheda bianca. Ora il fondo e' `--sc-incasso`: i PNG a tratto nero
      ci si leggono benissimo, e le fotografie — che sono quadrate quanto la
      cornice — lo coprono per intero e non lo fanno nemmeno vedere.

   Le foto NON si invertono mai: una carta nera diventerebbe bianca.
   ========================================================================== */

/* --- UNA SOLA GRIGLIA PER TUTTI I GRUPPI -----------------------------------
   Il plugin lascia decidere l'impaginazione gruppo per gruppo: chi a quattro
   colonne, chi a tre, chi "in linea", chi — le aree di stampa — senza nessuna
   indicazione, e quel gruppo finiva a UNA colonna larga quanto la pagina, con
   piastrelle da 440 px accanto a piastrelle da 100.
   Una griglia sola, a passo fisso, per tutti: i campioni hanno la stessa
   misura ovunque, si contano a colpo d'occhio, e il numero di colonne lo
   decide lo spazio disponibile invece di una scelta fatta anni fa
   nell'amministrazione. */
body.single-product #main .wcpa_wrap .wcpa_group_field {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: var(--sc-s4) var(--sc-s3);
  align-items: start;
}

body.single-product #main .wcpa_wrap .wcpa_image label {
  display: block;
  width: 100%;
  max-width: none;
  cursor: pointer;
}

/* (a) + (c) la cornice: quadrata sempre, fondo carta chiaro.
   Batte lo style inline del plugin — e' uno dei quattro punti in cui
   `!important` e' l'unica risposta possibile. */
body.single-product #main .wcpa_wrap .wcpa_image .wcpa_img_wrap {
  display: block;
  position: relative;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--sc-incasso);
  /* il plugin scrive `border: 1px solid #f2f2f2` INLINE su ogni cornice
     insieme a width e height: sta nello stesso style attribute, quindi cade
     sotto la stessa eccezione gia' dichiarata in testa al foglio. Senza,
     accanto al mio anello ne resta un secondo, piu' chiaro e sfalsato. */
  border: 0 !important;
  border-radius: var(--sc-r);
  /* Un anello disegnato con l'ombra invece che con `border`: segue l'angolo
     morbido, non occupa spazio (quindi la piastrella non sobbalza di un pixel
     quando la scegli) e nello stato scelto basta ingrossarlo. */
  box-shadow: 0 0 0 1px var(--sc-linea-2);
  transition: box-shadow var(--sc-veloce) var(--sc-curva),
              transform var(--sc-veloce) var(--sc-curva);
}

/* (b) l'immagine dentro: intera, mai tagliata */
body.single-product #main .wcpa_wrap .wcpa_image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: var(--sc-r);
}

/* l'etichetta sotto al campione */
body.single-product #main .wcpa_wrap .wcpa_image .wcpa_image_label {
  display: block;
  margin-top: var(--sc-s2);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  line-height: 1.45;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  transition: color var(--sc-veloce) var(--sc-curva);
}
body.single-product #main .wcpa_wrap .wcpa_option_price {
  display: block;
  margin-top: 1px;
  color: var(--sc-ink-4);
  font-variant-numeric: tabular-nums;
}

/* al passaggio del mouse la piastrella si SOLLEVA di due pixel: `transform`
   non ricalcola l'impaginazione, la fa la scheda video. Un'ombra animata su
   sessanta piastrelle no. */
body.single-product #main .wcpa_wrap .wcpa_image:hover .wcpa_img_wrap {
  box-shadow: 0 0 0 1px var(--sc-quota), var(--sc-ombra-1);
  transform: translateY(-2px);
}

/* --- LO STATO SCELTO -------------------------------------------------------
   Tre segnali, di cui due non cromatici: l'anello si INGROSSA (spessore), la
   spunta COMPARE (presenza), e il tutto e' petrolio (colore). */
body.single-product #main .wcpa_wrap .wcpa_selection_outline input:checked ~ .wcpa_img_wrap,
body.single-product #main .wcpa_wrap .wcpa_selection_tick input:checked ~ .wcpa_img_wrap,
body.single-product #main .wcpa_wrap .wcpa_image input:checked ~ .wcpa_img_wrap {
  /* IL CONTORNO ROSSO. Il plugin disegna la selezione con
     `outline: 2px solid rgb(209,12,0)` — un rosso che viene dalle sue
     impostazioni e che con questa tavolozza non c'entra niente. Il foglio
     precedente non se ne accorgeva perche' ridichiarava `outline` in petrolio
     e lo copriva; qui la selezione e' disegnata con l'ombra, quindi l'outline
     del plugin restava scoperto e la piastrella scelta si accendeva di rosso.
     Va spento esplicitamente. */
  outline: 0;
  box-shadow: 0 0 0 2px var(--sc-mar-vivo), var(--sc-ombra-1);
}
body.single-product #main .wcpa_wrap .wcpa_image input:checked ~ .wcpa_image_label,
body.single-product #main .wcpa_wrap .wcpa_image input:checked ~ .wcpa_img_wrap + .wcpa_image_label {
  color: var(--sc-ink);
  font-weight: 600;
}

/* la spunta.
   Il plugin la nasconde quando lo stile di selezione e' "outline": la rimetto,
   perche' e' il segnale piu' leggibile che esista e non costa nulla. Il segno
   di spunta del plugin e' costruito con due bordi ruotati di 45 gradi: lo
   spengo e uso la stessa sagoma delle altre spunte della pagina, cosi' il
   linguaggio resta uno. */
body.single-product #main .wcpa_wrap .wcpa_selection_outline .wcpa_selected_tick {
  display: flex;
}
body.single-product #main .wcpa_wrap .wcpa_image .wcpa_selected_tick {
  right: 0;
  top: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background-color: var(--sc-mar-vivo);
  border: 0;
  /* angolo morbido solo dove non tocca la cornice: la spunta e' un angolo
     ripiegato, non un bollino appiccicato sopra */
  border-radius: 0 var(--sc-r) 0 var(--sc-r);
}
body.single-product #main .wcpa_wrap .wcpa_image .wcpa_selected_tick::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border: 0;                       /* spegne il segno a bordi del plugin */
  transform: none;                 /* …e la sua rotazione di 45 gradi */
  /* bianco su `--sc-mar-vivo`: 5,88:1, ben oltre il 3:1 richiesto a un segno
     grafico */
  background-color: var(--sc-mar-ombra);
  -webkit-mask-image: var(--sci-spunta);
          mask-image: var(--sci-spunta);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/* =============================================================================
   8 · IL CAMPIONARIO PANTONE
   Stesso ragionamento dei campioni, ma le pastiglie sono colori puri: la
   cornice non deve colorare nulla, deve solo tenere il colore separato dal
   fondo. Su bianco serve davvero: senza, PANTONE COOL GRAY 4 e PANTONE 434C
   sfumano nella pagina.
   ========================================================================== */

body.single-product #main .wcpa_wrap .wcpa_color label {
  display: block;
  width: 100%;
  cursor: pointer;
}
/* il plugin fissa la pastiglia a 50x50 con uno style inline: qui la faccio
   grande quanto la casella, come i campioni di carta — un campionario Pantone
   di pastiglie da mezzo centimetro non serve a scegliere un colore */
body.single-product #main .wcpa_wrap .wcpa_color_wrap {
  display: block;
  position: relative;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  border-radius: var(--sc-r);
}
body.single-product #main .wcpa_wrap .wcpa_color_bg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: 0 0 0 1px var(--sc-linea-2);
  transition: box-shadow var(--sc-veloce) var(--sc-curva),
              transform var(--sc-veloce) var(--sc-curva);
}
body.single-product #main .wcpa_wrap .wcpa_color_label {
  margin: var(--sc-s2) 0 0;
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  transition: color var(--sc-veloce) var(--sc-curva);
}
body.single-product #main .wcpa_wrap .wcpa_color:hover .wcpa_color_bg {
  box-shadow: 0 0 0 1px var(--sc-quota), var(--sc-ombra-1);
  transform: translateY(-2px);
}
body.single-product #main .wcpa_wrap .wcpa_color input:checked ~ .wcpa_color_bg {
  outline: 0;   /* stesso contorno rosso del plugin, stessa cura */
  /* doppio anello: un filo bianco che stacca il colore, poi il petrolio.
     Su una pastiglia gia' colorata un anello solo si confonderebbe con la
     tinta; il filo bianco in mezzo lo tiene sempre leggibile. */
  box-shadow: 0 0 0 2px var(--sc-fondo), 0 0 0 4px var(--sc-mar-vivo);
}
body.single-product #main .wcpa_wrap .wcpa_color:has(input:checked) .wcpa_color_label {
  color: var(--sc-ink);
  font-weight: 600;
}


/* =============================================================================
   9 · LA COLONNA DI DESTRA — riepilogo e preventivo
   -----------------------------------------------------------------------------
   Due fisarmoniche di Elementor, costruite su <details>/<summary> veri.
   Diventano due schede bianche con una barra di intestazione: icona, nome in
   mono spaziato, freccia che ruota. La freccia sostituisce le icone + e − di
   Font Awesome, che sono due glifi diversi in due <span> che il plugin
   accende e spegne: una freccia sola che ruota dice la stessa cosa con meno
   codice, e ruotare e' `transform`, cioe' gratis.
   ========================================================================== */

body.single-product #main .elementor-location-single .e-n-accordion-item {
  background-color: var(--sc-fondo);
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-1);
  margin-bottom: var(--sc-s3);
  overflow: hidden;
}
body.single-product #main .elementor-location-single .e-n-accordion-item-title {
  display: flex;
  align-items: center;
  gap: var(--sc-s3);
  background-color: var(--sc-fondo);
  border: 0;
  border-radius: 0;
  padding: var(--sc-s4);
  cursor: pointer;
  min-height: 44px;    /* bersaglio comodo al dito */
}
body.single-product #main .elementor-location-single .e-n-accordion-item-title-text {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-s2);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sc-mar-testo);
}
/* icona della barra: distinta per il riepilogo, calcolatrice per il preventivo.
   L'ordine (prima recap, poi quotation) e' quello del modello #5162, verificato
   dal vivo. Se un domani venissero invertiti, la prima prenderebbe la distinta
   e la seconda la calcolatrice: sbagliato ma innocuo, non si rompe niente. */
body.single-product #main .elementor-location-single .e-n-accordion-item-title-text::before {
  width: 17px;
  height: 17px;
  -webkit-mask-image: var(--sci-distinta);
          mask-image: var(--sci-distinta);
}
body.single-product #main .elementor-location-single .e-n-accordion-item:nth-of-type(2) .e-n-accordion-item-title-text::before {
  -webkit-mask-image: var(--sci-calcolatrice);
          mask-image: var(--sci-calcolatrice);
}

/* la freccia. Spengo i due glifi del plugin e disegno il segno sul contenitore
   che li teneva: cosi' non dipendo piu' da Font Awesome per questa pagina. */
body.single-product #main .elementor-location-single .e-n-accordion-item-title-icon {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: var(--sc-ink-4);
  transition: transform var(--sc-veloce) var(--sc-curva);
}
body.single-product #main .elementor-location-single .e-n-accordion-item-title-icon > span {
  display: none;
}
body.single-product #main .elementor-location-single .e-n-accordion-item-title-icon::before {
  width: 17px;
  height: 17px;
  -webkit-mask-image: var(--sci-freccia);
          mask-image: var(--sci-freccia);
}
body.single-product #main .elementor-location-single .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  transform: rotate(180deg);
}

/* il corpo della fisarmonica */
body.single-product #main .elementor-location-single .e-n-accordion-item > .e-con {
  background-color: var(--sc-fondo);
}
/* le voci del riepilogo: una distinta, non un elenco puntato. La riga tratteggiata
   e' l'unico tratto rimasto in tutta la scheda, e ci sta: e' quello che sui
   listini di carta guida l'occhio dal nome all'importo. */
body.single-product #main .elementor-location-single .e-n-accordion-item .elementor-icon-list-item {
  border-bottom: 1px dotted var(--sc-linea-2);
  padding: 7px 0;
}
body.single-product #main .elementor-location-single .e-n-accordion-item .elementor-icon-list-item:last-child {
  border-bottom: 0;
}

/* il valore scelto, nella colonna di destra del riepilogo: e' un dato tecnico
   (una misura, un colore, un codice) — va in mono, e va acceso, perche' e'
   l'unica conferma scritta di quello che il cliente ha appena deciso */
body.single-product #main .elementor-location-single .e-n-accordion .elementor-widget-html,
body.single-product #main .elementor-location-single .e-n-accordion .elementor-widget-html span {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--sc-mar-testo);
  font-variant-numeric: tabular-nums;
}


/* =============================================================================
   10 · LA MATRICE PREZZI — un listino, non una tabella qualsiasi
   -----------------------------------------------------------------------------
   Righe = quantita', colonne = data di consegna. Il cliente ci legge dentro due
   decisioni insieme ("quanti" e "per quando"), e finora nulla gli diceva dove
   si trovava dentro la griglia.

   IL MIRINO: dynamic-delivery marca con `.selected` soltanto tre celle (la
   quantita', la data e il prezzo all'incrocio). Con `:has()` risalgo dalla
   cella marcata alla riga intera e, per la colonna, dalla tabella all'indice
   nth-child dell'intestazione. Cosi' riga e colonna scelte si accendono per
   davvero, e l'incrocio resta la cella piu' forte delle dodici.

   COSA CAMBIA RISPETTO A PRIMA. Il mirino era dipinto con `--sc-rilievo`, un
   grigio: su bianco non si vedeva quasi. Adesso e' `--sc-mar-velo`, il velo di
   petrolio, che e' esattamente il gettone previsto per "selezione,evidenza".
   E il passaggio del mouse era `--sc-mar-scuro` (petrolio scuro) con sopra
   `--sc-ink` (quasi nero): un buco nero illeggibile, altro residuo del travaso.
   ========================================================================== */

/* La matrice smette di essere una tabella dal punto di vista dell'impaginazione:
   resta una tabella per chi legge (intestazioni, righe, colonne, lettori di
   schermo), ma le sue tre parti diventano indipendenti. Serve perche' il piede
   — dove il plugin ha infilato preventivo e pulsante — possa prendere tutta la
   larghezza invece di stare schiacciato in una colonna su quattro.
   `table-layout: fixed` sulle due parti superiori le tiene incolonnate fra
   loro: le colonne restano quattro, uguali, allineate. */
body.single-product #main .dd_quantity_table {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border: 0;
  border-collapse: separate !important;   /* front.css impone collapse */
  border-spacing: 0;
  margin-top: var(--sc-s6);
}
body.single-product #main .dd_quantity_table > thead,
body.single-product #main .dd_quantity_table > tbody {
  display: table;
  width: 100%;
  table-layout: fixed;
}
/* front.css: `td, th { border: .1px solid transparent !important }` */
body.single-product #main .dd_quantity_table td,
body.single-product #main .dd_quantity_table th {
  border: 0 !important;
  padding: 3px;
  background-color: transparent;
}

/* la fascia "SELECT DATES AND QUANTITIES" */
body.single-product #main .dd_quantity_table .dd_table_title div.dd_col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-s2);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  background-color: var(--sc-incasso);
  border: 0;
  border-radius: var(--sc-r);
  padding: var(--sc-s3) var(--sc-s2);
  height: auto;
}
body.single-product #main .dd_quantity_table .dd_table_title div.dd_col::before {
  width: 15px;
  height: 15px;
  -webkit-mask-image: var(--sci-calendario);
          mask-image: var(--sci-calendario);
}

/* la testatina "QUANTITY" */
body.single-product #main .dd_quantity_table thead th.dd_quantity_title div.dd_col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sc-ink-4);
  background-color: transparent;
  border: 0;
  height: 56px;
}
body.single-product #main .dd_quantity_table thead th.dd_quantity_title div.dd_col::before {
  width: 15px;
  height: 15px;
  -webkit-mask-image: var(--sci-pila);
          mask-image: var(--sci-pila);
}

/* forma comune di tutte le celle cliccabili */
body.single-product #main .dd_quantity_table tbody td div.dd_col,
body.single-product #main .dd_quantity_table thead th div.dd_col {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-p);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  border: 0;
  border-radius: var(--sc-r);
  transition: background-color var(--sc-veloce) var(--sc-curva),
              color var(--sc-veloce) var(--sc-curva);
}
body.single-product #main .dd_quantity_table tbody td.dd_quantity div.dd_col,
body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col,
body.single-product #main .dd_quantity_table tbody td.dd_price div.dd_col {
  cursor: pointer;
}

/* le due guide: quantita' (a sinistra) e data (in alto).
   Sono comandi, non celle: fondo incassato, nessun bordo — su bianco il solo
   cambio di tono basta a dire "questo si puo' toccare". */
body.single-product #main .dd_quantity_table tbody td.dd_quantity div.dd_col,
body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col {
  color: var(--sc-ink-2);
  background-color: var(--sc-incasso);
}
body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col span:first-child {
  font-family: var(--sc-disp);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--sc-ink);
}
body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col span:last-child {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-ink-4);
  margin-top: 2px;
}

/* le dodici celle di prezzo, a riposo: bianche con un filo di anello. Sono il
   fondo della griglia, non i comandi. */
body.single-product #main .dd_quantity_table tbody td.dd_price div.dd_col {
  color: var(--sc-ink-3);
  background-color: var(--sc-fondo);
  box-shadow: inset 0 0 0 1px var(--sc-linea);
}
body.single-product #main .dd_quantity_table .dd_price_container {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
/* il prezzo pieno barrato: leggibile, ma chiaramente subordinato.
   `--sc-ink-4` a 11 px sarebbe sotto la soglia comoda dichiarata in
   00-fondamenta; `--sc-ink-3` fa 6:1 e si legge. */
body.single-product #main .dd_quantity_table span.dd_regular_price {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  color: var(--sc-ink-3);
  opacity: 1;
  margin: 0;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
/* il prezzo che si paga */
body.single-product #main .dd_quantity_table span.dd_active_price {
  font-family: var(--sc-disp);
  font-weight: 900;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink-2);
}

/* --- IL MIRINO -------------------------------------------------------------
   1. la RIGA scelta: risalgo dalla cella marcata al <tr>. */
/*     PERCHE' `:not(.selected)` QUI E NELLA COLONNA. Senza,la cella d'incrocio non si accende mai. La riga si aggancia con
       `tr:has(div.dd_col.selected)`, e `:has()` porta con se' la specificita'
       del suo argomento piu' pesante:la regola della riga vale (1,6,6),quella dell'incrocio (1,5,4). Vince la riga, e la cella piu' importante della matrice resta velata come le altre tre. Misurato in pagina:l'incrocio risultava #E9F3F4 invece del petrolio.
       Era cosi' anche prima della riscrittura — il guasto viene da lontano. La cura non e' rincarare la specificita' dell'incrocio (si finisce a
       scrivere selettori di otto pezzi): e' dire che riga e colonna dipingono le celle INTORNO al mirino,e il mirino se lo dipinge da se'. Detto
       cosi',le due regole non si contendono piu' niente. */
body.single-product #main .dd_quantity_table tbody tr:has(div.dd_col.selected) td.dd_price div.dd_col:not(.selected) {
  background-color: var(--sc-mar-velo);
  box-shadow: none;
}
/*     Stessa esclusione, stesso motivo: senza `:not(.selected)` questa regola
       (1,6,6) batte quella che tinge di bianco il prezzo dentro il mirino
       (1,6,5), e all'incrocio resta il quasi-nero su petrolio scuro:2,25:1. Misurato:era il secondo peggior contrasto della pagina. */ body.single-product #main .dd_quantity_table tbody tr:has(div.dd_col.selected) td.dd_price div.dd_col:not(.selected) span.dd_active_price{color:var(--sc-ink)}body.single-product #main .dd_quantity_table:has(thead th.dd_date:nth-child(2) div.dd_col.selected) tbody td.dd_price:nth-child(2) div.dd_col:not(.selected),body.single-product #main .dd_quantity_table:has(thead th.dd_date:nth-child(3) div.dd_col.selected) tbody td.dd_price:nth-child(3) div.dd_col:not(.selected),body.single-product #main .dd_quantity_table:has(thead th.dd_date:nth-child(4) div.dd_col.selected) tbody td.dd_price:nth-child(4) div.dd_col:not(.selected){background-color:var(--sc-mar-velo);box-shadow:none}body.single-product #main .dd_quantity_table tbody td.dd_quantity div.dd_col.selected,body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col.selected{background-color:var(--sc-mar-vivo);color:var(--sc-mar-ombra);font-weight:700}body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col.selected span:first-child,body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col.selected span:last-child{color:var(--sc-mar-ombra)}body.single-product #main .dd_quantity_table tbody td.dd_price div.dd_col.selected{background-color:var(--sc-mar-vivo);box-shadow:none}body.single-product #main .dd_quantity_table tbody td.dd_price div.dd_col.selected span.dd_active_price{color:var(--sc-mar-ombra);font-size:1.25rem}body.single-product #main .dd_quantity_table tbody td.dd_price div.dd_col.selected span.dd_regular_price{color:var(--sc-mar-velo)}body.single-product #main .dd_quantity_table tbody td.dd_quantity div.dd_col:hover,body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col:hover,body.single-product #main .dd_quantity_table tbody td.dd_price div.dd_col:hover{background-color:var(--sc-mar-velo);color:var(--sc-mar-testo);box-shadow:none}body.single-product #main .dd_quantity_table tbody td.dd_price div.dd_col:hover span.dd_active_price,body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col:hover span:first-child{color:var(--sc-mar-testo)}body.single-product #main .dd_quantity_table tfoot,body.single-product #main .dd_quantity_table tfoot tr,body.single-product #main .dd_quantity_table tfoot td{display:block;width:100%;max-width:100%;box-sizing:border-box}body.single-product #main .dd_quantity_table tfoot tr>td:first-child{display:none}body.single-product #main .dd_quantity_table tfoot td{padding:var(--sc-s5) 0 0}body.single-product #main .dd_calculations{border:0;border-radius:var(--sc-r);background-color:var(--sc-fondo);box-shadow:var(--sc-ombra-2);overflow:hidden}body.single-product #main .dd_calculations .dd_calc_row{margin:0;padding:var(--sc-s3) var(--sc-s5);background-color:transparent;border-radius:0;border-bottom:1px solid var(--sc-linea);color:var(--sc-ink-3);font-family:var(--sc-mono);font-size:var(--sc-t-mono);letter-spacing:.14em;text-transform:uppercase}body.single-product #main .dd_calculations .dd_calc_heading{display:inline-flex;align-items:center;gap:var(--sc-s2)}body.single-product #main .dd_calculations .dd_calc_heading::before{width:15px;height:15px;opacity:.75;-webkit-mask-image:var(--sci-scontrino);mask-image:var(--sci-scontrino)}body.single-product #main .dd_calculations .dd_tax .dd_calc_heading::before{-webkit-mask-image:var(--sci-percento);mask-image:var(--sci-percento)}body.single-product #main .dd_calculations .dd_shipping .dd_calc_heading::before{-webkit-mask-image:var(--sci-camion);mask-image:var(--sci-camion)}body.single-product #main .dd_calculations .dd_estimate .dd_calc_heading::before{opacity:1;-webkit-mask-image:var(--sci-cartellino);mask-image:var(--sci-cartellino)}body.single-product #main .dd_calculations .dd_calc_value{font-family:var(--sc-mono);font-size:var(--sc-t-p);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--sc-ink-2)}body.single-product #main .dd_calculations .dd_shipping svg{display:none}body.single-product #main .dd_calculations .dd_shipping.dd_calc_row{background-color:transparent;color:var(--sc-ink-3)}body.single-product #main .dd_calculations .dd_estimate.dd_calc_row{background-color:var(--sc-mar-scuro);border:0;color:var(--sc-mar-ombra);padding:var(--sc-s4) var(--sc-s5)}body.single-product #main .dd_calculations .dd_estimate .dd_calc_heading{font-weight:700;letter-spacing:.18em;color:var(--sc-mar-ombra)}body.single-product #main .dd_calculations .dd_estimate .dd_calc_value{font-family:var(--sc-disp);font-weight:900;font-size:var(--sc-t-h3);color:var(--sc-mar-ombra)}body.single-product #main .dd_calculations .dd_add_to_cart{display:flex;align-items:center;justify-content:center;width:100%;min-height:60px;margin:0;gap:var(--sc-s3);background:var(--sc-mar)!important;color:var(--sc-mar-ombra)!important;border:0;border-radius:0;font-family:var(--sc-disp);font-weight:900!important;font-size:1.2rem!important;letter-spacing:.14em;text-transform:uppercase!important;cursor:pointer;transition:background-color var(--sc-veloce) var(--sc-curva)}body.single-product #main .dd_calculations .dd_add_to_cart:hover,body.single-product #main .dd_calculations .dd_add_to_cart:focus-visible{background:var(--sc-mar-vivo)!important}body.single-product #main .dd_calculations .dd_add_to_cart svg{width:22px;height:22px}body.single-product #main .dd_calculations .dd_add_to_cart svg path{stroke:var(--sc-mar-ombra)}body.single-product #main .dd_calculations .loader{border-color:var(--sc-mar-ombra);border-top-color:var(--sc-mar-scuro)}body.single-product #main .elementor-location-single a:not(.elementor-button):not(.e-n-accordion-item-title){color:var(--sc-mar-testo);text-underline-offset:3px}body.single-product #main .elementor-location-single .elementor-widget-icon-box .elementor-icon-box-title,body.single-product #main .elementor-location-single .elementor-widget-icon-box .elementor-icon-box-description{color:inherit}body.single-product #main .elementor-location-single div.elementor-heading-title,body.single-product #main .elementor-location-single p.elementor-heading-title{text-transform:none;letter-spacing:normal;line-height:1.6}body.single-product #main .elementor-element-48d0098,body.single-product #main .elementor-element-677707f,body.single-product #main .elementor-element-f920dab,body.single-product #main .elementor-element-e4bd318{background-color:var(--sc-incasso);border-radius:var(--sc-r)}body.single-product #main .elementor-location-single .elementor-button{background-color:transparent;border:1px solid var(--sc-mar-testo);border-radius:var(--sc-r);color:var(--sc-mar-testo);min-height:44px;transition:background-color var(--sc-veloce) var(--sc-curva)}body.single-product #main .elementor-location-single .elementor-button:hover{background-color:var(--sc-mar-velo);color:var(--sc-mar-testo);border-color:var(--sc-mar-testo)}@media (max-width:782px){body.single-product #main .dd_quantity_table tfoot td{padding:var(--sc-s4) 0 0}body.single-product #main .dd_quantity_table td,body.single-product #main .dd_quantity_table th{padding:2px!important}body.single-product #main .dd_quantity_table tbody td div.dd_col,body.single-product #main .dd_quantity_table thead th div.dd_col{height:48px;padding:4px 2px;font-size:13px}body.single-product #main .dd_quantity_table .dd_price_container{flex-direction:column;gap:0;align-items:center}body.single-product #main .dd_quantity_table span.dd_active_price,body.single-product #main .dd_quantity_table tbody td.dd_price div.dd_col.selected span.dd_active_price{font-size:.95rem}body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col span:first-child{font-size:1rem}body.single-product #main .dd_quantity_table .dd_table_title div.dd_col{letter-spacing:.1em}body.single-product #main .dd_calculations .dd_calc_row{padding:var(--sc-s3) var(--sc-s4)}body.single-product #main .dd_calculations .dd_estimate.dd_calc_row{padding:var(--sc-s4)}body.single-product #main .wcpa_wrap .wcpa_field_wrap{padding:var(--sc-s4)}body.single-product #main .wcpa_wrap .wcpa_field_wrap::before{left:var(--sc-s4);top:var(--sc-s4);width:28px;height:28px}body.single-product #main .wcpa_wrap .wcpa_field_wrap:has(input:checked)::after,body.single-product #main .wcpa_wrap .wcpa_field_wrap:has(select option:checked:not([value=""]))::after{right:var(--sc-s4);top:calc(var(--sc-s4) + 5px)}body.single-product #main .wcpa_wrap .wcpa_field_label{padding:2px 28px 0 38px;font-size:1.05rem}body.single-product #main .wcpa_wrap .wcpa_field_label::before{width:18px;height:18px;margin-right:8px}body.single-product #main .wcpa_wrap .wcpa_group_field{grid-template-columns:repeat(3,1fr);gap:var(--sc-s3) var(--sc-s2)}body.single-product #main .elementor-location-single .elementor-widget-image-carousel>.elementor-widget-container{padding:var(--sc-s3)}}@media (max-width:420px){body.single-product #main .dd_quantity_table tbody td div.dd_col,body.single-product #main .dd_quantity_table thead th div.dd_col{font-size:12px;letter-spacing:0}body.single-product #main .dd_quantity_table span.dd_regular_price{font-size:10px}body.single-product #main .dd_quantity_table .dd_table_title div.dd_col::before{display:none}}@media (max-width:360px){body.single-product #main .wcpa_wrap .wcpa_group_field{grid-template-columns:repeat(2,1fr)}}