/* ============================================================
 * Catalog shell — shared chrome for /products/ and /applications/
 *
 * Both pages render their inner content (product cards on /products/,
 * application sections on /applications/) inside this same shell so
 * the toolbar, spacing, and empty state read the same on both.
 * ========================================================= */
.upton-catalog {
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--upton-page-top) 24px var(--upton-page-end);
}

/* [products] / [applications] inside page content: #primary already holds
 * the page's top and bottom spacing and .wrap the side gutters. */
.entry-content .upton-catalog {
	padding: 0;
}

/* Page body rendered after (or around) the catalog on the two catalog
 * templates: same bottom spacing as the catalog, so body text never sits
 * flush against the CTA band. A body that ends with a [products] or
 * [applications] catalog gets that spacing once, not twice. */
.upton-catalog__body {
	padding-bottom: var(--upton-page-end);
}

/* The body's own padding is its bottom spacing. */
.upton-catalog__body #primary {
	padding: 0;
}

.upton-catalog__body .upton-catalog:last-child {
	padding-bottom: 0;
}

/* ─── Toolbar row (chips + search) ──────────────────────────── */
.catalog-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(24px, 3vw, 40px);
	padding: 14px 18px;
	background: var(--kdl-gray-50, #f4f6f8);
	border: 1px solid var(--kdl-border-subtle, #e5e9ee);
	border-radius: 8px;
}

.catalog-toolbar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

.catalog-toolbar__chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--kdl-surface-base, #fff);
	/* Heated, the rim glows along the ramp (--heat, style.css). */
	border: 1px solid color-mix(in oklab, var(--heat-c) calc(var(--heat) * 100%), var(--kdl-border-default, #cfd6dd));
	border-radius: 999px;
	box-shadow:
		0 0 calc(var(--heat) * 12px) calc(var(--heat) * 1px) var(--heat-glow),
		inset 0 0 0 calc(var(--heat) * 1px) color-mix(in srgb, var(--heat-c) calc(var(--heat) * 100%), transparent);
	font-family: var(--kdl-font-sans, "IBM Plex Sans", system-ui, sans-serif);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3; /* explicit: a <button> keeps line-height:normal, which varies by font */
	color: var(--kdl-text-default, #3f4751);
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, --heat var(--upton-heat-cool, 650ms) var(--upton-heat-cool-ease, ease-out);
}

.catalog-toolbar__chip:focus-visible {
	--heat: 1;
	transition-duration: 150ms, 150ms, var(--upton-heat-rise, 360ms);
}

@media (hover: hover) {
	.catalog-toolbar__chip:hover {
		--heat: 1;
		color: var(--kdl-text-strong, #14181d);
		transition-duration: 150ms, 150ms, var(--upton-heat-rise, 360ms);
	}
}

.catalog-toolbar__chip.is-active,
.catalog-toolbar__chip[aria-pressed="true"] {
	background: var(--kdl-accent-500, #CE2029);
	border-color: var(--kdl-accent-500, #CE2029);
	color: #fff;
}

@media (hover: hover) {
	.catalog-toolbar__chip.is-active:hover,
	.catalog-toolbar__chip[aria-pressed="true"]:hover {
		color: #fff;
	}
}

.catalog-toolbar__chip:focus-visible {
	outline: 2px solid var(--kdl-copper-500, #B66723);
	outline-offset: 2px;
}

/* Glove mode: full-size targets on touch screens. */
@media (pointer: coarse) {
	.catalog-toolbar__chip {
		min-height: 44px;
		padding: 8px 16px;
	}
}

/* Search only (product pages have no chips): no panel, just the field. */
.catalog-toolbar:not(:has(.catalog-toolbar__chips)) {
	background: none;
	border: 0;
	padding: 0;
}

.catalog-toolbar:not(:has(.catalog-toolbar__chips)) .catalog-toolbar__search-input {
	border-color: var(--kdl-border-default, #cfd6dd);
}

/* A search box over a handful of cards is noise: product pages with fewer
 * than seven show the grid alone. */
.upton-catalog:not(:has(.products-grid > :nth-child(7))) .catalog-toolbar:not(:has(.catalog-toolbar__chips)) {
	display: none;
}

/* ─── Search field ──────────────────────────────────────────── */
.catalog-toolbar__search {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 1 280px;
	min-width: min(200px, 100%);
}

.catalog-toolbar__search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--kdl-text-muted, #5a6470);
	pointer-events: none;
}

/* 16px text at every width (iOS zooms into smaller fields) and a 44px
 * target (glove mode). */
.catalog-toolbar__search-input {
	width: 100%;
	height: 44px;
	padding: 0 16px 0 38px;
	background: var(--kdl-surface-base, #fff);
	border: 1px solid var(--kdl-border-subtle, #e5e9ee);
	border-radius: 999px;
	font-family: var(--kdl-font-sans, "IBM Plex Sans", system-ui, sans-serif);
	font-size: 16px;
	color: var(--kdl-text-strong, #0a0d11);
	-webkit-appearance: none;
	appearance: none;
}

.catalog-toolbar__search-input:focus {
	outline: 2px solid var(--kdl-copper-500, #c2632a);
	outline-offset: 0;
	border-color: var(--kdl-copper-500, #c2632a);
}

.catalog-toolbar__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* ─── Empty state ───────────────────────────────────────────── *
 * Never a dead end: the words that found nothing, the ways on (site
 * search, the process directory), then the clear button. */
.catalog-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 56px 24px;
	margin: 0;
	color: var(--kdl-text-default, #2f353d);
	font-size: 16px;
	text-align: center;
}

.catalog-empty[hidden] {
	display: none;
}

.catalog-empty__message {
	max-width: 540px;
	margin: 0;
	color: var(--kdl-text-strong, #14181d);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

.catalog-empty__routes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	margin: 0;
}

.catalog-empty__routes[hidden],
.catalog-empty__route[hidden] {
	display: none;
}

.catalog-empty__route {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--kdl-text-strong, #14181d);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--kdl-copper-500, #c2632a);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.catalog-empty__route:hover {
	color: var(--kdl-copper-700, #7e3d14);
}

/* ─── Hidden state for filtered-out items ───────────────────── */
.upton-catalog [data-catalog-item].is-hidden,
.upton-catalog .product-card.is-hidden {
	display: none !important;
}

/* ─── Nested .upton-section reset ───────────────────────────── *
 * products-grid.php and applications-list.php each wrap their
 * inner content in <section class="upton-section">. When that
 * sits inside a .upton-catalog the outer padding + max-width
 * already apply — strip the inner copy so we don't double up. */
.upton-catalog .upton-section,
.upton-catalog .upton-section.applications-list-section,
.upton-catalog .upton-section.products-section {
	padding: 0;
	max-width: none;
	margin: 0;
}

/* The list's own 1200px centred container would inset it from the
 * toolbar above; inside the shell it spans the toolbar's width. */
.upton-catalog .applications-list-section__inner {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ─── Mobile ────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.catalog-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 12px 14px;
	}

	.catalog-toolbar__chips {
		order: 2;
	}

	.catalog-toolbar__search {
		order: 1;
		flex: 1 1 auto;
	}
}