/* =====================================================================
   category-views.css - widoki listy produktow
   Allplus.pl, wersja 3 - 2026-09-06

   Ladowany na wszystkich stronach z listingiem (patrz warunek
   w templates/_partials/head.tpl). Po zmianie tego pliku PODBIJ ?v=
   w head.tpl - plik nie przechodzi przez CCC.

   WAZNE - kolejnosc w kaskadzie:
   ten arkusz musi byc podlaczony PO {block name='stylesheets'} w head.tpl.
   Wczesniej byl przed nim i ladowal sie jako arkusz nr 0, czyli przed
   theme.css. Przy rownej specyficznosci wygrywal wtedy motyw, a nie my.

   Widok przelacza klasa na kontenerze #tt-products:
       .view-grid  - siatka
       .view-list  - lista, trzy kolumny

   Kafelek: article.product-miniature > div.thumbnail-container, w nim
   trzy dzieci:
       .product-description  - tytul + opis krotki
       .ttproduct-image      - zdjecie, flagi, warianty
       .ttproduct-desc       - cena, dostepnosc, porownaj/ulubione, koszyk
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. NEUTRALIZACJA UKLADU Z MOTYWU
   --------------------------------------------------------------------- */
#tt-products > .product-miniature{
    display:flex;
    flex-direction:column;
    float:none;
    width:auto;
    max-width:100%;
    margin:0;
    border:0;
}

/* theme.css: #js-product-list .products.product-thumbs .product-miniature.product-grid{margin:0 0 50px}
   Ta regula ma specyficznosc 140, a "#tt-products > .product-miniature" tylko 110,
   wiec bez drugiego identyfikatora kafelek zachowuje 50 px marginesu dolnego.
   To wlasnie przez nia odstep miedzy wierszami wynosil 66 px (50 + gap),
   podczas gdy miedzy kolumnami 16 px. */
#js-product-list #tt-products > .product-miniature{
    margin:0;
}

#tt-products .thumbnail-container{
    flex:1 1 auto;
    float:none;
    width:100%;
    height:auto;
}
#tt-products .product-description{
    float:none;
    width:auto;
    height:auto;
    min-height:0;
    overflow:visible;
}

/* zdjecie wysrodkowane w swoim polu, tekst do lewej */
#tt-products .ttproduct-image{ text-align:center; }
#tt-products .product-thumbnail img{ max-width:100%; height:auto; }

#tt-products .thumbnail-container,
#tt-products .product-description,
#tt-products .ttproduct-desc,
#tt-products .product-title,
#tt-products .product-price-and-shipping{
    text-align:left;
}

/* CENA ZOSTAJE WIDOCZNA PO NAJECHANIU.

   ttheaderfootersetting.css ma zaprojektowana animacje podmiany: cena
   wyjezdza w lewo i gasnie, a przycisk koszyka wjezdza na jej miejsce.
     .product_style3 .products:not(.ttspecial-content, .ttbestseller-content)
       .product-grid .product-price-and-shipping
     { height:42px; float:left; width:100%; transition:.4s ease-in-out; }
     ... .thumbnail-container:hover .product-price-and-shipping
     { transform:translateX(-80px); opacity:0; visibility:hidden; }

   Zdejmujemy calosc:
     - float:none, bo element plywajacy nie tworzy wysokosci w ukladzie
       i kontener przycisku wchodzil na cene,
     - height:auto zamiast sztywnych 42 px,
     - transform/opacity/visibility, zeby hover nie ruszal ceny,
     - transition:none, bo przycisk ma pojawiac sie bez animacji. */
#tt-products .product-price-and-shipping{
    float:none;
    /* flow-root, nie block: sama kwota (span.price) jest w motywie plywajaca,
       wiec rodzic bez wlasnego kontekstu formatowania zapada sie do zera
       wysokosci, gdy tylko zdejmiemy mu sztywne height:42px. */
    display:flow-root;
    width:auto;
    height:auto;
    opacity:1;
    visibility:visible;
    transform:none;
    transition:none;
}

/* nazwa produktu o 2 px mniejsza (motyw daje 18 px) */
#tt-products .product-title,
#tt-products .product-title a{
    font-size:16px;
    line-height:1.35;
}

