/*
|--------------------------------------------------------------------------
| AMOREA — TARJETAS
|--------------------------------------------------------------------------
*/

.card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* Tarjeta circular de categoría */
.category-card {
	text-align: center;
}

.category-card__figure {
	width: 132px;
	height: 132px;
	margin-inline: auto;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-3);
	padding: 14px;
}

.category-card__figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.category-card__label {
	font-weight: 600;
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.category-card__link {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-primary);
	margin-top: var(--space-1);
}

/*
 * Tarjeta de propuesta de valor — ícono circular a la IZQUIERDA (no
 * arriba centrado) + texto apilado a la derecha, con una línea
 * separadora vertical entre cada tarjeta (excepto la primera).
 */
.value-card {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-align: left;
	padding-inline: var(--space-5);
	/* BUG REAL encontrado 2026-10-03 (barrido de desborde genérico): sin
	   esto, `.value-card` (flex, además ítem de una grilla `1fr`) no se
	   encoge por debajo del ancho mínimo de su contenido (ícono fijo de
	   72px + texto) — mismo patrón ya corregido hoy en el logo del
	   header y el mini-carrito. Esto además rompía el reparto de las
	   columnas `1fr`: la grilla las volvía desiguales para darle a esta
	   tarjeta su mínimo de contenido, a costa de las demás (medido:
	   194.875px vs 248.094px en vez de 50/50 a 500px de viewport). */
	min-width: 0;
}

.value-card:not(:first-child) {
	border-left: 1px solid rgba(203, 37, 90, 0.15);
}

.value-card__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Mismo bug/fix que `.value-card` de arriba, un nivel más adentro:
   `.value-card__body` (span, el otro ítem flex de la fila junto al
   ícono) tampoco se encogía por debajo del ancho de su palabra más
   larga ("Personalizada" ≈123px) — con el ícono fijo (72px) + gap ya
   restados, esa palabra no cabía en la columna angosta, desbordando la
   tarjeta (medido: 60px a 500px de viewport). `min-width:0` deja que
   el texto haga lo que ya puede hacer solo: pasar a una segunda línea
   dentro del espacio real disponible. */
.value-card__body {
	min-width: 0;
	/* BUG REAL encontrado 2026-10-03 (cart-trust__item, barrido angosto
	   280-320px): `.value-card.cart-trust__item` pasa a
	   `flex-direction:column` en móvil (ver cart.css) — en ese eje,
	   `min-width:0` de arriba no alcanza (el "automatic minimum size"
	   que resuelve sólo aplica al eje principal, ahora vertical); con
	   `align-items:center` heredado (nunca stretch) el body se
	   dimensiona a su propio contenido, ignorando el ancho real de la
	   tarjeta (medido: 123px de "Atención Personalizada" vs 99px de
	   tarjeta). `max-width:100%` lo acota sin tocar el caso en fila. */
	max-width: 100%;
}

.value-card__icon img {
	width: 72px;
	height: 72px;
	max-width: none;
}

.value-card__title {
	font-weight: 700;
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 2px;
}

.value-card__text {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	line-height: 1.3;
}

/* Tarjeta de testimonio */
.testimonial-card {
	padding: var(--space-4);
	text-align: center;
}

.testimonial-card__stars {
	color: #F5A623;
	font-size: var(--text-sm);
	margin-bottom: var(--space-2);
}

.testimonial-card__quote {
	font-style: italic;
	font-size: var(--text-sm);
	line-height: 1.4;
	margin-bottom: var(--space-2);
}

/* Foto al costado de la reseña — no debajo: avatar a la izquierda,
   reseña + nombre + ciudad apilados a la derecha. */
.testimonial-card__row {
	display: flex;
	align-items: flex-start;
	text-align: left;
	gap: var(--space-3);
}

.testimonial-card__content {
	min-width: 0;
}

.testimonial-card__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex: 0 0 auto;
	object-fit: cover;
}

