.text-17 {
  font-size: 17px !important;
}
/* eCAPS Button Styles */
a.ecaps-header-nav {
  border-radius: 6px;
  background-color: transparent;
  height: 32px;
  color: var(--color-white);
  font-family: var(--font-family-bold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0px;
  text-align: center;
  padding: 2px 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  min-height: 32px;
  border: 1px solid var(--color-white);
}
.font-333 {
  color: var(--color-near-black);
}
.header-icon {
  font-size: 20px !important;
  color: white;
}

/* Add margin to create space between text and icons */
.header-icon:first-of-type {
  margin-left: 4px;
}

a.ecaps-header-nav:hover {
  background-color: var(--color-sky-blue) !important;
  color: var(--color-white) !important;
  border-color: var(--color-sky-blue) !important;
}
a.ecaps-header-nav:focus {
  color: var(--color-sky-blue) !important;
  border-color: var(--color-sky-blue) !important;
}
a.ecaps-header-nav:focus,
.site-breadcrumb__link:focus,
.site-header__icon-button:focus,
.site-header__icon-button:focus .search-icon-toggle,
.cj-header-user-menu__toggle:focus,
.login-button:focus {
  color: var(--color-white) !important;
  outline: none !important;
}
.site-breadcrumb__link:hover,
.site-breadcrumb__link:focus {
  color: var(--color-dark-blue) !important;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

a.ecaps-header-nav:hover img {
  animation: spin 6s linear infinite;
}

a.ecaps-header-nav img {
  width: 27px;
}
/* Header Layout */
.standard-dropdown {
  min-width: 600px;
  padding: 24px;
}

.login-button {
  margin-top: 7px;
  background: none;
  border: none;
  color: var(--color-white) !important;
}

.login-button:hover {
  color: var(--color-dark-blue);
  cursor: pointer;
}

.dropdown-header {
  color: var(--color-black);
  font-family: var(--font-family-medium);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 20px;
  padding: 0 53px !important;
}

.standard-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dropdown-row {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.find-my-rep-button {
  align-items: center;
  background-color: transparent;
  border: 1px solid var(--color-black);
  border-radius: 6px;
  color: var(--color-black);
  display: flex;
  font-family: var(--font-family-bold);
  font-size: 15px;
  font-weight: 500;
  gap: 6px;
  line-height: 20px;
  height: 46px;
  padding: 16px 0;
    width: 156px;
    display: flex;
    justify-content: center;
  text-decoration: none !important;
  transition: var(--transition-base);
  /* margin-bottom: 22px; */
}
.find-my-rep-button:hover {
  background-color: var(--color-sky-blue) !important;
  color: var(--color-white) !important;
  border-color: var(--color-sky-blue) !important;
}
.standard-item {
  color: var(--color-near-black);
  text-decoration: none;
  font-family: var(--font-family-medium);
  font-size: var(--font-size-base);
  transition: var(--transition-base);
  padding: 8px 0;
  border-radius: 4px;
}

.standard-item:hover {
  color: var(--color-dark-blue);
}
.site-header {
  background-color: var(--color-white);
}

/* Wrapper around the two stacked bars (`.site-header__top-bar` +
   `.site-header__logo-nav-bar`). Two things to know:
   1. `padding-bottom` is the cosmetic gap between the header and page
      content. Zeroed in `.site-header--scrolled`. Value lives in common.css
      as `--site-header-bottom-gap` so it's declared in one place.
   2. `position: relative` is STRUCTURAL — it's the positioning context for
      `.site-header__logo-nav-bar { position: absolute }` (>=1024px, see
      header-transparent-overrides.css). Do not remove. */
.site-header__container {
  padding: 0 0 var(--site-header-bottom-gap, 7px);
  position: relative;
}
.relative {
  position: relative;
}

/* Top Bar Section */
.site-header__top-bar {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  background: var(--color-black);
  min-height: 65px;
  position: relative;
}
.site-header__top-bar-container {
  margin: 0 auto;
  max-width: var(--max-width-container);
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.site-header__center {
  align-items: center;
  display: flex;
  gap: 10px;
  left: 50%;
  position: absolute;
  top: 14.5px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.site-header__center-text {
  color: var(--color-white);
  font-family: var(--font-family-medium);
  font-size: var(--font-size-base);
}
.site-header__center-text .text-content.bold-p1 {
  color: var(--color-white);
  font-size: 14px;
  margin: 0 !important;
  height: 32px;
  display: flex;
  align-items: center;
}

.site-header__right {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  max-width: 410px;
  width: 100%;
  align-items: center;
}

/* Buttons and Links */
.site-header__ecaps-button {
  background-color: var(--color-dark-blue);
  border: 1px solid var(--color-dark-blue);
  border-radius: var(--border-radius);
  color: var(--color-white);
  font-family: var(--font-family-medium);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 20px;
  padding: 2px 12px;
  text-decoration: none;
}

.site-header__icon-button {
  display: flex;
  font-family: var(--font-family-medium);
  text-decoration: none;
  height: 32px;
}
.hawk-search-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 24px;
  /* overflow: visible; */
}
.search-icon-toggle {
  color: var(--color-white) !important;
  position: absolute;
  right: 0;
}
.hawk-searchQuery {    
  max-height: 80vh;
  overflow: auto;
}
/* .hawk-search-wrapper .search-container.input-group {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1101;
  max-width: 260px;
  width: 260px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
} */
.search-icon-toggle:hover,
.search-icon-toggle:focus,
.site-header__nav-link:hover,
.site-header__nav-link:focus {
  color: var(--color-sky-blue) !important;
  outline: none !important;
}
.find-my-rep-button:focus {
  border-color: var(--color-sky-blue) !important;
  outline: none !important;
  color: var(--color-sky-blue) !important;
}
.outline-medium-btn-with-icon {
  align-items: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-dark-blue);
  border-radius: var(--border-radius);
  color: var(--color-dark-blue);
  display: flex;
  font-family: var(--font-family-medium);
  font-size: 15px;
  font-weight: 500;
  gap: 6px;
  line-height: 20px;
  padding: 7px 18px;
  text-decoration: none;
  transition: var(--transition-base);
}
.site-header__icon-button .outline-medium-btn-with-icon {
  color: var(--color-white);
}
.outline-medium-btn-with-icon:hover {
  background-color: var(--color-dark-blue);
  color: var(--color-white);
}

/* Logo and Navigation */
.site-header__logo-nav-bar {
  margin: 0 auto;
  max-width: var(--max-width-container);
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  height: 122.25px;
  padding-bottom: 22px;
}
.site-header--scrolled .site-header__logo-nav-bar{
  padding-bottom: 0;
}
.site-header--scrolled .header-logo{
  display: flex;
}
.site-header__logo-nav-bar-container {
  margin: 0 auto;
  max-width: var(--max-width-container);
  width: 100%;
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  
}
.site-header__logo-nav-bar img.desktop-header-logo {
  height: auto;
  max-width: 287px;
  width: 100%;
  visibility: hidden;
}

.header-logo {
  width: 287px;
  /* margin-top: 50px; */
  margin-top: 0;
  margin-bottom: 0;
  /* margin-bottom: 0; */
  height: 46px;
  min-height: 46px;
}

.header-logo img {
  width: 100%;
  max-width: 246.72px;
  height: auto;
  /* `display: block` is load-bearing, not cosmetic. As an inline replaced
     element the <img> sits on the text baseline, so the <a> around it was
     7px taller than the image (46px image + descender). The compact state
     turns that <a> into a flex container, which drops the phantom 7px — a
     `display` change cannot transition, so the logo jumped 7px the moment
     `.site-header--scrolled` was toggled (down on Valent, where the <a> is
     bottom-aligned; into a blue/white cross-fade mismatch on Greenheck).
     With `display: block` the <a> is exactly the image height in both
     states and there is nothing left to snap. */
  display: block;
}

/* Cross-fade the two desktop logos. They are stacked (white overlaid on blue)
   so we can transition `opacity` — `display: none` is not animatable.
   The actual show/hide toggles live in header-transparent-overrides.css. */
.desktop-logo-blue,
.desktop-logo-white {
  transition: opacity var(--header-scroll-transition-duration)
    var(--header-scroll-transition-ease);
}

.desktop-logo-blue {
  opacity: 1;
}

.desktop-logo-white {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.site-header__navigation {
  position: relative;
  z-index: 1000;
  align-items: center;
  display: flex;
  gap: 60px;
  height: 46px;
  /* padding-bottom: 22px; */
}

.site-header__nav-list {
  display: flex;
  gap: 10px;
  list-style: none;
  flex: 1;
  justify-content: space-between;
  flex-wrap: wrap;
  text-transform: uppercase;
  /* margin-bottom: 29px; */
}
.site-header__navigation-container {
  flex: 1;
}
.site-header__nav-item {
  position: relative;
}

.site-header__nav-link {
  font-family: var(--font-family-semi-bold);
  font-size: var(--font-size-nav);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 24px;
  color: var(--color-near-black);
  text-decoration: none;
  transition: var(--transition-base);
  display: inline-block;
  position: relative;
}

/* .site-header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgb(var(--color-dark-blue));
  transform: scaleX(0);
  transition: transform 0.2s;
} */

.site-header__nav-link:hover::after,
.site-header__nav-link[aria-expanded="true"]::after {
  transform: scaleX(1);
}

.site-header__nav-link:hover {
  color: var(--color-dark-blue);
  text-decoration: none;
}

/* Dropdown Menu */
.site-header__dropdown-panel {
  position: fixed;
  /* top: 195px;  */
  /* Initial position - will be updated by JS */
  left: 0;
  width: 100vw;
  background-color: var(--color-white);
  border-radius: 0;
  box-shadow:
    0 4px 6px -2px color-mix(in srgb, var(--color-black) 5%, transparent),
    0 10px 15px -3px color-mix(in srgb, var(--color-black) 10%, transparent);
  display: none;
  padding: 34px 0 24px 0;
  margin: 0;
  opacity: 1;
  transform: none;
  transition: none;
  z-index: 1000;
}
.site-header--scrolled .site-header__dropdown-panel {
  padding: 15px 0 24px 0 !important;
}
/* Mega / standard dropdown: soft enter (driven by header.js + --enter-ready / --enter-active) */
.site-header__dropdown-panel.active.site-header__dropdown-panel--enter-ready:not(
    .site-header__dropdown-panel--enter-active
  ) {
  opacity: 0;
  transform: translateY(-6px) scale(0.995);
  transition: none;
}

.site-header__dropdown-panel.active.site-header__dropdown-panel--enter-active {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--header-nav-motion-duration-enter) var(--header-nav-motion-ease-enter),
    transform var(--header-nav-motion-duration-enter) var(--header-nav-motion-ease-enter);
}

/* Soft close: fades and lifts slightly before JS removes panel from DOM */
.site-header__dropdown-panel.active.site-header__dropdown-panel--leaving {
  opacity: 0;
  transform: translateY(-10px) scale(0.988);
  pointer-events: none;
  transition:
    opacity var(--header-nav-motion-duration-exit) var(--header-nav-motion-ease-exit),
    transform var(--header-nav-motion-duration-exit) var(--header-nav-motion-ease-exit);
}

@media (prefers-reduced-motion: reduce) {
  .site-header__dropdown-panel.active.site-header__dropdown-panel--enter-ready:not(
      .site-header__dropdown-panel--enter-active
    ) {
    opacity: 1;
    transform: none;
  }

  .site-header__dropdown-panel.active.site-header__dropdown-panel--enter-active {
    transition: none;
  }

  .site-header__dropdown-panel.active.site-header__dropdown-panel--leaving {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .submenu.submenu--enter-ready:not(.submenu--visible) .submenu-content {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .submenu .submenu-content,
  .submenu.submenu--visible .submenu-content {
    transition: none;
  }
}

/* Reduced-motion is handled globally in common.css (transition-duration: 0.01ms).
   The per-element overrides that used to live here were therefore redundant. */

.page-mask {
  position: fixed;
  top: 195px; /* Initial position - will be updated by JS */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-black);
  opacity: 0.6;
  z-index: 999;
  display: none;
}

.site-header__dropdown-panel.active .dropdown-grid {
  opacity: 1;
}

.site-header__dropdown-panel-container {
  position: relative;
  width: 100%;
  padding: 0;
}
.dropdown-header,
.standard-grid {
  max-width: 786px;
}
.site-header__dropdown-panel::before {
  content: none;
}


.dropdown-grid {
  background: var(--color-white);
  /* 6 items per row must fit inside max-width: 1046px:
     6 * 171px (.dropdown-item width) + 5 * 4px = 1046px exactly.
     Widening either value wraps the 6th item onto a new row. */
  column-gap: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 1046px;
  padding: 24px 0;
  row-gap: 33px;
}

.dropdown-item {
  align-items: center;
  border-radius: 0;
  border: transparent 2px solid;
  color: var(--color-near-black);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-family: var(--font-family-medium);
  font-size: var(--font-size-base);
  /* gap: 28px; */
  overflow: hidden;
  padding: 8px 8px;
  text-decoration: none;
  transition: var(--transition-base);
  /* Paired with .dropdown-grid column-gap: 4px to fit 6 across in 1046px. */
  width: 171px;
  height: 153px;
  text-align: center;
}

.dropdown-item:hover {
  color: var(--color-dark-blue);
  border: 2px solid var(--color-dark-blue);
}

.dropdown-icon {
  height: 60px !important;
  width: 60px !important;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.dropdown-item span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  /* margin-top: auto; */
  text-transform: capitalize;
}

/* Submenu */
.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--color-white) 95%, transparent);
  padding: 20px 40px;
  box-sizing: border-box;
  z-index: 1002;
}

.submenu-content {
  max-width: 778px;
  margin: 0 auto;
  position: relative;
  background-color: var(--color-light-gray);
  /* border-radius removed */
  padding: 30px 25px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-black) 5%, transparent);
  border: 1px solid var(--color-dark-blue);
  opacity: 1;
  transform: none;
  transition:
    opacity var(--header-nav-motion-duration-enter) var(--header-nav-motion-ease-enter),
    transform var(--header-nav-motion-duration-enter) var(--header-nav-motion-ease-enter);
}