/* PRZYCISK KOSZYKA WRACA DO NORMALNEGO UKLADU.

   ttheaderfootersetting.css ma regule:
     .product_style3 .products:not(.ttspecial-content, .ttbestseller-content)
       .product-grid .thumbnail-container .tt-button-container
     { position:absolute; bottom:10px; left:0; right:0;
       visibility:hidden; transform:translateY(50px); text-align:center; }

   Przycisk byl przez nia wyjety z ukladu i przyklejony do dolu kafelka.
   Skutki widoczne w obu widokach:
     - w siatce nachodzil na cene i zaslanial ja po najechaniu
       (cena 633-675 px, przycisk 655-699 px - zmierzone),
     - w liscie rozciagal sie na cala szerokosc kafelka zamiast zostac
       w trzeciej kolumnie,
     - dotykal dolnej krawedzi kafelka, bez zadnego odstepu.

   Zerujemy wszystkie te wlasciwosci. inset:auto kasuje bottom/left/right,
   bez tego position:static i tak by ich nie usunelo z deklaracji. */
#tt-products .tt-button-container{
    position:static;
    inset:auto;
    transform:none;
    visibility:visible;
    height:auto;
    width:auto;
    text-align:left;
}

/* Pole ilosci znika z listingu - zostaje sam przycisk "Do koszyka".
   Uzywamy display:none zamiast usuwania z szablonu, bo w tym samym
   kontenerze siedza ukryte pola formularza (id_product, id_customization,
   token oraz qty=1). Ukryty element nadal wysyla swoja wartosc, wiec
   dodawanie do koszyka dziala tak samo. */
#tt-products .product-quantity{ display:none; }

/* Sam napis "Do koszyka", bez plusa przed nim.
   theme.css ukrywa ikony w przycisku (.tt-button-container .btn i{display:none}),
   ale zaraz potem przywraca jedna:
     .tt-button-container .btn:not(.cart-loading) i.added{display:inline-block}
   i to jest wlasnie material-icon "add", czyli renderowany plus. */
#tt-products .tt-button-container .btn i.added{ display:none; }


/* ---------------------------------------------------------------------
   1. RAMKA KAFELKA
   Domyslnie ledwo widoczna, dopiero po najechaniu wyrazna.
   --------------------------------------------------------------------- */
#tt-products .thumbnail-container{
    border:1px solid #f0f2f4;
    border-radius:8px;
    background:#fff;
    box-shadow:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
#tt-products > .product-miniature:hover .thumbnail-container{
    border-color:#c3ccd6;
    box-shadow:0 2px 10px rgba(16,24,32,.09);
}


/* ---------------------------------------------------------------------
   1b. POROWNAJ I ULUBIONE - ZAWSZE WIDOCZNE, BEZ ANIMACJI
   theme.css:1605 trzyma .ttproducthover na opacity:0 z przejsciem 400 ms
   i odslania dopiero na :hover. Zdejmujemy to w obu widokach.
   --------------------------------------------------------------------- */
#tt-products .ttproducthover{
    opacity:1;
    visibility:visible;
    transition:none;
    height:auto;
    /* ttheaderfootersetting.css:
         .product_style3 .products:not(.ttspecial-content, .ttbestseller-content)
           .product-grid .thumbnail-container .ttproducthover
         { transform:translateX(60px); margin:auto; width:40px; height:120px;
           inset:0 0 0 auto; }
       Blok byl wypchniety 60 px w prawo i przyciety przez overflow:hidden
       kafelka, a wjezdzal dopiero na hover (translateX(0) z tego samego
       pliku). Stad ikonki pokazywaly sie tylko po najechaniu i chowaly sie
       po zjechaniu myszka - takze wtedy, gdy produkt byl juz zaznaczony
       jako ulubiony. W liscie ten sam transform odsuwal je od lewej
       krawedzi kolumny o 60 px, przez co wygladaly na wysrodkowane. */
    transform:none;
    margin:0;
}
/* theme.css:1601 daje tym przyciskom margin:0 0 8px - w rzedzie zbedny.
   Wymuszamy tez staly kwadrat 40x40: przyciski sa elementami flex, wiec
   bez flex:0 0 40px kurcza sie lub rozciagaja razem z kontenerem. */
#tt-products .ttproducthover > *,
#tt-products .ttproducthover .btn{
    margin:0;
}
#tt-products .ttproducthover .btn{
    flex:0 0 40px;
    width:40px;
    min-width:40px;
    max-width:40px;
    height:40px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    /* motyw robi z nich kolka (border-radius:50%, 35x35) w tej samej regule
       z :not() - wracamy do kwadratow z lekko zaokraglonym rogiem, takich
       jak pozostale przyciski listingu */
    border-radius:4px;
}
#tt-products .ttproducthover .btn i{
    margin:0;
    height:auto;
    line-height:1;
}


/* ---------------------------------------------------------------------
   2. ZNACZNIK "NOWY"
   Motyw ukrywa wszystkie flagi (.product-flags li{display:none}).
   Odslaniamy tylko "nowy" i przypinamy go do lewego gornego rogu zdjecia.
   Pozostale flagi (rabat, brak w magazynie) zostaja ukryte tak jak dotad.
   --------------------------------------------------------------------- */
