/* ========================================
   Product Detail V2 Shared Styles
   说明：该文件是产品详情页族的共享视觉骨架。
   作用：统一 banner、白卡容器、悬浮目录、按钮、表格与区块层级，
   并通过 body.product-detail-v2 作用域避免影响非详情页。
   ======================================== */

body.product-detail-v2 {
    /* 统一详情页锚点偏移，供 CSS scroll-margin 和 JS 平滑滚动共用。 */
    --detail-scroll-offset: 108px;
    --detail-card-radius: var(--v2-radius-lg);
    --detail-card-radius-md: var(--v2-radius-md);
    --detail-control-radius: var(--v2-radius-sm);
    --detail-card-shadow: var(--v2-shadow-card);
    --detail-card-shadow-hover: var(--v2-shadow-card-hover);
    --detail-border-color: var(--v2-bg-divider);
    --detail-surface-muted: var(--v2-bg-functional);
    --detail-surface-hover: var(--v2-bg-action);
}

/* 详情页统一背景层级，直接对齐视觉规范中的页面内容背景色。
 * 说明：
 * - 外层页面底色使用内容背景色，避免共享层继续叠加品牌蓝渐变造成“页面底色偏蓝”。
 * - 深色 banner、白卡内容区和功能区层级继续分别在各自模块内处理，不在 page-wrapper 叠加装饰背景。
 */
body.product-detail-v2 .page-wrapper {
    background: var(--v2-bg-content);
    min-height: 100vh;
}

/* 统一详情页 banner 外壳，避免各页保留旧的黑灰层级。 */
body.product-detail-v2 .atf-page-heading.atf-align-left {
    position: relative;
    min-height: 640px;
    padding: 0;
    overflow: hidden;
}

/* 详情页 banner 不再额外挂共享蒙层。
 * 说明：
 * - 用户已明确要求 banner 区域不要再叠加额外背景色。
 * - 这里直接移除 ::before，保留原始 banner 图像与文案层级。
 */
body.product-detail-v2 .atf-page-heading.atf-align-left::before {
    content: none;
    background: none;
    opacity: 0;
}

/* 内页 banner 文字区域顶部留白与导航体系对齐。 */
body.product-detail-v2 .atf-page-heading.atf-align-left .atf-page-heading-in {
    position: relative;
    z-index: 1;
    padding-top: 152px;
    padding-bottom: 56px;
}

/**
 * V2 详情页 banner 标题统一层级。
 *
 * 说明：
 * - 公共左对齐 Banner 已为标题容器预留了右侧安全区；
 * - 这里不再把标题强制锁死为固定超大字号，避免长标题重新侵入主视觉；
 * - 继续保持 V2 标题层级，但把字号收口到响应式范围内。
 */
