/* Circle variant */
.ba-wrap.is-circle{
  border-radius: 9999px;
  overflow: hidden;           /* ensure images are clipped */
  border: var(--ba-circle-border, 0); /* optional border from meta */
}
.ba-wrap.is-circle img{
  border-radius: inherit;     /* keep images perfectly round too */
}

.ba-grid{display:grid;gap:16px;grid-template-columns:repeat(var(--ba-cols,3),1fr)}
@media (max-width:1024px){.ba-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ba-grid{grid-template-columns:1fr}}
.ba-wrap{position:relative;overflow:hidden;border-radius:0;background:#000}
.ba-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-wrap .ba-after{clip-path:inset(0 0 0 50%)} /* AFTER on right by default */

/* drag anywhere */
.ba-wrap .ba-slider{position:absolute;inset:0;appearance:none;background:transparent;cursor:ew-resize;z-index:4}
.ba-wrap .ba-slider::-webkit-slider-thumb{appearance:none;width:40px;height:100%;background:transparent;border:none}
.ba-wrap .ba-slider::-moz-range-thumb{width:40px;height:100%;background:transparent;border:0}
.ba-wrap .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);z-index:3;pointer-events:none}
.ba-wrap .ba-handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:999px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25)}

/* (optional) hide legacy spans if you removed labels */
.ba-wrap .ba-label{display:none!important}


/* make the wrapper box-size include the border */
.ba-wrap{ box-sizing: border-box; }

/* HARD override any global img rules from theme/Elementor */
.ba-wrap > img.ba-before,
.ba-wrap > img.ba-after{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;   /* defeat img{max-width:100%} side effects */
  object-fit: cover !important; /* fill the square/circle properly */
  display: block;
}

/* circle variant (keep as you had) */
.ba-wrap.is-circle{
  border-radius: 9999px;
  overflow: hidden;
  border: var(--ba-circle-border, 0);
}
.ba-wrap.is-circle img{ border-radius: inherit; }

.ba-wrap{display:block;width:100%;line-height:0;min-height:0;}
.ba-wrap.is-circle{aspect-ratio:auto;}