/* [2026-09-01] v36 from Views/Mall/TaoBaoDetails.cshtml inline <style>, moved into 2026814 dir */
body{background:#f5f5f5}
/* [2026-09-01] v16 详情页 hideTabbar 无 .page-bottom 留白：补底部 padding，避免固定操作栏遮住 site-footer */
.phone{background:#f5f5f5;padding-top:0.530rem;padding-bottom:calc(0.680rem + env(safe-area-inset-bottom))}   /* [2026-09-01] v23 底部留白 1.000→0.680：原值大于操作栏实际高度，footer 与操作栏间空隙过大；[2026-09-01] v31 顶栏改 fixed 后补 padding-top 0.530 防内容被盖 */

/* 顶栏 */
/* [2026-09-01] v31 顶栏 sticky→fixed：base.css .phone 的 overflow-x:hidden 会使 sticky 失效（成为滚动容器）；fixed + left/right:0 + margin:auto + max-width:430px 保证宽屏居中 */
.page-bar{position:fixed;top:0;left:0;right:0;margin:0 auto;max-width:430px;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0.10rem 0.14rem;background:#fff;border-bottom:0.005rem solid #eee}
.pb-back{width:0.32rem;height:0.32rem;border-radius:50%;background:#f5f5f5;display:flex;align-items:center;justify-content:center;color:#666}
.pb-back .ic{font-size:0.19rem}
.pb-title{font-size:0.17rem;font-weight:700}
/* [2026-09-01] v31 顶栏中部：品牌 logo + 页面标题（绝对定位居中，不受两侧按钮宽度影响） */
/* [2026-09-01] v34 顶栏去掉 logo（用户要求），仅标题绝对定位居中 */
.pb-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:0.17rem;font-weight:700;color:#222;white-space:nowrap}
.pb-more{color:#999}
.pb-more .ic{font-size:0.19rem}

/* 卡片 */
.sec{background:#fff;margin-bottom:0.08rem;padding:0.14rem}
.sec-tit{font-size:0.16rem;font-weight:700;color:#333;margin-bottom:0.10rem;display:flex;align-items:center;gap:0.06rem}
.sec-tit::before{content:"";width:0.03rem;height:0.14rem;background:#f15500;border-radius:0.02rem;flex-shrink:0}

/* [2026-08-31] v13 顶部平台徽章（标题左侧 tb-icon SVG，淘宝橙/天猫红） */
.header .h-platform{display:flex;align-items:center;gap:0.06rem;margin-bottom:0.08rem}
.header .h-platform img{height:0.18rem;width:auto;display:block}
.header .h-platform .h-platname{font-size:0.13rem;color:#999;font-weight:500}
/* 标题区 */
.header{background:#fff;padding:0.14rem;margin-bottom:0.08rem}
.header h1{font-size:0.18rem;font-weight:700;line-height:1.4;color:#333;margin-bottom:0.08rem}
.header .h-sub{font-size:0.13rem;color:#999;display:flex;flex-wrap:wrap;align-items:center;gap:0.04rem 0.10rem}
.header .h-sub .ic{font-size:0.13rem}
.header .h-sub .h-inline-tag{
  font-size:0.12rem;color:#666;background:#f5f5f5;
  padding:0.02rem 0.08rem;border-radius:0.03rem;
}
.header .h-sub .h-inline-tag.ok{color:#07c160;background:#e8f8ef;font-weight:600}
.header .h-sub .h-inline-tag.warn{color:#e60012;background:#fff0f0;font-weight:600}
/* [2026-08-31] v12 标题区店铺编号提到顶部（红橙色突出，紧贴 tag 区） */
/* [2026-09-01] v27 编号移到平台行右侧：弱化为浅灰小标签，点击复制（去橙底描边） */
.header .h-code{
  margin-left:auto;display:inline-flex;align-items:center;gap:0.04rem;
  padding:0.03rem 0.08rem;background:#f7f7f7;color:#999;font-size:0.11rem;font-weight:500;
  border:none;border-radius:0.03rem;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.header .h-code b{color:#666;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0.005rem}
.header .h-code .ic{font-size:0.13rem;color:#bbb}
.header .h-code:active{background:#efefef}

/* [2026-08-31] v15 删除原 v13 顶部价格 SVG 区（红框区域），CSS 一并清理 */


/* [2026-08-31] v11 基本信息：标题 + 编号置顶（编号右上角单独展示），纯白背景去掉 zebra，
   边框线画出来并贴满屏幕左右两边（外层 margin/padding 清零），卡片圆角 4px(0.04rem)。 */
.info-tbl-card{
  background:#fff;
  margin:0 0 0.08rem;   /* [2026-09-01] v28 间距统一：所有卡片统一只用下边距 0.08rem，不再上/下边距混用 */
  border-radius:0.04rem;
  border:0.005rem solid #eee;
  overflow:hidden;
}
.info-tbl-card .it-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.14rem;   /* [2026-09-01] v25 0.10→0.14：与 fee-card 头部留白节奏统一（缝隙间距一致） */
  border-bottom:0.005rem solid #f0f0f0;
}
.info-tbl-card .it-title{
  font-size:0.16rem;font-weight:700;color:#333;
  display:flex;align-items:center;gap:0.06rem;
}
.info-tbl-card .it-title::before{content:"";width:0.03rem;height:0.14rem;background:#f15500;border-radius:0.02rem}
.info-tbl-card .it-code{font-size:0.13rem;color:#999;font-weight:500}
.info-tbl-card .it-code b{color:#333;font-weight:700;font-size:0.15rem;margin-left:0.04rem;font-variant-numeric:tabular-nums;word-break:break-all}
.info-tbl{table-layout:fixed;width:100%;border-collapse:collapse;font-size:0.14rem}
.info-tbl tr+tr td{border-top:0.005rem solid #f0f0f0}
.info-tbl td{
  padding:0.10rem 0.04rem;vertical-align:middle;line-height:1.4;                        /* [2026-09-01] v16 左 padding 移至首列单独控制 */
}
/* [2026-09-01] v16 首列文字与"基本信息"标题文字左对齐（0.14 标题左距 + 0.03 色条 + 0.06 间距 = 0.23） */
.info-tbl td:nth-child(1){padding-left:0.23rem}
.info-tbl td:nth-child(1),
.info-tbl td:nth-child(3){
  /* [2026-09-01] v21 修复右侧 label 与值无间隙：列宽 0.65→0.95rem（右列 label 起点 0.20+4字0.52=0.72，0.65 列宽下溢出贴死） */
  color:#999;font-size:0.13rem;width:0.95rem;font-weight:500;white-space:nowrap;
}
.info-tbl td:nth-child(2),
.info-tbl td:nth-child(4){
  color:#333;font-size:0.14rem;font-weight:600;word-break:break-all;
}
.info-tbl td:nth-child(3){padding-left:0.20rem}                       /* v13 第二组左侧 0.08→0.20 */
/* [2026-09-01] v34 表格中间加竖线：左组值列右侧加分隔线（用户要求） */
.info-tbl td:nth-child(2){border-right:0.005rem solid #f0f0f0}
/* v11 删除 tr:nth-child(even){background:#fafafa} 改为全白 */

/* [2026-08-31] v12 费用明细卡片：参考价大字 + 我要砍价按钮 + 三栏明细（提到店铺截图原位置）
   外层白底圆角 4px + border 边框；fc-grid 三个等宽明细项 + 左侧分割线 */
.fee-card{
  margin:0 0 0.08rem;background:#fff;   /* [2026-09-01] v28 间距统一：下边距 0.08rem */
  border:0.005rem solid #eee;border-radius:0.04rem;overflow:hidden;
}
.fee-card .fc-head{
  display:flex;align-items:center;gap:0.10rem;
  padding:0.12rem 0.14rem;   /* [2026-09-01] v25 顶距 0.16→0.12：与相邻卡片留白节奏统一（缝隙间距一致） */
}
.fee-card .fc-head .fc-label{font-size:0.14rem;color:#666;font-weight:600}
.fee-card .fc-head .fc-unit{font-size:0.16rem;color:#f15500;font-weight:800}
.fee-card .fc-head .fc-price{
  flex:1;color:#f15500;font-weight:800;font-size:0.30rem;
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-0.01rem;
}
.fee-card .fc-head .fc-bargain{
  display:inline-flex;align-items:center;justify-content:center;gap:0.04rem;
  background:#f15500;color:#fff;font-size:0.14rem;font-weight:700;
  padding:0.10rem 0.18rem;border-radius:0.20rem;flex-shrink:0;
}
.fee-card .fc-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  border-top:0.005rem solid #f0f0f0;
}
.fee-card .fc-grid .fc-item{padding:0.12rem 0.06rem;text-align:center}
.fee-card .fc-grid .fc-item+.fc-item{border-left:0.005rem solid #f0f0f0}
.fee-card .fc-grid .fc-iv{
  color:#f15500;font-weight:700;font-size:0.16rem;
  font-variant-numeric:tabular-nums;display:block;line-height:1.2;
}
.fee-card .fc-grid .fc-in{font-size:0.12rem;color:#999;display:block;margin-top:0.04rem}

/* [2026-08-31] v12 评分卡外壳（原雷达图卡，v24 改为横向条形评分） */
.radar-card{
  margin:0 0 0.08rem;background:#fff;   /* [2026-09-01] v28 间距统一：原 margin:0.08rem 0 0 且下边距为 0，导致与动态评分卡贴死无缝隙 */
  border:0.005rem solid #eee;border-radius:0.04rem;
  padding:0.14rem 0.14rem 0.16rem;overflow:hidden;
}
.radar-card .rc-title{
  font-size:0.16rem;font-weight:700;color:#333;
  display:flex;align-items:center;gap:0.06rem;margin-bottom:0.10rem;
}
.radar-card .rc-title::before{
  content:"";width:0.03rem;height:0.14rem;background:#f15500;border-radius:0.02rem;
}
/* [2026-09-01] v25 雷达图回归（用户要求换成好看的雷达图）：SVG 左图右图例布局，渐变填充 + 品牌色 */
.radar-svg{display:block;width:100%;height:auto}

/* 动态评分 */
/* [2026-09-01] v25 改为整行式：描述文字在进度条上方，分数右对齐（用户要求） */
/* [2026-09-01] v28 间距统一：与前后卡片一致，只保留下边距 0.08rem */
.dsr-list{background:#fff;padding:0.14rem;margin-bottom:0.08rem}
/* [2026-09-02] v52 动态评分改天猫详情页同款（score-item 结构，原 dr-* 删除）：分数右上橙色加粗 + 细进度条 + "高于 XX% 同行"对比行 */
.score-item{padding:0.100rem 0}
.score-item + .score-item{border-top:0.005rem solid var(--dp-divider)}
.score-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.060rem}
.score-top span{font-size:0.140rem;color:var(--ink-2);font-weight:500}
.score-top b{font-size:0.160rem;font-weight:800}
.score-top b.up{color:var(--brand)}
.score-bar{height:0.040rem;border-radius:0.020rem;background:var(--dp-divider);overflow:hidden}
.score-bar i{display:block;height:100%;border-radius:0.020rem;background:var(--brand)}
.score-compare{font-size:0.120rem;color:var(--ink-3);margin-top:0.050rem;display:flex;align-items:center;gap:0.040rem}
.score-compare .ic{font-size:0.130rem;color:var(--brand)}

/* 费用明细 */
.fee-box{background:#fff;padding:0.14rem;margin-bottom:0.08rem}
.fee-box .fb-total{display:flex;align-items:flex-end;justify-content:space-between;padding:0.12rem;background:#fff8f2;border-radius:0.06rem;margin-bottom:0.10rem}
.fee-box .fb-total .fb-tlabel{font-size:0.14rem;color:#f15500;font-weight:700}
.fee-box .fb-total .fb-tprice{font-size:0.22rem;color:#f15500;font-weight:800}
.fee-box .fb-item{display:flex;align-items:center;justify-content:space-between;padding:0.08rem 0.08rem;font-size:0.14rem}
.fee-box .fb-item:nth-child(even){background:#fafafa}
.fee-box .fb-item .fb-iname{color:#999}
.fee-box .fb-item .fb-ival{color:#333;font-weight:600}

/* [2026-09-01] v16 推荐：补齐列表页 .shop-card 系列样式（此前详情页未引入导致推荐区样式丢失），
   删除原 v12 .rel-box/.rel-card 旧样式（markup 已换 shop-card，属死代码） */
.shop-list{display:flex;flex-direction:column;gap:0.08rem}   /* [2026-09-01] v28 卡片间距与页面区块间距统一为 0.08rem（原 0.10rem） */
.shop-card{
  display:flex;flex-direction:column;gap:0.09rem;background:#fff;border-radius:0.08rem;
  padding:0.12rem;border:0.005rem solid #eee;transition:transform .2s;
}
.shop-card:active{transform:scale(.98)}
.shop-top{display:flex;align-items:flex-start}
.shop-badge{flex-shrink:0;height:0.16rem;width:auto;display:inline-block;margin-top:0.025rem;margin-right:0.04rem}
.shop-name{flex:1;min-width:0;font-size:0.15rem;font-weight:700;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-mid{display:flex;gap:0.12rem;align-items:stretch}
.shop-thumb{
  flex-shrink:0;width:0.72rem;height:0.72rem;border-radius:0.08rem;
  background:linear-gradient(145deg,#ffeef1,#ffd9de);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.shop-thumb.tmall{background:linear-gradient(145deg,#eef2fc,#dbe4fa)}
.shop-thumb img{width:100%;height:100%;object-fit:cover;border-radius:0.08rem}
.shop-info{flex:1;min-width:0;display:flex;flex-direction:column}
.shop-tags{display:flex;flex-wrap:wrap;gap:0.05rem;margin-top:0.07rem}
.shop-tag{font-size:0.13rem;color:#666;background:#f5f5f5;padding:0.03rem 0.08rem;border-radius:0.06rem}
.shop-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:0.07rem}
.shop-foot-l{display:flex;flex-direction:column;gap:0.03rem}
.shop-price{padding-top:0.05rem;display:inline-block}
.shop-price .price-canvas{max-height:0.26rem}
.shop-cta{
  display:inline-flex;align-items:center;gap:0.04rem;
  font-size:0.14rem;font-weight:600;color:#fff;
  background:#f15500;
  min-height:0.32rem;padding:0.06rem 0.13rem;border-radius:0.16rem;
  box-shadow:0 0.02rem 0.06rem rgba(241,85,0,.16);
}
.shop-cta:active{opacity:.85}
.shop-cta.cta-tmall{background:linear-gradient(145deg,#FF5A6E,#E60039);box-shadow:0 0.02rem 0.06rem rgba(230,0,57,.18)}
.shop-cta .ic.ic-wx{width:0.20rem;height:0.20rem;display:block;flex-shrink:0}

/* 底部栏 */
/* [2026-09-01] v16 重设计（对标竞品咨询栏，无 QQ）：左侧客服名片（头像+姓名+五星）+ 微信/电话 + 橙色立即购买 */
/* [2026-09-01] v21 压缩空白（与天猫详情页同步）：去掉"咨询客户顾问"标签行，改紧凑两段式（名片｜微信/电话图标｜按钮），电话图标换 fill 实底 */
/* [2026-09-01] v26 背景改纯白不透明（原 rgba .97+毛玻璃会透出底下滚动文字），图标加大 */
.action-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:60;width:100%;max-width:4.30rem;display:flex;align-items:center;gap:0.08rem;background:#fff;border-top:0.005rem solid #eee;padding:0.10rem 0.12rem calc(0.10rem + env(safe-area-inset-bottom))}
.kf-avatar{
  position:relative;flex-shrink:0;width:0.44rem;height:0.44rem;border-radius:50%;overflow:hidden;
  background:#fff1e8;display:flex;align-items:center;justify-content:center;
  font-size:0.18rem;font-weight:700;color:#f15500;
}
.kf-avatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.kf-meta{min-width:0;flex-shrink:1}
.kf-meta b{display:block;font-size:0.14rem;font-weight:700;color:#333;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-stars{display:block;font-size:0.10rem;color:#ffb400;letter-spacing:0.01rem;line-height:1.3}
.kf-item{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:0.04rem;font-size:0.12rem;color:#666;margin-left:0.14rem}   /* [2026-09-01] v24 微信/电话之间及与名片间距拉开；v26 图标文字加大 */
.kf-item .ic{font-size:0.28rem;color:#333}
.kf-item .kf-ico{width:0.28rem;height:0.28rem;display:block;color:#333}   /* [2026-09-01] v22 内联 SVG 微信图标，currentColor 跟随此色；v26 加大 */
/* [2026-09-01] v22 立即购买按钮按用户指定 CSS：border-radius:0.400rem / padding:0.120rem 0.400rem；淘宝品牌橙 #f15500；margin-left:auto 钉最右 */
.action-bar .btn-buy{
  flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  background:#f15500;color:#fff;font-size:0.15rem;font-weight:700;
  border:none;border-radius:0.400rem;padding:0.120rem 0.400rem;cursor:pointer;white-space:nowrap;
  box-shadow:0 0.04rem 0.12rem rgba(241,85,0,.22);
}
.action-bar .btn-buy:active{transform:scale(.97)}

/* [2026-09-01] v44 常见问题（补回区块，样式对齐天猫详情页 page-tmall-details.css，色值适配本页无 CSS 变量的写法） */
.faq-item{border-bottom:0.005rem solid #eee}
.faq-item:last-child{border-bottom:none}
.faq-q{
  display:flex;align-items:center;gap:0.080rem;
  padding:0.140rem 0;cursor:pointer;font-size:0.140rem;font-weight:600;
}
.faq-q .fq-ic{
  flex-shrink:0;width:0.220rem;height:0.220rem;border-radius:0.060rem;
  background:#f5f5f5;color:#666;
  display:flex;align-items:center;justify-content:center;
}
.faq-q .fq-ic .ic{font-size:0.140rem}
.faq-q .fq-text{flex:1}
.faq-q .fq-arrow{color:#999;transition:transform .25s}
.faq-q .fq-arrow .ic{font-size:0.170rem}
.faq-item.open .fq-arrow{transform:rotate(180deg)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .3s ease-out;
  font-size:0.140rem;color:#666;line-height:1.7;
  padding-left:0.300rem;
}
.faq-item.open .faq-a{max-height:3.000rem;padding-bottom:0.120rem}

/* ============ 推荐原因 [2026-09-02] v51 新增：Q/A 组合内容，时间轴式排版（区别于常见问题的手风琴样式） ============ */
.why-row{position:relative;padding:0 0 0.170rem 0.380rem}
.why-row:last-child{padding-bottom:0.020rem}
.why-row::before{content:'';position:absolute;left:0.140rem;top:0.320rem;bottom:0.010rem;width:0;border-left:0.014rem dashed #ffd7bd}
.why-row:last-child::before{display:none}
.why-badge{
  position:absolute;left:0;top:-0.010rem;width:0.290rem;height:0.290rem;border-radius:0.080rem;
  display:flex;align-items:center;justify-content:center;
  font-size:0.130rem;font-weight:800;font-family:Arial,sans-serif;
}
.why-badge.q{background:#fff1e8;color:#f15500;border:0.010rem solid rgba(241,85,0,.28)}
.why-badge.a{background:#eef4ff;color:#537ada;border:0.010rem solid rgba(83,122,218,.28);top:0.020rem}
.why-q{font-size:0.145rem;font-weight:700;color:#222;line-height:1.5;padding-top:0.030rem}
.why-a{font-size:0.135rem;color:#777;line-height:1.75;padding-top:0.050rem}

/* ============ 推荐理由 [2026-09-02] v53：reason 字段按句号拆句逐行展示（样式同店铺简介白卡，句前橙点标记） ============ */
.reason-lines{list-style:none;margin:0;padding:0}
.reason-lines li{
  position:relative;padding:0.060rem 0 0.060rem 0.170rem;
  font-size:0.140rem;color:#666;line-height:1.75;
}
.reason-lines li::before{
  content:'';position:absolute;left:0.020rem;top:0.135rem;
  width:0.070rem;height:0.070rem;border-radius:50%;background:#f15500;opacity:.55;
}