.hsn-ba-wrap{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  touch-action: pan-y; /* keep vertical scroll on mobile; we handle horizontal drag */
  user-select: none;
}

.hsn-ba-wrap.hsn-ba-dragging{ cursor: ew-resize; }

/* Base (After) image */
.hsn-ba-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%!important;
  object-fit: cover;
  object-position: left;
  overflow:hidden;
}

/* Before overlay clipped; still full height */
.hsn-ba-before{
  position: absolute;
  inset: 0;
  width: 50%;
  height: 100%!important;
  overflow: hidden;
}

.hsn-ba-line{
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.75);
  pointer-events: none;
}

.hsn-ba-knob{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* drag anywhere */
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.hsn-ba-knob svg{
  width: 62%;
  height: 62%;
  display: block;
}
.hsn-ba-range{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* visually hidden but accessible */
  margin: 0;
  cursor: ew-resize;
}