#tt-products .product-flags{
    position:absolute;
    top:8px;
    left:8px;
    right:auto;
    z-index:3;
    margin:0;
    padding:0;
    list-style:none;
    text-align:left;
}
#tt-products .product-flags li{ display:none; }

/* theme.css trzyma sam znacznik poza kafelkiem i wsuwa go dopiero na hover:
     .product-flags li{ position:absolute; inset:90px auto auto -80px;
                        opacity:0; transition:.5s; }
     .thumbnail-container:hover .product-flags li{ opacity:1; left:10px; top:86px; }
   Stad "nowy" pojawial sie po najechaniu, po lewej, w polowie wysokosci
   zdjecia. Wracamy na position:static - znacznik plynie wtedy wewnatrz
   listy .product-flags, ktora jest przypieta do lewego gornego rogu zdjecia.
   inset:auto kasuje wartosci top/left z reguly motywu. */
#tt-products .product-flags li.new{
    position:static;
    inset:auto;
    opacity:1;
    visibility:visible;
    transition:none;
    display:inline-block;
    padding:3px 9px;
    border-radius:3px;
    background:#2a6640;
    color:#fff;
    font-size:11px;
    font-weight:500;
    line-height:1.45;
    letter-spacing:.02em;
    text-transform:uppercase;
    white-space:nowrap;
}


/* ---------------------------------------------------------------------
   3. WIDOK SIATKI
   Kolejnosc: zdjecie, tytul, dostepnosc + cena + przycisk.
   Odstep miedzy wierszami rowny odstepowi miedzy kolumnami.
   --------------------------------------------------------------------- */
#tt-products.view-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:12px;
    row-gap:12px;
    margin:0;
}
@media (min-width:992px){
    #tt-products.view-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1500px){
    #tt-products.view-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

#tt-products.view-grid .thumbnail-container{
    display:flex;
    flex-direction:column;
    /* wieksze wciecie od dolu - to jest odstep pod przyciskiem koszyka,
       ktory teraz stoi w normalnym ukladzie jako ostatni element kafelka */
    padding:12px 12px 16px;
}

/* tytul pod zdjeciem */
#tt-products.view-grid .ttproduct-image{ order:1; }
#tt-products.view-grid .product-description{ order:2; margin:10px 0 0; }
#tt-products.view-grid .ttproduct-desc{ order:3; margin-top:auto; padding-top:10px; }

#tt-products.view-grid .product-desc-short{ display:none; }
#tt-products.view-grid .product-title{ margin:0; }

/* porownaj i ulubione: widoczne od razu, w prawym gornym rogu kafelka.
   Blok siedzi teraz w .ttproduct-desc, ale jest pozycjonowany absolutnie
   wzgledem .thumbnail-container (jedyny position:relative w kafelku),
   wiec jego miejsce w drzewie nie ma tu znaczenia. */
#tt-products.view-grid .ttproducthover{
    position:absolute;
    top:8px;
    right:8px;
    left:auto;
    bottom:auto;
    display:flex;
    flex-direction:column;
    gap:6px;
    width:auto;
    margin:0;
    text-align:right;
    z-index:2;
}
#tt-products.view-grid .ttproducthover .btn{
    box-shadow:0 1px 2px rgba(16,24,32,.12);
    border-radius:4px;
}

/* Od 992 px w gore w wierszu stoja 3 lub 4 kafelki i kazdy jest waski -
   ikonki maja sie wtedy pokazywac dopiero po najechaniu, razem
   z przyciskiem koszyka.

   Ukrywamy pojedyncze przyciski, a NIE caly blok .ttproducthover.
   To celowe: dziecko nie moze byc bardziej nieprzezroczyste niz rodzic,
   wiec gdyby przezroczysty byl kontener, zaznaczony przycisk (.checked)
   nie mialby jak zostac widoczny po zjechaniu myszka.

   Klase .checked nadaja same moduly: ttcompare w compareButtonsStatusRefresh(),
   ttproductwishlist w wishlistRefreshStatus(). */
@media (min-width:992px){
    #tt-products.view-grid .ttproducthover .btn{
        opacity:0;
        pointer-events:none;
        transition:none;
    }
    #tt-products.view-grid > .product-miniature:hover .ttproducthover .btn,
    #tt-products.view-grid > .product-miniature:focus-within .ttproducthover .btn,
    #tt-products.view-grid .ttproducthover .btn.checked{
        opacity:1;
        pointer-events:auto;
    }
}

