// The native renderer is isolated from the existing popup/style-family system.
.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters {
	--fqbpro-native-border-color: color-mix(in srgb, currentColor 45%, transparent);
	--fqbpro-control-min-height: 2em;
	--fqbpro-control-padding-y: 0.15em;
	--fqbpro-control-padding-x: 0.8em;

	// Scale with the surrounding text; explicit WordPress typography wins.
	&:not([data-native-style="unstyled"]) { font-size: max(12px, 0.9em); }

	// Unstyled retains the functional layout, native inputs and focus feedback.
	&[data-native-style="unstyled"] { --fqbpro-native-border-color: transparent; }

	.fqbpro-native-pattern-picker {
		padding: 2.5rem 1rem 1rem;
		button { margin: 0.25rem; }
	}
	.fqbpro-native-form {
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--wp--style--block-gap, 0.5rem);
		> noscript:has(> button) { display: contents; }
	}

	// Keep an automatic Apply action beside a single authored horizontal row.
	@media (min-width: 601px) {
		> .fqbpro-native-form[data-native-inline-apply] {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: flex-end;
			> .wp-block-group { flex: 1 1 20rem; min-inline-size: 0; }
			> [data-native-fallback-apply] { flex: 0 0 auto; min-block-size: var(--fqbpro-control-min-height); }
		}
	}

	.fqbpro-native-control {
		box-sizing: border-box;
		min-inline-size: 0;
		max-inline-size: 100%;
	}
	// Search starts at a useful field width rather than stretching its whole row.
	.is-kind-search { inline-size: 14rem; flex: 0 1 auto; }
	@media (max-width: 782px) {
		.is-kind-search { inline-size: 100%; }
	}
	// Block supports paint the wrapper inline, but these values are already
	// projected onto the actual fields below. Avoid drawing both layers.
	.fqbpro-native-control[data-native-field-style*="border-"] { border: 0 !important; }
	.fqbpro-native-control[data-native-field-style~="background"] { background: transparent !important; }

	// Generated dialog/menu actions sit outside child control wrappers.
	// Reset every owned button before presets and explicit block styles apply.
	:where(button, [data-native-reset]) {
		appearance: none;
		box-sizing: border-box;
		max-inline-size: 100%;
		min-block-size: var(--fqbpro-control-min-height);
		margin: 0;
		padding: var(--fqbpro-control-padding-y) var(--fqbpro-control-padding-x);
		border: 1px solid var(--fqbpro-native-border-color);
		border-radius: 0.25em;
		background: transparent;
		box-shadow: none;
		font: inherit;
		line-height: 1.25;
		color: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		cursor: pointer;
	}

	.fqbpro-native-control :where(input, select, button, .fqbpro-date-trigger) {
		box-sizing: border-box;
		max-inline-size: 100%;
		font: inherit;
		line-height: 1.25;
		color: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
	}
	.fqbpro-native-control :where(input:not([type="checkbox"]):not([type="radio"]), select, .fqbpro-choice-trigger, .fqbpro-date-trigger, [data-native-apply]) {
		margin: 0;
		padding: var(--fqbpro-control-padding-y) var(--fqbpro-control-padding-x);
		border: 1px solid var(--fqbpro-native-border-color);
		border-radius: 0.25em;
		background: transparent;
		box-shadow: none;
	}
	.fqbpro-native-control input[type="search"] { appearance: none; }

	.fqbpro-native-control :where(input:not([type="checkbox"]):not([type="radio"]), select) {
		min-block-size: var(--fqbpro-control-min-height);
		inline-size: 100%;
	}

	.fqbpro-native-control :where(button, input[type="submit"], input[type="reset"]) {
		min-block-size: var(--fqbpro-control-min-height);
		cursor: pointer;
	}

	.is-kind-reset a {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--fqbpro-control-min-height);
		text-decoration: none;
	}

	.fqbpro-native-control > label,
	.fqbpro-native-control__label,
	.fqbpro-native-control legend {
		display: block;
		margin-block-end: 0.4em;
		padding: 0;
		font-size: 0.8em;
		font-weight: 400;
		color: color-mix(in srgb, currentColor 75%, transparent);
	}

	.fqbpro-native-control[data-show-label="false"] > :where(label, .fqbpro-native-control__label),
	.fqbpro-native-control[data-show-label="false"] > fieldset > legend {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		border: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.fqbpro-native-control fieldset {
		border: 0;
		padding: 0;
		margin: 0;
		min-inline-size: 0;
	}

	.fqbpro-native-options {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
	}

	[data-native-range] .fqbpro-native-options > label {
		display: flex;
		flex-direction: column;
		gap: 0.4em;
		flex: 1 1 8rem;
		min-inline-size: 0;
	}

	.fqbpro-native-option {
		display: inline-flex;
		align-items: baseline;
		gap: 0.4em;
		max-inline-size: 100%;
		cursor: pointer;
		overflow-wrap: anywhere;
	}

	.fqbpro-native-option label {
		cursor: pointer;
		overflow-wrap: anywhere;
	}

	.fqbpro-native-option input {
		flex: 0 0 auto;
		accent-color: currentColor;
	}

	.fqbpro-native-control[data-presentation="buttons"] .fqbpro-native-option {
		display: inline-flex;
		align-items: center;
		line-height: 1.25;
		cursor: pointer;

		> span { line-height: inherit; cursor: inherit; }
		> input { cursor: inherit; }
	}

	@each $case in (capitalize, uppercase, lowercase) {
		.is-kind-choice[data-term-case="#{$case}"] :is(.fqbpro-native-option, select, .fqbpro-choice-trigger, .fqbpro-choice-option, .fqbpro-overflow-panel button) { text-transform: $case; }
	}

	.fqbpro-native-option:where(a) { color: inherit; text-decoration: none; }

	.fqbpro-native-option:where([aria-current="true"], [aria-pressed="true"]),
	.fqbpro-native-option:where(:has(input:checked)) :where(label),
	.fqbpro-native-option:where(:has(input:checked)):where(label) {
		font-weight: inherit;
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	:where([data-presentation="buttons"]) .fqbpro-native-option {
		box-sizing: border-box;
		min-block-size: var(--fqbpro-control-min-height);
		border: 1px solid var(--fqbpro-native-border-color);
		border-radius: 0.25em;
		padding: var(--fqbpro-control-padding-y) var(--fqbpro-control-padding-x);
	}

	:where([data-presentation="buttons"]) .fqbpro-native-option:where(:has(input:checked), [aria-current="true"], [aria-pressed="true"]) {
		background: color-mix(in srgb, currentColor 10%, transparent);
		outline: 1px solid currentColor;
	}

	.fqbpro-native-control :where(input, select, button, .fqbpro-date-trigger):disabled {
		opacity: 0.55;
		cursor: not-allowed;
	}

	&[data-native-style="outlined"],
	&[data-native-style="soft"] {
		.fqbpro-native-control :where(input:not([type="checkbox"]):not([type="radio"]), select, button, [data-native-reset]) {
			color: inherit;
			background: transparent;
			border: 1px solid var(--fqbpro-native-border-color);
			border-radius: 0.25em;
			padding: var(--fqbpro-control-padding-y) var(--fqbpro-control-padding-x);
		}
	}

	&[data-native-style="filled"] {
		--fqbpro-native-menu-background: color-mix(in srgb, currentColor 8%, transparent);
		--fqbpro-native-menu-selected-background: color-mix(in srgb, currentColor 18%, transparent);
		.fqbpro-native-control :where(input:not([type="checkbox"]):not([type="radio"]), select, button, .fqbpro-date-trigger, [data-native-reset], .fqbpro-native-option),
		:where(.fqbpro-native-popup-toggle, .fqbpro-native-popup-close, .fqbpro-native-popup__footer button, .fqbpro-native-form > [data-native-apply]) {
			box-sizing: border-box;
			min-block-size: var(--fqbpro-control-min-height);
			padding: var(--fqbpro-control-padding-y) var(--fqbpro-control-padding-x);
			border: 1px solid transparent;
			border-radius: 0.25em;
			background: color-mix(in srgb, currentColor 8%, transparent);
			color: inherit;
			box-shadow: none;
			text-decoration: none;
		}
		.fqbpro-native-control :where(.fqbpro-native-option:has(input:checked), .fqbpro-native-option[aria-current="true"], .fqbpro-native-option[aria-pressed="true"], .fqbpro-choice-option[aria-pressed="true"]),
		:where([data-native-popup-apply]) {
			background: color-mix(in srgb, currentColor 18%, transparent);
			font-weight: inherit;
			outline: none;
			text-decoration: none;
		}
	}

	&[data-native-style="soft"] {
		--fqbpro-native-border-color: color-mix(in srgb, currentColor 25%, transparent);
		.fqbpro-native-control :where(input:not([type="checkbox"]):not([type="radio"]), select, button, [data-native-reset]) {
			background: color-mix(in srgb, currentColor 6%, transparent);
			border-color: var(--fqbpro-native-border-color);
		}
	}

	// Presets style button choices and dropdowns. Native radios/checkboxes remain
	// plain, and the later child block-support tokens can override each preset.
	&:not([data-native-style="unstyled"]) .fqbpro-native-control[data-choice-style]:where([data-presentation="buttons"], [data-presentation="dropdown"]) :where(.fqbpro-native-option, select, .fqbpro-choice-trigger) {
		min-block-size: var(--fqbpro-control-min-height);
		box-sizing: border-box;
		align-items: center;
		padding: var(--fqbpro-control-padding-y) var(--fqbpro-control-padding-x);
		color: inherit;
		background: transparent;
		border: 1px solid var(--fqbpro-native-border-color);
		border-radius: 0.25em;
		box-shadow: none;
	}
	&:not([data-native-style="unstyled"]) .fqbpro-native-control[data-choice-style]:where([data-presentation="buttons"]) :where(.fqbpro-native-option:has(input:checked), .fqbpro-native-option[aria-current="true"]) {
		outline: none;
		text-decoration: none;
	}
	&:not([data-native-style="unstyled"]) .fqbpro-native-control[data-choice-style="text"]:where([data-presentation="buttons"], [data-presentation="dropdown"]) :where(.fqbpro-native-option, select, .fqbpro-choice-trigger) { border: 0; border-radius: 0; padding-inline: 0.25em; }
	&:not([data-native-style="unstyled"]) .fqbpro-native-control[data-choice-style="text"]:where([data-presentation="buttons"]) :where(.fqbpro-native-option:has(input:checked), .fqbpro-native-option[aria-current="true"]) { text-decoration: underline; }
	&:not([data-native-style="unstyled"]) .fqbpro-native-control[data-choice-style="outlined"]:where([data-presentation="buttons"]) :where(.fqbpro-native-option:has(input:checked), .fqbpro-native-option[aria-current="true"]) { background: color-mix(in srgb, currentColor 10%, transparent); }
	&:not([data-native-style="unstyled"]) .fqbpro-native-control[data-choice-style="pill"]:where([data-presentation="buttons"], [data-presentation="dropdown"]) :where(.fqbpro-native-option, select, .fqbpro-choice-trigger) { border-radius: 999px; }
	&:not([data-native-style="unstyled"]) .fqbpro-native-control[data-choice-style="pill"]:where([data-presentation="buttons"]) :where(.fqbpro-native-option) { min-inline-size: 2.75em; justify-content: center; padding-inline: var(--fqbpro-control-padding-x); border: 0; }
	&:not([data-native-style="unstyled"]) .fqbpro-native-control[data-choice-style="pill"]:where([data-presentation="buttons"]) :where(.fqbpro-native-option:has(input:checked), .fqbpro-native-option[aria-current="true"]) {
		background: color-mix(in srgb, currentColor 10%, transparent);
	}
	&:not([data-native-style="unstyled"]) .fqbpro-native-control[data-choice-style="underline"]:where([data-presentation="buttons"], [data-presentation="dropdown"]) :where(.fqbpro-native-option, select, .fqbpro-choice-trigger) {
		border: 0;
		border-radius: 0;
		border-block-end: 2px solid var(--fqbpro-native-border-color);
		padding-inline: 0.25em;
	}
	&:not([data-native-style="unstyled"]) .fqbpro-native-control[data-choice-style="underline"]:where([data-presentation="buttons"]) {
		:where(.fqbpro-native-options) { gap: 0 1rem; border-block-end: 1px solid var(--fqbpro-native-border-color); }
		:where(.fqbpro-native-option) { margin-block-end: -1px; border-block-end-color: transparent; }
		:where(.fqbpro-native-option:has(input:checked), .fqbpro-native-option[aria-current="true"]) { border-block-end-color: currentColor; }
	}
	&:not([data-native-style="unstyled"]) .fqbpro-native-control[data-choice-style]:where([data-presentation="buttons"]) .fqbpro-native-option {
		position: relative;
		&:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }
	}
	// Button decoration is independent of the theme and appearance preset.
	// Keep hidden inputs focusable so labels, keyboard selection and forms work.
	.fqbpro-native-control[data-presentation="buttons"][data-button-indicators="false"] .fqbpro-native-option {
		position: relative;
		input { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; clip-path: inset(50%); overflow: hidden; }
	}
	@each $show, $decoration in ("false": none, "true": underline) {
		.fqbpro-native-control[data-presentation="buttons"][data-button-underline="#{$show}"] .fqbpro-native-option:where(:has(input:checked), [aria-current="true"], [aria-pressed="true"]),
		.fqbpro-native-control[data-presentation="buttons"] .fqbpro-native-option[data-button-underline="#{$show}"]:where([aria-pressed="true"]),
		.fqbpro-native-control[data-presentation="buttons"][data-button-underline="#{$show}"] .fqbpro-native-option:where(:has(input:checked)) label {
			text-decoration: $decoration;
		}
	}
	.fqbpro-native-button-indicator {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 0.8em;
		block-size: 0.8em;
		border: 1px solid currentColor;
		border-radius: 0.1em;
		text-decoration: none;
		&[data-type="radio"] { border-radius: 50%; }
	}
	[aria-pressed="true"] > .fqbpro-native-button-indicator::after { content: "✓"; font-size: 0.8em; }
	[aria-pressed="true"] > .fqbpro-native-button-indicator[data-type="radio"]::after { content: ""; inline-size: 0.45em; block-size: 0.45em; border-radius: 50%; background: currentColor; }
	.fqbpro-native-control :where(input, select, button, a):focus-visible,
	:where(.fqbpro-native-popup-toggle, .fqbpro-native-popup-close, .fqbpro-native-popup__footer button):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
	.fqbpro-native-control :where(input:not([type="checkbox"]):not([type="radio"]), select, .fqbpro-choice-trigger, .fqbpro-date-trigger):focus-visible {
		outline-color: color-mix(in srgb, currentColor 55%, transparent);
		outline-offset: 2px;
	}
	.fqbpro-native-control :where(.fqbpro-native-option):is(:focus-visible, :has(input:focus-visible)) { outline: 2px solid currentColor; outline-offset: 3px; }


	// PHP and the editor expose only explicitly selected block-support values.
	// Flags preserve the theme's own field defaults when a support is unset.
	// These inherited tokens also reach date/number inputs inside fieldsets.
	$field-properties: (
		"color", "background", "border-color", "border-style", "border-width",
		"border-radius", "border-top-color", "border-right-color",
		"border-bottom-color", "border-left-color", "border-top-style",
		"border-right-style", "border-bottom-style", "border-left-style",
		"border-top-width", "border-right-width", "border-bottom-width",
		"border-left-width", "border-top-left-radius", "border-top-right-radius",
		"border-bottom-right-radius", "border-bottom-left-radius"
	);

	// Themes supply the shape until the author chooses shared or individual radii.
	@each $shape, $radius in ("square": 0, "rounded": 0.5rem, "pill": 999px) {
		&[data-native-shape="#{$shape}"] {
			.fqbpro-native-control :where(input:not([type="checkbox"]):not([type="radio"]), select, button, .fqbpro-date-trigger, [data-native-reset], .fqbpro-native-option),
			:where(.fqbpro-native-popup-toggle, .fqbpro-native-popup-close, .fqbpro-native-popup__footer button, .fqbpro-native-form > [data-native-apply]) { border-radius: $radius; }
		}
	}

	// Choice labels inherit Header text naturally. Projecting Header background
	// or border tokens onto them would erase their selected preset states.
	@each $property in $field-properties {
		&[data-native-field-style~="#{$property}"] .fqbpro-native-control :where(
			input:not([type="checkbox"]):not([type="radio"]),
			select,
			button, .fqbpro-date-trigger,
			[data-native-reset]
		),
		&[data-native-field-style~="#{$property}"] :where(.fqbpro-native-popup-toggle, .fqbpro-native-popup-close, .fqbpro-native-popup__footer button, .fqbpro-native-form > [data-native-apply]) {
			#{$property}: var(--fqbpro-native-field-#{$property});
		}
	}

	// Shared corners also reach button choices without repainting their selected
	// backgrounds. Individual corner settings below still take priority.
	@each $property in ("border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius") {
		&[data-native-field-style~="#{$property}"] .fqbpro-native-control :where(.fqbpro-native-option) {
			#{$property}: var(--fqbpro-native-field-#{$property});
		}
	}
	&[data-native-shape="pill"] .fqbpro-native-control :where(.fqbpro-native-option, [data-native-apply], [data-native-reset]) { min-inline-size: 2.75em; justify-content: center; padding-inline: var(--fqbpro-control-padding-x); }

	// More opens a menu; only the actual term choices use pill shapes.
	.fqbpro-native-control .fqbpro-overflow-toggle {
		background: transparent;
		border: 0;
		border-radius: 0;
		padding-inline: 0.25em;
		box-shadow: none;
		text-decoration: none;
		font-weight: inherit;
		&:where([data-has-selection]) { font-weight: inherit; }
	}
	.fqbpro-native-control .fqbpro-overflow-panel :where(button) {
		padding: 0.65em 0.9em;
		line-height: 1.4;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		text-align: start;
		&:where(:hover, [aria-pressed="true"]) { background: color-mix(in srgb, currentColor 12%, transparent); }
	}

	// Child shorthands also override Header side/corner settings. Child-specific
	// sides and corners follow their shorthand in this list and remain stronger.
	@each $property in $field-properties {
		.fqbpro-native-control[data-native-field-style~="#{$property}"] :where(
			input:not([type="checkbox"]):not([type="radio"]),
			select,
			button, .fqbpro-date-trigger,
			[data-native-reset],
			.fqbpro-native-option
		) {
			#{$property}: var(--fqbpro-native-field-#{$property});
		}
	}
	.fqbpro-native-control[data-native-field-style~="background"] {
		--fqbpro-native-menu-background: var(--fqbpro-native-field-background);
		--fqbpro-native-menu-selected-background: var(--fqbpro-native-field-background);
	}

	&[data-native-field-style~="color"] .fqbpro-native-control :where(input[type="checkbox"], input[type="radio"]),
	.fqbpro-native-control[data-native-field-style~="color"] :where(input[type="checkbox"], input[type="radio"]) {
		accent-color: var(--fqbpro-native-field-color);
	}

	&[data-native-layout="sidebar"] .fqbpro-native-options {
		flex-direction: column;
	}
	&[data-native-layout="sidebar"] .fqbpro-native-control[data-choice-style="text"] .fqbpro-native-option {
		justify-content: flex-start;
		text-align: start;
	}

	@media (max-width: 600px) {
		.fqbpro-native-control:not(.is-kind-apply):not(.is-kind-reset) {
			flex-basis: 100%;
			inline-size: 100%;
		}
	}
}



