:root{
  --infer-bg: #0b0b0b;
  --infer-fg: #e9e9e9;
  --infer-fg-muted: rgba(233,233,233,.75);
  --infer-border: rgba(255,255,255,.08);
}

body{
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.infer-header .infer-nav{
  background: var(--infer-bg);
  border-bottom: 1px solid var(--infer-border);
  padding: 12px 0;
}

.infer-header .navbar-brand .logo-img{
  height: 41px;
  width: auto;
}

.infer-header #nav.infer-mainmenu{
  margin-left: 28px;          /* aligns menu with logo like site */
}

.infer-header #nav .nav-link{
  color: var(--infer-fg-muted) !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 0 !important;
}

.infer-header #nav .nav-link:hover,
.infer-header #nav .nav-item.active > .nav-link{
  color: var(--infer-fg) !important;
}

/* Mobile toggler icon color */
.infer-header .navbar-toggler{ border: 0; }
.infer-header .navbar-toggler .fas{ color: var(--infer-fg); }

/* Uppercase menu items (primary + secondary) */
.infer-header .navbar-nav .nav-link,
.infer-header .navbar-nav .dropdown-item {
  text-transform: uppercase;
}

/* Force uppercase on TOP-level (main) navbar items */
.infer-header .infer-nav #nav > li > a,
.infer-header .infer-nav #nav > .nav-item > .nav-link,
.infer-header .infer-nav #nav > .nav-item > a {
  text-transform: uppercase !important;
}

/* If the label text is wrapped in spans, force it too */
.infer-header .infer-nav #nav > li > a span,
.infer-header .infer-nav #nav > .nav-item > .nav-link span {
  text-transform: uppercase !important;
}

/* Main menu: smaller + bolder */
.infer-header .infer-nav #nav > li > a,
.infer-header .infer-nav #nav > .nav-item > .nav-link,
.infer-header .infer-nav #nav > .nav-item > a {
  font-size: 11px !important;      /* smaller */
  font-weight: 700 !important;     /* bolder */
  letter-spacing: 0.12em;          /* keeps the “site” feel */
  line-height: 1.1;
}

/* Optional: reduce padding so it looks tighter */
.infer-header .infer-nav #nav > li > a,
.infer-header .infer-nav #nav > .nav-item > .nav-link {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
/* Dimmer default + white on hover, no underline */
.infer-header .infer-nav #nav > .nav-item > .nav-link,
.infer-header .infer-nav #nav > li > a {
  color: rgba(255,255,255,.70) !important;  /* dimmer default */
  text-decoration: none !important;
}

/* Hover/focus/active => white, no underline */
.infer-header .infer-nav #nav > .nav-item > .nav-link:hover,
.infer-header .infer-nav #nav > .nav-item > .nav-link:focus,
.infer-header .infer-nav #nav > .nav-item.active > .nav-link,
.infer-header .infer-nav #nav > li > a:hover,
.infer-header .infer-nav #nav > li > a:focus {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Kill any underline/border effect implemented via pseudo-elements */
.infer-header .infer-nav #nav > .nav-item > .nav-link::after,
.infer-header .infer-nav #nav > li > a::after,
.infer-header .infer-nav #nav > .nav-item > .nav-link::before,
.infer-header .infer-nav #nav > li > a::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* Also remove underline/border on dropdown items (optional but consistent) */
.infer-header .infer-nav .dropdown-menu .dropdown-item {
  color: rgba(255,255,255,.70) !important;
  text-decoration: none !important;
}
.infer-header .infer-nav .dropdown-menu .dropdown-item:hover,
.infer-header .infer-nav .dropdown-menu .dropdown-item:focus {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* =========================================================
   MAIN MENU: remove any lighter background behind items
   ========================================================= */
.infer-header .infer-nav #nav,
.infer-header .infer-nav #nav > li,
.infer-header .infer-nav #nav > .nav-item,
.infer-header .infer-nav #nav > .nav-item > a,
.infer-header .infer-nav #nav > .nav-item > .nav-link {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* If Twenty-One adds a hover background, kill it */
.infer-header .infer-nav #nav > .nav-item > .nav-link:hover,
.infer-header .infer-nav #nav > .nav-item > .nav-link:focus,
.infer-header .infer-nav #nav > li > a:hover,
.infer-header .infer-nav #nav > li > a:focus {
  background: transparent !important;
  background-color: transparent !important;
}

/* =========================================================
   DROPDOWN PANEL: same as header (or close), no border
   ========================================================= */
.infer-header .infer-nav .dropdown-menu {
  background: #0b0b0b !important;          /* match your header bg */
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px;
  box-shadow: none !important;
  padding: 10px 12px;
}

/* =========================================================
   SUBMENU ITEMS: same style as primary
   ========================================================= */
.infer-header .infer-nav .dropdown-menu .dropdown-item {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;

  color: rgba(255,255,255,.70) !important; /* dimmer default */
  background: transparent !important;
  text-decoration: none !important;

  padding: 10px 8px;
}

