/**
 * Shop (/shop) — escenario tonal + carrusel de colecciones.
 *
 * Dos piezas que van juntas:
 *   1. `.shop-stage`: envuelve intro + carrusel + quiz. El tono de la colección
 *      activa tiñe TODO el bloque (no solo el carrusel), así la página se lee
 *      como una sola superficie continua en vez de tres franjas cortadas.
 *   2. `.shop-carousel`: pista con scroll-snap nativo y bucle infinito. El
 *      ancho de tarjeta es fluido (clamp + vw) para aprovechar el espacio real
 *      del viewport en desktop, no un ancho fijo de 380px.
 */

/* ============================================================
   1. Escenario tonal
   ============================================================ */

.shop-stage {
	position: relative;
	isolation: isolate;
	overflow: clip; /* las manchas difuminadas no deben generar scroll lateral */

	/* Valores por defecto (Amber Coast). El JS los reescribe con la colección
	   activa; sin JS la página se queda en un tono coherente igualmente. */
	--sc-tone: #BD8C42;
	--sc-tone-dark: #5B4729;
	--sc-tone-soft: #F4E8D7;
	--sc-tone-glow: #D1A86B;

	background: var(--wp--preset--color--white, #fff);
}

/* Sin costura arriba ni abajo: el blockGap por defecto de WP dejaba una banda
   blanca entre el escenario y el cierre oscuro que se leía como espacio muerto
   y rompía la continuidad que da todo el sentido al fondo tonal. */
.shop-stage { margin-block: 0; }
.shop-stage + * { margin-block-start: 0; }

.shop-stage__ambient {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Lavado plano de tono: es lo que da continuidad de arriba abajo. Se anima el
   `background-color` (los degradados no son animables) y el degradado va en la
   máscara, que sí puede quedarse fija. */
.shop-stage__wash {
	position: absolute;
	inset: 0;
	background-color: var(--sc-tone-soft);
	opacity: 0.9;
	transition: background-color 0.8s ease;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 46%, #000 100%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 46%, #000 100%);
}

.shop-stage__blob {
	position: absolute;
	width: clamp(280px, 42vw, 620px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	filter: blur(72px);
	background-color: var(--sc-tone);
	transition: background-color 0.8s ease, transform 1s cubic-bezier(0.22, 0.8, 0.28, 1);
	will-change: background-color, transform;
}
.shop-stage__blob--a { top: 4%;  left: -6%;  opacity: 0.30; }
.shop-stage__blob--b { top: 34%; right: -8%; opacity: 0.24; background-color: var(--sc-tone-dark); }
.shop-stage__blob--c { bottom: -6%; left: 32%; opacity: 0.26; background-color: var(--sc-tone-glow, var(--sc-tone)); }

/* Las franjas internas ya no llevan color propio: el color lo pone el
   escenario. Solo se mantienen por encima del fondo. */
.shop-stage__intro,
.shop-stage__quiz {
	position: relative;
	z-index: 1;
	background: transparent;
}

/* El bloque del quiz sí necesita algo de cuerpo para no perderse: una tarjeta
   translúcida que deja pasar el tono de fondo. */
.shop-stage__quiz > :where(h2, p, .wp-block-buttons) {
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	.shop-stage__wash,
	.shop-stage__blob { transition: none; }
}

/* ============================================================
   2. Carrusel
   ============================================================ */

.shop-carousel {
	position: relative;
	z-index: 1;

	/* Ancho de tarjeta fluido: móvil muestra una tarjeta con "peek" de la
	   siguiente; desktop escala con el viewport hasta 460px. */
	--card-w: clamp(240px, 74vw, 320px);
	--card-gap: 18px;
}

@media (min-width: 700px) {
	.shop-carousel { --card-w: clamp(300px, 32vw, 400px); --card-gap: clamp(18px, 2vw, 28px); }
}
@media (min-width: 1100px) {
	.shop-carousel { --card-w: clamp(340px, 26vw, 460px); --card-gap: clamp(22px, 2vw, 34px); }
}

/* El viewport rompe el ancho constreñido del grupo y ocupa la pantalla
   completa: en desktop se ven las tarjetas vecinas a ambos lados en vez de
   dos columnas de vacío. */
.shop-carousel__viewport {
	position: relative;
	width: 100vw;
	max-width: 100%;
	margin-inline: calc(50% - 50vw);
	/* Con overflow-x != visible el navegador calcula overflow-y como 'auto'
	   aunque se escriba 'visible': se declara 'hidden' y se compensa con
	   padding para que la sombra elevada de la tarjeta activa no se corte. */
	overflow-y: hidden;
	padding: 1.75rem 0 2.5rem;
}

/* --- Sin JS: carrusel de scroll nativo (sigue siendo usable) --- */
.shop-carousel:not(.is-js) .shop-carousel__viewport {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}
.shop-carousel:not(.is-js) .shop-carousel__viewport::-webkit-scrollbar { display: none; }
.shop-carousel:not(.is-js) .shop-carousel__track { padding: 0 calc(50% - var(--card-w) / 2); }
.shop-carousel:not(.is-js) .shop-carousel__slide { scroll-snap-align: center; }

/* --- Con JS: motor por transformación --- */
.shop-carousel.is-js .shop-carousel__viewport {
	overflow-x: hidden;
	cursor: grab;
	/* El gesto horizontal es nuestro; el vertical se lo queda la página, así
	   que en móvil se puede seguir haciendo scroll sobre las tarjetas. */
	touch-action: pan-y;
}
.shop-carousel.is-js .shop-carousel__viewport.is-dragging { cursor: grabbing; }

.shop-carousel__track {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--card-gap);
	will-change: transform;
}
/* Mientras se arrastra, los enlaces no deben capturar el puntero ni permitir
   selección de texto: era lo que hacía que el gesto se perdiera a mitad. */
.shop-carousel__track.is-dragging {
	user-select: none;
	-webkit-user-select: none;
}
.shop-carousel__track.is-dragging .shop-carousel__card { pointer-events: none; }

/* Salto del bucle (sexta → primera y al revés). Durante ese instante la clase
   `is-active` pasa de una tarjeta a su clon, que está exactamente en el mismo
   sitio: si sus transiciones siguen vivas, ambas animan escala y opacidad a la
   vez y se ve un pulso que parece que el carrusel se traba. Congelarlas hace
   el salto literalmente invisible. */
.shop-carousel__track.is-rebasing,
.shop-carousel__track.is-rebasing .shop-carousel__slide,
.shop-carousel__track.is-rebasing .shop-carousel__card,
.shop-carousel__track.is-rebasing .shop-carousel__img {
	transition: none !important;
}

.shop-carousel__slide {
	flex: 0 0 auto;
	width: var(--card-w);
	transform: scale(0.9);
	opacity: 0.48;
	filter: saturate(0.8);
	transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.28, 1), opacity 0.5s ease, filter 0.5s ease;
}
.shop-carousel__slide img { -webkit-user-drag: none; user-select: none; }
.shop-carousel__slide.is-active {
	transform: scale(1);
	opacity: 1;
	filter: saturate(1);
}
/* Las vecinas inmediatas se leen mejor que el resto: dan sensación de
   profundidad sin competir con la activa. */
.shop-carousel__slide.is-near { opacity: 0.68; transform: scale(0.94); }

/* ---- Tarjeta ---- */
.shop-carousel__card {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--wp--custom--radius--lg, 16px);
	overflow: hidden;
	text-decoration: none;
	background: #1f2a28;
	box-shadow: 0 10px 26px rgba(20, 24, 20, 0.16);
	transition: box-shadow 0.4s ease;
}
.shop-carousel__slide.is-active .shop-carousel__card {
	box-shadow: 0 30px 60px -14px color-mix(in srgb, var(--card-tone, #1f2a28) 55%, transparent), 0 10px 26px rgba(20, 24, 20, 0.22);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.shop-carousel__slide.is-active .shop-carousel__card {
		box-shadow: 0 26px 50px -10px rgba(20, 24, 20, 0.4), 0 10px 26px rgba(20, 24, 20, 0.22);
	}
}

.shop-carousel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}
.shop-carousel__slide.is-active .shop-carousel__img { transform: scale(1.045); }

