/* fm-bunny-background */
.fm-bunny-container-background {
	position: relative;
	overflow: hidden;
}

/*
 * Il poster, dipinto appena il CSS e' letto.
 *
 * Sta sullo sfondo del contenitore stesso, non su uno pseudo-elemento: il
 * ::before su quei contenitori e' gia' occupato da Elementor per la sfumatura
 * dell'hero (su Soli un gradiente scuro), e il ::after starebbe SOPRA quella
 * sfumatura, cioe' nel piano sbagliato. Lo sfondo proprio del contenitore e'
 * l'unico piano che sta sotto sia alla sfumatura sia al video.
 *
 * La classe e' ripetuta di proposito: cosi' la regola pesa quanto due classi e
 * non si fa scavalcare dal CSS che Elementor genera per il singolo elemento.
 *
 * I punti di rottura sono gli stessi di getDevice() nel JS - 767 e 1024 -
 * altrimenti al confine il poster mostrerebbe un video e ne partirebbe un
 * altro, che su Soli sono due filmati diversi.
 */
.fm-bunny-container-background.fm-bunny-container-background {
	background-image: var(--fm-bunny-poster, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

@media (max-width: 1024px) {
	.fm-bunny-container-background.fm-bunny-container-background {
		background-image: var(--fm-bunny-poster-tablet, none);
	}
}

@media (max-width: 767px) {
	.fm-bunny-container-background.fm-bunny-container-background {
		background-image: var(--fm-bunny-poster-mobile, none);
	}
}

.fm-bunny-container-background > .fm-bunny-background-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	pointer-events: none;
}

.fm-bunny-background-layer iframe,
.fm-bunny-background-layer video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none !important;
	max-height: none !important;
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.fm-bunny-background-layer video {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: cover;
	object-position: center;
	transform: none;
}

.fm-bunny-container-background > .elementor-background-video-container {
	display: none !important;
}

.fm-bunny-container-background > .elementor-background-overlay {
	z-index: 1;
}

.fm-bunny-container-background > .e-con-inner,
.fm-bunny-container-background > .elementor-element:not(.fm-bunny-background-layer):not(.elementor-background-overlay):not(.elementor-background-video-container) {
	position: relative;
	z-index: 2;
}

/* fm-vh-frontend */
/**
 * Carosello video della home.
 *
 * La larghezza di un video si ricava da quanti se ne vogliono vedere, così il
 * numero è una sola impostazione del widget e non una serie di misure da
 * rifare a ogni scaglione.
 */

.fm-vh {
	--fm-vh-visible: 3;
	--fm-vh-gap: 12px;
	--fm-vh-radius: 0px;
	--fm-vh-ratio: 4 / 5;
	--fm-vh-nav-color: #fff;
	--fm-vh-nav-bg: rgba(0, 0, 0, .45);
	position: relative;
}

.fm-vh__track {
	display: flex;
	gap: var(--fm-vh-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.fm-vh__track::-webkit-scrollbar {
	display: none;
}

.fm-vh__item {
	flex: 0 0 calc((100% - (var(--fm-vh-visible) - 1) * var(--fm-vh-gap)) / var(--fm-vh-visible));
	scroll-snap-align: start;
	display: block;
	position: relative;
	border-radius: var(--fm-vh-radius);
	overflow: hidden;
	text-decoration: none;
	background: #000;
}

/* Il fondo nero è l'attesa, non un bordo: senza, il riquadro lampeggia bianco. */
.fm-vh__media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: var(--fm-vh-ratio);
	overflow: hidden;
}

.fm-vh__poster,
.fm-vh__media .fm-vh__stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fm-vh__poster {
	object-fit: cover;
	transition: opacity .3s ease;
}

/* Quando il filmato è montato la copertina esce di scena ma resta lì: se il
   video non parte (dati risparmiati, blocco del browser) si rivede. */
.fm-vh__media.is-playing .fm-vh__poster {
	opacity: 0;
}

/* Il filmato non riceve il tocco: tutto il riquadro è un link, e un comando
   del lettore rimasto in piedi se lo prenderebbe al posto suo. */
.fm-vh__stage {
	pointer-events: none;
}

/* Del lettore non deve restare niente in vista: qui il filmato e' un'insegna,
   non un video da comandare. Togliere l'attributo dei comandi basta oggi; questi
   avanzi — pulsante centrale, barra, rotella, livello dei sottotitoli — si
   spengono anche se domani il lettore cambia versione o adattatore. La
   copertina del player (.vjs-poster) resta: e' quello che si vede se l'avvio
   automatico viene rifiutato. */
.fm-vh__stage .vjs-control-bar,
.fm-vh__stage .vjs-big-play-button,
.fm-vh__stage .vjs-loading-spinner,
.fm-vh__stage .vjs-text-track-display,
.fm-vh__stage .vjs-title-bar,
.fm-vh__stage .vjs-error-display,
.fm-vh__stage [class*="swarm-overlay"],
.fm-vh__stage [class*="watermark"] {
	display: none !important;
}

.fm-vh__stage > *,
.fm-vh__stage video,
.fm-vh__stage iframe,
.fm-vh__stage smartvideo {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	border: 0;
	display: block;
}

.fm-vh__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--fm-vh-nav-color);
	background: var(--fm-vh-nav-bg);
	transition: opacity .2s ease;
}

