.before-after__heading{margin:0 0 .6rem;text-align:center}.before-after__subheading{margin:0 auto 2.4rem;max-width:52rem;text-align:center;color:rgb(var(--color-foreground),.72)}.before-after__slider{display:block;position:relative;margin:0 auto;max-width:var(--before-after-max-width, 52rem);overflow:hidden;border-radius:var(--media-radius, 0);box-shadow:0 1rem 3rem rgba(var(--ink-rgb, 43, 42, 51),.12);touch-action:pan-y;--pos: 50%}.before-after__media{margin:0;line-height:0}.before-after__media img,.before-after__media svg{display:block;width:100%;height:100%;object-fit:cover}.before-after__media--after{position:relative}.before-after__media--before{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);-webkit-clip-path:inset(0 calc(100% - var(--pos)) 0 0)}.before-after__tag{position:absolute;bottom:1.2rem;padding:.4rem 1rem;font-size:1.2rem;font-weight:var(--font-body-weight-bold, 700);letter-spacing:.02rem;color:var(--cream, #faf7f2);background:rgba(var(--ink-rgb, 43, 42, 51),.78);border-radius:999px;pointer-events:none}.before-after__tag--before{left:1.2rem}.before-after__tag--after{right:1.2rem}.before-after__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;transform:translate(-50%);pointer-events:none}.before-after__handle:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:.3rem;transform:translate(-50%);background:var(--cream, #faf7f2);box-shadow:0 0 0 1px rgba(var(--ink-rgb, 43, 42, 51),.15)}.before-after__knob{position:absolute;top:50%;left:50%;width:4.4rem;height:4.4rem;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:.4rem;color:var(--coral, #fb6f52);background:var(--cream, #faf7f2);border-radius:50%;box-shadow:0 .2rem .8rem rgba(var(--ink-rgb, 43, 42, 51),.25)}.before-after__knob svg{width:1.6rem;height:1.6rem}.before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;background:transparent;cursor:ew-resize;opacity:0;-webkit-appearance:none;appearance:none}.before-after__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:4.4rem;height:100%}.before-after__range::-moz-range-thumb{width:4.4rem;height:100%;border:0;background:transparent}.before-after__range:focus-visible~.before-after__handle .before-after__knob{box-shadow:0 0 0 .3rem rgba(var(--coral-rgb, 251, 111, 82),.55)}@media screen and (max-width:749px){.before-after__knob{width:3.6rem;height:3.6rem}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/before-after-slider.css.map */