/* =============================================================================
   Règles communes aux catégories disposant d'un template dédié
   (catalog/listing/category-<id>.tpl).

   Un template s'y raccroche en surchargeant le bloc container_class :
     {block name='container_class'}columns-container container-fluid bk-category-template{/block}
   et en chargeant cette feuille dans son bloc stylesheets.

   Couvre : pleine largeur, suppression des marges verticales de page,
   sidebar de facettes collée sous le header, une colonne produit sur mobile.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Pleine largeur : remplace le .container du layout (max 1320px).
   -------------------------------------------------------------------------- */
.bk-category-template {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.bk-category-template > .row {
  margin-left: 0;
  margin-right: 0;
}

.bk-category-template #center-column {
  flex: 0 0 auto;
  max-width: 100%;
  width: 100%;
}

/* theme.css pose .page:not(body){padding-bottom:2rem} sur #center-column. */
.bk-category-template #center-column.page {
  padding: 0;
}

/* -----------------------------------------------------------------------------
   Marges verticales de page : le contenu part sous le fil d'Ariane et vient au
   contact du footer. Sélecteurs volontairement spécifiques pour passer devant
   custom.css et facets.css, dont l'ordre de chargement n'est pas garanti.
   -------------------------------------------------------------------------- */
body#category .columns-container.bk-category-template {
  padding-bottom: 0;
  padding-top: 0;
}

body:has(.bk-category-template) .breadcrumb__wrapper {
  margin-bottom: 0;
}

body:has(.bk-category-template) #wrapper {
  padding-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Liste produits accompagnée de la sidebar de facettes.
   Le layout ne rend plus #left-column : le template réinjecte le hook
   displayLeftColumn dans .bk-listing__aside, à côté de la liste seule.
   -------------------------------------------------------------------------- */
.bk-listing {
  align-items: start;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  margin: 30px auto 0;
  max-width: var(--bk-template-container, 90%);
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

.bk-listing__aside {
  min-width: 0;
  padding: 0;
  position: sticky;
  /* Le header du thème est sticky (top: 0) : sans décalage, le haut des filtres
     passe dessous. --scroll-padding-top est posé sur <html> par le thème
     (hauteur réelle du header + 16px) ; le repli sert avant que le JS tourne. */
  top: var(--scroll-padding-top, 120px);
  /* Évite que le bas des filtres devienne inaccessible une fois le haut figé,
     quand plusieurs accordéons sont ouverts. */
  max-height: calc(100vh - var(--scroll-padding-top, 120px) - 24px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.bk-listing__main {
  min-width: 0;
}

/* Le premier bloc de la liste porte déjà une marge haute : on l'annule pour
   aligner le haut des filtres et celui de la barre de tri. */
.bk-listing__main #js-product-list-top {
  margin-top: 0;
}

@media (max-width: 991px) {
  .bk-listing {
    display: block;
  }

  .bk-listing__aside {
    max-height: none;
    overflow-y: visible;
    position: static;
  }
}

@media (max-width: 720px) {
  .bk-listing {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* -----------------------------------------------------------------------------
   Smartphone : deux colonnes, cartes compactes (L2 de l'audit UX, cf. la
   section « LISTINGS — SMARTPHONE » de custom.css).
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  body#category .bk-category-template .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}