/**
 * ================================================
 * 法律提示：本程序/代码仅限合法用途使用，您可以修改自用，请保留版权
 * ================================================
 * 使用限制：禁止用于非法用途，作者不承担任何使用责任
 * ================================================
 * Copy right 2026 网博士网络工作室， 保留所有权利。
 * ================================================
 * 官方网址: www.网博士.com   联系：QQ: 570830288
 * ================================================
 */
/* 商品规格（SKU）选择 */
.gd-sku{margin-bottom:16px;}
.gd-sku-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;}
.gd-sku-hd .lab{font-size:13px;color:var(--muted,#8A97A3);}
.gd-sku-hd .cur{font-size:14px;font-weight:600;color:#22292F;}
.gd-sku-list{display:flex;flex-wrap:wrap;gap:10px;}
.gd-sku-item{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
             background:#fff;border:1px solid var(--line,#E7ECF0);border-radius:20px;
             cursor:pointer;font-size:13.5px;color:#22292F;transition:all .15s;}
.gd-sku-item:hover{border-color:var(--c1,#1E6F8C);}
.gd-sku-item.on{border-color:var(--c1,#1E6F8C);background:rgba(30,111,140,.08);color:var(--c1,#1E6F8C);}
.gd-sku-item .pr{font-size:12.5px;color:var(--muted,#8A97A3);}
.gd-sku-item.on .pr{color:var(--c1,#1E6F8C);}
@media (max-width:767px){
  .gd-sku-item{padding:7px 14px;font-size:13px;}
}
/* 封面底下一排：联系TA 靠左，进店逛逛靠右。
   按钮改小一号的圆角小方块（原来是 34px 高的胶囊），带一个小字体图标 */
.gd-pic-act{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;}
.gd-act-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;
            height:28px;padding:0 12px;border-radius:8px;font-size:12.5px;cursor:pointer;
            border:1px solid var(--line,#E7ECF0);background:#fff;color:var(--muted,#8A97A3);
            text-decoration:none;transition:all .16s;}
.gd-act-btn > i{font-size:14px;line-height:1;}
.gd-act-btn:hover{border-color:var(--c1,#1E6F8C);color:var(--c1,#1E6F8C);}
/* 封面那排两个按钮（收藏 / 进店逛逛）边框线加深一点，别淡得看不见 */
.gd-pic-act .gd-act-btn,.gd-pic-act .dshare .ds-btn{border-color:#CBD5DD;}
.gd-pic-act .dshare .ds-btn:hover{border-color:var(--c1,#1E6F8C);}
/* 挪到封面那排的「收藏」跟着「进店逛逛」长：小圆角方块（原来那套是 15px 的胶囊） */
.gd-pic-act .dshare .ds-btn{height:28px;padding:0 12px;border-radius:8px;font-size:12.5px;}
.gd-act-btn.solid{background:var(--c1,#1E6F8C);border-color:var(--c1,#1E6F8C);color:#fff;}
.gd-act-btn.solid:hover{background:var(--c2,#2A87A8);border-color:var(--c2,#2A87A8);color:#fff;}
/* 标题那排的「联系TA」跟「复制链接」并排，长相跟复制链接那颗（分享条的 .ds-btn）看齐：
   30px 高、15px 胶囊、13px 灰字，鼠标移上去跟复制链接一样变主色 + 淡主色底。
   原来那套 .solid（主色实心块）在这一排里太跳，就换成这颗 outline 的。 */
.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 > i{font-size:14px;line-height:1;}
/* hover 用绿色（--ok），原来是站点主色 --c1 */
.gd-act-btn.ds-like:hover{color:var(--ok,#2E7D5B);border-color:var(--ok,#2E7D5B);
                          background:rgba(46,125,91,.08);}
/* 「编辑」：只有登录过后台的管理员才由模板输出，长相跟同排的「复制链接」对齐
   （30px 高、15px 胶囊、13px 灰字），hover 走站点主色，跟旁边「联系TA」的绿色区分开 */
.gd-act-btn.ds-edit{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-edit > .ico-svg{width:14px;height:14px;}
.gd-act-btn.ds-edit:hover{color:var(--c1,#1E6F8C);border-color:var(--c1,#1E6F8C);
                          background:rgba(30,111,140,.06);}
/* 手机端（≤767px）：分享条那颗 .ds-btn 会缩成 28px / 12.5px（share-bar.css），
   跟它并排的「联系TA」「编辑」一起缩，两颗才一样高、字一样大 */
@media (max-width:767px){
  .gd-act-btn.ds-like,.gd-act-btn.ds-edit{height:28px;padding:0 10px;font-size:12.5px;}
}
/* 电脑端：应付金额 + 查订单 / 立即购买 并排一行，金额在左、按钮靠右。
   style.css 里这两块是上下两块（.gd-total 有 margin-bottom、.gd-actions 有 margin-top），
   包一层 .gd-buybar 后在这里拉平成一行；手机端不生效（购买条是 fixed 的，各占各的位置）。 */
@media (min-width:768px){
  .gd-buybar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
  .gd-buybar .gd-total{margin-bottom:0;}
  .gd-buybar .gd-actions{margin-top:0;flex:none;gap:10px;}
  /* 售罄时那个按钮自带 .block（width:100%），并排时会把行撑满，这里收回自适应宽 */
  .gd-buybar .gd-actions .btn.block{width:auto;}
}
/* 应付金额：style.css 里是主价红（--c-price）+ 22px + 700 粗体，这里换成
   橙黄 #F5A425 + 细体（400），￥ 用 small 单独缩到 14px（跟 .gd-price 那颗一个做法）。 */
.gd-total b{color:#F5A425;font-weight:400;}
.gd-total b small{font-size:14px;font-weight:400;margin-right:1px;}

/* 「常用邮箱，用来接收卡密和查询订单」这句 placeholder 比输入框正文小一号。
   用 em 是让它跟着输入框自己的字号走，不至于把正文的排版带歪。
   商品页那颗 #buyContact 和「确认订单」弹窗里那颗（data-role="contact"）是同一句文案，
   两边一起改，弹窗里看到的才跟页面上一样大。 */
#buyContact::placeholder,
.paym-input[data-role="contact"]::placeholder{font-size:.9em;}

/*
 * 邮箱输入框只占半栏。留 min-width 兜底：窄屏上 50% 会挤得只剩一点点，
 * 到 180px 就不再往下缩了。
 * 商品自定义输入项（后台「自定义输入项」填的那些，比如充值账号）跟着一起半栏：
 * 它们跟邮箱一样就是填个账号 / 邮箱，通栏 578px 拖得太长，反而不像填东西的地方。
 */
#buyContact,
.gd-row .df-input-field{width:50%;min-width:180px;}
/* 手机(<768px)那栏本身就窄，半栏更不好点，这里恢复通栏 */
@media (max-width:767px){
  #buyContact,
  .gd-row .df-input-field{width:100%;min-width:0;}
}

/* =========================================================================
 * 购买区输入框：矮一点、行与行之间别挤
 *
 * 通用 .input 是 40px 高，摆在这块里偏笨重，这里统一收到 34px。
 * 字号 14px：邮箱、自定义输入项、收货地址（含地址簿下拉）都是 14，
 * 以前是 12.5，太小看不清；提示文字跟着从 12 提到 13。
 * ====================================================================== */
.gd-row .input,
.addr-block .input{height:34px;padding:0 11px;font-size:14px;}
.gd-row .input::placeholder,
.addr-block .input::placeholder{font-size:13px;color:#A9B7C2;}
/* 验证码图片跟着输入框一起收，别一个 34 一个 40 差半截 */
.gd-row .cap-row img{height:34px;}

/* =========================================================================
 * 收货信息
 *
 * .addr-block 那套样式写在 main.css 里，但商品详情页只加载 style.css +
 * goods-detail.css，不加载 main.css —— 所以这块在商品页上等于没有样式：
 * 外框是裸 div、地址簿下拉是原生 select、输入框是通用 .input。
 * 这里给商品页自己补一份，购物车结算那份（main.css）不跟着动。
 * ====================================================================== */
.addr-block{
  margin-top:12px;padding:12px 13px;
  background:#F7FAFC;border:1px solid var(--line);border-radius:8px;
}
.addr-block .ab-hd{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  font-size:13.5px;color:var(--text-2);
}
.addr-block .ab-hd > span:first-child{flex:1;font-weight:600;}
.addr-block .ab-link{font-size:12px;color:var(--c1);}

/*
 * 地址簿下拉：原生 select 的外观（系统箭头、自带的行高）跟这块不是一个调，
 * 抹掉重画 —— 右侧用一张 svg 画下拉箭头，高度跟下面的输入框取齐（34px）。
 */
.addr-block .ab-pick{
  max-width:58%;height:34px;padding:0 28px 0 10px;font-size:14px;line-height:32px;
  border:1px solid var(--line);border-radius:var(--radius-s,6px);color:var(--text-2);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%238A97A3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/11px auto;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  transition:border-color .16s,box-shadow .16s;
}
.addr-block .ab-pick:hover{border-color:#C3D3DE;}
.addr-block .ab-pick:focus{
  border-color:var(--c1);box-shadow:0 0 0 3px rgba(30,111,140,.09);outline:none;
}

/* 姓名 / 手机并排一行，地址框在下面，行与行之间留 10px */
.addr-block .ab-row{display:flex;gap:10px;margin-bottom:10px;}
.addr-block .ab-row .input{flex:1;min-width:0;}
.addr-block textarea.input{
  width:100%;height:58px;min-height:58px;padding:9px 11px;line-height:22px;resize:vertical;
}
/*
 * 空着的地址框：把提示文字那一行撑到跟框一样高，它就落在垂直中间而不是贴着上边缘。
 * 只作用在 ::placeholder 上（不像 :placeholder-shown 那样改输入框自己的行距），
 * 所以一输入内容，提示文字不再渲染，行距自动就是上面那个 20px，不用等浏览器重算。
 */
.addr-block textarea.input::placeholder{line-height:38px;}
.addr-block .ab-tip{margin-top:8px;font-size:12px;color:var(--muted);}

/* 窄屏：姓名 / 手机改成上下两行，行间距靠 gap 撑开，别上下粘一起 */
@media (max-width:520px){
  .addr-block .ab-row{flex-wrap:wrap;}
  .addr-block .ab-row .input{flex:1 1 100%;}
  .addr-block .ab-pick{max-width:100%;}
  .addr-block .ab-hd{flex-wrap:wrap;}
}


/* 封面图 + 底下「联系TA / 进店逛逛」整体套一个浅色细框，鼠标移上去边框加深一点。
   宽度补 22px（左右各 10 内边距 + 1px 边框），图片本身还是 340px 不变。
   手机端封面是通铺到屏幕边的，加框左右会被切掉，所以只在 ≥768px 生效。

   align-self:flex-start —— .goods-detail 是 flex，交叉轴默认 stretch，
   左边这一列会被右侧信息区拉高：右边多一组规格、多一行联系方式，左边的框就跟着长一截。
   flex-start 让它只按自己的内容（封面图 + 按钮那排）算高度，不跟着右边变。
   手机端（<768px）是 block 布局，不存在拉伸，不用管。 */
@media (min-width:768px){
  .gd-pic{width:362px;flex:0 0 362px;padding:10px;background:#fff;
          border:1px solid #D7DEE4;border-radius:var(--radius,12px);
          align-self:flex-start;
          transition:border-color .18s;}
  .gd-pic:hover{border-color:#A9BAC6;}
}
/* 「联系TA」的小弹窗：按钮跟「收藏」对调后挪到标题右侧那排的末尾（最靠右），
   弹窗锚在右下角、往左展开，不会顶出卡片外面。
   外层 padding-top:4px 是为了跟「复制链接」对齐：那颗按钮在 .dshare 里，
   而 .gd-tit .dshare 有 padding-top:4px（见 style.css），这颗是 .gd-tit 的直接
   子元素、跟着 align-items:flex-start 顶到行首，不加这 4px 就会比复制链接高一点点。
   层级说明：外层 .gd-tit-act 整体是 z-index:96 的层叠上下文（见下面该条注释），
   已经高过二维码气泡（90），所以 .gd-contact 本身不加 z-index；弹窗这条 95
   只在 .gd-tit-act 层内跟同层按钮排顺序。96 / 95 都低于顶栏 .fk-header 的 100，
   页面滚动时浮层会被顶栏压住，不会盖住右上角的「用户中心 / 退出 / 登录注册」。 */
.gd-contact{position:relative;flex-shrink:0;padding-top:4px;}
.gd-contact-pop{position:absolute;top:calc(100% + 8px);right:0;left:auto;z-index:95;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;}
@media (max-width:767px){
  /* 手机端封面是通铺到边的，按钮别跟着贴边 */
  .gd-pic-act{margin-top:10px;padding:0 14px;}
}
/* 标题 + 复制链接 / 手机查看 */
.gd-tit{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
/* 商品标题：h1 浏览器默认按正文的 2em 算（正文 15px → 30px），这里显式降下来。
   选择器带上 .gd-info 提高一级特异性：style.css 里还有一条 .gd-info h1{22px}，
   两边特异性一样时谁生效要看加载顺序，写全了就不用赌顺序 */
/* 商品标题：细体（原来跟着 style.css 的 h1,h2,h3,h4{font-weight:600} 是半粗的） */
.gd-info .gd-tit h1{flex:1 1 auto;min-width:0;margin-bottom:0;
                    font-size:18px;font-weight:400;line-height:1.35;}
/* 右侧「复制链接 / 手机查看」原来按 24px 标题配的 4px 下移，标题缩小后跟着收一点 */
.gd-tit .dshare{padding-top:1px;}
/* 「复制链接」+「联系TA」包在 .gd-tit-act 里（见上面的结构注释）：
   电脑端就是标题右边并排的两颗按钮，跟原来一样；
   手机端整层换行独占一行，复制靠左、联系TA靠右。
   position:relative + z-index:96：标题行尾挂着的二维码气泡（.ds-pop，z-index:90）
   顶边正好压在这两颗按钮的底边 1~2px，白卡的大投影还会往上晕染，看起来就像
   按钮被二维码盖住。整层抬到 96——两颗按钮连同「联系TA」弹窗一起高过二维码；
   弹窗的 95 关在这层里面也不会被码压住（早先只给弹窗抬层、父级不能加 z-index
   的顾虑，前提是父级低于 90；现在父级自己就是 96，没有这个问题）。 */
.gd-tit-act{display:flex;align-items:center;gap:14px;flex-shrink:0;position:relative;z-index:96;}
@media (max-width:767px){
  /* 上面那条 .gd-info .gd-tit h1 特异性比这里高一级，所以这里也必须写全，
     否则手机端这条会失效、标题又是 20px 了 */
  .gd-info .gd-tit h1{flex:0 0 100%;font-size:16px;}        /* 标题自己占一行 */
  .gd-tit-act{flex:0 0 100%;justify-content:space-between;} /* 复制左、联系TA右 */
  /* 「编辑」只给电脑端，手机上连它带那个 gap 一起收掉 */
  .gd-tit-act .ds-edit{display:none;}
  /* 二维码在手机上本来就隐藏（.ds-qrwrap display:none），外面这层 .dshare 空壳也收掉，
     不然行尾会多占一个 gap，联系TA 就贴不到最右边 */
  .gd-tit > .dshare{display:none;}
}
/* 简介（notice-bar）原来是通栏的，右上角那颗二维码气泡是绝对定位浮在标题下面的，
   正好压在它右半边。电脑端给简介右边让出 148px（气泡 126 宽 + 一点余量），
   把码的位置空出来；手机端码本来就不显示（.ds-qrwrap 在 ≤767px 隐藏），恢复通栏。 */
@media (min-width:768px){
  .gd-info .notice-bar{max-width:calc(100% - 148px);}
}
@media (max-width:767px){
  .gd-info .notice-bar{max-width:none;}
}
/* 简介：淡蓝底保留，一圈边框线去掉，只留左侧那条 3px 蓝竖线；
   border-radius 给到 5px，竖线上下两头带点弧形（只有左边框时圆角就落在竖线两端）。
   图标也不放了，正文直接排在底色里。
   蓝色仍是会员中心那颗 #2B6CFF；原来是整站通用的黄底 notice-bar（style.css）。 */
.gd-info .notice-bar{
  align-items:flex-start;padding:6px 12px;
  background:#EEF3FF;border:0;border-left:3px solid #2B6CFF;border-radius:5px;
  color:#41525F;font-size:14px;line-height:1.65;
}
.gd-info .notice-bar a{color:#2B6CFF;text-decoration:underline;}