/* ==========================================================================
   Velas Velia — Loop de productos de WooCommerce (grid + tarjeta)
   --------------------------------------------------------------------------
   Ajustes del grid de la tienda y del override content-product.php. La
   tarjeta (.vv-product-card) ya vive en main.css; aquí solo se adapta al
   markup que genera WooCommerce (<ul.products> + <li.product>) y se define
   la rejilla. Consume EXCLUSIVAMENTE tokens del sistema. No hardcodear.
   ========================================================================== */

/* --- Rejilla de la tienda ------------------------------------------------
   WooCommerce imprime <ul class="products columns-N">. La convertimos en un
   grid CSS con espaciado boutique. El nº de columnas (N) se controla desde
   inc/woo-loop.php; aquí solo damos el layout responsive. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	/* Rejilla ÚNICA del catálogo: auto-fill flexible para que el nº de tiles se
	   adapte al ancho disponible sin colapsar a una sola columna. */
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-8) var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce añade ::before/::after (clearfix de floats) a ul.products. Como
   ahora el <ul> es un grid, esos pseudo-elementos se volvían CELDAS VACÍAS
   (la "tarjeta vacía al comienzo"). Se eliminan. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

/* Respeta el nº de columnas que pide WooCommerce/diseño en pantallas amplias. */
@media (min-width: 768px) {
	.woocommerce ul.products.columns-3,
	.woocommerce-page ul.products.columns-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.woocommerce ul.products.columns-4,
	.woocommerce-page ul.products.columns-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Reset del <li> que genera WooCommerce: la tarjeta controla el layout. */
.woocommerce ul.products li.product.vv-product-card,
.woocommerce-page ul.products li.product.vv-product-card {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
}

/* --- Enlace contenedor ---------------------------------------------------
   Toda la tarjeta es un único enlace a la ficha; hereda el layout en columna
   del componente y neutraliza el subrayado/color de los enlaces globales. */
.vv-woo-card .vv-product-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	color: inherit;
	text-decoration: none;
}

.vv-woo-card .vv-product-card__link:hover {
	color: inherit;
}

/* Bloque de nombre + meta (lado izquierdo del pie); evita desbordes. */
.vv-woo-card .vv-product-card__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

/* --- Precio --------------------------------------------------------------
   get_price_html() puede traer <del>/<ins> (ofertas) y <span class="amount">.
   Se normaliza para que siga la voz "pill" dorada del catálogo. */
.vv-woo-card .vv-product-card__price .woocommerce-Price-amount {
	color: var(--gold-700);
}

/* Precio anterior tachado (cuando el producto está en oferta). */
.vv-woo-card .vv-product-card__price del {
	color: var(--text-muted);
	font-weight: var(--fw-regular);
	margin-right: var(--space-1);
	opacity: 0.85;
}

.vv-woo-card .vv-product-card__price ins {
	text-decoration: none;
	background: transparent;
	color: var(--gold-700);
}

/* --- Imagen --------------------------------------------------------------
   WooCommerce puede imprimir tamaños fijos; forzamos cover dentro del
   squircle (la regla base ya lo hace, esto cubre el placeholder de Woo). */
.vv-woo-card .vv-product-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* En móvil estrecho (incl. <=420px) forzamos SIEMPRE dos columnas con gap más
   compacto. Sobrescribe el auto-fill para que nunca colapse a una sola columna. */
@media (max-width: 479px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5) var(--space-4);
	}
}