.before-after{background:var(--before-after-background, var(--bg))}.before-after__inner{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.7fr);gap:clamp(28px,5vw,72px);align-items:center}.before-after--content-right .before-after__content{order:2}.before-after--content-right .before-after__media{order:1}.before-after__content{max-width:420px}.before-after__eyebrow{margin-bottom:14px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.before-after__heading{margin:0 0 18px}.before-after__heading:not(.theme-content-heading){font-family:var(--font-display);font-size:clamp(34px,4vw,58px);font-weight:400;line-height:.98;color:var(--fg)}.before-after__text{color:var(--muted)}.before-after__frame{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);box-shadow:0 24px 70px #0000001a;touch-action:none}.before-after__frame--landscape{aspect-ratio:16 / 9}.before-after__frame--portrait{aspect-ratio:4 / 5}.before-after__frame--square{aspect-ratio:1}.before-after__image-layer{position:absolute;top:0;right:0;bottom:0;left:0}.before-after__image-layer--before{width:100%;overflow:hidden;z-index:2;clip-path:inset(0 calc(100% - var(--before-after-position)) 0 0)}.before-after__image,.before-after__placeholder{display:block;width:100%;height:100%;object-fit:cover}.before-after__label{position:absolute;top:18px;z-index:4;padding:8px 11px;border:1px solid rgba(255,255,255,.22);background:#00000070;color:#fff;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,visibility .18s ease,transform .18s ease}.before-after__label--before{left:18px}.before-after__label--after{right:18px}.before-after__frame.is-showing-before .before-after__label--before,.before-after__frame.is-showing-after .before-after__label--after{opacity:1;visibility:visible;transform:translateY(0)}.before-after__divider{position:absolute;top:18px;bottom:18px;left:var(--before-after-position);z-index:5;width:1px;transform:translate(-.5px);background:linear-gradient(to bottom,transparent,rgba(255,255,255,.95) 14%,rgba(255,255,255,.95) 86%,transparent);filter:drop-shadow(0 0 10px rgba(0,0,0,.24));pointer-events:none}.before-after__handle{position:absolute;top:50%;left:50%;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:#ffffffeb;color:var(--fg);box-shadow:0 12px 30px #00000038;transform:translate(-50%,-50%);transition:transform .22s ease,box-shadow .22s ease,background .22s ease}.before-after__handle:before{content:"";position:absolute;top:-9px;right:-9px;bottom:-9px;left:-9px;border:1px solid rgba(255,255,255,.32);border-radius:inherit;animation:before-after-pulse 2.4s ease-in-out infinite}.before-after__handle-arrow{width:7px;height:7px;border-top:2px solid currentColor;border-left:2px solid currentColor}.before-after__handle-arrow--left{transform:rotate(-45deg)}.before-after__handle-arrow--right{transform:rotate(135deg)}.before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.before-after__frame:hover .before-after__handle,.before-after__frame.is-dragging .before-after__handle{background:#fff;box-shadow:0 16px 38px #00000047;transform:translate(-50%,-50%) scale(1.08)}.before-after__frame.is-dragging .before-after__handle:before{animation:none;opacity:.5;transform:scale(1.12)}@keyframes before-after-pulse{0%,to{opacity:.26;transform:scale(.94)}50%{opacity:.58;transform:scale(1.08)}}@media(max-width:989px){.before-after__inner{grid-template-columns:1fr}.before-after--content-right .before-after__content,.before-after--content-right .before-after__media{order:initial}.before-after__content{max-width:620px}}@media(max-width:767px){.before-after__label{top:12px}.before-after__label--before{left:12px}.before-after__label--after{right:12px}.before-after__handle{width:38px;height:38px}}
/*# sourceMappingURL=/cdn/shop/t/3404/assets/before-after-slider.css.map */