/* =====================================================================
   [v1569] ШАПКА F17 (макет «F17 Финал ★★★», холст «Меню (30)», 14.10.2026)

   Что меняется на ПК (от 768 px), телефон остаётся как был:
   - верхняя полоса: слева язык, валюта, тема; ПО ЦЕНТРУ — промокод;
     справа — реферальная система и избранное. API, «Бонусы», кабинет,
     сравнение и корзина из полосы уходят: API есть в полосе ссылок под
     меню, кабинет и корзина — в строке с логотипом;
   - строка логотипа: логотип, поиск, баланс с «+» (пополнить), кнопка
     кабинета, корзина;
   - большой блок «Сервис работает 24/7» (статусы, поддержка, бонусы) не
     выводится: статусы — в настройках, сбои показывает модуль
     предупреждений (v1568), поддержка — в полосе ссылок.

   ПРОМОКОД ПО ЦЕНТРУ. В F16 он стоял в середине сетки, но левая группа
   была на ~130 px шире правой — визуально съезжал. Здесь он
   позиционируется от середины полосы (left:50% + translate), поэтому стоит
   ровно по центру страницы при любой ширине групп слева и справа.
   Группы не налезают на него: при ширине до 1199 px текст скидки
   прячется, остаётся «Промокод» + код; до 991 px промокод не показывается.

   Стили отдельным файлом, а не в header-only.min.css: тот собирается
   с вариантами cat/chk (cssplit) — правка здесь не требует пересборки.
   ===================================================================== */

