@charset "UTF-8";
/* ============================================================
   FIORI GROUP THEME — main.scss
   ============================================================ */
/* ── Variabili ─────────────────────────────────────────── */
:root {
  --fiori-navy: #1a2b4a;
  --fiori-white: #ffffff;
  --fiori-form-bg: #f3f6ff;
  --fiori-light-gray: #f5f5f5;
  --fiori-dark-gray: #333333;
  --fiori-mid-gray: #888888;
  --fiori-accent: #e8a020;
  --fiori-radius: 4px;
  --fiori-transition: 0.25s ease;
  /* Typekit — Good Times */
  --wp--preset--font-family--good-times: "good-times", sans-serif;
}

/* ── Mixins ────────────────────────────────────────────── */
/* ============================================================
   FIORI GROUP THEME — main.scss
   ============================================================ */
/* ── Mixins Breakpoints ────────────────────────────────── */
/* ============================================================
   FIORI GROUP THEME — main.scss
   ============================================================ */
/* ── Reset base ────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Blur-up (LQIP) per le immagini di sfondo dei blocchi Cover ──
   Segnaposto minuscolo (24px, dimensione "fiori-lqip") e sfocato, dietro
   l'immagine reale: niente più spazio bianco/vuoto durante il caricamento.
   Generato in PHP da inc/template-helpers.php (render_block_core/cover),
   quindi presente su qualunque Cover del sito (hero, banner, card...).
   scale(1.15) nasconde il bordo sfocato che altrimenti spunterebbe fuori
   dai margini del contenitore (che ha comunque overflow:hidden di suo). */
.wp-block-cover .fiori-lqip {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  transform: scale(1.15);
}

/* ── Spacing preset compresso su mobile ───────────────────
   La scala --wp--preset--spacing--20..80 (0.44rem→5.06rem) è generata
   da WordPress (spacingScale a 7 step in theme.json) in rem fissi,
   senza alcuna riduzione automatica in base alla larghezza schermo:
   su mobile i tanti margini/padding/gap del sito impostati con questi
   preset (soprattutto i gradini più alti, pensati per il respiro fra
   sezioni su desktop) risultano sproporzionati. Ridefinire le stesse
   custom property solo sotto i 768px applica la riduzione in automatico
   a ogni blocco che le usa, senza doverlo correggere caso per caso. */
@media (max-width: 767.98px) {
  :root {
    --wp--preset--spacing--20: 0.375rem;
    --wp--preset--spacing--30: 0.5rem;
    --wp--preset--spacing--40: 0.625rem;
    --wp--preset--spacing--50: 0.875rem;
    --wp--preset--spacing--60: 1.125rem;
    --wp--preset--spacing--70: 1.5rem;
    --wp--preset--spacing--80: 2rem;
  }
}

/* ── Fade-in on scroll ─────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wp-site-blocks {
  overflow: hidden;
}

/* ── Banner Trio ───────────────────────────────────────── */
.banner-trio__item {
  overflow: hidden;
}

.banner-trio__cover {
  transition: transform var(--fiori-transition);
  cursor: pointer;
}

.banner-trio__cover:hover {
  transform: scale(1.02);
}

.banner-trio__label {
  position: relative;
  z-index: 2;
}

.banner-trio__grid {
  gap: 4px !important;
}
@media (max-width: 768px) {
  .banner-trio__grid {
    flex-direction: column;
  }
}

.is-style-text-subtitle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: var(--wp--preset--color--fiori-navy);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 10px;
  font-family: var(--wp--preset--font-family--roboto);
  font-size: clamp(14px, 0.875rem + (1vw - 3.2px) * 0.417, 18px);
}
.is-style-text-subtitle::after {
  content: "";
  display: block;
  width: 70px;
  height: 2px;
  margin: 0;
  margin-top: 2px;
  border-top: 2px solid;
}
.is-style-text-subtitle + .wp-block-heading {
  margin-top: 0;
}

/* ==========================================================================
   Swup Page Transitions
   ========================================================================== */
.transition-fade {
  transition: 0.4s ease-in-out;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

/* Durante la transizione, #swup (che contiene anche l'hero) si dissolve:
   sparendo l'immagine sotto la nav, il testo bianco del menu (pensato per
   stare sopra l'hero) diventa illeggibile su sfondo bianco. Diamo alla nav
   uno sfondo scuro solo per la durata dell'animazione. */
html.is-animating #main-bar {
  background-color: var(--fiori-navy, #1a2b4a) !important;
  transition: background-color 0.2s ease;
}

/* ── Indicatore di caricamento (barra in alto) ────────────── */
#swup-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--fiori-accent, #0056b3);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: width 0.2s ease, opacity 0.3s ease;
}

#swup-progress-bar.is-loading {
  opacity: 1;
  width: 70%;
  transition: width 3s cubic-bezier(0.1, 0.6, 0.4, 1), opacity 0.2s ease;
}

#swup-progress-bar.is-done {
  opacity: 1;
  width: 100%;
  transition: width 0.25s ease, opacity 0.3s ease;
}

/* ============================================================
   FIORI GROUP THEME — main.scss
   ============================================================ */
/* ── Topbar ────────────────────────────────────────────── */
.topbar {
  background-color: var(--fiori-navy);
  padding: 8px 0;
}

.topbar__inner {
  max-width: var(--wp--style--global--content-size);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 768px) {
  .topbar__inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

.topbar__claim {
  margin: 0;
  font-size: 13px;
  color: var(--fiori-white);
}

.topbar__nav a {
  color: var(--fiori-white);
  font-size: 13px;
  text-decoration: none;
  margin-left: 20px;
}

.topbar__nav a:hover {
  color: var(--fiori-accent);
}

/* ── Header ────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fiori-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.site-header__main {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
}

.site-header__nav a {
  color: var(--fiori-navy);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: color var(--fiori-transition);
}

.site-header__nav a:hover {
  color: var(--fiori-accent);
}

/* ── Sticky header scrolled ────────────────────────────── */
.site-header.is-scrolled {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.wp-block-site-logo img {
  /* Dimensione forzata (!important) per ignorare l'attributo "width" impostato
     sul singolo blocco Site Logo, che in alcune lingue (es. inglese) risultava
     diverso da quello italiano. Da md in su il logo è vincolato in ALTEZZA
     (non larghezza) per adattarsi sempre a #main-bar, che ora ha un'altezza
     fissa ($main-height in _variables.scss, da cui dipende anche il
     margin-top negativo dell'hero in _hero.scss): così qualsiasi larghezza
     il singolo blocco imposti, il logo si adatta e #main-bar resta sempre
     della stessa altezza in tutte le lingue, niente più righe bianche.
     Il valore di altezza sotto deve restare inferiore a $main-height. */
  width: 75px !important;
}
@media (min-width: 768px) {
  .wp-block-site-logo img {
    width: auto !important;
    height: 48px !important;
  }
}

.wpml-ls-dropdown {
  text-transform: uppercase;
}

#headerSpacer {
  /*	height:$topbar-height;*/
}
@media (max-width: 767.98px) {
  #headerSpacer {
    /* Altezza reale di #main-bar su mobile (logo 40.8px + 16px di
       padding sopra e sotto): 65px lasciava ~9px scoperti, sufficienti
       perché il contenuto sotto sbucasse leggermente da dietro
       l'header fisso. */
    height: 74px !important;
  }
}

