/* =============================================================================
   scatole.com — DIREZIONE "BIANCO CANDIDO" · 01 BASE
   -----------------------------------------------------------------------------
   RISCRITTO DA CAPO il 23/08/2026. Il file precedente era nato per la direzione
   SCURA e poi travasato al bianco cambiando solo la tavolozza: funzionava, ma
   dentro restavano impianti da fondo notte. Riscrivendolo sono venuti fuori
   sette guasti veri, tutti misurati, elencati qui sotto.

   AMBITO
   tipografia di base · intestazione (logo, menu, tendine, cassetto carrello,
   ricerca, pannello laterale del telefono) · cucitura dell'eroe · fascia
   vantaggi · home · pagine categoria · pagine di contenuto (about-us, faq,
   get-in-touch, privacy, termini) · pie' di pagina.

   NON e' mio, e qui NON si tocca:
     · 00-fondamenta.css  — i gettoni. Se ne manca uno si segnala, non si inventa.
     · 02-prodotto.css / 03-negozio.css — altri due agenti.
     · 04-rifiniture.css  — LA BARRA SUPERIORE (lingue, campione, email, FAQ),
       LE ICONE DELLE VOCI DI MENU e L'EROE `.sc-eroe` sono suoi e carica DOPO
       di me. Nel foglio vecchio io ridipingevo la barra superiore
       (`elementor-element-0c0c549`) e il selettore di lingua: quelle regole
       sono state CANCELLATE, non riscritte — vedi guasto 5.

   -----------------------------------------------------------------------------
   I SETTE GUASTI LASCIATI DAL TRAVASO (misurati, non a occhio)

   1. PIASTRELLE NERE SOTTO LE FOTO DI CATEGORIA.
      `li.product .product-image { background-color: var(--sc-ink) }`, con
      accanto il commento "--sc-ink e' il gettone bianco di 00-fondamenta".
      Era vero sulla tavolozza scura (inchiostro chiaro su fondo notte);
      su bianco `--sc-ink` vale #0F1115. Misurato dal vivo: rgb(15,17,21).
      Le foto lo coprono quasi sempre, quindi non si vedeva — finche' una
      miniatura non riempie la piastrella.
   2. STRISCIA DEI LOGHI BANDI NERA. Stessa causa, stesso gettone, sul piede
      (`elementor-element-b149e2e`). Li' pero' si vedeva benissimo: una banda
      nera sotto un piede chiaro. I loghi istituzionali sono per il 96%
      trasparenti con inchiostro scuro (contati sui pixel del PNG): stanno
      benissimo sulla carta, la banda nera non serviva a niente.
   3. INDIRIZZO AZIENDALE INVISIBILE NEL PIEDE — 1,12:1.
      `elementor-element-b0188f3` aveva fondo `--sc-mar-scuro` (#1A555E) con
      il testo `--sc-ink-2` (#3F4750): due scuri uno sull'altro. Sulla
      tavolozza notte quel fondo era un rilievo chiaro. E' il gemello del
      guasto 1,43:1 trovato dal collega su 02.
   4. RIQUADRO "NEW TO SCATOLE.COM?" — 2,25:1 il titolo, 1,12:1 il sottotitolo.
      Stessa ricetta: fondo `--sc-mar-scuro`, testo `--sc-ink`.
   5. IL SELETTORE DI LINGUA SPENTO — 1,39:1. La sigla attiva ("EN") sta in
      uno <span> dentro l'ancora. 04 colora l'ancora di bianco su pastiglia
      petrolio; il mio vecchio `#header .gtranslate_wrapper span` colpiva lo
      SPAN, quindi vinceva sul figlio e riportava il grigio. Non era 04 a
      sbagliare: ero io a passargli sopra. Regola cancellata.
   6. IL PULSANTE DELL'EROE ILLEGGIBILE — 1,49:1. "Configure a box" e' un
      `<a class="sc-eroe__cta">` dentro `#main`. Il mio `#main a { color:
      var(--sc-mar-vivo) }` (1-0-1) batteva `.sc-eroe__cta` (0-1-0) e
      dipingeva petrolio su petrolio. Ora il colore dei collegamenti vale
      SOLO dentro il testo corrente — vedi sezione 4.
   7. TESTO BIANCO FORZATO A NERO SOPRA UNA FOTOGRAFIA SCURA (about-us).
      `#main h1..h6 { color: var(--sc-ink) }` vince su Elementor per la sola
      presenza dell'id, e su "Great BRANDS deserve great PACKAGING!" —
      scritta bianca voluta sopra una foto in bianco e nero — la riportava a
      nero. Non lo vede nessuno strumento di contrasto, perche' il fondo e'
      un'immagine: si vede solo guardando. Trovato spegnendo questo foglio
      dal vivo e confrontando i colori prima/dopo.

   Altri due difetti veri, piu' piccoli, corretti qui:
     · menu del pannello laterale del telefono BIANCO SU BIANCO (1,03:1):
       il tema scrive `#side-nav-panel .accordion-menu li.menu-item > a`
       (1-2-2), la mia regola era 1-1-1 e perdeva;
     · doppia freccia sui <select> dei moduli: Elementor disegna sia
       `.select-caret-down-wrapper i` sia `.elementor-select-wrapper::before`.

   -----------------------------------------------------------------------------
   LA DIREZIONE, IN UNA RIGA
   La luce fa il lavoro che sul fondo scuro facevano i bordi. Dove c'era una
   linea, adesso c'e' un'ombra a strati o un cambio di piano appena percettibile
   (bianco -> `--sc-carta` -> `--sc-incasso`). Angoli 12px, respiro largo,
   petrolio come unico colore.
   Conseguenza pratica: in tutto il foglio i `border:` sono quasi spariti e al
   loro posto ci sono `--sc-ombra-1/2/3`. I riquadri "disegnati con due linee"
   della direzione scura non esistono piu'.

   NIENTE MAIUSCOLO A TAPPETO. Il foglio vecchio metteva
   `text-transform: uppercase` su OGNI titolo: era la targhetta incisa
   dell'officina. Su get-in-touch quel maiuscolo trasformava tre paragrafi
   (scritti in minuscolo nel database, e resi come titoli da Elementor) in
   tre urla a tutta pagina. Il maiuscolo resta SOLO dove e' un segnale:
   etichette monospaziate, bottoni, titoli di colonna. I titoli veri si
   leggono come sono stati scritti — "Lid & Base Box", non "LID & BASE BOX".

   -----------------------------------------------------------------------------
   COME VINCO LA CASCATA
   Elementor scrive `.elementor-2364 .elementor-element.elementor-element-xxx`
   (0-3-0). Le mie regole partono da `#header`, `#main` o `#footer`: 1-x-0
   batte 0-3-0 per la sola presenza dell'id. In tutto il foglio non c'e' UN
   SOLO `!important`. Se qualcosa non prende, la cura e' aggiungere l'id
   davanti, non la scorciatoia.

   IDENTIFICATIVI ELEMENTOR: NE HO TOLTI 40.
   Il foglio vecchio elencava a mano i sei piani immagine, i sei corpi scheda,
   le sei etichette, i sei nomi e i sei prezzi della home: 40 sigle esadecimali
   che si rompono tutte se qualcuno rifa' un widget nel costruttore. Verificato
   dal vivo che i selettori STRUTTURALI danno esattamente gli stessi sei
   elementi (`:has(> .elementor-widget-image)`, `> .elementor-widget-heading
   :nth-child(n)`), e ho tenuto la sigla solo dove la struttura non basta a
   distinguere. Meno righe, e sopravvive a una modifica in Elementor.

   LA TRAPPOLA DEL MENU (gia' costata cara una volta)
   `.elementor-nav-menu--main` sta su OGNI widget menu, compresi i TRE elenchi
   del pie'. Ogni regola di colore sul menu parte da `#header` oppure da
   `#footer`, mai da sola.

   LE DUE VITE DELLE IMMAGINI
   a) DISEGNI A TRATTO (home "OUR BEST SELLER"): PNG trasparenti con la scatola
      riempita di bianco e il filo scuro. Su bianco sono gia' giusti: nessun
      filtro (sul fondo notte andavano invertiti).
   b) FOTOGRAFIE VERE (categorie, Instagram, loghi): mai un filtro, falserebbe
      i colori della carta. Le monto su un piano dichiarato, non su un buco.
   Unica eccezione: il logo del pie' — vedi sezione 12.
   ========================================================================== */


/* =============================================================================
   1 · GETTONI ICONA — le forme, dichiarate una volta sola
   -----------------------------------------------------------------------------
   Tecnica della casa: `mask-image` e non `background-image`. L'SVG fa solo da
   sagoma e il colore arriva da `background-color: currentColor`, quindi
   l'icona segue il testo in ogni stato (passaggio del mouse, voce attiva,
   messa a fuoco) senza una riga in piu'.
   Dichiarati qui come gettoni cosi' il data URI non va ripetuto due volte
   (per la proprieta' prefissata e per quella standard) in ogni punto d'uso.

   ATTENZIONE, TRAPPOLA GIA' PAGATA: `content: ""` non va MAI messo in un
   blocco che descrive una meccanica comune su un selettore largo — ogni
   elemento che ci finisce dentro si becca un quadratino pieno di
   currentColor. Qui il blocco comune (sezione 1b) ELENCA i pochi selettori
   esatti che devono avere l'icona: nessun altro puo' cascarci dentro.
   ========================================================================== */

:root {
  /* chevron in giu': fisarmonica FAQ, freccia dei <select> */
  --sci-giu: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");

  /* freccia a destra: "scopri di piu'", scorre al passaggio del mouse */
  --sci-avanti: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14.5M12.5 5.8 19.2 12l-6.7 6.2'/%3E%3C/svg%3E");

  /* spunta: la categoria in cui ci si trova, nella colonna dei filtri */
  --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.6 5 5.2L19.5 6.4'/%3E%3C/svg%3E");

  /* Il logo del pie'. NON e' decorazione: e' un file che esiste gia' sul
     server ed e' interamente `fill:#FFFFFF` (verificato nel sorgente SVG).
     Su carta sparirebbe. Uso la sua sagoma come maschera per ridipingerlo
     con un gettone invece di inseguirlo con catene di `filter:`. */
  --sci-logo-piede: url("/wp-content/uploads/2024/07/logo_footer2.svg");
}


/* -----------------------------------------------------------------------------
   1b · LA MECCANICA COMUNE DELLE ICONE
   Elenco chiuso di selettori: qui `content: ""` e' sicuro perche' non c'e'
   nessun elemento "di passaggio" che possa finirci dentro.
   -------------------------------------------------------------------------- */
