/*
 * L'header, rifatto il 29/09 sul modello chiesto da Stefano: tre zone e niente
 * altro. A sinistra menu e ricerca, il logo al centro, a destra lingua, account
 * e borsa.
 *
 * Prima le icone venivano da tre famiglie diverse (Linearicons l'account,
 * Ekiticons la lente, Elementor la borsa), ognuna col suo spessore, la sua
 * misura e la sua altezza: a 1440 stavano a 27, 15 e 25 px dal bordo. Qui sono
 * disegnate una volta, con lo stesso tratto, e colorate dal testo (`mask` +
 * `currentColor`), così seguono il nero del sito.
 *
 * I selettori partono da `body .fr-header` perché devono prevalere sul CSS
 * che Elementor genera per ogni widget e sugli snippet «header css» del sito.
 */

.fr-header {
	--fr-h-icona: 20px;
	--fr-h-spazio: 24px;
	--fr-h-lato: var(--fr-lato, 40px);
	--fr-h-colore: #000;
	--fr-h-spento: #8c8c8c;
	/* Voci del menu: grigio che diventa nero al passaggio e sulla pagina in
	   cui si è, come la lingua attiva. #767676 è il grigio più chiaro che su
	   bianco resta leggibile a norma (4,5:1): più stacco dal nero dell'hover
	   (era #555, Stefano 29/09: «marca leggermente di più l'hover»). */
	--fr-h-voce: #767676;

	--fr-ic-cerca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.75'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
	--fr-ic-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.5' r='4.25'/%3E%3Cpath d='M3.75 21c0-4.3 3.7-7.25 8.25-7.25S20.25 16.7 20.25 21'/%3E%3C/svg%3E");
	--fr-ic-borsa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4.75 7.75h14.5l-1 13.5H5.75z'/%3E%3Cpath d='M8.75 10V6.25a3.25 3.25 0 0 1 6.5 0V10'/%3E%3C/svg%3E");
	--fr-ic-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 8.5h18M3 15.5h12'/%3E%3C/svg%3E");
	--fr-ic-chiudi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
 * Le tre zone
 * ------------------------------------------------------------------------ */

body .fr-header > .elementor-container {
	position: relative;
	max-width: none !important;
	height: var(--frasette-barra, 70px);
	padding: 0 var(--fr-h-lato);
	align-items: center !important;
}

body .fr-header .fr-header__sinistra,
body .fr-header .fr-header__destra {
	width: auto !important;
	flex: 1 1 0 !important;
	min-width: 0;
}

body .fr-header .fr-header__sinistra > .elementor-widget-wrap,
body .fr-header .fr-header__destra > .elementor-widget-wrap {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: var(--fr-h-spazio);
	padding: 0 !important;
}

body .fr-header .fr-header__sinistra > .elementor-widget-wrap {
	justify-content: flex-start !important;
}

body .fr-header .fr-header__destra > .elementor-widget-wrap {
	justify-content: flex-end !important;
}

/*
 * Tutte e tre le zone alte quanto la barra, col contenuto a metà: prima il
 * menu stava in cima alla sua colonna (26px dal bordo) e il logo a 38.
 */
body .fr-header .elementor-column {
	align-self: stretch !important;
}

body .fr-header .elementor-column,
body .fr-header .elementor-column > .elementor-widget-wrap {
	margin: 0 !important;
	padding: 0 !important;
}

/* La colonna del menu aveva un margine negativo di 16px, residuo di un
   vecchio aggiustamento: il menu finiva a 8px dal bordo. */
body .fr-header .elementor-column > .elementor-widget-wrap {
	height: 100%;
	align-content: center !important;
}

/*
 * Ogni widget alto quanto il suo contenuto e centrato: senza, l'account
 * (26px) e la borsa (27px) si allineavano in alto e le icone finivano 6px
 * fuori linea fra loro.
 */
body .fr-header .fr-header__sinistra .elementor-widget > .elementor-widget-container,
body .fr-header .fr-header__destra .elementor-widget > .elementor-widget-container {
	display: flex;
	align-items: center;
	line-height: 0;
}

body .fr-header .elementor-widget-icon .elementor-icon-wrapper,
body .fr-header .elementor-widget-icon .elementor-icon,
body .fr-header .elementor-menu-cart__toggle_wrapper,
body .fr-header .elementor-menu-cart__toggle {
	display: block;
	width: var(--fr-h-icona);
	height: var(--fr-h-icona);
	padding: 0 !important;
	line-height: 0;
}

/*
 * In fondo alla colonna di destra c'è una sezione interna col contatore della
 * lista desideri, già nascosta: la colonna resta vuota ma la sezione no, e
 * prendeva un passo in più (la borsa finiva 24px prima del bordo).
 */
body .fr-header .fr-header__destra .elementor-inner-section {
	display: none !important;
}

/* Il contenitore dei widget di destra: stessa riga, stesso passo. Il passo va
   sull'interno (`e-con-inner`): il contenitore è «boxed». */
body .fr-header .fr-header__destra .e-con,
body .fr-header .fr-header__destra .e-con-inner {
	--row-gap: var(--fr-h-spazio);
	--column-gap: var(--fr-h-spazio);
	flex-direction: row !important;
	--gap: var(--fr-h-spazio);
	gap: var(--fr-h-spazio) !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
}

/*
 * Il logo sta al centro della BARRA, non della sua colonna: le due zone ai lati
 * non sono larghe uguali (a destra c'è più roba), e con le colonne il logo
 * scivolava. Sul telefono stava 43px fuori asse.
 */
body .fr-header .fr-header__centro {
	position: absolute !important;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto !important;
}

body .fr-header .fr-header__centro > .elementor-widget-wrap {
	padding: 0 !important;
}

body .fr-header .logo-header,
body .fr-header .logo-header a {
	display: block;
	line-height: 0;
}

/* Larghezza fissa: lo script dell'header cambia l'immagine allo scroll, e i
   due file non hanno le stesse proporzioni. Così il logo non salta. */
body .fr-header .logo-header img {
	width: 180px !important;
	max-width: none;
	height: auto !important;
}

/* I widget della barra non portano margini propri: il passo è uno solo. */
body .fr-header .fr-header__sinistra .elementor-element,
body .fr-header .fr-header__destra .elementor-element {
	margin: 0 !important;
	width: auto !important;
	/* Nessun widget si restringe per far posto agli altri: il menu non deve
	   mai poter finire schiacciato a zero dalla sua colonna. */
	flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Le icone: una sola serie
 * ------------------------------------------------------------------------ */

body .fr-header .lnr-user,
body .fr-header .icon-search-2 {
	display: block;
	width: var(--fr-h-icona);
	height: var(--fr-h-icona);
	font-size: 0 !important;
	color: var(--fr-h-colore) !important;
	background-color: currentColor;
	-webkit-mask: var(--fr-ic-account) center / contain no-repeat;
	mask: var(--fr-ic-account) center / contain no-repeat;
	margin: 0 !important;
	cursor: pointer;
}

body .fr-header .icon-search-2 {
	-webkit-mask-image: var(--fr-ic-cerca);
	mask-image: var(--fr-ic-cerca);
}

body .fr-header .lnr-user::before,
body .fr-header .icon-search-2::before {
	content: none !important;
}

/* L'account aveva 6px di margine sopra e 15 a destra, messi a mano. */
body .fr-header .elementor-widget-icon .elementor-icon {
	margin: 0 !important;
	display: block;
	line-height: 0;
	font-size: 0;
}

/* Account e lente: solo l'icona, nessun riquadro intorno. */
body .fr-header .elementor-widget-icon .elementor-icon-wrapper {
	line-height: 0;
}

/* La ricerca di Elementor resta solo come pulsante: il campo lo apre FiboSearch. */
body .fr-header .elementor-widget-search .e-search,
body .fr-header .elementor-widget-search .e-search-form {
	display: block;
	width: var(--fr-h-icona);
	height: var(--fr-h-icona);
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
}

body .fr-header .elementor-widget-search .e-search-label {
	display: block;
	width: var(--fr-h-icona);
	height: var(--fr-h-icona);
	margin: 0;
	padding: 0;
	line-height: 0;
	position: static;
}

/* Elementor sposta la lente dentro il campo (che qui non c'è): torna al suo posto. */
body .fr-header .elementor-widget-search .e-search-label i {
	position: static !important;
	inset: auto !important;
	transform: none !important;
}

body .fr-header .elementor-widget-search .e-search-input-wrapper,
body .fr-header .elementor-widget-search .e-search-submit,
body .fr-header .elementor-widget-search .e-search-results-container {
	display: none !important;
}

/* La borsa: il disegno di Elementor lascia il posto al nostro. */
body .fr-header .elementor-menu-cart__toggle .elementor-button {
	position: relative;
	display: block;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	line-height: 0;
}

body .fr-header .elementor-menu-cart__toggle .elementor-button-text {
	display: none !important;
}

body .fr-header .elementor-menu-cart__toggle .elementor-button-icon {
	position: relative;
	display: block;
	width: var(--fr-h-icona);
	height: var(--fr-h-icona);
	margin: 0 !important;
}

body .fr-header .elementor-menu-cart__toggle .elementor-button-icon svg {
	display: none !important;
}

body .fr-header .elementor-menu-cart__toggle .elementor-button-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--fr-h-colore);
	-webkit-mask: var(--fr-ic-borsa) center / contain no-repeat;
	mask: var(--fr-ic-borsa) center / contain no-repeat;
}