#top-bar {
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  z-index: 3 !important;
  border: none !important;
  display: none;
}
@media (min-width: 768px) {
  #top-bar {
    display: flex;
    align-items: center;
  }
}
#top-bar {
  /* Forza l'override dei padding inline che potrebbero gonfiare la topbar */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#main-bar, #top-bar {
  /* Il padding orizzontale arriva inline dal blocco (preset di spaziatura
     "80", pensato per desktop) e non si riduce mai da solo sotto i 768px:
     su un telefono da 375px lascia solo ~213px utili per logo+hamburger.
     Qui lo forziamo a un valore ragionevole sotto md. */
}
@media (max-width: 767.98px) {
  #main-bar, #top-bar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (min-width: 768px) {
  #main-bar {
    /* Altezza fissa (come già fatto per #top-bar sopra): indipendente dal
       contenuto (logo, voci di menu), così #main-bar è sempre alto uguale
       a prescindere da lingua/traduzione, evitando le righe bianche sotto
       la nav quando il logo o le voci di menu cambiano dimensione.
       NIENTE overflow:hidden qui: i sottomenu (Azienda, Prodotti, ecc.)
       sono position:absolute e sporgono sotto questa barra, hidden li
       taglierebbe via. max-height da solo basta a fissare l'altezza. */
    height: 85px;
    min-height: 85px;
    max-height: 85px;
    box-sizing: border-box;
  }
}
#main-bar nav {
  /* Forza la dimensione dei font a ereditare dal contenitore principale per evitare discrepanze (es. prima voce più piccola) introdotte da classi come has-medium-font-size */
}
#main-bar nav .wp-block-navigation-item {
  font-size: inherit !important;
}
@media (max-width: 767.98px) {
  #main-bar nav {
    margin-left: auto;
  }
}
#main-bar {
  /* Il blocco Navigation ha "justifyContent:right" per allineare le voci a
     destra nella barra desktop: la stessa impostazione, nell'overlay
     mobile (lista verticale), diventava align-items:flex-end sia sul
     contenitore che avvolge la lista (.responsive-container-content) sia
     sulla lista stessa. Il primo fix aveva sistemato solo il secondo
     livello (il testo dentro ogni voce), ma non il contenitore più esterno:
     risultato, l'intero blocco di voci restava spinto verso destra/centro,
     con un grande vuoto a sinistra che sembrava "troppo padding". Sotto
     768px riportiamo tutto a sinistra, a piena larghezza. */
}
@media (max-width: 767.98px) {
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    align-items: flex-start !important;
    text-align: left !important;
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100% !important;
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100% !important;
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open {
    /* Voci con sottomenu (Azienda, Prodotti) espandibili invece di
       sempre tutte aperte insieme: gerarchia chiara, un tap sulla
       freccia per vedere le sotto-voci (vedi initMobileSubmenuAccordion
       in main.js), tap sul testo per navigare come sempre. */
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    display: none !important;
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.fiori-submenu-open > .wp-block-navigation__submenu-container {
    display: flex !important;
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
    /* La voce (li) contiene testo + freccia + sottomenu come 3
       figli diretti: senza specificare la direzione finivano
       impilati uno sotto l'altro invece che testo e freccia
       sulla stessa riga. Riga per testo+freccia, il sottomenu
       (100% di larghezza) va a capo sulla riga successiva. */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
    width: auto;
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon {
    /* WP nasconde questo pulsante di default nell'overlay
       mobile (si aspetta il sottomenu sempre aperto): lo
       forziamo visibile per renderlo davvero cliccabile. */
    display: flex !important;
    width: 40px;
    flex-shrink: 0;
    /* Allineata a destra (non centrata nel bottone) per
       combaciare con il bordo destro della X di chiusura. */
    justify-content: flex-end;
    align-items: center;
    /* Il bottone freccia è un <button>: il browser gli applica
       di default un rettangolo di outline arancione al focus
       da tastiera, diverso da qualunque altro stile del sito. */
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon:focus, #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon:focus-visible {
    outline: none;
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child .wp-block-navigation__submenu-icon svg {
    /* WP imposta aria-expanded="true" su queste voci già al
       caricamento (stato nativo per il dropdown desktop) e
       applica una propria regola che ruota la freccia in
       base a quell'attributo: nell'overlay mobile risultava
       quindi capovolta (verso l'alto) ancora prima di aprirla.
       Ignoriamo aria-expanded e pilotiamo la rotazione solo
       con la nostra classe .fiori-submenu-open. */
    width: 18px !important;
    height: 18px !important;
    transform: rotate(0deg) !important;
    transition: transform 0.2s ease;
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.fiori-submenu-open > .wp-block-navigation__submenu-icon svg {
    transform: rotate(180deg) !important;
  }
  #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    flex-basis: 100%;
    width: 100%;
  }
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1020;
}
.admin-bar #header {
  top: 46px;
}
@media (min-width: 768px) {
  #header {
    position: static;
  }
  .admin-bar #header {
    top: 0;
  }
}
@media (max-width: 767.98px) {
  #header > div {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
  }
}
#header > div {
  -webkit-transition: top 0.3s linear, background-color 0.3s linear;
  -moz-transition: top 0.3s linear, background-color 0.3s linear;
  -o-transition: top 0.3s linear, background-color 0.3s linear;
  transition: top 0.3s linear, background-color 0.3s linear;
  position: relative;
}
@media (min-width: 992px) {
  #header > div {
    padding-top: 50px;
  }
}
#header > div {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
  color: #fff;
}
#header > div:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  bottom: 0;
  opacity: 0;
  -webkit-box-shadow: 0px 6px 6px rgba(102, 102, 102, 0.1);
  -moz-box-shadow: 0px 6px 6px rgba(102, 102, 102, 0.1);
  box-shadow: 0px 6px 6px rgba(102, 102, 102, 0.1);
  transition: opacity 0.3s linear-in-out;
}
@media (max-width: 767.98px) {
  #header > div:after {
    display: none !important;
  }
}
#header.is_stuck {
  z-index: 1020;
}
#header.is_stuck #main-header {
  padding: 0 !important;
}
#header.is_stuck .logo-light {
  display: none !important;
}
#header.is_stuck .logo-dark {
  display: block !important;
}
#header.is_stuck #main-bar {
  background: var(--wp--preset--color--fiori-navy, #1a2b4a) !important;
  /* Rendi i link bianchi sul nuovo sfondo scuro */
}
#header.is_stuck #main-bar a, #header.is_stuck #main-bar .wp-block-navigation-item__content, #header.is_stuck #main-bar .wp-block-navigation-item__label {
  color: var(--wp--preset--color--fiori-white, #ffffff) !important;
}
#header.is_stuck #main-bar {
  /* Il pannello dei sottomenu (Prodotti, Azienda, ecc.) ha sempre
     sfondo bianco, anche da sticky: la regola sopra rendeva bianco
     anche il suo testo, diventando illeggibile (bianco su bianco).
     Qui lo forziamo sempre scuro, con selettore più specifico per
     vincere sulla regola generale qui sopra. */
}
#header.is_stuck #main-bar .wp-block-navigation__submenu-container a, #header.is_stuck #main-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__content, #header.is_stuck #main-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
  color: var(--wp--preset--color--fiori-navy, #1a2b4a) !important;
}
#header.is_stuck #main-bar {
  /* Stesso identico problema, ma sul menu overlay a schermo intero di
     mobile (anch'esso sempre a sfondo bianco): se si scrolla prima di
     aprire il panino, l'header è già ".is_stuck" e la regola generale
     sopra rendeva bianco anche il testo di questo pannello. */
}
#header.is_stuck #main-bar .wp-block-navigation__responsive-container.is-menu-open a, #header.is_stuck #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, #header.is_stuck #main-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
  color: var(--wp--preset--color--fiori-navy, #1a2b4a) !important;
}
#header.is_stuck {
  /* Inverti il colore del logo (da scuro a bianco) se e una singola immagine */
}
#header.is_stuck .logo-fiori img {
  filter: brightness(0) invert(1) !important;
}
#header.is_stuck > div {
  -webkit-transition: top 0.3s linear, background-color 0.3s linear;
  -moz-transition: top 0.3s linear, background-color 0.3s linear;
  -o-transition: top 0.3s linear, background-color 0.3s linear;
  transition: top 0.3s linear, background-color 0.3s linear;
  top: 0 !important;
}
#header.is_stuck:after {
  opacity: 1;
}
.header-appear #header.is_stuck {
  /*
  @include transition(top .3s linear);
  top: 0 !important;
  */
}
.header-appear #header.is_stuck > div {
  -webkit-transition: top 0.3s linear, background-color 0.3s linear;
  -moz-transition: top 0.3s linear, background-color 0.3s linear;
  -o-transition: top 0.3s linear, background-color 0.3s linear;
  transition: top 0.3s linear, background-color 0.3s linear;
  top: 50px !important;
}
.header-appear:not(.start) #header:not(.is_stuck) {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1020;
}
@media (min-width: 992px) {
  .header-appear:not(.start) #header:not(.is_stuck) .search-toggle svg {
    color: #212529 !important;
  }
  .header-appear:not(.start) #header:not(.is_stuck) > div {
    top: 0 !important;
    -webkit-transition: top 0s linear, background-color 0.3s linear;
    -moz-transition: top 0s linear, background-color 0.3s linear;
    -o-transition: top 0s linear, background-color 0.3s linear;
    transition: top 0s linear, background-color 0.3s linear;
  }
  .header-appear:not(.start) #header:not(.is_stuck) #main-header {
    background: transparent !important;
  }
  .header-appear:not(.start) #header:not(.is_stuck) .logo-light {
    display: none !important;
  }
  .header-appear:not(.start) #header:not(.is_stuck) .logo-dark {
    display: block !important;
  }
}
.header-appear:not(.start) #header:not(.is_stuck) {
  -webkit-transition-property: none !important;
  -moz-transition-property: none !important;
  -o-transition-property: none !important;
  transition-property: none !important;
}
.header-appear:not(.start) #header:not(.is_stuck):after {
  opacity: 1;
}
.header-appear:not(.start) #header:not(.is_stuck) + div {
  height: 135px;
}
.admin-bar.header-appear:not(.start) #header:not(.is_stuck) {
  top: 46px;
}
@media (min-width: 768px) {
  .admin-bar.header-appear:not(.start) #header:not(.is_stuck) {
    top: 32px;
  }
}

/* Override breakpoint hamburger menu Navigation block
 * WP core: display:none a 600px → noi vogliamo 768px
 * Mostra il bottone hamburger fino a 768px incluso
 */
@media (min-width: 600px) and (max-width: 767px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  #wpadminbar {
    position: fixed;
  }
}
/* Rimuove l'outline bianco da menu e logo al focus/click */
.wp-block-navigation-item a:focus,
.wp-block-navigation-item a:focus-visible,
.site-header a:focus,
.site-header a:focus-visible,
.custom-logo-link:focus,
.custom-logo-link:focus-visible,
.wp-block-site-logo a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Mega Menu Prodotti (VISUALIZZAZIONE STANDARD) ────────────────────────────────── */
/* 
   Il cliente ha richiesto di mostrare un menu classico a discesa invece del mega menu.
   Per ripristinare il Mega Menu a tutta larghezza, de-commentare il blocco 
   "STILE MEGA MENU" sottostante.
*/
/* --- INIZIO STILE MENU CLASSICO (Desktop) --- */
/* Scoped da 768px in su: sotto quella soglia il menu diventa l'overlay
   mobile a schermo intero con lista verticale, dove i sottomenu devono
   restare nel flusso normale del documento. Prima questa regola non aveva
   media query ("Attivo per Desktop e Mobile" nel commento originale) e
   posizionava i sottomenu in absolute anche nell'overlay mobile, ancorati
   alla geometria nascosta dell'header desktop: risultato, sottomenu fuori
   schermo o sovrapposti al logo (es. "Prodotti" finiva 122px oltre il
   bordo destro di un telefono da 375px). */
