/* Reusable Carousel Component */

.dtec-carousel {
	position: relative;
}

.dtec-carousel__track {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.dtec-carousel__track::-webkit-scrollbar {
	display: none;
}

.dtec-carousel__track > * {
	scroll-snap-align: start;
	flex-shrink: 0;
}

/* Arrow buttons — overhang outside the parent container */
.dtec-carousel__arrow {
	position: absolute;
	top: 127px;
	transform: translateY(-50%);
	display: flex;
	width: 50px;
	height: 50px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 500px;
	background: var(--aubergine-gleam-500, #8F385D);
	border: 2px solid var(--white, #FFF);
	cursor: pointer;
	box-shadow: 0 0 40px 0 rgba(161, 161, 161, 0.25);
	z-index: 2;
	transition: opacity 200ms ease, visibility 200ms ease;
}

.dtec-carousel__arrow--hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.dtec-carousel__arrow--left {
	left: -25px;
}

.dtec-carousel__arrow--right {
	right: -25px;
}

.dtec-carousel__arrow:hover {
	opacity: 0.85;
}

/* Chevron icon inside arrow */
.dtec-carousel__chevron {
	width: 12px;
	height: 22px;
	flex-shrink: 0;
	filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
	.dtec-carousel {
		padding-bottom: 60px;
	}

	.dtec-carousel__arrow {
		top: auto;
		bottom: 0;
		transform: none;
		width: 40px;
		height: 40px;
	}

	.dtec-carousel__arrow--left {
		left: calc(50% - 56px);
	}

	.dtec-carousel__arrow--right {
		right: calc(50% - 56px);
	}
}