/*!
 * FS26 — CSS personalizzato consolidato del tema child
 * ---------------------------------------------------------------------------
 * Questo file raccoglie TUTTO il CSS scritto a mano che prima viveva sparso in:
 *
 *   1. CSS personalizzato dei moduli Elementor (pannello "CSS personalizzato"
 *      dei singoli widget/contenitori)
 *   2. Opzioni tema Saren -> Custom CSS (Redux)
 *   3. Aspetto -> Personalizza -> CSS aggiuntivo (wp-custom-css)
 *   4. tag <style> dentro un widget HTML del footer
 *
 * Le sezioni sono nell'ORDINE DI CASCATA ORIGINALE: chi prima veniva stampato
 * dopo, qui sta piu' in basso. Non riordinare le sezioni.
 *
 * ATTENZIONE: il file va stampato per ULTIMO nel <head>, dopo i CSS di
 * Elementor, del tema padre e di Redux (che prima vincevano/perdevano per
 * ordine di cascata). Se lo carichi con un normale wp_enqueue_style finisce
 * troppo presto: vedi fs26_print_custom_css() in functions.php.
 *
 * style.css del child resta dov'e' (viene caricato molto prima, subito dopo
 * plugins.css: per questo la' servono !important e selettori lunghi).
 */

/* ==========================================================================
   1. DA: CSS personalizzato dei moduli Elementor
      Dopo aver messo in produzione questo file, svuotare il campo
      "CSS personalizzato" dei rispettivi elementi nell'editor.
   ========================================================================== */

/* ---------- Homepage (post 457) ---------- */

/* container, class: .elementor-element-6354117 */
/* --- HERO: VIDEO DI SFONDO YOUTUBE --- */

/* 1. Contenitore video sempre visibile e non cliccabile.
      L'autoplay e' forzato via parametri URL (widget HTML "fs-hero-video-fix"),
      quindi Elementor non rimuove mai le classi .elementor-loading / .elementor-invisible. */
.elementor-457 .elementor-element.elementor-element-6354117 > .elementor-background-video-container{
    overflow: hidden;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
}

/* 2. Copertura full-screen + zoom del 36% per mandare fuori inquadratura le bande
      cinema impresse nel video (contenuto 2.35:1 dentro un frame 16:9).
      NON usare transform: scale() -> a certe dimensioni Chrome rasterizza l'iframe
      a bande orizzontali. Si dimensiona direttamente l'iframe: la sezione e' 100vh,
      quindi 136vw / 241.8vh (= 136vh * 16/9) garantiscono il cover a ogni formato. */
.elementor-457 .elementor-element.elementor-element-6354117 > .elementor-background-video-container .elementor-background-video-embed,
.elementor-457 .elementor-element.elementor-element-6354117 > .elementor-background-video-container video{
    width: max(136vw, 241.8vh) !important;
    height: max(76.5vw, 136vh) !important;
    transform: translate(-50%, -50%) !important;
}

/* 3. L'overlay scuro del tema e' un ::before senza z-index e finirebbe SOTTO il video:
      va portato sopra (il blocco logo + claim resta a z-index 2).
      Un filter: brightness() sul contenitore non funziona: Chrome non applica
      filtri/opacity degli antenati agli iframe cross-origin. */
.elementor-457 .elementor-element.elementor-element-6354117::before{
    z-index: 1;
    pointer-events: none;
}

/* 4. Helper script: nessun ingombro nel layout */
.elementor-457 .elementor-element.elementor-element-6354117 > .fs-hero-video-fix{
    display: none;
}

/* image, class: .elementor-element-4c63681 */
.elementor-457 .elementor-element.elementor-element-4c63681 img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}

/* image, class: .elementor-element-6152f5b */
.elementor-457 .elementor-element.elementor-element-6152f5b img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}

/* image, class: .elementor-element-154ae30 */
.elementor-457 .elementor-element.elementor-element-154ae30 img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}

