/*
 * "Mobile Banner" and "Image Section" — both a swipeable, full-size slider
 * (each slide shown at its own natural size, uncropped, whether it's an
 * image or a video) shown above a category's product grid — see
 * includes/category-media-frontend.php. Image Section is the same slide
 * treatment as the Mobile Banner, just without dot pagination, and shows a
 * peek of the next slide to invite swiping.
 */
.brado-category-media-banner {
	margin: 0 0 14px;
}
.brado-category-media-section {
	margin: 0 0 18px;
}

.brado-category-media-banner__track,
.brado-category-media-section__list {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.brado-category-media-banner__track::-webkit-scrollbar,
.brado-category-media-section__list::-webkit-scrollbar { display: none; }

.brado-category-media-banner__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}
.brado-category-media-section__list {
	gap: 8px;
	padding: 0 8px;
}
.brado-category-media-section__item {
	flex: 0 0 88%;
	scroll-snap-align: start;
}

.brado-category-media-banner__slide a,
.brado-category-media-section__item a {
	display: block;
}

/* Full size — the whole uploaded image/video, never cropped, scaled to
   fill the slide's width at its own natural aspect ratio. */
.brado-category-media-banner__media,
.brado-category-media-section__media {
	display: block;
	width: 100%;
	height: auto;
	background: var(--brado-bg, #f0ece5);
}
.brado-category-media-section__media {
	border-radius: 10px;
}

.brado-category-media-banner__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
}
.brado-category-media-banner__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: var(--brado-border, #d8d3c8);
	cursor: pointer;
	transition: width 0.2s ease, border-radius 0.2s ease;
}
.brado-category-media-banner__dot.is-active {
	width: 16px;
	border-radius: 4px;
	background: var(--brado-accent, #8f6d3a);
}