.submenu.submenu--enter-ready:not(.submenu--visible) .submenu-content {
  opacity: 0;
  transform: translateY(-4px) scale(0.997);
  transition: none;
}

.submenu.submenu--visible .submenu-content {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--header-nav-motion-duration-enter) var(--header-nav-motion-ease-enter),
    transform var(--header-nav-motion-duration-enter) var(--header-nav-motion-ease-enter);
}

.submenu-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.submenu-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.submenu-header-bottom {
  display: flex;
  align-items: center;
  padding: 0 29px;
  justify-content: space-between;
}

.submenu-title {
  font-family: var(--font-family-medium);
  font-size: 24px;
  color: var(--color-black);
  text-transform: capitalize;
}

.submenu-close {
  cursor: pointer;
  color: var(--color-near-black);
  transition: var(--transition-base);
}

.submenu-close:hover {
  color: var(--color-dark-blue);
}

.submenu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.submenu-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.submenu-items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px 36px;
  margin-top: 0px;
  margin-bottom: 16px;
  padding: 0 0 0 29px;
}
.submenu-item {
  min-width: 180px;
  flex: 1 1 180px;
  max-width: 220px;
  color: var(--color-near-black);
  text-decoration: none;
  font-family: var(--font-family-medium);
  font-size: var(--font-size-base);
  transition: var(--transition-base);
  padding: 8px 0;
  border-radius: 4px;
}
.submenu-item {
  text-transform: none;
  display: inline-block;
}


