.se-hero-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.se-hero-slider__track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.se-hero-slider__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.se-hero-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- FADE variant ---------- */
.se-hero-slider--fade .se-hero-slider__slide {
    opacity: 0;
    transition: opacity var(--se-hs-transition, 800ms) ease;
    z-index: 1;
}
.se-hero-slider--fade .se-hero-slider__slide.is-active {
    opacity: 1;
    z-index: 2;
}

/* ---------- SLIDE variant
   Each slide has one of three states (set via classes):
     .is-prev   -> parked off-screen LEFT  (translateX(-100%))
     .is-active -> visible                (translateX(0))
     .is-next   -> parked off-screen RIGHT (translateX(100%))
   Default (no class) = parked right.
   The .no-transition modifier disables the transition so we can
   instantly snap a slide to a parking position before animating.
   ---------- */
.se-hero-slider--slide .se-hero-slider__slide {
    transform: translate3d(100%, 0, 0);
    transition: transform var(--se-hs-transition, 800ms) cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 1;
}

.se-hero-slider--slide .se-hero-slider__slide.is-prev {
    transform: translate3d(-100%, 0, 0);
}

.se-hero-slider--slide .se-hero-slider__slide.is-active {
    transform: translate3d(0, 0, 0);
    z-index: 2;
}

.se-hero-slider--slide .se-hero-slider__slide.is-next {
    transform: translate3d(100%, 0, 0);
}

.se-hero-slider--slide .se-hero-slider__slide.no-transition {
    transition: none !important;
}

/* ============================================
   GLASSY CONTROLS (matches .glassy-btn1)
   ============================================ */
.se-hero-slider .se-hero-slider__nav,
.se-hero-slider .se-hero-slider__dot {
    --se-hs-glass-bg: var(--se-lg-btn-bg, rgba(255, 255, 255, 0.35));
    --se-hs-glass-bg-hover: var(--se-lg-btn-bg-hover, rgba(255, 255, 255, 0.55));
    --se-hs-glass-blur: var(--se-lg-btn-blur, 24px);
    --se-hs-glass-border: var(--se-lg-btn-border, rgba(255, 255, 255, 0.45));
    --se-hs-glass-edge: var(--se-lg-btn-edge, rgba(255, 255, 255, 0.55));
    --se-hs-glass-sheen: var(--se-lg-btn-sheen, rgba(255, 255, 255, 0.45));
    --se-hs-glass-caustic: var(--se-lg-btn-caustic, rgba(141, 205, 255, 0.20));
    --se-hs-glass-shadow: var(--se-lg-btn-shadow, 0 2px 10px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.08));
    --se-hs-glass-shadow-hover: var(--se-lg-btn-shadow-hover, 0 4px 14px rgba(0, 0, 0, 0.14), 0 12px 32px rgba(0, 0, 0, 0.10));
    --se-hs-glass-inner: var(--se-lg-btn-inner-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(255, 255, 255, 0.16));
}

.se-hero-slider .se-hero-slider__nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid var(--se-hs-glass-border) !important;
    background-color: var(--se-hs-glass-bg) !important;
    background-image:
        radial-gradient(140% 140% at 0% 0%, var(--se-hs-glass-sheen) 0%, rgba(255, 255, 255, 0.14) 34%, transparent 62%),
        radial-gradient(120% 160% at 100% 100%, var(--se-hs-glass-caustic) 0%, transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.10) 15%, rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0.08) 100%) !important;
    box-shadow:
        var(--se-hs-glass-shadow),
        var(--se-hs-glass-inner),
        inset 0 0 0 1px var(--se-hs-glass-edge) !important;
    color: #111 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
    isolation: isolate !important;
    line-height: 1 !important;
    font-size: 0 !important;
}

.se-hero-slider .se-hero-slider__nav::before,
.se-hero-slider .se-hero-slider__nav::after,
.se-hero-slider .se-hero-slider__dot::before,
.se-hero-slider .se-hero-slider__dot::after {
    display: none !important;
    content: none !important;
}

.se-hero-slider .se-hero-slider__nav svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    color: #111 !important;
}

.se-hero-slider .se-hero-slider__nav:hover {
    background-color: var(--se-hs-glass-bg-hover) !important;
    box-shadow:
        var(--se-hs-glass-shadow-hover),
        var(--se-hs-glass-inner),
        inset 0 0 0 1px var(--se-hs-glass-edge) !important;
    transform: translateY(calc(-50% - 1px)) !important;
}

.se-hero-slider .se-hero-slider__nav:active {
    transform: translateY(-50%) !important;
}

.se-hero-slider .se-hero-slider__nav:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
}

.se-hero-slider .se-hero-slider__nav--prev { left: 14px !important; }
.se-hero-slider .se-hero-slider__nav--next { right: 14px !important; }

/* ---------- Glassy dots ---------- */
.se-hero-slider .se-hero-slider__dots {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 16px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.se-hero-slider .se-hero-slider__dots li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.se-hero-slider .se-hero-slider__dot {
    width: 12px !important;
    height: 12px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid var(--se-hs-glass-border) !important;
    background-color: var(--se-hs-glass-bg) !important;
    background-image:
        radial-gradient(140% 140% at 0% 0%, var(--se-hs-glass-sheen) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    box-shadow:
        var(--se-hs-glass-shadow),
        var(--se-hs-glass-inner),
        inset 0 0 0 1px var(--se-hs-glass-edge) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, width 0.25s ease !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

.se-hero-slider .se-hero-slider__dot:hover {
    background-color: var(--se-hs-glass-bg-hover) !important;
}

.se-hero-slider .se-hero-slider__dot.is-active {
    width: 28px !important;
    background-color: var(--se-hs-glass-bg-hover) !important;
    box-shadow:
        var(--se-hs-glass-shadow-hover),
        var(--se-hs-glass-inner),
        inset 0 0 0 1px var(--se-hs-glass-edge) !important;
}

.se-hero-slider .se-hero-slider__dot:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    .se-hero-slider__slide {
        transition: none !important;
    }
}