body.page-id-3898 #main .e-n-accordion-item-title::after,
body.page:not(.home):not(.woocommerce-page) #main .select-caret-down-wrapper::after,
body.home #main .elementor-element-c817df9 .elementor-widget-button .elementor-button::after,
body.tax-product_cat #main .product-categories li.current-cat > a::before,
body.post-type-archive-product #main .product-categories li.current-cat > a::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/* =============================================================================
   2 · IL TAVOLO — il terreno
   -----------------------------------------------------------------------------
   Il reticolo da tavolo da disegno era della direzione scura. 00-fondamenta lo
   tiene dichiarato come `none` per non rompere i fogli che lo richiamano: io
   NON lo richiamo piu' affatto, cosi' spariscono anche `background-size` e
   `background-position` che restavano appesi a un'immagine inesistente.
   ========================================================================== */

html {
  /* Le tendine native (<select>, calendario, barre di scorrimento) chiedono al
     sistema di che colore sono. Senza questa riga, chi ha il sistema in tema
     scuro vede tendine nere aprirsi su una pagina bianca. 03-negozio dichiara
     ancora `color-scheme: dark` sulle sue quattro pagine: e' un residuo del
     travaso, segnalato al suo proprietario, e non lo tocco da qui. */
  color-scheme: light;
}

body {
  background-color: var(--sc-fondo);
  color: var(--sc-ink-2);
  font-family: var(--sc-testo);
  font-size: var(--sc-t-p);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.page-wrapper,
.header-wrapper,
.footer-wrapper,
#main,
#main > .container-fluid,
#main .main-content-wrap,
#main .main-content {
  background-color: transparent;
}

#main { background-color: var(--sc-fondo); }

/* Matita sul foglio: il velo del marchio, non il pieno. Sul pieno petrolio la
   selezione diventava una macchia che copriva il testo. */
::selection { background: var(--sc-mar-velo); color: var(--sc-ink); }


/* =============================================================================
   3 · TIPOGRAFIA DI BASE
   Titoli Lato 900, corpo Poppins, dati e etichette in monospaziato.
   Nessun maiuscolo forzato: vedi il cappello del file.
   ========================================================================== */

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6,
#main .elementor-heading-title,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
  font-family: var(--sc-disp);
  font-weight: 900;
  color: var(--sc-ink);
  line-height: 1.1;
  text-transform: none;
}

#main h1, #main .elementor-widget-heading h1.elementor-heading-title {
  font-size: var(--sc-t-h1);
  letter-spacing: -.025em;
  line-height: 1.04;
  text-wrap: balance;
}
#main h2, #main .elementor-widget-heading h2.elementor-heading-title {
  font-size: var(--sc-t-h2);
  letter-spacing: -.018em;
  text-wrap: balance;
}
#main h3, #main .elementor-widget-heading h3.elementor-heading-title {
  font-size: var(--sc-t-h3);
  letter-spacing: -.008em;
}

#main p,
#main .elementor-widget-text-editor,
#main .elementor-widget-text-editor p {
  color: var(--sc-ink-2);
  font-family: var(--sc-testo);
  font-size: var(--sc-t-p);
  line-height: 1.7;
}

#main strong, #main b { color: var(--sc-ink); font-weight: 700; }

/* I fili orizzontali: appena percettibili, altrimenti su bianco incupiscono. */
#main hr,
#main .elementor-divider-separator {
  border-top-color: var(--sc-linea);
  border-color: var(--sc-linea);
}

/* -----------------------------------------------------------------------------
   L'ETICHETTA TECNICA
   Monospaziata, maiuscola, spaziata: e' l'unico posto dove il maiuscolo resta,
   perche' li' non e' un titolo ma un cartellino. Vale per la categoria di una
   scheda, "Starting from", i titoli di colonna del pie'.
   -------------------------------------------------------------------------- */
#main .sc-etichetta,
#footer .sc-etichetta {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 400;
}


/* =============================================================================
   4 · COLLEGAMENTI — solo dentro il testo corrente
   -----------------------------------------------------------------------------
   GUASTO 6. Il foglio vecchio diceva `#main a { color: ... }`. Con l'id
   davanti quella regola vale 1-0-1 e batte QUALSIASI classe: ha ridipinto di
   petrolio anche il pulsante bianco dell'eroe di 04 (petrolio su petrolio,
   1,49:1) e avrebbe fatto lo stesso con ogni bottone futuro.
   Un collegamento va colorato dove e' davvero un collegamento in mezzo a
   delle parole. Qui l'elenco e' esplicito e non tocca ne' bottoni ne' schede.
   ========================================================================== */

#main :is(p, dd, td, figcaption, blockquote) a,
#main .elementor-widget-text-editor a,
#main .elementor-widget-text-editor li a {
  color: var(--sc-mar-testo);          /* 5,88:1 su bianco */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--sc-mar-testo) 38%, transparent);
  transition: color var(--sc-veloce) var(--sc-curva),
              text-decoration-color var(--sc-veloce) var(--sc-curva);
}
#main :is(p, dd, td, figcaption, blockquote) a:hover,
#main .elementor-widget-text-editor a:hover {
  color: var(--sc-ink);
  text-decoration-color: currentColor;
}


/* =============================================================================
   5 · BOTTONI — un solo linguaggio in tutto il sito
   -----------------------------------------------------------------------------
   IL PIENO PETROLIO NON SI USA SOTTO UN BOTTONE.
   `--sc-mar` (#2F8C98) col testo bianco fa 3,94:1: passa solo sotto testo
   grande e grassetto (soglia 3:1), e l'etichetta di un bottone qui e' di
   11px. Il fondo dei bottoni e' quindi `--sc-mar-vivo` (#226E78), che col
   bianco fa 5,88:1. Il gettone `--sc-mar-pieno-ok-da: 19px` di 00-fondamenta
   dice esattamente questo.

   IL SOLLEVAMENTO SI ANIMA CON `transform` E `opacity`, MAI CON L'OMBRA.
   Animare `box-shadow` costringe il browser a ridipingere l'ombra a ogni
   fotogramma. L'ombra piu' alta sta ferma su un `::after` sovrapposto e a
   muoversi e' solo la sua `opacity`: stesso effetto, nessun ridisegno.
   ========================================================================== */

#main .elementor-button,
#main .button,
#main button[type="submit"],
#main input[type="submit"],
#main .sib-default-btn,
#footer .elementor-button {
  position: relative;
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--sc-r);
  border: 0;
  background-color: var(--sc-mar-vivo);
  color: var(--sc-fondo);
  padding: var(--sc-s3) var(--sc-s5);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-s2);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sc-ombra-1);
  transition: background-color var(--sc-veloce) var(--sc-curva),
              transform var(--sc-veloce) var(--sc-curva);
}
#main .elementor-button:hover,
#main .button:hover,
#main button[type="submit"]:hover,
#main input[type="submit"]:hover,
#main .sib-default-btn:hover,
#footer .elementor-button:hover {
  background-color: var(--sc-mar-scuro);   /* bianco sopra: 8,38:1 */
  color: var(--sc-fondo);
  transform: translateY(-1px);
}
#main .elementor-button:active,
#main .button:active { transform: translateY(0); }

#main .elementor-button .elementor-button-text,
#footer .elementor-button .elementor-button-text { color: inherit; }

#main .elementor-button svg,
#footer .elementor-button svg { fill: currentColor; width: 1em; height: 1em; }

/* Bottone di contorno: seconda scelta, non deve rubare la scena. */
#main .sc-bottone-vuoto,
#main .elementor-button.elementor-button-link.elementor-size-sm.sc-bottone-vuoto {
  background-color: transparent;
  color: var(--sc-ink);
  box-shadow: inset 0 0 0 1px var(--sc-linea-2);
}
#main .sc-bottone-vuoto:hover {
  background-color: var(--sc-mar-velo);
  color: var(--sc-mar-testo);
  box-shadow: inset 0 0 0 1px var(--sc-mar);
}

/* caselle di spunta e scelte */
#main input[type="checkbox"],
#main input[type="radio"] {
  accent-color: var(--sc-mar-vivo);
  width: 18px;
  height: 18px;
}


/* =============================================================================
   6 · INTESTAZIONE
   -----------------------------------------------------------------------------
   LA BARRA SUPERIORE E' DI 04 e non compare qui. L'unica eccezione e' il
   separatore "|" fra email e pulsante FAQ, che 04 non tocca: vedi 6a.

   L'ALTEZZA. Misurata 154px dal vivo (era 222px prima di tutto il lavoro):
   la tengo li'. Le tre fasce si comprimono con soli riempimenti e altezza
   del logo, senza spostare niente.
   ========================================================================== */

#header {
  background-color: var(--sc-fondo);
  /* Sul fondo scuro l'intestazione era staccata da un filo. Su bianco basta
     un cambio di piano piu' un'ombra bassissima: si sente il bordo senza
     vedere la riga. */
  border-bottom: 1px solid var(--sc-linea);
  box-shadow: var(--sc-ombra-1);
  position: relative;
  z-index: 20;
}

/* -----------------------------------------------------------------------------
   6a · Il separatore "|" della barra superiore  (1,27:1 nel foglio vecchio)
   E' un widget titolo che contiene un solo carattere "|" usato come riga
   verticale. Qualunque grigio gli si dia e' un TESTO sotto soglia: se lo
   scurisco per farlo passare, diventa una sbarra nera in mezzo alla barra.
   Lo tolgo dal rendering (font-size 0) e ridisegno il filo che voleva essere.
   NB: e' l'unico pezzo di barra superiore che tocco, perche' 04 non lo copre.
   -------------------------------------------------------------------------- */
#header .elementor-element-28631b7 .elementor-heading-title {
  font-size: 0;
  line-height: 0;
  display: flex;
  align-items: center;
}
#header .elementor-element-28631b7 .elementor-heading-title::after {
  content: "";
  display: block;
  width: 1px;
  height: 14px;
  background-color: var(--sc-linea-2);
}

/* --- le tre fasce: riempimenti misurati ---------------------------------- */
#header .elementor-element-4defddd { padding-block: var(--sc-s2); }
#header .elementor-element-7b3b604,
#header .elementor-element-7b3b604 > .e-con-inner { padding-block: 0; }
#header .elementor-element-7b3b604 > .e-con-inner { gap: var(--sc-s1); }
#header .elementor-element-c26eec4 { padding-block: 0; }

