/**
 * D-195: the card filters lay themselves out by the width they are given.
 *
 * ⚠️ WIDTH, NOT A SETTING. The same block sits in a narrow sidebar column and above the product
 * grid at full width (owner, 2026-09-20: side by side "if i didn't constrain the column to a size").
 * A container query answers that from the block's own inline size, so neither placement needs to be
 * configured and a theme changing its column widths keeps working. Stacked is the fallback: a
 * browser without container queries renders exactly today's sidebar.
 */
.cardtrack-card-filters {
	container-type: inline-size;
	container-name: cardtrack-card-filters;
}

/* Wide enough for more than one facet: a wrapping row, each facet taking a fair share. */
@container cardtrack-card-filters (min-width: 560px) {
	.cardtrack-card-filters__set {
		display: flex;
		flex-wrap: wrap;
		gap: var( --wp--style--block-gap, 1.25rem );
		align-items: flex-start;
	}

	.cardtrack-card-filters__set > * {
		flex: 1 1 12rem;
		min-width: 0;
	}
}

/* Pills wrap inside their own facet rather than forcing the row wider. */
.cardtrack-card-filters .wc-block-product-filter-chips__items {
	flex-wrap: wrap;
}

/* Headings sit tight to their options in a row, where vertical space is the scarce thing. */
@container cardtrack-card-filters (min-width: 560px) {
	.cardtrack-card-filters .wp-block-heading {
		margin-block-end: 0.35rem;
	}
}

/* ── The editor's inert example (D-197) ─────────────────────────────────────────────────────
 * Woo's filter blocks render nothing in admin, so the canvas would be an empty box while a
 * merchant is arranging a row. These rules dress fixed sample terms in the same shape the page
 * uses. They apply only inside the editor's example wrapper; the storefront never sees them.
 */
.cardtrack-card-filters--example .cardtrack-card-filters__example-facet {
	margin-block-end: 1rem;
}

.cardtrack-card-filters--example .wp-block-heading {
	margin-block-end: 0.35rem;
}

.cardtrack-card-filters--example .cardtrack-card-filters__example-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.cardtrack-card-filters--example .cardtrack-card-filters__example-list .cardtrack-card-filters__example-term::before {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-inline-end: 0.5em;
	border: 1px solid currentColor;
	border-radius: 2px;
	opacity: 0.5;
	vertical-align: -0.1em;
}

.cardtrack-card-filters--example .cardtrack-card-filters__example-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.cardtrack-card-filters--example .cardtrack-card-filters__example-pills .cardtrack-card-filters__example-term {
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0.15rem 0.7rem;
	opacity: 0.75;
}

.cardtrack-card-filters--example .cardtrack-card-filters__example-note {
	font-size: 0.8125rem;
	opacity: 0.7;
	margin-block: 0.5rem 0;
}

/* ── D-198: a pill per filter, opening that filter's own checkboxes ─────────────────────────
 * The panel floats, so opening one never reflows the row or pushes the products down.
 */
.cardtrack-card-filters__set:has( .cardtrack-card-filters__menu ) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-start;
}

.cardtrack-card-filters__menu {
	position: relative;
	flex: 0 0 auto;
}

.cardtrack-card-filters__menu-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
	user-select: none;
}

/* Safari still draws the default marker unless this pseudo-element is cleared too. */
.cardtrack-card-filters__menu-label::-webkit-details-marker {
	display: none;
}

.cardtrack-card-filters__menu-label::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-0.1em, -0.1em);
}

