/* =========================================================
   RAIN SPREE — SHOP MEGA MENU
   SINGLE SOURCE OF TRUTH
   =========================================================
   IMPORTANT:
   - All mega-menu styling belongs in this file.
   - header.css must NOT contain mega-menu rules.
   - 3 equal main columns.
   - Parent categories stay visible.
   - Child categories are collapsed behind + / −.
   - Uses the existing WooCommerce/WordPress menu hierarchy.
   ========================================================= */


/* =========================================================
   01. SHOP MENU ITEM / POSITIONING
   ========================================================= */

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

.rs-shop-menu-item > .rs-shop-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;

    border: 0;
    padding: 0;
    margin: 0;

    background: transparent;

    color: inherit;
    font: inherit;
    text-decoration: none;

    cursor: pointer;
}

.rs-shop-menu-item > .rs-shop-link:focus-visible {
    outline: 2px solid #7138C8;
    outline-offset: 4px;
}

.rs-shop-arrow {
    font-size: 10px !important;
    transition: transform .22s ease !important;
}

.rs-shop-menu-item.rs-shop-open .rs-shop-arrow,
.rs-shop-menu-item:hover .rs-shop-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   02. MAIN MEGA MENU
   ========================================================= */

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

    position: absolute !important;

    top: calc(100% + 12px) !important;
    left: 50% !important;

    width: min(1380px, calc(100vw - 40px)) !important;
    max-width: 1380px !important;

    box-sizing: border-box !important;

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

    display: grid !important;

    /* THREE EQUAL MAIN COLUMNS */
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 16px !important;

    list-style: none !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.92),
            rgba(241,249,244,.88),
            rgba(248,243,255,.90)
        ) !important;

    border:
        1px solid rgba(255,255,255,.92) !important;

    border-radius: 24px !important;

    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) !important;

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

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

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

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

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

    z-index: 99999 !important;
}


/* =========================================================
   03. OPEN STATE
   Supports the existing hover behavior and the JS
   rs-shop-open class.
   ========================================================= */

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

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

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


/* =========================================================
   04. RESET NORMAL WORDPRESS SUBMENU STYLING
   ========================================================= */

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

    position: relative !important;

    display: block !important;

    width: auto !important;

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

    list-style: none !important;
}


/* =========================================================
   05. THREE MAIN COLUMNS
   ========================================================= */

.rs-mega-menu > .rs-mega-main-column {

    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;

    box-sizing: border-box !important;

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

    border-radius: 18px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(255,255,255,.40)
        ) !important;

    border:
        1px solid rgba(255,255,255,.78) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        0 8px 25px rgba(50,40,80,.05) !important;
}


/* ---------------------------------------------------------
   Column-specific subtle backgrounds
   --------------------------------------------------------- */

.rs-mega-column-wellness-essentials {
    background:
        linear-gradient(
            145deg,
            rgba(239,249,235,.90),
            rgba(255,255,255,.62)
        ) !important;

    border-color:
        rgba(47,125,60,.14) !important;
}

.rs-mega-column-digital-products {
    background:
        linear-gradient(
            145deg,
            rgba(247,240,255,.94),
            rgba(255,255,255,.62)
        ) !important;

    border-color:
        rgba(113,56,200,.14) !important;
}

.rs-mega-column-print-on-demand {
    background:
        linear-gradient(
            145deg,
            rgba(255,246,236,.94),
            rgba(255,255,255,.62)
        ) !important;

    border-color:
        rgba(243,109,22,.14) !important;
}


/* =========================================================
   06. COLUMN INNER
   ========================================================= */

.rs-mega-column-inner {

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

    min-width: 0 !important;
    min-height: 0 !important;

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

    box-sizing: border-box !important;
}


/* =========================================================
   07. MAIN CATEGORY HEADER
   ========================================================= */

.rs-mega-main-link {

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

    flex: 0 0 auto !important;

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

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

    gap: 10px !important;

    background: transparent !important;

    color: #193F28 !important;

    text-decoration: none !important;
}

.rs-mega-main-icon {

    flex: 0 0 44px !important;

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

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

    border-radius: 50% !important;

    background:
        rgba(255,255,255,.86) !important;

    border:
        1px solid rgba(255,255,255,.95) !important;

    box-shadow:
        0 7px 20px rgba(80,60,120,.09) !important;

    font-size: 17px !important;
}

