/* Светлая SEO-шапка RezinoMir. Скорость: чистый CSS, минимум JS.
   Подключается ПОСЛЕ storefront.css — здесь можно опираться на токены (--space/--radius/--color-*).
   Правило файла: один селектор — одно место. Дубли и !important не заводим. */

.site-header { background: #fff; box-shadow: 0 1px 0 rgba(16,24,40,.06); overflow: visible; }

/* ── Верхняя полоса (белая): город | email | действия | язык ── */
.hdr-top { border-bottom: 1px solid #eef1f5; overflow: visible; }
.hdr-top__bar { display: flex; align-items: center; min-height: 48px; gap: var(--space-3); overflow: visible; }
.hdr-top__city { display: inline-flex; align-items: center; gap: .4rem; color: #1a2b4a; cursor: pointer; font-size: .92rem; font-weight: 500; }
.hdr-top__city svg { color: #2456b8; }
.hdr-top__city:hover { color: #2456b8; }

/* Мелкие ссылки-действия (избранное, сравнение, вход) */
.hdr-top__actions { display: inline-flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.hdr-top__act { display: inline-flex; align-items: center; gap: .3rem; color: #5a6a85; font-size: .82rem; }
.hdr-top__act:hover { color: #2456b8; text-decoration: none; }
.hdr-top__act svg { width: 16px; height: 16px; color: #2456b8; }
/* «Выйти» — форма POST, но выглядит как соседние ссылки-действия.
   Значения шрифта/цвета заданы явно: у <button> они не наследуются от родителя,
   а `font: inherit` подтянул бы размер body (17px) и кнопка выбилась бы из ряда. */
.hdr-top__logout { margin: 0; display: inline-flex; }
.hdr-top__act--btn { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: .82rem; line-height: inherit; color: #5a6a85; }
/* Счётчик избранного/сравнения; пустой список счётчик не показывает */
.hdr-top__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem;
  padding: 0 .25rem; margin-left: .25rem; border-radius: 999px; background: var(--color-primary);
  color: #fff; font-size: .7rem; font-weight: 600; }
.hdr-top__count.is-empty { display: none; }

/* Email по центру с «блеском» */
.hdr-email { margin: 0 auto; display: inline-flex; align-items: center; gap: .4rem; position: relative;
  background: linear-gradient(135deg, #eaf1ff, #f7faff); border: 1px solid #dbe6fb;
  padding: .35rem .8rem; border-radius: 20px; }
.hdr-email::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(36,86,184,.18), transparent);
  transform: skewX(-20deg); animation: hdrShine 4s ease-in-out infinite; }
@keyframes hdrShine { 0%, 55% { left: -60%; } 100% { left: 140%; } }
@media (prefers-reduced-motion: reduce) { .hdr-email::after { animation: none; } }
.hdr-email__link { display: inline-flex; align-items: center; gap: .4rem; color: #14448a; font-weight: 700; font-size: .98rem; }
.hdr-email__link:hover { color: #2456b8; text-decoration: none; }
.hdr-email__link svg { color: #2456b8; }
.hdr-email__copy { background: none; border: 0; color: #6b86b3; cursor: pointer; padding: 3px; display: inline-flex; border-radius: 5px; position: relative; }
.hdr-email__copy:hover { color: #2456b8; background: rgba(36,86,184,.08); }
.hdr-email__copy.is-copied { color: #16a34a; }
.hdr-email__copy.is-copied::after { content: "Скопировано ✓"; position: absolute; top: 130%; left: 50%; transform: translateX(-50%);
  font-size: .72rem; color: #fff; background: #16a34a; padding: 3px 8px; border-radius: 5px; white-space: nowrap; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* ── Выпадашки верхней полосы: город и страна ── */
.city-pick, .country-switch { position: relative; }
.country-switch__current { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; color: #1a2b4a; font-size: .85rem; }
.country-switch__current:hover { color: #2456b8; }

.city-pick__list, .country-switch__list {
  position: absolute; top: 100%; z-index: 300; min-width: 190px; margin-top: .3rem;
  background: #fff; color: var(--color-fg); border: 1px solid #eef1f5; border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16,24,40,.12); padding: .4rem 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .12s;
}
.city-pick__list { left: 0; }
.country-switch__list { right: 0; left: auto; }
.city-pick:hover .city-pick__list, .city-pick:focus-within .city-pick__list,
.country-switch:hover .country-switch__list, .country-switch:focus-within .country-switch__list {
  opacity: 1; visibility: visible; transform: none;
}
.city-pick__list a, .country-switch__list a { display: flex; align-items: center; gap: .5rem; padding: .45rem .9rem; color: var(--color-fg); font-size: .9rem; }
.city-pick__list a:hover, .country-switch__list a:hover { background: var(--color-surface); color: var(--color-primary); text-decoration: none; }
.country-switch__list a.is-active { font-weight: 700; }

/* Флаги стран (CSS-триколоры — без картинок и запросов) */
.flag { display: inline-block; width: 20px; height: 14px; border-radius: 2px; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; vertical-align: middle; }
.flag--ru { background: linear-gradient(#fff 33.3%, #0039a6 33.3% 66.6%, #d52b1e 66.6%); }
.flag--kz { background: #00afca; }
.flag--by { background: linear-gradient(90deg, #d22730 0 66%, #fff 66% 70%, #009639 70%); }
.flag--kg { background: #e8112d; }
.flag--tj { background: linear-gradient(#d0021b 33%, #fff 33% 62%, #007a3d 62%); }
.flag--am { background: linear-gradient(#d90012 33.3%, #0033a0 33.3% 66.6%, #f2a800 66.6%); }
.flag--en { background: #012169; }

/* ── Средняя полоса (белая): лого, поиск, телефон, корзина ── */
.hdr-main { background: #fff; overflow: visible; }
.hdr-main__bar { display: flex; align-items: center; gap: var(--space-4); min-height: 92px; }

.hdr-logo { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.hdr-logo:hover { text-decoration: none; }
.hdr-logo__img { width: 64px; height: 64px; border-radius: 50%; object-fit: contain; display: block; }
.hdr-logo__box { display: flex; flex-direction: column; line-height: 1.15; }
.hdr-logo__name { color: #14294d; font-weight: 800; font-size: 1.35rem; }
.hdr-logo__tag { color: #7b8aa3; font-size: .74rem; max-width: 160px; }

/* Поиск с иконкой внутри поля */
.hdr-search { flex: 1; max-width: 560px; display: flex; position: relative; }
.hdr-search__ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9aa7bd; pointer-events: none; }
.hdr-search input { flex: 1; border: 1.5px solid #e3e8f0; border-right: 0; border-radius: 12px 0 0 12px; padding: .7rem .9rem .7rem 2.6rem; font-size: .95rem; outline: none; }
.hdr-search input:focus { border-color: #2456b8; }
.hdr-search button { border: 0; background: #1b52c0; color: #fff; padding: 0 1.4rem; border-radius: 0 12px 12px 0; cursor: pointer; font-size: .95rem; font-weight: 600; }
.hdr-search button:hover { background: #1746a6; }

/* Телефон и корзина — одинаковые «кружки» */
.hdr-phone { display: inline-flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.hdr-phone__ring, .hdr-cart__ring { width: 42px; height: 42px; border-radius: 50%; background: #eef3fc;
  display: flex; align-items: center; justify-content: center; color: #1b52c0; flex-shrink: 0; }
.hdr-phone__box { display: flex; flex-direction: column; line-height: 1.25; }
.hdr-phone__num { color: #14294d; font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.hdr-phone__num:hover { color: #1b52c0; text-decoration: none; }
.hdr-phone__note { display: block; color: #7b8aa3; font-size: .74rem; }

.hdr-mid__sep { color: #dde3ec; font-size: 1.6rem; font-weight: 300; margin: 0 .3rem; }
.hdr-cart { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; color: #14294d; }
.hdr-cart:hover { color: #1b52c0; text-decoration: none; }
.hdr-cart__label { font-weight: 600; font-size: .9rem; }
.hdr-cart__ring { position: relative; }
/* счётчик позиций поверх иконки корзины (как у избранного/сравнения) */
.hdr-cart__count { position: absolute; top: -4px; right: -4px; min-width: 1.1rem; height: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 .25rem;
  border-radius: 999px; background: var(--color-accent); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; }
.hdr-cart__count.is-empty { display: none; }

/* ── Нижняя полоса (синий градиент): меню. Вынесена из <header> и липнет к странице ── */
.hdr-nav { position: sticky; top: 0; z-index: 200;
  background: linear-gradient(90deg, #1746a6, #2160d8); box-shadow: 0 2px 10px rgba(23,70,166,.25); }
.hdr-nav__bar { display: flex; align-items: center; gap: var(--space-4); min-height: 56px; }
.hdr-nav a { color: rgba(255,255,255,.92); font-size: .95rem; font-weight: 500; }
.hdr-nav a:hover { color: #fff; text-decoration: none; }

/* Кнопка «Каталог товаров» — единственный оранжевый акцент в шапке */
.hdr-nav .mega__toggle { background: #e8792f; color: #fff; padding: .7rem 1.2rem; border-radius: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: .6rem; font-size: .98rem; }
.hdr-nav .mega__toggle:hover { text-decoration: none; background: #d86e28; }
.hdr-nav .mega__toggle::before { content: ""; width: 18px; height: 2px; background: #fff; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; }

/* Панель мега-меню — на БЕЛОМ фоне, поэтому ссылки внутри не должны наследовать белый
   цвет от `.hdr-nav a` (иначе текст сливается с панелью). Специфичность 0,2,x перебивает 0,1,1. */
.hdr-nav .mega__root { color: var(--color-fg); }
.hdr-nav .mega__root:hover { color: var(--color-primary); }
.hdr-nav .mega__list a { color: var(--color-muted); }
.hdr-nav .mega__list a:hover { color: var(--color-primary); }

/* Пункты меню из БД (menu_items) с вложенностью — выпадашка в синей полосе.
   Пункты без детей рендерятся простыми <a> и наследуют стиль .hdr-nav a. */
.hdr-nav .menu-item--has-children { position: relative; display: inline-flex; align-items: center; }
.hdr-nav .menu-item--has-children > a::after { content: "▾"; margin-left: .3rem; font-size: .8em; }
.hdr-nav .menu-sub { position: absolute; top: 100%; left: 0; z-index: 210; display: none; flex-direction: column;
  min-width: 200px; padding: .4rem 0; background: #fff; border: 1px solid #eef1f5;
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16,24,40,.14); }
.hdr-nav .menu-item--has-children:hover .menu-sub,
.hdr-nav .menu-item--has-children:focus-within .menu-sub { display: flex; }
.hdr-nav .menu-sub a { color: var(--color-fg); padding: .45rem .9rem; font-size: .9rem; font-weight: 500; }
.hdr-nav .menu-sub a:hover { color: var(--color-primary); background: var(--color-surface); }

/* ── Мобильная адаптация ── */
@media (max-width: 980px) {
  .hdr-main__bar { flex-wrap: wrap; gap: var(--space-3); }
  .hdr-search { order: 3; flex-basis: 100%; max-width: none; }
  .hdr-logo__tag { display: none; }
  .hdr-nav__bar { overflow-x: auto; }
  .hdr-email { margin: 0; }
}