.testimonial-card__name {
	font-weight: 600;
	font-size: var(--text-sm);
	margin: 0;
}

.testimonial-card__city {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	margin: 2px 0 0;
}

/*
 * Ancla de posición para el overlay de wishlist y el badge — cubre
 * cualquier lugar donde WooCommerce imprima tarjetas de producto
 * (home, /shop/, widgets), no sólo el carrusel del home.
 */
ul.products li.product {
	position: relative;
}

/* Overlay de wishlist/carrito sobre la tarjeta de producto de WooCommerce/Blocksy */
.ct-woo-card-extra {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 2;
}

/*
 * El estado activo ya no invierte el fondo del botón (círculo blanco
 * siempre) — sólo el relleno del corazón cambia, ver
 * assets/css/wishlist.css (.wishlist-heart).
 */

/* Badge "Más vendido" / "Nuevo" sobre la miniatura del producto — tamaño
   fluido (clamp) para que no se vea sobredimensionado cuando la tarjeta
   se achica en pantallas medianas. */
.product-card-badge {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 2;
	padding: clamp(1.5px, 0.4vw, 2px) clamp(3px, 0.8vw, 6px);
	border-radius: var(--radius-pill);
	font-size: clamp(0.5rem, 0.9vw, 0.6rem);
	font-weight: 700;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--color-surface);
}

.product-card-badge--best-seller {
	background: var(--color-primary);
}

.product-card-badge--new {
	background: #8B5CF6;
}

.product-card-badge--sale {
	background: var(--color-error);
}

/* Producto agotado: insignia única en plomo (reemplaza a Nuevo/-%/la de Blocksy). */
.product-card-badge--soldout {
	background: var(--gray-600);
}

/*
 * Botón del carrito de un producto AGOTADO: misma forma que el rosado
 * (comparte `.add_to_cart_button`), en plomo y sin acción. Selectores
 * con la misma especificidad que los de tienda/carrusel + la clase
 * propia, para ganarles sin !important.
 */
.add_to_cart_button.amorea-add-to-cart--soldout,
.shop-grid .add_to_cart_button.amorea-add-to-cart--soldout,
.featured-products__carousel .add_to_cart_button.amorea-add-to-cart--soldout,
.add_to_cart_button.amorea-add-to-cart--soldout:hover,
.shop-grid .add_to_cart_button.amorea-add-to-cart--soldout:hover,
.featured-products__carousel .add_to_cart_button.amorea-add-to-cart--soldout:hover {
	background: var(--gray-400);
	border-color: var(--gray-400);
	box-shadow: none;
	cursor: not-allowed;
	opacity: 1;
	/* Sólo el ícono de la bolsa, como el botón rosado (el texto queda para lectores de pantalla). */
	font-size: 0;
	color: transparent;
}

/*
 * Antes de esta ronda nunca coexistían 2 insignias reales a la vez —
 * la de oferta (prioridad 5, siempre primera si aplica) y la de Más
 * vendido/Nuevo (tag manual) ahora sí pueden aparecer juntas en el
 * mismo producto. La segunda insignia real baja de posición para no
 * superponerse.
 */
.product-card-badge:nth-of-type(2) {
	top: calc(var(--space-2) + 20px);
}

/*
 * Galería con puntitos — sólo existen en el DOM en productos con más
 * de 1 imagen real (ver inc/setup/woocommerce-hooks.php); en el resto
 * (10 de 12 productos reales hoy) ninguna de estas reglas tiene nada
 * que afectar. Las diapositivas se apilan sobre la imagen nativa de
 * Blocksy (que ya llena el <figure> con position:static) — nunca se
 * toca ni se duplica esa imagen nativa.
 */
.product-card-gallery-slide {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
}

.product-card-gallery-slide.is-active {
	opacity: 1;
}

.product-card-dots {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	gap: var(--space-1);
	margin-top: var(--space-1);
}

/* Botón real de 24×24px de área de toque (mismo criterio que el corazón de favoritos, 32×32px) aunque el puntito visible sea de 6px. */
.product-card-dot {
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	position: relative;
}

