.f-row--sb {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  margin-bottom: 2rem;
  align-items: center;
}

.f-row {
  display: flex;
  flex-direction: row;
}

.f-row__list {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}

.mtb-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.v-title--h2 {
  &.detail {
    margin: 1rem 0;
    padding: 0.5rem 0;
    font-family: $font-primary;
    font-weight: 700;
    color: $primary;
  }
}
.v-detail {
  &__title {
    font-size: 2.5rem;
    color: $primary;
    padding: 2rem 0;
  }
  &__descripcion {
    padding: 1rem 0;
    p {
      font-family: $font-secondary;
      font-size: 1rem;
      line-height: 2;
    }
  }
  &__price {
    @include gradient-gen($primary);
    // @include boxshadow-md($primary);
    padding: 1rem 2rem;
    border-radius: 8px 8px 0 0;
    color: var(--primary-text);
    font-size: 1.5rem;
    text-align: center;
  }
  &__icons {
    span {
      margin-right: 1rem;
      font-size: 14px;
      font-family: $font-secondary;
      i {
        margin-right: 0.5rem;
        color: $second-color;
      }
    }
  }
  &__destacados {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    // padding: 0.5rem;
  }
  &__icon-box {
    width: calc((100% / 3) - 10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-right: 1px solid lighten($second-color, 70);
    border-bottom: 1px solid lighten($second-color, 70);
    flex-grow: 1;
    // border-radius: 4px;
    line-height: 1.6;
    // margin: 5px;
    // @include boxshadow-md($color-links);
    // @include gradient-gen($primary-text);
    padding: 1rem 0;
    &:nth-child(3),
    &:last-child {
      border-right: 0;
    }
    span {
      font-size: 1.1rem;
      font-family: $font-secondary;
      font-weight: normal;
      // margin: 0.5rem 0;
    }
    i {
      font-size: 1.5rem;
      margin: 1rem 0;
      color: lighten(black, 30);
    }
    b {
      color: lighten(black, 30);
      font-size: 14px;
    }
  }
}

.v-detail {
  &__content {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  &__car {
    @include col(8);
  }
  &__info {
    @include col(4);
    height: 100%;
    position: sticky;
    top: calc(60px + 1rem);
    margin-left: 1rem;
  }
  &__box {
    background-color: white;
    box-shadow: 0 2px 4px rgba(black, 0.2);
    border-radius: 8px;
  }
}

.v-detail {
  &__specifications {
    // font-family: $font-secondary;
    font-size: 1rem;
    // padding: 1rem 2rem;
  }
  &__table {
    margin-top: 1rem;
    // max-height: 500px;
    // overflow-y: auto;
    box-shadow: 0 2px 4px rgba($primary, 0.2);
    table {
      width: 100%;
      border-collapse: collapse;
      font-weight: 400;
    }
  }
}

.table {
  &__head {
    thead {
      text-align: left;
      th {
        background-color: $primary;
        color: white;
        font-weight: bold;
        padding: 1rem;
        // position: sticky;
        // top: 0px;
        &:first-child {
          border-radius: 8px 0 0 0;
        }
        &:last-child {
          border-radius: 0 8px 0 0;
        }
      }
    }
  }
  &__body {
    overflow: hidden;
    // max-height: 500px;
    // height: 600px;
    position: relative;
    tbody {
      tr {
        border-bottom: 1px solid rgba($primary, 0.1);
        cursor: pointer;
        transition: all 0.2s ease-in;
        &:hover {
          background-color: rgba($primary, 0.05);
        }
      }
      td {
        padding: 1rem;
        &:first-child {
          background-color: rgba($primary, 0.05);
          border-right: 1px solid rgba($primary, 0.1);
          font-weight: bold;
          color: $primary;
        }
      }
    }
  }
}

// .ps__thumb-y {
// 	background-color: red;
// }

// .ps__rail-y:hover {
// 	background-color: blue;
// }

.v-detail {
  // margin-top: 1rem;
  margin-bottom: 10%;
  &__similar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
  }
}

@media (max-width: 996px) {
  .f-row {
    flex-direction: column-reverse;
  }
  .v-detail {
    &__car {
      width: 100%;
    }
    &__info {
      margin: 0;
      width: 100%;
      position: static;
    }
    &__price {
      font-size: 1.5rem;
    }
    &__similar {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 760px) {
  .f-row {
    flex-direction: column-reverse;
  }
  .v-detail {
    &__car {
      width: 100%;
    }
    &__info {
      margin: 0;
      width: 100%;
      position: static;
    }
    &__price {
      font-size: 1.5rem;
    }
    &__similar {
      grid-template-columns: 1fr;
    }
    &__icon-box {
      padding: 0.5rem 0;
      span {
        font-size: 14px;
      }
      i {
        font-size: 1.4rem;
        margin: 0.5rem 0;
      }
      b {
        font-size: 12px;
      }
    }
    .table__body {
      font-size: 14px;
    }
  }
}