/* --- il logo -------------------------------------------------------------
   Su BIANCO CANDIDO e' gia' giusto com'e' nato (testo #111830, marchio
   #2f8c98, verificati nel sorgente SVG): nessun filtro. Sul fondo notte
   andava invertito, ed e' la riga che avrebbe continuato a trasformarlo in
   una sagoma nera se il travaso non l'avesse spenta. */
#header .elementor-element-3965cda img {
  max-height: 44px;
  width: auto;
}
#header .elementor-element-a0ea9a1 img { max-height: 36px; width: auto; }

/* -----------------------------------------------------------------------------
   6b · IL MENU PRINCIPALE
   Le voci diventano pastiglie: passaggio del mouse = cambio di piano, voce
   attiva = velo petrolio. Niente sottolineature disegnate a mano, che erano
   il modo della direzione scura di dire "sono qui".

   Convivenza con 04: 04 mette un'icona in `::before` su ogni voce, e per
   farlo deve rimettere `position: static` (il tema la forza in assoluto).
   L'ancora deve quindi restare `display: flex`, ed e' quello che faccio qui.
   -------------------------------------------------------------------------- */
#header .elementor-nav-menu--main .elementor-item {
  display: flex;
  align-items: center;
  font-family: var(--sc-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sc-ink-2);              /* 9,42:1 su bianco */
  padding: var(--sc-s2) var(--sc-s3);
  min-height: 38px;
  border-radius: 999px;
  border: 0;
  background-color: transparent;
  fill: currentColor;
  transition: color var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva);
}
#header .elementor-nav-menu--main .elementor-item:hover,
#header .elementor-nav-menu--main .elementor-item:focus-visible {
  color: var(--sc-ink);
  background-color: var(--sc-incasso);
}
#header .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--sc-mar-testo);          /* 5,21:1 sul velo petrolio */
  background-color: var(--sc-mar-velo);
}
#header .elementor-nav-menu--main .sub-arrow,
#header .elementor-nav-menu--main .sub-arrow i { color: inherit; opacity: .6; }

/* --- le tendine: un foglio che si stacca dal piano ------------------------ */
#header .elementor-nav-menu--main .sub-menu,
#header .elementor-nav-menu--main .elementor-nav-menu--dropdown {
  background-color: var(--sc-fondo);
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-2);
  padding-block: var(--sc-s2);
  overflow: hidden;
}
#header .elementor-nav-menu--main .sub-menu .elementor-sub-item {
  font-family: var(--sc-testo);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-ink-2);
  padding: var(--sc-s2) var(--sc-s4);
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: 0;
  transition: color var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva);
}
#header .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover,
#header .elementor-nav-menu--main .sub-menu .elementor-sub-item:focus-visible {
  color: var(--sc-mar-testo);
  background-color: var(--sc-mar-velo);
}

/* -----------------------------------------------------------------------------
   6c · IL MENU A TENDINA DEL TELEFONO
   E' un elenco diverso da quello orizzontale. Senza queste righe la voce
   attiva arriva con una campitura petrolio piena e testo bianco: 3,94:1,
   sotto soglia. Qui la voce attiva e' un velo, non una campitura.
   -------------------------------------------------------------------------- */
#header nav.elementor-nav-menu--dropdown .elementor-item {
  font-family: var(--sc-testo);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--sc-ink-2);
  background-color: transparent;
  min-height: 48px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0;
}
#header nav.elementor-nav-menu--dropdown .elementor-item:hover,
#header nav.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
#header nav.elementor-nav-menu--dropdown .elementor-item.highlighted {
  color: var(--sc-mar-testo);
  background-color: var(--sc-mar-velo);
}

/* filo di chiusura sotto il menu */
#header .elementor-element-c26eec4 .elementor-divider-separator { border-top-color: var(--sc-linea); }

/* -----------------------------------------------------------------------------
   6d · ICONE UTENTE E CARRELLO
   -------------------------------------------------------------------------- */
#header .elementor-icon,
#header .elementor-menu-cart__toggle .elementor-button,
#header .elementor-menu-cart__toggle_button {
  color: var(--sc-ink-2);
  fill: var(--sc-ink-2);
  background-color: transparent;
  border: 0;
  box-shadow: none;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  transition: color var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva);
}
#header .elementor-icon:hover,
#header .elementor-menu-cart__toggle_button:hover {
  color: var(--sc-mar-testo);
  fill: var(--sc-mar-testo);
  background-color: var(--sc-incasso);
}
#header .elementor-icon svg path { fill: currentColor; }
/* il basket e' un SVG con `fill="#23292f"` scritto nell'attributo */
#header .elementor-menu-cart__toggle_button svg path,
#header .elementor-menu-cart__close-button-custom svg path { fill: currentColor; }
/* il carrello arrivava a 59px per via del suo SVG da 39px: e' il pezzo che
   teneva alta la riga del menu */
#header .elementor-menu-cart__toggle_button { padding: var(--sc-s2); }
#header .elementor-menu-cart__toggle_button svg { width: 24px; height: 24px; }

/* il pallino del contatore: tondo, non a spigoli */
#header .elementor-button-icon-qty[data-counter] {
  background-color: var(--sc-mar-vivo);
  color: var(--sc-fondo);
  font-family: var(--sc-mono);
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  min-width: 17px;
  line-height: 17px;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   6e · IL CASSETTO DEL CARRELLO
   Vive dentro #header quindi ricade nel mio ambito, ma il suo CONTENUTO e'
   roba di 03: qui faccio il minimo perche' non resti scuro su scuro. 03
   carica dopo e puo' rifinire senza combattere.
   -------------------------------------------------------------------------- */
#header .elementor-menu-cart__close-button-custom {
  color: var(--sc-ink-2);
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
#header .elementor-menu-cart__container { color: var(--sc-ink-2); }
#header .elementor-menu-cart__main {
  background-color: var(--sc-fondo);
  border-left: 0;
  box-shadow: var(--sc-ombra-3);
  color: var(--sc-ink-2);
}
#header .elementor-menu-cart__product { border-bottom: 1px solid var(--sc-linea); }
#header .elementor-menu-cart__product-name,
#header .elementor-menu-cart__product-name a { color: var(--sc-ink); }
#header .elementor-menu-cart__product-price,
#header .woocommerce-mini-cart__total,
#header .woocommerce-mini-cart__empty-message,
#header .elementor-menu-cart__subtotal { color: var(--sc-ink-2); }
#header .elementor-menu-cart__product-remove,
#header .remove_from_cart_button { color: var(--sc-ink-3); }

/* -----------------------------------------------------------------------------
   6f · LA LENTE DI PORTO
   -------------------------------------------------------------------------- */
#header .searchform-popup .search-toggle,
#header .searchform-popup .search-toggle i { color: var(--sc-ink-2); }
#header .searchform-popup .search-toggle:hover { color: var(--sc-mar-testo); }
#header .searchform .searchform-fields,
#header .search-layout-overlay {
  background-color: var(--sc-fondo);
  box-shadow: var(--sc-ombra-2);
}
#header .searchform input[type="text"] {
  background-color: var(--sc-incasso);
  border: 1px solid var(--sc-linea-2);
  color: var(--sc-ink);
  border-radius: var(--sc-r);
  font-size: var(--sc-t-campo);   /* sotto i 16px iPhone ingrandisce la pagina */
  min-height: 46px;
}
#header .searchform input[type="text"]::placeholder { color: var(--sc-ink-3); }

/* -----------------------------------------------------------------------------
   6g · IL PANNELLO LATERALE DEL TELEFONO (Porto)
   GUASTO: le voci erano BIANCO SU BIANCO, 1,03:1. Il tema scrive
       #side-nav-panel .accordion-menu li.menu-item > a   (1-2-2)
   e la mia regola vecchia era `#side-nav-panel .accordion-menu a` (1-1-1):
   perdeva. Qui ripeto la stessa forma del tema, cosi' vince l'ordine di
   caricamento e non serve `!important`.
   -------------------------------------------------------------------------- */
#side-nav-panel {
  background-color: var(--sc-fondo);
  border-right: 0;
  box-shadow: var(--sc-ombra-3);
}
#side-nav-panel .accordion-menu li.menu-item > a,
#side-nav-panel .menu-custom-block a,
#side-nav-panel .accordion-menu li.menu-item > .arrow,
#side-nav-panel .mobile-tab-item a {
  color: var(--sc-ink-2);
  font-family: var(--sc-testo);
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--sc-linea);
}
#side-nav-panel .accordion-menu li.menu-item > a:hover,
#side-nav-panel .accordion-menu li.menu-item > a.current { color: var(--sc-mar-testo); }
#side-nav-panel .mobile-tab-items { border-bottom: 1px solid var(--sc-linea-2); }
#side-nav-panel .share-links a { color: var(--sc-ink-3); }
#side-nav-panel .sidenav-title,
#side-nav-panel .widget-title { color: var(--sc-ink); }
.side-nav-panel-close { color: var(--sc-ink-2); }
/* il velo dietro al pannello: su bianco va SCURO, altrimenti non vela niente */
.panel-overlay { background-color: color-mix(in srgb, var(--sc-ink) 42%, transparent); }


/* =============================================================================
   7 · L'EROE — solo la cucitura
   -----------------------------------------------------------------------------
   `.sc-eroe` (markup di 000902-scatole-eroe-v1.php, stile in 04) ha sostituito
   Revolution Slider: non lo tocco. Qui resta solo il contenitore Elementor che
   lo ospita, perche' e' mio, e la vecchia cornice dello slider per il caso in
   cui l'eroe nuovo venisse spento.
   ========================================================================== */

body.home #main .elementor-element-418fa04 {
  background-color: var(--sc-fondo);
  border-bottom: 0;
}
body.home #main rs-module-wrap { background-color: var(--sc-fondo); }


/* =============================================================================
   8 · FASCIA VANTAGGI (custom quote · handmade in italy · no robots here)
   Era una banda petrolio piena con testo bianco: 3,94:1 su un testo di 11px.
   Diventa un piano di carta con le sole icone in petrolio, dove il contrasto
   non e' un requisito di lettura.
   ========================================================================== */

body.home #main .elementor-element-383965d {
  background-color: var(--sc-carta);
  border-block: 1px solid var(--sc-linea);
  padding-block: var(--sc-s4);
}
body.home #main .elementor-element-383965d .elementor-heading-title {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sc-ink-2);              /* 9,02:1 sulla carta */
}
/* le icone sono SVG con `.cls-1{fill:#fff}` scritto dentro il file */
body.home #main .elementor-element-383965d .elementor-icon svg .cls-1,
body.home #main .elementor-element-383965d .elementor-icon svg path {
  fill: var(--sc-mar-vivo);
  stroke: var(--sc-mar-vivo);
}


