.menu-guide-right-wrapper {
  padding-bottom: 3rem;
}
.supper-navigation {
  height: calc(100vh - 6rem);
  transition: opacity 240ms ease, transform 240ms ease;
  opacity: 1;
  transform: translateY(0);
}

.supper-navigation.is-rebuilding {
  opacity: 0;
  /*transform: translateY(6px);*/
}

/* Scale container */
.supper-nav-scale {
  position: relative;
  height: calc(100vh - 15rem);
  width: 100%;
}

/* Base tick (each 10px) */
.supper-nav-tick {
  position: absolute;
  right: 0; /* ticks are on the right side */
  width: 0.75rem; /* shelf length */
  height: 1px;
  background: #d3d3d3; /* default color */
  opacity: 1;
}

/* H3 marker tick */
.supper-nav-tick.is-h3-state {
  height: 2px; /* a bit bolder than base ticks */
  cursor: pointer;
  background: #262626;
  width: 1rem; /* shelf length */
}

/* Active marker tick (color change only) */
.supper-nav-tick.is-h3-state.is-active {
  background: #2e23ff;
  width: 1rem;
}

/* Label placed left from the tick:
   0.75rem (tick length) + 0.5rem gap = 1.25rem */
.supper-nav-label {
  position: absolute;
  right: 1.45rem;
  top: 50%;
  transform: translateY(-50%); /* keeps vertical centering vs tick */
  min-width: 22rem;
  max-width: 22rem;
  white-space: normal; /* allow wrapping */
  overflow-wrap: anywhere; /* break long words if needed */
  word-break: break-word;
  text-align: left;
  cursor: pointer;
}
.supper-nav-label:hover {
  color: #2e23ff;
}
/* Optional: if you want the label to also visually change on active */
.supper-nav-tick.is-h3-state.is-active .supper-nav-label {
  color: #2e23ff;
}

.supper-nav-tick.is-here-me {
  background: #2e23ff; /* blue */
  width: 1.25rem;
}
@media screen and (max-width: 1440px) {
  .supper-nav-label {
    min-width: 12rem;
    max-width: 12rem;
  }
}