/* ============================================================
   Sartelco Sistemi — Design tokens (child theme Woodmart)
   Fonte: variabili Figma. Da includere nel child theme.
   I colori/font principali sono gestiti da Woodmart Theme Settings;
   qui esponiamo le variabili per riuso (HTML Block, righe custom, ecc.)
   e qualche rifinitura non coperta dal pannello.
   ============================================================ */

:root {
  /* Colori brand */
  --st-blu: #00305b;          /* primario / navy */
  --st-azzurro: #9fdcee;      /* accento */
  --st-body: #666666;         /* testo corpo */
  --st-white: #ffffff;
  --st-stroke: #e8e8e8;       /* bordi / linee chiare */
  --st-header-dark: #192f43;  /* barra header scura */
  --st-card-border: #d9d9d9;  /* bordo card prodotto */
  --st-footer-text: #cacaca;
  --st-footer-line: #474747;
  --st-footer-muted: #9a9a9a;

  /* Font */
  --st-font-display: 'Outfit', sans-serif;  /* titoli */
  --st-font-body: 'Roboto', sans-serif;     /* corpo / UI */

  /* Scala tipografica desktop */
  --st-h1: 48px;
  --st-h2: 24px;
  --st-h3: 22px;
  --st-text-lg: 20px;
  --st-text-base: 16px;
  --st-text-sm: 15px;
  --st-text-xs: 14px;

  /* Spaziature di base (scala 8) */
  --st-space-1: 8px;
  --st-space-2: 16px;
  --st-space-3: 24px;
  --st-space-4: 32px;
  --st-space-5: 48px;
  --st-space-6: 80px;   /* padding verticale sezioni */
  --st-grid-gap: 30px;
}

/* --- Rifiniture tipografia (allineamento alla scala Figma) --- */
/* NB: famiglia font e colori base arrivano da Woodmart Theme Settings.
   Queste regole rifiniscono dimensioni/spaziatura dove serve. */

h1, .title-size-default h1 {
  font-family: var(--st-font-display);
  font-weight: 700;
  letter-spacing: -0.96px;
}

h2 {
  font-family: var(--st-font-display);
  letter-spacing: -0.48px;
}

/* Eyebrow / etichetta sezione (uppercase Outfit Medium) */
.st-eyebrow {
  font-family: var(--st-font-display);
  font-weight: 500;
  font-size: var(--st-h2);
  text-transform: uppercase;
  letter-spacing: -0.48px;
  line-height: 1.2;
}

/* Titolo card prodotto */
.st-card-title {
  font-family: var(--st-font-body);
  font-weight: 700;
  font-size: var(--st-text-sm);
  line-height: 24px;
  color: var(--st-body);
}

/* --- Card prodotto: bordo come da Figma --- */
.st-product-card {
  border: 1px solid var(--st-card-border);
}

/* ============================================================
   STEP 3 (placeholder) — Riga con angolo tagliato
   Si attiva assegnando la classe .st-row-cut alla Row WPBakery
   (campo "Extra class name" di Woodmart).
   I valori dell'angolo verranno rifiniti in fase di Step 3.
   ============================================================ */
:root {
  --st-cut-x: 152px;  /* taglio orizzontale (dal vettore Figma) */
  --st-cut-y: 90px;   /* taglio verticale (calibrato dal vivo: 138px del vettore era troppo alto) */
}
.st-row-cut {
  background-color: var(--st-blu);
  color: var(--st-white);
  /* angolo tagliato in ALTO a DESTRA (TR) */
  clip-path: polygon(0 0, calc(100% - var(--st-cut-x)) 0, 100% var(--st-cut-y), 100% 100%, 0 100%);
}
.st-row-cut a,
.st-row-cut .btn { color: var(--st-azzurro); }

/* Mobile: taglio ridotto proporzionalmente */
@media (max-width: 768px) {
  :root { --st-cut-x: 64px; --st-cut-y: 58px; }
}

