/* ==========================================================================
   NAYÚ · Carrusel
   La tarjeta no se toca: es la misma que pinta WooCommerce, con su foto, su
   nombre, su precio y su botón. Lo único que cambia es que dejan de estar en
   parrilla y pasan a una tira que se arrastra.
   ========================================================================== */

.nayu-carrusel {
	position: relative;
}

/* La lista deja de ser rejilla. El !important es por WooCommerce, que pinta
   display: grid en el propio bloque con más peso que una clase suelta. */
.nayu-carrusel .wc-block-grid__products {
	display: flex !important;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	/* En pixeles y con !important: WooCommerce pinta su propio hueco en el
	   bloque y se quedaba en 10,7px, demasiado apretado para una tira. */
	gap: 22px !important;
	margin: 0;
	padding: 0;
	list-style: none;
	/* La barra estorba: el asomo de la pieza siguiente ya dice que hay más. */
	scrollbar-width: none;
}

.nayu-carrusel .wc-block-grid__products::-webkit-scrollbar {
	display: none;
}

/* Tres piezas y pico en pantalla grande. El "y pico" es a propósito: una
   pieza cortada a la derecha es lo que hace entender que la tira sigue. */
.nayu-carrusel .wc-block-grid__product {
	/* Con !important: WooCommerce fija el ancho de la tarjeta segun las
	   columnas del bloque (has-4-columns) y ganaba, dejando la pieza a un
	   ancho que no era el del carrusel. */
	flex: 0 0 calc((100% - 44px) / 3.25) !important;
	max-width: none !important;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

/* --- Las flechas ---------------------------------------------------------- */

.nayu-carrusel__flecha {
	position: absolute;
	top: 34%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	color: var(--wp--preset--color--contraste, #1f2420);
	background: var(--wp--preset--color--superficie, #fff);
	border: 1px solid var(--wp--preset--color--arena, #e8decb);
	border-radius: 50%;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--preset--color--contraste, #1f2420) 12%, transparent);
	cursor: pointer;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.nayu-carrusel__flecha:hover,
.nayu-carrusel__flecha:focus-visible {
	transform: scale(1.08);
	border-color: var(--wp--preset--color--verde, #2f4034);
}

.nayu-carrusel__flecha--atras {
	left: -21px;
}

.nayu-carrusel__flecha--adelante {
	right: -21px;
}

/* Mientras el guion no ha montado la tira, las flechas no llevan a ningún
   sitio. Y si nunca monta, la sección se queda como parrilla y sobran. */
.nayu-carrusel:not(.nayu-carrusel--listo) .nayu-carrusel__flecha {
	display: none;
}

/* --- Tableta -------------------------------------------------------------- */

@media (max-width: 900px) {

	.nayu-carrusel .wc-block-grid__product {
		flex: 0 0 calc((100% - 22px) / 2.2) !important;
	}

	/* Con el dedo las flechas sobran, y pegadas al borde de la pantalla
	   estorban más de lo que ayudan. */
	.nayu-carrusel__flecha {
		display: none;
	}
}

/* --- Móvil ---------------------------------------------------------------- */

@media (max-width: 600px) {

	/* La tira llega al borde de la pantalla mientras la primera pieza sigue
	   alineada con el texto, igual que el carrusel de familias. */
	.nayu-carrusel .wc-block-grid__products {
		margin-inline: calc(var(--wp--style--root--padding-left, 24px) * -1);
		padding-inline: var(--wp--style--root--padding-left, 24px);
	}

	.nayu-carrusel .wc-block-grid__product {
		flex: 0 0 72% !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nayu-carrusel__flecha {
		transition: none;
	}

	.nayu-carrusel__flecha:hover {
		transform: none;
	}
}