.ba-section{background:#fff;position:relative;overflow:hidden;--ba-pos:50%}.ba-inner{max-width:1200px;margin:0 auto;padding:0 20px 70px}.ba-card{max-width:820px;margin:48px auto 0;background:#fff;border-radius:12px;box-shadow:0 8px 30px #00000014;border:1px solid rgba(0,0,0,.06);padding:34px 34px 26px}.ba-head{text-align:center;margin:0 0 20px}.ba-title{margin:0 0 8px;font-size:40px;line-height:1.05;font-weight:700;letter-spacing:-.02em}.ba-sub{margin:0;font-size:14px;color:#666}.ba-title__black{color:#111}.ba-title__pink{color:#c24ab8;font-style:italic;font-weight:700;margin-left:8px}.ba-grid{display:grid;grid-template-columns:minmax(0,680px) 64px;justify-content:center;gap:18px;align-items:center}.ba-grid--single{grid-template-columns:minmax(0,680px)}.ba-compare{width:100%}.ba-compare__wrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#f7f7f7;touch-action:none}.ba-layer--before{position:relative}.ba-layer--before img{width:100%;height:auto;display:block}.ba-layer--after{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0)}.ba-layer--after img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.ba-label{position:absolute;bottom:12px;padding:7px 10px;background:#111;color:#fff;font-size:12px;border-radius:8px;z-index:3}.ba-label--before{left:12px}.ba-label--after{right:12px}.ba-divider{position:absolute;top:0;bottom:0;left:var(--ba-pos);width:2px;transform:translate(-1px);background:#fff;pointer-events:none;z-index:4}.ba-handle{position:absolute;top:0;bottom:0;left:var(--ba-pos);width:2px;transform:translate(-1px);background:transparent;border:none;padding:0;cursor:ew-resize;z-index:5;touch-action:none}.ba-handle__dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:9999px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px #0000002e}.ba-handle__icon{width:20px;height:20px;color:#111;pointer-events:none}.ba-handle.is-drag .ba-handle__dot{transform:translate(-50%,-50%) scale(1.02)}.ba-hint{text-align:center;font-size:13px;color:#666;margin-top:12px}.ba-layer img{transition:opacity .18s ease;will-change:opacity}.ba-layer img.is-fading{opacity:0}.ba-swatches-wrapper{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;padding-top:0;min-width:0;overflow:visible}.ba-swatches-viewport{overflow:hidden;width:44px;max-height:276px;touch-action:pan-y;scrollbar-width:none;flex-shrink:0;padding:4px;margin:-4px;box-sizing:content-box}.ba-swatches-viewport::-webkit-scrollbar{display:none}.ba-swatches{display:flex;flex-direction:column;gap:14px;width:44px}.ba-snav{width:44px;height:44px;border-radius:50%;border:1px solid #8f00ff;background:#fff;color:#8f00ff;cursor:pointer;display:none;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:background .2s ease,color .2s ease,opacity .2s ease}.ba-snav:hover{background:#8f00ff;color:#fff}.ba-snav.is-disabled{opacity:.35;pointer-events:none}.ba-swatches-wrapper.has-overflow .ba-snav{display:flex}.ba-swatch{width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,.12);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;flex-shrink:0;transition:padding .12s ease,box-shadow .18s ease,border-color .18s ease}.ba-swatch__dot{width:100%;height:100%;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .12s ease}.ba-swatch[aria-current=true]{border-color:#d835ff;box-shadow:0 0 0 3px #d835ff2e;padding:3px}@media(max-width:900px){.ba-inner{padding:0 14px 56px}.ba-card{padding:22px 16px 18px;margin-top:-10px}.ba-title{font-size:30px}.ba-grid{grid-template-columns:1fr;gap:14px;overflow:hidden}.ba-swatches-wrapper{flex-direction:row;width:100%;max-width:100%;height:auto;gap:0;overflow:hidden;box-sizing:border-box;-webkit-mask-image:linear-gradient(to right,black 75%,transparent 96%);mask-image:linear-gradient(to right,black 75%,transparent 96%)}.ba-swatches-viewport{overflow-x:auto;overflow-y:hidden;width:100%;max-width:100%;max-height:none;touch-action:pan-x;-webkit-overflow-scrolling:touch}.ba-swatches{flex-direction:row;width:max-content;gap:12px;padding:4px 120px 4px 8px}.ba-swatch{width:44px;height:44px;flex-shrink:0}.ba-snav{display:none!important}}
/*# sourceMappingURL=/cdn/shop/t/55/assets/ba-before-after.css.map */