/**
 * Custom Gutters Mixin
 * This will create custom gutters for localized implentation.
 * Usage: Pass in a new gutter value and this will apply those to child grid classnames.
 *
 * - does not loop through breakpoints
 * - intended to be used in an already-defined media query or child structure
 *
 * param: $number new gutter value, already halved
 * param: $context 'container', 'row'. Used to skip the L1 or L2 classname selectors. Pass as an empty string to only apply to columns.
 * param: $colclassname custom classname to use for columns. Defaults to a generic '.col-' selector
 */
.header--primary .header__mainNav {
  background-color: #fff;
  background-image: none;
  border-bottom: solid 1px #ccc;
}
.header--primary .header__mainNav .mainNav__menu .icon--primary .menu.m-0 {
  fill: #404040;
}
.header--primary .header__mainNav .navItem--logo .svg--primary {
  fill: #404040;
}
.header--primary .header__mainNav .mainNav__search .search {
  fill: #404040;
}
.header--primary .header__mainNav .navItem--cart .minicart .cart-alt {
  fill: #404040;
  height: 1.75rem;
  width: 1.75rem;
}
.header--primary .header__mainNav .navItem--cart .minicart-link {
  outline-color: #404040;
}
.header--primary .header__mainNav .mainNav__navItem.mainNav__menu:focus {
  outline-color: #404040;
}
.header--primary .navItem--secondary > .navItem__anchor {
  color: #404040;
}
.header--primary .navItem--secondary > .navItem__anchor.active, .header--primary .navItem--secondary > .navItem__anchor:focus, .header--primary .navItem--secondary > .navItem__anchor:hover {
  border-bottom: 0.375rem solid #33788e;
  color: #33788e;
}
.header--primary .navItem--secondary.l2-dropdown > .navItem__button:hover,
.header--primary .navItem--secondary.l2-dropdown > .navItem__button:focus,
.header--primary .navItem--secondary.l2-dropdown > .navItem__anchor:hover + .navItem__button,
.header--primary .navItem--secondary.l2-dropdown > .navItem__anchor:focus + .navItem__button,
.header--primary .navItem--secondary.l2-dropdown > .navItem__button[aria-pressed=true] {
  outline-color: #33788e;
}
.header--primary .navItem--secondary.l2-dropdown > .navItem__button:hover .svg--primary,
.header--primary .navItem--secondary.l2-dropdown > .navItem__button:focus .svg--primary,
.header--primary .navItem--secondary.l2-dropdown > .navItem__anchor:hover + .navItem__button .svg--primary,
.header--primary .navItem--secondary.l2-dropdown > .navItem__anchor:focus + .navItem__button .svg--primary,
.header--primary .navItem--secondary.l2-dropdown > .navItem__button[aria-pressed=true] .svg--primary {
  fill: #33788e;
  margin-bottom: 0.25rem;
}
.header--primary .navItem .navItem__button:focus {
  outline-color: #404040;
}
.header--primary .navItem--logo > a:focus {
  outline-color: #404040;
}
.header--primary .navItem--search > button:focus {
  outline-color: #404040;
}