/* ============================================================================
   商品卡 · 折扣价格区（一体化白框）
   ----------------------------------------------------------------------------
   上一版问题：原价行在白框【外面】，和主价格脱节，视觉松散。

   这一版：把「主价格 + 原价 + 省多少」全部收进 .bx-price-frame 白框内，
          形成一张完整的价格卡片：
          ┌──────────────────────────────┐
          │   ¥255.42 元/年 │ 平均0.70/天 │ ⚡9.9折
          │   原价：¥258.00元  省¥2.58   │
          └──────────────────────────────┘
   角标挂到白框右上角，随框一起移动。

   配色（参考图取色）：
     主红  #e8203a（折扣 / 主价格 / 省金额）
     浅红底 #fff0f2
     灰    #9aa3b0（原价）
   ============================================================================ */

/* ---------- 价格框：改为纵向卡片，容纳两行 ---------- */
.shopping-item .bx-price-frame {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  position: relative !important;
  padding: 13px 16px 12px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid #eef2f8 !important;
  box-shadow: 0 1px 3px rgba(30, 69, 196, .05) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ---------- 第一行：主价格 + 周期 + 平均每天 ----------
   关键：绝对不换行（flex-wrap: nowrap）。
   原来允许换行时，价格位数多的卡片（如 ¥224.50）会把"平均x/天"折到第二行，
   导致同排卡片价格框高度不一致（54px vs 87px），整行看着参差不齐。
   现在改为单行 + 允许内部等比压缩，所有卡片价格区高度恒定。 */
.shopping-item .bx-price-line {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 1px !important;
  line-height: 1 !important;
  /* 固定行高，避免字体度量差异带来 1px 抖动 */
  min-height: 24px !important;
  /* 极窄时整体轻微缩放，优先保证不换行 */
  white-space: nowrap !important;
}

/* 主价格不允许被压缩换行 */
.shopping-item .bx-price-line > * {
  flex-shrink: 1 !important;
  white-space: nowrap !important;
}

/* 周期与平均每天在空间紧张时可以收缩，但不换行 */
.shopping-item .bx-price-unit,
.shopping-item .bx-price-perday {
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 主价格：红色系 */
.shopping-item .bx-price-cur {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #e8203a !important;
  margin-right: 1px !important;
}

.shopping-item .bx-price-int {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.5px !important;
  color: #e8203a !important;
}

.shopping-item .bx-price-dec {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #e8203a !important;
  margin-left: 1px !important;
}

/* 周期：灰色，不抢焦点 */
.shopping-item .bx-price-unit {
  margin-left: 5px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #8b93a1 !important;
  white-space: nowrap !important;
}

/* 分隔竖线 */
.shopping-item .bx-price-divider {
  display: inline-block !important;
  width: 1px !important;
  height: 13px !important;
  margin: 0 9px !important;
  background: #e3e8f0 !important;
  align-self: center !important;
}

/* 平均每天：粉色 */
.shopping-item .bx-price-perday {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #e8408a !important;
  white-space: nowrap !important;
}

/* ---------- 第二行：原价 + 省多少 ---------- */
.shopping-item .bx-disc-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 0 !important;
  padding-top: 7px !important;
  min-height: 24px !important;
  border-top: 1px dashed #eef1f6 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

.shopping-item .bx-disc-origin-label {
  color: #9aa3b0 !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
}

/* 原价：灰色 + 删除线 */
.shopping-item .bx-disc-origin {
  color: #a7aeba !important;
  font-weight: 600 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px !important;
  text-decoration-color: #c3cad5 !important;
  flex-shrink: 0 !important;
}

/* "省 ¥2.58" 胶囊 */
.shopping-item .bx-disc-save {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
  margin-left: 2px !important;

  padding: 1px 8px !important;
  border-radius: 999px !important;
  background: #fff0f2 !important;
  border: 1px solid #ffd6dc !important;
  color: #e8203a !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  white-space: nowrap !important;
}

.shopping-item .bx-disc-save-label {
  font-weight: 600 !important;
  opacity: .92 !important;
}

.shopping-item .bx-disc-save-amount {
  font-weight: 800 !important;
  letter-spacing: .1px !important;
}

/* ---------- 折扣角标：挂在白框右上角 ---------- */
.shopping-item .bx-disc-badge {
  position: absolute !important;
  top: -11px !important;
  right: 12px !important;
  z-index: 12 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;

  padding: 3px 11px 3px 8px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  color: #fff !important;

  background: linear-gradient(135deg, #ff5a6e 0%, #e8203a 58%, #d0142f 100%) !important;
  border-radius: 9px !important;
  box-shadow:
    0 2px 7px -1px rgba(232, 32, 58, .42),
    inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

.shopping-item .bx-disc-badge svg {
  flex-shrink: 0 !important;
  width: 9px !important;
  height: 9px !important;
}

/* ---------- 无折扣时：价格框略收紧 ---------- */
/* 无折扣卡片：固定高度与有折扣卡片的第一行对齐 */
.shopping-item .bx-price-frame:not(:has(.bx-disc-row)) {
  padding: 14px 16px !important;
  min-height: 56px !important;
  justify-content: center !important;
}

/* ---------- 售罄卡片：折扣元素转灰 ---------- */
.shopping-item.is-sold-out .bx-disc-badge {
  background: #c2c8d2 !important;
  box-shadow: none !important;
}

.shopping-item.is-sold-out .bx-disc-save {
  background: #f2f4f7 !important;
  border-color: #e5e9ef !important;
  color: #9aa3b0 !important;
}

/* ---------- 移动端 ---------- */
@media screen and (max-width: 750px) {
  .shopping-item .bx-price-frame {
    padding: 11px 12px 10px !important;
    gap: 5px !important;
  }
  .shopping-item .bx-price-int {
    font-size: 22px !important;
  }
  .shopping-item .bx-price-line {
    gap: 0 !important;
  }
  .shopping-item .bx-price-divider {
    margin: 0 6px !important;
  }
  .shopping-item .bx-disc-row {
    font-size: 11px !important;
    gap: 4px !important;
    padding-top: 6px !important;
  }
  .shopping-item .bx-disc-save {
    font-size: 11px !important;
    padding: 1px 7px !important;
  }
  .shopping-item .bx-disc-badge {
    top: -8px !important;
    right: 8px !important;
    font-size: 11px !important;
  }
}