
/* =============================================================================
 * ARCpoint Framework 2 — Redesign Overrides
 *
 * Loaded by functions.php (my_theme_enqueue_styles), after the child style.css.
 *
 * Scoping body classes (set by includes/page-body-classes.php):
 *   .page-type-b2c           consumer pages (also on dual-brand B2C-style pages)
 *   .page-type-b2b           Employer Solutions + B2B sub-pages
 *   .page-type-dual-brand    extra modifier on dual-brand sites' B2C pages
 *                            (used here to render the above-hero notification bar)
 *
 * Companion edits (NOT in this file):
 *   - functions.php arcpoint_header_shortcode: B2C $brandColor #54B8A1 → #F6871F
 *   - style.css: WPForms button overrides + --brand-accent var teal → orange
 *   - css/arcpoint-popup.css: popup button bg teal → orange
 *
 * Why we use !important here:
 *   Divi emits its dynamic per-page CSS as inline <style> tags inside the body
 *   (after our <head>-linked stylesheets). To win over those rules we need
 *   matching/higher specificity AND !important.
 * ============================================================================= */

:root {
    --redesign-blue:   #005A96;
    --redesign-navy:   #00254A;
    --redesign-orange: #F6871F;
    --redesign-orange-hover: #d97a16;
    --redesign-white:  #FFFFFF;
} 




/* ===== Helvetica Neue ===== */
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue-BoldItalic.woff2') format('woff2'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue-LightItalic.woff2') format('woff2'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue-MediumItalic.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue-Thin.woff2') format('woff2'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue-ThinItalic.woff2') format('woff2'); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue-UltraLight.woff2') format('woff2'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue'; src:url('fonts/HelveticaNeue-UltraLightItalic.woff2') format('woff2'); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Helvetica Neue Condensed'; src:url('fonts/HelveticaNeue-CondensedBold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue Condensed'; src:url('fonts/HelveticaNeue-CondensedBlack.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }


@font-face { font-family:'Century Gothic'; src:url('fonts/CenturyGothic.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Century Gothic'; src:url('fonts/CenturyGothic-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }


body, body p, body li, body td, body th, body label,
body input, body textarea, body select,
body a, body span, body div, body button,
body .et_pb_module, body .et_pb_button {
    font-family: 'Century Gothic', sans-serif !important;
}


body, body p, body li, body td, body th, body label,
body input, body textarea, body select,
body a, body span, body div, body button,
body .et_pb_module, body .et_pb_button {
    font-synthesis: none;
}


body h1, body h2, body h3, body h4, body h5, body h6,
body .et_pb_blurb_title, body .et_pb_slide_title,
body .et_pb_menu a, body .et-menu a,
body #top-menu a, body .et_mobile_menu a {
    font-family: 'Helvetica Neue', sans-serif !important;
}


#apl-faq-section .chiac_divi_accordions_item .chiac-header .chiac_left_icon,
#apl-faq-section .chiac_divi_accordions_item .chiac-header .chiac_right_icon,
#apl-faq-section .chiac_divi_accordions_item .chiac-header .chiac_left_icon span,
#apl-faq-section .chiac_divi_accordions_item .chiac-header .chiac_right_icon span {
    font-family: ETmodules !important;
    font-weight: 400 !important;
}
/* =============================================================================
 * BUTTONS — site-wide recolor from teal to orange
 *
 * Covers Divi modules (any et_pb_button), WooCommerce buttons (cart, checkout,
 * single-product), Divi shop overlay icons, Divi shop price text.
 * ============================================================================= */

/* All Divi buttons */
.et_pb_button,
.et_pb_button:link,
.et_pb_button:visited {
    background-color: var(--redesign-orange) !important;
    border-color: var(--redesign-orange) !important;
    color: var(--redesign-white) !important;
}

.et_pb_button:hover,
.et_pb_button:active {
    background-color: var(--redesign-orange-hover) !important;
    border-color: var(--redesign-orange-hover) !important;
    color: var(--redesign-white) !important;
}

/* Exclude floating icon-only phone buttons from the recolor.
   The hero "Call Us Now" CTA has id="es-head-call-us-btn" (and stays orange);
   the fixed-position floating phone button has NO id and renders a phone.png
   background-image — so a solid fill would hide its icon. Keep it transparent. */
.et_pb_button[href^="tel:"]:not([id]),
.et_pb_button[href^="tel:"]:not([id]):link,
.et_pb_button[href^="tel:"]:not([id]):visited,
.et_pb_button[href^="tel:"]:not([id]):hover,
.et_pb_button[href^="tel:"]:not([id]):active {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* WooCommerce buttons (cart, checkout, single-product add-to-cart) */
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce input.button,
.woocommerce-page input.button,
.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce #respond input#submit,
.woocommerce-page #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce-page #respond input#submit.alt {
    background-color: var(--redesign-orange) !important;
    border-color: var(--redesign-orange) !important;
    color: var(--redesign-white) !important;
}

.woocommerce a.button:hover,
.woocommerce-page a.button:hover,
.woocommerce button.button:hover,
.woocommerce-page button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page input.button:hover {
    background-color: var(--redesign-orange-hover) !important;
    border-color: var(--redesign-orange-hover) !important;
}

/* Divi shop module — product price and overlay icon were hardcoded teal */
.et_pb_shop .price,
.et_pb_shop .price .amount,
.et_pb_shop_0 .price,
.et_pb_shop_0 .price .amount {
    color: var(--redesign-orange) !important;
}

.et_pb_shop .et_overlay:before,
.et_pb_shop_0 .et_overlay:before {
    color: var(--redesign-orange) !important;
}

/* =============================================================================
 * INFO BAND — yellow text → white (the navy band right under the home hero)
 *
 * Divi inlines `.et_pb_blurb_0 / _1 / _2 / _3 { color:#f6d258 !important; }` on
 * the home page. The mockup shows white text on the navy band.
 * Scoped to B2C/Dual-Brand only — B2B pages don't have this band.
 * ============================================================================= */

.page-type-b2c .et_pb_section_1 .et_pb_blurb,
.page-type-b2c .et_pb_section_1 .et_pb_blurb .et_pb_blurb_description,
.page-type-b2c .et_pb_section_1 .et_pb_blurb .et_pb_main_blurb_image,
.page-type-b2c .et_pb_section_1 .et_pb_blurb p,
.page-type-b2c .et_pb_section_1 .et_pb_blurb span,
.page-type-b2c .et_pb_section_1 .et_pb_blurb .et_pb_module_header,
.page-type-b2c .et_pb_section_1 .et_pb_blurb .et_pb_module_header a {
    color: var(--redesign-white) !important;
}

/* =============================================================================
 * FORM CONTAINERS — B2C: blue background per mockup
 *
 * Applies to Contact 7, Gravity Forms, Divi contact form. Not WPForms (handled
 * in style.css with location-template-b2c scope).
 * ============================================================================= */

.page-type-b2c .et_pb_contact_form_container,
.page-type-b2c .wpcf7-form,
.page-type-b2c .gform_wrapper {
    background-color: var(--redesign-blue);
    padding: 30px;
    border-radius: 8px;
}

.page-type-b2c .et_pb_contact_form input[type="text"],
.page-type-b2c .et_pb_contact_form input[type="email"],
.page-type-b2c .et_pb_contact_form input[type="tel"],
.page-type-b2c .et_pb_contact_form textarea,
.page-type-b2c .wpcf7-form input[type="text"],
.page-type-b2c .wpcf7-form input[type="email"],
.page-type-b2c .wpcf7-form input[type="tel"],
.page-type-b2c .wpcf7-form textarea {
    background-color: var(--redesign-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.page-type-b2c .et_pb_contact_form label,
.page-type-b2c .wpcf7-form label {
    color: var(--redesign-white);
}

/* =============================================================================
 * DUAL-BRAND — above-hero notification bar
 *
 * Rendered with ::before on the first content section so we never touch Divi
 * page content. Final copy to be confirmed with marketing.
 * ============================================================================= */

.page-type-dual-brand #et-main-area > .et_pb_section:first-of-type::before {
    content: "Please make sure you're on the right site for your needs.";
    display: block;
    background-color: var(--redesign-navy);
    color: var(--redesign-white);
    text-align: center;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .page-type-dual-brand #et-main-area > .et_pb_section:first-of-type::before {
        font-size: 13px;
        padding: 10px 12px;
    }
}

/* =============================================================================
 * DEFERRED — keep in mind, not applied yet
 *
 * - Hero H1 font swap (Kalam → Poppins) — see typography phase
 * - Hero solid-navy vs image+overlay decision — current image+overlay matches
 *   mockup intent, leaving alone
 * - Specific selectors for the new "VIEW ALL TESTS" header button: handled by
 *   functions.php $brandColor change, no CSS override needed
 * ============================================================================= */

 /* =============================================================================
 * SLIDER BUTTON — Orange + Century Gothic
 * ============================================================================= */

body.page-type-b2c .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_more_button,
body.page-type-b2b .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_more_button {
    background-color: var(--redesign-orange) !important;
    border-color: var(--redesign-orange) !important;
    color: var(--redesign-white) !important;
    font-family: 'Century Gothic', CenturyGothic, sans-serif !important;
}

#apl-wellness-section * {
    color: #fff !important;

}

