/* =============================================================================
   scatole.com — DIREZIONE "BIANCO CANDIDO" · 02 SCHEDA PRODOTTO E CONFIGURATORE
   -----------------------------------------------------------------------------
   Riscritto da capo il 23/08/2026. Il foglio precedente era nato per la
   direzione SCURA e poi travasato al bianco cambiando solo la tavolozza:
   funzionava, ma portava dentro decisioni che sul bianco non hanno piu' senso
   (fondi scuri sotto i campioni, `color-scheme: dark`, testo quasi nero sopra
   fasce di petrolio scuro). Tre di quelle decisioni erano guasti veri di
   leggibilita', misurati dal vivo e riportati nel resoconto.

   L'IDEA DI QUESTA VERSIONE: LA PAGINA E' UN FOGLIO DI CARTA BIANCA.
   Non ci sono piu' riquadri disegnati col tratto. Ogni passo e' una scheda
   bianca appoggiata sul foglio: si stacca perche' fa OMBRA, non perche' ha un
   bordo. Dove serve un contenitore incassato (la galleria, una casella, una
   piastrella) il fondo scende di un tono appena — da #FFFFFF a #F4F6F7 — e
   basta quello. Il petrolio compare solo dove c'e' una decisione: la scelta
   fatta, il totale, il pulsante d'acquisto.

   Nessun colore letterale: solo i gettoni di 00-fondamenta.

   -----------------------------------------------------------------------------
   LE ICONE
   Sono SVG in linea come data URI usati come MASCHERA, mai come immagine di
   sfondo. La maschera fa solo da sagoma: il colore arriva da
   `background-color: currentColor`, quindi l'icona segue il testo in ogni
   stato — riposo, passaggio del mouse, selezione — senza una riga in piu'.
   Con `background-image` avrei dovuto disegnare una variante per ogni stato.

   Le sagome stanno tutte insieme in cima, come gettoni di forma (`--sci-…`),
   per due motivi: si dichiarano UNA volta sola invece di due (la proprieta'
   prefissata e quella standard leggono la stessa variabile), e chi domani
   volesse cambiare un'icona la trova in un posto solo invece che sparsa in
   mezzo alle regole.
   Stile: tratto, riquadro 24x24, spessore 1.7, estremita' tonde — lo stesso
   di 04-rifiniture, cosi' le icone del menu e quelle della scheda sono
   parenti. Nessuna libreria, nessun carattere iconografico, nessuna emoji.

   -----------------------------------------------------------------------------
   PERIMETRO
   Tutto e' racchiuso in `body.single-product #main`. Fuori di li' questo foglio
   non scrive nulla: il carrello e il negozio sono di altri due fogli, la
   testata e il piede sono di 01-base, le icone del menu di 04-rifiniture.

   PERCHE' C'E' `#main` IN OGNI SELETTORE
   Non e' vezzo. Elementor genera per questa scheda un foglio suo (post-5162.css)
   con selettori lunghissimi tipo
     `.elementor-5162 .elementor-element.elementor-element-20dac36 > … > .e-n-accordion-item-title`
   e in un punto perfino un `:is(…)` con `!important` sul pulsante d'acquisto.
   Contro quella roba nessuna catena di sole classi ha speranza. Un solo id in
   testa alla catena la supera tutta, senza dover cospargere il foglio di
   `!important`. E' il modo meno invasivo di vincere.

   -----------------------------------------------------------------------------
   DOVE SERVE `!important`, E PERCHE'
   Solo in cinque punti, tutti causati da codice altrui che non lascia scelta.
   Ogni volta e' verificato leggendo la regola avversaria, non a sentimento:
     1) misure delle cornici (`.wcpa_img_wrap`, `.wcpa_color_wrap`, e le
        immagini dentro) — il configuratore scrive width/height INLINE su ogni
        cornice: 167x100 qui, 50x50 sulle pastiglie Pantone, mentre le immagini
        sono TUTTE quadrate (150x150). Uno style inline si batte solo con
        !important. Senza, le immagini quadrate finiscono in cornici
        rettangolari con bande vuote e le pastiglie restano francobolli.
     2) `.dd_add_to_cart` — dynamic-delivery dichiara fondo, colore, corpo, peso
        e maiuscolo con !important nel suo front.css, e il foglio generato da
        Elementor ne rincara la dose con un `:is(…) !important`.
     3) bordi di `td, th` della matrice — lo stesso front.css impone
        `border: .1px solid transparent !important` a tutte le celle, e
        `border-collapse: collapse`.
     4) le spaziature della matrice sotto i 500 px — front.css usa di nuovo
        !important dentro la sua media query.
     5) il colore del link "download template" — un foglio di Elementor
        generato per un'altra pagina dichiara `a.template { color:#fff
        !important }`, ed e' bianco su bianco. Dettagli alla sezione 5.
   Altrove no: l'id `#main` basta e avanza.

   -----------------------------------------------------------------------------
   MOVIMENTO E COSTO
   Si animano solo `transform`, `opacity`, `color`, `background-color` e
   `border-color`. Niente `width`, `height`, `top`, `margin`: quelle
   ricalcolerebbero l'impaginazione a ogni fotogramma. Niente `filter` e niente
   `backdrop-filter`, che costano una passata di composizione in piu' su
   ognuno dei ~60 campioni della pagina. Le ombre sono dichiarate ma NON
   animate: dipingerle di nuovo sessanta volte al passaggio del mouse e' il
   modo piu' facile di far scattare lo scorrimento su un telefono.
   ========================================================================== */


