.product-youtube-video{margin-top:1.5rem;margin-bottom:1.5rem}.product-youtube-video__heading{margin:0 0 1rem}.product-youtube-video__frame{position:relative;width:100%;overflow:hidden;border-radius:var(--media-radius, var(--border-radius, .5rem));border:var(--media-border-width, 1px) solid rgba(var(--color-foreground),.08);background-color:rgb(var(--color-foreground))}.product-youtube-video__frame--16-9{aspect-ratio:16 / 9}.product-youtube-video__frame--4-3{aspect-ratio:4 / 3}.product-youtube-video__frame--1-1{aspect-ratio:1 / 1}@supports not (aspect-ratio: 16 / 9){.product-youtube-video__frame{height:0;padding-bottom:56.25%}.product-youtube-video__frame--4-3{padding-bottom:75%}.product-youtube-video__frame--1-1{padding-bottom:100%}}.product-youtube-video__iframe,.product-youtube-video__facade{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.product-youtube-video__facade{display:block;padding:0;margin:0;cursor:pointer;background:transparent;-webkit-appearance:none;appearance:none}.product-youtube-video__poster{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}.product-youtube-video__facade:hover .product-youtube-video__poster,.product-youtube-video__facade:focus-visible .product-youtube-video__poster{transform:scale(1.03)}.product-youtube-video__facade:focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.3rem}.product-youtube-video__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:7rem;height:4.9rem;pointer-events:none;transition:transform .2s ease,opacity .2s ease;opacity:.92}.product-youtube-video__play svg{width:100%;height:100%;display:block;filter:drop-shadow(0 .2rem .6rem rgba(0,0,0,.35))}.product-youtube-video__play-bg{fill:red;transition:fill .2s ease}.product-youtube-video__facade:hover .product-youtube-video__play,.product-youtube-video__facade:focus-visible .product-youtube-video__play{transform:translate(-50%,-50%) scale(1.08);opacity:1}.product-youtube-video--placeholder{padding:1.5rem;border:1px dashed rgba(var(--color-foreground),.4);border-radius:var(--media-radius, var(--border-radius, .5rem));color:rgba(var(--color-foreground),.75);font-size:1.3rem}.product-youtube-video--placeholder p{margin:0}
/*# sourceMappingURL=/cdn/shop/t/5/assets/component-youtube-video.css.map */