/* Il numero degli articoli: piccolo, sull'angolo, non una seconda icona. */
body .fr-header .elementor-menu-cart__toggle .elementor-button-icon-qty {
	position: absolute !important;
	top: -6px;
	right: -8px;
	z-index: 1;
	min-width: 16px;
	height: 16px;
	margin: 0 !important;
	padding: 0 4px !important;
	border-radius: 8px;
	background-color: var(--fr-h-colore) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 500;
	line-height: 16px !important;
	text-align: center;
}

body .fr-header .elementor-menu-cart__toggle .elementor-button-icon-qty[data-counter="0"] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * La lingua: IT EN
 * ------------------------------------------------------------------------ */

body .fr-header .cpel-switcher__nav,
body .fr-header .cpel-switcher__list {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

body .fr-header .cpel-switcher__lang {
	margin: 0 !important;
	padding: 0 !important;
}

body .fr-header .cpel-switcher__lang a,
body .fr-header .cpel-switcher__code {
	display: block;
	padding: 4px 0 !important;
	color: var(--fr-h-spento) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: 0.08em;
	line-height: 1 !important;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

body .fr-header .cpel-switcher__code {
	padding: 0 !important;
	color: inherit !important;
}

body .fr-header .cpel-switcher__lang--active a,
body .fr-header .cpel-switcher__lang a:hover,
body .fr-header .cpel-switcher__lang a:focus-visible {
	color: var(--fr-h-colore) !important;
}

/* ---------------------------------------------------------------------------
 * Il menu
 * ------------------------------------------------------------------------ */

body .fr-header .menuheader .mega-menu-wrap {
	background: none !important;
}

/*
 * Sul computer le voci si allineano alla stessa riga delle icone. Solo sopra
 * i 900px: è lì che Max Mega Menu passa all'hamburger, e sotto le stesse voci
 * formano il pannello laterale, che ha le sue misure.
 */
@media (min-width: 901px) {
	body .fr-header .menuheader #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link {
		height: var(--fr-h-icona);
		line-height: var(--fr-h-icona);
		padding: 0 !important;
		margin: 0 28px 0 0 !important;
	}

	/* Dopo l'ultima voce basta il passo della barra, prima della lente. */
	body .fr-header .menuheader #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item:last-child,
	body .fr-header .menuheader #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item:last-child > a.mega-menu-link {
		margin-right: 0 !important;
	}
}

