/*
 * @module index_head
 * @version 1.0.1
 * @since 2026-10-05
 * Назначение: стили интерфейса, перенесённые из partials/pages/index_head.html.
 * Связи: исходный HTML, PageRuntime и docs/modules/TEMPLATE_ASSETS.md.
 * Причина: HTML хранит разметку/серверные данные, JS — поведение, CSS — оформление.
 * История 1.0.0: исходные функции и комментарии сохранены при выделении файла.
 * История 1.0.1: проверены подключения, JSON и состояния после SPA-переходов.
 * Проверки: tests/test_template_assets.py и tests/template-assets.test.cjs.
 */
.categories-tape {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            background: #ffffff;
            border: 1px solid #ece9e6;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(35, 39, 45, 0.055), inset 0 1px 0 #fff;
            overflow-x: auto;
            scrollbar-width: none;
            scroll-snap-type: x proximity;
        }
        .categories-tape::-webkit-scrollbar { display: none; }

        .category-item {
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 8px 16px 8px 8px;
            border: 1px solid transparent;
            border-radius: 14px;
            white-space: nowrap;
            font-size: 14px;
            font-weight: 600;
            min-height: 48px;
            color: #555c62;
            text-decoration: none;
            background: #fff;
            transition: all 0.2s ease;
            scroll-snap-align: start;
        }
        .category-item .category-icon {
            width: 20px;
            height: 20px;
            padding: 8px;
            box-sizing: content-box;
            border-radius: 10px;
            background: #faf7f4;
            color: #6c7379;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: all 0.2s ease;
        }
        .category-item:hover {
            background: #fff;
            border-color: #eee6e2;
            box-shadow: 0 8px 20px rgba(35, 39, 45, 0.07);
            color: #262b30;
            transform: translateY(-1px);
        }
        .category-item:hover .category-icon {
            transform: scale(1.05);
        }
        /* Основной акцент: красный (согласно архитектуре эталонного макета) */
        .category-item.active {
            background: #e53935;
            border-color: #e53935;
            color: #fff;
            box-shadow: 0 10px 25px rgba(229, 57, 53, 0.24);
        }
        .category-item.active .category-icon {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }