/* =============================================================================
   scatole.com — LIVELLO MODERNO v2
   -----------------------------------------------------------------------------
   Non sostituisce il tema: si sovrappone e vince la cascata perche' caricato
   per ultimo dal mu-plugin 000900. Si spegne cancellando quel file.

   REGOLA SEGUITA: colori e caratteri NON sono inventati, sono estratti dalla
   pagina viva. Oltre al petrolio del marchio il sito usa gia' altri due colori
   che qui vengono solo dichiarati e usati con criterio:
     petrolio #2F8C98  marchio, pulsanti secondari, fasce, colonna del footer
     blu notte #1C1F3E  pulsante "Add to cart", fascia "New to Scatole.com",
                        corpo del footer  -> e' il colore dell'AZIONE e del testo forte
     cremisi  #DC0E42  prezzo "starting from", icona del campione omaggio
                       -> e' il colore del RISPARMIO, usato con il contagocce
   Caratteri: titoli Lato, testo Poppins. Gia' caricati dal tema: non ne aggiungo.

   COSA CAMBIA RISPETTO ALLA v1
     - l'intestazione veniva stilata con i nomi di classe del tema Porto
       (.header-main, .main-menu): su questo sito NON ESISTONO, l'intestazione e'
       costruita con Elementor. Quelle regole erano lettera morta. Riscritte.
     - aggiunto tutto il pezzo che conta davvero per il fatturato: il
       configuratore (WCPA), la matrice prezzi/date (plugin dd_), il riepilogo
       costi e il riquadro laterale del riepilogo progetto.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. GETTONI DI PROGETTO
   Una sola fonte di verita' per colori, spazi, raggi, ombre e curve.
   ------------------------------------------------------------------------- */
:root {
  /* marchio, estratto dal sito */
  --sc-brand:        #2F8C98;
  --sc-brand-scuro:  #226C76;
  --sc-brand-piu-scuro: #1B555D;   /* per testo bianco sopra: contrasto 6,4:1 */
  --sc-brand-chiaro: #4FAAB6;
  --sc-brand-velo:   color-mix(in srgb, #2F8C98 8%, white);
  --sc-brand-tenue:  color-mix(in srgb, #2F8C98 14%, white);

  /* i due colori che il sito usa gia' accanto al petrolio */
  --sc-navy:      #1C1F3E;   /* azione e inchiostro forte */
  --sc-navy-2:    #2C3357;
  --sc-cremisi:   #DC0E42;   /* solo risparmio / offerta */

  /* inchiostri: piu' contrastati degli originali (#777 su bianco non passa AA) */
  --sc-ink:      #14181C;   /* titoli */
  --sc-ink-2:    #3A424A;   /* testo corrente — contrasto 10:1 su bianco */
  --sc-ink-3:    #667079;   /* testo secondario — 4,9:1, passa AA */
  --sc-linea:    color-mix(in srgb, #14181C 10%, transparent);
  --sc-linea-2:  color-mix(in srgb, #14181C 6%, transparent);

  /* superfici */
  --sc-sup:      #FFFFFF;
  --sc-sup-2:    #F7F9FA;
  --sc-sup-3:    #EDF2F4;

  /* raggi */
  --sc-r-s:  10px;
  --sc-r-m:  16px;
  --sc-r-l:  24px;
  --sc-r-pillola: 999px;

  /* ombre a strati: leggere e realistiche, non il classico alone grigio */
  --sc-ombra-1: 0 1px 2px rgb(20 24 28 / .04), 0 2px 6px rgb(20 24 28 / .04);
  --sc-ombra-2: 0 2px 4px rgb(20 24 28 / .04), 0 8px 20px rgb(20 24 28 / .07);
  --sc-ombra-3: 0 4px 8px rgb(20 24 28 / .05), 0 18px 40px rgb(20 24 28 / .11);
  --sc-ombra-marchio: 0 6px 18px color-mix(in srgb, #2F8C98 28%, transparent);
  --sc-ombra-navy:    0 6px 18px color-mix(in srgb, #1C1F3E 26%, transparent);

  /* movimento */
  --sc-curva: cubic-bezier(.22, 1, .36, 1);
  --sc-veloce: 160ms;
  --sc-medio:  280ms;

  /* ritmo verticale */
  --sc-sp-1: .5rem;  --sc-sp-2: 1rem;   --sc-sp-3: 1.5rem;
  --sc-sp-4: 2rem;   --sc-sp-5: 3rem;   --sc-sp-6: 4.5rem;

  /* altezza della striscia di menu che resta appesa in alto quando si scorre.
     Serve in due posti (intestazione e colonna appiccicata del prodotto):
     tenerla in un gettone evita che i due valori vadano fuori sincrono. */
  --sc-barra: 84px;
}

/* ---------------------------------------------------------------------------
   2. BASE — leggibilita'
   Il tema partiva da 12px con testo #777: entrambi sotto gli standard attuali.
   Alzo la base e il contrasto senza toccare la struttura.
   ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-size: clamp(15px, .35vw + 14px, 16.5px);
  line-height: 1.65;
  color: var(--sc-ink-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p, li, td, .elementor-widget-text-editor { color: var(--sc-ink-2); }

/* titoli: scala fluida, niente salti tra telefono e schermo grande */
h1, .elementor-heading-title.elementor-size-xxl { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
h1, h2, h3, h4 {
  color: var(--sc-ink);
  line-height: 1.14;
  letter-spacing: -.018em;
  text-wrap: balance;          /* niente parole orfane a fine riga */
}

/* i titoli di sezione del tema (Lato 50px) diventano fluidi e piu' respirati */
.elementor-heading-title { line-height: 1.12; text-wrap: balance; }

a { transition: color var(--sc-veloce) var(--sc-curva); }

/* messa a fuoco visibile: mancava del tutto, e serve a chi naviga da tastiera */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid var(--sc-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; height: auto; }
::selection { background: var(--sc-brand); color: #fff; }

/* barra di scorrimento discreta */
* { scrollbar-width: thin; scrollbar-color: var(--sc-brand-chiaro) transparent; }

/* ---------------------------------------------------------------------------
   3. EROE (Revolution Slider dentro Elementor)
   ============================================================================
   QUI LA v1 AVEVA SBAGLIATO DIAGNOSI. Lo scrivo per esteso perche' e' il tipo
   di errore che si ripete.

   La v1 sosteneva: «il titolo CIAO! we are SCATOLE.COM e' stampato dentro il
   PNG in grigio chiarissimo su fondo chiaro, praticamente invisibile» e come
   rimedio applicava `filter: contrast(1.55)` alle immagini dello slider.
   Verificato il 23/08, misurando i pixel del file vero
   (/wp-content/uploads/2024/10/slider1.png, 1896x799):
       colore del titolo  RGB(15, 22, 43)   = blu notte
       colore del fondo   RGB(228, 218, 212) = crema
       rapporto di contrasto  13,06:1
   Tredici a uno. Il titolo e' fra le cose PIU' leggibili di tutto il sito.

   Da dove veniva l'impressione dello sbiadito: Revolution Slider 6 non usa un
   <img> ne' un background-image, DISEGNA la diapositiva dentro un <canvas> e
   la fa comparire in dissolvenza. Se si guarda (o si fotografa) la pagina a
   meta' dissolvenza si vede un titolo grigio-pallido. E' un fotogramma
   intermedio, non il risultato.

   Conseguenza pratica: la regola della v1 era DOPPIAMENTE inutile — partiva da
   una diagnosi sbagliata E non poteva funzionare, perche' selezionava `img`
   dentro lo slider e di <img> non ce n'e' nessuno. Rimossa.

   ----------------------------------------------------------------------------
   RESTA VERO che l'altezza di 900px fissi non si tocca da CSS. Tre tentativi
   della v1, tutti falliti, li conservo perche' nessuno li ripeta:
   1) `height: auto` su <rs-module>            -> eroe BIANCO. Le diapositive
      sono posizionate in modo assoluto: senza altezza esplicita collassano.
   2) `overflow: hidden` su <rs-fullwidth-wrap> -> larghezza misurata 0 pixel.
   3) `overflow: hidden` sui contenitori Elementor -> stesso esito.
   L'altezza va cambiata dentro Revolution Slider (pannello del modulo,
   "Layout & Visual"): e' un intervento di contenuto, non di stile.

   DUE COSE DA GUARDARE, non risolvibili da qui:
   - il PNG e' largo 1896px ma su uno schermo da 2560 viene disegnato a 2550:
     ingrandito del 35%, quindi molle. Serve una versione piu' grande del file.
   - su questo browser automatico la tela resta bianca finche' non si scorre o
     non si ridimensiona la finestra (lo slider ha la classe
     `rev_redraw_on_blurfocus`: ridisegna sugli eventi di fuoco). Va ricontrollato
     su un browser normale: se succede anche li', la prima schermata resta vuota
     fino al primo movimento ed e' un problema serio di conversione.
   ========================================================================= */

/* i testi vivi dello slider (quelli non stampati nel PNG) restano sopra */
.elementor-widget-slider_revolution rs-layer,
.elementor-widget-slider_revolution rs-layer-wrap { z-index: 5 !important; }

/* NIENTE VELO SULL'EROE: provato nella v1 e rimosso. Un velo bianco schiarisce
   proprio la meta' destra, dove sta il titolo, e peggiora quello che dovrebbe
   migliorare. */

/* il pulsante dell'eroe: da piatto a rilevato */
.rev-btn, a.rev-btn {
  border-radius: var(--sc-r-pillola) !important;
  box-shadow: var(--sc-ombra-marchio) !important;
  letter-spacing: .01em !important;
  transition: transform var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva) !important;
}
.rev-btn:hover, a.rev-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--sc-brand) 38%, transparent) !important;
  background-color: var(--sc-brand-scuro) !important;
}

/* ---------------------------------------------------------------------------
   4. INTESTAZIONE
   ============================================================================
   ERRORE DELLA v1, corretto qui: avevo scritto le regole per il tema Porto
   (.header-main, .main-menu, #menu-main-menu). Su scatole.com quelle classi
   NON esistono: l'intestazione e' un modello Elementor
   (#header.header-builder > header.elementor-location-header) e il menu e'
   ul.elementor-nav-menu > li > a.elementor-item. Nessuna delle vecchie regole
   toccava un solo pixel.

   L'intestazione e' alta 222px: 48 di barra superiore + 83 di logo + 91 di menu.
   Tenerla tutta appiccicata in alto mangerebbe un quarto dello schermo.
   Soluzione senza JavaScript: rendo appiccicato l'INVOLUCRO con un `top`
   NEGATIVO. Il blocco scorre via finche' resta appesa solo la striscia del
   menu (altezza --sc-barra). E' il trucco dell'appiccicato parziale: costa
   zero, non tocca il markup, e si annulla cambiando una riga.
   ========================================================================= */
@media (min-width: 1025px) {
  .header-wrapper {
    position: sticky;
    /* quanto se ne va prima di incollarsi = altezza totale - striscia visibile */
    top: calc(var(--sc-barra) - 222px);
    z-index: 500;
  }
  /* la striscia che resta appesa deve avere un fondo suo, altrimenti il
     contenuto della pagina le scorre attraverso */
  #header.header-builder { background: rgb(255 255 255 / .9); }
  .header-wrapper::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--sc-linea-2);
    pointer-events: none;
  }
  header.elementor-location-header {
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }
}

/* Dentro la riga del menu c'e' un widget "divisore" decorativo largo 1124px
   che non e' allineato con niente: parte e finisce a meta' di due voci di
   menu. Ora il filo sotto l'intestazione lo disegna .header-wrapper::after,
   a tutta larghezza: quello vecchio e' solo rumore e lo spengo. */
#header .elementor-widget-divider { display: none; }

/* barra superiore: era grigio su grigio (#eaeae9 con testo chiaro).
   Alzo il contrasto del testo e do' aria alle voci. */
#header .elementor-location-header > .e-con:first-child .elementor-heading-title,
#header .elementor-location-header > .e-con:first-child .elementor-heading-title a {
  color: var(--sc-ink-2);
  font-weight: 600;
  letter-spacing: .01em;
}
#header .elementor-location-header > .e-con:first-child .elementor-heading-title a:hover { color: var(--sc-brand); }

/* selettore di lingua a bandierine: le bandiere erano attaccate al testo */
.gtranslate_wrapper { display: flex; align-items: center; gap: .1rem; }
.gtranslate_wrapper a,
.gtranslate_wrapper .gt_switcher a { padding: .35rem .3rem; border-radius: 6px; }
.gtranslate_wrapper a:hover { background: var(--sc-brand-velo); }

/* ---- menu principale ------------------------------------------------------
   ATTENZIONE, TRAPPOLA COSTATA UN GUASTO: la classe
   .elementor-nav-menu--main non identifica il menu dell'intestazione. Elementor
   la mette su OGNI widget menu, compresi i tre elenchi del piede di pagina.
   Scrivendo il colore scuro senza limitarlo a #header ho reso i link del piede
   inchiostro su blu notte, cioe' illeggibili. Da qui in poi ogni regola di
   questa sezione parte da #header. */
#header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
  position: relative;
  font-weight: 650;
  letter-spacing: .015em;
  color: var(--sc-ink) !important;
  transition: color var(--sc-veloce) var(--sc-curva);
}
#header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item::after {
  content: "";
  position: absolute; left: 50%; bottom: .35em;
  width: 0; height: 2px; border-radius: 2px;
  background: var(--sc-brand);
  transform: translateX(-50%);
  transition: width var(--sc-medio) var(--sc-curva);
}
#header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover::after,
#header .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a.elementor-item::after,
#header .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item::after {
  width: calc(100% - .8em);
}
#header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover { color: var(--sc-brand) !important; }

