/** Shopify CDN: Minification failed

Line 33:0 All "@import" rules must come first
Line 252:2 Unexpected "#9ja-mobile-nav"
Line 253:2 Unexpected "#9ja-nav-backdrop"
Line 340:0 Unexpected "#9ja-nav-backdrop"
Line 347:0 Unexpected "#9ja-nav-backdrop"
Line 349:0 Unexpected "#9ja-mobile-nav"
Line 363:0 Unexpected "#9ja-mobile-nav"

**/
/*
  ============================================================
  9JA Enterprise — Header Override (Clean Minimal Version)
  Only overrides colors/fonts — does NOT break Supply's layout
  ============================================================
*/

/* ── DESIGN TOKENS ── */
:root {
  --hdr-gold:       #c8922a;
  --hdr-gold-light: #e8b04a;
  --hdr-black:      #0a0a0a;
  --hdr-dark:       #111418;
  --hdr-panel:      #181c22;
  --hdr-border:     #2a2f38;
  --hdr-white:      #f0ede8;
  --hdr-muted:      #8a8f99;
  --hdr-font-head:  'Barlow Condensed', sans-serif;
  --hdr-font-body:  'Lato', sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Lato:wght@300;400;700&display=swap');

/* ════════════════════════
   BODY
   ════════════════════════ */
body { background: var(--hdr-dark) !important; }

/* ════════════════════════
   SITE HEADER (logo row)
   ════════════════════════ */
.site-header,
header.site-header {
  background: var(--hdr-dark) !important;
  border-bottom: 1px solid var(--hdr-border) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.5) !important;
}

/* ════════════════════════
   NAV BAR
   ════════════════════════ */
.nav-bar {
  background: var(--hdr-black) !important;
  border-top: 2px solid var(--hdr-border) !important;
}
/* ════════════════════════
   NAV BAR — SINGLE ROW FIX
   ════════════════════════ */
.nav-bar { white-space: nowrap !important; }

