.before-after-section{overflow:hidden}.before-after-wrapper{display:flex;flex-direction:column;gap:3rem;align-items:center}.before-after-content{text-align:center}@media screen and (min-width:990px){.before-after-wrapper{flex-direction:row;gap:4rem;align-items:center}.before-after-content{flex:1;max-width:450px}.before-after-container{flex:1}}.before-after-subheading{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(var(--color-foreground),.75);font-weight:500;margin-bottom:-5px}@media screen and (min-width:990px){.before-after-subheading{margin-bottom:-20px}}.before-after-heading{margin-bottom:1.5rem;line-height:1.2}.before-after-description{color:rgba(var(--color-foreground),.75);margin-bottom:2rem;line-height:1.6}.before-after-description p{margin:0}.before-after-button-wrapper{margin-bottom:1rem}.before-after-button-wrapper .button{min-width:200px;padding:1rem 2rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:13px}.before-after-link{text-align:center}.before-after-link a{color:#9f6d2a;text-decoration:underline;font-size:14px;transition:color .2s ease}.before-after-link a:hover{color:rgb(var(--color-foreground))}@media screen and (max-width:749px){.before-after-content{text-align:center;order:2}.before-after-container{order:1}}.before-after-container{max-width:800px;width:100%;margin:0 auto}@media screen and (min-width:1200px){.before-after-container{max-width:900px}}.before-after-slider{position:relative;width:100%;overflow:hidden;border-radius:8px;user-select:none;-webkit-user-select:none;cursor:ew-resize;background-color:#f5f5f5}.before-after-container[data-orientation=auto] .before-after-slider{cursor:ns-resize}@media screen and (min-width:750px){.before-after-container[data-orientation=auto] .before-after-slider{cursor:ew-resize}}.before-after-slider[data-orientation=vertical]{cursor:ns-resize}.before-image-container,.after-image-container{position:relative;width:100%;height:100%}.before-image-container{display:block}.after-image-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;clip-path:inset(0 0 0 50%)}.before-image-container img,.after-image-container img{display:block;width:100%;height:auto;max-height:700px;object-fit:contain;pointer-events:none}@media screen and (min-width:990px){.before-image-container img,.after-image-container img{max-height:800px}}.placeholder-image{width:100%;aspect-ratio:16 / 9;background:var(--gradient-background);display:flex;align-items:center;justify-content:center}.placeholder-image svg{width:60px;height:60px;opacity:.3}.image-label{position:absolute;top:20px;padding:8px 16px;background:#000000b3;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;z-index:2;pointer-events:none}.before-label{left:20px;background-color:#2a5c9f}.after-label{right:20px;background-color:#2a5c9f}.slider-handle{--handle-color: #ffffff;position:absolute;top:0;left:50%;width:4px;height:100%;transform:translate(-50%);z-index:10;cursor:ew-resize;display:flex;flex-direction:column;align-items:center;justify-content:center}.before-after-slider[data-orientation=vertical] .slider-handle{top:50%;left:0;width:100%;height:4px;transform:translateY(-50%);cursor:ns-resize;flex-direction:row}.handle-line{flex:1;width:100%;background:var(--handle-color);box-shadow:0 0 10px #0000004d}.before-after-slider[data-orientation=vertical] .handle-line{width:100%;height:100%}.handle-circle{width:48px;height:48px;background:var(--handle-color);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px #0003;flex-shrink:0;transition:transform .2s ease}.handle-circle svg{width:24px;height:24px;color:#2a5c9f;transition:transform .3s ease}.before-after-slider[data-orientation=vertical] .handle-circle svg{transform:rotate(90deg)}.before-after-container[data-orientation=auto] .handle-circle svg{transform:rotate(90deg)}@media screen and (min-width:750px){.before-after-container[data-orientation=auto] .handle-circle svg{transform:rotate(0)}}.slider-handle:hover .handle-circle,.slider-handle:active .handle-circle{transform:scale(1.1)}@media screen and (max-width:749px){.before-after-heading{margin-bottom:2rem}.image-label{font-size:12px;padding:6px 12px;top:15px}.before-label{left:15px;background-color:#2a5c9f}.after-label{right:15px;background-color:#2a5c9f}.handle-circle{width:40px;height:40px}.handle-circle svg{width:20px;height:20px;color:#2a5c9f}}@media(prefers-reduced-motion:reduce){.handle-circle{transition:none}}@media(hover:none)and (pointer:coarse){.handle-circle{width:52px;height:52px}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/section-before-after-slider.css.map */