/**
 * 6Labz live search dropdown — two-column layout.
 * Left: "Suggestions" (matching titles as text, typed term bolded).
 * Right: "Products" (thumbnail + title cards).
 * Pairs with assets/js/labz-live-search.js.
 */

/* Match the dropdown to the header search bar's exact width by stretching it
   edge-to-edge inside the (relative) search form. */
.ast-live-search-results.labz-live-search-results {
	width: auto;
	left: 0;
	right: 0;
	padding: 6px 0;
	/* Thin scrollbar (Firefox). */
	scrollbar-width: thin;
	scrollbar-color: #cbd2d9 transparent;
}

/* Thin scrollbar (Chrome / Safari / Edge). */
.ast-live-search-results.labz-live-search-results::-webkit-scrollbar {
	width: 6px;
}

.ast-live-search-results.labz-live-search-results::-webkit-scrollbar-track {
	background: transparent;
}

.ast-live-search-results.labz-live-search-results::-webkit-scrollbar-thumb {
	background: #cbd2d9;
	border-radius: 4px;
}

.ast-live-search-results.labz-live-search-results::-webkit-scrollbar-thumb:hover {
	background: #9aa3ad;
}

/* Search results — single-column product list. Astra forces the wrapper to
   `display:flex; flex-wrap:wrap`, so we force block layout to stack the cards. */
.labz-live-search-results .labz-search-results-list {
	display: block;
}

/* Section headings ("PRODUCTS" / "POPULAR PRODUCTS"). */
.labz-search-cols .ast-search--posttype-heading {
	display: block;
	padding: 8px 16px 4px;
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #98a2b3;
	font-weight: 600;
}

/* Long product titles wrap in full rather than truncating. */
.labz-search-results-list .labz-search-title {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.labz-search-results-list .labz-product-item {
	align-items: flex-start; /* Keep the thumb at top when the title wraps. */
}

/* Right column — product cards. */
.labz-product-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	line-height: 1.35;
}

.labz-search-thumb {
	position: relative;
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: #f2f4f7;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* "Sale" badge — inline next to the title (never over the image). */
.labz-search-titlerow {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.labz-search-sale {
	flex: 0 0 auto;
	background: #013851;
	color: #fff;
	font-size: 11px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 6px;
	border-radius: 4px;
	pointer-events: none;
}

.labz-search-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.labz-search-thumb--empty {
	background: #eef0f3;
}

.labz-product-item .labz-search-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.labz-product-item .labz-search-title {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #344054;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Popular-products empty state.
   Astra forces `.ast-live-search-results > * { display:flex }`, so the heading
   is kept OUT of the card flex/grid: it's a plain block above `.labz-popular-grid`.
   Override the Astra-forced flex on our outer wrapper so it's a normal block. */
.labz-live-search-results .labz-search-cols--popular {
	display: block;
}

.labz-popular .ast-search--posttype-heading {
	display: block;
	width: 100%;
	padding: 8px 16px 4px; /* Snug space above and below the heading. */
}

/* Cards laid out two-up; grid rows size to content (no tall heading row). */
.labz-popular-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.labz-popular-grid .labz-product-item {
	padding: 8px 16px; /* Tighter rows so 6 cards don't feel airy. */
	align-items: flex-start; /* Keep thumb at top when the title wraps. */
}

/* Popular cards have room to breathe — let long titles wrap in full instead
   of truncating with an ellipsis. */
.labz-popular-grid .labz-search-title {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

@media (max-width: 600px) {
	.labz-popular-grid {
		grid-template-columns: 1fr;
	}
}

/* Price line under the title. WooCommerce's price_html carries the
   strikethrough (<del>) + sale price (<ins>) markup for sale items. */
.labz-product-item .labz-search-price {
	font-size: 14px;
	font-weight: 700;
	color: #013851;
}

.labz-product-item .labz-search-price del {
	color: #98a2b3;
	font-weight: 400;
	margin-right: 5px;
}

.labz-product-item .labz-search-price ins {
	text-decoration: none;
	color: #013851;
}

.labz-product-item .labz-search-price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* Hover state. */
.labz-product-item:hover {
	background: #f6f8fa;
}

/* ---- Loading shimmer (skeleton while a search request is in flight) ---- */
.labz-skel {
	display: block;
	border-radius: 4px;
	background: #eef0f3;
	background-image: linear-gradient(
		90deg,
		#eef0f3 0,
		#e2e6eb 40px,
		#eef0f3 80px
	);
	background-size: 600px 100%;
	background-repeat: no-repeat;
	animation: labz-shimmer 1.2s linear infinite;
}

@keyframes labz-shimmer {
	0% {
		background-position: -120px 0;
	}
	100% {
		background-position: 480px 0;
	}
}

.labz-skel-line {
	height: 12px;
	width: 100%;
}

.labz-skel-line--short {
	width: 55%;
}

.labz-skel-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
}

.labz-skel-thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 8px;
}

.labz-skel-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.labz-skel {
		animation: none;
	}
}