/* ============================================================
   PRODOTTO singolo — Woodmart Layout "prodotti" (id 1178)
   Wrapper rows: .st-product (+ .st-product-top, .st-product-cols, .st-product-specs)
   ============================================================ */
.st-product { color: var(--st-body); }

/* Breadcrumb */
.st-product .woocommerce-breadcrumb,
.st-product .wd-breadcrumbs {
  font-family: var(--st-font-body);
  font-size: var(--st-text-xs);
  color: var(--st-body);
  line-height: 28px;
}
.st-product .woocommerce-breadcrumb a,
.st-product .wd-breadcrumbs a { color: inherit; }
.st-product .woocommerce-breadcrumb a:hover { color: var(--st-blu); }

/* Titolo prodotto: Outfit Medium 36/60 navy */
.st-product .product_title,
.st-product .wd-entities-title,
.st-product h1.product_title {
  font-family: var(--st-font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.4;
  letter-spacing: -0.72px;
  color: var(--st-blu);
  margin: 0 0 var(--st-space-2) 0;
}

/* ============================================================
   CARD PRODOTTO / CATEGORIA nel loop (archive)
   Pattern Figma 4070:40: thumb 1:1 con bordo grigio,
   titolo centrato sotto, hover overlay grigio + bottone SCOPRI TUTTO.
   Stessa estetica applicata a product card e sub-category card.
   ============================================================ */
.wd-products .wd-product.product-grid-item .wd-product-wrapper,
.wd-products .category-grid-item .wd-cat-inner {
  position: relative;
}
/* La .wd-cat-content (titolo+count) NON deve essere containing block,
   altrimenti il wrap del bottone si riferisce a lei (sotto la thumb)
   anziché a .wd-cat-inner. */
.wd-products .category-grid-item .wd-cat-content { position: static; }

/* THUMB della card: bordo grigio CSS del riquadro. Le immagini sorgente
   sono state "shavate" di 3px su tutti i lati (script /tmp/shave-cat-thumbs.sh)
   quindi qui basta il border CSS. */
.wd-products .wd-product .wd-product-thumb,
.wd-products .category-grid-item .wd-cat-thumb {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--st-card-border);
}

/* Overlay grigio sopra l'immagine on hover */
.wd-products .wd-product .wd-product-thumb::after,
.wd-products .category-grid-item .wd-cat-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(102, 102, 102, 0.8);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 5;
}
.wd-products .wd-product:hover .wd-product-thumb::after,
.wd-products .category-grid-item:hover .wd-cat-thumb::after { opacity: 1; }

/* Bottone "SCOPRI TUTTO" centrato sopra la thumb on hover.
   aspect-ratio:1 rende il wrap esattamente quadrato come la thumb (square),
   così top:50% sul bottone è il centro verticale della thumb. */
.wd-products .st-scopri-tutto-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 6;
}
.wd-products .wd-product:hover .st-scopri-tutto-wrap,
.wd-products .category-grid-item:hover .st-scopri-tutto-wrap {
  opacity: 1;
  pointer-events: auto;
}
.wd-products .st-scopri-tutto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--st-white);
  color: #222;
  border: 1px solid #8c8c8c;
  padding: 14px 22px;
  font-family: var(--st-font-display);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wd-products .st-scopri-tutto:hover {
  background: var(--st-blu);
  color: var(--st-white);
  border-color: var(--st-blu);
}

/* Il link nativo wd-fill (overlay categoria full-card) deve stare SOTTO
   il bottone SCOPRI TUTTO altrimenti intercetta tutti i click */
.wd-products .category-grid-item .wd-fill { z-index: 1; }

