.before-after__page{text-align:center}.before-after__header{width:min(100%,72rem);margin:0 auto}.before-after__eyebrow{margin:0 0 1.2rem;color:rgb(var(--color-button));font-family:var(--font-body-family);font-style:var(--font-body-style);font-size:1.4rem;font-weight:600;line-height:1;letter-spacing:.2rem;text-transform:uppercase}.before-after__heading{margin:0}.before-after__description{margin:1.6rem auto 0;color:rgba(var(--color-foreground),.78);font-family:var(--font-body-family);font-style:var(--font-body-style);font-size:1.6rem;font-weight:var(--font-body-weight);line-height:1.5}.before-after__description>*{margin-top:0;margin-bottom:0}.before-after__comparison{--comparison-position: 50%;--comparison-ratio: 16 / 9;position:relative;display:block;margin:4rem auto 0;aspect-ratio:var(--comparison-ratio);overflow:hidden;border-radius:.8rem;background:rgba(var(--color-foreground),.04);isolation:isolate;user-select:none;-webkit-user-select:none;touch-action:pan-y}.before-after__range{width:100%;height:min(50vw,720px);max-height:720px;overflow:hidden}.before-after__media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden}.before-after__media--after{z-index:1;-webkit-clip-path:inset(0 0 0 var(--comparison-position));clip-path:inset(0 0 0 var(--comparison-position));will-change:clip-path}.before-after__image,.before-after__placeholder{display:block;width:100%;height:100%;object-fit:cover}.before-after__placeholder{background:rgba(var(--color-foreground),.04)}.before-after__divider{position:absolute;z-index:2;top:0;bottom:0;left:var(--comparison-position);width:.1rem;pointer-events:none;background:rgba(var(--color-background),.92);transform:translate(-50%);will-change:left}.before-after__handle{position:absolute;z-index:3;top:50%;left:var(--comparison-position);display:inline-flex;align-items:center;justify-content:center;width:4.9rem;height:4.9rem;border:.1rem solid rgba(var(--color-foreground),.12);border-radius:50%;pointer-events:none;background:rgb(var(--color-background));color:rgb(var(--color-foreground));box-shadow:0 0 0 .45rem rgba(var(--color-foreground),.06),0 .2rem .8rem rgba(var(--color-shadow),.12);transform:translate(-50%,-50%);transition:box-shadow var(--duration-short) ease,transform var(--duration-short) ease;will-change:left}.before-after__handle-icon{display:block;width:2.15rem;height:auto}.before-after__range{position:absolute;z-index:4;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;cursor:ew-resize;opacity:0;appearance:none;-webkit-appearance:none}.before-after__range::-webkit-slider-runnable-track{width:100%;height:100%;background:transparent}.before-after__range::-webkit-slider-thumb{width:5.6rem;height:5.6rem;border:0;border-radius:50%;background:transparent;appearance:none;-webkit-appearance:none}.before-after__range::-moz-range-track{width:100%;height:100%;border:0;background:transparent}.before-after__range::-moz-range-thumb{width:5.6rem;height:5.6rem;border:0;border-radius:50%;background:transparent}.before-after__comparison:focus-within .before-after__handle{outline:.2rem solid rgba(var(--color-foreground),.65);outline-offset:.3rem}.before-after__buttons{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.2rem;margin-top:4rem}@media(hover:hover)and (prefers-reduced-motion:no-preference){.before-after__comparison:hover .before-after__handle{box-shadow:0 0 0 .55rem rgba(var(--color-button),.1),0 .4rem 1.2rem rgba(var(--color-shadow),.14);transform:translate(-50%,-50%) scale(1.04)}}@media screen and (max-width:749px){.before-after__header{width:min(100%,39rem)}.before-after__eyebrow{margin-bottom:.8rem;font-size:1rem;letter-spacing:.16rem}.before-after__description{margin-top:1rem;font-size:1.2rem;line-height:1.55}.before-after__comparison{margin-top:2.4rem;border-radius:.6rem}.before-after__handle{width:4rem;height:4rem}.before-after__handle-icon{width:1.8rem}.before-after__buttons{gap:1rem;margin-top:2.4rem}}@media screen and (max-width:479px){.before-after__buttons{align-items:stretch;flex-direction:column}.before-after__buttons .button{width:100%}}@media(prefers-reduced-motion:reduce){.before-after__handle{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/16/assets/section-before-after-showcase.css.map */