/* ==========================================================================
   poznet_kafelki - kafelki produktow na listingach
   --------------------------------------------------------------------------
   Wszystko jest scope'owane pod html.pnk-active. Klase dopisuje jedna linijka
   <script> z hooka displayHeader, wiec wylaczenie modulu = natychmiastowy
   powrot do starego wygladu.

   Dlaczego tyle !important: arkusze motywu laduja sie PO tym pliku
   (themes/Pandav1/assets/css/custom.css, typography-improvements-*.css,
   mobile-product-grid-fix-*.css) i same uzywaja !important. Kazde nasze
   !important ma w komentarzu regule, ktora bije.

   Uwaga o specyficznosci: motyw ma regule
     #wrapper span:not(.badge):not(.price):not(.variation-label){color:...!important}
   o specyficznosci (1,3,1). Dlatego:
     - wlasne etykiety renderujemy jako <b>, a nie <span> (regula ich nie lapie),
     - dla cudzych <span>-ow (.regular-price, .discount-*) uzywamy selektorow
       z #wrapper i czterema klasami -> (1,4,1), czyli mocniej niz motyw.
   ========================================================================== */

/* ------------------------------------------------------------ siatka ----- */

html.pnk-active .products .product {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* bije: product-vertical-spacing-*.css #products .products .product{margin-bottom:30/40/50px!important}
   - przy karcie z ramka taki odstep robi dziury miedzy rzedami */
html.pnk-active #products .products .product,
html.pnk-active #js-product-list .products .product,
html.pnk-active .featured-products .products .product,
html.pnk-active .product-accessories .products .product {
    margin-bottom: 24px !important;
}

/* bije: custom.css .product-miniature{max-width:380px!important;margin:0 auto 50px!important} */
html.pnk-active .products .product-miniature {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E3E6F0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 19, 58, .04);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

html.pnk-active .products .product-miniature:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(6, 7, 53, .12);
    border-color: #BFD9FF;
}

@media (prefers-reduced-motion: reduce) {
    html.pnk-active .products .product-miniature,
    html.pnk-active .products .product-miniature:hover {
        transition: none;
        transform: none;
    }
}

html.pnk-active .product-miniature .thumbnail-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
}

/* ------------------------------------------------------------ zdjecie ---- */

html.pnk-active .product-miniature .thumbnail-top {
    padding: 14px 14px 0;
    position: relative;
}

/* bije: motyw ustawia a.product-thumbnail na stala wysokosc (ok. 160px) z
   overflow:hidden, przez co dolny pasek okladki ("1 TELEFON / 12 MIESIECY")
   byl ucinany; link ma rosnac razem z obrazkiem */
html.pnk-active .product-miniature .product-thumbnail,
html.pnk-active .product-miniature .thumbnail-top,
html.pnk-active .product-miniature a.thumbnail {
    display: block;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* bije: custom.css .product-miniature .product-thumbnail img{object-fit:cover}
   - obrazy produktow maja wlasny naglowek i pasek na dole, kadrowanie je zjada */
html.pnk-active .product-miniature .product-thumbnail img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block;
}

/* warianty pokazywane po najechaniu nie moga wpychac sie w tytul */
html.pnk-active .product-miniature .highlighted-informations.no-variants {
    display: none;
}

html.pnk-active .product-miniature .highlighted-informations {
    position: static;
    min-height: 0;
    background: transparent;
    box-shadow: none;
}

/* ---------------------------------------------------------- opis karty --- */

/* bije: custom.css .product-miniature .product-description{background:#060735!important;padding:8px 8px 2px!important}
   oraz typography-improvements .product-miniature .product-description{background:white!important}
   oraz mobile-product-grid-fix .product-miniature .product-description{padding:8px!important} */
html.pnk-active .product-miniature .product-description {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 12px 16px 16px !important;
    background: #fff !important;
    text-align: left;
    position: static;
    height: auto;
    margin: 0 !important;
}

/* kolejnosc pionowa: tytul motywu, nasz naglowek, cena, opinie, stopka */
html.pnk-active .product-miniature .product-description > .product-title { order: -2; }
html.pnk-active .product-miniature .pnk-head { order: -1; }
html.pnk-active .product-miniature .product-price-and-shipping { order: 0; }
html.pnk-active .product-miniature .product-list-reviews { order: 1; }
html.pnk-active .product-miniature .pnk-foot { order: 2; margin-top: auto; padding-top: 12px; }

