/* ===== SKDA mobile nav (2026-09-02) =========================================
   Inline rather than in the JS file so the bar paints correctly on FIRST paint
   instead of flashing the stock header. DOM setup: assets/js/skda-mobile-nav.js
   Reference: nike.com mobile menu + search.

   Theme quirks this works around, all found the hard way:
   - the mobile bar is natively TRANSPARENT with WHITE png assets over the hero
   - .header-logo-image-container carries a hard-coded BLACK background
   - nav.navUser spans the full bar, so any background on it covers the logo
   - the theme stretches header.header to 100vh when the menu opens
   - the panel animates WIDTH from 0 (can't slide) and carries margin-top:45px
   ========================================================================== */
@media (max-width: 800px){
  .skda-mnav .skda-mnav-hide{display:none !important;}

  .skda-mnav .skda-text-banner{background:#2b2b2b !important;}
  .skda-mnav .skda-text-banner,
  .skda-mnav .skda-text-banner *{color:var(--sk-white) !important;}

  .skda-mnav header.header{background:var(--sk-white) !important;border-bottom:1px solid var(--sk-line-soft) !important;}
  .skda-mnav header.header .header-logo-image-container{background:transparent !important;}
  .skda-mnav header.header .header-logo-container{position:relative !important;z-index:1 !important;
    pointer-events:none !important;background:transparent !important;}
  .skda-mnav header.header .header-logo{display:flex !important;justify-content:flex-start !important;
    align-items:center !important;padding-left:16px !important;margin:0 !important;height:56px !important;}
  .skda-mnav header.header .header-logo__link{margin:0 !important;padding:0 !important;width:auto !important;
    flex:0 0 auto !important;display:inline-flex !important;align-items:center !important;pointer-events:auto !important;}
  .skda-mnav header.header .header-logo__link img{filter:none !important;width:auto !important;
    height:28px !important;max-width:150px !important;object-fit:contain !important;}

  .skda-mnav header.header nav.navUser{z-index:6 !important;background:transparent !important;
    display:flex !important;justify-content:flex-end !important;align-items:center !important;
    gap:2px !important;padding-right:8px !important;}
  .skda-mnav header.header nav.navUser > ul{display:flex !important;align-items:center !important;
    gap:2px !important;margin:0 !important;}
  .skda-mnav .skda-mnav-li{display:inline-flex !important;align-items:center !important;}

  .skda-mnav header.header nav.navUser a.navUser-action span{font-size:0 !important;line-height:0 !important;}
  /* SKDA 2026-09-21 (2.1.6): cart count on the phone/tablet nav.  The rule above zeroes
     every span in the header links to hide their text labels - the count pill is a span
     too, so its number vanished.  And the mobile cart link is not positioned, so the pill
     was placed against the whole nav bar and landed on the hamburger.  Anchor it to the
     cart link and give the number its size back (same 15px white pill as desktop). */
  html.skda-mnav header.header nav.navUser a.navUser-action--show-on-mobile{position:relative !important;}
  html.skda-mnav header.header nav.navUser a.navUser-action--show-on-mobile .countPill.cart-quantity{
    position:absolute !important;left:auto !important;top:8px !important;right:2px !important;
    font-size:var(--sk-fs-caption) !important;line-height:1 !important;min-width:15px !important;height:15px !important;
    padding:0 3px !important;box-sizing:border-box !important;align-items:center !important;justify-content:center !important;}
  html.skda-mnav header.header nav.navUser a.navUser-action--show-on-mobile .countPill.cart-quantity.countPill--positive{display:flex !important;}
  .skda-mnav header.header nav.navUser a.navUser-action,
  .skda-mnav header.header nav.navUser a.skda-mnav-icon{color:var(--sk-ink) !important;}
  .skda-mnav header.header nav.navUser a.navUser-action svg,
  .skda-mnav header.header nav.navUser a.navUser-action svg *{fill:none !important;stroke:var(--sk-ink) !important;
    stroke-width:1.7 !important;vector-effect:non-scaling-stroke;}
  .skda-mnav header.header nav.navUser a.navUser-action svg{height:20px !important;width:auto !important;
    max-width:26px !important;display:block !important;overflow:visible !important;}
  .skda-mnav header.header nav.navUser img.skda-mnav-carticon{height:20px !important;width:auto !important;
    max-width:26px !important;display:block !important;object-fit:contain !important;
    filter:brightness(0) saturate(100%) !important;}
  .skda-mnav a.skda-mnav-icon{width:40px !important;height:44px !important;display:inline-flex !important;
    align-items:center !important;justify-content:center !important;padding:0 !important;}

  /* static hamburger - deliberately does NOT morph to an X */
  .skda-mnav header.header .mobileMenu-toggle{position:static !important;margin:0 !important;
    width:40px !important;height:44px !important;display:inline-flex !important;
    align-items:center !important;justify-content:center !important;}
  .skda-mnav header.header .mobileMenu-toggleIcon,
  .skda-mnav header.header .mobileMenu-toggleIcon::before,
  .skda-mnav header.header .mobileMenu-toggleIcon::after{height:1.7px !important;background-color:var(--sk-ink) !important;
    transition:none !important;transform:none !important;border-radius:2px !important;}
  .skda-mnav header.header .mobileMenu-toggleIcon::before,
  .skda-mnav header.header .mobileMenu-toggleIcon::after{width:21px !important;left:0 !important;bottom:auto !important;}
  /* width will not apply to this span; padding paints the middle bar instead */
  .skda-mnav header.header .mobileMenu-toggleIcon{width:0 !important;padding:0 0 0 21px !important;
    display:block !important;position:relative !important;top:0 !important;bottom:auto !important;
    box-sizing:content-box !important;}
  .skda-mnav header.header .mobileMenu-toggleIcon::before{top:-7px !important;}
  .skda-mnav header.header .mobileMenu-toggleIcon::after{top:7px !important;}

  .skda-mnav .skda-mnav-accmenu{position:absolute;top:58px;right:10px;z-index:9999;display:none;
    background:var(--sk-white);border:1px solid var(--sk-line-soft);border-radius:10px;min-width:176px;
    box-shadow:0 10px 30px rgba(0,0,0,.16);overflow:hidden;font-family:var(--sk-font);}
  .skda-mnav .skda-mnav-accmenu.is-open{display:block;}
  .skda-mnav .skda-mnav-accmenu a{display:block;padding:15px 18px;font-size:var(--sk-fs-small);color:var(--sk-ink);
    text-decoration:none;border-bottom:1px solid var(--sk-surface);}
  .skda-mnav .skda-mnav-accmenu a:last-child{border-bottom:0;}
  /* Store credit line (2.2.5), as on desktop. */
  .skda-mnav .skda-mnav-accmenu .skda-mnav-credit{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-bottom:1px solid var(--sk-line-soft);cursor:default;}
  html.skda-mnav header.header .skda-mnav-accmenu .skda-mnav-credit .skda-credit-label{font-size:var(--sk-fs-caption) !important;color:var(--sk-ink-2) !important;}
  html.skda-mnav header.header .skda-mnav-accmenu .skda-mnav-credit .skda-credit-value{font-size:var(--sk-fs-body) !important;color:var(--sk-ink) !important;font-weight:500;}
  /* BigCommerce's stock "Store Credit" item in the phone menu (any customer with credit):
     the balance is in the account menu instead (2.2.7). */
  #menu .navPages-item:has(> .navPages-action--storeCredit){display:none !important;}

  .skda-mnav header.header.is-open{height:auto !important;min-height:0 !important;max-height:none !important;
    bottom:auto !important;overflow:visible !important;}
  .skda-mnav body.has-activeNavPages{overflow:hidden !important;}

  .skda-mnav .navPages-container{position:fixed !important;top:0 !important;bottom:0 !important;
    right:0 !important;left:auto !important;margin:0 !important;
    height:100vh !important;height:100dvh !important;
    width:66.6667vw !important;max-width:none !important;min-width:0 !important;
    transform:translateX(100%) !important;
    transition:transform .38s cubic-bezier(.32,.72,0,1) !important;
    z-index:2000 !important;overflow-y:auto !important;background:var(--sk-white) !important;
    box-shadow:-8px 0 28px rgba(0,0,0,.14) !important;
    visibility:visible !important;opacity:1 !important;display:block !important;}
  .skda-mnav .navPages-container.is-open{transform:translateX(0) !important;width:66.6667vw !important;}
  .skda-mnav .navPages,.skda-mnav .navPage-subMenu,
  .skda-mnav .navPages-list,.skda-mnav .navPage-childList{background:var(--sk-white) !important;}
  .skda-mnav .navPages{padding:64px 0 40px !important;}
  .skda-mnav .navPages-list{margin:0 !important;padding:0 18px !important;}
  .skda-mnav .skda-mnav-close{position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;
    cursor:pointer;color:var(--sk-ink);}
  .skda-mnav .skda-mnav-close svg{width:20px;height:20px;display:block;stroke:var(--sk-ink);}

  .skda-mnav .navPages-container,.skda-mnav .navPages-container a,.skda-mnav .navPages-action,
  .skda-mnav .navPage-subMenu-action,.skda-mnav .navPage-childList-action,
  .skda-mnav .navPage-childList-second-level-link{font-family:var(--sk-font) !important;
    letter-spacing:-.16px !important;color:var(--sk-ink) !important;}
  .skda-mnav .navPages-container svg,.skda-mnav .navPages-container use{fill:var(--sk-ink) !important;stroke:var(--sk-ink) !important;}
  .skda-mnav .navPages-action{font-size:var(--sk-fs-title) !important;font-weight:500 !important;line-height:1.2 !important;
    padding:13px 0 !important;border:0 !important;}
  .skda-mnav .navPages-action .navPages-action-moreIcon{right:0 !important;width:9px !important;opacity:.5 !important;}
  .skda-mnav .navPage-subMenu-action,.skda-mnav .navPage-childList-action,
  .skda-mnav .navPage-childList-second-level-link{font-size:var(--sk-fs-small) !important;font-weight:500 !important;
    padding:11px 0 !important;}
  .skda-mnav .navPages-container li,.skda-mnav .navPages-container ul{border-top:0 !important;border-bottom:0 !important;}

  .skda-mnav .navPages-container a.sbb2-navbtn,
  .skda-mnav .navPages-container a.sbb2-navbtn *{color:var(--sk-white) !important;}
  .skda-mnav .navPages-container a.sbb2-navbtn{background:var(--sk-ink) !important;border-color:var(--sk-ink) !important;
    width:100% !important;height:52px !important;border-radius:8px !important;font-size:var(--sk-fs-body) !important;
    font-weight:500 !important;margin:6px 0 20px !important;display:flex !important;
    align-items:center !important;justify-content:center !important;gap:9px !important;}
  .skda-mnav .navPages-container a.sbb2-navbtn svg{stroke:var(--sk-white) !important;fill:none !important;}

  .skda-mnav .navPages-container a.navPages-action:not(.sbb2-navbtn),
  .skda-mnav .navPages-container .navPage-subMenu-action,
  .skda-mnav .navPages-container .navPage-childList-action,
  .skda-mnav .navPages-container .navPage-childList-second-level-link{transition:color .14s ease !important;}
  .skda-mnav .navPages-container a.navPages-action:not(.sbb2-navbtn):active,
  .skda-mnav .navPages-container .navPage-subMenu-action:active,
  .skda-mnav .navPages-container .navPage-childList-action:active,
  .skda-mnav .navPages-container .navPage-childList-second-level-link:active{color:var(--sk-ink-2) !important;}

  /* homepage duplicate of the menu - redundant now the panel exists */
  .skda-mnav .navPages-list--quickNav{display:none !important;}

  /* ---- full-screen search (Nike pattern) ---- */
  .skda-mnav .skda-mnav-search{position:fixed;inset:0;background:var(--sk-white);z-index:2100;display:none;flex-direction:column;}
  .skda-mnav .skda-mnav-search.is-open{display:flex;}
  .skda-mnav .skda-mnav-search__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;flex:0 0 auto;}
  .skda-mnav .skda-mnav-search__pill{position:relative;flex:1 1 auto;display:flex;align-items:center;
    background:var(--sk-surface);border-radius:26px;height:48px;padding:0 40px 0 44px;}
  .skda-mnav .skda-mnav-search__mag{position:absolute;left:15px;top:50%;transform:translateY(-50%);
    width:20px;height:20px;color:var(--sk-ink);pointer-events:none;}
  .skda-mnav .skda-mnav-search__mag svg{width:20px;height:20px;display:block;stroke:var(--sk-ink);fill:none;}
  /* the form's fieldset/field wrappers are 69px tall and overflow the pill upward */
  .skda-mnav .skda-mnav-search__pill form,
  .skda-mnav .skda-mnav-search__pill fieldset,
  .skda-mnav .skda-mnav-search__pill .form-fieldset,
  .skda-mnav .skda-mnav-search__pill .form-field{width:100% !important;max-width:none !important;
    margin:0 !important;padding:0 !important;border:0 !important;height:48px !important;
    display:flex !important;align-items:center !important;}
  .skda-mnav .skda-mnav-search__pill label,
  .skda-mnav .skda-mnav-search__pill legend,
  .skda-mnav .skda-mnav-search__pill button[type=submit]{display:none !important;}
  .skda-mnav .skda-mnav-search__pill input[name="search_query"]{width:100% !important;height:48px !important;
    line-height:48px !important;border:0 !important;outline:none !important;background:transparent !important;
    padding:0 !important;box-shadow:none !important;font-family:var(--sk-font) !important;
    font-size:var(--sk-fs-body) !important;letter-spacing:-.16px !important;color:var(--sk-ink) !important;}
  .skda-mnav .skda-mnav-search__clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);
    width:28px;height:28px;display:none;align-items:center;justify-content:center;background:none;
    border:0;padding:0;cursor:pointer;color:var(--sk-ink);}
  .skda-mnav .skda-mnav-search.has-text .skda-mnav-search__clear{display:flex;}
  .skda-mnav .skda-mnav-search__clear svg{width:17px;height:17px;display:block;stroke:var(--sk-ink);}
  .skda-mnav .skda-mnav-search__cancel{flex:0 0 auto;background:none;border:0;padding:0 2px;cursor:pointer;
    font-family:var(--sk-font);font-size:var(--sk-fs-body);font-weight:500;letter-spacing:-.16px;color:var(--sk-ink);}
  /* let Snap's panel fill the screen under the bar instead of hanging off the input */
  .skda-mnav .skda-mnav-search .ss__autocomplete--target{position:fixed !important;top:72px !important;
    left:0 !important;right:0 !important;bottom:0 !important;width:auto !important;}
  .skda-mnav .skda-mnav-search .ss__autocomplete{position:static !important;width:100% !important;
    height:100% !important;max-height:none !important;overflow-y:auto !important;border:0 !important;
    box-shadow:none !important;}

  /* our own result cards replace Snap's 2-result strip */
  .skda-mnav .ss__autocomplete__content__results{display:none !important;}
  .skda-mnav .skda-search-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px;padding:16px 16px 28px;}
  .skda-mnav .skda-search-card{display:block;text-decoration:none;color:var(--sk-ink);}
  .skda-mnav .skda-search-card__img{width:100%;aspect-ratio:1/1;background:var(--sk-surface);border-radius:6px;
    overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .skda-mnav .skda-search-card__img img{width:100%;height:100%;object-fit:cover;display:block;}
  .skda-mnav .skda-search-card__name{font-family:var(--sk-font);font-size:var(--sk-fs-small);
    font-weight:500;letter-spacing:-.16px;line-height:1.3;margin:10px 0 4px;color:var(--sk-ink);}
  .skda-mnav .skda-search-card__price{font-family:var(--sk-font);font-size:var(--sk-fs-small);
    letter-spacing:-.16px;color:var(--sk-ink);}
  .skda-mnav .skda-search-card__price s{color:var(--sk-ink-2);margin-right:5px;}
  .skda-mnav .skda-search-card__price b{font-weight:700;}
}

