/*====================================================
#
#   Shop Layout
#
====================================================*/
.woocommerce ul.products::before ,.woocommerce ul.products::before {
    display: none;
}
.lsp-shop{

    padding:40px 0;

}

.lsp-shop__container{

    width:min(1440px,calc(100% - 48px));

    margin-inline:auto;

}

.lsp-shop__header{

    margin-bottom:32px;

}

/*====================================================
#
# Categories Top
#
====================================================*/

.lsp-categories{

    margin-bottom:32px;

}

.lsp-categories__grid{

    display:grid;

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

    gap:20px;

}

.lsp-categories__card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px;

    border:1px solid #ececec;

    border-radius:18px;

    background:#fff;

    text-decoration:none;

    color:inherit;

    transition:.25s;

}

.lsp-categories__card:hover{

    transform:translateY(-3px);

    border-color:#d9d9d9;

    box-shadow:0 12px 28px rgba(0,0,0,.05);

}

.lsp-categories__image{

    flex:0 0 72px;

}

.lsp-categories__image img{

    width:72px;

    height:72px;

    object-fit:cover;

    border-radius:14px;

}

.lsp-categories__content{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.lsp-categories__title{

    font-weight:700;

    color:#222;

}

.lsp-categories__count{

    font-size:.85rem;

    color:#888;

}
.lsp-shop__toolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:32px;

    padding:16px 20px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

}

.lsp-toolbar__start{

    display:flex;

    align-items:center;

    gap:18px;

}

.lsp-toolbar__end{

    display:flex;

    align-items:center;

    gap:12px;

}

.lsp-shop__result p{

    margin:0;

    font-size:.92rem;

    color:#777;

}

.lsp-shop__body{

    display:grid;

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

    gap:32px;

    align-items:start;

}

.lsp-shop__sidebar{

    position:sticky;

    top:24px;

    display:flex;

    flex-direction:column;

    gap:24px;

}

.lsp-shop__content{

    min-width:0;

}

.lsp-shop__footer{

    margin-top:48px;

}

/*====================================================
#
# Toolbar
#
====================================================*/

.lsp-filter-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:46px;

    padding-inline:18px;

    border:none;

    border-radius:14px;

    background:#111;

    color:#fff;

    cursor:pointer;

    transition:.25s;

}
.lsp-filter-toggle{

    display:none;

}
.lsp-filter-toggle:hover{

    opacity:.92;

}

.lsp-filter-toggle svg{

    width:18px;

    height:18px;

}

/*====================================================
#
# Sorting
#
====================================================*/

.lsp-sorting{

    display:flex;

    align-items:center;

    gap:10px;

    overflow-x:auto;

    scrollbar-width:none;

}

.lsp-sorting::-webkit-scrollbar{

    display:none;

}

.lsp-sorting__item{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    border-radius:999px;

    border:1px solid #ececec;

    background:#fff;

    color:#444;

    text-decoration:none;

    white-space:nowrap;

    transition:.25s;

}

.lsp-sorting__item:hover{

    border-color:#d7d7d7;

    background:#fafafa;

}

.lsp-sorting__item.is-active{

    background:#111;

    color:#fff;

    border-color:#111;

}

.lsp-sorting__icon{

    display:flex;

    align-items:center;

    justify-content:center;

}

.lsp-sorting__icon svg{

    width:18px;

    height:18px;

}

.lsp-sorting__label{

    font-size:.9rem;

    font-weight:500;

}

/*====================================================
#
# Sidebar
#
====================================================*/

.lsp-sidebar{

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    overflow:hidden;

}

.lsp-sidebar__title{

    margin:0;

    padding:18px 20px;

    border-bottom:1px solid #f3f3f3;

    font-size:1rem;

    font-weight:700;

}

.lsp-sidebar__list{

    margin:0;

    padding:10px;

    list-style:none;

}

.lsp-sidebar__item{

    margin:0;

}

.lsp-sidebar__link{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 14px;

    border-radius:12px;

    color:#444;

    text-decoration:none;

    transition:.2s;

}

.lsp-sidebar__link:hover{

    background:#f7f7f7;

}

.lsp-sidebar__item.is-active .lsp-sidebar__link{

    background:#111;

    color:#fff;

}

.lsp-sidebar__count{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:28px;

    height:28px;

    border-radius:999px;

    background:#f1f1f1;

    font-size:.78rem;

}

.lsp-sidebar__item.is-active .lsp-sidebar__count{

    background:rgba(255,255,255,.18);

    color:#fff;

}

/*====================================================
#
# Filter
#
====================================================*/

.lsp-filter{

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    overflow:hidden;

}

.lsp-filter__form{

    padding:20px;

}

.lsp-filter__card{

    margin-bottom:24px;

}

