/* =============================================================
 * components.css —— 可复用交互组件
 * 按钮 / 轮播 / 视频 / 模态 / 私域浮窗 / 规格披露 / FAQ /
 * 周边轮播 / 清晰版放大 / 收藏 / 二维码 等
 * ============================================================= */

/* ===================== 按钮 ===================== */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 22px; border-radius:var(--r-sm); font-weight:700; font-size:14px; transition:all .2s; cursor:pointer; border:none; }
.btn-primary{ background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#ff7a45)); color:#fff; box-shadow:0 8px 26px var(--glow); }
.btn-primary:hover{ filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 12px 34px var(--glow); }
.btn-ghost{ background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--txt); backdrop-filter:blur(6px); }
.btn-ghost:hover{ border-color:var(--accent); color:#fff; transform:translateY(-2px); }

.ghost-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border:1px solid var(--accent); color:var(--accent);
  border-radius:var(--r-pill); font-size:13px; font-weight:700;
  background:color-mix(in srgb,var(--accent) 8%,transparent); transition:all .18s; text-decoration:none;
}
.ghost-btn:hover{ background:color-mix(in srgb,var(--accent) 18%,transparent); transform:translateY(-1px); box-shadow:0 6px 18px var(--glow); }

/* mini ghost（规格管理 / 收藏复用） */
.ghost-btn-mini{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; font-size:12px; line-height:1; font-weight:600;
  color:var(--txt); background:color-mix(in srgb,var(--accent-2) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-2) 35%,var(--line));
  border-radius:var(--r-pill); cursor:pointer; transition:all .18s var(--ease); font-family:inherit;
}
.ghost-btn-mini:hover{ border-color:var(--accent-2); background:color-mix(in srgb,var(--accent-2) 14%,transparent); color:#fff; }
.ghost-btn-mini .heart{ color:var(--accent); font-size:14px; line-height:1; }
.ghost-btn-mini.is-active{ background:color-mix(in srgb,var(--accent) 16%,transparent); border-color:var(--accent); color:#fff; }
.ghost-btn-mini.is-active .heart{ transform:scale(1.1); display:inline-block; }

/* ===================== 图片轮播 ===================== */
.gallery{
  position:relative; width:100%; border-radius:var(--r-md);
  overflow:hidden; border:1px solid var(--line);
  background:var(--bg-soft); aspect-ratio:1/1; box-shadow:var(--sh-2);
  cursor:pointer;
}
.gallery .track{ display:flex; height:100%; transition:transform .45s cubic-bezier(.4,0,.2,1); touch-action:pan-y; }
.gallery .slide{
  flex:0 0 100%; height:100%; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--panel),var(--bg-soft));
  cursor:pointer;
}
.gallery .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 2026-08-25 修复：移除 hover 放大/中央放大镜，避免"放上去会动"的误判 */
.gallery:hover .slide img{ transform:none !important; }
.slide img{ transition:none; }
.gallery .slide .ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  color:var(--txt-3); font-size:14px; text-align:center; padding:20px;
}
.gallery .slide .ph .angle{ font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--txt-2); }
.gallery .slide .ph .ico{ font-size:34px; opacity:.6; }
.gallery .arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.45); border:1px solid var(--line); color:#fff;
  font-size:20px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:4; transition:background .2s,transform .2s; backdrop-filter:blur(4px);
}
.gallery .arrow:hover{ background:var(--accent); transform:translateY(-50%) scale(1.08); }
.gallery .arrow.prev{ left:14px; }
.gallery .arrow.next{ right:14px; }
.gallery .dots{ position:absolute; bottom:16px; left:0; right:0; display:flex; gap:16px; justify-content:center; z-index:4; }
.gallery .dots .dot{ position:relative; width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:all .2s; }
/* 圆点视觉保持小巧，但用透明伪元素把可点区撑到 32×32。
   原尺寸只有 9×9（移动端甚至被压到 7×7），手指根本点不中——
   这是"移动端点了没反应"最容易被忽略的一类原因。 */
.gallery .dots .dot::after{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:28px; height:40px;
}
.gallery .dots .dot.active{ background:var(--accent); width:24px; border-radius:6px; }
.gallery .badge-l{
  position:absolute; top:16px; left:16px; padding:7px 14px;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#ff7a45));
  color:#fff; font-size:11px; font-weight:800; letter-spacing:1px;
  border-radius:var(--r-pill); z-index:4; box-shadow:var(--sh-1);
}
.gallery .hint{ position:absolute; bottom:16px; right:16px; color:var(--txt-3); font-size:11px; z-index:4; background:rgba(0,0,0,.35); padding:4px 10px; border-radius:var(--r-pill); backdrop-filter:blur(4px); }

/* ===================== 规格与收藏保障披露区 ===================== */
.disclose{ display:flex; flex-direction:column; gap:16px; margin-top:18px; padding-top:20px; border-top:1px solid var(--line); }
.disc-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.disc-head h3{ font-size:22px; font-weight:900; letter-spacing:-.3px; }
.disc-head-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.disc-head-actions .disc-tag{ margin-right:4px; }
.disc-tag{ font-size:12px; padding:5px 14px; border:1px solid var(--accent); color:var(--accent); border-radius:var(--r-pill); font-weight:700; background:color-mix(in srgb,var(--accent) 10%,transparent); letter-spacing:.5px; }

.spec-table{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:rgba(255,255,255,.012); }
.spec-table .row{ display:flex; justify-content:space-between; align-items:center; padding:13px 18px; font-size:14px; line-height:1.5; transition:background .18s; gap:16px; border-bottom:1px solid rgba(255,255,255,.04); }
.spec-table .row:last-child{ border-bottom:none; }
.spec-table .row:nth-child(odd){ background:rgba(255,255,255,.025); }
.spec-table .row:hover{ background:color-mix(in srgb,var(--accent) 8%,transparent); }
.spec-table .row[data-empty]{ padding:18px; text-align:center; color:var(--txt-3); font-style:italic; }
.spec-table .row .k{ color:var(--txt-2); display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0; white-space:nowrap; }
.spec-table .row .k .si{ font-size:14px; display:inline-block; width:18px; text-align:center; margin-right:6px; }
.spec-table .row .v{ color:var(--txt); font-weight:600; text-align:right; flex:1; min-width:0; font-size:14px; }

