/* Aromars: carruseles horizontales (contenedores con la clase aw-carrusel). */

.aw-carrusel {
	position: relative;
}

.aw-carrusel > .fusion-builder-row {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.aw-carrusel > .fusion-builder-row::-webkit-scrollbar {
	display: none;
}

.aw-carrusel > .fusion-builder-row > .fusion-layout-column {
	scroll-snap-align: start;
}

/* Flechas junto al enlace "Ver todo…" del encabezado de la sección. */
.aw-carrusel-nav-fila {
	flex-direction: row !important;
	align-items: center;
	gap: 16px;
}

.aw-carrusel-flechas {
	display: flex;
	gap: 8px;
}

.aw-carrusel-flecha {
	width: 44px;
	height: 44px;
	border-radius: 22px;
	border: 1px solid var(--awb-color7);
	background: transparent;
	color: var(--awb-color8);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.2s, border-color 0.2s;
}

.aw-carrusel-flecha:hover:not(:disabled) {
	border-color: var(--awb-color5);
}

.aw-carrusel-flecha:disabled {
	opacity: 0.35;
	cursor: default;
}

/*
 * Side arrows when there is no header with aw-carrusel-nav. On touch sizes (Avada small and
 * medium) they would eat the width of a card, so the track is swiped and the arrows only
 * appear on desktop.
 */
.aw-carrusel-con-flechas > .aw-carrusel-flecha {
	display: none;
}

@media (min-width: 1025px) {
	.aw-carrusel-con-flechas {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.aw-carrusel-con-flechas > .aw-carrusel-flecha {
		display: flex;
	}

	.aw-carrusel-con-flechas > .fusion-builder-row {
		flex: 1;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aw-carrusel > .fusion-builder-row {
		scroll-behavior: auto;
	}
}