/*!
 * fs/sezione-firme — la fascia «Le firme del tuo giorno piu' bello».
 *
 * Occhiello, titolo, la striscia dei nomi delle collezioni che scorre da
 * sola, e il link a tutte le collezioni.
 *
 * 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-firme.fs-firme.fs-firme { --display:flex; --min-height:62vh; --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:space-between; --overlay-opacity:0; --margin-top:0px; --margin-bottom:0px; --margin-left:0px; --margin-right:0px; --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px }
.fs-firme.fs-firme.fs-firme:not(.elementor-motion-effects-element-type-background), .fs-firme.fs-firme.fs-firme > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color:#0B0B0B }
.fs-firme.fs-firme.fs-firme::before, .fs-firme.fs-firme.fs-firme > .elementor-background-video-container::before, .fs-firme.fs-firme.fs-firme > .e-con-inner > .elementor-background-video-container::before, .fs-firme.fs-firme.fs-firme > .elementor-background-slideshow::before, .fs-firme.fs-firme.fs-firme > .e-con-inner > .elementor-background-slideshow::before, .fs-firme.fs-firme.fs-firme > .elementor-motion-effects-container > .elementor-motion-effects-layer::before { background-color:transparent; --background-overlay:''; background-image:linear-gradient(180deg, #000000 100%, #000000 0%) }
.fs-firme__intestazione.fs-firme__intestazione.fs-firme__intestazione { --display:flex; --gap:0px 0px; --row-gap:0px; --column-gap:0px; --margin-top:44px; --margin-bottom:26px; --margin-left:0px; --margin-right:0px }
.fs-firme__occhiello.fs-firme__occhiello.fs-firme__occhiello .text-wrapper p, .fs-firme__occhiello.fs-firme__occhiello.fs-firme__occhiello .text-wrapper > * { text-transform:uppercase }
.fs-firme__occhiello.fs-firme__occhiello.fs-firme__occhiello .text-wrapper { text-align:center }
.fs-firme__titolo.fs-firme__titolo.fs-firme__titolo .text-wrapper p, .fs-firme__titolo.fs-firme__titolo.fs-firme__titolo .text-wrapper > * { font-size:3.157rem }
.fs-firme__titolo.fs-firme__titolo.fs-firme__titolo .text-wrapper { text-align:center }
.fs-firme__vetrina.fs-firme__vetrina.fs-firme__vetrina { --display:flex; --margin-top:0px; --margin-bottom:48px; --margin-left:0px; --margin-right:0px }
.fs-firme__carosello.fs-firme__carosello.fs-firme__carosello .saren--product--main { flex-direction:column }
.fs-firme__carosello.fs-firme__carosello.fs-firme__carosello .carousel--wrapper { --itemsWidth:200px; gap:50px; align-items:center }
.fs-firme__carosello.fs-firme__carosello.fs-firme__carosello.quick_atc_pop_close_button-positioned .quick-atc-popup span.pop--close { top:75px; bottom:unset; --transformY:0%; left:50px; right:unset; --transformX:0% }
.fs-firme__carosello.fs-firme__carosello.fs-firme__carosello.quick_atc_product_flex--styled .saren--popup--cart--product { flex-direction:row }
.fs-firme__carosello.fs-firme__carosello.fs-firme__carosello.quick_atc_product_meta_flex--styled .saren--popup--cart-product-meta { flex-direction:row }
.fs-firme__carosello.fs-firme__carosello.fs-firme__carosello.quick_atc_product_vars_table_flex--styled .saren--popup--cart--product tbody { flex-direction:row }
.fs-firme__carosello.fs-firme__carosello.fs-firme__carosello.quick_atc_product_vars_flex--styled .saren-variation-radio-buttons { flex-direction:row }
.fs-firme__carosello.fs-firme__carosello.fs-firme__carosello .pe--styled--object { --radius:15px 15px 15px 15px !important; padding:50px 50px 50px 50px !important }
.fs-firme__carosello.fs-firme__carosello.fs-firme__carosello .carousel--term--desc { text-align:left }
.fs-firme__carosello.fs-firme__carosello.fs-firme__carosello.term_name-positioned .carousel--term--name { top:75px; bottom:unset; --transformY:0%; left:50px; right:unset; --transformX:0% }

@media (max-width:1024px) {
	.fs-firme.fs-firme.fs-firme { --min-height:66vh }
}

@media (max-width:767px) {
	.fs-firme__intestazione.fs-firme__intestazione.fs-firme__intestazione { --margin-top:0px; --margin-bottom:0px; --margin-left:0px; --margin-right:0px }
	.fs-firme__titolo.fs-firme__titolo.fs-firme__titolo .text-wrapper p, .fs-firme__titolo.fs-firme__titolo.fs-firme__titolo .text-wrapper > * { font-size:24px }
	/* ---------- 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. */
	.fs-firme.fs-firme.fs-firme { 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 }
	.fs-firme__intestazione.fs-firme__intestazione.fs-firme__intestazione { padding: 0 20px !important }
	.fs-firme__vetrina.fs-firme__vetrina.fs-firme__vetrina { 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'. */
	.fs-firme__carosello.fs-firme__carosello.fs-firme__carosello .carousel--item { height: auto; min-height: 96px }
	/* ---------- 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. */
	.fs-firme.fs-firme.fs-firme { gap: 20px; padding: calc(var(--fs-head) + 20px) 0 calc(var(--fs-bar) + 22px) !important }
	/* ---------- occhiello + titolo ---------- */
	.fs-firme__intestazione.fs-firme__intestazione.fs-firme__intestazione { 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 */
	.fs-firme__occhiello.fs-firme__occhiello.fs-firme__occhiello .text-wrapper p, .fs-firme__titolo.fs-firme__titolo.fs-firme__titolo .text-wrapper h2 { text-align: left !important }
	.fs-firme__occhiello.fs-firme__occhiello.fs-firme__occhiello .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 */
	.fs-firme__titolo.fs-firme__titolo.fs-firme__titolo .text-wrapper h2 { font-size: 33px; line-height: 1.08; letter-spacing: -.01em; max-width: 15ch; margin: 0 }
	/* ---------- riga vetrina + riga (barra | link) ---------- */
	.fs-firme__vetrina.fs-firme__vetrina.fs-firme__vetrina: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. */
	.fs-firme__vetrina.fs-firme__vetrina.fs-firme__vetrina:has(.fs-firme) .fs-firme__carosello { position: absolute !important; top: 0; left: 0; width: 100%; overflow: hidden; visibility: hidden !important; pointer-events: none !important }
	.fs-firme__vetrina.fs-firme__vetrina.fs-firme__vetrina:has(.fs-firme) .fs-tutte-firme { grid-area: link; margin: 0 !important; padding: 0 20px 0 0 !important; text-align: right }
	.fs-firme__vetrina.fs-firme__vetrina.fs-firme__vetrina:has(.fs-firme) .fs-tutte-firme a { font-size: 10px; letter-spacing: .2em; border-bottom-color: rgba(255,255,255,.45) }
}

@media (min-width:768px) {
	.fs-firme__vetrina.fs-firme__vetrina.fs-firme__vetrina: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 }
	.fs-firme__vetrina.fs-firme__vetrina.fs-firme__vetrina:has(.fs-firme) .fs-firme__carosello { position: absolute !important; top: 0; left: 0; width: 100%; overflow: hidden; visibility: hidden !important; pointer-events: none !important }
	/* 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 */
	.fs-firme__vetrina.fs-firme__vetrina.fs-firme__vetrina:has(.fs-firme) .fs-tutte-firme { display: block !important; grid-area: link; margin: 0 !important; padding: 0 !important; text-align: right }
	.fs-firme__vetrina.fs-firme__vetrina.fs-firme__vetrina:has(.fs-firme) .fs-tutte-firme a { font-size: 10px; letter-spacing: .2em; border-bottom-color: rgba(255,255,255,.45) }
}