/* =============================================================================
   scatole.com — BIANCO CANDIDO · 04 RIFINITURE
   -----------------------------------------------------------------------------
   Due lavori chiesti dopo aver visto la direzione bianca:
     A. icone pulite sulle voci di menu
     B. il nuovo eroe che sostituisce Revolution Slider
   Carica per ultimo, dopo 01/02/03.
   ========================================================================== */

/* =============================================================================
   A · ICONE DEL MENU
   -----------------------------------------------------------------------------
   PERCHE' `mask-image` E NON `background-image`
   Con background l'icona avrebbe un colore fisso dentro l'SVG e resterebbe
   uguale al passaggio del mouse e sulla voce attiva. Con la maschera l'SVG
   fa solo da sagoma e il colore arriva da `background-color: currentColor`:
   l'icona segue il testo in ogni stato, gratis.

   PERCHE' AGGANCIATE ALL'INDIRIZZO E NON A UNA CLASSE
   Le voci sono link personalizzati senza classi utili. L'indirizzo e' l'unica
   cosa stabile. NB: puntano a `scatole.com` SENZA www — verificato dal vivo.
   Se un domani venissero riscritti con www, questi selettori vanno aggiornati:
   e' scritto qui perche' non diventi un mistero.
   ========================================================================== */

#header li.menu-item > a::before {
  content: "";
  /* IL TEMA FORZA `position: absolute` SUI ::before DELLE VOCI DI MENU.
     Senza questa riga l'icona si sovrappone alla scritta invece di
     affiancarla. Misurato dal vivo: left 20px, top 9,5px, sopra il testo.
     L'ancora e' gia' `display: flex`, quindi rimessa nel flusso l'icona
     diventa un elemento flessibile e si allinea da sola. */
  position: static;
  flex: 0 0 auto;
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 9px;
  vertical-align: -3px;
  background-color: currentColor;   /* l'icona prende il colore del testo */
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .72;
  transition: opacity var(--sc-veloce) var(--sc-curva),
              transform var(--sc-veloce) var(--sc-curva);
}
#header li.menu-item > a:hover::before,
#header li.current-menu-item > a::before,
#header li.current-menu-parent > a::before {
  opacity: 1;
  transform: translateY(-1px);
}

/* Le voci dei sottomenu NON prendono l'icona: sono nomi di prodotto, non
   categorie, e sei icone ripetute dentro una tendina fanno confusione. */
#header ul ul li.menu-item > a::before { content: none; }

/* --- casa ---------------------------------------------------------------- */
#header li.menu-item > a[href="https://www.scatole.com/"]::before,
#header li.menu-item > a[href="https://scatole.com/"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.2 12 3.4l9 6.8V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.2 12 3.4l9 6.8V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

/* --- gioielleria: pietra sfaccettata ------------------------------------- */
#header li.menu-item > a[href*="/product-category/jewelry"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10l4 6-9 12L3 9z'/%3E%3Cpath d='M3 9h18M9.5 9 12 21M14.5 9 12 21M7 3l2.5 6M17 3l-2.5 6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10l4 6-9 12L3 9z'/%3E%3Cpath d='M3 9h18M9.5 9 12 21M14.5 9 12 21M7 3l2.5 6M17 3l-2.5 6'/%3E%3C/svg%3E");
}

/* --- tecnologia: dispositivo --------------------------------------------- */
#header li.menu-item > a[href*="/product-category/technology"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M10.5 5.5h3M11 18.5h2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M10.5 5.5h3M11 18.5h2'/%3E%3C/svg%3E");
}

/* --- marketing: megafono -------------------------------------------------- */
#header li.menu-item > a[href*="/product-category/marketing"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4a1 1 0 0 0 1 1h3l6 4V5l-6 4h-3a1 1 0 0 0-1 1z'/%3E%3Cpath d='M17.5 9.2a4 4 0 0 1 0 5.6M20 6.8a7.5 7.5 0 0 1 0 10.4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4a1 1 0 0 0 1 1h3l6 4V5l-6 4h-3a1 1 0 0 0-1 1z'/%3E%3Cpath d='M17.5 9.2a4 4 0 0 1 0 5.6M20 6.8a7.5 7.5 0 0 1 0 10.4'/%3E%3C/svg%3E");
}

