/**
 * Katalog produktow - listing i filtry.
 *
 * Przeniesione z zatwierdzonej makiety docs/makiety/kategoria.html. Przy
 * zmianie wygladu poprawiamy OBA miejsca albo zadne.
 *
 * Arkusz wpina sie TYLKO na widokach katalogu (inc/assets.php, widok "shop") -
 * karta produktu i strony tresci nie maja powodu wozic regul listingu.
 */

/* Odstep pod naglowkiem daje row-gap siatki - patrz .kat__uklad. */
.kat__naglowek h1{margin-top:.2rem}
.kat__wstep{max-width:62ch;color:var(--ink-soft);margin-top:var(--s2)}
/* Uklad: filtry z lewej, siatka z prawej. Na telefonie filtry chowaja sie
   w arkuszu wysuwanym od dolu - tam siega kciuk. */
.kat__uklad{display:grid;gap:var(--s4);row-gap:var(--s3);padding-bottom:var(--s5)}
@media(min-width:1000px){
  /* Dwie kolumny, dwa wiersze. Filtry zajmuja lewa kolumne na calej wysokosci
     i startuja rowno z nazwa kategorii; nazwa, opis, sortowanie i produkty ida
     jedno pod drugim w prawej kolumnie. Nazwa kategorii opisuje produkty, a nie
     filtry, wiec ma sie zaczynac tam, gdzie one. */
  .kat__uklad{
    grid-template-columns:15rem minmax(0,1fr);
    grid-template-areas:"filtry naglowek" "filtry tresc";
    column-gap:var(--s5);row-gap:var(--s3);align-items:start;
  }
  .filtry{grid-area:filtry}
  .kat__naglowek{grid-area:naglowek}
  .kat__tresc{grid-area:tresc}
}
/* --- panel filtrow --- */
.filtry{background:#fff}
@media(max-width:999px){
  /* Arkusz od dolu. Ten sam mechanizm co szuflada menu: visibility czeka na
     koniec przesuniecia, wiec zamkniety panel nie lapie ognisowej. */
  .filtry{
    position:fixed;left:0;right:0;bottom:0;z-index:90;max-height:82vh;overflow:auto;
    padding:var(--s3) var(--pad) calc(var(--s3) + env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(0,0,0,.16);
    transform:translateY(101%);visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s .3s;
  }
  .filtry[data-open="true"]{transform:none;visibility:visible;
    transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s}
  .filtry__uchwyt{
    width:38px;height:4px;border-radius:99px;background:var(--line-strong);
    margin:0 auto var(--s3);
  }
}
@media(min-width:1000px){
  /* Przy dluzszej liscie filtrow kolumna byla by wyzsza niz ekran i dol listy
     stawal sie nieosiagalny - przyklejony element nie przewija sie sam. */
  .filtry{
    position:sticky;top:calc(var(--head-h) + var(--s3));
    max-height:calc(100vh - var(--head-h) - var(--s5));overflow:auto;
  }
  /* Wieksza waga selektora, bo style tych elementow stoja NIZEJ w arkuszu.
     Przy rownej wadze wygralaby regula pozniejsza i przycisk zamykania
     zostawalby widoczny na komputerze, gdzie nie ma czego zamykac. */
  .filtry .filtry__uchwyt,.filtry .filtry__zamknij{display:none}
}
.filtry__gora{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}
.filtry__tytul{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);
}
.filtry__zamknij{width:44px;height:44px;display:grid;place-items:center;margin-right:-.6rem}
.filtry__zamknij svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none}
.filtry fieldset{border:0;padding:0;margin:0 0 var(--s4)}
.filtry legend{
  font-family:var(--font-display);font-size:.82rem;letter-spacing:.05em;
  padding:0;margin-bottom:.6rem;
}
.filtry__lista{display:flex;flex-direction:column;gap:.1rem}
/* Cale pole jest celem dotyku, nie sam kwadracik. */
.filtr{display:flex;align-items:center;gap:.65rem;min-height:44px;cursor:pointer;font-size:.9rem}
/* 22 px, jak .consent input w powloce - to jedyny rozmiar pola wyboru
   ustalony w projekcie. Wieksze pole jest tez lepsze pod palec. */
