/* Eco Search autocomplete — keyword/text suggestion dropdown (Etsy-style) attached to the native header search. Floating panel appended to . */ .eco-ac-panel { z-index: 99999; min-width: 360px; max-width: 560px; max-height: 78vh; overflow-y: auto; background: #fff; border: 1px solid #e2e6ec; border-radius: 6px; box-shadow: 0 12px 38px rgba(16, 37, 31, .16); padding: 8px 0; animation: eco-ac-in .14s ease; } @keyframes eco-ac-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .eco-ac-panel::-webkit-scrollbar { width: 8px; } .eco-ac-panel::-webkit-scrollbar-thumb { background: #d7dde7; border-radius: 8px; } /* ---- Loading state ---- */ .eco-ac-state { display: flex; align-items: center; gap: 10px; padding: 12px 20px; color: #667085; font-size: 14px; } .eco-ac-spinner { width: 15px; height: 15px; border: 2px solid #d7e8e0; border-top-color: #17a673; border-radius: 50%; animation: eco-ac-spin .7s linear infinite; } @keyframes eco-ac-spin { to { transform: rotate(360deg); } } /* ---- Suggestion list ---- */ .eco-ac-list { list-style: none; margin: 0; padding: 0; } .eco-ac-item { margin: 0; } .eco-ac-item > a { display: flex; align-items: center; gap: 12px; padding: 9px 20px; text-decoration: none; color: #222; font-size: 15px; line-height: 1.4; transition: background .12s ease; } .eco-ac-item > a:hover, .eco-ac-item.is-active > a { background: #f3f4f6; } .eco-ac-sicon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: #9aa3af; } .eco-ac-item > a:hover .eco-ac-sicon, .eco-ac-item.is-active > a .eco-ac-sicon { color: #17a673; } .eco-ac-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; } /* Matched part of the query is de-emphasised; the rest stands out — like Etsy. We the matched substring and keep it regular while the surrounding text is the suggestion. Simpler: matched part normal, full text dark. */ .eco-ac-text mark { background: transparent; color: #222; font-weight: 400; } /* ---- Empty row ---- */ .eco-ac-empty-row { padding: 12px 20px; color: #667085; font-size: 14px; } /* ---- Footer "Search the shop for ..." ---- */ .eco-ac-footer { display: block; margin-top: 8px; padding: 14px 20px 4px; border-top: 1px solid #eef1f5; color: #222 !important; font-size: 15px; font-weight: 700; text-decoration: none; transition: color .12s ease; } .eco-ac-footer strong { font-weight: 700; } .eco-ac-footer:hover { color: #17a673 !important; } @media (max-width: 600px) { .eco-ac-panel { min-width: 0; max-width: none; } .eco-ac-item > a { font-size: 14px; } }