body.product-detail-v2 .atf-page-heading.atf-align-left .atf-page-heading-title {
    margin-bottom: 18px;
    /* 标准详情页 banner 文案默认改为深色语义，不再假设背景图一定偏暗。 */
    color: var(--v2-text-heading);
    font-size: clamp(var(--v2-h2-font-size), 3.4vw, var(--v2-h0-font-size));
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* banner 副标题与补充文案统一改为深色语义，保留原图且不添加背景承托层。 */
body.product-detail-v2 .atf-page-heading.atf-align-left h2,
body.product-detail-v2 .atf-page-heading.atf-align-left h4,
body.product-detail-v2 .atf-page-heading.atf-align-left .container_station-ban,
body.product-detail-v2 .atf-page-heading.atf-align-left .container_station-ban > h1,
body.product-detail-v2 .atf-page-heading.atf-align-left .container_station-ban > h2,
body.product-detail-v2 .atf-page-heading.atf-align-left .container_station-ban > span,
body.product-detail-v2 .atf-page-heading.atf-align-left .atf-page-heading-in > span {
    position: relative;
    z-index: 1;
    color: var(--v2-text-body);
}

/* 面包屑统一为深色层级：
 * - 链接与分隔使用辅助色
 * - 最后一级和非链接文本使用正文色
 * - hover 使用第一套主蓝强调
 */
body.product-detail-v2 .atf-page-heading.atf-align-left .atf-post-label {
    position: relative;
    z-index: 1;
    color: var(--v2-text-secondary);
}

body.product-detail-v2 .atf-page-heading.atf-align-left .atf-post-label span a,
body.product-detail-v2 .atf-page-heading.atf-align-left .atf-post-label > span:not(:last-child)::after {
    color: var(--v2-text-secondary);
}

body.product-detail-v2 .atf-page-heading.atf-align-left .atf-post-label > span:last-child,
body.product-detail-v2 .atf-page-heading.atf-align-left .atf-post-label > span:not(:has(a)) {
    color: var(--v2-text-body);
}

body.product-detail-v2 .atf-page-heading.atf-align-left .atf-post-label span a:hover,
body.product-detail-v2 .atf-page-heading.atf-align-left .atf-post-label span a:focus-visible {
    color: var(--v2-primary-500);
}

/* 详情页共享 Buy Now 按钮：统一 44px 高度和 V2 主色三态。 */
body.product-detail-v2 .banner-center-btn {
    position: relative;
    z-index: 1;
    max-width: calc(100% - 32px);
}

body.product-detail-v2 .btn-banner-center,
body.product-detail-v2 .product-detail-primary-btn,
body.product-detail-v2 .product-detail-cta {
    /* 标准详情页共享 CTA 统一对齐新版 44 高按钮圆角。 */
    border-radius: var(--v2-radius-button-pill, 22px);
    transition:
        background-color 0.24s ease,
        border-color 0.24s ease,
        color 0.24s ease,
        box-shadow 0.24s ease,
        transform 0.24s ease;
}

body.product-detail-v2 .manual-link {
    border-radius: var(--v2-radius-sm);
    transition:
        background-color 0.24s ease,
        border-color 0.24s ease,
        color 0.24s ease,
        box-shadow 0.24s ease,
        transform 0.24s ease;
}

body.product-detail-v2 .btn-banner-center,
body.product-detail-v2 .product-detail-primary-btn,
body.product-detail-v2 .product-detail-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 24px;
    background: var(--v2-primary-500);
    border: 1px solid var(--v2-primary-500);
    box-shadow: 0 12px 32px rgba(var(--v2-primary-500-rgb), 0.24);
    color: var(--v2-text-inverse);
}

body.product-detail-v2 .btn-banner-center:hover,
body.product-detail-v2 .product-detail-primary-btn:hover,
body.product-detail-v2 .product-detail-cta:hover {
    background: var(--v2-primary-400);
    border-color: var(--v2-primary-400);
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(var(--v2-primary-500-rgb), 0.28);
}

body.product-detail-v2 .btn-banner-center:active,
body.product-detail-v2 .product-detail-primary-btn:active,
body.product-detail-v2 .product-detail-cta:active {
    background: var(--v2-primary-600);
    border-color: var(--v2-primary-600);
    transform: translateY(0);
    box-shadow: 0 10px 24px rgba(var(--v2-primary-700-rgb), 0.24);
}

body.product-detail-v2 .btn-banner-center:focus-visible,
body.product-detail-v2 .product-detail-primary-btn:focus-visible,
body.product-detail-v2 .product-detail-cta:focus-visible,
body.product-detail-v2 .manual-link:focus-visible,
body.product-detail-v2 .nav-link:focus-visible,
body.product-detail-v2 .nav-toggle:focus-visible,
body.product-detail-v2 .nav-close:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(var(--v2-primary-500-rgb), 0.18),
        0 0 0 5px rgba(var(--v2-primary-500-rgb), 0.34);
}

/* 详情区外壳统一节奏。 */
body.product-detail-v2 .atf_portfolio__details-area,
body.product-detail-v2 .atf-section-padding {
    padding-top: 40px;
    padding-bottom: 72px;
}

/* 详情页主内容区不再使用全局 bg-f6 的浅灰底色，直接继承页面背景层级。 */
body.product-detail-v2 .atf_portfolio__details-area.atf-section-padding.bg-f6 {
    background: transparent !important;
    background-color: transparent !important;
}

/* 仅对白卡主容器生效，避免误伤内部嵌套 container。 */
body.product-detail-v2 .atf_portfolio__details-area > .container {
    background: #ffffff;
    border: 1px solid rgba(var(--v2-primary-500-rgb), 0.06);
    border-radius: var(--detail-card-radius);
    box-shadow: var(--detail-card-shadow);
    padding: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* 悬浮目录外壳统一，兼容各家族的不同类名。 */
body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

/* 目录展开按钮使用第一套 V2 蓝色。 */
body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .nav-toggle {
    padding: 12px 16px;
    background: var(--v2-primary-500);
    border: 1px solid rgba(var(--v2-primary-500-rgb), 0.18);
    border-radius: 0 var(--detail-control-radius) var(--detail-control-radius) 0;
    box-shadow: 0 12px 28px rgba(var(--v2-primary-500-rgb), 0.22);
    color: var(--v2-text-inverse);
}

body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .nav-toggle:hover {
    background: var(--v2-primary-400);
    padding-right: 20px;
}

/* 目录面板统一为白卡语言。 */
body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .nav-content {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(var(--v2-primary-500-rgb), 0.08);
    border-radius: 0 var(--detail-card-radius-md) var(--detail-card-radius-md) 0;
    box-shadow: var(--detail-card-shadow-hover);
}

body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) h3 {
    color: var(--v2-text-heading);
    border-bottom-color: var(--v2-bg-divider);
}

