/* ============================================================
   产品详情页 · hik_product_detail.html 配套样式 v20260928
   设计方向：规格书式详情页（datasheet）。
   令牌沿用站内 style.css :root（#0052cc 蓝系），无渐变、无 tab。
   ============================================================ */

/* ---------- 焦点可达性（站内全局补齐） ---------- */
.pd-hero a:focus-visible,
.pd-body a:focus-visible,
.pd-related a:focus-visible,
.pd-cta a:focus-visible,
.pd-thumb:focus-visible,
.pd-mobile-bar a:focus-visible {
    outline: 2px solid var(--primary-color, #0052cc);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 顶部：画廊 + 采购信息 ---------- */
.pd-hero {
    padding: 28px 0 52px;
    background: #fff;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.pd-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

/* 画廊 */
.pd-gallery-main {
    margin: 0;
    background: #fafbfc;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-gallery-main img {
    max-width: 92%;
    max-height: 92%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.pd-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.pd-thumb {
    width: 68px;
    height: 68px;
    padding: 0;
    border: 1px solid var(--border-gray, #cbd5e0);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pd-thumb:hover { border-color: var(--primary-color, #0052cc); }

.pd-thumb.is-active {
    border-color: var(--primary-color, #0052cc);
    box-shadow: 0 0 0 1px var(--primary-color, #0052cc);
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 信息区 */
.pd-category {
    margin: 0 0 10px;
    font-size: 13px;
}

.pd-category a {
    color: var(--text-muted, #718096);
    text-decoration: none;
    border-bottom: 1px dashed var(--border-gray, #cbd5e0);
    padding-bottom: 1px;
}

.pd-category a:hover { color: var(--primary-color, #0052cc); }

.pd-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: var(--text-primary, #1a202c);
}

.pd-subtitle {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--text-secondary, #4a5568);
}

.pd-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 14px 0 18px;
    padding: 12px 0;
    border-top: 1px solid var(--border-light, #e2e8f0);
    border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.pd-fact {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
}

.pd-fact-label { color: var(--text-muted, #718096); }
.pd-fact-value { color: var(--text-primary, #1a202c); font-weight: 500; }

/* 价格面板：浅蓝底实色，不用渐变 */
.pd-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    padding: 14px 18px;
    background: var(--primary-light, #e6f0ff);
    border-left: 3px solid var(--primary-color, #0052cc);
    border-radius: 0 8px 8px 0;
}

.pd-price-label { font-size: 13px; color: var(--text-secondary, #4a5568); }

.pd-price-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-dark, #003d99);
    line-height: 1.2;
}

.pd-price-note { font-size: 12px; color: var(--text-muted, #718096); }

.pd-brief {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-secondary, #4a5568);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 操作与服务 */
.pd-actions {
    display: flex;
    gap: 14px;
    margin: 22px 0 16px;
}

.pd-actions .btn { flex: 1; }

.pd-service {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--text-muted, #718096);
}

.pd-service i {
    color: var(--primary-color, #0052cc);
    font-size: 12px;
    margin-right: 5px;
}

/* ---------- 正文：规格表为主体 ---------- */
.pd-body {
    padding: 48px 0 56px;
    background: #f7f9fc;
}

.pd-sec-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.pd-sec-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    white-space: nowrap;
}

.pd-sec-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-gray, #cbd5e0);
}

.pd-spec-content {
    background: #fff;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    padding: 34px 32px 24px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-secondary, #4a5568);
}

.pd-spec-content > *:first-child { margin-top: 0; }
.pd-spec-content > *:last-child { margin-bottom: 0; }

.pd-spec-content p { margin: 0 0 14px; }

.pd-spec-content h3 {
    margin: 26px 0 12px;
    padding-left: 10px;
    border-left: 3px solid var(--primary-color, #0052cc);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    line-height: 1.4;
}

.pd-spec-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.pd-spec-content a {
    color: var(--primary-color, #0052cc);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 82, 204, 0.35);
}

.pd-spec-content a:hover { color: var(--primary-dark, #003d99); }

/* 规格表：章节行为浅蓝条，首列为弱标签列 */
.pd-spec-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 18px;
    font-size: 14px;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

.pd-spec-content th,
.pd-spec-content td {
    padding: 9px 14px;
    border: 1px solid var(--border-light, #e2e8f0);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.pd-spec-content thead th {
    background: #f8fafc;
    color: var(--text-muted, #718096);
    font-size: 13px;
    font-weight: 500;
}

.pd-spec-content td:first-child {
    width: 168px;
    background: #fafbfc;
    color: var(--text-primary, #1a202c);
    font-weight: 500;
}

.pd-spec-content td[colspan] {
    background: var(--primary-light, #e6f0ff);
    border-left: 3px solid var(--primary-color, #0052cc);
    color: var(--primary-dark, #003d99);
    font-weight: 600;
}

/* ---------- 同类产品 ---------- */
.pd-related {
    padding: 48px 0 60px;
    background: #fff;
}

.pd-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.pd-related-card {
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-related-card:hover {
    border-color: var(--border-gray, #cbd5e0);
    box-shadow: 0 6px 18px rgba(26, 32, 44, 0.07);
}

.pd-related-img {
    display: block;
    aspect-ratio: 4 / 3;
    background: #fafbfc;
    overflow: hidden;
}

.pd-related-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    transition: transform 0.2s ease;
}

.pd-related-card:hover .pd-related-img img { transform: scale(1.03); }

.pd-related-info { padding: 14px 14px 16px; }

.pd-related-info h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.pd-related-info h3 a {
    color: var(--text-primary, #1a202c);
    text-decoration: none;
}

.pd-related-info h3 a:hover { color: var(--primary-color, #0052cc); }

.pd-related-meta {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.pd-related-price { color: var(--primary-dark, #003d99); font-weight: 600; }
.pd-related-price.is-ask { font-weight: 500; }
.pd-related-brand { color: var(--text-muted, #718096); }

/* ---------- CTA ---------- */
.pd-cta { padding: 0 0 64px; background: #fff; }

.pd-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 36px;
    background: var(--primary-color, #0052cc);
    border-radius: 10px;
}

.pd-cta-copy h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.pd-cta-copy p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }

.pd-cta .btn-white { flex: none; }

/* ---------- 移动端底部询价条 ---------- */
.pd-mobile-bar { display: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
    .pd-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .pd-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pd-spec-content { padding: 22px 20px 18px; }
}

@media (max-width: 768px) {
    .pd-hero { padding: 18px 0 36px; }
    .pd-title { font-size: 21px; }
    .pd-price-value { font-size: 22px; }
    .pd-related { padding-bottom: 40px; }
    .pd-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .pd-cta { padding-bottom: 40px; }
    .pd-cta-card { flex-direction: column; align-items: flex-start; padding: 24px 22px; }

    .pd-mobile-bar {
        display: flex;
        gap: 10px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--border-light, #e2e8f0);
        box-shadow: 0 -4px 16px rgba(26, 32, 44, 0.08);
    }

    .pd-mobile-bar a {
        flex: 1;
        text-align: center;
        padding: 11px 0;
        border-radius: 6px;
        font-size: 15px;
        text-decoration: none;
    }

    .pd-mobile-ask {
        flex: 2;
        background: var(--primary-color, #0052cc);
        color: #fff;
        font-weight: 600;
    }

    .pd-mobile-tel {
        color: var(--primary-color, #0052cc);
        border: 1px solid var(--primary-color, #0052cc);
    }

    body { padding-bottom: 78px; }
}

@media (max-width: 480px) {
    .pd-spec-content td, .pd-spec-content th { padding: 8px 12px; }
    .pd-spec-content td:first-child { width: 116px; }
    .pd-thumb { width: 56px; height: 56px; }
    .pd-actions { flex-direction: column; }
    .pd-facts { gap: 6px 18px; }
}

/* ---------- 打印 ---------- */
@media print {
    .pd-mobile-bar, .pd-cta, .pd-related, .back-to-top { display: none !important; }
    .pd-hero { border-bottom: none; }
}

/* ---- 内容排版结构（2026-09-29 华为详情）：h4 小节 / 圆点列表 / 场景引导 ---- */
.pd-spec-content h4 {
    margin: 22px 0 10px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    line-height: 1.5;
}

.pd-spec-content h4 + table { margin-top: 0; }

.pd-spec-content ul {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.pd-spec-content ul li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 18px;
    line-height: 1.7;
}

.pd-spec-content ul li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.66em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--primary-color, #0052cc);
}

.pd-spec-content ul li:last-child { margin-bottom: 0; }

.pd-spec-content p.hw-scene {
    margin: 18px 0 8px;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
}