/* ==========================================================================
   KATALOG 2.0 — STYLE KART I SIATKI

   Źródło: prototyp marketingu (css/tokeny.css, baza.css, komponenty.css).
   Nazwy klas ZOSTAJĄ takie jak w prototypie (.karta, .tag, .btn, .siatka),
   żeby kolejne zipy dało się porównywać bez tłumaczenia nazw. Izolacja idzie
   przez wrapper: KAŻDY selektor zaczyna się od .eldago-katalog2, więc te bardzo
   generyczne klasy nie widzą się z Kadence w żadną stronę.

   Tokeny też siedzą na wrapperze, nie w :root — motyw ich nie zobaczy.
   Fonty celowo NIE są narzucone (--font-*: inherit): katalog ma mówić krojem
   strony, a nie ciągnąć Plus Jakarta Sans z prototypu.
   ========================================================================== */

.eldago-katalog2 {
  /* --- kolory ---
     Wartości biorą się z globalnych zmiennych motywu (child theme), a liczby
     poniżej są tylko awaryjne. Dzięki temu korekta palety w jednym miejscu
     przechodzi na katalog i nie rozjeżdżamy się po pierwszej zmianie kolorów. */
  --akcent:            var(--eldago-accent,               #FFD600);
  --akcent-hover:      var(--eldago-accent-hover,         #EFC300);
  --akcent-ciemny:     var(--eldago-accent-dark,          #C9A800);
  --akcent-tint:       var(--eldago-accent-tint,          #FFFBE6);
  --tlo:               var(--eldago-bg,                   #FFFFFF);
  --tlo-alt:           var(--eldago-bg-alt,               #F6F8FA);
  --tekst:             var(--eldago-text,                 #101418);
  --tekst-drugi:       var(--eldago-text-secondary,       #3F4A5C);
  --tekst-wygaszony:   var(--eldago-text-muted,           #59647A);
  --tekst-na-akcencie: var(--eldago-text,                 #101418);
  --linia:             var(--eldago-line,                 #E4E8ED);
  --linia-mocna:       var(--eldago-line-strong,          #C9D0D9);
  --sukces:            var(--eldago-success,              #13612E);
  --sukces-tint:       var(--eldago-success-tint,         #EEF7F1);

  /* --- typografia (krój z motywu) --- */
  --font-naglowek: inherit;
  --font-tekst:    inherit;
  --rozmiar-maly:  0.875rem;
  --rozmiar-mikro: 0.75rem;

  /* --- odstępy --- */
  --o-1: 4px;  --o-2: 8px;   --o-3: 12px;
  --o-4: 16px; --o-5: 24px;  --o-6: 32px;  --o-7: 40px;

  /* --- kształty i ruch --- */
  --radius-s:  8px;
  --radius-m:  12px;
  --radius-l:  18px;
  --radius-pigulka: 999px;
  --cien-l: 0 12px 40px rgba(16, 20, 24, .10);
  --czas-krotki: 150ms;
  --czas-bazowy: var(--eldago-motion, 300ms);
  --czas-dlugi:  600ms;
  --easing: var(--eldago-easing, cubic-bezier(.44, 0, .56, 1));

  /* Minimalny obszar klikalny z wytycznych (§8). */
  --cel-dotyku: 44px;

  color: var(--tekst);
}

/* ------------------------------------------------------------------ SIATKA */
.eldago-katalog2 .siatka {
  display: grid;
  gap: var(--o-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
}
.eldago-katalog2 [hidden] { display: none !important; }

/* ------------------------------------------------------------------ SEKCJA */
.eldago-katalog2 .sekcja-katalogu { margin: 0 0 var(--o-7); }
.eldago-katalog2 .sekcja-katalogu__gora {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--o-2) var(--o-3);
  margin: 0 0 var(--o-5);
}
.eldago-katalog2 .sekcja-katalogu__tytul {
  font-family: var(--font-naglowek);
  /* Skala H2 z wytycznych — płynna, więc nie potrzebuje własnego breakpointu. */
  font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem);
  font-weight: 800; letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0;
}
.eldago-katalog2 .sekcja-katalogu__licznik {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 9px;
  background: var(--akcent); color: var(--tekst-na-akcencie);
  border-radius: var(--radius-pigulka);
  font-size: var(--rozmiar-maly); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.eldago-katalog2 .sekcja-katalogu__opis {
  flex: 1 1 100%;
  margin: 0; color: var(--tekst-drugi); font-size: var(--rozmiar-maly);
}

/* ------------------------------------------------------------------- KARTA */
.eldago-katalog2 .karta {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform var(--czas-bazowy) var(--easing),
              box-shadow var(--czas-bazowy) var(--easing),
              border-color var(--czas-bazowy) var(--easing);
}
.eldago-katalog2 .karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--cien-l);
  border-color: var(--linia-mocna);
}
.eldago-katalog2 .karta--wyrozniona {
  border-color: var(--akcent-ciemny);
  box-shadow: 0 0 0 3px var(--akcent-tint);
}

.eldago-katalog2 .karta__miniatura {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--tlo-alt);
  overflow: hidden;
}
.eldago-katalog2 .karta__miniatura img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: scale var(--czas-dlugi) var(--easing);
}
.eldago-katalog2 .karta:hover .karta__miniatura img { scale: 1.04; }
.eldago-katalog2 .karta__zastepnik {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--linia-mocna);
}
.eldago-katalog2 .karta__plakietki {
  position: absolute; inset: var(--o-3) var(--o-3) auto var(--o-3);
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px;
  pointer-events: none; z-index: 2;
}
/* Cały rząd idzie na jedną stronę — pole „położenie badge” ma zwalniać róg
   zdjęcia, więc plakietki trzymają się razem zamiast obstawiać oba narożniki. */
.eldago-katalog2 .karta__plakietki--lewo  { justify-content: flex-start; }
.eldago-katalog2 .karta__plakietki--prawo { justify-content: flex-end; }

.eldago-katalog2 .karta__tresc {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--o-5); gap: var(--o-3);
}
.eldago-katalog2 .karta__tytul {
  font-family: var(--font-naglowek);
  font-size: 1.125rem; font-weight: 700; line-height: 1.3;
  margin: 0;
}
.eldago-katalog2 .karta__tytul a { text-decoration: none; color: inherit; }
/* Cała karta klikalna — pseudoelement przykrywa kafelek, a elementy, które mają
   własną akcję (przycisk w stopce), wychodzą nad niego przez z-index. */
.eldago-katalog2 .karta__tytul a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.eldago-katalog2 .karta__autor {
  margin: 0;
  color: var(--tekst-wygaszony);
  font-size: var(--rozmiar-mikro);
  font-weight: 600;
  letter-spacing: .02em;
}
.eldago-katalog2 .karta__rezultat {
  margin: 0;
  color: var(--tekst-drugi);
  font-size: var(--rozmiar-maly);
  line-height: 1.55;
}
.eldago-katalog2 .karta__meta {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0; padding: 0; list-style: none;
  font-size: var(--rozmiar-maly); color: var(--tekst-drugi);
}
.eldago-katalog2 .karta__meta li { display: flex; gap: var(--o-2); margin: 0; }
.eldago-katalog2 .karta__meta b { color: var(--tekst); font-weight: 600; flex: none; }

.eldago-katalog2 .karta__stopka {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--o-3);
  margin-top: auto; padding-top: var(--o-4);
  border-top: 1px solid var(--linia);
}
.eldago-katalog2 .karta__cennik { min-width: 0; }
.eldago-katalog2 .karta__ceny {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--o-2);
  margin: 0;
}
.eldago-katalog2 .karta__cena {
  font-family: var(--font-naglowek);
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em;
  white-space: nowrap;
}
/* Cena przed obniżką stoi OBOK nowej, nie pod nią — mockup marketingu z 2026-08-19. */
.eldago-katalog2 .karta__cena-stara {
  font-size: var(--rozmiar-maly); font-weight: 500;
  color: var(--tekst-wygaszony);
  text-decoration: line-through;
  white-space: nowrap;
}
.eldago-katalog2 .karta__rabat {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  background: var(--akcent); color: var(--tekst-na-akcencie);
  border-radius: var(--radius-pigulka);
  font-size: var(--rozmiar-mikro); font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Rabat indywidualny — ten sam kolor co plakietka „Indywidualny rabat”, żeby oba
   sygnały na karcie czytały się jako jedna informacja, a nie dwie różne obniżki. */
.eldago-katalog2 .karta__rabat--indywidualny {
  background: var(--sukces); color: #FFFFFF;
}
/* Zdanie wymagane Omnibusem. Ma być czytelne, ale nie konkurować z ceną. */
.eldago-katalog2 .karta__omnibus {
  margin: 4px 0 0;
  color: var(--tekst-wygaszony);
  font-size: var(--rozmiar-mikro);
  line-height: 1.4;
}
.eldago-katalog2 .karta__omnibus--pusta { opacity: .7; }
.eldago-katalog2 .karta__stopka > .btn { position: relative; z-index: 2; flex: none; }

/* Stan „już kupione” — komunikat zamiast ceny, przycisk prowadzi do Publigo. */
.eldago-katalog2 .karta__posiadane {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sukces); font-weight: 700; font-size: var(--rozmiar-maly);
}

/* -------------------------------------------------------------- PLAKIETKI */
.eldago-katalog2 .tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-s);
  font-size: var(--rozmiar-mikro); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--tlo); color: var(--tekst-drugi);
  border: 1px solid var(--linia);
}
.eldago-katalog2 .tag--neutralny { background: var(--tlo); }
.eldago-katalog2 .tag--akcent {
  background: var(--akcent);
  color: var(--tekst-na-akcencie);
  border-color: var(--akcent-ciemny);
}
.eldago-katalog2 .tag--sukces {
  background: var(--sukces-tint);
  color: var(--sukces);
  border-color: currentColor;
}

/* Ikony: SVG dziedziczące kolor. `display:block` zapobiega dolnemu odstępowi
   po linii bazowej, przez który krzyżyki siadały krzywo w kółkach. */
.eldago-katalog2 .ikona { display: block; flex: none; }

/* ---------------------------------------------------------------- PRZYCISK */
.eldago-katalog2 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--o-3);
  min-height: var(--cel-dotyku);
  /* Domyślnie padding SYMETRYCZNY — przycisk bez ikony ma wyglądać normalnie. */
  padding: 8px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pigulka);
  font-family: var(--font-tekst);
  font-size: var(--rozmiar-maly);
  font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--czas-bazowy) var(--easing),
              color var(--czas-bazowy) var(--easing),
              border-color var(--czas-bazowy) var(--easing),
              transform var(--czas-krotki) var(--easing);
}
.eldago-katalog2 .btn:hover { transform: translateY(-1px); }
.eldago-katalog2 .btn:active { transform: translateY(0); }
/* Zwężenie krawędzi TYLKO od strony, po której faktycznie stoi ikona w otoczce —
   to ona dokłada tam masy. Ikona na końcu (strzałka CTA) zwęża prawą stronę,
   ikona na początku (np. iskra przy „Dobierz kurs”) lewą. Sama obecność ikony
   nie wystarczy jako warunek: przy ikonie z przodu zwężenie prawej krawędzi
   przesuwało napis i przycisk wyglądał na przekrzywiony. */
