/* ===== 产品列表 3列布局 ===== */
.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}

/* ===== 感应前（默认态）= 原来感应后的好看效果 ===== */
.product-item {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;

  /* 👇 原来 hover 才有的效果，现在默认就有 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-6px);
  opacity: 1;
  transition: all 0.3s ease;
}

.product-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.product-item .title {
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #f8f9fa;
}

/* ===== 感应后（hover态）= 原来默认的朴素效�?===== */
.product-item:hover {
  box-shadow: none;
  transform: none;
  opacity: 0.85;
}

/* ===== 响应�?===== */
@media (max-width: 992px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 576px) {
  .product-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}









/* ===== ���� ===== */
.product-list-moudle3 {
  padding: 40px 0;
}

/* ===== 3�����񣨺��ģ� ===== */
.product-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ���� Bootstrap col-* �Ŀ��ȸ��� */
.product-list .col-6,
.product-list .col-md-4 {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}

/* ===== ��Ʒ��Ƭ ===== */
.product-item {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: all 0.3s ease;

  /* ��Ӧǰ = �ÿ�Ч�� */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-6px);
  opacity: 1;
}

.product-item a {
  display: block;
  text-decoration: none;
}

.product-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.product-item .caption {
  padding: 14px 16px;
  text-align: center;
  background: #f8f9fa;
}

.product-item .caption a {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ===== ��Ӧ��hover��= ����Ч�� ===== */
.product-item:hover {
  box-shadow: none;
  transform: none;
  opacity: 0.85;
}

/* ===== ��Ӧʽ ===== */
@media (max-width: 992px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px;
  }
}

@media (max-width: 576px) {
  .product-list {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
}