/* ==========================================================================
   HC-LIVESEARCH  —  Suchleisten-Breitenfix + Live-Suche-Dropdown (Top-3)
   Desktop (form.searchbig) + Mobil (form.hcm-searchrow).
   Isoliert, kein custom.js. Nutzt Shop-Tokens -> Light + Dark automatisch.
   ========================================================================== */

/* --- 1) BREITEN-FIX: typeahead.js wickelt den Input in .twitter-typeahead,
       dieser Wrapper (flex:0 1 auto) streckt sich nicht -> Input schrumpft,
       Placeholder abgeschnitten. Wrapper auf flex:1 -> Input fuellt die Leiste. */
form.searchbig .twitter-typeahead,
form.hcm-searchrow .twitter-typeahead {
  flex: 1 1 auto !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
}
form.searchbig .tt-input,
form.searchbig input[name="qs"],
form.hcm-searchrow .tt-input,
form.hcm-searchrow input[name="qs"] {
  width: 100% !important;
}

/* Native (leere) Suggest-Menus unterdruecken – unsere Dropdown-Loesung ersetzt sie */
form.searchbig .tt-menu,
form.hcm-searchrow .tt-menu,
form.hcm-searchrow .hcm-suggest {
  display: none !important;
}

/* Anker fuer das absolut positionierte Dropdown */
form.searchbig,
form.hcm-searchrow { position: relative; }

/* --- 2) DROPDOWN --- */
.hc-ls {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1300;
  background: var(--card, #fff);
  border: 1px solid var(--border-soft, rgba(12, 30, 42, .10));
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(12, 30, 42, .18);
  overflow: hidden;
  display: none;
}
.hc-ls.open { display: block; }

.hc-ls-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text, #0c1e2a);
  border-bottom: 1px solid var(--border-soft, rgba(12, 30, 42, .06));
}
.hc-ls-item:last-of-type { border-bottom: 0; }
.hc-ls-item:hover,
.hc-ls-item.hc-ls-active {
  background: color-mix(in srgb, var(--primary, #ef820e) 8%, transparent);
}

.hc-ls-thumb {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 9px; overflow: hidden;
  background: color-mix(in srgb, var(--text, #0c1e2a) 6%, transparent);
  display: grid; place-items: center;
}
.hc-ls-thumb img { width: 100%; height: 100%; object-fit: contain; }

.hc-ls-info { display: flex; flex-direction: column; min-width: 0; }
.hc-ls-name {
  font-size: 13.5px; font-weight: 600; line-height: 1.28;
  color: var(--text, #0c1e2a);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hc-ls-price {
  font-size: 13px; font-weight: 800;
  color: var(--primary, #ef820e); margin-top: 2px;
}

.hc-ls-all {
  display: block; padding: 12px 14px;
  text-align: center; font-size: 13px; font-weight: 800;
  color: var(--primary, #ef820e); text-decoration: none;
  background: color-mix(in srgb, var(--primary, #ef820e) 6%, transparent);
}
.hc-ls-all:hover { background: color-mix(in srgb, var(--primary, #ef820e) 13%, transparent); }

.hc-ls-empty,
.hc-ls-loading {
  padding: 16px 14px; text-align: center;
  color: var(--muted, #52525b); font-size: 13px;
}

/* Mobil: Dropdown etwas kompakter, volle Breite des Suchfelds */
@media (max-width: 767px) {
  .hc-ls { top: calc(100% + 6px); border-radius: 14px; }
  .hc-ls-thumb { width: 40px; height: 40px; flex: 0 0 40px; }
  .hc-ls-name { font-size: 13px; }
}
/* /HC-LIVESEARCH */