.contentRender_name_plugins_common_background_color {
    display: none;
}

.contentRender_name_plugins_common_background_color:has(.contentRender) {
    display: block;
}

.contentRender_name_plugins_common_background_color .bg-panel-title {
    font-family: var(--font-baloo);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: calc(27.16 / 28);
    text-align: center;
    color: var(--product-search);
    margin-top: 45px;
}

@media (min-width: 40em) {
    .contentRender_name_plugins_common_background_color .bg-panel-title {
        font-size: 3.75rem;
        line-height: calc(58.2 / 60);
    }
}

.color-bg-outer {
    position: relative;
    overflow-y: visible;
    overflow-x: clip;
    margin-bottom: 42px;

    img {
        background-color: var(--white);
    }

    .contentRender {
        position: relative;
        z-index: 9;
    }

    .left-dec,
    .right-dec {
        pointer-events: none;
    }

    .left-dec {
        max-width: 568px;
    }

    .right-dec {
        max-width: 912px;
    }
}

.blue-bg {
    --sw-collections-title-color: var(--white);

    background: var(--dark-blue);

    .left-dec {
        position: absolute;
        left: -100px;
        top: 10%;
        background: no-repeat center / contain url(/includes/client_public/assets/shared/bg-panels/blue-bg/left-leaf.svg);
        height: 405px;
        width: 300px;
        z-index: 2;
    }

    .right-dec {
        position: absolute;
        right: -80px;
        top: 15%;
        background: no-repeat center / contain url(/includes/client_public/assets/shared/bg-panels/blue-bg/right-leaf.svg);
        height: 305px;
        width: 300px;
        z-index: 2;
    }

    .bottom {
        position: relative;

        img {
            margin-top: 50px;
        }

        .bottom-dec {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: no-repeat center / contain url(/includes/client_public/assets/shared/bg-panels/blue-bg/bottom-leaf.svg);
            height: 113px;
            width: 88px;
        }
    }

    @media (width >= 40em) {
        .bottom {
            img {
                margin-top: -80px;
            }

            .bottom-dec {
                top: 70%;
            }
        }
        

        .left-dec {
            left: 5%;
            top: 10%;
            height: 30vw;
            width: 19vw;
        }

        .right-dec {
            right: 7.5%;
            top: 35%;
            height: 18.5vw;
            width: 18.5vw;
        }
    }
}

.blue-bg-inner {
    --sw-collections-title-color: var(--white);

    background: var(--dark-blue);
    margin-bottom: 5rem;

    .left-dec {
        position: absolute;
        left: -100px;
        top: 10%;
        background: no-repeat center / contain url(/includes/client_public/assets/shared/bg-panels/blue-bg/left-leaf.svg);
        height: 405px;
        width: 300px;
        z-index: 2;
    }

    .right-dec {
        position: absolute;
        right: -80px;
        top: 15%;
        background: no-repeat center / contain url(/includes/client_public/assets/shared/bg-panels/blue-bg/right-leaf.svg);
        height: 305px;
        width: 300px;
        z-index: 2;
    }

    .bottom {
        position: absolute;
		bottom: 0px;
		z-index: -1;
		transform: translateY(25%);

        img {
            margin-top: 0px;
        }

    }

    @media (width >= 40em) {
        margin-bottom: 10rem;

        .left-dec {
            left: 5%;
            top: 10%;
            height: 30vw;
            width: 19vw;
        }

        .right-dec {
            right: 7.5%;
            top: 35%;
            height: 18.5vw;
            width: 18.5vw;
        }
    }
}

.green-bg {
    --sw-collections-title-color: var(--white);

    background: var(--mid-green);
    overflow: hidden;

    .left-dec {
        position: absolute;
        left: -40px;
        top: -40px;
        background: no-repeat center / contain url(/includes/client_public/assets/shared/bg-panels/green-bg/left-leaf.svg);
        height: 270px;
        width: 207px;
        z-index: 2;
    }

    .right-dec {
        position: absolute;
        right: -146px;
        bottom: 0px;
        background: no-repeat center / contain url(/includes/client_public/assets/shared/bg-panels/green-bg/right-leaf.svg);
        height: 570px;
        width: 440px;
        z-index: 2;
    }

    @media (width >= 40em) {
        .left-dec {
            left: -6.5vw;
            top: -10vw;
            height: 41vw;
            width: 32vw;
        }
    
        .right-dec {
            right: -11vw;
            height: 67vw;
            width: 52vw;
        }
    }

    @media (width >= 64em) {
        /* Accounts for wave svg viewbox */
        margin-bottom: 0;

        .right-dec {
            bottom: 100px;
        }
    }
}

.white-bg {
    margin-top: 10rem;

    .left-dec {
        position: absolute;
        left: -68px;
        bottom: -40px;
        background: no-repeat center / contain url(/includes/client_public/assets/shared/bg-panels/white-bg/left-leaf.svg);
        height: 180px;
        width: 173px;
        z-index: 1;
    }

    .right-dec {
        position: absolute;
        right: -90px;
        top: -140px;
        background: no-repeat center / contain url(/includes/client_public/assets/shared/bg-panels/white-bg/right-leaf.svg);
        height: 247px;
        width: 230px;
        z-index: 1;
    }

    @media (width >= 40em) {
            .white-bg {
                margin-top: 6rem;
            }

        .left-dec {
            left: -12vw;
            bottom: 0;
            height: 38vw;
            width: 30vw;
        }

        .right-dec {
            right: -14vw;
            top: -9vw;
            height: 51vw;
            width: 40vw;
        }
    }
}

.christmas-bg {
    background: var(--red);
    --sw-collections-title-color: var(--white);
}

.wogreen-bg {
    background: var(--mid-green);
    overflow: hidden;
    max-width: var(--width-base);
    margin: 10px auto 20px;
    border-radius: 50px;

    .left-dec {
        position: absolute;
        top: -30px;
        left: -20px;
        background: no-repeat center / contain url(/includes/client_public/assets/shared/bg-panels/wogreen-bg/left-leaf.svg);
        max-width: 421px;
        width: 100%;
        max-height: 542px;
        height: 100%;
        z-index: 2;
    }

    .right-dec {
        position: absolute;
        bottom: -45px;
        right: -5px;
        background: no-repeat center / contain url(/includes/client_public/assets/shared/bg-panels/wogreen-bg/right-leaf.svg);
        max-width: 188px;
        width: 100%;
        max-height: 242px;
        height: 100%;
        z-index: 2;
    }

    @media (min-width: 40em) {
        margin: 20px auto 30px;
    
        .right-dec {
            max-width: 305px;
            max-height: 393px;
        }
    }
}

.wogreen-bg .widget-inner {
	padding: var(--space-10) var(--space-5)
}

.wogreen-bg .widget-header {
	padding: 0px var(--space-5) var(--space-5) 0px;
}
.wogreen-bg .widget-title {
	color: var(--white);
}
.wogreen-bg .core-v2-side-by-side {
	padding: 0px;
}

.green-bg .widget-inner,
.blue-bg-inner .widget-inner {
	padding-top: 20px;
}

@media screen and (min-width: 40em) {
	.wogreen-bg .widget-title {
		color: var(--white);
		font-size: 3.75rem;
		line-height: calc(58.2 / 60);
	}
}