/*
 * «Καρουζέλ προϊόντων» widget. The cards come from shop.css; this only
 * lays them out in one scrollable row.
 */

.jdsl-shop.jdsl-carousel {
	max-width: none;
	margin: 0;
	padding: 0;
	--per: var(--per-d, 4);
	--gap: var(--gap-d, 20px);
}

/* Head: title left, "see all" + arrows right */
.jdsl-carousel__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.jdsl-carousel.is-align-center .jdsl-carousel__head {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.jdsl-shop .jdsl-carousel__title {
	margin: 0;
	padding: 0;
	font-family: var(--jd-font);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--jd-black);
}

.jdsl-carousel__tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.jdsl-shop a.jdsl-carousel__all {
	margin-right: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--jd-black);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.jdsl-shop .jdsl-carousel__arrow {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--jd-line);
	border-radius: 50%;
	background: #fff;
	color: var(--jd-black);
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s, opacity .15s;
}

.jdsl-shop .jdsl-carousel__arrow:hover,
.jdsl-shop .jdsl-carousel__arrow:focus-visible {
	border-color: var(--jd-black);
	background: var(--jd-black);
	color: #fff;
}

.jdsl-shop .jdsl-carousel__arrow[disabled] {
	opacity: .35;
	cursor: default;
	background: #fff;
	color: var(--jd-black);
	border-color: var(--jd-line);
}

/* The row */
.jdsl-carousel__viewport {
	position: relative;
}

/*
 * position: relative keeps absolutely positioned bits of the cards (e.g.
 * WooCommerce's .screen-reader-text in prices) inside the scrolling row;
 * otherwise their containing block is outside it, they are not clipped and
 * the cards off screen make the whole page wider (sideways scroll on iOS).
 */
.jdsl-shop.jdsl-carousel ul.products {
	position: relative;
	display: flex !important;
	gap: var(--gap);
	margin: 0 !important;
	padding: 2px 0 4px !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.jdsl-shop.jdsl-carousel ul.products::-webkit-scrollbar {
	display: none;
}

.jdsl-shop.jdsl-carousel ul.products.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

.jdsl-shop.jdsl-carousel ul.products.is-dragging a {
	pointer-events: none;
}

.jdsl-shop.jdsl-carousel ul.products li.product.jdsl-card {
	position: relative;
	flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)) !important;
	scroll-snap-align: start;
}

/* Dots */
.jdsl-carousel__dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 24px;
}

.jdsl-carousel__dots:empty {
	display: none;
}

.jdsl-shop .jdsl-carousel__dot {
	width: 22px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: var(--jd-line);
	cursor: pointer;
	transition: background .2s, width .2s;
}

.jdsl-shop .jdsl-carousel__dot:hover,
.jdsl-shop .jdsl-carousel__dot:focus {
	background: #b5b5b5;
}

.jdsl-shop .jdsl-carousel__dot.is-active {
	width: 34px;
	background: var(--jd-black);
}

.jdsl-carousel__empty {
	padding: 32px;
	border: 1px dashed #ccc;
	border-radius: 8px;
	text-align: center;
	color: #777;
	font-size: 14px;
}

@media (max-width: 1024px) {
	.jdsl-shop.jdsl-carousel {
		--per: var(--per-t, 3);
		--gap: var(--gap-t, 16px);
	}
}

@media (max-width: 767px) {
	.jdsl-shop.jdsl-carousel {
		--per: var(--per-m, 2);
		--gap: var(--gap-m, 12px);
	}

	.jdsl-carousel__head {
		margin-bottom: 14px;
	}

	/* Swipe is the gesture on phones. */
	.jdsl-shop .jdsl-carousel__arrow {
		display: none;
	}

	.jdsl-shop a.jdsl-carousel__all {
		margin-right: 0;
		font-size: 13px;
	}
}

@media (max-width: 767px) {
	/* Centred head without a "see all" link: no empty row under the title. */
	.jdsl-carousel.is-align-center .jdsl-carousel__tools:not(:has(a)) {
		display: none;
	}
}