/* "Do koszyka" dopiero po najechaniu, bez animacji.
   Cena zostaje widoczna - hover dotyczy wylacznie przycisku.
   Miejsce na przycisk jest zarezerwowane, wiec uklad nie skacze. */
#tt-products.view-grid .tt-button-container{
    opacity:0;
    pointer-events:none;
    transition:none;
    margin-top:10px;
    padding-bottom:4px;
}
#tt-products.view-grid > .product-miniature:hover .tt-button-container,
#tt-products.view-grid > .product-miniature:focus-within .tt-button-container{
    opacity:1;
    pointer-events:auto;
}


/* ---------------------------------------------------------------------
   4. WIDOK LISTY - TRZY KOLUMNY
   zdjecie | nazwa + opis | cena, dostepnosc, akcje, koszyk
   --------------------------------------------------------------------- */
#tt-products.view-list{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    row-gap:12px;
    margin:0;
}
#tt-products.view-list .thumbnail-container{
    display:grid;
    grid-template-columns:minmax(150px,190px) minmax(0,1fr) minmax(200px,240px);
    grid-template-areas:"zdjecie tresc cena";
    align-items:start;
    column-gap:24px;
    padding:16px;
}
#tt-products.view-list .ttproduct-image{ grid-area:zdjecie; }
#tt-products.view-list .product-description{ grid-area:tresc; }

/* Trzecia kolumna od gory: cena, dostepnosc, porownaj/ulubione,
   a na samym dole przycisk koszyka.
   align-self:stretch jest konieczne, bo .thumbnail-container ma
   align-items:start - bez tego kolumna nie ma pelnej wysokosci
   i margin-top:auto nie zepchnie przycisku na dol. */
#tt-products.view-list .ttproduct-desc{
    grid-area:cena;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    min-height:100%;
}
#tt-products.view-list .product-price-and-shipping{ order:1; margin:0 0 6px; }
#tt-products.view-list .tt-availability{ order:2; margin:0; }
/* Porownaj i ulubione: rzad kwadratow dosuniety do lewej krawedzi kolumny.
   align-self:flex-start jest potrzebne, bo .ttproduct-desc to flex-column
   i bez tego blok rozciagalby sie na cala szerokosc kolumny. */
#tt-products.view-list .ttproducthover{
    order:3;
    position:static;
    inset:auto;
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-self:flex-start;
    gap:6px;
    margin:12px 0 0;
    width:auto;
    text-align:left;
}
/* Przycisk koszyka na samym dole kolumny, odslaniany po najechaniu
   na kafelek, bez animacji. Ukrywamy przezroczystoscia, nie visibility
   ani display: miejsce zostaje zarezerwowane (uklad nie skacze), a element
   pozostaje osiagalny z klawiatury - visibility:hidden wypada z kolejnosci
   Tab, przez co :focus-within nigdy by sie nie odpalil.
   Cena jest osobnym elementem i hover jej nie dotyczy - zostaje widoczna. */
#tt-products.view-list .tt-button-container{
    order:4;
    margin-top:auto;
    padding-top:14px;
    padding-bottom:2px;
    opacity:0;
    pointer-events:none;
    transition:none;
}

/* Opis pod nazwa produktu.
   Odstep od nazwy zwiekszony z 8 na 14 px - przy 8 px opis wchodzil pod tytul
   na tyle blisko, ze oba bloki czytalo sie jak jeden akapit.

   Obcinanie tekstu: szablon miniatury nie skraca juz opisu po stronie serwera
   (bylo tam truncate:150), dzieki czemu w HTML siedzi pelna tresc i mozemy
   decydowac o niej responsywnie. Ponizej 1500 px przycinamy do trzech linii -
   mniej wiecej tyle zajmowalo dawne 150 znakow, wiec uklad wyglada jak
   wczesniej. Od 1500 px w gore miejsca jest dosc, zeby pokazac calosc. */
#tt-products.view-list .product-desc-short{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:14px 0 0;
    line-height:1.5;
    color:#5b6b74;
}
@media (min-width:1500px){
    /* display:block wylacza przycinanie - -webkit-line-clamp dziala wylacznie
       razem z display:-webkit-box, wiec sama zmiana display wystarczy. */
    #tt-products.view-list .product-desc-short{
        display:block;
        overflow:visible;
    }
}
#tt-products.view-list .product-title{ margin:0; }

#tt-products.view-list > .product-miniature:hover .tt-button-container,
#tt-products.view-list > .product-miniature:focus-within .tt-button-container{
    opacity:1;
    pointer-events:auto;
}

