/**
 * Shared Hero background decoration.
 *
 * The approved design uses CSS gradients for the soft right-side transition
 * and upper-right circle, plus one lightweight SVG vector for the continuous
 * lower wave layers. No raster Hero background image is used.
 * Hero layout and height rules remain in navigation-hero-system.css.
 */

:is(
    .ahm-home-hero,
    .ahm-page-manufacturing .ahm-page-hero,
    .ahm-capsule-hero,
    .ahm-gummy-hero,
    .ahm-powder-hero,
    .ahm-softgel-hero,
    .ahm-tablet-hero,
    .ahm-liquid-hero,
    .dosage-hero,
    .product-hero,
    .ahm-services-hero,
    .ahm-formulation-hero,
    .ahm-packaging-hero,
    .ahm-about-hero,
    .ahm-cert-hero,
    .ahm-page-manufacturing-facilities .ahm-page-hero,
    .ahm-page-quality .ahm-page-hero,
    .ahm-page-contact .ahm-page-hero,
    .ahm-page-resources .ahm-page-hero,
    .ahm-faq-hero,
    .ahm-blog-hero,
    .dosage-form-archive-hero,
    .private-label-archive-hero
) {
    --ahm-hero-wave-height: clamp(146px, 11.5vw, 196px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 0 !important;
    background: linear-gradient(180deg, #fff 0%, #fdfefd 66%, #fff 100%);
}

/*
 * The curve artwork is made from floating ribbons rather than shapes filled to
 * the SVG canvas edge. The Hero and the following white section therefore meet
 * without exposing a flat coloured rectangle or a horizontal divider.
 */
.ahm-home-hero + .ahm-home-trust {
    border-top: 0 !important;
    box-shadow: none !important;
    background: #fff;
}

/* Retire the former homepage orbit, grid and leaf decorations. */
.ahm-home-hero-orbit,
.ahm-home-hero-decoration {
    display: none !important;
}

/*
 * Broad, feathered, slanted transition into the right-side sage field.
 * The upper-right radial layer creates the approved soft circular accent.
 */
:is(
    .ahm-home-hero,
    .ahm-page-manufacturing .ahm-page-hero,
    .ahm-capsule-hero,
    .ahm-gummy-hero,
    .ahm-powder-hero,
    .ahm-softgel-hero,
    .ahm-tablet-hero,
    .ahm-liquid-hero,
    .dosage-hero,
    .product-hero,
    .ahm-services-hero,
    .ahm-formulation-hero,
    .ahm-packaging-hero,
    .ahm-about-hero,
    .ahm-cert-hero,
    .ahm-page-manufacturing-facilities .ahm-page-hero,
    .ahm-page-quality .ahm-page-hero,
    .ahm-page-contact .ahm-page-hero,
    .ahm-page-resources .ahm-page-hero,
    .ahm-faq-hero,
    .ahm-blog-hero,
    .dosage-form-archive-hero,
    .private-label-archive-hero
)::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(
            circle at 105% -8%,
            rgba(142, 174, 122, .145) 0 18%,
            rgba(142, 174, 122, .07) 21%,
            transparent 25%
        ),
        linear-gradient(
            116deg,
            transparent 0%,
            transparent 39%,
            rgba(239, 245, 235, .16) 47%,
            rgba(235, 243, 231, .43) 57%,
            rgba(230, 239, 225, .68) 72%,
            rgba(226, 236, 220, .82) 100%
        );
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    box-shadow: none;
    content: '';
    mask-image: none;
    opacity: 1;
    pointer-events: none;
    transform: none;
}

/*
 * Continuous lower curves: faint but visible on the left, gradually gaining
 * depth toward the right. The curves replace any hard horizontal divider.
 */
:is(
    .ahm-home-hero,
    .ahm-page-manufacturing .ahm-page-hero,
    .ahm-capsule-hero,
    .ahm-gummy-hero,
    .ahm-powder-hero,
    .ahm-softgel-hero,
    .ahm-tablet-hero,
    .ahm-liquid-hero,
    .dosage-hero,
    .product-hero,
    .ahm-services-hero,
    .ahm-formulation-hero,
    .ahm-packaging-hero,
    .ahm-about-hero,
    .ahm-cert-hero,
    .ahm-page-manufacturing-facilities .ahm-page-hero,
    .ahm-page-quality .ahm-page-hero,
    .ahm-page-contact .ahm-page-hero,
    .ahm-page-resources .ahm-page-hero,
    .ahm-faq-hero,
    .ahm-blog-hero,
    .dosage-form-archive-hero,
    .private-label-archive-hero
)::after {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: var(--ahm-hero-wave-height);
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: url('../../images/hero-wave-layers.svg') center bottom / 100% 100% no-repeat;
    box-shadow: none;
    content: '';
    opacity: 1;
    pointer-events: none;
    transform: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 82%, rgba(0, 0, 0, .72) 89%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0 82%, rgba(0, 0, 0, .72) 89%, transparent 100%);
}

