/**
 * Componentes reutilizables (botones, tarjetas de producto, badges, etc.).
 * Se construyen en Fase 2, a medida que cada página se diseña,
 * en vez de definirse todos de antemano sin contexto visual real.
 */

/**
 * Tarjeta de producto — compartida entre Best Sellers (Home) y el
 * grid de la Tienda (template-parts/woocommerce/content-product-card.php).
 * Solo el diseño de la tarjeta en sí; el layout de cada sección
 * (columnas, gaps, padding) se define en el CSS de cada página.
 */

.mka-producto-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.mka-producto-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: opacity 300ms ease;
}

/**
 * Sin texto "Ver pieza": toda la tarjeta ya es clicable (es un <a>),
 * así que la retroalimentación al pasar el cursor vive en la propia
 * foto y el nombre — un cue de menos, tarjeta más editorial.
 */
.mka-producto-card:hover img,
.mka-producto-card:focus-visible img {
	opacity: 0.88;
}

.mka-producto-card__nombre {
	display: block;
	margin-top: var(--mka-espaciado-md);
	font-family: var(--mka-font-display);
	font-size: 1rem;
	letter-spacing: 0.01em;
	color: var(--mka-color-texto);
	transition: color 200ms ease;
}

.mka-producto-card:hover .mka-producto-card__nombre,
.mka-producto-card:focus-visible .mka-producto-card__nombre {
	color: var(--mka-color-burdeos);
}

.mka-producto-card__precio {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: var(--mka-color-texto-suave);
}

/**
 * Solo para la tarjeta placeholder de Best Sellers (mientras no haya
 * producto real) — "Próximamente" nada más, pequeño y discreto.
 * No "Vista previa de producto": suena técnico, como sitio a medio
 * construir en vez de una decisión editorial de marca.
 */
.mka-producto-card__proximamente {
	display: block;
	margin-top: var(--mka-espaciado-md);
	font-family: var(--mka-font-display);
	font-style: italic;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--mka-color-texto-suave);
}

/**
 * Estado bajo el precio (Agotado / Bajo pedido): una línea diminuta,
 * en mayúsculas espaciadas y en el mismo tono suave del precio — sin
 * badge, sin color de alerta, sin nada sobre la fotografía.
 */
.mka-producto-card__estado {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mka-color-texto-suave);
	opacity: 0.85;
}

/**
 * Producto sin fotografía (no debería ocurrir con piezas públicas):
 * recuadro marfil vacío, con la misma proporción que las fotos. Nunca
 * una joya de relleno.
 */
.mka-producto-card__sin-foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	background-color: var(--mka-color-marfil);
	border: 1px solid var(--mka-color-plata);
}

/**
 * Héroes de páginas informativas SIN fotografía (Garantía, Envíos,
 * Métodos de pago, Contacto, Guía de Tallas): el panel de imagen no se
 * imprime y el hero pasa a composición tipográfica centrada — una sola
 * columna, mucho aire, un filete burdeos discreto. Cuando exista una
 * fotografía real basta con imprimir de nuevo el panel y quitar esta
 * clase. Selector con elemento (section.) para ganar en especificidad
 * a las reglas de cada página sin depender del orden de carga.
 */
section.mka-hero-sin-foto {
	grid-template-columns: 1fr;
	min-height: 0;
	justify-items: center;
	text-align: center;
}

section.mka-hero-sin-foto > [class$="__texto"] {
	align-items: center;
	text-align: center;
	padding: calc(var(--mka-espaciado-xl) * 1.1) var(--mka-espaciado-md) var(--mka-espaciado-xl);
}

section.mka-hero-sin-foto > [class$="__texto"]::before {
	content: '';
	display: block;
	width: 40px;
	height: 1px;
	margin-bottom: var(--mka-espaciado-md);
	background-color: var(--mka-color-burdeos);
	opacity: 0.4;
}

section.mka-hero-sin-foto [class$="__parrafo"] {
	max-width: 40ch;
}

section.mka-hero-sin-foto [class$="__acciones"] {
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	.mka-producto-card img,
	.mka-producto-card__nombre {
		transition: none;
	}
}