/**
 * 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) -------------------- */

/*
 * flex-wrap + justify-content:center, NO grid — con grid, una fila
 * incompleta (ej. 5 productos en 4 columnas) deja el ítem sobrante
 * pegado a la izquierda, sin centrar (grid no centra filas parciales,
 * cada fila se auto-coloca de forma independiente). Flexbox sí centra
 * cada línea individualmente cuando el contenedor tiene
 * justify-content:center — bug real reportado por el cliente
 * ("productos destacados pegados a la izquierda y en 2 líneas").
 * flex-grow:0 es obligatorio: sin él, un ítem solo en la última fila se
 * estira a 100% del ancho en vez de mantener el mismo ancho que sus
 * hermanos.
 */
ul.products {
	--wc-cols: 4;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	list-style: none;
	/*
	 * margin: 1.5rem auto (no "1.5rem 0"): bug real reportado por el
	 * cliente (2026-08-02) — "1.5rem 0" fija margin-left/right en 0, que
	 * gana por especificidad sobre el margin:auto de centrado que
	 * `.techsalud-section > *` le da a este mismo <ul> en Home (0,1,1
	 * de "ul.products" vs 0,1,0 de la clase universal) — el listado
	 * quedaba pegado a un borde en vez de centrado en cualquier
	 * contenedor más ancho que su max-width. auto es inofensivo donde
	 * ya ocupa el ancho completo (Tienda/categorías).
	 */
	margin: 1.5rem auto;
	padding: 0;
}

/*
 * WooCommerce agrega esta clase según el contexto real. Tienda/
 * categorías: 4 columnas vía `wp option update woocommerce_catalog_
 * columns 4` (pedido explícito del cliente, 2026-08-03, para dejar
 * espacio real al sidebar de subcategorías). "Productos relacionados" y
 * Home "Productos destacados" siguen en 5 (no tienen sidebar) — el
 * primero vía el filtro woocommerce_output_related_products_args (ver
 * techsalud-core/includes/product-behavior.php, WC trae 4 por defecto
 * ahí y no pasa por la opción de Tienda), el segundo con columns-5
 * explícito en el markup (no pasa por el loop nativo). --wc-cols de
 * arriba es solo el fallback si por algún motivo no hay clase
 * columns-N — ver docs/ESTANDARES.md §3.
 */
ul.products.columns-1 { --wc-cols: 1; }
ul.products.columns-2 { --wc-cols: 2; }
ul.products.columns-3 { --wc-cols: 3; }
ul.products.columns-4 { --wc-cols: 4; }
ul.products.columns-5 { --wc-cols: 5; }
ul.products.columns-6 { --wc-cols: 6; }

/*
 * Estructura REAL verificada contra el HTML servido (no asumida):
 *
 * <li class="product ...">
 *   <a class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
 *     [sale flash] [img]
 *     [marca] [badge tipo comercial]   <- hooks propios, ver product-behavior.php
 *     <h2 class="woocommerce-loop-product__title">Título</h2>
 *     [rating] <span class="price">...</span>
 *   </a>
 *   <a class="button ...">Agregar al carro / Leer más</a>  <- hermano, FUERA del link de arriba
 * </li>
 *
 * Todo lo de texto vive DENTRO de un único <a>, por eso el padding lateral
 * se aplica a los elementos de texto directamente (no al <li> ni al <a>
 * completo, que también contiene la imagen).
 */