.rs-mega-column-wellness-essentials
.rs-mega-main-icon {
    color: #2F7D3C !important;
}

.rs-mega-column-digital-products
.rs-mega-main-icon {
    color: #7138C8 !important;
}

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

.rs-mega-main-copy {

    min-width: 0 !important;
    max-width: 100% !important;

    display: block !important;
}

.rs-mega-main-title {

    display: block !important;

    min-width: 0 !important;

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

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

    line-height: 1.05 !important;

    color: #263D2C !important;

    white-space: nowrap !important;
}

.rs-mega-column-digital-products
.rs-mega-main-title {
    color: #51328C !important;
}

.rs-mega-column-print-on-demand
.rs-mega-main-title {
    color: #914C1F !important;
}

.rs-mega-main-description {

    display: block !important;

    margin-top: 3px !important;

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

    line-height: 1.25 !important;

    color: #555 !important;
}


/* =========================================================
   08. CATEGORY IMAGE
   ========================================================= */

.rs-mega-image-link {

    display: block !important;

    flex: 0 0 145px !important;

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

    box-sizing: border-box !important;

    margin: 0 0 9px !important;

    overflow: hidden !important;

    border-radius: 13px !important;

    background: #F3F3F3 !important;

    text-decoration: none !important;
}

.rs-mega-card-image {

    display: block !important;

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

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

    transition:
        transform .30s ease !important;
}

.rs-mega-image-link:hover
.rs-mega-card-image {
    transform: scale(1.025);
}


/* =========================================================
   09. MAIN CATEGORY LIST
   =========================================================
   The direct submenu contains the parent categories.
   It stays visible at all times.
   ========================================================= */

