/*
 * `position: relative` on both the form and the field row.
 *
 * The row is what the dropdown is positioned against — it is the element the
 * merchant's width lands on, so anchoring to it is what keeps a half-width box
 * from opening a full-width panel. The form keeps the rule for the older markup
 * a theme may still be overriding this template with, where the dropdown was a
 * sibling of the row rather than inside it.
 */
.maswcas-search {
	position: relative;
}

.maswcas-search__label {
	display: block;
	margin-bottom: 4px;
}

/*
 * No `gap`. The box wears core's class names, so core's stylesheet spaces the
 * button with `.wp-block-search__button { margin-left: 10px }` — and a theme
 * routinely replaces that value (Twenty Twenty-Five uses 1.125rem). A gap here
 * would be *added* to whichever of those applied, so the box would sit a little
 * wider apart than the theme's own search box on the same page, for no reason a
 * reader of either stylesheet could see. Margins are the mechanism; the rules
 * below only supply one where core has nothing to say.
 */
.maswcas-search__field {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	max-width: 100%;
}

/*
 * Form controls do NOT inherit type. Left alone, a browser renders an <input> in
 * its own 13px Arial with a 2px inset border no matter what the theme says, so a
 * search box sitting in a themed page looks like something pasted in from
 * another site — which is exactly what "not styled per the theme" is.
 *
 * WordPress's own Search block carries the same declarations
 * (`:where(.wp-block-search__input)` in the wp-block-search stylesheet); a block
 * with its own class names has to supply its own copy, because those selectors
 * name core's block.
 *
 * `:where()` on purpose: zero specificity, so this is a floor a theme (or the
 * merchant's own border/typography controls) overrides without a fight, rather
 * than an opinion they have to out-specify.
 */
:where( .maswcas-search__input, .maswcas-search__category, .maswcas-search__submit ) {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

:where( .maswcas-search__input, .maswcas-search__category ) {
	padding: 8px;
	color: inherit;
	/*
	 * The UA's own `2px inset` is the tell that a field was never styled. Same
	 * value core uses, and `appearance: initial` is what stops Safari drawing its
	 * rounded search-field chrome over the top of it.
	 */
	border: 1px solid #949494;
	appearance: initial;
	min-width: 3rem;
}

/*
 * Only reached on a theme with no button styling of its own. A block theme's
 * buttons arrive through `wp-element-button`, which Frontend\BlockStyles puts on
 * this button precisely so the theme can dress it.
 *
 * `margin-left` is here for the same reason at core's own value: it is the
 * input/button gap, and core's stylesheet or the theme normally sets it. All of
 * it in `:where()` so both of those win outright instead of tying.
 */
:where( .maswcas-search__submit ) {
	margin-left: 10px;
	padding: 6px 10px;
	border: 1px solid #ccc;
}

.maswcas-search__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

/*
 * The category select never grows — the input is the field a shopper types in —
 * but it does not get crushed either. The input's `width: 100%` claims the whole
 * row, so without a min-width floor flexbox shrinks the select to a stub too
 * narrow to read its own selected option. max-width is the other half: a store
 * with long category names must not squeeze the input instead.
 */
.maswcas-search__category {
	flex: 0 1 auto;
	min-width: 8em;
	max-width: 40%;
	box-sizing: border-box;
	text-overflow: ellipsis;
	/*
	 * The select is ours alone — core's search box has no category dropdown — so
	 * it is the one control in the row whose spacing nothing upstream provides.
	 * Core's value, so the two gaps in the row match.
	 */
	margin-right: 10px;
}

.maswcas-search__submit {
	flex: 0 0 auto;
	cursor: pointer;
}

/*
 * The four arrangements, matching the ones WordPress's own Search block (and so
 * WooCommerce's Product Search) offers. The markup is identical for all four —
 * only the styling differs, which is why the arrangement has to travel as a
 * class on the form rather than being inferred from the DOM.
 *
 * The border the merchant picks is applied per element by Frontend\BlockStyles:
 * on the row when the button is inside it, on the input and the button when it
 * is not. Anything set there is an inline style and wins over these rules, which
 * only supply the arrangement's baseline.
 */

/*
 * Button inside: the row is the control, so it carries the frame and the two
 * elements inside it go flat. The 4px matches BlockStyles::INSIDE_PADDING, which
 * is also what the row's corner radius is grown by so the corners stay
 * concentric with the button's.
 */
.maswcas-search--button-inside .maswcas-search__field {
	padding: 4px;
	border: 1px solid #949494;
	background: #fff;
	box-sizing: border-box;
}

.maswcas-search--button-inside .maswcas-search__input,
.maswcas-search--button-inside .maswcas-search__category {
	border: none;
	background: transparent;
}

.maswcas-search--button-inside .maswcas-search__input:focus {
	outline: none;
}

/*
 * Button only: the field is revealed by the button. Rendered collapsed by the
 * server so it does not flash open, and re-opened by the template's <noscript>
 * for a shopper whose browser will never run the script that opens it.
 *
 * `display: none` rather than a zero width: the input's padding is the theme's,
 * and squeezing a control whose padding we do not control leaves a visible stub.
 */
.maswcas-search--button-only .maswcas-search__field {
	justify-content: flex-end;
}

.maswcas-search--field-hidden .maswcas-search__input,
.maswcas-search--field-hidden .maswcas-search__category {
	display: none;
}

/*
 * An icon button is square around its glyph, so it cannot inherit the text
 * button's horizontal padding. `line-height: 0` keeps the box from inheriting a
 * text line's height around an image.
 */
.maswcas-search--icon-button .maswcas-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	line-height: 0;
}

/* Sized as core sizes its own search icon, so the two buttons match. */
.maswcas-search__icon {
	width: 1.25em;
	height: 1.25em;
	min-width: 24px;
	min-height: 24px;
	/*
	 * currentColor, so the icon follows whatever text colour the merchant set on
	 * the button — a fixed fill would be invisible on half the backgrounds the
	 * colour control can produce.
	 */
	fill: currentColor;
}

/*
 * Alignment moves the box, not the text inside it, and it is the row that gets
 * moved because the row is what carries the width. Themes generally float
 * `alignleft`/`alignright` for images; a floated search form would drag the
 * following content up beside it, so these use auto margins instead.
 */
.maswcas-search.aligncenter .maswcas-search__field {
	margin-left: auto;
	margin-right: auto;
}

.maswcas-search.alignright .maswcas-search__field {
	margin-left: auto;
}

.maswcas-search.alignleft .maswcas-search__field {
	margin-right: auto;
}

/*
 * The panel is a CARD: rounded on every corner and lifted by shadow alone
 * (the Gmail-reference restyle, 2026-08-19 — replacing the Horizon pass's
 * 12px radius + hairline border). The two-layer shadow is Material's
 * elevation rather than one soft blur: a tight dark contact shadow keeps the
 * card's edge readable where it meets a white page, and the wide diffuse
 * layer does the lifting. That pair is why the border could go — it was
 * carrying the edge on its own before.
 *
 * The radius is symmetric on purpose: the attach positioner flips the panel
 * above a form near the viewport bottom, and a symmetric card needs no corner
 * trading in either direction. overflow-y:auto doubles as the clip that keeps
 * square-cornered children (the "See all" footer, an edge-to-edge hover tint)
 * inside the rounded corners.
 */
/* ======================================================================
 * THE PANEL'S PALETTE — and why the panel has one at all
 *
 * The dropdown pinned its own `background: #fff` and then INHERITED its text
 * colour from the theme. That is a contrast pair with one half nailed down
 * and the other handed to somebody else, so it was only ever correct by
 * luck — and on Electro's dark mode (reported 2026-09-01) the luck ran out:
 * a white card inheriting the theme's near-white body text, which is a panel
 * a shopper cannot read at all. **Wherever this file pins a background it
 * must pin the colour that sits on it.** That rule is the floor here, and it
 * holds whether or not the dark palette below ever engages.
 *
 * Everything the panel paints is a token, for two reasons beyond dark mode.
 * A merchant can restyle the dropdown from their own stylesheet by setting
 * one custom property instead of out-specifying a rule they did not write —
 * which is the supported escape hatch if the automatic scheme ever guesses
 * wrong. And the two palettes sit side by side, so a colour added to one is
 * visibly missing from the other.
 *
 * **`prefers-color-scheme` is deliberately NOT the switch, and using it would
 * be a bug rather than a simplification.** Electro's dark mode is a control
 * on the page — a site-level toggle, like every WooCommerce theme that ships
 * one. The OS preference and that toggle are independent: a shopper on a
 * light OS who turns the store dark would get nothing, and a shopper on a
 * dark OS browsing a light store would get a dark panel on a white page.
 * The only thing that tracks the toggle is the rendered page itself, so
 * `search-box.js` measures it and stamps `data-maswcas-scheme` — see
 * `detectScheme()`, which runs on every open, so a mid-session flip is
 * picked up with no observer.
 *
 * The Site Editor canvas has no panel element — the part's root block is
 * the outermost thing on it — so the light set is declared on that root
 * too. Without it every `var()` below is undefined there, and a shorthand
 * holding one (`border: 1px solid var( --maswcas-pill-edge )`) is invalid at
 * computed-value time: the canvas drew the trending pills with no border and
 * the Showroom rail with no tint. `:where()` keeps the arm at (0,1,0).
 * ====================================================================== */
.maswcas-search__results,
:where( .editor-styles-wrapper ) .maswcas-search__dropdown {
	--maswcas-surface: #fff;
	--maswcas-ink: #1f1f1f;
	--maswcas-ink-muted: #666;
	--maswcas-hover: #f5f5f5;
	--maswcas-hover-soft: #f7f7f7;
	--maswcas-sunken: #f2f2f2;
	--maswcas-skeleton: #ebebeb;
	/* The reduced-motion progress bar, which is a solid fill rather than the
	   sweeping gradient — so it has to READ rather than merely tint. */
	--maswcas-track: #949494;
	--maswcas-line: #ebebeb;
	--maswcas-pill-edge: #e4e4e7;
	--maswcas-chip-edge: #c4c7c5;
	--maswcas-chip-hover: #f0f0f0;
	--maswcas-active: rgba( 0, 0, 0, 0.07 );
	--maswcas-active-edge: #5f6368;
	--maswcas-active-fill: #eaeaec;
	/* The applied filter chip, which reads as pressed-in by inverting. In the
	   dark palette the inversion inverts too — a near-black chip on a
	   near-black panel would read as a hole, not as a pressed control. */
	--maswcas-invert-fill: #1f1f1f;
	--maswcas-invert-ink: #fff;
	--maswcas-invert-active-edge: #8f8f8f;
	--maswcas-invert-active-fill: #3a3a3a;
	--maswcas-danger: #b32d2e;
	--maswcas-warn: #8a6d1f;
	/* The split design's six (see "The SPLIT design" at the end of this
	   file): the sidebar rail, the accent that outlines the keyboard-active
	   product row and colours the footer's link, the tint under that row, and
	   the highlighter pen the product titles use there — a mark ON a fill,
	   so both halves are pinned together per the rule above. */
	--maswcas-rail: #f5f5f7;
	--maswcas-accent: #1a56db;
	--maswcas-accent-ink: #fff;
	--maswcas-accent-soft: #eef3fe;
	--maswcas-mark-fill: #ffe95c;
	--maswcas-mark-ink: #1f1f1f;
	--maswcas-shadow: 0 1px 3px rgba( 60, 64, 67, 0.3 ),
		0 4px 8px 3px rgba( 60, 64, 67, 0.15 );
	/* The page's shade behind the panel, when the scrim is on. */
	--maswcas-scrim: rgba( 17, 17, 17, 0.42 );
}

