.myew-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.myew-slider__viewport {
	/* IMPORTANT: make it a horizontal scroll container */
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;

	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	/* Optional: hide scrollbar in some browsers */
	scrollbar-width: none; /* Firefox */
}
.myew-slider__viewport::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.myew-slider__track {
	display: flex;
	align-items: stretch;
	gap: 16px;
	/* no transform animation needed anymore */
}

.myew-slide {
	/* JS will set flex-basis to 100% / slidesPerView */
	flex: 0 0 100%;
	box-sizing: border-box;
	scroll-snap-align: start;
}

.myew-slide__grid {
	display: grid;
	gap: 16px;
	align-items: start;

	grid-template-columns: 1fr;
	grid-template-areas:
		"media"
		"title"
		"price"
		"text"
		"list"
		"button"
		"caption";
}

.myew-slide__media { grid-area: media; }
.myew-slide__title { grid-area: title; margin: 0; font-size: 1.2rem; line-height: 1.2; }
.myew-slide__price { grid-area: price; font-size: 1.4rem; font-weight: 700; }
.myew-slide__text  { grid-area: text; opacity: 0.9; }
.myew-slide__list  { grid-area: list; margin: 0; padding-left: 1.1em; }
.myew-slide__button { grid-area: button; }
.myew-slide__caption { grid-area: caption; opacity: 0.9; }

.myew-slide__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Buttons */
.myew-slide__button a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: 10px;
	padding: 10px 14px;
}

/* Arrows + dots */
.myew-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	border: 0;
	cursor: pointer;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	line-height: 38px;
	font-size: 20px;
	background: rgba(0,0,0,0.08);
}

.myew-slider__arrow--prev { left: 10px; }
.myew-slider__arrow--next { right: 10px; }

.myew-slider__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
}

.myew-slider__dot {
	width: 9px;
	height: 9px;
	border-radius: 99px;
	border: 0;
	cursor: pointer;
	background: rgba(0,0,0,0.18);
}

.myew-slider__dot.is-active {
	background: rgba(0,0,0,0.45);
}

/* =========================
   Mode + Variant presets
   ========================= */

/* POSTS: Split */
.myew-slider--posts.myew-variant--split .myew-slide__grid {
	grid-template-columns: 40% 60%;
	grid-template-areas:
		"media title"
		"media text"
		"media button";
}

/* POSTS: Overlay */
.myew-slider--posts.myew-variant--overlay .myew-slide__grid {
	grid-template-columns: 1fr;
	grid-template-areas:
		"media"
		"title"
		"text"
		"button";
}
.myew-slider--posts.myew-variant--overlay .myew-slide__media { position: relative; }
.myew-slider--posts.myew-variant--overlay .myew-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
	border-radius: 12px;
}
.myew-slider--posts.myew-variant--overlay .myew-slide__title,
.myew-slider--posts.myew-variant--overlay .myew-slide__text,
.myew-slider--posts.myew-variant--overlay .myew-slide__button {
	position: relative;
	z-index: 1;
}
.myew-slider--posts.myew-variant--overlay .myew-slide__title,
.myew-slider--posts.myew-variant--overlay .myew-slide__text { color: #fff; }

/* IMAGES: image only */
.myew-slider--images.myew-variant--image .myew-slide__grid { grid-template-areas: "media"; }
.myew-slider--images.myew-variant--image .myew-slide__caption { display: none; }

/* IMAGES: caption below */
.myew-slider--images.myew-variant--caption .myew-slide__grid {
	grid-template-areas:
		"media"
		"caption";
}

/* IMAGES: caption overlay */
.myew-slider--images.myew-variant--overlay .myew-slide__grid {
	grid-template-areas:
		"media"
		"caption";
}
.myew-slider--images.myew-variant--overlay .myew-slide__media { position: relative; }
.myew-slider--images.myew-variant--overlay .myew-slide__caption {
	margin-top: -44px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(0,0,0,0.55);
	color: #fff;
	width: fit-content;
	max-width: 100%;
}

/* PRICING: split */
.myew-slider--pricing.myew-variant--split .myew-slide__grid {
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"title price"
		"text  price"
		"list  button";
}

/* SERVICES: split */
.myew-slider--services.myew-variant--split .myew-slide__grid {
	grid-template-columns: 40% 60%;
	grid-template-areas:
		"media title"
		"media text"
		"media list"
		"media button";
}