/*
 * WM-243 - the new as-you-type search box (assets/js/searchBox.js).
 *
 * Hand-written: NOT part of the SCSS build, like errorReporter.css and wsm-cab.css. Loaded by
 * inc/searchBoxV2.php wherever the new search is on.
 *
 * Design A, "Split panel" (Ben and Andrew, 29 Sep 2026): where to look on the left, products in a
 * list on the right. Design B and the testing buttons were taken out that day.
 *
 * Four shapes, set by the script, which sizes the panel to the page's header:
 *   .ws-sb--wide    1000px or more: a desktop. The products are set out in columns.
 *   (none)          640px to 1000px: a small laptop, a tablet
 *   .ws-sb--narrow  narrower than that
 *   .ws-sb--sheet   a phone: searching is a screen of its own. The search bar is lifted to the top
 *                   (.ws-sb-host--sheet) over a white veil (.ws-sb-veil) that hides the page and its
 *                   header, and the sheet runs from under the bar to the top of the ON-SCREEN
 *                   KEYBOARD. See THE BUDGET below.
 *
 * A product shows its picture, its name, its part number and a stock light (Ben, 28 Sep 2026).
 */

.ws-sb {
	--sb-ink: var(--ws-ink, #131416);
	--sb-red: var(--bs-primary, #e31c2d);
	--sb-muted: #6b7280;
	--sb-line: rgba(19, 20, 22, .09);
	--sb-soft: #f5f6f8;
	--sb-go: #1f9d55;
	--sb-wait: #f5a623;
	--sb-wait-edge: #c77e0a;
	--sb-stop: #d9342b;
	--sb-top: 110px;
	--sb-h: 60vh;

	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 1060;
	overflow: hidden;
	background: #fff;
	color: var(--sb-ink);
	border: 1px solid var(--sb-line);
	border-radius: 14px;
	box-shadow: 0 28px 56px -16px rgba(19, 20, 22, .32), 0 6px 14px rgba(19, 20, 22, .08);
	font-family: var(--ws-body, inherit);
	font-size: .92rem;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	white-space: normal;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}

.ws-sb.ws-sb--open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: opacity .14s ease, transform .14s ease, visibility 0s;
}

/* today's list is switched off by the script; this keeps its empty shell out of the way too */
.ws-sb-on .autoComplete_wrapper > ul {
	display: none !important;
}

.ws-sb *,
.ws-sb *::before,
.ws-sb *::after {
	box-sizing: border-box;
}

.ws-sb a {
	color: inherit;
	text-decoration: none;
}

/* ---- the thin line that runs while a look-up is on its way */
.ws-sb__bar {
	flex: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--sb-red), transparent) no-repeat;
	background-size: 40% 100%;
	opacity: 0;
}

.ws-sb--busy .ws-sb__bar {
	opacity: 1;
	animation: wsSbRun .9s linear infinite;
}

@keyframes wsSbRun {
	from { background-position: -40% 0; }
	to { background-position: 140% 0; }
}

.ws-sb__scroll {
	max-height: min(72vh, 660px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ---- headings */
.ws-sb__h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
	padding: 14px 18px 6px;
	font-family: var(--ws-head, inherit);
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sb-muted);
}

.ws-sb__h button {
	border: 0;
	background: none;
	padding: 0;
	font: 400 .78rem/1 var(--ws-body, inherit);
	letter-spacing: 0;
	text-transform: none;
	color: var(--sb-muted);
	text-decoration: underline;
	cursor: pointer;
}

/* ---- anything that can be chosen */
.ws-sb__opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 18px;
	cursor: pointer;
}

.ws-sb__opt:hover,
.ws-sb__opt.is-active {
	background: rgba(227, 28, 45, .06);
}

.ws-sb__opt.is-active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--sb-red);
}

.ws-sb b.searchHighlight {
	background: none;
	padding: 0;
	color: inherit;
	font-weight: 700;
}

/* ---- pictures
   The picture FILLS its box and is fitted inside it, whatever shape it is. The first draft let
   the picture keep its own size and clipped what stuck out, which cut the bottom off every
   square or tall product photo: a percentage max-height has nothing to measure against in a box
   whose height comes from aspect-ratio. */
.ws-sb__thumb {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	padding: 3px;
	overflow: hidden;
	border: 1px solid var(--sb-line);
	border-radius: 10px;
	background: #fff;
}

.ws-sb__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/* ---- products in a list
   Set out in as many columns as the script asks for, and read DOWN each one: the best matches
   fill the first column, and the arrow keys go down it before they cross to the next. */
.ws-sb__list {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--sb-rows, 1), auto);
	grid-template-columns: repeat(var(--sb-cols, 1), minmax(0, 1fr));
	column-gap: 25px;
}