/*
 * The dark palette. Stamped by `detectScheme()` from the field's own rendered
 * background, never from `prefers-color-scheme` — see above.
 *
 * The numbers are not eyeballed: every text/surface pair here clears WCAG AA
 * for body text, and `verify-dark-theme.js` computes the ratios from what the
 * browser reports rather than trusting this comment. The muted ink and the
 * two status colours sit closest to the floor in both palettes, so they are
 * what fails first if somebody nudges the surface.
 */
.maswcas-search__results[data-maswcas-scheme="dark"] {
	--maswcas-surface: #1f2023;
	--maswcas-ink: #e8eaed;
	--maswcas-ink-muted: #9aa0a6;
	--maswcas-hover: #2a2b2f;
	--maswcas-hover-soft: #27282c;
	--maswcas-sunken: #303136;
	--maswcas-skeleton: #34353a;
	--maswcas-track: #7c7f85;
	--maswcas-line: #3c3d42;
	--maswcas-pill-edge: #3c3d42;
	--maswcas-chip-edge: #5f6368;
	--maswcas-chip-hover: #2f3034;
	--maswcas-active: rgba( 255, 255, 255, 0.1 );
	--maswcas-active-edge: #9aa0a6;
	--maswcas-active-fill: #33343a;
	--maswcas-invert-fill: #e8eaed;
	--maswcas-invert-ink: #1f2023;
	--maswcas-invert-active-edge: #c4c7c5;
	--maswcas-invert-active-fill: #cdd0d4;
	--maswcas-danger: #f28b82;
	--maswcas-warn: #fdd663;
	--maswcas-rail: #26272b;
	--maswcas-accent: #8ab4f8;
	--maswcas-accent-ink: #1f2023;
	--maswcas-accent-soft: rgba( 138, 180, 248, 0.14 );
	--maswcas-mark-fill: #f2c94c;
	--maswcas-mark-ink: #1f2023;
	/* A shadow is nearly invisible against a dark page, so the card earns a
	   hairline as well. Not instead: the shadow still separates it from a
	   mid-grey theme. */
	--maswcas-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 ),
		0 4px 12px 3px rgba( 0, 0, 0, 0.45 ),
		0 0 0 1px rgba( 255, 255, 255, 0.08 );
	--maswcas-scrim: rgba( 0, 0, 0, 0.6 );
}

.maswcas-search__results {
	position: absolute;
	z-index: 1000;
	left: 0;
	right: 0;
	top: 100%;
	max-height: 70vh;
	overflow-y: auto;
	/* Both positioners write width from a measured border box (positionInRow
	   for the block panel, the attach script for the portaled one). Inert
	   while width is CSS-derived (left+right anchoring), so the
	   button-inside arrangement is untouched — and it keeps the panel honest
	   if a theme ever puts a border back on it. */
	box-sizing: border-box;
	background: var( --maswcas-surface );
	/* Pinned, not inherited — the whole reason the palette above exists. */
	color: var( --maswcas-ink );
	border-radius: 16px;
	box-shadow: var( --maswcas-shadow );
}

/*
 * The scrim (Settings → Search box → "Dim the page behind the dropdown"),
 * stamped as `--scrim` at init. It is the panel's OWN shadow — a spread wide
 * enough to cover any viewport — not an overlay element, and that is the
 * design: an overlay needs a z-index, and inside a theme's sticky header (a
 * stacking context the panel may live in) no single value both covers the
 * page and stays under the panel. A shadow always paints exactly at the
 * panel's own level. `clip-path` cuts it off at the panel's top edge, so the
 * search box above stays clear; a panel the attach positioner flipped above
 * its box (`--up`) is cut at its bottom edge instead. Clicks pass through the
 * shade to the page, which closes the panel like any outside click.
 */
.maswcas-search__results--scrim {
	box-shadow: var( --maswcas-shadow ), 0 0 0 200vmax var( --maswcas-scrim );
	clip-path: inset( 0 -200vmax -200vmax -200vmax );
}

.maswcas-search__results--scrim.maswcas-search__results--up {
	clip-path: inset( -200vmax -200vmax 0 -200vmax );
}

/*
 * Shadows are not painted in forced-colours mode, so the card that lost its
 * border to a shadow would lose its edge entirely — a panel bleeding into the
 * page behind it. The border comes back only here, in system colours.
 */
@media ( forced-colors: active ) {

	.maswcas-search__results {
		border: 1px solid CanvasText;
	}
}

/*
 * Spelled out rather than left to the hidden attribute's user-agent rule,
 * for the same reason the two view rules below spell it out: any theme rule
 * that sets a display on the element beats the UA default. The block's panel
 * lives inside our own markup where that is unlikely; the attach mode's
 * panel lives inside a THEME's form, where `.search-form > * { display:flex }`
 * is exactly the kind of rule that would pin an empty bordered panel open.
 */
.maswcas-search__results[hidden] {
	display: none;
}

/*
 * The attach mode's panel (docs/theme-search-attach.md, slice 3): appended to
 * <body> and positioned inline by the script from the form's measured box —
 * never inside the theme's tree, which is where overflow clipping, stacking
 * contexts and transform containing blocks all live. The base rule above
 * still supplies the look; this modifier neutralises the anchored-mode
 * right:0 (the script sets left/top/width/max-height inline) and raises the
 * z-index clear of sticky headers. `--maswcas-z` is the documented override
 * for the one thing a portal cannot out-stack: a cookie banner pinned at the
 * integer ceiling.
 */
.maswcas-search__results--attach {
	/* box-sizing rides the base rule now — both panels are width-scripted. */
	right: auto;
	/* The positioner parks the panel at 0,0 and measures where that landed —
	   the calibration its docblock describes. A theme's `* { transition: all }`
	   would turn that synchronous measurement into a mid-animation read and
	   the panel into a drifting one; geometry the script owns must never
	   animate, and !important is deliberate on an element we created. */
	transition: none !important;
	z-index: var( --maswcas-z, 100000 );
}

/* Flipped above a form near the viewport bottom. The card's radius is
   symmetric, so the flip needs no rule of its own any more; the class stays
   in the markup as the styling hook it always was. */

/*
 * Visually hidden, still announced — the status node the combobox layer
 * speaks result counts through (slice 6). The plugin's own utility rather
 * than screen-reader-text, because the attach mode renders on pages whose
 * theme may define no such class.
 */
.maswcas-search__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/*
 * The keyboard-active option (aria-activedescendant's visual half). A tint
 * rather than an outline: the row is not focused — focus never leaves the
 * input in this pattern — and a focus ring on an unfocused row would lie
 * about where the keyboard is.
 */
.maswcas-search__option--active {
	background-color: var( --maswcas-active );
}

.maswcas-search__list {
	list-style: none;
	margin: 0;
	/* Padding lives in the armour ladder — see "THEME ARMOUR — the panel's
	   LISTS". It is not omitted here, it is declared there. */
}

/*
 * The dropdown's two views — what the shopper sees before they have typed
 * enough to search, and what they see after. Both are rendered from the same
 * `product-search-dropdown` template part; only one is ever on screen, and the
 * script decides which.
 *
 * `display: none` is spelled out rather than left to the `hidden` attribute's
 * user-agent rule: any theme rule that sets a display on these elements would
 * beat the UA default, and a suggestions panel that will not hide is the panel
 * sitting on top of the shopper's results.
 *
 * The TRENDING section joined this list when the panel learned to narrow both
 * lists to the typed prefix: until then nothing ever hid it, so nothing needed
 * to say how. A section whose every row was filtered out is a heading with
 * nothing under it.
 */
.maswcas-search__view[hidden],
.maswcas-search__history[hidden],
.maswcas-search__trending[hidden],
.maswcas-search__completions[hidden] {
	display: none;
}

/*
 * Suggestions — the shopper's recent searches and the store's trending ones.
 * Rendered into the same dropdown the results use, so they inherit the panel's
 * position, width, and shadow: a shopper sees one surface that changes
 * contents, not two competing popovers. The two lists share every rule they can
 * for the same reason — stacked in one panel, they must not read as two widgets
 * that happen to be adjacent.
 *
 * The rows are <span role="option">s, not links: they run a search rather than
 * going to a URL, and they are options in a listbox rather than commands. They
 * were <button>s until 2026-09-01, which is what let a theme's blanket button
 * reset repaint them — see "THEME ARMOUR" below. Spans inherit nothing from the
 * theme, so the rules under this comment are the whole appearance rather than a
 * correction to somebody else's.
 */
.maswcas-search__history-head,
.maswcas-search__trending-head,
.maswcas-search__terms-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* No rule under a heading any more: after the Gmail restyle the ONLY
	   hairline in the panel separates one group from the next (see the
	   divider rule below), so a second line under every label would read as
	   twice as much structure as there is. */
	padding: 10px 12px 2px;
}

/*
 * ONE divider scheme: between GROUPS, never between the rows inside one — the
 * reference's single structural rule, and what makes a panel holding chips,
 * suggested searches, categories and products read as four answers rather than
 * one long list. It replaced four separate sibling rules (completions + *,
 * terms + *, the per-row __item border, the heading's own border-top), which
 * between them drew lines in some of those places and not others.
 *
 * Two selectors because the panel has two shapes. The results view is a real
 * wrapper element, so its children are the groups. The suggestions are two
 * sections that are siblings whether the blocks rendered them or the legacy
 * builder did — and `:not([hidden])` is load-bearing there: the recent section
 * is server-rendered and hidden until the script has terms for it, so without
 * it a first-time shopper (no history, by definition) gets a divider above the
 * trending heading with nothing on the other side of it.
 */
.maswcas-search__view--results > * + *,
.maswcas-search__view--suggestions > :not( [hidden] ) + :not( [hidden] ),
.maswcas-search__view--suggestions:not( [hidden] ) + .maswcas-search__slot:not( :empty ),
.maswcas-search__completions:not( [hidden] ) + .maswcas-search__results-body:not( :empty ) {
	border-top: 1px solid var( --maswcas-line );
}

/*
 * The suggestions selector was `__history:not([hidden]) + __trending` until the
 * completions moved into this view and made it three sections rather than two.
 * Generalised rather than extended pairwise: the sections are reorderable in
 * the Site Editor, so a rule naming which one follows which is wrong the moment
 * a merchant drags one — and `:not([hidden])` on BOTH sides is what it always
 * needed, since every section here hides itself when it has no rows.
 *
 * The last two are the seam BETWEEN the two regions, which is new: the
 * completions stay on screen while a rendered search sits underneath them, so
 * something has to separate the suggestions from the results. The templated
 * dropdown puts a slot beside the suggestions view; the attach-mode panel has
 * no view wrapper at all and puts the body element directly beside the
 * completions. `:not(:empty)` on both, so no divider is drawn above a region
 * holding nothing — which is every panel below the trigger length.
 */

