/* fm-menu-pannello */
/*
 * Il menu a pannello del framework.
 *
 * La struttura e' quella del sistema Trigger (bottone, velatura, pannello che
 * entra di lato, chiusura in alto) con gli stessi nomi di classe e le stesse
 * variabili, cosi' le pelli dei temi scritte per le copie continuano a valere.
 *
 * Ogni regola ha ESATTAMENTE la specificita' della regola corrispondente
 * nelle copie dei temi, cosi' le pelli scritte per quelle continuano a
 * vincere e a perdere negli stessi punti. Dove la copia diceva .fm-trigger
 * qui c'e' :where(.fm-menu-pannello) .fm-trigger (vale zero in piu'); dove
 * diceva .fm-panel-root qui c'e' .fm-menu-pannello (vale una classe, come
 * prima). Non e' pignoleria: la regola di apertura
 * .fm-panel-root.is-open .fm-panel__container azzera il ritardo della
 * visibilita', e con una classe in meno una pelle che allunga la transizione
 * la batterebbe, lasciando il pannello invisibile mentre entra.
 * Le varianti nuove valgono zero (:where), cosi' una pelle le scavalca.
 * La classe fm-menu-pannello tiene questo foglio lontano dai pannelli del
 * Trigger WooCommerce, che non la portano.
 *
 * I colori vengono dai token della pelle (--fm-theme-*), la tipografia dai
 * globali del Kit di Elementor; i controlli del widget scrivono le stesse
 * variabili o stampano regole d'istanza, e vincono su tutto il resto.
 */

.fm-menu-pannello,
.fm-menu-pannello * {
	box-sizing: border-box;
}

/* -------------------------------------------------------------- bottone */

:where(.fm-menu-pannello) .fm-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: var( --fm-trigger-size, 48px );
	min-height: var( --fm-trigger-size, 48px );
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var( --fm-theme-ink, #1a1a1a );
	line-height: 1;
}

:where(.fm-menu-pannello) .fm-trigger__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --fm-trigger-icon-size, 22px );
	height: var( --fm-trigger-icon-size, 22px );
	line-height: 0;
}

:where(.fm-menu-pannello) .fm-trigger__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * L'etichetta prende il carattere "accento" del Kit, a specificita' zero:
 * la pelle o il controllo del widget la scavalcano.
 */
:where(.fm-menu-pannello) .fm-trigger__label {
	font-family: var( --e-global-typography-accent-font-family, inherit );
	font-weight: var( --e-global-typography-accent-font-weight, inherit );
	letter-spacing: var( --e-global-typography-accent-letter-spacing, inherit );
	text-transform: var( --e-global-typography-accent-text-transform, none );
}

@media ( max-width: 767px ) {
	:where(.fm-menu-pannello--etichetta-no-telefono) .fm-trigger__label {
		display: none;
	}
}

/*
 * Due linee: la seconda e' piu' corta e si allunga al passaggio. Il segno e'
 * piu' largo che alto, quindi l'altezza segue le proporzioni del disegno.
 */
:where(.fm-menu-pannello--icona-due) .fm-trigger__icon {
	width: var( --fm-trigger-icon-size, 26px );
	height: auto;
	aspect-ratio: 26 / 10;
}

:where(.fm-menu-pannello--icona-due) .fm-trigger__linea--corta {
	transform-box: fill-box;
	transform-origin: left center;
	transition: transform 0.35s ease, stroke 0.35s ease;
}

:where(.fm-menu-pannello--icona-due) .fm-trigger:hover .fm-trigger__linea--corta,
:where(.fm-menu-pannello--icona-due) .fm-trigger:focus-visible .fm-trigger__linea--corta {
	transform: scaleX( 1.625 );
	stroke: var( --fm-menu-accento, var( --e-global-color-primary, currentColor ) );
}

:where(.fm-menu-pannello) .fm-trigger:focus-visible,
:where(.fm-menu-pannello) .fm-panel__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ------------------------------------------------------------- velatura */