ul.products li.product {
	/*
	 * Historial real de este bug (3 fixes, cada uno confirmado en vivo
	 * contra el DOM antes de pasar al siguiente):
	 * 1. WooCommerce core agrega `margin: 0 3.8% 2.992em 0` cuando el
	 *    body tiene .woocommerce/.woocommerce-page (Tienda/categorías sí,
	 *    Home no) — se sumaba a nuestro `gap`. Reseteado acá a `margin:0`.
	 * 2. Ese `margin:0` no ganaba por especificidad contra la regla real
	 *    de WooCommerce core (`.woocommerce ul.products li.product`, 3
	 *    clases vs nuestras 2) — override con la misma especificidad más
	 *    abajo en este archivo.
	 * 3. Con el margin ya neutralizado, `flex-basis` en porcentaje
	 *    (`calc(33.3333% - Npx)`) seguía forzando wrap prematuro (3
	 *    productos reales en columns-3 renderizaban 2+1) incluso con la
	 *    matemática "exacta" — confirmado con pruebas binarias en vivo
	 *    (`element.style.flexBasis`) que un `flex-basis` en PORCENTAJE
	 *    necesita ~8px extra de margen de seguridad más allá del cálculo
	 *    exacto para no wrappear (conservadurismo real del algoritmo de
	 *    flex-wrap de Chromium con gap + porcentaje, no un error de
	 *    fórmula); un `flex-basis` en PÍXELES fijos no tiene este
	 *    problema. `0.625rem` (10px) de margen extra por ítem, más que
	 *    suficiente, confirmado con pruebas incrementales en vivo.
	 *
	 * Mobile: siempre 2 columnas, sin importar --wc-cols del desktop —
	 * un card de ficha angosto (columns-6, por ejemplo) sería ilegible
	 * en mobile si escalara proporcional al conteo de columnas real.
	 */
	margin: 0;
	flex: 0 1 calc(50% - 1.25rem);
	display: flex;
	flex-direction: column;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	/*
	 * radius-md (no radius-lg) + hover con border-color/-4px: mismo
	 * lenguaje visual que .techsalud-precision-card de los carruseles del
	 * Home (pedido explícito del cliente, 2026-08-02: "utilizar las
	 * buenas prácticas de la manera que mostramos el producto... en el
	 * home tenemos un estilo muy distinto que otras páginas") — antes esta
	 * card nativa y la del Home usaban radios/hover ligeramente distintos
	 * aunque compartían los mismos tokens de color.
	 */
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding: 0 0 1.1rem;
	overflow: hidden;
	transition: box-shadow 200ms ease-out, transform 200ms ease-out, border-color 200ms ease-out;
	animation: techsalud-fade-up 450ms ease-out both;
}

/*
 * Especificidad igualada a la regla real de WooCommerce core
 * (`.woocommerce ul.products li.product` / `.woocommerce-page ...`,
 * 3 clases) — gana por orden de carga (este archivo carga después,
 * ver dependencias en functions.php) en vez de perder por
 * especificidad como el `margin:0` de arriba. Sin esto, Tienda/
 * categorías (que sí tienen body.woocommerce/.woocommerce-page; Home
 * no) seguían con el margin legacy de WooCommerce sumado al gap.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	margin: 0;
}

@media (min-width: 768px) {
	ul.products li.product {
		/*
		 * Fórmula genérica gap-aware: (100% - (N-1)*gap) / N, N = --wc-cols
		 * de la clase columns-N real del contenedor. Un solo lugar de
		 * verdad para cualquier cantidad de columnas (ver ESTANDARES.md §3).
		 *
		 * "- 0.625rem" final: margen de seguridad, NO redondeo de
		 * subpíxeles (esa fue la hipótesis inicial, insuficiente).
		 * Confirmado en vivo con pruebas binarias (`element.style.
		 * flexBasis` incremental): un flex-basis en PORCENTAJE dentro de
		 * un contenedor con `gap` necesita ~8px extra más allá de la
		 * matemática exacta para que Chromium no wrappee prematuramente
		 * (columns-3 real en Tienda renderizaba 2+1 en vez de 3 parejas,
		 * incluso con la fórmula matemáticamente exacta). Un flex-basis
		 * en píxeles fijos no tiene este problema — pero necesitamos
		 * porcentaje para que N sea dinámico vía --wc-cols. 0.625rem
		 * (10px) por ítem es margen de sobra, verificado con pruebas
		 * incrementales (7px ya alcanzaba, 10px deja margen extra para
		 * otros navegadores).
		 */
		flex-basis: calc((100% - (var(--wc-cols) - 1) * 1.25rem) / var(--wc-cols) - 0.625rem);
	}
}

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(-4px);
	border-color: var(--color-primary-light);
}

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

