/* 面包屑容器 */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;         /* 移动端折行 */
  align-items: center;     /* 垂直居中 */
  padding: 0.5rem 1rem;
  margin: 0;
  list-style: none;        /* 去掉默认列表样式 */
  background-color: #f8f5ee;
  border-radius: 0.25rem;
  font-family: system-ui, -apple-system, sans-serif;
}

/* 在面包屑最前面添加位置图标（第一排左侧） */
.breadcrumb::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.4em;
  background-color: currentColor;   /* 图标颜色跟随文字 */
  
  /* SVG 定位图标 (map pin) — 使用 mask 实现可变色 */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  
  /* 备选：若浏览器不支持 mask，可用 background 纯色降级（此处不处理） */
}

/* 面包屑列表项 */
.breadcrumb li {
  display: inline-flex;
  align-items: center;
}

/* 分隔符（使用 `>` 并自动插入在非第一项之前） */
.breadcrumb li:not(:first-child)::before {
  content: ">";
  margin: 0 0.5em;
  color: #6c757d;
  font-weight: normal;
}

/* 链接样式 */
.breadcrumb a {
  color: #616161;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* 当前项（无链接） */

.breadcrumb .active {
  color: #cd4910;
  pointer-events: none;
}