/* ═══════════════════════════════════════════════════════════════
   商品详情页皮肤 v1.0 · 对齐设备主页 v2（Airbnb 规范）
   ───────────────────────────────────────────────────────────────
   性质：纯追加覆盖层。不修改任何现有样式文件（index.html 仅加 1 行 link）。
   回滚：删除本文件 + 删除 index.html 中对应的 1 行 link。共 2 步。
   机制：加载于所有既有样式之后，靠"同权重后者生效"覆盖旧值。
        故本文件严禁使用 !important；严禁出现任何字面色值
        （仅允许 rgba(0,0,0,.x) 遮罩/阴影与 var(--canvas) 白）；
        严禁在本页新增任何页面跳转过渡。
   范围：#page-product-detail 本体 + 其专属浮层（specOverlay / toolOverlay /
        shareOverlay / reviewOverlay）+ 灯箱与全屏视频按钮尺寸。
   注：规格/工具/分享/评论抽屉/灯箱/全屏视频这 6 个浮层在 DOM 上是
        .app-container 的直接子元素，**没有页面前缀可用**（与 nearby.css
        自身作用域写法一致）；其类名（.spec-* / .tool-* / .share-* /
        .review-panel* / .lightbox* / .video-fullscreen*）全站仅详情页流程使用，
        不存在跨页污染，故直接以类选择器书写。
        评价项（.review-item 等）在 nearby.css 中是三前缀并列
        （#page-nearby / #page-product-detail / #reviewOverlay），
        本文件必须同时覆盖后两者，否则抽屉里仍是旧样式。
   已知不一致点（本轮不动，已登记 docs/css-architecture.md）：
        .detail-fixed-header 为 position:fixed 且依赖 430px 常量 ——
        因 #page-product-detail 自身即滚动容器（overflow-y:auto），
        改 absolute 会随内容滚走、吸顶失效。如需统一须连 overflow 一起改（结构级）。
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── §0 页面令牌（仅补详情页专属的两个价格档） ───────────
   其余全部直接消费 skin-nearby.css 在 :root 声明的全站令牌；
   不重复声明 --theme（:root 已是 #FF5C39，与设备页同色，正是所求）。 */
#page-product-detail{
  --t-price-lg:24px;     /* 详情页主价格（全站唯一排版豁免：仅此处可用） */
  --t-price-card:17px;   /* 推荐卡价格（与设备页 .price 17px 逐值相同） */
  /* 页面底：白画布 + 中性墨色（原 #F0F1F3 / #1A1C1E） */
  background:var(--canvas);
  color:var(--ink);
}

/* 本页唯一滚动容器：底与正文同色，防滚动露底色 */
#page-product-detail .detail-scroll{ background:var(--canvas); }

/* ─────────────── §1 媒体区（图集/视频轮播） ─────────────── */
#page-product-detail .media-section{
  background:var(--surface-strong);   /* 原 #E8EAED 冷灰 */
  border-radius:0;                    /* 贴边内容不做圆角（原 0 0 12px 12px） */
}
#page-product-detail .media-slide{ background:var(--canvas); }

/* 图片右上/左上的两个圆形按钮：改"白胶囊 + 墨黑图标 + 唯一阴影层"
   （原半透明黑底白图标；对齐设备页 .hero-loc 白胶囊族；触控 40px） */
#page-product-detail .media-back-btn,
#page-product-detail .media-more-btn{
  width:40px; height:40px;
  background:var(--canvas);
  box-shadow:var(--elev);
  color:var(--ink);
}
#page-product-detail .media-back-btn svg{ width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:2.25; }
/* 注：.media-more-btn 的 svg 在 index.html 上带表现属性 fill="#fff"，
   表现属性优先级最低，此处 CSS 可直接覆盖（无需改 HTML） */
#page-product-detail .media-more-btn svg{ fill:var(--ink); }

/* 轮播指示点：全白，仅以长短区分（不用任何黑色色块、不加描边与投影） */
#page-product-detail .media-dot{
  background:var(--canvas);
  width:6px; height:6px; border-radius:var(--r-full);
}
#page-product-detail .media-dot.active{
  background:var(--canvas); width:18px; border-radius:3px;
}

/* ─────────── §2 图集/视频切换（改为分段控件，退出主题色） ───────────
   注：显隐由 JS 写内联 display（无视频时 display:none），此处不设 display */
