/**
 * ================================================
 * 法律提示：本程序/代码仅限合法用途使用，您可以修改自用，请保留版权
 * ================================================
 * 使用限制：禁止用于非法用途，作者不承担任何使用责任
 * ================================================
 * Copy right 2026 网博士网络工作室， 保留所有权利。
 * ================================================
 * 官方网址: www.网博士.com   联系：QQ: 570830288
 * ================================================
 */
/* 店铺头 */
.store-hd{display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:14px;
          background:#fff;border:1px solid var(--line,#E7ECF0);border-radius:12px;}
.store-hd .sh-face{width:64px;height:64px;flex:0 0 64px;border-radius:50%;overflow:hidden;
                   background:#ffffff;}
.store-hd .sh-face img{width:100%;height:100%;object-fit:cover;}
.store-hd .sh-txt{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
                  color:#fff;font-size:26px;font-weight:600;}
.store-hd .sh-main{flex:1;min-width:0;}
/* 店名 + 后面的小标排一行：名字自己省略号，小标不参与省略也不会被挤掉 */
.store-hd .sh-nm{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
                 font-size:17px;font-weight:600;color:#22292F;}
.store-hd .sh-nm .nm-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.store-hd .sh-desc{margin-top:4px;font-size:13px;color:var(--muted,#8A97A3);
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.store-hd .sh-tag{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:10px;
                  font-size:11.5px;font-weight:400;vertical-align:2px;white-space:nowrap;
                  background:rgba(30,111,140,.10);color:var(--c1,#1E6F8C);}
.store-hd .sh-tag .ico-svg{width:12px;height:12px;flex:0 0 12px;}
.store-hd .sh-tag.sh-vfy{background:rgba(184,134,43,.13);color:var(--warn,#B8862B);}
.store-hd .sh-tag.sh-dep{background:rgba(46,125,91,.10);color:var(--ok,#2E7D5B);}
.store-hd .sh-stat{margin-top:6px;font-size:12.5px;color:var(--muted,#8A97A3);}
.store-hd .sh-stat span{margin-right:14px;}
.store-hd .sh-stat b{color:#22292F;font-weight:600;}
.store-hd .sh-side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
/* 复制链接 + 联系TA + 二维码：跟商品详情页标题右边那排一个排法 */
.store-hd .sh-act{display:flex;align-items:flex-start;gap:8px;}
.store-hd .sh-kf{flex-shrink:0;display:flex;flex-direction:column;gap:6px;}
/* 「联系TA」按钮 + 它的小弹窗：样式整个照搬商品详情页那颗（.gd-act-btn.ds-like /
   .gd-contact…），那边是写在 goods_detail.php 页面里的，这里要自己带一份 */
.gd-act-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;
            height:30px;padding:0 12px;border-radius:15px;font-size:13px;line-height:1;cursor:pointer;
            border:1px solid var(--line,#E7ECF0);background:#fff;color:#5A6A76;
            text-decoration:none;transition:all .16s;}
.gd-act-btn > i{font-size:14px;line-height:1;}
/*
 * 「联系TA」的字号要单独加权重，不然会被拉回继承值、比左边「复制链接」大一号：
 *   home-refresh.css 里有 .fk-page button{font-size:inherit}（权重 0,1,1），
 *   比这里的 .gd-act-btn（0,1,0）高，font-size:13px 会被它盖掉，
 *   结果跟着父级继承成 15px；而复制链接那颗 .dshare .ds-btn 是（0,2,0），稳稳的 13px。
 * 所以这里用 .gd-act-btn.ds-like（0,2,0）把整套外观再写一遍，跟商品详情页那颗一致。
 */
.gd-act-btn.ds-like{height:30px;padding:0 12px;border-radius:15px;font-size:13px;line-height:1;
                    background:#fff;color:#5A6A76;border-color:var(--line,#E7ECF0);}
.gd-act-btn.ds-like:hover{color:var(--ok,#2E7D5B);border-color:var(--ok,#2E7D5B);}
/* 手机端（≤767px）：share-bar.css 里复制链接那颗（.dshare .ds-btn）会缩成 28px / 12.5px，
   「联系TA」得跟着一起缩，不然并排时它就比左边那颗高一点、字大一号。
   选择器同样要带 .ds-like 提权，理由同上。 */
@media (max-width:767px){
  .gd-act-btn.ds-like{height:28px;padding:0 10px;font-size:12.5px;}
}
/* 注意 z-index 只能加在弹窗上、不能加在 .gd-contact 上——父级一旦成层，
   弹窗再高的 z-index 也会被同级的其他浮层压住。
   层级 160 是这么定的：
     往下要压过吸顶的排序栏 / 本店分类栏（.sort-bar 是 sticky + z-index:150），
       原来 95 就吃亏在这儿——弹窗明明朝下挂着，却被下面那两排 Tab 盖住半截；
     往上要让位给弹层 .modal(900)、回到顶部(300)、轻提示 .toast(9999)。
   顶栏 .fk-header 只有 100，比 160 低，所以开了弹窗后一滚动它会压在顶栏上面，
   这件事交给脚本兜：页面一滚就把弹窗收起来（见下面 contactPop 那段 JS）。 */
.gd-contact{position:relative;flex-shrink:0;display:flex;}
/* 让联系TA按钮在 .gd-contact 里以 flex item 渲染，避免某些浏览器在 inline + baseline 布局里
   出现 1px 的高低差（左边复制链接那层 .dshare 早就是 flex 容器，它那颗 button 没有这问题）。 */
.gd-contact .gd-act-btn{vertical-align:top;}
.gd-contact-pop{position:absolute;top:calc(100% + 8px);right:0;left:auto;z-index:160;width:226px;
                padding:10px;border-radius:10px;background:#fff;
                border:1px solid var(--line,#E7ECF0);box-shadow:0 10px 30px rgba(20,40,60,.14);}
/* 右上角那个小尖角 */
.gd-contact-pop::before{content:"";position:absolute;top:-5px;right:22px;left:auto;width:9px;height:9px;
                        background:#fff;border-left:1px solid var(--line,#E7ECF0);
                        border-top:1px solid var(--line,#E7ECF0);transform:rotate(45deg);}
.gdc-t{margin-bottom:6px;padding-left:8px;font-size:12.5px;color:var(--muted,#8A97A3);}
.gdc-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;
         font-size:13.5px;cursor:pointer;transition:background .15s;}
.gdc-row:hover,.gdc-row:focus-visible{background:#F5F8FA;outline:none;}
.gdc-row .lab{flex:none;padding:1px 5px;border-radius:3px;font-size:11.5px;
              background:rgba(30,111,140,.1);color:var(--c1,#1E6F8C);}
.gdc-row .val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#22292F;}
.gdc-row .cp{flex:none;font-size:12px;color:var(--c1,#1E6F8C);}
/* 自定义客服填的是「文字|链接」时那一行是 <a>，样式跟可复制的纯文本行对齐 */
.gdc-row a.val{color:var(--c1,#1E6F8C);text-decoration:none;}
.gdc-row a.val:hover{text-decoration:underline;}
/* 二维码气泡从店铺头右上角往下挂，正好压在店铺公告右半边。
   电脑端给公告右边让出 148px（气泡 126 宽 + 一点余量），把码的位置空出来；
   手机端码本来就不显示（.ds-qrwrap 在 ≤767px 隐藏），公告恢复通栏。 */
@media (min-width:768px){
  .wrap > .notice-bar.sh-notice{max-width:calc(100% - 148px);}
}
/* 店铺公告开了「滚动」时：正文压成一行，从右往左循环滚动（跑马灯），
   左边的喇叭像在广播（喇叭体轻微起伏 + 两道声波依次明暗扩散）。
   结构跟用户中心那条站点公告一样，滚动由 ../assets/js/user-notice-roll.js
   量好宽度后加 .is-scroll 启动；脚本没跑就静止显示，公告照常看得见，只是不滚。 */
.sh-notice-roll .sh-notice-bd{flex:1;min-width:0;font-size:13.5px;line-height:1.6;}
.sh-notice-roll .u-gg-roll{overflow:hidden;width:100%;}
.sh-notice-roll .u-gg-track{display:flex;width:max-content;will-change:transform;}
.sh-notice-roll .u-gg-txt{flex:0 0 auto;padding-right:56px;}   /* 尾部留白 = 两遍之间的间隔 */
.sh-notice-roll .u-gg-roll.is-scroll .u-gg-txt{white-space:nowrap;}
.sh-notice-roll .u-gg-roll.is-scroll .u-gg-track{
  animation:sh-notice-marquee linear infinite;
  animation-duration:var(--u-gg-dur,20s);                     /* 时长由脚本按文字长度算 */
}
/* 鼠标停上去先停一下，方便看清内容 */
.sh-notice-roll .u-gg-roll.is-scroll:hover .u-gg-track{animation-play-state:paused;}
@keyframes sh-notice-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* 喇叭动效：滚不滚都一样动（喇叭体轻微起伏，两道声波依次明暗扩散） */
.sh-notice .ico .ico-svg{width:19px;height:19px;display:block;}
@keyframes sh-horn{0%,100%{transform:translateY(0);}50%{transform:translateY(-1px);}}
@keyframes sh-horn-wave{0%,100%{opacity:.3;}45%,55%{opacity:1;}}
.sh-notice .ico .gg-horn{transform-box:fill-box;transform-origin:center;
                         animation:sh-horn 1.8s ease-in-out infinite;}
.sh-notice .ico .gg-w1{animation:sh-horn-wave 1.8s ease-in-out infinite;}
.sh-notice .ico .gg-w2{animation:sh-horn-wave 1.8s ease-in-out infinite .45s;}
@media (prefers-reduced-motion:reduce){
  .sh-notice-roll .u-gg-roll.is-scroll .u-gg-track{animation:none;}
  .sh-notice .ico .gg-horn,
  .sh-notice .ico .gg-w1,
  .sh-notice .ico .gg-w2{animation:none;opacity:1;}
}
.store-hd .sh-btn{display:inline-block;padding:5px 12px;border-radius:16px;font-size:12.5px;
                  background:rgba(30,111,140,.08);color:var(--c1,#1E6F8C);
                  text-decoration:none;text-align:center;cursor:pointer;}
.store-hd .sh-btn:hover{background:var(--c1,#1E6F8C);color:#fff;}
@media (max-width:767px){
  .store-hd{flex-wrap:wrap;gap:10px;padding:12px;}
  .store-hd .sh-face{width:52px;height:52px;flex:0 0 52px;}
  .store-hd .sh-main{flex:1 1 60%;}
  .store-hd .sh-side{flex-direction:row;flex-wrap:wrap;align-items:center;width:100%;gap:8px;}
  /* 手机上 QQ/微信不再直接展示，只通过「联系TA」弹窗查看 */
  .store-hd .sh-kf{display:none;}
  /* 复制链接靠左、联系TA靠右（二维码 .dshare 空壳本就要隐藏） */
  .store-hd .sh-act{width:100%;justify-content:space-between;align-items:center;}
  /* 手机上二维码本来就隐藏（.ds-qrwrap display:none），只装它的那层 .dshare 空壳也收掉，
     不然行尾要多占一个 gap */
  .store-hd .sh-act > .dshare:last-child{display:none;}
}
/* 手机（<768px）：让「有货 / 缺货 / 仅剩 x」回到价格那一行，跟金额同一水平线。
   mobile.css 里有一条「多列列表 flex-wrap + .sold 占满一行」的规则，
   本来是怕两列窄卡片挤错位才把库存甩到下一行的，代价就是它掉到了价格下面。
   这里按同样的选择器覆盖回来（页面样式在 mobile.css 之后加载，同权重后来者胜）：
     一行排开 nowrap + align-items:center 让两者在同一水平线上；
     价格不让缩，划线原价可压缩省略，库存标记 margin-left:auto 靠右。 */
@media (max-width:767px){
  .goods-list.gc2 .meta,.goods-list.gc3 .meta,
  .goods-list.gc4 .meta,.goods-list.gc5 .meta,
  .goods-list.gc6 .meta{flex-wrap:nowrap;row-gap:0;align-items:center;gap:6px;}
  .goods-list.gc2 .sold,.goods-list.gc3 .sold,
  .goods-list.gc4 .sold,.goods-list.gc5 .sold,
  .goods-list.gc6 .sold{width:auto;margin-left:auto;text-align:right;}
  /* 卡片再窄也先牺牲划线原价，别把价格数字挤没了 */
  .goods-list .price{flex:0 0 auto;}
  .goods-list .origin{flex:0 1 auto;min-width:0;overflow:hidden;
                      text-overflow:ellipsis;white-space:nowrap;}
  .goods-list .sold{flex:0 0 auto;white-space:nowrap;}
}