/*
 * Section headings state the section quietly: small, muted, sentence case —
 * the Horizon reference's "Products" label. No text-transform: the
 * small-caps-eyebrow retirement (docs/dropdown-restyle.md) still holds; only
 * the size and weight stepped back so the options, not the labels, carry the
 * panel.
 */
.maswcas-search__history-title,
.maswcas-search__trending-title,
.maswcas-search__terms-title {
	font-size: 0.82em;
	font-weight: 600;
	opacity: 0.65;
}

/* ======================================================================
 * THEME ARMOUR
 *
 * Two controls in this panel are genuinely <button>s and must stay that way:
 * "Clear" here, and the row's trailing ✕ further down. Both are COMMANDS, not
 * options — they are absent from stampOptions' selector list on purpose, they
 * keep their place in the tab order, and an element that is activated by
 * Enter and Space is exactly what a button is for. Every other pickable thing
 * in the panel stopped being a button on 2026-09-01 precisely so it would
 * stop being a target for rules like these:
 *
 *   Woodmart  :is(.btn,.button,button,[type=submit],[type=button])
 *             — (0,1,0), which TIES this file's one-class rules and wins on
 *               source order, because the theme's sheet is enqueued after
 *               ours. Result: uppercase, centred, inline-flex, radius.
 *   Electro   button:not(…) × 11 clauses
 *             — about (0,11,1). Wins outright, order irrelevant. Result: a
 *               full-width grey pill with the theme's padding.
 *
 * There is no specificity we can pick that survives the next theme, so for
 * these two the declarations are `!important` — the one cascade mechanism
 * that does not depend on guessing how deep somebody else's selector goes.
 * The doubled selector adds an ancestor for the case a theme reaches for
 * `!important` itself: an important declaration only loses to another
 * important one on specificity, and `.header button` would otherwise beat a
 * bare class.
 *
 * Rules for anyone extending this:
 *
 *   - Only these two selectors. `!important` is a debt; it is affordable here
 *     because the alternative is a per-theme arms race, and unaffordable
 *     everywhere a plain class already works.
 *   - Every declaration for these elements lives in this block, including the
 *     hover states. A non-important rule elsewhere would silently lose to the
 *     resting value here, which is a nastier bug than the one being fixed.
 *   - `::before`/`::after { content: none }` is not padding out the list.
 *     Themes routinely draw a button's hover fill or its ripple with a
 *     pseudo-element, and that survives every property reset above it.
 *   - Merchants can still override: their own `!important` at equal or
 *     greater specificity wins, exactly as before.
 * ====================================================================== */
.maswcas-search__results .maswcas-search__history-clear,
.maswcas-search__history-clear {
	appearance: none !important;
	box-sizing: border-box !important;
	display: block !important;
	width: auto !important;
	position: static !important;
	justify-content: normal !important;
	align-items: normal !important;
	vertical-align: baseline !important;
	white-space: normal !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	background: none !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: 0.8em !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	line-height: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	text-decoration: underline !important;
	text-align: start !important;
	transform: none !important;
	cursor: pointer !important;
	opacity: 0.7 !important;
}

.maswcas-search__results .maswcas-search__history-clear::before,
.maswcas-search__results .maswcas-search__history-clear::after,
.maswcas-search__history-clear::before,
.maswcas-search__history-clear::after {
	content: none !important;
}

.maswcas-search__results .maswcas-search__history-clear:hover,
.maswcas-search__results .maswcas-search__history-clear:focus,
.maswcas-search__history-clear:hover,
.maswcas-search__history-clear:focus {
	background: none !important;
	color: inherit !important;
	opacity: 1 !important;
}

/* ======================================================================
 * THEME ARMOUR — the panel's LISTS
 *
 * The same failure as the block above, one element down and reported the
 * same way (2026-09-01): themes put `margin-bottom` on `li`, and every row in
 * this panel is an `<li>`. **Not one row rule in this file set a margin** —
 * the whole anatomy is flex gaps and padding — so a theme's list spacing
 * landed completely unopposed, and `.maswcas-search__item` (the product row)
 * had no rule at all beyond `[hidden]`. The arithmetic: `.woocommerce ul li`
 * is (0,1,2) and beats every one-class rule in this file, and a theme
 * undoing WooCommerce's own list markup reaches for `!important` routinely,
 * which no specificity answers at all.
 *
 * The selector is an ATTRIBUTE match rather than the twelve class names it
 * stands for, and that is deliberate in both directions. It covers every
 * list and row the panel has — including the next one somebody adds, which
 * is precisely the row that would otherwise be forgotten. And it requires
 * the `ul`/`li` tag plus one of our own class names, so it stops at the
 * boundary that matters: the dropdown is an editable template part, and a
 * merchant who drops a `core/list` block into it keeps their own styling.
 *
 * **The panel's list padding is declared HERE, in one ordered ladder, and
 * nowhere else.** That is the part worth understanding before editing any of
 * it. `padding` is contended — four different values across the two
 * suggestion layouts — so the floor below has to be beaten by our own real
 * values, which means each of them needs `!important` AND enough specificity
 * to outrank the floor. Left scattered across the layout rules at (0,1,0)
 * they lost to the theme's own important declaration; scoping those rules
 * in place was not an option either, because raising a base rule above its
 * own `[hidden]` guard is the trap this file already warns about three
 * times. So the layout rules keep their layout and point here, and the
 * ladder reads top to bottom:
 *
 *   1. every list and row      padding: 0
 *   2. the suggestion lists    padding: 0 0 6px      (ties 1, later wins)
 *   3. the suggestion rows     padding-inline-start  (ties 1, later wins)
 *   4. the pills layout        overrides 2 and 3     (wins on specificity)
 *
 * Steps 2 and 3 tie step 1 at (0,2,1) and win on source order, which is why
 * they sit immediately below it rather than beside the layouts they belong
 * to. Step 4 is (0,3,1) and needs no ordering at all. **Adding a fifth rung
 * means checking it against 1 — a padding declared anywhere else in this
 * file will simply lose to the floor and look like it was ignored.**
 *
 * Two properties are deliberately NOT armoured, and both for the same
 * reason: a rule of ours already sets them, and `!important` beats a
 * non-important declaration whatever its specificity — including our own —
 * so armouring one forces every rule competing for it to become important
 * too. `border` is drawn by the pills layout and recoloured by the
 * keyboard-active `:has()` rule; `background` is set by the hover, pills and
 * active-option rules. A theme drawing either on a bare `li` is also
 * speculative — the reported bug is spacing, and the panel's divider scheme
 * lives on the group wrappers, not on rows.
 * ====================================================================== */

/* 1. The floor. Uncontended properties, plus padding: 0. */
.maswcas-search__results ul[class*="maswcas-search__"],
.maswcas-search__results li[class*="maswcas-search__"],
ul[class*="maswcas-search__"],
li[class*="maswcas-search__"] {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-indent: 0 !important;
	/* `inherit`, not a number: the panel's line-height is the theme's, which
	   is the whole point of the box looking native. This only undoes a
	   theme's list-specific override of it. */
	line-height: inherit !important;
}

/* A theme that draws its bullets as a pseudo-element survives `list-style`
   entirely — the same trap the button armour spends its last rule on. */
.maswcas-search__results ul[class*="maswcas-search__"]::before,
.maswcas-search__results ul[class*="maswcas-search__"]::after,
.maswcas-search__results li[class*="maswcas-search__"]::before,
.maswcas-search__results li[class*="maswcas-search__"]::after,
ul[class*="maswcas-search__"]::before,
ul[class*="maswcas-search__"]::after,
li[class*="maswcas-search__"]::before,
li[class*="maswcas-search__"]::after {
	content: none !important;
}

/* 2. The suggestion lists' 6px tail — the room under the last row that keeps
      a section from sitting flush against the next one's divider. */
.maswcas-search__results ul.maswcas-search__history-list,
.maswcas-search__results ul.maswcas-search__trending-list,
.maswcas-search__results ul.maswcas-search__completion-list,
.maswcas-search__results ul.maswcas-search__terms-list,
ul.maswcas-search__history-list,
ul.maswcas-search__trending-list,
ul.maswcas-search__completion-list,
ul.maswcas-search__terms-list {
	padding: 0 0 6px !important;
}

/* 3. The row's leading gutter. The ROW carries it and the term stretches
      into it, which is what makes the whole row one hit target — see the
      row anatomy above. */
.maswcas-search__results li.maswcas-search__history-item,
.maswcas-search__results li.maswcas-search__trending-item,
.maswcas-search__results li.maswcas-search__completion-item,
li.maswcas-search__history-item,
li.maswcas-search__trending-item,
li.maswcas-search__completion-item {
	padding-inline-start: 12px !important;
}

/* 4. The pills layout, which shrink-wraps its rows and moves the section's
      breathing room onto the grid instead. (0,3,1), so this one wins on
      specificity and does not depend on where it sits. */
.maswcas-search__results .maswcas-search__history--pills ul.maswcas-search__history-list,
.maswcas-search__results .maswcas-search__trending--pills ul.maswcas-search__trending-list,
.maswcas-search__history--pills ul.maswcas-search__history-list,
.maswcas-search__trending--pills ul.maswcas-search__trending-list {
	padding: 6px 12px 14px !important;
}

.maswcas-search__results .maswcas-search__history--pills li.maswcas-search__history-item,
.maswcas-search__results .maswcas-search__trending--pills li.maswcas-search__trending-item,
.maswcas-search__history--pills li.maswcas-search__history-item,
.maswcas-search__trending--pills li.maswcas-search__trending-item {
	padding: 0 !important;
}

/*
 * Recent searches, trending terms and completions are ROWS with a leading
 * glyph — not the wrapping chip grid this file carried before (the Gmail
 * restyle, 2026-08-19, superseding the noon-reference chips of
 * docs/dropdown-restyle.md slice 1). One anatomy for all three so a panel
 * holding several of them reads as one list with its labels on a single
 * vertical line, rather than as three widgets that happen to be adjacent.
 *
 * The chip grid's load-bearing constraint SURVIVES this change and is why
 * rows are the safer shape, not merely a different one: DOM order IS the
 * arrow-key order (stampOptions collects in document order) and setActive()'s
 * scroll-into-view math is purely vertical against the panel. Never
 * `row-reverse`, `wrap-reverse` or `order` here — any of them decouples the
 * visual order from the arrow-key order with no code-level symptom.
 */
.maswcas-search__history-list,
.maswcas-search__trending-list,
.maswcas-search__completion-list,
.maswcas-search__terms-list {
	list-style: none;
	margin: 0;
	/* The 6px tail lives in the armour ladder — see "THEME ARMOUR — the
	   panel's LISTS". */
}

/*
 * The ROW carries the leading gutter and the gap; the term carries the rest of
 * the padding and stretches into it. That split is what makes the row one hit
 * target: anything of the row that is not the term (the glyph, the gutter) has
 * to be dead space the delegated handler can still resolve — which is why the
 * click delegation matches the `<li>` and reads the term off the element
 * inside it.
 */