/* =============================================================================
   0 · I GETTONI DI FORMA — le sagome delle icone
   -----------------------------------------------------------------------------
   Dichiarate su `#main` cosi' scendono per eredita' a tutta la scheda e si
   possono usare sia con `-webkit-mask-image` sia con `mask-image` senza
   riscrivere il data URI due volte (era il difetto del foglio 04: ogni icona
   compare due volte identica).
   Prefisso `--sci-` (Scatole · Icone) per non invadere lo spazio dei nomi
   `--sc-` di 00-fondamenta, che e' la fonte di verita' dei COLORI: qui non si
   dichiara nessun colore, solo geometria.
   ========================================================================== */

body.single-product #main {

  /* --- passi del configuratore, per TIPO di scelta -----------------------
     L'icona dice che GENERE di decisione e', non quale prodotto e'. E' una
     scelta obbligata e insieme giusta: gli id dei gruppi sono impronte
     generate dal plugin (`image-group_10672d225dd715c`) e cambiano da un
     prodotto all'altro, mentre la classe `wcpa_type_…` e' la stessa ovunque.
     Cosi' foam, drawer-box e perfume-box prendono le icone giuste senza che
     nessuno debba tornare qui. */

  /* righello: una misura da scegliere (menu a tendina, numero) */
  --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);
}
/*  2. la COLONNA scelta: l'intestazione marcata e' la 2a, 3a o 4a cella della
       riga; le celle di prezzo hanno gli stessi indici. */
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;
}
/*  3. le due guide scelte: fondo pieno.
       PETROLIO SCURO, NON PETROLIO PIENO — e' una correzione, non un gusto.
       Misurato in pagina prima della riscrittura: "100" era bianco su
       `--sc-mar`, cioe' 3,94:1 a 16,5 px, e "AGOSTO" lo stesso a 11,5 px.
       La soglia AA per il testo normale e' 4,5:1: entrambi bocciati. Il testo
       "grande" (>=18,7 px, o >=14 px in grassetto pesante) puo' fermarsi a
       3:1, ma qui non c'e' testo grande. Su `--sc-mar-vivo` il bianco fa
       5,88:1 e passa a qualsiasi corpo.
       Regola generale di questo foglio: il petrolio PIENO (`--sc-mar`) solo
       sotto testo grande; sotto testo piccolo, sempre `--sc-mar-vivo`. */
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);
}
/*  4. l'incrocio: la cella piu' forte della matrice. */
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 {
  /* il velo di petrolio su fondo petrolio scuro: 5,3:1, resta leggibile pur
     restando chiaramente subordinato */
  color: var(--sc-mar-velo);
}

