

/* Start:/local/templates/main/css/product-cta.css?17878196333887*/
/* ============================================================================
   Кнопка «Связаться с нами» на карточке товара — модификатор к .connect-button.

   Задача 4-31-07, уточнение заказчика от 30.07.2026: кнопка должна быть
   ярко-оранжевой, как остальные кнопки сайта.

   Почему не чистый .connect-button. Базовое правило в app.*.css рассчитано
   на тёмную шапку и к её раскладке привязано:

       .connect-button, .connect-button_full {
           background: none; color: #fff; border: 1px solid #fff; ... }
       .connect-button { margin-left: 10px; }

   На белом фоне карточки это белый текст в белой рамке на белом — кнопки
   не видно вовсе, плюс лишний отступ слева из шапки. Ярко-оранжевый вид
   в сборке существует, но заперт в контексте списка каталога:

       .card__item .card__item_btns .connect-button_full {
           border: 1px solid #FF7300; background: #FF7300; }

   Поэтому переиспользуем базовый класс (геометрия, радиус, кегль, hover
   приходят оттуда и будут подхватывать будущие правки оформления), а здесь
   держим только визуальную разницу. Копии базового правила тут нет намеренно:
   дубль разошёлся бы с оригиналом на первой же правке шаблона.

   Цвет #FF7300 взят из кода сайта — из правила .card__item .card__item_btns
   .connect-button_full выше, а не из текста задачи.

   Селектор из двух классов — не для веса ради веса: у .connect-button:hover
   в app.css специфичность (0,2,0), и одиночный .connect-button_product (0,1,0)
   проиграл бы ему борьбу за фон.

   Подключается только на карточке товара, через addExternalCss в шаблоне
   компонента catalog.element/bowa.
   ========================================================================== */

/* margin-left гасим: 10px в базовом правиле — это отступ от соседа в шапке.
   Своего отступа сверху не задаём: подзаголовок .product__desc_about уже
   несёт padding-bottom: 40px, и второй отступ дал бы разрыв в 64px. */
.connect-button.connect-button_product {
    margin-left: 0;
    background: #FF7300;
    border-color: #FF7300;
}

/* Затемнение при наведении — то же, что у кнопки в шапке (#de8348 из общего
   правила .connect-button:hover). Задаём явно: правило приходится перебивать,
   иначе рамка осталась бы оранжевой при затемнённом фоне. */
.connect-button.connect-button_product:hover {
    background: #de8348;
    border-color: #de8348;
}

/* Шаблон глушит фокус глобально — в app.css есть и :focus { outline: 0 },
   и button { outline: none }. Возвращаем видимый фокус для своей кнопки.
   Тёмная обводка, а не оранжевая: на оранжевом фоне оранжевую не видно. */
.connect-button.connect-button_product:focus-visible {
    outline: 3px solid #333;
    outline-offset: 2px;
}

/* End */
/* /local/templates/main/css/product-cta.css?17878196333887 */
