@media (min-width: 801px) {
/* SKDA B2B nav redesign — single consolidated header bar, centered nav links,
   hover mega-menus, redesigned search/account/cart. Mocked up live and approved
   before this file was written; see skda-nav-redesign.js for the DOM setup this
   CSS depends on. Inlined into layout/base.html: a hand-placed assets/css/ file
   is NOT served by BigCommerce (that path is reserved for compiled SCSS output). */

header.header .header-logo-container {
  display: block !important;
  visibility: hidden !important;
  width: clamp(96px, calc(16.327vw - 34.776px), 216px) !important;
  height: 1px !important;
  flex: 0 0 auto !important;
}
#quickSearch { display: none !important; }
header.header > div:empty { display: none !important; }
#menu.navPages-container .navPage-subMenu { display: none !important; }

header.header {
  /* mega-menu column geometry.
     Everything below scales linearly with the viewport between 801px (the
     mobile hand-over) and 1536px (where the approved full-size design sits),
     via clamp(): A + (B-A)*(100vw-801)/735. Below 1536 the bar tightens
     smoothly instead of stepping, and at 801 it is still legible at 13px.
     The 11px inter-column gap is mirrored in the JS that clamps the panel's
     left offset -- keep the two in step. */
  --skda-col: clamp(250px, calc(14.966vw + 130.122px), 360px);
  --skda-off: calc(var(--skda-col) + 11px);
  /* one value drives BOTH side gaps, so the logo sits exactly as far from the
     left edge as the cart icon does from the right, at every width */
  --skda-edge: clamp(12px, calc(3.265vw - 14.155px), 36px);
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: var(--sk-white) !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 var(--skda-edge) !important;
  gap: clamp(8px, calc(3.265vw - 18.155px), 32px) !important;
  overflow: visible !important;
  border-bottom: 1px solid var(--sk-line-soft) !important;
}
header.header .banners, header.header .navUser-section-mobile { display: none !important; }

/* logo — wrapped in a link back to the homepage */
#skda-nav-logo-link {
  position: absolute !important;
  left: var(--skda-edge) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: block !important;
  line-height: 0 !important;
  z-index: 501;
}
#skda-nav-logo {
  height: clamp(21px, calc(0.9524vw + 13.371px), 28px) !important;
  width: auto !important;
  display: block !important;
}

#menu.navPages-container {
  position: static !important;
  top: auto !important;
  left: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: none !important;
  overflow: visible !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Last resort, and the reason this can never break the page again: if the
     links still do not fit (a long category name, a new category), the row
     scrolls inside itself instead of forcing the whole document wide.
     In practice this only engages below ~965px. */
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;
  min-width: 0 !important;
}
#menu.navPages-container::-webkit-scrollbar { display: none !important; }
/* The scroll valve hides the scrollbar, so without this there is nothing to say
   more links exist off to the right. JS sets the two classes from scrollLeft, so
   each edge only fades while there is actually something behind it -- with both
   at 0 the gradient is solid black and masks nothing. */
#menu.navPages-container {
  --skda-fade-l: 0px;
  --skda-fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--sk-ink) var(--skda-fade-l),
                      var(--sk-ink) calc(100% - var(--skda-fade-r)), transparent 100%) !important;
  mask-image: linear-gradient(to right, transparent 0, var(--sk-ink) var(--skda-fade-l),
              var(--sk-ink) calc(100% - var(--skda-fade-r)), transparent 100%) !important;
}
#menu.navPages-container.skda-nav-fade-start { --skda-fade-l: 32px; }
#menu.navPages-container.skda-nav-fade-end { --skda-fade-r: 32px; }

/* The chevrons that go with the fade. A mouse has no horizontal scroll axis
   (shift+wheel is the only route and nobody knows it), so the fade alone would
   show that links exist without giving mouse users any way to reach them.
   These are siblings of #menu, NOT children: a mask applies to its element's
   own content, so a chevron inside would fade out along with the links.
   Background stays transparent -- they sit inside the faded strip, which is
   already clear of text. JS positions them from #menu's box and shows each one
   only while there is something to scroll to on that side. */
