/**
 * Tarjeta de producto — componente compartido por la home y la tienda.
 *
 * Es el `ProductCard` de Lovable. Equivalencias Tailwind → px:
 * p-6=24 · gap-2=8 · text-2xl=24 · text-sm=14 · text-xs=12
 *
 * ⚠ Todo en px, nunca rem: OceanWP declara `html { font-size: 62.5% }`.
 *
 * El borde sale del azul de la línea al 30% —así lo pide el referente— y no
 * del borde general del tema: la tarjeta es de Azul, esté donde esté.
 */

/*
 * Tarjeta con «enlace extendido»: el único <a> es el del nombre, y su ::after
 * cubre la ficha entera. Así se puede pinchar toda la tarjeta sin anidar
 * enlaces ni repetir tres veces la misma URL en el HTML.
 */
.ms-producto {
	/* Azul de la línea al 30% sobre el blanco de la tarjeta = #d7e5e8. */
	--ms-producto-borde: rgba(121, 167, 179, 0.3);

	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ms-producto-borde);
	background-color: var(--ms-card);
}

/* La oculta el filtro del catálogo; `hidden` ya la saca del árbol accesible. */
.ms-producto.is-filtrada {
	display: none;
}

.ms-producto__link {
	text-decoration: none;
	color: inherit;
}

.ms-producto__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ms-producto:focus-within {
	outline: 2px solid var(--ms-azul-ink);
	outline-offset: 3px;
}

.ms-producto__link:focus-visible {
	outline: none;
}

.ms-producto__media {
	display: block;
	overflow: hidden;
	background-color: var(--ms-secondary);
}

.ms-producto__img,
.ms-producto__media .ms-img-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ms-producto:hover .ms-producto__img {
	transform: scale(1.03);
}

/* El pie se pega abajo para que los precios queden alineados entre tarjetas. */
.ms-producto__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 24px;
}

.ms-producto__cat {
	margin: 0;
}

.ms-producto__name {
	margin: 10px 0 0;
	font-family: var(--ms-font-display);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.ms-producto__desc {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ms-muted-foreground);
}

.ms-producto__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 28px;
}

/*
 * El precio lo genera WooCommerce y viene envuelto en sus propios <span>
 * (.woocommerce-Price-amount .amount, <bdi>, <ins>…). OceanWP les pone color
 * verde directamente —`.amount { color: #57bf6d }` en su CSS de Woo—, así que
 * no basta con colorear el contenedor: el color hay que aplicarlo también a
 * los descendientes, y con dos clases para ganar esa regla sin !important.
 */
.ms-producto .ms-producto__price,
.ms-producto .ms-producto__price * {
	font-family: var(--ms-font-sans);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ms-azul-ink);
}

/* Precio rebajado: el anterior tachado, más pequeño y apagado. */
.ms-producto .ms-producto__price del,
.ms-producto .ms-producto__price del * {
	margin-right: 8px;
	font-size: 15px;
	color: var(--ms-muted-foreground);
}

.ms-producto .ms-producto__price ins {
	text-decoration: none;
}

.ms-producto__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ms-font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ms-azul-ink);
}

.ms-producto__more .ms-arrow {
	transition: transform 0.2s ease;
}

.ms-producto:hover .ms-producto__more .ms-arrow {
	transform: translateX(4px);
}