/*
 Subcategory chips at the top of the category pages (views/page-type/listing-category/category-slider.php):
 their look and layout are Bootstrap classes; only what Bootstrap has no class for is here, the two
 lines on wide screens and "Déplier les N catégories".
*/

/* Two lines of chips on wide screens: the chips are 42px high (a 32px image, py-1 and the border;
   py-2 without an image), .5rem apart (gap-2) */
@media screen and (min-width: 992px) {
    .mdf-category-chips-list {
        max-height: calc(2 * 42px + .5rem);
        overflow: hidden !important;
    }
}

/* "Déplier les N catégories", under the chips, shows them all: a checkbox before them, no script
   (LiteSpeed delays scripts until the first interaction, which would lose the first click) */
.mdf-category-unfold-less,
.mdf-category-unfold:checked ~ .mdf-category-unfold-toggle .mdf-category-unfold-more {
    display: none;
}

.mdf-category-unfold:checked ~ .mdf-category-unfold-toggle .mdf-category-unfold-less {
    display: inline;
}

.mdf-category-unfold:checked ~ .mdf-category-chips .mdf-category-chips-list {
    flex-wrap: wrap !important;
    max-height: none;
    overflow: visible !important;
}