.uv-mini-compare{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:14px;
  background:#ddd;
  --pos:50%;
  cursor:ew-resize;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}

.uv-mini-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}

.uv-mini-img-bottom{
  z-index:1;
}

.uv-mini-top{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
  -webkit-clip-path:inset(0 calc(100% - var(--pos)) 0 0);
  pointer-events:none;
}

.uv-mini-handle{
  position:absolute;
  top:0;
  left:var(--pos);
  transform:translateX(-50%);
  width:0;
  height:100%;
  z-index:3;
  pointer-events:none;
}

.uv-mini-line{
  width:2px;
  height:100%;
  background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.12);
}

.uv-mini-knob{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  color:#2f2d38;
}

.uv-mini-labels{
  position:absolute;
  top:8px;
  left:8px;
  right:8px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  z-index:4;
  pointer-events:none;
}

.uv-mini-pill{
  background:rgba(0,0,0,.6);
  color:#fff;
  padding:5px 8px;
  border-radius:20px;
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
}

.uv-mini-compare.is-loading{
  background:linear-gradient(
    90deg,
    #ececec 0%,
    #f6f6f6 18%,
    #ececec 36%,
    #ececec 100%
  );
  background-size:200% 100%;
  animation:uvMiniShimmer 1.2s linear infinite;
}

.uv-mini-compare.is-loading .uv-mini-img,
.uv-mini-compare.is-loading .uv-mini-top{
  opacity:0;
}

.uv-mini-compare:not(.is-loading) .uv-mini-img,
.uv-mini-compare:not(.is-loading) .uv-mini-top{
  opacity:1;
  transition:opacity .28s ease;
}

@keyframes uvMiniShimmer{
  0%{
    background-position:200% 0;
  }
  100%{
    background-position:-200% 0;
  }
}

@media(max-width:640px){
  .uv-mini-knob{
    width:34px;
    height:34px;
    font-size:14px;
  }

  .uv-mini-pill{
    font-size:10px;
    padding:4px 7px;
  }
}