/* product_detail.css */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f7fa; color: #1f2937; }
a { text-decoration: none; color: inherit; }

.topnav { background: #1f2937; color: #fff; }
.nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 60px; }
.logo { font-size: 18px; font-weight: 700; color: #fff; }
.nav-links { display: flex; gap: 28px; font-size: 15px; }
.nav-links a { color: #d1d5db; transition: color .2s; }
.nav-links a:hover { color: #fff; }
.nav-drop{position:relative}
.nav-drop-toggle::after{content:" \25BE";font-size:11px;opacity:.7}
.nav-drop-menu{display:none;position:absolute;top:100%;left:-10px;min-width:170px;background:#1f2937;border:1px solid #374151;border-radius:0 0 8px 8px;box-shadow:0 6px 16px rgba(0,0,0,.25);padding:6px 0;z-index:200}
.nav-drop-menu a{display:block;padding:8px 16px;font-size:14px;color:#d1d5db;white-space:nowrap}
.nav-drop-menu a:hover{background:rgba(24,95,165,.35);color:#fff}
.nav-drop:hover>.nav-drop-menu,.nav-drop.open>.nav-drop-menu{display:block}
.back-to-top{position:fixed;right:24px;bottom:24px;width:44px;height:44px;border-radius:50%;background:rgba(24,95,165,.55);color:#fff;border:none;cursor:pointer;z-index:999;font-size:20px;line-height:44px;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s,background .2s;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.back-to-top:hover{background:rgba(24,95,165,.8)}
.back-to-top.show{opacity:1;pointer-events:auto}
.lang { display: flex; gap: 10px; font-size: 14px; }
.lang span { padding: 4px 10px; border-radius: 4px; cursor: pointer; color: #d1d5db; }
.lang span.active { background: #2563eb; color: #fff; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
.breadcrumb { font-size: 13px; color: #6b7280; margin-bottom: 20px; }
.breadcrumb a { color: #2563eb; }
.breadcrumb span { color: #374151; }

.detail-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.04); padding: 32px; }
.detail-grid { display: flex; gap: 40px; flex-wrap: wrap; }
.gallery { flex: 0 0 420px; height: 420px; border: 1px solid #e5e7eb; border-radius: 10px; display: flex; align-items: center; justify-content: center; background:#ffffff; position: relative; overflow: hidden; }
.gallery img { max-width: 90%; max-height: 90%; object-fit: contain; display: block; }
.gallery .placeholder { position: absolute; color: #9ca3af; font-size: 18px; display: none; }
.gallery.fallback .placeholder { display: block; }
.info { flex: 1; min-width: 320px; }
.detail-grid.no-image .gallery { display: none; }
.detail-grid.no-image .info { flex: 1 1 100%; max-width: 100%; }
.brand { font-size: 14px; color: #6b7280; margin-bottom: 8px; }
h1 { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.subtitle { font-size: 14px; color: #6b7280; margin-bottom: 16px; }
.desc { font-size: 14px; color: #374151; line-height: 1.7; margin-bottom: 20px; white-space: pre-line; }
.price-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.price { font-size: 28px; font-weight: 700; color: #2563eb; }
.btns { display: flex; gap: 12px; margin-bottom: 24px; }
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 6px; font-size: 14px; cursor: pointer; border: none; text-decoration: none; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-secondary { background: #fff; color: #374151; border: 1px solid #d1d5db; }
.scenes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.scene-label { font-size: 13px; color: #374151; font-weight: 600; }
.scene-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.scene-tags span { background: #eff6ff; color: #1d4ed8; padding: 4px 12px; border-radius: 20px; font-size: 13px; }

.section { margin-top: 32px; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.04); padding: 24px 32px; }
.sec-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; padding-left: 10px; border-left: 4px solid #2563eb; }
.spec-images { margin-bottom: 20px; }
.spec-images img { width: 100%; height: auto; display: block; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.spec-h3 { font-size: 15px; margin: 18px 0 8px; color: #0f172a; font-weight: 600; }
.spec-desc { margin-bottom: 20px; }
.spec-desc p { font-size: 14px; color: #4b5563; line-height: 1.9; margin-bottom: 8px; }
.spec-performance { margin-bottom: 20px; }
.spec-performance p { font-size: 14px; color: #374151; line-height: 1.9; margin-bottom: 6px; }
.spec-feature ul { margin: 0; padding-left: 20px; line-height: 1.9; color: #334155; }
.spec-feature li { margin-bottom: 4px; }
.spec-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-tag { display: inline-block; border-radius: 14px; padding: 4px 14px; font-size: 13px; line-height: 1.5; }
.spec-table { width: auto; max-width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; }
.spec-table thead th { background: #f9fafb; color: #6b7280; font-weight: 600; width: auto; min-width: 120px; white-space: nowrap; }
.spec-wide-table-wrap { overflow-x: auto; margin-top: 8px; }
.spec-wide-table-wrap table { width: auto !important; max-width: 100%; margin-left: 0 !important; margin-right: auto !important; border-collapse: collapse; font-size: 14px; }
.spec-wide-table-wrap th, .spec-wide-table-wrap td { padding: 10px 14px; border: 1px solid #e5e7eb; text-align: left; }
.spec-wide-table-wrap thead th { background: #1e3a5f; color: #fff; font-weight: 600; white-space: nowrap; }
.spec-wide-table-wrap tbody tr:nth-child(even) { background: #f8fafc; }

.rec-list { display: flex; flex-direction: column; gap: 12px; }
.rec-card { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; transition: box-shadow .2s; }
.rec-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.rec-img { width: 80px; height: 80px; border: 1px solid #e5e7eb; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #f9fafb; overflow: hidden; position: relative; }
.rec-img img { max-width: 90%; max-height: 90%; object-fit: contain; display: block; }
.rec-img .placeholder { position: absolute; color: #9ca3af; font-size: 12px; display: none; }
.rec-img.fallback .placeholder { display: block; }
.rec-info { flex: 1; }
.rec-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.rec-sub { font-size: 13px; color: #6b7280; }
.rec-arrow { color: #2563eb; font-size: 13px; white-space: nowrap; }
.page-foot { text-align: center; color: #9ca3af; font-size: 13px; padding: 30px; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .gallery { flex: 1 1 100%; height: 300px; }
}

/* 同档机型对比（详情页内嵌） */
.inline-cmp { margin-top: 4px; }
.inline-cmp-ref { background: linear-gradient(135deg,#1e3a8a,#2563eb); color: #fff; border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; font-size: 14px; line-height: 1.6; }
.inline-cmp-ref b { font-size: 16px; }
.inline-cmp-ref .num { font-weight: 700; opacity: .95; }
.inline-cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); table-layout: fixed; }
.inline-cmp-table th, .inline-cmp-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #eef2f7; vertical-align: middle; }
.inline-cmp-table th { background: #f1f5f9; color: #334155; font-weight: 600; }
.inline-cmp-table td { word-break: break-word; }
.inline-cmp-table td.brand { font-weight: 600; color: #1e293b; }
.inline-cmp-table td.model { color: #2563eb; font-weight: 600; }
.inline-cmp-table td.model a:hover { text-decoration: underline; }
.inline-cmp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.inline-cmp-table tr:hover { background: #f8fafc; }
.inline-cmp-table .num { font-variant-numeric: tabular-nums; }
.badge { display: inline-block; min-width: 58px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.ok { background: #dcfce7; color: #15803d; }
.badge.warn { background: #fef9c3; color: #a16207; }
.badge.bad { background: #fee2e2; color: #b91c1c; }
.inline-cmp-note { margin-top: 12px; font-size: 12.5px; color: #94a3b8; line-height: 1.7; }

@media (max-width: 768px) {
  .inline-cmp-table { display: block; overflow-x: auto; }
  .inline-cmp-table th, .inline-cmp-table td { padding: 10px 8px; font-size: 13px; white-space: nowrap; }
}

/* 微信二维码弹窗 */
.modal-mask { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 999; align-items: center; justify-content: center; }
.modal-box { position: relative; background: #fff; border-radius: 14px; padding: 28px 32px 32px; text-align: center; max-width: 320px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.modal-box h3 { font-size: 18px; margin-bottom: 8px; color: #1f2937; }
.modal-box p { font-size: 13px; color: #6b7280; margin-bottom: 16px; }
.modal-box .qr-img { width: 200px; height: 200px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 8px; }
.modal-box .qr-id { margin-top: 14px; font-size: 14px; color: #2563eb; font-weight: 600; }
.modal-close { position: absolute; top: 10px; right: 14px; font-size: 24px; line-height: 1; color: #9ca3af; cursor: pointer; }
.modal-close:hover { color: #374151; }