/**
 * Search Suggestions — the list that hangs under the catalog's product search box.
 *
 * The panel is the one the location field opens, with this field's own vocabulary: the same
 * two-layer shadow, so the two search boxes in this catalog offer their suggestions in one shape
 * rather than two. Its ground is the box's and so are its 8px corners, and the two state one fill
 * between them - #303030, asked for on this search and written out below rather than retuned in the
 * palette, which would have carried every other chip in the dashboard with it. Everything else comes
 * from the palette through the tokens below, so a change to Global Styles moves this with the rest
 * instead of leaving a white panel behind.
 *
 * Two things are deliberately not the location panel's:
 *
 * 1. The list is anchored to the field's *box*, not to the form. The box is the plate the block
 *    sits in — the grey area the search field and its magnifier share — so the panel starts
 *    under the rounded plate the visitor actually sees, rather than a few pixels up inside its
 *    lower edge. The script marks whichever element that turned out to be with the attribute
 *    below, which is also what makes it the panel's containing block.
 * 2. Nothing is added below the field. The location field's note sits under its box and pushes
 *    what follows down when it appears, which is nothing in a sidebar; here the field stands in
 *    the catalog's header, so a line that came and went would move the header. The note is a line
 *    inside the panel instead, under its rows, where it costs the page no height.
 */

/* The field's box, marked by the script with the plugin's root class: the panel is positioned
   against it. */
.woo-search-suggestions {
	position: relative;
}

/* === the field, in the filter's dress === */

/*
 * The catalog asks the same question twice: the product search box here in the header, and the
 * location field in the filter panel. This box wears the filter's own field, so the two read as
 * one control in two places - the 8px-cornered plate the filter's controls are drawn on, filled
 * with the filter's chip fill, everything inside it in the filter's ink at the filter's weight,
 * and the text set in the filter's type rather than the site's display face. The one measure not
 * taken from the filter is the size of the words: they stand at 17px against the filter's own 16px,
 * a step up asked for on this box, which is the field a visitor types a product name into from
 * across the page rather than a filter they lean in to.
 *
 * Every declaration below carries !important, a reason each time: the plate's fill arrives as a
 * palette class, which WordPress prints with !important; the corners arrive as inline styles on
 * the plate, the input and the submit button, which only !important reaches; and the type
 * arrives as preset classes - the medium size and the theme's font family - printed the same
 * way. These are all stronger than any selector, so nothing here is a fight that could be won
 * more honestly. The wrapper that fills the box is painted by a rule of its own, met here in
 * kind.
 *
 * The plate's own rule names two classes for that reason, and it is worth knowing why: the
 * palette class and a bare .woo-search-suggestions tie on both weight and specificity, and a tie
 * is settled by order - the preset sheet is printed later in the page than a plugin's, so the
 * preset wins and the plate stays grey. Adding the block's own class takes the selector to two
 * classes, which outranks the preset on specificity and leaves order out of it.
 *
 * The ink reads the palette entry the filter's dark theme is filed under, so the two controls keep
 * one voice. The fill is the palette's control step now, on the reader's newest ask: this box, the filter
 * panel's fields, selects, pills and buttons, the cards' buttons and tag links and the drawers' rows all
 * read that one entry, which the reader retuned to #292929 in the editor - so a retune of the lot is one
 * entry there rather than a pass through these sheets.
 *
 * The figure used to be written out here for a reason worth keeping on the record: the entry this box first
 * read, filter-dark-chip-bg at #2c3138, is also the fill behind the dashboard's chips - the admin menu, the
 * inbox, the cart drawer, the vendor rows, the sticky sidebar, the collection chips and the add-product tile
 * - so retuning that one carried every one of them. The control step is the entry this box means, and it can
 * be named without dragging the chips along.
 */