.skda-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--sk-ink);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 502;
}
.skda-nav-arrow.skda-arrow-on { display: flex; }
.skda-nav-arrow:hover { color: var(--sk-ink); }
.skda-nav-arrow svg { width: 15px; height: 15px; display: block; }
/* plain `center` makes the left overflow unreachable once the row scrolls;
   `safe center` falls back to flex-start exactly when that would happen */
@supports (justify-content: safe center) {
  #menu.navPages-container { justify-content: safe center !important; }
}
#menu.navPages-container nav.navPages {
  width: fit-content !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
#menu.navPages-container .navPages-quickSearch,
#menu.navPages-container .navPages-list--user {
  display: none !important;
}
#menu.navPages-container .navPages-list:not(.navPages-list--user) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: fit-content !important;
  gap: 4px;
}
#menu.navPages-container .navPages-item > a.navPages-action {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: clamp(7px, calc(1.4693vw - 4.77px), 17.8px) !important;
  padding-right: clamp(7px, calc(1.4693vw - 4.77px), 17.8px) !important;
  font-size: clamp(13px, calc(0.2721vw + 10.82px), 15px) !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}
/* The chevron beside each top-level link. The mega panel opens on hover, so on
   desktop it affords nothing, and five of them cost 95px (an 8px icon plus an
   11px left margin each) that the nav row needs at narrower widths. This rule
   is inside the desktop-only wrapper, so the mobile menu keeps its chevrons --
   there they ARE the expand/collapse control. */
#menu.navPages-container .navPages-action-moreIcon { display: none !important; }

#menu.navPages-container .navPages-item {
  white-space: nowrap !important;
  /* Cornerstone's own 0 10px 0 0; nothing here wants it, and six of them is
     60px of width we cannot spare at the narrow end. */
  margin: 0 !important;
}
/* The theme's collapsible plugin drops an .is-open class on a clicked trigger,
   which its CSS paints #f5f5f5 -- a grey box round the header. The mega panel is
   driven from JS here, so that state carries no meaning. Excludes the Shop by
   Bike pill, whose black background is deliberate. */
#menu.navPages-container a.navPages-action:not(.sbb2-navbtn).is-open,
#menu.navPages-container a.navPages-action:not(.sbb2-navbtn):focus,
#menu.navPages-container a.navPages-action:not(.sbb2-navbtn):active {
  background: transparent !important;
  box-shadow: none !important;
}

header.header nav.navUser {
  order: 3 !important;
  margin-left: auto !important;
  /* zeroed so the cart icon's distance from the right edge is exactly
     --skda-edge -- the same value that positions the logo on the left */
  margin-right: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: none !important;
  flex-basis: auto !important;
}
header.header nav.navUser .navUser-section-desktop {
  display: none !important;
}
header.header nav.navUser .navUser-section--alt {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
header.header nav.navUser .navUser-section--info { display: none !important; }
/* The theme's clearfix ::before/::after are FLEX ITEMS here, so each one eats a
   full 11px gap -- 22px of dead space that pushed the cart icon in from the
   right edge and broke the symmetry with the logo. */
header.header nav.navUser .navUser-section--alt::before,
header.header nav.navUser .navUser-section--alt::after { display: none !important; }
header.header nav.navUser .navUser-section--alt > li:not(:has(#skda-nav-search-pill)):not(.navUser-item--account):not(.navUser-item--cart) {
  display: none !important;
}
header.header nav.navUser li.navUser-item { display: flex !important; align-items: center !important; align-self: center !important; }
header.header nav.navUser .navUser-action:not(.navUser-action--show-on-mobile) { padding: 0 !important; display: flex !important; align-items: center !important; }
header.header nav.navUser .navUser-action--show-on-mobile { display: none !important; }
/* hide the theme's own Sign Out link, which is a DIRECT child of the account li.
   The `>` matters: without it this also hides #skda-account-sign-out, which lives
   nested inside #skda-account-dropdown further down the same li. */
header.header nav.navUser li.navUser-item--account > a[href*="logout"] { display: none !important; }

#skda-nav-search-pill {
  display: flex !important;
  align-items: center !important;
  gap: clamp(5px, calc(0.408vw + 1.731px), 8px) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 20px !important;
  padding: 5px 12px !important;
  height: auto !important;
  align-self: center !important;
  box-sizing: border-box !important;
  line-height: normal !important;
  color: var(--sk-ink-2) !important;
}
#skda-nav-search-pill svg { flex: 0 0 auto; color: var(--sk-ink-2); }
/* skda-nav-redesign.js now moves the whole <form> into the pill (not just the
   <input> -- see the JS comment for why). These wrappers are given no box of
   their own so only the input, and whatever Searchspring later injects after
   it, actually take part in the pill's flex layout; the form/fieldset/field
   contribute nothing visually. The screen-reader label already has no visual
   footprint (theme's own .is-srOnly), so it's untouched here. */
#skda-nav-search-pill form,
#skda-nav-search-pill .form-fieldset,
#skda-nav-search-pill .form-field {
  display: contents !important;
}
/* the theme's native "clear search" button -- not part of this redesign;
   hidden to keep the pill exactly as it looked before the form was moved in */
