Как поправить верстку (стили CSS) только для конкретной страницы

Чтобы применить правки стилей только к конкретному месту, можно делать так:

1. Завернуть контент, внутри которого нужно произвести изменения, в контейнер (div) с классом css, которого еще нет на сайте.
2. Прямо на странице в теге <style></style> разместить необходимые изменения стилей.

Завернуть контент в div

Допустим, на странице подключается компонент:

    <h2>Отзывы</h2>
    <?$APPLICATION->IncludeComponent(
        "bitrix:news.list",
        "review",
        array(
            ...
        )
    );?><br>

Сначала нужно придумать имя класса css. По его названию должно быть понятно, что это 1) класс специально для данного проекта, 2) класс для локальных правок на странице 3) класс для какой страницы. И это название должно быть таким, чтобы оно не пересеклось с названиями таких же классов, придуманными вами (или кем-то) для других страниц.

1. Чтобы указать проект, можно придумать аббревиатуру из 3 символов, согласующуюся с именем проекта. Например, если мы разрабатываем сайт microsoft.com, то можно сократить это до msf
2. Чтобы указать, что это класс для локальных правок на страницах, можно к этой аббревиатуре дописать слово page через дефис, получится msf-page.
3. Ну и чтобы конкретизировать страницу, к которой это применяется, можно добавить еще какое-то слово, которое ее описывает, например msf-page-faq или msf-page-catalogDetail и т. д.

Допустим, мы придумали название класса msf-page-catalogDetail.

Теперь заворачиваем наш компонент в этот div с указанием класса:

    <h2>Отзывы</h2>

    <div class="msf-page-catalogDetail">
    
        <?$APPLICATION->IncludeComponent(
            "bitrix:news.list",
            "review",
            array(
                ...
           )
        );?></br>

    </div>

Вставляем стили

Теперь где-либо на странице, желательно недалеко от этого компонента, или просто в самом начале страницы, размещаем тег <style>, в котором размещаем наши стили. Обязательно ограничиваем все стили нашим классом:

<style>
/* отступ списков */
.msf-page-catalogDetail ul {
    padding-left: 40px;
}

/* фон кнопок */
.msf-page-catalogDetail button {
    background-color: #da7d33;
}
</style>

Иногда нужно еще более точно указать элемент, для которого должны применяться стили, например, не для всех кнопок в детальной карточке каталога, а только для кнопок "В корзину". Да не для любой кнопки "В корзину", а только для той, что находится в основном блоке карточки товара (где его фотка, наличие, рейтинг, цена и пр.), при этом чтобы у "Сопутствующих товаров" кнопки остались старые.

Тогда можно так и указать: смотрим, в блоках с какими классами находится наша кнопка и ограничиваем применение только ими. Главное - все равно не забыть ограничить сверху нашим классом msf-page-catalogDetail.

/* фон кнопок "В корзину" в основном блоке детальной карточки товара */
.msf-page-catalogDetail .item_main_info .right_info .buy_block .button_block .to-cart {
    background-color: #da7d33;}



Если действовать таким образом, то изменения стилей коснутся только конкретных мест, в которых вы хотите их применить, и не сломают верстку в других местах.