/* ============================================
   Product Detail Page Styles
   ============================================ */

/* Product Detail Layout */
.product-detail-layout { display: flex; gap: 45px; padding: 45px 0; }
.product-detail-left { flex: 0 0 44%; }

.product-detail-left .product-image-box {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 28px;
    text-align: center;
    background: var(--bg-card);
    transition: all var(--transition);
}
.product-detail-left .product-image-box img {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    transition: transform var(--transition-slow);
}
.product-detail-left .product-image-box:hover img { transform: scale(1.04); }
.product-detail-right { flex: 1; }

.product-detail-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.product-detail-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}
.product-detail-table tr:last-child td { border-bottom: none; }
.product-detail-table tr.gray { background: var(--bg-table-row-alt); }
.product-detail-table td.title {
    background: var(--bg-table-header);
    font-weight: 600;
    color: var(--primary);
    font-size: 14px;
}
.product-detail-table td:first-child:not([colspan]) { width: 200px; }

/* Add to Cart Button on Product Detail */
.product-detail-cart { margin-top: 20px; text-align: right; }
.product-detail-cart .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 28px;
    font-size: 15px;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    transition: background var(--transition);
}
.product-detail-cart .btn-primary:hover { background: var(--primary-dark); }
.product-detail-cart .btn-primary.added {
    background: #4caf50;
}
.product-detail-cart .btn-primary.added:hover {
    background: #388e3c;
}

/* ============================================
   Compatible Vehicles (Fitment) - Shell Box Style
   ============================================ */
.fit-section { margin-bottom: 40px; }
.fit-box-header {
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--primary);
}
.fit-box-body { background: #fff; border: 1px solid #e0e0e0; }

.fit-group { border-bottom: 1px solid #eee; }
.fit-group:last-child { border-bottom: none; }

.fit-group-header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    background: #fafafa;
    transition: background 0.15s;
    user-select: none;
}
.fit-group-header:hover { background: #f0f0f0; }
.fit-group-header.fit-no-children { cursor: default; background: #fafafa; }

.fit-hdr-col { flex-shrink: 0; }
.fit-hdr-col-model {
    width: 28%;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.fit-hdr-col-spacer { width: 53.5%; }
.fit-hdr-col-spacer.spacer-wide { width: 55.5%; }
.fit-hdr-col-year {
    width: 18.5%;
    color: #333;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fit-hdr-col-year.year-narrow { width: 16.5%; }
.fit-group-brand { font-weight: 700; color: #333; font-size: 14px; white-space: nowrap; }
.fit-group-model {
    color: #555;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fit-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--primary);
    border-radius: 2px;
    transition: all 0.15s;
}
.fit-no-children .fit-toggle { display: none; }

.fit-group-table-wrap { padding: 0; overflow: hidden; height: 0; }
.fit-group-table-wrap.expanded { height: auto; overflow-x: auto; }

.fit-sub-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 13px;
}
.fit-sub-table th:nth-child(1),
.fit-sub-table td:nth-child(1) { width: 28%; }
.fit-sub-table th:nth-child(2),
.fit-sub-table td:nth-child(2) { width: 12%; }
.fit-sub-table th:nth-child(3),
.fit-sub-table td:nth-child(3) { width: 10%; }
.fit-sub-table th:nth-child(4),
.fit-sub-table td:nth-child(4) { width: 14%; }
.fit-sub-table th:nth-child(5),
.fit-sub-table td:nth-child(5) { width: 10%; }
.fit-sub-table th:nth-child(6),
.fit-sub-table td:nth-child(6) { width: 8%; }
.fit-sub-table th:nth-child(7),
.fit-sub-table td:nth-child(7) { width: 18%; }
.fit-sub-table thead th {
    background: #f5f5f5;
    color: #666;
    font-weight: 600;
    padding: 9px 14px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    white-space: nowrap;
}
.fit-main-table { margin-bottom: 0; }
.fit-main-table thead th { border-bottom: 1px solid #ddd; }
.fit-sub-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
    vertical-align: middle;
    font-size: 13px;
}
.fit-sub-table tbody td:first-child { padding-left: 40px; }
.fit-sub-table tbody tr:last-child td { border-bottom: none; }
.fit-sub-table tbody tr:hover { background: #fafafa; }

/* ============================================
   Responsive - Tablet & Mobile
   ============================================ */
@media (max-width: 991px) {
    .product-detail-layout { flex-direction: column; gap: 20px; padding: 24px 0; }
    .product-detail-left { flex: none; width: 100%; }
    .product-detail-left .product-image-box { padding: 16px; }
    .product-detail-left .product-image-box img { max-height: 260px; }
    .product-detail-table td:first-child:not([colspan]) { width: 110px; }
    .product-detail-cart { text-align: center; }

    /* Fitment: 小屏布局 — thead 仅显示车型/年份，子列表改为左右"标签:内容"排列 */
    .fit-main-table { table-layout: auto; }
    .fit-main-table thead th { display: none; }
    .fit-main-table thead th:nth-child(1),
    .fit-main-table thead th:nth-child(7) { display: table-cell; }
    .fit-main-table thead th:nth-child(1) { width: auto; }
    .fit-main-table thead th:nth-child(7) { width: 100px; text-align: right; }

    .fit-group-header { padding: 10px 14px; }
    .fit-hdr-col-model { width: auto; flex: 1; min-width: 0; }
    .fit-hdr-col-spacer { display: none; }
    .fit-hdr-col-year { width: auto; flex-shrink: 0; text-align: right; }
    .fit-group-model { white-space: normal; }

    .fit-group-table-wrap.expanded { overflow-x: visible; }
    .fit-group-table-wrap .fit-sub-table { display: block; table-layout: auto; min-width: 0; }
    .fit-group-table-wrap .fit-sub-table tbody { display: block; }
    .fit-group-table-wrap .fit-sub-table tr { display: block; padding: 8px 0; padding-left: 40px; border-bottom: 1px solid #e9e9e9; }
    .fit-group-table-wrap .fit-sub-table tr:last-child { border-bottom: none; }
    .fit-group-table-wrap .fit-sub-table td {
        display: flex; width: auto; padding: 5px 14px; border-bottom: none;
        white-space: normal; overflow: visible; text-overflow: unset;
    }
    .fit-group-table-wrap .fit-sub-table td:first-child {
        display: block; padding-left: 14px; margin-bottom: 2px;
    }
    .fit-group-table-wrap .fit-sub-table td:first-child::before { content: none; }
    .fit-group-table-wrap .fit-sub-table td::before {
        content: attr(data-label); flex-shrink: 0; width: 140px;
        color: #666; font-weight: 600;
    }
}