.filtr input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--ink)}
.filtr:hover{color:var(--navy)}
.filtr--wylaczony{opacity:.45;cursor:not-allowed}
.filtry__limit{font-size:.78rem;color:#b3261e;margin-top:-.4rem;margin-bottom:var(--s3)}
.filtry__limit:empty{display:none}
.filtry__stopka{display:flex;gap:.6rem;flex-wrap:wrap;padding-top:var(--s2);border-top:1px solid var(--line)}
.filtry__stopka .btn{flex:1 1 auto}
/* --- pasek nad siatka --- */
.kat__pasek{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s4);
}
/* Liczba jako akcent TYPOGRAFICZNY, nie kolorystyczny. Wczesniej "9" bylo
   ciemne, a "produktow" szare, przez co wygladalo jak dwa zlepione teksty
   albo niedokonczony styl. Teraz roznice niesie krój, a nie kontrast. */
.kat__ile{font-size:.85rem;color:var(--muted)}
.kat__ile b{
  font-family:var(--font-display);font-size:1rem;font-weight:400;color:var(--ink);
  letter-spacing:.02em;margin-right:.15rem;
}
.kat__narzedzia{display:flex;align-items:stretch;gap:var(--s2)}
/* Sortowanie jest u nas FORMULARZEM, bo dziala bez JavaScriptu - a makieta
   miala w tym miejscu samo pole wyboru. Zeby uklad pozostal ten sam, formularz
   zachowuje sie jak przezroczyste opakowanie: dziedziczy odstepy paska
   i oddaje cala szerokosc polu w srodku. */
.kat__narzedzia .kat__sortowanie{display:flex;align-items:stretch;gap:var(--s2);flex:1 1 auto}
.kat__narzedzia .kat__sortowanie .wybor{flex:1 1 auto}
/* To najdluzsza nazwa sortowania ("Cena: od najniższej") wyznacza szerokosc
   pola - tak jak w makiecie, gdzie pole wyboru stalo wprost w pasku. U nas
   opakowuje je formularz (dziala bez JavaScriptu) i przegladarka pozwalala
   sciagnac <select> ponizej jego tresci: pasek wychodzil w proporcji 179/145
   zamiast 139/184, a napis w polu sie urywal. */
.kat__narzedzia .kat__sortowanie .wybor select{min-width:max-content}
.kat__ile{margin-left:auto}
/* Oba pola tej samej wysokosci - stretch na kontenerze nie wystarczy, bo
   <select> ma wlasna wysokosc z przegladarki. */
.kat__narzedzia .wybor,.kat__narzedzia .wybor select{height:100%}
/* Na telefonie oba pola dziela wiersz po polowie, a licznik schodzi pod nie.
   Wczesniej sortowanie wisialo przy prawej krawedzi z pusta polowa obok. */
@media(max-width:620px){
  .kat__narzedzia{width:100%}
  .kat__narzedzia > *{flex:1 1 0}
  .kat__ile{margin-left:0;width:100%}
  /* Podzial wiersza zostaje taki, jak w makiecie: oba pola rosna po rowno,
     a szersze z nich (sortowanie z nazwa "Cena: od najniższej") bierze tyle,
     ile potrzebuje jego tresc. Formularz sortowania musi tu dostac te sama
     podstawe co reszta paska - z wlasnym "flex:1 1 auto" bral szerokosc
     swojej tresci, a przycisk filtrow kurczyl sie do 110 zamiast 139 px. */
  .kat__narzedzia .kat__sortowanie{flex:1 1 0}
}
/* Natywny <select> byl jedynym surowym elementem formularza w calym serwisie:
   systemowa strzalka, systemowy krój, wysokosc z przegladarki. Zdejmujemy
   wyglad systemowy i rysujemy strzalke sami - element pozostaje prawdziwym
   <select>, wiec obsluga z klawiatury i czytnik ekranu dzialaja bez zmian. */
.wybor{position:relative;display:inline-flex}
.wybor select{
  appearance:none;-webkit-appearance:none;
  /* Krój marki, ale BEZ wersalikow: text-transform dziala na zamknietym polu,
     a rozwinieta liste rysuje system operacyjny i nie wszedzie ja zastosuje -
     wychodzilby rozjazd miedzy tym, co widac przed i po kliknieciu. */
  font-family:var(--font-display);font-size:.85rem;letter-spacing:.03em;
  min-height:44px;padding:0 2.6rem 0 .9rem;
  border:1px solid var(--line-control);background:#fff;color:var(--ink);cursor:pointer;
  transition:border-color .2s;
}
.wybor select:hover{border-color:var(--ink)}
.wybor__strzalka{
  position:absolute;right:.85rem;top:50%;translate:0 -50%;
  width:13px;height:13px;stroke:var(--ink);fill:none;stroke-width:1.4;pointer-events:none;
}
.kat__filtrujBtn{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;
  border:1px solid var(--line-control);font-family:var(--font-display);font-size:.78rem;
  letter-spacing:var(--track);text-transform:uppercase;
}
.kat__filtrujBtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
@media(min-width:1000px){
  .kat__filtrujBtn{display:none}
}
.kat__filtrujBtn b{
  display:grid;place-items:center;min-width:20px;height:20px;padding:0 .3rem;
  background:var(--ink);color:#fff;font-family:var(--text);font-size:.7rem;font-weight:400;
}
/* --- wybrane filtry --- */
.wybrane{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s3)}
.wybrane:empty{display:none}
/* Chip ma 44 px wysokosci, a krzyzyk 44x44 - to najczestszy sposob zdejmowania
   filtra na telefonie i najgorsze miejsce na chybione klikniecie. */