/* Respaldo si una colección aún no tiene ninguna foto indexada. */
.shop-carousel__card--noimg {
	background: linear-gradient(150deg, var(--card-tone-soft, #eee) 0%, var(--card-tone, #999) 62%, var(--card-tone-dark, #333) 130%);
}
.shop-carousel__card--noimg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	background-size: 160px 160px;
	mix-blend-mode: overlay;
	opacity: 0.5;
	pointer-events: none;
}

.shop-carousel__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(20, 24, 20, 0.9) 0%, rgba(20, 24, 20, 0.3) 48%, rgba(20, 24, 20, 0) 76%);
}
.shop-carousel__card--noimg .shop-carousel__scrim {
	background: linear-gradient(0deg, rgba(20, 24, 20, 0.62) 0%, rgba(20, 24, 20, 0.05) 55%, rgba(20, 24, 20, 0) 74%);
}
.shop-carousel__ring {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	pointer-events: none;
}

.shop-carousel__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(1.15rem, 2.2vw, 1.75rem) clamp(1.1rem, 2vw, 1.6rem);
	color: #fff;
}
.shop-carousel__eyebrow {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.68;
	margin-bottom: 0.5rem;
}
.shop-carousel__name {
	display: block;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(1.35rem, 2.1vw, 1.75rem);
	line-height: 1.15;
	margin-bottom: 0.4rem;
}
.shop-carousel__desc {
	display: block;
	font-size: clamp(0.84rem, 1vw, 0.95rem);
	line-height: 1.45;
	opacity: 0.88;
	margin-bottom: 0.8rem;
	max-width: 30ch;
}
/* Etiqueta y CTA en columnas separadas: en móvil el CTA caía encima y el
   bloque se veía roto. */
