.m-before-after{padding:var(--section-padding-top) 0 var(--section-padding-bottom)}.m-before-after__wrapper{position:relative;margin-top:1.5rem}.m-before-after__grid{gap:var(--card-gap-mobile)}@media (min-width: 768px){.m-before-after__grid{gap:var(--card-gap)}}.m-before-after .m-section-header__heading{margin-bottom:.5rem;font-size:28px;font-weight:600}.m-before-after-card{background:var(--card-bg-color);border-radius:var(--card-border-radius);box-shadow:var(--card-shadow);overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);height:100%;display:flex;flex-direction:column}.m-before-after-card:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-2px)}.m-before-after-card__comparison{position:relative}.m-before-after__container{position:relative;width:100%;aspect-ratio:var(--image-aspect-ratio);overflow:hidden;border-radius:var(--card-border-radius) var(--card-border-radius) 0 0}.m-before-after__image{position:absolute;top:0;left:0;width:100%;height:100%}.m-before-after__image img{width:100%;height:100%;object-fit:cover;display:block}.m-before-after__after{clip-path:inset(0 0 0 50%)}.m-before-after__label{position:absolute;top:12px;padding:6px 12px;background:#000000b3;color:#fff;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;z-index:30;pointer-events:none}.m-before-after__label--before{left:12px}.m-before-after__label--after{right:12px;z-index:31}.m-before-after__slider{position:absolute;top:0;left:50%;width:3px;height:100%;background:var(--primary-color);cursor:col-resize;z-index:100;transform:translate(-50%);pointer-events:all;will-change:left;touch-action:none!important;-webkit-user-select:none;user-select:none}.m-before-after__slider-line{width:100%;height:100%;background:#fff;position:relative}.m-before-after__slider-line:before{top:-4px}.m-before-after__slider-line:after{bottom:-4px}.m-before-after__slider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:transparent;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:col-resize;z-index:25;pointer-events:all}.m-before-after__slider-handle svg{width:20px;height:20px;color:#fff}.m-before-after__placeholder{position:relative;width:100%;aspect-ratio:var(--image-aspect-ratio);background:#f5f5f5;display:flex;align-items:center;justify-content:center;border-radius:var(--card-border-radius) var(--card-border-radius) 0 0;overflow:hidden}.m-before-after__placeholder .m-placeholder-svg{width:100%;height:100%;opacity:.3;color:#999;object-fit:cover}.m-before-after-card__content{padding:20px 24px 24px;text-align:center}.m-before-after-card__name{font-size:1.1rem;font-weight:600;margin:0 0 8px;color:var(--text-color);line-height:1.3}.m-before-after-card__location{font-weight:400;opacity:.8}.m-before-after-card__description{font-size:.9rem;line-height:1.5;color:color-mix(in srgb,var(--text-color) 85%,transparent);margin:0}.m-before-after-card__description p{margin:0}@media (max-width: 767px){.m-before-after-card__content{padding:16px 20px 20px}.m-before-after-card__name{font-size:1rem}.m-before-after-card__description{font-size:.85rem}.m-before-after__slider-handle{width:40px;height:40px}.m-before-after__slider-handle svg{width:16px;height:16px}.m-before-after__label{font-size:11px;padding:4px 8px}}.m-before-after__container.is-dragging{-webkit-user-select:none;user-select:none}.m-before-after__container.is-dragging .m-before-after__slider-handle{transform:translate(-50%,-50%) scale(1.1)}.m-before-after__container.is-dragging .m-before-after__slider{background:color-mix(in srgb,var(--primary-color) 90%,transparent)}.m-before-after-card{animation:fadeInUp .6s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.m-before-after-card[style*=animation-order]{animation-delay:calc(var(--animation-order) * .1s);animation-fill-mode:both}@media (hover: none) and (pointer: coarse){.m-before-after__slider-handle{width:52px;height:52px}.m-before-after__slider{width:6px}}.m-before-after__slider-wrapper{position:relative}.m-before-after-swiper{position:relative;overflow:visible}.m-before-after-swiper .swiper-slide{height:auto}.m-before-after-swiper .swiper-slide{height:auto;touch-action:pan-x pan-y}.m-before-after-swiper .swiper-slide .m-before-after-card__content{touch-action:pan-x pan-y;pointer-events:all}.m-before-after-swiper .swiper-wrapper{touch-action:pan-x pan-y}.m-before-after-swiper .m-before-after__container{position:relative;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.m-before-after__slider{position:absolute;top:0;left:50%;width:3px;height:100%;background:var(--primary-color);cursor:col-resize;z-index:100;transform:translate(-50%);touch-action:none;pointer-events:all;-webkit-user-select:none;user-select:none;will-change:left}.m-before-after__slider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:transparent;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:col-resize;z-index:101;touch-action:none;pointer-events:all;-webkit-user-select:none;user-select:none;transition:transform .2s ease}.m-before-after__slider-handle:hover{transform:translate(-50%,-50%) scale(1.1)}.m-before-after__slider-handle:active{transform:translate(-50%,-50%) scale(.95)}.m-before-after-swiper .swiper-button-prev,.m-before-after-swiper .swiper-button-next{width:48px;height:48px;margin-top:-24px;background:var(--card-bg-color);border:2px solid var(--primary-color);border-radius:50%;box-shadow:var(--card-shadow);color:var(--primary-color);font-size:18px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:10;opacity:.9}.m-before-after-swiper .swiper-button-prev:hover,.m-before-after-swiper .swiper-button-next:hover{box-shadow:var(--card-shadow-hover);transform:scale(1.1);opacity:1}.m-before-after-swiper .swiper-button-prev{left:-24px}.m-before-after-swiper .swiper-button-next{right:-24px}.m-before-after-swiper .swiper-button-prev:after,.m-before-after-swiper .swiper-button-next:after{font-size:18px;font-weight:700}.m-before-after-swiper .swiper-button-disabled{opacity:.3;cursor:not-allowed}.m-before-after-swiper .swiper-button-disabled:hover{color:var(--primary-color);transform:none}.m-before-after-swiper .swiper-pagination{position:relative;bottom:auto;margin-top:2rem;text-align:center;display:flex;justify-content:center;align-items:center}.m-before-after-swiper .m-dot{width:12px;height:12px;background:#0003;border-radius:50%;opacity:1;margin:0 6px;transition:all .3s ease;cursor:pointer;display:inline-block}.m-before-after-swiper .m-dot--active{background:var(--primary-color);transform:scale(1.2)}@media (max-width: 767px){.m-before-after-swiper .swiper-button-prev,.m-before-after-swiper .swiper-button-next{display:none}}@media (prefers-reduced-motion: reduce){.m-before-after-card{animation:none;transition:none}.m-before-after-card:hover{transform:none}.m-before-after__slider-handle:hover{transform:translate(-50%,-50%)}.m-before-after-swiper .swiper-button-prev:hover,.m-before-after-swiper .swiper-button-next:hover{transform:none}.m-before-after-swiper .m-dot{transition:none}.m-before-after-swiper .m-dot--active{transform:none}}.m-before-after-card__content,.m-before-after-card__content *{user-select:none;-webkit-user-select:none}.m-before-after__slider-wrapper .swiper-button-prev,.m-before-after__slider-wrapper .swiper-button-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:10;box-shadow:0 2px 8px #00000026;color:rgb(var(--color-foreground))}.m-before-after__slider-wrapper .swiper-button-prev:after,.m-before-after__slider-wrapper .swiper-button-next:after{display:none}.m-before-after__slider-wrapper .swiper-button-prev:hover,.m-before-after__slider-wrapper .swiper-button-next:hover{transform:translateY(-50%) scale(1.05)}.m-before-after__slider-wrapper .swiper-button-prev.swiper-button-disabled,.m-before-after__slider-wrapper .swiper-button-next.swiper-button-disabled{opacity:.3;cursor:not-allowed}.m-before-after__slider-wrapper .swiper-button-prev{left:10px}.m-before-after__slider-wrapper .swiper-button-next{right:10px}@media (max-width: 767px){.m-before-after__slider-wrapper .swiper-button-prev,.m-before-after__slider-wrapper .swiper-button-next{display:none}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/before-after.css.map */