/*
 * Best Sellers strip. Cards reuse the theme's .zlz-card look; this file only
 * lays them out in a horizontal, swipeable row and styles the heading to match
 * the old "Browse by theme" section it replaces.
 */

.zbs-section {
	padding: 40px 0 8px;
}

/* The whole section lives inside the theme's .zlz-container, so heading and
   the scroller share the site's standard content margin (24px desktop /
   16px mobile) and the same 1200px max-width as every other homepage section.
   No full-bleed here — the strip is contained, with clear side margins. */

.zbs-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.zbs-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: #8a8a8a;
	text-transform: uppercase;
}

.zbs-title {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: #1F1B2E;
	margin: 6px 0 0;
}

.zbs-view-all {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 600;
	color: #7B3FE4;
	white-space: nowrap;
}

.zbs-view-all:hover {
	text-decoration: underline;
}

/* Horizontal scroller — sits within the container, so its left/right edges
   are the container's content edges (that's where the side margin comes from). */
.zbs-scroll-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding: 4px 0 8px;
}

.zbs-scroll-wrap::-webkit-scrollbar {
	display: none;
}

.zbs-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 18px;
}

/* Fixed card width so cards keep shape in a flex row (grid gave them width). */
.zbs-card.zlz-card {
	flex: 0 0 240px;
	width: 240px;
	scroll-snap-align: start;
}

@media (max-width: 768px) {
	.zbs-section {
		padding: 28px 0 4px;
	}
	.zbs-title {
		font-size: 24px;
	}
	.zbs-card.zlz-card {
		flex: 0 0 168px;
		width: 168px;
	}
}