/* ============================================================
   EF TRADING — foglio di stile del design
   Child theme: eftrading-child   ·   Tema padre: Astra
   Carattere: corporate-morbido. Navy + azzurri, tutto arrotondato,
   ombre basse. Hero e CTA finale come uniche zone scure.
   L'accento rosso compare UNA volta sola (bottone CTA finale).
   Sorgente di verità del design:
   gcore-design/design/siti/eftrading/css/02-eftrading.css
   ============================================================ */

/* ── I 32 --eft-* NON SI DEFINISCONO PIU' QUI — 12/09/2026, passo 3 della migrazione.
 *    Vivono in `tokens.css`, accodato PRIMA di questo foglio come dipendenza dichiarata,
 *    dove sono alias dei token nuovi `--dpi-*`. Finche' stavano anche qui, queste
 *    definizioni VINCEVANO sugli alias (stessa specificita', caricate dopo) e i quattro
 *    cambi voluti non si vedevano: chi collaudava il passo 2 cercandoli concludeva che
 *    l'installazione fosse fallita.
 * ⇒ Da adesso si vedono. I tre visibili a occhio, dichiarati e misurati:
 *      --eft-fondo-4  #33404F -> #0B1F45  (dE 17.9) i pannelli scheda diventano piu' scuri
 *      --eft-tinta-6  #C9D7E8 -> #E2EBF9  (dE  7.4) i link del piede erano PIU' SPENTI del
 *                                                   testo intorno: gerarchia invertita
 *      --eft-fondo-6  #081D40 -> #071230  (dE  5.8) il piede si stacca dall'hero (8.0->14.1)
 *    Gli altri 19 spostamenti stanno sotto la soglia di percezione (dE <= 2.29).
 * ⚠️ Se un domani `tokens.css` non si accoda, questo foglio resta SENZA i suoi colori.
 *    La dipendenza e' dichiarata in functions.php e si accoda solo se il file esiste. */
/* ── LE TINTE DELLA FAMIGLIA AZZURRA, PROMOSSE A VARIABILI (07/09) ──────────────
 * Erano 22 valori esadecimali scritti a mano dentro le regole: per cambiare l'azzurro
 * del sito bisognava trovarli uno per uno, e chi ne saltava uno otteneva una palette
 * scollata senza nessun errore che glielo dicesse.
 *
 * 🔴 E NON LE HO COLLASSATE IN TRE O QUATTRO, come sarebbe stato piu' ordinato: #DCE8F4
 *    e #C3D0E0 sono visibilmente diversi (luminosita' 0.91 contro 0.82), e unirli avrebbe
 *    CAMBIATO l'aspetto di oggi. Una messa in ordine che cambia il risultato non e' una
 *    messa in ordine: e' un ridisegno non dichiarato.
 *    ⇒ Qui ogni tinta tiene il suo valore esatto e prende un nome. Oggi non cambia un pixel;
 *      domani si cambiano da un punto solo. Ridurle a una scala derivata dal blu base e' il
 *      passo dopo, e va deciso guardando, non di nascosto dentro un refactor.
 *
 * I nomi dicono il RUOLO, non il colore: velo (sfondi chiarissimi), tinta (sfondi chiari),
 * mezzo (mezzi toni), fondo (scuri). Un nome come `--eft-azzurro-3` invecchia il giorno che
 * l'azzurro diventa verde. */


/* ---------- Base ---------- */
body{ color:var(--eft-muted); }
h1,h2,h3,h4,h5,h6{ color:var(--eft-navy); letter-spacing:-.01em; }
a{ color:var(--eft-blue); }
a:hover{ color:var(--eft-navy); }

/* larghezza contenuto coerente col design (Astra la imposta anche via opzione) */
.ast-container{ max-width:1180px; }

/* Home a tutta larghezza: annulla il contenitore "boxed" di Astra
   (scoping su .site-content / .home per non toccare header e footer) */
