/*
 * AO Supply product search autocomplete.
 *
 * The dropdown reads as an equipment parts tray: quiet white surfaces,
 * inventory-style metadata, and a single cyan datum rail.
 */

.aos-header-search {
	position: relative;
	z-index: 72;
}

.aos-header-search.is-autocomplete-open {
	z-index: 140;
	overflow: visible;
}

.aos-search-suggestions {
	position: absolute;
	z-index: 220;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	overflow: hidden;
	border: 1px solid var(--aos-color-border-default);
	border-radius: var(--aos-radius-lg);
	background: var(--aos-color-surface-elevated);
	box-shadow: 0 22px 54px rgba(15, 27, 41, 0.22), 0 4px 14px rgba(15, 27, 41, 0.1);
	color: var(--aos-color-text-primary);
	transform-origin: top center;
	animation: aos-search-panel-in 160ms var(--aos-ease-standard) both;
}

.aos-search-suggestions::before {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--aos-color-action-selected) 0 28%, var(--aos-color-action-primary) 28% 100%);
	content: "";
}

.aos-search-suggestions[hidden] {
	display: none !important;
}

.aos-search-suggestions__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 42px;
	padding: 10px 14px 8px;
	border-bottom: 1px solid var(--aos-color-border-default);
	background:
		linear-gradient(90deg, rgba(0, 200, 255, 0.08), transparent 42%),
		var(--aos-color-surface-brand-subtle);
}

.aos-search-suggestions__heading {
	color: var(--aos-color-brand-primary);
	font-family: var(--aos-font-family-mono);
	font-size: var(--aos-font-size-100);
	font-weight: var(--aos-font-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.aos-search-suggestions__count {
	color: var(--aos-color-text-secondary);
	font-family: var(--aos-font-family-mono);
	font-size: var(--aos-font-size-100);
}

.aos-search-suggestions__list {
	max-height: min(58vh, 430px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-color: var(--aos-color-border-strong) transparent;
	scrollbar-width: thin;
}

.aos-search-suggestion {
	position: relative;
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 24px;
	gap: 12px;
	align-items: center;
	min-height: 80px;
	padding: 9px 14px;
	border-top: 1px solid rgba(216, 227, 236, 0.82);
	color: var(--aos-color-text-primary);
	text-decoration: none;
	transition: background-color 140ms ease, box-shadow 140ms ease;
}

.aos-search-suggestion:first-child {
	border-top: 0;
}

.aos-search-suggestion::before {
	position: absolute;
	top: 9px;
	bottom: 9px;
	left: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--aos-color-action-selected);
	content: "";
	opacity: 0;
	transform: scaleY(0.55);
	transition: opacity 140ms ease, transform 140ms ease;
}

.aos-search-suggestion:hover,
.aos-search-suggestion.is-active,
.aos-search-suggestion[aria-selected="true"] {
	background: linear-gradient(90deg, rgba(0, 200, 255, 0.1), rgba(240, 251, 252, 0.72));
	color: var(--aos-color-brand-strong);
	box-shadow: inset 0 0 0 1px rgba(0, 123, 181, 0.08);
}

.aos-search-suggestion:hover::before,
.aos-search-suggestion.is-active::before,
.aos-search-suggestion[aria-selected="true"]::before {
	opacity: 1;
	transform: scaleY(1);
}

.aos-search-suggestion__media {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	overflow: hidden;
	border: 1px solid var(--aos-color-border-default);
	border-radius: var(--aos-radius-md);
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(224, 247, 250, 0.72));
}

.aos-search-suggestion__media img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 5px;
	object-fit: contain;
}

.aos-search-suggestion__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.aos-search-suggestion__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--aos-color-brand-strong);
	font-size: var(--aos-font-size-300);
	font-weight: var(--aos-font-weight-bold);
	line-height: 1.28;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.aos-search-suggestion__meta {
	overflow: hidden;
	color: var(--aos-color-text-secondary);
	font-family: var(--aos-font-family-mono);
	font-size: var(--aos-font-size-100);
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aos-search-suggestion__arrow {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--aos-color-border-default);
	border-radius: 50%;
	color: var(--aos-color-action-primary);
	font-size: 0;
	transition: color 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.aos-search-suggestion__arrow::before {
	display: block;
	content: "→";
	font-size: 1rem;
	line-height: 1;
	transform: translateY(-2px);
}

.aos-search-suggestion:hover .aos-search-suggestion__arrow,
.aos-search-suggestion.is-active .aos-search-suggestion__arrow {
	border-color: var(--aos-color-action-primary);
	color: var(--aos-color-brand-primary);
	transform: translateX(2px);
}

.aos-search-suggestions__message {
	display: grid;
	place-items: center;
	min-height: 82px;
	padding: 18px;
	color: var(--aos-color-text-secondary);
	font-size: var(--aos-font-size-300);
	line-height: 1.5;
	text-align: center;
}

.aos-search-suggestions__message.is-loading {
	background:
		linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.08), transparent);
	background-size: 220% 100%;
	animation: aos-search-loading 1.15s ease-in-out infinite;
}

.aos-search-suggestions__message.is-error {
	color: var(--aos-color-state-danger);
}

@keyframes aos-search-panel-in {
	from {
		opacity: 0;
		transform: translateY(-6px) scaleY(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scaleY(1);
	}
}

@keyframes aos-search-loading {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: -100% 0;
	}
}

@media (max-width: 820px) {
	.aos-header-search.is-autocomplete-open,
	.aos-site-header.is-scrolled .aos-header-search.is-autocomplete-open {
		max-height: 96px;
		overflow: visible;
		padding-bottom: 1rem;
		pointer-events: auto;
		opacity: 1;
		transform: translateY(0);
	}

	.aos-search-suggestions {
		top: calc(100% - 8px);
	}
}

@media (max-width: 620px) {
	.aos-search-suggestions {
		right: -2px;
		left: -2px;
		border-radius: 12px;
		box-shadow: 0 18px 38px rgba(15, 27, 41, 0.24), 0 3px 10px rgba(15, 27, 41, 0.1);
	}

	.aos-search-suggestions__header {
		min-height: 38px;
		padding-inline: 12px;
	}

	.aos-search-suggestion {
		grid-template-columns: 54px minmax(0, 1fr) 22px;
		gap: 10px;
		min-height: 72px;
		padding: 8px 10px;
	}

	.aos-search-suggestion__media {
		width: 54px;
		height: 54px;
	}

	.aos-search-suggestion__name {
		font-size: var(--aos-font-size-200);
	}

	.aos-search-suggestion__meta {
		font-size: 0.65rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aos-search-suggestions,
	.aos-search-suggestions__message.is-loading,
	.aos-search-suggestion,
	.aos-search-suggestion::before,
	.aos-search-suggestion__arrow {
		animation: none;
		transition: none;
	}
}