/* pecalltoaction, class: .elementor-element-ead723e */
.elementor-457 .elementor-element.elementor-element-ead723e .cta--title h3{color:#fff;}
.elementor-457 .elementor-element.elementor-element-ead723e .cta--button a, .elementor-457 .elementor-element.elementor-element-ead723e .cta--button{color:#fff;}

/* pecalltoaction, class: .elementor-element-924d4a1 */
.elementor-457 .elementor-element.elementor-element-924d4a1 .cta--title h3{color:#fff;}
.elementor-457 .elementor-element.elementor-element-924d4a1 .cta--button a, .elementor-457 .elementor-element.elementor-element-924d4a1 .cta--button{color:#fff;}
.elementor-457 .elementor-element.elementor-element-924d4a1 .cta--background img{width:100%;height:100%;object-fit:cover;}

/* ---------- Scheda prodotto (post 583) ---------- */

/* container, class: .elementor-element-57d0e47 */
.elementor-583 .elementor-element.elementor-element-57d0e47{position:sticky;top:110px;align-self:flex-start;}
@media(max-width:1024px){.elementor-583 .elementor-element.elementor-element-57d0e47{position:static;}}

/* container, class: .elementor-element-534c361 */
.elementor-583 .elementor-element.elementor-element-534c361{position:sticky;top:110px;align-self:flex-start;}
@media(max-width:1024px){.elementor-583 .elementor-element.elementor-element-534c361{position:static;}}

/* ---------- Archivio collezioni (post 591) e pagina Sposo (post 15893) ----------
   Stesso widget peproductsarchive (.elementor-element-9a9f756) su due pagine:
   un solo blocco con :is() al posto delle due copie identiche riga per riga
   che stavano qui prima (metà degli !important in meno da mantenere). */
:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 .filters--wrapper{width:440px !important;min-width:0 !important;max-width:92vw !important;height:100vh !important;top:0;left:0;background:#fff;padding:0 !important;}
:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 .filters--wrapper--inner{height:100% !important;max-height:100vh !important;overflow-y:auto !important;padding:46px 40px !important;box-sizing:border-box;}
:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 .filters--item{margin:0 0 34px !important;padding:0 !important;border:0 !important;}
:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 .filter--label{margin:0 0 18px !important;border:0 !important;}
:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 .terms-list{border:0 !important;padding:0 !important;margin:0 !important;}
:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 .terms-list-title{display:none !important;}
:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 .terms--terms{display:flex;flex-wrap:wrap;gap:10px;}
:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 .term--list--item.button--select{margin:0 !important;}
:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 span.pop--close{top:16px;right:22px;}
:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 .filters--item::after,:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 .filters--item::before{display:none !important;}
:is(.elementor-591, .elementor-15893) .elementor-element.elementor-element-9a9f756 .filters--item .filter--label + .terms-list{margin-top:0 !important;}

/* ==========================================================================
   2. DA: Opzioni tema Saren -> Custom CSS (Redux)
   ========================================================================== */

.saren--product-quick-action {
	padding: 0!important;
}
a.pe--view--button {
	margin: 0.5em;
}

.yith-wcwl-add-to-wishlist-button:is(button):not(.yith-wcwl-theme-button-style) {
    border-radius:0;
}

/* ===== SCOPE (contenitore che limita lo sticky) ===== */
.sticky-cta-scope{
  position: relative;
  overflow: visible !important; /* fondamentale: se un parent ha overflow hidden, sticky non va */
}

/* Se il contenuto arriva “sotto” la barra, questo crea spazio */
.sticky-cta-scope{
  padding-bottom: 52px;
}

/* ===== CTA sticky ===== */
.nav-button-home.new{
  display: flex !important;
  position: sticky;
  bottom: 0;

  width: 100%;
  height: 52px;
  box-sizing: border-box;
  z-index: 8;
}

/* testo */
.nav-button-home.new span.nav-button-home-text{
  display: flex !important;
  align-items: center;
  justify-content: center;

  padding: 16px;
  width: 100%;
  background-color: #fff;

  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-align: center;
}

/* bottone */
.nav-button-home.new a.action{
  background-image: none;
  border: none;
  border-color: transparent;
  border-radius: 0;
  padding: 8px 24px;
  box-shadow: none;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  max-width: 100%;
  min-width: unset;
  height: 52px;

  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;

  color: #fff;
  background: #101820;
  cursor: pointer;
  box-sizing: border-box;
  z-index: 999;
}

/* Desktop: larghezza minima come nel tuo CSS */
@media (min-width: 768px){
  .nav-button-home.new a.action{
    min-width: 325px;
    width: unset;
    max-width: unset;
  }
}

/* Mobile: evita overflow e fa andare a capo bene */
@media (max-width: 767px){
  .nav-button-home.new{
    height: auto;
    flex-wrap: wrap;
  }

  .nav-button-home.new span.nav-button-home-text{
    padding: 10px 12px;
  }

  .nav-button-home.new a.action{
    min-width: 100%;
  }

  /* se la barra diventa più alta su mobile, aumenta lo spazio sotto */
  .sticky-cta-scope{
    padding-bottom: 104px;
  }
}

/* Forza overflow visibile su wrapper Elementor comuni */
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap,
.e-con,
.e-con-inner{
  overflow: visible !important;
}

#sticky-cta{ will-change: transform; transform: translate3d(0,0,0); }
/* ===== STICKY CTA - full width + fixed to bottom until footer (fix 2026) ===== */
.sticky-cta-scope > .e-con-inner{ max-width:100% !important; width:100% !important; }
.sticky-cta-scope .e-con-inner > .elementor-element{ max-width:100% !important; width:100% !important; }
.nav-button-home.new{ position:relative !important; bottom:auto !important; }
.nav-button-home.new.cta-fixed{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:auto !important;
  margin:0 !important;
  z-index:100 !important;
}

/* === FS26 layout fix - single product (added 2026-06-05) === */
/* Hide WP/theme-rendered description on single product (now shown via Elementor widget above "Potrebbe piacerti anche") */
.single-product .product-page > p { display: none !important; }

/* Breadcrumb container left-aligned, no centering */
.single-product .product-page > .elementor > .elementor-section-wrap > .elementor-element:first-child .woocommerce-breadcrumb { text-align: left !important; }

/* homepage */
.pe--hotspot--image::after{content:'';position:absolute;top:0;left:0;right:0;height:35%;background:linear-gradient(180deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 100%);pointer-events:none;z-index:2;}

/* ==========================================================================
   3. DA: Aspetto -> Personalizza -> CSS aggiuntivo
   ========================================================================== */

/* Disable Saren theme page preloader */
.pe--page--loader,
.page--loader--count,
.page--loader--caption,
.page--loader--logo { display: none !important; }
.first--load body.loader__overlay main,
.first--load body.loader__overlay #smooth-content,
.first--load body.loader__fade main,
.first--load body.loader__columns main,
.first--load body.loader__rows main,
.first--load body.loader__blocks main,
.first--load body.loader__slide main,
.first--load body.loader__slide #smooth-content {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: auto !important;
}

/* FS: sfondo del menu mobile su TUTTE le pagine (28 lug: era solo home e
   sulle altre pagine il pannello restava semitrasparente, con le voci
   sovrapposte ai contenuti e illeggibili — segnalato dal cliente).
   Si dipinge la RADICE del template dentro il pannello: .site--menu ha
   altezza 0, un background li' sopra non renderizza (misurato sul live).
   Nativa Elementor: sfondo nero sul container f0ebf5b del template 1314
   (poi togliere questa regola). */
.site--menu.menu--fullscreen,
.site--menu.menu--fullscreen > .elementor{ background-color:#000 !important; }

/* FS: stile form home */
.home #mauticform_catalogo .mauticform-input,
.home #mauticform_catalogo .mauticform-textarea,
.home #mauticform_catalogo .mauticform-selectbox{background:transparent!important;color:#111!important;border:1px solid #888!important;border-radius:10px!important;padding:14px!important;box-shadow:none!important;outline:none!important;transition:border-color .15s ease!important;}
.home #mauticform_catalogo .mauticform-textarea{min-height:120px!important;resize:vertical!important;line-height:1.4!important}
.home #mauticform_catalogo .mauticform-input::placeholder,.home #mauticform_catalogo .mauticform-textarea::placeholder{color:#777!important;opacity:1!important}
.home #mauticform_catalogo .mauticform-input:focus,.home #mauticform_catalogo .mauticform-textarea:focus,.home #mauticform_catalogo .mauticform-selectbox:focus{border-color:#111!important}
.home #mauticform_catalogo input[type=date]::-webkit-calendar-picker-indicator{opacity:1!important;cursor:pointer!important}
.home #mauticform_catalogo .mauticform-radiogrp-row,.home #mauticform_catalogo .mauticform-checkboxgrp-row{display:flex!important;align-items:center!important;gap:8px!important;margin:6px 0!important}
.home #mauticform_catalogo .mauticform-radiogrp-row input,.home #mauticform_catalogo .mauticform-checkboxgrp-row input{appearance:none!important;-webkit-appearance:none!important;width:18px!important;height:18px!important;margin:0!important;flex:0 0 auto!important;border:1px solid #888!important;background:transparent!important;cursor:pointer!important;position:relative!important}
.home #mauticform_catalogo .mauticform-radiogrp-row input{border-radius:50%!important}
.home #mauticform_catalogo .mauticform-checkboxgrp-row input{border-radius:4px!important}
.home #mauticform_catalogo .mauticform-radiogrp-row input:checked,.home #mauticform_catalogo .mauticform-checkboxgrp-row input:checked{border-color:#111!important;background:#111!important}
.home #mauticform_catalogo .mauticform-radiogrp-row input:checked::after{content:""!important;position:absolute!important;inset:4px!important;border-radius:50%!important;background:#fff!important}
.home #mauticform_catalogo .mauticform-checkboxgrp-row input:checked::after{content:""!important;position:absolute!important;left:5px!important;top:1px!important;width:5px!important;height:10px!important;border:solid #fff!important;border-width:0 2px 2px 0!important;transform:rotate(45deg)!important}
.home #mauticform_catalogo .mauticform-radiogrp-row label,.home #mauticform_catalogo .mauticform-checkboxgrp-row label{cursor:pointer!important;color:#111!important;margin:0!important}

/* FS: icone header a destra */
.elementor-element-8ad87df{ justify-content:flex-end !important; }


/* === Mega menu Sposa (18 lug 2026) ===
   header bianco quando il pannello e' aperto + pannello -10px in basso */
@media (min-width:1025px){
  body:has(.fs-mega.fs-mega-open) .site-header{ background: #ffffff !important; }
  .fs-mega .elementor-element-ae09f65 { padding-bottom: 30px !important; }
  /* FS mega open: testi/logo/icone scuri (19 lug 2026) */
  body:has(.fs-mega.fs-mega-open) .site-header,
  body:has(.fs-mega.fs-mega-open) .site-header .e-con{--mainColor:#0f0f0f !important;--secondaryColor:#8E9194 !important;}
  body:has(.fs-mega.fs-mega-open) .site-header .site-branding img.main__logo{display:block !important;}
  body:has(.fs-mega.fs-mega-open) .site-header .elementor-element.elementor-element-d429176,
  body:has(.fs-mega.fs-mega-open) .site-header .elementor-element.elementor-element-225dde7,
  body:has(.fs-mega.fs-mega-open) .site-header .elementor-element.elementor-element-d5fe140{--mainColor:#0f0f0f !important;}
  body:has(.fs-mega.fs-mega-open) .site-header .site-branding img.secondary__logo,
  body:has(.fs-mega.fs-mega-open) .site-header .site-branding img.sticky__main__logo,
  body:has(.fs-mega.fs-mega-open) .site-header .site-branding img.sticky__secondary__logo{display:none !important;}

  /* FS mega: "Tutti gli Abiti" / "Le Collezioni" alla stessa misura dei
     titoli di colonna (21.3px = 1.333rem, come "I MARCHI"); la colonna
     "Le nostre linee" (bee96c7) era 177px e il titolo andava su due
     righe: 220px + nowrap = una riga, verificato senza sfondamenti
     (28 lug 2026) */
  .fs-mega .elementor-element-b751c33 a,
  .fs-mega .elementor-element-7506470 a{ font-size: 1.333rem !important; }
  .fs-mega .elementor-element-bee96c7{ min-width: 220px; }
  .fs-mega .elementor-element-035a9f6 .elementor-heading-title{ white-space: nowrap; }
}

/* FS header 64px (lug 2026) */
@media (min-width:1025px){
  .elementor-element-142a132{height:64px;min-height:64px;padding:10px;align-items:center;}
  .elementor-element-142a132 > .e-con{height:100%;padding-top:0;padding-bottom:0;align-items:center;}
}

/* FS catalogo home sticky (lug 2026) */
body.page-id-457 .site-main{overflow-x:clip;overflow-y:visible}
@media (min-width:1025px){
  body.page-id-457 .elementor-element-e51a53d{padding:0}
  body.page-id-457 .elementor-element-18ede0b{position:sticky;top:0;align-self:flex-start;height:100vh;width:50%;padding:0}
  body.page-id-457 .elementor-element-18ede0b .elementor-element-2a9c51a,
  body.page-id-457 .elementor-element-18ede0b .elementor-widget-container,
  body.page-id-457 .elementor-element-18ede0b .single-image{height:100% !important;width:100% !important}
  body.page-id-457 .elementor-element-18ede0b img{width:100% !important;height:100% !important;object-fit:cover}
}

/* FS icone header per stato switched (19 lug 2026) */
header.site-header.header--switched .elementor-element.elementor-element-d429176,
header.site-header.header--switched .elementor-element.elementor-element-225dde7,
header.site-header.header--switched .elementor-element.elementor-element-d5fe140{--mainColor:#F1F1F1;}

/* FS mobile: card sposa-sposo impilate + form 16px (19 lug 2026) */
@media (max-width:767px){
  body.page-id-457 .elementor-element-0e6ab4c{flex-direction:column;}
  header .elementor-element-9f66adf{margin-right:16px;}
  .elementor-element-d8d7804 .main--hotspot--image{object-position:50% 30%;}
  #mauticform_catalogo .mauticform-input,
  #mauticform_catalogo .mauticform-textarea,
  #mauticform_catalogo .mauticform-selectbox{font-size:16px !important;}
}

/* =========================================================
   FS26 · HERO HOMEPAGE — restyling luglio 2026
   Struttura in Elementor: pagina 457, container 6354117
   (occhiello 76b9c83 / titolo 45cce2a / sottotitolo 4fc2661 /
    bottone 3bb4a95 / numeri e scorri: widget HTML e231941).
   Qui solo tipografia, colore e comportamento responsive.
   ========================================================= */

/* Velo del video: scuro in alto (leggibilita header), pulito al centro,
   scuro in basso (leggibilita del testo). Sostituisce il velo piatto. */
.elementor-457 .elementor-element.elementor-element-6354117 > .elementor-background-overlay{
  background-image:linear-gradient(180deg,
    rgba(20,17,15,.78) 0%, rgba(20,17,15,.46) 7%, rgba(20,17,15,.16) 18%,
    rgba(20,17,15,.10) 44%, rgba(20,17,15,.68) 76%, rgba(20,17,15,.94) 100%)!important;
  opacity:1!important;
}

/* Il contenitore della hero ha pointer-events:none per non bloccare il video:
   riabilito solo i figli che devono restare cliccabili. */
.fs-hero__eyebrow,.fs-hero__title,.fs-hero__sub,.fs-hero__btn,.fs-hero__metaw,
.fs-hero__btn *,.fs-hero__metaw *{pointer-events:auto}

.fs-hero__eyebrow .text-wrapper p{
  font-family:'General Sans',sans-serif;font-size:12px;line-height:1.4;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0 0 14px}

/* il widget rende un <p class="text-h1">, non un <h1> */
.fs-hero__title .text-wrapper p.text-h1{
  font-size:clamp(44px,6vw,88px);line-height:1.04;letter-spacing:-.012em;color:#fff;margin:0}

.fs-hero__sub .text-wrapper p{
  font-family:'General Sans',sans-serif;font-size:18px;line-height:1.55;font-weight:300;
  color:rgba(255,255,255,.82);max-width:46ch;margin:20px 0 0}

/* bottone contorno: cambio solo colori e forma, il layout interno resta del tema */
.fs-hero__btn{margin-top:34px}
.fs-hero__btn .pe--button--wrapper>a{
  border-radius:0!important;background:rgba(20,17,15,.30)!important;
  border:1px solid rgba(255,255,255,.62)!important;color:#fff!important;
  font-family:'General Sans',sans-serif!important;font-size:13px!important;font-weight:500!important;
  letter-spacing:.12em!important;text-transform:uppercase!important}
.fs-hero__btn .pe--button--wrapper>a:hover{
  background:#FAF7F2!important;color:#14110F!important;border-color:#FAF7F2!important}

.fs-hero__meta{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.fs-hero__stats{display:flex;gap:40px}
.fs-hero__stats>div{display:flex;flex-direction:column;align-items:flex-start}
.fs-hero__stats b{font-family:'Playfair Display',serif;font-weight:400;font-size:30px;line-height:1.1;color:#fff}
.fs-hero__stats span{font-family:'General Sans',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:2px}
.fs-hero__scroll{display:none}

@media (max-width:1024px){
  .fs-hero__stats{gap:30px}
  .fs-hero__stats b{font-size:26px}
  .fs-hero__sub .text-wrapper p{font-size:16px}
}
@media (max-width:767px){
  /* icona account fuori dall'header mobile: la classe elementor-hidden-mobile
     viene sovrascritta dal tema (wd--show--on--top), quindi la forzo qui */
  header.site-header .elementor-element.elementor-element-d5fe140{display:none!important}
  .fs-hero__btn{display:none}
  .fs-hero__eyebrow .text-wrapper p{font-size:10px;letter-spacing:.15em;margin-bottom:10px}
  .fs-hero__sub .text-wrapper p{font-size:15px;margin-top:14px;max-width:none}
  .fs-hero__metaw{width:100%}
  .fs-hero__meta{align-items:stretch;gap:0;border-top:1px solid rgba(255,255,255,.26);padding-top:18px}
  .fs-hero__stats{justify-content:flex-start;gap:34px}
  .fs-hero__stats b{font-size:24px}
  .fs-hero__scroll{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:20px}
  .fs-hero__scroll span{font-family:'General Sans',sans-serif;font-size:9px;font-weight:500;
    letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.58)}
  .fs-hero__scroll i{display:block;width:1px;height:24px;
    background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0))}
}

/* --- "Scorri" anche su desktop, centrato in fondo alla hero --- */
@media (min-width:768px){
  /* il widget HTML e' position:relative: lo rendo statico cosi il riferimento
     diventa la riga interna, che occupa tutta la larghezza della hero */
  .elementor-457 .elementor-element.elementor-element-e231941{position:static!important}
  .elementor-457 .elementor-element.elementor-element-e231941 .fs-hero__meta{position:static}
  .elementor-457 .elementor-element.elementor-element-6354117 .fs-hero__scroll{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    position:absolute;left:50%;bottom:-52px;transform:translateX(-50%);
    z-index:4;pointer-events:none}
  .fs-hero__scroll span{font-family:'General Sans',sans-serif;font-size:10px;font-weight:500;
    letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .fs-hero__scroll i{display:block;width:1px;height:30px;
    background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0))}
  .elementor-457 .elementor-element.elementor-element-6354117{position:relative}
}

/* --- Logo: allineamento ottico con menu e icone.
       Il marchio ha "by Sari" sotto, quindi il baricentro visivo della
       scritta sta piu in alto del centro del box: lo abbasso di qualche px. --- */
.site-header .site-branding img{transform:translateY(5px)}
/* Su mobile l'allineamento non si fa piu' spostando l'immagine:
   vedi sezione 5 (header mobile) in fondo a questo file. */

/* ===== fine blocco hero ===== */


/* =========================================================
   FS26 · MENU MOBILE A SCHERMO INTERO — fix 26 lug 2026
   Il tema imposta .site--nav.nav--fullscreen .site--menu{z-index:-5}
   (pensato per la variante "slide", dove la pagina si sposta).
   Qui la variante e' "overlay--overlay": la pagina resta ferma,
   quindi il pannello finiva DIETRO al contenuto e si vedeva solo
   il fondo chiaro. Lo rialzo quando il menu e' aperto.
   ========================================================= */
/* NB 28 lug: era tutto su :has(.menu--toggle.active), ma iOS Safari ha
   bug di invalidazione di :has() sulle classi cambiate a runtime — su
   iPhone queste regole NON scattavano (logo e icone restavano scure).
   Lo stato aperto ora e' body.fs-menu-aperto, specchiato dal toggle da
   assets/js/fs-menu.js. */
body.fs-menu-aperto .site--nav.nav--fullscreen .site--menu{z-index:1!important}
body.fs-menu-aperto .site--nav.nav--fullscreen .nav_bg_opacity{z-index:0!important}
/* la barra dell'header (logo e icone) resta sopra al pannello */
header.site-header .elementor-element.elementor-element-3cc9155,
header.site-header .elementor-element.elementor-element-8ad87df > .e-con-inner{position:relative;z-index:3}
header.site-header .elementor-element.elementor-element-2b60637,
header.site-header .elementor-element.elementor-element-d429176,
header.site-header .elementor-element.elementor-element-225dde7,
header.site-header .elementor-element.elementor-element-9f66adf{position:relative;z-index:3}
/* con il pannello scuro aperto, logo e icone devono restare chiari */
body.fs-menu-aperto header.site-header,
body.fs-menu-aperto header.site-header .e-con{--mainColor:#f1f1f1!important;--secondaryColor:#858585!important}
body.fs-menu-aperto header.site-header .site-branding img.main__logo,
body.fs-menu-aperto header.site-header .site-branding img.sticky__main__logo{display:none!important}
body.fs-menu-aperto header.site-header .site-branding img.secondary__logo,
body.fs-menu-aperto header.site-header .site-branding img.sticky__secondary__logo{display:block!important}
/* il contenitore radice del template menu (1314) esce con il fondo chiaro
   nonostante abbia layout--switched: lo rendo trasparente, cosi si vede
   il nero del pannello e i link bianchi tornano leggibili */
.site--menu.menu--fullscreen .elementor-element.elementor-element-f0ebf5b{background-color:transparent!important}
.site--menu.menu--fullscreen,
.site--menu.menu--fullscreen .e-con{--mainColor:#f1f1f1!important;--secondaryColor:#8a8a8a!important;--mainBackground:#0f0f0f!important}
/* la riga secondaria (Home/Atelier/Catalogo/Blog/Contatti/Lavora con noi)
   era su una riga sola e usciva dallo schermo: la mando a capo */
.site--menu.menu--fullscreen .menu.main-menu{flex-wrap:wrap;justify-content:center;
  row-gap:6px;column-gap:22px;padding-left:20px;padding-right:20px}
.site--menu.menu--fullscreen .menu.main-menu > li > a{white-space:nowrap}
/* ===== fine fix menu mobile ===== */

/* =========================================================
   FS26 · Sposa / Sposo — inquadratura foto (26 lug 2026)
   Le due card erano gia' identiche per dimensioni, ma le foto
   erano centrate (object-position 50% 50%) e tagliavano i volti.
   Le ancoro in alto e centrate in orizzontale: si vedono i visi
   e si taglia via il watermark impresso in basso.
   ========================================================= */
.elementor-457 .elementor-element.elementor-element-16fe520 img,
.elementor-457 .elementor-element.elementor-element-2154ad4 img{object-position:50% 0%!important}
/* ===== fine fix sposa/sposo ===== */

/* =========================================================
   FS26 · Sposa / Sposo — tutto il box cliccabile (26 lug 2026)
   Lo pseudo-elemento sul link non funzionava: il widget CTA ha
   overflow:hidden e lo tagliava. Uno script nel template header
   inserisce un <a class="fs-card-link"> di copertura; qui lo stendo
   sull'intera card. Resta un link vero: tastiera, tasto centrale,
   apri-in-nuova-scheda funzionano.
   ========================================================= */
.elementor-457 .elementor-element.elementor-element-16fe520,
.elementor-457 .elementor-element.elementor-element-2154ad4{position:relative}
.fs-card--linked{cursor:pointer}
a.fs-card-link{position:absolute;inset:0;z-index:6;display:block;
  font-size:0;line-height:0;color:transparent;text-decoration:none;background:transparent}
a.fs-card-link:focus-visible{outline:2px solid #FAF7F2;outline-offset:-8px}
/* il wrapper della CTA copre tutta la card: deve stare SOTTO l'overlay,
   altrimenti intercetta lui il clic. L'hover della scritta lo riproduco
   sul passaggio sulla card. */
.elementor-457 .elementor-element.elementor-element-ead723e,
.elementor-457 .elementor-element.elementor-element-924d4a1{z-index:auto}
.elementor-457 .elementor-element.elementor-element-16fe520 .cta--wrapper,
.elementor-457 .elementor-element.elementor-element-2154ad4 .cta--wrapper{z-index:1}
.fs-card--linked:hover .cta--button{opacity:.75;transition:opacity .24s ease}

/* ==========================================================================
   4. DA: widget HTML nel footer (elemento d980efd, template 576)
      Era un <style> dentro il widget: il widget va poi svuotato.
   ========================================================================== */

.fs-cta-helper{display:none !important;}
footer#colophon .elementor-576{background-color:#000;}
.elementor-element-c4de0e3{transition:opacity .25s ease;}
.elementor-element-c4de0e3.fs-cta-fixed{
  position:fixed !important;
  left:0; right:0; bottom:0;
  width:100% !important;
  margin:0 !important;
  z-index:99;
  box-shadow:0 -2px 12px rgba(0,0,0,.08);
}
.elementor-element-c4de0e3.fs-cta-hidden{opacity:0;pointer-events:none;}

/* fs-cta-btn-fix: il pulsante riempie tutta l'altezza della barra (via i 5px bianchi sotto) */
.elementor-element-c4de0e3 .elementor-element-77e6013 .elementor-button{height:100%;display:inline-flex;align-items:center;justify-content:center;}

/* fs-h1-size: H1 uniformi 4rem su tutto il sito (scala su tablet/mobile) */
h1{font-size:4rem !important;line-height:1.15 !important;}
@media (max-width:1024px){h1{font-size:3rem !important;}}
@media (max-width:767px){h1{font-size:2.25rem !important;}}

/* fs-form-spacing: spaziatura uniforme campi form Mautic (come pagina Contatti) */
.mauticform_wrapper .mauticform-row{margin-bottom:20px;}
.mauticform_wrapper .mauticform-label{display:block;margin-bottom:8px;}
.mauticform_wrapper .mauticform-radiogrp-row,.mauticform_wrapper .mauticform-checkboxgrp-row{margin:8px 0;}
.mauticform_wrapper input[type=radio],.mauticform_wrapper input[type=checkbox]{margin-right:8px;}
.mauticform_wrapper .mauticform-button-wrapper{margin-top:8px;margin-bottom:0;}

/* fs-form-datelabel: etichetta per il campo data dove il form non la mostra */
.mauticform_wrapper .mauticform-row.mauticform-date:not(:has(label)):not(:has(.mauticform-helpmessage))::before{content:'Data Matrimonio';display:block;margin-bottom:8px;}

/* fs-cta-mobile: su mobile barra snella, solo bottone a tutta larghezza */
@media (max-width:767px){
  .elementor-element-c4de0e3 .elementor-element-15d0393{display:none;}
  .elementor-element-c4de0e3 .elementor-element-77e6013{width:100%;}
  .elementor-element-c4de0e3 .elementor-element-77e6013 .elementor-button{width:100%;justify-content:center;}
}

/* fs-form-inline-options: radio/checkbox sulla stessa riga dell'etichetta */
.mauticform_wrapper .mauticform-radiogrp-row input,.mauticform_wrapper .mauticform-checkboxgrp-row input{display:inline-block;width:auto;margin-right:8px;vertical-align:middle;}
.mauticform_wrapper .mauticform-radiogrp-row label,.mauticform_wrapper .mauticform-checkboxgrp-row label{display:inline;vertical-align:middle;margin:0;}

/* ==========================================================================
   5. HEADER MOBILE: logo allineato alle icone (27 lug 2026)
   ========================================================================== */

/* --------------------------------------------------------------
   PROBLEMA 1 — logo piu' alto delle icone.
   Il widget del logo e quelli delle icone sono alti 44px (stirati
   dalla colonna), ma .site-branding e' un blocco ancorato in alto:
   il logo restava ~8px sopra l'asse di ricerca/preferiti (e la
   vecchia correzione translateY(4px) ne recuperava solo la meta').
   Stessa cosa per l'hamburger, il cui toggle e' alto 35px.

   PROBLEMA 2 — icone strette e ammassate.
   Le due icone popup hanno la box piu' stretta del loro contenuto
   (svg 30px + padding): si sovrapponevano fra loro, e l'hamburger
   sbordava a destra compensando con un margine di 16px.
   Si fissa la larghezza reale e si allarga la colonna delle icone,
   cosi' il margine a destra torna 20px come quello del logo.

   NB: la colonna del logo deve mantenere la sua larghezza (33.34%
   della riga): l'immagine del logo e' a width:100% e senza una base
   di larghezza collasserebbe a zero.
   -------------------------------------------------------------- */
@media (max-width:767px){

  /* logo e hamburger: contenuto centrato nel box del widget */
  header.site-header .elementor-element-2b60637 > .elementor-widget-container,
  header.site-header .elementor-element-9f66adf > .elementor-widget-container{
    display:flex;
    align-items:center;
    height:100%;
  }
  header.site-header .site-branding{display:flex;align-items:center}

  /* niente piu' correzione ottica: il logo e' centrato davvero */
  header.site-header .site-branding img{transform:none}

  /* la colonna centrale ospita solo il menu desktop: su mobile e' vuota.
     La collasso e lascio lo spazio liberato alla colonna delle icone. */
  header.site-header .elementor-element-bb65bad{display:none}
  header.site-header .elementor-element-3cc9155{flex:0 0 33.34%}
  header.site-header .elementor-element-8ad87df{flex:1 1 auto;width:auto}

  /* larghezze reali: ricerca 37px, preferiti 44px, hamburger 35px */
  header.site-header .elementor-element-d429176{width:37px}
  header.site-header .elementor-element-225dde7{width:44px}
  header.site-header .elementor-element-9f66adf{width:35px;margin-right:0}
}

/* ==========================================================================
   6. HOMEPAGE MOBILE — "un blocco per schermata" (27 lug 2026)
      Riferimento: mockup FAUSTO SARI 2026 · homepage mobile 390x844.
      Stessi blocchi e stesso ordine di Elementor: cambia solo la
      presentazione. Ogni sezione occupa ~92svh con scroll-snap, il video
      dell'hero resta a tutto schermo (100svh).
      svh e non vh: su iOS vh include la barra del browser e taglia il
      contenuto. Il fallback in vh serve ai browser senza svh.
   ========================================================================== */
@media (max-width:767px){

  /* ---------- scroll a schermate: la calamita (31 lug 2026) ----------
     mandatory. Ci sono passato per proximity e il cliente NON sentiva piu'
     l'aggancio: proximity scatta solo se lo scorrimento finisce gia' vicino
     al bordo del modulo, quindi dopo un flick normale non aggancia mai (su
     iOS praticamente inerte). Serve mandatory perche' l'effetto si senta.
     Il timore dei moduli piu' alti dello schermo NON si verifica, misurato
     il 31 lug 2026 a 390x844: quando l'area di aggancio e' piu' grande
     della finestra la spec ammette come valida ogni posizione in cui l'area
     copre ancora la finestra, e i browser la rispettano — nel catalogo
     (1195px) si sosta liberamente da +0 a +351, cioe' fino a vederne il
     fondo; nei contatti (931px) da +0 a +97; il fondo pagina si raggiunge.
     ATTENZIONE: quella liberta' esiste solo se in fondo alla pagina resta
     un punto di aggancio valido. Togliendo l'aggancio 'end' al footer, con
     mandatory il browser rimbalzava indietro di 800px appena si provava a
     entrare nei contatti. Quindi footer 'end' + contatti 'start': due punti
     validi, si sosta in entrambi.
     scroll-snap-stop: normal (era always): con always ogni singolo flick
     veniva fermato sul modulo successivo. Cosi' invece uno scorrimento
     deciso puo' attraversarne piu' d'uno e atterrare comunque agganciato.
     scroll-padding-top resta 0 DI PROPOSITO: ogni modulo si porta dentro
     lo spazio dell'header fisso (padding-top >= var(--fs-head) = 84px),
     quindi agganciando il bordo del modulo al bordo alto della finestra i
     primi 84px sono il suo stesso padding e niente finisce sotto l'header.
     Unica eccezione: il blocco contatti del footer, che di suo ha 20px —
     li' si compensa con scroll-margin-top (vedi sotto).
     :has() limita la calamita alla SOLA homepage (prima la regola era su
     html nudo, quindi attiva su tutte le pagine sotto i 767px): dove non
     e' supportato (iOS < 15.4) la pagina scorre normale, senza calamita.
     Lo smooth scroll del tema (Lenis) e' istanziato con syncTouch:false:
     sul telefono non intercetta il touch, quindi lo snap e' quello nativo
     del browser e non c'e' conflitto. */
  html:has(body.page-id-457){
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
  }
  body.page-id-457 .elementor-457 > .e-con{
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
  /* DUE punti di aggancio in fondo, servono entrambi:
     - 'end' sul footer = il fondo pagina. Senza, con mandatory non esiste
       una posizione valida oltre l'ultimo modulo e il browser respinge
       indietro chi prova a entrare nei contatti (misurato: -800px);
     - 'start' sul blocco contatti "Il tuo Si' comincia da qui" (lo
       screenshot 08), altrimenti con il solo 'end' si finisce dritti in
       fondo alla pagina scavalcando indirizzo e orari. Ha 20px di padding
       suo: +16px di scroll-margin per non incollare il titolo all'header. */
  body.page-id-457 footer#colophon{
    scroll-snap-align: end;
  }
  body.page-id-457 footer#colophon .elementor-element-de47904{
    scroll-snap-align: start;
    scroll-margin-top: 16px;
  }
  /* chi ha chiesto meno movimento non vuole nemmeno la calamita */
  @media (prefers-reduced-motion: reduce){
    html:has(body.page-id-457){
      scroll-snap-type: none;
      scroll-behavior: auto;
    }
  }

  /* ---------- misure di riferimento della schermata ----------
     --fs-bar  = barra CTA fissa in basso (Prenota + telefono)
     --fs-head = header fisso in alto. E' lui che taglia le teste nelle foto
                 Sposa/Sposo: le due immagini hanno i volti a filo del bordo
                 superiore, quindi tutto cio' che sta nei primi 84px di un
                 blocco agganciato a start finisce coperto dall'header.
     Su body e non sui singoli contenitori: servono anche al footer. */
  body{
    --fs-bar: 50px;
    --fs-head: 84px;
  }
  /* sotto i 375px l'etichetta "PRENOTA UN APPUNTAMENTO" va a capo e la barra
     fissa passa da 50 a 100px (misurato a 320 e 360px il 31 lug 2026):
     senza questo i moduli riservano in basso solo 76px e la barra copre
     l'ultima riga di contenuto. L'header invece resta 84px a ogni
     larghezza e anche in stato "sticked": verificato, nessun JS serve. */
  @media (max-width:374px){
    body{ --fs-bar: 100px; }
  }
  body.page-id-457 .elementor-457 > .e-con,
  body.page-id-457 .elementor-element-342bcb3,
  body.page-id-457 .elementor-element-d5f4408,
  body.page-id-457 .elementor-element-16fe520,
  body.page-id-457 .elementor-element-2154ad4{
    box-sizing: border-box;
  }

  /* ---------- 1 · HERO VIDEO — una schermata esatta ----------
     dvh e non svh: su iOS la barra di Safari si ritrae appena si scorre e
     la finestra si allunga di ~90px. Con svh (viewport "piccola", barre
     visibili) il blocco resta corto e si vede spuntare quello dopo; con dvh
     l'altezza segue sempre la finestra vera. vh/svh restano come ripiego
     per i browser che non conoscono dvh. */
  body.page-id-457 .elementor-element-6354117{
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    justify-content: flex-end;
    padding-bottom: calc(var(--fs-bar) + 18px);
  }
  /* Il contenitore del testo si porta dietro 92px di margine inferiore
     impostati in Elementor per il desktop: erano quelli a tenere "Scorri"
     lontano dalla barra CTA. La regola di Elementor e' piu' specifica
     (tre classi), quindi serve !important. */
  body.page-id-457 .elementor-element-1d6939a{
    margin-bottom: 0 !important;
  }
  /* il pulsante "Scopri le collezioni" c'era ma era nascosto su mobile:
     nel mockup e' il primo invito all'azione, sopra i numeri.
     ATTENZIONE: l'etichetta e' doppia (.pb__main + .pb__hover per lo
     scorrimento all'hover) e la copia hover sta a top:100% + var(--padTop),
     ritagliata dall'overflow del link. Quindi il pulsante si dimensiona
     SOLO con le variabili del tema: mettendo padding/min-height a mano la
     copia hover rientra nel riquadro e il testo appare raddoppiato. */
  /* il contenitore del testo allinea gli elementi a sinistra (quindi stretti
     quanto il contenuto): il pulsante va portato a larghezza piena a mano */
  body.page-id-457 .elementor-element-3bb4a95{
    display: block !important;
    margin: 22px 0 0;
    width: 100% !important;
    align-self: stretch !important;
  }
  body.page-id-457 .elementor-element-3bb4a95 .pe--button{
    --padTop: 16px;
    --padLeft: 20px;
    width: 100%;
  }
  body.page-id-457 .elementor-element-3bb4a95 .pe--button--wrapper{ width: 100%; }
  body.page-id-457 .elementor-element-3bb4a95 .pe--button--wrapper a{
    width: 100%;
    border-radius: 0;
  }
  body.page-id-457 .elementor-element-3bb4a95 .pb__main{
    justify-content: center !important;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  /* numeri + "scorri": il filetto c'e' gia' dentro il widget, non aggiungerne */
  body.page-id-457 .elementor-element-e231941{ margin-top: 18px; }
  body.page-id-457 .elementor-element-e231941 .fs-hero__scroll{ margin-top: 10px; }

  /* ---------- 2 · ELEGANZA / TRENT'ANNI — una schermata ---------- */
  /* la sezione madre non deve piu' imporre la propria altezza:
     le due schermate sono i suoi due contenitori interni. */
  body.page-id-457 .elementor-element-9689cb3{
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    row-gap: 0 !important;
    scroll-snap-align: none;
  }
  body.page-id-457 .elementor-element-342bcb3,
  body.page-id-457 .elementor-element-d5f4408{
    /* margini di Elementor pensati per il desktop: +50px sotto l'hero e
       -20px di sovrapposizione fra i due blocchi. Su mobile sfasavano le
       schermate rispetto all'altezza della finestra. */
    margin-top: 0 !important;
    /* min-height a tutta finestra (26 ago 2026 — REVISIONE della scelta del
       31 lug, che qui diceva "niente min-height").
       Il timore di allora era fondato ma il rimedio era sbagliato: a 844px
       questi due moduli stavano in 789 e 668, e portarli a 100dvh lasciando
       il contenuto centrato apriva un vuoto attorno. Il vuoto pero' non
       veniva dall'altezza, veniva dal CENTRARE: lo spazio in piu' si
       raccoglieva tutto in cima e in fondo.
       Ora l'altezza c'e' e lo spazio viene distribuito — space-between qui
       sotto per 342bcb3, foto piu' alte per d5f4408 — quindi le schermate
       sono piene e non si intravede mai il modulo successivo.
       Misurato il 26 ago 2026 a 390x844 e 360x800: entrambi al 100% della
       finestra, nessun blocco sotto il pieno schermo. */
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    gap: 22px;
    /* in alto lo spazio dell'header fisso, in basso quello della barra CTA */
    padding: calc(var(--fs-head) + 10px) 20px calc(var(--fs-bar) + 26px);
  }
  /* ordine del mockup: occhiello + titolo, titolo grande, paragrafo, foto,
     didascalia. Paragrafo e didascalie sono i widget aggiunti in Elementor
     (classi fs-par-atelier / fs-didascalia). */
  /* Lo spazio in piu' finisce FRA gli elementi, non attorno: i ~55px che
     mancavano al pieno schermo si spalmano nei tre stacchi (occhiello →
     titolo → paragrafo → foto → didascalia), circa 18px l'uno. Il blocco
     respira invece di avere un buco in fondo. */
  body.page-id-457 .elementor-element-342bcb3{ display: flex; flex-direction: column; justify-content: space-between; }
  body.page-id-457 .elementor-element-0ad8859{ order: 1; }
  body.page-id-457 .elementor-element-6b22a8c{ order: 2; }
  body.page-id-457 .elementor-element-342bcb3 .fs-par-atelier{ order: 3; }
  body.page-id-457 .elementor-element-4c63681{ order: 4; }
  body.page-id-457 .elementor-element-342bcb3 .fs-didascalia{ order: 5; margin-top: -12px; }
  /* 30svh e non 34: con l'header fisso scontato dall'altezza utile il
     contenuto della schermata arrivava a 800px su 812 disponibili. */
  body.page-id-457 .elementor-element-4c63681 img{
    width: 100%;
    height: 30vh;
    height: 30svh;
    object-fit: cover;
    display: block;
  }

  /* ---------- 3 · IL RACCONTO + I NUMERI — 92svh ---------- */
  /* le due foto affiancate (nel mockup sono una coppia, non impilate) */
  body.page-id-457 .elementor-element-d5f4408{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "img1  img2"
      "dida1 dida2"
      "testo testo";
    /* space-between e non center (26 ago 2026): con il blocco portato a tutta
       finestra, "center" raccoglieva i 176px in piu' sopra e sotto la griglia
       — il vuoto che il 31 lug aveva fatto scartare il min-height. Distribuito
       fra le righe, e con le foto piu' alte qui sotto, non resta buco. */
    align-content: space-between;
    column-gap: 10px;
    row-gap: 20px;
  }
  body.page-id-457 .elementor-element-6152f5b{ grid-area: img1; }
  body.page-id-457 .elementor-element-154ae30{ grid-area: img2; }
  body.page-id-457 .elementor-element-567eb6c{ grid-area: testo; }
  /* una didascalia per foto (1 ago 2026): prima c'era una sola riga "dida"
     larga due colonne, cosi' quando e' stata aggiunta la seconda didascalia
     le due finivano nella STESSA cella e si stampavano una sopra l'altra
     (si leggeva "LA SALA SPOS" con la A e la O sovrapposte). Ora ogni
     didascalia ha la sua colonna, sotto la foto a cui si riferisce:
     23d8409 = sala sposo (sinistra), 6cca735 = sala sposa (destra).
     Il width:100% serve perche' Elementor mette width:50% sul widget:
     dentro una colonna di grid diventerebbe meta' colonna e il testo
     andrebbe a capo. */
  body.page-id-457 .elementor-element-d5f4408 .elementor-element-23d8409{ grid-area: dida1; }
  body.page-id-457 .elementor-element-d5f4408 .elementor-element-6cca735{ grid-area: dida2; }
  body.page-id-457 .elementor-element-d5f4408 .fs-didascalia{ width: 100%; }
  /* 58svh (26 ago 2026; prima 40, prima ancora 30): sono le foto a prendersi
     lo spazio del blocco portato a tutta finestra. Alzare LORO invece di
     allargare gli stacchi e' cio' che tiene il blocco pieno senza staccare le
     didascalie dalle immagini a cui si riferiscono. */
  body.page-id-457 .elementor-element-6152f5b img,
  body.page-id-457 .elementor-element-154ae30 img{
    width: 100%;
    height: 58vh;
    height: 58svh;
    aspect-ratio: auto;
    object-fit: cover;
    display: block;
  }
  /* Sotto i 375px la barra CTA fissa passa da 50 a 100px (vedi --fs-bar piu'
     sopra), quindi il blocco ha 50px di padding in piu' da coprire: con le
     foto a 58svh sfora la finestra di 44px e si intravede il blocco dopo.
     Misurato a 360x800 il 26 ago 2026: 844px su 800 disponibili. */
  @media (max-width: 374px){
    body.page-id-457 .elementor-element-6152f5b img,
    body.page-id-457 .elementor-element-154ae30 img{
      height: 50vh;
      height: 50svh;
    }
  }

  /* ---------- 4 e 5 · SPOSA / SPOSO — una schermata a tutto campo ---------- */
  body.page-id-457 .elementor-element-0e6ab4c{
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    scroll-snap-align: none;
  }
  /* qui il 100dvh RESTA: sono le due foto a tutto campo, per struttura
     grafica devono occupare almeno la schermata intera (non c'e' vuoto da
     riempire, e' l'immagine stessa a coprirla). */
  body.page-id-457 .elementor-element-16fe520,
  body.page-id-457 .elementor-element-2154ad4{
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
  /* altezza DEFINITA su tutta la catena: con il solo min-height sul
     contenitore un height:100% piu' in basso non si risolve e l'immagine
     resta alta quanto il suo formato naturale. */
  body.page-id-457 .elementor-element-ead723e,
  body.page-id-457 .elementor-element-924d4a1,
  body.page-id-457 .elementor-element-ead723e > .elementor-widget-container,
  body.page-id-457 .elementor-element-924d4a1 > .elementor-widget-container,
  body.page-id-457 .elementor-element-ead723e .pe--call--to--action,
  body.page-id-457 .elementor-element-924d4a1 .pe--call--to--action{
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    width: 100% !important;
  }
  body.page-id-457 .elementor-element-ead723e .pe--call--to--action,
  body.page-id-457 .elementor-element-924d4a1 .pe--call--to--action{
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    /* il widget ha 150px di padding orizzontale (impostazione Elementor per
       il desktop): su mobile lasciava al contenuto solo 90px di larghezza.
       Il respiro lo dà il wrapper qui sotto. */
    padding: 0 !important;
    /* il widget ha fondo bianco dal tema: e' lui che si vedrebbe nella
       fascia lasciata libera sopra la foto (vedi .cta--background).
       A blocco agganciato quella fascia sta dietro l'header, mentre in
       mezzo allo scorrimento questo scuro si salda al fondo sfumato della
       card precedente e lo stacco non si nota. */
    background-color: #14110F !important;
  }
  /* TESTE TAGLIATE — le due foto sono 950x1280 (rapporto 0,74) dentro una
     card 375x812 (0,46): con object-fit:cover la scalatura e' governata
     dall'altezza, quindi il ritaglio avviene solo ai lati e in verticale si
     vede la foto INTERA, teste comprese... solo che i volti stanno a filo
     del bordo alto e finivano sotto l'header fisso (84px).
     Non basta object-position: non c'e' margine verticale da recuperare.
     Quindi la foto parte sotto l'header: la fascia che resta scoperta sta
     dietro all'header stesso quando il blocco e' agganciato. */
  body.page-id-457 .elementor-element-ead723e .cta--background,
  body.page-id-457 .elementor-element-924d4a1 .cta--background{
    position: absolute !important;
    inset: var(--fs-head) 0 0 !important;
    height: auto !important;
  }
  body.page-id-457 .elementor-element-ead723e .cta--background img,
  body.page-id-457 .elementor-element-924d4a1 .cta--background img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
  /* velo scuro solo in basso, per tenere leggibile testo e pulsante.
     Sta sul contenitore della card (non su .cta--background, dove il tema ha
     gia' uno pseudo-elemento): con z-index esplicito sopra la foto e sotto
     il testo, altrimenti il titolo bianco finisce bianco-su-bianco. */
  body.page-id-457 .elementor-element-ead723e .pe--call--to--action::before,
  body.page-id-457 .elementor-element-924d4a1 .pe--call--to--action::before{
    content: '';
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: 72%;
    /* gli abiti sono bianchi: senza una sfumatura decisa il titolo bianco
       diventa illeggibile a meta' foto. */
    background: linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.28) 38%,
      rgba(0,0,0,.62) 68%,
      rgba(0,0,0,.85) 100%);
    pointer-events: none;
  }
  /* testo e pulsante in basso a sinistra (il tema li centra in una colonna
     di larghezza automatica: serve larghezza piena + allineamento a sinistra) */
  body.page-id-457 .elementor-element-ead723e .cta--wrapper,
  body.page-id-457 .elementor-element-924d4a1 .cta--wrapper{
    position: relative;
    z-index: 2;
    flex: 1 1 100%;
    width: 100% !important;
    max-width: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: left !important;
    padding: 0 20px calc(var(--fs-bar) + 26px);
  }
  body.page-id-457 .elementor-element-ead723e .cta--title,
  body.page-id-457 .elementor-element-924d4a1 .cta--title,
  body.page-id-457 .elementor-element-ead723e .cta--text,
  body.page-id-457 .elementor-element-924d4a1 .cta--text{
    width: 100%;
    text-align: left !important;
  }
  body.page-id-457 .elementor-element-ead723e .cta--title h3,
  body.page-id-457 .elementor-element-924d4a1 .cta--title h3{
    font-size: 40px;
    line-height: 1.06;
    text-align: left !important;
  }
  body.page-id-457 .elementor-element-ead723e .cta--text,
  body.page-id-457 .elementor-element-924d4a1 .cta--text{ margin-top: 8px; }
  /* "Scopri di piu'" da link sottolineato a pulsante pieno a tutta larghezza.
     Come per il pulsante dell'hero il link ha l'etichetta doppia: qui la box
     del pulsante la fa il WRAPPER (fondo, altezza, centratura) e il link
     resta della sua altezza naturale, cosi' la copia hover resta ritagliata. */
  body.page-id-457 .elementor-element-ead723e .cta--button,
  body.page-id-457 .elementor-element-924d4a1 .cta--button{
    margin-top: 20px;
  }
  body.page-id-457 .elementor-element-ead723e .cta--button,
  body.page-id-457 .elementor-element-924d4a1 .cta--button{
    display: block;
    width: 100%;
  }
  body.page-id-457 .elementor-element-ead723e .cta--button .pe--button,
  body.page-id-457 .elementor-element-924d4a1 .cta--button .pe--button{
    display: block;
    width: 100% !important;
    background: #fbf8f4;
  }
  body.page-id-457 .elementor-element-ead723e .cta--button .pe--button--wrapper,
  body.page-id-457 .elementor-element-924d4a1 .cta--button .pe--button--wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 0 20px;
  }
  body.page-id-457 .elementor-element-ead723e .cta--button a,
  body.page-id-457 .elementor-element-924d4a1 .cta--button a{
    color: #16181a !important;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  /* via la sottolineatura: ora e' un pulsante pieno */
  body.page-id-457 .elementor-element-ead723e .cta--button a::after,
  body.page-id-457 .elementor-element-924d4a1 .cta--button a::after{
    display: none !important;
  }

  /* ---------- 6 · IL NOSTRO CATALOGO ---------- */
  body.page-id-457 .elementor-element-e51a53d{
    flex-direction: column;
    padding: 0 !important;
    row-gap: 0;
  }
  /* immagine di testa: una fascia, non mezzo schermo.
     L'altezza va data al WRAPPER .parallax--image, non all'immagine: il
     wrapper ha height:650px impostata in Elementor (regola di post-457.css)
     e restringere solo la foto lasciava ~440px di vuoto grigio fra la foto
     e il titolo "Il Nostro Catalogo".
     L'effetto parallasse continua a funzionare: il tema scala la foto del
     20% e la trasla dentro il wrapper, che ha overflow:hidden. */
  /* La fascia comincia SOTTO l'header (31 lug 2026, segnalazione cliente).
     Prima la foto partiva dal bordo alto del modulo e i suoi primi 84px
     finivano dietro l'header, che qui e' trasparente: il volto della sposa
     cadeva esattamente li' dentro, con logo e icone addosso. Ora quegli
     84px sono padding della riga, che ha gia' un fondo caldo suo
     (#f2f0ee), e la foto si vede tutta.
     L'altezza complessiva non cambia - prima 26svh + 84 di fascia, ora 84
     di padding + 26svh di fascia - quindi il modulo resta identico e il
     form non si sposta. */
  body.page-id-457 .elementor-element-18ede0b{
    padding: var(--fs-head) 0 0 !important;
  }
  body.page-id-457 .elementor-element-2a9c51a .single-image{
    height: 26vh !important;
    height: 26svh !important;
    overflow: hidden;
  }
  /* I volti restavano fuori dalla fascia (1 ago 2026, segnalazione cliente).
     La foto e' verticale (1536x1920) dentro una banda di 375x211: con
     object-position centrato si vedeva solo il pizzo della schiena e la
     cravatta, le teste erano tagliate via.
     Il parallasse del tema (transform: translateY(10%) scale(1.2) messo
     inline dal JS) peggiorava le cose: fa scorrere l'inquadratura di +-10%
     dell'altezza della banda, cioe' +-21px, quindi la testa dello sposo
     entrava e usciva a seconda del punto di scroll. Su 211px di altezza
     l'effetto non si nota: lo spengo qui e inquadro dall'8% dell'eccedenza,
     che tiene dentro i due volti a ogni larghezza (misurato a 320/375/430)
     e lascia in basso il pizzo dell'abito. Desktop invariato. */
  body.page-id-457 .elementor-element-2a9c51a img{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: 50% 8%;
    transform: none !important;
    display: block;
  }
  body.page-id-457 .elementor-element-6fec60a{ padding: 0 !important; }
  body.page-id-457 .elementor-element-10842d8{
    padding: 26px 20px calc(var(--fs-bar) + 26px) !important;
  }
  /* campi: etichetta piccola sopra, input a filo sottolineato */
  body.page-id-457 .elementor-element-10ea510 .mauticform-input{
    border: 0;
    border-bottom: 1px solid rgba(22,24,26,.25);
    border-radius: 0;
    padding: 10px 0;
    background: transparent;
  }
  body.page-id-457 .elementor-element-10ea510 .mauticform-label{
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .6;
  }
  /* "quale catalogo?" come pillole.
     CORREZIONE 3 ago 2026 (segnalazione su iPhone): erano inline-flex, quindi
     su mobile andavano a capo restando larghe quanto il testo e rientrate
     rispetto agli altri campi — sembravano tre pulsanti scomposti invece di
     una scelta. Ora ogni pillola occupa la riga intera e parte dallo stesso
     bordo sinistro degli input, cosi' la colonna del modulo resta una.
     min-height 48px: e' la misura minima di un'area toccabile, con 40 il dito
     prende spesso la pillola sbagliata. */
  body.page-id-457 .elementor-element-10ea510 .mauticform-radiogrp .mauticform-radiogrp-row{
    display: block;
    margin: 0 0 8px 0;
  }
  body.page-id-457 .elementor-element-10ea510 .mauticform-radiogrp .mauticform-radiogrp-row:last-child{
    margin-bottom: 0;
  }
  body.page-id-457 .elementor-element-10ea510 .mauticform-radiogrp .mauticform-radiogrp-label{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid rgba(22,24,26,.25);
    border-radius: 999px;
    font-size: 13px;
    text-align: center;
  }
  body.page-id-457 .elementor-element-10ea510 .mauticform-radiogrp input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  body.page-id-457 .elementor-element-10ea510 .mauticform-radiogrp input:checked + label,
  body.page-id-457 .elementor-element-10ea510 .mauticform-radiogrp-row:has(input:checked) label{
    background: #16181a;
    border-color: #16181a;
    color: #fff;
  }
  /* pulsante di invio pieno, a tutta larghezza */
  body.page-id-457 .elementor-element-10ea510 .mauticform-button{
    width: 100%;
    min-height: 54px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
  }

  /* ---------- 7 · COLLEZIONI SPOSA ---------- */
  /* A tutta finestra (26 ago 2026). Era min-height:0 !important, messo per
     annullare l'altezza desktop di Elementor: restava a 750px su 844 e si
     vedeva spuntare il footer. Gli !important servono davvero — senza, la
     regola perde contro quella che stava qui prima.
     I 94px in piu' li prende il carousel (regola sotto) e non gli stacchi:
     con space-between si apriva un corridoio di 114px fra titolo e card. */
  body.page-id-457 .elementor-element-c77b53c{
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    justify-content: flex-start;
    padding: 40px 0 calc(var(--fs-bar) + 34px) !important;
  }
  body.page-id-457 .elementor-element-6eed16e{ padding: 0 20px !important; }
  body.page-id-457 .elementor-element-682ac52{
    min-height: 0 !important;
    /* si prende l'altezza avanzata nel blocco portato a tutta finestra,
       tenendo le card centrate nello spazio che ne risulta */
    flex: 1 1 auto !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 !important;
    /* 100px di margine sotto il carousel (impostazione desktop): non ci sono
       frecce ne' pallini da ospitare, era solo vuoto prima del footer */
    margin-bottom: 24px !important;
  }
  /* NB: questo carousel e' di tassonomia (.cr--taxonomy): le card sono solo
     nomi di maison, non hanno foto. Le card grandi con immagine e conteggio
     del mockup richiedono un widget diverso (o le immagini sulle tassonomie),
     quindi qui ci si limita a impaginare quello che c'e'. */
  body.page-id-457 .elementor-element-c30985b .carousel--item{
    height: auto;
    min-height: 96px;
  }

  /* ---------- 8 · CTA FINALE + FOOTER ---------- */
  /* il blocco "Il tuo Si' comincia da qui" + Dove siamo esisteva gia' nel
     footer ma era nascosto su mobile: e' la schermata 8 del mockup. */
  footer#colophon .elementor-element-56b9c89{
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    padding: 30px 20px calc(50px + 26px);
  }
  footer#colophon .elementor-element-56b9c89 .elementor-element-e605541,
  footer#colophon .elementor-element-56b9c89 .elementor-element-4535aca,
  footer#colophon .elementor-element-56b9c89 .elementor-element-d62dc41{
    padding: 0 !important;
    gap: 6px;
  }
  /* etichette (INDIRIZZO / ORARIO / TELEFONO / E-MAIL) in maiuscoletto */
  footer#colophon .elementor-element-56b9c89 .elementor-element-ceb7afb p,
  footer#colophon .elementor-element-56b9c89 .elementor-element-bbabd15 p,
  footer#colophon .elementor-element-56b9c89 .elementor-element-99562b9 p,
  footer#colophon .elementor-element-56b9c89 .elementor-element-4a027ed p{
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .55;
    margin: 0 0 4px;
  }
  /* righe contatto separate da un filetto, come la lista del mockup */
  footer#colophon .elementor-element-4535aca,
  footer#colophon .elementor-element-d62dc41{
    border-top: 1px solid rgba(255,255,255,.14);
    padding-top: 14px !important;
  }
  /* il menu del footer resta sopra, ma piu' compatto */
  footer#colophon .elementor-element-18dc0b3{ padding-bottom: 6px !important; }

  /* ---------- contenuti aggiunti in Elementor (27 lug 2026) ---------- */
  /* didascalie foto: maiuscoletto piccolo e discreto */
  body.page-id-457 .fs-didascalia p{
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .55;
    margin: 0;
  }
  /* descrizione sotto al titolo delle card Sposa/Sposo */
  body.page-id-457 .elementor-element-ead723e .cta--text p,
  body.page-id-457 .elementor-element-924d4a1 .cta--text p{
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,.86);
    max-width: 34ch;
  }
  /* link "tutte le maison" in fondo al carousel */
  body.page-id-457 .fs-tutte-firme{
    margin-top: 16px;
    padding: 0 20px;
    text-align: right;
  }
  body.page-id-457 .fs-tutte-firme p{ margin: 0; }
  body.page-id-457 .fs-tutte-firme a{
    display: inline-block;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
  }

  /* ---------- correzioni dopo la prova su iPhone (27 lug 2026) ---------- */

  /* Su touch lo stato :hover "resta attaccato" dopo il tocco: la regola
     .fs-card--linked:hover .cta--button{opacity:.75} lasciava il pulsante
     delle card Sposa/Sposo sbiadito in modo permanente. */
  @media (hover: none){
    body.page-id-457 .fs-card--linked:hover .cta--button{ opacity: 1 !important; }
  }

  /* etichetta del pulsante delle card centrata, come nel mockup */
  body.page-id-457 .elementor-element-ead723e .cta--button .pb__main,
  body.page-id-457 .elementor-element-924d4a1 .cta--button .pb__main{
    justify-content: center !important;
    width: 100%;
  }

  /* Hero: il pulsante ha un fondo al 30% e si vedevano attraverso i comandi
     del player YouTube. Fondo piu' coprente. La soluzione definitiva e'
     controls=0 nell'URL del video (script del video, non CSS). */
  body.page-id-457 .fs-hero__btn .pe--button--wrapper > a{
    background: rgba(20,17,15,.72) !important;
  }

  /* Footer: i due spaziatori da 36px e i vuoti lasciavano mezzo schermo nero */
  footer#colophon .elementor-element-56b9c89 .elementor-widget-spacer{ display: none; }
  footer#colophon .elementor-element-56b9c89{ gap: 14px; }
  footer#colophon .elementor-element-de47904{ padding-top: 20px !important; }
  footer#colophon .elementor-element-f4ab244{ padding-top: 10px !important; }
  /* Restava comunque un buco nero fra l'e-mail e il logo in fondo:
     76px di padding (riservati alla barra CTA, che pero' qui e' gia'
     tornata statica in cima al footer) + 75px di margine del blocco logo,
     impostati in Elementor per il desktop. */
  footer#colophon .elementor-element-56b9c89{
    min-height: 0 !important;
    padding-bottom: 26px !important;
  }
  footer#colophon .elementor-element-f4ab244{
    margin-top: 22px !important;
  }

  /* ---------- barra CTA fissa: "Prenota" + telefono (mockup) ----------
     Il pulsante telefono e' il widget 11e9899 (classe fs-cta-tel), aggiunto
     nel template footer 576 e visibile solo su mobile. */
  footer#colophon .elementor-element-c4de0e3{
    display: flex;
    align-items: stretch;
    gap: 0;
  }
  footer#colophon .elementor-element-c4de0e3 .elementor-element-77e6013{
    flex: 1 1 auto;
    width: auto !important;
  }
  footer#colophon .fs-cta-tel{
    flex: 0 0 62px;
    display: flex;
    align-items: stretch;
    border-left: 1px solid rgba(255,255,255,.20);
  }
  footer#colophon .fs-cta-tel .elementor-widget-container,
  footer#colophon .fs-cta-tel .elementor-button-wrapper{
    display: flex;
    width: 100%;
  }
  footer#colophon .fs-cta-tel .elementor-button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 0;
    /* il navy della barra appartiene al pulsante "Prenota", non al
       contenitore (che e' bianco): senza questo il telefono restava un
       rettangolo bianco con l'icona bianca dentro, cioe' invisibile. */
    background: #101820;
    color: #fff;
    border-radius: 0;
  }
  footer#colophon .fs-cta-tel .elementor-button svg{
    width: 17px;
    height: 17px;
    fill: currentColor;
  }
  footer#colophon .fs-cta-tel .elementor-button-text{ display: none; }
}

