/* ============================================================
 * Richitek 产品详情页 (view_product.htm) 专用样式
 * 结构：统一面包屑横条(header.css) + 左侧分类栏(left.htm) + 右侧详情
 * 布局：流式 Flex，无绝对定位，移动端自适应
 * ============================================================ */

/* ---------- 变量（与 lists_product.css 保持一致） ---------- */
:root {
    --vp-font: Source Han Sans, Geneva, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --vp-primary: #0066cc;
    --vp-blue: #2e86de;
    --vp-text: #333;
    --vp-text-sub: #777;
}

/* ---------- 面包屑：与 1680px 布局容器同宽对齐（ID 选择器压过 header.css 后加载的同权重规则） ---------- */
#smv_AreaMainWrapper .rtk-crumb-row {
    max-width: 1680px;
    padding-left: 24px;
    padding-right: 24px;
}

/* ---------- PC 端布局骨架 ---------- */
.rtk-vp-layout {
    max-width: 1680px;
    margin: 0 auto;
    padding: 24px 24px 48px;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    font-family: var(--vp-font);
}

/* 左侧分类栏（left.htm 结构保持不变，仅参与 flex 布局）
   流式内容高度自适应，可与主体一起水平居中 */
.rtk-vp-layout .col-left {
    flex: 0 0 240px;
}

/* 右侧主体 */
.rtk-vp-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- 页面标题 ---------- */
.rtk-vp-title {
    font-family: var(--vp-font);
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #eef2f7;
    position: relative;
}

.rtk-vp-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 64px;
    height: 2px;
    background: linear-gradient(90deg, var(--vp-primary), var(--vp-blue));
}

/* ---------- 图集 + 产品信息 ---------- */
.rtk-vp-overview {
    display: flex;
    gap: 24px;
    background: #fff;
    border: 1px solid #e8eef4;
    border-radius: 10px;
    padding: 20px;
}

.rtk-vp-gallery {
    flex: 1.1 1 0%;
    min-width: 0;
    align-self: flex-start; /* 不随右侧规格内容拉伸，避免图集出现大片空白 */
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
}

.rtk-vp-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 16px;
}

.rtk-vp-stage img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
}

/* ---------- 视频窗口（初始隐藏，点击 Watch Video 顶替主图位置播放） ---------- */
.pd-video-block {
    display: none;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.pd-video-block.is-active {
    display: block;
}

.pd-video-block video,
.pd-video-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: contain;
}

.pd-video-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

.pd-video-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.rtk-vp-thumbs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: #fff;
    border-top: 1px solid #e5ecf2;
    overflow-x: auto;
}

.rtk-vp-thumb {
    flex: 0 0 auto;
    padding: 2px;
    border: 2px solid #e0e6ec;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.rtk-vp-thumb img {
    width: 56px;
    height: 40px;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}

.rtk-vp-thumb:hover {
    border-color: #7db8e8;
}

.rtk-vp-thumb.is-active {
    border-color: var(--vp-blue);
}

.rtk-vp-info {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 4px 4px 8px;
}

.rtk-vp-info-title {
    font-size: 20px;
    color: #1a1a1a;
    line-height: 1.4;
    margin: 0;
    font-family: var(--vp-font);
}

/* 商品参数表格（后台产品参数模块） */
.rtk-vp-params-box {
    border: 1px solid #e8eef4;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.rtk-vp-params {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #3d4c57;
}

.rtk-vp-params th,
.rtk-vp-params td {
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eef2f7;
}

.rtk-vp-params th {
    width: 38%;
    font-weight: 600;
    color: #1a1a1a;
    background: #f8fafc;
    white-space: normal;
    word-break: break-word;
}

.rtk-vp-params td {
    word-break: break-word;
}

.rtk-vp-params tr:last-child th,
.rtk-vp-params tr:last-child td {
    border-bottom: none;
}

.rtk-vp-params td img {
    max-width: 100%;
    height: auto;
}

/* 参数属性区块（原右侧栏 cssx 字段，下移至主体内容） */
.rtk-vp-specs {
    margin-top: 28px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e8eef4;
    border-top: 2px solid #3099dd;
    border-radius: 10px;
}

.rtk-vp-specs-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f7;
    position: relative;
    font-family: var(--vp-font);
}

.rtk-vp-specs-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, var(--vp-primary), var(--vp-blue));
}

.rtk-vp-specs-body {
    color: #3d4c57;
    font-size: 14px;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-x: auto;
}

.rtk-vp-specs-body img {
    max-width: 100%;
    height: auto;
}

.rtk-vp-specs-body table {
    max-width: 100%;
    border-collapse: collapse;
}