/* Titolo prodotto/categoria: Roboto Bold 15px center uppercase */
.wd-products .wd-product .wd-entities-title,
.wd-products .category-grid-item .wd-entities-title {
  text-align: center;
  font-family: var(--st-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 24px;
  color: var(--st-body);
  text-transform: uppercase;
  margin: var(--st-space-2);
}
.wd-products .wd-product .wd-entities-title a,
.wd-products .category-grid-item .wd-entities-title a { color: inherit; }

/* Nasconde elementi nativi non voluti dalle card */
.wd-products .wd-product .wd-product-cats,
.wd-products .wd-product .wd-buttons,
.wd-products .wd-product .wd-add-btn,
.wd-products .category-grid-item .wd-cat-count { display: none !important; }

/* ============================================================
   ARCHIVE CATEGORIA — layout 1177
   Immagine miniatura categoria (col 1/2 dx) e titolo "LA GAMMA"
   ============================================================ */

/* Titolo archivio (woodmart_shop_archive_woocommerce_title)
   Figma 4070:117 — Outfit Medium 48/60 navy */
body.tax-product_cat .wd-woo-page-title .entry-title,
body.tax-product_cat .wd-woo-page-title .title,
body.tax-product_cat .wd-woo-page-title span {
  font-family: var(--st-font-display);
  font-weight: 500;
  font-size: var(--st-h1);          /* 48px */
  line-height: 60px;
  letter-spacing: -0.96px;
  color: var(--st-blu);
  display: block;
}

/* Descrizione archivio (woodmart_shop_archive_description)
   Figma 4070:118 — Roboto Bold 16/24 #666 */
body.tax-product_cat .wd-shop-desc,
body.tax-product_cat .wd-shop-desc .term-description,
body.tax-product_cat .wd-shop-desc p {
  font-family: var(--st-font-body);
  font-weight: 700;
  font-size: var(--st-text-base);   /* 16 */
  line-height: 24px;
  color: var(--st-body);
}

/* Header image categoria: niente bordo / bg. Le miniature sono state
   shavate per rimuovere il bordo grigio interno. */
body.tax-product_cat .st-cat-image-col .wpb_text_column,
body.tax-product_cat .st-cat-image-col .wpb_wrapper,
body.tax-product_cat .st-cat-image-col .wd-image,
body.tax-product_cat .st-cat-image-col .wd-image img,
body.tax-product_cat .st-cat-image-col img {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Min-height da desktop: la thumb WC è cropped 270x270, riempiamo il box */
@media (min-width: 1025px) {
  body.tax-product_cat .st-cat-image-col .wd-image { min-height: 320px; display: flex; align-items: center; justify-content: center; }
  body.tax-product_cat .st-cat-image-col .wd-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

/* Marchio: la colonna è allineata col top della short description
   (Figma node 4063:437 top=888 vs short desc top=927) */
.st-product .st-product-brand-col > .vc_column-inner { padding-top: 80px; }
.st-product .wd-single-brands,
.st-product .wd-product-brands { margin: 0 0 var(--st-space-2) 0; }
.st-product .wd-single-brands .wd-label,
.st-product .wd-product-brands .wd-label {
  font-family: var(--st-font-display);
  font-weight: 500;
  font-size: var(--st-h2);          /* 24px come gli altri section-title */
  line-height: 1.4;
  letter-spacing: -0.48px;
  text-transform: uppercase;
  color: var(--st-blu);
  display: block;
  margin: 0 0 var(--st-space-2) 0;
}
@media (max-width: 768px) {
  .st-product .st-product-brand-col > .vc_column-inner { padding-top: 0; }
}

/* Short description: Roboto Bold 16/24 */
.st-product .woocommerce-product-details__short-description,
.st-product .wd-single-product-excerpt {
  font-family: var(--st-font-body);
  font-weight: 700;
  font-size: var(--st-text-base);
  line-height: 24px;
  color: var(--st-body);
  margin-bottom: var(--st-space-3);
}

/* Meta SKU / Categoria: Roboto 14, label bold */
.st-product .product_meta {
  font-family: var(--st-font-body);
  font-size: var(--st-text-xs);
  color: var(--st-body);
  line-height: 28px;
}
/* COD e Categoria sulla stessa riga (Figma node 4063:431/4063:434) */
.st-product .product_meta > span {
  display: inline-block;
  margin-right: var(--st-space-3);
  font-weight: 700; /* label "COD:"/"Categoria:" in bold */
}
.st-product .product_meta > span > a { color: inherit; }
.st-product .product_meta .sku,
.st-product .product_meta .posted_in a { font-weight: 400; } /* valori regular */

/* Sezioni: titolo Outfit Medium 24 uppercase con underline a due spessori SOPRA
   Pattern Figma (Group46): riga sottile 1px su tutta la larghezza della colonna
   + barra spessa 4px lunga ~11%, entrambe SOPRA il titolo. */
.st-product-section-title {
  position: relative;
  font-family: var(--st-font-display);
  font-weight: 500;
  font-size: var(--st-h2);          /* 24px */
  line-height: 1.4;
  letter-spacing: -0.48px;
  text-transform: uppercase;
  color: var(--st-blu);
  padding-top: 12px;
  border-top: 1px solid var(--st-blu);
  margin: var(--st-space-4) 0 var(--st-space-3) 0;
}
.st-product-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: -2.5px;                      /* centra il rect 4px sopra la riga 1px */
  width: var(--st-title-bar-w, 11%);
  height: 4px;
  background: var(--st-blu);
}

/* Descrizione prodotto: clamp + "Mostra di più" */
.st-product-desc {
  --st-desc-clamp: 720px;       /* ~30 righe @ 24px */
  position: relative;
  overflow: hidden;
  max-height: none;
}
.st-product-desc[data-collapsed="1"] {
  max-height: var(--st-desc-clamp);
}
.st-product-desc-fade {
  display: none;
  position: absolute;
  inset: auto 0 0 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--st-white));
  pointer-events: none;
}
.st-product-desc[data-collapsed="1"] .st-product-desc-fade { display: block; }

