/* ==========================================================================
   Velas Velia — Vista de tienda a 2 columnas (sidebar + grid)
   --------------------------------------------------------------------------
   Layout de la vista de productos según la guía visual: una COLUMNA IZQUIERDA
   con el árbol de categorías (product_cat) y, a la derecha, el grid de
   productos con la foto sobre un fondo suave tintado y redondeado, nombre y
   precio centrados debajo.

   Consume EXCLUSIVAMENTE tokens del sistema (tokens.css). No hardcodea
   valores. No edita woo-loop.css ni woo-archive.css: cuando hace falta
   sobreescribir algo de ahí, se hace con mayor especificidad aquí.
   ========================================================================== */

/* --- Estructura a 2 columnas --------------------------------------------- */
.vv-shop__layout {
	display: grid;
	grid-template-columns: 240px 1fr; /* sidebar fijo (~240px) + grid flexible */
	gap: var(--space-10);
	align-items: start;
}

/* --- Columna izquierda: sidebar de categorías ---------------------------- */
.vv-shop__sidebar {
	position: sticky;
	top: var(--space-8); /* acompaña al scroll sin pegarse al borde superior */
}

.vv-shop-filters__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	color: var(--ink-900);
	text-transform: none; /* mayúscula inicial, no caja alta */
}

.vv-shop-filters__list,
.vv-shop-filters__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vv-shop-filters__item {
	margin: 0;
	padding-bottom: var(--space-2);
	border-bottom: var(--border-w) solid var(--line);
}

.vv-shop-filters__item + .vv-shop-filters__item {
	padding-top: var(--space-2);
}

/* Enlace de categoría de primer nivel. */
.vv-shop-filters__link {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--text-sm);
	color: var(--ink-700);
	text-decoration: none;
	transition: background var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out);
}

.vv-shop-filters__link:hover {
	background: var(--gold-100);
	color: var(--gold-900);
}

/* Estado activo (categoría que se está viendo). */
.vv-shop-filters__link.is-active {
	background: var(--gold-200);
	color: var(--gold-900);
	font-weight: var(--fw-semibold);
}

/* --- Subcategorías anidadas ---------------------------------------------- */
.vv-shop-filters__sublist {
	margin: var(--space-1) 0 var(--space-1) var(--space-3);
	padding-left: var(--space-3);
	border-left: var(--border-w) solid var(--line);
}

.vv-shop-filters__subitem {
	margin: 0;
}

.vv-shop-filters__sublink {
	display: block;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-sm);
	color: var(--ink-500);
	text-decoration: none;
	transition: background var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out);
}

.vv-shop-filters__sublink:hover {
	background: var(--gold-100);
	color: var(--gold-800);
}

.vv-shop-filters__sublink.is-active {
	color: var(--gold-900);
	font-weight: var(--fw-semibold);
}

/* --- Columna derecha: contenedor del grid -------------------------------- */
.vv-shop__main {
	min-width: 0; /* evita que el grid desborde dentro del layout */
}

/* ==========================================================================
   Tarjeta de producto estilo guía (foto tintada + texto centrado)
   --------------------------------------------------------------------------
   Sobre la base de woo-loop.css, ajusta la foto para que vaya sobre un fondo
   suave tintado y redondeado, y centra el nombre y el precio debajo.
   ========================================================================== */

/* Foto sobre fondo tintado y squircle (radius-lg). Mayor especificidad que
   la regla base para asegurar el override sin tocar woo-loop.css. */
.vv-woo-card.vv-shop-card .vv-shop-card__photo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 0; /* la imagen ocupa toda la tarjeta, sin margen */
	background: var(--terra-100); /* solo de respaldo mientras carga / si la imagen no cubre */
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.vv-woo-card.vv-shop-card .vv-shop-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg); /* igual que el contenedor (lo recorta overflow:hidden) */
	display: block;
}

/* Badge "NUEVO" / promo superpuesto en la esquina superior. */
.vv-woo-card.vv-shop-card .vv-product-card__flag {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 2;
}

/* Pie de la tarjeta: nombre y precio centrados debajo de la foto. */
.vv-woo-card.vv-shop-card .vv-shop-card__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	text-align: center;
	margin-top: var(--space-3);
}

.vv-woo-card.vv-shop-card .vv-product-card__name {
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	/* Nombre más grande y cómodo de leer (antes --text-sm). */
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: var(--ink-900);
}

.vv-woo-card.vv-shop-card .vv-product-card__price {
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--text-sm);
	color: var(--gold-700);
}

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

/* Tablet: sidebar más estrecho. */
@media (max-width: 980px) {
	.vv-shop__layout {
		grid-template-columns: 200px 1fr;
		gap: var(--space-6);
	}
}

/* Móvil: el sidebar pasa ARRIBA (una sola columna) y el grid debajo. */
@media (max-width: 720px) {
	.vv-shop__layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.vv-shop__sidebar {
		position: static; /* deja de ser sticky cuando va arriba */
	}

	/* El listado de categorías se vuelve horizontal y desplazable en móvil
	   para ocupar poca altura sobre el grid. */
	.vv-shop-filters__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.vv-shop-filters__item {
		padding: 0;
		border-bottom: 0;
	}

	.vv-shop-filters__item + .vv-shop-filters__item {
		padding-top: 0;
	}

	/* En móvil ocultamos las subcategorías anidadas para no recargar la barra;
	   se acceden tras entrar en la categoría padre. */
	.vv-shop-filters__sublist {
		display: none;
	}

	.vv-shop-filters__link {
		border: var(--border-w) solid var(--gold-300);
		border-radius: var(--radius-pill);
	}

	.vv-shop-filters__link.is-active {
		border-color: var(--gold-600);
	}
}