/* ══════════════════════════════════════════════════════
   Vazy Hub — SEARCH AUTOCOMPLETE
   Wraps .sbar in #srch-wrap to escape overflow:hidden
   ══════════════════════════════════════════════════════ */

/* ── Wrapper: takes over .sbar's flex sizing ── */
#srch-wrap {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
  max-width: 560px;
  order: 3;
  display: flex;
  flex-direction: column;
}
#srch-wrap .sbar,
#srch-wrap .search-bar {
  flex: 1;
  max-width: 100%;
  width: 100%;
}
@media(min-width:760px) {
  #srch-wrap { order: 0; margin-left: 24px; }
}
@media(max-width:759px) {
  #srch-wrap { order: 2; flex: 1 1 100%; max-width: 100%; margin-top: 4px; }
}
/* Strip sizing from .sbar itself when inside wrapper (parent owns sizing) */
.nav    #srch-wrap .sbar      { flex: 1 1 auto; min-width: 0; max-width: 100%; order: 0; margin-left: 0; margin-top: 0; }
/* products.php uses .top-nav */
.top-nav #srch-wrap           { order: 0; margin-left: 24px; max-width: 480px; }
.top-nav #srch-wrap .search-bar,
.top-nav #srch-wrap .sbar     { flex: 1 1 auto; max-width: 100%; margin-left: 0; order: 0; }

/* ── Dropdown panel ── */
.srch-dd {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid rgba(28,28,30,.09);
  border-radius: 10px;
  box-shadow: 0 10px 36px rgba(0,0,0,.13);
  z-index: 9999;
  overflow: hidden;
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.srch-dd.open { display: block; }

/* ── Group labels ── */
.srch-grp {
  padding: 10px 14px 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(28,28,30,.35);
  background: #fafafa;
  border-top: 1px solid rgba(28,28,30,.06);
}
.srch-dd .srch-grp:first-child { border-top: none; }

/* ── Items ── */
.srch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .1s;
  border: none;
  width: 100%;
  text-align: left;
  background: none;
}
.srch-item:hover,
.srch-item.srch-active {
  background: rgba(1,102,51,.06);
}
.srch-ico {
  font-size: 15px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
  overflow: hidden;
}
.srch-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.srch-nm {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: #1C1C1E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srch-sub {
  font-size: 10px;
  color: rgba(28,28,30,.4);
  flex-shrink: 0;
  white-space: nowrap;
}
/* Matched text highlight */
.srch-nm strong { color: #02331A; font-weight: 700; }

/* ── "See all results" footer row ── */
.srch-all {
  border-top: 1.5px solid rgba(28,28,30,.07);
  background: rgba(250,247,242,.6);
  padding: 10px 14px;
}
.srch-all .srch-nm { color: #02331A; font-weight: 600; }

/* ── Empty / loading states ── */
.srch-msg {
  padding: 16px 14px;
  font-size: 13px;
  color: rgba(28,28,30,.4);
  text-align: center;
}