Styling a single word in a product page title

Hello, I am building a plant reference website that will have the botanical names of plants as the product titles in a store format. Botanical names are bit unique in that one or two of the words in the title are italicized (but not all). I am struggling to style single words for the product titles. I added the wonderful code from sf.digital to split the title into 2 lines so that I may also list the common name on the second line. Although styling is working, it's not carrying through to every section, and I would like more individual control over each section. For example, italicizing words is working in the summary pages and individual product pages, but not in the related products section. Another example, I would like the botanical name in bold on the summary pages, but not on the individual product page. Does anyone have a solution to control the text characteristics of each area individually where product titles appear (summary page, individual product page, related products, and summary blocks)? Thanks very much for your help. My website is at: https://www.northwestblooms.com/ and here is an example where part of the individual product title is italicized and then titles in related products are not: https://www.northwestblooms.com/shrubs/p/arbutus-unedo-compacta. 

@jackieKS Hi! You can add this code in Website > Pages > Website Tools > Code Injection > Header to italicize words in the related products section:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const productItems = document.querySelectorAll('.ProductItem-relatedProducts .grid-item .grid-title .sf-pre-title');

    productItems.forEach(item => {
        let text = item.textContent.trim();

        text = text.replace(/[‘’]/g, "'");

        let quoteMatch = text.match(/'[^']*'$/);
        if (quoteMatch) {
            let quotedPart = quoteMatch[0];
            let beforeQuote = text.replace(quotedPart, '').trim();
            
            let xMatch = beforeQuote.match(/ x /);
            if (xMatch) {
                let beforeX = beforeQuote.split(' x ')[0];
                let afterX = beforeQuote.split(' x ')[1];
                item.innerHTML = `<i>${beforeX.trim()}</i> x <i>${afterX.trim()}</i> ${quotedPart}`;
            } else {
                item.innerHTML = `<i>${beforeQuote.trim()}</i> ${quotedPart}`;
            }
        } else {
            let xMatch = text.match(/ x /);
            if (xMatch) {
                let beforeX = text.split(' x ')[0];
                let afterX = text.split(' x ')[1];
                item.innerHTML = `<i>${beforeX.trim()}</i> x <i>${afterX.trim()}</i>`;
            } else {
                item.innerHTML = `<i>${text}</i>`;
            }
        }
    });
});
</script>

Let me know how it goes. Thanks!

@jackieKS To display the botanical name in bold on summary pages, but not on individual product pages, you can add this code in Website > Pages > Website Tools > Custom CSS

.products.collection-content-wrapper .sf-pre-title {
    font-weight: bold !important;
}

#pdp .sf-pre-title {
    font-weight: normal !important;
}

#pdp .ProductItem-relatedProducts .sf-pre-title {
   font-weight: bold !important;
}

Hello - thanks so much for getting back to me. The css worked on removing bold from the individual product title. But unfortunately, it also removed bold from the summary pages and related products and I wanted those to remain bold. The javascript didn't work. I'm wondering if the script didn't work because I am using <i>, </i> instead of <em>. I had originally used <em>, but found that the tag didn't italicize the individual product title. Using <i> did work. I'm not sure why - a lot of this code is a mystery to me and I feel like this styling is a bit of a whack-a-mole. You fix it in one area, but then it changes it in another area that you don't want changed. Is there a way to use css to style each of those areas individually where the product title appears? 

@jackieKS I updated the script with <i></i> tag. it worked when I tested the code in browser with both <em> </em> and <i> </i>. Can you try the updated code from my previous comment?

Also, I wasn't sure which pages you were referring to as summary pages. For instance, is this a summary page https://www.northwestblooms.com/shrubs ?

I'm sorry, it's still not working. 😞  I'm putting it into the code injection header. Do you think I might have some other javascript or css that is preventing yours from working? Yes - that is an example of the summary page. Thank you.

@jackieKS If you've added other scripts related to italicizing words in the Footer sections, then please try to add the code in Code Injection > Footer Section. Try adding the code at the end of all the code you've in the Footer section. 

@jackieKS I also updated the code in my previous comment to display the botanical name in bold on the summary pages and in the related products section, but not in the titles of individual product pages.

I'm so sorry, it's still not working. Is there anything you think I should try?