#apl-wellness-section a {
    font-weight: 100 !important;
    /* font-size: 13px !important; */
}

.footer .contact-item .icon {
    filter: brightness(0) saturate(100%) invert(58%) sepia(74%) saturate(1000%) hue-rotate(345deg) brightness(100%);
}




#apl-faq-section .chiac-content {
    background-color: #012b49 !important;
}

#apl-faq-section .chiac-content p,
#apl-faq-section .chiac-content li,
#apl-faq-section .chiac-content span {
    color: #fff !important;
}

.apl-dark-section.et_pb_section {
    background-color: #00254a !important;
    margin-bottom: 1% !important;
}

.apl-dark-section * {
    color: #fff !important;
}
.apl-dark-section p {
   
}

#faq h3 {
    color: #005A96 !important;
            font-size: 36px !important;
            font-weight: 700;
            text-align: center;
            margin: 0 0 40px;
            text-transform: none !important;
}

#apl-faq-section .chiac-title {
    font-weight: 200 !important;
    font-size: 16px !important;
}

#apl-faq-section .chiac-content p {
     font-size: 15px !important;
}


@media only screen and (min-width: 981px) {
    body.page-type-b2c .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_slide_description,
    body.page-type-b2b .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_slide_description {
        text-align: left !important;
        margin: 0 !important;
        max-width: 620px !important;
        padding: 0 !important;
    }

    body.page-type-b2c .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_button_wrapper,
    body.page-type-b2b .et_pb_fullwidth_slider_0_tb_body.et_pb_slider .et_pb_button_wrapper {
        text-align: left !important;
    }
}

#apl-employer-solutions.et_pb_section {
        padding: 2% 0 !important;
        /* text-align: right !important; */
}
#apl-employer-solutions.et_pb_section h3{
    text-transform: none !important;
}

#apl-employer-solutions p{
    width: 50% ;
    font-weight: 100;
     font-size: 20px !important;

}

@media only screen and (min-width: 981px) {
    #apl-employer-solutions h3{
     width: 100% ;
    }

    #apl-employer-solutions p{
        width: 100% ;
        font-weight: 100 ;
        font-size: 20px ;
    }

}

/* ==== BEGIN #apl-clinical-hero ============================================ */
 
body.page-type-b2c #apl-clinical-hero.et_pb_section {
    --apl-container: 1080px;
    --apl-pad-x: clamp(28px, 4vw, 64px);
    --apl-pad-y: clamp(40px, 5vw, 72px);
    --apl-gutter: max(var(--apl-pad-x), calc((100vw - var(--apl-container)) / 2));

    background-color: var(--redesign-blue) !important;
    background-image: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    /* Gap above the section. margin, not padding — the section background is
       blue and so is the B2C header, so padding would only add more blue. */
    margin: clamp(16px, 2vw, 28px) 0 0 !important;
}

/* Gap above the section, rendered as an in-flow white strip.
   Immune to margin collapse and to Divi's inline per-page margin rules. */
body.page-type-b2c #apl-clinical-hero.et_pb_section::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: clamp(3px, 3px, 3px) !important;
    background-color: #fff !important;
}

body.page-type-b2c #apl-clinical-hero .et_pb_row {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

body.page-type-b2c #apl-clinical-hero .et_pb_column {
    width: 50% !important;
    margin: 0 !important;
    min-height: 520px !important;
}


body.page-type-b2c #apl-clinical-hero .et_pb_column:first-child {
    box-sizing: border-box !important;
    padding: var(--apl-pad-y) var(--apl-pad-x) var(--apl-pad-y) var(--apl-gutter) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* One shared left edge for every module — Divi's per-module margins break it. */
body.page-type-b2c #apl-clinical-hero .et_pb_column:first-child > .et_pb_module {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

/* Right — positioning context for the image. */
body.page-type-b2c #apl-clinical-hero .et_pb_column:last-child {
    position: relative !important;
    padding: 0 !important;
}

/* Image fills the column regardless of parent heights. inset:0 sizes it. */
body.page-type-b2c #apl-clinical-hero .et_pb_column:last-child .et_pb_image {
    position: absolute !important;
    inset: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-type-b2c #apl-clinical-hero .et_pb_column:last-child .et_pb_image_wrap,
