.before-after-section{position:relative;padding:var(--space-8xl) 0;background:var(--color-white);overflow:hidden}.before-after-section__header{text-align:center;max-width:900px;margin:0 auto var(--space-6xl);padding:0 var(--space-xl)}.before-after-section__eyebrow{display:inline-block;font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:1.5px;color:var(--color-accent);margin-bottom:var(--space-lg)}.before-after-section__headline{font-size:var(--fs-7xl);font-weight:var(--fw-bold);line-height:1.1;color:var(--color-charcoal);position:relative;display:inline-block}.before-after-section__headline-highlight{position:relative;display:inline-block}.before-after-section__headline-highlight:after{content:"";position:absolute;left:-4px;right:-4px;bottom:8px;height:16px;background:var(--color-accent);opacity:.2;border-radius:4px;z-index:-1}.comparison-slider{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);height:520px;border-radius:0;overflow:hidden;box-shadow:none;-webkit-user-select:none;user-select:none;cursor:col-resize}.comparison-slider__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;pointer-events:none}.comparison-slider__image--before{z-index:1}.comparison-slider__image--after{z-index:2;clip-path:inset(0 0 0 50%)}.comparison-slider__handle{position:absolute;top:0;left:50%;width:4px;height:100%;background:var(--color-white);transform:translate(-50%);z-index:3;pointer-events:none;box-shadow:0 0 12px #0000004d}.comparison-slider__handle:before,.comparison-slider__handle:after{content:"";position:absolute;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid}.comparison-slider__handle:before{top:0;border-width:0 8px 12px 8px;border-color:transparent transparent var(--color-white) transparent}.comparison-slider__handle:after{bottom:0;border-width:12px 8px 0 8px;border-color:var(--color-white) transparent transparent transparent}.comparison-slider__knob{position:absolute;top:50%;left:50%;width:56px;height:56px;transform:translate(-50%,-50%);background:var(--color-white);border-radius:var(--radius-full);box-shadow:0 4px 16px #0003;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:col-resize;transition:transform .2s ease;z-index:4}.comparison-slider__knob:hover{transform:translate(-50%,-50%) scale(1.1)}.comparison-slider__knob:active{transform:translate(-50%,-50%) scale(.95)}.comparison-slider__knob svg{width:24px;height:24px;color:var(--color-charcoal)}.comparison-slider__label{position:absolute;top:var(--space-xl);padding:var(--space-sm) var(--space-lg);background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-lg);font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:1px;color:var(--color-charcoal);box-shadow:0 2px 8px #0000001a;z-index:5;pointer-events:none}.comparison-slider__label--before{left:var(--space-xl)}.comparison-slider__label--after{right:var(--space-xl)}@media (max-width: 1023px){.before-after-section{padding:var(--space-6xl) 0}.before-after-section__header{margin-bottom:var(--space-5xl)}.before-after-section__headline{font-size:var(--fs-6xl)}.comparison-slider{height:420px;border-radius:0}.comparison-slider__knob{width:48px;height:48px}.comparison-slider__label{top:var(--space-lg);left:var(--space-lg);right:var(--space-lg)}}@media (max-width: 767px){.before-after-section{padding:var(--space-5xl) 0}.before-after-section__header{margin-bottom:var(--space-4xl)}.before-after-section__eyebrow{font-size:var(--fs-xs);margin-bottom:var(--space-md)}.before-after-section__headline{font-size:var(--fs-5xl)}.before-after-section__headline-highlight:after{bottom:4px;height:12px}.comparison-slider{height:320px;border-radius:0}.comparison-slider__handle{width:3px}.comparison-slider__knob{width:44px;height:44px}.comparison-slider__knob svg{width:20px;height:20px}.comparison-slider__label{top:var(--space-md);left:var(--space-md);right:var(--space-md);padding:var(--space-xs) var(--space-md);font-size:var(--fs-xs)}}.comparison-slider:focus-visible{outline:3px solid var(--color-accent);outline-offset:4px}.comparison-slider__knob:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-full)}.comparison-slider[data-keyboard-active=true] .comparison-slider__knob{box-shadow:0 4px 16px #4a9e9d80}.comparison-slider.loading{background:var(--color-gray-lightest)}.comparison-slider.loading:after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:4px solid var(--color-gray-lighter);border-top-color:var(--color-accent);border-radius:50%;animation:spinner .8s linear infinite}@keyframes spinner{to{transform:rotate(360deg)}}
/*# sourceMappingURL=/cdn/shop/t/26/assets/before-after.css.map */