.credits,.guarantee{ border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; background:rgba(255,255,255,.02); }
.credits h4,.guarantee h4{ font-size:15px; font-weight:800; margin-bottom:12px; color:var(--accent); display:flex; align-items:center; gap:8px; letter-spacing:.3px; }
.credits h4::before,.guarantee h4::before{ content:""; width:4px; height:15px; border-radius:2px; background:var(--grad-border); }
.cr{ display:flex; justify-content:space-between; align-items:center; font-size:13.5px; padding:8px 0; border-bottom:1px dashed var(--line); gap:12px; }
.cr:last-child{ border-bottom:none; }
.cr .role{ color:var(--txt-2); flex-shrink:0; white-space:nowrap; }
.cr .who{ color:var(--txt); font-weight:600; text-align:right; min-width:0; word-break:break-word; }
.guarantee ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.guarantee li{ font-size:13.5px; color:var(--txt-2); line-height:1.55; display:flex; gap:10px; align-items:flex-start; }
.guarantee li::before{ content:"✓"; color:var(--accent); font-weight:800; flex-shrink:0; font-size:13px; line-height:1.7; }
.guarantee .gameplay-note{ margin-top:14px; padding-top:14px; border-top:1px dashed rgba(255,255,255,.10); color:var(--txt-2); font-size:13px; line-height:1.72; }

/* ===== 玩法说明高亮强调 ===== */
.hl, .gameplay-note .hl, .lead .hl{
  color: var(--accent);
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 0 .22em;
  border-radius: 5px;
}
.hl-cyan, .gameplay-note .hl-cyan, .lead .hl-cyan{
  color: var(--accent-2);
  font-weight: 700;
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  padding: 0 .22em;
  border-radius: 5px;
}

/* ===== 新品通用高亮提示（兑换码实卡 / 联系客服） ===== */
.carousel-slide .cs-hl{
  display:block;
  margin: 0 14px 10px;
  padding: 8px 10px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  line-height: 1.7;
  color: var(--txt-2);
}
.merch-modal .ms-hl{
  margin: 4px 0 14px;
  padding: 8px 12px;
  border-left: 3px solid color-mix(in srgb, var(--accent-2) 50%, transparent);
  background: color-mix(in srgb, var(--accent-2) 6%, transparent);
  font-size: 13px;
  line-height: 1.7;
  color: var(--txt-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.carousel-slide .cs-hl .hl,
.carousel-slide .cs-hl .hl-cyan,
.merch-modal .ms-hl .hl,
.merch-modal .ms-hl .hl-cyan{
  font-size: 12.5px;
}
.copyright{ font-size:12.5px; color:var(--txt-3); line-height:1.7; border-left:3px solid var(--accent); padding:11px 14px; background:rgba(255,255,255,.02); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.proto-note{ font-size:12.5px; color:var(--txt-3); line-height:1.7; font-style:italic; padding:6px 0; }

/* ===================== FAQ 手风琴 ===================== */
.faq-card .faq{ display:flex; flex-direction:column; gap:0; }
.faq details{ border-bottom:1px solid var(--line); padding:0; }
.faq summary{ cursor:pointer; list-style:none; padding:15px 0; font-size:14px; font-weight:600; color:var(--txt); display:flex; justify-content:space-between; align-items:center; transition:color .2s; }
.faq summary:hover{ color:var(--accent); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--accent); font-size:20px; font-weight:700; transition:transform .2s; }
.faq details[open] summary::after{ content:"−"; transform:rotate(180deg); }
.faq details p{ padding:0 0 15px; font-size:13px; color:var(--txt-2); line-height:1.7; }

/* ===================== 私域弹窗（微信/QQ/WhatsApp） ===================== */
.modal-mask{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  padding:20px; animation:fadeIn .18s ease-out;
}
.modal-mask[hidden]{ display:none; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes zoomIn{ from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
.modal{
  position:relative; width:100%; max-width:420px;
  background:linear-gradient(180deg,var(--panel),var(--bg-soft));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 26px 24px; box-shadow:var(--sh-3); animation:zoomIn .22s ease-out;
}
.modal-close{
  position:absolute; top:12px; right:14px; width:34px; height:34px;
  border:none; background:transparent; color:var(--txt-2); font-size:26px; line-height:1;
  cursor:pointer; border-radius:8px; transition:background .15s,color .15s;
}
.modal-close:hover{ background:var(--panel-2); color:var(--txt); }
.modal-title{ font-size:19px; font-weight:900; margin:0 0 20px; color:var(--txt); text-align:center; }
.modal-body{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.qr-img{ width:220px; height:220px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; padding:8px; display:block; }
.qr-img--card{ width:auto; max-width:260px; height:auto; object-fit:contain; padding:0; border:none; background:transparent; }
.qr-placeholder{ width:220px; height:220px; border:1px dashed var(--txt-3); border-radius:var(--r-sm); background:rgba(255,255,255,.03); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--txt-2); font-size:13px; text-align:center; padding:12px; }
.qr-placeholder span{ font-size:11px; color:var(--txt-3); }
.id-row{ display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 14px; width:100%; max-width:320px; font-size:14px; color:var(--txt-2); }
.id-row code{ flex:1; color:var(--txt); font-weight:700; font-family:"Courier New",monospace; font-size:14px; word-break:break-all; }
.copy-btn{ padding:6px 13px; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#ff7a45)); color:#fff; border:none; border-radius:var(--r-sm); font-size:12px; font-weight:700; cursor:pointer; transition:all .15s; flex-shrink:0; }
.copy-btn:hover{ filter:brightness(1.12); }
.copy-btn.copied{ background:var(--accent-2); color:#06222a; }
.modal-tip{ font-size:12px; color:var(--txt-3); text-align:center; margin:0; line-height:1.6; }
.modal-open-btn{ display:inline-block; padding:12px 26px; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#ff7a45)); color:#fff; border-radius:var(--r-sm); font-weight:700; font-size:14px; text-decoration:none; transition:filter .15s,transform .15s; }
.modal-open-btn:hover{ filter:brightness(1.12); transform:translateY(-2px); }
.modal-open-btn.big{ font-size:15px; padding:14px 30px; }
.modal-foot{ margin-top:16px; text-align:center; font-size:11px; color:var(--txt-3); }

/* ===================== 产品细节弹窗（画廊式大图） ===================== */
.detail-mask{
  position:fixed; inset:0; z-index:210; background:rgba(0,0,0,.86);
  backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center;
  padding:24px; animation:fadeIn .18s ease-out;
}
.detail-mask[hidden]{ display:none; }
.detail-modal{
  position:relative; width:100%; max-width:960px; max-height:92vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--panel),var(--bg-soft)); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-3); overflow:hidden; animation:zoomIn .22s ease-out;
}
.detail-close{ position:absolute; top:12px; right:14px; width:38px; height:38px; border:none; background:rgba(255,255,255,.1); color:#fff; font-size:28px; line-height:1; cursor:pointer; border-radius:10px; z-index:6; transition:background .15s; }
.detail-close:hover{ background:var(--accent); }
.detail-stage{ position:relative; flex:1; min-height:0; background:#000; display:flex; align-items:center; justify-content:center; padding:18px; }
.detail-imgwrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.detail-imgwrap img{ width:100%; height:100%; max-height:62vh; object-fit:contain; display:block; }
.detail-imgwrap .ph{ color:var(--txt-3); font-size:15px; text-align:center; padding:40px; }
.detail-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,.5); border:1px solid var(--line); color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; transition:background .2s,transform .2s; backdrop-filter:blur(4px); }
.detail-arrow:hover{ background:var(--accent); transform:translateY(-50%) scale(1.08); }
.detail-arrow.prev{ left:14px; }
.detail-arrow.next{ right:14px; }
.detail-meta{ padding:16px 22px 4px; text-align:center; }
.detail-angle{ font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--txt); }
.detail-note{ font-size:13px; color:var(--txt-2); margin-top:5px; line-height:1.6; }
.detail-thumbs{ display:flex; gap:10px; padding:14px 22px 6px; overflow-x:auto; justify-content:center; }
.detail-thumbs .thumb{ flex:0 0 auto; width:76px; height:76px; border-radius:var(--r-sm); overflow:hidden; border:2px solid transparent; cursor:pointer; background:var(--panel-2); transition:border-color .15s,transform .15s; }
.detail-thumbs .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.detail-thumbs .thumb.ph{ display:flex; align-items:center; justify-content:center; color:var(--txt-3); font-size:11px; text-align:center; padding:4px; }
.detail-thumbs .thumb:hover{ transform:translateY(-2px); }
.detail-thumbs .thumb.active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--glow); }
.detail-tip{ text-align:center; font-size:11px; color:var(--txt-3); padding:6px 0 14px; letter-spacing:.5px; }

/* ===================== 通用模态（规格/收藏/周边，覆盖整屏） ===================== */
.modal[data-cover]{ position:fixed; top:0; left:0; right:0; bottom:0; width:100vw; height:100vh; max-width:none; z-index:80; display:flex; align-items:center; justify-content:center; }
.modal[data-cover][hidden]{ display:none !important; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,4,8,.92); backdrop-filter:blur(8px) saturate(120%); -webkit-backdrop-filter:blur(8px) saturate(120%); }
.modal-panel{
  position:relative; width:min(880px,92vw); max-height:88vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--panel),var(--bg-soft));
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent) inset;
  overflow:hidden;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); }
