/* =================== hc-tabs.css =================== */
.hc-tabs__nav {
display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--hc-line); scrollbar-width: none
}
.hc-tabs__btn.is-active {
color: var(--hc-ink); border-bottom-color: var(--hc-ink)
}

.hc-tabs__panel {
padding-top: var(--hc-sp-5)
}
.hc-tabs__loader {
margin: var(--hc-sp-5) auto
}

.hc-tabs {
display: flex;
  border-bottom: 1px solid var(--hc-line);
  gap: var(--hc-sp-2);
  overflow-x: auto;
}
.hc-tabs__tab {
position: relative;
  padding: var(--hc-sp-3) var(--hc-sp-5);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--hc-fs-md);
  font-weight: 500;
  color: var(--hc-ink-soft);
  transition: color var(--hc-dur-base) var(--hc-ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.hc-tabs__tab:hover {
color: var(--hc-ink);
}
.hc-tabs__tab.is-active {
color: var(--hc-ink);
}
.hc-tabs__tab.is-active::after {
content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hc-ink);
  animation: hcTabSlide var(--hc-dur-base) var(--hc-ease);
}
.hc-tabs__panel {
display: none;
  animation: hcFadeIn var(--hc-dur-base) var(--hc-ease);
}
.hc-tabs__panel.is-active {
display: block;
}
.hc-tabs.hc-tabs--premium {
border-bottom: 1px solid rgba(141, 109, 71, 0.16);
}
.hc-tabs__btn.is-active {
color: var(--hc-ink, #1a1714);
  border-bottom-color: var(--hc-accent, #8b7355);
  font-weight: 500;
}

.hc-tabs__btn.is-active .hc-tabs__count {
background: var(--hc-ink); color: var(--hc-paper, #ffffff)
}