.home #content,
.home #content > .ast-container,
.home #primary,
.home #main,
.home .site-main,
.home .site-main > article.ast-article-single{
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.home .entry-header{ display:none !important; }
.home .entry-content{ margin:0 !important; }
.home .entry-content > *:last-child{ margin-bottom:0 !important; }

/* niente "global padding" di WordPress sui gruppi full-bleed della home */
.home .entry-content > .wp-block-group.alignfull{ padding-left:0 !important; padding-right:0 !important; }

/* TUTTO il contenuto della home allineato al container 1180 del design */
.eft-hero-inner,
.eft-benefits-grid,
.eft-section > .eft-head,
.eft-cat-grid,
.eft-sec-grid,
.eft-section > .woocommerce,
.eft-shop-more,
.eft-pers-inner,
.eft-cta{
  width:min(1180px, calc(100% - 96px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:1180px;
}
.eft-section > .eft-head{ max-width:720px; }

/* ---------- Bottoni ---------- */
.wp-block-button__link,
.wp-block-button .wp-block-button__link.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit{
  background-color:var(--eft-navy) !important;
  color:#fff !important;
  border:1.5px solid transparent;
  border-radius:10px;
  font-weight:800;
  padding:14px 24px;
  transition:transform .15s ease, background .15s ease;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{ background:var(--eft-fondo-3); color:#fff; transform:translateY(-1px); }
.eft-hero .wp-block-button.is-style-outline .wp-block-button__link{
  background-color:transparent !important;
  border-color:rgba(255,255,255,.75);
  color:#fff !important;
}
/* l'unico bottone accento del sito: CTA finale */
.eft-btn-accent .wp-block-button__link{ background-color:var(--eft-accent) !important; }
.eft-btn-accent .wp-block-button__link:hover{ background-color:#d92f3d !important; }

/* ---------- Utility di sezione ---------- */
.eft-eyebrow{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--eft-blue);
  margin-bottom:12px;
}
.eft-eyebrow.is-pale{ color:var(--eft-mezzo-1); }

.eft-section{ padding-block:82px; }
.eft-section.is-soft{ background:var(--eft-soft); }

.eft-head{ max-width:720px; margin-inline:auto; margin-bottom:40px; text-align:center; }
.eft-head h2{ font-size:36px; line-height:1.15; margin:0 0 12px; }
.eft-head p{ margin:0; color:var(--eft-muted); }

/* segnaposto immagine (finché non arrivano le foto vere) */
.eft-ph{
  display:grid; place-items:center;
  background:var(--eft-ph-bg); color:var(--eft-ph-fg);
  border-radius:12px; min-height:140px;
}

/* ---------- HERO ----------
   Foto a tutta altezza sulla destra, che passa SOTTO un pannello navy
   con il bordo destro TAGLIATO IN DIAGONALE. Il testo sta sul navy. */
.eft-hero{
  position:relative;
  background:var(--eft-tinta-4);                 /* base azzurra (lato destro) */
  overflow:hidden;
  padding-block:0 !important;
}
.eft-hero .eft-hero-inner{
  position:relative;
  display:grid; grid-template-columns:44% 56%;
  align-items:stretch;
  min-height:475px;
}
/* la foto: da ~26% fino al bordo destro del viewport, dietro a tutto */
.eft-hero-media{
  position:absolute; z-index:1;
  top:0; bottom:0;
  left:26%;
  right:calc(50% - 50vw);
  min-height:475px;
}
.eft-hero-media .wp-block-image,
.eft-hero-media .eft-ph{ position:absolute; inset:0; margin:0; height:auto; }
.eft-hero-media .wp-block-image img,
.eft-hero-media > .eft-ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 15%; border-radius:0; display:block; }

/* colonna testo: pannello navy full-bleed a sinistra, bordo destro TAGLIATO IN DIAGONALE */
.eft-hero-copy{
  position:relative; z-index:2;
  align-self:stretch;
  display:flex; flex-direction:column; justify-content:center;
  padding:64px 92px 64px 0;
  color:#fff;
}
.eft-hero-copy::before{
  content:"";
  position:absolute; z-index:-1;
  top:0; bottom:0; right:0;
  left:calc(50% - 50vw);
  background:var(--eft-fondo-5);
  clip-path:polygon(0 0, 100% 0, calc(100% - 110px) 100%, 0 100%);
}
.eft-hero-copy h1{
  color:#fff; font-size:clamp(28px,2.7vw,40px); line-height:1.1;
  letter-spacing:-.03em; margin:0 0 18px; max-width:100%;
}
.eft-hero-copy p{ color:var(--eft-velo-5); font-size:17px; max-width:100%; margin:0 0 28px; }

/* ---------- BENEFITS ---------- */
.eft-benefits{ border-bottom:1px solid var(--eft-border); }
.eft-benefits .eft-benefits-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:1180px; margin-inline:auto;
}
.eft-benefit{
  padding:26px 22px;
  border-right:1px solid var(--eft-border);
}
.eft-benefit:last-child{ border-right:0; }
.eft-benefit h3{ font-size:14.5px; margin:8px 0 4px; }
.eft-benefit p{ font-size:12.5px; margin:0; color:var(--eft-muted); }
.eft-benefit svg{ width:26px; height:26px; color:var(--eft-blue); }

/* ---------- CATEGORIE ---------- */
.eft-cat-grid{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px;
}
.eft-cat-card{
  background:#fff; border:1px solid var(--eft-border); border-radius:16px;
  padding:15px; box-shadow:var(--eft-shadow-rest);
  display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.eft-cat-card:hover{ transform:translateY(-4px); box-shadow:var(--eft-shadow-raised); color:inherit; }
.eft-cat-card img,
.eft-cat-card .eft-ph{
  width:100%; height:140px; border-radius:12px; background:var(--eft-velo-1);
  object-fit:contain; /* ritagli prodotto su fondo chiaro */
}
.eft-cat-card h3{ font-size:16px; margin:0; }
.eft-cat-card .eft-go{ font-size:12px; font-weight:700; color:var(--eft-blue); letter-spacing:.02em; }
.eft-cat-card,
.eft-cat-card:hover,
.eft-cat-card h3,
.eft-cat-card .eft-go{ text-decoration:none !important; }
.eft-cat-card:hover .eft-go{ color:var(--eft-navy); }

/* ---------- SETTORI ---------- */
.eft-sec-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;
}
.eft-sec-card{
  position:relative; min-height:270px; border-radius:18px; overflow:hidden;
  box-shadow:var(--eft-shadow-raised);
  display:flex; align-items:flex-end;
  text-decoration:none; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.eft-sec-card:hover{ transform:translateY(-4px); color:inherit; }
.eft-sec-card img,
.eft-sec-card .eft-ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%; border-radius:0; margin:0; }
.eft-sec-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(transparent 30%,rgba(3,17,40,.92));
}
.eft-sec-card .eft-sec-copy{ position:relative; z-index:1; padding:20px; color:#fff; }
.eft-sec-card h3{ color:#fff; font-size:19px; margin:0 0 4px; }
.eft-sec-card p{ color:var(--eft-tinta-2); font-size:13px; margin:0; }

/* ---------- PERSONALIZZAZIONE ---------- */
.eft-pers{ background:linear-gradient(180deg,#fff,var(--eft-velo-3)); }
.eft-pers .eft-pers-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  max-width:1180px; margin-inline:auto;
}
.eft-pers h2{ font-size:36px; margin:0 0 14px; }
.eft-pers .eft-lead{ color:var(--eft-muted); margin:0 0 28px; max-width:460px; }
.eft-steps{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; }
.eft-step{
  background:#fff; border:1px solid var(--eft-border); border-radius:15px; padding:18px;
}
.eft-step .eft-step-n{
  width:34px; height:34px; border-radius:50%;
  background:var(--eft-navy); color:#fff; font-weight:800; font-size:14px;
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.eft-step h3{ font-size:16px; margin:0 0 4px; }
.eft-step p{ font-size:13px; line-height:1.45; margin:0; color:var(--eft-muted); }
.eft-pers-media .wp-block-image{ margin:0; }
.eft-pers-media img,
.eft-pers-media .eft-ph{ width:100%; height:100%; min-height:420px; max-height:520px; border-radius:22px; box-shadow:var(--eft-shadow-raised); object-fit:cover; object-position:50% 20%; display:block; }

/* ---------- PRODOTTI (shortcode WooCommerce [products]) ---------- */
.eft-prod-grid,
.eft-products ul.products{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:18px !important;
  margin:0 !important; padding:0 !important; list-style:none;
}
.eft-prod-card,
.eft-products ul.products li.product{
  background:#fff; border:1px solid var(--eft-border); border-radius:17px;
  padding:16px; box-shadow:var(--eft-shadow-rest);
  width:auto !important; margin:0 !important; float:none !important;
  display:flex; flex-direction:column; gap:8px; text-align:left;
}
.eft-prod-card img,
.eft-prod-card .eft-ph,
.eft-products ul.products li.product img{
  width:100%; height:180px; border-radius:12px; background:var(--eft-velo-2); object-fit:contain; margin:0 0 4px !important;
}
.eft-prod-card h3,
.eft-products ul.products li.product .woocommerce-loop-product__title{
  font-size:15px; color:var(--eft-navy) !important; margin:0 !important; padding:0 !important; font-weight:700;
}
.eft-products ul.products li.product a{ text-decoration:none; }
.eft-prod-card .eft-price,
.eft-products ul.products li.product .price{
  font-weight:800; color:var(--eft-navy) !important; font-size:15px; margin:0;
}
.eft-products ul.products li.product .price del{ opacity:.5; font-weight:600; }
.eft-products ul.products li.product .button,
.eft-products ul.products li.product .added_to_cart{
  border-radius:9px !important; padding:10px 16px !important; font-size:13px !important;
  margin-top:auto !important; align-self:flex-start;
}
.eft-products ul.products li.product .star-rating{ display:none; }
.eft-shop-more{ margin-top:36px; }

/* ---------- CTA FINALE ---------- */
.eft-cta{
  background:linear-gradient(90deg,rgba(6,31,68,.98),rgba(11,56,108,.92));
  color:#fff; border-radius:22px; padding:48px;
  box-shadow:var(--eft-shadow-raised);
  display:grid; grid-template-columns:66% 34%; gap:32px; align-items:center;
  max-width:1180px; margin-inline:auto;
}
.eft-cta h2{ color:#fff; font-size:32px; margin:0 0 12px; }
.eft-cta p{ color:var(--eft-tinta-3); margin:0; }
.eft-cta a{ color:#fff; }
.eft-cta-side{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.eft-cta-side .eft-tel{ color:#fff; font-weight:700; }
.eft-cta-side .eft-tel a{ color:#fff; }

/* ============================================================
   CROMATURE ASTRA — header, menu, footer
   ============================================================ */

/* --- Above header (barra contatti navy) --- */
.ast-above-header-wrap .ast-above-header-bar{ font-size:12.5px; }
.ast-above-header .ast-header-html p{ margin:0; display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.ast-above-header .site-header-above-section-right .ast-header-html p{ gap:16px; }
.ast-above-header .ast-header-html .eft-hb{ white-space:nowrap; }
.ast-above-header .ast-header-html a{ text-decoration:none; color:#fff; }
.ast-above-header .ast-header-html a:hover{ color:var(--eft-mezzo-1); }

/* --- Header primario --- */
.ast-primary-header-bar{ border-bottom:1px solid var(--eft-border); }
.main-header-menu .menu-link,
.ast-hfb-header .main-header-menu > .menu-item > .menu-link{
  font-weight:600; color:var(--eft-navy);
}
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link{ color:var(--eft-blue); }
.ast-header-account-wrap .ast-header-account-link,
.ast-site-header-cart .ast-cart-menu-wrap{ color:var(--eft-navy); }

/* --- Footer navy --- */
.site-footer,
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap,
.site-footer .site-above-footer-wrap{ background-color:var(--eft-fondo-6) !important; }
.site-footer{ color:var(--eft-tinta-1); }
.site-primary-footer-wrap{ padding-block:56px; }
.site-footer .widget-title{
  color:#fff; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:14px;
}
.site-footer .widget_custom_html ul{ list-style:none; margin:0; padding:0; }
.site-footer .widget_custom_html li{ margin-bottom:8px; }
.site-footer .widget_custom_html a{ color:var(--eft-tinta-6); }
.site-footer .widget_custom_html a:hover{ color:#fff; }
.site-below-footer-wrap{
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px; color:var(--eft-mezzo-2);
}
.site-below-footer-wrap a{ color:var(--eft-mezzo-2); }
.site-below-footer-wrap a:hover{ color:#fff; }

/* ============================================================
   RESPONSIVE  (breakpoint di Astra: 921px tablet, 544px mobile)
   ============================================================ */
@media (max-width:921px){
  /* hero impilato: navy sopra (dritto), foto sotto */
  .eft-hero{ background:var(--eft-fondo-5); }
  .eft-hero .eft-hero-inner{ display:block; }
  .eft-hero-copy{ padding:54px 20px 40px; }
  .eft-hero-copy::before{ display:none; }
  .eft-hero-media{
    position:relative; inset:auto; left:auto; right:auto;
    display:block; height:360px; min-height:360px;
    margin-inline:-20px;
  }
  .eft-hero-media .wp-block-image,
  .eft-hero-media .wp-block-image img,
  .eft-hero-media .eft-ph{ height:360px; }
  .eft-benefits .eft-benefits-grid{ grid-template-columns:1fr 1fr; }
  .eft-benefit:nth-child(2){ border-right:0; }
  .eft-cat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .eft-sec-grid{ grid-template-columns:1fr 1fr; }
  .eft-pers .eft-pers-inner{ grid-template-columns:1fr; gap:32px; }
  .eft-prod-grid,
  .eft-products ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .eft-cta{ grid-template-columns:1fr; gap:20px; padding:36px; }
}
@media (max-width:544px){
  .eft-section{ padding-block:60px; }
  .eft-head h2,
  .eft-pers h2{ font-size:29px; }
  .eft-benefits .eft-benefits-grid{ grid-template-columns:1fr; }
  .eft-benefit{ border-right:0; border-bottom:1px solid var(--eft-border); }
  .eft-cat-grid{ grid-template-columns:1fr 1fr; }
  .eft-cat-card img,
  .eft-cat-card .eft-ph{ height:115px; }
  .eft-sec-grid{ grid-template-columns:1fr; }
  .eft-steps{ grid-template-columns:1fr; }
  .eft-prod-grid,
  .eft-products ul.products{ grid-template-columns:1fr; }
  .eft-cta{ padding:28px; }
}

/* ============================================================
   CATALOGO  —  pagina /catalogo/  +  shortcode [eft_catalogo]
   56 categorie WooCommerce raggruppate in 8 aree.
   ============================================================ */
.eft-catalogo{ width:min(1180px, calc(100% - 96px)); max-width:1180px; margin-inline:auto; }
.eft-catalogo-stats{ font-size:13px; color:var(--eft-muted); margin:4px 0 30px; }
.eft-catalogo-stats b{ color:var(--eft-navy); }
.eft-catalogo-note{ margin-top:36px; padding-top:22px; border-top:1px solid var(--eft-border); font-size:13px; color:var(--eft-muted); text-align:center; }
.eft-catalogo-note b{ color:var(--eft-navy); }

/* --- landing: le 8 card area --- */
.eft-area-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.eft-area-card{
  background:#fff; border:1px solid var(--eft-border); border-radius:18px; padding:22px;
  box-shadow:var(--eft-shadow-rest); text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:12px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.eft-area-card:hover{ transform:translateY(-4px); box-shadow:var(--eft-shadow-raised); color:inherit; }
.eft-area-card.is-wide{ grid-column:span 2; flex-direction:row; align-items:flex-start; gap:18px; }
.eft-area-ic{
  width:44px; height:44px; border-radius:12px; flex:none;
  background:var(--eft-soft); color:var(--eft-blue); display:grid; place-items:center;
}
.eft-area-ic svg{ width:24px; height:24px; }
.eft-area-body{ display:flex; flex-direction:column; gap:6px; }
.eft-area-name{ font-size:18px; font-weight:800; color:var(--eft-navy); letter-spacing:-.01em; }
.eft-area-count{ font-size:12px; font-weight:700; color:var(--eft-blue); letter-spacing:.02em; }
.eft-area-ex{ font-size:13px; color:var(--eft-muted); line-height:1.5; }

/* --- vista di una singola area --- */
.eft-crumb{ font-size:12.5px; color:var(--eft-muted); margin:0 0 16px; }
.eft-crumb a{ color:var(--eft-blue); }
.eft-area-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; }
.eft-area-head .eft-area-ic{ width:48px; height:48px; }
.eft-area-head h2{ font-size:28px; margin:0 0 6px; color:var(--eft-navy); }
.eft-area-head p{ margin:0; color:var(--eft-muted); max-width:640px; }
.eft-area-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
.eft-area-tabs a{
  font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:999px;
  border:1px solid var(--eft-border); color:var(--eft-muted); background:#fff; text-decoration:none;
}
.eft-area-tabs a:hover{ color:var(--eft-navy); }
.eft-area-tabs a.is-on{ background:var(--eft-navy); color:#fff; border-color:var(--eft-navy); }

/* --- card categoria --- */
.eft-catalogo .eft-cat-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.eft-catalogo .eft-cat-card{
  background:#fff; border:1px solid var(--eft-border); border-radius:16px; padding:15px;
  box-shadow:var(--eft-shadow-rest); text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:9px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.eft-catalogo .eft-cat-card:hover{ transform:translateY(-4px); box-shadow:var(--eft-shadow-raised); }
.eft-cat-thumb{
  display:block; width:100%; height:130px; border-radius:12px;
  background:var(--eft-velo-1); border:1px solid var(--eft-border); object-fit:contain;
}
.eft-cat-thumb--ph{ display:grid; place-items:center; color:var(--eft-tinta-8); }
.eft-cat-thumb--ph svg{ width:34px; height:34px; }
.eft-catalogo .eft-cat-card h3{ font-size:15.5px; margin:0; color:var(--eft-navy); }
.eft-cat-n{ font-size:12px; font-weight:700; color:var(--eft-blue); }
.eft-cat-sub{ font-size:11.5px; color:var(--eft-muted); line-height:1.45; }

@media (max-width:921px){
  .eft-area-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .eft-area-card.is-wide{ grid-column:span 2; }
  .eft-catalogo .eft-cat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:544px){
  .eft-area-grid{ grid-template-columns:1fr; }
  .eft-area-card.is-wide{ grid-column:auto; flex-direction:column; }
  .eft-catalogo .eft-cat-grid{ grid-template-columns:1fr 1fr; }
}
.eft-catalogo-intro{ font-size:16px; color:var(--eft-muted); margin:0 0 6px; max-width:640px; }

/* --- catalogo per aree in home ([eft_catalogo compact]) --- */
.eft-catalogo--compact{ margin-block:0; }
.eft-catalogo-cta{ text-align:center; margin:30px 0 0; }
.eft-catalogo-cta a{ font-size:14px; font-weight:800; color:var(--eft-navy); text-decoration:none; }
.eft-catalogo-cta a:hover{ color:var(--eft-blue); }

/* --- sottocategorie come filtri (pagina categoria WooCommerce) --- */
.woocommerce .eft-filters,
.woocommerce-page .eft-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px;
}
.woocommerce .eft-filters a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:999px;
  border:1px solid var(--eft-border); color:var(--eft-muted); background:#fff;
  text-decoration:none; transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.woocommerce .eft-filters a span{ font-weight:600; color:var(--eft-mezzo-3); font-size:11px; }
.woocommerce .eft-filters a:hover{ color:var(--eft-navy); border-color:var(--eft-tinta-7); }
.woocommerce .eft-filters a.is-on{ background:var(--eft-navy); color:#fff; border-color:var(--eft-navy); }
.woocommerce .eft-filters a.is-on span{ color:rgba(255,255,255,.6); }

/* --- prezzo di acquisto (solo staff) --- */
/* v2 */
.eft-cost{
  display:flex; width:fit-content; align-items:baseline; gap:6px; flex-wrap:wrap;
  margin-top:5px; font-size:12px; font-weight:700;
  color:var(--eft-fondo-1); background:var(--eft-velo-4); border:1px solid var(--eft-tinta-5);
  border-radius:6px; padding:2px 8px; line-height:1.5;
}
.eft-cost .amount{ color:var(--eft-fondo-2); }
.eft-cost__lab{ font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:10px; opacity:.7; }
.eft-cost__m{ font-weight:800; color:#1f7a3d; }
.eft-cost__m.is-zero{ color:#b23b3b; }
.woocommerce ul.products li.product .eft-cost{ margin-top:3px; }
.woocommerce div.product .woocommerce-variation-price .eft-cost{ margin-left:8px; }

/* ============================================================
   MEGA-MENU  —  voce "Catalogo" (li.eft-has-mega)
   Desktop: pannello a tutta larghezza sotto l'header. Mobile: nascosto.
   ============================================================ */
@media (min-width:922px){
  /* il pannello si posiziona rispetto a #masthead: neutralizziamo i
     wrapper del menu che potrebbero fare da contenitore stretto */
  #masthead{ position:relative; }
  #masthead .site-header-section,
  #masthead .ast-builder-menu,
  #masthead .ast-builder-menu-1,
  #masthead .main-header-bar-navigation,
  #masthead .ast-nav-menu,
  #masthead .main-header-menu,
  #masthead .menu-item.eft-has-mega{ position:static; }

  .eft-mega{
    position:absolute; top:100%; left:0; right:0; z-index:99;
    background:#fff; border-top:3px solid var(--eft-navy);
    box-shadow:0 24px 60px rgba(11,31,69,.16);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .menu-item.eft-has-mega:hover > .eft-mega,
  .menu-item.eft-has-mega:focus-within > .eft-mega,
  .eft-mega:hover{
    opacity:1; visibility:visible; transform:none;
  }
  /* PONTE — funzionale: striscia invisibile che copre il vuoto
     tra la voce "Catalogo" e il pannello, così l'hover non si stacca */
  .eft-mega::before{
    content:""; position:absolute; left:0; right:0; bottom:100%; height:44px;
  }
  /* PONTE — visivo: "Catalogo" in blu + un cuneo navy sotto la voce,
     puntato verso il pannello, che si lega al suo bordo navy in alto */
  #masthead .main-header-menu,
  #masthead .ast-nav-menu,
  #masthead .main-navigation{ overflow:visible !important; }

  .menu-item.eft-has-mega > a{ position:relative; }
  .menu-item.eft-has-mega:hover > a,
  .menu-item.eft-has-mega:focus-within > a{ color:var(--eft-blue) !important; }

  .menu-item.eft-has-mega > a::before{
    content:""; position:absolute; left:50%; bottom:-25px;
    width:0; height:0;
    border-left:9px solid transparent; border-right:9px solid transparent;
    border-bottom:9px solid var(--eft-navy);
    transform:translateX(-50%) scale(.5);
    opacity:0; transition:opacity .16s ease, transform .16s ease;
    z-index:100;
  }
  .menu-item.eft-has-mega:hover > a::before,
  .menu-item.eft-has-mega:focus-within > a::before{
    opacity:1; transform:translateX(-50%) scale(1);
  }

  /* reset: dentro il pannello i link NON sono voci di menu Astra */
  .eft-mega ul,
  .eft-mega li{ min-height:0 !important; height:auto !important; line-height:1.4 !important; background:none !important; border:0 !important; }
  .eft-mega a{ padding:0 !important; margin:0 !important; min-height:0 !important; line-height:1.4 !important; border:0 !important; background:none !important; }
  .eft-mega li::before,
  .eft-mega li::after{ display:none !important; }

  .eft-mega-inner{
    width:min(1180px, calc(100% - 96px)); margin-inline:auto;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 34px;
    padding:30px 0 24px;
  }
  .eft-mega-col{ min-width:0; }
  .eft-mega-h{
    display:flex !important; align-items:center; gap:8px; white-space:nowrap;
    font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    color:var(--eft-navy) !important; text-decoration:none !important; margin:0 0 12px !important;
  }
  .eft-mega-h:hover{ color:var(--eft-blue) !important; }
  .eft-mega-ic{ color:var(--eft-blue); display:inline-flex; flex:none; }
  .eft-mega-ic svg{ width:16px; height:16px; }
  .eft-mega-col ul{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:6px; }
  .eft-mega-col li{ margin:0 !important; }
  .eft-mega-col li a{
    font-size:13px; color:var(--eft-muted) !important; text-decoration:none !important; font-weight:500;
  }
  .eft-mega-col li a:hover{ color:var(--eft-blue) !important; }
  .eft-mega-all{
    display:inline-block; margin-top:9px;
    font-size:11.5px; font-weight:700; color:var(--eft-blue) !important; text-decoration:none !important;
  }
  .eft-mega-foot{
    grid-column:1 / -1; border-top:1px solid var(--eft-border); margin-top:2px; padding-top:15px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    font-size:12.5px; color:var(--eft-muted);
  }
  .eft-mega-cta{
    font-size:12.5px; font-weight:800; color:#fff !important; text-decoration:none !important;
    background:var(--eft-navy); padding:9px 16px; border-radius:10px; white-space:nowrap;
  }
  .eft-mega-cta:hover{ background:var(--eft-fondo-3); color:#fff !important; }
}

@media (max-width:921px){
  .eft-mega{ display:none !important; }
}

/* ============================================================
   SCHEDA PRODOTTO — colori a pallino, taglie a pastiglia
   ============================================================ */
.woocommerce div.product form.cart.eft-has-swatches .variations select{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; opacity:0;
}
.eft-has-swatches .variations tr{ display:block; margin-bottom:14px; }
.eft-has-swatches .variations th.label{ display:block; padding:0 0 4px; font-weight:800; color:var(--eft-navy); }
.eft-has-swatches .variations td.value{ display:block; }
.woocommerce div.product .eft-has-swatches .reset_variations{ font-size:12px; margin-left:2px; }

.eft-swatches,.eft-sizes{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; }

.eft-swatch{
  position:relative; --sw:#e6e6e6;
  width:34px; height:34px; padding:0; border-radius:999px; cursor:pointer;
  border:1px solid var(--eft-border); background:#fff;
  display:inline-grid; place-items:center;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.eft-swatch > span{
  width:24px; height:24px; border-radius:999px; background:var(--sw);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
}
.eft-swatch--nohex{
  width:auto; height:34px; padding:0 13px; border-radius:999px;
  font-size:12.5px; font-weight:700; color:var(--eft-navy); line-height:1;
}
.eft-swatch--nohex.is-on{ background:var(--eft-navy); color:#fff; box-shadow:none; }
.eft-swatch:hover{ transform:translateY(-1px); border-color:var(--eft-tinta-8); }
.eft-swatch.is-on{ border-color:var(--eft-navy); box-shadow:0 0 0 2px var(--eft-navy); }
.eft-swatch.is-disabled{ opacity:.4; cursor:not-allowed; }
.eft-swatch.is-disabled::after{
  content:""; position:absolute; left:3px; right:3px; top:50%; height:1.5px;
  background:#b23b3b; transform:rotate(-45deg);
}

.eft-size{
  min-width:46px; height:40px; padding:0 12px; border-radius:10px; cursor:pointer;
  border:1px solid var(--eft-border); background:#fff; color:var(--eft-navy);
  font-weight:700; font-size:14px;
  transition:transform .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
.eft-size:hover{ transform:translateY(-1px); border-color:var(--eft-tinta-8); }
.eft-size.is-on{ background:var(--eft-navy); color:#fff; border-color:var(--eft-navy); }
.eft-size.is-disabled{ opacity:.45; cursor:not-allowed; text-decoration:line-through; }

.eft-chosen{ display:block; font-size:12.5px; color:var(--eft-muted); margin:6px 0 0; min-height:1.2em; }
.eft-chosen:not(:empty)::before{ content:"Scelto: "; opacity:.65; }

.woocommerce div.product .eft-has-swatches .reset_variations{ text-transform:none; }
/* bottone "aggiungi" spento finché la variante non è completa */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed{
  opacity:.4 !important; cursor:not-allowed;
}
.eft-has-swatches .single_variation_wrap .woocommerce-variation.single_variation{ margin-bottom:10px; }

/* ============================================================
   SCHEDA PRODOTTO — disponibilità, titolo, layout, correlati
   (5° pezzo di eftrading.css: base + catalogo + megamenu + varianti + prodotto)
   ============================================================ */

/* titolo prodotto: niente maiuscolo forzato (ora è già Iniziali Maiuscole) */
.woocommerce div.product .product_title{ text-transform:none; }

/* --- galleria: l'immagine non deve sfondare in altezza --- */
.woocommerce div.product .woocommerce-product-gallery{ margin-bottom:0; }
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image{
  max-height:540px;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img{
  max-height:540px; width:auto !important; margin-left:auto; margin-right:auto;
  object-fit:contain;
}
.woocommerce div.product .flex-control-thumbs{ margin-top:12px; }
.woocommerce div.product .flex-control-thumbs li img{ border-radius:8px; }

/* --- disponibilità della variante scelta --- */
.woocommerce div.product .eft-has-swatches .woocommerce-variation-availability{ margin:2px 0 8px; }
.woocommerce div.product .woocommerce-variation-availability p{ margin:0; }
.eft-avail{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:800; letter-spacing:.01em;
}
.eft-avail::before{
  content:""; width:9px; height:9px; border-radius:999px; background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.eft-avail--in{ color:#1a7a3c; }
.eft-avail--soon{ color:#b06f14; }
.eft-avail--out{ color:#b23b3b; }
.eft-stock{
  display:inline-block; margin-left:9px; padding:2px 9px; border-radius:999px;
  background:var(--eft-velo-4); color:var(--eft-fondo-1); font-size:11.5px; font-weight:800;
  vertical-align:middle; letter-spacing:.02em;
}

/* --- configuratore "personalizza online": pulito sotto le due colonne --- */
.woocommerce div.product .dpicalc{ clear:both; margin-top:36px; }
.woocommerce div.product{ margin-bottom:32px; }

/* --- schede: resta solo "Descrizione" --- */
.woocommerce div.product .woocommerce-tabs{ padding-top:8px; }
.woocommerce div.product .woocommerce-tabs ul.tabs{ padding-left:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ margin:0 6px 0 0; }
.woocommerce div.product .woocommerce-tabs .wc-tab > h2:first-child{ display:none; }
.woocommerce div.product .woocommerce-tabs .panel{ font-size:14.5px; line-height:1.7; color:var(--eft-fondo-4); }

/* --- prodotti correlati: stesso respiro delle sezioni home --- */
.woocommerce .related.products{
  margin-top:44px; padding-top:32px; border-top:1px solid var(--eft-border); clear:both;
}
.woocommerce .related.products > h2{
  font-size:22px; font-weight:800; color:var(--eft-navy); margin:0 0 22px;
}


/* ============================================================
   CURA MOBILE — 19/09/2026
   A 390px la griglia prodotti della home restava a 4 colonne
   (misurato: grid-template-columns = 56.17px x4, una lettera per riga).
   Le regole responsive esistenti perdevano contro l'!important della
   regola base: qui sono riscritte con !important.
   ============================================================ */
@media (max-width:921px){
  .eft-prod-grid,
  .eft-products ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:544px){
  /* Due colonne anche sul telefono e non una sola: a una colonna la home
     passava da 9153px a oltre 12000px di altezza. A 390px vengono card
     da 165px, misurate leggibili. */
  .eft-prod-grid,
  .eft-products ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .eft-prod-card,
  .eft-products ul.products li.product{ padding:12px; border-radius:14px; }
  .eft-prod-card img,
  .eft-prod-card .eft-ph,
  .eft-products ul.products li.product img{ height:130px !important; }
  /* Margine laterale: i 96px del container desktop su uno schermo da 390px
     lasciavano 279px utili. Sul telefono 32px. */
  .eft-hero-inner,
  .eft-benefits-grid,
  .eft-section > .eft-head,
  .eft-cat-grid,
  .eft-sec-grid,
  .eft-section > .woocommerce,
  .eft-shop-more,
  .eft-pers-inner,
  .eft-cta{ width:calc(100% - 32px) !important; }
}

/* Prezzo del banco dentro la griglia della home: sulla home non e' caricato
   nessun foglio con le regole .dpi-dp-* (misurato: 0 regole), quindi i tre
   pezzi restavano display:inline e uscivano attaccati. Regole ridotte al
   minimo e legate a .eft-products, per non sovrascrivere il foglio del
   plugin sulle pagine dove c'e'. */
.eft-products .dpi-dp{ display:block; line-height:1.35; }
.eft-products .dpi-dp-listino,
.eft-products .dpi-dp-forte,
.eft-products .dpi-dp-debole{ display:block; }
.eft-products .dpi-dp-listino{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.6; }
.eft-products .dpi-dp-forte{ font-size:15px; font-weight:700; }
.eft-products .dpi-dp-debole{ font-size:12px; font-weight:400; opacity:.7; }