.egc-responsive-carousel {
	position: relative;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--egc-gap, 20px);
}

.egc-responsive-carousel > .e-con-inner,
.egc-responsive-carousel > .egc-track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--egc-gap, 20px);
}

.egc-responsive-carousel > .egc-track {
	width: 100%;
	max-width: 100%;
}

.egc-responsive-carousel > .e-con,
.egc-responsive-carousel > .e-con-inner > .e-con,
.egc-responsive-carousel > .egc-track > .e-con {
	flex: 0 0 calc((100% - ((var(--egc-columns, 3) - 1) * var(--egc-gap, 20px))) / var(--egc-columns, 3));
	width: calc((100% - ((var(--egc-columns, 3) - 1) * var(--egc-gap, 20px))) / var(--egc-columns, 3)) !important;
	max-width: calc((100% - ((var(--egc-columns, 3) - 1) * var(--egc-gap, 20px))) / var(--egc-columns, 3)) !important;
	min-width: calc((100% - ((var(--egc-columns, 3) - 1) * var(--egc-gap, 20px))) / var(--egc-columns, 3)) !important;
	align-self: stretch !important;
}

.egc-products-carousel {
	position: relative;
}

.egc-nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.88);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s ease, background 0.2s ease;
}

.egc-nav:hover,
.egc-nav:focus-visible {
	background: rgba(17, 24, 39, 1);
	outline: none;
}

.egc-nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.egc-nav-prev {
	left: 10px;
}

.egc-nav-next {
	right: 10px;
}

@media (max-width: 767px) {
	.egc-responsive-carousel > .e-con-inner,
	.egc-responsive-carousel > .egc-track {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
		-ms-overflow-style: none;
		scrollbar-width: none;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
		width: max-content;
		max-width: none;
	}

	.egc-responsive-carousel > .e-con-inner::-webkit-scrollbar,
	.egc-responsive-carousel > .egc-track::-webkit-scrollbar {
		display: none;
	}

	.egc-responsive-carousel > .e-con,
	.egc-responsive-carousel > .e-con-inner > .e-con,
	.egc-responsive-carousel > .egc-track > .e-con {
		flex: 0 0 calc((100% - ((var(--egc-mobile-slides, 1.15) - 1) * var(--egc-gap, 20px))) / var(--egc-mobile-slides, 1.15)) !important;
		width: calc((100% - ((var(--egc-mobile-slides, 1.15) - 1) * var(--egc-gap, 20px))) / var(--egc-mobile-slides, 1.15)) !important;
		max-width: calc((100% - ((var(--egc-mobile-slides, 1.15) - 1) * var(--egc-gap, 20px))) / var(--egc-mobile-slides, 1.15)) !important;
		min-width: calc((100% - ((var(--egc-mobile-slides, 1.15) - 1) * var(--egc-gap, 20px))) / var(--egc-mobile-slides, 1.15)) !important;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.egc-products-carousel .products,
	.egc-products-carousel ul.products {
		display: flex !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;
		gap: var(--egc-widget-gap, 16px) !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.egc-products-carousel .products::-webkit-scrollbar,
	.egc-products-carousel ul.products::-webkit-scrollbar {
		display: none;
	}

	.egc-products-carousel .products > .product,
	.egc-products-carousel ul.products > li.product {
		flex: 0 0 calc((100% - ((var(--egc-widget-mobile-slides, 1.2) - 1) * var(--egc-widget-gap, 16px))) / var(--egc-widget-mobile-slides, 1.2)) !important;
		width: calc((100% - ((var(--egc-widget-mobile-slides, 1.2) - 1) * var(--egc-widget-gap, 16px))) / var(--egc-widget-mobile-slides, 1.2)) !important;
		max-width: calc((100% - ((var(--egc-widget-mobile-slides, 1.2) - 1) * var(--egc-widget-gap, 16px))) / var(--egc-widget-mobile-slides, 1.2)) !important;
		min-width: calc((100% - ((var(--egc-widget-mobile-slides, 1.2) - 1) * var(--egc-widget-gap, 16px))) / var(--egc-widget-mobile-slides, 1.2)) !important;
		margin: 0 !important;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}

.egc-nav-icon {
	font-size: 20px;
	line-height: 1;
}

@media (min-width: 768px) {
	.egc-nav {
		display: none;
	}
}