/**
 * SubliminalMart Mobile Menu
 * File: header/menu/menu.css
 */

:root{
    --sm-menu-gold:#b38b28;
    --sm-menu-black:#111111;
    --sm-menu-muted:#777777;
    --sm-menu-border:#e8e8e8;
}

@media(max-width:768px){

    .sm-mobile-nav-drawer{
        position:fixed!important;
        visibility:hidden!important;
        pointer-events:none!important;
        top:0!important;
        left:0!important;
        bottom:0!important;
        width:min(390px,88vw)!important;
        height:100dvh!important;
        z-index:999991!important;
        display:flex!important;
        flex-direction:column!important;
        overflow:hidden!important;
        background:#fff!important;
        color:var(--sm-menu-black)!important;
        border-right:1px solid #dedede!important;
        transform:translate3d(-105%,0,0)!important;
        will-change:transform;
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
        transition:
            transform .34s cubic-bezier(.22,.8,.24,1),
            visibility 0s linear .34s!important;
        font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,"Segoe UI",Arial,sans-serif!important;
    }

    .sm-mobile-nav-drawer.is-active{
        visibility:visible!important;
        pointer-events:auto!important;
        transform:translate3d(0,0,0)!important;
        transition:
            transform .34s cubic-bezier(.22,.8,.24,1),
            visibility 0s linear 0s!important;
    }

    .sm-mobile-nav-drawer *{
        box-sizing:border-box!important;
    }

    .sm-mobile-menu-head{
        min-height:82px!important;
        flex-shrink:0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        padding:20px!important;
        border-bottom:1px solid #eee!important;
    }

    .sm-mobile-menu-kicker{
        display:block!important;
        color:var(--sm-menu-gold)!important;
        font-size:8px!important;
        line-height:1!important;
        font-weight:800!important;
        letter-spacing:.2em!important;
    }

    .sm-mobile-menu-heading h2{
        margin:6px 0 0!important;
        color:var(--sm-menu-black)!important;
        font-family:Georgia,"Times New Roman",serif!important;
        font-size:26px!important;
        line-height:1!important;
        font-weight:600!important;
        letter-spacing:-.025em!important;
    }

    .sm-mobile-menu-close{
        width:42px!important;
        height:42px!important;
        padding:0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        background:#fff!important;
        border:1px solid #ddd!important;
        border-radius:50%!important;
        color:#111!important;
        cursor:pointer!important;
    }

    .sm-mobile-menu-close svg{
        width:17px!important;
        height:17px!important;
        fill:none!important;
        stroke:currentColor!important;
        stroke-width:1.7!important;
        stroke-linecap:round!important;
    }

    .sm-mobile-menu-content{
        flex:1 1 auto!important;
        min-height:0!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        padding:18px 20px 26px!important;
        scrollbar-width:none!important;
    }

    .sm-mobile-menu-content::-webkit-scrollbar{
        display:none!important;
    }

    .sm-mobile-dashboard{
        position:relative!important;
        min-height:74px!important;
        display:flex!important;
        align-items:center!important;
        gap:13px!important;
        padding:13px!important;
        margin-bottom:24px!important;
        color:#111!important;
        background:#fff!important;
        border:1px solid #cfcfcf!important;
        text-decoration:none!important;
        overflow:hidden!important;
    }

    .sm-mobile-dashboard::before{
        content:""!important;
        position:absolute!important;
        top:0!important;
        left:0!important;
        bottom:0!important;
        width:3px!important;
        background:var(--sm-menu-gold)!important;
    }

    .sm-mobile-dashboard-mark{
        width:42px!important;
        height:42px!important;
        flex:0 0 42px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        color:#111!important;
        border:1px solid #d6d6d6!important;
        background:#fff!important;
    }

    .sm-mobile-dashboard-mark svg{
        width:21px!important;
        height:21px!important;
        fill:none!important;
        stroke:currentColor!important;
        stroke-width:1.45!important;
        stroke-linecap:round!important;
        stroke-linejoin:round!important;
    }

    .sm-mobile-dashboard-copy{
        flex:1!important;
        min-width:0!important;
    }

    .sm-mobile-dashboard-copy strong{
        display:block!important;
        color:#111!important;
        font-size:14px!important;
        line-height:1.1!important;
        font-weight:750!important;
    }

    .sm-mobile-dashboard-copy small{
        display:block!important;
        margin-top:5px!important;
        color:var(--sm-menu-muted)!important;
        font-size:10px!important;
        line-height:1.2!important;
    }

    .sm-mobile-dashboard-arrow{
        width:28px!important;
        height:28px!important;
        flex:0 0 28px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        color:#999!important;
    }

    .sm-mobile-dashboard-arrow svg,
    .sm-mobile-menu-row-arrow svg{
        width:16px!important;
        height:16px!important;
        fill:none!important;
        stroke:currentColor!important;
        stroke-width:1.5!important;
        stroke-linecap:round!important;
        stroke-linejoin:round!important;
    }

    .sm-mobile-menu-section{
        margin:0 0 10px!important;
        color:var(--sm-menu-gold)!important;
        font-size:8px!important;
        line-height:1!important;
        font-weight:800!important;
        letter-spacing:.18em!important;
    }

    .sm-mobile-menu-quick{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
        margin-bottom:24px!important;
    }

    .sm-mobile-menu-quick a{
        min-height:104px!important;
        display:flex!important;
        flex-direction:column!important;
        padding:13px!important;
        color:#111!important;
        background:#fff!important;
        border:1px solid #dedede!important;
        text-decoration:none!important;
    }

    .sm-mobile-menu-quick-icon{
        width:32px!important;
        height:32px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        margin-bottom:13px!important;
        color:#222!important;
    }

    .sm-mobile-menu-quick-icon svg,
    .sm-mobile-menu-row-icon svg{
        width:21px!important;
        height:21px!important;
        fill:none!important;
        stroke:currentColor!important;
        stroke-width:1.5!important;
        stroke-linecap:round!important;
        stroke-linejoin:round!important;
    }

    .sm-mobile-menu-quick strong,
    .sm-mobile-menu-row-copy strong{
        display:block!important;
        color:#111!important;
        font-size:13px!important;
        line-height:1.1!important;
        font-weight:750!important;
    }

    .sm-mobile-menu-quick small{
        display:block!important;
        margin-top:5px!important;
        color:var(--sm-menu-muted)!important;
        font-size:9px!important;
        line-height:1.25!important;
    }

    .sm-mobile-menu-list{
        display:flex!important;
        flex-direction:column!important;
        margin-bottom:24px!important;
        border-top:1px solid #eee!important;
    }

    .sm-mobile-menu-list a{
        min-height:64px!important;
        display:flex!important;
        align-items:center!important;
        gap:11px!important;
        padding:8px 2px!important;
        color:#111!important;
        border-bottom:1px solid #eee!important;
        text-decoration:none!important;
    }

    .sm-mobile-menu-row-icon{
        width:35px!important;
        height:35px!important;
        flex:0 0 35px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        color:#222!important;
    }

    .sm-mobile-menu-row-icon svg{
        width:19px!important;
        height:19px!important;
    }

    .sm-mobile-menu-row-copy{
        flex:1!important;
        min-width:0!important;
    }

    .sm-mobile-menu-row-copy strong{
        font-weight:700!important;
    }

    .sm-mobile-menu-row-copy small{
        display:block!important;
        margin-top:4px!important;
        color:#888!important;
        font-size:9px!important;
        line-height:1.2!important;
    }

    .sm-mobile-menu-row-arrow{
        width:18px!important;
        height:18px!important;
        flex:0 0 18px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        color:#aaa!important;
    }

    .sm-mobile-menu-footer{
        flex-shrink:0!important;
        padding:12px 20px 17px!important;
        border-top:1px solid #eee!important;
        background:#fff!important;
    }

    .sm-mobile-menu-logout{
        min-height:38px!important;
        display:flex!important;
        align-items:center!important;
        gap:9px!important;
        color:#111!important;
        font-size:12px!important;
        font-weight:700!important;
        text-decoration:none!important;
    }

    .sm-mobile-menu-logout svg{
        width:17px!important;
        height:17px!important;
        fill:none!important;
        stroke:currentColor!important;
        stroke-width:1.5!important;
        stroke-linecap:round!important;
        stroke-linejoin:round!important;
    }

    .sm-mobile-menu-footer small{
        display:block!important;
        margin-top:2px!important;
        color:#aaa!important;
        font-size:7px!important;
        line-height:1!important;
        font-weight:800!important;
        letter-spacing:.17em!important;
    }

    .sm-menu-backdrop{
        position:fixed!important;
        inset:0!important;
        z-index:999990!important;
        background:rgba(0,0,0,.25)!important;
        opacity:0!important;
        visibility:hidden!important;
        pointer-events:none!important;
        will-change:opacity;
        transition:
            opacity .28s ease,
            visibility 0s linear .28s!important;
    }

    .sm-menu-backdrop.is-active{
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
        transition:
            opacity .28s ease,
            visibility 0s linear 0s!important;
    }

    .sm-menu-toggle.is-active{
        color:#111!important;
    }

    @media(max-width:360px){

        .sm-mobile-nav-drawer{
            width:92vw!important;
        }

        .sm-mobile-menu-head,
        .sm-mobile-menu-footer{
            padding-left:16px!important;
            padding-right:16px!important;
        }

        .sm-mobile-menu-content{
            padding-left:16px!important;
            padding-right:16px!important;
        }
    }

    @media(prefers-reduced-motion:reduce){

        .sm-mobile-nav-drawer,
        .sm-menu-backdrop{
            transition:none!important;
        }
    }
}

@media(min-width:769px){

    .sm-mobile-nav-drawer{
        display:flex!important;
        visibility:hidden!important;
        pointer-events:none!important;
    }

    .sm-mobile-nav-drawer.is-active{
        display:flex!important;
        visibility:visible!important;
        pointer-events:auto!important;
    }

    .sm-menu-backdrop{
        display:block!important;
        visibility:hidden!important;
        pointer-events:none!important;
        opacity:0!important;
    }

    .sm-menu-backdrop.is-active{
        display:block!important;
        visibility:visible!important;
        pointer-events:auto!important;
        opacity:1!important;
    }
}

@media(max-width:768px){

    html.sm-menu-open,
    body.sm-menu-open{
        overflow:hidden!important;
        overscroll-behavior:none!important;
        touch-action:none!important;
    }

    body.sm-menu-open{
        position:fixed!important;
        width:100%!important;
        left:0!important;
        right:0!important;
    }

    .sm-mobile-nav-drawer.is-active{
        touch-action:auto!important;
    }

    .sm-mobile-menu-content{
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
        touch-action:pan-y!important;
    }

    .sm-mobile-menu-close{
        position:relative!important;
        z-index:100!important;
        pointer-events:auto!important;
        touch-action:manipulation!important;
    }
}