body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .nav-close {
    background: var(--v2-bg-functional);
    color: var(--v2-text-secondary);
}

body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .nav-close:hover {
    background: rgba(var(--v2-primary-500-rgb), 0.08);
    color: var(--v2-primary-500);
}

/* 目录链接统一 hover、active 和 focus 状态。 */
body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .nav-link {
    border-radius: var(--detail-control-radius);
    color: var(--v2-text-body);
}

body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .nav-link::before {
    background: var(--v2-primary-500);
}

body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .nav-link:hover,
body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .nav-link.active {
    background: rgba(var(--v2-primary-500-rgb), 0.08);
    color: var(--v2-primary-500);
}

body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .nav-divider {
    background: var(--v2-bg-divider);
}

/* 手册入口统一为 V2 主按钮语言，但保留独立图标布局。 */
body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .manual-link {
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--v2-primary-500), var(--v2-primary-600));
    border: 1px solid transparent;
    box-shadow: 0 14px 32px rgba(var(--v2-primary-500-rgb), 0.22);
    color: var(--v2-text-inverse);
}

body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) .manual-link:hover {
    background: linear-gradient(135deg, var(--v2-primary-400), var(--v2-primary-500));
    transform: translateY(-1px);
    box-shadow: 0 20px 36px rgba(var(--v2-primary-500-rgb), 0.26);
}

/* 通用产品信息主卡。 */
body.product-detail-v2 .product-section {
    background: #ffffff;
    border: 1px solid rgba(var(--v2-primary-500-rgb), 0.06);
    border-radius: var(--detail-card-radius);
    box-shadow: var(--detail-card-shadow);
    padding: 48px;
    margin-bottom: 24px;
    scroll-margin-top: var(--detail-scroll-offset);
}

/* 某些详情页使用 variant section，只统一滚动偏移与圆角，不强制改背景。 */
body.product-detail-v2 .product-section-ass {
    scroll-margin-top: var(--detail-scroll-offset);
}

/* 产品标题、副标题、正文统一到 V2 文本语义。 */
body.product-detail-v2 .hero-section {
    margin-bottom: 48px;
}

body.product-detail-v2 .product-title {
    color: var(--v2-text-heading);
    font-size: var(--v2-h0-font-size);
    line-height: var(--v2-h0-line-height);
    margin-bottom: 16px;
}

body.product-detail-v2 .product-subtitle,
body.product-detail-v2 .g3m-product-details,
body.product-detail-v2 .guiding-camera-details,
body.product-detail-v2 .oag-product-details,
body.product-detail-v2 .filter-product-details {
    color: var(--v2-text-body);
}

/* 图片卡悬停节奏统一，避免夸张的缩放差异。 */
body.product-detail-v2 .image-popup,
body.product-detail-v2 .image-popup img,
body.product-detail-v2 .img-box a,
body.product-detail-v2 .img-box a img,
body.product-detail-v2 .image-wrapper img,
body.product-detail-v2 .main-product-image img,
body.product-detail-v2 .main-product-image picture,
body.product-detail-v2 .main-product-image .img-fluid {
    cursor: zoom-in;
}

body.product-detail-v2 .main-product-image img,
body.product-detail-v2 .main-product-image picture,
body.product-detail-v2 .main-product-image .img-fluid {
    border-radius: var(--detail-card-radius-md);
    box-shadow: var(--detail-card-shadow);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

body.product-detail-v2 .main-product-image img:hover,
body.product-detail-v2 .main-product-image picture:hover,
body.product-detail-v2 .main-product-image .img-fluid:hover {
    transform: translateY(-4px);
    box-shadow: var(--detail-card-shadow-hover);
}

/* 规格表和参数表统一白底与边框语言。 */
body.product-detail-v2 :is(.specs-table, .comparison-table, .performance-table, .params-table, .table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid var(--detail-border-color);
    border-radius: var(--detail-card-radius-md);
    overflow: hidden;
}

body.product-detail-v2 :is(.specs-table, .comparison-table, .performance-table, .params-table, .table) th,
body.product-detail-v2 :is(.specs-table, .comparison-table, .performance-table, .params-table, .table) td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--detail-border-color);
}