.maswcas-search__history-item,
.maswcas-search__trending-item,
.maswcas-search__completion-item {
	display: flex;
	align-items: center;
	gap: 12px;
	/* The 12px leading gutter lives in the armour ladder — see "THEME ARMOUR
	   — the panel's LISTS". */
}

/*
 * And the same trap one level down, which is why this rule is separate rather
 * than folded into the block above: `display: flex` there is an AUTHOR rule,
 * so it beats the `hidden` attribute's user-agent rule outright. The prefix
 * filter sets `hidden` on the rows it drops — deliberately, because
 * `stampOptions()` already skips anything inside `[hidden]`, which is what
 * keeps the keyboard walk and the spoken counts following the filter for
 * free — and without this it would have hidden precisely nothing.
 */
.maswcas-search__history-item[hidden],
.maswcas-search__trending-item[hidden],
.maswcas-search__completion-item[hidden] {
	display: none;
}

/*
 * And the same rule for the PRODUCT rows, which the completions cap now hides
 * from the browser rather than the server dropping them from the response
 * (docs/dropdown-restyle.md). `.maswcas-search__item` has no display of its own
 * today, so the `hidden` attribute's user-agent rule already wins — this is
 * written down anyway because the two rules above exist precisely because
 * someone later gave those rows a `display` and silently un-hid every filtered
 * row. Stating it here means that mistake cannot be made a third time.
 */
.maswcas-search__item[hidden] {
	display: none;
}

.maswcas-search__history-item:hover,
.maswcas-search__history-item:focus-within,
.maswcas-search__trending-item:hover,
.maswcas-search__trending-item:focus-within,
.maswcas-search__completion-item:hover,
.maswcas-search__completion-item:focus-within {
	background: var( --maswcas-hover );
}

.maswcas-search__history-term,
.maswcas-search__trending-term {
	/* A flex item, so the span is blockified and the ellipsis rules below
	   apply — nothing here depends on the element being a block by default.
	   The `border`/`background`/`color`/`font` declarations are no-ops on a
	   span today; they are kept because `background: none` is what the active
	   tint below is written to beat, and because they cost nothing if a row
	   ever becomes a different element again. */
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 0;
	padding-inline-end: 12px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	/* `start`, not `left`: the rows ellipsise, so under RTL a physical value
	   would pin Hebrew/Arabic to the wrong edge. */
	text-align: start;
	/* One line, ellipsised: a long phrase must not reflow the whole panel. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}

/*
 * Every leading glyph occupies the SAME box, whichever row it belongs to and
 * whether it is an icon or a captured thumbnail — that is what puts the terms
 * on one vertical line. The 3px padding on the SVGs renders their 24-unit
 * viewBox at 18px inside a 20px slot, so a glyph and a 20px thumbnail claim
 * identical width.
 *
 * `pointer-events: none` is not decoration: these are SIBLINGS of the term
 * button (the delegated click reads that button's textContent as the query,
 * so a glyph inside it would become part of what gets searched). Without it
 * the glyph becomes the click target, `closest()` cannot reach the sibling
 * button, and the row lights up on hover and then does nothing.
 */
.maswcas-search__history-icon,
.maswcas-search__history-thumb,
.maswcas-search__trending-icon,
.maswcas-search__completion-icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	opacity: 0.5;
	pointer-events: none;
}

.maswcas-search__history-icon,
.maswcas-search__trending-icon,
.maswcas-search__completion-icon {
	padding: 3px;
}

/* The row's captured product thumbnail (docs/dropdown-restyle.md slice 2).
   Absent for terms recorded by a plain submit — the clock glyph takes the
   slot instead, so the row must look right either way. Full opacity: this
   one is a picture, not a hint. */
.maswcas-search__history-thumb {
	border-radius: 4px;
	object-fit: cover;
	background: var( --maswcas-sunken );
	opacity: 1;
}

/*
 * The active option's tint, restated AFTER the resting rule above — the
 * shared `.maswcas-search__option--active` rule has the same specificity and
 * loses to `background: none` on these two, which would leave a keyboard user
 * arrowing through the rows with no feedback at all.
 *
 * The row-level `:has()` rule below is an enhancement on top; it must never
 * be the only indicator, because `:has()` postdates this file's browser
 * baseline. Without it the tint stops at the term, which starts after the
 * glyph — visibly partial, but never absent.
 */
.maswcas-search__history-term.maswcas-search__option--active,
.maswcas-search__trending-term.maswcas-search__option--active {
	background-color: var( --maswcas-active );
}

.maswcas-search__history-item:has( .maswcas-search__option--active ),
.maswcas-search__trending-item:has( .maswcas-search__option--active ),
.maswcas-search__completion-item:has( .maswcas-search__option--active ) {
	background: var( --maswcas-active );
}

/* ======================================================================
 * The PILLS layout — Settings::SUGGESTION_LAYOUTS, the merchant's choice
 * of shape for the recent and trending sections.
 *
 * Everything below is scoped to a modifier on the SECTION wrapper, printed
 * by `Blocks::layout_modifier()` on the templated dropdown and by
 * `sectionClass()` in search-box.js for the legacy and attach-mode panels.
 * The markup, the DOM order, the accessible names and the delegated click
 * are identical in both layouts — this is a stylesheet, and that is the
 * whole point of doing it this way. Every constraint in
 * docs/dropdown-restyle.md therefore still holds without a second
 * implementation of any of them:
 *
 *   - `flex-wrap: wrap` and nothing else. Never `order`, `row-reverse` or
 *     `wrap-reverse`: DOM order IS the arrow-key order (stampOptions
 *     collects in document order), and a reversed grid decouples the two
 *     with no code-level symptom.
 *   - Wrapping, never a sideways scroller. setActive()'s scroll-into-view
 *     math is purely vertical against the panel, so a horizontal scroller
 *     can leave the active pill off-screen with nothing to scroll it back.
 *   - The glyphs stay siblings of the term. They only look as
 *     though they are inside the pill because the <li> IS the pill.
 *
 * Scoped to the section rather than written against `__trending-item`
 * alone for a second reason: a COMPLETION row also wears
 * `maswcas-search__trending-term`, and completions are not part of this
 * setting. `.maswcas-search__completions` is a different section, so
 * scoping here cannot reach them.
 * ------------------------------------------------------------------ */

/*
 * **The heading is NOT part of this.** The panel has ONE heading treatment —
 * small, muted, sentence case, shared by recent, trending and the
 * completions' "Suggestions" (the rule near the top of this file) — and this
 * setting switches a LAYOUT, not a type scale. An earlier draft stepped these
 * two up to 1em/700 and shipped a panel whose first section was bold and whose
 * third was the quiet eyebrow, which read as two different components rather
 * than as one panel in a different shape. There is deliberately no
 * `--pills` rule for the heads or the titles; the extra room a grid needs
 * lives in the list's own padding below.
 *
 * The group hairline still comes off above a pills section, because a wrapping
 * grid of bordered chips already carries its own edges — the whitespace around
 * it does the separating a rule does between two columns of rows.
 */

/*
 * No hairline above a pills section. The panel's one divider scheme
 * separates GROUPS, and in this layout the bold heading and the whitespace
 * around the grid already do that — a line as well reads as twice as much
 * structure as there is, which is the same judgement the Gmail pass made
 * when it retired the rules under every heading.
 *
 * Written as "the section that FOLLOWS is pills" rather than by
 * un-setting the border on the view: the sections are reorderable in the
 * Site Editor, and a rule naming which one comes first is wrong the moment
 * a merchant drags one.
 */
.maswcas-search__view--suggestions > :not( [hidden] ) + .maswcas-search__history--pills,
.maswcas-search__view--suggestions > :not( [hidden] ) + .maswcas-search__trending--pills {
	border-top: 0;
}

/*
 * The grid. `gap` on a wrapping flex container sets both axes, so one
 * value spaces the pills across and down.
 */
.maswcas-search__history--pills .maswcas-search__history-list,
.maswcas-search__trending--pills .maswcas-search__trending-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	/* The leading 6px is the room a grid needs under its label that a column
	   of rows does not — kept here rather than on the section head, so the
	   heading rule stays byte-identical to the list layout's. The declaration
	   itself lives in the armour ladder — see "THEME ARMOUR — the panel's
	   LISTS". */
}

/*
 * The pill itself is the <li>. Outlined and white rather than the filled
 * grey the 2026-08-12 pass used: this layout puts a product photograph
 * inside the recent chips, and a grey fill behind a photograph reads as a
 * loading state.
 *
 * `overflow: hidden` is load-bearing twice over — it keeps the hover tint
 * inside the rounded corners, and it is what clips the recent pill's
 * flush thumbnail to the leading radius.
 *
 * The border stays 1px in every state, exactly as the facet chips' does:
 * a state change must never resize a pill and reflow the grid under the
 * shopper's cursor.
 */
.maswcas-search__history--pills .maswcas-search__history-item,
.maswcas-search__trending--pills .maswcas-search__trending-item {
	display: flex;
	align-items: center;
	/* Two caps, and the second is what makes this a GRID rather than a list of
	   full-width rows: a recent term can be a whole sentence ("iphone 17 pro
	   max 512gb natural titanium"), and one pill spanning the panel takes the
	   row its neighbours were going to share. The term already
	   ellipsises — it just had nothing to ellipsise against until now. `em`,
	   not px, so the cap tracks whatever type scale the theme sets. */
	max-width: min( 100%, 20em );
	gap: 0;
	/* A pill shrink-wraps its contents, so it overrides the row gutter. That
	   override is in the armour ladder — see "THEME ARMOUR — the panel's
	   LISTS". */
	border: 1px solid var( --maswcas-pill-edge );
	border-radius: 10px;
	background: var( --maswcas-surface );
	overflow: hidden;
}

/*
 * And the `hidden` trap one level down, for the third time in this file.
 * `display: flex` above is an AUTHOR rule, so it beats the `hidden`
 * attribute's user-agent rule outright — and the base
 * `.maswcas-search__history-item[hidden]` rule that already guards against
 * this carries the SAME specificity as the block above while appearing
 * earlier, so it loses on source order. The prefix filter sets `hidden` on
 * the pills it drops; without this it would hide precisely none of them.
 */
.maswcas-search__history--pills .maswcas-search__history-item[hidden],
.maswcas-search__trending--pills .maswcas-search__trending-item[hidden] {
	display: none;
}

/*
 * Restated for the same reason: the resting `background: #fff` above ties
 * with the shared hover rule on specificity and wins on source order, so
 * without this a pill would have no hover state at all.
 */
.maswcas-search__history--pills .maswcas-search__history-item:hover,
.maswcas-search__history--pills .maswcas-search__history-item:focus-within,
.maswcas-search__trending--pills .maswcas-search__trending-item:hover,
.maswcas-search__trending--pills .maswcas-search__trending-item:focus-within {
	background: var( --maswcas-hover );
}

/*
 * The term. The pill shrink-wraps it, so the padding that made a row a
 * full-width target becomes the chip's own inset — and the leading half
 * comes off whenever a glyph is already occupying that edge (see the
 * adjacent-sibling rule below).
 */