.shop-carousel__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
}
/* Etiqueta de estilo, en el tono de la colección: dice de qué va la colección
   de un vistazo, que es lo que se pregunta el usuario en la portada. */
.shop-carousel__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	color: #fff;
	background: color-mix(in srgb, var(--card-tone, #fff) 40%, rgba(255, 255, 255, 0.14));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.shop-carousel__tag::before {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: var(--card-tone-soft, #fff);
	flex: 0 0 auto;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.shop-carousel__tag { background: rgba(255, 255, 255, 0.18); }
}
.shop-carousel__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	font-size: 0.92rem;
	transition: gap 0.2s ease, color 0.2s ease;
}
.shop-carousel__cta span { transition: transform 0.2s ease; }
.shop-carousel__card:hover .shop-carousel__cta,
.shop-carousel__card:focus-visible .shop-carousel__cta {
	gap: 0.75em;
	color: var(--card-tone, var(--wp--preset--color--accent));
}
.shop-carousel__card:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---- Controles ---- */
/* Separados de la tarjeta: pegados, la sombra proyectada de la activa caía
   justo encima de las flechas y los puntos y se veía como una mancha. */
.shop-carousel__controls {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.35rem;
	margin-top: clamp(1rem, 2.4vw, 2rem);
}
.shop-carousel__nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--border, #d9d4c9);
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--text, #222826);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.shop-carousel__nav:hover {
	border-color: var(--sc-tone, var(--wp--preset--color--primary));
	color: var(--sc-tone, var(--wp--preset--color--primary));
	transform: translateY(-1px);
	box-shadow: var(--shadow-warm-sm, 0 6px 22px rgba(74, 56, 41, 0.1));
}
.shop-carousel__nav:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.shop-carousel__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
/* Los puntos inactivos iban en el gris del borde, que sobre el lavado tonal de
   colecciones claras (Calma, Pale sand) desaparecía: parecía que solo había un
   punto. Ahora usan el tono de la colección activa, que siempre contrasta con
   su propio fondo. */