/* tendine: erano rettangoli piatti attaccati al menu (solo intestazione) */
#header .elementor-nav-menu--dropdown,
#header .elementor-nav-menu--main .elementor-nav-menu--dropdown {
  border-radius: var(--sc-r-m) !important;
  box-shadow: var(--sc-ombra-3) !important;
  border: 1px solid var(--sc-linea-2) !important;
  overflow: hidden;
  padding: .4rem !important;
  background: #fff !important;
}
#header .elementor-nav-menu--dropdown a.elementor-sub-item {
  border-radius: var(--sc-r-s) !important;
  font-weight: 550;
  transition: background-color var(--sc-veloce) var(--sc-curva),
              color var(--sc-veloce) var(--sc-curva),
              padding-left var(--sc-veloce) var(--sc-curva);
}
#header .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
#header .elementor-nav-menu--dropdown a.elementor-sub-item:focus-visible {
  background: var(--sc-brand-velo) !important;
  color: var(--sc-brand-piu-scuro) !important;
  padding-left: 1.5em !important;
}

/* ---- icone utente e carrello -------------------------------------------- */
.elementor-menu-cart__toggle .elementor-button {
  border-radius: var(--sc-r-pillola) !important;
  transition: background-color var(--sc-veloce) var(--sc-curva);
}
.elementor-menu-cart__toggle .elementor-button:hover { background: var(--sc-brand-velo) !important; }
/* il pallino con il numero di articoli: era piccolo e slavato */
.elementor-button-icon-qty {
  background: var(--sc-cremisi) !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--sc-cremisi) 45%, transparent);
}

/* ---------------------------------------------------------------------------
   5. FASCIA DEI TRE VANTAGGI (CUSTOM QUOTE / HANDMADE IN ITALY / NO ROBOTS)
   Era una striscia petrolio alta 63px con tre etichette da 11px: la promessa
   piu' importante del negozio, scritta in caratteri da nota a pie' di pagina.
   Le do' aria, alzo il testo e aggiungo una sfumatura appena percepibile che
   toglie l'effetto "banda di colore piatta".
   ------------------------------------------------------------------------- */
.elementor-element-383965d {
  background-image: linear-gradient(100deg, var(--sc-brand-scuro) 0%, var(--sc-brand) 55%, var(--sc-brand-chiaro) 100%) !important;
  padding-block: clamp(1.1rem, 2vw, 1.7rem) !important;
}
.elementor-element-383965d .elementor-icon-box-title,
.elementor-element-383965d .elementor-heading-title {
  font-size: clamp(.82rem, 1.1vw, 1rem) !important;
  letter-spacing: .1em;
  font-weight: 700;
}
.elementor-element-383965d svg { transition: transform var(--sc-medio) var(--sc-curva); }
.elementor-element-383965d .elementor-widget:hover svg { transform: translateY(-3px) scale(1.06); }

/* la fascia "Let yourself be inspired by our previous projects": testo blu
   notte su petrolio, cioe' due colori scuri uno sull'altro. Porto il testo a
   bianco pieno, che sul petrolio da' 4,9:1 e passa AA. */
.elementor-element-afa4d66 .elementor-heading-title { color: #fff !important; }

/* ---------------------------------------------------------------------------
   6. SCHEDE PRODOTTO NELLE GRIGLIE WOOCOMMERCE (categorie, ricerca, correlati)
   Nota: le schede "OUR BEST SELLER" della home NON sono queste — sono
   contenitori Elementor costruiti a mano e stanno gia' bene. Non le tocco.
   ------------------------------------------------------------------------- */
ul.products, .products.elementor-grid, .elementor-widget-woocommerce-products ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 26vw, 320px), 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.9rem) !important;
  align-items: stretch !important;
}
ul.products::before, ul.products::after { content: none !important; }

ul.products li.product, .products .product, li.product {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: var(--sc-sup);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r-m);
  overflow: hidden;
  box-shadow: var(--sc-ombra-1);
  transition: transform var(--sc-medio) var(--sc-curva),
              box-shadow var(--sc-medio) var(--sc-curva),
              border-color var(--sc-medio) var(--sc-curva);
}
ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--sc-ombra-3);
  border-color: color-mix(in srgb, var(--sc-brand) 32%, transparent);
}

/* area immagine: proporzione fissa, cosi' la griglia non balla mai piu' */
li.product .product-image,
li.product .woocommerce-LoopProduct-link > img,
li.product a > img,
li.product .attachment-woocommerce_thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: linear-gradient(160deg, var(--sc-sup-3) 0%, var(--sc-sup-2) 100%);
  padding: clamp(.6rem, 1.4vw, 1.1rem);
  transition: transform 420ms var(--sc-curva);
}
li.product:hover .woocommerce-LoopProduct-link > img,
li.product:hover a > img { transform: scale(1.045); }

li.product .woocommerce-loop-product__title,
li.product h2, li.product h3 {
  font-size: clamp(1rem, 1.15vw, 1.15rem) !important;
  font-weight: 650;
  color: var(--sc-ink) !important;
  margin: .85rem 1rem .35rem !important;
  line-height: 1.3;
}
li.product .posted_in, li.product .product-category, li.product .category-list {
  font-size: .68rem !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sc-brand) !important;
  font-weight: 700;
  margin: 1rem 1rem 0 !important;
}
li.product .price {
  margin: auto 1rem .35rem !important;    /* auto = spinge in basso, altezze pari */
  color: var(--sc-ink) !important;
  font-weight: 750;
  font-size: clamp(1.35rem, 1.9vw, 1.72rem) !important;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
li.product .price del { opacity: .45; font-weight: 500; font-size: .62em; }
li.product .price ins { text-decoration: none; }
li.product .star-rating { opacity: .85; margin: 0 1rem .5rem !important; }

li.product .button, li.product .add_to_cart_button, li.product a.button {
  display: block;
  margin: .35rem 1rem 1.15rem !important;
  padding: .72rem 1.1rem !important;
  border-radius: var(--sc-r-pillola) !important;
  background: var(--sc-brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-align: center;
  border: 0 !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--sc-brand) 26%, transparent);
  transition: background-color var(--sc-veloce) var(--sc-curva),
              transform var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva);
}
li.product .button:hover, li.product a.button:hover {
  background: var(--sc-brand-scuro) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--sc-brand) 38%, transparent);
}

