/* Slick Carousel Custom Styles */

.slick-slider {
	overflow: hidden;
}
/* 25px between slides = the grid column gap (Figma), so a carousel lines up
   exactly with the grid it replaces. A carousel whose grid has another gap
   sets --slide-gap on itself (e.g. the logo strip's 15px). */
.slick-list {
	margin-left: calc(var(--slide-gap, 1.5625rem) / -2);  /* -12.5px */
	margin-right: calc(var(--slide-gap, 1.5625rem) / -2);
}
.slick-slide {
	margin-left: calc(var(--slide-gap, 1.5625rem) / 2);   /* 12.5px */
	margin-right: calc(var(--slide-gap, 1.5625rem) / 2);
}
/* Slick Slider Custom Settings */
.itemMargin .slick-slide {
	margin-right: .5rem; /* 8px */
	margin-left: .5rem; /* 8px */
}
.itemMargin .slick-list {
	margin-left: -.5rem; /* -8px */
	margin-right: -.5rem; /* -8px */
}
/* Stage padding (mobile): at rest the current slide sits on the layout gutter
   (25px) with 20px between slides and the next slide peeking in through the 25%
   right padding. The section uses .layout-padding0, so .slick-list runs to the
   screen edges and slides travel off-screen on BOTH sides while moving.
   Gutter (25px) > gap (20px) would leave a 5px sliver of the previous slide at
   the left edge at rest, so that strip is clipped until the carousel moves —
   scripts.js toggles .is-sliding (initStagePaddingCarousel). */
.stagePaddingRight .slick-slide {
	margin-left: 1.25rem; /* 20px gap */
	margin-right: 0;
}
.stagePaddingRight .slick-list {
	margin-left: 0;
	margin-right: 0;
	padding-left: calc(var(--mo-layout-padding) - 1.25rem) !important; /* + the slide's 20px = 25px gutter */
	padding-right: 25% !important;
	clip-path: inset(0 0 0 calc(var(--mo-layout-padding) - 1.25rem));
}
.stagePaddingRight.is-sliding .slick-list {
	clip-path: none;
}

/* Slick Dots Styling */
.slick-dots {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 10px;
	margin-top: 30px;
}

.slick-dots li {
	display: block;
	width: 12px;
	height: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slick-dots li button {
	width: 100%;
	height: 100%;
	background: #D9D9D9;
	border: none;
	cursor: pointer;
	text-indent: -999999px;
	border-radius: 50%;
	padding: 0;
}

.slick-dots li.slick-active button {
	background: var(--mo-color-primary);
}