/*
 * Negozio e categorie: la colonna dei filtri diventa un pannello laterale.
 *
 * Template #65 (IT) e #3095 (EN), stessi identificatori:
 *   0d5cb61  sezione a due colonne
 *   223cf4d  colonna dei filtri  → il pannello
 *   3691ec3  colonna dei prodotti → a tutta larghezza
 *   fb33607 / 4db2850 / eda4974 / 3f24202  titoli Collezione / Colore / Prezzo / Misura
 *   970e7ad / 684d177 / cfc3779 / e92288b  gli stessi titoli «aperti» (doppioni)
 *   346955a / 32869cc / 67876b9 / a09a6f3  i filtri veri
 * Modello grafico: quello mandato da Stefano il 29/09 (metà schermo, sezioni
 * con titolo e voci su due colonne, righe di separazione, X in alto a destra).
 */

.fr-con-filtri {
	--fr-f-colore: #000;
	--fr-f-voce: #333;
	--fr-f-spento: #8c8c8c;
	--fr-f-riga: #e6e6e6;
	--fr-f-dentro: 64px;
}

/* ---------------------------------------------------------------------------
 * La pagina senza colonna: prodotti a tutta larghezza, fra i margini
 * dell'header come le pagine di tipologia.
 * ------------------------------------------------------------------------ */

body.fr-con-filtri .elementor-element-3691ec3 {
	width: 100% !important;
	max-width: 100% !important;
}

body.fr-con-filtri .elementor-element-3691ec3 > .elementor-widget-wrap {
	padding: 0 !important;
}

/* ---------------------------------------------------------------------------
 * La riga «32 PRODOTTI · FILTRI»
 * ------------------------------------------------------------------------ */

.fr-filtri-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 52px;
	margin: 8px 0 24px;
	border-top: 1px solid var(--fr-f-riga);
	border-bottom: 1px solid var(--fr-f-riga);
}

.fr-filtri-conta {
	color: var(--fr-f-spento);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body .fr-filtri-apri {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--fr-f-colore) !important;
	font-family: inherit;
	font-size: 12px !important;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

/* Due righe di lunghezza diversa: i cursori dei filtri, stesso tratto delle icone dell'header. */
body .fr-filtri-apri::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: 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 7h18M3 17h18'/%3E%3Ccircle cx='15' cy='7' r='2.25' fill='%23fff'/%3E%3Ccircle cx='9' cy='17' r='2.25' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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 7h18M3 17h18'/%3E%3Ccircle cx='15' cy='7' r='2.25'/%3E%3Ccircle cx='9' cy='17' r='2.25'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) {
	body .fr-filtri-apri:hover {
		opacity: 0.6;
	}
}

body .fr-filtri-apri:focus-visible {
	outline: 1px solid var(--fr-f-colore);
	outline-offset: 4px;
}

/*
 * Il conteggio di WooCommerce («Visualizzazione di 1-16 di 32 risultati»)
 * resta per i lettori di schermo ma non si vede: il numero è nella riga. Il
 * link alla garanzia legale che lo segue resta dov'è.
 */
