/* vk-topbar-mobile-20261113.css
   Phone utility bar only. Prep 13 Nov 2026. ASCII only. Not live until uploaded.

   On body.mobile at max-width 760px:
     - Hide #TNsearchIcon, the magnifier jquery-site-shared prepends to #topNavBar.
       Do not touch #headerSearchBin / #Searchwrap (the white search box by the logo)
       or #TNsearchForm.
     - Center li.topNavTabVkPromo (Early BF / Early Black Friday) in the black bar.
     - Keep li.topNavTabCart at the right edge.
   Desktop (body.desktop) is unchanged. Above 760px is unchanged.

   After 26 Nov, when vk-earlybf20.js stops injecting li.topNavTabVkPromo, Cart
   stays on the right with no leftover gap: the promo tab is taken out of flow,
   so its absence does not leave a hole.

   NOTE: #headerSearchBin is already display:none below 650px (css-shared-site).
   On typical phones the bar icon is the only search entry. Hiding it without
   a replacement removes search on those widths. An optional block at the
   bottom of this file reveals #TNsearchForm under the logo at <=650px. It is
   commented out so this file matches the approved bar-only change. Uncomment
   it if search should stay visible on phones.

   Install: add this <link> to Variables Cssjs-head-common, after the other
   header/nav CSS (vk-header-fix, vk-earlybf20.css is fine either side):
   <link rel="stylesheet" type="text/css" href="https://lib.store.turbify.net/lib/vickerey/vk-topbar-mobile-20261113.css" />
*/

@media (max-width: 760px) {

  /* Search magnifier in the black bar only. */
  body.mobile #topNavBar #TNsearchIcon {
    display: none !important;
  }

  /* .topNav is absolute; right:0, so the tab cluster packs to the right.
     Stretch it across the bar so the promo tab can be centered in the
     full 100% width, while Cart stays at the right end. */
  body.mobile #topNavBar .topNav {
    left: 0;
    right: 0;
  }

  body.mobile #topNavBar ul#topNavTabs {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    position: relative;
  }

  body.mobile #topNavBar ul#topNavTabs > li.topNavTab {
    float: none;
  }

  /* Center only the Early BF tab. Cancel the stock 10px left margin so the
     midpoint is the true center of the bar. */
  body.mobile #topNavBar ul#topNavTabs > li.topNavTabVkPromo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
  }

}

/* Optional: keep a search field under the logo on phones, where
   #headerSearchBin is already hidden (max-width: 650px in css-shared-site)
   and hiding #TNsearchIcon would otherwise leave no search. This is the
   same #TNsearchForm the magnifier already slideToggles. Do not enable
   above 650px; the white #headerSearchBin box is already visible there.
   Enabled 13 Nov 2026 (Steve saw the search box under the logo and expects it). */

@media (max-width: 650px) {
  body.mobile #TNsearchForm {
    display: block !important;
  }
}