/*
 * Le voci, principali e della tendina, hanno lo stesso colore e la stessa
 * misura; nere al passaggio e sulla voce della pagina aperta (e su «Collezione»
 * quando si è dentro una delle sue pagine). Vale per IT ed EN: Polylang cambia
 * il menu ma non la posizione, quindi gli identificatori sono gli stessi.
 * Il `!important` batte il colore che lo script dell'header scrive inline.
 */
body .fr-header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item > a.mega-menu-link {
	color: var(--fr-h-voce) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	transition: color 0.2s ease;
}

body .fr-header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item > a.mega-menu-link:hover,
body .fr-header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item > a.mega-menu-link:focus-visible,
body .fr-header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
body .fr-header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-current-menu-item > a.mega-menu-link,
body .fr-header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-current-menu-ancestor > a.mega-menu-link,
body .fr-header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-current-page-ancestor > a.mega-menu-link {
	color: var(--fr-h-colore) !important;
}

@media (min-width: 901px) {
	/*
	 * La tendina parte dal bordo inferiore della BARRA e prende tutta la
	 * larghezza. Prima partiva sotto la voce (a 46px, dentro l'header che
	 * finisce a 70) ed era larga 1440 a partire da 40: sforava a destra e le
	 * voci risultavano spostate dal centro.
	 */
	body .fr-header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu {
		position: fixed !important;
		/*
		 * 1px sotto l'header, col bordino grigio in cima: su uno schermo Retina
		 * o con lo zoom del browser le due misure si arrotondano ognuna per
		 * conto suo, e fra header e tendina poteva passare un filo di pagina.
		 * Così non può aprirsi nessuna fessura, a nessuno zoom.
		 */
		top: calc(var(--fr-h-sotto, var(--frasette-barra, 70px)) - 1px) !important;
		border-top: 1px solid #ececec !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: none !important;
		margin: 0 !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	}

	/*
	 * Il ponte fra la voce e la tendina: senza, scendendo col mouse dalla voce
	 * alla tendina si attraversano 24px che non sono di nessuno dei due e la
	 * tendina si richiude. Il ponte è largo quanto lo schermo, perché la mano
	 * scende quasi sempre in diagonale verso la voce che le interessa; c'è solo
	 * sotto la voce la cui tendina è aperta, quindi non apre niente da solo.
	 */
	body .fr-header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item-has-children > a.mega-menu-link::after {
		content: "";
		position: absolute;
		left: -14px;
		right: -14px;
		top: 100%;
		height: 26px;
	}

	body .fr-header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link::after {
		position: fixed;
		left: 0;
		right: 0;
		top: calc(var(--fr-h-sotto, var(--frasette-barra, 70px)) - 26px);
	}
}

