/**
 * Search results page (consistent rebuild).
 * Depends on: tokens.css, components.css (.ize-grid, .ize-listing, .ize-pagination,
 *             .ize-cat-chip, .ize-btn).
 */

/* ── Page shell ──────────────────────────────────────────────────────────── */
.ize-search-page {
	max-width: var(--ize-container);
	margin: 0 auto;
	padding: var(--ize-4) var(--ize-4) var(--ize-6);
}

/* ── Active filter chips row (count + sort + view live in the search bar) ── */
.ize-search-context {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ize-2) var(--ize-3);
	padding: var(--ize-3) 0 var(--ize-4);
	border-bottom: 1px solid var(--ize-line);
	margin-bottom: var(--ize-4);
}

.ize-search-context__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ize-2);
	flex: 1 1 auto;
}

/* Active filter chip: keyword/category/location pill with × to remove */
.ize-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ize-1);
	padding: var(--ize-1) var(--ize-2) var(--ize-1) var(--ize-3);
	border-radius: var(--ize-radius-pill);
	font-size: var(--ize-fs-xs);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.ize-filter-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: transparent;
	font-size: var(--ize-fs-xs);
}

.ize-search-context__clear {
	font-size: var(--ize-fs-xs);
	color: var(--ize-ink-3);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s var(--ize-ease);
}
.ize-search-context__clear:hover { color: var(--ize-danger); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ize-search-empty {
	text-align: center;
	padding: var(--ize-7) var(--ize-4);
}
.ize-search-empty__icon {
	font-size: var(--ize-fs-4xl);
	color: var(--ize-ink-3);
	margin-bottom: var(--ize-4);
}
.ize-search-empty__title {
	font-size: var(--ize-fs-lg);
	color: var(--ize-ink);
	margin: 0 0 var(--ize-2);
}
.ize-search-empty__sub {
	color: var(--ize-ink-2);
	margin: 0 0 var(--ize-5);
	font-size: var(--ize-fs-sm);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.ize-search-context {
		flex-direction: column;
		align-items: flex-start;
	}
}