/**
 * MLC Toolkit — Carrusel (motor compartido)
 * ---------------------------------------------------------------------------
 * Lo usan el feed de productos y el carrusel de categorías. El número de slides
 * visibles llega desde JS en `--mlc-per-view`, con un valor inicial en CSS para
 * que el primer pintado ya sea correcto sin esperar al script.
 */

.mlc-carousel {
	position: relative !important;
	width: 100% !important;
	max-width: var(--mlc-container) !important;
	margin-inline: auto !important;
}

.mlc-carousel__viewport {
	overflow: hidden !important;
	width: 100% !important;
	touch-action: pan-y !important;
	cursor: grab !important;
}

.mlc-carousel__viewport:focus-visible {
	outline: 2px solid var(--mlc-color-accent) !important;
	outline-offset: 4px !important;
}

.mlc-carousel__viewport:active {
	cursor: grabbing !important;
}

.mlc-carousel__track {
	display: flex !important;
	gap: var(--mlc-carousel-gap) !important;
	will-change: transform !important;
	transition: transform var(--mlc-transition-slide) !important;
}

.mlc-carousel__slide {
	flex: 0 0 calc((100% - (var(--mlc-per-view, 1) - 1) * var(--mlc-carousel-gap)) / var(--mlc-per-view, 1)) !important;
	min-width: 0 !important;
	/* Evita que el navegador inicie su propio arrastre de imágenes. */
	-webkit-user-drag: none !important;
	user-select: none !important;
}

.mlc-carousel__slide img {
	-webkit-user-drag: none !important;
}

/* Valor inicial de slides visibles antes de que arranque el JS. */
.mlc-carousel--feed .mlc-carousel__track {
	--mlc-per-view: 2 !important;
}

.mlc-carousel--categories .mlc-carousel__track {
	--mlc-per-view: 1 !important;
}

@media (min-width: 601px) {
	.mlc-carousel--feed .mlc-carousel__track {
		--mlc-per-view: 3 !important;
	}

	.mlc-carousel--categories .mlc-carousel__track {
		--mlc-per-view: 2 !important;
	}
}

@media (min-width: 1025px) {
	.mlc-carousel--feed .mlc-carousel__track {
		--mlc-per-view: 4 !important;
	}

	.mlc-carousel--categories .mlc-carousel__track {
		--mlc-per-view: 3 !important;
	}
}

/* --------------------------------------------------------------------------
   Navegación
   -------------------------------------------------------------------------- */
.mlc-carousel__nav {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--mlc-space-lg) !important;
	margin-top: var(--mlc-space-lg) !important;
}

.mlc-carousel__arrow {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 1px solid var(--mlc-color-border) !important;
	background-color: transparent !important;
	color: var(--mlc-color-text) !important;
	cursor: pointer !important;
	transition: border-color var(--mlc-transition), color var(--mlc-transition) !important;
}

.mlc-carousel__arrow:hover:not([disabled]) {
	border-color: var(--mlc-color-text) !important;
}

.mlc-carousel__arrow[disabled] {
	opacity: 0.35 !important;
	cursor: default !important;
}

/* Dots con forma de guion, como en la referencia. */
.mlc-carousel__dots {
	display: flex !important;
	align-items: center !important;
	gap: var(--mlc-carousel-dot-gap) !important;
}

.mlc-carousel__dots[hidden] {
	display: none !important;
}

.mlc-carousel__dot {
	width: var(--mlc-carousel-dot-width) !important;
	height: var(--mlc-carousel-dot-height) !important;
	padding: 0 !important;
	border: 0 !important;
	background-color: var(--mlc-color-border) !important;
	cursor: pointer !important;
	transition: background-color var(--mlc-transition) !important;
}

.mlc-carousel__dot.is-active {
	background-color: var(--mlc-color-text) !important;
}

/* En móvil no hay flechas: solo dots y arrastre. */
@media (max-width: 600px) {
	.mlc-carousel__arrow {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlc-carousel__track {
		transition: none !important;
	}
}