/*
Theme Name: BluNavy
Description: Child theme di GeneratePress — design-system Azzurro Cielo light per Spray Antiaggressione
Template: generatepress
Version: v1.0.20260827a
*/

/* =========================================================
   DESIGN TOKENS — v2 (Tactical Premium)
   ========================================================= */
/* =========================================================
   DESIGN TOKENS — BluNavy v1.0 (Azzurro Cielo Light)
   ========================================================= */
:root {
  /* ── Surfaces (light) ── */
  --sa-bg:       #FFFFFF;
  --sa-bg2:      #F4F8FE;   /* compat alias — stesso valore di --sa-bg-2 */
  --sa-bg-2:     #F4F8FE;
  --sa-bg-3:     #E8F2FF;
  --sa-card:     #FFFFFF;
  --sa-glass:    rgba(255,255,255,.72);
  --sa-glass-line: rgba(11,42,91,.10);
  /* ── Brand (il slot --sa-red diventa il brand blue primario) ── */
  --sa-red:      #1B6DFF;   /* brand blue → sostituisce red in tutti i var(--sa-red) */
  --sa-red-d:    #0F4FD1;   /* brand blue dark */
  --sa-orange:   #FF6A3D;   /* CTA coral */
  --sa-white:    #FFFFFF;
  --sa-grey:     #5B6B82;   /* muted text */
  --sa-line:     #E2EAF4;
  --sa-line-soft:#D4E0F0;
  --sa-line-2:   #D4E0F0;
  --sa-ink:      #0F172A;
  --sa-ink-2:    #1E293B;
  /* ── Extra BluNavy ── */
  --sa-navy:     #0B2A5B;
  --sa-blue:     #1B6DFF;
  --sa-blue-d:   #0F4FD1;
  --sa-azure:    #5AB8FF;
  --sa-cta:      #FF6A3D;
  --sa-cta-d:    #E8542A;
  --sa-muted:    #5B6B82;
  --sa-on-dark:       #FFFFFF;
  --sa-on-dark-2:     #E8EFFF;
  --sa-on-dark-muted: #A8BEDD;
  /* ── Radii ── */
  --sa-r-sm: 10px; --sa-r-md: 14px; --sa-r-lg: 18px; --sa-r-xl: 24px;
  /* ── Shadows ── */
  --sa-sh-1:   0 1px 2px rgba(11,42,91,.06), 0 6px 20px rgba(11,42,91,.06);
  --sa-sh-2:   0 10px 34px rgba(27,109,255,.14);
  --sa-sh-red: 0 10px 26px rgba(255,106,61,.30);   /* CTA coral shadow (usa slot ex-red) */
  --sa-sh-cta: 0 10px 26px rgba(255,106,61,.30);
  /* ── Gradients ── */
  --sa-grad-brand: linear-gradient(135deg,#0B2A5B 0%,#1B6DFF 55%,#5AB8FF 100%);
  --sa-grad-cta:   linear-gradient(180deg,#FF7A50,#FF6A3D 55%,#E8542A);
  --sa-grad-soft:  linear-gradient(180deg,#FFFFFF 0%,#F4F8FE 100%);
  /* ── Easing ── */
  --sa-ease: cubic-bezier(.22,.61,.36,1);
  --sa-glass-blur: blur(10px) saturate(1.4);
}

/* =========================================================
   WP 7.0 FIX — display:contents su TUTTI gli __inner-container
   dei nostri componenti. Rende ogni wrapper trasparente al layout
   così solo il nostro CSS controlla spacing e grid.
   ECCEZIONE: .sa-sec > __inner-container resta display:block
   (serve come contenitore per il centramento max-width:1180px).
   ========================================================= */

/* Wrapper grid/flex outer */
.sa-cmp   > .wp-block-group__inner-container,
.sa-grid  > .wp-block-group__inner-container,
.sa-why   > .wp-block-group__inner-container,
.sa-steps > .wp-block-group__inner-container,
.sa-vids  > .wp-block-group__inner-container,
.sa-revs  > .wp-block-group__inner-container,
/* Sezioni top-level */
.sa-microbar  > .wp-block-group__inner-container,
.sa-hero      > .wp-block-group__inner-container,
.sa-trust     > .wp-block-group__inner-container,
/* Componenti interni */
.sa-head      > .wp-block-group__inner-container,
.sa-final     > .wp-block-group__inner-container,
.sa-faq       > .wp-block-group__inner-container,
.sa-hero-card > .wp-block-group__inner-container,
.sa-specs     > .wp-block-group__inner-container,
/* Grid items internals */
.sa-cmp .col  > .wp-block-group__inner-container,
.sa-why .c    > .wp-block-group__inner-container,
.sa-steps .st > .wp-block-group__inner-container,
.sa-vids .sa-vid > .wp-block-group__inner-container,
.sa-revs .sa-rev  > .wp-block-group__inner-container,
/* Product card layers */
.sa-grid .sa-prod > .wp-block-group__inner-container,
.sa-prod .img     > .wp-block-group__inner-container,
.sa-prod .b       > .wp-block-group__inner-container,
/* Video thumbnail */
.sa-vid .img      > .wp-block-group__inner-container {
  display: contents;
}

/* =========================================================
   WP 7.0 FIX — BLOCCO 2: azzera --wp--style--block-gap
   is-layout-flow aggiunge margin-block-start:24px tra ogni
   blocco figlio. Lo azzeriamo così solo i nostri margin
   espliciti controllano la spaziatura (come in locale).
   ========================================================= */
.sa-microbar,
.sa-hero,
.sa-trust,
.sa-sec,
.sa-head,
.sa-cmp .col,
.sa-why .c,
.sa-steps .st,
.sa-vids .sa-vid,
.sa-revs .sa-rev,
.sa-prod,
.sa-faq,
.sa-final {
  --wp--style--block-gap: 0;
}

/* =========================================================
   WP 7.0 FIX — BLOCCO 3: margini paragrafi
   In locale gli elementi dentro le card erano <div>/<span>
   senza margini. In live Gutenberg sono <p class="wp-block-paragraph">
   che GP/browser stila con margin-bottom:1.5em. Reset esplicito.
   ========================================================= */
.sa-rev .stars        { margin-top: 0; margin-bottom: 12px; }
.sa-prod .rate        { margin-top: 0; margin-bottom: 0; }
.sa-prod .sa-muted    { margin-top: 0; margin-bottom: 0; }
.sa-prod .pr          { margin-top: 14px; margin-bottom: 0; }
.sa-cmp  .flag        { margin: 0; }
.sa-cmp  .sub         { margin-top: 0; margin-bottom: 0; }
.sa-why  .ic          { margin-top: 0; margin-bottom: 16px; }
.sa-vid  .play        { margin: 0; }
.sa-steps .st > .wp-block-group__inner-container { --wp--style--block-gap: 0; }

/* =========================================================
   BASE
   ========================================================= */
body {
  background-color:       var(--sa-bg);
  color:                  var(--sa-ink);
  font-family:            Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height:            1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering:         optimizeLegibility;
}

/* Inside article — light base */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
  background-color: var(--sa-bg);
  color: var(--sa-ink);
}

/* =========================================================
   HOMEPAGE — FULL-WIDTH LAYOUT
   Full-width sezioni con sfondo, content centrato via sa-sec padding
   ========================================================= */
.is-front-page .inside-article,
.page-template-default.is-front-page .inside-article {
  padding:    0 !important;
  max-width:  none !important;
  box-shadow: none !important;
}
.is-front-page .post-image,
.is-front-page .entry-header { display: none; }

/* =========================================================
   HEADER GP
   ========================================================= */
.site-header {
  /* Sfondo/colore/border: vedi blocco "Header GP: bianco pieno" più sotto
     (unica fonte, nessun residuo del vecchio tema dark con !important). */
  position:              sticky;
  top:                   var(--sa-microbar-h, 41px);
  z-index:               50;
}
.inside-header        { min-height: 70px; }

.main-navigation { background-color: transparent !important; }
.main-navigation .menu-item a,
.nav-float-right .main-navigation a {
  color:       var(--sa-grey);
  font-weight: 600;
  font-size:   15px;
  border-radius: 9px;
  transition:  color .15s, background .15s;
}
.main-navigation .menu-item a:hover,
.main-navigation .current-menu-item > a { color: var(--sa-white) !important; }
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items { color: var(--sa-grey) !important; }
/* Dropdown submenu */
.main-navigation ul ul,
.main-navigation .sub-menu {
  background:    var(--sa-bg) !important;
  border:        1px solid var(--sa-line) !important;
  border-radius: 10px !important;
  box-shadow:    0 12px 40px rgba(0,0,0,.55) !important;
  padding:       6px !important;
  min-width:     220px !important;
}
.main-navigation ul ul li a,
.main-navigation .sub-menu li a {
  color:         var(--sa-grey) !important;
  border-radius: 7px !important;
  padding:       9px 14px !important;
  display:       block;
}
.main-navigation ul ul li a:hover,
.main-navigation .sub-menu li a:hover {
  background:    var(--sa-card) !important;
  color:         var(--sa-white) !important;
}
.mobile-menu-control-wrapper button,
.menu-toggle { color: var(--sa-white); background: transparent; border: 1px solid var(--sa-line); }

/* =========================================================
   GLOBAL
   ========================================================= */
.sidebar .widget {
  background-color: var(--sa-bg2);
  color:            var(--sa-white);
  border:           1px solid var(--sa-line);
  border-radius:    12px;
}
.sidebar .widget a        { color: var(--sa-grey); }
.sidebar .widget a:hover  { color: var(--sa-white); }
.sidebar .widget-title    { color: var(--sa-white); }
.site-info {
  background-color: var(--sa-bg2);
  color:            var(--sa-grey);
  border-top:       1px solid var(--sa-line);
}
.site-info a       { color: var(--sa-grey); }
.site-info a:hover { color: var(--sa-white); }
a       { color: var(--sa-navy); text-decoration: none; }
a:hover { color: var(--sa-cta); }
h1,h2,h3,h4,h5,h6 {
  color:          var(--sa-navy);
  line-height:    1.12;
  font-weight:    800;
  letter-spacing: -.025em;
}
/* Headings bianchi solo su sezioni scure/brand */
.sa-microbar :is(h1,h2,h3,h4,h5,h6),
.sa-hero :is(h1,h2,h3),
.sa-final :is(h1,h2,h3),
.site-header :is(h1,h2,h3),
.sa-hero-card .meta h3 { color: #fff; }
input, textarea, select {
  background-color: var(--sa-card);
  color:            var(--sa-ink);
  border:           1px solid var(--sa-line);
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
blockquote { border-left-color: var(--sa-red); color: var(--sa-grey); }
::selection { background: var(--sa-red); color: #fff; }

/* =========================================================
   UTILITY
   ========================================================= */
.sa-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sa-sec.sa-bg2 { background: var(--sa-bg2); }
.sa-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  color:          var(--sa-orange);
  font-weight:    700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size:      12px;
  margin:         0 0 14px;
}
.sa-eyebrow::before {
  content:      "";
  width:        26px;
  height:       2px;
  background:   linear-gradient(90deg, var(--sa-red), var(--sa-orange));
  border-radius: 2px;
  flex:         0 0 auto;
}
.sa-muted { color: var(--sa-grey); }

/* =========================================================
   REVEAL ANIMATION (IntersectionObserver)
   ========================================================= */
.sa-rv {
  opacity:    0;
  transform:  translateY(22px);
  transition: opacity .7s var(--sa-ease), transform .7s var(--sa-ease);
}
.sa-rv.in { opacity: 1; transform: none; }
.sa-rv.d1 { transition-delay: .08s; }
.sa-rv.d2 { transition-delay: .16s; }
.sa-rv.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .sa-rv { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.sa-btn,
.wp-block-button__link {
  display:       inline-flex;
  align-items:   center;
  gap:           .55em;
  background:    var(--sa-grad-cta);
  color:         #fff !important;
  font-weight:   700;
  font-size:     16px;
  padding:       15px 30px;
  border-radius: var(--sa-r-sm);
  border:        0;
  cursor:        pointer;
  box-shadow:    var(--sa-sh-cta), inset 0 1px 0 rgba(255,255,255,.18);
  transition:    transform .25s var(--sa-ease), box-shadow .25s var(--sa-ease);
}
.sa-btn:hover,
.wp-block-button__link:hover {
  transform:  translateY(-2px);
  box-shadow: 0 12px 34px rgba(255,106,61,.45), inset 0 1px 0 rgba(255,255,255,.18);
  color:      #fff !important;
  background: var(--sa-cta-d);
}
.sa-btn:active, .wp-block-button__link:active { transform: translateY(0); }

.wp-block-button.is-style-outline .wp-block-button__link {
  background:    var(--sa-grad-cta) !important;
  color:         #fff !important;
  border:        0 !important;
  box-shadow:    var(--sa-sh-cta), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  transform:  translateY(-2px);
  box-shadow: 0 12px 34px rgba(255,106,61,.45), inset 0 1px 0 rgba(255,255,255,.18) !important;
  color:      #fff !important;
  background: var(--sa-cta-d) !important;
}

.sa-btn--ghost,
.sa-btn-secondary,
.wp-block-button.sa-btn-secondary .wp-block-button__link {
  background:  transparent !important;
  border:      1.5px solid var(--sa-cta) !important;
  color:       var(--sa-cta) !important;
  box-shadow:  none !important;
}
.sa-btn--ghost:hover,
.sa-btn-secondary:hover,
.wp-block-button.sa-btn-secondary .wp-block-button__link:hover {
  border-color: var(--sa-cta) !important;
  background:   var(--sa-cta) !important;
  color:        #fff !important;
  box-shadow:   var(--sa-sh-cta) !important;
  transform:    translateY(-2px);
}

/* =========================================================
   MICROBAR — sticky SOPRA tutto (logo, nav, ecc.)
   ========================================================= */
.sa-microbar {
  background:     linear-gradient(90deg, var(--sa-red-d), var(--sa-red) 40%, var(--sa-red-d));
  color:          #fff;
  text-align:     center;
  font-size:      13px;
  font-weight:    600;
  padding:        8px 12px;
  letter-spacing: .02em;
  position:       sticky;
  top:            0;
  z-index:        9999;
  width:          100%;
}
.sa-microbar p { margin: 0; }

/* =========================================================
   HERO
   ========================================================= */
.sa-hero {
  position:   relative;
  padding:    84px 24px 72px;
  overflow:   hidden;
  background:
    radial-gradient(950px 520px at 80% -5%, rgba(225,29,42,.22), transparent 62%),
    radial-gradient(720px 520px at 6% 100%, rgba(255,106,44,.10), transparent 60%),
    var(--sa-bg);
}
.sa-hero::before {
  content:    "";
  position:   absolute;
  inset:      0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(640px 420px at 72% 18%, #000 30%, transparent 75%);
  mask-image:         radial-gradient(640px 420px at 72% 18%, #000 30%, transparent 75%);
}
/* centra il contenuto dell'hero (via __inner-container) */
.sa-hero .wp-block-columns {
  max-width: 1180px;
  margin:    0 auto;
  position:  relative;
}
/* sovrascrive il layout flex di wp:columns con grid */
.sa-hero-grid {
  display:               grid !important;
  grid-template-columns: 1.05fr .95fr !important;
  gap:                   48px;
  align-items:           center;
}
.sa-hero .wp-block-heading { font-size: clamp(36px,5vw,60px); margin-bottom: .35em; }
.sa-hero .wp-block-heading em {
  color:       var(--sa-red);
  font-style:  normal;
  position:    relative;
  white-space: nowrap;
}
.sa-hero .wp-block-heading em::after {
  content:      "";
  position:     absolute;
  left: 0; right: 0; bottom: .04em;
  height:       .14em;
  background:   linear-gradient(90deg, var(--sa-red), var(--sa-orange));
  border-radius:99px;
  opacity:      .85;
}
.sa-hero-lead,
.sa-hero-lead.has-text-color {
  font-size:  19px !important;
  color:      var(--sa-ink) !important;
  max-width:  36ch;
  margin:     0 0 30px;
}
.sa-hero .wp-block-buttons { margin-bottom: 30px; }

/* proof row */
.sa-proof {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 34px;
  font-size:     14px;
  color:         var(--sa-grey);
}
.sa-proof .st { color: var(--sa-orange); font-weight: 800; letter-spacing: 2px; }
.sa-proof b   { color: #fff; }

/* specs */
.sa-specs {
  display:    flex;
  flex-wrap:  wrap;
  border-top: 1px solid var(--sa-line-soft);
  padding-top:18px;
  margin-top: 0;
  gap:        0;
}
.sa-specs p {
  font-size:    13.5px;
  padding-right:24px;
  margin-right: 24px;
  border-right: 1px solid var(--sa-line-soft);
  margin-bottom:0;
}
.sa-specs p:last-child {
  border-right:  0;
  padding-right: 0;
  margin-right:  0;
}
.sa-specs strong,
.sa-specs b {
  display:       block;
  font-size:     26px;
  color:         #fff;
  letter-spacing:-.02em;
  line-height:   1.15;
  font-weight:   800;
}

/* hero card */
.sa-hero-card {
  background:      linear-gradient(160deg, #21252D, #13151A 70%);
  border:          1px solid var(--sa-line);
  border-radius:   var(--sa-r-xl);
  padding:         28px;
  position:        relative;
  min-height:      420px;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  box-shadow:      var(--sa-sh-2);
  transition:      transform .4s var(--sa-ease), box-shadow .4s var(--sa-ease);
}
.sa-hero-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
/* gradiente scuro sul fondo per leggibilità meta (z-index 2 > foto z-index 1) */
.sa-hero-card::before {
  content:       "";
  position:      absolute;
  left:          0;
  right:         0;
  bottom:        0;
  height:        130px;
  z-index:       2;
  background:    linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
  border-radius: 0 0 var(--sa-r-xl) var(--sa-r-xl);
  pointer-events:none;
}
.sa-hero-card::after {
  content:        "";
  position:       absolute;
  inset:          -1px;
  border-radius:  inherit;
  pointer-events: none;
  background:     radial-gradient(420px 240px at 70% 0%, rgba(225,29,42,.16), transparent 70%);
}
.sa-ph {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #4b515e;
  font-weight:     700;
  letter-spacing:  .08em;
  text-align:      center;
  border:          1.5px dashed #353b46;
  border-radius:   var(--sa-r-md);
  font-size:       13px;
}
.sa-hero-card .sa-ph {
  position:   absolute;
  inset:      28px;
  background: repeating-linear-gradient(45deg, #171a20, #171a20 12px, #1b1e25 12px, #1b1e25 24px);
}
.sa-hero-card .sa-hero-card-photo {
  position: absolute;
  inset:    0;
  z-index:  1;
  margin:   0;
}
.sa-hero-card .sa-hero-card-photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.sa-hero-card .tag {
  position:      relative;
  z-index:       2;
  align-self:    flex-start;
  margin-bottom: auto;
  background:    linear-gradient(90deg, var(--sa-red), #F0273A);
  font-weight:   800;
  font-size:     11.5px;
  letter-spacing:.08em;
  padding:       7px 14px;
  border-radius: 999px;
  box-shadow:    var(--sa-sh-red);
  color:         #fff;
}
.sa-hero-card .meta {
  position:   relative;
  z-index:    3;
  margin-top: auto;
  padding:    0 4px 4px;
}
/* l'<a> dentro meta: flex per nome sinistra / prezzo destra */
.sa-hero-card .meta > a {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  width:           100%;
  text-decoration: none;
  color:           inherit;
  gap:             10px;
}
.sa-hero-card .meta h3  { font-size: 17px; margin: 0; color: #fff; font-weight: 700; line-height: 1.2; }
.sa-hero-card .meta .pz { font-size: 21px; font-weight: 800; color: #fff; line-height: 1.1; white-space: nowrap; }
.sa-hero-card .meta .pz s { display: block; font-size: 12px; color: rgba(255,255,255,.55); font-weight: 500; text-decoration: line-through; }

/* =========================================================
   TRUST STRIP
   ========================================================= */
.sa-trust {
  border-top:    1px solid var(--sa-line);
  border-bottom: 1px solid var(--sa-line);
  background:    var(--sa-bg2);
}
/* wp:columns version */
.sa-trust .wp-block-columns {
  max-width:  1180px;
  margin:     0 auto;
  gap:        0 !important;
  flex-wrap:  nowrap !important;
}
.sa-trust .wp-block-column.sa-trust-item {
  padding:         20px 14px;
  text-align:      center;
  border-right:    1px solid var(--sa-line);
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  transition:      background .2s;
  flex:            1;
  min-width:       0;
}
.sa-trust .wp-block-column.sa-trust-item:last-child { border-right: 0; }
.sa-trust .wp-block-column.sa-trust-item:hover      { background: rgba(255,255,255,.025); }
.sa-trust .wp-block-column.sa-trust-item p { margin: 0; font-size: 14px; font-weight: 700; }
/* legacy ul version */
.sa-trust ul { display: grid; grid-template-columns: repeat(4,1fr); list-style: none; margin: 0; padding: 0; }
.sa-trust li { padding: 20px 14px; text-align: center; font-weight: 700; font-size: 14px; border-right: 1px solid var(--sa-line); display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s; }
.sa-trust li:hover { background: rgba(255,255,255,.025); }
.sa-trust li:last-child { border-right: 0; }
.sa-trust .ic { color: var(--sa-red); }

/* =========================================================
   SEZIONI
   ========================================================= */
.sa-sec {
  padding:    70px 24px;
}
/* in locale questi due blocchi non hanno padding-top per creare continuità visiva */
#prodotti.sa-sec { padding-top: 0; }
.sa-sec:has(> .wp-block-group__inner-container > .wp-block-group.sa-final) { padding-top: 0; }

/* ogni blocco dentro sa-sec: centrato con max-width
   (via __inner-container, non child diretto) */
.sa-sec .wp-block-group__inner-container > .wp-block-group,
.sa-sec .wp-block-group__inner-container > .wp-block-heading,
.sa-sec .wp-block-group__inner-container > .wp-block-paragraph,
.sa-sec .wp-block-group__inner-container > .wp-block-details,
.sa-sec .wp-block-group__inner-container > .wp-block-buttons {
  max-width:    1180px;
  margin-left:  auto;
  margin-right: auto;
}
.sa-sec .wp-block-heading { font-size: clamp(27px,3.4vw,42px); }
.sa-head          { max-width: 640px; margin-bottom: 46px; }
.sa-head p        { color: var(--sa-grey); font-size: 17px; margin: 0; }

/* =========================================================
   COMPARISON
   ========================================================= */
.sa-cmp {
  display:               grid;
  grid-template-columns: repeat(3,1fr);
  gap:                   20px;
  align-items:           stretch;
  max-width:             1180px;
  margin:                0 auto !important;
}
.sa-cmp .col {
  background:    var(--sa-card);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  padding:       28px;
  position:      relative;
  display:       flex;
  flex-direction:column;
  box-shadow:    var(--sa-sh-1);
  transition:    transform .3s var(--sa-ease), box-shadow .3s var(--sa-ease), border-color .3s;
}
.sa-cmp .col:hover              { transform: translateY(-5px); border-color: var(--sa-line-2); box-shadow: var(--sa-sh-2); }
.sa-cmp .col.best {
  border-color: var(--sa-blue);
  background:   var(--sa-card);
  box-shadow:   0 0 0 1px var(--sa-blue), var(--sa-sh-2);
}
.sa-cmp .col.best:hover { box-shadow: 0 0 0 1px var(--sa-blue), 0 24px 60px rgba(27,109,255,.2); }
.sa-cmp .col .cmp-img {
  aspect-ratio:  4/3;
  border-radius: var(--sa-r-md);
  overflow:      hidden;
  background:    var(--sa-bg-2);
  margin:        0 0 18px;
}
.sa-cmp .col .cmp-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sa-cmp .best .badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  position:      absolute;
  top:           -13px;
  left:          26px;
  background:    var(--sa-cta);
  font-size:     11px;
  font-weight:   800;
  letter-spacing:.1em;
  padding:       6px 14px;
  border-radius: 999px;
  box-shadow:    var(--sa-sh-cta);
  color:         #fff;
}
.sa-cmp .wp-block-heading { font-size: 21px; margin-bottom: 2px; color: var(--sa-navy); }
.sa-cmp .sub               { color: var(--sa-muted); font-size: 14px; margin: 0; }
.sa-cmp .price             { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 14px 0 18px; color: var(--sa-navy); }
.sa-cmp .wp-block-list {
  list-style:    none;
  padding:       0;
  margin:        0 0 24px;
  font-size:     14.5px;
  flex:          1;
}
.sa-cmp .wp-block-list li {
  padding:    9px 0 9px 26px;
  border-top: 1px solid var(--sa-line);
  color:      var(--sa-ink);
  position:   relative;
}
.sa-cmp .wp-block-list li::before {
  content:     "\2713";
  position:    absolute;
  left:        2px;
  top:         9px;
  color:       var(--sa-blue);
  font-weight: 800;
  font-size:   13px;
}
.sa-cmp .wp-block-list li:first-child { border-top: 0; }
.sa-cmp .wp-block-buttons { margin-top: auto; }
.sa-cmp .wp-block-button { width: 100%; }
.sa-cmp .wp-block-button__link { justify-content: center; width: 100%; display: flex; }

/* =========================================================
   PRODUCT GRID
   ========================================================= */
.sa-grid {
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   20px;
  max-width:             1180px;
  margin:                0 auto !important;
}
.sa-prod {
  background:    var(--sa-card);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  overflow:      hidden;
  box-shadow:    var(--sa-sh-1);
  transition:    transform .3s var(--sa-ease), box-shadow .3s var(--sa-ease), border-color .3s;
}
.sa-prod:hover { transform: translateY(-5px); border-color: #3a4150; box-shadow: var(--sa-sh-2); }
.sa-prod .img {
  aspect-ratio: 1/1;
  background:   repeating-linear-gradient(45deg, #171a20, #171a20 12px, #1b1e25 12px, #1b1e25 24px);
  position:     relative;
  overflow:     hidden;
}
.sa-prod .img .sa-ph         { position: absolute; inset: 16px; }
.sa-prod .img .wp-block-image { position: absolute; inset: 0; margin: 0; }
.sa-prod .img .wp-block-image a,
.sa-prod .img .wp-block-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sa-prod .img > .wp-block-group__inner-container { display: contents; }
.sa-prod .b                  { padding: 18px; }
.sa-prod .rate               { color: var(--sa-orange); font-size: 13px; font-weight: 700; }
.sa-prod .wp-block-heading   { font-size: 16px; margin: 7px 0 2px; color: var(--sa-white); }
.sa-prod .sa-muted           { font-size: 13.5px; display: block; }
.sa-prod .pr {
  font-weight:    800;
  font-size:      18px;
  margin-top:     14px;
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  gap:            8px;
  color:          #fff;
}
.sa-prod .pr .add {
  background:    linear-gradient(180deg, #F0273A, var(--sa-red-d));
  border-radius: 9px;
  padding:       8px 13px;
  font-size:     13px;
  font-weight:   700;
  color:         #fff;
  box-shadow:    inset 0 1px 0 rgba(255,255,255,.16);
  transition:    transform .2s var(--sa-ease), box-shadow .2s;
}
.sa-prod .pr .add:hover { transform: translateY(-1px); box-shadow: var(--sa-sh-red); }

/* =========================================================
   WHY US
   ========================================================= */
.sa-why {
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   20px;
  max-width:             1180px;
  margin:                0 auto !important;
}
.sa-why .c {
  background:    linear-gradient(160deg, #191c22, #141519);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  padding:       26px;
  transition:    transform .3s var(--sa-ease), border-color .3s, box-shadow .3s var(--sa-ease);
}
.sa-why .c:hover { transform: translateY(-4px); border-color: #3a4150; box-shadow: var(--sa-sh-1); }
.sa-why .ic {
  width:         48px;
  height:        48px;
  border-radius: 13px;
  background:    rgba(225,29,42,.13);
  color:         var(--sa-red);
  display:       flex;
  align-items:   center;
  justify-content:center;
  margin-bottom: 16px;
  font-size:     22px;
  border:        1px solid rgba(225,29,42,.22);
  transition:    transform .3s var(--sa-ease);
}
.sa-why .c:hover .ic       { transform: scale(1.08) rotate(-4deg); }
.sa-why .wp-block-heading  { font-size: 18px; color: var(--sa-white); }
.sa-why p                  { color: var(--sa-grey); font-size: 14.5px; margin: 0; }

/* =========================================================
   STEPS
   ========================================================= */
.sa-steps {
  display:               grid;
  grid-template-columns: repeat(3,1fr);
  gap:                   28px;
  counter-reset:         s;
  position:              relative;
  max-width:             1180px;
  margin:                0 auto !important;
}
.sa-steps::before {
  content:    "";
  position:   absolute;
  top:        25px;
  left:       5%;
  right:      5%;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--sa-line) 15%, var(--sa-line) 85%, transparent);
}
.sa-steps .st { position: relative; padding: 0 8px; }
.sa-steps .st::before {
  counter-increment: s;
  content:           counter(s,decimal-leading-zero);
  display:           flex;
  align-items:       center;
  justify-content:   center;
  width:             50px;
  height:            50px;
  border-radius:     14px;
  background:        linear-gradient(180deg, #F0273A, var(--sa-red-d));
  font-weight:       800;
  font-size:         18px;
  color:             #fff;
  margin-bottom:     18px;
  position:          relative;
  z-index:           1;
  box-shadow:        var(--sa-sh-red);
}
.sa-steps .wp-block-heading { font-size: 18px; color: var(--sa-white); }
.sa-steps p { color: var(--sa-grey); font-size: 14.5px; margin: 0; }

/* =========================================================
   VIDEO
   ========================================================= */
.sa-vids {
  display:               grid;
  grid-template-columns: repeat(3,1fr);
  gap:                   20px;
  max-width:             1180px;
  margin:                0 auto !important;
}
.sa-vid .img {
  aspect-ratio:    16/9;
  border-radius:   var(--sa-r-md);
  background:      linear-gradient(160deg, #20242c, #121317);
  border:          1px solid var(--sa-line);
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  cursor:          pointer;
  transition:      border-color .25s, transform .3s var(--sa-ease), box-shadow .3s var(--sa-ease);
}
.sa-vid:hover .img { border-color: #3a4150; transform: translateY(-3px); box-shadow: var(--sa-sh-1); }
.sa-vid .play {
  width:         60px;
  height:        60px;
  border-radius: 50%;
  background:    linear-gradient(180deg, #F0273A, var(--sa-red-d));
  display:       flex;
  align-items:   center;
  justify-content:center;
  box-shadow:    var(--sa-sh-red);
  font-size:     18px;
  color:         #fff;
  line-height:   1;
  transition:    transform .3s var(--sa-ease);
}
.sa-vid:hover .play          { transform: scale(1.12); }
.sa-vid .wp-block-heading    { font-size: 16px; margin-top: 14px; color: var(--sa-white); }

/* =========================================================
   RECENSIONI
   ========================================================= */
.sa-revs {
  display:               grid;
  grid-template-columns: repeat(3,1fr);
  gap:                   20px;
  max-width:             1180px;
  margin:                0 auto !important;
}
.sa-rev {
  background:    var(--sa-card);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  padding:       26px;
  position:      relative;
  box-shadow:    var(--sa-sh-1);
  transition:    transform .3s var(--sa-ease), border-color .3s;
}
.sa-rev:hover { transform: translateY(-4px); border-color: #3a4150; }
.sa-rev::before {
  content:        "\201C";
  position:       absolute;
  top:            6px;
  right:          20px;
  font-size:      74px;
  line-height:    1;
  color:          rgba(225,29,42,.16);
  font-weight:    800;
  pointer-events: none;
}
.sa-rev .stars { color: var(--sa-orange); font-weight: 700; letter-spacing: 3px; margin-bottom: 12px; }
.sa-rev p      { font-size: 15px; color: var(--sa-ink-2); margin: 0 0 18px; }
.sa-rev .who {
  font-size:    13px;
  color:        var(--sa-grey);
  font-weight:  700;
  display:      flex;
  align-items:  center;
  gap:          10px;
}
.sa-rev .vrf { color: #3ecf6e; font-weight: 700; font-size: 12px; margin-left: auto; }

/* =========================================================
   FAQ
   ========================================================= */
.sa-faq { max-width: 820px; }
.sa-faq .wp-block-details,
.sa-faq details {
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  margin-bottom: 12px;
  background:    var(--sa-card);
  overflow:      hidden;
  transition:    border-color .25s;
}
.sa-faq .wp-block-details:hover,
.sa-faq details:hover { border-color: #3a4150; }
.sa-faq .wp-block-details[open],
.sa-faq details[open] { border-color: #3a4150; box-shadow: var(--sa-sh-1); }
.sa-faq summary {
  cursor:          pointer;
  padding:         19px 22px;
  font-weight:     700;
  font-size:       16px;
  list-style:      none;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             14px;
  color:           var(--sa-white);
}
.sa-faq summary::-webkit-details-marker { display: none; }
.sa-faq summary::after {
  content:    "+";
  color:      var(--sa-red);
  font-size:  24px;
  font-weight:600;
  line-height:1;
  flex:       0 0 auto;
  transition: transform .25s var(--sa-ease);
}
.sa-faq .wp-block-details[open] summary::after,
.sa-faq details[open] summary::after { transform: rotate(45deg); }
.sa-faq .wp-block-details__content,
.sa-faq details > *:not(summary) {
  padding:   0 22px 20px;
  color:     var(--sa-grey);
  font-size: 15px;
}
.sa-faq .wp-block-details__content p,
.sa-faq .wp-block-details__content .wp-block-paragraph { margin: 0; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.sa-final {
  position:      relative;
  overflow:      hidden;
  border-radius: var(--sa-r-xl);
  padding:       64px 40px;
  text-align:    center;
  background:    linear-gradient(125deg, #C4141F, var(--sa-red) 40%, #7e0e16);
  box-shadow:    0 24px 70px rgba(225,29,42,.28);
  max-width:     1132px;
  margin:        0 auto !important;
}
.sa-final::before {
  content:        "";
  position:       absolute;
  inset:          0;
  pointer-events: none;
  background:     radial-gradient(640px 280px at 50% -20%, rgba(255,255,255,.18), transparent 60%);
}
.sa-final .wp-block-heading {
  font-size: clamp(27px,3.6vw,42px);
  position:  relative;
  color:     #fff;
}
.sa-final p,
.sa-final .wp-block-paragraph {
  color:     #ffe6e8;
  font-size: 18px;
  max-width: 46ch;
  margin:    0 auto 30px;
  position:  relative;
}
.sa-final .wp-block-buttons { position: relative; }
.sa-final .wp-block-button__link {
  background: #fff !important;
  color:      var(--sa-red) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.3) !important;
}
.sa-final .wp-block-button__link:hover {
  background: var(--sa-bg) !important;
  color:      #fff !important;
  transform:  translateY(-2px);
  box-shadow: 0 14px 38px rgba(0,0,0,.4) !important;
}
.sa-final .note {
  display:    block;
  margin-top: 18px;
  font-size:  13px;
  color:      #ffd2d6;
  position:   relative;
}

/* =========================================================
   WOOCOMMERCE — STORE-WIDE BRANDING
   ========================================================= */

/* Archivio prodotti */
.woocommerce .woocommerce-archive-wrapper,
.woocommerce-page .woocommerce-archive-wrapper { background: transparent; }

/* Bottoni WooCommerce — arancione CTA */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce-page .single_add_to_cart_button {
  background:    var(--sa-grad-cta) !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: 10px !important;
  font-weight:   700 !important;
  transition:    background .2s, transform .2s !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce-page #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-page .single_add_to_cart_button:hover {
  background: var(--sa-cta-d) !important;
  transform:  translateY(-1px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt { background: var(--sa-grad-cta) !important; }

/* Prezzi */
.woocommerce .woocommerce-Price-amount,
.woocommerce-page .woocommerce-Price-amount { color: var(--sa-ink) !important; font-weight: 800 !important; }

/* Scheda prodotto singolo */
.woocommerce div.product .woocommerce-product-gallery {
  background:    var(--sa-bg2);
  border:        1px solid var(--sa-line);
  border-radius: 16px;
  overflow:      hidden;
}
.woocommerce div.product .product_title { color: var(--sa-navy) !important; }
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-product-details__short-description p { color: var(--sa-grey); }
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 2px solid var(--sa-line); background: transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--sa-card); border: 1px solid var(--sa-line); border-bottom: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--sa-grey); font-weight: 600; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--sa-bg2); border-bottom: 2px solid var(--sa-cta); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sa-navy); }
.woocommerce div.product .woocommerce-tabs .panel { background: var(--sa-bg2); border: 1px solid var(--sa-line); border-radius: 0 0 12px 12px; color: var(--sa-grey); }
.woocommerce .related.products > h2,
.woocommerce .up-sells > h2,
.woocommerce .cross-sells > h2 { color: var(--sa-navy); }

/* Quantità */
/* Quantità — i browser mobile (Chrome/Android, Samsung incluso) non renderizzano le
   freccette native di input[type=number] indipendentemente dal CSS: si nascondono del
   tutto e si sostituiscono con due bottoni +/- pilotati da JS (functions.php, wp_footer). */
.woocommerce .quantity { display: flex; align-items: stretch; }
.woocommerce .quantity input.qty {
  background:    var(--sa-card);
  color:         var(--sa-ink);
  border:        1px solid var(--sa-line-2);
  border-radius: 8px;
  text-align:    center;
  accent-color:  var(--sa-cta);
  -moz-appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-inner-spin-button,
.woocommerce .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce .quantity.sa-qty-enhanced input.qty { border-radius: 0; border-left: 0; border-right: 0; }
/* !important diffuso: è un <button> nudo, eredita lo stile bottone generico di
   GeneratePress (padding 0 20px ecc.) con specificità più alta della sola classe —
   senza reset esplicito il bottone si allarga (auto-width da padding+contenuto)
   e la riga quantità+ATC risulta visibilmente spostata rispetto agli altri elementi. */
.sa-qty-btn {
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex: 0 0 auto !important; width: 34px !important; height: auto !important;
  margin: 0 !important; padding: 0 !important; box-sizing: border-box !important;
  border: 1px solid var(--sa-line-2) !important; border-radius: 0 !important;
  background: var(--sa-bg2) !important; color: var(--sa-navy) !important;
  font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important;
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background .15s;
}
.sa-qty-btn:hover { background: var(--sa-line) !important; }
.sa-qty-btn--minus { border-radius: 8px 0 0 8px !important; border-right: 0 !important; }
.sa-qty-btn--plus  { border-radius: 0 8px 8px 0 !important; border-left: 0 !important; }

/* Notice */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background:    #eefaf1 !important;
  color:         var(--sa-ink) !important;
  border:        1px solid #8fae1b !important; /* stesso verde dell'icona ::before di WooCommerce */
  border-radius: 10px !important;
  box-shadow:    0 8px 24px rgba(15,23,42,.07);
  outline:       none;
}
.woocommerce-info {
  background:   #eef4fd !important;
  border-color: #c7dcf6 !important;
}
.woocommerce-error {
  background:   #fdefee !important;
  border-color: #f4c8c6 !important;
}
/* Il markup WooCommerce sposta il focus sull'avviso (tabindex="-1") per l'accessibilità
   screen reader, quindi l'anello di focus è sempre visibile e va colorato come il bordo. */
.woocommerce-message:focus-visible {
  outline:        2px solid #8fae1b;
  outline-offset: 2px;
}
.woocommerce-info:focus-visible {
  outline:        2px solid #6ea8e8;
  outline-offset: 2px;
}
.woocommerce-error:focus-visible {
  outline:        2px solid #e07a72;
  outline-offset: 2px;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a { color: var(--sa-cta) !important; }

/* Breadcrumb */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a { color: var(--sa-grey) !important; }
/* .entry-content{margin-top:34px} di GeneratePress si somma ai 20px di padding-top di
   .inside-article, creando ~54px di vuoto sopra il breadcrumb (più alto su single-product
   dove non c'è un H1 di pagina sopra a "consumare" visivamente quello spazio). */
.single-product .entry-content { margin-top: 0 !important; }

/* Cart/Checkout blocchi */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { color: var(--sa-ink); }
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
  background:    #fff !important;
  border:        1px solid #D0D4DC !important;
  border-radius: 12px;
  padding:       20px;
  box-shadow:    0 2px 12px rgba(0,0,0,.08);
  color:         #3D434E !important;
}
/* H2 è l'elemento stesso con quella classe, non un figlio */
h2.wp-block-woocommerce-cart-order-summary-heading-block,
.wp-block-woocommerce-cart-order-summary-block h2,
.wp-block-woocommerce-checkout-order-summary-block h2 { color: #14171C !important; font-size: 18px; }
/* Blocco totali */
.wp-block-woocommerce-cart-order-summary-totals-block,
.wp-block-woocommerce-cart-order-summary-totals-block * { color: #3D434E !important; }
.wc-block-cart-item__product-name { color: #3D434E !important; }
/* F – nascondi short description nelle righe carrello */
.wc-block-cart-item__product-metadata { display: none !important; }
/* B – totale riga chiaro nel carrello scuro */
.wc-block-cart-item__individual-prices { color: #14171C !important; font-weight: 700; }
.wc-block-cart-items .wc-block-cart-item__total { color: var(--sa-navy) !important; font-weight: 700; }
.wc-block-cart-items .wc-block-cart-item__total .wc-block-formatted-money-amount,
.wc-block-cart-items .wc-block-cart-item__total .wc-block-components-formatted-money-amount { color: var(--sa-navy) !important; }
/* badge "Risparmia X €": pill verde leggibile */
.wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-badge {
  color: #15803D !important;
  background: rgba(21,128,61,.10) !important;
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 700;
  display: inline-block;
}
/* white-space:nowrap di default su questo badge impone alla colonna "totale"
   della riga carrello (grid) un min-content di ~110px — su mobile la riga
   (immagine+dettagli+totale) supera la larghezza disponibile e va in overflow
   orizzontale (tagliando prezzo e tabella). Permettere il wrap libera quel
   vincolo e fa rientrare la riga nel viewport. */
@media (max-width: 480px) {
  .wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-badge,
  .wc-block-cart-items .wc-block-cart-item__total .wc-block-components-sale-badge {
    white-space: normal !important;
    text-align: right;
  }
}
/* F – nascondi SOLO metadati/variazioni nel riepilogo cassa (NON il nome prodotto) */
.wc-block-components-order-summary-item__metadata,
.wc-block-components-order-summary-item .wc-block-components-product-metadata { display: none !important; }
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item { border-color: #D0D4DC !important; color: #3D434E !important; }
.wc-block-components-totals-item__label,
.wc-block-components-totals-item .wc-block-components-totals-item__value { color: #3D434E !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: #14171C !important; font-weight: 800; font-size: 18px; }
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
  background:    var(--sa-grad-cta) !important;
  color:         #fff !important;
  border-radius: 10px !important;
  font-weight:   700 !important;
  border:        none !important;
  width:         100%;
  padding:       14px 20px !important;
}
.wc-block-cart__submit-button:hover { background: var(--sa-cta-d) !important; }
.wc-block-cart__empty-cart__title   { color: var(--sa-grey) !important; }
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-combobox input {
  background:    var(--sa-card) !important;
  color:         var(--sa-ink) !important;
  border:        1px solid var(--sa-line) !important;
  border-radius: 8px !important;
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus { border-color: var(--sa-cta) !important; }
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-form label { color: var(--sa-grey) !important; }
/* Metodi di pagamento/spedizione (radio a blocco): un riquadro solo per l'intero gruppo
   invece di un bordo per ogni opzione — con divisori interni sottili è molto più
   "tranquillo" delle 2-3 card separate che si ottenevano prima. */
.wc-block-components-radio-control {
  border:        1px solid var(--sa-line);
  border-radius: 10px;
  overflow:      hidden;
}
.wc-block-components-radio-control-accordion-option {
  background:    var(--sa-card) !important;
  border:        none !important;
  border-bottom: 1px solid var(--sa-line) !important;
  border-radius: 0 !important;
  color:         var(--sa-ink) !important;
}
.wc-block-components-radio-control-accordion-option:last-child { border-bottom: none !important; }
.wc-block-components-payment-method-label { color: var(--sa-ink) !important; }
.wc-block-components-radio-control__input:checked + label::before { border-color: var(--sa-navy) !important; background: var(--sa-navy) !important; }
/* Il core disegna il pallino selezionato con nero fisso e il "ring" dell'opzione
   evidenziata con box-shadow in currentColor — risultava un bordo scuro fuori tema.
   Il pallino diventa blu navy (calmo, non l'arancione CTA); il ring viene sostituito
   da un tinta di sfondo appena percettibile, niente più bordo aggiuntivo. */
.wc-block-components-radio-control__input:checked { color: var(--sa-navy) !important; }
.wc-block-components-radio-control__input:checked::before { background-color: var(--sa-navy) !important; }
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  background: rgba(11,42,91,.04) !important;
  box-shadow: none !important;
}
.wc-block-components-checkout-place-order-button {
  background:    var(--sa-grad-cta) !important;
  color:         #fff !important;
  border-radius: 10px !important;
  font-weight:   700 !important;
  border:        none !important;
}
.wc-block-components-checkout-place-order-button:hover { background: var(--sa-cta-d) !important; }

/* Carrello classico (fallback) */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  background:    var(--sa-card) !important;
  border:        1px solid var(--sa-line) !important;
  border-radius: 12px;
  color:         var(--sa-ink) !important;
}
.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th { background: var(--sa-bg2) !important; color: var(--sa-grey) !important; border-bottom: 1px solid var(--sa-line) !important; }
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table td { border-bottom: 1px solid var(--sa-line) !important; color: var(--sa-ink) !important; }
.cart_totals h2, .order-total .woocommerce-Price-amount { color: var(--sa-navy) !important; }
.cart_totals table { background: var(--sa-card) !important; border: 1px solid var(--sa-line) !important; border-radius: 12px; }
.cart_totals table td, .cart_totals table th { border-bottom: 1px solid var(--sa-line) !important; color: var(--sa-ink) !important; }
.cart_totals table .order-total td, .cart_totals table .order-total th { color: var(--sa-navy) !important; font-weight: 800; }

/* Checkout form */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce #order_review { background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: 12px; padding: 24px; }
.woocommerce form .form-row label { color: var(--sa-grey) !important; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { background: var(--sa-bg) !important; color: var(--sa-ink) !important; border: 1px solid var(--sa-line) !important; border-radius: 8px !important; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--sa-cta) !important; outline: none; }

/* Il mio account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { color: var(--sa-grey); padding: 10px 16px; display: block; border-radius: 8px; font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--sa-card); color: var(--sa-navy); border: 1px solid var(--sa-line); }

/* =========================================================
   WOOCOMMERCE — SHOP & ARCHIVI FULL-WIDTH
   generate_layout_setting restituisce full-width-content → GP
   rimuove la sidebar. Qui assicuriamo padding/max-width coerenti
   con il design system e vestiamo i Product Collection blocks.
   ========================================================= */

/* Padding contenuto shop/archivi */
.woocommerce .site-content .inside-article,
.woocommerce-page .site-content .inside-article {
  padding: 40px 24px 60px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Titolo archivio categoria */
.woocommerce .woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title {
  color: var(--sa-navy);
}
.woocommerce .woocommerce-archive-description p,
.woocommerce-page .woocommerce-archive-description p {
  color: var(--sa-muted);
}

/* Ordinamento / result-count */
.woocommerce-ordering .orderby,
.woocommerce .woocommerce-result-count {
  background: var(--sa-card) !important;
  color: var(--sa-ink) !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

/* Product Collection block (WooCommerce blocchi nativi) */
.wp-block-woocommerce-product-collection .wc-block-grid__products,
.wp-block-woocommerce-product-collection ul.wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wp-block-woocommerce-product-collection .wc-block-grid__product,
.wp-block-woocommerce-product-collection li.product {
  background: var(--sa-card) !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-r-lg) !important;
  overflow: hidden;
  transition: transform .3s var(--sa-ease), border-color .3s, box-shadow .3s var(--sa-ease);
}
.wp-block-woocommerce-product-collection .wc-block-grid__product:hover,
.wp-block-woocommerce-product-collection li.product:hover {
  transform: translateY(-5px);
  border-color: #3a4150 !important;
  box-shadow: var(--sa-sh-2);
}

/* Product Filters block */
.wc-block-product-filter,
.wc-block-price-filter,
.wc-block-attribute-filter,
.wc-block-stock-filter {
  background: var(--sa-card);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  padding: 18px 20px;
  margin-bottom: 16px;
  color: var(--sa-ink);
}
.wc-block-product-filter h3,
.wc-block-attribute-filter h3,
.wc-block-price-filter h3,
.wc-block-stock-filter h3 {
  color: var(--sa-navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.wc-block-attribute-filter-list { list-style: none; padding: 0; margin: 0; }
.wc-block-attribute-filter-list-item { padding: 6px 0; }
.wc-block-attribute-filter-list-item label { color: var(--sa-ink); font-size: 14px; cursor: pointer; }
.wc-block-attribute-filter-list-item label:hover { color: var(--sa-navy); }
.wc-block-attribute-filter-list-item input[type="checkbox"]:checked { accent-color: var(--sa-cta); }
.wc-block-price-filter__range-input-progress { background: var(--sa-cta) !important; }

/* Filtri attivi (Active Filters block) */
.wc-block-active-filters { margin-bottom: 16px; }
.wc-block-active-filters__list-item-value {
  background: var(--sa-cta) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 13px !important;
}

@media (max-width: 900px) {
  .wp-block-woocommerce-product-collection .wc-block-grid__products,
  .wp-block-woocommerce-product-collection ul.wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .wp-block-woocommerce-product-collection .wc-block-grid__products,
  .wp-block-woocommerce-product-collection ul.wc-block-grid__products {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   D1 — SCHEDA PRODOTTO: sezioni condivise
   ========================================================= */

/* Full-width container */
.single-product .site-content .inside-article {
  padding: 20px 24px 60px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ── Grid 2-col: galleria sinistra, sommario destra ── */
.woocommerce div.product {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery {
  float: none !important;
  width: auto !important;
  border-radius: var(--sa-r-lg) !important;
  background: var(--sa-bg2) !important;
  border: 1px solid var(--sa-line) !important;
  overflow: hidden;
}
.woocommerce div.product .summary.entry-summary {
  float: none !important;
  width: auto !important;
  clear: none !important;
  padding: 0 !important;
}
/* Il div.clear WC: escluso dal grid */
.woocommerce div.product > .clear {
  display: none !important;
}
/* Tutti gli altri figli: full-width (span 2 col) */
.woocommerce div.product > *:not(.woocommerce-product-gallery):not(.summary.entry-summary):not(.clear) {
  grid-column: 1 / -1;
}

/* ── Sommario: tipografia ── */
.woocommerce div.product h1.product_title {
  font-size: clamp(22px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 0 10px !important;
  letter-spacing: -.02em;
}
/* Rating */
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 14px; }
/* Prezzo */
.woocommerce div.product p.price {
  font-size: 30px !important;
  font-weight: 800 !important;
  margin: 0 0 16px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.woocommerce div.product p.price del { text-decoration: line-through !important; }
.woocommerce div.product p.price del .woocommerce-Price-amount { color: var(--sa-grey) !important; font-size: 16px !important; font-weight: 500 !important; }
.woocommerce div.product p.price ins { text-decoration: none !important; }
.woocommerce div.product p.price ins .woocommerce-Price-amount { color: var(--sa-orange) !important; }
/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
  border-top: 1px solid var(--sa-line);
  margin: 0 0 20px;
  padding-top: 14px;
}
.woocommerce div.product .woocommerce-product-details__short-description p {
  color: var(--sa-ink) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 0 6px !important;
}
/* Carrello form: qty + ATC in riga */
.woocommerce div.product form.cart {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 0;
}
/* Il clearfix nativo WC (::before/::after{content:" ";display:table}) è pensato per il
   layout a float originale: forzando form.cart a display:flex, questi pseudo-elementi
   "blockificano" e diventano FLEX ITEM essi stessi, consumando 12px di gap su entrambi
   i lati (un inset fantasma sia a sx di .quantity sia a dx del bottone). Inutili con
   flex (niente float da pulire): vanno rimossi del tutto, non solo nascosti via opacity. */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { content: none !important; display: none !important; }
/* margin:0 !important sui figli diretti: GeneratePress applica un margine di default
   a .quantity/.button non visibile nel CSS del child theme (è nel parent theme) — senza
   azzerarlo esplicitamente la riga risultava visibilmente rientrata sia a sx sia a dx
   rispetto agli altri elementi del summary, oltre al gap dichiarato qui sopra. */
.woocommerce div.product form.cart > .quantity,
.woocommerce div.product form.cart > .single_add_to_cart_button { margin: 0 !important; }
.woocommerce div.product .quantity input.qty {
  height: 52px;
  width: 72px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.woocommerce div.product .single_add_to_cart_button {
  flex: 1 !important;
  min-width: 180px !important;
  padding: 15px 24px !important;
  font-size: 16px !important;
  text-align: center !important;
  justify-content: center !important;
}
/* Meta prodotto (sku, categoria, tag) */
.woocommerce div.product .product_meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--sa-line);
  font-size: 13px;
  color: var(--sa-grey);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }
.woocommerce div.product .product_meta a { color: var(--sa-grey) !important; }
.woocommerce div.product .product_meta a:hover { color: var(--sa-blue) !important; }

/* Badge sconto su scheda prodotto singolo */
.woocommerce div.product span.onsale {
  background:    var(--sa-red) !important;
  border-radius: 8px !important;
  font-size:     12px !important;
  font-weight:   800 !important;
  color:         #fff !important;
  padding:       6px 12px !important;
  min-height:    auto !important;
  min-width:     auto !important;
  line-height:   1.4 !important;
  letter-spacing:.02em;
}

/* ── Galleria prodotto: no zoom/lente, miniature scorrevoli, frecce ── */

/* 1. Nasconde l'icona lente d'ingrandimento (zoom/lightbox trigger) */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger { display: none !important; }

/* 2. Immagine principale (non cliccabile: niente apertura della foto a tutta pagina) */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery .flex-viewport { border-radius: var(--sa-r-md); overflow: hidden; }
.woocommerce-product-gallery .woocommerce-product-gallery__image > a { cursor: default; }

/* 3. Frecce prev/next centrate sulla sola immagine (altezza striscia miniature esclusa) */
.woocommerce-product-gallery .flex-direction-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 100px; /* altezza striscia miniature: margin-top 12px + li 88px */
  margin: 0; padding: 0; list-style: none;
  pointer-events: none; /* il box copre l'immagine: passano i click tranne sui due bottoni */
}
.woocommerce-product-gallery .flex-direction-nav a {
  pointer-events: auto;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--sa-line);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(15,23,42,.14);
  font-size: 0;                 /* nasconde il testo "Previous/Next" */
  color: var(--sa-ink);
  text-decoration: none; text-indent: 0;
  opacity: 0; transition: opacity .2s ease, background .2s ease;
  cursor: pointer;
}
.woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; }
.woocommerce-product-gallery .flex-direction-nav a:hover { background: #fff; }
.woocommerce-product-gallery .flex-direction-nav a.flex-prev { left: 12px; }
.woocommerce-product-gallery .flex-direction-nav a.flex-next { right: 12px; }
.woocommerce-product-gallery .flex-direction-nav a::before {
  font-family: inherit; font-size: 26px; line-height: 1; font-weight: 700;
}
.woocommerce-product-gallery .flex-direction-nav a.flex-prev::before { content: "\2039"; } /* ‹ */
.woocommerce-product-gallery .flex-direction-nav a.flex-next::before { content: "\203A"; } /* › */
/* freccia disabilitata a fine corsa */
.woocommerce-product-gallery .flex-direction-nav a.flex-disabled { opacity: 0 !important; pointer-events: none; }
/* su touch/mobile le frecce sono sempre visibili */
@media (max-width: 768px) {
  .woocommerce-product-gallery .flex-direction-nav a { opacity: 1; }
}

/* 4. Miniature: striscia orizzontale, nessuna scrollbar/scroll manuale — lo scorrimento
   avviene solo in automatico (JS) quando si cambia immagine */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  overflow-x: hidden;
  overflow-y: hidden;
}
.woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 88px !important;     /* larghezza fissa → il successivo "sbircia" di lato */
  width: 88px !important;
  height: 88px;
  margin: 0 !important;
  float: none !important;        /* annulla il float:left/width:25% di WooCommerce */
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-sm);
  overflow: hidden;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s, border-color .2s;
}
.woocommerce-product-gallery .flex-control-thumbs li:hover,
.woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active) { opacity: 1; border-color: var(--sa-blue); }
.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
}

/* Scheda prodotto: .sa-rv visibili subito (no scroll-reveal, contenuto immediato) */
.single-product .sa-rv {
  opacity:    1 !important;
  transform:  none !important;
  transition: none !important;
}

/* ── Sezioni D1: spaziatura ── */
.sa-trust-bar  { margin-top: 48px !important; }
.sa-specs      { margin-top: 32px; }
.sa-desc       { margin-top: 32px; }
.sa-howto      { margin-top: 40px; }
.sa-legal      { margin-top: 32px; }
.sa-faq.sa-rv  { margin-top: 40px; }
.sa-reviews    { margin-top: 40px; padding-bottom: 52px; border-bottom: 1px solid var(--sa-line); }

/* ── D1: Zona chiara (Descrizione → FAQ) ── */
/* E – sezioni full-width dopo gallery sticky: z-index > gallery per non essere coperte */
.sa-product-light {
  position:   relative;
  background: #F5F6F8;
  box-shadow: 0 0 0 100vmax #F5F6F8;
  clip-path:  inset(0 -100vmax);
  margin:     48px 0;
  padding:    8px 0 44px;
}
/* Nessun gap iniziale */
.sa-product-light > *:first-child { margin-top: 0 !important; }

/* Testo descrizione — override la card scura di .woocommerce div.product .sa-desc */
.woocommerce div.product .sa-product-light .sa-desc {
  background:    transparent;
  border:        none;
  border-radius: 0;
  padding:       0;
  margin-top:    0;
  color:         #3D434E;
}
.sa-product-light .sa-desc { color: #3D434E; }
.sa-product-light .sa-desc a { color: var(--sa-orange); }
.sa-product-light .sa-desc a:hover { color: var(--sa-red); }
.sa-product-light .sa-desc__body h2,
.sa-product-light .sa-desc__body h3 { color: #14171C; margin-top: 1.6em; }
.sa-product-light .sa-desc__body p { color: #3D434E; }
.sa-product-light .sa-desc__body ul,
.sa-product-light .sa-desc__body ol { color: #3D434E; padding-left: 1.4em; }
.sa-product-light .sa-desc__body img { border-radius: var(--sa-r-md); box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.sa-product-light .sa-desc__body .wp-block-columns { gap: 24px; }

.sa-product-light .sa-desc__body .wp-block-button__link {
  background:    var(--sa-red) !important;
  color:         #fff !important;
  border-radius: 10px !important;
}
.sa-product-light .sa-desc__body .wp-block-button__link:hover { background: var(--sa-red-d) !important; }
.sa-product-light .sa-desc__body table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.sa-product-light .sa-desc__body table th { background: #E4E7EB; color: #14171C; font-weight: 700; }
.sa-product-light .sa-desc__body table th,
.sa-product-light .sa-desc__body table td { border: 1px solid #D0D4DC; padding: 8px 12px; color: #3D434E; }
.sa-product-light .sa-desc__body blockquote {
  border-left: 4px solid var(--sa-red);
  padding: 12px 20px;
  margin: 1.2em 0;
  color: #3D434E;
  background: #ECEEF2;
  border-radius: 0 var(--sa-r-sm) var(--sa-r-sm) 0;
}

/* Come si usa — card chiare */
.sa-product-light .sa-howto > h2 { color: #14171C !important; }
.sa-product-light .sa-howto__step {
  background:    #fff;
  border:        1px solid #E4E7EB;
}
.sa-product-light .sa-howto__step p:not(.sa-howto__num) { color: #3D434E; }
.sa-product-light .sa-howto__step strong { color: #14171C; }

/* Box legalita */
.sa-product-light .sa-legal {
  background: #ECEEF2;
  border:     1px solid #D0D4DC;
}
.sa-product-light .sa-legal__title { color: #14171C !important; }
.sa-product-light .sa-legal__list li { color: #3D434E; }
.sa-product-light .sa-legal__list strong { color: #14171C; }

/* FAQ accordion chiaro */
.sa-product-light .sa-faq > h2 { color: #14171C !important; }
.sa-product-light .sa-faq__item {
  background:    #fff;
  border:        1px solid #D0D4DC;
}
.sa-product-light .sa-faq__item[open] { border-color: #B0B8C4; }
.sa-product-light .sa-faq__item > summary { color: #14171C; }
.sa-product-light .sa-faq__item > summary::after { color: #6B7280; }
.sa-product-light .sa-faq__item > p { color: #3D434E; }

/* ── Upsell & Related ── */
.woocommerce .up-sells { margin-top: 56px; }
/* J – upsell auto-fill: un solo prodotto non occupa tutta la griglia */
.woocommerce .up-sells ul.products {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}
.woocommerce .up-sells > h2,
.woocommerce .related.products > h2 {
  font-size: clamp(20px, 2.4vw, 26px) !important;
  font-weight: 800 !important;
  margin: 0 0 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--sa-line) !important;
}
.woocommerce .related.products { margin-top: 40px; }

/* ── Responsive single product ── */
@media (max-width: 768px) {
  .woocommerce div.product {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* qty + bottone restano sulla stessa riga anche su mobile (S23 ecc.): la quantità si
     riduce al minimo leggibile/toccabile, il bottone diventa l'elemento dominante della
     riga (largo, testo su una riga, ben visibile) invece di restare schiacciato a destra. */
  .woocommerce div.product form.cart { flex-direction: row !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 8px !important; }
  .woocommerce div.product .quantity { flex: 0 0 auto !important; }
  .woocommerce div.product .quantity input.qty { width: 34px !important; height: 46px !important; font-size: 15px !important; }
  .sa-qty-btn { width: 24px !important; font-size: 15px !important; }
  .woocommerce div.product .single_add_to_cart_button {
    min-width: unset !important; width: auto !important; flex: 1 1 auto !important;
    padding: 12px 14px !important; font-size: 15px !important; white-space: nowrap !important;
  }
}

/* Trust bar */
.sa-trust-bar {
  display:     flex;
  flex-wrap:   wrap;
  gap:         10px 24px;
  align-items: center;
  justify-content: center;
  background:  var(--sa-bg2);
  border:      1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  padding:     14px 20px;
  margin:      32px 0 0;
  font-size:   14px;
  font-weight: 600;
  color:       var(--sa-grey);
}
.sa-trust-bar span { white-space: nowrap; }

/* Specs table */
.sa-specs {
  margin-top: 32px;
  background: var(--sa-card);
  border:     1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  overflow:   hidden;
}
.sa-specs__title {
  font-size:     15px !important;
  font-weight:   700 !important;
  color:         var(--sa-navy) !important;
  padding:       16px 20px 10px !important;
  margin:        0 !important;
  letter-spacing:.02em;
  text-transform:uppercase;
  border-bottom: 1px solid var(--sa-line);
}
.sa-specs__table {
  width:          100%;
  border-collapse:collapse;
}
.sa-specs__table tr { border-bottom: 1px solid var(--sa-line); }
.sa-specs__table tr:last-child { border-bottom: none; }
.sa-specs__table th,
.sa-specs__table td {
  padding:   11px 20px;
  font-size: 14px;
  text-align:left;
}
.sa-specs__table th {
  color:       var(--sa-grey);
  font-weight: 600;
  width:       38%;
}
.sa-specs__table td { color: var(--sa-ink); font-weight: 700; }

/* Long description */
.sa-desc {
  margin-top: 32px;
  color:      var(--sa-grey);
  line-height:1.7;
  font-size:  15px;
}
.sa-desc__body h2,
.sa-desc__body h3 { color: var(--sa-white); margin-top: 1.6em; }
.sa-desc__body table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.sa-desc__body table th,
.sa-desc__body table td { border: 1px solid var(--sa-line); padding: 8px 12px; }
.sa-desc__body table th { background: var(--sa-card); color: var(--sa-white); font-weight: 700; }
.sa-desc__body table td { color: var(--sa-grey); }

/* Come si usa — 3 passi (scheda prodotto) */
.sa-howto > h2 {
  font-size:   clamp(20px, 2.4vw, 28px) !important;
  font-weight: 800 !important;
  color:       var(--sa-navy) !important;
  margin:      0 0 24px !important;
}
/* sa-howto__grid usa wp:columns — il layout 3 colonne è nativo */
.sa-howto__grid { gap: 20px !important; }
.sa-howto__step {
  background:    var(--sa-card);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  padding:       24px 22px;
}
.sa-howto__num {
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  width:        36px;
  height:       36px;
  background:   var(--sa-blue);
  border-radius:50%;
  font-size:    16px;
  font-weight:  800;
  color:        #fff;
  margin-bottom:14px;
  box-shadow:   var(--sa-sh-2);
}
/* sa-howto__num è ora un wp:paragraph — escluso dal selettore del testo */
.sa-howto__step p:not(.sa-howto__num) { color: var(--sa-grey); font-size: 14.5px; line-height: 1.6; margin: 0; }
.sa-howto__step strong { color: var(--sa-ink); }

/* Box legalità */
.sa-legal {
  margin-top:    32px;
  background:    linear-gradient(135deg, #1a1d24, #13151A);
  border:        1px solid #2A3040;
  border-radius: var(--sa-r-lg);
  padding:       24px 28px;
}
.sa-legal__title {
  font-size:   14px !important;
  font-weight: 800 !important;
  color:       var(--sa-white) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin:      0 0 14px !important;
}
/* sa-legal__list usa wp:list — reset padding nativo wp-block-list */
.sa-legal__list {
  list-style:  none !important;
  padding:     0 !important;
  margin:      0 !important;
  display:     flex;
  flex-direction: column;
  gap:         8px;
}
.sa-legal__list li {
  color:     var(--sa-grey);
  font-size: 14px;
  padding-left: 18px;
  position:  relative;
}
.sa-legal__list li::before {
  content:  “\2713”;
  position: absolute;
  left:     0;
  color:    #4CAF50;
  font-weight: 700;
}
.sa-legal__list strong { color: var(--sa-white); }

/* FAQ accordion */
.sa-faq {
  margin-top: 36px;
}
.sa-faq > h2 {
  font-size:   clamp(20px, 2.4vw, 28px) !important;
  font-weight: 800 !important;
  color:       var(--sa-navy) !important;
  margin:      0 0 20px !important;
}
.sa-faq__item {
  background:    var(--sa-card);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  margin-bottom: 8px;
  overflow:      hidden;
}
.sa-faq__item[open] { border-color: #3a4150; }
/* wp:details — il summary è figlio diretto di details, senza classe propria */
.sa-faq__item > summary {
  padding:     16px 20px;
  font-size:   15px;
  font-weight: 700;
  color:       var(--sa-ink);
  cursor:      pointer;
  list-style:  none;
  display:     flex;
  justify-content: space-between;
  align-items: center;
}
.sa-faq__item > summary::after { content: "+"; color: var(--sa-grey); font-size: 18px; }
.sa-faq__item[open] > summary::after { content: "\2212"; color: var(--sa-red); }
/* la risposta è un wp:paragraph (p) dentro details */
.sa-faq__item > p {
  padding:    0 20px 16px;
  color:      var(--sa-grey);
  font-size:  14.5px;
  line-height:1.65;
  margin:     0 !important;
}

/* Reviews wrapper */
.sa-reviews { margin-top: 36px; }
.sa-reviews h2,
.sa-reviews #reviews h2 {
  font-size:   clamp(20px, 2.4vw, 28px) !important;
  font-weight: 800 !important;
  color:       var(--sa-navy) !important;
}

/* ── Sticky add-to-cart mobile ── */
.sa-sticky-atc {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    9999;
  background: var(--sa-bg2);
  border-top: 1px solid var(--sa-line);
  transform:  translateY(100%);
  transition: transform .3s var(--sa-ease);
  display:    block; /* renderizzata via PHP solo su is_product(): sicuro mostrarla anche su desktop */
}
.sa-sticky-atc.visible { transform: translateY(0); }
.sa-sticky-atc__inner {
  max-width: 600px;
  margin:    0 auto;
  padding:   12px 16px;
  display:   flex;
  align-items:center;
  gap:       12px;
}
.sa-sticky-atc__info { flex: 1; min-width: 0; }
.sa-sticky-atc__name {
  display:       block;
  font-size:     13px;
  font-weight:   700;
  color:         var(--sa-ink);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.sa-sticky-atc__price {
  display:     block;
  font-size:   15px;
  font-weight: 800;
  color:       var(--sa-navy);
}
.sa-sticky-atc__btn {
  background:    var(--sa-grad-cta);
  color:         #fff;
  border:        none;
  border-radius: 10px;
  padding:       11px 20px;
  font-size:     14px;
  font-weight:   700;
  text-decoration:none;
  white-space:   nowrap;
  cursor:        pointer;
}
.sa-sticky-atc__btn--oos {
  background: var(--sa-card);
  color:      var(--sa-grey);
  cursor:     default;
}
@media (max-width: 680px) {
  .sa-steps__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   B3 — ARCHIVI CATEGORIA (PHP-rendered)
   ========================================================= */

/* Header categoria: hero dark con descrizione */
.woocommerce .woocommerce-products-header {
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--sa-line);
}
.woocommerce .woocommerce-products-header__title {
  font-size: clamp(24px, 3vw, 38px) !important;
  font-weight: 800 !important;
  color: var(--sa-navy) !important;
  margin-bottom: 10px;
}
.woocommerce .woocommerce-archive-description p {
  color: var(--sa-grey) !important;
  font-size: 16px;
  line-height: 1.6;
  max-width: 680px;
}

/* Chip di navigazione per esigenza */
.sa-cat-chips {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
  margin:     0 0 24px;
}
.sa-chip {
  display:         inline-flex;
  align-items:     center;
  padding:         7px 16px;
  background:      rgba(255,255,255,.07);
  border:          1.5px solid rgba(255,255,255,.14);
  border-radius:   999px;
  color:           rgba(255,255,255,.6) !important;
  font-size:       13px;
  font-weight:     600;
  text-decoration: none !important;
  transition:      background .2s, color .2s, border-color .2s;
}
.sa-chip:hover {
  background:   rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.35) !important;
  color:        var(--sa-white) !important;
}
.sa-chip.active {
  background:   var(--sa-red) !important;
  border-color: var(--sa-red) !important;
  color:        #fff !important;
}

/* result-count e ordering rimossi via remove_action in functions.php */

/* Griglia prodotti PHP-rendered (ul.products) */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 28px 0 0 !important;
}
/* WooCommerce aggiunge ::before/::after come clearfix:
   in un grid-container diventano grid-item invisibili e spostano le card.
   Con display:none spariscono dal flusso della griglia. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}
.woocommerce ul.products li.product {
  position:      relative;
  background:    var(--sa-card) !important;
  border:        1px solid var(--sa-line) !important;
  border-radius: var(--sa-r-lg) !important;
  overflow:      hidden;
  transition:    transform .3s var(--sa-ease), border-color .3s, box-shadow .3s var(--sa-ease);
  float:         none !important;
  width:         auto !important;
  margin:        0 !important;
  padding:       0 !important;
}
.woocommerce ul.products li.product:hover {
  transform:    translateY(-5px);
  border-color: #3a4150 !important;
  box-shadow:   var(--sa-sh-2);
}
/* Immagine prodotto */
.woocommerce ul.products li.product a img {
  display: block;
  width:   100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
/* Titolo */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size:   15px !important;
  font-weight: 700 !important;
  color:       var(--sa-navy) !important;
  padding:     14px 16px 4px !important;
  margin:      0 !important;
  text-align:  center !important;
}
/* Prezzo */
.woocommerce ul.products li.product .price {
  display:     block;
  padding:     0 16px 10px !important;
  font-size:   16px !important;
  font-weight: 800 !important;
  color:       var(--sa-ink) !important;
  text-align:  center !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount {
  color:       var(--sa-grey) !important;
  font-size:   13px !important;
  font-weight: 500 !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none !important; }
/* Titolo card categoria (sottocategorie pillar / negozio) — centrato */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  text-align:  center !important;
  padding:     14px 16px 16px !important;
  font-size:   16px !important;
  font-weight: 700 !important;
  color:       var(--sa-navy) !important;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
  display:    block;
  margin-top: 2px;
  background: transparent !important;
  color:      var(--sa-grey) !important;
  font-weight: 600 !important;
}
/* Badge saldo — stesso stile della scheda prodotto.
   WooCommerce imposta right:0 in loop → right:auto annulla lo stretch a piena larghezza. */
.woocommerce ul.products li.product .onsale {
  position:      absolute !important;
  top:           10px !important;
  left:          10px !important;
  right:         auto !important;
  width:         auto !important;
  display:       inline-block !important;
  background:    var(--sa-cta) !important;
  border-radius: 8px !important;
  font-size:     12px !important;
  font-weight:   800 !important;
  color:         #fff !important;
  padding:       5px 10px !important;
  min-height:    auto !important;
  min-width:     auto !important;
  line-height:   1.4 !important;
  letter-spacing:.02em;
  z-index:       2;
}
/* Badge "Più venduto" — classe is-bestseller aggiunta da woocommerce_post_class */
li.product.is-bestseller,
.wc-block-product.is-bestseller { position: relative; }
li.product.is-bestseller::after,
.wc-block-product.is-bestseller::after {
  content:        'Pi\00F9 venduto'; /* [Fix 2026-07-27] era mojibake 'Più', ora escape CSS */
  position:       absolute;
  top:            10px;
  right:          10px;
  background:     var(--sa-orange);
  color:          #fff;
  font-size:      10px;
  font-weight:    800;
  padding:        4px 8px;
  border-radius:  6px;
  text-transform: uppercase;
  letter-spacing: .4px;
  z-index:        2;
  line-height:    1.4;
  pointer-events: none;
}
/* Bottone aggiungi al carrello */
.woocommerce ul.products li.product .button {
  display:         block !important;
  width:           calc(100% - 32px) !important;
  margin:          6px 16px 14px !important;
  padding:         10px 0 !important;
  background:      var(--sa-grad-cta) !important;
  color:           #fff !important;
  border:          none !important;
  border-radius:   10px !important;
  font-size:       14px !important;
  font-weight:     700 !important;
  text-align:      center !important;
  text-decoration: none !important;
  cursor:          pointer;
  transition:      opacity .2s, transform .2s;
}
.woocommerce ul.products li.product .button:hover {
  opacity:   .9;
  transform: translateY(-1px);
}

/* Paginazione */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li {
  display: inline;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  background:      var(--sa-card) !important;
  border:          1px solid var(--sa-line) !important;
  border-radius:   8px !important;
  color:           var(--sa-ink) !important;
  font-size:       14px;
  font-weight:     600;
  text-decoration: none;
  transition:      background .2s, color .2s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background:   var(--sa-cta) !important;
  border-color: var(--sa-cta) !important;
  color:        #fff !important;
}

@media (max-width: 900px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 520px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   SHOP PAGE — 1 colonna, prodotti full-width
   ========================================================= */
/* Toolbar */
.sa-shop-toolbar {
  margin-bottom: 20px;
  padding:       10px 16px;
  background:    var(--sa-card);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
}
.sa-shop-toolbar > .wp-block-group__inner-container {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  gap:             12px !important;
  flex-wrap:       wrap !important;
  width:           100% !important;
}
/* Product Filters (WC 10.x — preserved per eventuali re-usi) */
.wp-block-woocommerce-product-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wp-block-woocommerce-product-filter-price,
.wp-block-woocommerce-product-filter-attribute,
.wp-block-woocommerce-product-filter-status,
.wp-block-woocommerce-product-filter-rating {
  background:    var(--sa-card);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  padding:       16px 18px;
  color:         var(--sa-ink);
}
.wc-block-product-filter__header { display: block; }
.wc-block-product-filter__header,
[class*="wp-block-woocommerce-product-filter-"] .wc-block-product-filter__header {
  font-size:      13px;
  font-weight:    700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color:          var(--sa-navy);
  margin-bottom:  10px;
}
.wp-block-woocommerce-product-filter-checkbox-list ul,
.wp-block-woocommerce-product-filter-checkbox-list .wc-block-checkbox-list {
  list-style: none;
  padding:    0;
  margin:     0;
}
.wp-block-woocommerce-product-filter-checkbox-list li { padding: 4px 0; }
.wp-block-woocommerce-product-filter-checkbox-list label { color: var(--sa-ink); font-size: 14px; cursor: pointer; }
.wp-block-woocommerce-product-filter-checkbox-list label:hover { color: var(--sa-navy); }
.wp-block-woocommerce-product-filter-checkbox-list input[type="checkbox"]:checked { accent-color: var(--sa-cta); }
.wc-block-filter-price-slider__range-input-progress,
.wp-block-woocommerce-product-filter-price-slider .wc-block-price-filter__range-input-progress {
  background: var(--sa-cta) !important;
}
.wp-block-woocommerce-product-filter-active { margin-bottom: 0; }
.wp-block-woocommerce-product-filter-removable-chips li,
.wc-block-active-filters__list-item-value {
  background:    var(--sa-cta) !important;
  color:         #fff !important;
  border-radius: 999px !important;
  padding:       3px 10px !important;
  font-size:     13px !important;
}
/* Catalog sorting */
.wp-block-woocommerce-catalog-sorting select {
  background:    var(--sa-card) !important;
  color:         var(--sa-ink) !important;
  border:        1px solid var(--sa-line) !important;
  border-radius: 8px !important;
  padding:       8px 32px 8px 12px !important;
  font-size:     14px;
  cursor:        pointer;
}
.wp-block-woocommerce-product-results-count {
  color:     var(--sa-grey);
  font-size: 14px;
}
/* ── block product-collection grid ── */
.wp-block-woocommerce-product-collection .wc-block-product-list {
  display:               grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap:                   20px !important;
  list-style:            none;
  padding:               0;
  margin:                0;
}
.wp-block-woocommerce-product-collection .wc-block-product {
  background:     var(--sa-card);
  border:         1px solid var(--sa-line);
  border-radius:  var(--sa-r-lg);
  overflow:       hidden;
  transition:     transform .25s var(--sa-ease), border-color .25s, box-shadow .25s var(--sa-ease);
  display:        flex;
  flex-direction: column;
}
.wp-block-woocommerce-product-collection .wc-block-product:hover {
  transform:    translateY(-5px);
  border-color: #3a4150;
  box-shadow:   var(--sa-sh-2);
}
.wc-block-product .wc-block-product-product-image img {
  display:      block;
  width:        100%;
  aspect-ratio: 1/1;
  object-fit:   cover;
}
.wc-block-product .wp-block-woocommerce-product-title {
  font-size:   15px !important;
  font-weight: 700 !important;
  padding:     14px 14px 4px !important;
  margin:      0 !important;
  flex:        1;
}
.wc-block-product .wp-block-woocommerce-product-title a {
  color:           var(--sa-navy) !important;
  text-decoration: none !important;
}
.wc-block-product .wp-block-woocommerce-product-title a:hover { color: var(--sa-cta) !important; }
.wc-block-product .wp-block-woocommerce-product-price {
  padding:     0 14px 8px !important;
  font-size:   16px !important;
  font-weight: 800 !important;
  color:       var(--sa-ink) !important;
}
.wc-block-product .wp-block-woocommerce-product-price del {
  color:       var(--sa-grey) !important;
  font-size:   13px !important;
  font-weight: 500 !important;
}
.wc-block-product .wp-block-woocommerce-product-price ins { text-decoration: none !important; }
.wc-block-product .wp-block-woocommerce-product-button {
  padding:    6px 14px 14px !important;
  margin-top: auto;
}
.wc-block-product .wp-block-woocommerce-product-button a,
.wc-block-product .wp-block-woocommerce-product-button button {
  display:         block !important;
  width:           100% !important;
  padding:         10px 0 !important;
  background:      var(--sa-grad-cta) !important;
  color:           #fff !important;
  border:          none !important;
  border-radius:   10px !important;
  font-size:       14px !important;
  font-weight:     700 !important;
  text-align:      center !important;
  text-decoration: none !important;
  cursor:          pointer;
  transition:      opacity .2s, transform .2s;
}
.wc-block-product .wp-block-woocommerce-product-button a:hover,
.wc-block-product .wp-block-woocommerce-product-button button:hover {
  opacity:   .9;
  transform: translateY(-1px);
}
/* Desktop: product-filters inline override (no overlay) */
@media (min-width: 821px) {
  .sa-shop-filters .wc-block-product-filters__open-overlay,
  .sa-shop-filters .wc-block-product-filters__close-overlay,
  .sa-shop-filters .wc-block-product-filters__overlay-header,
  .sa-shop-filters .wc-block-product-filters__overlay-footer { display: none !important; }
  .sa-shop-filters .wc-block-product-filters__overlay {
    background:     transparent !important;
    pointer-events: auto !important;
    position:       static !important;
    transition:     none !important;
    z-index:        auto !important;
  }
  .sa-shop-filters .wc-block-product-filters__overlay-wrapper {
    height:   auto !important;
    position: static !important;
    width:    auto !important;
  }
  .sa-shop-filters .wc-block-product-filters__overlay-dialog {
    background:     transparent !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            16px;
    max-height:     none !important;
    position:       static !important;
    transform:      none !important;
    transition:     none !important;
  }
  .sa-shop-filters .wc-block-product-filters__overlay-content {
    flex-grow: unset !important;
    overflow:  visible !important;
    padding:   0 !important;
  }
}
@media (max-width: 1100px) {
  .wp-block-woocommerce-product-collection .wc-block-product-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 700px) {
  .wp-block-woocommerce-product-collection .wc-block-product-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* =========================================================
   FOOTER GP
   ========================================================= */
.site-footer,
.footer-bar { background: var(--sa-bg2) !important; border-top: 1px solid var(--sa-line); }
.footer-bar a       { color: var(--sa-grey); transition: color .15s, transform .2s var(--sa-ease); display: inline-block; }
.footer-bar a:hover { color: var(--sa-white); transform: translateX(3px); }

/* =========================================================
   RESPONSIVE ≤ 900px
   ========================================================= */
@media (max-width: 900px) {
  .sa-sec { padding: 56px 20px; }
  .sa-hero { padding: 56px 20px 48px; }
  .sa-hero-grid { grid-template-columns: 1fr !important; }
  .sa-hero-card { min-height: 320px; }
  .sa-cmp  { grid-template-columns: 1fr; }
  .sa-grid { grid-template-columns: 1fr 1fr; }
  .sa-why  { grid-template-columns: 1fr 1fr; }
  .sa-steps { grid-template-columns: 1fr; }
  .sa-steps::before { display: none; }
  .sa-vids  { grid-template-columns: 1fr; }
  .sa-revs  { grid-template-columns: 1fr; }
  .sa-trust ul { grid-template-columns: 1fr 1fr; }
  .sa-trust li:nth-child(2)  { border-right: 0; }
  .sa-trust li:nth-child(-n+2) { border-bottom: 1px solid var(--sa-line); }
  .sa-trust .wp-block-columns { flex-wrap: wrap !important; }
  .sa-trust .wp-block-column.sa-trust-item { flex: 1 1 50%; }
  .sa-trust .wp-block-column.sa-trust-item:nth-child(2) { border-right: 0; }
  .sa-trust .wp-block-column.sa-trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--sa-line); }
  .sa-final { padding: 44px 24px; }
  .sa-specs p { padding-right: 16px; margin-right: 16px; }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product { margin-bottom: 18px !important; }
}

@media (max-width: 520px) {
  .sa-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   HOME V2 — Palette CHIARA (scoped a .sa-home)
   Zero impatto su :root, WooCommerce, home-v1.
   Ogni selettore e' prefissato con .sa-home.
   ========================================================= */

/* ---- PALETTE ---- */
.sa-home {
  --sa-paper:   #F5F6F8;
  --sa-paper-2: #ECEEF2;
  --sa-card:    #FFFFFF;
  --sa-ink:     #14171C;
  --sa-ink-2:   #3D434E;
  --sa-muted:   #6B7280;
  --sa-line:    #E4E7EB;
  --sa-line-2:  #D7DBE0;
  --sa-red:     #E11D2A;
  --sa-red-d:   #B7141F;
  --sa-orange:  #FF6A2C;
  --sa-verified:#16A34A;
  --sa-dark:    #0E0F12;
  --sa-dark-2:  #15171C;
  --sa-dark-card:#1B1E25;
  --sa-dark-line:#2A2E37;
  --sa-on-dark: #FFFFFF;
  --sa-on-dark-2:#E6E9EF;
  --sa-on-dark-muted:#A7AEBA;
  --sa-r-sm:10px; --sa-r-md:14px; --sa-r-lg:18px; --sa-r-xl:24px;
  --sa-sh-1: 0 1px 2px rgba(16,23,32,.06), 0 8px 24px rgba(16,23,32,.08);
  --sa-sh-2: 0 4px 12px rgba(16,23,32,.10), 0 24px 48px rgba(16,23,32,.12);
  --sa-sh-red: 0 10px 30px rgba(225,29,42,.28);
  --sa-ease: cubic-bezier(.22,.61,.36,1);
  font-family: Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  background: var(--sa-paper);
  color: var(--sa-ink-2);
  line-height: 1.6;
  /* clip, NON hidden: con overflow-x:hidden il browser forza overflow-y:auto
     sull'altro asse → <main> diventa un contenitore scrollabile e compare una
     SECONDA scrollbar verticale dentro la pagina (oltre a quella del browser).
     overflow:clip taglia lo sfondamento orizzontale senza creare scroll. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
}
.sa-home * { box-sizing: border-box; }
.sa-home img { max-width: 100%; display: block; }
.sa-home ::selection { background: var(--sa-red); color: #fff; }
.sa-home a { color: inherit; text-decoration: none; }
.sa-home :where(a,button,summary):focus-visible { outline: 2px solid var(--sa-orange); outline-offset: 3px; border-radius: 6px; }
.sa-home h1,.sa-home h2,.sa-home h3,.sa-home h4 { line-height: 1.12; margin: 0 0 .45em; font-weight: 800; letter-spacing: -.025em; color: var(--sa-ink); }

/* ---- BANDE SCURE ---- */
.sa-home .sa-sec--dark {
  background: var(--sa-dark);
  color: var(--sa-on-dark);
  --sa-card: var(--sa-dark-card);
  --sa-line: var(--sa-dark-line);
  --sa-ink: #fff;
  --sa-ink-2: var(--sa-on-dark-2);
  --sa-muted: var(--sa-on-dark-muted);
  --sa-paper: var(--sa-dark-2);
  --sa-paper-2: var(--sa-dark-2);
  --sa-sh-1: 0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --sa-sh-2: 0 2px 6px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.35);
}
.sa-home .sa-sec--dark h1,
.sa-home .sa-sec--dark h2,
.sa-home .sa-sec--dark h3,
.sa-home .sa-sec--dark h4 { color: #fff; }
.sa-home .sa-sec--dark .wp-block-heading { color: #fff; }
.sa-home .sa-sec--paper2 { background: var(--sa-paper-2); }

/* ---- RESET WP BLOCKS DENTRO .sa-home ---- */
.sa-home .wp-block-group { --wp--style--block-gap: 0; }
.sa-home p,.sa-home .wp-block-paragraph { margin-top: 0; margin-bottom: 0; }
.sa-home .wp-block-heading { letter-spacing: -.025em; }
/* inner-container trasparente sui contenitori layout */
.sa-home .sa-hero > .wp-block-group__inner-container,
.sa-home .sa-trust > .wp-block-group__inner-container,
.sa-home .sa-head > .wp-block-group__inner-container,
.sa-home .sa-final > .wp-block-group__inner-container,
.sa-home .sa-faq > .wp-block-group__inner-container,
.sa-home .sa-hero-card > .wp-block-group__inner-container,
.sa-home .sa-proof > .wp-block-group__inner-container,
.sa-home .sa-specs-row > .wp-block-group__inner-container,
.sa-home .sa-myth-list > .wp-block-group__inner-container,
.sa-home .sa-myth-row > .wp-block-group__inner-container,
.sa-home .sa-guarantee-grid > .wp-block-group__inner-container,
.sa-home .sa-mech-text > .wp-block-group__inner-container,
.sa-home .sa-rev > .wp-block-group__inner-container { display: contents; }

/* ---- LAYOUT ---- */
.sa-home .sa-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
/* WP 7.0 usa is-layout-flow, non aggiunge inner-container → padding diretto sulla sezione */
.sa-home .sa-sec { padding: 70px max(24px, calc((100% - 1180px) / 2)); }
.sa-home .sa-sec > .wp-block-group__inner-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sa-home .sa-sec .wp-block-heading { font-size: clamp(27px,3.4vw,42px); }
.sa-home .sa-sec--dark .wp-block-paragraph { color: var(--sa-on-dark-muted); }
.sa-home .sa-head { max-width: 640px; margin-bottom: 46px; }
.sa-home .sa-head .wp-block-paragraph { color: var(--sa-muted); font-size: 17px; }
.sa-home .sa-head .wp-block-heading { font-size: clamp(27px,3.4vw,42px); }

/* ---- TYPOGRAPHY UTILS ---- */
.sa-home .sa-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--sa-red); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; margin: 0 0 14px;
}
.sa-home .sa-eyebrow::before { content: ""; width: 26px; height: 2px; background: linear-gradient(90deg,var(--sa-red),var(--sa-orange)); border-radius: 2px; }

/* ---- BUTTONS ---- */
.sa-home .sa-btn,
.sa-home .wp-block-button__link {
  display: inline-flex; align-items: center; gap: .55em;
  background: linear-gradient(180deg,#F0273A,var(--sa-red) 55%,var(--sa-red-d));
  color: #fff !important; font-weight: 700; font-size: 16px; padding: 15px 30px; border-radius: 12px;
  border: 0; cursor: pointer; position: relative; isolation: isolate;
  box-shadow: var(--sa-sh-red),inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .25s var(--sa-ease),box-shadow .25s var(--sa-ease);
}
.sa-home .sa-btn:hover,.sa-home .wp-block-button__link:hover {
  transform: translateY(-2px); color: #fff !important;
  box-shadow: 0 12px 34px rgba(225,29,42,.45),inset 0 1px 0 rgba(255,255,255,.18);
}
.sa-home .sa-btn:active,.sa-home .wp-block-button__link:active { transform: translateY(0); }
.sa-home .wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--sa-grad-cta) !important; color: #fff !important; border: 0 !important; box-shadow: var(--sa-sh-cta), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.sa-home .wp-block-button.is-style-outline .wp-block-button__link:hover {
  transform: translateY(-2px); background: var(--sa-cta-d) !important; color: #fff !important; box-shadow: 0 12px 34px rgba(255,106,61,.45), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.sa-home .sa-btn--ghost,
.sa-home .sa-btn-secondary,
.sa-home .wp-block-button.sa-btn-secondary .wp-block-button__link {
  background: transparent !important; border: 1.5px solid var(--sa-cta) !important; color: var(--sa-cta) !important; box-shadow: none !important;
}
.sa-home .sa-btn--ghost:hover,
.sa-home .sa-btn-secondary:hover,
.sa-home .wp-block-button.sa-btn-secondary .wp-block-button__link:hover {
  border-color: var(--sa-cta) !important; background: var(--sa-cta) !important; color: #fff !important; box-shadow: var(--sa-sh-cta) !important;
}
.sa-home .sa-sec--dark .wp-block-button.sa-btn-secondary .wp-block-button__link {
  border-color: #fff3 !important; color: #fff !important; background: rgba(255,255,255,.04) !important;
}
.sa-home .sa-sec--dark .wp-block-button.sa-btn-secondary .wp-block-button__link:hover {
  border-color: #fff8 !important; background: rgba(255,255,255,.08) !important;
}

/* ---- REVEAL ---- */
/* Gating su .sa-js-ready: senza JS il contenuto resta visibile (no FOUC) */
.sa-js-ready .sa-home .sa-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--sa-ease),transform .7s var(--sa-ease); }
.sa-home .sa-rv.in { opacity: 1 !important; transform: none !important; }
.sa-home .sa-rv.d1 { transition-delay: .08s; }
.sa-home .sa-rv.d2 { transition-delay: .16s; }
.sa-home .sa-rv.d3 { transition-delay: .24s; }
@media(prefers-reduced-motion:reduce){.sa-js-ready .sa-home .sa-rv{opacity:1;transform:none;transition:none}}

/* ---- PLACEHOLDER ---- */
.sa-home .sa-ph { display:flex;align-items:center;justify-content:center;color:#9AA5B4;font-weight:700;letter-spacing:.08em;text-align:center;border:1.5px dashed var(--sa-line-2);border-radius:var(--sa-r-md);font-size:13px }
.sa-home .sa-sec--dark .sa-ph { color:#4b515e;border-color:#353b46;background:repeating-linear-gradient(45deg,#171a20,#171a20 12px,#1b1e25 12px,#1b1e25 24px) }

/* ---- 1. MICROBAR + COUNTDOWN ---- */
.sa-home .sa-microbar {
  background: linear-gradient(90deg,var(--sa-red-d),var(--sa-red) 50%,var(--sa-red-d));
  color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 9px 12px; letter-spacing: .02em;
}
.sa-microbar .tick {
  display: inline-block; background: rgba(0,0,0,.25); border-radius: 5px;
  padding: 2px 6px; min-width: 26px; font-variant-numeric: tabular-nums; font-weight: 800;
}
.sa-home .sa-microbar p { margin: 0; }

/* ---- 2. HERO ---- */
.sa-home .sa-hero {
  position: relative; padding: 84px max(24px, calc((100% - 1180px) / 2)) 72px; overflow: hidden;
}
.sa-home .sa-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(950px 520px at 80% -5%, rgba(225,29,42,.22), transparent 62%),
    radial-gradient(720px 520px at 6% 100%, rgba(255,106,44,.10), transparent 60%),
    var(--sa-dark);
}
.sa-home .sa-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(640px 420px at 72% 18%,#000 30%,transparent 75%);
  mask-image: radial-gradient(640px 420px at 72% 18%,#000 30%,transparent 75%);
}
.sa-home .sa-hero > .wp-block-group__inner-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; display: block; }
.sa-home .sa-hero-grid.wp-block-columns,
.sa-home .sa-hero .wp-block-columns.sa-hero-grid {
  display: grid !important; grid-template-columns: 1.05fr .95fr !important; gap: 48px; align-items: center;
}
.sa-home .sa-hero-grid .wp-block-column { flex: unset !important; flex-basis: unset !important; }
.sa-home .sa-hero .wp-block-heading { font-size: clamp(36px,5vw,60px); margin-bottom: .35em; color: #fff; }
.sa-home .sa-hero .wp-block-heading em.strike { color: rgba(255,255,255,.4); font-style: normal; text-decoration: line-through; opacity: .6; }
.sa-home .sa-hero .wp-block-heading em.hi {
  color: var(--sa-red); font-style: normal; position: relative; white-space: nowrap;
}
.sa-home .sa-hero .wp-block-heading em.hi::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .14em;
  background: linear-gradient(90deg,var(--sa-red),var(--sa-orange)); border-radius: 99px; opacity: .7;
}
.sa-home .sa-hero .sa-lead { font-size: 19px; color: var(--sa-on-dark-2); max-width: 36ch; margin: 0 0 30px; }
.sa-home .sa-hero .wp-block-buttons { margin-bottom: 30px; }

/* proof row */
.sa-home .sa-proof { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; font-size: 14px; color: var(--sa-on-dark-muted); }
.sa-home .sa-proof .st { color: var(--sa-orange); font-weight: 800; letter-spacing: 2px; }
.sa-home .sa-proof b { color: #fff; }

/* specs row */
.sa-home .sa-specs-row { display: flex; flex-wrap: wrap; border-top: 1px solid var(--sa-dark-line); }
.sa-home .sa-specs-row .wp-block-column { font-size: 13.5px; padding: 18px 26px 0 0; margin-right: 26px; color: var(--sa-on-dark-muted); }
.sa-home .sa-specs-row .wp-block-heading,.sa-home .sa-specs-row strong { display: block; font-size: 26px; color: #fff; letter-spacing: -.02em; line-height: 1.15; font-weight: 800; }

/* hero card */
.sa-home .sa-hero-card {
  background: linear-gradient(160deg,#21252D,#13151A 70%); border: 1px solid var(--sa-dark-line); border-radius: var(--sa-r-xl); padding: 28px;
  position: relative; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 2px 6px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.35);
  transition: transform .4s var(--sa-ease),box-shadow .4s var(--sa-ease);
}
.sa-home .sa-hero-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.sa-home .sa-hero-card::after { content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(420px 240px at 70% 0%,rgba(225,29,42,.16),transparent 70%); }
.sa-home .sa-hero-card .sa-ph { position:absolute;inset:28px; }
/* C1 – testo blocchi Gutenberg sopra la foto assoluta */
.sa-home .sa-hero-card > .wp-block-paragraph,
.sa-home .sa-hero-card > .wp-block-heading,
.sa-home .sa-hero-card > .wp-block-buttons { position: relative; z-index: 3; }
.sa-home .sa-hero-card .tag {
  position: relative; z-index: 2; align-self: flex-start; margin-bottom: auto;
  background: linear-gradient(90deg,var(--sa-red),#F0273A); font-weight: 800; font-size: 11.5px; letter-spacing: .08em;
  padding: 7px 14px; border-radius: 999px; box-shadow: var(--sa-sh-red); color: #fff;
  animation: tagPulse 2.4s ease-in-out infinite;
}
@keyframes tagPulse{0%,100%{box-shadow:var(--sa-sh-red)}50%{box-shadow:var(--sa-sh-red),0 0 0 6px rgba(225,29,42,.18)}}
.sa-home .sa-hero-card .meta { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.sa-home .sa-hero-card .meta .wp-block-heading,.sa-home .sa-hero-card .meta h3 { font-size: 18px; margin: 0; color: #fff; }
.sa-home .sa-hero-card .pz { font-size: 22px; font-weight: 800; color: #fff; }
.sa-home .sa-hero-card .pz s { display: block; font-size: 13px; color: var(--sa-on-dark-muted); font-weight: 600; }
.sa-home .sa-hero-card .chip-cert {
  position: absolute; bottom: 28px; left: 28px; z-index: 3;
  background: rgba(22,163,74,.15); border: 1px solid rgba(22,163,74,.35);
  color: #4ade80; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
}

/* ---- 3. MARQUEE (globale) ---- */
.sa-marquee { background: linear-gradient(90deg,var(--sa-red-d),var(--sa-red) 50%,var(--sa-red-d)); color: #fff; overflow: hidden; padding: 11px 0; }
.sa-marquee__track { display: flex; width: max-content; white-space: nowrap; gap: 48px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; animation: saScroll 30s linear infinite; }
.sa-marquee__track span::before { content: "·"; margin-right: 48px; opacity: .5; }
.sa-marquee__track span:first-child::before { display: none; }
@keyframes saScroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.sa-marquee__track{animation:none}}

/* [Fix audit 2026-07-26] Hint "Scorri per vedere tutto →" inserito via JS sotto le
   tabelle comparative che sforano in larghezza (mobile). Elemento fuori dallo
   scroll container: non scorre, appare solo se serve, sparisce a fine scroll. */
.sa-scrollhint{display:flex;justify-content:center;margin:10px 0 0;transition:opacity .2s ease}
.sa-scrollhint.is-hidden{opacity:0;pointer-events:none}
.sa-scrollhint span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--sa-muted);background:var(--sa-bg-3);border-radius:999px;padding:5px 13px}
.sa-scrollhint span::after{content:"→";font-weight:800;color:var(--sa-blue);animation:saNudge 1.4s ease-in-out infinite}
@keyframes saNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.sa-scrollhint span::after{animation:none}}

/* [Fix 2026-07-27] Prezzo in offerta uniforme OVUNQUE (riepilogo prodotto, sticky bar,
   upsell "Scopri anche", card correlati/negozio): il vecchio prezzo è SEMPRE barrato e il
   nuovo NON è mai sottolineato. Nota: <ins> ha text-decoration:underline di default nel
   browser, e i selettori .woocommerce div.product p.price non coprivano sticky bar/upsell.
   La regola :has(.woocommerce-Price-amount) intercetta il prezzo in qualsiasi contenitore. */
.sa-sticky-atc__price del,
del:has(.woocommerce-Price-amount) { text-decoration: line-through !important; }
.sa-sticky-atc__price ins,
ins:has(.woocommerce-Price-amount) { text-decoration: none !important; }

/* ---- 4. TRUST STRIP ---- */
.sa-home .sa-trust { border-top: 1px solid var(--sa-line); border-bottom: 1px solid var(--sa-line); background: var(--sa-card); }
.sa-home .sa-trust .wp-block-columns { flex-wrap: nowrap !important; gap: 0 !important; max-width: 1180px; margin: 0 auto; padding: 0 max(24px, calc((100% - 1180px) / 2)); }
.sa-home .sa-trust .wp-block-column { padding: 20px 14px; text-align: center; border-right: 1px solid var(--sa-line); display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s; flex: 1; }
.sa-home .sa-trust .wp-block-column:last-child { border-right: 0; }
.sa-home .sa-trust .wp-block-column:hover { background: var(--sa-paper); }
.sa-home .sa-trust .wp-block-paragraph,.sa-home .sa-trust p { font-weight: 700; font-size: 14px; color: var(--sa-ink); }
.sa-home .sa-trust .ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(225,29,42,.10); color: var(--sa-red); font-size: 14px; flex: 0 0 auto; }

/* ---- 5. PROBLEMA / AGITAZIONE ---- */
.sa-home .sa-prob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 36px; }
.sa-home .sa-prob-card { border-radius: var(--sa-r-lg); padding: 32px; border: 1px solid var(--sa-line); background: var(--sa-card); box-shadow: var(--sa-sh-1); }
.sa-home .sa-prob-card.see { background: var(--sa-paper-2); border-style: dashed; }
.sa-home .sa-prob-card.have { border-color: var(--sa-red); box-shadow: var(--sa-sh-red); }
.sa-home .sa-prob-card .label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-muted); margin: 0 0 12px; }
.sa-home .sa-prob-card.have .label { color: var(--sa-red); }
.sa-home .sa-prob-card .big { font-size: clamp(40px,5vw,60px); font-weight: 800; line-height: 1; margin: 6px 0 10px; color: var(--sa-ink); }
.sa-home .sa-prob-card.have .big { color: var(--sa-red); }
.sa-home .sa-prob-card p,.sa-home .sa-prob-card .wp-block-paragraph { color: var(--sa-ink-2); font-size: 15px; margin: 0; }
.sa-home .sa-pain-grid.wp-block-columns { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
.sa-home .sa-pain-grid .wp-block-column { flex: unset !important; flex-basis: unset !important; }
.sa-home .sa-pain { background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-r-md); padding: 18px 20px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--sa-sh-1); }
.sa-home .sa-pain .ico { font-size: 20px; flex: 0 0 auto; margin-top: 2px; }
.sa-home .sa-pain strong { display: block; font-size: 14.5px; color: var(--sa-ink); margin-bottom: 4px; }
.sa-home .sa-pain p,.sa-home .sa-pain .wp-block-paragraph { font-size: 13.5px; color: var(--sa-muted); margin: 0; }

/* ---- 6. MECCANISMO ---- */
.sa-home .sa-mech-grid.wp-block-columns {
  display: grid !important; grid-template-columns: .9fr 1.1fr !important; gap: 48px !important; align-items: center;
}
.sa-home .sa-mech-grid .wp-block-column { flex: unset !important; flex-basis: unset !important; }
.sa-home .sa-mech-img { margin: 0; position: relative; }
.sa-home .sa-mech-img .sa-ph { aspect-ratio: 3/4; width: 100%; }
.sa-home .sa-mech-img .badge {
  position: absolute; bottom: -16px; right: -16px;
  background: linear-gradient(135deg,#F0273A,var(--sa-red-d)); color: #fff;
  padding: 12px 18px; border-radius: var(--sa-r-md); font-size: 14px; font-weight: 800;
  box-shadow: var(--sa-sh-red); line-height: 1.3;
}
.sa-home .sa-mech-chain { list-style: none; counter-reset: s; padding: 0; margin: 28px 0 0; }
.sa-home .sa-mech-chain li { position: relative; padding: 0 0 28px 64px; }
.sa-home .sa-mech-chain li:last-child { padding-bottom: 0; }
.sa-home .sa-mech-chain li::before {
  counter-increment: s; content: counter(s,decimal-leading-zero);
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff;
  background: linear-gradient(180deg,#F0273A,var(--sa-red-d)); box-shadow: var(--sa-sh-red); font-size: 15px;
}
.sa-home .sa-mech-chain li:not(:last-child)::after { content:"";position:absolute;left:21px;top:46px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--sa-red),transparent); }
.sa-home .sa-mech-chain .wp-block-heading,.sa-home .sa-mech-chain h4 { font-size: 17px; margin: 0 0 6px; color: #fff; }
.sa-home .sa-mech-chain p,.sa-home .sa-mech-chain .wp-block-paragraph { font-size: 14.5px; color: var(--sa-on-dark-muted); margin: 0; }

/* ---- 7. USE-CASE ---- */
.sa-home .sa-cases.wp-block-columns { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; }
.sa-home .sa-cases .wp-block-column { flex: unset !important; flex-basis: unset !important; }
.sa-home .sa-case { border-radius: var(--sa-r-lg); overflow: hidden; background: var(--sa-card); border: 1px solid var(--sa-line); box-shadow: var(--sa-sh-1); transition: transform .3s var(--sa-ease),box-shadow .3s var(--sa-ease); }
.sa-home .sa-case:hover { transform: translateY(-5px); box-shadow: var(--sa-sh-2); }
.sa-home .sa-case .img { aspect-ratio: 3/4; position: relative; overflow: hidden; }
.sa-home .sa-case .img .sa-ph { position: absolute; inset: 0; border-radius: 0; border: 0; background: #E8EBF0; }
.sa-home .sa-case-body { padding: 20px; }
.sa-home .sa-case-body .wp-block-heading,.sa-home .sa-case-body h3 { font-size: 17px; margin-bottom: 6px; }
.sa-home .sa-case-body p,.sa-home .sa-case-body .wp-block-paragraph { font-size: 14px; color: var(--sa-muted); margin: 0; }

/* ---- 8. CONFRONTO MODELLI ---- */
.sa-home .sa-cmp.wp-block-columns { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; align-items: stretch; }
.sa-home .sa-cmp .wp-block-column { flex: unset !important; flex-basis: unset !important; }
.sa-home .sa-cmp .col {
  background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-r-lg); padding: 28px; position: relative;
  display: flex; flex-direction: column; box-shadow: var(--sa-sh-1);
  transition: transform .3s var(--sa-ease),box-shadow .3s var(--sa-ease),border-color .3s;
}
.sa-home .sa-cmp .col:hover { transform: translateY(-5px); border-color: var(--sa-line-2); box-shadow: var(--sa-sh-2); }
.sa-home .sa-cmp .col.best { border-color: var(--sa-red); background: linear-gradient(160deg,#FFF5F5 0%,var(--sa-card) 45%); box-shadow: 0 0 0 1px var(--sa-red),var(--sa-sh-red); }
.sa-home .sa-cmp .col.best:hover { box-shadow: 0 0 0 1px var(--sa-red),0 24px 60px rgba(225,29,42,.22); }
.sa-home .sa-cmp .best .flag { position: absolute; top: -13px; left: 26px; background: linear-gradient(90deg,var(--sa-red),#F0273A); font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 6px 12px; border-radius: 999px; box-shadow: var(--sa-sh-red); color: #fff; }
.sa-home .sa-cmp .wp-block-heading,.sa-home .sa-cmp h3 { font-size: 21px; margin-bottom: 2px; color: var(--sa-ink); }
.sa-home .sa-cmp .sub { color: var(--sa-muted); font-size: 14px; margin: 0; }
.sa-home .sa-cmp .price { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 14px 0 18px; color: var(--sa-ink); }
.sa-home .sa-cmp .price small { font-size: 14px; font-weight: 600; color: var(--sa-muted); letter-spacing: 0; }
.sa-home .sa-cmp .wp-block-list { list-style: none; padding: 0; margin: 0 0 24px; font-size: 14.5px; flex: 1; }
.sa-home .sa-cmp .wp-block-list li { padding: 9px 0 9px 26px; border-top: 1px solid var(--sa-line); color: var(--sa-ink-2); position: relative; }
.sa-home .sa-cmp .wp-block-list li::before { content: "✓"; position: absolute; left: 2px; top: 9px; color: var(--sa-red); font-weight: 800; font-size: 13px; }
.sa-home .sa-cmp .wp-block-list li:first-child { border-top: 0; }
.sa-home .sa-cmp .wp-block-buttons { margin-top: auto; }
.sa-home .sa-cmp .wp-block-button__link { justify-content: center; }
.sa-home .sa-cmp .col .cmp-img { aspect-ratio: 4/3; border-radius: var(--sa-r-md); overflow: hidden; background: var(--sa-bg-2); margin: 0 0 18px; }
.sa-home .sa-cmp .col .cmp-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- 9. CONFRONTO VS ALTERNATIVE ---- */
.sa-home .sa-cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sa-home .sa-cmp-table {
  width: 100%; border-collapse: collapse;
  background: var(--sa-card); border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-lg); overflow: hidden; min-width: 560px;
  display: table;
}
.sa-home .sa-cmp-table th,
.sa-home .sa-cmp-table td { padding: 14px 16px; text-align: center; font-size: 14px; border-bottom: 1px solid var(--sa-line); color: var(--sa-ink-2); }
.sa-home .sa-cmp-table tr:last-child td { border-bottom: 0; }
.sa-home .sa-cmp-table td:first-child { text-align: left; color: var(--sa-ink-2); font-weight: 500; background: var(--sa-card); position: sticky; left: 0; z-index: 1; }
.sa-home .sa-cmp-table thead th { font-weight: 700; color: #fff; font-size: 13px; background: var(--sa-grad-brand); }
.sa-home .sa-cmp-table thead th:first-child { position: sticky; left: 0; z-index: 2; }
/* Colonna evidenziata: box-shadow inset per evitare disallineamenti con border-collapse */
.sa-home .sa-cmp-table .me { background: rgba(255,106,61,.08); box-shadow: inset 2px 0 0 var(--sa-cta), inset -2px 0 0 var(--sa-cta); color: var(--sa-navy); }
.sa-home .sa-cmp-table thead .me { color: #fff; background: var(--sa-cta); box-shadow: inset 2px 0 0 var(--sa-cta), inset -2px 0 0 var(--sa-cta), inset 0 2px 0 var(--sa-cta); }
.sa-home .sa-cmp-table tr:last-child .me { box-shadow: inset 2px 0 0 var(--sa-cta), inset -2px 0 0 var(--sa-cta), inset 0 -2px 0 var(--sa-cta); }
.sa-home .sa-cmp-table .y { color: var(--sa-blue); font-weight: 800; font-size: 16px; }
.sa-home .sa-cmp-table .me.y { color: var(--sa-cta-d); }
.sa-home .sa-cmp-table .n { color: var(--sa-muted); font-size: 15px; opacity: .55; }
.sa-home .sa-cmp-table .note { font-size: 12px; color: var(--sa-grey); margin-top: 12px; font-style: italic; }
@media (max-width: 480px) {
  .sa-home .sa-cmp-table th,
  .sa-home .sa-cmp-table td { padding: 10px 10px; font-size: 12px; }
}

/* ---- 10. NUMERI / STATS ---- */
.sa-home .sa-stats.wp-block-columns { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 28px !important; text-align: center; }
.sa-home .sa-stats .wp-block-column { flex: unset !important; flex-basis: unset !important; }
.sa-home .sa-stats .s-num { font-size: clamp(38px,4.5vw,58px); font-weight: 800; line-height: 1; color: #fff; letter-spacing: -.03em; margin-bottom: 8px; }
.sa-home .sa-stats .s-suf { color: var(--sa-red); font-size: .65em; }
.sa-home .sa-stats .s-label { font-size: 14px; color: var(--sa-on-dark-muted); max-width: 16ch; margin: 0 auto; }

/* ---- 11. BESTSELLERS ---- */
.sa-home .sa-grid.wp-block-columns { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 20px !important; }
.sa-home .sa-grid .wp-block-column { flex: unset !important; flex-basis: unset !important; padding: 0 !important; }
.sa-home .sa-prod { background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-r-lg); overflow: hidden; box-shadow: var(--sa-sh-1); transition: transform .3s var(--sa-ease),box-shadow .3s var(--sa-ease),border-color .3s; }
.sa-home .sa-prod:hover { transform: translateY(-5px); border-color: var(--sa-line-2); box-shadow: var(--sa-sh-2); }
.sa-home .sa-prod .img { aspect-ratio: 1/1; background: var(--sa-paper); position: relative; overflow: hidden; }
.sa-home .sa-prod .img .sa-ph { position: absolute; inset: 0; border-radius: 0; border: 0; background: #F0F2F5; }
/* H – flex column: prezzo+bottone sempre allineati in fondo alla card */
.sa-home .sa-prod .b { padding: 18px; display: flex; flex-direction: column; }
.sa-home .sa-prod .rate { color: var(--sa-orange); font-size: 13px; font-weight: 700; }
.sa-home .sa-prod .wp-block-heading,.sa-home .sa-prod h3 { font-size: 16px; margin: 7px 0 2px; color: var(--sa-ink); flex: 1; }
.sa-home .sa-prod .pr .add { white-space: nowrap; }
.sa-home .sa-prod .b > .muted,.sa-home .sa-prod .sa-muted { font-size: 13.5px; color: var(--sa-muted); }
.sa-home .sa-prod .pr { font-weight: 800; font-size: 18px; color: var(--sa-ink); margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sa-home .sa-prod .pr .add {
  background: linear-gradient(180deg,#F0273A,var(--sa-red-d)); border-radius: 9px; padding: 8px 13px; font-size: 13px; font-weight: 700; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16); transition: transform .2s var(--sa-ease),box-shadow .2s;
}
.sa-home .sa-prod .pr .add:hover { transform: translateY(-1px); box-shadow: var(--sa-sh-red); }

/* ---- 12. COME SI USA ---- */
.sa-home .sa-steps.wp-block-columns {
  display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 28px !important;
  counter-reset: s; position: relative;
}
.sa-home .sa-steps.wp-block-columns::before {
  content: ""; position: absolute; top: 25px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg,transparent,var(--sa-line) 15%,var(--sa-line) 85%,transparent);
}
.sa-home .sa-steps .wp-block-column { flex: unset !important; flex-basis: unset !important; position: relative; padding: 0 8px; }
.sa-home .sa-steps .wp-block-column::before {
  counter-increment: s; content: counter(s,decimal-leading-zero);
  display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(180deg,#F0273A,var(--sa-red-d)); font-weight: 800; font-size: 18px; color: #fff; margin-bottom: 18px;
  box-shadow: var(--sa-sh-red); position: relative; z-index: 1;
}
.sa-home .sa-steps .wp-block-heading,.sa-home .sa-steps h3 { font-size: 18px; color: var(--sa-ink); }
.sa-home .sa-steps p,.sa-home .sa-steps .wp-block-paragraph { color: var(--sa-muted); font-size: 14.5px; margin: 0; }
.sa-home .sa-steps .wp-block-image { margin: 0 0 16px; }
.sa-home .sa-steps .wp-block-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--sa-r-lg); box-shadow: var(--sa-sh-1); display: block; }

/* ---- 13. RECENSIONI ---- */
.sa-home .sa-revs.wp-block-columns { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; }
.sa-home .sa-revs .wp-block-column { flex: unset !important; flex-basis: unset !important; padding: 0 !important; }
.sa-home .sa-rev {
  background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-r-lg); padding: 26px; position: relative;
  box-shadow: var(--sa-sh-1); transition: transform .3s var(--sa-ease),border-color .3s;
  height: 100%;
}
.sa-home .sa-rev:hover { transform: translateY(-4px); border-color: var(--sa-line-2); }
.sa-home .sa-rev::before { content: "\201C"; position: absolute; top: 6px; right: 20px; font-size: 74px; line-height: 1; color: rgba(225,29,42,.10); font-weight: 800; pointer-events: none; }
.sa-home .sa-rev .stars { color: var(--sa-orange); font-weight: 700; letter-spacing: 3px; margin-bottom: 12px; }
.sa-home .sa-rev p,.sa-home .sa-rev .wp-block-paragraph { font-size: 15px; color: var(--sa-ink-2); margin: 0 0 18px; }
.sa-home .sa-rev .who { font-size: 13px; color: var(--sa-muted); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.sa-home .sa-rev .who::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,var(--sa-paper-2),var(--sa-line)); border: 1px solid var(--sa-line); flex: 0 0 auto; }
.sa-home .sa-rev .vrf { color: var(--sa-verified); font-weight: 700; font-size: 12px; margin-left: auto; }

/* ---- 14. FALSI MITI ---- */
.sa-home .sa-myth-list { max-width: 780px; display: flex; flex-direction: column; gap: 14px; }
.sa-home .sa-myth-row { display: flex; align-items: flex-start; gap: 16px; background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-r-md); padding: 20px 22px; box-shadow: var(--sa-sh-1); }
.sa-home .sa-myth-row .myth-x { color: var(--sa-red); font-size: 18px; font-weight: 900; flex: 0 0 auto; margin-top: 2px; line-height: 1; }
.sa-home .sa-myth-row .myth-check { color: var(--sa-verified); font-size: 18px; font-weight: 900; flex: 0 0 auto; margin-top: 2px; line-height: 1; }
.sa-home .sa-myth-row .myth-content strong { display: block; font-size: 15px; color: var(--sa-ink); margin-bottom: 4px; }
.sa-home .sa-myth-row .myth-content p,.sa-home .sa-myth-row .myth-content .wp-block-paragraph { font-size: 13.5px; color: var(--sa-muted); margin: 0; }
.sa-home .sa-myth-wrap.wp-block-columns { display: flex !important; gap: 36px; align-items: flex-start; }
.sa-home .sa-myth-wrap .sa-myth-img-col { flex: 0 0 38% !important; position: sticky; top: 100px; }
.sa-home .sa-myth-wrap .sa-myth-list-col { flex: 1 1 62% !important; }
.sa-home .sa-myth-wrap .sa-myth-img-col img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--sa-r-lg); box-shadow: var(--sa-sh-2); display: block; }
.sa-home .sa-myth-wrap .sa-myth-list { max-width: none; }

/* ---- 15. LEGALITA' ---- */
.sa-home .sa-why.wp-block-columns { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 20px !important; align-items: stretch !important; }
.sa-home .sa-why .wp-block-column { flex: unset !important; flex-basis: unset !important; display: flex !important; }
.sa-home .sa-why .c {
  display: flex; flex-direction: column; width: 100%;
  background: var(--sa-card); border: 1px solid var(--sa-line-2); border-radius: var(--sa-r-lg); padding: 26px;
  box-shadow: 0 2px 8px rgba(16,23,32,.09),0 8px 24px rgba(16,23,32,.07);
  transition: transform .3s var(--sa-ease),border-color .3s,box-shadow .3s var(--sa-ease);
}
.sa-home .sa-why .c:hover { transform: translateY(-4px); border-color: var(--sa-line-2); box-shadow: var(--sa-sh-2); }
.sa-home .sa-why .ic {
  width: 48px; height: 48px; border-radius: 13px; background: rgba(225,29,42,.10); color: var(--sa-red);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 22px;
  border: 1px solid rgba(225,29,42,.18); transition: transform .3s var(--sa-ease);
}
.sa-home .sa-why .c:hover .ic { transform: scale(1.08) rotate(-4deg); }
.sa-home .sa-why .wp-block-heading,.sa-home .sa-why h3 { font-size: 18px; color: var(--sa-ink); }
.sa-home .sa-why p,.sa-home .sa-why .wp-block-paragraph { color: var(--sa-muted); font-size: 14.5px; margin: 0; }

/* ---- 16. GARANZIA ---- */
.sa-home .sa-guarantee-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
  background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-r-xl); padding: 48px 40px; box-shadow: var(--sa-sh-1);
}
.sa-home .sa-guarantee .seal {
  width: 130px; height: 130px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#FFF5F5,#FFE4E4); border: 3px solid var(--sa-red);
  font-size: 10px; font-weight: 800; color: var(--sa-red); text-align: center; line-height: 1.55;
  letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 0 6px rgba(225,29,42,.10); flex-shrink: 0;
}
.sa-home .sa-guarantee-text .wp-block-heading,.sa-home .sa-guarantee-text h2 { margin-bottom: 12px; color: var(--sa-ink); }
.sa-home .sa-guarantee-text p,.sa-home .sa-guarantee-text .wp-block-paragraph { color: var(--sa-muted); margin: 0 0 20px; }
/* Sezione più larga (1560px invece di 1180px): il testo di garanzia (1217px a 17px)
   non entra in una riga nella colonna di testo della card affianco al sigillo (130px)
   dentro il container standard. Si allarga solo questa sezione, vedi className
   sa-sec--wide sul blocco "GARANZIA" nel pattern. */
.sa-home .sa-sec--wide { padding: 70px max(24px, calc((100% - 1560px) / 2)); }
.sa-home .sa-guarantee-text .wp-block-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sa-home .sa-guarantee-text .wp-block-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--sa-ink-2); }
.sa-home .sa-guarantee-text .wp-block-list li::before { content: "✓"; color: var(--sa-verified); font-size: 13px; }

/* ---- 16b. VIDEO FACADE (zero rischi, nidificato nel box garanzia) ---- */
.sa-home .sa-guarantee-grid .sa-video-wrap { grid-column: 1 / -1; }
.sa-home .sa-video-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 8px; width: 100%; padding-top: 32px; border-top: 1px solid var(--sa-line); }
.sa-home .sa-video { width: 100%; max-width: none; margin: 0 auto; }
.sa-home .sa-video__play {
  display: block; position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--sa-r-xl);
  overflow: hidden; border: 1px solid var(--sa-line); box-shadow: var(--sa-sh-2); padding: 0; cursor: pointer; background: var(--sa-bg-2);
}
.sa-home .sa-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-home .sa-video__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,42,91,.05) 0%, rgba(11,42,91,.55) 100%);
}
.sa-home .sa-video__btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 78px; height: 78px; border-radius: 50%; background: var(--sa-grad-cta); box-shadow: var(--sa-sh-cta);
  display: flex; align-items: center; justify-content: center; transition: transform .25s var(--sa-ease);
}
.sa-home .sa-video__play:hover .sa-video__btn { transform: translate(-50%,-50%) scale(1.08); }
.sa-home .sa-video__label {
  position: absolute; left: 24px; bottom: 18px; color: #fff; font-weight: 700; font-size: 15px;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.sa-home .sa-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sa-home .sa-video.is-playing { position: relative; width: 100%; max-width: none; aspect-ratio: 16/9; border-radius: var(--sa-r-xl); overflow: hidden; box-shadow: var(--sa-sh-2); background: #000; }
/* crop la barra titolo/branding YouTube in alto, lascia intatta la barra controlli in basso */
.sa-home .sa-video.is-playing iframe { top: -14%; height: 114%; }

/* ---- 17. VIDEO ---- */
.sa-home .sa-vids.wp-block-columns { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; }
.sa-home .sa-vids .wp-block-column { flex: unset !important; flex-basis: unset !important; }
.sa-home .sa-vid .img {
  aspect-ratio: 16/9; border-radius: var(--sa-r-md); background: var(--sa-paper-2);
  border: 1px solid var(--sa-line); position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; transition: border-color .25s,transform .3s var(--sa-ease),box-shadow .3s var(--sa-ease); cursor: pointer;
}
.sa-home .sa-vid:hover .img { border-color: var(--sa-line-2); transform: translateY(-3px); box-shadow: var(--sa-sh-1); }
.sa-home .sa-vid .play {
  width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(180deg,#F0273A,var(--sa-red-d));
  display: flex; align-items: center; justify-content: center; box-shadow: var(--sa-sh-red); font-size: 18px; color: #fff;
  transition: transform .3s var(--sa-ease);
}
.sa-home .sa-vid:hover .play { transform: scale(1.12); }
.sa-home .sa-vid .wp-block-heading,.sa-home .sa-vid h3 { font-size: 16px; margin-top: 14px; color: var(--sa-ink); }

/* ---- 18. FAQ ---- */
.sa-home .sa-faq { max-width: 820px; }
.sa-home .sa-faq .wp-block-details,
.sa-home .sa-faq details {
  border: 1px solid var(--sa-line); border-radius: var(--sa-r-md); margin-bottom: 12px;
  background: var(--sa-card); transition: border-color .25s,box-shadow .25s;
}
.sa-home .sa-faq .wp-block-details:hover,.sa-home .sa-faq details:hover { border-color: var(--sa-line-2); }
.sa-home .sa-faq .wp-block-details[open],.sa-home .sa-faq details[open] { border-color: var(--sa-red); box-shadow: 0 0 0 2px rgba(225,29,42,.08),var(--sa-sh-1); }
.sa-home .sa-faq summary {
  cursor: pointer; padding: 19px 22px; font-weight: 700; font-size: 16px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--sa-ink); border-radius: var(--sa-r-md);
}
.sa-home .sa-faq summary::-webkit-details-marker { display: none; }
.sa-home .sa-faq summary::after { content: "+"; color: var(--sa-red); font-size: 24px; font-weight: 600; line-height: 1; flex: 0 0 auto; transition: transform .25s var(--sa-ease); }
.sa-home .sa-faq .wp-block-details[open] summary::after,.sa-home .sa-faq details[open] summary::after { transform: rotate(45deg); }
.sa-home .sa-faq .wp-block-details__content,
.sa-home .sa-faq details > *:not(summary) { padding: 0 22px 20px; color: var(--sa-muted); font-size: 15px; max-width: 62ch; }
.sa-home .sa-faq-wrap.wp-block-columns { display: flex !important; gap: 36px; align-items: flex-start; }
.sa-home .sa-faq-wrap .sa-faq-img-col { flex: 0 0 38% !important; position: sticky; top: 100px; }
.sa-home .sa-faq-wrap .sa-faq-list-col { flex: 1 1 62% !important; }
.sa-home .sa-faq-wrap .sa-faq-img-col img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--sa-r-lg); box-shadow: var(--sa-sh-2); display: block; }
.sa-home .sa-faq-wrap .sa-faq { max-width: none; }

/* ---- 19. CTA FINALE ---- */
.sa-home .sa-final {
  position: relative; overflow: hidden; border-radius: var(--sa-r-xl); padding: 64px 40px; text-align: center; margin: 0 24px;
  background: linear-gradient(125deg,#C4141F,var(--sa-red) 40%,#7e0e16);
  box-shadow: 0 24px 70px rgba(225,29,42,.3);
}
.sa-home .sa-final::before { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 280px at 50% -20%,rgba(255,255,255,.18),transparent 60%); }
.sa-home .sa-final .wp-block-heading,.sa-home .sa-final h2 { font-size: clamp(27px,3.6vw,42px); color: #fff; position: relative; }
.sa-home .sa-final p,.sa-home .sa-final .wp-block-paragraph { color: #ffe6e8; font-size: 18px; max-width: 46ch; margin: 0 auto 24px; position: relative; }
.sa-home .sa-final .urgency-pill {
  display: inline-block; background: rgba(0,0,0,.25); border-radius: 999px;
  padding: 8px 18px; font-size: 13px; font-weight: 700; color: #ffd4d6; margin-bottom: 20px; position: relative;
}
.sa-home .sa-final .wp-block-button__link { background: #fff !important; color: var(--sa-red) !important; box-shadow: 0 10px 30px rgba(0,0,0,.3) !important; position: relative; }
.sa-home .sa-final .wp-block-button__link:hover { background: var(--sa-dark) !important; color: #fff !important; }
.sa-home .sa-final .note { display: block; margin-top: 18px; font-size: 13px; color: #ffd2d6; position: relative; }
.sa-home .sa-final .wp-block-buttons { position: relative; }

/* ---- RESPONSIVE ---- */
@media(max-width:768px){
  .sa-home .sa-sec { padding: 56px 24px; }
  .sa-home .sa-hero { padding: 56px 24px 48px; }
  .sa-home .sa-hero .wp-block-columns.sa-hero-grid,
  .sa-home .sa-hero-grid.wp-block-columns { grid-template-columns: 1fr !important; }
  .sa-home .sa-hero-card { min-height: 280px; }
  .sa-home .sa-cmp.wp-block-columns,
  .sa-home .sa-why.wp-block-columns,
  .sa-home .sa-vids.wp-block-columns,
  .sa-home .sa-revs.wp-block-columns { grid-template-columns: 1fr !important; }
  .sa-home .sa-steps.wp-block-columns { grid-template-columns: 1fr !important; }
  .sa-home .sa-steps.wp-block-columns::before { display: none; }
  .sa-home .sa-grid.wp-block-columns { grid-template-columns: 1fr 1fr !important; }
  .sa-home .sa-trust .wp-block-columns { flex-wrap: wrap !important; }
  .sa-home .sa-trust .wp-block-column { flex: 1 1 50%; }
  .sa-home .sa-trust .wp-block-column:nth-child(2) { border-right: 0; }
  .sa-home .sa-trust .wp-block-column:nth-child(-n+2) { border-bottom: 1px solid var(--sa-line); }
  .sa-home .sa-cases.wp-block-columns { grid-template-columns: 1fr !important; }
  .sa-home .sa-stats.wp-block-columns { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .sa-home .sa-prob-grid,.sa-home .sa-pain-grid.wp-block-columns { grid-template-columns: 1fr !important; }
  .sa-home .sa-mech-grid.wp-block-columns { grid-template-columns: 1fr !important; }
  .sa-home .sa-guarantee-grid { grid-template-columns: 1fr; text-align: center; }
  .sa-home .sa-guarantee .seal { margin: 0 auto; }
  .sa-home .sa-final { padding: 44px 24px; margin: 0 !important; }
  .sa-home .sa-myth-wrap.wp-block-columns,
  .sa-home .sa-faq-wrap.wp-block-columns { flex-direction: column !important; }
  .sa-home .sa-myth-wrap .sa-myth-img-col,
  .sa-home .sa-myth-wrap .sa-myth-list-col,
  .sa-home .sa-faq-wrap .sa-faq-img-col,
  .sa-home .sa-faq-wrap .sa-faq-list-col { flex: 1 1 100% !important; width: 100%; position: static; }
  .sa-home .sa-myth-wrap .sa-myth-img-col img,
  .sa-home .sa-faq-wrap .sa-faq-img-col img { aspect-ratio: 16/9; }
}
@media(max-width:480px){
  .sa-home .sa-grid.wp-block-columns { grid-template-columns: 1fr !important; }
  .sa-home .sa-stats.wp-block-columns { grid-template-columns: 1fr 1fr !important; }
}

/* ---- TITLE + LAYOUT FIX ---- */
/* Hide page title on home-v2 front page */
.home .entry-header { display: none !important; }

/* Trust strip: add side padding so content doesn't touch edge on narrow viewports */
.sa-home .sa-trust .wp-block-columns { padding: 0 24px; }

/* WC products shortcode wrapper: match sa-grid layout */
.sa-home .sa-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 20px !important; padding: 0; }
.sa-home .sa-grid .wp-block-column { flex: unset !important; flex-basis: unset !important; padding: 0 !important; }
@media(max-width:768px){ .sa-home .sa-grid { grid-template-columns: 1fr 1fr !important; } }
@media(max-width:480px){ .sa-home .sa-grid { grid-template-columns: 1fr !important; } }

/* WC product card image link */
.sa-home .sa-prod .img a,
.sa-home .sa-prod a.img { display: block; }
.sa-home .sa-prod .img img,
.sa-home .sa-prod a.img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* =========================================================
   GLOBAL POLISH — tutte le pagine non-home
   ========================================================= */

/* Entry content: link e blockquote */
.entry-content a:not(.wp-block-button__link):not(.wp-element-button) { color: var(--sa-blue); text-decoration: none; }
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover { color: var(--sa-navy); text-decoration: underline; }
.entry-content blockquote,
.wp-block-quote { border-left-color: var(--sa-blue) !important; color: var(--sa-muted) !important; }

/* Page title (non-home) */
body:not(.home) h1.entry-title {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--sa-navy);
}

/* Content pages: ensure max-width 1180px (non-WC, non-home) */
body:not(.woocommerce):not(.woocommerce-page):not(.home) .site-content .inside-article {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

/* ---- WooCommerce Review Form ---- */
#review_form #respond {
  background:    var(--sa-card);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  padding:       24px;
  margin-top:    24px;
}
#review_form .comment-notes,
#review_form label { color: var(--sa-grey) !important; font-size: 14px; }
#review_form .comment-form-rating .stars a {
  color:           var(--sa-grey);
  font-size:       22px;
  text-decoration: none;
  transition:      color .15s;
}
#review_form .comment-form-rating .stars.selected a,
#review_form .comment-form-rating .stars a:hover { color: var(--sa-orange); }
#review_form textarea#comment,
#review_form input[type="text"],
#review_form input[type="email"] {
  background:    var(--sa-bg) !important;
  color:         var(--sa-ink) !important;
  border:        1px solid var(--sa-line) !important;
  border-radius: 8px !important;
  padding:       10px 14px !important;
  font-family:   inherit !important;
  font-size:     15px !important;
  width:         100%;
}
#review_form textarea#comment { padding: 12px 16px !important; min-height: 120px; }
#review_form textarea#comment:focus,
#review_form input[type="text"]:focus,
#review_form input[type="email"]:focus { border-color: var(--sa-blue) !important; outline: none; }
#review_form .form-submit .submit,
#review_form .form-submit input[type="submit"] {
  background:    var(--sa-grad-cta) !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: 8px !important;
  padding:       12px 28px !important;
  font-weight:   700 !important;
  font-size:     15px !important;
  cursor:        pointer;
  transition:    background .2s;
}
#review_form .form-submit .submit:hover { background: var(--sa-cta-d) !important; }

/* Recensioni esistenti: le vecchie regole .commentlist sono state rimosse —
   il markup ora è quello dell'override woocommerce/single-product-reviews.php
   (card .sa-rvw-*, stili in coda al file). */

/* ---- 404 Page ---- */
.error-404 .entry-content p { color: var(--sa-grey); font-size: 17px; }

/* ---- Search inputs sitewide ---- */
input[type="search"],
input[type="text"].search-field {
  background:    var(--sa-card) !important;
  color:         var(--sa-ink) !important;
  border:        1px solid var(--sa-line) !important;
  border-radius: 8px !important;
  padding:       10px 14px !important;
}
input[type="search"]:focus { border-color: var(--sa-blue) !important; outline: none; }
.search-submit,
input[type="submit"].search-submit {
  background:    var(--sa-grad-cta) !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: 8px !important;
  padding:       10px 18px !important;
  font-weight:   700 !important;
  cursor:        pointer;
  transition:    background .2s;
}
.search-submit:hover { background: var(--sa-cta-d) !important; }

/* ---- Sidebar widgets ---- */
.widget { background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-r-md); padding: 20px; margin-bottom: 20px; }
.widget-title, .widgettitle { color: var(--sa-navy) !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 14px !important; padding-bottom: 10px; border-bottom: 1px solid var(--sa-line); }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 7px 0; border-bottom: 1px solid var(--sa-line); color: var(--sa-muted); font-size: 14px; }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--sa-muted); text-decoration: none; }
.widget ul li a:hover { color: var(--sa-navy); }

/* =========================================================
   D1 v2 — PRODUCT PAGE VISUAL RICHNESS (home-style sections)
   ========================================================= */

/* Summary: card con bordo — identico al hero-card della home */
.woocommerce div.product .summary.entry-summary {
  background:    var(--sa-card);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-xl);
  padding:       32px 28px 28px !important;
  box-shadow:    var(--sa-sh-1);
}

/* Eyebrow rosso prima del titolo prodotto */
.woocommerce div.product h1.product_title::before {
  content:        "— SPRAY ANTIAGGRESSIONE";
  display:        block;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--sa-red);
  margin-bottom:  10px;
  font-family:    inherit;
}

/* Titolo prodotto: più grande, allineato alla home */
.woocommerce div.product h1.product_title {
  font-size:     clamp(24px, 3.2vw, 40px) !important;
  font-weight:   900 !important;
  line-height:   1.1 !important;
  margin:        0 0 14px !important;
  letter-spacing: -.025em;
}

/* Separatore prima del form ATC */
.woocommerce div.product form.cart {
  border-top: 1px solid var(--sa-line);
  padding-top: 20px;
  margin-top:  20px;
}

/* sa-desc: sezione card come home */
.woocommerce div.product .sa-desc {
  background:    var(--sa-bg2);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-xl);
  padding:       32px;
  margin-top:    24px;
}
.woocommerce div.product .sa-desc .sa-desc__body {
  margin-top: 12px;
}

/* sa-reviews: sezione card */
.woocommerce div.product .sa-reviews {
  background:    var(--sa-bg2);
  border:        1px solid var(--sa-line) !important;
  border-radius: var(--sa-r-xl);
  padding:       32px;
  border-bottom: 1px solid var(--sa-line) !important;
}
.woocommerce div.product .sa-reviews > h2,
.woocommerce div.product .sa-reviews > .sa-reviews__title {
  margin-top:    0 !important;
  padding-bottom:16px;
  border-bottom: 1px solid var(--sa-line);
  margin-bottom: 24px !important;
}

/* Related products: sezione card */
.woocommerce .related.products {
  background:    var(--sa-bg2);
  border:        1px solid var(--sa-line);
  border-radius: var(--sa-r-xl);
  padding:       32px;
}
.woocommerce .related.products > h2 {
  margin-top: 0 !important;
}

/* Trust bar: upgrade a card più prominente */
.woocommerce div.product .sa-trust-bar {
  background:    var(--sa-card);
  border-color:  var(--sa-blue);
  gap:           8px 32px;
  font-size:     13px;
}
.woocommerce div.product .sa-trust-bar span { color: var(--sa-ink); }

/* Responsive: card a piena larghezza su mobile */
@media (max-width: 768px) {
  .woocommerce div.product .summary.entry-summary { padding: 20px 16px !important; }
  .woocommerce div.product .sa-desc,
  .woocommerce div.product .sa-reviews,
  .woocommerce .related.products { padding: 20px 16px; }
}

/* =========================================================
   CART / CHECKOUT — alignment fix
   WC blocks use alignwide (margin: 0 -40px, width: calc(100% + 80px))
   inside .inside-article che ha il suo margin-left: 10px da GeneratePress,
   causando lo sbandamento del carrello a sinistra. Si azzerano i margini
   negativi, ma senza azzerare anche la width il blocco resta largo
   "+80px" rispetto al contenitore senza il margine negativo che lo
   ricentrava: il lato destro (tabella carrello, prezzi, campi checkout)
   finisce fuori viewport su mobile. Va azzerata anche la width.
   ========================================================= */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
  margin-left:  0 !important;
  margin-right: 0 !important;
  width:        100% !important;
  max-width:    100% !important;
}

/* =========================================================
   WC PRODUCT COLLECTION — sale badge (WC blocks, not classic loop)
   ========================================================= */
.wc-block-components-product-sale-badge {
  background:    var(--sa-cta) !important;
  color:         #fff !important;
  border-radius: 6px !important;
  font-size:     11px !important;
  font-weight:   800 !important;
  padding:       4px 8px !important;
  border:        none !important;
  line-height:   1.4 !important;
  min-width:     auto !important;
  min-height:    auto !important;
}
.wc-block-components-product-sale-badge__text { color: #fff !important; }

/* =========================================================
   CHECKOUT — autofill override (browser forces white bg on autofilled fields)
   ========================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px var(--sa-card) inset !important;
  -webkit-text-fill-color: var(--sa-white) !important;
  caret-color: var(--sa-white) !important;
}

/* =========================================================
   A2 – PAGINAZIONE BLOCCO PRODUCT-COLLECTION
   ========================================================= */
.wp-block-woocommerce-product-collection-pagination,
.wc-block-product-collection__pagination { margin-top: 36px; text-align: center; }
.wp-block-query-pagination,
.wc-block-product-collection__pagination ul { display: inline-flex; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center; }
.wp-block-query-pagination-numbers,
.wc-blocks-components-pagination { display: inline-flex; gap: 6px; }
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span,
.wc-block-product-collection__pagination a,
.wc-block-product-collection__pagination span,
.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       38px;
  height:          38px;
  padding:         0 10px;
  background:      var(--sa-card) !important;
  border:          1px solid var(--sa-line) !important;
  border-radius:   8px !important;
  color:           var(--sa-ink) !important;
  font-size:       14px;
  font-weight:     600;
  text-decoration: none;
  transition:      background .2s, color .2s;
}
.wp-block-query-pagination-numbers a:hover,
.wc-block-product-collection__pagination a:hover,
.wp-block-query-pagination-previous-arrow:hover,
.wp-block-query-pagination-next-arrow:hover {
  background:   var(--sa-cta) !important;
  border-color: var(--sa-cta) !important;
  color:        #fff !important;
}
.wp-block-query-pagination-numbers span.current,
.wc-block-product-collection__pagination span[aria-current="page"] {
  background:   var(--sa-cta) !important;
  border-color: var(--sa-cta) !important;
  color:        #fff !important;
  font-weight:  800;
}

/* =========================================================
   NEGOZIO — banda chiara (Task 4)
   Scoped su .woocommerce-shop (body class della pagina /negozio/)
   Non tocca correlati/upsell nelle pagine prodotto scure.
   ========================================================= */

/* Card prodotto: fondo bianco su sfondo chiaro */
.woocommerce-shop .woocommerce ul.products li.product,
.woocommerce-shop ul.products li.product,
.woocommerce-shop .wc-block-product {
  background:    #fff !important;
  border:        1px solid #D0D4DC !important;
  border-radius: 16px !important;
}
.woocommerce-shop .woocommerce ul.products li.product:hover,
.woocommerce-shop ul.products li.product:hover,
.woocommerce-shop .wc-block-product:hover {
  border-color:  #B0B8C4 !important;
  box-shadow:    0 4px 20px rgba(0,0,0,.10);
}
.woocommerce-shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-title,
.woocommerce-shop .wc-block-product .woocommerce-loop-product__title {
  color: #14171C !important;
}
.woocommerce-shop .woocommerce ul.products li.product .price,
.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-price {
  color: #14171C !important;
}
.woocommerce-shop .woocommerce ul.products li.product .price del,
.woocommerce-shop .woocommerce ul.products li.product .price del .amount {
  color: #6B7280 !important;
}
.woocommerce-shop .woocommerce ul.products li.product .price ins .amount,
.woocommerce-shop .wc-block-product .wp-block-woocommerce-product-price ins .amount {
  color: var(--sa-cta) !important;
}

/* Chip categorie su fondo chiaro */
.woocommerce-shop .sa-cat-chips { padding: 0 0 20px; }
.woocommerce-shop .sa-chip {
  background:    #fff;
  border:        1px solid #D0D4DC;
  color:         #3D434E;
}
.woocommerce-shop .sa-chip:hover,
.woocommerce-shop .sa-chip.active {
  background:    var(--sa-cta);
  border-color:  var(--sa-cta);
  color:         #fff;
}

/* =========================================================
   FOOTER PROFESSIONALE — 3 colonne via Footer Widgets (Task 5)
   ========================================================= */
.site-footer {
  background-color: var(--sa-bg2) !important;
  border-top:       3px solid var(--sa-red) !important;
  color:            var(--sa-grey);
}
/* #footer-widgets ha classe "site" che porta bg bianco — reset obbligatorio */
#footer-widgets.site {
  background: transparent !important;
}

/* Container: centra + padding verticale */
.footer-widgets-container {
  max-width:  1200px !important;
  margin:     0 auto !important;
  padding:    52px 40px 48px !important;
  box-sizing: border-box !important;
}

/* Griglia 5 colonne — .inside-footer-widgets è il parent diretto dei .footer-widget-N */
.inside-footer-widgets {
  display:               grid !important;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr !important;
  gap:                   0 !important;
  width:                 100% !important;
}
@media (max-width: 1024px) {
  .inside-footer-widgets { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  .footer-widget-2, .footer-widget-3, .footer-widget-5 { border-top: 1px solid rgba(255,255,255,.08); }
  .footer-widget-3, .footer-widget-5 { border-left: none !important; }
  .footer-widget-3, .footer-widget-5 { border-top: 1px solid rgba(255,255,255,.08); }
  .footer-widgets-container { padding: 40px 28px 36px !important; }
}
@media (max-width: 600px) {
  .inside-footer-widgets { grid-template-columns: 1fr !important; }
  .footer-widget-2, .footer-widget-3, .footer-widget-4, .footer-widget-5 { border-left: none !important; border-top: 1px solid rgba(255,255,255,.08); }
  .footer-widgets-container { padding: 32px 20px !important; }
}

/* Reset GP + padding interno colonne + separatori verticali */
.footer-widget-1,
.footer-widget-2,
.footer-widget-3,
.footer-widget-4,
.footer-widget-5 {
  width:     auto !important;
  min-width: 0 !important;
  float:     none !important;
  padding:   0 32px !important;
}
.footer-widget-1 { padding-left: 0 !important; }
.footer-widget-5 { padding-right: 0 !important; }
.footer-widget-2,
.footer-widget-3,
.footer-widget-4,
.footer-widget-5 { border-left: 1px solid rgba(255,255,255,.08); }

/* Widget background / base */
.footer-widgets .widget { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; }

/* Titolo colonna: uppercase + red bottom accent */
.footer-widgets .widget-title {
  color:          var(--sa-white) !important;
  font-size:      11px !important;
  font-weight:    800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin:         0 0 20px !important;
  padding-bottom: 12px !important;
  border-bottom:  2px solid rgba(225,29,42,.5) !important;
}

/* Testo paragrafo e list item */
.footer-widgets p,
.footer-widgets li { color: var(--sa-grey); font-size: 14px; line-height: 1.75; }

/* Link: transizione colore + underline slide */
.footer-widgets a {
  position:   relative;
  color:      var(--sa-grey) !important;
  transition: color .18s;
}
.footer-widgets a:hover { color: var(--sa-white) !important; }
.footer-widgets .textwidget ul li a,
.footer-widgets .nav-menu li a {
  position:        relative;
  display:         inline;
  text-decoration: none !important;
}
.footer-widgets .textwidget ul li a::after,
.footer-widgets .nav-menu li a::after {
  content:    '';
  position:   absolute;
  left:       0;
  bottom:     -1px;
  width:      0;
  height:     1px;
  background: var(--sa-red);
  transition: width .22s ease;
}
.footer-widgets .textwidget ul li a:hover::after,
.footer-widgets .nav-menu li a:hover::after { width: 100%; }

/* Lista navigazione */
.footer-widgets .nav-menu,
.footer-widgets .textwidget ul {
  list-style: none;
  padding:    0;
  margin:     0;
}
.footer-widgets .nav-menu li,
.footer-widgets .textwidget ul li { padding: 4px 0; border: none; }

/* Payoff brand colonna 1 */
.footer-widget-1 p { font-size: 14px; color: var(--sa-grey); max-width: 240px; margin-bottom: 16px; }

/* Badge trust legale */
.sa-footer-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    rgba(225,29,42,.10);
  border:        1px solid rgba(225,29,42,.30);
  border-radius: 999px;
  padding:       5px 14px;
  font-size:     11px;
  font-weight:   800;
  color:         var(--sa-red);
  margin-top:    8px;
  letter-spacing:.04em;
}

/* Trust list colonna 4: checkmark rosso */
.footer-widgets .sa-trust-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer-widgets .sa-trust-list li {
  position:    relative;
  padding:     4px 0 4px 20px !important;
  color:       var(--sa-grey);
  font-size:   14px;
  line-height: 1.6;
  border:      none;
}
.footer-widgets .sa-trust-list li::before {
  content:     '✓';
  position:    absolute;
  left:        0;
  top:         4px;
  color:       var(--sa-red);
  font-weight: 800;
  font-size:   12px;
  line-height: 1.6;
}

/* Barra copyright — rimossa via PHP, ma stiliamo per eventuali edge-case */
.site-info {
  background-color: var(--sa-bg2) !important;
  border-top:       1px solid var(--sa-line) !important;
  color:            var(--sa-grey) !important;
  font-size:        12px;
  text-align:       center;
  padding:          12px 24px !important;
}
.site-info a { color: var(--sa-grey) !important; }
.site-info a:hover { color: var(--sa-white) !important; }

/* =========================================================
   BLUNAVY LIGHT — Override superfici e hardcoded dark values
   ========================================================= */

/* ─── Body + inside-article ─────────────────────────────── */
body {
  background-color: var(--sa-bg);
  color:            var(--sa-ink);
}
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
  background-color: var(--sa-bg);
  color:            var(--sa-ink);
}

/* ─── Header GP: bianco pieno (NON semitrasparente) ───────────────────
   Era rgba(255,255,255,.95) + backdrop-filter blur: il 5% di trasparenza,
   sommato al blur, lasciava intravedere/smear-are i colori del contenuto
   scorrendo dietro (foto scure, banner) durante lo scroll, facendo
   percepire la banda come "grigia". Bianco opaco al 100%, niente blur. */
.site-header {
  background-color:      #fff !important;
  color:                 var(--sa-ink);
  border-bottom:         1px solid var(--sa-line);
}
.site-header a        { color: var(--sa-ink-2); }
.site-header a:hover  { color: var(--sa-navy); }
.main-title a         { color: var(--sa-navy) !important; }
.site-description     { color: var(--sa-muted); }
.main-navigation .menu-item a,
.nav-float-right .main-navigation a { color: var(--sa-ink-2); }
.main-navigation .menu-item a:hover,
.main-navigation .current-menu-item > a { color: var(--sa-navy) !important; }
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items { color: var(--sa-ink-2) !important; }
.main-navigation ul ul,
.main-navigation .sub-menu {
  background:    #fff !important;
  border:        1px solid var(--sa-line) !important;
  box-shadow:    0 12px 40px rgba(11,42,91,.12) !important;
}
.main-navigation ul ul li a,
.main-navigation .sub-menu li a { color: var(--sa-ink-2) !important; }
.main-navigation ul ul li a:hover,
.main-navigation .sub-menu li a:hover {
  background: var(--sa-bg-2) !important;
  color:      var(--sa-navy) !important;
}
.mobile-menu-control-wrapper button,
.menu-toggle { color: var(--sa-navy); border: 1px solid var(--sa-line); }

/* ─── Global: link, headings, inputs ─────────────────────── */
a       { color: var(--sa-navy); }
a:hover { color: var(--sa-cta); }
h1,h2,h3,h4,h5,h6 { color: var(--sa-navy); }
input, textarea, select {
  background-color: var(--sa-bg);
  color:            var(--sa-ink);
  border:           1px solid var(--sa-line);
}
blockquote { border-left-color: var(--sa-blue); color: var(--sa-muted); }
::selection { background: var(--sa-blue); color: #fff; }

/* Sidebar */
.sidebar .widget       { background-color: var(--sa-bg-2); color: var(--sa-ink); border: 1px solid var(--sa-line); }
.sidebar .widget a     { color: var(--sa-muted); }
.sidebar .widget a:hover { color: var(--sa-navy); }
.sidebar .widget-title { color: var(--sa-ink); }
.site-info {
  background-color: var(--sa-navy) !important;
  color:            var(--sa-on-dark-muted) !important;
  border-top:       1px solid rgba(255,255,255,.08) !important;
}
.site-info a       { color: var(--sa-on-dark-muted) !important; }
.site-info a:hover { color: #fff !important; }

/* ─── Bottoni: CTA coral ──────────────────────────────────── */
.sa-btn,
.wp-block-button__link {
  background: var(--sa-grad-cta);
  box-shadow: var(--sa-sh-cta), inset 0 1px 0 rgba(255,255,255,.18);
}
.sa-btn:hover,
.wp-block-button__link:hover {
  background:  var(--sa-grad-cta);
  box-shadow:  0 12px 34px rgba(255,106,61,.45), inset 0 1px 0 rgba(255,255,255,.18);
  color:       #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background:  var(--sa-grad-cta) !important;
  color:       #fff !important;
  border:      0 !important;
  box-shadow:  var(--sa-sh-cta), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  transform:  translateY(-2px);
  background: var(--sa-cta-d) !important;
  color:      #fff !important;
  box-shadow: 0 12px 34px rgba(255,106,61,.45), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.sa-btn--ghost,
.sa-btn-secondary,
.wp-block-button.sa-btn-secondary .wp-block-button__link {
  background:  transparent !important;
  border:      1.5px solid var(--sa-cta) !important;
  color:       var(--sa-cta) !important;
  box-shadow:  none !important;
}
.sa-btn--ghost:hover,
.sa-btn-secondary:hover,
.wp-block-button.sa-btn-secondary .wp-block-button__link:hover {
  background:   var(--sa-cta) !important;
  border-color: var(--sa-cta) !important;
  color:        #fff !important;
  box-shadow:   var(--sa-sh-cta) !important;
}

/* ─── Microbar + Marquee: brand gradient ─────────────────── */
.sa-microbar {
  background: var(--sa-grad-brand);
}
.sa-marquee {
  background: var(--sa-grad-brand);
}

/* ─── Hero: sfondo chiaro azure ──────────────────────────── */
.sa-hero {
  background:
    radial-gradient(950px 520px at 80% -5%, rgba(27,109,255,.07), transparent 62%),
    radial-gradient(720px 520px at 6% 100%, rgba(90,184,255,.05), transparent 60%),
    var(--sa-bg);
}
.sa-hero::before {
  background-image:
    linear-gradient(rgba(27,109,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,109,255,.03) 1px, transparent 1px);
}
.sa-hero .wp-block-heading { color: var(--sa-ink); }
.sa-hero .wp-block-heading em { color: var(--sa-blue); }
.sa-hero .wp-block-heading em::after {
  background: linear-gradient(90deg, var(--sa-blue), var(--sa-azure));
}
/* lead text */
.sa-hero-lead,
.sa-hero-lead.has-text-color { color: var(--sa-muted) !important; }

/* ─── Hero card: glass ───────────────────────────────────── */
.sa-hero-card {
  background:    var(--sa-glass);
  border:        1px solid var(--sa-glass-line);
  backdrop-filter: var(--sa-glass-blur);
  -webkit-backdrop-filter: var(--sa-glass-blur);
  box-shadow:    var(--sa-sh-2);
}
.sa-hero-card:hover { box-shadow: 0 20px 50px rgba(27,109,255,.20); }
.sa-hero-card::before { background: none; } /* rimuovi gradient scuro del dark */
.sa-hero-card::after {
  background: radial-gradient(420px 240px at 70% 0%, rgba(27,109,255,.08), transparent 70%);
}
.sa-hero-card .tag {
  background: linear-gradient(90deg, var(--sa-blue), var(--sa-azure));
  box-shadow: var(--sa-sh-2);
}
.sa-hero-card .meta h3 { color: var(--sa-ink); }
.sa-hero-card .meta .pz { color: var(--sa-ink); }
.sa-hero-card .meta .pz s { color: var(--sa-muted); }

/* ─── sa-sec--brand (sostituisce sa-sec--dark) ───────────── */
.sa-sec--brand {
  background: var(--sa-grad-brand);
  color: #fff;
  --sa-ink:   #fff;
  --sa-ink-2: var(--sa-on-dark-2);
  --sa-muted: var(--sa-on-dark-muted);
  --sa-line:  rgba(255,255,255,.18);
  --sa-card:  rgba(255,255,255,.10);
}
.sa-sec--brand h1,
.sa-sec--brand h2,
.sa-sec--brand h3,
.sa-sec--brand h4 { color: #fff; }
.sa-sec--brand .wp-block-heading { color: #fff; }

/* Eyebrow: usa azure invece di orange */
.sa-eyebrow { color: var(--sa-azure); }
.sa-eyebrow::before { background: linear-gradient(90deg, var(--sa-blue), var(--sa-azure)); }

/* ─── .sa-specs-row per hero light ──────────────────────── */
.sa-specs { border-top-color: var(--sa-line); }
.sa-specs strong, .sa-specs b { color: var(--sa-ink); }

/* ─── Trust strip ────────────────────────────────────────── */
.sa-trust { background: var(--sa-card); border-top-color: var(--sa-line); border-bottom-color: var(--sa-line); }
.sa-trust li:hover { background: rgba(27,109,255,.03); }
.sa-trust .ic { color: var(--sa-blue); }

/* ─── Comparison cards ───────────────────────────────────── */
.sa-cmp .col:hover      { border-color: var(--sa-line-2); box-shadow: var(--sa-sh-2); }
.sa-cmp .col.best {
  border-color: var(--sa-blue);
  background:   linear-gradient(170deg, #F0F6FF 0%, var(--sa-card) 45%);
  box-shadow:   0 0 0 1px var(--sa-blue), var(--sa-sh-2);
}
.sa-cmp .col.best:hover { box-shadow: 0 0 0 1px var(--sa-blue), 0 24px 60px rgba(27,109,255,.18); }
.sa-cmp .best .flag {
  background: linear-gradient(90deg, var(--sa-blue), var(--sa-azure));
  box-shadow: var(--sa-sh-2);
}
.sa-cmp .wp-block-heading { color: var(--sa-ink); }
.sa-cmp .wp-block-list li::before { color: var(--sa-blue); }

/* ─── Why cards ─────────────────────────────────────────── */
.sa-why .c { background: var(--sa-card); border-color: var(--sa-line); }
.sa-why .c:hover { box-shadow: var(--sa-sh-1); border-color: var(--sa-line-2); }
.sa-why .ic {
  background: rgba(27,109,255,.10);
  color: var(--sa-blue);
  border: 1px solid rgba(27,109,255,.20);
}
.sa-why p { color: var(--sa-muted); }

/* ─── Steps: counter coral CTA ──────────────────────────── */
.sa-steps::before { background: linear-gradient(90deg, transparent, var(--sa-line) 15%, var(--sa-line) 85%, transparent); }
.sa-steps .st::before {
  background: var(--sa-grad-cta);
  box-shadow: var(--sa-sh-cta);
}
.sa-steps .wp-block-heading { color: var(--sa-ink); }
.sa-steps p { color: var(--sa-muted); }

/* ─── Video play button: brand ───────────────────────────── */
.sa-vid .img { background: var(--sa-bg-2); border-color: var(--sa-line); }
.sa-vid .play { background: var(--sa-grad-brand); box-shadow: var(--sa-sh-2); }

/* ─── Recensioni: stelle amber, card light ───────────────── */
.sa-rev { background: var(--sa-card); border-color: var(--sa-line); }
.sa-rev:hover { border-color: var(--sa-line-2); }
.sa-rev::before { color: rgba(27,109,255,.08); }
.sa-rev .stars  { color: #F59E0B; }
.sa-rev p       { color: var(--sa-ink-2); }
.sa-rev .vrf    { color: #059669; }

/* ─── FAQ ────────────────────────────────────────────────── */
.sa-faq .wp-block-details,
.sa-faq details { background: var(--sa-card); border-color: var(--sa-line); }
.sa-faq .wp-block-details[open],
.sa-faq details[open] { border-color: var(--sa-blue); box-shadow: var(--sa-sh-1); }
.sa-faq summary { color: var(--sa-ink); }
.sa-faq summary::after { color: var(--sa-blue); }
.sa-faq .wp-block-details__content,
.sa-faq details > *:not(summary) { color: var(--sa-muted); }

/* ─── Final CTA: brand gradient ─────────────────────────── */
.sa-final {
  background: var(--sa-grad-brand);
  box-shadow: 0 24px 70px rgba(11,42,91,.28);
}
.sa-final::before {
  background: radial-gradient(640px 280px at 50% -20%, rgba(255,255,255,.15), transparent 60%);
}
.sa-final .wp-block-heading { color: #fff; }
.sa-final p, .sa-final .wp-block-paragraph { color: var(--sa-on-dark-2); }
.sa-final .wp-block-button__link {
  background: #fff !important;
  color: var(--sa-navy) !important;
  box-shadow: 0 10px 30px rgba(11,42,91,.25) !important;
}
.sa-final .wp-block-button__link:hover {
  background: var(--sa-bg-2) !important;
  color: var(--sa-navy) !important;
  transform: translateY(-2px);
}
.sa-final .note { color: var(--sa-on-dark-muted); }
.sa-final .urgency-pill { color: var(--sa-on-dark-2); background: rgba(255,255,255,.15); }

/* ─── WooCommerce: CTA arancione ─────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce-page .single_add_to_cart_button {
  background: var(--sa-grad-cta) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-page .single_add_to_cart_button:hover {
  background: var(--sa-cta-d) !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt { background: var(--sa-grad-cta) !important; }
/* Stelle WooCommerce: amber */
.woocommerce .star-rating,
.woocommerce-page .star-rating { color: #F59E0B !important; }
/* Prezzo scontato: CTA arancione */
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins { color: var(--sa-cta) !important; font-weight: 800; }
/* Paginazione: arancione CTA attivo */
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background:   var(--sa-cta) !important;
  border-color: var(--sa-cta) !important;
}
/* Cart/Checkout submit: CTA arancione */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--sa-grad-cta) !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--sa-cta-d) !important; }
/* Focus color: cta accent */
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus { border-color: var(--sa-cta) !important; }
.wc-block-components-radio-control__input:checked + label::before { border-color: var(--sa-navy) !important; background: var(--sa-navy) !important; }
/* Review form: CTA arancione */
#review_form .form-submit .submit,
#review_form .form-submit input[type="submit"] { background: var(--sa-grad-cta) !important; }
#review_form .form-submit .submit:hover { background: var(--sa-cta-d) !important; }
#review_form .comment-form-rating .stars.selected a,
#review_form .comment-form-rating .stars a:hover { color: #F59E0B; }
/* Search */
.search-submit,
input[type="submit"].search-submit { background: var(--sa-grad-cta) !important; }
.search-submit:hover { background: var(--sa-cta-d) !important; }
/* WC active filters */
.wc-block-active-filters__list-item-value,
.wp-block-woocommerce-product-filter-removable-chips li { background: var(--sa-cta) !important; }
/* WC price slider */
.wc-block-filter-price-slider__range-input-progress,
.wp-block-woocommerce-product-filter-price-slider .wc-block-price-filter__range-input-progress,
.wc-block-price-filter__range-input-progress { background: var(--sa-cta) !important; }
/* WC checkbox accent */
.wc-block-attribute-filter-list-item input[type="checkbox"]:checked,
.wp-block-woocommerce-product-filter-checkbox-list input[type="checkbox"]:checked { accent-color: var(--sa-cta); }
/* Pagination (product-collection): arancione CTA */
.wp-block-query-pagination-numbers a:hover,
.wc-block-product-collection__pagination a:hover,
.wp-block-query-pagination-previous-arrow:hover,
.wp-block-query-pagination-next-arrow:hover,
.wp-block-query-pagination-numbers span.current,
.wc-block-product-collection__pagination span[aria-current="page"] {
  background:   var(--sa-cta) !important;
  border-color: var(--sa-cta) !important;
  color:        #fff !important;
}
/* Sale badge */
.wc-block-components-product-sale-badge { background: var(--sa-cta) !important; }
/* Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px var(--sa-bg-2) inset !important;
  -webkit-text-fill-color: var(--sa-ink) !important;
  caret-color: var(--sa-ink) !important;
}
/* WC product page tab active */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--sa-blue); }
/* Gallery thumbnail active */
.woocommerce-product-gallery .flex-control-thumbs li.flex-active { border-color: var(--sa-blue); }
/* WC order summary: light theme-ok (bianco su bianco) */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--sa-bg-2) !important;
  border: 1px solid var(--sa-line) !important;
}
h2.wp-block-woocommerce-cart-order-summary-heading-block,
.wp-block-woocommerce-cart-order-summary-block h2,
.wp-block-woocommerce-checkout-order-summary-block h2 { color: var(--sa-ink) !important; }

/* ─── Product card hover: blue border ───────────────────── */
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover { border-color: var(--sa-blue) !important; }
.sa-prod:hover { border-color: var(--sa-blue); }

/* ─── Scheda prodotto: accent blue ──────────────────────── */
.woocommerce div.product p.price ins .woocommerce-Price-amount { color: var(--sa-cta) !important; }
.woocommerce div.product h1.product_title::before { color: var(--sa-blue); }
.woocommerce div.product .product_meta a:hover { color: var(--sa-blue) !important; }
.woocommerce div.product span.onsale { background: var(--sa-cta) !important; }
.sa-howto__num { background: var(--sa-blue); box-shadow: var(--sa-sh-2); }
.sa-product-light .sa-desc__body .wp-block-button__link { background: var(--sa-grad-cta) !important; }
.sa-product-light .sa-desc__body .wp-block-button__link:hover { background: var(--sa-cta-d) !important; }
.sa-faq__item[open] > summary::after { color: var(--sa-blue); }

/* ─── Cat chips: light ───────────────────────────────────── */
.sa-chip {
  background:   rgba(27,109,255,.06);
  border:       1.5px solid rgba(27,109,255,.20);
  color:        var(--sa-navy) !important;
}
.sa-chip:hover {
  background:   rgba(27,109,255,.12) !important;
  border-color: var(--sa-blue) !important;
  color:        var(--sa-navy) !important;
}
.sa-chip.active {
  background:   var(--sa-blue) !important;
  border-color: var(--sa-blue) !important;
  color:        #fff !important;
}

/* ─── Footer: navy dark ──────────────────────────────────── */
.site-footer,
.footer-bar { background: var(--sa-navy) !important; border-top: 3px solid var(--sa-blue) !important; color: var(--sa-on-dark-muted); }
.footer-bar a       { color: var(--sa-on-dark-muted); }
.footer-bar a:hover { color: #fff; }
#footer-widgets.site { background: transparent !important; }
.footer-widgets p,
.footer-widgets li { color: var(--sa-on-dark-muted); }
.footer-widgets a { color: var(--sa-on-dark-muted) !important; }
.footer-widgets a:hover { color: #fff !important; }
.footer-widgets .widget-title {
  color:         #fff !important;
  border-bottom: 2px solid rgba(90,184,255,.50) !important;
}
.footer-widget-2,
.footer-widget-3,
.footer-widget-4,
.footer-widget-5 { border-left: 1px solid rgba(255,255,255,.08); }
.footer-widgets .textwidget ul li a::after,
.footer-widgets .nav-menu li a::after { background: var(--sa-azure); }
.footer-widgets .sa-trust-list li::before { color: var(--sa-azure); }
.footer-widgets .sa-trust-list li { color: var(--sa-on-dark-2); }
.sa-footer-badge {
  background:    rgba(27,109,255,.15);
  border:        1px solid rgba(27,109,255,.35);
  border-radius: 999px;
  color:         var(--sa-azure);
}

/* ─── .sa-home scoped: aggiorna accenti rossi → blue/coral ── */
.sa-home ::selection          { background: var(--sa-blue); color: #fff; }
.sa-home .sa-eyebrow          { color: var(--sa-azure); }
.sa-home .sa-eyebrow::before  { background: linear-gradient(90deg, var(--sa-blue), var(--sa-azure)); }
.sa-home .sa-hero::before {
  background:
    radial-gradient(950px 520px at 80% -5%, rgba(27,109,255,.07), transparent 62%),
    radial-gradient(720px 520px at 6% 100%, rgba(90,184,255,.05), transparent 60%),
    var(--sa-bg);
}
.sa-home .sa-hero::after {
  background-image:
    linear-gradient(rgba(27,109,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,109,255,.03) 1px, transparent 1px);
}
.sa-home .sa-hero .wp-block-heading { color: var(--sa-ink); }
.sa-home .sa-hero .wp-block-heading em.hi { color: var(--sa-blue); }
.sa-home .sa-hero .wp-block-heading em.hi::after {
  background: linear-gradient(90deg, var(--sa-blue), var(--sa-azure));
}
/* hero card glass */
.sa-home .sa-hero-card {
  background:    var(--sa-glass);
  border:        1px solid var(--sa-glass-line);
  backdrop-filter: var(--sa-glass-blur);
  -webkit-backdrop-filter: var(--sa-glass-blur);
  box-shadow:    var(--sa-sh-2);
}
.sa-home .sa-hero-card:hover { box-shadow: 0 24px 60px rgba(27,109,255,.18); }
.sa-home .sa-hero-card::after {
  background: radial-gradient(420px 240px at 70% 0%, rgba(27,109,255,.08), transparent 70%);
}
.sa-home .sa-hero-card .tag {
  background: linear-gradient(90deg, var(--sa-blue), var(--sa-azure));
  box-shadow: var(--sa-sh-2);
}
@keyframes tagPulse {
  0%,100% { box-shadow: var(--sa-sh-2) }
  50%      { box-shadow: var(--sa-sh-2), 0 0 0 6px rgba(27,109,255,.14) }
}
.sa-home .sa-hero-card .chip-cert {
  background: rgba(16,185,129,.15);
  border:     1px solid rgba(16,185,129,.35);
  color: #34d399;
}
/* proof row */
.sa-home .sa-proof .st { color: var(--sa-azure); }
/* specs row */
.sa-home .sa-specs-row { border-top-color: var(--sa-line); }
.sa-home .sa-specs-row .wp-block-heading,
.sa-home .sa-specs-row strong { color: var(--sa-ink); }
/* microbar */
.sa-home .sa-microbar { background: var(--sa-grad-brand); }
/* marquee */
.sa-marquee { background: var(--sa-grad-brand); }
/* trust strip */
.sa-home .sa-trust { background: var(--sa-card); border-top-color: var(--sa-line); border-bottom-color: var(--sa-line); }
.sa-home .sa-trust .ic { background: rgba(27,109,255,.10); color: var(--sa-blue); }
/* mech chain */
.sa-home .sa-mech-chain li::before { background: var(--sa-grad-cta); box-shadow: var(--sa-sh-cta); }
.sa-home .sa-mech-chain li:not(:last-child)::after { background: linear-gradient(180deg, var(--sa-blue), transparent); }
.sa-home .sa-mech-img .badge { background: var(--sa-grad-cta); box-shadow: var(--sa-sh-cta); }
/* steps */
.sa-home .sa-steps.wp-block-columns::before { background: linear-gradient(90deg, transparent, var(--sa-line) 15%, var(--sa-line) 85%, transparent); }
.sa-home .sa-steps .wp-block-column::before { background: var(--sa-grad-cta); box-shadow: var(--sa-sh-cta); }
/* cmp best */
.sa-home .sa-cmp .col.best { border-color: var(--sa-blue); background: linear-gradient(160deg,#EEF4FF 0%,var(--sa-card) 45%); box-shadow: 0 0 0 1px var(--sa-blue), var(--sa-sh-2); }
.sa-home .sa-cmp .col.best:hover { box-shadow: 0 0 0 1px var(--sa-blue), 0 24px 60px rgba(27,109,255,.18); }
.sa-home .sa-cmp .best .flag { background: linear-gradient(90deg, var(--sa-blue), var(--sa-azure)); box-shadow: var(--sa-sh-2); }
.sa-home .sa-cmp .wp-block-list li::before { color: var(--sa-blue); }
/* reviews: stelle amber */
.sa-home .sa-rev .stars { color: #F59E0B; }
.sa-home .sa-rev::before { color: rgba(27,109,255,.08); }
.sa-home .sa-rev:hover { border-color: var(--sa-line-2); }
.sa-home .sa-rev .vrf { color: #059669; }
.sa-home .sa-rev .who::before { background: linear-gradient(135deg, var(--sa-bg-2), var(--sa-line)); border: 1px solid var(--sa-line); }
/* video */
.sa-home .sa-vid .play { background: var(--sa-grad-brand); box-shadow: var(--sa-sh-2); }
/* faq */
.sa-home .sa-faq .wp-block-details[open],
.sa-home .sa-faq details[open] { border-color: var(--sa-blue); box-shadow: 0 0 0 2px rgba(27,109,255,.08), var(--sa-sh-1); }
.sa-home .sa-faq summary { color: var(--sa-ink); }
.sa-home .sa-faq summary::after { color: var(--sa-blue); }
/* why icons */
.sa-home .sa-why .ic { background: rgba(27,109,255,.10); color: var(--sa-blue); border: 1px solid rgba(27,109,255,.18); border-radius: 50%; }
/* garanzia seal */
.sa-home .sa-guarantee .seal {
  background: linear-gradient(135deg, #EEF4FF, #D8E9FF);
  border: 3px solid var(--sa-blue);
  color: var(--sa-blue);
  box-shadow: 0 0 0 6px rgba(27,109,255,.10);
}
/* prod add button */
.sa-home .sa-prod .pr .add { background: var(--sa-grad-cta); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.sa-home .sa-prod .pr .add:hover { box-shadow: var(--sa-sh-cta); }
/* final cta */
.sa-home .sa-sec:has(> .wp-block-group.sa-final) { padding-left: 0; padding-right: 0; }
.sa-home .sa-final {
  background-image: linear-gradient(rgba(11,42,91,.72),rgba(11,42,91,.82)), url('https://spray-antiaggressione.net/wp-content/uploads/2026/06/home-final-bg-divacamo-scene.webp');
  background-size: cover; background-position: center;
  box-shadow: none;
  max-width: none;
  width: 100%;
  margin: 0 !important;
  border-radius: 0;
  padding: 70px max(24px, calc((100% - 1180px) / 2));
}
.sa-home .sa-final::before { background: radial-gradient(640px 280px at 50% -20%, rgba(255,255,255,.14), transparent 60%); }
.sa-home .sa-final p,.sa-home .sa-final .wp-block-paragraph { color: var(--sa-on-dark-2); }
.sa-home .sa-final .wp-block-button__link { background: #fff !important; color: var(--sa-navy) !important; }
.sa-home .sa-final .wp-block-button__link:hover { background: var(--sa-bg-2) !important; color: var(--sa-navy) !important; }
.sa-home .sa-final .note { color: var(--sa-on-dark-muted); }
.sa-home .sa-final .urgency-pill { color: var(--sa-on-dark-2); }
/* dark override dentro .sa-home non esiste in BluNavy */
.sa-home .sa-btn, .sa-home .wp-block-button__link { background: var(--sa-grad-cta); box-shadow: var(--sa-sh-cta), inset 0 1px 0 rgba(255,255,255,.18); }
.sa-home .sa-btn:hover, .sa-home .wp-block-button__link:hover { background: var(--sa-grad-cta); }
.sa-home .wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--sa-grad-cta) !important; color: #fff !important; border: 0 !important; box-shadow: var(--sa-sh-cta), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.sa-home .sa-btn--ghost, .sa-home .sa-btn-secondary, .sa-home .wp-block-button.sa-btn-secondary .wp-block-button__link {
  background: transparent !important; border: 1.5px solid var(--sa-cta) !important; color: var(--sa-cta) !important; box-shadow: none !important;
}

/* ─── WC link fix: .entry-content a usa --sa-orange (corallo) ma WC UI ──── */
/* vuole navy/blue, non corallo. Override mirati con specificità più alta.    */
.wc-block-cart-item__product-name a,
.wc-block-components-product-name a,
.wc-block-cart-items__row a,
.woocommerce-cart-form .product-name a,
.wc-block-cart-form .wc-block-cart-item__product-name,
.wp-block-woocommerce-cart a:not(.wp-block-button__link):not(.wp-element-button),
.wp-block-woocommerce-checkout a:not(.wp-block-button__link):not(.wp-element-button),
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce-page ul.products li.product h2,
.woocommerce ul.products li.product h2 a,
.woocommerce-page ul.products li.product h2 a,
.wc-block-grid__product-title,
.wc-block-grid__product-title a { color: var(--sa-navy) !important; }

.wc-block-cart-item__product-name a:hover,
.wc-block-components-product-name a:hover,
.wc-block-cart-items__row a:hover,
.woocommerce-cart-form .product-name a:hover,
.woocommerce ul.products li.product h2 a:hover,
.woocommerce-page ul.products li.product h2 a:hover { color: var(--sa-blue) !important; }

/* ─── Checkout: nomi prodotto nel riepilogo ordine ─────────── */
.wc-block-components-order-summary-item__name,
.wc-block-components-order-summary-item__description,
.wc-block-components-product-name { color: var(--sa-ink) !important; }
.wc-block-components-order-summary-item__total-price,
.wc-block-components-totals-item__value { color: var(--sa-navy) !important; }
.wc-block-components-totals-item__label { color: var(--sa-muted) !important; }

/* ─── Stacco "Vedi tutti →" dopo griglia bestseller ────────── */
.sa-sec .sa-grid + .wp-block-buttons,
.sa-sec .sa-grid + .wp-block-buttons.sa-rv { margin-top: 28px !important; }

/* ─── Blocchi SEO Top/Bottom ────────────────────────────────── */
.sa-seo-block {
  max-width:   1180px;
  margin:      0 auto;
  padding:     40px 24px;
  color:       var(--sa-ink);
}
.sa-seo-block h2 { color: var(--sa-navy); margin-bottom: 16px; }
.sa-seo-block p  { color: var(--sa-muted); line-height: 1.7; }
.sa-seo-block a  { color: var(--sa-blue); }
.sa-seo-block a:hover { color: var(--sa-navy); }

/* ─── Mini-cart drawer ──────────────────────────────────────── */
/* Icone Account + Carrello: voci del menu principale */
.main-navigation .sa-nav-icon > a {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  padding:         0 !important;
  color:           var(--sa-ink-2);
}
.main-navigation .sa-nav-icon > a:hover { color: var(--sa-navy) !important; }
.sa-cart-count {
  position:     absolute;
  top:          -6px;
  right:        -6px;
  min-width:    18px;
  height:       18px;
  padding:      0 4px;
  background:   var(--sa-cta);
  color:        #fff;
  font-size:    10px;
  font-weight:  800;
  line-height:  18px;
  border-radius:999px;
  text-align:   center;
}
.sa-cart-count:empty,
.sa-cart-count[data-count="0"] { display: none; }

/* Overlay */
.sa-drawer__overlay {
  position:   fixed;
  inset:      0;
  background: rgba(11,42,91,.40);
  z-index:    9998;
  opacity:    0;
  pointer-events: none;
  transition: opacity .3s var(--sa-ease);
}
.sa-drawer--open .sa-drawer__overlay { opacity: 1; pointer-events: auto; }

/* Drawer panel */
.sa-drawer {
  position:   fixed;
  top:        0;
  right:      0;
  bottom:     0;
  width:      clamp(320px, 90vw, 400px);
  background: var(--sa-card);
  box-shadow: -8px 0 40px rgba(11,42,91,.18);
  z-index:    9999;
  display:    flex;
  flex-direction: column;
  transform:  translateX(100%);
  transition: transform .3s var(--sa-ease);
}
.sa-drawer.is-open { transform: translateX(0); }

/* Drawer header */
.sa-drawer__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-bottom:   1px solid var(--sa-line);
}
.sa-drawer__head h3 { margin: 0; font-size: 16px; color: var(--sa-navy); }
.sa-drawer__close {
  background: none;
  border:     none;
  font-size:  22px;
  cursor:     pointer;
  color:      var(--sa-muted);
  line-height:1;
  padding:    0;
}
.sa-drawer__close:hover { color: var(--sa-navy); }

/* Drawer body (woocommerce_mini_cart) */
.sa-drawer__body {
  flex:       1;
  overflow-y: auto;
  padding:    16px 20px;
}
.sa-drawer__body .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.sa-drawer__body .woocommerce-mini-cart-item {
  display:       flex;
  gap:           12px;
  align-items:   center;
  padding:       12px 0;
  border-bottom: 1px solid var(--sa-line);
}
/* !important: su /negozio/, /carrello/, /pagamento/ WooCommerce carica woocommerce.css
   (.woocommerce ul.cart_list li img / .woocommerce a.remove) con specificità maggiore
   delle regole sotto, che altrimenti vengono sovrascritte (img 32px float, x circolare rossa) —
   risultato diverso dalla home, dove woocommerce.css non viene enqueued. Forziamo qui lo
   stesso aspetto ovunque. */
.sa-drawer__body .woocommerce-mini-cart-item img {
  width:         64px !important;
  height:        64px !important;
  object-fit:    cover;
  border-radius: 8px;
  flex-shrink:   0;
  float:         none !important;
  margin:        0 !important;
}
.sa-drawer__body .woocommerce-mini-cart-item .mini_cart_item_name { font-weight: 700; color: var(--sa-navy); font-size: 14px; }
/* Nome+immagine: flessibile ma può andare a capo; quantità: colonna fissa a destra
   che non deve mai comprimersi — altrimenti "6 × 39,90 €" si spezza su più righe
   (numero, "×" e prezzo finiscono ognuno per conto suo, illeggibili). */
.sa-drawer__body .woocommerce-mini-cart-item > a:not(.remove) { flex: 1 1 auto; min-width: 0; }
.sa-drawer__body .woocommerce-mini-cart-item .quantity {
  flex:           0 0 auto;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            2px;
  white-space:    nowrap;
  margin-left:    auto;
  font-size:      12px;
  font-weight:    600;
  color:          var(--sa-muted);
}
.sa-drawer__body .woocommerce-mini-cart-item .woocommerce-Price-amount { color: var(--sa-ink); font-weight: 800; font-size: 14px; }
.sa-drawer__body .woocommerce-mini-cart-item .remove {
  display:       block;
  width:         auto !important;
  height:        auto !important;
  border-radius: 0 !important;
  background:    none !important;
  line-height:   1 !important;
  color:         var(--sa-muted) !important;
  font-size:     18px;
}
.sa-drawer__body .woocommerce-mini-cart-item .remove:hover { color: var(--sa-cta) !important; }

/* Drawer: nascondi totale + pulsanti default del mini-cart (usiamo .sa-drawer__foot) */
.sa-drawer__body .woocommerce-mini-cart__buttons,
.sa-drawer__body .woocommerce-mini-cart__total,
.sa-drawer__body p.woocommerce-mini-cart__empty-message + .woocommerce-mini-cart__buttons {
  display: none !important;
}

/* Drawer footer */
.sa-drawer__foot {
  padding:     16px 20px;
  border-top:  1px solid var(--sa-line);
  background:  var(--sa-bg-2);
}
.sa-drawer__total {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   14px;
  font-size:       15px;
  font-weight:     700;
  color:           var(--sa-navy);
}
.sa-drawer__total strong { font-size: 18px; }
.sa-drawer__actions { display: flex; gap: 10px; flex-direction: column; }
.sa-drawer__actions a {
  display:         block;
  text-align:      center;
  padding:         12px;
  border-radius:   10px;
  font-weight:     700;
  font-size:       15px;
  text-decoration: none;
  transition:      background .18s;
}
.sa-drawer__btn-cart {
  background: var(--sa-bg);
  border:     1.5px solid var(--sa-line);
  color:      var(--sa-navy) !important;
}
.sa-drawer__btn-cart:hover { background: var(--sa-bg-2) !important; }
.sa-drawer__btn-checkout {
  background: var(--sa-grad-cta);
  color:      #fff !important;
  box-shadow: var(--sa-sh-cta);
}
.sa-drawer__btn-checkout:hover { background: var(--sa-cta-d) !important; }

/* ============================================================
   PRODOTTO — Descrizione FULL-WIDTH (.sa-pb-*) [light, condiviso]
   Bande full-bleed + contenuto centrato a 1180 (parità home)
   ============================================================ */

/* Guard anti scroll-orizzontale dei break-out (clip non rompe sticky).
   Il clip va anche su html: l'elemento scrollabile effettivo della pagina
   e' la viewport/documentElement, non body, quindi clip solo su body non
   basta a impedire lo scroll orizzontale residuo (~8px da scrollbar gutter).
   Globale (non solo single-product): il drawer minicart .sa-drawer è
   position:fixed + transform:translateX(100%) per restare fuori schermo da
   chiuso, ma su mobile questo aggiunge comunque overflow orizzontale alla
   pagina (Chromium include i fixed trasformati nello scroll dell'area)
   su QUALSIASI pagina dove il drawer è nel DOM — es. carrello, checkout. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Wrapper della presentazione: nessun vincolo, eredita la colonna */
.sa-pb-fullwidth { margin: 0; padding: 0; }

/* Azzera la card .sa-desc quando contiene la presentazione ricca
   (selettore rinforzato per battere in specificità la card .woocommerce
   div.product .sa-desc / .sa-desc .sa-desc__body — style.css:3156,3163) */
.woocommerce div.product .sa-product-light .sa-desc:has(.sa-pb-fullwidth),
.woocommerce div.product .sa-product-light .sa-desc__body:has(.sa-pb-fullwidth) {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
}

/* La regola di prosa generica .sa-product-light .sa-desc__body h2/h3{margin-top:1.6em}
   (style.css ~1704) vince in specificità sui margin:0 dei nostri sa-pb-* (h2 tagline,
   h3 riga, h3 CTA) e crea un gap indesiderato sopra ogni titolo (eyebrow→tagline,
   pill→CTA h3, tag→h3 di riga). Azzerato qui con !important, le distanze restano
   quelle volute dai margin-bottom degli elementi precedenti. */
.sa-product-light .sa-desc__body .sa-pb-fullwidth h2,
.sa-product-light .sa-desc__body .sa-pb-fullwidth h3 { margin-top: 0 !important; }

/* BANDA full-bleed: esce dalla colonna 1180, sfondo edge-to-edge */
.sa-pb-band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 64px 0;
  background: #FFFFFF;
}
.sa-pb-band--alt  { background: var(--sa-bg2); }                 /* #F4F8FE */
.sa-pb-band--dark { background: linear-gradient(135deg,#0a1628 0%,#0B2A5B 60%,#103a86 100%); }
.sa-pb-band:first-child { padding-top: 40px; }
.sa-pb-band:last-child  { padding-bottom: 40px; }

/* CTA finale: sfondo fotografico (<img>, non CSS background-image — wp_kses_post() spoglia
   qualsiasi url() da un attributo style salvato via REST API, quindi un vero background-image
   inline non sopravvive al salvataggio della description) + overlay brand sopra la foto.
   Tecnica: l'<img> resta nel flusso normale (width:100% + aspect-ratio) e detta l'altezza
   della banda — un <img> absolute con height:100% NON si stira su un parent ad altezza
   "auto" (per i replaced element l'altezza auto usa le dimensioni intrinseche, verificato
   anche con CSS Grid: la sizing pass del grid track riusa comunque l'aspect-ratio intrinseco).
   Testo/overlay invece sono assoluti con inset:0 sopra l'immagine (un div NON replaced SI
   stira correttamente anche su un parent ad altezza "auto" già risolta dall'img in flusso). */
/* !important: la banda CTA è sempre l'ultima del fullwidth, quindi
   .sa-pb-band:last-child{padding-bottom:40px} (più specifica di una sola classe)
   altrimenti vince sul reset e somma 40px di altezza extra sotto la foto. */
.sa-pb-band--cta{position:relative;overflow:hidden;padding:0 !important;
  background:var(--sa-grad-brand,linear-gradient(135deg,#0B2A5B 0%,#1B6DFF 55%,#5AB8FF 100%))}
.sa-pb-cta-bg{display:block;width:100%;height:auto;aspect-ratio:3/1;max-height:480px;object-fit:cover}
/* overlay flat navy (stessa tinta uniforme di .sa-home .sa-final, non un degradé verso
   l'azzurro chiaro: su foto già ricche di blu/bianco un fade verso l'azzurro lava via
   l'identità BluNavy e fa percepire il colore come "azzurro generico" invece che navy) */
.sa-pb-band--cta::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(11,42,91,.78),rgba(11,42,91,.86))}
.sa-pb-band--cta .sa-pb-inner{position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;padding:56px 24px;box-sizing:border-box}
@media (max-width:640px){
  /* aspect-ratio molto alto forza il vincolo a essere sempre max-height (non l'aspect-
     ratio stesso), in modo stabile su tutte le larghezze mobile: il contenuto del CTA
     (pill+h3+p+bottone+nota) è alto ~500px, con overflow:hidden sulla banda andava in
     clip (pill invisibile) se la banda restava troppo bassa. */
  .sa-pb-cta-bg{aspect-ratio:1/2;max-height:620px}
  .sa-pb-band--cta .sa-pb-inner{padding:32px 20px}
}

/* INNER: stessa mezzeria/gutter della home */
.sa-pb-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* HERO
   Nota: h2/h3/p sotto .sa-desc__body sono già targettizzati da regole
   generiche (style.css:1576-1578, prosa WYSIWYG) con specificità (0,2,1),
   superiore alle classi singole .sa-pb-* qui sotto (0,1,1): serve !important
   sul color per garantire la palette chiara/scura voluta in ogni banda. */
.sa-pb-eyebrow { font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--sa-azure) !important;font-weight:700;margin:0 0 10px; }
.sa-pb-tagline { font-size:clamp(28px,4.2vw,44px);font-weight:900;color:#fff !important;line-height:1.1;margin:0 0 14px;letter-spacing:-.02em; }
.sa-pb-tagline em { color:var(--sa-azure);font-style:normal; }
.sa-pb-sub { font-size:17px;color:rgba(255,255,255,.85) !important;margin:0 0 26px;max-width:62ch; }
.sa-pb-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.sa-pb-stat { background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:18px 14px;text-align:center; }
.sa-pb-stat-num { display:block;font-size:28px;font-weight:900;color:#fff;line-height:1; }
.sa-pb-stat-lbl { display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.7);margin-top:6px; }

/* RIGHE media + testo */
.sa-pb-row { display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; }
.sa-pb-row.reverse .sa-pb-row-media { order:2; }
.sa-pb-row-media img,
.sa-pb-row-media .wp-block-image img { display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--sa-r-lg);box-shadow:var(--sa-sh-2);margin:0; }
.sa-pb-row-media .wp-block-image { margin:0;width:100%; }
.sa-pb-row .sa-pb-row-tag { font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--sa-blue) !important;font-weight:800;margin:0 0 10px; }
.sa-pb-row h3 { font-size:clamp(23px,2.7vw,32px);font-weight:800;color:var(--sa-navy) !important;margin:0 0 14px;line-height:1.18; }
.sa-pb-row p { font-size:16px;color:var(--sa-muted) !important;margin:0 0 16px;line-height:1.65; }
.sa-pb-list { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px; }
.sa-pb-list li { display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--sa-ink);line-height:1.5; }
.sa-pb-list li::before { content:"✓";flex-shrink:0;width:22px;height:22px;background:var(--sa-blue);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff; }

/* PILLARS */
.sa-pb-pillars { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.sa-pb-pillar { background:#fff;border:1px solid var(--sa-line);border-top:3px solid var(--sa-blue);border-radius:var(--sa-r-md);padding:26px;text-align:center;box-shadow:0 4px 18px rgba(11,42,91,.05); }
.sa-pb-pil-icon { font-size:30px;margin-bottom:12px; }
.sa-pb-pillar h4 { font-size:14px;font-weight:800;color:var(--sa-navy);margin:0 0 8px;text-transform:uppercase;letter-spacing:.06em; }
.sa-pb-pillar p { font-size:14px;line-height:1.6;margin:0;color:var(--sa-muted) !important; }

/* SPECS */
.sa-pb-secttl { font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--sa-navy) !important;margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid rgba(27,109,255,.35); }
.sa-pb-tbl table { width:100%;border-collapse:collapse;font-size:15px; }
.sa-pb-tbl tr { border-bottom:1px solid var(--sa-line); }
.sa-pb-tbl tr:last-child { border-bottom:none; }
.sa-pb-tbl th { text-align:left;padding:13px 14px 13px 0;color:var(--sa-muted) !important;font-weight:600;white-space:nowrap;width:42%; }
.sa-pb-tbl td { padding:13px 0;color:var(--sa-navy) !important;font-weight:600; }
.sa-pb-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sa-pb-tbl table{min-width:min(520px,100%)}
@media (max-width:768px){
  .sa-pb-tbl{position:relative;border-radius:var(--sa-r-md);border:1px solid var(--sa-line);
    background:
      linear-gradient(90deg,#fff 30%,transparent),
      linear-gradient(90deg,transparent,#fff 70%) 100% 0,
      radial-gradient(farthest-side at 100% 50%,rgba(11,42,91,.10),transparent) 100% 0;
    background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%;
    background-attachment:local,local,scroll}
  .sa-pb-tbl th{white-space:normal}
  .sa-pb-tbl table{min-width:440px}
}

/* COLORI */
.sa-pb-colors-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.sa-pb-color { text-align:center; }
.sa-pb-color img,
.sa-pb-color .wp-block-image img { aspect-ratio:1/1;width:100%;object-fit:cover;border-radius:var(--sa-r-md);margin:0 0 10px;box-shadow:0 4px 18px rgba(11,42,91,.06); }
.sa-pb-color .wp-block-image { margin:0 0 10px;width:100%; }
.sa-pb-color span { font-size:14px;font-weight:700;color:var(--sa-navy); }
.sa-pb-color-note { display:block;color:var(--sa-muted) !important;font-size:12px;font-weight:400 !important; }
a.sa-pb-color{text-decoration:none;display:block;transition:transform .2s var(--sa-ease)}
/* !important: vedi nota su .sa-atc-btn:hover — stessa regola di prosa rimette l'underline */
a.sa-pb-color:hover{transform:translateY(-3px);text-decoration:none!important}
a.sa-pb-color .sa-pb-color__img img{aspect-ratio:1/1;width:100%;object-fit:cover;
  border-radius:var(--sa-r-md);margin:0 0 10px;box-shadow:0 4px 18px rgba(11,42,91,.08)}
a.sa-pb-color .sa-pb-color-name{display:block;font-size:14px;font-weight:700;color:var(--sa-navy);margin:0 0 4px}
a.sa-pb-color .sa-pb-color-price{display:flex;align-items:baseline;justify-content:center;gap:8px;
  font-size:15px;font-weight:800;color:var(--sa-navy)}
a.sa-pb-color .sa-pb-color-price del{color:var(--sa-muted) !important;font-weight:500;font-size:13px;text-decoration:line-through}
a.sa-pb-color .sa-pb-color-price ins{color:var(--sa-cta) !important;text-decoration:none}
a.sa-pb-color .sa-pb-color-price .woocommerce-Price-amount{display:inline}

/* LEGALE */
.sa-pb-legal { display:flex;gap:18px;align-items:flex-start;background:rgba(27,109,255,.05);border:1px solid var(--sa-line);border-radius:var(--sa-r-md);padding:26px; }
.sa-pb-legal-icon { font-size:28px;flex-shrink:0; }
.sa-pb-legal strong { color:var(--sa-navy);font-size:16px; }
.sa-pb-legal p { margin:0;font-size:14px;line-height:1.6;color:var(--sa-muted) !important; }

/* CTA finale */
.sa-pb-cta{text-align:center;max-width:760px;margin:0 auto}
.sa-pb-cta-pill{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:13px;font-weight:700;padding:7px 16px;border-radius:999px;margin:0 0 22px}
.sa-pb-cta h3{font-size:clamp(26px,3.6vw,40px);color:#fff !important;font-weight:900;margin:0 0 16px;letter-spacing:-.02em}
.sa-pb-cta p{color:rgba(255,255,255,.92) !important;font-size:18px;margin:0 0 30px}
.sa-pb-cta .sa-atc-btn{background:#fff;color:var(--sa-navy) !important;box-shadow:0 10px 30px rgba(0,0,0,.22)}
/* niente background:navy sull'hover: su uno sfondo già navy il bottone "spariva" —
   resta bianco, si solleva e il testo vira sul corallo CTA per il feedback di interazione. */
.sa-pb-cta .sa-atc-btn:hover{background:#fff;color:var(--sa-cta) !important;
  transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,0,0,.30)}
.sa-pb-cta-note{color:var(--sa-on-dark-muted);font-size:13px;margin:42px 0 0}

/* MOBILE */
@media (max-width:768px) {
  .sa-pb-band { padding:44px 0; }
  .sa-pb-stats { grid-template-columns:repeat(2,1fr); }
  .sa-pb-row { grid-template-columns:1fr;gap:24px; }
  .sa-pb-row.reverse .sa-pb-row-media { order:0; }
  .sa-pb-pillars { grid-template-columns:1fr; }
  .sa-pb-colors-grid { grid-template-columns:1fr;gap:14px; }
  .sa-pb-legal { flex-direction:column;gap:12px; }
}

/* ─── PIANO-template-prodotto-cro: bottone add-to-cart nativo [sa_atc] ─── */
.sa-atc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--sa-grad-cta);color:#fff!important;font-weight:800;font-size:17px;
  padding:16px 42px;border-radius:12px;text-decoration:none;border:0;cursor:pointer;
  box-shadow:var(--sa-sh-cta);transition:transform .2s var(--sa-ease),box-shadow .2s var(--sa-ease)}
/* !important: .entry-content a:not(...):not(...):hover (style.css ~3166) ha specificità
   più alta e rimette l'underline sull'hover di qualsiasi <a> di prosa, incluso questo. */
.sa-atc-btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,106,61,.40);
  color:#fff!important;text-decoration:none!important}
.sa-atc-btn.added{opacity:.85}
.sa-atc-btn--oos{background:var(--sa-card);color:var(--sa-muted)!important;box-shadow:none;cursor:default}

/* ─── POINT 2: sticky ATC premium con miniatura ─── */
.sa-sticky-atc{background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);border-top:1px solid var(--sa-line);
  box-shadow:0 -10px 34px rgba(11,42,91,.14)}
.sa-sticky-atc__inner{max-width:760px;padding:10px 16px;gap:14px}
.sa-sticky-atc__thumb{flex:0 0 auto;width:56px;height:56px;border-radius:12px;overflow:hidden;
  border:1px solid var(--sa-line);background:var(--sa-bg-2)}
.sa-sticky-atc__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sa-sticky-atc__name{font-size:13px;font-weight:700;color:var(--sa-navy)}
.sa-sticky-atc__price{font-size:16px;font-weight:800;color:var(--sa-navy)}
.sa-sticky-atc__price del{color:var(--sa-muted);font-weight:500;font-size:13px;margin-right:6px}
.sa-sticky-atc__price ins{color:var(--sa-cta);text-decoration:none}
.sa-sticky-atc__btn{gap:8px;padding:13px 22px;font-size:15px;border-radius:12px;
  box-shadow:var(--sa-sh-cta);transition:transform .2s var(--sa-ease),box-shadow .2s var(--sa-ease)}
/* !important: la regola globale "a:hover{color:var(--sa-cta)}" (style.css ~246) ha
   specificità type+pseudo-classe più alta di .sa-sticky-atc__btn da solo e vincerebbe,
   rendendo il testo arancione su sfondo arancione (stesso motivo per cui .sa-atc-btn:hover
   forza color:#fff!important qui sopra). */
.sa-sticky-atc__btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(255,106,61,.40);
  color:#fff!important;text-decoration:none!important}
@media (max-width:520px){.sa-sticky-atc__btn svg{display:none}.sa-sticky-atc__thumb{width:48px;height:48px}}

/* ─── POINT 4: prodotti correlati full-width a filo del footer ─── */
.single-product .related.products{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-bottom:0 !important;padding:56px max(24px,calc((100vw - 1180px)/2)) 64px;
  background:var(--sa-bg-2);border:0;border-top:1px solid var(--sa-line);border-radius:0}
.single-product .related.products > h2{max-width:1180px;margin:0 auto 28px !important;
  color:var(--sa-navy);font-size:clamp(22px,3vw,30px) !important;font-weight:800 !important;letter-spacing:-.02em;
  padding-bottom:0 !important;border-bottom:0 !important}
.single-product .related.products ul.products{max-width:1180px;margin:0 auto}
.single-product .inside-article{padding-bottom:0 !important;margin-bottom:0 !important}
.single-product .site-footer,.single-product #footer-widgets{margin-top:0 !important}
/* .site-main{margin:20px 0} di GeneratePress collassa attraverso .content-area (niente
   padding/border a fermarlo) e resta visibile come gap bianco prima del footer. */
.single-product .site-main{margin-bottom:0 !important}

/* ─── POINT 6: player video facade — scope prodotto (mirror di .sa-home .sa-video*) ─── */
/* In cima alla banda pillars (vedi build engine): video a piena larghezza dell'inner (1180),
   come in home, + bottone ATC sotto, poi i 3 box pillar. */
.sa-pb-video{width:100%;max-width:none;margin:0 auto 32px;display:flex;flex-direction:column;align-items:center;gap:18px}
.sa-pb-video .sa-video{width:100%;margin:0}
.sa-pb-video .sa-video__play{display:block;position:relative;width:100%;aspect-ratio:16/9;
  border-radius:var(--sa-r-xl);overflow:hidden;border:1px solid var(--sa-line);box-shadow:var(--sa-sh-2);
  padding:0;cursor:pointer;background:var(--sa-bg-2)}
.sa-pb-video .sa-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sa-pb-video .sa-video__overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,42,91,.05),rgba(11,42,91,.55))}
/* Niente <svg>: wp_kses_post() lo spoglia dal campo description salvato via REST.
   Triangolo "play" disegnato in CSS con un pseudo-elemento a tripla border. */
.sa-pb-video .sa-video__btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;background:var(--sa-grad-cta);box-shadow:var(--sa-sh-cta);
  display:flex;align-items:center;justify-content:center;transition:transform .25s var(--sa-ease)}
.sa-pb-video .sa-video__btn::after{content:"";width:0;height:0;margin-left:4px;
  border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff}
.sa-pb-video .sa-video__play:hover .sa-video__btn{transform:translate(-50%,-50%) scale(1.08)}
.sa-pb-video .sa-video__label{position:absolute;left:24px;bottom:18px;color:#fff;font-weight:700;
  font-size:15px;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.sa-pb-video .sa-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.sa-pb-video .sa-video.is-playing{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--sa-r-xl);
  overflow:hidden;box-shadow:var(--sa-sh-2);background:#000}
.sa-pb-video .sa-video.is-playing iframe{top:-14%;height:114%}

/* ─── POINT 7A: urgency timer consegna nel summary ─── */
.sa-deliver{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:11px 14px;
  background:linear-gradient(180deg,#FFF4EE,#FFE9DF);border:1px solid rgba(255,106,61,.30);
  border-radius:12px;color:var(--sa-ink);font-size:14px;line-height:1.3}
.sa-deliver__ic{font-size:18px}
.sa-deliver b{color:var(--sa-cta);font-variant-numeric:tabular-nums}
.sa-deliver__day{color:var(--sa-cta);text-transform:capitalize}

/* ─── POINT 7B: reassurance strip a 4 icone (sostituisce .sa-trust-bar) ─── */
.sa-reassure{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;
  background:var(--sa-card);border:1px solid var(--sa-line);border-radius:var(--sa-r-lg);
  padding:18px 20px;box-shadow:var(--sa-sh-1)}
.sa-reassure__item{display:flex;align-items:center;gap:12px}
.sa-reassure__ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:22px;background:rgba(27,109,255,.10);border:1px solid rgba(27,109,255,.18)}
.sa-reassure__item b{display:block;color:var(--sa-navy);font-size:14px;font-weight:800;line-height:1.2}
.sa-reassure__item small{display:block;color:var(--sa-muted);font-size:12px;margin-top:2px}
@media (max-width:900px){.sa-reassure{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .sa-reassure{margin-top:20px}
  /* margin:48px 0 di .sa-product-light (zona chiara sotto): troppo su mobile, dove la
     card reassure è già a tutta larghezza subito sopra. */
  .sa-product-light{margin:20px 0}
}
@media (max-width:480px){.sa-reassure{grid-template-columns:1fr;padding:14px}}

/* INTERVENTO header/bande: Banda 1 attaccata al footer (era 56px di gap dal padding-bottom di .sa-sec) */
.sa-home .sa-sec:has(> .wp-block-group.sa-final) { padding-bottom: 0 !important; }

/* Header navy uniforme a Banda 1 (microbar + marquee): da var(--sa-red) [shim = blu acceso] a navy→azzurro */
.sa-microbar {
  background: linear-gradient(90deg,#0B2A5B 0%, #123C7A 50%, #1B6DFF 100%) !important;
  color: var(--sa-on-dark) !important;
}
.sa-microbar .tick { background: rgba(0,0,0,.28); }
.sa-marquee {
  background: linear-gradient(90deg,#0B2A5B 0%, #1B6DFF 60%, #5AB8FF 100%) !important;
  color: #fff !important;
}

/* Banda 2 "Quale spray fa per te?": overlay navy sopra il gradiente esistente, stesso concept di Banda 1 */
.sa-sec--brand {
  background-image: linear-gradient(rgba(11,42,91,.55), rgba(11,42,91,.70)), var(--sa-grad-brand);
}
/* Card prodotto sempre chiare e leggibili sopra l'overlay (prima erano translucide e il titolo bianco-su-bianco) */
.sa-home .sa-sec--brand .sa-cmp .col { background: #fff !important; }
.sa-home .sa-sec--brand .sa-cmp .col.best { background: linear-gradient(160deg,#EEF4FF 0%,#fff 45%) !important; }
.sa-home .sa-sec--brand .sa-cmp .col h3,
.sa-home .sa-sec--brand .sa-cmp .col .wp-block-heading { color: #0F172A !important; }

/* Banda 2: eyebrow "I nostri marchi" + griglia 7 tile marchi + CTA quiz fine banda */
.sa-marche-head { margin: 56px 0 28px; text-align: center; }
.sa-home .sa-marche {
  display:               grid;
  grid-template-columns: repeat(7,1fr);
  gap:                   16px;
  max-width:             1180px;
  margin:                0 auto !important;
}
.sa-home .sa-marche .wp-block-column { flex: unset !important; }
.sa-home .sa-marche figure { margin: 0; }
.sa-home .sa-marche figure img {
  aspect-ratio:  4/3;
  object-fit:    cover;
  border-radius: var(--sa-r-md);
  width:         100%;
  transition:    transform .3s var(--sa-ease), box-shadow .3s var(--sa-ease);
}
.sa-home .sa-marche a { display: block; }
.sa-home .sa-marche a:hover img {
  transform:  translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.sa-home .sa-marche p {
  color:          var(--sa-on-dark-2);
  text-align:     center;
  font-size:      13px;
  font-weight:    700;
  margin-top:     8px;
  margin-bottom:  0;
}
@media (max-width: 980px) { .sa-home .sa-marche { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 560px) { .sa-home .sa-marche { grid-template-columns: repeat(2,1fr); } }

.sa-marche-btn { margin-top: 38px !important; }
.sa-marche-cta .wp-block-button__link {
  background: #fff !important;
  color:      var(--sa-navy) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
}
.sa-marche-cta .wp-block-button__link:hover {
  background: var(--sa-bg2) !important;
  color:      var(--sa-navy) !important;
  transform:  translateY(-2px);
}

/* ===== HERO come Banda finale: foto pulita + overlay navy + testo chiaro =====
   v2 (restyle leggibilità): sfondo cambiato da hero-bg-scene.webp (scena notturna
   confusionaria, troppe luci) a hero-bg-scene-v2.webp — stessa atmosfera scura/
   drammatica della banda finale, con ampia zona scura a sinistra per il testo.
   Overlay morbido (.70/.82) allineato alla banda finale; gradiente orizzontale
   extra che scurisce la metà sinistra (colonna testo) per leggibilità garantita. */
.sa-home .sa-hero {
  background-image: linear-gradient(90deg,rgba(11,42,91,.86) 0%,rgba(11,42,91,.78) 42%,rgba(11,42,91,.62) 100%),
                    linear-gradient(rgba(11,42,91,.42),rgba(11,42,91,.58)),
                    url('https://spray-antiaggressione.net/wp-content/uploads/2026/06/hero-bg-scene-v2.webp') !important;
  background-size: cover !important; background-position: center right !important;
}
.sa-home .sa-hero::before, .sa-home .sa-hero::after { display:none !important; } /* spegne la griglia/radial del light theme */
/* testo chiaro (vince sugli inline scuri del markup) */
.sa-home .sa-hero .wp-block-heading            { color:#fff !important; text-shadow:0 1px 18px rgba(7,22,48,.55); }
.sa-home .sa-hero .wp-block-heading em.hi      { color:var(--sa-azure) !important; }
.sa-home .sa-hero .wp-block-heading em.hi::after{ background:linear-gradient(90deg,var(--sa-azure),#fff) !important; }
.sa-home .sa-hero .sa-hero-lead,
.sa-home .sa-hero .sa-hero-lead.has-text-color { color:var(--sa-on-dark-2) !important; text-shadow:0 1px 14px rgba(7,22,48,.5); }
/* mobile: la grid stacca, il testo va a tutta larghezza -> overlay uniforme più
   scuro così resta leggibile su qualunque punto della foto */
@media (max-width:768px){
  .sa-home .sa-hero {
    background-image: linear-gradient(rgba(11,42,91,.80),rgba(11,42,91,.88)),
                      url('https://spray-antiaggressione.net/wp-content/uploads/2026/06/hero-bg-scene-v2.webp') !important;
    background-position: center !important;
  }
}
.sa-home .sa-hero .sa-specs-row .wp-block-heading,
.sa-home .sa-hero .sa-specs-row strong         { color:#fff !important; }
.sa-home .sa-hero .sa-specs-row p,
.sa-home .sa-hero p.has-text-color             { color:var(--sa-on-dark-2) !important; }
.sa-home .sa-hero .sa-specs-row                { border-top-color:rgba(255,255,255,.18) !important; }
/* eyebrow "— Difesa personale legale" -> azzurro su navy */
.sa-home .sa-hero > .wp-block-columns p[style*="#1B6DFF"]{ color:var(--sa-azure) !important; }
/* pulsante secondario "Come funziona": outline chiaro su navy */
.sa-home .sa-hero .sa-btn-secondary .wp-block-button__link{
  background:transparent !important; color:#fff !important; border:1px solid rgba(255,255,255,.55) !important;
}
/* hero card glass più visibile su sfondo navy */
.sa-home .sa-hero-card{ background:rgba(255,255,255,.10) !important; border-color:rgba(255,255,255,.18) !important; }
/* ===== TRUST STRIP dentro la stessa banda navy =====
   .sa-trust è un blocco fratello di .sa-hero (non annidato): "transparent"
   lascia trasparire lo sfondo chiaro della pagina dietro al testo bianco
   (invisibile). Le serve uno sfondo navy proprio per continuare la banda. */
.sa-home .sa-trust { background:var(--sa-navy) !important; border-color:rgba(255,255,255,.16) !important; }
.sa-home .sa-trust p, .sa-home .sa-trust .wp-block-column { color:#fff !important; }

/* ============================================================================
   HERO POLISH v3 (2026-06-25) — rifinitura visiva completa banda alta:
   1) card prodotto ridisegnata (immagine in alto + pannello info leggibile,
      basta testo sovrapposto alle bombolette)
   2) riga recensioni 4.9★/+12.000 resa leggibile (era navy su navy)
   3) titolo: text-wrap balance (niente "te" orfano)
   4) hover pulsanti coerenti
   ========================================================================== */

/* --- 3. Titolo + lead: bilanciamento righe (no orfani) --- */
.sa-home .sa-hero h1.wp-block-heading { text-wrap:balance; }
.sa-home .sa-hero .sa-hero-lead { text-wrap:pretty; max-width:42ch; }

/* --- 2. Riga recensioni: numeri (4.9★ / +12.000) erano #0B2A5B su navy --- */
.sa-home .sa-hero .sa-rv p strong { color:#fff !important; }

/* --- 4. Hover pulsanti hero --- */
/* primario "Scegli il tuo spray": leggero sollevamento + gradiente più intenso */
.sa-home .sa-hero .wp-block-button:not(.sa-btn-secondary) .wp-block-button__link:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 36px rgba(255,106,61,.5), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
/* secondario "Come funziona": hover frosted (non corallo) per distinguerlo dal primario */
.sa-home .sa-hero .sa-btn-secondary .wp-block-button__link{ transition:transform .2s var(--sa-ease), background-color .2s var(--sa-ease), border-color .2s var(--sa-ease) !important; }
.sa-home .sa-hero .sa-btn-secondary .wp-block-button__link:hover{
  background:rgba(255,255,255,.14) !important; border-color:#fff !important; color:#fff !important;
  transform:translateY(-2px) !important; box-shadow:none !important;
}

/* --- 1. CARD PRODOTTO — RIMOSSO (2026-07-29) ------------------------------
   Qui c'era il restyle "immagine 60% + pannello info" costruito tutto con
   !important e con selettori posizionali (> p:nth-of-type(1|2|3)). Era la CAUSA
   del disallineamento segnalato: il badge veniva posizionato in absolute a 16px
   dal bordo mentre i testi ricevevano margin:0 22px, quindi le due griglie non
   coincidevano (17px vs 23px misurati a video). Inoltre i selettori posizionali
   si rompono appena cambia l'ordine dei paragrafi nel markup.
   Sostituito dal blocco "HERO CARD — restyle vetro + accento azzurro" in fondo
   al file, che usa classi esplicite (.sa-hc-*) e un unico padding di 24px.
   --------------------------------------------------------------------------- */
/* (le regole del blocco legacy sono state eliminate) */

/* ============================================================================
   BANDA 2 "Quale spray fa per te?" — restyle v2 (2026-06-25)
   Fix bullet illeggibili + sfondo deep-navy + card equal-height/best in evidenza
   + gerarchia pulsanti + tile con stacco.
   ========================================================================== */

/* --- A. BULLET leggibili (erano #E6E9EF su card bianca per token --sa-ink-2) --- */
.sa-home .sa-sec--brand .sa-cmp .col .wp-block-list li{ color:#334155 !important; border-top-color:#EDF1F7 !important; }
.sa-home .sa-sec--brand .sa-cmp .col .wp-block-list li::before{ color:var(--sa-blue) !important; }

/* --- B. SFONDO deep-navy + glow azure (più premium del gradiente piatto) --- */
.sa-home .sa-sec--brand{
  background-color:#0A2350 !important;
  background-image:
    radial-gradient(1000px 460px at 50% -12%, rgba(90,184,255,.20), transparent 62%),
    linear-gradient(180deg,#0C2C5E 0%,#0A2350 48%,#07193A 100%) !important;
}

/* --- C. CARD equal-height + CTA a filo + hover lift --- */
.sa-home .sa-sec--brand .sa-cmp{ align-items:stretch !important; }
.sa-home .sa-sec--brand .sa-cmp > .wp-block-column{ display:flex !important; }
.sa-home .sa-sec--brand .sa-cmp .col{
  display:flex !important; flex-direction:column !important; width:100% !important;
  border-radius:20px !important;
  transition:transform .3s var(--sa-ease), box-shadow .3s var(--sa-ease) !important;
}
.sa-home .sa-sec--brand .sa-cmp .col .wp-block-buttons{ margin-top:auto !important; }
.sa-home .sa-sec--brand .sa-cmp .col:not(.best):hover{ transform:translateY(-6px) !important; box-shadow:0 26px 60px rgba(4,14,33,.45) !important; }

/* --- D. "BEST" in evidenza: sollevata + ring blu + ombra ampia --- */
.sa-home .sa-sec--brand .sa-cmp .col.best{
  transform:translateY(-10px) !important; z-index:2 !important;
  background:linear-gradient(170deg,#EAF2FF 0%,#FFFFFF 42%) !important;
  box-shadow:0 0 0 2px var(--sa-blue), 0 30px 70px rgba(4,14,33,.5) !important;
}
.sa-home .sa-sec--brand .sa-cmp .col.best:hover{
  transform:translateY(-14px) !important;
  box-shadow:0 0 0 2px var(--sa-blue), 0 36px 82px rgba(4,14,33,.55) !important;
}

/* --- F. PANNELLO IMMAGINE uniforme e incorniciato --- */
.sa-home .sa-sec--brand .cmp-img{
  margin:0 0 14px !important; border-radius:14px !important; overflow:hidden !important;
  background:#fff !important; border:1px solid #E7EEF8 !important;
}
.sa-home .sa-sec--brand .cmp-img img{ display:block !important; width:100% !important; aspect-ratio:4/3 !important; object-fit:cover !important; }

/* --- E. GERARCHIA PULSANTI: non-best outline corallo / best pieno; tutti full-width --- */
.sa-home .sa-sec--brand .sa-cmp .col .wp-block-buttons{ width:100% !important; }
.sa-home .sa-sec--brand .sa-cmp .col .wp-block-button{ width:100% !important; margin:0 !important; }
.sa-home .sa-sec--brand .sa-cmp .col .wp-block-button__link{
  display:block !important; width:100% !important; text-align:center !important;
  padding:13px 20px !important; font-weight:800 !important; border-radius:12px !important;
  transition:transform .2s var(--sa-ease), background-color .2s var(--sa-ease), box-shadow .2s var(--sa-ease) !important;
}
/* non-best -> outline corallo */
.sa-home .sa-sec--brand .sa-cmp .col:not(.best) .wp-block-button__link{
  background:transparent !important; background-image:none !important; color:var(--sa-cta) !important;
  border:2px solid var(--sa-cta) !important; box-shadow:none !important;
}
.sa-home .sa-sec--brand .sa-cmp .col:not(.best) .wp-block-button__link:hover{
  background:var(--sa-cta) !important; color:#fff !important; box-shadow:var(--sa-sh-cta) !important; transform:translateY(-2px) !important;
}
/* best -> corallo pieno, prominente */
.sa-home .sa-sec--brand .sa-cmp .col.best .wp-block-button__link{
  background:var(--sa-grad-cta) !important; color:#fff !important; border:0 !important; box-shadow:var(--sa-sh-cta), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.sa-home .sa-sec--brand .sa-cmp .col.best .wp-block-button__link:hover{
  transform:translateY(-2px) !important; box-shadow:0 14px 36px rgba(255,106,61,.5), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* --- G. TILE MARCHI: stacco sul fondo navy --- */
.sa-home .sa-marche figure img{ border:1px solid rgba(255,255,255,.10) !important; box-shadow:0 6px 16px rgba(0,0,0,.22) !important; }
.sa-home .sa-marche a:hover img{ box-shadow:0 12px 28px rgba(0,0,0,.34) !important; }

/* ============================================================================
   ROUND 2 — rifiniture UX desktop + mobile S23 (2026-06-25)
   §1 hero altezze, §2 bottone secondario, §4 trust strip, §5 specs mobile,
   §8 tabella confronto, §9 ratio mobile miti/FAQ, §10 header logo+no-wrap.
   ========================================================================== */

/* --- §1: hero, le due colonne (testo / card) alla stessa altezza, testo
   centrato verticalmente nella sua colonna (solo desktop, >=769px) --- */
/* SUPERATO dal blocco "HERO — COLONNA TESTO restyle" in fondo al file
   (2026-07-29). Qui c'era il centraggio verticale della colonna testo con
   justify-content:center !important: le due colonne risultavano della stessa
   ALTEZZA ma il contenuto del testo restava rientrato ~71px sopra e sotto
   rispetto ai bordi della card, che a video legge come "non allineati".
   Le regole nuove allineano i due contenuti in cima; restavano inefficaci
   finche' questo !important vinceva per specificita'. */
@media (min-width: 769px) {
  .sa-home .sa-hero-grid.wp-block-columns,
  .sa-home .sa-hero .wp-block-columns.sa-hero-grid { align-items: stretch !important; }
  .sa-home .sa-hero-grid > .wp-block-column.d1 { display: flex !important; }
  .sa-home .sa-hero-grid > .wp-block-column.d1 .sa-hero-card { flex: 1 !important; height: 100% !important; }
}

/* --- §2: bottone secondario "Come funziona" nell'hero -> blu pieno,
   hover blu più scuro (coerente col primario corallo, coppia distinta) ---
   Il wrapper .wp-block-button.sa-btn-secondary (non solo il link interno) eredita
   dalla regola "ghost" base un border 1.5px arancione: va azzerato anche qui,
   altrimenti resta visibile come rettangolo arancione attorno al pulsante blu. */
.sa-home .sa-hero .sa-btn-secondary {
  border: 0 !important; box-shadow: none !important; background: transparent !important;
}
.sa-home .sa-hero .sa-btn-secondary .wp-block-button__link {
  background: var(--sa-blue) !important; color: #fff !important; border: 0 !important;
  box-shadow: var(--sa-sh-2), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.sa-home .sa-hero .sa-btn-secondary .wp-block-button__link:hover {
  background: var(--sa-blue-d) !important; color: #fff !important; border-color: transparent !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 34px rgba(27,109,255,.42), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* --- §4: trust strip — divisori tenui (non bianchi) su navy + hover
   percettibile; mobile S23 in griglia 2x2 ordinata --- */
.sa-home .sa-trust .wp-block-columns { flex-wrap: nowrap !important; }
.sa-home .sa-trust .wp-block-column {
  border-right: 1px solid rgba(255,255,255,.12) !important;
  border-bottom: 0 !important;
}
.sa-home .sa-trust .wp-block-column:last-child { border-right: 0 !important; }
.sa-home .sa-trust .wp-block-column:hover { background: rgba(255,255,255,.06) !important; }
@media (max-width: 768px) {
  .sa-home .sa-trust .wp-block-columns { flex-wrap: wrap !important; }
  .sa-home .sa-trust .wp-block-column {
    flex: 1 1 50% !important; min-width: 50% !important;
    border-right: 1px solid rgba(255,255,255,.12) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    padding: 14px 10px !important; font-size: 13px !important;
  }
  .sa-home .sa-trust .wp-block-column:nth-child(2n) { border-right: 0 !important; }
  .sa-home .sa-trust .wp-block-column:nth-child(n+3) { border-bottom: 0 !important; }
}

/* --- §5: specs hero su mobile S23 — 3 colonne simmetriche su una riga --- */
@media (max-width: 768px) {
  .sa-home .sa-hero .sa-specs-row {
    display: grid !important; grid-template-columns: repeat(3,1fr) !important;
    gap: 10px !important; text-align: center !important;
  }
  .sa-home .sa-hero .sa-specs-row .wp-block-column { width: auto !important; margin: 0 !important; padding: 18px 0 0 !important; }
  .sa-home .sa-hero .sa-specs-row .wp-block-heading,
  .sa-home .sa-hero .sa-specs-row strong { font-size: 20px !important; }
  .sa-home .sa-hero .sa-specs-row p { font-size: 11px !important; line-height: 1.25 !important; }
}

/* --- §8: tabella confronto — intestazioni navy piatte, "Spray OC" resta
   arancione, niente gradienti/effetti --- */
.sa-home .sa-cmp-table thead th {
  background: var(--sa-navy) !important; background-image: none !important;
  color: #fff !important; box-shadow: none !important;
}
.sa-home .sa-cmp-table thead th.me {
  background: var(--sa-cta) !important; background-image: none !important; color: #fff !important;
  box-shadow: inset 2px 0 0 var(--sa-cta), inset -2px 0 0 var(--sa-cta), inset 0 2px 0 var(--sa-cta) !important;
}

/* --- §9: immagini laterali "Falsi miti"/"FAQ" — ratio verticale 3:4 su
   mobile (sorgenti verticali 896x1200), niente più tagli aggressivi --- */
@media (max-width: 768px) {
  .sa-home .sa-myth-wrap .sa-myth-img-col img,
  .sa-home .sa-faq-wrap .sa-faq-img-col img {
    aspect-ratio: 3 / 4 !important; object-fit: cover !important; object-position: center !important;
    width: 100% !important; height: auto !important; border-radius: var(--sa-r-lg) !important;
  }
}

/* --- §10: header — logo nativo (custom_logo) sostituisce icona+titolo+tagline ---
   Logo nativo attivo (PIANO-header-sticky-logo-shrink.md §2.3): il brand è
   comunicato dall'unica immagine .site-logo (icona+wordmark), quindi titolo e
   tagline testuali restano nel DOM per SEO/accessibilità ma fuori vista. */
.site-header .site-branding .main-title,
.site-header .site-branding .site-description { display: none !important; }
.site-header .site-logo { display: block !important; }
.site-header .site-logo img,
.site-header img.site-logo {
  height: 46px;            /* desktop: lockup ben leggibile, header compatto */
  width: auto;
  max-width: 370px;        /* asset nativo 300x38 (ar 7.89:1): 46px*7.89≈363px */
}

@media (max-width: 768px) {
  /* flex-wrap deve restare "wrap" (default GP): #site-navigation ha flex-basis:100%
     e DEVE poter scendere sulla propria riga quando il menu è aperto (.toggled).
     Con nowrap viene compresso sulla riga 1 insieme a logo+titolo: causa sia
     la sovrapposizione titolo/toggle sia il menu mobile illeggibile (colonna 118px). */
  .inside-header { flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }
  .site-branding { flex: 1 1 auto !important; min-width: 0 !important; }
  .site-header .site-logo img,
  .site-header img.site-logo { height: 38px; max-width: 305px; }
  #mobile-menu-control-wrapper { flex: 0 0 auto !important; margin-left: auto !important; }
  #site-navigation.sub-menu-right { flex: 1 1 100% !important; width: 100% !important; }
  /* Account + Carrello: <li> normali nel menu mobile, quindi block/full-width
     come tutte le altre voci -> finiscono su due righe separate invece di
     stare appiantati sulla stessa riga. Le forzo inline-block così seguono
     il flusso normale e si affiancano dopo l'ultima voce di testo. */
  #site-navigation .sa-nav-icon { display: inline-block !important; width: auto !important; }
  #site-navigation .sa-nav-icon + .sa-nav-icon { margin-left: 16px !important; }
}

/* ── Header shrink on scroll (transizioni) ───────────────────────────── */
.site-header,
.site-header .inside-header,
.site-header .site-logo img,
.site-header img.site-logo { transition: min-height .22s ease, padding .22s ease, height .22s ease; }

/* .inside-header ha padding verticale 20px di default (GeneratePress): è quello
   a rendere l'header alto, non il min-height. Va compresso esplicitamente,
   altrimenti lo stato "shrink" resta più alto di quello normale. */
body.sa-header-shrink .inside-header { min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
body.sa-header-shrink .site-header .site-logo img,
body.sa-header-shrink .site-header img.site-logo { height: 34px; max-width: 275px; }

@media (max-width: 768px) {
  body.sa-header-shrink .inside-header { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
  body.sa-header-shrink .site-header .site-logo img,
  body.sa-header-shrink .site-header img.site-logo { height: 30px; max-width: 245px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .inside-header,
  .site-header .site-logo img,
  .site-header img.site-logo { transition: none; }
}

/* Footer mobile: il padding 0/32/32/32/0 di .footer-widget-1..5 è pensato per
   la griglia a 5 colonne desktop. Il @media(max-width:600px) che impila le
   colonne in righe sta PRIMA nel file della dichiarazione unscoped
   ".footer-widget-1,...,5 { padding: 0 32px !important }" (riga ~3559): a
   parità di specificità e !important, in CSS vince la regola che appare DOPO
   nel sorgente — quindi quel padding desktop sopravvive anche da impilato e
   ogni colonna parte con un rientro sinistro diverso (0 / 32 / 32 / 32 / 32px).
   Questa regola, posizionata in fondo al file, vince per ordine di sorgente. */
@media (max-width: 600px) {
  .footer-widget-1, .footer-widget-2, .footer-widget-3, .footer-widget-4, .footer-widget-5 {
    padding: 0 !important;
  }
  .footer-widget-2, .footer-widget-3, .footer-widget-4, .footer-widget-5 {
    padding-top: 28px !important;
    margin-top: 28px !important;
  }
}

/* --- Fix: titoli e paragrafi di sezione (.sa-head) vanno a capo su desktop.
   Il contenitore .sa-head era limitato a 640px (pensato per testi brevi),
   ma titoli più lunghi superano quella larghezza (es. "Situazioni reali,
   soluzione concreta" richiede 688px, "Falsi miti sullo spray al peperoncino"
   700px) e i paragrafi descrittivi (es. "Compatto, discreto, immediatamente
   accessibile..." 876px, "Scelti da +12.000 clienti..." 771px) la superano
   ancora di più, wrappando su 2-3 righe inutilmente dato che il container
   di sezione ha fino a 1132px disponibili. Si allarga il contenitore a
   960px e si forza nowrap sia su h2 che sul paragrafo da tablet/desktop. --- */
@media (min-width: 769px) {
  .sa-home .sa-head { max-width: 960px !important; }
  .sa-home .sa-head .wp-block-heading { white-space: nowrap !important; }
  .sa-home .sa-head .wp-block-paragraph { max-width: 960px !important; }
}

/* ============================================================
   HERO BAND CATEGORIE — BluNavy (PIANO-categorie-ottimali.md §2)
   Scoping: solo archivi categoria prodotto (body.tax-product_cat),
   MAI globale. Colori scritti in chiaro (no var() per i testi): i token
   --sa-on-dark-muted/--sa-azure ecc. sono ridefiniti più volte nel file
   (token-shim, vedi PIANO-bande-header-blunavy.md §0) e il valore
   effettivo non era quello atteso — qui si fissano valori espliciti per
   eliminare l'ambiguità.
   overflow-x: clip (non hidden): contiene la banda full-bleed .sa-cathero
   senza rompere position:sticky dell'header (hidden promuove l'antenato a
   scroll container, clip no — vedi PIANO-header-sticky-logo-shrink.md §1.1).
   ============================================================ */
body.tax-product_cat { overflow-x: clip; }

/* La banda è un <div> PHP, non un blocco Gutenberg alignfull: per uscire dal
   padding dell'area contenuto serve il trucco width:100vw + margini negativi.
   Il gap bianco sopra la banda è il padding-top di QUALCHE wrapper
   GeneratePress/WooCommerce a monte (nome esatto non verificabile senza
   accesso live al DOM): invece di indovinare la classe, si azzera il
   padding/margin verticale di OGNI antenato reale della hero con il
   selettore universale *:has() — non ha effetti collaterali su altre
   pagine perché scoped a body.tax-product_cat E a ":has(.sa-cathero)"
   (matcha solo quando quell'antenato contiene davvero la banda). */
body.tax-product_cat *:has(> .sa-cathero),
body.tax-product_cat *:has(> * > .sa-cathero),
body.tax-product_cat *:has(> * > * > .sa-cathero),
body.woocommerce-shop *:has(> .sa-cathero),
body.woocommerce-shop *:has(> * > .sa-cathero),
body.woocommerce-shop *:has(> * > * > .sa-cathero) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Causa reale verificata via DOM live: #main.site-main ha margin-top:20px e
   margin-bottom:20px (GeneratePress), 5 livelli sopra la hero — fuori dalla
   portata del :has() qui sopra (limitato a 3 livelli). Fix diretto. */
body.tax-product_cat #main.site-main,
body.woocommerce-shop #main.site-main {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Home: striscia bianca tra il marquee e la hero navy.
   CAUSA REALE (verificata via DOM live con Playwright): wpautop inietta dei
   <p> VUOTI nel contenuto della pagina (29 in totale). Il primo è figlio diretto
   di .entry-content e porta il margine di paragrafo di default (~25.5px). Essendo
   article/.inside-article/.entry-content senza padding/bordo, quel margine
   collassa verso l'alto fino a #primary (flex-item = BFC) e appare come ~26px di
   vuoto SOPRA #main — per questo azzerare i margini di #main/.sa-home/.entry-content
   non lo chiudeva (nessuno di loro era l'elemento col margine). Riappare a ogni
   ri-salvataggio/redeploy della pagina perché wpautop ricrea i <p> vuoti.
   Fix duraturo: nascondere i paragrafi vuoti nel contenuto della home. */
body.home .entry-content p:empty { display: none !important; }

/* Home: le regole core dei blocchi (wp-block-library) NON vengono caricate qui —
   i blocchi sono resi via pattern/do_blocks fuori da the_content() e con
   "separate core block assets" attivo WP non stampa lo stylesheet. Verificato
   via DOM live (Playwright): nessun <link> block-library né in home né in
   categoria. Mancano due comportamenti core, quindi li replichiamo qui (questo
   style.css è sempre accodato):
   1) .wp-block-columns su desktop = flex-wrap:nowrap (senza, le colonne vanno a
      capo: immagine SOPRA a FAQ/Falsi-miti invece che a fianco);
   2) .is-content-justification-center = justify-content:center (senza, il
      pulsante "Trova il tuo spray" nella banda marchi resta a sinistra). */
@media (min-width: 782px) {
  .sa-home .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: nowrap; }
}
.sa-home .wp-block-buttons.is-content-justification-center { justify-content: center; }
body.tax-product_cat .sa-cathero,
body.woocommerce-shop .sa-cathero {
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw);
  background-color: #0B2A5B;
  background-size: cover;
  background-position: center;
  padding: 40px 24px 32px;
  box-sizing: border-box;
}
body.tax-product_cat .sa-cathero--grad,
body.woocommerce-shop .sa-cathero--grad { background-image: linear-gradient(135deg,#0B2A5B 0%,#1B6DFF 55%,#5AB8FF 100%); }
body.tax-product_cat .sa-cathero__in,
body.woocommerce-shop .sa-cathero__in { max-width: 1180px; margin: 0 auto; }
body.tax-product_cat .sa-cathero__crumb,
body.woocommerce-shop .sa-cathero__crumb {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-bottom: 12px;
}
body.tax-product_cat .sa-cathero__crumb a,
body.woocommerce-shop .sa-cathero__crumb a { color: rgba(255,255,255,.65) !important; text-decoration: none; }
body.tax-product_cat .sa-cathero__crumb a:hover,
body.woocommerce-shop .sa-cathero__crumb a:hover { color: #fff !important; text-decoration: underline; }
body.tax-product_cat .sa-cathero__eyebrow,
body.woocommerce-shop .sa-cathero__eyebrow {
  color: #5AB8FF;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 8px;
}
body.tax-product_cat .sa-cathero__h1,
body.woocommerce-shop .sa-cathero__h1 {
  color: #fff;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.15;
  margin: 0 0 10px;
}
body.tax-product_cat .sa-cathero__sub,
body.woocommerce-shop .sa-cathero__sub {
  color: #E8EFFF;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 18px;
  max-width: 640px;
}
body.tax-product_cat .sa-cathero__chips,
body.woocommerce-shop .sa-cathero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.tax-product_cat .sa-cathero__chip,
body.woocommerce-shop .sa-cathero__chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 768px) {
  body.tax-product_cat .sa-cathero,
  body.woocommerce-shop .sa-cathero { padding: 28px 20px 24px; }
  body.tax-product_cat .sa-cathero__h1,
  body.woocommerce-shop .sa-cathero__h1 { font-size: 24px; }
  body.tax-product_cat .sa-cathero__sub,
  body.woocommerce-shop .sa-cathero__sub { font-size: 14.5px; }
}

/* ── Quick chooser (blocco -top, parte alta snella) ────────────────────── */
body.tax-product_cat .sa-cat-chooser {
  background: var(--sa-bg2);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  padding: 14px 18px;
  margin: 4px 0 0;
}
body.tax-product_cat .sa-cat-chooser p { margin: 0; font-size: 14.5px; color: var(--sa-ink); }
body.tax-product_cat .sa-cat-chooser a { color: #1B6DFF; font-weight: 700; text-decoration: none; }
body.tax-product_cat .sa-cat-chooser a:hover { text-decoration: underline; }

/* ── Trust strip (blocco -bottom): banda full-bleed navy, come la hero ──── */
body.tax-product_cat .sa-cat-trust,
body.woocommerce-shop .sa-cat-trust {
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw) 32px;
  background: #0B2A5B;
  padding: 4px 24px;
  box-sizing: border-box;
}
body.tax-product_cat .sa-cat-trust .wp-block-columns,
body.tax-product_cat .sa-cat-trust.wp-block-columns,
body.woocommerce-shop .sa-cat-trust .wp-block-columns,
body.woocommerce-shop .sa-cat-trust.wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  max-width: 1180px;
  margin: 0 auto !important;
}
body.tax-product_cat .sa-cat-trust .wp-block-column,
body.woocommerce-shop .sa-cat-trust .wp-block-column {
  flex: 1 1 0 !important;
  text-align: center;
  padding: 16px 10px;
  border-right: 1px solid rgba(255,255,255,.18);
  font-weight: 700;
  font-size: 13.5px;
  color: #fff !important;
}
body.tax-product_cat .sa-cat-trust .wp-block-column p,
body.woocommerce-shop .sa-cat-trust .wp-block-column p { color: #fff !important; margin: 0; }
body.tax-product_cat .sa-cat-trust .wp-block-column:last-child,
body.woocommerce-shop .sa-cat-trust .wp-block-column:last-child { border-right: 0; }
@media (max-width: 640px) {
  body.tax-product_cat .sa-cat-trust .wp-block-columns,
  body.tax-product_cat .sa-cat-trust.wp-block-columns,
  body.woocommerce-shop .sa-cat-trust .wp-block-columns,
  body.woocommerce-shop .sa-cat-trust.wp-block-columns { flex-wrap: wrap !important; }
  body.tax-product_cat .sa-cat-trust .wp-block-column,
  body.woocommerce-shop .sa-cat-trust .wp-block-column {
    flex: 1 1 50% !important;
    border-right: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.18);
    font-size: 12.5px;
    padding: 12px 8px;
  }
  body.tax-product_cat .sa-cat-trust .wp-block-column:nth-child(2n),
  body.woocommerce-shop .sa-cat-trust .wp-block-column:nth-child(2n) { border-right: 0; }
}

/* ── Tabella comparativa modelli (blocco -bottom) — stessa identica struttura
   di .sa-cmp-table in home (collapse, solo linee orizzontali, niente zebra),
   ma con bordo+ombra più marcati perché qui lo sfondo pagina è bianco e non
   c'è una sezione grigia dietro a dare contrasto. */
body.tax-product_cat .sa-seo-block .wp-block-table,
body.woocommerce-shop .sa-seo-block .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}
body.tax-product_cat .sa-seo-block table,
body.woocommerce-shop .sa-seo-block table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--sa-card);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  overflow: hidden;
  min-width: 520px;
  box-shadow: 0 1px 2px rgba(11,42,91,.05), 0 6px 14px rgba(11,42,91,.07);
}
body.tax-product_cat .sa-seo-block table th,
body.tax-product_cat .sa-seo-block table td,
body.woocommerce-shop .sa-seo-block table th,
body.woocommerce-shop .sa-seo-block table td {
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--sa-line);
  text-align: center;
  color: var(--sa-ink-2);
}
body.tax-product_cat .sa-seo-block table th:first-child,
body.tax-product_cat .sa-seo-block table td:first-child,
body.woocommerce-shop .sa-seo-block table th:first-child,
body.woocommerce-shop .sa-seo-block table td:first-child { text-align: left; }
body.tax-product_cat .sa-seo-block table td:first-child,
body.tax-product_cat .sa-seo-block table td:first-child a,
body.woocommerce-shop .sa-seo-block table td:first-child,
body.woocommerce-shop .sa-seo-block table td:first-child a {
  color: var(--sa-navy) !important;
  font-weight: 700;
  text-decoration: none;
}
body.tax-product_cat .sa-seo-block table td:first-child a:hover,
body.woocommerce-shop .sa-seo-block table td:first-child a:hover { color: var(--sa-blue); }
body.tax-product_cat .sa-seo-block table thead th,
body.woocommerce-shop .sa-seo-block table thead th {
  background: var(--sa-navy);
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  border-bottom: none;
}
body.tax-product_cat .sa-seo-block table tbody tr:last-child td,
body.woocommerce-shop .sa-seo-block table tbody tr:last-child td { border-bottom: 0; }
body.tax-product_cat .sa-seo-block table tbody tr:hover,
body.woocommerce-shop .sa-seo-block table tbody tr:hover { background: var(--sa-bg2); }
@media (max-width: 480px) {
  body.tax-product_cat .sa-seo-block table th,
  body.tax-product_cat .sa-seo-block table td,
  body.woocommerce-shop .sa-seo-block table th,
  body.woocommerce-shop .sa-seo-block table td { padding: 10px 12px; font-size: 12px; }
}

/* ── FAQ con immagine laterale (blocco -bottom) — stile home .sa-faq-wrap ── */
body.tax-product_cat .sa-faq-wrap.wp-block-columns,
body.woocommerce-shop .sa-faq-wrap.wp-block-columns { display: flex !important; gap: 32px; align-items: flex-start; }
body.tax-product_cat .sa-faq-wrap .sa-faq-img-col,
body.woocommerce-shop .sa-faq-wrap .sa-faq-img-col { flex: 0 0 36% !important; position: sticky; top: 100px; }
body.tax-product_cat .sa-faq-wrap .sa-faq-list-col,
body.woocommerce-shop .sa-faq-wrap .sa-faq-list-col { flex: 1 1 64% !important; }
body.tax-product_cat .sa-faq-wrap .sa-faq-img-col img,
body.woocommerce-shop .sa-faq-wrap .sa-faq-img-col img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--sa-r-lg);
  box-shadow: var(--sa-sh-2);
  display: block;
}
body.tax-product_cat .sa-faq-wrap .sa-faq,
body.woocommerce-shop .sa-faq-wrap .sa-faq { max-width: none; }
@media (max-width: 768px) {
  body.tax-product_cat .sa-faq-wrap.wp-block-columns,
  body.woocommerce-shop .sa-faq-wrap.wp-block-columns { flex-direction: column !important; }
  body.tax-product_cat .sa-faq-wrap .sa-faq-img-col,
  body.tax-product_cat .sa-faq-wrap .sa-faq-list-col,
  body.woocommerce-shop .sa-faq-wrap .sa-faq-img-col,
  body.woocommerce-shop .sa-faq-wrap .sa-faq-list-col { flex: 1 1 100% !important; width: 100%; position: static; }
  body.tax-product_cat .sa-faq-wrap .sa-faq-img-col img,
  body.woocommerce-shop .sa-faq-wrap .sa-faq-img-col img { aspect-ratio: 16/9; }
}

/* ── Banda finale (legalità + CTA quiz) — full-bleed fino al footer, stesso
   trattamento della Banda 1 in home (.sa-home .sa-final): non una card
   contenuta, ma una banda a piena larghezza appoggiata al footer. ──────── */
body.tax-product_cat .sa-seo-block .sa-final,
body.woocommerce-shop .sa-seo-block .sa-final {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 40px calc(50% - 50vw) 0 !important;
  border-radius: 0 !important;
  padding: 70px 24px;
  box-shadow: none !important;
}
/* Centratura esplicita: NON fidarsi della classe core "has-text-align-center"
   (LiteSpeed "Remove Unused CSS" può rimuovere wp-block-library dal bundle
   servito, vedi nota a inizio file) — qui il centramento è una proprietà
   nostra, indipendente da quel CSS esterno. */
body.tax-product_cat .sa-seo-block .sa-final,
body.tax-product_cat .sa-seo-block .sa-final .wp-block-heading,
body.tax-product_cat .sa-seo-block .sa-final p,
body.tax-product_cat .sa-seo-block .sa-final .sa-final__legal,
body.woocommerce-shop .sa-seo-block .sa-final,
body.woocommerce-shop .sa-seo-block .sa-final .wp-block-heading,
body.woocommerce-shop .sa-seo-block .sa-final p,
body.woocommerce-shop .sa-seo-block .sa-final .sa-final__legal {
  text-align: center !important;
}
body.tax-product_cat .sa-seo-block .sa-final .wp-block-buttons,
body.woocommerce-shop .sa-seo-block .sa-final .wp-block-buttons { justify-content: center !important; }
body.tax-product_cat .sa-seo-block .sa-final .wp-block-heading,
body.woocommerce-shop .sa-seo-block .sa-final .wp-block-heading { font-size: clamp(28px, 4vw, 42px); }
body.tax-product_cat .sa-seo-block .sa-final .sa-final__legal,
body.woocommerce-shop .sa-seo-block .sa-final .sa-final__legal {
  color: var(--sa-on-dark-2, #E8EFFF) !important;
  font-size: 13.5px;
  /* BUG verificato via DOM live: "margin:18px 0 0" azzerava i margini
     orizzontali auto che il base .sa-final p { max-width:46ch; margin:0
     auto 30px } usa per centrare il blocco (più stretto del contenitore) —
     risultato: testo "centrato" dentro un box che però è incollato a
     sinistra. "auto" mantiene la centratura del box. */
  margin: 18px auto 0 !important;
  opacity: .9;
}
/* La banda è l'ultimo elemento del blocco -bottom: azzera lo spazio sotto
   di lei (su tutti i possibili wrapper a monte, vedi nota sul gap sopra la
   hero) così tocca il footer esattamente come in home. */
body.tax-product_cat .sa-seo-block:has(.sa-final),
body.woocommerce-shop .sa-seo-block:has(.sa-final) { padding-bottom: 0 !important; margin-bottom: 0 !important; }
body.tax-product_cat *:has(> .sa-seo-block .sa-final),
body.tax-product_cat *:has(> * > .sa-seo-block .sa-final),
body.tax-product_cat *:has(> * > * > .sa-seo-block .sa-final),
body.woocommerce-shop *:has(> .sa-seo-block .sa-final),
body.woocommerce-shop *:has(> * > .sa-seo-block .sa-final),
body.woocommerce-shop *:has(> * > * > .sa-seo-block .sa-final) {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 640px) {
  body.tax-product_cat .sa-seo-block .sa-final,
  body.woocommerce-shop .sa-seo-block .sa-final { padding: 44px 20px; }
}

/* ── Griglia 6 categorie a beneficio (solo negozio-bottom, PIANO-negozio-restyle.md §4.3) ── */
body.woocommerce-shop .sa-shop-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 28px 0 36px;
}
body.woocommerce-shop .sa-shop-cats__card {
  background: var(--sa-card);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  padding: 16px;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
body.woocommerce-shop .sa-shop-cats__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sa-sh-2);
}
body.woocommerce-shop .sa-shop-cats__card .wp-block-image {
  margin: 0 0 12px;
  aspect-ratio: 4/3;
  border-radius: var(--sa-r-md);
  overflow: hidden;
  background: var(--sa-bg2);
}
body.woocommerce-shop .sa-shop-cats__card .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.woocommerce-shop .sa-shop-cats__card .wp-block-heading {
  font-size: 17px;
  margin: 0 0 4px;
}
body.woocommerce-shop .sa-shop-cats__card .wp-block-heading a {
  color: var(--sa-navy);
  text-decoration: none;
}
body.woocommerce-shop .sa-shop-cats__card .wp-block-heading a:hover { color: var(--sa-blue); }
body.woocommerce-shop .sa-shop-cats__card p {
  font-size: 13.5px;
  color: var(--sa-muted);
  margin: 0;
}
@media (max-width: 900px) {
  body.woocommerce-shop .sa-shop-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  body.woocommerce-shop .sa-shop-cats { grid-template-columns: 1fr; }
}

/* ── Box Legalità/Qualità/Garanzia (solo negozio-bottom) ───────────────────── */
body.woocommerce-shop .sa-shop-legal {
  background: var(--sa-card);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-lg);
  padding: 28px 26px;
  margin: 32px 0;
}
body.woocommerce-shop .sa-shop-legal .wp-block-heading { margin: 0 0 14px; }
body.woocommerce-shop .sa-shop-legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.woocommerce-shop .sa-shop-legal li {
  padding: 9px 0;
  border-top: 1px solid var(--sa-line);
  color: var(--sa-ink-2);
  font-size: 14.5px;
}
body.woocommerce-shop .sa-shop-legal li:first-child { border-top: 0; }

/* =========================================================
   BLOG ARTICOLO — layout "categoria-like" (hero band + quiz CTA,
   tabelle navy, FAQ, immagini prodotto laterali stile bioluma)
   Vedi functions.php: sa_blog_render_hero / sa_blog_render_final_cta.
   ========================================================= */

/* Evita lo scroll orizzontale dato dal full-bleed 100vw (clip a livello viewport,
   non su #content: lì taglierebbe la banda invece di lasciarla uscire). */
body.single-post { overflow-x: clip; }

/* Header nativo (titolo/data/autore) nascosto: il vero H1 è nella hero band. */
body.single-post .entry-header { display: none; }
/* La hero band parte a filo sotto header/marquee, come sulle categorie:
   azzera OGNI spazio verticale in cima ai wrapper del contenuto (il layout
   full-width-content elimina il contenitore, questi !important tolgono il
   residuo che lasciava la striscia bianca ricorrente sopra la banda). */
body.single-post .site-content,
body.single-post .content-area,
body.single-post .site-main,
body.single-post article.post,
body.single-post .inside-article {
  padding: 0 !important; margin-top: 0 !important;
}
/* Corpo articolo alla STESSA larghezza standard del sito (1180px, come .sa-seo-block
   e le sezioni home). Stesso schema di .sa-cathero__in: centra il box 1180 PRIMA,
   poi applica 24px di padding interno per il testo — con l'ambiente azzerato dal
   belt sopra, il box e il testo risultano allineati px-per-px con la hero band,
   qualunque sia la larghezza reale del container GeneratePress. */
body.single-post .entry-content { max-width: 1180px; margin-left: auto; margin-right: auto; padding: 0 24px; box-sizing: border-box; }
@media (max-width: 600px) { body.single-post .entry-content { padding: 0 18px; } }

/* ── Hero band articolo (riusa .sa-cathero, scope single-post) ──
   IMPORTANTE per l'allineamento: il padding orizzontale sta sull'elemento
   INTERNO (.sa-cathero__in), applicato DOPO la centratura, non sull'elemento
   100vw esterno. Se il padding stesse sull'esterno, la centratura del box
   1180 avverrebbe su (viewport - 2*padding) invece che sulla viewport piena,
   producendo un offset diverso da quello di .entry-content (che si centra
   nel container ambiente senza sottrarre alcun padding prima) — è la causa
   verificata del disallineamento hero/corpo. Con il padding spostato qui,
   entrambi i box da 1180px si centrano allo stesso modo qualunque sia la
   larghezza del container ambiente, e restano sempre allineati. */
body.single-post .sa-cathero {
  width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw);
  background-color: #0B2A5B; background-size: cover; background-position: center;
  padding: 44px 0 38px; box-sizing: border-box;
}
body.single-post .sa-cathero--grad {
  background-image: linear-gradient(135deg,#0B2A5B 0%,#1B6DFF 55%,#5AB8FF 100%);
}
body.single-post .sa-cathero__in { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
body.single-post .sa-cathero__crumb { font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: 12px; }
body.single-post .sa-cathero__crumb a { color: rgba(255,255,255,.65) !important; text-decoration: none; }
body.single-post .sa-cathero__crumb a:hover { color: #fff !important; text-decoration: underline; }
body.single-post .sa-cathero__eyebrow {
  color: #5AB8FF; font-weight: 700; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; margin: 0 0 8px;
}
body.single-post .sa-cathero__h1 { color: #fff; font-size: clamp(27px,4.4vw,40px); line-height: 1.14; margin: 0 0 14px; }
body.single-post .sa-arthero__intro p { color: #E8EFFF; font-size: 16.5px; line-height: 1.6; margin: 0 0 12px; max-width: none; }
body.single-post .sa-arthero__intro p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  body.single-post .sa-cathero { padding: 26px 0 24px; }
  body.single-post .sa-cathero__in { padding: 0 18px; }
  body.single-post .sa-cathero__h1 { font-size: 24px; }
  body.single-post .sa-arthero__intro p { font-size: 15px; }
}

/* ── Tabelle stile navy (come le categorie) nel corpo articolo ── */
body.single-post .entry-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px 0; }
body.single-post .entry-content .wp-block-table table {
  width: 100%; border-collapse: collapse; font-size: 14px; background: var(--sa-card);
  border: 1px solid var(--sa-line); border-radius: var(--sa-r-lg); overflow: hidden;
}
body.single-post .entry-content .wp-block-table th,
body.single-post .entry-content .wp-block-table td {
  padding: 14px 16px; border: 0; border-bottom: 1px solid var(--sa-line);
  text-align: center; color: var(--sa-ink-2);
}
body.single-post .entry-content .wp-block-table th:first-child,
body.single-post .entry-content .wp-block-table td:first-child { text-align: left; }
body.single-post .entry-content .wp-block-table td:first-child,
body.single-post .entry-content .wp-block-table td:first-child a {
  color: var(--sa-navy) !important; font-weight: 700; text-decoration: none;
}
body.single-post .entry-content .wp-block-table td:first-child a:hover { color: var(--sa-blue) !important; }
body.single-post .entry-content .wp-block-table thead th {
  background: var(--sa-navy); color: #fff !important; font-weight: 700; font-size: 13px;
  letter-spacing: .02em; border-bottom: none;
}
body.single-post .entry-content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
body.single-post .entry-content .wp-block-table tbody tr:hover { background: var(--sa-bg-2); }
@media (max-width: 600px) {
  body.single-post .entry-content .wp-block-table th,
  body.single-post .entry-content .wp-block-table td { padding: 10px 12px; font-size: 12px; }
}

/* ── Immagini prodotto piccole, flottanti ai lati (stile bioluma) ── */
.sa-artprod {
  float: right; width: 232px; max-width: 42%; margin: 6px 0 20px 28px;
  background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-r-lg);
  box-shadow: var(--sa-sh-1); padding: 16px; text-align: center;
  transition: transform .3s var(--sa-ease), box-shadow .3s var(--sa-ease);
}
.sa-artprod--left { float: left; margin: 6px 28px 20px 0; }
.sa-artprod img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; display: block; }
.sa-artprod__name { display: block; font-weight: 700; color: var(--sa-navy); font-size: 15px; line-height: 1.25; margin-top: 12px; text-decoration: none; }
.sa-artprod__name:hover { color: var(--sa-blue); }
.sa-artprod__meta { display: block; color: var(--sa-muted); font-size: 13px; margin-top: 5px; }
.sa-artprod__cta { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--sa-blue); text-decoration: none; }
.sa-artprod__cta:hover { text-decoration: underline; }
/* Immagine "in azione" flottante (stessa idea, senza card) */
.sa-artfig {
  width: 300px; max-width: 46%; border-radius: var(--sa-r-lg); overflow: hidden; box-shadow: var(--sa-sh-1);
  transition: transform .3s var(--sa-ease), box-shadow .3s var(--sa-ease);
}
.sa-artfig.alignright, .sa-artfig--right { float: right; margin: 6px 0 18px 28px; }
.sa-artfig.alignleft,  .sa-artfig--left  { float: left;  margin: 6px 28px 18px 0; }
.sa-artfig img { width: 100%; height: auto; display: block; }
/* Variante più grande: immagine di apertura del corpo (di norma la stessa
   featured/OG duplicata più piccola, dx o sx), tetto 600px come da richiesta,
   qui a 460px per lasciare respiro al testo che ci scorre a fianco. */
.sa-artfig--lg { width: 460px; max-width: 48%; }
@media (max-width: 900px) { .sa-artfig--lg { width: 340px; max-width: 44%; } }
/* Didascalia curata: corsivo, centrata, separata dalla foto da un filo sottile
   invece che appoggiata di netto sul bordo immagine (stile editoriale bioluma). */
.sa-artfig figcaption {
  font-size: 13px; font-style: italic; color: var(--sa-muted); text-align: center;
  padding: 10px 14px 12px; border-top: 1px solid var(--sa-line); background: var(--sa-card);
}
/* Hover solo su dispositivi con puntatore preciso (desktop): niente sticky-hover
   su mobile/touch, dove il tocco lascerebbe lo stato "sollevato" attivo. */
@media (hover: hover) and (pointer: fine) {
  .sa-artprod:hover, .sa-artfig:hover { transform: translateY(-4px); box-shadow: var(--sa-sh-2); }
}
@media (max-width: 600px) {
  /* Stessa impostazione del desktop (immagine sopra, testo sotto, centrato),
     solo più stretta: niente più riga orizzontale con miniatura piccola. */
  .sa-artprod, .sa-artprod--left { float: none; width: 260px; max-width: 78%; margin: 20px auto; }
  .sa-artprod img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
  /* !important: il core WP/GeneratePress stila .alignright/.alignleft con
     selettori più specifici (es. contesto .entry-content), che altrimenti
     batterebbero questa regola a parità di ordine sorgente. */
  .sa-artfig, .sa-artfig--left, .sa-artfig--right,
  .sa-artfig.alignleft, .sa-artfig.alignright {
    float: none !important; width: auto !important; max-width: none !important; margin: 18px 0 !important;
  }
}

/* Le sezioni (h2) ripartono sempre sotto un'immagine flottante. */
body.single-post .entry-content h2 { clear: both; }

/* ── Box evidenza (citazione/dato chiave a metà articolo) ──────────────────
   Un solo box per articolo, sul concetto più memorabile: barra colorata a sx,
   testo più grande, per dare un punto di sosta visivo come i "lo sapevi?" di
   bioluma, senza inventare un secondo linguaggio grafico (stessi token/colori
   del sito). */
.sa-callout {
  clear: both; margin: 32px 0; padding: 22px 26px; border-left: 4px solid var(--sa-blue);
  background: var(--sa-bg-2); border-radius: 0 var(--sa-r-md) var(--sa-r-md) 0;
}
.sa-callout p {
  margin: 0; font-size: 18px; line-height: 1.5; color: var(--sa-navy); font-weight: 600;
}
@media (max-width: 600px) { .sa-callout { padding: 18px 20px; } .sa-callout p { font-size: 16px; } }

/* ── Reveal allo scroll sugli elementi dell'articolo (riusa .sa-rv del tema,
   niente nuova libreria: stesso IntersectionObserver di home.js). ── */
body.single-post .entry-content .sa-rv { transition-duration: .6s; }

/* ── Indice automatico (TOC) — nativo, senza plugin ──────────────────────────
   Markup iniettato da sa_blog_add_toc() (the_content filter): due colonne su
   desktop (indice sticky a sx + contenuto), impilate su mobile con l'indice
   dentro un <details> nativo apribile/richiudibile (nessun JS). */
body.single-post .sa-artbody { display: flex; align-items: flex-start; gap: 40px; }
body.single-post .sa-artbody__content { flex: 1 1 auto; min-width: 0; }
body.single-post .sa-toc-col { flex: 0 0 260px; position: sticky; top: 96px; }
body.single-post .sa-toc {
  background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-r-lg);
  box-shadow: var(--sa-sh-1); padding: 18px 20px;
}
body.single-post .sa-toc__title {
  display: block; font-weight: 700; font-size: 15px; color: var(--sa-navy);
  margin: 0 0 10px; list-style: none;
  pointer-events: none; /* su desktop l'indice resta sempre aperto: il summary non è cliccabile */
}
body.single-post .sa-toc__title::-webkit-details-marker { display: none; }
body.single-post .sa-toc__title::after { content: ""; } /* niente icona su desktop */
body.single-post .sa-toc__list { list-style: none; counter-reset: sa-toc; margin: 0; padding: 0; }
body.single-post .sa-toc__list li {
  counter-increment: sa-toc; margin: 0 0 9px; padding-left: 22px; position: relative;
  font-size: 13.5px; line-height: 1.4;
}
body.single-post .sa-toc__list li::before {
  content: counter(sa-toc); position: absolute; left: 0; top: 0; color: var(--sa-blue); font-weight: 700; font-size: 12.5px;
}
body.single-post .sa-toc__list li:last-child { margin-bottom: 0; }
body.single-post .sa-toc__list a { color: var(--sa-ink-2); text-decoration: none; }
body.single-post .sa-toc__list a:hover { color: var(--sa-blue); text-decoration: underline; }
/* Scroll con margine sotto l'header sticky quando si clicca un link dell'indice. */
body.single-post .entry-content h2[id] { scroll-margin-top: 96px; }

@media (max-width: 960px) {
  body.single-post .sa-artbody { flex-direction: column; gap: 22px; }
  body.single-post .sa-toc-col { position: static; flex: 1 1 auto; width: 100%; }
  body.single-post .sa-toc__title { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
  body.single-post .sa-toc__title::after { content: "+"; color: var(--sa-blue); font-size: 18px; font-weight: 700; }
  body.single-post .sa-toc[open] .sa-toc__title::after { content: "\2212"; }
}

/* ── FAQ articolo: riusa lo stile globale .sa-faq, larghezza piena ── */
body.single-post .entry-content .sa-faq { max-width: none; margin-top: 8px; }

/* ── Banda CTA quiz full-bleed prima del footer (riusa .sa-final) ── */
body.single-post .sa-artfinal {
  width: 100vw !important; max-width: 100vw !important;
  margin: 48px calc(50% - 50vw) 0 !important; border-radius: 0 !important;
  padding: 64px 24px !important; box-shadow: none !important;
  background-size: cover !important; background-position: center !important;
}
body.single-post .sa-artfinal .sa-final__legal {
  color: var(--sa-on-dark-2,#E8EFFF) !important; font-size: 13.5px; max-width: 60ch; margin: 18px auto 0 !important;
}
/* Bottone CTA centrato (non fidarsi del layout core: LiteSpeed può rimuovere
   wp-block-library, che centra .wp-block-buttons via is-content-justification-center). */
body.single-post .sa-artfinal .wp-block-buttons { display: flex !important; justify-content: center !important; }
body.single-post .sa-artfinal .wp-block-heading,
body.single-post .sa-artfinal p { text-align: center !important; }
/* Azzera lo spazio sotto la banda, così tocca il footer come sulle categorie. */
body.single-post .inside-article { padding-bottom: 0; }
body.single-post .entry-content { margin-bottom: 0; }
/* [Fix 2026-07-28] La striscia bianca prima del footer restava perché il belt qui sopra
   azzerava solo padding e margin-TOP, non il margin-BOTTOM dei wrapper a monte.
   Stesso identico pattern già collaudato su categorie/negozio (vedi .sa-seo-block:has
   (.sa-final) sopra): si azzera lo spazio sotto su TUTTI i possibili antenati della
   banda, così tocca il footer come negli altri template. */
body.single-post article.post,
body.single-post .site-main,
body.single-post .content-area,
body.single-post .site-content,
body.single-post *:has(> .sa-artfinal),
body.single-post *:has(> * > .sa-artfinal),
body.single-post *:has(> * > * > .sa-artfinal) {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* [Fix 2026-07-28 rev2] Featured image sotto la banda hero: NON arrivava al bordo destro
   del testo (sembrava "tagliata"). Causa: sul SINGOLO GeneratePress non usa `.post-image`
   (quello è il loop/archivio) ma `generate_featured_page_header_area('page-header-image-
   single')` → `<div class="featured-image page-header-image-single grid-container grid-parent">`.
   È `.grid-container` a vincolare la larghezza, e l'<img> restava alla sua dimensione
   naturale (1000px) allineata a sinistra: da qui il vuoto a destra.
   Fix: si azzera il cap di grid-container e si allinea il box a `.entry-content`
   (1180 + padding 24), con l'immagine a tutta larghezza e altezza automatica (nessun crop). */
body.single-post .featured-image,
body.single-post .page-header-image-single,
body.single-post .post-image {
  max-width: 1180px !important;
  width: auto !important;
  margin: 22px auto 4px !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  float: none !important;
}
body.single-post .featured-image img,
body.single-post .page-header-image-single img,
body.single-post .post-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 16px;
}
@media (max-width: 600px) {
  body.single-post .featured-image,
  body.single-post .page-header-image-single,
  body.single-post .post-image { padding: 0 18px !important; }
}
@media (max-width: 600px) {
  body.single-post .sa-artfinal { padding: 44px 20px !important; }
}

/* =========================================================
   BANDA RECENSIONI PRODOTTO — due colonne (override template
   woocommerce/single-product-reviews.php). Sinistra: riepilogo
   + form (sticky su desktop); destra: lista card più recenti
   in alto, reveal progressivo via .sa-rvw-hide + bottone.
   ========================================================= */
.woocommerce div.product .sa-reviews .sa-rvw {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-areas: "head list" "form list";
  gap: 10px 44px;
  align-items: start;
}
.sa-rvw .sa-rvw-head        { grid-area: head; min-width: 0; }
.sa-rvw #review_form_wrapper{ grid-area: form; min-width: 0; position: sticky; top: 96px; }
.sa-rvw .sa-rvw-listwrap    { grid-area: list; min-width: 0; }
.sa-rvw .woocommerce-verification-required { grid-area: form; }

/* Stato zero recensioni: colonna singola centrata */
.woocommerce div.product .sa-reviews .sa-rvw.sa-rvw--empty {
  grid-template-columns: minmax(0, 640px);
  grid-template-areas: "head" "form";
  justify-content: center;
}
.sa-rvw--empty #review_form_wrapper { position: static; }

.sa-rvw .woocommerce-Reviews-title { margin: 0 0 6px !important; }
.sa-rvw-empty { color: var(--sa-muted); font-size: 15px; margin: 4px 0 0; }

/* Riepilogo: media + stelle + istogramma */
.sa-rvw-avg      { display: flex; align-items: center; gap: 14px; margin: 8px 0 16px; }
.sa-rvw-avg-num  { font-size: 46px; font-weight: 900; color: var(--sa-navy); line-height: 1; letter-spacing: -0.02em; }
.sa-rvw-avg-info { display: flex; flex-direction: column; gap: 4px; }
.sa-rvw-count    { color: var(--sa-muted); font-size: 14px; }
.sa-rvw-bars     { display: grid; gap: 7px; margin-bottom: 6px; }
.sa-rvw-bar      { display: grid; grid-template-columns: 36px 1fr 26px; align-items: center; gap: 10px; font-size: 13px; color: var(--sa-muted); }
.sa-rvw-bar > span:last-child { text-align: right; }
.sa-rvw-bar-track{ display: block; height: 8px; border-radius: 999px; background: var(--sa-bg-3); overflow: hidden; }
.sa-rvw-bar-fill { display: block; height: 100%; border-radius: 999px; background: #F59E0B; }

/* Stelle (overlay: robusto ovunque, niente font/icone extra) */
.sa-rvw-stars { position: relative; display: inline-block; font-size: 18px; line-height: 1; letter-spacing: 2px; }
.sa-rvw-stars::before { content: "★★★★★"; color: var(--sa-line-2); }
.sa-rvw-stars > span  { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; }
.sa-rvw-stars > span::before { content: "★★★★★"; color: #F59E0B; }

/* Lista card */
.sa-rvw ol.sa-rvw-list { list-style: none; margin: 0; padding: 0; }
.sa-rvw-card {
  background: var(--sa-card);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  padding: 18px 20px;
  margin: 0 0 14px !important;
}
.sa-rvw-card.sa-rvw-hide { display: none; }
.sa-rvw-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sa-rvw-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--sa-bg-3); color: var(--sa-navy); font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.sa-rvw-who      { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sa-rvw-author   { color: var(--sa-ink); font-size: 15px; line-height: 1.3; }
.sa-rvw-verified { color: #15803D; font-size: 12.5px; font-weight: 600; }
.sa-rvw-date     { margin-left: auto; flex: none; color: var(--sa-muted); font-size: 13px; }
.sa-rvw-card .sa-rvw-stars { font-size: 15px; margin-bottom: 8px; }
.sa-rvw-text     { color: var(--sa-ink-2); font-size: 15px; line-height: 1.6; }
.sa-rvw-text p   { margin: 0 0 10px; }
.sa-rvw-text p:last-child { margin-bottom: 0; }
.sa-rvw-reply {
  margin-top: 12px; padding: 12px 14px;
  background: var(--sa-bg-2); border-left: 3px solid var(--sa-blue); border-radius: 8px;
}
.sa-rvw-reply > strong { display: block; font-size: 13.5px; color: var(--sa-navy); margin-bottom: 4px; }

/* Bottone "Leggi le altre" */
.sa-rvw-more {
  display: block; width: 100%; margin-top: 4px; padding: 12px 18px;
  background: transparent; border: 1.5px solid var(--sa-blue); border-radius: 10px;
  color: var(--sa-blue); font-weight: 700; font-size: 15px; font-family: inherit;
  cursor: pointer; transition: background .15s, color .15s;
}
.sa-rvw-more:hover { background: var(--sa-blue); color: #fff; }

/* Il form dentro la colonna: card bianca coerente con le card recensioni.
   !important perché la vecchia regola #review_form #respond viene annullata
   da un reset più specifico a valle (visibile anche nel layout precedente). */
.sa-rvw #review_form #respond {
  background:    var(--sa-card) !important;
  border:        1px solid var(--sa-line) !important;
  border-radius: var(--sa-r-lg);
  padding:       22px 24px !important;
  margin-top:    10px;
}
.sa-rvw .comment-reply-title { display: block; font-size: 17px; font-weight: 800; color: var(--sa-navy); margin-bottom: 12px; }

@media (max-width: 900px) {
  .woocommerce div.product .sa-reviews .sa-rvw {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "list" "form"; /* prima leggi, poi scrivi */
    gap: 6px;
  }
  .sa-rvw #review_form_wrapper { position: static; }
  .sa-rvw-date { font-size: 12px; }
}

/* ============================================================
   HOME — full-bleed senza unità vw (fix "scrollbar che balla")
   Il trucco GeneratePress .alignfull (width:100vw + margin calc(50% - 50vw))
   dipende dalla scrollbar: Chromium risolve i vw col viewport senza scrollbar
   al primo layout e li corregge (1265→1280) solo in un reflow tardivo → a fine
   caricamento tutte le bande si allargano di 15px, le immagini portrait si
   accorciano (~7px a banda) e la pagina perde ~30px di altezza ("si allunga
   poi si riaccorcia"). In home il template è full-width-content: entry-content
   occupa già tutta la larghezza visibile, quindi il full-bleed non ha bisogno
   dei vw — width:100% è identico ma stabile, e non infila più i bordi delle
   bande sotto la scrollbar (prima: 7.5px tagliati per lato). */
.sa-home .alignfull {
  width:        100% !important;
  max-width:    100% !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   HERO CARD — restyle "vetro + accento azzurro" (2026-07-29)
   Sostituisce la vecchia card: prima badge e testo stavano su due
   griglie diverse (17px vs 23px dal bordo) perché il badge era in
   position:absolute con offset proprio mentre il testo ereditava i
   margini dei blocchi Gutenberg → disallineamento visibile.
   Ora: media in cima, corpo con UN solo padding (24px) da cui tutto
   si allinea, badge in una riga assoluta con lo stesso rientro.
   Le regole stanno DOPO quelle storiche (righe ~2792 e ~4217) così
   vincono senza !important sparsi.
   ============================================================ */
.sa-home .sa-hero-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--sa-r-xl);
  background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.04) 55%, rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 2px 6px rgba(3,12,30,.30), 0 24px 60px rgba(3,12,30,.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sa-home .sa-hero-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 70px rgba(27,109,255,.28);
}
/* l'alone rosso/blu della vecchia card non serve più: lo fa la media */
.sa-home .sa-hero-card::after { content: none; }

/* ---- MEDIA ---- */
/* il fondo replica quello dell'immagine sorgente (navy scuro): con object-fit
   contain le fasce laterali/sopra restano invisibili invece di disegnare un
   rettangolo più chiaro sulla card */
.sa-home .sa-hero-card .sa-hero-card-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(165deg, #0F2B58, #0B1F42 70%);
}
/* alone azzurro SOPRA la foto: l'immagine ha già un fondo scuro suo, quindi
   un gradiente sotto non si vedrebbe. In mix-blend-mode:screen si fonde col
   nero senza disegnare un rettangolo visibile sulla card. */
.sa-home .sa-hero-card .sa-hero-card-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(58% 52% at 50% 48%, rgba(90,184,255,.30), rgba(27,109,255,.12) 52%, transparent 76%);
  mix-blend-mode: screen;
}
/* contain, NON cover: la foto sorgente ha i 3 spray che toccano quasi i bordi —
   con cover venivano decapitati appena la card si accorcia (sul live è 556px,
   non 640px come in preview). Il fondo scuro dell'immagine combacia con quello
   della card, quindi contain non lascia bande visibili. */
.sa-home .sa-hero-card .sa-hero-card-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* riflesso in alto + raccordo verso il corpo (niente stacco netto) */
.sa-home .sa-hero-card .sa-hero-card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(0deg, rgba(6,20,45,.75), transparent 22%);
}

/* ---- BADGE ---- */
.sa-home .sa-hero-card .sa-hc-badges {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
/* vetro, non pieno: la CTA arancione resta l'unico punto caldo della card */
.sa-home .sa-hero-card .sa-hc-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(9,26,56,.55);
  border: 1px solid rgba(90,184,255,.45);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  color: #CFE4FF;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(3,12,30,.35);
  animation: none;
}
.sa-home .sa-hero-card .sa-hc-save {
  background: rgba(16,185,129,.16);
  border: 1px solid rgba(16,185,129,.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #5ee9a8;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 6px 11px;
  border-radius: 999px;
}

/* ---- CORPO: un solo padding, tutto allineato ---- */
.sa-home .sa-hero-card .sa-hc-body {
  position: relative;
  z-index: 2;
  padding: 22px 24px 24px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(6,20,45,.30), rgba(6,20,45,.55));
}
.sa-home .sa-hero-card .sa-hc-eyebrow {
  margin: 0 0 5px;
  color: #9FC2F0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sa-home .sa-hero-card .sa-hc-title {
  margin: 0 0 12px;
  color: #fff;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.sa-home .sa-hero-card .sa-hc-priceline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.sa-home .sa-hero-card .sa-hc-price {
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
}
.sa-home .sa-hero-card .sa-hc-old {
  color: #8FA6C8;
  font-size: 15px;
  font-weight: 600;
  text-decoration: line-through;
}
/* CTA: <a> nudo, non un blocco bottone GP → serve color esplicito
   (GeneratePress colora ogni button, vedi memoria gp-button-color) */
.sa-home .sa-hero-card .sa-hc-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 15px 20px;
  background: var(--sa-grad-cta);
  color: #fff !important;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: var(--sa-r-md);
  box-shadow: var(--sa-sh-cta);
  transition: transform .25s var(--sa-ease), box-shadow .25s var(--sa-ease), filter .25s;
}
.sa-home .sa-hero-card .sa-hc-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 34px rgba(255,106,61,.42);
}
.sa-home .sa-hero-card .sa-hc-cta .arw { transition: transform .25s var(--sa-ease); }
.sa-home .sa-hero-card .sa-hc-cta:hover .arw { transform: translateX(4px); }
.sa-home .sa-hero-card .sa-hc-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 13px 0 0;
  color: #9FC2F0;
  font-size: 12.5px;
  font-weight: 600;
}
.sa-home .sa-hero-card .sa-hc-note span { display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 900px) {
  .sa-home .sa-hero-card .sa-hc-body { padding: 20px 20px 22px; }
  .sa-home .sa-hero-card .sa-hc-badges { top: 15px; left: 15px; right: 15px; }
  .sa-home .sa-hero-card .sa-hc-price { font-size: 29px; }
  .sa-home .sa-hero-card .sa-hc-note { gap: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-home .sa-hero-card,
  .sa-home .sa-hero-card .sa-hc-cta,
  .sa-home .sa-hero-card .sa-hc-cta .arw { transition: none; }
  .sa-home .sa-hero-card:hover { transform: none; }
}

/* ============================================================
   HERO — COLONNA TESTO restyle (2026-07-29)
   Problema risolto:
   1) DISALLINEAMENTO. La riga specs (2,5% / 3m / <=20ml) era un
      wp:columns annidato: ereditava padding-right:26px + margin-right:26px
      per colonna (regola ~2788) e partiva a left:95px mentre titolo,
      lead e bottoni partivano a left:24px. 71px di rientro a video.
      Ora e' una <ul.sa-ht-specs> in grid: stessa origine di tutti.
   2) BORDO DESTRO FRASTAGLIATO. Il lead aveva max-width:42ch (430px)
      contro i 594px degli altri blocchi. Ora tutta la colonna condivide
      una sola misura di riga (--ht-measure).
   3) ALTEZZA CARD. La parita' con la card "piu' venduto" era casuale
      (dipendeva da quale colonna fosse la piu' alta). Ora e' esplicita:
      grid align-items:stretch + la card che riempie la sua traccia.
   Le regole stanno in FONDO al file, quindi vincono sulle storiche
   (~2787, ~4244, ~5083) per ordine, senza !important sparsi.
   ============================================================ */

/* min-width:0 sulla colonna: e' un grid item, e di default la traccia non
   scende sotto la min-content del contenuto. Senza questo, un figlio che non
   puo' andare a capo (la trust row con white-space:nowrap) allarga la traccia
   oltre il contenitore e su mobile la colonna sborda a destra. */
.sa-home .sa-hero-text {
  --ht-measure: 52ch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

/* tutti i figli diretti condividono una sola origine e una sola misura:
   niente piu' bordi destri disallineati */
.sa-home .sa-hero-text > * {
  margin-left: 0;
  margin-right: 0;
  max-width: var(--ht-measure);
  width: 100%;
}

/* ---- EYEBROW ---- */
.sa-home .sa-hero .sa-ht-eyebrow {
  margin: 0 0 14px;
  color: var(--sa-azure);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* ---- TITOLO ---- */
/* text-wrap:balance toglierebbe il controllo sul punto di a capo: qui il
   <br> e' voluto (un concetto per riga), quindi balance va spento.
   Il titolo esce dalla misura del corpo testo (--ht-measure, tarata sulla
   leggibilita' del paragrafo): serve tutta la colonna, altrimenti la prima
   riga va a capo da sola e lascia "legale," orfano. */
.sa-home .sa-hero .sa-ht-title {
  margin: 0 0 18px;
  max-width: none;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: initial;
}
.sa-home .sa-hero .sa-ht-title em.hi {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}

/* ---- LEAD ---- */
.sa-home .sa-hero .sa-ht-lead,
.sa-home .sa-hero .sa-ht-lead.has-text-color {
  margin: 0 0 26px;
  max-width: var(--ht-measure);
  font-size: 17.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---- BOTTONI ---- */
.sa-home .sa-hero .sa-ht-cta {
  margin: 0 0 32px;
  max-width: none;
  gap: 12px;
  row-gap: 12px;
}

/* ---- SPECS: griglia, stessa origine del resto ----
   Come il titolo, escono da --ht-measure: sono dati a colpo d'occhio, non
   testo da leggere a righe. Piena colonna = filetto di separazione lungo
   quanto il titolo e tre celle larghe uguali. */
.sa-home .sa-hero .sa-ht-specs {
  list-style: none;
  margin: 0;
  max-width: none;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
/* il numero occupa sempre la stessa banda in alto: se una didascalia va su
   due righe (es. "Capsaicina OC massima" stretto) i numeri restano comunque
   allineati fra loro, invece di sfalsarsi cella per cella */
.sa-home .sa-hero .sa-ht-specs li {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 3px;
  align-content: start;
  text-align: left;
}
.sa-home .sa-hero .sa-ht-specs li::before,
.sa-home .sa-hero .sa-ht-specs li::marker { content: none; }
.sa-home .sa-hero .sa-ht-specs strong {
  color: #fff;
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.sa-home .sa-hero .sa-ht-specs span {
  color: var(--sa-on-dark-2);
  font-size: 12.5px;
  line-height: 1.35;
  opacity: .85;
}

/* ---- TRUST ROW ---- */
/* separatore come pseudo-elemento: niente entita' HTML nel testo, e su
   mobile gli item vanno a capo puliti senza il puntino orfano a inizio riga */
.sa-home .sa-hero .sa-ht-trust {
  margin: 20px 0 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  color: var(--sa-on-dark-2);
  font-size: 13.5px;
  font-weight: 600;
  opacity: .9;
}
/* ogni voce non si spezza al suo interno: se lo spazio manca va a capo
   l'intera voce, mai "Reso gratuito / 14 giorni".
   min-width:0 e' obbligatorio: senza, il nowrap alza la min-content width
   della colonna e su mobile (griglia 1fr) la traccia diventa piu' larga del
   contenitore -> tutta la colonna testo sborda a destra. */
.sa-home .sa-hero .sa-ht-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
/* Separatore come pseudo-elemento DOPO ogni voce tranne l'ultima, dentro il
   flusso flex della riga (non dentro lo span): cosi' e' un item a se' e il
   flex-wrap puo' lasciarlo a fine riga invece di portarlo a capo davanti alla
   voce successiva. Niente pallino orfano a inizio riga quando si va a capo. */
.sa-home .sa-hero .sa-ht-trust span:not(:last-child)::after {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin-left: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

/* ============================================================
   DESKTOP: colonne pari E contenuti allineati
   Due problemi distinti, risolti separatamente:
   (a) ALLINEAMENTO. Con justify-content:center (regola storica ~5086) le
       colonne avevano la stessa altezza di scatola ma il testo restava
       rientrato ~71px sopra e sotto rispetto ai bordi della card: a video
       leggeva "non allineati", perche' l'occhio confronta la prima riga di
       testo col bordo della card, non i limiti invisibili della colonna.
       Ora il testo parte in cima -> prima riga a filo del bordo card.
   (b) ALTEZZE. La card era alta 652px (foto 4/3 = 403 + corpo 248) contro
       ~508px di testo: la differenza non era un bug di allineamento, era la
       card piu' alta. Si accorcia la FOTO (ratio piu' panoramico), non si
       stira il testo: spingere le specs a fondo colonna con margin-top:auto
       apriva un buco vuoto di ~140px in mezzo al testo, peggio di prima.
   ============================================================ */
@media (min-width: 769px) {
  .sa-home .sa-hero-grid.wp-block-columns,
  .sa-home .sa-hero .wp-block-columns.sa-hero-grid {
    align-items: stretch;
  }
  .sa-home .sa-hero-grid > .wp-block-column.sa-hero-text {
    justify-content: flex-start;
  }
  /* Il testo ha meno contenuto della card (~538px contro 652): la differenza
     non si accumula in fondo ma si distribuisce come respiro fra i blocchi,
     cosi' il testo arriva quasi a filo del bordo basso senza buchi visibili.
     Valori tarati sul desktop; il mobile usa i suoi (blocco @max-width:768px). */
  .sa-home .sa-hero .sa-ht-eyebrow { margin-bottom: 18px; }
  .sa-home .sa-hero .sa-ht-title { margin-bottom: 26px; }
  .sa-home .sa-hero .sa-ht-lead { margin-bottom: 40px; }
  .sa-home .sa-hero .sa-ht-cta { margin-bottom: 48px; }
  .sa-home .sa-hero .sa-ht-specs { padding-top: 34px; }
  .sa-home .sa-hero .sa-ht-specs li { gap: 5px; }
  .sa-home .sa-hero .sa-ht-trust { margin-top: 30px; }
  .sa-home .sa-hero-grid > .wp-block-column.d1 {
    display: flex;
    flex-direction: column;
  }
  .sa-home .sa-hero-grid > .wp-block-column.d1 .sa-hero-card {
    flex: 1 1 auto;
    height: 100%;
  }
  /* Il pannello foto tiene il RATIO DELL'IMMAGINE (1200x896 = ~4/3).
     Con 16/10 il pannello era piu' largo dell'immagine: object-fit:contain
     rimpiccioliva la foto fino a farla stare in altezza, lasciando bande
     morte ai lati e le bombolette piccole in mezzo (segnalato 2026-07-29).
     4/3 e' il ratio reale (1.3333 vs 1.3393: 2px di scarto a questa
     larghezza), quindi l'immagine riempie il pannello esatto. */
  .sa-home .sa-hero-card .sa-hero-card-photo {
    flex: 0 0 auto;
    aspect-ratio: 4/3;
    min-height: 0;
  }
  /* Se la griglia stira la card oltre la sua altezza naturale, l'eccesso lo
     assorbe il CORPO (non la foto, che deve restare in ratio): il blocco
     prezzo/CTA resta unito perche' la CTA e' ancorata in fondo. */
  .sa-home .sa-hero-card .sa-hc-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .sa-home .sa-hero-card .sa-hc-cta { margin-top: auto; }
}

/* ============================================================
   TABLET / MOBILE
   ============================================================ */
/* 769-992px: la griglia e' ancora a 2 colonne (collassa a 768px, regola ~3175)
   ma lo spazio e' stretto: la misura di lettura cede il passo alla colonna e
   i micro-testi si stringono, cosi' la trust row resta su UNA riga e non
   lascia il pallino orfano a capo. */
@media (max-width: 992px) {
  .sa-home .sa-hero-text { --ht-measure: 100%; }
  .sa-home .sa-hero .sa-ht-lead { font-size: 16.5px; }
  .sa-home .sa-hero .sa-ht-specs { gap: 12px; }
  .sa-home .sa-hero .sa-ht-specs span { font-size: 11.5px; }
  .sa-home .sa-hero .sa-ht-trust { font-size: 12.5px; gap: 6px 12px; }
}

/* La regola che nascondeva la 2a voce di trust fra 769 e 880px non serve piu':
   le voci sono passate da 3 a 2 (spedizione/reso sono ora solo nella card, per
   togliere la ripetizione) e ci stanno. Nascondendone una restava per giunta il
   separatore orfano della voce superstite.
   In questa fascia stretta le due voci restano comunque larghe: si accorcia il
   tipo quel tanto che basta a tenerle su una riga sola. */
@media (min-width: 769px) and (max-width: 900px) {
  .sa-home .sa-hero .sa-ht-trust { font-size: 11.5px; gap: 5px 10px; }
}

@media (max-width: 768px) {
  .sa-home .sa-hero-grid > .wp-block-column.d1 .sa-hero-card { height: auto; }
}

@media (max-width: 768px) {
  .sa-home .sa-hero-text {
    --ht-measure: 100%;
    align-items: stretch;
    text-align: left;
  }
  /* 8.2vw teneva 30px fissi sotto i 366px e il titolo andava a 4 righe su
     iPhone SE/mini: con 7.6vw e minimo 26px resta su 3 righe fino a 320px */
  .sa-home .sa-hero .sa-ht-title {
    font-size: clamp(26px, 7.6vw, 40px);
    margin-bottom: 14px;
  }
  /* su schermo stretto il <br> del desktop spezzerebbe male: si lascia
     scorrere il testo naturalmente */
  .sa-home .sa-hero .sa-ht-title br { display: none; }
  .sa-home .sa-hero .sa-ht-lead { font-size: 16px; margin-bottom: 22px; }

  /* CTA a piena larghezza: pollice, non mira */
  .sa-home .sa-hero .sa-ht-cta { margin-bottom: 26px; gap: 10px; }
  .sa-home .sa-hero .sa-ht-cta .wp-block-button { width: 100%; margin: 0; }
  .sa-home .sa-hero .sa-ht-cta .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* 3 colonne restano leggibili fino a 360px: si stringe il tipo, non si
     va a capo (una riga sola = colpo d'occhio sui numeri chiave) */
  .sa-home .sa-hero .sa-ht-specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 18px;
  }
  .sa-home .sa-hero .sa-ht-specs strong { font-size: clamp(17px, 5vw, 21px); }
  .sa-home .sa-hero .sa-ht-specs span { font-size: 11px; line-height: 1.25; }

  /* su mobile le 3 voci non ci stanno su una riga: si lasciano andare a capo
     (il pallino segue la voce, quindi niente separatore orfano a inizio riga)
     e si consente lo spezzamento interno come ultima risorsa a 320px */
  .sa-home .sa-hero .sa-ht-trust { font-size: 12.5px; gap: 6px 12px; margin-top: 18px; }
  .sa-home .sa-hero .sa-ht-trust span { white-space: normal; }
}

/* ---- override storici da neutralizzare ----
   La vecchia riga specs era .sa-specs-row (wp:columns): quelle regole
   restano nel file per altre pagine, ma nella home non deve piu' esistere
   il rientro di 26px se il markup vecchio tornasse per un redeploy. */
.sa-home .sa-hero .sa-specs-row .wp-block-column {
  padding-right: 0;
  margin-right: 0;
}

/* ============================================================
   HERO CARD — immagine e titolo cliccabili (2026-07-29)
   L'immagine era l'elemento piu' grande della card ma l'unico
   punto cliccabile era la CTA: chi ci clicca sopra (comportamento
   naturale su una scheda prodotto) non otteneva niente.
   Il link sull'immagine e' aria-hidden + tabindex=-1: porta alla
   STESSA pagina della CTA, quindi per screen reader e tastiera
   sarebbe solo un doppione da saltare. Titolo e CTA restano i
   percorsi accessibili, con il nome prodotto come etichetta.
   ============================================================ */
.sa-home .sa-hero-card .sa-hc-photolink {
  display: block;
  width: 100%;
  height: 100%;
  /* la foto e' figlia diretta: senza questo il link si dimensiona
     sul contenuto inline e resta una striscia cliccabile bassa */
  line-height: 0;
}
.sa-home .sa-hero-card .sa-hc-photolink img {
  transition: transform .45s var(--sa-ease);
}
/* zoom lieve: segnala che l'area e' interattiva senza spostare il
   layout (overflow:hidden sul pannello taglia l'eccedenza) */
.sa-home .sa-hero-card .sa-hc-photolink:hover img,
.sa-home .sa-hero-card:hover .sa-hc-photolink img {
  transform: scale(1.04);
}

/* titolo cliccabile: eredita il colore del tema, non quello dei link GP */
.sa-home .sa-hero-card .sa-hc-title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--sa-ease);
}
.sa-home .sa-hero-card .sa-hc-title a:hover,
.sa-home .sa-hero-card .sa-hc-title a:focus-visible {
  color: var(--sa-azure);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* focus visibile per la navigazione da tastiera (il link immagine non e'
   focusabile, quindi il primo stop utile e' il titolo) */
.sa-home .sa-hero-card .sa-hc-title a:focus-visible {
  outline: 2px solid var(--sa-azure);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .sa-home .sa-hero-card .sa-hc-photolink img { transition: none; }
  .sa-home .sa-hero-card .sa-hc-photolink:hover img,
  .sa-home .sa-hero-card:hover .sa-hc-photolink img { transform: none; }
}

/* ── DA APPENDERE A blunavy/style.css (e BUMPARE la versione in wp_enqueue_style) ──
   Shortcode [sa_video]: video self-hosted. Nessun JS, nessun overlay custom —
   il pulsante play e' quello nativo del browser (uno solo, zero peso).
   aspect-ratio dichiarato => nessun layout shift al caricamento del poster. */

.sa-video {
  margin: 2.2rem 0;
  padding: 0;
}

.sa-video__el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #0B2A5B;
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(11, 42, 91, .18);
  object-fit: cover;
}

.sa-video__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.2rem;
  margin-top: .7rem;
  font-size: .92rem;
  line-height: 1.45;
  color: #5B6B82;
}

.sa-video__yt {
  flex: none;
  color: #1B6DFF;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.sa-video__yt::before {
  content: "▶";
  margin-right: .35em;
  font-size: .85em;
}
.sa-video__yt:hover,
.sa-video__yt:focus { text-decoration: underline; }

@media (max-width: 768px) {
  .sa-video { margin: 1.6rem 0; }
  .sa-video__el { border-radius: 10px; }
}

/* =========================================================
   BARRA LEGALE FOOTER — dati societari + link obbligatori
   (art. 2250 c.c. / art. 7 D.Lgs. 70/2003)
   ========================================================= */
.sa-legalbar {
  background: var(--sa-navy);
  border-top: 1px solid rgba(255,255,255,.10);
  color: var(--sa-on-dark-muted);
}
.sa-legalbar__in {
  max-width: 1200px;
  margin: 0 auto;
  /* padding-bottom generoso: il FAB del quiz e' fisso in basso a destra
     (~70px di ingombro) e coprirebbe i link legali a fine pagina */
  padding: 20px 28px 84px;
  text-align: center;
}
.sa-legalbar p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--sa-on-dark-muted);
}
.sa-legalbar__link {
  margin: 8px 0 6px;
  font-size: 12.5px;
  line-height: 1.9;
}
.sa-legalbar__link a {
  color: var(--sa-on-dark-muted);
  text-decoration: none;
}
.sa-legalbar__link a:hover,
.sa-legalbar__link a:focus { color: #fff; text-decoration: underline; }
.sa-legalbar__link span {
  margin: 0 10px;
  opacity: .45;
}
.sa-legalbar__cr { opacity: .75; }

@media (max-width: 768px) {
  .sa-legalbar__in { padding: 18px 20px 88px; }
  .sa-legalbar p,
  .sa-legalbar__link { font-size: 12px; }
  .sa-legalbar__link span { margin: 0 6px; }
}


/* =========================================================
   RECENSIONI — stelle reali + badge di verifica  (2026-08-24)
   ========================================================= */
/* riga stelle nelle card .sa-prod: compare solo se ci sono recensioni vere */
.sa-prod .rate        { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sa-prod .rate .rate-n { color: var(--sa-muted); font-size: 12px; font-weight: 600; letter-spacing: 0; }
/* informativa di verifica sotto il titolo "Recensioni" */
.sa-rvw-policy { margin: 2px 0 0 !important; color: var(--sa-muted); font-size: 13px; line-height: 1.45; }


/* =========================================================
   CARD PRODOTTO WOO — stelle uniformi e card allineate  (2026-08-24)
   Nelle card del loop (correlati, negozio, categorie) le stelle compaiono
   solo sui prodotti recensiti: senza correttivo, titolo/prezzo/bottone
   finivano ad altezze diverse nella stessa riga.
   NB: nel markup Woo il prezzo NON è figlio della card ma del link
   .woocommerce-LoopProduct-link, quindi l'ancoraggio va fatto lì dentro.
   ========================================================= */
.woocommerce ul.products li.product {
  display:        flex !important;
  flex-direction: column;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
  display:        flex !important;
  flex-direction: column;
  flex:           1 1 auto;   /* il link riempie la card ... */
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link .price {
  margin-top: auto !important; /* ... e il prezzo si incolla in fondo */
}
.woocommerce ul.products li.product .star-rating {
  float:       none !important;
  margin:      0 auto 8px !important;
  color:       var(--sa-orange);
  font-size:   13px !important;
  line-height: 1;
}
.woocommerce ul.products li.product .button { flex: none; }

/* banda upsell "Scopri anche" ([sa_line]): stesse stelle delle altre card,
   e card in flex così il prezzo resta allineato anche senza stelle */
a.sa-pb-color { display: flex !important; flex-direction: column; height: 100%; }
a.sa-pb-color .sa-pb-color-rate,
a.sa-pb-color .sa-pb-color-rate span {   /* .sa-pb-color span forza il navy: serve il figlio */
  display:     block;
  color:       var(--sa-orange);
  font-size:   13px;
  line-height: 1;
}
a.sa-pb-color .sa-pb-color-rate { margin: 0 0 6px; }
a.sa-pb-color .sa-pb-color-price { margin-top: auto !important; }
.sa-pb-colors-grid { align-items: stretch; }

/* =========================================================
   COUNTDOWN URGENZA — motore unico server-side (inc/urgency.php)
   Stesse cifre nei riquadri .tick gia' usate dalla topbar, ma ora
   condivise dai tre slot: microbar, riga sotto il prezzo, pill della
   banda CTA. Un solo valore, aggiornato allo stesso secondo.
   ========================================================= */
.sa-cd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sa-cd .tick {
  display:      inline-block;
  background:   rgba(0,0,0,.25);
  border-radius: 5px;
  padding:      2px 6px;
  min-width:    26px;
  text-align:   center;
  font-weight:  800;
  font-style:   normal;
}
/* Su fondo chiaro (sotto il prezzo, banda CTA) il riquadro scuro va reso
   in navy pieno: rgba(0,0,0,.25) su bianco diventa un grigio slavato. */
.sa-deliver .sa-cd .tick,
.sa-pb-cta-pill .sa-cd .tick { background: var(--sa-navy); color: #fff; }

/* La riga sotto il prezzo non ha piu' l'icona separata: l'emoji e' nel testo. */
.sa-deliver > span { display: inline; }

@media (max-width: 640px) {
  .sa-cd .tick { padding: 1px 4px; min-width: 22px; }
}

/* =========================================================
   PROGRESSO SPEDIZIONE GRATUITA (.sa-freeship)
   Carrello + mini-cart drawer. Soglia letta da WooCommerce
   (inc/freeship.php), mai scritta a mano nel markup.
   ========================================================= */
.sa-freeship[data-state="off"] { display: none; }

.sa-freeship {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--sa-bg2, #F4F8FE);
  border: 1px solid var(--sa-line, #E2EAF4);
  border-radius: 12px;
}

.sa-freeship__msg {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sa-ink, #0F172A);
}
.sa-freeship__msg strong { color: var(--sa-navy, #0B2A5B); }
.sa-freeship__msg .woocommerce-Price-amount { white-space: nowrap; }

.sa-freeship__bar {
  height: 8px;
  border-radius: 99px;
  background: #DCE7F6;
  overflow: hidden;
}
.sa-freeship__bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sa-azure, #5AB8FF), var(--sa-blue, #1B6DFF));
  transition: width .35s ease;
}
.sa-freeship[data-state="done"] .sa-freeship__bar > span {
  background: linear-gradient(90deg, #34C77B, #17A45C);
}

.sa-freeship__hint { margin-top: 14px; }
.sa-freeship__hint-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-muted, #5B6B82);
}

.sa-freeship__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--sa-line, #E2EAF4);
  border-radius: 10px;
}
.sa-freeship__card img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
  border-radius: 6px;
}
.sa-freeship__info { min-width: 0; flex: 1 1 auto; }
.sa-freeship__name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sa-navy, #0B2A5B);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-freeship__name:hover { text-decoration: underline; }
.sa-freeship__price {
  font-size: 13px;
  color: var(--sa-muted, #5B6B82);
}

/* GeneratePress colora ogni <button>/.button con il suo grigio e testo bianco:
   il colore va dichiarato esplicitamente o si finisce bianco su bianco. */
.sa-freeship__add,
.sa-freeship__add:visited {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--sa-cta, #FF6A3D);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.sa-freeship__add:hover,
.sa-freeship__add:focus { background: #E85A2E; color: #fff; }
.sa-freeship__add.loading { opacity: .6; pointer-events: none; }
.sa-freeship__add.added { display: none; }
/* WooCommerce inietta un "Visualizza carrello" dopo l'aggiunta AJAX:
   nel drawer è ridondante, il carrello è già lì sotto. */
.sa-freeship .added_to_cart { display: none; }

.sa-drawer__foot .sa-freeship { margin-bottom: 14px; }

@media (max-width: 480px) {
  .sa-freeship { padding: 12px; }
  .sa-freeship__card { flex-wrap: wrap; }
  .sa-freeship__add { width: 100%; text-align: center; }
}