/* --- food: bottiglia/conserva -------------------------------------------- */
#header li.menu-item > a[href*="/product-category/food"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2.5h5v3.2c0 .8.3 1.5.9 2.1l1.2 1.3c.6.6.9 1.4.9 2.2v9.2a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6.5 20.5v-9.2c0-.8.3-1.6.9-2.2l1.2-1.3c.6-.6.9-1.3.9-2.1z'/%3E%3Cpath d='M6.5 13.5h11'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2.5h5v3.2c0 .8.3 1.5.9 2.1l1.2 1.3c.6.6.9 1.4.9 2.2v9.2a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6.5 20.5v-9.2c0-.8.3-1.6.9-2.2l1.2-1.3c.6-.6.9-1.3.9-2.1z'/%3E%3Cpath d='M6.5 13.5h11'/%3E%3C/svg%3E");
}

/* --- cura della persona: goccia ------------------------------------------ */
#header li.menu-item > a[href*="/product-category/personalcare"]::before,
#header li.menu-item > a[href*="/product-category/personal-care"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8c3.6 4.3 6.2 7.6 6.2 10.9A6.2 6.2 0 0 1 12 20.9a6.2 6.2 0 0 1-6.2-7.2c0-3.3 2.6-6.6 6.2-10.9z'/%3E%3Cpath d='M9.2 14.6a2.9 2.9 0 0 0 2.9 2.9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8c3.6 4.3 6.2 7.6 6.2 10.9A6.2 6.2 0 0 1 12 20.9a6.2 6.2 0 0 1-6.2-7.2c0-3.3 2.6-6.6 6.2-10.9z'/%3E%3Cpath d='M9.2 14.6a2.9 2.9 0 0 0 2.9 2.9'/%3E%3C/svg%3E");
}

/* Su telefono il menu e' verticale e le icone diventano ancora piu' utili:
   le lascio, ma piu' distanziate perche' il bersaglio resti comodo. */
@media (max-width: 991px) {
  #header li.menu-item > a::before { margin-right: 12px; opacity: .85; }
}


/* =============================================================================
   B · IL NUOVO EROE
   -----------------------------------------------------------------------------
   Sostituisce Revolution Slider. Il vecchio aveva tre difetti che nessun
   foglio di stile poteva togliere:
     · 900px di altezza fissa — su uno schermo normale riempiva tutta la
       prima videata e il negozio cominciava sotto la piega;
     · due file JavaScript (rbtools + rs6) caricati su OGNI pagina;
     · una diapositiva "GETTING READY FOR CHRISTMAS" ancora attiva ad agosto.
   Il nuovo e' HTML e CSS: nessuno script, altezza proporzionata allo schermo,
   testo vero (quindi traducibile da GTranslate e leggibile dai motori di
   ricerca — quello vecchio era stampato dentro un PNG).
   Il markup lo inserisce 000902-scatole-eroe-v1.php.
   ========================================================================== */

.sc-eroe {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  min-height: clamp(440px, 62vh, 620px);
  padding: clamp(40px, 5vw, 80px) clamp(20px, 5vw, 72px);
  background: var(--sc-fondo);
  border-bottom: 1px solid var(--sc-linea);
  overflow: hidden;
}

.sc-eroe__eyebrow {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sc-mar-testo);
  margin: 0 0 var(--sc-s4);
}

.sc-eroe h1 {
  font-family: var(--sc-disp);
  font-weight: 900;
  font-size: clamp(2.1rem, 4.4vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -.03em;
  color: var(--sc-ink);
  margin: 0 0 var(--sc-s4);
  text-wrap: balance;
}
.sc-eroe h1 em {
  font-style: normal;
  color: var(--sc-mar-testo);
}

.sc-eroe p {
  font-size: var(--sc-t-p);
  line-height: 1.7;
  color: var(--sc-ink-2);
  max-width: 46ch;
  margin: 0 0 var(--sc-s6);
}

.sc-eroe__azioni { display: flex; flex-wrap: wrap; gap: var(--sc-s3); }

.sc-eroe__cta,
.sc-eroe__cta2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 clamp(22px, 2.4vw, 34px);
  border-radius: var(--sc-r);
  font-family: var(--sc-testo);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva),
              border-color var(--sc-veloce) var(--sc-curva);
}
.sc-eroe__cta {
  background: var(--sc-mar-scuro);
  color: var(--sc-mar-ombra);      /* bianco: qui il testo e' grande e in grassetto */
  box-shadow: var(--sc-ombra-mar);
}
.sc-eroe__cta:hover {
  background: var(--sc-mar-scuro);
  transform: translateY(-2px);
  color: var(--sc-mar-ombra);
}
.sc-eroe__cta2 {
  background: transparent;
  color: var(--sc-ink);
  border: 1.5px solid var(--sc-linea-2);
}
.sc-eroe__cta2:hover {
  border-color: var(--sc-mar);
  color: var(--sc-mar-testo);
  transform: translateY(-2px);
}

