/* 自定义5列栅格系统 */

/* PC端5列布局 */
@media (min-width: 768px) {
  .col-md-2-4 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }
  
  /* 使用 flexbox 的容器 */
  .row .col-md-2-4 {
    flex: 0 0 20%;
    max-width: 20%;
  }
  
  /* 使用 float 的容器（兼容旧版） */
  .row:not(.d-flex) .col-md-2-4 {
    float: left;
    width: 20%;
  }
}

/* 平板设备（小于992px）显示3列 */
@media (min-width: 576px) and (max-width: 991px) {
  .col-md-2-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    width: 33.333333%;
  }
}

/* 移动端（小于576px）显示2列或1列 */
@media (max-width: 575px) {
  .col-md-2-4 {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
  }
  
  /* 如果需要移动端1列，可以添加额外的类 */
  .col-md-2-4.mobile-full {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* 确保清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 产品网格的特定样式调整 */
.module-all-products .product-grid.col-md-2-4 {
  margin-bottom: 30px;
}

/* 确保产品卡片在5列布局下的正确显示 */
@media (min-width: 768px) {
  .module-all-products .row {
    display: flex;
    flex-wrap: wrap;
  }
  
  .module-all-products .product-grid.col-md-2-4 .product-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .module-all-products .product-grid.col-md-2-4 .product-wrap .image {
    flex: 1;
  }
}