/* ===== 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; }
}
        

/* ---- desktop mega-menu (1.0.6, Tyson 2026-10-13, tuned live in his tab) ----
   Glass: black 85% + 12px blur behind the panel only (nav-invert.css paints 90%, no blur).
   Padding 42 top / 60 bottom (was 21 / 32). The slot is the positioning frame for columns 2 and 3,
   which skda-nav-redesign.js moves out of column 1 so a scrolling column cannot clip them. */
@media (min-width: 801px) {
    html header.header #skda-mega-panel {
        background-color: rgba(0, 0, 0, .85) !important;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    #skda-mega-panel .skda-mega-slot { padding: 42px 0 60px !important; position: relative !important; }
    /* a column taller than the space it has scrolls: thin grey bar + a fade where there is more */
    #skda-mega-panel ul.skda-col-scroll {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(128, 128, 128, .6) transparent;
    }
    #skda-mega-panel ul.skda-col-scroll::-webkit-scrollbar { width: 6px; }
    #skda-mega-panel ul.skda-col-scroll::-webkit-scrollbar-track { background: transparent; }
    #skda-mega-panel ul.skda-col-scroll::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, .6); border-radius: 3px; }
    #skda-mega-panel ul.skda-col-scroll.skda-more-below {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
    }
    #skda-mega-panel ul.skda-col-scroll.skda-more-above {
        -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 64px), transparent);
        mask-image: linear-gradient(to top, #000 calc(100% - 64px), transparent);
    }
    #skda-mega-panel ul.skda-col-scroll.skda-more-above.skda-more-below {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 64px), transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    }
}

/* ---- phone/tablet hamburger menu: the same glass (1.0.6, Tyson 2026-10-13) ----
   mobile-nav.css paints it 90% black with !important, hence the doubled id. */
@media (max-width: 800px) {
    html body #menu#menu.navPages-container {
        background-color: rgba(0, 0, 0, .85) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        backdrop-filter: blur(12px) !important;
    }
}

/* ---- PDP photo viewer (1.0.6, Tyson 2026-10-13) - behaviour in skda-retail-fixes.js ---- */
.productView-images .skda-zoomwrap { cursor: zoom-in; }
#skda-lb { position: fixed; inset: 0; z-index: 100000; cursor: zoom-out; }
#skda-lb .lb-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .75); opacity: 0; transition: opacity 340ms ease; }
#skda-lb.on .lb-bg { opacity: 1; }
#skda-lb img {
    position: absolute; left: 0; top: 0; display: block;
    max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); width: auto; height: auto;
    transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none;
}
#skda-lb .lb-ui { opacity: 0; transition: opacity 340ms ease; }
#skda-lb.on .lb-ui { opacity: 1; }
#skda-lb button {
    position: absolute; z-index: 2; border: 0; background: rgba(255, 255, 255, .12); color: #fff;
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font: 300 26px/1 Roboto, sans-serif;
}
#skda-lb button:hover { background: rgba(255, 255, 255, .24); }
#skda-lb .lb-x { top: 20px; right: 20px; }
#skda-lb .lb-prev { left: 24px; top: 50%; margin-top: -24px; }
#skda-lb .lb-next { right: 24px; top: 50%; margin-top: -24px; }
#skda-lb .lb-n { position: absolute; z-index: 2; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .7); font: 400 13px/1 Roboto, sans-serif; }

/* ==================================================================== RETAIL-EU 1.0.7
   EU only (Tyson, 2026-10-16) - every value below was tuned live in his EU tab; the full notes are
   in retail-port/PENDING-EU-1.0.7.md (item numbers in the headings). Appended to retail.css by
   scripts/skda_patches_107_eu.py, after the 1.0.6 rules it overrides. */

/* ---- 1/2. desktop nav bar 70px, 64px on shorter screens; logo 36px ----
   desktop-nav.css itself now says 70px (the build edits it); the short-screen step lives here.
   Shorter = 1920x1080 and below once the browser bars are off (same query as item 5). */