@media (min-width: 768px) {
  #main-bar .wp-block-navigation-item {
    position: relative !important;
  }
  #main-bar {
    /* Forza tutti i sottomenu di primo livello del menu principale ad allinearsi a sinistra della voce genitore,
       ignorando i ricalcoli sballati del JS di Gutenberg */
  }
  #main-bar .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }
}
.fiori-mega-menu__col {
  display: block !important;
  width: 100%;
}

/* Separatore tra una categoria (es. Site Dumper) e l'altra (es. Concrete Mixer) */
.fiori-mega-menu__col:not(:last-child) {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.fiori-mega-menu__title {
  display: block;
  margin-bottom: 5px;
  transition: color 0.3s ease;
}

.fiori-mega-menu__title:hover,
.fiori-mega-menu__title:hover .wp-block-navigation-item__label {
  color: #0056b3 !important; /* Azzurro originale del Mega Menu */
}

.fiori-mega-menu__title .wp-block-navigation-item__label {
  font-weight: bold;
}

.fiori-mega-menu__list {
  padding-left: 15px;
  list-style: none;
  margin: 0;
}

.fiori-mega-menu__list li a {
  transition: color 0.3s ease;
}

.fiori-mega-menu__list li a:hover {
  color: #0056b3 !important; /* Voce azzurra al passaggio, spostamento rimosso */
}

/* --- FINE STILE MENU CLASSICO --- */
/* --- STILE GLOBALE DROPDOWN MENU (Azienda, Prodotti, ecc.) --- */
@media (min-width: 768px) {
  .wp-block-navigation__submenu-container {
    /* Ponte invisibile: allontana visivamente il box bianco spingendolo
       in basso verso il bordo dell'header, senza interrompere l'hover del mouse */
    border-top: 25px solid transparent !important;
    background-clip: padding-box !important;
    /* Leggero padding interno per far respirare le voci sopra e sotto */
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    /* Evita che le voci lunghe (es. Mobile Concrete Mixer) vadano a capo */
    width: max-content !important;
    min-width: 220px;
    /* Forza tutti i sottomenu alla stessa dimensione font (Medium), a prescindere
       dal font-size (anche fluido/clamp) ereditato dal blocco Navigation della singola
       lingua: evita discrepanze come "Prodotti" più grande di "Azienda" in inglese */
    font-size: var(--wp--preset--font-size--medium) !important;
  }
  .wp-block-navigation__submenu-container a {
    white-space: nowrap;
    transition: color 0.3s ease !important;
  }
  /* Applica l'azzurro al passaggio del mouse su TUTTI i dropdown del sito */
  .wp-block-navigation__submenu-container a:hover,
  .wp-block-navigation__submenu-container a:focus {
    color: #0056b3 !important;
  }
}
/* --- FINE STILE GLOBALE DROPDOWN MENU --- */
/* --- INIZIO STILE MEGA MENU (ATTUALMENTE DISABILITATO) --- */
/*
@media (min-width: 768px) {
    #header > div *:has(.fiori-mega-menu-wrapper),
    .fiori-mega-menu-wrapper {
        position: static !important;
    }

    #header {
        position: relative;
    }

    .fiori-mega-menu-wrapper .wp-block-navigation__submenu-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important; 
        gap: 40px !important;
        position: absolute !important;
        top: 100% !important; 
        width: 100% !important; 
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
        padding: 0 max(20px, calc((100% - 1240px) / 2)) !important;
        background-color: #ffffff !important;
        border: none !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-5px) !important;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s !important;
        box-sizing: border-box;
    }
    .fiori-mega-menu-wrapper:hover .wp-block-navigation__submenu-container,
    .fiori-mega-menu-wrapper.is-menu-open .wp-block-navigation__submenu-container,
    .fiori-mega-menu-wrapper:focus-within .wp-block-navigation__submenu-container {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s !important;
    }

    .fiori-mega-menu-wrapper > .wp-block-navigation-item__content {
        position: relative;
    }
    .fiori-mega-menu-wrapper > .wp-block-navigation-item__content::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        left: -50px;
        width: calc(100% + 100px); 
        height: 80px; 
        background: transparent;
    }

    .fiori-mega-menu__col {
        display: block !important; 
        flex: 1 1 200px !important;
        min-width: 200px !important;
        padding:40px 0 !important;
        width: auto !important; 
    }
    .fiori-mega-menu__title {
        display: block;
        font-family: var(--wp--preset--font-family--anta, sans-serif) !important;
        font-size: 18px;
        font-weight: 700;
        color: var(--wp--preset--color--fiori-navy, #002c5a) !important;
        text-transform: uppercase;
        text-decoration: none;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e7eb;
        transition: color 0.3s ease;
    }
    .fiori-mega-menu__title:hover {
        color: #0056b3 !important;
    }
    .fiori-mega-menu__list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .fiori-mega-menu__list li {
        margin-bottom: 8px;
    }
    .fiori-mega-menu__list li a {
        font-size: 15px;
        color: #4a5568 !important;
        text-decoration: none;
        transition: color 0.2s ease, padding-left 0.2s ease;
        display: inline-block;
    }
    .fiori-mega-menu__list li a:hover {
        color: #0056b3 !important;
        padding-left: 5px;
    }
}
*/
/* --- FINE STILE MEGA MENU --- */
/* ── Footer ────────────────────────────────────────────── */
/* Richiesta cliente: footer compatto come sul sito attuale (~200px),
   con tutte le info: logo, social, © / P.IVA / link legali,
   "Fondo Energia" (PDF manifesto) e loghi UNACEA + certificazioni ISO. */
.site-footer {
  padding: 24px 0 12px;
  background: var(--fiori-navy);
}

.site-footer__inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  padding: 0 24px;
}

.site-footer__main {
  gap: 24px 40px;
}

.site-footer__brand {
  gap: 24px;
}

.site-footer__logo img {
  width: 90px;
  height: auto;
  display: block;
}

.site-footer__info {
  gap: 6px;
}

.site-footer__social {
  --wp--style--block-gap: 16px;
}
.site-footer__social .wp-social-link a {
  padding: 8px !important;
}
.site-footer__social .wp-social-link svg {
  width: 28px !important;
  height: 28px !important;
}

.site-footer__legal-row {
  gap: 4px 20px;
}

.site-footer__nav a {
  color: #aaaaaa;
  font-size: 12px;
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--fiori-white);
}

.site-footer__certs {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.site-footer__certs img {
  width: auto;
  height: 40px;
  display: block;
}

/* Pulsante outline, stesso stile del "Richiedi Informazioni" outline
   della scheda prodotto ma su sfondo scuro: bordo bianco, si riempie
   di bianco all'hover. Altezza 40px per allinearsi con il logo UNACEA. */
.site-footer__fondo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  color: var(--fiori-white);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}
.site-footer__fondo:hover {
  background-color: var(--fiori-white);
  color: var(--fiori-navy);
  border-color: var(--fiori-white);
}

/* Firma agenzia: il link resta "web agency modena siti internet" (testo reale,
   invariato per la SEO) ma è nascosto visivamente; al suo posto compare
   "Sito realizzato da NewLogic" via ::before. Quando arriva lo screenshot,
   sostituire "content" con un background-image sullo stesso pseudo-elemento. */
.site-footer__credit {
  margin: 16px 0 0;
  font-size: 10px;
  line-height: 1;
}

.site-footer__credit-link {
  position: relative;
  display: inline-block;
  color: transparent;
  text-decoration: none;
  user-select: none;
}
.site-footer__credit-link::before {
  content: "Sito realizzato da NewLogic";
  position: absolute;
  inset: 0;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
.site-footer__credit-link:hover::before {
  color: var(--fiori-white);
}

@media (max-width: 768px) {
  .site-footer__main {
    justify-content: center;
    text-align: center;
  }
  .site-footer__brand {
    flex-direction: column;
  }
  .site-footer__info {
    align-items: center;
  }
  .site-footer__social, .site-footer__legal-row {
    justify-content: center;
  }
  .site-footer__certs {
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-footer__credit {
    text-align: center;
  }
}
/* ============================================================
   FIORI GROUP THEME — main.scss
   ============================================================ */
/* ==========================================================================
   Banner Block (es. 3 colonne in homepage)
   ========================================================================== */
.banner-trio .wp-block-cover .wp-block-cover__image-background {
  z-index: -1;
}
.banner-trio .wp-block-cover {
  position: relative;
  z-index: 2;
}
.banner-trio .wp-block-cover .wp-block-cover__inner-container {
  position: static;
}
.banner-trio .wp-block-cover a {
  text-decoration: none !important;
}
.banner-trio .wp-block-cover a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* ============================================================
   FIORI GROUP THEME — main.scss
   ============================================================ */
/* ── Hero Home ─────────────────────────────────────────── */
.hero-home {
  position: relative;
}

.hero-home__dots {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  gap: 8px;
}

.hero-home__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background var(--fiori-transition);
}

.hero-home__dot.is-active {
  background: var(--fiori-white);
}

/* Contenuto testuale: SOLO su mobile l'altezza ridotta rendeva il testo
   centrato poco leggibile, con poco spazio intorno. Ancoriamo il blocco
   in basso e aggiungiamo un gradiente scuro dietro al testo (leggibilità
   indipendente dal contrasto della singola foto di sfondo). Su desktop
   resta tutto come in origine: testo centrato verticalmente. */
@media (max-width: 767.98px) {
  .hero-home.wp-block-cover {
    align-items: flex-end !important;
    padding-bottom: 56px !important;
  }
  .hero-home::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 55%);
  }
  .hero-home .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
  }
  .hero-home__inner p {
    font-size: 19px !important;
    max-width: 600px;
    margin-top: 10px !important;
    margin-bottom: 22px !important;
  }
}
/* ── Hero slider slides ────────────────────────────────── */
.hero-home__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.hero-home__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Hero Inner ────────────────────────────────────────── */
.hero-inner {
  position: relative;
  overflow: hidden;
}

