.steps-with-compare{--stage-scale: calc(min(var(--viewport-px), var(--page-width-px)) / 1512);display:flex;flex-direction:column;align-items:center;padding:var(--padding-top) 0 var(--padding-bottom);overflow-x:clip}.steps-with-compare-header{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:rgb(var(--color-foreground))}.steps-with-compare-heading{max-width:640px;margin:0;text-transform:uppercase}.steps-with-compare-text{margin:0;font-weight:var(--font-weight-semibold);font-size:var(--text-base);line-height:var(--line-height-xl)}.steps-with-compare-stage{position:relative;width:100%;height:calc(670px * var(--stage-scale));margin-top:calc(42px - 95px * var(--stage-scale))}.steps-with-compare-stage-inner{position:absolute;top:0;left:50%;width:1512px;height:670px;transform:scale(var(--stage-scale)) translate(-50%);transform-origin:top left}.steps-with-compare-slider{--pos: 50%;position:absolute;top:95px;left:90px;width:656px;height:480px}.steps-with-compare-media{position:relative;width:100%;height:100%;border-radius:var(--radius-md);overflow:hidden}.steps-with-compare-layer{position:absolute;top:0;right:0;bottom:0;left:0}.steps-with-compare-image{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none}.steps-with-compare-layer-before{z-index:1;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}.steps-with-compare-line{position:absolute;top:0;bottom:0;left:var(--pos);z-index:2;width:2px;background:var(--white);transform:translate(-50%);pointer-events:none}.steps-with-compare-handle{position:absolute;top:50%;left:var(--pos);z-index:3;display:flex;align-items:center;gap:23px;transform:translate(-50%,-50%);pointer-events:none}.steps-with-compare-handle:before,.steps-with-compare-handle:after{content:"";width:0;height:0;border-block:18px solid transparent}.steps-with-compare-handle:before{border-right:18px solid var(--white)}.steps-with-compare-handle:after{border-left:18px solid var(--white)}.steps-with-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-radius:var(--radius-md);cursor:ew-resize;opacity:0;touch-action:none;-webkit-appearance:none;appearance:none}.steps-with-compare-range::-webkit-slider-thumb{width:1px;height:100%;-webkit-appearance:none;appearance:none}.steps-with-compare-range::-moz-range-thumb{width:1px;height:100%;border:none;background:transparent}.steps-with-compare-range:focus-visible{outline:3px solid var(--plum);outline-offset:-3px;opacity:1}.steps-with-compare-badge{position:absolute;top:-24px;left:35px;z-index:5;width:125px;pointer-events:none}.steps-with-compare-badge img{display:block;width:100%;height:auto}.steps-with-compare-sticker{position:absolute;bottom:-94px;left:-68px;z-index:5;width:170px;rotate:34.5deg;filter:drop-shadow(10px 10px 0 var(--pink-blush));pointer-events:none}@keyframes steps-with-compare-spin{to{transform:rotate(360deg)}}.steps-with-compare-sticker img{display:block;width:100%;height:auto;animation:steps-with-compare-spin 14s linear infinite}.steps-with-compare-card{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:341px;height:315px;background:var(--card-shape, none) center / contain no-repeat;text-align:center;color:var(--plum)}@keyframes steps-with-compare-reveal{0%{opacity:0;transform:translate(var(--reveal-shift, 0px))}to{opacity:1;transform:none}}.steps-with-compare-card.scroll-trigger{--reveal-shift: 150px;--reveal-delay: calc(.2s + var(--animation-order, 0) * .5s);opacity:0}.steps-with-compare-stage-inner:has(.steps-with-compare-card-1.scroll-trigger:not(.scroll-trigger--offscreen)) .steps-with-compare-card.scroll-trigger{animation:steps-with-compare-reveal 1.6s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--reveal-delay)}.steps-with-compare-card-1{top:178px;left:780px}.steps-with-compare-card-2{top:0;left:1110px}.steps-with-compare-card-3{top:342px;left:1090px}.steps-with-compare-number{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding-top:.25em;border-radius:var(--radius-round);background:var(--pink);box-shadow:2px 2px 0 var(--raspberry);font-family:var(--font-primary);font-weight:var(--font-weight-bold);font-size:var(--heading-2);line-height:1;color:var(--white)}.steps-with-compare-card-text{display:flex;flex-direction:column;gap:13px;max-width:232px}.steps-with-compare-card-title{margin:0;font-family:var(--font-primary);font-weight:var(--font-weight-black);font-size:var(--text-md);line-height:var(--line-height-s);letter-spacing:var(--letter-spacing-s)}.steps-with-compare-card-description{margin:0;font-weight:var(--font-weight-semibold);font-size:var(--text-base);line-height:var(--line-height-xl)}.steps-with-compare-card-description p{margin:0}.steps-with-compare-button{margin-top:42px}@media(prefers-reduced-motion:reduce){.steps-with-compare-card.scroll-trigger{--reveal-shift: 0px}.steps-with-compare-sticker img{animation:none}}@media(max-width:989px){.steps-with-compare{padding:var(--padding-top-mobile) 0 var(--padding-bottom-mobile)}.steps-with-compare-header{gap:7px}.steps-with-compare-heading{max-width:none}.steps-with-compare-text{max-width:300px;font-size:var(--text-base-sm)}.steps-with-compare-stage{height:auto;margin-top:26px;padding:0 12px}.steps-with-compare-stage-inner{position:static;display:flex;flex-direction:column;align-items:center;width:100%;height:auto;transform:none}.steps-with-compare-slider{position:relative;top:auto;left:auto;width:100%;height:auto;margin-bottom:20px;aspect-ratio:336 / 179}.steps-with-compare-media{border-radius:8px}.steps-with-compare-line{width:1px}.steps-with-compare-handle{gap:13px}.steps-with-compare-handle:before,.steps-with-compare-handle:after{border-block-width:10px}.steps-with-compare-handle:before{border-right-width:10px}.steps-with-compare-handle:after{border-left-width:10px}.steps-with-compare-range{border-radius:8px}.steps-with-compare-badge{top:-9px;right:4px;left:auto;width:55px}.steps-with-compare-sticker{bottom:-25px;left:-7px;width:43px;rotate:18deg;filter:drop-shadow(3px 3px 0 var(--pink-blush))}.steps-with-compare-card{position:static;gap:10px;width:280px;height:258px}.steps-with-compare-card.scroll-trigger{--reveal-delay: calc(var(--animation-order, 0) * .2s)}.steps-with-compare-card+.steps-with-compare-card{margin-top:12px}.steps-with-compare-number{width:40px;height:40px;font-weight:var(--font-weight-black);font-size:var(--heading-3-mobile)}.steps-with-compare-card-text{gap:6px;max-width:200px}.steps-with-compare-card-title{font-weight:var(--font-weight-bold);font-size:var(--text-base)}.steps-with-compare-card-description{font-size:var(--text-xs)}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/section-steps-with-compare.css.map */