.before-after-section{padding-top:var(--section-padding-top, 36px);padding-bottom:var(--section-padding-bottom, 36px)}.before-after-container{max-width:1200px;margin:0 auto;padding:0 2rem}.section-border{border-top:1px solid rgba(var(--color-foreground),.08);margin-bottom:3rem}.before-after-subheading{text-align:center;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;color:rgba(var(--color-foreground),.7)}.before-after-heading{text-align:center;margin-bottom:1.5rem;font-size:clamp(1.75rem,4vw,2.5rem);letter-spacing:-.02em}.before-after-content{text-align:center;max-width:600px;margin:0 auto 3rem;color:rgba(var(--color-foreground),.8);line-height:1.6}.before-after-wrapper{max-width:900px;margin:0 auto;border:1px solid rgba(var(--color-foreground),.12);border-radius:8px;overflow:hidden;box-shadow:0 4px 24px #0000000f}.before-after-slider{position:relative;width:100%;aspect-ratio:2 / 1;overflow:hidden;user-select:none;-webkit-user-select:none;cursor:ew-resize}.before-after-slider[data-orientation=vertical]{cursor:ns-resize}.before-after-slider.is-dragging{cursor:grabbing}.before-image-container,.after-image-container{position:absolute;top:0;left:0;width:100%;height:100%}.before-image-container img,.after-image-container img{width:100%;height:100%;object-fit:cover;display:block}.after-image-container{clip-path:inset(0 50% 0 0);transition:clip-path .1s ease-out}.before-after-slider.is-dragging .after-image-container{transition:none}.image-label{position:absolute;top:2rem;background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.75rem 1.5rem;border-radius:4px;font-size:.875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 2px 12px #0000001a;z-index:2}.before-label{left:2rem}.after-label{right:2rem}.image-button{position:absolute;bottom:2rem;z-index:2;transform:none;left:auto}.before-image-container .image-button{left:2rem}.after-image-container .image-button{right:2rem}.image-button .button{background:transparent;border:none;padding:0;min-width:auto;min-height:auto;box-shadow:none;text-decoration:underline;text-underline-offset:.3rem;font-weight:400;color:rgb(var(--color-foreground))}@media (max-width: 768px){.before-image-container .image-button{left:1rem}.after-image-container .image-button{right:1rem}.image-button{bottom:1.5rem}}.slider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;pointer-events:none;transition:left .1s ease-out,top .1s ease-out}.before-after-slider.is-dragging .slider-handle{transition:none}.handle-line{position:absolute;background:#fff;box-shadow:0 0 12px #0000004d;pointer-events:auto}.before-after-slider[data-orientation=horizontal] .handle-line{width:3px;height:100vh;top:50%;left:50%;transform:translate(-50%,-50%)}.before-after-slider[data-orientation=vertical] .handle-line{height:3px;width:100vw;top:50%;left:50%;transform:translate(-50%,-50%)}.handle-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;background:#fff;border:3px solid rgba(0,0,0,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:4px;cursor:grab;pointer-events:auto;box-shadow:0 4px 16px #0003;transition:transform .2s ease,box-shadow .2s ease}.before-after-slider.is-dragging .handle-circle{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1);box-shadow:0 6px 24px #0000004d}.handle-circle:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 6px 20px #00000040}.handle-circle svg{color:#0009;flex-shrink:0}.before-after-slider[data-orientation=vertical] .handle-circle{flex-direction:column}.slider-handle[data-show-arrows=false] .handle-circle svg{display:none}@media (max-width: 768px){.before-after-container{padding:0 1rem}.before-after-slider{aspect-ratio:1 / 1}.image-label{top:1rem;padding:.5rem 1rem;font-size:.75rem}.before-label{left:1rem}.after-label{right:1rem}.image-button{bottom:1rem}.image-button .button{font-size:.8125rem;padding:.625rem 1.25rem}.handle-circle{width:52px;height:52px}.handle-circle svg{width:10px;height:10px}}@media (max-width: 480px){.before-after-heading{font-size:1.5rem}.before-after-content{font-size:.9375rem;margin-bottom:2rem}.handle-circle{width:48px;height:48px}}.before-image-container .placeholder-svg,.after-image-container .placeholder-svg{width:100%;height:100%;fill:rgba(var(--color-foreground),.06)}
/*# sourceMappingURL=/cdn/shop/t/5/assets/section-before-after.css.map */