/* Ponizej 1200 px stale szerokosci kolumn (190 / reszta / 240) zjadaly
   srodek - opis robil sie waski jak kolumna gazety. Przechodzimy na
   proporcje 3/6/3: zdjecie i kolumna z cena kurcza sie razem z ekranem,
   a tresc dostaje polowe szerokosci kafelka. Zdjecie skaluje sie samo,
   bo ma max-width:100%. */
@media (max-width:1199px){
    #tt-products.view-list .thumbnail-container{
        grid-template-columns:3fr 6fr 3fr;
        column-gap:16px;
    }
}

@media (max-width:767px){
    #tt-products.view-list .thumbnail-container{
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:"zdjecie" "tresc" "cena";
        row-gap:10px;
    }
}


/* ---------------------------------------------------------------------
   4b. PRZELACZNIK WIDOKU PONIZEJ 1500 px
   theme.css: @media (max-width:1499px){ .grid_list .grid_view3,
   #tab-gridview3 { display:none } } - regula z czasow czterech zakladek,
   gdy widok "grid3" byl dostepny tylko na bardzo szerokich ekranach.
   Teraz to jeden z dwoch naszych przyciskow przelacznika i musi byc
   widoczny wszedzie, gdzie przelacznik w ogole dziala (czyli >= 992 px).
   --------------------------------------------------------------------- */
@media (max-width:1499px){
    #desktop-view-switcher .grid_view3{ display:block; }
}


/* ---------------------------------------------------------------------
   5. DOSTEPNOSC
   --------------------------------------------------------------------- */
#tt-products .tt-availability{
    display:block;
    margin:0 0 6px;
    font-size:13px;
    line-height:1.3;
    color:#5b6b74;
}
/* ikonka usunieta z szablonu 2026-09-08; regula zostaje na wypadek,
   gdyby gdzies zostal stary, zbuforowany znacznik */
#tt-products .tt-availability i{ display:none; }
#tt-products .tt-availability--available{ color:#2a6640; }
#tt-products .tt-availability--last_remaining_items{ color:#8f6404; }
#tt-products .tt-availability--unavailable{ color:#a82f1c; }


/* ---------------------------------------------------------------------
   5c. OMNIBUS - "Najnizsza cena z 30 dni"
   Modul omnibuseufree wstawia <div class="presta-studio-price-history">
   przez hook displayProductPriceBlock type='after_price'.
   clear:both jest konieczne, bo sama kwota (span.price) jest plywajaca -
   bez tego linia weszlaby obok ceny zamiast pod nia.
   --------------------------------------------------------------------- */
#tt-products .presta-studio-price-history{
    clear:both;
    display:block;
    margin:4px 0 0;
    width:100%;
}
#tt-products .presta-studio-price-history-text{
    margin:0;
    font-size:12px;
    line-height:1.35;
    font-weight:400;
    color:#6b7680;
}
#tt-products .presta-studio-price-history-price{
    font-weight:500;
    white-space:nowrap;
}


/* ---------------------------------------------------------------------
   5b. BELKA NAD LISTINGIEM (#js-product-list-top)

   Motyw uklada ja na kolumnach Bootstrapa: .total-products to col-md-5,
   a przelacznik widoku siedzial w srodku jako col-md-6, czyli polowa tej
   kolumny. Licznik "Znaleziono N produktow" nie miescil sie wtedy obok
   i zawijal do drugiej linii. Przechodzimy na flex - elementy zajmuja
   tyle, ile potrzebuja, i stoja w jednej linii wyrownane do srodka.
   --------------------------------------------------------------------- */
#js-product-list-top{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 20px;
    /* Wyrownanie do bloku z opisem kategorii nad paskiem. Tamten kontener ma
       padding-left:15px, przez co naglowek i tekst zaczynaja sie 15 px od
       krawedzi karty. Pasek miał tu 10 px, wiec ikony i licznik produktow
       byly przesuniete o 5 px w lewo wzgledem akapitu powyzej. */
    padding-left:15px;
}
#js-product-list-top > div{
    width:auto;
    max-width:none;
    margin:0;
}
#js-product-list-top .total-products{
    display:flex;
    align-items:center;
    gap:16px;
    flex:1 1 auto;
    min-width:0;          /* licznik moze sie skrocic, blok sortowania nie */
    padding:0;
}
#js-product-list-top .total-products p{
    margin:0;
}
#js-product-list-top #desktop-view-switcher{
    flex:0 0 auto;
    padding:0;
}

/* Lista przelacznika stala na display:block z plywajacymi <li>.
   Rodzic nie obejmuje wysokosci ani szerokosci elementow plywajacych,
   wiec po powiekszeniu ikon do 36 px nie miescily sie w 44-pikselowym
   kontenerze i spadaly jedna pod druga. Flex to zamyka. */