.modal-head h3{ font-size:18px; font-weight:900; color:var(--txt); letter-spacing:-.3px; margin:0; }
.modal-close{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); color:var(--txt-2); border-radius:50%; font-size:18px; cursor:pointer; transition:all .15s; line-height:1; }
.modal-close:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.modal-desc{ padding:14px 24px 0; color:var(--txt-2); font-size:12.5px; line-height:1.6; margin:0; }
.modal-body{ padding:16px 24px 4px; overflow-y:auto; flex:1; min-height:160px; }
.modal-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 24px; border-top:1px solid var(--line); background:rgba(255,255,255,.02); }
.modal-foot-spacer{ flex:1; }
.modal-foot-hint{ font-size:11px; color:var(--txt-3); }

/* 规格管理可编辑行 */
.spec-row-edit{ display:grid; grid-template-columns:24px 1.2fr 2fr 32px; gap:8px; align-items:center; padding:8px 10px; margin-bottom:6px; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(255,255,255,.02); transition:background .15s; }
.spec-row-edit:hover{ background:color-mix(in srgb,var(--accent-2) 6%,transparent); }
.spec-row-edit .si-in{ background:transparent; border:1px dashed var(--line); border-radius:6px; color:var(--txt); text-align:center; font-size:14px; padding:6px 2px; outline:none; font-family:inherit; }
.spec-row-edit .k-in,.spec-row-edit .v-in{ background:transparent; border:1px solid transparent; border-bottom-color:var(--line); color:var(--txt); font-size:13px; padding:6px 8px; border-radius:6px; outline:none; font-family:inherit; width:100%; }
.spec-row-edit .k-in:focus,.spec-row-edit .v-in:focus,.spec-row-edit .si-in:focus{ border-color:var(--accent); background:rgba(255,255,255,.04); }
.spec-row-edit .k-in{ font-weight:600; color:var(--txt-2); }
.spec-row-edit .v-in{ color:var(--txt); }

/* ===================== 预约 CTA 卡片（核心机甲右侧底部） ===================== */
.reserve-cta{
  position:relative; overflow:hidden;
  margin-top:0;          /* 已移到 .viewer-col 内，间距由 viewer-col 的 gap 控制 */
  padding:28px 26px 24px;
  border-radius:var(--r-md); border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 18%,var(--panel)) 0%, color-mix(in srgb,var(--accent) 8%,var(--panel-2)) 100%);
  box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 18%,transparent);
}
.reserve-cta-bg{
  position:absolute; inset:-30% -10% auto auto; width:60%; height:220%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 35%,transparent) 0%, transparent 65%);
  pointer-events:none; filter:blur(8px); opacity:.75;
}
.reserve-cta-content{ position:relative; display:flex; flex-direction:column; gap:14px; }
.reserve-cta-tag{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  padding:5px 12px; border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  color:#fff; font-size:12px; font-weight:600;
}
.reserve-cta-tag .dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent);
  animation:ctaPulse 1.8s ease-in-out infinite;
}
@keyframes ctaPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.25); opacity:.65; } }
.reserve-cta h4{ margin:0; font-size:20px; font-weight:900; color:var(--txt); line-height:1.3; letter-spacing:.5px; text-shadow:0 2px 12px color-mix(in srgb,var(--accent) 30%,transparent); }
.reserve-cta-sub{ margin:0; font-size:13px; color:var(--txt-2); line-height:1.6; }
.reserve-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.reserve-cta-main{
  flex:1 1 auto; min-width:170px; justify-content:center;
  padding:14px 22px; font-size:15px; letter-spacing:1px;
  box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 40%,transparent), inset 0 1px 0 rgba(255,255,255,.18);
}
.reserve-cta-main:hover{ transform:translateY(-2px); box-shadow:0 16px 36px color-mix(in srgb,var(--accent) 50%,transparent); }
.reserve-cta-side{
  padding:14px 22px; font-size:14px; min-width:120px; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  color:#fff;
}
.reserve-cta-side:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 18%,transparent); }
.reserve-cta-foot{
  display:inline-flex; align-items:center; gap:7px; margin-top:2px;
  font-size:11.5px; color:var(--txt-3);
}
.reserve-cta-foot-icon{ display:inline-flex; align-items:center; }