/*
 * El link grande: envuelve imagen + marca + badge + título + precio.
 * position:relative: ancla de .techsalud-tipo-badge (position:absolute,
 * ver más abajo) — mismo criterio que .techsalud-precision-card-media en
 * los carruseles del Home (badge superpuesto sobre la miniatura, no una
 * fila de texto aparte, pedido explícito del cliente, 2026-08-02).
 */
ul.products li.product a.woocommerce-loop-product__link {
	position: relative;
	display: block;
	background: var(--color-surface);
	text-decoration: none;
	overflow: hidden;
}

/*
 * object-fit:contain (no cover, a diferencia de .techsalud-precision-card
 * img): las fotos reales de producto no siempre vienen pre-recortadas a
 * cuadrado como las imágenes curadas de las secciones del Home — cover
 * las recortaría de forma impredecible. border-radius/background sí se
 * alinean al mismo lenguaje visual.
 */
ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 0.5rem;
	border-radius: var(--radius-sm);
	background: var(--color-primary-soft);
	transition: transform 300ms ease-out;
}

ul.products li.product:hover img {
	transform: scale(1.04);
}

/* Todo lo de texto dentro del link comparte el mismo padding lateral. */
ul.products li.product .techsalud-product-brand,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .star-rating,
ul.products li.product > a.woocommerce-loop-product__link > .price {
	display: block;
	margin-left: 1.1rem;
	margin-right: 1.1rem;
}

.techsalud-product-brand {
	margin-top: 0.85rem;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-disabled);
}

/*
 * Overlay top-left sobre la miniatura, mismo lugar/tamaño que
 * .techsalud-precision-card-tag en los carruseles — el color/pill sigue
 * siendo el de .techsalud-badge (Sección 7, usado también en la ficha de
 * producto), no se inventa una variante nueva solo para esta card.
 */
ul.products li.product .techsalud-tipo-badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
	line-height: 1.3;
	margin-top: 0.6rem;
	margin-bottom: 0.3rem;
}

ul.products li.product > a.woocommerce-loop-product__link > .price {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-lg);
	margin-bottom: 0.85rem;
}

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);
	margin-top: 0.4rem;
}

/* El botón "Agregar al carro"/"Leer más" es HERMANO del link grande, no
   descendiente — se empuja al final de la tarjeta con margin-top:auto,
   y la altura de fila la da el grid (align-items:stretch por defecto). */
ul.products li.product > a.button {
	display: block;
	margin: 0.85rem 1.1rem 0;
	margin-top: auto;
	text-align: center;
	border-radius: var(--radius-pill);
	background: var(--color-cta);
	color: #fff;
	font-weight: var(--font-weight-semibold);
	padding: 0.6rem 1.25rem;
}

/* color se redeclara en :hover a propósito — ver el comentario
   equivalente en components.css junto a .button-primary:hover. */
ul.products li.product > a.button:hover {
	background: var(--color-cta-hover);
	color: #fff;
}

/* -------------------- 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);
}

/* -------------------- Breadcrumb -------------------- */

/*
 * Barra propia (pedido explícito del cliente, 2026-08-02, con
 * referencia visual: https://compratupanel.nokker.cl/shop/) — antes el
 * breadcrumb de WooCommerce se imprimía sin ningún estilo, como texto
 * suelto arriba del título. width:100vw + margin negativo: mismo
 * técnica full-bleed que .techsalud-section (home.css) — funciona sin
 * importar el max-width real del padre (#primary/.site-main, capado por
 * el tema padre a 1140px+ desde 1200px de ancho).
 *
 * .woocommerce .woocommerce-breadcrumb (no .woocommerce-breadcrumb
 * sola): bug real reportado por el cliente (2026-08-03, "el fondo no
 * ocupa el 100%") — el propio WooCommerce trae
 * `.woocommerce .woocommerce-breadcrumb{margin:0 0 1em}`
 * (woocommerce.css del plugin), 2 clases, que le ganaba en
 * especificidad a nuestra regla de 1 clase sin importar el orden de
 * carga — el margin negativo nunca llegaba a aplicarse. Mismo criterio
 * ya usado más abajo en este archivo para ul.products li.product.
 */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
	display: block;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 2rem;
	padding: 0.85rem 1.5rem;
	background: var(--color-background);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.woocommerce-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--color-primary);
}