body.fr-con-filtri .elementor-element-4dba692 .woocommerce-result-count {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

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

body.fr-con-filtri .elementor-element-223cf4d {
	position: fixed !important;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100001;
	display: block !important;
	width: 50vw !important;
	max-width: none !important;
	margin: 0 !important;
	background: #fff;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

html.fr-filtri-aperti body.fr-con-filtri .elementor-element-223cf4d {
	/* Aperto è sempre visibile: dopo un filtro applicato senza ricaricare,
	   YITH lo rendeva invisibile e i clic passavano al velo, che lo chiudeva. */
	visibility: visible !important;
	transform: none;
	box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08);
}

body.fr-con-filtri .elementor-element-223cf4d > .elementor-widget-wrap {
	display: block !important;
	padding: 0 var(--fr-f-dentro) 48px !important;
}

.fr-filtri-velo {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

html.fr-filtri-aperti .fr-filtri-velo {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

html.fr-filtri-aperti,
html.fr-filtri-aperti body {
	overflow: hidden;
}

/* La testata: «Rimuovi filtri» a sinistra, la X a destra. */
.fr-filtri-testa {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
	margin: 0 calc(-1 * var(--fr-f-dentro));
	padding: 0 var(--fr-f-dentro);
	background: #fff;
}

body .fr-filtri-rimuovi {
	color: var(--fr-f-colore) !important;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: uppercase;
}

body .fr-filtri-rimuovi.is-vuoto {
	color: var(--fr-f-spento) !important;
	text-decoration-color: var(--fr-f-riga);
	cursor: default;
}

body .fr-filtri-chiudi {
	width: 24px;
	height: 24px;
	margin-right: -2px;
	padding: 0 !important;
	border: 0 !important;
	background-color: var(--fr-f-colore) !important;
	-webkit-mask: 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") center / contain no-repeat;
	mask: 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") center / contain no-repeat;
	cursor: pointer;
}

body .fr-filtri-chiudi:focus-visible,
body .fr-filtri-rimuovi:focus-visible {
	outline: 1px solid var(--fr-f-colore);
	outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
 * Le sezioni: sempre aperte, titolo e voci, una riga fra l'una e l'altra
 * ------------------------------------------------------------------------ */

/* Le frecce e i titoli «aperti» doppioni non servono più: le sezioni sono aperte. */
body.fr-con-filtri .elementor-element-223cf4d .elementor-widget-icon,
body.fr-con-filtri .elementor-element-970e7ad,
body.fr-con-filtri .elementor-element-684d177,
body.fr-con-filtri .elementor-element-cfc3779,
body.fr-con-filtri .elementor-element-e92288b {
	display: none !important;
}

/* I filtri veri, che la vecchia colonna teneva chiusi (`nascondi`). */
body.fr-con-filtri .elementor-element-223cf4d .elementor-element-346955a,
body.fr-con-filtri .elementor-element-223cf4d .elementor-element-32869cc,
body.fr-con-filtri .elementor-element-223cf4d .elementor-element-67876b9,
body.fr-con-filtri .elementor-element-223cf4d .elementor-element-a09a6f3 {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 36px !important;
	padding: 0 !important;
}

/*
 * Dentro i filtri, nessun rientro proprio: il widget delle collezioni aveva
 * -35px di margine (serviva alla vecchia colonna) e l'elenco risaliva sotto il
 * titolo; i contenitori di YITH 10px di imbottitura, e i colori partivano più
 * a destra delle collezioni. Tutto parte dal bordo interno del pannello.
 */
body.fr-con-filtri .elementor-element-223cf4d .elementor-element-346955a > .elementor-widget-container,
body.fr-con-filtri .elementor-element-223cf4d .elementor-element-32869cc > .elementor-widget-container,
body.fr-con-filtri .elementor-element-223cf4d .elementor-element-67876b9 > .elementor-widget-container,
body.fr-con-filtri .elementor-element-223cf4d .elementor-element-a09a6f3 > .elementor-widget-container,
body.fr-con-filtri .elementor-element-223cf4d .widget_product_categories,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filters,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filters .filters-container,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filters form,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter .filter-content {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

body.fr-con-filtri .elementor-element-223cf4d .fr-filtro-vuoto {
	display: none !important;
}

/* I titoli di sezione. */
body.fr-con-filtri .elementor-element-fb33607,
body.fr-con-filtri .elementor-element-4db2850,
body.fr-con-filtri .elementor-element-eda4974,
body.fr-con-filtri .elementor-element-3f24202 {
	display: block !important;
	width: auto !important;
	margin: 0 calc(-1 * var(--fr-f-dentro)) !important;
	padding: 36px var(--fr-f-dentro) 20px !important;
	border-top: 1px solid var(--fr-f-riga);
}

/* Il titolo occupa tutta la riga: sul telefono Elementor centrava l'elemento. */
body.fr-con-filtri .elementor-element-223cf4d .elementor-widget-heading {
	width: 100% !important;
	max-width: none !important;
	justify-self: stretch !important;
	text-align: left !important;
}

body.fr-con-filtri .elementor-element-fb33607 {
	padding-top: 12px !important;
	border-top: 0;
}

body.fr-con-filtri .elementor-element-223cf4d .elementor-heading-title {
	margin: 0 !important;
	/* Sul telefono Elementor li centrava. */
	text-align: left !important;
	color: var(--fr-f-colore) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

/* Voci su due colonne, come nel modello. */
body.fr-con-filtri .elementor-element-223cf4d ul.product-categories,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter ul.filter-items {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.fr-con-filtri .elementor-element-223cf4d ul.product-categories li,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter .filter-item {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.fr-con-filtri .elementor-element-223cf4d ul.product-categories a,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter .filter-item > a,
body.fr-con-filtri .elementor-element-223cf4d .elementor-element-a09a6f3 a {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--fr-f-voce) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

body.fr-con-filtri .elementor-element-223cf4d ul.product-categories a:hover,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter .filter-item > a:hover,
body.fr-con-filtri .elementor-element-223cf4d .elementor-element-a09a6f3 a:hover {
	color: var(--fr-f-colore) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

/* La collezione in cui si è, e le voci scelte: nere e sottolineate. */
body.fr-con-filtri .elementor-element-223cf4d ul.product-categories li.current-cat > a,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter .filter-item.active > a {
	color: var(--fr-f-colore) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

/* Colore: pallino + nome (prima c'era solo un rettangolo, senza nome). */
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter .term-color {
	display: inline-block !important;
	flex: 0 0 auto;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter .color-swatch {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	border-radius: 50% !important;
}

body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter .filter-item.active .term-color {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--fr-f-colore);
}

body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter .term-label {
	display: inline !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	margin: 0 !important;
	font-size: 14px !important;
}

body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filter .filter-title,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filters .filters-reset,
body.fr-con-filtri .elementor-element-223cf4d .yith-wcan-filters .apply-filters {
	display: none !important;
}

/* Misura: le taglie come voci di testo, non come bottoni grigi. */
body.fr-con-filtri .elementor-element-a09a6f3 .elementor-shortcode > div {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px !important;
	margin: 0 !important;
}

body.fr-con-filtri .elementor-element-a09a6f3 .elementor-shortcode a {
	text-decoration: none !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	background: none !important;
	justify-self: start;
}

/* La taglia scelta: lo shortcode la segna col FONDO nero (le altre hanno
   fondo #eee e testo #000, quindi «#000» da solo le prenderebbe tutte). */
body.fr-con-filtri .elementor-element-a09a6f3 .elementor-shortcode a[style*="background:#000"]:not(:first-child),
body.fr-con-filtri .elementor-element-a09a6f3 .elementor-shortcode a[style*="background: #000"]:not(:first-child) {
	color: var(--fr-f-colore) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

/* «Azzera» delle misure: resta, in fondo alla riga, come un link discreto. */
body.fr-con-filtri .elementor-element-a09a6f3 .elementor-shortcode a:first-child {
	order: 99;
	color: var(--fr-f-spento) !important;
	font-size: 12px !important;
	letter-spacing: 0.08em;
	text-decoration: underline !important;
	text-underline-offset: 4px;
	text-transform: uppercase;
}

/* Prezzo: il cursore di WooCommerce a tutta larghezza, in nero. */
body.fr-con-filtri .elementor-element-67876b9 .wp-block-woocommerce-price-filter {
	width: 100% !important;
	max-width: 420px;
}

body.fr-con-filtri .elementor-element-67876b9 .wc-block-components-price-slider__range-input-progress {
	--range-color: var(--fr-f-colore) !important;
}

body.fr-con-filtri .elementor-element-67876b9 .wc-block-components-filter-submit-button,
body.fr-con-filtri .elementor-element-67876b9 .wc-block-price-filter__button {
	/* Prima aveva una larghezza fissa e «Applica» usciva tagliato. */
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	overflow: visible !important;
	white-space: nowrap;
	margin-top: 16px !important;
	padding: 12px 28px !important;
	border: 1px solid var(--fr-f-colore) !important;
	border-radius: 0 !important;
	background: var(--fr-f-colore) !important;
	color: #fff !important;
	font-size: 12px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.fr-con-filtri .elementor-element-67876b9 .widget,
body.fr-con-filtri .elementor-element-67876b9 ul,
body.fr-con-filtri .elementor-element-67876b9 li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

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

@media (max-width: 1024px) {
	.fr-con-filtri {
		--fr-f-dentro: 32px;
	}

	body.fr-con-filtri .elementor-element-223cf4d {
		width: min(560px, 85vw) !important;
	}
}

@media (max-width: 767px) {
	.fr-con-filtri {
		--fr-f-dentro: 16px;
	}

	body.fr-con-filtri .elementor-element-223cf4d {
		width: 100vw !important;
	}

	.fr-filtri-testa {
		height: 64px;
	}

	.fr-filtri-barra {
		min-height: 48px;
		margin-bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.fr-con-filtri .elementor-element-223cf4d,
	.fr-filtri-velo {
		transition: none !important;
	}
}