.before-after-section{width:100%}.before-after__header{text-align:center;max-width:640px;margin:0 auto 32px}.before-after__heading{margin:0 0 12px}.before-after__subheading{color:rgba(var(--color-foreground),.75);font-size:1.6rem;line-height:1.6}.before-after__wrapper{max-width:100%;margin:0 auto}.before-after__slider{position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;border-radius:8px;cursor:ew-resize;-webkit-user-select:none;user-select:none;--reveal: 50%}.before-after__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.before-after__image img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.before-after__image--after{z-index:1}.before-after__image--before{z-index:2;clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}.before-after__image .placeholder-svg{width:100%;height:100%}.before-after__badge{position:absolute;top:16px;z-index:3;background:#121212;color:#fff;font-size:1.2rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:4px;pointer-events:none}.before-after__badge--before{left:16px}.before-after__badge--after{right:16px}.before-after__handle{position:absolute;top:0;bottom:0;left:var(--reveal);width:3px;background:#fff;z-index:4;transform:translate(-50%);cursor:ew-resize;pointer-events:auto}.before-after__handle-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2b2622;box-shadow:0 2px 8px #00000040}.before-after__drag-hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:3;background:#140f0cb8;color:#fff;font-size:1.2rem;padding:6px 14px;border-radius:20px;pointer-events:none;transition:opacity .3s ease}.before-after__slider[data-interacted] .before-after__drag-hint{opacity:0}.before-after__cta{text-align:center;margin-top:32px}@media screen and (max-width:749px){.before-after__slider{aspect-ratio:4 / 3}.before-after__badge{font-size:1.1rem;padding:5px 10px}.before-after__handle-icon{width:34px;height:34px}.before-after__wrapper{margin-top:0}.before-after__cta{margin-top:20px}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/component-before-after-slider.css.map */