/* Brand category switcher shared by the DaYi and BigJiang About pages. */
#dayi-about-brand-switcher {
  position: fixed;
  z-index: 999;
  top: var(--dayi-about-header-height, 70px);
  right: 0;
  left: 0;
  pointer-events: none;
}

.dayi-about-brand-switch {
  display: flex;
  width: 100%;
  min-height: 76px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin: 0;
  padding: .9rem max(1.25rem, calc((100% - 1240px) / 2));
  color: #06271d;
  background: transparent;
  border: 0;
  pointer-events: auto;
}

.dayi-about-brand-switch__label {
  color: #3b574e;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
}

.dayi-about-brand-switch__buttons {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.dayi-about-brand-switch__button {
  display: inline-flex;
  min-width: 112px;
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: .65rem 1.3rem;
  color: #06271d !important;
  background: transparent;
  border: 1px solid #aebfb7;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none !important;
  transition: .2s ease;
}

.dayi-about-brand-switch__button:hover,
.dayi-about-brand-switch__button:focus-visible,
.dayi-about-brand-switch__button.is-active {
  color: #ffffff !important;
  background: #005538;
  border-color: #005538;
}

@media (max-width: 600px) {
  .dayi-about-brand-switch {
    min-height: 0;
    flex-direction: column;
    gap: .75rem;
    padding: .7rem 1rem;
  }

  .dayi-about-brand-switch__button {
    min-width: 105px;
    min-height: 40px;
  }
}