/*
 * Chi è collegato come amministratore ha la barra di WordPress in cima (32px,
 * 46 sotto i 783): l'header fisso le stava sopra e la copriva a metà («Ciao,
 * stefanogaw» sotto le icone). Scende sotto di lei; ricerca e tendina seguono.
 */
body.admin-bar .fr-header {
	top: 32px !important;
	--fr-h-sotto: calc(var(--frasette-barra, 70px) + 32px);
}

body.admin-bar .fibosearchContainer {
	top: calc(var(--frasette-barra, 70px) + 31px) !important;
}

@media (max-width: 782px) {
	body.admin-bar .fr-header {
		top: 46px !important;
	}

	body.admin-bar .fibosearchContainer {
		top: calc(var(--frasette-barra, 70px) + 45px) !important;
	}
}

/* Sotto i 600 la barra di WordPress scorre via con la pagina: l'header torna in cima. */
@media (max-width: 600px) {
	body.admin-bar .fr-header {
		top: 0 !important;
	}

	body.admin-bar .fibosearchContainer {
		top: calc(var(--frasette-barra, 70px) - 1px) !important;
	}
}

/* Tablet e telefono: due linee sottili, come nel modello; una X quando è aperto. */
body .fr-header .mega-menu-toggle {
	height: auto !important;
	padding: 0 !important;
	line-height: 0 !important;
	background: none !important;
}

body .fr-header .mega-menu-toggle .mega-toggle-block {
	margin: 0 !important;
	height: auto !important;
}

body .fr-header .mega-menu-toggle .mega-toggle-animated {
	display: block;
	width: var(--fr-h-icona) !important;
	height: var(--fr-h-icona) !important;
	padding: 0 !important;
	background-color: var(--fr-h-colore) !important;
	-webkit-mask: var(--fr-ic-menu) center / contain no-repeat;
	mask: var(--fr-ic-menu) center / contain no-repeat;
}

body .fr-header .mega-menu-toggle.mega-menu-open .mega-toggle-animated {
	-webkit-mask-image: var(--fr-ic-chiudi);
	mask-image: var(--fr-ic-chiudi);
}

body .fr-header .mega-menu-toggle .mega-toggle-animated-box {
	visibility: hidden;
}

/*
 * La barra di ricerca (FiboSearch, aperta dalla lente) si attacca sotto
 * l'header. Stava a 87px: fra le due restava una striscia di pagina.
 */
body .fibosearchContainer {
	top: calc(var(--frasette-barra, 70px) - 1px) !important;
	margin: 0 !important;
	border-top: 1px solid #ececec;
}

/* ---------------------------------------------------------------------------
 * Passaggio del mouse e tastiera: niente verde, solo un velo
 * ------------------------------------------------------------------------ */

body .fr-header .elementor-widget-icon a,
body .fr-header .elementor-widget-search .e-search-label,
body .fr-header .elementor-menu-cart__toggle .elementor-button {
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	body .fr-header .elementor-widget-icon a:hover,
	body .fr-header .elementor-widget-search .e-search-label:hover,
	body .fr-header .elementor-menu-cart__toggle .elementor-button:hover {
		opacity: 0.6;
	}
}

body .fr-header a:focus-visible,
body .fr-header button:focus-visible,
body .fr-header .e-search-label:focus-within {
	outline: 1px solid var(--fr-h-colore);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	body .fr-header * {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Tablet e telefono
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.fr-header {
		--fr-h-spazio: 20px;
	}

	body .fr-header .logo-header img {
		width: 150px !important;
	}
}

@media (max-width: 767px) {
	.fr-header {
		--fr-h-spazio: 16px;
	}

	/*
	 * A 390 le due zone laterali occupano 64 e 119px: il logo a 100 lascia
	 * almeno 10px d'aria per parte. A 118 toccava «IT».
	 */
	.fr-header {
		--fr-h-spazio: 14px;
	}

	body .fr-header .logo-header img {
		width: 100px !important;
	}

	body .fr-header .cpel-switcher__nav,
	body .fr-header .cpel-switcher__list {
		gap: 6px;
	}

	body .fr-header .cpel-switcher__lang a {
		font-size: 11px !important;
	}
}