/* =============================================================================
   9 · HOME · "OUR BEST SELLER"
   -----------------------------------------------------------------------------
   SELETTORI STRUTTURALI, NON SIGLE. Verificato dal vivo che ognuno di questi
   raccoglie esattamente 6 elementi. Se domani qualcuno rifa' una scheda in
   Elementor, la sigla cambia ma la struttura no.
     piano immagine   .e-con:has(> .elementor-widget-image)
     corpo scheda     .e-con:has(> .elementor-widget-heading)
     scheda intera    .e-con:has(> .e-con > .elementor-widget-image)
     etichetta        corpo > .elementor-widget-heading:nth-child(1)
     nome             corpo > .elementor-widget-heading:nth-child(2)
     "Starting from"  corpo > .elementor-widget-heading:nth-child(4)
     prezzo           corpo > .elementor-widget-heading:nth-child(5)
   `c817df9` (la sezione) resta l'unica sigla: e' l'ancora che tiene tutto il
   resto dentro il perimetro giusto.
   ========================================================================== */

body.home #main .elementor-element-c817df9 { padding-block: var(--sc-s8); }

/* titolo di sezione e sua riga di servizio */
body.home #main .elementor-element-5b4c7c8 .elementor-heading-title {
  color: var(--sc-ink);
  font-size: var(--sc-t-h2);
}
body.home #main .elementor-element-d54ad18 .elementor-heading-title {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sc-ink-3);              /* 5,49:1 */
}

/* --- LA SCHEDA -----------------------------------------------------------
   Niente filo di contorno: carta piu' ombra. Al passaggio del mouse la
   scheda si alza di 3px (transform) e l'ombra alta compare in dissolvenza
   (opacity su un ::after fermo). Nessuna proprieta' di layout animata. */
body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image) {
  position: relative;
  background-color: var(--sc-carta);
  border: 0;
  border-radius: var(--sc-r);
  /* `--sc-ombra-1` era troppo timida: fra `--sc-carta` (#FAFAF8) e la pagina
     bianca ci sono due punti di luminosita', e senza un'ombra vera il bordo
     inferiore della scheda spariva. Misurato a schermo: con ombra-1 la
     scheda finiva nel nulla, con ombra-2 si appoggia. */
  box-shadow: var(--sc-ombra-2);
  overflow: hidden;
  transition: transform var(--sc-medio) var(--sc-curva);
}
body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--sc-ombra-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sc-medio) var(--sc-curva);
}
body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image):hover {
  transform: translateY(-3px);
}
body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image):hover::after {
  opacity: 1;
}

/* corpo scheda */
body.home #main .elementor-element-c817df9 .e-con:has(> .elementor-widget-heading) {
  background-color: transparent;
  padding: var(--sc-s5);
  gap: var(--sc-s3);
}

/* IL PIANO IMMAGINE: era azzurrino #D9E6EA nel tema, poi un incasso col
   reticolo. Ora e' solo un tono piu' freddo della carta: il disegno a tratto
   ci si appoggia sopra senza cornice. */
body.home #main .elementor-element-c817df9 .e-con:has(> .elementor-widget-image) {
  background-color: var(--sc-incasso);
  border: 0;
  padding-block: var(--sc-s4);
}
/* i disegni a tratto: su BIANCO CANDIDO sono gia' giusti come sono nati */
body.home #main .elementor-element-c817df9 .elementor-widget-image img {
  filter: none;
  mix-blend-mode: normal;
  transition: transform var(--sc-medio) var(--sc-curva);
}
body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image):hover
  .elementor-widget-image img {
  transform: scale(1.03);
}

/* etichetta di categoria (1a) e "Starting from" (4a) */
body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(1) .elementor-heading-title,
body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(4) .elementor-heading-title {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sc-ink-3);              /* 5,25:1 sulla carta */
}
/* nome prodotto (2a) — resta come e' scritto: "Lid & Base Box" */
body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(2) .elementor-heading-title {
  color: var(--sc-ink);
  font-size: var(--sc-t-h3);
  text-transform: none;
}
/* prezzo (5a) */
body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(5) .elementor-heading-title {
  color: var(--sc-ink);
  font-size: var(--sc-t-h2);
  letter-spacing: -.02em;
}

/* stelline */
body.home #main .e-rating .e-icon-marked i,
body.home #main .e-rating .e-icon-marked { color: var(--sc-mar-vivo); }
body.home #main .e-rating .e-icon-unmarked i,
body.home #main .e-rating .e-icon-unmarked { color: var(--sc-ink-4); }

/* --- il bottone della scheda, con la freccia che scorre ------------------- */
body.home #main .elementor-element-c817df9 .elementor-widget-button .elementor-button {
  width: 100%;
}
body.home #main .elementor-element-c817df9 .elementor-widget-button .elementor-button::after {
  /* la meccanica comune sta in 1b: qui solo la sagoma e la misura */
  width: 15px;
  height: 15px;
  margin-left: 1px;
  -webkit-mask-image: var(--sci-avanti);
          mask-image: var(--sci-avanti);
  transition: transform var(--sc-veloce) var(--sc-curva);
}
body.home #main .elementor-element-c817df9 .elementor-widget-button .elementor-button:hover::after {
  transform: translateX(3px);
}


/* -----------------------------------------------------------------------------
   9b · Le due bande sotto le schede
   -------------------------------------------------------------------------- */

/* "Let yourself be inspired by our previous projects".
   Era una fascia con DUE fili petrolio sopra e sotto: il modo della direzione
   scura di disegnare un riquadro. Su bianco basta il cambio di piano. */
body.home #main .elementor-element-afa4d66 {
  background-color: var(--sc-carta);
  border-block: 1px solid var(--sc-linea);
  padding-block: var(--sc-s7);
}
body.home #main .elementor-element-afa4d66 .elementor-heading-title {
  color: var(--sc-ink);
  font-size: var(--sc-t-h2);
}

/* "New to Scatole.com?" — GUASTO 4.
   Era fondo `--sc-mar-scuro` con testo `--sc-ink`: 2,25:1 il titolo, 1,12:1
   il sottotitolo. Sulla tavolozza notte quel fondo era un rilievo chiaro.
   Il pieno petrolio non e' un'alternativa: col bianco fa 3,94:1 e il
   sottotitolo di 16px non passerebbe comunque. Diventa un velo petrolio con
   l'inchiostro sopra: il richiamo si vede, il testo si legge. */
body.home #main .elementor-element-3a11dd7 {
  background-color: var(--sc-mar-velo);
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-1);
  padding: var(--sc-s7) var(--sc-s5);
}
body.home #main .elementor-element-3a11dd7 .elementor-heading-title {
  color: var(--sc-ink);                /* 16,73:1 sul velo */
}
body.home #main .elementor-element-2ae24f9 .elementor-heading-title {
  font-family: var(--sc-testo);
  font-weight: 400;
  text-transform: none;
  font-size: var(--sc-t-p);
  color: var(--sc-ink-2);              /* 8,34:1 sul velo */
  letter-spacing: 0;
}

/* feed Instagram: FOTOGRAFIE VERE, nessun filtro. Solo il piano cambia. */
body.home #main .elementor-element-df728b3 { background-color: var(--sc-carta); }
body.home #main #sb_instagram .sbi_header_text h3,
body.home #main #sb_instagram .sbi_header_text,
body.home #main #sb_instagram .sbi_feedtheme_header_text p { color: var(--sc-ink-2); }
body.home #main #sb_instagram .sbi_photo_wrap img { filter: none; }
body.home #main #sb_instagram .sbi_photo_wrap { border-radius: var(--sc-r); overflow: hidden; }
body.home #main #sb_instagram #sbi_load .sbi_load_btn {
  background-color: var(--sc-mar-vivo);
  border: 0;
  color: var(--sc-fondo);
  border-radius: var(--sc-r);
}


/* =============================================================================
   10 · PAGINE CATEGORIA (product-category/...)
   -----------------------------------------------------------------------------
   GUASTO 1. Le miniature sono FOTOGRAFIE su fondo bianco. Il foglio vecchio le
   appoggiava su `background-color: var(--sc-ink)`, con accanto il commento
   "--sc-ink e' il gettone bianco": vero sulla tavolozza scura, falso qui.
   Misurato dal vivo: rgb(15, 17, 21).

   La soluzione non e' un bordo pesante — spegnerebbe la pagina — ma DUE piani:
   la scheda e' `--sc-carta` (bianco appena caldo), il riquadro della foto e'
   `--sc-fondo` (bianco puro, lo stesso delle foto). Cosi' la foto si fonde col
   suo riquadro e il riquadro si stacca dalla scheda: la miniatura non sparisce
   e non ha bisogno di una cornice.
   Via anche i "crocini d'angolo" (un ::after con quattro fili): erano il
   riferimento di taglio del tavolo da disegno, non c'entrano piu' niente.
   ========================================================================== */

body.tax-product_cat #main,
body.post-type-archive-product #main { padding-block: var(--sc-s6) var(--sc-s8); }

body.tax-product_cat #main h1.elementor-heading-title,
body.post-type-archive-product #main h1.elementor-heading-title {
  color: var(--sc-ink);
  font-size: var(--sc-t-h1);
  padding-bottom: var(--sc-s4);
  border-bottom: 1px solid var(--sc-linea);
}

/* --- colonna dei filtri --------------------------------------------------- */
body.tax-product_cat #main .porto_products_filter_form,
body.post-type-archive-product #main .porto_products_filter_form {
  background-color: var(--sc-carta);
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-1);
  padding: var(--sc-s5);
}
body.tax-product_cat #main .porto_products_filter_form .widget-title,
body.post-type-archive-product #main .porto_products_filter_form .widget-title {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  border-bottom: 1px solid var(--sc-linea);
  padding-bottom: var(--sc-s2);
  margin-bottom: var(--sc-s3);
}
/* Il conteggio "(3)" era `--sc-ink-4`: misurato 3,77:1 dal vivo sul vecchio
   pannello, 3,73:1 sulla carta di adesso. Sotto soglia in tutti e due i casi.
   Vedi la nota sui gettoni in fondo al file. */
