/* Q-pages: подсказки в поле поиска шапки (борд 2a). Грузится на всех страницах, поэтому маленький. */
.qsg { position: absolute; left: 24px; right: 24px; top: calc(100% + 8px); z-index: 60; display: none; background: var(--q-white); border: 1px solid var(--q-border); border-radius: 12px; box-shadow: var(--q-shadow-overlay); overflow: hidden; font-family: var(--q-font-body); text-align: left; }
.qsg.is-open { display: block; }
.qr-search .qsg { right: auto; width: min(720px, calc(100% - 48px)); }
.qr-drawer .qsg { position: static; margin: 0 18px 10px; box-shadow: var(--q-shadow-card); }
.qsg__item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--q-border-warm); text-decoration: none !important; color: var(--q-text-heading) !important; cursor: pointer; }
.qsg__item:last-of-type { border-bottom: 0; }
.qsg__item:hover, .qsg__item.is-active { background: var(--q-sand-light); }
.qsg__item .q-icon { flex: none; }
.qsg__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qsg__title { font-size: 14.5px; font-weight: 400; line-height: 1.7; color: var(--q-text-heading); }
.qsg__title mark { background: var(--q-sand); color: inherit; font-weight: 600; padding: 0 2px; margin: 0 -2px; border-radius: 3px; }
.qsg__type { font-size: 12px; color: var(--q-text-muted); }
.qsg__price { font-size: 14px; font-weight: 600; color: var(--q-text-price); white-space: nowrap; }
.qsg__all { display: flex; gap: 9px; align-items: center; justify-content: space-between; padding: 13px 16px; background: var(--q-sand-light); font-size: 14px; font-weight: 600; color: var(--q-orange-text) !important; text-decoration: none !important; }
.qsg__all:hover, .qsg__all.is-active { background: var(--q-sand); }
.qsg__empty { padding: 14px 16px; font-size: 14px; color: var(--q-text-muted); }
.qsg__skel { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--q-border-warm); }
.qsg__skel span { display: block; height: 12px; border-radius: 6px; background: var(--q-sand); }
.qsg__skel span:first-child { width: 16px; height: 16px; border-radius: 4px; }
.qsg__skel span:last-child { width: 60%; }
@media (max-width: 620px) { .qsg { left: 12px; right: 12px; } }