/* Before & After Slider */
.bbw-slider { position: relative; width: 100%; overflow: hidden; user-select: none; line-height: 0; border-radius: 8px; }
.bbw-slider__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bbw-slider__image--before { z-index: 2; clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.bbw-slider__handle { position: absolute; top: 0; left: 50%; width: 44px; height: 100%; transform: translateX(-50%); z-index: 4; cursor: ew-resize; display: flex; align-items: center; justify-content: center; }
.bbw-slider__handle::before { content: ""; position: absolute; width: 3px; height: 100%; background: white; box-shadow: 0 0 12px rgba(0,0,0,.4); }
.bbw-slider__handle-icon { color: #333; background: white; border-radius: 50%; width: 40px; height: 40px; font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(0,0,0,.3); z-index: 1; gap: 2px; }
.bbw-arrow-left, .bbw-arrow-right { width: 0; height: 0; border-style: solid; }
.bbw-arrow-left { border-width: 4px 6px 4px 0; border-color: transparent #333 transparent transparent; }
.bbw-arrow-right { border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #333; }
.bbw-slider__overlay { position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,.2); opacity: 0; transition: opacity .4s; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.bbw-slider:hover .bbw-slider__overlay { opacity: 1; }
.bbw-slider.is-dragging .bbw-slider__overlay { opacity: 0; }
.bbw-slider__label { color: white; background: rgba(0,0,0,.5); padding: 8px 14px; border-radius: 4px; font-family: sans-serif; font-size: 13px; font-weight: bold; }