/* Kopf-Suche (src/components/HeaderSearch.astro). Eigene Datei statt Komponenten-Style: wird über den Link am Anfang des Kopfs geladen. */
/* Kopf-Suche. Desktop: Feld wie das bisherige „Produkt suchen“ (v13 .search-trigger); schmal: Lupe, Feld als Leiste oben. */
.hs { position: relative; display: flex; align-items: center; }
.hs-open { display: none; color: var(--ink); }
.hs-form { position: relative; }
.hs-field { position: relative; display: flex; align-items: center; height: 44px; width: 260px; border-radius: 999px; background: var(--ice); transition: background-color .2s, box-shadow .2s; }
.hs-field:hover { background: var(--ice-2); }
.hs-field:focus-within { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--chl); }
.hs-field > .ico { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.hs-field input { flex: 1; min-width: 0; height: 100%; padding: 0 8px 0 44px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600; outline: none; -webkit-appearance: none; appearance: none; }
.hs-field input::placeholder { color: var(--ink-3); font-weight: 500; }
.hs-field input::-webkit-search-cancel-button { display: none; }
.hs-field kbd { flex: none; margin-right: 8px; font: 700 .7rem/1 "Manrope", sans-serif; padding: 6px 8px; border-radius: 8px; background: var(--white); color: var(--ink-2); }
.hs-field:focus-within kbd { display: none; }
.hs-x { display: none; flex: none; width: 44px; height: 44px; border-radius: 50%; place-items: center; color: var(--ink-2); }
.hs-x .ico { width: 20px; height: 20px; }

/* Vorschläge */
.hs-pop { position: absolute; z-index: 60; right: 0; top: calc(100% + 10px); width: min(480px, calc(100vw - 2 * var(--gut))); max-height: min(70vh, 640px); overflow: auto; overscroll-behavior: contain; padding: 8px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(15, 24, 28, .4); }
.hs-pop[hidden] { display: none; }
.hs-pop h5 { margin: 10px 12px 4px; font-size: .74rem; letter-spacing: .02em; color: var(--ink-3); font-weight: 750; }
.hs-opt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: 14px; color: var(--ink); }
.hs-opt.sel { background: var(--ice); }
.hs-opt.is-prod { padding-block: 8px; }
.hs-opt:focus-visible { outline-offset: -2px; }
.hs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hs-t b { font-weight: 700; font-size: .92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hs-t small { color: var(--ink-3); font-size: .76rem; font-weight: 650; }
.hs-n { flex: none; color: var(--ink-3); font-size: .8rem; font-weight: 650; white-space: nowrap; }
/* Produktbild randlos (keine Rahmen/Abstände), freigestellte Bilder auf hellem Grund */
.hs-img { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.hs-img.cut { background: var(--ice); box-shadow: none; }
.hs-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-img.cut img { object-fit: contain; }
.hs-img .img-none { display: block; width: 100%; height: 100%; background: var(--ice); }
.hs-p { flex: none; text-align: right; font-weight: 800; font-size: .92rem; white-space: nowrap; }
.hs-p small { display: block; color: var(--ink-3); font-size: .72rem; font-weight: 650; }
.hs-opt.is-all { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; color: var(--chl-2); }
.hs-opt.is-all .ico { width: 18px; height: 18px; flex: none; }
.hs-opt.is-all.sel { border-radius: 14px; border-color: transparent; }
.hs-msg { padding: 12px; color: var(--ink-2); font-size: .9rem; }
.hs-msg:empty, .hs-msg[hidden] { display: none; }

/* Abdunklung der Seite, solange die Suche offen ist (Element am Ende von body, per JS). Der Kopf liegt darüber,
   auch über fest stehenden Leisten der Seite (z. B. „Dein Set“). Unschärfe nur, solange sie sichtbar ist. */
.hs-scrim { position: fixed; inset: 0; z-index: 94; background: rgba(17, 26, 31, .38); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s .2s; }
.hs-scrim.on { opacity: 1; visibility: visible; pointer-events: auto; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .2s; }
.hs-on .header { z-index: 96; }
@media (prefers-reduced-motion: reduce) { .hs-scrim, .hs-scrim.on { transition: none; } }

/* Mittlere Breiten: Feld schmaler und Menü enger, damit alles einzeilig bleibt (Menü ab 1181 px sichtbar) */
@media (max-width: 1340px) { .hs-field { width: 190px; } .hs-field kbd { display: none; } }
@media (max-width: 1340px) and (min-width: 1181px) {
  .head { gap: 20px; }
  .menu a { padding: 0 12px; white-space: nowrap; }
}
@media (max-width: 1260px) and (min-width: 1181px) { .hs-field { width: 160px; } .menu a { padding: 0 10px; } }

/* Schmal: Lupe; offen = Leiste oben über dem Kopf mit abgedunkelter Seite */
@media (max-width: 1180px) {
  .hs-open { display: grid; }
  .hs-form { display: none; }
  .hs.open .hs-form { display: block; position: fixed; z-index: 95; top: 0; left: 0; right: 0; padding: 16px var(--gut); background: var(--white); box-shadow: 0 20px 40px -24px rgba(15, 24, 28, .4); }
  .hs.open .hs-field { width: auto; height: 48px; }
  .hs.open .hs-field input { font-size: 1rem; }
  .hs.open .hs-field kbd { display: none; }
  .hs.open .hs-x { display: grid; }
  .hs.open .hs-pop { position: static; width: auto; max-height: calc(100dvh - 120px); margin-top: 12px; padding: 0; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hs-pop { animation: hs-in .18s var(--ease); }
  @keyframes hs-in { from { opacity: 0; transform: translateY(-4px); } }
}