/**
 * 两级联动分类 - 补充样式 v4
 * 添加到主题 style.css 末尾
 */

/* ===========================================
   1. 排序下拉固定右上角
   =========================================== */
#WB_filterPanel.ctrl-panel-list {
  position: relative;
}

/* 排序下拉钉在分类行右侧 */
/*#WB_filterPanel .wb-dropdown.sorting-items {*/
/*  position: absolute !important;*/
/*  right: 0;*/
/*  top: 0;*/
/*  z-index: 10;*/
/*}*/

/* 父分类标签行右侧留出空间，避免与排序下拉重叠 */
.filter-panel > .filter-items:first-child > dd > ul:first-child {
  padding-right: 160px;
}

/* ===========================================
   2. 子分类行
   =========================================== */

/* 子分类容器：浅灰背景 + 圆角 */
.sub-cat-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  background: #f5f7fa;
  border-radius: 6px;
  padding: 8px 14px;
  margin-top: 10px;
  animation: wbSubIn 0.2s ease-out;
}

@keyframes wbSubIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 面包屑标签 */
.sub-cat-label {
  font-size: 13px;
  color: #999;
  white-space: nowrap;
  line-height: 28px;
  flex-shrink: 0;
}

.sub-cat-sep {
  margin: 0 6px 0 4px;
  font-size: 12px;
  color: #ccc;
}

/* 子分类的 ul：横排 */
.sub-cat-row > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 子分类标签：白底 + 边框 + 小号 */
.sub-cat-row .cat-item {
  list-style: none !important;
}

.sub-cat-row .cat-item a {
  display: inline-block !important;
  padding: 3px 14px !important;
  font-size: 13px !important;
  line-height: 22px !important;
  color: #555 !important;
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.sub-cat-row .cat-item a:hover {
  color: #1a73e8 !important;
  border-color: #1a73e8 !important;
}

/* 子分类选中态 */
.sub-cat-row .cat-item.current > a,
.sub-cat-row .cat-item.current-cat > a {
  color: #fff !important;
  background: #1a73e8 !important;
  border-color: #1a73e8 !important;
}

/* ===========================================
   3. 响应式
   =========================================== */
@media (max-width: 768px) {
  .sub-cat-row {
    padding: 6px 10px;
    margin-top: 8px;
  }

  .sub-cat-label {
    margin-bottom: 4px;
  }

  #WB_filterPanel > .wb-dropdown.sorting-items,
  #WB_filterPanel > .list-sorting {
    position: relative !important;
    top: auto;
    right: auto;
  }
}