.zpt-storefront-hero{--zpt-hero-text: var(--zpt-component-primary-contrast);--zpt-hero-accent: var(--zpt-component-primary);--zpt-hero-accent-text: var(--zpt-component-primary-contrast);--zpt-hero-radius: var(--zpt-component-button-radius);--zpt-hero-content-width: 420px;--zpt-hero-page-padding: var(--page-margin, 24px);--zpt-hero-content-gap: 12px;--zpt-hero-bottom-space: 76px;--zpt-hero-title-size: clamp(1.5rem, 2.5vw, 2.5rem);--zpt-hero-button-size: .875rem;--zpt-hero-control-size: 40px;--zpt-hero-control-offset: 16px;--zpt-hero-control-bg: rgb(0 0 0 / .3);--zpt-hero-thumb-width: 64px;--zpt-hero-thumb-height: 40px;--zpt-hero-thumb-gap: 6px;--zpt-hero-thumb-padding: 6px;--zpt-hero-thumb-radius: 8px;--zpt-hero-nav-bg: rgb(0 0 0 / .3);--zpt-hero-nav-border: rgb(255 255 255 / .2);--zpt-hero-overlay-opacity: .15;--zpt-hero-transition: .2s ease;--zpt-hero-slide-transition: .4s ease;position:relative;isolation:isolate;overflow:hidden;width:100%;background:#111;color:var(--zpt-hero-text)}.zpt-storefront-hero--height-1{height:clamp(300px,34vw,420px)}.zpt-storefront-hero--height-2{height:clamp(360px,40vw,500px)}.zpt-storefront-hero--height-3{height:clamp(430px,47vw,620px)}.zpt-storefront-hero--height-4{height:clamp(500px,55vw,740px)}.zpt-storefront-hero--height-5{height:clamp(580px,63vw,860px)}.zpt-storefront-hero__slide{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--zpt-hero-slide-transition),visibility var(--zpt-hero-slide-transition)}.zpt-storefront-hero__slide.is-active{opacity:1;visibility:visible;pointer-events:auto}.zpt-storefront-hero__image{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}.zpt-storefront-hero__overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(90deg,rgb(0 0 0 / var(--zpt-storefront-hero-overlay-opacity)),transparent 65%);pointer-events:none}.zpt-storefront-hero__content{width:100%;max-width:var(--page-width, 1200px);margin-inline:auto;padding-inline:var(--zpt-hero-page-padding);padding-bottom:var(--zpt-hero-bottom-space)}.zpt-storefront-hero__content-inner{display:flex;flex-direction:column;align-items:flex-start;width:min(100%,var(--zpt-hero-content-width));gap:var(--zpt-hero-content-gap)}.zpt-storefront-hero__heading{margin:0;color:inherit;font-size:var(--zpt-hero-title-size);font-weight:700;line-height:1.1;text-wrap:balance}.zpt-storefront-hero__button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 18px;gap:8px;border:1px solid transparent;border-radius:var(--zpt-component-button-radius);background:var(--zpt-component-primary);color:var(--zpt-component-primary-contrast);font-size:var(--zpt-hero-button-size);font-weight:600;line-height:1;text-decoration:none;transition:transform var(--zpt-hero-transition),opacity var(--zpt-hero-transition),filter var(--zpt-hero-transition)}.zpt-storefront-hero__button:hover{transform:translateY(-1px);filter:brightness(1.05)}.zpt-storefront-hero__button:active{transform:translateY(0)}.zpt-storefront-hero__arrow{position:absolute;z-index:5;top:50%;display:grid;place-items:center;width:var(--zpt-hero-control-size);height:var(--zpt-hero-control-size);padding:0;border:1px solid var(--zpt-hero-nav-border);border-radius:50%;background:var(--zpt-hero-control-bg);color:#fff;cursor:pointer;transform:translateY(-50%);transition:background var(--zpt-hero-transition)}.zpt-storefront-hero__arrow:hover{background:#00000080}.zpt-storefront-hero__arrow--prev{left:var(--zpt-hero-control-offset)}.zpt-storefront-hero__arrow--next{right:var(--zpt-hero-control-offset)}.zpt-storefront-hero__arrow span{font-size:1.5rem;line-height:1}.zpt-storefront-hero__thumbnail-wrap{position:absolute;z-index:5;bottom:var(--zpt-hero-control-offset);left:50%;width:max-content;max-width:calc(100% - (var(--zpt-hero-control-offset) * 2));transform:translate(-50%)}.zpt-storefront-hero__thumbnails{display:flex;align-items:center;justify-content:center;max-width:min(620px,calc(100vw - (var(--zpt-hero-control-offset) * 2)));gap:var(--zpt-hero-thumb-gap);padding:0;overflow-x:auto;scrollbar-width:none}.zpt-storefront-hero__thumbnails::-webkit-scrollbar{display:none}.zpt-storefront-hero__thumbnail{flex:0 0 auto;width:var(--zpt-hero-thumb-width);height:var(--zpt-hero-thumb-height);padding:0;overflow:hidden;border:2px solid transparent;border-radius:var(--zpt-hero-thumb-radius);background:transparent;opacity:.72;cursor:pointer;transition:opacity var(--zpt-hero-transition),border-color var(--zpt-hero-transition),transform var(--zpt-hero-transition)}.zpt-storefront-hero__thumbnail:hover{opacity:1;transform:translateY(-1px)}.zpt-storefront-hero__thumbnail.is-active{border-color:var(--zpt-component-primary);opacity:1}.zpt-storefront-hero__thumbnail-image{display:block;width:100%;height:100%;object-fit:cover}.zpt-storefront-hero__button:focus-visible,.zpt-storefront-hero__arrow:focus-visible,.zpt-storefront-hero__thumbnail:focus-visible{outline:2px solid currentColor;outline-offset:3px}@media(max-width:749px){.zpt-storefront-hero{--zpt-hero-content-width: 260px;--zpt-hero-page-padding: 16px;--zpt-hero-content-gap: 10px;--zpt-hero-bottom-space: 70px;--zpt-hero-title-size: clamp(1.25rem, 5vw, 1.75rem);--zpt-hero-button-size: .8rem;--zpt-hero-control-size: 34px;--zpt-hero-control-offset: 10px;--zpt-hero-thumb-width: 52px;--zpt-hero-thumb-height: 32px;--zpt-hero-thumb-gap: 4px;--zpt-hero-thumb-padding: 5px;--zpt-hero-thumb-radius: 6px}.zpt-storefront-hero--height-1{height:330px}.zpt-storefront-hero--height-2{height:390px}.zpt-storefront-hero--height-3{height:450px}.zpt-storefront-hero--height-4{height:520px}.zpt-storefront-hero--height-5{height:600px}.zpt-storefront-hero__slide{align-items:flex-end}.zpt-storefront-hero__content{padding-bottom:var(--zpt-hero-bottom-space)}.zpt-storefront-hero__overlay{background:linear-gradient(0deg,rgb(0 0 0 / var(--zpt-storefront-hero-overlay-opacity)),transparent 65%)}.zpt-storefront-hero__button{min-height:38px;padding:9px 14px}.zpt-storefront-hero__arrow span{font-size:1.3rem}}@media(prefers-reduced-motion:reduce){.zpt-storefront-hero{--zpt-hero-transition: 0ms;--zpt-hero-slide-transition: 0ms}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/zpt-storefront-hero.css.map */