/* --- la figura ------------------------------------------------------------
   La fotografia originale dello slider ha il titolo "CIAO! we are
   SCATOLE.COM" STAMPATO DENTRO, sulla destra. Ora quel titolo e' testo vero
   nella colonna di sinistra, quindi la versione stampata sarebbe un doppione.
   `object-position: left center` inquadra solo le scatole e lascia fuori la
   scritta: uso la loro fotografia vera senza dover rifare il file. */
.sc-eroe__figura {
  position: relative;
  align-self: stretch;
  min-height: clamp(240px, 34vh, 420px);
  border-radius: var(--sc-r);
  overflow: hidden;
  background: var(--sc-incasso);
}
.sc-eroe__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
  /* La foto e' 1896x799 e il riquadro ha quasi le stesse proporzioni: da sola
     `object-position: left` non ritaglia quasi nulla e si vedrebbe anche la
     scritta "CIAO! we are SCATOLE.COM" stampata a destra — doppione del
     titolo vero. Ingrandendo e ancorando a sinistra si inquadrano SOLO le
     scatole. Il file e' largo 1896px: a questo ingrandimento restano circa
     1000px di sorgente per ~660px a schermo, quindi nessuna perdita. */
  transform: scale(2.15);
  transform-origin: 3% 50%;
  transition: transform 700ms var(--sc-curva);
}
.sc-eroe:hover .sc-eroe__figura img { transform: scale(2.22); }

/* --- i tre argomenti sotto il titolo -------------------------------------- */
.sc-eroe__prove {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-s5);
  margin-top: var(--sc-s6);
  padding-top: var(--sc-s4);
  border-top: 1px solid var(--sc-linea);
}
.sc-eroe__prova {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-ink-4);
}
.sc-eroe__prova b {
  display: block;
  font-family: var(--sc-disp);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--sc-ink);
  margin-bottom: 2px;
}

/* --- comparsa morbida al caricamento, una volta sola ---------------------- */
@media (prefers-reduced-motion: no-preference) {
  .sc-eroe__eyebrow, .sc-eroe h1, .sc-eroe p,
  .sc-eroe__azioni, .sc-eroe__prove, .sc-eroe__figura {
    animation: sc-eroe-entra 620ms var(--sc-curva) both;
  }
  .sc-eroe h1          { animation-delay: 60ms; }
  .sc-eroe p           { animation-delay: 120ms; }
  .sc-eroe__azioni     { animation-delay: 180ms; }
  .sc-eroe__prove      { animation-delay: 240ms; }
  .sc-eroe__figura     { animation-delay: 90ms; }
  @keyframes sc-eroe-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- telefono -------------------------------------------------------------- */
@media (max-width: 880px) {
  .sc-eroe {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: var(--sc-s6) var(--sc-s4) var(--sc-s7);
  }
  .sc-eroe__figura { order: -1; min-height: 210px; }
  .sc-eroe p { margin-bottom: var(--sc-s5); }
  .sc-eroe__azioni { flex-direction: column; align-items: stretch; }
  .sc-eroe__cta, .sc-eroe__cta2 { width: 100%; }
  .sc-eroe__prove { gap: var(--sc-s4); }
  .sc-eroe__prova b { font-size: 1.25rem; }
}

/* =============================================================================
   C · LA BARRA SUPERIORE
   -----------------------------------------------------------------------------
   Aggancio con `:has()` invece che con l'identificativo Elementor
   (`elementor-element-0c0c549`): quegli identificativi cambiano se qualcuno
   ricrea il widget nel costruttore, mentre "la sezione dell'intestazione che
   contiene il selettore di lingua" resta vera comunque.
   ========================================================================== */

#header .e-con.e-parent:has(.gtranslate_wrapper) {
  --sc-barra-h: 42px;
  background: var(--sc-pannello);
  border-bottom: 1px solid var(--sc-linea);
  min-height: var(--sc-barra-h);
  padding-block: 0;
  align-content: center;
  position: relative;
  z-index: 3;
}

