/*=========================================
=            Product Card
=========================================*/

.jc-product-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    background:#F8FAF9;

    border:1px solid #E5E7EB;

    border-radius:20px;

    overflow:hidden;

    transition:all .35s ease;

}

.jc-product-card:hover{

    transform:translateY(-8px);

    border-color:#25B14E;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

/* ==========================================================
   Products Slider
========================================================== */

.jc-products-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.jc-products-slider .swiper-wrapper {
    align-items: stretch;
}

.jc-products-slider .swiper-slide {
    height: auto;
    display: flex;
}

.jc-products-slider .jc-product-card {
    width: 100%;
}

.jc-products-slider .jc-product-card{
    display:flex;
    flex-direction:column;
    width:100%;
}

.jc-products-slider .swiper-button-prev,
.jc-products-slider .swiper-button-next{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.12);
    color:#25b14e;
}

.jc-products-slider .swiper-button-prev::after,
.jc-products-slider .swiper-button-next::after{
    font-size:14px;
    font-weight:700;
}

.swiper-button-next, .swiper-button-prev { 
& ::slotted(svg), & svg {
	height: 70%!important;
	width: 70%!important;
}
}

/*=========================================
=            Badge Product Card
=========================================*/

.jc-product-card__badge{

    position:absolute;

    top:20px;

    left:20px;

    z-index:2;

    padding:6px 14px;

    border-radius:30px;

    background:#25B14E;

    color:#fff;

    font-size:10px;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/*=========================================
=            Product Image Product Card
=========================================*/

.jc-product-card__image{

    display:flex;

    align-items:center;

    justify-content:center;

    aspect-ratio:1 / 1;

    padding:0px;

    background:#fff;

    overflow:hidden;

}

.jc-product-card__image img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:transform .45s ease;

}

.jc-product-card:hover
.jc-product-card__image img{

    transform:scale(1.05);

}


/*=========================================
=            Content Product Card
=========================================*/

.jc-product-card__content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:20px;

}


/*=========================================
=            Brand Product Card
=========================================*/

.jc-product-card__brand{

    margin-bottom:12px;

    color:#6B7280;

    font-size:13px;

    font-weight:600;

    letter-spacing:.06em;

    text-transform:uppercase;

}


/*=========================================
=            Title Product Card
=========================================*/

.jc-product-card__title{

    margin:0;

    font-size:16px!important;

    font-weight:700;

    line-height:1.45;

    min-height: 45px;
	
	text-transform: uppercase;

}

.jc-product-card__title a{

    color:#111827;

    text-decoration:none;

    transition:color .3s ease;

}

.jc-product-card__title a:hover{

    color:#25B14E;

}


/* Clamp 2 lines */

.jc-product-card__title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/*=========================================
=            Description
=========================================*/

.jc-product-card__description{
    margin-top:16px;
    color:#6B7280;
    font-size:15px;
    line-height:1.7;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}


/*=========================================
=            SKU Product Card
=========================================*/

.jc-product-card__sku{
    margin-top:18px;
    color:#6B7280;
    font-size:14px;

}

.jc-product-card__sku span{
    font-weight:600;
    color:#111827;
}


/*=========================================
=            Button Product Card
=========================================*/

.jc-product-card__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 28px;
    color: #25B14E !important;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    font-size: 14px;
}

.jc-product-card__button span{

    transition:transform .3s ease;

}

.jc-product-card__button:hover span{

    transform:translateX(6px);

}


/*=========================================
=            Grid Product Card
=========================================*/

.jc-products-grid{

    display:grid;

    gap:30px;

}

.jc-products-grid.columns-2{

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

}

.jc-products-grid.columns-3{

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

}

.jc-products-grid.columns-4{

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

}


/*=========================================
=            Empty Product Card
=========================================*/

.jc-products-empty{

    padding:80px 30px;

    text-align:center;

    border:1px dashed #D1D5DB;

    border-radius:16px;

    color:#6B7280;

}

/*=========================================
=            Product Price
=========================================*/

.jc-product-card__price{

    display:flex;

    align-items:center;

    gap:10px;

    margin:12px 0 18px;

    flex-wrap:wrap;

}

.jc-product-card__price-sale{

    font-size:22px;

    font-weight:700;

    color:#25b14e;

    line-height:1;

}

.jc-product-card__price-regular{

    font-size:15px;

    color:#9ca3af;

    text-decoration:line-through;

    line-height:1;

}


/*=========================================
=            Tablet Product Card
=========================================*/

@media (max-width:991px){

    .jc-products-grid.columns-4,
    .jc-products-grid.columns-3{

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

    }

}


/*=========================================
=            Mobile Product Card
=========================================*/

@media (max-width:767px){

    .jc-products-grid{

        grid-template-columns:1fr !important;
    }

    .jc-product-card__content{
        padding:25px;

    }

    .jc-product-card__title{
        font-size:14px;
        min-height: 30px;
    }
}