.before-after-section{padding:40px 0}.before-after-section *,.before-after-section *:before,.before-after-section *:after{box-sizing:border-box}.before-after-section .page-width{max-width:1200px;margin:0 auto;padding:0 20px}.before-after-section .before-after-container.contained{max-width:700px;margin:0 auto;border:1px solid #298dce;border-radius:8px;padding:20px}.before-after-section .image-comparison-container{width:100%;max-width:320px;margin:16px auto;padding:0 16px}.before-after-section .comparison-title{font-family:var(--ewc-fonte);font-size:32px;line-height:1.1;font-weight:500;text-align:center;margin:0 0 8px;color:#1773b0;letter-spacing:-2px}.before-after-section .comparison-description{font-size:12px;line-height:1.5;text-align:center;margin:1em 0 16px;padding:0;color:#1773b0;letter-spacing:-.3px}.before-after-section .slider-container{position:relative;width:100%;overflow:hidden;border-radius:8px;aspect-ratio:4/3;min-height:200px;max-height:400px;touch-action:manipulation;-webkit-user-select:none;user-select:none;cursor:ew-resize}.before-after-section .after-image{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.before-after-section .before-image{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;clip-path:inset(0 50% 0 0)}.before-after-section .after-image img,.before-after-section .before-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.before-after-section .image-label{position:absolute;background:#1773b0;padding:4px 8px;border-radius:4px;font-size:12px;line-height:1.4;font-weight:400;box-shadow:0 1px 3px #0000001a;color:#fff;letter-spacing:-.3px;z-index:1}.before-after-section .label-before{bottom:8px;left:8px}.before-after-section .label-after{bottom:8px;right:8px}.before-after-section .slider-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:flex;align-items:center;justify-content:center;cursor:grab;border:2px solid #f3f4f6;transition:all .2s ease;touch-action:none}.before-after-section .slider-button:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.before-after-section .slider-button:active,.before-after-section .slider-button.dragging{cursor:grabbing;transform:translate(-50%,-50%) scale(.95);transition:none}.before-after-section .slider-icon{width:20px;height:20px;stroke:#1773b0;stroke-width:2;fill:none}.before-after-section .slider-instructions{text-align:center;margin-top:12px;font-size:14px;line-height:1.4;color:#1773b0;padding:0 8px;letter-spacing:-.3px}@media(min-width:640px){.before-after-section .image-comparison-container{max-width:448px;margin:24px auto}.before-after-section .slider-container{min-height:250px;max-height:800px}.before-after-section .comparison-title{font-size:27.2px;margin-bottom:12px}.before-after-section .comparison-description{font-size:13.2px;margin-bottom:20px}.before-after-section .image-label{padding:6px 12px;font-size:14.4px}.before-after-section .label-before{bottom:12px;left:12px}.before-after-section .label-after{bottom:12px;right:12px}.before-after-section .slider-instructions{margin-top:16px;font-size:15.4px}}@media(min-width:768px){.before-after-section .image-comparison-container{max-width:512px;margin:32px auto}.before-after-section .comparison-title{font-size:30.4px;margin-bottom:16px}.before-after-section .comparison-description{font-size:15px;margin-bottom:24px}.before-after-section .slider-button{width:48px;height:48px}.before-after-section .slider-icon{width:24px;height:24px}.before-after-section .image-label{bottom:16px}.before-after-section .label-before{left:16px}.before-after-section .label-after{right:16px}}@media(min-width:769px){.before-after-section .before-after-container.contained{padding:40px}}@media(min-width:1024px){.before-after-section .image-comparison-container{max-width:512px}.before-after-section .comparison-title{font-size:35.2px}}@media(min-width:1280px){.before-after-section .image-comparison-container{max-width:800px}.before-after-section .comparison-title{font-size:35.2px}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/ewc-pdp-before-after.css.map */