.before-after-spotlight{position:relative;z-index:0;isolation:isolate;overflow:hidden;color:var(--bas-text);background-color:var(--bas-bg);background-image:var(--bas-bg-desktop);background-repeat:no-repeat;background-position:center;background-size:cover}@media(max-width:767.98px){.before-after-spotlight{background-image:var(--bas-bg-mobile)}}.before-after-spotlight__inner{width:min(100% - 40px,var(--bas-max-width));margin:0 auto}.before-after-spotlight__header{max-width:720px;margin:0 auto 32px;text-align:center}.before-after-spotlight__eyebrow{margin-bottom:8px;color:var(--bas-muted);font-size:12px;line-height:1.2;text-transform:uppercase}.before-after-spotlight__heading{margin:0;color:var(--bas-heading);font-size:var(--bas-heading-size, 40px);line-height:1.15;letter-spacing:0}.before-after-spotlight__description{margin-top:12px;color:var(--bas-muted);font-size:var(--bas-description-size, 15px);line-height:1.5}.before-after-spotlight__description p{margin:0;font-size:inherit}.before-after-spotlight__viewport{position:relative;overflow:hidden}.before-after-spotlight__viewport:after{content:"";position:absolute;z-index:8;top:0;right:0;bottom:20px;width:34px;background:linear-gradient(to right,transparent,var(--bas-bg));pointer-events:none;transition:opacity .2s ease}.before-after-spotlight.is-at-end .before-after-spotlight__viewport:after{opacity:0}.before-after-spotlight__track{--bas-card-width: calc((100% - var(--bas-desktop-peek) - var(--bas-gap) * var(--bas-desktop-visible)) / var(--bas-desktop-visible));display:flex;gap:var(--bas-gap);overflow-x:auto;padding:8px 0 26px;scroll-padding-inline:0;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;outline:none}.before-after-spotlight__track:focus-visible{outline:3px solid #111;outline-offset:-3px}.before-after-spotlight__track::-webkit-scrollbar{display:none}.before-after-spotlight__slide{flex:0 0 var(--bas-card-width);scroll-snap-align:start;scroll-snap-stop:always}.before-after-spotlight__card{height:100%;overflow:hidden;border-radius:var(--bas-card-radius);color:var(--bas-text);background:var(--bas-card-bg);box-shadow:0 10px 32px rgba(0,0,0,var(--bas-shadow))}.before-after-spotlight__viewer{--bas-x: 50%;--bas-y: 50%;--bas-keyboard-x: 50%;position:relative;overflow:hidden;aspect-ratio:1;border-radius:var(--bas-card-radius);background:#e8e8e8;cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y pinch-zoom;isolation:isolate}.before-after-spotlight--portrait .before-after-spotlight__viewer{aspect-ratio:4 / 5}.before-after-spotlight--tall .before-after-spotlight__viewer{aspect-ratio:3 / 4}.before-after-spotlight__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}.before-after-spotlight__image--before{z-index:1}.before-after-spotlight__image--after{z-index:2;opacity:0;-webkit-mask-image:radial-gradient(circle var(--bas-radius) at var(--bas-x) var(--bas-y),#000 0 calc(100% - 3px),transparent 100%);mask-image:radial-gradient(circle var(--bas-radius) at var(--bas-x) var(--bas-y),#000 0 calc(100% - 3px),transparent 100%);transition:opacity .18s ease}.before-after-spotlight__viewer.is-active .before-after-spotlight__image--after{opacity:1}.before-after-spotlight__viewer.is-keyboard-mode .before-after-spotlight__image--after{opacity:1;-webkit-mask-image:none;mask-image:none;-webkit-clip-path:inset(0 calc(100% - var(--bas-keyboard-x)) 0 0);clip-path:inset(0 calc(100% - var(--bas-keyboard-x)) 0 0);transition:none}.before-after-spotlight__lens{position:absolute;z-index:5;left:var(--bas-x);top:var(--bas-y);width:calc(var(--bas-radius) * 2);height:calc(var(--bas-radius) * 2);border:2px solid rgba(255,255,255,.95);border-radius:50%;box-shadow:0 10px 28px #00000038,inset 0 0 0 1px #00000024;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.9);transition:opacity .18s ease,transform .2s cubic-bezier(.22,1,.36,1)}.before-after-spotlight__lens[role=slider]:focus-visible{opacity:1;outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #111,0 10px 28px #00000038}.before-after-spotlight__viewer.is-active .before-after-spotlight__lens{opacity:1;transform:translate(-50%,-50%) scale(1)}.before-after-spotlight__viewer.is-keyboard-mode .before-after-spotlight__lens{left:var(--bas-keyboard-x);top:50%;width:44px;height:100%;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:1;transform:translate(-50%,-50%)}.before-after-spotlight__viewer.is-keyboard-mode .before-after-spotlight__lens:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #000000a6,0 0 12px #00000059;transform:translate(-50%)}.before-after-spotlight__viewer.is-keyboard-mode .before-after-spotlight__lens[role=slider]:focus-visible{outline:3px solid #fff;outline-offset:-3px;box-shadow:0 0 0 3px #111}.before-after-spotlight__viewer.is-keyboard-mode .before-after-spotlight__lens:before{display:none}.before-after-spotlight--glow .before-after-spotlight__lens:before{content:"";position:absolute;inset:calc(var(--bas-glow-spread) * -1);border:2px solid var(--bas-glow-core);border-radius:50%;box-shadow:0 0 8px color-mix(in srgb,var(--bas-glow-core) var(--bas-glow-strength),transparent),0 0 var(--bas-glow-spread) color-mix(in srgb,var(--bas-glow-color) var(--bas-glow-strength),transparent);opacity:0;pointer-events:none;transform:scale(.92)}.before-after-spotlight--glow .before-after-spotlight__viewer.is-active.is-visible.is-idle .before-after-spotlight__lens:before{animation:bas-irradiation-pulse var(--bas-glow-speed) cubic-bezier(.4,0,.2,1) infinite}@keyframes bas-irradiation-pulse{0%,to{opacity:.38;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}.before-after-spotlight__label{position:absolute;z-index:6;top:12px;padding:6px 10px;border-radius:999px;color:#111;background:#ffffffe0;box-shadow:0 5px 16px #0000001a;font-size:11px;font-weight:600;pointer-events:none}.before-after-spotlight__label--before{left:12px}.before-after-spotlight__label--after{right:12px;opacity:0;transition:opacity .18s ease}.before-after-spotlight__viewer.is-active .before-after-spotlight__label--after,.before-after-spotlight__viewer.is-keyboard-mode .before-after-spotlight__label--after{opacity:1}.before-after-spotlight__hint{position:absolute;z-index:6;left:50%;bottom:14px;max-width:calc(100% - 30px);padding:8px 11px;border-radius:999px;color:#fff;background:#0000008f;font-size:11px;line-height:1.2;white-space:nowrap;pointer-events:none;transform:translate(-50%);transition:opacity .18s ease}.before-after-spotlight__viewer.is-active .before-after-spotlight__hint,.before-after-spotlight__viewer.is-keyboard-mode .before-after-spotlight__hint{opacity:0}.before-after-spotlight__hint--mobile{display:none}.before-after-spotlight__content{padding:15px 10px 10px}.before-after-spotlight__result-title{margin:0;color:var(--bas-heading);font-size:16px;line-height:1.3;letter-spacing:0}.before-after-spotlight__customer{display:flex;align-items:center;gap:5px;margin-top:7px;color:var(--bas-muted);font-size:12px}.before-after-spotlight__verified{width:15px;height:15px;display:inline-grid;place-items:center;border-radius:50%;color:#fff;background:var(--bas-muted)}.before-after-spotlight__verified svg{width:12px;height:12px;fill:currentColor}.before-after-spotlight__quote{min-height:3.2em;margin:11px 0 15px;padding:0;border:0;color:var(--bas-text);font-size:13px;line-height:1.55}.before-after-spotlight__product{min-height:70px;display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:color-mix(in srgb,var(--bas-text) 5%,var(--bas-card-bg))}.before-after-spotlight__product-image{width:48px;height:48px;flex:0 0 48px;overflow:hidden;border-radius:7px;background:#fff}.before-after-spotlight__product-image img{width:100%;height:100%;display:block;object-fit:cover}.before-after-spotlight__product-copy{min-width:0;display:flex;flex-direction:column;gap:3px;color:var(--bas-muted);font-size:11px;line-height:1.3}.before-after-spotlight__product-copy a{display:-webkit-box;overflow:hidden;color:var(--bas-heading);font-size:12px;font-weight:600;-webkit-box-orient:vertical;-webkit-line-clamp:2}.before-after-spotlight__controls{position:absolute;z-index:10;top:0;right:0;bottom:0;left:0;pointer-events:none}.before-after-spotlight__arrow{position:absolute;top:30%;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(0,0,0,.08);border-radius:50%;color:var(--bas-accent);background:#ffffffe6;box-shadow:0 6px 20px #00000026;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;pointer-events:auto;transform:translateY(-50%);transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease}.before-after-spotlight__arrow--prev{left:8px}.before-after-spotlight__arrow--next{right:8px}.before-after-spotlight__arrow:hover{transform:translateY(-50%) scale(1.08);box-shadow:0 9px 24px #0003}.before-after-spotlight__arrow:active{transform:translateY(-50%) scale(.94)}.before-after-spotlight__arrow:disabled{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-50%) scale(.85)}.before-after-spotlight__arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.before-after-spotlight__empty{width:100%;padding:70px 20px;text-align:center;background:#0000000a}@media(min-width:641px)and (max-width:989px){.before-after-spotlight__track{--bas-desktop-visible: 2;--bas-desktop-peek: 50px}}@media(max-width:640px){.before-after-spotlight__inner{width:calc(100% - 40px)}.before-after-spotlight__header{margin:0 20px 24px}.before-after-spotlight__heading{font-size:var(--bas-heading-size-mobile, 27px)}.before-after-spotlight__description{font-size:var(--bas-description-size-mobile, 15px)}.before-after-spotlight__track{--bas-card-width: min(var(--bas-mobile-width), calc(100vw - 88px) )}.before-after-spotlight__viewer{--bas-radius: var(--bas-mobile-radius)}.before-after-spotlight__image--after{opacity:1}.before-after-spotlight__lens{opacity:1;pointer-events:auto;touch-action:none;transform:translate(-50%,-50%) scale(1);cursor:grab}.before-after-spotlight__lens:active{cursor:grabbing}.before-after-spotlight__label--after{opacity:1}.before-after-spotlight__viewer.has-interacted .before-after-spotlight__hint{opacity:0}.before-after-spotlight--glow .before-after-spotlight__viewer.has-interacted.is-visible:not(.is-dragging) .before-after-spotlight__lens:before{animation:bas-irradiation-pulse var(--bas-glow-speed) cubic-bezier(.4,0,.2,1) var(--bas-glow-delay) infinite}.before-after-spotlight__hint--desktop{display:none}.before-after-spotlight__hint--mobile{display:inline}.before-after-spotlight__content{padding-inline:8px}.before-after-spotlight__arrow{width:36px;height:36px;top:28%}.before-after-spotlight__arrow--prev{left:4px}.before-after-spotlight__arrow--next{right:4px}}@media(prefers-reduced-motion:reduce){.before-after-spotlight__image--after,.before-after-spotlight__lens,.before-after-spotlight__label--after,.before-after-spotlight__hint,.before-after-spotlight__arrow{transition:none}.before-after-spotlight--glow.before-after-spotlight--respect-motion .before-after-spotlight__lens:before{animation:none!important}.before-after-spotlight--glow.before-after-spotlight--respect-motion .before-after-spotlight__viewer.is-active.is-visible.is-idle .before-after-spotlight__lens:before,.before-after-spotlight--glow.before-after-spotlight--respect-motion .before-after-spotlight__viewer.has-interacted.is-visible:not(.is-dragging) .before-after-spotlight__lens:before{animation:none;opacity:.65;transform:scale(1)}}.no-js .before-after-spotlight__lens[role=slider]{display:none}
/*# sourceMappingURL=/cdn/shop/t/6/assets/before-after-spotlight.css.map?bas_version=20260724_1 */