/**
 * Filtri "Filter pill" — Impreza Grid Filter `.w-filter` (markup nativo us-core).
 * Due contesti, STESSA geometria pill, colore diverso:
 *   • Home  (`.page-id-14`)                → testo scuro su glass chiaro (Figma node 205-7847)
 *   • Categoria (`.pmc__category-page-template`) → testo BIANCO su glass scuro
 *     (Figma node 177-1874 — la sezione template ha bg gradiente scuro #5B618B→#373B56)
 * Auto-enqueue globale dal loader CSS ricorsivo gestito dal mu-plugin.
 */

/* ---- Pill "title": geometria condivisa (home + categoria) ------------------
   Il "title" è la pill (es. "Category ⌄"). Specificità alta per battere
   us-field-style_1. Nessun `color` qui: lo definisce il blocco per-contesto. */
.page-id-14 .w-filter .w-filter-item .w-filter-item-title,
.pmc__category-page-template .w-filter .w-filter-item .w-filter-item-title {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px 8px 24px;
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: 31px;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
}

/* ---- Opener mobile ("Filters"): stessa pill, MA niente `display` ------------
   La visibilità (solo mobile, nascosto >600px) resta a Impreza: se qui
   impostassimo `display`, l'opener comparirebbe anche su desktop. */
.page-id-14 .w-filter-opener,
.pmc__category-page-template .w-filter-opener {
	position: relative;
	gap: 8px;
	padding: 8px 16px 8px 24px;
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: 31px;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
}

/* Bordo gradiente ("Card stroke", come grid-gradient-border.css) via ::before
   + mask-composite: dipinge il gradiente e maschera l'interno, segue il radius. */
.page-id-14 .w-filter .w-filter-item .w-filter-item-title::before,
.pmc__category-page-template .w-filter .w-filter-item .w-filter-item-title::before,
.page-id-14 .w-filter-opener::before,
.pmc__category-page-template .w-filter-opener::before {
	content: "";
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		125deg,
		#fff 0%,
		rgba(255, 255, 255, 0.6) 60%,
		#fff 100%
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Caret di sistema (::after triangolo) allineato come il "mustache" Figma.
   position:static + flex:none = il caret resta un flex item DOPO il testo,
   non può mai sovrapporsi al valore (es. pill "Category : Body care"). */
.page-id-14 .w-filter .w-filter-item .w-filter-item-title::after,
.pmc__category-page-template .w-filter .w-filter-item .w-filter-item-title::after {
	position: static;
	flex: 0 0 auto;
	margin-left: 0; /* il gap del flex gestisce la spaziatura */
}

/* Via l'underline di sistema: la pill è autoportante (Figma non ne ha) */
.page-id-14 .w-filter-item,
.pmc__category-page-template .w-filter-item {
	border-bottom: 0;
}

/* ---- Dropdown aperto: sopra le altre pill --------------------------------
   Impreza dà `z-index: 11` a TUTTI gli item, quindi quando la lista va a capo
   (mobile: 2 pill per riga) la pill della riga successiva — sibling dopo nel
   DOM, stesso z-index — copre il pannello. Serve `!important`: la regola
   Impreza è inline nel CSS del tema con la stessa specificità.
   La posizione orizzontale del pannello (che sborderebbe dal viewport) la
   corregge il JS in `mu-plugins/pmc-filter-dropdown.php`. */
.page-id-14 .w-filter .w-filter-item.expand,
.pmc__category-page-template .w-filter .w-filter-item.expand {
	z-index: 60 !important;
}

/* Pannello: angoli tondi come il resto del sito (default Impreza è a spigolo) */
.page-id-14 .w-filter .w-filter-item-content,
.pmc__category-page-template .w-filter .w-filter-item-content {
	border-radius: 16px;
}

/* ---- Home: testo scuro su glass chiaro ------------------------------------ */
.page-id-14 .w-filter .w-filter-item .w-filter-item-title,
.page-id-14 .w-filter-opener {
	color: #080707;
}
.page-id-14 .w-filter .w-filter-item .w-filter-item-title::after {
	border-top-color: #080707;
}
/* Link "Reset": default Impreza è blu/viola off-brand → grigio caldo del sito. */
.page-id-14 .w-filter .w-filter-item-title .w-filter-item-reset {
	color: #766f67;
}

/* ---- Categoria: testo bianco su glass scuro (Figma 177-1874) -------------- */
.pmc__category-page-template .w-filter .w-filter-item .w-filter-item-title,
.pmc__category-page-template .w-filter-opener {
	color: #fff;
}
.pmc__category-page-template .w-filter .w-filter-item .w-filter-item-title::after {
	border-top-color: #fff;
}
/* Reset su fondo scuro: bianco tenue, secondario ma leggibile. */
.pmc__category-page-template .w-filter .w-filter-item-title .w-filter-item-reset {
	color: rgba(255, 255, 255, 0.7);
}