/*
 * Search panel and grouped results.
 *
 * Lives here rather than in main-style.css because that file and main-style.scss have
 * diverged: the compiled CSS is newer than its SCSS source, so a future compile would
 * wipe direct CSS edits and SCSS edits do nothing without one.
 */

/* --- Regression fix 1: .close-search became a <button> and would otherwise
       inherit native button chrome. The existing rule in main-style.css sets
       position, size and opacity but never resets background or border. --- */
.close-search {
	background: none;
	border: 0;
	font-family: inherit;
	color: inherit;
	line-height: 1;
}

/* --- Regression fix 2: the input became type="search", which adds a native clear
       button in WebKit. Same reset the megamenu form already carries. --- */
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* --- The trigger is now a button. Clears the WCAG 2.5.8 minimum of 24x24 and
       reaches the recommended 44x44. --- */
.search_nav.fa-search {
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
}

/*
 * The ghost box beside the magnifier.
 *
 * The trigger still carries .fa-search, which Font Awesome fills with a private-use
 * codepoint through ::before. The button inherits the body font ("Source Sans 3"),
 * which has no glyph there, so the browser paints a missing-glyph box next to the real
 * SVG. DO NOT remove the class to fix this: js/global-script-jquery.js binds the open
 * handler to .fa-search and the panel stops opening. Suppress the pseudo-element
 * instead, scoped to this button so every other icon in the theme is untouched.
 */
.search_nav.fa-search::before {
	content: none;
}

/*
 * Put the header row on whole pixels, so a 1px border stays a 1px border.
 *
 * .nav_container's height was auto and measured 51.641px, driven by the tallest
 * child. #navbar is 70px and centres it, so the container landed at y=9.172 and
 * every descendant inherited the fraction: the field's bottom border sat at
 * y=56.984. A 1px line at a fractional offset has to be painted across two device
 * rows, and on a 2x display that reads as a soft 2px rule rather than a hairline.
 * That is what the divider between the field and the panel was doing.
 *
 * min-height rather than height: 51.641 is below 52 so this rounds the row up to a
 * whole pixel today, and if the nav ever grows past 52px it still grows normally
 * instead of clipping. Measured after: container y=9, field bottom=57, panel top=57,
 * all integers, so the border is one device row at any pixel ratio.
 *
 * DESKTOP ONLY, and that guard is not tidiness. This is a rule about the header on
 * EVERY page, not just search, and below 767px the header is not this element at
 * all: the megamenu renders its own fixed topbar (#enttec-mm-topbar, z-index
 * 999990) and #navbar sits underneath it. Changing the height of a row inside a
 * component that mobile does not use can only move things that have nothing to do
 * with the dropdown this fixes. The problem it solves, a 1px divider landing on a
 * half pixel under the desktop search field, does not exist on mobile, because
 * neither the field nor the panel is reachable there.
 */
@media (min-width: 767px) {
	#navbar .nav_container {
		min-height: 52px;
	}
}

/*
 * OPENING SEARCH MUST NOT MOVE THE NAVIGATION.
 *
 * .nav_container is a flex row (logo, nav, search, icons) with justify-content:center,
 * so every child's width feeds into where the nav sits. The old behaviour grew
 * .search_container from 0 to 264px inside that flow and shifted the nav 78px left.
 *
 * The container therefore stays zero-width in BOTH states and the field and panel are
 * absolutely positioned inside it. A zero-width flex item contributes nothing to the
 * layout, so the nav cannot move, and because the container sits immediately before
 * .header-icons its right edge is exactly the left edge of the globe/cart/LOGIN
 * cluster: right:0 puts the field flush against those controls without covering them.
 * The field grows leftward over the nav, which is what an overlay should do.
 */
#navbar .nav_container .search_container,
#navbar .nav_container .search_container.show-search {
	position: relative;
	z-index: 20;
	width: 0;
	margin: 0;
	padding: 0;
}

/*
 * The theme sets no global box-sizing, so width:100% plus padding on the input would
 * push it past the close button, and the 1px borders would make the field and the
 * panel two different widths. Declared here rather than assumed.
 */
#navbar .nav_container .search_container #search-form,
#navbar .nav_container .search_container #search-form .search-input,
#navbar .nav_container .search_container .results_wrapper {
	box-sizing: border-box;
}

/*
 * The other half of "the nav must not move": the open handler sets an inline
 * display:none on .search_nav, which takes 44px out of .header-icons and shifts the
 * centred row on its own. visibility:hidden hides the same glyph while keeping the
 * box, so the row measures the same open and closed. !important is needed because the
 * handler writes an inline style. The rule is scoped to the open state, so the closed
 * state is left exactly as the theme has it.
 */