/* ==========================================================================
   7. RIPRISTINO DESKTOP del blocco "Eleganza / Il racconto" (27 lug 2026)

   I widget aggiunti in Elementor per la homepage mobile sono tutti marcati
   "Nascondi su Desktop + Tablet" TRANNE il paragrafo .fs-par-atelier
   (elemento 06cdffb, "Il cuore creativo dell'Atelier..."): su desktop
   entrava come QUARTO elemento nella riga di 342bcb3 e restringeva foto e
   titolo (da 3 colonne a 4). Qui lo rimetto fuori dal flusso sopra i 767px,
   cioe' esattamente il comportamento delle altre aggiunte.

   NB: se un domani lo vuoi anche su desktop, la strada giusta e' togliere
   questa regola E dare al contenitore una larghezza pensata per 4 elementi.
   ========================================================================== */
@media (min-width:768px){
  body.page-id-457 .fs-par-atelier{ display: none !important; }
  /* NB: fino al 28 lug qui la vetrina "firme" veniva nascosta e sopra i
     767px comandava il carousel del tema. Ora la vetrina vive a tutte le
     larghezze: l'impaginazione desktop sta nella sezione 8-bis. */
}

/* ==========================================================================
   8. HOMEPAGE MOBILE — ultimo blocco "Le firme del tuo giorno piu' bello"
      (schermata 7 del mockup, 27 lug 2026)

      Il carousel di tassonomia del tema (widget c30985b) rende solo il nome
      del marchio in un riquadro: niente foto, niente conteggio, e il suo
      scorrimento e' un nastro continuo, non la vetrina del mockup.
      Le card vere le stampa functions.php (fs26_firme_index) e le sposta
      qui dentro assets/js/fs-firme.js. Il carousel del tema resta nel DOM,
      solo nascosto — e SOLO se le card sono davvero arrivate (:has), cosi'
      se il JS non parte il blocco non resta vuoto.
   ========================================================================== */
