.hero-video{--hero-video-ratio: 480 / 415;--hero-video-toggle-size: 4.4rem;--hero-video-toggle-inset: 1.6rem;--hero-video-scrim-height: 40%;position:relative;overflow:hidden}@media(min-width:1024px){.hero-video{--hero-video-ratio: 16 / 9;--hero-video-max-height: 81rem;--hero-video-toggle-inset: 2.4rem}}.hero-video__media{position:relative;display:block;aspect-ratio:var(--hero-video-ratio);max-height:var(--hero-video-max-height, none);width:100%}.hero-video__video,.hero-video__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.hero-video__controls{position:absolute;right:var(--hero-video-toggle-inset);bottom:var(--hero-video-toggle-inset);display:flex;gap:.8rem}.hero-video__toggle{display:grid;place-items:center;width:var(--hero-video-toggle-size);height:var(--hero-video-toggle-size);padding:0;border:1px solid currentColor;border-radius:50%;background:color-mix(in srgb,var(--color-background-body) 60%,transparent);color:var(--color-text-button-primary);cursor:pointer}.hero-video__toggle .icon{color:inherit}.hero-video__toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.hero-video__toggle[data-paused=false] .hero-video__icon--play,.hero-video__toggle[data-paused=true] .hero-video__icon--pause,.hero-video__toggle[data-muted=true] .hero-video__icon--unmuted,.hero-video__toggle[data-muted=false] .hero-video__icon--muted{display:none}@media(min-width:1024px){.hero-video--under-header .hero-video__media:after{content:"";position:absolute;inset:0 0 auto;height:var(--hero-video-scrim-height);background:linear-gradient(color-mix(in srgb,var(--color-background-body) 70%,transparent),transparent);pointer-events:none}body:has(.hero-video--under-header) #header-spacer{display:none}body:has(.hero-video--under-header) #nav-wrapper{position:absolute}body:has(.hero-video--under-header) #nav-wrapper:is(:not(.header-visible),.reached-top):not(.above-overlay) .main-navigation>.section__wrapper{background:transparent;transition:background .3s ease}body:has(.hero-video--under-header) #nav-wrapper:is(:not(.header-visible),.reached-top):not(.above-overlay) .main-navigation>.section__wrapper:after{border-bottom-color:transparent}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/section-hero-video.css.map */