/* ============================================================
   КНОПКИ В ПРАВОЙ ЧАСТИ ШАПКИ — ЗАДАЮТСЯ ТОЛЬКО ЗДЕСЬ.

   Что это на экране. Справа от строки поиска — светло-голубая «таблетка».
   Внутри неё по порядку: кнопка смены темы (луна или солнце), тонкий
   разделитель, кнопка «Избранное» и кнопка «Корзина». У последних двух в
   правом верхнем углу красный кружок со счётчиком, который подскакивает
   при добавлении товара.

   Что здесь живёт:
     .head-actions      — сама таблетка
     .theme-toggle      — кнопка темы (в разметке #themeToggle)
     .hbtn-divider      — разделитель между темой и кнопками
     .hbtn              — «Избранное» и «Корзина» (#favBtn, #cartBtn)
     .hbtn .ico         — кружок значка внутри кнопки
     .hbtn .ico .svg-ico, .theme-toggle .svg-ico — сами значки
     #favBtn .ico .svg-ico — красное сердце избранного
     .count, .count.on, .count.bump — счётчик (#favCount, #cartCount)
     @keyframes bump — подскок счётчика при добавлении товара
   Плюс все их состояния: наведение мышью, свёрнутая при прокрутке шапка
   (body.scrolled-header), средние экраны, планшет, телефон и тёмная тема.

   КАК ЭТО СОБРАНО — важно понимать, прежде чем править.
   Правила перенесены сюда ДОСЛОВНО: с исходными условиями @media и в
   исходном порядке подключения файлов, из которых они приехали. Значения
   не пересчитывались и границы экранов не подбирались заново. Поэтому
   ниже видны четыре блока подряд, по числу поколений дизайна, и
   некоторые свойства задаются дважды — второе перебивает первое, ровно
   как это было до переезда. Это не мусор: так каскад сохранён в точности.

   Почему не сведено в один короткий блок. Пробное сведение расчётом
   (scripts/css-consolidate.js) дало две поломки, невидимые для проверки
   по целым ширинам: щель на дробной ширине около 680.5px и переворот
   padding против padding-inline. Подробности — в конце файла.

   Правишь кнопки шапки — правь здесь, включая телефон и тёмную тему.
   Новый слой поверх не заводи: npm run verify это ловит.
   Что где выигрывает: npm run who-wins .head-actions (а также .hbtn,
   .theme-toggle, .hbtn-divider, .count)
   ============================================================ */

/* ── storefront.v3.css → ОСНОВА. Обычный вид таблетки, кнопок, разделителя и счётчика,
   свёрнутая при прокрутке шапка и телефон. ── */