#skda-nav-search-pill .results-clear {
  display: none !important;
}

/* Searchspring's own autocomplete dropdown. Its bundle.js injects this as an
   absolutely-positioned sibling right after the <input> -- wherever that input
   currently lives in the DOM. Snap's own template centres a wide (~600-900px)
   panel under the input by default, which is fine for a full-width search bar
   but not for our 123px pill sitting near the right edge of the header: on
   category/brand pages (where Snap loads eagerly rather than deferred) it was
   overflowing off the right of the viewport, forcing the whole page to scroll
   horizontally. Right-aligning it to the input's containing <ul> and capping
   its width keeps it fully on-screen at every size; overflow:hidden on the
   outer target is a belt-and-suspenders guard -- Snap's inner layout ignores
   the cap and stays its own fixed width, but a clipped child never expands the
   page the way an unconstrained position:absolute one does. */
header.header ul.navUser-section--alt .ss__autocomplete--target {
  left: auto !important;
  right: 0 !important;
  /* Snap's own layout for this panel is a fixed ~900px (a 200px terms column
     plus a 700px results column, neither of which is fluid) -- 420px was
     picked purely to guarantee no overflow, but it clipped that design down
     to two cramped, half-height product tiles. 900px shows it exactly as
     Snap designed it on any screen with the room; the clamp still guarantees
     it can never exceed the viewport on narrower ones. */
  max-width: min(900px, calc(100vw - 2 * var(--skda-edge))) !important;
  overflow: hidden !important;
  /* Animated the same way the mega-menu is: skda-nav-redesign.js measures
     scrollHeight and transitions between explicit px values. Snap itself just
     mounts/unmounts its content, which cannot be animated by adding a
     transition alone -- the JS below is what actually makes this move. */
  transition: height 0.22s ease !important;
}

#skda-nav-search-pill input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: var(--sk-fs-small) !important;
  /* floored at 70px: narrower than this and the field is not typeable, and a
     dead search box is a worse trade than a few more px of nav-row scroll */
  width: clamp(70px, calc(7.211vw + 12.24px), 123px) !important;
  height: 17px !important;
  line-height: 17px !important;
  box-shadow: none !important;
}

#skda-account-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: var(--sk-ink) !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}
#skda-cart-icon { position: relative !important; }
#skda-cart-icon #skda-cart-img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  display: block !important;
}
#skda-cart-icon .countPill.cart-quantity {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  font-size: var(--sk-fs-caption) !important;
  line-height: 1 !important;
  min-width: 15px !important;
  height: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
#skda-cart-icon .countPill.cart-quantity.skda-cart-empty {
  display: none !important;
}

/* ---- mega-menu: full-width panel below the header ----
   Open, close and switch are ALL driven by animating #skda-mega-content's height
   over the same duration, so the panel concertinas in and out of the nav bar at
   one consistent speed. There is deliberately NO opacity transition: fading was
   what made the close read as faster than the resize.
   Vertical padding lives on the slot, NOT the panel, or collapsing to height:0
   would still leave the panel's own padding behind as a white stripe. */
