/*
 * Search results page (page-search.php).
 *
 * Only search-page-specific layout lives here. Cards, grid, empty-state and
 * the search-box/hero come from the plugin catalog-public.css (enqueued on this
 * page); buttons come from the theme. Keep this file lean.
 */

.mp-search-page {
	max-width: 1200px;
	margin: 0 auto;
}

.mp-search-hero {
	margin-bottom: 2rem;
}

/* Each result type is its own labelled section. */
.mp-search-group {
	margin-bottom: 2.5rem;
}

.mp-search-group__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-size: 1.4rem;
}

/* Count badge — a small pill so the number reads as an intentional counter
   next to the (serif) heading rather than a floating figure. */
.mp-search-group__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	background: var(--bg-tertiary, #ede5d5);
	color: var(--text-secondary, #5e5448);
	font-family: var(--font-sans, 'Lato', sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
}

.mp-search-group__more {
	margin-top: 1.25rem;
	text-align: center;
}

/* Neutral informational lines (empty term, too short, unavailable). */
.mp-search-message {
	padding: 2rem 0;
	color: var(--text-tertiary, #76695a);
	text-align: center;
}

/* While a live request is in flight, dim the results and block interaction. */
.mp-search-results--loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* "Searching…" line, reusing the catalog status affordance. */
.mp-search-status {
	margin: 1.5rem 0;
	text-align: center;
	color: var(--text-tertiary, #76695a);
	font-style: italic;
}

/* The Brands and Stores landings both use the canonical .mp-cm-grid (see
   catalog-public.css) with immersive .mp-cm-card--featured cards. The --brands
   modifier pins a fixed three-up (instead of the grid's auto-fill) so the cards
   are the same width as the front-page "Featured producers" spotlight
   (.mp-cm-featured__grid). Collapses to one column on phones, mirroring the
   spotlight. Scoped to this class, so the shared .mp-cm-grid on the search page is
   unaffected. */
.mp-cm-grid--brands {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {

	.mp-cm-grid--brands {
		grid-template-columns: 1fr;
	}
}