/* ============================================================
   MW Motyw — LISTING (kategoria / sklep / wyniki filtrów).
   MOBILE FIRST: bazowe reguły = telefon, media query rozszerzają.
   Tokeny i chrom: assets/tokeny.css.
   ============================================================ */

.mw-sklep__main{ max-width:var(--mw-max); margin-inline:auto; padding:0 var(--mw-pad) 3rem; }

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

/* ---- pasek narzędzi ---- */
.mw-pasek-narzedzi{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 0 1.25rem; border-bottom:1px solid var(--mw-line); margin-bottom:1.25rem; }
.mw-widok .mw-btn-filtry{ display:inline-flex; align-items:center; gap:.6rem;
  font-size:1rem; letter-spacing:.12em; text-transform:uppercase; }
.mw-widok .mw-btn-filtry:hover{ color:var(--mw-taupe); }
.mw-licznik-wynikow{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mw-ink-3); }
.mw-pasek-narzedzi__prawa{ display:flex; align-items:center; gap:1rem; }
.mw-sortuj{ display:inline-flex; align-items:center; }
.mw-sortuj__select{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mw-ink); background-color:var(--mw-paper); border:1px solid var(--mw-line-2);
  border-radius:2px; padding:.4rem 1.7rem .4rem .7rem; cursor:pointer; line-height:1.1;
  -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 .6rem center; }
.mw-sortuj__select:hover{ border-color:var(--mw-ink-3); }
@media (max-width:480px){ .mw-pasek-narzedzi .mw-licznik-wynikow{ display:none; } }

/* ---- siatka: 2 kolumny na telefonie ----
   minmax(0,…), NIE gołe 1fr — patrz pułapka szerokości w pdp.css (23.07). */