.hero-inner h1 {
  margin: 0;
}

/* L'immagine "prova-azienda-header-1" (hero della pagina Azienda) ha un
   bordo bianco pieno sopra e sotto la foto vera e propria, incorporato
   nel file caricato. Su desktop il riquadro è molto più largo che alto,
   quindi object-fit:cover ritaglia già in verticale ed esclude quei
   bordi da solo; su mobile il riquadro è invece più alto che largo,
   quindi l'immagine intera (bordi compresi) resta visibile e appare
   come una fascia bianca/grigia sopra e sotto la foto. In attesa che il
   file venga ricaricato già ritagliato, uno zoom mirato sul solo mobile
   esclude i bordi e fa riempire tutto il riquadro. */
@media (max-width: 767.98px) {
  .hero-inner img[src*=prova-azienda-header] {
    transform: scale(1.48);
    transform-origin: center;
  }
}
header + div, header + main {
  margin: 0;
}

.product-hero, .hero-inner, .hero-slider {
  /* Anche su mobile l'header resta transparent/fixed sopra l'hero (per
     l'effetto "immagine a tutta larghezza sotto il logo"): serve quindi
     comunque un margine negativo che tiri su l'hero sotto #headerSpacer,
     MA della stessa altezza dello spacer mobile (74px), non di quella
     desktop (-$main-height = 85px). Usare 85px anche su mobile tirava su
     l'hero 11px in più del dovuto, facendo sovrapporre il sottotitolo del
     prodotto al logo; rimuovere del tutto il margine (fix precedente,
     sbagliato) lasciava invece un vuoto: l'header fisso restava sopra
     sfondo bianco anziché sopra l'immagine, quindi invisibile (testo
     bianco su bianco). */
  margin-top: -74px !important;
}
@media (min-width: 768px) {
  .product-hero, .hero-inner, .hero-slider {
    margin-top: -85px !important;
  }
}

.wp-block-cover .application-card__icon {
  margin-right: var(--wp--preset--spacing--40, 1.5rem) !important;
}
.wp-block-cover .application-card__icon svg path {
  fill: #fff !important;
}

.product-hero {
  z-index: 0;
}
.product-hero .wp-block-cover__inner-container {
  padding: 0 !important;
}
.product-hero .wp-block-cover__image-background {
  object-position: bottom center;
}

.yoast-breadcrumbs {
  font-size: 15px;
}
.yoast-breadcrumbs > span > span {
  padding: 0 5px 0 0;
}

/* ============================================================
   FIORI GROUP THEME — main.scss
   ============================================================ */
/* ==========================================================================
   Hero Slider (Front Page) - Swiper Integration
   ========================================================================== */
.hero-slider {
  margin-bottom: 60px;
}
.hero-slider.swiper {
  overflow: visible;
}

.hero-home.swiper-slide {
  min-height: calc(100vh - (85px + 50px)) !important;
  width: 100%;
  display: flex !important;
}

.hero-slider__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: rgba(209, 213, 219, 0.3);
  z-index: 10;
}
.hero-slider__progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress, 0%);
  background-color: #002c5a;
}

.hero-slider .swiper-pagination {
  position: absolute;
  bottom: -40px !important;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 10;
}
.hero-slider .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d1d5db;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  opacity: 1;
  margin: 0 !important;
}
.hero-slider .swiper-pagination .swiper-pagination-bullet:hover, .hero-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #002c5a;
}

/* ── Product Card ──────────────────────────────────────── */
/*
.product-card { background: var(--fiori-white); border: 1px solid #eeeeee; border-radius: var(--fiori-radius); overflow: hidden; transition: box-shadow var(--fiori-transition), transform var(--fiori-transition); height: 100%; }
.product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px); }
.product-card__image img { width: 100%; height: 240px; object-fit: contain; padding: 0; background: var(--fiori-light-gray); }
.product-card__body { padding: 24px; flex: 1; }
.product-card__title { font-size: 20px; color: var(--fiori-navy); margin: 0 0 12px; }
.product-card__specs { gap: 12px; margin-bottom: 12px; }
.product-card__spec { gap: 6px; font-size: 13px; color: var(--fiori-dark-gray); }
.product-card__spec-icon { margin: 0; color: var(--fiori-navy); font-size: 16px; }
.product-card__spec-value { margin: 0; font-weight: 600; }
.product-card__badges { gap: 6px; margin-bottom: 12px; }
.product-card__badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; border: 1.5px solid; margin: 0; line-height: 1.4; }
.product-card__excerpt { font-size: 14px; color: var(--fiori-mid-gray); margin: 0 0 16px; line-height: 1.5; }
.product-card__cta { color: var(--fiori-navy); font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.product-card__cta:hover { color: var(--fiori-accent); }
*/
/* ── Application Card ──────────────────────────────────── */
.application-card {
  background: var(--fiori-white);
  border: none;
  border-radius: var(--fiori-radius);
  padding: 0;
  transition: all 0.3s ease;
  /*
     &:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 25px rgba(26, 43, 74, 0.1);
         border-color: transparent;
     }
  */
}
.application-card__icon {
  width: 80px;
  height: 80px;
  margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
  margin-right: var(--wp--preset--spacing--60, 2rem) !important;
  margin-top: 0 !important;
}
.application-card__icon img,
.application-card__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.application-card__icon img path,
.application-card__icon svg path {
  fill: currentColor;
}
.application-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fiori-navy);
  margin: 0 0 10px;
  margin-top: 0 !important;
}
.application-card__title a {
  text-decoration: none;
  color: inherit;
}
.application-card__excerpt {
  font-size: 14px;
  color: var(--fiori-mid-gray);
  margin: 0 0 16px;
  line-height: 1.6;
}
.application-card__cta {
  color: var(--fiori-navy);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--fiori-navy);
  padding: 8px 24px;
  transition: all var(--fiori-transition);
}
.application-card__cta a {
  text-decoration: none;
  color: inherit;
}
.application-card__cta:hover {
  background: var(--fiori-navy);
  color: var(--fiori-white);
}

/* ── Technology Card ───────────────────────────────────── */
.technology-card {
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid #eeeeee;
}
@media (max-width: 768px) {
  .technology-card {
    flex-direction: column;
  }
}

.technology-card__badge-wrap {
  flex-shrink: 0;
}

.technology-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2.5px solid;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
}
@media (max-width: 768px) {
  .technology-card__badge {
    width: 60px;
    height: 60px;
    font-size: 14px;
  }
}

.technology-card__content {
  gap: 4px;
}

.technology-card__label {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--fiori-mid-gray);
}

.technology-card__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--fiori-navy);
}

.technology-card__cta {
  color: var(--fiori-navy);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  margin-top: 4px;
}

.technology-card__cta:hover {
  color: var(--fiori-accent);
}

/* ── News Card ─────────────────────────────────────────── */
.news-card {
  background: var(--fiori-white);
  border: 1px solid #eeeeee;
  border-radius: var(--fiori-radius);
  overflow: hidden;
  transition: box-shadow var(--fiori-transition);
  height: 100%;
}

.news-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.news-card__image-wrap {
  position: relative;
}

.news-card__image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.news-card__location-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--fiori-accent);
  color: var(--fiori-white);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}

.news-card__body {
  padding: 20px;
}

.news-card__type {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--fiori-navy);
}

.news-card__dates {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--fiori-mid-gray);
}

.news-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fiori-navy);
  margin: 0 0 12px;
}

