:root {
	--font-family: Arial, sans-serif;
	--body-bg: #ffffff;
	--text-color: #111111;
	--heading-color: #111111;
	--paragraph-color: rgba(17, 17, 17, 0.9);

	--swiper-max-width: 1080px;
	--swiper-padding-y: 50px;
	--nav-color: var(--text-color);
	--nav-bg: transparent;
	--nav-border-color: currentColor;
	--nav-border-width: 0px;
	--nav-radius: 999px;
	--nav-button-size: 44px;
	--nav-offset-x: 10px;

	--card-bg: #ffffff;
	--card-border-color: #e5e7eb;
	--card-radius: 24px;
	--card-shadow: none;
	--card-shadow-active: none;

	--image-radius: 18px;
	--image-height: 280px;

	--content-padding-y: 22px;
	--content-padding-x: 22px;
	--heading-size: 1.45rem;
	--paragraph-size: 0.95rem;

	--button-bg: transparent;
	--button-text-color: var(--text-color);
	--button-border-color: currentColor;
	--button-radius: 999px;
	--button-padding-y: 10px;
	--button-padding-x: 20px;
	--button-shadow-hover: none;
}

.e3d-slider {
	font-family: var(--font-family);
	color: var(--text-color);
}

.e3d-slider .swiper {
	width: 100%;
	max-width: var(--swiper-max-width);
	padding-top: var(--swiper-padding-y);
	padding-bottom: var(--swiper-padding-y);
	overflow: hidden;
}

.e3d-slider .swiper-button-next,
.e3d-slider .swiper-button-prev {
    color: var(--nav-color);
    width: var(--nav-button-size);
    height: var(--nav-button-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-bg);
    border: var(--nav-border-width) solid var(--nav-border-color);
    border-radius: var(--nav-radius);
}

.e3d-slider .swiper-button-next { right: var(--nav-offset-x); }
.e3d-slider .swiper-button-prev { left: var(--nav-offset-x); }

.e3d-slider .swiper-slide {
	position: relative;
	background: var(--card-bg);
	border: 1px solid var(--card-border-color);
	border-radius: var(--card-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--card-shadow);
	flex-shrink: 0 !important;
}

.e3d-slider .swiper-slide-active {
	transform: translate3d(0, 0, 0) !important;
	box-shadow: var(--card-shadow-active);
}

.e3d-slider .card-image {
	position: relative;
	flex: 0 0 var(--image-height);
	background-size: cover;
	background-position: center;
	margin: 18px 18px 0 18px;
	border-radius: var(--image-radius);
	overflow: hidden;
}

.e3d-slider .card-content {
	position: relative;
	padding: var(--content-padding-y) var(--content-padding-x);
	color: inherit;
	z-index: 1;
	text-shadow: none;
}

.e3d-slider .card-content h2 {
	font-size: var(--heading-size);
	line-height: 1.25;
	margin-bottom: 10px;
	letter-spacing: -0.01em;
	color: var(--heading-color);
}

.e3d-slider .card-content p {
	font-size: var(--paragraph-size);
	opacity: 0.9;
	margin-bottom: 18px;
	color: var(--paragraph-color);
}

.e3d-slider .e3d-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--button-bg);
	color: var(--button-text-color);
	padding: var(--button-padding-y) var(--button-padding-x);
	border: 1px solid var(--button-border-color);
	border-radius: var(--button-radius);
	cursor: pointer;
	font-size: 0.92rem;
	text-decoration: none;
	box-shadow: none;
}

.e3d-slider .e3d-btn:hover {
	filter: none;
	box-shadow: var(--button-shadow-hover);
}

/* Keep slides visible in editor to avoid empty state before init */
.e3d-slider .e3d-mySwiper .swiper-slide { opacity: 0; visibility: hidden; pointer-events: none; }
.e3d-slider .e3d-mySwiper .swiper-slide.swiper-slide-prev,
.e3d-slider .e3d-mySwiper .swiper-slide.swiper-slide-active,
.e3d-slider .e3d-mySwiper .swiper-slide.swiper-slide-next { opacity: 1; visibility: visible; pointer-events: auto; }