/* --- schede "OUR BEST SELLER" della home ----------------------------------
   Sono contenitori Elementor costruiti a mano, non schede WooCommerce, e
   stanno gia' bene. L'unico difetto: i titoli hanno lunghezze diverse, quindi
   dentro la stessa riga il pulsante "DISCOVER MORE" finisce a quote diverse e
   la griglia sembra storta.
   Come lo aggancio senza scrivere a mano l'identificativo di ogni scheda (sono
   sei e cambiano se il titolare ne aggiunge una): Elementor scrive su ogni
   contenitore la variabile --flex-direction. Con una interrogazione di stile
   spingo in basso il pulsante SOLO dentro i contenitori in colonna, cioe' le
   schede, e mai dentro le barre orizzontali (intestazione, piede).
   Dove il browser non conosce le interrogazioni di stile non succede nulla:
   resta il comportamento di oggi. */
@container style(--flex-direction: column) {
  .e-con.e-flex > .elementor-widget-button:last-child { margin-top: auto; }
}

/* ---------------------------------------------------------------------------
   7. PULSANTI GENERALI
   ------------------------------------------------------------------------- */
.elementor-button, .button, button.button, input[type="submit"], .wp-element-button {
  border-radius: var(--sc-r-pillola) !important;
  font-weight: 650;
  letter-spacing: .02em;
  transition: transform var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva) !important;
}
.elementor-button:hover, .button:hover, input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--sc-ombra-2);
}
.elementor-button:active, .button:active { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   8. CAMPI DI TESTO — anche il modulo contatti e il checkout
   ------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], select, textarea,
.wpcf7 input, .wpcf7 textarea {
  border: 1.5px solid var(--sc-linea) !important;
  border-radius: var(--sc-r-s) !important;
  padding: .7rem .9rem !important;
  font-size: 16px !important;   /* 16px evita lo zoom automatico su iPhone */
  color: var(--sc-ink);
  background: var(--sc-sup);
  transition: border-color var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--sc-brand) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc-brand) 15%, transparent) !important;
  outline: none !important;
}

/* ===========================================================================
   9. IL CONFIGURATORE (plugin woo-custom-product-addons-pro, classi wcpa_)
   ---------------------------------------------------------------------------
   E' il pezzo dove si decide l'acquisto: 10 gruppi di scelte, 4.000 pixel di
   scorrimento, e prima di oggi erano tutti identici — etichetta grigia da 13px,
   una fila di miniature senza cornice, una riga sottile a dividere.
   Chi configura non sa mai a che punto e' ne' cosa ha gia' scelto.

   Le tre mosse, in ordine di importanza:
     a) ogni gruppo diventa una SCHEDA numerata (contatore CSS): da elenco
        indistinto a percorso a passi;
     b) le miniature diventano PIASTRELLE con proporzione fissa e uno stato
        "scelto" impossibile da fraintendere (cornice petrolio + spunta);
     c) la griglia passa da colonne fisse (wcpa_fl_col-3 / col-4) a colonne
        fluide: si adatta alla larghezza e su telefono non si accartoccia.
   ========================================================================= */
.wcpa_form_outer { counter-reset: sc-passo; }

.wcpa_form_outer .wcpa_row {
  position: relative;
  counter-increment: sc-passo;
  background: var(--sc-sup);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r-l);
  padding: clamp(1.1rem, 2vw, 1.7rem) clamp(1rem, 2vw, 1.7rem) clamp(1rem, 1.8vw, 1.5rem);
  margin-bottom: clamp(.9rem, 1.6vw, 1.4rem);
  box-shadow: var(--sc-ombra-1);
  transition: border-color var(--sc-medio) var(--sc-curva),
              box-shadow var(--sc-medio) var(--sc-curva);
}
.wcpa_form_outer .wcpa_row:hover { box-shadow: var(--sc-ombra-2); }
/* la riga che ha la messa a fuoco dentro si accende: aiuta chi usa la tastiera */
.wcpa_form_outer .wcpa_row:focus-within {
  border-color: color-mix(in srgb, var(--sc-brand) 45%, transparent);
  box-shadow: var(--sc-ombra-2);
}

/* etichetta del gruppo: da 13px grigia a titolo vero, con il numero del passo */
.wcpa_form_outer .wcpa_field_label {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: Lato, sans-serif;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.005em;
  text-transform: none !important;
  color: var(--sc-ink) !important;
  margin-bottom: .9rem !important;
}
.wcpa_form_outer .wcpa_field_label::before {
  content: counter(sc-passo);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.85em; height: 1.85em;
  border-radius: 50%;
  background: var(--sc-brand-tenue);
  color: var(--sc-brand-piu-scuro);
  font-size: .72em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* l'asterisco del campo obbligatorio: era un puntino rosso appiccicato al testo */
.wcpa_form_outer .wcpa_required_ast {
  color: var(--sc-cremisi) !important;
  font-size: .8em;
  margin-left: .1em;
}
.wcpa_form_outer .wcpa_field_desc {
  color: var(--sc-ink-3) !important;
  font-size: .87rem !important;
  line-height: 1.55;
}

/* --- la griglia delle opzioni: da colonne fisse a colonne fluide ---------- */
.wcpa_form_outer .wcpa_group_field {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: clamp(.6rem, 1.1vw, 1rem) !important;
  align-items: stretch !important;
}
/* i gruppi con pochissime voci (tipo BIANCO/NERO) non devono diventare
   piastrelloni larghi mezza pagina */
.wcpa_form_outer .wcpa_fl_inline .wcpa_group_field {
  grid-template-columns: repeat(auto-fill, minmax(132px, 168px)) !important;
}
/* annullo le larghezze percentuali che il plugin mette sulle singole voci:
   con la griglia sopra non servono piu' e romperebbero l'allineamento */
.wcpa_form_outer .wcpa_group_field > * { width: auto !important; margin: 0 !important; }

/* --- la singola piastrella ------------------------------------------------ */
.wcpa_form_outer .wcpa_image,
.wcpa_form_outer .wcpa_color {
  display: flex !important;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem .5rem .6rem !important;
  border: 1.5px solid var(--sc-linea-2) !important;
  border-radius: var(--sc-r-m) !important;
  background: var(--sc-sup);
  cursor: pointer;
  transition: border-color var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva),
              transform var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva);
}
.wcpa_form_outer .wcpa_image:hover,
.wcpa_form_outer .wcpa_color:hover {
  border-color: color-mix(in srgb, var(--sc-brand) 55%, transparent) !important;
  box-shadow: var(--sc-ombra-2);
  transform: translateY(-2px);
}

/* l'immagine dell'opzione: proporzione fissa, cosi' le piastrelle sono tutte
   uguali anche se i file caricati hanno formati diversi (e ne hanno) */
