/* ═══ Новая шапка (с 22.10.2026 — для всех; ?newheader=0 — старая для себя) ═══
   Разметка — template/common/jw_newheader.twig, поведение — js/jw-newheader.js.
   Всё под html.jw-nh: класс ставит скрипт в jw_newheader.twig.
   Пороги складывания — как у текущей шапки сайта (сняты с прода 22.10):
     ≥1200 всё; ≤1199 меню → бургер, без ⌘K; ≤1049 без «Сравнения»; ≤949 без «Избранного»;
     ≤889 без «Где купить»; ≤767 стек (поиск второй строкой); ≤490 без «N магазинов».
   Липкая шапка (.site-main.sticky, ставит скрипт темы): ≥992 одна строка с иконками
   и бургером (если ≤1199); 768–991 без бургера; <768 — штатная мобильная полоска. */

html.jw-nh .jnh {
  --jnh-o: #E94E1B; --jnh-o-dark: #d8430f; --jnh-ink: #1b1d21; --jnh-mute: #6b7079;
  --jnh-line: #e6e8eb; --jnh-soft: #f2f3f5; --jnh-r: 16px;
  visibility: visible !important;
  background: #fff; color: var(--jnh-ink);
  font-family: var(--jv-font-family, 'TT Norms Pro', -apple-system, 'Segoe UI', sans-serif);
  position: relative; z-index: 5;
}
/* у .top-header темы свои боковые поля (20px на десктопе) — новая шапка идёт на всю ширину,
   поля задаёт сама (см. .jnh-row ниже) */
html.jw-nh .top-header { padding-left: 0 !important; padding-right: 0 !important; }
html.jw-nh .jnh *, html.jw-nh .jnh *::before, html.jw-nh .jnh *::after { box-sizing: border-box; }
html.jw-nh .jnh a { color: inherit; text-decoration: none; }
html.jw-nh .jnh svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* свои поля: у .container темы поля зависят от ширины (на ≤1199 — ноль).
   Ширина — как у контента страницы (.wrapper-middle .container): до 1840px, по краям ≥20px */
html.jw-nh .jnh .jnh-row.container {
  display: flex; align-items: center; width: auto !important; max-width: 1880px !important; /* = контент страницы: 1840 + поля 2×20 */
  margin: 0 auto !important; padding-left: 20px !important; padding-right: 20px !important;
}

