/* ==========================================================================
   EVOX — Shop the Look
   Ligero, sin dependencias. Colores de marca EVOX inline (ajústalos si cambian).
   ========================================================================== */

.evox-stl {
	position: relative;
	width: 100%;
	aspect-ratio: var(--stl-ratio, 3 / 2); /* mismo ratio desktop/mobile => los % siempre caen bien */
	/* overflow VISIBLE a propósito: permite que las tarjetas de los hotspots
	   cercanos al borde superior "salgan" de la imagen sin recortarse.
	   El redondeado se aplica en la imagen, no en el wrapper. */
	overflow: visible;
	background: #f1f3f5;
	border-radius: 12px;
}

.evox-stl__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 12px; /* mantiene las esquinas redondeadas sin recortar las tarjetas */
}

/* -------- Hotspot (contenedor posicionado por %) -------- */
.evox-stl__hotspot {
	position: absolute;
	transform: translate(-50%, -50%); /* centra el pin exactamente en el punto X/Y */
	z-index: 2;
}

/* -------- Pin (botón) -------- */
.evox-stl__pin {
	position: relative;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #152c44;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* Punto blanco central */
.evox-stl__pin::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
}

/* Área táctil ampliada (~48px) sin agrandar el pin visible */
.evox-stl__pin::after {
	content: "";
	position: absolute;
	inset: -10px;
}

/* -------- Animación pulse (CSS puro, sin JS) -------- */
.evox-stl__pulse {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid #fff;
	animation: evox-pulse 2s ease-out infinite;
	pointer-events: none;
}

@keyframes evox-pulse {
	0%   { transform: scale(1);   opacity: .8; }
	100% { transform: scale(2.4); opacity: 0;  }
}

@media (prefers-reduced-motion: reduce) {
	.evox-stl__pulse { animation: none; }
}

/* -------- Tarjeta de producto -------- */
.evox-stl__card {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	width: 200px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, .16);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(8px);
	transition: opacity .2s ease, transform .2s ease;
	z-index: 3;
}

.evox-stl__hotspot.is-open .evox-stl__card {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.evox-stl__card-link {
	display: block;
	padding: 12px;
	text-decoration: none;
	color: #191919;
}

.evox-stl__card-media img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 8px;
	display: block;
}

.evox-stl__card-name {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 4px;
}

.evox-stl__card-price {
	display: block;
	color: #191919;
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 6px;
}

.evox-stl__card-price del { color: #adb5bd; font-weight: 400; margin-right: 4px; }

.evox-stl__card-cta {
	display: block;
	font-size: 12px;
	color: #4a4a4a;
}

/* -------- Ajuste móvil -------- */
@media (max-width: 600px) {
	.evox-stl__card { width: 160px; }
	.evox-stl__pin  { width: 24px; height: 24px; }
}

/* -------- Corrección de desborde en los bordes de la imagen --------
   Añade la clase modificadora en el HTML si un hotspot queda muy al borde:
   - .evox-stl__hotspot--left   => tarjeta alineada a la izquierda del pin
   - .evox-stl__hotspot--right  => tarjeta alineada a la derecha del pin
   - .evox-stl__hotspot--below  => tarjeta debajo del pin (para pines en la parte alta)
   (Opcional: solo si notas recorte. Por defecto la tarjeta va centrada arriba.) */
.evox-stl__hotspot--left  .evox-stl__card { left: 0;   transform: translateX(0)     translateY(8px); }
.evox-stl__hotspot--left.is-open  .evox-stl__card { transform: translateX(0)     translateY(0); }
.evox-stl__hotspot--right .evox-stl__card { left: auto; right: 0; transform: translateX(0) translateY(8px); }
.evox-stl__hotspot--right.is-open .evox-stl__card { transform: translateX(0) translateY(0); }
.evox-stl__hotspot--below .evox-stl__card { bottom: auto; top: calc(100% + 12px); }