.eldago-katalog2 .btn:has(.ikona:last-child) { padding-right: 8px; }
.eldago-katalog2 .btn:has(.ikona:first-child) { padding-left: 8px; }

/* Strzałka w kółku po każdym CTA — znak firmowy prototypu. Ikona jest teraz
   w markup jako SVG (currentColor), więc kółko rysuje otoczka, nie pseudoelement. */
.eldago-katalog2 .btn .ikona {
  box-sizing: content-box;
  width: 16px; height: 16px; flex: none;
  padding: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background var(--czas-bazowy) var(--easing),
              transform var(--czas-bazowy) var(--easing);
}
.eldago-katalog2 .btn:hover .ikona {
  background: color-mix(in srgb, currentColor 26%, transparent);
  transform: translateX(3px);
}
/* Ikona wiodąca nie przesuwa się przy najechaniu — ruch w prawo ma sens tylko
   dla strzałki prowadzącej dalej, nie dla znaku przy nazwie akcji. */
.eldago-katalog2 .btn:hover .ikona:first-child { transform: none; }
.eldago-katalog2 .btn--glowny { background: var(--akcent); color: var(--tekst-na-akcencie); }
.eldago-katalog2 .btn--glowny:hover { background: var(--akcent-hover); }
.eldago-katalog2 .btn--drugi {
  background: transparent; color: var(--tekst); border-color: var(--linia-mocna);
}
.eldago-katalog2 .btn--drugi:hover { border-color: var(--tekst); }