/* pelny tytul renderujemy sami - obciety do 30 znakow tytul motywu znika
   (klasa pnk-has-title pojawia sie tylko, gdy przelacznik jest wlaczony) */
html.pnk-has-title .product-miniature .product-description > .product-title {
    display: none !important;
}

/* ---------------------------------------------------------- naglowek ----- */

html.pnk-active .product-miniature .pnk-brand {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6B7094;
    font-weight: 600;
}

html.pnk-active .product-miniature .pnk-title {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
}

/* bije: custom.css .product-description a{color:#fff!important} */
html.pnk-active .product-miniature .pnk-title a {
    color: #10133A !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}

html.pnk-active .product-miniature .pnk-title a:hover {
    color: #0077A8 !important;
}

html.pnk-active .product-miniature .pnk-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 8px;
}

html.pnk-active .product-miniature .pnk-chips b {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    padding: 2px 8px;
    border-radius: 999px;
    background: #EEF0F8;
    color: #3B4060;
}

/* -------------------------------------------------------------- cena ----- */

/* bije: custom.css .product-miniature .product-price-and-shipping{color:#fff!important;margin-bottom:0!important;line-height:1!important}
   oraz typography-improvements (ta sama regula z color:var(--color-primary-dark)!important) */
html.pnk-active .product-miniature .product-price-and-shipping {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    line-height: 1.2 !important;
    color: #10133A !important;
}

/* bije: custom.css .product-miniature .price{margin:0!important;line-height:1!important} */
html.pnk-active .product-miniature .product-price-and-shipping .price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #10133A !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* (1,4,1) - bije motywowe #wrapper span:not(.badge):not(.price):not(.variation-label){color:...!important} (1,3,1) */
html.pnk-active #wrapper .product-miniature .product-description .regular-price {
    font-size: 13px !important;
    color: #8A8FA8 !important;
    text-decoration: line-through;
    font-weight: 400;
}

html.pnk-active #wrapper .product-miniature .product-description .discount-percentage,
html.pnk-active #wrapper .product-miniature .product-description .discount-amount {
    font-size: 11px !important;
    font-weight: 700;
    background: #D2374A;
    color: #fff !important;
    border-radius: 6px;
    padding: 2px 6px;
    line-height: 1.4;
}

/* wszystko, co inne moduly dokladaja do bloku ceny (np. poznet_omnibus
   "najnizsza cena z 30 dni") laduje w osobnej, drobnej linii pod cena */
html.pnk-active .product-miniature .product-price-and-shipping > *:not(.price):not(.regular-price):not(.discount-percentage):not(.discount-amount) {
    flex-basis: 100%;
    font-size: 11.5px;
    line-height: 1.35;
}

html.pnk-active #wrapper .product-miniature .product-description .poznet-omnibus,
html.pnk-active #wrapper .product-miniature .product-description .poznet-omnibus span {
    font-size: 11.5px !important;
    color: #6B7094 !important;
}

/* ------------------------------------------------------------- stopka ---- */

html.pnk-active .product-miniature .pnk-permonth {
    font-size: 12.5px;
    line-height: 1.3;
    color: #5D6286;
    margin-bottom: 10px;
}

/* bije: custom.css .product-description a{color:#fff!important} - tu chcemy bialy,
   ale musimy tez wygrac tlo i wage, wiec cala regula jest wzmocniona */
html.pnk-active .product-miniature .pnk-cta {
    display: block;
    text-align: center;
    background: #060735;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s ease;
}

html.pnk-active .product-miniature .pnk-cta:hover {
    background: #00ADEF;
    color: #fff !important;
}

