/* =========================================================
   NIJEE MOBILE CATEGORIES V1
========================================================= */

@media (min-width: 1200px) {

    .nijee-mcat {
        display: none !important;
    }

}


@media (max-width: 1199px) {

    html.nijee-mcat-open,
    html.nijee-mcat-open body {
        overflow: hidden !important;
    }


    .nijee-mcat {
        position: fixed;

        inset: 0;

        z-index: 2500;

        display: flex;

        flex-direction: column;

        background: #ffffff;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateX(100%);

        transition:
            transform .24s ease,
            opacity .2s ease,
            visibility .2s ease;
    }


    .nijee-mcat.is-open {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateX(0);
    }


    .nijee-mcat-topbar {
        min-height: 66px;

        display: grid;

        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto;

        align-items: center;

        gap: 10px;

        padding:
            8px
            14px;

        border-bottom:
            1px solid
            #eeeaf3;

        background: #ffffff;

        box-shadow:
            0
            3px
            14px
            rgba(35, 25, 49, .05);
    }


    .nijee-mcat-back {
        width: 40px;
        height: 40px;

        display: flex;

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

        padding: 0;

        border: 0;

        background: transparent;

        color: #211a34;

        font-size: 21px;
    }


    .nijee-mcat-title {
        color: #1f1a31;

        font-size: 18px;

        font-weight: 800;
    }


    .nijee-mcat-actions {
        display: flex;

        align-items: center;

        gap: 15px;
    }


    .nijee-mcat-actions a {
        position: relative;

        width: 34px;
        height: 38px;

        display: flex;

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

        color: #221b36 !important;

        font-size: 20px;

        text-decoration: none !important;
    }


    .nijee-mcat-cart span {
        position: absolute;

        top: 0;
        right: -3px;

        min-width: 18px;
        height: 18px;

        display: flex;

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

        padding: 0 4px;

        border:
            2px solid
            #ffffff;

        border-radius:
            999px;

        background:
            #ec3b67;

        color:
            #ffffff;

        font-size:
            9px;

        font-weight:
            800;
    }


    .nijee-mcat-layout {
        flex: 1;

        min-height: 0;

        display: grid;

        grid-template-columns:
            31%
            minmax(0, 69%);

        overflow: hidden;
    }


    .nijee-mcat-left {
        min-width: 0;

        overflow-y: auto;

        border-right:
            1px solid
            #eeeaf2;

        background:
            #faf9fc;

        scrollbar-width: none;

        -webkit-overflow-scrolling:
            touch;
    }


    .nijee-mcat-left::-webkit-scrollbar {
        display: none;
    }


    .nijee-mcat-left-item {
        position: relative;

        width: 100%;

        min-height: 84px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 7px;

        padding:
            10px
            7px;

        border: 0;

        border-bottom:
            1px solid
            #eeeaf2;

        background:
            transparent;

        color:
            #4d4759;

        font-size:
            11px;

        font-weight:
            600;

        line-height:
            1.22;

        text-align: center;
    }


    .nijee-mcat-left-item::before {
        content: '';

        position: absolute;

        top: 0;
        bottom: 0;
        left: 0;

        width: 4px;

        border-radius:
            0
            5px
            5px
            0;

        background:
            transparent;
    }


    .nijee-mcat-left-item.is-active {
        background:
            #ffffff;

        color:
            #8b1bd6;

        font-weight:
            800;
    }


    .nijee-mcat-left-item.is-active::before {
        background:
            linear-gradient(
                180deg,
                #771bd1,
                #ec168c
            );
    }


    .nijee-mcat-left-icon {
        width: 38px;
        height: 38px;

        display: flex;

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

        overflow: hidden;

        border-radius:
            50%;

        background:
            #f3edf8;

        color:
            #8a1bd5;

        font-size:
            18px;
    }


    .nijee-mcat-left-icon img {
        width: 100%;
        height: 100%;

        object-fit:
            contain;
    }


    .nijee-mcat-right {
        min-width: 0;

        overflow-y: auto;

        padding:
            18px
            14px
            100px;

        background:
            #ffffff;

        scroll-behavior:
            smooth;

        -webkit-overflow-scrolling:
            touch;
    }


    .nijee-mcat-section {
        scroll-margin-top:
            12px;

        padding-bottom:
            30px;
    }


    .nijee-mcat-kicker {
        margin-bottom:
            5px;

        color:
            #8b18d4;

        font-size:
            11px;

        font-weight:
            800;

        letter-spacing:
            .05em;
    }


    .nijee-mcat-section h2 {
        margin:
            0
            0
            16px;

        color:
            #1c1730;

        font-size:
            20px;

        font-weight:
            800;
    }


    .nijee-mcat-grid {
        display: grid;

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

        gap:
            18px
            10px;
    }


    .nijee-mcat-card {
        min-width: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap:
            8px;

        color:
            #2d273d !important;

        text-align:
            center;

        text-decoration:
            none !important;
    }


    .nijee-mcat-card-image {
        width: 100%;

        aspect-ratio: 1;

        display: flex;

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

        overflow: hidden;

        border:
            1px solid
            #eee7f1;

        border-radius:
            50%;

        background:
            #ffffff;

        color:
            #9121d2;

        font-size:
            24px;
    }


    .nijee-mcat-product-image {
        border-radius:
            14px;

        background:
            #faf8fc;
    }


    .nijee-mcat-card-image img {
        width: 100%;
        height: 100%;

        object-fit:
            contain;
    }


    .nijee-mcat-card strong {
        display:
            -webkit-box;

        overflow:
            hidden;

        color:
            #393246;

        font-size:
            11px;

        font-weight:
            600;

        line-height:
            1.25;

        -webkit-line-clamp:
            2;

        -webkit-box-orient:
            vertical;
    }


    .nijee-mcat-view-all {
        display: inline-flex;

        align-items: center;

        gap: 7px;

        margin-top:
            18px;

        color:
            #8b1bd6 !important;

        font-size:
            12px;

        font-weight:
            700;

        text-decoration:
            none !important;
    }

}