/* Hover => white, no underline, no highlight bg */
.infer-header .infer-nav .dropdown-menu .dropdown-item:hover,
.infer-header .infer-nav .dropdown-menu .dropdown-item:focus,
.infer-header .infer-nav .dropdown-menu .dropdown-item.active {
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* Remove any underline/pseudo underline effects from dropdown items too */
.infer-header .infer-nav .dropdown-menu .dropdown-item::before,
.infer-header .infer-nav .dropdown-menu .dropdown-item::after,
.infer-header .infer-nav #nav > .nav-item > .nav-link::before,
.infer-header .infer-nav #nav > .nav-item > .nav-link::after {
  content: none !important;
  display: none !important;
}

/* Optional: make caret match (if you use dropdown toggles) */
.infer-header .infer-nav .dropdown-toggle::after {
  border-top-color: rgba(255,255,255,.70) !important;
}
.infer-header .infer-nav .dropdown-toggle:hover::after {
  border-top-color: #ffffff !important;
}
.infer-header .infer-nav .navbar-collapse,
.infer-header .infer-nav .container {
  background: transparent !important;
}

/* =========================================================
   PATCH 1: Remove the “lighter strip/pill” behind MAIN menu
   (targets only the primary menu UL you created: #nav.infer-mainmenu)
   ========================================================= */

.infer-header .infer-nav ul#nav.infer-mainmenu{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* In case the background is on li/a/nav-link itself */
.infer-header .infer-nav ul#nav.infer-mainmenu > li,
.infer-header .infer-nav ul#nav.infer-mainmenu > .nav-item,
.infer-header .infer-nav ul#nav.infer-mainmenu > li > a,
.infer-header .infer-nav ul#nav.infer-mainmenu > .nav-item > .nav-link{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Prevent hover from painting a background */
.infer-header .infer-nav ul#nav.infer-mainmenu > li > a:hover,
.infer-header .infer-nav ul#nav.infer-mainmenu > .nav-item > .nav-link:hover,
.infer-header .infer-nav ul#nav.infer-mainmenu > li > a:focus,
.infer-header .infer-nav ul#nav.infer-mainmenu > .nav-item > .nav-link:focus{
  background: transparent !important;
  background-color: transparent !important;
}
/* =========================================================
   PATCH 2: Dropdown items match primary menu style
   ========================================================= */

/* Dropdown panel background to match header */
.infer-header .infer-nav .dropdown-menu{
  background: var(--infer-bg) !important;
  border: 1px solid var(--infer-border) !important;
  box-shadow: none !important;
}

/* Dropdown links same typography + dim/white behavior */
.infer-header .infer-nav .dropdown-menu .dropdown-item{
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;

  color: rgba(255,255,255,.70) !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* Hover: white text only (no highlight bg) */
.infer-header .infer-nav .dropdown-menu .dropdown-item:hover,
.infer-header .infer-nav .dropdown-menu .dropdown-item:focus{
  color: #fff !important;
  background: transparent !important;
  text-decoration: none !important;
}
/* =========================================================
   FIX: "Cuenta" is an <a class="dropdown-toggle"> without .nav-link
   Make it match primary menu exactly.
   ========================================================= */

.infer-header .infer-nav a.dropdown-toggle {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;

  color: rgba(255,255,255,.70) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  padding: 10px 0 !important;
}

/* Hover/focus/open => white text only */
.infer-header .infer-nav a.dropdown-toggle:hover,
.infer-header .infer-nav a.dropdown-toggle:focus,
.infer-header .infer-nav .show > a.dropdown-toggle {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

/* Remove any underline/pseudo underline */
.infer-header .infer-nav a.dropdown-toggle::before,
.infer-header .infer-nav a.dropdown-toggle::after {
  content: none !important;
  display: none !important;
}

/* Caret next to Cuenta */
.infer-header .infer-nav a.dropdown-toggle::after {
  border-top-color: rgba(255,255,255,.70) !important;
}
.infer-header .infer-nav a.dropdown-toggle:hover::after,
.infer-header .infer-nav .show > a.dropdown-toggle::after {
  border-top-color: #ffffff !important;
}
/* =========================================================
   CART FIX ONLY: remove light background and match header style
   Applies to both cart instances (mobile + desktop)
   ========================================================= */

.infer-header .infer-nav a.cart-btn,
.infer-header .infer-nav a.cart-btn.btn,
.infer-header .infer-nav a.cart-btn.nav-link {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  text-decoration: none !important;
}

/* If the background is actually on the <li> wrapper */
.infer-header .infer-nav li.nav-item a.cart-btn,
.infer-header .infer-nav li.nav-item,
.infer-header .infer-nav li.nav-item.ml-xl-3.d-none.d-xl-block {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Icon + link color behavior */
.infer-header .infer-nav a.cart-btn,
.infer-header .infer-nav a.cart-btn i {
  color: rgba(255,255,255,.70) !important;
}

.infer-header .infer-nav a.cart-btn:hover,
.infer-header .infer-nav a.cart-btn:hover i,
.infer-header .infer-nav a.cart-btn:focus,
.infer-header .infer-nav a.cart-btn:focus i {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

/* Remove any underline / pseudo underline effects */
.infer-header .infer-nav a.cart-btn::before,
.infer-header .infer-nav a.cart-btn::after {
  content: none !important;
  display: none !important;
}
/* Fix: spacing between top-level primary menu items (Tienda / Novedades, etc.) */
.infer-header .infer-nav ul#nav.infer-mainmenu > li > a {            /* ensures padding is honored consistently */
  padding-right: 25px !important;     /* space between items */
}