/* Transición de selección de colección (compartida: carrusel de /shop y tarjetas
   "Explora más colecciones" del showcase). Antes vivía en shop-carousel.css. */

/* ============================================================
   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%; }


/* Tarjetas que no son del carrusel (showcase): la imagen ocupa el clon entero. */
.shop-select__card > img, .shop-select__card .estilo-showcase__oimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Tarjetas que conservan su clase en el clon (data-ghost-class): "Explora más
   colecciones" del showcase (.estilo-showcase__ocard) y de la tienda (.hmt-ocard).
   Durante la animación el clon va SIN texto (etiqueta, nombre, "Explorar"): solo
   foto y velo. Así nada se encima ni se rompe al escalar, y la propia
   `transition` de la tarjeta no pisa la del FLIP. */
.shop-select .shop-select__card.estilo-showcase__ocard,
.shop-select .shop-select__card.hmt-ocard {
	position: fixed;
	display: block;
	margin: 0;
	min-height: 0;
	max-width: none;
	aspect-ratio: auto;
	border: 0;
	transition:
		transform 0.66s cubic-bezier(0.16, 0.84, 0.24, 1),
		box-shadow 0.66s ease;
}
.shop-select .shop-select__card.estilo-showcase__ocard::after { display: none; }
.shop-select .shop-select__card.estilo-showcase__ocard > .estilo-showcase__otag,
.shop-select .shop-select__card.estilo-showcase__ocard > .estilo-showcase__obody,
.shop-select .shop-select__card.hmt-ocard > .hmt-ocard__tag,
.shop-select .shop-select__card.hmt-ocard > .hmt-ocard__in,
.shop-select .shop-select__card.hmt-ocard > .hmt-ocard__body { display: none; }
/* La foto cubre el clon entero (en la tienda la tarjeta original la lleva arriba
   y el texto abajo; aquí ya no hay texto). */
.shop-select .shop-select__card.hmt-ocard > img,
.shop-select .shop-select__card.hmt-ocard > .hmt-ocard__ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.shop-select__scrim,
	.shop-select__card,
	.shop-select__bar { transition: none; }
}