.before-after__images{position:relative}.before-after__badge{position:absolute;top:12px;z-index:6;background:#0009;color:#fff;font-size:12px;font-weight:600;padding:6px 10px;line-height:1;border-radius:2px;pointer-events:none}.before-after__badge--before{left:12px}.before-after__badge--after{right:12px}.before-after__media{--position: 50%}.before-after__image--after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.before-after__image--after img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.before-after__image--before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;clip-path:inset(0 calc(100% - var(--position)) 0 0);will-change:clip-path}.before-after__divider{position:absolute;top:0;bottom:0;left:var(--position);width:3px;background-color:#fff;transform:translate(-50%);pointer-events:none;z-index:4}.before-after__handle{position:absolute;top:50%;left:var(--position);width:50px;height:50px;background:#ffffff26;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px #00000040;transform:translate(-50%,-50%);pointer-events:none;z-index:5}.before-after__handle:before,.before-after__handle:after{content:"";position:absolute;top:50%;width:6px;height:6px;border-top:2px solid #666;border-right:2px solid #666}.before-after__handle:before{left:12px;transform:translateY(-50%) rotate(-135deg)}.before-after__handle:after{right:12px;transform:translateY(-50%) rotate(45deg)}.before-after__slider{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:default;z-index:10;touch-action:pan-x;margin:0;-webkit-appearance:none;appearance:none}.before-after__slider:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:-2px}.before-after__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:50px;height:50px;opacity:0;cursor:ew-resize}.before-after__slider::-moz-range-thumb{width:50px;height:50px;opacity:0;cursor:ew-resize;border:none}.before-after__content{font-size:12px;color:#000}.before-after__text p{margin:0 0 12px}.before-after__button:hover{opacity:.9;transform:translateY(-1px);transition:all .2s ease}@media(max-width:768px){.before-after__badge{font-size:11px;padding:5px 8px}.before-after__handle{width:38px;height:38px}.before-after__handle:before,.before-after__handle:after{width:8px;height:8px}.before-after__handle:before{left:6px}.before-after__handle:after{right:6px}.before-after__divider{width:2px}.before-after__content{font-size:15px;line-height:1.5}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/section-before-after.css.map */