:root {
        --vps-navy: #060157;
        --vps-navy-light: #120b85;
        --vps-text-main: #333333;
        --vps-text-muted: #6c757d;
        --vps-bg-light: #f8f9fa;
        --vps-border: #eaedf1;
    }

    /* --- HERO SECTION --- */
    .product-hero {
        position: relative;
        height: 300px;
        width: 100%;
        background-color: #000;
        background-image: url('/assets/images/brands/hero.webp');
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0 !important; 
    }

    .product-hero::before {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-color: rgba(0, 0, 0, 0.3); 
        z-index: 1;
    }

    .hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
    }

    .hero-title {
        color: #ffffff;
        font-size: 42px;
        font-weight: 900;
        text-transform: uppercase;
        margin: 0;
        letter-spacing: 1px;
    }

    .hero-subtitle {
        color: #fff;
        font-size: 18px;
        margin-top: 8px;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
    }

    .hero-separator {
        height: 6px;
        background-color: var(--vps-navy);
        width: 100%;
        display: block;
    }
    /* --- MOBILE SPECIFIC STYLES --- */
@media (max-width: 768px) {
    .product-hero {
        background-position: right;
    }
}
    /* --- MAIN CONTAINER & BREADCRUMBS --- */
    .vps-product-container {
        max-width: 1200px;
        margin: 30px auto 60px auto;
        padding: 0 20px;
    }

    .vps-breadcrumb {
        padding: 0;
        list-style: none;
        margin-bottom: 30px;
        font-size: 14px;
        color: var(--vps-text-muted);
    }
    .vps-breadcrumb li { display: inline; }
    .vps-breadcrumb li + li::before {
        content: "\f105"; 
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        padding: 0 12px;
        color: #ccc;
        font-size: 12px;
    }
    .vps-breadcrumb a {
        color: var(--vps-text-muted);
        text-decoration: none;
        transition: color 0.2s;
    }
    .vps-breadcrumb a:hover { color: var(--vps-navy); }
    .vps-breadcrumb .current { color: var(--vps-navy); font-weight: 600; }

    /* --- THE STRICT SIDE-BY-SIDE GRID --- */
    .vps-product-grid {
        display: grid;
        grid-template-columns: 4fr 6fr; 
        gap: 40px; 
        align-items: start;
        margin-bottom: 60px; /* Space before description starts */
    }

    /* Left Side: Image Card */
    .vps-image-card {
        background: #ffffff;
        border: 1px solid var(--vps-border);
        border-radius: 12px;
        padding: 40px 20px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        position: sticky;
        top: 20px; 
    }
.vps-image-card img {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
}

    /* Right Side: Details */
    .vps-brand-badge {
        display: inline-block;
        background-color: var(--vps-bg-light);
        color: var(--vps-navy);
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 15px;
        border: 1px solid var(--vps-border);
    }

    .vps-title {
        font-size: 32px;
        font-weight: 800;
        color: var(--vps-text-main);
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .vps-price-wrap {
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: 1px solid var(--vps-border);
    }
    .vps-price {
        font-size: 28px;
        font-weight: 700;
        color: var(--vps-navy);
    }

    .vps-cta-box {
        background-color: #f0f4f8; 
        border-left: 4px solid var(--vps-navy);
        padding: 20px;
        border-radius: 0 8px 8px 0;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }
    .vps-cta-text {
        font-size: 14px;
        color: var(--vps-text-main);
        margin: 0;
        line-height: 1.5;
    }
    .vps-cta-text a {
        color: var(--vps-navy);
        font-weight: 600;
    }
    .open-quote {
        background-color: var(--vps-navy);
        color: #ffffff;
        border: none;
        padding: 12px 24px;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(6, 1, 87, 0.2);
    }
    .open-quote:hover {
        background-color: var(--vps-navy-light);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(6, 1, 87, 0.3);
    }
.vps-specs-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
.vps-specs-list li {
      display: grid;
      grid-template-columns: 30px 150px 1fr; 
      column-gap: 10px; 
      padding: 12px 0;
      /* font-size: 15px; */
  }
  
  .vps-specs-list li:last-child { 
      border-bottom: none; 
  }
  
  .spec-icon { 
      color: var(--vps-text-muted); 
      text-align: left; 
      /* Width is now handled by the grid-template-columns above */
  }
  
  .spec-label { 
      font-weight: 600; 
      color: var(--vps-text-main); 
      /* Width and shrink are now safely handled by the grid */
  }
  
  .spec-val { 
      color: #000; 
      word-wrap: break-word; /* Prevents super long unbroken words from breaking the mobile layout */
  }
  
  .text-success-custom { 
      color: #333333; 
      font-weight: 600;
  }

    /* --- NEW: DESCRIPTION & FAQ SECTIONS --- */
    .vps-section-heading {
        font-size: 24px;
        font-weight: 800;
        color: var(--vps-navy);
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--vps-border);
    }

    .vps-description-content {
        margin-bottom: 50px;
    }
    .vps-description-content p {
        font-size: 16px;
        line-height: 1.8;
        color: #444;
        margin-bottom: 16px;
    }

.vps-description-content,
.vps-faq-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.vps-description-content {
    margin-bottom: 50px;
}
    .vps-faq-item {
        border: 1px solid var(--vps-border);
        border-radius: 8px;
        margin-bottom: 12px;
        background: #fff;
        overflow: hidden;
    }
    .vps-faq-header {
        padding: 18px 20px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        color: var(--vps-text-main);
        background: var(--vps-bg-light);
        transition: background 0.3s ease, color 0.3s ease;
    }
    .vps-faq-header:hover {
        background: #f0f4f8;
    }
    .vps-faq-header.active {
        color: var(--vps-navy);
        background: #f0f4f8;
        border-bottom: 1px solid var(--vps-border);
    }
    .vps-faq-header i {
        transition: transform 0.3s ease;
        color: var(--vps-text-muted);
    }
    .vps-faq-header.active i {
        transform: rotate(180deg);
        color: var(--vps-navy);
    }
 .vps-faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: #fff;
    padding: 0 20px;
}

.vps-faq-item.open .vps-faq-content {
    padding: 20px;
}

.vps-faq-content p {
    margin: 0;
    color: var(--vps-text-muted);
    line-height: 1.6;
    font-size: 15px;
}

    /* Force mobile stacking only on smaller screens */
    @media (max-width: 850px) {
        .vps-product-grid { grid-template-columns: 1fr; }
        .vps-cta-box { flex-direction: column; align-items: flex-start; }
        .open-quote { width: 100%; text-align: center; }
        .vps-image-card { position: relative; top: 0; min-height: 250px; }
    }
.vps-related-products{
    max-width:1200px;
    margin:60px auto;
    padding:0 20px;
}

.vps-related-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.vps-related-card{
    border:1px solid var(--vps-border);
    border-radius:8px;
    padding:20px;
    text-align:center;
    background:#fff;
    text-decoration:none;
    color:#333;
    transition:.2s;
}

.vps-related-card:hover{
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transform:translateY(-3px);
}

.vps-related-card img{ height:60px; object-fit:contain; margin-bottom:10px; }

.vps-related-title{
    font-size:14px;
    font-weight:600;
}

@media(max-width:900px){
    .vps-related-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:500px){
    .vps-related-grid{
        grid-template-columns:1fr;
    }
}