body.page-type-b2c #apl-clinical-hero .et_pb_column:last-child .et_pb_image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

body.page-type-b2c #apl-clinical-hero .et_pb_column:last-child .et_pb_image img {
    object-fit: cover !important;
    object-position: center !important;
}

/* ---- Typography ---------------------------------------------------------
 * ----------------------------------------------------------------------- */
body.page-type-b2c #apl-clinical-hero h1 {
    font-family: 'Helvetica Neue', Helvetica, sans-serif !important;
    font-size: clamp(30px, 3.6vw, 46px) !important;
    font-weight: 300 !important;
    letter-spacing: -.015em !important;
    line-height: 1.15 !important;
    color: var(--redesign-white) !important;
    text-shadow: none !important;
    margin-bottom: 20px !important;
}

body.page-type-b2c #apl-clinical-hero h1 b,
body.page-type-b2c #apl-clinical-hero h1 strong {
    font-weight: 500 !important;
}

body.page-type-b2c #apl-clinical-hero .et_pb_text,
body.page-type-b2c #apl-clinical-hero .et_pb_text_inner {
    width: 100% !important;
}

body.page-type-b2c #apl-clinical-hero .et_pb_text p {
    font-size: clamp(16px, 1.3vw, 19px) !important;
    line-height: 1.75 !important;
    letter-spacing: .01em !important;
    color: var(--redesign-white) !important;
    max-width: 46ch !important;
}

/* CTA — flush left, not centered by Divi's default wrapper. */
body.page-type-b2c #apl-clinical-hero .et_pb_button_module_wrapper {
    text-align: left !important;
    margin: 0 0 12px !important;
}

/* Button label — heavier than the light H1 so the CTA reads as the anchor. */
body.page-type-b2c #apl-clinical-hero .et_pb_button {
    font-family: 'Century Gothic', CenturyGothic, sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: .04em !important;
    /* text-transform: uppercase !important; */
}



body.page-type-b2c #apl-clinical-hero em {
    font-size: 14px !important;
    font-style: italic !important;
    letter-spacing: .02em !important;
    color: var(--redesign-white) !important;
    /* opacity: .9 !important; */
}

/* ---- Mobile: image on top, copy and CTA right under it ---------------- */
@media (max-width: 980px) {
    body.page-type-b2c #apl-clinical-hero .et_pb_row {
        flex-direction: column !important;
    }

    body.page-type-b2c #apl-clinical-hero .et_pb_column {
        width: 100% !important;
        min-height: 0 !important;
    }

    body.page-type-b2c #apl-clinical-hero .et_pb_column:first-child {
        padding-left: var(--apl-pad-x) !important;
    }

    body.page-type-b2c #apl-clinical-hero .et_pb_column:last-child {
        order: -1 !important;
    }

    /* Static flow; the wrapper sets the height, img inherits 100%. */
    body.page-type-b2c #apl-clinical-hero .et_pb_column:last-child .et_pb_image {
        position: static !important;
        height: 240px !important;
    }
}
/* ==== END #apl-clinical-hero ============================================= */

/* ==== BEGIN #apl-popular-tests ============================================
 * Framework 2 — Clinical template :: Popular Tests
 * One horizontal card per test: icon, name, price, arrow on a single line.
 * Section is white; the cards carry the navy that used to be the band.
 * ========================================================================= */

body.page-type-b2c #apl-popular-tests.et_pb_section {
    background-color: var(--redesign-white) !important;
    min-height: 0 !important;
    padding: clamp(28px, 3.5vw, 44px) 0 !important;
    margin: 0 !important;
}

body.page-type-b2c #apl-popular-tests h3 {
    color: var(--redesign-blue) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: none !important;
    margin: 0 0 28px !important;
    scroll-margin-top: 200px !important;
}

/* Divi inlines per-module colors; one sweep inside the card is cheaper than
   chasing each element. Scoped to the card so the heading stays blue. */
body.page-type-b2c #apl-popular-tests .custom-product-item * {
    color: var(--redesign-white) !important;
}

/* ---- Stack ------------------------------------------------------------- */
body.page-type-b2c #apl-popular-tests .custom-product-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

body.page-type-b2c #apl-popular-tests .custom-product-item {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--redesign-navy) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    transition: border-color .2s ease, transform .2s ease !important;
}

body.page-type-b2c #apl-popular-tests .custom-product-item:hover {
    border-color: var(--redesign-orange) !important;
    transform: translateY(-2px) !important;
}

body.page-type-b2c #apl-popular-tests .custom-product-item > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 18px 24px !important;
    text-decoration: none !important;
}