html.pnk-active .product-miniature .pnk-cart {
    display: block;
    text-align: center;
    margin-top: 8px;
    border: 1px solid #060735;
    background: transparent;
    color: #060735 !important;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

html.pnk-active .product-miniature .pnk-cart:hover {
    background: #060735;
    color: #fff !important;
}

html.pnk-active .product-miniature .pnk-trust {
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #6B7094;
    display: flex;
    gap: 6px;
    align-items: center;
}

html.pnk-active .product-miniature .pnk-trust-ico {
    flex: 0 0 auto;
    fill: #1E9E6A;
}

/* ------------------------------------------------------------- opinie ---- */

html.pnk-active .product-miniature .product-list-reviews {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    min-height: 0;
}

/* pusty blok gwiazdek productcomments tylko robi dziure w karcie */
html.pnk-hide-reviews .product-miniature .product-list-reviews:has(.grade-stars:empty) {
    display: none;
}

/* --------------------------------------------------------------- flagi --- */

html.pnk-active .product-miniature .product-flags {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 2;
}

html.pnk-active .product-miniature .product-flag {
    display: inline-block;
    position: static;
    background: #00ADEF;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    box-shadow: none;
    margin: 0 0 4px;
    line-height: 1.4;
}

html.pnk-active .product-miniature .product-flag.discount,
html.pnk-active .product-miniature .product-flag.on-sale {
    background: #D2374A;
}

/* --------------------------------------------------------- lista zyczen -- */

html.pnk-active .product-miniature .wishlist-button-add {
    top: 10px !important;
    right: 10px !important;
}

/* -------------------------------------------------------------- mobile --- */

@media (max-width: 767px) {
    /* bije: mobile-product-grid-fix .product-miniature{margin:0!important} - chcemy odstep pod karta */
    html.pnk-active .products .product-miniature {
        margin: 0 !important;
        border-radius: 10px;
    }

    html.pnk-active .product-miniature .thumbnail-top {
        padding: 10px 10px 0;
    }

    /* bije: mobile-product-grid-fix .product-miniature .product-description{padding:8px!important} */
    html.pnk-active .product-miniature .product-description {
        padding: 10px 12px 12px !important;
    }

    html.pnk-active .product-miniature .pnk-brand {
        font-size: 10px;
    }

    html.pnk-active .product-miniature .pnk-title {
        font-size: 13.5px;
    }

    html.pnk-active .product-miniature .product-price-and-shipping .price {
        font-size: 17px !important;
    }

    html.pnk-active .product-miniature .pnk-cta {
        font-size: 12px;
        padding: 9px 10px;
    }

    html.pnk-active .product-miniature .pnk-cart {
        font-size: 12px;
        padding: 8px 10px;
    }
}

@media (max-width: 419px) {
    html.pnk-active .product-miniature .pnk-chips {
        display: none;
    }
}

/* ==========================================================================
   STRONA KATEGORII (1.1.0)
   --------------------------------------------------------------------------
   Kazda sekcja ma wlasna klase na <html>, dopisywana w hookDisplayHeader:
     pnk-hero-on   hero kategorii
     pnk-chips-on  chipy szybkich przejsc
     pnk-toolbar   pasek narzedzi listingu (+ pnk-grid / pnk-list)
     pnk-help-on   kafle pomocy pod lista
     pnk-seo       opis SEO i paginacja
     pnk-subcat    restyl kafli podkategorii
   Dzieki temu przelacznik w Back Office wylacza nie tylko HTML, ale i CSS.

   O specyficznosci - to samo, co wyzej: arkusze motywu laduja sie PO nas
   (custom.css, typography-improvements, pagination-fix, subcategories) i uzywaja
   !important. Kazde nasze !important ma obok komentarz z regula, ktora bije.
   Nadal nie uzywamy <p> ani <span> we wlasnym markupie:
     p{color:var(--color-gray-900)!important}                         (0,0,1)
     #wrapper span:not(.badge):not(.price):not(.variation-label){...}  (1,3,1)
   przemalowalyby bialy tekst na granatowym tle.
   ========================================================================== */

/* ------------------------------------------------- kolejnosc w #main ----- */

/* Motyw wola displayHeaderCategory dopiero ZA kaflami podkategorii, a hero ma
   byc pierwsze. #main nie jest flexem, wiec robimy z niego kolumne i
   przestawiamy dwa elementy - reszta (order:0) zostaje w kolejnosci z HTML-a. */
html.pnk-hero-on #content-wrapper section#main,
html.pnk-chips-on #content-wrapper section#main {
    display: flex;
    flex-direction: column;
}

