/* Search-box autocomplete dropdown — paired with
   idomains/js/component/searchAutocomplete.js.

   Class names are the tenant-override contract (.search-autocomplete-ul,
   .thumb, .item-main, .item-title, .item-code, .item-price, .item-excerpt,
   .no-img, .-active, .-group, .-empty, .-recent, .-clear, .-see-all,
   mark.ac-match) — keep them stable. Theme hooks: the --search-ac-* custom
   properties below all carry self-contained defaults; a tenant stylesheet
   overrides the variables, not the rules.

   Emphasis marks the match, not the row: titles sit at normal weight and
   the typed tokens render as mark.ac-match.

   Geometry: the input's parent gets .search-ac-anchor from the JS; the
   panel anchors below the input, spans at least its width, grows to
   content up to a viewport-safe cap, and the JS adds -flip (right-aligned)
   when the natural position would leave the viewport. */

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

.search-autocomplete-ul					{ position:absolute; top:calc(100% + 4px); left:0; z-index:1000; min-width:100%; width:max-content; max-width:min(92vw,440px); max-height:min(60vh,420px); overflow-y:auto; margin:0; padding:4px; list-style:none; text-align:left; background:var(--search-ac-bg,#fff); border:1px solid var(--search-ac-border,#ddd); border-radius:var(--search-ac-radius,8px); box-shadow:0 6px 16px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
	&.-flip								{ left:auto; right:0; }
	mark.ac-match						{ background:none; color:inherit; font-weight:700; }
	li									{ margin:0; }
	li.-group							{ padding:8px 8px 2px; font-size:.7em; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--search-ac-muted,#777);
		&:first-child					{ padding-top:4px; }
	}
	li.-empty							{ padding:10px 8px; font-size:.9em; color:var(--search-ac-muted,#777); }
	li[role="option"]					{ border-radius:calc(var(--search-ac-radius,8px) - 4px);
		a								{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:0 10px; align-items:center; padding:7px 8px; text-decoration:none; color:inherit; line-height:1.35; }
		&.no-img a						{ grid-template-columns:minmax(0,1fr) auto; }
		/* excerpt rows top-align so their titles hold the same first-line
		   position; single-visual-line rows stay centred on the thumb */
		a:has(.item-excerpt)			{ align-items:start; }
		+ li[role="option"]				{ border-top:1px solid var(--search-ac-rule,#f0f0f3); }
		&.-active,
		&:hover							{ background:var(--search-ac-active-bg,#f2f4f7); }
		.thumb							{ width:40px; height:40px; border-radius:6px; background-position:center; background-size:cover; background-repeat:no-repeat; }
		.item-main						{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; min-width:0; }
		.item-title						{ font-weight:500; font-size:.95em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
		.item-code						{ padding:1px 6px; font-size:.75em; color:var(--search-ac-muted,#777); background:var(--search-ac-chip-bg,#f0f1f3); border-radius:99px; white-space:nowrap; }
		.item-price						{ font-weight:600; font-size:.9em; white-space:nowrap; }
		.item-excerpt					{ flex-basis:100%; font-size:.85em; color:var(--search-ac-muted,#777); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
		&.-recent a						{ padding:7px 8px; font-size:.95em; display:block; }
		&.-clear a						{ display:block; padding:6px 8px; text-align:center; font-size:.8em; color:var(--search-ac-muted,#777); }
		&.-see-all						{ border-top:1px solid var(--search-ac-border,#ddd); border-radius:0; margin-top:4px;
			a							{ display:block; padding:8px; text-align:center; font-size:.9em; font-weight:600; color:var(--search-ac-accent,#3b6ea5); }
		}
	}
}