:root {
    --wl-page-orange: #ff6500;
    --wl-page-blue: #1769d2;
    --wl-page-black: #1a1a1a;
}

main h1,
main h2,
main h3,
#content h1,
#content h2,
#content h3 {
    color: #222;
}

main .btn-primary,
#content .btn-primary {
    border-color: #ff6500;
    background: #ff6500;
}

main .btn-primary:hover,
#content .btn-primary:hover {
    border-color: #e95700;
    background: #e95700;
}

main .price,
main .product-price,
main .wl-price,
#content .price,
#content .product-price {
    color: #ff6500;
}

main section:nth-of-type(3n+2)
.price,
#content section:nth-of-type(3n+2)
.price {
    color: #1769d2;
}

main section:nth-of-type(3n)
.price,
#content section:nth-of-type(3n)
.price {
    color: #1a1a1a;
}

main .card:hover,
#content .card:hover {
    border-color:
        rgba(255,101,0,.55);

    box-shadow:
        0 7px 22px
        rgba(15,23,42,.08);
}

/* ==================================================
   WELOWR Newsletter Footer — Global
   ================================================== */

.wl-newsletter-footer {
    padding: 28px 0;

    background: #222;
    color: #fff;

    border-bottom:
        1px solid rgba(255,101,0,.82);
}

.wl-newsletter-inner {
    width: min(
        1380px,
        calc(100% - 40px)
    );

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 1fr);

    align-items: center;

    gap: 46px;
}

.wl-newsletter-copy {
    display: flex;
    align-items: center;

    gap: 18px;
}

.wl-newsletter-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    color: #fff;

    font-size: 38px;
    line-height: 1;
}

.wl-newsletter-copy h3 {
    margin: 0 0 4px;

    color: #fff;

    font-size: 18px;
    font-weight: 700;
}

.wl-newsletter-copy p {
    max-width: 500px;

    margin: 0;

    color: #c7c7c7;

    font-size: 12px;
    line-height: 1.5;
}

.wl-newsletter-form {
    display: flex;

    width: 100%;
    height: 46px;

    overflow: hidden;

    border-radius: 25px;

    background: #fff;
}

.wl-newsletter-form input {
    flex: 1;

    min-width: 0;

    padding: 0 22px;

    border: 0;
    outline: 0;

    background: #fff;
    color: #222;

    font-size: 13px;
}

.wl-newsletter-form button {
    min-width: 128px;

    padding: 0 24px;

    border: 0;

    background: #ff6500;
    color: #fff;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease;
}

.wl-newsletter-form button:hover {
    background: #e95700;
}

.wl-newsletter-message {
    width: min(
        1380px,
        calc(100% - 40px)
    );

    margin: 10px auto 0;

    color: #85e695;

    font-size: 12px;
}

@media (max-width: 850px) {

    .wl-newsletter-inner {
        grid-template-columns: 1fr;

        gap: 20px;
    }
}

@media (max-width: 520px) {

    .wl-newsletter-form {
        height: auto;

        flex-direction: column;

        overflow: visible;

        border-radius: 8px;

        background: transparent;
    }

    .wl-newsletter-form input {
        height: 44px;

        border-radius: 22px;
    }

    .wl-newsletter-form button {
        width: 100%;
        height: 44px;

        margin-top: 10px;

        border-radius: 22px;
    }
}


/* ==================================================
   G7-55 Newsletter / Footer unified treatment
   ================================================== */

.wl-newsletter-footer {
    margin: 0 !important;

    padding:
        28px 0
        26px !important;

    background:
        #081b3a !important;

    color:
        #fff !important;

    border-top: 0 !important;

    border-bottom:
        2px solid
        #ff6500 !important;
}


/*
 * Remove artificial space between
 * newsletter and the main footer.
 */

.wl-newsletter-footer
+ footer {
    margin-top: 0 !important;
}


/*
 * WELOWR current footer
 */

footer {
    margin-top: 0 !important;
}


/*
 * Common possible footer wrappers.
 */