.submenu-view-all-link {
  color: var(--color-dark-blue);
  text-decoration: none;
  font-family: var(--font-family-medium);
  font-size: var(--font-size-base);
  transition: var(--transition-base);
  text-transform: capitalize;
}
.submenu-item:hover {
  color: var(--color-dark-blue);
}

.submenu-back {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-near-black);
  text-decoration: none;
  font-family: var(--font-family-medium);
  font-size: var(--font-size-base);
  margin-bottom: 16px;
  cursor: pointer;
  text-transform: capitalize;
}

.submenu-back:hover {
  color: var(--color-dark-blue);
}
.flex-center-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
/* Font Size and Weight */
.font-size-22 {
  font-size: 22px;
}

.font_black {
  color: var(--color-black);
}

.font_weight {
  font-weight: 600;
}

/* Divider */
.divider_line {
  background-color: var(--color-white);
  height: 25px;
  margin: 0 10px;
  width: 2px;
}

.h2_products {
  color: var(--color-black);
  font-family: var(--font-family-semi-bold);
  font-size: 20px;
  font-weight: 500;
  margin: 0 auto;
  max-width: var(--max-width-container);
  margin: 0 auto;
  max-width: var(--max-width-container);
  padding: 0px 12px;
  letter-spacing: 0;
  text-transform: capitalize;
  text-align: center;
}

/* Mega-panel "View All", rendered under .h2_products (Valent only - see
   NavigationView.Header.cshtml). The row mirrors the heading's box exactly
   (same max-width / auto margins / 12px padding) so the link stays flush
   under the heading text at every breakpoint, including the bands where
   .site-header__dropdown-panel-container picks up its own side padding.
   Left-aligned by inheritance (the panel container's default), matching the
   `text-align: left` valent-widgets.css gives .h2_products on Valent. */
.dropdown-view-all-row {
  margin: 6px auto 0;
  max-width: var(--max-width-container);
  padding: 0 12px;
  width: 100%;
}

.dropdown-view-all-link {
  color: var(--color-near-black);
  font-family: var(--font-family-semi-bold, SharpSans-Semibold);
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  transition: var(--transition-base);
}

.dropdown-view-all-link:hover {
  color: var(--color-dark-blue);
  text-decoration: underline;
}

