/**
 * ARCADE DIRECT — CATEGORY ARCHIVE BROWSER CONSISTENCY
 * Design contract: every product category uses the same editorial hierarchy: label and title on
 * the left, a clear live collection count on the right, then filter and sort controls anchored to
 * the grid edges. Products must begin in the first visible grid cell: legacy WooCommerce clearfix
 * pseudo-elements are removed only from the custom CSS-grid lists.
 */

.ad-hire-browser__heading,
.ad-sale-browser__heading {
	align-items: end;
	border-bottom: 1px solid rgba(8, 18, 36, .15);
	display: grid;
	gap: 1.5rem 2.5rem;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, auto);
	padding-block: 0 1.65rem;
}

.ad-hire-browser__heading .ad-label,
.ad-sale-browser__heading .ad-label { margin: 0 0 .8rem; }

.ad-hire-browser__heading h2,
.ad-sale-browser__heading h2 {
	color: var(--brand-navy, #081224);
	font-family: var(--font-display, "Barlow Condensed", sans-serif);
	font-size: clamp(3rem, 5.5vw, 5.65rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: .87;
	margin: 0;
	max-width: 10ch;
	text-transform: uppercase;
}

.ad-hire-browser__heading > p,
.ad-sale-browser__heading > p {
	color: #536173;
	font-size: clamp(.96rem, 1.4vw, 1.12rem);
	line-height: 1.35;
	margin: 0;
	max-width: 22rem;
	text-align: right;
}

.ad-hire-browser__heading .js-catalogue-count,
.ad-sale-browser__heading .js-catalogue-count {
	color: var(--brand-navy, #081224);
	font-family: var(--font-mono, "IBM Plex Mono", monospace);
	font-size: .86em;
	font-weight: 600;
}

.ad-hire-browser__controls {
	align-items: center;
	border-bottom: 1px solid rgba(8, 18, 36, .15);
	display: grid;
	gap: 1rem 1.5rem;
	grid-template-columns: max-content minmax(17rem, 20rem);
	justify-content: space-between;
	padding-block: 1rem 1.35rem;
}

.ad-hire-browser__controls .ad-button { min-height: 3.45rem; }

.ad-hire-sort {
	align-items: center;
	display: grid;
	gap: .7rem;
	grid-template-columns: auto minmax(0, 1fr);
	margin: 0;
}

.ad-hire-sort > span {
	color: #536173;
	font-family: var(--font-mono, "IBM Plex Mono", monospace);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ad-hire-sort select {
	background-color: #fff;
	border: 1px solid rgba(8, 18, 36, .2);
	border-radius: 0;
	box-sizing: border-box;
	color: var(--brand-navy, #081224);
	font-family: var(--font-mono, "IBM Plex Mono", monospace);
	font-size: .78rem;
	font-weight: 600;
	min-height: 3.45rem;
	padding: .5rem 2.8rem .5rem .85rem;
	width: 100%;
}

.ad-hire-sort select:focus-visible,
.ad-hire-browser__controls .ad-button:focus-visible {
	outline: 3px solid var(--brand-teal, #35bb9d);
	outline-offset: 3px;
}

/* WooCommerce’s float-clearing pseudo-elements become anonymous grid children and can reserve
 * the first product cell. The custom catalogue lists use CSS Grid, so neither is required. */
ul.products.ad-product-grid::before,
ul.products.ad-product-grid::after {
	content: none !important;
	display: none !important;
}

ul.products.ad-product-grid > li.product,
ul.products.ad-product-grid > li.product.first,
ul.products.ad-product-grid > li.product.last {
	clear: none !important;
	float: none !important;
	grid-column: auto !important;
	grid-row: auto !important;
	margin-inline: 0 !important;
	width: auto !important;
}

@media (max-width: 47.99rem) {
	.ad-hire-browser__heading,
	.ad-sale-browser__heading { align-items: start; grid-template-columns: 1fr; padding-bottom: 1.35rem; }
	.ad-hire-browser__heading h2,
	.ad-sale-browser__heading h2 { font-size: clamp(2.75rem, 13vw, 4rem); }
	.ad-hire-browser__heading > p,
	.ad-sale-browser__heading > p { max-width: none; text-align: left; }
	.ad-hire-browser__controls { grid-template-columns: 1fr; padding-block: 1rem 1.25rem; }
	.ad-hire-browser__controls .ad-button { width: 100%; }
	.ad-hire-sort { grid-template-columns: auto minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.ad-hire-sort select,
	.ad-hire-browser__controls .ad-button { transition: none !important; }
}