.product-card-dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d7cdd2;
	transform: translate(-50%, -50%);
	transition: background-color 150ms ease;
}

.product-card-dot.is-active::after {
	background: var(--color-primary);
}

/*
|--------------------------------------------------------------------------
| Tarjeta de producto — carrusel "Los más amados"
|--------------------------------------------------------------------------
*/
.featured-products__carousel .products li.product {
	/* Grid en vez de position:absolute — precio y botón quedan en la
	   misma fila (columna 1 / columna 2) de forma natural, con el alto
	   de fila ajustado al contenido, sin espacio de sobra reservado.
	   `minmax(0, 1fr)` (no `1fr`) + `min-width: 0`: MISMA corrección
	   estructural que `.shop-grid .products li.product` en archive.css —
	   la tarjeta es a la vez item flex del carrusel (`flex: 0 0 calc(...)`),
	   y sin esto un título/precio largo o el botón "Ver carrito" la
	   ensanchaban más allá de su base y se montaba sobre la vecina o
	   empujaba scroll horizontal de página. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	min-width: 0;
	max-width: 100%;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	padding: 0 var(--space-4) var(--space-4);
}

.featured-products__carousel .products figure {
	grid-column: 1 / -1;
	position: relative;
	margin: 0 calc(-1 * var(--space-4));
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/*
 * CAUSA REAL de la franja blanca lateral (confirmado inspeccionando el
 * HTML servido): Blocksy envuelve la imagen en `<a class="ct-media-
 * container">`, que en el bundle base trae `width:100%;display:
 * inline-flex` pero SIN una altura definida — dentro de un `<figure>`
 * cuadrado (aspect-ratio:1/1) eso deja la altura de ese wrapper en
 * "auto" (determinada por el contenido). El propio `<img>` nativo
 * además trae un `style="aspect-ratio: 3/4"` en línea (heredado del
 * tamaño de imagen registrado) — con la altura del padre indefinida,
 * `height:100%` del `img` no tiene contra qué resolver y el navegador
 * cae de vuelta a ese aspect-ratio 3/4 en vez de llenar el cuadrado,
 * dejando el sobrante como franja blanca (la imagen queda angosta y
 * pegada a la izquierda). Se corrige dándole al wrapper una caja
 * 100%×100% GARANTIZADA vía `position:absolute; inset:0` (mismo
 * `figure` ya es `position:relative`) — nunca un desplazamiento
 * arbitrario, resuelve la cadena real de tamaño que faltaba.
 */
.featured-products__carousel .products figure .ct-media-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.featured-products__carousel .products figure img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* Misma corrección real que archive.css: la cinta nativa "SALE" quedaba superpuesta con la insignia real "-X%" nueva. */
.featured-products__carousel .onsale {
	display: none;
}

.featured-products__carousel .product-card-toolbar__wishlist {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
}

.featured-products__carousel .woocommerce-loop-product__title {
	/* Es un <h2> — sin esto heredaría la tipografía display (Cormorant)
	   de las demás secciones en vez de la fuente de cuerpo del sitio.
	   Una sola línea siempre (con "…" si no cabe) para que la medida,
	   el precio y el botón queden a la misma altura en toda la fila. */
	grid-column: 1 / -1;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: var(--space-1) 0 0;
}

.featured-products__carousel .woocommerce-loop-product__title a {
	color: var(--color-text);
}

.featured-products__carousel .product-card-characteristic {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--text-xs);
	line-height: 1.3;
	color: var(--color-text);
	margin: 2px 0 0;
}

.featured-products__carousel .product-card-characteristic svg {
	flex: 0 0 auto;
}

/*
 * `min-height` explícito (no sólo `line-height`): un `<p>` realmente
 * vacío (producto sin `_amorea_height_cm` todavía) no genera caja de
 * línea propia y colapsaría a 0 de alto sin esto — la fila se vería
 * vacía (correcto, nunca una medida inventada) pero DEBE seguir
 * ocupando el mismo espacio que en una tarjeta con medida real, para
 * que precio y botón queden alineados entre todas las tarjetas de la
 * fila.
 */
