/**
 * Diseño de los filtros de la tienda (marca, gama, grip, talla, color y precio).
 *
 * Estos cuatro son widgets clásicos de WooCommerce dentro de Elementor: Elementor los envuelve
 * pero no ofrece controles de estilo para lo de adentro, así que su aspecto se define aquí.
 *
 * TODO color y TODA tipografía salen de los globales del Kit. Si en Elementor se cambia el rojo
 * de la marca o la fuente de los botones, estos filtros cambian solos. No hay ningún color fijo.
 *
 * Globales usados: rojo · rojo700 · rojo50 · tinta · texto · gris · linea · blanco · papel
 */

/* ── Títulos de cada filtro ─────────────────────────────────────── */
.elementor-widget-wp-widget-woocommerce_layered_nav h5,
.elementor-widget-wp-widget-woocommerce_layered_nav_filters h5,
.elementor-widget-wp-widget-woocommerce_price_filter h5,
.elementor-widget-wp-widget-woocommerce_brand_nav h5,
.elementor-widget-wp-widget-woocommerce_product_categories h5 {
	font-family: var(--e-global-typography-h3-font-family), sans-serif;
	font-weight: var(--e-global-typography-h3-font-weight, 700);
	font-size: 15px;
	line-height: 1.3;
	color: var(--e-global-color-tinta);
	margin: 0 0 12px;
}

/* ── Gama, Grip, Talla y Color: píldoras ────────────────────────── */
.woocommerce .woocommerce-widget-layered-nav ul.woocommerce-widget-layered-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La píldora es el elemento de la lista, no el enlace: así el número de productos,
   que en el HTML de WooCommerce va fuera del enlace, queda dentro de la píldora. */
.woocommerce .woocommerce-widget-layered-nav ul li.woocommerce-widget-layered-nav-list__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid var(--e-global-color-linea);
	border-radius: 999px;
	background: var(--e-global-color-blanco);
	list-style: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.woocommerce .woocommerce-widget-layered-nav ul li.woocommerce-widget-layered-nav-list__item:hover {
	border-color: var(--e-global-color-rojo);
}

.woocommerce .woocommerce-widget-layered-nav ul li.woocommerce-widget-layered-nav-list__item--chosen {
	background: var(--e-global-color-rojo50);
	border-color: var(--e-global-color-rojo);
}

.woocommerce .woocommerce-widget-layered-nav ul li.woocommerce-widget-layered-nav-list__item::before {
	content: none;
}

.woocommerce .woocommerce-widget-layered-nav ul li.woocommerce-widget-layered-nav-list__item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--e-global-color-texto);
	font-family: var(--e-global-typography-boton-font-family), sans-serif;
	font-weight: var(--e-global-typography-boton-font-weight, 600);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.woocommerce .woocommerce-widget-layered-nav ul li.woocommerce-widget-layered-nav-list__item > a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
}

.woocommerce .woocommerce-widget-layered-nav ul li.woocommerce-widget-layered-nav-list__item > a:hover,
.woocommerce .woocommerce-widget-layered-nav ul li.woocommerce-widget-layered-nav-list__item > a:focus-visible {
	color: var(--e-global-color-rojo);
}

/* La opción marcada: relleno rojo suave y borde del color de la marca. */
.woocommerce .woocommerce-widget-layered-nav ul li.woocommerce-widget-layered-nav-list__item--chosen > a {
	color: var(--e-global-color-rojo700);
}

/* La cuenta de productos, discreta y dentro de la píldora. */
.woocommerce .woocommerce-widget-layered-nav ul li .count {
	color: var(--e-global-color-gris);
	font-weight: 400;
	font-size: 13px;
}

.woocommerce .woocommerce-widget-layered-nav ul li.woocommerce-widget-layered-nav-list__item--chosen .count {
	color: var(--e-global-color-rojo700);
}

/* ── Marca: lista, porque tiene líneas de modelo dentro ─────────── */
.woocommerce .widget_brand_nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .widget_brand_nav ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .widget_brand_nav ul li::before {
	content: none;
}

.woocommerce .widget_brand_nav ul li > a {
	display: inline-block;
	padding: 6px 0;
	color: var(--e-global-color-texto);
	font-family: var(--e-global-typography-cuerpo-font-family), sans-serif;
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
	transition: color .15s ease;
}

.woocommerce .widget_brand_nav ul li > a:hover,
.woocommerce .widget_brand_nav ul li > a:focus-visible {
	color: var(--e-global-color-rojo);
}

.woocommerce .widget_brand_nav ul li.chosen > a {
	color: var(--e-global-color-rojo700);
	font-weight: 600;
}

.woocommerce .widget_brand_nav ul li .count {
	color: var(--e-global-color-gris);
	font-size: 13px;
}

/* Las líneas de modelo (Pure Aero, Evo…) sangradas y más pequeñas. */
.woocommerce .widget_brand_nav ul ul.children {
	margin: 0 0 4px 14px;
	padding-left: 12px;
	border-left: 1px solid var(--e-global-color-linea);
}

.woocommerce .widget_brand_nav ul ul.children li > a {
	padding: 4px 0;
	font-size: 14px;
	color: var(--e-global-color-gris);
}

