/* ========================================================= Search autocomplete dropdown — .mz-suggest Appended to via JS, positioned with fixed coords. ========================================================= */ .mz-suggest { position: fixed; background: var(--paper-2); border: 1px solid var(--border-strong); border-radius: var(--r-3); box-shadow: 0 8px 28px rgba(30,30,30,.16); overflow: hidden; /* Stack: .mz-header=50, .mz-account-menu=60. L'autocomplete può aprirsi mentre il menu account è visibile, quindi serve stare sopra di esso — 70 basta, niente 99999 da z-index war. */ z-index: 70; max-height: 400px; overflow-y: auto; overscroll-behavior: contain; } /* ---- Item ---- */ .mz-suggest__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); text-decoration: none; color: var(--ink-1); border-bottom: 1px solid var(--border-soft); transition: background var(--d-1) var(--ease); outline: none; } .mz-suggest__item:last-child { border-bottom: 0; } .mz-suggest__item:hover, .mz-suggest__item:focus { background: var(--paper-3); } /* Combobox aria-activedescendant: l'opzione "attiva" via tastiera è marcata con aria-selected="true" sull'option (focus DOM resta sull'input). Allineiamo il visual a hover/focus per coerenza percettiva. */ .mz-suggest__item[aria-selected="true"] { background: var(--paper-3); } /* ---- Thumbnail ---- */ .mz-suggest__img { width: 48px; height: 48px; object-fit: contain; border-radius: var(--r-2); flex-shrink: 0; background: var(--paper-3); } .mz-suggest__img--empty { display: block; background: var(--paper-3); } /* ---- Body ---- */ .mz-suggest__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .mz-suggest__title { font-size: var(--t-sm); font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-1); } .mz-suggest__meta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .mz-suggest__sku { font-size: var(--t-xs); font-family: var(--ff-mono); font-weight: 600; color: var(--ink-2); background: var(--paper-3); border: 1px solid var(--border); padding: 2px 6px; border-radius: var(--r-1); white-space: nowrap; } .mz-suggest__cats { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- B2B variant: SKU primario, titolo secondario ---- In modalità B2B il meccanico cerca per codice articolo, non per nome prodotto. Il dropdown inverte la gerarchia: SKU prominente, descrizione come riga secondaria. Il colore --brand è già flippato dal token swap B2B, quindi nessun hex hardcoded qui. */ .mz-suggest__primary { font-size: var(--t-base); font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-1); } .mz-suggest__primary--sku { font-family: var(--ff-mono); letter-spacing: 0.01em; } .mz-suggest__secondary { font-size: var(--t-xs); line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Price ---- */ .mz-suggest__price { font-size: var(--t-sm); font-weight: 600; color: var(--brand); white-space: nowrap; flex-shrink: 0; margin-left: auto; } /* ---- Variante modelli (campo "Verifica il tuo modello", hero) ---- Righe Marca + modello + codici. Gli item sono

(compila+verifica al clic, non navigazione), quindi serve cursor:pointer esplicito. */ .mz-suggest__item--model { cursor: pointer; } .mz-suggest__marca { font-weight: 500; color: var(--ink-2); } .mz-suggest__title strong { font-weight: 700; color: var(--ink-1); } .mz-suggest__codes { font-size: var(--t-xs); font-family: var(--ff-mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Footer "modello mancante" ---- Sempre presente nel dropdown modelli (anche a zero risultati). Non selezionabile (classe diversa da .mz-suggest__item), fuori dal tab order. */ .mz-suggest__foot { padding: var(--s-2) var(--s-3); font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); background: var(--paper-3); border-top: 1px solid var(--border-soft); } .mz-suggest__foot-link { color: var(--brand); font-weight: 600; text-decoration: underline; } .mz-suggest__foot-link:hover, .mz-suggest__foot-link:focus { text-decoration: none; } /* ---- Empty state ---- Reso quando il backend risponde con zero match. Non interattivo, non focusabile, mantiene la stessa shell visiva del dropdown popolato. */ .mz-suggest--empty { max-height: none; overflow: visible; } .mz-suggest__empty { display: block; padding: var(--s-3) var(--s-4); font-size: var(--t-sm); line-height: 1.4; color: var(--ink-3); text-align: center; }