/* Velinn Busca: painel de resultados. Usa as variáveis do CSS de marca; os valores depois da vírgula valem se a variável não existir. */
.vb-host { position: relative; }
.vb-panel[hidden] { display: none; }
.vb-panel {
	position: absolute;
	top: calc(100% + var(--space-4, 1rem));
	left: 0;
	z-index: 1000;
	box-sizing: border-box;
	width: min(34rem, calc(100vw - 2rem));
	max-height: min(70vh, 32rem);
	overflow-y: auto;
	background: var(--carbon, hsla(0, 0%, 8%, 1));
	border: 1px solid hsla(38, 21%, 93%, .14);
	border-radius: var(--radius-md, 4px);
	box-shadow: 0 1.5rem 3rem hsla(0, 0%, 4%, .45);
	font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
	color: var(--ivory, hsla(36, 33%, 97%, 1));
	text-align: left;
}
.vb-group {
	padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-2, .5rem);
	font-size: var(--fs-overline, .6875rem);
	font-weight: var(--fw-medium, 500);
	letter-spacing: var(--ls-overline, .25em);
	text-transform: uppercase;
	color: var(--silver, hsla(0, 0%, 78%, 1));
}
/* a.vb-*: especificidade acima dos estilos de link do tema (sublinhado e cor) */
.vb-panel a.vb-item {
	display: flex;
	align-items: center;
	gap: var(--space-4, 1rem);
	padding: var(--space-3, .75rem) var(--space-4, 1rem);
	color: inherit;
	text-decoration: none;
	transition: var(--transition-fast, all .3s ease);
}
.vb-panel a.vb-item:hover,
.vb-panel a.vb-item:focus { color: inherit; text-decoration: none; }
.vb-panel a.vb-item:hover,
.vb-panel a.vb-item.is-active { background: hsla(38, 21%, 93%, .06); }
.vb-panel a.vb-item:hover .vb-title,
.vb-panel a.vb-item.is-active .vb-title { color: var(--ember, hsla(21, 82%, 51%, 1)); }
.vb-thumb {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	object-fit: cover;
	border-radius: var(--radius-md, 4px);
	background: var(--graphite, hsla(0, 0%, 12%, 1));
}
.vb-text { display: flex; flex-direction: column; min-width: 0; gap: var(--space-1, .25rem); }
.vb-title {
	font-size: var(--fs-body-base, 1rem);
	font-weight: var(--fw-medium, 500);
	line-height: var(--lh-heading-relaxed, 1.2);
	transition: var(--transition-fast, all .3s ease);
}
.vb-sub { font-size: var(--fs-body-sm, .875rem); color: var(--silver, hsla(0, 0%, 78%, 1)); }
.vb-panel a.vb-all {
	display: block;
	padding: var(--space-4, 1rem);
	border-top: 1px solid hsla(38, 21%, 93%, .1);
	font-size: var(--fs-body-sm, .875rem);
	color: var(--silver, hsla(0, 0%, 78%, 1));
	text-decoration: none;
	transition: var(--transition-fast, all .3s ease);
}
.vb-panel a.vb-all:hover,
.vb-panel a.vb-all.is-active { text-decoration: none; color: var(--ember, hsla(21, 82%, 51%, 1)); background: hsla(38, 21%, 93%, .06); }
.vb-empty { padding: var(--space-5, 1.25rem); font-size: var(--fs-body-sm, .875rem); color: var(--silver, hsla(0, 0%, 78%, 1)); }

@media (max-width: 767px) {
	.vb-panel { position: fixed; top: 5.5rem; left: 1rem; right: 1rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.vb-item, .vb-title, .vb-all { transition: none; }
}