/* header.css: the client's header on our stack, beside the theme's own stylesheets.
   The search field's form (ours, for GET /search) takes no box of its own, so the theme's layout is unchanged.
   The header stacks above the kit's vehicle band under it, so the megamenu's dropdowns open over the band. */
header.page-header.type19 { z-index: 21; }
form.amsearch-form { display: contents; }

/* the brand bar: each logo's box is fixed, and its colour image sits stacked on the grey one and shows on hover by
   opacity alone, so nothing moves under the pointer (the theme swapped the src in a script). TCI, this store, is in
   colour already and has none. */
.main-panel-top .brands img { width: 115px; height: 34px; display: block; transition: none; }
.main-panel-top .brands a { position: relative; display: block; }
.main-panel-top .brands .hd-brand-on { position: absolute; top: 0; left: 0; opacity: 0; }
.main-panel-top .brands a:hover .hd-brand-on { opacity: 1; }
.main-panel-top .brands a:hover .hd-brand-off { opacity: 0; }

/* Products: the word opens its dropdown (header.js), as hover does; the See all products button sits at its foot,
   and in the phone drawer at the end of the list */
.sw-megamenu li.level0 > a[data-hd-products] { cursor: pointer; }
.sw-megamenu .hd-all-products { padding: 10px 15px 5px; }
@media (min-width: 992px) {
  .sw-megamenu.navigation li.level0.fullwidth > .submenu.opened { visibility: visible; opacity: 1; }
  .sw-megamenu .hd-all-products { padding-left: 0; }
}
/* the theme's primary button, which the megamenu's link rules would otherwise turn into a full-width menu line;
   it reads in mixed case, as written, where the theme's buttons are in capitals */
.sw-megamenu.navigation li.level0.fullwidth > .submenu .hd-all-products a.action.primary { display: inline-block; width: auto;
  height: 3rem; padding: 0 2em; color: var(--site-accent-fg); font-size: 16px; font-weight: 700; line-height: 3rem; text-transform: none; }