#page-product-detail .media-switch{
  gap:2px;
  margin:14px 16px 0;
  padding:3px;
  background:var(--surface-sunken);        /* 原 --surface-soft(#F7F7F7)：白底上 ΔL 仅 3.1%，几乎看不见 */
  border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);  /* 补一圈内描边，让整块边界更明确 */
}
#page-product-detail .switch-btn{
  flex:1;
  padding:8px 20px;
  background:transparent;
  border-radius:var(--r-sm);
  font-size:var(--t-caption);
  color:var(--muted);
  text-align:center;
}
#page-product-detail .switch-btn.active{
  background:var(--canvas);
  color:var(--ink);
  font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.14);    /* 原 .08：加强白胶囊的浮起感 */
}

/* ─────────────── §3 商品信息区（去卡面） ─────────────── */
#page-product-detail .info-card{
  background:transparent;
  margin:0;
  border-radius:0;
  box-shadow:none;
  padding:20px 16px;
}
#page-product-detail .price-area{ margin-bottom:10px; }
#page-product-detail .price-current{
  font-size:var(--t-price-lg);
  font-weight:700;
  color:var(--theme);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.4px;
}
#page-product-detail .price-original{ font-size:var(--t-caption); color:var(--muted); }
#page-product-detail .sales-text{ font-size:var(--t-micro); color:var(--muted); }
#page-product-detail .product-title-detail{
  font-size:var(--t-subtitle);
  font-weight:600;
  color:var(--ink);
  line-height:1.4;
  margin-bottom:12px;
}
#page-product-detail .tag-row{ gap:6px; margin-bottom:0; }
#page-product-detail .service-tag{
  background:var(--surface-soft);
  color:var(--muted);
  font-size:var(--t-tiny);
  padding:4px 10px;
  border-radius:var(--r-xs);
}

/* 规格行：由 JS 内联样式外提为类名（原内联样式优先级高于本文件，必须外提） */
#page-product-detail .spec-selector{
  display:flex; align-items:center; gap:8px;
  margin-top:12px;
}
#page-product-detail .spec-label{ font-size:var(--t-caption); color:var(--muted-soft); }
#page-product-detail .spec-current{
  display:inline-flex; align-items:center;
  padding:6px 12px;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  font-size:var(--t-caption);
  color:var(--ink);
  cursor:pointer;
}
#page-product-detail .spec-caret{ color:var(--muted-soft); margin-left:2px; opacity:1; }

/* ─────────────── §4 参数表（扫读路径成一条直线） ─────────────── */
#page-product-detail .params-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--t-caption);
  color:var(--muted);
  margin-top:4px;
}
#page-product-detail .params-table td{
  padding:10px 0;
  border-bottom:1px solid var(--hairline-soft);
  vertical-align:top;
}
#page-product-detail .params-table td:first-child{
  color:var(--muted);
  width:38%;
  white-space:nowrap;
  padding-right:12px;
}
#page-product-detail .params-table td:last-child{
  color:var(--ink);
  text-align:right;
  word-break:break-word;
}
#page-product-detail .params-table tr:last-child td{ border-bottom:none; }

/* ───────── §5 详情图文 / 评价 / 推荐 / 结束提示 ───────── */

/* 区块去卡面 → 发丝线分区（与设备页 .feed-sep 同思路） */
#page-product-detail .detail-section-block{
  background:transparent;
  margin:0;
  border-radius:0;
  padding:20px 16px;
  border-top:1px solid var(--hairline-soft);
}
/* 区块标题：与设备页 .sec h2 逐值相同（20px / 600 / -.4px） */
#page-product-detail .detail-block-title{
  font-size:var(--t-title);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.4px;
  margin-bottom:14px;
}

/* 「评价」标题行：标题左 +「查看全部」右
   （与设备页 `.sec{justify-content:space-between}` 同构 —— 仅统一【排布方式】，不统一视觉样式）
   `align-items:flex-end`：两者**底部对齐**（原 center 垂直居中，
   20px 标题与 14px 按钮视觉重心不一致，显得飘） */
#page-product-detail .review-title-bar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
}

#page-product-detail .detail-images img{
  display:block;
  width:100%;
  border-radius:var(--r-sm);
  margin-bottom:10px;
  background:var(--surface-strong);
}
#page-product-detail .detail-images video{ border-radius:var(--r-sm); }
#page-product-detail .detail-video-wrap{ position:relative; margin-top:10px; }
/* 详情内视频右上角静音按钮：由 JS 内联样式外提为类名 */
#page-product-detail .detail-sound-btn{
  position:absolute; bottom:10px; right:10px;
  width:30px; height:30px;
  background:rgba(0,0,0,.5);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:4; color:var(--canvas);
}

