﻿.product-page-hero-block {
    --hero-primary-desktop-position: right calc(var(--margin-width) + -22px) top -100px;
    --hero-primary-desktop-size: 1130px;
    background-image: var(--hero-primary-image), linear-gradient(136deg, var(--hero-primary-color) 0%, var(--hero-secondary-color) 100%) !important;
    background-size: var(--hero-primary-desktop-size), cover;
    padding-top: 3rem;
    padding-bottom: 12rem;
    overflow: unset;
}

@media (min-width: 992px) {
    .product-page-hero-block {
        padding-top: 5rem;
        min-height: 432px;
    }
}

.product-page-hero-block .container::before {
    background: unset;
}

.product-page-hero-block .container::after {
    background: unset;
}

.product-page-hero-block .hero-content {
    flex-direction: column;
}

    .product-page-hero-block .hero-content .hero-title {
        text-align: center;
        max-width: 100%;
        margin: auto;
    }

        .product-page-hero-block .hero-content .hero-title h1 {
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 18px;
        }

        .product-page-hero-block .hero-content .hero-title h3 {
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

@media (min-width: 768px) and (max-width: 1199px) {
    .product-page-hero-block .hero-content .hero-title h1 {
        max-width: 72%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .product-page-hero-block .hero-content .hero-title h3 {
        max-width: 545px;
    }
}

.product-page-hero-block .hero-content .price-bubble {
    position: absolute;
    margin: 0px auto;
    bottom: -200px;
}

@media (min-width: 768px) {
    .product-page-features-tile-block.section-wrapper {
        padding-top: 94px !important;
    }
}

/* BEGIN left-right-circles */
/**
.product-page-hero-block {
    --hero-before-left-color: #B9E6FF;
    --hero-before-right-color: #F0FBFF;
    --hero-after-left-color: #F0FBFF;
    --hero-after-right-color: #B9E6FF;
    overflow: hidden;
}

    .product-page-hero-block .container > * {
        position: relative;
        z-index: 1;
    }

@media (min-width: 768px) {
    .product-page-hero-block .container:before {
        background: linear-gradient(35deg, var(--hero-before-left-color) 0%, var(--hero-before-right-color) 100%);
        left: -322px;
        --circle-y: 54%;
        --circle-x: 30%;
    }

    .product-page-hero-block .container:after {
        content: "";
        height: 619px;
        width: 619px;
        display: block;
        border-radius: 50%;
        position: absolute;
        background-repeat: no-repeat;
        background: linear-gradient(36deg, var(--hero-after-left-color) 0%, var(--hero-after-right-color) 100%);
        top: -355px;
        right: -496px;
        left: 65%;
    }
}

@media (min-width: 992px) {
    .hero-block .container::before {
        left: -164px;
        --circle-x: 20%;
        --circle-y: 58%;
    }

    .hero-block .container::after {
        left: 70%;
    }
}

@media (min-width: 1200px) {
    .hero-block .container::before {
        --circle-y: 62%;
    }
}

@media (min-width: 1400px) {
    .hero-block .container::before {
        left: -374px;
        --circle-x: 20%;
    }

    .hero-block .container::after {
        left: 96%;
    }
}
**/
/* END left-right-circles */
