.zhhb-banner,
.zhhb-banner * {
    box-sizing: border-box;
}

.zhhb-banner {
    --zhhb-height: var(--zhhb-desktop-height);
    --zhhb-radius: var(--zhhb-desktop-radius);
    --zhhb-gap-x: var(--zhhb-desktop-gap-x);
    --zhhb-mt: var(--zhhb-desktop-mt);
    --zhhb-mb: var(--zhhb-desktop-mb);
    --zhhb-nav-gap-current: var(--zhhb-nav-gap-desktop, 0px);
    --zhhb-nav-fuse-current: var(--zhhb-nav-fuse-desktop, 0px);
    position: relative;
    display: block;
    height: var(--zhhb-height);
    min-height: 1px;
    margin-top: calc(var(--zhhb-mt) + var(--zhhb-nav-gap-current) + var(--zhhb-nav-fuse-current)) !important;
    margin-bottom: var(--zhhb-mb) !important;
    overflow: hidden;
    border-radius: var(--zhhb-radius);
    color: var(--zhhb-text-color, #fff);
    isolation: isolate;
    background: var(--zhhb-bg, transparent);
    outline: none;
    touch-action: pan-y;
}

.zhhb-banner.zhhb-full {
    width: calc(100vw - var(--zhhb-gap-x) - var(--zhhb-gap-x));
    max-width: none !important;
    margin-left: calc(50% - 50vw + var(--zhhb-gap-x)) !important;
    margin-right: 0 !important;
}

.zhhb-banner.zhhb-contained {
    width: auto;
    margin-left: var(--zhhb-gap-x) !important;
    margin-right: var(--zhhb-gap-x) !important;
}

.zhhb-nav-desktop-tight,
.zhhb-nav-desktop-force {
    --zhhb-nav-gap-current: 0px;
    --zhhb-nav-fuse-current: 0px;
}

.zhhb-shadow-soft { box-shadow: 0 14px 38px rgba(15, 23, 42, .12); }
.zhhb-shadow-deep { box-shadow: 0 24px 64px rgba(15, 23, 42, .26); }
.zhhb-shadow-none { box-shadow: none !important; }

.zhhb-viewport,
.zhhb-track,
.zhhb-slide,
.zhhb-slide img {
    width: 100%;
    height: 100%;
}

.zhhb-viewport {
    overflow: hidden;
    border-radius: inherit;
}

.zhhb-track {
    display: flex;
    height: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform var(--zhhb-speed, 600ms) cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.zhhb-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    display: block;
    color: inherit !important;
    text-decoration: none !important;
    overflow: hidden;
    background: var(--zhhb-bg, transparent);
    -webkit-user-drag: none;
}

.zhhb-slide:hover,
.zhhb-slide:focus {
    color: inherit !important;
    text-decoration: none !important;
}

.zhhb-slide img {
    display: block;
    object-fit: var(--zhhb-fit, contain);
    object-position: var(--zhhb-position, center center);
    transform: none;
    -webkit-user-drag: none;
    user-select: none;
}

.zhhb-slide[style*="--zhhb-fit:smart-cover"] img,
.zhhb-fit-smart-cover img { object-fit: cover; }
.zhhb-slide[style*="--zhhb-fit:scale-down"] img,
.zhhb-fit-scale-down img { object-fit: scale-down; }
.zhhb-slide[style*="--zhhb-fit:fill"] img,
.zhhb-fit-fill img { object-fit: fill; }

.zhhb-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.zhhb-overlay-gradient .zhhb-mask { background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,var(--zhhb-overlay)) 100%); }
.zhhb-overlay-solid .zhhb-mask { background: rgba(0,0,0,var(--zhhb-overlay)); }
.zhhb-overlay-vignette .zhhb-mask { background: radial-gradient(circle at 50% 46%, rgba(0,0,0,0) 18%, rgba(0,0,0,var(--zhhb-overlay)) 100%); }
.zhhb-overlay-none .zhhb-mask { display: none; }