.site-footer,
.wl-footer,
footer.site-footer {
    margin-top: 0 !important;
}


/*
 * Prevent parent layouts from inserting
 * vertical blank spacing around footer.
 */

.wl-newsletter-footer {
    display: block;
}


/* ==================================================
   G7-56 Newsletter divider
   ================================================== */

.wl-newsletter-footer {
    position: relative;

    border-bottom:
        0 !important;

    padding-bottom:
        32px !important;

    background:
        #081b3a !important;
}


.wl-newsletter-footer::after {
    position: absolute;

    content: "";

    left: 50%;
    bottom: 0;

    width:
        min(
            1120px,
            calc(100% - 150px)
        );

    height: 2px;

    transform:
        translateX(-50%);

    background:
        #c84f08;

    border-radius:
        2px;
}


.wl-newsletter-footer
+ footer {

    border-top:
        0 !important;
}


@media (max-width: 700px) {

    .wl-newsletter-footer::after {

        width:
            calc(100% - 48px);

    }

}


/* ==================================================
   G7-60 Newsletter aligned with footer contents
   ================================================== */

.wl-newsletter-inner {
    width:
        min(
            1120px,
            calc(100% - 48px)
        ) !important;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(360px, 1.08fr)
        !important;

    gap: 38px !important;
}

.wl-newsletter-message {
    width:
        min(
            1120px,
            calc(100% - 48px)
        ) !important;
}

.wl-newsletter-footer::after {
    width:
        min(
            980px,
            calc(100% - 90px)
        ) !important;

    height: 1px !important;

    background:
        #a94712 !important;
}

@media (max-width: 850px) {

    .wl-newsletter-inner {
        width:
            calc(100% - 40px)
            !important;

        grid-template-columns:
            1fr !important;
    }

    .wl-newsletter-footer::after {
        width:
            calc(100% - 80px)
            !important;
    }
}



/* ==================================================
   G7-189 Newsletter divider alignment
   Divider width = newsletter content width
   ================================================== */

.wl-newsletter-footer {
    position: relative;
}

/*
 * Remove previous full-width divider.
 */
.wl-newsletter-footer::after {
    display: none !important;
}


/*
 * Use newsletter-inner itself as the width reference.
 * The orange line therefore begins and ends at
 * exactly the same horizontal positions as the
 * newsletter content/form area.
 */
.wl-newsletter-inner {
    position: relative;

    border-bottom:
        3px solid #f97316;

    padding-bottom: 28px;
}

@media (max-width: 760px) {

    .wl-newsletter-inner {
        padding-bottom: 22px;
    }

}


/* ==================================================
   G7-190C
   Newsletter / Footer divider final treatment
   ================================================== */

/*
 * Remove old pseudo divider versions.
 */
.wl-newsletter-footer::after {
    display: none !important;
    content: none !important;
}


/*
 * The divider should align with the MAIN FOOTER
 * content width, not merely the newsletter form.
 *
 * Current footer-inner uses the site's broad
 * footer content geometry.
 */
.wl-newsletter-inner {
    border-bottom: 0 !important;
}


/*
 * Draw the divider independently so its width
 * follows the broad footer content area.
 */
.wl-newsletter-footer {
    position: relative !important;
}

.wl-newsletter-footer::before {
    content: "" !important;

    display: block !important;

    position: absolute;

    left: 50%;
    bottom: 0;

    width: min(
        calc(100% - 48px),
        1180px
    );

    height: 1px;

    background:
        #c85d18;

    transform:
        translateX(-50%);

    opacity: .9;

    pointer-events: none;
}


@media (max-width: 760px) {

    .wl-newsletter-footer::before {
        width:
            calc(100% - 32px);
    }

}


/* ==================================================
   G7-191
   HOW WELOWR WORKS HERO TITLE
   ================================================== */

.wl-page-hero h1,
.wl-page-hero-title,
.wl-how-it-works-hero h1 {
    color: #ffffff !important;
}

.wl-page-hero h1 *,
.wl-page-hero-title *,
.wl-how-it-works-hero h1 * {
    color: inherit !important;
}