/* ============================================================
   shop-page.css — Shop-Seite (Produktliste + Suchleiste)
   Externalisiert 2026-05-22 aus inline <style> in shop.html
   (CSP-Sprint Phase 3.2b). Page-spezifisch.
   ============================================================ */

/* ── Shop-Suchleiste (zwischen Filter und Grid) ── */
.shop-suche-wrap {
  position: relative;
  max-width: 560px;
  margin: -24px 0 32px;
}

.shop-suche-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.shop-suche-input {
  width: 100%;
  padding: 13px 18px 13px 46px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.shop-suche-input:focus {
  border-color: #9ed2c0;
  box-shadow: 0 0 0 3px rgba(158, 210, 192, 0.2);
}

.shop-suche-input::placeholder {
  color: var(--muted2, #9BA4B0);
}

@media (max-width: 768px) {
  .shop-suche-wrap {
    margin: 4px 0 24px;
    max-width: none;
  }
}