/*
 * End-of-Results Recommendation Tail.
 *
 * Deliberately almost no styling. The product cards inside come from
 * wc_get_template_part('content','product') wrapped in WooCommerce's own
 * product_loop_start/end, so they inherit the catalog's existing card design,
 * column count and responsive behaviour with nothing new layered on top. Per
 * the ratified spec this section must not read as a visually distinct widget,
 * only as more of the same grid under a heading.
 *
 * All that is needed here is separation from whatever ended above it (the last
 * row of the main grid on the primary path, the spent Load More wrapper on the
 * secondary path) and a heading that matches the weight of other section
 * headings in the catalog.
 */

.esm-recommendation-tail {
	/*
	 * 3em matches the Load More button's own top margin (theme.json's L
	 * preset), so whether the tail follows a product row or a hidden Load More
	 * wrapper the gap above it reads the same.
	 */
	margin-top: 3em;
	clear: both;

	& .esm-recommendation-tail__heading {
		margin-bottom: 1em;

		/*
		 * Matches the em scale documented in CLAUDE.md: 1.875em is the
		 * "attract attention" size used for card and section headings.
		 * Never rem here, since html is 10px based and rem would render
		 * this at roughly half the intended size.
		 */
		font-size: 1.875em;

		/*
		 * Tier 3's "Sorted by X" subtitle (see resolve_newest() /
		 * sorted_by_label() in class-recommendation-tail.php). Only ever
		 * present on tier 3, and only when the active sort isn't the store
		 * default or "latest" - render_html() omits the element entirely
		 * otherwise, so this selector has nothing to match on tiers 1/2 or on
		 * tier 3's own default state.
		 *
		 * A child of the heading, not a sibling, per spec - it is the second
		 * line of the SAME heading, not its own section title.
		 *
		 * 0.75em is relative to the parent heading's 1.875em (per spec), which
		 * resolves to 1.40625em against the tail's own base - noticeably
		 * smaller than "New Arrivals" itself without dropping below the
		 * project's documented 1.25em reading-text floor (CLAUDE.md's em
		 * scale table). No muted-text color token exists elsewhere in this
		 * codebase to reuse verbatim, so subordination is carried the same way
		 * this stylesheet's sibling module (includes/search/assets/search.css)
		 * already signals a de-emphasized state elsewhere: opacity on the
		 * inherited (currentColor) text color, rather than a new hardcoded
		 * gray. Paired with a lighter weight than the heading's own bold, and
		 * block display so it reads as its own line under "New Arrivals"
		 * rather than running on inline.
		 */
		& .esm-recommendation-tail__subtitle {
			display: block;
			font-size: 0.75em;
			font-weight: 400;
			opacity: 0.6;
		}
	}
}