/* ===== MW Motyw — LISTING (kategoria / sklep / wyniki filtrow). Mobile first ===== */
/* Tokeny i chrom: assets/tokeny.css. Kafelek i siatka: assets/kafelek.css. */
/* gutter: wspolna regula <main> w tokeny.css (pelna szerokosc, nie kontener 1360, Tomek 16.09) */

/* okruszki + tytuł widoku: WSPÓLNE, przeniesione do tokeny.css (22.07) */

/* ---- pasek narzędzi ---- */
.mw-pasek-narzedzi{ display:flex; align-items:center;
  gap:var(--mw-s3); padding:var(--mw-s1) 0 var(--mw-s3); margin-bottom:var(--mw-s4); } /* gora s1: h1 tuz nad „Filtruj" (Tomek 01.10) */
/* etykiety paska: ta sama typografia co zakladki karuzeli na home (sm, .18em, wersaliki) */
.mw-widok .mw-btn-filtry{ display:inline-flex; align-items:center; gap:var(--mw-s2); min-height:var(--mw-control-h); } /* pismo: etykieta 15 wersalikami w tokeny.css */
.mw-widok :is(.mw-btn-filtry, .mw-filters-clear, .mw-filtry__wyczysc):hover{ color:var(--mw-ink-3); }
.mw-widok .mw-btn-filtry [data-mw-filter-count]{ font-weight:500; }
.mw-licznik-wynikow{ color:var(--mw-ink-3); } /* pismo: drobny druk wersalikami w tokeny.css */
@media (width >= 900px){ /* bp:desktop */ .mw-licznik-wynikow{ font-size:var(--mw-fs-base); } }
.mw-pasek-narzedzi__prawa{ display:flex; align-items:center; gap:var(--mw-s3); margin-inline-start:auto; }
.mw-listing__head:has(+ .mw-pasek-narzedzi){ padding-bottom:0; }
/* sortowanie w panelu filtrow, na cala szerokosc (Tomek 29.09) */
.mw-sortuj__select{ inline-size:100%; font-family:var(--mw-body);
  color:var(--mw-ink); background-color:var(--mw-field-bg); border:1px solid var(--mw-taupe); /* ramka kontrolek taupe (14.10), ok. 4:1, WCAG 1.4.11 */
  border-radius:var(--mw-radius); min-height:var(--mw-control-h); padding:0 var(--mw-s5) 0 var(--mw-s3); cursor:pointer; line-height:var(--mw-lh-tight);
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E574C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--mw-s2) center; }
.mw-sortuj__select:hover{ border-color:var(--mw-ink); }
/* telefon: licznik tylko dla czytnika (tokeny.css), zeby aria-live dalej oglaszal „10 produktow" (WCAG 4.1.3) */

/* siatka .mw-siatka: assets/kafelek.css (jedna dla listingu, szukajki, 404 i piaskownicy) */

/* ---- kafelek: assets/kafelek.css, ten sam co na home ---- */
/* ---- porcje po 24 (sklep.js): kafelek poza porcja dostaje is-dalej, przycisk i licznik pod siatka ---- */
.mw-siatka .mw-tile.is-dalej{ display:none; }
.mw-doladuj{ display:flex; flex-direction:column; align-items:center; gap:var(--mw-s2); padding:var(--mw-s6) 0 0; }
.mw-doladuj[hidden]{ display:none; }
.mw-widok .mw-doladuj__btn{ flex:0 0 auto; min-width:min(100%, 280px); padding-inline:var(--mw-s4); }
.mw-doladuj__info{ color:var(--mw-ink-3); }

/* Kropki kolorow NIE na listingu (Michal 19.07): w trybie „per wariant" kazdy kolor ma kafelek */

/* ---- brak wyników ---- */
.mw-pusto{ padding:var(--mw-s7) 0; text-align:center; color:var(--mw-ink-3); }

/* ---- opis kategorii (POD produktami — SEO, nie zasłania towaru) ---- */
.mw-category-desc__intro{ max-width:70ch; margin-bottom:var(--mw-s6); }
.mw-category-desc p{ margin-bottom:.9rem; color:var(--mw-ink-3); }
.mw-category-desc h2,.mw-category-desc h3{ font-family:var(--mw-serif); font-weight:500;
  font-size:var(--mw-fs-ml); margin:var(--mw-s4) 0 .6rem; }
