/* ═══════════════════════════════════════════════════════════════════════════
 *  Wyszukiwarka KRAUZ AI — style własne (/szukaj + nagłówek)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ⚠ PALETA JEST MOTYWU, NIE MOJA. Pierwsza wersja miała niebieski panel AI
 * i wiśniowe chipy — kolory, których w tym sklepie nie ma nigdzie indziej,
 * przez co strona wyglądała na doklejoną. Wszystko poniżej używa barw
 * wyciągniętych z `stylesheet.css` motywu:
 *     #F84D00  pomarańcz — akcent, przyciski, aktywne filtry
 *     #012268  granat    — nagłówki i etykiety
 *     #18898D  morski    — znak KRAUZ AI
 *     #F5F7FF  jasne tło — pola i chipy
 *     #1B1B1B  tekst
 * Font dziedziczymy (Instrument Sans) — świadomie nie ustawiamy własnego.
 *
 * ⚠ ANI JEDNEJ REGUŁY GLOBALNEJ. Żadnego `body`, `*`, `h4`, `.price` — kafle
 * renderuje `product/thumb` i mają zostać dokładnie takie, jak w reszcie sklepu.
 */

:root {
  --ks-akcent: #F84D00;
  --ks-granat: #012268;
  --ks-morski: #18898D;
  --ks-jasne:  #F5F7FF;
  --ks-linia:  #e5e8f0;
  --ks-szept:  #6b7280;
}

.ks-strona { padding-bottom: 40px; }

