/* ============================================================
   P13 — Globale Sofortsuche (Command-Palette Overlay)
   Owner: search.js. Verwendet die Design-Tokens aus site.css.
   Eigene Namespacing-Prefix `ls-` (Lagertechnik-Suche), damit es
   nicht mit der In-Page-Suche des Katalogs (.search-wrap) kollidiert.
   ============================================================ */

/* ---------- overlay / backdrop ---------- */
.ls-overlay{
  position:fixed; inset:0; z-index:120;
  display:none;                 /* .is-open schaltet auf flex */
  flex-direction:column; align-items:center;
  padding:clamp(14px,8vh,110px) 16px 24px;
  background:rgba(6,8,11,.62);
  backdrop-filter:saturate(130%) blur(6px);
  opacity:0; transition:opacity .18s var(--ease,ease);
}
.ls-overlay.is-open{display:flex; opacity:1}

/* ---------- palette panel ---------- */
.ls-panel{
  width:min(640px,100%);
  /* Design-Refresh 2026-07-16 P6: flaches weißes Panel statt Panel-Gradient; stale Fallbacks aktualisiert */
  background:var(--panel);
  border:1px solid var(--line-2,#333a47);
  border-radius:var(--r-lg,14px);
  box-shadow:var(--sh-2,0 18px 50px -20px rgba(0,0,0,.7));
  overflow:hidden;
  display:flex; flex-direction:column;
  max-height:min(640px,calc(100vh - clamp(28px,10vh,140px)));
  transform:translateY(-10px) scale(.99);
  transition:transform .2s var(--ease,ease);
}
.ls-overlay.is-open .ls-panel{transform:none}

/* ---------- input row ---------- */
.ls-input-row{
  display:flex; align-items:center; gap:.7rem;
  padding:14px 16px; border-bottom:1px solid var(--line,#272d38);
}
.ls-input-row > svg{width:20px;height:20px;color:var(--muted,#8a93a3);flex:none}
.ls-input{
  flex:1; min-width:0;
  background:transparent; border:0; outline:none;
  color:var(--text,#eef1f6);
  font-family:'Inter',system-ui,sans-serif;
  font-size:var(--fs-xl); font-weight:var(--fw-medium); line-height:1.4;
}
.ls-input::placeholder{color:var(--muted,#8a93a3)}
.ls-esc{
  flex:none; cursor:pointer;
  font:inherit; font-size:var(--fs-2xs); font-weight:var(--fw-semibold);
  color:var(--muted-2,#aab2c0);
  background:var(--panel-2); border:1px solid var(--line-2,#333a47);
  border-radius:7px; padding:.3rem .5rem; line-height:1;
  transition:.15s var(--ease,ease);
}
.ls-esc:hover{color:var(--text);border-color:var(--steel,#6b7689)}

/* spinner while index loads */
.ls-spin{width:18px;height:18px;flex:none;color:var(--steel-2,#9aa6b8);animation:ls-rot .8s linear infinite}
@keyframes ls-rot{to{transform:rotate(360deg)}}

/* ---------- results (listbox) ---------- */
.ls-results{
  overflow-y:auto; overscroll-behavior:contain;
  padding:6px;
  scrollbar-width:thin; scrollbar-color:var(--line-2,#333a47) transparent;
}
.ls-results::-webkit-scrollbar{width:10px}
.ls-results::-webkit-scrollbar-thumb{background:var(--line-2,#333a47);border:3px solid transparent;border-radius:8px;background-clip:padding-box}

.ls-group{
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:var(--ls-caps); text-transform:uppercase; line-height:var(--lh-caps);
  color:var(--muted,#8a93a3);
  padding:12px 12px 6px;
}

/* ---------- result item ---------- */
.ls-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--r,14px);
  cursor:pointer; text-decoration:none; color:inherit;
  border:1px solid transparent;
}
.ls-item.is-active,.ls-item:hover{
  background:rgba(0,0,0,.04); border-color:var(--line-2,#333a47);
}
.ls-item.is-active{box-shadow:inset 3px 0 0 var(--red,#e2001a)}
.ls-art{
  flex:none; width:44px; height:44px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--panel-2);
  border:1px solid var(--line,#272d38); color:var(--steel-2,#9aa6b8);
}
.ls-art svg{width:60%;height:60%}
.ls-main{flex:1; min-width:0}
.ls-name{
  font-size:var(--fs-base); font-weight:var(--fw-semibold); color:var(--text,#eef1f6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ls-name mark{background:rgba(226,0,26,.14);color:var(--red-text);border-radius:3px;padding:0 .1em}
.ls-meta{
  font-size:var(--fs-sm); color:var(--muted,#8a93a3); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ls-meta .ls-sys{color:var(--steel-2,#9aa6b8);font-weight:var(--fw-semibold)}
.ls-price{flex:none; text-align:right; line-height:1.25}
.ls-price .now{font-family:'Sora',sans-serif;font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--text);display:block;line-height:var(--lh-tight)}
.ls-price .vat{font-size:var(--fs-xs);color:var(--muted,#8a93a3)}

/* ---------- empty / hint states ---------- */
.ls-empty{padding:38px 20px;text-align:center;color:var(--muted,#8a93a3)}
.ls-empty b{color:var(--text,#eef1f6);font-weight:var(--fw-semibold)}
.ls-empty svg{width:34px;height:34px;color:var(--line-2,#333a47);margin:0 auto 12px;display:block}

/* quick chips (empty query) */
.ls-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 12px 14px}
.ls-chip{
  font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--muted-2,#aab2c0);
  background:var(--panel-2); border:1px solid var(--line-2,#333a47);
  border-radius:999px; padding:.45rem .85rem; cursor:pointer; text-decoration:none;
  transition:.15s var(--ease,ease);
}
.ls-chip:hover,.ls-chip.is-active{color:var(--red-text);border-color:var(--red,#e2001a);background:rgba(226,0,26,.12)}

/* ---------- footer ---------- */
.ls-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; border-top:1px solid var(--line,#272d38);
  background:var(--panel-2);
}
.ls-hints{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted,#8a93a3);font-size:var(--fs-xs)}
.ls-hints span{display:inline-flex;align-items:center;gap:.4rem}
.ls-foot kbd{
  font-family:'Inter',system-ui,sans-serif; font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  color:var(--muted-2,#aab2c0);
  background:var(--ink,#0c0e12); border:1px solid var(--line-2,#333a47);
  border-bottom-width:2px; border-radius:6px; padding:.15rem .4rem; min-width:1.4em;
  text-align:center; line-height:1.3;
}
.ls-viewall{
  flex:none; display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text,#eef1f6); text-decoration:none;
  white-space:nowrap;
}
.ls-viewall:hover{color:var(--red,#e2001a)}
.ls-viewall svg{width:15px;height:15px}
.ls-viewall b{color:var(--red,#e2001a)}

/* ---------- mobile ---------- */
@media (max-width:560px){
  .ls-overlay{padding:0}
  .ls-panel{
    /* Mobile-Audit 2026-07-11 (P2-6): 100vh liegt auf iOS hinter der Browser-Chrome →
       untere Panelkante/Inhalt kann verdeckt sein. 100dvh (Muster: header.css:191). */
    width:100%; max-height:100dvh; height:100dvh;
    border:0; border-radius:0;
  }
  /* P2-6: Schließen-Button ist der EINZIGE Mobil-Exit (kein Backdrop-Klick, kein Esc auf Touch)
     → auf ≥44px Hit-Area. Optik der Pille bleibt (padding gibt die Fläche, nicht die sichtbare Box). */
  .ls-esc{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .ls-price .vat{display:none}
  .ls-hints span:nth-child(n+3){display:none}
}

@media (prefers-reduced-motion:reduce){
  .ls-overlay,.ls-panel{transition:none}
  .ls-spin{animation:none}
}