/* ===================== 预约弹窗（二列布局） ===================== */
.reserve-modal{ max-width:680px; padding:32px 28px 22px; }
.reserve-modal .modal-title{
  font-size:18px; font-weight:800; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:24px;
}
.reserve-title-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent);
}
.reserve-grid{
  display:grid; grid-template-columns:220px 1fr; gap:24px;
  align-items:start;
}
.reserve-qr-col{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.reserve-qr-img{ width:220px; height:220px; max-width:100%; object-fit:contain; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.reserve-qr-foot{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--txt-3); text-align:center; line-height:1.5;
}
.reserve-info{ display:flex; flex-direction:column; gap:8px; }
.reserve-row{
  display:grid; grid-template-columns:78px 1fr auto; align-items:center; gap:12px;
  padding:12px 14px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .15s, background .15s;
}
.reserve-row:hover{ border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.reserve-row--hours{ grid-template-columns:78px 1fr; }
.reserve-k{ font-size:12px; font-weight:600; color:var(--txt-3); letter-spacing:.5px; }
.reserve-v{
  font-family:"Courier New",monospace; font-size:14px; font-weight:700;
  color:var(--txt); word-break:break-all; line-height:1.4;
}
.reserve-v--placeholder{ color:var(--txt-3); font-style:italic; font-weight:500; }
.reserve-row .copy-btn{ padding:6px 12px; font-size:12px; }
.reserve-row .copy-btn.copied{ background:var(--accent-2); color:#06222a; }
.reserve-row .copy-btn.disabled{ opacity:.4; cursor:not-allowed; }

/* ===================== 企业微信「一键添加」大按钮 ===================== */
.wework-btn{
  display:flex; align-items:center; gap:14px;
  margin-top:6px; padding:16px 18px;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb,var(--accent) 65%,#ff7a45));
  color:#fff; text-decoration:none; border-radius:var(--r-md);
  box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 40%,transparent), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s;
  position:relative; overflow:hidden;
}
.wework-btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform:translateX(-100%); transition:transform .55s var(--ease);
}
.wework-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px color-mix(in srgb,var(--accent) 50%,transparent), inset 0 1px 0 rgba(255,255,255,.22);
  filter:brightness(1.06);
}
.wework-btn:hover::after{ transform:translateX(100%); }
.wework-btn:active{ transform:translateY(0); }
.wework-btn.disabled{ opacity:.55; cursor:not-allowed; pointer-events:none; }
.wework-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
}
.wework-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; line-height:1.3; }
.wework-text strong{ font-size:15px; font-weight:800; letter-spacing:.5px; }
.wework-text small{ font-size:11.5px; opacity:.85; font-weight:500; }
.wework-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex-shrink:0;
  background:rgba(255,255,255,.14); border-radius:50%;
  transition:transform .2s var(--ease), background .2s;
}
.wework-btn:hover .wework-arrow{ transform:translateX(4px); background:rgba(255,255,255,.24); }

/* 响应式：移动端 CTA 卡 / 弹窗堆叠 */
@media (max-width: 720px){
  .reserve-cta{ padding:22px 20px 20px; }
  .reserve-cta h4{ font-size:17px; }
  .reserve-cta-actions{ flex-direction:column; }
  .reserve-cta-main, .reserve-cta-side{ width:100%; min-width:0; }
  .reserve-modal{ max-width:100%; padding:24px 18px 16px; }
  .reserve-modal .modal-title{ font-size:16px; }
  .reserve-grid{ grid-template-columns:1fr; gap:18px; }
  .reserve-qr-col{ margin:0 auto; }
  .reserve-qr-img{ width:200px; height:200px; }
  .reserve-row{ grid-template-columns:64px 1fr; }
  .reserve-row .copy-btn{ grid-column:1 / -1; justify-self:start; }
  .reserve-row--hours{ grid-template-columns:64px 1fr; }
  .wework-btn{ padding:14px 16px; }
  .wework-icon{ width:32px; height:32px; }
  .wework-text strong{ font-size:14px; }
  .wework-text small{ font-size:11px; }
}
.spec-row-edit .del-btn{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); color:var(--txt-3); border-radius:6px; cursor:pointer; font-size:14px; line-height:1; transition:all .15s; }
.spec-row-edit .del-btn:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.spec-row-edit.is-dirty{ border-left:3px solid var(--accent-2); }

/* 收藏面板条目 */
.fav-item{ display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; padding:12px 14px; margin-bottom:8px; border:1px solid var(--line); border-radius:var(--r-md); background:rgba(255,255,255,.02); transition:all .15s; }
.fav-item:hover{ border-color:color-mix(in srgb,var(--accent-2) 40%,var(--line)); background:rgba(255,255,255,.04); }
.fav-item .fav-icon{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--accent) 14%,transparent); border-radius:var(--r-sm); font-size:22px; color:var(--accent); }
.fav-item .fav-main{ min-width:0; }
.fav-item .fav-title{ font-size:14px; font-weight:700; color:var(--txt); margin:0 0 2px; }
.fav-item .fav-meta{ font-size:11px; color:var(--txt-3); display:flex; gap:8px; flex-wrap:wrap; }
.fav-item .fav-meta .m-key{ color:var(--txt-2); }
.fav-item .fav-del{ background:transparent; border:1px solid var(--line); color:var(--txt-3); padding:6px 12px; border-radius:var(--r-pill); cursor:pointer; font-size:12px; transition:all .15s; font-family:inherit; }
.fav-item .fav-del:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.fav-empty{ text-align:center; color:var(--txt-3); font-style:italic; padding:36px 12px; font-size:13px; }

