/*----------------------------------------
    Category Menu Icons
        - Font Awesome glyphs in the header
          "Product Categories" dropdown
-----------------------------------------*/

/* The theme sizes its own icon font at 1.7rem in a 1.7rem box. Font Awesome
   glyphs run optically larger and vary in width, so centre them in that box
   and ease the size back a touch to keep the labels on one baseline. */

.category-menu > li > a > .fas,
.category-menu > li > a > .fab,
.category-menu > li > a > .far {
    width: 1.7rem;
    font-size: 1.4rem;
    text-align: center;
    color: var(--q2u-primary-dark, #c09c35);
}

.category-menu > li > a:hover > .fas,
.category-menu > li > a:hover > .fab,
.category-menu > li > a:hover > .far {
    color: var(--q2u-primary, #cfad3c);
}

/* Same treatment in the mobile off-canvas category sidebar. The theme sets
   `.mobile-menu li i` at 1.8rem; Font Awesome glyphs need a fixed box and a
   slightly smaller size to keep the labels aligned. */
.mobile-menu > li > a > .fas,
.mobile-menu > li > a > .fab,
.mobile-menu > li > a > .far {
    width: 1.8rem;
    font-size: 1.5rem;
    text-align: center;
    color: var(--q2u-primary-dark, #c09c35);
}

.mobile-menu > li:hover > a > .fas,
.mobile-menu > li:hover > a > .fab,
.mobile-menu > li:hover > a > .far,
.mobile-menu > li.show > a > .fas,
.mobile-menu > li.show > a > .fab,
.mobile-menu > li.show > a > .far {
    color: var(--q2u-primary, #cfad3c);
}