:root{--f17-ink:#1B1730;--f17-muted:#6E6A85;--f17-line:#E6E2F0;--f17-card:#fff;--f17-pur:#5B3FA0;--f17-purt:rgba(91,63,160,.10);--f17-hov:#FBFAFE;--f17-sh:0 24px 56px -16px rgba(27,23,48,.24),0 4px 14px rgba(27,23,48,.06)}
html.sp-dark{--f17-ink:#EDEAF7;--f17-muted:#A6A1BF;--f17-line:#363055;--f17-card:#1E1A31;--f17-pur:#B49BF5;--f17-purt:rgba(154,123,234,.18);--f17-hov:#252040;--f17-sh:0 28px 64px -12px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.04)}

/* ---------- верхняя полоса ---------- */
@media (min-width:768px){
  body.sp-f17 #top > .container{position:relative}
  body.sp-f17 #top .sp-tb-left{display:inline-block;margin:0 0 0 6px;padding:0;vertical-align:middle}
  body.sp-f17 #top .sp-tb-left > li{padding:0}
  body.sp-f17 #top-links .sp-top-api,
  body.sp-f17 #top-links .sp-top-bonus,
  body.sp-f17 #top-links .sp-top-acc,
  body.sp-f17 #top-links .sp-top-cart,
  body.sp-f17 #top-links #compare-total,
  body.sp-f17 #top-links .sp-top-theme{display:none !important}
  body.sp-f17 #top-links > ul > li.sp-top-ref{margin-left:auto}
}
.sp-tb-promo{display:none}
@media (min-width:992px){
  body.sp-f17 .sp-tb-promo{display:inline-flex;align-items:center;gap:8px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;height:30px;padding:0 4px 0 12px;border:1px dashed rgba(255,255,255,.55);border-radius:10px;background:rgba(255,255,255,.08);color:#F2EFFC;font:500 12.5px/1 Rubik,sans-serif;white-space:nowrap}
  body.sp-f17 .sp-tb-promo svg{flex:0 0 auto}
  body.sp-f17 .sp-tb-code{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:0;border-radius:7px;background:#fff;color:#B5121C;font:700 12.5px/1 Rubik,sans-serif;letter-spacing:.02em;cursor:pointer}
  body.sp-f17 .sp-tb-code:hover{background:#FFF1F2}
  body.sp-f17 .sp-tb-code.is-copied{background:#E8F7EE;color:#0B6B2F}
  body.sp-f17 .sp-tb-disc{display:none}
}
@media (min-width:1200px){
  body.sp-f17 .sp-tb-disc{display:inline}
}

/* ---------- строка логотипа ---------- */
.sp-hd-acts{display:none}
@media (min-width:768px){
  body.sp-f17 header .row.fix{display:flex;align-items:center;flex-wrap:nowrap;gap:14px;margin-left:0;margin-right:0}
  body.sp-f17 header .row.fix:before,body.sp-f17 header .row.fix:after{display:none}
  body.sp-f17 header .row.fix > .col-sm-3{flex:0 0 auto;width:auto;padding:0;float:none}
  body.sp-f17 header .row.fix > .col-sm-7{flex:1 1 auto;width:auto;min-width:0;padding:0;float:none}
  body.sp-f17 header .row.fix > .col-sm-2{flex:0 0 auto;width:auto;padding:0;float:none;display:flex;align-items:center;gap:10px}
  body.sp-f17 header .row.fix > .col-sm-2 #cart{margin:0 !important}
  body.sp-f17 .sp-hd-acts{display:flex;align-items:center;gap:10px}
  /* одна высота строки: поле поиска, баланс и кабинет - 46 px, корзина по центру (владелец: «не в 1 высоту и не в 1 линию») */
  body.sp-f17 header #search.input-group{height:46px;margin:0}
  body.sp-f17 header #search .form-control{height:44px;line-height:44px}
  body.sp-f17 header #search .sp-search-field{height:44px;align-items:center}
  body.sp-f17 header #logo{margin:0 !important;display:flex;align-items:center;height:46px}
  body.sp-f17 header #cart{display:flex;align-items:center;height:46px}
}
@media (min-width:768px) and (max-width:1199px){
  body.sp-f17 .sp-hd-bal small,body.sp-f17 .sp-hd-acc small{display:none}
  body.sp-f17 .sp-hd-acc .sp-hd-t b{max-width:110px;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:768px) and (max-width:991px){
  body.sp-f17 .sp-hd-bal{display:none}
  body.sp-f17 .sp-hd-acc .sp-hd-t{display:none}
}
.sp-hd-bal,.sp-hd-accb{display:inline-flex;align-items:center;gap:10px;height:46px;border:1px solid var(--f17-line);border-radius:12px;background:var(--f17-card);color:var(--f17-ink);white-space:nowrap;text-decoration:none !important}
.sp-hd-bal{padding:0 5px 0 12px}
.sp-hd-bal > svg{color:var(--f17-pur);flex:0 0 auto}
.sp-hd-t small{display:block;font:400 11px/1 Rubik,sans-serif;color:var(--f17-muted);margin-bottom:4px}
.sp-hd-t b{display:block;font:700 14px/1.1 Rubik,sans-serif;color:var(--f17-ink);white-space:nowrap}
.sp-hd-add{width:36px;height:36px;border-radius:9px;background:var(--f17-purt);color:var(--f17-pur) !important;display:flex;align-items:center;justify-content:center;text-decoration:none !important}
.sp-hd-add:hover{background:var(--f17-pur);color:#fff !important}
.sp-hd-acc{position:relative}
.sp-hd-accb{padding:0 12px 0 5px;cursor:pointer;font-family:inherit}
.sp-hd-accb:hover,.sp-hd-bal:hover{border-color:#D9D2F0}
.sp-hd-ava{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#5B3FA0,#E31E2A);color:#fff;display:flex;align-items:center;justify-content:center;font:700 14px/1 Rubik,sans-serif;flex:0 0 auto}
.sp-hd-ava svg{display:block}
.sp-hd-chev{color:var(--f17-muted);transition:transform .15s}
.sp-hd-acc.is-open .sp-hd-chev{transform:rotate(180deg)}
.sp-hd-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:1002;min-width:240px;padding:6px;margin:0;list-style:none;border:1px solid var(--f17-line);border-radius:14px;background:var(--f17-card);box-shadow:var(--f17-sh);column-count:1 !important}
.sp-hd-acc.is-open .sp-hd-menu{display:block}
.sp-hd-menu li{display:block;float:none;width:auto}
.sp-hd-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--f17-ink) !important;font:500 14px/1.2 Rubik,sans-serif;text-decoration:none !important;white-space:nowrap}
.sp-hd-menu a:hover,.sp-hd-menu a:focus{background:var(--f17-hov);color:var(--f17-pur) !important}
.sp-hd-menu .sp-hd-mbal{font-weight:700;border-bottom:1px solid var(--f17-line);border-radius:9px 9px 0 0;margin-bottom:4px}
.sp-hd-menu .sp-hd-mout{color:#B5121C !important}

/* ---------- отступ между строкой логотипа и меню ----------
   Без блока 24/7 карточка меню прилипала к строке логотипа, а линия под шапкой шла прямо по её верхней
   рамке (владелец: «меню слиплось», «этот бордер точно нужен?»). Линию убираем, между ними — воздух. */
body.sp-f17 header .container{box-shadow:none !important}
body.sp-f17 #menu.navbar{margin-top:12px}
html.sp-dark body.sp-f17 header .container{box-shadow:none !important}

/* ---------- блок 24/7 при F17 не выводится (см. шапку файла); на случай кэша — прячем ---------- */
body.sp-f17 #sp-promo-block{display:none !important}

/* ---------- подсказки поиска (F16b) ----------
   Шапка поднята над блоком меню: иначе окно подсказок уходило под карточку категорий. */
body.sp-f17 header{position:relative;z-index:1004}
#search{position:relative}
/* у поля поиска в header-only стоит overflow:hidden (скругление кнопки) - окно подсказок под полем обрезалось целиком */
#search.input-group{overflow:visible}
#search .input-group-btn,#search .input-group-btn .btn{border-radius:0 9px 9px 0 !important}
#search .sp-sg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:1003;max-height:70vh;overflow:auto;border:1px solid var(--f17-line);border-radius:16px;background:var(--f17-card);box-shadow:var(--f17-sh);padding:6px 0;text-align:left}
#search .sp-sg[hidden]{display:none}
.sp-sg-h{display:flex;justify-content:space-between;padding:10px 16px 6px;font:600 11px/1 Rubik,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--f17-muted)}
.sp-sg-i{display:flex;align-items:center;gap:12px;padding:8px 16px;color:var(--f17-ink) !important;text-decoration:none !important;border-left:3px solid transparent}
.sp-sg-i:hover,.sp-sg-i.is-on{background:var(--f17-hov);border-left-color:var(--f17-pur)}
.sp-sg-ic{width:30px;height:30px;border-radius:8px;background:var(--f17-purt);display:flex;align-items:center;justify-content:center;flex:0 0 30px}
.sp-sg-ic img{display:block;width:18px;height:18px}
.sp-sg-tx{min-width:0}
.sp-sg-n{font:400 14.5px/1.3 Rubik,sans-serif}
.sp-sg-n b{font-weight:700}
.sp-sg-pl{color:var(--f17-muted)}
.sp-sg-none{padding:6px 16px 10px;color:var(--f17-muted);font-size:13px}
.sp-sg-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 16px 12px}
.sp-sg-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--f17-line);border-radius:999px;background:var(--f17-card);color:var(--f17-ink);font:400 13px/1 Rubik,sans-serif;cursor:pointer}
.sp-sg-chip:hover{border-color:var(--f17-pur);color:var(--f17-pur)}
.sp-sg-all{justify-content:space-between;margin-top:4px;border-top:1px solid var(--f17-line);color:var(--f17-pur) !important;font:400 13.5px/1 Rubik,sans-serif;padding:12px 16px}
.sp-sg-all kbd{background:var(--f17-card);border:1px solid var(--f17-line);color:var(--f17-muted);box-shadow:none;font:600 11px/1 Rubik,sans-serif;padding:4px 8px;border-radius:6px}