/*
 * tarjeta-producto.css
 * Tarjeta de producto unificada (tienda, home, relacionados, carrito).
 * Se carga en todo el sitio, después de variables.css.
 */
ul.products .saes-tarjeta-producto,
.saes-tarjeta-producto {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-lg);
	box-shadow: var(--sombra-sutil);
	overflow: hidden;
	transition: transform var(--transicion), box-shadow var(--transicion);
}
.saes-tarjeta-producto:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }

.saes-tarjeta-producto__link { display: flex; flex-direction: column; flex: 1; color: inherit; }

.saes-tarjeta-producto__media {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	padding: 1.1rem;
	background: var(--color-fondo-alterno);
	border-radius: 0;
}
.saes-tarjeta-producto__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply; /* funde los fondos blancos de las fotos con el gris de la tarjeta */
}
.saes-tarjeta-producto .onsale { display: none; } /* reemplazado por el chip -% */

.saes-tarjeta-producto__chips {
	position: absolute;
	top: .8rem; left: .8rem; right: .8rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	pointer-events: none;
}
.saes-chip {
	font: 700 .68rem/1 var(--fuente-cuerpo);
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: .4rem .65rem;
	border-radius: var(--radio-full);
	background: var(--color-primario);
	color: #fff;
}
.saes-chip--oferta { background: var(--color-acento); margin-left: auto; }
.saes-chip--agotado { background: var(--color-secundario); }

.saes-tarjeta-producto__overlay { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem .4rem; margin: 0; }
.saes-tarjeta-producto__nombre {
	font: 600 .92rem/1.3 var(--fuente-titulos);
	color: var(--color-texto);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.6em;
}
.saes-tarjeta-producto__precio { font: 700 1.15rem/1.2 var(--fuente-titulos); color: var(--color-texto); }
.saes-tarjeta-producto__precio del { font-size: .8rem; font-weight: 400; color: var(--color-texto-suave); opacity: 1; }
.saes-tarjeta-producto__precio ins { text-decoration: none; color: var(--color-acento); }

.saes-tarjeta-producto__accion { padding: .6rem 1.1rem 1.1rem; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.saes-tarjeta-producto__accion .button,
.saes-tarjeta-producto__accion .add_to_cart_button,
.saes-tarjeta-producto__accion .added_to_cart {
	display: block !important;
	width: 100%;
	text-align: center;
	font: 600 .85rem/1 var(--fuente-cuerpo) !important;
	letter-spacing: .03em;
	text-transform: none !important;
	padding: .8rem 1rem !important;
	background: var(--color-acento) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--radio-full);
	transition: background var(--transicion);
}
.saes-tarjeta-producto__accion .button:hover,
.saes-tarjeta-producto__accion .add_to_cart_button:hover { background: var(--color-acento-hover) !important; color: #fff !important; }
.saes-tarjeta-producto__accion .added_to_cart { background: var(--color-secundario) !important; }
.saes-tarjeta-producto__accion .button.loading { opacity: .6; }

@media (max-width: 520px) {
	.saes-tarjeta-producto__overlay { padding: .8rem .8rem .3rem; }
	.saes-tarjeta-producto__accion { padding: .5rem .8rem .8rem; }
	.saes-tarjeta-producto__nombre { font-size: .82rem; }
	.saes-tarjeta-producto__precio { font-size: 1rem; }
	.saes-chip { font-size: .6rem; padding: .35rem .5rem; }
}

/* Refuerzo de especificidad: el botón de compra debe ser siempre el naranja de marca */
ul.products .saes-tarjeta-producto .saes-tarjeta-producto__accion a.button,
ul.products .saes-tarjeta-producto .saes-tarjeta-producto__accion a.add_to_cart_button,
.saes-tarjeta-producto .saes-tarjeta-producto__accion a.button {
	background: var(--color-acento) !important;
	color: #fff !important;
	border: 0 !important;
}
ul.products .saes-tarjeta-producto .saes-tarjeta-producto__accion a.button:hover { background: var(--color-acento-hover) !important; }
ul.products .saes-tarjeta-producto .saes-tarjeta-producto__accion a.added_to_cart { background: var(--color-secundario) !important; }