/* --- PRODUCT PAGE CSS SYSTEM --- */
    :root {
        --prod-primary: #0b2c4d; /* Navy */
        --prod-secondary: #1a4a7a;
        --prod-accent: #d35400; /* Orange */
        --prod-bg: #f8f9fa;
        --prod-border: #e9ecef;
        --text-dark: #212529;
        --text-grey: #6c757d;
    }

    .product-detail-wrapper {
        font-family: 'Helvetica Neue', Arial, sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        color: var(--text-dark);
        line-height: 1.6;
        padding-bottom: 50px;
    }

    /* --- 1. HERO PRODUCT SECTION --- */
    .prod-hero {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Image Left, Text Right */
        gap: 40px;
        margin-bottom: 60px;
        background: #fff;
        padding: 0 0 30px 0;
    }

    .prod-image-box {
        background: #eee;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid var(--prod-border);
        height: 400px;
    }

    .prod-image-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .prod-info-box h1 {
        font-size: 2.4rem;
        color: var(--prod-primary);
        margin-top: 0;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .prod-subtitle {
        font-size: 1.1rem;
        color: var(--text-grey);
        margin-bottom: 20px;
        font-weight: 500;
        border-bottom: 1px solid var(--prod-border);
        padding-bottom: 15px;
    }

    .key-specs-list {
        list-style: none;
        padding: 0;
        margin-bottom: 30px;
        background: var(--prod-bg);
        padding: 20px;
        border-radius: 4px;
        border-left: 4px solid var(--prod-secondary);
    }

    .key-specs-list li {
        margin-bottom: 8px;
        font-size: 0.95rem;
    }
    .key-specs-list strong { color: var(--prod-primary); }

    .action-area {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .quote-btn {
        background: var(--prod-accent);
        color: #fff;
        padding: 15px 35px;
        text-decoration: none;
        font-weight: bold;
        border-radius: 4px;
        transition: background 0.3s;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .quote-btn:hover { background: #b04600; }

    .download-btn {
        background: #fff;
        color: var(--prod-primary);
        border: 2px solid var(--prod-primary);
        padding: 13px 30px;
        text-decoration: none;
        font-weight: bold;
        border-radius: 4px;
        transition: all 0.3s;
    }
    .download-btn:hover { background: var(--prod-primary); color: #fff; }

    /* --- 2. CONTENT TABS/SECTIONS --- */
    .section-head {
        font-size: 1.8rem;
        color: var(--prod-primary);
        margin-bottom: 20px;
        margin-top: 50px;
        border-bottom: 2px solid var(--prod-border);
        padding-bottom: 10px;
        position: relative;
    }
    .section-head::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 60px;
        height: 2px;
        background: var(--prod-accent);
    }

    /* --- DATA TABLES --- */
    .data-table-wrap {
        overflow-x: auto;
        margin-bottom: 30px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .tech-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 600px;
        background: #fff;
        font-size: 0.95rem;
    }

    .tech-table th {
        background: var(--prod-secondary);
        color: #fff;
        padding: 12px 15px;
        text-align: left;
        border: 1px solid var(--prod-primary);
    }

    .tech-table td {
        padding: 10px 15px;
        border: 1px solid var(--prod-border);
        color: #444;
    }

    .tech-table tr:nth-child(even) { background-color: #f9f9f9; }

    /* --- 3. COMPARISON BOX (800 vs 800H vs 800HT) --- */
    .variant-compare-box {
        background: #fff;
        border: 1px solid #dcdcdc;
        border-radius: 5px;
        padding: 25px;
        margin-top: 30px;
        background: linear-gradient(to right, #fff, #f4f7f9);
    }
    
    .variant-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 20px;
    }
    
    .variant-col {
        background: #fff;
        padding: 15px;
        border: 1px solid #eee;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }
    .variant-col h4 { color: var(--prod-accent); margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 10px;}

    /* --- 4. APPLICATIONS LIST --- */
    .app-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }
    .app-card {
        background: #fff;
        padding: 20px;
        border-left: 4px solid var(--prod-accent);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .app-card h4 { margin: 0 0 10px 0; color: var(--prod-primary); }
    .app-card p { margin: 0; font-size: 0.9rem; color: #555; }

    /* --- RESPONSIVE --- */
    @media (max-width: 768px) {
        .prod-hero { grid-template-columns: 1fr; }
        .prod-image-box { height: 300px; }
        .variant-grid { grid-template-columns: 1fr; }
        .action-area { flex-direction: column; }
        .quote-btn, .download-btn { width: 100%; text-align: center; box-sizing: border-box; }
    }
    h1 {
    text-align: center;
    margin-top: 30px;
}