.lsp-filter__card:last-child{

    margin-bottom:0;

}

.lsp-filter__title{

    margin:0 0 14px;

    font-size:.95rem;

    font-weight:700;

}

.lsp-filter__group{

    margin-bottom:12px;

}

.lsp-filter__input{

    width:100%;

    height:46px;

    padding-inline:14px;

    border:1px solid #ddd;

    border-radius:12px;

    background:#fff;

    outline:none;

    transition:.2s;

}

.lsp-filter__input:focus{

    border-color:#111;

}

.lsp-filter__checkbox{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

}

.lsp-filter__checkbox input{

    width:18px;

    height:18px;

}

.lsp-filter__actions{

    margin-top:28px;

}

.lsp-filter__submit{

    width:100%;

    height:46px;

    border:none;

    border-radius:14px;

    background:#111;

    color:#fff;

    cursor:pointer;

    transition:.25s;

}

.lsp-filter__submit:hover{

    opacity:.92;

}
/*====================================================
#
# Products
#
====================================================*/

.lsp-shop__content .products{

    display:grid;

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

    gap:24px;

    margin:0;

    padding:0;

    list-style:none;

}

.lsp-shop__content .products::before,
.lsp-shop__content .products::after{

    display:none;

}

.lsp-shop__content .products .product{

    width:100% !important;

    margin:0 !important;

    float:none !important;

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    overflow:hidden;

    transition:.25s;

}

.lsp-shop__content .products .product:hover{

    border-color:#d8d8d8;

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(0,0,0,.05);

}
.lsp-shop__content .products .product .lsp-product__image{
    width:150px;
    margin: 0 auto;
}
.lsp-shop__content .products .product img{

    display:block;

    width:100%;

    height:auto;

    margin:0;

}

.lsp-shop__content .lsp-product__title{

    padding:10px 18px 10px;

    font-size:14px !important;

    line-height:1.8;

    font-weight:600;

    color:#222;

}

.lsp-shop__content .price{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    padding:0 18px 16px;

    font-size:13px !important;

    font-weight:700;

    color:#111;

}

.lsp-shop__content del{

    color:#999;

    font-size:12px;

}

.lsp-shop__content ins{

    background:none;

    text-decoration:none;

}

.lsp-shop__content .button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:calc(100% - 36px);

    margin:0 18px 18px;

    height:44px;

    border-radius:14px;

    background:#111;

    color:#fff;

    text-decoration:none;

    transition:.25s;

}

.lsp-shop__content .button:hover{

    background:#000;

}

.lsp-shop__content .added_to_cart{

    display:none;

}

/*====================================================
#
# Pagination
#
====================================================*/

.lsp-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

    margin-top:48px;

}

.lsp-pagination__item a,
.lsp-pagination__item span{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:44px;

    height:44px;

    padding-inline:14px;

    border-radius:12px;

    border:1px solid #ececec;

    background:#fff;

    color:#444;

    text-decoration:none;

    transition:.25s;

}

.lsp-pagination__item a:hover{

    background:#f8f8f8;

}

.lsp-pagination__item .current{

    background:#111;

    color:#fff;

    border-color:#111;

}

/*====================================================
#
# Offcanvas
#
====================================================*/

.lsp-offcanvas{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:flex-start;

    visibility:hidden;

    opacity:0;

    transition:.25s;

    z-index:9999;

}

.lsp-offcanvas.is-open{

    visibility:visible;

    opacity:1;

}

.lsp-offcanvas__overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.lsp-offcanvas__panel{

    position:relative;

    width:360px;

    max-width:100%;

    height:100%;

    background:#fff;

    display:flex;

    flex-direction:column;

    transform:translateX(100%);

    transition:.3s;

    overflow:auto;

}

.lsp-offcanvas.is-open .lsp-offcanvas__panel{

    transform:none;

}

.lsp-offcanvas__header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px;

    border-bottom:1px solid #eee;

}

.lsp-offcanvas__title{

    margin:0;

    font-size:1rem;

    font-weight:700;

}

.lsp-offcanvas__close{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#f5f5f5;

    cursor:pointer;

}

.lsp-offcanvas__close svg{

    width:18px;

    height:18px;

}

.lsp-offcanvas__content{

    padding:20px;

}

/*====================================================
#
# Responsive
#
====================================================*/

@media (max-width:1200px){

    .lsp-shop__content .products{

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

    }

}