.navPage-subMenu {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
header.header > .navPage-subMenu {
  position: fixed !important;
  /* Was a hardcoded 56px, which assumed the header always sits flush at the
     very top of the viewport. Since the ticker banner (skda-nav-global.css)
     now sits above it, that's only true once scrolled past the ticker's
     height -- before that, on a fresh page load, the header itself is pushed
     down by the ticker, and a fixed 56px put this panel 20-30px too high,
     overlapping the header instead of sitting right below it. skda-nav-
     redesign.js sets --skda-header-bottom from the header's actual live
     position; 56px remains only as the fallback for the instant before that
     JS has run. */
  top: var(--skda-header-bottom, 56px) !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: var(--skda-edge) !important;
  /* Already clamped by skda-nav-redesign.js, which measures how many tiers THIS
     menu can actually open. Doing it here meant reserving room for a 3-tier
     stack on every menu, which dragged single-column ones (Apparel,
     Accessories) ~160px left of the header they belong to. */
  padding-left: var(--trigger-left, 21px) !important;
  /* #f5f5f5 and no shadow are the 20260825 theme's own values. The grey matters:
     the parent items carry a 1px var(--sk-surface) bottom border, which is invisible against
     this background and shows up as a hairline rule on white. */
  background: var(--sk-surface) !important;
  border-top: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
header.header > .navPage-subMenu.skda-mega-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
header.header > .navPage-subMenu ul, header.header > .navPage-subMenu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Scrollable, because a long tier-2 list (Full Graphics Kits is 121 items) makes
   the panel taller than the viewport. The panel is position:fixed, so without this
   the overflow is simply unreachable -- a scroll gesture moves the page behind it
   instead. JS caps the animated height to the viewport; this then scrolls inside.
   overscroll-behavior stops that scroll chaining out to the page at the ends. */
#skda-mega-content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  height: 0;
  transition: height 0.22s ease !important;
  /* Never PAINT a scrollbar. The height is animated on every open/close/switch,
     so menus of differing heights made a bar flick on and off mid-transition,
     which reads as a glitch. Scrolling itself is untouched -- wheel, trackpad
     and keyboard still reach the overflow on the genuinely tall menus (Full
     Graphics Kits is 121 items); only the bar is hidden. Verified live: with a
     1012px content clamped to 300px, scrollTop still moved and the measured
     bar width was 0. */
  scrollbar-width: none !important;      /* Firefox, and Chrome 121+ */
  -ms-overflow-style: none !important;   /* legacy Edge */
}
#skda-mega-content::-webkit-scrollbar {  /* WebKit/Blink */
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* A product page marks its WHOLE category ancestry is_active, so reopening the
   mega menu from, say, a Tenere 700 product lit up that trail with the stock
   light-theme fills -- #CCC, #E5E5E5, $darkGrey and a solid $black row -- which
   against the inverted panel read as a rendering fault rather than "you are
   here". Only the FILL is dropped: the white text and the bold weight on the
   ancestor rows stay, so the trail is still legible. Scoped to the mega panel
   on purpose -- the mobile menu uses these same classes and keeps its own
   active styling. */
#skda-mega-panel .is-active,
#skda-mega-panel .is-active > a.navPages-action,
#skda-mega-panel .navPage-subMenu-item.is-active .navPage-subMenu-action,
#skda-mega-panel .navPage-childList-item.is-active .navPage-childList-action,
#skda-mega-panel .navPage-childList-item.is-active .navPages-action {
  background: transparent !important;
  color: inherit !important;
}

/* Sub-panels exactly as the AU storefront does them: each level is an absolutely
   positioned 360px WHITE panel, offset 371px to the right of its parent list and
   vertically aligned to the top of the row that opened it (JS sets `top`), so it
   literally appears to the right of the clicked option. Tier 3 nests the same way
   inside tier 2, giving 371px / 742px. Measured off au.skda.com.au. */
.skda-mega-slot { padding: 21px 0 32px !important; }
.skda-mega-slot.skda-slot-on { display: block !important; }