.maswcas-search__history--pills .maswcas-search__history-term,
.maswcas-search__trending--pills .maswcas-search__trending-term {
	padding: 9px 14px;
}

.maswcas-search__history--pills .maswcas-search__history-icon + .maswcas-search__history-term,
.maswcas-search__history--pills .maswcas-search__history-thumb + .maswcas-search__history-term,
.maswcas-search__trending--pills .maswcas-search__trending-icon + .maswcas-search__trending-term {
	padding-inline-start: 8px;
}

/*
 * The leading glyphs — the trending ↗ and the clock a recent term wears
 * when it was recorded without a picture. Inline marks inside the pill,
 * not the 20px alignment slot the rows use: there is no column of labels
 * to line up here, so the slot's whole job is gone and it would only push
 * the term away from its own chip's edge.
 */
.maswcas-search__history--pills .maswcas-search__history-icon,
.maswcas-search__trending--pills .maswcas-search__trending-icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	padding: 0;
	margin-inline-start: 12px;
	opacity: 0.55;
}

/*
 * The recent pill's captured product thumbnail, flush against the leading
 * edge and clipped to the pill's radius by the `overflow: hidden` above —
 * the one place this layout differs in more than spacing from the rows,
 * and the reason it exists: a picture at chip scale is worth showing.
 *
 * `align-self: stretch` with an auto height is what makes it flush however
 * tall the pill turns out on the theme's type scale, and `max-height` is
 * what stops a portrait image doing the reverse — a stretched item's
 * hypothetical cross size is clamped by its own max, so a 3:1 photograph
 * cannot grow the whole flex line to match itself.
 */
.maswcas-search__history--pills .maswcas-search__history-thumb {
	flex: 0 0 40px;
	width: 40px;
	height: auto;
	max-height: 52px;
	align-self: stretch;
	padding: 0;
	border-radius: 0;
}

/* The ✕ sits inside the chip, so it trades the row's thumb-sized target
   for the chip's own edge. Still not an option (absent from stampOptions'
   selector list): removing a suggestion is an edit, not a selection.

   Logical properties, not `padding: 9px 12px 9px 2px`: the tight side is
   the one facing the term, and under RTL a physical shorthand would put
   the tight side against the pill's edge and the loose one in the gap. */
.maswcas-search__history--pills .maswcas-search__history-remove {
	padding: 9px 0;
	padding-inline-start: 2px;
	padding-inline-end: 12px;
	font-size: 1em;
}

/*
 * The keyboard-active pill: a fill step and a firmer edge, the same pair
 * the facet chips use and for the same reason — the border is already
 * spent on the resting state here, so the active one cannot be a border
 * colour alone.
 *
 * This is an ENHANCEMENT on top of the tint the base stylesheet puts on
 * the term, never the only indicator: `:has()` postdates this
 * file's browser baseline, and without it the tint stops at the term
 * rather than disappearing.
 */
.maswcas-search__history--pills .maswcas-search__history-item:has( .maswcas-search__option--active ),
.maswcas-search__trending--pills .maswcas-search__trending-item:has( .maswcas-search__option--active ) {
	border-color: var( --maswcas-active-edge );
	background: var( --maswcas-active-fill );
}

/*
 * The taxonomy sections (Matching Categories / Brands — docs/
 * taxonomy-suggestions.md) and the completions section (searches to run —
 * docs/dropdown-restyle.md) now wear the SHARED section anatomy above: the
 * same heading rule, the same list rule, the same row rule, and the one
 * divider scheme. They used to carry three near-copies of it between them,
 * which is how the panel ended up with a line under some headings, above some
 * sections and between some rows.
 *
 * A completion row is still a `.maswcas-search__trending-term` in the markup,
 * because a completion IS a term to search and it reuses that whole
 * pick-a-term path — so it inherits the row geometry for free rather than
 * overriding it, which is what the deleted `.maswcas-search__completion-term`
 * rule had to do back when that class meant "chip".
 */
.maswcas-search__term-item {
	display: flex;
	align-items: center;
}

.maswcas-search__term-item:hover,
.maswcas-search__term-item:focus-within {
	background: var( --maswcas-hover );
}

/*
 * The anchor IS the row here — the glyph is inside it (see Blocks::
 * render_term_list for why this one differs) — so it carries the gutter and
 * the gap the `<li>` carries on the other row types, and lands its label on
 * the same vertical line as theirs.
 */
.maswcas-search__term-suggestion {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	color: inherit;
	text-decoration: none;
}

.maswcas-search__term-icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	padding: 3px;
	opacity: 0.5;
}

/* One line, ellipsised — same rule as the terms above. The clip is on
   the label rather than the anchor, so the glyph never gets ellipsised out of
   a narrow panel before the words do. */
.maswcas-search__term-label {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.maswcas-search__term-crumb {
	font-size: 0.85em;
	opacity: 0.6;
}

/*
 * The term's product count. Printed by the block in every pattern and
 * PAINTED only by the split one, whose sidebar rows have a second line to
 * spend on it; here it is `display: none`, which also keeps it out of the
 * option's accessible name — the stacked row announces exactly what it did
 * before the count was added to the markup.
 */
.maswcas-search__term-count {
	display: none;
}

/*
 * The product list's optional heading (the `showHeading` attribute on the
 * Product Results block). It wears the same eyebrow rule the other sections
 * do, and the result count sits at the row's far end.
 */
.maswcas-search__products-count {
	margin-inline-start: auto;
	font-size: 0.82em;
	opacity: 0.65;
	white-space: nowrap;
}

/*
 * The refinement chips (docs/faceted-dropdown.md) — now the FIRST group in
 * the results panel, directly under the input, which is where the reference
 * puts its filters and where a refinement belongs: above the answers it
 * refines. Moving them is a template-part change; what changes here is the
 * pill itself, from a grey fill to an OUTLINED one.
 *
 * Outlined, not filled, because the chips now sit beside nothing else — a
 * filled pill at the top of an otherwise white card reads as a selected
 * state, which is exactly the meaning the ACTIVE chip needs and must not have
 * to compete for. The 1px border is on both states so applying a filter
 * swaps colours and never resizes the chip.
 *
 * Structurally unchanged: here the BUTTON is the pill — the whole chip
 * listens (the delegated click reads data-facet-*, not textContent), so there
 * is no dead space to split padding around, and the ✕ may sit inside the hit
 * target.
 */
.maswcas-search__facets {
	padding: 12px;
}

.maswcas-search__facet-list {
	list-style: none;
	margin: 0;
	/* Padding: the armour ladder. */
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.maswcas-search__facet-item {
	display: flex;
	max-width: 100%;
}

.maswcas-search__facet {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 7px 14px;
	border: 1px solid var( --maswcas-chip-edge );
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.92em;
	cursor: pointer;
	/* One line, ellipsised: a long category must not reflow the panel. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.maswcas-search__facet:hover {
	background: var( --maswcas-chip-hover );
}

/*
 * The applied filter reads as pressed-in: dark fill, light text. State comes
 * from the server with each render (data-facet-active + this class), so the
 * chip a shopper just tapped never disagrees with the results beside it.
 */
.maswcas-search__facet--active,
.maswcas-search__facet--active:hover {
	background: var( --maswcas-invert-fill );
	border-color: var( --maswcas-invert-fill );
	color: var( --maswcas-invert-ink );
}

.maswcas-search__facet-remove {
	flex: 0 0 auto;
	opacity: 0.7;
}

/*
 * The keyboard-active tint, restated with the chip's own background in the
 * fight — same reasoning as the history/trending restatement above: the
 * shared `.maswcas-search__option--active` rule must not lose to this file's
 * background declarations and leave arrow-key users without feedback.
 *
 * The border steps to a MID grey, not to the applied state's near-black:
 * outlined pills spend the border on their resting state, so if "the keyboard
 * is here" and "this filter is applied" both darkened it to #1f1f1f, the two
 * would be guessable only from the fill. Keyboard = a fill step plus a
 * slightly firmer edge; applied = the dark fill and light text. Width stays
 * 1px in every state, which is what the old transparent border was
 * protecting: a state change must never resize a chip.
 */
.maswcas-search__facet.maswcas-search__option--active {
	border-color: var( --maswcas-active-edge );
	background: var( --maswcas-active-fill );
}

.maswcas-search__facet--active.maswcas-search__option--active {
	border-color: var( --maswcas-invert-active-edge );
	background: var( --maswcas-invert-active-fill );
}

/*
 * The row's trailing ✕. Block padding as well as inline, because at the end
 * of a full-width row this is the control a thumb lands on by accident — it
 * needs a real target, not a glyph's worth of one. It is deliberately NOT an
 * option (it is absent from stampOptions' selector list): removing a
 * suggestion is an edit, not a selection, so it stays an ordinary button in
 * the tab order and must not read as a selectable row.
 */
.maswcas-search__results .maswcas-search__history-remove,
.maswcas-search__history-remove {
	/* Armoured, for the reasons written out in full at "THEME ARMOUR" above —
	   this is the second of the two elements that must stay a <button>, so it
	   is the second and last place in this file that spends `!important`. */
	appearance: none !important;
	box-sizing: border-box !important;
	display: block !important;
	flex: 0 0 auto !important;
	position: static !important;
	justify-content: normal !important;
	align-items: normal !important;
	vertical-align: baseline !important;
	white-space: normal !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	background: none !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: 1.1em !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	text-align: center !important;
	transform: none !important;
	cursor: pointer !important;
	opacity: 0.45 !important;
}

.maswcas-search__results .maswcas-search__history-remove::before,
.maswcas-search__results .maswcas-search__history-remove::after,
.maswcas-search__history-remove::before,
.maswcas-search__history-remove::after {
	content: none !important;
}

.maswcas-search__results .maswcas-search__history-remove:hover,
.maswcas-search__results .maswcas-search__history-remove:focus,
.maswcas-search__history-remove:hover,
.maswcas-search__history-remove:focus {
	background: none !important;
	color: inherit !important;
	opacity: 1 !important;
}

/*
 * No rule between product rows. It was the last of the four divider rules the
 * one group-level scheme above replaced: a hairline between every row makes
 * the panel read as a table, and the reference draws lines only where the
 * KIND of answer changes. The rows are separated by their hover tint and by
 * the whitespace of the thumbnail column, which is enough.
 */

/*
 * Padding deliberately left where it was. The compact row is a markup change
 * (the default template part), but this stylesheet also dresses stores that
 * kept the rich row — a saved DB copy of the part, a theme shipping its own,
 * or a theme overriding search-dropdown.php. Tightening here would cramp
 * exactly the stores that made a deliberate customisation.
 */
.maswcas-search__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	text-decoration: none;
	color: inherit;
}

.maswcas-search__link:hover,
.maswcas-search__link:focus {
	background: var( --maswcas-hover-soft );
}

/*
 * The size comes from the Result Image block, as a custom property rather than
 * a width on the wrapper: the <img> is WooCommerce's own — srcset, loading
 * attribute and all — and the block sizes it rather than rebuilding it.
 */
.maswcas-search__thumb img {
	display: block;
	width: var( --maswcas-thumb-size, 40px );
	height: var( --maswcas-thumb-size, 40px );
	border-radius: 8px;
	object-fit: cover;
}

.maswcas-search__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/*
 * The compact row's title is the row (docs/dropdown-restyle.md): price,
 * rating, stock and SKU are out of the default arrangement, so the title
 * steps back a little and the MATCH is what stands out — see __mark.
 *
 * 500, not 400: a <mark> is frequently absent — the merchant can switch
 * highlighting off, accent folding marks nothing ("cafe" finding "Café"), and
 * a hit matched on content/SKU/brand has no marked word in its title at all.
 * At 400 those lists would have no typographic hierarchy whatsoever, which is
 * worse than what this replaced.
 */
.maswcas-search__title {
	font-weight: 500;
}

/*
 * The matched words: weight, not a highlighter pen. `background: none` is the
 * override that matters — a bare <mark> is yellow-blocked by every UA
 * stylesheet, and the reference design marks the match by making it bold
 * against a lighter completion.
 *
 * Recorded departure: for true prefix completions Baymard and NN/g both say
 * emphasise the COMPLETION rather than what the shopper just typed. We follow
 * the reference (and the WordPress ecosystem — FiboSearch and Algolia both
 * emphasise the match) for familiarity, not on usability grounds.
 */
.maswcas-search__mark {
	background: none;
	color: inherit;
	font-weight: 700;
	padding: 0;
}

.maswcas-search__sku,
.maswcas-search__attributes {
	font-size: 0.8em;
	opacity: 0.7;
}

/*
 * WooCommerce builds the stars, so this only stops them from stretching the
 * row: its own stylesheet sizes `.star-rating` for a product page, where a
 * whole line is theirs to use.
 */
.maswcas-search__rating {
	display: block;
	line-height: 1;
}

.maswcas-search__rating .star-rating {
	font-size: 0.75em;
	margin: 0;
}

/*
 * The availability line. Out of stock and backordered say so in colour, because
 * they are the two a shopper needs to read before clicking — "in stock" is the
 * expected answer and does not need to compete with the price.
 */
.maswcas-search__stock {
	font-size: 0.8em;
	opacity: 0.7;
}

.maswcas-search__stock--out-of-stock {
	color: var( --maswcas-danger );
	opacity: 1;
}

.maswcas-search__stock--available-on-backorder {
	color: var( --maswcas-warn );
	opacity: 1;
}

.maswcas-search__empty {
	margin: 0;
	padding: 12px;
	color: var( --maswcas-ink-muted );
}

/*
 * Waiting for a response, without taking anything off the screen.
 *
 * `.maswcas-search__loading` used to live in the rule above: the script
 * replaced the whole panel with one paragraph of that class for the duration
 * of every request, which is what made a slow host look like a broken
 * dropdown — a populated list of trending terms deleted, at the keystroke the
 * shopper was most engaged, and one line of text left in its place. Nothing
 * renders that class any more.
 *
 * What marks the wait now is this hairline, and NOTHING else: no spinner over
 * the rows, and deliberately no dimming of them either. Rows for the previous
 * prefix are usually most of the answer to the current one, and fading real
 * text the shopper may be mid-way through reading costs legibility to say
 * something the bar already says. Amazon and noon both leave the previous list
 * at full strength; so do we.
 *
 * `position: sticky` rather than absolute because the panel is the scroll
 * container (`overflow-y: auto` on the base rule) — an absolutely positioned
 * bar would scroll away from the top it is meant to sit on. As a
 * pseudo-element it is not an element, so it cannot disturb the `:first-child`
 * the row groups draw their dividers from.
 */
.maswcas-search__results--waiting::before {
	content: "";
	position: sticky;
	top: 0;
	z-index: 2;
	display: block;
	height: 2px;
	background-color: var( --maswcas-skeleton );
	background-image: linear-gradient(
		90deg,
		rgba( 31, 31, 31, 0 ),
		rgba( 31, 31, 31, 0.55 ),
		rgba( 31, 31, 31, 0 )
	);
	background-repeat: no-repeat;
	background-size: 40% 100%;
	animation: maswcas-search-progress 1.1s ease-in-out infinite;
}

@keyframes maswcas-search-progress {

	from {
		background-position: -45% 0;
	}

	to {
		background-position: 145% 0;
	}
}

/*
 * Placeholder rows, for the one case with nothing else to show: a first search
 * whose prefix matches none of the terms already on the page. They exist to
 * hold the height the real rows will occupy — a panel that opens empty and
 * then grows under the cursor is worse than one that opens the right size —
 * so the metrics here deliberately mirror `.maswcas-search__link` rather than
 * being chosen to look good on their own.
 */
.maswcas-search__skeleton {
	margin: 0;
	padding: 0;
	list-style: none;
}

.maswcas-search__skeleton-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
}

/*
 * The floor above zeroes every `li[class*="maswcas-search__"]` at
 * `.maswcas-search__results li[…]` (0,2,1) `!important`. The real row is not
 * hurt by that — its padding is on the anchor inside the item — but a
 * placeholder row IS the item, so it needs the same weight and one more
 * class than the floor, or the thumbs stack into one touching grey column,
 * which is how these rows rendered from the day they shipped.
 */
.maswcas-search__results .maswcas-search__skeleton > .maswcas-search__skeleton-row {
	padding: 10px 12px !important;
}

.maswcas-search__skeleton-thumb {
	flex: 0 0 auto;
	width: var( --maswcas-thumb-size, 40px );
	height: var( --maswcas-thumb-size, 40px );
	border-radius: 4px;
}

.maswcas-search__skeleton-lines {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 7px;
}

.maswcas-search__skeleton-line {
	width: 62%;
	height: 10px;
	border-radius: 3px;
}

.maswcas-search__skeleton-line--short {
	width: 34%;
}

.maswcas-search__skeleton-thumb,
.maswcas-search__skeleton-line {
	background-color: var( --maswcas-skeleton );
	background-image: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0 ),
		rgba( 255, 255, 255, 0.7 ),
		rgba( 255, 255, 255, 0 )
	);
	background-repeat: no-repeat;
	background-size: 140px 100%;
	animation: maswcas-search-shimmer 1.2s linear infinite;
}

