image-compare-slider{display:block}.image-compare{--ic-size: 40px;--ic-line: 4px;--ic-surface: #ffffff;--ic-handle: #1a1a1a;--ic-pad-sm: 16px;--ic-pad-xs: 8px;position:relative;box-sizing:border-box;overflow:hidden;width:var(--ic-width-mobile, 100%);max-width:100%;aspect-ratio:var(--ic-ratio, 1);border:var(--ic-border, none);border-radius:var(--ic-radius, 0)}@media(min-width:700px){.image-compare{width:var(--ic-width-desktop, 100%)}}.image-compare--height-fill{height:100%;aspect-ratio:auto}.image-compare:not(:has(img)){min-height:320px}.image-compare__container{position:relative;width:100%;height:100%}.image-compare__media{--compare: 50;position:relative;width:100%;height:100%;display:grid;grid-template:1fr / 1fr;overflow:hidden}.image-compare__layer{grid-area:1 / 1;position:relative;width:100%;height:100%;transition:clip-path var(--ic-transition, 0s) ease-in-out}.image-compare__layer--after{z-index:1}[data-orientation=horizontal] .image-compare__layer--before{clip-path:inset(0 calc((100 - var(--compare)) * 1%) 0 0)}[data-orientation=vertical] .image-compare__layer--before{clip-path:inset(0 0 calc(var(--compare) * 1%) 0)}[data-orientation=horizontal] .image-compare__layer--after{clip-path:inset(0 0 0 calc(var(--compare) * 1%))}[data-orientation=vertical] .image-compare__layer--after{clip-path:inset(calc((100 - var(--compare)) * 1%) 0 0 0)}.image-compare__img,.image-compare__placeholder{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:var(--ic-ratio, 1)}.image-compare--height-fill .image-compare__img,.image-compare--height-fill .image-compare__placeholder{aspect-ratio:auto}.image-compare__placeholder{position:absolute;top:0;right:0;bottom:0;left:0}.image-compare__placeholder svg{width:100%;height:100%;background-color:#f3f3f3;fill:#cfcfcf}.image-compare__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;width:100%;height:100%;margin:0;padding:0;background:transparent;border:0;opacity:0;cursor:inherit;-webkit-appearance:none;appearance:none}[data-orientation=horizontal] .image-compare__range{cursor:ew-resize}[data-orientation=vertical] .image-compare__range{cursor:ns-resize;writing-mode:vertical-lr;direction:rtl}.image-compare__range::-webkit-slider-thumb{width:var(--ic-size);height:var(--ic-size);border:0;background:transparent;cursor:inherit;-webkit-appearance:none;appearance:none}.image-compare__range::-moz-range-thumb{width:var(--ic-size);height:var(--ic-size);border:0;background:transparent;cursor:inherit;-webkit-appearance:none;appearance:none}.image-compare__range::-webkit-slider-runnable-track{background:transparent;border:0}.image-compare__range::-moz-range-track{background:transparent;border:0}.image-compare__range:focus-visible{opacity:1;outline:2px solid var(--ic-surface);outline-offset:-4px}.image-compare__media:after{content:"";position:absolute;pointer-events:none;z-index:2;background:var(--ic-surface);box-shadow:0 0 12px #0000001a;transition:left var(--ic-transition, 0s) ease-in-out,top var(--ic-transition, 0s) ease-in-out}.image-compare__media[data-orientation=horizontal]:after{inset:0 auto;left:calc(var(--compare) * 1%);width:var(--ic-line);transform:translate(-50%)}.image-compare__media[data-orientation=vertical]:after{inset:auto 0;top:calc((100 - var(--compare)) * 1%);height:var(--ic-line);transform:translateY(-50%)}.image-compare__handle{position:absolute;z-index:3;pointer-events:none;width:var(--ic-size);height:var(--ic-size);box-sizing:border-box;color:var(--ic-handle);background:var(--ic-surface);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:6px;padding:var(--ic-pad-xs);box-shadow:0 0 12px #0000001a;transition:left var(--ic-transition, 0s) ease-in-out,top var(--ic-transition, 0s) ease-in-out,gap .2s ease-in-out}.image-compare__media:hover .image-compare__handle{gap:2px}.image-compare__chevron{display:flex;align-items:center;justify-content:center}[data-orientation=horizontal] .image-compare__handle{top:50%;left:calc(var(--compare) * 1%);transform:translate(-50%,-50%);flex-direction:row}[data-orientation=vertical] .image-compare__handle{left:50%;top:calc((100 - var(--compare)) * 1%);transform:translate(-50%,-50%) rotate(90deg)}.image-compare__text{position:absolute;z-index:2;padding:var(--ic-pad-xs);pointer-events:none;max-width:calc(100% - (var(--ic-pad-sm) * 2))}.image-compare__text--with-bg{background:var(--ic-text-bg, #ffffff);border-radius:var(--ic-text-radius, 0)}.image-compare__text-inner{margin:0;line-height:1.2}.image-compare__text-inner--paragraph{font-size:1rem;line-height:1.5}.image-compare__text-inner--h6{font-size:1rem}.image-compare__text-inner--h5{font-size:1.125rem}.image-compare__text-inner--h4{font-size:1.25rem}.image-compare__text-inner--h3{font-size:clamp(1.375rem,2vw,1.5rem)}.image-compare__text-inner--h2{font-size:clamp(1.5rem,3vw,2rem)}.image-compare__text-inner--h1{font-size:clamp(1.75rem,4vw,2.5rem)}[data-orientation=horizontal] .image-compare__text--before{inset-inline-start:var(--ic-pad-sm)}[data-orientation=horizontal] .image-compare__text--after{inset-inline-end:var(--ic-pad-sm)}[data-orientation=horizontal][data-text-position=start] .image-compare__text{inset-block-start:var(--ic-pad-sm)}[data-orientation=horizontal][data-text-position=end] .image-compare__text{inset-block-end:var(--ic-pad-sm)}[data-orientation=vertical] .image-compare__text--before{inset-block-start:var(--ic-pad-sm)}[data-orientation=vertical] .image-compare__text--after{inset-block-end:var(--ic-pad-sm)}[data-orientation=vertical][data-text-position=start] .image-compare__text{inset-inline-start:var(--ic-pad-sm)}[data-orientation=vertical][data-text-position=end] .image-compare__text{inset-inline-end:var(--ic-pad-sm)}@media(prefers-reduced-motion:reduce){.image-compare__layer,.image-compare__handle,.image-compare__media:after{transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/image-compare.css.map */