.hero-media--video{position:relative;width:100%;height:100%;aspect-ratio:var(--hero-media-ratio, 1.7777);overflow:hidden}.hero-media__deferred{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.hero-media__video{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;object-fit:cover;border:0}.hero-media__deferred template{display:none}.hero-media__poster{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer;overflow:hidden;pointer-events:none}.hero-media__poster-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.hero-media__deferred[loaded] .hero-media__poster{display:none}.hero-media__poster-button{position:absolute;top:var(--hero-play-y, 50%);left:50%;transform:translate(-50%,calc(-1 * var(--hero-play-y, 50%)));z-index:4;display:flex;align-items:center;justify-content:center;width:7.2rem;height:7.2rem;pointer-events:auto;cursor:pointer;transition:opacity .2s ease}.hero-media__poster-button svg{width:100%;height:100%;filter:drop-shadow(0 0 1.2rem rgba(0,0,0,.35))}.hero-media__poster:hover .hero-media__poster-button{opacity:.8}@media(max-width:768px){.hero-media__poster-button{width:5.4rem;height:5.4rem}}.hero-media__toggle{position:absolute;right:2.4rem;bottom:2.4rem;z-index:4;display:flex;align-items:center;justify-content:center;width:4.8rem;height:4.8rem;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:50%;background-color:#00000073;color:#fff;cursor:pointer;pointer-events:auto;transition:background-color .2s ease,opacity .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hero-media__toggle:hover,.hero-media__toggle:focus-visible{background-color:#000000b3}.hero-media__toggle-icon{display:none;width:2.2rem;height:2.2rem}.hero-media__toggle-icon svg{display:block;width:100%;height:100%}.hero-media__toggle .hero-media__toggle-icon--play{display:block}.hero-media__toggle.is-playing .hero-media__toggle-icon--play{display:none}.hero-media__toggle.is-playing .hero-media__toggle-icon--pause{display:block}.hero-media--click .hero-media__toggle{display:none}.hero-media--click.is-loaded .hero-media__toggle{display:flex}@media(max-width:768px){.hero-media__toggle{right:1.6rem;bottom:1.6rem;width:4.4rem;height:4.4rem}}
/*# sourceMappingURL=/cdn/shop/t/235/assets/component-hero-banner-media.css.map */