@property --before-after-position{syntax: "<percentage>"; inherits: true; initial-value: 50%;}.before-after{display:block;min-width:0;margin-bottom:var(--before-after-spacing, 0)}.before-after__frame{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:var(--before-after-ratio, 4 / 3);border:var(--media-container-border, none);border-radius:var(--before-after-radius, var(--media-container-radius, 0));box-shadow:var(--media-container-shadow, none);background:rgba(var(--color-foreground),.06);cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.before-after--vertical .before-after__frame{cursor:ns-resize;touch-action:auto}.before-after--small .before-after__frame{aspect-ratio:auto;height:24rem}.before-after--medium .before-after__frame{aspect-ratio:auto;height:32rem}.before-after--large .before-after__frame{aspect-ratio:auto;height:40rem}@media screen and (min-width:750px){.before-after--small .before-after__frame{height:32rem}.before-after--medium .before-after__frame{height:48rem}.before-after--large .before-after__frame{height:64rem}}.before-after__layer{position:absolute;top:0;right:0;bottom:0;left:0}.before-after__layer img,.before-after__layer .placeholder-svg{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.before-after__layer--before{z-index:1;clip-path:inset(0 calc(100% - var(--before-after-position)) 0 0)}.before-after--vertical .before-after__layer--before{clip-path:inset(0 0 calc(100% - var(--before-after-position)) 0)}.before-after__label{position:absolute;top:1.2rem;padding:.5rem 1rem;border-radius:var(--buttons-radius, 2rem);background:#0000008c;color:#fff;font-size:1.2rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.before-after__label--before{left:1.2rem}.before-after__label--after{right:1.2rem}.before-after--labels-bottom .before-after__label{top:auto;bottom:1.2rem}.before-after--vertical .before-after__label--before{top:1.2rem;bottom:auto}.before-after--vertical .before-after__label--after{top:auto;right:auto;bottom:1.2rem;left:1.2rem}.before-after__handle{position:absolute;z-index:2;top:0;bottom:0;left:var(--before-after-position);width:0;pointer-events:none}.before-after__handle:before{content:"";position:absolute;top:0;bottom:0;left:-.1rem;width:.2rem;background:var(--before-after-line, #fff);box-shadow:0 0 .6rem #00000040}.before-after--vertical .before-after__handle{top:var(--before-after-position);right:0;bottom:auto;left:0;width:auto;height:0}.before-after--vertical .before-after__handle:before{top:-.1rem;right:0;bottom:auto;left:0;width:auto;height:.2rem}.before-after__knob{position:absolute;top:50%;left:0;display:grid;place-items:center;width:4.4rem;height:4.4rem;margin:-2.2rem 0 0 -2.2rem;border-radius:50%;background:var(--before-after-knob, #fff);box-shadow:0 .2rem 1.2rem #00000038;color:var(--before-after-arrows, #121212);pointer-events:auto;touch-action:none;transition:transform .2s ease}.before-after--vertical .before-after__knob{top:0;left:50%}.before-after__knob svg{width:2.2rem;height:2.2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.before-after--vertical .before-after__knob svg{transform:rotate(90deg)}.before-after[data-dragging] .before-after__knob{transform:scale(.92)}.before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none}.before-after:has(.before-after__range:focus-visible) .before-after__knob{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.3rem}@media(prefers-reduced-motion:no-preference){.before-after[data-hinting] .before-after__frame{animation:before-after-hint 1.6s cubic-bezier(.45,0,.25,1)}}@keyframes before-after-hint{30%{--before-after-position: clamp(0%, calc(var(--before-after-start, 50%) + 12%), 100%)}65%{--before-after-position: clamp(0%, calc(var(--before-after-start, 50%) - 12%), 100%)}}
/*# sourceMappingURL=/cdn/shop/t/198/assets/component-before-after.css.map */