.tf-banner-shell{--tf-banner-inset: var(--tf-banner-inset-desktop, 8px);display:block;padding:var(--tf-banner-inset)}.tf-banner-frame{height:max(400px,calc(var(--tf-banner-height-desktop, 100svh) - var(--tf-banner-inset) * 2));position:relative;overflow:hidden;isolation:isolate;border-radius:var(--tf-banner-radius, 16px);background:#202020}.tf-banner-slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s;color:var(--tf-banner-text, #fff)}.tf-banner-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}.tf-banner-media,.tf-banner-shade,.tf-banner-media picture,.tf-banner-video,.tf-banner-poster,.tf-banner-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.tf-banner-poster,.tf-banner-video{object-fit:cover}.tf-banner-placeholder{fill:#666;background:#202020}.tf-banner-video{opacity:0;transition:opacity .3s}.tf-banner-video.is-playing{opacity:1}.tf-banner-shade{background:rgba(0,0,0,var(--tf-banner-overlay, .25));pointer-events:none}.tf-banner-content{position:relative;height:100%;width:100%;display:grid;align-items:var(--tf-banner-v-desktop, end);justify-items:var(--tf-banner-h-desktop, start);padding:max(90px,var(--tf-banner-padding-desktop, 16px)) var(--tf-banner-padding-desktop, 16px) 48px}.tf-banner-copy{width:100%;max-width:var(--tf-banner-copy-width, 525px)}.tf-banner-copy[data-align-desktop=center]{text-align:center}.tf-banner-copy[data-align-desktop=end]{text-align:right}.tf-banner-eyebrow{font-family:var(--font-body-family);font-size:11px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;color:inherit}.tf-banner-heading{font-family:var(--font-heading-family);font-style:var(--font-heading-style);font-weight:var(--font-heading-weight);font-size:clamp(44px,5.3vw,var(--tf-banner-font-desktop, 75px));line-height:1;letter-spacing:var(--font-heading-letter-spacing);text-transform:var(--font-heading-text-transform);color:inherit;margin:0;overflow-wrap:normal;word-break:normal}.tf-banner-text{font-family:var(--font-body-family);font-size:15px;line-height:1.5;margin-top:18px;color:inherit}.tf-banner-text>:first-child{margin-top:0}.tf-banner-text>:last-child{margin-bottom:0}.tf-banner-buttons{display:flex;flex-wrap:wrap;gap:4px;margin-top:22px}.tf-banner-copy[data-align-desktop=center] .tf-banner-buttons{justify-content:center}.tf-banner-copy[data-align-desktop=end] .tf-banner-buttons{justify-content:end}.tf-banner-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:135px;padding:12px 24px;border-radius:999px;border:1px solid transparent;font-family:var(--font-button-family);font-weight:var(--font-button-weight);font-style:var(--font-button-style);font-size:13px;line-height:1.25;letter-spacing:var(--font-button-letter-spacing);text-decoration:none;text-align:center;transition:background .2s,color .2s}.tf-banner-button--primary{background:#fff;color:#202020;border-color:#fff}.tf-banner-button--secondary{background:transparent;color:inherit;border-color:#fff5}.tf-banner-button--primary:hover{background:#eaeaea;border-color:#eaeaea}.tf-banner-button--secondary:hover{background:#ffffff18;border-color:#fff}.tf-banner-shell :is(button,a):focus-visible{outline:2px solid currentColor;outline-offset:4px}.tf-banner-arrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff66;border-radius:50%;background:#0002;color:#fff;cursor:pointer;opacity:0;transition:opacity .2s}.tf-banner-arrow--previous{left:18px}.tf-banner-arrow--next{right:18px}.tf-banner-arrow svg,.tf-banner-motion svg{width:20px;height:20px}.tf-banner-frame:hover .tf-banner-arrow,.tf-banner-arrow:focus-visible{opacity:1}.tf-banner-pagination{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:4px;z-index:3}.tf-banner-pagination button{width:60px;height:32px;border:0;background:none;padding:14px 0;cursor:pointer}.tf-banner-pagination button:after{content:"";display:block;height:2px;background:#fff6}.tf-banner-pagination button[aria-current=true]:after{background:#fff}.tf-banner-motion{position:absolute;z-index:3;right:16px;bottom:12px;display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff66;border-radius:50%;color:#fff;background:#0002;cursor:pointer}.tf-banner-motion[hidden],.tf-banner-motion .tf-banner-play-icon{display:none}.tf-banner-motion.is-paused .tf-banner-play-icon{display:block}.tf-banner-motion.is-paused .tf-banner-pause-icon{display:none}@media(max-width:749px){.tf-banner-shell{--tf-banner-inset: var(--tf-banner-inset-mobile, 0px)}.tf-banner-frame{height:calc(var(--tf-banner-height-mobile, 100svh) - var(--tf-banner-inset) * 2);border-radius:var(--tf-banner-radius-mobile, 0px)}.tf-banner-content{align-items:var(--tf-banner-v-mobile, end);justify-items:var(--tf-banner-h-mobile, start);padding:max(80px,var(--tf-banner-padding-mobile, 16px)) var(--tf-banner-padding-mobile, 16px) 58px}.tf-banner-copy{max-width:100%;text-align:left}.tf-banner-copy[data-align-mobile=center]{text-align:center}.tf-banner-copy[data-align-mobile=start]{text-align:left}.tf-banner-copy[data-align-mobile=end]{text-align:right}.tf-banner-heading{font-size:clamp(28px,var(--tf-banner-font-mobile, 54px),13.8vw)}.tf-banner-eyebrow{font-size:10px;margin-bottom:10px}.tf-banner-text{font-size:13px;margin-top:14px}.tf-banner-buttons{gap:6px;margin-top:20px}.tf-banner-button{flex:1 1 120px;min-width:0;padding:12px 16px}.tf-banner-pagination{left:14px;right:60px;bottom:8px;transform:none}.tf-banner-pagination button{flex:1;width:auto}.tf-banner-frame:has(.tf-banner-motion[hidden]) .tf-banner-pagination{right:14px}.tf-banner-arrow{display:none}.tf-banner-motion{bottom:10px;right:14px}}@media(prefers-reduced-motion:reduce){.tf-banner-slide,.tf-banner-video,.tf-banner-button,.tf-banner-arrow{transition:none}}body.template-index main>.tf-hero-section:first-child .tf-banner-motion{display:none}@media(max-width:749px){body.template-index main>.tf-hero-section:first-child .tf-banner-pagination{right:14px}}
/*# sourceMappingURL=/cdn/shop/t/106/assets/tf-hero-banners.css.map */