How to correctly insert third-party CSS into Bitrix?

Question

css

Online store on Bitrix, Aspro. There is synchronization with 1s.
I need to make a banal preview so that the photo pops up when you hover over the link.
We found an example, inserted the following code at the end of styles.css (located in Content-Site Structure-Files and Folders-local-templates-aspro_max-components-bitrix-catalog-mainstyle.css):

.mekina-buleva span{
border-radius: 5px 5px 5px 5px;
visibility: hidden;
position: absolute;
left: 258px;
background: #f1eaea;
box-shadow: -2px 2px 10px -1px #2f2e2e;
border-radius: 5px
width: 18%
z-index: 9999;
}
.mekina-buleva:hover span{
visibility: visible;
}

Well, in the detailed description of the product, the description itself and html:

<a class="mekina-buleva" href="ссылка на страницу">АНКОР ССЫЛКА<span><img class="klass" src="наша ссылка на фото"></span></a>

Everything works great. But after 30 minutes, the detailed description of the product and the html code completely disappear. Or because of synchronization with 1s, or Bitrix itself cuts out. Tried other css examples as well. Neither in any. In Bitrix, it seems that in a special way it is necessary to implement css.

How to paste this code correctly?

Answer 1

Are you editing with aspro styles or in your own file? If in yours, how do you connect?
Probably include styles in the template, which is cached. You need to use the component_epilog.php file