/* ============================================================================
   库存状态角标 · 方案 A「轻薄胶囊」
   ----------------------------------------------------------------------------
   历史：
     最初用 78×78 / 108×108 的三角丝带（clip-path），白底三角压在卡片右上角，
     分组名必须让位 62px，手机上字号被压到 9.5px，可读性差。
     2026-10-24 顶栏改商务白后，白三角在白底上几乎不可见，故彻底重构。

   现在：
     右上角悬浮小胶囊（约 64×20），左侧带光晕的状态圆点 + 右侧文字。
     四档语义色：绿（充足）/ 橙（紧张）/ 红（告急）/ 灰（售罄）。

   ⚠️ 本文件只负责「状态圆点配色」。
      布局（尺寸/圆角/内边距/位置）统一由 card_hero.css 控制，
      避免两个文件重复定义 width/height/clip-path 互相覆盖。
   ============================================================================ */

/* ---------- 状态圆点：四档配色 ---------- */

.shopping-item .bx-stock-ribbon.is-enough > span::before {
  background: #16a34a !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, .16) !important;
}

.shopping-item .bx-stock-ribbon.is-tense > span::before {
  background: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .16) !important;
}

.shopping-item .bx-stock-ribbon.is-alert > span::before {
  background: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .16) !important;
}

.shopping-item .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;
  box-shadow: none !important;
}

/* ---------- 移动端：圆点略小 ---------- */
@media screen and (max-width: 750px) {
  .shopping-item .bx-stock-ribbon > span::before {
    width: 4.5px !important;
    height: 4.5px !important;
    margin-right: 4px !important;
  }
}