/* =========================================================
   LUNARI COLLECTION OVERLAY
   CLEAN FINAL VERSION
========================================================= */


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

html body #lunariCollectionDropdown.lunari-collection-overlay {
    position: fixed !important;

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

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

    height: 100vh !important;
    max-height: none !important;

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

    background: #ffffff !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

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

    transform: none !important;

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

    z-index: 9999999 !important;

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


/* OPEN STATE */

html body #lunariCollectionDropdown.lunari-collection-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: none !important;
}


/* stop page moving */
body.lunari-menu-open {
    overflow: hidden !important;
}


/* =========================================================
   INNER PANEL
========================================================= */

html body #lunariCollectionDropdown
.lunari-collection-overlay__panel {

    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

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

    min-height: 100vh !important;
    height: auto !important;

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

    transform: none !important;

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

    background: #fff !important;

    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
}


/* =========================================================
   TOP HEADER
========================================================= */

html body #lunariCollectionDropdown
.lunari-collection-overlay__top {

    position: relative !important;

    top: auto !important;
    left: auto !important;

    width: 100% !important;

    height: 94px !important;

    display: grid !important;

    grid-template-columns:
        80px
        1fr
        80px !important;

    align-items: center !important;

    padding: 0 28px !important;

    margin: 0 !important;

    background: #ffffff !important;

    border: 0 !important;
    border-bottom: 1px solid #dedede !important;

    transform: none !important;

    z-index: 5 !important;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

html body #lunariCollectionDropdown
.lunari-collection-overlay__close {

    position: relative !important;

    top: auto !important;
    left: auto !important;

    display: block !important;

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

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

    background: transparent !important;

    border: 0 !important;

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

    cursor: pointer !important;

    transform: none !important;
}


html body #lunariCollectionDropdown
.lunari-collection-overlay__close span {

    display: block !important;

    position: absolute !important;

    left: 9px !important;
    top: 20px !important;

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

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

    background: #111 !important;

    opacity: 1 !important;

    transform-origin: center !important;
}


html body #lunariCollectionDropdown
.lunari-collection-overlay__close span:first-child {
    transform: rotate(45deg) !important;
}


html body #lunariCollectionDropdown
.lunari-collection-overlay__close span:last-child {
    transform: rotate(-45deg) !important;
}


/* =========================================================
   LOGO
========================================================= */

html body #lunariCollectionDropdown
.lunari-collection-overlay__logo {

    position: static !important;

    justify-self: center !important;

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

    align-items: center !important;

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

    text-align: center !important;
    text-decoration: none !important;

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

    transform: none !important;
}


html body #lunariCollectionDropdown
.lunari-collection-overlay__logo strong {

    display: block !important;

    margin: 0 !important;

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

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

    line-height: .9 !important;

    letter-spacing: .08em !important;

    color: #111 !important;

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

    transform: none !important;
}


html body #lunariCollectionDropdown
.lunari-collection-overlay__logo small {

    display: block !important;

    margin: 8px 0 0 !important;

    font-family:
        "DM Mono",
        monospace !important;

    font-size: 7px !important;

    line-height: 1 !important;

    letter-spacing: .34em !important;

    color: #777 !important;

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

    transform: none !important;
}


/* =========================================================
   MENU
========================================================= */

html body #lunariCollectionDropdown
.lunari-collection-overlay__menu {

    position: static !important;

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

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

    height: auto !important;

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

    background: #fff !important;

    transform: none !important;

    overflow: visible !important;
}


/* ---------- EACH CATEGORY ---------- */

html body #lunariCollectionDropdown
.lunari-collection-overlay__menu > a {

    position: relative !important;

    top: auto !important;
    left: auto !important;

    display: flex !important;

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

    width: 100% !important;

    min-height: 88px !important;

    margin: 0 !important;

    padding:
        0
        clamp(25px, 4vw, 65px) !important;

    background: #ffffff !important;

    border: 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;

    text-decoration: none !important;

    color: #111 !important;

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

    transform: none !important;

    overflow: hidden !important;

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


/* ---------- CATEGORY NAME ---------- */

html body #lunariCollectionDropdown
.lunari-collection-overlay__menu > a > span {

    position: static !important;

    display: block !important;

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

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

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

    font-size:
        clamp(28px, 3vw, 42px) !important;

    font-weight: 400 !important;

    line-height: 1 !important;

    letter-spacing: 0 !important;

    color: #111 !important;

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

    transform: none !important;

    clip: auto !important;
    clip-path: none !important;

    white-space: normal !important;
}


/* ---------- ARROW ---------- */

html body #lunariCollectionDropdown
.lunari-collection-overlay__menu > a > i {

    position: static !important;

    display: block !important;

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

    font-family: Arial, sans-serif !important;

    font-size: 25px !important;
    font-weight: 300 !important;

    font-style: normal !important;

    color: #111 !important;

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

    transform: none !important;

    transition:
        transform .3s ease,
        color .3s ease !important;
}


/* =========================================================
   HOVER
========================================================= */

html body #lunariCollectionDropdown
.lunari-collection-overlay__menu > a:hover {

    padding-left:
        clamp(38px, 5vw, 85px) !important;

    background:
        linear-gradient(
            90deg,
            rgba(139,168,199,.15) 0%,
            rgba(139,168,199,.05) 38%,
            rgba(255,255,255,1) 75%
        ) !important;

    color: #547b9d !important;
}


html body #lunariCollectionDropdown
.lunari-collection-overlay__menu > a:hover > span {

    color: #547b9d !important;
}


html body #lunariCollectionDropdown
.lunari-collection-overlay__menu > a:hover > i {

    color: #7398b9 !important;

    transform:
        translateX(8px) !important;
}


/* =========================================================
   SHOP ALL FOOTER
========================================================= */

html body #lunariCollectionDropdown
.lunari-collection-overlay__bottom {

    position: static !important;

    width: 100% !important;

    margin-top: auto !important;

    padding:
        26px
        clamp(25px, 4vw, 65px) !important;

    background: #f4f7fa !important;

    border: 0 !important;
    border-top: 1px solid #dfdfdf !important;

    transform: none !important;
}


html body #lunariCollectionDropdown
.lunari-collection-overlay__bottom > a {

    display: flex !important;

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

    width: 100% !important;

    color: #111 !important;

    text-decoration: none !important;

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


html body #lunariCollectionDropdown
.lunari-collection-overlay__bottom > a > span {

    position: static !important;

    display: block !important;

    font-family:
        "Inter",
        sans-serif !important;

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

    letter-spacing: .20em !important;

    text-transform: uppercase !important;

    color: #111 !important;

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

    transform: none !important;
}


html body #lunariCollectionDropdown
.lunari-collection-overlay__bottom > a > i {

    position: static !important;

    display: block !important;

    font-style: normal !important;

    font-size: 18px !important;

    color: #7298b9 !important;

    opacity: 1 !important;

    transition: transform .25s ease !important;
}


html body #lunariCollectionDropdown
.lunari-collection-overlay__bottom > a:hover > i {
    transform: translateX(7px) !important;
}


/* =========================================================
   REMOVE ALL OLD MENU ELEMENTS IF ANY SURVIVE
========================================================= */

#lunariCollectionDropdown .lunari-simple-menu__grid,
#lunariCollectionDropdown .lunari-simple-menu__intro,
#lunariCollectionDropdown .lunari-simple-menu__shopall,

#lunariCollectionDropdown .lunari-collection-mega__grid,
#lunariCollectionDropdown .lunari-collection-mega__group,
#lunariCollectionDropdown .lunari-collection-mega__featured,

#lunariCollectionDropdown .lunari-collection-overlay__content,
#lunariCollectionDropdown .lunari-collection-overlay__footer {

    display: none !important;
}


/* =========================================================
   WORDPRESS ADMIN TOOLBAR
========================================================= */

body.admin-bar
#lunariCollectionDropdown.lunari-collection-overlay {

    top: 32px !important;
    bottom: 0 !important;

    height:
        calc(100vh - 32px) !important;
}


body.admin-bar
#lunariCollectionDropdown
.lunari-collection-overlay__panel {

    min-height:
        calc(100vh - 32px) !important;
}


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

@media (max-width: 782px) {

    body.admin-bar
    #lunariCollectionDropdown.lunari-collection-overlay {

        top: 46px !important;

        height:
            calc(100vh - 46px) !important;
    }

}


