/* The theme draws its 84px black bar only under body.theme-www, which every page of the client's carries;
   the kit's shop pages (the hub, listings, search, cart, product) and the 404 set no theme class, so they get it here,
   and reserve the bar's height since the theme's .main offset does not reach their <main>. Phone needs nothing: the
   theme's fixed 55px bar and body padding apply on every page. */
@media screen and (min-width: 768px) {
  body:not(.theme-www):not(.theme-white):not(.theme-black) .header { background: var(--site-header-bg); height: 84px; }
  body:not(.theme-www):not(.theme-white):not(.theme-black) .header-wrap { height: 84px; }
}

/* the cart icon in the menu row: hung past the search button's right edge, so the client's menu never moves for it;
   below 1240px the fixed MENU button takes that room and it sits beside the search button instead
   (the theme pads every menu link, li > a, 20px; this one is an icon) */
.header .gnav > ul > li > a.tc-hcart {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 6px; padding: 0; display: inline-flex;
}
@media screen and (min-width: 768px) and (max-width: 1239px) {
  .header .gnav > ul > li:has(> a.tc-hcart:not(.is-empty)) { display: inline-flex; align-items: center; }
  .header .gnav > ul > li > a.tc-hcart { position: relative; left: auto; top: auto; transform: none; margin: 0 12px 0 0; }
}

/* the kit's theme switch, shown at night only: on the desktop it hangs past the search button like the cart, which moves
   one switch further out while it shows; on the phone it sits left of the search button with the cart left of it */
.header .gnav > ul > li > .parts-theme-switch {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 2px; color: var(--site-on-dark);
}
:root[data-parts-night] .header .gnav > ul > li > a.tc-hcart { margin-left: 46px; }
.tc-hswitch-sp { position: absolute; top: 50%; right: 110px; transform: translateY(-50%); z-index: 2; color: var(--site-on-dark); }
@media screen and (max-width: 767px) {
  .header .gnav > ul > li > .parts-theme-switch { display: none; }
  :root[data-parts-night] .tc-hcart-sp { right: 154px; }
}
@media screen and (min-width: 768px) and (max-width: 1239px) {
  :root[data-parts-night] .header .gnav > ul > li > a.tc-hcart { margin-left: 0; }
}