.before-after-container{position:relative;overflow:hidden;border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,.1);width:100%;aspect-ratio:3/2}.before-after-container[style*="height"]{aspect-ratio:unset}.before-after-slider{position:relative;width:100%;height:100%;cursor:grab;user-select:none}.before-after-slider:active{cursor:grabbing}.before-image-wrapper{position:absolute;top:0;left:0;bottom:0;overflow:hidden;z-index:2}.before-image{background-size:cover;background-position:center;background-repeat:no-repeat;height:100%}.after-image{background-size:cover;background-position:center;background-repeat:no-repeat;position:absolute;inset:0;z-index:1}.before-after-handle{position:absolute;top:0;left:50%;width:4px;height:100%;background:#fff;z-index:3;cursor:ew-resize}.before-after-handle::before{content:'';position:absolute;inset:0 -20px}.handle-line{position:absolute;top:0;left:50%;width:2px;height:100%;background:#fff;transform:translateX(-50%);box-shadow:0 0 10px rgba(0,0,0,.3)}.handle-circle{position:absolute;top:50%;left:50%;width:48px;height:48px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.2);color:#666;transition:transform 0.2s ease}.handle-circle:hover{transform:translate(-50%,-50%) scale(1.1)}.handle-circle svg{width:20px;height:20px}.before-after-labels{position:absolute;top:20px;left:0;right:0;z-index:4;pointer-events:none}.label-before,.label-after{position:absolute;padding:8px 16px;background:rgba(0,0,0,.7);color:#fff;border-radius:4px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.label-before{left:20px}.label-after{right:20px}@media (max-width:768px){.handle-circle{width:40px;height:40px}.handle-circle svg{width:16px;height:16px}.label-before,.label-after{font-size:12px;padding:6px 12px}}