/*!
 * turing-products.css — 產品中心樣式
 *
 * 復用 turing 設計系統：
 *   - 設計稿寬度 1920px (desktop) / 540px (mobile)，1rem = 192px (由 turing.js 設置)
 *   - 配色：bg #101014 / card #222228 / header #17171a / text #eeeef2 / sub #b2b2c9
 *   - 主色：#1664ff / #2882ff / 邊框 #292932 / 圓角 0.041667rem
 *
 * 注意：hardware.css 的選擇器帶 [data-v-63f7fe4a] scoped 屬性，產品頁 DOM 沒有
 * 這些屬性，所以這裡獨立定義所有產品頁樣式（不依賴 hardware.css 的 scoped 規則）。
 * 但保留引入 turing-hardware.css，因為 header/footer/nav/lang-switch 的 scoped 樣式
 * 仍需它（那些 DOM 保留了 data-v 屬性）。
 */

/* ============ 頁面容器（與 .hardware-page 對齊）============ */
.products-page {
    position: relative;
    min-height: 100vh;
    padding: 0.416667rem 1.51042rem 0.520833rem;
    background: #101014;
}
@media (max-width: 1900px) { .products-page { padding: 0.416667rem 1.015625rem 0.520833rem; } }
@media (max-width: 1700px) { .products-page { padding: 0.416667rem 0.8125rem 0.520833rem; } }
@media (max-width: 1630px) { .products-page { padding: 0.416667rem 0.3125rem 0.520833rem; } }
@media (max-width: 1240px) { .products-page { padding: 0.416667rem 0.208333rem 0.520833rem; } }
@media (max-width: 768px)  { .products-page { padding: 0.30rem 0.16rem 0.40rem; } }

.products-wrap {
    position: relative;
    z-index: 1;
}

/* 背景圖層 */
.products-page .bg-body {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    height: 2.157328rem;
    z-index: 0;
    pointer-events: none;
}

