@property --handle-position-start{syntax: "<length-percentage>"; inherits: true; initial-value: 0px;}.image-compare.need-animate{opacity:0}.image-compare.animated{opacity:1;transition:opacity var(--animate-time) var(--easing-ease)}.image-compare .image-compare__heading{margin-bottom:24px;padding:0 12px;text-align:center}.image-compare .image-compare-row{display:flex;flex-direction:column;gap:4px 12px}.image-compare .image-compare-col{overflow:hidden;border-radius:var(--global-border-radius)}.image-compare .image-compare-col.image-compare-col--small{background-color:var(--color-background-secondary);order:1}.image-compare .image-compare__content{display:flex;flex-direction:column;justify-content:center;height:100%;padding:26px 16px;text-align:center;gap:16px}.image-compare .image-compare__button{align-self:center}.image-compare img-comparison-slider{display:block;visibility:hidden;width:100%;cursor:pointer;--divider-width: 2px;--handle-position-start: 50%;transition:--handle-position-start var(--animate-time) var(--easing-ease)}.image-compare img-comparison-slider.handle-settled{--handle-position-start: calc(100% - 25px) }.image-compare img-comparison-slider:not(.rendered) .image-compare__image.image-compare__image--2,.image-compare img-comparison-slider:not(.rendered) .image-compare__handle{display:none}.image-compare img-comparison-slider:focus{outline:none}.image-compare img-comparison-slider:focus .image-compare__handle{outline:none}.image-compare img-comparison-slider:focus-visible .image-compare__handle{outline:2px solid var(--color-text-primary);outline-offset:2px}.image-compare img-comparison-slider [slot=second]{display:none}.image-compare img-comparison-slider.rendered{visibility:inherit}.image-compare img-comparison-slider.rendered [slot=second]{display:unset}.image-compare img-comparison-slider .image-compare__image{width:100%;height:var(--mobile_image_height);min-height:200px;object-fit:cover}.image-compare img-comparison-slider .image-compare__image.image-compare__image--1{object-position:var(--first-img-pos)}.image-compare img-comparison-slider .image-compare__image.image-compare__image--2{object-position:var(--second-img-pos)}.image-compare img-comparison-slider .image-compare__svg{width:100%;height:var(--mobile_image_height);background-color:#fff}.image-compare img-comparison-slider .image-compare__svg.image-compare__svg--black{background-color:#000;fill:#fff}.image-compare img-comparison-slider .image-compare__handle{display:flex;justify-content:center;align-items:center;width:64px;height:32px;border-radius:calc(var(--global-border-radius) * .75);background-color:#fff;gap:12px}.image-compare img-comparison-slider .image-compare__handle svg{fill:#000}.image-compare img-comparison-slider .image-compare__handle svg path{fill:inherit}@media(min-width:768px){.image-compare img-comparison-slider .image-compare__image,.image-compare img-comparison-slider .image-compare__svg{height:var(--desktop_image_height)}}@media(min-width:992px){.image-compare .image-compare__heading{margin-bottom:64px;padding:0}.image-compare .image-compare-row{flex-direction:row;justify-content:space-between}.image-compare .image-compare-row.image-compare-row--with-content{padding:12px}.image-compare .image-compare-col{width:100%}.image-compare .image-compare-col.image-compare-col--small{width:calc(29.78% - 6px);order:inherit}.image-compare .image-compare-col.image-compare-col--big{width:calc(70.23% - 6px)}.image-compare .image-compare__content{margin-bottom:0;padding:32px}.image-compare .image-compare__content{gap:22px}.image-compare img-comparison-slider.handle-settled{--handle-position-start: calc(100% - 54px) }.image-compare img-comparison-slider .image-compare__handle{width:96px;height:48px;gap:28px}.image-compare img-comparison-slider .image-compare__handle svg{width:20px;height:20px}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/image-compare.build.css.map */