.search_container.show-search ~ .header-icons .search_nav.fa-search {
	display: inline-flex !important;
	visibility: hidden;
	pointer-events: none;
}

/*
 * The field. It computed to rgb(85,85,85) with white text, left over from the previous
 * design, and read as a different product from the white panel underneath it. Light
 * surface, dark text, square bottom corners so it meets the panel as one shape.
 */
#navbar .nav_container .search_container #search-form {
	position: absolute;
	top: -22px;
	right: 0;
	left: auto;
	width: min(420px, calc(100vw - 40px));
	height: 44px;
	margin: 0;
	padding: 0;
	background: #fff;
	color: #14181d;
	border: 1px solid #c9d3dc;
	border-radius: 8px 8px 0 0;
	font-size: 16px;
}

#navbar .nav_container .search_container.show-search #search-form {
	width: min(420px, calc(100vw - 40px));
}

#navbar .nav_container .search_container.show-search .search-input {
	padding: 0 44px 0 46px;
	font-size: 16px;
	color: inherit;
}

/*
 * The magnifier inside the field. Its path is stroke="currentColor" in searchform.php,
 * so setting `color` here is the whole of it: the icon follows the field rather than
 * carrying a colour of its own. It used to be stroke="white", which was invisible the
 * moment the field turned white.
 */
#navbar .nav_container .search_container #search-form .search_input {
	left: 16px;
	color: #5a6672;

	/*
	 * 20px against 16px text made the icon read as the loudest thing in the field.
	 * 17px sits just above the text size, so it reads as a peer to the words rather
	 * than a heading for them. The SVG carries width/height attributes of 20, so both
	 * dimensions have to be set here to override them.
	 */
	width: 17px;
	height: 17px;

	/*
	 * Centred by arithmetic the browser does, not by a number typed here. A hardcoded
	 * top has to be recomputed every time either the icon or the field height changes,
	 * and the previous 14px was half a pixel out against a 44px field, which was
	 * visible next to the perfectly centred placeholder text. This stays correct
	 * whatever those two values become.
	 */
	top: 50%;
	transform: translateY(-50%);
}

/*
 * 5.9:1 on white. The theme's inherited colour at opacity .5 was a light grey on a
 * dark field; on a white one it falls to roughly 3.5:1 and reads as disabled.
 */
#navbar .nav_container .search_container #search-form input::placeholder {
	color: #5a6672;
	opacity: 1;
}

/*
 * The glyph shrinks, the hit area does not.
 *
 * The multiplication sign was set at 30px against 16px text, so it was close to twice
 * the size of the words next to it. 20px brings it into line with the magnifier and
 * the text. Width and height stay at 42px and 40px so the tap target still clears the
 * WCAG 2.5.8 minimum of 24x24 and stays comfortable on a phone: shrinking the glyph
 * must not shrink what people have to hit.
 */
#navbar .nav_container .search_container #search-form .close-search {
	top: 0;
	right: 4px;
	height: 42px;
	min-width: 40px;
	font-size: 20px;
	line-height: 1;
	color: #5a6672;
	opacity: 1;
}

#navbar .nav_container .search_container #search-form .close-search:hover {
	color: #14181d;
}

/*
 * The panel. It computed to border-radius:0 with no shadow and read as a raw block cut
 * out of the page. Rounded bottom corners plus a soft shadow lift it off the page, and
 * matching the field's border colour and width makes the two read as one surface with
 * the field's bottom border as the divider.
 */
#navbar .nav_container .search_container .results_wrapper {
	top: 22px;
	right: 0;
	left: auto;
	width: min(420px, calc(100vw - 40px));
	max-height: min(70vh, 560px);
	overflow: hidden auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid #c9d3dc;
	border-top: 0;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 14px 32px rgba(20, 24, 29, .18);
}

/*
 * ...and the field grows over the slot the trigger just vacated.
 *
 * The rule above keeps the trigger's 44px box so the icon row cannot shift, but that
 * left the box empty: the field stopped at the trigger's left edge and there was a
 * visible 44px hole between the search box and the globe, where the icon you had just
 * clicked used to be. It read as the icon vanishing rather than as the icon opening
 * into something.
 *
 * Pulling the field and the panel out by exactly that width makes the box swallow the
 * slot, so the field's right edge meets the globe and the close button lands almost
 * where the magnifier was. The icon now reads as having become the field, which is the
 * behaviour of every search of this shape.
 *
 * Desktop only, and 767px is not a round number picked by eye: it is the same
 * threshold the open handler in js/global-script-jquery.js uses to hide .header-icons
 * outright. Below it there is no trigger box to cover, and shifting the field right
 * would push it off the edge of the screen.
 */