.rs-mega-main-column > .rs-mega-submenu {

    flex: 1 1 auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    width: 100% !important;

    display: block !important;

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

    list-style: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    scrollbar-width: thin;

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

.rs-mega-main-column > .rs-mega-submenu::-webkit-scrollbar {
    width: 5px;
}

.rs-mega-main-column > .rs-mega-submenu::-webkit-scrollbar-track {
    background: transparent;
}

.rs-mega-main-column > .rs-mega-submenu::-webkit-scrollbar-thumb {

    background:
        rgba(100,55,200,.22);

    border-radius: 20px;
}


/* =========================================================
   10. PARENT CATEGORY ROW
   ========================================================= */

.rs-mega-group {

    position: relative !important;

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

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

    list-style: none !important;
}

.rs-mega-group-row {

    position: relative !important;

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

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

    box-sizing: border-box !important;
}


/* =========================================================
   11. PARENT CATEGORY LINK
   ========================================================= */

.rs-mega-group-link {

    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    width: auto !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    /* room for + button */
    padding:
        5px 34px 5px 2px !important;

    border-radius: 7px !important;

    background: transparent !important;

    color: #39266C !important;

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

    line-height: 1.25 !important;

    text-decoration: none !important;

    transition:
        color .18s ease,
        background .18s ease,
        padding-left .18s ease !important;
}

.rs-mega-group-link:hover {

    color: #6027D1 !important;

    background:
        rgba(255,255,255,.52) !important;

    padding-left: 7px !important;
}


/* =========================================================
   12. + / − TOGGLE
   =========================================================
   IMPORTANT:
   This must remain visible.
   ========================================================= */

.rs-mega-group-toggle {

    position: absolute !important;

    top: 50% !important;
    right: 2px !important;

    width: 24px !important;
    height: 24px !important;

    transform: translateY(-50%) !important;

    display: flex !important;

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

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

    border:
        1px solid rgba(113,56,200,.16) !important;

    border-radius: 7px !important;

    background:
        rgba(255,255,255,.78) !important;

    color: #7138C8 !important;

    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;

    line-height: 1 !important;

    cursor: pointer !important;

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

    z-index: 5 !important;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}

.rs-mega-group-toggle:hover {

    background: #FFFFFF !important;

    color: #6027D1 !important;

    border-color:
        rgba(113,56,200,.30) !important;
}

.rs-mega-group-toggle:focus-visible {

    outline:
        2px solid #7138C8 !important;

    outline-offset: 2px !important;
}

.rs-mega-group-toggle[aria-expanded="true"] {

    background:
        rgba(113,56,200,.10) !important;

    color: #6027D1 !important;

    border-color:
        rgba(113,56,200,.28) !important;
}


/* =========================================================
   13. CHILD CATEGORY SUBMENU
   =========================================================
   CLOSED BY DEFAULT.
   JS adds .rs-mega-submenu-open when + is clicked.
   ========================================================= */

.rs-mega-group > .rs-mega-submenu {

    display: none !important;

    width: auto !important;

    margin:
        0 0 5px !important;

    padding:
        0 0 0 14px !important;

    list-style: none !important;

    border-left:
        1px solid rgba(113,56,200,.13) !important;
}

.rs-mega-group
> .rs-mega-submenu.rs-mega-submenu-open {

    display: block !important;
}


/* =========================================================
   14. CHILD CATEGORY LINK
   ========================================================= */

.rs-mega-sub-link {

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        4px 4px 4px 8px !important;

    border-radius: 6px !important;

    color: #555 !important;

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

    line-height: 1.25 !important;

    text-decoration: none !important;

    transition:
        color .18s ease,
        background .18s ease,
        padding-left .18s ease !important;
}

.rs-mega-sub-link:hover {

    color: #6027D1 !important;

    background:
        rgba(255,255,255,.50) !important;

    padding-left: 12px !important;
}


/* =========================================================
   15. CTA
   ========================================================= */

.rs-mega-cta {

    flex: 0 0 auto !important;

    width: 100% !important;

    margin-top: auto !important;

    padding-top: 9px !important;
}

.rs-mega-cta a {

    display: flex !important;

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

    width: 100% !important;

    min-height: 39px !important;

    box-sizing: border-box !important;

    gap: 7px !important;

    padding:
        8px 13px !important;

    border-radius: 999px !important;

    color: #FFFFFF !important;

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

    line-height: 1 !important;

    text-decoration: none !important;

    transition:
        transform .20s ease,
        box-shadow .20s ease !important;
}

.rs-mega-column-wellness-essentials
.rs-mega-cta a {

    background:
        linear-gradient(
            90deg,
            #26743B,
            #4C9953
        ) !important;
}

.rs-mega-column-digital-products
.rs-mega-cta a {

    background:
        linear-gradient(
            90deg,
            #7138C8,
            #9859DF
        ) !important;
}

.rs-mega-column-print-on-demand
.rs-mega-cta a {

    background:
        linear-gradient(
            90deg,
            #F16D18,
            #FF8D31
        ) !important;
}

.rs-mega-cta a:hover {

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 7px 18px rgba(40,30,60,.16) !important;
}


/* =========================================================
   16. PROMO BANNER
   ========================================================= */

.rs-mega-promo {

    flex: 0 0 auto !important;

    width: 100% !important;

    min-height: 41px !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin-top: 7px !important;

    padding:
        6px 8px !important;

    box-sizing: border-box !important;

    border-radius: 10px !important;

    overflow: hidden !important;
}

.rs-mega-promo-icon {

    flex: 0 0 23px !important;

    width: 23px !important;
    height: 23px !important;

    display: flex !important;

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

    border-radius: 7px !important;

    font-size: 12px !important;
}

.rs-mega-promo-copy {

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 1px !important;
}

.rs-mega-promo-copy strong {

    display: block !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    line-height: 1.15 !important;
}

.rs-mega-promo-copy small {

    display: block !important;

    font-size: 8px !important;

    line-height: 1.15 !important;

    color: #555 !important;
}

.rs-mega-promo-wellness {

    background: #EEF8EE !important;

    border:
        1px solid rgba(47,125,60,.12) !important;
}

.rs-mega-promo-wellness
.rs-mega-promo-icon {
    background: #D9EEDB !important;
}

.rs-mega-promo-wellness
.rs-mega-promo-copy strong {
    color: #2F7D3C !important;
}

.rs-mega-promo-digital {

    background: #F5EEFF !important;

    border:
        1px solid rgba(113,56,200,.12) !important;
}

.rs-mega-promo-digital
.rs-mega-promo-icon {
    background: #E9DBFF !important;
}

.rs-mega-promo-digital
.rs-mega-promo-copy strong {
    color: #7138C8 !important;
}

.rs-mega-promo-print {

    background: #FFF4E9 !important;

    border:
        1px solid rgba(243,109,22,.12) !important;
}

.rs-mega-promo-print
.rs-mega-promo-icon {
    background: #FFE2C8 !important;
}

.rs-mega-promo-print
.rs-mega-promo-copy strong {
    color: #D85F12 !important;
}


/* =========================================================
   17. COLUMN DIVIDERS
   ========================================================= */

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

    content: "";

    position: absolute;

    top: 16px;
    right: -9px;

    width: 1px;

    height:
        calc(100% - 32px);

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


/* =========================================================
   18. DESKTOP
   ========================================================= */

@media (min-width: 1024px) {

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

        width:
            min(1380px, calc(100vw - 40px)) !important;

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

        gap: 16px !important;
    }

    .rs-mega-menu > .rs-mega-main-column {

        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
    }
}