.news-card__cta {
  color: var(--fiori-navy);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.news-card__cta:hover {
  color: var(--fiori-accent);
}

.technic-icons img {
  width: 80px;
  height: auto;
}

/* ── Modifiche ACF in Card (Product List) ─────────────────────────── */
.product-card .product-title a {
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.product-card .product-title a:hover {
  text-decoration: none !important;
  color: #888888 !important;
}

.product-card .product-title a:hover span {
  -webkit-text-stroke-color: #888888 !important;
  color: transparent !important;
}

.product-card {
  position: relative !important;
}

.product-card .product-technologies {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10 !important;
}

.product-card .tech-item {
  gap: 0 !important;
  margin: 0 !important;
}

.product-card .tech-icon {
  width: 60px !important;
  height: 60px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  padding: 4px !important;
  box-shadow: none !important;
}

.product-card .tech-info {
  display: none !important;
}

/* ── Feature Item Full (Specifiche Scheda Prodotto con Icona) ── */
.feature-item-full {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.feature-item-full .feature-icon {
  width: 80px;
  height: 80px;
  background-color: var(--fiori-navy, #1a2b4a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-item-full .feature-info {
  display: flex;
  flex-direction: column;
}

.feature-item-full .feature-value {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 2px 0;
  color: var(--fiori-navy, #1a2b4a);
  font-family: var(--wp--preset--font-family--anta) !important;
}

.feature-item-full .feature-label {
  font-size: 16px;
  color: var(--fiori-mid-gray, #888888);
  margin: 0;
}

/* ── Feature Item (Specifiche per Card in Elenchi) ────────── */
.feature-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.feature-item .feature-label {
  font-size: 16px;
  font-weight: 600;
  color: #555555;
  margin: 0;
}

.feature-item .feature-value {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--fiori-navy, #1a2b4a);
  font-family: var(--wp--preset--font-family--anta) !important;
  text-align: right;
}

.product-card-specs {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product-card-specs .feature-item {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid #eeeeee !important;
}

.product-card-specs .feature-item:last-child {
  border-bottom: none !important;
}

.product-card-specs .feature-label {
  display: block !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--fiori-mid-gray, #888888) !important;
  margin: 0 !important;
}

.product-card-specs .feature-value {
  font-size: 16px !important;
  font-family: var(--wp--preset--font-family--anta) !important;
  color: var(--fiori-navy, #1a2b4a) !important;
  font-weight: 700 !important;
  text-align: right !important;
}

/* Stile CTA Outline per la Card */
.product-card .wp-block-read-more {
  border: 1px solid #1a2b4a !important;
  color: #1a2b4a !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
}

.product-card .wp-block-read-more:hover {
  background: #1a2b4a !important;
  color: #fff !important;
}

/* ── Related Products Row ───────────────────────────────── */
.related-product-row {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}
.related-product-row:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.related-product-row .product-technologies {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
}
.related-product-row .tech-item {
  gap: 0 !important;
  margin: 0 !important;
}
.related-product-row .tech-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  padding: 4px !important;
  box-shadow: none !important;
}
.related-product-row .tech-info {
  display: none !important;
}
@media (max-width: 600px) {
  .related-product-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
  }
  .related-product-row .product-technologies {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* ── Badge motorizzazioni (colori) ─────────────────────── */
.badge--bev {
  color: #2e7d32;
  border-color: #2e7d32;
}

.badge--rev {
  color: #1565c0;
  border-color: #1565c0;
}

.badge--p\+ {
  color: #c62828;
  border-color: #c62828;
}

.badge--b {
  color: #e65100;
  border-color: #e65100;
}

.badge--cbv {
  color: #6a1b9a;
  border-color: #6a1b9a;
}

.badge--hm {
  color: #37474f;
  border-color: #37474f;
}

/* ── Specs Bar (scheda prodotto) ───────────────────────── */
.specs-bar {
  gap: 32px;
  flex-wrap: wrap;
  padding: 32px 0;
  border-bottom: 1px solid #eeeeee;
}
@media (max-width: 768px) {
  .specs-bar {
    gap: 16px;
  }
}

.specs-bar__item {
  gap: 12px;
}

.specs-bar__icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: var(--fiori-light-gray);
  border-radius: 50%;
}

.specs-bar__label {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--fiori-mid-gray);
  letter-spacing: 1px;
}

.specs-bar__value {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--fiori-navy);
}

.specs-bar__motorizzazioni {
  gap: 8px;
  margin-left: 16px;
}

.specs-bar__badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid;
  text-decoration: none;
  transition: all var(--fiori-transition);
}

/* ── Product Gallery ───────────────────────────────────── */
.product-gallery__tabs {
  gap: 0;
  border-bottom: 2px solid #eeeeee;
  margin-bottom: 24px;
}

.product-gallery__tab {
  padding: 12px 24px;
  margin: 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--fiori-mid-gray);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--fiori-transition);
}

.product-gallery__tab.is-active {
  color: var(--fiori-navy);
  border-bottom-color: var(--fiori-navy);
}

.product-gallery__photos {
  gap: 12px;
}

.product-gallery__photo img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--fiori-radius);
  cursor: zoom-in;
}

/* ── Contact Form Product ──────────────────────────────── */
.contact-form-product__title {
  font-size: 28px;
  margin-bottom: 8px;
}

.contact-form-product__subtitle {
  margin-bottom: 32px;
}

.product-title span {
  -webkit-text-stroke: 2px var(--wp--preset--color--fiori-navy) !important;
  color: transparent;
}

/* ── Hero Product Layout (Responsive: 3 col -> 2 col -> 1 col) ──────── */
.product-hero {
  padding: 0 !important;
}

.product-hero {
  overflow: visible;
}
.product-hero .hero-image-column {
  margin: 0;
}
.product-hero .hero-content-wrapper {
  width: 100%;
  margin: 0 auto;
  min-height: 580px;
  position: relative;
}
.product-hero {
  /* Desktop Large (>= 1400px) */
}
@media (min-width: 1400px) {
  .product-hero .hero-content-wrapper {
    max-width: 1240px;
    padding: 3rem 20px;
    display: grid;
    grid-template-columns: 4fr 6fr; /* Modifica utente: 2 colonne */
    align-items: center;
    min-height: auto;
  }
  .product-hero .hero-text-column {
    grid-column: 1/2;
    grid-row: 1;
    width: 100%;
    z-index: 10;
  }
  .product-hero .hero-image-column {
    grid-column: 2/3;
    grid-row: 1;
    display: flex;
    justify-content: center;
    z-index: 5;
    width: 100%;
    max-width: none;
  }
  .product-hero .hero-image-column .wp-block-post-featured-image {
    width: 100% !important;
    height: auto !important;
    display: flex;
    justify-content: center;
  }
  .product-hero .hero-image-column img {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    object-fit: contain;
    display: block !important;
  }
  .product-hero {
    /* Fix specifico per l'allineamento a destra sulla griglia a 2 colonne (1400px) */
  }
  .product-hero.hero-align-right .hero-content-wrapper {
    grid-template-columns: 6fr 4fr; /* Immagine a sx più grande, testo a dx più piccolo */
  }
  .product-hero.hero-align-right .hero-text-column {
    grid-column: 2/3;
  }
  .product-hero.hero-align-right .hero-image-column {
    grid-column: 1/2;
  }
}
.product-hero {
  /* Ultra Desktop (>= 1680px) */
}
@media (min-width: 1680px) {
  .product-hero .hero-content-wrapper {
    max-width: 100%;
    grid-template-columns: 1fr 2fr 1fr; /* Modifica utente: 3 colonne */
    padding-left: calc(var(--wp--preset--spacing--80, 5rem) - var(--wp--style--root--padding-left, 0px)) !important;
    padding-right: calc(var(--wp--preset--spacing--80, 5rem) - var(--wp--style--root--padding-right, 0px)) !important;
  }
  .product-hero .hero-text-column {
    max-width: none;
  }
  .product-hero {
    /* Fix specifico per l'allineamento a destra sulla griglia a 3 colonne (1680px+) */
  }
  .product-hero.hero-align-right .hero-content-wrapper {
    grid-template-columns: 1fr 2fr 1fr; /* Ripristina la griglia a 3 colonne base */
  }
  .product-hero.hero-align-right .hero-text-column {
    grid-column: 3/4; /* Testo nell'ultima colonna */
  }
  .product-hero.hero-align-right .hero-image-column {
    grid-column: 2/3; /* Immagine sempre al centro */
  }
}
.product-hero {
  /* 4k Desktop (>= 2400px) */
}
@media (min-width: 2400px) {
  .product-hero .hero-content-wrapper {
    grid-template-columns: 3fr 4fr 3fr; /* Modifica utente */
  }
  .product-hero.hero-align-right .hero-content-wrapper {
    grid-template-columns: 3fr 4fr 3fr;
  }
}
.product-hero {
  /* Tablet / Small Desktop (768.1px - 1399.9px) */
}
@media (min-width: 768.1px) and (max-width: 1399.9px) {
  .product-hero .hero-content-wrapper {
    display: grid;
    grid-template-columns: 4fr 6fr;
    align-items: center;
    gap: 20px;
    max-width: 1240px;
    padding: 4rem 20px;
    min-height: auto;
  }
  .product-hero .hero-text-column {
    width: 100%;
    z-index: 10;
  }
  .product-hero .hero-image-column {
    width: 100%;
    margin-bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
  }
  .product-hero .hero-image-column .wp-block-post-featured-image {
    width: 100% !important;
    height: auto !important;
    display: flex;
    justify-content: center;
  }
  .product-hero .hero-image-column img {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
    display: block !important;
  }
  .product-hero {
    /* Allineamento a destra su Tablet (inverte colonne) */
  }
  .product-hero.hero-align-right .hero-content-wrapper {
    grid-template-columns: 6fr 4fr;
  }
  .product-hero.hero-align-right .hero-text-column {
    order: 2;
  }
  .product-hero.hero-align-right .hero-image-column {
    order: 1;
  }
}
.product-hero {
  /* Mobile (<= 768px): Testo sopra, Immagine sotto */
}
@media (max-width: 768px) {
  .product-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: auto !important; /* Sovrascrive il min-height applicato inline da Gutenberg */
    height: auto !important; /* Rimuove l'altezza 50vh che causava il collasso del banner blu */
    max-height: none !important; /* Rimuove il limite 75vw */
    margin-bottom: 3rem !important; /* Riduce il vuoto enorme rispetto al contenuto successivo */
  }
  .product-hero .hero-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px 40px;
    min-height: auto;
  }
  .product-hero .hero-text-column {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
    z-index: 10;
  }
  .product-hero .hero-text-column .is-style-text-subtitle--3 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-hero .hero-text-column .is-style-text-subtitle--3::before {
    content: "";
    display: block;
    width: 70px;
    height: 2px;
    margin: 0;
    margin-top: 2px;
    border-top: 2px solid;
  }
  .product-hero .hero-image-column {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    z-index: 5;
  }
  .product-hero .hero-image-column .wp-block-post-featured-image {
    width: 100% !important;
    height: auto !important;
    display: flex;
    justify-content: center;
  }
  .product-hero .hero-image-column img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    max-width: 500px;
  }
}
@media (max-width: 480px) {
  .product-hero .hero-image-column .wp-block-post-featured-image {
    width: 110% !important;
  }
}
.product-hero {
  /* Colore Sottotitolo (Etichetta) e Titolo */
}
.product-hero .hero-text-column * {
  color: #ffffff !important;
}
.product-hero .hero-text-column { /* Forza tutto il testo a bianco */ }
.product-hero .product-excerpt {
  font-weight: 500 !important;
}
.product-hero .product-title span {
  -webkit-text-stroke: 2px #ffffff !important;
  color: transparent !important;
}
.product-hero .hero-image-column img {
  transform: scale(var(--fiorigroup-hero-scale, 1));
  transform-origin: center; /* Mantiene l'immagine attaccata al fondo su desktop */
  transition: transform 0.3s ease;
}
@media (max-width: 768px) {
  .product-hero .hero-image-column img {
    transform-origin: center center; /* Su mobile si restringe in modo uniforme */
  }
}