/* 收藏提示气泡 */
.fav-toast{
  position:fixed; left:50%; bottom:80px; transform:translateX(-50%);
  background:rgba(8,12,18,.94); color:#fff; border:1px solid var(--accent);
  padding:10px 18px; border-radius:var(--r-pill); font-size:13px;
  z-index:90; animation:favToastAnim 2.6s ease forwards;
  box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 18px var(--glow);
}
@keyframes favToastAnim{
  0%{opacity:0;transform:translateX(-50%) translateY(20px)}
  10%,80%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-20px)}
}

/* ===================== 周边专区 · 标题行（左标题 / 右预购提示+CTA） ===================== */
.merch-head{
  display:flex;
  align-items:center;                 /* 左右两块整体垂直居中对齐，视觉平衡一致 */
  justify-content:space-between;
  gap:18px 24px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.merch-head-left{
  min-width:0;
  flex:1 1 320px;
  display:flex; flex-direction:column;
  gap:6px;
}
.merch-head-left h2{ margin:0; line-height:1.2; }
.merch-head-left .sub{ margin:0; line-height:1.5; }
.merch-head-right{
  display:grid;                                   /* grid 让"提示卡拿自适应宽度 + 按钮 auto 固定"可控 */
  grid-template-columns:minmax(0,1fr) auto;       /* 1fr 自动伸缩但永不少于内容；auto 留给按钮 */
  align-items:stretch;                            /* 提示卡与按钮等高拉伸，顶/底边对齐 */
  gap:14px;
  flex:0 1 auto;
  min-width:0;
}
.merch-preorder-text{
  display:flex;                                   /* block-flex，宽度撑满 grid 第一列 */
  align-items:center;
  gap:10px;
  margin:0;
  padding:11px 16px;                              /* 上下 11px、左右 16px，与按钮视觉同高 ~62px */
  font-size:13.5px;
  line-height:1.6;
  white-space:normal;
  text-align:left;
  color:var(--txt-2);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  min-width:0;                                    /* 允许 grid 子项收缩到内容以下，避免外溢 */
  box-sizing:border-box;
  align-self:stretch;
  height:auto;
}
.merch-preorder-text strong{ color:var(--txt); font-weight:700; }
.merch-preorder-icon{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 16px;
  color:var(--accent);
}
.merch-preorder-btn{
  white-space:nowrap;
  text-decoration:none;
  flex:0 0 auto;
  box-sizing:border-box;
  justify-content:center;
}
@media (max-width:760px){                          /* ≤760：右侧两块纵向堆叠，提示卡不再被挤压 */
  .merch-head{ flex-direction:column; align-items:stretch; }
  /* 列方向 flex 时，原 .merch-head-left 的 flex-basis:320px 会变成"高度硬约束 320px"，
     即使 h2+p 只有 ~80px 内容也被撑到 320px，正下方留下 ~240px 无意义空白。
     改用 0 0 auto 让 column 模式下按内容自然高排，空白消失。 */
  .merch-head-left{ flex: 0 0 auto; min-width: 0; }
  .merch-head-right{ grid-template-columns:1fr; }/* 按钮占满第二行 */
  .merch-preorder-btn{ width:100%; }
}

/* ===================== 周边轮播 + 品类弹窗 + 清晰版 ===================== */
.merch-carousel{ display:flex; align-items:center; gap:14px; position:relative; }
.carousel-viewport{ overflow:hidden; flex:1; border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(180deg,var(--panel),var(--bg-soft)); box-shadow:var(--sh-2); }
.carousel-track{ display:flex; gap:18px; padding:22px; transition:transform .45s var(--ease); will-change:transform; }
.carousel-slide{ flex:0 0 auto; width:min(300px,72vw); cursor:pointer; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:transform .25s var(--ease),border-color .25s,box-shadow .25s; }
.carousel-slide:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 14px 34px var(--glow); }
.carousel-slide .cs-thumb{ position:relative; aspect-ratio:1; background:radial-gradient(ellipse at 30% 20%,var(--panel-2),var(--bg-soft)); display:flex; align-items:center; justify-content:center; color:var(--txt-3); font-size:13px; overflow:hidden; }
.carousel-slide .cs-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.carousel-slide .cs-cat{ position:absolute; top:10px; left:10px; padding:3px 10px; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#ff7a45)); color:#fff; font-size:11px; font-weight:700; border-radius:var(--r-pill); z-index:2; }
.carousel-slide .cs-name{ display:block; padding:12px 14px; font-size:15px; font-weight:700; color:var(--txt); }
.carousel-slide .cs-sub{ display:block; padding:0 14px 14px; font-size:12px; color:var(--txt-3); }
.carousel-slide .cs-price{ display:flex; align-items:baseline; gap:8px; padding:0 14px 14px; border-top:1px dashed var(--line); margin:0 14px; padding-top:10px; }
.carousel-slide .cs-price b{ color:#ff5722; font-weight:800; font-size:20px; letter-spacing:-.5px; }
.carousel-slide .cs-price em{ font-style:normal; color:var(--txt-3); font-size:11px; background:var(--bg-soft); padding:2px 6px; border-radius:var(--r-pill); }
/* 主图缺失 / 加载失败时的文字占位。
   注意：全局只有 .thumb .thumb-name 这一条规则，而这里的占位在 .cs-thumb 里，
   选不中 → 文字会顶到左上角且没有字号/留白。必须单独补一条。 */
.carousel-slide .cs-thumb .thumb-name{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; color:var(--txt-2); font-size:14px; line-height:1.5; padding:16px;
}
.carousel-slide .cs-thumb .thumb-name i{ display:block; font-style:normal; font-size:11px; color:var(--txt-3); }

/* 周边轮播空数据态 */
.carousel-empty{
  flex:1 1 auto; min-height:240px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:40px 20px; text-align:center; color:var(--txt-2);
  border:1px dashed var(--line); border-radius:var(--r-md); background:var(--panel-2);
}
.carousel-empty .ce-icon{ font-size:30px; color:var(--accent); opacity:.75; line-height:1; }
.carousel-empty b{ font-size:15px; font-weight:800; color:var(--txt); font-family:var(--font-head); }
.carousel-empty i{ font-style:normal; font-size:12px; color:var(--txt-3); line-height:1.7; max-width:34em; }

.carousel-arrow{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--txt); font-size:24px; line-height:1; cursor:pointer; transition:all .18s; display:flex; align-items:center; justify-content:center; }
.carousel-arrow:hover{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 6px 18px var(--glow); }
.carousel-arrow:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; background:var(--panel); color:var(--txt-3); }
/* gap 从 8 提到 14：让 26px 宽的命中区不与相邻圆点抢点击，同时总宽仍放得下 11 个点 */
.carousel-dots{ display:flex; justify-content:center; gap:14px; margin-top:18px; }
.carousel-dot{ position:relative; width:9px; height:9px; border-radius:50%; border:none; background:var(--line); cursor:pointer; transition:all .2s; padding:0; }
/* 同上：视觉小圆点 + 透明命中区，移动端才点得中（原来是 9×9 实心，手指几乎点不中） */
.carousel-dot::after{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:26px; height:36px;
}
.carousel-dot.active{ background:var(--accent); width:24px; border-radius:6px; }

