/* =========================================================
   RAIN SPREE PREMIUM
   HEADER + NAVIGATION + MEGA MENU
   CLEAN CONSOLIDATED VERSION
   ========================================================= */


/* =========================================================
   01. ROOT / COMMON
   ========================================================= */

.rs-header,
.rs-header *,
.rs-navigation,
.rs-navigation *,
.rs-mega-menu,
.rs-mega-menu * {
    box-sizing: border-box;
}


/* =========================================================
   02. ANNOUNCEMENT BAR
   ========================================================= */

.rs-topbar {
    position: sticky;
    top: 0;
    z-index: 10001;

    background:
        linear-gradient(
            90deg,
            #1F5E2F 0%,
            #295F1F 45%,
            #183E14 100%
        );

    color: #fff;

    font-size: 13px;
    font-weight: 500;
}

.rs-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 34px;
    gap: 20px;
}

.rs-topbar__message {
    display: flex;
    align-items: center;

    gap: 8px;

    letter-spacing: .2px;
}

.rs-topbar__message i {
    color: #F6D365;
    font-size: 12px;
}

.rs-topbar__social {
    display: flex;
    align-items: center;

    gap: 14px;
}

.rs-topbar__social a {
    color: #fff;

    opacity: .85;

    font-size: 13px;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.rs-topbar__social a:hover {
    opacity: 1;
    transform: translateY(-1px);
}


/* =========================================================
   03. MAIN HEADER
   ========================================================= */

.rs-header {
    position: sticky;

    top: 34px;

    z-index: 10000;

    background:
        rgba(248, 255, 251, .76);

    backdrop-filter:
        blur(28px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(150%);

    border-bottom:
        1px solid
        rgba(92, 180, 132, .28);

    box-shadow:
        0 6px 24px
        rgba(31, 94, 47, .07),

        inset 0 1px 0
        rgba(255,255,255,.80);

    transition:
        background .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   04. HEADER CONTAINER
   ========================================================= */

.rs-header .rs-container {
    min-height: 88px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 18px;
}


/* =========================================================
   05. LOGO
   ========================================================= */

.rs-logo {
    flex: 0 0 auto;
}

.rs-logo img,
.custom-logo-link img {
    display: block;

    width: auto;

    height: 80px;

    max-width: 180px;
}


/* =========================================================
   06. DESKTOP NAVIGATION
   ========================================================= */

.rs-navigation {
    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;
}

.rs-menu {
    display: flex;

    align-items: center;

    gap: 40px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.rs-menu > li {
    position: relative;

    margin: 0;
    padding: 0;
}

.rs-menu > li > a {
    position: relative;

    display: inline-flex;

    align-items: center;

    color: var(--rs-text);

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;

    text-decoration: none;

    transition:
        color .25s ease;
}

.rs-menu > li > a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -10px;

    width: 0;
    height: 2px;

    background: #1F5E2F;

    transition:
        width .25s ease;
}

.rs-menu > li:hover > a::after,
.rs-menu > li.current-menu-item > a::after,
.rs-menu > li.current-menu-ancestor > a::after,
.rs-menu > li.current-menu-parent > a::after {
    width: 100%;
}

.rs-menu > li > a:hover,
.rs-menu > li.current-menu-item > a,
.rs-menu > li.current-menu-ancestor > a,
.rs-menu > li.current-menu-parent > a {
    color: #1F5E2F;
}


/* =========================================================
   07. SHOP
   IMPORTANT:
   Actual PHP structure:
   
   .rs-shop-menu-item
       .rs-shop-link-wrap
           .rs-shop-link
           .rs-shop-chevron
   ========================================================= */

.rs-menu > .rs-shop-menu-item {
    position: static;
}

.rs-menu > .rs-shop-menu-item
> .rs-shop-link-wrap {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin: 0;
    padding: 0;
}

.rs-menu > .rs-shop-menu-item
> .rs-shop-link-wrap
> .rs-shop-link {
    display: inline-flex;

    align-items: center;

    margin: 0;
    padding: 0;

    color: var(--rs-text);

    text-decoration: none;
}

.rs-menu > .rs-shop-menu-item
> .rs-shop-link-wrap
> .rs-shop-link
> span {
    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 600;

    font-style: normal;

    line-height: 1.2;

    letter-spacing: normal;

    color: var(--rs-text);

    text-transform: none;
}

.rs-menu > .rs-shop-menu-item
> .rs-shop-link-wrap
> .rs-shop-chevron {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 16px;
    height: 20px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: var(--rs-text);

    cursor: pointer;
}

.rs-menu > .rs-shop-menu-item
> .rs-shop-link-wrap
> .rs-shop-chevron
> i {
    display: inline-block;

    margin: 0;
    padding: 0;

    font-size: 9px;

    line-height: 1;

    transition:
        transform .25s ease;
}

.rs-menu > .rs-shop-menu-item.rs-shop-open
> .rs-shop-link-wrap
> .rs-shop-chevron
> i {
    transform: rotate(180deg);
}

.rs-menu > .rs-shop-menu-item:hover
> .rs-shop-link-wrap
> .rs-shop-link,
.rs-menu > .rs-shop-menu-item:hover
> .rs-shop-link-wrap
> .rs-shop-chevron {
    color: #1F5E2F;
}


/* =========================================================
   08. HEADER ACTIONS
   ========================================================= */

.rs-header-actions {
    display: flex;

    align-items: center;

    gap: 14px;

    flex: 0 0 auto;
}

.rs-icon-btn {
    position: relative;

    width: 44px;
    height: 44px;

    display: flex;

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

    margin: 0;
    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: #2F332F;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease;
}

.rs-icon-btn:hover {
    background:
        rgba(31,94,47,.07);

    color: #1F5E2F;
}


/* Font Awesome */

.rs-icon-btn > i {
    display: inline-block;

    margin: 0;
    padding: 0;

    color: currentColor;

    font-family:
        "Font Awesome 6 Free";

    font-size: 17px;

    line-height: 1;

    opacity: 1;

    visibility: visible;
}

.rs-wishlist-btn > i {
    font-weight: 400;
}

.rs-icon-btn .fa-solid {
    font-weight: 900;
}


/* Cart badge */

.rs-cart-count {
    position: absolute;

    top: 1px;
    right: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 17px;
    height: 17px;

    padding:
        0 4px;

    border-radius: 999px;

    background: #1F5E2F;

    color: #fff;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   09. MOBILE TOGGLE
   Hidden on desktop
   ========================================================= */

.rs-mobile-toggle {
    display: none;
}


/* =========================================================
   10. MEGA MENU — DESKTOP
   ========================================================= */

.rs-shop-menu-item
> .rs-mega-menu {
    position: absolute;

    top:
        calc(100% + 12px);

    left: 50%;

    width:
        min(
            1380px,
            calc(100vw - 50px)
        );

    margin: 0;

    padding: 26px;

    display: grid;

    grid-template-columns:
        minmax(230px, .8fr)
        minmax(420px, 1.5fr)
        minmax(230px, .8fr);

    gap: 18px;

    list-style: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.82),
            rgba(241,249,244,.72),
            rgba(248,243,255,.78)
        );

    border:
        1px solid
        rgba(255,255,255,.90);

    border-radius: 28px;

    box-shadow:
        0 25px 70px
        rgba(40,30,70,.18),

        0 8px 30px
        rgba(31,94,47,.08),

        inset 0 1px 0
        rgba(255,255,255,.95);

    backdrop-filter:
        blur(30px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(145%);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(12px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index: 9999;

    overflow: visible;
}

.rs-shop-menu-item:hover
> .rs-mega-menu,
.rs-shop-menu-item:focus-within
> .rs-mega-menu,
.rs-shop-menu-item.rs-shop-open
> .rs-mega-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   11. MEGA MENU ARROW
   ========================================================= */

.rs-shop-menu-item
> .rs-mega-menu::before {
    content: "";

    position: absolute;

    top: -9px;

    left: 50%;

    width: 17px;
    height: 17px;

    background:
        rgba(248,251,249,.90);

    border-left:
        1px solid
        rgba(255,255,255,.90);

    border-top:
        1px solid
        rgba(255,255,255,.90);

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* =========================================================
   12. MEGA MENU ITEMS
   ========================================================= */

.rs-shop-menu-item
> .rs-mega-menu
li {
    position: relative;

    display: block;

    width: auto;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   13. MEGA COLUMNS
   ========================================================= */

.rs-mega-main-column {
    position: relative;

    min-width: 0;

    margin: 0;

    padding: 20px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.60),
            rgba(255,255,255,.30)
        );

    border:
        1px solid
        rgba(255,255,255,.70);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.80),

        0 8px 25px
        rgba(50,40,80,.05);
}

.rs-mega-main-column:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 20px;

    right: -10px;

    width: 1px;

    height:
        calc(100% - 40px);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.90),
            transparent
        );
}