/* Notka techniczna dla administratora (np. produkty ukryte przez brak tematu). */
.eldago-katalog2 .katalog2__notka {
  margin: var(--o-4) 0 0;
  padding: var(--o-3) var(--o-4);
  background: var(--tlo-alt);
  border-left: 3px solid var(--linia-mocna);
  border-radius: var(--radius-s);
  color: var(--tekst-drugi);
  font-size: var(--rozmiar-maly);
}

/* ------------------------------------------------------------ STAN PUSTY */
.eldago-katalog2 .katalog-pusty {
  padding: var(--o-7) var(--o-5);
  text-align: center;
  color: var(--tekst-drugi);
  background: var(--tlo-alt);
  border-radius: var(--radius-l);
}

/* ------------------------------------------------ UKŁAD Z PANELEM FILTRÓW */
.eldago-katalog2 .katalog2__uklad {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--o-6);
  align-items: start;
}
.eldago-katalog2 .katalog2__wyniki { min-width: 0; }

.eldago-katalog2 .katalog2__gora {
  display: flex; align-items: center; gap: var(--o-3);
  margin: 0 0 var(--o-5);
}
/* Pasek narzędzi siedzi w KOLUMNIE WYNIKÓW, nie nad całym blokiem — licznik
   i sortowanie opisują wyniki, więc stoją dokładnie nad nimi. */
