/* Shop By Products板块 */
.scc-shop-by-container {
  width: 120rem;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 9.6rem;
}

.scc-shop-by-container .scc-shop-by-title {
  font-family: Exo, sans-serif;
  font-size: 3.2rem !important;
  font-weight: 600;
  color: var(--scc-color-text-primary);
  text-align: center;
  margin-bottom: 2rem;
}

.scc-shop-by-container .browse-more {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin-bottom: 2rem;
  text-align: right;
  color: var(--scc-color-primary);
}

/* 1. 网格布局和基础卡片样式（保持不变） */
.scc-shop-by-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.3rem 4.8rem;
}

.scc-shop-by-card-grid .card-item {
  position: relative;
  overflow: hidden;
  border-radius: 1.8rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  padding-bottom: 100%;
  height: 0;
}

/* 占位符图片背景 (为了演示效果) */
.scc-shop-by-card-grid .card-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-in-out;
}

.scc-shop-by-card-grid .card-item .border-decoration {
  width: 54rem;
  height: 54rem; /* 如果你想更厚点可以改 2~4px */
  border: 0.3rem solid var(--scc-color-primary);
  border-radius: 1.8rem;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.scc-shop-by-card-grid .card-overlay {
  /* 采用百分比或固定像素尺寸，这里使用固定像素，但为了自适应建议使用 max-width/height */
  width: 80%; /* 覆盖层宽度占卡片的 80% */
  max-width: 31.7rem; /* 限制最大宽度 */
  height: auto; /* 高度自适应内容 */
  min-height: 14.9rem; /* 最小高度 */
  position: absolute;
  top: 50%;
  left: 50%; /* 垂直水平居中 */
  background-color: #00000029; /* 半透明白色背景 */
  padding: 2rem;
  border-radius: 0.6rem; /* 轻微圆角 */
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  opacity: 1; /* 初始隐藏 */
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.4s ease-in-out;
  z-index: 10;
}

.scc-shop-by-card-grid .card-overlay h2 {
  font-size: 2.8rem !important;
  font-family: Exo, sans-serif;
  margin: 0;
  color: var(--scc-color-white); /* 标题颜色改为深色，以适应浅色背景 */
}

.scc-shop-by-card-grid .read-more-btn {
  display: inline-block;
  font-family: Exo, sans-serif;
  padding: 1.1rem 2.5rem;
  background-color: var(--scc-color-primary); /* 浅蓝色 */
  text-decoration: none;
  font-size: 1.6rem;
  color: var(--scc-color-white);
  transition: background-color 0.3s;
  font-weight: 700;
}

.scc-shop-by-card-grid .card-item .read-more-btn:hover {
  background-color: var(--scc-color-text-primary);
  color: var(--scc-color-primary);
}

.scc-shop-by-card-grid .card-item:hover img {
  transform: scale(1.05);
}

@media screen and (width <= 768px) {
  /* <!-- Shop By Products板块 --> */
  .scc-shop-by-container {
    margin: 0 1.6rem 6.6rem;
    width: auto;
  }

  .scc-shop-by-container .scc-shop-by-title {
    font-size: 2.8rem !important;
  }

  .scc-shop-by-container .scc-shop-by-card-grid {
    gap: 2rem 1.6rem;
  }

  .scc-shop-by-card-grid .card-item .border-decoration {
    width: 15.5rem;
    height: 15.5rem;
  }

  .scc-shop-by-card-grid .card-overlay {
    min-height: 11.7rem;
    padding: 1rem;
  }

  .scc-shop-by-card-grid .card-overlay h2 {
    font-size: 1.9rem !important;
  }

  .scc-shop-by-card-grid .read-more-btn {
    border-radius: 2.2rem;
    padding: 0.6rem 2rem;
    white-space: nowrap;
  }
}