/* ── Intro Text ────────────────────────────────────────── */
.product-intro-text {
  width: 100%;
  max-width: 1240px; /* Occupa tutto lo spazio e si allinea al logo */
  margin-top: 0; /* Rimosso lo spazio bianco enorme! */
  margin-bottom: 5rem;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .product-intro-text {
    margin-top: 0;
  }
}
.product-intro-text {
  padding: 0;
  text-align: left; /* Non centrato */
}
.product-intro-text p {
  font-size: 1.2rem;
  color: var(--fiori-navy);
}

/* ── Contact Bar Buttons Width Fix ─────────────────────── */
.contact-form-product .wp-block-buttons {
  justify-content: flex-start;
  gap: 40px;
}
.contact-form-product .wp-block-buttons .wp-block-button {
  width: 100%;
  max-width: calc((100% - 80px) / 3) !important;
  min-width: 280px;
  /* Stessa logica "1/4 dello spazio, mai stirato" richiesta per
     .acf-product-buttons-container, applicata anche qui per
     coerenza tra i due gruppi di pulsanti della scheda prodotto. */
}
@media (min-width: 992px) {
  .contact-form-product .wp-block-buttons .wp-block-button {
    max-width: calc(25% - 30px) !important;
  }
}
@media (max-width: 768px) {
  .contact-form-product .wp-block-buttons .wp-block-button {
    max-width: 100% !important;
  }
}
.contact-form-product .wp-block-buttons .wp-block-button {
  /* Aumentiamo la specificità a dismisura per battere la regola in _blocks.scss */
}
.contact-form-product .wp-block-buttons .wp-block-button.has-custom-width.wp-block-button__width-100 .wp-block-button__link, .contact-form-product .wp-block-buttons .wp-block-button[style*="width:100%"] .wp-block-button__link, .contact-form-product .wp-block-buttons .wp-block-button[style*="width: 100%"] .wp-block-button__link,
.contact-form-product .wp-block-buttons .wp-block-button .wp-block-button__link {
  width: 100%;
  max-width: 100% !important; /* Forza il 100% annullando il doppio restringimento */
  text-align: center;
}

/* ── Pulsante "Richiedi Informazioni" scheda prodotto: outline ─────────────
   Richiesta cliente: bordo blu, sfondo bianco, testo blu (non pieno).
   Hover invertito. Specificità alta per battere l'hover generico dei bottoni
   navy in _blocks.scss (.has-fiori-navy-background-color:hover). */
.contact-form-product .wp-block-buttons .product-contact-btn .wp-block-button__link.wp-element-button {
  background-color: #ffffff !important;
  color: var(--wp--preset--color--fiori-navy) !important;
  border: 1px solid var(--wp--preset--color--fiori-navy) !important;
}
.contact-form-product .wp-block-buttons .product-contact-btn .wp-block-button__link.wp-element-button:hover, .contact-form-product .wp-block-buttons .product-contact-btn .wp-block-button__link.wp-element-button:focus-visible {
  background-color: var(--wp--preset--color--fiori-navy) !important;
  color: #ffffff !important;
  border-color: var(--wp--preset--color--fiori-navy) !important;
}

/* ── Contact Modal (migrato da inline style) ─────────────── */
.product-contact-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
.product-contact-modal__content {
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  width: 90%;
  max-width: 600px;
  margin: auto;
}

/* ── ACF Product Buttons (migrato da inline style in acf-blocks.php) ─────────────── */
/* Richiesta cliente: i pulsanti (Dati tecnici, Brochure, Foto gallery) devono
   stare sempre uno di fianco all'altro su una riga, anche a risoluzioni
   intermedie. Niente min-width (altrimenti il terzo va a capo) e nowrap sopra
   il breakpoint mobile. Selettore con .wp-block-buttons per battere la regola
   generica .is-content-justification-space-between in _blocks.scss. */
