/**
 * 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 una sola columna de texto alineada a la
 * izquierda — mismo patrón "page-intro" que usa la maqueta editorial
 * en Sets, Guía de Gemas, Ayuda y Contacto. 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: start;
	text-align: left;
}

section.mka-hero-sin-foto > [class$="__texto"] {
	align-items: flex-start;
	text-align: left;
	padding: 3.75rem 5% 2.5rem 5%;
}

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

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

@media (max-width: 900px) {
	section.mka-hero-sin-foto > [class$="__texto"] {
		padding: var(--mka-espaciado-xl) var(--mka-espaciado-md) var(--mka-espaciado-lg) var(--mka-espaciado-md);
	}
}

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

/**
 * Legibilidad móvil: precio y estado (Agotado/Bajo pedido) crecen a un
 * cuerpo cercano a 16px — en pantallas pequeñas el tamaño de escritorio
 * (13px/11px) queda por debajo de lo cómodo para leer un precio.
 */
@media (max-width: 767px) {
	.mka-producto-card__precio {
		font-size: 0.9375rem;
	}

	.mka-producto-card__estado {
		font-size: 0.75rem;
	}
}

/**
 * "Pedir contraentrega por WhatsApp" — mismo componente en la ficha de
 * producto (template-parts/woocommerce/single-product/contraentrega-whatsapp.php)
 * y en la Bolsa (assets/js/modules/carrito-contraentrega.js, insertado por
 * JS porque el carrito es un bloque nativo de WooCommerce sin plantilla
 * PHP propia). Vive en components.css, no en producto.css ni compra.css,
 * para que ambos contextos carguen el mismo estilo sin duplicarlo.
 * Botón independiente y secundario (contorno, no relleno): nunca debe
 * competir visualmente con "Añadir a la bolsa" ni con "Proceder al pago".
 */
.mka-contraentrega {
	margin-top: var(--mka-espaciado-sm);
}

.mka-contraentrega__boton {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: var(--mka-espaciado-sm) var(--mka-espaciado-md);
	font-family: inherit;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mka-color-texto);
	background-color: transparent;
	border: 1px solid var(--mka-color-texto);
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.mka-contraentrega__boton:hover,
.mka-contraentrega__boton:focus-visible {
	background-color: var(--mka-color-burdeos);
	border-color: var(--mka-color-burdeos);
	color: var(--mka-color-blanco-calido);
}

.mka-contraentrega__boton:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.mka-contraentrega__nota {
	margin: var(--mka-espaciado-xs) 0 0 0;
	font-size: 0.75rem;
	text-align: center;
	color: var(--mka-color-texto-suave);
}

.mka-contraentrega__aviso {
	margin: var(--mka-espaciado-xs) 0 0 0;
	font-size: 0.8125rem;
	text-align: center;
	color: var(--mka-color-burdeos);
}

@media (prefers-reduced-motion: reduce) {
	.mka-contraentrega__boton {
		transition: none;
	}
}