/*
 * Products Landing — the flat product directory.
 * The grid, cards and empty state come from the plugin's catalog-public.css and
 * the pager from search.css, exactly as the Stores landing does. The collection
 * filter reuses that same stylesheet's .mp-cm-filter-bar and pill toggles. This
 * file only spaces the intro, the filter, the grid block and the disclaimer. 
 */

/* Collection filter. The bar itself is styled by catalog-public.css; this keeps
   it clear of the intro above and the grid below, and lays out the actions.

   Sticky: past the first row of cards the filter is off screen, and going back for
   it is the whole cost of using it. It has to stop exactly below the sticky top
   bar, whose height varies (the search field sits inside it on desktop but not on
   mobile), so products-filter.js measures it into --mp-sticky-top. The fallback is
   the desktop height, and the z-index stays below the top bar's 1000 so a rounding
   difference hides the edge behind it rather than over it. */
.mp-products__filters {
	position: sticky;
	top: var(--mp-sticky-top, 76px);
	z-index: 90;
	margin: 0 0 8px;
}

/* The count on a chip. Deliberately the SAME size as its label: the chip is a
   flex row aligned on centre, so a smaller item is centred by its box and its
   digits ride visibly high against the label's baseline — and at 0.85 of a
   0.875rem chip they were down near 11px. Dimming alone separates the count from
   the name, without shrinking a number that exists to be read. The markup leaves
   no whitespace before it, so the margin here is the whole gap. */
.mp-cm-filter__count {
	margin-left: 0.4em;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

/* Result count + market. It lives INSIDE the filter bar, at the right end: it is
   the filter's own read-out, so on its own line under a full-width bar it read as
   an orphan, and inside the bar it also stays on screen while the bar is stuck. */
.mp-products__count {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}

/* Fallback placement: a subsite with no collections has no bar to host it, so the
   summary sits above the grid and needs its own spacing. Right-aligned to match
   where it sits packed against the bar's right edge when the bar IS present. */
.mp-products__count--standalone {
	margin: 20px 0 10px;
	text-align: right;
}

/* Routed category page's escape hatch back to the unfiltered grid, in place of the
   filter bar (suppressed here, see page-products.php). Centred like .mp-page-lead
   above it, so the two read as one intro block rather than two unrelated pieces. */
.mp-category-back {
	margin: 0 0 var(--space-8);
	text-align: center;
}

/* The pills claim the free space, so the summary and the actions pack against the
   right edge of the bar without either needing an auto margin of its own (two
   auto margins would split the gap and push them apart). */
.mp-cm-filter--pills {
	margin-right: auto;
}

/* ── Browse-category disclosure ──────────────────────────────────────────────
   NOT a second pill row. The browse taxonomy grows (10-15 entries expected)
   while the bar is sticky and cannot, and a second row of identical pills read
   as the same axis as the collections. A <details> costs one slot regardless of
   how many categories exist, and its different affordance is the signal that it
   is a different question.

   <details> rather than a JS widget so it opens with no JavaScript at all and
   the plain GET form still applies the selection. */
/* Scoped to .mp-products__filters, like every other override in this file: the
   `.mp-cm-filter*` classes are the PLUGIN's (catalog-public.css), shared with the
   homepage catalog widget, and the theme only skins them on this page. The prefix
   also lifts specificity to 0,2,0 so the override cannot depend on stylesheet order
   — though the enqueue chain (mp-catalog-public → mp-search → mp-products) already
   guarantees this file loads last.

   display: block undoes the plugin's `.mp-cm-filter { display: flex; flex-direction:
   row }`, which this element inherits by also carrying the base class. A <details>
   is never a row: its children are the <summary> and the panel, and as flex siblings
   they sit SIDE BY SIDE. Desktop hid that because the panel is absolutely positioned
   and so leaves flex flow; the moment the panel returned to flow on mobile it landed
   beside the summary and ran off the screen. */
.mp-products__filters .mp-cm-filter--disclosure {
	display: block;
	position: relative;
	align-self: center;
	margin-right: auto;
}

/* Only ONE element may claim the bar's free space, or two auto margins split it
   and drive the groups apart. When the disclosure is present it takes over that
   job from the pills, so the two filter controls stay together on the left and
   the read-out and actions pack right. */
.mp-products__filters .mp-cm-filter--pills:has(~ .mp-cm-filter--disclosure) {
	margin-right: 0;
}

.mp-cm-filter__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--brand-sage, #b8c4ad);
	border-radius: 999px;
	background: transparent;
	font-size: 0.9rem;
	color: var(--brand-forest-dark, #122418);
	cursor: pointer;
	white-space: nowrap;
	list-style: none;
}

/* Safari/Chrome draw their own triangle through ::-webkit-details-marker and
   ignore list-style; both are needed or the pill gets a stray glyph. */
.mp-cm-filter__summary::-webkit-details-marker {
	display: none;
}

.mp-cm-filter__summary::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.15s;
}