/* All real Hero content remains above both background layers. */
:is(
    .ahm-home-hero-grid,
    .ahm-page-hero-grid,
    .ahm-capsule-hero-grid,
    .ahm-gummy-hero-grid,
    .ahm-powder-hero-grid,
    .ahm-softgel-hero-grid,
    .ahm-tablet-hero-grid,
    .ahm-liquid-hero-grid,
    .dosage-hero > .container,
    .product-hero-grid,
    .ahm-services-hero__grid,
    .ahm-formulation-hero__grid,
    .ahm-packaging-hero__inner,
    .ahm-about-hero > .container,
    .ahm-cert-hero > .container,
    .ahm-faq-hero > .container,
    .ahm-blog-hero > .container,
    .dosage-form-archive-hero-grid,
    .private-label-archive-hero > .container
) {
    position: relative;
    z-index: 1;
}

/* The Homepage has more vertical room, so its curve can breathe slightly. */
.ahm-home-hero {
    --ahm-hero-wave-height: clamp(158px, 12vw, 205px);
}

@media (max-width: 1180px) {
    :is(
        .ahm-home-hero,
        .ahm-page-manufacturing .ahm-page-hero,
        .ahm-capsule-hero,
        .ahm-gummy-hero,
        .ahm-powder-hero,
        .ahm-softgel-hero,
        .ahm-tablet-hero,
        .ahm-liquid-hero,
        .dosage-hero,
        .product-hero,
        .ahm-services-hero,
        .ahm-formulation-hero,
        .ahm-packaging-hero,
        .ahm-about-hero,
        .ahm-cert-hero,
        .ahm-page-manufacturing-facilities .ahm-page-hero,
        .ahm-page-quality .ahm-page-hero,
        .ahm-page-contact .ahm-page-hero,
        .ahm-page-resources .ahm-page-hero,
        .ahm-faq-hero,
        .ahm-blog-hero,
        .dosage-form-archive-hero,
        .private-label-archive-hero
    ) {
        --ahm-hero-wave-height: 152px;
    }

    :is(
        .ahm-home-hero,
        .ahm-page-manufacturing .ahm-page-hero,
        .ahm-capsule-hero,
        .ahm-gummy-hero,
        .ahm-powder-hero,
        .ahm-softgel-hero,
        .ahm-tablet-hero,
        .ahm-liquid-hero,
        .dosage-hero,
        .product-hero,
        .ahm-services-hero,
        .ahm-formulation-hero,
        .ahm-packaging-hero,
        .ahm-about-hero,
        .ahm-cert-hero,
        .ahm-page-manufacturing-facilities .ahm-page-hero,
        .ahm-page-quality .ahm-page-hero,
        .ahm-page-contact .ahm-page-hero,
        .ahm-page-resources .ahm-page-hero,
        .ahm-faq-hero,
        .ahm-blog-hero,
        .dosage-form-archive-hero,
        .private-label-archive-hero
    )::before {
        background:
            radial-gradient(
                circle at 108% -7%,
                rgba(142, 174, 122, .13) 0 17%,
                rgba(142, 174, 122, .055) 21%,
                transparent 25%
            ),
            linear-gradient(
                121deg,
                transparent 0%,
                transparent 45%,
                rgba(239, 245, 235, .17) 54%,
                rgba(234, 242, 230, .45) 66%,
                rgba(227, 237, 222, .72) 100%
            );
    }
}

