.before-after{background:var(--bg)}.before-after__inner{display:grid;grid-template-columns:var(--before-after-columns);column-gap:var(--before-after-column-gap);align-items:center}.before-after__content,.before-after__media{min-width:0;max-width:100%}.before-after--media-left .before-after__media{order:1}.before-after--media-left .before-after__content{order:2}.before-after-comparison{--before-after-control-size: 42px;--before-after-control-inset: clamp(12px, 2vw, 18px);--before-after-media-radius: var(--product-card-radius, 0px);display:block;min-width:0;max-width:100%}.before-after-comparison--control-small{--before-after-control-size: 34px}.before-after-comparison--control-large{--before-after-control-size: 52px}.before-after-comparison--radius-none{--before-after-media-radius: 0px}.before-after-comparison--radius-small{--before-after-media-radius: calc(var(--radius-md, 18px) * .5)}.before-after-comparison--radius-medium{--before-after-media-radius: var(--radius-md, 18px)}.before-after-comparison--radius-large{--before-after-media-radius: var(--radius-lg, 24px)}.before-after-comparison__frame{position:relative;overflow:hidden;isolation:isolate;width:100%;max-width:100%;aspect-ratio:var(--before-after-ratio-desktop);border-radius:var(--before-after-media-radius);background:transparent;box-shadow:0 24px 70px color-mix(in srgb,var(--fg) 10%,transparent);cursor:ew-resize;touch-action:none}.before-after-comparison--vertical .before-after-comparison__frame{cursor:ns-resize}.before-after-comparison__image-layer{position:absolute;top:0;right:0;bottom:0;left:0;min-width:0}.before-after-comparison__image-layer--before{z-index:2;overflow:hidden;clip-path:inset(0 calc(100% - var(--before-after-position)) 0 0)}[dir=rtl] .before-after-comparison--horizontal .before-after-comparison__image-layer--before{clip-path:inset(0 0 0 calc(100% - var(--before-after-position)))}.before-after-comparison--vertical .before-after-comparison__image-layer--before{clip-path:inset(0 0 calc(100% - var(--before-after-position)) 0)}.before-after-comparison__image,.before-after-comparison__image-layer>svg{display:block;width:100%;height:100%;max-width:none;object-fit:var(--before-after-media-fit)}.before-after-comparison__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}.before-after-comparison__controls{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;color:var(--fg);background:transparent;pointer-events:none}.before-after-comparison__label{position:absolute;inset-block-start:var(--before-after-control-inset);z-index:1;max-width:calc(50% - var(--before-after-control-inset));padding:8px 11px;overflow-wrap:break-word;border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);border-radius:var(--radius-sm, 8px);color:var(--fg);background:color-mix(in srgb,var(--bg) 88%,transparent);font-size:10px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,visibility .18s ease,transform .18s ease}.before-after-comparison__label--before{inset-inline-start:var(--before-after-control-inset)}.before-after-comparison__label--after{inset-inline-end:var(--before-after-control-inset)}.before-after-comparison--vertical .before-after-comparison__label--after{inset-block-start:auto;inset-block-end:var(--before-after-control-inset);transform:translateY(6px)}.before-after-comparison.is-label-before-visible .before-after-comparison__label--before,.before-after-comparison.is-label-after-visible .before-after-comparison__label--after,.before-after-comparison[data-label-visibility=always] .before-after-comparison__label{opacity:1;visibility:visible;transform:translateY(0)}.before-after-comparison__divider{position:absolute;inset-block:var(--before-after-control-inset);inset-inline-start:var(--before-after-position);width:1px;background:linear-gradient(to bottom,transparent,var(--fg) 14%,var(--fg) 86%,transparent);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--fg) 24%,transparent));transform:translate(-50%)}.before-after-comparison--vertical .before-after-comparison__divider{inset-block-start:var(--before-after-position);inset-block-end:auto;inset-inline:var(--before-after-control-inset);width:auto;height:1px;background:linear-gradient(to right,transparent,var(--fg) 14%,var(--fg) 86%,transparent);transform:translateY(-50%)}.before-after-comparison__handle{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--before-after-control-size) * .12);width:var(--before-after-control-size);height:var(--before-after-control-size);border:1px solid color-mix(in srgb,var(--fg) 32%,transparent);border-radius:50%;color:var(--fg);background:var(--bg);box-shadow:0 12px 30px color-mix(in srgb,var(--fg) 22%,transparent);transform:translate(-50%,-50%);transition:transform .22s ease,box-shadow .22s ease}.before-after-comparison__handle:before{position:absolute;inset:calc(var(--before-after-control-size) * -.2);border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);border-radius:inherit;content:"";animation:before-after-pulse 2.4s ease-in-out infinite}.before-after-comparison__handle-arrow{width:calc(var(--before-after-control-size) * .16);height:calc(var(--before-after-control-size) * .16);border-block-start:2px solid currentColor;border-inline-start:2px solid currentColor}.before-after-comparison--horizontal .before-after-comparison__handle-arrow--start{transform:rotate(-45deg)}.before-after-comparison--horizontal .before-after-comparison__handle-arrow--end{transform:rotate(135deg)}.before-after-comparison--vertical .before-after-comparison__handle{flex-direction:column}.before-after-comparison--vertical .before-after-comparison__handle-arrow--start{transform:rotate(45deg)}.before-after-comparison--vertical .before-after-comparison__handle-arrow--end{transform:rotate(-135deg)}.before-after-comparison__frame:hover .before-after-comparison__handle,.before-after-comparison.is-dragging .before-after-comparison__handle,.before-after-comparison__range:focus-visible+.before-after-comparison__controls .before-after-comparison__handle{box-shadow:0 16px 38px color-mix(in srgb,var(--fg) 28%,transparent);transform:translate(-50%,-50%) scale(1.08)}.before-after-comparison__range:focus-visible+.before-after-comparison__controls .before-after-comparison__handle{outline:2px solid var(--fg);outline-offset:4px}.before-after-comparison.is-dragging .before-after-comparison__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 screen and (max-width:989px){.before-after__inner{grid-template-columns:minmax(0,1fr);row-gap:var(--before-after-row-gap)}.before-after--mobile-content_first .before-after__content{order:1}.before-after--mobile-content_first .before-after__media{order:2}.before-after--mobile-media_first .before-after__media{order:1}.before-after--mobile-media_first .before-after__content{order:2}.before-after-comparison__frame{aspect-ratio:var(--before-after-ratio-mobile)}}@media screen and (max-width:767px){.before-after__inner.layout-container--flush .before-after__content .layout-safe-content-mobile{padding-inline:0}.before-after-comparison{--before-after-control-inset: 12px}}@media(prefers-reduced-motion:reduce){.before-after-comparison__label,.before-after-comparison__handle{transition:none}.before-after-comparison__handle:before{animation:none}.before-after-comparison__frame:hover .before-after-comparison__handle,.before-after-comparison.is-dragging .before-after-comparison__handle,.before-after-comparison__range:focus-visible+.before-after-comparison__controls .before-after-comparison__handle{transform:translate(-50%,-50%)}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/before-after-slider.css.map */