.image-comparison-wrapper{position:relative;max-width:100%;margin:0 auto;overflow:hidden;aspect-ratio:1 / 1;cursor:ew-resize;-webkit-user-select:none;user-select:none}.before-after-title{margin-bottom:1rem;font-weight:700;line-height:1.2}.slider-labels-wrapper{position:absolute;top:10px;left:0;right:0;display:flex;justify-content:space-between;z-index:10;pointer-events:none;padding:0 10px;box-sizing:border-box}.slider-labels-wrapper .label-before,.slider-labels-wrapper .label-after{font-size:13px;color:#fff;padding:0 10px;border-radius:4px;background:#0009;max-width:calc(50% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.before-image,.after-image{display:block;width:100%;height:100%;position:absolute;top:0;left:0}.before-image{clip-path:inset(0 50% 0 0);z-index:2}.after-image{clip-path:none;z-index:1}.slider-handle{position:absolute;top:0;left:50%;transform:translate(-50%);width:2px;height:100%;z-index:2;pointer-events:none}.slider-handle:before,.slider-handle:after{content:"";position:absolute;width:2px;height:calc(50% - 20px);background-color:#fff;left:0}.slider-handle:before{top:0}.slider-handle:after{bottom:0}.slider-handle .handle-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:#ffffff80;border-radius:50%;border:2px solid #fff;display:flex;justify-content:center;align-items:center;z-index:3;box-shadow:0 0 8px #00000080}.comparison-slider__arrow-left,.comparison-slider__arrow-right{position:absolute;top:50%;width:.6em;height:1.4em;background:#fff;z-index:3;clip-path:polygon(100% 0%,0 50%,100% 100%)}.comparison-slider__arrow-left{left:25%;transform:translate(-50%,-50%) rotate(0)}.comparison-slider__arrow-right{right:25%;transform:translate(50%,-50%) rotate(180deg)}.before-after-slider-content{display:flex;gap:2rem;align-items:center}.before-after-text{flex:1;max-width:40%;text-align:left}.before-after-body{line-height:1.5}.before-after-slider{flex:2;max-width:60%}@media screen and (max-width: 750px){.before-after-title{text-align:center}.before-after-slider-content{display:block;text-align:center}.before-after-text,.before-after-slider{max-width:100%}.image-comparison-wrapper{margin:0 calc(-1* var(--container-padding, 1.5rem));max-width:unset}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/before-after-slider.css.map */