.sa-before-after{position:relative}.sa-before-after__grid{display:grid;gap:2.4rem;align-items:center}.sa-before-after__panel{background:var(--sa-ba-panel-bg, #ececec);border-radius:var(--sa-ba-panel-radius, 24px);padding:clamp(1.6rem,3vw,3.2rem)}.sa-before-after__media{width:100%}.sa-before-after__helper{margin:0 0 1.2rem;text-align:center;font-size:var(--sa-type-global-size-05, 1.2rem);font-weight:var(--sa-type-global-weight-04, 600);letter-spacing:var(--sa-type-global-track-02, .01em);color:rgba(var(--color-foreground),.72)}.sa-before-after__frame{position:relative;width:100%;border-radius:var(--sa-radius-2xl-px, 24px);overflow:hidden;background:#0000000f;aspect-ratio:var(--sa-ba-ratio-mobile, 4 / 3)}.sa-before-after__images,.sa-before-after__image{position:absolute;top:0;right:0;bottom:0;left:0}.sa-before-after__image{overflow:hidden}.sa-before-after__image--before{width:100%;left:0;right:0;clip-path:inset(0 calc(100% - var(--sa-ba-position, 50%)) 0 0)}@supports not (clip-path: inset(0 0 0 0)){.sa-before-after__image--before{width:var(--sa-ba-position, 50%);right:auto}}.sa-before-after__image img,.sa-before-after__image svg{width:100%;height:100%;object-fit:cover;display:block}.sa-before-after__labels{position:absolute;top:1.2rem;left:0;right:0;z-index:2;pointer-events:none}.sa-before-after__label{color:var(--sa-ba-label-color, #ffffff);font-size:var(--sa-type-global-size-05, 1.2rem);font-weight:var(--sa-type-global-weight-04, 600);letter-spacing:var(--sa-type-global-track-11, .01em);text-transform:uppercase;padding:.4rem 1rem;border-radius:var(--sa-radius-pill, 999px);position:absolute;top:0;white-space:nowrap;transition:opacity .2s ease}.sa-before-after__label--before{background:var(--sa-ba-label-bg-before, #ff8a4c);left:1.2rem}.sa-before-after__label--after{background:var(--sa-ba-label-bg-after, #ff8a4c);left:var(--sa-ba-label-after-left, calc(var(--sa-ba-position, 50%) + .6rem))}.sa-before-after__frame--hide-after .sa-before-after__label--after{opacity:0}.sa-before-after__handle{position:absolute;top:0;bottom:0;left:var(--sa-ba-position, 50%);width:3px;background:var(--sa-ba-handle-fill, #ffffff);box-shadow:var(--sa-shadow-sa-before-after-layer-02, 0 0 0 1px rgba(0, 0, 0, .12));transform:translate(-1px);z-index:2;pointer-events:none}.sa-before-after__handle-inner{display:none}.sa-before-after__handle:after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;background:var(--sa-ba-handle-fill, #ffffff);border-radius:var(--sa-radius-circle, 50%);box-shadow:0 6px 16px #0000002e,0 1px 3px #00000024,inset 0 0 0 1px #fff9;transform:translate(-50%,-50%);transition:box-shadow .3s ease}.sa-before-after__handle:before{content:"";position:absolute;left:50%;top:50%;width:12px;height:18px;border-left:var(--sa-border-sa-before-after-left-01, 2px solid var(--sa-ba-handle-stroke, #111111));border-right:var(--sa-border-sa-before-after-right-01, 2px solid var(--sa-ba-handle-stroke, #111111));transform:translate(-50%,-50%);z-index:1}.sa-before-after--hint .sa-before-after__handle:after{animation:sa-before-after-handle-glow 1.4s ease-in-out 1}@keyframes sa-before-after-handle-glow{0%,to{box-shadow:0 6px 16px #0000002e,0 1px 3px #00000024,inset 0 0 0 1px #fff9,0 0 #fff0,0 0 #fff0}50%{box-shadow:0 8px 22px #00000038,0 1px 3px #00000024,inset 0 0 0 1px #ffffffbf,0 0 0 8px #ffffff2e,0 0 28px 8px #ffffff80}}.sa-before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;cursor:ew-resize;opacity:0;z-index:3;touch-action:pan-y;-webkit-appearance:none;appearance:none}.sa-before-after__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:44px}.sa-before-after__range::-moz-range-thumb{width:44px;height:44px;border:0;background:transparent}.sa-before-after__content{text-align:center}.sa-before-after__heading{margin:0 0 1rem}.sa-before-after__text{margin-bottom:2rem}.sa-before-after__button{display:inline-flex;justify-content:center;align-items:center;min-width:16rem;min-height:4.6rem;padding:0 2.2rem;font-size:var(--sa-type-global-size-07, 1.5rem);font-weight:var(--sa-type-global-weight-04, 600);line-height:1;letter-spacing:var(--sa-type-global-track-02, .01em);text-decoration:none;border:1px solid rgba(var(--color-button),.1);border-radius:var(--buttons-radius);background-color:rgb(var(--color-button));color:rgb(var(--color-button-text));box-shadow:0 .8rem 1.8rem rgba(var(--color-button),.08);transform:translateY(0);transition:transform .18s ease,color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease}.sa-before-after__button:before,.sa-before-after__button:after{content:none}.sa-before-after__button:not([aria-disabled=true]):hover{transform:translateY(-1px)}.sa-before-after__button[aria-disabled=true],.sa-before-after__button:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.sa-before-after__button:focus-visible{outline:2px solid rgba(var(--color-foreground),.3);outline-offset:2px}@media screen and (min-width:750px){.sa-before-after__frame{aspect-ratio:var(--sa-ba-ratio-desktop, 4 / 3)}}@media screen and (min-width:990px){.sa-before-after__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:3.2rem}.sa-before-after__content{text-align:center}}
/*# sourceMappingURL=/cdn/shop/t/38/assets/sa-before-after.css.map */