:root {
    --header-green: #527f2b;
    --header-green-dark: #3e6520;
    --header-green-light: #6d9d3c;

    --header-text: #20251d;
    --header-muted: #74786f;

    --header-border: #e8ebe5;

    --header-white: #ffffff;

    --header-shadow:
        0 8px 30px rgba(30, 50, 20, 0.07);
}

.site-header {
    position: relative;
    z-index: 999;

    width: 100%;
    margin: 0;
    padding: 0;

    background: #fff;
}

.site-header .top_nav {
    width: 100%;
    height: 40px;

    background:
        linear-gradient(
            90deg,
            var(--header-green-dark),
            var(--header-green),
            var(--header-green-dark)
        );

    color: #fff;

    margin: 0;
    padding: 0;
}

.site-header .top_nav .container {
    height: 32px;
}

.site-header .top_nav .d-flex {
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header .top_nav ul {
    display: flex;
    align-items: center;

    list-style: none;

    margin: 0;
    padding: 0;

    gap: 18px;
}

.site-header .top_nav li {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    color: rgba(255,255,255,0.92);

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

    transform: translateX(-110px);
}

.site-header .top_nav li i {
    margin-right: 6px;

    color: rgba(255,255,255,0.8);

    font-size: 14px;
}

.site-header .top_nav a {
    color: #fff;

    text-decoration: none;

    transition:
        opacity 0.25s ease,
        color 0.25s ease;
}

.site-header .top_nav a:hover {
    color: #e7f5d9;
}


/* Social icons */

.site-header .top_nav > .container > .d-flex > ul:last-child {
    gap: 7px;
}

.site-header .top_nav > .container > .d-flex > ul:last-child li {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,0.18);

    border-radius: 50%;
        transform: translateX(100px);


    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.site-header .top_nav > .container > .d-flex > ul:last-child li:hover {
    background: rgba(255,255,255,0.12);

    border-color: rgba(255,255,255,0.35);

    transform: translateY(-1px);
            transform: translateX(100px);

}

.site-header .top_nav > .container > .d-flex > ul:last-child li i {
    margin: 0;

    font-size: 14px;
}

.site-header .nav_wrapper {
    position: relative;

    width: 100%;

    background: rgba(255,255,255,0.98);

    border-bottom: 1px solid var(--header-border);

    box-shadow: 0 4px 18px rgba(0,0,0,0.025);
}

.site-header .navbar {
    width: 100%;

    height: 76px;
    min-height: 76px;

    margin: 0;
    padding: 0;
}

.site-header .container {
    width: 90%;
    max-width: 1180px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 0;
    padding-right: 0;
}

.site-header .nav_inner {
    width: 100%;
    height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header .logo {
    height: 82px;

    display: flex;
    align-items: center;

    flex-shrink: 0;

    margin: 0;
    padding: 0;
                transform: translateX(-70px);

}

.site-header .logo a {
    display: flex;
    align-items: center;

    text-decoration: none;
                transform: translateX(-70px);

}

.site-header .logo img,
.site-header .logo .custom-logo {
    display: block;

    width: auto;
    max-width: 185px;
    max-height: 75px;

    height: auto;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;

}

.site-header .logo a:hover img {
    transform: scale(1.025);

}

.site-header .menus {
    height: 76px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 28px;

    margin: 0;
    padding: 0;
}

.site-header .menus > .menu {
    height: 76px;

    display: flex;
    align-items: center;

    list-style: none;

    margin: 0;
    padding: 0;

    gap: 28px;
}

.site-header .menus > .menu > li {
    position: relative;

    height: 76px;

    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;
}

.site-header .menus > .menu > li > a {
    position: relative;

    height: 76px;

    display: flex;
    align-items: center;

    color: var(--header-text);

    font-family: inherit;

    font-size: 18px !important;
    font-weight: 600 !important;
    transform: translateX(50px);

    letter-spacing: 0.15px;

    text-decoration: none;

    transition:
        color 0.25s ease;
}

.site-header .menus > .menu > li > a::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 20px;

    width: 0;
    height: 2px;

    background: var(--header-green);

    border-radius: 20px;

    transform: translateX(-50%);

    transition:
        width 0.3s ease;
}

.site-header .menus > .menu > li:hover > a {
    color: var(--header-green);
        transform: translateX(50px);

}

.site-header .menus > .menu > li:hover > a::before,
.site-header .menus > .menu > li.current-menu-item > a::before {
    width: 18px;
}


/* Active */

.site-header .menus > .menu > li.current-menu-item > a {
    color: var(--header-green);
}

.site-header .menus .menu-item-has-children > a::after {
    content: "\f107";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    font-size: 8px;

    margin-left: 7px;

    transition:
        transform 0.25s ease;
}

.site-header .menus .menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

.site-header .menus .menu-item-has-children {
    position: relative;
}

.site-header .menus .sub-menu {
    position: absolute;

    top: calc(100% - 8px);
    left: 50%;

    min-width: 190px;

    padding: 10px;

    margin: 0;

    list-style: none;

    background: #fff;

    border: 1px solid var(--header-border);

    border-radius: 10px;

    box-shadow:
        0 18px 45px rgba(30,50,20,0.12);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, 10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.site-header .menus .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;

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

.site-header .menus .sub-menu li {
    margin: 0;
    padding: 0;
}

.site-header .menus .sub-menu a {
    display: block;

    padding: 10px 12px;

    color: var(--header-text);

    font-size: 12px;

    border-radius: 6px;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.site-header .menus .sub-menu a:hover {
    background: #f2f7ed;

    color: var(--header-green);
}

.site-header .options {
    height: 76px !important;

    display: flex !important;
    align-items: center !important;

    gap: 8px !important;

    list-style: none !important;

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

.site-header .options > li.header-search,
.site-header .options > li.header-cart,
.site-header .options > li.header-profile {

    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    max-width: 40px !important;
    max-height: 40px !important;

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

    box-sizing: border-box !important;

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

    border-radius: 50% !important;

    overflow: visible !important;
}


/* Search */

.site-header .options > li.header-search button,
.site-header .options > li.header-search button i {

    appearance: none !important;
    -webkit-appearance: none !important;

    box-sizing: border-box !important;

    background: transparent !important;

    border: 0 !important;

    outline: 0 !important;

    color: #20251d !important;

    transform: none !important;
}


/* Cart */

.site-header .options > li.header-cart > a {

    display: flex !important;

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

    text-decoration: none !important;

    color: #20251d !important;
}


/* Profile */

.site-header .options > li.header-profile > a {

    display: flex !important;

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

    text-decoration: none !important;

    color: #20251d !important;
}


/* All 3 icons */

.site-header .options > li.header-action > a > i,
.site-header .options > li.header-action > button > i {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #20251d !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-style: normal !important;
    text-align: center !important;

    transform: none !important;
}



/* Hover */

.site-header .options .header-search:hover i.fa-magnifying-glass,
.site-header .options .header-cart:hover i.fa-cart-shopping,
.site-header .options .header-profile:hover i.fa-user {

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   EACH ICON CIRCLE
--------------------------------------------------------- */

.site-header .options > li.header-action {
    position: relative !important;

    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    max-width: 40px !important;
    max-height: 40px !important;

    display: flex !important;

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

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

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #e4e8e1 !important;

    border-radius: 50% !important;

    color: #20251d !important;

    cursor: pointer !important;

    transform: translateX(100px) !important;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* ---------------------------------------------------------
   REMOVE OTHER PAGE STYLES FROM LINK/BUTTON
--------------------------------------------------------- */

.site-header .options > li.header-action > a,
.site-header .options > li.header-action > button {

    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    display: flex !important;

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

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

    box-sizing: border-box !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #20251d !important;

    text-decoration: none !important;

    line-height: 1 !important;

    font-size: 0 !important;
}


/* ---------------------------------------------------------
   FONT AWESOME ICONS
--------------------------------------------------------- */

.site-header .options > li.header-action > a > i,
.site-header .options > li.header-action > button > i {

    display: block !important;

    width: auto !important;
    height: auto !important;

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

    color: #20251d !important;

    font-family: "Font Awesome 6 Free" !important;

    font-size: 15px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    font-style: normal !important;

    text-align: center !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   CART / SEARCH / PROFILE HOVER
--------------------------------------------------------- */

.site-header .options > li.header-action:hover {

    background: #527f2b !important;

    border-color: #527f2b !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 18px rgba(82,127,43,0.20) !important;

    transform: translateX(100px) translateY(-2px) !important;
}


.site-header .options > li.header-action:hover > a,
.site-header .options > li.header-action:hover > button {

    color: #ffffff !important;

    background: transparent !important;
}


.site-header .options > li.header-action:hover > a > i,
.site-header .options > li.header-action:hover > button > i {

    color: #ffffff !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   OUTER HOVER RING
--------------------------------------------------------- */

.site-header .options > li.header-action::after {

    content: "" !important;

    position: absolute !important;

    inset: -3px !important;

    width: auto !important;
    height: auto !important;

    border: 1px solid rgba(82,127,43,0.22) !important;

    border-radius: 50% !important;

    opacity: 0 !important;

    transform: scale(0.8) !important;

    pointer-events: none !important;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease !important;
}


.site-header .options > li.header-action:hover::after {

    opacity: 1 !important;

    transform: scale(1) !important;
}


/* =========================================================
   CART BADGE
========================================================= */

.site-header .options > li.header-cart .qty {

    position: absolute !important;

    top: -5px !important;
    right: -5px !important;

    width: 15px !important;
    height: 15px !important;

    min-width: 15px !important;
    min-height: 15px !important;

    max-width: 15px !important;
    max-height: 15px !important;

    display: flex !important;

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

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

    box-sizing: border-box !important;

    background: #527f2b !important;

    color: #ffffff !important;

    border: 2px solid #ffffff !important;

    border-radius: 50% !important;

    font-family: inherit !important;

    font-size: 8px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    text-align: center !important;

    opacity: 1 !important;

    visibility: visible !important;

    z-index: 50 !important;

    transform: none !important;
}


.site-header .options > li.header-cart:hover .qty {

    background: #3e6520 !important;

    color: #ffffff !important;

    transform: scale(1.05) !important;
}


.site-header .options > li:hover > a i {
    color: #ffffff !important;
}


/* =========================================================
   HAMBURGER
========================================================= */

.site-header .hamburger {
    width: 20px;
    height: 20px;

    display: none;

    flex-direction: column;
    justify-content: center;

    gap: 4px;

    cursor: pointer;
}

.site-header .hamburger .line {
    width: 20px;
    height: 1.5px;

    background: var(--header-text);

    border-radius: 5px;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


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

.mobile_nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(390px, 88vw);
    height: 100vh;
    height: 100dvh;

    background: #ffffff;
    z-index: 99999;

    transform: translateX(105%);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);

    box-shadow: -20px 0 60px rgba(0, 0, 0, .15);

    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobile_nav.active {
    transform: translateX(0);
}

.nav_overlay {
    position: fixed;
    inset: 0;

    background: rgba(10, 20, 15, .55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    z-index: 99998;

    opacity: 0;
    visibility: hidden;

    transition: opacity .35s ease,
                visibility .35s ease;
}

.nav_overlay.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   PROFILE DROPDOWN
========================================================= */

.site-header .options .profile-dropdown {
    position: relative;
}

/* Dropdown box */
.site-header .options .profile-dropdown .profile-menu {

    position: absolute;

    top: calc(100% + 14px);
    right: 0;

    width: 175px;

    margin: 0;
    padding: 8px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5e9e1;

    border-radius: 12px;

    box-shadow:
        0 15px 35px rgba(30, 50, 20, 0.14);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(8px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index: 9999;
}


/* Small arrow */
.site-header .options .profile-dropdown .profile-menu::before {

    content: "";

    position: absolute;

    top: -15px;
    left: 0;

    width: 100%;
    height: 15px;

    background: transparent;

    border: none;

    pointer-events: auto;

    z-index: 1;
}

.site-header .options .profile-dropdown:hover .profile-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}


/* Show dropdown */
.site-header .options .profile-dropdown .profile-menu a {

    width: 100%;

    min-height: 38px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 9px 12px;

    box-sizing: border-box;

    border-radius: 8px;

    color: #3f463b;

    text-decoration: none;

    font-size: 13px;

    font-weight: 500;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        padding-left 0.25s ease;
}

/* Dropdown icons */
.site-header .profile-dropdown .profile-menu a i {

    width: 18px;

    font-size: 12px;

    color: #6d7568;

    transition:
        color 0.25s ease;

}

/* Hover */
.site-header .profile-dropdown .profile-menu a:hover {

    background: #f3f7ef;

    color: var(--header-green);

    padding-left: 16px;

}


.site-header .profile-dropdown .profile-menu a:hover i {

    color: var(--header-green);

}

.site-header .profile-dropdown > a {

    position: relative;

    z-index: 2;

}

/* =========================================================
   PREMIUM MOBILE HEADER — REPLACE YOUR CURRENT MOBILE CSS
========================================================= */

@media (max-width: 767px) {

    /* ---------- HEADER ---------- */

    .site-header {
        position: relative;
        z-index: 10000;
        background: #fff;
    }

    .site-header .top_nav {
        display: none;
    }

    .site-header .nav_wrapper {
        position: sticky;
        top: 0;
        z-index: 10001;

        background: rgba(255,255,255,.96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        border-bottom: 1px solid #edf1e9;

        box-shadow:
            0 5px 25px rgba(39,65,28,.07);
    }

    .site-header .navbar {
        height: 72px !important;
        min-height: 72px !important;
        padding: 0 !important;
    }

    .site-header .container {
        width: 92% !important;
        max-width: none !important;
        margin: auto !important;
        padding: 0 !important;
    }

    .site-header .nav_inner {
        height: 72px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 14px;
    }


    /* ---------- LOGO ---------- */

    .site-header .logo {
        height: 72px !important;

        display: flex !important;
        align-items: center !important;

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

        transform: none !important;

        flex: 1 1 auto !important;
    }

    .site-header .logo a {
        transform: none !important;
        display: flex !important;
        align-items: center !important;
    }

    .site-header .logo img,
    .site-header .logo .custom-logo {
        width: auto !important;
        max-width: 135px !important;
        max-height: 52px !important;

        transform: none !important;
    }


    /* ---------- HIDE DESKTOP MENU ONLY ---------- */

    .site-header .menus > .menu {
        display: none !important;
    }


    /* ---------- RIGHT SIDE ACTIONS ---------- */

    .site-header .menus {
        height: 72px !important;

        display: flex !important;
        align-items: center !important;

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

        gap: 8px !important;

        flex: 0 0 auto !important;
    }

    .site-header .options {
        height: 72px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 7px !important;

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


    /* ---------- SEARCH / CART / PROFILE ---------- */

    .site-header .options > li.header-search,
    .site-header .options > li.header-cart,
    .site-header .options > li.header-profile {

        position: relative !important;

        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;

        max-width: 38px !important;
        max-height: 38px !important;

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

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

        border: 1px solid #e2e9dc !important;
        border-radius: 50% !important;

        background: #fff !important;

        transform: none !important;

        visibility: visible !important;
        opacity: 1 !important;

        transition:
            background .25s ease,
            border-color .25s ease,
            transform .25s ease,
            box-shadow .25s ease !important;
    }

    .site-header .options > li.header-search:hover,
    .site-header .options > li.header-cart:hover,
    .site-header .options > li.header-profile:hover {
        background: #527f2b !important;
        border-color: #527f2b !important;

        transform: translateY(-2px) !important;

        box-shadow:
            0 7px 18px rgba(82,127,43,.20) !important;
    }

    .site-header .options > li.header-search > a,
    .site-header .options > li.header-cart > a,
    .site-header .options > li.header-profile > a,
    .site-header .options > li.header-search > button {

        width: 38px !important;
        height: 38px !important;

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

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

        background: transparent !important;
        border: 0 !important;

        color: #263021 !important;
    }

    .site-header .options > li.header-search i,
    .site-header .options > li.header-cart i,
    .site-header .options > li.header-profile i {
        font-size: 14px !important;
        color: #263021 !important;
        transform: none !important;
    }

    .site-header .options > li:hover i {
        color: #fff !important;
    }


    /* ---------- CART BADGE ---------- */

    .site-header .options > li.header-cart .qty {
        position: absolute !important;

        top: -3px !important;
        right: -3px !important;

        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;

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

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

        background: #527f2b !important;
        color: #fff !important;

        border: 2px solid #fff !important;
        border-radius: 50% !important;

        font-size: 7px !important;
        font-weight: 700 !important;

        z-index: 5 !important;
    }


    /* ---------- HAMBURGER ---------- */

    .site-header .options > li.header-mobile-toggle {

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

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

        margin-left: 2px !important;

        background: #527f2b !important;

        border: 1px solid #527f2b !important;
        border-radius: 12px !important;

        transform: none !important;

        box-shadow:
            0 7px 18px rgba(82,127,43,.20);
    }

    .site-header .options > li.header-mobile-toggle .hamburger {
        width: 42px !important;
        height: 42px !important;

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

        gap: 5px !important;

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

        background: transparent !important;
        border: 0 !important;
    }

    .site-header .hamburger .line {
        width: 18px !important;
        height: 2px !important;

        background: #fff !important;

        border-radius: 10px !important;
    }


    /* ---------- DRAWER ---------- */

    .site-header .mobile_nav {

        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: min(380px, 88vw) !important;
        max-width: 380px !important;
        height: 100dvh !important;

        background: #fff !important;

        z-index: 100000 !important;

        transform: translateX(105%) !important;

        visibility: hidden !important;
        opacity: 1 !important;

        overflow-y: auto !important;

        box-shadow:
            -20px 0 60px rgba(20,40,15,.18) !important;

        transition:
            transform .4s cubic-bezier(.22,1,.36,1),
            visibility 0s linear .4s !important;
    }

    .site-header .mobile_nav.active {

        transform: translateX(0) !important;

        visibility: visible !important;

        transition:
            transform .4s cubic-bezier(.22,1,.36,1),
            visibility 0s linear 0s !important;
    }


    /* ---------- DRAWER INNER ---------- */

    .site-header .mobile_nav_inner {

        width: 100% !important;
        min-height: 100% !important;

        padding: 22px !important;

        box-sizing: border-box !important;
    }


    /* ---------- DRAWER HEADER ---------- */

    .site-header .mobile_nav_header {

        min-height: 58px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        padding-bottom: 18px !important;

        border-bottom: 1px solid #e9eee5 !important;
    }

    .site-header .mobile_logo img,
    .site-header .mobile_logo .custom-logo {

        max-width: 145px !important;
        max-height: 50px !important;

        object-fit: contain !important;
    }

    .site-header .mobile_nav_header .close-button {

        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;

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

        background: #f2f7ed !important;

        border: 1px solid #dce8d4 !important;
        border-radius: 50% !important;

        color: #527f2b !important;
    }


    /* ---------- QUICK ACTIONS ---------- */

    .site-header .mobile_quick_actions {

        display: grid !important;

        grid-template-columns: repeat(3, 1fr) !important;

        gap: 10px !important;

        margin: 22px 0 28px !important;
    }

    .site-header .mobile_quick_item {

        height: 78px !important;

        display: flex !important;
        flex-direction: column !important;

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

        gap: 7px !important;

        background: #f8faf6 !important;

        border: 1px solid #e5ebe0 !important;
        border-radius: 14px !important;

        color: #283022 !important;

        transition: all .25s ease !important;
    }

    .site-header .mobile_quick_item:hover {

        background: #527f2b !important;
        border-color: #527f2b !important;

        color: #fff !important;

        transform: translateY(-3px) !important;

        box-shadow:
            0 10px 25px rgba(82,127,43,.18) !important;
    }

    .site-header .mobile_quick_item .mobile_quick_icon {

        width: 34px !important;
        height: 34px !important;

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

        background: #fff !important;

        border: 1px solid #e1e8dc !important;
        border-radius: 50% !important;

        color: #527f2b !important;
    }

    .site-header .mobile_quick_item:hover .mobile_quick_icon {

        background: rgba(255,255,255,.16) !important;
        border-color: rgba(255,255,255,.25) !important;

        color: #fff !important;
    }

    .site-header .mobile_quick_item > span:last-child {

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

        color: inherit !important;
    }


    /* ---------- MENU ---------- */

    .site-header .mobile_section_heading {

        margin: 0 0 12px !important;

        font-size: 11px !important;
        font-weight: 700 !important;

        letter-spacing: 1.5px !important;

        color: #727b6d !important;
    }

    .site-header .mobile_nav .mobile-menu {

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

        border-top: 1px solid #e6ece2 !important;
    }

    .site-header .mobile_nav .mobile-menu li {

        border-bottom: 1px solid #e6ece2 !important;
    }

    .site-header .mobile_nav .mobile-menu li a {

        min-height: 56px !important;

        padding: 0 8px !important;

        display: flex !important;
        align-items: center !important;

        color: #293025 !important;

        font-size: 14px !important;
        font-weight: 600 !important;
    }

    .site-header .mobile_nav .mobile-menu li a:hover {

        color: #527f2b !important;
        padding-left: 14px !important;

        background: #f7faf4 !important;
    }


    /* ---------- OVERLAY ---------- */

    .site-header .nav_overlay {

        position: fixed !important;
        inset: 0 !important;

        z-index: 99999 !important;

        background: rgba(20,35,15,.48) !important;

        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            opacity .3s ease,
            visibility .3s ease !important;
    }

    .site-header .nav_overlay.active {

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* ---------- BODY LOCK ---------- */

    body.mobile-menu-open {
        overflow: hidden !important;
    }
}



@media (max-width: 380px) {

    .site-header .mobile_quick_actions {
        gap: 5px !important;
    }

    .site-header .mobile_quick_item {
        height: 64px !important;
        min-height: 64px !important;

        padding: 5px 2px !important;
    }

    .site-header .mobile_quick_item .mobile_quick_icon {
        width: 26px !important;
        height: 26px !important;

        min-width: 26px !important;
        min-height: 26px !important;
    }

    .site-header .mobile_quick_item .mobile_quick_icon i {
        font-size: 10px !important;
    }

    .site-header .mobile_quick_item > span:last-child {
        font-size: 8px !important;
    }
}


/* =========================================================
   STICKY EFFECT
========================================================= */

.site-header .nav_wrapper {
    position: sticky;
    top: 0;
}


.site-header a:focus,
.site-header a:focus-visible,
.site-header button:focus,
.site-header button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}