.mench-ba{--mench-ba-position:50%;--mench-ba-ratio:4/3;--mench-ba-accent:#fff;box-sizing:border-box;margin:0;width:100%;color:inherit}
.mench-ba *{box-sizing:border-box}
.mench-ba .mench-ba__stage{position:relative;isolation:isolate;aspect-ratio:var(--mench-ba-ratio);overflow:hidden;border-radius:12px;background:#e5e7eb;touch-action:pan-y}
.mench-ba[data-orientation=vertical] .mench-ba__stage{touch-action:pan-x}
.mench-ba .mench-ba__image{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;object-fit:cover;pointer-events:none;user-select:none}
.mench-ba .mench-ba__before{clip-path:inset(0 calc(100% - var(--mench-ba-position)) 0 0)}
.mench-ba[data-orientation=vertical] .mench-ba__before{clip-path:inset(0 0 calc(100% - var(--mench-ba-position)) 0)}
.mench-ba .mench-ba__divider{position:absolute;top:0;bottom:0;left:var(--mench-ba-position);width:2px;background:var(--mench-ba-accent);transform:translateX(-50%);pointer-events:none;box-shadow:0 0 5px #0005}
.mench-ba .mench-ba__handle{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--mench-ba-accent);border-radius:50%;background:#111827cc;color:#fff;font:24px/1 sans-serif;transform:translate(-50%,-50%);box-shadow:0 2px 12px #0004}
.mench-ba[data-orientation=vertical] .mench-ba__divider{left:0;right:0;top:var(--mench-ba-position);bottom:auto;height:2px;width:auto;transform:translateY(-50%)}
.mench-ba[data-orientation=vertical] .mench-ba__handle{transform:translate(-50%,-50%) rotate(90deg)}
.mench-ba .mench-ba__label{position:absolute;top:16px;max-width:calc(50% - 24px);padding:7px 12px;border-radius:6px;background:#111827e6;color:#fff;font:600 12px/1.4 system-ui,sans-serif;overflow-wrap:anywhere;pointer-events:none}
.mench-ba .mench-ba__label--before{left:16px}.mench-ba .mench-ba__label--after{right:16px}
.mench-ba[data-orientation=vertical] .mench-ba__label--after{top:auto;bottom:16px}
.mench-ba .mench-ba__controls{display:flex;align-items:center;gap:16px;padding:12px 2px;font:500 12px/1.5 system-ui,sans-serif}
.mench-ba .mench-ba__controls label{flex-shrink:0;margin:0}
.mench-ba .mench-ba__range{display:block;width:100%;min-width:0;min-height:32px;margin:0;padding:0;accent-color:#334155;cursor:ew-resize}
.mench-ba[data-orientation=vertical] .mench-ba__range{cursor:ns-resize}
.mench-ba .mench-ba__range:focus-visible{outline:3px solid #2563eb;outline-offset:3px;border-radius:4px}
.mench-ba figcaption{margin:4px 0 0;font:400 14px/1.65 system-ui,sans-serif;color:inherit}
.mench-ba .mench-ba__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mench-ba-empty{padding:24px;border:1px dashed #94a3b8;background:#f8fafc;color:#334155;border-radius:8px;font:14px/1.6 system-ui,sans-serif}
@media(max-width:480px){.mench-ba .mench-ba__controls{gap:10px}.mench-ba .mench-ba__label{top:10px;padding:5px 8px}.mench-ba .mench-ba__label--before{left:10px}.mench-ba .mench-ba__label--after{right:10px}}

/* Elementor flex containers (column + wrap): give the widget a definite width so the browser sizes its height from
   the real width and the aspect-ratio stage is not cut short (the next element would overlap the slider). A width set
   in Elementor's Advanced tab is more specific and still wins. */
.elementor-widget-mench-before-after { width: 100%; }