@media (max-width:992px){

    .lsp-shop{

        padding:24px 0;

    }

    .lsp-shop__container{

        width:min(100%,calc(100% - 32px));

    }
    .lsp-categories__grid{

        display:flex;

        overflow-x:auto;

        gap:14px;

        padding-bottom:6px;

        scrollbar-width:none;

    }

    .lsp-categories__grid::-webkit-scrollbar{

        display:none;

    }

    .lsp-categories__card{

        flex:0 0 260px;

    }
    .lsp-categories__grid{

        scroll-snap-type:x mandatory;

    }

    .lsp-categories__card{

        scroll-snap-align:start;

    }
    .lsp-shop__body{

        display:block;

    }

    .lsp-shop__sidebar{

        display:none;

    }
    .lsp-filter-toggle{

        display:flex;

    }
    .lsp-shop__toolbar{

        flex-wrap:wrap;

        gap:16px;

    }

    .lsp-toolbar__start,
    .lsp-toolbar__end{

        width:100%;

        justify-content:space-between;

    }

    .lsp-shop__content .products{

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

    }
    .lsp-shop__content .products{

        grid-template-columns:1fr;

    }

    .lsp-shop__content .products .product{

        display:flex;

        align-items:stretch;

    }

    .lsp-shop__content .products .product>a{

        display:flex;

        flex:1;

    }

    .lsp-shop__content .woocommerce-LoopProduct-link{

        display:flex;

        width:100%;

    }

    .lsp-shop__content .woocommerce-LoopProduct-link img{

        width:150px;

        min-width:150px;

        max-width:150px;

        height:150px;

        object-fit:contain;

        border-radius:0;

    }

    .lsp-shop__content .woocommerce-loop-product__title{

        padding:16px 16px 8px;

    }

    .lsp-shop__content .price{

        padding:0 16px 16px;

    }
    .lsp-shop__content .products .product{

        display:flex;
        flex-direction:column;

    }

    .lsp-shop__content .products .product .woocommerce-LoopProduct-link{

        display:flex;
        align-items:stretch;
        gap:16px;

    }

    .lsp-shop__content .products .product .woocommerce-LoopProduct-link img{

        width:150px;
        min-width:150px;
        max-width:150px;
        height:150px;

        object-fit:contain;

        margin:0;

        padding:12px;

        border-left:1px solid #f3f3f3;

    }

    .lsp-shop__content .products .product .woocommerce-loop-product__title{

        padding:18px 18px 10px;

    }

    .lsp-shop__content .products .product .price{

        padding:0 18px;

        margin-top:auto;

    }

    .lsp-shop__content .products .product .star-rating{

        margin:0 18px 12px;

    }

    .lsp-shop__content .products .product .button{

        width:calc(100% - 36px);

        margin:18px;

    }


}

@media (max-width:640px){

    .lsp-shop__container{

        width:calc(100% - 20px);

    }

    .lsp-shop__header{

        margin-bottom:20px;

    }

    .lsp-shop__toolbar{

        padding:14px;

        border-radius:14px;

    }

    .lsp-sorting{

        width:100%;

        overflow-x:auto;

    }

    .lsp-sorting__item{

        flex:0 0 auto;

    }

    .lsp-shop__content .products{

        grid-template-columns:1fr;

        gap:18px;

    }

    .lsp-pagination{

        gap:6px;

    }

    .lsp-pagination__item a,
    .lsp-pagination__item span{

        min-width:40px;

        height:40px;

        padding-inline:12px;

    }

    .lsp-offcanvas__panel{

        width:100%;

    }

}


/*======================================
Skeleton Loader
======================================*/

.lsp-loading{

    display:none;

    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));

    gap:20px;

}

.lsp-shop__content.is-loading .lsp-loading{

    display:grid;

}

.lsp-shop__content.is-loading .lsp-products{

    display:none;

}

.lsp-skeleton{

    background:#fff;

    border-radius:18px;

    padding:18px;

    border:1px solid var(--lsp-border);

}

.lsp-skeleton__image{

    width:100%;

    aspect-ratio:1;

    border-radius:14px;

}

.lsp-skeleton__title{

    height:14px;

    margin-top:18px;

    border-radius:6px;

}

.lsp-skeleton__title.short{

    width:60%;

}

.lsp-skeleton__price{

    width:45%;

    height:16px;

    margin-top:18px;

    border-radius:6px;

}

.lsp-skeleton__button{

    width:100%;

    height:42px;

    margin-top:20px;

    border-radius:12px;

}

.lsp-skeleton__image,
.lsp-skeleton__title,
.lsp-skeleton__price,
.lsp-skeleton__button{

    background:linear-gradient(
        90deg,
        #f3f4f6 25%,
        #e8eaed 37%,
        #f3f4f6 63%
    );

    background-size:400% 100%;

    animation:lspSkeleton 1.2s infinite;

}

@keyframes lspSkeleton{

    0%{

        background-position:100% 50%;

    }

    100%{

        background-position:0 50%;

    }

}