.merch-panel{ width:min(1180px,90vw); height:min(86vh,880px); }
.merch-info-text{ display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; color:var(--txt); font-size:13.5px; line-height:1.75; }
.merch-info-text .lbl{ flex:0 0 auto; padding:3px 11px; border:1px solid var(--accent); color:var(--accent); border-radius:var(--r-pill); font-size:11px; font-weight:700; background:color-mix(in srgb,var(--accent) 10%,transparent); }
.merch-style-group{ margin-top:22px; }
.merch-style-name{ font-size:14px; font-weight:800; color:var(--txt); margin:0 0 12px; padding-left:12px; border-left:3px solid var(--accent); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.merch-style-name .ms-name{ flex:0 0 auto; }
.merch-style-name .ms-price{ flex:0 0 auto; color:#ff5722; font-size:18px; font-weight:800; letter-spacing:-.5px; }
.merch-style-name .ms-price em{ font-style:normal; color:var(--txt-3); font-size:11px; font-weight:400; background:var(--bg-soft); padding:2px 6px; border-radius:var(--r-pill); margin-left:4px; letter-spacing:0; }
.merch-style-name .ms-sub{ font-weight:400; color:var(--txt-3); font-size:12px; }
.merch-gallery-title{ font-size:14px; font-weight:800; color:var(--txt-2); margin:20px 0 12px; }
.merch-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.merch-img{ position:relative; aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; background:var(--bg-soft); border:1px solid var(--line); cursor:pointer; transition:transform .2s var(--ease),border-color .2s; }
.merch-img:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 10px 26px var(--glow); }
.merch-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.merch-img .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--txt-3); font-size:13px; text-align:center; padding:10px; line-height:1.6; }
/* 无图款式的空态：不能复用 .ph（它的 position:absolute 会覆盖 .merch-img 的 relative，
   导致方块塌成 0 高），改成自身居中 + 虚线描边，和上方空态视觉统一。 */
.merch-img-empty{
  display:flex; align-items:center; justify-content:center;
  color:var(--txt-3); font-size:13px; text-align:center; padding:10px; line-height:1.6;
  border-style:dashed; cursor:default;
}
.merch-img-empty:hover{ transform:none; border-color:var(--line); box-shadow:none; }

