/* 8 columns x 13 rows; Summary is a one-based, left-to-right cell number. */
.custom-menu-icon {
    display: inline-block !important;
    width: var(--menu-icon-size, 32px) !important;
    height: var(--menu-icon-size, 32px) !important;
    min-width: var(--menu-icon-size, 32px);
    flex: 0 0 var(--menu-icon-size, 32px);
    background-image: url('../images/menu/custom-menu-sprite-v1.webp?v=2');
    background-size: 800% 1300% !important;
    background-repeat: no-repeat;
    vertical-align: middle;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    pointer-events: none;
}
a.has-menu-sprite > .imgmenu,
a.has-menu-sprite > i[class*="private-icon-"] {
    display: none !important;
}
#menumobile a.has-menu-sprite {
    display: flex;
    align-items: center;
    gap: 10px;
}
#menumobile a.has-menu-sprite > .custom-menu-icon {
    margin-right: 8px;
}
/* The i element already renders the circular toggle; suppress the old triangle. */
#menumobile .master2-category-menu li.has-sub::after {
    content: none !important;
    display: none !important;
}
/* Legacy styles hide the toggle's chevron until open; keep it visible at every depth. */
#menumobile .master2-category-menu li.has-sub > i::before {
    opacity: 1 !important;
}
body #menumobile .master2-category-menu li.has-sub > i::after {
    content: none !important;
    display: none !important;
}
.category-bar .custom-menu-icon {
    --menu-icon-size: 40px;
}
.category-bar ul.categories > li > a.has-menu-sprite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}
.category-bar .custom-menu-icon,
.sub-category-scroll .custom-menu-icon {
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    background-color: #fff;
    background-clip: padding-box;
    margin: 0;
}
.sub-category-scroll .subitem:has(.custom-menu-icon) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sub-category-scroll .custom-menu-icon {
    --menu-icon-size: 30px;
}
@media (max-width: 767px) {
    #menumobile .custom-menu-icon,
    .category-bar .custom-menu-icon {
        --menu-icon-size: 28px;
    }
    .sub-category-scroll .custom-menu-icon {
        --menu-icon-size: 24px;
    }
}