.h-before-after{--h-position: 50%;--h-divider-color: #ffffff;--h-divider-width: 2px;--h-handle-bg: #ffffff;--h-handle-icon: #111111;--h-handle-size: 44px;--h-image-radius: 0px;--h-badge-color: #111111;--h-badge-bg: #ffffff;--h-badge-border: #e5e5e5;--h-badge-radius: 4px;--h-badge-font-size: 1.2rem;--h-badge-padding-x: 1rem;--h-badge-padding-y: .4rem;--h-text-gap: 2rem;--h-padding-top-mobile: 36px;--h-padding-bottom-mobile: 36px;--h-padding-top-desktop: 48px;--h-padding-bottom-desktop: 48px;background-color:var(--h-section-bg, transparent)}.h-before-after__inner{padding-block-start:var(--h-padding-top-mobile);padding-block-end:var(--h-padding-bottom-mobile)}@media screen and (min-width:750px){.h-before-after__inner{padding-block-start:var(--h-padding-top-desktop);padding-block-end:var(--h-padding-bottom-desktop)}}.h-before-after__header{margin-block-end:var(--h-text-gap)}.h-before-after__heading{margin:0}.h-before-after__description{margin-block-start:1rem;margin-block-end:0}.h-before-after__description>*:first-child{margin-block-start:0}.h-before-after__description>*:last-child{margin-block-end:0}.h-before-after__header--left{text-align:start}.h-before-after__header--center{text-align:center}.h-before-after__header--right{text-align:end}.h-before-after__compare{position:relative;width:100%;overflow:hidden;border-radius:var(--h-image-radius);touch-action:pan-y;user-select:none;-webkit-user-select:none}.h-before-after__compare.is-h-dragging{cursor:ew-resize;user-select:none;-webkit-user-select:none}.h-before-after__before,.h-before-after__before picture,.h-before-after__before img{display:block;width:100%;height:auto;max-width:100%}.h-before-after__before img{border-radius:var(--h-image-radius)}.h-before-after__after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;overflow:hidden;pointer-events:none;clip-path:inset(0 0 0 var(--h-position))}.h-before-after__after picture,.h-before-after__after img{display:block;width:100%;height:100%}.h-before-after__after img{object-fit:cover;object-position:center}.h-before-after__placeholder{display:flex;align-items:center;justify-content:center;width:100%;min-height:24rem;background-color:#0000000a;color:#00000073;font-family:var(--font-body-family);font-size:1.4rem;text-align:center;padding:2rem}.h-before-after__divider{position:absolute;top:0;bottom:0;left:var(--h-position);z-index:3;width:var(--h-divider-width);background-color:var(--h-divider-color);transform:translate(-50%);pointer-events:none}.h-before-after__handle{position:absolute;top:50%;left:var(--h-position);z-index:4;display:flex;align-items:center;justify-content:center;width:var(--h-handle-size);height:var(--h-handle-size);min-width:44px;min-height:44px;padding:0;border:none;border-radius:50%;background-color:var(--h-handle-bg);color:var(--h-handle-icon);box-shadow:0 1px 4px #0000002e;transform:translate(-50%,-50%);cursor:ew-resize;touch-action:none;appearance:none;-webkit-appearance:none}.h-before-after__handle:focus{outline:none}.h-before-after__handle:focus-visible{outline:2px solid var(--h-handle-icon);outline-offset:3px}.h-before-after__handle-icon{display:block;width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.h-before-after__badges{position:absolute;inset-block-start:1.2rem;inset-inline:1.2rem;z-index:2;display:flex;justify-content:space-between;gap:.8rem;pointer-events:none}.h-before-after__badge{display:inline-flex;align-items:center;max-width:calc(50% - .4rem);padding-block:var(--h-badge-padding-y);padding-inline:var(--h-badge-padding-x);border:1px solid var(--h-badge-border);border-radius:var(--h-badge-radius);background-color:var(--h-badge-bg);color:var(--h-badge-color);font-family:var(--font-body-family);font-size:var(--h-badge-font-size);font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.h-before-after__badge--before{margin-inline-end:auto}.h-before-after__badge--after{margin-inline-start:auto}@media screen and (max-width:749.98px){.h-before-after__badges{inset-block-start:.8rem;inset-inline:.8rem}.h-before-after__badge{max-width:calc(50% - .3rem)}.h-before-after__handle{min-width:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.h-before-after__after,.h-before-after__divider,.h-before-after__handle{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/67/assets/h-before-after.css.map */