/* Знаки отделов: по иконке на каждую категорию верхнего уровня.
 *
 * Зачем свои. С боевого приехали картинки категорий из бесплатного набора — контурный
 * будильник, фотоаппарат, звезда, — нарисованные разной рукой и к советской графике
 * отношения не имеющие. В меню они стоят сорока пикселями, и разнобой там виден лучше
 * всего: у одних волосяная линия, у других заливка.
 *
 * Язык формы тот же, что у всей витрины: сплошной силуэт или толстая линия в 2.2
 * единицы, прямые углы, никаких полутеней и деталей мельче полутора единиц — так
 * рисовали знаки на вывесках отделов и в каталогах Посылторга. Каждая читается
 * с сорока пикселей, поэтому внутренних просветов почти нет.
 *
 * Устроено маской, а не картинкой: цвет берётся у текста (`background: currentColor`),
 * поэтому один и тот же знак годится и чёрным в панели, и белым на кумаче. Лишних
 * запросов нет — всё лежит в этом файле.
 *
 * Картинки категорий в базе не тронуты: они по-прежнему кормят доску отделов запасным
 * кадром и остаются в админке.
 */

:root {
	/* Часы: корпус с ремешком и стрелки. */
	--sb-c-watches: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.5 1h7l-.8 4.2H9.3zM9.3 18.8h5.4l.8 4.2h-7z'/><circle cx='12' cy='12' r='6.6' fill='none' stroke='black' stroke-width='2.2'/><path d='M11.1 7.6h1.8V12h-1.8z'/><path d='M12 11.1h4.2v1.8H12z'/></svg>");

	/* Награды: колодка с лентой и медаль со звездой. */
	--sb-c-awards: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 1h4l2.2 5.5h-3zM19 1h-4l-2.2 5.5h3z'/><circle cx='12' cy='15.5' r='7' fill='none' stroke='black' stroke-width='2.2'/><path d='M12 10.6l1.5 3.4 3.7.3-2.8 2.4.9 3.6-3.3-2-3.3 2 .9-3.6-2.8-2.4 3.7-.3z'/></svg>");

	/* Деньги: столбик монет. */
	--sb-c-money: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><ellipse cx='12' cy='6.5' rx='8.5' ry='3.2'/><path d='M3.5 9.6c1.4 1.6 4.6 2.6 8.5 2.6s7.1-1 8.5-2.6v3.3c0 1.8-3.8 3.2-8.5 3.2s-8.5-1.4-8.5-3.2z'/><path d='M3.5 15.6c1.4 1.6 4.6 2.6 8.5 2.6s7.1-1 8.5-2.6v3.3c0 1.8-3.8 3.2-8.5 3.2s-8.5-1.4-8.5-3.2z'/></svg>");

	/* Флаги и вымпелы: вымпел со звездой на древке. Звезда прорезана насквозь
	   (fill-rule), иначе в маске она залилась бы вместе с полотном. */
	--sb-c-flags: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 1.5h2.4V23H3z'/><path fill-rule='evenodd' d='M5.4 2.6h16.6l-5 5.4 5 5.4H5.4zm7.1 2.2l-1 2.6-2.8.1 2.2 1.7-.8 2.7 2.4-1.6 2.4 1.6-.8-2.7 2.2-1.7-2.8-.1z'/></svg>");

	/* Форма: гимнастёрка со стойкой, планкой и накладными карманами. Без них
	   силуэт читался обычной футболкой. */
	--sb-c-uniforms: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M9.2 1.8L12 4.6l2.8-2.8 6.7 3.2V12h-3.3v10.4H5.8V12H2.5V5zm2 5.6v13.2h1.6V7.4zm-3.3 3.1v3.2h2.6v-3.2zm6.4 0v3.2h2.6v-3.2z'/></svg>");

	/* Фотоаппараты: корпус с объективом. */
	--sb-c-cameras: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 6.5h4.2L7.6 4h8.8l1.4 2.5H22V20H2z' fill='none' stroke='black' stroke-width='2.2'/><circle cx='12' cy='13' r='3.8'/></svg>");

	/* Сувениры: кремлёвская башня со звездой. Матрёшка не далась: сплошной силуэт
	   читался болваном, вырезанные лицо и передник — цифрой восемь, а контур
	   с платком — навесным замком. Башня складывается из прямых и узнаётся сразу. */
	--sb-c-souvenirs: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .6l.9 2.2 2.4.1-1.9 1.5.6 2.3-2-1.3-2 1.3.6-2.3-1.9-1.5 2.4-.1z'/><path d='M11.4 7.2h1.2v2.4h-1.2z'/><path d='M12 9.8l3.6 4.4H8.4z'/><path d='M9.2 14.8h5.6v3.4H9.2z'/><path d='M7.4 18.6h9.2v1.9H7.4z'/><path d='M6.2 20.9h11.6V23H6.2z'/></svg>");

	/* Инструмент: гаечный ключ. */
	--sb-c-tools: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 1.6c-3.3 0-6 2.7-6 6 0 .7.1 1.3.3 1.9l-8.7 8.7 3.2 3.2 8.7-8.7c.6.2 1.2.3 1.9.3 3.3 0 6-2.7 6-6 0-1-.2-1.9-.6-2.7l-3.6 3.6-2.8-2.8 3.6-3.6c-.8-.4-1.7-.6-2.7-.6z'/></svg>");

	/* Электроприборы: вилка с рожками. */
	--sb-c-electrical: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 1.5h2.6v6H7zM14.4 1.5H17v6h-2.6z'/><path d='M4.5 8h15v3.5c0 3.3-2.4 6-5.6 6.6V23h-3.8v-4.9C6.9 17.5 4.5 14.8 4.5 11.5z'/></svg>");

	/* Измерительные приборы: шкала со стрелкой. */
	--sb-c-measuring: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='13' r='9.4' fill='none' stroke='black' stroke-width='2.2'/><path d='M11.3 13.2l5.6-4.8 1.3 1.5-5.3 5.2z'/><circle cx='12' cy='14' r='1.8'/><path d='M11.1 1h1.8v2.6h-1.8zM3.6 4.3l1.3-1.3 1.9 1.9-1.3 1.3zM17.2 4.9l1.9-1.9 1.3 1.3-1.9 1.9z'/></svg>");

	/* Символика: звезда. */
	--sb-c-symbols: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.2l3 7.4 8 .4-6.2 5.1 2.1 7.7L12 17.4l-6.9 4.4 2.1-7.7L1 9l8-.4z'/></svg>");

	/* Шахматы: конь на подставке. */
	--sb-c-chess: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.6 1.5l1.2 2.6 4.2 1.6c3.1 1.2 4.6 3.7 4.6 7v3.1H8.8l2-4-3.6 2-2.4-3.4 3.2-3-2.8.6.4-3.2 3.4-1.2z'/><path d='M5.6 17.8h12.8v2.4H5.6zM4 21.2h16v2.3H4z'/></svg>");

	/* Радио: приёмник со шкалой и динамиком. */
	--sb-c-radio: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 7.5h20V21H2z' fill='none' stroke='black' stroke-width='2.2'/><circle cx='7.6' cy='14.2' r='3.4'/><path d='M13 10.8h6.4v2H13zM13 15.6h6.4v2H13z'/><path d='M12.6 1.5l.9 1.9-7 3.3-.9-1.9z'/></svg>");

	/* Журналы и газеты: сложенная газета. */
	--sb-c-magazines: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 4h16v16H2z' fill='none' stroke='black' stroke-width='2.2'/><path d='M18 8.5h4v9.7c0 1.1-.9 1.8-2 1.8s-2-.7-2-1.8z'/><path d='M4.6 6.6h10.8v3.8H4.6zM4.6 12.4h4.8v5H4.6zM11 12.4h4.4v1.6H11zM11 15.4h4.4V17H11z'/></svg>");

	/* Изделия из дерева: ложка. Черпак овальный и под углом — круглый превращал
	   знак в леденец. */
	--sb-c-wood: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><ellipse cx='15.6' cy='6.6' rx='3.7' ry='5.1' transform='rotate(35 15.6 6.6)'/><path d='M12.3 10.2l2.4 1.8-9.2 11.4-2.4-1.8z'/></svg>");

	/* Бинокли: два тубуса с окулярами и перемычкой. Прежний вариант из кругов
	   и планки читался гантелью. */
	--sb-c-binoculars: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.2 2.4h6.4v3.4H3.2zM14.4 2.4h6.4v3.4h-6.4z'/><path d='M3.9 6.6h5c.6 0 1 .5 1 1v9.9a3.5 3.5 0 0 1-7 0V7.6c0-.5.4-1 1-1z'/><path d='M15.1 6.6h5c.6 0 1 .5 1 1v9.9a3.5 3.5 0 0 1-7 0V7.6c0-.5.4-1 1-1z'/><path d='M9.6 9.4h4.8v3.4H9.6z'/></svg>");

	/* Игрушки: ракета. */
	--sb-c-toys: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1c3 2.8 4.8 6.6 4.8 10.8v3.4H7.2v-3.4C7.2 7.6 9 3.8 12 1z'/><path d='M7.2 12.6L3.4 17.2v3.6l3.8-2.7zM16.8 12.6l3.8 4.6v3.6l-3.8-2.7z'/><path d='M9.6 16.6h4.8L12 23z'/></svg>");

	/* Фотографии: снимок с уголком. */
	--sb-c-photos: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h18v18H3z' fill='none' stroke='black' stroke-width='2.2'/><path d='M5.6 17.6l4.3-5.6 2.9 3.5 2.5-2.9 3.7 5z'/><circle cx='8.2' cy='8.2' r='1.9'/></svg>");

	/* Плакаты: рупор. */
	--sb-c-posters: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.5 8.8h4.2L16.8 3v18l-10.1-5.8H2.5z'/><path d='M7.6 15.8h3.2l1 5.9H8.6z'/><path d='M19.3 8.2c1.7 2 1.7 5.6 0 7.6l1.7 1.4c2.3-2.7 2.3-7.7 0-10.4z'/></svg>");

	/* Настольные часы: будильник с колокольчиками. */
	--sb-c-clock: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='13.2' r='8.4' fill='none' stroke='black' stroke-width='2.2'/><path d='M11.1 7.8h1.8v5.4h-1.8z'/><path d='M12 12.3h4.4v1.8H12z'/><path d='M3.4 2.2l2.9 2.9-2 2-2.9-2.9zM20.6 2.2l-2.9 2.9 2 2 2.9-2.9z'/><path d='M6.6 20.6l1.6 1.2-1.6 2-1.6-1.2zM17.4 20.6l1.6 1.2-1.6 2-1.6-1.2z'/></svg>");

	/* Фильмоскопы: корпус с объективом и рамкой для кадра. Катушка сверху делала
	   из знака кинокамеру — у фильмоскопа её нет. */
	--sb-c-projectors: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 9h13.4v8.2H2z'/><path d='M15.4 11.6l6.6-3.7v9.4l-6.6-3.7z'/><path d='M6.4 3.6h6.6v4.2H6.4z' fill='none' stroke='black' stroke-width='2.2'/><path d='M3.6 18.2h3.2v3.2H3.6zM10.6 18.2h3.2v3.2h-3.2z'/></svg>");

	/* Фарфор: статуэтка на подставке. */
	--sb-c-porcelain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 1.5h6v2.6c0 1.7 3.5 3.5 3.5 7.6 0 4.7-2.9 8.2-6.5 8.2s-6.5-3.5-6.5-8.2c0-4.1 3.5-5.9 3.5-7.6z'/><path d='M6.4 21h11.2v2.4H6.4z'/></svg>");
}

