.profile {
  &__wrap {
    display: flex;
    justify-content: space-between;
    padding-top: 120px;
    padding-bottom: 120px;
  }
  &__menu {
    width: 300px;
    &__nav {
      display: flex;
      flex-direction: column;
      width: max-content;
      a {
        border-bottom: 1px solid $gray-400;
        padding-left: 4px;
        padding-right: 4px;
        transition: all 0.2s;
        &:hover {
          color: $blue-color;
        }
      }
      .nuxt-link-exact-active {
        font-weight: 700;
        &:hover {
          color: inherit;
        }
      }
    }
  }
  &__details {
    flex-grow: 1;
    padding-left: 4%;
    input {
      max-width: 540px;
    }
    &__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}

.table-orders {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-x: auto;
  &__row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid $gray-400;
    text-align: center;
    width: 100%;
  }
  &__col {
    flex: 1;
    min-width: 100px;
    &:first-child {
      text-align: left;
    }
    &:last-child,
    &:nth-last-child(2) {
      flex: 0.5;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.product-box-gray {
  background-color: $gray-500;
  display: flex;
  align-items: flex-start;
  margin: 0 16px 16px 0;
  padding: 16px;
  .product-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
    padding: 4px;
    margin-right: 8px;
  }
}

.profile__details__top__right {
  display: flex;
  align-items: center;
}

.wishlist__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

@media (max-width: 1200px) {
  .purchase-details__wrap {
    flex-direction: column;
    .width-half {
      width: 100%;
    }
  }
  .wishlist__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1000px) {
  .profile__details__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .profile__details__top__right {
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
  }
}

@media (max-width: 900px) {
  .profile {
    &__wrap {
      flex-direction: column;
      padding-top: 40px;
    }
    &__menu {
      width: 100%;
      &__nav {
        width: 100%;
      }
    }
    &__details {
      padding-left: 0;
      padding-top: 60px;
      &__info {
        padding-bottom: 0;
      }
    }
  }
}

@media (max-width: 800px) {
  .table-orders {
    &__row {
      width: unset;
    }
  }
}

@media (max-width: 500px) {
  .profile {
    &__wrap {
      padding-bottom: 0;
    }
    &__details__addresses {
      flex-direction: column;
    }
  }
}