/* ==========================================================================
   Il Segreto di Silvia — filtri.css
   Sidebar dei filtri sugli archivi prodotto (negozio, categorie, marca).
   Caricato SOLO li' da inc/filtri.php, dopo custom.css.

   Stile Aesop: carta e inchiostro, hairline, pannelli su superficie,
   pillole 999px. Sovrascrive i colori di default di WooCommerce
   (slider viola/rosa, x rossa sui filtri attivi): qui niente rosso.
   ========================================================================== */

/* --------------------------------------------------------------------------
   COLONNA SIDEBAR
   GeneratePress: #right-sidebar.widget-area > .inside-right-sidebar > .widget
   -------------------------------------------------------------------------- */
#right-sidebar .inside-right-sidebar {
	margin-top: 0;
}

/* Ogni widget = pannello su superficie, come le card del sito. */
#right-sidebar .widget {
	background: var(--superficie, #FAF9F4);
	border: 1px solid var(--linea, rgba(37, 36, 34, 0.14));
	border-radius: var(--raggio, 18px);
	padding: 22px 22px 24px;
	margin-bottom: 16px;
}

/* Titolo widget = eyebrow del brand. */
#right-sidebar .widget .widget-title {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--inchiostro-60, rgba(37, 36, 34, 0.64));
	margin: 0 0 16px;
}

/* --------------------------------------------------------------------------
   FILTRO PREZZO (woocommerce_price_filter)
   Lo slider jQuery UI di Woo nasce viola/rosa: tutto a inchiostro.
   -------------------------------------------------------------------------- */
#right-sidebar .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: var(--linea, rgba(37, 36, 34, 0.14));
	border: 0;
	height: 3px;
	border-radius: 999px;
	margin: 8px 7px 24px;
}

#right-sidebar .widget_price_filter .ui-slider .ui-slider-range {
	background: var(--inchiostro, #252422);
	border-radius: 999px;
}

#right-sidebar .widget_price_filter .ui-slider .ui-slider-handle {
	width: 14px;
	height: 14px;
	top: -6px;
	margin-left: -7px;
	background: var(--inchiostro, #252422);
	border: 2px solid var(--superficie, #FAF9F4);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--inchiostro-30, rgba(37, 36, 34, 0.3));
	cursor: grab;
}

#right-sidebar .widget_price_filter .ui-slider .ui-slider-handle:active {
	cursor: grabbing;
}

#right-sidebar .widget_price_filter .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13.5px;
}

#right-sidebar .widget_price_filter .price_slider_amount .price_label {
	color: var(--inchiostro-60, rgba(37, 36, 34, 0.64));
	order: 2;
}

