/* =========================================================
   ZEN'S PURE — HERO SECTION
   ========================================================= */

.zp-hero {
    position: relative;

    width: 100%;

    min-height: 720px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 73% 45%,
            rgba(255, 255, 255, 0.70) 0%,
            rgba(255, 255, 255, 0) 34%
        ),
        linear-gradient(
            110deg,
            #fbf1e8 0%,
            #f8eadf 48%,
            #f3e1d0 100%
        );

    color: #111;
}


/* =========================================================
   HERO INNER
   ========================================================= */

.zp-hero-inner {

    width: min(1500px, 94%);

    min-height: 680px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 44% 56%;

    align-items: center;

    position: relative;
    padding-top: 50px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.zp-hero-content {

    position: relative;

    z-index: 10;

    padding-left: 55px;

    padding-top: 20px;

    padding-bottom: 80px;
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.zp-hero-title {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        52px,
        5.2vw,
        82px
    );

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -3px;

    color: #111;
}


/* =========================================================
   PINK SCRIPT / HIGHLIGHT
   ========================================================= */

.zp-hero-script {

    margin-top: 8px;

    margin-left: 5px;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: clamp(
        58px,
        5.8vw,
        92px
    );

    font-weight: 400;

    font-style: italic;

    line-height: 0.95;

    letter-spacing: -2px;

    color: #ee2d61;

    transform: rotate(-2deg);

    transform-origin: left center;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.zp-hero-subtitle {

    margin: 42px 0 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(
        20px,
        1.7vw,
        29px
    );

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -0.4px;

    color: #161616;
}


/* =========================================================
   SMALL PINK LINE
   ========================================================= */

.zp-hero-divider {

    width: 85px;

    height: 3px;

    margin-top: 25px;

    margin-bottom: 22px;

    background: #ef2d61;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.zp-hero-description {

    max-width: 590px;

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(
        17px,
        1.45vw,
        22px
    );

    font-weight: 400;

    line-height: 1.55;

    letter-spacing: 0.1px;

    color: #242424;
}


/* =========================================================
   SHOP BUTTON
   ========================================================= */

.zp-shop-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 280px;

    height: 72px;

    margin-top: 42px;

    padding: 0 42px;

    border-radius: 14px;

    background: #f42e63;

    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 21px;

    font-weight: 700;

    letter-spacing: 1px;

    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(
            244,
            46,
            99,
            0.20
        );

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.zp-shop-button:hover {

    background: #df2458;

    transform: translateY(-3px);

    box-shadow:
        0 16px 35px rgba(
            244,
            46,
            99,
            0.28
        );
}


/* =========================================================
   PRODUCT AREA
   ========================================================= */

.zp-hero-product {

    position: relative;

    height: 680px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: visible;
}


/* =========================================================
   SOFT BACKGROUND GLOW
   ========================================================= */

.zp-product-glow {

    position: absolute;

    width: min(650px, 50vw);

    height: min(650px, 50vw);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 249, 242, 0.95) 0%,
            rgba(247, 231, 216, 0.65) 58%,
            rgba(247, 231, 216, 0) 72%
        );

    right: 0;

    top: 50%;

    transform: translateY(-50%);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.zp-product-image {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 800px;

    height: 650px;

    object-fit: contain;

    object-position: center;

    display: block;

    filter:
        drop-shadow(
            0 28px 24px rgba(
                74,
                45,
                25,
                0.15
            )
        );
}


/* =========================================================
   BENEFITS
   ========================================================= */

.zp-benefits {

    position: absolute;

    z-index: 20;

    left: 50%;

    bottom: 24px;

    transform: translateX(-50%);

    width: min(700px, 48%);

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    align-items: center;
}


/* =========================================================
   BENEFIT
   ========================================================= */

.zp-benefit {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-width: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.2;

    color: #222;
}


.zp-benefit-icon {

    flex: 0 0 auto;

    color: #ef2d61;

    font-size: 25px;

    line-height: 1;
}


.zp-benefit-icon.filled {

    font-size: 24px;
}


.zp-benefit strong {

    display: block;

    font-size: 12px;

    font-weight: 700;
}


.zp-benefit div span {

    display: block;

    font-size: 11px;

    color: #555;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .zp-hero {

        min-height: 650px;
    }


    .zp-hero-inner {

        width: 96%;

        grid-template-columns:
            46% 54%;

        min-height: 620px;
    }


    .zp-hero-content {

        padding-left: 30px;
    }


    .zp-hero-title {

        font-size: 55px;
    }


    .zp-hero-script {

        font-size: 62px;
    }


    .zp-hero-subtitle {

        font-size: 21px;

        margin-top: 32px;
    }


    .zp-hero-description {

        font-size: 17px;
    }


    .zp-shop-button {

        min-width: 220px;

        height: 60px;

        font-size: 17px;
    }


    .zp-product-image {

        height: 570px;
    }


    .zp-benefits {

        width: 50%;

        gap: 10px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .zp-hero {

        min-height: auto;

        padding-bottom: 30px;
    }


    .zp-hero-inner {

        width: 100%;

        display: flex;

        flex-direction: column;

        min-height: auto;
    }


    /* CONTENT */

    .zp-hero-content {

        width: 100%;

        padding:
            60px 24px 20px;

        text-align: center;
    }


    .zp-hero-title {

        font-size: 47px;

        letter-spacing: -1.5px;
    }


    .zp-hero-script {

        margin-left: 0;

        font-size: 57px;

        transform:
            rotate(-2deg);

        transform-origin: center;
    }


    .zp-hero-subtitle {

        margin-top: 30px;

        font-size: 20px;
    }


    .zp-hero-divider {

        margin-left: auto;

        margin-right: auto;
    }


    .zp-hero-description {

        font-size: 16px;

        line-height: 1.5;
    }


    .desktop-only {

        display: none;
    }


    .zp-shop-button {

        min-width: 210px;

        height: 57px;

        margin-top: 30px;

        font-size: 16px;

        border-radius: 11px;
    }


    /* PRODUCT */

    .zp-hero-product {

        width: 100%;

        height: 430px;

        margin-top: 0;
    }


    .zp-product-glow {

        width: 370px;

        height: 370px;

        right: 50%;

        transform:
            translate(50%, -50%);
    }


    .zp-product-image {

        width: 100%;

        height: 430px;

        max-width: 600px;
    }


    /* BENEFITS */

    .zp-benefits {

        position: relative;

        left: auto;

        bottom: auto;

        transform: none;

        width: 94%;

        margin: 0 auto;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 18px 12px;

        padding-top: 10px;
    }


    .zp-benefit {

        justify-content: flex-start;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .zp-hero-content {

        padding-left: 18px;

        padding-right: 18px;
    }


    .zp-hero-title {

        font-size: 39px;
    }


    .zp-hero-script {

        font-size: 48px;
    }


    .zp-hero-subtitle {

        font-size: 18px;
    }


    .zp-hero-description {

        font-size: 15px;
    }


    .zp-hero-product {

        height: 360px;
    }


    .zp-product-image {

        height: 360px;
    }


    .zp-product-glow {

        width: 310px;

        height: 310px;
    }

}