.before-after-section{width:100%;background:transparent}.before-after-section .container{max-width:1200px;margin:0 auto;padding:0 15px}.before-after-header{text-align:center;margin-bottom:2rem}.before-after-heading{font-size:2.5rem;font-weight:700;margin-bottom:1rem;color:inherit}.before-after-description{font-size:1.1rem;color:rgba(var(--color-base-text),.75);max-width:600px;margin:0 auto;line-height:1.6}.before-after-wrapper{max-width:800px;margin:0 auto}.ba-container{position:relative;width:100%}.ba-slider{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;border-radius:16px;-webkit-user-select:none;user-select:none;touch-action:none;background:#f5f5f5;box-shadow:0 4px 20px #0000001a;transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}.ba-slider img{position:absolute;width:100%;height:100%;object-fit:cover;top:0;left:0;transition:opacity .3s ease;border-radius:inherit;transform:translateZ(0);-webkit-transform:translateZ(0)}.ba-slider img:first-child{filter:brightness(1.9) contrast(1.2)}.ba-before-img{clip-path:inset(0 50% 0 0);z-index:2;filter:brightness(.5) contrast(.9);overflow:hidden}.ba-after-img{z-index:1;overflow:hidden}.ba-handle{position:absolute;top:0;left:50%;width:2px;height:100%;background:#0b1117;transform:translate(-50%);z-index:3;cursor:ew-resize;transition:background-color .2s ease}.ba-handle:before{content:"";position:absolute;top:50%;left:50%;width:8px;height:40px;background:#ffffffe6;border-radius:3px;transform:translate(-50%,-50%);box-shadow:0 0 6px #0006;transition:all .2s ease}.ba-handle:hover:before{background:#fff;height:45px}@media (max-width: 768px){.ba-handle:before{width:12px;height:50px;border-radius:4px}}.ba-labels{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:4}.ba-label{position:absolute;top:20px;padding:8px 16px;background:#000000b3;color:#fff;font-size:14px;font-weight:600;border-radius:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-transform:uppercase;letter-spacing:.5px}.ba-label-before{left:20px}.ba-label-after{right:20px}.ba-cta-button{display:none;margin:26px auto 40px;padding:16px 22px;background:#dd2a67;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .3s ease,box-shadow .3s ease;text-transform:none;letter-spacing:.3px;box-shadow:0 4px 12px #dd2a674d;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.2)}.ba-cta-button:hover{background:#c12558;box-shadow:0 6px 16px #dd2a6766}.ba-cta-button.show{display:block;transition:opacity .3s ease}.ba-instruction-text{text-align:center;margin:16px auto 0;padding:0 20px;color:#888;font-size:14px;font-weight:400;transition:opacity .3s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.ba-instruction-text.hidden{opacity:0;pointer-events:none}.ba-loading{position:absolute;top:0;left:0;width:100%;height:100%;background:#f8f9fa;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5}.ba-spinner{width:40px;height:40px;border:4px solid #e3e3e3;border-top:4px solid #007bff;border-radius:50%;animation:ba-spin 1s linear infinite;margin-bottom:16px}@keyframes ba-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ba-loading p{color:#666;font-size:14px;margin:0}.ba-error{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff5f5;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;text-align:center;padding:20px}.ba-error-icon{font-size:48px;margin-bottom:16px}.ba-error p{color:#dc3545;font-size:16px;margin:0;max-width:300px}.ba-placeholder{aspect-ratio:16 / 9;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #dee2e6;border-radius:16px;display:flex;align-items:center;justify-content:center;text-align:center}.ba-placeholder-content h3{font-size:1.5rem;color:#6c757d;margin-bottom:.5rem}.ba-placeholder-content p{color:#6c757d;font-size:1rem;margin:0;max-width:300px}@media (max-width: 768px){.before-after-heading{font-size:2rem}.before-after-description{font-size:1rem}.ba-slider{border-radius:8px}.ba-handle-button{width:28px;height:28px}.ba-label{font-size:12px;padding:6px 12px;top:16px}.ba-label-before{left:16px}.ba-label-after{right:16px}.ba-instruction-text{font-size:0!important}.ba-instruction-text:after{content:"\2194\fe0f  Slide left or right for your FH5 upgrade";font-size:14px;display:block;color:#888;font-weight:400;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}}@media (max-width: 480px){.ba-slider{aspect-ratio:4 / 3}.before-after-heading{font-size:1.75rem}.ba-label{font-size:10px;padding:4px 8px;top:12px}.ba-label-before{left:12px}.ba-label-after{right:12px}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.ba-handle-button{border-width:1px}.ba-slider img{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}@media (prefers-reduced-motion: reduce){.ba-slider img,.ba-handle,.ba-handle-button{transition:none}.ba-spinner{animation:none}}.ba-slider{clip-path:inset(0 round 16px)}@media (max-width: 768px){.ba-slider{clip-path:inset(0 round 8px)}}@supports not (clip-path: inset(0 round 16px)){.ba-slider:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;pointer-events:none;z-index:10;box-shadow:0 0 0 1px #00000008,inset 0 0 0 1px #ffffff1a}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/before-after-slider.css.map */