/* =========================================================
   14. MEGA MAIN LINK
   ========================================================= */

.rs-mega-main-link {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin:
        0 0 16px;

    padding: 0;

    background: transparent;

    color: #193F28;

    text-decoration: none;
}


/* =========================================================
   15. MEGA ICON
   ========================================================= */

.rs-mega-main-icon {
    width: 52px;
    height: 52px;

    min-width: 52px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255,255,255,.72);

    border:
        1px solid
        rgba(255,255,255,.90);

    box-shadow:
        0 8px 22px
        rgba(80,60,120,.10);

    font-size: 20px;

    color: #6331C8;
}

.rs-mega-column-wellness-essentials
.rs-mega-main-icon {
    color: #3F8B3F;
}

.rs-mega-column-digital-products
.rs-mega-main-icon {
    color: #6735C7;
}

.rs-mega-column-print-on-demand
.rs-mega-main-icon {
    color: #E46B25;
}


/* =========================================================
   16. MEGA TITLES
   ========================================================= */

.rs-mega-main-title {
    display: block;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.1;

    color: #263D2C;
}


/* =========================================================
   17. SECOND LEVEL
   ========================================================= */

.rs-mega-main-column
> .rs-mega-submenu {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}

.rs-mega-group-link {
    display: block;

    width: 100%;

    margin:
        2px 0;

    padding:
        7px 8px;

    border-radius: 8px;

    background: transparent;

    color: #39266C;

    font-size: 14px;

    font-weight: 650;

    line-height: 1.3;

    text-decoration: none;

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

.rs-mega-group-link:hover {
    color: #6027D1;

    background:
        rgba(255,255,255,.55);

    padding-left: 12px;
}


/* =========================================================
   18. THIRD LEVEL
   ========================================================= */

.rs-mega-group
> .rs-mega-submenu {
    display: block;

    margin:
        0 0 7px;

    padding:
        0 0 0 8px;

    list-style: none;
}

.rs-mega-sub-link {
    display: block;

    width: 100%;

    margin:
        1px 0;

    padding:
        5px 8px;

    border-radius: 7px;

    color: #555;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.35;

    text-decoration: none;

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

.rs-mega-sub-link:hover {
    color: #6027D1;

    background:
        rgba(255,255,255,.5);

    padding-left: 12px;
}


/* =========================================================
   19. DIGITAL PRODUCTS SCROLL
   ========================================================= */

.rs-mega-column-digital-products {
    max-height: 620px;

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(100,55,200,.25)
        transparent;
}

.rs-mega-column-digital-products::-webkit-scrollbar {
    width: 5px;
}

.rs-mega-column-digital-products::-webkit-scrollbar-track {
    background: transparent;
}

.rs-mega-column-digital-products::-webkit-scrollbar-thumb {
    background:
        rgba(100,55,200,.25);

    border-radius: 20px;
}


/* =========================================================
   20. DESKTOP ONLY
   ========================================================= */

@media (min-width: 1024px) {

    .rs-navigation {
        display: flex;
    }

    .rs-menu {
        display: flex;
    }

}


/* =========================================================
   21. MOBILE
   IMPORTANT:
   The actual menu is #primary-menu.rs-menu.
   ========================================================= */

@media (max-width: 1023px) {

    /* -----------------------------------------------------
       TOPBAR
       ----------------------------------------------------- */

    .rs-topbar {
        display: none;
    }

    .rs-header {
        top: 0;
    }


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

    .rs-header .rs-container {

        min-height: 64px;
        height: 64px;

        display: flex;

        flex-direction: row;

        align-items: center;

        padding:
            0 10px;

        position: relative;

        width: 100%;
    }


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

    .rs-logo {
        order: 2;

        display: flex;

        align-items: center;

        flex: 0 0 auto;

        margin: 0;
    }

    .rs-logo img,
    .custom-logo-link img {

        display: block;

        height: 44px;

        width: auto;

        max-width: 118px;
    }


    /* -----------------------------------------------------
       HEADER ACTION WRAPPER
       Make the children participate directly
       in the header flex layout.
       ----------------------------------------------------- */

    .rs-header-actions {
        display: contents;
    }


    /* -----------------------------------------------------
       HAMBURGER
       LEFT
       NO CIRCLE
       ----------------------------------------------------- */

    .rs-mobile-toggle {

        position: static !important;

        order: 1 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 28px !important;
        height: 28px !important;

        flex: 0 0 28px !important;

        margin:
            0 6px 0 0 !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        background: transparent !important;

        color: #1F5E2F !important;

        box-shadow: none !important;

        cursor: pointer !important;

        z-index: 10003 !important;
    }

    .rs-mobile-toggle::before {
        display: none !important;
        content: none !important;
    }

    .rs-mobile-toggle > i {

        display: inline-block !important;

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

        color: currentColor !important;

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

        font-size: 17px !important;

        font-weight: 900 !important;

        line-height: 1 !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    /* -----------------------------------------------------
       RIGHT-SIDE ICONS
       ----------------------------------------------------- */

    .rs-header-actions .rs-icon-btn {

        order: 3;

        position: relative;

        display: flex;

        align-items: center;

        justify-content: center;

        width: 30px;
        height: 30px;

        flex: 0 0 30px;

        margin:
            0 0 0 2px;

        padding: 0;

        border: 0;

        border-radius: 50%;

        background: transparent;

        color: #2F332F;

        text-decoration: none;

        cursor: pointer;
    }

    .rs-header-actions .rs-icon-btn > i {

        display: inline-block;

        margin: 0;
        padding: 0;

        color: currentColor;

        font-family:
            "Font Awesome 6 Free";

        font-size: 14px;

        line-height: 1;

        opacity: 1;

        visibility: visible;
    }

    .rs-header-actions .rs-icon-btn:hover {
        color: #1F5E2F;

        background:
            rgba(31,94,47,.06);
    }


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

    .rs-header-actions .rs-cart-count {

        position: absolute;

        top: -1px;
        right: -2px;

        display: flex;

        align-items: center;

        justify-content: center;

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

        padding:
            0 3px;

        border-radius: 999px;

        background: #1F5E2F;

        color: #fff;

        font-family:
            "Inter",
            Arial,
            sans-serif;

        font-size: 8px;

        font-weight: 800;

        line-height: 1;
    }


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

    #primary-menu.rs-menu {

        display: none;

        position: fixed;

        top: 64px;

        left: 0;
        right: 0;

        width: 100%;

        max-width: none;

        height:
            calc(100vh - 64px);

        margin: 0;

        padding:
            18px
            18px
            30px;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 4px;

        overflow-y: auto;

        background:
            rgba(255,255,255,.97);

        backdrop-filter:
            blur(25px)
            saturate(140%);

        -webkit-backdrop-filter:
            blur(25px)
            saturate(140%);

        box-shadow:
            0 15px 35px
            rgba(31,94,47,.10);

        z-index: 9998;
    }

    #primary-menu.rs-menu.active {
        display: flex;
    }


    /* -----------------------------------------------------
       MOBILE MENU ITEMS
       ----------------------------------------------------- */

    #primary-menu.rs-menu > li {

        width: 100%;

        margin: 0;
        padding: 0;
    }

    #primary-menu.rs-menu > li > a {

        display: flex;

        align-items: center;

        width: 100%;

        min-height: 44px;

        padding:
            8px 4px;

        font-family:
            "Inter",
            Arial,
            sans-serif;

        font-size: 14px;

        font-weight: 600;

        line-height: 1.25;

        color: var(--rs-text);

        text-decoration: none;
    }

    #primary-menu.rs-menu > li > a::after {
        display: none;
    }


    /* -----------------------------------------------------
       MOBILE SHOP
       ----------------------------------------------------- */

    #primary-menu.rs-menu
    > .rs-shop-menu-item {

        position: relative;
    }

    #primary-menu.rs-menu
    > .rs-shop-menu-item
    > .rs-shop-link-wrap {

        display: inline-flex;

        align-items: center;

        justify-content: flex-start;

        gap: 7px;

        width: auto;

        margin: 0;
        padding: 0;
    }

    #primary-menu.rs-menu
    > .rs-shop-menu-item
    > .rs-shop-link-wrap
    > .rs-shop-link {

        display: inline-flex;

        align-items: center;

        width: auto;

        margin: 0;

        padding:
            8px 0;

        color: #244A2D;

        text-decoration: none;
    }

    #primary-menu.rs-menu
    > .rs-shop-menu-item
    > .rs-shop-link-wrap
    > .rs-shop-link
    > span {

        font-family:
            "Inter",
            Arial,
            sans-serif;

        font-size: 14px;

        font-weight: 600;

        line-height: 1.25;

        letter-spacing: normal;

        color: #244A2D;
    }


    /* -----------------------------------------------------
       SHOP CHEVRON
       ----------------------------------------------------- */

    #primary-menu.rs-menu
    > .rs-shop-menu-item
    > .rs-shop-link-wrap
    > .rs-shop-chevron {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 18px;
        height: 24px;

        margin: 0;
        padding: 0;

        border: 0;

        background: transparent;

        color: #244A2D;

        cursor: pointer;
    }

    #primary-menu.rs-menu
    > .rs-shop-menu-item
    > .rs-shop-link-wrap
    > .rs-shop-chevron
    > i {

        display: inline-block;

        margin: 0;
        padding: 0;

        font-size: 9px;

        line-height: 1;
    }


    /* -----------------------------------------------------
       MOBILE MEGA MENU
       ----------------------------------------------------- */

    #primary-menu.rs-menu
    > .rs-shop-menu-item
    > ul.rs-mega-menu {

        position: static;

        width: 100%;

        max-width: none;

        display: none;

        grid-template-columns: 1fr;

        margin:
            8px 0 10px;

        padding: 10px;

        transform: none;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        border-radius: 18px;

        box-shadow:
            0 8px 25px
            rgba(31,94,47,.08);
    }

    #primary-menu.rs-menu
    > .rs-shop-menu-item.rs-shop-open
    > ul.rs-mega-menu {

        display: grid;
    }


    /* Don't auto-open from hover on mobile */

    #primary-menu.rs-menu
    > .rs-shop-menu-item:hover
    > ul.rs-mega-menu {

        display: none;
    }

    #primary-menu.rs-menu
    > .rs-shop-menu-item.rs-shop-open:hover
    > ul.rs-mega-menu {

        display: grid;
    }


    /* -----------------------------------------------------
       MOBILE MEGA COLUMNS
       ----------------------------------------------------- */

    #primary-menu.rs-menu
    .rs-mega-main-column {

        padding: 15px;

        border-radius: 16px;
    }

    #primary-menu.rs-menu
    .rs-mega-main-column:not(:last-child)::after {

        display: none;
    }

    #primary-menu.rs-menu
    .rs-mega-column-digital-products {

        max-height: none;

        overflow: visible;
    }


    body.menu-open {
        overflow: hidden;
    }
}