/* ---- Icon -------------------------------------------------------------- */
body.page-type-b2c #apl-popular-tests .custom-product-image-wrapper {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    overflow: visible !important;
}

body.page-type-b2c #apl-popular-tests .custom-product-image,
body.page-type-b2c #apl-popular-tests .arcpoint-product-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: var(--redesign-orange) !important;
}

body.page-type-b2c #apl-popular-tests .arcpoint-product-icon i,
body.page-type-b2c #apl-popular-tests .custom-product-image-wrapper i,
body.page-type-b2c #apl-popular-tests .arcpoint-product-icon i::before {
    display: inline-block !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: var(--redesign-orange) !important;
}

body.page-type-b2c #apl-popular-tests .custom-product-image-wrapper svg {
    width: 28px !important;
    height: 28px !important;
    fill: var(--redesign-orange) !important;
}

/* Raster fallback icons — recolored to orange via filter. */
body.page-type-b2c #apl-popular-tests .custom-product-image-wrapper img {
    width: 28px !important;
    height: auto !important;
    filter: brightness(0) saturate(100%) invert(58%) sepia(74%)
            saturate(1000%) hue-rotate(345deg) brightness(100%) !important;
}

/* ---- Name -------------------------------------------------------------- */
body.page-type-b2c #apl-popular-tests .custom-overlay {
    display: none !important;
}

/* min-width:0 lets the name shrink instead of forcing the row to wrap. */
body.page-type-b2c #apl-popular-tests .custom-product-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- Price ------------------------------------------------------------- */
body.page-type-b2c #apl-popular-tests .custom-product-price {
    display: block !important;
    flex: 0 0 auto !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-align: right !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body.page-type-b2c #apl-popular-tests .custom-product-price .woocommerce-Price-amount,
body.page-type-b2c #apl-popular-tests .custom-product-price bdi,
body.page-type-b2c #apl-popular-tests .custom-product-price .woocommerce-Price-currencySymbol {
    display: inline !important;
    color: var(--redesign-white) !important;
    font-size: inherit !important;
}

/* ---- Arrow --------------------------------------------------------------
 * Sits on the row, not the price, so it stays pinned to the right edge
 * whatever the price string is ("Call for pricing" on $0/$0.01 products).
 * ----------------------------------------------------------------------- */
body.page-type-b2c #apl-popular-tests .custom-product-item > a::after {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 28px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none'%3E%3Cpath d='M1 7h18M19 7l-6-6M19 7l-6 6' stroke='%23F6871F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: transform .2s ease !important;
}

body.page-type-b2c #apl-popular-tests .custom-product-item:hover > a::after {
    transform: translateX(4px) !important;
}

/* ---- CTA — matches the hero button --------------------------------------
 * Label is hardcoded uppercase in functions.php; text-transform:none
 * renders it as written, so recase it there.
 * ----------------------------------------------------------------------- */
body.page-type-b2c #apl-popular-tests .et_pb_button_module_wrapper {
    margin: 28px 0 0 !important;
    text-align: center !important;
}

body.page-type-b2c #apl-popular-tests .et_pb_button {
    font-family: 'Century Gothic', CenturyGothic, sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    background-color: var(--redesign-orange) !important;
    border-color: var(--redesign-orange) !important;
    color: var(--redesign-white) !important;
}

body.page-type-b2c #apl-popular-tests .et_pb_button:hover {
    background-color: var(--redesign-orange-hover) !important;
    border-color: var(--redesign-orange-hover) !important;
}

@media (max-width: 600px) {
    body.page-type-b2c #apl-popular-tests h3 {
        font-size: 28px !important;
    }

    body.page-type-b2c #apl-popular-tests .custom-product-item > a {
        gap: 12px !important;
        padding: 15px 16px !important;
    }

    body.page-type-b2c #apl-popular-tests .custom-product-image-wrapper {
        display: none !important;
    }

    body.page-type-b2c #apl-popular-tests .custom-product-title {
        font-size: 15px !important;
    }

    body.page-type-b2c #apl-popular-tests .custom-product-price {
        font-size: 14px !important;
    }

    body.page-type-b2c #apl-popular-tests .custom-product-item > a::after {
        width: 22px !important;
        height: 15px !important;
    }
}
/* ==== END #apl-popular-tests ============================================= */

/* ---- CTA — matches the hero button --------------------------------------
 * ----------------------------------------------------------------------- */
body.page-type-b2c #apl-popular-tests .et_pb_button_module_wrapper {
    margin: 28px 0 0 !important;
    text-align: center !important;
}

