/* Scoped to the progressively enhanced comparison; native Divi is the fallback. */
.pp-comparison-ready .pp-comparison-room[hidden] { display: none !important; }
.pp-material-comparisons .pp-comparison-choices {
  display: flex; flex-wrap: wrap; gap: 8px; width: calc(100% - 48px); max-width: 1180px; margin: 0 auto 24px;
}
.pp-material-comparisons .pp-comparison-choices button {
  appearance: none; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.4;
  min-height: 44px; padding: 10px 16px; border: 1px solid var(--pp-line); border-radius: 8px;
  color: var(--pp-navy); background: var(--pp-surface); cursor: pointer;
}
.pp-material-comparisons .pp-comparison-choices button:hover { border-color: #b85f00; }
.pp-material-comparisons .pp-comparison-choices button[aria-pressed="true"] { background: var(--pp-orange); border-color: var(--pp-orange); }
.pp-material-comparisons .pp-comparison-choices button:focus-visible,
.pp-material-comparisons .pp-comparison-range:focus-visible { outline: 3px solid #b85f00; outline-offset: 4px; }
.pp-comparison-ready .pp-comparison-room { padding-top: 0 !important; }
.pp-comparison-ready .pp-comparison-viewport {
  position: relative; aspect-ratio: 3 / 2; width: 100%; overflow: hidden; border-radius: 8px;
  background: var(--pp-bg); cursor: ew-resize; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
.pp-comparison-ready .pp-comparison-viewport .et_pb_image {
  position: absolute !important; inset: 0; width: 100%; height: 100%; max-width: none !important;
  margin: 0 !important; padding: 0 !important; line-height: 0;
}
.pp-comparison-ready .pp-comparison-viewport .et_pb_image_wrap,
.pp-comparison-ready .pp-comparison-viewport img {
  display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain;
}
.pp-comparison-ready .pp-comparison-viewport .pp-comparison-matte,
.pp-comparison-ready .pp-comparison-viewport .pp-comparison-before { clip-path: inset(0 calc(100% - var(--pp-comparison-position, 50%)) 0 0); z-index: 1; }
.pp-comparison-ready .pp-comparison-viewport .pp-comparison-label {
  position: absolute !important; z-index: 3; top: 16px; left: 16px; margin: 0 !important;
  padding: 6px 12px !important; border-radius: 8px; color: #fff; background: var(--pp-navy);
  pointer-events: none; font-size: 16px; line-height: 1.4;
}
.pp-comparison-ready .pp-comparison-viewport .pp-comparison-label p { padding: 0; }
.pp-comparison-ready .pp-comparison-viewport .pp-comparison-label-satin,
.pp-comparison-ready .pp-comparison-viewport .pp-comparison-label-after { left: auto; right: 16px; }
.pp-comparison-ready .pp-comparison-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pp-comparison-position, 50%);
  width: 2px; background: #fff; z-index: 2; transform: translateX(-1px); pointer-events: none;
  box-shadow: 0 0 3px var(--pp-navy);
}
.pp-comparison-ready .pp-comparison-handle {
  position: absolute; top: 50%; left: clamp(22px, var(--pp-comparison-position, 50%), calc(100% - 22px));
  width: 44px; height: 44px; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--pp-navy); background: var(--pp-orange); border: 2px solid #fff; font-size: 24px; font-weight: 700;
}
.pp-comparison-ready .pp-comparison-focused { outline: 3px solid #b85f00; outline-offset: 3px; }
.pp-comparison-ready .pp-comparison-range {
  display: block; width: 100%; min-height: 44px; margin: 8px 0 0; padding: 0;
  appearance: none; -webkit-appearance: none; background: transparent !important; border: 0; box-shadow: none;
  accent-color: #b85f00; cursor: ew-resize;
}
.pp-comparison-ready .pp-comparison-range::-webkit-slider-runnable-track { height: 4px; background: var(--pp-line); border-radius: 8px; }
.pp-comparison-ready .pp-comparison-range::-moz-range-track { height: 4px; background: var(--pp-line); border-radius: 8px; }
.pp-comparison-ready .pp-comparison-range::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px;
  border: 2px solid var(--pp-navy); border-radius: 50%; background: var(--pp-orange);
}
.pp-comparison-ready .pp-comparison-range::-moz-range-thumb {
  width: 20px; height: 20px; border: 2px solid var(--pp-navy); border-radius: 50%; background: var(--pp-orange);
}
@media (max-width: 767px) {
  .pp-material-comparisons .pp-comparison-choices { width: calc(100% - 24px); gap: 8px; margin-bottom: 16px; }
  .pp-material-comparisons .pp-comparison-choices button { flex: 1 1 calc(50% - 8px); padding: 10px 8px; }
  .pp-comparison-ready .pp-comparison-viewport .pp-comparison-label { top: 8px; left: 8px; }
  .pp-comparison-ready .pp-comparison-viewport .pp-comparison-label-satin,
  .pp-comparison-ready .pp-comparison-viewport .pp-comparison-label-after { left: auto; right: 8px; }
}