/* Logged-in portal header — congruent with portal login brand + black ticker bar */

:root {
  --vp-header-brand: #3b2fd6;
  --vp-header-brand-2: #8b2fe0;
  --vp-header-ink: #0b1020;
  --vp-header-bar: #000;
  /* Pixel metrics only — Phone Orders admin CSS changes rem root size vs Divi. */
  --vp-header-container-pad-top: 12px;
  --vp-header-container-pad-x: 20px;
  --vp-header-brand-h: 64px;
  --vp-header-logo-h: 48px;
  --vp-header-menu-pad-y: 14px;
  --vp-header-menu-pad-x: 11px;
  --vp-header-menu-fs: 12px;
  --vp-header-menu-lh: 15px;
}

/* Keep Divi fixed positioning — do not force relative (that doubles #page-container padding). */
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header {
  background-color: var(--vp-header-ink) !important;
  background-image: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active).admin-bar.et_fixed_nav #main-header,
:is(html.vp-portal-header-active, body.vp-portal-header-active).et_fixed_nav #main-header {
  max-height: none !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom right,
      color-mix(in srgb, var(--vp-header-brand) 68%, transparent),
      color-mix(in srgb, var(--vp-header-brand) 52%, transparent),
      color-mix(in srgb, var(--vp-header-brand-2) 58%, transparent)
    ),
    var(--vp-header-hero, none) center / cover no-repeat,
    var(--vp-header-ink);
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(8, 10, 24, 0.55) 0%,
    rgba(8, 10, 24, 0.18) 40%,
    transparent 70%
  );
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header > .container {
  position: relative;
  z-index: 2;
}

