/* ===========================================================================
   Search-box autocomplete dropdown.

   SINGLE SOURCE OF TRUTH -- loaded by BOTH sites (header.php and
   beads/header.php). Previously this block was duplicated inside
   css/jewelryfindings.css and beads/shared/jewelryfindings.css, which are two
   genuinely different legacy stylesheets that merely share a filename. The
   beads copy never received it, so the beads dropdown rendered completely
   unstyled (raw full-size images, overlapping text) while findings looked fine.

   Kept as its own file rather than merged into either stylesheet: those two
   files disagree on 47 selectors with real layout values (e.g. #bubblebottom is
   600px on beads vs 670px on findings), so they cannot be consolidated without
   breaking one site's layout. This block, by contrast, is identical for both.

   Markup comes from shared/search-suggest.php; behaviour from
   shared/search-suggest.js. Both are already shared, so this makes the CSS
   match -- one copy, both sites.

   Extracted 2026-08-10.
   ========================================================================== */

/* position/top/left/width are set inline by shared/search-suggest.js, computed from the
   search input's real on-screen position -- these headers are legacy, malformed table
   layouts (the <form> spans across a </td> boundary), so a plain CSS position:absolute
   anchored to an ancestor isn't reliable here. */
#site-search-suggestions {
	display: none;
	z-index: 1000;
	background: #ffffff;
	border: 1px solid #d8d8d8;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	text-align: left;
	overflow: hidden;
}
#site-search-suggestions ul {
	list-style: none;
	margin: 0;
	padding: 4px;
	max-height: 360px;
	overflow-y: auto;
}
/* Custom scrollbar (WebKit/Blink) so a long suggestion list doesn't scroll with the browser's
   bulky default bar -- falls back gracefully to the native scrollbar everywhere else. */
#site-search-suggestions ul::-webkit-scrollbar {
	width: 8px;
}
#site-search-suggestions ul::-webkit-scrollbar-track {
	background: transparent;
}
#site-search-suggestions ul::-webkit-scrollbar-thumb {
	background: #d0d0d0;
	border-radius: 4px;
}
#site-search-suggestions li {
	border-radius: 4px;
}
#site-search-suggestions li + li {
	margin-top: 2px;
}
#site-search-suggestions li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	text-decoration: none;
	color: #333333;
	border-radius: 4px;
	transition: background-color 0.12s ease-in-out;
}
#site-search-suggestions li a:hover,
#site-search-suggestions li a:focus {
	background: #f4f4f4;
}
#site-search-suggestions img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	flex-shrink: 0;
	border: 1px solid #ececec;
	border-radius: 4px;
	background: #fff;
	padding: 2px;
}
#site-search-suggestions .suggestion-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
#site-search-suggestions .suggestion-number {
	font-weight: bold;
	font-size: 13px;
	white-space: nowrap;
	color: #222;
}
#site-search-suggestions .suggestion-name {
	font-size: 12px;
	color: #777;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}