/* Force all nav items onto one line, smaller text to fit */
.site-nav.list--inline {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
.site-nav__item {
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* Nav link sizing — compact to fit on one row */
.site-nav__link,
.site-nav a {
  font-family: var(--hdr-font-head) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--hdr-white) !important;
  padding: 0 12px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color 0.2s, background 0.2s !important;
}
.site-nav__link:hover,
.site-nav a:hover {
  color: var(--hdr-gold) !important;
  background: rgba(200,146,42,0.05) !important;
}
.site-nav__link--active,
.site-nav__item--active > a { color: var(--hdr-gold) !important; }

/* Repair = green */
.site-nav a[href*="repair"] { color: #1db954 !important; }
.site-nav a[href*="repair"]:hover { background: rgba(29,185,84,0.05) !important; }

/* Sell = gold bordered */
.site-nav a[href*="sell"] {
  color: var(--hdr-gold) !important;
  border: 1px solid rgba(200,146,42,0.35) !important;
  margin: 8px 6px !important;
  padding: 0 10px !important;
  height: 28px !important;
}
.site-nav a[href*="sell"]:hover {
  background: var(--hdr-gold) !important;
  color: var(--hdr-black) !important;
}

/* ── DROPDOWN — properly positioned below nav bar ── */
.site-nav__item--has-dropdown { position: relative !important; }

.site-nav__dropdown {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important;
  background: var(--hdr-panel) !important;
  border: 1px solid var(--hdr-border) !important;
  border-top: 2px solid var(--hdr-gold) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  min-width: 220px !important;
  width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Show on hover */
.site-nav__item--has-dropdown:hover > .site-nav__dropdown,
.site-nav__item--has-dropdown:focus-within > .site-nav__dropdown {
  display: block !important;
}

.site-nav__dropdown li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.site-nav__dropdown a {
  font-family: var(--hdr-font-head) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hdr-white) !important;
  padding: 12px 18px !important;
  height: auto !important;
  display: block !important;
  border-bottom: 1px solid var(--hdr-border) !important;
  white-space: nowrap !important;
  letter-spacing: 0.06em !important;
  background: transparent !important;
}
.site-nav__dropdown li:last-child a { border-bottom: none !important; }
.site-nav__dropdown a:hover {
  color: var(--hdr-gold) !important;
  background: rgba(200,146,42,0.07) !important;
  padding-left: 24px !important;
}

/* Hide Supply's more-menu overflow bar */
#moreMenu { display: none !important; }

/* ════════════════════════
   SEARCH & CART
   ════════════════════════ */
.search-bar input,
input.search-bar__input {
  background: var(--hdr-panel) !important;
  color: var(--hdr-white) !important;
  border: 1px solid var(--hdr-border) !important;
}
.search-bar input::placeholder { color: var(--hdr-muted) !important; }
.header-cart-btn, .cart-toggle {
  color: var(--hdr-white) !important;
  font-family: var(--hdr-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
[class*="cart-count"] {
  background: var(--hdr-gold) !important;
  color: var(--hdr-black) !important;
  font-weight: 800 !important;
}

/* ════════════════════════
   SCROLLBAR
   ════════════════════════ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--hdr-dark); }
::-webkit-scrollbar-thumb { background: var(--hdr-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--hdr-gold); }

/* ════════════════════════
   FOOTER
   ════════════════════════ */
.site-footer, footer.site-footer {
  background: var(--hdr-black) !important;
  border-top: 1px solid var(--hdr-border) !important;
}
.site-footer a { color: var(--hdr-muted) !important; text-decoration: none !important; }
.site-footer a:hover { color: var(--hdr-gold) !important; }
.site-footer h3, .site-footer h4 {
  font-family: var(--hdr-font-head) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--hdr-gold) !important;
}

/* ════════════════════════
   PRODUCT CARDS
   ════════════════════════ */
.product-card, .grid__item .product-card-wrapper {
  background: var(--hdr-panel) !important;
  border: 1px solid var(--hdr-border) !important;
}
.product-card:hover { border-color: var(--hdr-gold) !important; transform: translateY(-4px) !important; }
.card__heading, .product-card__name {
  font-family: var(--hdr-font-head) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--hdr-white) !important;
}
.price, .product-card__price {
  color: var(--hdr-gold) !important;
  font-family: var(--hdr-font-head) !important;
  font-weight: 800 !important;
}

/* ════════════════════════
   MOBILE — swap header for mobileNavBar
   ════════════════════════ */
#mobileNavBar { display: none; }

/* Desktop: always show site-header and nav-bar */
@media (min-width: 769px) {
  .site-header,
  header.site-header,
  .nav-bar { display: block !important; }
  #mobileNavBar { display: none !important; }
  #9ja-mobile-nav { display: none !important; }
  #9ja-nav-backdrop { display: none !important; }
  #theme-toggle-mobile { display: none !important; }
  #theme-toggle-wrap { display: block !important; }
}

@media (max-width: 768px) {
  /* Hide Supply's desktop header & nav */
  .site-header,
  header.site-header,
  .nav-bar { display: none !important; }

  /* Show our mobile bar */
  #mobileNavBar {
    display: table !important;
    width: 100%;
    background: #111418;
    border-bottom: 1px solid #2a2f38;
  }
  #theme-toggle-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mnav-toggle-cell { display: table-cell !important; vertical-align: middle; }
  #theme-toggle-wrap { display: none !important; }
  body.mnav-open { overflow: hidden !important; }
  .mega-menu { display: none !important; }
}

/* Mobile bar always stays dark — never inherits light mode */
#mobileNavBar,
body.light-mode #mobileNavBar {
  background: #111418 !important;
  border-bottom: 1px solid #2a2f38 !important;
}
body.light-mode #mobileNavBar button,
body.light-mode #mobileNavBar a,
body.light-mode #mobileNavBar .mobileNavBar-link,
body.light-mode #mobileNavBar span,
body.light-mode #mobileNavBar .icon-hamburger,
body.light-mode #mobileNavBar .icon-cart,
body.light-mode #mobileNavBar svg,
body.light-mode #mobileNavBar * {
  color: #f0ede8 !important;
  fill: #f0ede8 !important;
  stroke: #f0ede8 !important;
  --white: #f0ede8 !important;
}
#mobileNavBar button,
#mobileNavBar .mobileNavBar-link {
  color: #f0ede8 !important;
  background: transparent !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 0 14px !important;
  height: 52px !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
