/* Shared site header component: one brand lockup and one navigation layout across all pages. */
html body { padding-top:0 !important; }
html body > header:has(#logo) { position:relative !important; display:block !important; width:100% !important; height:78px !important; min-height:78px !important; margin:0 !important; padding:0 !important; overflow:visible !important; background:#1c2430 !important; z-index:10000 !important; }

/* The homepage header also contains the hero carousel; only its navigation is fixed. */
html body#home > header:has(#logo) { height:auto !important; min-height:0 !important; }
html body > header > .container { width:100% !important; max-width:none !important; height:78px !important; min-height:78px !important; margin:0 !important; padding:0 !important; }
html body > header > .container > nav, html body > header > nav.container { position:fixed !important; inset:0 0 auto 0 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:24px !important; box-sizing:border-box !important; width:100% !important; max-width:none !important; height:78px !important; min-height:78px !important; margin:0 !important; padding:0 max(24px,calc((100vw - 1280px)/2)) !important; overflow:visible !important; transform:none !important; background:#1c2430 !important; z-index:10001 !important; }
html body > header > .container > nav:after, html body > header > nav.container:after { content:"" !important; position:absolute !important; inset:0 auto auto 50% !important; transform:translateX(-50%) !important; width:100vw !important; height:78px !important; background:#1c2430 !important; z-index:0 !important; pointer-events:none !important; }
html body > header #logo { position:relative !important; z-index:2 !important; display:flex !important; flex:0 0 auto !important; align-items:center !important; gap:10px !important; float:none !important; height:78px !important; margin:0 !important; padding:0 !important; line-height:1 !important; text-decoration:none !important; }
html body > header #logo img.naike-mark { display:block !important; flex:0 0 38px !important; width:38px !important; height:38px !important; max-width:none !important; object-fit:contain !important; }
html body > header #logo .naike-wordmark { display:inline-block !important; color:#fff !important; font:700 20px/1.1 Arial,"Segoe UI",sans-serif !important; letter-spacing:.1px !important; white-space:nowrap !important; text-transform:none !important; }
html body > header ul.first-nav { position:relative !important; z-index:2 !important; display:flex !important; flex:0 1 auto !important; align-items:center !important; justify-content:flex-end !important; gap:0 !important; float:none !important; height:78px !important; margin:0 !important; padding:0 !important; line-height:normal !important; list-style:none !important; background:transparent !important; transform:none !important; }
html body > header ul.first-nav > li { position:relative !important; display:block !important; float:none !important; height:78px !important; margin:0 !important; padding:0 !important; font:600 12px/78px Arial,"Segoe UI",sans-serif !important; letter-spacing:.45px !important; white-space:nowrap !important; }
html body > header ul.first-nav > li > a { display:block !important; height:78px !important; margin:0 !important; padding:0 12px !important; color:#f5f7fa !important; font:inherit !important; line-height:78px !important; text-decoration:none !important; white-space:nowrap !important; transition:background-color .18s ease,color .18s ease !important; }
html body > header ul.first-nav > li:hover > a, html body > header ul.first-nav > li.on > a { background:rgba(255,255,255,.08) !important; color:#fff !important; }
html body > header ul.second-nav { position:absolute !important; top:78px !important; left:0 !important; z-index:5 !important; display:none !important; min-width:220px !important; margin:0 !important; padding:6px 0 !important; background:#202a37 !important; box-shadow:0 12px 24px rgba(0,0,0,.22) !important; list-style:none !important; }
html body > header ul.first-nav > li:hover > ul.second-nav, html body > header ul.first-nav > li:focus-within > ul.second-nav { display:block !important; }
html body > header ul.second-nav > li { height:auto !important; min-height:36px !important; margin:0 !important; padding:0 !important; line-height:1.35 !important; }
html body > header ul.second-nav > li > a { display:block !important; padding:10px 16px !important; color:#e6edf5 !important; font:500 12px/1.35 Arial,"Segoe UI",sans-serif !important; white-space:nowrap !important; text-decoration:none !important; }
html body > header ul.second-nav > li > a:hover { background:#1268d8 !important; color:#fff !important; }
html body > header #nav_menu { display:none !important; font-style:normal !important; }
/* Standalone buyer-guide pages use the same header lockup and spacing. */
html body > header#naike-site-header.blog-nav { position:fixed !important; inset:0 0 auto 0 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; box-sizing:border-box !important; width:100% !important; height:78px !important; min-height:78px !important; margin:0 !important; padding:0 max(24px,calc((100vw - 1280px)/2)) !important; background:#1c2430 !important; z-index:10001 !important; }
html body:has(> header.blog-nav) { padding-top:78px !important; }
html body > header#naike-site-header.blog-nav > a#logo { display:flex !important; align-items:center !important; flex:none !important; gap:10px !important; height:78px !important; margin:0 !important; padding:0 !important; }
html body > header#naike-site-header.blog-nav > a#logo img.naike-mark { width:38px !important; height:38px !important; object-fit:contain !important; }
html body > header#naike-site-header.blog-nav > a#logo .naike-wordmark { color:#fff !important; font:700 20px/1.1 Arial,"Segoe UI",sans-serif !important; white-space:nowrap !important; }
html body > header#naike-site-header.blog-nav nav { position:static !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:0 !important; height:78px !important; margin:0 !important; padding:0 !important; background:transparent !important; }
html body > header#naike-site-header.blog-nav nav a { display:block !important; padding:0 12px !important; border-radius:0 !important; color:#f5f7fa !important; font:600 12px/78px Arial,"Segoe UI",sans-serif !important; letter-spacing:.45px !important; text-transform:uppercase !important; white-space:nowrap !important; }
html body > header#naike-site-header.blog-nav nav a:hover, html body > header#naike-site-header.blog-nav nav a[aria-current="page"] { background:rgba(255,255,255,.08) !important; color:#fff !important; }
html body > header#naike-site-header.blog-nav .blog-nav-toggle { display:none !important; }
@media (max-width:1100px) {
 html body > header:has(#logo), html body > header > .container { height:70px !important; min-height:70px !important; }
 html body > header > .container > nav, html body > header > nav.container { height:70px !important; min-height:70px !important; padding:0 20px !important; }
 html body > header > .container > nav:after, html body > header > nav.container:after { height:70px !important; }
 html body > header #logo, html body > header ul.first-nav > li, html body > header ul.first-nav > li > a { height:70px !important; }
 html body > header #logo .naike-mark { width:34px !important; height:34px !important; flex-basis:34px !important; }
 html body > header #logo .naike-wordmark { font-size:18px !important; }
 html body > header #nav_menu { display:flex !important; align-items:center !important; justify-content:center !important; position:fixed !important; top:14px !important; right:18px !important; z-index:10002 !important; transform:none !important; width:42px !important; height:42px !important; color:#fff !important; font-size:0 !important; cursor:pointer !important; }
 html body > header #nav_menu:before { content:"☰" !important; color:#fff !important; font:400 25px/1 Arial,sans-serif !important; }
 html body > header ul.first-nav { display:none !important; position:absolute !important; top:70px !important; left:0 !important; right:0 !important; width:100% !important; height:auto !important; max-height:calc(100vh - 70px) !important; overflow:auto !important; padding:8px 0 !important; background:#1c2430 !important; box-shadow:0 14px 22px rgba(0,0,0,.18) !important; }
 html body > header ul.first-nav.show { display:block !important; }
 html body > header ul.first-nav > li { height:auto !important; min-height:44px !important; font-size:13px !important; line-height:44px !important; }
 html body > header ul.first-nav > li > a { height:auto !important; min-height:44px !important; padding:0 22px !important; line-height:44px !important; }
 html body > header ul.second-nav { position:static !important; display:none !important; width:100% !important; min-width:0 !important; padding:4px 0 6px 12px !important; background:#202a37 !important; box-shadow:none !important; }
 html body > header ul.first-nav > li:hover > ul.second-nav { display:none !important; }
 html body > header ul.first-nav > li:focus-within > ul.second-nav { display:block !important; }
 html body > header#naike-site-header.blog-nav { height:70px !important; min-height:70px !important; padding:0 20px !important; }
 html body > header#naike-site-header.blog-nav > a#logo { height:70px !important; }
 html body > header#naike-site-header.blog-nav > a#logo img.naike-mark { width:34px !important; height:34px !important; }
 html body > header#naike-site-header.blog-nav > a#logo .naike-wordmark { font-size:18px !important; }
 html body > header#naike-site-header.blog-nav .blog-nav-toggle { display:block !important; margin-left:auto !important; border:1px solid rgba(255,255,255,.35) !important; border-radius:5px !important; padding:8px 12px !important; background:transparent !important; color:#fff !important; font:600 12px/1 Arial,sans-serif !important; }
 html body > header#naike-site-header.blog-nav nav { display:none !important; position:absolute !important; top:70px !important; left:0 !important; right:0 !important; height:auto !important; padding:8px 0 !important; background:#1c2430 !important; box-shadow:0 14px 22px rgba(0,0,0,.18) !important; }
 html body > header#naike-site-header.blog-nav nav.show { display:block !important; }
 html body > header#naike-site-header.blog-nav nav a { padding:0 22px !important; line-height:44px !important; }
}
@media (max-width:600px) {
 html body > header #logo { gap:8px !important; }
 html body > header #logo .naike-mark, html body > header#naike-site-header.blog-nav > a#logo img.naike-mark { width:32px !important; height:32px !important; flex-basis:32px !important; }
 html body > header #logo .naike-wordmark, html body > header#naike-site-header.blog-nav > a#logo .naike-wordmark { font-size:17px !important; }
}

/* Keep legacy global menu spacing from leaking into the shared dropdown component. */
html body > header ul.second-nav { width:max-content !important; min-width:240px !important; max-width:calc(100vw - 32px) !important; box-sizing:border-box !important; letter-spacing:normal !important; word-spacing:normal !important; text-transform:none !important; }
html body > header ul.second-nav > li { box-sizing:border-box !important; width:100% !important; letter-spacing:normal !important; word-spacing:normal !important; }
html body > header ul.second-nav > li > a { box-sizing:border-box !important; width:100% !important; padding:10px 16px !important; font:500 13px/1.35 Arial,"Segoe UI",sans-serif !important; letter-spacing:normal !important; word-spacing:normal !important; text-transform:none !important; white-space:nowrap !important; }
@media (max-width:1100px) {
 html body > header ul.second-nav { width:100% !important; min-width:0 !important; max-width:none !important; }
 html body > header ul.second-nav > li > a { white-space:normal !important; }
}