body.tax-product_cat #main .product-categories li,
body.tax-product_cat #main .porto-product-prices li,
body.post-type-archive-product #main .product-categories li,
body.post-type-archive-product #main .porto-product-prices li {
  color: var(--sc-ink-3);              /* 5,25:1 sulla carta */
  border-bottom: 1px solid var(--sc-linea);
  /* Il conteggio "(3)" NON e' dentro l'ancora: e' un nodo di testo fratello.
     Rendendo l'ancora un blocco flessibile il conteggio finiva a capo, una
     riga sotto il nome della categoria. La riga intera diventa una fila:
     nome a sinistra, conteggio a destra, come una distinta. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-s2);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
}
body.tax-product_cat #main .product-categories li a,
body.tax-product_cat #main .porto-product-prices li a,
body.post-type-archive-product #main .product-categories li a,
body.post-type-archive-product #main .porto-product-prices li a {
  color: var(--sc-ink-2);
  font-family: var(--sc-testo);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: var(--sc-s2);
  flex: 1 1 auto;
  padding-block: var(--sc-s2);
  min-height: 40px;
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--sc-veloce) var(--sc-curva);
}
body.tax-product_cat #main .product-categories li a:hover,
body.post-type-archive-product #main .product-categories li a:hover { color: var(--sc-mar-testo); }

/* la categoria in cui ci si trova: una spunta, non solo un colore.
   Il colore da solo non basta a nessuno che non lo distingua. */
body.tax-product_cat #main .product-categories li.current-cat > a,
body.post-type-archive-product #main .product-categories li.current-cat > a {
  color: var(--sc-mar-testo);
  font-weight: 600;
}
body.tax-product_cat #main .product-categories li.current-cat > a::before,
body.post-type-archive-product #main .product-categories li.current-cat > a::before {
  /* meccanica comune in 1b */
  width: 13px;
  height: 13px;
  -webkit-mask-image: var(--sci-spunta);
          mask-image: var(--sci-spunta);
}

/* --- la griglia ----------------------------------------------------------- */
body.tax-product_cat #main ul.products,
body.post-type-archive-product #main ul.products { gap: 0; }

body.tax-product_cat #main li.product .product-inner,
body.post-type-archive-product #main li.product .product-inner {
  position: relative;
  background-color: var(--sc-carta);
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-2);       /* vedi la nota sulle schede della home */
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--sc-medio) var(--sc-curva);
}
body.tax-product_cat #main li.product .product-inner::after,
body.post-type-archive-product #main li.product .product-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--sc-ombra-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sc-medio) var(--sc-curva);
}
body.tax-product_cat #main li.product .product-inner:hover,
body.post-type-archive-product #main li.product .product-inner:hover { transform: translateY(-3px); }
body.tax-product_cat #main li.product .product-inner:hover::after,
body.post-type-archive-product #main li.product .product-inner:hover::after { opacity: 1; }

/* IL RIQUADRO DELLA FOTO: bianco puro come il fondo delle fotografie */
body.tax-product_cat #main li.product .product-image,
body.post-type-archive-product #main li.product .product-image {
  background-color: var(--sc-fondo);
  border: 0;
  border-bottom: 1px solid var(--sc-linea);
  border-radius: var(--sc-r) var(--sc-r) 0 0;
  overflow: hidden;
  position: relative;
}
/* nessun filtro sulle foto: mai */
body.tax-product_cat #main li.product .product-image img,
body.post-type-archive-product #main li.product .product-image img { filter: none; }

body.tax-product_cat #main li.product .product-content,
body.post-type-archive-product #main li.product .product-content {
  padding: var(--sc-s4);
  display: flex;
  flex-direction: column;
  gap: var(--sc-s2);
  flex: 1;
}
body.tax-product_cat #main li.product .category-list,
body.post-type-archive-product #main li.product .category-list,
body.tax-product_cat #main li.product .category-list a,
body.post-type-archive-product #main li.product .category-list a {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  text-decoration: none;
}
body.tax-product_cat #main li.product .woocommerce-loop-product__title,
body.post-type-archive-product #main li.product .woocommerce-loop-product__title {
  font-family: var(--sc-disp);
  font-weight: 900;
  text-transform: none;
  letter-spacing: -.01em;
  font-size: var(--sc-t-h3);
  color: var(--sc-ink);
  margin: 0;
}
body.tax-product_cat #main li.product .price,
body.post-type-archive-product #main li.product .price,
body.tax-product_cat #main li.product .price .amount,
body.post-type-archive-product #main li.product .price .amount {
  font-family: var(--sc-disp);
  font-weight: 900;
  font-size: var(--sc-t-h3);
  letter-spacing: -.02em;
  color: var(--sc-ink);
}
/* Le stelle vuote erano `--sc-quota` (#C6CCD3): 1,62:1 sul bianco, cioe' un
   grafico che non si vede. La soglia per un elemento grafico e' 3:1. */
body.tax-product_cat #main li.product .star-rating,
body.post-type-archive-product #main li.product .star-rating { color: var(--sc-mar-vivo); }
body.tax-product_cat #main li.product .star-rating::before,
body.post-type-archive-product #main li.product .star-rating::before { color: var(--sc-ink-4); }

/* Porto tronca con i puntini nome e categoria (nowrap + ellipsis): a 390px
   "Bracelet Box" diventava "BRACELET B...". Qui i nomi vanno a capo. */
body.tax-product_cat #main li.product .woocommerce-loop-product__title,
body.post-type-archive-product #main li.product .woocommerce-loop-product__title,
body.tax-product_cat #main li.product .category-list,
body.post-type-archive-product #main li.product .category-list {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* Misurati a 390px: il nome del prodotto era un bersaglio di 116x19 e la
   categoria di 53x13. La soglia WCAG 2.2 per un bersaglio non in linea e'
   24x24: un po' di riempimento verticale basta e non sposta niente. */
body.tax-product_cat #main li.product .woocommerce-loop-product__title a,
body.post-type-archive-product #main li.product .woocommerce-loop-product__title a,
body.tax-product_cat #main li.product .category-list a,
body.post-type-archive-product #main li.product .category-list a {
  display: inline-block;
  padding-block: var(--sc-s1);
  min-height: 24px;
}

body.tax-product_cat #main li.product .add-links-wrap,
body.post-type-archive-product #main li.product .add-links-wrap,
body.tax-product_cat #main li.product .add-links,
body.post-type-archive-product #main li.product .add-links { width: 100%; margin-top: auto; }

body.tax-product_cat #main li.product .add-links .button,
body.post-type-archive-product #main li.product .add-links .button {
  width: 100%;
  cursor: pointer;
  /* Porto nasconde l'etichetta con text-indent:-9999px sotto una certa
     larghezza e lascia il solo sacchetto: un bersaglio muto. La rimetto. */
  text-indent: 0;
  overflow: visible;
  white-space: nowrap;
}
/* la "Quick View" di Porto sta sopra l'immagine: qui e' rumore */
body.tax-product_cat #main li.product .quickview,
body.post-type-archive-product #main li.product .quickview {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
}

/* impaginazione */
body.tax-product_cat #main .woocommerce-pagination a,
body.tax-product_cat #main .woocommerce-pagination span,
body.post-type-archive-product #main .woocommerce-pagination a,
body.post-type-archive-product #main .woocommerce-pagination span {
  background-color: var(--sc-carta);
  border: 0;
  box-shadow: var(--sc-ombra-1);
  color: var(--sc-ink-2);
  border-radius: var(--sc-r);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.tax-product_cat #main .woocommerce-pagination .current,
body.post-type-archive-product #main .woocommerce-pagination .current {
  background-color: var(--sc-mar-vivo);
  color: var(--sc-fondo);
}


/* =============================================================================
   11 · PAGINE DI CONTENUTO (about-us, faq, get-in-touch, privacy, termini)
   Escludo carrello/checkout/area cliente: sono di 03.
   ========================================================================== */

body.page:not(.home):not(.woocommerce-page) #main { padding-block: 0 var(--sc-s8); }

/* -----------------------------------------------------------------------------
   I FONDI EREDITATI DA ELEMENTOR
   Queste pagine hanno fasce con fondo scritto inline (#EAEAE9, bianco pieno,
   petrolio). Riverniciarle una per una con la sigla del widget sarebbe
   fragile: uso l'attributo che Elementor scrive quando un contenitore ha un
   fondo suo. Cambio SOLO `background-color`, MAI `background-image`: la
   testata di about-us e' una fotografia e deve restare.
   Il contenitore annidato (il pannello del modulo dentro la fascia) sale di
   un piano: bianco su carta, con ombra. Prima era il contrario — un incasso
   con un filo attorno, che e' il modo di disegnare della direzione scura.
   -------------------------------------------------------------------------- */
body.page:not(.home):not(.woocommerce-page) #main .e-con[data-settings*="background_background"] {
  background-color: var(--sc-carta);
}
body.page:not(.home):not(.woocommerce-page) #main
  .e-con[data-settings*="background_background"]
  .e-con[data-settings*="background_background"] {
  background-color: var(--sc-fondo);
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-2);
}

/* Sovrapposizioni a motivo: la testata delle FAQ ripete il marchio in grande.
   A `.12` su bianco e' un fondo a pois che litiga col titolo; a `.05` e' una
   filigrana. La regola vecchia colpiva OGNI `.e-con::before` della pagina:
   qui e' legata al contenitore che ha davvero un fondo dichiarato. */
body.page:not(.home):not(.woocommerce-page) #main
  .e-con[data-settings*="background_background"]::before {
  opacity: .05;
}

/* --- campi di testo: valgono per tutti i moduli di queste pagine ---------- */
body.page:not(.home):not(.woocommerce-page) #main input[type="text"],
body.page:not(.home):not(.woocommerce-page) #main input[type="email"],
body.page:not(.home):not(.woocommerce-page) #main input[type="tel"],
body.page:not(.home):not(.woocommerce-page) #main input[type="number"],
body.page:not(.home):not(.woocommerce-page) #main input[type="date"],
body.page:not(.home):not(.woocommerce-page) #main input[type="file"],
body.page:not(.home):not(.woocommerce-page) #main select,
body.page:not(.home):not(.woocommerce-page) #main textarea {
  background-color: var(--sc-incasso);
  /* TERZA freccia: oltre alle due di Elementor, Porto ne dipinge una come
     `background-image` sul <select> stesso (un PNG dentro il tema). Se non la
     si spegne restano due chevron affiancati sul campo "Country". */
  background-image: none;
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  color: var(--sc-ink);
  font-family: var(--sc-testo);
  /* NON `--sc-t-p`: quello scende a 15px sul telefono e iPhone ingrandisce la
     pagina appena si tocca il campo. `--sc-t-campo` e' fisso a 16px apposta. */
  font-size: var(--sc-t-campo);
  min-height: 48px;
  padding: var(--sc-s3) var(--sc-s4);
  transition: border-color var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva);
}
/* il segnaposto era `--sc-ink-4`: 3,90:1, sotto soglia per un testo di 16px */
body.page:not(.home):not(.woocommerce-page) #main input::placeholder,
body.page:not(.home):not(.woocommerce-page) #main textarea::placeholder {
  color: var(--sc-ink-3);              /* 5,06:1 sull'incasso */
  opacity: 1;                          /* Firefox lo sbiadisce di suo */
}
body.page:not(.home):not(.woocommerce-page) #main input:focus,
body.page:not(.home):not(.woocommerce-page) #main select:focus,
body.page:not(.home):not(.woocommerce-page) #main textarea:focus {
  border-color: var(--sc-mar);
  background-color: var(--sc-fondo);
  outline: 2px solid var(--sc-mar-testo);
  outline-offset: 1px;
}
body.page:not(.home):not(.woocommerce-page) #main input[type="file"]::file-selector-button {
  background-color: var(--sc-fondo);
  color: var(--sc-ink-2);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: var(--sc-s2) var(--sc-s3);
  margin-right: var(--sc-s3);
  min-height: 34px;
  cursor: pointer;
}
body.page:not(.home):not(.woocommerce-page) #main label { color: var(--sc-ink-2); }

