.hhb-hero {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #0a0a0a;
    box-sizing: border-box;
    line-height: 0;
    font-size: 0;
    border: 0;
}

.hhb-hero * { box-sizing: border-box; }

.hhb-media {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    vertical-align: top;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.hhb-single.hhb-sizing-auto { height: auto; }
.hhb-single.hhb-sizing-auto .hhb-media { height: auto; object-fit: contain; }
.hhb-single.hhb-sizing-custom { height: var(--hhb-height-desktop); }

.hhb-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
}
.hhb-stage.is-dragging { cursor: grabbing; }

.hhb-slider.hhb-sizing-custom { height: var(--hhb-height-desktop); }

/* Natural-height slides are sized by the active media itself. This avoids a
   calculated container becoming taller than the artwork and creating bands. */
.hhb-slider.hhb-sizing-auto { height: auto; }
.hhb-slider.hhb-sizing-auto .hhb-stage { height: auto; min-height: 0; }
.hhb-slider.hhb-sizing-auto .hhb-slide { height: 100%; }
.hhb-slider.hhb-sizing-auto .hhb-slide.is-active {
    position: relative;
    inset: auto;
    height: auto;
}
.hhb-slider.hhb-sizing-auto .hhb-slide.is-active .hhb-media {
    height: auto !important;
    object-fit: contain;
}

.hhb-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transform: translate3d(100%,0,0);
    will-change: transform,opacity;
    pointer-events: none;
    background: #0a0a0a;
}
.hhb-slide.is-active {
    z-index: 2;
    opacity: 1;
    transform: translate3d(0,0,0);
    pointer-events: auto;
}
.hhb-slide.is-prev,
.hhb-slide.is-next { z-index: 1; opacity: 1; }

.hhb-sizing-auto .hhb-slide .hhb-media { object-fit: contain; }
.hhb-sizing-custom .hhb-slide .hhb-media { object-fit: cover; }

.hhb-hero.is-animating .hhb-slide {
    transition: transform var(--hhb-transition) cubic-bezier(.22,.61,.36,1),
                opacity var(--hhb-transition) ease,
                filter var(--hhb-transition) ease;
}
.hhb-hero[data-hhb-effect="fade"].is-animating .hhb-slide { transform: translate3d(0,0,0); }
.hhb-hero[data-hhb-effect="zoom_fade"].is-animating .hhb-slide { transform: translate3d(0,0,0) scale(1.035); }
.hhb-hero[data-hhb-effect="zoom_fade"].is-animating .hhb-slide.is-active { transform: translate3d(0,0,0) scale(1); }
.hhb-hero.is-manual-drag .hhb-slide { transition: none !important; }
.hhb-hero.is-manual-drag .hhb-slide.is-active,
.hhb-hero.is-manual-drag .hhb-slide.is-prev,
.hhb-hero.is-manual-drag .hhb-slide.is-next { opacity: 1; }
.hhb-hero.is-manual-settle .hhb-slide {
    transition: transform var(--hhb-transition) cubic-bezier(.22,.61,.36,1),
                opacity var(--hhb-transition) ease !important;
}

.hhb-click-target {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.hhb-click-target:focus-visible { outline: 3px solid currentColor; outline-offset: -4px; }
.hhb-slide .hhb-click-target { z-index: 4; }
.hhb-slider .hhb-click-target { cursor: pointer; }
.hhb-slider .hhb-click-target:active,
.hhb-slider .hhb-stage.is-dragging .hhb-click-target { cursor: grabbing; }

@media (max-width: 1024px) {
    .hhb-single.hhb-sizing-custom,
    .hhb-slider.hhb-sizing-custom { height: var(--hhb-height-tablet); }
}

@media (max-width: 767px) {
    .hhb-single.hhb-sizing-custom,
    .hhb-slider.hhb-sizing-custom { height: var(--hhb-height-mobile); }

    .hhb-hero {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        /* Overlap tiny theme/Elementor section seams without altering artwork. */
        margin-top: -2px !important;
        margin-bottom: -2px !important;
        border: 0 !important;
        outline: 0 !important;
    }

    /* When a solid bar is detected inside an uploaded image, JS crops the baked-in
       canvas space. This now works for both natural and custom-height mobile heroes. */
    .hhb-media.hhb-mobile-trimmed {
        max-width: none !important;
    }
    .hhb-sizing-auto .hhb-media.hhb-mobile-trimmed {
        height: auto !important;
        object-fit: contain !important;
    }
    .hhb-media.hhb-mobile-trimmed-custom {
        max-width: none !important;
        margin: 0 !important;
    }
}

@supports (width: 100dvw) {
    @media (max-width: 767px) {
        .hhb-hero {
            width: 100dvw !important;
            max-width: 100dvw !important;
            margin-left: calc(50% - 50dvw) !important;
            margin-right: calc(50% - 50dvw) !important;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .hhb-hero,
    .hhb-slide { transition: none !important; }
    .hhb-stage { scroll-behavior: auto; }
}