/* =========================================
   НАВИГАЦИЯ И ПОИСК
   ========================================= */
.top-nav {
    display: flex;
    gap: 10px;
    padding: 10px 15px;
    background: #fff;
    align-items: center;
}

.nav-btn {
    flex: 0 0 120px;
    padding: 12px;
    background: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.nav-btn.catalog-btn { border-top: 5px solid #2196F3; }
.nav-btn.favorites-btn { border-top: 5px solid #ff9800; }
.nav-btn.active { background: #f8f9fa; font-weight: bold; }

.search-box {
    flex: 1;
    position: relative;
    background: #fff;
    border: none;
    border-top: 5px solid #f44336;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.search-icon { position: absolute; left: 15px; font-size: 18px; color: #999; pointer-events: none; }
.search-input { width: 100%; padding: 12px 15px 12px 45px; border: none; font-size: 15px; background: transparent; outline: none; }
.search-input::placeholder { color: #b0b5bf; }

/* =========================================
   ПОМОЩЬ
   ========================================= */
.help-section { padding: 10px 15px 15px; background: #fff; }
.help-btn {
    width: 100%; padding: 15px 10px; background: #fff; border: none;
    border-top: 5px solid #90a4ae; border-radius: 10px;
    font-weight: 600; font-size: 16px; cursor: pointer;
    text-align: center; color: #555;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: 0.2s;
}
.help-btn:hover { background: #f8f9fa; }
.help-content { margin-top: 10px; padding: 15px; background: #f9f9f9; border-radius: 8px; font-size: 14px; line-height: 1.6; }

/* =========================================
   🔥 АККОРДЕОН (КАТЕГОРИИ) — РАБОЧИЙ
   ========================================= */

/* Стили заголовка (Зеленая полоска) */
.accordion-header {
    cursor: pointer;
    padding: 12px 15px;
    background: #fff;
    font-weight: 600;
    border: 1px solid #ddd;
    border-top: 5px solid #4CAF50; /* Зеленый цвет */
    margin-bottom: 2px;
    border-radius: 6px;
    user-select: none;
}
.accordion-header:hover { background: #f1f8e9; }

/* Стили тела (скрыто по умолчанию) */
.accordion-body {
    display: none; /*  БЕЗ !important, чтобы JS мог управлять */
    padding: 10px 15px 15px;
    background: #fafafa;
    border-top: 1px solid #eee;
    border-radius: 0 0 6px 6px;
}

/* КЛАСС, КОТОРЫЙ ДОБАВЛЯЕТ JS ПРИ КЛИКЕ */
.accordion-item.expanded .accordion-body {
    display: block; /* Открываем */
}

/* Подкатегории (если будут) */
.subcategory-header {
    cursor: pointer;
    padding: 10px 12px;
    background: #fff;
    font-weight: 500;
    border: 1px solid #ddd;
    border-top: 5px solid #FFC107; /* Желтый цвет */
    margin: 5px 0 5px 15px;
    border-radius: 4px;
}
.subcategory-header:hover { background: #fffde7; }

.subcategory-products { display: none; padding: 8px 12px 12px; background: #fffef5; }
.subcategory-item.expanded .subcategory-products { display: block; }

/* =========================================
   ВКЛАДКИ
   ========================================= */
.view { display: none; }
.view.active { display: block; }
.subcategory-btn {
    padding: 10px 15px;
    margin: 5px 0;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.subcategory-btn:hover {
    background: #e9ecef;
    border-color: #28a745;
}