.wcpa_form_outer .wcpa_img_wrap {
  display: block !important;
  width: 100% !important;
  /* MISURATO, non tirato a indovinare: tutte e 34 le immagini delle opzioni di
     questa scheda sono quadrate (1:1). Con la cornice quadrata combaciano
     perfettamente: nessun ritaglio e nessuna banda grigia ai lati. Con il 4:3
     che avevo messo prima comparivano due pilastri grigi su ogni piastrella. */
  aspect-ratio: 1 / 1;
  /* il plugin impone un'altezza fissa di 100px alla cornice: finche' c'e',
     la proporzione qui sopra viene ignorata e restano le bande grigie ai lati.
     Misurato: cornice 167x100 con dentro un'immagine 150x150. */
  height: auto !important;
  overflow: hidden;
  border-radius: calc(var(--sc-r-m) - 6px);
  background: linear-gradient(160deg, var(--sc-sup-3), var(--sc-sup-2));
  /* filo interno: alcuni campioni (Smooth Cream, Embossed White, i cartoncini
     bianchi) sono quasi bianchi e sparivano sulla piastrella bianca */
  box-shadow: inset 0 0 0 1px rgb(20 24 28 / .08);
}
.wcpa_form_outer .wcpa_img_wrap img {
  width: 100% !important; height: 100% !important;
  /* CONTAIN, non COVER. Provato prima con cover: riempie meglio, ma alcune
     "immagini" sono in realta' scritte (la piastrella NO INTERNAL SHAPE) e il
     ritaglio ne mangiava la prima e l'ultima riga. Meglio un po' di aria
     intorno che un'informazione tagliata. */
  object-fit: contain;
  display: block;
  padding: 2px;
  transition: transform 420ms var(--sc-curva);
}
.wcpa_form_outer .wcpa_image:hover .wcpa_img_wrap img { transform: scale(1.05); }

/* etichetta dell'opzione: era 11px maiuscolo grigio, cioe' illeggibile */
.wcpa_form_outer .wcpa_image_label,
.wcpa_form_outer .wcpa_color_label {
  font-size: .74rem !important;
  line-height: 1.35;
  font-weight: 700 !important;
  /* MAIUSCOLO, a malincuore: i nomi nel database hanno maiuscole a caso
     ("Smooth BOUGANVILLE" accanto a "Smooth Cream"). A tondo l'incoerenza
     salta agli occhi; in maiuscolo si uniforma. Da sistemare nei contenuti,
     poi qui si potra' tornare al tondo, che si legge meglio. */
  text-transform: uppercase !important;
  letter-spacing: .045em;
  color: var(--sc-ink-2) !important;
  padding: 0 .15rem;
}
/* il prezzo dell'opzione diventa una pillola: si legge come "costo aggiuntivo"
   e non come parte del nome del colore */
.wcpa_form_outer .wcpa_option_price {
  display: inline-block;
  margin-left: .35rem;
  padding: .05em .5em;
  border-radius: var(--sc-r-pillola);
  background: var(--sc-sup-3);
  color: var(--sc-ink-3) !important;
  font-size: .92em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- lo stato SCELTO: prima era un filo di bordo, ora non si puo' sbagliare */
.wcpa_form_outer .wcpa_image.selected,
.wcpa_form_outer .wcpa_image.wcpa_selected,
.wcpa_form_outer .wcpa_color.selected,
.wcpa_form_outer .wcpa_color.wcpa_selected,
.wcpa_form_outer .wcpa_image:has(input:checked),
.wcpa_form_outer .wcpa_color:has(input:checked) {
  border-color: var(--sc-brand) !important;
  background: var(--sc-brand-velo) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-brand) 20%, transparent),
              var(--sc-ombra-2) !important;
}
.wcpa_form_outer .wcpa_image:has(input:checked) .wcpa_image_label,
.wcpa_form_outer .wcpa_color:has(input:checked) .wcpa_color_label {
  color: var(--sc-brand-piu-scuro) !important;
  font-weight: 750 !important;
}
/* la spunta del plugin: da segnetto anonimo a bollo petrolio in alto a destra */
.wcpa_form_outer .wcpa_selected_tick {
  background: var(--sc-brand) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--sc-brand) 45%, transparent);
}

/* campioni di colore pieno (Pantone, cover interna): quadrati grandi e netti */
.wcpa_form_outer .wcpa_color_wrap,
.wcpa_form_outer .wcpa_color_bg {
  border-radius: calc(var(--sc-r-m) - 6px) !important;
  aspect-ratio: 1 / 1;
  width: 100% !important;
  box-shadow: inset 0 0 0 1px rgb(20 24 28 / .1);
}
/* i campioni molto chiari sparivano sul fondo bianco: il filo interno li salva.
   wcpa_color_luma_* e' il gettone di luminosita' che il plugin calcola da solo. */
.wcpa_form_outer [class*="wcpa_color_luma_2"] .wcpa_color_bg,
.wcpa_form_outer [class*="wcpa_color_luma_25"] .wcpa_color_bg {
  box-shadow: inset 0 0 0 1px rgb(20 24 28 / .22);
}

/* il menu a tendina delle DIMENSIONI: e' il primo campo, quello che sblocca
   tutto il resto. Merita di sembrare un invito, non un campo di modulo. */
.wcpa_form_outer .wcpa_type_select select {
  width: 100%;
  font-size: 1rem !important;
  font-weight: 600;
  padding: .95rem 1rem !important;
  border-width: 1.5px !important;
  border-color: color-mix(in srgb, var(--sc-brand) 35%, transparent) !important;
  background: var(--sc-brand-velo) !important;
  min-height: 48px;   /* bersaglio da toccare */
}

/* messaggio di errore del campo */
.wcpa_form_outer .wcpa_field_error {
  color: var(--sc-cremisi) !important;
  font-weight: 650;
  font-size: .85rem !important;
}

/* ===========================================================================
   10. MATRICE PREZZI QUANTITA' / DATA DI CONSEGNA (plugin dd_)
   ---------------------------------------------------------------------------
   E' la tabella che decide l'ordine: righe = quantita', colonne = data di
   consegna, celle = prezzo unitario. Prima era grigio su grigio, la cella
   scelta si distingueva appena, e il prezzo pieno barrato aveva lo stesso peso
   del prezzo scontato.
   Qui la tratto come un listino: intestazioni scure, celle-pulsante, la scelta
   in petrolio pieno, il risparmio in cremisi, cifre a larghezza fissa cosi'
   le colonne di numeri sono incolonnate davvero.
   ========================================================================= */
