/* search-autocomplete.css — add this to your css/theme.css or link separately */

.ss-search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e4d6bd);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 20, 20, 0.12);
  max-height: 420px;
  overflow-y: auto;
  z-index: 500;
  padding: 6px;
}

.ss-search-group-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-faint, #a89f92);
  padding: 8px 10px 4px;
}

.ss-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink, #23201b);
  transition: background 0.15s ease;
}
.ss-search-row:hover { background: var(--paper-dim, #f4ede0); }
.ss-search-row img {
  width: 34px; height: 34px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line, #e4d6bd); flex-shrink: 0; background: #f4ede0;
}
.ss-search-row__name {
  flex: 1; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-search-row__price {
  font-size: 12.5px; font-weight: 700; color: var(--price, #12a150);
  font-family: var(--font-mono, monospace); flex-shrink: 0;
}
.ss-search-row--cat i { color: var(--marigold-deep, #b8781f); width: 16px; text-align: center; }

.ss-search-viewall {
  display: block; text-align: center; padding: 10px; margin-top: 4px;
  font-size: 12.5px; font-weight: 700; color: var(--marigold-deep, #b8781f);
  text-decoration: none; border-top: 1px solid var(--line, #e4d6bd);
}
.ss-search-viewall:hover { background: var(--paper-dim, #f4ede0); }

.ss-search-empty {
  padding: 14px 10px; font-size: 12.5px; color: var(--ink-soft, #7a7268); text-align: center;
}