div#nav-overlay {
    background: #020B24 !important;
}

nav.primary-nav-container.exposed-nav.transparent {
    position: relative !important;
}

.primary-nav-container::after {
    background: #FFFFFF !important;
}

/* Scope all overrides to this component only */
[data-compid="infiniti-primary-navbar"] {
  color: #000 !important;
}

/* Nav container background */
[data-compid="infiniti-primary-navbar"] .primary-nav-container {
  background: #fff !important;
}

/* General text/links inside the nav */
[data-compid="infiniti-primary-navbar"] .primary-nav-container,
[data-compid="infiniti-primary-navbar"] .primary-nav-container a,
[data-compid="infiniti-primary-navbar"] .primary-nav-container button,
[data-compid="infiniti-primary-navbar"] .primary-nav-container .utility-nav__text,
[data-compid="infiniti-primary-navbar"] .exposed-nav-link {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important; /* guards against WebKit fill */
}

/* Make hover/active states black too (no surprise color flips) */
[data-compid="infiniti-primary-navbar"] .primary-nav-container a:hover,
[data-compid="infiniti-primary-navbar"] .primary-nav-container a:focus,
[data-compid="infiniti-primary-navbar"] .primary-nav-container button:hover,
[data-compid="infiniti-primary-navbar"] .primary-nav-container button:focus {
  color: #000 !important;
}

/* Divider: remove white gradient line and use a subtle gray instead */
[data-compid="infiniti-primary-navbar"] .utility-nav__divider {
  background: rgba(0,0,0,0.15) !important;
}

/* Icons (SVG) — force to black */
[data-compid="infiniti-primary-navbar"] .primary-nav-container svg,
[data-compid="infiniti-primary-navbar"] .primary-nav-container svg * {
  fill: #000 !important;
  stroke: #000 !important;
}

/* Language selector panel text & icons */
[data-compid="infiniti-primary-navbar"] .utility-panel__header,
[data-compid="infiniti-primary-navbar"] .lang-selector__title,
[data-compid="infiniti-primary-navbar"] .lang-selector__link,
[data-compid="infiniti-primary-navbar"] .utility-panel__btn,
[data-compid="infiniti-primary-navbar"] .utility-panel__btn--back {
  color: #000 !important;
}
[data-compid="infiniti-primary-navbar"] .utility-panel__btn--back svg path,
[data-compid="infiniti-primary-navbar"] .lang-selector__title svg path {
  fill: #000 !important;
}

/* Skip link remains visible on focus */
[data-compid="infiniti-primary-navbar"] .skip-link {
  color: #000 !important;
  background: #fff !important;
  outline: 2px solid #000 !important;
}

/* Overlay: make background white and hide dark hero image */
[data-compid="infiniti-primary-navbar"] .infiniti-overlay-container .overlay {
  background: #fff !important;
}
[data-compid="infiniti-primary-navbar"] .infiniti-overlay-container .background-image-wrapper {
  display: none !important;
}

/* Ensure exposed nav flyout text stays black as well */
[data-compid="infiniti-primary-navbar"] .exposed-nav .exposed-nav-links,
[data-compid="infiniti-primary-navbar"] .exposed-nav .exposed-nav-links a,
[data-compid="infiniti-primary-navbar"] .exposed-nav .exposed-nav-links button {
  color: #000 !important;
}

/* Buttons/CTAs inside preview panels (if they inherit white text) */
[data-compid="infiniti-primary-navbar"] [class*="cta"],
[data-compid="infiniti-primary-navbar"] .primary-cta,
[data-compid="infiniti-primary-navbar"] .secondary-cta {
  color: #000 !important;
  border-color: #000 !important;
  background: transparent !important;
}

/* Make sure any inline-styled white backgrounds don’t sneak in */
[data-compid="infiniti-primary-navbar"] [style*="background-color: rgb(2, 11, 36)"] {
  background-color: #fff !important;
}

/* Hamburger icon (paths were white in markup) */
[data-compid="infiniti-primary-navbar"] .primary-nav-hamburger path {
  fill: #000 !important;
}

/* Optional: ensure focus outlines are visible everywhere */
[data-compid="infiniti-primary-navbar"] a:focus,
[data-compid="infiniti-primary-navbar"] button:focus {
  outline: 2px solid #000 !important;
  outline-offset: 2px;
}


/* Force the INFINITI logo to render black on white */
[data-compid="infiniti-primary-navbar"] a[data-id="primary-logo"] img.primary-nav-logo,
[data-compid="infiniti-primary-navbar"] a[data-id="primary-logo"] img.primary-nav-icon {
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* If your theme sets filters on ALL nav icons, neutralize them too */
[data-compid="infiniti-primary-navbar"] .primary-nav-icon {
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}

/* (Optional fallback) If the actual SVG is white-only, flip it to black.
   Uncomment the rule below if you STILL see a white mark on white.
*/
/*
[data-compid="infiniti-primary-navbar"] a[data-id="primary-logo"] img.primary-nav-logo {
  filter: invert(1) grayscale(100%) brightness(0) contrast(100%) !important;
}
*/

.primary-nav-container::after {
  display: none !important;
}

div#configurator-root {
  /*margin-top: 72px;*/
}

div#ecommerce-root {
    /*margin-top: 72px;*/
}

.skip-link {
  display: none !important;
}