/*
 * Pills de categorías top-level (pedido explícito del cliente,
 * 2026-08-03): "arriba a la derecha, separadas con ícono, pero no tan
 * grandes" — reemplazan el listado que antes vivía en el sidebar; el
 * sidebar ahora es contextual (ver .techsalud-shop-sidebar más abajo).
 */
.techsalud-shop-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.techsalud-shop-pills a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.techsalud-shop-pills .ts-icon {
	flex-shrink: 0;
}

.techsalud-shop-pills a:hover {
	border-color: var(--color-primary-light);
	background: var(--color-primary-light);
	color: var(--color-primary);
}

.techsalud-shop-pills a.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* -------------------- Layout de 2 columnas: sidebar de subcategorías -------------------- */

.techsalud-shop-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (min-width: 900px) {
	.techsalud-shop-layout {
		grid-template-columns: 240px minmax(0, 1fr);
	}
}

/*
 * min-width:0: mismo motivo que en el resto del sitio (ver comentarios
 * de .techsalud-precision en home.css) — sin esto, el grid de productos
 * (ancho fijo por card) empuja esta columna más allá del espacio real
 * en vez de contenerse y dejar que el scroll/wrap del grid lo resuelva.
 */
.techsalud-shop-main {
	min-width: 0;
	padding-left: 0.5rem;
}

/*
 * flex-start (no el center de ul.products base): pedido explícito del
 * cliente (2026-08-03) — "diagrama mejor el contenido, alineado a la
 * izquierda". Centrar tenía sentido para una grilla sola en el ancho
 * completo (evita una fila incompleta pegada a un borde, ver
 * comentario original en ul.products), pero acá al lado del sidebar
 * lucía descentrado del resto de la página. Escuchado a esta columna
 * (no a ul.products en general) para no reintroducir ese bug en
 * Relacionados/Destacados, que no tienen sidebar.
 */
.techsalud-shop-main ul.products {
	justify-content: flex-start;
}

.techsalud-shop-sidebar-panel {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1rem 1.25rem;
}

.techsalud-shop-sidebar-panel summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

.techsalud-shop-sidebar-panel summary::-webkit-details-marker {
	display: none;
}

/* Flecha propia en vez del marcador nativo del navegador — mismo criterio que .techsalud-faq-toggle (home.css). */
.techsalud-shop-sidebar-panel summary::after {
	content: "";
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 150ms ease-out;
}

.techsalud-shop-sidebar-panel[open] summary::after {
	transform: rotate(-135deg);
}

.techsalud-shop-sidebar-panel ul {
	list-style: none;
	margin: 0.85rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.techsalud-shop-sidebar-panel a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.6rem;
	border-radius: var(--radius-sm);
	color: var(--color-text);
	text-decoration: none;
	font-size: var(--font-size-sm);
	transition: background 150ms ease-out, color 150ms ease-out;
}

.techsalud-shop-sidebar-panel a:hover {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

.techsalud-shop-sidebar-panel a.is-active {
	background: var(--color-primary-light);
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

.techsalud-shop-sidebar-count {
	color: var(--color-text-disabled);
	font-size: var(--font-size-xs);
}

/* -------------------- 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 --------------------
 * Prefijo `techsalud-ficha-*` obligatorio en las 4 clases (antes 2 de
 * ellas eran genéricas: `.techsalud-recursos`, `.techsalud-faqs`) — bug
 * real detectado en vivo (2026-08-01): esas mismas 2 clases genéricas
 * también las usan secciones del Home (Recursos para el especialista,
 * FAQ), y esta regla (cargada sitewide) les agregaba `margin: 2rem 0`
 * sin que nadie lo pidiera — se veía como una línea blanca entre
 * secciones con el mismo fondo. Namespacing bajo `techsalud-ficha-`
 * (coincide con el comentario de esta sección: "bloques propios de
 * TechSalud" de la FICHA de producto) para que una clase de un
 * componente nunca vuelva a colisionar por casualidad con una clase de
 * otro.
 */

.techsalud-ficha-tecnica,
.techsalud-ficha-patologias,
.techsalud-ficha-recursos,
.techsalud-ficha-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-ficha-recursos ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.techsalud-ficha-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;
}