#mobile-nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
#mobile-nav-toggle .material-symbols-outlined {
  font-size: 40px !important;
  color: var(--color-dark-blue);
}
#mobile-nav {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-white);
  z-index: 10001;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-black) 18%, transparent);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-100%);
}
#mobile-nav.open {
  display: flex;
  transform: translateX(0);
}
.mobile-nav-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0 16px;
  min-height: 64px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-light-gray);
}
.mobile-nav-search-group {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: 100%;
}
.mobile-nav-search-input {
  width: 100%;
  background: var(--color-white);
  border: none;
  font-size: 14px;
  font-family: var(--font-family-medium);
  font-weight: 500;
  padding: 10px 74px 10px 70px;
  margin: 0;
  box-sizing: border-box;
  border-radius: 8px;
  border-bottom: 1px solid var(--color-light-gray);
}

.mobile-nav-search-icon {
  font-size: 19px !important;
  position: absolute;
  right: 82px !important;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-medium-gray);
  pointer-events: none;
}
.mobile-nav-close {
  background: none;
  border: none;
  font-size: 32px;
  color: var(--color-dark-blue);
  cursor: pointer;
  margin-left: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav-actions {
  padding: 32px 24px 32px 70px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--color-white);
}
.mobile-nav-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-size: 20px;
  font-family: var(--font-family-medium);
  font-weight: 600;
  color: var(--color-dark-blue);
  background: var(--color-white);
  border: 2px solid var(--color-dark-blue);
  border-radius: 32px;
  padding: 18px 0;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.mobile-nav-action-btn:hover {
  background: var(--color-dark-blue);
  color: var(--color-white);
}

.mobile-nav-search-row {
  width: 100%;
  background: var(--color-white);
  margin: 0;
  padding: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--color-near-black);
  display: flex;
  align-items: center;
}

