/* =====================================================================
   [v1710] Мобильная косметика и баннеры (аудит 25.10.2026)
   Отдельный файл, а не правка header-only.css: у того есть сборки .cat/.chk,
   и каждая правка тянет пересборку и сверку. Здесь только перекрытия,
   подключается последним в шапке, поэтому селекторы не длиннее нужного.
   Цвета: --sp-purple, --sp-red, --sp-ink, --sp-line из header-only.css,
   тёмная тема - html.sp-dark.
   ===================================================================== */

/* ---------- Баг 1. Cookie-плашка: пока она открыта, плавающие виджеты прячем ----------
   Раньше кнопку «Принять все» перекрывал кружок новостей Telegram, а «Только
   необходимые» - кнопка чата Jivo (z-index 2147483647, выше любой плашки).
   Класс sp-pol-open ставит скрипт плашки (customer.policy.ocmod.xml) и снимает
   при ответе. Сам чат не выключается - только его кнопка на время выбора. */
html.sp-pol-open jdiv,
html.sp-pol-open #sp-theme-fab,
html.sp-pol-open .sp-tgfab,
html.sp-pol-open .ocf-offcanvas{visibility:hidden !important}

/* ---------- Баг 5. Кружок новостей Telegram ----------
   Было 90 px - больше любой кнопки сайта, закрывал левую колонку товаров.
   56 px на телефоне; при прокрутке вниз уезжает, при прокрутке вверх возвращается
   (класс is-hid ставит маленький скрипт рядом с разметкой в header.tpl). */
.sp-tgfab{transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .25s}
.sp-tgfab.is-hid{transform:translateX(-110%);opacity:0;pointer-events:none}
@media (max-width:767px){
  .sp-tgfab svg{width:56px !important;height:56px !important}
}
@media (prefers-reduced-motion:reduce){.sp-tgfab{transition:none}}

/* ---------- Баг 5. Переключатель темы ----------
   На телефоне он стоял по центру низа экрана и при прокрутке ложился на цены
   и кнопки товаров. Теперь круглая кнопка 44 px справа над кнопкой чата,
   подпись скрыта (остаётся в title). Точка «новое» сохраняется. */
@media (max-width:767px){
  #sp-theme-fab{left:auto !important;right:max(18px, env(safe-area-inset-right, 0px)) !important;bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important;transform:none !important;width:44px;height:44px;padding:0 !important;justify-content:center;border-radius:50%}
  #sp-theme-fab .sp-theme__label{display:none}
  #sp-theme-fab svg{width:18px;height:18px}
  body.configurator-panel #sp-theme-fab{bottom:calc(150px + env(safe-area-inset-bottom, 0px)) !important}
}

/* ---------- Баг 2. Кнопка «Фильтр» ----------
   Ручка выезжающей панели фильтра (ocfilter) торчала слева на высоте 102 px и
   закрывала заголовок страницы (Steam) и левую колонку карточек. Теперь это
   «пилюля» по центру нижнего края; при открытой панели - справа от неё внизу,
   чтобы закрыть тем же нажатием. Панель двигается свойством left (не transform),
   поэтому абсолютная ручка считается от панели: left:100% = левый край экрана. */
@media (max-width:767px){
  .ocf-offcanvas .ocfilter-mobile-handle{top:auto !important;bottom:calc(16px + env(safe-area-inset-bottom, 0px));left:calc(100% + 50vw) !important;transform:translateX(-50%);transition:left .3s}
  .ocf-offcanvas.active .ocfilter-mobile-handle{left:calc(100% + 12px) !important;transform:none}
  .ocfilter-mobile-handle>.btn{flex-direction:row !important;gap:8px !important;height:44px;padding:0 18px !important;border-radius:999px !important;box-shadow:0 10px 24px -8px rgba(91,63,160,.55) !important}
  .ocf-offcanvas .ocfilter-mobile-handle .btn{border-top-left-radius:999px !important}
  .ocfilter-mobile-handle>.btn .fa-filter{font-size:15px !important}
  .ocfilter-mobile-handle>.btn::after{font-size:13px !important;text-transform:capitalize !important;letter-spacing:0 !important}
}

/* ---------- Баг 3. Бейдж корзины ----------
   Число больше 99 показывается как «99+» (13-header-cart.js), поэтому мелкий
   шрифт 7,5 px для длинных чисел больше не нужен: 10 px и читается. */
.sp-cart-badge,.sp-cart-badge.sp-cart-badge-lg{font-size:10px;min-width:18px;height:18px;max-width:none}

/* ---------- Баг 4. Кнопки строки товара ----------
   Сравнение, избранное и корзина были тремя одинаковыми красными квадратами:
   главное действие не выделялось, красный читался как ошибка. Теперь корзина -
   фиолетовая и шире, сравнение и избранное - тихие контурные. */