#js-product-list-top #desktop-view-switcher ul.nav{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    margin:0;
    padding:0;
    list-style:none;
    border:0;
}
#js-product-list-top #desktop-view-switcher .nav-item{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    margin:0;
}
#js-product-list-top #desktop-view-switcher .nav-link{
    float:none;
}

#js-product-list-top .borderright{
    flex:0 0 auto;
    min-width:0;
}
#js-product-list-top .sort-by-row{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:10px;
    margin:0;
}
#js-product-list-top .sort-by{
    width:auto;
    max-width:none;
    padding-left:0;
    white-space:nowrap;
    /* theme.css daje temu napisowi "padding-top:10px", zeby recznie zepchnac go
       w dol i udawac wyrownanie do przycisku. W tym wierszu mamy juz jednak
       flexa z align-items:center, ktory centruje CALE pudelko razem z paddingiem
       - efekt jest taki, ze sam tekst siedzi o polowe tego paddingu za nisko.
       Zerujemy padding i zostawiamy wyrownanie flexowi. */
    padding-top:0;
    padding-bottom:0;
    line-height:1.2;
}

/* Przy waskim ekranie przycisk sortowania scisnal sie do 58 px
   i napis "Cena, rosnaco" lamal sie na trzy linie (wysokosc 90 px).
   Dajemy mu minimalna szerokosc i zakaz zawijania. */
#js-product-list-top .products-sort-order{
    flex:0 0 auto;
    width:auto;
    max-width:none;
    min-width:180px;
    padding:0;
}
#js-product-list-top .products-sort-order .select-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    white-space:nowrap;
}
#js-product-list-top .filter-button{
    flex:0 0 auto;
    width:auto;
    max-width:none;
    padding:0;
}

/* Gdyby blok "Wyswietlono X-Y z Z pozycji" gdzies jeszcze zostal
   (inny szablon listingu, cache Smarty) - i tak go nie pokazujemy. */
#js-product-list-top .showing{ display:none; }

/* Przycisk "Filtry" na szaro - motyw daje mu granatowe .btn-secondary,
   co na belce krzyczy mocniej niz sam listing. */
#js-product-list-top #search_filter_toggler,
#js-product-list-top #search_filter_toggler:focus,
#js-product-list-top #search_filter_toggler:active{
    background:#e6e9ee;
    border:1px solid #d3d8e0;
    color:#3a4450;
    box-shadow:none;
}
#js-product-list-top #search_filter_toggler:hover{
    background:#dce0e8;
    border-color:#c6ccd6;
    color:#3a4450;
}

/* Granat na najechaniu NIE bral sie z tla przycisku, tylko z warstwy
   pseudoelementu, ktora motyw rozsuwa na cala szerokosc:
     .btn-secondary::after      { background:var(--secondary-bg-color); width:0; transition:.3s }
     .btn-secondary:hover::after{ width:100% }
   Nadpisywanie samego "background" nie mialo do niej dostepu.
   content:none w ogole nie tworzy tego pudelka. */
#js-product-list-top #search_filter_toggler::after,
#js-product-list-top #search_filter_toggler:hover::after,
#js-product-list-top #search_filter_toggler:focus::after,
#js-product-list-top #search_filter_toggler:active::after{
    content:none;
}

/* Ikony przelacznika widoku - wersja wektorowa.
   Wczesniej byl tu sprite PNG 320x60 z motywu, rozciagany przez
   background-size:480px 90px, zeby kafelek urosl z 24x20 na 36x30.
   Powiekszanie bitmapy o 1,5x daje rozmyte krawedzie - szczegolnie widoczne
   na ekranach o wyzszej gestosci pikseli. Zastepujemy go inline SVG:
   jest ostry przy kazdym powiekszeniu i kazdym DPI, nie generuje osobnego
   zadania HTTP i wazy mniej niz kawalek sprite'a.
   Ikony celowo maja nieco inny rysunek niz poprzednie - siatka 3x3 zamiast
   gestego bloku i lista z wyrazniejszymi wierszami.
   Kolor jest wpisany w SVG (%23111 to zakodowany #111); stany hover i active
   nadal steruje przezroczystosc, tak jak wczesniej. */
