/* Products Filter Pix — multi-colonnes pour la liste catégories hiérarchique.
 *
 * Problème de fond : la règle YOOtheme native déclenche column-count à partir
 * de 10 enfants directs de l'<ul>. Une liste hiérarchique n'a que les top-level
 * comme enfants directs (les sous-cats sont imbriquées). De plus, .uk-dropdown
 * est en width:auto et prend la largeur naturelle du contenu — étroite quand
 * la liste racine est courte. CSS columns ne fait QUE diviser la largeur du
 * parent, il ne l'élargit pas.
 *
 * Solution : (a) aligner la dropdown sur la largeur du container de la page,
 * (b) appliquer columns avec largeur min pour que CSS s'adapte à l'espace. */

.uk-dropdown:has(.product-cat-layered-nav-list) {
    min-width: min(calc(100vw - 40px), 1100px);
}

.tm-element-woo-filter .tm-element-filter-columns .product-cat-layered-nav-list {
    columns: 11em 5;
    column-gap: 1.75em;
    column-fill: balance;
}

/* Garde chaque parent + ses sous-catégories soudés dans la même colonne. */
.tm-element-woo-filter .tm-element-filter-columns .product-cat-layered-nav-list > li {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Override .uk-text-nowrap hérité du wrapper — sinon les libellés longs
 * forcent la dropdown à s'élargir au-delà de l'écran. */
.product-cat-layered-nav-list,
.product-cat-layered-nav-list li,
.product-cat-layered-nav-list label {
    white-space: normal;
}

.product-cat-layered-nav-list .children {
    padding-left: 1.25em;
    margin-top: 0.25em;
}