@keyframes maswcas-search-shimmer {

	from {
		background-position: -140px 0;
	}

	to {
		background-position: calc( 100% + 140px ) 0;
	}
}

/*
 * Both animations are ambient rather than informative — the bar's presence is
 * the message, not its travel — so they simply stop. The bar keeps a solid
 * fill so it is still visible standing still, which an unfilled track would
 * not be.
 */
@media ( prefers-reduced-motion: reduce ) {

	.maswcas-search__results--waiting::before,
	.maswcas-search__skeleton-thumb,
	.maswcas-search__skeleton-line {
		animation: none;
		background-image: none;
	}

	.maswcas-search__results--waiting::before {
		background-color: var( --maswcas-track );
	}
}

/*
 * Backgrounds are replaced in forced-colours mode, so shapes drawn purely in
 * grey have nothing left to be — the same reasoning that gives the panel its
 * border back above. Outlines are what survives.
 */
@media ( forced-colors: active ) {

	.maswcas-search__skeleton-thumb,
	.maswcas-search__skeleton-line {
		border: 1px solid CanvasText;
	}

	.maswcas-search__results--waiting::before {
		border-bottom: 2px solid Highlight;
	}
}

/*
 * The "see all" footer is a ROW now, not a grey bar: a magnifier in the same
 * 20px slot every other row's glyph uses, the label beside it, and the
 * keyboard hint pushed to the far end. It is the last option in the panel and
 * it reads like one, which is the honest shape — Enter with nothing active
 * goes exactly here.
 *
 * `border-top` stays on the element itself even though the group scheme above
 * would draw the same line: a theme's own overridden `search-dropdown.php`
 * emits this anchor with no results-view wrapper around it, and that path
 * still deserves the line. Same property, same value — nothing doubles.
 */
.maswcas-search__all {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-top: 1px solid var( --maswcas-line );
	color: inherit;
	font-size: 0.9em;
	text-decoration: none;
}

.maswcas-search__all:hover,
.maswcas-search__all:focus {
	background: var( --maswcas-hover );
}

.maswcas-search__all-icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	padding: 3px;
	opacity: 0.5;
}

