/* Техно-Гранд: свои стили поверх темы ReMarket.
   Подключается в common/header.twig после стилей темы, с ?v=ДАТА — при каждой правке менять v,
   иначе браузеры до 24 дней держат старую версию (Cache-Control: max-age=2073600). */

/* Мессенджеры в шапке: Telegram, MAX, WhatsApp (на узких экранах — мельче, чтобы не залезать на корзину) */
a.tg-msg-header img{ width: 26px; height: 26px; margin-left: 10px; display: block; }
@media (max-width: 1699px) {
a.telegram-header img{ width: 22px; margin-left: 8px; }
a.tg-msg-header img{ width: 22px; height: 22px; margin-left: 6px; }
}
@media (max-width: 1199px) {
.rm-header-phones-icon{ display: none; }
}
@media (max-width: 1023px) {
a.telegram-header img{ width: 20px; margin-left: 6px; }
a.tg-msg-header img{ width: 20px; height: 20px; margin-left: 4px; }
}
/* Кнопка «наверх» (#back-top) убрана по просьбе заказчика; её показывает скрипт темы, поэтому !important */
#back-top{ display: none !important; }

/* Плавающий виджет мессенджеров (справа внизу): одна кнопка, по нажатию раскрываются Telegram, MAX, WhatsApp */
.tg-chat-widget{ position: fixed; right: 35px; bottom: 58px; z-index: 99; display: flex; flex-direction: column; align-items: center; }
.tg-chat-toggle{ position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: linear-gradient(180deg, #FF8A1F 0%, #F27606 55%, #E06500 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(242,118,6,.35); transition: transform .2s ease, box-shadow .2s ease; }
.tg-chat-toggle:hover{ transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px rgba(242,118,6,.45); }
.tg-chat-toggle:focus{ outline: none; }
.tg-chat-toggle:focus-visible{ outline: 3px solid rgba(242,118,6,.45); outline-offset: 3px; }
.tg-chat-toggle svg{ position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; transition: opacity .2s ease, transform .2s ease; }
.tg-chat-toggle .tg-chat-ico-close{ opacity: 0; transform: rotate(-90deg); }
.tg-chat-widget.is-open .tg-chat-ico-open{ opacity: 0; transform: rotate(90deg); }
.tg-chat-widget.is-open .tg-chat-ico-close{ opacity: 1; transform: none; }
.tg-chat-list{ display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 12px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.tg-chat-widget.is-open .tg-chat-list{ opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.tg-chat-item{ position: relative; display: block; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: transform .15s ease; }
.tg-chat-item:hover{ transform: scale(1.08); }
.tg-chat-item img{ display: block; width: 40px; height: 40px; }
.tg-chat-item.tg-chat-sq{ border-radius: 10px; }
.tg-chat-label{ position: absolute; right: 52px; top: 50%; transform: translateY(-50%); padding: 5px 10px; border-radius: 6px; background: #333; color: #fff; font-size: 13px; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.tg-chat-item:hover .tg-chat-label, .tg-chat-item:focus-visible .tg-chat-label{ opacity: 1; }
/* Телефон и планшет: виджет в углу; на странице товара — над нижней панелью «В корзину» (.rm-product-mobile-fixed, 75 px) */
@media (max-width: 999px) {
.tg-chat-widget{ display: flex; right: 16px; bottom: 20px; }
body:has(.rm-product-mobile-fixed) .tg-chat-widget{ bottom: 92px; }
.tg-chat-toggle{ width: 48px; height: 48px; }
.tg-chat-label{ display: none; }
}