/**
 * ================================================
 * 法律提示：本程序/代码仅限合法用途使用，您可以修改自用，请保留版权
 * ================================================
 * 使用限制：禁止用于非法用途，作者不承担任何使用责任
 * ================================================
 * Copy right 2026 网博士网络工作室， 保留所有权利。
 * ================================================
 * 官方网址: www.网博士.com   联系：QQ: 570830288
 * ================================================
 */
/*
 * 商品列表页（shop_list.php）自己那段样式。
 * 原来用 PHP 字符串拼在 $pageHead 里，现在抽成文件。
 */

/* 新头部的 body.fk-page 自带白底，这里换回旧主题的灰底，正文看着跟改造前一样 */
body.fk-page{
  background:var(--bg,#F4F6F8);
  color:var(--text,#1B2733);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

/* 新头部比旧主题那根高，吸顶的排序 Tab 要贴到它下面，不然会压在导航上 */
@media (min-width:1081px){:root{--head-h:84px}}
@media (min-width:768px) and (max-width:1080px){:root{--head-h:82px}}
@media (max-width:767px){:root{--head-h:56px}}

/* 内容宽度跟首页 / 头部对齐（首页 .fk-shell 桌面是 1320） */
@media (min-width:1081px){
  .wrap{width:min(1320px,calc(100% - 72px));padding-left:0;padding-right:0}
}

/* 排序条右侧那个搜索框：样式照抄店铺页 /store/x.html 的 .store-search，
   一排胶囊输入框 + 嵌在右侧的圆形放大镜按钮。
   原来靠 .tail 的 margin-left:auto 把件数顶到右边，件数去掉了，
   这个 auto 挪到搜索框上，搜索框照样贴着排序条右侧 */
.sort-bar .sort-tabs{display:flex;align-items:center;min-width:0;}
.sort-bar .shop-search{margin-left:auto;display:flex;align-items:center;flex:0 0 auto;padding-right:6px;}
.sort-bar .shop-search-input{position:relative;display:flex;align-items:center;}
.sort-bar .shop-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 .shop-search-input input::placeholder{color:var(--muted,#8A97A3);}
.sort-bar .shop-search-input input:focus{border-color:var(--c1,#1E6F8C);background:#fff;}
.sort-bar .shop-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 .shop-search-input button:hover{color:var(--c1,#1E6F8C);background:var(--c1-soft,#F2F7FD);}

/* 手机端：mobile.css 把整条 .sort-bar 变成了横向滚动的一行，搜索框排在
   四个 Tab 后面就被滚到屏幕外，等于没有。这里改成上下两行——
   搜索框在筛选 Tab 上面（order:1），Tab 在下面（order:2），
   横向滚动只给 Tab 那层，搜索框独占一行、输入框拉满宽度，分隔线画在它下边。
   本文件在 mobile.css 之后加载，同权重后来者胜，压得住它那条规则。 */
@media (max-width:767px){
  .sort-bar{display:flex;flex-direction:column;align-items:stretch;overflow:visible;}
  .sort-bar .sort-tabs{order:2;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .sort-bar .sort-tabs::-webkit-scrollbar{display:none;}
  .sort-bar .shop-search{order:1;margin-left:0;padding:8px 12px;
    border-bottom:1px solid var(--line,#E1E7EC);}
  .sort-bar .shop-search-input{flex:1;}
  .sort-bar .shop-search-input input{width:100%;height:34px;}
}