/*!
 * fs/sezione-hero — la testata della home.
 *
 * Video (o foto) a tutto schermo, occhiello, titolo, sottotitolo, i due
 * bottoni «Sposa» e «Sposo», e in basso i tre numeri con l'indicatore «Scorri».
 *
 * GENERATO da post-457.css (regole congelate di Elementor) e dalla sezione
 * `body.page-id-457` di assets/css/fs-custom.css, riscrivendo gli id degli
 * elementi in classi parlanti. Le classi sono TRIPLICATE per tenere la
 * specificita' che avevano i selettori originali (0,3,0). Con due
 * `.e-con.e-flex{--flex-direction:column}` di frontend.min.css, che vale
 * altrettanto e viene dopo, vincerebbe.
 *
 * Non si modifica a mano senza aggiornare anche il blocco che stampa queste
 * classi: sono le due meta' della stessa cosa.
 */

.fs-hero.fs-hero.fs-hero { --display:flex; --min-height:100vh; --flex-direction:column; --container-widget-width:100%; --container-widget-height:initial; --container-widget-flex-grow:0; --container-widget-align-self:initial; --flex-wrap-mobile:wrap; --justify-content:flex-end; --overlay-opacity:1; --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px }
.fs-hero.fs-hero.fs-hero:not(.elementor-motion-effects-element-type-background), .fs-hero.fs-hero.fs-hero > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color:#000000; background:url("https://faustosari.com/wp-content/uploads/2026/05/FS-HOMEPAGE.jpg") 50% 50%; background-size:cover }
.fs-hero.fs-hero.fs-hero::before, .fs-hero.fs-hero.fs-hero > .elementor-background-video-container::before, .fs-hero.fs-hero.fs-hero > .e-con-inner > .elementor-background-video-container::before, .fs-hero.fs-hero.fs-hero > .elementor-background-slideshow::before, .fs-hero.fs-hero.fs-hero > .e-con-inner > .elementor-background-slideshow::before, .fs-hero.fs-hero.fs-hero > .elementor-motion-effects-container > .elementor-motion-effects-layer::before { background-color:transparent; --background-overlay:''; background-image:linear-gradient(180deg, rgba(20,17,15,0) 26%, rgba(20,17,15,0.92) 100%) }
.fs-hero__strato.fs-hero__strato.fs-hero__strato { --display:flex; --flex-direction:row; --container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% ); --container-widget-height:100%; --container-widget-flex-grow:1; --container-widget-align-self:stretch; --flex-wrap-mobile:wrap; --justify-content:space-between; --align-items:flex-end; --gap:0px 48px; --row-gap:0px; --column-gap:48px; --margin-top:0px; --margin-bottom:110px; --margin-left:0px; --margin-right:0px; --padding-top:0px; --padding-bottom:0px; --padding-left:64px; --padding-right:64px; --z-index:2 }
.fs-hero__testi.fs-hero__testi.fs-hero__testi { --display:flex; --flex-direction:column; --container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% ); --container-widget-height:initial; --container-widget-flex-grow:0; --container-widget-align-self:initial; --flex-wrap-mobile:wrap; --align-items:flex-start; --gap:0px 0px; --row-gap:0px; --column-gap:0px; --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px }
.fs-hero__eyebrow.fs-hero__eyebrow.fs-hero__eyebrow .text-wrapper { text-align:left }
.fs-hero__eyebrow.fs-hero__eyebrow.fs-hero__eyebrow { width:100% }
.fs-hero__title.fs-hero__title.fs-hero__title .text-wrapper { text-align:left }
.fs-hero__sub.fs-hero__sub.fs-hero__sub .text-wrapper { text-align:left }
.fs-hero__cta-label.fs-hero__cta-label.fs-hero__cta-label > .elementor-widget-container { margin:20px 0px 0px 0px }
.fs-hero__cta-label.fs-hero__cta-label.fs-hero__cta-label .text-wrapper { text-align:left }
.fs-hero__cta-label.fs-hero__cta-label.fs-hero__cta-label { width:100% }
.fs-hero__bottoni.fs-hero__bottoni.fs-hero__bottoni { --display:flex; --flex-direction:row; --container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% ); --container-widget-height:100%; --container-widget-flex-grow:1; --container-widget-align-self:stretch; --flex-wrap-mobile:wrap; --align-items:center; --gap:14px 14px; --row-gap:14px; --column-gap:14px; --flex-wrap:wrap; --margin-top:10px; --margin-bottom:0px; --margin-left:0px; --margin-right:0px; --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px }
.fs-hero__btn--sposa.fs-hero__btn--sposa.fs-hero__btn--sposa { width:initial; max-width:initial; text-align:left }
.fs-hero__btn--sposa.fs-hero__btn--sposa.fs-hero__btn--sposa .pe--button a { border-style:solid; border-width:1px 1px 1px 1px; border-color:rgba(255,255,255,0.62) }
.fs-hero__btn--sposa.fs-hero__btn--sposa.fs-hero__btn--sposa .pb__main { justify-content:start }
.fs-hero__btn--sposo.fs-hero__btn--sposo.fs-hero__btn--sposo { width:initial; max-width:initial; text-align:left }
.fs-hero__btn--sposo.fs-hero__btn--sposo.fs-hero__btn--sposo .pe--button a { border-style:solid; border-width:1px 1px 1px 1px; border-color:rgba(255,255,255,0.62) }
.fs-hero__btn--sposo.fs-hero__btn--sposo.fs-hero__btn--sposo .pb__main { justify-content:start }
/* Start custom CSS for 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. */
.fs-hero.fs-hero.fs-hero > .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. */
.fs-hero.fs-hero.fs-hero > .elementor-background-video-container .elementor-background-video-embed, .fs-hero.fs-hero.fs-hero > .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. */
.fs-hero.fs-hero.fs-hero::before { z-index: 1; pointer-events: none }
/* 4. Helper script: nessun ingombro nel layout */
.fs-hero.fs-hero.fs-hero > .fs-hero-video-fix { display: none }
/*!
* 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. */
.fs-hero.fs-hero.fs-hero > .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. */
.fs-hero.fs-hero.fs-hero > .elementor-background-video-container .elementor-background-video-embed, .fs-hero.fs-hero.fs-hero > .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. */
.fs-hero.fs-hero.fs-hero::before { z-index: 1; pointer-events: none }
/* 4. Helper script: nessun ingombro nel layout */
.fs-hero.fs-hero.fs-hero > .fs-hero-video-fix { display: none }
/* =========================================================
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. */
.fs-hero.fs-hero.fs-hero > .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 }

