/* ============================================================
   首页(index.dwt) 样式优化
   目的：让「店铺推荐」区块与 moban 首页(HutBazar)风格保持一致
   仅作用于首页，不影响分类 / 商品等其它页面
   主色：--green #3366CC（与 moban 一致）
   ============================================================ */

/* 区块背景与已有 trending 区块(#ebf9ed)保持一致，形成首页节奏 */
.store-section {
  background: #ebf9ed;
  padding-bottom: 30px;
}

/* 店铺卡片容器：白底圆角描边，呼应 moban 的 .card 风格 */
.store-wall-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 24px;
  overflow: hidden;
  margin-top: 6px;
}

/* 内部店铺网格：沿用原 store-wall-con 结构，改为自适应宽度，
   避免固定 1200px 在响应式容器内溢出 / 横向滚动 */
#index-store.store-wall-con {
  width: 100%;
  max-width: 100%;
  float: none;
  border-top: none;
}

/* 单个店铺项：圆角卡片 + hover 抬升，贴近 moban product-single 观感 */
.store-wall-card .store-wall-pannel .store-item {
  border: 1px solid #eee;
  border-radius: 8px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.store-wall-card .store-wall-pannel .store-item:hover {
  box-shadow: 0 6px 18px rgba(51, 102, 204, .15);
  transform: translateY(-3px);
  text-decoration: none;
}

/* 分类导航图标：统一间距与主色（修复原先所有分类共用 watch.png 的问题，
   图标已由模板改用 Bootstrap Icons，这里保证基础表现） */
.category-list .nav-link .bi {
  margin-right: 6px;
  color: var(--green);
}

/* ============================================================
   商品楼层：简单两列网格（去掉轮播，纯 CSS 网格，稳定显示）
   图片在上、标题+价格在下；移动端自动变单列
   ============================================================ */

/* 容器：默认 4 列（桌面 2 行 × 4 列 = 8 件） */
.trending .product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}
/* 平板：2 列 */
@media (max-width: 991px) {
  .trending .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* 手机：1 列 */
@media (max-width: 575px) {
  .trending .product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 商品卡片：白底圆角 + hover 抬升 */
.trending .product-grid > .product-single {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #fff !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
.trending .product-grid > .product-single:hover {
  box-shadow: 0 8px 24px rgba(51, 102, 204, .15) !important;
  transform: translateY(-4px) !important;
}

/* 图片：固定高度，cover 裁切，防止坍塌 */
.trending .product-single .product-img {
  width: 100% !important;
  height: 240px !important;
  overflow: hidden !important;
  position: relative !important;
}
.trending .product-single .product-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 内容区 */
.trending .product-single .card-body {
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

/* 标题：两行截断 */
.trending .product-single .product-name {
  font-size: 14px !important;
  line-height: 1.4 !important;
  height: 2.8em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  color: #333 !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
}

/* 价格 */
.trending .product-single .product-price del {
  font-size: 12px !important;
  color: #999 !important;
}
.trending .product-single .product-price b {
  font-size: 18px !important;
  color: #dc3545 !important;
  font-weight: 700 !important;
}