.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters {
	[data-native-calendar] { position: relative; }
	.fqbpro-date-trigger { display: block; box-sizing: border-box; min-block-size: var(--fqbpro-control-min-height); inline-size: 100%; text-align: start; cursor: pointer; list-style: none; }
	.fqbpro-date-trigger::-webkit-details-marker { display: none; }
	.fqbpro-date-fallback > .fqbpro-native-options { margin-block-start: 0.5rem; }
	.fqbpro-date-fallback > .fqbpro-native-options[hidden] { display: none; }
	.fqbpro-date-calendar {
		position: absolute;
		inset-inline-start: 0;
		z-index: 30;
		inline-size: min(40rem, calc(100vw - 2rem));
		max-inline-size: calc(100vw - 2rem);
		box-sizing: border-box;
		padding: 0.75rem;
		border: 1px solid currentColor;
		border-radius: 0.4rem;
		color: var(--wp--preset--color--contrast, #1e1e1e);
		background: var(--wp--preset--color--base, #fff);
		box-shadow: 0 0.5rem 1.5rem #0002;
		p { margin: 0.5rem 0; font-size: 0.875em; }
	}
	.fqbpro-date-navigation { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
	.fqbpro-native-control .fqbpro-date-navigation button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		inline-size: 44px;
		block-size: 44px;
		min-inline-size: 0;
		min-block-size: 0;
		padding: 0;
		border-radius: 50%;
	}
	.fqbpro-date-grid {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 0.15rem;
		text-align: center;
		margin-block: 0.5rem;
		> abbr { font-size: 0.75em; text-decoration: none; }
	}
	.fqbpro-date-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
	.fqbpro-date-months h3 { font: inherit; font-weight: 600; text-align: center; margin: 0.5rem 0; }
	.fqbpro-native-control .fqbpro-date-grid button {
		padding: 0.2rem; min-inline-size: 0; min-block-size: 0; inline-size: min(2.75rem, 100%); block-size: auto; aspect-ratio: 1; justify-self: center; border: 0; border-radius: 50%; background: transparent;
		&:hover, &.is-in-range, &.is-preview { background: color-mix(in srgb, currentColor 12%, transparent); }
		&.is-boundary { background: var(--wp--preset--color--contrast, #1e1e1e); color: var(--wp--preset--color--base, #fff); font-weight: inherit; }
		&[aria-current="date"]:not(.is-boundary) { box-shadow: inset 0 0 0 1px currentColor; }
	}
	@media (max-width: 600px) {
		.fqbpro-date-calendar { inline-size: min(22rem, calc(100vw - 2rem)); }
		.fqbpro-date-months { grid-template-columns: minmax(0, 1fr); }
	}
	.fqbpro-date-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; button { font-size: 0.8em; } }
	.fqbpro-date-calendar[hidden], [data-native-calendar] > .fqbpro-native-options[hidden] { display: none; }
}

.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters {
	.fqbpro-native-popup-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		min-inline-size: 44px;
		cursor: pointer;
		font: inherit;
		svg { inline-size: 1.05em; block-size: 1.25em; flex-shrink: 0; }
		&[hidden], [hidden] { display: none; }
	}
	// Always-popup pages render the same icon before the module moves the form.
	// With scripting disabled the pending trigger stays hidden and GET works.
	@media (scripting: enabled) {
		&[data-native-presentation="popup"] {
			> .fqbpro-native-popup-toggle[data-native-popup-pending] { display: inline-flex; }
			> [data-native-popup-pending] ~ .fqbpro-native-form { display: none; }
		}
	}
	.fqbpro-native-popup {
		--fqbpro-popup-padding: clamp(1.25rem, 2.5vw, 2rem);
		box-sizing: border-box;
		inline-size: min(80rem, calc(100vw - 2rem));
		max-inline-size: calc(100vw - 2rem);
		max-block-size: calc(100dvh - 2rem);
		overflow: auto;
		padding: var(--fqbpro-popup-padding);
		border: 1px solid currentColor;
		border-radius: 0.5rem;
		background: var(--fqbpro-native-field-background, var(--wp--preset--color--base, #fff));
		color: var(--fqbpro-native-field-color, var(--wp--preset--color--contrast, #1e1e1e));
		&::backdrop { background: rgb(0 0 0 / 45%); }
		.fqbpro-date-calendar { position: static; inline-size: 100%; max-inline-size: 100%; margin-block: 0.5rem; }
	}
	.fqbpro-native-popup__heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-block-end: var(--fqbpro-popup-padding);
	}
	.fqbpro-native-popup__heading .fqbpro-native-popup__title { margin: 0; font: inherit; font-size: 1.25em; font-weight: 600; }
	.fqbpro-native-popup__heading .fqbpro-native-popup-close {
		margin: 0;
		padding: 0;
		flex: 0 0 auto;
		inline-size: 44px;
		block-size: 44px;
		border-radius: 50%;
	}
	.fqbpro-native-popup-close > span { font-size: 1.5em; line-height: 1; }
	.fqbpro-native-popup-close { display: flex; align-items: center; justify-content: center; inline-size: 44px; margin-inline-start: auto; margin-block: 0 1rem; min-block-size: var(--fqbpro-control-min-height); padding: 0.5em 0.9em; cursor: pointer; font: inherit; }
}

.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters[data-native-layout="sidebar"] {
	.fqbpro-control-layout > .fqbpro-native-control:not(.is-kind-apply):not(.is-kind-reset):not(.is-kind-search) { inline-size: 100%; }
	[data-native-range] .fqbpro-native-options > label { flex-basis: auto; }
}

// Searchable and multiple choice controls enhance their real submitted select.
.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters {
	select[data-native-choice][hidden],
	.is-kind-sort select[hidden],
	.fqbpro-choice-panel[hidden],
	.fqbpro-choice-option[hidden],
	.fqbpro-choice-empty[hidden],
	.fqbpro-choice-search[hidden],
	.fqbpro-choice-actions[hidden] { display: none !important; }
	.fqbpro-choice-picker { position: relative; min-inline-size: 0; }
	.fqbpro-choice-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.75rem; inline-size: 100%; text-align: start; }
	.fqbpro-choice-trigger::after { content: ''; flex-shrink: 0; inline-size: 0.35em; block-size: 0.35em; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-0.1em); }
	.fqbpro-choice-panel {
		position: absolute;
		z-index: 40;
		&[popover] { position: fixed; inset: auto; margin: 0; }
		box-sizing: border-box;
		inline-size: max(100%, 18rem);
		max-inline-size: calc(100vw - 2rem);
		padding: 0.65rem;
		overflow: auto;
		overscroll-behavior: contain;
		border: 1px solid currentColor;
		border-radius: 0.35rem;
		color: var(--wp--preset--color--contrast, #1e1e1e);
		background: var(--wp--preset--color--base, #fff);
		box-shadow: 0 0.5rem 1.5rem #0002;
	}
	.fqbpro-choice-options { display: grid; gap: 0.2rem; margin-block-start: 0.5rem; }
	.fqbpro-native-control .fqbpro-choice-option {
		inline-size: 100%;
		text-align: start;
		border: 0;
		background: var(--fqbpro-native-menu-background, transparent);
		color: inherit;
		padding: 0.45rem 0.6rem;
		&:hover, &[aria-pressed="true"] { background: var(--fqbpro-native-menu-selected-background, color-mix(in srgb, currentColor 10%, transparent)); }
		&[aria-pressed="true"] { font-weight: inherit; }
	}
	.fqbpro-choice-empty { margin: 0.6rem 0; font-size: 0.875em; }
	.fqbpro-choice-picker[data-multiple="true"] .fqbpro-choice-option {
		display: flex;
		align-items: center;
		gap: 0.6em;
		&::before { content: ''; display: inline-grid; place-items: center; flex: 0 0 1em; inline-size: 1em; block-size: 1em; border: 1px solid currentColor; border-radius: 0.15em; }
		&[aria-pressed="true"]::before { content: '✓'; }
	}
	.fqbpro-choice-picker[data-show-checkboxes="false"] .fqbpro-choice-option::before { display: none; }
	.fqbpro-choice-actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0.5rem;
		margin-block-start: 0.5rem;
		padding-block-start: 0.5rem;
		border-block-start: 1px solid color-mix(in srgb, currentColor 20%, transparent);
		button { min-block-size: var(--fqbpro-control-min-height); }
	}
}

.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters[data-native-ui="1"] {
	// Authored Rows own their alignment; artificial label padding offsets actions.
	.fqbpro-native-control :where(input:not([type="checkbox"]):not([type="radio"]), select, .fqbpro-choice-trigger, .fqbpro-date-trigger, [data-native-reset], [data-native-apply], .wp-element-button) {
		min-block-size: var(--fqbpro-control-min-height);
		vertical-align: middle;
	}
	.fqbpro-native-popup .fqbpro-control-layout.is-layout-flex:not(.is-vertical) {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 1.5rem;
		> .fqbpro-native-control { inline-size: auto; }
		> .is-kind-choice[data-presentation="buttons"] { flex: 1 1 12rem; }
		> .is-kind-search { flex: 0 1 14rem; inline-size: 14rem; }
	}
	.fqbpro-active-filters[data-native-summary] {
		margin-block: 1rem;
		ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
		li { min-inline-size: 0; max-inline-size: 100%; }
		.fqbpro-filter-chip { display: inline-flex; align-items: center; gap: 0.5em; box-sizing: border-box; max-inline-size: 100%; min-block-size: var(--fqbpro-control-min-height); padding: 0.4em 0.8em; border: 1px solid currentColor; border-radius: 999px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
		.fqbpro-filter-chip:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
	}
	.fqbpro-clear-all { display: inline-flex; align-items: center; min-block-size: var(--fqbpro-control-min-height); margin-block-start: 0.5rem; color: inherit; }
	.fqbpro-clear-control {
		margin-block-start: 0.35rem;
		&:is(a, button), :where(a, button) { display: inline-flex; align-items: center; min-block-size: var(--fqbpro-control-min-height); padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 0.8125em; text-decoration: underline; text-underline-offset: 0.2em; }
		&[hidden] { display: none; }
	}
	.fqbpro-native-popup-toggle[data-native-popup-toggle] {
		position: relative;
		inline-size: 44px;
		block-size: 44px;
		min-block-size: var(--fqbpro-control-min-height);
		padding: 0;
		border-radius: 50%;
		> span:not([hidden]) {
			position: absolute;
			inset-block-start: -0.35em;
			inset-inline-end: -0.35em;
			min-inline-size: 1.5em;
			padding: 0.1em 0.3em;
			border-radius: 999px;
			font-size: 0.75em;
			line-height: 1.3;
			background: var(--wp--preset--color--contrast, #1e1e1e);
			color: var(--wp--preset--color--base, #fff);
		}
	}
	.fqbpro-native-popup[data-draft="true"] {
		.is-kind-apply, .is-kind-reset { display: none; }
		.fqbpro-native-popup__footer {
			position: sticky;
			inset-block-end: calc(-1 * var(--fqbpro-popup-padding));
			z-index: 2;
			display: flex;
			flex-wrap: wrap;
			gap: 0.75rem;
			margin: var(--fqbpro-popup-padding) calc(-1 * var(--fqbpro-popup-padding)) calc(-1 * var(--fqbpro-popup-padding));
			padding: 1.25rem var(--fqbpro-popup-padding);
			border-block-start: 1px solid color-mix(in srgb, currentColor 20%, transparent);
			background: var(--fqbpro-native-field-background, var(--wp--preset--color--base, #fff));
			button { flex: 0 1 auto; min-inline-size: 7rem; min-block-size: 44px; padding: 0.5em 1.25em; cursor: pointer; font: inherit; }
			[data-native-popup-clear] { margin-inline-end: auto; }
			@media (max-width: 600px) {
				button { flex: 1 1 0; min-inline-size: 0; }
			}
		}
	}
}

// Opt-in desktop overflow reserves space for neighbouring search/sort controls.
// Without JavaScript, every original choice remains visible and wraps normally.
.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters {
	.fqbpro-control-layout.is-layout-flex:not(.is-vertical):has(> [data-overflow-ready]) {
		flex-wrap: wrap;
		> [data-overflow-ready] { flex: 1 1 0; min-inline-size: min(100%, var(--fqbpro-overflow-min-width, 6rem)); }
		> .is-kind-search { flex: 0 1 14rem; min-inline-size: 8rem; }
		> .is-kind-sort { flex: 0 1 12rem; min-inline-size: 8rem; }
	}
	[data-overflow-ready] .fqbpro-native-options {
		position: relative;
		flex-wrap: nowrap;
		align-items: center;
		> .fqbpro-native-option, > .fqbpro-overflow-toggle { flex-shrink: 0; white-space: nowrap; }
	}
	.fqbpro-native-option[data-overflow-hidden],
	.fqbpro-overflow-toggle[hidden], .fqbpro-overflow-panel[hidden],
	.fqbpro-overflow-panel button[hidden], .fqbpro-overflow-count[hidden] {
		// Functional visibility must win over the button presentation's display.
		display: none !important;
	}
	.fqbpro-overflow-toggle {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.6em;
		min-inline-size: 5rem;
		&::after { content: ''; inline-size: 0.35em; block-size: 0.35em; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-0.1em); }
	}
	.fqbpro-overflow-count { position: absolute; inset-block-start: -0.4em; inset-inline-end: -0.2em; padding: 0.1em 0.35em; border-radius: 999px; font-size: 0.7em; background: var(--wp--preset--color--contrast, #222); color: var(--wp--preset--color--base, #fff); }
	.fqbpro-overflow-panel {
		position: absolute;
		inset-block-start: calc(100% + 0.5rem);
		inset-inline-end: 0;
		z-index: 20;
		display: grid;
		gap: 0.375rem;
		inline-size: min(18rem, calc(100vw - 2rem));
		max-block-size: 20rem;
		overflow: auto;
		box-sizing: border-box;
		padding: 0.5rem;
		border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
		border-radius: 0.5rem;
		background: var(--fqbpro-native-field-background, var(--wp--preset--color--base, #fff));
		color: var(--fqbpro-native-field-color, var(--wp--preset--color--contrast, #222));
		button { text-align: start; white-space: normal; border: 0; padding: var(--fqbpro-control-padding-y) var(--fqbpro-control-padding-x); background: transparent; }
		button:hover, button[aria-pressed="true"] { background: color-mix(in srgb, currentColor 12%, transparent); }
		button[aria-pressed="true"] { font-weight: inherit; }
	}
}

.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters {
	&:not([data-native-style="unstyled"]) .fqbpro-native-control .fqbpro-native-option:hover {
		background: color-mix(in srgb, currentColor 12%, transparent);
	}
	.fqbpro-native-icon-field { position: relative; display: block; }
	.fqbpro-native-field-icon {
		position: absolute; inset-inline-start: 0.85em; inset-block-start: 50%;
		transform: translateY(-50%); inline-size: 1em; block-size: 1em;
		background: currentColor; pointer-events: none;
	}
	.fqbpro-native-control[data-show-icon="false"] .fqbpro-native-field-icon { display: none; }
	.fqbpro-native-control[data-show-icon="true"] .fqbpro-native-icon-field :is(input, select) { padding-inline-start: 2.4em; }
	.is-kind-sort .fqbpro-native-field-icon { z-index: 1; }
	.fqbpro-native-control[data-show-icon="true"] .fqbpro-native-icon-field .fqbpro-choice-trigger { padding-inline-start: 2.4em; }
	&:not([data-native-style="unstyled"]) :is(.is-kind-sort .fqbpro-native-icon-field:has(> select:not([hidden])), .fqbpro-native-select-field:has(> select:not([hidden]):not([multiple])), .fqbpro-choice-trigger) {
		position: relative;
		&.fqbpro-choice-trigger { padding-inline-end: 2.4em; }
		select { appearance: none; padding-inline-end: 2.4em; }
		&::after {
			content: "";
			position: absolute; inset-inline-end: 0.85em; inset-block-start: 50%;
			transform: translateY(-50%); inline-size: 1em; block-size: 1em;
			background: currentColor; pointer-events: none; border: 0;
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		}
	}
	.is-kind-search .fqbpro-native-field-icon { mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2015%2014%27%20fill%3D%27none%27%3E%3Ccircle%20cx%3D%276.77%27%20cy%3D%276.467%27%20r%3D%275.967%27%20stroke%3D%27black%27/%3E%3Cpath%20stroke%3D%27black%27%20d%3D%27m13.802%2013.5-2.813-2.813%27/%3E%3C/svg%3E") center / contain no-repeat; }
	.is-kind-sort .fqbpro-native-field-icon { mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22334%2070%2033%2040%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22m357.1%20104.9-4.4-4.4c-.6-.6-1.5-.6-2.1%200-.6.6-.6%201.5%200%202.1l7%207c.6.6%201.5.6%202.1%200l7-7c.6-.6.6-1.5%200-2.1-.6-.6-1.5-.6-2.1%200l-4.4%204.4V81.5c0-.4-.2-.8-.4-1.1-.3-.3-.7-.4-1.1-.4-.4%200-.8.2-1.1.4-.3.3-.4.7-.4%201.1v23.4zM344%2075.1l4.4%204.4c.6.6%201.5.6%202.1%200%20.6-.6.6-1.5%200-2.1l-7-7c-.6-.6-1.5-.6-2.1%200l-7%207c-.6.6-.6%201.5%200%202.1.6.6%201.5.6%202.1%200l4.4-4.4v23.4c0%20.4.2.8.4%201.1.3.3.7.4%201.1.4.4%200%20.8-.2%201.1-.4s.4-.7.4-1.1V75.1z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat; }
}

// Loading belongs to this Query's results, never its filter controls.
.wp-block-post-template[data-fqbpro-loading-effect="fade"] { opacity: 0.4; }
.wp-block-post-template[data-fqbpro-loading-effect="blur"] { opacity: 0.55; filter: blur(3px); }
.wp-block-post-template[data-fqbpro-loading-effect="skeleton"] > li {
	position: relative;
	&::after { content: ""; position: absolute; inset: 0; border-radius: 0.25rem; background: #e5e5e5; }
}

// Reserve the enhanced desktop row before modules load. A blocked script still
// leaves every choice reachable by horizontal scrolling; no-JS keeps wrapping.
@media (min-width: 601px) and (scripting: enabled) {
  .fqbpro-native-filters[data-native-overflow="more"]:not([data-native-layout="sidebar"]) .fqbpro-control-layout.is-layout-flex:not(.is-vertical):not(dialog *) {
    &:has(> .is-kind-choice[data-presentation="buttons"]) {
      flex-wrap: wrap;
      > .is-kind-choice[data-presentation="buttons"] { flex: 1 1 0; min-inline-size: min(100%, var(--fqbpro-overflow-min-width, 6rem)); }
      > .is-kind-search { flex: 0 1 14rem; min-inline-size: 8rem; }
      > .is-kind-sort { flex: 0 1 12rem; min-inline-size: 8rem; }
      > .is-kind-choice[data-presentation="buttons"]:not([data-overflow-ready]) .fqbpro-native-options { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; > .fqbpro-native-option { flex-shrink: 0; white-space: nowrap; } }
    }
  }
}

// Shared text defaults affect presentation only; stored labels/values stay intact.
.fqbpro-native-filters {
  .fqbpro-native-control {
    text-transform: var(--fqbpro-native-value-case, inherit);
    > label, > .fqbpro-native-control__label, > fieldset > legend {
      text-transform: var(--fqbpro-native-label-case, none);
    }
  }
  &[data-native-labels="hide"] .fqbpro-native-control {
    > label, > .fqbpro-native-control__label, > fieldset > legend {
      position: absolute; inline-size: 1px; block-size: 1px;
      padding: 0; margin: -1px; border: 0; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap;
    }
  }
  &[data-native-labels="show"] .fqbpro-native-control {
    > label, > .fqbpro-native-control__label, > fieldset > legend {
      position: static !important; width: auto !important; height: auto !important;
      inline-size: auto; block-size: auto; margin: 0 0 .4em;
      overflow: visible !important; clip: auto !important; clip-path: none !important;
      white-space: normal !important;
    }
  }
}

.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters {
  [data-combined-source], [data-combined-empty], .fqbpro-combined-row[hidden] { display: none !important; }
  .fqbpro-combined-row { flex: 1 1 100%; min-width: 0; }
  .fqbpro-overflow-group { font-size: .8em; font-weight: 600; padding: .75em .5em .25em; margin: 0; }
}

// Keep both bounds together under their fieldset legend, including in sidebars.
.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters .is-kind-number {
  .fqbpro-native-options {
    inline-size: 16em;
    max-inline-size: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .fqbpro-native-options > label:first-child input {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  .fqbpro-native-options > label:last-child input {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-start-width: 0;
  }
  .fqbpro-native-options > label:focus-within {
    position: relative;
    z-index: 1;
  }
}

// Compact rows pattern: shared by editor previews and the frontend, scoped to
// this authored Header so existing designs and legacy blocks keep their styles.
.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters.fqbpro-compact-filter-rows {
  .fqbpro-native-control.is-kind-choice {
    --fqbpro-row-accent: #4878b7;
    inline-size: 100%;
    font-size: inherit;
    line-height: 1.4;
    &:nth-child(even) { --fqbpro-row-accent: #c84a22; }
    fieldset { display: flow-root; }
    legend {
      float: inline-start;
      inline-size: 96px;
      margin: 0;
      padding-block: 4px;
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .fqbpro-native-options { margin-inline-start: 112px; gap: 6px; }
    .fqbpro-native-option {
      align-items: center;
      min-block-size: 2em;
      padding: 0.15em 0.8em;
      border: 1px solid #e2e5e9;
      border-radius: 3px;
      background: #fff;
      color: #515963;
      text-decoration: none;
      &:is(:has(input:checked), [aria-current="true"], [aria-pressed="true"]) {
        background: var(--fqbpro-row-accent);
        border-color: var(--fqbpro-row-accent);
        color: #fff;
        outline: none;
      }
      &:focus-within { outline: 2px solid var(--fqbpro-row-accent); outline-offset: 2px; }
      &:hover { border-color: var(--fqbpro-row-accent); }
    }
  }
  @media (max-width: 600px) {
    .fqbpro-native-control.is-kind-choice {
      legend { float: none; inline-size: auto; padding-block: 0 8px; }
      .fqbpro-native-options { margin-inline-start: 0; }
      .fqbpro-native-option { min-block-size: 44px; }
    }
  }
}

// Place labels using logical sides so the same setting follows LTR and RTL text.
.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters {
  &[data-native-label-position="top"].fqbpro-compact-filter-rows .fqbpro-native-control.is-kind-choice {
    fieldset > legend { float: none; inline-size: auto; padding: 0; margin-block-end: 0.4em; }
    .fqbpro-native-options { margin-inline-start: 0; }
  }
  &[data-native-label-position="start"], &[data-native-label-position="end"] {
    .fqbpro-native-control:not(.is-kind-apply):not(.is-kind-reset) {
      > fieldset { display: flow-root; }
      > fieldset > legend, > label, > .fqbpro-native-control__label {
        float: inline-start;
        inline-size: 96px;
        margin: 0;
        padding-block: 8px;
      }
      > fieldset > :not(legend), > :not(fieldset):not(label):not(.fqbpro-native-control__label) {
        margin-inline-start: 112px;
      }
    }
  }
  &[data-native-label-position="end"] .fqbpro-native-control:not(.is-kind-apply):not(.is-kind-reset) {
    > fieldset > legend, > label, > .fqbpro-native-control__label { float: inline-end; }
    > fieldset > :not(legend), > :not(fieldset):not(label):not(.fqbpro-native-control__label) {
      margin-inline-start: 0;
      margin-inline-end: 112px;
    }
  }
  @media (max-width: 600px) {
    &:is([data-native-label-position="start"], [data-native-label-position="end"]) .fqbpro-native-control:not(.is-kind-apply):not(.is-kind-reset) {
      > fieldset > legend, > label, > .fqbpro-native-control__label {
        float: none;
        inline-size: auto;
        padding: 0;
        margin-block-end: 0.4em;
      }
      > fieldset > :not(legend), > :not(fieldset):not(label):not(.fqbpro-native-control__label) {
        margin-inline: 0;
      }
    }
  }
}

// Avoid a second layer of theme padding inside the Query. When the Query is
// constrained, let WordPress apply its content width to the Group and Header.
.wp-block-query .fqbpro-query-layout--top,
.wp-block-query .fqbpro-query-layout--top > .fqbpro-native-filters {
  padding-inline: 0;
}
.wp-block-query:not(.is-layout-constrained) .fqbpro-query-layout--top,
.wp-block-query:not(.is-layout-constrained) .fqbpro-query-layout--top > .fqbpro-native-filters {
  max-width: none;
}

.wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters[data-native-control-size="compact"] {
  --fqbpro-control-min-height: 1.875em;
  --fqbpro-control-padding-y: 0.125em;

  .fqbpro-native-control :where(input:not([type="checkbox"]):not([type="radio"]), select, button, .fqbpro-date-trigger, [data-native-reset], .fqbpro-native-option),
  .fqbpro-overflow-toggle,
  .fqbpro-combined-row .fqbpro-native-option {
    min-block-size: var(--fqbpro-control-min-height);
    padding-block: var(--fqbpro-control-padding-y);
    line-height: 1.25;
  }
  .is-kind-apply, .is-kind-reset { min-block-size: var(--fqbpro-control-min-height); }

  @media (max-width: 782px) {
    --fqbpro-control-min-height: 44px;
    --fqbpro-control-padding-y: 0.45em;
  }
}

// Preserve touch targets and readable input text for every size and theme.
@media (max-width: 782px) {
  .wp-block-filter-query-block-pro-filter-header.fqbpro-native-filters {
    --fqbpro-control-min-height: 44px;
    --fqbpro-control-padding-y: 0.45em;
    &:not([data-native-style="unstyled"]) { font-size: max(16px, 0.9em); }
    .fqbpro-native-option { min-block-size: 44px; box-sizing: border-box; }
  }
}

// Theme paragraph rules must not enlarge an explicitly styled result excerpt.
.wp-block-query:has(.fqbpro-native-filters) .wp-block-post-excerpt[style*="font-size"] > p {
  font-size: inherit;
  line-height: inherit;
}

.fqbpro-load-more.wp-element-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2em; padding: .15em .8em; font-size: max(12px, .9em); line-height: 1.25; text-decoration: none; box-sizing: border-box; }
.fqbpro-load-more[hidden] { display: none !important; }
.fqbpro-load-more[aria-disabled="true"] { opacity: .65; cursor: wait; }
.fqbpro-load-more-error { font-size: 14px; }

@media(max-width: 782px) { .fqbpro-load-more.wp-element-button { min-height: 44px; font-size: max(16px, .9em); } }

.wp-block-filter-query-block-pro-filter-header.fqbpro-sidebar-panel {
  box-sizing: border-box;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 2%, transparent);
  .fqbpro-native-control > label, .fqbpro-native-control legend { font-size: 0.9em; font-weight: 600; margin-block-end: 0.65em; }
  .fqbpro-native-options { gap: 0.55em; }
  .fqbpro-native-option { align-items: center; line-height: 1.5; }
  .is-kind-search { max-inline-size: 100%; }
}