.st-show-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--st-space-3);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--st-font-body);
  font-weight: 700;
  font-size: var(--st-text-xs);
  line-height: 28px;
  color: var(--st-blu);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.st-show-more:hover { opacity: 0.7; }
.st-show-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--st-blu);
  transition: transform 0.2s ease;
}
.st-show-more[aria-expanded="true"] .st-show-more-icon {
  transform: rotate(180deg);
}

/* Documentazione — lista PDF */
.st-docs-list { list-style: none; padding: 0; margin: 0; }
.st-docs-item { margin-bottom: var(--st-space-2); }
.st-docs-item a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--st-font-body);
  font-weight: 700;
  font-size: var(--st-text-xs);
  color: var(--st-body);
  line-height: 28px;
  text-decoration: none;
}
.st-docs-item a:hover { color: var(--st-blu); }
.st-docs-icon { color: var(--st-blu); flex-shrink: 0; }
.st-docs-name { word-break: break-word; }

/* Specifiche tecniche: table key/value */
.st-specs {
  font-family: var(--st-font-body);
  color: var(--st-body);
  font-size: var(--st-text-base);
  line-height: 24px;
}
.st-specs table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
}
.st-specs table tr { border-bottom: 1px solid var(--st-stroke); }
.st-specs table td {
  padding: var(--st-space-2) var(--st-space-3) var(--st-space-2) 0;
  vertical-align: top;
  border: 0;
}
.st-specs table td:first-child { font-weight: 700; width: 30%; }
.st-specs table p { margin: 0; }

