/* ============================================================
   СТРОКА КАТЕГОРИЙ ПОД ШАПКОЙ — ЗАДАЁТСЯ ТОЛЬКО ЗДЕСЬ.

   Что сюда входит: сама полоса (nav.cats), бегущий список категорий
   (#navCats), кнопка-бургер и её значок (.cats-burger, .cats-burger-ico),
   растушёвка у правого края (nav.cats::after) — вместе с тёмной темой,
   наведением мышью, средними экранами и телефоном.

   Сюда НЕ входит выезжающее меню категорий (.cats-drawer): это отдельный
   участок со своим именем в config/css-layers.json. Его пока не разбирали.

   Сведено 2026-08-10 из пяти файлов: storefront.v3.css, design-lab.v1.css,
   design-lab-flagship.v2.css, design-lab-flagship-refinements.v3.css
   (опустел целиком и удалён), mobile-layout.v2.css.

   Значения не подбирались заново — перенесено ровно то, что фактически
   доезжало до покупателя. Правила, не выигрывавшие нигде, исчезли сами:
   переносить было нечего.

   Совпадение проверено расчётом по всей витрине на 65 контрольных ширинах
   (границы @media взяты из самого CSS, у каждой — точка перед, на и за).
   Проверка охватывает @media, сводимые к ширине в пикселях, и сравнивает
   победителей внутри одного селектора. НЕ охвачены и смотрятся глазами:
   перетаскивание списка мышью (#navCats.dragging ставится из JS), наведение,
   тёмная тема и споры разных селекторов на одном элементе.

   Правишь строку категорий — правь здесь. Новый слой поверх не заводи:
   npm run verify это ловит. Что где выигрывает: npm run who-wins nav.cats
   ============================================================ */
/* ── Полоса целиком, ссылки категорий, растушёвка края ── */
nav.cats{align-items:stretch;background:var(--fl-surface);border-color:var(--fl-line);border-top:1px solid var(--sky2);display:flex;min-height:50px;position:relative}
nav.cats .wrap{display:flex;flex:1;gap:2px;min-width:0;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}
nav.cats .wrap::-webkit-scrollbar{display:none}
nav.cats a{align-items:center;border:0;border-bottom:3px solid transparent;border-radius:10px;color:var(--fl-muted);cursor:pointer;display:inline-flex;font-family:'Manrope', sans-serif !important;font-size:13px;font-weight:700;letter-spacing:-.01em !important;min-height:50px;padding:0 15px;text-transform:none !important;transition:.2s;white-space:nowrap}
nav.cats a:hover{background:var(--sky);border-color:var(--blue);color:var(--fl-ink)}
nav.cats::after{background:linear-gradient(90deg,rgba(255,255,255,0),var(--fl-surface) 72%);bottom:0;content:"";pointer-events:none;position:absolute;right:0;top:0;width:64px}
html[data-theme="dark"] nav.cats::after{background:linear-gradient(90deg,rgba(13,32,55,0),var(--fl-surface) 72%)}
nav.cats a[aria-current="page"]{background:rgba(23,105,224,.08);color:var(--fl-blue)}
nav.cats a .cat-svg{height:18px;margin-right:2px;vertical-align:-4px;width:18px}
@media(min-width:681px) and (max-width:1320px){
  nav.cats .wrap{overflow:visible}
  nav.cats::after{display:none}
}
@media(min-width:841px) and (max-width:1220px){
  nav.cats a{font-size:12.25px;padding-inline:11px}
}
@media(max-width:680px){
  nav.cats .wrap{display:none !important;padding-inline:4px}
  nav.cats a{padding-inline:12px}
  nav.cats::after{width:44px}
}

/* ── Бегущий список: перетаскивание мышью, лишние ссылки на средних экранах ── */
#navCats{cursor:grab}
#navCats.dragging{cursor:grabbing;scroll-behavior:auto}
#navCats.dragging a{pointer-events:none}
@media(min-width:681px) and (max-width:1320px){
  #navCats a:nth-child(n+7){display:none}
}

/* ── Кнопка «Категории» ── */
.cats-burger{align-items:center;background:var(--card-bg);border-color:var(--dl-line);border-right:1px solid var(--sky2);color:var(--ink);cursor:pointer;display:none;flex-shrink:0;font-size:14.5px;font-weight:800;gap:8px;min-height:48px;padding:12px 14px;position:relative;white-space:nowrap;z-index:3}
.cats-burger:hover{color:var(--blue)}
@media(min-width:681px) and (max-width:1320px){
  .cats-burger{min-height:50px;padding-inline:14px}
}
@media(max-width:1320px){
  .cats-burger{display:inline-flex !important}
}
@media(max-width:680px){
  .cats-burger{font-size:13.5px;justify-content:center;min-height:46px;min-width:0;padding:10px 12px;padding-inline:12px;width:100%}
}

/* ── Значок на кнопке ── */
.cats-burger-ico{font-size:16px;line-height:1}

/* ── Растушёвка по краям прокручиваемого списка (класс .on ставится из JS) ── */
.cats-fade{bottom:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .2s;width:34px;z-index:2}
.cats-fade.on{opacity:1}
.cats-fade.left{background:linear-gradient(90deg,#fff,rgba(255,255,255,0));left:0}
.cats-fade.right{background:linear-gradient(270deg,#fff,rgba(255,255,255,0));right:0}
html[data-theme="dark"] .cats-fade.left{background:linear-gradient(90deg,var(--night,#0B1622),rgba(11,22,34,0))}
html[data-theme="dark"] .cats-fade.right{background:linear-gradient(270deg,var(--night,#0B1622),rgba(11,22,34,0))}