/* =========================================================
   Eclat Gold — sugestões da busca
   ========================================================= */

/* O form vira a âncora do dropdown. `position` declarado explicitamente
   porque o Hello Elementor não define nenhum em form e o padrão `static`
   faria a caixa se posicionar pela página inteira. */
.eg-search form.eg-tem-sug,
form.eg-mnav-busca.eg-tem-sug{position:relative}

.eg-sug{
	position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:120;
	background:#fff;border:1px solid var(--eg-line);border-radius:14px;
	box-shadow:0 18px 44px rgba(6,58,49,.13),0 2px 6px rgba(0,0,0,.04);
	padding:6px;overflow:hidden auto;max-height:min(70vh,460px);
	font-family:var(--eg-body)
}
.eg-sug[hidden]{display:none}

/* ---------- item ---------- */
/* grid de 3 colunas: a do meio absorve a sobra, então nome comprido encolhe
   sem empurrar o preço para fora da caixa */
.eg-sug-item{
	display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;
	padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--eg-ink);
	background:none;border:none;transition:background .12s
}
.eg-sug-item:hover,
.eg-sug-item.is-ativo,
.eg-sug-item:focus-visible{background:var(--eg-g50);color:var(--eg-ink);outline:none}

.eg-sug-img{
	width:44px;height:44px;border-radius:9px;background:var(--eg-sand);
	display:grid;place-items:center;overflow:hidden;flex-shrink:0
}
.eg-sug-img img{width:100%;height:100%;object-fit:contain;display:block}

.eg-sug-ic{
	width:44px;height:44px;border-radius:9px;background:var(--eg-g50);color:var(--eg-brand);
	display:grid;place-items:center
}
.eg-sug-ic svg{width:19px;height:19px;display:block}

.eg-sug-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
/* o nome trunca em vez de quebrar: duas linhas desalinhariam a altura das
   sugestões e a lista perderia o ritmo */
.eg-sug-nome{
	font-size:14px;font-weight:500;line-height:1.35;color:var(--eg-ink);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
/* o trecho digitado, destacado */
.eg-sug-nome b{font-weight:700;color:var(--eg-brand-dark)}
.eg-sug-txt small{
	font-size:11.5px;color:var(--eg-muted);line-height:1.3;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

.eg-sug-preco{
	display:flex;flex-direction:column;align-items:flex-end;gap:1px;
	text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums
}
.eg-sug-preco del{font-size:11px;color:var(--eg-muted);text-decoration:line-through}
.eg-sug-preco b{font-size:14px;font-weight:700;color:var(--eg-ink)}

/* ---------- rodapé e vazio ---------- */
/* background e color declarados: o tema pai pinta todo button de #cc3366 */
.eg-sug-ver{
	display:block;width:100%;margin-top:4px;padding:11px 10px;
	border:none;border-top:1px solid var(--eg-line);border-radius:0 0 9px 9px;
	background:#fff;color:var(--eg-brand-dark);
	font-family:var(--eg-body);font-size:13px;font-weight:600;text-align:center;cursor:pointer;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.eg-sug-ver:hover,
.eg-sug-ver:focus{background:var(--eg-g50);color:var(--eg-brand-dark)}

.eg-sug-vazio{margin:0;padding:16px 12px 8px;text-align:center;font-size:13.5px;color:var(--eg-muted)}
.eg-sug-todos{
	display:block;margin:0 6px 6px;padding:10px;border-radius:9px;
	background:var(--eg-g50);color:var(--eg-brand-dark);
	text-align:center;font-size:13px;font-weight:600;text-decoration:none
}
.eg-sug-todos:hover,
.eg-sug-todos:focus{background:var(--eg-brand);color:#fff}

/* No drawer o form tem 16px de padding lateral; sem isto a caixa nasceria
   colada nas bordas do painel, desalinhada do campo que a abriu. */
form.eg-mnav-busca.eg-tem-sug .eg-sug{left:16px;right:16px;top:calc(100% + 2px)}

/* ---------- celular ----------
   No drawer o campo fica no topo de um painel que já rola; a caixa presa ao
   form acompanha o campo e não some atrás do menu. */
@media(max-width:600px){
	.eg-sug{max-height:min(60vh,380px);border-radius:12px}
	.eg-sug-item{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:8px}
	.eg-sug-img,.eg-sug-ic{width:40px;height:40px}
	.eg-sug-nome{font-size:13.5px}
	.eg-sug-preco b{font-size:13px}
}

@media(prefers-reduced-motion:reduce){
	.eg-sug-item{transition:none}
}