/* al passaggio del mouse, prima di scegliere.
   Prima era petrolio scuro con sopra il quasi-nero: la cella diventava un
   buco illeggibile proprio nell'istante in cui la si stava leggendo. */
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);
}


/* =============================================================================
   11 · PREVENTIVO E ACQUISTO: un oggetto solo
   -----------------------------------------------------------------------------
   Erano due cose separate — un elenco di importi, e piu' sotto un bottone.
   Adesso sono un blocco unico: TOTAL, IVA, spedizione, e in fondo ESTIMATE
   attaccato al pulsante, senza aria in mezzo. Il totale e il gesto che lo
   accetta si leggono insieme. E' l'unico blocco della pagina con l'ombra
   media (`--sc-ombra-2`): e' il punto in cui si decide.

   IL GUASTO PIU' GRAVE DELLA VERSIONE PRECEDENTE STAVA QUI. La riga ESTIMATE
   aveva fondo `--sc-mar-scuro` e la scritta "ESTIMATE" in `--sc-mar-vivo`:
   misurati in pagina, 1,43:1. Praticamente invisibile. L'importo accanto, in
   `--sc-ink`, faceva 2,25:1. La riga piu' importante del negozio non si
   leggeva. Adesso e' bianco su petrolio scuro: 8,1:1.
   ========================================================================== */

/* IL PIEDE ESCE DALLA TABELLA, A QUALSIASI LARGHEZZA.
   dynamic-delivery infila il riepilogo costi e il pulsante d'acquisto dentro
   una cella del <tfoot>, in una colonna che ne salta una: il blocco piu'
   importante della pagina nasceva quindi stretto e disallineato, e sul
   telefono, appena la matrice diventa scorrevole, ci finisce dentro e meta'
   pulsante esce dallo schermo. La cura non e' spostarlo: e' toglierlo dal
   comportamento tabellare una volta per tutte, a TUTTE le larghezze. Cosi' il
   preventivo prende tutta la larghezza e non dipende piu' dalle colonne. */
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;            /* la cella vuota che spingeva tutto a destra */
}
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;
}
/* l'etichetta con la sua icona: uno scontrino per il totale, una percentuale
   per l'IVA, un camion per la spedizione, un cartellino per il preventivo */
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);
}
/* Il camioncino disegnato dal plugin (un SVG 40x32 senza titolo ne' comandi,
   puramente decorativo) sparisce: al suo posto c'e' l'icona a tratto della
   riga, coerente con le altre tre. Una figura sola invece di due. */
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);
}

/* la riga che conta */
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);   /* bianco su petrolio scuro: 8,1:1 */
}
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);
}

/* il pulsante, incollato sotto ESTIMATE: nessuno stacco, e' lo stesso oggetto.
   front.css dichiara fondo, colore, corpo, peso e maiuscolo con !important, e
   il foglio di Elementor rincara con un `:is(…) !important`: qui serve
   rispondere sugli stessi termini. */
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);
  /* QUI il petrolio pieno si puo' usare, ed e' l'unico posto della pagina in
     cui accade: il testo e' Lato 900 a 19,2 px, cioe' "testo grande" per la
     norma, e la soglia scende a 3:1 — bianco su `--sc-mar` fa 3,94:1.
     E' anche il motivo per cui deve restare l'UNICO pieno acceso: se altri
     elementi lo usassero, smetterebbe di dire "premi qui". */
  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);
}

/* il link "calculate shipping price" sotto al blocco, e ogni altro link della
   scheda: petrolio SCURO, perche' un link e' testo normale e il petrolio
   pieno su bianco si ferma a 3,94:1 */
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;
}


