.before-after{position:relative;overflow:hidden}.before-after__bg{position:absolute;top:0;right:0;bottom:0;left:0}.before-after__bg img{width:100%;height:100%;object-fit:cover}.before-after--image .before-after__bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:var(--before-after-overlay)}.before-after__container{position:relative;z-index:1;display:flex;flex-direction:column;gap:0;min-width:0}.before-after__container .section__header{margin-block-end:1.75rem}.before-after__container .section__header p{font-size:1rem;line-height:1.5625rem}.before-after__carousel{margin-inline:calc(var(--page-margin) * -1)}.before-after__carousel .carousel__track{padding-inline:var(--page-margin);scroll-padding-inline:var(--page-margin);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}@media(min-width:990px){.before-after__carousel{margin-inline:0}.before-after__carousel .carousel__track{padding-inline:0}}.before-after__slide{display:flex;flex-direction:column;gap:.625rem}.before-after__single{aspect-ratio:1;overflow:hidden;border:1px solid var(--ba-border, var(--color-taupe));border-radius:1rem;background-color:var(--color-card)}.before-after__single img{display:block;width:100%;height:100%;object-fit:cover}.before-after__pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;aspect-ratio:1;overflow:hidden;border:1px solid var(--ba-border, var(--color-taupe));border-radius:1rem;background-color:var(--ba-divider, #fff)}.before-after__photo{position:relative;overflow:hidden;background-color:var(--color-card)}.before-after__photo img,.before-after__photo svg{width:100%;height:100%;object-fit:cover}.before-after__tag{position:absolute;bottom:.75rem;left:50%;transform:translate(-50%);padding:.25rem .625rem;border-radius:999px;background-color:var(--ba-tag-bg, #fff);color:var(--ba-tag-text, #444);font-size:.65625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.before-after__caption{margin:0;color:var(--color-foreground-muted);font-size:.8125rem;line-height:1.25rem;text-align:left}.before-after__caption strong{font-weight:600}.before-after__nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-block-start:1.25rem}.before-after__arrow{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--ba-nav, var(--color-bronze));border-radius:50%;background:transparent;color:var(--ba-nav, var(--color-bronze));cursor:pointer}.before-after__arrow svg{width:1rem;height:1rem}.before-after__arrow[disabled]{opacity:.3;cursor:default}.before-after__dots{gap:.4375rem;margin:0}.before-after__dots .carousel__dot{width:.4375rem;height:.4375rem;border-radius:99px;background-color:var(--ba-dot-idle, var(--color-dot-idle));transition:width .2s ease}.before-after__dots .carousel__dot[aria-current=true]{width:1.25rem;background-color:var(--ba-dot, var(--color-bronze))}.before-after__legal{max-width:40rem;margin:1.5rem auto 0;padding-inline:.25rem;color:var(--color-foreground-muted);font-size:.8125rem;line-height:1.25rem;text-align:center}.before-after__cta{margin-block-start:1.75rem;text-align:center}.before-after__focus{--ba-slide: min(80vw, 30rem);margin-inline:calc(var(--page-margin) * -1)}@media(min-width:990px){.before-after__focus{--ba-slide: 32rem;margin-inline:calc((100vw - 100%)/-2)}}.before-after__focus{overflow:hidden;touch-action:pan-y}.before-after__focus:focus-visible{outline:none}.before-after__focus-track{position:relative;display:flex;gap:1rem;margin:0;padding:.5rem 0;list-style:none;transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform;-webkit-user-select:none;user-select:none}.before-after__focus-track img{-webkit-user-drag:none;pointer-events:none}.before-after__focus-slide{flex:0 0 var(--ba-slide);cursor:pointer;opacity:.45;filter:blur(var(--ba-blur, 4px)) saturate(.85);transform:scale(.88);transition:opacity .45s ease,filter .45s ease,transform .45s ease}.before-after__focus-slide.is-active{cursor:default;opacity:1;filter:none;transform:none}.before-after__focus-slide .before-after__caption{transition:opacity .3s ease}.before-after__focus-slide:not(.is-active) .before-after__caption{opacity:0}@media(prefers-reduced-motion:reduce){.before-after__focus-slide{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/86/assets/section-before-after.css.map */