.wp-block-group.woo-search-suggestions {
	background-color: var(--wp--preset--color--control, #292929) !important;
	border-radius: 8px !important;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * The box answers the pointer with a border now, and with nothing else: the ring below is drawn in
 * #303030, the figure this box used to warm to, and the fill itself is left where it rests. No corner
 * moves and the ink holds where it is. The reader asked for both halves in one line - the border takes
 * the colour the fill wore under the pointer, and the fill's own hover colour comes out - so the
 * pointer's signal is an edge rather than a plate.
 *
 * The ring is drawn with an inset shadow rather than a border, so the box keeps its own figures: a
 * border would add its pixel to the plate's box and lift the field in the header by two, while a shadow
 * is paint alone. 1.5px is the width this dashboard's rings are cut at - the chips' pills, the cart
 * drawer's count and the inbox's summaries all wear it - and the corners follow the plate's own 8px.
 * The colour is written out rather than read from the palette: the hover entry, control-hover, still
 * says #353535, so naming it here would draw this edge a figure warmer than the rest of the family
 * takes, and no entry holds #303030.
 *
 * The fill this rule used to paint is on the record here. #353535 was the figure asked for on this
 * box in that round, a step up out of the fill above it rather than the step down #202020 was: five
 * points a channel, the same neutral grey, brighter. Being a fill of its own, the plate painted it
 * opaque; nothing was layered and nothing showed through. The figure the box was on when the ask came
 * - #303030, the one the reader gave every control in this family - was written out for the reason
 * above, and it leaves #202020, #454545, #484850 and before them the filter's #353a42 behind. The box
 * rests on the palette's control step, #292929, as it did before; only the figure it warmed to under
 * the pointer is gone, and it is the edge that wears it now.
 *
 * The marks have stood on the plate's own figures in turn. They first filled with #353535 under the
 * pointer, level with the plate beneath them; they were then asked a step further, onto #404040, so the
 * mark stood above the plate rather than level with it; then back onto #353535, which is the palette's
 * control-hover, the entry the page's other controls are dressed from; then onto #404040 again, on the ask
 * that all three take that step together; then below the plate, onto #202020, the palette's surface-raised;
 * then onto #303030, where they stood level with a plate that wore it too. That last pairing is gone: the
 * marks keep #303030, and the plate they sit on no longer takes it, so a hovered mark is the one coloured
 * figure under the pointer while the edge around it is drawn clear of it. The cross that empties the field
 * followed the marks onto that figure and no longer keeps the tenth of white it shared with the filter's
 * location boxes. This figure was asked for on the box first.
 */
.wp-block-group.woo-search-suggestions:hover {
	box-shadow: inset 0 0 0 1.5px #303030 !important;
}

/*
 * One hover at a time was this rule's work, and the fills it was written against have gone. The magnifier
 * sits inside the box, so a pointer on the icon is a pointer on the box too; while the plate lifted to the
 * same #303030 the mark lifted to, the two were one value and the mark vanished into the plate, so the
 * plate was put back to its rest fill under the pointer on a mark and the icon's warm was the one that
 * showed. The plate no longer lifts at all: its signal is an edge, drawn at the box's rim while the mark
 * sits at its centre, and the mark's own #303030 stands out of the #292929 the box rests on by itself. So
 * the rule has no warm left to withhold. What it does now is state the fill the box rests on beside the
 * rule that draws the edge, which is worth keeping: a reset that names the rest fill rather than a
 * condition that withholds a warm cannot drift from the box's own rest rule, and this is the second
 * statement of that figure here.
 *
 * :has() is a selector, not a feature of this page - the sticky sidebar's own rules have leaned on
 * it since they were written, and those rules are running here now. Where it is not understood the
 * rule is dropped, and the box is the same either way now that the plate does not warm.
 *
 * All three of the box's marks are named: the two the script hangs at the end of the field - the cross
 * that empties it, then the microphone that fills it - answer the pointer exactly as the magnifier
 * does, and each of them still has the rest fill stated under it.
 */
.wp-block-group.woo-search-suggestions:has(.wp-block-search__button:hover),
.wp-block-group.woo-search-suggestions:has(.woo-search-suggestions__voice:hover),
.wp-block-group.woo-search-suggestions:has(.woo-search-suggestions__clear:hover) {
	background-color: var(--wp--preset--color--control, #292929) !important;
}

/*
 * The box holds two surfaces, not one: the plate above, and the wrapper WordPress puts inside it
 * to lay the field and the magnifier out. The wrapper is painted #e8e8e8 with 50px corners and
 * covers the plate exactly - measured, same rectangle - so a fill on the plate is never seen and
 * the box had to be read as whatever the wrapper was. It is told to paint nothing and its corners
 * are brought onto the plate's 8px, so the plate supplies both the fill and the shape and the box
 * is one surface rather than two stacked on top of each other.
 *
 * Its left padding is the inset the magnifier sits at, and it is set to the 8px the location field's
 * own buttons are placed at - `left: 8px`, in the field this box leads into. It was 14px, which put
 * the mark about 22px from the plate's edge against the 13.5px the filter's magnifier sits at; at
 * 8px the mark comes to about 16.5px, the difference being the air this icon keeps inside its own
 * box. A padding rather than a margin on the button, because the button carries no left margin - its
 * one margin is on the right - and the only margin that would pull it in from here is a negative
 * one, a value that means "reach back out of the box I am in" and would take the button's box outside
 * the padding it is meant to sit inside. The field's text moves in with the icon, by the same 6px,
 * since the two share the row; the plate and the wrapper's right padding are left alone.
 */
.woo-search-suggestions .wp-block-search__inside-wrapper {
	background-color: transparent !important;
	border-radius: 8px !important;
	padding-left: 8px !important;
}

/* A form control does not inherit the page's font: the browser hands a button, a field and a select its
   own face - Arial here - unless the author names one. The search's voice button was the node left in it,
   since the two rules below name the field and the magnifier one at a time and the button is neither. The
   whole search is named instead, so the panel, the list and the items the script builds after the field
   are covered too rather than by another rule apiece, and so the next node to arrive is already right.
   The preset leads and the stack stays behind it, as in the filter's sheet, so the search follows the same
   switch the Site Editor shows for the blocks beside it. */
.woo-search-suggestions,
.woo-search-suggestions * {
	font-family: var(--wp--preset--font-family--ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif) !important;
}

.woo-search-suggestions .wp-block-search__input,
.woo-search-suggestions .wp-block-search__button {
	border-radius: 8px !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
	font-size: 17px !important;
	font-weight: 500;
}

/* The field's typed text and the magnifier that opens it hold one ink: the palette's filter-dark-text,
   #e4e6ea. The placeholder stood in that trio until it was asked onto the grey the cards' brand and
   location wear - #888888, the palette's ink-muted - so it has a colour of its own in the rule below,
   and this one is left to the other two. */
.woo-search-suggestions .wp-block-search__input,
.woo-search-suggestions .wp-block-search__button {
	color: var(--wp--preset--color--filter-dark-text, #e4e6ea) !important;
}

/*
 * The magnifier answers the pointer with a fill of its own: #303030 spreads under the icon, the ink holds
 * where it is, and it comes and goes over the filter's own 150ms. It has been five figures in this field's
 * history. It began as a tenth of white, the veil the location field's buttons wear; then it took the
 * plate's own #353535, which made the mark and the plate under it one value and left the plate to be held
 * back for the icon to show at all; then a step above the plate, onto #404040; then back onto the
 * control-hover token, which is spelled #353535, so that the field's three marks read one declaration
 * between them; then that step above the plate again, on the ask that the three marks take it together;
 * and it is now asked the other way - onto #202020, below the plate rather than above it, so the mark
 * sinks under the pointer instead of rising; and finally onto #303030, the figure the plate under it wore
 * under the pointer when it still answered the pointer with a fill. The cross and the microphone carry the
 * same figure, and the
 * listening state further down follows it, since that state exists only to keep this fill under the finger
 * that opens it.
 *
 * #303030 is the figure the plate under these marks took when the pointer reached the plate itself, and it
 * is the figure of the edge that answers the pointer there now. So a hovered mark and the plate's own rim
 * wear one value, set on either side of the mark, and the reset rule further up no longer has a warm to keep
 * off the plate. No
 * palette entry holds that figure - control is #292929 and control-hover is #353535, with nothing between
 * them - so it is written out as a literal, as #404040 was while the marks stood above the plate. The ink
 * on it reads 10.6 to 1, up from the 8.3 it read on that step.
 * The corners stay at the field's 8px rather than the find buttons' 6px, since this button belongs to the
 * field and not to the panel, and the declaration is carried with !important as everything else in this
 * file is.
 */
.woo-search-suggestions .wp-block-search__button {
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woo-search-suggestions .wp-block-search__button:hover {
	background-color: #303030 !important;
}

/*
 * The placeholder is the brand/location grey: #888888, the palette's ink-muted, which is what
 * .woo-product-brand__value and .woo-product-location__value both compute to on the cards below the
 * box. It was filter-dark-text, one value shared with the typed text and the magnifier; it is a step
 * back from both now, and the location field in the sidebar is asked onto the same figure. The opacity
 * stays stated, because browsers fade a placeholder by default and this field does not fade it.
 *
 * Two other sheets name this same pseudo-element: .wc-blocks-pattern-header-minimal in
 * woo-header-search, which carries three classes and is enqueued after this one, and
 * .wp-block-search in woo-product-collection-style, which carries two. A block class is added here
 * to the front of the chain so this rule stands above the first on specificity rather than on load
 * order - three classes tied with it, and the later sheet took the tie. Both of those sheets are
 * asked onto the same ink as well, so the figure holds whichever rule reaches it.
 */
.woo-search-suggestions .wp-block-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--ink-muted, #888888) !important;
	opacity: 1;
}

/*
 * The magnifier's box, and the figure that has ridden on it: this mark is the panel's own row mark now.
 *
 * The reader's ask is that this field's magnifier be the magnifier the suggestion rows carry. That mark
 * is not a drawing of its own: the script builds it from core's own path, scaled 1.37 so that the glass
 * and handle come out to 20 of the 24 units and fill a 20px box the way the clock beside them fills its
 * own, and lays a quarter-unit stroke of the same ink over the fill, which brings the line to about 2.4
 * units - the weight the rows' clock is drawn at, so the column reads as one list rather than as two
 * kinds of row. At 20px that drawing stands about 17px of ink, which is the figure the script's own note
 * records for this field's mark as it was drawn before. So the two are one object seen twice now: the
 * drawing, the box, the weight and the ink all come from the row's, and nothing here is the row's only.
 *
 * The direction comes with it. Every mark this sheet has drawn in this field pointed its handle down and
 * to the left, which is why this svg wore `transform: scaleX(-1)` while it was the location field's line
 * drawing: that drawing is a circle at (11, 11) with a handle running the other way, so it had to be
 * turned. Core's path needs no turn; it already runs down and to the left, which is the direction the
 * rows show, so the style is gone and the markup stands as the rows draw it.
 *
 * The history is worth keeping, because three of these figures have been asked in opposite directions.
 * The mark was core's silhouette in whatever content box the icon's padding left; then the location
 * field's line drawing at 16.25px with 3.4 of the 24 units of line; then that same drawing at the
 * microphone's frame - the 34px box, a 4px inset, and 2 units of line - on the ask that the field's two
 * marks be one size and one weight. That round narrowed the button back to 34px with it, since the button
 * measures whatever its icon measures. This round answers a different ask and takes all three of those
 * figures back off: the box is the row icon's 20px, the inset is none at all, and the line is the 2.4
 * units the row's mark is stroked at.
 *
 * The fill is named here for the reason it was named before, in the other direction. The block's own rule
 * for an icon button - `.wp-block-search__button.has-icon svg { fill: currentColor }` - reaches this svg,
 * and while the mark was a line drawing that inherited fill painted its circle solid: the ring read as a
 * disc and the handle was lost against the disc's edge, so the declaration here was `fill: none`, with
 * the !important this sheet always needs against a rule of the same specificity. This drawing is a filled
 * path with a hairline of stroke over it, so the declaration now states the value the drawing wants
 * rather than the one it had to be defended from.
 *
 * The 20px box is the one figure here that has to be paired with core's floors, which is why min-height
 * and min-width are named again after a round without them: core floors every icon button's svg at 24px
 * of its own, and 24 stands above this box rather than below it, so the floor would win and the mark
 * would draw a fifth larger than the rows it is matching. The display is named for the case the button
 * stops being a flex box: core draws an icon button at line-height 0, and a mark riding that line box
 * would hang out of the bottom of its plate.
 *
 * !important as everywhere in this file: the size arrives from outside.
 */
.woo-search-suggestions .wp-block-search__button svg {
	box-sizing: border-box !important;
	display: block;
	fill: currentColor !important;
	height: 20px !important;
	min-height: 20px !important;
	min-width: 20px !important;
	padding: 0 !important;
	width: 20px !important;
}

/*
 * The button's own box: 34px square, the figure it has measured since the icon grew, so the plate and
 * the pointer's target are what they were.
 *
 * It was taken down to the location field's 28px, with that field's 6px corner and its 2px bottom inset,
 * on the reader's ask that the two controls be one rather than only their drawings. The reader has now
 * asked for the previous icon back - the drawing that looks like the location field's, at the box this
 * button has always worn - so that round's four figures come off together: the box returns to 34px, the
 * corner to the 8px a stylesheet already carried under this rule, the mark to the centre line it sits on
 * at rest, and the button to the transition it had before, which was none. What the earlier round bought
 * and this one keeps is the drawing itself, the location field's shape: that is the part the reader asked
 * for, and the rule above still draws it. The size it is drawn at has been asked up since then, to the
 * frame the voice mark on the row wears, so the 34px below is no longer the figure the mark hangs off - it
 * is the plate and the pointer's target, which happen to be what the mark measures.
 *
 * The 2px inset and the 0.15s fade are each one declaration here if the pair should answer the pointer
 * as one again without the box moving. They are the only two figures from that round that the mark's
 * look at rest does not depend on; the 28px plate and its 6px corner are the two that do.
 *
 * !important as everywhere in this file: the size arrives from outside. min-width and min-height are
 * named because the button carries no width or height of its own and measures whatever its icon measures,
 * so the two floors keep it at 34px whatever the mark inside it does.
 */
.woo-search-suggestions .wp-block-search__button.has-icon {
	height: 34px !important;
	min-height: 34px !important;
	min-width: 34px !important;
	width: 34px !important;
}

/*
 * The magnifier's handle was rounded here; the drawing carries the round itself now.
 *
 * The old mark was core's filled path, whose handle - `l-3.8 3.8 1.1 1.1 3.8-3.8` - ended in square
 * corners no attribute could round, so the round was drawn: the silhouette was stroked in its own ink,
 * and stroke-linejoin: round turned each corner where the bar's long edges met its end, at 1.55 units,
 * the bar's own width across. The reader has since asked that this mark look like the location field's,
 * and that drawing is stroked line art - `stroke-linecap: round` and `stroke-linejoin: round` on the svg
 * itself - so every end and every join of it is round before any stylesheet speaks. The stroke this rule
 * laid over the silhouette is not only unnecessary now, it would double the new drawing's own ink; it
 * went with the silhouette, and the ask it answered is carried by the mark's geometry instead.
 *
 * What is left of the mark's dress is its colour, from the button's own ink, and its size, above.
 */

/* === the voice mark === */

/*
 * The box's third mark, at the end of the field in front of the microphone: the cross that empties
 * it, standing where the filter's two location boxes keep theirs, inside the field and before the
 * mark that fills it.
 *
 * It is the microphone's twin in every measure but its drawing: the same 34px button over a 34px box,
 * the same 8px corner, the same ink read from the palette entry the field's own text reads, the same
 * 10px kept from the text on its left, and the same fill under the pointer - #303030, over the same 150ms.
 * The hover was the last measure to part them: this mark took a tenth of white until the reader asked for
 * the microphone's own fill, and the pair answer the pointer alike. The fill itself has moved four times
 * since, and it moved on all three of the field's marks at once: it stood on the control-hover token,
 * which is spelled #353535; then a step above the plate, onto #404040; then below it, onto the palette's
 * surface-raised; and it now takes #303030, the figure the plate itself wears under the pointer, this
 * cross included.
 * Its glyph is the filter's cross, so the marks across both boxes are one drawing; only the stroke
 * differs, 2 here against the filter's 3, because the drawing is this box's 27px against that one's 18.
 *
 * It is not drawn over an empty field, and hiding it takes both halves: the script withholds it by
 * attribute, and the rule below says what that means for a mark laid out as a flex item - the
 * browser's own [hidden] loses to the display given here, so the state has to be stated.
 */
.woo-search-suggestions .woo-search-suggestions__clear {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 8px !important;
	color: var(--wp--preset--color--filter-dark-text, #e4e6ea) !important;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	line-height: 0;
	margin: 0 0 0 10px;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woo-search-suggestions .woo-search-suggestions__clear[hidden] {
	display: none !important;
}

.woo-search-suggestions .woo-search-suggestions__clear:hover {
	background-color: #303030 !important;
}

/*
 * The button's inside, and the only place the drawing's size is set.
 *
 * The button's box is 32 by 34, on the reader's ask that its width come down a step, and the drawing
 * inside it is 24 by 24 again: the padding is 4 either side, so the box's width leaves exactly the frame
 * the 24-unit viewBox is drawn in, one unit to the pixel, with the twelve units of ink at 12px and the
 * stroke at 2.2 exactly. The height is the figure that ask did not name, and it is also the one the row
 * reads from, so it stands: the button is a shade narrower than it is tall, and the row is unmoved by the
 * round. Before the width ask the box was 34 square with the same 24 by 24 drawing inside the same 5px.
 *
 * A 24-unit viewBox in the 24px the width and the padding leave is one unit to the pixel, so the cross's
 * twelve units of ink draw at 12px and its 2.2 of stroke at 2.2px - the drawing's own proportion, shown
 * whole. The width round above had taken that frame to 22, drawing the ink at 11px and the stroke at
 * about 2.02px, which is the consequence the paragraph below names; the reader has since asked this
 * mark's size up slightly, and the padding is the lever: two pixels given back inside the box, with the
 * button's 32 by 34 and the field's line exactly as they stand. The drawing centres in the two pixels of
 * slack the height leaves, one above and one below, as it did at 22 - the frame grew by the two the
 * width had taken and the slack is the same two - so it sits mid-row as before. The drawing grows inside
 * the button rather than the button growing, which is what keeps the line it shares with the microphone
 * on the field's row.
 *
 * One consequence the width ask did not name has since been answered, and the pair has parted again on
 * the microphone's own round: the field's two marks were brought to one size an earlier round, the width
 * ask drew their frames 24 against 22, and the microphone's padding - 4 in a 34px square, where this box
 * had 5 - draws its mark at 26. This round brings the cross back to its 24, so the pair reads 26 and 24.
 * Their boxes part in width, the microphone's 34px square against this 32 by 34, and their heights are
 * the same figure, which is the one the row reads: the field's line is unmoved and the pair stands level.
 * Squaring the boxes again is the microphone's width brought to 32 in its rule, which would draw its mark
 * at this one's 24; taking the cross the last two pixels to 26 is this padding at 3.
 *
 * The weights of the marks are stated here too, and for the same reason the size is: the drawing is
 * built by the script with its stroke as an attribute - 2 for this cross - and an attribute is a figure
 * about the drawing rather than the one that shows, so the figure that shows is written where the mark's
 * other measures are. The reader has asked this one up a tenth, to 2.2: a shade heavier under the finger
 * than it was, and a shade under the filter's 3 at 18px, so the two crosses stay one drawing at two sizes
 * rather than one weight drawn twice. A 2.2 in a 24-unit frame is 2.2 units of the drawing whatever box
 * shows it - 2.2px exactly in the 24px this box leaves now, where the 22px frame of the width round drew
 * it at about 2.02 - so what the figure holds at any size is the drawing's own proportion, which is why
 * neither round has moved it: the cross keeps the weight it was given relative to its own ink, and the
 * tenth it was given over the microphone shows whole again at this frame's 2.2px. Two units would draw
 * the 2.02 the 22px frame showed, if the tenth as it showed is wanted back. The microphone beside it is
 * unmoved at its own 2: the field's marks were brought to one weight on an earlier ask, and this one
 * parts the cross from the rest by a tenth, the cross above them. Nothing else about the cross moves -
 * its twelve units of ink, its 6 to 18, its rounded joins, its ink and its fill under the pointer all
 * stand as they were.
 */
.woo-search-suggestions .woo-search-suggestions__clear svg {
	box-sizing: border-box !important;
	display: block;
	height: 34px !important;
	padding: 4px !important;
	stroke-width: 2.2;
	width: 32px !important;
}

/*
 * The box's second mark, at the far end of the field: a microphone that fills the field by voice.
 * The block prints one button and it is the magnifier's submit, so this one is built and placed by
 * the script, and everything about how it looks is written here.
 *
 * It is the magnifier's twin in almost everything: the same 34px button over a 34px box, the same 8px
 * corners, the same ink read from the palette entry the field's own text reads, and the same fill under
 * the pointer - #303030, the figure the plate under them wears under the pointer, which the reader has now
 * asked onto all three of the field's marks, over the same 150ms. No palette entry holds it, control being
 * #292929 and control-hover #353535, so it is written out - as #404040 was while the marks stood on that.
 *
 * The two marks were twins in their drawing for one round, on the ask that the magnifier be made this
 * mark's size and weight: the magnifier's rule above repeated the three figures written here - the 34px
 * box, the 4px inset, and the 2 units of line the script draws this mark with. The reader has since asked
 * the magnifier onto the mark the panel's own rows carry, which is a filled path rather than a line, and
 * at a 20px box rather than this 34px one, so the pair parts again on all three: what the two still share
 * is the field, the ink, and the fill under the pointer. What was never a figure either way is the shape:
 * this mark's capsule and cradle span about 20 by 15 units where the magnifier now fills its own box.
 *
 * The inset has moved by half a pixel twice now: 4px, then 3.5px on the ask that the mark come up a very
 * slight step, and 4px again on the ask that its weight come down a very slight step - so the drawing is
 * back at the 26px it stood at before that round. The inset is the lever this sheet has always used for
 * this mark's weight, and half a pixel is as fine as it goes without landing on a whole step: 4.5px would
 * stand the drawing at 25px. The stroke the script draws the mark with is the other lever, and it is 2
 * units, which is what both marks are drawn at; the magnifier was briefly at 3.4 while it stood in the
 * location field's box, and that heavier figure came off with the box.
 *
 * That inset is one figure on all four sides rather than a pair, and it has to be. The drawing is
 * scaled to fit the box it is given and centred in it, so the smaller of the two measures is what sets
 * the mark, and a wider left and right alone would have moved nothing at all; the vertical value is
 * the one that carries a change. It is raised evenly for that reason, not because the sides are meant
 * to match the top and bottom.
 *
 * The 10px it keeps from the field on its left is not a copy either: it is the gap the magnifier keeps
 * on its right, so the two marks part the text by the same amount, one from either end. It is a button
 * rather than a picture of one, and it says what it does to a screen reader; no ring is suppressed on
 * it, since the magnifier beside it keeps the browser's own.
 *
 * The wrapper's right inset comes down from the 24px the header's sheet gives it to the 8px the
 * leading mark sits at, so the pair stand the same distance from the plate's edges and the field's
 * own text is left where it was. The rule asks for the button, so where the script has not run -
 * no speech recognition in the browser, or no script at all - there is no button, this finds
 * nothing, and the box is exactly the one the header drew.
 */
.wp-block-group.woo-search-suggestions .wp-block-search__inside-wrapper:has(> .woo-search-suggestions__voice) {
	padding-right: 8px !important;
}

.woo-search-suggestions .woo-search-suggestions__voice {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 8px !important;
	color: var(--wp--preset--color--filter-dark-text, #e4e6ea) !important;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	line-height: 0;
	margin: 0 0 0 10px;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * The magnifier's fill, stated rather than inherited: the two marks are separate controls and
 * neither rule reaches the other, so the figure stands in both places - and in the cross's rule above.
 */
.woo-search-suggestions .woo-search-suggestions__voice:hover {
	background-color: #303030 !important;
}

.woo-search-suggestions .woo-search-suggestions__voice svg {
	box-sizing: border-box !important;
	display: block;
	height: 34px !important;
	padding: 4px !important;
	width: 34px !important;
}

/*
 * Listening. The mark keeps the fill the pointer would give it - #303030, the same shape in the same place,
 * so nothing jumps - and the drawing breathes, which is the cue that says the microphone is open rather
 * than merely under a finger. The fill follows the hover's own figure rather than a value of its own, which
 * is the whole of what it is here for: a mark pressed and then listening would otherwise shift again under
 * the very finger that is holding it. The breath is what the reduced-motion block below takes away; the
 * fill stays, because a state is not an animation.
 */
.woo-search-suggestions .woo-search-suggestions__voice.is-listening {
	background-color: #303030 !important;
}

.woo-search-suggestions .woo-search-suggestions__voice.is-listening svg {
	animation: woo-search-suggestions-listen 1.6s ease-in-out infinite;
}

@keyframes woo-search-suggestions-listen {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.45;
	}
}

/* === suggestions === */

/*
 * Floats over the catalog below rather than pushing it down.
 *
 * It wears the box's own plate: the panel was drawn for a light theme - a white ground, a dark
 * hairline, a mid-grey row - and it opened under a field this site paints #303030, so the two halves
 * of one control did not look like each other. The ground is stated in the same #303030 the box's own
 * rule states, rather than read from the palette the box itself has left. The hairline is gone rather
 * than recoloured: the box wears no border. Its offset and its shadow are asked onto the location
 * dropdown's - 4px below the field rather than 6, and that dropdown's single 0 8px 24px at 0.3 rather
 * than the theme-aware pair that stood here - so the two panels hang off their fields the same way.
 *
 * The corner is the one figure the panel keeps of its own. It wore 10px, was taken to the box's 8px in
 * the move above, and is asked back to its 10px here. It used to take an 8px inset above and below the
 * list to keep the rows' square ends off that corner; that inset is gone, so the panel is held to its
 * own curve instead, and the first and last row are cut by it rather than stopping short of it - which
 * is what the location dropdown does with the rows it holds flush inside a panel of its own. The two
 * now differ in the figure alone, 10px against its 8px. The rows themselves stay the location's.
 *
 * The lower-left corner carries the same 10px as the other three. It stood square for a while: the
 * panel hangs off the plate rather than sitting inside it, so what stands behind its lower-left curve
 * is the page itself - #1a1a1a where the panel's own fill is #303030, with the panel's downward shadow
 * lying over it - and squared, the fill covered that ground instead of revealing it. Curved, it
 * reveals it again, which is what the other three corners already do with the plate behind them, and
 * the panel reads as one panel with one radius rather than one with a corner cut out of it.
 */
.woo-search-suggestions__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	padding: 0;
	/* The box's own ground, which the reader has asked onto the palette's control step along with every
	   other control on the site: the two halves of one control stay one fill. */
	background-color: var(--wp--preset--color--control, #292929);
	border: none;
	/* One radius, on all four corners including the lower-left: the panel stands below the box and
	   curves over whatever the page has behind it, the same as the other three corners do. */
	border-radius: 10px;
	/* Doing what the inset used to do: holding the rows to the corner, not past it. */
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/*
 * The panel is the field's group's second child, which is all WordPress's flow layout needs to
 * hand it the block gap as a top margin on top of the offset above: Global Styles writes
 * `:root :where(.is-layout-flow) > *` with the theme's block gap — clamp(0.75rem, 1.5vw, 1.5rem),
 * 15.6px at a 1040px window — so the list opened 22px under the box, nearly half the box's own
 * height and four times the offset the location field's panel takes. That rule is a single class
 * of specificity, the same as the panel's own rule and one that beats it on order, so the reset
 * takes the parent along: the panel is placed rather than flowed, and 6px is the whole distance,
 * as it is under the location field.
 */
.woo-search-suggestions > .woo-search-suggestions__panel {
	margin: 0;
}

/* Opened upward when there was more room above the field than below it — on a phone, or with
   the keyboard taking the bottom of the screen. */
.woo-search-suggestions__panel.is-above {
	top: auto;
	bottom: calc(100% + 4px);
}

.woo-search-suggestions__list {
	margin: 0;
	padding: 0;
	/* The list is flush in both directions: rows run full-bleed inside the panel, as the location
	   dropdown's do, with the panel's own radius cutting the first and last of them. The cap is not
	   that dropdown's 300px, and cannot be: a row here carries an icon column and stands about 50px
	   where a row of the dropdown's own stood about 40, so the eight phrases a keystroke can draw come
	   to 396px and the cap is set just past them - 300px would cut the last two of them short. It is
	   kept in the min() form rather than stated bare, because a phone in
	   landscape still must not run the list past the bottom of the screen. svh is the smaller of the
	   two viewport measures — the one that holds while the browser's bars are in view. */
	max-height: min(400px, 60vh);
	max-height: min(400px, 60svh);
	overflow-y: auto;
	/* A list scrolled to its end should not hand the scroll on to the page behind. */
	overscroll-behavior: contain;
	scrollbar-width: thin;
	/* The thumb is the admin menu's sub-label grey: the light #e8e8e8 it was would have been the
	   brightest thing on a dark panel. */
	scrollbar-color: #888888 transparent;
	list-style: none;
}

/*
 * A row is a phrase, not a listing: words the catalog already knows, which the visitor can take and
 * search for. So a row sets one line where a card set three, and it is set in the figure the search
 * box itself prints in — the field's own 17px at 500, on the 25.5px line the box gives it — because
 * a row is the same words in the same field, a keystroke later. The mark in front of the words says
 * where they came from; the words themselves carry the field's ink. The row's inset is the location
 * dropdown's across, 14px, and two pixels deeper above and below than that dropdown's own 10: a row
 * here carries a 20px mark in front of its words where that dropdown's rows carry none, and the
 * deeper inset is what gives the mark the air the words already have. Square-cornered as before, and
 * the row is still the whole of what answers the pointer, because the row is the link: it is
 * addressed to the search those words run, so what is being taken is the search and not a word inside
 * the row.
 */
.woo-search-suggestions__item {
	margin: 0;
	padding: 12px 14px;
	border-radius: 0;
	color: var(--wp--preset--color--filter-dark-text, #e4e6ea);
	font-size: 17px;
	font-weight: 500;
	/* The leading the box gives its own line, which one line of a row reads at as readily. */
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 120ms ease;
}

/*
 * The fill is the box's own: the plate above these rows goes to #303030 under the pointer, one step up out
 * of its rest, and a row answers with the same #303030 - so a row and the plate it covers wear one value
 * under the pointer, and what separates them is the panel's own darker fill between the rows rather than a
 * step in the grey. The pair the panel wore before this - plate #303030, row #353535 - is what the reader
 * has now asked away, and the row was the last hover left in this search UI standing on a figure of its
 * own. Before that the rows were asked onto #404040 with the plate, and had followed it since, from #353a42
 * through #484850 and #454545, then #202020, the one that read as the cross's own tenth of white over the
 * plate's fill. It is written out rather than left to the palette's control-hover entry, which still says
 * #353535, so that a retune of that entry cannot move these rows off the plate.
 */
.woo-search-suggestions__item.is-active,
.woo-search-suggestions__item:hover {
	background-color: #303030;
}

/*
 * The row's own link, which fills it: the pointer's fill is drawn on the row, so the fill covers the
 * whole row and the mark and the words sit inside it. Nothing about the link reads as a link — no
 * underline, no colour of its own — because the row is the link, and what is being taken is the
 * search rather than a word in it. The theme's own link colour is outranked rather than overridden,
 * by naming the item beside the link: both rules are a single class, and !important is kept in this
 * file for the declarations that have no other way to win.
 */
.woo-search-suggestions__item .woo-search-suggestions__link {
	align-items: center;
	color: inherit;
	display: flex;
	gap: 12px;
	text-decoration: none;
}

/*
 * The mark a row carries, saying where its words came from: the magnifier for a phrase of the
 * catalog's, the clock for one of the visitor's own. It is a line of words wide rather than a square
 * tile — a phrase row sets one line, and the mark is set to that line rather than to a picture's
 * height — so the panel reads as the location dropdown's does, an icon column with every word
 * starting at one margin.
 *
 * Its size is the box's own magnifier's, and for the same reason the type is: the box draws core's
 * glyph — a filled 24-unit path whose glass and handle come to about 15 units — in a 28px box, so the
 * mark it shows stands about 17px across. A row cannot spend 28px of its height on a 24-unit drawing
 * that fills less than two thirds of itself, so core's path is drawn here scaled until it fills this
 * box the way the clock beside it fills its own, about 20 of the 24 units - which puts the mark at
 * that same 17px. Its ink is the box's own ink too: the box draws its magnifier and its microphone in
 * the field's figure, and these marks stand where those do.
 *
 * The mark is set a pixel above the row's line, which is the box's own setting and was asked for again
 * here: a glass with a handle running down and to the left of it reads a shade low when its bounding
 * box is centred, so it is drawn a pixel clear of that line rather than on it. Nudged rather than
 * padded - the mark's box is exactly the drawing's height, so there is no inset to take the pixel out
 * of, and an offset moves the mark without touching either the box or the size of what is drawn in it.
 */
.woo-search-suggestions__icon {
	align-items: center;
	color: var(--wp--preset--color--filter-dark-text, #e4e6ea);
	display: flex;
	flex: 0 0 auto;
	height: 20px;
	justify-content: center;
	position: relative;
	top: -1px;
	width: 20px;
}

.woo-search-suggestions__icon svg {
	display: block;
	height: 100%;
	width: 100%;
}

/*
 * The words themselves: one line, cut with an ellipsis when a phrase runs past the panel's width. The
 * row keeps its height whatever the phrase is — the whole of it is still what the row searches for —
 * and phrases run as long as the catalog's own writing does, so a row that wrapped would push the
 * rows under it out of the panel.
 *
 * It is a flex item in a row that also holds a mark, so it is told it may be narrower than its text:
 * without that, a long phrase would widen the row and push the mark out of the panel instead of being
 * cut off inside it.
 */
.woo-search-suggestions__phrase {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * What the visitor has already typed, set heavier than what the catalog adds to it — the way Google
 * sets a suggestion. The typed part is what they said; the rest is the catalog's answer to it, and
 * saying which is which is the one thing a row of these does that a row of names cannot. The step is
 * taken from the field's own 500 rather than from a lighter figure, so the whole row still reads at
 * the weight the box reads at and only the words the catalog is adding are the lighter half.
 */
.woo-search-suggestions__match {
	font-weight: 700;
}

/*
 * What the panel says when it has nothing to list and a reason for it: the route could not be reached,
 * or it asked the field to wait a moment. Nothing else writes here — a search the catalog simply has
 * nothing to add to leaves the panel closed, as Google's list does — so this line is only ever a
 * failure, and it stands under the rows rather than replacing them, so the panel keeps its shape
 * while the field is typed in and out of.
 *
 * Its ink is the admin menu's sub-label grey - the figure this site's dark surfaces put on a line of
 * explanation - and its figure is smaller than a row's: it is not a suggestion, and it is not read at
 * a suggestion's size. Its insets are a row's own, 10px by 14px, so nothing moves when the note
 * stands where a row would.
 */
.woo-search-suggestions__note {
	margin: 0;
	padding: 10px 14px;
	color: #888888;
	font-size: 13px;
	line-height: 1.4;
}

/* === reduced motion === */

@media (prefers-reduced-motion: reduce) {
	.woo-search-suggestions__item {
		transition: none;
	}

	.woo-search-suggestions .wp-block-search__button {
		transition: none;
	}

	.woo-search-suggestions .woo-search-suggestions__voice {
		transition: none;
	}

	/* The clear mark is the voice mark's twin, so it is named beside it: a fill that arrives in one
	   step is the point of this block, and a mark left out of it would be the only one on the box
	   that still eases. */
	.woo-search-suggestions .woo-search-suggestions__clear {
		transition: none;
	}

	.woo-search-suggestions .woo-search-suggestions__voice.is-listening svg {
		animation: none;
	}

	.wp-block-group.woo-search-suggestions {
		transition: none;
	}
}