/* =========================================================
   22. MOBILE — SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .rs-header .rs-container {
        padding:
            0 8px;
    }

    .rs-mobile-toggle {

        width: 26px !important;
        height: 26px !important;

        flex-basis: 26px !important;

        margin-right: 5px !important;
    }

    .rs-mobile-toggle > i {
        font-size: 16px !important;
    }

    .rs-logo img,
    .custom-logo-link img {

        height: 40px;

        max-width: 105px;
    }

    .rs-header-actions .rs-icon-btn {

        width: 28px;
        height: 28px;

        flex-basis: 28px;

        margin-left: 1px;
    }

    .rs-header-actions .rs-icon-btn > i {
        font-size: 13px;
    }

}


/* =========================================================
   23. WORDPRESS ADMIN BAR
   ========================================================= */

body.admin-bar .rs-topbar {
    top: 32px;
}

body.admin-bar .rs-header {
    top: 66px;
}

@media (max-width: 782px) {

    body.admin-bar .rs-header {
        top: 46px;
    }

    body.admin-bar
    #primary-menu.rs-menu {

        top: 110px;

        height:
            calc(100vh - 110px);
    }

}


/* =========================================================
   24. SCROLLED HEADER
   ========================================================= */

.rs-header.scrolled {

    background:
        rgba(248,255,251,.84);

    backdrop-filter:
        blur(32px)
        saturate(155%);

    -webkit-backdrop-filter:
        blur(32px)
        saturate(155%);

    border-bottom:
        1px solid
        rgba(92,180,132,.34);

    box-shadow:
        0 8px 28px
        rgba(31,94,47,.10),

        inset 0 1px 0
        rgba(255,255,255,.88);
}

