/* IF CARD IS LINKED */
a[class*='card']{
    color:initial;
    &:hover{
        .title{ color:$primary; }
    }
}


/* BASE STYLE FOR PRODUCT ITEM */
[class*='card-product']{

    a.title{color:$dark; display: block;
        &:hover{ color:$primary; }
    }

    .badge{  top: 10px; left: 10px; position: absolute;  }

    p{margin-bottom: 0;}
    .img-wrap{
        overflow:hidden; position:relative;
        img{ height:100%; max-width:100%; width:auto; display:inline-block; object-fit:scale-down;} /*object-fit:cover*/
    }
}

/* GRID STYLE PRODUCT ITEM */
.card-product-grid{ margin-bottom:20px;
    .img-wrap{ border-radius:$border-radius-sm $border-radius-sm 0 0; height:220px; }

    .info-wrap{ overflow:hidden;  padding:18px 20px; }
    .bottom-wrap{padding:18px; border-top:1px solid $border-color;}

    .topbar{
        position:absolute; top:0; width: 100%; z-index: 10; left: 0; text-align:initial;
        padding:10px 15px;
        a{ color:#ccc; 
            &:hover{ color: $primary }
        }
    }
    .fix-height{ height:80px; overflow:hidden; }
    .btn-overlay { 
        transition:.5s;  opacity:0;
        left: 0;  bottom: 0;
        color: #fff;   width: 100%;   padding: 5px 0; text-align: center;
        position: absolute; 
        background: rgba(0,0,0,0.5);
    }
    &:hover .btn-overlay{ opacity:1;}
    &:hover{box-shadow:0 4px 15px rgba(#999, .3); transition:.3s}
}

.item-slide .card-product-grid{ margin-bottom:0; }

/* LARGE LIST STYLE PRODUCT ITEM */
.card-product-list{ margin-bottom:20px; 
    .img-wrap{ height:220px; border-radius:$border-radius 0 0 $border-radius; }
    .info-main{ padding:1.5rem 1rem}
    .info-aside{ padding:1.5rem 1rem; border-left:1px solid $border-color; height: 100%  }
}


.card-sm{
    .img-wrap{ height: 160px; }
}

.card-lg{
    .img-wrap{ height:280px; }
}



.card-banner{display:flex; position:relative; overflow:hidden;  
    background-color:#fff; background-size: cover; background-position:center center;  border-radius:$border-radius;
    .card-body{background-size: cover; position:relative; z-index:10}
    
    .caption{ background-color:rgba(#000, .65); z-index:10;  padding:1.25rem; color:#fff;    }
    .caption.bottom{ bottom:0; left:0;  position:absolute;  width:100%; }
    .caption.top{ top:0; left:0; position:absolute;  width:100%; }
   
    .caption.left{ top:0; left:0; bottom:0; position:absolute;}

    .text-bottom{ position:absolute; left:0; bottom:0; left:0; z-index:10; width:100%; 
        padding:7px 20px; padding-top:30px;  border-radius:0 0 $border-radius $border-radius;
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
        color: #fff;
    }
    
    .img-bg{
        position: absolute; right:0; bottom:0;
        mix-blend-mode: multiply; max-width:100%;
    }
}