/* ==========================================================================
   Velas Velia — Acordeón de categorías + filtros aplicables del catálogo
   --------------------------------------------------------------------------
   Aporta DOS cosas sobre la base del sidebar (parts/woo-shop.css):

     1) Comportamiento ACORDEÓN del árbol de categorías: las subcategorías van
        COLAPSADAS por defecto y solo se despliegan en la rama abierta
        (.is-open, que pinta PHP según la categoría que se está viendo) o al
        pasar/enfocar (CSS puro, sin JS). El nombre de la rama lleva una flecha
        (caret) que gira al abrir.

     2) FILTROS aplicables (precio + atributos) en chips de marca, funcionales
        con los parámetros estándar de Woo (min_price/max_price, filter_<attr>).

   Consume EXCLUSIVAMENTE tokens del sistema (tokens.css). El tema padre inyecta
   morado a enlaces; por eso se fuerza el color con !important donde hace falta.
   ========================================================================== */

/* ==========================================================================
   1) ACORDEÓN DE CATEGORÍAS
   ========================================================================== */

/* La rama de primer nivel se vuelve relativa para anclar la flecha. */
.vv-shop-filters--accordion .vv-shop-filters__item.has-children > .vv-shop-filters__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

/* Etiqueta de la categoría (texto) — ocupa el espacio disponible. */
.vv-shop-filters__label {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Flecha (caret) del acordeón ---------------------------------------- */
.vv-shop-filters__caret {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--gold-600);
	border-bottom: 1.5px solid var(--gold-600);
	transform: rotate(45deg); /* chevron hacia abajo (colapsado) */
	transition: transform var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out);
	margin-right: var(--space-1);
}

/* --- Sublista colapsada por defecto (acordeón) -------------------------- */
/* Override del estado "siempre visible" de woo-shop.css con animación suave. */
.vv-shop-filters--accordion .vv-shop-filters__sublist {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	margin-bottom: 0;
	transition: max-height var(--dur-slow) var(--ease-in-out),
		opacity var(--dur) var(--ease-out);
}

/* Rama abierta: la que pinta PHP (categoría vista o ancestro), al pasar el
   ratón o al enfocar dentro (accesible con teclado). */
.vv-shop-filters--accordion .vv-shop-filters__item.is-open > .vv-shop-filters__sublist,
.vv-shop-filters--accordion .vv-shop-filters__item.has-children:hover > .vv-shop-filters__sublist,
.vv-shop-filters--accordion .vv-shop-filters__item.has-children:focus-within > .vv-shop-filters__sublist {
	max-height: 600px; /* tope holgado para la animación de despliegue */
	opacity: 1;
	margin-top: var(--space-1);
	margin-bottom: var(--space-1);
}

/* Gira la flecha cuando la rama está abierta / enfocada / con hover. */
.vv-shop-filters--accordion .vv-shop-filters__item.is-open > .vv-shop-filters__link .vv-shop-filters__caret,
.vv-shop-filters--accordion .vv-shop-filters__item.has-children:hover > .vv-shop-filters__link .vv-shop-filters__caret,
.vv-shop-filters--accordion .vv-shop-filters__item.has-children:focus-within > .vv-shop-filters__link .vv-shop-filters__caret {
	transform: rotate(-135deg); /* chevron hacia arriba (expandido) */
}

/* La rama abierta destaca sutilmente su encabezado aunque no sea la activa. */
.vv-shop-filters--accordion .vv-shop-filters__item.is-open > .vv-shop-filters__link {
	color: var(--gold-900);
	font-weight: var(--fw-semibold);
}

/* ==========================================================================
   2) FILTROS APLICABLES (precio + atributos)
   ========================================================================== */

.vv-shop-applied-filters {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: var(--border-w) solid var(--line);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* --- Grupo de filtro (Precio, Aroma, Color…) ----------------------------- */
.vv-filter-group {
	margin: 0;
}

.vv-filter-group__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--gold-700);
}