.wybrany{
  display:inline-flex;align-items:center;gap:.2rem;min-height:44px;padding-left:.8rem;
  background:var(--porcelain);font-size:.82rem;
}
.wybrany span{white-space:nowrap}
/* Zdejmowanie filtra jest u nas ODNOSNIKIEM, nie przyciskiem: dziala bez
   JavaScriptu i da sie je otworzyc w nowej karcie. Rozmiar musi byc ten sam
   co w makiecie - bez tego selektora krzyzyk mial 11 px zamiast 44 i na
   telefonie trafiala w niego co druga proba. */
.wybrany button,
.wybrany a{
  width:44px;height:44px;display:grid;place-items:center;color:var(--muted);flex:0 0 auto;
}
.wybrany button:hover,
.wybrany a:hover{color:var(--ink)}
.wybrany svg{width:11px;height:11px;stroke:currentColor;stroke-width:2;fill:none}
/* --- siatka --- */
/* Ten sam odstep co w siatce produktow na stronie glownej (--s6 na --s4).
   Wczesniej bylo --s5, wiec te same kafelki mialy inny rytm pionowy
   w zaleznosci od tego, na ktorej stronie sie znalazly. */
.kat__siatka{display:grid;gap:var(--s6) var(--s4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){
  .kat__siatka{grid-template-columns:repeat(3,1fr)}
}
/* --- pusto --- */
.kat__pusto{padding:var(--s5) 0;max-width:46ch}
.kat__pusto h2{font-family:var(--font-display);font-size:1.15rem;font-weight:400;margin-bottom:var(--s2)}
.kat__pusto p{color:var(--ink-soft);margin-bottom:var(--s3)}
.kat__pusto-akcje{display:flex;flex-wrap:wrap;gap:.6rem}
/* --- doladowywanie listy --- */
.dociag{display:flex;flex-direction:column;align-items:center;gap:var(--s2);margin-top:var(--s5)}
.dociag[hidden]{display:none}
.dociag__stan{font-size:.8rem;color:var(--muted)}
/* --- opis pod siatka --- */
/* Tresc UZUPELNIAJACA, nie glowna - klientka przyszla tu po produkt, a nie po
   akapity. Tlo porcelanowe oddziela ja od siatki mocniej niz sama linia,
   a wezsza kolumna (62ch, jak wszedzie indziej) czyta sie zamiast meczyc. */
.kat__opis{background:var(--porcelain);padding-block:var(--s5);margin-top:var(--s5)}
.kat__opis__grid{display:grid;gap:var(--s4)}
@media(min-width:900px){
  .kat__opis__grid{grid-template-columns:minmax(0,62ch) minmax(0,16rem);gap:var(--s5);align-items:start}
}
.kat__opis h2{
  font-family:var(--font-display);font-size:1.15rem;font-weight:400;letter-spacing:.04em;
  margin-top:.2rem;margin-bottom:var(--s2);
}
.kat__opis p+p{margin-top:var(--s2)}
/* Ta sama pulapka co w artykule: h2 zmniejszony do 1,15 rem, a h3 bez
   reguly bralby globalne 1,5 rem i przerosl naglowek nad soba. */
.kat__opis h3{
  font-family:var(--font-display);font-size:1rem;font-weight:400;letter-spacing:.04em;
  margin-top:var(--s3);margin-bottom:var(--s1);
}
/* Odnosniki do siostrzanych kategorii. Klientka, ktora nie znalazla tu tego,
   czego szukala, ma dokad pojsc - zamiast wracac do menu. */
.kat__dalej{border-left:2px solid var(--line);padding-left:var(--s3)}
@media(max-width:899px){
  .kat__dalej{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:var(--s3)}
}
.kat__dalej h3{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2);font-weight:400;
}
.kat__dalej ul{display:flex;flex-direction:column}
.kat__dalej a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  min-height:44px;font-size:.92rem;border-bottom:1px solid var(--line);
}
.kat__dalej li:last-child a{border-bottom:0}
.kat__dalej a:hover{color:var(--navy)}
.kat__dalej svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4;flex:0 0 auto}