/* The rule between two columns, drawn a row at a time. It is there so that a light is seen to
   belong to the row it ends, not to the picture that starts the next column. */
.ws-sb__prod--ruled::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -13px;
	width: 1px;
	background: var(--sb-line);
}

.ws-sb__info {
	flex: 1 1 auto;
	min-width: 0;
}

.ws-sb__name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-weight: 500;
}

.ws-sb__meta {
	display: block;
	margin-top: 2px;
	font-size: .78rem;
	color: var(--sb-muted);
}

.ws-sb__pill {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: #fff4e5;
	color: #8a5300;
	font-size: .72rem;
	white-space: nowrap;
}

.ws-sb__pill--gone {
	background: #eceef1;
	color: #4b5563;
}

/* the stock light, at the end of a row */
.ws-sb__buy {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
	padding: 0 3px 0 4px;
	white-space: nowrap;
}


/* ---- the stock light (Ben, 29 Sep 2026)
   fast  filled green      soon  green ring      wait  amber ring, dashed      out  filled red
   Colour on its own fails anybody who cannot tell amber from green, so the amber ring is dashed
   to tell it from the green one. Red is a plain red light, as a traffic light is (Ben: not a "no
   entry" sign), so filled red and filled green differ by colour only; the tooltip and the key
   still say which. What each one means is decided by searchV2StockLight() and said in words by
   the key. */
.ws-sb__light {
	flex: 0 0 auto;
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid var(--sb-go);
	border-radius: 50%;
	background: var(--sb-go);
	box-shadow: 0 0 0 3px rgba(31, 157, 85, .16);
}

.ws-sb__light--soon {
	background: #fff;
}

.ws-sb__light--wait {
	border: 2px dashed var(--sb-wait-edge);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(245, 166, 35, .2);
}

.ws-sb__light--out {
	border-color: var(--sb-stop);
	background: var(--sb-stop);
	box-shadow: 0 0 0 3px rgba(217, 52, 43, .16);
}

.ws-sb__key {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0;
	padding: 8px 18px 12px;
	font-size: .76rem;
	color: var(--sb-muted);
}

.ws-sb__key span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.ws-sb__key .ws-sb__light {
	width: 10px;
	height: 10px;
	box-shadow: none;
}

/* ---- a category, a brand, a manual, a recent search */
.ws-sb__link {
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: .9rem;
}

.ws-sb__link svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--sb-muted);
}

/* two lines, not one cut short: "Traxxas Slash 2wd R..." three times over tells nobody which is which */
.ws-sb__link > span:first-of-type {
	display: -webkit-box;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ws-sb__count {
	flex: 0 0 auto;
	font-size: .78rem;
	color: var(--sb-muted);
}

/* ---- the strip of shortcuts, on a phone */
.ws-sb__band {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	align-items: center;
	overflow-x: auto;
	padding: 12px 16px;
	scrollbar-width: none;
}

.ws-sb__band::-webkit-scrollbar {
	display: none;
}


.ws-sb__chip {
	flex: 0 0 auto;
	gap: 6px;
	padding: 6px 13px;
	border: 1px solid var(--sb-line);
	border-radius: 999px;
	background: #fff;
	font-size: .82rem;
	white-space: nowrap;
	transition: background .12s ease, color .12s ease;
}

.ws-sb__chip small {
	font-size: .74rem;
	opacity: .65;
}

.ws-sb__chip.is-active::before {
	display: none;
}

/* ---- nothing found */
.ws-sb__none {
	padding: 22px 18px 18px;
}

.ws-sb__none strong {
	display: block;
	font-family: var(--ws-head, inherit);
	font-size: 1.35rem;
	font-weight: 400;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.ws-sb__none span {
	display: block;
	margin-top: 4px;
	color: var(--sb-muted);
}

/* ---- see all */
.ws-sb__all {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 18px;
	background: var(--sb-ink);
	color: #fff !important;
	font-family: var(--ws-head, inherit);
	font-size: 1.15rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .12s ease;
}

.ws-sb__all:hover,
.ws-sb__all.is-active {
	background: var(--sb-red);
}

.ws-sb__all.is-active::before {
	display: none;
}

.ws-sb__all svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	transition: transform .12s ease;
}

.ws-sb__all:hover svg,
.ws-sb__all.is-active svg {
	transform: translateX(4px);
}

/* ---- recent searches: each can be taken away on its own (Andrew, 29 Sep 2026) */
.ws-sb__recentrow {
	display: flex;
	align-items: center;
}

.ws-sb__recentrow > .ws-sb__opt {
	flex: 1 1 auto;
	min-width: 0;
}

.ws-sb__forget {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 36px;
	margin-right: 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--sb-muted);
	cursor: pointer;
}

.ws-sb__forget svg {
	width: 12px;
	height: 12px;
}

