#main-menu-box>ul>li>a.cart-btn {
    position: relative; /* Needed for absolute positioning of the badge */
    font-size: 24px; /* Adjust size of the cart icon if needed */
    height: 2em;
}

#main-menu-box>ul>li>a.cart-btn .cart-item-count {
    position: absolute;
    bottom: 5px; /* Adjust these values to position the badge as desired */
    right: 0px;
    /* Background + text color intentionally omitted - painted by theme
       SCSS (see common/_crossover.scss -> ".cart-item-count"). Keeps
       the badge themeable per color scheme and lets the accessible
       variant swap the text color automatically via $SecondaryColorText. */
    padding: 2px 5px; /* Badge padding */
    border-radius: 50%; /* Circular shape */
    font-size: 12px; /* Badge text size */
    line-height: 1; /* Line height to vertically align the text */
    min-width: 20px; /* Minimum width to ensure it's round */
    text-align: center; /* Center the text horizontally */
}

#main-menu-box>ul>li {
    cursor: pointer;
}

#main-menu-box .forms-login-button>a {
    /*background: inherit;*/
    display: inline-block;
    font-weight: 500;
    font-size: 1.5rem;
    margin: 12px -5px 8px 20px;
}

#main-menu-box .forms-login-button>a:after {
    content: ' \203A';
    color: #fff;
    margin-left: 0;
}

@media (min-width: 768px) {
    #main-menu-box .forms-login-button,
    #main-menu-box>ul>li.cart-button {
        float: right;
        margin-right: 5px;
    }

	#main-menu-box > ul > li.account-settings > a {
		padding-right: 12px;
	}

    #main-menu-box > ul > li.cart-button > a.cart-btn:after,
    #main-menu-box > ul > li.account-settings > a:after {
        content: "";
        color: #fff;
        margin-left: 0;
    }
    #main-menu-box>ul>li>a.cart-btn {
        padding: 1.2em 12px 1.1em ;
        padding-top: 0.6em !important;
        padding-bottom: 0.9em !important;
    }
}