/**
 * ED Front Office — optional header icon presentation.
 *
 * Scope: Warehouse 4.8.x header glyphs only.
 * The original Font Awesome <i> elements remain in the DOM so all theme
 * links, dropdowns, cart counters, responsive behavior and event bindings
 * stay native. Unsupported CSS masks fall back to the original glyphs.
 */

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  /* Shared outline-glyph presentation. */
  #desktop-header .header-search-btn > .fa-search::before,
  #desktop-header .header-user-btn > .fa-user.icon::before,
  #desktop-header .header-cart-btn > .fa-shopping-bag.icon::before,
  #mobile-header .m-nav-btn > .fa-bars::before,
  #mobile-header .m-nav-btn > .fa-search::before,
  #mobile-header .m-nav-btn > .fa-user::before,
  #mobile-header .m-nav-btn > .fa-shopping-bag.mobile-bag-icon::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: -0.125em;
  }

  /* Desktop: IQIT search button. */
  #desktop-header .header-search-btn > .fa-search::before {
    -webkit-mask-image: url("../img/header/search.svg");
    mask-image: url("../img/header/search.svg");
  }

  /* Desktop: native customer-sign-in button. */
  #desktop-header .header-user-btn > .fa-user.icon::before {
    -webkit-mask-image: url("../img/header/account.svg");
    mask-image: url("../img/header/account.svg");
  }

  /* Desktop: native shopping-cart button. */
  #desktop-header .header-cart-btn > .fa-shopping-bag.icon::before {
    -webkit-mask-image: url("../img/header/cart.svg");
    mask-image: url("../img/header/cart.svg");
  }


  /* Mobile: Warehouse header variants 1–3. */
  #mobile-header .m-nav-btn > .fa-bars::before {
    -webkit-mask-image: url("../img/header/menu.svg");
    mask-image: url("../img/header/menu.svg");
  }

  #mobile-header .m-nav-btn > .fa-search::before {
    -webkit-mask-image: url("../img/header/search.svg");
    mask-image: url("../img/header/search.svg");
  }

  #mobile-header .m-nav-btn > .fa-user::before {
    -webkit-mask-image: url("../img/header/account.svg");
    mask-image: url("../img/header/account.svg");
  }

  #mobile-header .m-nav-btn > .fa-shopping-bag.mobile-bag-icon::before {
    -webkit-mask-image: url("../img/header/cart.svg");
    mask-image: url("../img/header/cart.svg");
  }
}