@media (max-width:1024px) {
	.fs-hero__strato.fs-hero__strato.fs-hero__strato { --margin-top:0px; --margin-bottom:100px; --margin-left:0px; --margin-right:0px; --padding-top:0px; --padding-bottom:0px; --padding-left:40px; --padding-right:40px }
	.fs-hero__eyebrow.fs-hero__eyebrow.fs-hero__eyebrow .text-wrapper { text-align:left }
	.fs-hero__title.fs-hero__title.fs-hero__title .text-wrapper { text-align:left }
	.fs-hero__cta-label.fs-hero__cta-label.fs-hero__cta-label .text-wrapper { text-align:left }
}

@media (max-width:767px) {
	.fs-hero.fs-hero.fs-hero { --overlay-opacity:1 }
	.fs-hero__strato.fs-hero__strato.fs-hero__strato { --flex-direction:column; --container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% ); --container-widget-height:initial; --container-widget-flex-grow:0; --container-widget-align-self:initial; --flex-wrap-mobile:wrap; --align-items:flex-start; --gap:26px 0px; --row-gap:26px; --column-gap:0px; --margin-top:0px; --margin-bottom:92px; --margin-left:0px; --margin-right:0px; --padding-top:0px; --padding-bottom:0px; --padding-left:20px; --padding-right:20px }
	.fs-hero__testi.fs-hero__testi.fs-hero__testi { --width:100% }
	.fs-hero__eyebrow.fs-hero__eyebrow.fs-hero__eyebrow .text-wrapper { text-align:left }
	.fs-hero__eyebrow.fs-hero__eyebrow.fs-hero__eyebrow { width:100% }
	.fs-hero__title.fs-hero__title.fs-hero__title .text-wrapper p, .fs-hero__title.fs-hero__title.fs-hero__title .text-wrapper > * { font-size:47px }
	.fs-hero__title.fs-hero__title.fs-hero__title .text-wrapper { text-align:left }
	.fs-hero__sub.fs-hero__sub.fs-hero__sub .text-wrapper { text-align:left }
	.fs-hero__cta-label.fs-hero__cta-label.fs-hero__cta-label .text-wrapper { text-align:left }
	.fs-hero__cta-label.fs-hero__cta-label.fs-hero__cta-label { width:100% }
	.fs-hero__btn--sposa.fs-hero__btn--sposa.fs-hero__btn--sposa { text-align:left }
	.fs-hero__btn--sposo.fs-hero__btn--sposo.fs-hero__btn--sposo { text-align:left }
	/* ---------- 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. */
	.fs-hero.fs-hero.fs-hero { 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. */
	.fs-hero__strato.fs-hero__strato.fs-hero__strato { 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 */
	.fs-hero__btn--sposa.fs-hero__btn--sposa.fs-hero__btn--sposa { display: block !important; margin: 22px 0 0; width: 100% !important; align-self: stretch !important }
	.fs-hero__btn--sposa.fs-hero__btn--sposa.fs-hero__btn--sposa .pe--button { --padTop: 16px; --padLeft: 20px; width: 100% }
	.fs-hero__btn--sposa.fs-hero__btn--sposa.fs-hero__btn--sposa .pe--button--wrapper { width: 100% }
	.fs-hero__btn--sposa.fs-hero__btn--sposa.fs-hero__btn--sposa .pe--button--wrapper a { width: 100%; border-radius: 0 }
	.fs-hero__btn--sposa.fs-hero__btn--sposa.fs-hero__btn--sposa .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 */
	.fs-hero__metaw.fs-hero__metaw.fs-hero__metaw { margin-top: 18px }
	.fs-hero__metaw.fs-hero__metaw.fs-hero__metaw .fs-hero__scroll { margin-top: 10px }
	/* 1024x517 = 84 KB (contro 320): coperta a 375x812 basta e avanza,
	ed e' comunque una foto sfocata di atmosfera dietro un video */
	.fs-hero.fs-hero.fs-hero:not(.elementor-motion-effects-element-type-background) { background-image: url('/wp-content/uploads/2026/05/FS-HOMEPAGE-1024x517.jpg') !important }
	.fs-hero__bottoni.fs-hero__bottoni.fs-hero__bottoni { width: 100%; gap: 10px; margin-top: 14px }
	.fs-hero__bottoni.fs-hero__bottoni.fs-hero__bottoni .fs-hero__btn { display: block !important; flex: 1 1 0; width: auto !important; margin: 0 !important }
	.fs-hero__bottoni.fs-hero__bottoni.fs-hero__bottoni .fs-hero__btn .pe--button { --padTop: 16px; --padLeft: 12px; width: 100% }
	.fs-hero__bottoni.fs-hero__bottoni.fs-hero__bottoni .fs-hero__btn .pe--button--wrapper { width: 100% }
	.fs-hero__bottoni.fs-hero__bottoni.fs-hero__bottoni .fs-hero__btn .pe--button--wrapper a { width: 100%; border-radius: 0 }
	.fs-hero__bottoni.fs-hero__bottoni.fs-hero__bottoni .fs-hero__btn .pb__main { justify-content: center !important; font-size: 12px; letter-spacing: .16em; text-transform: uppercase }
}

@media (max-width:1024px) and (min-width:768px) {
	.fs-hero__testi.fs-hero__testi.fs-hero__testi { --width:70% }
}

@media (min-width:768px) {
	.fs-hero__testi.fs-hero__testi.fs-hero__testi { --width:58% }
	.fs-hero__bottoni.fs-hero__bottoni.fs-hero__bottoni { --width:100% }
	/* il widget HTML e' position:relative: lo rendo statico cosi il riferimento
	diventa la riga interna, che occupa tutta la larghezza della hero */
	.fs-hero__metaw.fs-hero__metaw.fs-hero__metaw { position:static!important }
	.fs-hero__metaw.fs-hero__metaw.fs-hero__metaw .fs-hero__meta { position:static }
	.fs-hero.fs-hero.fs-hero .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.fs-hero.fs-hero { position:relative }
}

@media (min-width:768px) and (max-width:1024px) {
	/* tablet: 1536x776 = 160 KB */
	.fs-hero.fs-hero.fs-hero:not(.elementor-motion-effects-element-type-background) { background-image: url('/wp-content/uploads/2026/05/FS-HOMEPAGE-1536x776.jpg') !important }
}