.ndw-carousel {
	position: relative;
	width: 100%;
}

.ndw-carousel__viewport {
	width: 100%;
	overflow: hidden;
}

.ndw-carousel .swiper-slide {
	height: auto;
}

/* Two classes on purpose. Elementor's Theme Style buttons rule is
   `.elementor-kit-N button` (0,1,1) and applies to every bare `button` on the
   page, so a single-class default would be repainted with the site button
   background, padding, radius and typography. Widget controls still win because
   `{{WRAPPER}} .ndw-carousel__button` compiles to three classes. */
.ndw-carousel .ndw-carousel__button {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ndw-carousel-nav-size, 42px);
	height: var(--ndw-carousel-nav-size, 42px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ndw-carousel-nav-radius, 50%);
	background: #eef4f2;
	box-shadow: none;
	/* Arrow size used to set only the button box. The glyph is a child element
	   sized by an inherited `font-size` that nothing declared, so enlarging the
	   arrow grew the circle and left the icon at its inherited size. It now scales
	   with the button by default, and the icon-size control overrides the ratio. */
	font-size: var(--ndw-carousel-nav-icon-size, 18px);
	color: var(--e-global-color-primary, #15191e);
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	translate: 0 calc(-50% + var(--ndw-carousel-nav-shift, 0px));
}

/* One rule for all three shapes an arrow can take: the default text glyph, a
   font icon, and the inline SVG Elementor renders for icons. `1em` ties each of
   them to the button's font-size above, so a single control drives all three. */
.ndw-carousel .ndw-carousel__button > span {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
	text-align: center;
	transform: translate(
		calc(-50% + var(--ndw-carousel-nav-icon-offset-x, 0px)),
		calc(-50% + var(--ndw-carousel-nav-icon-offset-y, 0px))
	);
}

.ndw-carousel .ndw-carousel__button > span > i,
.ndw-carousel .ndw-carousel__button > span > svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
}

.ndw-carousel .ndw-carousel__button > span > i::before {
	display: block;
	line-height: 1em;
}

.ndw-carousel .ndw-carousel__button > span > svg {
	fill: currentColor;
}

.ndw-carousel__button--previous {
	left: var(--ndw-carousel-nav-offset, 12px);
}

.ndw-carousel__button--next {
	right: var(--ndw-carousel-nav-offset, 12px);
}


/* Outside placement reserves side gutters so an arrow never covers a card. */
.ndw-carousel-nav-outside .ndw-carousel {
	padding-inline: calc(42px + var(--ndw-carousel-nav-gutter, 12px));
}

.ndw-carousel-nav-outside .ndw-carousel__button--previous {
	left: 0;
}

.ndw-carousel-nav-outside .ndw-carousel__button--next {
	right: 0;
}

.ndw-carousel__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ndw-carousel__button.swiper-button-disabled {
	cursor: default;
	opacity: 0.35;
}

.ndw-carousel__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	margin-top: 18px;
	gap: 16px;
}

/* The dot stays 8px, but the finger target is 24x24 (WCAG 2.2 target size):
   an invisible hit area around each dot, with 16px gaps so neighbouring areas
   never overlap. Up to 1.0.4 the whole target was the 8px dot. */
.ndw-carousel__pagination .swiper-pagination-bullet {
	position: relative;
	width: 8px;
	height: 8px;
	margin: 0;
	background: var(--e-global-color-text, #4b5563);
	opacity: 0.35;
}

.ndw-carousel__pagination .swiper-pagination-bullet::after {
	position: absolute;
	inset: -8px;
	content: "";
}

.ndw-carousel__pagination .swiper-pagination-bullet-active {
	background: var(--e-global-color-accent, #1f7667);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ndw-carousel__viewport {
		scroll-behavior: auto;
	}
}