/* ---------- Config for white background ---------- */
.wl-slider {
	--accent: #000;
	--muted: rgba(0,0,0,.25);
	--dot-h: 4px;
	--gap: 18px;
	--radius: 12px;
	--easing: cubic-bezier(.2,.7,.2,1);
	position: relative;
	max-width: 1100px;
	margin-inline: auto;
	overflow: hidden;
}

/* ---------- Slides ---------- */
.wl-track {
	display: flex;
	transition: transform 600ms var(--easing);
	will-change: transform;
}

.wl-slide {
	flex: 0 0 100%;
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
}

.wl-img {
	width: 100%;
	height: 500px !important;
	object-fit: cover !important;
	display: block;
	border-radius: 12px;
}

/* Bottom-left cut */
.crop-bl {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 80%);
}

/* ---------- Navigation (dashed bar with fill) ---------- */
.wl-nav {
	display: flex;
	align-items: center;
	gap: var(--gap);
	margin-top: 14px;
}
.wl-dot {
	position: relative;
	flex: 1 1 0;
	height: var(--dot-h);
	background: var(--muted);
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: pointer;
	padding: 0;
}
.wl-dot:focus-visible {
	outline: 2px solid #6aa8ff;
	outline-offset: 2px;
}

/* filling overlay */
.wl-dot::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 0%;
	background: var(--accent);
}
.wl-dot.is-active::before {
	animation: wl-fill var(--itv, 4500ms) linear forwards;
}
@keyframes wl-fill {
	from { width: 0% }
	to { width: 100% }
}