/* 
 * BulbaSoft Menu - Categories Styles
 * 
 * Этот файл предназначен для кастомной стилизации всех типов категорий в меню:
 * - WooCommerce категории (топ-уровень, подкатегории, дерево)
 * - WordPress рубрики (топ-уровень, подрубрики)
 * - WordPress страницы (топ-уровень, подстраницы)
 * - Кастомные меню
 * 
 * Структура классов поддерживает вложенность до 4х уровней
 */

/* 
 * ========================================
 * ОБЩИЕ КОНТЕЙНЕРЫ КАТЕГОРИЙ
 * ========================================
 */

/* Основные контейнеры */
.bsftmenu-categories { }
.bsftmenu-categories-list { }
.bsftmenu-category-group { }

/* Контейнеры с зависимостями */
.bsftmenu-subcategories-dependent { }
.bsftmenu-subcategory-group { }

/* Состояния групп */
.bsftmenu-subcategory-group.bsftmenu-showing { }

/* 
 * ========================================
 * WOOCOMMERCE КАТЕГОРИИ
 * ========================================
 */

/* === Контейнеры WooCommerce === */
.bsftmenu-woo-categories { }
.bsftmenu-woo-categories-top { }
.bsftmenu-woo-categories-sub-list { }
.bsftmenu-woo-subcategories-dependent { }

/* === Топ-уровень WooCommerce === */
.bsftmenu-woo-category-top-item { }
.bsftmenu-woo-category-top-item:hover { }
.bsftmenu-woo-category-top-item.bsftmenu-woo-category-active { }

.bsftmenu-woo-category-top-link { }
.bsftmenu-woo-category-top-link:hover { }
.bsftmenu-woo-category-top-link:focus { }

.bsftmenu-woo-category-image { }
.bsftmenu-woo-category-image:hover { }

.bsftmenu-woo-category-name { justify-content: center;align-content: center;}
.bsftmenu-woo-category-count { }

/* === Подкатегории WooCommerce === */
.bsftmenu-woo-category-sub-item { }
.bsftmenu-woo-category-sub-item:hover { }
.bsftmenu-woo-category-sub-item.bsftmenu-woo-category-active { }

.bsftmenu-woo-category-sub-link { }
.bsftmenu-woo-category-sub-link:hover { }
.bsftmenu-woo-category-sub-link:focus { }

/* === Дерево категорий WooCommerce (до 4х уровней) === */
.bsftmenu-woo-category-item { }
.bsftmenu-woo-category-item:hover { }
.bsftmenu-woo-category-item.bsftmenu-woo-category-active { }

.bsftmenu-woo-category-link { }
.bsftmenu-woo-category-link:hover { }
.bsftmenu-woo-category-link:focus { }

/* Уровни вложенности */
.bsftmenu-woo-category-item.level-1 { }
.bsftmenu-woo-category-item.level-2 { }
.bsftmenu-woo-category-item.level-3 { }
.bsftmenu-woo-category-item.level-4 { }

/* Зависимые подкатегории */
.bsftmenu-woo-subcategories-dependent .bsftmenu-woo-category-item { }
.bsftmenu-woo-subcategories-dependent .bsftmenu-woo-category-sub-item { }

/* 
 * ========================================
 * WORDPRESS РУБРИКИ
 * ========================================
 */

/* === Контейнеры рубрик === */
.bsftmenu-categories-top { }
.bsftmenu-categories-sub-list { }

/* === Топ-уровень рубрик === */
.bsftmenu-category-top-item { }
.bsftmenu-category-top-item:hover { }
.bsftmenu-category-top-item.bsftmenu-category-active { }

.bsftmenu-category-top-link { }
.bsftmenu-category-top-link:hover { }
.bsftmenu-category-top-link:focus { }

.bsftmenu-category-name { }
.bsftmenu-category-count { }

/* === Подрубрики === */
.bsftmenu-category-sub-item { }
.bsftmenu-category-sub-item:hover { }
.bsftmenu-category-sub-item.bsftmenu-category-active { }

.bsftmenu-category-sub-link { }
.bsftmenu-category-sub-link:hover { }
.bsftmenu-category-sub-link:focus { }

/* === Общие классы категорий (до 4х уровней) === */
.bsftmenu-category-item { }
.bsftmenu-category-item:hover { }
.bsftmenu-category-item.bsftmenu-category-active { }

.bsftmenu-category-link { }
.bsftmenu-category-link:hover { }
.bsftmenu-category-link:focus { }

/* Уровни вложенности */
.bsftmenu-category-item.level-1 { }
.bsftmenu-category-item.level-2 { }
.bsftmenu-category-item.level-3 { }
.bsftmenu-category-item.level-4 { }

/* 
 * ========================================
 * WORDPRESS СТРАНИЦЫ
 * ========================================
 */

/* ========================================
 * СТРАНИЦЫ - STYLED LIKE CUSTOM MENU
 * ======================================== */

/* Основной контейнер страниц */
.bsftmenu-pages-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bsftmenu-pages-nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 15px; /* Отступ для подменю */
    margin-top: 5px;
}

/* === Элементы страниц === */
.bsftmenu-pages-nav-item {
    list-style: none;
    margin-bottom: 3px;
}

