/* ============================================================
   商品卡「深色顶部 + 绿色按钮」（按参考图 2026-10-20 改版）
   ============================================================ */

/* ---------- 深色顶部：地区名 + 商品名 ---------- */
/* 顶栏：商务白（2026-10-24 改）
   原深蓝渐变与站内浅色主视觉割裂，改为「近白底 + 顶部细色条」，
   与卡片自身的浅蓝渐变自然衔接。
   配色来源：站内商品卡主色 #1f3b8a / #2f5fd0。 */
.shopping-item .bx-card-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: 14px 16px 14px !important;
  background:
    linear-gradient(180deg, #f7faff 0%, #ffffff 62%, #fdfefe 100%) !important;
  color: #16283d !important;
  border-radius: 12px 12px 0 0 !important;
  margin: -1px -1px 0 !important;
  border-bottom: 1px solid #eaf0f8 !important;
}

/* 顶栏顶部一条 3px 品牌色细边，替代原来的深色块做视觉锚点 */
.shopping-item .bx-card-hero::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #1f3b8a 0%, #2f5fd0 55%, #4d8af0 100%) !important;
  z-index: 2 !important;
}

/* 底部不再需要暗化渐变（浅底上没有意义） */
.shopping-item .bx-card-hero::after {
  display: none !important;
}

.shopping-item .bx-card-hero .bx-hero-text {
  position: relative !important;
  z-index: 2 !important;
  /* 右侧给库存胶囊让位（胶囊约 64×20，贴在右上角）。
     96px 足以容纳「库存充足」四字胶囊，标题不会与它重叠。 */
  padding-right: 96px !important;
}

/* 第一行：二级分类名 —— 白色加粗大字，完整显示不做截断 */
.shopping-item .bx-card-hero .bx-hero-cat {
  /* 22px → 15.5px：原尺寸在卡片里过于抢眼，压到与商品名同层级之上即可 */
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: .2px !important;
  color: #1f3b8a !important;
  text-shadow: none !important;
  /* 完整显示：不限制行数、不省略、允许自然换行 */
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* 分类名过长时自动缩小，仍然不截断 */
@media screen and (max-width: 750px) {
  .shopping-item .bx-card-hero .bx-hero-cat {
    font-size: 14px !important;
  }
}

/* 第二行：商品名（地区胶囊已移除，独占整行） */
.shopping-item .bx-card-hero .bx-hero-name {
  margin-top: 4px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #5b6a7d !important;
  display: block !important;
}

/* 地区胶囊：已按需求删除（保留空规则避免旧缓存元素占位） */
.shopping-item .bx-card-hero .bx-hero-region-inline {
  display: none !important;
}

/* 商品名：可换行，最多两行 */
.shopping-item .bx-card-hero .bx-hero-name-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-weight: 600 !important;
  color: #46566c !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
}

/* 兼容旧类名（若缓存中仍是 region 大字版） */
.shopping-item .bx-card-hero .bx-hero-region {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: .2px !important;
  color: #1f3b8a !important;
  text-shadow: none !important;
}

.shopping-item .bx-card-hero .bx-hero-code {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  z-index: 3 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: rgba(255, 255, 255, .62) !important;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace !important;
}

