:root { --xbas-accent: #1e5aa8; }

.xbas-box {
	position: absolute;
	z-index: 999999;
	background: #fff;
	color: #111;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	max-height: 75vh;
	overflow-y: auto;
	padding: 4px 16px 8px;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}
.xbas-box[hidden] { display: none; }
.xbas-box * { box-sizing: border-box; }

.xbas-heading {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 14px 0 8px;
	border-bottom: 1px solid #eee;
	margin-bottom: 4px;
	color: #111;
}

.xbas-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 6px;
	text-decoration: none !important;
	color: #111 !important;
	border-radius: 3px;
	cursor: pointer;
}
.xbas-item.is-active,
.xbas-item:hover { background: #f3f6fb; }

.xbas-thumb {
	flex: 0 0 40px;
	width: 40px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f4f4;
	overflow: hidden;
}
.xbas-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

.xbas-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 4px; }
.xbas-title { font-weight: 700; word-break: break-word; }
.xbas-price { font-size: 13px; color: #444; }
.xbas-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.xbas-stock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1.2; }
.xbas-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.xbas-stock-instock { color: #1a7f37; }
.xbas-stock-outofstock { color: #c62828; }
.xbas-stock-onbackorder { color: #b26a00; }
.xbas-item.is-oos .xbas-thumb img { opacity: .5; }
.xbas-snippet {
	font-size: 13px;
	color: #777;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.xbas-box mark {
	background: transparent;
	color: var(--xbas-accent);
	font-weight: 700;
	padding: 0;
}
.xbas-snippet mark { text-decoration: underline; text-decoration-color: #5b9bd5; }

.xbas-term { align-items: center; padding: 8px 6px; }
.xbas-icon { display: inline-flex; color: #aaa; flex: 0 0 20px; }

.xbas-viewall {
	justify-content: center;
	border-top: 1px solid #eee;
	margin-top: 8px;
	padding: 12px 6px 6px;
	font-size: 13px;
}
.xbas-viewall strong { color: var(--xbas-accent); margin-left: 4px; }

.xbas-empty { padding: 16px 4px; color: #666; }

@media (max-width: 600px) {
	.xbas-box { padding: 2px 10px 6px; }
	.xbas-snippet { display: none; }
}