.ws-sb__forget:hover {
	background: rgba(227, 28, 45, .08);
	color: var(--sb-red);
}

.ws-sb__hint {
	margin: 0;
	padding: 14px 12px;
	font-size: .86rem;
	color: var(--sb-muted);
}

/* ---- the clear button inside the search box: ours, because an iPhone never shows the
   browser's own (Andrew, 29 Sep 2026), and it shows the hand cursor on a desktop */
.ws-sb-on #txtSearch::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.ws-sb-on #txtSearch {
	padding-right: 40px;
}

.ws-sb-clear {
	position: absolute;
	top: 50%;
	right: var(--sb-clear-right, 6px);
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ws-ink, #131416);
	cursor: pointer;
}

.ws-sb-clear svg {
	width: 14px;
	height: 14px;
}

.ws-sb-clear:hover {
	background: rgba(19, 20, 22, .06);
}

.ws-sb-host--text .ws-sb-clear {
	display: flex;
}

/* ---- "Cancel", beside the search box, on a phone only */
.ws-sb-cancel {
	display: none;
	flex: 0 0 auto;
	border: 0;
	background: none;
	padding: 8px 2px 8px 0;
	font: 500 .95rem/1 var(--ws-body, inherit);
	color: var(--bs-primary, #e31c2d);
	cursor: pointer;
}

/* ================================================================== DESIGN A: split panel */

/* In the page the products come first (that is the order the arrow keys follow); here the
   shortcuts are put on the left. */
.ws-sb--a .ws-sb__body {
	display: grid;
	grid-template-columns: minmax(230px, 34%) 1fr;
}

.ws-sb--a .ws-sb__side {
	grid-column: 1;
	grid-row: 1;
	padding-bottom: 10px;
	border-right: 1px solid var(--sb-line);
	background: var(--sb-soft);
}

.ws-sb--a .ws-sb__main {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	padding-bottom: 8px;
}

.ws-sb--a.ws-sb--noside .ws-sb__body {
	grid-template-columns: 1fr;
}

.ws-sb--a.ws-sb--noside .ws-sb__side {
	display: none;
}

.ws-sb--a.ws-sb--noside .ws-sb__main {
	grid-column: 1;
}

/* narrow: products first, then the shortcuts */
.ws-sb--a.ws-sb--narrow .ws-sb__body {
	display: flex;
	flex-direction: column;
}

.ws-sb--a.ws-sb--narrow .ws-sb__side {
	border-right: 0;
	border-top: 1px solid var(--sb-line);
}

.ws-sb--a .ws-sb__band {
	background: var(--sb-soft);
	border-bottom: 1px solid var(--sb-line);
}


.ws-sb--a .ws-sb__chip:hover,
.ws-sb--a .ws-sb__chip.is-active {
	border-color: var(--sb-ink);
	background: var(--sb-ink);
	color: #fff !important;
}

/* ================================================================== A DESKTOP: the wide panel */

/* with nothing to put in the side column, the products have the whole width */
.ws-sb--wide.ws-sb--a:not(.ws-sb--noside) .ws-sb__body {
	grid-template-columns: 300px minmax(0, 1fr);
}

.ws-sb--wide .ws-sb__list {
	padding: 0 8px;
}

.ws-sb--wide .ws-sb__list .ws-sb__opt {
	padding: 7px 12px;
	border-radius: 10px;
}

.ws-sb--wide .ws-sb__list .ws-sb__thumb {
	flex-basis: 52px;
	width: 52px;
	height: 52px;
}


/* ================================================================== A PHONE: the sheet */

/* the page behind must not scroll under the customer's thumb */
html.ws-sb-lock,
html.ws-sb-lock body {
	overflow: hidden;
}

/* A search box under 16px makes an iPhone zoom the whole page in when it is tapped */
@media (max-width: 767.98px) {
	.ws-sb-on #txtSearch {
		font-size: 16px;
	}
}

/* The veil: while a phone is searching, the page and its header are covered in white, so the
   screen is the search bar, the results and the keyboard (Ben, 29 Sep 2026: "hide the wheelspin
   header when the search box is open"). It fades in; the bar slides up over it (see lift()). */
.ws-sb-veil {
	position: fixed;
	inset: 0;
	z-index: 1058;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, visibility 0s linear .15s;
}

.ws-sb-veil.is-on {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .15s ease, visibility 0s;
}

/* The site's phone header clips the search row (#searchCollapse, clip-path: inset(0 0 -1000px), for
   its slide-open). A clip-path clips EVERYTHING inside it, the lifted bar and the results included,
   and makes a layer of its own under the veil: while searching, it is lifted off. */
html.ws-sb-lock #searchCollapse {
	clip-path: none !important;
}

