/* Sugestii în bara de căutare (modulul sugestii_cautare) */
.sg-host { position: relative; }
.sg {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1000;
  max-height: min(72vh, 600px); overflow-y: auto; overscroll-behavior: contain; padding: 6px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.18); text-align: left; font-size: 0.95rem;
}
.sg[hidden] { display: none; }
.sg-group + .sg-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.sg-label { padding: 8px 10px 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.sg-item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 7px 10px; border-radius: 6px;
  color: inherit; text-decoration: none; cursor: pointer;
}
.sg-item[aria-selected="true"] { background: var(--wash); outline: 2px solid var(--focus); outline-offset: -2px; }
@media (hover: hover) { .sg-item:hover { background: var(--wash); } }
.sg-img {
  flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
.sg-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sg-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3;
  overflow-wrap: anywhere;
}
.sg-title mark { background: none; color: inherit; font-weight: 700; }
.sg-line { line-height: 1.35; overflow-wrap: anywhere; }
.sg-meta { font-size: 0.8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-price { flex: 0 0 auto; font-family: var(--font-price); font-weight: 700; white-space: nowrap; text-align: right; }
.sg-price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.72rem; color: var(--ink-3); }
.sg-icon { flex: 0 0 44px; display: grid; place-items: center; color: var(--ink-3); }
.sg-icon svg { width: 18px; height: 18px; }
.sg-all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; font-weight: 600; }
.sg-scope { margin: 2px 0 14px; }
@media (max-width: 520px) {
  .sg { max-height: 64vh; padding: 4px; }
  .sg-item { gap: 10px; padding: 7px 8px; }
  .sg-img, .sg-icon { flex-basis: 40px; width: 40px; height: 40px; }
  .sg-price { font-size: 0.95rem; }
}