/* =========================================================
   SHOP TEXT ONLY
   DO NOT TOUCH CHEVRON
   ========================================================= */

.rs-menu > .rs-shop-menu-item
> .rs-shop-link-wrap
> .rs-shop-link
> span {

    font-family:
        "Inter",
        Arial,
        sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--rs-text) !important;
}


/* =========================================================
   RAIN SPREE
   FINAL DESKTOP MEGA MENU
   PURE HOVER
   ========================================================= */

@media (min-width: 1024px) {

    /* -----------------------------------------------------
       SHOP ITEM
       ----------------------------------------------------- */

    .rs-menu
    > .rs-shop-menu-item {

        position: relative !important;

    }


    /* -----------------------------------------------------
       SHOP CHEVRON
       VISUAL ONLY
       ----------------------------------------------------- */

    .rs-menu
    > .rs-shop-menu-item
    > .rs-shop-link-wrap
    > .rs-shop-chevron {

        pointer-events: none !important;

        cursor: default !important;

    }


    /* -----------------------------------------------------
       CHEVRON DOWN
       ----------------------------------------------------- */

    .rs-menu
    > .rs-shop-menu-item
    > .rs-shop-link-wrap
    > .rs-shop-chevron
    > i {

        display: inline-block !important;

        transform: rotate(0deg) !important;

        transition:
            transform .2s ease !important;

    }


    /* -----------------------------------------------------
       CHEVRON UP ON HOVER
       ----------------------------------------------------- */

    .rs-menu
    > .rs-shop-menu-item:hover
    > .rs-shop-link-wrap
    > .rs-shop-chevron
    > i {

        transform:
            rotate(180deg) !important;

    }


    /* -----------------------------------------------------
       MEGA MENU
       CLOSED
       ----------------------------------------------------- */

    .rs-menu
    > .rs-shop-menu-item
    > .rs-mega-menu {

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transform:
            translateX(-50%)
            translateY(8px) !important;

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease !important;

        top:
            calc(100% + 4px) !important;

    }


    /* -----------------------------------------------------
       MEGA MENU
       OPEN WHILE MOUSE IS INSIDE SHOP ITEM
       ----------------------------------------------------- */

    .rs-menu
    > .rs-shop-menu-item:hover
    > .rs-mega-menu {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform:
            translateX(-50%)
            translateY(0) !important;

    }


    /* -----------------------------------------------------
       HOVER BRIDGE
       Prevents a gap between Shop and menu.
       ----------------------------------------------------- */

    .rs-menu
    > .rs-shop-menu-item::after {

        content: "";

        position: absolute;

        left: 0;

        top: 100%;

        width: 100%;

        height: 12px;

        background: transparent;

        pointer-events: auto;

    }


    /* -----------------------------------------------------
       IMPORTANT
       OLD JS OPEN STATE SHOULD NOT BE REQUIRED.
       ----------------------------------------------------- */

    .rs-menu
    > .rs-shop-menu-item.rs-shop-open
    > .rs-mega-menu {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform:
            translateX(-50%)
            translateY(0) !important;

    }

}