@media (max-width: 767px) {

    html body #lunariCollectionDropdown
    .lunari-collection-overlay__top {

        height: 74px !important;

        grid-template-columns:
            55px
            1fr
            55px !important;

        padding:
            0
            14px !important;
    }


    html body #lunariCollectionDropdown
    .lunari-collection-overlay__logo strong {

        font-size: 27px !important;
    }


    html body #lunariCollectionDropdown
    .lunari-collection-overlay__menu {

        padding-top: 8px !important;
    }


    html body #lunariCollectionDropdown
    .lunari-collection-overlay__menu > a {

        min-height: 70px !important;

        padding:
            0
            20px !important;
    }


    html body #lunariCollectionDropdown
    .lunari-collection-overlay__menu > a > span {

        font-size: 26px !important;
    }


    html body #lunariCollectionDropdown
    .lunari-collection-overlay__bottom {

        padding:
            22px
            20px !important;
    }

}
/* =========================================================
   LUNARI COLLECTION MENU — HALF SCREEN DRAWER
   Add at very bottom of collection-overlay.css
========================================================= */


/* Keep transparent overlay across screen */
html body #lunariCollectionDropdown.lunari-collection-overlay {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    background: rgba(15, 22, 28, 0.20) !important;

    overflow: hidden !important;
}


