/* ===== Before & After (nhw) ===== */
.nhw-compare { position: relative; overflow: hidden; }
.nhw-compare__container {
  position: relative; display: block; width: 100%; max-width: 100%;
  min-height: 380px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none;
}
.nhw-compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nhw-compare__img--before { z-index: 10; clip: rect(0, auto, auto, 0); }
.nhw-compare__img--after  { z-index: 20; clip: rect(0, 100%, auto, auto); }

.nhw-compare__handle {
  position: absolute; inset: 0 auto 0 50%; transform: translateX(-50%);
  width: 0; height: 100%; cursor: ew-resize; z-index: 100;
}
.nhw-compare__handle::before,
.nhw-compare__handle::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%; background: rgba(255,255,255,.95);
  box-shadow: 0 0 10px rgba(0,0,0,.4);
}

.nhw-compare__handle-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; background-repeat: no-repeat; background-position: center; background-size: 42px 42px;
  background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44"><circle cx="22" cy="22" r="22" fill="rgba(0,0,0,0.45)"/><path d="M18 14l-8 8 8 8" stroke="%23fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M26 14l8 8-8 8" stroke="%23fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.nhw-compare__badge {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45); color: #fff; font-weight: 600; font-size: 15px;
  padding: 6px 10px; border-radius: 6px; z-index: 120;
}
.nhw-compare__badge--left  { left: 10px; }
.nhw-compare__badge--right { right: 10px; }

@media (max-width: 767px) {
  .nhw-compare__container { min-height: 260px; }
}