#js-product-list-top #desktop-view-switcher .nav-link{
    width:34px;
    height:28px;
    line-height:28px;
    margin-right:6px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:19px 19px;
    /* Stan wybrany dostaje jasny, zaokraglony kafel pod ikona - tak jak we
       wzorze. Nieaktywne pozostaja wyszarzone i bez tla, wiec od razu widac,
       ktory widok jest wlaczony, bez uzywania koloru akcentu. */
    border-radius:7px;
    background-color:transparent;
    opacity:.3;
    transition:opacity .12s ease, background-color .12s ease;
}
#js-product-list-top #desktop-view-switcher .nav-link:hover{ opacity:.55; }
#js-product-list-top #desktop-view-switcher .nav-link.active{
    opacity:1;
    background-color:#eceef2;
}

/* Przycisk "Do koszyka" / "Na zamowienie" na cala szerokosc kafelka - tylko
   w siatce (2, 3 i 4 kolumny; przy szerokosci ponizej 544 px siatka spada do
   jednej kolumny i tam pelna szerokosc rowniez jest pozadana).
   Kontener i formularz mialy juz pelna szerokosc (zmierzone 316 px), ale sam
   przycisk zostawal jako inline-block dopasowany do dlugosci napisu - 91 px
   przy "Do koszyka". Stad rozne szerokosci przyciskow w sasiednich kafelkach,
   zaleznie od tego, czy produkt jest dostepny, czy na zamowienie.
   Widoku listy ta regula celowo nie dotyczy - tam przycisk siedzi w waskiej
   trzeciej kolumnie i ma zostac maly. */
#tt-products.view-grid .tt-button-container{
    float:none;
    width:100%;
}
#tt-products.view-grid .tt-button-container .btn{
    display:block;
    width:100%;
    text-align:center;
}

/* Siatka: 3x3 male kwadraty z rownymi odstepami. */
#js-product-list-top #desktop-view-switcher .grid_view3{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23222'%3E%3Crect x='3' y='3' width='4.5' height='4.5' rx='1'/%3E%3Crect x='9.75' y='3' width='4.5' height='4.5' rx='1'/%3E%3Crect x='16.5' y='3' width='4.5' height='4.5' rx='1'/%3E%3Crect x='3' y='9.75' width='4.5' height='4.5' rx='1'/%3E%3Crect x='9.75' y='9.75' width='4.5' height='4.5' rx='1'/%3E%3Crect x='16.5' y='9.75' width='4.5' height='4.5' rx='1'/%3E%3Crect x='3' y='16.5' width='4.5' height='4.5' rx='1'/%3E%3Crect x='9.75' y='16.5' width='4.5' height='4.5' rx='1'/%3E%3Crect x='16.5' y='16.5' width='4.5' height='4.5' rx='1'/%3E%3C/svg%3E");
}
/* Lista: trzy wiersze, kazdy to maly kwadrat i belka obok niego. */
#js-product-list-top #desktop-view-switcher .list_view{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23222'%3E%3Crect x='3' y='4' width='4.5' height='4.5' rx='1'/%3E%3Crect x='9.75' y='4' width='11.25' height='4.5' rx='1'/%3E%3Crect x='3' y='9.75' width='4.5' height='4.5' rx='1'/%3E%3Crect x='9.75' y='9.75' width='11.25' height='4.5' rx='1'/%3E%3Crect x='3' y='15.5' width='4.5' height='4.5' rx='1'/%3E%3Crect x='9.75' y='15.5' width='11.25' height='4.5' rx='1'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------
   6. PONIZEJ 992 px - TYLKO WIDOK SIATKI
   --------------------------------------------------------------------- */