/* the lifted search bar: at the top of what can be seen, over the veil */
.autoComplete_wrapper.ws-sb-host--sheet {
	position: fixed;
	top: var(--sb-bar-top, 0px);
	left: 0;
	right: 0;
	z-index: 1062;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(19, 20, 22, .09);
}

.autoComplete_wrapper.ws-sb-host--sheet > input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.ws-sb-host--sheet .ws-sb-cancel {
	display: block;
}

.ws-sb.ws-sb--sheet {
	position: fixed;
	top: var(--sb-top);
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	height: var(--sb-h);
	border: 0;
	border-top: 1px solid var(--sb-line);
	border-radius: 0;
	box-shadow: none;
	font-size: .95rem;
	transform: none;
	transition: opacity .1s ease, visibility 0s linear .1s;
}

.ws-sb.ws-sb--sheet.ws-sb--open {
	transition: opacity .1s ease, visibility 0s;
}

/*
 * THE BUDGET. With the keyboard up an iPhone leaves about 340px of page (Andrew's screenshot,
 * 29 Sep 2026: two products and a bit). Ben: "more results would be better, smaller images are
 * fine". So: the header is hidden behind the veil and the bar sits at the top (about 50px back),
 * no "Products" heading, the shortcuts in one slim strip, a product in ONE ROW of about 44px
 * (a picture filling the row, the name, the light), the part number only when what was typed is
 * IN it, and "See all" in 36. That is about eight products above the keyboard.
 *
 * An iPhone floats its own buttons (passwords, cards, the keyboard's hide key) above the keyboard,
 * outside what the page is told it can see. The page shows through there, so the sheet's white is
 * carried on below its bottom edge by the veil.
 */
.ws-sb--sheet .ws-sb__bar {
	order: -2;
}

.ws-sb--sheet .ws-sb__band {
	order: -1;
	gap: 6px;
	padding: 5px 12px;
}

.ws-sb--sheet .ws-sb__chip {
	padding: 5px 10px;
	font-size: .8rem;
}

.ws-sb--sheet .ws-sb__scroll {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	-webkit-overflow-scrolling: touch;
}

.ws-sb--sheet .ws-sb__h {
	padding: 10px 12px 2px;
	font-size: .95rem;
}

/* what the rows ARE is plain from the rows; the heading only cost a row's worth of screen */
.ws-sb--sheet .ws-sb__h--first {
	display: none;
}

.ws-sb--sheet .ws-sb__opt {
	padding-left: 12px;
	padding-right: 12px;
}

/* a product: one row. Picture, name, and the light at the end of it. The picture fills the row's
   height and has no frame or padding of its own (Ben, 29 Sep 2026: "images on mobile are still
   small, we are wasting space on the padding"), and the row is no taller than the name's two lines
   need ("thinner result rows to get a touch more results in"): a 56 x 40 picture where the framed
   34px box showed about 30 x 30, in a row of about 44px. Wider than tall, because most product
   photos are. */
.ws-sb--sheet .ws-sb__prod {
	gap: 9px;
	min-height: 43px;
	padding-top: 1px;
	padding-bottom: 1px;
	border-bottom: 1px solid var(--sb-line);
}

.ws-sb--sheet .ws-sb__prod .ws-sb__thumb {
	flex-basis: 56px;
	width: 56px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 4px;
}

.ws-sb--sheet .ws-sb__name {
	font-size: .85rem;
	line-height: 1.15;
}

.ws-sb--sheet .ws-sb__meta {
	margin-top: 0;
	font-size: .74rem;
	line-height: 1.25;
}

.ws-sb--sheet .ws-sb__buy {
	gap: 10px;
	padding-left: 0;
}


/* no halo round the light on a phone: it is only noise at this size */
.ws-sb--sheet .ws-sb__light {
	width: 11px;
	height: 11px;
	box-shadow: none;
}

.ws-sb--sheet .ws-sb__key {
	gap: 2px 14px;
	padding: 8px 12px 6px;
	font-size: .72rem;
}

/* The part number line is kept when what was typed is IN the part number (--hit: "321321" shows
   XR321321, "tt02" does not show HC-58751), and whenever it has something to say ("replaces
   RFL1200"). Otherwise it is a third line on a very short screen. */
.ws-sb--sheet .ws-sb__meta:not(.ws-sb__meta--keep):not(.ws-sb__meta--hit) {
	display: none;
}

.ws-sb--sheet .ws-sb__link {
	padding-top: 9px;
	padding-bottom: 9px;
	font-size: .86rem;
}

.ws-sb--sheet .ws-sb__all {
	padding: 8px 12px;
	font-size: .98rem;
}

@media (prefers-reduced-motion: reduce) {
	.ws-sb,
	.ws-sb-veil,
	.ws-sb__all svg {
		transition: none;
	}

	.ws-sb--busy .ws-sb__bar {
		animation: none;
	}
}