/* real pointers only - on touch, :hover sticks to the last tapped row */
@media (max-width: 800px) and (hover: hover) and (pointer: fine){
  .skda-mnav .navPages-container a.navPages-action:not(.sbb2-navbtn):hover,
  .skda-mnav .navPages-container .navPage-subMenu-action:hover,
  .skda-mnav .navPages-container .navPage-childList-action:hover,
  .skda-mnav .navPages-container .navPage-childList-second-level-link:hover{color:var(--sk-ink-2) !important;}
  .skda-mnav .navPages-container a.navPages-action:not(.sbb2-navbtn):hover .navPages-action-moreIcon svg,
  .skda-mnav .navPages-container a.navPages-action:not(.sbb2-navbtn):hover .navPages-action-moreIcon use{
    stroke:var(--sk-ink-2) !important;fill:var(--sk-ink-2) !important;}
}

/* safety net: if a session crosses from mobile to desktop the injected nodes stay
   in the DOM, so keep them out of the desktop bar that skda-nav-redesign.js owns */
@media (min-width: 801px){
  .skda-mnav-added,
  .skda-mnav-li{display:none !important;}
}

@media (prefers-reduced-motion: reduce){
  .skda-mnav .navPages-container{transition:none !important;}
}

/* ==================================================================================
   1.11.7 MOBILE MENU - left-hand translucent drill-down panel (Tyson, 15 Sep 2026)
   1.11.8: the FOURTH tier is a third list type, ul.navPage-childList-second-level (e.g.
   Graphics > Full Graphics Kits > Beta). 1.11.7 only knew .navPage-subMenu and
   ul.navPage-childList, so that tier kept its stock 21px padding and never counted as
   open - its parent list and header printed straight through it.
   Prototyped live in the browser and signed off before this was written.
   - Slides in from the LEFT on the same .38s curve, 90vw wide, top pinned to the nav
     bar's live bottom edge (--skda-mnav-nav-bottom, set by skda-mobile-nav.js because
     the ticker above the bar moves it).
   - 90% black wash on the panel only, like the desktop translucent mega menu; every
     inner layer transparent so the washes never stack.
   - The last 10% shows the page through a 0.8px blur, NO darkening. The blur layer
     (#skda-mnav-blur) spans the full width BEHIND the panel and eases its blur on the
     panel's own curve, so there is never an unblurred band mid-slide. The theme's own
     .bodyOverlay (60% black, z20) sits above it and is the real "darkening" - hidden.
   - Full-width 56px thumb rows; back rows match first-level rows with a left-pointing
     chevron on the right; dropdowns open BELOW the Shop by Bike pill.
   - Drill-down is a PUSH: the incoming list slides in from the right (theme), the
     outgoing rows slide out left. Transform the <a>, never the <li> - the open dropdown
     lives inside the li and would be dragged along. Hidden levels are keyed on open
     PANELS, not on `.is-open` in general: tapping back closes a child list but leaves
     its trigger `a.is-open`, which blanked the whole parent list.
   ================================================================================== */