body.product-detail-v2 :is(.specs-table, .comparison-table, .performance-table, .params-table, .table) tr:last-child td,
body.product-detail-v2 :is(.specs-table, .comparison-table, .performance-table, .params-table, .table) tr:last-child th {
    border-bottom: none;
}

body.product-detail-v2 :is(.specs-table, .comparison-table, .performance-table, .params-table, .table) th {
    color: var(--v2-text-heading);
    background: var(--v2-bg-functional);
    font-weight: 600;
}

body.product-detail-v2 :is(.specs-table, .comparison-table, .performance-table, .params-table, .table) td {
    color: var(--v2-text-body);
}

/* 常见信息块统一卡片化，避免不同家族阴影与圆角混用。 */
body.product-detail-v2 :is(
    .feature-card,
    .parameter-card,
    .spec-card,
    .info-card,
    .tech-card,
    .dimension-card,
    .package-card,
    .compatibility-card,
    .accessory-card
) {
    background: #ffffff;
    border: 1px solid rgba(var(--v2-primary-500-rgb), 0.06);
    border-radius: var(--detail-card-radius-md);
    box-shadow: var(--detail-card-shadow);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

body.product-detail-v2 :is(
    .feature-card,
    .parameter-card,
    .spec-card,
    .info-card,
    .tech-card,
    .dimension-card,
    .package-card,
    .compatibility-card,
    .accessory-card
):hover {
    transform: translateY(-4px);
    border-color: rgba(var(--v2-primary-500-rgb), 0.14);
    box-shadow: var(--detail-card-shadow-hover);
}

/* FAQ / 折叠块统一边界感。 */
body.product-detail-v2 :is(.faq-item, .accordion-item, .collapse-card) {
    background: #ffffff;
    border: 1px solid rgba(var(--v2-primary-500-rgb), 0.08);
    border-radius: var(--detail-card-radius-md);
    box-shadow: var(--detail-card-shadow);
}

/* 统一标签和信息提示块。 */
body.product-detail-v2 :is(.feature-tag, .spec-tag, .product-badge, .highlight-badge, .tag) {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(var(--v2-primary-500-rgb), 0.08);
    color: var(--v2-primary-500);
    font-size: var(--v2-font-size-sm);
    font-weight: 600;
}

/* 移动端降低区块密度，并隐藏悬浮目录，保留现有降级策略。 */
@media (max-width: 1199px) {
    body.product-detail-v2 {
        --detail-scroll-offset: 92px;
    }

    body.product-detail-v2 :is(.g3m-floating-nav, .guiding-camera-floating-nav, .oag-floating-nav, .filter-floating-nav) {
        display: none;
    }
}

@media (max-width: 991px) {
    body.product-detail-v2 .atf-page-heading.atf-align-left {
        min-height: 640px;
    }

    body.product-detail-v2 .atf-page-heading.atf-align-left .atf-page-heading-in {
        padding-top: 136px;
        padding-bottom: 40px;
    }

    body.product-detail-v2 .atf-page-heading.atf-align-left .atf-page-heading-title,
    body.product-detail-v2 .product-title {
        font-size: clamp(var(--v2-h3-font-size), 4.6vw, var(--v2-h1-font-size));
    }

    body.product-detail-v2 .atf_portfolio__details-area > .container,
    body.product-detail-v2 .product-section {
        padding: 32px 24px;
    }
}

@media (max-width: 767px) {
    body.product-detail-v2 {
        --detail-scroll-offset: 84px;
    }

    body.product-detail-v2 .atf-page-heading.atf-align-left {
        min-height: 560px;
    }

    body.product-detail-v2 .atf-page-heading.atf-align-left .atf-page-heading-title,
    body.product-detail-v2 .product-title {
        font-size: clamp(var(--v2-h4-font-size), 6.8vw, var(--v2-h2-font-size));
    }

    body.product-detail-v2 .btn-banner-center,
    body.product-detail-v2 .product-detail-primary-btn,
    body.product-detail-v2 .product-detail-cta {
        border-radius: 21px;
        width: 100%;
    }
}