.mw-category-desc :is(h2, h3){ line-height:var(--mw-lh-snug); }
/* od 600: kafelek tekstowy w .mw-siatka, otwarty i bez znaku +/- (sklep.js) */
@media (width >= 600px){ /* bp:phone */
  .mw-category-desc .mw-faq__item{ border-bottom:0; }
  .mw-category-desc .mw-faq__item > summary{ display:block; min-height:0; padding:0; cursor:default; }
  .mw-category-desc .mw-faq__item > summary::after,
  .mw-category-desc .mw-faq__item[open] > summary::after{ content:none; }
  .mw-category-desc summary h2{ margin-top:0; }
  .mw-category-desc .mw-faq__answer{ padding-bottom:0; }
  .mw-category-desc .mw-faq__answer > :last-child{ margin-bottom:0; }
}
/* telefon: akordeon jak FAQ, pytanie w Garamondzie jak naglowek kafelka (Tomek 07.10) */
@media (width < 600px){ /* bp:phone */
  .mw-view .mw-siatka.mw-category-desc__in{ grid-template-columns:minmax(0,1fr); row-gap:0; }
  .mw-category-desc summary h2{ margin:0; }
}

/* ---- FAQ ---- */
.mw-faq{ max-width:70ch; }
/* akordeon pozycji: utility w tokeny.css */
.mw-faq__item > summary{ font-size:var(--mw-fs-base); }
.mw-faq__answer{ padding-bottom:var(--mw-s3); }

/* ===== FILTRY: przepisane na tokeny 16.09 (bylo: remy z lipca, opcje 19 px) ===== */
/* Telefon: pelny ekran. Desktop: panel z boku, filtrowanie na zywo. */

/* ---- „Wyczysc" obok „Filtruj (N)": zamiast zetonow (Tomek 01.10), wyglad dawnego linku „Wyczysc filtry" ---- */
/* skora wspolna z linkiem w stopce panelu; reset przycisku: tokeny.css */
.mw-widok :is(.mw-filters-clear, .mw-filtry__wyczysc){ min-height:var(--mw-control-h); font-size:var(--mw-fs-xs);
  text-transform:uppercase; text-decoration:underline; }
.mw-widok .mw-filters-clear{ color:var(--mw-ink); letter-spacing:var(--mw-ls-caps-sm); }

/* ---- powloka, naglowek, X: utility .mw-drawer (tokeny.css), jak koszyk i szukajka ---- */
/* przewija sie tresc, stopka z „Pokaz N" zostaje na dole panelu */
.mw-filtry__panel{ overflow:hidden; }
.mw-filtry__tresc{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:none; padding:0 var(--mw-drawer-pad); }

/* ---- sekcje stale otwarte: etykieta jak zakladki karuzeli, kreska miedzy sekcjami ---- */
.mw-widok .mw-filtry__sekcja{ margin:0; padding:var(--mw-s3) 0; border:0; border-top:1px solid var(--mw-line); min-inline-size:0; }
.mw-widok .mw-filtry__sekcja:first-child{ border-top:0; }
/* „Tylko przecenione" tuz pod sortowaniem, bez kreski: 4 + polowa wiersza 44 = ok. 16 od pola (Tomek 01.10) */
.mw-widok .mw-filtry__sekcja:has(+ .mw-filtry__sekcja--przel){ padding-bottom:var(--mw-s1); }
.mw-widok .mw-filtry__sekcja--przel{ padding-block:0 var(--mw-s1); border-top:0; }
/* legend plywa, inaczej siada na kresce fieldsetu */
.mw-widok .mw-filtry__etykieta{ display:block; float:inline-start; inline-size:100%; margin:0 0 var(--mw-s2); padding:0; font-weight:400; } /* pismo: etykieta 15 wersalikami */
.mw-filtry__etykieta + *{ clear:both; }

/* ---- opcje w siatce: 3 kolumny dla rozmiarow, 2 dla kolorow i kategorii; wiersz 44 (Fitts, cel dotyku) ---- */
.mw-filtry__opcje{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--mw-s3); }
/* rozmiary 3 kolumny wszedzie (telefon od 01.10); kolory i kategorie 2: dwuwyrazowe nazwy lamaly sie w trzeciej (Tomek 30.09) */
.mw-filtry__opcje:not(.mw-filtry__opcje--kolor, .mw-filtry__opcje--wide){ grid-template-columns:repeat(3, minmax(0, 1fr)); }
/* ostatnia opcja sama w rzedzie bierze cala szerokosc: „Wzory i kolory (9)" bez lamania na telefonie (01.10) */
:is(.mw-filtry__opcje--kolor, .mw-filtry__opcje--wide) > li:last-child:nth-child(odd){ grid-column:1 / -1; }
/* telefon: kategorie jedna kolumna, w dwoch „Kamizelki puchowe" lamaly sie na dwie linie */
@media (width < 600px){ /* bp:phone */ .mw-filtry__opcje--wide{ grid-template-columns:minmax(0, 1fr); } }
.mw-widok .mw-filtry__opcja{ display:flex; align-items:center; gap:var(--mw-s2); min-height:var(--mw-control-h);
  cursor:pointer; font-size:var(--mw-fs-sm); }
