/**
 * Storefront search autocomplete.
 *
 * Theme-agnostic: every color reads a --wmtg-ac-* custom property with a
 * light-theme fallback, so a theme can restyle the dropdown by defining
 * those properties (e.g. on :root) without touching this file.
 */

.wmtg-ac-anchor {
	position: relative;
}

.wmtg-ac {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: auto;
	width: max(100%, min(480px, 90vw));
	z-index: 60;
	overflow: hidden;
	padding: 8px;
	background: var(--wmtg-ac-bg, #fff);
	color: var(--wmtg-ac-text, #1e1e1e);
	border: 1px solid var(--wmtg-ac-border, #ddd);
	border-radius: var(--wmtg-ac-radius, 8px);
	box-shadow: var(--wmtg-ac-shadow, 0 10px 30px rgba(0, 0, 0, 0.15));
	font-size: 13.5px;
	line-height: 1.4;
}

.wmtg-ac__label {
	padding: 8px 8px 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wmtg-ac-label, #7f54b3);
}

.wmtg-ac__row,
.wmtg-ac__all {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
}

.wmtg-ac__row:hover,
.wmtg-ac__row.is-active,
.wmtg-ac__all:hover,
.wmtg-ac__all.is-active {
	background: var(--wmtg-ac-hover, rgba(0, 0, 0, 0.05));
}

.wmtg-ac__thumb {
	width: 24px;
	height: 34px;
	flex: none;
	border-radius: 3px;
	overflow: hidden;
	background: var(--wmtg-ac-thumb-bg, rgba(0, 0, 0, 0.08));
}

.wmtg-ac__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wmtg-ac__main {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	overflow: hidden;
	white-space: nowrap;
}

.wmtg-ac__name {
	flex: none;
	max-width: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wmtg-ac__meta {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	color: var(--wmtg-ac-muted, #757575);
}

.wmtg-ac__price {
	flex: none;
	font-size: 12.5px;
	color: var(--wmtg-ac-muted, #757575);
}

.wmtg-ac__empty {
	padding: 10px 8px;
	color: var(--wmtg-ac-muted, #757575);
}

.wmtg-ac__all {
	margin-top: 2px;
	font-size: 12px;
	color: var(--wmtg-ac-accent, #7f54b3);
}