@media (max-width:767px){

  /* ---------- il blocco tiene la sua altezza naturale (31 lug 2026) ------
     Era forzato a 100dvh per farne "una schermata come le altre": ma il
     contenuto sta in 750px su 844, quindi restavano ~94px di nero vuoto
     spartiti sopra e sotto la vetrina. Ora l'altezza e' quella del
     contenuto (vale il min-height:0 !important della sezione 6) e
     l'aggancio in alto lo fa lo scroll-snap. */
  body.page-id-457 .elementor-element-c77b53c{
    gap: 20px;
    padding: calc(var(--fs-head) + 20px) 0 calc(var(--fs-bar) + 22px) !important;
  }

  /* ---------- occhiello + titolo ---------- */
  body.page-id-457 .elementor-element-6eed16e{
    padding: 0 20px !important;
    gap: 10px;
  }
  /* occhiello e titolo sono centrati dal tema: nel mockup sono a bandiera
     a sinistra, allineati al bordo della prima card */
  body.page-id-457 .elementor-element-0eb30cd .text-wrapper p,
  body.page-id-457 .elementor-element-496b015 .text-wrapper h2{
    text-align: left !important;
  }
  body.page-id-457 .elementor-element-0eb30cd .text-wrapper p{
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(241,241,241,.62);
    margin: 0;
  }
  /* nel mockup il titolo sta su due righe: il limite in ch lo garantisce
     senza andare a capo a mano */
  body.page-id-457 .elementor-element-496b015 .text-wrapper h2{
    font-size: 33px;
    line-height: 1.08;
    letter-spacing: -.01em;
    max-width: 15ch;
    margin: 0;
  }

  /* ---------- riga vetrina + riga (barra | link) ---------- */
  body.page-id-457 .elementor-element-682ac52:has(.fs-firme){
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "vetrina vetrina"
      "barra   link";
    align-items: center;
    column-gap: 18px;
    row-gap: 14px;
    padding: 0 !important;
    margin-bottom: 0 !important;
    /* aggancio per il carousel del tema parcheggiato qui sotto */
    position: relative;
  }
  /* Il carousel del tema NON va messo a display:none: carouselLoop di
     pe-core (widget-scripts.js r.4537) divide per la larghezza del primo
     item per decidere quanti cloni servono — a display:none vale 0, la
     divisione da' Infinity e il for clona slide all'infinito: homepage
     congelata su mobile (28 lug 2026). Qui il carousel resta renderizzato
     (larghezze vere per il conteggio) ma invisibile e fuori dal flusso. */
  body.page-id-457 .elementor-element-682ac52:has(.fs-firme) .elementor-element-c30985b{
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.page-id-457 .fs-firme{ grid-area: vetrina; min-width: 0; }
  body.page-id-457 .fs-firme__barra{ grid-area: barra; margin-left: 20px; }
  body.page-id-457 .elementor-element-682ac52:has(.fs-firme) .fs-tutte-firme{
    grid-area: link;
    margin: 0 !important;
    padding: 0 20px 0 0 !important;
    text-align: right;
  }

  /* ---------- la vetrina ----------
     scorrimento nativo con aggancio: nessuna libreria, inerzia di sistema
     su iOS. Il padding laterale sta sul track (non sul contenitore) cosi'
     la card successiva "sbircia" dal bordo come nel mockup. */
  body.page-id-457 .fs-firme__track{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    padding: 0 20px;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.page-id-457 .fs-firme__track::-webkit-scrollbar{ display: none; }

  body.page-id-457 .fs-firma{
    position: relative;
    display: block;
    flex: 0 0 74vw;
    scroll-snap-align: start;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
  }
  body.page-id-457 .fs-firma__foto{
    display: block;
    height: 52vh;
    height: 52svh;
    overflow: hidden;
    background: #1b1815;
  }
  body.page-id-457 .fs-firma__foto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* gli abiti sono bianchi su fondi chiari: la sfumatura deve essere decisa,
     altrimenti il nome bianco sparisce (e cosi' si copre anche il
     watermark impresso in fondo alle foto) */
  body.page-id-457 .fs-firma::after{
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 64%;
    background: linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 38%,
      rgba(0,0,0,.84) 74%, rgba(0,0,0,.95) 100%);
    pointer-events: none;
  }
  body.page-id-457 .fs-firma__meta{
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 15px;
    z-index: 1;
  }
  body.page-id-457 .fs-firma__nome{
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    line-height: 1.14;
    color: #fff;
  }
  body.page-id-457 .fs-firma__conteggio{
    display: block;
    margin-top: 6px;
    font-family: 'General Sans', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.68);
  }
  /* su touch l'hover resta attaccato dopo il tocco: nessun effetto hover */
  @media (hover: hover){
    body.page-id-457 .fs-firma__foto img{ transition: transform .6s cubic-bezier(.23,1,.32,1); }
    body.page-id-457 .fs-firma:hover .fs-firma__foto img{ transform: scale(1.04); }
  }

  /* ---------- barra di avanzamento (posizione dal JS) ---------- */
  body.page-id-457 .fs-firme__barra{
    position: relative;
    height: 2px;
    background: rgba(255,255,255,.20);
    overflow: hidden;
  }
  body.page-id-457 .fs-firme__barra i{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    background: #f1f1f1;
  }
  /* card tutte a schermo: la barra non ha niente da dire */
  body.page-id-457 .fs-firme__barra[data-vuota]{ opacity: 0; }

  /* le frecce prev/next (create da fs-firme.js per il desktop, sezione
     8-bis) su mobile non servono: si scorre col dito */
  body.page-id-457 .fs-firme__frecce{ display: none; }

  body.page-id-457 .elementor-element-682ac52:has(.fs-firme) .fs-tutte-firme a{
    font-size: 10px;
    letter-spacing: .2em;
    border-bottom-color: rgba(255,255,255,.45);
  }
}

