/* ==========================================================================
   Listing layout
   Converted from design-reference/showroom-floor.css §9 (.listing, .sort).
   Max width and gutters come from theme.json's constrained layout, so this
   file only owns the rail/results split and the sort bar.
   ========================================================================== */

/* WordPress gives every flow container's children a blockGap top margin. The
   containers below are laid out by this stylesheet — grid columns, a flex bar,
   a drawer — so that second rhythm has to come off, or it stacks on top of the
   spacing declared here. Scoped to direct children only, and deliberately not
   applied inside .tfs-product-grid, whose children set their own margins. */
.tfs-listing > *,
.tfs-listing__body > *,
.tfs-listing__results > *,
.tfs-listing__bar > *,
.tfs-filters > *,
.tfs-filters__head > *,
.tfs-filters__groups > * {
	margin-block-start: 0;
}

.tfs-listing {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
}

.tfs-listing__head {
	margin-bottom: var(--wp--preset--spacing--50);
}

.tfs-listing__head h1 {
	margin: 0;
}

.tfs-listing__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (min-width: 1024px) {
	.tfs-listing__body {
		grid-template-columns: var(--wp--custom--rail--width) minmax(0, 1fr);
	}
}

.tfs-listing__results {
	min-width: 0;
}

.tfs-listing__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--custom--step--16);
	margin-bottom: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: var(--wp--custom--hairline);
}

.tfs-sort {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--step--16);
}

.tfs-sort__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--muted);
}

.tfs-sort .facetwp-facet {
	margin: 0;
}

/* The sort facet renders a bare <select>; the chevron is drawn with two
   gradients so no icon request is needed. */
.tfs-sort select {
	appearance: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius);
	padding:
		var(--wp--custom--step--12)
		var(--wp--preset--spacing--40)
		var(--wp--custom--step--12)
		var(--wp--custom--step--16);
	min-height: var(--wp--custom--control--tap-target-minimum);
	min-width: var(--wp--custom--rail--sort-width);
	cursor: pointer;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--ink) 50%),
		linear-gradient(135deg, var(--wp--preset--color--ink) 50%, transparent 50%);
	background-position:
		calc(100% - var(--wp--custom--step--16) - var(--wp--custom--control--dot-small)) 50%,
		calc(100% - var(--wp--custom--step--16)) 50%;
	background-size:
		var(--wp--custom--control--dot-small) var(--wp--custom--control--dot-small),
		var(--wp--custom--control--dot-small) var(--wp--custom--control--dot-small);
	background-repeat: no-repeat;
	transition: border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-sort select:hover {
	border-color: var(--wp--preset--color--ink);
}

.tfs-sort select:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

@media (max-width: 1023px) {
	/* Clear of the sticky filter bar. */
	.tfs-listing {
		padding-bottom: calc(var(--wp--preset--spacing--70) + var(--wp--custom--control--tap-target-minimum));
	}
}