.site-hero-video-editor { display: grid; gap: .65rem; min-width: 0; margin: 1rem 0; }
.site-hero-video-editor > label:first-child { display: grid; gap: .45rem; }
.site-hero-video-editor input[type="file"] { width: 100%; max-width: 100%; min-width: 0; }
.site-hero-video-editor video { display: block; width: 100%; max-height: 190px; object-fit: contain; border-radius: 8px; background: #101318; }
.site-hero-video-editor [hidden] { display: none !important; }
.site-hero-video-editor [role="status"]:empty { display: none; }
.site-hero-video-editor [role="status"].is-error { color: #ef6868; }
.site-hero-video-editor .site-hero-video-compression { margin: 0; }
.merchant-site .merchant-site-hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    object-position: center; pointer-events: none; opacity: 0; transition: opacity .8s ease;
}
.merchant-site .merchant-site-hero.site-video-ready > .merchant-site-hero-video { opacity: 1; }
.merchant-site .merchant-site-hero.site-video-without-poster { min-height: clamp(280px, 40vw, var(--site-video-height, 520px)) !important; }
.merchant-site[data-site-hero-height="compact"] { --site-video-height: 380px; }
.merchant-site[data-site-hero-height="large"] { --site-video-height: 680px; }
.merchant-site .merchant-site-hero-video[hidden] { display: none !important; }
.merchant-site[data-site-hero-position="left"] .merchant-site-hero-video { object-position: left center; }
.merchant-site[data-site-hero-position="right"] .merchant-site-hero-video { object-position: right center; }
.merchant-site[data-site-hero-overlay="blur-soft"] .merchant-site-hero-video { filter: blur(4px); transform: scale(1.018); }
.merchant-site[data-site-hero-overlay="blur"] .merchant-site-hero-video { filter: blur(8px); transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
    .merchant-site .merchant-site-hero-video { transition: none; }
}

/* Only the home banner fills the viewport; long content can extend it. */
.merchant-site .merchant-site-hero[data-site-public-section="home"].merchant-site-hero-has-cover {
    min-height: calc(100vh - var(--site-home-header-height, 0px)) !important;
    min-height: calc(100dvh - var(--site-home-header-height, 0px)) !important;
}
.merchant-site .merchant-site-hero[data-site-public-section="home"].merchant-site-hero-has-cover > .merchant-site-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}