/* WBL before-after (original). The "before" layer is clipped with clip-path (no layout work); the handle moves with
   transform. A real range input carries keyboard + screen reader support. */
.wbl-ba{--pos:50%;position:relative;overflow:hidden;border-radius:var(--wbl-radius,6px);aspect-ratio:var(--ba-ar,3/2);touch-action:pan-y;user-select:none;-webkit-user-select:none;background:var(--wbl-line,#D6CABA);margin:0}
.wbl-ba[data-vertical]{touch-action:pan-x}
.wbl-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.wbl-ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.wbl-ba[data-vertical] .wbl-ba-before{clip-path:inset(0 0 calc(100% - var(--pos)) 0)}
.wbl-ba-handle{position:absolute;inset:0;pointer-events:none;transform:translateX(calc(var(--pos) - 50%))}
.wbl-ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#FBF8F3}
.wbl-ba[data-vertical] .wbl-ba-handle{transform:translateY(calc(var(--pos) - 50%))}
.wbl-ba[data-vertical] .wbl-ba-handle::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:2px;margin:-1px 0 0}
.wbl-ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#FBF8F3;box-shadow:0 2px 10px rgba(20,14,10,.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23211B17' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 16l-6 7 6 7M28 16l6 7-6 7'/%3E%3C/svg%3E");background-size:100%}
.wbl-ba[data-vertical] .wbl-ba-handle::after{transform:rotate(90deg)}
.wbl-ba-label{position:absolute;top:12px;padding:5px 10px;border-radius:99px;background:rgba(28,22,18,.72);color:#FBF8F3;font:600 13px/1.2 system-ui,sans-serif;pointer-events:none;transition:opacity .25s}
.wbl-ba-label.b{left:12px}.wbl-ba-label.a{right:12px}
.wbl-ba[data-vertical] .wbl-ba-label.a{top:auto;bottom:12px}
.wbl-ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;pointer-events:none}
.wbl-ba-range:focus-visible+.wbl-ba-handle::after{outline:3px solid var(--wbl-accent,#8E3B2E);outline-offset:3px}
html.wbl-js .wbl-ba{cursor:ew-resize}
html.wbl-js .wbl-ba[data-vertical]{cursor:ns-resize}
/* no JS: show the pair side by side instead of a slider that can't move */
html:not(.wbl-js) .wbl-ba{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:4px}
html:not(.wbl-js) .wbl-ba img,html:not(.wbl-js) .wbl-ba-before{position:static;clip-path:none;aspect-ratio:var(--ba-ar,3/2);height:auto}
html:not(.wbl-js) .wbl-ba-before{order:-1}
html:not(.wbl-js) .wbl-ba-handle,html:not(.wbl-js) .wbl-ba-range{display:none}
@media (prefers-reduced-motion:reduce){.wbl-ba-label{transition:none}}