/* Знак отдела. Размер задаёт место, где он стоит: в панели меню сорок пикселей,
   в шапке страницы категории крупнее. Цвет — текущий цвет текста. */
.sb-ico {
	display: inline-block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: var(--sb-c-symbols) center / contain no-repeat;
	mask: var(--sb-c-symbols) center / contain no-repeat;
}

.sb-ico--watches     { -webkit-mask-image: var(--sb-c-watches);     mask-image: var(--sb-c-watches); }
.sb-ico--awards      { -webkit-mask-image: var(--sb-c-awards);      mask-image: var(--sb-c-awards); }
.sb-ico--money       { -webkit-mask-image: var(--sb-c-money);       mask-image: var(--sb-c-money); }
.sb-ico--flags       { -webkit-mask-image: var(--sb-c-flags);       mask-image: var(--sb-c-flags); }
.sb-ico--uniforms    { -webkit-mask-image: var(--sb-c-uniforms);    mask-image: var(--sb-c-uniforms); }
.sb-ico--cameras     { -webkit-mask-image: var(--sb-c-cameras);     mask-image: var(--sb-c-cameras); }
.sb-ico--souvenirs   { -webkit-mask-image: var(--sb-c-souvenirs);   mask-image: var(--sb-c-souvenirs); }
.sb-ico--tools       { -webkit-mask-image: var(--sb-c-tools);       mask-image: var(--sb-c-tools); }
.sb-ico--electrical  { -webkit-mask-image: var(--sb-c-electrical);  mask-image: var(--sb-c-electrical); }
.sb-ico--measuring   { -webkit-mask-image: var(--sb-c-measuring);   mask-image: var(--sb-c-measuring); }
.sb-ico--symbols     { -webkit-mask-image: var(--sb-c-symbols);     mask-image: var(--sb-c-symbols); }
.sb-ico--chess       { -webkit-mask-image: var(--sb-c-chess);       mask-image: var(--sb-c-chess); }
.sb-ico--radio       { -webkit-mask-image: var(--sb-c-radio);       mask-image: var(--sb-c-radio); }
.sb-ico--magazines   { -webkit-mask-image: var(--sb-c-magazines);   mask-image: var(--sb-c-magazines); }
.sb-ico--wood        { -webkit-mask-image: var(--sb-c-wood);        mask-image: var(--sb-c-wood); }
.sb-ico--binoculars  { -webkit-mask-image: var(--sb-c-binoculars);  mask-image: var(--sb-c-binoculars); }
.sb-ico--toys        { -webkit-mask-image: var(--sb-c-toys);        mask-image: var(--sb-c-toys); }
.sb-ico--photos      { -webkit-mask-image: var(--sb-c-photos);      mask-image: var(--sb-c-photos); }
.sb-ico--posters     { -webkit-mask-image: var(--sb-c-posters);     mask-image: var(--sb-c-posters); }
.sb-ico--clock       { -webkit-mask-image: var(--sb-c-clock);       mask-image: var(--sb-c-clock); }
.sb-ico--projectors  { -webkit-mask-image: var(--sb-c-projectors);  mask-image: var(--sb-c-projectors); }
.sb-ico--porcelain   { -webkit-mask-image: var(--sb-c-porcelain);   mask-image: var(--sb-c-porcelain); }