/* Category / shop ARCHIVE styling — WC result-count + sort row, infinite
 * scroll, and the category-page shell/header. Split out of product-card.css
 * (2026-08-16); loads only on shop + product taxonomy archives. Tokenized. */

/* ===========================================================================
 * Infinite scroll (category/shop archive only) — JS sets body.jm-infinite-ready
 * once the IntersectionObserver is wired. We then hide the native pagination
 * and reveal sentinel + status text in its place.
 * =========================================================================== */
body.jm-infinite-ready nav.woocommerce-pagination,
body.jm-infinite-ready .woocommerce-pagination {
	display: none !important;
}

.jm-infinite-sentinel {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
}

.jm-infinite-status {
	display: block;
	width: 100%;
	margin: 1.5rem 0 0.5rem;
	padding: 0.75rem 0;
	text-align: center;
	font-family: var(--jl2-font-sans, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(var(--jl2-color-ink-rgb), 0.62);
	opacity: 0;
	transition: opacity 200ms ease;
}

body.jm-infinite-loading .jm-infinite-status,
body.jm-infinite-done .jm-infinite-status { opacity: 1; }

body.jm-infinite-loading .jm-infinite-status::before {
	content: "";
	display: inline-block;
	vertical-align: -2px;
	width: 12px;
	height: 12px;
	margin-right: 0.5rem;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: jm-spin 700ms linear infinite;
}

/* ===========================================================================
 * Result-count + sort row — WC archive header.
 *
 * Default WC outputs `<p.woocommerce-result-count>` and `<form.woocommerce-ordering>`
 * as siblings before `ul.products`. We give them a luxury treatment: a gold
 * hairline accent on the count, a custom-chromed select on the sort dropdown,
 * and a full-width gold rule below to separate the header from the grid.
 *
 * Mobile (< 640px): stacked, sort dropdown is full-width.
 * Tablet+ (≥ 640px): floated row, count left / sort right, hairline below.
 * =========================================================================== */

.woocommerce-result-count {
	margin: 0.75rem 0 0.5rem;
	padding: 0.6rem 0 0.6rem 2.25rem;
	position: relative;
	font-family: var(--jl2-font-sans, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jl2-color-ink, var(--jl2-color-ink));
}

/* Gold hairline accent before the count text */
.woocommerce-result-count::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.5rem;
	height: 1px;
	background: linear-gradient(
		to right,
		rgba(var(--jl2-color-gold-rgb), 0) 0%,
		var(--jl2-color-gold, var(--jl2-color-gold)) 30%,
		var(--jl2-color-gold, var(--jl2-color-gold)) 100%
	);
	transform: translateY(-0.5px);
}

.woocommerce-ordering {
	margin: 0 0 0.75rem;
}

.woocommerce-ordering select.orderby,
.woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 0.65rem 2.6rem 0.65rem 1.1rem;
	background-color: var(--jl2-color-cream, var(--jl2-color-cream));
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%23b8854a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 10px 6px;
	border: 1px solid rgba(var(--jl2-color-gold-rgb), 0.45);
	border-radius: 999px;
	font-family: var(--jl2-font-sans, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jl2-color-ink, var(--jl2-color-ink));
	cursor: pointer;
	min-width: 0;
	width: 100%;
	max-width: 280px;
	transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.woocommerce-ordering select.orderby:hover,
.woocommerce-ordering select.orderby:focus-visible {
	border-color: var(--jl2-color-gold, var(--jl2-color-gold));
	background-color: var(--jl2-color-cream);
	outline: 0;
	box-shadow: 0 1px 0 rgba(var(--jl2-color-gold-rgb), 0.18);
}

/* Mobile — stack vertically, full-width select */
@media (max-width: 639px) {
	.woocommerce-result-count { margin-bottom: 0.4rem; }
	.woocommerce-ordering select.orderby,
	.woocommerce-ordering select { max-width: none; }
}

/* Tablet + — float left/right, equal vertical alignment */
@media (min-width: 640px) {
	.woocommerce-result-count {
		float: left;
		margin: 1.1rem 0 1.25rem;
	}
	.woocommerce-ordering {
		float: right;
		margin: 0.9rem 0 1.25rem;
	}
	.woocommerce-ordering select.orderby,
	.woocommerce-ordering select {
		min-width: 220px;
	}
}

/* Clear floats + gold hairline above the grid */
ul.products:has(> .jm-product-card),
ul.products.products:has(> .jm-product-card) {
	clear: both;
}

/* (Previously a gold hairline rendered above ul.products via ::before. Removed
 * 2026-05-12 — the new compact top panel handles the visual hierarchy and the
 * extra rule between sort row and grid felt heavy.) */

/* ===========================================================================
 * CATEGORY PAGE — header gap fix.
 *
 * Site-wide CSS (parent theme or similar) sets `padding-top: 96px` on BOTH
 * `#primary.content-area` AND `main.site-main`, stacking 192px of header
 * spacer below the fixed-position .jleh-header. With body's own
 * `padding-top: 61px` from header.css, that produced 253px of total push
 * — 149px more than the 104px header actually needs to clear.
 *
 * On product taxonomy archives we replace the stacked spacers with a single
 * controlled value: header (104) + breathing (16) = ~120px from page top.
 * Scoped to body.tax-product_cat so unrelated pages keep their spacer math.
 * =========================================================================== */
body.tax-product_cat #primary.content-area {
	padding-top: 0 !important;
}
body.tax-product_cat main.site-main {
	padding-top: 56px !important;  /* covers (header 104 - body pad 61) + 16 breathing */
}

@media (max-width: 767px) {
	/* Mobile body padding is 41px (--jleh-header-offset-mobile) but actual
	 * mobile header height is ~64px, so we need a 40px spacer on main to
	 * push content to ~y=81 (header 64 + 17 breathing). */
	body.tax-product_cat main.site-main {
		padding-top: 40px !important;
	}
}

/* ===========================================================================
 * CATEGORY PAGE SHELL — gives the grid + toolbar + pagination a padded,
 * max-width container ONLY on WooCommerce product taxonomy archives.
 *
 * The shell is rendered by /shared/product-cards/category-filter-panel.php at:
 *   - woocommerce_before_shop_loop @ 2 (open)
 *   - woocommerce_after_shop_loop @ 11 (close, after WC pagination)
 *
 * It does NOT wrap homepage product widgets, single-product Related, or
 * shop-index loops. Scope is enforced by `is_product_category()` in PHP and
 * by the `body.tax-product_cat` selector here (defense in depth).
 *
 * Mobile: edge-to-edge (no side padding) to keep the app-style list clean.
 * Tablet: moderate side padding.
 * Desktop: generous responsive padding via clamp().
 * Wide:   controlled max-width so cards don't stretch.
 * =========================================================================== */
body.tax-product_cat .jm-product-category-shell {
	max-width: 1280px;
	margin-inline: auto;
}

@media (min-width: 640px) {
	body.tax-product_cat .jm-product-category-shell {
		padding-inline: 1.5rem;
	}
}

@media (min-width: 1024px) {
	body.tax-product_cat .jm-product-category-shell {
		padding-inline: clamp(2rem, 5vw, 4rem);
	}
}