/* =========================================================
   19. TABLET
   ========================================================= */

@media (max-width: 1100px) and (min-width: 1024px) {

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

        width:
            calc(100vw - 24px) !important;

        max-height:
            calc(100vh - 90px) !important;

        overflow-y: auto !important;

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

        gap: 10px !important;

        padding: 10px !important;
    }

    .rs-mega-menu > .rs-mega-main-column {

        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;

        padding: 12px !important;
    }

    .rs-mega-main-title {
        font-size: 20px !important;
    }

    .rs-mega-main-description {
        font-size: 9px !important;
    }

    .rs-mega-image-link {

        height: 125px !important;
        flex-basis: 125px !important;
    }

    .rs-mega-group-link {
        font-size: 11px !important;
    }

    .rs-mega-sub-link {
        font-size: 10px !important;
    }
}


/* =========================================================
   20. MOBILE
   ========================================================= */

@media (max-width: 1023px) {

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

        position: relative !important;
    }

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

        position: fixed !important;

        top: 72px !important;

        left: 10px !important;
        right: 10px !important;

        width: auto !important;
        max-width: none !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 10px !important;

        max-height:
            calc(100vh - 84px) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        padding: 10px !important;

        border-radius: 18px !important;

        transform:
            translateY(-8px) !important;
    }

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

        transform:
            translateY(0) !important;
    }

    .rs-mega-menu > .rs-mega-main-column {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 14px !important;
    }

    .rs-mega-main-title {
        font-size: 21px !important;
    }

    .rs-mega-image-link {

        height: 140px !important;
        flex-basis: 140px !important;
    }

    .rs-mega-main-column > .rs-mega-submenu {

        overflow: visible !important;
    }

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

        display: none !important;
    }
}


/* =========================================================
   21. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

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

        top: 66px !important;

        left: 7px !important;
        right: 7px !important;

        padding: 8px !important;

        border-radius: 16px !important;
    }

    .rs-mega-menu > .rs-mega-main-column {

        padding: 12px !important;
    }

    .rs-mega-main-icon {

        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        flex-basis: 40px !important;
    }

    .rs-mega-main-title {
        font-size: 20px !important;
    }

    .rs-mega-group-link {
        font-size: 11px !important;
    }

    .rs-mega-sub-link {
        font-size: 10px !important;
    }
}


/* =========================================================
   22. SAFETY OVERRIDES
   =========================================================
   These explicitly prevent old mega-menu rules from bringing
   back the previous behavior.
   ========================================================= */

.rs-mega-column-digital-products {

    /* Digital must NOT be wider than the other columns */
    grid-column: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    max-height: none !important;
}

.rs-mega-column-digital-products
> .rs-mega-column-inner {

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.rs-mega-column-digital-products
> .rs-mega-submenu {

    display: block !important;
}

.rs-mega-group
> .rs-mega-submenu {

    /* Children are collapsed, not the parent category list */
    display: none !important;
}

.rs-mega-group
> .rs-mega-submenu.rs-mega-submenu-open {

    display: block !important;
}

.rs-mega-group-toggle {

    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =========================================================
   FINAL DESKTOP HEIGHT ALIGNMENT
   ========================================================= */

@media (min-width: 1024px) {

    .rs-mega-menu > .rs-mega-main-column {
        height: 540px !important;
        min-height: 540px !important;
        max-height: 540px !important;
        box-sizing: border-box !important;
    }

}

/* =========================================================
   FINAL LINK INDENTATION
   ========================================================= */

@media (min-width: 1024px) {

    .rs-mega-main-column > .rs-mega-submenu > li > a,
    .rs-mega-group-link {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

}

.rs-shop-link-wrap {
    display: inline-flex;
    align-items: center;
}

.rs-shop-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0 0 0 4px;
    margin: 0;
    cursor: pointer;
}

.rs-shop-chevron i {
    pointer-events: none;
}