/* the sub-panels position against this, so it must be the containing block and
   exactly one item wide -- the items themselves are 360px in the stock theme */
.skda-mega-slot > ul.navPage-subMenu-list {
  position: relative !important;
  width: var(--skda-col) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.skda-mega-slot > ul.navPage-subMenu-list > li {
  width: 100% !important;
  position: static !important;
}

header.header > .navPage-subMenu ul.navPage-childList,
header.header > .navPage-subMenu ul.navPage-childList-second-level {
  display: none !important;
  position: absolute !important;
  left: var(--skda-off) !important;
  right: auto !important;
  top: 0;
  width: var(--skda-col) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background: var(--sk-white) !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 50 !important;
}
header.header > .navPage-subMenu ul.skda-child-open { display: block !important; }
header.header > .navPage-subMenu ul.navPage-childList > li { position: static !important; }
header.header > .navPage-subMenu .navPage-subMenu_category-name { display: none !important; }

/* the open row reads as one piece with the panel beside it: white, black text,
   and 21px wider so the highlight runs into the gap (AU does exactly this) */
header.header > .navPage-subMenu a.skda-child-active {
  background: var(--sk-white) !important;
  color: var(--sk-ink) !important;
  width: calc(var(--skda-col) + 21px) !important;
}

/* Deliberately NO typography overrides here: the dropdown text keeps the theme's
   own styling from the 20260825 build (size, weight, spacing, separators, hover).
   Only layout and behaviour are changed. */
header.header > .navPage-subMenu a.skda-has-children { cursor: pointer !important; }

/* ---- account dropdown ----
   top: calc(100% + 17px) lands its top edge exactly on the header's bottom edge:
   the account li is 22px tall, vertically centred in the 56px bar, so its own
   bottom sits at 39px and 39 + 17 = 56. Keeps it clear of the nav bar. */
#skda-account-dropdown {
  position: absolute;
  top: calc(100% + 17px);
  right: 0;
  min-width: 160px;
  background: var(--sk-white);
  border: 1px solid var(--sk-line-soft);
  border-radius: 6px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0.85);
  transform-origin: top right;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  z-index: 600;
}
#skda-account-dropdown.skda-account-open {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}
#skda-account-dropdown a {
  padding: 9px 16px;
  font-size: var(--sk-fs-small);
  font-weight: 500;
  color: var(--sk-ink);
  text-decoration: none;
  white-space: nowrap;
}
#skda-account-dropdown a:hover { background: var(--sk-surface); }
#skda-account-sign-out { border-top: 1px solid var(--sk-line-soft); }
/* Store credit line (2.2.5): label + balance at the top of the account menu, not a link.
   Two ids so it outranks the dark-nav colour restores (header.header #skda-account-dropdown *). */
#skda-account-dropdown:has(#skda-account-credit) { padding-top: 0; }
#skda-account-credit {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 16px 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--sk-line-soft);
  white-space: nowrap; cursor: default;
}
header.header #skda-account-dropdown #skda-account-credit .skda-credit-label { font-size: var(--sk-fs-caption) !important; color: var(--sk-ink-2) !important; font-weight: 400; }
header.header #skda-account-dropdown #skda-account-credit .skda-credit-value { font-size: var(--sk-fs-body) !important; color: var(--sk-ink) !important; font-weight: 500; }

/* ---- cart preview dropdown ----
   The theme positions this with INLINE styles, so these need !important to win,
   and scopes width to 100% -- which, once the cart li becomes the containing
   block, would resolve to the icon's 22px. Hence the explicit width. Scoped to
   .is-open so the closed state's left:-9999px hiding trick is left alone. */
header.header li.navUser-item--cart { position: relative !important; }
header.header #cart-preview-dropdown.is-open {
  position: absolute !important;
  top: calc(100% + 17px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: 340px !important;
  min-width: 340px !important;
  max-width: 92vw !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--sk-white) !important;
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08) !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  z-index: 600 !important;
}

}