.zhhb-caption {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(var(--zhhb-caption-max, 680px), calc(100% - 56px));
    padding: 18px 22px;
    line-height: 1.45;
    color: var(--zhhb-text-color, #fff);
    text-shadow: 0 2px 12px rgba(0,0,0,.30);
    pointer-events: none;
}

.zhhb-caption-glass .zhhb-caption {
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 28px rgba(0,0,0,.15);
}

.zhhb-label {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.22);
    font-size: var(--zhhb-label-size, 12px);
    font-weight: 800;
}

.zhhb-caption strong {
    display: block;
    font-size: var(--zhhb-title-size-desktop, 36px);
    font-weight: 850;
    line-height: 1.15;
}

.zhhb-caption em {
    display: block;
    font-style: normal;
    font-size: var(--zhhb-subtitle-size-desktop, 16px);
    opacity: .94;
}

.zhhb-cta {
    width: fit-content;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    color: #111827;
    background: rgba(255,255,255,.94);
    font-size: var(--zhhb-button-size, 13px);
    font-weight: 850;
    text-shadow: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.zhhb-text-left_bottom .zhhb-caption { left: 22px; bottom: 18px; align-items: flex-start; text-align: left; }
.zhhb-text-right_bottom .zhhb-caption { right: 22px; bottom: 18px; align-items: flex-end; text-align: right; }
.zhhb-text-center .zhhb-caption { left: 50%; top: 50%; transform: translate(-50%, -50%); align-items: center; text-align: center; }
.zhhb-text-left_center .zhhb-caption { left: 22px; top: 50%; transform: translateY(-50%); align-items: flex-start; text-align: left; }
.zhhb-text-right_center .zhhb-caption { right: 22px; top: 50%; transform: translateY(-50%); align-items: flex-end; text-align: right; }

.zhhb-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    transform: translateY(-50%);
    cursor: pointer;
    background: rgba(0,0,0,.34);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.zhhb-arrow span { font-size: 32px; line-height: .8; margin-top: -2px; }
.zhhb-arrow:hover { background: rgba(0,0,0,.56); transform: translateY(-50%) scale(1.04); }
.zhhb-prev { left: 18px; }
.zhhb-next { right: 18px; }

.zhhb-dots {
    position: absolute;
    z-index: 5;
    bottom: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.zhhb-dots-left .zhhb-dots { left: 18px; }
.zhhb-dots-center .zhhb-dots { left: 50%; transform: translateX(-50%); }
.zhhb-dots-right .zhhb-dots { right: 18px; }
.zhhb-dot {
    width: var(--zhhb-dot-desktop, 8px);
    height: var(--zhhb-dot-desktop, 8px);
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(255,255,255,.58);
    transition: width .2s ease, background .2s ease, transform .2s ease;
}
.zhhb-dot.is-active { width: calc(var(--zhhb-dot-desktop, 8px) * 2.7); background: rgba(255,255,255,.96); }

.zhhb-effect-vertical .zhhb-track { display: block; }
.zhhb-effect-vertical .zhhb-slide { height: 100%; min-width: 100%; }
.zhhb-effect-fade .zhhb-track,
.zhhb-effect-zoom .zhhb-track,
.zhhb-effect-flip .zhhb-track,
.zhhb-effect-cards .zhhb-track,
.zhhb-effect-slidefade .zhhb-track,
.zhhb-effect-blur .zhhb-track,
.zhhb-effect-cube .zhhb-track,
.zhhb-effect-coverflow .zhhb-track {
    position: relative;
    display: block;
    transform: none !important;
    perspective: 1200px;
}
.zhhb-effect-fade .zhhb-slide,
.zhhb-effect-zoom .zhhb-slide,
.zhhb-effect-flip .zhhb-slide,
.zhhb-effect-cards .zhhb-slide,
.zhhb-effect-slidefade .zhhb-slide,
.zhhb-effect-blur .zhhb-slide,
.zhhb-effect-cube .zhhb-slide,
.zhhb-effect-coverflow .zhhb-slide {
    position: absolute;
    inset: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--zhhb-speed,600ms) ease, transform var(--zhhb-speed,600ms) ease, filter var(--zhhb-speed,600ms) ease;
}
.zhhb-effect-fade .zhhb-slide.is-active,
.zhhb-effect-zoom .zhhb-slide.is-active,
.zhhb-effect-flip .zhhb-slide.is-active,
.zhhb-effect-cards .zhhb-slide.is-active,
.zhhb-effect-slidefade .zhhb-slide.is-active,
.zhhb-effect-blur .zhhb-slide.is-active,
.zhhb-effect-cube .zhhb-slide.is-active,
.zhhb-effect-coverflow .zhhb-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    filter: none;
}
.zhhb-effect-zoom .zhhb-slide { transform: scale(1.06); }
.zhhb-effect-flip .zhhb-slide { transform: rotateY(16deg) scale(.98); }
.zhhb-effect-cards .zhhb-slide { transform: translateX(34px) scale(.96); }
.zhhb-effect-slidefade .zhhb-slide { transform: translateX(36px); }
.zhhb-effect-blur .zhhb-slide { filter: blur(12px); transform: scale(1.03); }
.zhhb-effect-cube .zhhb-slide { transform: rotateY(42deg); transform-origin: left center; }
.zhhb-effect-coverflow .zhhb-slide { transform: translateX(60px) scale(.9) rotateY(-16deg); }

