/* TypeSense rich autocomplete dropdown.
   Theme-agnostic: neutral slate base + one accent sampled from the host theme at runtime
   (--ts-ac-accent, set by the widget JS; falls back to a quiet slate when no theme accent
   can be found). Icons are drawn in pure CSS — no image files, nothing to 404.
   Scoped under `.ui-autocomplete.ts-ac-menu` so it out-specifies the theme's stock
   `.ui-autocomplete` / `.ui-menu-item` rules without !important. */

.ui-autocomplete.ts-ac-menu {
    padding: 0;
    font-family: inherit;
    --ts-ac-accent: #334155;
}

/* strip the theme's per-item chrome so each row owns its own look */
.ui-autocomplete.ts-ac-menu li {
    list-style: none;
    margin: 0;
    border: 0;
    background: none;
    float: none;
}

/* ---- section header (non-interactive) ---- */
.ui-autocomplete.ts-ac-menu .ts-ac-section {
    padding: 9px 14px 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
    background: #f8fafc;
    border-top: 1px solid #edf1f6;
    pointer-events: none;
    cursor: default;
}
.ui-autocomplete.ts-ac-menu .ts-ac-section:first-child {
    border-top: 0;
}

/* ---- generic row ---- */
.ui-autocomplete.ts-ac-menu .ts-ac-row > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 14px;
    margin: 0;
    color: #1f2733;
    text-decoration: none;
    line-height: 1.3;
    cursor: pointer;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.ui-autocomplete.ts-ac-menu .ts-ac-row > a.ui-state-active,
.ui-autocomplete.ts-ac-menu .ts-ac-row > a.ui-state-focus,
.ui-autocomplete.ts-ac-menu .ts-ac-row > a:hover {
    background: #f1f5f9;
    color: #1f2733;
}

/* ---- suggestion: CSS magnifier + phrase (completion emphasized) ---- */
.ui-autocomplete.ts-ac-menu .ts-ac-ic {
    position: relative;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    color: var(--ts-ac-accent);
    opacity: .9;
}
.ui-autocomplete.ts-ac-menu .ts-ac-ic::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 9px;
    height: 9px;
    border: 1.6px solid currentColor;
    border-radius: 50%;
}
.ui-autocomplete.ts-ac-menu .ts-ac-ic::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 9px;
    width: 6px;
    height: 1.6px;
    background: currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    transform-origin: left center;
}
.ui-autocomplete.ts-ac-menu .ts-ac-text {
    flex: 1;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-autocomplete.ts-ac-menu .ts-ac-text b {
    color: #1f2733;
    font-weight: 700;
}

/* ---- category: chip + match count ---- */
.ui-autocomplete.ts-ac-menu .ts-ac-chip {
    background: #eef2f7;
    color: #475569;
    border-radius: 13px;
    padding: 3px 11px;
    font-size: 12.5px;
    max-width: 78%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-autocomplete.ts-ac-menu .ts-ac-cnt {
    margin-left: auto;
    color: #94a3b8;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* ---- product: thumbnail + name + price ---- */
.ui-autocomplete.ts-ac-menu .ts-ac-thumb {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 5px;
    flex: 0 0 38px;
    background: #f1f5f9;
    border: 1px solid #edf1f6;
}
.ui-autocomplete.ts-ac-menu .ts-ac-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-autocomplete.ts-ac-menu .ts-ac-price {
    margin-left: auto;
    padding-left: 8px;
    color: var(--ts-ac-accent);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

/* ---- footer: see-all-results ---- */
.ui-autocomplete.ts-ac-menu .ts-ac-foot > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ts-ac-accent);
    background: #f8fafc;
    border-top: 1px solid #edf1f6;
    text-decoration: none;
}
.ui-autocomplete.ts-ac-menu .ts-ac-foot > a.ui-state-active,
.ui-autocomplete.ts-ac-menu .ts-ac-foot > a.ui-state-focus,
.ui-autocomplete.ts-ac-menu .ts-ac-foot > a:hover {
    text-decoration: underline;
    background: #eef2f7;
}
.ui-autocomplete.ts-ac-menu .ts-ac-foot .ts-ac-arrow {
    font-weight: 700;
}