.eldago-katalog2 .katalog2__narzedzia {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--o-3);
  padding: 0 0 var(--o-4);
  border-bottom: 1px solid var(--linia);
  margin: 0 0 var(--o-4);
}
.eldago-katalog2 .katalog2__licznik {
  margin: 0; color: var(--tekst-drugi); font-size: var(--rozmiar-maly);
}
/* Dwie klasy na tym samym elemencie: bez tego reguła .select (ta sama
   specyficzność, ale niżej w pliku) kasuje padding i tekst wchodzi na strzałkę. */
.eldago-katalog2 .select.katalog2__sort {
  margin-left: auto;
  width: auto; min-width: 0;
  max-width: 240px;
  padding-right: 44px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23101418' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  text-overflow: ellipsis;
}
.eldago-katalog2 .katalog2__filtry-mobile { display: none; }
.eldago-katalog2 .katalog2__aktywne {
  display: flex; flex-wrap: wrap; gap: var(--o-2);
  margin: 0 0 var(--o-5);
}
.eldago-katalog2 .katalog2__aktywne[hidden] { display: none; }

/* -------------------------------------------------------------- SZUKAJKA */
.eldago-katalog2 .input, .eldago-katalog2 .select {
  min-height: 48px;
  padding: 11px 16px;
  background-color: var(--tlo);
  color: var(--tekst);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--radius-pigulka);
  font: inherit;
  transition: border-color var(--czas-bazowy) var(--easing),
              box-shadow var(--czas-bazowy) var(--easing);
}
.eldago-katalog2 .input { width: 100%; }
/* Focus: obrysu NIE kasujemy — wytyczne (§13) wymagają widocznego focusu
   z outline i offsetem. :focus-visible, więc kliknięcie myszą nie rysuje ramki. */