:where(.fm-menu-pannello) .fm-panel__overlay {
	position: fixed;
	inset: 0;
	z-index: var( --fm-panel-z-index, 100000 );
	background-color: var( --fm-panel-overlay, color-mix( in srgb, var( --fm-theme-ink, #1a1a1a ) 42%, transparent ) );
	opacity: 0;
	transition: opacity 280ms ease;
}

.fm-menu-pannello.is-open .fm-panel__overlay {
	opacity: 1;
}

/*
 * hidden e' un attributo, non una classe: il pannello chiuso non deve essere
 * raggiungibile col tabulatore nemmeno mentre l'animazione finisce.
 */
:where(.fm-menu-pannello) .fm-panel__overlay[hidden] {
	display: none;
}

/* ------------------------------------------------------------- pannello */

:where(.fm-menu-pannello) .fm-panel__container {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: calc( var( --fm-panel-z-index, 100000 ) + 1 );
	display: flex;
	width: min( var( --fm-panel-width, 420px ), 100vw );
	max-width: 100vw;
	max-height: 100dvh;
	flex-direction: column;
	background: var( --fm-panel-background, var( --fm-theme-surface, #fff ) );
	visibility: hidden;
	transition: transform 320ms cubic-bezier( 0.22, 0.61, 0.36, 1 ), visibility 0s linear 320ms;
}

.fm-menu-pannello[data-fm-panel-position="right"] .fm-panel__container {
	right: 0;
	left: auto;
	transform: translate3d( 102%, 0, 0 );
}

.fm-menu-pannello[data-fm-panel-position="left"] .fm-panel__container {
	left: 0;
	right: auto;
	transform: translate3d( -102%, 0, 0 );
}

.fm-menu-pannello.is-open .fm-panel__container {
	transform: translate3d( 0, 0, 0 );
	visibility: visible;
	transition-delay: 0s;
}

:where(.fm-menu-pannello) .fm-panel__close {
	position: absolute;
	z-index: 100;
	top: max( var( --fm-close-offset-top, 12px ), env( safe-area-inset-top ) );
	right: max( var( --fm-close-offset-inline, 12px ), env( safe-area-inset-right ) );
	display: inline-flex;
	width: var( --fm-close-button-size, 44px );
	height: var( --fm-close-button-size, 44px );
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	cursor: pointer;
	color: var( --fm-theme-ink, #1a1a1a );
}

:where(.fm-menu-pannello) .fm-panel__close-icon {
	display: inline-flex;
	width: var( --fm-close-icon-size, 20px );
	height: var( --fm-close-icon-size, 20px );
	line-height: 0;
}

:where(.fm-menu-pannello) .fm-panel__close-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Un solo contenitore che scorre: se scorressero anche la navigazione o la
 * lista, su iOS il gesto si incastrerebbe fra i due.
 */
:where(.fm-menu-pannello) .fm-panel__body {
	width: 100%;
	min-height: 0;
	flex: 1 1 auto;
	padding:
		calc( var( --fm-close-button-size, 44px ) + var( --fm-close-offset-top, 12px ) + var( --fm-close-content-gap, 12px ) )
		clamp( 24px, 4vw, 48px )
		clamp( 24px, 4vw, 48px );
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------- le voci */

:where(.fm-menu-pannello) .fm-panel__nav,
:where(.fm-menu-pannello) .fm-panel__menu {
	width: 100%;
	max-width: 100%;
}

:where(.fm-menu-pannello) .fm-panel__menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	gap: var( --fm-panel-item-gap, 16px );
	list-style: none;
}

:where(.fm-menu-pannello) .fm-panel__menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Le voci nel carattere "secondario" del Kit. Tutto a specificita' zero e con
 * ripiego su inherit: un Kit che non lo definisce lascia le voci come sono.
 */
:where(.fm-menu-pannello) .fm-panel__menu a {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: var( --fm-menu-item-icon-gap, 10px );
	font-family: var( --e-global-typography-secondary-font-family, inherit );
	font-size: var( --e-global-typography-secondary-font-size, inherit );
	font-weight: var( --e-global-typography-secondary-font-weight, inherit );
	font-style: var( --e-global-typography-secondary-font-style, inherit );
	line-height: var( --e-global-typography-secondary-line-height, inherit );
	letter-spacing: var( --e-global-typography-secondary-letter-spacing, inherit );
	text-transform: var( --e-global-typography-secondary-text-transform, none );
	color: var( --fm-theme-ink, #1a1a1a );
	text-decoration: none;
	transition: color 180ms ease;
}

:where(.fm-menu-pannello) .fm-panel__menu a:hover,
:where(.fm-menu-pannello) .fm-panel__menu a:focus-visible {
	color: var( --fm-theme-action, #1a1a1a );
}

/*
 * Il secondo livello rientra e resta piu' piccolo del primo. La misura si
 * ricava da quella delle voci e non in em: il sottomenu non sta dentro il
 * link della voce madre, e 0.72em sarebbe una frazione del testo del corpo.
 */
:where(.fm-menu-pannello) .fm-panel__menu .sub-menu {
	display: flex;
	flex-direction: column;
	margin: 10px 0 0;
	padding: 0 0 0 18px;
	gap: calc( var( --fm-panel-item-gap, 16px ) * 0.6 );
	list-style: none;
}

:where(.fm-menu-pannello) .fm-panel__menu .sub-menu a {
	font-size: calc( var( --e-global-typography-secondary-font-size, 1.4em ) * 0.72 );
}

/* --------------------------------------------------------- numeri */

:where(.fm-menu-pannello--numeri) .fm-panel__menu {
	counter-reset: fm-voce;
}

:where(.fm-menu-pannello--numeri) .fm-panel__menu > li {
	counter-increment: fm-voce;
}

:where(.fm-menu-pannello--numeri) .fm-panel__menu > li > a {
	align-items: baseline;
	gap: 0.6em;
}

:where(.fm-menu-pannello--numeri) .fm-panel__menu > li > a::before {
	content: counter( fm-voce, decimal-leading-zero );
	font-family: var( --e-global-typography-text-font-family, inherit );
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.2em;
	font-variant-numeric: lining-nums;
	color: var( --fm-menu-numeri, var( --e-global-color-primary, currentColor ) );
}

/* ----------------------------------------------------------- piede */

:where(.fm-menu-pannello--con-piede) .fm-panel__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
}

:where(.fm-menu-pannello) .fm-panel__piede {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 36px;
	padding-top: 28px;
	border-top: 1px solid color-mix( in srgb, currentColor 12%, transparent );
	font-family: var( --e-global-typography-text-font-family, inherit );
	font-size: 13px;
}

:where(.fm-menu-pannello) .fm-panel__email {
	color: inherit;
	letter-spacing: 0.06em;
	text-decoration: none;
}

:where(.fm-menu-pannello) .fm-panel__slogan {
	margin: 0 0 0 auto;
	font-family: var( --e-global-typography-secondary-font-family, inherit );
	font-style: italic;
	font-size: 1.5em;
	color: var( --fm-menu-accento, var( --e-global-color-primary, currentColor ) );
}

/* ------------------------------------------------------------- foto */

/* Nella forma laterale la foto non ha posto: resta fuori, e lazy non la scarica. */
:where(.fm-menu-pannello) .fm-panel__foto {
	display: none;
}

/* ------------------------------------------------- a tutto schermo */

:where(.fm-menu-pannello--schermo) .fm-panel__container {
	--fm-panel-width: 100vw;
	transition: transform 0.75s cubic-bezier( 0.77, 0, 0.18, 1 ), visibility 0s linear 0.75s;
}

:where(.fm-menu-pannello--schermo) .fm-panel__body {
	padding: clamp( 96px, 14vh, 150px ) clamp( 28px, 7vw, 120px ) 48px;
}

:where(.fm-menu-pannello--schermo) .fm-panel__menu a {
	padding: 10px 0;
	font-size: clamp( 38px, 4.6vw, 68px );
	line-height: 1.05;
	transition: color 0.35s ease, padding 0.45s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

:where(.fm-menu-pannello--schermo) .fm-panel__menu > li > a:hover,
:where(.fm-menu-pannello--schermo) .fm-panel__menu > li > a:focus-visible {
	padding-left: 14px;
}

:where(.fm-menu-pannello--schermo) .fm-panel__menu .sub-menu a {
	font-size: clamp( 18px, 2vw, 28px );
}

:where(.fm-menu-pannello--schermo) .fm-panel__close {
	top: 26px;
	right: 34px;
}

@media ( min-width: 1025px ) {

	/* Voci a sinistra, foto a destra. */
	:where(.fm-menu-pannello--schermo.fm-menu-pannello--con-foto) .fm-panel__container {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}

	:where(.fm-menu-pannello--schermo) .fm-panel__foto {
		position: relative;
		display: block;
		margin: 0;
		overflow: hidden;
	}

	:where(.fm-menu-pannello--schermo) .fm-panel__foto img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
}

@media ( max-width: 1024px ) {

	:where(.fm-menu-pannello--schermo) .fm-panel__close {
		top: 14px;
		right: 14px;
	}

	:where(.fm-menu-pannello--schermo) .fm-panel__slogan {
		margin-left: 0;
		width: 100%;
	}
}

/* ------------------------------------------------ chiusura in un riquadro */

/*
 * Un quadrato col fondo del pannello: la croce si legge anche sopra una foto.
 * Qui la classe pesa davvero, perche' deve battere il reset dei bottoni
 * (.fm-menu-pannello button); una pelle con body.fm-theme-<nome> resta piu'
 * forte.
 */
.fm-menu-pannello--chiusura-riquadro .fm-panel__close {
	width: var( --fm-close-button-size, 52px );
	height: var( --fm-close-button-size, 52px );
	border: 1px solid color-mix( in srgb, currentColor 18%, transparent );
	background: color-mix( in srgb, var( --fm-panel-background, var( --fm-theme-surface, #fff ) ) 72%, transparent );
	transition: border-color 0.3s ease, color 0.3s ease;
}

.fm-menu-pannello--chiusura-riquadro .fm-panel__close:hover,
.fm-menu-pannello--chiusura-riquadro .fm-panel__close:focus-visible {
	border-color: currentColor;
}

/* -------------------------------------------------------- movimento */

:where(.fm-menu-pannello--movimento) .fm-panel__menu > li {
	opacity: 0;
	transform: translate3d( 0, 24px, 0 );
	transition: opacity 0.6s ease, transform 0.8s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li {
	opacity: 1;
	transform: none;
}

:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(1) { transition-delay: 0.35s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(2) { transition-delay: 0.43s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(3) { transition-delay: 0.51s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(4) { transition-delay: 0.59s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(5) { transition-delay: 0.67s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(6) { transition-delay: 0.75s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(7) { transition-delay: 0.83s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(n+8) { transition-delay: 0.91s; }

:where(.fm-menu-pannello--movimento) .fm-panel__piede {
	opacity: 0;
	transition: opacity 0.6s ease;
}

:where(.fm-menu-pannello--movimento).is-open .fm-panel__piede {
	opacity: 1;
	transition-delay: 0.8s;
}

:where(.fm-menu-pannello--movimento) .fm-panel__foto img {
	transform: scale( 1.08 );
	transition: transform 1.6s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

:where(.fm-menu-pannello--movimento).is-open .fm-panel__foto img {
	transform: scale( 1 );
}

/* ------------------------------------------------- movimento ridotto */

@media ( prefers-reduced-motion: reduce ) {

	:where(.fm-menu-pannello) .fm-panel__container,
	:where(.fm-menu-pannello) .fm-panel__overlay,
	:where(.fm-menu-pannello) .fm-trigger__linea--corta {
		transition: none;
	}

	:where(.fm-menu-pannello--movimento) .fm-panel__menu > li,
	:where(.fm-menu-pannello--movimento) .fm-panel__piede,
	:where(.fm-menu-pannello--movimento) .fm-panel__foto img {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * Hello Elementor colora di magenta i bottoni al passaggio e al fuoco: qui i
 * bottoni sono due, quello che apre e quello che chiude, e nessuno dei due si
 * riempie. Cambia solo il colore del segno.
 */
.fm-menu-pannello button {
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
}

/* Il fuoco da clic: spoglio. */
.fm-menu-pannello .fm-trigger:focus,
.fm-menu-pannello .fm-panel__close:focus {
	background: none;
	color: var( --fm-theme-ink, #1a1a1a );
}

.fm-menu-pannello .fm-trigger:hover,
.fm-menu-pannello .fm-trigger:focus-visible,
.fm-menu-pannello .fm-panel__close:hover,
.fm-menu-pannello .fm-panel__close:focus-visible {
	background: none;
	color: var( --fm-menu-accento, var( --e-global-color-primary, currentColor ) );
}

/*
 * Hello Elementor da' ai bottoni un padding di mezzo rem per uno: nel bottone
 * di chiusura (44 px) l'icona veniva schiacciata a larghezza zero e la X
 * spariva. Bottoni senza padding e icone che non si restringono.
 */
.fm-menu-pannello .fm-trigger,
.fm-menu-pannello .fm-panel__close {
	padding: 0;
}

:where(.fm-menu-pannello) .fm-trigger__icon,
:where(.fm-menu-pannello) .fm-panel__close-icon {
	flex: none;
}

/*
 * Il riquadro della chiusura ha il suo fondo: le regole qui sopra, a pari
 * specificita', lo toglierebbero al passaggio e al fuoco.
 */
.fm-menu-pannello--chiusura-riquadro.fm-menu-pannello .fm-panel__close:hover,
.fm-menu-pannello--chiusura-riquadro.fm-menu-pannello .fm-panel__close:focus,
.fm-menu-pannello--chiusura-riquadro.fm-menu-pannello .fm-panel__close:focus-visible {
	background: color-mix( in srgb, var( --fm-panel-background, var( --fm-theme-surface, #fff ) ) 72%, transparent );
}

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