/*
 * PANNEAU DES FILTRES (navigation à facettes) — correctif du 16/10/2026.
 *
 * global.css met `body .custom-checkbox { display: block }` (cases des formulaires) : dans les filtres,
 * la case prenait toute la largeur de sa colonne et renvoyait le libellé à la ligne en dessous. Et
 * `body .custom-checkbox input + span { opacity: 0 }` rendait invisibles les pastilles de couleur et
 * de tissu (« Couleur du tissu », « Couleur »).
 *
 * Ici, et SEULEMENT dans le panneau des filtres : case et libellé sur une ligne, pastille visible entre
 * les deux, libellés longs sur deux lignes plutôt que coupés, deux colonnes sur téléphone. Fichier à part, chargé avec ?v=date du fichier : products.css
 * est mis en cache un an (Cloudflare, navigateurs) sans numéro de version.
 */

/* Colonnes alignées par le haut quand un libellé tient sur deux lignes. */
#search_filters_wrapper #search_filters section.facet ul:not(.faceted-slider) {
    align-items: flex-start;
}

#search_filters_wrapper #search_filters .facet .facet-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    height: auto;
    min-height: 30px;
    margin: 0;
    padding: 4px 8px 4px 0;
    cursor: pointer;
}

#search_filters_wrapper #search_filters .facet .facet-label .custom-checkbox,
#search_filters_wrapper #search_filters .facet .facet-label .custom-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    top: 0;
}

#search_filters_wrapper #search_filters .facet .facet-label .custom-checkbox input[type="checkbox"],
#search_filters_wrapper #search_filters .facet .facet-label .custom-radio input[type="radio"] {
    position: static;
    flex: 0 0 20px;
    margin: 0;
    cursor: pointer;
}

/* Le carré du thème classic, déjà invisible, ne prend plus de place. !important : le JS du thème
   ($('.ps-shown-by-js').show()) lui pose un display:block en ligne. */
#search_filters_wrapper #search_filters .facet .facet-label .custom-checkbox > .ps-shown-by-js:not(.color) {
    display: none !important;
}

/* Pastilles de couleur et de tissu : visibles, entre la case et le libellé. */
#search_filters_wrapper #search_filters .facet .facet-label .custom-checkbox > span.color {
    opacity: 1;
    display: inline-block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid #BBB9B6;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: none;
}

#search_filters_wrapper #search_filters .facet .facet-label a {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    line-height: 20px;
    white-space: normal;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

@media (max-width: 576px) {
    #search_filters_wrapper #search_filters section.facet ul:not(.faceted-slider) li {
        width: 50%;
    }
}