:root {
    --detail-ink: #102b3e;
    --detail-heading: #173a52;
    --detail-copy: #607584;
    --detail-muted: #7a8d99;
    --detail-blue: #0066cc;
    --detail-blue-hover: #007fff;
    --detail-soft-blue: #edf6ff;
    --detail-surface: #f7fafc;
    --detail-line: #dce7ee;
    --detail-white: #ffffff;
    --detail-shadow: 0 14px 38px rgba(18, 54, 78, .075);
}

/* Navigation density for the two product menus. */
.nav-dropdown__menu > a > span {
    font-size: .82rem;
}

.nav-dropdown__menu small {
    margin-top: 2px;
    font-size: .68rem;
    line-height: 1.35;
}

.nav-dropdown__label {
    font-size: .64rem;
    letter-spacing: .13em;
}

/* Shared detail-page foundation. */
body:is(.testing-detail-page, .certification-detail-page) main {
    color: var(--detail-copy);
    background: var(--detail-white) !important;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: .9rem;
}

body:is(.testing-detail-page, .certification-detail-page) main > .hero-banner {
    margin-bottom: 0 !important;
}

body:is(.testing-detail-page, .certification-detail-page) main .hero-container {
    max-width: 690px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

body:is(.testing-detail-page, .certification-detail-page) main .hero-heading {
    max-width: 680px;
    margin-bottom: 17px !important;
    color: #ffffff !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(1.9rem, 2.9vw, 2.7rem) !important;
    font-weight: 650 !important;
    letter-spacing: -.035em !important;
    line-height: 1.08 !important;
}

body:is(.testing-detail-page, .certification-detail-page) main .hero-banner h1:not(.hero-heading) {
    max-width: 680px;
    margin: 0 0 17px !important;
    color: #ffffff !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(1.9rem, 2.9vw, 2.7rem) !important;
    font-weight: 650 !important;
    letter-spacing: -.035em !important;
    line-height: 1.08 !important;
    text-shadow: none !important;
}

body:is(.testing-detail-page, .certification-detail-page) main .hero-heading::after {
    display: none !important;
}

body:is(.testing-detail-page, .certification-detail-page) main .hero-text {
    max-width: 620px !important;
    margin-bottom: 0 !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: clamp(.88rem, 1.2vw, .98rem) !important;
    line-height: 1.68 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

body.testing-detail-page main > .container,
body.certification-detail-page main > :is(.saber-container, .gcc-container, .qm-container, .iecee-container, .sfda-container, .cb-container) {
    width: min(calc(100% - 48px), 1180px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 70px 0 96px !important;
}

body:is(.testing-detail-page, .certification-detail-page) main :is(h2, h3, h4) {
    color: var(--detail-heading) !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 650 !important;
    letter-spacing: -.025em !important;
}

body:is(.testing-detail-page, .certification-detail-page) main h2 {
    font-size: clamp(1.45rem, 2vw, 1.72rem) !important;
    line-height: 1.22 !important;
}

body:is(.testing-detail-page, .certification-detail-page) main h1:not(.hero-heading) {
    color: var(--detail-heading) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(1.5rem, 2.1vw, 1.78rem) !important;
    font-weight: 650 !important;
    letter-spacing: -.03em !important;
    line-height: 1.18 !important;
}

body:is(.testing-detail-page, .certification-detail-page) main h1:not(.hero-heading)::after {
    display: none !important;
}

body:is(.testing-detail-page, .certification-detail-page) main h3 {
    font-size: clamp(.98rem, 1.35vw, 1.08rem) !important;
    line-height: 1.4 !important;
}

body:is(.testing-detail-page, .certification-detail-page) main h4 {
    font-size: .92rem !important;
    line-height: 1.45 !important;
}

body:is(.testing-detail-page, .certification-detail-page) main :is(p, li, td, th) {
    font-size: .87rem !important;
    line-height: 1.72 !important;
}

body:is(.testing-detail-page, .certification-detail-page) main :is(.section-description, .subtitle) {
    max-width: 720px;
    margin-inline: 0 !important;
    color: var(--detail-copy) !important;
    font-size: .88rem !important;
}

/* Testing pages: quiet white cards and useful blue signals. */
body.testing-detail-page main .section-card {
    margin-bottom: 26px !important;
    padding: clamp(30px, 4vw, 48px) !important;
    background: var(--detail-white) !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--detail-shadow) !important;
}

body.testing-detail-page main .section-header {
    margin-bottom: 30px !important;
    text-align: left !important;
}

body.testing-detail-page main .section-header h2 {
    margin-bottom: 11px !important;
}

body.testing-detail-page main .section-header h2::after,
body.testing-detail-page main .divider {
    width: 34px !important;
    height: 2px !important;
    margin: 12px 0 0 !important;
    background: var(--detail-blue) !important;
    border: 0 !important;
}

body.testing-detail-page main :is(.service-cards, .features, .advantages-grid) {
    gap: 18px !important;
}

body.testing-detail-page main :is(.service-card, .feature, .advantage-item, .standard-category, .stat-item) {
    padding: 24px !important;
    background: var(--detail-white) !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 8px !important;
    box-shadow: 0 7px 22px rgba(18, 54, 78, .055) !important;
}

body.testing-detail-page main :is(.service-card, .feature, .advantage-item, .standard-category, .stat-item):hover {
    border-color: #bfd8e9 !important;
    box-shadow: 0 12px 30px rgba(18, 54, 78, .09) !important;
    transform: translateY(-3px) !important;
}

body.testing-detail-page main :is(.card-icon, .feature-icon, .advantage-icon) {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 18px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: var(--detail-blue) !important;
    background: var(--detail-soft-blue) !important;
    border: 1px solid #d8eafa !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: 1.05rem !important;
}

body.testing-detail-page main :is(.card-icon, .feature-icon, .advantage-icon) i {
    color: inherit !important;
    font-size: 1.05rem !important;
}

body.testing-detail-page main :is(.service-card, .feature, .advantage-item) h3 {
    margin-bottom: 9px !important;
}

body.testing-detail-page main :is(.standards-container, .process-steps, .case-grid) {
    gap: 18px !important;
}

body.testing-detail-page main :is(.step, .case-item) {
    overflow: hidden;
    background: var(--detail-surface) !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.testing-detail-page main :is(.step-number, .stat-number) {
    color: var(--detail-blue) !important;
}

/* Certification pages: one visual system across six legacy templates. */
body.certification-detail-page main :is(
    .saber-section, .gcc-section, .qm-section, .iecee-section, .sfda-section, .cb-section,
    .saber-process-section, .regulation-section
) {
    margin-bottom: 26px !important;
    padding: clamp(30px, 4vw, 46px) !important;
    background: var(--detail-white) !important;
    border: 1px solid var(--detail-line) !important;
    border-left: 1px solid var(--detail-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--detail-shadow) !important;
}

body.certification-detail-page main :is(.saber-header, .gcc-header, .qm-header, .iecee-header, .sfda-header, .cb-header) {
    margin-bottom: 28px !important;
    padding-bottom: 18px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--detail-line) !important;
}

body.certification-detail-page main :is(.saber-header, .gcc-header, .qm-header, .iecee-header, .sfda-header, .cb-header) h2 {
    margin: 0 !important;
}

body.certification-detail-page main h2::after {
    display: none !important;
}

body.certification-detail-page main :is(
    .saber-highlight, .gcc-highlight, .qm-highlight, .iecee-highlight, .sfda-highlight, .cb-highlight,
    .note-box, .mandatory-products
) {
    padding: 22px 24px !important;
    color: var(--detail-copy) !important;
    background: var(--detail-surface) !important;
    border: 1px solid var(--detail-line) !important;
    border-left: 3px solid var(--detail-blue) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

body.certification-detail-page main :is(.saber-list, .gcc-list, .qm-list, .iecee-list, .sfda-list, .cb-list) li::before,
body.certification-detail-page main .fa-check-circle {
    color: var(--detail-blue) !important;
}

body.certification-detail-page main :is(.saber-list, .gcc-list, .qm-list, .iecee-list, .sfda-list, .cb-list) li::before {
    background: var(--detail-blue) !important;
}

body.certification-detail-page main .regulations-column {
    background: var(--detail-surface) !important;
    border: 1px solid var(--detail-line) !important;
    border-left: 3px solid var(--detail-blue) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

body.certification-detail-page main :is(.process-header, .regulation-section > h2) {
    text-align: left !important;
}

body.certification-detail-page main :is(
    .process-step, .sfda-process-step, .cb-process-step
) {
    background: var(--detail-surface) !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.certification-detail-page main :is(.step-number-container, .sfda-process-number, .cb-process-number) {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    color: #ffffff !important;
    background: var(--detail-blue) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    font-size: .82rem !important;
}

body.certification-detail-page main :is(
    .saber-table, .gcc-table, .qm-table, .iecee-table, .sfda-table, .cb-table, .regulation-table
) {
    overflow: hidden;
    width: 100% !important;
    color: var(--detail-copy) !important;
    background: var(--detail-white) !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

body.certification-detail-page main :is(
    .saber-table, .gcc-table, .qm-table, .iecee-table, .sfda-table, .cb-table, .regulation-table
) th {
    color: var(--detail-ink) !important;
    background: #edf4f8 !important;
    font-weight: 650 !important;
}

body.certification-detail-page main :is(
    .saber-table, .gcc-table, .qm-table, .iecee-table, .sfda-table, .cb-table, .regulation-table
) :is(th, td) {
    padding: 12px 14px !important;
    border-color: var(--detail-line) !important;
}

body.certification-detail-page main :is(.filter-btn, .product-tab) {
    min-height: 38px !important;
    padding: 8px 14px !important;
    color: var(--detail-copy) !important;
    background: var(--detail-white) !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 7px !important;
    font-size: .78rem !important;
}

body.certification-detail-page main :is(.filter-btn, .product-tab).active,
body.certification-detail-page main :is(.filter-btn, .product-tab):hover {
    color: #ffffff !important;
    background: var(--detail-blue) !important;
    border-color: var(--detail-blue) !important;
}

/* Preserve and present the original certificates, marks and document samples. */
body.certification-detail-page main .certificate-sample {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    margin: 24px 0 !important;
    padding: 24px !important;
    text-align: left !important;
    background: var(--detail-surface) !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.certification-detail-page main .certificate-sample > :is(h3, p) {
    margin: 0 !important;
}

body.certification-detail-page main .certificate-sample img {
    width: 100% !important;
    max-width: 760px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 34px rgba(18, 54, 78, .08) !important;
}

body.certification-detail-page main :is(.iecee-certificate, .qm-mark, .gcts-mark) {
    margin: 24px 0 !important;
    padding: 24px !important;
    background: var(--detail-surface) !important;
    border: 1px solid var(--detail-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.certification-detail-page main :is(.iecee-certificate, .qm-mark, .gcts-mark) img {
    max-width: 100% !important;
    height: auto !important;
}

body.certification-detail-page main .file-link {
    color: var(--detail-blue) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body.certification-detail-page main .file-link:hover {
    color: var(--detail-blue-hover) !important;
    text-decoration: underline !important;
}

/* Calls to action shared by all detail pages. */
body:is(.testing-detail-page, .certification-detail-page) main :is(
    .contact-section, .toy-contact, .saber-contact, .gcc-contact, .qm-contact,
    .iecee-contact, .sfda-contact, .cb-contact
) {
    margin-top: 28px !important;
    padding: clamp(30px, 4vw, 46px) !important;
    color: var(--detail-copy) !important;
    background: #f1f7fc !important;
    border: 1px solid #d6e7f2 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    text-align: left !important;
}

body:is(.testing-detail-page, .certification-detail-page) main :is(
    .contact-section, .toy-contact, .saber-contact, .gcc-contact, .qm-contact,
    .iecee-contact, .sfda-contact, .cb-contact
) :is(h2, h3, p) {
    color: inherit !important;
    text-shadow: none !important;
}

body:is(.testing-detail-page, .certification-detail-page) main :is(.contact-btn, .btn, .btn-primary) {
    min-height: 43px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #ffffff !important;
    background: var(--detail-blue) !important;
    border: 1px solid var(--detail-blue) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(0, 102, 204, .18) !important;
    font-size: .82rem !important;
    font-weight: 650 !important;
    text-decoration: none !important;
}

body:is(.testing-detail-page, .certification-detail-page) main :is(.contact-btn, .btn, .btn-primary):hover {
    background: var(--detail-blue-hover) !important;
    border-color: var(--detail-blue-hover) !important;
    transform: translateY(-2px) !important;
}

/* Navigation utility copy needs to remain legible without competing with the main links. */
.nav-dropdown__menu > a > span { font-size: .88rem; }
.nav-dropdown__menu small { font-size: .74rem; }
.nav-dropdown__label { font-size: .7rem; }

@media (max-width: 900px) {
    body.testing-detail-page main :is(.service-cards, .features, .advantages-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .nav-dropdown__menu > a > span { font-size: .8rem; }

    body:is(.testing-detail-page, .certification-detail-page) main .hero-heading {
        font-size: clamp(1.72rem, 7vw, 2.1rem) !important;
    }

    body:is(.testing-detail-page, .certification-detail-page) main .hero-banner h1:not(.hero-heading) {
        font-size: clamp(1.72rem, 7vw, 2.1rem) !important;
    }

    body.testing-detail-page main > .container,
    body.certification-detail-page main > :is(.saber-container, .gcc-container, .qm-container, .iecee-container, .sfda-container, .cb-container) {
        width: min(calc(100% - 32px), 1180px) !important;
        padding: 48px 0 68px !important;
    }

    body.testing-detail-page main .section-card,
    body.certification-detail-page main :is(
        .saber-section, .gcc-section, .qm-section, .iecee-section, .sfda-section, .cb-section,
        .saber-process-section, .regulation-section
    ) {
        padding: 24px 20px !important;
        border-radius: 8px !important;
    }

    body.testing-detail-page main :is(.service-cards, .features, .advantages-grid) {
        grid-template-columns: 1fr !important;
    }

    body.testing-detail-page main :is(.service-card, .feature, .advantage-item, .standard-category, .stat-item) {
        padding: 21px !important;
    }

    body:is(.testing-detail-page, .certification-detail-page) main :is(p, li, td, th) {
        font-size: .84rem !important;
    }

    body.certification-detail-page main :is(.regulation-table-container, .gcc-table, .qm-table, .iecee-table, .sfda-table, .cb-table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body:is(.testing-detail-page, .certification-detail-page) main :is(
        .contact-section, .toy-contact, .saber-contact, .gcc-contact, .qm-contact,
        .iecee-contact, .sfda-contact, .cb-contact
    ) {
        padding: 26px 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:is(.testing-detail-page, .certification-detail-page) main * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Final navigation type scale, shared by desktop dropdowns and mobile menus. */
.nav-dropdown__menu > a > span { font-size: .88rem; }
.nav-dropdown__menu small { font-size: .74rem; }
.nav-dropdown__label { font-size: .7rem; }