html.pnk-hero-on #content-wrapper section#main > #js-product-list-header,
html.pnk-chips-on #content-wrapper section#main > #js-product-list-header { order: -3; }
html.pnk-hero-on #content-wrapper section#main > .pnk-hero,
html.pnk-chips-on #content-wrapper section#main > .pnk-hero { order: -2; }
html.pnk-hero-on #content-wrapper section#main > .pnk-navchips,
html.pnk-chips-on #content-wrapper section#main > .pnk-navchips { order: -1; }

/* Tytul h1 zostaje w kodzie (SEO i czytniki ekranu), ale nie na ekranie -
   ta sama tresc jest w hero. Bije: category-fix-20250105.css
   #js-product-list-header{display:none} (1,0,0) - podmieniamy calkowite
   ukrycie na "tylko dla czytnikow". Regula lapie tez blok .block-category,
   ktory motyw wstrzykuje w to miejsce po ajaxowym przeladowaniu listy
   (rendered_products_header) - inaczej opis kategorii bylby na stronie dwa razy. */
html.pnk-hero-on #js-product-list-header {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------- hero ----- */

html.pnk-hero-on .pnk-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    background: linear-gradient(110deg, #0B1F6B, #0A78C9 70%, #1EB5F0);
    border-radius: 12px;
    padding: 26px 28px;
    margin: 0 0 18px;
    color: #fff;
}

html.pnk-hero-on .pnk-hero-text {
    flex: 1 1 auto;
    min-width: 0;
}

html.pnk-hero-on .pnk-hero-eyebrow {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

html.pnk-hero-on .pnk-hero-title {
    margin: 5px 0 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
}

html.pnk-hero-on .pnk-hero-excerpt {
    margin: 10px 0 0;
    max-width: 68ch;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
}

html.pnk-hero-on .pnk-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

html.pnk-hero-on .pnk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

html.pnk-hero-on .pnk-badge-ico {
    flex: 0 0 auto;
    fill: #fff;
    opacity: .9;
}

html.pnk-hero-on .pnk-hero-media {
    flex: 0 0 auto;
    max-width: 190px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* stala wysokosc, a nie max-height: logotypy SVG bez atrybutow width/height
   nie maja rozmiaru wlasnego i przy height:auto zwijaly sie do zera */
html.pnk-hero-on .pnk-hero-media img {
    display: block;
    width: auto;
    height: 48px;
    max-width: 190px;
    object-fit: contain;
}

/* ------------------------------------------------------------ chipy ----- */

html.pnk-chips-on .pnk-navchips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 18px;
}

html.pnk-chips-on .pnk-navchips-label {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B7094;
}

html.pnk-chips-on .pnk-navchips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

html.pnk-chips-on .pnk-navchip {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #E3E6F0;
    border-radius: 999px;
    background: #fff;
    color: #10133A !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}

html.pnk-chips-on .pnk-navchip:hover {
    border-color: #00ADEF;
    color: #0077A8 !important;
}

html.pnk-chips-on .pnk-navchip--current,
html.pnk-chips-on .pnk-navchip--current:hover {
    background: #060735;
    border-color: #060735;
    color: #fff !important;
}

/* --------------------------------------------- pasek narzedzi listingu -- */

html.pnk-toolbar #js-product-list-top.products-selection {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 18px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #E3E6F0;
    border-radius: 10px;
}

/* kolumny bootstrapa w srodku paska maja byc zwyklymi elementami flexa */
html.pnk-toolbar #js-product-list-top.products-selection > div,
html.pnk-toolbar #js-product-list-top .sort-by-row {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

html.pnk-toolbar #js-product-list-top.products-selection > .total-products {
    flex: 1 1 auto;
    min-width: 0;
}

html.pnk-toolbar #js-product-list-top.products-selection > .sort-by-row,
html.pnk-toolbar #js-product-list-top .sort-by-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* bije: typography-improvements p{color:var(--color-gray-900)!important} (0,0,1) */
html.pnk-toolbar #js-product-list-top .total-products p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #6B7094 !important;
}

