@property --ba-position{syntax: "<percentage>"; inherits: true; initial-value: 50%;}.before-after{--dur-ba-reveal: .9s}.before-after [reveal-copy][reveal]{opacity:1;transition:none}.before-after [reveal-copy] .badge,.before-after [reveal-copy] .section-heading__subheading,.before-after [reveal-copy] .section-heading__heading,.before-after [reveal-copy] .section-heading__description,.before-after [reveal-copy] .section-heading__actions,.before-after [reveal-copy] .before-after-slider__cta{opacity:0;transform:translateY(var(--reveal-rise))}.before-after [reveal-copy] .badge,.before-after [reveal-copy] .section-heading__subheading{--line-step: 0}.before-after [reveal-copy] .section-heading__heading{--line-step: 1}.before-after [reveal-copy] .section-heading__description{--line-step: 2}.before-after [reveal-copy] .section-heading__actions{--line-step: 3}.before-after [reveal-copy] .before-after-slider__cta{--line-step: 4}.before-after [reveal-copy].is-revealed .badge,.before-after [reveal-copy].is-revealed .section-heading__subheading,.before-after [reveal-copy].is-revealed .section-heading__heading,.before-after [reveal-copy].is-revealed .section-heading__description,.before-after [reveal-copy].is-revealed .section-heading__actions,.before-after [reveal-copy].is-revealed .before-after-slider__cta{opacity:1;transform:none;transition:opacity var(--dur-wave) var(--ease-reveal),transform var(--dur-wave) var(--ease-reveal);transition-delay:calc(var(--line-step) * var(--reveal-step))}@media(prefers-reduced-motion:reduce){.before-after [reveal-copy] .badge,.before-after [reveal-copy] .section-heading__subheading,.before-after [reveal-copy] .section-heading__heading,.before-after [reveal-copy] .section-heading__description,.before-after [reveal-copy] .section-heading__actions,.before-after [reveal-copy] .before-after-slider__cta{transform:none}.before-after [reveal-copy].is-revealed .badge,.before-after [reveal-copy].is-revealed .section-heading__subheading,.before-after [reveal-copy].is-revealed .section-heading__heading,.before-after [reveal-copy].is-revealed .section-heading__description,.before-after [reveal-copy].is-revealed .section-heading__actions,.before-after [reveal-copy].is-revealed .before-after-slider__cta{transition:opacity var(--dur-base) ease}}.before-after__sliders{display:grid;gap:1.5rem}.before-after__split{display:grid;gap:2.5rem}@media(min-width:768px){.before-after__split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media(min-width:768px){.before-after__split .section-heading--has-actions.justify-content-start,.before-after__split .section-heading--has-actions.justify-content-center,.before-after__split .section-heading--has-actions.justify-content-end{flex-direction:column;align-items:stretch}}@media(min-width:768px){.before-after__split--image-left .before-after__slider-wrap{order:-1}}.before-after-slider{display:block;width:100%}.before-after-slider__track{--ba-position: 100%;min-height:var(--media-height-mobile, auto);-webkit-user-select:none;user-select:none}@media(min-width:768px){.before-after-slider__track{min-height:var(--media-height-desktop, auto)}}.before-after-slider.is-revealed .before-after-slider__track{--ba-position: 50%;transition:--ba-position var(--dur-ba-reveal) var(--ease-drawer);transition-delay:var(--reveal-delay, 0ms)}.before-after-slider.is-revealed .before-after-slider__track.is-live{transition:none}@media(prefers-reduced-motion:reduce){.before-after-slider__track,.before-after-slider.is-revealed .before-after-slider__track{--ba-position: 50%;transition:none}}.before-after-slider__ratio-spacer{display:none;visibility:hidden;inline-size:100%;aspect-ratio:var(--ratio-spacer-mobile, 1.33)}.before-after-slider__track.media-size-mobile-adaptive .before-after-slider__ratio-spacer{display:block}@media(min-width:768px){.before-after-slider__ratio-spacer{display:none;aspect-ratio:var(--ratio-spacer-desktop, var(--ratio-spacer-mobile, 1.33))}.before-after-slider__track.media-size-desktop-adaptive .before-after-slider__ratio-spacer{display:block}}.before-after-slider__panel{position:absolute;top:0;right:0;bottom:0;left:0}.before-after-slider__panel--before{clip-path:inset(0 calc(100% - var(--ba-position, 50%)) 0 0);z-index:1}.before-after-slider__panel--after{clip-path:inset(0 0 0 var(--ba-position, 50%))}.before-after-slider__img{position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%;block-size:100%;object-fit:cover;display:block;pointer-events:none}.before-after-slider__label{position:absolute;z-index:2;align-items:flex-start;gap:.375rem;max-inline-size:calc(50% - 2.5rem)}.before-after-slider__label--top{inset-block-start:1.25rem}.before-after-slider__label--bottom{inset-block-end:1.25rem}.before-after-slider__label--before{inset-inline-start:1.25rem}.before-after-slider__label--after{inset-inline-end:1.25rem;align-items:flex-end}.before-after-slider__label-tag{background:var(--color-accent);color:var(--color-accent-text);padding:.25rem .75rem;font-size:var(--font-subheading-size, .75rem);line-height:var(--font-body-line-height);max-inline-size:100%;overflow-wrap:anywhere}.before-after-slider__label-link{text-decoration:none;color:var(--label-link-color, var(--color-btn-tertiary-text));font-size:var(--font-body-size);line-height:var(--font-body-line-height);max-inline-size:100%;overflow-wrap:anywhere}.before-after-slider__label-link:not([aria-disabled=true]):hover{text-decoration:underline;opacity:.7}.before-after-slider__label-link--disabled{opacity:.5;cursor:not-allowed}.before-after-slider__divider{position:absolute;inset-block:0;inset-inline-start:var(--ba-position, 50%);transform:translate(-50%);inline-size:4px;z-index:3}.before-after-slider__handle{border:none;cursor:ew-resize;pointer-events:all;padding:12px;touch-action:none;box-shadow:0 2px 8px color-mix(in srgb,var(--color-overlay) 12%,transparent);color:var(--color-text);transition:box-shadow .15s ease;-webkit-tap-highlight-color:transparent}@media(min-width:768px){.before-after-slider__handle{padding:16px}}.before-after-slider__handle:hover{box-shadow:0 4px 16px color-mix(in srgb,var(--color-overlay) 18%,transparent)}.before-after-slider__handle-icon{display:block;flex-shrink:0;inline-size:18px;block-size:18px;min-inline-size:18px;min-block-size:18px}@media(min-width:768px){.before-after-slider__handle-icon{inline-size:22px;block-size:22px;min-inline-size:22px;min-block-size:22px}}.before-after-slider--horizontal .before-after-slider__panel--before{clip-path:inset(0 0 calc(100% - var(--ba-position, 50%)) 0)}.before-after-slider--horizontal .before-after-slider__panel--after{clip-path:inset(var(--ba-position, 50%) 0 0 0)}.before-after-slider--horizontal .before-after-slider__divider{inset-block-start:var(--ba-position, 50%);inset-block-end:auto;inset-inline:0;block-size:4px;inline-size:100%;transform:translateY(-50%);flex-direction:row}.before-after-slider--horizontal .before-after-slider__handle{cursor:ns-resize}.before-after-slider--horizontal .before-after-slider__handle-icon{transform:rotate(90deg)}.before-after-slider--horizontal .before-after-slider__label{max-inline-size:calc(100% - 2.5rem)}.before-after-slider--horizontal .before-after-slider__label--before{inset-block-start:1.25rem;inset-block-end:auto;inset-inline-start:auto}.before-after-slider--horizontal .before-after-slider__label--after{inset-block-start:auto;inset-block-end:1.25rem;inset-inline-end:auto}.before-after-slider--horizontal .before-after-slider__label--left{inset-inline-start:1.25rem;inset-inline-end:auto;align-items:flex-start}.before-after-slider--horizontal .before-after-slider__label--right{inset-inline-start:auto;inset-inline-end:1.25rem;align-items:flex-end}
/*# sourceMappingURL=/cdn/shop/t/101/assets/before-after.css.map */