/* In evidenza (Woodmart product attrs): allinea grafica a .st-specs */
.st-product-specs .wd-single-attrs {
  font-family: var(--st-font-body);
  color: var(--st-body);
  font-size: var(--st-text-base);
  line-height: 24px;
  margin-bottom: var(--st-space-4);
}
.st-product-specs .wd-single-attrs .wd-el-title { display: none; }
.st-product-specs .wd-single-attrs .woocommerce-product-attributes,
.st-product-specs .wd-single-attrs .shop_attributes {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  --wd-attr-brd-style: none;
  --wd-attr-brd-width: 0;
}
.st-product-specs .wd-single-attrs .woocommerce-product-attributes-item {
  border-top: 0;
  border-bottom: 1px solid var(--st-stroke);
  display: table-row;
}
.st-product-specs .wd-single-attrs .woocommerce-product-attributes-item__label,
.st-product-specs .wd-single-attrs .woocommerce-product-attributes-item__value {
  padding: var(--st-space-2) var(--st-space-3) var(--st-space-2) 0;
  vertical-align: top;
  border: 0;
  background: transparent;
  text-align: left;
  flex: initial;
}
.st-product-specs .wd-single-attrs .woocommerce-product-attributes-item__label {
  width: 30%;
  font-weight: 700;
  color: var(--st-body);
}
.st-product-specs .wd-single-attrs .wd-attr-label,
.st-product-specs .wd-single-attrs .wd-attr-name {
  font-weight: 700;
  color: var(--st-body);
}
.st-product-specs .wd-single-attrs .wd-term {
  color: var(--st-body);
  text-decoration: none;
}
.st-product-specs .wd-single-attrs .wd-term:hover { color: var(--st-blu); }
.st-product-specs .wd-single-attrs .wd-term-name { color: inherit; }
.st-product-specs .wd-single-attrs .wd-term-sep { color: var(--st-body); }

/* ============================================================
   FASCIA CUSTOMER CARE — fondo grigio con taglio in alto a SX
   Wrapper Row WPBakery con extra class .st-contact-band
   ============================================================ */
