/**
 * Tarjeta de producto.
 *
 * Portada del prototipo. La tarjeta no fija su propio ancho: lo hereda del
 * contenedor, para que el mismo componente sirva en el carrusel de la home
 * (donde mide 66vw con tope de 300px) y en la cuadrícula de la tienda.
 */

.flv-card {
	position: relative;
	background: var(--flv-color-surface);
	border: 1px solid var(--flv-color-border);
	display: flex;
	flex-direction: column;
}

/* El enlace envuelve solo el nombre y se estira sobre toda la tarjeta con un
   pseudoelemento. Antes envolvia la tarjeta entera, y un <a> que contiene
   bloques es justo lo que wpautop parte en dos: insertaba un <p> vacio con
   30px de margen y un enlace huerfano. De paso el enlace gana texto propio,
   que es lo que lee un lector de pantalla al recorrer la lista. */
.flv-card__enlace {
	color: inherit;
	text-decoration: none;
}

.flv-card__enlace::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* «Disponible en»: por encima del enlace estirado, pero sólo los colores y
   los talles reciben el clic (van a la ficha con esa opción elegida); el
   resto deja pasar el clic a la tarjeta. */
.flv-card__disponible {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

.flv-card__disponible a {
	pointer-events: auto;
	color: inherit;
	text-decoration: none;
}

.flv-card__disponible a.flv-card__talle:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* El tachado del talle agotado le gana al «sin subrayado» de los links. */
.flv-card__disponible .flv-card__talle--agotado,
.flv-card__disponible a.flv-card__talle--agotado:hover {
	text-decoration: line-through;
}

.flv-card__disponible a.flv-card__muestra:hover {
	box-shadow: 0 0 0 2px var(--flv-color-surface), 0 0 0 3px currentColor;
}

/* Vista previa del color (ajuste del tema): las muestras con foto reciben el
   mouse y el toque también cuando no son links, y la que se está viendo
   queda marcada. */
.flv-card[data-flv-foto-color] .flv-card__muestra[data-flv-foto-src] {
	pointer-events: auto;
	cursor: pointer;
}

.flv-card__disponible .flv-card__muestra.is-viendo,
.flv-card[data-flv-foto-color="hover"] .flv-card__muestra[data-flv-foto-src]:hover {
	box-shadow: 0 0 0 2px var(--flv-color-surface), 0 0 0 3px currentColor;
}

/* ---------- Imagen ---------- */

.flv-card__figura {
	position: relative;
	/* La proporción la fija el contenedor y no la imagen: así la fila de
	   tarjetas queda alineada aunque las fotos vengan con recortes distintos,
	   que es lo normal en un catálogo con años encima. */
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--flv-cream-100);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Con la tarjeta delante: en las páginas de WooCommerce su hoja pone
   `.woocommerce img { height: auto; max-width: 100% }`, que pesa más que una
   clase sola y deja la foto sin llenar el 3:4. */
.flv-card .flv-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--flv-dur-slow) var(--flv-ease-out);
}

.flv-card:hover .flv-card__img {
	transform: scale( 1.03 );
}

/* Marcador para los productos cuya imagen todavía no se ha importado. */
.flv-card__ph {
	font-family: var(--flv-font-display);
	font-size: 64px;
	line-height: 1;
	color: var(--flv-sand-300);
	user-select: none;
}

.flv-card__badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 6px var(--flv-sp-3);
	background: var(--flv-color-sale-badge-bg);
	color: var(--flv-color-sale-badge-text);
	font-family: var(--flv-font-ui);
	font-size: 14px;
	font-weight: var(--flv-fw-bold);
	letter-spacing: 0.06em;
}

/* ---------- Cuerpo ---------- */

.flv-card__cuerpo {
	display: flex;
	flex-direction: column;
	padding: var(--flv-sp-4) var(--flv-sp-4) 18px;
	flex: 1 1 auto;
}

.flv-card__nombre {
	margin: 0;
	font-family: var(--flv-font-sans);
	font-size: 16px;
	font-weight: var(--flv-fw-regular);
	line-height: 1.35;
	color: var(--flv-color-text);

	/* Dos lineas siempre, ocupadas o no. El prototipo se dibujo con nombres
	   cortos -- "Pantalon Lapacho" -- pero el catalogo real trae cosas como
	   "Pantalon Morley de Plush Cairo", que ocupan dos. Sin altura reservada,
	   una tarjeta larga estira a todas las de su fila y la retícula queda
	   desigual; reservando el hueco, todas miden lo mismo siempre. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.35 * 16px);
}

.flv-card__precio {
	margin-top: 6px;
	font-family: var(--flv-font-ui);
	font-size: 20px;
	font-weight: var(--flv-fw-bold);
	line-height: 1.2;
	/* Salmón oscuro y no el de marca: sobre blanco el 500 se queda en 2,9:1. */
	color: var(--flv-color-price);
}