/* =============================================================================
   12 · CODA DELLA SCHEDA — "how would you like to proceed", strumenti, contatto
   -----------------------------------------------------------------------------
   Quattro riquadri disegnati da Elementor con colori fissati a mano. Nella
   direzione scura andavano riscritti da zero (sparavano in faccia su un tavolo
   blu notte) e servivano regole con `*` che imponevano il colore a TUTTI i
   discendenti. Su bianco quel lavoro non serve piu': i colori originali di
   Elementor erano stati scelti per un sito chiaro e ci tornano giusti. Qui
   resta solo l'allineamento alla tavolozza dei fondi e agli angoli morbidi —
   e le regole con `*` sono sparite, che e' anche il motivo per cui adesso le
   icone dentro questi riquadri possono avere un colore proprio.
   ========================================================================== */

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;
}
/* TITOLI CHE TITOLI NON SONO.
   In questa scheda alcuni "widget titolo" di Elementor contengono frasi intere
   ("Download the instructions to create your file. You can upload…").
   Elementor le rende come <div class="elementor-heading-title">, non come
   <h1>…<h6>: il tag dice la verita' anche quando il redattore non l'ha detta.
   Uso quella differenza. Il maiuscolo della direzione vale per le etichette
   corte; su tre righe di frase diventa un muro di lettere illeggibile.
   (Restano maiuscole le frasi marcate DAVVERO come <h2>: quello e' un errore
   di redazione, non di stile, e non si corregge da un foglio CSS.) */
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);
}

/* i bottoni secondari della coda: contorno, non pieni — non devono competere
   con ADD TO CART, che deve restare l'unico pieno della pagina.
   ATTENZIONE: in questa scheda non tutti gli `.elementor-button` sono
   pulsanti. Uno dei riquadri "how would you like to proceed" e' un paragrafo
   di tre righe travestito da bottone. Percio' qui cambio SOLO il colore e la
   forma, e non tocco il carattere: mettere mono maiuscolo spaziato avrebbe
   trasformato quel paragrafo in un muro di lettere. */
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);
}


/* =============================================================================
   13 · TELEFONO — 390 px
   -----------------------------------------------------------------------------
   Il guasto noto: il riepilogo costi e il pulsante ADD TO CART vivono DENTRO
   una cella <tfoot> della matrice. Se la matrice diventa scorrevole in
   orizzontale, il pulsante ci finisce dentro e meta' esce dallo schermo.
   La cura non e' spostare il pulsante: e' toglierlo dal comportamento
   tabellare — cosa che la sezione 11 fa a QUALSIASI larghezza, non solo qui.
   La matrice, dal canto suo, resta a quattro colonne senza scorrere: basta
   stringere le spaziature.
   ========================================================================== */

@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;   /* front.css usa gia' !important sotto i 500 px */
  }
  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;              /* bersaglio comodo al dito */
    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);
  }

  /* le schede dei passi: meno margine, la pastiglia del numero resta dov'e' */
  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;
  }

  /* I campioni: tre per riga. A 390 px sono da 88 px l'uno — ben oltre il
     bersaglio minimo di 44 px — e tengono la lista corta: con due per riga le
     dodici carte diventavano sei schermate di scorrimento. */
  body.single-product #main .wcpa_wrap .wcpa_group_field {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sc-s3) var(--sc-s2);
  }

  /* la galleria: il vassoio si stringe, la foto no */
  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;
  }
  /* la fascia del titolo: a 390 px "SELECT DATES AND QUANTITIES" spaziato non
     ci sta su una riga sola, e l'icona ruberebbe l'ultimo spazio utile */
  body.single-product #main .dd_quantity_table .dd_table_title div.dd_col::before {
    display: none;
  }
}

/* sotto i 360 px (telefoni vecchi) tre colonne diventano francobolli */
@media (max-width: 360px) {
  body.single-product #main .wcpa_wrap .wcpa_group_field {
    grid-template-columns: repeat(2, 1fr);
  }
}