/*! image-comparison */.page-width{margin:0 auto;padding-inline:3rem}.relative{position:relative}.absolute{position:absolute}.top-0{inset-block-start:0}.left-0{inset-inline-start:0}.flex-col{flex-direction:column}.gap-1{gap:.25rem}.title-wrapper{margin-block-end:clamp(var(--sp-8),2.526vw,var(--sp-12))}.gap-4{gap:var(--sp-4)}.items-start{align-items:flex-start}.grid{display:grid}.w-full{width:100%}.h-full{height:100%}.z-1{z-index:1}.block{display:block}.tracking-tight{letter-spacing:-.025em}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.pointer-events-none{pointer-events:none}.icon{width:1.375rem;height:1.375rem}.media--height>:is(img,svg,video-media){top:0;right:0;bottom:0;left:0;position:absolute;max-width:100%;width:100%;height:100%}.image-comparison{--percent: 50%;--button-touch: 44px;--button-line: 3px;--button-width: 28px;--button-height: 48px;--svg-width: 10px;border-radius:clamp(var(--sp-2d5),1.053vw,var(--sp-5))}.js .image-comparison{--percent: 10%}.js .image-comparison[animate]{--percent: 50%}.image-comparison.animating .comparison__after{transition:clip-path .7s cubic-bezier(.7,0,.3,1)}.image-comparison.animating .comparison__button{transition:.7s cubic-bezier(.7,0,.3,1);transition-property:inset-block-start,inset-inline-start}.image-comparison[data-layout=horizontal] .comparison__after{clip-path:inset(0px 0px 0px var(--percent))}.image-comparison[data-layout=vertical] .comparison__after{clip-path:inset(var(--percent) 0px 0px 0px)}.comparison__button{color:currentColor!important;background:none!important;border:none}.image-comparison[data-layout=horizontal] .comparison__button{inset-block-start:0;inset-inline-start:var(--percent);height:100%;width:var(--button-touch);margin-inline-start:calc(var(--button-touch) / -2);cursor:col-resize}.image-comparison[data-layout=vertical] .comparison__button{inset-inline-start:0;inset-block-start:var(--percent);width:100%;height:var(--button-touch);margin-block-start:calc(var(--button-touch) / -2);cursor:row-resize}.comparison__button:before,.comparison__button:after{content:"";z-index:-1;position:absolute;background-color:#fff}.image-comparison[data-layout=horizontal] .comparison__button:before,.image-comparison[data-layout=horizontal] .comparison__button:after{width:var(--button-line);height:50%;inset-inline-start:50%;margin-inline-start:calc(var(--button-line) / -2)}.image-comparison[data-layout=vertical] .comparison__button:before,.image-comparison[data-layout=vertical] .comparison__button:after{width:50%;height:var(--button-line);inset-block-start:50%;margin-block-start:calc(var(--button-line) / -2)}.image-comparison[data-layout=horizontal] .comparison__button:before{inset-block-start:0}.image-comparison[data-layout=horizontal] .comparison__button:after{inset-block-end:0}.image-comparison[data-layout=vertical] .comparison__button:before{inset-inline-start:0}.image-comparison[data-layout=vertical] .comparison__button:after{inset-inline-end:0}.text-base{font-size:var(--text-base);line-height:1.6}.text-xs{font-size:var(--text-xs);line-height:1.6}.media--400px{height:260px}.media--450px{height:292.5px}.media--500px{height:325px}.media--550px{height:357.5px}.media--600px{height:390px}.media--650px{height:422.5px}.media--700px{height:455px}.media--750px{height:487.5px}.media--850px{height:552.5px}.media--900px{height:585px}.media--100vh{height:100vh}@supports (height: 100svh){.media--100vh{height:100svh}}.text-center{text-align:center}.title-sm{font-size:var(--title-sm)}.title-md{font-size:var(--title-md)}.title-lg{font-size:var(--title-lg)}.title-xl{font-size:var(--title-xl)}.text-right{text-align:end}.heading{font-weight:700}.comparison__button span{inset-block-start:50%;inset-inline-start:50%;width:var(--button-width);height:var(--button-height);margin-inline-start:calc(var(--button-width) / -2);margin-block-start:calc(var(--button-height) / -2);border-radius:9999px;background-color:#fff}.image-comparison[data-layout=vertical] .comparison__button span{transform:rotate(90deg)}.comparison__button svg{width:var(--svg-width)}.comparison__after .placeholder{background-color:rgb(var(--color-base-text)/ .7)}.image-comparison.scrolling .comparison__box{opacity:0}.comparison__box{padding:clamp(var(--sp-5),2.105vw,var(--sp-10));color:rgb(var(--color-foreground));transition:opacity var(--animation-primary)}.comparison__box--center{align-items:center}.comparison__box--end{align-items:flex-end}.image-comparison[data-layout=vertical] .comparison__box{text-align:start;align-items:flex-end}.image-comparison[data-layout=vertical] .comparison__box--center{text-align:center}.image-comparison[data-layout=vertical] .comparison__box--end{text-align:end}.image-comparison[data-layout=vertical] .comparison__before .comparison__box{align-items:flex-start}[data-lazy-image] .image-comparison[data-layout=horizontal] .media.loading:before,[data-lazy-image] .image-comparison[data-layout=horizontal] .media.loading:after{inset-inline-start:calc(var(--percent) / 2)}[data-lazy-image] .image-comparison[data-layout=horizontal] .comparison__after .media.loading:before,[data-lazy-image] .image-comparison[data-layout=horizontal] .comparison__after .media.loading:after{inset-inline-start:calc(calc(100% - var(--percent)) / 2 + var(--percent))}[data-lazy-image] .image-comparison[data-layout=vertical] .media.loading:before,[data-lazy-image] .image-comparison[data-layout=vertical] .media.loading:after{inset-block-start:calc(var(--percent) / 2)}[data-lazy-image] .image-comparison[data-layout=vertical] .comparison__after .media.loading:before,[data-lazy-image] .image-comparison[data-layout=vertical] .comparison__after .media.loading:after{inset-block-start:calc(calc(100% - var(--percent)) / 2 + var(--percent))}@media screen and (max-width: 767px){.mobile\:media--200px{height:200px}.mobile\:media--250px{height:250px}.mobile\:media--300px{height:300px}.mobile\:media--400px{height:400px}.mobile\:media--500px{height:500px}.mobile\:media--600px{height:600px}.mobile\:media--100vh{height:90vh}@supports (height: 100svh){.mobile\:media--100vh{height:90svh}}.image-comparison:is(.media--adapt.mobile\:media--auto,.mobile\:media--adapt){height:auto}.image-comparison:is(.media--adapt.mobile\:media--auto,.mobile\:media--adapt) .media{height:0;padding-block-end:var(--ratio-percent)}.banner:is(.media--adapt.mobile\:media--auto,.mobile\:media--adapt) .media--height>img,.image-with-text__image:is(.media--adapt.mobile\:media--auto,.mobile\:media--adapt) .media--height>img{position:static}.banner:is(.media--adapt.mobile\:media--auto,.mobile\:media--adapt) .media--height>img:first-child~video,.image-with-text__image:is(.media--adapt.mobile\:media--auto,.mobile\:media--adapt) .media--height>img~video{position:absolute;inset-block-start:0;inset-inline-start:0}}.leading-none{line-height:1}@media screen and (min-width: 768px){.md\:items-center{align-items:center}.md\:text-2xl{font-size:var(--text-2xl);line-height:1.6}.md\:gap-2{gap:var(--sp-2)}.md\:text-base{font-size:var(--text-base);line-height:1.6}.md\:text-3xl{font-size:var(--text-3xl);line-height:1.6}.media>.mobile\:img{display:none}.media>.mobile\:img+:is(img,svg){display:block}.media--400px{height:340px}.media--450px{height:382.5px}.media--500px{height:425px}.media--550px{height:567.5px}.media--600px{height:510px}.media--650px{height:552.5px}.media--700px{height:595px}.media--750px{height:637.5px}.media--850px{height:722.5px}.media--900px{height:765px}.image-comparison.media--adapt .media{height:0;padding-block-end:var(--ratio-percent)}.banner.media--adapt .media--height>img:first-child,.image-with-text__image.media--adapt .media--height>img:first-child{position:static}.banner.media--adapt .media--height>img:first-child~video,.image-with-text__image.media--adapt .media--height>img:first-child~video{position:absolute;inset-block-start:0;inset-inline-start:0}.md\:justify-between{justify-content:space-between}}@media screen and (min-width: 1024px){.lg\:text-lg{font-size:var(--text-lg);line-height:1.6}.image-comparison{--button-line: 4px;--button-width: 38px;--button-height: 64px;--svg-width: 12px}.lg\:text-3xl{font-size:var(--text-3xl);line-height:1.6}}@media screen and (min-width: 1536px){.media--400px{height:400px}.media--450px{height:450px}.media--500px{height:500px}.media--550px{height:550px}.media--600px{height:600px}.media--650px{height:650px}.media--700px{height:700px}.media--750px{height:750px}.media--850px{height:850px}.media--900px{height:900px}}.custom-block-heading{font-size:18px}.custom-block-subheading{font-size:14px}@media screen and (min-width: 768px){.custom-block-heading{font-size:32px}.custom-block-subheading{font-size:22px}}
/*# sourceMappingURL=/cdn/shop/t/45/assets/image-comparison.css.map */