.fm-vh__nav svg {
	width: 22px;
	height: 22px;
}

.fm-vh__nav--prev {
	left: 6px;
}

.fm-vh__nav--next {
	right: 6px;
}

.fm-vh__nav[hidden] {
	display: none;
}

.fm-vh--empty {
	padding: 24px;
	border: 1px dashed currentColor;
	opacity: .7;
	text-align: center;
}

@media (max-width: 767px) {
	/* Su uno schermo stretto tre video affiancati sono francobolli: si
	   impilano, a larghezza piena, e il quarto scende sotto agli altri.
	   In colonna non c'e' niente da far scorrere di lato, quindi le frecce
	   spariscono — e ogni filmato nasce quando ci si arriva scorrendo, che e'
	   il modo piu' parsimonioso di tutti. */
	.fm-vh--mobile-stack .fm-vh__track {
		flex-direction: column;
		overflow-x: hidden;
		scroll-snap-type: none;
	}

	.fm-vh--mobile-stack .fm-vh__item {
		flex: 0 0 auto;
		width: 100%;
	}

	.fm-vh--mobile-stack .fm-vh__nav {
		display: none;
	}

	/* A carosello se ne vede uno per volta, grande: l'86 per cento della
	   larghezza lascia in vista il bordo del prossimo, che e' il modo piu'
	   onesto di dire "qui si scorre" senza scriverlo. Il numero di video
	   affiancati impostato nel widget vale per computer e tavoletta: su un
	   telefono, dove il dito e' lo strumento, uno per volta e' l'unica misura
	   che si guarda davvero. */
	.fm-vh--mobile-carousel .fm-vh__item {
		flex: 0 0 86%;
	}

	/* Dove restano affiancati, le frecce si rimpiccioliscono: lo scorrimento
	   vero si fa col dito. */
	.fm-vh__nav {
		width: 32px;
		height: 32px;
	}

	.fm-vh__nav svg {
		width: 18px;
		height: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fm-vh__track {
		scroll-behavior: auto;
	}
}

/* fmct-base */
/*
 * Il fondo comune dei componenti FM.
 *
 * DA DOVE VIENE IL MAGENTA. Hello Elementor, in assets/css/reset.css, veste
 * ogni bottone nudo del sito:
 *
 *   [type="button"], [type="submit"], button {
 *     border: 1px solid #c36; color: #c36;
 *   }
 *   [type="button"]:hover, [type="button"]:focus,
 *   button:hover, button:focus { background-color: #c36; color: #fff; }
 *
 * I widget di Elementor non lo prendono perche' dichiarano da soli il proprio
 * aspetto. I nostri lo prendevano tutti, perche' lasciano il <button> spoglio:
 * e' quel #cc3366 che ricompariva a ogni componente nuovo, su ogni sito col
 * tema Hello. Non e' mai stato un colore scelto da qualcuno.
 *
 * COME SI SPEGNE, DALLA 3.6.60. Non con la specificita'. La 3.6.58 usava
 * button[class^="fm-"] a (0,1,1) per battere il :hover di Hello, e cosi'
 * batteva anche le regole a una classe sola dei nostri moduli - trentuno
 * bottoni (WhatsApp, trigger, wishlist, cassetto, frecce, paginazione,
 * campioni delle varianti) persi sfondo, bordo e colore su ogni sito, a ogni
 * aggiornamento. Il reset di un tema deve stare in fondo alla cascata, e CSS
 * ha lo strumento apposta: il foglio reset.css di Hello viene stampato dal
 * framework come @import ... layer(fm-theme-reset) (vedi
 * FM_Complete_Toolkit::layer_hello_reset). Le regole in un layer perdono
 * contro QUALSIASI regola fuori dal layer, a prescindere dalla specificita'
 * e dall'ordine: il magenta non puo' piu' raggiungere un bottone che un
 * modulo ha vestito, nemmeno al passaggio del mouse.
 *
 * Questo file resta per i bottoni davvero nudi, e per quelli soltanto: le
 * sue regole sono a specificita' ZERO (:where), quindi vincono sul reset nel
 * layer e perdono contro ogni regola di modulo, anche a una classe sola,
 * anche a riposo contro il loro :hover. Un modulo che dichiara qualcosa
 * vince sempre; non deve piu' aggiungere classi per farsi rispettare.
 *
 * SI TOCCANO SOLO I BOTTONI CHE PORTANO UNA CLASSE fm-. Non i bottoni dentro
 * un contenitore FM: dentro una card di prodotto ci sono i bottoni di
 * WooCommerce e di Elementor, che hanno il proprio aspetto e non vanno
 * spogliati.
 *
 * Il colore al passaggio e' quello della pelle, che a sua volta arriva dai
 * Colori globali del Kit.
 */

:where(button[class^="fm-"],
button[class*=" fm-"],
[type="button"][class^="fm-"],
[type="button"][class*=" fm-"]) {
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
}

:where(button[class^="fm-"],
button[class*=" fm-"],
[type="button"][class^="fm-"],
[type="button"][class*=" fm-"]):where(:hover, :focus) {
	background: none;
	color: var( --fm-theme-action, var( --e-global-color-primary, currentColor ) );
}