/* Both layers always occupy the same canvas; only the before layer is clipped. */
.design-comparison {
  --comparison-position:50%;
  position:relative;isolation:isolate;margin:0;min-width:0;
  background:#061711;overflow:hidden;
}
.comparison-stage {position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#061711}
.comparison-stage > img,.comparison-images,.comparison-images img {
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.design-comparison .comparison-stage img {
  object-fit:contain;object-position:center;filter:none;mask-image:none;
  -webkit-mask-image:none;border-radius:0;user-select:none;-webkit-user-drag:none;
}
.comparison-before {clip-path:inset(0 calc(100% - var(--comparison-position)) 0 0)}
.comparison-ui {position:absolute;inset:0;pointer-events:none}
.comparison-label,.comparison-concept {
  position:absolute;top:18px;z-index:2;padding:7px 13px;border:1px solid #d1ac685c;
  border-radius:999px;background:#061711d9;color:#fff4db;font-family:inherit;font-size:12px;font-weight:600;line-height:1.5;
  box-shadow:0 3px 12px #0002;pointer-events:none;
}
.comparison-label--before {left:16px}
.comparison-label--after {right:16px}
.comparison-concept {inset-inline-start:16px;top:auto;bottom:18px}
.comparison-divider {position:absolute;top:0;bottom:0;left:var(--comparison-position);width:1px;background:#e8c988;box-shadow:0 0 0 1px #06171120}
.comparison-handle {
  position:absolute;top:50%;left:clamp(23px,var(--comparison-position),calc(100% - 23px));
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  transform:translate(-50%,-50%);background:#d1ac68;color:#10271e;
  border:1px solid #f3deb1;box-shadow:0 4px 16px #0004;
  transition:scale .16s ease,box-shadow .16s ease;
}
.comparison-handle svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.comparison-range {
  position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;
  cursor:ew-resize;touch-action:pan-y pinch-zoom;direction:ltr;
}
.comparison-stage:has(.comparison-range:focus-visible) .comparison-handle {outline:3px solid #fff4db;outline-offset:4px;box-shadow:0 0 0 8px #061711b3}
.comparison-stage.is-dragging .comparison-handle {scale:1.04;box-shadow:0 5px 22px #0005}
.comparison-hint {position:absolute;bottom:16px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;margin:0;padding:6px 12px;border-radius:20px;background:#061711d9;color:#f8edda;font-size:11px;line-height:1.6;text-align:center;pointer-events:none}
.design-comparison [hidden] {display:none!important}
.design-comparison.is-ready .comparison-images {animation:comparison-enter .5s ease-out}
@keyframes comparison-enter {from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine) {.comparison-stage:has(.comparison-range:hover) .comparison-handle {box-shadow:0 5px 22px #0005}}
@media(prefers-reduced-motion:reduce) {
  .design-comparison.is-ready .comparison-images {animation:none}
  .comparison-handle {transition:none}
  .comparison-stage.is-dragging .comparison-handle {scale:1}
}

/* Keep the comparison ruler strictly within the rendered (object-fit:contain) image bounds. */
.design-comparison .comparison-divider{
  top:var(--comparison-photo-top,0px);
  bottom:auto;
  height:var(--comparison-photo-height,100%);
}
.design-comparison .comparison-handle{
  top:calc(var(--comparison-photo-top,0px) + var(--comparison-photo-height,100%) / 2);
}