/*
 * Divi's search overlay is position:absolute;top:0.
 * Forcing relative on .et_search_outer pulls it into flow and blows up header height.
 * Hide it for now — search isn't needed in the logged-in portal chrome.
 */
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header > .et_search_outer,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #et_top_search {
  display: none !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header .et_menu_container,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header .container {
  width: 100% !important;
  max-width: none !important;
  padding-top: var(--vp-header-container-pad-top) !important;
  padding-bottom: 0 !important;
  padding-left: var(--vp-header-container-pad-x) !important;
  padding-right: var(--vp-header-container-pad-x) !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) .logo_container,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header .logo_container {
  position: relative !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
  height: var(--vp-header-brand-h) !important;
  min-height: var(--vp-header-brand-h) !important;
  max-height: var(--vp-header-brand-h) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header .logo_helper {
  display: none !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header .logo_container > a {
  display: flex !important;
  align-items: center !important;
  line-height: 0 !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #logo {
  display: block !important;
  height: var(--vp-header-logo-h) !important;
  max-height: var(--vp-header-logo-h) !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #et-top-navigation,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header div#et-top-navigation {
  position: relative !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Full-bleed black menu bar (mirrors login ticker bar) */
:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu-nav {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: visible;
  background: transparent;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu-nav::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--vp-header-bar);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 0;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu {
  position: relative;
  z-index: 1;
  float: none !important;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0.5rem;
  text-align: center;
  white-space: nowrap;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li {
  position: relative;
  float: none !important;
  display: inline-block;
  padding: 0 !important;
  vertical-align: top;
  white-space: nowrap;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li > a {
  display: inline-block;
  padding: var(--vp-header-menu-pad-y) var(--vp-header-menu-pad-x) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: var(--vp-header-menu-fs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  line-height: var(--vp-header-menu-lh) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-transform: uppercase;
  white-space: nowrap;
  box-sizing: border-box !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li > a:hover,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li.current-menu-item > a,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li.current_page_item > a,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li.current-menu-ancestor > a {
  color: #c4b5fd !important;
  background: transparent;
}

/* Keep caret readable + vertically centered (no Divi ETmodules font dependency) */
:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu .menu-item-has-children > a:first-child {
  padding-right: 23px !important;
  position: relative;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu .menu-item-has-children > a:first-child:after,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu li .menu-item-has-children > a:first-child:after,
:is(html.vp-portal-header-active, body.vp-portal-header-active) .et_header_style_centered header#main-header.et-fixed-header #top-menu > li > a:after {
  content: "" !important;
  font-family: inherit !important;
  font-size: 0 !important;
  font-weight: 400 !important;
  position: absolute;
  top: 50% !important;
  right: 3px;
  width: 6px;
  height: 6px;
  margin-top: -1px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.8);
  background: none !important;
  color: transparent !important;
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li > a:hover:after,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li.current-menu-item > a:after,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li.current-menu-ancestor > a:after {
  border-color: #c4b5fd;
  color: transparent !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu li .menu-item-has-children > a:first-child {
  padding-right: 36px !important;
}

/* Nested items: point the caret to the right */
:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu li .menu-item-has-children > a:first-child:after {
  right: 14px;
  transform: translateY(-50%) rotate(-45deg);
  margin-top: 0;
}

/* Undo legacy absolute logout placement so it sits in the black bar */
:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li:nth-child(9) {
  position: relative;
  right: auto;
  top: auto;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li:nth-child(9) a {
  padding: var(--vp-header-menu-pad-y) var(--vp-header-menu-pad-x) !important;
  font-size: var(--vp-header-menu-fs) !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li:nth-child(9):after {
  display: none;
}

/* Dropdowns — restore Divi absolute menus above the bar */
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  text-align: left;
  border-top: 3px solid var(--vp-header-brand);
  background: #111;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 240px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li:hover > ul,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li:focus-within > ul,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li.et-touch-hover > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Nested flyouts open beside the item, not under it */
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li li ul {
  top: 0;
  left: 100%;
  margin-top: 0;
  border-top: 3px solid var(--vp-header-brand);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li li:hover > ul,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li li:focus-within > ul,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li li.et-touch-hover > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li li {
  display: block;
  float: none;
  position: relative;
  width: 100%;
  padding: 0 !important;
  background: #111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li li:hover {
  background: color-mix(in srgb, var(--vp-header-brand) 28%, #111);
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li li a:hover,
:is(html.vp-portal-header-active, body.vp-portal-header-active).et_fixed_nav #main-header #top-menu .sub-menu a:hover {
  color: #c4b5fd !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #top-menu li li a,
:is(html.vp-portal-header-active, body.vp-portal-header-active).et_fixed_nav #main-header #top-menu .sub-menu a {
  color: #fff !important;
  width: 220px;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 18px !important;
  text-transform: none;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #et-top-navigation .et-cart-info,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #et-top-navigation .et-cart-info {
  top: -42px;
  right: 0;
  color: #fff;
  position: absolute !important;
}

/* Keep scrolled / fixed chrome the same height as the embed header. */
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.et-fixed-header {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.et-fixed-header .logo_container {
  height: var(--vp-header-brand-h) !important;
  min-height: var(--vp-header-brand-h) !important;
  max-height: var(--vp-header-brand-h) !important;
  padding: 0 !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.et-fixed-header #logo {
  height: var(--vp-header-logo-h) !important;
  max-height: var(--vp-header-logo-h) !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.et-fixed-header #top-menu > li > a {
  padding-top: var(--vp-header-menu-pad-y) !important;
  padding-bottom: var(--vp-header-menu-pad-y) !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active).logged-in #main-header.et-fixed-header #et-top-navigation .et-cart-info,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.et-fixed-header #et-top-navigation .et-cart-info {
  top: -42px;
}

/* Hide Divi's native mobile nav — portal uses .vp-portal-menu-toggle */
:is(html.vp-portal-header-active, body.vp-portal-header-active) #et_mobile_nav_menu,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #mobile_menu {
  display: none !important;
}

/* Hamburger button — hidden on desktop */
:is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-menu-toggle {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 7;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-menu-toggle__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 18px;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-menu-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.vp-mobile-open .vp-portal-menu-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.vp-mobile-open .vp-portal-menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.vp-mobile-open .vp-portal-menu-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile panel — always closed until #main-header.vp-mobile-open */
:is(html.vp-portal-header-active, body.vp-portal-header-active) #vp-portal-mobile-menu,
:is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-mobile-menu {
  display: none !important;
}

:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.vp-mobile-open #vp-portal-mobile-menu,
:is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.vp-mobile-open .vp-portal-mobile-menu {
  display: block !important;
}

/* —— Mobile layout —— */
@media (max-width: 1119px) {
  :is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header .et_menu_container {
    position: relative !important;
    overflow: visible !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu-nav {
    display: none !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu-nav::before {
    display: none !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) #et-top-navigation {
    position: static !important;
    min-height: 0 !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-menu-toggle {
    display: block !important;
    position: absolute !important;
    top: var(--vp-header-container-pad-top) !important;
    right: var(--vp-header-container-pad-x) !important;
    width: 44px !important;
    height: var(--vp-header-brand-h) !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-menu-toggle__box {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.vp-mobile-open #vp-portal-mobile-menu,
  :is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header.vp-mobile-open .vp-portal-mobile-menu {
    position: absolute !important;
    top: calc(var(--vp-header-container-pad-top) + var(--vp-header-brand-h)) !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: var(--vp-header-bar) !important;
    border-top: 3px solid var(--vp-header-brand) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-mobile-menu__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-mobile-menu li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    white-space: normal !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-mobile-menu li ul {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-mobile-menu a {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    padding: 14px 20px !important;
    color: #fff !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    line-height: 1.3 !important;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-mobile-menu a:hover,
  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-mobile-menu .current-menu-item > a {
    color: #c4b5fd !important;
    background: color-mix(in srgb, var(--vp-header-brand) 22%, #111) !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-mobile-menu .menu-item-has-children > a:first-child:after {
    display: none !important;
  }

  /* Cart lives inside the mobile panel on small screens — hide header cart icon */
  :is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #et-top-navigation > a.et-cart-info {
    display: none !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-mobile-cart .et-cart-info:after,
  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-mobile-cart .et-cart-info span {
    display: none !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header .logo_container {
    padding-right: 56px !important;
  }
}

@media (min-width: 1120px) {
  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-menu-toggle,
  :is(html.vp-portal-header-active, body.vp-portal-header-active) #vp-portal-mobile-menu,
  :is(html.vp-portal-header-active, body.vp-portal-header-active) .vp-portal-mobile-menu,
  :is(html.vp-portal-header-active, body.vp-portal-header-active) #et_mobile_nav_menu,
  :is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #mobile_menu {
    display: none !important;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu-nav > ul li:not(:last-child) {
    display: inline-block;
  }

  :is(html.vp-portal-header-active, body.vp-portal-header-active) #et-top-navigation .et-cart-info,
  :is(html.vp-portal-header-active, body.vp-portal-header-active) #main-header #et-top-navigation .et-cart-info {
    display: block !important;
    top: -42px;
    right: 0;
  }
}

@media (min-width: 1100px) and (max-width: 1370px) {
  :is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li > a {
    font-size: 11px !important;
    letter-spacing: 0.04em;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

@media (min-width: 1371px) {
  :is(html.vp-portal-header-active, body.vp-portal-header-active) #top-menu > li > a {
    font-size: 13px !important;
    letter-spacing: 0.07em;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}