.lightbox-layer{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; background:rgba(2,4,8,.96); backdrop-filter:blur(6px); padding:40px; }
.lightbox-layer[hidden]{ display:none !important; }
.lightbox-layer img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r-md); box-shadow:0 20px 60px rgba(0,0,0,.7); }
.lightbox-close{ position:absolute; top:16px; right:18px; width:40px; height:40px; border:none; background:rgba(255,255,255,.08); color:#fff; font-size:26px; border-radius:50%; cursor:pointer; line-height:1; transition:background .15s; }
.lightbox-close:hover{ background:var(--accent); }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border:none; background:rgba(255,255,255,.08); color:#fff; font-size:30px; border-radius:50%; cursor:pointer; line-height:1; transition:background .15s; }
.lightbox-nav:hover{ background:var(--accent); }
.lightbox-nav.prev{ left:18px; }
.lightbox-nav.next{ right:18px; }
.lightbox-count{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:var(--txt-2); font-size:13px; background:rgba(0,0,0,.4); padding:5px 14px; border-radius:var(--r-pill); }

/* ===================== 私域悬浮浮窗（加微信 / WhatsApp / QQ） ===================== */
.floating-cta{ position:fixed; right:26px; bottom:26px; z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.fcta-toggle{ width:auto; min-width:46px; height:32px; padding:0 14px; border-radius:var(--r-pill); background:var(--panel); color:var(--txt-2); border:1px solid var(--line); cursor:pointer; font-size:16px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); transition:all .2s; align-self:flex-end; }
.fcta-toggle:hover{ color:var(--txt); border-color:var(--accent); transform:translateY(-1px); }
/* 面板恒定绝对定位在按钮上方（不管是展开还是收起）。
   原实现只在 :not(.open) 时 absolute，展开时面板回到文档流（static）——
   而 DOM 顺序是「按钮在前、面板在后」，flex column 于是把按钮顶到容器最上方、
   面板反而跑到按钮下面：既与设计意图（面板浮在按钮上方）相反，
   又让按钮在展开/收起之间上下跳 277px，用户点完第一下，第二下必然落空。
   改成恒定 absolute 后，容器高度恒等于按钮高度，按钮位置永远不动。 */
.fcta-panel{ position:absolute; bottom:100%; right:0; margin-bottom:10px; width:218px; padding:16px; background:color-mix(in srgb,var(--panel) 88%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-3); display:flex; flex-direction:column; gap:9px; transform-origin:bottom right; transition:opacity .2s var(--ease),transform .2s var(--ease); }
/* 收起态：透明 + 下移缩小 + 不拦截指针。visibility 延后到动画结束再切，避免打断过渡 */
.fcta-panel:not(.open){ opacity:0; transform:translateY(8px) scale(.95); pointer-events:none; visibility:hidden; transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s; }
.fcta-head{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.fcta-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--glow); animation:pulseDot 1.8s ease-in-out infinite; }
.fcta-title{ font-size:12px; color:var(--txt-2); letter-spacing:.5px; font-family:var(--font-head); font-weight:700; }
.fcta-btn{ display:flex; align-items:center; gap:11px; width:100%; padding:12px 15px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--txt); font-size:14px; font-weight:700; cursor:pointer; transition:all .18s; font-family:var(--font-head); text-align:left; }
.fcta-btn .ico{ font-size:18px; width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--accent) 14%,transparent); flex:0 0 auto; }
.fcta-btn.wechat .ico{ background:color-mix(in srgb,var(--accent) 18%,transparent); }
.fcta-btn.whatsapp .ico{ background:rgba(37,211,102,.18); }
.fcta-btn.qq .ico{ background:rgba(22,119,255,.18); }
.fcta-btn:hover{ border-color:var(--accent); color:#fff; transform:translateX(-2px); box-shadow:var(--sh-1); }
.fcta-btn.wechat:hover{ background:var(--accent); }
.fcta-btn.whatsapp:hover{ background:#25d366; border-color:#25d366; }
.fcta-btn.qq:hover{ background:#1677ff; border-color:#1677ff; }
.fcta-foot{ font-size:11px; color:var(--txt-3); text-align:center; margin-top:3px; letter-spacing:.5px; }

@keyframes pulseDot{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.5); opacity:.45; }
}

/* === T 恤尺码对照图（弹窗视图，点击放大） === */
.merch-modal .ms-size{
  position: relative;
  margin: 12px 0 16px;
  padding: 0 4px;
  cursor: zoom-in;
}
.merch-modal .ms-size img{
  display:block;
  width:100%;
  height:auto;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: filter .15s;
}
.merch-modal .ms-size:hover img{
  filter: brightness(1.06);
}
.merch-modal .ms-size .zoom-hint{
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 12px;
  color: var(--txt);
  background: rgba(2,4,8,.62);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  pointer-events: none;
  backdrop-filter: blur(2px);
}

/* ===================== Hero CTA（PDP 入口） ===================== */
.hero-cta{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.hero-cta .btn-lg{
  font-size: 15.5px;
  padding: 14px 26px;
  letter-spacing: .04em;
  box-shadow: 0 10px 32px color-mix(in srgb, var(--accent) 34%, transparent), 0 2px 0 rgba(255,255,255,.08) inset;
  cursor: pointer;
}
.hero-cta .btn-lg .arr{
  margin-left: 4px;
  transition: transform .18s ease;
  display: inline-block;
}
.hero-cta .btn-lg:hover .arr{ transform: translateX(3px); }
.hero-cta-hint{
  font-size: 12px;
  color: var(--txt-2);
  letter-spacing: .02em;
  opacity: .78;
}
.hero[data-pdp-go]{ cursor: pointer; }

/* ===================== PDP 页面（路由切换显示） ===================== */
body[data-page="pdp"] main > section:not(.pdp-page){ display: none; }
body[data-page="home"] .pdp-page{ display: none; }

.pdp-page{
  padding: 28px 0 80px;
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 60%),
    var(--bg);
}
.pdp-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pdp-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--txt);
  background: color-mix(in srgb, var(--txt) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .18s, transform .18s, border-color .18s;
  font-family: inherit;
}
.pdp-back:hover{
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  transform: translateX(-2px);
}
.pdp-crumbs{
  font-size: 12px;
  color: var(--txt-2);
  letter-spacing: .02em;
}
.pdp-crumbs span[data-pdp-ip],
.pdp-crumbs span[data-pdp-product]{
  color: var(--txt);
}

.pdp-title{
  font-size: 42px;
  font-weight: 700;
  margin: 8px 0 10px;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  line-height: 1.2;
}
.pdp-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.pdp-sub{
  font-size: 19px;
  color: var(--txt-2);
  margin: 6px 0 22px;
  letter-spacing: .04em;
  line-height: 1.6;
}
.pdp-desc{
  font-size: 19px;
  color: var(--txt-2);
  line-height: 1.85;
  margin: 0 0 36px;
  max-width: 860px;
}

