.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba { padding: var(--smx-space-8) 0; }
/* Spacing lives on a wrapper, like the other sections' heads: the global .smx-h2 resets its own margin. */
.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__head { margin-bottom: var(--smx-space-6); }

/* Mobile: comparison on top, product below. Desktop: comparison left, product right, same height. */
.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__grid { display: grid; gap: var(--smx-space-4); }

/* The range thumb is 44px wide and its centre travels from 22px to (100% - 22px):
   the divider and clip follow the same track so they stay under the finger. */
.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__compare {
  --x: calc(22px + (100% - 44px) * var(--p, 0.5));
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--smx-radius-lg);
  overflow: hidden;
  background: var(--smx-surface-200);
  user-select: none;
}

.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__img--before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }

.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__tag {
  position: absolute;
  top: var(--smx-space-4);
  z-index: 1;
  padding: 6px 12px;
  border-radius: var(--smx-radius-pill);
  background: rgba(19, 19, 24, 0.6);
  color: #ffffff;
  font: 700 13px/1 var(--smx-font);
  pointer-events: none;
}
.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__tag--before { left: var(--smx-space-4); }
.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__tag--after { right: var(--smx-space-4); }

.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__range {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100vh; }
.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__range::-moz-range-thumb { width: 44px; height: 100vh; border: 0; }

.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  z-index: 1;
  width: 2px;
  margin-left: -1px;
  background: #ffffff;
  pointer-events: none;
}

.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--smx-radius-pill);
  background: #ffffff;
  color: var(--smx-ink);
  box-shadow: 0 2px 10px rgba(19, 19, 24, 0.25);
  transform: translate(-50%, -50%);
}

.cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__range:focus-visible ~ .smx-ba__handle .smx-ba__knob { outline: 2px solid var(--smx-ink); outline-offset: 2px; }

@media (max-width: 767px) {
  .cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__compare { border-radius: var(--smx-radius-md); }
}

@media (min-width: 1024px) {
  .cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba { padding: var(--smx-space-12) 0; }
  .cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--smx-space-6); }
  .cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__grid--solo { grid-template-columns: minmax(0, 1fr); }
  /* Next to a product the comparison stretches to the card's height. */
  .cc_x0mYM5eqsR_aMVj7BecaZ .smx-ba__grid:not(.smx-ba__grid--solo) .smx-ba__compare { aspect-ratio: auto; min-height: 420px; }
}