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

.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 prendono tutti, perche' lasciano il <button> spoglio:
 * e' quel #cc3366 che ricompare a ogni componente nuovo, su ogni sito col tema
 * Hello. Non e' mai stato un colore scelto da qualcuno.
 *
 * Dichiarare il solo stato di riposo non basta. La regola di Hello e' su
 * :hover, cioe' vale (0,1,1); una `.fm-trigger { background: none }` vale
 * (0,1,0) e al passaggio del mouse perde. Il passaggio va dichiarato.
 *
 * 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: i bottoni dei componenti seguono la palette del
 * sito senza che nessuno debba dirglielo. Un componente che vuole altro lo
 * dichiara da se' - basta una classe in piu' nel selettore.
 */

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

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

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

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

.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--fm-wooe-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-wooe-color-text);
  font-weight: 600;
}

.woocommerce form .form-row .required {
  color: var(--fm-wooe-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-wooe-color-muted);
}

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

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

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

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  border-radius: 0;
  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;
  }
}

/* I campi sono volutamente piatti e senza bordo: hover e focus devono
   restare nella stessa lingua, non far spuntare il bordo di default del
   browser. Hover: fondo appena piu' scuro. Focus: sottolineatura netta. */
.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row select:hover,
.woocommerce form .form-row textarea:hover {
  background-color: color-mix(in srgb, currentColor 7%, #f9fafa);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border: 0;
  box-shadow: inset 0 -2px 0 0 var(--e-global-color-text, #333749);
  background-color: #fff;
}

/* "Sei gia' nostro cliente?": deve saltare all'occhio, non sembrare una
   riga qualunque. Grassetto, bordo a sinistra e l'omino davanti. */
.woocommerce .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-login-toggle.e-checkout-secondary-title {
  font-weight: 700;
  padding: 10px 14px;
  border-left: 3px solid var(--e-global-color-accent, #f1135e);
  background: color-mix(in srgb, var(--e-global-color-accent, #f1135e) 7%, #fff);
}

.woocommerce .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-form-login-toggle.e-checkout-secondary-title::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.45em;
  vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="8" r="3.4"/><path d="M4.5 20c1.6-3.6 4.2-5.4 7.5-5.4s5.9 1.8 7.5 5.4"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="8" r="3.4"/><path d="M4.5 20c1.6-3.6 4.2-5.4 7.5-5.4s5.9 1.8 7.5 5.4"/></svg>') no-repeat center / contain;
}

/* "Spedire a un indirizzo diverso?" in evidenza ora che parte spento. */
.woocommerce #ship-to-different-address label {
  font-weight: 700;
}

/* ------------------------------------------------------------------
   Loghi dei metodi di pagamento (gateway_icons_map)
   Inline dopo il nome del metodo, come sul checkout storico.
------------------------------------------------------------------ */
.woocommerce-checkout #payment .fm-wooe-gateway-icon {
	display: inline-block;
	max-height: 24px;
	width: auto;
	vertical-align: middle;
	margin-left: 6px;
	float: none;
}
.woocommerce-checkout #payment .fm-wooe-gateway-icon:first-of-type {
	margin-left: 10px;
}