.before-after{--pdp-trust: 11, 31, 58;--ba-pos: 50%}.before-after__header{max-width:64rem;margin:0 auto 1.6rem;text-align:center}.before-after__header .title{margin:0 0 .8rem}.before-after__text{margin:0;font-size:1.5rem;line-height:1.5;color:rgba(var(--color-foreground),.72)}.before-after__text p{margin:0}.before-after__frame{position:relative;overflow:hidden;border-radius:.8rem;background:#f4f7fb;height:50rem;user-select:none;-webkit-user-select:none;touch-action:pan-y}@media screen and (max-width:989px){.before-after__frame{height:40rem}}@media screen and (max-width:749px){.before-after__frame{height:32rem}}.before-after__media{position:absolute;top:0;right:0;bottom:0;left:0}.before-after__media img,.before-after__media svg{display:block;width:100%;height:100%;object-fit:cover}.before-after__before{position:absolute;inset:0 auto 0 0;width:var(--ba-pos);overflow:hidden;border-right:.2rem solid #fff}.before-after__before img,.before-after__before svg{position:absolute;top:0;left:0;width:var(--ba-full-width, 100%);max-width:none;height:100%;object-fit:cover}.before-after__label{position:absolute;top:1.4rem;z-index:2;padding:.35rem .9rem;border-radius:2rem;background:rgb(var(--pdp-trust));color:#fff;font-family:var(--font-heading-family);font-size:1.1rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;pointer-events:none}.before-after__label--before{left:1.4rem}.before-after__label--after{right:1.4rem;background:#ffffffeb;color:rgb(var(--pdp-trust))}.before-after__handle{position:absolute;top:0;bottom:0;left:var(--ba-pos);z-index:3;width:4.4rem;transform:translate(-50%);display:flex;align-items:center;justify-content:center;pointer-events:none}.before-after__handle-knob{width:4.4rem;height:4.4rem;border-radius:50%;background:#fff;color:rgb(var(--pdp-trust));box-shadow:0 .4rem 1.6rem #0b1f3a2e;display:flex;align-items:center;justify-content:center}.before-after__handle-knob svg{width:1.8rem;height:1.8rem}.before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;-webkit-appearance:none}.before-after__range:focus-visible{opacity:.2}
/*# sourceMappingURL=/cdn/shop/t/2/assets/ds-section-before-after.css.map */