@media (min-width: 767px) {
	#navbar .nav_container .search_container #search-form,
	#navbar .nav_container .search_container .results_wrapper {
		right: calc(var(--enttec-search-trigger-width, 44px) * -1);
	}
}

/* The panel fades in rather than appearing hard. No layout property is animated, so
   nothing here can reintroduce the nav shift. */
#navbar .nav_container .search_container {
	transition: opacity .16s ease, visibility .16s ease;
}

@media (prefers-reduced-motion: reduce) {
	#navbar .nav_container .search_container {
		transition: none;
	}
}

.search_nav.fa-search:focus-visible,
.close-search:focus-visible,
.single_result:focus-visible,
.see_all:focus-visible {
	outline: 2px solid var(--primary, #0EA5DF);
	outline-offset: 2px;
}

/*
 * Keep the open search panel interactive while the header is scrolled.
 *
 * The theme disables pointer events across the entire navbar in its scrolled state:
 *   #navbar.fixed-bg.scroll-down, #navbar.fixed-bg.scroll-down * { pointer-events: none }
 * That is fine for a header that is hiding, but the search panel lives inside #navbar,
 * so once the page was scrolled at all the panel became click-through. Measured: the
 * element under a result row was SECTION.ehp-blk, the page content behind it, so the
 * wheel scrolled the page and a click would have hit whatever was underneath rather
 * than opening the result.
 *
 * Scoped to .show-search so the header keeps its intended non-interactive behaviour
 * whenever search is closed.
 *
 * !important is deliberate and is the only thing that works here: the theme's rule is
 * itself `pointer-events: none !important`, and an important declaration beats any
 * specificity that is not also important. Between two important declarations the more
 * specific one wins, and this is (1,4,0) against the theme's (1,2,0). Removing the
 * !important silently reverts the panel to click-through.
 */
#navbar.fixed-bg.scroll-down .search_container.show-search,
#navbar.fixed-bg.scroll-down .search_container.show-search * {
	pointer-events: auto !important;
}

/*
 * No focus ring on the search field itself, by design decision of the site owner.
 *
 * This is the one focusable control where the ring earns least: the moment focus
 * lands there the panel opens beneath it and a caret starts blinking, so "you are
 * typing here" is already unambiguous without a ring.
 *
 * The rings that carry the keyboard experience are kept and are above: the trigger
 * button, the close button, the result rows and the chips. Those are the ones where
 * you genuinely cannot tell where you are without an indicator, so do not remove
 * them alongside this.
 *
 * The input still shows the browser's own caret and, being a real input with a
 * label, is still announced correctly.
 */

/* --- Dropdown: groups, rows, footer --- */
.result_group {
	padding: 14px 16px 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #7d8b97;
}

.results_wrapper .single_result.is-active,
.results_wrapper .single_result:hover {
	background: #e6f4fa;
}

/*
 * Every thumbnail is the same square, whatever shape the source is.
 *
 * Product images are square already (1080x1080 and similar), but guide and project
 * featured images are not, and they were rendering at 46x48, 37x48 and 36x48, so the
 * left edge of the text column moved from row to row.
 *
 * The theme does set `.results_wrapper img { width:48px; height:48px; object-fit:cover }`,
 * but it loses: the wrapper span has no size of its own, so it shrinks to fit its
 * content, and `max-width:100%` then caps the image to that narrower wrapper. Sizing
 * the wrapper breaks the circle, and the image fills it.
 */
#enttec-search-results .single_result .img {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 3px;
	background: #f1f4f7;
	display: flex;
	align-items: center;
	justify-content: center;
}

#enttec-search-results .single_result .img img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

.results_wrapper .txt {
	display: flex;
	flex-direction: column;
	padding-left: 22px;
	min-width: 0;
}

.results_wrapper .txt .title {
	padding-left: 0;
}

.results_wrapper .cat {
	font-size: 12.5px;
	color: #5a6672;
	margin-top: 1px;
}

.results_wrapper .see_all {
	display: block;
	padding: 13px 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: #0a7099;
	text-decoration: none;
	border-top: 1px solid rgba(44, 45, 51, .1);
	background: #fbfcfd;
}