.featured-products__carousel .product-card-measure {
	grid-column: 1 / -1;
	min-height: calc(var(--text-xs) * 1.3);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text-muted);
	margin: 2px 0 0;
}

.featured-products__carousel .product-card-rating {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 2px 0 0;
}

.featured-products__carousel .product-card-star {
	fill: var(--color-primary);
	stroke: var(--color-primary);
}

.featured-products__carousel .product-card-star.is-empty {
	fill: none;
	stroke: #d7cdd2;
}

.featured-products__carousel .product-card-rating-count {
	margin-left: 2px;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.featured-products__carousel .price {
	grid-column: 1;
	/* min-width:0 + recorte: mismo criterio que `.shop-grid .price` —
	   un rango de precio de producto variable ("S/ 100 – S/ 250") no
	   debe ensanchar la columna 1 ni empujar el botón fuera de la
	   tarjeta. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	/*
	 * BUG real encontrado (reportado con captura desde el celular real
	 * en producción): el precio de oferta se veía en 2 líneas en unas
	 * tarjetas sí y en otras no — nunca fue un problema de mi CSS, sino
	 * que `blocksy/static/bundle/woocommerce.min.css` se encola DESPUÉS
	 * de este archivo (confirmado en el orden real de <link> de la
	 * página) y ahí Blocksy trae su propio `white-space:normal` para
	 * `.price`, que le gana a este `nowrap` sin `!important`. Con
	 * `white-space:normal` el salto a 2 líneas queda al límite exacto
	 * del ancho en px que ocupan los dígitos reales de cada precio —
	 * por eso "S/ 250.00 S/ 300.00" se cortaba y "S/ 149.00 S/ 165.00"
	 * no, aunque tengan la misma cantidad de caracteres. Mismo criterio
	 * que el `!important` de `margin` de abajo, mismo motivo real.
	 */
	white-space: nowrap !important;
	margin: 6px 0 0 !important; /* WooCommerce trae su propio margin-bottom:10px con más especificidad */
	line-height: 1.2;
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-primary);
}

.featured-products__carousel .price ins {
	text-decoration: none;
}

.featured-products__carousel .price del {
	font-size: 0.85em;
	font-weight: 400;
	color: var(--color-text-muted);
}

/*
 * BUG real encontrado (reportado con captura desde el celular real en
 * producción, luego confirmado también en media pantalla — la tarjeta
 * de este carrusel es ANGOSTA en varios anchos intermedios, no sólo
 * en móvil): el precio tachado quedaba tapado por el botón circular
 * del carrito. Nunca fue un problema de `white-space` ni de
 * `del`/`ins` (son hijos de `.sale-price`, que WooCommerce/Blocksy
 * arma como `display:inline-flex`, así que el padre decide el layout,
 * no el `display` propio de cada uno).
 *
 * Pedido explícito de la usuaria: mismo diseño que `.shop-grid
 * .sale-price` (Tienda) en TODOS los anchos — vigente (rosado) arriba,
 * tachado (gris) abajo.
 *
 * OJO con esto (costó una verificación en vivo descubrirlo): Blocksy
 * ya trae `.sale-price del { order: 2 }` en su propio CSS base (`ins`
 * se queda en el `order: 0` por defecto) — pensado para su layout en
 * fila (vigente primero/izquierda, tachado después/derecha). Como
 * `order` decide la posición dentro del eje ANTES que la dirección del
 * eje, con `flex-direction: column` normal (eje top→bottom, se coloca
 * primero el `order` más bajo) el `ins` (order 0) ya cae arriba y el
 * `del` (order 2) abajo — exactamente lo pedido, sin tocar `order` ni
 * el HTML. Usar `column-reverse` aquí (como se hizo en un intento
 * anterior) invierte también el efecto del `order` y deja el tachado
 * ARRIBA, al revés de lo pedido — confirmado con una prueba aislada
 * antes de corregirlo.
 */