/* Bottone "Filtra": pillola inchiostro, hover invertito. */
#right-sidebar .widget_price_filter .price_slider_amount .button {
	order: 1;
	background: var(--inchiostro, #252422);
	border: 1px solid var(--inchiostro, #252422);
	color: var(--carta, #F1EFE6);
	border-radius: 999px;
	padding: 9px 20px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

#right-sidebar .widget_price_filter .price_slider_amount .button:hover {
	background: transparent;
	color: var(--inchiostro, #252422);
}

/* --------------------------------------------------------------------------
   FILTRO MARCA (woocommerce_layered_nav, display dropdown)
   Select nativa + versione potenziata selectWoo/select2.
   -------------------------------------------------------------------------- */
#right-sidebar select.woocommerce-widget-layered-nav-dropdown,
#right-sidebar .widget select {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	background: var(--superficie, #FAF9F4)
		url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23252422' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")
		no-repeat right 16px center / 10px auto;
	border: 1px solid var(--inchiostro-30, rgba(37, 36, 34, 0.3));
	border-radius: 999px;
	padding: 10px 38px 10px 16px;
	font-family: inherit;
	font-size: 14px;
	color: var(--inchiostro, #252422);
	cursor: pointer;
}

#right-sidebar select.woocommerce-widget-layered-nav-dropdown:focus,
#right-sidebar .widget select:focus {
	outline: none;
	border-color: var(--inchiostro, #252422);
}

/* Bottone "Applica" del dropdown (visibile senza selectWoo). */
#right-sidebar .woocommerce-widget-layered-nav-dropdown__submit {
	margin-top: 12px;
	width: 100%;
	background: var(--inchiostro, #252422);
	border: 1px solid var(--inchiostro, #252422);
	color: var(--carta, #F1EFE6);
	border-radius: 999px;
	padding: 9px 20px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

#right-sidebar .woocommerce-widget-layered-nav-dropdown__submit:hover {
	background: transparent;
	color: var(--inchiostro, #252422);
}

/* selectWoo/select2: il "finto select" dentro la sidebar. */
#right-sidebar .select2-container .select2-selection--single {
	height: 42px;
	background: var(--superficie, #FAF9F4);
	border: 1px solid var(--inchiostro-30, rgba(37, 36, 34, 0.3));
	border-radius: 999px;
}

#right-sidebar .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 40px;
	padding-left: 16px;
	color: var(--inchiostro, #252422);
	font-size: 14px;
}

#right-sidebar .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px;
	right: 10px;
}

#right-sidebar .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--inchiostro, #252422) transparent transparent transparent;
}

#right-sidebar .select2-container--open .select2-selection--single,
#right-sidebar .select2-container--focus .select2-selection--single {
	border-color: var(--inchiostro, #252422);
}

/* Il pannello a tendina di select2 viene appeso a <body>:
   regole senza prefisso, ma questo CSS esiste solo sugli archivi. */
.select2-dropdown {
	background: var(--superficie, #FAF9F4);
	border: 1px solid var(--linea, rgba(37, 36, 34, 0.14));
	border-radius: var(--raggio-sm, 12px);
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(37, 36, 34, 0.1);
}

.select2-container--default .select2-results__option {
	font-size: 14px;
	color: var(--inchiostro, #252422);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--inchiostro, #252422);
	color: var(--carta, #F1EFE6);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--inchiostro-30, rgba(37, 36, 34, 0.3));
	border-radius: 999px;
	padding: 6px 14px;
	font-family: inherit;
	font-size: 14px;
	color: var(--inchiostro, #252422);
	background: var(--superficie, #FAF9F4);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	outline: none;
	border-color: var(--inchiostro, #252422);
}

/* --------------------------------------------------------------------------
   FILTRO MARCA IN LISTA (fallback se un giorno si passa a display list)
   -------------------------------------------------------------------------- */
#right-sidebar .woocommerce-widget-layered-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#right-sidebar .woocommerce-widget-layered-nav-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--linea, rgba(37, 36, 34, 0.14));
	font-size: 14px;
}

#right-sidebar .woocommerce-widget-layered-nav-list li:last-child {
	border-bottom: 0;
}

#right-sidebar .woocommerce-widget-layered-nav-list li a {
	color: var(--inchiostro, #252422);
	text-decoration: none;
}

#right-sidebar .woocommerce-widget-layered-nav-list li a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

#right-sidebar .woocommerce-widget-layered-nav-list li .count {
	color: var(--inchiostro-40, rgba(37, 36, 34, 0.46));
	font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   FILTRI ATTIVI (woocommerce_layered_nav_filters)
   Chip a pillola con la x per rimuovere; mai rosso.
   -------------------------------------------------------------------------- */
#right-sidebar .widget_layered_nav_filters ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#right-sidebar .widget_layered_nav_filters ul li {
	margin: 0;
	padding: 0;
	float: none;
}

#right-sidebar .widget_layered_nav_filters ul li.chosen a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--carta, #F1EFE6);
	border: 1px solid var(--inchiostro-30, rgba(37, 36, 34, 0.3));
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	color: var(--inchiostro, #252422);
	text-decoration: none;
	transition: border-color 0.18s ease;
}

#right-sidebar .widget_layered_nav_filters ul li.chosen a:hover {
	border-color: var(--inchiostro, #252422);
}

/* La x: Woo la disegna con ::before (di default rossa) — a inchiostro. */
#right-sidebar .widget_layered_nav_filters ul li.chosen a::before {
	content: "\00d7";
	color: var(--inchiostro-60, rgba(37, 36, 34, 0.64));
	font-size: 15px;
	line-height: 1;
}

#right-sidebar .widget_layered_nav_filters ul li.chosen a:hover::before {
	color: var(--inchiostro, #252422);
}

/* --------------------------------------------------------------------------
   ORDINAMENTO NATIVO WOO ("Ordina per", sopra la griglia)
   Stessa select sobria della sidebar.
   -------------------------------------------------------------------------- */
.woocommerce-ordering select.orderby {
	-webkit-appearance: none;
	appearance: none;
	background: var(--superficie, #FAF9F4)
		url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23252422' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")
		no-repeat right 16px center / 10px auto;
	border: 1px solid var(--inchiostro-30, rgba(37, 36, 34, 0.3));
	border-radius: 999px;
	padding: 9px 38px 9px 16px;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--inchiostro, #252422);
	cursor: pointer;
}

.woocommerce-ordering select.orderby:focus {
	outline: none;
	border-color: var(--inchiostro, #252422);
}

/* --------------------------------------------------------------------------
   MOBILE — la sidebar GeneratePress finisce sotto la griglia: per la v1
   va bene, basta staccarla un po' dal contenuto.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	#right-sidebar {
		margin-top: 40px;
	}

	#right-sidebar .widget {
		margin-bottom: 12px;
	}
}