/* 产品徽章样式（与彩色按钮风格统一） */
/* 基础徽章样式 - 对齐原按钮的视觉风格 */
.product-badge {
  display: inline-block; /* 行内块级，支持宽高和边距 */
  padding: 5px 10px;     /* 与按钮一致的内边距 */
  border-radius: 20px;    /* 圆角，和按钮统一 */
  font-size: 16px;       /* 字体大小匹配 */
  font-weight: bold;     /* 移除重复的 font-weight（原500+bold，保留bold更清晰） */
  color: #fff;           /* 白色文字，保证彩色背景下清晰 */
  cursor: default;       /* 鼠标样式（非链接则用default） */
  transition: background-color 0.2s, transform 0.2s; /* 过渡效果和按钮一致 */
  border: none;          /* 去掉默认边框 */
  line-height: 1.5rem;
  float: right;
}

.product-badge span {
  font-size: 12px;
  opacity: 0.8;
}

span a:hover {
	color: #1871b1;
	text-decoration: none;
}

/* 多种彩色样式（和之前按钮配色保持统一） */
.product-badge.red {
  background-color: #e53e3e; /* 红色 - 匹配btn-red */
}
.product-badge.blue {
  background-color: #3182ce; /* 蓝色 - 匹配btn-blue */
}
.product-badge.green {
  background-color: #38a169; /* 绿色 - 匹配btn-green */
}
.product-badge.purple {
  background-color: #805ad5; /* 紫色 - 匹配btn-purple */
}
.product-badge.orange {
  background-color: #ed8936; /* 橙色 - 匹配btn-orange */
}

/* 悬停效果：加深对应颜色（和按钮交互逻辑一致） */
.product-badge.red:hover {
  background-color: #c53030;
}
.product-badge.blue:hover {
  background-color: #2b6cb0;
}
.product-badge.green:hover {
  background-color: #2f855a;
}
.product-badge.purple:hover {
  background-color: #6b46c1;
}
.product-badge.orange:hover {
  background-color: #dd6b20;
}

/* 点击/激活效果：轻微缩小（和按钮一致） */
.product-badge:active {
  /* 合并选择器，减少代码冗余（所有颜色的激活效果一致） */
  transform: scale(0.98);
}

/* ========== 优化后的隐藏逻辑（核心：覆盖空/仅空格/含空格span的场景） ========== */
/* 1. 完全空的徽章隐藏（:empty 匹配无任何内容的元素） */
.product-badge:empty {
  display: none;
}

/* 2. 仅包含空白字符的徽章隐藏（解决:empty无法匹配空格的问题，兼容现代浏览器） */
/* 利用 :has() 伪类匹配：徽章内只有span，且span仅含空白（空格/换行/制表符） */
@supports selector(:has(*)) {
  /* 场景1：徽章的唯一子元素是span，且span内容仅为空白 */
  .product-badge:has(> span:only-child):not(:has(> span:not(:empty))) {
    display: none;
  }
  /* 场景2：徽章内直接是空白，且没有其他子元素（补充覆盖） */
  .product-badge:not(:has(*)):where(:blank) {
    display: none;
  }
}

/* 3. 兼容旧浏览器的方案（可选：通过自定义属性/类名，后端/前端配合） */
/* 若需兼容Chrome 105以下、Firefox 121以下，可添加此逻辑 */
.product-badge[data-is-blank="true"],
.product-badge.blank-content {
  display: none;
}

/* 可选：如果徽章需要作为链接使用的样式（扩展场景） */
.product-badge.link {
  cursor: pointer;
  text-decoration: none;
}
/* 注：link的激活效果已被.product-badge:active覆盖，无需重复定义 */