/* ==========================================================================
   Site search — header overlay + results page
   Brand: Billi Blue #181D46, Light Blue #90CDEB, greys #EAEAEA/#F5F5F5.
   2px controls, 4px cards (sharper-corner direction, Aug 2026).
   ========================================================================== */

/* --- Overlay: reset legacy desktop.css rules (search-area input at 120px,
   transparent bg, white text; search-listings li B-icons) --- */

.site-search-holder .search-area {
	height: auto;
	background: #181D46;
}

.site-search-holder .search-area form {
	height: auto;
}

.site-search-holder input.search-field {
	height: auto;
	line-height: 1.4;
}

.site-search-holder input.search-field::placeholder {
	color: #6b6f8a;
	opacity: 1;
}

.site-search-holder .search-listings {
	margin-top: 0;
	height: auto;
}

.site-search-holder .search-listings li {
	list-style: none;
	margin: 0;
	width: auto;
	float: none;
}

.site-search-holder .search-listings li:before {
	display: none;
}

.site-search-holder .search-listings li a {
	font-size: 16px;
	font-weight: 400;
	margin-top: 0;
	width: auto;
	float: none;
}

/* Logged-in: the WP admin bar shifts the fixed header down (32px, 46px on
   small screens) but not the fixed overlay, which then paints over the
   bottom of the bar and clips the logo / close button. Match the offset. */

body.admin-bar .site-search-holder {
	top: calc(var(--header-chrome-h) + 32px);
	height: calc(100vh - var(--header-chrome-h) - 32px);
}

@media (max-width: 782px) {
	body.admin-bar .site-search-holder {
		top: calc(var(--header-chrome-h) + 46px);
		height: calc(100vh - var(--header-chrome-h) - 46px);
	}
}

/* --- Overlay: search bar --- */

.site-search-holder .search-area .row {
	max-width: 860px;
	margin: 0 auto;
	padding: 28px 20px;
}

.site-search-holder .search-form {
	display: flex;
	gap: 12px;
	align-items: center;
}

.site-search-holder input.search-field {
	flex: 1;
	font-size: 22px;
	font-weight: 300;
	color: #181D46;
	background: #fff;
	border: 0;
	border-radius: 2px;
	padding: 14px 26px;
	width: 100%;
}

.site-search-holder input.search-field:focus {
	outline: 3px solid #90CDEB;
	outline-offset: 1px;
}

