/* ========== 5分类橱窗样式（强制兼容版） ========== */
.cs-category-grid {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 50px 30px 60px !important;
  background-color: #FFF9F1 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* 行容器 */
.cs-grid-row {
  display: grid !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

.cs-grid-row:last-child {
  margin-bottom: 0 !important;
}

/* 2列行 */
.cs-row-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* 3列行 */
.cs-row-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* 卡片样式 */
.cs-category-card {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
}

/* 图片容器 */
.cs-card-img {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: block !important;
}

.cs-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
  display: block !important;
}

/* 悬停放大效果 */
.cs-category-card:hover .cs-card-img img {
  transform: scale(1.05) !important;
}

/* 右上角标签 */
.cs-category-tag {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
}

.cs-category-tag span {
  display: inline-block !important;
  padding: 10px 22px !important;
  border: 1.5px solid #fff !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  transition: background 0.3s ease !important;
}

/* 悬停时标签背景加深 */
.cs-category-card:hover .cs-category-tag span {
  background: rgba(0, 0, 0, 0.45) !important;
}

/* ========== 响应式适配 ========== */
/* 平板：第一行2列不变，第二行3列变2列 */
@media (max-width: 900px) {
  .cs-row-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .cs-row-3 .cs-category-card:last-child {
    grid-column: span 2 !important;
    aspect-ratio: 2 / 1 !important;
  }

  .cs-category-tag span {
    font-size: 14px !important;
    padding: 8px 16px !important;
  }
}

/* 手机：全部1列 */
@media (max-width: 600px) {
  .cs-category-grid {
    padding: 30px 10px 40px !important;
  }

  .cs-grid-row {
    gap: 15px !important;
    margin-bottom: 15px !important;
  }

  .cs-row-2,
  .cs-row-3 {
    grid-template-columns: 1fr !important;
  }

  .cs-row-3 .cs-category-card:last-child {
    grid-column: span 1 !important;
    aspect-ratio: 3 / 4 !important;
  }

  .cs-category-tag {
    top: 15px !important;
    right: 15px !important;
  }

  .cs-category-tag span {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
}