@import"https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap";.before-after-section{padding:2rem;background:#fff}.before-after-container{max-width:1000px;margin:0 auto}.simple-title{text-align:center;margin-bottom:1.5rem}.section-title{font-family:Archivo,sans-serif;margin:0;line-height:1.3;letter-spacing:-.01em}.before-after-wrapper{position:relative;border-radius:12px;overflow:hidden;cursor:ew-resize;box-shadow:0 2px 8px #00000014;max-width:900px;margin:0 auto}.image-container{position:relative;width:100%;padding-bottom:60%;background:#f5f5f5}.image-before,.image-after{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.image-before img,.image-after img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.image-after{z-index:2;transition:clip-path .05s linear}.drag-handle{position:absolute;top:0;width:3px;height:100%;z-index:10;cursor:ew-resize;transform:translate(-50%);transition:left .05s linear}.drag-line{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:0 0 5px #0000004d}.drag-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;cursor:pointer;transition:transform .2s;box-shadow:0 2px 8px #0003;border:2px solid white;display:flex;align-items:center;justify-content:center;gap:4px}.drag-button svg{width:16px;height:16px}.drag-button:hover{transform:translate(-50%,-50%) scale(1.1)}.drag-handle.active .drag-button{transform:translate(-50%,-50%) scale(.95)}.before-label-line,.after-label-line{position:absolute;bottom:15px;padding:6px 12px;font-size:12px;font-weight:700;letter-spacing:.5px;border-radius:4px;z-index:15;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:inherit}.before-label-line{left:15px}.after-label-line{right:15px}@media(max-width:768px){.before-after-section{padding:1.5rem 1rem}.image-container{padding-bottom:75%}.drag-button{width:38px;height:38px}.drag-button svg{width:14px;height:14px}.before-label-line,.after-label-line{padding:4px 10px;font-size:10px;bottom:10px}}@media(max-width:480px){.image-container{padding-bottom:100%}.drag-button{width:34px;height:34px}.before-label-line,.after-label-line{padding:3px 8px;font-size:9px;bottom:8px}}
/*# sourceMappingURL=/cdn/shop/t/25/assets/before-after.css.map */