.shopping-item .bx-card-hero .bx-hero-art {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 56px !important;
  color: rgba(120, 170, 235, .16) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ============================================================
   库存状态角标 · 方案 A「轻薄胶囊」（2026-10-24 改版）
   ------------------------------------------------------------
   为什么换掉原来的三角丝带：
     - 78×78 的斜三角占了标题右上角一大块，分组名必须为它让位 62px
     - 深色顶栏取消后，白底上的白色三角几乎看不见
     - 斜排文字在手机上字号被压到 9.5px，可读性差

   新方案：右上角悬浮小胶囊
     - 体积小（约 64×20），标题只需让位约 10px
     - 左侧一个带光晕的圆点表达状态，右侧文字
     - 四档语义色：绿（充足）/ 橙（紧张）/ 红（告急）/ 灰（售罄）
   ============================================================ */

.shopping-item {
  position: relative !important;
  overflow: hidden !important;
}

.bx-stock-ribbon {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 20 !important;
  pointer-events: none !important;

  /* 覆盖旧三角：取消尺寸与 clip-path */
  width: auto !important;
  height: auto !important;
  background: none !important;
  clip-path: none !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px 3px 7px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 2px rgba(20, 50, 90, .04) !important;
}

/* 状态点 */
.bx-stock-ribbon > span::before {
  content: "" !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  margin-right: 5px !important;
  vertical-align: 1px !important;
}

/* 覆盖旧版：取消旋转与固定宽度 */
.bx-stock-ribbon > span {
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: .2px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

/* ---------- 四档配色 ---------- */

/* 充足：绿 */
.bx-stock-ribbon.is-enough {
  background: #ecfdf3 !important;
  border-color: #b7ecd3 !important;
  color: #12805c !important;
}
.bx-stock-ribbon.is-enough > span { color: #12805c !important; }
.bx-stock-ribbon.is-enough > span::before {
  background: #16a34a !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, .16) !important;
}

/* 紧张：橙 */
.bx-stock-ribbon.is-tense {
  background: #fffaeb !important;
  border-color: #fde5a8 !important;
  color: #b54708 !important;
}
.bx-stock-ribbon.is-tense > span { color: #b54708 !important; }
.bx-stock-ribbon.is-tense > span::before {
  background: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .16) !important;
}

/* 告急：红 */
.bx-stock-ribbon.is-alert {
  background: #fef3f2 !important;
  border-color: #fecdc9 !important;
  color: #b42318 !important;
}
.bx-stock-ribbon.is-alert > span { color: #b42318 !important; }
.bx-stock-ribbon.is-alert > span::before {
  background: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .16) !important;
}

/* 售罄：灰 */
.bx-stock-ribbon.is-out {
  background: #f3f4f6 !important;
  border-color: #e3e6eb !important;
  color: #6b7280 !important;
}
.bx-stock-ribbon.is-out > span { color: #6b7280 !important; }
.bx-stock-ribbon.is-out > span::before {
  background: #9ca3af !important;
  box-shadow: none !important;
}

/* 售罄整卡：角标保持灰，不额外处理 */
.shopping-item.is-sold-out .bx-stock-ribbon {
  background: #f3f4f6 !important;
  border-color: #e3e6eb !important;
}
.shopping-item.is-sold-out .bx-stock-ribbon > span { color: #6b7280 !important; }
.shopping-item.is-sold-out .bx-stock-ribbon > span::before { background: #9ca3af !important; }

/* 手机端：略收一号 */
@media screen and (max-width: 750px) {
  .bx-stock-ribbon {
    top: 8px !important;
    right: 8px !important;
    padding: 2px 8px 2px 6px !important;
    font-size: 10px !important;
  }
  .bx-stock-ribbon > span { font-size: 10px !important; }
}

/* ---------- 库存标签：浮在深色区右下 ---------- */
.shopping-item .bx-card-title-row {
  position: relative !important;
  z-index: 3 !important;
  margin-top: -30px !important;
  padding: 0 16px !important;
  justify-content: flex-end !important;
  height: 24px !important;
  background: transparent !important;
  border-bottom: none !important;
}
.shopping-item .bx-card-title-row::before {
  display: none !important;
}

/* 白色内容区 */
.shopping-item .bx-spec-raw,
.shopping-item .bx-spec-table {
  margin-top: 8px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ---------- 立即购买：黑色（2026-10-24 改） ----------
   配色说明：
     不用纯黑 #000 —— 纯黑在浅色卡片上对比过猛、显得生硬。
     用 #1a1f2b（偏蓝的深灰黑），与站内深蓝主色同色系，观感更「商务」。
     文字 #ffffff，图标同步白色。
     hover 提亮到 #2a3142，并保留轻微上浮 + 柔和投影。 */
.shopping-item .buy-btn,
.shopping-item .price-box .buy-btn {
  background: linear-gradient(180deg, #232935 0%, #1a1f2b 100%) !important;
  border: 1px solid #1a1f2b !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  height: 44px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  box-shadow:
    0 1px 2px rgba(20, 30, 50, .18),
    0 6px 16px -10px rgba(20, 30, 50, .75) !important;
  transition: all .16s ease !important;
}

.shopping-item .buy-btn:hover,
.shopping-item .price-box .buy-btn:hover {
  background: linear-gradient(180deg, #2f3746 0%, #252c3a 100%) !important;
  border-color: #252c3a !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 2px rgba(20, 30, 50, .2),
    0 8px 20px -10px rgba(20, 30, 50, .85) !important;
  transform: translateY(-1px) !important;
}

/* 按下时回弹，避免"飘" */
.shopping-item .buy-btn:active,
.shopping-item .price-box .buy-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .2) !important;
}

.shopping-item .buy-btn i,
.shopping-item .price-box .buy-btn i {
  color: #ffffff !important;
  margin-right: 6px !important;
}

/* 按钮内文字/图标一律白色（Element UI 可能给 span 单独上色） */
.shopping-item .buy-btn span,
.shopping-item .price-box .buy-btn span {
  color: #ffffff !important;
}

/* 售罄态保持灰（文字必须同步改灰，否则会被上面的白色规则变成"白底白字"） */
.shopping-item.is-sold-out .buy-btn,
.shopping-item .buy-btn.is-sold-out-btn {
  background: #f1f3f6 !important;
  border-color: #e2e6ec !important;
  color: #9aa3b0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.shopping-item.is-sold-out .buy-btn i,
.shopping-item .buy-btn.is-sold-out-btn i {
  color: #9aa3b0 !important;
}

/* ← 关键：span 也要覆盖，否则被 .buy-btn span{color:#fff} 抢走 */
.shopping-item.is-sold-out .buy-btn span,
.shopping-item .buy-btn.is-sold-out-btn span {
  color: #9aa3b0 !important;
}

/* 售罄卡片深色区改灰调 */
.shopping-item.is-sold-out .bx-card-hero {
  background: linear-gradient(180deg, #f7f8fa 0%, #fbfcfd 100%) !important;
}
.shopping-item.is-sold-out .bx-card-hero::before {
  background: linear-gradient(90deg, #b9c0ca 0%, #cdd3db 100%) !important;
}
.shopping-item.is-sold-out .bx-card-hero .bx-hero-cat {
  color: #6b7684 !important;
}

/* ⚠️ 商品名必须一并覆盖：
   顶栏改商务白后 .bx-hero-name 是深灰色，但售罄卡的顶栏底色更浅，
   而旧规则只改了 .bx-hero-cat，商品名仍继承过时的半透明白 → 白字白底看不见。
   这里给售罄卡的商品名一个中灰，既区别于分组名（#6b7684）又保证可读。 */
.shopping-item.is-sold-out .bx-card-hero .bx-hero-name {
  color: #8b95a3 !important;
}

.shopping-item.is-sold-out .bx-card-hero .bx-hero-name-text {
  color: #8b95a3 !important;
}

/* 旧版类名兜底（缓存里有遗留结构时也不至于隐身） */
.shopping-item.is-sold-out .bx-card-hero .bx-hero-region {
  color: #8b95a3 !important;
}

.shopping-item.is-sold-out .bx-card-hero .bx-hero-art {
  color: rgba(120, 140, 170, .12) !important;
}

/* ---------- 移动端 ---------- */
@media screen and (max-width: 750px) {
  .shopping-item .bx-card-hero {
    padding: 12px 14px 14px !important;
  }
  .shopping-item .bx-card-hero .bx-hero-region {
    font-size: 19px !important;
  }
  .shopping-item .bx-card-hero .bx-hero-name {
    font-size: 12.5px !important;
  }
  .shopping-item .bx-card-title-row {
    padding: 0 14px !important;
    margin-top: -28px !important;
  }
  .shopping-item .bx-spec-raw,
  .shopping-item .bx-spec-table {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---------- 窄卡片适配：列宽 < 340px 时角标收紧 ----------
   4 列铺满时单卡约 310px，108px 的三角角标会盖住分类名，
   这里缩小到 84px 并减小文字，保证标题可读。 */
/* 窄卡片适配（2026-10-24 更新）
   旧版这里是给「三角丝带」缩尺寸用的（92×92 + 缎带偏移 + padding 52px）。
   角标已改为胶囊方案，这些规则会把胶囊强撑成 92×92 的方块，
   必须整段移除，只保留标题为胶囊让位的最小间距。 */
@media screen and (max-width: 1700px) {
  .shopping-item .bx-card-hero .bx-hero-text {
    padding-right: 88px !important;
  }
}