.vv-filter-group__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Variante en línea (atributos: Aroma/Color/Tamaño) — chips que fluyen. */
.vv-filter-group__list--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.vv-filter-group__item {
	margin: 0;
}

/* --- Chip de filtro (enlace) --------------------------------------------- */
.vv-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--text-sm);
	line-height: 1.2;
	color: var(--ink-700) !important; /* gana al morado del tema padre */
	background: var(--white);
	border: var(--border-w) solid var(--gold-300);
	text-decoration: none !important;
	transition: background var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

/* En la lista vertical (precio) el chip ocupa toda la columna. */
.vv-filter-group__list:not(.vv-filter-group__list--inline) .vv-filter-chip {
	display: flex;
	justify-content: flex-start;
}

.vv-filter-chip:hover,
.vv-filter-chip:focus-visible {
	background: var(--gold-100);
	border-color: var(--gold-400);
	color: var(--gold-900) !important;
}

/* Chip activo (tramo de precio o término de atributo aplicado). */
.vv-filter-chip.is-active {
	background: var(--gold-600);
	border-color: var(--gold-600);
	color: var(--text-on-brand) !important;
	box-shadow: var(--shadow-pill);
}

.vv-filter-chip.is-active:hover {
	background: var(--gold-700);
	border-color: var(--gold-700);
}

/* --- Enlace "Quitar filtro" ---------------------------------------------- */
.vv-filter-clear {
	display: inline-block;
	margin-top: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--ink-500) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--dur) var(--ease-out);
}

.vv-filter-clear:hover {
	color: var(--terra-600) !important;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 720px) {
	/* En móvil el sidebar va arriba; mostramos los filtros aplicables debajo
	   del listado de categorías, pero más compactos. */
	.vv-shop-applied-filters {
		margin-top: var(--space-6);
		padding-top: var(--space-4);
	}

	/* Por defecto las subcategorías se ocultan en la barra horizontal móvil… */
	.vv-shop-filters--accordion .vv-shop-filters__sublist {
		display: none;
	}

	/* …pero la RAMA ACTIVA (la categoría que se está viendo o su padre) ocupa
	   su propia fila y despliega sus subcategorías como chips debajo, para que
	   el usuario vea dónde está y pueda saltar a otra subcategoría hermana. */
	.vv-shop-filters--accordion .vv-shop-filters__item.is-open {
		flex-basis: 100%;
		width: 100%;
	}

	.vv-shop-filters--accordion .vv-shop-filters__item.is-open > .vv-shop-filters__sublist {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-2);
		max-height: none;
		opacity: 1;
		width: 100%;
		margin: var(--space-3) 0 0;
		padding: 0;
	}

	.vv-shop-filters--accordion .vv-shop-filters__item.is-open > .vv-shop-filters__sublist .vv-shop-filters__subitem {
		margin: 0;
	}

	/* Subcategorías como chips (misma estética que las categorías). */
	.vv-shop-filters--accordion .vv-shop-filters__item.is-open > .vv-shop-filters__sublist .vv-shop-filters__sublink {
		display: inline-flex;
		align-items: center;
		padding: var(--space-2) var(--space-4);
		border-radius: var(--radius-pill);
		border: var(--border-w) solid var(--gold-300);
		background: var(--white);
		color: var(--ink-700) !important;
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		font-weight: var(--fw-medium);
		line-height: 1.2;
		text-decoration: none !important;
	}

	.vv-shop-filters--accordion .vv-shop-filters__item.is-open > .vv-shop-filters__sublist .vv-shop-filters__sublink.is-active {
		background: var(--gold-600);
		border-color: var(--gold-600);
		color: var(--text-on-brand) !important;
		box-shadow: var(--shadow-pill);
	}

	/* La flecha del caret no aporta en la barra horizontal móvil. */
	.vv-shop-filters--accordion .vv-shop-filters__caret {
		display: none;
	}
}