/* HALF SCREEN PANEL */
html body #lunariCollectionDropdown
.lunari-collection-overlay__panel {

    width: 50vw !important;
    max-width: 680px !important;
    min-width: 560px !important;

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

    margin: 0 !important;

    background: #ffffff !important;

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

    transform: translateX(-100%) !important;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1) !important;
}


/* Slide in when opened */
html body
#lunariCollectionDropdown.lunari-collection-overlay.is-open
.lunari-collection-overlay__panel {

    transform: translateX(0) !important;
}


/* =========================================================
   MAKE MENU MORE COMPACT
========================================================= */

html body #lunariCollectionDropdown
.lunari-collection-overlay__top {

    height: 88px !important;

    grid-template-columns:
        65px
        1fr
        65px !important;

    padding:
        0
        28px !important;
}


/* Logo */
html body #lunariCollectionDropdown
.lunari-collection-overlay__logo strong {

    font-size: 31px !important;
}


/* Menu area */
html body #lunariCollectionDropdown
.lunari-collection-overlay__menu {

    flex: 1 !important;

    padding:
        18px
        0
        25px !important;
}


/* Individual categories */
html body #lunariCollectionDropdown
.lunari-collection-overlay__menu > a {

    min-height: 82px !important;

    padding:
        0
        44px !important;
}


/* Category names */
html body #lunariCollectionDropdown
.lunari-collection-overlay__menu > a > span {

    font-size:
        clamp(26px, 2.4vw, 35px) !important;
}


/* Hover */
html body #lunariCollectionDropdown
.lunari-collection-overlay__menu > a:hover {

    padding-left:
        58px !important;

    background:
        linear-gradient(
            90deg,
            rgba(139,168,199,.16),
            rgba(139,168,199,.04) 60%,
            #fff
        ) !important;
}


/* Shop all */
html body #lunariCollectionDropdown
.lunari-collection-overlay__bottom {

    padding:
        25px
        44px !important;
}


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

@media (max-width: 1000px) {

    html body #lunariCollectionDropdown
    .lunari-collection-overlay__panel {

        width: 70vw !important;
        max-width: none !important;
        min-width: 0 !important;
    }

}


/* =========================================================
   MOBILE
   Full width is easier to use on phones
========================================================= */

@media (max-width: 700px) {

    html body #lunariCollectionDropdown
    .lunari-collection-overlay__panel {

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


    html body #lunariCollectionDropdown
    .lunari-collection-overlay__menu > a {

        padding:
            0
            24px !important;
    }


    html body #lunariCollectionDropdown
    .lunari-collection-overlay__menu > a:hover {

        padding-left:
            32px !important;
    }

}