.aa-ba-wrapper {
	max-width: 900px;
	margin: 20px auto;
	position: relative;
}

.aa-ba-image-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 ratio container; images positioned absolute inside */
	overflow: hidden;
	border-radius: 8px;
}

.aa-ba-image-wrap img.aa-ba-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 400ms ease;
	opacity: 0;
}

.aa-ba-image-wrap img.aa-ba-img.active { opacity: 1; }

.aa-ba-controls {
	margin-top: 12px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.aa-ba-btn {
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid #bbb;
	background: #fff;
	cursor: pointer;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.aa-ba-btn:hover { background: #f3f3f3; }

.aa-ba-btn.active {
	background: #111;
	color: #fff;
	border-color: #111;
}