/* ==========================================================================
   Catalog — the Dota 2 item-type row (catalog/toolbar.js, data/dota-taxonomy.js)
   Украшение … Наклейка = single pills with a picture, «Другое» = a group pill with the CS2 type menu.
   Builds on catalog.css (.catalog__cats-row, .catalog__catgrp, .cat-pop); only the differences live here.
   Linked right after catalog.css, so equal-specificity rules here win (the pill paddings at every width).
   ========================================================================== */

/* A single type pill: the same box as a CS2 group pill (44px button inside a 1px border, 14px radius,
   picture at the left, ink label) — so the row reads as one set with «Другое». Its lengths follow the row's
   density (--cat-*, catalog.css; the fallbacks are the phone sizes). */
.catalog__cats-row--dota .catalog__cat--pic {
  gap: var(--cat-inner, 9px);
  min-height: 46px;
  padding: 0 var(--cat-chip-pad, 16px) 0 var(--cat-pad, 10px);
  border-radius: 14px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.catalog__cats-row--dota .catalog__cat--pic:hover { box-shadow: 0 4px 14px -6px rgba(25, 27, 32, .16); }
.catalog__cats-row--dota .catalog__cat--pic[aria-pressed='true'] { color: #FFFFFF; }
.catalog__cats-row--dota .catalog__cat--pic:focus-visible { box-shadow: var(--focus-ring); }

/* Dota item art is a painted rectangle (not a cut-out render like CS2's): a small rounded tile, filled */
.catalog__cats-row--dota .catalog__cat-img {
  width: var(--cat-tile-w, 42px);
  height: var(--cat-tile-h, 28px);
  border-radius: var(--cat-tile-r, 7px);
  background: var(--surface-sunken);
  object-fit: cover;
}

/* a picture the CDN did not serve → the type's pictogram on the same tile (toolbar.js swaps it in) */
.catalog__cats-row--dota .catalog__cat-img--none { display: grid; flex: none; place-items: center; color: var(--ink-3); }
.catalog__cats-row--dota .catalog__cat-img--none svg { width: 18px; height: 18px; }

/* The «Другое» menu: the same tiles, larger */
.cat-pop--dota .cat-pop__list .cat-pop__thumb {
  width: 60px;
  height: 40px;
  border-radius: 9px;
  background: var(--surface-sunken);
}
.cat-pop--dota .cat-pop__list .cat-pop__thumb img { object-fit: cover; }
.cat-pop--dota .cat-pop__list .cat-pop__thumb > svg { display: block; width: 22px; height: 22px; margin: 9px auto; color: var(--ink-3); }
/* «Выбрать все»: its icon starts where the tiles start (they fill their cell, unlike CS2 renders) */
.cat-pop--dota .cat-pop__item--all .cat-pop__thumb { margin-left: 0; }

/* ==========================================================================
   Catalog — the Dota 2 filter panel (catalog/filters-panel.js)
   «Герой»: a search field above the checkbox list (the catalogue carries items for 123 heroes, user 2026-10-06).
   «Слот»: its 30 slots under four headings, drawn whole — the group rules are catalog.css's own (.fpanel__group,
   shared with the CS2 rarity ladders), so nothing about them is repeated here.
   ========================================================================== */

/* The field itself is the site's search control (.search + .input, components.css), so only its place in the
   section is set here. It never widens the 236px column: the input shrinks instead of pushing. */
.fpanel__osearch {
  max-width: 100%;
  margin-bottom: 8px;
}
.fpanel__osearch .fpanel__pick-input {
  width: 100%;
  min-width: 0;
}

/* What the search found, announced (aria-live) and read: a line under the rows, there only while something is
   typed — «Найдено героев: 3», «Показаны первые 8 — уточните запрос», «Такого героя в наличии нет». */
.fpanel__osearch-note { margin: 6px 0 0; }
.fpanel__osearch-note:empty { display: none; }