/* Zen SEO Header-Suche (Stephan 23.08.2026) */

.cz-search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 14px;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
.cz-search-trigger:hover { color: var(--enfold-main-color-primary, #10c956); }
.cz-search-nav-item { list-style: none; }
/* Enfold/Icon-Font-CSS setzt global svg{fill:currentColor} -- das schlaegt das
   fill="none"-Attribut im SVG selbst, macht aus der Lupe einen schwarzen Klecks
   (Stephan 23.08.2026 gemeldet). Praesentations-Attribute verlieren IMMER gegen
   jede CSS-Regel, egal wie generisch -- deshalb hier hart mit !important zurueck. */
.cz-search-trigger svg {
  fill: none !important;
  stroke: currentColor !important;
}

/* Mobile: das Icon in der Nav-Liste (.cz-search-nav-item) bleibt hier ABSICHTLICH
   verborgen (enfold-child/style.css blendet .av-main-nav > li.menu-item per
   display:none!important ohnehin aus) -- auf Mobile sitzt das Such-Icon stattdessen
   direkt in .zen-menu-icons (siehe enfold-child/functions.php::add_icons_before_main_menu),
   zusammen mit Shop-/Konto-Icon. Stephan 23.08.2026: die beiden Icons ueberlappten sich
   vorher, weil beide unabhaengig voneinander sichtbar erzwungen waren. */
.zen-menu-icons .cz-search-trigger {
  height: auto;
  padding: 0;
  color: #10c956;
  transform: translateY(-6px);
}
.zen-menu-icons .cz-search-trigger svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (min-width: 990px) {
  .cz-search-nav-item { display: flex; align-items: center; }
  /* Stephan 23.08.2026: 10% kleiner + 50px weiter runter (nur Desktop-Icon in der Nav). */
  .cz-search-nav-item .cz-search-trigger { transform: translateY(3px); }
  .cz-search-nav-item .cz-search-trigger svg { width: 16.2px; height: 16.2px; }
}

.cz-search-overlay[hidden] { display: none; }
/* Trennlinie unter dem Suchfeld nur wenn Ergebnisse/Text darunter stehen (JS setzt
   has-results ueber setResultsHtml()) -- sonst haengt die Linie ohne Inhalt am
   unteren Rand der (dann sehr kurzen) Box. */
.cz-search-overlay.has-results .cz-search-input-row {
  border-bottom: 1px solid #eceef1;
}
.cz-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.cz-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 16, .55);
}
.cz-search-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin: 50px 16px 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cz-search-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 20px 14px;
  color: #5b616e;
}
.cz-search-input-row svg { flex: 0 0 auto; fill: none !important; stroke: currentColor !important; }
/* Natives input[type=search]-Styling (Rand, Box-Shadow, grosses Default-Padding + eigener
   "x"-Clear-Button) raus -- eine globale Formularfeld-Regel (Enfold) gewinnt sonst gegen
   die einfachen Resets unten, deshalb hier alles mit !important. Stephan 23.08.2026. */
#cz-search-input {
  flex: 1;
  min-width: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 14px;
  color: #0b0c10;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}
#cz-search-input::-webkit-search-cancel-button,
#cz-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}
#cz-search-close {
  flex: 0 0 auto;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: #5b616e;
  cursor: pointer;
  padding: 0 2px;
}
.cz-search-results {
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: #e1e3e6 transparent;
}
.cz-search-results::-webkit-scrollbar { width: 5px; }
.cz-search-results::-webkit-scrollbar-track { background: transparent; }
.cz-search-results::-webkit-scrollbar-thumb { background: #e1e3e6; border-radius: 10px; }
.cz-search-results::-webkit-scrollbar-thumb:hover { background: #d1d4d9; }
.cz-search-group-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #5b616e;
  padding: 8px 8px 4px;
}
.cz-search-fallback-note {
  font-size: 12px;
  font-weight: 600;
  color: #5b616e;
  padding: 10px 8px 8px;
  line-height: 1.4;
}
.cz-search-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: #0b0c10;
}
.cz-search-row:hover { background: #f6f7f8; }
.cz-search-thumb {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: #eef1ee;
  overflow: hidden;
  display: flex;
}
.cz-search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cz-search-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.cz-search-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cz-search-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  line-height: 1.2;
}
.cz-search-meta-text {
  font-size: 10px;
  font-weight: 500;
  color: #5b616e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cz-search-price {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  color: #0b0c10;
  margin-left: 4px;
}
/* Bewertung als echte Sterne statt Text (Stephan 23.08.2026): graue Basis-Sterne,
   darueber per ::before die goldenen Sterne auf Prozent-Breite geclippt -- klassischer
   CSS-Stern-Rating-Trick, braucht keine Bilder/SVGs pro Stern. */
.cz-search-stars {
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  color: #e1e3e6;
  letter-spacing: 1px;
  white-space: nowrap;
}
.cz-search-stars::before {
  content: '★★★★★';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cz-star-pct, 0%);
  overflow: hidden;
  color: #f5a623;
  white-space: nowrap;
}
.cz-search-empty,
.cz-search-loading {
  padding: 24px 10px;
  text-align: center;
  font-size: 13px;
  color: #5b616e;
}