/* (2,2,1) - bije typography #wrapper span:not(.badge):not(.price):not(.variation-label){color:...!important} (1,3,1)
   oraz custom.css .sort-by,.pagination{color:#fff!important} */
html.pnk-toolbar #wrapper #js-product-list-top .sort-by {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
    /* motyw daje etykiecie margin:0 -15px 0 15px - ujemny prawy margines
       wciagal liste "Sortuj wg" pod napis i ucinal go */
    margin: 0;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B7094 !important;
}

html.pnk-toolbar #js-product-list-top .products-sort-order {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

html.pnk-toolbar #js-product-list-top .select-title {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: auto;
    min-width: 190px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E3E6F0 !important;
    border-radius: 8px;
    background: #fff;
    color: #10133A !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

html.pnk-toolbar #js-product-list-top .select-title:hover {
    border-color: #00ADEF !important;
}

html.pnk-toolbar #js-product-list-top .select-title i {
    float: none !important;
    font-size: 18px;
    color: #6B7094;
}

html.pnk-toolbar #js-product-list-top .dropdown-menu {
    padding: 6px;
    border: 1px solid #E3E6F0;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(6, 7, 53, .14);
}

html.pnk-toolbar #js-product-list-top .dropdown-menu .select-list {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #10133A !important;
    text-decoration: none;
}

html.pnk-toolbar #js-product-list-top .dropdown-menu .select-list:hover {
    background: #EEF0F8;
}

html.pnk-toolbar #js-product-list-top .dropdown-menu .select-list.current {
    background: #060735;
    color: #fff !important;
}

/* bije: pagination-fix .showing{color:#060735!important} */
html.pnk-toolbar #js-product-list-top .showing {
    flex: 1 1 100%;
    font-size: 12px;
    line-height: 1.4;
    color: #6B7094 !important;
}

html.pnk-toolbar #js-product-list-top .filter-button {
    flex: 0 0 auto;
}

/* ------------------------------------------------- przelacznik widoku --- */

html.pnk-toolbar .pnk-viewtoggle {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 3px;
    border: 1px solid #E3E6F0;
    border-radius: 8px;
    background: #fff;
}

html.pnk-toolbar .pnk-viewbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

html.pnk-toolbar .pnk-viewbtn svg {
    fill: #6B7094;
}

html.pnk-toolbar .pnk-viewbtn:hover {
    background: #EEF0F8;
}

html.pnk-toolbar .pnk-viewbtn--on {
    background: #060735;
}

html.pnk-toolbar .pnk-viewbtn--on svg {
    fill: #fff;
}

/* ------------------------------------------------------ widok listy ----- */

/* Lista dotyczy WYLACZNIE #js-product-list. Bloki produktow na stronie
   glownej (.featured-products) i na karcie produktu maja zostac siatka. */
/* bije: mobile-product-grid-fix-*.css #js-product-list .products .product
   {flex:0 0 50%!important;max-width:50%!important} - bez tego lista na
   telefonie zostawala dwoma waskimi kolumnami i tekst wychodzil poza kafelek */
html.pnk-list #js-product-list .products .product,
html.pnk-list #js-product-list .products .col-xs-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

html.pnk-list #js-product-list .product-miniature .thumbnail-container {
    flex-direction: row;
    align-items: stretch;
}

html.pnk-list #js-product-list .product-miniature .thumbnail-top {
    flex: 0 0 160px;
    display: flex;
    align-items: flex-start;
    padding: 14px;
}

html.pnk-list #js-product-list .product-miniature .thumbnail-top .product-thumbnail {
    width: 100%;
}

/* dwie kolumny: opis (rozciagliwa) + kolumna z cena i przyciskami (staly 220 px).
   .pnk-head rozpina sie na oba wiersze, dzieki czemu cena i stopka trzymaja
   sie razem u gory prawej kolumny, zamiast rozjezdzac sie w pionie. */
html.pnk-list #js-product-list .product-miniature .product-description {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-rows: auto 1fr;
    column-gap: 20px;
    align-content: start;
    padding: 16px 16px 16px 0 !important;
}

html.pnk-list #js-product-list .product-miniature .pnk-head {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
}

/* wariant z wylaczonym pelnym tytulem: obciety tytul motywu zostaje na gorze */
html.pnk-list:not(.pnk-has-title) #js-product-list .product-miniature .product-description > .product-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 4px;
}

