/*
 * Comportamiento visual comun a cualquier carrusel del sitio. No define el
 * tamano de las tarjetas de adentro -eso lo decide quien lo usa, con su
 * propia clase en el riel (segundo parametro de `Carousel\render()`)-, solo
 * el riel que arrastra, las flechas y como se ocultan en cada punta.
 *
 * El "peek" (que en movil siempre se vea un pedacito de la tarjeta
 * siguiente, para dar a entender que se puede mover sin flechas ni barra de
 * scroll) tampoco lo define este archivo: lo logra quien usa el carrusel
 * dandole a sus propias tarjetas un ancho menor al 100% del riel -por
 * ejemplo `flex: 0 0 80%`-, ese ancho asoma el resto de la siguiente sola.
 */

/*
 * Las flechas van MONTADAS sobre el borde del riel -la mediatriz del
 * circulo coincide con el borde del carrusel, mitad adentro y mitad
 * afuera-, no al costado ocupando su propio espacio: por eso el
 * contenedor no reserva ningun hueco para ellas (sin `gap`, sin
 * `display:flex` de por medio) y el riel de adentro ocupa el 100% del
 * ancho disponible.
 */
.ace-carousel {
	position: relative;
	min-width: 0;
}

.ace-carousel__track {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/*
	 * Dedo: horizontal mueve el riel (scroll nativo del propio riel) y vertical
	 * sigue de largo hacia la pagina (C08, correcciones del 21/09/2026). Antes
	 * decia solo `pan-x`, que le prohibe al navegador cualquier gesto vertical
	 * que empiece sobre el riel: el dedo apoyado ahi trababa la pagina y habia
	 * que soltar y volver a apoyar fuera del carrusel. `pan-y` solo tampoco
	 * sirve (bloquea el horizontal y lo deja a un manejo por JS que no existe
	 * para touch). Los dos ejes juntos dejan que el navegador reparta cada
	 * gesto segun para donde arranca a moverse.
	 */
	touch-action: pan-x pan-y;
	/* Que el borde del riel no arrastre al "volver atras" del navegador en iOS. */
	overscroll-behavior-x: contain;
	min-width: 0;
	/*
	 * `overflow-x:auto` fuerza a los navegadores a tratar tambien
	 * `overflow-y` como recortado (es la regla del propio CSS: si un eje no
	 * es "visible", el otro deja de serlo aunque no se declare), asi que
	 * cualquier sombra de tarjeta que se salga de su propia caja -como la de
	 * `.ace-product-card`- queda cortada en linea recta arriba y abajo,
	 * "como debajo de una ventana" (Adriano, viendo el carrusel de
	 * "Tambien te puede interesar" en el navegador real). El carrusel de
	 * categorias nunca lo mostro porque sus tarjetas no tienen sombra, solo
	 * fondo gris. Quien usa este carrusel con tarjetas CON sombra debe fijar
	 * esta variable a un valor con lugar de sobra para su sombra mas su
	 * `transform` de hover si tiene (ver `.ace-related-carousel__track` en
	 * `product-detail.css`); el default en 0 no cambia nada para quien no la
	 * necesita.
	 *
	 * `!important` hace falta: cuando este carrusel vive adentro de un
	 * contenedor con la clase "products" (como la seccion "related products"
	 * de WooCommerce), la propia hoja de estilos de WooCommerce trae
	 * `.woocommerce .products ul{padding:0}` -dos clases y una etiqueta, mas
	 * fuerte que una clase sola- y le ganaba a este padding sin que se notara
	 * ningun error (confirmado con Playwright: el padding calculado quedaba
	 * en 0px pese a que la variable de arriba sí tenía el valor correcto).
	 */
	padding-block: var(--ace-carousel-shadow-pad, 0) !important;
	/*
	 * Mismo recorte, ahora en los costados: la primera tarjeta no tiene
	 * ninguna otra tarjeta a su izquierda (ni la ultima a su derecha) que le
	 * "preste" el aire de su sombra, asi que el borde del riel se la corta
	 * ahi tambien (Adriano, mismo carrusel de "Tambien te puede interesar").
	 * Entre tarjetas no hace falta -el `gap` ya les da lugar a las sombras
	 * de las del medio-, solo en las dos puntas.
	 */
	padding-inline: var(--ace-carousel-shadow-pad-inline, 0) !important;
}

