/* Restrito ao autocomplete do cabeçalho; não muda o layout das demais áreas. */
.site-header:has(.search-suggestions:not([hidden])) { position: relative; z-index: 20; }
#header-search-form { position: relative; }
.search-suggestions { position: absolute; inset: calc(100% + 8px) -1px auto; z-index: 30; padding: 8px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: 0 12px 32px #00251926; overflow: hidden; }
.search-suggestions[hidden], .search-suggestions [hidden] { display: none !important; }
.search-suggestions-message { padding: 6px 14px 10px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.search-suggestions-list { max-height: min(420px, 52dvh); overflow-y: auto; overscroll-behavior: contain; list-style: none; padding: 0; margin: 0; }
.search-suggestions-list [role="option"] { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 10px 14px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.search-suggestions-list [role="option"]:hover, .search-suggestions-list [aria-selected="true"] { background: var(--green-wash); box-shadow: inset 3px 0 var(--green); }
.search-suggestion-picture { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; overflow: hidden; border-radius: 6px; background: #fff; color: #007a50; font-weight: 800; font-size: .8rem; }
.search-suggestion-picture img { width: 100%; height: 100%; object-fit: contain; }
.search-suggestion-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; font-size: .88rem; line-height: 1.35; overflow-wrap: anywhere; }
.search-suggestion-copy small, .search-suggestion-price small { display: block; color: var(--muted); font-size: .73rem; font-weight: 400; }
.search-suggestion-price { flex-shrink: 0; color: var(--green); text-align: right; font-size: .86rem; }
.search-all-results { display: block; width: 100%; min-height: 46px; padding: 12px 14px; border: 0; border-top: 1px solid var(--line); background: var(--surface-soft); color: var(--green); text-align: left; font-weight: 650; font-size: .84rem; overflow-wrap: anywhere; }
.search-all-results:hover { background: var(--green-wash); }
@media (max-width: 480px) {
  .search-suggestions-list [role="option"] { gap: 9px; padding: 10px; }
  .search-suggestion-picture { flex-basis: 38px; width: 38px; height: 38px; }
  .search-suggestion-copy { font-size: .8rem; }
  .search-suggestion-price { font-size: .77rem; }
}