.zhhb-hide-desktop { display: none !important; }
.zhhb-banner.is-dragging .zhhb-slide { cursor: grabbing; }
.zhhb-single .zhhb-dots,
.zhhb-single .zhhb-arrow { display: none !important; }

@media (max-width: 767px) {
    .zhhb-banner {
        --zhhb-height: var(--zhhb-mobile-height);
        --zhhb-radius: var(--zhhb-mobile-radius);
        --zhhb-gap-x: var(--zhhb-mobile-gap-x);
        --zhhb-mt: var(--zhhb-mobile-mt);
        --zhhb-mb: var(--zhhb-mobile-mb);
        --zhhb-nav-gap-current: var(--zhhb-nav-gap-mobile, 0px);
        --zhhb-nav-fuse-current: var(--zhhb-nav-fuse-mobile, 0px);
    }
    .zhhb-nav-mobile-tight,
    .zhhb-nav-mobile-force {
        --zhhb-nav-gap-current: 0px;
        --zhhb-nav-fuse-current: 0px;
    }
    .zhhb-hide-mobile { display: none !important; }
    .zhhb-hide-desktop { display: block !important; }
    .zhhb-caption { gap: 5px; max-width: calc(100% - 28px); padding: 12px 14px; }
    .zhhb-caption strong { font-size: var(--zhhb-title-size-mobile, 20px); }
    .zhhb-caption em { font-size: var(--zhhb-subtitle-size-mobile, 13px); line-height: 1.4; }
    .zhhb-label { padding: 3px 8px; }
    .zhhb-cta { min-height: 30px; padding: 6px 12px; }
    .zhhb-text-left_bottom .zhhb-caption { left: 8px; bottom: 10px; }
    .zhhb-text-right_bottom .zhhb-caption { right: 8px; bottom: 10px; }
    .zhhb-text-left_center .zhhb-caption { left: 8px; }
    .zhhb-text-right_center .zhhb-caption { right: 8px; }
    .zhhb-arrow { width: 34px; height: 34px; }
    .zhhb-arrow span { font-size: 26px; }
    .zhhb-prev { left: 10px; }
    .zhhb-next { right: 10px; }
    .zhhb-dots { bottom: 10px; gap: 6px; padding: 5px 7px; }
    .zhhb-dots-left .zhhb-dots { left: 10px; }
    .zhhb-dots-right .zhhb-dots { right: 10px; }
    .zhhb-dot { width: var(--zhhb-dot-mobile, 6px); height: var(--zhhb-dot-mobile, 6px); }
    .zhhb-dot.is-active { width: calc(var(--zhhb-dot-mobile, 6px) * 2.5); }
}

@media (min-width: 768px) {
    .zhhb-hide-mobile { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
    .zhhb-track,
    .zhhb-slide,
    .zhhb-dot,
    .zhhb-arrow { transition: none !important; }
}