.mobile-nav-close-row {
  width: 100%;
  background: var(--color-light-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 33px 70px 20px 70px;
  border-bottom: 0;
}
.mobile-nav-close-text {
  font-size: 18px;
  font-family: var(--font-family-medium);
  font-weight: 500;
  color: var(--color-near-black);
}

.mobile-nav-link .material-symbols-outlined {
  font-size: 28px;
  color: var(--color-dark-blue);
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav-subheader-row {
  width: 100%;
  background: var(--color-light-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 33px 70px 20px 70px;
  min-height: 64px;
  border-bottom: 1px solid var(--color-light-gray);
}
.mobile-nav-back {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-family: var(--font-family-medium);
  font-weight: 700;
  color: var(--color-near-black);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mobile-nav-back .material-symbols-outlined {
  font-size: 32px;
  color: var(--color-near-black);
  margin-right: 2px;
}
.mobile-nav-subheader-row .mobile-nav-close {
  background: none;
  border: none;
  font-size: 32px;
  color: var(--color-near-black);
  cursor: pointer;
  margin-left: 53px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-viewall {
  font-size: 15px;
  font-family: var(--font-family-medium);
  font-weight: 500;
  color: var(--color-near-black);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.mobile-nav-heading {
  font-size: 32px;
  font-family: var(--font-family-medium);
  font-weight: 700;
  color: var(--color-near-black);
  padding: 22px 76px 23px 70px;
  margin: 0;
  background: var(--color-white);
}
.mobile-nav-list {
  /* flex: 1 1 auto; */
  overflow-y: auto;
  padding: 0 70px 0 70px;
  margin: 0;
  list-style: none;
  background: var(--color-white);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 24px 0;
  font-size: 22px;
  color: var(--color-near-black);
  font-family: var(--font-family-medium);
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  padding-left: 24px;
  padding-right: 24px;
  /* text-transform: lowercase; */
}
.mobile-nav-link span:first-letter{
  /* text-transform: capitalize; */
}
.mobile-nav-link .mobile-nav-arrow {
  font-size: 28px;
  color: var(--color-near-black);
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-link img {
  width: 28px;
  height: 28px;
  margin-right: 16px;
  object-fit: contain;
}
.mobile-nav-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-near-black);
  font-family: var(--font-family-medium);
}
/* Add/replace CSS for submenu flex layout */

.mobile-header-bar {
  display: none;
  background-color: var(--color-white);
}

#mobile-nav-toggle .material-symbols-outlined {
  color: var(--color-near-black);
}

/* Same cross-fade setup as the desktop logos — see note above. */
.mobile-logo-blue,
.mobile-logo-white {
  transition: opacity var(--header-scroll-transition-duration)
    var(--header-scroll-transition-ease);
}

.mobile-logo-blue {
  opacity: 1;
}

.mobile-logo-white {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

/* User Menu Dropdown */
.cj-header-user-menu {
  position: relative;
}

.cj-header-user-menu__menu {
  min-width: 200px;
  list-style: none;
  padding: 4px 0;
  margin: 8px 0 0 0;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1001;
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-black) 8%, transparent);
  border-radius: 8px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  overflow: hidden;
}

.cj-header-user-menu__menu[style*="block"],
.cj-header-user-menu__menu:not([style*="none"]) {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

.cj-header-user-menu__menu li {
  margin: 0;
  padding: 0;
}

.cj-header-user-menu__menu li:first-child .cj-header-user-menu__item {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.cj-header-user-menu__menu li:last-child .cj-header-user-menu__item {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.cj-header-user-menu__item,
.cj-header-user-menu__item-link {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  color: var(--color-near-black);
  text-decoration: none;
  transition: background-color 0.12s ease-out;
  position: relative;
  min-height: 40px;
}

.cj-header-user-menu__item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.cj-header-user-menu__toggle {
  font-family: var(--font-family-medium);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease-out;
  padding: 4px 0;
}

.cj-header-user-menu__toggle:hover {
  opacity: 0.85;
}
.cj-header-user-menu__toggle:focus,
.cj-header-user-menu__toggle:active {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
  color: var(--color-white);
}
.cj-header-user-menu__toggle .material-symbols-outlined {
  color: var(--color-white);
}

.cj-header-user-menu__welcome-text {
  font-weight: 400;
}

.cj-header-user-menu__name {
  font-weight: 500;
  text-transform: capitalize;
}

.cj-header-user-menu__expand-icon {
  font-size: 18px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cj-header-user-menu:has(.cj-header-user-menu__menu[style*="block"])
  .cj-header-user-menu__expand-icon {
  transform: rotate(180deg);
}

.cj-header-user-menu__item-text {
  font-family: var(--font-family-medium);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.cj-header-user-menu__item-icon {
  font-size: 18px;
  margin-right: 10px;
  color: var(--color-dark-blue);
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.15s ease-out,
    transform 0.15s ease-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-menu__active {
  background-color: color-mix(in srgb, var(--color-dark-blue) 8%, transparent);
  color: var(--color-dark-blue);
}

.user-menu-icon__active {
  opacity: 1;
  transform: scale(1);
}

.user-menu__active {
  background-color: rgba(0, 0, 0, 0.06);
  font-weight: 500;
}

span.material-symbols-outlined.text-white {
  color: var(--color-white) !important;
}
.header-logo > a{
  display: inline-block;
  /* Positioning context for the absolutely-stacked .desktop-logo-white overlay */
  position: relative;
}
/* ==========================================================================
   Sticky Header (Desktop only)
   --------------------------------------------------------------------------
   On scroll, `.site-header--scrolled` is toggled by header.js (with
   hysteresis to avoid oscillation). The white nav area compacts:
     - `.site-header__logo-nav-bar`  height   122.25px -> 84px
                                     padding-bottom  22px -> 0
     - `.site-header .header-logo img`  height  46px -> 33.87px
     - `.site-header`                   box-shadow  none -> subtle
   Only these *animatable* properties are declared in the transition lists;
   keyword-only changes (e.g. align-items, display) would be ignored anyway
   and are therefore omitted for clarity. Reduced-motion is handled globally
   in common.css.
   ========================================================================== */

@media (min-width: 1024px) {
  /* `position: fixed` (not sticky) is deliberate: it takes the header out
     of document flow so height changes on scroll (expanded <-> compact)
     NEVER push `<main>` up or down. Content shift on scroll-up was the
     main cause of the "snap back" feel — see client feedback. `<main>`
     reserves the space via `padding-top: var(--site-header-height-default)`
     in common.css on non-gradient pages. Gradient-hero pages keep working
     because their hero was already designed to render under a header that
     floats above the flow (the previous sticky also left the first viewport
     worth of space under the header, just via in-flow sizing instead).
     Transition timing uses the dedicated --header-scroll-transition-* tokens
     (360ms, ease-in-out) so the reverse scroll-up mirrors scroll-down in
     feel — the old 640ms mega-menu curve felt heavy here. */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    transition: box-shadow var(--header-scroll-transition-duration)
      var(--header-scroll-transition-ease);
  }

  /* Both scroll states centre their items; the resting bar reproduces its old
     `align-items: flex-end` position with padding instead
     (122.25 height - 22 padding-bottom - 46 item = 54.25 padding-top leaves a
     content box exactly one item tall, where centre == bottom). This matters
     because `align-items` is a keyword: flipping flex-end -> center on scroll
     applied on the first frame and teleported the logo ~27px up while the bar
     height was still easing, then eased the last 8px. Padding interpolates, so
     the same geometry now glides in one continuous motion. */
  .site-header__logo-nav-bar {
    align-items: center;
    padding-top: 54.25px;
    transition:
      height var(--header-scroll-transition-duration) var(--header-scroll-transition-ease),
      padding-top var(--header-scroll-transition-duration) var(--header-scroll-transition-ease),
      padding-bottom var(--header-scroll-transition-duration) var(--header-scroll-transition-ease),
      background-color var(--header-scroll-transition-duration) var(--header-scroll-transition-ease);
  }

  /* Also animate the 7px -> 0 container gap on scroll so nothing snaps. */
  .site-header__container {
    transition: padding-bottom var(--header-scroll-transition-duration)
      var(--header-scroll-transition-ease);
  }

  /* Pin the logo to a concrete height so it can animate smoothly
     (auto -> concrete px would snap instead of interpolating). Values come
     from --desktop-logo-height-default / --desktop-logo-height-scrolled in
     common.css. */
  .site-header .header-logo img {
    height: var(--desktop-logo-height-default, 46px);
    width: auto;
    transition: height var(--header-scroll-transition-duration)
      var(--header-scroll-transition-ease);
  }

  /* The wrapper tracks the <img> height in both states and animates with it.
     It used to stay pinned at 46px while the image shrank to 34px, which left
     the absolutely-positioned `.desktop-logo-white` overlay (top: 0) 6px above
     the vertically-centred blue one — visible as a hop mid cross-fade on
     gradient-hero pages. Keeping wrapper and image the same size also means the
     bar centres the logo by its real height, so nothing snaps when
     `.site-header--scrolled .header-logo` switches to flex. */
  .site-header .header-logo {
    height: var(--desktop-logo-height-default, 46px);
    min-height: 0;
    transition: height var(--header-scroll-transition-duration)
      var(--header-scroll-transition-ease);
  }

  .site-header--scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .site-header--scrolled .site-header__logo-nav-bar {
    height: 84px;
    max-width: 1248px;
    margin: 0 auto;
    align-items: center;
    padding-top: 0;
  }

  .site-header--scrolled .header-logo {
    width: 287px;
    margin: 0;
    min-height: auto;
    height: var(--desktop-logo-height-scrolled, 34px);
  }

  .site-header--scrolled .header-logo > a {
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    height: auto;
  width: 100%;
  }

  /* Shrink the logo in the scrolled/compact state. Transition is defined
     on the base `.site-header .header-logo img { transition: height ... }`
     rule above, so this height change animates smoothly both ways. This is
     the only declaration of the compact logo size; gradient-hero pages share
     it rather than redeclaring their own. */
  .site-header--scrolled .header-logo img {
    height: var(--desktop-logo-height-scrolled, 34px);
    width: auto;
  }

  .site-header--scrolled .site-header__container {
    padding-bottom: 0;
  }

  .site-header--scrolled .site-header__navigation {
    padding-bottom: 0;
    align-items: center;
    gap: 60px;
  }

  .site-header--scrolled .site-header__nav-link {
    padding-bottom: 0;
  }

  .site-header--scrolled .site-header__nav-list {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Media Queries
   --------------------------------------------------------------------------
   Three breakpoint system:
   1. Desktop: >=1024px (default/base styles, no media query needed)
   2. Mobile upto Tablet: <=1023px
   3. Tablet: >=878px and <=1023px
   ========================================================================== */

/* Desktop styles (>=1024px) - Base styles, no media query needed */

/* --------------------------------------------------------------------------
   Desktop: >=1024px
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Hide mobile header bar and navigation on desktop */
  .mobile-header-bar {
    display: none !important;
  }

  #mobile-nav-toggle {
    display: none !important;
  }

  #mobile-nav {
    display: none !important;
  }

  /* Ensure mobile nav stays hidden even if .open class is present */
  #mobile-nav.open {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Desktop Responsive: >=1024px and <1296px
   When viewport is between 1024px and container max-width (1248px),
   apply horizontal padding to prevent content from touching edges
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1296px) {
  .site-header__top-bar-container,
  .site-header__logo-nav-bar,
  .site-header__logo-nav-bar-container,
  .site-header__dropdown-panel-container,
  .standard-grid {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }

  /* The nav needs the horizontal room in this band, so the logo has to stay
     within 200px. Do it with the height variable, not an <img> max-width:
     capping the width while `height` was pinned to 46px squashed the Greenheck
     mark (720 x 134.27 = 5.362:1, so 46px tall is 246.66px wide) by 19%, and
     the compact state's `max-width: none` released the squash on the first
     frame — the logo snapped 47px WIDER before easing down to its 34px size.
     Driving the height keeps the aspect ratio correct at rest and lets the
     width follow the animated height. Scoped away from Valent, whose logo has
     a different ratio, already fits inside 200px and whose own stylesheet pins
     the header geometry in both states. */
  body:not(.valentair) {
    --desktop-logo-height-default: 37px;
  }

  .header-logo {
    max-width: 200px;
    margin-right: 32px;
  }

  .site-header__navigation-container {
    flex:1;
  }

  .site-header__navigation {
    gap: 32px;
  }

  .site-header__nav-list {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .site-header__nav-link {
    white-space: nowrap;
  }

  /* Scrolled state at narrow desktop */
  .site-header--scrolled .site-header__logo-nav-bar {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }

  .site-header--scrolled .site-header__navigation {
    gap: 32px;
  }

  /* Hold the wrapper box identical to its resting size in this band. It used to
     go 200px + 32px margin -> 287px + no margin on scroll, and since neither
     property is transitioned here that kicked the whole nav 55px sideways in a
     single frame. Width/margin now stay put; only the logo inside compacts. */
  .site-header--scrolled .header-logo {
    width: 200px;
    max-width: 200px;
    margin-right: 32px;
  }
}

/* --------------------------------------------------------------------------
   Mobile upto Tablet: <=1023px
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .mobile-nav-subheader-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Hide desktop header elements */
  .header-logo,
  .site-header__navigation,
  .site-header__top-bar {
    display: none !important;
  }

  /* Collapse the empty desktop logo/nav bar on mobile & tablet.
     Its children (.header-logo / .site-header__navigation) are hidden above,
     but without this reset the container would still reserve its desktop
     height (122.25px + 22px padding-bottom) and leave an empty gap at the
     top of the page. The actual mobile header is rendered separately via
     .mobile-header-bar (position: fixed). */
  .site-header__logo-nav-bar,
  .site-header__logo-nav-bar-container {
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  /* Site header styling */
  .site-header {
    border: 0;
    background-color: transparent;
  }

  /* Mobile header bar.
     `min-height` is locked to --mobile-header-height (declared in common.css)
     so the fixed bar's visible size stays in sync with the `margin-top`
     offset applied to `<main>` on the same breakpoints. Any child-size or
     container-padding change is absorbed by the variable, not by a silent
     drift between the bar and the page content. */
  .mobile-header-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: var(--mobile-header-height);
    background-color: var(--color-white);
    z-index: 2100;
    transition:
      background-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  /* Logo wrapper height is the single source of truth for mobile logo size.
     `--mobile-logo-height` is declared on :root in common.css (33px default,
     40px on tablet, 43px on gradient-hero tablet via
     header-transparent-overrides.css). The <img> below fills this wrapper
     via `height: 100%; width: auto`, so no <img>-level height rule is needed
     and no cascade war with `!important` is necessary. */
  .mobile-header-logo {
    display: block;
    height: var(--mobile-logo-height, 33px);
  }

  /* Positioning context for the absolutely-stacked .mobile-logo-white overlay */
  .mobile-header-logo > a {
    position: relative;
    display: inline-block;
  }

  .mobile-header-logo img {
    height: var(--mobile-logo-height, 33px);
    width: auto;
  }

  /* Mobile nav toggle */
  #mobile-nav-toggle {
    display: flex !important;
    height: 44px;
    width: 44px;
  }

  #mobile-nav-toggle .material-symbols-outlined {
    font-size: 40px !important;
    color: var(--color-dark-blue);
    transition: color 0.3s ease;
  }

  /* Mobile navigation */
  #mobile-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--color-white);
    z-index: 2101;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--color-black) 18%, transparent);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-100%);
    margin-top: 0 !important;
  }

  /* Scrollable region: keeps Log In / Find my rep in view; avoids 100vh overflow past fold */
  .mobile-nav-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }

  #mobile-nav.open {
    display: flex !important;
    transform: translateX(0) !important;
  }

  /* Mobile nav header row */
  .mobile-nav-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    min-height: auto;
    background: var(--color-light-gray);
    border-bottom: 1px solid color-mix(in srgb, var(--color-black) 10%, transparent);
    margin-top: 0 !important;
  }

  /* Mobile nav search */
  .mobile-nav-search-group {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    background: var(--color-white);
    border-radius: 4px;
    padding: 8px 12px;
  }

  .mobile-nav-search-input {
    flex: 1;
    width: 100%;
    background: transparent;
    border: none;
    font-size: 16px;
    font-family: var(--font-family-medium);
    font-weight: 400;
    color: var(--color-near-black);
    padding: 0;
  }

  .mobile-nav-search-input::placeholder {
    color: var(--color-medium-gray);
  }

  .mobile-nav-search-button {
    background: none;
    border: none;
    padding: 0;
    margin-left: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-medium-gray);
  }

  .mobile-nav-search-button .material-symbols-outlined {
    font-size: 24px;
  }

  .mobile-nav-search-row {
    margin-top: 0 !important;
  }

  /* Mobile nav close */
  .mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 32px;
    color: var(--color-dark-blue);
    cursor: pointer;
    margin-left: 16px;
    flex-shrink: 0;
  }

  .mobile-nav-close .material-symbols-outlined {
    font-size: 30px !important;
    color: var(--color-near-black);
  }
  .mobile-nav-close:hover .material-symbols-outlined {
    font-size: 30px !important;
    color: var(--color-dark-blue);
    transform: scale(1.1);
    transition: transform 0.4s ease-in-out;
  }
  .mobile-nav-back .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-near-black);
    margin-right: 2px;
    margin-top: -2px;
  }
  .mobile-nav-link .material-symbols-outlined {
    color: var(--color-near-black);
  }
  .mobile-nav-close-row {
    padding: 20px 24px 18px 24px;
    margin-top: 0 !important;
    display: flex; /* Always visible */
    align-items: center;
    justify-content: space-between;
    background: var(--color-light-gray);
    border-bottom: 1px solid color-mix(in srgb, var(--color-black) 8%, transparent);
  }

  .mobile-nav-close-row .mobile-nav-close {
    display: flex; /* Default visible, will be toggled by JS */
  }

  .mobile-nav-close-text {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-near-black);
  }

  .mobile-nav-close-row .mobile-nav-close .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-near-black);
  }
  .mobile-nav-viewall:hover {
    color: var(--color-dark-blue);
  }
  /* Mobile nav heading */
  .mobile-nav-heading {
    padding: 18px 24px 12px 24px;
    font-size: 28px;
    font-weight: 700;
    margin-top: 0 !important;
    background: var(--color-white);
    color: var(--color-near-black);
    max-width: calc(100% - 64px);
  }

  /* Mobile nav view all row */
  .mobile-nav-viewall-row {
    padding: 0 24px 0;
    background: var(--color-white);
    float: right;
    margin-top: -46px;
  }

  .mobile-nav-viewall-row .mobile-nav-viewall {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark-blue);
    text-decoration: none;
    margin-right: 0;
  }

  .mobile-nav-viewall-row .mobile-nav-viewall:hover {
    color: var(--color-dark-blue);
    text-decoration: underline;
  }

  .mobile-nav-subheader-row {
    margin-top: 0 !important;
    padding: 20px 24px 18px 24px;
    background: var(--color-light-gray);
    border-bottom: 1px solid color-mix(in srgb, var(--color-black) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-nav-back {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-near-black);
    font-size: 16px;
    font-weight: 400;
  }

  .mobile-nav-back .material-symbols-outlined {
    font-size: 20px;
  }

  .mobile-nav-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-near-black);
  }

  .mobile-nav-viewall {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark-blue);
    text-decoration: none;
    margin-right: 0;
  }

  .mobile-nav-subheader-row .mobile-nav-close .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-near-black);
  }

  /* Mobile nav list */
  .mobile-nav-list {
    overflow: visible;
    padding: 0 24px;
    margin: 0;
    list-style: none;
  }

  .mobile-nav-item {
    border-bottom: 1px solid var(--color-light-gray);
  }

  .mobile-nav-item:last-child {
    border-bottom: none;
  }

  /* Mobile nav link */
  .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 18px;
    color: var(--color-near-black);
    font-family: var(--font-family-medium);
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.15s;
  }

  .mobile-nav-link img {
    display: none;
  }

  .mobile-nav-add {
    font-size: 24px !important;
  }

  .mobile-nav-arrow {
    font-size: 28px !important;
  }

  /* Mobile nav back */
  .mobile-nav-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0px 1px 0 0;
    font-size: 18px;
    color: var(--color-dark-blue);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-family-medium);
    font-weight: 500;
  }

  /* Mobile nav actions */
  .mobile-nav-actions {
    flex-shrink: 0;
    padding: 16px 24px calc(24px + env(safe-area-inset-bottom, 0px)) 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--color-white);
    border-top: 1px solid var(--color-light-gray);
    box-shadow: 0 -4px 16px color-mix(in srgb, var(--color-black) 6%, transparent);
  }

  .mobile-nav-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    font-size: 17px;
    font-weight: 600;
    padding: 14px 24px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-family: var(--font-family-medium);
    font-weight: 500;
    color: var(--color-dark-blue);
    background: var(--color-white);
    border: 1px solid var(--color-dark-blue);
    border-radius: 32px;
    padding: 12px 0;
    text-decoration: none;
    transition:
      background 0.15s,
      color 0.15s;
  }

  .mobile-nav-action-btn:hover {
    background: var(--color-dark-blue);
    color: var(--color-white);
  }

  .mobile-nav-action-btn .material-symbols-outlined {
    font-size: 18px !important;
    color: var(--color-dark-blue);
  }

  .mobile-nav-action-btn:hover .material-symbols-outlined {
    color: var(--color-white);
  }

  /* Style LOG IN button with solid blue background */
  #mobile-login-btn {
    background: var(--color-dark-blue);
    color: var(--color-white);
    border: 2px solid var(--color-dark-blue);
    text-transform: uppercase;
    font-family: var(--font-family-bold);
    border-radius: 6px;
    height: 52px;
  }

  #mobile-login-btn .material-symbols-outlined {
    color: var(--color-white);
  }

  #mobile-login-btn:hover {
    background: var(--color-white);
    border-color: var(--color-dark-blue);
    color: var(--color-dark-blue);
  }
  #mobile-login-btn:hover .material-symbols-outlined {
    color: var(--color-dark-blue);
  }

  /* Style FIND MY REP button with outline style */
  #mobile-find-rep-btn {
    background: var(--color-white);
    color: var(--color-dark-blue);
    border: 2px solid var(--color-dark-blue);
    text-transform: uppercase;
    font-family: var(--font-family-bold);
    font-weight: 700;
    border-radius: 6px;
    height: 52px;
  }

  #mobile-find-rep-btn .material-symbols-outlined {
    color: var(--color-dark-blue);
  }

  #mobile-find-rep-btn:hover {
    background: var(--color-dark-blue);
    color: var(--color-white);
  }

  #mobile-find-rep-btn:hover .material-symbols-outlined {
    color: var(--color-white);
  }

  /* Mobile user menu wrapper (when logged in) */
  .mobile-user-menu-wrapper {
    width: 100%;
    border-bottom: 1px solid var(--color-light-gray);
    display: flex !important; /* Always visible when logged in */
    background: var(--color-light-gray);
  }

  /* Hide close buttons in navigation headers when user is logged in */
  #mobile-nav.user-logged-in #mobile-nav-close-button,
  #mobile-nav.user-logged-in #mobile-nav-close-button-view-all-level,
  #mobile-nav.user-logged-in #mobile-nav-close-button-menu-level {
    display: none !important;
  }

  /* Fallback for browsers that support :has() selector */
  #mobile-nav-header-container:has(.mobile-user-menu-wrapper)
    #mobile-nav-close-button,
  #mobile-nav-header-container:has(.mobile-user-menu-wrapper)
    #mobile-nav-close-button-view-all-level,
  #mobile-nav-header-container:has(.mobile-user-menu-wrapper)
    #mobile-nav-close-button-menu-level {
    display: none !important;
  }

  .mobile-user-menu-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 16px 0 24px;
    width: 100%;
  }

  .mobile-user-menu-wrapper .cj-header-user-menu {
    flex: 1;
    position: relative;
  }

  .mobile-user-menu-wrapper .cj-header-user-menu__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0 20px 0;
    text-decoration: none;
    color: var(--color-near-black) !important;
    cursor: pointer;
  }

  .cj-header-user-menu__toggle .material-symbols-outlined {
    color: var(--color-dark-gray);
  }

  /* Floating dropdown menu */
  .mobile-user-menu-wrapper .cj-header-user-menu__menu {
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-black) 10%, transparent);
    border-radius: 8px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 12%, transparent);
    padding: 0;
    z-index: 100;
    display: none;
    min-width: 280px;
    max-height: 400px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  }

  /* Show menu when active */
  .mobile-user-menu-wrapper .cj-header-user-menu__menu[style*="display: block"],
  .mobile-user-menu-wrapper
    .cj-header-user-menu.active
    .cj-header-user-menu__menu {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
  }

  /* Rotate expand icon when menu is open */
  .mobile-user-menu-wrapper
    .cj-header-user-menu.active
    .cj-header-user-menu__expand-icon {
    transform: rotate(180deg);
  }

  .mobile-user-menu-wrapper .cj-header-user-menu__expand-icon {
    transition: transform 0.2s ease;
  }

  .mobile-user-menu-wrapper .cj-header-user-menu__item {
    padding: 16px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-black) 6%, transparent);
    background: var(--color-white);
    transition: background-color 0.2s ease;
  }

  .mobile-user-menu-wrapper .cj-header-user-menu__item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .mobile-user-menu-wrapper .cj-header-user-menu__item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .mobile-user-menu-wrapper .cj-header-user-menu__item:hover {
    background: color-mix(in srgb, var(--color-dark-blue) 4%, transparent);
  }

  .mobile-user-menu-wrapper .cj-header-user-menu__item-link {
    color: var(--color-near-black);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Hide mobile login button when user is logged in */
  #mobile-login-btn[style*="display: none"] {
    display: none !important;
  }

  /* Add padding to main content to account for fixed mobile header bar */
  body > main {
    /* padding-top: 140px; */
  }
}

