/* До / после (views/constructor/beforeAfter.php, скрипт — blocks/beforeAfter.js) */
.cb .cb-ba {margin: 0}
.cb .cb-ba__frame {position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--cb-radius); background: var(--cb-card-bg); box-shadow: var(--cb-shadow); user-select: none; touch-action: pan-y}
.cb-view--single .cb-ba__frame {aspect-ratio: 16 / 9}
.cb .cb-ba__img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none}
.cb .cb-ba__before {position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--cb-ba, 50%)) 0 0)}
.cb .cb-ba__handle {position: absolute; top: 0; bottom: 0; left: var(--cb-ba, 50%); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .35); pointer-events: none}
.cb .cb-ba__handle::after {content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
    background: #fff; color: #222; font: 700 18px/44px Arial, sans-serif; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .3)}
.cb .cb-ba__tag {position: absolute; top: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; font-weight: 600; pointer-events: none}
.cb .cb-ba__tag--before {left: 14px}
.cb .cb-ba__tag--after {right: 14px}
.cb .cb-ba__range {position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none}
.cb .cb-ba__range:focus-visible ~ .cb-ba__handle::after, .cb .cb-ba__frame:focus-within .cb-ba__handle::after {box-shadow: 0 0 0 4px var(--cb-accent-soft), 0 2px 10px rgba(0, 0, 0, .3)}
.cb .cb-ba__caption {margin-top: 12px; color: var(--cb-heading); font-weight: 600; text-align: center}