/**
 * PropOffice Property Search — Type 1.
 *
 * Painted entirely in design-system roles (--po-ds-*), never in literal brand
 * colours, so the form takes on the website's brand the same way every other
 * PropOffice component does. The only literals here are neutral fallbacks for a
 * site that has not run the runtime layer at all.
 *
 * Layout is a four-column bar on desktop that becomes one column on a narrow
 * screen. The location field is given the room because it is the one control a
 * person types into.
 */

.po-search {
	--po-search-radius: 8px;
	--po-search-gap: 12px;
	--po-search-control-height: 48px;

	/*
	 * The location field's two gutters and the size of the mark in the left
	 * one.
	 *
	 * Declared on the ROOT rather than on the location box, because the
	 * Elementor controls write them here too — and a declaration on an element
	 * closer to the input than the widget wrapper would outrank the editor's
	 * and quietly pin the gutter at 36px.
	 *
	 * 🚨 The gutter is ONE number read in two places: the pin's box is this
	 * wide and the input's left padding is this deep. That is what makes an
	 * overlap impossible — the text starts exactly where the icon's room ends,
	 * at every size an editor picks. Splitting them into two literals is how
	 * the placeholder ends up sitting on top of the pin.
	 */
	--po-search-pin-gutter: 36px;
	--po-search-clear-gutter: 36px;
	--po-search-pin-size: 16px;

	box-sizing: border-box;
	color: var(--po-ds-color-text, #0f172a);
	font-family: var(--po-ds-font-family, inherit);
}

.po-search *,
.po-search *::before,
.po-search *::after {
	box-sizing: inherit;
}

/* ── The search bar ──────────────────────────────────────────────────────── */

/*
 * Four controls on one row, each taking the share of it that the editor
 * configured.
 *
 * flex-wrap rather than grid, and percentage bases rather than fractions,
 * because the specification's rule is arithmetic: "if total configured widths
 * exceed 100%, the last item(s) wrap to the next line". A grid cannot do that —
 * its columns are fixed by the template — while flex-wrap does it by itself,
 * with no JavaScript and no breakpoint gymnastics.
 *
 * 🚨 There is deliberately NO column gap. 20+30+30+20 measures exactly 100%, and
 * a column gap would make it 100% plus three gaps and wrap the Search button
 * onto its own line at every width. Spacing between controls is each control's
 * own horizontal padding; `row-gap` still applies, because that only separates
 * rows that have already wrapped.
 */
.po-search__form {
	align-items: flex-end;
	background: var(--po-ds-color-surface, #ffffff);
	border: 1px solid var(--po-ds-color-border, #e2e8f0);
	border-radius: var(--po-search-radius);
	display: flex;
	flex-wrap: wrap;
	padding: 16px;
	row-gap: var(--po-search-gap);
}

/*
 * A field is now a single control and nothing else. The reference design has no
 * text above these — Status says what it is through its selected value, Property
 * Type through its placeholder, and Location through the words already inside
 * it. The accessible name moved to `aria-label`, which occupies no space.
 *
 * 🚨 The `gap` is gone and the column is NOT. A gap on a one-child column still
 * reserves nothing, but it reserved 6px the moment anything else appeared, and
 * removing the caption without removing its gap is how a form keeps the empty
 * band it was supposed to lose.
 *
 * The column direction stays because the location field wraps its input in a
 * positioned box for the pin and the suggestions list. In a column that box
 * stretches to the field's full width; switched to a row it would shrink to its
 * content and take the input with it.
 */
.po-search__field {
	display: flex;
	flex-direction: column;
	/* Neither grow nor shrink: the percentage the editor set is the width the
	   control gets. Shrinking would be the more forgiving choice and is
	   deliberately not taken — the specification's rule for a row that does not
	   fit is that the last controls WRAP, and an item allowed to shrink would
	   quietly render narrower than its configured percentage instead. */
	flex-grow: 0;
	flex-shrink: 0;
	min-width: 0;
	/* Horizontal padding is what separates one control from the next, since the
	   row can carry no column gap (see above). box-sizing keeps it inside the
	   percentage. */
	padding-right: var(--po-search-gap);
}

.po-search__field:last-child {
	padding-right: 0;
}

/*
 * The two vertical dividers, and only two: Status│Type and Type│Location.
 *
 * There is deliberately NO divider before Status, none between Location and
 * Search, and none after Search. The Search button is a button — a rule beside
 * it would read as a fifth column boundary rather than as the end of the fields.
 *
 * Drawn as a pseudo-element rather than a `border-left`, because a border would
 * be one pixel of the field's own percentage. It is absolutely positioned, so it
 * occupies no layout width at all and 20+30+30+20 stays exactly 100%.
 */
.po-search__field--type,
.po-search__field--location {
	/* Room between the rule and the control it precedes. Inside the percentage,
	   because box-sizing is border-box — so the dividers cost no width. */
	padding-left: var(--po-search-gap);
	position: relative;
}

.po-search__field--type::before,
.po-search__field--location::before {
	background: var(--po-ds-color-border, #e2e8f0);
	bottom: 6px;
	content: "";
	left: 0;
	position: absolute;
	top: 6px;
	width: 1px;
}

@media (max-width: 767px) {
	/*
	 * Stacked, the Location field starts a row of its own, and a rule down its
	 * left edge would be a divider between a control and the page rather than
	 * between two controls. Status│Type still sit side by side, so that one
	 * stays.
	 */
	.po-search__field--location::before {
		content: none;
	}
}

/*
 * The four widths. Declared here as the component's own defaults so the
 * shortcode lays out identically to the widget; the Elementor controls write the
 * same custom properties, and a test asserts the two sets agree.
 *
 * 🚨 Every breakpoint reads the SAME property name, and that is the whole point.
 * Elementor compiles a responsive control into its own `@media` blocks and
 * writes ONE unsuffixed property inside each — so a rule here that appended a
 * per-breakpoint suffix would be reading a name Elementor never writes, would
 * silently ignore the widget's tablet and mobile widths, and would fall back to
 * the literal below. It did exactly that until a real Elementor page was
 * measured: the properties said 50% and the fields rendered 25%.
 *
 * The literal in each `var()` is the SHORTCODE's default for that breakpoint —
 * the only consumer with no media-query mechanism of its own.
 */
.po-search__field--status {
	flex-basis: var(--po-search-w-status, 20%);
}

.po-search__field--type {
	flex-basis: var(--po-search-w-type, 30%);
}

.po-search__field--location {
	flex-basis: var(--po-search-w-location, 30%);
}

.po-search__field--action {
	flex-basis: var(--po-search-w-action, 20%);
}

@media (max-width: 1024px) {
	.po-search__field--status {
		flex-basis: var(--po-search-w-status, 25%);
	}

	.po-search__field--type {
		flex-basis: var(--po-search-w-type, 25%);
	}

	.po-search__field--location {
		flex-basis: var(--po-search-w-location, 25%);
	}

	.po-search__field--action {
		flex-basis: var(--po-search-w-action, 25%);
	}
}

@media (max-width: 767px) {
	.po-search__field--status {
		flex-basis: var(--po-search-w-status, 50%);
	}

	.po-search__field--type {
		flex-basis: var(--po-search-w-type, 50%);
	}

	.po-search__field--location {
		flex-basis: var(--po-search-w-location, 100%);
	}

	.po-search__field--action {
		flex-basis: var(--po-search-w-action, 100%);
	}

	/* Stacked controls need no right padding — the row gap already separates
	   them, and padding would leave every field short of the edge. */
	.po-search__field {
		padding-right: 0;
	}

	/* Location starts its own row, so it starts at the left edge. */
	.po-search__field--location {
		padding-left: 0;
	}
}

.po-search__control {
	background: var(--po-ds-color-surface, #ffffff);
	border: 1px solid var(--po-ds-color-border, #e2e8f0);
	border-radius: 6px;
	color: inherit;
	font: inherit;
	/* A MINIMUM, not a fixed height. The two render identically for the design
	   as drawn — the content is shorter than 48px either way — but a fixed
	   height swallows vertical padding whole, which would make the Elementor
	   padding controls look broken on exactly the axis an editor reaches for
	   first. */
	min-height: var(--po-search-control-height);
	max-width: 100%;
	padding: 0 12px;
	width: 100%;
}

.po-search__control:focus-visible {
	border-color: var(--po-ds-color-primary, #13245a);
	outline: 2px solid var(--po-ds-color-primary, #13245a);
	outline-offset: 1px;
}

.po-search__control[disabled] {
	color: var(--po-ds-color-muted, #64748b);
	cursor: not-allowed;
}

/* ── The location field ──────────────────────────────────────────────────── */

.po-search__location {
	position: relative;
}

/*
 * Room for the pin on one side and the clear button on the other. Declared as
 * padding rather than by shrinking the input, so the text a visitor types never
 * slides under either control — and as the SAME custom property the pin's box
 * reads, so the two can never disagree.
 *
 * 🚨 Scoped to the component ROOT, and that second class is load-bearing rather
 * than decorative. On its own, `.po-search__control--location` is (0,1,0) — and
 * an ordinary `input[type="text"] { padding: 0 12px }` in a theme or in
 * Elementor's own CSS is (0,1,1), which BEATS it. That is not hypothetical: it
 * collapsed the left padding from 36px to 12px on a real site, and because the
 * pin box stayed 36px the placeholder rendered on top of the icon — the "S" of
 * "Search" sitting under the mark.
 *
 * The root scope makes this (0,2,0), which clears every element- and
 * attribute-level rule a theme can reasonably write. It stays BELOW Elementor,
 * whose Location padding target is
 * `{{WRAPPER}} .po-search__field--location .po-search__control` — two classes
 * plus a `{{WRAPPER}}` that is itself at least two — so an editor's own padding
 * still wins, which is the whole architecture here. No `!important`, on either
 * side of that line.
 */
.po-search .po-search__control--location {
	padding-left: var(--po-search-pin-gutter);
	padding-right: var(--po-search-clear-gutter);
}

.po-search__pin,
.po-search__clear {
	align-items: center;
	color: var(--po-ds-color-muted, #64748b);
	display: flex;
	justify-content: center;
	position: absolute;
	/* Pinned to both edges rather than given a height, so the mark stays
	   centred on the field's text however tall an editor's padding makes the
	   input. */
	bottom: 0;
	top: 0;
}

.po-search__pin {
	left: 0;
	/* The whole width of the field belongs to the input underneath: a click on
	   the mark puts the caret in the field, and the live search never sees a
	   pointer event that was meant for it. */
	pointer-events: none;
	width: var(--po-search-pin-gutter);
}

/*
 * The supplied location artwork.
 *
 * Square, because the drawing is square: one number for both dimensions is what
 * stops a size control from stretching artwork PropOffice was given rather than
 * drew. Nothing here repaints it — the delivered stroke is the default, and
 * recolouring is the Elementor control's business.
 */
.po-search__pin-icon {
	display: block;
	height: var(--po-search-pin-size);
	width: var(--po-search-pin-size);
}

.po-search__clear {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 0;
	right: 0;
	width: var(--po-search-clear-gutter);
}

.po-search__clear[hidden] {
	display: none;
}

/* ── Suggestions ─────────────────────────────────────────────────────────── */

.po-search__suggestions {
	background: var(--po-ds-color-surface, #ffffff);
	border: 1px solid var(--po-ds-color-border, #e2e8f0);
	border-radius: 6px;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
	left: 0;
	list-style: none;
	margin: 4px 0 0;
	max-height: 320px;
	overflow-y: auto;
	padding: 4px;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 30;
}

.po-search__suggestions[hidden] {
	display: none;
}

.po-search__suggestion {
	align-items: center;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 8px 10px;
}

.po-search__suggestion:hover,
.po-search__suggestion[aria-selected="true"] {
	background: var(--po-ds-color-background, #eef1f6);
}

.po-search__suggestion-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.po-search__suggestion-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.po-search__suggestion-type {
	color: var(--po-ds-color-muted, #64748b);
	font-size: 12px;
}

.po-search__suggestion-count {
	color: var(--po-ds-color-muted, #64748b);
	font-size: 12px;
	margin-left: auto;
}

.po-search__suggestion-empty {
	color: var(--po-ds-color-muted, #64748b);
	cursor: default;
	padding: 10px;
}

/* ── The button ──────────────────────────────────────────────────────────── */

.po-search__submit {
	align-items: center;
	background: var(--po-ds-color-accent, #c8102e);
	border: 0;
	border-radius: 6px;
	color: var(--po-ds-color-on-primary, #ffffff);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: var(--po-ds-font-button, 600);
	gap: 8px;
	/* A minimum, for the reason the controls' is: vertical padding has to be
	   able to make the button taller instead of being absorbed by a fixed
	   height. */
	min-height: var(--po-search-control-height);
	justify-content: center;
	letter-spacing: 0.04em;
	padding: 0 24px;
	text-transform: uppercase;
	white-space: nowrap;
	width: 100%;
}

.po-search__submit:focus-visible {
	outline: 2px solid var(--po-ds-color-primary, #13245a);
	outline-offset: 2px;
}

.po-search__submit-icon {
	display: inline-flex;
}

/* ── Results ─────────────────────────────────────────────────────────────── */

.po-search__results {
	margin-top: 24px;
}

.po-search__summary {
	color: var(--po-ds-color-text, #0f172a);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
	margin: 0 0 20px;
}

/*
 * The number carries the weight, the words stay quiet — the reference's
 * "14144 Properties and Homes". Emphasised in the brand's own accent rather
 * than in a literal, so it belongs to whatever site it is placed on.
 */
.po-search__count {
	color: var(--po-ds-color-primary, #0f172a);
	font-weight: 700;
}

.po-search__empty {
	background: var(--po-ds-color-background, #eef1f6);
	border-radius: var(--po-search-radius);
	margin: 0;
	padding: 32px 16px;
	text-align: center;
}

.po-search__pages {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 24px;
}

.po-search__page {
	border: 1px solid var(--po-ds-color-border, #e2e8f0);
	border-radius: 6px;
	color: inherit;
	padding: 8px 16px;
	text-decoration: none;
}

.po-search__page:hover,
.po-search__page:focus-visible {
	border-color: var(--po-ds-color-primary, #13245a);
}

/* ── The `inline` skin ───────────────────────────────────────────────────────
 *
 * The bar that sits INSIDE a hero band: one white row over a photograph, its
 * chosen values set in the brand colour, hairlines between the fields.
 *
 * 🚨 IT IS A SKIN AND IT CHANGES NO MARKUP. Every rule below is scoped under
 * `.po-search--inline`, every selector names an element the ordinary form
 * already emits, and the fields are the same fields in the same order wired to
 * the same Search Engine. A stylesheet cannot reorder a control, cannot drop
 * one and cannot add one — which is exactly why the skin is a stylesheet and
 * not a design (see `PropertySearchPresentation::skinFrom()`).
 *
 * Measured from the reference at 1440px: bar 88px, fields 150 / 306 / 458 of a
 * 1088 column, button 124 × 56, hairlines 1 × 32. The widths are expressed as
 * percentages of that column so the bar keeps its proportions at every width
 * the band gives it.
 */

.po-search--inline {
	--po-search-inline-rule: var(--po-ds-color-border, #e2e8f0);
	--po-search-inline-value: var(--po-ds-color-primary, #13245a);
	--po-search-inline-muted: var(--po-ds-color-muted, #64748b);
}

.po-search--inline .po-search__form {
	align-items: center;
	border: 0;
	border-radius: 0;
	flex-wrap: nowrap;
	min-height: 88px;
	padding: 0 16px 0 32px;
}

.po-search--inline .po-search__field {
	justify-content: center;
	padding-right: 0;
	min-height: 88px;
}

.po-search--inline .po-search__field--status { flex: 0 0 14%; }
.po-search--inline .po-search__field--type { flex: 0 0 28%; padding-left: 32px; }
.po-search--inline .po-search__field--location { flex: 1 1 auto; padding-left: 32px; }

/*
 * 🚨 The button does not stretch and does not shrink. It is 124 × 56 on the
 * reference, and a Search button that grew with the bar would stop reading as
 * the end of the row and start reading as a fourth field.
 */
.po-search--inline .po-search__field--action {
	flex: 0 0 auto;
	margin-left: 24px;
	min-height: 0;
}

/* The hairlines: 32px tall and centred, rather than the full-height rules the
   ordinary form draws between its stacked controls. */
.po-search--inline .po-search__field--type::before,
.po-search--inline .po-search__field--location::before {
	background: var(--po-search-inline-rule);
	bottom: auto;
	height: 32px;
	top: 50%;
	transform: translateY(-50%);
}

/*
 * 🚨 THE VALUE IS THE BRAND COLOUR AND THE PROMPT IS GREY, which is the
 * inversion the whole control is built around: on this bar a visitor reads what
 * they have CHOSEN, not what they were asked.
 */
.po-search--inline .po-search__control {
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--po-search-inline-value);
	font-size: 1rem;
	font-weight: 600;
	min-height: 0;
	padding: 0;
}

.po-search--inline select.po-search__control {
	padding-right: 24px;
}

.po-search--inline .po-search__control--location {
	/* 🚨 The pin's gutter has to be kept. The skin sets every control's padding
	   to zero, and the location field's mark is absolutely positioned in a
	   gutter the input is expected to leave for it — take the padding away and
	   the placeholder runs straight under the pin. */
	padding-left: var(--po-search-pin-gutter);
	color: var(--po-ds-color-text, #0f172a);
	font-weight: 300;
}

.po-search--inline .po-search__control--location::placeholder {
	color: var(--po-search-inline-muted);
	font-weight: 300;
	opacity: 1;
}

.po-search--inline .po-search__control:focus-visible {
	outline: 2px solid var(--po-search-inline-value);
	outline-offset: 4px;
}

.po-search--inline .po-search__pin {
	color: var(--po-search-inline-value);
}

.po-search--inline .po-search__submit {
	border-radius: 0;
	font-weight: 600;
	letter-spacing: 0.02em;
	min-height: 56px;
	/* 124 × 56 on the reference. A minimum rather than a width, so a longer
	   translation grows the button instead of being clipped by it. */
	min-width: 124px;
	padding: 0 16px;
}

/*
 * Narrow screens: the bar becomes a stack, and the hairlines become the rules
 * BETWEEN the stacked rows rather than between columns — a vertical hairline in
 * a one-column layout points at nothing.
 */
@media (max-width: 1024px) {
	.po-search--inline .po-search__form {
		flex-wrap: wrap;
		min-height: 0;
		padding: 16px;
		row-gap: 0;
	}

	.po-search--inline .po-search__field,
	.po-search--inline .po-search__field--status,
	.po-search--inline .po-search__field--type,
	.po-search--inline .po-search__field--location {
		flex: 1 1 100%;
		min-height: 56px;
		padding-left: 0;
	}

	.po-search--inline .po-search__field--type::before,
	.po-search--inline .po-search__field--location::before {
		bottom: auto;
		height: 1px;
		left: 0;
		right: 0;
		top: 0;
		transform: none;
		width: auto;
	}

	.po-search--inline .po-search__field--action {
		flex: 1 1 100%;
		margin-left: 0;
		margin-top: 12px;
	}

	.po-search--inline .po-search__submit {
		width: 100%;
	}
}

/* ── Reference only ─────────────────────────────────────────────────────────
 *
 * The `reference_only` field set (the Hero Slider's "Reference only" mode): one
 * reference box, the Search button, and the line that says why a reference
 * opened nothing. The box takes the room the three fields would have, and the
 * button keeps its own width, on both the ordinary bar and the inline skin.
 *
 * The message line is empty — and so not drawn — until the script writes into
 * it. It stays in the markup, because it is the live region the box is
 * described by.
 */
.po-search__form[data-po-search-direct] {
	flex-wrap: wrap;
}

.po-search__field--reference {
	flex: 1 1 0;
	min-width: 0;
}

.po-search__message {
	color: var(--po-ds-color-text, #0f172a);
	flex: 1 1 100%;
	font-size: 0.875rem;
	font-weight: 600;
	margin: 8px 0 0;
}

.po-search__message:empty {
	display: none;
}

.po-search--inline .po-search__control--reference {
	color: var(--po-ds-color-text, #0f172a);
	font-weight: 300;
}

.po-search--inline .po-search__control--reference::placeholder {
	color: var(--po-search-inline-muted);
	font-weight: 300;
	opacity: 1;
}

.po-search--inline .po-search__message {
	margin: 0 0 12px;
}

@media (max-width: 767px) {
	.po-search__field--reference {
		flex-basis: 100%;
	}
}

/* ── The advanced bar ────────────────────────────────────────────────────────
 *
 * Drawn only under `.po-search--advanced`, which the renderer adds when a
 * placement switches "More Search Options" on. Every rule below is scoped to it,
 * so the four-field bar above is not touched by a single declaration here.
 *
 * ## The row arithmetic, with a real column gap
 *
 * The four-field bar has no column gap because its widths total exactly 100%
 * and a gap would push the last field onto the next line. This bar HAS a gap, so
 * each field gives up its share of it:
 *
 *     width = W% - gap x (1 - W / 100)
 *
 * which makes a row of widths totalling 100%, plus the gaps between them,
 * measure exactly 100%. `calc()` cannot turn `35%` back into `35`, so the
 * Elementor control writes both: `--po-search-aw-*` with its unit and
 * `--po-search-awn-*` as a bare number.
 *
 * No negative margins, and no width on the form or the root: the bar still takes
 * the width its parent gives it.
 *
 * A row is not an element. Every field is one flex item and a "row" is what the
 * widths add up to, so a field that cannot fit wraps by arithmetic and the order
 * the editor configured is the order that wraps.
 *
 * ## Two modes, one form
 *
 * `data-po-search-mode` on the form says whether the ordinary search or Web
 * Reference Number Search is showing. Both modes' controls are in the markup and
 * this stylesheet shows the ones that belong, so switching is an attribute — and
 * it works from the server-rendered state with no script. Reference mode draws the
 * reference input, the Search button and the refresh-icon return control, and
 * NOTHING else: not the primary controls, the count, the More Search Options
 * toggle or its panel.
 */

.po-search--advanced {
	--po-search-col-gap: 12px;
	/* Off. A configured percentage is exact; a floor is the editor's explicit
	   choice (Minimum Field Width), never a default that quietly redraws a width
	   they set. */
	--po-search-min-field: 0px;
	--po-search-submit-icon-size: 16px;
	--po-search-more-icon-size: 16px;
	--po-search-form-ink: #ffffff;
	--po-search-form-rule: rgba(255, 255, 255, 0.35);
}

.po-search--advanced .po-search__form {
	align-items: center;
	background: var(--po-search-form-bg, rgba(17, 24, 39, 0.88));
	border-color: transparent;
	column-gap: var(--po-search-col-gap);
	color: var(--po-search-form-ink);
	row-gap: var(--po-search-gap);
}

.po-search--advanced .po-search__field {
	flex: 0 0 calc(var(--po-search-aw, 100%) - var(--po-search-col-gap) * (100 - var(--po-search-awn, 100)) / 100);
	/* The explicit floor, 0 unless the editor sets one. A flex-wrap line break is
	   decided from the size a field would take AFTER its minimum is applied, so
	   with a floor set a field that cannot be this wide wraps instead of being
	   squeezed. */
	min-width: min(100%, var(--po-search-min-field));
	padding: 0;
}

/* The four-field bar's rules between columns have no place here: this bar's
   fields wrap, so a rule on the left of a field would land at the start of a
   line. `display`, not `content`, so the classic mobile suppression stays the
   only rule that decides what those pseudo-elements say. */
.po-search--advanced .po-search__field--type::before,
.po-search--advanced .po-search__field--location::before {
	display: none;
}

/* The form's own ink is light, for the count and the toggle that sit directly
   on its background. The controls are light fields of their own, so they take
   the page's text colour back rather than inheriting white on white. */
.po-search--advanced .po-search__control {
	border-color: var(--po-search-control-border, transparent);
	color: var(--po-ds-color-text, #0f172a);
}

/* ── Rows ────────────────────────────────────────────────────────────────── *
 *
 * Each row is a full-width wrapping container, so a field can only ever wrap
 * inside its own row. The widths are percentages of the row, which is the form's
 * content width, so the arithmetic above is unchanged.
 */

.po-search--advanced .po-search__row {
	align-items: center;
	column-gap: var(--po-search-col-gap);
	display: flex;
	flex: 0 0 100%;
	flex-wrap: wrap;
	row-gap: var(--po-search-gap);
}

/* ── Which mode shows what ───────────────────────────────────────────────── */

.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--status,
.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--type,
.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--location,
.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--refswitch,
.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--count,
.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--more,
.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__advanced {
	display: none;
}

.po-search--advanced .po-search__form:not([data-po-search-mode="reference"]) .po-search__field--refinput,
.po-search--advanced .po-search__form:not([data-po-search-mode="reference"]) .po-search__field--refback {
	display: none;
}

/* Reference mode draws no primary row, and the actions row dissolves so the
   Search button (the SAME element) sits beside the reference input as an item
   of the form. */
.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__row--primary {
	display: none;
}

.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__row--actions {
	display: contents;
}

/* Reference mode, in reading order: the input with Search to its right, then the
   way back beneath them. The Search button is the SAME element as in the
   ordinary search, so its place is `order`. */
.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--refinput { order: 1; }
.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--action { order: 2; }
.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--refback { order: 3; }

/* Widths, desktop. The literal in each var() is the shortcode's own default —
   the only consumer with no media query of its own. */
.po-search--advanced .po-search__field--status {
	--po-search-aw: var(--po-search-aw-status, 22%);
	--po-search-awn: var(--po-search-awn-status, 22);
}

.po-search--advanced .po-search__field--type {
	--po-search-aw: var(--po-search-aw-type, 28%);
	--po-search-awn: var(--po-search-awn-type, 28);
}

.po-search--advanced .po-search__field--location {
	--po-search-aw: var(--po-search-aw-location, 50%);
	--po-search-awn: var(--po-search-awn-location, 50);
}

.po-search--advanced .po-search__field--refswitch {
	--po-search-aw: var(--po-search-aw-refswitch, 35%);
	--po-search-awn: var(--po-search-awn-refswitch, 35);
}

.po-search--advanced .po-search__field--count {
	--po-search-aw: var(--po-search-aw-count, 25%);
	--po-search-awn: var(--po-search-awn-count, 25);
}

.po-search--advanced .po-search__field--more {
	--po-search-aw: var(--po-search-aw-more, 20%);
	--po-search-awn: var(--po-search-awn-more, 20);
}

.po-search--advanced .po-search__field--action {
	--po-search-aw: var(--po-search-aw-action, 20%);
	--po-search-awn: var(--po-search-awn-action, 20);
}

.po-search--advanced .po-search__field--price-min {
	--po-search-aw: var(--po-search-aw-price-min, 25%);
	--po-search-awn: var(--po-search-awn-price-min, 25);
}

.po-search--advanced .po-search__field--price-max {
	--po-search-aw: var(--po-search-aw-price-max, 25%);
	--po-search-awn: var(--po-search-awn-price-max, 25);
}

.po-search--advanced .po-search__field--bedrooms {
	--po-search-aw: var(--po-search-aw-bedrooms, 25%);
	--po-search-awn: var(--po-search-awn-bedrooms, 25);
}

.po-search--advanced .po-search__field--bathrooms {
	--po-search-aw: var(--po-search-aw-bathrooms, 25%);
	--po-search-awn: var(--po-search-awn-bathrooms, 25);
}

.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--refinput {
	--po-search-aw: var(--po-search-aw-refinput, 80%);
	--po-search-awn: var(--po-search-awn-refinput, 80);
}

.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--action {
	--po-search-aw: var(--po-search-aw-refaction, 20%);
	--po-search-awn: var(--po-search-awn-refaction, 20);
}

.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--refback {
	--po-search-aw: var(--po-search-aw-refback, 100%);
	--po-search-awn: var(--po-search-awn-refback, 100);
}

@media (max-width: 1024px) {
	.po-search--advanced .po-search__field--status {
		--po-search-aw: var(--po-search-aw-status, 33%);
		--po-search-awn: var(--po-search-awn-status, 33);
	}

	.po-search--advanced .po-search__field--type {
		--po-search-aw: var(--po-search-aw-type, 33%);
		--po-search-awn: var(--po-search-awn-type, 33);
	}

	.po-search--advanced .po-search__field--location {
		--po-search-aw: var(--po-search-aw-location, 34%);
		--po-search-awn: var(--po-search-awn-location, 34);
	}

	.po-search--advanced .po-search__field--refswitch {
		--po-search-aw: var(--po-search-aw-refswitch, 30%);
		--po-search-awn: var(--po-search-awn-refswitch, 30);
	}

	.po-search--advanced .po-search__field--count {
		--po-search-aw: var(--po-search-aw-count, 25%);
		--po-search-awn: var(--po-search-awn-count, 25);
	}

	.po-search--advanced .po-search__field--more {
		--po-search-aw: var(--po-search-aw-more, 25%);
		--po-search-awn: var(--po-search-awn-more, 25);
	}

	.po-search--advanced .po-search__field--action {
		--po-search-aw: var(--po-search-aw-action, 20%);
		--po-search-awn: var(--po-search-awn-action, 20);
	}

	.po-search--advanced .po-search__field--price-min {
		--po-search-aw: var(--po-search-aw-price-min, 50%);
		--po-search-awn: var(--po-search-awn-price-min, 50);
	}

	.po-search--advanced .po-search__field--price-max {
		--po-search-aw: var(--po-search-aw-price-max, 50%);
		--po-search-awn: var(--po-search-awn-price-max, 50);
	}

	.po-search--advanced .po-search__field--bedrooms {
		--po-search-aw: var(--po-search-aw-bedrooms, 50%);
		--po-search-awn: var(--po-search-awn-bedrooms, 50);
	}

	.po-search--advanced .po-search__field--bathrooms {
		--po-search-aw: var(--po-search-aw-bathrooms, 50%);
		--po-search-awn: var(--po-search-awn-bathrooms, 50);
	}

	.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--refinput {
		--po-search-aw: var(--po-search-aw-refinput, 75%);
		--po-search-awn: var(--po-search-awn-refinput, 75);
	}

	.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--action {
		--po-search-aw: var(--po-search-aw-refaction, 25%);
		--po-search-awn: var(--po-search-awn-refaction, 25);
	}

	.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--refback {
		--po-search-aw: var(--po-search-aw-refback, 100%);
		--po-search-awn: var(--po-search-awn-refback, 100);
	}
}

@media (max-width: 767px) {
	.po-search--advanced .po-search__field--status {
		--po-search-aw: var(--po-search-aw-status, 50%);
		--po-search-awn: var(--po-search-awn-status, 50);
	}

	.po-search--advanced .po-search__field--type {
		--po-search-aw: var(--po-search-aw-type, 50%);
		--po-search-awn: var(--po-search-awn-type, 50);
	}

	.po-search--advanced .po-search__field--location {
		--po-search-aw: var(--po-search-aw-location, 100%);
		--po-search-awn: var(--po-search-awn-location, 100);
	}

	.po-search--advanced .po-search__field--refswitch {
		--po-search-aw: var(--po-search-aw-refswitch, 100%);
		--po-search-awn: var(--po-search-awn-refswitch, 100);
	}

	.po-search--advanced .po-search__field--count {
		--po-search-aw: var(--po-search-aw-count, 100%);
		--po-search-awn: var(--po-search-awn-count, 100);
	}

	.po-search--advanced .po-search__field--more {
		--po-search-aw: var(--po-search-aw-more, 100%);
		--po-search-awn: var(--po-search-awn-more, 100);
	}

	.po-search--advanced .po-search__field--action {
		--po-search-aw: var(--po-search-aw-action, 100%);
		--po-search-awn: var(--po-search-awn-action, 100);
	}

	.po-search--advanced .po-search__field--price-min {
		--po-search-aw: var(--po-search-aw-price-min, 50%);
		--po-search-awn: var(--po-search-awn-price-min, 50);
	}

	.po-search--advanced .po-search__field--price-max {
		--po-search-aw: var(--po-search-aw-price-max, 50%);
		--po-search-awn: var(--po-search-awn-price-max, 50);
	}

	.po-search--advanced .po-search__field--bedrooms {
		--po-search-aw: var(--po-search-aw-bedrooms, 50%);
		--po-search-awn: var(--po-search-awn-bedrooms, 50);
	}

	.po-search--advanced .po-search__field--bathrooms {
		--po-search-aw: var(--po-search-aw-bathrooms, 50%);
		--po-search-awn: var(--po-search-awn-bathrooms, 50);
	}

	.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--refinput {
		--po-search-aw: var(--po-search-aw-refinput, 100%);
		--po-search-awn: var(--po-search-awn-refinput, 100);
	}

	.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--action {
		--po-search-aw: var(--po-search-aw-refaction, 100%);
		--po-search-awn: var(--po-search-awn-refaction, 100);
	}

	.po-search--advanced .po-search__form[data-po-search-mode="reference"] .po-search__field--refback {
		--po-search-aw: var(--po-search-aw-refback, 100%);
		--po-search-awn: var(--po-search-awn-refback, 100);
	}
}

/* ── The count ───────────────────────────────────────────────────────────── */

.po-search--advanced .po-search__field--count {
	align-items: center;
	flex-direction: row;
	min-height: var(--po-search-control-height);
}

.po-search__match-count {
	color: inherit;
	font-size: 0.9rem;
	line-height: 1.3;
	margin: 0;
}

.po-search__match-number {
	font-weight: 700;
}

/* ── The toggle and the mode switch ──────────────────────────────────────── */

.po-search--advanced .po-search__field--more,
.po-search--advanced .po-search__field--action,
.po-search--advanced .po-search__field--refswitch,
.po-search--advanced .po-search__field--refback {
	align-items: center;
	flex-direction: row;
	justify-content: flex-start;
}

.po-search__more,
.po-search__mode {
	align-items: center;
	background: transparent;
	border: 1px solid var(--po-search-form-rule);
	border-radius: 6px;
	color: var(--po-search-form-ink);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 8px;
	justify-content: center;
	max-width: 100%;
	min-height: var(--po-search-control-height);
	padding: 0 16px;
	text-align: center;
}

.po-search__more:hover,
.po-search__mode:hover {
	border-color: currentColor;
}

.po-search__more:focus-visible,
.po-search__mode:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.po-search__mode-icon {
	display: inline-flex;
	flex: none;
}

.po-search__mode .po-search__icon {
	display: block;
	height: var(--po-search-more-icon-size);
	width: var(--po-search-more-icon-size);
}

.po-search__more-icon {
	display: inline-flex;
	/* The mark keeps its size when the words beside it wrap. */
	flex: none;
}

.po-search__more-label {
	text-align: center;
}

.po-search__more .po-search__icon {
	display: block;
	height: var(--po-search-more-icon-size);
	transition: transform 0.15s ease;
	width: var(--po-search-more-icon-size);
}

/* The state is drawn from `aria-expanded`, the attribute assistive technology
   reads, so the picture cannot disagree with what is announced. */
.po-search__more[aria-expanded="true"] .po-search__more-glyph--chevron {
	transform: rotate(180deg);
}

.po-search__more[aria-expanded="true"] .po-search__more-upright {
	display: none;
}

.po-search__more--icon {
	padding: 0 12px;
}

.po-search__submit .po-search__icon {
	display: block;
	height: var(--po-search-submit-icon-size);
	width: var(--po-search-submit-icon-size);
}

/* The advanced bar's button fills its own cell by default; "Automatic" in the
   panel hands the width back to its content. */
.po-search--advanced .po-search__submit {
	max-width: 100%;
	width: 100%;
}

/* ── The panel ───────────────────────────────────────────────────────────── */

.po-search--advanced .po-search__advanced {
	column-gap: var(--po-search-col-gap);
	display: flex;
	flex: 0 0 100%;
	flex-wrap: wrap;
	row-gap: var(--po-search-gap);
}

.po-search--advanced .po-search__advanced[hidden] {
	display: none;
}