.tw-image-compare{--tw-compare-ink: #11131a;position:relative;overflow:hidden;padding:clamp(72px,8vw,124px) 0;color:var(--tw-compare-ink);background:radial-gradient(circle at 92% 9%,color-mix(in srgb,var(--tw-compare-orange) 13%,transparent) 0,transparent 27%),var(--tw-compare-cream)}.tw-image-compare__shell{width:min(1120px,calc(100% - 40px));margin-inline:auto}.tw-image-compare__header{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);align-items:end;gap:40px;margin-bottom:clamp(30px,4vw,52px)}.tw-image-compare__eyebrow{margin:0 0 12px;color:var(--tw-compare-blue);font-size:.78rem;font-weight:760;letter-spacing:.13em;line-height:1.2;text-transform:uppercase}.tw-image-compare__heading{max-width:760px;margin:0;font-family:var(--font-heading--family);font-size:clamp(2.5rem,6vw,5.8rem);font-weight:700;letter-spacing:-.04em;line-height:.94;text-wrap:balance}.tw-image-compare__intro{max-width:460px;color:color-mix(in srgb,var(--tw-compare-ink) 72%,transparent);font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.6}.tw-image-compare__intro p{margin:0}.tw-image-compare__component{display:block}.tw-image-compare__legend{display:flex;justify-content:space-between;gap:20px;margin-bottom:14px}.tw-image-compare__label{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:740;letter-spacing:.08em;line-height:1.3;text-transform:uppercase}.tw-image-compare__dot{width:9px;height:9px;border-radius:50%;background:var(--tw-compare-blue)}.tw-image-compare__label--right .tw-image-compare__dot{background:var(--tw-compare-orange)}.tw-image-compare__stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16 / 10;border:1px solid color-mix(in srgb,var(--tw-compare-ink) 10%,transparent);border-radius:22px;background:var(--tw-compare-cream);box-shadow:0 28px 70px color-mix(in srgb,var(--tw-compare-ink) 12%,transparent);touch-action:pan-y}.tw-image-compare__image,.tw-image-compare__image img,.tw-image-compare__image svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.tw-image-compare__image img,.tw-image-compare__image svg{display:block;object-fit:cover}.tw-image-compare__image--right{z-index:1;clip-path:inset(0 0 0 var(--tw-compare-position))}.tw-image-compare__divider{position:absolute;z-index:2;top:0;bottom:0;left:var(--tw-compare-position);width:2px;background:#fff;box-shadow:0 0 0 1px #11131a1a;pointer-events:none;transform:translate(-50%)}.tw-image-compare__handle{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;gap:3px;width:54px;height:54px;border:1px solid rgb(17 19 26 / 10%);border-radius:50%;color:var(--tw-compare-ink);background:#fff;box-shadow:0 12px 30px #11131a2e;transform:translate(-50%,-50%);transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s ease}.tw-image-compare__handle span{display:block;width:2px;height:13px;border-radius:999px;background:currentColor}.tw-image-compare__range{position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;cursor:ew-resize;opacity:0}.tw-image-compare__stage:has(.tw-image-compare__range:focus-visible){outline:3px solid var(--tw-compare-blue);outline-offset:5px}.tw-image-compare__stage:has(.tw-image-compare__range:focus-visible) .tw-image-compare__handle{box-shadow:0 0 0 5px color-mix(in srgb,var(--tw-compare-blue) 28%,transparent),0 12px 30px #11131a2e}.tw-image-compare__stage:has(.tw-image-compare__range:active) .tw-image-compare__handle{box-shadow:0 0 0 7px color-mix(in srgb,var(--tw-compare-orange) 24%,transparent),0 8px 20px #11131a29;transform:translate(-50%,-50%) scale(.94)}@media(max-width:749px){.tw-image-compare{padding:64px 0 76px}.tw-image-compare__shell{width:min(100% - 28px,640px)}.tw-image-compare__header{grid-template-columns:1fr;gap:18px;margin-bottom:32px}.tw-image-compare__heading{font-size:clamp(2.65rem,13vw,4.4rem)}.tw-image-compare__intro{max-width:38rem}.tw-image-compare__label{max-width:46%;font-size:.69rem}.tw-image-compare__label--right{text-align:right}.tw-image-compare__stage{aspect-ratio:4 / 5;border-radius:22px}.tw-image-compare__handle{width:50px;height:50px}}@media(prefers-reduced-motion:reduce){.tw-image-compare__image--right,.tw-image-compare__divider,.tw-image-compare__handle{transition:none}.tw-image-compare__stage:has(.tw-image-compare__range:active) .tw-image-compare__handle{transform:translate(-50%,-50%)}}.tw-spectrum{padding:clamp(56px,7vw,104px) 0;color:var(--tw-spectrum-foreground);background:var(--tw-spectrum-background)}.tw-spectrum__shell{width:min(1040px,calc(100% - 32px));margin-inline:auto}.tw-spectrum__header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}.tw-spectrum__header h2{max-width:14ch;margin:0;font-family:var(--font-heading--family);font-size:clamp(2.3rem,5vw,4.5rem);line-height:.98}.tw-spectrum__header p{max-width:29ch;margin:0;line-height:1.5}.tw-spectrum__legend{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;font-size:.8rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.tw-spectrum .tw-spectrum__stage{aspect-ratio:561 / 303;min-height:260px;border-radius:20px;background:#fff}.tw-spectrum__stage .tw-image-compare__image img{object-fit:contain}.tw-spectrum__source{margin:14px 0 0;font-size:.85rem;line-height:1.5}.tw-spectrum__source a{color:inherit;text-underline-offset:.2em}@media(max-width:749px){.tw-spectrum__header{display:block}.tw-spectrum__header p{margin-top:14px}.tw-spectrum .tw-spectrum__stage{border-radius:14px}}.tw-image-compare__image--left img{object-position:center var(--tw-compare-left-y, 50%)}.tw-image-compare__image--right img{object-position:center var(--tw-compare-right-y, 50%)}@media(max-width:749px){.tw-image-compare__image--left img{object-position:center var(--tw-compare-left-mobile-y, 50%)}.tw-image-compare__image--right img{object-position:center var(--tw-compare-right-mobile-y, 50%)}}body[data-tw-page-type=product] .tw-image-compare__heading{font-size:clamp(1.75rem,3vw,var(--tw-product-heading-size, 40px));line-height:1.12}@media(max-width:749px){body[data-tw-page-type=product] .tw-image-compare__heading{font-size:clamp(1.5rem,7vw,min(2rem,var(--tw-product-heading-size, 40px)))}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/twenty-image-comparison.css.map */