/** * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
 * 
 * Shared Related Products Styles
 * Default styling for related products sections used across product pages.
 * Views without dedicated CSS files can use these default styles.
 * 
 * Usage: Include this file in views that don't have dedicated CSS files:
 * <link rel="stylesheet" href="~/css/shared/product-related-items.css" asp-append-version="true" />
 */

/* ========================================
   DEFAULT RELATED PRODUCTS STYLES
   ======================================== */
.product-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.product-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.product-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.product-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.product-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.product-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.product-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.product-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.product-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.product-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.product-related-link i {
    transition: transform 0.2s ease;
}

.product-related-link:hover i {
    transform: translateX(4px);
}

/* ========================================
   COMMON PREFIX STYLES FOR VIEWS WITHOUT CSS FILES
   ======================================== */

/* G25 Studio (uses ProductPageTemplate.css) */
.g25studio-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.g25studio-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.g25studio-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.g25studio-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.g25studio-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.g25studio-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.g25studio-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.g25studio-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.g25studio-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.g25studio-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.g25studio-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.g25studio-related-link i {
    transition: transform 0.2s ease;
}

.g25studio-related-link:hover i {
    transform: translateX(4px);
}

/* G25 Calculators */
.g25calc-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.g25calc-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.g25calc-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.g25calc-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.g25calc-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.g25calc-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.g25calc-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.g25calc-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.g25calc-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.g25calc-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.g25calc-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.g25calc-related-link i {
    transition: transform 0.2s ease;
}

.g25calc-related-link:hover i {
    transform: translateX(4px);
}

/* DNA Segment Studio */
.segment-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.segment-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.segment-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.segment-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.segment-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.segment-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.segment-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.segment-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.segment-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.segment-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.segment-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.segment-related-link i {
    transition: transform 0.2s ease;
}

.segment-related-link:hover i {
    transform: translateX(4px);
}

/* Admixture Studio Online */
.admixonline-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.admixonline-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.admixonline-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.admixonline-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.admixonline-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.admixonline-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.admixonline-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.admixonline-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.admixonline-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.admixonline-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.admixonline-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.admixonline-related-link i {
    transition: transform 0.2s ease;
}

.admixonline-related-link:hover i {
    transform: translateX(4px);
}

/* Admixture On Demand */
.admixondemand-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.admixondemand-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.admixondemand-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.admixondemand-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.admixondemand-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.admixondemand-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.admixondemand-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.admixondemand-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.admixondemand-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.admixondemand-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.admixondemand-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.admixondemand-related-link i {
    transition: transform 0.2s ease;
}

.admixondemand-related-link:hover i {
    transform: translateX(4px);
}

/* How Unlock Admixture */
.unlock-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.unlock-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.unlock-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.unlock-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.unlock-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.unlock-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.unlock-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.unlock-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.unlock-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.unlock-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.unlock-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.unlock-related-link i {
    transition: transform 0.2s ease;
}

.unlock-related-link:hover i {
    transform: translateX(4px);
}

/* DNA Testing */
.dna-test-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.dna-test-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.dna-test-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

@media (max-width: 575px) {
    .dna-test-related-grid {
        grid-template-columns: 1fr;
    }
}

.dna-test-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.dna-test-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.dna-test-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.dna-test-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.dna-test-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.dna-test-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.dna-test-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.dna-test-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.dna-test-related-link i {
    transition: transform 0.2s ease;
}

.dna-test-related-link:hover i {
    transform: translateX(4px);
}

/* DNA Testing WGS */
.wgs-test-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.wgs-test-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.wgs-test-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

@media (max-width: 575px) {
    .wgs-test-related-grid {
        grid-template-columns: 1fr;
    }
}

.wgs-test-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.wgs-test-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.wgs-test-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.wgs-test-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.wgs-test-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.wgs-test-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.wgs-test-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.wgs-test-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.wgs-test-related-link i {
    transition: transform 0.2s ease;
}

.wgs-test-related-link:hover i {
    transform: translateX(4px);
}

/* 23andMe Report */
.\32 3report-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.\32 3report-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.\32 3report-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .\32 3report-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .\32 3report-related-grid {
        grid-template-columns: 1fr;
    }
}