/* ==========================================================================
   8-bis. DESKTOP/TABLET — la vetrina "firme" sostituisce il carousel del
      tema anche sopra i 767px (28 lug 2026, richiesta cliente)

      Stesse card stampate da functions.php e spostate da assets/js/
      fs-firme.js (che gia' lavora a qualunque larghezza): qui solo
      l'impaginazione desktop. In piu' le frecce prev/next, create dal JS:
      col mouse lo scorrimento orizzontale nativo non e' ovvio e Lenis
      intercetta la rotella per lo scroll verticale.

      NB: il carousel del tema NON va a display:none — clone-loop infinito
      di pe-core, vedi il commento nella sezione 8: stessa tecnica
      fuori-flusso del mobile.
   ========================================================================== */
@media (min-width:768px){
  body.page-id-457 .elementor-element-682ac52:has(.fs-firme){
    display: grid !important;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "vetrina vetrina vetrina"
      "barra   link    frecce";
    align-items: center;
    column-gap: 26px;
    row-gap: 22px;
    padding: 0 !important;
    position: relative;
  }
  body.page-id-457 .elementor-element-682ac52:has(.fs-firme) .elementor-element-c30985b{
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.page-id-457 .fs-firme{ grid-area: vetrina; min-width: 0; }

  body.page-id-457 .fs-firme__track{
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 40px;
    padding: 0 40px;
    min-width: 0;
    scrollbar-width: none;
  }
  body.page-id-457 .fs-firme__track::-webkit-scrollbar{ display: none; }

  /* card a formato ritratto: da ~3 card visibili su tablet a ~4 su schermi
     larghi, con la successiva che "sbircia" dal bordo come su mobile */
  body.page-id-457 .fs-firma{
    position: relative;
    display: block;
    flex: 0 0 clamp(240px, 23vw, 320px);
    scroll-snap-align: start;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
  }
  body.page-id-457 .fs-firma__foto{
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #1b1815;
  }
  body.page-id-457 .fs-firma__foto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* stessa sfumatura decisa del mobile: abiti bianchi su fondi chiari,
     il nome deve restare leggibile (e si copre il watermark in basso) */
  body.page-id-457 .fs-firma::after{
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 64%;
    background: linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 38%,
      rgba(0,0,0,.84) 74%, rgba(0,0,0,.95) 100%);
    pointer-events: none;
  }
  body.page-id-457 .fs-firma__meta{
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 1;
  }
  body.page-id-457 .fs-firma__nome{
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    line-height: 1.14;
    color: #fff;
  }
  body.page-id-457 .fs-firma__conteggio{
    display: block;
    margin-top: 6px;
    font-family: 'General Sans', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.68);
  }
  body.page-id-457 .fs-firma__foto img{ transition: transform .6s cubic-bezier(.23,1,.32,1); }
  body.page-id-457 .fs-firma:hover .fs-firma__foto img{ transform: scale(1.04); }

  /* ---------- barra di avanzamento (posizione dal JS) ---------- */
  body.page-id-457 .fs-firme__barra{
    grid-area: barra;
    position: relative;
    height: 2px;
    margin-left: 40px;
    background: rgba(255,255,255,.20);
    overflow: hidden;
  }
  body.page-id-457 .fs-firme__barra i{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    background: #f1f1f1;
  }
  body.page-id-457 .fs-firme__barra[data-vuota]{ opacity: 0; }

  /* il link "Tutte le N maison" esiste gia' nella pagina ma il widget e'
     marcato "nascondi su desktop/tablet" in Elementor: qui, SOLO quando
     la vetrina e' attiva, torna visibile senza toccare l'editor */
  body.page-id-457 .elementor-element-682ac52:has(.fs-firme) .fs-tutte-firme{
    display: block !important;
    grid-area: link;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right;
  }
  body.page-id-457 .elementor-element-682ac52:has(.fs-firme) .fs-tutte-firme a{
    font-size: 10px;
    letter-spacing: .2em;
    border-bottom-color: rgba(255,255,255,.45);
  }

  /* ---------- frecce prev/next (create da assets/js/fs-firme.js) ---------- */
  body.page-id-457 .fs-firme__frecce{
    grid-area: frecce;
    display: flex;
    gap: 10px;
    padding-right: 40px;
  }
  body.page-id-457 .fs-firme__frecce button{
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: #f1f1f1;
    cursor: pointer;
    transition: border-color .25s, opacity .25s;
  }
  body.page-id-457 .fs-firme__frecce button:hover{ border-color: rgba(255,255,255,.8); }
  body.page-id-457 .fs-firme__frecce button:disabled{ opacity: .3; cursor: default; }
  body.page-id-457 .fs-firme__frecce button svg{ display: block; }
  /* tutto a schermo: niente da scorrere */
  body.page-id-457 .fs-firme__frecce[data-vuota]{ display: none; }
}

