/**
 * ================================================
 * 法律提示：本程序/代码仅限合法用途使用，您可以修改自用，请保留版权
 * ================================================
 * 使用限制：禁止用于非法用途，作者不承担任何使用责任
 * ================================================
 * 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 是 200，比 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:240px;
                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);}
/*
 * 手机端：这个下拉平时贴着按钮右对齐往下挂，窄屏上按钮快顶到屏幕边，
 * 弹窗往左伸容易被挤出去。小屏改成相对屏幕居中，尖角也就用不着了。
 */
@media (max-width:767px){
  .gd-contact-pop{position:fixed;top:50%;left:50%;right:auto;max-width:calc(100vw - 32px);
                  transform:translate(-50%,-50%);}
  .gd-contact-pop::before{display:none;}
}

/*
 * 「推广链接」按钮 + 往下的小弹窗：跟商品详情页那颗是同一套
 * （商品页那份写在 goods_detail.php 里，这里照搬一份；脚本也是共用
 *   ../assets/js/goods-promo.js —— 它认 gdPromoBtn / gdPromoPop 这一对 id）。
 * 只有分销员、且这家店参与分销时页面才有这颗按钮。
 * 层级 160 跟上面 .gd-contact-pop 取同一个值（理由见那边那段注释）。
 */
.gd-promo{position:relative;flex-shrink:0;display:flex;}
.gd-promo-pop{position:absolute;top:calc(100% + 8px);right:0;left:auto;z-index:160;width:210px;
              padding:10px;border-radius:10px;background:#fff;
              border:1px solid var(--line,#E7ECF0);box-shadow:0 10px 30px rgba(20,40,60,.14);}
/* 右上角那个小尖角 */
.gd-promo-pop::before{content:"";position:absolute;top:-5px;right:24px;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);}
/* 手机端同样改成相对屏幕居中（理由跟上面 .gd-contact-pop 一样） */
@media (max-width:767px){
  .gd-promo-pop{position:fixed;top:50%;left:50%;right:auto;max-width:calc(100vw - 32px);
                transform:translate(-50%,-50%);}
  .gd-promo-pop::before{display:none;}
}
/* 能拿多少：比例用价格色标出来，下面压条浅线跟下面的动作分开 */
.gdp-earn{display:flex;align-items:baseline;gap:4px;margin:0 0 9px;padding:2px 8px 9px;
          font-size:12.5px;color:var(--muted,#8A97A3);
          border-bottom:1px solid var(--line,#E7ECF0);}
.gdp-earn b{font-size:16px;font-weight:700;color:var(--c-price,#D93A2B);}
/* 「图标块 + 文字」的整条按钮，复制走蓝 */
.gdp-row{display:flex;align-items:center;gap:9px;width:100%;margin-top:6px;padding:8px 9px;
         border:1px solid transparent;border-radius:9px;background:#F6F8FA;
         font-size:13.5px;color:#22292F;text-align:left;cursor:pointer;transition:all .16s;}
.gdp-row .gdp-ico{flex:none;display:flex;align-items:center;justify-content:center;
                  width:28px;height:28px;border-radius:8px;}
.gdp-row .gdp-ico .ico-svg{width:15px;height:15px;}
.gdp-row .gdp-txt{flex:1;min-width:0;}
.gdp-row.gdp-link .gdp-ico{color:#2B6CFF;background:rgba(43,108,255,.11);}
.gdp-row.gdp-link:hover{border-color:rgba(43,108,255,.35);background:rgba(43,108,255,.08);color:#2B6CFF;}
.gdp-row:focus-visible{outline:none;border-color:var(--c1,#1E6F8C);}
/*
 * 按钮本身跟「联系TA」一个样（白底灰字灰边），鼠标移上去才上主色。
 * 带 .ds-promo 提权，理由跟上面那条 .gd-act-btn.ds-like 一样：
 * home-refresh.css 的 .fk-page button{font-size:inherit} 权重比 .gd-act-btn 高。
 */
.gd-act-btn.ds-promo{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-promo > .ico-svg{width:14px;height:14px;}
.gd-act-btn.ds-promo:hover{color:var(--c1,#1E6F8C);border-color:var(--c1,#1E6F8C);
                           background:rgba(30,111,140,.06);}
@media (max-width:767px){
  .gd-act-btn.ds-promo{height:28px;padding:0 10px;font-size:12.5px;}
}
/* 海报那颗走紫色，跟上面蓝色的「复制推广链接」区分开（商品详情页同款配色） */
.gdp-row.gdp-img .gdp-ico{color:#7A5AF8;background:rgba(122,90,248,.12);}
.gdp-row.gdp-img:hover{border-color:rgba(122,90,248,.38);background:rgba(122,90,248,.08);color:#7A5AF8;}

/*
 * 海报弹窗：照商品详情页那份（goods-detail.css 里 .modal.modal-poster）搬过来 ——
 * 通用盒子 440px 摆一张图 + 一个下载按钮太空，收到 300px，只留右上角那个 ×。
 */
.modal.modal-poster .modal-box{width:300px;max-width:88vw;}
.modal.modal-poster .modal-bd{padding:10px 10px 14px;}
.modal.modal-poster .modal-hd-x{padding:6px 10px;border-bottom:0;justify-content:flex-end;}
.modal.modal-poster .modal-hd-x .x{margin-left:0;font-size:18px;}
.modal.modal-poster .pp-img{display:block;width:100%;border-radius:6px;}
.modal.modal-poster .pp-dl{display:block;margin-top:12px;padding:9px;border-radius:8px;
                           text-align:center;font-size:14px;color:#fff;text-decoration:none;
                           background:var(--c1,#1E6F8C);transition:opacity .16s;}
.modal.modal-poster .pp-dl:hover{opacity:.88;}
.modal.modal-poster .pp-tip{margin-top:8px;text-align:center;font-size:12px;color:var(--muted,#8A97A3);}
/* 手机端 mobile.css 会把弹窗改成贴着屏幕底边的通栏抽屉，海报就一张窄图用不着那套 */
@media (max-width:767px){
  .modal.modal-poster{padding:16px;align-items:center;justify-content:center;}
  .modal.modal-poster .modal-box{max-width:calc(100vw - 32px);}
}

/* 标题：下面压一条浅分隔线，跟下面那几路联系方式分开 */
.gdc-t{margin-bottom:9px;padding:0 8px 9px;font-size:12.5px;color:var(--muted,#8A97A3);
       border-bottom:1px solid var(--line,#E7ECF0);}
/*
 * 每一行做成「图标块 + 名字/号码两行 + 右边复制」，样式整份照搬商品详情页那份
 * （goods-detail.css），那边改了这里也要跟着改。
 * 图标和配色按哪路联系方式分，用哪个由 df_contact_look() 决定（includes/common.php）。
 */
.gdc-row{display:flex;align-items:center;gap:9px;margin-top:6px;padding:8px 9px;
         border:1px solid transparent;border-radius:9px;background:#F6F8FA;
         font-size:13.5px;cursor:pointer;transition:all .16s;}
.gdc-row .gdc-ico{flex:none;display:flex;align-items:center;justify-content:center;
                  width:28px;height:28px;border-radius:8px;
                  color:var(--c1,#1E6F8C);background:rgba(30,111,140,.11);}
.gdc-row .gdc-ico .ico-svg{width:15px;height:15px;}
.gdc-row .gdc-main{flex:1;min-width:0;}
.gdc-row .lab{display:block;margin-bottom:1px;font-size:11.5px;color:var(--muted,#8A97A3);}
.gdc-row .val{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#22292F;}
.gdc-row .cp{flex:none;font-size:12px;color:var(--c1,#1E6F8C);}
.gdc-row a.val{color:#22292F;text-decoration:none;}
.gdc-row.gdc-qq .gdc-ico{color:#2B6CFF;background:rgba(43,108,255,.11);}
.gdc-row.gdc-wx .gdc-ico{color:#2BAE5A;background:rgba(43,174,90,.12);}
.gdc-row.gdc-tel .gdc-ico{color:#F0803C;background:rgba(240,128,60,.13);}
.gdc-row.gdc-mail .gdc-ico{color:#1E6F8C;background:rgba(30,111,140,.11);}
.gdc-row.gdc-link .gdc-ico{color:#7A5AF8;background:rgba(122,90,248,.12);}
/* QQ / 微信用的是品牌图（自带颜色），图标块换白底衬托，别拿淡色底去叠品牌色 */
.gdc-row.gdc-qq .gdc-ico,.gdc-row.gdc-wx .gdc-ico{background:#fff;box-shadow:0 1px 2px rgba(20,40,60,.1);}
.gdc-row .gdc-ico img.gdc-brand{width:17px;height:17px;display:block;}
.gdc-row:hover,.gdc-row:focus-visible{outline:none;}
.gdc-row:hover .cp,.gdc-row:hover a.val{color:inherit;}
.gdc-row.gdc-qq:hover,.gdc-row.gdc-qq:focus-visible{color:#2B6CFF;background:rgba(43,108,255,.08);
                                                    border-color:rgba(43,108,255,.35);}
.gdc-row.gdc-wx:hover,.gdc-row.gdc-wx:focus-visible{color:#2BAE5A;background:rgba(43,174,90,.09);
                                                    border-color:rgba(43,174,90,.35);}
.gdc-row.gdc-tel:hover,.gdc-row.gdc-tel:focus-visible{color:#F0803C;background:rgba(240,128,60,.1);
                                                      border-color:rgba(240,128,60,.4);}
.gdc-row.gdc-link:hover,.gdc-row.gdc-link:focus-visible{color:#7A5AF8;background:rgba(122,90,248,.08);
                                                        border-color:rgba(122,90,248,.38);}
.gdc-row.gdc-mail:hover,.gdc-row.gdc-mail:focus-visible,
.gdc-row.gdc-kf:hover,.gdc-row.gdc-kf:focus-visible{color:var(--c1,#1E6F8C);
                                                    background:rgba(30,111,140,.08);
                                                    border-color:rgba(30,111,140,.35);}
/* 二维码气泡从店铺头右上角往下挂，正好压在店铺公告右半边。
   电脑端给公告右边让出 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;}
}