/*
 * Sin desvanecido en los bordes (C10, correcciones del 21/09/2026): antes una
 * mascara apagaba de a poco las puntas de cada riel y sobre el fondo blanco
 * se leia como un degradado blanco tapando las tarjetas. Adriano pidio
 * sacarlo de todos los carruseles; no se reemplaza por nada.
 */

.ace-carousel__track::-webkit-scrollbar {
	display: none;
}

.ace-carousel__track.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.ace-carousel__track > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/*
 * Tamano minimo pensado para que se vea bien apoyada sobre el borde: 2.75rem
 * (44px) es el mismo minimo que ya usan los botones tactiles del sitio, y a
 * este tamano el circulo se distingue con claridad tanto sobre el fondo de
 * la pagina como sobre una tarjeta.
 */
.ace-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: -1.375rem;
	border-radius: 999px;
	border: 1.5px solid var(--wp--preset--color--hairline, #e2e1de);
	background: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--contrast, #1c1c1c);
	cursor: pointer;
	padding: 0;
	transition: opacity 0.15s ease-out;
}

.ace-carousel__nav--prev {
	left: 0;
	margin-left: -1.375rem;
}

.ace-carousel__nav--next {
	right: 0;
	margin-right: -1.375rem;
}

.ace-carousel__nav .ace-icon {
	width: 1.35rem;
	height: 1.35rem;
}

/*
 * La flecha "siguiente" se ve desde el primer instante (asume que hay algo
 * para recorrer, lo mas comun) y JS la esconde recien si confirma que no
 * hace falta. La flecha "anterior" es al reves: por defecto arranca
 * escondida -al cargar la pagina siempre se esta al principio del todo, asi
 * que no hay nada hacia atras- y JS la muestra recien cuando confirma que
 * ya no se esta al principio. Bug real (Adriano, probando el carrusel de
 * categorias): con las dos flechas visibles por defecto hasta que JS
 * corriera, la flecha "anterior" se veia superpuesta a la primera tarjeta
 * durante un instante en cada carga, y en escritorio el carrusel entero se
 * veia "como en movil" (sin flechas) hasta que JS terminaba de medir.
 */
.ace-carousel__nav--prev {
	display: none;
}

.ace-carousel.is-scrollable:not(.is-at-start) .ace-carousel__nav--prev {
	display: flex;
}

.ace-carousel.is-at-end .ace-carousel__nav--next,
.ace-carousel.is-not-scrollable .ace-carousel__nav {
	display: none;
}

/*
 * En escritorio las flechas solo se ven al acercar el mouse (o con el
 * teclado, para no esconderle el control a quien navega sin mouse) -pedido
 * de Adriano-. `opacity` y no `display` para que la aparicion/desaparicion
 * sea suave y no interfiera con el calculo de ancho de `display:none` que
 * ya hacen las reglas de arriba.
 */
@media (min-width: 56.1875em) {
	.ace-carousel__nav {
		opacity: 0;
		pointer-events: none;
	}

	.ace-carousel:hover .ace-carousel__nav,
	.ace-carousel:focus-within .ace-carousel__nav {
		opacity: 1;
		pointer-events: auto;
	}
}

/*
 * En pantallas tactiles las flechas estorban mas de lo que ayudan -el
 * arrastre con el dedo ya alcanza-, mismo criterio que el prototipo
 * aprobado (`_project/prototipo/js/main.js`, flechas "opcionales, solo
 * donde el HTML las incluye").
 */
@media ( hover: none ) and ( pointer: coarse ) {
	.ace-carousel__nav {
		display: none !important;
	}
}

/*
 * La regla de arriba depende de que el navegador reporte el dispositivo
 * como tactil (hover:none, pointer:coarse); el modo de simulacion movil de
 * algunas herramientas de desarrollo NO activa esas caracteristicas aunque
 * el ancho de pantalla sea chico -Adriano vio la flecha aparecer un
 * instante en movil antes de que el JS terminara de decidir si hacia falta-.
 * Esta regla la esconde tambien por ancho de pantalla nomas, mismo corte
 * que el resto de la barra de filtros (56.1875em/899px), sin depender de
 * que el dispositivo se identifique como tactil.
 */
@media ( max-width: 56.1875em ) {
	.ace-carousel__nav {
		display: none !important;
	}
}

/*
 * "Reducir movimiento" del sistema: las flechas y el avance automatico
 * mueven el riel de un salto en vez de deslizarlo.
 */
@media ( prefers-reduced-motion: reduce ) {
	.ace-carousel__track {
		scroll-behavior: auto;
	}
}