/* --------------------------------------------------------------------------
   Phone: <=877px (tighter horizontal rhythm than the 878–1023px tablet tier)
   -------------------------------------------------------------------------- */
@media (max-width: 877px) {
  .mobile-nav-close-row,
  .mobile-nav-subheader-row {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mobile-nav-viewall-row {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mobile-nav-heading {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 22px;
    max-width: none;
  }

  .mobile-nav-list {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mobile-nav-actions {
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)) 16px;
  }

  .mobile-nav-link {
    font-size: 17px;
    padding: 14px 0;
  }
}

/* --------------------------------------------------------------------------
   Tablet: >=878px and <=1023px
   -------------------------------------------------------------------------- */
@media (min-width: 878px) and (max-width: 1023px) {
  /* Apply tablet padding to header containers */
  .site-header__top-bar-container,
  .site-header__logo-nav-bar,
  .site-header__logo-nav-bar-container,
  .site-header__dropdown-panel-container,
  .standard-grid {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }

  .mobile-nav-header-row {
    padding: 24px 60px 20px 60px;
  }

  .mobile-nav-close-row,
  .mobile-nav-subheader-row {
    padding: 24px 60px 22px 60px;
  }

  .mobile-nav-heading {
    padding: 24px 60px 16px 60px;
    font-size: 32px;
  }

  .mobile-nav-list {
    padding: 0 60px;
  }

  .mobile-nav-link {
    padding: 20px 0;
    font-size: 20px;
  }

  .mobile-nav-actions {
    padding: 32px 60px calc(40px + env(safe-area-inset-bottom, 0px)) 60px;
  }

  .mobile-nav-action-btn {
    font-size: 18px;
    padding: 16px 24px;
  }

  /* User menu dropdown on tablet */
  .mobile-user-menu-row {
    padding: 24px 60px 0 60px;
  }

  .mobile-user-menu-wrapper .cj-header-user-menu__menu {
    min-width: 320px;
    max-width: 400px;
  }
}