@media (max-width:991px){
    #desktop-view-switcher{ display:none; }

    #tt-products.view-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        column-gap:12px;
        row-gap:12px;
    }
    #tt-products.view-list .thumbnail-container{
        display:flex;
        flex-direction:column;
        /* powrot na stretch - uklad trzykolumnowy ustawia align-items:start,
           a przy flex-column dzieci przestaja sie wtedy rozciagac i zdjecie
           z regula width:100% zapada sie do kilkudziesieciu pikseli */
        align-items:stretch;
        padding:12px 12px 14px;
    }
    #tt-products.view-list .ttproduct-image{ order:1; }
    #tt-products.view-list .product-description{ order:2; margin:10px 0 0; }
    #tt-products.view-list .ttproduct-desc{
        order:3;
        display:block;
        min-height:0;
        margin-top:auto;
        padding-top:10px;
    }
    #tt-products.view-list .product-desc-short{ display:none; }

    #tt-products.view-list .ttproducthover{
        position:absolute;
        top:8px;
        right:8px;
        left:auto;
        flex-direction:column;
        margin:0;
        width:auto;
    }
    #tt-products.view-list .tt-button-container{
        opacity:1;
        pointer-events:auto;
        margin-top:10px;
        padding-top:0;
        padding-bottom:4px;
    }
    /* Ponizej 992 px lista przestaje byc lista - powyzsze reguly zamieniaja ja
       w dwukolumnowa siatke kafelkow. Przycisk koszyka musi wiec dostac pelna
       szerokosc tak samo jak w .view-grid; regula spod siatki tu nie siega,
       bo kontener ma wtedy klase .view-list, mimo ze wyglada jak siatka.

       Sam "display:block" na przycisku tu nie wystarczy. Kontener przycisku ma
       z motywu "float:left" i w siatce nic to nie zmienia, bo .ttproduct-desc
       jest tam flex-kolumna, a floaty na dzieciach flexa sa ignorowane.
       Tutaj .ttproduct-desc wraca na display:block, wiec float zaczyna dzialac
       i kontener kurczy sie do szerokosci napisu - zmierzone 91 px przy
       kolumnie majacej 241 px. Dlatego zerujemy float i dopiero wtedy
       przycisk ma co wypelnic. */
    #tt-products.view-list .tt-button-container{
        float:none;
        width:100%;
    }
    #tt-products.view-list .tt-button-container .btn{
        display:block;
        width:100%;
        text-align:center;
    }

    /* Na dotyku nie ma najechania, wiec przycisk koszyka musi byc widoczny
       od razu takze w siatce - inaczej na telefonie i tablecie nie da sie
       do niego dojsc. */
    #tt-products.view-grid .tt-button-container{
        opacity:1;
        pointer-events:auto;
    }

    /* Porownywarka jest wylaczona w module, wiec na malych ekranach
       zabiera tylko miejsce. Ulubione zostaja. */
    #tt-products .ttproducthover .add_to_compare{ display:none; }

    /* Przy jednym i dwoch kafelkach w wierszu dostepnosc siedziala tuz nad
       cena i obie linie zlewaly sie w jeden blok tekstu. */
    #tt-products .ttproduct-desc .tt-availability{ margin-bottom:10px; }
}
@media (max-width:543px){
    #tt-products.view-grid,
    #tt-products.view-list{ grid-template-columns:minmax(0,1fr); }

    /* theme.css: #js-product-list .product-grid.product-miniature{width:49.4%;
       display:inline-block; padding:0 10px; border-right:1px solid}
       Wyzsza specyficznosc niz "#tt-products > .product-miniature", wiec bez
       dwoch identyfikatorow kafelek zostaje na polowie szerokosci ekranu. */
    #js-product-list #tt-products > .product-grid.product-miniature{
        display:flex;
        width:auto;
        max-width:100%;
        padding:0;
        margin:0;
        border:0;
    }

    #tt-products .thumbnail-container div.tt-button-container .btn.add-to-cart .loading i{
        float:left;
        width:auto;
    }
    #tt-products .product-thumbnail,
    #tt-products .product-thumbnail img{ width:100%; }

    /* Kolor tla miedzy kafelkami. Kontener listingu ma z motywu biale tlo
       i wlasny cien:
         #js-product-list .products.product-thumbs
         { background:#fff; padding:30px 15px; box-shadow:...; }
       przez co przerwy miedzy kafelkami gubily sie na bialym. Regula ma
       specyficznosc 120, wiec samo "#tt-products" (100) jej nie pokona -
       stad pelny selektor z dwoma identyfikatorami. Przezroczystosc
       odslania tlo body (#f1f3f8). */
    #js-product-list #tt-products.products.product-thumbs{
        background:transparent;
        box-shadow:none;
    }

    /* Na dotyku nie ma stanu :hover, wiec podswietlana ramka z cieniem
       nie ma czego sygnalizowac - kafelek zostaje w stanie spoczynkowym. */
    #tt-products > .product-miniature:hover .thumbnail-container{
        border-color:#f0f2f4;
        box-shadow:none;
    }

    /* Przycisk koszyka po prawej, obok dostepnosci i ceny, a nie pod nimi.
       Dwie kolumny: w lewej dostepnosc nad cena, w prawej przycisk
       rozciagniety na oba wiersze. */
    #tt-products.view-grid .ttproduct-desc,
    #tt-products.view-list .ttproduct-desc{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        column-gap:10px;
        padding-top:10px;
    }
    #tt-products .ttproduct-desc .tt-availability{
        grid-column:1;
        grid-row:1;
        margin:0 0 8px;
    }
    #tt-products .ttproduct-desc .product-price-and-shipping{
        grid-column:1;
        grid-row:2;
    }
    #tt-products .ttproduct-desc .tt-button-container{
        grid-column:2;
        grid-row:1 / span 2;
        align-self:center;
        margin:0;
        padding:0;
        white-space:nowrap;
    }
}