@use '../../utils' as *;

/*----------------------------------------*/
/*  7.24 product css start
/*----------------------------------------*/

.#{$theme-prifix}-product{
  $self: &;
  &-item{
    &:hover{
      #{$self}{
        &-thumb{
          & img{
            @include transform(scale(1.1));
          }
        }
        &-action{
          right: 20px;
          visibility: visible;
          opacity: 1;
        }
        &-add-cart-btn-large-wrapper{
          bottom: 15px;
          visibility: visible;
          opacity: 1;
        }
      }
    }
  }
  &-thumb{
    border-radius: 10px;
    & img{
      transition: all 0.3s 0s ease-out;
      border-radius: 10px;
    }
  }
  &-action{
    position: absolute;
    top: 20px;
    right: 0;
    bottom: auto;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all .4s ease;
    @media #{$xs}{
      top: 30px;
    }
    &-btn{
      position: relative;
      display: inline-block;
      height: 40px;
      width: 40px;
      line-height: 40px;
      background: var(--tp-common-white);
      border: 1px solid #DFE0E1;
      box-shadow: 0px 1px 1px rgba(1, 15, 28, 0.1);
      margin-bottom: 4px;
      border-radius: 50px;
      &:last-child{
        margin-bottom: 0;
      }
      & svg{
        transform: translateY(-2px);
      }
      #{$self}{
        &-tooltip{
          font-weight: 600;
          font-size: 12px;
          color: var(--tp-common-white);
        }
      }

      &:hover{
        color: var(--tp-common-white);
        border-color: var(--tp-common-black);
        background: var(--tp-common-black);
        box-shadow: 0px 1px 1px rgba(1, 15, 28, 0.1);
        #{$self}{
          &-tooltip{
            visibility: visible;
            opacity: 1;
            @include transform(translateX(-8px) translateY(-50%));
          }
        }
      }
    }
  }
  &-tooltip{
    position: absolute;
    top: 50%;
    @include transform(translateY(-50%));
    right: 100%;
    font-weight: 500;
    font-size: 12px;
    color: var(--tp-common-white);
    background-color: var(--tp-common-black);
    display: inline-block;
    width: max-content;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    font-family: var(--tp-ff-dm);
    &::before{
      position: absolute;
      content: '';
      right: -4px;
      top: 50%;
      @include transform(translateY(-50%));
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-left: 8px solid var(--tp-common-black);
      border-bottom: 8px solid transparent;                
    }

    &-right{
      left: 100%;
      right: auto;

      &::before{
        left: -4px;
        right: auto;
        border-left: 0;
        border-right: 8px solid var(--tp-common-black);
      }
    }
  }
  &-add-cart-btn-large{
    font-size: 18px;
    color: var(--tp-common-black);
    background-color: var(--tp-common-white);
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    width: 100%;
    padding: 8px 30px;
    font-family: var(--tp-ff-dm);
    border-radius: 50px;
    width: 90%;
    &-wrapper{
      position: absolute;
      bottom: -40px;
      left: 0;
      right: 0;
      width: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all .4s ease;
      text-align: center;
    }
    & svg,
    & i{
      margin-right: 5px;
    }
    & svg{
      transform: translateY(-2px);
    }
    &:hover{
      color: var(--tp-common-white);
      background-color: var(--tp-theme-secondary);
    }
  }
  &-title{
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 4px;
    font-family: var(--tp-ff-dm);
    & a{
      &:hover{
        color: var(--tp-theme-secondary);
      }
    }
  }
  &-price{
    font-weight: 500;
    font-size: 16px;
    color: var(--tp-common-black);
    font-family: var(--tp-ff-dm);
    &.old-price{
      font-weight: 400;
      font-size: 14px;
      text-decoration-line: line-through;
      color: var(--tp-body-color);
    }
  }
  &-badge{
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    & span{
      display: inline-block;
      padding: 4px 10px;
      text-align: center;
      background-color: #F0A750;
      border-radius: 50px;
      color: var(--tp-common-white);
      font-weight: 500;
      font-size: 13px;
      letter-spacing: -0.02em;
      line-height: 1;
      &.on-sale{
        background: #F03E3E;
      }
    }
  }
  &-hero{
    padding-top: 250px;
    padding-bottom: 155px;
    @media #{$md,$sm,$xs}{
      padding-top: 160px;
      padding-bottom: 110px;
    }
  }
  &-top{
    &-select{
      & .tp-select{
        background-color: var(--tp-common-white);
        border-radius: 5px;
        border: solid 1px var(--tp-border-1);
        font-size: 16px;
        height: 50px;
        line-height: 48px;
        padding-right: 60px;
        font-family: var(--tp-ff-dm);
        &:after{
          color: var(--tp-common-black);
        }
        & .current {
          color: #000;
        }
        & .option{
          color: #000;
        }
      }
    }
  }
  &-details{
    $self: &;
    &-wrapper{
      @media #{$md, $sm, $xs}{
        margin-top: 50px;
      }
    }
    &-sort-desc{
      & p{
        font-size: 15px;
        line-height: 1.7;
        font-family: var(--tp-ff-dm);
        & br{
          @media #{$md,$xs} {
            display: none;
          }
        }
        & span{
          font-weight: 500;
          color: var(--tp-common-black);
        }
      } 
    }
    &-nav-main-thumb{
      position: relative;
      @media #{$sm,$xs} {
        margin-bottom: 20px;
      }
      & img{
        border-radius: 20px;
      }
    }
    &-thumb{
      &-wrapper{
        margin-right: 70px;
        @media #{$lg,$md,$sm,$xs} {
          margin-right: 0;
        }
        & .tab-content{
          margin-right: 24px;
          @media #{$xs} {
            margin-right: 0;
          }
          @media #{$sm} {
            margin-right: 15px;
          }
        }
        & .nav-tab{
          & .nav-links{
            padding: 0;
            width: 100px;
            height: 120px;
            border-radius: 0;
            position: relative;
            transition: .3s;
            border: 1px solid transparent;
            border-radius: 6px;
            &.active{
              border: 1px solid var(--tp-common-black);
            }
            @media #{$sm,$xs}{
              margin-right: 10px;
              margin-bottom: 10px;
            }
            &:not(:last-child){
              margin-bottom: 10px;
            }
            &:hover{
              border-color: var(--tp-common-black);
            }
            & img{
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 6px;
            }
          }
        }
        & nav{
          padding-top: 140px;
          @media #{$x3l,$xxl,$xl,$lg,$md,$sm,$xs} {
            padding-top: 0;
          }
        }
      }
    }
    &-category{
      & span{
        font-size: 15px;
        line-height: 1;
        color: var(--tp-grey-1);
        font-family: var(--tp-ff-dm);
      }
    }
    &-title{
      font-size: 32px;
      font-weight: 600;
      line-height: 1;
      color: var(--tp-common-black);
      margin-bottom: 15px;
      font-family: var(--tp-ff-dm);
    }
    &-stock{
      margin-right: 12px;
      & span{
        font-size: 15px;
        line-height: 1;
        padding: 4px 12px 4px 12px;
        display: inline-block;
        color: var(--tp-common-white);
        background-color: var(--tp-common-black);
        border-radius: 50px;
        font-family: var(--tp-ff-dm);
      }
    }
    &-rating{
      margin-right: 11px;
      @include flexbox();
      align-items: center;
      & span{
        font-size: 12px;
        color: #FFB21D;
        &:not(:last-child){
          margin-right: 3px;
        }
      }
    }
    &-reviews{
      & span{
        font-family: var(--tp-ff-dm);
      }
    }
    &-price{
      font-size: 24px;
      font-weight: 600;
      color: var(--tp-common-black);
      letter-spacing: -0.02em;
      font-family: var(--tp-ff-dm);
      &.new-price{
        color: var(--tp-common-black);
      }
      &.old-price{
        font-weight: 400;
        font-size: 16px;
        color: rgba(77, 61, 48, 0.60);
        text-decoration-line: line-through;
      }
    }
    &-variation{
      margin-bottom: 30px;
      &-title{
        font-size: 15px;
        font-weight: 400;
        color: var(--tp-common-black);
        margin-bottom: 10px;
        font-family: var(--tp-ff-dm);
      }
      &-item{
        &:not(:last-child){
          margin-bottom: 15px;
        }
      }
      &-list{
        & button{
          display: inline-block;
          width: 26px;
          height: 26px;
          border-radius: 50%;
          position: relative;
          @include transition(box-shadow, .2s, linear);
          & span[data-bg-color]{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background-color: var(--tp-common-white);
            border-radius: 50%;
            @include transition(all, .2s, linear);
            @include transform(translate(-50%, -50%));
          }
          & .tp-color-variation-tootltip{
            position: absolute;
            bottom: 100%;
            left: 50%;
            @include transform(translateX(-50%) translateY(2px));
            width: max-content;
            background-color: var(--tp-common-black);
            color: var(--tp-common-white);
            text-align: center;
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
            padding: 4px 6px;
            border-radius: 4px;
            visibility: hidden;
            font-family: var(--tp-ff-dm);
            opacity: 0;
            @include transition-mul((opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24)));
            &::before{
              position: absolute;
              content: "";
              bottom: -6px;
              left: 50%;
              @include transform(translateX(-50%));
              width: 0;
              height: 0;
              border-top: 6px solid var(--tp-common-black);
              border-left: 6px solid transparent;
              border-right: 6px solid transparent;
            }
          }
          &.tp-size-variation-btn{
            width: 40px;
            height: 40px;
            border-radius: 0;
            @include transition(all, .2s, linear);
            border: 1px solid rgba($color: #000000, $alpha: 0.2);
            &:hover,
            &.active{
              box-shadow: none;
              border-color: var(--tp-common-black);
              box-shadow: none;
              color: var(--tp-common-black);
            }
          }
          &:hover,
          &.active{
            box-shadow: 0px 1px 2px rgba(1, 15, 28, 0.2);
            & span[data-bg-color]{
              @include transform(translate(-50%, -50%) scale(.7));
            }
          }
          &:hover{
            & .tp-color-variation-tootltip{
              visibility: visible;
              opacity: 1;
              @include transform(translateX(-50%) translateY(-6px));
            }
          }
        }
      }
    }
    &-action{
      &-title{
        font-size: 16px;
        font-weight: 400;
        color: var(--tp-common-black);
        margin-bottom: 13px;
        font-family: var(--tp-ff-dm);
      }
    }
    &-quantity{
      & .#{$theme-prifix}-product-quantity{
        width: 122px;
        border-radius: 0;
        position: relative;
      }
      & .#{$theme-prifix}-cart{
        &-plus,
        &-minus{
          width: 24px;
          height: 24px;
          line-height: 21px;
          text-align: center;
          border-radius: 50%;
          left: 14px;
          top: 11px;
          cursor: pointer;
          position: absolute;
          display: inline-block;
          @include transition();
          &:hover{
            background-color: var(--tp-common-black);
            color: var(--tp-common-white);
          }
        }
        &-plus{
          left: auto;
          right: 14px;
        }
        &-input[type="text"]{
          height: 46px;
          line-height: 46px;
          padding: 0 45px;
          font-size: 16px;
          background-color: transparent;
          color: var(--tp-common-black);
          border: 1px solid var(--tp-border-1);
          border-radius: 50px;
          text-align: center;
          font-family: var(--tp-ff-dm);
        }
      }
    }
    &-add-to-cart-btn{
      font-size: 15px;
      font-weight: 500;
      text-align: center;
      border-radius: 50px;
      padding: 9px 30px;
      color: var(--tp-common-black);
      border: 1px solid var(--tp-border-1);
      font-family: var(--tp-ff-dm);
      &:hover{
        background-color: var(--tp-common-black);
        border-color: var(--tp-common-black);
        color: var(--tp-common-white);
      }
    }
    &-buy-now-btn{
      display: inline-block;
      font-size: 15px;
      font-weight: 600;
      padding: 10px 30px;
      color: var(--tp-common-white);
      background-color: var(--tp-common-black);
      border: 1px solid transparent;
      font-family: var(--tp-ff-dm);
      border-radius: 50px;
      &:hover{
        color: var(--tp-common-black);
        border-color: var(--tp-border-1);
        background-color: transparent;
      }
    }
    &-action{
      &-wrapper{
        margin-bottom: 17px;
      }
      &-sm{
        padding-bottom: 9px;
        margin-bottom: 25px;
        border-bottom: 1px solid rgba(77, 61, 48, 0.10);
        &-btn{
          font-size: 16px;
          margin-bottom: 10px;
          color: var(--tp-common-black);
          font-family: var(--tp-ff-dm);
          &:not(:last-child){
            margin-right: 10px;
          }
          & svg{
            @extend %svg-2;
          }
          & i,
          & svg{
            margin-right: 2px;
            color: var(--tp-common-black);
          }
          &:hover{
            color: var(--tp-grey-1);
          }
        }
      }
    }
    &-query{
      margin-bottom: 22px;
      &-item{
        &:not(:last-child){
          margin-bottom: 3px;
        }
        & > span{
          font-size: 15px;
          line-height: 1.4;
          margin-right: 6px;
          color: var(--tp-common-black);
          font-family: var(--tp-ff-dm);
        }
        & p{
          font-size: 15px;
          margin-bottom: 0;
          line-height: 1.4;
          font-family: var(--tp-ff-dm);
        }
      }
    }
    &-social{
      margin-bottom: 22px;
      & span{
        font-size: 15px;
        margin-right: 2px;
        color: var(--tp-common-black);
        font-family: var(--tp-ff-dm);
      }
      & a{
        display: inline-block;
        width: 38px;
        height: 38px;
        line-height: 36px;
        text-align: center;
        color: var(--tp-common-black);
        border-radius: 50%;
        border: 1px solid #E6E7E8;
        background: var(--tp-common-white);
        &:hover{
          border-color: var(--tp-common-black);
          background-color: var(--tp-common-black);
          color: var(--tp-common-white);
        }
      }
    }
    &-msg{
      & ul{
        & li{
          font-size: 15px;
          list-style: none;
          padding-left: 25px;
          position: relative;
          color: var(--tp-grey-1);
          font-family: var(--tp-ff-dm);
          &::after{
            position: absolute;
            content: url("../img/product/icon/product-icon.svg");
            top: 4px;
            left: 0;
            width: 18px;
            height: 18px;
            line-height: 16px;
            text-align: center;
            color: var(--tp-common-white);
            @include transition(all, .2s, linear);
          }
        }
      }
    }
    &-payment{
      padding: 18px 30px;
      background: var(--tp-grey-5);
      & p{
        font-size: 16px;
        line-height: 1;
        margin-bottom: 0;
        margin-right: 46px;
        flex: 0 0 auto;
        color: var(--tp-common-black);
        font-family: var(--tp-ff-dm);
        @media #{$lg}{
          margin-right: 25px;
        }
        @media #{$xs}{
          margin-right: 0;
          margin-bottom: 15px;

          & br{
            display: none;
          }
        }
      }
    }
    &-desc{
      &-title{
        font-size: 34px;
        font-weight: 700;
        margin-bottom: 20px;
        font-family: var(--tp-ff-dm);
        @media #{$sm}{
          font-size: 30px;
        }
        @media #{$xs}{
          font-size: 26px;
        }
        &-2{
          font-size: 34px;
          font-weight: 400;
          margin-bottom: 14px;

          @media #{$sm, $xs}{
            font-size: 25px;
          }
        }
      }
      &-content{
        margin-bottom: 25px;
        padding-right: 45px;
        font-family: var(--tp-ff-dm);
        @media #{$xl, $lg, $xs}{
          padding-right: 0;
        }
        @media #{$xs}{
          padding-left: 0;
        }
        & span{
          font-size: 20px;
          color: var(--tp-common-black);
        }
        & p{
          font-size: 17px;
          line-height: 1.8;
          color: #55585B;
          font-family: var(--tp-ff-dm);
        }
      }
      &-thumb{
        @media #{$lg, $md, $sm, $xs}{
          & img{
            max-width: 100%;
          }
        }
      }
      &-list{
        padding-top: 13px;
        & ul{
          & li{
            list-style: none;
            font-size: 16px;
            color: var(--tp-common-black);
            position: relative;
            padding-left: 17px;
            &:not(:last-child){
              margin-bottom: 3px;
            }
            &::after{
              position: absolute;
              content: '';
              left: 0;
              top: 11px;
              width: 4px;
              height: 4px;
              background-color: #A8ACB0;
              border-radius: 50%;
            }
          }
        }
      }
      &-fact{
        &-thumb{
          & img{
            margin-bottom: 16px;
          }
        }
        &-content{
          & span{
            display: inline-block;
            font-size: 50px;
            line-height: 1.2;
            color: var(--tp-common-black);

            @media #{$md}{
              font-size: 35px;
            }
            @media #{$sm}{
              font-size: 30px;
            }
            @media #{$xs}{
              font-size: 25px;
            }
          }
          & p{
            font-size: 22px;
            @media #{$xs}{
              font-size: 20px;
            }
          }
        }
      }
    }
    &-additional-info{
      padding-top: 60px;
      @media #{$xs}{
        overflow-x: scroll;
      }
      $add : &;
      &-title{
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 16px;
        display: none;
      }
      &.tp-table-style-2{
        padding-top: 50px;
        #{$add}-title{
          display: block;
        }
        & table{
          border: 0;
          border-collapse: separate;
          border-spacing: 0 7px;
          & tr{
            border: 0;
            &:not(:last-child){
              border: 0;
              margin-bottom: 6px;
            }

            & td{
              padding: 7px 24px;
              border: 1px solid #E6E7E8;
              &:first-child{
                padding-left: 24px;
                border-right: 0;
              }
              &:last-child{
                padding-left: 34px;
              }
            }
          }
        }
      }
      & table{
        width: 100%;
        border: 1px solid var(--tp-border-1);
        & tr{
          &:not(:last-child){
            border-bottom: 1px solid var(--tp-border-1);
          }
          & td{
            padding: 12px 34px;
            font-family: var(--tp-ff-dm);
            &:first-child{
              width: 306px;
              font-size: 16px;
              background-color: var(--tp-grey-5);
              color: var(--tp-common-black);
            }
            &:last-child{
              font-size: 16px;
              color: var(--tp-text-body);
            }
          }
        }
      }
    }
    &-review{
      &-number{
        border: 1px solid var(--tp-border-1);
        padding: 35px 43px 33px 40px;
        background-color: var(--tp-grey-5);
        font-family: var(--tp-ff-dm);
        @media #{$xs}{
          padding: 35px 25px 33px 25px;
        }
        &-title{
          font-size: 20px;
          font-weight: 500;
          margin-bottom: 14px;
          font-family: var(--tp-ff-dm);
        }
      }
      &-summery{
          margin-bottom: 12px;
        &-value{
          & span{
            font-size: 40px;
            font-weight: 500;
            color: var(--tp-common-black);
            margin-right: 8px;
            font-family: var(--tp-ff-dm);
          }
        }
        &-rating{
          margin-right: 3px;
          & span{
            color: #FFB21D;
          }
          & p{
            margin-left: 4px;
            font-size: 14px;
            margin-bottom: 0;
            font-family: var(--tp-ff-dm);
            font-family: var(--tp-ff-dm);
          }
        }
      }
      &-rating{
        &-item{
          & > span{
            color: #A0A2A4;
            font-size: 15px;
            margin-right: 10px;
            font-family: var(--tp-ff-dm);
          }
        }
        &-bar{
          width: 260px;
          height: 10px;
          position: relative;
          margin-right: 12px;
          background-color: var(--tp-common-white);
          @media #{$xs}{
            width: 130px;
          }
          &-inner{
            height: 100%;
            background-color: #FFB21D;
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        &-percent{
          & span{
            font-size: 14px;
            font-family: var(--tp-ff-dm);
          }
        }
      }
      &-title{
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 22px;
        font-family: var(--tp-ff-dm);
      }
      &-list{
        @media #{$xs}{
          padding-right: 0;
        }
      }
      &-avater{
        &:not(:last-child){
          margin-bottom: 32px;
        }
        &-thumb{
          flex: 0 0 auto;
          & img{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 20px;
          }
        }
        &-rating{
          line-height: 1;
          margin-bottom: 3px;
          & span{
            font-size: 10px;
            margin-right: 2px;
            color: #FFB21D;
            font-family: var(--tp-ff-dm);
          }
        }
        &-title{
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 9px;
          display: inline-block;
          font-family: var(--tp-ff-dm);
        }
        &-meta{
          font-size: 14px;
          position: relative;
          padding-left: 11px;
          margin-left: 3px;
          font-family: var(--tp-ff-dm);
          &::after{
            position: absolute;
            content: '';
            left: 0;
            top: 8px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #A8ACB0;
          }
        }
        &-comment{
          & p{
            font-size: 14px;
            margin-bottom: 0;
            line-height: 1.4;
            font-family: var(--tp-ff-dm);
          }
        }
      }
      &-form{
        @media #{$md, $sm, $xs}{
          margin-top: 50px;
        }
        & > p{
          font-size: 16px;
          margin-bottom: 8px;
          font-family: var(--tp-ff-dm);
        }
        &-title{
          font-size: 24px;
          font-weight: 500;
          margin-bottom: 4px;
          font-family: var(--tp-ff-dm);
        }
        &-rating{
          margin-bottom: 28px;
          & p{
            margin-bottom: 0;
            font-size: 14px;
            margin-right: 8px;
            font-family: var(--tp-ff-dm);
          }
          &-icon{
            & span{
              font-size: 12px;
              color: #FFB21D;
              font-family: var(--tp-ff-dm);
            }
          }
        }
      }
      &-input{
        &-wrapper{
          margin-bottom: 11px;
        }
        &-box{
          position: relative;
          margin-bottom: 29px;
        }
        & label{
          font-size: 16px;
          font-weight: 500;
          color: #111013;
          line-height: 1;
          margin-bottom: 12px;
          font-family: var(--tp-ff-dm);
        }
        & input,
        & textarea{
          border-radius: 0px;
          border-color: var(--tp-border-1);
          background: var(--tp-grey-5);
          font-family: var(--tp-ff-dm);
          color: var(--tp-common-black);
          border-radius: 12px;
          &:focus{
            background: transparent;
            border-color: var(--tp-common-black);
          }
          @include placeholder{
            color: var(--tp-grey-1);
          }
        }
        & textarea{
          resize: none;
          height: 160px;
        }
        &-title{
          & label{
            font-size: 16px;
            font-weight: 500;
            color: var(--tp-common-black);
            line-height: 1;
            margin-bottom: 12px;
            font-family: var(--tp-ff-dm);
          }
        }
      }
      &-remeber{
        & input{
          display: none;
          &:checked{
            & ~ label{
              &::after{
                background-color: var(--tp-common-black);
                border-color: var(--tp-common-black);
              }
              &::before{
                visibility: visible;
                opacity: 1;
              }
            }
          }
        }
  
        & label{
          font-size: 15px;
          color: #55585B;
          position: relative;
          padding-left: 26px;
          z-index: 1;
          font-family: var(--tp-ff-dm);
          &::after{
            position: absolute;
            content: '';
            top: 4px;
            left: 0;
            width: 18px;
            height: 18px;
            line-height: 16px;
            text-align: center;
            border: 1px solid #C3C7C9;
            z-index: -1;
            @include transition(all, .2s);
          }
          &::before{
            position: absolute;
            content: url('../img/product/icon/check.svg');
            top: 4px;
            left: 0;
            width: 18px;
            height: 18px;
            line-height: 16px;
            text-align: center;
            visibility: hidden;
            opacity: 0;
            color: var(--tp-common-white);
            @include transition(all, .2s);
          }
          & a{
            &:hover{
              color: var(--tp-theme-primary);
            }
          }
          &:hover{
            cursor: pointer;
          }
        }
      }
      &-btn{
          font-size: 16px;
          font-weight: 500;
          padding: 9px 45px;
          color: var(--tp-common-white);
          border: 1px solid rgba(1, 15, 28, 0.08);
          background-color: var(--tp-common-black);
          font-family: var(--tp-ff-dm);
          border-radius: 50px;
          &:hover{
            color: var(--tp-common-white);
            background-color: var(--tp-theme-secondary);
          }
      }
    }
    &-bottom{
      border-bottom: 1px solid #E0E2E3;
    }
    &-tab{
      &-nav{
        & .nav-tabs{
          padding-bottom: 12px;
          border-bottom: 1px solid #E0E2E3;
          @media #{$xs} {
            padding-bottom: 0;
          }
          & .nav-link{
            font-size: 20px;
            color: rgba($color: #000, $alpha: 0.6);
            border: none;
            padding: 0;
            padding-left: 9px;
            padding-right: 7px;
            position: relative;
            background-color: transparent;
            font-family: var(--tp-ff-dm);
            &:not(:first-child){
              margin-left: 40px;
            }
            &.active,
            &:hover{
              color: var(--tp-common-black);
              &::after{
                width: 100%;
                left: 0;
                right: auto;
              }
            }
            @media #{$xs} {
              &::after{
                position: absolute;
                content: '';
                left: auto;
                right: 0;
                bottom: -1px;
                width: 0%;
                height: 2px;
                background-color: var(--tp-common-black);
                @include transition(all, .3s, ease-in-out);
              }
            }
          }

          & span#productTabMarker{
            @media #{$xs}{
              display: none !important;
            }
          }
        }
      }
    }
    &-tab-line{
      bottom: 0;
      height: 1px;
      position: absolute;
      background-color: var(--tp-common-black);
      @include transition();
      display: block ;
    }
    &-views{
      margin-bottom: 10px;
      & > span{
        color: var(--tp-common-black);
        font-size: 16px;
        margin-right: 8px;

        & svg{
          @extend %svg-1;
        }
      }
      & p{
        font-size: 16px;
        margin-bottom: 0;
        & span{
          color: var(--tp-common-black);
          font-weight: 500;
        }
      }
    }
    &-stock-bar{
      & p{
        font-size: 15px;
        margin-bottom: 5px;
        & span{
          font-weight: 500;
          color: var(--tp-common-black);
        }
      }
      &-line{
        height: 4px;
        position: relative;
        &-inner{
          position: absolute;
          top: 0;
          left: 0;
          background-color: var(--tp-theme-primary);
          height: 100%;
          display: inline-block;
        }
      }
    }
    &-wishlist{
      &-btn{
        width: 46px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        display: inline-block;
        background-color: var(--tp-common-white);
        box-shadow: 0px 1px 3px rgba(1, 15, 28, 0.1);
        & svg{
          @extend %svg-2;
        }
        &:hover{
          background-color: var(--tp-common-black);
          color: var(--tp-common-white);
        }
      }
    }
  }
}











.tp-pagination{
	& ul{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
		& li{
			display: inline-block;
			&:not(:last-child){
				margin-right: 6px;
			}
			& a,
			& span{
				display: inline-block;
				width: 40px;
				height: 40px;
				line-height: 38px;
				text-align: center;
                border: 1px solid rgba(1, 15, 28, 0.1);
				font-size: 16px;
				font-weight: 500;
				&:hover,
				&.current{
					background: var(--tp-theme-color);
					border-color: var(--tp-theme-color);
					color: var(--tp-white);
				}

				& svg{
					transform: translateY(-2px);
				}
			}
		}
	}
}