.shop-carousel__dot {
	width: 0.6rem;
	height: 0.6rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--sc-tone, #8c8579) 45%, transparent);
	cursor: pointer;
	transition: width 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.shop-carousel__dot { background: var(--wp--preset--color--border, #d9d4c9); }
}
.shop-carousel__dot:hover { opacity: 0.85; }
.shop-carousel__dot.is-active {
	width: 1.7rem;
	background: var(--dot-tone, var(--wp--preset--color--primary));
}
.shop-carousel__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Sin JS no hay bucle ni estado activo que seguir: los controles se ocultan y
   el usuario navega deslizando la pista (el snap nativo sigue funcionando). */
.shop-carousel:not(.is-js) .shop-carousel__controls { display: none; }
.shop-carousel:not(.is-js) .shop-carousel__slide { opacity: 1; transform: none; filter: none; }

/* ============================================================
   3. Selección: la tarjeta se lleva la pantalla antes de navegar
   ============================================================
   Sirve para dos cosas a la vez: acusar recibo del clic al instante y tapar
   la espera de carga de /shop/{slug}, que no siempre es inmediata. La capa
   se queda puesta hasta que el navegador pinta la página nueva. */

.shop-select {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
}
body.shop-select-open { overflow: hidden; }

.shop-select__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 50%, color-mix(in srgb, var(--sel-tone) 42%, transparent) 0%, transparent 72%),
		color-mix(in srgb, var(--sel-dark) 88%, #0b0f0e);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	backdrop-filter: blur(14px) saturate(1.1);
	opacity: 0;
	transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.shop-select__scrim { background: rgba(16, 20, 19, 0.9); }
}
.shop-select.is-on .shop-select__scrim { opacity: 1; }

/* El clon de la tarjeta. Solo se anima `transform` (FLIP): el navegador no
   rehace layout en ningún fotograma. */
.shop-select__card {
	position: fixed;
	display: block;
	border-radius: var(--wp--custom--radius--lg, 16px);
	overflow: hidden;
	background: #1f2a28;
	transform-origin: center center;
	transition:
		transform 0.66s cubic-bezier(0.16, 0.84, 0.24, 1),
		box-shadow 0.66s ease;
	box-shadow: 0 10px 26px rgba(20, 24, 20, 0.2);
	will-change: transform;
}
.shop-select.is-on .shop-select__card {
	box-shadow:
		0 40px 90px -20px color-mix(in srgb, var(--sel-tone) 70%, transparent),
		0 0 0 1px rgba(255, 255, 255, 0.14);
}
.shop-select__card .shop-carousel__img { transform: scale(1.06); transition: transform 0.9s ease; }
.shop-select.is-on .shop-select__card .shop-carousel__img { transform: scale(1); }

/* Barra de carga inferior en el color de la colección: avanza sola hasta el
   90% y ahí se queda hasta que la página nueva la reemplaza. */
.shop-select__bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, transparent, var(--sel-glow), var(--sel-tone));
	box-shadow: 0 0 14px color-mix(in srgb, var(--sel-glow) 70%, transparent);
	transition: width 2.4s cubic-bezier(0.1, 0.7, 0.2, 1);
}
.shop-select.is-on .shop-select__bar { width: 90%; }

@media (prefers-reduced-motion: reduce) {
	.shop-select__scrim,
	.shop-select__card,
	.shop-select__bar { transition: none; }
	.shop-carousel__viewport { scroll-behavior: auto; }
	.shop-carousel__slide,
	.shop-carousel__img,
	.shop-carousel__nav,
	.shop-carousel__dot,
	.shop-carousel__cta,
	.shop-carousel__cta span {
		transition: none !important;
	}
}