.site-search-holder .search-submit {
	background: #90CDEB;
	color: #181D46;
	font-size: 16px;
	font-weight: 400;
	border: 0;
	border-radius: 2px;
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.site-search-holder .search-submit:hover {
	background: #fff;
}

/* --- Overlay: live results + quick links --- */

.site-search-holder .search-listings {
	background: #fff;
	overflow-y: auto;
	max-height: calc(100% - 100px);
}

.site-search-holder .search-listings .row {
	max-width: 860px;
	margin: 0 auto;
	padding: 24px 20px 40px;
}

.live-group h3,
.search-quicklinks h3 {
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #181D46;
	border-bottom: 1px solid #EAEAEA;
	padding-bottom: 8px;
	margin: 24px 0 14px;
}

.live-products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.live-card {
	display: flex;
	flex-direction: column;
	background: #F5F5F5;
	border-radius: 4px;
	padding: 14px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: border-color 0.15s ease;
}

.live-card:hover,
.live-card.is-active {
	border-color: #90CDEB;
}

.live-card img,
.live-card-noimg {
	width: 100%;
	height: 110px;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
	margin-bottom: 10px;
}

.live-card-noimg {
	display: block;
}

.live-card-title {
	font-size: 15px;
	font-weight: 600;
	color: #181D46;
	line-height: 1.3;
}

.live-card-sku {
	font-size: 12px;
	color: #6b6f8a;
	margin-top: 4px;
}

.live-card-price {
	font-size: 15px;
	font-weight: 600;
	color: #181D46;
	margin-top: 6px;
}

.live-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.live-group ul li a,
.search-quicklinks ul li a {
	display: block;
	padding: 9px 2px;
	font-size: 16px;
	color: #181D46;
	text-decoration: none;
	border-radius: 4px;
}

.live-group ul li a:hover,
.live-group ul li a.is-active,
.search-quicklinks ul li a:hover {
	background: #F1F5F5;
	padding-left: 10px;
}

.live-viewall {
	display: inline-block;
	margin-top: 22px;
	background: #181D46;
	color: #fff;
	font-size: 16px;
	border-radius: 2px;
	padding: 12px 28px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.live-viewall:hover,
.live-viewall.is-active {
	background: #90CDEB;
	color: #181D46;
	opacity: 1; /* opt out of the theme's global a:hover fade */
}

.live-noresults {
	font-size: 16px;
	color: #181D46;
	padding: 12px 0;
}

/* --- Results page --- */

.search-results-page .search-form-top {
	display: flex;
	gap: 12px;
	max-width: 700px;
	margin: 0 0 10px;
}

.search-results-page .search-form-top .search-field {
	flex: 1;
	min-width: 0; /* else its intrinsic width pushes the button off small screens */
	font-size: 18px;
	color: #181D46;
	border: 1px solid #EAEAEA;
	border-radius: 2px;
	padding: 12px 24px;
}

.search-results-page .search-form-top .search-submit {
	background: #181D46;
	color: #fff;
	font-size: 16px;
	border: 0;
	border-radius: 2px;
	padding: 12px 30px;
	cursor: pointer;
}

.search-results-page .search-form-top .search-submit:hover {
	background: #90CDEB;
	color: #181D46;
}

.search-results-page h2 {
	font-size: 28px;
	font-weight: 600;
	color: #181D46;
	margin: 36px 0 18px;
}

.search-results-page h2 .result-count {
	font-size: 16px;
	font-weight: 400;
	color: #6b6f8a;
	margin-left: 10px;
}

ul.result-products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.result-card {
	background: #F5F5F5;
	border-radius: 4px;
	padding: 18px;
	display: flex;
	flex-direction: column;
}

.result-card img,
.result-card .result-card-noimg {
	width: 100%;
	height: 150px;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
	margin-bottom: 12px;
}

.result-card h3 {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 4px;
}

.result-card h3 a {
	color: #181D46;
	text-decoration: none;
}

.result-card .result-sku {
	font-size: 12px;
	color: #6b6f8a;
	margin: 0 0 6px;
}

.result-card .result-price {
	font-size: 16px;
	font-weight: 600;
	color: #181D46;
	margin: 0 0 14px;
}

.result-card .result-view {
	margin-top: auto;
	align-self: flex-start;
	background: #181D46;
	color: #fff;
	font-size: 15px;
	border-radius: 2px;
	padding: 10px 24px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.result-card .result-view:hover {
	background: #90CDEB;
	color: #181D46;
	opacity: 1; /* opt out of the theme's global a:hover fade */
}

ul.result-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.result-list li {
	border-bottom: 1px solid #EAEAEA;
	padding: 16px 0;
}

.result-list h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 6px;
}

.result-list h3 a {
	color: #181D46;
	text-decoration: none;
}

.result-list h3 a:hover {
	text-decoration: underline;
	text-decoration-color: #90CDEB;
	text-decoration-thickness: 2px;
}

.result-list p {
	font-size: 16px;
	color: #444;
	margin: 0;
}

.search-noresults {
	max-width: 700px;
}

.search-noresults p {
	font-size: 18px;
	color: #181D46;
}

/* --- Mobile --- */

@media (max-width: 991px) {
	.live-products {
		grid-template-columns: 1fr;
	}

	ul.result-products {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-search-holder .search-form {
		flex-direction: column;
	}

	.site-search-holder .search-field,
	.site-search-holder .search-submit {
		width: 100%;
	}
}

@media (max-width: 600px) {
	ul.result-products {
		grid-template-columns: 1fr;
	}
}

/* header.php always prints the breadcrumb section; on search results it has
   no trail to show and renders as an empty 32px white strip below the header. */
body.search .breadcrumb-holder {
	display: none;
}

/* --- 404 page (404.php): reuses the results-page form, cards and lists
   above; these are its own blocks --- */

.nf-more {
	display: inline-block;
	margin-top: 18px;
	font-size: 16px;
	font-weight: 600;
	color: #181D46;
	text-decoration: underline;
	text-decoration-color: #90CDEB;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

ul.nf-routes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nf-routes li {
	margin: 0;
}

.nf-routes li:before {
	display: none;
}

.nf-routes a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	background: #F5F5F5;
	border: 2px solid transparent;
	border-radius: 4px;
	padding: 22px;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.nf-routes a:hover,
.nf-routes a:focus-visible {
	border-color: #90CDEB;
	opacity: 1; /* opt out of the theme's global a:hover fade */
}

.nf-routes strong {
	font-size: 18px;
	font-weight: 600;
	color: #181D46;
}

.nf-routes strong:after {
	content: " \2192";
}

.nf-routes span {
	font-size: 15px;
	line-height: 1.5;
	color: #444;
}

.nf-popular ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nf-popular li {
	margin: 0;
}

.nf-popular li:before {
	display: none;
}

.nf-popular a {
	display: inline-block;
	border: 1px solid #181D46;
	border-radius: 2px;
	padding: 8px 18px;
	font-size: 15px;
	color: #181D46;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nf-popular a:hover {
	background: #181D46;
	color: #fff;
	opacity: 1;
}

.nf-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 48px;
	background: #181D46;
	border-radius: 4px;
	padding: 28px 32px;
}

.nf-help p {
	flex: 1 1 320px;
	margin: 0;
	font-size: 18px;
	color: #fff;
}

.nf-btn {
	display: inline-block;
	background: #90CDEB;
	color: #181D46;
	font-size: 16px;
	border: 2px solid #90CDEB;
	border-radius: 2px;
	padding: 12px 28px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nf-btn:hover {
	background: #fff;
	border-color: #fff;
	color: #181D46;
	opacity: 1;
}

.nf-btn--ghost {
	background: transparent;
	color: #fff;
}

@media (max-width: 991px) {
	ul.nf-routes {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	ul.nf-routes {
		grid-template-columns: 1fr;
	}

	.nf-help {
		padding: 24px 20px;
	}

	.nf-btn {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* desktop.css only whitens this on .search-results; the 404 hero shares it. */
.error404 .page-title p {
	color: #fff;
}