/* Fanor · Skeleton del Loop Carousel
 *
 * Tapa el instante en que Elementor ya imprimió el contenido pero Swiper todavía
 * no lo ha convertido en carrusel: durante ese hueco se veía UNA tarjeta ocupando
 * casi todo el ancho.
 *
 * ── La regla que no se puede romper ───────────────────────────────────────
 * El carrusel real NO se saca del DOM ni se le pone `display: none`. Swiper mide
 * anchos al inicializarse, y sobre un elemento sin caja mediría 0 y quedaría roto.
 * Aquí se hace lo contrario: el carrusel real sigue en su sitio, ocupando espacio y
 * medible, solo que invisible (`visibility: hidden`), y el skeleton se superpone.
 *
 * ── Y la que evita el salto vertical ──────────────────────────────────────
 * Mientras carga, el envoltorio se fija a la altura del skeleton con
 * `overflow: hidden`. Sin eso, la tarjeta gigante del estado intermedio estira el
 * contenedor y al asentarse el carrusel la página pega un salto. Recortar la
 * altura no afecta a lo que Swiper mide, porque lo que mide es el ANCHO.
 *
 * Las medidas son custom properties: si las tarjetas de una plantilla concreta son
 * más altas, se ajusta `--fcs-alto` en esa página sin tocar este archivo.
 */

.fanor-carousel-loader-wrap {
	/* Cuántas tarjetas se ven y cuánto las separa. Coinciden con la configuración
	   real del carrusel (6 / 3 / 2.2), para que el skeleton no prometa una cosa y
	   el carrusel entregue otra. */
	--fcs-cols: 6;
	--fcs-gap: 10px;
	--fcs-alto: 430px;

	/* Tonos del sistema: tarjeta blanca, hueso gris muy claro. */
	--fcs-card-bg: #FFFFFF;
	--fcs-borde: #EFEFEF;
	--fcs-base: #F1F1F1;
	--fcs-brillo: #E8E8E8;
	--fcs-radio: 3px;

	position: relative;
}

/* ── Estado: cargando ──────────────────────────────────────────────────── */

.fanor-carousel-loader-wrap--loading {
	height: var(--fcs-alto);
	overflow: hidden;
}

/* Todo lo que NO es el skeleton —o sea, el carrusel de verdad— sigue ocupando su
   sitio y siendo medible, pero no se ve. `pointer-events: none` evita que alguien
   pulse a ciegas un producto que todavía no está colocado. */
.fanor-carousel-loader-wrap--loading > *:not(.fanor-carousel-loader) {
	visibility: hidden;
	pointer-events: none;
}

.fanor-carousel-loader-wrap--loading > .fanor-carousel-loader {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ── Estado: listo ─────────────────────────────────────────────────────── */
/* El JS además borra el nodo del skeleton; esto es la red por si no llegara. */

.fanor-carousel-loader-wrap--ready > .fanor-carousel-loader {
	display: none;
}

/* ── La pista de tarjetas hueso ────────────────────────────────────────── */

.fanor-carousel-loader {
	overflow: hidden;
}

.fanor-carousel-loader__track {
	display: flex;
	gap: var(--fcs-gap);
	align-items: stretch;
}

/* El ancho sale de la misma cuenta que hace Swiper: el hueco disponible menos las
   separaciones, repartido entre las columnas. Admite decimales, así que con
   `--fcs-cols: 2.2` la tercera tarjeta se ve cortada igual que en el carrusel. */
.fanor-carousel-loader__card {
	flex: 0 0 calc( ( 100% - ( var(--fcs-cols) - 1 ) * var(--fcs-gap) ) / var(--fcs-cols) );
	box-sizing: border-box;
	height: var(--fcs-alto);
	padding: 10px;
	background: var(--fcs-card-bg);
	border: 1px solid var(--fcs-borde);
	border-radius: var(--fcs-radio);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ── Las piezas, en el orden de la tarjeta de producto real ────────────── */

.fanor-carousel-loader__image,
.fanor-carousel-loader__compatibility,
.fanor-carousel-loader__line,
.fanor-carousel-loader__price,
.fanor-carousel-loader__rating,
.fanor-carousel-loader__button {
	background-color: var(--fcs-base);
	border-radius: var(--fcs-radio);
}

.fanor-carousel-loader__image {
	flex: 1 1 auto;
	min-height: 120px;
}

.fanor-carousel-loader__compatibility { height: 34px; }
.fanor-carousel-loader__line          { height: 12px; }
.fanor-carousel-loader__line--sku     { width: 40%; }
.fanor-carousel-loader__line--title   { width: 85%; }
.fanor-carousel-loader__price         { height: 18px; width: 55%; }
.fanor-carousel-loader__rating        { height: 12px; width: 45%; }
.fanor-carousel-loader__button        { height: 38px; }

/* ── Shimmer ───────────────────────────────────────────────────────────── */
/* Muy contenido a propósito: un brillo que recorre la pieza, no un destello. */

.fanor-carousel-loader--shimmer .fanor-carousel-loader__image,
.fanor-carousel-loader--shimmer .fanor-carousel-loader__compatibility,
.fanor-carousel-loader--shimmer .fanor-carousel-loader__line,
.fanor-carousel-loader--shimmer .fanor-carousel-loader__price,
.fanor-carousel-loader--shimmer .fanor-carousel-loader__rating,
.fanor-carousel-loader--shimmer .fanor-carousel-loader__button {
	background-image: linear-gradient(
		90deg,
		var(--fcs-base) 0%,
		var(--fcs-brillo) 50%,
		var(--fcs-base) 100%
	);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: fanor-carousel-shimmer 1.4s linear infinite;
}

@keyframes fanor-carousel-shimmer {
	0%   { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

/* ── Responsive: las mismas cifras que el carrusel real ────────────────── */

@media ( max-width: 1024px ) {
	.fanor-carousel-loader-wrap {
		--fcs-cols: 3;
		--fcs-gap: 12px;
		--fcs-alto: 400px;
	}
}

@media ( max-width: 767px ) {
	.fanor-carousel-loader-wrap {
		/* 2.2 = dos tarjetas y un trozo de la tercera, para que se lea que la fila
		   sigue. Es el mismo valor que aplica el módulo del asomo. */
		--fcs-cols: 2.2;
		--fcs-gap: 5px;
		--fcs-alto: 340px;
	}
}

/* ── Respeta «reducir movimiento» del sistema ──────────────────────────── */
/* El skeleton se sigue viendo; lo que se apaga es el brillo en marcha. */

@media ( prefers-reduced-motion: reduce ) {
	.fanor-carousel-loader--shimmer .fanor-carousel-loader__image,
	.fanor-carousel-loader--shimmer .fanor-carousel-loader__compatibility,
	.fanor-carousel-loader--shimmer .fanor-carousel-loader__line,
	.fanor-carousel-loader--shimmer .fanor-carousel-loader__price,
	.fanor-carousel-loader--shimmer .fanor-carousel-loader__rating,
	.fanor-carousel-loader--shimmer .fanor-carousel-loader__button {
		background-image: none;
		animation: none;
	}
}