/* =========================
   Special Deals - 独家折扣
   独立模块，不依赖你原来的 CSS
   ========================= */

/* 整个模块容器：宽度接近 1410，背景透明，用页面已有的背景 */
#special_deals {

  margin-top: -10px;
  width: min(1410px, 100% - 80px);
  margin: -12px auto 40px;
  color: #111827;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", sans-serif;
}

/* 标题行：左标题 + 右侧“查看更多” */
#special_deals .sd-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#special_deals .sd-title h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}

#special_deals .sd-title p {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

#special_deals .sd-title .sd-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background-color: #ffffff;
  font-size: 12px;
  color: #111827;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  -webkit-tap-highlight-color: transparent;
}

#special_deals .sd-title .sd-more:hover {
  background-color: #f9fafb;
}

/* 卡片列表：5 列 x 2 行 */
#special_deals .sd-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px 16px;
}

/* 每一个链接块：上面是 item，下面是 promo */
#special_deals .sd-card {
    padding: 6px 6px 6px;
    border-radius: 31px;
    background-color: rgba(250, 250, 250, .8);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    margin-top: 22px;
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 0;
    text-decoration: none;
    color: inherit;
}

/* 上半部分渐变卡片 */
#special_deals .deal-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px 18px 14px;
  border-radius: 18px;
  background-image:
    url("../../../assets/test/img/gradient_bg.svg"),
    linear-gradient(
      135deg,
      var(--deal-from, #4b5563),
      var(--deal-to, #111827)
    );
  background-repeat: repeat-x, no-repeat;
  background-position: -90% 0, center;
  background-size: 225% auto, cover;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.22);
}

/* 游戏图标：用负 margin-top 往上顶，让它突出出来 */
#special_deals .deal-item .img {
  width: 64px;
  height: 64px;
  border-radius: 25%;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
  margin-top: -30px;
  margin-left: -5px;
}

#special_deals .deal-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 文案区域：数量 + 名称 */
#special_deals .deal-item .T {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  color: #ffffff;
}

#special_deals .deal-item .sku,
#special_deals .deal-item .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#special_deals .deal-item .sku {
  font-size: 14px;
  font-weight: 600;
}

#special_deals .deal-item .name {
  font-size: 12px;
  opacity: 0.8;
}

/* 底部“促销 + 折扣” 行 */
#special_deals .deal-promo {
  display: flex;
  align-items: center;
  padding: 6px 18px 0;
  font-size: 12px;
  color: #111827;
}

#special_deals .deal-rate {
  min-width: 56px;
  padding: 5px 10px;
  border-radius: 999px;
  background-color: #16a34a;
  color: #ffffff;
  text-align: center;
  font-weight: 600;
}

#special_deals .deal-price {
  margin-left: auto;
  font-weight: 600;
}

/* 卡片轻一点的 hover 效果 */
#special_deals .sd-card:hover .deal-item {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.28);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* 响应式：宽度不够时，从 5 列减到 3/2 列 */
@media (max-width: 1280px) {
  #special_deals {
    width: min(100% - 32px, 1100px);
  }

  #special_deals .sd-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #special_deals .sd-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}