/*
 * The theme sets `#navbar a { color: #fff }`, and an ID selector (1,0,1) outranks
 * a two-class selector (0,2,0), so every link inside this panel inherited white
 * and .see_all rendered as blank text on the #fbfcfd footer. Scoping to the panel's
 * own id scores (1,1,0) and wins the tie on class count, without reaching for
 * !important.
 */
/*
 * ENTTEC blue, matching the link colour the rest of the site uses.
 *
 * Worth knowing if this is ever revisited: #0EA5DF measures 2.74:1 against the
 * #fbfcfd footer, below the WCAG AA minimum of 4.5:1 for body text. It is used here
 * anyway, deliberately, because it is the brand link colour and consistency with the
 * rest of the site won that argument. A darker #0A7099 would measure 5.39:1 if the
 * decision is ever reversed.
 *
 * No underline at rest, by design decision. The "do not identify a link by colour
 * alone" guidance is aimed at links sitting inside a paragraph, where nothing but
 * colour separates them from the words around them. This one is a standalone row in
 * its own footer bar, with a divider above it and no surrounding prose, so its
 * position already identifies it. The underline still appears on hover, from the
 * rule below.
 */
#enttec-search-results .see_all {
	color: var(--primary, #0EA5DF);
	text-decoration: none;
}

.results_wrapper .see_all:hover {
	text-decoration: underline;
}

.results_wrapper .is-hint,
.results_wrapper .is-empty,
.results_wrapper .is-searching {
	margin: 0;
	padding: 14px 16px;
	font-size: 14px;
	color: #5a6672;
}

/*
 * An uncached query can take seconds. Without this the panel sat empty while it ran
 * and the reviewer concluded search was not working. The dot pulses, but the sentence
 * carries the message, so reduced motion loses nothing.
 */
.results_wrapper .is-searching::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
	animation: enttec-search-pulse 1s ease-in-out infinite;
}

@keyframes enttec-search-pulse {
	0%, 100% { opacity: .25; }
	50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.results_wrapper .is-searching::after {
		animation: none;
		opacity: .6;
	}
}

/*
 * The theme sets `.results_wrapper .single_result:hover .title { color: #d9d9d9 }`,
 * which suited the old dark panel and is invisible on white.
 *
 * Hover feedback comes from the row's background tint alone. The title deliberately
 * does NOT change colour: recolouring text on hover makes a list flicker as the
 * pointer crosses it, and any colour chosen has to clear contrast against both the
 * resting and the hovered background. Holding the title still avoids both problems,
 * and the tint plus the accent rail already read as hover.
 */
#enttec-search-results .single_result:hover .title,
#enttec-search-results .single_result.is-active .title {
	color: #2c2d33;
}

/*
 * RESTORED. These rules were deleted by accident when the old results-page
 * block below was replaced, and the chips went back to rendering as blank
 * white pills on the white panel. They belong to the DROPDOWN, not the
 * results page, which is why they must not sit inside the block below.
 */
/* --- Before-typing suggestions: chips offering a way in --- */
.results_wrapper .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 16px 18px;
}

.results_wrapper .chip {
	border: 1px solid #e2e7ec;
	background: #fff;
	border-radius: 99px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	color: #14181d;
	text-decoration: none;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	transition: border-color .16s ease, background .16s ease;
}

/*
 * The theme sets `#navbar a { color: #fff }`, and an ID selector (1,0,1) outranks
 * a two-class selector (0,2,0), so every link inside this panel inherited white
 * and the chips rendered as blank pills. Scoping to the panel's own id scores
 * (1,1,0) and wins the tie on class count, without reaching for !important.
 */
#enttec-search-results .chip {
	color: #14181d;
}

.results_wrapper .chip:hover,
.results_wrapper .chip:focus-visible {
	border-color: #0c8fc1;
	background: #e6f4fa;
}

@media (prefers-reduced-motion: reduce) {
	.results_wrapper .chip {
		transition: none;
	}
}

/* ==========================================================================
   RESULTS PAGE
   ==========================================================================

   Every selector here is scoped under .sr-page and every class is namespaced
   sr-*. That is the whole strategy for beating the theme and WooCommerce, and it
   is worth stating plainly because the obvious alternative is worse:

   The page renders NO WooCommerce templates and reuses NO WooCommerce class
   names. There is no ul.products, no li.product, no .woocommerce-loop-product__*
   anywhere in search-loop.php. So the shop grid's rules never match these rows in
   the first place, and none of this has to out-specify them. Winning by not
   entering the fight beats winning with !important, which only holds until the
   next plugin update raises the stakes.

   Where the theme still reaches in, it does so through bare element rules, and
   those are answered explicitly and individually below, each with a note naming
   the rule being answered.
   ========================================================================== */