/* --- LA DOPPIA FRECCIA DEI <select> --------------------------------------
   Elementor disegna DUE indicatori sullo stesso campo: l'icona a carattere
   dentro `.select-caret-down-wrapper` e un `::before` sul wrapper esterno.
   Sul modulo di get-in-touch si vedevano tutte e due, una accanto all'altra.
   Spengo entrambe e ne disegno una sola con la maschera di sezione 1. */
body.page:not(.home):not(.woocommerce-page) #main .elementor-select-wrapper::before { content: none; }
body.page:not(.home):not(.woocommerce-page) #main .select-caret-down-wrapper i { display: none; }
body.page:not(.home):not(.woocommerce-page) #main .select-caret-down-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-ink-3);
  pointer-events: none;
}
body.page:not(.home):not(.woocommerce-page) #main .select-caret-down-wrapper::after {
  /* meccanica comune in 1b */
  width: 15px;
  height: 15px;
  -webkit-mask-image: var(--sci-giu);
          mask-image: var(--sci-giu);
}

body.page:not(.home):not(.woocommerce-page) #main .elementor-widget-text-editor {
  color: var(--sc-ink-2);
  max-width: 72ch;
}
body.page:not(.home):not(.woocommerce-page) #main .elementor-widget-text-editor h2,
body.page:not(.home):not(.woocommerce-page) #main .elementor-widget-text-editor h3 {
  margin-top: var(--sc-s6);
  margin-bottom: var(--sc-s3);
}
body.page:not(.home):not(.woocommerce-page) #main ul li,
body.page:not(.home):not(.woocommerce-page) #main ol li {
  margin-bottom: var(--sc-s2);
  color: var(--sc-ink-2);
}

/* -----------------------------------------------------------------------------
   11a · FAQ (pagina 3898) — le fisarmoniche di Elementor
   Il marcatore di Elementor e' una coppia di icone a carattere
   (`Simple-Line-Icons-arrow-down` / `-arrow-right`) appoggiata a SINISTRA del
   testo. La sposto a destra, dove la cerca chiunque, e la disegno con la
   maschera: un chevron che ruota di 180 gradi quando la risposta si apre.
   La rotazione e' un `transform`, quindi non ridisegna niente.
   -------------------------------------------------------------------------- */
body.page-id-3898 #main .e-n-accordion-item {
  background-color: var(--sc-carta);
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-1);
  margin-bottom: var(--sc-s3);
  overflow: hidden;
}
body.page-id-3898 #main .e-n-accordion-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-s4);
  color: var(--sc-ink);
  background-color: transparent;
  padding: var(--sc-s4) var(--sc-s5);
  min-height: 60px;
  cursor: pointer;
  list-style: none;
  border: 0;
  transition: background-color var(--sc-veloce) var(--sc-curva);
}
body.page-id-3898 #main .e-n-accordion-item-title::-webkit-details-marker { display: none; }
body.page-id-3898 #main .e-n-accordion-item-title:hover { background-color: var(--sc-incasso); }
body.page-id-3898 #main .e-n-accordion-item-title-text {
  font-family: var(--sc-testo);
  font-weight: 600;
  font-size: var(--sc-t-p);
  text-transform: none;
  letter-spacing: 0;
  color: var(--sc-ink);
  line-height: 1.45;
}
/* il marcatore originale sparisce, il mio prende il suo posto a destra */
body.page-id-3898 #main .e-n-accordion-item-title-icon { display: none; }
body.page-id-3898 #main .e-n-accordion-item-title::after {
  /* meccanica comune in 1b */
  width: 18px;
  height: 18px;
  color: var(--sc-mar-testo);
  transition: transform var(--sc-medio) var(--sc-curva);
  -webkit-mask-image: var(--sci-giu);
          mask-image: var(--sci-giu);
}
body.page-id-3898 #main .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
  transform: rotate(180deg);
}
body.page-id-3898 #main .e-n-accordion-item[open] {
  background-color: var(--sc-fondo);
  box-shadow: var(--sc-ombra-2);
}
body.page-id-3898 #main .e-n-accordion-item[open] .e-n-accordion-item-title {
  border-bottom: 1px solid var(--sc-linea);
}
body.page-id-3898 #main .e-n-accordion-item > .elementor-element { padding: var(--sc-s5); }

/* -----------------------------------------------------------------------------
   11b · get-in-touch (pagina 3895)
   -------------------------------------------------------------------------- */
body.page-id-3895 #main .elementor-field-group > label,
body.page-id-3895 #main .elementor-field-label {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  margin-bottom: var(--sc-s2);
}
body.page-id-3895 #main .elementor-field-option label { color: var(--sc-ink-2); }
body.page-id-3895 #main .elementor-form .elementor-button { width: auto; }
body.page-id-3895 #main .elementor-icon svg path,
body.page-id-3895 #main .elementor-icon i { fill: var(--sc-mar-vivo); color: var(--sc-mar-vivo); }

/* Il modulo Brevo della newsletter arriva col suo foglio: allineo solo i
   campi e il bottone, senza toccarne la struttura. */
body.page:not(.home):not(.woocommerce-page) #main .sib-form-block__button,
body.page:not(.home):not(.woocommerce-page) #main input.sib-form-block__button {
  background-color: var(--sc-mar-vivo);
  color: var(--sc-fondo);
  border: 0;
  border-radius: var(--sc-r);
  min-height: 44px;
  font-family: var(--sc-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.page:not(.home):not(.woocommerce-page) #main .entry__label,
body.page:not(.home):not(.woocommerce-page) #main .sib-form .entry__label { color: var(--sc-ink-2); }

/* -----------------------------------------------------------------------------
   11c · about-us (pagina 1384) — GUASTO 7
   Due immagini della testata sono le scritte "CIAO!" e "SCATOLE.COM" in blu
   scuro su fondo trasparente, appoggiate sopra una FOTO chiara: restano
   leggibili come sono nate, nessun filtro e nessun filo attorno.

   La SECONDA fascia (`909827f`) e' un'altra cosa: una fotografia in bianco e
   nero, scura sulla sinistra, con sopra il titolo "Great BRANDS deserve great
   PACKAGING!" che Elementor colora di BIANCO apposta. Il mio
   `#main h1..h6 { color: var(--sc-ink) }` lo riportava a nero: nero su nero.
   Trovato spegnendo questo foglio dal vivo e confrontando i colori calcolati
   prima e dopo — nessuno strumento di contrasto lo vede, perche' il fondo e'
   un'immagine e non un colore.
   La cura e' doppia: il titolo torna bianco E sotto ci va un velo, cosi' la
   leggibilita' non dipende da come e' esposta la foto.
   Il velo sta su `::after` e non su `::before`: `::before` e' gia' occupato
   dalla sovrapposizione a motivo di Elementor, che poco sopra porto a .05.
   -------------------------------------------------------------------------- */
body.page-id-1384 #main .elementor-element-c7b7ded {
  background-color: transparent;
  border-top: 0;
  position: relative;
}
body.page-id-1384 #main .elementor-widget-image img {
  filter: none;
  border: 0;
}

body.page-id-1384 #main .elementor-element-909827f {
  position: relative;
  isolation: isolate;
}
body.page-id-1384 #main .elementor-element-909827f::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    color-mix(in srgb, var(--sc-ink) 62%, transparent) 0%,
    color-mix(in srgb, var(--sc-ink) 42%, transparent) 42%,
    transparent 74%);
}
body.page-id-1384 #main .elementor-element-909827f .elementor-heading-title,
body.page-id-1384 #main .elementor-element-909827f p {
  color: var(--sc-mar-ombra);          /* il gettone "testo sopra un pieno" */
}

/* -----------------------------------------------------------------------------
   11d · privacy (3) e termini (10) — incorporazioni Iubenda
   ATTENZIONE, NON E' UN GUASTO DI QUESTO FOGLIO: queste due pagine sono VUOTE
   anche senza `?officina=1`. L'incorporazione Iubenda non rende nulla. Le
   regole restano qui pronte per quando il proprietario la rimettera' in piedi.
   -------------------------------------------------------------------------- */
body.page-id-3 #main .iubenda-embed,
body.page-id-10 #main .iubenda-embed,
body.page-id-3 #main .iub-body-embed,
body.page-id-10 #main .iub-body-embed,
body.page-id-3 #main .iubenda-embed *,
body.page-id-10 #main .iubenda-embed * {
  background-color: transparent;
  color: var(--sc-ink-2);
  border-color: var(--sc-linea);
}
body.page-id-3 #main .iub-body-embed h1,
body.page-id-10 #main .iub-body-embed h1,
body.page-id-3 #main .iub-body-embed h2,
body.page-id-10 #main .iub-body-embed h2,
body.page-id-3 #main .iub-body-embed h3,
body.page-id-10 #main .iub-body-embed h3 { color: var(--sc-ink); }
body.page-id-3 #main .iub-body-embed a,
body.page-id-10 #main .iub-body-embed a { color: var(--sc-mar-testo); }


/* =============================================================================
   12 · PIE' DI PAGINA
   -----------------------------------------------------------------------------
   ATTENZIONE: i tre elenchi qui dentro hanno la stessa classe del menu
   dell'intestazione. Tutte le regole partono da #footer.

   Il piede era due blocchi scuri su una pagina bianca: il pannello dati
   (`--sc-mar-scuro`, guasto 3) e la striscia dei loghi bandi (`--sc-ink`,
   guasto 2). Diventa un unico piano di carta, appena piu' caldo della pagina,
   chiuso in alto da un filo.
   ========================================================================== */

