html[data-accent-color='orange'] {
  /* Primary accent */
  --accent-9: #f79d00;

  --accent-a2:  rgba(247, 157, 0, 0.15);
  --accent-a3:  rgba(247, 157, 0, 0.27);
  --accent-a9:  rgba(247, 157, 0, 0.81);
  --accent-a11: rgba(247, 157, 0, 0.92);
}

/* Light mode + orange accent: DocSearch uses orange warm palette */
html.light[data-accent-color='orange'] {
  --docsearch-primary-color: var(--accent-9);
  --docsearch-soft-primary-color: var(--accent-a2);
  --docsearch-highlight-color: var(--accent-9);
  --docsearch-hit-highlight-color: var(--accent-a2);
  --docsearch-focus-color: var(--accent-a11);
  --docsearch-logo-color: var(--accent-9);

  --docsearch-background-color: #ffeedb;
  --docsearch-modal-background: #fff7ec;
  --docsearch-searchbox-background: #fff7ec;
  --docsearch-searchbox-focus-background: #fff7ec;

  --docsearch-text-color: #2b1a16;
  --docsearch-secondary-text-color: #6a4e3f;
  --docsearch-subtle-color: #e8d8c7;
  --docsearch-muted-color: #b08a6a;
  --docsearch-muted-color-darker: rgba(176, 138, 106, 0.25);
  --docsearch-icon-color: #6a4e3f;
  --docsearch-key-background: #ffeedb;
  --docsearch-key-color: #6a4e3f;
}

/* Dark mode + orange accent: FORCE the same palette for the popup */
/* html.dark[data-accent-color='orange'] {
  --docsearch-highlight-color: var(--accent-9);
} */

/* Dark mode – force DocSearch to use the *same* palette as light mode */
html.dark[data-accent-color='orange'] {
  --docsearch-primary-color: var(--accent-9) !important;
  --docsearch-soft-primary-color: var(--accent-a2) !important;
  --docsearch-highlight-color: var(--accent-9) !important;
  --docsearch-hit-highlight-color: var(--accent-a2) !important;
  --docsearch-focus-color: var(--accent-a11) !important;
  --docsearch-logo-color: var(--accent-9) !important;

  --docsearch-background-color: #ffeedb !important;
  --docsearch-modal-background: #fff7ec !important;
  --docsearch-searchbox-background: #fff7ec !important;
  --docsearch-searchbox-focus-background: #fff7ec !important;

  --docsearch-text-color: #2b1a16 !important;
  --docsearch-secondary-text-color: #6a4e3f!important;
  --docsearch-subtle-color: #e8d8c7 !important;
  --docsearch-muted-color: #b08a6a !important;
  --docsearch-muted-color-darker: rgba(176, 138, 106, 0.25) !important;
  --docsearch-icon-color: #6a4e3f !important;
  --docsearch-key-background: #ffeedb !important;
  --docsearch-key-color: #6a4e3f !important;
  --docsearch-hit-background: #ffeedb !important;
  --docsearch-footer-background: #ffeedb !important;
}

/* Style Sign In inside .sy-head-actions as a button */
.sy-head-actions li.link a[href="https://my.contact.center"] {
    padding: 0.35rem 1.1rem;
    border-radius: 999px;
    background: var(--sy-c-accent, #2563eb);
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Hover state */
.sy-head-actions li.link a[href="https://my.contact.center"]:hover {
    opacity: 0.9;
}

.cc-header {
  background: var(--deep-blue);
  padding: 16px 80px;
}

@media(max-width: 1320px) {
  .cc-header {
    padding: 16px 20px;
  }
}

.cc-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
  width: 100%;
}

.cc-header__logo-desktop {
  display: block;
}

@media(max-width: 600px) {
  .cc-header__logo-desktop {
    display: none;
  }
}

.cc-header__logo-mobile {
  display: none;
}

@media(max-width: 600px) {
  .cc-header__logo-mobile {
    display: block;
  }
}

.cc-header__button-wrapper {
  max-width: 260px;
  width: 100%;
}

@media(max-width: 1320px) {
  .cc-header__button-wrapper {
    max-width: 130px;
  }
  .cc-header__button-wrapper a {
    height: 36px;
  }
}

.cc-header__button-wrapper {
  max-width: 260px;
  width: 100%;
  margin-left: 12px; /* space after theme switch */
}

.cc-header__button {
  /* reuse your existing .styles_button__hA4I3 styles; this is only for fine-tuning */
  font-size: 15px;
  height: 40px;
}

@media screen and (max-width: 1320px) {
  .cc-header__button-wrapper {
    max-width: 130px;
  }
  .cc-header__button {
    height: 36px;
    font-size: 14px;
  }
}

/* Header button that matches the FIRST Shibuya button inside .container.buttons */

/* Wrapper: just controls width/position in header */
.cc-header__button-wrapper {
  margin-left: 12px;           /* space after theme switch */
}

/* Copy of .container.buttons a + .container.buttons a:first-child */
.cc-header-btn {
  /* Base button style (copied from .container.buttons a) */
  border: 2px solid var(--sy-c-border);
  background-color: var(--sy-c-surface);
  border-radius: 2.6rem;
  padding: 0 2rem;
  font-weight: 600;
  font-size: 18px;
  line-height: 2.6rem;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
  white-space: nowrap;
  box-sizing: border-box;
  text-decoration: none;

  /* “first child” accent look (copied from .container.buttons a:first-child) */
  background-color: var(--accent-9);
  border-color: var(--accent-9);
}

/* hover active button style changes */
.cc-header-btn:hover {
  background-color: var(--orange-hover);
}

.container.buttons a:hover {
  background-color: var(--orange-hover);
}

.cc-header-btn:active {
  filter: brightness(0.95);
}

/* make the sora font for the sd cards */
.yue .sd-card-title {
    font-family: Sora;
}