.dd_quantity_table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 6px;
  margin: clamp(1rem, 2vw, 1.6rem) 0;
  font-variant-numeric: tabular-nums;
}
.dd_quantity_table .dd_table_title .dd_col {
  background: var(--sc-navy) !important;
  color: #fff !important;
  border-radius: var(--sc-r-s);
  padding: .7rem 1rem !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .78rem;
}
.dd_quantity_table th .dd_col {
  background: var(--sc-sup-3) !important;
  border-radius: var(--sc-r-s);
  padding: .55rem .4rem !important;
  color: var(--sc-ink) !important;
  font-weight: 700;
  line-height: 1.15;
  transition: background-color var(--sc-veloce) var(--sc-curva),
              color var(--sc-veloce) var(--sc-curva);
}
/* la data: giorno grande, mese piccolo sotto */
.dd_quantity_table th.dd_date .dd_col span:first-child { font-size: 1.15rem; display: block; }
.dd_quantity_table th.dd_date .dd_col span + span {
  display: block;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  font-weight: 650;
}
/* colonna della data scelta e riga della quantita' scelta: petrolio pieno */
.dd_quantity_table th .dd_col.selected,
.dd_quantity_table td.dd_quantity .dd_col.selected {
  background: var(--sc-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--sc-brand) 32%, transparent);
}
.dd_quantity_table th.dd_date .dd_col.selected span + span { color: rgb(255 255 255 / .8); }

.dd_quantity_table td.dd_quantity .dd_col {
  background: var(--sc-sup-3) !important;
  border-radius: var(--sc-r-s);
  padding: .7rem .5rem !important;
  font-weight: 700;
  color: var(--sc-ink) !important;
  text-align: center;
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* le celle di prezzo: sono pulsanti, quindi devono sembrarlo */
.dd_quantity_table td.dd_price .dd_col {
  background: var(--sc-sup-2) !important;
  border: 1.5px solid var(--sc-linea-2);
  border-radius: var(--sc-r-s);
  padding: .55rem .4rem !important;
  min-height: 52px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva),
              transform var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva);
}
.dd_quantity_table td.dd_price .dd_col:hover {
  border-color: color-mix(in srgb, var(--sc-brand) 55%, transparent);
  background: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--sc-ombra-2);
}
.dd_quantity_table td.dd_price .dd_col.selected {
  background: var(--sc-brand-velo) !important;
  border-color: var(--sc-brand) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc-brand) 22%, transparent),
              var(--sc-ombra-2);
}
.dd_quantity_table .dd_price_container {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
/* prezzo pieno: piccolo, barrato, in secondo piano */
.dd_quantity_table .dd_regular_price {
  font-size: .68rem !important;
  color: var(--sc-ink-3) !important;
  text-decoration: line-through;
  opacity: .75;
}
/* prezzo applicato: e' l'informazione, quindi e' il numero grande */
.dd_quantity_table .dd_active_price,
.dd_quantity_table .dd_discount_price {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--sc-ink) !important;
  letter-spacing: -.01em;
}
.dd_quantity_table td.dd_price .dd_col.selected .dd_active_price { color: var(--sc-brand-piu-scuro) !important; }

/* ===========================================================================
   11. RIEPILOGO COSTI E PULSANTE D'ACQUISTO
   ---------------------------------------------------------------------------
   Erano quattro righe azzurrine tutte uguali: TOTAL, ITALY VAT, SHIPPING,
   ESTIMATE. Il numero che il cliente cerca — ESTIMATE, cioe' quanto paga — era
   l'ultimo e il piu' piccolo. Lo trasformo nella riga eroe e chiudo il blocco
   con il pulsante, in modo che prezzo e azione siano un unico oggetto.
   ========================================================================= */
.dd_calculations {
  background: var(--sc-sup-2);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r-l);
  padding: clamp(.9rem, 1.6vw, 1.3rem);
  box-shadow: var(--sc-ombra-1);
  font-variant-numeric: tabular-nums;
}
.dd_calculations .dd_calc_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .35rem;
  background: transparent !important;
  border-bottom: 1px solid var(--sc-linea-2);
}
.dd_calculations .dd_calc_heading {
  color: var(--sc-ink-3) !important;
  font-weight: 650;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dd_calculations .dd_calc_value {
  color: var(--sc-ink) !important;
  font-weight: 700;
  font-size: 1rem;
}
/* l'icona "?" della spedizione: la riga e' un flex a tre elementi
   (voce | icona | importo) e con space-between l'icona finiva a galleggiare
   in mezzo al vuoto, grande 25px e slavata. La rimpicciolisco e la incollo
   alla voce con un margine automatico a destra. */
.dd_calculations .dd_shipping svg {
  width: 16px; height: 16px;
  margin: 0 auto 0 .4rem;
  opacity: .5;
  flex: 0 0 auto;
}

/* la riga che conta */
.dd_calculations .dd_estimate {
  border-bottom: 0;
  margin-top: .35rem;
  padding: .9rem .9rem;
  background: var(--sc-navy) !important;
  border-radius: var(--sc-r-m);
}
.dd_calculations .dd_estimate .dd_calc_heading { color: rgb(255 255 255 / .72) !important; }
.dd_calculations .dd_estimate .dd_calc_value {
  color: #fff !important;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* il pulsante d'acquisto: a piena larghezza, alto abbastanza da colpirlo col
   dito, con l'ombra del blu notte che lo stacca dal fondo chiaro */
button.dd_add_to_cart {
  width: 100%;
  margin-top: 1rem;
  min-height: 56px;
  padding: 1rem 1.5rem !important;
  border: 0 !important;
  border-radius: var(--sc-r-pillola) !important;
  background: var(--sc-navy) !important;
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: var(--sc-ombra-navy);
  cursor: pointer;
  transition: background-color var(--sc-veloce) var(--sc-curva),
              transform var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva);
}
button.dd_add_to_cart:hover {
  background: var(--sc-navy-2) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--sc-navy) 34%, transparent);
}
button.dd_add_to_cart:active { transform: translateY(0); }
button.dd_add_to_cart svg { margin-left: .6rem; vertical-align: middle; }

/* ===========================================================================
   12. COLONNA DI DESTRA — "PROJECT RECAP" / "PROJECT QUOTATION"
   ---------------------------------------------------------------------------
   E' una fisarmonica Elementor con due barre petrolio piene. Il petrolio pieno
   su due barre alte e sottili e' l'elemento piu' gridato della pagina, e serve
   solo a fare da indice. Lo abbasso di tono: scheda bianca con bordo, titolo
   petrolio su velo, voci come elenco di controllo.
   ========================================================================= */