.sr-page {
	/* Local tokens, deliberately the same values as the dropdown above, so the
	   two halves of search read as one system rather than two designs of it. */
	--sr-blue: var(--primary, #0EA5DF);
	--sr-ink: #14181d;
	--sr-muted: #5a6672;
	--sr-grey: #6d7a86;
	--sr-line: #e3e9ee;
	--sr-line-strong: #c9d3dc;
	--sr-fill: #f2f5f8;
	--sr-tint: #e6f4fa;
	--sr-ease: cubic-bezier(.22, 1, .36, 1);

	/*
	 * Clear the navbar.
	 *
	 * #navbar is position:absolute, top:0, 70px tall, so it takes NO space in the
	 * flow. Every other page gets its top spacing from the shared title band, and
	 * this page skips that band (see search-loop.php), so without this the
	 * breadcrumb renders underneath the logo and the nav links. Measured 70px at
	 * both 1440 and 390, and the header does not change height by breakpoint.
	 *
	 * The sticky pills below deliberately stay at top:0 rather than offsetting by
	 * this same amount: the navbar leaves the viewport on the first scroll down
	 * and only returns at the very top of the page, where the pills are not stuck
	 * yet. Offsetting them would leave a 70px strip of content scrolling in the
	 * open above the pill row for the whole page.
	 */
	padding: calc(70px + 26px) 0 0;
	color: var(--sr-ink);

	/*
	 * Hold the page open so a short result set does not drag the footer up under
	 * the results. Four projects is a normal outcome of a type filter, and it left
	 * the dark footer starting halfway up a 1440x900 screen.
	 *
	 * 100vh minus the navbar, because the navbar is position:absolute and overlays
	 * rather than occupying flow. box-sizing is border-box on everything in here,
	 * so the padding above is inside this figure.
	 */
	min-height: calc(100vh - 70px);
}

/*
 * Drop the theme's page-shell card on search only.
 *
 * #container defaults to `max-width: 1100px` with a 1rem grey box-shadow. Every
 * other template overrides it to 100% (checked /products/, which computes to
 * max-width:100% and a 0-spread shadow), so search was the one page still
 * rendering inside a floating 1100px card. It never showed before because the
 * shared title band ran full-bleed across the top and hid the card's edges; this
 * page drops that band, so the edges and the shadow became visible.
 *
 * #container is an ID, so this needs (1,0,1) to beat it, hence body.search rather
 * than a class of our own. Scoped to search so no other template is touched.
 */
body.search #container {
	max-width: none;
	box-shadow: none;
}

.sr-wrap {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 24px;
}

/* The theme sets no global box-sizing, so a width:100% field plus padding would
   overflow its own form. Declared rather than assumed, same as the dropdown. */
.sr-page *,
.sr-page *::before,
.sr-page *::after {
	box-sizing: border-box;
}

/* The theme's `a { color: #0EA5DF }` and `a:hover { color: #444 }` land on every
   link in here. Neutralised once, so each component states its own colour.
   
   MIND THE SPECIFICITY WHEN ADDING A LINK COLOUR BELOW. This selector is a class
   plus an element, (0,1,1), which BEATS a plain single-class rule at (0,1,0). A
   bare `.sr-empty__cta--primary { color: #fff }` therefore lost to it and the
   primary call to action rendered near-black on ENTTEC blue. Every anchor rule
   below is scoped under .sr-page for (0,2,0), which wins on class count. */
.sr-page a {
	text-decoration: none;
	color: inherit;
}

/* --- Breadcrumb --- */
.sr-page .woocommerce-breadcrumb {
	margin: 0 0 12px;
	padding: 0;
	font-size: 13px;
	color: var(--sr-muted);
}

.sr-page .woocommerce-breadcrumb a:hover {
	color: var(--sr-ink);
	text-decoration: underline;
}

/* --- The field --- */
.sr-form {
	position: relative;
	max-width: 560px;
	margin: 0 0 14px;
}

.sr-form__icon {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	color: var(--sr-muted);
	pointer-events: none;
}

/* type="search" gives WebKit a clear button of its own, drawn in the browser's
   style with no way to theme it. Same reset the header field carries further up
   this file. Ours replaces it below, so the behaviour survives the reset rather
   than being thrown away with the styling. */
