.video-promo-banner{background-color:var(--bg);color:var(--color);padding-top:var(--pt);padding-bottom:var(--pb);padding-left:var(--section-px);padding-right:var(--section-px);font-family:var(--font-body)}.video-promo-banner__tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;width:100%;min-height:var(--tile-min-h);padding:var(--tile-pt) var(--tile-px) var(--tile-pb);overflow:hidden}.video-promo-banner__media{position:absolute;top:0;right:0;bottom:0;left:0}.video-promo-banner__media picture{display:contents}.video-promo-banner__poster{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--bg-position)}.video-promo-banner__content{z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);width:100%}.video-promo-banner__play{flex:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:var(--play-btn-size);height:var(--play-btn-size);padding:var(--play-btn-padding);border:0;border-radius:var(--play-btn-radius);background-color:var(--accent);color:var(--cta-text-color);cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .3s ease-out}@media(hover:hover){.video-promo-banner__play:hover{background-color:var(--btn-hover-bg)}}.video-promo-banner__play-icon{display:block;width:var(--play-icon-size);height:var(--play-icon-size)}.video-promo-banner__text{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);max-width:var(--text-max);text-align:center}.video-promo-banner__heading{margin:0;font-family:var(--font-heading);font-size:var(--font-heading-size);font-weight:var(--font-heading-weight);line-height:var(--font-heading-lh);color:var(--color)}.video-promo-banner__subheading{margin:0;font-family:var(--font-body);font-size:var(--font-body-size);font-weight:var(--font-body-weight);line-height:var(--font-body-lh);color:var(--color)}.video-promo-banner__subheading-rule{text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:var(--divider-h);text-underline-offset:var(--spacing-sm);text-decoration-skip-ink:none}.video-promo-banner__button{--dev-btn-color: var(--cta-text-color);--dev-btn-bg-hover: var(--btn-hover-bg)}.video-promo-banner__modal{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:var(--modal-px);border:0;background-color:var(--modal-overlay)}.video-promo-banner__modal[open]{display:flex;align-items:center;justify-content:center}.video-promo-banner__modal::backdrop{background-color:transparent}.video-promo-banner__modal[data-modal-state=opening]{animation:video-promo-banner-in var(--modal-in) var(--ease-out) both}.video-promo-banner__modal[data-modal-state=closing]{animation:video-promo-banner-out var(--modal-out) var(--ease-in) both}@keyframes video-promo-banner-in{0%{background-color:transparent}}@keyframes video-promo-banner-out{to{background-color:transparent}}.video-promo-banner__modal[data-modal-state=opening] .video-promo-banner__modal-inner{animation:video-promo-banner-player-in var(--modal-in) var(--ease-out) both}.video-promo-banner__modal[data-modal-state=closing] .video-promo-banner__modal-inner{animation:video-promo-banner-player-out var(--modal-out) var(--ease-in) both}@keyframes video-promo-banner-player-in{0%{opacity:0;transform:scale(.96) translateY(12px)}}@keyframes video-promo-banner-player-out{to{opacity:0;transform:scale(.98)}}.video-promo-banner__modal-inner{position:relative;width:100%;max-width:var(--modal-max-w);max-height:calc(100dvh - (var(--modal-px) * 2) - 44px - var(--spacing-sm));aspect-ratio:16 / 9}.video-promo-banner__video,.video-promo-banner__iframe{display:block;width:100%;height:100%;border:0}.video-promo-banner__modal-close{position:absolute;right:0;bottom:calc(100% + var(--spacing-sm));display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border:0;border-radius:var(--play-btn-radius);background-color:transparent;color:var(--color);cursor:pointer;-webkit-appearance:none;appearance:none}.video-promo-banner__modal-close-icon{display:block;width:24px;height:24px}.video-promo-banner__sound{position:absolute;left:0;bottom:calc(100% + var(--spacing-sm));display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:0;border-radius:var(--play-btn-radius);background-color:var(--accent);color:#333;font:inherit;font-size:var(--font-body-size-m);font-weight:var(--font-body-weight);line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none;animation:video-promo-banner-nudge 2.4s var(--ease-out) 1.2s infinite}.video-promo-banner__sound[hidden]{display:none}.video-promo-banner__sound-icon{display:block;flex:none;width:20px;height:20px}@keyframes video-promo-banner-nudge{0%,70%,to{transform:none}80%{transform:scale(1.06)}90%{transform:scale(.98)}}@media(max-width:768px){.video-promo-banner{padding-top:calc(var(--pt) * var(--pt-scale-m))}.video-promo-banner__tile{padding:var(--tile-p-m);gap:var(--spacing-lg-m)}.video-promo-banner__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.video-promo-banner__media:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(3deg,#0009 -7.85%,#0000 59.45%)}.video-promo-banner__text{max-width:var(--text-max-m)}.video-promo-banner__heading{font-size:var(--font-heading-size-m)}.video-promo-banner__subheading{font-size:var(--font-body-size-m)}.video-promo-banner__button{padding:var(--button-py-m) var(--button-px-m);font-size:var(--font-button-size-m)}}@media(max-width:480px){.video-promo-banner__text{max-width:100%}}.video-promo-banner__play:focus-visible,.video-promo-banner__modal-close:focus-visible,.video-promo-banner__sound:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.video-promo-banner__play:focus:not(:focus-visible),.video-promo-banner__modal-close:focus:not(:focus-visible){outline:none}.video-promo-banner__modal-inner:focus{outline:none}@media(prefers-reduced-motion:reduce){.video-promo-banner,.video-promo-banner *{animation-duration:.01ms!important;transition-duration:.01ms!important}}.video-promo-banner-scroll-lock{overflow:hidden}
/*# sourceMappingURL=/cdn/shop/t/28/assets/dev-video-promo-banner.css.map */