/**
 * Tarjeta de producto WooCommerce — Estilos BEM
 *
 * Diseño flat y minimalista basado en la referencia de Yadea Vietnam.
 * Fondo gris claro, tipografía limpia, botón fantasma (ghost button) naranja.
 *
 * @author  Pablo Gamaliel Solis Arista
 * @url     https://gamalielsolis.com
 * @project Yadea México (yadea.mx)
 */

/* ==========================================================================
   VARIABLES DE DISEÑO (Design Tokens)
   Centralizadas para mantener consistencia en todo el tema.
   ========================================================================== */
:root {
	--yadea-orange: #FF5F00;
	--yadea-orange-hover: #e65500;
	--yadea-dark: #1a1a1a;
	--yadea-gray-text: #666666;
	--yadea-gray-light: #f5f5f5;
	--yadea-white: #ffffff;
	--yadea-border: #e0e0e0;
	--yadea-radius: 0;
	--yadea-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--yadea-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   GRID DEL CATÁLOGO
   Controla la disposición de las tarjetas en el loop de productos.
   ========================================================================== */
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 2rem 0;
	list-style: none;
}

/* ==========================================================================
   BLOQUE: .yadea-card
   Tarjeta individual de producto en el catálogo.
   ========================================================================== */
.yadea-card {
	display: flex;
	flex-direction: column;
	background-color: var(--yadea-white);
	border: 1px solid var(--yadea-border);
	border-radius: var(--yadea-radius);
	overflow: hidden;
	transition: box-shadow var(--yadea-transition), transform var(--yadea-transition);
	list-style: none;
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}

/* Elevación sutil en hover para dar vida a la interacción */
.yadea-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* ==========================================================================
   ELEMENTO: .yadea-card__link
   Enlace envolvente de la imagen, sin decoración visual.
   ========================================================================== */
.yadea-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.yadea-card__link:visited {
	color: inherit;
}

/* ==========================================================================
   ELEMENTO: .yadea-card__image-wrapper
   Contenedor de la imagen con fondo gris claro para productos con fondo transparente.
   ========================================================================== */
.yadea-card__image-wrapper {
	position: relative;
	background-color: var(--yadea-gray-light);
	margin: 0;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

/* Imagen del producto: centrada y responsiva */
.yadea-card__image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform var(--yadea-transition);
}

/* Zoom sutil en hover para indicar interactividad */
.yadea-card:hover .yadea-card__image {
	transform: scale(1.03);
}

/* ==========================================================================
   ELEMENTO: .yadea-card__color-swatches
   Contenedor para los swatches de color (llenado por plugin Variation Swatches).
   Se oculta si está vacío para no dejar espacio muerto.
   ========================================================================== */
.yadea-card__color-swatches {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem 0;
	min-height: 0;
}

/* Ocultar contenedor vacío para evitar espacio residual */
.yadea-card__color-swatches:empty {
	display: none;
}

/* ==========================================================================
   ELEMENTO: .yadea-card__info
   Bloque de texto con título y precio del producto.
   ========================================================================== */
.yadea-card__info {
	padding: 0.75rem 1.25rem;
	flex-grow: 1;
}

/* ==========================================================================
   ELEMENTO: .yadea-card__title
   Nombre del modelo — tipografía bold, mayúsculas como la referencia Vietnam.
   ========================================================================== */
.yadea-card__title {
	font-family: var(--yadea-font-primary);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--yadea-dark);
	margin: 0 0 0.35rem;
	text-transform: uppercase;
	letter-spacing: -0.05em;
}

.yadea-card__title a {
	color: inherit;
	text-decoration: none;
}

.yadea-card__title a:hover {
	color: var(--yadea-orange);
}

.yadea-card__title a:visited {
	color: inherit;
}

/* ==========================================================================
   ELEMENTO: .yadea-card__price
   Precio del producto — estilo limpio y legible.
   ========================================================================== */
.yadea-card__price {
	font-family: var(--yadea-font-primary);
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--yadea-gray-text);
	margin-bottom: 0;
}

/* Precio en oferta: original tachado */
.yadea-card__price del {
	opacity: 0.6;
	margin-right: 0.5em;
	font-size: 0.85em;
	color: #a0a0a0;
	text-decoration: line-through !important;
}
.yadea-card__price del .woocommerce-Price-amount {
	color: #a0a0a0 !important;
	font-weight: 500 !important;
}

/* Precio actual destacado */
.yadea-card__price ins {
	text-decoration: none !important;
	font-weight: 800 !important;
	color: var(--yadea-orange) !important;
	background: transparent !important;
	font-size: 1.15em;
}
.yadea-card__price ins .woocommerce-Price-amount {
	color: var(--yadea-orange) !important;
	font-weight: 800 !important;
}

/* ==========================================================================
   ELEMENTO: .yadea-card__actions
   Contenedor del botón de acción principal.
   ========================================================================== */
.yadea-card__actions {
	padding: 0 1.25rem 1.25rem;
	margin-top: auto;
}

/* ==========================================================================
   ELEMENTO: .yadea-card__btn
   Ghost Button — borde naranja, fondo transparente, transición a sólido.
   Replicado fielmente de la referencia Yadea Vietnam.
   ========================================================================== */
.yadea-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--yadea-orange);
	background-color: transparent;
	color: var(--yadea-orange);
	font-family: var(--yadea-font-primary);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background-color var(--yadea-transition), color var(--yadea-transition), transform var(--yadea-transition);
}

/* Estado hover: fondo naranja, texto blanco */
.yadea-card__btn:hover {
	background-color: var(--yadea-orange);
	color: var(--yadea-white);
	transform: translateY(-1px);
}

.yadea-card__btn:active {
	transform: translateY(0);
}

.yadea-card__btn:visited {
	color: var(--yadea-orange);
}

.yadea-card__btn:hover:visited {
	color: var(--yadea-white);
}

/* Flecha animada del botón */
.yadea-card__btn-arrow {
	display: inline-block;
	transition: transform var(--yadea-transition);
	font-size: 1.1em;
}

.yadea-card__btn:hover .yadea-card__btn-arrow {
	transform: translateX(4px);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   Ajustes de grid para distintos tamaños de pantalla.
   ========================================================================== */

/* Tablets en retrato: 2 columnas */
@media screen and (max-width: 768px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		padding: 1rem 0;
	}
}

/* Móviles: 1 columna */
@media screen and (max-width: 480px) {
	ul.products {
		grid-template-columns: 1fr;
	}

	.yadea-card__image-wrapper {
		aspect-ratio: 16 / 10;
	}
}

/* ==========================================================================
   OVERRIDES: Limpiar estilos por defecto de WooCommerce
   Necesarios porque deshabilitamos el CSS de WC pero algunos selectores
   base aún afectan la maquetación.
   ========================================================================== */
ul.products li.product {
	width: auto;
	float: none;
	margin-right: 0;
	margin-bottom: 0;
}

ul.products li.product .button {
	display: none;
}

/* Ocultar elementos legacy de WC que ya no usamos en esta tarjeta */
.yadea-card .star-rating,
.yadea-card .woocommerce-loop-product__title,
.yadea-card .price,
.yadea-card .add_to_cart_button,
.yadea-card .added_to_cart {
	display: none;
}