// Style Product

/**
* Star ratings
*/
p.stars {
    position: relative;
    font-size: 1em;
    a {
        display: inline-block;
        margin-right: 1em;
        text-indent: -9999px;
        position: relative;
        border-bottom: 0 !important;
        outline: 0;

        &:last-child {
          border-right: 0;
        }

        &.star-1,
        &.star-2,
        &.star-3,
        &.star-4,
        &.star-5 {
          border-right: 1px solid #ccc;

          &:after {
              font-family: "fontawesome";
              text-indent: 0;
              position: absolute;
              top: 0;
              left: 0;
          }

        }

        &.star-1 {
          width: 2em;

          &:after {
            content: "\f006";
            color: #C8C8C8;
          }

          &:hover:after,
          &.active:after {
            content: "\f005";
            color: #F4C100;
          }
        }

        &.star-2 {
          width: 3em;

          &:after {
            content: "\f006\f006";
            color: #C8C8C8;
          }

          &:hover:after,
          &.active:after {
            content: "\f005\f005";
            color: #F4C100;
          }
        }

        &.star-3 {
          width: 4em;

          &:after {
            content: "\f006\f006\f006";
            color: #C8C8C8;
          }

          &:hover:after,
          &.active:after {
            content: "\f005\f005\f005";
            color: #F4C100;
          }
        }

        &.star-4 {
          width: 5em;

          &:after {
            content: "\f006\f006\f006\f006";
            color: #C8C8C8;
          }

          &:hover:after,
          &.active:after {
            content: "\f005\f005\f005\f005";
            color: #F4C100;
          }
        }

        &.star-5 {
          width: 6em;
          border: 0;

          &:after {
            content: "\f006\f006\f006\f006\f006";
            color: #C8C8C8;
          }

          &:hover:after,
          &.active:after {
            content: "\f005\f005\f005\f005\f005";
            color: #F4C100;
          }
        }
    }
}

.rating{
    display: inline-block;
    text-align: center;
}
.star-rating {
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 12px;
    width: 5.4em;
    font-family: 'fontawesome';
    &:before {
        content: "\f005\f005\f005\f005\f005";
        float: left;
        top: 0;
        left: 0;
        position: absolute;
        color: #C8C8C8;
    }

    span {
        overflow: hidden;
        float: left;
        top: 0;
        left: 0;
        position: absolute;
        padding-top: 1.5em;
    }

    span:before {
      content: "\f005\f005\f005\f005\f005";
      top: 0;
      position: absolute;
      left: 0;
      color: #F4C100;
    }
}
.woocommerce-product-rating {
    line-height: 2;
    display: block;
    margin-bottom: 15px;
    .star-rating {
        margin: .8em 5px 0 0;
        float: left;
    }
}
.products {
    .star-rating {
      display: block;
      margin: 0 0 .5em;
      float: none;
    }
}

/**
* Product
*/
.product-block{
    background: #fff;
    display: block;
    position: relative;
    text-align: center;
    border:1px solid #fff ;
    margin-bottom: 30px;

}
/**
* Product affect hover
*/
.product-block{
    @include transition(0.4s);
    border: 1px solid transparent;
    &.border{
        border: $border-color-base;
        &:hover{
            @include transition(0.4s);
            border: 1px solid $theme-color;
        }
    }
    &:hover{
       .price{
           @include transition(0.4s);
           opacity: 0;
           visibility: hidden;
       }
       .button-groups{
           @include transition(0.4s);
           opacity: 1;
           visibility: visible;
           left: 0;
       }
    }
}

.hreview-aggregate {
    .star-rating {
        margin: 10px 0 0 0;
    }
}
/**
* Image product responsive
*/
.product-thumbnail{
    text-align: center;
}
.product-image{
    display: block;
    position: relative;
    .wp-post-image{
//        width: 100%;
    }
    .inner{
        position: relative;
        overflow: hidden;
        display: block;
        text-align: center;
        .wp-post-image,.hover-image{
            display: inline-block;
        }
    }
}
.wp-post-image{
    display: block;
    height: auto;
//    width: 100%;
}
/**
* Caption product image
*/
.caption-image{
    position: relative;
}

/**
* Caption product
*/
.caption{
    position: relative;
    display: block;
    overflow: hidden;
    z-index: 2;
    background:#fff;
    margin-bottom: 10px;
    min-height: 110px;
}
/**
* Name product
*/
.name{
  padding-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  a{
      font-size: 15px;
      color:#555 ;
      &:hover{
          color: $theme-color;
      }
  }
}
/**
* Price product
*/
.grid-price{
    margin-top: 10px;
}
.price{
    @include transition(0.4s);
    visibility: visible;
    opacity: 1;
    font-size: 16px;
    color: #555;
    line-height: 20px;
    padding: 5px;
    @include scale(1);
    ins{
        text-decoration:none;
    }
    del{
        color: #aeafb1;
        font-size: 12px;
    }
}
/**
* Review product
*/
.product-review,.woocommerce-review-link{
    color: $black;
    padding:0 5px;
    @include rtl-border-right($border-color-base);
}

/**
* Add review product
*/
.product-add-review,.woocommerce-write-review-link{
    padding:0 5px;
    color: $black;
    a{
        color: $black;
    }
}
/**
* Button sale
*/
.onsale{
      @include size(40px,40px);
      border-radius: 100%;
      background: $sale;
      position: absolute;
      color: #ffffff;
      z-index: 1;
      font-size: 13px;
      top:5px;
      @include rtl-left(5px);
      text-align: center;
      line-height: 40px;
      font-weight: bold;
      @include rotate(-30deg);

}
/**
* Button hot
*/
.onhot{
    @include size(40px,40px);
    border-radius: 100%;
    background: #F56032;
    position: absolute;
    color: #ffffff;
    z-index: 1;
    font-size: 13px;
    top:-5px;
    @include rtl-right(5px);
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    @include rotate(-30deg);

}
.out-of-stock{
    background: none repeat scroll 0 0 $out-of-stock;
    color: #ffffff;
    font-weight: 600;
    padding: 2px 5px;
    position: absolute;
    top: 0px;
    z-index: 99;
    right:0;
}
/**
* Product button
*/
.caption-product{
    position: relative;
}
.button-groups{
    @include transition(0.4s);
    visibility: hidden;
    opacity: 0;
    bottom: 0px;
    padding: 0 15px;
    position: absolute;
    width: 100%;
    z-index: 999;
    left: -15px;
}
.quantity{
    .qty{
        appearance: textfield;
    }
}