.eldago-katalog2 .input:focus-visible,
.eldago-katalog2 .select:focus-visible,
.eldago-katalog2 .btn:focus-visible,
.eldago-katalog2 .chip:focus-visible,
.eldago-katalog2 .filtry__ikona:focus-visible,
.eldago-katalog2 .szukajka__czysc:focus-visible,
.eldago-katalog2 .opcja input:focus-visible,
.eldago-katalog2 .karta__tytul a:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}
/* Karta klikalna przez pseudoelement — obrys ma objąć kartę, nie sam tytuł. */
.eldago-katalog2 .karta:has(.karta__tytul a:focus-visible) {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}
.eldago-katalog2 .input:focus, .eldago-katalog2 .select:focus {
  border-color: var(--tekst);
}
/* Połowa szerokości bloku — pełna szerokość robiła z pola dominantę ekranu. */
.eldago-katalog2 .szukajka {
  position: relative;
  flex: 1 1 auto;
  max-width: 50%;
}
.eldago-katalog2 .szukajka .input { padding-left: 48px; padding-right: 46px; }
.eldago-katalog2 .szukajka__ikona {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--tekst-wygaszony); pointer-events: none;
}
.eldago-katalog2 .szukajka .input::-webkit-search-cancel-button { display: none; }
.eldago-katalog2 .szukajka__czysc {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tlo-alt); border: 0; border-radius: 50%;
  line-height: 1; color: var(--tekst-drugi); cursor: pointer;
}
/* Kółko zostaje wizualnie małe (mieści się w polu 48 px), ale obszar klikalny
   rozciągamy pseudoelementem do wymaganych 44 px. */
.eldago-katalog2 .szukajka__czysc::before {
  content: ''; position: absolute; inset: -7px;
}
.eldago-katalog2 .szukajka__czysc:hover { background: var(--linia); }

/* ---------------------------------------------------------------- FILTRY */
.eldago-katalog2 .filtry {
  position: sticky; top: 100px;
  /* Panel dłuższy niż ekran musi mieć własne przewijanie — inaczej przy sticky
     dolne fasety są nieosiągalne, dopóki nie zjedzie się na koniec całej strony.
     100px = odstęp od góry, 40px = zapas, żeby ostatni wiersz nie kleił się do krawędzi. */
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--o-4);
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--radius-l);
}
/* Delikatny pasek przewijania, żeby nie dominował wąskiej kolumny. */
.eldago-katalog2 .filtry { scrollbar-width: thin; }
.eldago-katalog2 .filtry::-webkit-scrollbar { width: 8px; }
.eldago-katalog2 .filtry::-webkit-scrollbar-thumb {
  background: var(--linia-mocna); border-radius: var(--radius-pigulka);
}

/* Nagłówek przykleja się do góry panelu podczas przewijania fasety — inaczej
   „Wyczyść filtry” ucieka poza widok razem z listą. */
.eldago-katalog2 .filtry__gora {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1;
  background: var(--tlo);
  margin: 0 0 var(--o-3);
  padding-bottom: var(--o-2);
}
.eldago-katalog2 .filtry__tytul {
  font-family: var(--font-naglowek); font-size: 1.125rem; font-weight: 800;
}
.eldago-katalog2 .filtry__akcje { display: inline-flex; gap: 6px; }
.eldago-katalog2 .filtry__ikona {
  position: relative;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tlo-alt); border: 0; border-radius: 50%;
  font-size: 22px; line-height: 1; color: var(--tekst); cursor: pointer;
  transition: background var(--czas-krotki) var(--easing);
}
.eldago-katalog2 .filtry__ikona:hover { background: var(--linia); }
.eldago-katalog2 .filtry__ikona::before { content: ''; position: absolute; inset: -5px; }
.eldago-katalog2 .filtry__ikona[hidden] { display: none; }
/* Zamykanie ma sens tylko w szufladzie — na desktopie panel jest częścią strony. */
.eldago-katalog2 .filtry__zamknij { display: none; }
.eldago-katalog2 .filtry__grupa {
  border: 0; padding: 0; margin: 0 0 var(--o-4);
}
.eldago-katalog2 .filtry__grupa:last-child { margin-bottom: 0; }
/* Fasety kursanta to inna kategoria informacji niż cechy produktu — oddzielone kreską. */
.eldago-katalog2 .filtry__grupa--kursant {
  padding-top: var(--o-4);
  border-top: 1px solid var(--linia);
}
.eldago-katalog2 .filtry__legenda {
  padding: 0; margin: 0 0 var(--o-1);
  font-size: var(--rozmiar-mikro); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tekst-wygaszony);
}
.eldago-katalog2 .opcja {
  display: flex; align-items: flex-start; gap: var(--o-3);
  /* Wysokość trzyma min-height (wymóg 44 px z §8), więc padding pionowy może być
     mniejszy — wiersze i tak nie zejdą poniżej progu dotykowego. */
  min-height: var(--cel-dotyku);
  align-items: center;
  padding: 4px 8px; margin: 0 -8px;
  border-radius: var(--radius-s); cursor: pointer;
  font-size: var(--rozmiar-maly); line-height: 1.45;
  transition: background var(--czas-krotki) var(--easing);
}
.eldago-katalog2 .opcja:hover { background: var(--tlo-alt); }
.eldago-katalog2 .opcja input {
  width: 18px; height: 18px; margin: 0;
  accent-color: var(--tekst); flex: none;
}
.eldago-katalog2 .opcja__licznik {
  margin-left: auto; color: var(--tekst-wygaszony);
  font-variant-numeric: tabular-nums;
}
/* Opcja bez wyników: wygaszona, ale nadal widoczna — zniknięcie opcji przy
   zmianie innego filtra jest bardziej dezorientujące niż szare zero. */