@media (max-width: 767px) {
    :is(
        .ahm-home-hero,
        .ahm-page-manufacturing .ahm-page-hero,
        .ahm-capsule-hero,
        .ahm-gummy-hero,
        .ahm-powder-hero,
        .ahm-softgel-hero,
        .ahm-tablet-hero,
        .ahm-liquid-hero,
        .dosage-hero,
        .product-hero,
        .ahm-services-hero,
        .ahm-formulation-hero,
        .ahm-packaging-hero,
        .ahm-about-hero,
        .ahm-cert-hero,
        .ahm-page-manufacturing-facilities .ahm-page-hero,
        .ahm-page-quality .ahm-page-hero,
        .ahm-page-contact .ahm-page-hero,
        .ahm-page-resources .ahm-page-hero,
        .ahm-faq-hero,
        .ahm-blog-hero,
        .dosage-form-archive-hero,
        .private-label-archive-hero
    ) {
        --ahm-hero-wave-height: 118px;
    }

    :is(
        .ahm-home-hero,
        .ahm-page-manufacturing .ahm-page-hero,
        .ahm-capsule-hero,
        .ahm-gummy-hero,
        .ahm-powder-hero,
        .ahm-softgel-hero,
        .ahm-tablet-hero,
        .ahm-liquid-hero,
        .dosage-hero,
        .product-hero,
        .ahm-services-hero,
        .ahm-formulation-hero,
        .ahm-packaging-hero,
        .ahm-about-hero,
        .ahm-cert-hero,
        .ahm-page-manufacturing-facilities .ahm-page-hero,
        .ahm-page-quality .ahm-page-hero,
        .ahm-page-contact .ahm-page-hero,
        .ahm-page-resources .ahm-page-hero,
        .ahm-faq-hero,
        .ahm-blog-hero,
        .dosage-form-archive-hero,
        .private-label-archive-hero
    )::before {
        background:
            radial-gradient(
                circle at 118% -5%,
                rgba(142, 174, 122, .11) 0 15%,
                rgba(142, 174, 122, .045) 20%,
                transparent 25%
            ),
            linear-gradient(
                146deg,
                transparent 0%,
                transparent 49%,
                rgba(239, 245, 235, .16) 60%,
                rgba(231, 240, 226, .56) 100%
            );
    }
}

/*
 * v2.9.8 page-transition refinements.
 * Older page CSS assigned fixed dimensions to decorative pseudo-elements.
 * The shared Hero now fully resets those dimensions above, preventing the
 * gradient from collapsing into a rectangular block on Packaging and Blog.
 */

/* Text-led Heroes use a slightly quieter lower wave than image-led Heroes. */
:is(
    .ahm-packaging-hero,
    .ahm-faq-hero,
    .ahm-blog-hero
) {
    --ahm-hero-wave-height: clamp(118px, 9vw, 154px);
}

/* Remove any legacy flat edge that could reappear through page-level styles. */
:is(
    .ahm-packaging-hero,
    .ahm-page-contact .ahm-page-hero,
    .ahm-blog-hero,
    .ahm-faq-hero
) {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    :is(
        .ahm-packaging-hero,
        .ahm-faq-hero,
        .ahm-blog-hero
    ) {
        --ahm-hero-wave-height: 102px;
    }
}