/* This file sits OUTSIDE the desktop-only `@media (min-width:801px)` wrapper
   build.py adds around skda-nav-redesign.css -- for rules that need to run
   unconditionally, or that need their OWN, different behaviour per width
   (e.g. the ticker banner below). It may contain its own @media queries;
   what it must never do is get caught by the OTHER file's wrapper. */

/* "Shop by Bike" is in the nav twice: the black quick-picker pill
   (a.sbb2-navbtn) and a plain category dropdown that duplicates it. The
   duplicate is hidden on the storefront only -- the category itself is
   untouched in BigCommerce, so it stays visible in the control panel and its
   pages, search and filters all keep working. Tagged by skda-nav-redesign.js,
   which is the only place that can match a nav item on its text. */
#menu.navPages-container li.skda-nav-hidden { display: none !important; }

/* The "Livery Partners..." text ticker exists TWICE on the page -- a
   BigCommerce "global region" quirk that requires separate desktop and mobile
   widget slots, both currently configured with identical content. Rather than
   keep two independent copies in sync for the shared sticky-scroll behaviour
   below, only the mobile copy is used, unconditionally, at every width; the
   desktop copy is permanently hidden. skda-nav-redesign.js moves the mobile
   copy to be header.header's previous sibling on every page load (not just
   desktop -- this must also happen on a real phone, so it cannot live inside
   apply()/teardown(), which never runs there). */
.global-top-banner-desktop { display: none !important; }
.global-top-banner-mobile { display: block !important; }

/* Strip colour: #2B2B2B with white text at every width (Tyson, 2026-09-22, theme 2.2.1).
   skda-nav-invert.js paints the same colours inline (paintStrip), which is what actually
   wins; these only cover the moment before that script runs. */
.global-top-banner-mobile .skda-text-banner__slide { color: var(--sk-white) !important; }
.global-top-banner-mobile .skda-text-banner { background-color: #2b2b2b !important; }

/* Site-wide top gap above the header, removed on request -- confirmed
   present, identically, on every page type (home and category alike), not
   something scoped to one page's own layout. */
div.body { margin-top: 0 !important; }

/* ---- "banner above the nav, nav covers it on scroll down" ----
   Desktop needs nothing further: the header is already `position: sticky`
   (see skda-nav-redesign.css), so once the banner sits before it in the DOM
   (done in JS), scrolling past it and having the header cover it is just what
   sticky already does. Only given a resting `position: relative` + z-index
   here so it stacks correctly under the header (z-index 500) during that
   scroll, mirroring the same relationship mobile needs explicitly below. */
.global-top-banner-mobile {
  position: relative;
  z-index: 499;
}
/* 2.2.1: the strip arrives with a 0.5px bottom margin (the strip widget's own styling, not
   this template), which showed the white page as a pinstripe between strip and nav. */
.global-top-banner-mobile { margin-bottom: 0 !important; }

@media (max-width: 800px) {
  /* 2.2.4: the phone layout from the FIRST paint (Tyson, 2026-09-22). This block used to
     park the strip position:fixed at the top with a div.body margin to clear it, and the
     real layout only arrived with html.skda-mnav (set by skda-mobile-nav.js at
     DOMContentLoaded) - so a refresh showed the stock header, a white band and the strip
     below the bar. Now it matches the skda-mnav rules (2.2.3) exactly: the strip in the
     page flow, the bar sticky at the top, nothing reserved above the content. The page
     then no longer moves when the scripts start. */
  .global-top-banner-mobile { position: relative !important; top: auto !important; z-index: 21 !important; }
  body header.header { position: sticky !important; top: 0 !important; }
  body { padding-top: 0 !important; }
  div.body { margin-top: 0 !important; }
  /* The stock header's CONTENTS (old logo and icons) stay invisible until the mobile nav
     has rebuilt them - a plain dark bar for that moment instead of the old menu. If the
     mobile nav ever fails to start, they reveal themselves after 2.5s, so the page is
     never left without a nav. Not !important: an !important visibility would override
     the reveal animation. */
  html:not(.skda-mnav) header.header > * { visibility: hidden; animation: skda-hdr-reveal 0s 2.5s forwards; }
}
@keyframes skda-hdr-reveal { to { visibility: visible; } }