/*!
 * SuperNet Grid System — Style Carrefour
 * Grille responsive : 2 mobile → 3 tablet → 4 desktop (avec sidebar) → 5 large
 * Gap de 16px pour un look aéré
 * Compatible avec sidebar filtres à gauche (260px)
 */

/* =============================================================================
   LAYOUT PRINCIPAL — Sidebar + Contenu
   ========================================================================== */

/* Conteneur principal avec sidebar — remplace le .row Bootstrap */
.sn-page-layout {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--supernet-space-lg, 24px);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Override Bootstrap .row et .container du parent theme */
#wrapper .container .row,
#wrapper .container > .row,
section#wrapper .container .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--supernet-space-lg, 24px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Container pleine largeur (style Carrefour) */
#wrapper > .container,
section#wrapper > .container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 24px !important;
}

/* Override Bootstrap col-* classes sur la sidebar */
#left-column.col-xs-12,
#left-column.col-md-4,
#left-column.col-lg-3,
#left-column[class*="col-"] {
  flex: 0 0 var(--supernet-sidebar-width, 260px) !important;
  width: var(--supernet-sidebar-width, 260px) !important;
  max-width: var(--supernet-sidebar-width, 260px) !important;
  padding: 0 !important;
  float: none !important;
}

/* Override Bootstrap col-* classes sur le content wrapper */
#content-wrapper.col-xs-12,
#content-wrapper[class*="col-"],
#content-wrapper.left-column,
#content-wrapper.right-column {
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  float: none !important;
}

/* Sidebar filtres */
#left-column {
  flex: 0 0 var(--supernet-sidebar-width, 260px);
  width: var(--supernet-sidebar-width, 260px);
  position: sticky;
  top: 130px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Contenu principal */
#content-wrapper,
.js-content-wrapper {
  flex: 1 1 0%;
  min-width: 0;
}

/* =============================================================================
   GRILLE PRODUITS — Style Carrefour
   ========================================================================== */

/* Reset Bootstrap grid conflicts */
.products.row,
.featured-products .products.row,
.product-list .products,
.supernet-products-grid,
#products .products,
#js-product-list .products,
#js-product-list .products.row,
#js-product-list .supernet-products-grid {
  display: grid !important;
  gap: var(--supernet-grid-gap, 16px) !important;
  margin: 0 !important;
  padding: var(--supernet-space-sm, 8px) 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  list-style: none !important;
}

/* Reset Bootstrap col classes on product items */
.products.row > *[class*="col-"],
.product-list .product,
.products .product,
.featured-products .product,
#products .product,
.supernet-product-card,
.js-product,
.product-miniature {
  width: auto !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =============================================================================
   BREAKPOINTS RESPONSIVE
   ========================================================================== */

/* Mobile petit (< 480px) : 2 colonnes */
@media (max-width: 479px) {
  .products.row,
  .supernet-products-grid,
  #js-product-list .products,
  #js-product-list .products.row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Sidebar masquée en mobile */
  #left-column {
    display: none;
  }

  #wrapper .container .row {
    flex-direction: column;
  }
}

/* Mobile/Tablet (480-899px) : 3 colonnes */
@media (min-width: 480px) and (max-width: 899px) {
  .products.row,
  .supernet-products-grid,
  #js-product-list .products,
  #js-product-list .products.row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  /* Sidebar masquée en tablette */
  #left-column {
    display: none;
  }

  #wrapper .container .row {
    flex-direction: column;
  }
}

/* Desktop (900-1399px) : 5 colonnes avec sidebar (style Carrefour) */
@media (min-width: 900px) and (max-width: 1399px) {
  .products.row,
  .supernet-products-grid,
  #js-product-list .products,
  #js-product-list .products.row {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0 !important;
  }
}

/* Grand écran (1400px+) : 5 colonnes avec sidebar */
@media (min-width: 1400px) {
  .products.row,
  .supernet-products-grid,
  #js-product-list .products,
  #js-product-list .products.row {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0 !important;
  }
}

/* =============================================================================
   CONTENEURS — Full width
   ========================================================================== */

/* Conteneurs produits */
.products-section-container,
#js-product-list-header,
#js-product-list,
#products,
.featured-products,
.product-list {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}