/* ==========================================================================
   Velas Velia — Catálogo / archivo de WooCommerce (archive-product.php)
   --------------------------------------------------------------------------
   Layout del catálogo y barra de filtros de categoría. Replica el resultado
   visual del componente <Collection> del Storefront: cabecera a la izquierda,
   fila de chips .vv-tag y rejilla de productos con espaciado boutique.

   Consume EXCLUSIVAMENTE tokens del sistema. Las clases de componente
   (.vv-section-heading, .vv-tag, .vv-product-card…) viven en main.css; aquí
   solo se aporta el layout específico del catálogo.
   ========================================================================== */

/* --- Lienzo de la sección ------------------------------------------------- */
.vv-archive {
	background: var(--bg);
}

.vv-archive__inner {
	padding-top: var(--space-12);
	padding-bottom: var(--space-20);
}

/* --- Cabecera (SectionHeading alineado a la izquierda) -------------------- */
.vv-archive__heading {
	margin-bottom: var(--space-6);
}

/* El title del archivo es un <h1>; igualamos su escala a la del heading md. */
.vv-archive__heading .vv-section-heading__title {
	font-size: var(--text-2xl);
}

/* En móvil el título del catálogo escala de forma fluida para no desbordar
   ni quedar enorme; nunca supera --text-2xl (preserva el desktop). */
@media (max-width: 720px) {
	.vv-archive__heading .vv-section-heading__title {
		font-size: clamp(var(--text-xl), 6vw, var(--text-2xl));
	}
}

/* --- Barra de filtros de categoría (chips .vv-tag) ------------------------ */
.vv-archive__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-6) 0 var(--space-8);
}

/* Los chips son enlaces <a> aquí (no <button>): aseguramos que no hereden el
   color de enlace global ni subrayado, y que el estado activo mande. */
.vv-archive__filters .vv-tag,
.vv-archive__filters .vv-tag:hover {
	text-decoration: none;
}

.vv-archive__filters .vv-tag {
	color: var(--ink-700);
}

.vv-archive__filters .vv-tag.is-active {
	color: var(--text-on-brand);
}

/* En móvil/tablet ampliamos el área táctil de los chips de filtro para que
   cumplan el mínimo recomendable de toque (~40px de alto). */
@media (max-width: 720px) {
	.vv-archive__filters .vv-tag {
		padding: var(--space-3) var(--space-5);
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}
}

/* ==========================================================================
   Rejilla de productos del loop de WooCommerce
   --------------------------------------------------------------------------
   La REJILLA (display:grid + grid-template-columns + breakpoints) vive AHORA
   en exclusiva en parts/woo-loop.css para evitar definiciones en conflicto.
   Aquí solo aportamos el gap boutique propio del catálogo; el resto de
   columnas/breakpoints lo gobierna woo-loop.css.
   ========================================================================== */

/* Gap generoso entre tiles, alineado al diseño. Sin grid-template-columns:
   las columnas y sus breakpoints los define woo-loop.css (fuente única). */
.vv-archive ul.products {
	gap: var(--space-6) var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Solo ajustes de espaciado de la sección en móvil (la rejilla la lleva
   woo-loop.css; aquí no se tocan columnas para no duplicar reglas). */
@media (max-width: 720px) {
	.vv-archive__inner {
		padding-top: var(--space-8);
		padding-bottom: var(--space-12);
	}
}

/* --- Paginación nativa de Woo (píldoras de marca) ------------------------- */
.vv-archive .woocommerce-pagination {
	margin-top: var(--space-16);
	text-align: center;
}

.vv-archive .woocommerce-pagination ul {
	/* !important: Woo fuerza inline-block en ul.page-numbers; sin esto los
	   números se alinean por baseline y los que tienen píldora caen más abajo. */
	display: inline-flex !important;
	align-items: center !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3); /* buen aire entre números */
	margin: 0;
	padding: 0;
	border: 0 !important; /* fuera el recuadro por defecto de Woo */
	border-radius: 0 !important;
	list-style: none;
}

.vv-archive .woocommerce-pagination ul li {
	display: inline-flex !important;
	align-items: center;
	vertical-align: middle;
	margin: 0;
	border: 0 !important; /* fuera las líneas divisoras entre números */
	border-right: 0 !important;
	overflow: visible; /* anula el recorte por defecto de Woo */
}

/* Cada número/flecha: SIN borde ni recuadro, solo el texto en una píldora
   redonda transparente que se rellena al estar activo o en hover. */
.vv-archive .woocommerce-pagination ul li a,
.vv-archive .woocommerce-pagination ul li span {
	box-sizing: border-box !important; /* la altura fija no se altera por el padding */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 40px;
	height: 40px !important; /* todos los números igual de altos */
	padding: 0 var(--space-2) !important; /* sin padding vertical del tema/Woo */
	margin: 0 !important;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--text-sm);
	line-height: 1;
	vertical-align: middle;
	color: var(--ink-700) !important; /* gana al morado del tema padre */
	background: transparent;
	border: 0 !important; /* fuera los bordes feos */
	text-decoration: none !important;
	transition: background var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

/* Hover sutil: tinte dorado muy suave, sin borde ni elevación brusca. */
.vv-archive .woocommerce-pagination ul li a:hover {
	background: var(--gold-100);
	color: var(--gold-900) !important;
}

.vv-archive .woocommerce-pagination ul li a:active {
	transform: var(--press-scale);
}

/* Página actual: círculo/píldora relleno en camel con texto crema. */
.vv-archive .woocommerce-pagination ul li span.current {
	background: var(--camel) !important;
	color: var(--text-on-brand) !important;
	font-weight: var(--fw-semibold);
	box-shadow: var(--shadow-pill);
}

/* Puntos suspensivos (…) — sin fondo, solo el texto tenue. */
.vv-archive .woocommerce-pagination ul li span.dots {
	background: transparent;
	color: var(--ink-300) !important;
	min-width: auto;
	padding: 0 var(--space-1);
}

/* Flechas anterior/siguiente: ocultamos el texto "←/→" de Woo y dibujamos un
   chevron fino propio para que combine con el resto de la web. */
.vv-archive .woocommerce-pagination ul li a.prev,
.vv-archive .woocommerce-pagination ul li a.next {
	font-size: 0; /* esconde el glifo nativo de la flecha */
	position: relative;
	color: var(--gold-700);
}

.vv-archive .woocommerce-pagination ul li a.prev::before,
.vv-archive .woocommerce-pagination ul li a.next::before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	display: block;
}

/* Chevron izquierdo (anterior) y derecho (siguiente). */
.vv-archive .woocommerce-pagination ul li a.prev::before {
	transform: rotate(-135deg);
	margin-left: 3px;
}

.vv-archive .woocommerce-pagination ul li a.next::before {
	transform: rotate(45deg);
	margin-right: 3px;
}

.vv-archive .woocommerce-pagination ul li a.prev:hover,
.vv-archive .woocommerce-pagination ul li a.next:hover {
	color: var(--gold-900);
}

/* --- Barra superior del loop (result count + ordenar) -------------------- */
.vv-archive .woocommerce-result-count {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin-bottom: var(--space-4);
}

.vv-archive .woocommerce-ordering {
	margin-bottom: var(--space-6);
}

.vv-archive .woocommerce-ordering select {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-body);
	background: var(--white);
	border: var(--border-w-2) solid var(--gold-300);
	border-radius: var(--radius-pill);
	padding: var(--space-2) var(--space-4);
	outline: none;
}