/**
 * Стили для кнопки "Каталог продукции" как бургер-меню
 * Работает только на мобильных устройствах
 */

@media (max-width: 992px) {
    /* Кнопка "Каталог продукции" - стили как бургер-меню */
    .bordered.blue {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        background: linear-gradient(to bottom, #6cb7d4, #2d8eb9) !important;
        color: #fff !important;
        padding: 12px 15px !important;
        border-radius: 6px !important;
        margin: 10px 5px !important;
        cursor: pointer !important;
        user-select: none;
        position: relative;
        min-height: 44px; /* Touch-friendly */
    }

    /* Иконка плюса в кружке */
    .bordered.blue::before {
        content: '+';
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: 2px solid #fff;
        border-radius: 50%;
        margin-right: 12px;
        font-size: 18px;
        font-weight: bold;
        flex-shrink: 0;
        transition: transform 0.3s;
    }

    /* Когда каталог открыт - меняем плюс на минус */
    .bordered.blue.active::before {
        content: '−';
    }

    .bordered.blue h2,
    .bordered.blue h3 {
        font-size: 18px !important;
        font-weight: normal;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
        margin: 0 !important;
        color: #fff !important;
    }

    .bordered.blue h2 a,
    .bordered.blue h3 a {
        color: #fff !important;
        text-decoration: none;
    }

    /* Категории - скрыты по умолчанию на мобильных */
    #column-left .categories {
        display: none;
        margin-top: 10px;
        padding: 15px;
        background: #f9f9f9;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
    }

    /* Когда каталог открыт */
    .bordered.blue.active + #column-left .categories,
    #column-left .categories:visible {
        display: block;
    }

    /* Стили для категорий в выпадающем меню */
    #column-left .categories li {
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
    }

    #column-left .categories li:last-child {
        border-bottom: none;
    }

    #column-left .categories li a {
        display: block;
        padding: 8px 0;
        color: #0b84c3;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
    }

    #column-left .categories li a:hover {
        color: #63a200;
    }

    /* Подкатегории */
    #column-left .categories li ul {
        margin-left: 15px;
        margin-top: 5px;
        padding-top: 5px;
        border-top: 1px solid #eee;
    }

    #column-left .categories li ul li a {
        font-size: 14px;
        color: #666;
        font-weight: normal;
    }
}

/* На десктопе всё как обычно */
@media (min-width: 993px) {
    #column-left .categories {
        display: block !important;
    }
}