.wp-block-buttons.acf-product-buttons-container {
  flex-wrap: nowrap !important;
}
.wp-block-buttons.acf-product-buttons-container .wp-block-button {
  flex: 1 1 0%;
  min-width: 0;
}
.wp-block-buttons.acf-product-buttons-container {
  /* Richiesta cliente: su schermi grandi i pulsanti non devono più
     "stirarsi" a riempire tutta la larghezza del contenitore (che li
     rende enormi e sempre di dimensione diversa a seconda di quanti
     sono). Da qui in su ognuno occupa al massimo 1/4 dello spazio,
     allineati a sinistra, qualunque sia il numero di pulsanti presenti
     (1, 2, 3 o 4): niente più "stiramento", dimensione sempre coerente.
     Il calc() sottrae la quota di gap (40px) che spetterebbe a ciascuno
     in una riga a 4 colonne, così 4 pulsanti riempiono esattamente una
     riga senza andare a capo. */
}
@media (min-width: 992px) {
  .wp-block-buttons.acf-product-buttons-container {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  .wp-block-buttons.acf-product-buttons-container .wp-block-button {
    flex: 0 1 calc(25% - 30px);
    min-width: 0;
  }
}
@media (max-width: 768px) {
  .wp-block-buttons.acf-product-buttons-container {
    flex-wrap: wrap !important;
  }
  .wp-block-buttons.acf-product-buttons-container .wp-block-button {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: none;
  }
}

/* ── Dealer Map Base ───────────────────────────────────── */
@media (max-width: 768px) {
  .dealer-map {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 768px) {
  .dealer-map .wp-block-cover__inner-container.wp-block-cover-is-layout-flow {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
  }
}

@media (min-width: 1400px) {
  .dealer-map .wp-block-cover,
  .wp-block-cover:has(.dealer-map-widget) {
    border-left: 100px solid var(--wp--preset--color--fiori-white, #ffffff) !important;
    border-right: 100px solid var(--wp--preset--color--fiori-white, #ffffff) !important;
    border-top: 20px solid var(--wp--preset--color--fiori-white, #ffffff) !important;
    border-bottom: 20px solid var(--wp--preset--color--fiori-white, #ffffff) !important;
    aspect-ratio: 21/9 !important;
  }
}
@media (max-width: 768px) {
  .dealer-map .wp-block-cover,
  .wp-block-cover:has(.dealer-map-widget) {
    min-height: 400px !important;
    aspect-ratio: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.dealer-map .wp-block-cover__image-background,
.wp-block-cover:has(.dealer-map-widget) .wp-block-cover__image-background {
  object-fit: contain !important;
}
@media (max-width: 768px) {
  .dealer-map .wp-block-cover__image-background,
  .wp-block-cover:has(.dealer-map-widget) .wp-block-cover__image-background {
    object-fit: cover !important;
    object-position: center;
  }
}

.dealer-map__inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  padding: 0 24px;
  gap: 32px;
}

.dealer-map__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--fiori-white);
  margin: 0;
}

/* ── Dealer Map Widget ─────────────────────────────────── */
.dealer-map-widget {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  min-height: 480px;
  background: var(--fiori-white);
  border-radius: var(--fiori-radius);
  overflow: hidden;
}
@media (max-width: 768px) {
  .dealer-map-widget {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
}

.dealer-map-widget__controls {
  grid-column: 1/-1;
  padding: 16px 24px;
  background: var(--fiori-navy);
  display: flex;
  align-items: center;
  gap: 16px;
}

.dealer-map-widget__select {
  padding: 10px 16px;
  border: none;
  border-radius: var(--fiori-radius);
  font-size: 15px;
  min-width: 260px;
  background: var(--fiori-white);
  color: var(--fiori-dark-gray);
  cursor: pointer;
}

.dealer-map-widget__canvas {
  grid-column: 2;
  grid-row: 2;
  height: 480px;
  z-index: 0;
}
@media (max-width: 768px) {
  .dealer-map-widget__canvas {
    grid-column: 1;
    grid-row: 2;
    height: 320px;
  }
}

.dealer-map-widget__list {
  grid-column: 1;
  grid-row: 2;
  overflow-y: auto;
  max-height: 480px;
  background: var(--fiori-light-gray);
  border-right: 1px solid #e0e0e0;
}
@media (max-width: 768px) {
  .dealer-map-widget__list {
    grid-column: 1;
    grid-row: 3;
    max-height: 300px;
  }
}

.dealer-map-widget__placeholder,
.dealer-map-widget__loading,
.dealer-map-widget__no-results {
  padding: 24px;
  color: var(--fiori-mid-gray);
  font-size: 14px;
  text-align: center;
  margin: 0;
}

/* Lista rivenditori */
.dealer-list {
  padding: 8px 0;
}

.dealer-list__country {
  border-bottom: 1px solid #e0e0e0;
}

.dealer-list__country-title {
  padding: 10px 16px 6px;
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--fiori-mid-gray);
  font-weight: 700;
  background: #ececec;
}

.dealer-list__item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background var(--fiori-transition);
}

.dealer-list__item:hover,
.dealer-list__item.is-active {
  background: var(--fiori-white);
  border-left: 3px solid var(--fiori-accent);
}

.dealer-list__name {
  margin: 0 0 2px;
  font-weight: 600;
  font-size: 14px;
  color: var(--fiori-navy);
}

.dealer-list__city,
.dealer-list__phone {
  margin: 0;
  font-size: 12px;
  color: var(--fiori-mid-gray);
}

.dealer-list__phone a {
  color: var(--fiori-navy);
  text-decoration: none;
}

/* Marker custom */
.dealer-map-marker {
  background: transparent;
  border: none;
}

.dealer-map-marker__dot {
  display: block;
  width: 14px;
  height: 14px;
  background: var(--fiori-accent);
  border: 2.5px solid var(--fiori-navy);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform var(--fiori-transition);
}

.dealer-map-marker:hover .dealer-map-marker__dot {
  transform: scale(1.4);
}

/* Popup Leaflet */
.dealer-map-popup .leaflet-popup-content-wrapper {
  border-radius: var(--fiori-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 0;
}

.dealer-map-popup .leaflet-popup-content {
  margin: 0;
}

.dealer-popup {
  padding: 16px;
  min-width: 220px;
}

.dealer-popup__name {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--fiori-navy);
}

.dealer-popup__location,
.dealer-popup__address,
.dealer-popup__phone,
.dealer-popup__email {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--fiori-dark-gray);
}

.dealer-popup__phone a,
.dealer-popup__email a {
  color: var(--fiori-navy);
  text-decoration: none;
}

.dealer-popup__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.dealer-popup__btn {
  padding: 6px 12px;
  border-radius: var(--fiori-radius);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--fiori-transition);
}

.dealer-popup__btn--site {
  background: var(--fiori-navy);
  color: var(--fiori-white);
}

.dealer-popup__btn--directions {
  background: var(--fiori-light-gray);
  color: var(--fiori-navy);
  border: 1px solid #ddd;
}

.dealer-popup__btn:hover {
  opacity: 0.85;
}

/* ── Layout overlay standalone (senza mappa interattiva) ─ */
.dealer-map__overlay {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  max-width: 640px;
  margin: 0 auto;
}
.dealer-map__overlay .dealer-map-widget {
  min-height: auto;
  background: transparent;
  display: block;
}
.dealer-map__overlay .dealer-map-widget__controls {
  background: transparent;
  padding: 0;
}
.dealer-map__overlay .dealer-map-widget__canvas,
.dealer-map__overlay .dealer-map-widget__list {
  display: none;
}

/* ============================================================
   FIORI GROUP THEME — main.scss
   ============================================================ */
/* ── Embed Google My Maps (es. pagina Contatti) ──────────────
   Uso: blocco "HTML personalizzato" con
   <div class="fiori-map-embed"><iframe src="https://www.google.com/maps/d/embed?mid=..."></iframe></div>
   L'embed di My Maps ha una barra del titolo alta ~56px (più la sua linea
   di bordo inferiore scura) in cima all'iframe che non si può nascondere
   via parametri: la ritagliamo con un margine negativo dentro un
   contenitore overflow:hidden. Aggiungere la classe
   .fiori-map-embed--with-header per mostrarla comunque. */
.fiori-map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f0f0f0;
}
@media (max-width: 767.98px) {
  .fiori-map-embed {
    aspect-ratio: 4/3;
  }
}
.fiori-map-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 60px);
  margin-top: -60px;
  border: 0;
}
.fiori-map-embed--with-header iframe {
  height: 100%;
  margin-top: 0;
}
.fiori-map-embed {
  /* Variante "banda": fascia full-width, come la mappa del sito attuale
     (#map, 450px di altezza, edge-to-edge senza bordo). */
}
.fiori-map-embed--band {
  aspect-ratio: auto;
  height: 450px;
  border: 0;
}
@media (max-width: 767.98px) {
  .fiori-map-embed--band {
    aspect-ratio: auto;
    height: 320px;
  }
}

/* ── Mappa sedi Contatti (Google Maps API, inc/contact-map.php) ──────────
   Fascia full-width in cima alla pagina, al posto dell'hero standard:
   stesse proporzioni della mappa del sito attuale (#map, 450px). */
.fiori-contact-map {
  width: 100%;
  height: 450px;
  background: #e9eef4;
}
@media (max-width: 767.98px) {
  .fiori-contact-map {
    height: 320px;
  }
}
.fiori-contact-map h2 {
  font-size: 16px;
  margin: 0 0 6px;
}

/* Pannello di debug (?debug sulla pagina Contatti, vedi inc/contact-map.php):
   mai visibile ai visitatori normali, solo a chi aggiunge il parametro
   all'URL per capire perché la Google Maps API rifiuta il dominio. */
.fiori-contact-map-debug {
  padding: 16px 20px;
  background: #fff3cd;
  border: 1px solid #e2c785;
  font-family: monospace;
  font-size: 14px;
}
.fiori-contact-map-debug p {
  margin: 0 0 6px;
}
.fiori-contact-map-debug code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Su questo template non c'è l'hero scuro dietro l'header: la barra del menu
   avrebbe testo bianco su mappa chiara. Le diamo sfondo navy pieno.
   Il selettore usa :has() sul contenuto di #swup (e non una classe sul body)
   perché con Swup il body non viene rigenerato al cambio pagina, mentre il
   contenuto di #swup sì. */
body:has(#swup.contact-template) #main-bar {
  background-color: var(--fiori-navy) !important;
}

/* ==========================================================================
   Timeline Slider Styles
   ========================================================================== */
