.compare-section{background:var(--c-bg, #fff);color:var(--c-text, #1b1b1b);font-family:var(--c-font, inherit)}.compare-section__inner{max-width:var(--c-max-width, 1200px);padding:var(--c-padding-top, 48px) 20px var(--c-padding-bottom, 48px);margin:0 auto}.compare-section__header{text-align:center;margin-bottom:24px}.compare-section__title{font-size:clamp(20px,2.6vw,36px);line-height:1.2;margin:0 0 8px}.compare-section__subtitle{color:color-mix(in oklab,var(--c-text),#000 35%);opacity:.8;margin:0}.compare-list{display:grid;gap:28px}@media (min-width: 768px){.compare-list{grid-template-columns:repeat(2,1fr)}}.compare-item__title{font-weight:600;margin-bottom:12px;text-align:center}.compare-slider{position:relative;border-radius:var(--radius, var(--c-radius, 12px));overflow:hidden;background:#f5f5f5;isolation:isolate;aspect-ratio:var(--c-ar, auto);--pos: 50;min-height:var(--c-min-h, 320px)}.compare-slider__image-wrap{position:relative;width:100%;height:100%;min-height:var(--c-min-h, 320px)}.compare-slider__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}.compare-slider__image--after{clip-path:polygon(0 0,calc(var(--pos) * 1%) 0,calc(var(--pos) * 1%) 100%,0 100%)}.compare-slider__divider{position:absolute;top:0;bottom:0;left:calc(var(--pos) * 1%);width:var(--divider-thickness, 2px);background:var(--c-divider, rgba(255,255,255,.95));transform:translate(-50%);pointer-events:none}.compare-slider__handle{position:absolute;top:50%;left:calc(var(--pos) * 1%);transform:translate(-50%,-50%);width:var(--handle-size, 40px);height:var(--handle-size, 40px);border-radius:999px;background:var(--c-handle, #fff);border:1px solid var(--c-handle-border, rgba(0,0,0,.12));box-shadow:0 1px 2px #0000001f,0 6px 10px #00000014;cursor:ew-resize}.compare-slider__handle:focus-visible{outline:2px solid color-mix(in oklab,var(--c-accent, #2f6f4e),#fff 10%);outline-offset:3px}.compare-slider[data-focus-outline=false] .compare-slider__handle:focus-visible{outline:none}.compare-slider__label{position:absolute;top:12px;padding:6px 10px;background:#0000008c;color:#fff;font-size:12px;border-radius:999px;user-select:none;-webkit-user-select:none;pointer-events:none}.compare-slider__label--before{left:12px}.compare-slider__label--after{right:12px}.compare-slider:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--overlay-color);opacity:var(--overlay-opacity, 0);pointer-events:none}.compare-item__caption{display:grid;gap:10px;justify-items:center;margin-top:12px}.compare-item__button{display:inline-block;padding:10px 16px;border-radius:8px;background:var(--c-accent, #2f6f4e);color:#fff;text-decoration:none;transition:filter .2s ease}.compare-item__button:hover{filter:brightness(1.05)}.compare-section[data-shadow=s] .compare-slider{box-shadow:0 2px 12px #00000014}.compare-section[data-shadow=m] .compare-slider{box-shadow:0 4px 20px #0000001f}.compare-section[data-shadow=l] .compare-slider{box-shadow:0 8px 30px #00000029}@media (prefers-reduced-motion: no-preference){.compare-slider__image--after,.compare-slider__divider,.compare-slider__handle{transition:left var(--c-anim-dur, .3s) var(--c-ease, ease),transform var(--c-anim-dur, .3s) var(--c-ease, ease),clip-path var(--c-anim-dur, .3s) var(--c-ease, ease)}}.compare-section[data-reduce-motion=true] .compare-slider__image--after,.compare-section[data-reduce-motion=true] .compare-slider__divider,.compare-section[data-reduce-motion=true] .compare-slider__handle{transition:none!important}.compare-slider.is-stacked{aspect-ratio:auto;min-height:0}.compare-slider.is-stacked .compare-slider__image-wrap{position:relative;height:auto;min-height:0}.compare-slider.is-stacked .compare-slider__image{position:static;inset:auto;width:100%;height:auto;display:block;object-fit:cover}.compare-slider.is-stacked .compare-slider__image--after{clip-path:none}.compare-slider.is-stacked .compare-slider__divider,.compare-slider.is-stacked .compare-slider__handle{display:none}@supports not (aspect-ratio: 1 / 1){.compare-slider{min-height:320px}}.compare-slider__handle{min-width:44px;min-height:44px}.compare-slider{touch-action:pan-y}.compare-slider__handle{touch-action:none}.compare-slider__image--after,.compare-slider__divider,.compare-slider__handle{will-change:left,clip-path,transform}.compare-slider__placeholder{display:flex;align-items:center;justify-content:center;min-height:320px;color:#777;background:repeating-linear-gradient(45deg,#f2f2f2 0 10px,#eaeaea 10px 20px)}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.compare-text{display:grid;align-content:center;gap:var(--txt-gap, 16px);padding:clamp(12px,2vw,24px);border-radius:var(--c-radius, 12px);background:transparent;text-align:left}.compare-text__eyebrow{font-size:13px;letter-spacing:.06em;text-transform:none;color:color-mix(in oklab,var(--c-text, #1b1b1b),#000 35%);opacity:.9}.compare-text__title{font-weight:700;line-height:1.15;font-size:clamp(28px,4vw,var(--txt-title-size, 48px));margin:0}.compare-text__desc{color:color-mix(in oklab,var(--c-text, #1b1b1b),#000 25%);opacity:.9;max-width:56ch}.compare-text__button{display:inline-block;align-self:start;padding:12px 18px;border-radius:999px;background:var(--txt-accent, var(--c-accent, #2f6f4e));color:#fff;text-decoration:none;font-weight:600;box-shadow:0 1px 2px #0000001f,0 6px 14px #0000001a;transition:transform .12s ease,filter .2s ease}.compare-text__button:hover{filter:brightness(1.05)}.compare-text__button:active{transform:translateY(1px)}@media (min-width: 768px){.compare-text{padding:clamp(16px,3vw,32px)}}.compare-controls{display:none;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 0 16px;padding:10px;border:1px dashed rgba(0,0,0,.12);border-radius:10px;background:#00000005}.compare-controls.is-visible{display:flex}.compare-controls__group{display:flex;align-items:center;gap:6px}.compare-controls__label{font-size:12px;opacity:.8}.compare-controls select,.compare-controls input[type=text],.compare-controls button{height:34px;padding:0 10px;border:1px solid rgba(0,0,0,.15);border-radius:8px;background:#fff;font:inherit}.compare-controls input[type=color]{width:34px;height:34px;padding:0;border:1px solid rgba(0,0,0,.15);border-radius:8px;background:#fff}.compare-controls button{cursor:pointer;background:var(--c-accent, #2f6f4e);color:#fff;border-color:transparent}.compare-controls button:hover{filter:brightness(1.05)}
/*# sourceMappingURL=/cdn/shop/t/1/assets/before-after-compare.css.map */