before-after{display:block;width:100%;position:relative;box-sizing:border-box;--slider-pos: 50%;--text-bg-color: rgba(0, 0, 0, .65);--text-color: #ffffff;--text-blur-size: 16px;--text-padding: 16px;--text-border-radius: 12px;--handle-size: 48px;--divider-width: 3px;--divider-color: #ffffff}.before-after__figure{margin:0;padding:0;position:relative;width:100%;box-sizing:border-box}.before-after__stage{position:relative;width:100%;overflow:hidden;border-radius:var(--before-after-corner-radius, 12px);user-select:none;-webkit-user-select:none;background-color:#e5e5e5;box-shadow:0 4px 20px #00000014}.before-after__stage[style*=aspect-ratio]{height:auto}.before-after__layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.before-after__layer--before{z-index:1}.before-after__layer--after{z-index:2;clip-path:inset(0 0 0 var(--slider-pos, 50%));-webkit-clip-path:inset(0 0 0 var(--slider-pos, 50%));will-change:clip-path}.before-after__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}.before-after__badge{position:absolute;top:18px;z-index:3;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;background-color:var(--layer-text-bg-color, var(--text-bg-color, rgba(0, 0, 0, .65)));color:var(--layer-text-color, var(--text-color, #ffffff));border-radius:var(--layer-text-border-radius, var(--text-border-radius, 12px));box-shadow:0 0 var(--layer-text-blur-size, var(--text-blur-size, 16px)) calc(var(--layer-text-blur-size, var(--text-blur-size, 16px)) * .45) var(--layer-text-bg-color, var(--text-bg-color, rgba(0, 0, 0, .65)));backdrop-filter:blur(calc(var(--layer-text-blur-size, var(--text-blur-size, 16px)) * .6));-webkit-backdrop-filter:blur(calc(var(--layer-text-blur-size, var(--text-blur-size, 16px)) * .6));font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;pointer-events:none;line-height:1.2}.before-after__badge--before{left:18px;right:auto}.before-after__badge--after{right:18px;left:auto}.before-after__overlay-content{position:absolute;bottom:0;z-index:3;width:50%;padding:24px;box-sizing:border-box;display:flex;pointer-events:none}.before-after__overlay-content--before{left:50%;right:auto}.before-after__overlay-content--after{right:50%;left:auto}.before-after__overlay-content--before[data-text-position=start]{justify-content:flex-start;text-align:left}.before-after__overlay-content--before[data-text-position=center],.before-after__overlay-content--before:not([data-text-position]){justify-content:center;text-align:center}.before-after__overlay-content--before[data-text-position=end],.before-after__overlay-content--after[data-text-position=start]{justify-content:flex-end;text-align:right}.before-after__overlay-content--after[data-text-position=center],.before-after__overlay-content--after:not([data-text-position]){justify-content:center;text-align:center}.before-after__overlay-content--after[data-text-position=end]{justify-content:flex-start;text-align:left}.before-after__text-box{position:relative;max-width:90%;box-sizing:border-box;background-color:var(--layer-text-bg-color, var(--text-bg-color, rgba(0, 0, 0, .65)));color:var(--layer-text-color, var(--text-color, #ffffff));padding:var(--layer-text-padding, var(--text-padding, 16px));border-radius:var(--layer-text-border-radius, var(--text-border-radius, 12px));box-shadow:0 0 var(--layer-text-blur-size, var(--text-blur-size, 16px)) calc(var(--layer-text-blur-size, var(--text-blur-size, 16px)) * .45) var(--layer-text-bg-color, var(--text-bg-color, rgba(0, 0, 0, .65)));backdrop-filter:blur(calc(var(--layer-text-blur-size, var(--text-blur-size, 16px)) * .6));-webkit-backdrop-filter:blur(calc(var(--layer-text-blur-size, var(--text-blur-size, 16px)) * .6));pointer-events:auto;overflow:hidden;word-break:break-word;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;gap:6px}.before-after__text-title{margin:0;font-size:16px;font-weight:700;line-height:1.3;color:inherit;letter-spacing:-.01em}.before-after__text-description{margin:0;font-size:13px;line-height:1.45;color:inherit;opacity:.95}.before-after__text-description p{margin:0}.before-after__text-description p+p{margin-top:6px}.before-after__divider{position:absolute;top:0;bottom:0;left:var(--slider-pos, 50%);width:var(--divider-width, 3px);margin-left:calc(var(--divider-width, 3px) / -2);background-color:var(--divider-color, #ffffff);z-index:5;pointer-events:none;filter:drop-shadow(0 0 4px rgba(0,0,0,.45));will-change:left}.before-after__handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--handle-size, 48px);height:var(--handle-size, 48px);border-radius:50%;background:#fffffff2;border:2px solid #ffffff;box-shadow:0 4px 18px #0000004d,0 0 0 1px #00000014;display:flex;align-items:center;justify-content:center;gap:2px;color:#121212;transition:transform .15s ease,box-shadow .15s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:grab}.before-after__handle-arrow{width:14px;height:14px;display:block;fill:currentColor;flex-shrink:0}before-after:active .before-after__handle,.before-after__stage.is-dragging .before-after__handle{transform:translate(-50%,-50%) scale(1.1);cursor:grabbing;box-shadow:0 6px 24px #0006,0 0 0 2px #fffc}.before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;z-index:10;touch-action:pan-y;-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none}.before-after__range:focus-visible~.before-after__divider .before-after__handle{outline:3px solid #121212;outline-offset:3px;box-shadow:0 0 0 6px #ffffffe6,0 6px 24px #0006}@media screen and (max-width:749px){before-after{--handle-size: 42px;--divider-width: 2px}.before-after__badge{top:12px;padding:6px 12px;font-size:11px}.before-after__badge--before{left:12px}.before-after__badge--after{right:12px}.before-after__overlay-content{padding:10px;width:50%}.before-after__overlay-content--before{left:50%;right:auto}.before-after__overlay-content--after{right:50%;left:auto}.before-after__text-box{max-width:96%;padding:calc(var(--layer-text-padding, var(--text-padding, 16px)) * .7);box-shadow:0 0 calc(var(--layer-text-blur-size, var(--text-blur-size, 16px)) * .8) calc(var(--layer-text-blur-size, var(--text-blur-size, 16px)) * .35) var(--layer-text-bg-color, var(--text-bg-color, rgba(0, 0, 0, .65)));gap:3px}.before-after__text-title{font-size:13px;margin-bottom:0}.before-after__text-description{font-size:11px;line-height:1.35}}@media(prefers-reduced-motion:reduce){.before-after__handle,.before-after__divider,.before-after__layer--after{transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/103/assets/component-before-after.css.map */