@media (max-width: 800px) {
  html.skda-mnav .navPages-container,
  html.skda-mnav header.header #menu.navPages-container {
    left: 0 !important; right: auto !important; bottom: auto !important;
    top: var(--skda-mnav-nav-bottom, 83px) !important;
    height: calc(100vh - var(--skda-mnav-nav-bottom, 83px)) !important;
    height: calc(100dvh - var(--skda-mnav-nav-bottom, 83px)) !important;
    width: 90vw !important;
    transform: translateX(-100%) !important;
    transition: transform .38s cubic-bezier(.32,.72,0,1) !important;
    box-shadow: 8px 0 28px rgba(0,0,0,.18) !important;
    background-color: rgba(0,0,0,.9) !important;
  }
  html.skda-mnav .navPages-container.is-open,
  html.skda-mnav header.header #menu.navPages-container.is-open { transform: translateX(0) !important; width: 90vw !important; }

  /* the hamburger stays visible above the panel, so the panel's own X is redundant */
  html.skda-mnav .skda-mnav-close { display: none !important; }
  html.skda-mnav .navPages { padding: 12px 0 40px !important; }
  html.skda-mnav .navPages-list,
  html.skda-mnav header.header #menu.navPages-container .navPages-list { padding: 0 !important; margin: 0 !important; }

  html.skda-mnav header.header #menu.navPages-container .navPages,
  html.skda-mnav header.header #menu.navPages-container .navPages-list,
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu,
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu-list,
  html.skda-mnav header.header #menu.navPages-container .navPage-childList,
  html.skda-mnav header.header #menu.navPages-container .navPage-childList-second-level { background-color: transparent !important; }

  html.skda-mnav header.header #menu.navPages-container .navPages-list > li { margin: 0 !important; padding: 0 !important; width: 100% !important; }
  /* 1.11.12: the dark-nav block paints `.navPages-list > li` solid #000 (it predates the translucent
     panel), so every first-level row read as a 100% black strip on the 90% panel. */
  html.skda-mnav header.header #menu.navPages-container .navPages-list > li { background-color: transparent !important; }

  /* full-width thumb rows */
  html.skda-mnav header.header #menu.navPages-container a.navPages-action:not(.sbb2-navbtn),
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu-action,
  html.skda-mnav header.header #menu.navPages-container .navPage-childList-action,
  html.skda-mnav header.header #menu.navPages-container .navPage-childList-second-level-link {
    display: flex !important; align-items: center !important; position: relative !important;
    width: 100% !important; box-sizing: border-box !important; min-height: 56px !important;
    padding: 0 44px 0 20px !important; margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
  }
  html.skda-mnav header.header #menu.navPages-container a.navPages-action:not(.sbb2-navbtn):active,
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu-action:active,
  html.skda-mnav header.header #menu.navPages-container .navPage-childList-action:active { background: rgba(255,255,255,.08) !important; }

  /* chevrons: centred by margin, NOT transform (the icon's own rotate points it right).
     No transition - the stock .15s rotate transition also delays visibility, which left
     the outgoing list's chevrons frozen on screen while the new list slid in. */
  html.skda-mnav header.header #menu.navPages-container .navPages-action .navPages-action-moreIcon {
    position: absolute !important; right: 20px !important; top: 50% !important; margin-top: -4px !important;
  }
  html.skda-mnav header.header #menu.navPages-container .navPages-action-moreIcon,
  html.skda-mnav header.header #menu.navPages-container .skda-mnav-backchev { transition: none !important; }

  /* Shop by Bike pill: same type size as the rows, with the bike icon the floating
     Shop by Bike button uses (the pill already carries it, hidden on mobile) */
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn { width: calc(100% - 32px) !important; margin: 4px 16px 16px !important; }
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn,
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn * { font-size: var(--sk-fs-title) !important; }
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn svg {
    display: block !important; width: 24px !important; height: 24px !important; flex: 0 0 24px !important;
    margin: 0 !important; stroke: var(--sk-ink) !important; fill: none !important;
  }
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn svg * { stroke: var(--sk-ink) !important; fill: none !important; }

  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu,
  html.skda-mnav header.header #menu.navPages-container .navPage-childList,
  html.skda-mnav header.header #menu.navPages-container ul.navPage-childList-second-level { padding: 0 !important; margin: 0 !important; }
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu-list,
  html.skda-mnav header.header #menu.navPages-container .navPage-childList { padding: 0 !important; }

  /* dropdowns open BELOW the pill; --skda-mnav-sbb-top = first main row's offset */
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu {
    top: var(--skda-mnav-sbb-top, 91px) !important;
    height: calc(100% - var(--skda-mnav-sbb-top, 91px)) !important;
    min-height: 0 !important;
  }
  html.skda-mnav header.header #menu.navPages-container ul > li#skda-sbb2-nav { visibility: visible !important; }

  /* back rows: first-level size, chevron on the right pointing left (skda-mobile-nav.js
     strips the typed "<" and adds .skda-mnav-backchev) */
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu .navPage-subMenu_category-name {
    display: flex !important; align-items: center !important; gap: 10px !important; position: relative !important;
    width: 100% !important; box-sizing: border-box !important; min-height: 56px !important;
    padding: 0 44px 0 20px !important; margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    font-size: var(--sk-fs-title) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: -.16px !important;
  }
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu_category-name .skda-mnav-backchev {
    position: absolute !important; right: 20px !important; top: 50% !important; margin-top: -4px !important;
    width: 8px !important; height: 9px !important; display: block !important;
    transform: rotate(90deg) !important; color: var(--sk-white) !important; opacity: 1 !important;
  }
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu_category-name .skda-mnav-backchev svg,
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu_category-name .skda-mnav-backchev svg * {
    stroke: currentColor !important; fill: currentColor !important; width: 8px !important; height: 9px !important;
  }

  /* push transition: resting rows */
  html.skda-mnav header.header #menu.navPages-container .navPages-list > li > a:not(.sbb2-navbtn),
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu-list > li > a,
  html.skda-mnav header.header #menu.navPages-container ul.navPage-childList > li > a,
  html.skda-mnav header.header #menu.navPages-container ul.navPage-childList-second-level > li > a,
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu_category-name {
    transform: translateX(0);
    transition: transform .3s ease-out, visibility 0s, color .14s !important;
  }
  /* ...and the outgoing level, once a dropdown panel inside it is open */
  html.skda-mnav header.header #menu.navPages-container ul:has(> li > :is(.navPage-subMenu, ul.navPage-childList, ul.navPage-childList-second-level).is-open) > li:not(:has(> :is(.navPage-subMenu, ul.navPage-childList, ul.navPage-childList-second-level).is-open)) > a:not(.sbb2-navbtn),
  html.skda-mnav header.header #menu.navPages-container ul:has(> li > :is(.navPage-subMenu, ul.navPage-childList, ul.navPage-childList-second-level).is-open) > li:has(> :is(.navPage-subMenu, ul.navPage-childList, ul.navPage-childList-second-level).is-open) > a,
  html.skda-mnav header.header #menu.navPages-container .navPages:has(.navPage-subMenu.is-open) .navPages-list--user > li > a,
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu.is-open:has(ul.navPage-childList.is-open) > .navPage-subMenu_category-name,
  html.skda-mnav header.header #menu.navPages-container ul.navPage-childList.is-open:has(ul.navPage-childList.is-open) > .navPage-subMenu_category-name,
  html.skda-mnav header.header #menu.navPages-container ul.navPage-childList.is-open:has(ul.navPage-childList-second-level.is-open) > .navPage-subMenu_category-name,
  html.skda-mnav header.header #menu.navPages-container ul.navPage-childList-second-level.is-open:has(ul.navPage-childList-second-level.is-open) > .navPage-subMenu_category-name {
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    transition: transform .3s ease-out, visibility 0s linear .3s, color .14s !important;
  }

  /* no darkening, blur only */
  html.skda-mnav body.has-activeNavPages .bodyOverlay { display: none !important; }
  #skda-mnav-blur {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--skda-mnav-nav-bottom, 83px); z-index: 19;
    backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); background-color: transparent;
    visibility: hidden; pointer-events: none;
    transition: backdrop-filter .38s cubic-bezier(.32,.72,0,1), -webkit-backdrop-filter .38s cubic-bezier(.32,.72,0,1), visibility 0s linear .38s;
  }
  html.skda-mnav body.has-activeNavPages #skda-mnav-blur {
    backdrop-filter: blur(0.8px); -webkit-backdrop-filter: blur(0.8px);
    visibility: visible; pointer-events: auto;
    transition: backdrop-filter .38s cubic-bezier(.32,.72,0,1), -webkit-backdrop-filter .38s cubic-bezier(.32,.72,0,1), visibility 0s;
  }
}
@media (min-width: 801px) {
  #skda-mnav-blur { display: none !important; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  html.skda-mnav .navPages-container,
  html.skda-mnav header.header #menu.navPages-container,
  html.skda-mnav header.header #menu.navPages-container .navPages-list > li > a,
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu-list > li > a,
  html.skda-mnav header.header #menu.navPages-container ul.navPage-childList > li > a,
  html.skda-mnav header.header #menu.navPages-container ul.navPage-childList-second-level > li > a,
  html.skda-mnav header.header #menu.navPages-container .navPage-subMenu_category-name,
  #skda-mnav-blur { transition: none !important; }
}