.sr-form input::-webkit-search-decoration,
.sr-form input::-webkit-search-cancel-button,
.sr-form input::-webkit-search-results-button,
.sr-form input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.sr-form input[type="search"] {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 134px 0 44px;
	font: 400 16px/1.5 inherit;
	color: var(--sr-ink);
	background: #fff;
	border: 1px solid var(--sr-line-strong);
	border-radius: 9px;
	transition: border-color .16s ease, box-shadow .16s ease;
}

/* The theme sets `input:focus { outline: 0; border: 1px solid #04a4cc }` as a
   bare element rule. That teal belongs to no palette on this page, so both
   properties are stated here or the theme's border shows through underneath. */
.sr-form input[type="search"]:focus {
	outline: none;
	border-color: var(--sr-blue);
	box-shadow: 0 0 0 3px rgba(14, 165, 223, .18);
}

.sr-form input[type="search"]::placeholder {
	color: var(--sr-muted);
	opacity: 1;
}

.sr-form__go {
	position: absolute;
	right: 5px;
	top: 5px;
	height: 38px;
	padding: 0 17px;
	font: 600 14.5px/1 inherit;
	color: #fff;
	cursor: pointer;
	background: var(--sr-blue);
	border: 0;
	border-radius: 6px;
	transition: filter .16s ease, transform .16s var(--sr-ease);
}

/* Brightness rather than a darker blue. A second, dimmer blue in the palette
   reads as a different brand instead of the same one used carefully, which is
   what the old #0A7099 was doing all over this page. */
.sr-form__go:hover {
	filter: brightness(.94);
}

.sr-form__go:active {
	transform: scale(.97);
}

/* Clear sits inside the field rather than beside the button, so it reads as part
   of the input instead of as a second action competing with Search. Hidden while
   the field is empty, since there is then nothing to clear. */
.sr-form__clear {
	position: absolute;
	right: 92px;
	top: 7px;
	width: 34px;
	height: 34px;
	padding: 0;
	display: grid;
	place-items: center;
	font: 400 20px/1 inherit;
	color: var(--sr-grey);
	cursor: pointer;
	background: none;
	border: 0;
	transition: color .16s ease;
}

.sr-form__clear:hover {
	color: var(--sr-ink);
}

.sr-form__clear[hidden] {
	display: none;
}

/* --- The heading --- */

/* The page's only h1, and small on purpose: on a results page the count IS the
   title, and setting it at display size makes the page shout a number nobody
   came for. The theme styles bare h1 with Montserrat at a heading size, hence
   the explicit font shorthand. */
.sr-page .found-results {
	margin: 0 0 4px;
	font: 400 14.5px/1.5 inherit;
	letter-spacing: 0;
	color: var(--sr-muted);
	text-transform: none;
}

/* --- Filter pills --- */
.sr-chips {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	padding: 12px 0 16px;
	margin: 0;
	background: rgba(255, 255, 255, .93);
	backdrop-filter: blur(8px);
}

.sr-page .sr-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 14px;
	font: 600 13.5px/1 inherit;
	color: var(--sr-grey);
	background: #fff;
	border: 1px solid var(--sr-line-strong);
	border-radius: 999px;
	transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.sr-page .sr-chip:hover {
	color: var(--sr-ink);
	background: #f4f7f9;
	border-color: #9fb0bf;
}

.sr-chip__n {
	font-size: 12px;
	font-weight: 700;
	color: var(--sr-grey);
	background: var(--sr-fill);
	border-radius: 999px;
	padding: 2px 7px;
	transition: color .16s ease, background .16s ease;
}

/* Selected is filled rather than coloured. A filter is a statement about what
   you are looking at, not an action to take, so it must not compete with the
   Search button for the eye, and a solid dark chip does not compete so much as
   shout.

   Three states, three different mechanisms, so none can be mistaken for another:
   rest is outlined on white, hover barely tints, selected is filled and loses
   its outline. The count pill inverting to white is the second signal and the
   weight change is the third, so this never rests on the fill alone. */
.sr-page .sr-chip.is-active {
	color: var(--sr-ink);
	font-weight: 700;
	background: #dbe4ec;
	border-color: #dbe4ec;
}

.sr-page .sr-chip.is-active:hover {
	background: #d1dce6;
	border-color: #d1dce6;
}

.sr-page .sr-chip.is-active .sr-chip__n {
	color: var(--sr-ink);
	background: #fff;
}

.sr-page .sr-clear {
	align-self: center;
	padding: 0 6px;
	font: 600 13.5px/1 inherit;
	color: var(--sr-grey);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .16s ease;
}

