@layer components{.vsr-before-after__grid{--vsr-grid-min: 30rem;--vsr-before-after-width: 100%;max-width:max(var(--vsr-grid-min),var(--vsr-before-after-width))}.vsr-before-after__grid--center{margin-inline:auto}.vsr-compare{display:flex;flex-direction:column;gap:var(--vsr-space-5);margin:0;min-inline-size:0;overflow-wrap:anywhere}.vsr-compare__frame{--vsr-compare-position: 50%;--vsr-compare-ratio: 16 / 9;--vsr-compare-handle-size: var(--vsr-tap-target);--vsr-compare-line-width: var(--vsr-border-width-strong);--vsr-compare-chevron-gap: var(--vsr-space-1);position:relative;display:block;aspect-ratio:var(--vsr-compare-ratio);overflow:hidden;isolation:isolate;border:var(--vsr-border-width) solid var(--vsr-color-border);border-radius:var(--vsr-radius-lg);background-color:var(--vsr-color-bg-subtle);touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.vsr-compare__frame--16-9{--vsr-compare-ratio: 16 / 9}.vsr-compare__frame--3-2{--vsr-compare-ratio: 3 / 2}.vsr-compare__frame--4-3{--vsr-compare-ratio: 4 / 3}.vsr-compare__frame--1-1{--vsr-compare-ratio: 1}.vsr-compare__frame[data-ready]{cursor:ew-resize}.vsr-compare__frame[data-dragging]{cursor:grabbing}.vsr-compare__layer{position:absolute;top:0;right:0;bottom:0;left:0}.vsr-compare__layer>img,.vsr-compare__layer>svg{width:100%;height:100%;object-fit:cover}.vsr-compare__layer--after{clip-path:inset(0 0 0 var(--vsr-compare-position))}.vsr-compare__layer .vsr-placeholder{width:100%;height:100%;background:var(--vsr-color-bg-subtle);fill:var(--vsr-color-border-strong)}.vsr-compare__layer--after .vsr-placeholder{background:var(--vsr-color-surface);fill:var(--vsr-color-border)}.vsr-compare__labels{position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--vsr-z-base);display:flex;align-items:flex-start;padding:var(--vsr-space-4);pointer-events:none}.vsr-compare__labels--before{justify-content:flex-start;clip-path:inset(0 calc(100% - var(--vsr-compare-position)) 0 0)}.vsr-compare__labels--after{justify-content:flex-end;clip-path:inset(0 0 0 var(--vsr-compare-position))}.vsr-compare__label{box-shadow:var(--vsr-shadow-sm)}.vsr-compare__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--vsr-z-raised);width:100%;height:100%;margin:0;padding:0;direction:ltr;background:transparent;opacity:0;-webkit-appearance:none;appearance:none;cursor:ew-resize;touch-action:pan-y pinch-zoom}.vsr-compare__frame[data-ready] .vsr-compare__range{pointer-events:none}.vsr-compare__range::-webkit-slider-runnable-track{height:100%;background:transparent}.vsr-compare__range::-webkit-slider-thumb{width:var(--vsr-compare-handle-size);height:var(--vsr-compare-handle-size);border:0;border-radius:var(--vsr-radius-circle);background:transparent;-webkit-appearance:none;appearance:none}.vsr-compare__range::-moz-range-track{height:100%;background:transparent}.vsr-compare__range::-moz-range-thumb{width:var(--vsr-compare-handle-size);height:var(--vsr-compare-handle-size);border:0;border-radius:var(--vsr-radius-circle);background:transparent}.vsr-compare__handle{position:absolute;top:0;bottom:0;left:var(--vsr-compare-position);z-index:var(--vsr-z-raised);width:var(--vsr-compare-line-width);margin-left:calc(var(--vsr-compare-line-width) / -2);background-color:var(--vsr-color-surface);box-shadow:0 0 0 var(--vsr-border-width) var(--vsr-color-overlay);pointer-events:none}.vsr-compare__grabber{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;gap:var(--vsr-compare-chevron-gap);width:var(--vsr-compare-handle-size);height:var(--vsr-compare-handle-size);border-radius:var(--vsr-radius-circle);background-color:var(--vsr-color-surface);box-shadow:var(--vsr-shadow-ring),var(--vsr-shadow-md);color:var(--vsr-color-heading);transform:translate(-50%,-50%);transition:transform var(--vsr-duration-fast) var(--vsr-ease-standard)}.vsr-compare__frame:hover .vsr-compare__grabber{transform:translate(-50%,-50%) scale(1.06)}.vsr-compare__frame[data-dragging] .vsr-compare__grabber{transform:translate(-50%,-50%) scale(.96)}.vsr-compare__chevron--start{transform:scaleX(-1)}.vsr-compare__frame:has(.vsr-compare__range:focus-visible):not([data-pointer-focus]) .vsr-compare__grabber{outline:var(--vsr-focus-ring-width) solid var(--vsr-color-focus);outline-offset:var(--vsr-focus-ring-offset)}.vsr-compare__caption{display:flex;flex-direction:column;gap:var(--vsr-space-2)}.vsr-compare__caption--center{align-items:center;text-align:center}.vsr-compare__title{color:var(--vsr-color-heading)}.vsr-compare__text{max-width:var(--vsr-measure);color:var(--vsr-color-muted);line-height:var(--vsr-leading-relaxed)}@media screen and not (min-width:750px){.vsr-compare__text{font-size:max(var(--vsr-text-base),1rem)}.vsr-compare__labels{padding:var(--vsr-space-3)}}@media(prefers-reduced-motion:reduce){.vsr-compare__grabber,.vsr-compare__frame:hover .vsr-compare__grabber,.vsr-compare__frame[data-dragging] .vsr-compare__grabber{transform:translate(-50%,-50%);transition:none}}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/component-before-after.css.map */