/* ── 评价项：必须同时覆盖 #page-product-detail 与 #reviewOverlay ── */
#page-product-detail .review-item,
#reviewOverlay .review-item{
  border-bottom:1px solid var(--hairline-soft);
  padding:16px 0;
}
#page-product-detail .review-item:first-child,
#reviewOverlay .review-item:first-child{ padding-top:0; }
#page-product-detail .review-item:last-child,
#reviewOverlay .review-item:last-child{ padding-bottom:0; border-bottom:none; }
#page-product-detail .review-avatar,
#reviewOverlay .review-avatar{
  width:32px; height:32px;
  background:var(--surface-strong);
}
#page-product-detail .review-avatar img,
#reviewOverlay .review-avatar img{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
}
#page-product-detail .review-name,
#reviewOverlay .review-name{ font-size:var(--t-caption); font-weight:600; color:var(--ink); }
/* 星级：实心＝主题橙红；空星＝墨黑镂空（描边加粗 + 圆角折点防尖刺） */
#page-product-detail .review-stars svg,
#reviewOverlay .review-stars svg{ fill:var(--theme); }
#page-product-detail .review-stars svg.empty-star,
#reviewOverlay .review-stars svg.empty-star{
  fill:none;
  stroke:var(--muted-soft); /* 原 var(--ink)#222：过重，抢实心星主导地位 */
  stroke-width:1.5;         /* 原 2.6：过粗；14px 渲染 ≈0.87px，空心仍清晰可辨 */
  stroke-linejoin:round;    /* 必须：五角星内凹顶点用 miter 会拉出长尖刺 */
}
#page-product-detail .review-content,
#reviewOverlay .review-content{
  font-size:var(--t-caption);
  color:var(--body);
  line-height:1.5;
  margin-bottom:8px;
}
#page-product-detail .review-images img,
#reviewOverlay .review-images img{
  border-radius:var(--r-sm);
  background:var(--surface-strong);
}
#page-product-detail .review-spec,
#reviewOverlay .review-spec{
  font-size:var(--t-tiny);
  color:var(--muted);
  background:var(--surface-soft);
  border-radius:var(--r-xs);
  padding:3px 8px;
  margin-top:8px;
}
#page-product-detail .view-more-reviews{
  color:var(--ink);
  font-size:var(--t-body);
  font-weight:500;
  padding:0;           /* 原 `14px 0 0`：已移入标题行，不再占独立高度 */
  cursor:pointer;      /* 原由 nearby.css 的通用规则提供；行内后点击区变小，显式保留 */
  /* 文字 + 右尖括号：行内 flex + 垂直居中
     （原为纯文本 `查看更多 >`（随后又曾改字面 `查看全部 >`），
        `>` 是文字字符、墨迹偏下 → 改内联 SVG 后才能精确居中；
        文案改走既有 `nearby.view_all` 键，与设备页「官方精选」按钮同源） */
  display:inline-flex; align-items:center; gap:1px;
}
/* 右尖括号：与设备页 `.sec-more svg` 逐值同规格；`display:block` 去掉行内基线留白 */
#page-product-detail .view-more-reviews svg{
  width:12px; height:12px; display:block; fill:none;
  stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
}
#page-product-detail #reviewList:empty::before{ content:""; display:block; height:8px; }

/* ── 推荐区：标题 + 网格 + 商品卡全套复刻设备页 v2 ── */
#page-product-detail .recommend-title{
  font-size:var(--t-title);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.4px;
  padding:20px 16px 14px;
  border-top:1px solid var(--hairline-soft);
}
#page-product-detail .recommend-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px 16px;
  padding:0 16px;
}
#page-product-detail .product-card{
  background:transparent;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  display:flex;
  flex-direction:column;
  gap:9px;
}
#page-product-detail .recommend-grid .product-card{ box-shadow:none; }
#page-product-detail .product-image{
  width:100%;
  aspect-ratio:1/1;
  position:relative;
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--surface-strong);
}
#page-product-detail .product-image img{ width:100%; height:100%; object-fit:cover; }
#page-product-detail .product-badge{
  position:absolute; top:8px; left:8px;
  height:23px; padding:0 9px;
  display:flex; align-items:center;
  background:var(--theme);
  color:var(--on-theme);
  font-size:var(--t-tiny);
  font-weight:600;
  letter-spacing:.2px;
  border-radius:var(--r-full);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
#page-product-detail .product-info{ padding:0; display:flex; flex-direction:column; gap:9px; }
#page-product-detail .product-title{
  font-size:13.5px;
  font-weight:500;
  color:var(--ink);
  line-height:1.42;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#page-product-detail .product-price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
