/* 产品价格组件样式 - 根据 Figma 设计 */

.product-price {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline; /* 基线对齐 */
}

/* 当前价格（促销价） */
.product-price__item {
  font-size: 42px; /* 主要数字大小 */
  font-weight: 700; /* Bold */
  /* 默认使用主题色（无折扣时） */
  color: #c68635;
  line-height: 1; /* 紧凑行高 */
}

/* 有折扣时使用折扣色，并保持在一行 */
.product-price.has-discount {
  flex-wrap: nowrap;
}

.product-price.has-discount .product-price__item {
  color: #fa3e3e; /* 红色 */
}

/* 货币符号样式 - 由 JS 动态添加 */
.product-price__item .currency-symbol {
  font-size: 34px; /* $ 符号较小 */
  font-weight: 700; /* Bold */
  /* 默认使用主题色（无折扣时） */
  color: #c68635;
}

/* 有折扣时使用折扣色 */
.product-price.has-discount .product-price__item .currency-symbol {
  color: #fa3e3e;
}

/* 价格数字 - 由 JS 动态添加 */
.product-price__item .price-amount {
  font-size: 42px;
  font-weight: 700; /* Bold */
  /* 默认使用主题色（无折扣时） */
  color: #c68635;
}

/* 有折扣时使用折扣色 */
.product-price.has-discount .product-price__item .price-amount {
  color: #fa3e3e;
}

/* 原价（对比价格） */
.product-price__item--compare {
  font-size: 24px;
  font-weight: 400; /* Regular */
  line-height: 1;
  color: #999; /* 灰色 */
  text-decoration: line-through;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

/* 折扣标签 */
.product-price__discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px; /* 调整内边距 */
  font-size: 16px; /* 稍微调大 */
  font-weight: 400; /* Regular */
  line-height: 1;
  color: #fa3e3e; /* 红色文字 */
  background-color: transparent; /* 透明背景 */
  border: 1px solid #fa3e3e; /* 红色边框 */
  border-radius: 4px;
  white-space: nowrap;
}

/* 响应式：移动端 */
@media (max-width: 768px) {
  .product-price__item {
    font-size: 32px;
  }

  .product-price__item .currency-symbol {
    font-size: 26px;
  }

  .product-price__item .price-amount {
    font-size: 24px;
  }

  .product-price__item--compare {
    font-size: 18px;
    margin-top: 8px;
  }

  .product-price__discount-badge {
    font-size: 14px;
    padding: 2px 6px;
    margin-top: 8px;
  }

  .product-price {
    gap: 8px;
    align-items: center;
  }
}