/* ===================== PDP 单栏纵向流（淘宝详情页式） ===================== */
/* —— 图块纵向流 —— */
.pdp-figure-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* —— T 恤尺码对照表（PDP 全宽区块，与规格区间隔） —— */
.pdp-size-chart{
  margin: 36px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pdp-size-zoom{
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(180deg, #f7f7f7 0%, #ececec 100%);
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.pdp-size-zoom:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 18%, transparent);
}
.pdp-size-zoom img{
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}
.pdp-size-zoom .zoom-hint{
  display: block;
  padding: 10px 14px;
  background: rgba(7, 10, 17, .55);
  color: #fff;
  font-size: 13px;
  letter-spacing: .02em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pdp-figure-block{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pdp-figure-image{
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #f7f7f7 0%, #ececec 100%);
  position: relative;
}
.pdp-figure-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transition: transform .45s var(--ease);
}
/* 桌面端 hover：图片轻微放大，增强浏览反馈（移动端无 hover，无副作用） */
.pdp-figure-block:hover .pdp-figure-image{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 18%, transparent);
}
.pdp-figure-block:hover .pdp-figure-image img{
  transform: scale(1.045);
}
/* 悬浮序号标签：左上角半透明角标，叠在图片上 */
.pdp-figure-index{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 30px;
  padding: 0 10px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: rgba(7, 10, 17, .58);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  pointer-events: none;
}
.pdp-figure-cap{
  padding: 4px 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pdp-figure-no{
  display: inline-block;
  width: fit-content;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border-radius: var(--r-pill);
}
.pdp-figure-title{
  font-size: 24px;
  font-weight: 700;
  margin: 2px 0 0;
  color: var(--txt);
  line-height: 1.4;
}
.pdp-figure-note{
  font-size: 18px;
  color: var(--txt-2);
  line-height: 1.75;
  margin: 0;
}

/* —— 规格 · 收藏保障 双列并排（紧凑布局，避免水平空间浪费） —— */
.pdp-detail-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px;
  margin: 24px 0 28px;   /* 与上方 5 图块流 / 下方团队块保持间距 */
  align-items: start;
}
@media (max-width: 880px){
  .pdp-detail-grid{ grid-template-columns: 1fr; gap: 22px; }
}

/* —— 详细规格表 —— */
.pdp-spec-wrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pdp-col-title{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--txt);
  letter-spacing: .02em;
  line-height: 1.3;
}
.pdp-col-title-rule{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.pdp-spec-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pdp-spec-head h3{
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.pdp-verified{
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  letter-spacing: .04em;
}
.pdp-spec-table{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.pdp-spec-row{
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.pdp-spec-row:last-child{ border-bottom: 0; }
.pdp-spec-ic{ font-size: 18px; opacity: .86; }
.pdp-spec-k{ color: var(--txt-2); }
.pdp-spec-v{ color: var(--txt); font-weight: 600; text-align: right; }
.pdp-spec-row.hl-row{
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.pdp-spec-row.hl-row .pdp-spec-v{
  color: var(--accent);
  font-weight: 700;
}

/* —— 收藏保障（右列内） —— */
.pdp-guarantee{
  padding: 22px 24px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pdp-guarantee h3{
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdp-section-mark{
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--accent);
  border-radius: 2px;
}
.pdp-guarantee-list{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pdp-guarantee-list li{
  font-size: 16px;
  color: var(--txt);
  line-height: 1.65;
}
.pdp-footnote{
  font-size: 14px;
  color: var(--txt-2);
  line-height: 1.85;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  margin: 4px 0 0;
}

/* —— 创作团队：4 列并排卡片墙 —— */
.pdp-team{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pdp-team h3{
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdp-team-list{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.pdp-team-row{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pdp-team-role{
  color: var(--txt-2);
  font-size: 12px;
  letter-spacing: .04em;
}
.pdp-team-name{
  color: var(--txt);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
}
@media (max-width: 880px){
  .pdp-team-list{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .pdp-team-list{ grid-template-columns: 1fr; }
}

/* —— IP 描述 + 免责声明 —— */
.pdp-ip-desc{
  font-size: 14px;
  color: var(--txt-2);
  line-height: 1.85;
  border-left: 3px solid var(--accent);
  padding: 8px 0 8px 18px;
  margin: 0;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border-radius: 0 6px 6px 0;
}
.pdp-ip-desc p{ margin: 0; }

.pdp-disclaimer{
  font-size: 16px;
  color: var(--txt-3, #6b7280);
  line-height: 1.7;
  margin: 0;
  letter-spacing: .02em;
}

/* —— 定金卡 —— */
.pdp-deposit{
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #1a0404) 0%, color-mix(in srgb, var(--accent) 78%, #2b0707) 100%);
  border-radius: var(--r-md);
  padding: 26px 28px;
  color: #fff;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 20%, transparent);
}
.pdp-deposit-badge{
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  background: rgba(255,255,255,.16);
  border-radius: var(--r-pill);
  letter-spacing: .04em;
}
.pdp-deposit-title{
  font-size: 22px;
  font-weight: 700;
  margin: 14px 0 10px;
  line-height: 1.4;
}
.pdp-deposit-title .hl{
  background: rgba(255,255,255,.22);
  color: #fff;
  padding: 1px 8px;
  border-radius: 6px;
}
.pdp-deposit-desc{
  font-size: 15px;
  opacity: .92;
  margin: 0 0 18px;
  line-height: 1.7;
}
.pdp-deposit-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pdp-deposit-actions .btn{
  flex: 1 1 auto;
  min-width: 160px;
  font-size: 15px;
}
.pdp-deposit-actions .btn-primary{
  background: #fff;
  color: var(--accent);
  font-weight: 700;
}
.pdp-deposit-actions .btn-primary:hover{
  background: color-mix(in srgb, #fff 88%, var(--accent));
}
.pdp-deposit-actions .btn-ghost{
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.32);
}
.pdp-deposit-actions .btn-ghost:hover{
  background: rgba(255,255,255,.22);
}
.pdp-deposit-time{
  font-size: 13px;
  opacity: .82;
  margin: 0;
  letter-spacing: .02em;
}

/* ===================== PDP 移动端适配 ===================== */
@media (max-width: 640px){
  .pdp-page{ padding: 14px 0 56px; }
  .pdp-top{ margin-bottom: 10px; }
  /* 标题三段（title/sub/desc）在 ≤640 视口叠起来占 ~280px 高度，
     让产品图被挤到屏幕下方、文案主导画面。整体往下收：title 28→22，sub/desc 各降一档，
     配 line-height 1.18~1.7、行距收紧，省下 ~80px 给首张产品图。 */
  .pdp-title{ font-size: 22px; line-height: 1.2; margin: 4px 0 8px; padding-bottom: 6px; }
  .pdp-title::after{ width: 44px; height: 2px; }
  .pdp-sub{ font-size: 14px; margin: 4px 0 12px; line-height: 1.5; letter-spacing: .02em; }
  .pdp-desc{ font-size: 14.5px; line-height: 1.7; margin: 0 0 20px; max-width: 100%; }
  .pdp-figure-list{ gap: 22px; }
  .pdp-figure-image{ border-radius: var(--r-sm); }
  .pdp-figure-index{ top: 10px; left: 10px; min-width: 34px; height: 26px; font-size: 13px; }
  .pdp-figure-title{ font-size: 20px; }
  .pdp-figure-note{ font-size: 16px; }
  /* 双列网格在手机端堆叠，spec 列内两张表上下承接 */
  .pdp-detail-grid{ gap: 18px; margin-bottom: 22px; }
  .pdp-col-title{ font-size: 17px; }
  .pdp-col-title-rule{ margin-top: 12px; padding-top: 12px; }
  .pdp-spec-row{ padding: 11px 14px; font-size: 14.5px; gap: 10px; }
  .pdp-spec-ic{ font-size: 15px; }
  .pdp-guarantee{ padding: 18px 16px; }
  .pdp-guarantee h3{ font-size: 17px; margin-bottom: 10px; }
  .pdp-guarantee-list li{ font-size: 15px; line-height: 1.6; }
  .pdp-footnote{ font-size: 13px; }
  .pdp-team-list{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pdp-team-row{ padding: 14px 14px; }
  .pdp-team-name{ font-size: 15px; }
  .pdp-ip-desc{ font-size: 15px; }
  .pdp-disclaimer{ font-size: 14px; }
  .pdp-deposit{ padding: 22px 20px; }
  .pdp-deposit-title{ font-size: 20px; }
  .pdp-deposit-desc{ font-size: 15px; }
  .pdp-deposit-actions .btn{ font-size: 15px; }
}