/*
 * Au Bonkawa - catégories génériques / navigation à facettes
 * Emplacement : /themes/aubonkawa/assets/css/facets.css
 */

:root {
  --bk-category-bg: #f7f3ea;
  --bk-category-surface: #fcfaf5;
  --bk-category-border: #ded7ca;
  --bk-category-border-soft: #e9e3d8;
  --bk-category-green: #063f32;
  --bk-category-text: #182d27;
  --bk-category-muted: #746f66;
  --bk-category-gold: #bd8a34;
}

/* Le fond ne concerne que les pages catégorie. */
body#category,
body.page-category {
  background: var(--bk-category-bg);
}

body#category #wrapper,
body.page-category #wrapper,
body#category main,
body.page-category main {
  background-color: transparent;
}

body#category .columns-container,
body.page-category .columns-container {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

body#category #left-column,
body.page-category #left-column,
body#category #center-column,
body.page-category #center-column,
body#category #products,
body.page-category #products {
  background: transparent;
}

/* Carte des filtres */
body#category #search-filters,
body.page-category #search-filters {
  overflow: hidden;
  padding: 1.15rem 1rem .7rem;
  background: rgba(252, 250, 245, .94);
  border: 1px solid var(--bk-category-border);
  border-radius: .5rem;
  box-shadow: 0 8px 28px rgba(32, 42, 36, .035);
}

body#category #search-filters .left-block__title,
body.page-category #search-filters .left-block__title {
  margin: 0;
  padding: 0 0 1rem;
  color: var(--bk-category-green);
  border-bottom: 1px solid var(--bk-category-border);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
}

body#category #search-filters .accordion,
body.page-category #search-filters .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--bk-category-border-soft);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--bk-category-green);
  --bs-accordion-btn-focus-box-shadow: none;
}

body#category #search-filters .accordion-item,
body.page-category #search-filters .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bk-category-border-soft);
}

body#category #search-filters .accordion-item:last-child,
body.page-category #search-filters .accordion-item:last-child {
  border-bottom: 0;
}

body#category #search-filters .accordion-button,
body.page-category #search-filters .accordion-button {
  padding: .95rem 0 .8rem;
  color: var(--bk-category-text);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.25;
}

body#category #search-filters .accordion-button:not(.collapsed),
body.page-category #search-filters .accordion-button:not(.collapsed) {
  color: var(--bk-category-green);
}

body#category #search-filters .accordion-button::after,
body.page-category #search-filters .accordion-button::after {
  width: .85rem;
  height: .85rem;
  background-size: .85rem;
  opacity: .72;
}

body#category #search-filters .accordion-body,
body.page-category #search-filters .accordion-body {
  margin: 0;
  padding: .05rem 0 .85rem;
  list-style: none;
}

body#category #search-filters .accordion-body > li + li,
body.page-category #search-filters .accordion-body > li + li {
  margin-top: .2rem;
}

body#category #search-filters .form-check,
body.page-category #search-filters .form-check {
  min-height: 1.35rem;
  margin: 0;
  padding-left: 1.65rem;
}

body#category #search-filters .form-check-input,
body.page-category #search-filters .form-check-input {
  width: 1rem;
  height: 1rem;
  margin-top: .18rem;
  margin-left: -1.65rem;
  background-color: #fffdf8;
  border: 1px solid #bdb6aa;
  border-radius: .2rem;
  box-shadow: none;
  cursor: pointer;
}

body#category #search-filters .form-check-input:hover,
body.page-category #search-filters .form-check-input:hover {
  border-color: var(--bk-category-green);
}

body#category #search-filters .form-check-input:focus,
body.page-category #search-filters .form-check-input:focus {
  border-color: var(--bk-category-green);
  box-shadow: 0 0 0 .16rem rgba(6, 63, 50, .12);
}

body#category #search-filters .form-check-input:checked,
body.page-category #search-filters .form-check-input:checked {
  background-color: var(--bk-category-green);
  border-color: var(--bk-category-green);
}

body#category #search-filters .search-filters__form-label,
body.page-category #search-filters .search-filters__form-label {
  display: block;
  width: 100%;
  margin: 0;
}

body#category #search-filters .search-filters__link,
body.page-category #search-filters .search-filters__link {
  display: flex;
  gap: .65rem;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: .16rem 0;
  color: #34443e;
  font-size: .875rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color .16s ease;
}

body#category #search-filters .search-filters__link:hover,
body.page-category #search-filters .search-filters__link:hover {
  color: var(--bk-category-green);
}

body#category #search-filters .search-filters__magnitude,
body.page-category #search-filters .search-filters__magnitude {
  flex: 0 0 auto;
  color: var(--bk-category-muted);
  font-size: .78rem;
}

/* Conteneur des filtres actifs vide : rien ne doit apparaître au-dessus de la grille. */
.active-filters--empty {
  display: none;
}

/* Filtres actifs : même langage visuel que les facettes. */
body#category .active_filters,
body#category .active-filters,
body.page-category .active_filters,
body.page-category .active-filters {
  margin-bottom: 1rem;
  padding: .8rem 1rem;
  background: var(--bk-category-surface);
  border: 1px solid var(--bk-category-border);
  border-radius: .45rem;
}

body#category .active_filters .filter-block,
body#category .active-filters .filter-block,
body.page-category .active_filters .filter-block,
body.page-category .active-filters .filter-block {
  background: #eee7da;
  border-radius: 999px;
  color: var(--bk-category-text);
}

/* La grille reste lisible sans grand rectangle blanc derrière elle. */
body#category #js-product-list-top,
body.page-category #js-product-list-top {
  margin-bottom: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--bk-category-border);
}

body#category .product-miniature,
body.page-category .product-miniature {
  background: rgba(252, 250, 245, .72);
  border-color: var(--bk-category-border-soft);
}

@media (max-width: 991.98px) {
  body#category .columns-container,
  body.page-category .columns-container {
    padding-top: 1.35rem;
  }

  body#category #search-filters,
  body.page-category #search-filters {
    padding-right: .85rem;
    padding-left: .85rem;
  }
}

@media (max-width: 767.98px) {
  body#category,
  body.page-category {
    background: #faf7f0;
  }

  body#category .columns-container,
  body.page-category .columns-container {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  body#category #left-column,
  body.page-category #left-column {
    margin-bottom: 1rem;
  }

  body#category #search-filters,
  body.page-category #search-filters {
    padding: .8rem .9rem .35rem;
    background: var(--bk-category-surface);
    border-radius: .4rem;
    box-shadow: none;
  }

  body#category #search-filters .accordion-button,
  body.page-category #search-filters .accordion-button {
    min-height: 2.75rem;
  }
}


/* =========================================================
   PANNEAU DE FILTRES MOBILE — pied « Voir les N produits » (L5)
   ========================================================= */
#offcanvas-faceted .bkw-facets-footer {
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #eadfd8;
  background: #fff;
}

#offcanvas-faceted .bkw-facets-footer__button {
  display: block;
  width: 100%;
}

/* Curseur de prix aux couleurs de la charte (le bleu Bootstrap par défaut
   détonnait). */
.search-filters .noUi-connect {
  background: var(--main-color, #2f1f1e);
}

.search-filters .noUi-handle {
  border-color: var(--main-color, #2f1f1e);
}