#content .sp-list-ic{background:transparent !important;border:1.5px solid var(--sp-line, #E4DFF0) !important;color:#8A84A3 !important;box-shadow:none !important}
#content .sp-list-ic:hover,#content .sp-list-ic:focus-visible{border-color:var(--sp-purple, #5B3FA0) !important;color:var(--sp-purple, #5B3FA0) !important}
#content .sp-list-cart{background:var(--sp-purple, #5B3FA0) !important;border-color:var(--sp-purple, #5B3FA0) !important;color:#fff !important;min-width:64px;box-shadow:0 8px 18px -10px rgba(91,63,160,.8) !important}
#content .sp-list-cart:hover{background:#4a3286 !important;border-color:#4a3286 !important}
html.sp-dark #content .sp-list-ic{border-color:#3a3358 !important;color:#a59fbb !important}
html.sp-dark #content .sp-list-ic:hover{border-color:#9B8CF0 !important;color:#9B8CF0 !important}
html.sp-dark #content .sp-list-cart{background:#6d51b8 !important;border-color:#6d51b8 !important}

/* ---------- Плашка «доступно только для зарегистрированных» ----------
   Её видел и вошедший покупатель. Класс sp-reg-note первой плашке модуля 73 даёт
   apply_v1710_db.php; sp-logged ставит шапка - сервером на body и скриптом на html
   (второе переживает кэш страниц, который мог отдать гостевую разметку). */
.sp-logged .sp-reg-note{display:none !important}

/* ---------- Мелкие шрифты на телефоне ----------
   Подписи плиток площадок были 11 px - на телефоне меньше нормы. 12 px - нижняя граница. */
@media (max-width:767px){
  .doplinksyt a,.doplinkstw a,.doplinkskick a,.doplinkstg a,.doplinkschat a,.doplinksvk a,.doplinksinsta a,.doplinkstt a,.doplinksfb a,.doplinkstwitter a{font-size:12px !important}
}

/* ---------- Баннеры чатов и Steam (низ категорий и карточек, ЛК) ----------
   Картинка - фон без текста (нарисованы в стиле слайдшоу главной), текст - HTML,
   поэтому баннер переводится вместе с сайтом и правится без перерисовки.
   ПК: текст слева на затемнении. Телефон: картинка сверху (правая часть кадра,
   где нарисована сцена), текст под ней. */
.sp1710-promo{position:relative;display:block;margin:28px 0 8px;border-radius:18px;overflow:hidden;background:#1a1036;color:#fff !important;text-decoration:none !important;isolation:isolate;box-shadow:0 18px 40px -22px rgba(27,23,48,.6)}
.sp1710-promo-img{display:block;width:100%;height:auto;aspect-ratio:1200/505;object-fit:cover;object-position:right center}
.sp1710-promo-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 0 0 clamp(24px,5vw,56px);width:52%;background:linear-gradient(90deg,rgba(22,12,48,.92) 0%,rgba(22,12,48,.82) 70%,rgba(22,12,48,0) 100%)}
.sp1710-promo-kick{align-self:flex-start;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.14);font:700 12px/1 Rubik,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#E3DBFF}
.sp1710-promo-title{margin:0;font:800 clamp(20px,2.6vw,32px)/1.12 Rubik,sans-serif;color:#fff;text-wrap:balance}
.sp1710-promo-text{margin:0;max-width:440px;font:400 15px/1.5 Rubik,sans-serif;color:#D6CFEE;text-wrap:pretty}
.sp1710-promo-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:46px;margin-top:4px;padding:0 20px;border-radius:12px;background:#E31E2A;color:#fff;font:700 15px/1 Rubik,sans-serif;box-shadow:0 10px 24px -10px rgba(227,30,42,.8);transition:background-color .2s,transform .2s}
.sp1710-promo:hover .sp1710-promo-btn{background:#C8101A;transform:translateY(-1px)}
.sp1710-promo:focus-visible{outline:3px solid #9B8CF0;outline-offset:3px}
.sp1710-promo.is-compact .sp1710-promo-img{aspect-ratio:1200/360}
/* в кабинете C баннер стоит между карточками .lkc-card - отступ как у них (lkc-mt16) */
.sp1710-promo.is-lkc{margin:16px 0 0}
.sp1710-promo.is-compact .sp1710-promo-title{font-size:clamp(18px,2vw,24px)}
.sp1710-promo.is-compact .sp1710-promo-text{font-size:14px}
@media (max-width:991px){.sp1710-promo-body{width:62%}.sp1710-promo-text{font-size:14px}}
@media (max-width:767px){
  .sp1710-promo{margin:20px 0 4px;border-radius:16px}
  .sp1710-promo-img,.sp1710-promo.is-compact .sp1710-promo-img{aspect-ratio:16/9;object-position:82% center}
  .sp1710-promo-body{position:relative;width:auto;padding:16px;gap:8px;background:#1a1036}
  .sp1710-promo-title{font-size:20px}
  .sp1710-promo-btn{height:44px;align-self:stretch;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.sp1710-promo-btn{transition:none}}