@import "common-includes/functions";
@import "common-includes/variables";
@import "common-includes/mixins";
.imageBox {
    figure {
        a {
        &:not(.no-anim) {
            &:after {
                position: absolute;
                right: 0;
                top: 0;
                left: 0;
                bottom: 0;
                margin: auto;
                width: 100%;
                height: 100%;
                content: '';
                z-index: 96;
                opacity: 0;
                @include transition(all .3s ease-in);  
            }
        }
      }
    }
    .productTitle{
        a{
          color: $body-color; 
          font-weight: $font-weight-normal;
          font-size: 14px;
          line-height: 1.3;  
          display: block;
        }
    }
    .view-section {
      height: 38px; 
      width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      text-align: center;
      opacity: 0; 
      visibility: hidden;
      z-index: 99;
      transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .qkView{
      width: 38px;
      display: inline-block;
      height: 38px;
      vertical-align: middle;
      font-size: 25px;
      line-height: 38px;
      background: rgba(51, 51, 51, 0.52);
      border-radius: 50%;
      margin: auto;
      z-index: 97;
      color: #fff;
      opacity: 0;
      visibility: hidden;
      transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    }
    &:hover {
      box-shadow: 0 0 27px 3px rgba(16, 9, 9, 0.08);
      @include media-breakpoint-down(md) { box-shadow: none; }
       figure a:after { 
            opacity: 1; 
            background: rgba(62, 61, 71, 0.15);
        }
        .view-section:not(.no-anim), .qkView, .more-option{
            opacity: 1;
            visibility: visible;
        }
      .deatils{
        .more-option{
          opacity: 1;
          visibility: visible;
        }
      }
    }
    .price-box{
      font-size: 15px;
        .price {
            color: $gray-800;
            font-weight: $font-weight-bold;
        }
    }
    .more-option{
        opacity: 0;
        visibility: hidden;
        padding: 10px 0;
        @include media-breakpoint-down(md) { opacity: 1; visibility: visible; }
        .btn {
            display: block;
            font-size: 14px;
            &.soldout{
                &:hover{
                    background: transparent;
                    color: $secondary;
                }
            }
        }
    }

    .deatils{
      position: relative;
      .avg {
        height: 15px;
      }
       .more-option{
        padding-top: 5px;
        margin: 0 -16px;
        z-index: 99;
        background: $white;    
        transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
        @include media-breakpoint-up(lg) { box-shadow: 0 4px 7px 0 rgba(16, 9, 9, 0.11); opacity: 0; visibility: hidden; position: absolute;
        bottom: -60px; left: 0; right: 0;z-index: 1000 }

        .AddwishLst{
          font-size: 16px;
            width: 40px;
            line-height: 40px;
            text-align: center;
          a{
            color: $gray-600;line-height: 40px;padding: 0;
          }
          &:hover {
            background: $primary;
            border-color: $primary;
            a{
              color: $white;
            }
          }
        }
        .buynow_link{
          width: calc(100% - 45px);
          font-size: 14px;
        }
       }
    }


}



/*----------------------------------------------- Listing Grid ----------------------------------------------*/
.cateListing{
    li{  
        
        label{
            font-size: rem(13) !important;
            font-weight: 400;
            color: lighten($dark, 28%);
        }
    }
    .deatils{
        position: relative;
        @include media-breakpoint-up(lg) { height: 110px; } 
        .font-small{
          font-size: 13px;
        }
        .discription{
          display: none; 
        }
      &.alg-dta{
        height: 85px;
      }
    }
    &.list-view {
          .imageBox{
              padding: 5px;
              position: relative; 
              img {
                height: 200px;
                margin: 0 auto; 
                display: block;    
              }
              .more-option {
                opacity: 1;
                visibility: visible;
                position: static;
                max-width: 220px;
                box-shadow: none;
              }
          }
          .image-thumb { 
            position: absolute!important;
            width: 262px; 
            min-height: 234px;
            height: 100%;
            margin: -5px -5px 0 -5px;
          }
          .deatils{
                margin-left: 282px;    
                height: 210px;
              .discription{ 
                  display: block;
                  padding-bottom: 10px;
              }
              .dta{
                height: auto;
              }
          }

          .productTitle { 
            height: auto;

            a {
                color: $dark;
                font-weight: $font-weight-bold;
                font-size: 15px;
            }
            .brandkey{
                padding-bottom: 5px;
                display: block;
            }
        }
    }
    
}
/*----------------------------------------------- Listing Grid ----------------------------------------------*/
/*----------------------------------------------- List View ----------------------------------------------*/
.list-view li {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 12px;
    .bx-contr{
        width:100%;
        height:auto;
        padding:12px;
        .imageBox {
            max-height: 186px;
            width: 20%;
            float: left;
            padding: 0;
            .view-section{
                display: none;
            }
        }
        .deatils {
            float: left;
            width:80%;
            padding: 0 0 0 12px;
            a{
                font-size: rem(17);
            }
             .hoverbx a,.closed-img{
                opacity: 1;
                height: 25px;
                width: 100px;
                background: lighten($dark,89%);
                font-size: rem(13);
                color: $dark;
                 text-align: center;
                display: inline-block;
                font-weight: 600;
                padding: 3px 0;    
                 margin-top: 10px;
            }
            .discription{
                display:block;
                font-size: rem(13);
                a{
                    font-size: rem(13);
                    margin-left: 5px;
                }
            }
            .view-section{
                display: block;
            }
        }
        &:hover{
            border: 1px solid $light;
        }
    }
}
/*----------------------------------------------- List View ----------------------------------------------*/