/* ==================================================================================
   1.11.10 SHOP BY BIKE GLOW (Tyson, 15 Sep 2026) - tuned live in the browser.
   A white glow swells out of the pill and fades: 3 pulses, each 1.75s then a 1s rest
   (2.75s cycle, fade finished at 64%). Desktop: 1s after load. Mobile: as the menu opens.
   WHEN it plays is decided in skda-nav-redesign.js setupSbbGlow(), which adds
   html.skda-sbb-glow: first page load of each visit (sessionStorage), never again on
   that device once Shop by Bike has been clicked (localStorage), and the class is
   removed after the third pulse so it cannot replay on the same page.
   ================================================================================== */
@keyframes skda-sbb-glow {
  0%   { box-shadow: 0 0 2px 0 rgba(255,255,255,1); }
  64%  { box-shadow: 0 0 6px 9px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 6px 9px rgba(255,255,255,0); }
}
@media (min-width: 801px) {
  /* #menu is the nav's horizontal SCROLL VALVE (overflow-x:auto, masked fades) and clips
     at 6px above/below the pill - never un-clip it. Padding + equal negative margin gives
     the ~15px glow room with the bar's height and the pill's position unchanged. */
  header.header #menu.navPages-container {
    padding-top: 14px !important; padding-bottom: 14px !important;
    margin-top: -14px !important; margin-bottom: -14px !important;
  }
  /* 1.11.13: that padding makes #menu ~8px taller than the bar. A phone loaded upright keeps
     html.skda-mnav after rotating to landscape (desktop widths), and the dark-nav block paints
     `html.skda-mnav header.header #menu.navPages-container` solid #000 - so the overhang showed
     as a black band across the top of the page. The bar behind it is already black. */
  html header.header #menu.navPages-container,
  html.skda-mnav header.header #menu.navPages-container { background-color: transparent !important; }
  /* the next item (Graphics & Stickers) has a solid black fill 4px to the right and painted
     over the glow: 16px of space, and the pill stacks above its neighbours */
  header.header #menu.navPages-container #skda-sbb2-nav {
    margin-right: 12px !important; position: relative !important; z-index: 2 !important;
  }
  html.skda-sbb-glow header.header #skda-sbb2-nav .sbb2-navbtn { animation: skda-sbb-glow 2.75s ease-out 1s 3; }
}
@media (max-width: 800px) {
  /* a true pill, like desktop (was an 8px radius) */
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn { border-radius: 999px !important; }
  /* 1.11.11: invert on press/keyboard focus like the desktop pill (transparent, white outline,
     white text + icon). The outline is always there - invisible on the white fill - so the
     button does not change size. Plain :focus is left out: it sticks after a tap on a phone.
     Must beat the #menu white-fill rule and the 1.11.7 `svg * { stroke: var(--sk-ink) }` rule. */
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn { border: 1px solid var(--sk-white) !important; box-sizing: border-box !important;
    transition: background-color .2s, color .2s, border-color .2s !important; }
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:active, html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:focus-visible { background: transparent !important; border-color: var(--sk-white) !important; }
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:active, html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:active *, html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:focus-visible, html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:focus-visible * { color: var(--sk-white) !important; }
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:active svg, html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:active svg *, html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:focus-visible svg, html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:focus-visible svg * { stroke: var(--sk-white) !important; }
  html.skda-sbb-glow.skda-mnav body.has-activeNavPages header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn {
    animation: skda-sbb-glow 2.75s ease-out .45s 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  header.header #skda-sbb2-nav .sbb2-navbtn { animation: none !important; }
}
/* 1.11.11: real hover only where there is a mouse or trackpad - on touch, :hover sticks to the
   last tapped element */
@media (max-width: 800px) and (hover: hover) and (pointer: fine) {
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:hover { background: transparent !important; border-color: var(--sk-white) !important; }
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:hover, html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:hover * { color: var(--sk-white) !important; }
  html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:hover svg, html.skda-mnav header.header #menu.navPages-container #skda-sbb2-nav .sbb2-navbtn:hover svg * { stroke: var(--sk-white) !important; }
}