.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: -215px;
}

/* ============================================================
    (CLIPS ONLY BACKGROUND DECORATION)
============================================================= */
.hero-block {
    position: relative;
    padding: 6rem 1rem 10rem;
    text-align: center;
}

/* ============================================================
   HERO BACKGROUND LAYERS (CLIPPED)
   Wrapped so content can overflow independently
============================================================= */
.hero-clip {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden; /* bubbles stay clipped */
}

/* ============================================================
   HERO BACKGROUND HEIGHTS
============================================================= */
.hero-block, .hero-clip {
    height: 500px;
}

    /* Adjust spacing of next section to account for price bubble */
    .hero-block ~ section.product-page-features-tile-block {
        padding-top: 110px;
    }

@media (max-width: 434px) {
    .hero-block, .hero-clip {
        height: 608px;
    }
}

@media (min-width: 435px) and (max-width: 480px) {
    .hero-block, .hero-clip {
        height: 532px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .hero-block, .hero-clip {
        height: 520px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hero-block, .hero-clip {
        height: 532px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hero-block, .hero-clip {
        height: 550px;
    }
}

@media (min-width: 1200px) {
    .hero-block, .hero-clip {
        height: 490px;
    }
}

/* ============================================================
   LAYER 1 — GRADIENT BACKGROUND
============================================================= */
.bg-gradient {
    --hero-primary-color: #d8f4ff;
    --hero-secondary-color: #f0fbff;
    position: absolute;
    inset: 0;
    background: linear-gradient( 136deg, var(--hero-primary-color) 0%, var(--hero-secondary-color) 100% );
    z-index: 1;
}

/* ============================================================
   LAYER 2 — BUBBLES (middle)
   Above Gradient, below Stars
============================================================= */
.bg-bubbles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.bubble {
    --bubble-light-color: #F0FBFF;
    --bubble-dark-color: #B9E6FF;
    position: absolute;
    border-radius: 50%;
    width: 619px;
    height: 619px;
}

.bubble-left {
    left: -100px;
    top: 308px;
    background: linear-gradient( 35deg, var(--bubble-dark-color) 0%, var(--bubble-light-color) 100% );
}

.bubble-right {
    right: -208px;
    top: -208px;
    background: linear-gradient( 36deg, var(--bubble-light-color) 0%, var(--bubble-dark-color) 100% );
}

@media (max-width: 767px) {
    .bubble-left {
        background: unset;
    }

    .bubble-right {
        background: unset;
    }
}

/* ============================================================
   LAYER 3 — STARS TEXTURE
============================================================= */
.bg-stars {
    position: absolute;
    inset: 0;
    background: var(--hero-primary-image);
    z-index: 3;
    pointer-events: none;
    background-size: 1130px;
    background-position: right calc(var(--margin-width) + -32%) top -200px;
    background-repeat: no-repeat;
}

@media (min-width: 768px) and (max-width: 991px) {
    .bg-stars {
        background-position: right calc(var(--margin-width) + 32%) top -200px;
    }
}

/* ============================================================
   CONTENT WRAPPER (NOT CLIPPED)
   Allows price bubble to overflow cleanly!
============================================================= */
.hero-content-wrap {
    position: relative;
    overflow: visible; /* LETS PRICE BUBBLE ESCAPE */
    z-index: 4; /* above stars */
    margin: 0px auto;
}

/* ============================================================
   LAYER 4 — MAIN CONTENT
============================================================= */
.hero-inner {
    position: relative;
    z-index: 4;
}

/* ============================================================
   LAYER 5 — PRICE BUBBLE (foreground)
============================================================= */
.price-bubble {
    z-index: 5; /* above everything */
}

.hero-content-wrap .price-bubble .hero-price {
    position: relative;
    z-index: 9999
}

    .hero-content-wrap .price-bubble .hero-price sup.cents {
        top: -0.25em !important;
    }

.hero-content-wrap .price-bubble .states-additional {
    position: relative;
    z-index: 9999
}