/* Carmo Search Autocomplete v4 — dropdown appended to , position:fixed via JS */ /* ── Dropdown container ── */ .carmo-search-dropdown { background: #fff !important; border: 1px solid #d0d0d0 !important; border-top: 3px solid #ff6600 !important; border-radius: 0 0 5px 5px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.16) !important; box-sizing: border-box; display: none; font-size: 14px; max-height: 440px; overflow-x: hidden; overflow-y: auto; position: fixed; /* JS sets top/left/width via getBoundingClientRect */ z-index: 9999999; /* above sticky header */ } .carmo-search-dropdown.carmo-sd-open { display: block; } /* ── Section heading ── */ .carmo-search-dropdown .carmo-sd-heading { background: #f2f2f2 !important; border-bottom: 1px solid #e5e5e5; color: #888 !important; display: block; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.2px; padding: 8px 14px 6px; text-transform: uppercase; } /* ── Product row ── */ .carmo-search-dropdown .carmo-sd-item { background: #fff !important; border-bottom: 1px solid #efefef; border-left: 3px solid transparent !important; color: #222 !important; cursor: pointer; display: block !important; min-height: 42px; padding: 9px 14px 9px 11px !important; text-decoration: none !important; transition: background-color 120ms, border-color 120ms !important; } .carmo-search-dropdown .carmo-sd-item:hover, .carmo-search-dropdown .carmo-sd-item.carmo-sd-active { background: #f6f6f6 !important; border-left-color: #ff6600 !important; color: #111 !important; text-decoration: none !important; } /* Product name — line 1 */ .carmo-search-dropdown .carmo-sd-name { color: #1a1a1a !important; display: block; font-size: 13px !important; font-weight: 500 !important; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Model code — line 2 */ .carmo-search-dropdown .carmo-sd-meta { color: #888 !important; display: block; font-size: 11px !important; font-weight: 400 !important; line-height: 1.3; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Search-term highlight — subtle yellow */ .carmo-search-dropdown .carmo-sd-mark { background: #fff3b0 !important; border-radius: 2px; color: inherit !important; font-weight: 700 !important; padding: 0 1px; } /* ── Category row ── */ .carmo-search-dropdown .carmo-sd-cat-item { align-items: center; background: #fff !important; border-bottom: 1px solid #efefef; border-left: 3px solid transparent !important; color: #222 !important; cursor: pointer; display: flex !important; gap: 10px; min-height: 38px; padding: 9px 14px 9px 11px !important; text-decoration: none !important; transition: background-color 120ms, border-color 120ms !important; } .carmo-search-dropdown .carmo-sd-cat-item:hover, .carmo-search-dropdown .carmo-sd-cat-item.carmo-sd-active { background: #f6f6f6 !important; border-left-color: #ff6600 !important; color: #111 !important; text-decoration: none !important; } .carmo-search-dropdown .carmo-sd-cat-icon { background: #fff4ec !important; border-radius: 50%; color: #ff6600 !important; display: inline-block; flex: 0 0 18px; font-size: 10px !important; font-weight: 700; height: 18px; line-height: 18px; text-align: center; width: 18px; } .carmo-search-dropdown .carmo-sd-cat-name { color: #1a1a1a !important; font-size: 13px !important; font-weight: 500 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Footer "show all" row ── */ .carmo-search-dropdown .carmo-sd-footer { background: #fafafa !important; border-top: 1px solid #e5e5e5; color: #555 !important; cursor: pointer; display: block !important; font-size: 12px !important; font-weight: 600 !important; padding: 10px 14px; text-align: center; text-decoration: none !important; transition: background-color 120ms, color 120ms !important; } .carmo-search-dropdown .carmo-sd-footer:hover, .carmo-search-dropdown .carmo-sd-footer.carmo-sd-active { background: #ff6600 !important; color: #fff !important; text-decoration: none !important; } @media (max-width: 767px) { .carmo-search-dropdown { max-height: 320px; } .carmo-search-dropdown .carmo-sd-item, .carmo-search-dropdown .carmo-sd-cat-item, .carmo-search-dropdown .carmo-sd-footer { min-height: 48px; } }