.cj-shop-section{
    .cj-shop-layout{
        display: grid;
        grid-template-columns: 1fr 5fr;
        gap: 1.25rem;
    }

    .cj-shop-sidebar{
        height: calc(100vh - 125px);
        background: #fff;
        border-radius: 8px;
        border: 1px solid #ddd;
        overflow: auto;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;
        position: sticky;
        top: 125px;
    }

    .cj-sidebar-title{
        padding: 1rem;
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
    }
    .cj-shop-page-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ddd;
        padding:  10px  1rem;
        border-radius: 10px;
        margin: 0 10px 30px;
        gap: 15px;
        flex-wrap: wrap;

        .select-category-title{
            font-size: 20px;
            font-weight: 600;
            color: #222;
        }

        select{
            padding: 15px 20px;
            cursor: pointer;
            color: #222;
            font-weight: 500;
            border-radius: 10px;
            font-size: 18px;
        }

    }

    .cj-category-list{
        padding: 0;
        list-style: none;
        margin: 0;
        li{
            a{
                padding: 1rem 1.25rem;
                border-top: 1px solid #ddd;
                color: #222;
                font-size: 18px;
                font-weight: 500;
                display: block;
                &:hover{
                    background: #222F3D;
                    color: #febd69;
                }

                &.active{
                    background: #222F3D;
                    color: #febd69;
                }
            }
        }
    }

    .base-shop-top-row{
        display: none;
    }
}

.cj-products-loading {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 20px;
}

.cj-product-skeleton {
    height: 300px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


@media only screen and (max-width: 1250px) {
    .cj-shop-section {
        .cj-shop-layout {
            grid-template-columns: 2fr 8fr;
        }
    }
}
@media only screen and (max-width: 992px) {
    .cj-shop-section {
        .cj-shop-layout {
            display: block;
        }

        .cj-category-list{
            display: flex;
            border: 1px solid #ddd;
            overflow: scroll;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;
            li{
                a{
                    width: max-content;
                    border-top: none;
                    border-left: 1px solid #ddd;
                }
            }
        }

        .cj-shop-sidebar{
            height: auto;
            border: none;
            margin-bottom: 30px;
            position: inherit;
        }

        .cj-sidebar-title{
            text-align: center;
            font-size: 32px;
        }
    }


}
@media only screen and (max-width: 576px) {
    .cj-shop-section {

    }
}