/**
 * ================================================
 * 法律提示：本程序/代码仅限合法用途使用，您可以修改自用，请保留版权
 * ================================================
 * 使用限制：禁止用于非法用途，作者不承担任何使用责任
 * ================================================
 * Copy right 2026 网博士网络工作室， 保留所有权利。
 * ================================================
 * 官方网址: www.网博士.com   联系：QQ: 570830288
 * ================================================
 */
/* 本店分类那排：小胶囊卡片 = 分类封面 + 名称 + 件数气泡。
   两级选择器 .sort-bar.cate-bar 是为了压住 mobile.css 里的 .sort-bar{margin:0 -12px …} */
.sort-bar.cate-bar{position:relative;top:auto;flex-wrap:wrap;
padding:9px 8px;margin-bottom:12px;gap:6px 8px;}
.sort-bar.cate-bar a{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 5px;border-radius:999px;font-size:14px;line-height:1.4;
  background:#fff;border:1px solid var(--line,#E1E7EC);
  color:var(--text-2,#5A6B79);white-space:nowrap;
  transition:border-color .16s,background-color .16s,box-shadow .16s,transform .16s;
}
.sort-bar.cate-bar a:hover{
  border-color:var(--c1,#1E6F8C);color:var(--c1,#1E6F8C);
  background:var(--c1-soft,#F2F7FD);transform:translateY(-1px);
}
.sort-bar.cate-bar a.on{
  background:var(--c1,#1E6F8C);border-color:var(--c1,#1E6F8C);color:#fff;font-weight:500;
  box-shadow:0 4px 12px rgba(30,111,140,.22);
}
.sort-bar.cate-bar a.on:hover{color:#fff;background:var(--c1,#1E6F8C);transform:none;}
.sort-bar.cate-bar a.on::after{display:none;}
.sort-bar.cate-bar .tail{display:none;}

/* 封面图框：没图的那个位置放通用图标，整排高度才整齐 */
.sort-bar.cate-bar a .cv{
  flex:0 0 26px;width:26px;height:26px;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--c1-soft,#F2F7FD);color:var(--c1,#1E6F8C);
}
.sort-bar.cate-bar a .cv img{width:100%;height:100%;object-fit:cover;display:block;}
.sort-bar.cate-bar a .cv svg{width:15px;height:15px;}
.sort-bar.cate-bar a.on .cv{background:rgba(255,255,255,.24);color:#fff;}

/* 件数小气泡 */
.sort-bar.cate-bar a .num{
  font-size:12px;line-height:17px;padding:0 6px;border-radius:9px;
  background:rgba(26,42,56,.07);color:var(--muted,#8A97A3);
}
.sort-bar.cate-bar a.on .num{background:rgba(255,255,255,.22);color:#fff;}
.sort-bar.cate-bar a .nm{overflow:hidden;text-overflow:ellipsis;max-width:10em;}

            /* 右侧搜索：整组靠右；搜索图标按钮嵌在输入框内靠右 */
.sort-bar.cate-bar .store-search{margin-left:auto;display:flex;align-items:center;flex:0 0 auto;}
.sort-bar.cate-bar .store-search-input{position:relative;display:flex;align-items:center;}
.sort-bar.cate-bar .store-search-input input{width:318px;height:32px;padding:0 34px 0 12px;
border:1px solid var(--line,#E1E7EC);border-radius:16px;font-size:13.5px;
color:var(--text,#1B2733);background:#EBF0F5;outline:none;
transition:border-color .16s,background-color .16s;}
.sort-bar.cate-bar .store-search-input input:focus{border-color:var(--c1,#1E6F8C);background:#fff;}
.sort-bar.cate-bar .store-search-input button{position:absolute;right:5px;
display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;
border:0;border-radius:50%;background:transparent;color:var(--muted,#8A97A3);cursor:pointer;}
.sort-bar.cate-bar .store-search-input button:hover{color:var(--c1,#1E6F8C);background:var(--c1-soft,#F2F7FD);}
@media (max-width:767px){.sort-bar.cate-bar{margin:0 0 12px;padding:9px 10px;
border-radius:var(--radius,8px);border-left:1px solid var(--line,#E7ECF0);
border-right:1px solid var(--line,#E7ECF0);}
.sort-bar.cate-bar a{flex:0 0 auto;padding:4px 11px 4px 4px;font-size:13.5px;gap:6px;}
.sort-bar.cate-bar a .cv{flex-basis:24px;width:24px;height:24px;border-radius:7px;}
.sort-bar.cate-bar a .cv svg{width:14px;height:14px;}
           /* 手机端搜索另起一行占满整行，输入框自适应拉伸 */
.sort-bar.cate-bar .store-search{flex:1 1 100%;margin-left:0;}
.sort-bar.cate-bar .store-search-input{flex:1;}
.sort-bar.cate-bar .store-search-input input{width:100%;}}