/**
 * Product slider — horizontale scrolling carousel met dezelfde
 * card-styling als de standaard shop (lts-card).
 */

.lts-slider {
	width: 100%;
	margin: 0 0 32px 0;
	position: relative;
}

.lts-slider__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.lts-slider__title {
	font-size: 24px;
	font-weight: 700;
	color: var(--lts-text, #0a212c);
	margin: 0;
	line-height: 1.2;
}

.lts-slider__nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
}

.lts-slider__title:empty {
	display: none;
}

.lts-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--lts-border, #d4e5ee);
	background: #fff;
	color: var(--lts-text, #0a212c);
	cursor: pointer;
	transition: all 0.15s ease;
	padding: 0;
}

.lts-slider__btn:hover:not(:disabled) {
	background: var(--lts-accent, #35a5de);
	border-color: var(--lts-accent, #35a5de);
	color: #fff;
}

.lts-slider__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.lts-slider__btn svg {
	display: block;
}

.lts-slider__viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Compenseer de interne padding van de track zodat de layout niet verschuift */
	margin: -20px 0 -24px;
}

.lts-slider__track {
	display: flex;
	gap: 16px;
	/* Interne padding zodat hover-lift + box-shadow van cards zichtbaar blijven
	   binnen de overflow-clipping van de scroll-container. */
	padding: 20px 0 24px;
	scroll-behavior: smooth;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.lts-slider__track::-webkit-scrollbar {
	display: none;
}

.lts-slider__item {
	flex: 0 0 calc((100% - 48px) / 4); /* 4 zichtbaar, 3 gaps van 16px */
	scroll-snap-align: start;
	min-width: 0;
}

@media (max-width: 1100px) {
	.lts-slider__item {
		flex-basis: calc((100% - 32px) / 3); /* 3 zichtbaar */
	}
}

@media (max-width: 760px) {
	.lts-slider__item {
		flex-basis: calc((100% - 16px) / 2); /* 2 zichtbaar */
	}
}

@media (max-width: 600px) {
	/* Full-bleed: breek de viewport uit z'n (gepadde) container naar de
	   volledige schermbreedte, zodat de product-blokken tot de randen lopen.
	   Werkt ongeacht hoeveel padding de thema-container eromheen heeft. */
	.lts-slider__viewport {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.lts-slider__track {
		/* 16px gutter — gelijk aan de module-brede mobiele padding. */
		padding-left: 16px;
		padding-right: 16px;
		scroll-padding-left: 16px;
	}
	.lts-slider__item {
		flex-basis: calc(90% - 16px); /* 1 card + peek van de volgende */
	}
	.lts-slider__title {
		font-size: 20px;
	}
}

/* Card moet 100% breedte van zijn slot pakken zodat hoogtes uitlijnen */
.lts-slider__item .lts-card {
	width: 100%;
	height: 100%;
	margin: 0;
}