.sr-page .sr-clear:hover {
	color: var(--sr-ink);
}

/* --- Top match --- */
.sr-best__label {
	display: block;
	margin: 6px 0 10px;
	font: 700 12px/1 "Montserrat", sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sr-muted);
}

.sr-best {
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 20px;
	margin: 0 0 34px;
	background: linear-gradient(180deg, #fcfcfd 0%, #fff 100%);
	border: 1px solid var(--sr-line-strong);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(20, 24, 29, .04);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--sr-ease);
}

.sr-best:hover {
	border-color: var(--sr-blue);
	box-shadow: 0 8px 24px rgba(14, 165, 223, .13);
	transform: translateY(-1px);
}

.sr-best__media {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--sr-line);
	border-radius: 10px;
}

.sr-best__body {
	min-width: 0;
}

.sr-page .sr-best__title {
	display: block;
	margin: 0 0 5px;
	font: 700 21px/1.25 "Montserrat", sans-serif;
	letter-spacing: -.01em;
	color: var(--sr-ink);
}

.sr-best__desc {
	display: block;
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--sr-muted);
}

.sr-best__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sr-blue);
}

.sr-best__cta svg {
	width: 14px;
	height: 14px;
	transition: transform .2s var(--sr-ease);
}

.sr-best:hover .sr-best__cta svg {
	transform: translateX(3px);
}

/* --- The list ---

   One shape for every result. Baymard guideline 443: 64% of sites vary the
   attributes shown between list items, which makes results impossible to compare
   at a glance. min-height holds the rhythm when a page has no summary to show. */
.sr-list {
	padding: 0 0 8px;
}

.sr-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 92px;
	padding: 14px 14px 14px 16px;
	border-bottom: 1px solid var(--sr-line);
	transition: background .16s ease;
}

.sr-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 3px;
	background: var(--sr-blue);
	border-radius: 0 3px 3px 0;
	transform: scaleY(0);
	transition: transform .2s var(--sr-ease);
}

/* The list's own bottom edge is the pagination, so a rule under the last row is
   a line to nowhere. */
.sr-list .sr-row:last-child {
	border-bottom: 0;
}

.sr-row:hover {
	background: var(--sr-tint);
}

.sr-row:hover::before {
	transform: scaleY(1);
}

.sr-row__media {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--sr-line);
	border-radius: 8px;
}

/* cover, not contain. contain letterboxed every photograph, so a list of 16:9
   story and project shots read as a column of grey boxes with a picture floating
   in the middle of each. Product shots are centred on white, so cropping them
   costs nothing.

   The theme has a bare `img { max-width: 100%; height: auto }` rule, which is why
   both dimensions and max-width have to be stated here rather than inherited. */
.sr-row__media img,
.sr-best__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	transition: transform .28s var(--sr-ease);
}

.sr-row:hover .sr-row__media img {
	transform: scale(1.06);
}

.sr-row__ph {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: var(--sr-line);
}

.sr-row__body {
	min-width: 0;
	flex: 1;
}

.sr-page .sr-row__title {
	display: block;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--sr-ink);
	transition: color .16s ease;
}