/* ── служебная строка ── */
html.jw-nh .jnh-top { background: #f5f6f8; font-size: 14px; color: var(--jnh-mute); }
html.jw-nh .jnh-top .jnh-row { height: 38px; justify-content: space-between; }
html.jw-nh .jnh-loc {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; margin-left: -10px;
  border-radius: 8px; cursor: pointer; transition: background .15s; white-space: nowrap;
}
html.jw-nh .jnh-loc:hover { background: #eceef1; }
html.jw-nh .jnh-loc .jw-city-selector { position: relative; display: flex; align-items: center; }
/* выпадашка города — под пином, а не по центру кнопки */
html.jw-nh .jnh-loc .jw-city-dropdown { left: -10px !important; top: calc(100% + 14px) !important; margin: 0 !important; transform: none !important; }
html.jw-nh .jnh-loc .jw-city-dropdown::before { left: 24px !important; }
html.jw-nh .jnh-loc .jw-city-selector__trigger {
  display: flex !important; align-items: center; gap: 6px; padding: 0 !important; margin: 0 !important;
  border: 0 !important; background: none !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; color: var(--jnh-ink) !important; cursor: pointer;
}
html.jw-nh .jnh-loc .jw-city-selector__trigger svg { width: 18px !important; height: 18px !important; }
html.jw-nh .jnh-loc:hover .jw-city-selector__trigger svg path { stroke: var(--jnh-o) !important; }
html.jw-nh .jnh-loc .jw-city-selector__name { font-weight: 400 !important; color: var(--jnh-ink) !important; font-size: 14px !important; }
html.jw-nh .jnh-sep { width: 1px; height: 16px; background: #cfd3d8; margin: 0 2px; }
html.jw-nh .jnh-stores { color: var(--jnh-mute); }
html.jw-nh .jnh-contacts { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
html.jw-nh .jnh-phone { color: var(--jnh-ink) !important; font-weight: 500; font-size: 15px; }
html.jw-nh .jnh-phone:hover { color: var(--jnh-o) !important; }

/* ── главная строка ── */
html.jw-nh .jnh-main .jnh-row { height: 92px; gap: 20px; }
html.jw-nh .jnh-main { margin-bottom: -11px; position: relative; z-index: 2; }
html.jw-nh .jnh-logo { flex: none; line-height: 0; }
html.jw-nh .jnh-logo img { height: 46px; width: auto; display: block; }

html.jw-nh .jnh-cat {
  flex: none; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 20px;
  border: 0; border-radius: var(--jnh-r); background: var(--jnh-o); color: #fff;
  font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .15s; white-space: nowrap;
}
html.jw-nh .jnh-cat:hover { background: var(--jnh-o-dark); }
html.jw-nh .jnh-cat__ic { width: 18px; height: 14px; display: flex; flex-direction: column; justify-content: space-between; }
html.jw-nh .jnh-cat__ic i { display: block; height: 2px; background: currentColor; border-radius: 2px; }
html.jw-nh .jnh-cat__ic i:nth-child(2) { width: 65%; }

/* поиск: настоящий блок сайта (.jv-search-block), перекрашенный */
/* серую плашку рисует сама обёртка, а не input: она видна сразу, ещё до того, как
   скрипт перенесёт сюда настоящее поле — без «пустого места» при загрузке */
html.jw-nh .jnh-search {
  flex: 1; min-width: 0; position: relative; height: 54px;
  border: 1px solid #dcdfe3; border-radius: var(--jnh-r); background: var(--jnh-soft);
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset; transition: border-color .2s, background .2s, box-shadow .2s;
}
html.jw-nh .jnh-search:hover { border-color: #cdd1d6; }
html.jw-nh .jnh-search:focus-within { border-color: var(--jnh-o); background: #fff; box-shadow: 0 0 0 4px rgba(233,78,27,.12); }
html.jw-nh .jnh-search .jv-search-block { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; }
html.jw-nh .jnh-search .jv-search-block input[name="search"] {
  width: 100% !important; height: 100% !important; margin: 0 !important;
  padding: 0 120px 0 53px !important; border: 0 !important; border-radius: var(--jnh-r) !important;
  background: transparent !important; color: var(--jnh-ink) !important; font-family: inherit !important; font-size: 17px !important;
  box-shadow: none !important; outline: none !important;
}
html.jw-nh .jnh-search .jv-search-block .search-btn {
  position: absolute !important; left: 5px !important; top: 0 !important; right: auto !important; z-index: 2;
  width: 44px !important; height: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 12px !important;
  display: flex !important; align-items: center; justify-content: center; color: #8a9099 !important;
}
html.jw-nh .jnh-search .jv-search-block .search-btn i,
html.jw-nh .jnh-search .jv-search-block .search-btn svg { color: #8a9099 !important; font-size: 20px !important; line-height: 1 !important; }
html.jw-nh .jnh-search .jv-search-block .search-btn:hover i { color: var(--jnh-o) !important; }
html.jw-nh .jnh-search__ph {
  position: absolute; left: 53px; top: 0; bottom: 0; display: flex; align-items: center; gap: 5px;
  color: #8a9099; font-size: 17px; white-space: nowrap; pointer-events: none; z-index: 1; overflow: hidden; right: 120px;
}
html.jw-nh .jnh-search__ph em { font-style: normal; color: #3a3e45; }
html.jw-nh .jnh-search__ph em.jnh-tick { animation: jnh-tick .45s ease; }
@keyframes jnh-tick { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html.jw-nh .jnh-search.has-value .jnh-search__ph,
html.jw-nh .jnh-search:focus-within .jnh-search__ph { display: none; }
html.jw-nh .jnh-kbd { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); display: flex; gap: 5px; pointer-events: none; z-index: 1; transition: opacity .15s; }
html.jw-nh .jnh-kbd span {
  min-width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #dcdfe3; background: #fff; border-radius: 7px; font-size: 12.5px; color: #8a9099;
}
html.jw-nh .jnh-search:focus-within .jnh-kbd { opacity: 0; }

/* иконки: сравнение / избранное / где купить */
html.jw-nh .jnh-icons { flex: none; display: flex; gap: 0; margin-left: 4px; }
html.jw-nh .jnh-ic {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 92px; height: 64px; border-radius: 12px; font-size: 14px; color: var(--jnh-ink);
  /* только цвета: было «transition: .15s» (= all) — и размеры плашек анимировались.
     Замер высоты шапки (header.twig, measure() на resize) на миг снимает .sticky и
     возвращает его — плашки «отрастали» до 92×64 и сжимались обратно. В фоновой вкладке
     переходы стоят, поэтому скачок проигрывался при возврате на вкладку. */
  transition: background-color .15s, color .15s;
}
html.jw-nh .jnh-ic svg { width: 27px; height: 27px; transition: color .15s; }
html.jw-nh .jnh-ic__t { color: var(--jnh-mute); white-space: nowrap; transition: color .15s; }
html.jw-nh .jnh-ic:hover svg { color: var(--jnh-o); }
html.jw-nh .jnh-ic:hover .jnh-ic__t { color: var(--jnh-ink); }
html.jw-nh .jnh-badge {
  position: absolute; top: 0; left: calc(50% + 7px); min-width: 20px; height: 20px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 2px solid #fff;
  background: var(--jnh-o); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
html.jw-nh .jnh-badge[hidden] { display: none; }

/* бургер (как на сайте: оранжевая обводка) — с 1199 и уже */
html.jw-nh .jnh-burg {
  display: none; flex: none; width: 52px; height: 52px; padding: 0; border-radius: 12px;
  border: 1.5px solid var(--jnh-o); background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: background .15s;
}
html.jw-nh .jnh-burg i { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--jnh-o); }
html.jw-nh .jnh-burg:hover { background: #fff5f0; }

/* ── меню + инструменты ── */
/* низ шапки — мягкая тень самой .top-header (как у старой шапки), без жёстких линий */
html.jw-nh .jnh-nav { border-bottom: 0; }
html.jw-nh .jnh-nav .jnh-row { height: 58px; justify-content: space-between; }
html.jw-nh .jnh-menu { display: flex; height: 100%; }
html.jw-nh .jnh-menu a {
  position: relative; display: flex; align-items: center; padding: 0 11px; font-size: 16px;
  color: #3a3e45; white-space: nowrap; transition: color .15s;
}
html.jw-nh .jnh-menu a:first-child { padding-left: 0; }
html.jw-nh .jnh-menu a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--jnh-o); transform: scaleX(0); transition: transform .2s;
}
html.jw-nh .jnh-menu a:first-child::after { left: 0; }
html.jw-nh .jnh-menu a:hover { color: var(--jnh-ink); }
html.jw-nh .jnh-menu a:hover::after { transform: scaleX(.5); }
html.jw-nh .jnh-menu a.is-on { color: var(--jnh-ink); font-weight: 500; }
html.jw-nh .jnh-menu a.is-on::after { transform: scaleX(1); }
html.jw-nh .jnh-tools { display: flex; gap: 0; }
html.jw-nh .jnh-tool {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px;
  font-size: 14.5px; font-weight: 400; color: #3a3e45; white-space: nowrap; transition: background-color .15s, color .15s;
}
html.jw-nh .jnh-tool svg { width: 17px; height: 17px; color: #8a9099; transition: color .15s; }
html.jw-nh .jnh-tool:hover { background: var(--jnh-soft); color: var(--jnh-ink); }
html.jw-nh .jnh-tool:hover svg, html.jw-nh .jnh-tool.is-on svg { color: var(--jnh-o); }

/* ═══ липкая шапка ≥768 ═══ */
@media (min-width: 768px) {
  html.jw-nh .site-main.sticky .jnh-top,
  html.jw-nh .site-main.sticky .jnh-nav { display: none; }
  html.jw-nh .site-main.sticky .jnh-main { margin-bottom: 0; }
  html.jw-nh .site-main.sticky .jnh-main .jnh-row { height: 72px; }
  html.jw-nh .site-main.sticky .jnh-logo img { height: 38px; }
  html.jw-nh .site-main.sticky .jnh-cat,
  html.jw-nh .site-main.sticky .jnh-search { height: 48px; }
  /* иконки — серые плашки «иконка + слово» */
  html.jw-nh .site-main.sticky .jnh-icons { gap: 6px; }
  html.jw-nh .site-main.sticky .jnh-ic {
    width: auto; height: 48px; flex-direction: row; gap: 8px; padding: 0 14px 0 12px; background: var(--jnh-soft);
  }
  html.jw-nh .site-main.sticky .jnh-ic:hover { background: #eaecef; }
  html.jw-nh .site-main.sticky .jnh-ic svg { width: 21px; height: 21px; }
  html.jw-nh .site-main.sticky .jnh-ic__t { color: var(--jnh-ink); }
  html.jw-nh .site-main.sticky .jnh-badge { top: -6px; right: -6px; left: auto; }
  html.jw-nh .site-main.sticky .jnh-burg { width: 48px; height: 48px; }
}

/* ═══ адаптив — пороги текущего сайта ═══ */
@media (max-width: 1199px) {
  html.jw-nh .jnh-kbd { display: none; }
  html.jw-nh .jnh-search .jv-search-block input[name="search"] { padding-right: 16px !important; }
  html.jw-nh .jnh-search__ph { right: 16px; }
  html.jw-nh .jnh-nav { display: none; }
  html.jw-nh .jnh-main { margin-bottom: 0; }
  html.jw-nh .jnh-burg { display: flex; }
}
@media (max-width: 1049px) { html.jw-nh .jnh-ic:nth-child(1) { display: none; } }
@media (max-width: 991px)  { html.jw-nh .site-main.sticky .jnh-burg { display: none; } }
@media (max-width: 949px)  { html.jw-nh .jnh-ic:nth-child(2) { display: none; } }
@media (max-width: 889px)  { html.jw-nh .jnh-icons { display: none; } }
@media (max-width: 869px) {
  html.jw-nh .jnh-hours { display: none; }
  html.jw-nh .jnh-main .jnh-row { height: 80px; gap: 14px; }
  html.jw-nh .jnh-logo img { height: 40px; }
  html.jw-nh .jnh-cat, html.jw-nh .jnh-burg, html.jw-nh .jnh-search,
  html.jw-nh .site-main.sticky .jnh-cat, html.jw-nh .site-main.sticky .jnh-search { height: 44px; }
  html.jw-nh .jnh-burg { width: 44px; }
  html.jw-nh .jnh-search .jv-search-block input[name="search"] { font-size: 16px !important; padding-left: 45px !important; }
  html.jw-nh .jnh-search__ph { left: 45px; font-size: 16px; }
  html.jw-nh .jnh-search .jv-search-block .search-btn { left: 2px !important; }
}
@media (max-width: 767px) {
  html.jw-nh .jnh-main .jnh-row { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 16px; gap: 14px 10px; }
  html.jw-nh .jnh-logo { margin-right: auto; }
  html.jw-nh .jnh-logo img { height: 34px; }
  html.jw-nh .jnh-search { order: 3; flex: 1 1 100%; }
}
@media (max-width: 490px) {
  html.jw-nh .jnh-sep, html.jw-nh .jnh-stores { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.jw-nh .jnh *, html.jw-nh .jnh *::after { transition: none !important; animation: none !important; }
}
/* замер высоты шапки (header.twig, measure()) снимает и возвращает .sticky —
   без переходов, иначе плашки анимируются туда-обратно */
html.jw-measuring .top-header, html.jw-measuring .top-header * { transition: none !important; }