#page-product-detail .price{
  font-size:var(--t-price-card);
  font-weight:700;
  color:var(--theme);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.2px;
  line-height:normal;
}
#page-product-detail .price-symbol{ font-size:var(--t-micro); font-weight:600; margin-right:1px; }
#page-product-detail .meta-text{ font-size:var(--t-tiny); color:var(--muted-soft); white-space:nowrap; }

/* 结束提示：与设备页 .end-tip 逐值相同 */
#page-product-detail .end-tip{
  text-align:center;
  padding:30px 0 34px;
  font-size:var(--t-micro);
  color:var(--muted-soft);
  letter-spacing:.6px;
}

/* ─────────── §6 吸顶栏（对齐设备页 .np-stuck：不透明白 + 纯淡入） ───────────
   注：保留 position:fixed 与 translateX(-50%)（见文件头"已知不一致点"）；
       动画由"位移+淡入 0.25s"统一为"纯淡入 240ms" */
#page-product-detail .detail-fixed-header{
  transform:translateX(-50%);
  background:var(--canvas);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid var(--hairline-soft);
  color:var(--ink);
  padding:calc(7px + env(safe-area-inset-top, 0px)) 16px 7px;
  gap:10px;
  transition:opacity 240ms ease;
}
#page-product-detail .detail-fixed-header.visible{ transform:translateX(-50%); }

#page-product-detail .fixed-back{ width:40px; height:40px; }
#page-product-detail .fixed-back svg{ width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:2.25; }
#page-product-detail .fixed-tabs{ gap:2px; }
#page-product-detail .fixed-tab{
  --tab-pad-x:12px;              /* 内边距与下划线内缩量共用，改一处两处同步 */
  position:relative;
  padding:6px var(--tab-pad-x);
  font-size:var(--t-body);
  font-weight:500;
  color:var(--muted);
}
#page-product-detail .fixed-tab.active{ color:var(--ink); font-weight:600; }
/* 当前 tab 下划线（第 3 处主题色） */
#page-product-detail .fixed-tab.active::after{
  content:'';
  position:absolute; left:var(--tab-pad-x); right:var(--tab-pad-x); bottom:0;
  height:2px;
  background:var(--theme);
  border-radius:1px;
}
/* 窄屏（≤414px）：内边距与字号各降一档。实测让 5 个语种在 360px 起的手机上全部放得下；
   ≥415px（含 430px 设计宽度）不触发，视觉与现在完全一致。 */
@media (max-width:414px){
  #page-product-detail .fixed-tab{ --tab-pad-x:6px; font-size:var(--t-caption); }
}
#page-product-detail .fixed-actions{ gap:10px; }
#page-product-detail .fixed-more{ width:36px; height:36px; }
#page-product-detail .fixed-more svg{ width:22px; height:22px; fill:var(--ink); }

/* ─────────── §7 底部行动栏（Airbnb button-secondary + button-primary） ─────────── */
#page-product-detail .detail-bottom-bar{
  background:var(--canvas);
  border-top:1px solid var(--hairline-soft);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  gap:10px;
}
/* 收藏：白底 + 墨黑描边（收藏数每次刷新随机，不做视觉重心 → 用描边不用实心） */
#page-product-detail .btn-favorite{
  flex:1; height:48px;
  background:var(--canvas);
  border:1px solid var(--ink);
  color:var(--ink);
  border-radius:var(--r-sm);
  font-size:var(--t-body);
  font-weight:500;
  white-space:nowrap;
}
#page-product-detail .btn-favorite:active{ background:var(--surface-soft); }
/* 收藏激活态（第 4 处主题色；由 nearby.js renderFavoriteUI 加 .is-on） */
#page-product-detail .btn-favorite.is-on{
  border-color:var(--theme);
  background:var(--theme-soft);
  color:var(--theme);
}
#page-product-detail .btn-favorite.is-on:active{ background:var(--theme-soft); }
/* 主行动：唯一实心按钮 */
#page-product-detail .btn-contact{
  flex:1; height:48px;
  background:var(--theme);
  border:none;
  color:var(--on-theme);
  border-radius:var(--r-sm);
  font-size:var(--t-body);
  font-weight:600;
}
#page-product-detail .btn-contact:active{ background:var(--theme-active); }

/* ─────────── §8 浮层（保留各自动画，仅统一视觉语言） ─────────── */

