/**
 * Carosello prodotti: stesso markup/CSS su home e scheda.
 * Lo scroll è sui pulsanti; la barra orizzontale nativa è nascosta.
 */

.dp-product-carousel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dp-space-md);
	margin-bottom: var(--dp-space-lg);
}

.dp-product-carousel__intro {
	min-width: 0;
	flex: 1 1 auto;
}

.dp-product-carousel__nav {
	display: inline-flex;
	flex-shrink: 0;
	gap: var(--dp-space-xs);
}

.dp-product-carousel__nav[hidden] {
	display: none;
}

.dp-product-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--dp-color-neutral) 40%, transparent);
	border-radius: 999px;
	background: var(--dp-color-base);
	color: var(--dp-color-contrast);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.dp-product-carousel__btn:hover,
.dp-product-carousel__btn:focus-visible {
	border-color: var(--dp-color-accent);
	color: var(--dp-color-accent);
}

.dp-product-carousel__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.dp-product-carousel {
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
}

.dp-product-carousel__track {
	overflow: hidden;
	min-width: 0;
	max-width: 100%;
}

.woocommerce .dp-product-carousel__track ul.products.dp-loop,
.woocommerce-page .dp-product-carousel__track ul.products.dp-loop,
.dp-product-carousel__track ul.products.dp-loop {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--dp-space-md);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dp-product-carousel__track ul.products.dp-loop::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.woocommerce .dp-product-carousel__track ul.products.dp-loop > li.product,
.woocommerce-page .dp-product-carousel__track ul.products.dp-loop > li.product,
.dp-product-carousel__track ul.products.dp-loop > li.product {
	flex: 0 0 min(280px, 78vw);
	width: auto;
	max-width: none;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.woocommerce .dp-product-carousel__track ul.products.dp-loop,
	.woocommerce-page .dp-product-carousel__track ul.products.dp-loop,
	.dp-product-carousel__track ul.products.dp-loop {
		gap: var(--dp-space-lg);
	}

	.woocommerce .dp-product-carousel__track ul.products.dp-loop > li.product,
	.woocommerce-page .dp-product-carousel__track ul.products.dp-loop > li.product,
	.dp-product-carousel__track ul.products.dp-loop > li.product {
		flex-basis: min(300px, calc((100% - (3 * var(--dp-space-lg))) / 4));
	}
}