Where do inline stylesheets hide?

[AlvaroB]

Hello everyone!

I'm trying to edit the "Add to wishlist" (♡) button from the classic theme.

Searching in chrome it appears to be modified in the <style> section of the header

Searching through the files it appears to be loaded from stylesheets.tpl:

{foreach $stylesheets.inline as $stylesheet}
  <style>
    {$stylesheet.content}
  </style>
{/foreach}

However, after a lot of research through these forums and google I am not able to understand where does this $stylesheet.content come from.

I think that maybe I could just overwrite it using custom.css. But I want to understand how this website works too.

Thank you.

Edited September 10, 2023 by AlvaroB (see edit history)

[AlvaroB]

I gave up and tried editing said property using custom.css. But as that style comes from <style>, it has priority so I can't modify it using external css files. I have to find where that property hides. Any ideas? I already searched most if not all tpl files.

[AlvaroB]

Ok I finally spent enough hours to find it (spoiler: too many).

This kind of styles are embedded in the .js that governs the modules (it shouldn't be, but it is).

So in my case, I could find it in both 

modules/blockwishlist/public/product.bundle.js

and

modules/blockwishlist/public/button.bundle.js

but depending on what you're looking for, it may be hidden in other .js file.