/* ── pole wyszukiwania ──────────────────────────────────────────────────── */
.ks-szukajka { margin: 6px 0 22px; }
.ks-pole { position: relative; display: flex; gap: 10px; align-items: stretch; }
.ks-lupa {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: #9aa3b2; font-size: 15px; pointer-events: none; z-index: 2;
}
.ks-pole input {
  flex: 1; min-width: 0;
  font-size: 16px; padding: 15px 18px 15px 44px;
  border: 1px solid var(--ks-linia); border-radius: 6px;
  background: #fff; color: #1B1B1B; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ks-pole input::placeholder { color: #9aa3b2; }
.ks-pole input:focus {
  border-color: var(--ks-akcent);
  box-shadow: 0 0 0 3px rgba(248, 77, 0, .12);
}
.ks-pole button { white-space: nowrap; padding: 0 30px; border-radius: 6px; }

/* ── dropdown podpowiedzi ───────────────────────────────────────────────── */
.ks-podpowiedzi {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1050;
  background: #fff; border: 1px solid var(--ks-linia); border-radius: 6px;
  box-shadow: 0 14px 38px rgba(1, 34, 104, .13);
  overflow: hidden auto; max-height: 64vh;
}
.ks-sekcja {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ks-szept); padding: 10px 16px 5px; border-top: 1px solid var(--ks-linia);
}
.ks-sekcja:first-child { border-top: 0; }
.ks-poz {
  display: flex; align-items: center; gap: 12px; padding: 9px 16px;
  text-decoration: none; color: inherit;
}
.ks-poz:hover, .ks-poz.akt { background: var(--ks-jasne); color: inherit; text-decoration: none; }
.ks-poz img { width: 36px; height: 36px; object-fit: contain; flex: 0 0 36px; }
.ks-bezfoto { width: 36px; height: 36px; flex: 0 0 36px; }
.ks-nazwa { flex: 1; font-size: 14px; }
.ks-cena { font-size: 13px; color: var(--ks-szept); white-space: nowrap; font-weight: 600; }
.ks-poprawka { background: #fff8f3; border-bottom: 1px solid var(--ks-linia); }
.ks-poprawka:hover, .ks-poprawka.akt { background: #ffeee4; }
.ks-poprawka b { color: var(--ks-akcent); }
.ks-poprawka .ks-cena { color: var(--ks-akcent); }
.ks-pusto { padding: 16px; font-size: 14px; color: var(--ks-szept); }

/* ── nagłówek wyników ───────────────────────────────────────────────────── */
.ks-naglowek { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ks-tytul { font-size: 19px; font-weight: 500; margin: 0; color: var(--ks-granat); }
.ks-tytul b { font-weight: 700; }
.ks-nota { font-size: 13px; color: var(--ks-szept); }
.ks-nota b { color: var(--ks-akcent); }

/* ── pasek KRAUZ AI ─────────────────────────────────────────────────────── */
.ks-ai {
  background: var(--ks-jasne); border: 1px solid var(--ks-linia);
  border-radius: 6px; padding: 10px 14px; margin-bottom: 16px;
}
.ks-ai-linia { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ks-ai-znak {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  background: var(--ks-morski); color: #fff; padding: 4px 9px; border-radius: 4px;
}
.ks-ai-grupa { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ks-ai-etyk {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ks-granat); font-weight: 600; white-space: nowrap;
}
.ks-ai-chipy { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ks-ai-stan {
  font-size: 12.5px; color: var(--ks-morski); font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px; min-height: 18px;
}

/* ── preloader: trzy pulsujące kropki + przenikające komunikaty ──────────────
   Odpowiedź modelu idzie 2–4 s. Statyczny napis przez ten czas wygląda jak
   zawieszenie; ruch mówi „pracuję", a zmieniający się tekst — „i wiem, co robię".
   Przejście trwa 250 ms, a tekst podmienia się po 220 ms, czyli w momencie,
   w którym jest już niewidoczny — inaczej klient zobaczyłby przeskok. */
.ks-ai-krok { transition: opacity .25s ease; font-style: italic; white-space: nowrap; }
.ks-ai-krok.gasnie { opacity: 0; }

.ks-ai-kropki { display: inline-flex; gap: 3px; }
.ks-ai-kropki i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--ks-morski);
  animation: ks-puls 1.2s infinite ease-in-out;
}
.ks-ai-kropki i:nth-child(2) { animation-delay: .18s; }
.ks-ai-kropki i:nth-child(3) { animation-delay: .36s; }
@keyframes ks-puls {
  0%, 80%, 100% { opacity: .25; transform: scale(.8); }
  40%           { opacity: 1;   transform: scale(1); }
}

/* Znak KRAUZ AI delikatnie oddycha, dopóki trwa sprawdzanie — sygnał, że to
   właśnie ta część strony pracuje, a nie cała strona się ładuje. */
.ks-ai-czeka .ks-ai-znak { animation: ks-oddech 1.6s infinite ease-in-out; }
@keyframes ks-oddech {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .ks-ai-kropki i, .ks-ai-czeka .ks-ai-znak { animation: none; }
  .ks-ai-krok { transition: none; }
}
.ks-ai-rada {
  font-size: 13px; color: #4b5563; margin-top: 9px;
  padding-top: 9px; border-top: 1px dashed var(--ks-linia);
}
.ks-ai-rada b { color: var(--ks-granat); }

.ks-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--ks-linia); border-radius: 999px;
  padding: 4px 12px; font-size: 13px; color: var(--ks-granat);
  text-decoration: none; white-space: nowrap;
}
.ks-chip:hover { border-color: var(--ks-akcent); color: var(--ks-akcent); text-decoration: none; }
.ks-chip b { font-variant-numeric: tabular-nums; opacity: .55; font-weight: 600; }

.ks-rozmiary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

/* ── lewa kolumna z filtrami ────────────────────────────────────────────── */
/* Panel filtrów jest KARTĄ NA BIAŁYM TLE — wcześniej leżał wprost na tle strony
   i wyglądał, jakby zapomniano go oprawić. Biała płaszczyzna oddziela go od
   listy produktów i daje mu tę samą wagę wizualną, co kaflom. */
.ks-filtry { margin-bottom: 22px; }
.ks-filtry-karta {
  background: #fff; border: 1px solid var(--ks-linia); border-radius: 6px;
  padding: 16px 18px;
}
.ks-filtry-naglowek {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ks-granat); font-weight: 700;
  padding-bottom: 10px; margin-bottom: 2px; border-bottom: 2px solid var(--ks-granat);
}
.ks-wyczysc { font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--ks-akcent); font-weight: 600; }
.ks-grupa { padding: 12px 0; border-bottom: 1px solid var(--ks-linia); }
.ks-grupa:last-child { border-bottom: 0; }
.ks-grupa-tytul {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ks-szept); font-weight: 600; margin-bottom: 7px;
}
.ks-filtr {
  display: flex; align-items: center; gap: 9px; padding: 5px 2px;
  font-size: 14px; color: #1B1B1B; text-decoration: none; line-height: 1.3;
}
.ks-filtr:hover { color: var(--ks-akcent); text-decoration: none; }
.ks-filtr-box {
  width: 15px; height: 15px; flex: 0 0 15px; border-radius: 3px;
  border: 1.5px solid #c9cfdb; background: #fff; position: relative; transition: all .12s;
}
.ks-filtr:hover .ks-filtr-box { border-color: var(--ks-akcent); }
.ks-filtr.akt .ks-filtr-box { background: var(--ks-akcent); border-color: var(--ks-akcent); }
.ks-filtr.akt .ks-filtr-box::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ks-filtr.akt { font-weight: 600; color: var(--ks-granat); }
.ks-filtr-nazwa { flex: 1; }
.ks-filtr-ile {
  font-size: 12px; color: var(--ks-szept); font-variant-numeric: tabular-nums;
  background: var(--ks-jasne); border-radius: 999px; padding: 1px 8px;
}
.ks-filtr-wyroz .ks-filtr-nazwa { font-weight: 600; color: var(--ks-morski); }
.ks-filtr-wyroz i { margin-right: 4px; }
.ks-wlasna {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--ks-morski); color: #fff; padding: 1px 6px; border-radius: 3px;
}