/* ==========================================================================
   9. PRESTAZIONI — poster dell'hero nella misura giusta (28 lug 2026)

   Lo sfondo della sezione hero (6354117) e' FS-HOMEPAGE.jpg pieno formato:
   2419x1222, 320 KB — il file piu' pesante dell'intera homepage mobile.
   Sta sotto il video, si vede solo per i primi secondi, e WordPress ha
   gia' le varianti ridotte. Qui si serve la variante adatta allo schermo:
   il browser scarica SOLO il valore vincente della cascata, quindi sul
   telefono il file grande non parte proprio.
   Stesso selettore di post-457.css (con :not) + !important per vincere.
   ========================================================================== */
@media (max-width:767px){
  /* 1024x517 = 84 KB (contro 320): coperta a 375x812 basta e avanza,
     ed e' comunque una foto sfocata di atmosfera dietro un video */
  .elementor-457 .elementor-element.elementor-element-6354117:not(.elementor-motion-effects-element-type-background){
    background-image: url('/wp-content/uploads/2026/05/FS-HOMEPAGE-1024x517.jpg') !important;
  }
}
@media (min-width:768px) and (max-width:1024px){
  /* tablet: 1536x776 = 160 KB */
  .elementor-457 .elementor-element.elementor-element-6354117:not(.elementor-motion-effects-element-type-background){
    background-image: url('/wp-content/uploads/2026/05/FS-HOMEPAGE-1536x776.jpg') !important;
  }
}

/* ==========================================================================
   10. MENU MOBILE — logo visibile, blocco atelier, comparsa scalare
       (28 lug 2026, richiesta cliente)

   Il pannello fullscreen dell'hamburger (widget 9f66adf dell'header,
   template 1314) e' nero. Il tema NON marca lo stato aperto con classi
   sul pannello o sul body: l'unica spia e' la classe `active` che mette
   sul .menu--toggle — da li' si pilota tutto con :has(), senza JS.
   Il blocco atelier (stato live + telefono + indirizzo) e' stampato da
   functions.php e spostato nel pannello da assets/js/fs-menu.js.
   ========================================================================== */
@media (max-width:767px){

  /* ---------- logo ----------
     L'header resta SOPRA il pannello aperto (z-index 8888 contro 1),
     quindi il logo c'era gia', nella sua posizione e misura di sempre:
     ma e' inchiostro su fondo nero, invisibile. Ad hamburger aperto lo
     si porta ad avorio (#f1f1f1 ~ invert .95): cambia solo il colore.
     .site-branding e NON .site-logo: il tema tiene QUATTRO varianti del
     logo (main/secondary/sticky__main/sticky__secondary) e le sticky
     stanno in un <a> fuori da .site-logo — con l'header in stato sticky
     (dopo lo scroll) e' la variante attiva, e restava nera su nero
     (bug segnalato dal cliente, 28 lug). */
  /* Stato aperto = classe `fs-menu-aperto` sul <body>, specchiata da
     assets/js/fs-menu.js leggendo la classe `active` del toggle. NIENTE
     :has() qui: iOS Safari ha bug di invalidazione con :has() su classi
     cambiate a runtime — in Chrome funzionava, sull'iPhone del cliente
     no (28 lug). */
  body.fs-menu-aperto .site-header .site-branding img{
    filter: brightness(0) invert(.95) !important;
  }
  /* a menu aperto lo sfondo bianco "da scrollato" (header--sticked, che
     su mobile aggiungiamo noi dallo scroll — vedi functions.php) non
     deve coprire il pannello nero */
  body.fs-menu-aperto .site-header{
    background: transparent !important;
  }

  /* ---------- comparsa scalare delle voci ----------
     La base nascosta e' dentro body.fs-menu-js (messa dal JS): se il JS
     non parte le voci non vengono mai nascoste. I ritardi stanno SOLO
     nello stato aperto: alla chiusura le voci rientrano subito. */
  body.fs-menu-js .elementor-element-9f66adf .site--menu .main-menu > li,
  body.fs-menu-js .elementor-element-9f66adf .fs-menu-atelier{
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.23,1,.32,1);
  }
  body.fs-menu-aperto .elementor-element-9f66adf .site--menu .main-menu > li,
  body.fs-menu-aperto .elementor-element-9f66adf .fs-menu-atelier{
    opacity: 1;
    transform: none;
  }
  /* i due menu del pannello (Sposa/Sposo e voci secondarie) partono
     insieme, ognuno con la propria scala interna */
  body.fs-menu-aperto .elementor-element-9f66adf .site--menu .main-menu > li:nth-child(1){ transition-delay: .10s; }
  body.fs-menu-aperto .elementor-element-9f66adf .site--menu .main-menu > li:nth-child(2){ transition-delay: .17s; }
  body.fs-menu-aperto .elementor-element-9f66adf .site--menu .main-menu > li:nth-child(3){ transition-delay: .24s; }
  body.fs-menu-aperto .elementor-element-9f66adf .site--menu .main-menu > li:nth-child(4){ transition-delay: .31s; }
  body.fs-menu-aperto .elementor-element-9f66adf .site--menu .main-menu > li:nth-child(5){ transition-delay: .38s; }
  body.fs-menu-aperto .elementor-element-9f66adf .site--menu .main-menu > li:nth-child(6){ transition-delay: .45s; }
  body.fs-menu-aperto .elementor-element-9f66adf .site--menu .main-menu > li:nth-child(7){ transition-delay: .52s; }
  body.fs-menu-aperto .elementor-element-9f66adf .site--menu .main-menu > li:nth-child(8){ transition-delay: .59s; }
  body.fs-menu-aperto .elementor-element-9f66adf .fs-menu-atelier{ transition-delay: .66s; }

  @media (prefers-reduced-motion: reduce){
    body.fs-menu-js .elementor-element-9f66adf .site--menu .main-menu > li,
    body.fs-menu-js .elementor-element-9f66adf .fs-menu-atelier{
      transform: none;
      transition: opacity .2s ease;
    }
  }

  /* ---------- icona ricerca del pannello rimossa (28 lug, richiesta
     cliente). Nativa Elementor: template 1314 -> eliminare il widget
     lente d5df304 (poi togliere questa regola). ---------- */
  .elementor-element-9f66adf .site--menu .elementor-element-d5df304{ display: none !important; }

  /* ---------- leggibilita' (28 lug 2026, seconda passata) ----------
     Voci secondarie piu' grandi e piene, target di tocco comodi,
     Privacy Policy declassata a nota. NB: misure e colori di queste
     voci si possono governare anche da Elementor (Template Salvati ->
     template 1314, widget 7e5c257 e b8b5f2f -> Stile): se un domani si
     sistemano la', queste regole vanno tolte. */
  .elementor-element-9f66adf .site--menu .main-menu > li > a{
    display: inline-block;
    padding: 8px 10px;
  }
  .elementor-element-9f66adf .elementor-element-7e5c257 .main-menu > li > a{
    font-size: 20px;
    color: #fff;
  }
  .elementor-element-9f66adf .elementor-element-b8b5f2f .main-menu > li > a{
    font-size: 14px;
    color: rgba(241,241,241,.6);
  }

  /* ---------- blocco atelier ----------
     In FLUSSO dopo le voci di menu, dentro il container del template
     (f0ebf5b, flex column alto 100vh): cosi' non puo' MAI sovrapporsi
     alle voci. Il primo tentativo lo ancorava in absolute al fondo di
     .site--menu, che pero' ha altezza 0: su alcune pagine finiva
     stampato sopra "Privacy Policy" (bug segnalato dal cliente 28/07).
     Il margine in basso tiene conto della barra CTA fissa. */
  .elementor-element-9f66adf .fs-menu-atelier{
    margin: 22px 20px calc(var(--fs-bar, 50px) + 12px);
    text-align: center;
    font-family: 'General Sans', sans-serif;
    color: rgba(241,241,241,.85);
  }
  /* filetto di separazione dalle voci */
  .fs-menu-atelier::before{
    content: '';
    display: block;
    width: 26px;
    height: 1px;
    margin: 0 auto 14px;
    background: rgba(241,241,241,.30);
  }
  .fs-menu-atelier__stato{
    margin: 0 0 8px;
    font-size: 13px;
  }
  /* i colori del pallino Aperto/Chiuso li mette il CSS del plugin:
     qui si schiarisce solo il testo per il fondo nero */
  .fs-menu-atelier .of-hours-inline-status{
    color: rgba(241,241,241,.85);
  }
  .fs-menu-atelier__contatti{
    margin: 0;
    font-size: 13px;
    letter-spacing: .04em;
  }
  .fs-menu-atelier__contatti a{
    color: #f1f1f1;
    text-decoration: none;
    border-bottom: 1px solid rgba(241,241,241,.35);
    padding-bottom: 1px;
  }
  .fs-menu-atelier__contatti span{
    margin: 0 8px;
    opacity: .5;
  }
}

/* ==========================================================================
   12. PAGINA COLLEZIONI (583) — toolbar mobile (28 lug 2026)
   ========================================================================== */