/* §8.1 规格浮窗（无输入框 → 保持"点遮罩关闭"不变） */
.spec-panel{
  background:var(--canvas);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));
}
.spec-title{
  font-size:var(--t-subtitle);
  font-weight:600;
  color:var(--ink);
  text-align:center;
  margin-bottom:16px;
}
.spec-list{ gap:10px; margin-bottom:20px; }
/* 名称↔价格间距 = 原「一个空格」的 **3 倍**：14px / w600 实测空格 = 4.175px → 12.5px。
   ⚠️ 两态字重**必须同为 600**：原先未选 400 / 选中 600 → 文字变粗使按钮宽度
      108.38 → 111.58（+3.2px），旁边按钮跟着跳 —— 这就是「电脑端点一下按钮变大」
      的根因（手机端同样存在，只是两枚按钮一行、幅度小不易察觉）。
      此处统一为 600 后尺寸不再变化，抖动自动消失。 */
.spec-item{
  display:flex; align-items:center; gap:12.5px;
  padding:10px 18px;
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  font-size:var(--t-body);
  font-weight:600;
  background:var(--canvas);
}
.spec-name{  font-weight:600; color:var(--ink); }     /* 未选：加粗黑 */
.spec-price{ font-weight:600; color:var(--muted); }   /* 未选：加粗灰 */
/* 选中：橙红边框 + 淡橙底；名称与价格均转**加粗橙红** */
.spec-item.selected{
  border-color:var(--theme);
  background:var(--theme-soft);
}
.spec-item.selected .spec-name,
.spec-item.selected .spec-price{ color:var(--theme); }
.spec-close-btn{
  width:100%; height:48px;
  background:var(--theme);
  border:none;
  border-radius:var(--r-sm);
  color:var(--on-theme);
  font-size:var(--t-body);
  font-weight:600;
}
.spec-close-btn:active{ background:var(--theme-active); }

/* §8.2 评论详情抽屉（无输入框 → 可点遮罩关闭，不变） */
.review-panel{
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));
}
.review-panel-title{ font-size:var(--t-subtitle); font-weight:600; color:var(--ink); }
.review-panel-close{
  width:32px; height:32px;
  color:var(--muted);
  font-size:16px;
}
.review-panel-close:active{ background:var(--surface-soft); }

/* §8.3 更多工具浮窗（无输入框 → 可点遮罩关闭，不变） */
.tool-panel{
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
}
.tool-close{ width:32px; height:32px; color:var(--muted); }
.tool-title{
  font-size:var(--t-subtitle);
  font-weight:600;
  color:var(--ink);
  text-align:center;
  margin-bottom:22px;
}
.tool-item{ max-width:76px; }
.tool-icon{
  width:52px; height:52px;
  border-radius:var(--r-md);
  background:var(--surface-soft);
}
.tool-icon svg{ stroke:var(--ink); }
.tool-label{ font-size:var(--t-micro); color:var(--muted); }
.tool-item.favorited .tool-icon{ background:var(--theme-soft); }
.tool-item.favorited .tool-icon svg{ fill:var(--theme); stroke:var(--theme); }
.tool-item.favorited .tool-label{ color:var(--theme); }

/* §8.4 分享浮窗
   注：#shareLinkInput 是 readonly + pointer-events:none 的只读展示框，
       无"丢失未完成输入"风险 → 依 ui-interaction-spec 规范二豁免条款，
       保持"可点空白关闭"（本文件仅改样式，不动该交互） */
.share-panel .share-link-row{ gap:10px; margin-top:8px; }
.share-link-input{
  height:44px;
  background:var(--surface-soft);
  border:none;
  border-radius:var(--r-sm);
  font-size:var(--t-caption);
  color:var(--muted);
}
.share-copy-btn{
  height:44px;
  padding:0 16px;
  background:var(--theme);
  color:var(--on-theme);
  border:none;
  border-radius:var(--r-sm);
  font-size:var(--t-body);
  font-weight:600;
}
.share-copy-btn:active{ background:var(--theme-active); }

/* ─────────── §9 灯箱（仅放大触控目标，其余不动） ─────────── */
/* 2026-10-01 二次改造：左右切图按钮已删除；关闭键改为**左上返回键**（`.mv-back`），
   并新增右上设置键（`.mv-more`）。两者统一放大到 44×44（原 `.lightbox-close` 的口径）。
   ⚠️ `.video-fullscreen-close` 一并移除：`#videoFullscreenOverlay` 是自 2026-07-11 起
      从未接线的孤儿层，本次已删除；聊天视频改由 `#imageViewer` 承载。 */
.lightbox .mv-back, .lightbox .mv-more{ width:44px; height:44px; }