.mw-widok .mw-filtry__opcja input{ margin:0; flex:0 0 auto; } /* wyglad: CHECKBOX w tokeny.css */
/* kolor: checkbox jest probka, rozmiar jak reszta checkboxow; zaznaczony = ramka z odstepem + ptaszek bialy z ciemnym obrysem (01.10) */
.mw-widok .mw-filtry__opcja .mw-filtry__swatch{ border:0; background:var(--mw-swatch,var(--mw-line-2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mw-ink) 12%, transparent); }
.mw-widok .mw-filtry__opcja .mw-filtry__swatch:checked{ outline:1px solid var(--mw-ink); outline-offset:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10' stroke='%230F0F0F' stroke-width='5'/%3E%3Cpath d='M5 12l5 5 9-10' stroke='%23FAFAF7' stroke-width='2.5'/%3E%3C/svg%3E") center / 14px no-repeat, var(--mw-swatch,var(--mw-line-2)); }
/* licznik tuz za nazwa, nie przy krawedzi kolumny */
.mw-filtry__nazwa{ flex:0 1 auto; min-width:0; }
.mw-filtry__opcja.is-pusta{ opacity:.4; cursor:not-allowed; }

/* ---- cena: dwa pola w jednej linii, 44 wysokosci ---- */
.mw-filtry__cena{ display:flex; gap:var(--mw-s2); }
/* pole jak na checkoucie: etykieta wcieta w ramke, ramka i etykieta z tokeny.css */
.mw-filtry__pole{ position:relative; flex:1; display:block; padding-block-start:var(--mw-s2); }
.mw-widok .mw-filtry__pole > span{ position:absolute; z-index:1; top:var(--mw-s2); color:var(--mw-ink-3); }
.mw-widok .mw-filtry__pole input{ font:inherit; font-size:var(--mw-fs-base); width:100%; }

/* ---- stopka panelu (przyklejona): „Zastosuj filtry" na cala szerokosc, pod nim link „Wyczysc filtry" ---- */
.mw-filtry__stopka{ display:flex; flex-direction:column; align-items:center; gap:var(--mw-s2); padding:var(--mw-s3) var(--mw-drawer-pad);
  border-top:1px solid var(--mw-line); background:var(--mw-paper); }
.mw-widok .mw-filtry__stopka .mw-btn{ inline-size:100%; white-space:nowrap; }
.mw-widok .mw-filtry__wyczysc{ display:inline-flex; align-items:center; letter-spacing:var(--mw-ls-caps); }
/* przyciski .mw-btn: WSPÓLNE, przeniesione do tokeny.css (22.07) */

/* ---- DESKTOP: panel z boku (przycisk „Zastosuj filtry" zostaje — jak na telefonie) ---- */
/* szuflada jak koszyk (cala wysokosc okna), ale bez zaslony i blokady przewijania; siatka ustepuje panelowi (MW-11) */
@media (width >= 900px){ /* bp:desktop */
  /* powloka tylko na szerokosc panelu: strona obok zostaje klikalna */
  .mw-widok.mw-filtry{ inset:0 0 0 auto; inline-size:var(--mw-drawer-w); }
  .mw-filtry__tlo{ display:none; }
  /* powloka juz ma szerokosc panelu, margines s6 z telefonu nie ma tu od czego odejmowac */
  .mw-filtry__panel{ max-width:none; }
  /* otwarty panel: kafelek 3/4 szerokosci (3 kolumny przy 1280-1536 zamiast 2 wielkich), siatka widoczna przy filtrowaniu (02.10) */
  .mw-listing:has(> .mw-filtry:not([hidden])){ --mw-tile-w:clamp(13rem, 15vw, 19.7rem); padding-inline-end:calc(var(--mw-drawer-w) - var(--mw-page-pad) + var(--mw-tile-gap)); }
}