/* filo di luce petrolio sul bordo inferiore: si nota appena, ma dà spessore */
#header .e-con.e-parent:has(.gtranslate_wrapper)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--sc-mar) 40%, transparent) 22%,
    color-mix(in srgb, var(--sc-mar) 40%, transparent) 78%,
    transparent 100%);
  pointer-events: none;
}

#header .e-con.e-parent:has(.gtranslate_wrapper) .e-con-inner,
#header .e-con.e-parent:has(.gtranslate_wrapper) .e-child {
  min-height: var(--sc-barra-h);
  align-items: center;
}

/* tutto il testo della barra: piccolo, a spaziatura fissa, sobrio */
#header .e-con.e-parent:has(.gtranslate_wrapper)
  :where(a, p, span, div):not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) {
  font-family: var(--sc-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--sc-ink-3);
}

/* ---------------------------------------------------------------------------
   C1 · IL RICHIAMO AL CAMPIONE GRATUITO
   Un pallino che pulsa piano al posto dell'icona a cuore: dice "c'e' un'offerta"
   senza gridare. La freccia scorre al passaggio del mouse.
   ------------------------------------------------------------------------- */
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"],
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="get-in-touch"] {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--sc-ink-2);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--sc-veloce) var(--sc-curva);
}
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]::before,
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="get-in-touch"]::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sc-mar);
  flex: 0 0 auto;
  position: relative;
}
/* L'anello che pulsa: era un `box-shadow` animato all'infinito, cioe' una
   ridipintura continua che la scheda grafica non puo' comporre da sola e che
   non lascia mai la pagina in quiete. Rifatto con un pseudo-elemento che
   cresce in `transform` e svanisce in `opacity`: entrambe componibili, costo
   praticamente nullo. Stesso effetto a vedersi. */
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]::before,
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="get-in-touch"]::before {
  position: relative;
}
@keyframes sc-pulsa {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]::after,
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="get-in-touch"]::after {
  content: "→";
  font-family: var(--sc-testo);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity var(--sc-medio) var(--sc-curva),
              transform var(--sc-medio) var(--sc-curva);
}
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]:hover,
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="get-in-touch"]:hover { color: var(--sc-mar-testo); }
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]:hover::after,
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="get-in-touch"]:hover::after {
  opacity: 1; transform: translateX(0);
}

/* l'icona a cuore che c'era prima non serve piu': il pallino la sostituisce */
#header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-icon,
#header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-widget-icon { display: none; }

/* ---------------------------------------------------------------------------
   C2 · IL SELETTORE DI LINGUA — VIA LE BANDIERINE
   Una bandiera non e' una lingua: lo spagnolo non e' solo di Spagna, l'inglese
   non e' solo del Regno Unito, e per un negozio che vende all'estero e' un
   dettaglio che si nota. In piu' quattro bandierine da 24x18px sono la cosa
   piu' datata della pagina.
   Diventano un comando segmentato: quattro sigle, quella attiva in evidenza.
   ------------------------------------------------------------------------- */
#header .gtranslate_wrapper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--sc-incasso);
  border: 1px solid var(--sc-linea);
}

/* le bandierine spariscono */
#header .gtranslate_wrapper a.glink img { display: none !important; }

#header .gtranslate_wrapper a.glink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-family: var(--sc-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--sc-ink-4);
  text-decoration: none;
  position: relative;
  transition: color var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva),
              transform var(--sc-veloce) var(--sc-curva);
}
#header .gtranslate_wrapper a.glink:hover {
  color: var(--sc-ink);
  background: color-mix(in srgb, var(--sc-mar) 10%, transparent);
  transform: translateY(-1px);
}

