.before-after-section{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}.before-after-section--visible{opacity:1;transform:translateY(0)}.before-after-section__heading{font-family:var(--font-heading-family);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:600;letter-spacing:-.02em;color:#1d1d1f;text-align:center;margin:0 0 6px}.before-after-section__text{text-align:center;color:#555;font-size:1.4rem;max-width:440px;margin:0 auto 20px}.before-after{max-width:420px;margin:0 auto}.before-after__frame{position:relative;overflow:hidden;border-radius:14px;background:#f3f3f3;aspect-ratio:4 / 3;-webkit-user-select:none;user-select:none;cursor:ew-resize;touch-action:pan-y}.before-after__frame:focus-visible{outline:2px solid #151515;outline-offset:4px}.before-after__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.before-after__img--before{clip-path:inset(0 calc(100% - var(--pos, 50%)) 0 0)}.before-after__frame.is-sweeping .before-after__img--before{transition:clip-path 1.1s cubic-bezier(.45,0,.2,1)}.before-after__frame.is-sweeping .before-after__divider,.before-after__frame.is-sweeping .before-after__handle{transition:left 1.1s cubic-bezier(.45,0,.2,1)}.before-after__frame.is-dragging .before-after__img--before,.before-after__frame.is-dragging .before-after__divider,.before-after__frame.is-dragging .before-after__handle{transition:none}.before-after__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#f7f7f7;color:#555;font-size:1.2rem}.before-after__placeholder--before{clip-path:inset(0 calc(100% - var(--pos, 50%)) 0 0);background:#f0f0f0}.before-after__divider{position:absolute;top:0;bottom:0;left:var(--pos, 50%);width:2px;background:#fff;transform:translate(-1px);pointer-events:none}.before-after__handle{position:absolute;top:50%;left:var(--pos, 50%);width:32px;height:32px;border-radius:50%;background:#151515;color:#fff;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:1.1rem;box-shadow:0 2px 8px #0000004d}.before-after__badge{position:absolute;top:10px;padding:4px 10px;border-radius:999px;font-size:1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:#151515bf;pointer-events:none}.before-after__badge--before{left:10px}.before-after__badge--after{right:10px}.before-after__range{width:100%;margin-top:12px;-webkit-appearance:none;appearance:none;height:3px;border-radius:999px;background:#f3f3f3;outline:none}.before-after__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#151515;cursor:pointer;border:2px solid #FFFFFF}.before-after__range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#151515;cursor:pointer;border:2px solid #FFFFFF}@media screen and (max-width:749px){.before-after{max-width:320px}.before-after__frame{aspect-ratio:1 / 1}.before-after__badge{font-size:.9rem;padding:3px 8px}}@media(prefers-reduced-motion:reduce){.before-after-section{opacity:1;transform:none;transition:none}.before-after__frame.is-sweeping .before-after__img--before,.before-after__frame.is-sweeping .before-after__divider,.before-after__frame.is-sweeping .before-after__handle{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/before-after-slider.css.map */
