before-after{display:block;width:100%;--before-after-position: 0%;--before-after-divider-width: 2px;--before-after-handle-size: var(--minimum-touch-target, 44px)}.before-after__viewport{position:relative;overflow:hidden;width:100%;aspect-ratio:var(--before-after-ratio, 16 / 9);border-radius:var(--before-after-border-radius, 0);touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none}before-after[dragging] .before-after__viewport{cursor:grabbing}.before-after__layer{position:absolute;top:0;right:0;bottom:0;left:0}.before-after__layer img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.before-after__layer--before{z-index:1;clip-path:inset(0 calc(100% - var(--before-after-position)) 0 0)}.before-after__layer--after{z-index:0}.before-after__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--color-background-secondary, rgb(0 0 0 / .05))}.before-after__placeholder-svg{width:50%;height:auto;opacity:.35}.before-after__divider{position:absolute;top:0;bottom:0;left:var(--before-after-position);z-index:2;width:var(--before-after-divider-width);background-color:var(--color-background, #fff);box-shadow:0 0 8px #0003;pointer-events:none;transform:translate(-50%)}.before-after__handle{position:absolute;top:50%;left:var(--before-after-position);z-index:3;display:flex;align-items:center;justify-content:center;width:var(--before-after-handle-size);height:var(--before-after-handle-size);padding:0;border:2px solid var(--color-background, #fff);border-radius:50%;background-color:var(--color-foreground, #000);color:var(--color-background, #fff);box-shadow:0 2px 8px #00000040;transform:translate(-50%,-50%);pointer-events:none}.before-after__handle-icon{display:flex;gap:2px;pointer-events:none}.before-after__handle-icon span{display:block;width:2px;height:12px;border-radius:1px;background-color:currentcolor}.before-after__input{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;pointer-events:none}.before-after__input:focus,.before-after__input:focus-visible{pointer-events:auto}.before-after__input:focus-visible{opacity:1}before-after:has(.before-after__input:focus-visible) .before-after__handle{outline:2px solid var(--color-foreground, #000);outline-offset:2px}.before-after__label{position:absolute;z-index:2;padding:var(--padding-xs, .25rem) var(--padding-sm, .5rem);border-radius:var(--style-border-radius-inputs, 0);background-color:rgb(var(--color-background-rgb, 255 255 255) / .85);color:var(--color-foreground, #000);font-size:var(--font-size--xs, .75rem);font-weight:600;line-height:1.2;pointer-events:none}.before-after__label--before{top:var(--padding-sm, .75rem);left:var(--padding-sm, .75rem)}.before-after__label--after{top:var(--padding-sm, .75rem);right:var(--padding-sm, .75rem)}.before-after-section__figure{width:100%;margin:0}.before-after-section__caption{margin-block-start:var(--padding-sm, .75rem);width:100%;text-align:var(--text-align, left)}.before-after-section__caption a,.before-after-section__caption .paragraph a{color:inherit;text-decoration:underline}.before-after-section__caption .paragraph p{margin-block:var(--font-paragraph--spacing)}.before-after-section__caption .paragraph>*:first-child{margin-block-start:0}.before-after-section__caption .paragraph>*:last-child{margin-block-end:0}.before-after-section__header{margin-block-end:var(--padding-lg, 2rem)}.before-after-section__header>*{width:var(--width, 100%);max-width:100%;text-align:var(--text-align, left)}.before-after-section__header .before-after-section__description{margin-block-start:var(--padding-sm, .75rem)}.before-after-section__header .before-after-section__heading p{margin:0}.before-after-section__header .before-after-section__heading p+p{margin-block-start:.25em}.before-after-section__header .before-after-section__heading a,.before-after-section__header .before-after-section__description a{color:inherit;text-decoration:underline}.before-after-section__header .before-after-section__description p{margin-block:var(--font-paragraph--spacing)}.before-after-section__header .before-after-section__description>*:first-child{margin-block-start:0}.before-after-section__header .before-after-section__description>*:last-child{margin-block-end:0}@media screen and (max-width:749px){.before-after-section__header>*{text-align:var(--text-align-mobile, var(--text-align, left))}.before-after-section__caption{text-align:var(--text-align-mobile, var(--text-align, left))}}@media screen and (max-width:749px){.before-after__viewport{aspect-ratio:var(--before-after-ratio-mobile, var(--before-after-ratio, 16 / 9))}}@media(prefers-reduced-motion:no-preference){.before-after__divider,.before-after__handle,.before-after__layer--before{transition:none}before-after[dragging] .before-after__divider,before-after[dragging] .before-after__handle,before-after[dragging] .before-after__layer--before{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/265/assets/custom-before-after.css.map */