/**
 * Reestilizado de WooCommerce con los tokens de la Sección 7. Usa las
 * clases nativas del loop de productos (content-product.php) y de la
 * ficha — no se sobreescribió ninguna plantilla PHP para esto, solo CSS.
 */

/* -------------------- Tarjeta de producto (loop) -------------------- */

ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

@media (min-width: 768px) {
	ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

ul.products li.product {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding: 1rem;
	transition: box-shadow 200ms ease-out, transform 200ms ease-out;
	animation: techsalud-fade-up 450ms ease-out both;
}

ul.products li.product:nth-child(1) { animation-delay: 0ms; }
ul.products li.product:nth-child(2) { animation-delay: 60ms; }
ul.products li.product:nth-child(3) { animation-delay: 120ms; }
ul.products li.product:nth-child(4) { animation-delay: 180ms; }
ul.products li.product:nth-child(n+5) { animation-delay: 220ms; }

ul.products li.product:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	ul.products li.product {
		animation: none;
	}
}

ul.products li.product img {
	border-radius: var(--radius-sm);
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
	margin: 0.75rem 0 0.25rem;
}

ul.products li.product .price {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

ul.products li.product .onsale {
	background: var(--color-cta);
	border-radius: var(--radius-pill);
	font-weight: var(--font-weight-medium);
}

ul.products li.product .star-rating {
	color: var(--color-warning);
}

ul.products li.product .button {
	display: inline-block;
	margin-top: 0.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-cta);
	color: #fff;
	font-weight: var(--font-weight-semibold);
	padding: 0.6rem 1.25rem;
}

ul.products li.product .button:hover {
	background: var(--color-cta-hover);
}

.techsalud-tipo-badge {
	position: absolute;
	margin-top: 0.5rem;
}

/* -------------------- Listado: orden, conteo, paginación -------------------- */

.woocommerce-result-count,
.woocommerce-ordering {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.woocommerce-ordering select {
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	padding: 0.4rem 0.75rem;
}

nav.woocommerce-pagination ul {
	border-color: var(--color-border);
}

nav.woocommerce-pagination .page-numbers.current {
	background: var(--color-cta);
}

/* -------------------- Filtros (widgets nativos de WooCommerce) -------------------- */

.widget_price_filter .price_slider_amount .button,
.widget_layered_nav_filters a {
	border-radius: var(--radius-pill);
}

.widget_layered_nav ul,
.widget_product_categories ul {
	list-style: none;
	padding: 0;
}

.widget_layered_nav li a,
.widget_product_categories li a {
	color: var(--color-text);
}

.woocommerce-widget-layered-nav-list__item--chosen a {
	color: var(--color-cta);
	font-weight: var(--font-weight-semibold);
}

/* -------------------- Ficha de producto: bloques propios de TechSalud -------------------- */

.techsalud-ficha-tecnica,
.techsalud-patologias,
.techsalud-recursos,
.techsalud-faqs {
	margin: 2rem 0;
}

.techsalud-ficha-tecnica dt {
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
	margin-top: 0.75rem;
}

.techsalud-ficha-tecnica dd {
	margin: 0.25rem 0 0;
	color: var(--color-text-muted);
}

.techsalud-recursos ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.techsalud-recursos li {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 1rem;
}

.techsalud-cta-cotizacion {
	display: inline-block;
	margin: 0.75rem 0;
}