/* Сравнение «до и после»: шторка поверх одного из двух фото. */
.ba-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 14px;
}
.ba-tab{
  padding:8px 16px;
  font:inherit;
  font-size:14px;
  color:#3a3a34;
  background:#f3f0e8;
  border:1px solid #e0dacb;
  border-radius:999px;
  cursor:pointer;
}
.ba-tab.is-active{
  color:#1f4d2b;
  background:#e6f1e2;
  border-color:#bcd8b7;
}
.ba-tab:focus-visible{
  outline:2px solid #a9cfa9;
  outline-offset:2px;
}
.ba-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}
.ba{
  position:relative;
  max-width:420px;
  aspect-ratio:3/4;
  margin:0 auto;
  overflow:hidden;
  border-radius:var(--radius,16px);
  box-shadow:0 6px 20px rgba(40,40,30,.10);
  touch-action:pan-y;
}
.ba-img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ba-before{
  position:absolute;
  inset:0;
  clip-path:inset(0 calc(100% - var(--ba,50%)) 0 0);
}
.ba-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--ba,50%);
  width:2px;
  margin-left:-1px;
  background:#fff;
  box-shadow:0 0 4px rgba(0,0,0,.35);
  pointer-events:none;
}
.ba-handle::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:28px;
  height:28px;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 5px rgba(0,0,0,.35);
}
.ba-label{
  position:absolute;
  top:10px;
  padding:3px 9px;
  font-size:12px;
  color:#fff;
  background:rgba(0,0,0,.45);
  border-radius:999px;
  pointer-events:none;
}
.ba-label-l{left:10px}
.ba-label-r{right:10px}
.ba-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
}
.ba-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.ba-chip{
  padding:5px 11px;
  font-size:13px;
  color:#3a3a34;
  background:#f3f0e8;
  border:1px solid #e0dacb;
  border-radius:999px;
}
.ba-note{
  margin:12px 0 0;
  font-size:13px;
  color:#6b6b60;
}
@media (max-width:760px){
  .ba-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}
@media (prefers-reduced-motion:reduce){
  .ba,.ba-before,.ba-handle,.ba-tab{
    transition:none;
  }
}