Separate Add to wishlist single product page from category page

Hello.

I added some code into style.css to show “Add to wishlist” depending on display the site is opened at. For example, I want it to show the text on PC display, however I only want the heart icon on mobile. I already did that.

However, I want the text to show up ONLY on single product page, but NOT in the categories page.

This is the code I added:

.woocommerce
  .thunk-product-hover
  a.add_to_cart_button.ajax_add_to_cart::before {
  content: "\f07a";
  font-family: "FontAwesome";
  font-size: 15px;
  color: white;
  position: absolute;
  width: auto;
  height: auto;
  text-align: center;
}

@media screen and (max-width : 1000px) {
    .woocommerce .thunk-product-hover a.add_to_cart_button,
    .woocommerce .thunk-product-hover .thunk-wishlist a.add_to_wishlist,
    .thunk-wishlist .yith-wcwl-wishlistaddedbrowse,
    .thunk-wishlist .yith-wcwl-wishlistexistsbrowse,
    .thunk-compare .compare-button a.compare.button,
    .woocommerce .thunk-product-hover .button.th-button,
    .woocommerce ul.products li.product .button,
    .thunk-product-hover .thunk-quickview a {
        display: block;
        font-size: 0px;
        padding: 0;
        position: relative;
        vertical-align: top;
        height: 35px;
        width: 60%;
        line-height: 35px;
        border-radius: 0;
        border: medium none;
        margin: 0;
        margin-right: 4px;
        float: left;
        letter-spacing: initial;
        color: #000;
        background: #ff0000;
        text-align: center;
        font-weight: normal;
        border-radius: 50px;
        margin: auto;
  }
}

@media screen and (min-width : 1001px) {
    .woocommerce .thunk-product-hover a.add_to_cart_button,
    .woocommerce .thunk-product-hover .thunk-wishlist a.add_to_wishlist,
    .thunk-wishlist .yith-wcwl-wishlistaddedbrowse,
    .thunk-wishlist .yith-wcwl-wishlistexistsbrowse,
    .thunk-compare .compare-button a.compare.button,
    .woocommerce .thunk-product-hover .button.th-button,
    .woocommerce ul.products li.product .button,
    .thunk-product-hover .thunk-quickview a {
        display: block;
        font-size: 0px;
        padding: 0;
        position: relative;
        vertical-align: top;
        height: 35px;
        width: 50%;
        line-height: 35px;
        border-radius: 0;
        border: medium none;
        margin: 0;
        margin-right: 4px;
        float: left;
        letter-spacing: initial;
        color: #000;
        background: #ff0000;
        text-align: center;
        font-weight: normal;
        border-radius: 50px;
        margin: auto;
  }
}

@media screen and (max-width : 1000px) {
  .tinv-wraper.tinv-wishlist {
    font-size: 0;
    margin-top: 7px;
    text-align: center;
    width: 40%;
    margin-left: 20px;
    
  }
}

@media screen and (min-width : 1001px) {
  .tinv-wraper.tinv-wishlist {
    font-size: 15px;
    margin-top: -7px;
  }
}

PC Display Mobile Display

Thank you for your help

The page I need help with: [log in to see the link]