/* =========================================================
   NIJEE MOBILE CATEGORIES V2 — FINAL LOCK
========================================================= */

@media (max-width: 1199px) {

    .nijee-mcat-topbar {
        min-height: 58px !important;
        padding: 6px 12px !important;
        box-shadow: none !important;
    }

    .nijee-mcat-title {
        font-size: 17px !important;
    }

    .nijee-mcat-actions {
        gap: 10px !important;
    }

    .nijee-mcat-actions a {
        width: 32px !important;
        height: 34px !important;
        font-size: 19px !important;
    }

    .nijee-mcat-utility {
        min-height: 44px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 10px;

        padding: 6px 12px;

        border-bottom: 1px solid #eeeaf2;

        background: #ffffff;
    }

    .nijee-mcat-location,
    .nijee-mcat-filter {
        display: inline-flex;
        align-items: center;

        gap: 7px;

        padding: 0;

        border: 0;

        background: transparent;

        color: #2d273d;

        font-size: 11px;

        font-weight: 600;
    }

    .nijee-mcat-location i,
    .nijee-mcat-filter i {
        color: #8b1bd6;
        font-size: 15px;
    }

    .nijee-mcat-location span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .nijee-mcat-location strong {
        color: #8b1bd6;
        font-size: 11px;
    }

    .nijee-mcat-layout {
        grid-template-columns:
            30%
            minmax(0, 70%) !important;
    }

    .nijee-mcat-left-item {
        min-height: 72px !important;

        gap: 5px !important;

        padding:
            8px
            6px !important;

        font-size: 10.5px !important;
    }

    .nijee-mcat-left-icon {
        width: 34px !important;
        height: 34px !important;

        font-size: 16px !important;
    }

    .nijee-mcat-right {
        padding:
            12px
            10px
            90px !important;
    }

    .nijee-mcat-section {
        padding-bottom: 20px !important;
    }

    .nijee-mcat-kicker {
        margin-bottom: 3px !important;

        font-size: 10px !important;
    }

    .nijee-mcat-section h2 {
        margin-bottom: 12px !important;

        font-size: 18px !important;
    }

    .nijee-mcat-grid {
        gap:
            14px
            8px !important;
    }

    .nijee-mcat-card {
        gap: 6px !important;
    }

    .nijee-mcat-card-image {
        border-color: #eee9f3 !important;
    }

    .nijee-mcat-card strong {
        font-size: 10.5px !important;
        line-height: 1.2 !important;
    }

    .nijee-mcat-view-all {
        margin-top: 12px !important;

        font-size: 11px !important;
    }

    .nijee-mcat-left-item.is-active {
        box-shadow:
            inset 0 0 0 1px
            rgba(139, 27, 214, .06);
    }

    .nijee-mcat-left-item.is-active::before {
        width: 5px !important;
    }

}


@media (max-width: 390px) {

    .nijee-mcat-layout {
        grid-template-columns:
            32%
            minmax(0, 68%) !important;
    }

    .nijee-mcat-left-item {
        min-height: 68px !important;
    }

    .nijee-mcat-right {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .nijee-mcat-grid {
        gap:
            12px
            6px !important;
    }

}

/* =========================================================
   NIJEE MOBILE CATEGORIES — 2 COLUMN GRID LOCK
========================================================= */

@media (max-width: 1199px) {

    .nijee-mcat-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            16px
            10px !important;
    }

    .nijee-mcat-card-image {
        width: 100% !important;
        max-width: 135px !important;

        margin:
            0 auto !important;
    }

    .nijee-mcat-card strong {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

}