.feature-explorer{display:grid;grid-template-columns:50px 1fr 1fr;gap:40px;align-items:center;padding-bottom:0}.feature-explorer__nav{display:flex;flex-direction:column;align-items:center}.feature-explorer__view-btn{writing-mode:vertical-rl;transform:rotate(180deg);border:none;background:transparent;cursor:pointer;opacity:.35;transition:.25s ease;text-transform:uppercase;border-left:1px solid;padding:5px 0;height:75px;text-align:center}.feature-explorer__view-btn.is-active{opacity:1}.feature-explorer__visual{position:relative}.feature-explorer__view{display:none}.feature-explorer__view.is-active{display:block}.feature-explorer__image-wrap{position:relative}.feature-explorer__image{width:100%;display:block;height:auto}.feature-explorer__hotspot{position:absolute;width:24px;height:24px;display:flex;justify-content:center;align-items:center;border:none;background:transparent;transform:translate(-50%,-50%);cursor:pointer;z-index:9}.feature-explorer__hotspot:before{content:"";width:50px;height:50px;position:absolute}.feature-explorer__hotspot span{width:24px;height:24px;display:block;border-radius:999px;background:#fff;position:relative;transition:.25s ease}.feature-explorer__hotspot.is-active span{background:#ff6a13}.feature-explorer__hotspot span:before,.feature-explorer__hotspot span:after{content:"";position:absolute;background:#000;left:50%;top:50%;transform:translate(-50%,-50%)}.feature-explorer__hotspot span:before{width:10px;height:2px}.feature-explorer__hotspot span:after{width:2px;height:10px}.feature-explorer__content{position:relative;padding-inline:20px;max-width:500px;width:100%;margin:0 auto}.feature-explorer__content-group{display:block}.feature-explorer__panels{position:relative}.feature-explorer__panel{display:none;animation:featureFade .3s ease}.feature-explorer__panel.is-active{display:block}.feature-explorer__panel-image img{width:100%;height:auto;display:block}.feature-explorer__panel-title{margin:24px 0 12px;font-size:16px;text-transform:uppercase;letter-spacing:.08em}.feature-explorer__panel-text{opacity:.75}.feature-explorer__controls{display:flex;align-items:center;gap:10px;margin-top:20px}.feature-explorer__arrow{border:none;background:transparent;cursor:pointer;padding:15px 0}.feature-explorer__tabs{display:flex;align-items:center;flex:1}.feature-explorer__tab{padding:15px 0;flex:1;cursor:pointer}.feature-explorer__tab span{display:block;width:100%;height:2px;border:none;background:#00000026;transition:.25s ease}.feature-explorer__tab.is-active span{background:#000}.has-feature-open .kt-sticky-add-to-cart,.has-feature-open .woot--bubble-holder,.has-feature-open .kl-teaser-QWti6Q,.kt-sidebar-opened .kl-teaser-QWti6Q{display:none}.has-feature-open .has-feature-open{overflow:hidden}@keyframes featureFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.feature-explorer__mobile-close{display:none}.feature-explorer__controls svg{display:block;width:36px;height:14px}@media screen and (max-width:989px){.feature-explorer{grid-template-columns:1fr;gap:20px}.feature-explorer__nav{flex-direction:row;justify-content:center}.feature-explorer__view-btn{writing-mode:initial;transform:none;height:auto;width:60px;border-left:none;border-bottom:1px solid;font-size:14px}.feature-explorer__content{position:fixed;left:0;right:0;bottom:0;max-height:85vh;background:#fff;z-index:9999;transform:translateY(100%);transition:transform .3s ease;overflow:auto;padding:0}.feature-explorer__panel-title{padding-inline:10px;margin:10px 0 0}.feature-explorer__panel-text{padding-inline:10px;margin-top:10px 0 0}.feature-explorer__controls{padding:10px 10px 20px;margin-top:0}.feature-explorer__content.is-open{transform:translateY(0)}.feature-explorer__content-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;opacity:0;pointer-events:none;transition:.3s ease;z-index:9998}.feature-explorer__content-overlay.is-active{opacity:1;pointer-events:all}.feature-explorer__mobile-close{position:fixed;z-index:10;top:10px;right:10px;display:block;background:#fff;border:none;padding:12px}.feature-explorer__mobile-close svg{display:block}}
/*# sourceMappingURL=/cdn/shop/t/254/assets/component-feature-explorer.css.map */
