.before-after-section{text-align:center}.before-after-section h2{margin-bottom:.3125rem}.before-after-section p{margin-bottom:1.25rem}.before-after-section .btn{margin-bottom:2.0625rem}.before-after-content{position:relative;width:100%;max-width:900px;margin:auto;display:inline-block}.before-after-content .media{border-radius:var(--border-radius-container);background:rgb(var(--color-background))}.before-after__img-before:before{content:"";height:100%;width:8px;background:rgb(var(--color-background));z-index:1;position:absolute;transform:translate(-50%);left:var(--clip-path-offset, 50%)}.before-after__img-before .placeholder-svg{fill:rgb(var(--color-background));background-color:rgba(var(--color-foreground),.1)}.before-after-content__arrow{position:absolute;background:rgb(var(--color-background));border-radius:50%;transform:translate(-50%,-50%);top:50%;left:var(--clip-path-offset, 50%);height:50px;width:50px;display:flex;align-items:center;z-index:2;pointer-events:none}.before-after-content__arrow .icon{flex:1;width:16px;height:16px}.before-after__img-after{clip-path:inset(0 0 0 var(--clip-path-offset, 50%));position:absolute;top:0;bottom:0;left:0;right:0}.before-after__slider-wrap{position:absolute;width:calc(100% + 50px);top:0;bottom:0;left:-25px;right:0}.before-after__slider{display:block;position:relative;left:0;z-index:1;width:100%;height:100%}.before-after__slider input[type=range]{height:100%;-webkit-appearance:none;-moz-appearance:none;border:none;padding:0;background-color:transparent;z-index:2}.before-after__slider input[type=range]:focus,.before-after__slider input[type=range]:active{border:none;outline:none}.before-after__slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:50px;width:50px;border-radius:50%;cursor:pointer;background:rgb(var(--color-background));box-shadow:0 0 2px #0000004d}.before-after__slider input[type=range]::-moz-range-track{-moz-appearance:none;height:15px;width:100%;background-color:transparent;position:relative;outline:none}@media only screen and (max-width:767px){.before-after__img-before:before{width:6px}.before-after-content__arrow{height:40px;width:40px}.before-after__slider-wrap{width:calc(100% + 40px);left:-20px}.before-after__slider input[type=range]::-webkit-slider-thumb{height:40px;width:40px}}.before-after-content__arrow{width:52px;height:52px;justify-content:center;background:#422b47;border:2px solid #FBF8F5;box-shadow:0 4px 14px #422b4759,0 1px 3px #0000002e;box-sizing:border-box}.before-after-content__arrow .ba-chevrons{display:block;width:40px;height:16px;flex:none}.before-after__img-before:before{cursor:ew-resize}.before-after__slider input[type=range]{cursor:ew-resize;touch-action:pan-y}.before-after__slider input[type=range]::-webkit-slider-thumb{width:52px;height:52px;background:transparent;box-shadow:none;cursor:ew-resize}.before-after__slider input[type=range]::-moz-range-thumb{width:52px;height:52px;border:none;border-radius:50%;background:transparent;cursor:ew-resize}.before-after__slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fbf8f5,0 0 0 5px #422b47}.before-after__slider-wrap{width:calc(100% + 52px);left:-26px}.ba-drag-hint{margin:.75rem 0 0;font-family:Trio Grotesk,Helvetica,Arial,sans-serif;font-size:.75rem;line-height:1.2;text-transform:uppercase;letter-spacing:.16em;color:#422b47}.before-after-section .ba-drag-hint{margin-bottom:0}@media only screen and (max-width:767px){.before-after-content__arrow{width:52px;height:52px}.before-after__slider-wrap{width:calc(100% + 52px);left:-26px}.before-after__slider input[type=range]::-webkit-slider-thumb{width:52px;height:52px}.ba-drag-hint{font-size:.6875rem}}.before-after-content__arrow{transition:transform .25s ease,box-shadow .25s ease}.ba-chevrons{overflow:visible}.ba-chevrons path{transition:transform .25s ease}.ba-drag-hint{transition:color .25s ease}.before-after-section:has(input[type=range]:focus-visible) .before-after-content__arrow,.before-after-content:active .before-after-content__arrow{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 4px #c99c3273,0 0 18px 4px #c99c3259,0 4px 14px #422b4759}.before-after-section:has(input[type=range]:focus-visible) .ba-chev-l{transform:translate(-3px)}.before-after-section:has(input[type=range]:focus-visible) .ba-chev-r{transform:translate(3px)}.before-after-section:has(input[type=range]:focus-visible) .ba-drag-hint{color:#c99c32}@keyframes ba-pulse-l{0%,to{transform:translate(-3px)}50%{transform:translate(-6px)}}@keyframes ba-pulse-r{0%,to{transform:translate(3px)}50%{transform:translate(6px)}}@media(hover:hover){.before-after-section:hover .before-after-content__arrow{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 4px #c99c3273,0 0 18px 4px #c99c3259,0 4px 14px #422b4759}.before-after-section:hover .ba-chev-l{transform:translate(-3px);animation:ba-pulse-l 1.2s ease-in-out infinite}.before-after-section:hover .ba-chev-r{transform:translate(3px);animation:ba-pulse-r 1.2s ease-in-out infinite}.before-after-section:hover .ba-drag-hint{color:#c99c32}}.before-after-content:active .ba-chev-l,.before-after-content:active .ba-chev-r{animation:none!important}@media(prefers-reduced-motion:reduce){.ba-chev-l,.ba-chev-r{animation:none!important}.before-after-content__arrow,.ba-chevrons path{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/29/assets/section-before-after.css.map */