html.pnk-list:not(.pnk-has-title) #js-product-list .product-miniature .pnk-head {
    grid-row: 2 / span 2;
}

html.pnk-list #js-product-list .product-miniature .product-list-reviews {
    grid-column: 1;
}

html.pnk-list #js-product-list .product-miniature .product-price-and-shipping {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 0 !important;
}

html.pnk-list #js-product-list .product-miniature .pnk-foot {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
    padding-top: 10px;
}

/* w liscie jest miejsce na pelna nazwe - bez przycinania do dwoch linii */
html.pnk-list #js-product-list .product-miniature .pnk-title a {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}

html.pnk-list #js-product-list .product-miniature .pnk-title {
    font-size: 16px;
}

/* ------------------------------------------- lista cech (tylko w liscie) - */

html.pnk-active .product-miniature .pnk-bullets {
    display: none;
}

html.pnk-list #js-product-list .product-miniature .pnk-bullets {
    display: block;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

/* (1,4,1) - bije typography #wrapper li{color:var(--color-gray-900)!important} (1,0,1) */
html.pnk-list #js-product-list .product-miniature .pnk-bullets li {
    position: relative;
    margin: 0;
    padding: 0 0 0 16px;
    font-size: 12.5px;
    line-height: 1.65;
    color: #5D6286 !important;
    list-style: none;
}

html.pnk-list #js-product-list .product-miniature .pnk-bullets li:before {
    content: '';
    position: absolute;
    left: 2px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00ADEF;
}

/* ------------------------------------------------------ kafle pomocy ---- */

html.pnk-help-on .pnk-help {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 32px;
}

html.pnk-help-on .pnk-help-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 12px;
    background: #060735;
}

html.pnk-help-on .pnk-help-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

html.pnk-help-on .pnk-help-text {
    flex: 1 1 auto;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
}

html.pnk-help-on .pnk-help-btn {
    display: inline-block;
    align-self: flex-start;
    margin-top: 4px;
    padding: 9px 16px;
    border-radius: 8px;
    background: #00ADEF;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

html.pnk-help-on .pnk-help-btn:hover {
    background: #fff;
    color: #060735 !important;
}

/* --------------------------------------------------- opis SEO + strony -- */

/* bije: custom.css #category-description,#category-description p{color:#000!important;font-size:.8rem;letter-spacing:1px} (1,0,0)/(1,0,1) */
html.pnk-seo #wrapper #category-description {
    max-width: 760px;
    margin: 28px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
    color: #3B4060 !important;
}

html.pnk-seo #wrapper #category-description p,
html.pnk-seo #wrapper #category-description li {
    font-size: 15px !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
    color: #3B4060 !important;
    margin: 0 0 12px;
}

html.pnk-seo #wrapper #category-description h2,
html.pnk-seo #wrapper #category-description h3 {
    margin: 22px 0 8px;
    font-size: 18px !important;
    line-height: 1.3;
    font-weight: 700;
    color: #10133A !important;
}

html.pnk-seo #wrapper #category-description a {
    color: #0077A8 !important;
    text-decoration: underline;
}

html.pnk-seo #category-description.pnk-seo-collapsed {
    position: relative;
    overflow: hidden;
}

html.pnk-seo #category-description.pnk-seo-collapsed:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    /* #wrapper ma tlo #F8F9FA - gradient musi konczyc sie tym samym kolorem,
       inaczej pod tekstem widac bialy pasek */
    background: linear-gradient(rgba(248, 249, 250, 0), #F8F9FA);
    pointer-events: none;
}

html.pnk-seo .pnk-seo-more {
    /* #main jest u nas kolumna flexa - bez tego przycisk rozciagalby sie
       na cala szerokosc kolumny tresci */
    align-self: flex-start;
    margin: 10px 0 0;
    padding: 8px 16px;
    border: 1px solid #E3E6F0;
    border-radius: 8px;
    background: #fff;
    color: #060735;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
}

html.pnk-seo .pnk-seo-more:hover {
    border-color: #00ADEF;
    color: #0077A8;
}