.sr-row__desc {
	display: block;
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--sr-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sr-row__meta {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 6px;
}

.sr-row__cat {
	font-size: 12.5px;
	color: #8a97a3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sr-badge {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

/* Product is the majority type here, so it takes the neutral and the two rarer
   types keep a tint. A mixed list stays scannable without the page turning into
   a colour chart. */
.sr-badge--product {
	color: #4b5763;
	background: var(--sr-fill);
}

.sr-badge--guide {
	color: #6b5300;
	background: #fdf1cf;
}

.sr-badge--solution {
	color: #2c6b47;
	background: #e0f3e8;
}

.sr-row__go {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	color: var(--sr-blue);
	transform: translateX(-4px);
	opacity: 0;
	transition: transform .2s var(--sr-ease), opacity .2s ease;
}

.sr-row:hover .sr-row__go {
	transform: translateX(0);
	opacity: 1;
}

/* --- Entry motion ---

   This list paints once per query, so a stagger reads as the page assembling.
   Deliberately NOT used in the header dropdown, which repaints on every keystroke
   and would flicker. Capped at 10 steps so result 24 is not still waiting a
   second after result 1. */
@keyframes sr-rise {
	from {
		opacity: 0;
		transform: translateY(7px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.sr-best {
	opacity: 0;
	animation: sr-rise .38s var(--sr-ease) forwards;
}

.sr-row {
	opacity: 0;
	animation: sr-rise .34s var(--sr-ease) forwards;
	animation-delay: calc(min(var(--i), 10) * 28ms + 60ms);
}

/* --- Nothing found --- */
.sr-empty {
	max-width: 560px;
	padding: 8px 0 40px;
}

.sr-empty__lead {
	margin: 0 0 20px;
	font-size: 16px;
	color: var(--sr-muted);
}

.sr-empty__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.sr-page .sr-empty__cta {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sr-ink);
	background: #fff;
	border: 1px solid var(--sr-line-strong);
	border-radius: 8px;
	transition: border-color .16s ease, background .16s ease, filter .16s ease;
}

.sr-page .sr-empty__cta:hover {
	border-color: #9fb0bf;
	background: #f4f7f9;
}

.sr-page .sr-empty__cta--primary {
	color: #fff;
	background: var(--sr-blue);
	border-color: var(--sr-blue);
}

.sr-page .sr-empty__cta--primary:hover {
	filter: brightness(.94);
	background: var(--sr-blue);
}

/* --- Pagination ---

   the_posts_pagination() emits core's own markup, so these are core's class names
   rather than sr-*. Scoped under .sr-page so this styling cannot reach the blog
   or shop archives, which use the same classes. */
.sr-page .navigation.pagination {
	padding: 22px 0 60px;
}

.sr-page .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.sr-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.sr-page .page-numbers {
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--sr-grey);
	background: #fff;
	border: 1px solid var(--sr-line-strong);
	border-radius: 8px;
	transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.sr-page .page-numbers:hover {
	color: var(--sr-ink);
	border-color: #9fb0bf;
}

.sr-page .page-numbers.current {
	color: #fff;
	background: var(--sr-blue);
	border-color: var(--sr-blue);
}

.sr-page .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* --- Focus rings --- */
.sr-page a:focus-visible,
.sr-page button:focus-visible,
.sr-form input[type="search"]:focus-visible {
	outline: 2px solid var(--sr-blue);
	outline-offset: 2px;
}

/* --- Small screens --- */
/* --- Small screens ---

   The whole job here is getting a real result above the fold.
   
   Measured at 390x844 before this block was tuned: the first ordinary row began
   at y=751, so on a phone you scrolled past the entire head before seeing a
   single result. That is the opposite of what the ranking is for. NN/g's pinball
   work puts 40-80% of views on the top five results, and none of them were
   visible. Two things were eating the screen, and both are fixed below. */
@media (max-width: 640px) {
	.sr-wrap {
		padding: 0 20px;
	}

	.sr-row {
		gap: 12px;
		min-height: 84px;
		padding: 12px 8px 12px 12px;
	}

	.sr-row__media {
		flex-basis: 52px;
		width: 52px;
		height: 52px;
	}

	.sr-row__go {
		display: none;
	}

	/*
	 * 1. The top match stays a row, it does not become a poster.
	 *
	 * Stacking the image above the text turned this into a 321px block, taller
	 * than four ordinary results, for one of them. Keeping the horizontal layout
	 * with a smaller thumbnail says the same thing in about a third of the
	 * height, and it still reads as promoted because it keeps its border, its
	 * tinted panel and its call to action.
	 */
	.sr-best {
		gap: 14px;
		padding: 14px;
		margin-bottom: 24px;
	}

	.sr-best__media {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
	}

	.sr-best__title {
		font-size: 17px;
	}

	.sr-best__desc {
		font-size: 14px;
		margin-bottom: 8px;

		/* Two lines is enough to judge a match by. Unclamped, a long meta
		   description put the call to action off the bottom of the card. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/*
	 * 2. The pills fit on fewer lines.
	 *
	 * At full size each label claimed its own row, because "Guides and protocols"
	 * is wide enough to force a wrap either side of it: three pills, three rows,
	 * 146px of filter above the results. Trimming the padding and the type lets
	 * them pack, and the count bubble carries the number so nothing is lost.
	 */
	.sr-chips {
		gap: 6px;
		padding: 10px 0 12px;
	}

	.sr-page .sr-chip {
		height: 30px;
		padding: 0 10px;
		gap: 5px;
		font-size: 12.5px;
	}

	.sr-chip__n {
		font-size: 11px;
		padding: 1px 6px;
	}

	.sr-page .found-results {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sr-row,
	.sr-best {
		opacity: 1;
		animation: none;
	}

	.sr-page *,
	.sr-page *::before,
	.sr-page *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}