/*
 * La Galga Gris · section-bestsellers-carousel.css
 * Carrusel snap horizontal con controles, progress bar y máscara fade.
 */

.lgg-bestsellers__head {
	margin-bottom: var(--sp-6);
}

.lgg-pcard-carousel {
	position: relative;
	margin-top: var(--sp-4);
}

.lgg-pcard-carousel__viewport {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
	margin-inline: calc(var(--container-pad-x) * -1);
	padding-inline: var(--container-pad-x);
}

.lgg-pcard-carousel__track {
	display: flex;
	gap: var(--sp-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-block: var(--sp-3);
	scrollbar-width: none;
}
.lgg-pcard-carousel__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
	.lgg-pcard-carousel__track { scroll-behavior: auto; }
}

.lgg-pcard-carousel__slide {
	flex: 0 0 auto;
	width: 76%;
	scroll-snap-align: start;
}
@media (min-width: 640px)  { .lgg-pcard-carousel__slide { width: 44%; } }
@media (min-width: 900px)  { .lgg-pcard-carousel__slide { width: 30%; } }
@media (min-width: 1280px) { .lgg-pcard-carousel__slide { width: 23%; } }

/* ── Controles ──────────────────────────────────────────────────── */
.lgg-pcard-carousel__controls {
	position: absolute;
	right: 0; top: -64px;
	display: flex;
	gap: var(--sp-2);
	z-index: 3;
}
@media (max-width: 640px) {
	.lgg-pcard-carousel__controls {
		position: static;
		justify-content: center;
		margin-bottom: var(--sp-3);
	}
}
.lgg-pcard-carousel__btn {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--color-bg-card);
	color: var(--color-ink-primary);
	border: 1px solid var(--color-border-subtle);
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--dur-fast) var(--ease-standard),
				border-color var(--dur-fast) var(--ease-standard),
				transform var(--dur-fast) var(--ease-emphasized);
}
.lgg-pcard-carousel__btn:hover {
	background: var(--color-ink-primary);
	color: var(--color-ink-inverse);
	border-color: var(--color-ink-primary);
}
.lgg-pcard-carousel__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.lgg-pcard-carousel__btn:disabled:hover {
	background: var(--color-bg-card);
	color: var(--color-ink-primary);
	border-color: var(--color-border-subtle);
}

/* ── Progress ───────────────────────────────────────────────────── */
.lgg-pcard-carousel__progress {
	margin-top: var(--sp-4);
	height: 2px;
	background: var(--color-border-subtle);
	border-radius: 2px;
	overflow: hidden;
	max-width: 240px;
	margin-inline: auto;
}
.lgg-pcard-carousel__progress-bar {
	display: block;
	height: 100%;
	background: var(--color-accent);
	width: 25%;
	transition: width var(--dur-base) var(--ease-emphasized);
}

.lgg-bestsellers__cta { margin-top: var(--sp-6); }