.st-contact-band {
  background-color: var(--st-stroke-bg, #f2f2f2);
  /* angolo tagliato in ALTO a SX (mirror della .st-row-cut) */
  clip-path: polygon(var(--st-cut-x) 0, 100% 0, 100% 100%, 0 100%, 0 var(--st-cut-y));
  padding-top: 120px !important;
  padding-bottom: 80px !important;
  margin-bottom: 0 !important;
}

/* Pagina prodotto: sfondo grigio SOLO dietro il footer (per il taglio TR),
   content area bianca, niente striscia tra fascia e footer. */
body.single-product .wd-page-wrapper { background-color: #f2f2f2; }
body.single-product .main-page-wrapper {
  background-color: #ffffff;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body.single-product #main-content,
body.single-product .wd-content-area,
body.single-product .site-content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Footer risale di cut-y così il bordo top del footer "ingoia" qualunque
   residuo di margine/padding e il triangolo TR mostra grigio del wrapper. */
body.single-product .wd-footer.footer-container {
  margin-top: calc(var(--st-cut-y) * -1) !important;
  position: relative;
  z-index: 1;
}
.st-contact-band .vc_row,
.st-contact-band > .vc_column_container > .vc_column-inner { align-items: stretch; }

.st-contact-band .st-cc-eyebrow {
  font-family: var(--st-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--st-blu);
  text-align: center;
  margin: 0 0 var(--st-space-3) 0;
  position: relative;
  display: inline-block;
}
.st-contact-band .st-cc-eyebrow::before,
.st-contact-band .st-cc-eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80px;
  height: 1px;
  background: var(--st-blu);
}
.st-contact-band .st-cc-eyebrow::before { right: calc(100% + 16px); }
.st-contact-band .st-cc-eyebrow::after  { left: calc(100% + 16px); }
.st-contact-band .st-cc-eyebrow-wrap { text-align: center; }

.st-contact-band .st-cc-title {
  font-family: var(--st-font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 55px;
  letter-spacing: -0.8px;
  color: #222;
  text-align: center;
  margin: 0 0 var(--st-space-3) 0;
  max-width: 471px;
  margin-left: auto;
  margin-right: auto;
}
.st-contact-band .st-cc-lead {
  font-family: var(--st-font-body);
  font-size: 18px;
  line-height: 28px;
  color: var(--st-body);
  text-align: center;
  margin: 0;
  max-width: 455px;
  margin-left: auto;
  margin-right: auto;
}

/* Card bianca col form */
.st-cc-form-card {
  background: var(--st-white);
  padding: var(--st-space-5) var(--st-space-4);
  height: 100%;
}

/* Form CF7: campi con label sopra + line bottom */
.st-cc-form-card .st-cc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--st-space-3);
  margin: 0;
}
.st-cc-form-card .st-cc-field,
.st-cc-form-card .st-cc-privacy,
.st-cc-form-card .st-cc-submit { margin: 0 0 var(--st-space-3) 0; }
.st-cc-form-card .st-cc-field { display: block; }
.st-cc-form-card .st-cc-field label,
.st-cc-form-card .st-cc-privacy-title {
  display: block;
  font-family: var(--st-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #999;
  margin: 0 0 4px 0;
}
.st-cc-form-card .wpcf7-form-control-wrap { display: block; width: 100%; }
.st-cc-form-card .wpcf7-text,
.st-cc-form-card .wpcf7-email,
.st-cc-form-card .wpcf7-tel,
.st-cc-form-card .wpcf7-textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--st-stroke);
  border-radius: 0;
  padding: 4px 0;
  font-family: var(--st-font-body);
  font-size: 14px;
  color: var(--st-body);
  outline: none;
  box-shadow: none;
}
.st-cc-form-card .wpcf7-text:focus,
.st-cc-form-card .wpcf7-email:focus,
.st-cc-form-card .wpcf7-tel:focus,
.st-cc-form-card .wpcf7-textarea:focus { border-bottom-color: var(--st-blu); }
.st-cc-form-card .wpcf7-textarea { min-height: 80px; resize: vertical; }
.st-cc-form-card .st-cc-privacy {
  font-family: var(--st-font-body);
  font-size: 13px;
  line-height: 20px;
  color: #999;
}
.st-cc-form-card .st-cc-privacy a { color: var(--st-blu); text-decoration: underline; }
.st-cc-form-card .wpcf7-acceptance label { display: inline; font-weight: 400; font-size: 13px; color: #999; }
.st-cc-form-card .wpcf7-list-item { margin: 0; }
.st-cc-form-card .wpcf7-submit {
  background: var(--st-blu);
  color: var(--st-white);
  border: 0;
  padding: 18px 26px;
  font-family: var(--st-font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-transform: uppercase;
}
.st-cc-form-card .wpcf7-submit:hover { background: #00264a; }

@media (max-width: 768px) {
  .st-cc-form-card .st-cc-grid { grid-template-columns: 1fr; }
  .st-contact-band { padding-top: 80px !important; padding-bottom: 60px !important; }
  .st-contact-band .st-cc-title { font-size: 28px; line-height: 36px; }
}

/* ============================================================
   HERO CATEGORIA — block 1173 (Wireless) e simili
   Wrapper .st-hero su una Row WPBakery (Extra class name).
   Lo sfondo immagine si imposta nella tab "Design Options" della Row.
   ============================================================ */
.st-hero {
  position: relative;
  color: var(--st-white);
  background-color: var(--st-blu);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  align-items: center;
}
.st-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,48,91,0.78) 0%, rgba(0,48,91,0.35) 100%);
  pointer-events: none;
  z-index: 0;
}
.st-hero > .wpb_column,
.st-hero .vc_column-inner { position: relative; z-index: 1; }

.st-hero .st-eyebrow {
  color: var(--st-azzurro);
  margin: 0 0 var(--st-space-2) 0;
}
.st-hero h1.st-hero-title,
.st-hero h2.st-hero-title,
.st-hero .st-hero-title {
  font-family: var(--st-font-display);
  font-weight: 700;
  font-size: var(--st-h1);          /* 48px */
  line-height: 60px;
  letter-spacing: -0.96px;
  color: var(--st-white);
  margin: 0 0 var(--st-space-3) 0;
}
.st-hero .st-hero-desc {
  font-family: var(--st-font-body);
  font-weight: 700;
  font-size: var(--st-text-lg);      /* 20px */
  line-height: 28px;
  color: var(--st-white);
  max-width: 600px;
  margin: 0;
}

/* Nasconde il titolo categoria di Woodmart (sostituito dall'hero del block) */
body.tax-product_cat .wd-page-title,
body.tax-product_cat .wd-page-title-bg { display: none !important; }

