/**
 * Nixrad mobile header - always-on when .mobile-header-active
 * Not gated by max-width (Journal can flip mobile header at any width).
 * Must load AFTER Journal style + generated CSS.
 */
:root {
  --nx-purple: #6a1b5c;
  --nx-purple-dark: #4c174f;
  --nx-navy: #1f2f46;
  --nx-line: #e7ebf0;
  --nx-soft: #f8f9fb;
}

html.mobile-header-active body { padding-top: 0 !important; }

html.mobile-header-active .mobile-header,
html.mobile-header-active .mobile-header .mobile-bar,
html.mobile-header-active .mobile-header .mobile-top-bar,
html.mobile-header-active .mobile-header .sticky-bar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

html.mobile-header-active .mobile-header .mobile-top-bar {
  display: block !important;
  height: auto !important;
  min-height: 42px !important;
  padding: 0 !important;
  background: linear-gradient(90deg, var(--nx-purple), var(--nx-purple-dark)) !important;
  box-shadow: none !important;
  border: 0 !important;
}

html.mobile-header-active .mobile-header .mobile-top-menu-wrapper,
html.mobile-header-active .mobile-header .top-menu-13,
html.mobile-header-active .mobile-header .top-menu-13 > .j-menu { width: 100% !important; }

html.mobile-header-active .mobile-header .top-menu-13 > .j-menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 12px !important;
}

html.mobile-header-active .mobile-header .top-menu-13 > .j-menu > li {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

html.mobile-header-active .mobile-header .top-menu-13 > .j-menu > li > a {
  height: 42px !important;
  padding: 0 6px !important;
  justify-content: center !important;
  gap: 5px !important;
  color: #fff !important;
  opacity: 1 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  background: transparent !important;
}

html.mobile-header-active .mobile-header .top-menu-13 > .j-menu > li > a::before {
  color: #fff !important;
  margin: 0 4px 0 0 !important;
  min-width: 0 !important;
  font-size: 15px !important;
}

html.mobile-header-active .mobile-header,
html.mobile-header-active .mobile-header.mobile-1,
html.mobile-header-active .mobile-header .mobile-bar,
html.mobile-header-active .mobile-header .mobile-bar.sticky-bar,
html.mobile-header-active .mobile-1 .mobile-bar,
html.mobile-header-active.mobile-header-sticky-active .mobile-header .mobile-bar,
html.mobile-header-active.mobile-header-sticky-active .mobile-header .sticky-bar {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: 0 8px 20px -20px rgba(16, 24, 40, 0.5) !important;
  border-bottom: 1px solid var(--nx-line) !important;
  color: var(--nx-navy) !important;
}

html.mobile-header-active .mobile-header .mobile-bar,
html.mobile-header-active .mobile-1 .mobile-bar {
  min-height: 126px !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px 12px 12px !important;
  display: grid !important;
  grid-template-columns: 58px 1fr 58px !important;
  grid-template-areas: "menu logo cart" "search search search" !important;
  align-items: center !important;
  gap: 6px 8px !important;
}

html.mobile-header-active .mobile-header .mobile-logo-wrapper {
  grid-area: logo !important;
  justify-self: center !important;
  align-self: center !important;
  width: auto !important;
  max-width: 190px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

html.mobile-header-active .mobile-header .mobile-logo-wrapper #logo a,
html.mobile-header-active .mobile-header .mobile-logo-wrapper a {
  padding: 0 !important;
  background: transparent !important;
}

html.mobile-header-active .mobile-header .mobile-logo-wrapper img {
  max-width: 180px !important;
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
}

html.mobile-header-active .mobile-header .mobile-bar-group {
  display: contents !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  background: transparent !important;
}

html.mobile-header-active .mobile-header .mobile-custom-menu,
html.mobile-header-active .mobile-header .mobile-custom-menu-1,
html.mobile-header-active .mobile-header .mobile-custom-menu-2 {
  display: none !important;
}

html.mobile-header-active .mobile-header .menu-trigger {
  grid-area: menu !important;
  justify-self: start !important;
  align-self: center !important;
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center !important;
  color: var(--nx-navy) !important;
}

html.mobile-header-active .mobile-header .menu-trigger::before {
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: block !important;
  width: 30px !important;
  color: var(--nx-navy) !important;
  font-size: 27px !important;
  line-height: 1 !important;
  text-align: center !important;
}

html.mobile-header-active .mobile-header .menu-trigger::after {
  content: "MEN\00DC" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 8px !important;
  transform: translateX(-50%) !important;
  display: block !important;
  width: 58px !important;
  color: var(--nx-navy) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-align: center !important;
  line-height: 1 !important;
}

html.mobile-header-active .mobile-header .mobile-bar .menu-trigger:has(.nx-menu-icon)::after,
html.mobile-header-active .mobile-header .mobile-bar .menu-trigger:has(.nx-menu-icon)::before {
  display: none !important;
  content: none !important;
}

html.mobile-header-active .mobile-header .mobile-bar .menu-trigger .nx-menu-icon,
html.mobile-header-active .mobile-header .mobile-bar .menu-trigger .nx-menu-label {
  display: block !important;
  pointer-events: none !important;
  color: var(--nx-navy) !important;
}

html.mobile-header-active .mobile-header .mobile-cart-wrapper {
  grid-area: cart !important;
  justify-self: end !important;
  align-self: center !important;
  position: relative !important;
  width: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  overflow: visible !important;
}

html.mobile-header-active .mobile-header .mobile-cart-wrapper #cart {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.mobile-header-active .mobile-header .mobile-cart-wrapper #cart > a {
  width: auto !important;
  height: auto !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--nx-navy) !important;
}