/* la lingua attiva: pastiglia piena */
#header .gtranslate_wrapper a.glink.gt-current-lang {
  color: #fff;
  background: var(--sc-mar);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--sc-mar) 45%, transparent);
}
#header .gtranslate_wrapper a.glink.gt-current-lang:hover {
  background: var(--sc-mar-scuro);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   C3 · L'INDIRIZZO EMAIL — sottolineatura che cresce da sinistra
   ------------------------------------------------------------------------- */
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href^="mailto"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sc-ink-3);
  text-decoration: none;
  text-transform: none;
  transition: color var(--sc-veloce) var(--sc-curva);
}
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href^="mailto"]::before {
  content: "";
  width: 13px; height: 13px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: .7;
}
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href^="mailto"]::after {
  content: "";
  position: absolute;
  left: 20px; right: 0; bottom: -3px;
  height: 1px;
  background: var(--sc-mar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sc-medio) var(--sc-curva);
}
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href^="mailto"]:hover { color: var(--sc-mar-testo); }
#header .e-con.e-parent:has(.gtranslate_wrapper) a[href^="mailto"]:hover::after { transform: scaleX(1); }

/* il separatore verticale "|" del tema: troppo grezzo, diventa un filo */
#header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-divider,
#header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-divider-separator {
  border-color: var(--sc-linea-2) !important;   /* Elementor lo scrive inline */
  opacity: .8;
}

/* ---------------------------------------------------------------------------
   C4 · IL PULSANTE FAQ
   ------------------------------------------------------------------------- */
#header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--sc-mar-scuro);
  color: #fff;
  font-family: var(--sc-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  border: 0;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--sc-mar) 40%, transparent);
  transition: transform var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva);
}
#header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button:hover {
  background: var(--sc-mar-scuro);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--sc-mar) 42%, transparent);
}
#header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button span,
#header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button-text { color: #fff; }

/* ---------------------------------------------------------------------------
   C5 · TELEFONO
   La barra su schermo stretto tiene solo lingua e FAQ: il resto e' rumore.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #header .e-con.e-parent:has(.gtranslate_wrapper) { --sc-barra-h: 38px; }
  #header .gtranslate_wrapper a.glink { min-width: 30px; padding: 0 7px; }
}

/* chi ha chiesto meno movimento non vede pulsare niente */
@media (prefers-reduced-motion: reduce) {
  #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]::before,
  #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="get-in-touch"]::before {
    animation: none;
  }
}

/* =============================================================================
   D · "ADD A SHAPED INTERNAL PROTECTION" — icone al posto delle fotografie
   -----------------------------------------------------------------------------
   IL PROBLEMA DELLE FOTO
   Le cinque opzioni erano cinque fotografie scattate in cinque modi diversi:
   inquadrature, scale e luci incoerenti, e una quinta piastrella che non e'
   nemmeno una foto ma una scritta ("NO INTERNAL SHAPE"). Messe in fila fanno
   collage, non catalogo.

   IL PROBLEMA DI SOSTITUIRLE CON SEMPLICI ICONE
   Tre opzioni su cinque — kraft, nero, bianco — sono **lo stesso oggetto in
   materiali diversi**. Un'icona a tratto monocromatica le renderebbe identiche
   e butterebbe via l'unica informazione che le distingue.

   LA SOLUZIONE
   Icona per la FORMA (anello di schiuma / vassoio sagomato / nessuna) piu' una
   pastiglia di COLORE per il materiale. Due informazioni, un disegno solo.

   AGGANCIO
   Sui valori esatti degli input, che sono univoci in tutta la pagina.
   ATTENZIONE: nei dati il valore del kraft e' scritto **"Kraft Shaped Carboard"**
   — manca la `d` di "Cardboard". E' un refuso nell'amministrazione del
   configuratore, non mio: qui va usato cosi' com'e' o il selettore non aggancia.
   Se un domani lo correggono, va corretto anche qui.
   ========================================================================== */

/* --- la piastrella: la foto sparisce, resta la cornice ------------------- */
#main label:has(input[value="Black Shaped Foam"]) img,
#main label:has(input[value="Kraft Shaped Carboard"]) img,
#main label:has(input[value="Black Shaped Cardboard"]) img,
#main label:has(input[value="White Shaped Cardboard"]) img,
#main label:has(input[value="No Internal Shape"]) img {
  display: none;
}

