/* ============================================================
   HIDDEN BY DEFAULT
   MOBILE ONLY
============================================================ */

.snmfn{
    display:none;
}



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

@media(max-width:767px){

    .snmfn,
    .snmfn *,
    .snmfn *::before,
    .snmfn *::after{
        box-sizing:border-box;
    }


    .snmfn{

        --snmfn-orange:var(--core-primary,#7B1E3A);
        --snmfn-soft:#FFF4EE;
        --snmfn-text:#1C1C1C;
        --snmfn-muted:#858585;
        --snmfn-border:#ECECEC;

        width:100%;

        display:block;

        position:relative;

        margin:0;

        padding:0;

        background:#FFFFFF;

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

        isolation:isolate;
    }



    /* ========================================================
       CATEGORY PANEL
    ======================================================== */

    .snmfn-category-panel{

        max-height:0;

        overflow:hidden;

        padding:
            0
            16px;

        border-top:
            0 solid
            var(--snmfn-border);

        background:#FFFFFF;

        opacity:0;

        transform:
            translateY(8px);

        transition:
            max-height .32s
                cubic-bezier(
                    .4,
                    0,
                    .2,
                    1
                ),
            opacity .2s ease,
            transform .32s ease,
            padding .32s ease,
            border-width .32s ease;
    }


    .snmfn-category-panel.is-open{

        max-height:700px;

        padding:
            18px
            16px
            16px;

        border-top-width:
            1px;

        opacity:1;

        transform:
            translateY(0);
    }



    /* ========================================================
       CATEGORY HEADER
    ======================================================== */

    .snmfn-category-head{

        margin-bottom:14px;

        display:flex;

        align-items:center;

        justify-content:
            space-between;

        gap:15px;
    }


    .snmfn-category-head strong{

        display:block;

        color:
            var(--snmfn-text);

        font-size:14px;

        line-height:1.25;

        font-weight:600;
    }


    .snmfn-category-head span{

        margin-top:3px;

        display:block;

        color:
            var(--snmfn-muted);

        font-size:12px;
    }


    .snmfn
    .snmfn-category-close,
    .snmfn
    .snmfn-category-close:hover,
    .snmfn
    .snmfn-category-close:focus{

        width:34px !important;

        height:34px !important;

        min-width:34px !important;

        margin:0 !important;

        padding:0 !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        border:0 !important;

        border-radius:50% !important;

        background:
            #F7F7F7 !important;

        color:
            #333333 !important;

        box-shadow:
            none !important;

        outline:
            none !important;

        cursor:pointer !important;
    }


    .snmfn-category-close svg{

        width:17px;

        height:17px;
    }



    /* ========================================================
       CATEGORY GRID
    ======================================================== */

    .snmfn-category-grid{

        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:8px;
    }


    .snmfn-category-item{

        min-height:44px;

        padding:
            10px
            12px;

        display:flex;

        align-items:center;

        justify-content:
            space-between;

        gap:8px;

        border:
            1px solid
            #EEEEEE;

        border-radius:8px;

        background:
            #FAFAFA;

        color:
            #333333 !important;

        text-decoration:
            none !important;

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


    .snmfn-category-item:active{

        border-color:
            var(--snmfn-orange);

        background:
            var(--snmfn-soft);

        color:
            var(--snmfn-orange) !important;
    }


    .snmfn-category-name{

        min-width:0;

        overflow:hidden;

        color:inherit;

        font-size:12px;

        font-weight:500;

        line-height:1.3;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    .snmfn-category-arrow{

        width:18px;

        height:18px;

        margin:0 !important;

        display:flex !important;

        align-items:center;

        justify-content:center;

        color:
            var(--snmfn-orange);
    }


    .snmfn-category-arrow svg{

        width:15px;

        height:15px;
    }



    /* ========================================================
       VIEW ALL
    ======================================================== */

    .snmfn-view-all{

        width:100%;

        min-height:42px;

        margin-top:11px;

        padding:
            9px
            13px;

        display:flex;

        align-items:center;

        justify-content:center;

        gap:6px;

        border:
            1px solid
            rgba(
                242,
                84,
                11,
                .18
            );

        border-radius:8px;

        background:
            var(--snmfn-soft);

        color:
            var(--snmfn-orange) !important;

        font-size:12px;

        font-weight:600;

        text-decoration:
            none !important;
    }


    .snmfn-view-all svg{

        width:15px;

        height:15px;
    }



    /* ========================================================
       NAVIGATION BAR
       NORMAL FLOW - NOT FIXED
    ======================================================== */

    .snmfn-nav{

        width:100%;

        min-height:72px;

        padding:
            7px
            max(
                8px,
                env(safe-area-inset-right)
            )
            calc(
                7px +
                env(safe-area-inset-bottom)
            )
            max(
                8px,
                env(safe-area-inset-left)
            );

        display:grid;

        grid-template-columns:
            repeat(
                5,
                minmax(0,1fr)
            );

        align-items:center;

        border-top:
            1px solid
            var(--snmfn-border);

        background:#FFFFFF;
    }



    /* ========================================================
       NAV ITEM
    ======================================================== */

    .snmfn
    .snmfn-item,
    .snmfn
    .snmfn-item:hover,
    .snmfn
    .snmfn-item:focus{

        position:relative;

        width:100% !important;

        min-width:0 !important;

        min-height:56px !important;

        margin:0 !important;

        padding:
            5px
            2px !important;

        display:flex !important;

        flex-direction:
            column !important;

        align-items:center !important;

        justify-content:center !important;

        gap:4px !important;

        border:0 !important;

        border-radius:9px !important;

        background:
            transparent !important;

        color:
            #747474 !important;

        font-size:inherit !important;

        line-height:1 !important;

        text-decoration:
            none !important;

        box-shadow:
            none !important;

        outline:
            none !important;

        cursor:pointer !important;

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


    .snmfn
    .snmfn-item:active{

        background:
            #FAFAFA !important;
    }


    .snmfn
    .snmfn-item.is-active{

        color:
            var(--snmfn-orange) !important;
    }



    /* ========================================================
       ICON
    ======================================================== */

    .snmfn-icon{

        position:relative;

        width:27px;

        height:27px;

        margin:0 !important;

        display:flex !important;

        align-items:center;

        justify-content:center;

        color:inherit;
    }


    .snmfn-icon svg{

        width:23px;

        height:23px;

        display:block;
    }


    .snmfn-item.is-active
    .snmfn-icon{

        color:
            var(--snmfn-orange);
    }



    /* ========================================================
       ACTIVE MICRO INDICATOR
    ======================================================== */

    .snmfn-item.is-active::before{

        content:"";

        position:absolute;

        top:0;

        left:50%;

        width:18px;

        height:2px;

        border-radius:
            999px;

        background:
            var(--snmfn-orange);

        transform:
            translateX(-50%);
    }



    /* ========================================================
       LABEL
    ======================================================== */

    .snmfn-label{

        width:100%;

        overflow:hidden;

        color:inherit;

        font-size:
            12px;

        line-height:
            1.15;

        font-weight:
            500;

        text-align:center;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }



    /* ========================================================
       COUNT BADGE
    ======================================================== */

    .snmfn-has-count{
        position:relative;
    }


    .snmfn-count{

        position:absolute;

        top:-5px;

        right:-8px;

        min-width:17px;

        height:17px;

        padding:
            0
            4px;

        display:none;

        align-items:center;

        justify-content:center;

        border:
            2px solid
            #FFFFFF;

        border-radius:
            999px;

        background:
            var(--snmfn-orange);

        color:#FFFFFF;

        font-size:
            7px;

        line-height:1;

        font-weight:600;
    }


    .snmfn-count.is-visible{

        display:flex;
    }

}



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

@media(max-width:360px){

    .snmfn-nav{

        padding-left:4px;

        padding-right:4px;
    }


    .snmfn
    .snmfn-item{

        padding-left:
            1px !important;

        padding-right:
            1px !important;
    }


    .snmfn-icon{

        width:25px;

        height:25px;
    }


    .snmfn-icon svg{

        width:21px;

        height:21px;
    }


    .snmfn-label{

        font-size:
            12px;
    }

}

/* Core Design bridge */
.snmfn{--snmfn-orange:var(--core-primary,#6B0A26)!important;--snmfn-orange-hover:var(--core-primary-hover,#4E071C)!important;--snmfn-border:var(--core-border,#E3D8D2)!important;--snmfn-black:var(--core-dark,#121212)!important;--snmfn-muted:var(--core-gray-100,#686868)!important}
.snmfn-item.is-active,.snmfn-item:hover{color:var(--core-primary)!important}.snmfn-count{background:var(--core-primary)!important}.snmfn-category-item:hover{border-color:var(--core-rose-gold)!important;background:var(--core-accent)!important}