.maswcas-search__all-label {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*
 * "Press ENTER". `margin-inline-start: auto` rather than a physical margin or
 * `justify-content`, so it sits at the row's END edge under RTL too. It is
 * `aria-hidden` in the markup: this anchor is stamped role=option and its
 * accessible name is computed from its contents.
 */
.maswcas-search__all-hint {
	flex: 0 0 auto;
	margin-inline-start: auto;
	font-size: 0.85em;
	opacity: 0.55;
	white-space: nowrap;
}

/*
 * The split pattern's footer furniture — the "↑↓ navigate / ↵ open" legend
 * and the StoreBolt mark. The block prints both in every pattern (one cached
 * response serves every panel shape); this pattern simply does not paint
 * them. `display: none` also keeps them out of the footer's accessible name,
 * which is computed from its subtree.
 */
.maswcas-search__all-keys,
.maswcas-search__all-brand {
	display: none;
}

/*
 * The hint describes what Enter does *right now*, so it stops claiming it the
 * moment the keyboard is walking the options — there Enter activates the
 * active row instead. `visibility` rather than `display`, so the label does
 * not reflow sideways as the shopper arrows past.
 *
 * The exception restores it when the footer IS the active option, which is
 * the one case where the claim is true again.
 */
.maswcas-search__results--walking .maswcas-search__all-hint {
	visibility: hidden;
}

.maswcas-search__results--walking
	.maswcas-search__all.maswcas-search__option--active
	.maswcas-search__all-hint {
	visibility: visible;
}

/*
 * Neither key cap claims anything on a device that has no such key to press.
 * Both affordances still work where the hardware exists, and the things they
 * describe are reachable without them either way — the footer is a link, and
 * the completion the ghost previews is a row in the panel below. The ghost's
 * grey text stays: it is an inline suggestion, which is a shape mobile
 * browsers already use in their own address bars.
 */
@media ( hover: none ) {

	.maswcas-search__all-hint,
	.maswcas-search__all-keys,
	.maswcas-search__ghost-key {
		display: none;
	}
}

/*
 * The inline completion (the Tab affordance): a ghost of the top suggested
 * search, drawn over the input's own text. The typed prefix is rendered in
 * `transparent` rather than skipped, because its WIDTH is what puts the
 * remainder under the caret — the shopper's real text shows through it.
 *
 * Every typographic property is copied off the input's computed style by the
 * script; nothing here may set one, or the ghost drifts on any themed box.
 * What this rule owns is the box: the same border widths (transparent, so the
 * content box lands where the input's does), the overflow clip, and
 * `pointer-events: none` — a shopper clicking their own text must reach the
 * input under it.
 */
.maswcas-search__ghost {
	/* Absolute, not fixed: the script parks it in the input's own offset
	   parent and calibrates the coordinates, so it tracks the input through
	   every scroll with no listener of its own. Fixed would need one, and
	   would drift a frame behind on every scroll burst. */
	position: absolute;
	z-index: var( --maswcas-z, 100000 );
	display: flex;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
	white-space: pre;
	pointer-events: none;
	border-style: solid;
	border-color: transparent;
	background: none;
}

.maswcas-search__ghost[hidden] {
	display: none;
}

.maswcas-search__ghost-typed {
	color: transparent;
}

.maswcas-search__ghost-rest {
	opacity: 0.45;
}

/* The `tab` key cap. Sized off the ghost's inherited font so it tracks a
   themed input, and `em` throughout for the same reason. */
.maswcas-search__ghost-key {
	flex: 0 0 auto;
	margin-inline-start: 0.6em;
	padding: 0.05em 0.4em;
	border: 1px solid currentColor;
	border-radius: 0.25em;
	font-size: 0.7em;
	line-height: 1.5;
	opacity: 0.5;
}

/* ======================================================================
 * The SPLIT design ("Showroom" — Dropdown\Patterns), the merchant's choice
 * of shape for the WHOLE dropdown, picked in the Site Editor's Design panel
 * (docs/dropdown-restyle.md § the panel gains a second design).
 *
 * Two columns and a footer, in BOTH of the panel's states. Before typing: the
 * shopper's recent searches and the store's trending ones in a tinted rail on
 * the reading-start side, a grid of the store's popular products beside them
 * under a "Popular right now" eyebrow, and a tip line across both. While
 * searching: suggested searches, refinement chips, categories and brands in
 * the rail, the product rows beside them under a "Products" eyebrow with the
 * result count, and the see-all footer across both with a keyboard legend and
 * the StoreBolt mark. The stacked design is everything above this comment; a
 * panel without the modifier never reaches a rule below it.
 *
 * **It is a CSS grid over the SAME markup, in the SAME order, and that is
 * the whole design.** `search-box.js` stamps `--split` on the panel; nothing
 * is moved in the DOM. The wrappers between the panel and its sections (the
 * root block's div, the two view divs, the slot, the attach panel's body)
 * become `display: contents`, so every section is a grid item of the panel
 * itself, and each one is placed by COLUMN only — the rail's sections
 * auto-flow down column 1 in document order, the main column's element (the
 * product list, the popular grid, the empty state, the skeleton) spans every
 * row column 1 can take, the footers take the last row across both. So DOM
 * order is still the arrow-key order (stampOptions collects in document
 * order), the visual order is still that order read column by column, and
 * setActive()'s purely vertical scroll math still holds because the panel is
 * still the one scroller. The constraints slice 1 of the design record wrote
 * against wrapping grids are the ones this keeps: no `order`, no reversal, no
 * sideways scroller.
 *
 * **The same rules dress the Site Editor canvas.** Every selector here is
 * written against `:is( .maswcas-search__results--split,
 * :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split )` — the
 * storefront panel, or the part's root block inside the editor's iframe. The
 * root block prints `--split` from its `pattern` attribute, so the canvas is
 * the grid too, with the few things only the canvas has (both views on screen
 * at once, the editor's own labels and appenders) placed by
 * `assets/css/dropdown-editor.css`. `:where()` keeps the editor arm's
 * specificity below the storefront arm's, so the block's cascade is
 * byte-identical to what it was with one arm.
 *
 * Four things to know before editing it:
 *
 *   - **The rail is a background gradient on the panel, NOT a grid item.**
 *     Sections are grid items in cells, so a background on each would stop
 *     at each; and a pseudo-element placed down column 1 to paint behind
 *     them OCCUPIES those cells — auto-placement never shares a cell with an
 *     explicitly placed item, so every sidebar section was pushed into
 *     implicit rows under the footer (measured, not reasoned: the first cut
 *     did exactly that). A left-to-right gradient stopping at the first
 *     column's edge paints the same stripe and occupies nothing, which is
 *     why the columns are percentages rather than `fr`s — the stop and the
 *     column line have to be the same number. The footers paint their own
 *     surface over the stripe.
 *   - **The rows are explicit.** Row 1 is the progress bar's, rows 2–9 are
 *     eight slots for the rail's sections (completions, recent, trending,
 *     chips, categories, brands — and, on the canvas, the editor's two
 *     labels), row 10 is `1fr` and absorbs a main column taller than the
 *     rail, rows 11–12 are spare (the canvas stacks its second main element
 *     and the empty state there), row 13 is the footers'. The rail's sections
 *     are placed by column only and auto-flow down those rows in document
 *     order.
 *   - **`::before` exists in every state here, not only while waiting.** The
 *     progress bar is `.maswcas-search__results--waiting::before`, a grid
 *     item once the panel is a grid, and if it appeared only while waiting
 *     the sidebar's first section would auto-place into row 1 and then be
 *     pushed down 2px on every request. So the pseudo-element is always
 *     there at row 1, empty and zero-height until the waiting rule dresses
 *     it. This block sets its placement and `content` only — never its
 *     height or position, which stay the waiting rule's to declare.
 *   - **A panel with nothing in its rail is one column** (the
 *     `--has-rail` class the script maintains in open()): a first-time
 *     shopper on a store with no trending terms yet would otherwise get an
 *     empty grey column beside the answers. A search with no chips,
 *     categories or brands fills the rail with the recent and trending
 *     lists first (showFocusRail), so it only falls back when those are
 *     empty too.
 *
 * Padding for the panel's lists lives in the armour ladder near the top of
 * this file, at (0,2,1) with `!important`; the rungs below are (0,3,1) and
 * later, so they win on both counts. A padding for a list or row declared
 * here without `!important` would simply lose to the floor.
 * ====================================================================== */

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) {
	display: grid;
	grid-template-columns: 30% 70%;
	grid-template-rows: auto repeat( 8, auto ) minmax( 0, 1fr ) auto auto auto;
	/* The rail: see the header comment. The colour stays pinned to the
	   surface it sits on, as the palette rule requires. */
	background-color: var( --maswcas-surface );
	background-image: linear-gradient(
		to right,
		var( --maswcas-rail ),
		var( --maswcas-rail ) 30%,
		transparent 30%
	);
}

/* Nothing to put in the rail: one column (see the header comment), in
   either state. The storefront panel only — the canvas always has sections
   to show. A search's rail is filled with the recent and trending lists
   whenever nothing refines it (showFocusRail in search-box.js), so a search
   lands here only when the shopper has no history AND the store has no
   trending terms — and then an empty grey column beside the answer is the
   one thing the rail must never be. The sections keep their split dress
   in block flow, so the answer stays at the rows' size, not the page's. */
.maswcas-search__results--split:not( .maswcas-search__results--has-rail ) {
	display: block;
	background-image: none;
}

/* The wrappers between the panel and its sections step aside so the
   sections are the grid items: the templated panel's slot, the attach
   panel's body, the root block's element under either (the REST response
   arrives wrapped in it on every vintage), and the two views. `:not([hidden])`
   on the views is load-bearing: `display: contents` is an author rule and
   would beat the hidden attribute's UA rule, un-hiding a suggestions view
   the script had put away. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) > .maswcas-search__slot,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) > .maswcas-search__results-body,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__dropdown,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__view:not( [hidden] ) {
	display: contents;
}

/* Row 1: the progress bar's slot (see the header comment). */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split )::before {
	content: "";
	grid-column: 1 / -1;
	grid-row: 1;
}


/*
 * The sidebar: every section that is a list of things to REFINE or
 * REDIRECT the search — suggested searches, chips, categories, brands (and
 * recent/trending, which are hidden while a search shows but placed here
 * for the one-column fallback's sake). Column 1, auto row, so they stack in
 * document order. The group hairlines come off: the rail's whitespace does
 * the separating, and a line across a tinted column reads as a table.
 */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__completions,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__history,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__trending,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__facets,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__terms {
	grid-column: 1;
	min-width: 0;
	border-top: 0;
}

/*
 * The main column: whichever of these the panel holds. Before typing it is
 * the popular grid; while searching, `__list` (the bare list a stacked row
 * renders — a saved part, or the Cascade row viewed on this grid),
 * `__products` (the headed group the Showroom row renders), `__empty` or the
 * in-flight `__skeleton`. Spanning rows 2–10 is what lets the rail's sections
 * stack beside a column that is taller or shorter than they are.
 */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__list,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__products,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__empty,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__skeleton {
	grid-column: 2;
	grid-row: 2 / 11;
	min-width: 0;
	border-top: 0;
}

/* The `hidden` trap, again: the popular grid and the tip are hidden the
   moment a prefix is typed, and a placement rule must not un-hide them. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular[hidden],
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__tip[hidden] {
	display: none;
}

/* The footers — the see-all row while searching, the tip line before —
   across both columns on the last row, on their own surface so the rail's
   stripe stops above them. The border-top stays: that line is the one
   horizontal rule this design draws. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__all,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__tip {
	grid-column: 1 / -1;
	grid-row: 13;
	background: var( --maswcas-surface );
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__all:hover,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__all:focus {
	background: var( --maswcas-hover );
}

/* ----------------------------------------------------------------------
 * The rail's type and rows
 * ------------------------------------------------------------------- */