#main label:has(input[value="Black Shaped Foam"]),
#main label:has(input[value="Kraft Shaped Carboard"]),
#main label:has(input[value="Black Shaped Cardboard"]),
#main label:has(input[value="White Shaped Cardboard"]),
#main label:has(input[value="No Internal Shape"]) {
  position: relative;
}

/* --- l'icona della forma ------------------------------------------------- */
#main label:has(input[value="Black Shaped Foam"])::before,
#main label:has(input[value="Kraft Shaped Carboard"])::before,
#main label:has(input[value="Black Shaped Cardboard"])::before,
#main label:has(input[value="White Shaped Cardboard"])::before,
#main label:has(input[value="No Internal Shape"])::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--sc-ink-3);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 58% 58%;     mask-size: 58% 58%;
  transition: background-color var(--sc-veloce) var(--sc-curva),
              transform var(--sc-medio) var(--sc-curva);
}

/* l'opzione scelta: l'icona si accende e sale di un pelo */
#main label:has(input:checked)::before {
  background-color: var(--sc-mar-testo);
  transform: translateY(-2px);
}

/* --- schiuma sagomata: anello spesso ------------------------------------- */
#main label:has(input[value="Black Shaped Foam"])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cellipse cx='24' cy='17' rx='16' ry='7'/%3E%3Cpath d='M8 17v14c0 3.9 7.2 7 16 7s16-3.1 16-7V17'/%3E%3Cellipse cx='24' cy='17' rx='6.5' ry='2.8'/%3E%3Cpath d='M17.5 17v14M30.5 17v14'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cellipse cx='24' cy='17' rx='16' ry='7'/%3E%3Cpath d='M8 17v14c0 3.9 7.2 7 16 7s16-3.1 16-7V17'/%3E%3Cellipse cx='24' cy='17' rx='6.5' ry='2.8'/%3E%3Cpath d='M17.5 17v14M30.5 17v14'/%3E%3C/svg%3E");
}

/* --- vassoio sagomato in cartone: gli stessi tre lo condividono ---------- */
#main label:has(input[value="Kraft Shaped Carboard"])::before,
#main label:has(input[value="Black Shaped Cardboard"])::before,
#main label:has(input[value="White Shaped Cardboard"])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M5 27 24 17l19 10-19 10z'/%3E%3Cpath d='M5 27v6l19 10 19-10v-6'/%3E%3Cpath d='M24 27v16'/%3E%3Crect x='16.5' y='22.5' width='15' height='7' rx='1.4' transform='skewX(-27)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M5 27 24 17l19 10-19 10z'/%3E%3Cpath d='M5 27v6l19 10 19-10v-6'/%3E%3Cpath d='M24 27v16'/%3E%3Crect x='16.5' y='22.5' width='15' height='7' rx='1.4' transform='skewX(-27)'/%3E%3C/svg%3E");
}

/* --- nessuna protezione: scatola vuota con tratteggio ------------------- */
#main label:has(input[value="No Internal Shape"])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M5 27 24 17l19 10-19 10z'/%3E%3Cpath d='M5 27v6l19 10 19-10v-6'/%3E%3Cpath d='M24 37v6'/%3E%3Cpath d='M16 26.5 24 22l8 4.5-8 4.5z' stroke-dasharray='2.6 3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M5 27 24 17l19 10-19 10z'/%3E%3Cpath d='M5 27v6l19 10 19-10v-6'/%3E%3Cpath d='M24 37v6'/%3E%3Cpath d='M16 26.5 24 22l8 4.5-8 4.5z' stroke-dasharray='2.6 3'/%3E%3C/svg%3E");
  opacity: .62;
}

/* --- la pastiglia del materiale ------------------------------------------
   E' il pezzo che l'icona da sola non puo' dire: kraft, nero e bianco sono lo
   stesso oggetto. Piccola, in alto a sinistra, con un anello chiaro cosi' anche
   il bianco si vede su fondo bianco. */
#main label:has(input[value="Black Shaped Foam"])::after,
#main label:has(input[value="Kraft Shaped Carboard"])::after,
#main label:has(input[value="Black Shaped Cardboard"])::after,
#main label:has(input[value="White Shaped Cardboard"])::after {
  content: "";
  position: absolute;
  top: 9px; left: 9px;
  width: 13px; height: 13px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--sc-fondo), 0 0 0 2.5px var(--sc-linea-2);
}
#main label:has(input[value="Black Shaped Foam"])::after      { background: #3C3C3C; }
#main label:has(input[value="Kraft Shaped Carboard"])::after  { background: #B08D57; }
#main label:has(input[value="Black Shaped Cardboard"])::after { background: #121212; }
#main label:has(input[value="White Shaped Cardboard"])::after { background: #FFFFFF; }