.timeline-slider-section {
  overflow: hidden;
}
.timeline-slider-section .timeline-nav-wrapper {
  position: relative;
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  gap: 0 !important;
  /* Sovrascriviamo l'allineamento di default del blocco per allineare le frecce alla base (linea) */
  align-items: flex-end !important;
}
.timeline-slider-section .timeline-nav-wrapper .swiper-button-prev,
.timeline-slider-section .timeline-nav-wrapper .swiper-button-next {
  position: static;
  width: 40px;
  height: 40px;
  border: 1px solid var(--wp--preset--color--fiori-navy, #262c48);
  border-radius: 50%;
  color: var(--wp--preset--color--fiori-navy, #262c48);
  background-color: #ffffff;
  transition: all 0.3s ease;
  z-index: 10;
  flex-shrink: 0;
}
.timeline-slider-section .timeline-nav-wrapper .swiper-button-prev svg,
.timeline-slider-section .timeline-nav-wrapper .swiper-button-next svg {
  height: 14px;
}
.timeline-slider-section .timeline-nav-wrapper .swiper-button-prev::after,
.timeline-slider-section .timeline-nav-wrapper .swiper-button-next::after {
  font-size: 14px;
  font-weight: 700;
}
.timeline-slider-section .timeline-nav-wrapper .swiper-button-prev:hover,
.timeline-slider-section .timeline-nav-wrapper .swiper-button-next:hover {
  background-color: var(--wp--preset--color--fiori-navy, #262c48);
  color: #ffffff;
}
.timeline-slider-section .timeline-nav-wrapper {
  /* Classe ripetuta apposta: nel CSS compilato esiste una regola a 3
     classi ".timeline-slider-section .timeline-nav-wrapper
     .swiper-button-prev { margin: 0 !important }" (letta direttamente
     nei cssRules del foglio compilato) la cui specificità è pari o
     superiore a quella della regola qui sopra e annullava
     silenziosamente margin-right/left anche se dichiarati dopo.
     Ripetere la classe alza la specificità oltre quella regola. */
}
.timeline-slider-section .timeline-nav-wrapper .swiper-button-prev.swiper-button-prev.swiper-button-prev {
  margin: 0 20px 0 0 !important;
}
.timeline-slider-section .timeline-nav-wrapper .swiper-button-next.swiper-button-next.swiper-button-next {
  margin: 0 0 0 20px !important;
}
.timeline-slider-section .timeline-nav-wrapper {
  /* Su mobile le frecce restano visibili (richieste esplicitamente
     insieme allo slide attivo sempre centrato) ma più piccole, per
     lasciare più spazio possibile alla pista degli anni. */
}
@media (max-width: 768px) {
  .timeline-slider-section .timeline-nav-wrapper .swiper-button-prev,
  .timeline-slider-section .timeline-nav-wrapper .swiper-button-next {
    width: 32px;
    height: 32px;
  }
  .timeline-slider-section .timeline-nav-wrapper .swiper-button-prev.swiper-button-prev.swiper-button-prev {
    margin: 0 16px 0 0 !important;
  }
  .timeline-slider-section .timeline-nav-wrapper .swiper-button-next.swiper-button-next.swiper-button-next {
    margin: 0 0 0 16px !important;
  }
}
.timeline-slider-section .timeline-nav {
  position: relative;
  width: 100%;
  /* La linea continua grigia di base */
}
.timeline-slider-section .timeline-nav::before {
  content: "";
  position: absolute;
  bottom: 20px; /* Allineato esattamente col centro delle frecce (40/2) e dei cerchi */
  left: 0;
  right: 0;
  height: 2px;
  background-color: #d1d5db; /* Grigio chiaro */
  z-index: 1;
}
.timeline-slider-section .timeline-nav-item {
  position: relative;
  height: auto;
  /* La larghezza la calcola Swiper via JS in base a slidesPerView
     (vedi timeline.js): un numero di anni fisso e leggibile per
     riga, che aumenta ai breakpoint più larghi invece di stiparli
     tutti o lasciarli tagliati a metà. */
  flex-shrink: 0;
  padding-bottom: 40px; /* Spazio per il pallino posizionato in modo assoluto */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  z-index: 2;
}
.timeline-slider-section .timeline-nav-item h4 {
  margin: 0;
  color: #6b7280;
  font-weight: 400;
  font-size: 20px;
  transition: all 0.3s ease;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .timeline-slider-section .timeline-nav-item h4 {
    font-size: 24px;
  }
}
.timeline-slider-section .timeline-nav-item {
  /* Il cerchio (nodo della timeline) */
}
.timeline-slider-section .timeline-nav-item::after {
  content: "";
  position: absolute;
  bottom: 12px; /* Il centro del cerchio sarà a 12 + (16/2) = 20px dal fondo, allineandosi alla linea */
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 2;
  box-sizing: border-box;
}
.timeline-slider-section .timeline-nav-item {
  /* Stato attivo (Thumb selezionato) */
}
.timeline-slider-section .timeline-nav-item.swiper-slide-thumb-active h4 {
  color: var(--wp--preset--color--fiori-navy, #262c48);
  font-weight: 700;
  transform: scale(1.1);
}
.timeline-slider-section .timeline-nav-item.swiper-slide-thumb-active::after {
  background-color: var(--wp--preset--color--fiori-navy, #262c48);
  border-color: var(--wp--preset--color--fiori-navy, #262c48);
  transform: translateX(-50%) scale(1.2);
}

/* ── Lightbox ──────────────────────────────────────────── */
.fiori-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.fiori-lightbox.is-open {
  display: flex;
}

.fiori-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
}

.fiori-lightbox__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 90vw;
  max-height: 90vh;
}

.fiori-lightbox__img {
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
}

.fiori-lightbox__close,
.fiori-lightbox__prev,
.fiori-lightbox__next {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--fiori-transition);
  flex-shrink: 0;
}

.fiori-lightbox__close:hover,
.fiori-lightbox__prev:hover,
.fiori-lightbox__next:hover {
  background: rgba(255, 255, 255, 0.25);
}

.fiori-lightbox__close {
  position: absolute;
  top: -56px;
  right: 0;
}

.fiori-lightbox__counter {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  margin: 0;
}

/* ============================================================
   CONTACT FORM 7
   ============================================================ */
.cf7-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cf7-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cf7-field--full {
  grid-column: 1/-1;
}
.cf7-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fiori-navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 10px 20px;
  border: none;
  border-radius: 0;
  color: var(--fiori-dark-gray);
  transition: border-color var(--fiori-transition);
  background: var(--fiori-form-bg);
  font-size: 16px;
}
.wpcf7 input[type=text]:focus,
.wpcf7 input[type=email]:focus,
.wpcf7 input[type=tel]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--fiori-navy);
}
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 select {
  height: 55px;
}
.wpcf7 {
  /* Stili per Select2 per abbinare i campi di input */
}
.wpcf7 .select2-container--default .select2-selection--single {
  height: 55px;
  border: none;
  border-radius: 0;
  background: var(--fiori-form-bg);
  transition: border-color var(--fiori-transition);
}
.wpcf7 .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--fiori-dark-gray);
  font-size: 16px;
  line-height: 52px; /* Altezza - (border * 2) */
  padding-left: 20px;
  padding-right: 40px; /* Spazio per la freccia */
}
.wpcf7 .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 52px;
}
.wpcf7 .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--fiori-navy);
}
.wpcf7 input[readonly] {
  background: var(--fiori-light-gray);
  color: var(--fiori-mid-gray);
  cursor: not-allowed;
}
.wpcf7 .wpcf7-acceptance {
  font-size: 13px;
  color: var(--fiori-dark-gray);
}
.wpcf7 .wpcf7-acceptance a {
  color: var(--fiori-navy);
  font-weight: 600;
}
.wpcf7 .wpcf7-acceptance a:hover {
  color: var(--fiori-accent);
}
.wpcf7 input.btn-submit {
  background: var(--fiori-navy);
  color: var(--fiori-white);
  border: none;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--fiori-transition);
  width: auto;
}
.wpcf7 input.btn-submit:hover {
  background: var(--fiori-accent);
}
.wpcf7 .wpcf7-not-valid-tip {
  font-size: 12px;
  color: #c62828;
  margin-top: 4px;
}
.wpcf7 .wpcf7-response-output {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--fiori-radius);
  font-size: 14px;
  border: none !important;
}
.wpcf7 .wpcf7-mail-sent-ok {
  background: #e8f5e9;
  color: #2e7d32;
}
.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-validation-errors {
  background: #ffebee;
  color: #c62828;
}

@media (max-width: 600px) {
  .cf7-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   FIORI GROUP THEME — main.scss
   ============================================================ */
@media (max-width: 767.98px) {
  .wp-block-media-text > .wp-block-media-text__content {
    padding: 2rem 0 0 !important;
  }
  .wp-block-media-text.is-stacked-on-mobile {
    padding-top: 0 !important;
    grid-template-columns: 100% !important;
  }
  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
  }
  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
  }
}
.wp-block-buttons.is-content-justification-space-between {
  justify-content: flex-start !important;
  gap: 40px;
}
.wp-block-buttons.is-content-justification-space-between .wp-block-button {
  flex: 1 1 0%;
  min-width: 250px;
  max-width: calc((100% - 80px) / 3);
}
.wp-block-buttons .wp-block-button .wp-block-button__link {
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid transparent; /* Evita salti di layout quando si aggiunge il bordo all'hover */
  border-radius: 0 !important; /* Forza il bordo squadrato, annullando il default di 9999px di Gutenberg per gli utenti non loggati */
}
.wp-block-buttons .wp-block-button .wp-block-button__link.has-fiori-navy-background-color:hover {
  background-color: #ffffff !important;
  color: var(--wp--preset--color--fiori-navy) !important;
  border: 1px solid var(--wp--preset--color--fiori-navy) !important;
}
.wp-block-buttons .wp-block-button {
  /* Se il bottone è impostato al 100% (o se è il bottone generico dei contatti), limitiamo la larghezza come in single-prodotto */
}
.wp-block-buttons .wp-block-button[style*="width:100%"] .wp-block-button__link, .wp-block-buttons .wp-block-button[style*="width: 100%"] .wp-block-button__link, .wp-block-buttons .wp-block-button.has-custom-width.wp-block-button__width-100 .wp-block-button__link,
.wp-block-buttons .wp-block-button .fiori-open-generic-contact-btn {
  min-width: 250px;
  max-width: calc((100% - 80px) / 3) !important;
  margin-left: auto;
  margin-right: auto;
}

/* Se i bottoni si trovano all'interno di un layout a colonne di Gutenberg, la colonna gestisce già la larghezza. 
   Il bottone deve quindi ignorare il limite di 1/3 ed espandersi al 100% del suo contenitore (la colonna). */
:where(.columns-2, .columns-3, .columns-4, .columns-5, .columns-6) .wp-block-buttons .wp-block-button[style*="width:100%"] .wp-block-button__link, :where(.columns-2, .columns-3, .columns-4, .columns-5, .columns-6) .wp-block-buttons .wp-block-button[style*="width: 100%"] .wp-block-button__link, :where(.columns-2, .columns-3, .columns-4, .columns-5, .columns-6) .wp-block-buttons .wp-block-button.has-custom-width.wp-block-button__width-100 .wp-block-button__link,
:where(.columns-2, .columns-3, .columns-4, .columns-5, .columns-6) .wp-block-buttons .wp-block-button .fiori-open-generic-contact-btn {
  max-width: none !important;
  width: 100% !important;
}

/* ── Override Globale e Assoluto per tutti i bottoni ─────────────────────── */
/* Siccome il file core wp-includes/blocks/button/style.min.css carica per gli 
   utenti non loggati un :where(.wp-block-button__link) con border-radius 9999px, 
   lo andiamo ad "asfaltare" con una regola globale, fuori da qualsiasi annidamento */
body .wp-block-button__link {
  border-radius: 0 !important;
}/*# sourceMappingURL=main.css.map */