@media (max-width:767px){
  /* icone cambio colonne rimosse (richiesta cliente). Possibile nativa:
     opzione del widget prodotti Saren in Elementor (pagina 583, widget
     9a9f756) — da verificare con l'editor, poi togliere questa. */
  .pe--grid--switcher.products--grid--switcher{ display: none !important; }

  /* le tre tab categorie su UNA riga: compattate quanto basta per i 375px
     (a 16px sono 408px). width:max-content + margin auto = centrate
     quando ci stanno, scroll orizzontale di riserva se un domani si
     aggiunge una categoria. */
  .saren--products--filter--cats{
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .saren--products--filter--cats::-webkit-scrollbar{ display: none; }
  .saren--products--filter--cats .term--list--item{
    white-space: nowrap;
    font-size: 13px;
    flex: 0 0 auto;
  }

  /* ---------- /collezioni-sposa/ (elenco collezioni) ----------
     Qui la toolbar NON e' il widget Saren ma il markup del modulo
     FS Collezioni del child (inc/fs-collezioni.php): stessi interventi
     sui suoi elementi. E' la pagina degli screenshot del cliente. */
  .fs-collezioni-bar .fs-switcher{ display: none !important; }

  /* le tre tab su una riga: full-bleed oltre il padding del container
     Elementor (335px su 375: i margini % leggono il contenitore, quindi
     (100% - 100vw)/2 = -20px esatti). Centrate col margin:auto sul
     primo/ultimo bottone — il justify-content:center con overflow
     renderebbe irraggiungibile la parte sinistra. Misurato: 386px di
     contenuto → sui 390-430pt degli iPhone attuali sta tutto, su un
     375 restano ~10px di scroll. */
  .fs-collezioni-tabs{
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-left: calc((100% - 100vw) / 2);
    margin-right: calc((100% - 100vw) / 2);
    padding: 0 8px;
    box-sizing: border-box;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .fs-collezioni-tabs::-webkit-scrollbar{ display: none; }
  .fs-collezioni-tabs .fs-tab{
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 12px;
    padding: 8px 5px;
    letter-spacing: 0;
  }
  .fs-collezioni-tabs .fs-tab:first-child{ margin-left: auto; }
  .fs-collezioni-tabs .fs-tab:last-child{ margin-right: auto; }
  .fs-collezioni-tabs .fs-tab em{
    font-size: 9.5px;
    opacity: .65;
  }
}

/* ==========================================================================
   13. PAGINE MARCHIO (template 591, /collezioni-abiti-da-sposa/<slug>/) —
       header leggibile sul hero scuro (28 lug 2026)

   Il hero del marchio e' scuro ma l'header tiene i colori scuri di
   default (l'auto-switch del tema non scatta sui contenuti del modulo
   FS Collezioni): logo e hamburger neri su nero, invisibili. A inizio
   pagina si forzano chiari; da scrollato (header--sticked, fondo bianco)
   tornano scuri da soli. Possibile nativa: impostazione header/colori
   della pagina 591 (Theme Options) — da verificare, poi togliere.
   ========================================================================== */
body.page-id-591 .site-header:not(.header--sticked){
  --mainColor: #f1f1f1 !important;
  --secondaryColor: rgba(241,241,241,.7) !important;
}
body.page-id-591 .site-header:not(.header--sticked) .site-branding img{
  filter: brightness(0) invert(.95) !important;
}
body.page-id-591 .site-header:not(.header--sticked) .menu--toggle span{
  background: #f1f1f1 !important;
}

/* ==========================================================================
   14. SCHEDA PRODOTTO — CTA senza sfondi/contorni scuri (28 lug 2026)

   "Prenota un Appuntamento" (b054f10, era nero pieno) e "Richiedi
   Maggiori Informazioni" (4bd5778, era bordato scuro) diventano azioni
   testuali con filetto sottile. Dimensioni SOLO via --padTop/--padLeft:
   l'etichetta dei pulsanti e' doppia (.pb__main + .pb__hover) e il
   padding a mano fa apparire il testo raddoppiato. Nativa Elementor:
   stile dei due widget nel template prodotto (poi togliere questa).
   Il filetto lo disegna GIA' il tema (a::after, ~0.65px nero, full
   width): un border-bottom qui produce una DOPPIA linea (tolto 28/07).
   ========================================================================== */
.elementor-element-b054f10 .pe--button--wrapper a,
.elementor-element-4bd5778 .pe--button--wrapper a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.elementor-element-b054f10 .pe--button--wrapper a,
.elementor-element-b054f10 .pe--button--wrapper a .pb__main,
.elementor-element-b054f10 .pe--button--wrapper a .pb__hover,
.elementor-element-4bd5778 .pe--button--wrapper a,
.elementor-element-4bd5778 .pe--button--wrapper a .pb__main,
.elementor-element-4bd5778 .pe--button--wrapper a .pb__hover{
  color: #0f0f0f !important;
}
.elementor-element-b054f10 .pe--button,
.elementor-element-4bd5778 .pe--button{
  --padLeft: 2px;
  --padTop: 12px;
}

/* ==========================================================================
   11. FOOTER — credit "2©26 immaginecreativa" centrato (28 lug 2026)

   Il widget (a06fa4e, template footer 576) e' l'unico figlio del suo
   contenitore flex ma stava appoggiato a sinistra: qui si centra il
   contenitore, a ogni larghezza. Verificato sul vivo: 187,5px = meta'
   esatta dei 375 del viewport mobile.
   ========================================================================== */
footer#colophon .elementor-element-5c60d45{
  justify-content: center;
}

/* ==========================================================================
   15. SCHEDA PRODOTTO v2 (28 lug 2026)

   Elementi nuovi nel template prodotto 15555 (tutti creati in Elementor):
   - a38bc82  = marca sopra il titolo (peproductelements "brands", .fs-pdp-brand)
   - 3887e09  = widget HTML .fs-pdp-extra (telefono, rassicurazioni, passi)
   - dcb6f88  = "Aggiungi ai preferiti" (add-wishlist-saren, .fs-pdp-fav):
                le didascalie stanno solo nei data-attribute, l'etichetta
                visibile e' resa qui con ::after; al toggle il wrapper
                .pe-wishlist-btn prende la classe .in--wishlist.
   Altre modifiche fatte nel template (non in CSS): titolo 37ca1cb8 a
   text-h1, riga CTA 7217ea68 in colonna, zoom gallery da zoom-outer a
   zoom-inner (il pannello esterno copriva la colonna riepilogo),
   descrizione duplicata (contenitore 0792b07) eliminata, accordion
   "Descrizione" aperto di default (accordion_active_first).

   NB DEPLOY: fino al 28/07 questo blocco stava anche nel Customizer (CSS
   aggiuntivo, setting custom_css[saren-child]) in attesa che il file
   arrivasse sul server. FATTO: verificato l'1 ago 2026 che sul live non
   viene servito alcuno <style id="wp-custom-css"> (controllato su home,
   scheda prodotto e /atelier/), quindi il Customizer e' gia' vuoto e non
   c'e' piu' niente da ripulire. Il Customizer resta comunque utilizzabile
   come corsia veloce per provare CSS senza FTP.
   ========================================================================== */

/* occhiello marca sulla riga del wishlist (contenitore 451778ee, row-reverse) */
.single-product .fs-pdp-brand .element--brands{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #5a5149;
}
.single-product .elementor-element-451778ee{
  justify-content: space-between !important;
  align-items: center !important;
}

/* titolo compatto */
.single-product .elementor-element-37ca1cb8 .text-h1{
  line-height: 1.08;
}

/* telefono + rassicurazioni */
.single-product .fs-pdp-extra .fs-pdp-phone{
  margin: 0 0 4px;
  font-size: 14px;
  color: #3b3733;
}
.single-product .fs-pdp-extra .fs-pdp-phone a{
  font-weight: 600;
  color: #0f0f0f;
  text-decoration: none;
  border-bottom: 1px solid #cfc4b4;
}
.single-product .fs-pdp-extra .fs-pdp-assur{
  margin: 0 0 18px;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: #6e655c;
}

/* box "Cosa succede quando prenoti" */
.single-product .fs-pdp-steps{
  background: #f1eae1;
  padding: 22px 24px 12px;
}
.single-product .fs-pdp-steps h3{
  margin: 0 0 4px;
  font-size: 17px;
}
.single-product .fs-pdp-steps ol{
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fs-step;
}
.single-product .fs-pdp-steps li{
  counter-increment: fs-step;
  position: relative;
  padding: 10px 0 10px 34px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4a443e;
}
.single-product .fs-pdp-steps li + li{ border-top: 1px solid #e2d8cb; }
.single-product .fs-pdp-steps li::before{
  content: "0" counter(fs-step);
  position: absolute;
  left: 0;
  top: 10px;
  color: #a88b5b;
  font-size: 13px;
}
.single-product .fs-pdp-steps li b{ color: #14110f; }

/* tabella "Dettagli dell'abito": righe pulite etichetta/valore, senza riquadro.
   ------------------------------------------------------------------------
   Queste regole c'erano gia' dal 28/07 ma NON facevano effetto: WooCommerce
   stila la stessa tabella con `.woocommerce table.shop_attributes th`, che
   pesa (0,2,2), mentre `.single-product .woocommerce-product-attributes th`
   pesa (0,2,1) e perdeva. Da qui il riquadro grigio da 1px attorno alla
   tabella, i filetti punteggiati fra le righe e il rientro di 14px delle
   etichette, che il cliente vedeva ancora (segnalazione 1 ago 2026).
   Aggiungendo `body` e `table` al selettore si arriva a (0,2,3) e vincono
   queste, senza dover ricorrere a !important.
   Il bordo resta solo SOTTO le righe: e' quello che separa le voci. */
body.single-product table.woocommerce-product-attributes{
  width: 100%;
  border: 0;
  border-collapse: collapse;
  background: none;
}
body.single-product table.woocommerce-product-attributes tr{ border-bottom: 1px solid #e2d8cb; }
body.single-product table.woocommerce-product-attributes tr:last-child{ border-bottom: 0; }
body.single-product table.woocommerce-product-attributes th{
  padding: 11px 0;
  border: 0;
  font-weight: 400;
  color: #6e655c;
  text-align: left;
  font-size: 14px;
}
body.single-product table.woocommerce-product-attributes td{
  padding: 11px 0;
  border: 0;
  text-align: right;
  font-size: 14px;
  color: #14110f;
  font-style: normal;
}
body.single-product table.woocommerce-product-attributes td p{ margin: 0; }

/* bottone "Aggiungi ai preferiti" (widget dcb6f88: wishlist con etichetta) */
.single-product .fs-pdp-fav .pe-wishlist-btn span[data-product-id]{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.single-product .fs-pdp-fav .pe-wishlist-btn span[data-product-id]::after{
  content: 'Aggiungi ai preferiti';
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0f0f0f;
  border-bottom: 1px solid rgba(15,15,15,.35);
  padding-bottom: 2px;
}
.single-product .fs-pdp-fav .pe-wishlist-btn.in--wishlist span[data-product-id]::after{
  content: 'Salvato nei preferiti';
}
.single-product .fs-pdp-fav .wishlist-icon svg{ width: 20px; height: 20px; }

/* galleria sticky su desktop (la colonna riepilogo e' piu' alta) */
@media (min-width: 1025px){
  .single-product .elementor-element-2bb611e2{ align-items: flex-start !important; }
  .single-product .elementor-element-63706b29{ position: sticky; top: 100px; }
  /* sticky-safe: .shop-page ha overflow:hidden che uccide position:sticky */
  .single-product .site-main.shop-page{ overflow-x: clip; overflow-y: visible; }
}

/* ==========================================================================
   16. FIX GRIGLIA ARCHIVIO PRODOTTI (28 lug 2026)

   Le pagine categoria (/categoria-prodotto/...) esplodevano a 16.777.216px
   (il massimo del browser): schermata grigia unica, nessun prodotto visibile.
   Causa misurata sul live: il gallery-swiper delle card
   (.product--archive--gallery) ha nel markup la classe VECCHIA
   .swiper-container, ma il CSS di Swiper caricato e' quello nuovo che stila
   solo .swiper{overflow:hidden} -> il contenitore resta overflow:visible.
   Da li' un loop di feedback: i track 1fr della griglia
   (.saren--products-grid, min-size = auto) crescono sul min-content delle
   slide, Swiper rimisura il contenitore e riscrive le larghezze inline
   sempre piu' grandi, fino al limite del browser.
   Tre cinture: overflow sul contenitore swiper (il vero fix), min-width:0
   sulle card-item della griglia, track minmax(0,1fr).
   ========================================================================== */
.product--archive--gallery.swiper-container{
  overflow: hidden;
}
.saren--products-grid > .saren--single--product{
  min-width: 0;
}
.saren--products-grid{
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}
/* le colonne mobile/tablet di FS Collezioni (inline, !important) vanno
   ribadite qui con minmax, altrimenti tornerebbero 1fr "gonfiabili" */
@media (max-width: 600px){
  .archive-products-section .saren--products-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 601px) and (max-width: 1024px){
  .archive-products-section .saren--products-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* ==========================================================================
   17. FIX 29 LUGLIO 2026 — recuperati dal Customizer (30 lug 2026)
   --------------------------------------------------------------------------
   Erano in Aspetto -> Personalizza -> CSS aggiuntivo, con scritto "DA MIGRARE".
   Portati qui alla lettera. Due note dei commenti originali non valgono piu':
   parlavano di alzare la specificita' perche' le regole gemelle delle sez. 6 e 7
   venivano stampate DOPO. Ora questo blocco sta in fondo allo stesso file,
   quindi arriva dopo per costruzione; gli !important sono rimasti dov'erano
   perche' toglierli sarebbe un cambio di resa, non una pulizia.
   ========================================================================== */

/* ==========================================================================
   FS26 - FIX 29 LUG 2026 - DA MIGRARE in saren-child/assets/css/fs-custom.css
   ========================================================================== */

/* hero homepage: etichetta "Scopri le collezioni" sopra i bottoni Sposa/Sposo */
body.page-id-457 .fs-hero__cta-label{ margin-top: 26px; }
body.page-id-457 .fs-hero__btn{ margin-top: 10px; }

/* About: il paragrafo "Il cuore creativo..." torna anche su desktop.
   Ora vive nel contenitore 6138fe5 insieme al titolo, quindi non ruba
   piu una colonna alla riga (era il motivo del display:none in sez. 7). */
@media (min-width:768px){
  /* specificita alzata: la regola gemella in fs-custom.css (sez. 7) viene
     stampata DOPO questo blocco, quindi a parita di peso vincerebbe lei */
  body.page-id-457 .elementor-element-6138fe5 .fs-par-atelier{ display: block !important; }
}
@media (max-width:767px){
  /* il wrapper eredita il posto che avevano titolo+paragrafo da soli */
  body.page-id-457 .elementor-element-6138fe5{ order: 2; }
}

/* nome della collezione piu in evidenza nelle card (/collezioni-sposa/) */
.fs-collezione-title{ font-size: 18px; font-weight: 600; letter-spacing: .04em; }
.fs-collezione-count{ font-size: 12px; opacity: .6; }
@media (max-width:767px){ .fs-collezione-title{ font-size: 17px; } }


/* HERO MOBILE - coppia Sposa/Sposo: la sez. 6 di fs-custom.css nasconde .fs-hero__btn su mobile
   e riaccende SOLO il vecchio 3bb4a95, percio qui tratto la coppia. */
@media (max-width:767px){
  body.page-id-457 .elementor-element-64f088c{ width: 100%; gap: 10px; margin-top: 14px; }
  body.page-id-457 .elementor-element-64f088c .fs-hero__btn{
    display: block !important; flex: 1 1 0; width: auto !important; margin: 0 !important;
  }
  body.page-id-457 .elementor-element-64f088c .fs-hero__btn .pe--button{ --padTop: 16px; --padLeft: 12px; width: 100%; }
  body.page-id-457 .elementor-element-64f088c .fs-hero__btn .pe--button--wrapper{ width: 100%; }
  body.page-id-457 .elementor-element-64f088c .fs-hero__btn .pe--button--wrapper a{ width: 100%; border-radius: 0; }
  body.page-id-457 .elementor-element-64f088c .fs-hero__btn .pb__main{
    justify-content: center !important; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  }
  body.page-id-457 .fs-hero__cta-label .text-wrapper p{ margin-bottom: 0; }
}


/* CARD PRODOTTO NON CLICCABILI (fsc-single-photo)
   Sui prodotti senza img.product-image-front il tema non stampa
   .saren--product--image: l unico <a> della card sta dentro
   .saren--product--video, che fs-collezioni.php nasconde con display:none.
   Risultato: foto non cliccabile (su desktop e su mobile).
   Qui il blocco resta nel flusso ma svuotato del video, e il link
   viene steso su tutta la foto. Queste tre regole sono l'UNICO proprietario
   del comportamento: la copia con display:none che stava in
   assets/css/fs-collezioni.css è stata rimossa (ago 2026) — prima vinceva
   questa solo per ordine di stampa. (Il riferimento al saren-child era
   stantio: il child non esiste più.) */
.saren--single--product .saren--product--image--wrap:not(:has(img.product-image-front)) .saren--product--video{
  display: block !important; position: absolute !important; inset: 0; z-index: 3; overflow: hidden;
}
.saren--single--product .saren--product--image--wrap:not(:has(img.product-image-front)) .saren--product--video > a{
  display: block; width: 100%; height: 100%;
}
.saren--single--product .saren--product--image--wrap:not(:has(img.product-image-front)) .saren--product--video .pe-video{
  display: none !important;
}


/* GALLERIA PDP SU MOBILE: il carosello foto e largo quanto tutte le slide (es. 1380px)
   dentro un contenitore con overflow visible, quindi dalla seconda foto in poi
   restava fuori schermo e senza modo di raggiungerla (il drag del tema e a mouse).
   Non tocco il DOM del carosello (pe-core va in loop se lo si nasconde):
   do lo scorrimento nativo al genitore e annullo il transform del drag. */
@media (max-width:767px){
  .single-product .product--gallery{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .single-product .product--gallery::-webkit-scrollbar{ display: none; }
  .single-product .product--gallery--wrapper{ transform: none !important; }
  .single-product .product--gallery--image{ scroll-snap-align: center; }
}

/* ==========================================================================
   18. FRAMMENTI RECUPERATI DAI WIDGET HTML DI ELEMENTOR (30 lug 2026)
   --------------------------------------------------------------------------
   Due <style> vivevano dentro widget HTML di singole pagine. Sono qui perche'
   il CSS del sito deve stare in un posto solo: i selettori sono specifici, il
   fatto che ora siano caricati ovunque non cambia nulla.
   Dopo il caricamento del tema i due widget vanno svuotati in Elementor.
   ========================================================================== */

/* overlay del popup prenotazione */
.fsb-pop-overlay{position:fixed;inset:0;background:rgba(15,15,15,.45);z-index:9998;opacity:0;pointer-events:none;transition:opacity .45s;}
.fsb-pop-overlay.is-open{opacity:1;pointer-events:auto;}

/* campi nascosti dei form Mautic */
.mauticform-field-hidden { display:none }

/* filtro "Marca" nel popover della pagina Collezioni.
   Era stampato inline da inc/fs-custom.php con wp_add_inline_style(). */
.fs-filtra-check i.fs-mcount{font-style:normal;font-size:11px;opacity:.6;vertical-align:1px;}
.fs-filtra-check input:checked + span i.fs-mcount{opacity:.7;}


/* ==========================================================================
   19. FINESTRA "CREDITS" DEL FOOTER (1 ago 2026)
   --------------------------------------------------------------------------
   Voce accanto a "Privacy Policy" nella riga legale + finestra modale.
   Markup: inc/fs-credits.php · comportamento: assets/js/fs-credits.js.

   La voce di menu non ha stili suoi di proposito: entra nello stesso <ul>
   della privacy (gap 20px gia' impostato dal tema) ed eredita colore, corpo
   e famiglia dalle regole del menu. Se un domani cambia lo stile della riga
   legale, Credits lo segue senza che si debba toccare niente qui.

   La finestra e' un <dialog> nativo: il riquadro chiaro sta dentro
   .fs-credits__box e non sull'elemento <dialog>, cosi' il <dialog> puo'
   restare largo quanto la finestra e raccogliere il clic sullo sfondo.
   Palette e corpi sono quelli del box "Cosa succede quando prenoti"
   (sezione 15): stessa carta, stesso oro per le etichette.
   ========================================================================== */

.fs-credits{
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #14110f;
  overflow: visible;
}
.fs-credits::backdrop{ background: rgba(15,15,15,.55); }
.fs-credits__box{
  position: relative;
  max-height: calc(100dvh - 48px);
  padding: 38px 32px 32px;
  background: #f7f4ef;
  overflow-y: auto;
  /* senza questo, arrivati in fondo alla finestra lo scroll prosegue sulla
     pagina dietro: su iOS e' il classico "la modale scrolla il sito". */
  overscroll-behavior: contain;
}
.fs-credits__title{
  margin: 0 0 24px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 400;
}
.fs-credits__group + .fs-credits__group{
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid #e2d8cb;
}
.fs-credits__label{
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #a88b5b;
}
.fs-credits__names{
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #14110f;
}
/* Link ai siti degli autori: sottolineatura discreta che si accende al passaggio,
   in tono con l'oro dell'etichetta. Il separatore " · " resta testo nero. */
.fs-credits__link{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: #c9b48a;
  transition: color .2s, text-decoration-color .2s;
}
.fs-credits__link:hover,
.fs-credits__link:focus-visible{
  color: #a88b5b;
  text-decoration-color: #a88b5b;
}
.fs-credits__link:focus-visible{
  outline: 2px solid #a88b5b;
  outline-offset: 2px;
  border-radius: 2px;
}
.fs-credits__note{
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6e655c;
}
.fs-credits__close{
  position: absolute;
  top: 8px;
  right: 8px;
  /* 40px: area di tocco piena anche se la crocetta e' piccola */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6e655c;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.fs-credits__close:hover,
.fs-credits__close:focus-visible{ color: #14110f; }

@media (max-width:480px){
  .fs-credits__box{ padding: 32px 22px 26px; }
  .fs-credits__title{ margin-bottom: 20px; font-size: 22px; }
}


/* ==========================================================================
   20. SCHEDA PRODOTTO — TESTI DIVERSI PER SPOSA E SPOSO (1 ago 2026)
   --------------------------------------------------------------------------
   L'appuntamento in atelier dura 90 minuti per la sposa e 60 per lo sposo,
   ma il box "Cosa succede quando prenoti" (widget HTML 3887e09) e' uno solo
   per tutte le schede. Invece di duplicare il template o di riscrivere il
   testo da PHP — che lo toglierebbe dalle mani del cliente in Elementor —
   il testo contiene entrambe le versioni e qui si sceglie quale mostrare.
   La classe fs-sposa / fs-sposo la mette inc/fs-custom.php sul body.

   Nel markup .fs-solo-sposo nasce con style="display:none" inline: cosi'
   finche' questo CSS non e' sul server la scheda mostra il testo di prima
   e non "9060 minuti". Per questo qui serve !important, che batte lo stile
   inline. L'ordine di caricamento dei file non conta.
   ========================================================================== */

body.fs-sposo .fs-solo-sposa{ display: none !important; }
body.fs-sposo .fs-solo-sposo{ display: inline !important; }


/* === Pannelli laterali: sovrapposizioni in alto a destra (3 ago 2026) ===
   1) Hamburger sopra il pannello aperto. Misurato a 551,71 con il pannello che
      copre 30,0 → 606,723: finiva accanto alla X di chiusura, due controlli nello
      stesso angolo. La classe fs-pop-open la mette assets/js/fs-interfaccia.js,
      perche' il pannello viene aperto da GSAP con stili inline e non prende
      nessuna classe di stato da agganciare in CSS.
   2) Barra admin di WordPress. I pannelli sono position:fixed con top:0 e non la
      considerano: la X finiva a y=14, cioe' interamente coperta, e il titolo
      "I miei preferiti" veniva tagliato a meta'. Si vede solo da loggati, ma e'
      chi gestisce il sito a inciamparci. Le due misure (46/32px) sono quelle di
      WordPress, che cambia altezza alla barra a 783px. */
body.fs-pop-open .menu--toggle,
body.fs-pop-open .menu--toggle--wrap {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body.admin-bar .pe--styled--popup {
  top: 46px;
  height: calc(100% - 46px);
}
@media screen and (min-width: 783px) {
  body.admin-bar .pe--styled--popup {
    top: 32px;
    height: calc(100% - 32px);
  }
}


/* ==========================================================================
   21. "IL MIO ACCOUNT" — UN SOLO MENU, QUELLO VERTICALE (3 ago 2026)

   /mio-account/ (pagina 9) e' una pagina WordPress normale, NON una pagina
   Elementor: lo shortcode di WooCommerce carica direttamente
   woocommerce/myaccount/my-account.php del tema.

   Quel template stampa il menu DUE volte — do_action('woocommerce_account_navigation')
   nella colonna di sinistra (.pe-col-3.saren--account--nav) e di nuovo in cima
   alla colonna del contenuto (.saren--account--nav--top) — e sulla Bacheca
   myaccount/dashboard.php ne stampa una TERZA dentro
   .saren--account--dashboard--nav. Tre copie dello stesso menu nella stessa
   schermata.

   Il tema le tiene in ordine SOLO quando la pagina e' costruita con il widget
   Elementor "Account (Block)" di pe-core: quel widget mette sul contenitore la
   classe dashboard-type-user-preview / -navigation / -classic (prefix_class in
   inc/modules/pe-core/widgets/account-block.php), ed e' su quelle classi che
   css/fs-account.css nasconde le copie di troppo (righe 544-548, 642-644,
   835-845). Senza widget nessuna delle tre classi arriva: restano solo le
   regole di base, nav ul { flex-direction: column; width: 75%; margin: 50px auto },
   applicate a tutte e tre le copie. Da qui il menu ripetuto, largo tre quarti
   della colonna e staccato di 50px dalla scheda utente.

   Scelta: si tiene SOLO il menu verticale nella colonna di sinistra — quella e'
   la struttura del template — e si spengono le altre due copie. Il layout a due
   colonne del tema resta com'e'.
   ========================================================================== */

/* 1. Delle tre copie del menu resta solo quella nella colonna di sinistra.
      Insieme se ne vanno .saren--account--dets--foot (un div vuoto che con il
      gap:25px della colonna lasciava uno spazio morto) e il riquadro
      "NO ACTIVE ORDERS." — su un sito vetrina, senza carrello, non dice nulla e
      l'informazione e' gia' nel contatore "Active Orders" della Bacheca. */
body.woocommerce-account .section.account--sec .saren--account--nav--top,
body.woocommerce-account .section.account--sec .saren--account--dashboard--nav,
body.woocommerce-account .section.account--sec .saren--account--dets--foot,
body.woocommerce-account .section.account--sec .saren--user--active--order {
  display: none;
}

/* 2. Il menu riempie la colonna invece di stare al 75% e centrato, e perde i
      50px di margine che lo staccavano dalla scheda utente (la colonna ha gia'
      il suo gap:25px). Il margin-right:5% arriva da fs-account.css riga 74, che
      lo lascia storto rispetto alla scheda sopra. */
body.woocommerce-account .section.account--sec .pe-col-3.saren--account--nav nav.woocommerce-MyAccount-navigation {
  width: 100% !important;
  margin-right: 0;
}

body.woocommerce-account .section.account--sec .pe-col-3.saren--account--nav nav.woocommerce-MyAccount-navigation ul {
  width: 100%;
  margin: 0;
  gap: 2px;
}

/* Il padding passa da <li> ad <a>: cosi' e' cliccabile tutta la riga del menu
   e non solo le lettere. */
body.woocommerce-account .section.account--sec .pe-col-3.saren--account--nav nav.woocommerce-MyAccount-navigation ul li {
  padding: 0;
  border-radius: 5px;
  transition: background .3s ease;
}

body.woocommerce-account .section.account--sec .pe-col-3.saren--account--nav nav.woocommerce-MyAccount-navigation ul li a {
  padding: 0.75em 1em;
}

body.woocommerce-account .section.account--sec .pe-col-3.saren--account--nav nav.woocommerce-MyAccount-navigation ul li:hover {
  background: var(--secondaryBackground);
}

/* 3. Bacheca senza ordini. dashboard.php stampa .user--favorite--item comunque,
      anche quando non c'e' nessun prodotto da mostrare, e .user--latest--orders
      ha min-height:350px (fs-account.css riga 272): su un sito vetrina, dove
      ordini non ce ne sono mai, erano due rettangoli bianchi vuoti alti 350px.
      .mpi--product e' il div che dashboard.php scrive solo quando il prodotto
      preferito esiste davvero; :has() non si puo' annidare dentro un altro
      :has(), per questo la spia e' la stessa in tutte e tre le regole. */
body.woocommerce-account .saren--account--dashboard--foot > div.user--favorite--item:not(:has(.mpi--product)) {
  display: none;
}

body.woocommerce-account .saren--account--dashboard--foot:not(:has(.mpi--product)) > div.user--latest--orders {
  width: 100%;
}

body.woocommerce-account .saren--account--dashboard--foot > div.user--latest--orders:not(:has(ul)) {
  min-height: 0;
}

/* ==========================================================================
   19. ACCESSIBILITÀ TRASVERSALE E HEADER SU LAYOUT SPLIT (26 ago 2026)
   ========================================================================== */

/* --- 19a. Focus visibile da tastiera, su tutto il sito.
   La base Saren azzera gli outline di link, bottoni e campi (style.css:
   outline:0 / outline:none su a:focus, button:focus, input:focus): chi
   naviga con Tab non vede dove si trova. :focus-visible scatta solo da
   tastiera, quindi il click del mouse resta pulito come prima. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px !important;
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="search"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 1px !important;
}

/* --- 19b. Header su layout "split" (metà chiara + metà scura affiancate,
   es. /contatti/). L'header ha un solo colore di testo per costruzione (vedi
   fs-interfaccia.js): quando sotto ci sono due metà in conflitto, la classe
   header--split accende un velo sfumato che garantisce il contrasto su
   entrambe. Cream del brand sotto il testo scuro, quasi-nero sotto il chiaro. */
header.site-header.header--split {
  background: linear-gradient(to bottom, rgba(250, 247, 242, 0.95) 0%, rgba(250, 247, 242, 0.82) 55%, rgba(250, 247, 242, 0) 100%) !important;
}

header.site-header.header--split.header--switched {
  background: linear-gradient(to bottom, rgba(15, 15, 15, 0.92) 0%, rgba(15, 15, 15, 0.7) 55%, rgba(15, 15, 15, 0) 100%) !important;
}

/* --- 19c. Bersagli tattili delle frecce della vetrina firme: 44px minimi
   (prima ~26px), senza cambiare la resa visiva delle icone. */
body.page-id-457 .fs-firme__frecce button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Anti-spam form Mautic (31/08 + 03/09/2026, rivisto il 03/09 ore 9).
   Nasconde ai visitatori i campi esca (`non_compilare`, `homepage`: honeypot,
   Mautic scarta l'invio se sono compilati) e il campo "Codice" (`codice`:
   captcha domanda/risposta riempito da assets/js/fs-interfaccia.js, Mautic
   scarta l'invio se manca o e' sbagliato). Non rimuovere: senza queste regole
   i campi compaiono nel form. Se aggiungi un altro campo di questo tipo,
   aggiungi qui i suoi selettori.
   Le regole con :has() stanno in un blocco separato: i browser che non lo
   capiscono (Safari < 15.4, Chrome < 105, Firefox < 121) ignorano solo quello
   e nascondono comunque input ed etichetta.
   Le stesse regole per gli honeypot erano in Aspetto -> Personalizza -> CSS
   aggiuntivo: quel campo puo' essere svuotato.
   ------------------------------------------------------------------------- */
input[name="mauticform[non_compilare]"],
label[for$="_non_compilare"],
input[name="mauticform[homepage]"],
label[for$="_homepage"],
input[name="mauticform[codice]"],
label[for$="_codice"] {
  display: none !important;
}
.mauticform-row:has(> input[name="mauticform[non_compilare]"]),
.mauticform-row:has(> input[name="mauticform[homepage]"]),
.mauticform-row:has(> input[name="mauticform[codice]"]) {
  display: none !important;
}
/* Rete di sicurezza: se il campo Codice risulta in errore (il JS del tema non
   ha potuto riempirlo, oppure Mautic ha rifiutato il valore), la riga torna
   visibile con una spiegazione al posto del messaggio tecnico. */
.mauticform-row.mauticform-has-error:has(> input[name="mauticform[codice]"]) {
  display: block !important;
}
.mauticform-row.mauticform-has-error:has(> input[name="mauticform[codice]"]) .mauticform-errormsg {
  display: none !important;
}
.mauticform-row.mauticform-has-error:has(> input[name="mauticform[codice]"])::after {
  content: "Verifica anti-spam non riuscita: ricarica la pagina e riprova.";
  display: block;
  color: #e32;
  font-size: 0.9em;
}