body.page-type-b2c #apl-popular-tests .et_pb_button {
    font-family: 'Century Gothic', CenturyGothic, sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    background-color: var(--redesign-orange) !important;
    border-color: var(--redesign-orange) !important;
    color: var(--redesign-white) !important;
}

body.page-type-b2c #apl-popular-tests .et_pb_button:hover {
    background-color: var(--redesign-orange-hover) !important;
    border-color: var(--redesign-orange-hover) !important;
}

/* ---- Breakpoints ------------------------------------------------------ */
@media (max-width: 980px) {
    body.page-type-b2c #apl-popular-tests .custom-product-item {
        flex-basis: calc((100% - 30px) / 2) !important;
        max-width: calc((100% - 30px) / 2) !important;
    }
}

@media (max-width: 600px) {
    body.page-type-b2c #apl-popular-tests .custom-product-grid {
        gap: 20px !important;
        justify-content: center !important;
    }
    body.page-type-b2c #apl-popular-tests .custom-product-item {
        flex-basis: 100% !important;
        max-width: 380px !important;
        padding: 24px 20px !important;
    }
    body.page-type-b2c #apl-popular-tests .custom-product-title {
        font-size: 18px !important;
    }
}
/* ==== END #apl-popular-tests ============================================= */

/* ==== BEGIN #apl-how-it-works ============================================= */

body.page-type-b2c #apl-how-it-works.et_pb_section {
    background-color: var(--redesign-blue) !important;
    padding: clamp(40px, 5vw, 64px) 0 !important;
}

/* Divi inlines per-module colors here; one sweep, then win back below. */
body.page-type-b2c #apl-how-it-works * {
    color: var(--redesign-white) !important;
}

body.page-type-b2c #apl-how-it-works h3 {
    font-size: 36px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: none !important;
    margin: 0 0 40px !important;
}

body.page-type-b2c #apl-how-it-works .et_pb_column_1_3 {
    text-align: center !important;
}

/* Photo frame. max-width caps it well below the column so three steps read as
   a set instead of three billboards. Beats Divi's inline width:40%. */
body.page-type-b2c #apl-how-it-works .et_pb_column_1_3 .et_pb_image {
    display: block !important;
    width: 100% !important;
    max-width: 210px !important;
    margin: 0 auto 22px !important;
    text-align: center !important;
}

body.page-type-b2c #apl-how-it-works .et_pb_column_1_3 .et_pb_image_wrap {
    display: block !important;
    width: 100% !important;
}

body.page-type-b2c #apl-how-it-works .et_pb_column_1_3 .et_pb_image img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 8px !important;
    /* background: var(--redesign-white) !important; */
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2) !important;
}

body.page-type-b2c #apl-how-it-works .et_pb_column_1_3:hover .et_pb_image img {
    outline: 3px solid var(--redesign-orange) !important;
    outline-offset: 3px !important;
}

/* Step caption */
body.page-type-b2c #apl-how-it-works .et_pb_blurb {
    padding: 0 12px !important;
}

body.page-type-b2c #apl-how-it-works .et_pb_blurb .et_pb_module_header,
body.page-type-b2c #apl-how-it-works .et_pb_blurb .et_pb_module_header a {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: .02em !important;
}

@media (max-width: 980px) {
    body.page-type-b2c #apl-how-it-works .et_pb_column_1_3 .et_pb_image {
        max-width: 190px !important;
    }
}

@media (max-width: 600px) {
    body.page-type-b2c #apl-how-it-works .et_pb_column_1_3 .et_pb_image {
        max-width: 170px !important;
    }
    body.page-type-b2c #apl-how-it-works h3 {
        margin-bottom: 28px !important;
    }
}
/* ==== END #apl-how-it-works ============================================== */



/* ==== BEGIN #apl-do-you ===================================================
 * Framework 2 — Clinical template :: do you...
 * ========================================================================= */

body.page-type-b2c #apl-do-you.et_pb_section {
    background-color: var(--redesign-navy) !important;
    padding: clamp(28px, 3.5vw, 44px) 0 !important;
}

/* header section */
body.page-type-b2c #apl-do-you h3 {
    color: var(--redesign-white) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: none !important;
    margin: 0 0 24px !important;
}


body.page-type-b2c #apl-do-you .et_pb_row:last-of-type {
    margin: 0 auto !important;
    max-width: 1100px !important;
}

body.page-type-b2c #apl-do-you .et_pb_row:last-of-type .et_pb_column {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 30px !important;
}