#footer {
  background-color: var(--sc-carta);
  border-top: 1px solid var(--sc-linea);
  color: var(--sc-ink-2);
}

/* --- pannello dati aziendali (GUASTO 3: era 1,12:1) ---------------------- */
#footer .elementor-element-b0188f3 {
  background-color: transparent;
  border-right: 1px solid var(--sc-linea);
  padding: var(--sc-s6) var(--sc-s5);
}
/* Piu' avanti c'e' la regola che colora i TITOLI DI COLONNA, con la stessa
   forza di questa: vincerebbe per posizione e mi colorerebbe anche
   l'indirizzo. Un livello in piu' e la gerarchia resta giusta. */
#footer .elementor-element-b0188f3 .elementor-widget-heading .elementor-heading-title,
#footer .elementor-element-7d7fa00 .elementor-widget-heading .elementor-heading-title,
#footer .elementor-element-b0188f3 .elementor-heading-title,
#footer .elementor-element-7d7fa00 .elementor-heading-title {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-ink-2);              /* 9,02:1 sulla carta */
  line-height: 2;
}

/* --- IL LOGO DEL PIE' -----------------------------------------------------
   Il file `logo_footer2.svg` e' interamente `fill:#FFFFFF` (verificato nel
   sorgente): su carta e' invisibile. Non lo inseguo con una catena di
   `filter:` — l'immagine resta li' a tenere lo spazio (`visibility: hidden`
   conserva la scatola) e sopra ci metto la SUA STESSA SAGOMA come maschera,
   colorata con un gettone. E' la tecnica delle icone, applicata a un logo.
   QUESTO E' UN CEROTTO: la cosa giusta sarebbe una versione scura dell'SVG.
   Vedi le note per il proprietario in fondo al file.
   -------------------------------------------------------------------------- */
#footer .elementor-element-6329834 .elementor-widget-container { position: relative; }
#footer .elementor-element-6329834 img {
  visibility: hidden;
  filter: none;
}
#footer .elementor-element-6329834 .elementor-widget-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--sc-ink);     /* 18,08:1 sulla carta del piede */
  -webkit-mask-image: var(--sci-logo-piede);
          mask-image: var(--sci-logo-piede);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

#footer .elementor-element-e5d50d1 {
  background-color: transparent;
  padding: var(--sc-s6) var(--sc-s5);
  border-left: 0;
}

/* titoli di colonna */
#footer .elementor-widget-heading .elementor-heading-title {
  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);              /* 5,25:1 sulla carta */
}

/* i TRE elenchi del pie': il punto in cui l'altra volta si erano spenti */
#footer .elementor-nav-menu .elementor-item,
#footer .elementor-icon-list-item,
#footer .elementor-icon-list-text {
  font-family: var(--sc-testo);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-ink-2);              /* era ink-3 (5,31:1); ink-2 su carta fa 9,02:1 */
  padding-block: var(--sc-s2);
  min-height: 36px;
  display: flex;
  align-items: center;
  background-color: transparent;
  transition: color var(--sc-veloce) var(--sc-curva);
}
#footer .elementor-nav-menu .elementor-item:hover,
#footer .elementor-nav-menu .elementor-item:focus-visible {
  color: var(--sc-mar-testo);
  background-color: transparent;
}
#footer .elementor-icon-list-icon svg,
#footer .elementor-icon-list-icon i { fill: var(--sc-mar-vivo); color: var(--sc-mar-vivo); }

/* --- striscia loghi bandi (GUASTO 2: era una banda nera) -----------------
   MARCHE, Repubblica Italiana, FESR, UE. Il PNG e' trasparente per il 96% con
   inchiostro a colori e scuro (contati i pixel del file): sta benissimo sulla
   carta, e sono marchi istituzionali, quindi non si filtrano mai. */
#footer .elementor-element-b149e2e {
  background-color: var(--sc-carta);
  border-top: 1px solid var(--sc-linea);
  padding-block: var(--sc-s4);
}
#footer .elementor-element-2b17445 img { filter: none; max-height: 62px; width: auto; }

/* I due collegamenti-immagine del piede (logo e striscia bandi) misuravano
   40px di altezza: sotto i 44 richiesti. Sono immagini dentro un'ancora, e
   l'ancora prendeva l'altezza dell'immagine. */
#footer .elementor-element-6329834 a,
#footer .elementor-element-2b17445 a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* =============================================================================
   13 · TELEFONO — provato davvero a 390px
   Bersagli almeno 44px, niente scorrimento orizzontale, nessun testo tagliato,
   campi a 16px.
   ========================================================================== */

@media (max-width: 767px) {

  /* --- ALTEZZA DELL'INTESTAZIONE ---------------------------------------
     Su schermo grande le fasce sono tre; sul telefono ne compaiono altre due
     (riga logo+icone, riga burger+lente) e l'intestazione arrivava a 226px su
     844 di schermo: un quarto della pagina prima di leggere una parola.
     Riempimenti a 4px, logo a 36px, bersagli comunque 44x44.
     -------------------------------------------------------------------- */
  #header .elementor-element-9bac2dd,
  #header .elementor-element-6cd5b5e { padding-block: var(--sc-s1); }
  #header .elementor-element-6cd5b5e > .e-con-inner,
  #header .elementor-element-9bac2dd > .e-con-inner { padding-block: 0; }
  #header .elementor-element-9bac2dd img { max-height: 36px; width: auto; }
  #header .elementor-element-6cd5b5e { background-color: var(--sc-fondo); }

  /* bersagli sotto i 44px trovati misurando: icona utente (40x40) e lente di
     Porto (28x38) */
  #header .elementor-icon-box-icon .elementor-icon,
  #header .searchform-popup .search-toggle,
  #header .btn-close-search-form,
  #header .elementor-menu-toggle,
  #header .elementor-icon,
  #header .elementor-menu-cart__toggle_button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* il logo del telefono e' un collegamento alla home: 36px non basta */
  #header .elementor-element-a0ea9a1 a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Il burger arrivava con fondo BIANCO PIENO e tratto nero: sul fondo notte
     era l'unica macchia chiara della pagina, e infatti gli era stato tolto il
     fondo. Su bianco il problema si rovescia: senza fondo sparisce. Diventa
     una pastiglia di carta con l'ombra bassa. */
  #header .elementor-menu-toggle {
    background-color: var(--sc-carta);
    border: 0;
    box-shadow: var(--sc-ombra-1);
    border-radius: var(--sc-r);
    color: var(--sc-ink-2);
  }
  #header .elementor-menu-toggle svg,
  #header .elementor-menu-toggle i { fill: var(--sc-ink-2); color: var(--sc-ink-2); }
  #header .elementor-menu-toggle:hover { color: var(--sc-mar-testo); }
  #header .elementor-menu-toggle:hover svg { fill: var(--sc-mar-testo); }

  /* menu a tendina del telefono */
  #header nav.elementor-nav-menu--dropdown .elementor-item,
  #header nav.elementor-nav-menu--dropdown .elementor-sub-item {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 15px;
    letter-spacing: .02em;
  }

  /* --- home ------------------------------------------------------------- */
  body.home #main .elementor-element-c817df9 { padding-block: var(--sc-s6) var(--sc-s7); }
  body.home #main .elementor-element-383965d { padding-block: var(--sc-s3); }
  body.home #main .elementor-element-383965d .elementor-heading-title { letter-spacing: .12em; }
  body.home #main .elementor-element-afa4d66 { padding-block: var(--sc-s6); }
  body.home #main .elementor-element-3a11dd7 { padding: var(--sc-s6) var(--sc-s4); }
  /* il sollevamento col dito non esiste: a 390px la scheda resta ferma e
     l'ombra alta e' sempre accesa, cosi' i piani si distinguono lo stesso */
  body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image):hover {
    transform: none;
  }

  /* --- categoria: due colonne a 390px restano leggibili ------------------ */
  body.tax-product_cat #main li.product .product-content,
  body.post-type-archive-product #main li.product .product-content { padding: var(--sc-s3); }
  body.tax-product_cat #main li.product .woocommerce-loop-product__title,
  body.post-type-archive-product #main li.product .woocommerce-loop-product__title { font-size: 1rem; }
  body.tax-product_cat #main li.product .add-links .button,
  body.post-type-archive-product #main li.product .add-links .button {
    padding-inline: var(--sc-s1);
    letter-spacing: .04em;
    gap: var(--sc-s1);
    font-size: 10px;
  }
  body.tax-product_cat #main li.product .product-inner:hover,
  body.post-type-archive-product #main li.product .product-inner:hover { transform: none; }
  /* misurati 261x40 nel telaio da 390px: mancavano 4px */
  body.tax-product_cat #main .product-categories li a,
  body.post-type-archive-product #main .product-categories li a,
  body.tax-product_cat #main .porto-product-prices li a,
  body.post-type-archive-product #main .porto-product-prices li a { min-height: 44px; }

  /* --- pagine di contenuto ----------------------------------------------- */
  body.page:not(.home):not(.woocommerce-page) #main
    .e-con[data-settings*="background_background"]
    .e-con[data-settings*="background_background"] {
    border-radius: var(--sc-r);
  }
  /* LE FASCE A TRE COLONNE NON SI IMPILANO DA SOLE.
     Su get-in-touch la riga "orari · email · Box Bot" resta a tre colonne
     anche a 390px: 112px a testa, e ogni frase diventa un nastro di due
     parole per riga. Elementor non ha un punto di rottura su quella riga.
     Misurato nel telaio da 390px. Non c'e' scorrimento orizzontale — e'
     peggio: e' leggibile a fatica e sembra rotto.
     Impilo solo le righe con TRE o piu' colonne, che a questa larghezza
     sono sbagliate in ogni caso; quelle a due le lascio stare. */
  body.page:not(.home):not(.woocommerce-page) #main .e-con.e-flex:has(> .e-con:nth-child(3)) {
    flex-direction: column;
  }
  body.page:not(.home):not(.woocommerce-page) #main .e-con.e-flex:has(> .e-con:nth-child(3)) > .e-con {
    width: 100%;
  }

  body.page-id-3898 #main .e-n-accordion-item-title { padding: var(--sc-s3) var(--sc-s4); }
  body.page-id-3898 #main .e-n-accordion-item > .elementor-element { padding: var(--sc-s4); }
  /* Il velo di about-us: sul telefono la foto si stringe e il testo ci finisce
     sopra tutto, non solo a sinistra. Il velo diventa verticale. */
  body.page-id-1384 #main .elementor-element-909827f::after {
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--sc-ink) 58%, transparent) 0%,
      color-mix(in srgb, var(--sc-ink) 50%, transparent) 100%);
  }

  /* --- pie': le colonne si impilano, i bersagli restano grandi ------------ */
  #footer .elementor-element-b0188f3 {
    border-right: 0;
    border-bottom: 1px solid var(--sc-linea);
    padding: var(--sc-s5) var(--sc-s4);
  }
  #footer .elementor-element-e5d50d1 { padding: var(--sc-s5) var(--sc-s4); }
  #footer .elementor-nav-menu .elementor-item,
  #footer .elementor-icon-list-item { min-height: 44px; }
  #footer .elementor-element-2b17445 img { max-height: 40px; }

  /* niente scorrimento laterale, mai */
  body, .page-wrapper { overflow-x: hidden; }
}