/* Con descuento, el precio de lista tachado y el que se paga a la derecha. */
.flv-card__precio-lista {
	margin-right: var(--flv-sp-2);
	font-size: 16px;
	font-weight: var(--flv-fw-regular);
	color: var(--flv-color-text-muted);
	text-decoration: line-through;
}

.flv-card__precio-final {
	text-decoration: none;
}

.flv-card__santander {
	display: flex;
	align-items: center;
	gap: var(--flv-sp-2);
	margin-top: var(--flv-sp-2);
	font-family: var(--flv-font-sans);
	font-size: 15px;
	color: var(--flv-brown-800);
}

.flv-card .flv-card__banco {
	height: 14px;
	width: auto;
	max-width: none;
	display: block;
	flex: 0 0 auto;
}

/* ---------- Disponible en ---------- */

.flv-card__disponible {
	display: flex;
	align-items: center;
	gap: var(--flv-sp-2);
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid var(--flv-color-border);

	/* Etiqueta, colores y talles en un solo flujo que baja de fila cuando no
	   entra: con muchos colores y talles, en una línea se recortaban. Las
	   tarjetas de una fila pueden quedar de distinto alto; en el carrusel se
	   igualan igual, porque comparten la altura de la fila. */
	flex-wrap: wrap;
	row-gap: 6px;
	column-gap: 7px;
	min-height: 31px;
}

.flv-card__etiqueta {
	flex: 0 0 auto;
	white-space: nowrap;
}

.flv-card__etiqueta {
	font-family: var(--flv-font-sans);
	font-size: 14px;
	color: var(--flv-color-text-muted);
}

/* Los contenedores no cuentan para el flujo: sus muestras y talles son hijos
   directos de la fila, así bajan de a uno y no en bloque. */
.flv-card__colores,
.flv-card__talles {
	display: contents;
}

.flv-card__muestra {
	/* Sin encogerse: apretadas se volvían óvalos. */
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	border-radius: var(--flv-radius-pill);
	/* El borde interior evita que una muestra blanca o crudo desaparezca sobre
	   el fondo de la tarjeta. */
	box-shadow: inset 0 0 0 1px rgba( 42, 24, 16, 0.18 );
	display: block;
}

/* Término de color sin muestra asignada: se marca en diagonal para que se vea
   que falta configurarlo, en vez de pintar un gris que parezca deliberado. */
.flv-card__muestra--sin {
	background: repeating-linear-gradient(
		45deg,
		var(--flv-sand-200),
		var(--flv-sand-200) 3px,
		var(--flv-white) 3px,
		var(--flv-white) 6px
	);
}

/* Color sin stock (ajuste del tema «se muestran tachados»): apagado y
   cruzado por una línea, recortada al círculo. La línea es clara con un filo
   oscuro: se ve sobre colores claros y oscuros. */
.flv-card__muestra--agotado {
	position: relative;
	overflow: hidden;
	opacity: 0.35;
}

.flv-card__muestra--agotado::after {
	content: '';
	position: absolute;
	top: 50%;
	left: -4px;
	right: -4px;
	height: 2px;
	margin-top: -1px;
	background: var(--flv-white);
	box-shadow: 0 0 0 0.75px rgba( 42, 24, 16, 0.55 );
	transform: rotate( -45deg );
}

.flv-card__talle {
	font-family: var(--flv-font-ui);
	font-size: 14px;
	line-height: 1;
	color: var(--flv-mud-700);
}

/* Talle sin stock: tachado, como en el prototipo. El texto para lectores de
   pantalla lo dice con palabras, porque el tachado no se lee. */
.flv-card__talle--agotado {
	color: var(--flv-mud-600);
	text-decoration: line-through;
}

/* ---------- Cuadrícula reutilizable ---------- */

.flv-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: var(--flv-sp-4);
}

@media ( max-width: 600px ) {
	.flv-cards {
		grid-template-columns: repeat( 2, 1fr );
		gap: var(--flv-sp-3);
	}

	.flv-card__cuerpo {
		padding: var(--flv-sp-3) var(--flv-sp-3) var(--flv-sp-4);
	}

	/* Con dos columnas el precio se come el renglón, sobre todo cuando lleva
	   el de lista tachado al lado. */
	.flv-card__precio {
		font-size: 16px;
	}

	.flv-card__precio-lista {
		margin-right: var(--flv-sp-1, 4px);
		font-size: 14px;
	}
}