/* fmcs-style */
/* FMCS minimal CSS (no JS) */
.fmcs-btn{transition:transform .15s ease, box-shadow .15s ease}
.fmcs-btn:hover{transform:translateY(-1px)}

/*
 * Mobile viewport guard.
 *
 * Older Android browsers can include translated drawers, animated tracks and
 * wrapped Elementor columns in the document's horizontal overflow area.
 * Keep those visual effects clipped to the viewport without disabling the
 * intentional horizontal scrolling inside tabs and filter rows.
 */
html,
body{
	max-width:100%;
	overflow-x:hidden;
}

@supports (overflow:clip){
	html,
	body{
		overflow-x:clip;
	}
}

/* Quantity defaults */
.fmcs-qty-row{display:flex;gap:.5rem;align-items:center}
.fmcs-qty{width:120px;max-width:100%}
.fmcs-qty-label{margin-right:.25rem}
.fmcs-btn-row{display:flex}

/* Align defaults */
.fmcs-wrap{ text-align:left; }
.fmcs-qty-row{ justify-content:flex-start; text-align:left; }
.fmcs-price-sale,
.fmcs-price-sale *,
.fmcs-price ins,
.fmcs-price ins *{text-decoration:none!important;border-bottom:0!important}

/* Button alignment helpers */
.fmcs-btn-row{display:flex;justify-content:flex-start}
.fmcs-btn-row.fmcs-align-center{justify-content:center}
.fmcs-btn-row.fmcs-align-flex-end{justify-content:flex-end}
.fmcs-btn-row.fmcs-align-stretch{display:block}
.fmcs-btn-row.fmcs-align-stretch .fmcs-btn{display:block;width:100%}

/* Fallback hover animations */
.fmcs-btn.elementor-animation-grow{transition:transform .15s ease}
.fmcs-btn.elementor-animation-grow:hover{transform:scale(1.04)}
.fmcs-btn.elementor-animation-shrink{transition:transform .15s ease}
.fmcs-btn.elementor-animation-shrink:hover{transform:scale(0.96)}
@keyframes fmcs-pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.fmcs-btn.elementor-animation-pulse:hover{animation:fmcs-pulse .5s ease-in-out}

/* Coupon button shortcode */
.fmcs-coupon-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.fmcs-coupon-widget-wrap.fmcs-align-full .fmcs-coupon-button{display:flex;width:100%}

/* Coupon confirmation message */
.fmcs-inline-confirmation{display:grid;gap:14px;width:100%;margin-top:14px;padding:24px;border:0 solid transparent;border-radius:0;background:transparent;text-align:center;box-shadow:none}
.fmcs-confirmation-title{font-size:18px;font-weight:700;line-height:1.2}
.fmcs-confirmation-text{max-width:32ch;margin:0 auto;font-size:18px;line-height:1.45}
.fmcs-confirmation-links{display:flex;justify-content:center;align-items:center}
.fmcs-confirmation-link{text-decoration:none;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .18s ease}
.fmcs-confirmation-link:hover{opacity:.72}
@media (max-width: 767px){
  /*
   * OXA footer template: this container is a vertical flex group. Elementor's
   * mobile `wrap` setting places the second column beside the first when their
   * combined height is larger than the container, doubling the page width.
   */
  .elementor-location-footer .elementor-element-c18e74a{
    height:auto!important;
    max-height:none!important;
    flex-wrap:nowrap!important;
  }

  .elementor-location-footer .elementor-element-c18e74a > .e-con{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .fmcs-inline-confirmation{padding:20px;border-radius:20px}
  .fmcs-confirmation-text{font-size:16px}
}

/* Uppercase fiscal fields */
#billing_cf, #billing_sdi { text-transform: uppercase; }

/* 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;
}

/* 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 ) );
}

/* fm-wpc-frontend-fixes */
:root {
  --fm-wpc-color-text: var(--e-global-color-text, currentColor);
  --fm-wpc-color-accent: var(--e-global-color-primary, currentColor);
  --fm-wpc-color-muted: var(--e-global-color-secondary, rgba(17, 17, 17, 0.68));
  --fm-wpc-color-border: color-mix(in srgb, var(--fm-wpc-color-text) 14%, transparent);
}

.woocommerce,
.woocommerce-page {
  color: var(--fm-wpc-color-text);
}

.woocommerce a,
.woocommerce-page a,
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a {
  color: var(--fm-wpc-color-accent);
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.woocommerce .woocommerce-privacy-policy-text,
.woocommerce .woocommerce-terms-and-conditions-wrapper,
.woocommerce .woocommerce-form-login-toggle,
.woocommerce .woocommerce-form-coupon-toggle,
.woocommerce #payment .place-order,
.woocommerce form .form-row {
  font-size: 0.98rem;
  line-height: 1.65;
}

.woocommerce .woocommerce-privacy-policy-text p:last-child,
.woocommerce .woocommerce-terms-and-conditions-wrapper p:last-child,
.woocommerce form .form-row:last-child {
  margin-bottom: 0;
}

.woocommerce form .form-row label,
.woocommerce #payment .payment_methods label,
.woocommerce .woocommerce-form__label {
  color: var(--fm-wpc-color-text);
  font-weight: 600;
}

.woocommerce form .form-row .required {
  color: var(--fm-wpc-color-accent);
}

.woocommerce #payment,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  border-radius: 18px;
}

.woocommerce .woocommerce-privacy-policy-text,
.woocommerce .woocommerce-terms-and-conditions-wrapper {
  color: var(--fm-wpc-color-muted);
}

.woocommerce-checkout #payment div.payment_box {
  background: color-mix(in srgb, var(--fm-wpc-color-accent) 4%, white);
  color: var(--fm-wpc-color-text);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: color-mix(in srgb, var(--fm-wpc-color-accent) 4%, white);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border-color: var(--fm-wpc-color-border);
  border-radius: 20px;
}

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  border-radius: 20px;
  overflow: hidden;
}

.woocommerce .select2-container .select2-selection--single,
.woocommerce .select2-container .select2-selection--multiple,
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce textarea {
  border-radius: 14px;
}

@media (max-width: 767px) {
  .woocommerce .woocommerce-privacy-policy-text,
  .woocommerce .woocommerce-terms-and-conditions-wrapper,
  .woocommerce .woocommerce-form-login-toggle,
  .woocommerce .woocommerce-form-coupon-toggle,
  .woocommerce #payment .place-order,
  .woocommerce form .form-row {
    font-size: 0.95rem;
  }
}