/* --- l'etichetta, gia' vestita dal foglio prodotto, qui solo respirata --- */
#main label:has(input[value="No Internal Shape"]) + .wcpa_image_label,
#main label:has(input[value="No Internal Shape"]) ~ .wcpa_image_label {
  color: var(--sc-ink-4);
}

/* chi ha chiesto meno movimento non vede l'icona salire */
@media (prefers-reduced-motion: reduce) {
  #main label:has(input:checked)::before { transform: none; }
}

/* =============================================================================
   E · CORREZIONE: le foto delle protezioni non sparivano
   -----------------------------------------------------------------------------
   La regola del blocco D nascondeva le foto con `display:none`, ma perdeva:
   il foglio 02-prodotto, che carica prima, dichiara le immagini delle
   piastrelle con `!important` (serve a battere lo `height:100px` inline che
   il plugin scrive su ogni immagine). Contro un `!important` non esiste
   specificita' che tenga: serve `!important` anche qui.
   Misurato dal vivo: `display` risultava ancora `block`, e le icone finivano
   SOPRA le fotografie invece che al loro posto.
   ========================================================================== */
#main .wcpa_image label:has(input[value="Black Shaped Foam"]) img,
#main .wcpa_image label:has(input[value="Kraft Shaped Carboard"]) img,
#main .wcpa_image label:has(input[value="Black Shaped Cardboard"]) img,
#main .wcpa_image label:has(input[value="White Shaped Cardboard"]) img,
#main .wcpa_image label:has(input[value="No Internal Shape"]) img {
  display: none !important;
}


/* =============================================================================
   F · PROJECT RECAP e PROJECT QUOTATION — le due caselle del prezzo
   -----------------------------------------------------------------------------
   Qui si parla di soldi: cosa hai scelto e quanto costa. Erano due fisarmoniche
   chiuse in fondo a una colonna. Ora sono aperte in modo permanente
   (l'attributo `open` lo aggiunge 000903 lato server) e vestite perche' si
   vedano da lontano.
   La freccia sparisce e il titolo non e' piu' cliccabile: se il prezzo deve
   restare visibile, non ha senso lasciare un comando che lo nasconde.
   ========================================================================== */

body.single-product #main details.e-n-accordion-item {
  background: var(--sc-fondo);
  border: 1px solid var(--sc-linea);
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-1);
  margin-bottom: var(--sc-s4);
  overflow: hidden;
}

/* la seconda casella e' il PREVENTIVO: si stacca dalle altre */
body.single-product #main details.e-n-accordion-item:nth-of-type(2),
body.single-product #main details.e-n-accordion-item + details.e-n-accordion-item {
  border-color: color-mix(in srgb, var(--sc-mar) 34%, transparent);
  box-shadow: var(--sc-ombra-2);
}

/* --- la testata --------------------------------------------------------- */
body.single-product #main details.e-n-accordion-item > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  background: var(--sc-incasso);
  border-bottom: 1px solid var(--sc-linea);
  font-family: var(--sc-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sc-ink);
  /* non piu' cliccabile: la casella resta aperta */
  pointer-events: none;
  cursor: default;
  list-style: none;
}
body.single-product #main details.e-n-accordion-item > summary::-webkit-details-marker { display: none; }
body.single-product #main details.e-n-accordion-item > summary::marker { content: ""; }

/* via la freccia: non c'e' piu' niente da aprire o chiudere */
body.single-product #main details.e-n-accordion-item > summary .e-n-accordion-item-title-icon,
body.single-product #main details.e-n-accordion-item > summary svg:last-child,
body.single-product #main details.e-n-accordion-item > summary .e-opened,
body.single-product #main details.e-n-accordion-item > summary .e-closed {
  display: none !important;
}

/* la testata del preventivo e' petrolio pieno: e' la casella che conta */
body.single-product #main details.e-n-accordion-item + details.e-n-accordion-item > summary {
  background: var(--sc-mar);
  color: var(--sc-mar-ombra);
  border-bottom-color: transparent;
}