/* ── brak wyników ───────────────────────────────────────────────────────── */
.ks-pustka {
  background: #fff; border: 1px solid var(--ks-linia); border-radius: 6px;
  padding: 26px; margin-bottom: 26px;
}
.ks-pustka p { margin: 0; color: var(--ks-szept); }
.ks-pustka a { color: var(--ks-akcent); font-weight: 600; }

@media (max-width: 767px) {
  .ks-pole { flex-wrap: wrap; }
  .ks-pole button { width: 100%; padding: 12px; }
  .ks-ai-stan { margin-left: 0; }
}

/* ── podpowiedź pod polem (bez frazy) ───────────────────────────────────────
   Zwykły akapit, nie ramka. Ma szeptać spod pola wyszukiwania, a nie zajmować
   pół ekranu na stronie, której zadaniem jest pokazać towar. */
.ks-hint {
  font-size: 13.5px; color: var(--ks-szept); line-height: 1.65;
  margin: -6px 2px 18px; max-width: 68ch;
}
.ks-hint b { color: var(--ks-granat); font-weight: 600; }

/* ── aktywne zawężenia ──────────────────────────────────────────────────────
   Widoczne zawsze, ale krytyczne na telefonie: tam panel filtrów jest zwinięty,
   więc bez tych kafelków klient patrzy na krótką listę i nie wie, czy to cała
   oferta, czy skutek filtra sprzed dwóch kliknięć. */
.ks-aktywne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ks-aktywne-etyk { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ks-szept); font-weight: 600; }
.ks-aktywny {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ks-granat); color: #fff; border-radius: 999px;
  padding: 4px 8px 4px 13px; font-size: 13px; text-decoration: none; white-space: nowrap;
}
.ks-aktywny:hover { background: var(--ks-akcent); color: #fff; text-decoration: none; }
.ks-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(255,255,255,.22); font-size: 13px; line-height: 1;
}
.ks-aktywny:hover .ks-x { background: rgba(255,255,255,.35); }
.ks-aktywne-czysc { font-size: 12px; color: var(--ks-akcent); font-weight: 600; }

/* ── panel filtrów: zwijany na telefonie ────────────────────────────────── */
.ks-filtry-toggle {
  display: none; width: 100%; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--ks-linia); border-radius: 6px;
  padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--ks-granat);
  cursor: pointer; text-align: left;
}
.ks-filtry-toggle > span:first-child { flex: 1; }
.ks-licznik {
  background: var(--ks-akcent); color: #fff; border-radius: 999px;
  min-width: 20px; padding: 1px 7px; font-size: 12px; text-align: center;
}
.ks-strzalka { transition: transform .2s ease; color: var(--ks-szept); }
.ks-filtry-toggle[aria-expanded="true"] .ks-strzalka { transform: rotate(180deg); }

@media (max-width: 991px) {
  .ks-filtry-toggle { display: flex; }
  .ks-filtry-karta { display: none; margin-top: 10px; }
  .ks-filtry.otwarte .ks-filtry-karta { display: block; }
  .ks-filtry { margin-bottom: 16px; }
  /* Nagłówek wewnątrz karty dubluje przycisk — na telefonie zbędny. */
  .ks-filtry-karta .ks-filtry-naglowek { display: none; }
}

/* ── popularne frazy na ekranie startowym ───────────────────────────────── */
.ks-popularne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.ks-popularne-etyk {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ks-szept); font-weight: 600;
}

/* ── dropdown pod polem w nagłówku ──────────────────────────────────────────
   Ten sam wygląd, co na stronie wyników — w nagłówku pole bywa węższe, więc
   wymuszamy sensowną szerokość minimalną, żeby nazwy produktów się nie łamały. */
.ks-podpowiedzi-hdr { min-width: 420px; max-width: 92vw; z-index: 1100; }
.ks-wszystkie { border-top: 1px solid var(--ks-linia); font-weight: 600; color: var(--ks-akcent); }
.ks-wszystkie .ks-nazwa { color: var(--ks-akcent); }
.ks-wszystkie:hover { background: #fff3ec; }

/* Stara lista motywu — na wypadek, gdyby jej skrypt zdążył ją odtworzyć. */
.dynamic-search-results { display: none !important; }

@media (max-width: 575px) {
  .ks-podpowiedzi-hdr { min-width: 0; left: 0; right: 0; }
}