.featured-products__carousel .sale-price {
	display: inline-flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	gap: 2px;
}

.featured-products__carousel .entry-meta {
	display: none;
}

.featured-products__carousel .ct-woo-card-actions {
	grid-column: 2;
	margin-top: 0;
}

.featured-products__carousel .add_to_cart_button {
	position: relative;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	max-width: 40px;
	max-height: 40px;
	padding: 0;
	border-radius: var(--radius-md);
	background: var(--color-primary);
	font-size: 0;
	color: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition-base);
}

.featured-products__carousel .add_to_cart_button:hover {
	background: var(--color-primary-hover);
}

.featured-products__carousel .add_to_cart_button::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	display: block;
	width: 18px;
	height: 18px;
	background: url("../images/icons/bag-white.svg") center / contain no-repeat;
}

/*
 * Link "Ver carrito" que WooCommerce agrega vía AJAX después de
 * agregar al carrito — por defecto sale con el botón azul genérico de
 * Blocksy, nada que ver con el círculo rosado del carrito. Se
 * restyla para que ocupe el mismo lugar, en rosado.
 */
.featured-products__carousel .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding-inline: var(--space-3);
	border-radius: var(--radius-md);
	background: var(--color-primary) !important;
	color: #fff !important;
	font-size: var(--text-xs);
	font-weight: 600;
	white-space: nowrap;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition-base);
}

.featured-products__carousel .added_to_cart:hover {
	background: var(--color-primary-hover) !important;
}

/*
 * "Los más amados" (Home) es un escaparate resumido: sólo imagen
 * principal, insignia "Más vendido"/"Nuevo", corazón de favoritos,
 * nombre, estrellas, precio y el botón cuadrado de agregar. En ESTA
 * sección únicamente (selector acotado a .featured-products__carousel,
 * nunca global) se ocultan las líneas de característica técnica
 * (Altura / Tamaño / Color / …), los puntos de galería y las
 * diapositivas 2..N — en /shop/, en las categorías y en la ficha de
 * producto siguen intactos. Ronda visual Home 1.
 */
.featured-products__carousel .product-card-characteristic,
.featured-products__carousel .product-card-dots {
	display: none;
}

/*
 * La diapositiva 2..N de galería la imprime Blocksy como <img> dentro
 * del <figure>; la regla `.featured-products__carousel .products figure
 * img { display:block }` de más arriba en este archivo tiene más
 * especificidad, así que el override tiene que igualarla. Con los puntos
 * ya ocultos nunca se podría activar, pero se deja en display:none para
 * que no reserve caja y sólo se vea la imagen principal.
 */
.featured-products__carousel .products figure img.product-card-gallery-slide {
	display: none;
}

/*
 * Móvil (≤600px): 2 tarjetas por vista, muy angostas — precio y acciones
 * dejan de compartir fila (no caben sin recortarse ni superponerse) y
 * pasan a apilarse: precio arriba, botón "Agregar" / "Ver carrito"
 * debajo, alineado a la izquierda y COMPLETO (el enlace AJAX
 * `.added_to_cart` puede llevar texto). La tarjeta pasa a una sola
 * columna para que nada empuje ancho. El carrusel horizontal y su
 * rueda/touch/flechas siguen igual.
 */
@media (max-width: 600px) {
	.featured-products__carousel .products li.product {
		grid-template-columns: minmax(0, 1fr);
	}

	.featured-products__carousel .price {
		grid-column: 1;
		white-space: normal; /* que no se recorte con "…" cuando ya tiene su propia línea */
	}

	.featured-products__carousel .ct-woo-card-actions {
		grid-column: 1;
		justify-self: start;
		margin-top: var(--space-2);
	}

	.featured-products__carousel .added_to_cart {
		max-width: 100%;
		white-space: normal;
		text-align: center;
		line-height: 1.2;
	}
}