.\32 3report-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.\32 3report-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.\32 3report-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.\32 3report-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.\32 3report-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.\32 3report-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.\32 3report-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.\32 3report-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.\32 3report-related-link i {
    transition: transform 0.2s ease;
}

.\32 3report-related-link:hover i {
    transform: translateX(4px);
}

/* Conversion Services - FastQ to T2T */
.t2t-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.t2t-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.t2t-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.t2t-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.t2t-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.t2t-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.t2t-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.t2t-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.t2t-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.t2t-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.t2t-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.t2t-related-link i {
    transition: transform 0.2s ease;
}

.t2t-related-link:hover i {
    transform: translateX(4px);
}

/* T2T V2 and V3 - inherit from T2T */
.t2t2-related-products { padding: 60px 0; background: #f8f9fa; }
.t2t2-related-title { text-align: center; font-size: clamp(1.5rem, 3vw, 2.25rem); color: #2c3e50; margin-bottom: 40px; font-weight: 700; }
.t2t2-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
@media (max-width: 991px) { .t2t2-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .t2t2-related-grid { grid-template-columns: 1fr; } }
.t2t2-related-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: 0.3s ease; display: flex; flex-direction: column; height: 100%; border: 1px solid #e9ecef; }
.t2t2-related-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); }
.t2t2-related-img { width: 100%; height: 180px; object-fit: cover; border-bottom: 1px solid #e9ecef; }
.t2t2-related-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.t2t2-related-content h4 { font-size: 1.2rem; color: #2c3e50; margin-bottom: 8px; font-weight: 600; }
.t2t2-related-content p { font-size: 0.95rem; color: #6c757d; line-height: 1.6; margin-bottom: 16px; flex-grow: 1; }
.t2t2-related-link { display: inline-flex; align-items: center; gap: 8px; color: #237465; font-weight: 600; text-decoration: none; transition: 0.3s ease; margin-top: auto; }
.t2t2-related-link:hover { color: #C2D053; text-decoration: underline; }
.t2t2-related-link i { transition: transform 0.2s ease; }
.t2t2-related-link:hover i { transform: translateX(4px); }

.t2t3-related-products { padding: 60px 0; background: #f8f9fa; }
.t2t3-related-title { text-align: center; font-size: clamp(1.5rem, 3vw, 2.25rem); color: #2c3e50; margin-bottom: 40px; font-weight: 700; }
.t2t3-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
@media (max-width: 991px) { .t2t3-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .t2t3-related-grid { grid-template-columns: 1fr; } }
.t2t3-related-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: 0.3s ease; display: flex; flex-direction: column; height: 100%; border: 1px solid #e9ecef; }
.t2t3-related-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); }
.t2t3-related-img { width: 100%; height: 180px; object-fit: cover; border-bottom: 1px solid #e9ecef; }
.t2t3-related-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.t2t3-related-content h4 { font-size: 1.2rem; color: #2c3e50; margin-bottom: 8px; font-weight: 600; }
.t2t3-related-content p { font-size: 0.95rem; color: #6c757d; line-height: 1.6; margin-bottom: 16px; flex-grow: 1; }
.t2t3-related-link { display: inline-flex; align-items: center; gap: 8px; color: #237465; font-weight: 600; text-decoration: none; transition: 0.3s ease; margin-top: auto; }
.t2t3-related-link:hover { color: #C2D053; text-decoration: underline; }
.t2t3-related-link i { transition: transform 0.2s ease; }
.t2t3-related-link:hover i { transform: translateX(4px); }

/* Conversion Services - Other formats (FastQ, Plink, BCF, etc.) */
.fastq-related-products,
.plink-related-products,
.bcf-related-products,
.fastq-bam-related-products,
.vcf-annot-related-products,
.wgsextract-related-products,
.phasing-related-products,
.imputation-related-products,
.wgs-related-products,
.wgs2-related-products,
.vcf-related-products,
.vcf2-related-products,
.\32 3imputed-related-products,
.raw-vcf-related-products,
.raw-raw-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.fastq-related-title,
.plink-related-title,
.bcf-related-title,
.fastq-bam-related-title,
.vcf-annot-related-title,
.wgsextract-related-title,
.phasing-related-title,
.imputation-related-title,
.wgs-related-title,
.wgs2-related-title,
.vcf-related-title,
.vcf2-related-title,
.\32 3imputed-related-title,
.raw-vcf-related-title,
.raw-raw-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.fastq-related-grid,
.plink-related-grid,
.bcf-related-grid,
.fastq-bam-related-grid,
.vcf-annot-related-grid,
.wgsextract-related-grid,
.phasing-related-grid,
.imputation-related-grid,
.wgs-related-grid,
.wgs2-related-grid,
.vcf-related-grid,
.vcf2-related-grid,
.\32 3imputed-related-grid,
.raw-vcf-related-grid,
.raw-raw-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .fastq-related-grid,
    .plink-related-grid,
    .bcf-related-grid,
    .fastq-bam-related-grid,
    .vcf-annot-related-grid,
    .wgsextract-related-grid,
    .phasing-related-grid,
    .imputation-related-grid,
    .wgs-related-grid,
    .wgs2-related-grid,
    .vcf-related-grid,
    .vcf2-related-grid,
    .\32 3imputed-related-grid,
    .raw-vcf-related-grid,
    .raw-raw-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .fastq-related-grid,
    .plink-related-grid,
    .bcf-related-grid,
    .fastq-bam-related-grid,
    .vcf-annot-related-grid,
    .wgsextract-related-grid,
    .phasing-related-grid,
    .imputation-related-grid,
    .wgs-related-grid,
    .wgs2-related-grid,
    .vcf-related-grid,
    .vcf2-related-grid,
    .\32 3imputed-related-grid,
    .raw-vcf-related-grid,
    .raw-raw-related-grid {
        grid-template-columns: 1fr;
    }
}

.fastq-related-card,
.plink-related-card,
.bcf-related-card,
.fastq-bam-related-card,
.vcf-annot-related-card,
.wgsextract-related-card,
.phasing-related-card,
.imputation-related-card,
.wgs-related-card,
.wgs2-related-card,
.vcf-related-card,
.vcf2-related-card,
.\32 3imputed-related-card,
.raw-vcf-related-card,
.raw-raw-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.fastq-related-card:hover,
.plink-related-card:hover,
.bcf-related-card:hover,
.fastq-bam-related-card:hover,
.vcf-annot-related-card:hover,
.wgsextract-related-card:hover,
.phasing-related-card:hover,
.imputation-related-card:hover,
.wgs-related-card:hover,
.wgs2-related-card:hover,
.vcf-related-card:hover,
.vcf2-related-card:hover,
.\32 3imputed-related-card:hover,
.raw-vcf-related-card:hover,
.raw-raw-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.fastq-related-img,
.plink-related-img,
.bcf-related-img,
.fastq-bam-related-img,
.vcf-annot-related-img,
.wgsextract-related-img,
.phasing-related-img,
.imputation-related-img,
.wgs-related-img,
.wgs2-related-img,
.vcf-related-img,
.vcf2-related-img,
.\32 3imputed-related-img,
.raw-vcf-related-img,
.raw-raw-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.fastq-related-content,
.plink-related-content,
.bcf-related-content,
.fastq-bam-related-content,
.vcf-annot-related-content,
.wgsextract-related-content,
.phasing-related-content,
.imputation-related-content,
.wgs-related-content,
.wgs2-related-content,
.vcf-related-content,
.vcf2-related-content,
.\32 3imputed-related-content,
.raw-vcf-related-content,
.raw-raw-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.fastq-related-content h4,
.plink-related-content h4,
.bcf-related-content h4,
.fastq-bam-related-content h4,
.vcf-annot-related-content h4,
.wgsextract-related-content h4,
.phasing-related-content h4,
.imputation-related-content h4,
.wgs-related-content h4,
.wgs2-related-content h4,
.vcf-related-content h4,
.vcf2-related-content h4,
.\32 3imputed-related-content h4,
.raw-vcf-related-content h4,
.raw-raw-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.fastq-related-content p,
.plink-related-content p,
.bcf-related-content p,
.fastq-bam-related-content p,
.vcf-annot-related-content p,
.wgsextract-related-content p,
.phasing-related-content p,
.imputation-related-content p,
.wgs-related-content p,
.wgs2-related-content p,
.vcf-related-content p,
.vcf2-related-content p,
.\32 3imputed-related-content p,
.raw-vcf-related-content p,
.raw-raw-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.fastq-related-link,
.plink-related-link,
.bcf-related-link,
.fastq-bam-related-link,
.vcf-annot-related-link,
.wgsextract-related-link,
.phasing-related-link,
.imputation-related-link,
.wgs-related-link,
.wgs2-related-link,
.vcf-related-link,
.vcf2-related-link,
.\32 3imputed-related-link,
.raw-vcf-related-link,
.raw-raw-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.fastq-related-link:hover,
.plink-related-link:hover,
.bcf-related-link:hover,
.fastq-bam-related-link:hover,
.vcf-annot-related-link:hover,
.wgsextract-related-link:hover,
.phasing-related-link:hover,
.imputation-related-link:hover,
.wgs-related-link:hover,
.wgs2-related-link:hover,
.vcf-related-link:hover,
.vcf2-related-link:hover,
.\32 3imputed-related-link:hover,
.raw-vcf-related-link:hover,
.raw-raw-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.fastq-related-link i,
.plink-related-link i,
.bcf-related-link i,
.fastq-bam-related-link i,
.vcf-annot-related-link i,
.wgsextract-related-link i,
.phasing-related-link i,
.imputation-related-link i,
.wgs-related-link i,
.wgs2-related-link i,
.vcf-related-link i,
.vcf2-related-link i,
.\32 3imputed-related-link i,
.raw-vcf-related-link i,
.raw-raw-related-link i {
    transition: transform 0.2s ease;
}

.fastq-related-link:hover i,
.plink-related-link:hover i,
.bcf-related-link:hover i,
.fastq-bam-related-link:hover i,
.vcf-annot-related-link:hover i,
.wgsextract-related-link:hover i,
.phasing-related-link:hover i,
.imputation-related-link:hover i,
.wgs-related-link:hover i,
.wgs2-related-link:hover i,
.vcf-related-link:hover i,
.vcf2-related-link:hover i,
.\32 3imputed-related-link:hover i,
.raw-vcf-related-link:hover i,
.raw-raw-related-link:hover i {
    transform: translateX(4px);
}

/* Trait Ancestry Cross */
.trait-cross-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.trait-cross-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.trait-cross-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

@media (max-width: 575px) {
    .trait-cross-related-grid {
        grid-template-columns: 1fr;
    }
}

.trait-cross-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.trait-cross-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.trait-cross-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.trait-cross-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.trait-cross-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.trait-cross-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.trait-cross-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.trait-cross-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.trait-cross-related-link i {
    transition: transform 0.2s ease;
}

.trait-cross-related-link:hover i {
    transform: translateX(4px);
}

/* Health Report */
.health-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.health-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.health-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.health-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.health-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.health-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.health-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.health-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.health-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.health-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.health-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.health-related-link i {
    transition: transform 0.2s ease;
}

.health-related-link:hover i {
    transform: translateX(4px);
}

/* Viking (no CSS file) */
.viking-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.viking-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.viking-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.viking-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.viking-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.viking-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.viking-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.viking-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.viking-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.viking-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.viking-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.viking-related-link i {
    transition: transform 0.2s ease;
}

.viking-related-link:hover i {
    transform: translateX(4px);
}

/* Global Ancient (no CSS file) */
.global-related-products {
    padding: 60px 0;
    background: #f8f9fa;
}

.global-related-title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #2c3e50;
    margin-bottom: 40px;
    font-weight: 700;
}

.global-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.global-related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e9ecef;
}

.global-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.global-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #e9ecef;
}

.global-related-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.global-related-content h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.global-related-content p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.global-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #237465;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: auto;
}

.global-related-link:hover {
    color: #C2D053;
    text-decoration: underline;
}

.global-related-link i {
    transition: transform 0.2s ease;
}

.global-related-link:hover i {
    transform: translateX(4px);
}