.cardtrack-card-filters__menu[open] > .cardtrack-card-filters__menu-label::after {
	transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.cardtrack-card-filters__menu-count {
	font-size: 0.8em;
	line-height: 1;
	padding: 0.15em 0.45em;
	border-radius: 999px;
	border: 1px solid currentColor;
	color: inherit;
}

/*
 * D-220: the panel scrolls inside the room it has. `src/card-filters/view.js` sets its max-height
 * to the room below the pill (never over 70vh, never under 220px) on open, resize and scroll; the
 * 60vh here is only what a browser without the script gets. `overscroll-behavior` keeps a list
 * that reaches its end from scrolling the page underneath it.
 */
.cardtrack-card-filters__menu-panel {
	position: absolute;
	z-index: 20;
	inset-inline-start: 0;
	margin-block-start: 0.35rem;
	/* The height the script sets is the whole panel's, padding and border included, whatever the
	 * theme's own box-sizing — without this a 322px list ended 26px below the window. */
	box-sizing: border-box;
	min-width: 14rem;
	max-height: 60vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.75rem 0.9rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.4rem;
	background: var( --wp--preset--color--base, #fff );
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Cramped below and roomier above: the panel opens upward from the pill instead. */
.cardtrack-card-filters__menu--up > .cardtrack-card-filters__menu-panel {
	inset-block-start: auto;
	inset-block-end: 100%;
	margin-block: 0 0.35rem;
}

/* ── D-220: the Set filter ──────────────────────────────────────────────────────────────────
 * Type-to-find sits above the sets. In a drop-down it stays in view while the list scrolls under
 * it; the panel's own padding is taken back so nothing shows through above it.
 */
.cardtrack-card-filters__find {
	margin-block-end: 0.5rem;
}

/* Set names are long ("Wilds of Eldraine: Enchanting Tales"); give them the width to sit on one
 * line where the window allows, rather than wrapping every name at the pill's narrow minimum. */
.cardtrack-card-filters__menu[data-cardtrack-facet="set"] > .cardtrack-card-filters__menu-panel {
	width: max-content;
	max-width: min(24rem, calc(100vw - 2rem));
}

.cardtrack-card-filters__menu-panel .cardtrack-card-filters__find {
	position: sticky;
	inset-block-start: -0.75rem;
	z-index: 1;
	margin-block: -0.75rem 0.5rem;
	padding-block: 0.75rem 0.25rem;
	background: var( --wp--preset--color--base, #fff );
}

.cardtrack-card-filters__find-input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.35rem 0.6rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 0.3rem;
	background: transparent;
	color: inherit;
	font: inherit;
}

.cardtrack-card-filters__find-none {
	margin-block: 0.5rem 0;
	font-size: 0.875em;
	opacity: 0.75;
}

/* An option the typed words do not match. Woo's own `hidden` binding is left alone. */
.cardtrack-card-filters .cardtrack-card-filters__find-miss {
	display: none !important;
}

/* On a set's own page the sets are links; the current one is this page. */
.cardtrack-card-filters__set-list ul {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cardtrack-card-filters__set-list a {
	color: inherit;
}

.cardtrack-card-filters__set-all {
	padding-block-end: 0.3rem;
	border-block-end: 1px solid rgba(0, 0, 0, 0.1);
}

.cardtrack-card-filters__set-link.is-current {
	font-weight: 600;
}

.cardtrack-card-filters__set-link.is-current::before {
	content: "✓" / "";
	margin-inline-end: 0.4em;
}

/* Outside a drop-down (list and pills styles) a game's sets get their own scroll area, so a
 * sidebar does not grow by every set the game has. */
.cardtrack-card-filters__set-filter.is-inline .wc-block-product-filter-checkbox-list__items,
.cardtrack-card-filters__set-filter.is-inline .cardtrack-card-filters__set-list ul {
	max-height: 20rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* On a phone the floating panel would overflow the screen, so it becomes part of the flow. */
@media (max-width: 480px) {
	.cardtrack-card-filters__menu {
		flex: 1 1 100%;
	}

	.cardtrack-card-filters__menu-panel {
		position: static;
		max-height: none;
		box-shadow: none;
	}
}

/*
 * When the filters block is the only thing in a flex row, let it have the row (D-198).
 *
 * ⚠️ A FLEX ITEM DOES NOT GROW BY DEFAULT. Dropping Woo's Product Filters into a flex group leaves
 * it at its content width — 318px on the live store inside a 620px group — so the facets stack no
 * matter how much room the page has. `:only-child` keeps this to the case where the row holds
 * nothing else: a genuine sidebar layout, where the filters sit beside the products, is untouched.
 * The group's own alignment is still the merchant's to set — this cannot widen a 620px container.
 */
.wp-block-woocommerce-product-filters:only-child:has( .cardtrack-card-filters ) {
	flex: 1 1 auto;
	width: 100%;
}