/* bije: custom.css .sort-by,.pagination{color:#fff!important} - podsumowanie
   "Pokazano 1-12 z 94 pozycji" bylo bialym tekstem na bialym tle */
html.pnk-seo #wrapper .pagination {
    align-items: center;
    justify-content: space-between;
    margin: 28px 0 0;
    color: #6B7094 !important;
    font-size: 13px;
}

html.pnk-seo #wrapper .pagination > div {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #6B7094 !important;
}

/* bije: pagination-fix .pagination a{...border-radius:5px;border:2px solid #e0e0e0!important} (0,1,1) */
html.pnk-seo #wrapper .pagination .page-list a {
    min-width: 38px;
    padding: 7px 12px !important;
    border: 1px solid #E3E6F0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #10133A !important;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

html.pnk-seo #wrapper .pagination .page-list a:hover {
    border-color: #00ADEF !important;
    background: #fff !important;
    color: #0077A8 !important;
    transform: none;
    box-shadow: none;
}

html.pnk-seo #wrapper .pagination .page-list .current a,
html.pnk-seo #wrapper .pagination .page-list .current a:hover {
    background: #060735 !important;
    border-color: #060735 !important;
    color: #fff !important;
}

html.pnk-seo #wrapper .pagination .page-list .spacer {
    color: #8A8FA8 !important;
    padding: 0 4px;
}

/* --------------------------------------------- kafle podkategorii ------- */

html.pnk-subcat .subcategories-modern {
    margin: 0 0 22px;
    padding: 0;
}

html.pnk-subcat .subcategories-modern .subcategory-heading {
    margin: 0 0 12px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: #10133A;
}

html.pnk-subcat .subcategories-modern .subcategory-heading:after {
    display: none;
}

html.pnk-subcat .subcategories-modern .subcategories-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/* (0,3,0) - bije subcategories-20250105.css @media(prefers-color-scheme:dark)
   .subcategory-card{background:#1a1a2e} (0,1,0). Motyw ma tylko ten jeden blok
   dark mode w calym arkuszu, wiec na systemie w ciemnym motywie kafle
   podkategorii robily sie granatowe, a cala reszta strony zostawala jasna. */
html.pnk-subcat .subcategories-modern .subcategory-card {
    background: #fff;
    border: 1px solid #E3E6F0;
    border-radius: 10px;
    box-shadow: none;
}

html.pnk-subcat .subcategories-modern .subcategory-card:hover {
    transform: none;
    border-color: #BFD9FF;
    box-shadow: 0 8px 18px rgba(6, 7, 53, .10);
}

/* okladki maja wlasny naglowek i pasek na dole - kadrowanie (object-fit:cover)
   scinalo z nich pol grafiki */
html.pnk-subcat .subcategories-modern .subcategory-image-wrapper {
    height: 110px;
    padding: 10px;
    background: #fff;
}

html.pnk-subcat .subcategories-modern .subcategory-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

html.pnk-subcat .subcategories-modern .subcategory-card:hover .subcategory-image {
    transform: none;
}

html.pnk-subcat .subcategories-modern .subcategory-overlay {
    display: none;
}

html.pnk-subcat .subcategories-modern .subcategory-content {
    padding: 10px 12px 12px;
}

/* (0,3,0) - bije dark-mode .subcategory-name{color:#ffffff} (0,1,0) */
html.pnk-subcat .subcategories-modern .subcategory-name,
html.pnk-subcat .subcategories-modern .subcategory-card:hover .subcategory-name {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    color: #10133A;
}

/* (1,4,0) - bije typography #wrapper span:not(.badge):not(.price):not(.variation-label) (1,3,1) */
html.pnk-subcat #wrapper .subcategories-grid .subcategory-card .subcategory-count {
    margin-top: 6px;
    padding: 2px 8px;
    background: #EEF0F8;
    color: #6B7094 !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
}

html.pnk-subcat .subcategories-modern .subcategory-description {
    display: none;
}

/* ------------------------------------------------------------ mobile ---- */