@media (min-width: 801px) and (max-height: 1000px) {
    html body header.header { height: 64px !important; min-height: 64px !important; }
}
/* the account dropdown's top edge lands on the bar's bottom edge: the 22px account item is
   centred, so (bar - 22) / 2 below it - 24px at 70, 21px at 64 (17px was the 56px bar's) */
@media (min-width: 801px) {
    html body #skda-account-dropdown { top: calc(100% + 24px); }
}
@media (min-width: 801px) and (max-height: 1000px) {
    html body #skda-account-dropdown { top: calc(100% + 21px); }
}

/* ---- 3. info ticker 34px on desktop (was 40.1px) ----
   On EU desktop the DESKTOP banner region is empty, so the mobile region's .skda-text-banner shows
   at every width. !important throughout: the widget's own rules and inline styles win otherwise. */
@media (min-width: 801px) {
    html body .global-top-banner-mobile .skda-text-banner__inner { padding: 0 10px !important; height: 34px !important; box-sizing: border-box; }
    html body .global-top-banner-mobile .skda-text-banner__viewport,
    html body .global-top-banner-mobile .skda-text-banner__track { height: 34px !important; }
    html body .global-top-banner-mobile .skda-text-banner__track { align-items: center !important; }
    html body .global-top-banner-mobile .skda-text-banner__slide { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* ---- 5. tighter mega-menu ----
   All desktop heights: 25% less space above the first option and below the last (1.0.6: 42/60).
   Shorter screens: rows 42px (link padding 8/13, was 12/18) and the text a point smaller
   (13px/20px, was 14/21) - Graphics & Stickers column 1 546px, the whole dropdown 623px. */
@media (min-width: 801px) {
    #skda-mega-panel .skda-mega-slot { padding-top: 32px !important; padding-bottom: 45px !important; }
}
@media (min-width: 801px) and (max-height: 1000px) {
    #skda-mega-panel .skda-mega-slot li > a {
        padding-top: 8px !important; padding-bottom: 13px !important;
        font-size: 13px !important; line-height: 20px !important;
    }
}

/* ---- 6. no motorbike icon on the Shop by Bike button (desktop bar AND phone menu) ----
   One element at every width; its markup comes from the shared widget, so hidden here. The phone
   menu forces it back with a two-id !important rule (mobile-nav.css ~312) - three ids beat it. */
a.sbb2-navbtn > svg,
html body #skda-sbb2-nav#skda-sbb2-nav#skda-sbb2-nav a.sbb2-navbtn > svg { display: none !important; }

/* ---- 4. desktop product page = layout A (>= 1261px, the large-screen gallery) ----
   html.skda-pdpA is set by skda-retail-107.js once it has built the card; phones and tablets
   keep today's page. S1 = photo column, S2 = buy card. */
.skda-a-head, .skda-a-reveal, #skda-dr-head, .skda-a-sl { display: none; }
@media (min-width: 1261px) {
    html.skda-pdpA { scrollbar-gutter: stable; }
    html.skda-pdpA .skda-a-head, html.skda-pdpA .skda-a-reveal { display: block; }
    html.skda-pdpA .productView-description, html.skda-pdpA .sk-bar { display: none !important; }
    html.skda-pdpA .productView { justify-content: flex-start !important; }
    html.skda-pdpA .productView > .productView-section:first-child {
        flex: 0 0 68% !important; max-width: 68% !important; margin-left: 0 !important;
        transition: flex-basis .5s cubic-bezier(.32, .72, 0, 1), max-width .5s cubic-bezier(.32, .72, 0, 1) !important;
    }
    html.skda-pdpA .productView > .productView-section:nth-child(2) {
        flex: 0 0 32% !important; max-width: 32% !important; align-self: flex-start; margin-left: auto !important;
    }
    html.skda-pdpA .productView-details.product-data { padding-top: 0 !important; }
    /* order form open: the photo column narrows to 40px clear of the form, the section keeps its
       closed height (or the footer peeks in under the shorter photo) */
    html.skda-pdpA body.sk-cfg-open .productView > .productView-section:first-child {
        flex-basis: var(--skda-a-open-w, 60%) !important; max-width: var(--skda-a-open-w, 60%) !important;
    }
    html.skda-pdpA body.sk-cfg-open .productView { min-height: var(--skda-a-pv-h, 0px) !important; }

    /* the card */
    .skda-a-head { font-family: Roboto, sans-serif; margin-bottom: 26px; }
    .skda-a-bc { margin: 0 0 36px; font: 400 12px/1.4 Roboto, sans-serif; }
    .skda-a-bc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 4px; }
    .skda-a-bc li, .skda-a-bc a { color: #a1a1a6; text-decoration: none; }
    .skda-a-bc li + li::before { content: "/"; margin: 0 6px; color: #d2d2d7; }
    .skda-a-bc a:hover { color: #6e6e73; text-decoration: underline; }
    .skda-a-brand { font-size: 14px; color: #6e6e73; margin-bottom: 6px; }
    .skda-a-brand:empty { display: none; }
    .skda-a-title { font-family: Roboto, sans-serif; font-size: 30px; line-height: 1.2; font-weight: 600; color: #1d1d1f; margin: 0 0 12px; text-transform: none; letter-spacing: -.01em; }
    .skda-a-amount { font-size: 24px; font-weight: 500; color: #1d1d1f; margin-bottom: 18px; }
    .skda-a-svc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; margin: 2px 0; }
    .skda-a-svc-card { background: #f8f8f8; border-radius: 4px; padding: 15px; color: #010101; }
    .skda-a-svc-t { font-size: 12px; font-weight: 700; line-height: 14.4px; margin-bottom: 6px; }
    .skda-a-svc-x { font-size: 12px; line-height: 14.4px; }

    /* Configure Order: original wording + flat blue, with the "sliders" icon */
    html.skda-pdpA .sk-cfg-btn {
        margin-top: 0 !important; display: flex !important; align-items: center; justify-content: center; gap: 10px;
        background-color: #0071e3 !important; transition: background-color .2s, transform .15s !important;
    }
    html.skda-pdpA .sk-cfg-btn:hover { background-color: #0077ed !important; }
    html.skda-pdpA .sk-cfg-btn:active { transform: scale(.97); }
    html.skda-pdpA .sk-cfg-btn .skda-a-sl { display: block; width: 20px; height: 20px; flex: none; overflow: visible; }
    .skda-a-sl line { stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
    .skda-a-sl circle { fill: #0071e3; stroke: #fff; stroke-width: 1.8; transition: transform .45s cubic-bezier(.32, .72, 0, 1), fill .2s; }
    html.skda-pdpA .sk-cfg-btn:hover .skda-a-sl circle { fill: #0077ed; }
    html.skda-pdpA .sk-cfg-btn:hover .skda-a-sl .n1 { transform: translateX(8px); }
    html.skda-pdpA .sk-cfg-btn:hover .skda-a-sl .n2 { transform: translateX(-8px); }
    html.skda-pdpA .sk-cfg-btn:hover .skda-a-sl .n3 { transform: translateX(5px); }

    /* order form: title + live price locked at the top. The drawer hides any child it does not
       know with an !important rule - the id outranks it. */
    html.skda-pdpA .sk-cfg-drawer > #skda-dr-head#skda-dr-head {
        display: flex !important; align-items: baseline; justify-content: space-between; gap: 20px;
        flex: none; padding: 22px 72px 18px 56px; border-bottom: 1px solid rgba(0, 0, 0, .08); font-family: Roboto, sans-serif;
    }
    .skda-dr-title { flex: 1 1 auto; min-width: 0; font-size: 23px; line-height: 1.2; font-weight: 600; color: #1d1d1f; letter-spacing: -.01em; }
    .skda-dr-amount { flex: none; white-space: nowrap; font-size: 24px; font-weight: 600; color: #1d1d1f; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

    /* photo: the loupe replaces hover zoom-in (the photo stays still; click still opens the viewer) */
    html.skda-pdpA .productView-images .skda-zoomwrap > img { transform: none !important; }
    html.skda-pdpA .productView-images .skda-zoomwrap.skda-loupe-on { cursor: none; }
}
/* "Product description": one hide/reveal row - the buy card on desktop (>= 1261px), in place of
   the description on phones (skda-retail-107.js moves the one element) */
.skda-a-reveal { margin: 24px 0 20px; border-top: 1px solid #d2d2d7; border-bottom: 1px solid #d2d2d7; font-family: Roboto, sans-serif; }
.skda-a-reveal-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 2px;
    border: 0; background: none; cursor: pointer; font: 500 16px Roboto, sans-serif; color: #1d1d1f;
}
.skda-a-reveal-btn i { position: relative; width: 14px; height: 14px; flex: none; }
.skda-a-reveal-btn i::before, .skda-a-reveal-btn i::after {
    content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px;
    background: #1d1d1f; transition: transform .3s ease;
}
.skda-a-reveal-btn i::after { transform: rotate(90deg); }
.skda-a-reveal.open .skda-a-reveal-btn i::after { transform: rotate(0deg); }
.skda-a-reveal-body { height: 0; overflow: hidden; transition: height .35s ease; }
.skda-a-reveal.open .skda-a-reveal-body {
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .25) transparent;
}
.skda-a-reveal-inner { padding: 0 2px 22px; font-size: 14px; line-height: 1.6; color: #424245; }
.skda-a-reveal-inner h4 { margin: 14px 0 4px; font-size: 14px; font-weight: 600; color: #1d1d1f; text-transform: none; letter-spacing: 0; }
.skda-a-reveal-inner h4:first-child { margin-top: 0; }
.skda-a-reveal-inner p { margin: 0; }

/* ---- 4b. phone product page (<= 800px; Tyson, 2026-10-16) ----
   Breadcrumbs above the photo on ONE line (the trail is long), opened scrolled to the end so the
   nearest category shows, swipe for the rest, a fade where there is more. The description is the
   same "+" reveal (15px body here, no height cap - the page scrolls). Thumbnails -> Configure Order
   -> service cards -> Product description an even 24px apart; the white (invisible) SKU line under
   the cards keeps its markup but no longer takes 42px of space. */
.skda-m-bc { display: none; }
@media (max-width: 800px) {
    html.skda-pdpA .skda-a-reveal { display: block; margin: 24px 0 8px !important; }
    html.skda-pdpA .productView-description { display: none !important; }
    .skda-a-reveal-inner { font-size: 15px; }
    .skda-a-reveal-inner h4 { margin-top: 16px; font-size: 15px; }
    .skda-m-bc { display: block; position: relative; margin: 0; padding: 14px 0 12px; font: 400 12px/1.4 Roboto, sans-serif; }
    .skda-m-bc ol { list-style: none; margin: 0; padding: 0 24px; display: flex; white-space: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .skda-m-bc ol::-webkit-scrollbar { display: none; }
    .skda-m-bc li, .skda-m-bc a { color: #a1a1a6; text-decoration: none; flex: none; }
    .skda-m-bc li + li::before { content: "/"; margin: 0 6px; color: #d2d2d7; }
    .skda-m-bc.fade-l::before, .skda-m-bc.fade-r::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; pointer-events: none; z-index: 1; }
    .skda-m-bc.fade-l::before { left: 0; background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)); }
    .skda-m-bc.fade-r::after { right: 0; background: linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)); }
    html.skda-pdpA body .productView-images { margin-bottom: 0 !important; }
    html.skda-pdpA body dl.productView-info { margin-top: 0 !important; margin-bottom: 0 !important; }
    html.skda-pdpA body .productView-info .sk-cfg-btn { margin: 24px 0 !important; }
    html.skda-pdpA body .productView-info .skda-twoColSection { margin-bottom: 0 !important; }
    html.skda-pdpA body .productView-section .productView-details.product-data { margin-bottom: 0 !important; }
    html.skda-pdpA body dl.productView-info > dt.productView-info-name,
    html.skda-pdpA body dl.productView-info > dd.productView-info-value {
        position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
        clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important;
    }
}

#skda-loupe {
    position: fixed; z-index: 60; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 18px;
    pointer-events: none; background-color: #fff; background-repeat: no-repeat; border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 12px 32px rgba(0, 0, 0, .25);
    opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s;
}
#skda-loupe.on { opacity: 1; transform: scale(1); }
#skda-target {
    position: fixed; z-index: 59; width: 136px; height: 136px; margin: -68px 0 0 -68px; border-radius: 8px;
    pointer-events: none; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .15);
    opacity: 0; transition: opacity .15s;
}
#skda-target.on { opacity: 1; }

/* ---- 7. phone photo viewer (<= 800px): tap the photo, pinch to zoom ----
   Behaviour in skda-retail-107.js; the stock press-and-hold zoom never shows on phones. */
@media (max-width: 800px) {
    .productView-image .easyzoom-flyout { display: none !important; }
    .productView-image, .productView-image a { cursor: pointer; -webkit-touch-callout: none; }
}
#skda-mlb { position: fixed; inset: 0; z-index: 100000; touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; }
#skda-mlb .m-bg { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 340ms ease; }
#skda-mlb.on .m-bg { opacity: .94; }
#skda-mlb img { position: absolute; left: 0; top: 0; display: block; max-width: none; transform-origin: 0 0; -webkit-user-drag: none; pointer-events: none; }
#skda-mlb .m-ui { opacity: 0; transition: opacity 340ms ease; }
#skda-mlb.on .m-ui { opacity: 1; }
#skda-mlb.zoomed .m-bar { opacity: 0; pointer-events: none; }
#skda-mlb button {
    position: absolute; z-index: 2; border: 0; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#skda-mlb button:active { background: rgba(255, 255, 255, .28); }
#skda-mlb button svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#skda-mlb .m-x { top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; }
#skda-mlb .m-bar {
    position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    display: flex; align-items: center; gap: 14px; transition: opacity .2s ease;
}
#skda-mlb .m-bar button { position: static; width: 36px; height: 36px; }
#skda-mlb .m-bar button svg { width: 16px; height: 16px; }
#skda-mlb .m-n { min-width: 44px; text-align: center; color: rgba(255, 255, 255, .8); font: 500 13px/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; }

/* ==== SWATCH ROW (CA, from its live SWATCH-ROW-1.0.4, Tyson 2026-10-19) ====
   Colour swatches showed ONLY the last colour after a reload: the list is a Slick carousel
   (data-slick on .swatch-slider) and when Slick initialises before the column has its width it
   sizes every slide 0px, so all the swatches pile up on one spot. Lists of 8 or fewer
   (.swatch-without-slider-desktop, never scrolling above 550px) ignore Slick's measurements there
   and sit in a normal wrapping row; phones keep the carousel. Same rules as au-theme/build_au_swatch.py. */
@media (min-width: 551px) {
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-list { overflow: visible; }
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-track {
        display: flex !important; flex-wrap: wrap; width: auto !important; transform: none !important;
    }
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-track::before,
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-track::after { display: none; }
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-slide { float: none; width: auto !important; }
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-cloned,
    .swatch-slider.swatch-without-slider-desktop.slick-initialized .slick-arrow { display: none !important; }
}

/* ---- B2B 2.7.0 ONLY: RRP + "You save" under layout A's card price (scripts/build_b2b_270.py) ----
   Same type as the B2B title bar's: RRP 14px grey struck through, saving 14px ink weight 500. */
.skda-a-was { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; margin-top: 6px; }
.skda-a-was[hidden] { display: none; }
.skda-a-was s { font-size: 14px; font-weight: 400; color: #6e6e73; text-decoration: line-through; }
.skda-a-was span { font-size: 14px; font-weight: 500; color: #1d1d1f; }