/** * Grolabs WordPress Search — search-as-you-type dropdown styles. * * Scoped under .grolabs-typeahead-* class names so it never collides with * theme styles. Designed to look "neutrally professional" on any light theme; * merchants on dark themes can override colors via their own stylesheet. * * The dropdown is appended to by the JS (so parent overflow:hidden * doesn't clip it) and positioned absolutely by inline style. Don't add * position:fixed here. */ .grolabs-typeahead-dropdown { background: #ffffff; color: #111827; border: 1px solid #e5e7eb; border-radius: 6px; box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.10 ); font-family: inherit; font-size: 14px; line-height: 1.4; max-height: 70vh; overflow-y: auto; margin-top: 4px; /* z-index set inline by JS */ } .grolabs-typeahead-dropdown[hidden] { display: none !important; } .grolabs-typeahead-loading, .grolabs-typeahead-empty { padding: 14px 16px; color: #6b7280; text-align: center; font-size: 13px; } .grolabs-typeahead-list { list-style: none; margin: 0; padding: 4px 0; } .grolabs-typeahead-item { margin: 0; padding: 0; } .grolabs-typeahead-link { display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-decoration: none; color: inherit; border: none; background: transparent; } .grolabs-typeahead-link:hover, .grolabs-typeahead-item.is-active .grolabs-typeahead-link { background: #f3f4f6; } .grolabs-typeahead-thumb { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 4px; overflow: hidden; background: #f3f4f6; display: flex; align-items: center; justify-content: center; } .grolabs-typeahead-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .grolabs-typeahead-thumb-empty { /* Visual placeholder for products without thumbnails. */ } .grolabs-typeahead-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .grolabs-typeahead-name { font-weight: 500; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grolabs-typeahead-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b7280; } .grolabs-typeahead-price { font-weight: 600; color: #111827; } .grolabs-typeahead-stock.is-in-stock { color: #047857; } .grolabs-typeahead-stock.is-out-of-stock { color: #b45309; } .grolabs-typeahead-view-all { display: block; width: 100%; padding: 10px 12px; border: none; border-top: 1px solid #e5e7eb; background: transparent; font: inherit; font-size: 13px; color: #2563eb; text-align: left; cursor: pointer; } .grolabs-typeahead-view-all:hover { background: #f9fafb; }