.e-n-accordion .e-n-accordion-item {
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r-m);
  overflow: hidden;
  margin-bottom: .6rem;
  background: #fff;
  box-shadow: var(--sc-ombra-1);
}
.e-n-accordion .e-n-accordion-item-title {
  background: var(--sc-brand-velo) !important;
  border-bottom: 1px solid var(--sc-linea-2);
  padding: .85rem 1.1rem !important;
  min-height: 48px;
  transition: background-color var(--sc-veloce) var(--sc-curva);
}
.e-n-accordion .e-n-accordion-item-title:hover { background: var(--sc-brand-tenue) !important; }
.e-n-accordion .e-n-accordion-item-title-text {
  color: var(--sc-brand-piu-scuro) !important;
  font-weight: 800 !important;
  font-size: .82rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.e-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title { background: var(--sc-brand-tenue) !important; }

/* le voci dell'indice: erano una lista di link da 11px tutti attaccati */
.e-n-accordion .e-con-inner a,
.e-n-accordion .elementor-widget-text-editor a {
  display: block;
  padding: .45rem .2rem;
  border-radius: var(--sc-r-s);
  color: var(--sc-ink-2) !important;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  min-height: 34px;
  transition: color var(--sc-veloce) var(--sc-curva),
              padding-left var(--sc-veloce) var(--sc-curva);
}
.e-n-accordion .e-con-inner a:hover {
  color: var(--sc-brand-piu-scuro) !important;
  padding-left: .7rem;
}

/* la colonna e' appiccicata da Elementor con top:0 in stile inline. Se resta a
   zero finisce SOTTO la striscia di menu appesa: la faccio scendere di --sc-barra.
   L'!important e' obbligatorio: sto scavalcando uno stile in linea. */
@media (min-width: 1025px) {
  .elementor-sticky--active {
    top: calc(var(--sc-barra) + 16px) !important;
  }
}

/* ---------------------------------------------------------------------------
   13. TESTATA DELLA SCHEDA PRODOTTO (titolo, promesse, prezzo di partenza)
   ------------------------------------------------------------------------- */
.single-product .product_title,
.single-product h1.elementor-heading-title {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: -.02em;
}
/* "Starting from € 8.00": il numero e' cremisi, l'etichetta era della stessa
   dimensione del testo corrente. Metto l'etichetta in occhiello e lascio al
   numero tutto il peso. */
.single-product .elementor-widget-heading .elementor-heading-title[style*="220, 14, 67"],
.single-product .elementor-widget-heading h2.elementor-heading-title {
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.single-product .woocommerce-product-gallery__image img,
.single-product .elementor-widget-woocommerce-product-images img { border-radius: var(--sc-r-l); }

/* le due promesse con la spunta ("Various print area", "Custom sizes
   available"): erano due righe grigie perse nel bianco. Diventano etichette. */
.single-product .elementor-icon-list-item {
  align-items: center;
  gap: .2rem;
}
.single-product .elementor-icon-list-text {
  color: var(--sc-ink-2) !important;
  font-weight: 600;
}

/* i due riquadri "HOW TO UPLOAD YOUR FILE" / "CUSTOMIZE YOUR PACKAGING" */
.single-product .elementor-widget-image-box .elementor-image-box-wrapper,
.single-product .elementor-widget-icon-box { border-radius: var(--sc-r-m); overflow: hidden; }

.woocommerce-tabs .tabs li a { font-weight: 650; }

/* ---------------------------------------------------------------------------
   14. CARRELLO E CHECKOUT — dove si guadagna o si perde l'ordine
   ------------------------------------------------------------------------- */
.woocommerce table.shop_table {
  border: 1px solid var(--sc-linea-2) !important;
  border-radius: var(--sc-r-m);
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0;
}
.woocommerce table.shop_table th { background: var(--sc-sup-2); font-weight: 700; color: var(--sc-ink); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: 1rem .9rem !important; }
.cart_totals, .woocommerce-checkout-review-order {
  background: var(--sc-sup-2);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r-l);
  padding: clamp(1rem, 2vw, 1.6rem);
}
.cart_totals .order-total .amount,
.woocommerce-checkout-review-order .order-total .amount {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  color: var(--sc-navy);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* ATTENZIONE: nel carrello il pulsante "PROCEED TO CHECKOUT" NON e' un
   .checkout-button di WooCommerce, e' un <a class="btn btn-v-dark w-100"> del
   tema Porto. Con il solo selettore WooCommerce restava nero squadrato mentre
   il gemello del checkout (#place_order) era gia' blu notte a pillola: due
   pulsanti diversi per lo stesso gesto, a due schermate di distanza.
   Verificato leggendo le classi sulla pagina viva. */
.wc-proceed-to-checkout .btn,
.wc-proceed-to-checkout a.btn-v-dark,
.checkout-button, #place_order {
  width: 100%;
  padding: 1.05rem 1.5rem !important;
  min-height: 56px;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .05em;
  background: var(--sc-navy) !important;
  color: #fff !important;
  box-shadow: var(--sc-ombra-navy);
}
.wc-proceed-to-checkout .btn:hover,
.checkout-button:hover, #place_order:hover {
  background: var(--sc-navy-2) !important;
  transform: translateY(-2px);
}
.wc-proceed-to-checkout .btn { border-radius: var(--sc-r-pillola) !important; }

/* il percorso in tre tappe in cima al carrello: era testo grigio, diventa un
   indicatore di avanzamento leggibile */
.woocommerce-breadcrumb, .cart-steps, .checkout-steps { font-weight: 650; }

/* riquadri del modulo di ordine: raggruppo visivamente i campi */
.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields {
  background: #fff;
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r-l);
  padding: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 1rem;
}
.woocommerce form .form-row label { font-weight: 600; color: var(--sc-ink-2); }
#payment .payment_methods > li {
  background: #fff;
  border: 1px solid var(--sc-linea-2) !important;
  border-radius: var(--sc-r-m);
  margin-bottom: .6rem;
  padding: .8rem 1rem !important;
  transition: border-color var(--sc-veloce) var(--sc-curva);
}
#payment .payment_methods > li:hover { border-color: color-mix(in srgb, var(--sc-brand) 45%, transparent) !important; }

/* ---------------------------------------------------------------------------
   14-bis. CEROTTO: sette link "test" che puntano a google.com
   ---------------------------------------------------------------------------
   Nella home escono in fondo alla pagina sette (otto con quello con href="#")
   ancore <a href="https://google.com">test</a> agganciate direttamente a
   <body>. Vengono stampate nell'hook wp_head, subito dopo le regole di
   speculation di WordPress: quasi certamente sono rimaste in un campo
   "codice personalizzato" del tema o di un plugin.
   QUESTO E' UN CEROTTO, NON LA CURA: vanno cancellate alla fonte. Finche' ci
   sono, le nascondo — un'ancora nuda figlia diretta di <body>, senza classe
   ne' identificativo, non e' mai contenuto legittimo. Resta visibile con la
   messa a fuoco da tastiera, per non nascondere nulla a chi naviga a tab.
   ------------------------------------------------------------------------- */
body > a:not([class]):not([id]):not(:focus-visible) { display: none; }