/* =============================================================================
   13b · DIFESA DELLA PAGINA FAQ DA UNA REGOLA DI 04
   -----------------------------------------------------------------------------
   COSA E' SUCCESSO, il 23/08 mentre lavoravo.
   04-rifiniture ha aggiunto una sezione per le due caselle "PROJECT RECAP" e
   "PROJECT QUOTATION" della SCHEDA PRODOTTO. Quelle due caselle sono fatte con
   lo stesso widget "nested accordion" di Elementor usato dalle FAQ, e le
   regole sono scritte su `#main details.e-n-accordion-item` — senza dire su
   quale pagina. 04 carica dopo di me, quindi arrivano dritte su /faq/:

     · `pointer-events: none` sul <summary>  ->  LE DOMANDE NON SI APRONO PIU'.
       Verificato dal vivo: clic sulla seconda domanda, non succede niente.
     · dalla seconda domanda in poi la testata diventa petrolio pieno
       (`--sc-mar`) — misurato 2,35:1 col titolo scuro sopra, 3,94:1 col
       bianco: sotto soglia in tutti e due i casi, e a 16px non c'e' deroga.
     · le testate diventano monospaziate maiuscole da 11,5px: una domanda in
       lingua inglese lunga 60 caratteri, tutta maiuscola e spaziata.
     · gli <li> dentro una risposta diventano righe a due colonne allineate
       agli estremi (era pensato per "voce ... valore" del riepilogo).

   NON RISCRIVO 04: e' di un altro. Ma non posso lasciare le FAQ inutilizzabili,
   quindi rimetto in piedi SOLO la pagina 3898, con un livello di specificita'
   in piu' (`body.page-id-3898` davanti). E' un cerotto dichiarato: la cura
   vera e' che 04 metta `body.single-product` davanti alle sue regole, e allora
   questo blocco si puo' cancellare in un colpo solo.
   ========================================================================== */

body.page-id-3898 #main details.e-n-accordion-item {
  background-color: var(--sc-carta);
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-1);
  margin-bottom: var(--sc-s3);
}
body.page-id-3898 #main details.e-n-accordion-item:nth-of-type(2),
body.page-id-3898 #main details.e-n-accordion-item + details.e-n-accordion-item {
  border: 0;
  box-shadow: var(--sc-ombra-1);
}
body.page-id-3898 #main details.e-n-accordion-item[open],
body.page-id-3898 #main details.e-n-accordion-item[open] + details.e-n-accordion-item[open] {
  background-color: var(--sc-fondo);
  box-shadow: var(--sc-ombra-2);
}
/* la riga che conta: senza questa, le FAQ non si aprono */
body.page-id-3898 #main details.e-n-accordion-item > summary,
body.page-id-3898 #main details.e-n-accordion-item + details.e-n-accordion-item > summary {
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  color: var(--sc-ink);
  border-bottom: 1px solid transparent;
  font-family: var(--sc-testo);
  font-size: var(--sc-t-p);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: var(--sc-s4) var(--sc-s5);
  gap: var(--sc-s4);
  justify-content: space-between;
}
body.page-id-3898 #main details.e-n-accordion-item[open] > summary {
  border-bottom-color: var(--sc-linea);
}
body.page-id-3898 #main details.e-n-accordion-item > :not(summary) {
  padding: var(--sc-s5);
}

/* -----------------------------------------------------------------------------
   LA RETE DI SICUREZZA SULLE RISPOSTE — e il guasto che c'e' sotto
   -----------------------------------------------------------------------------
   NON E' COLPA DI QUESTO FOGLIO, ne' di 04. Verificato su
   https://www.scatole.com/faq/  SENZA `?officina=1`, cioe' sul sito vero:
   la fisarmonica delle FAQ NON FUNZIONA. Il gestore JavaScript di Elementor
   (`nested-accordion.default`) parte, scrive sul <details> uno stile in linea
   `overflow: hidden; height: 53px` per animare l'apertura, e l'animazione non
   arriva mai in fondo: l'attributo `open` si accende ma l'altezza resta quella
   di partenza. Risultato: si vede solo la prima risposta, che e' aperta
   nell'HTML; le altre quattro sono irraggiungibili. E la prima non si chiude.
   Nessun errore in console, `prefers-reduced-motion` non c'entra (verificato:
   la finestra e' in `no-preference`), il gestore risulta registrato.
   E' un guasto di JavaScript, quindi fuori dal mio perimetro: va segnalato.

   Qui posso stendere una rete, con una riga e senza `!important`: lo stile in
   linea impone `height`, ma NON impone `min-height`, e in CSS il `min-height`
   vince sull'`height`. Un `min-height: fit-content` sul <details> aperto non
   litiga quindi con la proprieta' scritta in linea e obbliga comunque la
   casella a contenere la risposta.
   ONESTA' SU QUANTO HO POTUTO VERIFICARE: con questa riga ho visto la casella
   aperta misurare 273px invece dei 65px imposti in linea, cioe' la rete
   regge. Non sono riuscito a fotografare la scena in modo stabile: il
   renderer di Chrome su queste pagine restituisce fotogrammi vecchi, e la
   sequenza apri/chiudi di Elementor cambia stato mentre si misura.
   Quindi: la riga non puo' fare danno (vale solo su un elemento gia' aperto,
   e non fa altro che dargli l'altezza del suo contenuto), ma NON e' la cura.
   La cura e' capire perche' l'animazione di Elementor non arriva in fondo —
   primo sospetto da controllare: il "ritardo dell'esecuzione JavaScript" di
   WP Rocket. E' un lavoro da fare sul plugin, non su questo foglio.
   -------------------------------------------------------------------------- */
body.page-id-3898 #main details.e-n-accordion-item[open] {
  min-height: -moz-fit-content;
  min-height: fit-content;
}

/* gli elenchi dentro una risposta tornano elenchi */
body.page-id-3898 #main details.e-n-accordion-item li,
body.page-id-3898 #main details.e-n-accordion-item .elementor-icon-list-item {
  display: list-item;
  justify-content: flex-start;
  gap: 0;
  padding: 0 0 var(--sc-s2);
  border-bottom: 0;
  font-size: var(--sc-t-p);
  letter-spacing: 0;
  color: var(--sc-ink-2);
}

@media (max-width: 767px) {
  body.page-id-3898 #main details.e-n-accordion-item > summary,
  body.page-id-3898 #main details.e-n-accordion-item + details.e-n-accordion-item > summary {
    padding: var(--sc-s3) var(--sc-s4);
    font-size: var(--sc-t-p);
  }
  body.page-id-3898 #main details.e-n-accordion-item > :not(summary) {
    padding: var(--sc-s4);
  }
}


/* =============================================================================
   14 · NOTE PER IL PROPRIETARIO DEI GETTONI (00-fondamenta)
   -----------------------------------------------------------------------------
   Non ho inventato nessun colore. Due cose pero' vanno decise da chi possiede
   le fondamenta, e finche' non sono decise le ho aggirate:

   a) `--sc-ink-4` (#79828D) e' commentato "circa 4,5:1 AA (min 14px)".
      MISURATO: 3,90:1 su bianco puro e 3,73:1 su `--sc-carta`. Non passa AA
      per il testo normale in nessuno dei due casi. Nel foglio vecchio lo
      usavano i conteggi dei filtri di categoria ("(3)") e i segnaposto dei
      moduli; 04 lo usa per le tre prove sotto il titolo dell'eroe.
      Qui NON lo uso piu' per nessun testo: solo per le stelle vuote, dove la
      soglia e' 3:1 perche' e' un elemento grafico. Serve una decisione:
      scurirlo a circa #6B747F (4,6:1) oppure dichiararlo esplicitamente come
      gettone "solo grafica".

   b) MANCA UN GETTONE PER I FONDI PETROLIO DEL RICHIAMO. Oggi ci sono
      `--sc-mar` (pieno, 3,94:1 col bianco: solo testo grande) e
      `--sc-mar-velo` (velo tenue). In mezzo non c'e' niente: il riquadro
      "New to Scatole.com?" vorrebbe un petrolio piu' presente del velo ma
      che regga ancora un sottotitolo di 16px. Per ora ho usato il velo.
      Proposta: un `--sc-mar-fondo` intorno a #D6EAEC.

   c) MANCA UNA VERSIONE SCURA DEL LOGO DEL PIE'. `logo_footer2.svg` e'
      interamente bianco. L'ho ridipinto usandolo come maschera (sezione 12),
      e funziona, ma e' un cerotto: se qualcuno cambia il file, la maschera
      cambia con lui e il colore resta quello del gettone — quindi regge — ma
      la soluzione pulita e' un secondo SVG con i colori del marchio, come
      quello dell'intestazione (`logo_v2.svg`: #111830 + #2f8c98).

   d) SEGNALAZIONI AGLI ALTRI DUE FOGLI (non li tocco):
      · 03-negozio, riga 79: `color-scheme: dark` su carrello, checkout, area
        cliente e conferma d'ordine. E' lo stesso residuo che il collega ha
        gia' corretto in 02 (riga 672, ora `light`). Con la tavolozza bianca
        fa aprire tendine e calendari neri su pagina bianca, e cambia il
        colore del riempimento automatico di Chrome.
      · 04-rifiniture: il pulsante FAQ della barra superiore e il pulsante
        principale dell'eroe usano `--sc-mar` con testo bianco. Misurati
        3,94:1 su un testo di 11px (FAQ) e 14,5px semigrassetto (eroe):
        entrambi sotto la soglia AA di 4,5:1, e nessuno dei due e' "testo
        grande". Basta passare a `--sc-mar-vivo` (#226E78, 5,88:1).
      · 04-rifiniture: le tre prove dell'eroe ("minimum order", "papers in
        stock", "shipping") usano `--sc-ink-4` a 11,5px: 3,90:1. Vedi (a).
   ========================================================================== */