.jh-comparison { --position: 50%; position: relative; width: 100%; aspect-ratio: 1.2; overflow: hidden; border-radius: 10px; background: #dce7f0; isolation: isolate; }
.jh-comparison .jh-layer { position: absolute; inset: 0; overflow: hidden; }
.jh-comparison .jh-before { clip-path: inset(0 calc(100% - var(--position)) 0 0); z-index: 1; }
.jh-comparison .jh-layer img { display: block; user-select: none; pointer-events: none; }
.jh-comparison .jh-layer img.jh-pair { position: absolute; width: 200%; max-width: none; height: auto; min-height: 100%; top: 50%; transform: translateY(-50%); }
.jh-comparison .jh-before img.jh-pair { left: 0; }
.jh-comparison .jh-after img.jh-pair { left: -100%; }
.jh-comparison .jh-layer img.jh-photo { width: 100%; height: 100%; object-fit: cover; }
.jh-comparison .jh-line { position: absolute; z-index: 2; left: var(--position); top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 14px rgba(0,0,0,.35); pointer-events: none; }
.jh-comparison .jh-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #071c39; border: 2px solid #1686ed; font: 700 19px/1 system-ui, sans-serif; box-shadow: 0 2px 10px #001b4055; }
.jh-comparison .jh-tag { position: absolute; z-index: 2; bottom: 10px; padding: 5px 9px; background: #071c39d9; color: white; border-radius: 5px; font: 700 11px/1.1 system-ui, sans-serif; letter-spacing: .06em; pointer-events: none; }
.jh-comparison .jh-tag-before { left: 10px; }
.jh-comparison .jh-tag-after { right: 10px; }
.jh-comparison input[type="range"] { position: absolute; z-index: 3; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; touch-action: none; }
.jh-comparison:focus-within { outline: 3px solid #087df0; outline-offset: 3px; }