/* =========================================================
   THE IT GEAR - itgear STYLE CATEGORY MENU
   Desktop / Laptop Only
   ========================================================= */

/* =========================================================
   THE IT GEAR - itgear STYLE CATEGORY MENU
   Desktop / Laptop Only
   ========================================================= */

@media (min-width: 1200px) {

    /* ================================
       CATEGORY MENU
       DEFAULT CLOSED
       ================================ */

    .header-support .category-menu {
        position: absolute;
        top: 100%;
        left: 0;

        width: 850px;
        height: 600px;

        background: #fff;

        z-index: 99999;

        overflow: hidden;

        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    }

    /*
     * Bootstrap:
     * .collapse       = closed
     * .collapse.show  = opened
     *
     * When opened, use flex layout.
     */
    .header-support .category-menu.show {
        display: flex;
    }


    /* ================================
       MENU INNER
       ================================ */

    .header-support .itgear-menu-inner {
        display: flex;

        width: 100%;
        height: 100%;
    }


    /* ================================
       LEFT MAIN CATEGORIES
       ================================ */

    .header-support .itgear-main-categories {
        width: 250px;
        min-width: 250px;
        height: 100%;

        background: #fff;

        border-right: 1px solid #ddd;

        overflow-y: auto;
        overflow-x: hidden;
    }


    /* LEFT SCROLLBAR */

    .header-support .itgear-main-categories::-webkit-scrollbar {
        width: 7px;
    }

    .header-support .itgear-main-categories::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .header-support .itgear-main-categories::-webkit-scrollbar-thumb {
        background: #999;
        border-radius: 4px;
    }

    .header-support .itgear-main-categories::-webkit-scrollbar-thumb:hover {
        background: #777;
    }

    /* Firefox */

    .header-support .itgear-main-categories {
        scrollbar-width: thin;
        scrollbar-color: #999 #f1f1f1;
    }


    /* ================================
       CATEGORY ITEM
       ================================ */

    .header-support .itgear-category-item {
        width: 100%;
    }


    /* ================================
       CATEGORY LINK
       ================================ */

    .header-support .itgear-category-link {
        display: flex;
        align-items: center;

        width: 100%;
        min-height: 48px;

        padding: 7px 14px;

        color: #222;
        background: #fff;

        text-decoration: none;

        border-left: 3px solid transparent;

        transition:
            background-color 0.15s ease,
            border-color 0.15s ease;
    }


    /* ICON */

    .header-support .itgear-category-icon {
        width: 32px;
        min-width: 32px;
        height: 32px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin-right: 11px;
    }

    .header-support .itgear-category-icon img {
        width: 28px;
        height: 28px;

        object-fit: contain;
    }


    /* CATEGORY NAME */

    .header-support .itgear-category-name {
        flex: 1;

        font-size: 14px;
        font-weight: 500;

        line-height: 1.25;

        color: #222;
    }


    /* ARROW */

    .header-support .itgear-category-arrow {
        margin-left: auto;
        padding-left: 8px;

        font-size: 17px;

        color: #8a8a8a;

        transition: color 0.15s ease;
    }


    /* ================================
       HOVER / ACTIVE
       ================================ */

    .header-support .itgear-category-item:hover .itgear-category-link,
    .header-support .itgear-category-item.active .itgear-category-link {
        background: #f3f3f3;

        border-left-color: #e51b23;
    }

    .header-support .itgear-category-item:hover .itgear-category-arrow,
    .header-support .itgear-category-item.active .itgear-category-arrow {
        color: #e51b23;
    }


    /* ================================
       RIGHT SUBCATEGORY PANEL
       ================================ */

    .header-support .itgear-subcategory-panel {
        flex: 1;

        height: 100%;

        padding: 26px 30px;

        background: #fff;

        overflow-y: auto;
        overflow-x: hidden;
    }


    /* ================================
       EMPTY STATE
       ================================ */

    .header-support .itgear-subcategory-empty {
        height: 100%;

        display: flex;

        align-items: center;
        justify-content: center;

        flex-direction: column;

        gap: 10px;

        color: #999;

        font-size: 14px;
    }

    .header-support .itgear-subcategory-empty .itgear-subcategory-icon {
        font-size: 35px;
        color: #bbb;
    }


    /* ================================
       SUBCATEGORY CONTENT
       ================================ */

    .header-support .itgear-subcategory-content {
        display: none;
    }

    .header-support .itgear-subcategory-content.active {
        display: block;
    }


    /* ================================
       SUBCATEGORY HEADER
       ================================ */

    .header-support .itgear-subcategory-header {
        display: flex;

        align-items: center;
        justify-content: space-between;

        padding-bottom: 15px;
        margin-bottom: 20px;

        border-bottom: 1px solid #e5e5e5;
    }

    .header-support .itgear-subcategory-header h3 {
        margin: 0;

        font-size: 21px;
        font-weight: 600;

        color: #222;
    }

    .header-support .itgear-subcategory-header a {
        font-size: 13px;
        font-weight: 500;

        color: #e51b23;

        text-decoration: none;
    }


    /* ================================
       SUBCATEGORY GRID
       ================================ */

    .header-support .itgear-subcategory-grid {
        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 28px 25px;
    }


    /* ================================
       SUBCATEGORY GROUP
       ================================ */

    .header-support .itgear-subcategory-group {
        min-width: 0;
    }


    /* ================================
       SUBCATEGORY TITLE
       ================================ */

    .header-support .itgear-subcategory-title {
        display: block;

        margin-bottom: 9px;

        font-size: 14px;
        font-weight: 600;

        line-height: 1.3;

        color: #222;

        text-decoration: none;

        transition: color 0.15s ease;
    }


    /* ================================
       CHILD CATEGORY
       ================================ */

    .header-support .itgear-child-category-list {
        list-style: none;

        margin: 0;
        padding: 0;
    }

    .header-support .itgear-child-category-list li {
        margin-bottom: 7px;
    }

    .header-support .itgear-child-category-list a {
        font-size: 13px;

        line-height: 1.4;

        color: #555;

        text-decoration: none;

        transition: color 0.15s ease;
    }

    .header-support .itgear-subcategory-title:hover,
    .header-support .itgear-child-category-list a:hover {
        color: #e51b23;
    }


    /* ================================
       LAPTOP
       1200px - 1439px
       ================================ */

    @media (max-width: 1439px) {

        .header-support .category-menu {
            width: 750px;
            height: 560px;
        }

        .header-support .itgear-main-categories {
            width: 225px;
            min-width: 225px;
        }

        .header-support .itgear-subcategory-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

}

/* watermark */

/* =====================================================
   CATEGORY ICON WATERMARK
   ===================================================== */

.header-support .itgear-subcategory-panel {
    position: relative;
}


/* Watermark container */

.header-support .itgear-subcategory-watermark {
    position: absolute;

    right: 25px;
    bottom: 15px;

    width: 220px;
    height: 220px;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;

    z-index: 0;

    opacity: 0;

    transition: opacity 0.25s ease;
}


/* Watermark image */

.header-support .itgear-subcategory-watermark img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0.07;

    filter: grayscale(100%);
}


/* Show watermark */

.header-support .itgear-subcategory-watermark.active {
    opacity: 1;
}


/* Keep actual content above watermark */

.header-support .itgear-subcategory-content,
.header-support .itgear-subcategory-empty {
    position: relative;

    z-index: 1;
}