.basf-item{max-width:980px;margin:22px auto;padding:0}
.basf-title{margin:0 0 10px;color:#5d433c;font-size:clamp(18px,2.4vw,30px)}

.basf-slider{position:relative;overflow:hidden;border-radius:14px;border:1px solid rgba(0,0,0,.10);background:#fff;box-shadow:0 14px 30px rgba(16,24,40,.12)}
.basf-stage{position:relative;line-height:0}
.basf-stage img{display:block;width:100%;height:auto;user-select:none;pointer-events:none}

.basf-before,.basf-after{position:relative}
.basf-after-wrap{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;clip-path:inset(0 0 0 50%)}
.basf-after{position:absolute;top:0;left:0;width:100%;height:100%}
.basf-after img{width:100%;height:100%;object-fit:cover}

.basf-overlay{position:absolute;inset:0;pointer-events:none}
.basf-noise{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:0}

.basf-divider{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.basf-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;font-weight:700;color:#5d433c;box-shadow:0 8px 20px rgba(16,24,40,.18)}

.basf-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:10}

.basf-labels{position:absolute;inset:auto 12px 12px 12px;display:flex;justify-content:space-between;pointer-events:none}
.basf-chip{
	background: rgba(0,0,0,.6);
	color: #fff;
	font-size: 12px;
	padding: 16px 17px;
	border-radius: 26px;
	transition: opacity .16s ease;
}
.basf-labels--vertical{
	inset: 12px 12px 12px 12px;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}