/* ============ 麵包屑 ============ */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #b2b2c9;
    font-size: 0.072917rem;
    line-height: 0.125rem;
    margin-bottom: 0.15625rem;
}
.breadcrumb a {
    color: #b2b2c9;
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumb a:hover { color: #50a7ff; }
.breadcrumb .sep {
    margin: 0 0.041667rem;
    color: #4a4a55;
}
.breadcrumb .current { color: #eeeef2; }

/* ============ 頁面標題 ============ */
.page-head {
    margin-bottom: 0.208333rem;
}
.page-title {
    color: #eeeef2;
    font-size: 0.1875rem;
    font-weight: 500;
    line-height: 0.1875rem;
    margin: 0 0 0.0625rem;
}
.page-subtitle {
    color: #b2b2c9;
    font-size: 0.083333rem;
    line-height: 0.125rem;
    margin: 0;
}

/* ============ 分類篩選 ============ */
.cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.0625rem;
    margin-bottom: 0.260417rem;
    padding-bottom: 0.15625rem;
    border-bottom: 0.005208rem solid #292932;
}
.cat-tab {
    padding: 0.041667rem 0.104167rem;
    border-radius: 0.020833rem;
    border: 0.005208rem solid #292932;
    background: transparent;
    color: #b2b2c9;
    font-size: 0.078125rem;
    line-height: 0.114583rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}
.cat-tab:hover {
    color: #eeeef2;
    border-color: #2882ff;
}
.cat-tab.active {
    color: #fff;
    background: #1664ff;
    border-color: #1664ff;
}

/* ============ 分組標題 ============ */
.cat-section { margin-bottom: 0.3125rem; }
.cat-section-title {
    display: flex;
    align-items: center;
    color: #eeeef2;
    font-size: 0.125rem;
    font-weight: 500;
    line-height: 0.15625rem;
    margin: 0 0 0.104167rem;
}
.cat-bar {
    display: inline-block;
    width: 0.026042rem;
    height: 0.09375rem;
    margin-right: 0.041667rem;
    border-radius: 0.026042rem;
    background: linear-gradient(180deg, #50a7ff, #1664ff);
}

/* ============ 產品網格 ============ */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.125rem;
}
@media (max-width: 1200px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .prod-grid { grid-template-columns: 1fr; gap: 0.16rem; } }

/* ============ 產品卡片 ============ */
.prod-card {
    display: flex;
    flex-direction: column;
    border-radius: 0.041667rem;
    border: 0.005208rem solid #292932;
    background: #222228;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.prod-card:hover {
    transform: translateY(-0.020833rem);
    border-color: #2882ff;
    box-shadow: 0 0.052083rem 0.15625rem rgba(0, 0, 0, 0.4);
}
.prod-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #181820;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.0625rem;
    overflow: hidden;
}
.prod-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.prod-card:hover .prod-img { transform: scale(1.04); }
.prod-info {
    padding: 0.083333rem 0.104167rem 0.114583rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.prod-model {
    color: #eeeef2;
    font-size: 0.09375rem;
    font-weight: 600;
    line-height: 0.125rem;
    margin: 0 0 0.041667rem;
}
.prod-desc {
    color: #b2b2c9;
    font-size: 0.072917rem;
    line-height: 0.114583rem;
    margin: 0 0 0.0625rem;
    /* 兩行截斷 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.prod-more {
    color: #50a7ff;
    font-size: 0.072917rem;
    line-height: 0.114583rem;
    font-weight: 500;
}
.prod-more .arr {
    display: inline-block;
    margin-left: 0.026042rem;
    transition: transform 0.25s ease;
    font-style: normal;
}
.prod-card:hover .prod-more .arr { transform: translateX(0.026042rem); }

/* ============ 詳情頁 ============ */
.detail-page { padding-top: 0.3125rem; }
.detail-breadcrumb { margin-bottom: 0.208333rem; }

/* 頂部：輪播 + 摘要 */
.detail-top {
    display: flex;
    gap: 0.260417rem;
    align-items: flex-start;
    margin-bottom: 0.3125rem;
}
.detail-gallery {
    width: 45%;
    flex-shrink: 0;
}
.gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #181820;
    border: 0.005208rem solid #292932;
    border-radius: 0.041667rem;
    overflow: hidden;
    margin-bottom: 0.0625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.0625rem;
}
.gal-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none;
}
.gal-main-img.active { display: block; }
.gallery-thumbs {
    display: flex;
    gap: 0.041667rem;
    flex-wrap: wrap;
}
.gal-thumb {
    width: 0.625rem;
    height: 0.46875rem;
    object-fit: contain;
    background: #181820;
    border: 0.005208rem solid #292932;
    border-radius: 0.020833rem;
    cursor: pointer;
    padding: 0.010417rem;
    opacity: 0.6;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.gal-thumb:hover { opacity: 1; }
.gal-thumb.active {
    opacity: 1;
    border-color: #2882ff;
}

.detail-summary {
    flex: 1;
    min-width: 0;
}
.detail-model {
    color: #eeeef2;
    font-size: 0.208333rem;
    font-weight: 600;
    line-height: 0.260417rem;
    margin: 0 0 0.041667rem;
}
.detail-subtitle {
    color: #50a7ff;
    font-size: 0.09375rem;
    line-height: 0.125rem;
    margin: 0 0 0.083333rem;
    font-weight: 500;
}
.detail-tags {
    display: flex;
    gap: 0.041667rem;
    margin-bottom: 0.104167rem;
}
.tag-cat {
    display: inline-block;
    padding: 0.020833rem 0.0625rem;
    border-radius: 0.020833rem;
    background: rgba(22, 100, 255, 0.12);
    color: #50a7ff;
    font-size: 0.072917rem;
    line-height: 0.104167rem;
    border: 0.005208rem solid rgba(22, 100, 255, 0.3);
}
.detail-desc {
    color: #b2b2c9;
    font-size: 0.083333rem;
    line-height: 0.145833rem;
}

/* ============ 規格參數表 ============ */
.detail-specs, .detail-images, .detail-related {
    margin-bottom: 0.3125rem;
}
.section-title {
    display: flex;
    align-items: center;
    color: #eeeef2;
    font-size: 0.125rem;
    font-weight: 500;
    line-height: 0.15625rem;
    margin: 0 0 0.104167rem;
}
.specs-table-wrap {
    border-radius: 0.041667rem;
    border: 0.005208rem solid #292932;
    background: #222228;
    overflow: hidden;
}
.specs-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.specs-table th,
.specs-table td {
    padding: 0.0625rem 0.104167rem;
    font-size: 0.078125rem;
    line-height: 0.125rem;
    vertical-align: top;
    border-bottom: 0.005208rem solid #292932;
    word-break: break-word;
}
.specs-table tr:last-child th,
.specs-table tr:last-child td { border-bottom: none; }
.specs-table th {
    width: 22%;
    color: #eeeef2;
    font-weight: 500;
    text-align: left;
    background: #1c1c22;
}
.specs-table td {
    color: #b2b2c9;
    font-weight: 400;
}

/* ============ 詳情圖片 ============ */
.detail-img-box {
    width: 100%;
    margin-bottom: 0.0625rem;
    border-radius: 0.041667rem;
    overflow: hidden;
    background: #181820;
    border: 0.005208rem solid #292932;
}
.detail-img-box img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============ 響應式：詳情頁 ============ */
@media (max-width: 900px) {
    .detail-top {
        flex-direction: column;
        gap: 0.15625rem;
    }
    .detail-gallery { width: 100%; }
}
@media (max-width: 768px) {
    .products-page { padding: 0.22rem 0.12rem 0.30rem; }
    .page-title { font-size: 0.16rem; line-height: 0.16rem; }
    .cat-section-title { font-size: 0.11rem; }
    .detail-model { font-size: 0.16rem; line-height: 0.20rem; }
    .detail-subtitle { font-size: 0.085rem; }
    .detail-desc { font-size: 0.08rem; line-height: 0.135rem; }
    .section-title { font-size: 0.11rem; }
    .specs-table th, .specs-table td {
        font-size: 0.085rem;
        padding: 0.055rem 0.06rem;
    }
    .specs-table th { width: 28%; }
    .cat-tab { font-size: 0.085rem; padding: 0.035rem 0.08rem; }
    .prod-model { font-size: 0.10rem; }
    .prod-desc { font-size: 0.08rem; }
    .breadcrumb { font-size: 0.085rem; }
}
@media (max-width: 540px) {
    .specs-table th { width: 32%; }
}

/* ============ 詳情頁 Tab 區 ============ */
.detail-tabs {
    margin-bottom: 0.3125rem;
}

/* Tab 導航 */
.tab-nav {
    display: flex;
    gap: 0.005208rem;
    border-bottom: 0.005208rem solid #292932;
    margin-bottom: 0.15625rem;
}
.tab-btn {
    padding: 0.0625rem 0.15625rem;
    background: transparent;
    border: none;
    border-bottom: 0.010417rem solid transparent;
    color: #b2b2c9;
    font-size: 0.083333rem;
    font-weight: 500;
    line-height: 0.125rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -0.005208rem;
    font-family: inherit;
}
.tab-btn:hover { color: #eeeef2; }
.tab-btn.active {
    color: #50a7ff;
    border-bottom-color: #2882ff;
}

/* Tab 面板：PC 端只顯示當前激活的 */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============ 產品概況內容 ============ */
.overview-content {
    color: #b2b2c9;
}
.overview-section {
    margin-bottom: 0.208333rem;
}
.overview-section:last-child { margin-bottom: 0; }

/* h2 級小節標題（核心特性/應用場景等） */
.overview-section.overview-h2 > .overview-title {
    color: #eeeef2;
    font-size: 0.114583rem;
    font-weight: 600;
    line-height: 0.15625rem;
    margin: 0 0 0.083333rem;
    padding-left: 0.052083rem;
    border-left: 0.015625rem solid #2882ff;
}
/* h3 級子標題（場景子分類等） */
.overview-section.overview-h3 {
    margin-left: 0.104167rem;
}
.overview-section.overview-h3 > .overview-title {
    color: #50a7ff;
    font-size: 0.09375rem;
    font-weight: 500;
    line-height: 0.135rem;
    margin: 0 0 0.052083rem;
}
/* feature 級（特性塊：標題+描述） */
.overview-section.overview-feature > .overview-title {
    color: #eeeef2;
    font-size: 0.09375rem;
    font-weight: 600;
    line-height: 0.135rem;
    margin: 0 0 0.03125rem;
}

.overview-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.overview-items li {
    position: relative;
    padding-left: 0.09375rem;
    color: #b2b2c9;
    font-size: 0.078125rem;
    line-height: 0.135rem;
    margin-bottom: 0.052083rem;
}
.overview-items li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.052083rem;
    width: 0.020833rem;
    height: 0.020833rem;
    border-radius: 50%;
    background: #2882ff;
}
.overview-fallback {
    color: #b2b2c9;
    font-size: 0.083333rem;
    line-height: 0.145833rem;
}

/* ============ 相關資料：下載列表 ============ */
.download-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.083333rem;
    margin-bottom: 0.125rem;
}
@media (max-width: 768px) {
    .download-list { grid-template-columns: 1fr; }
}

.download-item {
    display: flex;
    align-items: center;
    gap: 0.083333rem;
    padding: 0.083333rem 0.104167rem;
    border-radius: 0.041667rem;
    border: 0.005208rem solid #292932;
    background: #222228;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s, transform 0.25s;
}
.download-item:hover {
    border-color: #2882ff;
    transform: translateY(-0.010417rem);
}
.dl-icon {
    flex-shrink: 0;
    width: 0.1875rem;
    height: 0.1875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #50a7ff;
}
.dl-icon svg { width: 0.135417rem; height: 0.135417rem; }
.dl-info {
    flex: 1;
    min-width: 0;
}
.dl-name {
    color: #eeeef2;
    font-size: 0.083333rem;
    font-weight: 500;
    line-height: 0.125rem;
    margin-bottom: 0.015625rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dl-meta {
    display: flex;
    align-items: center;
    gap: 0.052083rem;
}
.dl-ext {
    display: inline-block;
    padding: 0 0.026042rem;
    border-radius: 0.010417rem;
    background: rgba(22, 100, 255, 0.12);
    color: #50a7ff;
    font-size: 0.0625rem;
    line-height: 0.09375rem;
}
.dl-size {
    color: #7a7a8f;
    font-size: 0.0625rem;
    line-height: 0.09375rem;
}
.dl-action {
    flex-shrink: 0;
    padding: 0.03125rem 0.072917rem;
    border-radius: 0.020833rem;
    background: #1664ff;
    color: #fff;
    font-size: 0.072917rem;
    line-height: 0.104167rem;
    font-weight: 500;
    transition: background 0.25s;
}
.download-item:hover .dl-action { background: #1a75ff; }

/* ============ 移動端：Tab 平鋪 ============ */
@media (max-width: 768px) {
    /* 隱藏 Tab 導航按鈕 */
    .tab-nav { display: none; }
    /* 所有面板平鋪顯示，並加上小節標題 */
    .tab-panel {
        display: block !important;
        margin-bottom: 0.208333rem;
    }
    .tab-panel::before {
        content: attr(data-mobile-title);
        display: flex;
        align-items: center;
        color: #eeeef2;
        font-size: 0.11rem;
        font-weight: 500;
        line-height: 0.15625rem;
        margin-bottom: 0.078125rem;
        padding-left: 0.052083rem;
        border-left: 0.015625rem solid #2882ff;
    }
    /* 概況字號適配 */
    .overview-section.overview-h2 > .overview-title { font-size: 0.10rem; }
    .overview-items li {
        font-size: 0.08rem;
        line-height: 0.14rem;
        padding-left: 0.08rem;
    }
    .tab-btn { font-size: 0.085rem; }
}