/* ==========================================================================
   GNC SG — Content Tabs (PDP Description / Specification)
   ========================================================================== */

.field-group-tabs-wrapper {
  margin-top: var(--space-10);
}

/* ---- Tab nav ---- */

/* Hairline under the whole bar, with the active tab's red rule sitting on top
   of it — measured 1px #EEEEEE in design/tabs-section.png, and the tabs are
   spaced ~48px apart. */
.horizontal-tabs__menu,
.field-group-tabs .horizontal-tabs-list {
  display: flex;
  gap: var(--space-12);
  border-bottom: 1px solid var(--color-border-light);
  padding: 0;
  margin: 0 0 var(--space-6);
  list-style: none;
}

.horizontal-tabs__menu-item,
.horizontal-tabs-list__item {
  position: relative;
}

.horizontal-tabs__menu-item a,
.horizontal-tabs-list__item a {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-light);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast),
              border-color var(--transition-fast);
}

.horizontal-tabs__menu-item a:hover,
.horizontal-tabs-list__item a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Active tab */
.horizontal-tabs__menu-item.is-active a,
.horizontal-tabs__menu-item.selected a,
.horizontal-tabs-list__item.is-active a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ---- Tab content ---- */

.horizontal-tabs__pane,
.field-group-tab .details-wrapper {
  padding-top: var(--space-4);
}

/* ---- Category filter tabs (Education Hub) ---- */

.category-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.category-tabs__item {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
  white-space: nowrap;
}

.category-tabs__item:hover {
  background-color: var(--color-grey-100);
  text-decoration: none;
}

.category-tabs__item.is-active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ==========================================================================
   Mobile PDP tab bar (design/mobile/pdp/pdp.png, drawn at 375px)
   ==========================================================================
   Two tabs, so nothing needs to scroll or wrap — only the bar's proportions
   change. Measured: 16px labels 24px apart, the active tab's red rule 2px
   rather than 3px, and the whole bar 42px tall against the desktop's 51px.
   ========================================================================== */

@media (max-width: 767px) {
  .horizontal-tabs__menu,
  .field-group-tabs .horizontal-tabs-list {
    gap: var(--space-6);
  }

  .horizontal-tabs__menu-item a,
  .horizontal-tabs-list__item a {
    padding: var(--space-2) 0;
    border-bottom-width: 2px;
  }
}

/* Mobile: horizontally scrollable */
@media (max-width: 767px) {
  .category-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
  }

  .category-tabs::-webkit-scrollbar {
    display: none;
  }
}