.woocommerce .widget_brand_nav ul ul.children li > a:hover {
	color: var(--e-global-color-rojo);
}

/* ── Filtros activos: píldoras con una equis para quitarlos ─────── */
.woocommerce .widget_layered_nav_filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .widget_layered_nav_filters ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .widget_layered_nav_filters ul li::before {
	content: none;
}

.woocommerce .widget_layered_nav_filters ul li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--e-global-color-rojo50);
	color: var(--e-global-color-rojo700);
	font-family: var(--e-global-typography-boton-font-family), sans-serif;
	font-weight: var(--e-global-typography-boton-font-weight, 600);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.woocommerce .widget_layered_nav_filters ul li a::before {
	/* WooCommerce ya pone aquí su icono de cruz: solo se le da tamaño y peso visual. */
	margin: 0;
	font-size: 13px;
	opacity: .85;
}

/* En las píldoras marcadas, esa misma cruz indica que al tocar se quita el filtro. */
.woocommerce .woocommerce-widget-layered-nav ul li.woocommerce-widget-layered-nav-list__item--chosen > a::before {
	margin: 0 2px 0 0;
	font-size: 12px;
	opacity: .85;
}

.woocommerce .widget_layered_nav_filters ul li a:hover,
.woocommerce .widget_layered_nav_filters ul li a:focus-visible {
	background: var(--e-global-color-rojo);
	color: var(--e-global-color-blanco);
}

/* ── Precio ─────────────────────────────────────────────────────── */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: var(--e-global-color-linea);
	border-radius: 999px;
	height: 4px;
	margin-bottom: 18px;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
	background: var(--e-global-color-rojo);
	border-radius: 999px;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	width: 18px;
	height: 18px;
	top: -7px;
	margin-left: -9px;
	background: var(--e-global-color-blanco);
	border: 2px solid var(--e-global-color-rojo);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
	cursor: grab;
	transition: transform .12s ease;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:hover,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:focus-visible {
	transform: scale(1.12);
}

.woocommerce .widget_price_filter .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.woocommerce .widget_price_filter .price_slider_amount .price_label {
	order: 1;
	flex: 1 1 100%;
	color: var(--e-global-color-gris);
	font-family: var(--e-global-typography-cuerpo-font-family), sans-serif;
	font-size: 13px;
	text-align: left;
}

.woocommerce .widget_price_filter .price_slider_amount .price_label span {
	color: var(--e-global-color-tinta);
	font-weight: 600;
}

/* El botón, con el mismo lenguaje que los demás botones del sitio. */
.woocommerce .widget_price_filter .price_slider_amount .button {
	order: 2;
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--e-global-color-rojo);
	color: var(--e-global-color-blanco);
	font-family: var(--e-global-typography-boton-font-family), sans-serif;
	font-weight: var(--e-global-typography-boton-font-weight, 600);
	font-size: 14px;
	line-height: 1.2;
	transition: background-color .15s ease;
}

.woocommerce .widget_price_filter .price_slider_amount .button:hover,
.woocommerce .widget_price_filter .price_slider_amount .button:focus-visible {
	background: var(--e-global-color-rojo700);
	color: var(--e-global-color-blanco);
}

/* ── Categoría (tipos de accesorio, Hombre/Mujer, Junior): píldoras ─ */
.woocommerce .widget_product_categories ul.product-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .widget_product_categories ul.product-categories li.cat-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid var(--e-global-color-linea);
	border-radius: 999px;
	background: var(--e-global-color-blanco);
	list-style: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.woocommerce .widget_product_categories ul.product-categories li.cat-item::before {
	content: none;
}

.woocommerce .widget_product_categories ul.product-categories li.cat-item:hover {
	border-color: var(--e-global-color-rojo);
}

.woocommerce .widget_product_categories ul.product-categories li.current-cat {
	background: var(--e-global-color-rojo50);
	border-color: var(--e-global-color-rojo);
}

.woocommerce .widget_product_categories ul.product-categories li.cat-item > a {
	color: var(--e-global-color-texto);
	font-family: var(--e-global-typography-boton-font-family), sans-serif;
	font-weight: var(--e-global-typography-boton-font-weight, 600);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
}

/* Toda la píldora es tocable, no solo el texto. */
.woocommerce .widget_product_categories ul.product-categories li.cat-item > a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
}

.woocommerce .widget_product_categories ul.product-categories li.cat-item > a:hover {
	color: var(--e-global-color-rojo);
}

.woocommerce .widget_product_categories ul.product-categories li .count {
	color: var(--e-global-color-gris);
	font-weight: 400;
	font-size: 13px;
}

/* ── Separación entre filtros ───────────────────────────────────── */
.elementor-widget-wp-widget-woocommerce_product_categories,
.elementor-widget-wp-widget-woocommerce_layered_nav,
.elementor-widget-wp-widget-woocommerce_brand_nav,
.elementor-widget-wp-widget-woocommerce_layered_nav_filters,
.elementor-widget-wp-widget-woocommerce_price_filter {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--e-global-color-linea);
}

.elementor-widget-wp-widget-woocommerce_price_filter {
	border-bottom: 0;
	padding-bottom: 0;
}