/**
 * =========================================================
 * NAVGRAH — WOOCOMMERCE SHARED HERO
 * =========================================================
 *
 * Shop
 * Product Categories
 * Product Tags
 * Single Products
 *
 * Dedicated WooCommerce hero styling.
 * =========================================================
 */


/* =========================================================
   HERO OUTER
   ========================================================= */

section.navgrah-woo-hero {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #df8410 !important;
    border: 0 !important;
    box-sizing: border-box !important;

    color: #ffffff !important;
}


/* =========================================================
   ORGANIC TOP EDGE
   ========================================================= */

section.navgrah-woo-hero::before {
    content: "" !important;

    position: absolute !important;
    top: -1px !important;
    left: 0 !important;

    width: 100% !important;
    height: 18px !important;

    background: #faf9f5 !important;

    clip-path: polygon(
        0% 0%,
        5% 0%,
        8% 18%,
        12% 5%,
        16% 22%,
        21% 10%,
        26% 20%,
        31% 8%,
        37% 18%,
        43% 5%,
        49% 17%,
        55% 7%,
        61% 20%,
        67% 8%,
        73% 18%,
        79% 5%,
        85% 20%,
        91% 8%,
        96% 16%,
        100% 8%,
        100% 0%
    ) !important;

    z-index: 3 !important;

    pointer-events: none !important;
}


/* =========================================================
   ORGANIC BOTTOM EDGE
   ========================================================= */

section.navgrah-woo-hero::after {
    content: "" !important;

    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;

    width: 100% !important;
    height: 22px !important;

    background: #faf9f5 !important;

    clip-path: polygon(
        0% 92%,
        5% 82%,
        9% 91%,
        14% 75%,
        19% 88%,
        24% 78%,
        30% 94%,
        36% 76%,
        42% 87%,
        48% 72%,
        54% 89%,
        60% 78%,
        66% 91%,
        72% 74%,
        78% 87%,
        84% 76%,
        90% 92%,
        95% 80%,
        100% 88%,
        100% 100%,
        0% 100%
    ) !important;

    z-index: 3 !important;

    pointer-events: none !important;
}


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

section.navgrah-woo-hero .navgrah-woo-hero-inner {
    position: relative !important;

    width: min(1280px, calc(100% - 80px)) !important;

    min-height: 300px !important;

    margin: 0 auto !important;

    padding: 48px 0 42px !important;

    box-sizing: border-box !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 460px) !important;

    align-items: center !important;

    column-gap: 80px !important;

    z-index: 2 !important;
}


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

section.navgrah-woo-hero
.navgrah-woo-hero-content {
    width: 100% !important;
    max-width: 720px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;

    box-sizing: border-box !important;
}


/* =========================================================
   EYEBROW
   ========================================================= */

section.navgrah-woo-hero
.navgrah-woo-hero-eyebrow {
    margin: 0 0 14px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;

    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;

    text-align: left !important;
}


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

section.navgrah-woo-hero
.navgrah-woo-hero-title {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: clamp(48px, 5vw, 70px) !important;

    font-weight: 500 !important;

    line-height: 0.98 !important;

    letter-spacing: -0.035em !important;

    text-align: left !important;
}


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

section.navgrah-woo-hero
.navgrah-woo-hero-description {
    width: 100% !important;
    max-width: 650px !important;

    margin: 18px 0 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 1.6 !important;

    text-align: left !important;
}


/* =========================================================
   FEATURED IMAGE AREA
   ========================================================= */

section.navgrah-woo-hero
.navgrah-woo-hero-image {
    position: relative !important;

    width: 100% !important;
    height: 250px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   IMAGE CIRCLE / SOFT BACKDROP
   ========================================================= */

section.navgrah-woo-hero
.navgrah-woo-hero-image::before {
    content: "" !important;

    position: absolute !important;

    width: 260px !important;
    height: 260px !important;

    border-radius: 50% !important;

    background: rgba(231, 151, 39, 0.42) !important;

    z-index: 0 !important;
}


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

section.navgrah-woo-hero
.navgrah-woo-hero-image img {
    position: relative !important;

    z-index: 1 !important;

    display: block !important;

    width: auto !important;
    max-width: 360px !important;

    height: 225px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    opacity: 1 !important;
}


/* =========================================================
   NO IMAGE
   ========================================================= */

section.navgrah-woo-hero
.navgrah-woo-hero-inner:not(:has(.navgrah-woo-hero-image)) {
    grid-template-columns: minmax(0, 760px) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

    section.navgrah-woo-hero
    .navgrah-woo-hero-inner {

        width: min(100% - 50px, 760px) !important;

        min-height: 280px !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 300px) !important;

        column-gap: 35px !important;

        padding: 42px 0 36px !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-title {

        font-size: clamp(42px, 6vw, 58px) !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-image {

        height: 210px !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-image img {

        height: 190px !important;
        max-width: 270px !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-image::before {

        width: 220px !important;
        height: 220px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {

    section.navgrah-woo-hero
    .navgrah-woo-hero-inner {

        width: calc(100% - 36px) !important;

        min-height: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 8px !important;

        padding: 40px 0 34px !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-content {

        max-width: 100% !important;

        margin: 0 auto !important;

        text-align: center !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-eyebrow {

        margin-bottom: 11px !important;

        font-size: 10px !important;

        letter-spacing: 0.24em !important;

        text-align: center !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-title {

        font-size: clamp(38px, 10vw, 50px) !important;

        line-height: 1 !important;

        text-align: center !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-description {

        max-width: 500px !important;

        margin: 15px auto 0 !important;

        font-size: 14px !important;

        line-height: 1.6 !important;

        text-align: center !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-image {

        width: 100% !important;

        height: 150px !important;

        margin-top: 8px !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-image img {

        height: 145px !important;

        max-width: 210px !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-image::before {

        width: 155px !important;
        height: 155px !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 380px) {

    section.navgrah-woo-hero
    .navgrah-woo-hero-inner {

        width: calc(100% - 28px) !important;

        padding-top: 34px !important;
        padding-bottom: 30px !important;
    }


    section.navgrah-woo-hero
    .navgrah-woo-hero-title {

        font-size: 35px !important;
    }
}