/* =============================================================================
WYSZUKIWARKA PUBLICZNA (N22): strona /szukaj, pole na 404, pigułka w nagłówku i pole w menu mobilnym.
Ładowany osobno ( w treści strony szukania i 404; koordynator wpina go do układu razem z pigułką).
Kolory wyłącznie przez role z styl.css / styl-klient.css, więc scena (nocna śliwka), jasny wariant i tryb ciemny działają bez reguł nocnych.
Złoto tylko jako linia obramowania i ikona na śliwce, nigdy jako tekst na kremie ani bieli.
Układ: telefon 320-466 px jedna kolumna; Duo rozłożone 768-1023 (890 px): dwie połówki z rynną --rynna (48 px) wycentrowaną na zgięciu,
więc nic interaktywnego ani nagłówka nie leży w pasie x 421-469; od 1024 trzy kolumny list i cztery kafle (jak kategorie), pigułka od 1280.
Cele dotykowe >= 44 px, pismo >= 13 px, pola 16 px (bez powiększania na iOS).
============================================================================= */
/* ---------- Strona wyników ---------- */
.szukaj-strona { padding-block: 8px 64px; }
.szukaj-info { margin-top: 0; max-width: 40em; color: var(--tekst-600); }
.szukaj-info a, .szukaj-tel { color: var(--sliwka-700); font-weight: 600; text-underline-offset: 3px; }
.szukaj-tel { display: inline-flex; align-items: center; min-height: var(--cel); }
.szukaj-brak { margin-top: 24px; }
.szukaj-brak__zdanie { font-family: var(--czcionka-naglowki); font-size: var(--fs-28); font-weight: 600; line-height: 1.2; color: var(--tekst-900); overflow-wrap: anywhere; }
.szukaj-brak .szukaj-info { margin-top: 8px; }
/* ---------- Pole szukania (strona wyników i 404) ---------- */
.szukaj-pole { max-width: 640px; margin-block: 20px 24px; }
.szukaj-pole__etykieta { margin-bottom: 8px; }
.szukaj-pole__wiersz { display: flex; gap: 10px; align-items: stretch; }
.szukaj-pole__wejscie { flex: 1 1 auto; min-width: 0; min-height: 52px; }
.szukaj-pole__przycisk { flex: none; min-height: 52px; padding-inline: 22px; white-space: nowrap; }
/* natywny krzyżyk pola type=search ma cel mniejszy niż 44 px: zostawiamy jedno, własne czyszczenie (Esc) i przycisk „Szukaj” */
.szukaj-pole__wejscie::-webkit-search-cancel-button { display: none; }
/* ---------- Grupy wyników ---------- */
.szukaj-grupa { margin-top: 44px; }
.szukaj-grupa h2 { margin-bottom: 20px; font-size: var(--fs-28); }
.szukaj-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.szukaj-wiersz {
display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: var(--cel); padding: 14px 18px;
border: 1px solid var(--krem-200); border-radius: var(--promien); background: var(--biel);
color: var(--tekst-900); text-decoration: none;
transition: border-color 0.3s var(--krzywa-c, ease);
}
.szukaj-wiersz:hover { border-color: var(--sliwka-900); }
.szukaj-wiersz__nazwa { font-family: var(--czcionka-naglowki); font-size: var(--fs-24); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.szukaj-wiersz__opis {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-600);
}
:root:not([data-scena="jasna"]) body.klient .szukaj-wiersz { border-color: var(--zloto-linia-sceny); }
:root:not([data-scena="jasna"]) body.klient .szukaj-wiersz:hover { border-color: var(--zloto-na-sliwce); }
.szukaj-wiersz:focus-visible, .szukaj-info a:focus-visible, .szukaj-tel:focus-visible { outline: 3px solid var(--sliwka-500); outline-offset: 2px; }
@media (min-width: 768px) {
.szukaj-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rynna); row-gap: 16px; }
}
/* Duo rozłożone: pole, zdania i nagłówki grup tylko w lewej połówce (nic na zgięciu x 421-469 przy 890 px) */
@media (min-width: 768px) and (max-width: 1023px) {
.szukaj-pole, .szukaj-info, .szukaj-brak, .szukaj-grupa h2, .szukaj-strona .sekcja__naglowek { max-width: var(--polowka); }
}
@media (min-width: 1024px) {
.szukaj-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.szukaj-grupa h2 { font-size: var(--fs-32); }
}
/* ---------- Pigułka w nagłówku (od 1440 px: przy 8 pozycjach menu, telefonie i „Zamów” niżej brak miejsca w pasku; koordynator 17.10;
poniżej szukanie jest w menu mobilnym, na /szukaj i na stronie 404) ---------- */
.szukaj-pigulka { display: none; }
@media (min-width: 1440px) {
.szukaj-pigulka {
display: flex; align-items: center; width: 220px; min-height: var(--cel); padding-left: 16px;
border: 1px solid var(--obrys); border-radius: var(--promien-pelny); background: transparent; color: var(--tekst-900);
}
.szukaj-pigulka:focus-within { outline: 3px solid var(--sliwka-500); outline-offset: 2px; }
.szukaj-pigulka__pole {
flex: 1 1 auto; min-width: 0; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none;
color: var(--tekst-900); font: inherit; font-size: var(--fs-15); font-weight: 500;
}
.szukaj-pigulka__pole::placeholder { color: var(--tekst-600); opacity: 1; }
.szukaj-pigulka__pole::-webkit-search-cancel-button { display: none; }
.szukaj-pigulka__przycisk {
flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--cel); height: var(--cel);
padding: 0; border: 0; border-radius: var(--promien-pelny); background: transparent; color: var(--tekst-900); cursor: pointer;
}
.szukaj-pigulka__przycisk:hover { color: var(--sliwka-700); }
:root:not([data-scena="jasna"]) body.klient .szukaj-pigulka { border-color: var(--zloto-linia-sceny); }
:root:not([data-scena="jasna"]) body.klient .szukaj-pigulka__przycisk { color: var(--zloto-na-sliwce); }
}
/* ---------- Pole w menu mobilnym (