.mp-cm-filter--disclosure[open] .mp-cm-filter__summary::after {
	transform: translateY(0.1em) rotate(225deg);
}

.mp-cm-filter__summary:hover {
	background: var(--brand-sage-soft, #e7ede0);
}

/* Filled state mirrors a checked pill, so "categories are narrowing this grid"
   reads the same whether the panel is open or shut. */
.mp-cm-filter--disclosure:has(input:checked) .mp-cm-filter__summary {
	background: var(--brand-forest, #1e3c2b);
	border-color: var(--brand-forest, #1e3c2b);
	color: var(--text-inverse, #fff);
}

/* Absolutely positioned: the bar is sticky, and a 15-item panel expanding in
   flow would push the grid down and eat most of the viewport on open. */
/* A single column, at every width. Multi-column packed short names beside long
   parenthetical ones and the eye had no single line to run down; a plain vertical
   list is what a filter menu is. There is room for it — the panel floats over the
   grid and scrolls internally past ~15 entries, so length costs nothing. */
.mp-cm-filter__panel {
	position: absolute;
	z-index: 20;
	top: calc(100% + 0.4rem);
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	width: max-content;
	max-width: min(30rem, calc(100vw - 2rem));
	max-height: min(60vh, 26rem);
	overflow-y: auto;
	padding: 0.5rem;
	border: 1px solid var(--border-light, #d4d4d4);
	border-radius: 12px;
	background: var(--bg-primary, #fff);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.mp-cm-filter__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.35rem;
	border-radius: 6px;
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--brand-forest-dark, #122418);
	cursor: pointer;
}

.mp-cm-filter__option:hover {
	background: var(--brand-sage-soft, #e7ede0);
}

/* The checkbox is this panel's ONLY state indicator — unlike a pill, which shows
   its own state through background and checkmark — so it must be visible and
   tinted to the brand rather than the browser's default blue. */
.mp-cm-filter__option input {
	flex: none;
	margin: 0;
	accent-color: var(--primary, var(--brand-forest, #1e3c2b));
}

/* Reinforce the tick: at a glance down a 20-row list, a small native checkbox is
   easy to miss, so a picked row also carries weight and a tinted band. */
.mp-cm-filter__option:has(input:checked) {
	background: var(--brand-sage-soft, #e7ede0);
	font-weight: 600;
}

/* The panel is anchored to its summary, which sits at the right end of a wide
   bar; near the viewport edge a left-anchored panel would overflow. Flip it. */
@media (min-width: 781px) {
	.mp-cm-filter--disclosure:last-of-type .mp-cm-filter__panel {
		left: auto;
		right: 0;
	}
}

/* On a phone the panel stops floating and opens in flow, full width of the bar, so
   it cannot overflow by construction. Pushing the grid down is normal accordion
   behaviour on mobile; the objection to in-flow was desktop viewport height, which
   does not apply where the bar sits at the top of a short screen.

   This only works together with `display: block` on the disclosure above. While the
   <details> was still a flex row (inherited from the plugin's `.mp-cm-filter`), an
   in-flow panel became a flex sibling of the <summary> and sat BESIDE it, running
   off the right edge — which looked exactly like the floating overflow this block
   was written to fix, and survived two attempts at fixing it. */
@media (max-width: 780px) {
	.mp-products__filters .mp-cm-filter--disclosure {
		position: static;
		width: 100%;
	}

	.mp-cm-filter__panel {
		position: static;
		width: 100%;
		max-width: none;
		max-height: 55vh;
		margin-top: 0.5rem;
		box-shadow: none;
	}
}

/* Visual parity with the Community tag row (community.css .mp-community__tag):
   same border weight, radius, spacing and colour tokens, so the two filter
   systems read as one visual language. Scoped to this page's bar so the
   plugin's shared pill rules keep serving the homepage catalog widget's
   store/webshop filter unchanged. The checkmark and count badge stay — they
   signal the multi-select behaviour the community tags don't have — and both
   inherit this color, so no separate override is needed for them. */
.mp-products__filters .mp-cm-filter--pills label,
.mp-products__filters .mp-cm-filter--pills > a {
	/* Less on the left: the reserved checkmark gutter below already buffers that
	   side, whether the tick is showing or not. Symmetric padding on top of a
	   full checkmark gutter was enough extra width, spread across the whole
	   pill row, to tip two pills that fit side by side (before the checkmark
	   reservation) into one-per-row wrapping instead. */
	padding: 0.35rem 0.9rem 0.35rem 0.3rem;
	border-width: 1px;
	border-color: var(--brand-sage, #b8c4ad);
	border-radius: 999px;
	background: transparent;
	font-size: 0.9rem;
	color: var(--brand-forest-dark, #122418);
}

.mp-products__filters .mp-cm-filter--pills label:hover,
.mp-products__filters .mp-cm-filter--pills > a:hover {
	border-color: var(--brand-sage, #b8c4ad);
	background: var(--brand-sage-soft, #e7ede0);
}

/* catalog-public.css grows the checkmark's max-width/margin from 0 on check,
   so a pill widens the moment it is picked. In a wrapping row that reflows
   every pill after it onto a different line on each click. Reserve the
   checkmark's space on every pill up front, whether checked or not, and only
   fade its opacity, so a pill's width never changes and wrapping never
   shifts. */
.mp-products__filters .mp-cm-filter--pills label::before,
.mp-products__filters .mp-cm-filter--pills > a::before {
	max-width: 1em;
	margin-right: 0.35em;
	opacity: 0;
	transition: opacity 0.15s;
}

.mp-products__filters .mp-cm-filter--pills label:has(input:checked)::before,
.mp-products__filters .mp-cm-filter--pills > a.is-active::before {
	opacity: 1;
}

.mp-products__filters .mp-cm-filter--pills label:has(input:checked),
.mp-products__filters .mp-cm-filter--pills > a.is-active {
	background: var(--brand-forest, #1e3c2b);
	border-color: var(--brand-forest, #1e3c2b);
	color: var(--text-inverse, #fff);
}

/* Dark mode: --brand-forest has no dark-mode value in style.css, so both
   checked states above would render almost flush with the dark page
   background. Redirect to --brand-forest-light, the theme's existing
   dark-mode substitute for this exact colour (style.css --primary-light). */
[data-theme="dark"] .mp-cm-filter--disclosure:has(input:checked) .mp-cm-filter__summary,
[data-theme="dark"] .mp-products__filters .mp-cm-filter--pills label:has(input:checked),
[data-theme="dark"] .mp-products__filters .mp-cm-filter--pills > a.is-active {
	background: var(--brand-forest-light, #375c45);
	border-color: var(--brand-forest-light, #375c45);
}

/* Same problem, resting state: .mp-cm-filter__summary, .mp-cm-filter__option
   and the unchecked pills all set color: var(--brand-forest-dark, #122418),
   which likewise has no dark-mode value. Against the dark filter bar (and the
   dark .mp-cm-filter__panel dropdown) that text is nearly unreadable — this is
   the bug the filter bar was originally reported for. Swap to
   --brand-sage-light, the same-family tint the theme already uses for
   outline/border elements in dark mode. */
[data-theme="dark"] .mp-cm-filter__summary,
[data-theme="dark"] .mp-cm-filter__option,
[data-theme="dark"] .mp-products__filters .mp-cm-filter--pills label,
[data-theme="dark"] .mp-products__filters .mp-cm-filter--pills > a {
	color: var(--brand-sage-light, #7fa068);
}

/* All four hover/checked states above switch to --brand-sage-soft, a fixed
   light cream background — so the resting-state fix just above would leave
   light-on-light text there. Pin the text back to dark for those states only. */
[data-theme="dark"] .mp-cm-filter__summary:hover,
[data-theme="dark"] .mp-cm-filter__option:hover,
[data-theme="dark"] .mp-cm-filter__option:has(input:checked),
[data-theme="dark"] .mp-products__filters .mp-cm-filter--pills label:hover,
[data-theme="dark"] .mp-products__filters .mp-cm-filter--pills > a:hover {
	color: var(--brand-forest-dark, #122418);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mp-cm-filter--disclosure:has(input:checked) .mp-cm-filter__summary,
	:root:not([data-theme="light"]) .mp-products__filters .mp-cm-filter--pills label:has(input:checked),
	:root:not([data-theme="light"]) .mp-products__filters .mp-cm-filter--pills > a.is-active {
		background: var(--brand-forest-light, #375c45);
		border-color: var(--brand-forest-light, #375c45);
	}

	:root:not([data-theme="light"]) .mp-cm-filter__summary,
	:root:not([data-theme="light"]) .mp-cm-filter__option,
	:root:not([data-theme="light"]) .mp-products__filters .mp-cm-filter--pills label,
	:root:not([data-theme="light"]) .mp-products__filters .mp-cm-filter--pills > a {
		color: var(--brand-sage-light, #7fa068);
	}

	:root:not([data-theme="light"]) .mp-cm-filter__summary:hover,
	:root:not([data-theme="light"]) .mp-cm-filter__option:hover,
	:root:not([data-theme="light"]) .mp-cm-filter__option:has(input:checked),
	:root:not([data-theme="light"]) .mp-products__filters .mp-cm-filter--pills label:hover,
	:root:not([data-theme="light"]) .mp-products__filters .mp-cm-filter--pills > a:hover {
		color: var(--brand-forest-dark, #122418);
	}
}

.mp-products__filters-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4, 1rem);
}

/* With JS the pills apply themselves, so the fallback button goes. */
.mp-products__filters--auto .mp-products__filters-apply {
	display: none;
}

/* Below this the pill row wraps (catalog-public.css's unconditional
   flex-wrap: wrap on .mp-cm-filter--pills, same as the community tags), so a
   sticky bar could grow to several rows tall and stay pinned over the grid.
   Un-stick instead: the bar scrolls away with the page, exactly like
   community's tag row, which was never sticky either. */
@media (max-width: 640px) {
	.mp-products__filters {
		position: static;
	}

	/* Stacked under the (now possibly multi-row) pills with no divider, the
	   count read as a stray line adrift in the bar's empty space rather than
	   the readout for the filter above it. */
	.mp-products__filters .mp-products__count {
		padding-top: 0.75rem;
		border-top: 1px solid var(--border-light, #d4d4d4);
	}
}

/* Way back out of a filter that matched nothing. */
.mp-cm-empty-state__action {
	margin: 1.5rem 0 0;
}

.mp-products__section {
	margin: 24px 0 8px;
}

.mp-products__grid {
	margin-bottom: 1.5rem;
}