.bsftmenu-pages-nav-item a {
    color: #000;
    display: flex;
    font-size: 15px;
    padding: 10px;
    background: #fff;
    border-radius: 3px;
    justify-content: flex-start;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bsftmenu-pages-nav-item a:hover {
    background: #f0f0f0;
    text-decoration: none;
}

.bsftmenu-pages-nav-item.bsftmenu-page-active a {
    background: #002742;
    color: #fff;
    text-decoration: none;
}

/* Уровни вложенности страниц */
.bsftmenu-pages-nav-level-1 { }

.bsftmenu-pages-nav-level-2 a {
    font-size: 14px;
    padding: 8px;
    background: #f8f9fa;
}

.bsftmenu-pages-nav-level-3 a {
    font-size: 13px;
    padding: 6px;
    background: #f1f3f4;
}

.bsftmenu-pages-nav-level-4 a {
    font-size: 12px;
    padding: 5px;
    background: #e9ecef;
}

/* Стили для разных уровней подменю страниц (nested структура) */
.bsftmenu-pages-nav-submenu-level-2 {
    border-left: 2px solid #e9ecef;
    padding-left: 10px;
}

.bsftmenu-pages-nav-submenu-level-3 {
    border-left: 2px solid #dee2e6;
    padding-left: 8px;
}

.bsftmenu-pages-nav-submenu-level-4 {
    border-left: 2px solid #ced4da;
    padding-left: 6px;
}

/* === ИЕРАРХИЧЕСКАЯ СТИЛИЗАЦИЯ ДЛЯ РОДИТЕЛЬСКИХ БЛОКОВ СТРАНИЦ === */
/* Аналогично кастомному меню - отступы и границы для вложенности в родительских блоках */

.bsftmenu-pages-nav .bsftmenu-pages-nav-level-2 {
    margin-left: 15px;
    padding-left: 12px;
    border-left: 3px solid #e9ecef;
    position: relative;
}

.bsftmenu-pages-nav .bsftmenu-pages-nav-level-3 {
    margin-left: 30px;
    padding-left: 12px;
    border-left: 3px solid #dee2e6;
    position: relative;
}

.bsftmenu-pages-nav .bsftmenu-pages-nav-level-4 {
    margin-left: 45px;
    padding-left: 12px;
    border-left: 3px solid #ced4da;
    position: relative;
}

/* Визуальные индикаторы для вложенных элементов в родительских блоках */
.bsftmenu-pages-nav .bsftmenu-pages-nav-level-2::before {
    content: "└";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #e9ecef;
    font-size: 16px;
    font-weight: bold;
}

.bsftmenu-pages-nav .bsftmenu-pages-nav-level-3::before {
    content: "└";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #dee2e6;
    font-size: 14px;
    font-weight: bold;
}

.bsftmenu-pages-nav .bsftmenu-pages-nav-level-4::before {
    content: "└";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #ced4da;
    font-size: 12px;
    font-weight: bold;
}

/* Элементы с детьми */
.bsftmenu-pages-nav-item.has-children > a::after {
    content: '▸';
    margin-left: auto;
    font-size: 12px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.bsftmenu-pages-nav-item.has-children:hover > a::after {
    opacity: 1;
}

/* Стили для разных уровней подменю */
.bsftmenu-pages-nav-submenu-level-2 {
    border-left: 2px solid #e9ecef;
    padding-left: 10px;
}

.bsftmenu-pages-nav-submenu-level-3 {
    border-left: 2px solid #dee2e6;
    padding-left: 8px;
}

.bsftmenu-pages-nav-submenu-level-4 {
    border-left: 2px solid #ced4da;
    padding-left: 6px;
}

/* 
 * ========================================
 * ЗАПИСИ
 * ========================================
 */

/* === Контейнеры записей === */
.bsftmenu-posts-list { }

/* === Элементы записей === */
.bsftmenu-post-item { }
.bsftmenu-post-item:hover { }
.bsftmenu-post-item.bsftmenu-post-active { }

.bsftmenu-post-link { }
.bsftmenu-post-link:hover { }
.bsftmenu-post-link:focus { }

.bsftmenu-post-title { }
.bsftmenu-post-excerpt { }
.bsftmenu-post-date { }
.bsftmenu-post-thumbnail { }

/* 
 * ========================================
 * КАСТОМНЫЕ МЕНЮ
 * ========================================
 */

/* === Контейнеры кастомных меню === */
.bsftmenu-custom-menu { }
.bsftmenu-custom-menu-list { }

/* Новые контейнеры кастомного меню */
.bsftmenu-custom-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Horizontal top bar layout */
.bsftmenu-custom-nav.bsftmenu-horizontal {
    display: flex;
    gap: var(--bsftmenu-top-level-gap, 12px);
    width: 100%;
}

.bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item {
    position: relative; /* anchor for absolute submenu */
}

/* Stretch mode: evenly distribute top-level items */
.bsftmenu-custom-nav.bsftmenu-horizontal.bsftmenu-horizontal-stretch {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.bsftmenu-custom-nav.bsftmenu-horizontal.bsftmenu-horizontal-stretch > .bsftmenu-custom-nav-item {
    display: table-cell;
}

.bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item > a {
    background: var(--bsftmenu-top-link-bg, transparent);
    color: var(--bsftmenu-top-link-color, inherit);
    padding: var(--bsftmenu-top-link-pad, 10px 14px);
    font-size: var(--bsftmenu-top-link-font-size, 15px);
}

/* Dropdowns for horizontal layout */
.bsftmenu-custom-nav.bsftmenu-horizontal .bsftmenu-custom-nav-submenu {
    position: absolute;
    left: 0;
    right: auto;
    top: 100%; /* place directly under parent item */
    margin-top: 0; /* avoid hover gap */
    margin-left: 0; /* align with parent item */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    /* Не уже родительского пункта и не меньше значения из админки (иначе «пустое» белое поле и узкие ссылки) */
    width: max(100%, var(--bsftmenu-dropdown-min-width, 200px));
    box-sizing: border-box;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    display: none;
    z-index: 1001;
    padding: 8px;
}

/* Show on hover only when wrapper indicates hover trigger */
.bsftmenu_wrap.bsftmenu-trigger-hover .bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item:hover > .bsftmenu-custom-nav-submenu {
    display: block;
}

/* Show on click when item is opened */
.bsftmenu_wrap.bsftmenu-trigger-click .bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item.bsftmenu-open > .bsftmenu-custom-nav-submenu {
    display: block;
}

/* Подпункты первого уровня выпадашки — сетка (колонки из админки, --bsftmenu-wp-submenu-cols) */
.bsftmenu_wrap.bsftmenu-trigger-hover .bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item:hover > .bsftmenu-custom-nav-submenu.bsftmenu-wp-submenu-grid,
.bsftmenu_wrap.bsftmenu-trigger-click .bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item.bsftmenu-open > .bsftmenu-custom-nav-submenu.bsftmenu-wp-submenu-grid {
    display: grid;
    grid-template-columns: repeat(var(--bsftmenu-wp-submenu-cols, 1), minmax(0, 1fr));
    gap: 6px 12px;
    align-content: start;
}

.bsftmenu-custom-nav.bsftmenu-horizontal .bsftmenu-custom-nav-submenu.bsftmenu-wp-submenu-grid > .bsftmenu-show-more-container {
    grid-column: 1 / -1;
}

/* Первый уровень WP-меню: fixed-позиционирование из JS (режим «не учитывать ширину родителя») */
.bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item > .bsftmenu-custom-nav-submenu.bsftmenu-wp-submenu-js {
    box-sizing: border-box;
}

.bsftmenu-custom-nav.bsftmenu-horizontal .bsftmenu-custom-nav-submenu .bsftmenu-custom-nav-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.bsftmenu-custom-nav.bsftmenu-horizontal .bsftmenu-custom-nav-submenu .bsftmenu-custom-nav-item > a {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: var(--bsftmenu-sub-link-bg, transparent);
    color: var(--bsftmenu-sub-link-color, inherit);
    padding: var(--bsftmenu-sub-link-pad, 8px 10px);
    font-size: var(--bsftmenu-sub-link-font-size, 15px);
}

/* Hover states (top-level) */
.bsftmenu_wrap.bsftmenu-trigger-hover .bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item > a:hover,
.bsftmenu_wrap.bsftmenu-trigger-click .bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item.bsftmenu-open > a {
    background: var(--bsftmenu-top-link-bg-hover, var(--bsftmenu-top-link-bg, transparent));
    color: var(--bsftmenu-top-link-color-hover, var(--bsftmenu-top-link-color, inherit));
}

/* Hover states (submenu links) */
.bsftmenu-custom-nav.bsftmenu-horizontal .bsftmenu-custom-nav-submenu .bsftmenu-custom-nav-item > a:hover {
    background: var(--bsftmenu-sub-link-bg-hover, var(--bsftmenu-sub-link-bg, transparent));
    color: var(--bsftmenu-sub-link-color-hover, var(--bsftmenu-sub-link-color, inherit));
}

.bsftmenu-custom-nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* === Элементы кастомного меню === */
.bsftmenu-menu-item { }
.bsftmenu-menu-item:hover { }
.bsftmenu-menu-item.bsftmenu-menu-active { }

.bsftmenu-menu-link { }
.bsftmenu-menu-link:hover { }
.bsftmenu-menu-link:focus { }

/* Новые элементы кастомного меню */
.bsftmenu_wrap:not(.bsftmenu-wp-mobile-variant1) .bsftmenu-custom-nav-item {
    list-style: none;
    margin-bottom: 3px;
}

/*
 * Вертикальное кастомное меню: цвета из админки (CSS-переменные на .bsftmenu_wrap для типа «Меню WordPress»).
 * Горизонтальное меню не дублируем — выше используются те же переменные (.bsftmenu-horizontal > … > a).
 */
.bsftmenu_wrap:not(.bsftmenu-wp-mobile-variant1) .bsftmenu-custom-nav:not(.bsftmenu-horizontal) > .bsftmenu-custom-nav-item > a {
    color: var(--bsftmenu-top-link-color, #000);
    display: flex;
    font-size: var(--bsftmenu-top-link-font-size, 15px);
    padding: var(--bsftmenu-top-link-pad, 10px);
    background: var(--bsftmenu-top-link-bg, #fff);
    border-radius: 3px;
    justify-content: flex-start;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bsftmenu_wrap:not(.bsftmenu-wp-mobile-variant1) .bsftmenu-custom-nav:not(.bsftmenu-horizontal) > .bsftmenu-custom-nav-item > a:hover {
    background: var(--bsftmenu-top-link-bg-hover, var(--bsftmenu-top-link-bg, #f0f0f0));
    color: var(--bsftmenu-top-link-color-hover, var(--bsftmenu-top-link-color, inherit));
    text-decoration: none;
}

.bsftmenu_wrap:not(.bsftmenu-wp-mobile-variant1) .bsftmenu-custom-nav:not(.bsftmenu-horizontal) > .bsftmenu-custom-nav-item.bsftmenu-menu-active > a {
    background: #002742;
    color: #fff;
    text-decoration: none;
}

.bsftmenu_wrap:not(.bsftmenu-wp-mobile-variant1) .bsftmenu-custom-nav:not(.bsftmenu-horizontal) .bsftmenu-custom-nav-submenu .bsftmenu-custom-nav-item > a {
    color: var(--bsftmenu-sub-link-color, #000);
    display: flex;
    font-size: var(--bsftmenu-sub-link-font-size, 15px);
    padding: var(--bsftmenu-sub-link-pad, 10px);
    background: var(--bsftmenu-sub-link-bg, #fff);
    border-radius: 3px;
    justify-content: flex-start;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bsftmenu_wrap:not(.bsftmenu-wp-mobile-variant1) .bsftmenu-custom-nav:not(.bsftmenu-horizontal) .bsftmenu-custom-nav-submenu .bsftmenu-custom-nav-item > a:hover {
    background: var(--bsftmenu-sub-link-bg-hover, var(--bsftmenu-sub-link-bg, #f0f0f0));
    color: var(--bsftmenu-sub-link-color-hover, var(--bsftmenu-sub-link-color, inherit));
    text-decoration: none;
}

.bsftmenu_wrap:not(.bsftmenu-wp-mobile-variant1) .bsftmenu-custom-nav:not(.bsftmenu-horizontal) .bsftmenu-custom-nav-submenu .bsftmenu-custom-nav-item.bsftmenu-menu-active > a {
    background: #002742;
    color: #fff;
    text-decoration: none;
}

/* Мобильные элементы кастомного меню (отдельный класс) */
.bsftmenu-custom-nav-item-mobile {
    list-style: none;
    margin-bottom: 3px;
}

.bsftmenu-custom-nav-item-mobile a {
    color: var(--bsftmenu-top-link-color, #000);
    display: flex;
    font-size: var(--bsftmenu-top-link-font-size, 15px);
    padding: var(--bsftmenu-top-link-pad, 10px);
    background: var(--bsftmenu-top-link-bg, #fff);
    border-radius: 3px;
    justify-content: flex-start;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #ddd;
}

.bsftmenu-custom-nav-item-mobile a:hover {
    background: var(--bsftmenu-top-link-bg-hover, var(--bsftmenu-top-link-bg, #f0f0f0));
    color: var(--bsftmenu-top-link-color-hover, var(--bsftmenu-top-link-color, inherit));
    text-decoration: none;
}

.bsftmenu-custom-nav-item-mobile.bsftmenu-menu-active a {
    background: #002742;
    color: #fff;
    text-decoration: none;
}

/* Уровни вложенности */
.bsftmenu-menu-item.level-1 { }
.bsftmenu-menu-item.level-2 { }
.bsftmenu-menu-item.level-3 { }
.bsftmenu-menu-item.level-4 { }

/* Новые уровни вложенности кастомного меню */
.bsftmenu-custom-nav-level-1 { }

.bsftmenu-custom-nav-level-2 a {
    font-size: 14px;
    padding: 8px;
    background: #f8f9fa;
}

.bsftmenu-custom-nav-level-3 a {
    font-size: 13px;
    padding: 6px;
    background: #f1f3f4;
}

.bsftmenu-custom-nav-level-4 a {
    font-size: 12px;
    padding: 5px;
    background: #e9ecef;
}

/* Элементы с детьми */
.bsftmenu-custom-nav-item.has-children > a::after {
    content: '▸';
    margin-left: auto;
    font-size: 12px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

/* Arrow direction for horizontal top-level items */
.bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item.has-children > a::after {
    content: '▾';
    margin-left: 6px;
}

.bsftmenu_wrap.bsftmenu-trigger-click .bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item.has-children.bsftmenu-open > a::after,
.bsftmenu_wrap.bsftmenu-trigger-hover .bsftmenu-custom-nav.bsftmenu-horizontal > .bsftmenu-custom-nav-item.has-children:hover > a::after {
    transform: rotate(180deg);
}

.bsftmenu-custom-nav-item.has-children:hover > a::after {
    opacity: 1;
}

/* Подменю */
.bsftmenu-submenu-container { }
.bsftmenu-submenu-group { }
.bsftmenu-submenu-group.bsftmenu-showing { }

.bsftmenu-submenu-item { }
.bsftmenu-submenu-item:hover { }
.bsftmenu-submenu-item.bsftmenu-menu-active { }

.bsftmenu-submenu-link { }
.bsftmenu-submenu-link:hover { }
.bsftmenu-submenu-link:focus { }

/* Стили для разных уровней подменю */
.bsftmenu-custom-nav-submenu-level-2 {
    border-left: 2px solid #e9ecef;
    padding-left: 10px;
}

.bsftmenu-custom-nav-submenu-level-3 {
    border-left: 2px solid #dee2e6;
    padding-left: 8px;
}

.bsftmenu-custom-nav-submenu-level-4 {
    border-left: 2px solid #ced4da;
    padding-left: 6px;
}

/* 
 * ========================================
 * ОБЩИЕ СОСТОЯНИЯ И МОДИФИКАТОРЫ
 * ========================================
 */

/* === Активные состояния === */
.bsftmenu-category-active { }
.bsftmenu-woo-category-active { }
.bsftmenu-page-active { }
.bsftmenu-post-active { }
.bsftmenu-menu-active { }

/* === Анимации появления (общие) === */
.bsftmenu-showing { }
.bsftmenu-hiding { }
.bsftmenu-animate-in { }
.bsftmenu-animate-out { }

/* === Типы отображения === */
.bsftmenu-with-images { }
.bsftmenu-with-count { }
.bsftmenu-with-description { }
.bsftmenu-compact-view { }
.bsftmenu-expanded-view { }

/* === Специальные элементы === */
.bsftmenu-separator { }
.bsftmenu-divider { }
.bsftmenu-heading { }
.bsftmenu-no-items { }
.bsftmenu-loading { }

/* 
 * ========================================
 * RESPONSIVE (ЗАГЛУШКИ)
 * ========================================
 */

/* Desktop стили (по умолчанию выше) */

/* Tablet */
@media (max-width: 1024px) {
    /* Tablet-specific стили */
}

/* Mobile */
@media (max-width: 768px) {
    /* Mobile-specific стили */
}

/* Small mobile */
@media (max-width: 480px) {
    /* Small mobile-specific стили */
}

/* 
 * ========================================
 * DARK THEME (ЗАГЛУШКИ)
 * ========================================
 */

@media (prefers-color-scheme: dark) {
    /* Dark theme стили */
}

/* 
 * ========================================
 * ВАШИ КАСТОМНЫЕ СТИЛИ
 * ========================================
 */

/* Добавляйте ваши стили ниже */

.bsftmenu-woo-categories-top .bsftmenu-woo-category-level-1 {
	list-style: none;
	margin-bottom: 3px;
}

.bsftmenu-woo-categories-top .bsftmenu-woo-category-level-1 a {
	color: #000;
	display: flex;
	font-size: 15px;
	padding: 10px;
	background: #fff;
	border-radius: 3px;
	justify-content: flex-start;
}

.bsftmenu-woo-categories-top .bsftmenu-woo-category-level-1.bsftmenu-woo-category-active a {
	background: #002642;
	color: #fff;
	text-decoration: none;
}

.bsftmenu-woo-category-count {
	font-size: 10px;
	color: #999;
	margin-left: 3px;
}

.bsftmenu-woo-categories-top .bsftmenu-woo-category-image {}

.bsftmenu-woo-categories-top .bsftmenu-woo-category-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
}

/* ENHANCED: More specific selectors for image sizing to ensure CSS variables work */
.bsftmenu-woo-categories .bsftmenu-woo-category-image img,
.bsftmenu-woo-categories-top .bsftmenu-woo-category-image img,
.bsftmenu-woo-subcategories .bsftmenu-woo-category-image img,
.bsftmenu-woo-subcategories-dependent .bsftmenu-woo-category-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
	object-fit: cover;
}

/*
 * Режим «изображение + название»: flex.css (flex_contain + wf20 + wf1).
 * flex_contain по умолчанию с flex-wrap:wrap — из‑за этого длинный текст уезжал под иконку.
 */
.bsftmenu-category-link--with-image.flex_contain {
	flex-wrap: nowrap;
	width: 100%;
	box-sizing: border-box;
	align-items: flex-start;
}

.bsftmenu-category-link--with-image .bsftmenu-category-image-cell {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bsftmenu-category-link--with-image .bsftmenu-item-text-col {
	min-width: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.bsftmenu-category-link--with-image .bsftmenu-item-text-col .bsftmenu-woo-category-name,
.bsftmenu-category-link--with-image .bsftmenu-item-text-col .bsftmenu-wp-category-name,
.bsftmenu-category-link--with-image .bsftmenu-item-text-col .bsftmenu-pages-nav-name {
	display: inline;
	justify-content: flex-start;
	align-content: unset;
}

.bsftmenu-category-link--with-image .bsftmenu-woo-category-image img,
.bsftmenu-category-link--with-image .bsftmenu-wp-category-image img,
.bsftmenu-category-link--with-image .bsftmenu-page-image img {
	margin-right: 0;
}

/* Старые float стили удалены - используется CSS Grid с фиксированными столбцами */

.bsftmenu_submenu_block .bsftmenu-woo-categories-sub-list {}

.bsftmenu_submenu_block .bsftmenu-woo-categories-sub-list ul {}

.bsftmenu_submenu_block .bsftmenu-woo-categories-sub-list ul li.bsftmenu-woo-category-level-1 {}

.bsftmenu_submenu_block .bsftmenu-woo-categories-sub-list ul li.bsftmenu-woo-category-level-1 a {}

.bsftmenu_submenu_block .bsftmenu-woo-categories-sub-list ul li.bsftmenu-woo-category-level-2 {}

.bsftmenu_submenu_block .bsftmenu-woo-categories-sub-list ul li.bsftmenu-woo-category-level-2 a {}


/* 
 * ========================================
 * СЕТКА БЛОКОВ ПОДКАТЕГОРИЙ
 * ========================================
 */

/* Контейнер сетки для подкатегорий - CSS Grid с фиксированными столбцами для стабильного динамического контента */
.bsftmenu-woo-subcategories {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
    gap: 15px;
    align-items: start;
}

/* Для режима depends_on_parent - упрощаем структуру */
.bsftmenu-woo-subcategories-dependent {
    display: block;
}

/* Для зависимых Woo-блоков, кроме брендов, оставляем grid-группы */
.bsftmenu-woo-subcategories-dependent:not(.bsftmenu-brands-dependent) .bsftmenu-woo-subcategory-group {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
    gap: 15px;
    align-items: start;
    width: 100%;
    margin-bottom: 20px;
}

/* Фиксированные столбцы - каждый столбец независимый flex контейнер */
.bsftmenu-grid-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 0; /* Позволяет столбцу расти по содержимому */
}

/* Блоки внутри столбцов */
.bsftmenu-grid-column .bsftmenu_submenu_block {
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0; /* Блоки не сжимаются */
}

/* Анимации внутри фиксированных столбцов работают стабильно */
.bsftmenu-grid-column .bsftmenu-category-item.bsftmenu-showing,
.bsftmenu-grid-column .bsftmenu-category-item.bsftmenu-hiding,
.bsftmenu-grid-column .bsftmenu-category-item.bsftmenu-shown {
    display: list-item; /* Сохраняем list-style markers */
}

/* Поддержка динамического роста высоты родительских контейнеров */
.bsftmenu_block .bsftmenu-woo-subcategories,
.bsftmenu_block .bsftmenu-woo-subcategories-dependent .bsftmenu-woo-subcategory-group {
    /* При показе дополнительных элементов контейнер должен расти */
    transition: height 0.3s ease, min-height 0.3s ease;
    overflow: visible;
}

/* Фиксированные столбцы поддерживают плавный рост */
.bsftmenu_block .bsftmenu-grid-column {
    transition: height 0.3s ease;
    overflow: visible;
}

/* Блоки внутри столбцов поддерживают анимированный рост */
.bsftmenu_block .bsftmenu_submenu_block {
    transition: height 0.2s ease, min-height 0.2s ease;
    overflow: visible;
}

.bsftmenu_submenu_block ul {
  background: #fff;
  border-radius: 3px;
  padding: 10px;
  box-sizing: border-box;
}
.bsftmenu_submenu_block .bsftmenu-woo-category-level-1 {
  list-style: none;
}
.bsftmenu_submenu_block .bsftmenu-woo-category-level-1 a {
  font-weight: bold;
  color: #000;
  font-size: 15px;
}

/* === КАСТОМНЫЕ МАРКЕРЫ СПИСКОВ === */
/*
 * ИСПОЛЬЗОВАНИЕ:
 * 
 * 1. БАЗОВОЕ ИСПОЛЬЗОВАНИЕ:
 *    По умолчанию все списки используют кастомные маркеры через ::before
 *    
 * 2. НАСТРОЙКА ЧЕРЕЗ CSS ПЕРЕМЕННЫЕ:
 *    .my-menu {
 *      --list-marker-symbol: "→";
 *      --list-marker-color: #3498db;
 *      --list-marker-size: 16px;
 *      --list-marker-indent: 25px;
 *    }
 *    
 * 3. ПРЕДУСТАНОВЛЕННЫЕ СТИЛИ:
 *    <ul class="bsftmenu-woo-categories-nested bsft-markers-arrows">
 *    <ul class="bsftmenu-woo-categories-nested bsft-markers-stars">
 *    
 * 4. ИЗОБРАЖЕНИЯ КАК МАРКЕРЫ:
 *    <ul class="bsftmenu-woo-categories-nested bsft-image-markers">
 *    .my-menu {
 *      --list-marker-image: url('/path/to/icon.svg');
 *      --list-marker-image-size: 20px 20px;
 *    }
 */

/* Убираем стандартные маркеры для всех списков категорий */
.bsftmenu-woo-categories-nested {
  list-style: none;
  padding-left: 0;
}

.bsftmenu-woo-categories-nested li {
  list-style: none;
  position: relative;
  padding-left: var(--list-marker-indent, 10px);
}

/* Кастомные маркеры через псевдоэлемент ::before */
/* Базовые маркеры для общих элементов (level-1 и без уровня) */
.bsftmenu-woo-categories-nested li::before {
  content: var(--list-marker-symbol, "•");
  position: absolute;
  left: var(--list-marker-left, 0px);
  top: var(--list-marker-top, 0px);
  color: var(--list-marker-color, #666);
  font-size: var(--list-marker-size, 14px);
  line-height: var(--list-marker-line-height, 1.5);
  font-weight: var(--list-marker-weight, normal);
}

/* Скрытие маркеров когда установлено "Без маркеров" */
.bsftmenu-woo-categories-nested li::before[content=""] {
  display: none;
}

/* Специальная логика для скрытия маркеров */
.bsftmenu_block[style*="--list-marker-symbol: \"\""] .bsftmenu-woo-categories-nested li::before,
.bsftmenu_block[style*="--list-marker-symbol:\"\""] .bsftmenu-woo-categories-nested li::before {
  display: none;
}

/* Управление отображением маркеров через CSS переменную */
.bsftmenu-woo-categories-nested li::before,
.bsftmenu-wp-categories-nested li::before,
.bsftmenu-custom-nav-nested li::before {
  display: var(--list-marker-display, inline);
}

/* Устаревшая логика - оставляем для совместимости */
.bsftmenu_block[style*="--list-marker-symbol: \"\""] {
  --list-marker-display: none;
}

/* Альтернативный вариант - маркеры как фоновые изображения */
.bsftmenu-woo-categories-nested.bsft-image-markers li::before {
  content: "";
  background-image: var(--list-marker-image, none);
  background-size: var(--list-marker-image-size, 16px 16px);
  background-repeat: no-repeat;
  background-position: center;
  width: var(--list-marker-image-width, 16px);
  height: var(--list-marker-image-height, 16px);
  display: inline-block;
}

/* === ПРЕДУСТАНОВЛЕННЫЕ СТИЛИ МАРКЕРОВ === */

/* Стиль "Стрелки" */
.bsftmenu-woo-categories-nested.bsft-markers-arrows li::before {
  content: "→";
  color: #3498db;
  font-weight: bold;
}

/* Стиль "Точки" */
.bsftmenu-woo-categories-nested.bsft-markers-dots li::before {
  content: "•";
  color: #e74c3c;
}

/* Стиль "Ромбы" */
.bsftmenu-woo-categories-nested.bsft-markers-diamonds li::before {
  content: "♦";
  color: #9b59b6;
}

/* Стиль "Звёздочки" */
.bsftmenu-woo-categories-nested.bsft-markers-stars li::before {
  content: "★";
  color: #f39c12;
}

/* Стиль "Треугольники" */
.bsftmenu-woo-categories-nested.bsft-markers-triangles li::before {
  content: "▸";
  color: #27ae60;
}

/* Стиль "Плюсики" */
.bsftmenu-woo-categories-nested.bsft-markers-plus li::before {
  content: "+";
  color: #34495e;
  font-weight: bold;
}

/* === СТИЛИ ДЛЯ WORDPRESS РУБРИК === */

.bsftmenu-wp-categories-nested {
  list-style: none;
  padding-left: 0;
}

.bsftmenu-wp-categories-nested li {
  list-style: none;
  position: relative;
  padding-left: var(--list-marker-indent, 10px);
}

.bsftmenu-wp-categories-nested li::before {
  content: var(--list-marker-symbol, "•");
  position: absolute;
  left: var(--list-marker-left, 0px);
  top: var(--list-marker-top, 0px);
  color: var(--list-marker-color, #666);
  font-size: var(--list-marker-size, 14px);
  line-height: var(--list-marker-line-height, 1.5);
  font-weight: var(--list-marker-weight, normal);
}

/* Специфичные правила для WordPress уровней тоже должны учитывать общую переменную */
.bsftmenu-wp-categories-nested .bsftmenu-wp-category-level-2::before {
  content: var(--list-marker-symbol, var(--list-marker-level2-symbol, "◦"));
  color: var(--list-marker-color, #666);
  font-size: var(--list-marker-size, 12px);
}

.bsftmenu-wp-categories-nested .bsftmenu-wp-category-level-3::before {
  content: var(--list-marker-symbol, var(--list-marker-level3-symbol, "▫"));
  color: var(--list-marker-color, #999);
  font-size: var(--list-marker-size, 10px);
}

.bsftmenu-wp-categories-nested .bsftmenu-wp-category-level-4::before {
  content: var(--list-marker-symbol, var(--list-marker-level4-symbol, "▪"));
  color: var(--list-marker-color, #ccc);
  font-size: var(--list-marker-size, 8px);
}

/* Скрытие маркеров для WordPress рубрик */
.bsftmenu_block[style*="--list-marker-symbol: \"\""] .bsftmenu-wp-categories-nested li::before,
.bsftmenu_block[style*="--list-marker-symbol:\"\""] .bsftmenu-wp-categories-nested li::before {
  display: none;
}

/* === СТИЛИ ДЛЯ КАСТОМНОГО МЕНЮ === */

.bsftmenu-custom-nav-nested {
  list-style: none;
  padding-left: 0;
}

.bsftmenu-custom-nav-nested li {
  list-style: none;
  position: relative;
  padding-left: var(--list-marker-indent, 10px);
}

.bsftmenu-custom-nav-nested li::before {
  content: var(--list-marker-symbol, "•");
  position: absolute;
  left: var(--list-marker-left, 0px);
  top: var(--list-marker-top, 0px);
  color: var(--list-marker-color, #666);
  font-size: var(--list-marker-size, 14px);
  line-height: var(--list-marker-line-height, 1.5);
  font-weight: var(--list-marker-weight, normal);
}

/* Специфичные правила для кастомного меню уровней */
.bsftmenu-custom-nav-nested .bsftmenu-custom-nav-level-2::before {
  content: var(--list-marker-symbol, var(--list-marker-level2-symbol, "◦"));
  color: var(--list-marker-color, #666);
  font-size: var(--list-marker-size, 12px);
}

.bsftmenu-custom-nav-nested .bsftmenu-custom-nav-level-3::before {
  content: var(--list-marker-symbol, var(--list-marker-level3-symbol, "▫"));
  color: var(--list-marker-color, #999);
  font-size: var(--list-marker-size, 10px);
}

.bsftmenu-custom-nav-nested .bsftmenu-custom-nav-level-4::before {
  content: var(--list-marker-symbol, var(--list-marker-level4-symbol, "▪"));
  color: var(--list-marker-color, #ccc);
  font-size: var(--list-marker-size, 8px);
}

/* Скрытие маркеров для кастомного меню */
.bsftmenu_block[style*="--list-marker-symbol: \"\""] .bsftmenu-custom-nav-nested li::before,
.bsftmenu_block[style*="--list-marker-symbol:\"\""] .bsftmenu-custom-nav-nested li::before {
  display: none;
}

/* Различные стили маркеров для разных уровней */
/* Приоритет: --list-marker-symbol (от админки) → уровневые символы (по умолчанию) */
.bsftmenu-woo-categories-nested .bsftmenu-woo-category-level-2::before {
  color: var(--list-marker-level2-color, var(--list-marker-color, #666));
  content: var(--list-marker-symbol, var(--list-marker-level2-symbol, "◦"));
  font-size: var(--list-marker-level2-size, var(--list-marker-size, 12px));
}

.bsftmenu-woo-categories-nested .bsftmenu-woo-category-level-3::before {
  color: var(--list-marker-level3-color, var(--list-marker-color, #999));
  content: var(--list-marker-symbol, var(--list-marker-level3-symbol, "▫"));
  font-size: var(--list-marker-level3-size, var(--list-marker-size, 10px));
}

.bsftmenu-woo-categories-nested .bsftmenu-woo-category-level-4::before {
  color: var(--list-marker-level4-color, var(--list-marker-color, #ccc));
  content: var(--list-marker-symbol, var(--list-marker-level4-symbol, "▪"));
  font-size: var(--list-marker-level4-size, var(--list-marker-size, 8px));
}

/* === ОТЛАДКА МАРКЕРОВ === */

/* Временная отладка - подсветка элементов с маркерами */
.bsftmenu-woo-categories-nested li::before,
.bsftmenu-wp-categories-nested li::before,
.bsftmenu-custom-nav-nested li::before {
  /* Добавляем отладочную подсветку */
  /*background: rgba(255, 0, 0, 0.2);*/ /* Закомментировано по умолчанию */
  /*border: 1px solid red;*/ /* Закомментировано по умолчанию */
}

/* Визуальная проверка CSS переменных */
.bsftmenu_block[style*="--list-marker-symbol"] {
  /*border: 2px solid green !important;*/ /* Закомментировано по умолчанию */
}

/* Отладка - показываем какие блоки имеют CSS переменные */
.bsftmenu_block[style*="--list-marker-symbol"]::after {
  /*content: "Has marker variable";*/ /* Закомментировано по умолчанию */
  /*position: absolute;*/ 
  /*top: 0;*/
  /*right: 0;*/
  /*background: green;*/
  /*color: white;*/
  /*padding: 2px 5px;*/
  /*font-size: 10px;*/
  /*z-index: 9999;*/
}

/* === АДАПТИВНЫЕ НАСТРОЙКИ === */

/* Уменьшение размеров маркеров на мобильных устройствах */
@media (max-width: 768px) {
  .bsftmenu-woo-categories-nested li,
  .bsftmenu-wp-categories-nested li,
  .bsftmenu-custom-nav-nested li {
    padding-left: var(--list-marker-indent-mobile, 15px);
  }
  
  .bsftmenu-woo-categories-nested li::before,
  .bsftmenu-wp-categories-nested li::before,
  .bsftmenu-custom-nav-nested li::before {
    font-size: var(--list-marker-size-mobile, 12px);
  }
  
  .bsftmenu-woo-categories-nested.bsft-image-markers li::before {
    width: var(--list-marker-image-width-mobile, 12px);
    height: var(--list-marker-image-height-mobile, 12px);
    background-size: var(--list-marker-image-size-mobile, 12px 12px);
  }
}

.bsftmenu_submenu_block .bsftmenu-woo-category-level-2 {
  list-style: none;
}
.bsftmenu_submenu_block .bsftmenu-woo-category-level-2 a {
  font-weight: normal;
  color: #000;
  font-size: 15px;
}

.bsftmenu_submenu_block ul ul {
	padding: var(--subcategory-padding-vertical, 5px) var(--subcategory-padding-horizontal, 10px);
}

.bsftmenu_submenu_block ul ul li {
	margin-bottom: 5px;
}

.bsftmenu-woo-categories-sub-list a {
	display: flex;
	flex-wrap: wrap;
}

.bsftmenu-custom-posts .bsftmenu-woo-category-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
}

/* ENHANCED: More specific selectors for custom posts to ensure CSS variables work */
.bsftmenu-custom-posts .bsftmenu-woo-category-image img,
.bsftmenu-custom-posts .bsftmenu-custom-post-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
	object-fit: cover;
}

.bsftmenu-custom-posts .bsftmenu-custom-posts-list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}


.bsftmenu-custom-posts .bsftmenu-custom-post-item {
	list-style: none;
	margin-bottom: 3px;
	width: 100%;
	max-width: 100%;
}

.bsftmenu-custom-posts .bsftmenu-custom-post-item a {
	color: #000;
	display: flex;
	font-size: 15px;
	padding: 10px;
	background: #fff;
	border-radius: 3px;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.bsftmenu-custom-posts .bsftmenu-custom-post-item a:hover {
	background: #002742;
	color: #fff;
	text-decoration: none;
}

.bsftmenu-custom-posts .bsftmenu-woo-category-image {
	display: flex;
	flex: 0 0 auto;
	min-width: 0;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.bsftmenu-custom-posts .bsftmenu-woo-category-name {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
}

/* Placeholder styles for custom posts without images */
.bsftmenu-custom-posts .bsftmenu-custom-post-no-image .bsftmenu-css-placeholder {
	display: block;
	width: var(--image-max-width, 75px);
	height: var(--image-max-height, 25px);
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 3px;
	margin-right: var(--image-margin-right, 10px);
	position: relative;
}

.bsftmenu-custom-posts .bsftmenu-custom-post-no-image .bsftmenu-css-placeholder::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 8px;
	background: #ccc;
	border-radius: 1px;
}



/* 
 * ========================================
 * СТИЛИ ДЛЯ БЛОКА ЗАПИСЕЙ (POSTS)
 * ========================================
 */

.bsftmenu-posts .bsftmenu-woo-category-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
}

/* ENHANCED: More specific selectors for posts to ensure CSS variables work */
.bsftmenu-posts .bsftmenu-woo-category-image img,
.bsftmenu-posts .bsftmenu-post-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
	object-fit: cover;
}

.bsftmenu-posts .bsftmenu-post-item {
	list-style: none;
	margin-bottom: 3px;
}

.bsftmenu-posts .bsftmenu-post-item a {
	color: #000;
	display: flex;
	font-size: 15px;
	padding: 10px;
	background: #fff;
	border-radius: 3px;
	justify-content: flex-start;
}

.bsftmenu-posts .bsftmenu-post-item a:hover {
	background: #002742;
	color: #fff;
	text-decoration: none;
}

.bsftmenu-posts .bsftmenu-woo-category-image {
	justify-content: center;
	align-content: center;
}

.bsftmenu-posts .bsftmenu-woo-category-name {
	justify-content: center;
	align-content: center;
}

/* Placeholder styles for posts without images */
.bsftmenu-posts .bsftmenu-post-no-image .bsftmenu-css-placeholder {
	display: block;
	width: var(--image-max-width, 75px);
	height: var(--image-max-height, 25px);
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 3px;
	margin-right: var(--image-margin-right, 10px);
	position: relative;
}

.bsftmenu-posts .bsftmenu-post-no-image .bsftmenu-css-placeholder::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 8px;
	background: #ccc;
	border-radius: 1px;
}



/* 
 * ========================================
 * СТИЛИ ДЛЯ WOOCOMMERCE КАТЕГОРИЙ
 * ========================================
 */

/* WooCommerce подкатегории */
.bsftmenu-woo-subcategories .bsftmenu-woo-category-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
}

/* Placeholder styles for WooCommerce categories without images */
.bsftmenu-woo-categories .bsftmenu-woo-category-no-image .bsftmenu-css-placeholder {
	display: block;
	width: var(--image-max-width, 75px);
	height: var(--image-max-height, 25px);
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 3px;
	margin-right: var(--image-margin-right, 10px);
	position: relative;
}

.bsftmenu-woo-categories .bsftmenu-woo-category-no-image .bsftmenu-css-placeholder::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 8px;
	background: #ccc;
	border-radius: 1px;
}



/* 
 * ========================================
 * СТИЛИ ДЛЯ WORDPRESS КАТЕГОРИЙ
 * ========================================
 */

/* WordPress категории верхнего уровня */
.bsftmenu-wp-categories-top .bsftmenu-wp-category-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
}

/* WordPress подкатегории */
.bsftmenu-wp-subcategories .bsftmenu-wp-category-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
}

/* ENHANCED: More specific selectors for WordPress categories to ensure CSS variables work */
.bsftmenu-wp-categories .bsftmenu-wp-category-image img,
.bsftmenu-wp-categories-top .bsftmenu-wp-category-image img,
.bsftmenu-wp-subcategories .bsftmenu-wp-category-image img,
.bsftmenu-wp-subcategories-dependent .bsftmenu-wp-category-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
	object-fit: cover;
}

/* === СТРАНИЦЫ - ОБНОВЛЕННАЯ СТИЛИЗАЦИЯ В СТИЛЕ КАСТОМНОГО МЕНЮ === */

/* Скрытые элементы страниц */
.bsftmenu-pages-nav-level-1.bsftmenu-hidden,
.bsftmenu-pages-nav-level-2.bsftmenu-hidden,
.bsftmenu-pages-nav-level-3.bsftmenu-hidden,
.bsftmenu-pages-nav-level-4.bsftmenu-hidden {
    display: none;
    opacity: 0;
    transform: translateY(-5px);
}

/* Анимация появления элементов страниц */
.bsftmenu-pages-nav-level-1.bsftmenu-showing,
.bsftmenu-pages-nav-level-2.bsftmenu-showing,
.bsftmenu-pages-nav-level-3.bsftmenu-showing,
.bsftmenu-pages-nav-level-4.bsftmenu-showing {
    display: list-item;
    opacity: 0;
    transform: translateY(-5px);
    animation: bsftmenu-fade-in-up 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Стили кнопки "Показать ещё" для страниц */
.bsftmenu-pages-nav .bsftmenu-show-more-button {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    font-size: 13px;
    padding: 6px 12px;
    margin: 5px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bsftmenu-pages-nav .bsftmenu-show-more-button:hover {
    background: #e9ecef;
    color: #212529;
    border-color: #adb5bd;
}

.bsftmenu-pages-nav .bsftmenu-show-more-button.bsftmenu-expanded {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.bsftmenu-pages-nav .bsftmenu-show-more-button.bsftmenu-expanded:hover {
    background: #f1b0b7;
    color: #491217;
    border-color: #f5c6cb;
}

/* Стили для зависимых страниц */
.bsftmenu-pages-sub-dependent {
    min-height: 100px;
}

.bsftmenu-pages-sub-placeholder {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

.bsftmenu-pages-sub-no-sublevels {
    text-align: center;
    padding: 15px;
    color: #999;
    font-style: italic;
    font-size: 14px;
    display: none;
}

.bsftmenu-pages-nav-sub {
    margin-left: 0; /* Убираем отступ для зависимых подменю */
}

/* Иерархические стили для зависимых страниц */
.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-1 {
    /* Первый уровень без дополнительных отступов */
}

.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-2 {
    border-left: 3px solid #e9ecef;
    margin-left: 15px;
    padding-left: 12px;
}

.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-3 {
    border-left: 3px solid #dee2e6;
    margin-left: 30px;
    padding-left: 12px;
}

.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-4 {
    border-left: 3px solid #ced4da;
    margin-left: 45px;
    padding-left: 12px;
}

/* Дополнительная стилизация ссылок в зависимых блоках для лучшей иерархии */
.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-2 a {
    font-size: 14px;
    padding: 8px 10px;
}

.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-3 a {
    font-size: 13px;
    padding: 7px 10px;
    background: #f1f3f4;
}

.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-4 a {
    font-size: 12px;
    padding: 6px 10px;
    background: #e9ecef;
}

/* Визуальные индикаторы для дочерних элементов в зависимых блоках */
.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-2::before {
    content: "└";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #e9ecef;
    font-size: 16px;
    font-weight: bold;
}

.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-3::before {
    content: "└";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #dee2e6;
    font-size: 14px;
    font-weight: bold;
}

.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-4::before {
    content: "└";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #ced4da;
    font-size: 12px;
    font-weight: bold;
}

/* Добавляем position relative для всех элементов для правильного позиционирования псевдоэлементов */
.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-2,
.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-3,
.bsftmenu-pages-nav-sub .bsftmenu-pages-nav-level-4 {
    position: relative;
}

/* === ПОДДЕРЖКА ИЗОБРАЖЕНИЙ В НОВЫХ КЛАССАХ СТРАНИЦ === */

/* Изображения в новых классах страниц */
.bsftmenu-pages-nav .bsftmenu-page-image img,
.bsftmenu-pages-nav-item .bsftmenu-page-image img {
    max-height: var(--image-max-height, 25px);
    max-width: var(--image-max-width, 75px);
    margin-right: var(--image-margin-right, 10px);
    object-fit: cover;
    border-radius: 3px;
}

/* Плейсхолдеры для страниц без изображений в новых классах */
.bsftmenu-pages-nav .bsftmenu-page-no-image .bsftmenu-css-placeholder,
.bsftmenu-pages-nav-item .bsftmenu-page-no-image .bsftmenu-css-placeholder {
    display: block;
    width: var(--image-max-width, 50px);
    height: var(--image-max-height, 25px);
    margin-right: var(--image-margin-right, 10px);
    background: #f0f0f0;
    border-radius: 3px;
    position: relative;
    flex-shrink: 0;
}

.bsftmenu-pages-nav .bsftmenu-page-no-image .bsftmenu-css-placeholder::before,
.bsftmenu-pages-nav-item .bsftmenu-page-no-image .bsftmenu-css-placeholder::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background: #ccc;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}

/* Сетка зависимых подстраниц */
.bsftmenu-pages-sub-dependent .bsftmenu-pages-sub-group {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
    gap: 15px;
    border-radius: 8px;
    background: #f9f9f9;
    margin-bottom: 10px;
}

.bsftmenu-pages-sub-dependent .bsftmenu-pages-sub-group.bsftmenu-showing {
    animation: bsftmenu-fade-in-up 0.3s ease-out;
}

.bsftmenu-pages-sub-dependent .bsftmenu-pages-sub-group.bsftmenu-hiding {
    animation: bsftmenu-fade-out-down 0.2s ease-in forwards;
}

/* Плейсхолдеры для страниц */
.bsftmenu-pages-sub-placeholder {
    text-align: center;
    padding: 40px 20px;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 10px;
}

.bsftmenu-pages-sub-no-sublevels {
    text-align: center;
    padding: 20px;
    color: #999;
    font-style: italic;
    font-size: 14px;
}

/* Изображения страниц */
.bsftmenu-pages .bsftmenu-page-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
}

/* Подстраницы */
.bsftmenu-subpages .bsftmenu-page-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
}

/* ENHANCED: More specific selectors for pages to ensure CSS variables work */
.bsftmenu-pages .bsftmenu-page-image img,
.bsftmenu-pages-nav .bsftmenu-page-image img,
.bsftmenu-pages-sub .bsftmenu-page-image img,
.bsftmenu-pages-sub-dependent .bsftmenu-page-image img {
	max-height: var(--image-max-height, 25px);
	max-width: var(--image-max-width, 75px);
	margin-right: var(--image-margin-right, 10px);
	object-fit: cover;
}

/* Плейсхолдеры для страниц без изображений */
.bsftmenu-pages .bsftmenu-page-no-image .bsftmenu-css-placeholder {
	display: block;
	width: var(--image-max-width, 50px);
	height: var(--image-max-height, 25px);
	margin-right: var(--image-margin-right, 10px);
	background: #f0f0f0;
	border-radius: 4px;
	position: relative;
	flex-shrink: 0;
}

.bsftmenu-pages .bsftmenu-page-no-image .bsftmenu-css-placeholder::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	background: #ccc;
	border-radius: 2px;
	transform: translate(-50%, -50%);
}

/* Placeholder styles for WordPress categories without images */
.bsftmenu-wp-categories .bsftmenu-wp-category-no-image .bsftmenu-css-placeholder {
	display: block;
	width: var(--image-max-width, 75px);
	height: var(--image-max-height, 25px);
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 3px;
	margin-right: var(--image-margin-right, 10px);
	position: relative;
}

.bsftmenu-wp-categories .bsftmenu-wp-category-no-image .bsftmenu-css-placeholder::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 8px;
	background: #ccc;
	border-radius: 1px;
}



/* 
 * ========================================
 * КНОПКА "ЕЩЁ" И СКРЫТЫЕ ЭЛЕМЕНТЫ
 * ========================================
 */

/* Кнопка "Показать ещё" */
.bsftmenu-show-more-button {
    display: inline-block;
    background: #007cba;
    color: #fff;
    padding: 8px 16px;
    margin: 5px 0;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    user-select: none;
}

.bsftmenu-show-more-button:hover {
    background: #005a87;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 124, 186, 0.3);
}

.bsftmenu-show-more-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 124, 186, 0.3);
}

.bsftmenu-show-more-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.2);
}

/* Кнопка в состоянии "Скрыть" */
.bsftmenu-show-more-button.bsftmenu-expanded {
    background: #dc3545;
    color: #fff;
}

.bsftmenu-show-more-button.bsftmenu-expanded:hover {
    background: #c82333;
    color: #fff;
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);
}

.bsftmenu-show-more-button.bsftmenu-expanded:active {
    background: #bd2130;
}

.bsftmenu-show-more-button.bsftmenu-expanded:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

/* Скрытые элементы */
.bsftmenu-category-item.bsftmenu-hidden {
    display: none;
    opacity: 0;
    transform: translateY(-5px);
}

.bsftmenu-woo-category-level-1.bsftmenu-hidden,
.bsftmenu-woo-category-level-2.bsftmenu-hidden,
.bsftmenu-woo-category-level-3.bsftmenu-hidden,
.bsftmenu-woo-category-level-4.bsftmenu-hidden {
    display: none;
    opacity: 0;
    transform: translateY(-5px);
}

/* Скрытые элементы кастомного меню */
.bsftmenu-custom-nav-level-1.bsftmenu-hidden,
.bsftmenu-custom-nav-level-2.bsftmenu-hidden,
.bsftmenu-custom-nav-level-3.bsftmenu-hidden,
.bsftmenu-custom-nav-level-4.bsftmenu-hidden {
    display: none;
    opacity: 0;
    transform: translateY(-5px);
}

/* Анимация появления скрытых элементов */
.bsftmenu-category-item.bsftmenu-showing {
    display: list-item;
    opacity: 0;
    transform: translateY(-5px);
    animation: bsftmenu-fade-in-up 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bsftmenu-woo-category-level-1.bsftmenu-showing,
.bsftmenu-woo-category-level-2.bsftmenu-showing,
.bsftmenu-woo-category-level-3.bsftmenu-showing,
.bsftmenu-woo-category-level-4.bsftmenu-showing {
    display: list-item;
    opacity: 0;
    transform: translateY(-5px);
    animation: bsftmenu-fade-in-up 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Анимация появления элементов кастомного меню */
.bsftmenu-custom-nav-level-1.bsftmenu-showing,
.bsftmenu-custom-nav-level-2.bsftmenu-showing,
.bsftmenu-custom-nav-level-3.bsftmenu-showing,
.bsftmenu-custom-nav-level-4.bsftmenu-showing {
    display: list-item;
    opacity: 0;
    transform: translateY(-5px);
    animation: bsftmenu-fade-in-up 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Анимация скрытия элементов */
.bsftmenu-category-item.bsftmenu-hiding {
    display: list-item;
    opacity: 1;
    transform: translateY(0);
    animation: bsftmenu-fade-out-down 0.12s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.bsftmenu-woo-category-level-1.bsftmenu-hiding,
.bsftmenu-woo-category-level-2.bsftmenu-hiding,
.bsftmenu-woo-category-level-3.bsftmenu-hiding,
.bsftmenu-woo-category-level-4.bsftmenu-hiding {
    display: list-item;
    opacity: 1;
    transform: translateY(0);
    animation: bsftmenu-fade-out-down 0.12s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

/* Финальное состояние показанных элементов */
.bsftmenu-category-item.bsftmenu-shown {
    display: list-item;
    opacity: 1;
    transform: translateY(0);
}

.bsftmenu-woo-category-level-1.bsftmenu-shown,
.bsftmenu-woo-category-level-2.bsftmenu-shown,
.bsftmenu-woo-category-level-3.bsftmenu-shown,
.bsftmenu-woo-category-level-4.bsftmenu-shown {
    display: list-item;
    opacity: 1;
    transform: translateY(0);
}

/* Keyframes для анимации */
@keyframes bsftmenu-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bsftmenu-fade-out-down {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-5px);
        display: none;
    }
}

/* Контейнер кнопки "Ещё" */
.bsftmenu-show-more-container {
    margin: 8px 0;
    text-align: left;
    list-style: none !important; /* Убираем маркеры списка */
    list-style-type: none !important;
}

.bsftmenu-show-more-container::before {
    display: none !important; /* Скрываем псевдоэлементы маркеров */
}

.bsftmenu-show-more-container::marker {
    display: none !important; /* Для современных браузеров */
}

/* Стили для кнопки в разных контекстах */
.bsftmenu-woo-categories-top .bsftmenu-show-more-button {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
    font-size: 13px;
    padding: 6px 12px;
}

.bsftmenu-woo-categories-top .bsftmenu-show-more-button:hover {
    background: #e0e0e0;
    color: #000;
    border-color: #ccc;
}

.bsftmenu-woo-categories-top .bsftmenu-show-more-button.bsftmenu-expanded {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.bsftmenu-woo-categories-top .bsftmenu-show-more-button.bsftmenu-expanded:hover {
    background: #f1b0b7;
    color: #491217;
    border-color: #f5c6cb;
}

.bsftmenu_submenu_block .bsftmenu-show-more-button {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    font-size: 12px;
    padding: 4px 8px;
    margin: 3px 0;
}

.bsftmenu_submenu_block .bsftmenu-show-more-button:hover {
    background: #e9ecef;
    color: #212529;
    border-color: #adb5bd;
}

.bsftmenu_submenu_block .bsftmenu-show-more-button.bsftmenu-expanded {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.bsftmenu_submenu_block .bsftmenu-show-more-button.bsftmenu-expanded:hover {
    background: #f1b0b7;
    color: #491217;
    border-color: #f5c6cb;
}

/* Стили кнопки "Показать ещё" для кастомного меню */
.bsftmenu-custom-nav .bsftmenu-show-more-button {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    font-size: 13px;
    padding: 6px 12px;
    margin: 5px 0;
}

.bsftmenu-custom-nav .bsftmenu-show-more-button:hover {
    background: #e9ecef;
    color: #212529;
    border-color: #adb5bd;
}

.bsftmenu-custom-nav .bsftmenu-show-more-button.bsftmenu-expanded {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.bsftmenu-custom-nav .bsftmenu-show-more-button.bsftmenu-expanded:hover {
    background: #f1b0b7;
    color: #491217;
    border-color: #f5c6cb;
}

/* Стили для зависимых кастомных меню */
.bsftmenu-custom-menu-sub-dependent {
    min-height: 100px;
}

.bsftmenu-custom-menu-sub-groups {
    position: relative;
}

.bsftmenu-custom-menu-sub-group {
    animation: bsftmenu-fade-in-up 0.3s ease-out;
}

.bsftmenu-custom-menu-sub-group.bsftmenu-hiding {
    animation: bsftmenu-fade-out-down 0.2s ease-in forwards;
}

.bsftmenu-custom-nav-sub {
    margin-left: 0; /* Убираем отступ для зависимых подменю */
}

/* Иерархические стили для зависимых кастомных меню */
.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-1 {
    /* Первый уровень без дополнительных отступов */
}

.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-2 {
    border-left: 3px solid #e9ecef;
    margin-left: 15px;
    padding-left: 12px;
}

.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-3 {
    border-left: 3px solid #dee2e6;
    margin-left: 30px;
    padding-left: 12px;
}

.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-4 {
    border-left: 3px solid #ced4da;
    margin-left: 45px;
    padding-left: 12px;
}

/* Дополнительная стилизация ссылок в зависимых блоках для лучшей иерархии */
.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-2 a {
    font-size: 14px;
    padding: 8px 10px;
}

.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-3 a {
    font-size: 13px;
    padding: 7px 10px;
    background: #f1f3f4;
}

.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-4 a {
    font-size: 12px;
    padding: 6px 10px;
    background: #e9ecef;
}

/* Визуальные индикаторы для дочерних элементов в зависимых блоках */
.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-2::before {
    content: "└";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #e9ecef;
    font-size: 16px;
    font-weight: bold;
}

.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-3::before {
    content: "└";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #dee2e6;
    font-size: 14px;
    font-weight: bold;
}

.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-4::before {
    content: "└";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #ced4da;
    font-size: 12px;
    font-weight: bold;
}

/* Добавляем position relative для всех элементов для правильного позиционирования псевдоэлементов */
.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-2,
.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-3,
.bsftmenu-custom-nav-sub .bsftmenu-custom-nav-level-4 {
    position: relative;
}

.bsftmenu-custom-menu-sub-placeholder {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

.bsftmenu-custom-menu-sub-no-sublevels,
.bsftmenu-woo-subcategories-no-sublevels {
    text-align: center;
    padding: 20px;
    color: #999;
    font-style: italic;
    font-size: 14px;
}

/* Убираем маркеры списка для контейнеров кнопок в любых списках */
ul .bsftmenu-show-more-container,
ol .bsftmenu-show-more-container {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

ul .bsftmenu-show-more-container::before,
ol .bsftmenu-show-more-container::before,
ul .bsftmenu-show-more-container::after,
ol .bsftmenu-show-more-container::after {
    display: none !important;
    content: none !important;
}

ul .bsftmenu-show-more-container::marker,
ol .bsftmenu-show-more-container::marker {
    display: none !important;
    content: none !important;
}

/* Responsive стили для CSS Grid с фиксированными столбцами */
@media (max-width: 1200px) {
    .bsftmenu-woo-subcategories[data-grid-columns="6"],
    .bsftmenu-woo-subcategories-dependent[data-grid-columns="6"] {
        --grid-columns: 4; /* 6→4 столбца */
        grid-template-columns: repeat(4, 1fr);
    }
    .bsftmenu-woo-subcategories[data-grid-columns="5"],
    .bsftmenu-woo-subcategories-dependent[data-grid-columns="5"] {
        --grid-columns: 3; /* 5→3 столбца */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .bsftmenu-woo-subcategories[data-grid-columns="6"],
    .bsftmenu-woo-subcategories[data-grid-columns="5"],
    .bsftmenu-woo-subcategories[data-grid-columns="4"],
    .bsftmenu-woo-subcategories-dependent[data-grid-columns="6"],
    .bsftmenu-woo-subcategories-dependent[data-grid-columns="5"],
    .bsftmenu-woo-subcategories-dependent[data-grid-columns="4"] {
        --grid-columns: 3; /* →3 столбца */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .bsftmenu-woo-subcategories[data-grid-columns="6"],
    .bsftmenu-woo-subcategories[data-grid-columns="5"],
    .bsftmenu-woo-subcategories[data-grid-columns="4"],
    .bsftmenu-woo-subcategories[data-grid-columns="3"],
    .bsftmenu-woo-subcategories-dependent[data-grid-columns="6"],
    .bsftmenu-woo-subcategories-dependent[data-grid-columns="5"],
    .bsftmenu-woo-subcategories-dependent[data-grid-columns="4"],
    .bsftmenu-woo-subcategories-dependent[data-grid-columns="3"] {
        --grid-columns: 2; /* →2 столбца */
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bsftmenu-show-more-button {
        font-size: 13px;
        padding: 6px 12px;
    }
    
    .bsftmenu-show-more-container {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .bsftmenu-woo-subcategories,
    .bsftmenu-woo-subcategories-dependent:not(.bsftmenu-brands-dependent) .bsftmenu-woo-subcategory-group {
        --grid-columns: 1 !important; /* Все в 1 столбец на мобильных */
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    
    .bsftmenu-show-more-button {
        font-size: 12px;
        padding: 5px 10px;
        display: block;
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }
}

/* 
 * ========================================
 * WORDPRESS РУБРИКИ - ПОЛНЫЕ СТИЛИ
 * ========================================
 */

/* Стили для топ-уровня WordPress рубрик (аналог WooCommerce) */
.bsftmenu-wp-categories-top .bsftmenu-wp-category-level-1 {
	list-style: none;
	margin-bottom: 3px;
}

.bsftmenu-wp-categories-top .bsftmenu-wp-category-level-1 a {
	color: #000;
	display: flex;
	font-size: 15px;
	padding: 10px;
	background: #fff;
	border-radius: 3px;
	justify-content: flex-start;
}

.bsftmenu-wp-categories-top .bsftmenu-wp-category-level-1.bsftmenu-wp-category-active a {
	background: #002742;
	color: #fff;
	text-decoration: none;
}

.bsftmenu-wp-category-count {
	font-size: 10px;
	color: #999;
	margin-left: 3px;
}

.bsftmenu-wp-categories-top .bsftmenu-wp-category-image {}

/* REMOVED: Old conflicting rule that overrode CSS variables */

/* Контейнер сетки для WordPress подрубрик - CSS Grid с фиксированными столбцами */
.bsftmenu-wp-subcategories {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
    gap: 15px;
    align-items: start;
}

/* Для режима depends_on_parent WordPress рубрик */
.bsftmenu-wp-subcategories-dependent {
    display: block;
}

/* Каждая группа WordPress подрубрик использует CSS Grid с фиксированными столбцами */
.bsftmenu-wp-subcategories-dependent .bsftmenu-wp-subcategory-group {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
    gap: 15px;
    align-items: start;
    width: 100%;
    margin-bottom: 20px;
}

/* Поддержка динамического роста высоты родительских контейнеров для WordPress */
.bsftmenu_block .bsftmenu-wp-subcategories,
.bsftmenu_block .bsftmenu-wp-subcategories-dependent .bsftmenu-wp-subcategory-group {
    /* При показе дополнительных элементов контейнер должен расти */
    transition: height 0.3s ease, min-height 0.3s ease;
    overflow: visible;
}

/* Стили блоков подрубрик WordPress */
.bsftmenu_submenu_block .bsftmenu-wp-categories-sub-list {}

.bsftmenu_submenu_block .bsftmenu-wp-categories-sub-list ul {
  background: #fff;
  border-radius: 3px;
  padding: 10px;
  box-sizing: border-box;
}

.bsftmenu_submenu_block .bsftmenu-wp-category-level-1 {
  list-style: none;
}

.bsftmenu_submenu_block .bsftmenu-wp-category-level-1 a {
  font-weight: bold;
  color: #000;
  font-size: 15px;
  display: block;
}

.bsftmenu_submenu_block .bsftmenu-wp-category-level-2 {
  list-style: none; /* Changed to none - using ::before pseudo-elements instead */
}

.bsftmenu_submenu_block .bsftmenu-wp-category-level-2 a {
  font-weight: normal;
  color: #000;
  font-size: 15px;
}

.bsftmenu_submenu_block ul ul {
	padding: var(--subcategory-padding-vertical, 5px) var(--subcategory-padding-horizontal, 10px);
}

.bsftmenu_submenu_block ul ul li {
	margin-bottom: 5px;
}

/* Скрытые элементы WordPress рубрик */
.bsftmenu-wp-category-level-1.bsftmenu-hidden,
.bsftmenu-wp-category-level-2.bsftmenu-hidden,
.bsftmenu-wp-category-level-3.bsftmenu-hidden,
.bsftmenu-wp-category-level-4.bsftmenu-hidden {
    display: none;
    opacity: 0;
    transform: translateY(-5px);
}

/* Анимация появления скрытых элементов WordPress рубрик */
.bsftmenu-wp-category-level-1.bsftmenu-showing,
.bsftmenu-wp-category-level-2.bsftmenu-showing,
.bsftmenu-wp-category-level-3.bsftmenu-showing,
.bsftmenu-wp-category-level-4.bsftmenu-showing {
    display: list-item;
    opacity: 0;
    transform: translateY(-5px);
    animation: bsftmenu-fade-in-up 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Анимация скрытия элементов WordPress рубрик */
.bsftmenu-wp-category-level-1.bsftmenu-hiding,
.bsftmenu-wp-category-level-2.bsftmenu-hiding,
.bsftmenu-wp-category-level-3.bsftmenu-hiding,
.bsftmenu-wp-category-level-4.bsftmenu-hiding {
    display: list-item;
    opacity: 1;
    transform: translateY(0);
    animation: bsftmenu-fade-out-down 0.12s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

/* Финальное состояние показанных элементов WordPress рубрик */
.bsftmenu-wp-category-level-1.bsftmenu-shown,
.bsftmenu-wp-category-level-2.bsftmenu-shown,
.bsftmenu-wp-category-level-3.bsftmenu-shown,
.bsftmenu-wp-category-level-4.bsftmenu-shown {
    display: list-item;
    opacity: 1;
    transform: translateY(0);
}

/* Стили для кнопки "Ещё" в WordPress рубриках */
.bsftmenu-wp-categories-top .bsftmenu-show-more-button {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
    font-size: 13px;
    padding: 6px 12px;
}

.bsftmenu-wp-categories-top .bsftmenu-show-more-button:hover {
    background: #e0e0e0;
    color: #000;
    border-color: #ccc;
}

.bsftmenu-wp-categories-top .bsftmenu-show-more-button.bsftmenu-expanded {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.bsftmenu-wp-categories-top .bsftmenu-show-more-button.bsftmenu-expanded:hover {
    background: #f1b0b7;
    color: #491217;
    border-color: #f5c6cb;
}

/* Responsive стили для CSS Grid с WordPress рубриками */
@media (max-width: 1200px) {
    .bsftmenu-wp-subcategories[data-grid-columns="6"],
    .bsftmenu-wp-subcategories-dependent[data-grid-columns="6"] {
        --grid-columns: 4; /* 6→4 столбца */
        grid-template-columns: repeat(4, 1fr);
    }
    .bsftmenu-wp-subcategories[data-grid-columns="5"],
    .bsftmenu-wp-subcategories-dependent[data-grid-columns="5"] {
        --grid-columns: 3; /* 5→3 столбца */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .bsftmenu-wp-subcategories[data-grid-columns="6"],
    .bsftmenu-wp-subcategories[data-grid-columns="5"],
    .bsftmenu-wp-subcategories[data-grid-columns="4"],
    .bsftmenu-wp-subcategories-dependent[data-grid-columns="6"],
    .bsftmenu-wp-subcategories-dependent[data-grid-columns="5"],
    .bsftmenu-wp-subcategories-dependent[data-grid-columns="4"] {
        --grid-columns: 3; /* →3 столбца */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .bsftmenu-wp-subcategories[data-grid-columns="6"],
    .bsftmenu-wp-subcategories[data-grid-columns="5"],
    .bsftmenu-wp-subcategories[data-grid-columns="4"],
    .bsftmenu-wp-subcategories[data-grid-columns="3"],
    .bsftmenu-wp-subcategories-dependent[data-grid-columns="6"],
    .bsftmenu-wp-subcategories-dependent[data-grid-columns="5"],
    .bsftmenu-wp-subcategories-dependent[data-grid-columns="4"],
    .bsftmenu-wp-subcategories-dependent[data-grid-columns="3"] {
        --grid-columns: 2; /* →2 столбца */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bsftmenu-wp-subcategories,
    .bsftmenu-wp-subcategories-dependent .bsftmenu-wp-subcategory-group {
        --grid-columns: 1 !important; /* Все в 1 столбец на мобильных */
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
}

 .bsftmenu-woo-category-count {
	justify-content: center;
	align-content: center;
}

/* External mobile mode (opened from ViewBox):
 * keep menu readable: single column + one-line labels with ellipsis.
 */
@media screen and (max-width: 1000px) {
    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-woo-subcategories,
    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-woo-subcategories-dependent .bsftmenu-woo-subcategory-group,
    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-wp-subcategories,
    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-wp-subcategories-dependent .bsftmenu-wp-subcategory-group {
        --grid-columns: 1 !important;
        grid-template-columns: 1fr !important;
    }

    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-woo-category-top-link,
    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-woo-category-sub-link,
    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-category-top-link,
    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-category-sub-link,
    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-wp-category-top-link,
    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-wp-category-sub-link {
        min-width: 0;
    }

    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-woo-category-name,
    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-category-name,
    .bsftmenu_wrap.bsftmenu-open-external .bsftmenu-wp-category-name {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}