#theme-toggle-mobile {
  display: none;
  background: transparent;
  border: none;
  border-left: 1px solid #2a2f38;
  color: #f0ede8;
  font-size: 20px;
  width: 44px;
  height: 52px;
  cursor: pointer;
  padding: 0;
}
/* Desktop: hide theme-toggle-mobile (it's in mobileNavBar which is hidden anyway) */
@media (min-width: 769px) {
  #theme-toggle-mobile { display: none !important; }
  #theme-toggle-wrap { display: block !important; }
}

/* ════════════════════════
   MOBILE DROPDOWN NAV
   ════════════════════════ */
#9ja-nav-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9990;
}
#9ja-nav-backdrop.is-open { display: block; }

#9ja-mobile-nav {
  display: none;
  position: fixed;
  top: 52px;
  left: 0; right: 0;
  background: #0d1117;
  border-top: 2px solid #c8922a;
  border-bottom: 1px solid #2a2f38;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  z-index: 9995;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#9ja-mobile-nav.is-open { display: block; }

.mnav-links { list-style: none; margin: 0; padding: 0; }
.mnav-links > li { border-bottom: 1px solid #1a1f28; }
.mnav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #f0ede8; text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.mnav-link:hover { color: #c8922a; background: rgba(200,146,42,0.06); }
.mnav-chevron { font-size: 14px; color: #8a8f99; transition: transform 0.25s; flex-shrink: 0; }
.mnav-link--has-sub.is-open .mnav-chevron { transform: rotate(180deg); color: #c8922a; }
.mnav-link--repair { color: #1db954 !important; }
.mnav-link--sell { color: #c8922a !important; }
.mnav-link--minor { font-size: 13px !important; color: #8a8f99 !important; padding: 11px 20px !important; }

.mnav-sub {
  list-style: none; margin: 0; padding: 0;
  background: #080c10; border-top: 1px solid #1a2230;
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.mnav-sub.is-open { max-height: 500px; }
.mnav-sub li { border-bottom: 1px solid #111720; }
.mnav-sub li a {
  display: block;
  padding: 12px 20px 12px 32px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #8a8f99; text-decoration: none;
}
.mnav-sub li a:hover { color: #f0ede8; background: rgba(200,146,42,0.05); }
.mnav-sub-all { color: #c8922a !important; font-weight: 800 !important; }

.mnav-footer {
  border-top: 1px solid #2a2f38;
  padding: 14px 20px;
  background: #111418;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.mnav-phone { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 800; color: #c8922a; text-decoration: none; }
.mnav-phone:hover { color: #e8b04a; }
.mnav-email { font-family: 'Lato', sans-serif; font-size: 12px; color: #8a8f99; text-decoration: none; }
.mnav-email:hover { color: #f0ede8; }

/* ════════════════════════
   MEGA MENU
   ════════════════════════ */
.mega-menu {
  display: none;
  position: fixed !important;
  left: 0 !important; right: 0 !important;
  background: #0d1117 !important;
  border-top: 2px solid var(--hdr-gold) !important;
  border-bottom: 1px solid #1e2530 !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7) !important;
  z-index: 9999 !important;
  padding: 20px 24px !important;
}
.mega-menu.is-open { display: block !important; }

.mega-menu-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 150px repeat(8, 1fr);
}
.mega-col--promo { border-right: 1px solid #1e2530; padding-right: 14px; margin-right: 4px; }
.mega-promo-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hdr-gold); margin-bottom: 6px; }
.mega-promo-title { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 900; text-transform: uppercase; line-height: 1.1; color: #edeae4; margin-bottom: 8px; }
.mega-promo-title span { color: var(--hdr-gold); }
.mega-promo-desc { font-size: 11px; color: #5a6575; line-height: 1.5; margin-bottom: 10px; }
.mega-promo-btn {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--hdr-gold); color: #000 !important;
  padding: 7px 12px; text-decoration: none !important;
}
.mega-promo-btn:hover { background: #e8b04a !important; }
.mega-promo-btn::after { display: none !important; }

.mega-col { padding: 0 10px; border-right: 1px solid #1a2230; }
.mega-col:last-child { border-right: none; }
.mega-col-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hdr-gold); padding-bottom: 8px; border-bottom: 1px solid #1e2530; margin-bottom: 8px;
  display: flex; align-items: center; gap: 5px;
}
.mega-col-icon { font-size: 12px; }
.mega-col-links { list-style: none; padding: 0; margin: 0; }
.mega-col-links li a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important;
  color: #8a8f99 !important; padding: 4px 4px !important;
  display: block !important; text-decoration: none !important;
  white-space: nowrap; border: none !important; background: transparent !important;
}
.mega-col-links li a::after,
.mega-col-links li a::before { display: none !important; }
.mega-col-links li a:hover { color: #edeae4 !important; background: rgba(200,146,42,0.07) !important; padding-left: 10px !important; }
.mega-col-links li a.mega-all-link {
  color: var(--hdr-gold) !important; font-weight: 800 !important;
  margin-top: 4px; border-top: 1px solid #1e2530 !important; padding-top: 6px !important;
}

/* ── LIGHT MODE TOGGLE: temporarily hidden until properly implemented ── */
#theme-toggle-wrap,
#theme-toggle-mobile,
.mnav-toggle-cell {
  display: none !important;
}
#theme-toggle {
  display: flex; align-items: center; gap: 8px;
  background: #1a1e26; border: 1px solid #3a3f4a; border-radius: 50px;
  padding: 6px 14px 6px 6px; cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #f0ede8;
  transition: border-color 0.3s;
}
#theme-toggle:hover { border-color: #c8922a; }
.toggle-track {
  position: relative; width: 48px; height: 26px;
  background: #2a2f3a; border-radius: 13px; border: 1px solid #3a3f4a; flex-shrink: 0;
}
.toggle-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; }
.toggle-icon--sun { left: 5px; opacity: 0; }
.toggle-icon--moon { right: 5px; opacity: 1; }
.toggle-thumb {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #c8922a; border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.toggle-label { color: #8a8f99; min-width: 30px; }
body.light-mode #theme-toggle { background: #f0ede8; color: #333; border-color: #d0cdc8; }
body.light-mode .toggle-thumb { transform: translateX(22px); background: #b8821e; }
body.light-mode .toggle-icon--sun { opacity: 1; }
body.light-mode .toggle-icon--moon { opacity: 0; }

/* ════════════════════════
   LIGHT MODE
   ════════════════════════ */
body.light-mode { background-color: #f8f7f4 !important; color: #111 !important; }
body.light-mode .site-header, body.light-mode header[role="banner"] {
  background: #ffffff !important; border-bottom: 2px solid #ddd !important;
}
body.light-mode .nav-bar { background: #f0ede8 !important; border-top: 2px solid #ddd !important; }
body.light-mode .site-nav a { color: #222 !important; }
body.light-mode .site-nav a:hover { color: #b8821e !important; }
body.light-mode .site-footer, body.light-mode footer { background: #222 !important; color: #f0ede8 !important; }
body.light-mode .hp-hero,
body.light-mode .rp-hero,
body.light-mode .sp-hero,
body.light-mode .ct-hero,
body.light-mode .col-hero { background: #0a0a0a !important; }