/*
 * Bestsellers: gold panel, centered heading/CTA, product grid.
 */

.bestsellers__panel {
	text-align: center;
}

.bestsellers__heading {
	margin-bottom: var(--space-2xl);
}

.bestsellers__grid {
	margin-bottom: var(--space-xl);
	text-align: left;
}

.bestsellers__empty {
	margin-bottom: var(--space-lg);
}

.bestsellers__cta {
	text-align: center;
}

/*
 * Mobile: swipeable product carousel (peek-next-card pattern) instead of
 * an endless single-column stack, per PROJECT_PLAN.md Section 1. Pure CSS
 * scroll-snap. Reverts to the static grid at tablet+ (layout.css).
 */
@media (max-width: 599px) {
	.bestsellers__grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--space-sm);
		scrollbar-width: none;
	}

	.bestsellers__grid::-webkit-scrollbar {
		display: none;
	}

	.bestsellers__grid .product-card {
		flex: 0 0 70%;
		scroll-snap-align: start;
	}
}