.eldago-katalog2 .opcja--martwa { opacity: .45; cursor: default; }
.eldago-katalog2 .opcja--martwa:hover { background: none; }

/* ------------------------------------------------------- AKTYWNE FILTRY */
.eldago-katalog2 .chip {
  display: inline-flex; align-items: center; gap: var(--o-2);
  min-height: var(--cel-dotyku);
  padding: 7px 16px;
  background: var(--tlo); color: var(--tekst);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--radius-pigulka);
  font: inherit; font-size: var(--rozmiar-maly); font-weight: 600;
  cursor: pointer;
  transition: background var(--czas-krotki) var(--easing),
              border-color var(--czas-krotki) var(--easing);
}
.eldago-katalog2 .chip:hover { border-color: var(--tekst); }
.eldago-katalog2 .chip--aktywny {
  background: var(--akcent-tint);
  border-color: var(--akcent-ciemny);
}
.eldago-katalog2 .chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none;
  background: var(--akcent); border-radius: 50%;
}
.eldago-katalog2 .tylko-dla-czytnikow {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ MOBILE */
@media (max-width: 900px) {
  .eldago-katalog2 .katalog2__uklad { grid-template-columns: minmax(0, 1fr); }
  .eldago-katalog2 .katalog2__filtry-mobile { display: inline-flex; }
  .eldago-katalog2 .filtry { display: none; }
  .eldago-katalog2 .szukajka { max-width: none; }
  .eldago-katalog2 .select.katalog2__sort { margin-left: auto; max-width: 190px; }
}

/* Szuflada: panel wędruje do <body>, ale ZAWSZE wewnątrz hosta z klasą
   .eldago-katalog2 — inaczej wypadłby ze scope'u i stracił całe stylowanie
   wnętrza (opcje, liczniki, legendy). Host jest jednocześnie przygaszeniem tła. */
.eldago-katalog2--szuflada {
  position: fixed; inset: 0;
  z-index: 999999;
  background: rgba(16, 20, 24, .45);
}
.eldago-katalog2--szuflada .filtry {
  display: block;
  max-height: none; position: static;
  position: absolute; inset: 0 auto 0 0;
  width: min(88%, 360px);
  overflow-y: auto;
  padding: var(--o-5);
  border: 0; border-radius: 0;
  box-shadow: 0 0 60px rgba(16, 20, 24, .3);
}
.eldago-katalog2--szuflada .filtry__zamknij {
  display: inline-flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------------ MOBILE */
@media (max-width: 620px) {
  .eldago-katalog2 .siatka { grid-template-columns: 1fr; gap: var(--o-4); }
  .eldago-katalog2 .karta__tresc { padding: var(--o-4); }
  /* Cena i przycisk obok siebie potrafią się zderzyć przy długiej kwocie. */
  .eldago-katalog2 .karta__stopka { flex-wrap: wrap; gap: var(--o-3); }
}

/* Użytkownicy z ograniczonym ruchem — bez unoszenia karty i zoomu zdjęcia. */
@media (prefers-reduced-motion: reduce) {
  .eldago-katalog2 .karta,
  .eldago-katalog2 .karta__miniatura img,
  .eldago-katalog2 .btn,
  .eldago-katalog2 .btn::after { transition: none; }
  .eldago-katalog2 .karta:hover { transform: none; }
  .eldago-katalog2 .karta:hover .karta__miniatura img { scale: 1; }
}