/*
 * Section eyebrows: small caps, tracked. The stacked pattern retired the
 * small-caps eyebrow in favour of a sentence-case label; this pattern is a
 * different panel with its own type scale, and inside it every section —
 * the sidebar's three and the product column's "Products" — wears this one
 * treatment, which is the rule the layout setting learned the hard way.
 */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__terms-title,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__history-title,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__trending-title {
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__terms-head,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__history-head,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__trending-head {
	padding: 18px 18px 8px;
}

/* The lists sit inset from the rail's edge so the rows can be cards. Armour
   ladder rungs: (0,3,1) and later, so they beat the floor. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) ul.maswcas-search__completion-list,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) ul.maswcas-search__terms-list,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) ul.maswcas-search__history-list,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) ul.maswcas-search__trending-list {
	padding: 0 10px 14px !important;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) li.maswcas-search__completion-item,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) li.maswcas-search__history-item,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__trending:not( .maswcas-search__trending--pills ) li.maswcas-search__trending-item {
	padding-inline-start: 10px !important;
}

/* A row in the rail is a card on hover and when the keyboard is on it:
   white on the tinted rail, rounded. `overflow: hidden` clips the term's
   own active tint (below) to the card's corners. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__completion-item,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__history-item,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__trending-item,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__term-item {
	border-radius: 10px;
	overflow: hidden;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__completion-item:hover,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__history-item:hover,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__trending-item:hover,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__term-item:hover,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__term-item:focus-within {
	background: var( --maswcas-surface );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.06 ), 0 0 0 1px rgba( 0, 0, 0, 0.04 );
}

/*
 * The keyboard-active row. The base indicator stays the term's own tint
 * (every browser), restated here in the accent so it reads against the
 * rail; the `:has()` rule lifts the whole card, and remains an enhancement
 * — `:has()` postdates this file's browser baseline and must never be the
 * only indicator.
 */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__trending-term.maswcas-search__option--active,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__history-term.maswcas-search__option--active {
	background-color: var( --maswcas-accent-soft );
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__completion-item:has( .maswcas-search__option--active ),
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__history-item:has( .maswcas-search__option--active ),
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__trending-item:has( .maswcas-search__option--active ) {
	background: var( --maswcas-accent-soft );
	box-shadow: 0 0 0 1px var( --maswcas-accent );
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__term-suggestion.maswcas-search__option--active {
	background: var( --maswcas-accent-soft );
	box-shadow: inset 0 0 0 1px var( --maswcas-accent );
}

/* A taxonomy row is two lines here: the term's name, then where it sits and
   how much it holds. The anchor keeps its gutter and its glyph slot; the
   label stops ellipsising on one line and stacks instead. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__term-suggestion {
	align-items: flex-start;
	padding: 10px;
	border-radius: 10px;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__term-icon {
	margin-top: 0.15em;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__term-label {
	white-space: normal;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__term-name {
	display: block;
	font-weight: 600;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__term-crumb,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__term-count {
	display: inline;
	font-size: 0.85em;
	opacity: 0.65;
}

/* "in Footwear · 48 products" — the separator is drawn, not printed, so the
   count's own text stays exactly what the block emitted. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__term-crumb + .maswcas-search__term-count::before {
	content: "· ";
}

/* Chips in the rail: their own inset, and no card behaviour. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__facets {
	padding: 14px 18px 4px;
}

/* ----------------------------------------------------------------------
 * The product column
 * ------------------------------------------------------------------- */

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__products {
	padding: 0 12px 10px;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__products > .maswcas-search__terms-head {
	padding: 18px 10px 10px;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__products-count {
	font-size: 0.85em;
	font-weight: 500;
	opacity: 0.65;
}

/* A bare list (no heading) still gets the column's inset. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) > .maswcas-search__slot ul.maswcas-search__list,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__view--results > ul.maswcas-search__list,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) > .maswcas-search__results-body > ul.maswcas-search__list {
	padding: 12px !important;
}

/*
 * The row: thumbnail, the stacked body, then the price pushed to the far
 * end. Rounded, with a transparent inset ring that the active state fills —
 * so the outline never resizes the row. The tint is a soft accent rather
 * than the panel's grey `--maswcas-active`, because this row is the panel's
 * answer and the reference draws it as the one coloured thing on screen.
 */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__link {
	gap: 16px;
	padding: 12px;
	border-radius: 12px;
	box-shadow: inset 0 0 0 2px transparent;
}

/*
 * The placeholder rows that hold this column while the real rows are in
 * flight, at THIS row's metrics rather than the stacked row's — the point of
 * a skeleton is that nothing moves when the answer lands. The list gets the
 * column's inset like the bare list above.
 */
/* Over the floor (0,2,1) like the bare list above; the canvas never holds
   these rows, so the storefront selector alone. */
.maswcas-search__results.maswcas-search__results--split ul.maswcas-search__skeleton {
	padding: 12px !important;
}

.maswcas-search__results.maswcas-search__results--split .maswcas-search__skeleton > .maswcas-search__skeleton-row {
	gap: 16px;
	padding: 12px !important;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__skeleton-thumb {
	width: 64px;
	height: 64px;
	border-radius: 12px;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__link.maswcas-search__option--active {
	background: var( --maswcas-accent-soft );
	box-shadow: inset 0 0 0 2px var( --maswcas-accent );
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__thumb {
	flex: 0 0 auto;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__thumb img {
	border-radius: 12px;
	background: var( --maswcas-sunken );
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body {
	display: block;
	flex: 1 1 auto;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__title {
	display: block;
	margin-bottom: 3px;
	font-size: 1.05em;
	font-weight: 500;
}

/* The match in a TITLE is the highlighter pen here — the reference's yellow
   — while the sidebar's completions and the SKU keep the stacked pattern's
   weight-only mark. Fill and ink are one pinned pair. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__title .maswcas-search__mark {
	padding: 0 0.15em;
	border-radius: 3px;
	background: var( --maswcas-mark-fill );
	color: var( --maswcas-mark-ink );
	font-weight: inherit;
}

/*
 * The meta line: SKU, matched variation, availability, rating — whichever of
 * them the row's arrangement holds — on one line, dot-separated. They are
 * siblings in the body, so the separator is drawn before each one that
 * follows another; a block that printed nothing (an in-stock row with
 * `hideInStock`) is simply not a sibling.
 */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__sku,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__attributes,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__stock,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__rating {
	display: inline;
	font-size: 0.9em;
	opacity: 0.7;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__sku + .maswcas-search__attributes::before,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__sku + .maswcas-search__stock::before,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__sku + .maswcas-search__rating::before,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__attributes + .maswcas-search__sku::before,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__attributes + .maswcas-search__stock::before,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__attributes + .maswcas-search__rating::before,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__stock + .maswcas-search__sku::before,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__stock + .maswcas-search__attributes::before,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__stock + .maswcas-search__rating::before,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__rating + .maswcas-search__sku::before,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__rating + .maswcas-search__attributes::before,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__body > .maswcas-search__rating + .maswcas-search__stock::before {
	content: " · ";
}

/* The two availability states that must READ keep their colour and their
   full strength over the meta line's dimming. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__stock--out-of-stock,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__stock--available-on-backorder {
	opacity: 1;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__rating .star-rating {
	display: inline-block;
	vertical-align: middle;
}

/*
 * The price column. Only a price that is a DIRECT child of the row reaches
 * the far end (the split part's default puts it there); a price left inside
 * the details block, as a merchant's saved arrangement may have it, stays
 * in the body like any other line. WooCommerce's sale markup is a `<del>`
 * then an `<ins>`; the reference stacks the current price over the struck
 * one, so the two are a column with the struck price sent below — `order`
 * inside a price is fine, the rule against it is about OPTIONS.
 */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__link > .maswcas-search__price {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	margin-inline-start: auto;
	font-size: 1.05em;
	font-weight: 600;
	text-align: end;
	white-space: nowrap;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__link > .maswcas-search__price del {
	order: 2;
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.55;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__link > .maswcas-search__price ins {
	text-decoration: none;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__empty {
	padding: 24px 22px;
	/* The row's size, not the page's: the theme's body copy is the one
	   thing in this column that would otherwise be twice the rows' type. */
	font-size: 1.05em;
}

/* ----------------------------------------------------------------------
 * Before typing: the rail's "Clear", the popular grid, the tip line
 * ------------------------------------------------------------------- */

/*
 * "Clear" in the accent, like the footer's link. The button is armoured near
 * the top of this file (`!important` throughout, the one block that spends
 * it), so a design that wants it coloured has to say so at the same strength
 * — the armour's own rule is that a merchant's important declaration at equal
 * or greater specificity wins, and this is that mechanism used by us.
 */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__history-clear {
	color: var( --maswcas-accent ) !important;
	font-size: 0.9em !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	opacity: 1 !important;
}

/* The popular grid: the main column before typing. Cards in a responsive
   grid — four across at the split floor — each a picture with a corner
   badge, the name, the price. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular {
	padding: 0 12px 12px;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular > .maswcas-search__terms-head {
	padding: 18px 10px 14px;
}

/* "View all" — a link to the shop at the head's far end, in the accent, and
   an option like every other pickable thing here. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: auto;
	color: var( --maswcas-accent );
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-all:hover,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-all.maswcas-search__option--active {
	text-decoration: underline;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) ul.maswcas-search__popular-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) );
	gap: 12px;
	/* Armour ladder: (0,3,1), beats the floor. */
	padding: 0 10px !important;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-link {
	display: block;
	padding: 6px;
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
	box-shadow: inset 0 0 0 2px transparent;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-link:hover,
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-link:focus {
	background: var( --maswcas-hover-soft );
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-link.maswcas-search__option--active {
	background: var( --maswcas-accent-soft );
	box-shadow: inset 0 0 0 2px var( --maswcas-accent );
}

/* The picture: a square, the sunken tint behind it while it loads, the
   badge pinned to its corner. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	margin-bottom: 10px;
	border-radius: 12px;
	background: var( --maswcas-sunken );
	overflow: hidden;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-badge {
	position: absolute;
	top: 8px;
	inset-inline-start: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.5;
}

/* A sale wears the highlighter's pair; a new product wears the accent's. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-badge--sale {
	background: var( --maswcas-mark-fill );
	color: var( --maswcas-mark-ink );
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-badge--new {
	background: var( --maswcas-accent );
	color: var( --maswcas-accent-ink );
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-title {
	display: block;
	font-weight: 500;
	line-height: 1.3;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-price {
	display: block;
	margin-top: 4px;
	font-weight: 600;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-price del {
	margin-inline-end: 4px;
	font-weight: 400;
	opacity: 0.55;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__popular-price ins {
	text-decoration: none;
}

/* The tip line: the focus panel's footer. Muted text, the mark at the far
   end; the see-all footer's shape without its link. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__tip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var( --maswcas-line );
	color: var( --maswcas-ink-muted );
	font-size: 0.9em;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__tip .maswcas-search__all-brand {
	margin-inline-start: auto;
}

/* ----------------------------------------------------------------------
 * The footer
 * ------------------------------------------------------------------- */

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__all {
	gap: 10px;
	padding: 14px 20px;
	color: var( --maswcas-accent );
	font-weight: 600;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__all-icon {
	opacity: 0.8;
}

/* The reference legend replaces "Press ENTER": the same promise, made once
   for every key the panel answers to, and true whether or not the keyboard
   is walking — so the walking rule has nothing to hide here. */
:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__all-hint {
	display: none;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__all-keys {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 14px;
	margin-inline-start: auto;
	color: var( --maswcas-ink-muted );
	font-size: 0.85em;
	font-weight: 400;
	white-space: nowrap;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__all-cap {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var( --maswcas-chip-edge );
	border-radius: 5px;
	font-size: 0.9em;
	line-height: 1.4;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__all-brand {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
	margin-inline-start: 18px;
	color: var( --maswcas-ink-muted );
	font-size: 0.85em;
	font-weight: 600;
	white-space: nowrap;
}

:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__all-bolt {
	color: #f5a524;
}

/* On a touch device the legend describes keys that are not there; the
   mark alone stays, at the far end. */
@media ( hover: none ) {

	:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__all-brand {
		margin-inline-start: auto;
	}
}

/* ----------------------------------------------------------------------
 * One column again below the width two need
 * ------------------------------------------------------------------- */

/*
 * The positioners cap the panel at the viewport, so on a phone the split
 * pattern's floor is never reached and two columns would be two slivers.
 * Back to block flow: the sections keep their split-pattern dress (the
 * eyebrows, the cards, the price column, the footer) and stack in document
 * order, which is the stacked pattern's order too. The wrappers stay
 * `display: contents`, which is inert in block flow.
 */
@media ( max-width: 719px ) {

	:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) {
		display: block;
		background-image: none;
	}

	:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split )::before {
		content: none;
	}

	/* The progress bar must keep its `content` while waiting; the rule above
	   removed its empty slot, not the bar. */
	:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ).maswcas-search__results--waiting::before {
		content: "";
	}

	:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__completions,
	:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__history,
	:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__trending,
	:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__facets,
	:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__terms {
		background: var( --maswcas-rail );
	}

	:is( .maswcas-search__results--split, :where( .editor-styles-wrapper ) .maswcas-search__dropdown--split ) .maswcas-search__products {
		border-top: 1px solid var( --maswcas-line );
	}
}