.mw-siatka{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--mw-gap) var(--mw-gap); }
@media (min-width:700px){ .mw-siatka{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .mw-siatka{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ---- kafelek ---- */
.mw-kafelek{ position:relative; display:flex; flex-direction:column; }
/* KONIECZNE: filtr klienckie ukrywa kafelki przez atrybut [hidden], a display:flex
   powyżej by to nadpisał (hidden = display:none z UA ma niższy priorytet niż klasa). */
.mw-kafelek[hidden]{ display:none !important; }
.mw-kafelek__link{ text-decoration:none; display:flex; flex-direction:column; gap:.4rem; }
/* Ceny wyrównujemy przez STAŁĄ WYSOKOŚĆ bloku nazwy (2 wiersze), a nie przez
   dociskanie ceny do dołu kafelka — tamto robiło dziurę, bo kafelki rozciągają
   się do wysokości najwyższego w rzędzie. Tu cena siedzi tuż pod nazwą,
   a mimo to stoi w jednej linii z sąsiadami. */
/* STAŁA wysokość, nie min-height: przy `min-height` dłuższa nazwa i tak spychała
   cenę niżej i ceny w rzędzie rozjeżdżały się o kilkanaście pikseli.
   3 wiersze mieszczą nasze najdłuższe nazwy razem z dopiskiem koloru;
   gdyby któraś nie weszła, zostanie przycięta wielokropkiem zamiast psuć rząd. */
/* Cena idzie TUŻ POD NAZWĄ, bez rezerwowania pustych wierszy.
   Próbowałem wyrównywać ceny stałą wysokością bloku nazwy — przy krótkiej nazwie
   zostawały 2 puste linijki i odstęp wyglądał źle. Zwarta para nazwa+cena jest
   ważniejsza niż idealna linia cen w rzędzie. */
.mw-kafelek__nazwa{ margin-top:.15rem; }
.mw-kafelek__cena{ margin-top:.15rem; }   /* ~9 px pod nazwą — oddycha, ale nadal jedna grupa */

.mw-kafelek__foto{ position:relative; overflow:hidden; background:var(--mw-surface);
  aspect-ratio:2/3; }
.mw-kafelek__brakfoto{ display:block; width:100%; height:100%;
  background:linear-gradient(160deg,var(--mw-line) 0%,var(--mw-surface) 100%); }

/* ---- TELEFON: taśma zdjęć przewijana palcem, z zatrzaskiem na każdym ujęciu ---- */
.mw-kafelek__tasma{ display:flex; height:100%; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
.mw-kafelek__tasma::-webkit-scrollbar{ display:none; }
.mw-kafelek__img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover;
  scroll-snap-align:center; scroll-snap-stop:always;
  transition:opacity .5s var(--mw-ease), transform .7s var(--mw-ease); }

/* wskaźnik: na którym zdjęciu jesteś */
.mw-kropki{ position:absolute; left:0; right:0; bottom:.55rem; z-index:2;
  display:flex; justify-content:center; gap:5px; pointer-events:none; }
.mw-kropka{ width:5px; height:5px; border-radius:50%; background:var(--mw-on-dark-fade);
  box-shadow:0 0 0 1px var(--mw-overlay); transition:background .25s var(--mw-ease); }
.mw-kropka.is-aktywna{ background:var(--mw-paper); box-shadow:0 0 0 1px var(--mw-overlay); }

/* ---- DESKTOP (jest hover): bez przewijania, drugie ujęcie jako „duch" ---- */
@media (hover:hover) and (pointer:fine){
  .mw-kafelek__tasma{ display:block; overflow:visible; }
  .mw-kafelek__img{ position:absolute; inset:0; }
  .mw-kafelek__img:nth-child(n+3){ display:none; }   /* na desktopie wystarczą dwa ujęcia */
  .mw-kafelek__img--duch{ opacity:0; }
  .mw-kafelek:hover .mw-kafelek__img--duch,
  .mw-kafelek:focus-within .mw-kafelek__img--duch{ opacity:1; }
  .mw-kafelek:hover .mw-kafelek__img{ transform:scale(1.03); }
  .mw-kropki{ display:none; }
}

/* ---- znacznik promocji ---- */
.mw-znacznik{ position:absolute; top:.5rem; right:.5rem; z-index:2;
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.28rem .5rem; background:var(--mw-promo); color:var(--mw-on-dark); }

/* ---- opisy kafelka ---- */
.mw-kafelek__nazwa{ font-family:var(--mw-sans); font-weight:400; font-size:.8rem;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.35; }
/* Kolor w OSOBNEJ linii pod nazwą, bez myślnika (decyzja Michała 21.07).
   display:block zamiast <br> — przy produkcie bez koloru nie zostaje pusta linia. */
.mw-kafelek__kolor{ display:block; margin-top:.1rem; color:var(--mw-ink-3);
  text-transform:none; letter-spacing:.02em; }
.mw-kafelek__cena{ font-size:.85rem; }
.mw-kafelek__cena del{ color:var(--mw-ink-3); margin-inline-end:.4rem; }
.mw-kafelek__cena ins{ text-decoration:none; color:var(--mw-promo); }

/* Gwiazdki/opinie NIE pojawiają się na listingu — decyzja Michała 19.07.
   Zostają na karcie produktu, gdzie klient podejmuje decyzję zakupową. */

/* ---- doładowywanie kolejnych porcji ---- */
.mw-doladuj{ min-height:1px; padding:2.5rem 0; text-align:center; }
.mw-doladuj__info{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mw-ink-3); }

/* Kropki kolorów NIE pojawiają się na listingu (decyzja Michała 19.07) —
   w trybie „per wariant" każdy kolor ma własny kafelek. */

/* ---- paginacja: tylko zapas dla przeglądarek bez JS ----
   Przy działającym doładowywaniu numery stron są zbędne, więc skrypt chowa je
   od razu. Zostają w HTML, bo bez JS to jedyny sposób dojścia do dalszych stron. */
.mw-paginacja{ margin-top:2.5rem; }
.mw-paginacja .page-numbers{ display:flex; flex-wrap:wrap; gap:.35rem;
  justify-content:center; list-style:none; padding:0; }
.mw-paginacja a,.mw-paginacja span{ display:grid; place-items:center; min-width:40px;
  min-height:40px; padding:0 .6rem; text-decoration:none; font-size:.8rem;
  border:1px solid var(--mw-line); }
.mw-paginacja .current{ background:var(--mw-black); color:var(--mw-ecru); border-color:var(--mw-black); }

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

/* ---- opis kategorii (POD produktami — SEO, nie zasłania towaru) ---- */
.mw-opis-kategorii{ margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--mw-line); }
.mw-opis-kategorii__in{ max-width:70ch; }
.mw-opis-kategorii p{ margin-bottom:.9rem; color:var(--mw-ink-2); }
.mw-opis-kategorii h2,.mw-opis-kategorii h3{ font-family:var(--mw-serif); font-weight:500;
  font-size:1.35rem; margin:1.5rem 0 .6rem; }

/* ---- FAQ ---- */
.mw-faq{ margin-top:2.5rem; max-width:70ch; }
.mw-faq__poz{ border-bottom:1px solid var(--mw-line); }
.mw-faq__poz summary{ cursor:pointer; padding:.9rem 0; font-size:.95rem; list-style:none; }
.mw-faq__poz summary::-webkit-details-marker{ display:none; }
.mw-faq__poz summary::after{ content:"+"; float:right; color:var(--mw-taupe); }
.mw-faq__poz[open] summary::after{ content:"–"; }
.mw-faq__odp{ padding-bottom:1rem; color:var(--mw-ink-2); }

/* ============================================================
   FILTRY
   Telefon: pełny ekran. Desktop: panel z boku, filtrowanie na żywo.
   ============================================================ */

/* ---- chipsy aktywnych filtrów ---- */
.mw-widok .mw-chipsy{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:0; margin-bottom:var(--mw-gap); }
.mw-widok .mw-chips{ display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  border:1px solid var(--mw-line-2); border-radius:2px; background:var(--mw-paper);
  color:var(--mw-ink); padding:.34rem .6rem; font-size:.74rem; line-height:1.1;
  font-family:inherit; cursor:pointer;
  letter-spacing:.05em; text-transform:uppercase;
  transition:border-color .15s var(--mw-ease); }
.mw-widok .mw-chips:hover{ border-color:var(--mw-ink-3); }
.mw-widok .mw-chipsy__wyczysc{ display:inline-flex; align-items:center;
  border:1px solid var(--mw-line-2); border-radius:2px; background:var(--mw-ecru);
  color:var(--mw-ink); padding:.34rem .6rem; font-size:.74rem; line-height:1.1;
  font-family:inherit; cursor:pointer; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; transition:background .15s var(--mw-ease), border-color .15s var(--mw-ease); }
.mw-widok .mw-chipsy__wyczysc:hover{ background:var(--mw-ecru); border-color:var(--mw-ink-3); }

/* ---- kontener panelu ---- */
.mw-filtry[hidden]{ display:none; }
.mw-filtry{ position:fixed; inset:0; z-index:60; display:flex; justify-content:flex-end; }
.mw-filtry__tlo{ position:absolute; inset:0; background:var(--mw-overlay); }

.mw-filtry__panel{ position:relative; display:flex; flex-direction:column;
  width:100%; max-width:100%; height:100%; background:var(--mw-paper);
  animation:mw-wjazd .25s var(--mw-ease); }
@keyframes mw-wjazd{ from{ transform:translateX(2%); opacity:.6 } to{ transform:none; opacity:1 } }

.mw-filtry__head{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; padding:1.5rem var(--mw-pad) 1rem; }
.mw-filtry__tyt{ font-family:var(--mw-serif); font-weight:400; font-size:2rem; line-height:1.1; }
.mw-filtry__x{ padding:.25rem; margin:-.25rem; color:var(--mw-ink); }

.mw-filtry__tresc{ flex:1; overflow-y:auto; padding:0 var(--mw-pad) 1rem;
  -webkit-overflow-scrolling:touch; }

/* ---- sekcja rozwijana ---- */
.mw-filtry__sekcja{ border-top:1px solid var(--mw-line); }
.mw-filtry__sekcja:first-child{ border-top:0; }
.mw-filtry__sekcja--przel{ padding:1.1rem 0; }
.mw-filtry__przel{ font-size:.95rem; letter-spacing:.02em; cursor:pointer; }
.mw-filtry__naglowek{ display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 0; cursor:pointer; list-style:none;
  font-size:.95rem; letter-spacing:.02em; }
.mw-filtry__naglowek::-webkit-details-marker{ display:none; }
.mw-filtry__chevron{ transition:transform .25s var(--mw-ease); color:var(--mw-ink-3); }
.mw-filtry__sekcja[open] .mw-filtry__chevron{ transform:rotate(180deg); }

/* ---- opcje ---- */
.mw-filtry__opcje{ display:flex; flex-direction:column; gap:.85rem; padding:0 0 1.25rem; }
.mw-filtry__opcja{ display:flex; align-items:center; gap:.7rem; cursor:pointer;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.mw-filtry__opcja input{ width:16px; height:16px; accent-color:var(--mw-black);
  margin:0; flex:0 0 auto; }
.mw-filtry__probka{ width:16px; height:16px; flex:0 0 auto; background:var(--mw-swatch,var(--mw-line-2));
  border:1px solid var(--mw-line-2); }
.mw-filtry__nazwa{ flex:1; }
.mw-filtry__licznik{ color:var(--mw-ink-3); letter-spacing:.02em; }
.mw-filtry__opcja.is-pusta{ opacity:.35; cursor:not-allowed; }

/* ---- cena ---- */
.mw-filtry__cena{ display:flex; gap:.75rem; padding:0 0 1.25rem; }
.mw-filtry__pole{ flex:1; display:flex; flex-direction:column; gap:.35rem;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mw-ink-3); }
.mw-filtry__pole input{ font:inherit; font-size:.9rem; letter-spacing:0; text-transform:none;
  color:var(--mw-ink); padding:.6rem .7rem; border:1px solid var(--mw-line-2);
  background:var(--mw-surface); width:100%; }

/* ---- stopka panelu (przyklejona) ---- */
.mw-filtry__stopka{ display:flex; gap:.75rem; padding:1rem var(--mw-pad);
  border-top:1px solid var(--mw-line); background:var(--mw-paper); }
/* przyciski .mw-btn: WSPÓLNE, przeniesione do tokeny.css (22.07) */

/* ---- DESKTOP: panel z boku (przycisk „Zastosuj filtry" zostaje — jak na telefonie) ---- */
@media (min-width:1000px){
  .mw-filtry__panel{ max-width:380px; box-shadow:-1px 0 0 var(--mw-line); }
  .mw-filtry__tyt{ font-size:1.6rem; }
}

/* subtelne przygaszenie siatki podczas odświeżania filtrów na żywo */
.mw-form-filtrow.is-laduje { cursor: progress; }
[data-mw-siatka] { transition: opacity .15s var(--mw-ease); }
.is-laduje ~ * [data-mw-siatka],
body:has(.mw-form-filtrow.is-laduje) [data-mw-siatka] { opacity: .55; }