/*
 * Supleo v16, paczka B: dopiski dla /produkty (lista), poza tym, co juz daje
 * supleo.css (wspolny, zamrozony na czas prac rownoleglych -- nowe reguly
 * zyja tu, nadpisania przez wyzsza specyficznosc selektora, nie !important).
 * Kryteria B1-B7: makieta/supleo-v16/PLAN-DOMKNIECIA.md.
 */

/* ── B1: kafelki desktop/tablet ──
   Baza (.tgrid w supleo.css) to grid auto-fill minmax(232px,1fr), co samo
   daje 3-4 kolumny przy szerokiej tresci (>=1151px, prog zwiniecia nawigacji
   w menu, supleo.css linia ~818). Miedzy 921 i 1150px (nawigacja juz w menu,
   ale to jeszcze nie "telefon" -- prog isMobile() w produkty.js to 920px)
   wymuszamy dokladnie dwie kolumny: to pasmo jest "tablet" w kryterium B1,
   te same trzy szerokosci testowe co reszta paczek (1440/1024/390). Selektor
   po #id (tilesWrap), nie po samej .tgrid, zeby bez !important przebic klase
   z zamrozonego pliku. */
@media (min-width:921px) and (max-width:1150px){
  #tilesWrap{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Paczka A: zdjęcie kafelka rośnie do 240px (46-DS-Produkt-wszedzie-v20) --
   kolumna musi być szersza niż dawne minmax(232px,...), inaczej zdjęcie plus
   padding karty (12px x2) i obramowanie nie mieszczą się. */
@media (min-width:1151px){
  #tilesWrap{grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
}

/* ── toolbar: filtr "Filtry n", widoki mobilne, sortowanie chipami ── */
.filtersbtn{position:relative}

/* Przelacznik Karty/Zwarty: ta sama klasa bazowa .views co Lista/Kafelki
   (wyglad przyciskow), ale ODWROTNA widocznosc -- .views{display:none} w
   supleo.css przy <=920px gasi WSZYSTKIE elementy tej klasy (D01.10: "na
   telefonie Lista/Kafelki nie ma sensu"), #mViews (id, specyficznosc wyzsza
   od klasy) odkreca to tylko dla siebie. */
#mViews{display:none}
@media (max-width:920px){
  #mViews{display:inline-flex}
}

/* Sortowanie chipami (B4): ukryte na desktopie/tablecie (tam dziala
   #sortSel), pokazane zamiast selecta na telefonie -- .sortlab juz znika
   ponizej 920px w supleo.css, tu dopisujemy sam select i wlasny rzad chipow. */
.msort{display:none}
@media (max-width:920px){
  #sortSel{display:none}
  .msort{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
  .msort button{font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;
    border:1px solid var(--bd);background:var(--sf);color:var(--t2)}
  .msort button.on{background:var(--ac);color:var(--ac-fg);border-color:var(--ac)}
}

/* ── B5: chipy aktywnych filtrow + "Wyczyść wszystko" ──
   .achip i .achip button (krzyzyk) maja juz styl w supleo.css; tu tylko
   uklad rzedu i przycisk zbiorczy, ktorego supleo.css nie przewiduje. */
.achipsrow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.achipsrow .achips{margin:0;flex:1 1 auto}
.achipsclear{flex:none;font-size:10.5px;font-weight:600;color:var(--t2);white-space:nowrap;padding:4px 2px;align-self:center}
.achipsclear:hover{color:var(--ink);text-decoration:underline}

/* ── B6: filtr "maks. koszt dnia" ── */
.kosztmaks{display:flex;align-items:center;gap:7px;margin-top:4px}
.kosztmaks input{max-width:104px;margin-bottom:0}
.kosztmaks .unit{font-size:10.5px;color:var(--t3);white-space:nowrap}

/* ── B2: telefon, widok "Karty" (render/m-01) ──
   #cardsWrap uzywa gotowych klas .mcard/.mc-top/.mc-name/.kf/.klab/.kval/
   .ksub/.mpills/.mc-foot z supleo.css -- zdjecie i tozsamosc ida juz przez
   SupleoProdukt (produkt-tozsamosc.css/js, paczka A: zdjecie 1:1 wszedzie),
   nie przez dawne .mc-ph. */
#cardsWrap{display:block}
.mcard .mpills{display:flex;flex-direction:column;gap:7px;padding:10px 14px 2px}
.mcard .mc-foot label{cursor:pointer}
.mcard .mc-foot input[type=checkbox]{accent-color:var(--ac);width:15px;height:15px;margin:0 6px 0 0;vertical-align:-3px}
.mcard .ilink{font-size:12px;font-weight:600;color:var(--g-kon)}
.mcard .ilink:hover{text-decoration:underline}

/* ── B2: telefon, widok "Zwarty" (render/m-02) ──
   Rzad wlasny (nie .mprow z supleo.css: ta klasa i jej warianty bestr/
   worstr sa zarezerwowane dla "odwroconego porownania" C, patrz komentarz w
   produkty.js przy kartaMobilna/wierszZwarty). Zaznaczony produkt dostaje
   plaski niebieski pasek z lewej, ten sam sygnal co checkbox na gorze listy
   desktopowej (sel/td.sel), bez zadnej plakietki "polecany". */
#compactWrap{display:flex;flex-direction:column}
.lzw{display:grid;grid-template-columns:18px 44px 1fr auto;gap:10px;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--bd)}
#compactWrap .lzw:last-child{border-bottom:0}
.lzw input[type=checkbox]{accent-color:var(--ac);width:15px;height:15px;margin:0}
.lzw.on{box-shadow:inset 3px 0 0 var(--ac)}
.lzw-tekst{min-width:0}
.lzw-tekst .plink{display:block;font-size:12.5px;line-height:1.3}
.lzw-tekst .pmeta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lzw-cena{text-align:right;white-space:nowrap}
.lzw-cena .pmeta{margin-top:1px}