/* Keep the original hero box and its source image as the no-JS/error fallback. */
.hero-photo #merchas-hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:50% 47%;pointer-events:none;visibility:hidden}
.hero-photo.hero-video-visible #merchas-hero-video{visibility:visible}
/* Keep the source photograph underneath the video, including during loading. */
.hero-photo>img{visibility:visible}
@media(max-width:600px){.hero-photo #merchas-hero-video{object-fit:cover}}
@media(prefers-reduced-motion:reduce){.hero-photo #merchas-hero-video{display:none!important}.hero-photo.hero-video-visible>img{visibility:visible}}

/* Hidden by default and during loading/playback/end; only actual failures reveal it. */
.hero-photo .hero-video-play[hidden]{display:none!important}
.hero-photo .hero-video-play{position:absolute;right:20px;bottom:20px;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;border:1px solid #151713;border-radius:999px;background:#c5f344;color:#151713;font:600 14px/1.2 Manrope,Arial,sans-serif;box-shadow:0 3px 14px #0002;cursor:pointer}
.hero-photo .hero-video-play:focus-visible{outline:3px solid #151713;outline-offset:4px}
.hero-photo .hero-video-notice{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){.hero-photo .hero-video-play{right:14px;bottom:14px}}