.card{ 
    .img-wrap{overflow:hidden; }
}

.icontext{
    display: inline-flex; align-items: center;  vertical-align: middle;
    p{ margin-bottom:0; }
    .text{ width: 100%; line-height:$line-height-sm; color:$dark; }
    .icon{position:relative;   margin-right:10px; flex-shrink:0; flex-grow:0;}
    .title{ display:block; margin-bottom:0;} 
}

.tag{
  display: inline-block; padding:3px 7px; background:#f2f2f2; border:1px solid #eee; border-radius:3px; margin-top:4px; margin-right: 2px; font-size:85%;
}

.item-logo{ margin-bottom:20px; text-align:center;
  img{max-height:65px;}
}

.notify{
  position: absolute;
  top: -4px;  right: -10px;
  display: inline-block;
  padding: .25em .6em;
  font-size: 12px;  line-height: 1;  text-align: center;
  border-radius: 3rem;  color: #fff;  background-color:$red;
}

.price{ font-weight: 600; color:$dark; }
.price-old{color:$text-muted; margin-left:3px; font-size:85%; }

.icon-control{margin-top:5px; float:right; font-size:80%}

.card-header{
    .title{ margin-bottom:0; line-height:1.5}
}

.filter-group{ border-bottom:1px solid $border-color;
  .card-header{border-bottom:0;  }
  &:last-child{border-bottom:0}
}

/* ====================== block ==================== */
.box{
  padding:20px; background:#fff; 
  border-radius:$border-radius; border:1px solid $border-color;
  img{ max-width: 100%;  }
}


/* ================= RATINGS ============== */
.label-rating{margin-left:7px; display:inline-block; vertical-align:middle}


/* rating-list */
.rating-stars{display:inline-block; vertical-align:middle; list-style:none; margin:0; padding:0; position:relative; 
    white-space: nowrap; clear:both;
    i{ font-size:14px; color:#ccc; display:inline;}
    li{display:block;  text-overflow:clip;  white-space:nowrap; z-index:1; }
  
    li.stars-active{z-index:2; position:absolute; top:0; left:0; overflow: hidden;
        i{color:orange;}
    }
}


/* ================= TRACKING ============== */
.tracking-wrap {
    position: relative;
    background-color: #ddd;
    height: 7px;
    display: flex;
    margin-bottom: 60px;
    margin-top: 50px;
    .step {
      flex-grow: 1;
      width: 25%;
      margin-top: -18px;
      text-align: center;
      position: relative; }
    .step::before {
      height: 7px;
      position: absolute;
      content: "";
      width: 100%;
      left: 0;
      top: 18px }
    .icon {
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      position: relative;
      border-radius: 100%;
      background: #ddd; }
    .text {
      display: block; margin-top:7px; 
    }
    .step.active .icon {
      background: $primary;
      color: #fff; }
    .step.active .text {
      font-weight: 400;
      color: #000; }
    .step.active:before {
      background: $primary; 
    }
}