Product name styling (without separating lines)

Hello, hoping someone could help me with a styling problem. I'm selling books in my store and would like to include the Title and Sub-title in the 'product name' field. I've seen the article 'Split product titles onto two lines with Squarespace' and it's styling options. This isn't the approach I'd like to take, I'd like the main title to appear as I currently have it 'normal', and everything after the colon to appear 'italic', but I don't want to force any line breaks. I haven't published yet but I'll attach a screenshot below.

For example:  Letters for the Millennium: Why We Cut Letters in Stone.

Thank you in advance,

John

The amazing @paul2009 at SF.Digital has you covered, I believe.

https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71#:~:text=Squarespace doesn't allow HTML,it appears over two lines.

Thank you, I did try this method, but it requires a line break to alter the second style. I'd like to change the style of the sub-title without introducing a second line if that makes sense...

I believe the code Paul provided covers this.

/* Style examples for Product Titles */
/* Product Title: smaller second line on product detail page */
.ProductItem .ProductItem-details h1.ProductItem-details-title, .products.collection-content-wrapper .grid-main-meta .grid-title {
  font-size: 22px;
  line-height: 1.8em;
}

/* Product Title: larger first line on product detail page */
.ProductItem .ProductItem-details h1.ProductItem-details-title:first-line, .products.collection-content-wrapper .grid-main-meta .grid-title:first-line {
  font-size: calc(2.16vw + 1rem);
}

You should just be able to add your italic code here.

@Lettercutter

Does this help? If not, I actually wrote a plugin a while back that does this that I didn't release. I might be able to dig up and package it so I can put it out there and share.