/* ---------------------------------------------------------------------------
   15. MESSAGGI E AVVISI
   ------------------------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--sc-r-m) !important;
  border: 1px solid var(--sc-linea-2) !important;
  border-left: 4px solid var(--sc-brand) !important;
  background: var(--sc-brand-velo) !important;
  box-shadow: var(--sc-ombra-1);
  color: var(--sc-ink) !important;
}
.woocommerce-error { border-left-color: var(--sc-cremisi) !important; background: #FDF3F2 !important; }

/* ---------------------------------------------------------------------------
   16. COMPARSA MORBIDA ALLO SCORRIMENTO
   Usa le animazioni legate allo scorrimento (CSS puro, zero JavaScript).
   Dove il browser non le supporta non succede nulla: il contenuto e' visibile.
   NON la applico alle righe del configuratore: li' l'utente scorre avanti e
   indietro fra le scelte e vederle apparire ogni volta stanca.
   ------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    ul.products li.product,
    .elementor-widget-image-box,
    .elementor-widget-icon-box {
      animation: sc-entra linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes sc-entra {
      from { opacity: 0; transform: translateY(22px) scale(.985); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ---------------------------------------------------------------------------
   17. PIE DI PAGINA
   Colonna petrolio a sinistra, corpo blu notte: la struttura e' buona, mancava
   la gerarchia. Titoli in occhiello, link con bersaglio grande.
   ------------------------------------------------------------------------- */
.footer, footer.footer { border-top: 1px solid var(--sc-linea-2); }
.elementor-location-footer .elementor-heading-title {
  letter-spacing: .1em;
  font-size: .82rem;
  font-weight: 800;
  opacity: .95;
}
/* il corpo del piede e' blu notte: i link DEVONO essere chiari. Lo scrivo qui
   in modo esplicito invece di darlo per scontato — e' esattamente il punto in
   cui mi si e' rotto una volta. Bianco all'88% su #1C1F3E fa 13:1. */
.elementor-location-footer .elementor-nav-menu a.elementor-item,
.elementor-location-footer .elementor-icon-list-text {
  color: rgb(255 255 255 / .88) !important;
  transition: color var(--sc-veloce) var(--sc-curva),
              padding-left var(--sc-veloce) var(--sc-curva);
}
.elementor-location-footer .elementor-nav-menu a.elementor-item:hover {
  color: var(--sc-brand-chiaro) !important;
  padding-left: .35rem;
}

/* ---------------------------------------------------------------------------
   18. TELEFONO — il tocco prima di tutto (provato a 390px)
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* niente intestazione appiccicata parziale sotto i 1025px: su telefono
     l'intestazione ha un'altra composizione e il calcolo non torna */
  .header-wrapper { position: static; }
  .elementor-sticky--active { top: 0 !important; }
}

@media (max-width: 767px) {
  :root { --sc-sp-6: 3rem; }

  ul.products, .products.elementor-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: .8rem !important;
  }
  li.product .price { font-size: 1.2rem !important; }
  li.product .button { font-size: .72rem !important; padding: .62rem .8rem !important; }

  /* ogni bersaglio da toccare almeno 44px, come chiede la linea guida */
  .elementor-nav-menu a.elementor-item,
  .elementor-nav-menu a.elementor-sub-item,
  .elementor-location-footer .elementor-nav-menu a.elementor-item {
    min-height: 44px; display: flex; align-items: center;
  }

  /* configuratore: schede piu' strette, tre piastrelle per riga */
  .wcpa_form_outer .wcpa_row {
    padding: 1rem .85rem;
    border-radius: var(--sc-r-m);
  }
  .wcpa_form_outer .wcpa_group_field {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
    gap: .55rem !important;
  }
  .wcpa_form_outer .wcpa_fl_inline .wcpa_group_field {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
  }
  .wcpa_form_outer .wcpa_image_label,
  .wcpa_form_outer .wcpa_color_label { font-size: .7rem !important; }
  .wcpa_form_outer .wcpa_field_label { font-size: 1rem !important; }

  /* MATRICE PREZZI: a 390px non ci sta. Invece di stringere le celle fino a
     renderle illeggibili, la faccio scorrere in orizzontale dentro il suo
     contenitore, con la colonna delle quantita' bloccata a sinistra: cosi' si
     sa sempre a quale quantita' appartiene il prezzo che si sta guardando. */
  .dd_quantity_table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-spacing: 4px;
    padding-bottom: .4rem;
  }
  .dd_quantity_table td.dd_quantity,
  .dd_quantity_table th.dd_quantity_title {
    position: sticky; left: 0; z-index: 2;
    background: #fff;
  }
  .dd_quantity_table td.dd_price .dd_col { min-width: 84px; min-height: 56px; }
  .dd_quantity_table .dd_active_price { font-size: .98rem !important; }

  /* GUASTO TROVATO E CORRETTO (23/08, provato a 390px):
     il riepilogo costi e il pulsante ADD TO CART stanno DENTRO una cella della
     stessa tabella. Rendendo la tabella scorrevole in orizzontale finivano
     anche loro nel nastro che scorre: su telefono meta' del pulsante d'acquisto
     restava fuori dallo schermo e per premerlo bisognava trascinare di lato.
     Il pulsante che chiude la vendita non si trascina.
     Rimedio: la riga che contiene i totali esce dal comportamento tabellare
     (display:block) e si ancora a sinistra, quindi resta larga quanto lo
     schermo e ferma mentre le colonne delle date scorrono dietro. */
  /* anche il gruppo che la contiene deve uscire dalla tabella, altrimenti la
     riga eredita la larghezza delle colonne (misurato: 248px invece di 350) */
  .dd_quantity_table tfoot:has(.dd_calculations) { display: block; }
  .dd_quantity_table tr:has(.dd_calculations) {
    display: block;
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
  }
  .dd_quantity_table tr:has(.dd_calculations) > td,
  .dd_quantity_table tr:has(.dd_calculations) > td > .dd_col {
    display: block;
    width: auto;
    padding: 0 !important;
  }

  /* riepilogo costi e pulsante */
  .dd_calculations { padding: .85rem; border-radius: var(--sc-r-m); }
  .dd_calculations .dd_estimate .dd_calc_value { font-size: 1.4rem; }
  button.dd_add_to_cart { font-size: .88rem !important; letter-spacing: .04em; }

  /* le fasce a tutta larghezza avevano il testo appiccicato ai bordi */
  .elementor-element-afa4d66 .elementor-heading-title,
  .elementor-element-383965d .elementor-heading-title { padding-inline: .6rem; }
}

/* ---------------------------------------------------------------------------
   19. STAMPA — un preventivo stampato non deve sprecare inchiostro
   ------------------------------------------------------------------------- */
@media print {
  .header-wrapper, .footer, .rev_slider, rs-module-wrap, #tawkchat-container { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .wcpa_form_outer .wcpa_row { break-inside: avoid; box-shadow: none; }
}