/*
 * SF.4 — discovery STATES: the one panel every "nothing to list here" moment
 * renders — a valid discovery view with zero products (16+ today), Deals with
 * no deal, a search with no match (with or without filters) and the 404.
 *
 * NOT a new design language. This is the PLP's own empty-state box
 * (assets/css/plp.css "Empty state", S5 / S9D-B — white surface, 1px border,
 * --pp-radius-lg, centred Barlow sub-title + secondary text + one primary
 * button), moved here so the generic search page and the 404 can share it,
 * plus the pieces those states need, each built from existing components:
 *   - the search-again field: .pp-input + .pp-btn-primary (design-system);
 *   - Quick picks: .pp-chip--outline, under the same 11px uppercase group
 *     label the search panel uses (header-commerce.css .pp-sp-group h5);
 *   - Browse / recovery links: Navy 600 text links with the arrow icon, as
 *     the "See all …" links across the header and homepage.
 * Loaded on the Shop listing, the search page and the 404 (inc/assets.php).
 * All declarations longhand.
 */

.pp-state {
	text-align: center;
	padding: var(--pp-space-7) var(--pp-space-4);
	background: #fff;
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
}

.pp-state-eyebrow {
	margin: 0 0 var(--pp-space-2);
	font-family: var(--pp-font-body);
	font-size: var(--pp-text-meta);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pp-secondary-text);
}

.pp-state-title {
	margin: 0 0 var(--pp-space-2);
	font-family: var(--pp-font-display);
	font-size: var(--pp-text-sub-title);
	font-weight: 600;
	line-height: 1.2;
	color: var(--pp-ink);
	overflow-wrap: anywhere;   /* a long search query wraps instead of overflowing */
}

.pp-state-text {
	max-width: 52ch;
	margin: 0 auto var(--pp-space-4);
	color: var(--pp-secondary-text);
}

.pp-state-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pp-space-3);
}

/* Search again — a real GET to the canonical product search. */
.pp-state-search {
	display: flex;
	gap: var(--pp-space-2);
	max-width: 460px;
	margin: 0 auto var(--pp-space-4);
}
.pp-state-search .pp-input { flex: 1 1 auto; min-width: 0; }
.pp-state-search .pp-btn { flex: 0 0 auto; }

.pp-state-group { margin-top: var(--pp-space-5); }

.pp-state-label {
	margin: 0 0 var(--pp-space-3);
	font-family: var(--pp-font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pp-secondary-text);
}

.pp-state-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pp-space-2);
}

.pp-state-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pp-space-2) var(--pp-space-5);
	margin-top: var(--pp-space-5);
}
.pp-state-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	font-family: var(--pp-font-body);
	font-size: var(--pp-text-label);
	font-weight: 600;
	color: var(--pp-navy);
}
.pp-state-links a .pp-i { color: currentColor; }

/* The 404 — the same panel at page scale (its title is the page's H1). */
.pp-state-page { padding: var(--pp-space-6) 0 var(--pp-space-7); }
.pp-state--page { padding: 56px var(--pp-space-5); }
.pp-state--page .pp-state-title {
	font-size: var(--pp-text-page-title);
	letter-spacing: -0.02em;
}

@media (max-width: 767px) {
	.pp-state { padding: var(--pp-space-6) var(--pp-space-4); }
	/* GLOBAL-COMMERCE-POLISH-LOCK §15: >=44px mobile targets. */
	.pp-state-links a,
	.pp-state-chips .pp-chip { min-height: var(--pp-hit-min); }
	.pp-state--page { padding: var(--pp-space-6) var(--pp-space-4); }
	.pp-state-search { flex-direction: column; }
	.pp-state-search .pp-btn { justify-content: center; min-height: var(--pp-hit-min); }
	.pp-state-actions .pp-btn { flex: 1 1 100%; justify-content: center; }
}