html.mobile-header-active .mobile-header .mobile-cart-wrapper #cart > a > i,
html.mobile-header-active .mobile-header .mobile-cart-wrapper #cart > a::before,
html.mobile-header-active .mobile-header .mobile-cart-wrapper .cart-heading i,
html.mobile-header-active .mobile-header .mobile-cart-wrapper .cart-heading::before {
  color: var(--nx-navy) !important;
  font-size: 27px !important;
}

html.mobile-header-active .mobile-header .mobile-cart-wrapper #cart-total { display: none !important; }

html.mobile-header-active .mobile-header .mobile-cart-wrapper::after {
  content: "SEPET\0130M" !important;
  position: static !important;
  display: block !important;
  margin-top: 4px !important;
  color: var(--nx-navy) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-align: center !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

html.mobile-header-active .mobile-header #cart-items,
html.mobile-header-active .mobile-header .cart-badge,
html.mobile-header-active .mobile-header .count-badge {
  top: -2px !important;
  right: -6px !important;
  background: #e11d48 !important;
  color: #fff !important;
  border: 0 !important;
  transform: none !important;
}

html.mobile-header-active .mobile-header .mobile-search-wrapper {
  grid-area: search !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
}

html.mobile-header-active .mobile-header .mobile-search-wrapper .search-trigger { display: none !important; }

html.mobile-header-active .mobile-header .mobile-search-wrapper #search,
html.mobile-header-active .mobile-header .mobile-search-wrapper .mini-search {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

html.mobile-header-active .mobile-header .mobile-search-wrapper .search-categories { display: none !important; }

html.mobile-header-active .mobile-header .mobile-search-wrapper .header-search {
  width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  border: 1px solid var(--nx-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html.mobile-header-active .mobile-header .mobile-search-wrapper .header-search input {
  height: 46px !important;
  padding: 0 14px !important;
  color: var(--nx-navy) !important;
  font-size: 15px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.mobile-header-active .mobile-header .mobile-search-wrapper .header-search .search-button,
html.mobile-header-active .mobile-header .mobile-search-wrapper .header-search button {
  width: 48px !important;
  height: 46px !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--nx-line) !important;
  background: var(--nx-soft) !important;
  color: var(--nx-navy) !important;
  box-shadow: none !important;
}

html.mobile-header-active .mobile-header .mobile-search-wrapper .header-search .search-button i,
html.mobile-header-active .mobile-header .mobile-search-wrapper .header-search button i,
html.mobile-header-active .mobile-header .mobile-search-wrapper .header-search .search-button::before {
  color: var(--nx-navy) !important;
  opacity: 0.85 !important;
  font-size: 22px !important;
}

html.mobile-header-active .mobile-header .mobile-bar i,
html.mobile-header-active .mobile-header .menu-trigger,
html.mobile-header-active .mobile-header .cart-heading {
  color: var(--nx-navy) !important;
}