/* ═════════════════════════════════════════════════════════════════════════════
   suggest.css — live search suggestions (assets/js/search-suggest.js), anchored under a search
   box: the public header's .search-form, or any form[data-suggest] (the shop page's search).
   ONE definition, linked by index, pricing and shop.
   ═════════════════════════════════════════════════════════════════════════════ */

.search-form,
form[data-suggest] { position: relative; }

.suggest {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: -1px;
    right: -1px;
    z-index: var(--z-dropdown);
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    padding: var(--space-1) 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-floating);
    text-align: left;
}

.suggest-group {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-fg-subtle);
}

.suggest-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-md);
    padding: var(--space-1) var(--space-3);
    color: var(--color-fg-default);
    font-size: var(--text-ui);
    text-decoration: none;
}

.suggest-item.is-active { background: var(--color-bg-muted); }

@media (hover: hover) and (pointer: fine) {
    .suggest-item:hover { background: var(--color-bg-muted); text-decoration: none; }
}

.suggest-thumb {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
}

.suggest-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.suggest-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-meta { flex: 0 0 auto; font-size: var(--text-small); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.suggest-all { margin-top: var(--space-1); border-top: 1px solid var(--color-border); font-weight: 500; }