/* card */
body.page-type-b2c #apl-do-you .et_pb_blurb {
    flex: 0 1 calc((100% - 2 * 30px) / 3) !important;
    max-width: calc((100% - 2 * 30px) / 3) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 32px 26px !important;
    background: var(--redesign-white) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .09),
                0 -2px 16px rgba(0, 0, 0, .09) !important;
    transition: transform .2s ease !important;
}

body.page-type-b2c #apl-do-you .et_pb_blurb:hover {
    transform: translateY(-3px) !important;
}

body.page-type-b2c #apl-do-you .et_pb_blurb .et_pb_blurb_content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    max-width: none !important;
}

body.page-type-b2c #apl-do-you .et_pb_blurb .et_pb_main_blurb_image {
    width: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-align: center !important;
}

body.page-type-b2c #apl-do-you .et_pb_blurb .et_pb_image_wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
}

body.page-type-b2c #apl-do-you .et_pb_blurb .et-pb-icon {
    color: var(--redesign-orange) !important;
    font-size: 52px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

body.page-type-b2c #apl-do-you .et_pb_blurb .et_pb_blurb_container {
    text-align: center !important;
}

body.page-type-b2c #apl-do-you .et_pb_blurb .et_pb_module_header {
    color: var(--redesign-blue) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    padding: 0 !important;
}


/* -------------------------------------------------------------------------
 * Breakpoints
 * ---------------------------------------------------------------------- */

@media (max-width: 980px) {
    body.page-type-b2c #apl-do-you .et_pb_blurb {
        flex-basis: calc((100% - 30px) / 2) !important;
        max-width: calc((100% - 30px) / 2) !important;
    }
}

@media (max-width: 600px) {
    body.page-type-b2c #apl-do-you .et_pb_row:last-of-type .et_pb_column {
        gap: 20px !important;
    }
    body.page-type-b2c #apl-do-you .et_pb_blurb {
        flex-basis: 100% !important;
        max-width: 380px !important;
        padding: 26px 22px !important;
    }
    body.page-type-b2c #apl-do-you .et_pb_blurb .et_pb_module_header {
        font-size: 18px !important;
    }
}

/* ==== END #apl-do-you ==================================================== */


body.page-type-b2c .et_pb_section[id^="apl-"] > .et_pb_row {
    /* padding-top: 0 !important;
    padding-bottom: 0 !important; */
    padding: 1% 0!important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ==== BEGIN #apl-benefits =================================================
 * ========================================================================= */

body.page-type-b2c #apl-benefits.et_pb_section {
    background-color: var(--redesign-white) !important;
    min-height: 0 !important;
    padding: clamp(28px, 3.5vw, 44px) 0 !important;
    margin: 0 !important;
}

body.page-type-b2c #apl-benefits .et_pb_row {
    width: 90% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ---- Heading ----------------------------------------------------------- */
body.page-type-b2c #apl-benefits .et_pb_heading,
body.page-type-b2c #apl-benefits .et_pb_heading_container,
body.page-type-b2c #apl-benefits h3.et_pb_module_heading {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

body.page-type-b2c #apl-benefits h3.et_pb_module_heading {
    color: var(--redesign-blue) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
}

/* ---- Two-column row ---------------------------------------------------- */
body.page-type-b2c #apl-benefits .et_pb_row:nth-of-type(2) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: clamp(30px, 4vw, 60px) !important;
}

body.page-type-b2c #apl-benefits .et_pb_column_1_2 {
    width: calc(50% - clamp(15px, 2vw, 30px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* ---- Bullet list -------------------------------------------------------- */
body.page-type-b2c #apl-benefits .arc-bullet-list ul {
    list-style: none !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
}

body.page-type-b2c #apl-benefits .arc-bullet-list ul li {
    position: relative !important;
    margin: 0 0 18px !important;
    padding: 0 0 0 34px !important;
    font-size: 17px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    color: var(--redesign-navy) !important;
    overflow-wrap: break-word !important;
}

body.page-type-b2c #apl-benefits .arc-bullet-list ul li::before {
    content: '\e052' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: block !important;
    margin: 0 !important;
    width: 20px !important;
    font-family: 'ETmodules' !important;
    font-size: 1.2em !important;
    line-height: 1.35 !important;
    color: var(--redesign-orange) !important;
    vertical-align: baseline !important;
    background: none !important;
}

/* ---- CTA and note ------------------------------------------------------ */
body.page-type-b2c #apl-benefits .et_pb_button_module_wrapper {
    margin: 0 0 8px !important;
    text-align: left !important;
}

