/* Bargertex - sirka / gramaz / slozeni pod cenou na kartach produktu ve vypisu (kategorie, vyhledavani, HP).
   Linkuje ho listing-params-snippet.js sam (pole Zahlavi v adminu je plne).
   Vsechny tri parametry = stejne vysoke bezove "pilulky" s ikonou. Sirka + gramaz na jednom radku, slozeni na
   vlastnim radku pod nimi (li pres celou sirku, pilulka uvnitr jen na sirku obsahu, dlouhe slozeni -> trojtecka).
   - mrizka (kategorie): centrovane pod cenou, cela sirka karty
   - radkove karty (.products-inline = "Najpredavanejsie"): vpravo vedle ceny, zarovnane doprava */

.bt-listing-params {
    display: flex;
    flex: 1 0 100%; /* v mrizce je rodic flex-wrap radek -> vlastni radek na celou sirku, jinak se smrskne doleva */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 6px 0 10px;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1;
    color: #444;
}

.bt-listing-params > li {
    margin: 0;
    padding: 0;
}

.bt-listing-params > li::before {
    content: none; /* theme odrazky v ul */
}

.bt-listing-params__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px !important;
    border-radius: 11px;
    background: #f3f1ed;
    white-space: nowrap;
}

.bt-listing-params__chip svg {
    flex: none;
    width: 12px;
    height: 12px;
    color: #9a8a6a; /* zlatohneda z loga, tlumena */
}

.bt-listing-params > .bt-listing-params__composition {
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    min-width: 0;
}

.bt-listing-params__composition .bt-listing-params__chip {
    min-width: 0;
    max-width: 100%;
}

.bt-listing-params__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* jen pro ctecky (nazev parametru u pilulky) */
.bt-listing-params__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Radkove karty "Najpredavanejsie": [cena | parametry vpravo]. Kdyz vedle ceny neni aspon ~160 px (uzky
   karusel, mobil), parametry se samy zalomi na vlastni radek pod cenu - porad zarovnane doprava.
   Bez zalomeni by pilulky pri justify-content: flex-end pretekly doleva pres cenu. */
.products-inline .offers:has(.bt-listing-params) {
    flex-wrap: wrap;
    row-gap: 6px;
}

.products-inline .bt-listing-params {
    flex: 1 1 160px;
    justify-content: flex-end;
    margin: 0 0 0 10px;
}

.products-inline .prices {
    flex: none;
}

.products-inline .bt-listing-params > .bt-listing-params__composition {
    justify-content: flex-end;
}

/* Radkove karty s uzkym textovym sloupcem (JS prida --row): parametry jako posledni radek karty pres celou
   sirku (.p je flex-wrap), zarovnane doprava */
.products-inline .bt-listing-params.bt-listing-params--row {
    flex: 1 0 100%;
    margin: 10px 0 0;
}

@media (max-width: 575px) {
    .bt-listing-params {
        gap: 3px;
        margin: 4px 0 8px;
        font-size: 11px;
    }

    .bt-listing-params__chip {
        gap: 3px;
        height: 20px;
        padding: 0 6px !important;
    }

    .bt-listing-params__chip svg {
        width: 11px;
        height: 11px;
    }

}