/* --- il corpo ------------------------------------------------------------ */
body.single-product #main details.e-n-accordion-item > :not(summary) {
  padding: var(--sc-s4) 18px;
}

/* le voci del riepilogo: elenco leggibile, non un blocco di maiuscole strette */
body.single-product #main details.e-n-accordion-item li,
body.single-product #main details.e-n-accordion-item .elementor-icon-list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sc-s3);
  padding: 9px 0;
  border-bottom: 1px solid var(--sc-linea);
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--sc-ink-3);
}
body.single-product #main details.e-n-accordion-item li:last-child { border-bottom: 0; }

/* il valore scelto, quando c'e', e' l'informazione: va scuro e in evidenza */
body.single-product #main details.e-n-accordion-item li b,
body.single-product #main details.e-n-accordion-item li strong,
body.single-product #main details.e-n-accordion-item li .value {
  color: var(--sc-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* i numeri del preventivo: mono, incolonnati, grandi abbastanza da leggersi */
body.single-product #main details.e-n-accordion-item + details.e-n-accordion-item :where(td, .amount, .price, bdi) {
  font-family: var(--sc-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
}

/* la riga del totale, se c'e', e' quella che deve saltare all'occhio */
body.single-product #main details.e-n-accordion-item + details.e-n-accordion-item tr:last-child :where(td, th),
body.single-product #main details.e-n-accordion-item + details.e-n-accordion-item .order-total :where(td, th) {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 750;
  color: var(--sc-ink);
  padding-top: var(--sc-s3);
  border-top: 2px solid var(--sc-mar);
}

/* --- telefono ------------------------------------------------------------- */
@media (max-width: 767px) {
  body.single-product #main details.e-n-accordion-item > summary { padding: 13px 14px; font-size: 11px; }
  body.single-product #main details.e-n-accordion-item > :not(summary) { padding: var(--sc-s3) 14px; }
}

/* =============================================================================
   LA VOCE NUOVA DEL MENU — Base & Lid Studio
   -----------------------------------------------------------------------------
   Una voce in piu' in fila con le altre non la nota nessuno: e' esattamente il
   destino toccato al lab su sagomato.com, rimasto orfano per mesi perche' non
   c'era una porta per arrivarci. Qui la porta si vede.

   L'evidenziazione e' UNA sola: il velo marino piu' il pallino. Niente
   grassetto, niente colore diverso del testo, niente maiuscoletto. Tre segnali
   sovrapposti gridano; uno indica.
   ========================================================================== */
body .sc-voce-nuova > a {
  position: relative;
  background: var(--sc-mar-velo);
  border-radius: 999px;
  padding-left: 30px !important;
  padding-right: 16px !important;
  color: var(--sc-mar-testo) !important;
  transition: background-color 160ms ease, color 160ms ease;
}
body .sc-voce-nuova > a::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--sc-mar);
}
body .sc-voce-nuova > a:hover,
body .sc-voce-nuova.current-menu-item > a {
  background: var(--sc-mar);
  color: #fff !important;
}
body .sc-voce-nuova > a:hover::before,
body .sc-voce-nuova.current-menu-item > a::before { background: #fff; }

/* Il pallino pulsa una volta sola all'arrivo, poi sta fermo: un'animazione
   perpetua nella barra di navigazione diventa rumore dopo dieci secondi. */
@media (prefers-reduced-motion: no-preference) {
  body .sc-voce-nuova > a::before { animation: sc-pallino 2.6s ease-out 1; }
}
@keyframes sc-pallino {
  0%, 62% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc-mar) 55%, transparent); }
  84%     { box-shadow: 0 0 0 7px color-mix(in srgb, var(--sc-mar) 0%, transparent); }
  100%    { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc-mar) 0%, transparent); }
}

/* Sul telefono il menu e' una colonna: la pillola diventa una fascia. */
@media (max-width: 991px) {
  body .sc-voce-nuova > a { border-radius: 8px; }
}

/* La misura nel nome della riga di carrello (000913). */
.bl-riga-misura {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sc-incasso);
  font: 600 11px/1.5 var(--sc-mono);
  color: var(--sc-ink-2);
  white-space: nowrap;
}