body.page-type-b2c #apl-benefits .et_pb_button {
    font-family: 'Century Gothic', CenturyGothic, sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
}

body.page-type-b2c #apl-benefits .et_pb_text p em {
    font-size: 14px !important;
    font-style: italic !important;
    color: var(--redesign-navy) !important;
    opacity: .85 !important;
}

/* ---- Photo ------------------------------------------------------------- */
body.page-type-b2c #apl-benefits .et_pb_image,
body.page-type-b2c #apl-benefits .et_pb_image .et_pb_image_wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.page-type-b2c #apl-benefits .et_pb_image img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .14) !important;
}

/* ---- Breakpoints ------------------------------------------------------- */
@media (max-width: 980px) {
    body.page-type-b2c #apl-benefits h3.et_pb_module_heading {
        font-size: 30px !important;
    }

    body.page-type-b2c #apl-benefits .et_pb_column_1_2 {
        width: 100% !important;
    }

    body.page-type-b2c #apl-benefits .et_pb_column_1_2:last-child {
        order: -1 !important;
    }

    body.page-type-b2c #apl-benefits .et_pb_image img {
        aspect-ratio: 16 / 9 !important;
    }

    body.page-type-b2c #apl-benefits .et_pb_button_module_wrapper {
        text-align: center !important;
    }
}

@media (max-width: 600px) {
    body.page-type-b2c #apl-benefits .et_pb_row {
        width: 92% !important;
    }

    body.page-type-b2c #apl-benefits .arc-bullet-list ul li {
        padding-left: 28px !important;
        font-size: 16px !important;
    }
}
/* ==== END #apl-benefits ================================================== */

/* ==== BEGIN #apl-schedule-cta ============================================
 * ========================================================================= */

body.page-type-b2c #apl-schedule-cta.et_pb_section {
    background-color: var(--redesign-navy) !important;
    min-height: 0 !important;
    padding: clamp(28px, 3.5vw, 44px) 0 !important;
    margin: 0 !important;
}

body.page-type-b2c #apl-schedule-cta .et_pb_heading,
body.page-type-b2c #apl-schedule-cta .et_pb_heading_container,
body.page-type-b2c #apl-schedule-cta h3.et_pb_module_heading,
body.page-type-b2c #apl-schedule-cta .et_pb_text,
body.page-type-b2c #apl-schedule-cta .et_pb_text p,
body.page-type-b2c #apl-schedule-cta .et_pb_text em,
body.page-type-b2c #apl-schedule-cta .et_pb_text strong {
    color: var(--redesign-white) !important;
}


body.page-type-b2c #apl-schedule-cta > .et_pb_row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: clamp(30px, 4vw, 60px) !important;
    width: 90% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

body.page-type-b2c #apl-schedule-cta > .et_pb_row > .et_pb_column {
    width: calc(50% - clamp(15px, 2vw, 30px)) !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-type-b2c #apl-schedule-cta .et_pb_row_inner,
body.page-type-b2c #apl-schedule-cta .et_pb_column_inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


body.page-type-b2c #apl-schedule-cta .et_pb_image,
body.page-type-b2c #apl-schedule-cta .et_pb_image .et_pb_image_wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.page-type-b2c #apl-schedule-cta .et_pb_image img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28) !important;
}


body.page-type-b2c #apl-schedule-cta h3.et_pb_module_heading {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-transform: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

body.page-type-b2c #apl-schedule-cta .et_pb_text p {
    font-size: 17px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    text-align: left !important;
    margin: 0 0 24px !important;
}

body.page-type-b2c #apl-schedule-cta .et_pb_text p em {
    font-size: 14px !important;
    font-style: italic !important;
    opacity: .85 !important;
}

body.page-type-b2c #apl-schedule-cta .et_pb_button_module_wrapper {
    margin: 0 0 8px !important;
    text-align: left !important;
}


@media (max-width: 980px) {
    body.page-type-b2c #apl-schedule-cta > .et_pb_row > .et_pb_column {
        width: 100% !important;
    }

    body.page-type-b2c #apl-schedule-cta h3.et_pb_module_heading,
    body.page-type-b2c #apl-schedule-cta .et_pb_text p,
    body.page-type-b2c #apl-schedule-cta .et_pb_button_module_wrapper {
        text-align: center !important;
    }

    body.page-type-b2c #apl-schedule-cta h3.et_pb_module_heading {
        font-size: 28px !important;
    }

    body.page-type-b2c #apl-schedule-cta .et_pb_image img {
        aspect-ratio: 16 / 9 !important;
    }
}

/* ==== END #apl-schedule-cta ============================================== */