.rtk-vp-specs-body table td,
.rtk-vp-specs-body table th {
    border: 1px solid #e5ecf2;
    padding: 6px 10px;
}

/* 按钮行：三按钮一行排列，顶到信息卡片底部 */
.rtk-vp-buy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.rtk-vp-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 20px;
    color: #fff;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Contact Us And Buy：蓝色 */
.rtk-vp-buy--blue {
    background: linear-gradient(135deg, var(--vp-blue), #00a1e9);
}

.rtk-vp-buy--blue:hover {
    box-shadow: 0 8px 20px rgba(46, 134, 222, 0.35);
}

/* Get Sample：绿色（WhatsApp 呼应） */
.rtk-vp-buy--green {
    background: linear-gradient(135deg, #1faa59, #25d366);
}

.rtk-vp-buy--green:hover {
    box-shadow: 0 8px 20px rgba(31, 170, 89, 0.35);
}

/* Watch Video：橙色 */
.rtk-vp-buy--orange {
    background: linear-gradient(135deg, #f08300, #f5a623);
}

.rtk-vp-buy--orange:hover {
    box-shadow: 0 8px 20px rgba(240, 131, 0, 0.35);
}

.rtk-vp-buy:hover {
    transform: translateY(-2px);
    color: #fff;
}

.rtk-vp-buy i {
    margin-right: 6px;
    font-size: 13px;
}

/* ---------- 详情富文本 ---------- */
.rtk-vp-content {
    margin-top: 28px;
    color: #3d4c57;
    font-size: 15px;
    line-height: 1.9;
    word-wrap: break-word;
    overflow-x: auto;
}

.rtk-vp-content img {
    max-width: 100%;
    height: auto;
}

.rtk-vp-content table {
    max-width: 100%;
}

/* ---------- 询盘 CTA（PC + 移动端共用类，原内联样式迁移） ---------- */
.rtk-cta-box {
    box-sizing: border-box;
    width: 100%;
    margin: 40px 0 10px;
    padding: 26px 28px;
    background: #f5f9fb;
    border: 1px solid #d8e3ea;
    border-left: 5px solid #00a1e9;
    border-radius: 8px;
    font-family: var(--vp-font);
}

.rtk-cta-box h2 {
    box-sizing: border-box;
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
    color: #12232e;
    font-family: var(--vp-font);
}

.rtk-cta-lead {
    box-sizing: border-box;
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.75;
    color: #3d4c57;
}

.rtk-cta-cards {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 20px;
}

.rtk-cta-card {
    box-sizing: border-box;
    flex: 1 1 210px;
    min-width: 190px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #d8e3ea;
    border-radius: 6px;
}

.rtk-cta-num {
    box-sizing: border-box;
    margin: 0 0 2px;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
    color: #0071a9;
}

.rtk-cta-label {
    box-sizing: border-box;
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    color: #12232e;
}

.rtk-cta-desc {
    box-sizing: border-box;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #5b6b76;
}

.rtk-cta-actions {
    box-sizing: border-box;
    margin: 0 0 16px;
}

.rtk-cta-btn {
    box-sizing: border-box;
    display: inline-block;
    margin: 0 12px 12px 0;
    padding: 14px 28px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.rtk-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(18, 35, 46, 0.2);
    color: #ffffff;
}

.rtk-cta-btn--blue {
    background: #0071a9;
}

.rtk-cta-btn--green {
    background: #0a6b52;
    margin-right: 0;
}

.rtk-cta-contact {
    box-sizing: border-box;
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: #5b6b76;
}

.rtk-cta-contact a {
    color: #0071a9;
    text-decoration: underline;
}

.rtk-cta-co {
    box-sizing: border-box;
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.65;
    color: #7a8a94;
}

/* ---------- 上一篇 / 下一篇 ---------- */
.rtk-vp-prenext {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.rtk-vp-prenext > div {
    flex: 1 1 0;
    min-width: 0;
}

.rtk-vp-prenext a {
    float: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e5ecf2;
    border-radius: 8px;
    color: #3d4c57;
    text-decoration: none !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.rtk-vp-prenext a:hover {
    border-color: var(--vp-blue);
    box-shadow: 0 6px 16px rgba(46, 134, 222, 0.12);
    color: var(--vp-blue);
}

.rtk-vp-prenext .w-previous-left,
.rtk-vp-prenext .w-next-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.rtk-vp-prenext .w-previous-caption,
.rtk-vp-prenext .w-next-caption {
    color: #999;
    white-space: nowrap;
}

.rtk-vp-prenext .w-previous-title,
.rtk-vp-prenext .w-next-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rtk-vp-prenext .w-arrowicon {
    color: var(--vp-blue);
    font-style: normal;
}

/* 无上/下篇时的占位：与有数据卡片完全同风格（同底色/边框/文字），hover 同步 */
.rtk-vp-prenext .rtk-vp-nav-empty {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e5ecf2;
    border-radius: 8px;
    color: #3d4c57;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.rtk-vp-prenext .rtk-vp-nav-empty:hover {
    border-color: var(--vp-blue);
    box-shadow: 0 6px 16px rgba(46, 134, 222, 0.12);
    color: var(--vp-blue);
}

/* 窄屏 PC（平板横屏）：侧栏收窄 */
@media (max-width: 1180px) {
    .rtk-vp-layout {
        gap: 20px;
        padding: 20px 16px 40px;
    }

    .rtk-vp-layout .col-left {
        flex: 0 0 210px;
    }

    /* 信息栏变窄：压缩按钮尺寸保证三按钮同行 */
    .rtk-vp-buy-row {
        gap: 5px;
    }

    .rtk-vp-buy {
        padding: 10px 10px;
        font-size: clamp(11px, 1.1vw, 14px);
    }
}

/* ============================================================
 * 移动端适配（≤1000px，与全站 pc-show/mobile-show 切换断点一致）
 * 单套代码响应式：隐藏侧栏，图集/信息纵排，参数表格限高滚动
 * ============================================================ */
@media (max-width: 1000px) {
    /* 轮播图高度适配（特异性对齐 banner.css 的 div.pc-banners 前缀） */
    div.pc-banners .carousel-container {
        height: 340px;
    }

    /* 布局：隐藏侧边栏，主体单列全宽（参数取自原移动端 .container 版式） */
    .rtk-vp-layout {
        display: block;
        padding: 14px 12px 24px;
    }

    .rtk-vp-layout .col-left {
        display: none !important;
    }

    .rtk-vp-title {
        font-size: 20px;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .rtk-vp-overview {
        flex-direction: column;
        gap: 16px;
        padding: 12px;
    }

    /* 纵向布局下取消 0% 基准，避免图集高度塌陷（overflow:hidden 使 min-height:auto 失效） */
    .rtk-vp-gallery,
    .rtk-vp-info {
        flex: 0 0 auto;
        width: 100%;
    }

    .rtk-vp-stage {
        min-height: 220px;
    }

    /* 移动端视频窗口：窄屏下保证最小可视高度 */
    .pd-video-block {
        min-height: 210px;
    }

    .rtk-vp-stage img {
        max-height: 260px;
    }

    /* 商品参数表格：限高滚动，避免长参数撑爆屏幕 */
    .rtk-vp-params-box {
        max-height: 320px;
        overflow-y: auto;
    }

    /* 按钮行：宽移动端三按钮一行；小视口放不下时自动换行成多行，同行按钮等分铺满 */
    .rtk-vp-buy-row {
        gap: 8px;
    }

    .rtk-vp-buy {
        flex: 1 1 130px;
        min-width: 0;
        padding: 11px 12px;
        font-size: 14px;
        white-space: normal;
        line-height: 1.3;
        text-align: center;
    }

    .rtk-vp-params th {
        width: 42%;
    }

    .rtk-vp-specs {
        margin-top: 20px;
        padding: 14px 14px;
    }

    .rtk-vp-specs-title {
        font-size: 18px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .rtk-vp-content {
        margin-top: 20px;
        font-size: 14px;
    }

    /* CTA 询盘框移动端适配 */
    .rtk-cta-box {
        max-width: 100%;
        margin: 20px 0 16px;
        padding: 18px 16px;
        border-left-width: 4px;
    }

    .rtk-cta-box h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .rtk-cta-lead {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .rtk-cta-cards {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
    }

    .rtk-cta-card {
        flex: 1 1 100%;
        min-width: 0;
    }

    .rtk-cta-btn {
        display: block;
        width: 100%;
        margin: 0 0 10px;
        text-align: center;
        padding: 12px 16px;
        font-size: 15px;
    }

    .rtk-cta-btn--green {
        margin-bottom: 0;
    }

    .rtk-cta-contact {
        font-size: 12px;
    }

    .rtk-vp-prenext {
        flex-direction: column;
        margin-top: 24px;
    }
}

/* 小屏手机 */
@media (max-width: 480px) {
    .rtk-vp-title {
        font-size: 18px;
    }

    .rtk-vp-info-title {
        font-size: 17px;
    }

    /* 窄屏：按钮行压缩内边距，保证三按钮仍一行容纳 */
    .rtk-vp-buy {
        padding: 10px 8px;
        font-size: 13px;
    }

    .rtk-vp-buy-row {
        gap: 6px;
    }
}