.theme-toggle { background: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--muted); transition: .2s; }
.theme-toggle:hover { background: var(--sky); color: var(--deep); }
body.scrolled-header .theme-toggle { width: 38px; height: 38px; }
body.scrolled-header .hbtn { padding: 6px 10px; }
.head-actions { display: flex; align-items: center; gap: 2px; background: var(--sky); border-radius: 20px; padding: 4px; flex-shrink: 0; transition: padding .25s ease; }
.head-actions .theme-toggle { background: transparent; width: 40px; height: 40px; transition: width .25s ease,height .25s ease,background .2s; }
.head-actions .hbtn-divider { width: 1px; align-self: stretch; margin: 6px 3px; background: var(--sky2); }
.hbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; padding: 8px 12px; border-radius: 14px; font-size: 12px; font-weight: 600; color: var(--muted); position: relative; }
.hbtn .ico { font-size: 20px; line-height: 1; }
.count { position: absolute; top: 2px; right: 6px; background: var(--brand-red); color: #fff; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; opacity: 0; transform: scale(.5); transition: .25s; }
.count.on { opacity: 1; transform: scale(1); }
@media(max-width:680px) {
  .hbtn span:not(.ico) { display: none; }
  .hbtn { padding: 7px 10px; }
  .hbtn .ico { font-size: 18px; }
  .head-actions { padding: 3px; border-radius: 16px; }
  .theme-toggle { width: 34px; height: 34px; font-size: 16px; }
  .head-actions .theme-toggle { width: 34px; height: 34px; }
  body.scrolled-header .head-actions { order: 1; }
  body.scrolled-header .head-actions .theme-toggle, body.scrolled-header .head-actions .hbtn-divider { display: none; }
}
/* Подскок счётчика при добавлении товара. Класс .bump вешает и снимает
   bumpCount() в public/storefront.v3.js. Сама анимация переехала сюда из
   storefront.v3.css 11.08.2026: другого потребителя у имени bump в проекте
   нет, значит её место рядом с тем, кто ею пользуется. */
@keyframes bump { 0% { transform: scale(1) } 35% { transform: scale(1.45) } 60% { transform: scale(.9) } 100% { transform: scale(1) } }
.count.bump { animation: bump .38s ease; }

/* ── design-lab.v1.css → 1-е поколение редизайна. Рамка и фон таблетки, ширина кнопок,
   цвет счётчика, средние экраны и телефон. ── */
.head-actions { gap: 3px; padding: 3px; border: 1px solid var(--dl-line); border-radius: 16px; background: var(--card-bg); }
.hbtn { min-width: 72px; color: var(--muted); }
.hbtn:hover, .head-actions .theme-toggle:hover { color: var(--ink); background: var(--sky); }
.count { background: var(--dl-coral); }
@media (max-width: 1040px) {
  .hbtn { min-width: 56px; padding-inline: 8px; }
}
@media (max-width: 840px) {
  .head-actions { border: 0; background: transparent; }
  .hbtn > span:not(.ico):not(.count), .hbtn-divider { display: none; }
  .hbtn, .head-actions .theme-toggle { min-width: 44px; width: 44px; height: 44px; padding: 0; }
}
@media (max-width: 680px) {
  .head-actions { margin-left: auto; }
}

/* ── design-lab-flagship.v2.css → 2-е поколение. Цвета рамки и поверхности, подъём при наведении,
   размеры значков, красное сердце избранного и цвет луны в тёмной теме. ── */
.head-actions { border-color: var(--fl-line); background: var(--fl-surface); }
.head-actions .hbtn-divider { background: var(--fl-line); }
.hbtn:hover, .head-actions .theme-toggle:hover { transform: translateY(-1px); box-shadow: var(--fl-shadow-1); }
@media (max-width:1220px) and (min-width:841px) {
  .head-actions { gap: 1px; }
  .hbtn { width: 44px; min-width: 44px; padding: 0; }
  .hbtn > span:not(.ico):not(.count), .hbtn-divider { display: none; }
}
.hbtn .ico .svg-ico { width: 20px; height: 20px; }
.theme-toggle .svg-ico { color: #e0313f; }
html[data-theme="dark"] .theme-toggle .svg-ico { color: var(--fl-blue,#1769e0); }
#favBtn .ico .svg-ico { color: #e0313f; }

/* ── mobile-layout.v2.css → Телефон. Размеры и вид кнопок в компактной шапке.
   МЕСТО кнопок в сетке шапки осталось в mobile-layout.v2.css — см. исключения. ── */
@media (max-width: 680px) {
  .head-actions { min-width: 0; margin: 0; padding: 0; gap: 2px; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; }
  .head-actions .hbtn-divider { display: none; }
  .hbtn, .head-actions .theme-toggle { display: grid; width: 40px; min-width: 40px; height: 40px; padding: 0; place-items: center; border-radius: 10px; background: transparent; }
  .hbtn .ico { font-size: 20px; line-height: 1; }
  body.scrolled-header .head-actions .theme-toggle { display: grid; }
}
@media (max-width: 360px) {
  .hbtn, .head-actions .theme-toggle { width: 40px; min-width: 40px; height: 40px; }
}
@media (max-width: 680px) {
  .head-actions .theme-toggle, .hbtn { width: 36px; min-width: 36px; height: 36px; }
}

/* ════════════════════════════════════════════════════════════
   НАМЕРЕННЫЕ ИСКЛЮЧЕНИЯ — что осталось у прежних хозяев и почему.
   Это не забытые хвосты. Каждое проверяет test/header-actions-owner.test.js:
   если правило перестанет быть общим или переедет — тест упадёт.

   1. МЕСТО кнопок в сетке шапки на телефоне — mobile-layout.v2.css:
        .head-actions, body.scrolled-header .head-actions
          { grid-column: 3; grid-row: 1; justify-self: end }
      Третья колонка не имеет смысла в отрыве от grid-template-columns
      у .head, который живёт там же. Так же поступили с логотипом и
      строкой поиска: место — рядом с сеткой, вид — у своего участка.

   2. Общий переход всех кнопок сайта — storefront.v3.css:
        button, .chip, .fav, .buy, .cta, .hbtn { transition: … }
      Единый язык движения. Выдернуть отсюда .hbtn значит, что следующая
      правка скорости кнопок молча обойдёт шапку стороной. По той же
      причине из .hbtn не увезено собственное transition: .2s — оно и
      раньше проигрывало этому правилу и никогда не доезжало до покупателя.

   3. Общий подъём при наведении — design-lab-flagship.v2.css:
        button, .cta, .buy, … , .avail-row, .faq-item, .hbtn, .subtab, .tab
      Тот же случай: общий приём для доброго десятка элементов.

   4. Размер значка кнопки темы — design-lab-flagship.v2.css:
        .theme-toggle .svg-ico, #voiceBtn .svg-ico { width:19px; height:19px }
      Записано вместе с кнопкой голосового поиска, а строку поиска эта
      работа не трогает. Разделять — заводить второй источник одного размера.

   5. Базовый размер ВСЕХ значков — design-lab-flagship.v2.css:
        .svg-ico { width:24px; height:24px; … }
      Общий класс всей витрины: карточки, окна, категории, подвал. Здесь
      живут только более точные .hbtn .ico .svg-ico и .theme-toggle .svg-ico.

   6. Кружок значка в плитках преимуществ — perk.css: .perk .ico.
      Класс .ico делят два участка, но правила у каждого свои и по-разному
      уточнённые. Голого .ico не задаёт никто, спорить нечему.

   ── Почему правила перенесены дословно, а не сведены расчётом ──
   Штатный scripts/css-consolidate.js пересобирает @media заново: считает,
   на каких ширинах значение постоянно, и пишет отрезки со своими границами.
   На этом участке проверка вывода вручную нашла две поломки, которых
   сверка по целым ширинам увидеть не может:

     • Дробная щель. Исходно границы 681px не было вовсе — значения
       приходили из @media(max-width:840px) и @media(max-width:1220px)
       and (min-width:841px). Инструмент выдал @media(min-width:681px)
       and (max-width:1220px), и на ширине 680.5px не срабатывало ни одно
       правило: кнопки прыгали к десктопным 72px. Ровно та же поломка,
       что уже ловили на 760.5px у витрины 360°.
     • Сокращённое против полного. Исходно .hbtn получал padding-inline:8px
       из design-lab.v1 и следом padding:0 из design-lab-flagship.v2 —
       побеждал padding:0. Инструмент разложил их по отрезкам ширин и
       поставил блок max-width:1040px ниже блока max-width:1220px, из-за
       чего начал побеждать padding-inline:8px. Сверка снимков этого не
       видит: padding и padding-inline для неё разные имена свойств.

   Отсюда правило на будущее: сведение расчётом годится там, где условия
   @media у доноров не пересекаются причудливо. Здесь они пересекались, и
   дословный перенос оказался и точнее, и честнее.
   ════════════════════════════════════════════════════════════ */