@media (max-width: 767px) {
    html.pnk-hero-on .pnk-hero {
        gap: 14px;
        padding: 16px;
        border-radius: 10px;
    }

    html.pnk-hero-on .pnk-hero-title {
        font-size: 20px;
    }

    html.pnk-hero-on .pnk-hero-excerpt {
        font-size: 13px;
        margin-top: 8px;
    }

    html.pnk-hero-on .pnk-hero-badges {
        gap: 6px;
        margin-top: 12px;
    }

    html.pnk-hero-on .pnk-badge {
        font-size: 11px;
        padding: 4px 9px;
    }

    html.pnk-hero-on .pnk-hero-media {
        max-width: 92px;
    }

    html.pnk-hero-on .pnk-hero-media img {
        height: 34px;
        max-width: 92px;
    }

    /* jeden rzad z przewijaniem zamiast lamania na trzy linie */
    html.pnk-chips-on .pnk-navchips {
        flex-wrap: nowrap;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    html.pnk-chips-on .pnk-navchips-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 100%;
        padding-bottom: 2px;
    }

    html.pnk-chips-on .pnk-navchips-list::-webkit-scrollbar {
        display: none;
    }

    html.pnk-toolbar #js-product-list-top.products-selection {
        padding: 8px 10px;
        gap: 8px;
    }

    html.pnk-toolbar #js-product-list-top.products-selection > .sort-by-row,
    html.pnk-toolbar #js-product-list-top .sort-by-row {
        flex: 1 1 auto;
    }

    html.pnk-toolbar #js-product-list-top .products-sort-order {
        flex: 1 1 auto;
    }

    html.pnk-toolbar #js-product-list-top .select-title {
        width: 100%;
        min-width: 0;
    }

    /* przelacznik widoku wchodzi do DOM na koncu paska - na telefonie ma stac
       obok listy sortowania, a podsumowanie "Pokazano 1-12 z 13" pod nimi */
    html.pnk-toolbar .pnk-viewtoggle {
        order: 2;
    }

    html.pnk-toolbar #js-product-list-top .showing {
        order: 3;
    }

    html.pnk-list #js-product-list .product-miniature .thumbnail-top {
        flex: 0 0 110px;
        padding: 10px;
    }

    html.pnk-list #js-product-list .product-miniature .product-description {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        padding: 10px 12px 12px 0 !important;
    }

    html.pnk-list #js-product-list .product-miniature .pnk-head,
    html.pnk-list #js-product-list .product-miniature .product-price-and-shipping,
    html.pnk-list #js-product-list .product-miniature .pnk-foot,
    html.pnk-list #js-product-list .product-miniature .product-list-reviews {
        grid-column: 1;
        grid-row: auto;
    }

    html.pnk-list #js-product-list .product-miniature .product-price-and-shipping {
        margin: 8px 0 0 !important;
    }

    html.pnk-list #js-product-list .product-miniature .pnk-title {
        font-size: 14px;
    }

    html.pnk-help-on .pnk-help {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 22px;
    }

    html.pnk-seo #wrapper #category-description {
        margin-top: 22px !important;
        font-size: 14px !important;
    }

    html.pnk-seo #wrapper #category-description p,
    html.pnk-seo #wrapper #category-description li {
        font-size: 14px !important;
    }

    html.pnk-seo #wrapper .pagination {
        flex-direction: column;
        gap: 10px;
    }

    html.pnk-subcat .subcategories-modern .subcategories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    html.pnk-subcat .subcategories-modern .subcategory-image-wrapper {
        height: 92px;
    }
}


/* ==========================================================================
   STRONA GLOWNA - liczba boxow w rzedzie (ustawienie HOME_COLS, domyslnie 4).
   Motyw daje miniaturkom col-md-4 (3 w rzedzie); klasa pnk-homecols-N na <html>
   pochodzi z hookDisplayHeader i laczy sie z body#index, wiec listingi tego
   nie dotykaja. !important, bo siatka motywu tez uzywa !important.
   ========================================================================== */
@media (min-width: 992px) {
    html.pnk-active.pnk-homecols-4 body#index .products .product {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    html.pnk-active.pnk-homecols-3 body#index .products .product {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }
    html.pnk-active.pnk-homecols-4 body#index .product-miniature .pnk-title {
        font-size: 14px;
    }
    html.pnk-active.pnk-homecols-4 body#index .product-miniature .product-price-and-shipping .price {
        font-size: 18px !important;
    }
}