/* ============================================================
   FOOTER — HTML block id=1145, wrapper .wd-footer.footer-container
   Tipografia da Figma node 6005:296 (col title 22/500/30, link 16/400/24).
   ============================================================ */
.wd-footer.footer-container {
  background-color: var(--st-blu);
  color: var(--st-footer-text);
  padding-top: var(--st-space-6);
  padding-bottom: var(--st-space-4);
  /* angolo tagliato TR identico alla .st-row-cut */
  clip-path: polygon(0 0, calc(100% - var(--st-cut-x)) 0, 100% var(--st-cut-y), 100% 100%, 0 100%);
}

/* Immagini footer: cap alle dimensioni Figma (logo 58, badge 49). */
.wd-footer .wd-image img {
  max-height: 60px;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Titoli colonne (Menu / Catalogo prodotti / Applicazioni / Legal) */
.wd-footer .widget-title,
.wd-footer h5.widget-title {
  font-family: var(--st-font-display);
  font-weight: 500;
  font-size: var(--st-h3);          /* 22px */
  line-height: 30px;
  color: var(--st-white);
  background: transparent;
  text-transform: none;
  padding: 0;
  border: 0;
  margin: 0 0 var(--st-space-3) 0;  /* 24px gap → voci (Figma ~49px tra y-title e y-items) */
}

/* Voci dei menu — compatte (override aggressivo di Woodmart vertical nav) */
.wd-footer .wd-nav.wd-nav-vertical { row-gap: 6px !important; gap: 6px !important; }
.wd-footer .wd-nav.wd-nav-vertical > li,
.wd-footer .wd-nav.wd-nav-vertical > li.menu-item {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.wd-footer .wd-nav .woodmart-nav-link,
.wd-footer .wd-nav > li > a {
  font-family: var(--st-font-body);
  font-weight: 400;
  font-size: var(--st-text-base);     /* 16px */
  line-height: 1.2;
  color: var(--st-footer-text);
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.wd-footer .wd-nav .nav-link-text { line-height: 1.2; }
.wd-footer .wd-nav a:hover,
.wd-footer .wd-nav a:focus { color: var(--st-white); }

/* Testo descrittivo (indirizzo, blurb) */
.wd-footer .wd-text-block,
.wd-footer .wd-text-block p {
  color: var(--st-footer-text);
  font-family: var(--st-font-body);
  font-size: var(--st-text-base);
  line-height: 24px;
}

/* Voci menu: niente bordi residui di Woodmart */
.wd-footer .wd-nav.wd-nav-vertical > li { border: 0; }
.wd-footer .wd-nav .woodmart-nav-link { padding: 0; }

/* Riga inferiore xs (holding + copyright) — selettore Woodmart 8.x */
.wd-footer .wd-text-block.wd-fontsize-xs,
.wd-footer .wd-fontsize-xs,
.wd-footer .wd-fontsize-xs p {
  font-size: var(--st-text-xs);     /* 14px */
  color: var(--st-footer-muted);
  line-height: 1.5;
}

/* Riga inferiore (3 colonne): linee separatrici sopra/sotto, allineamento, copyright dx */
.wd-footer .wpb-content-wrapper > .vc_row + .vc_row {
  align-items: center;
  border-top: 1px solid var(--st-footer-line);
  border-bottom: 1px solid var(--st-footer-line);
  padding-top: var(--st-space-2);
  padding-bottom: var(--st-space-2);
  margin-top: var(--st-space-3);
}
.wd-footer .wpb-content-wrapper > .vc_row + .vc_row .vc_col-sm-4:last-child { text-align: right; }
.wd-footer .wpb-content-wrapper > .vc_row + .vc_row .vc_col-sm-4:nth-child(2) { text-align: center; }

/* Riga inferiore: testo sinistro su una riga (rimpicciolisce per non andare a capo) */
.wd-footer .wpb-content-wrapper > .vc_row + .vc_row .vc_col-sm-4:first-child p,
.wd-footer .wpb-content-wrapper > .vc_row + .vc_row .vc_col-sm-4:last-child p {
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
}