/* Onsite Gallery — listing controls: "Sort by" and, on /collection/,
   /bespoke/ and the Archive, the category dropdown
   (onsite_render_category_select()).
   Loaded on the sortable listings only (inc/listing-sort.php). Kept out of
   onsite.css; reuses its tokens so the controls read as siblings of the
   piece count (label) and of the pill rows elsewhere (select). The category
   control shares every declaration below with the sort control, so the two
   stay a matched pair. */

.onsite-sort{
	display:flex;
	justify-content:flex-end;
	align-items:center;
	gap:12px;
	margin:0 0 20px;
}
.onsite-sort__label,
.onsite-catfilter__label{
	font-family:var(--font-heading);
	font-weight:500;
	font-size:11px;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--ink);
	margin:0;
}
.onsite-sort .onsite-sort__select,
.onsite-catfilter .onsite-catfilter__select{
	-webkit-appearance:none;
	appearance:none;
	width:auto;
	height:auto;
	min-height:44px;
	margin:0;
	padding:0 42px 0 18px;
	font-family:var(--font-body);
	font-size:12px;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--ink);
	background-color:transparent;
	/* Chevron in --ink (#3C3733). */
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233C3733' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 18px center;
	border:1px solid var(--line);
	border-radius:40px;
	box-shadow:none;
	cursor:pointer;
	transition:border-color .3s;
}
.onsite-sort .onsite-sort__select:hover,
.onsite-sort .onsite-sort__select:focus-visible,
.onsite-catfilter .onsite-catfilter__select:hover,
.onsite-catfilter .onsite-catfilter__select:focus-visible{border-color:var(--ink);}
.onsite-sort .onsite-sort__select:focus-visible,
.onsite-catfilter .onsite-catfilter__select:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.onsite-sort__apply{
	min-height:44px;
	padding:0 18px;
	font-family:var(--font-body);
	font-size:12px;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--paper);
	background:var(--ink);
	border:1px solid var(--ink);
	border-radius:40px;
	cursor:pointer;
}

/* The WooCommerce archives have no pill row above, so the control opens the listing. */
.onsite-collection .onsite-sort{margin-top:-10px;}

/* The three listing pages: category and sort as a pair on the right of one
   bar, category immediately left of sort. */
.onsite-catfilter{
	display:flex;
	align-items:center;
	gap:12px;
	margin:0;
}
.onsite-browse__controls{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	align-items:center;
	gap:12px 24px;
	margin:0 0 20px;
}
.onsite-browse__controls .onsite-sort{margin:0;}

@media (max-width:560px){
	.onsite-sort{justify-content:space-between;}
	.onsite-sort .onsite-sort__select{flex:1 1 auto;min-width:0;}
}

/* Below 900px the pair no longer fits on one line (the category select is as
   wide as its longest name), and a wrapped row leaves the two selects on
   different left edges. Stack them instead, selects aligned. nowrap matters:
   a wrapping column sizes each line to its widest item's max-content width,
   which let the forms run past the viewport. */
@media (max-width:900px){
	.onsite-browse__controls{flex-direction:column;flex-wrap:nowrap;align-items:stretch;}
	.onsite-browse__controls .onsite-catfilter,
	.onsite-browse__controls .onsite-sort{max-width:460px;justify-content:space-between;}
	.onsite-browse__controls .onsite-catfilter__select,
	.onsite-browse__controls .onsite-sort__select{flex:1 1 auto;min-width:0;}
	.onsite-browse__controls .onsite-sort__label,
	.onsite-browse__controls .onsite-catfilter__label{flex:0 0 6.5em;}
}