/* Product tabs: role="tablist" list plus a two-column content grid. */

.st-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: var(--st-rule);
}

.st-tabs__tab {
  min-height: var(--st-h-touch);
  padding: 0 18px;
  background: none;
  border: 0;
  color: var(--st-ink);
  font-size: var(--st-size-body-sm);
  font-weight: var(--st-weight-bold);
  cursor: pointer;
  transition: background-color var(--st-transition), color var(--st-transition);
}

.st-tabs__tab:hover,
.st-tabs__tab:active {
  background: var(--st-accent-tint);
}

.st-tabs__tab[aria-selected="true"] {
  background: var(--st-ink);
  color: var(--st-surface);
}

.st-tabs__panel {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  padding-block: 24px;
}

/*
 * `.st-tabs__panel` and base.css's `[hidden] { display: none }` are equal
 * specificity (0,1,0 each); tabs.css loads after base.css (Assets.php:
 * every component depends on 'sleeptime-base'), so without this,
 * `display: grid` above wins the tie and a `hidden` panel stays visually
 * rendered — confirmed live: `panel.hidden` and `hasAttribute('hidden')`
 * both true, `getComputedStyle(panel).display` still "grid". This
 * combined selector's specificity (0,2,0) beats both unconditionally,
 * regardless of stylesheet order.
 */
.st-tabs__panel[hidden] {
  display: none;
}

@media (max-width: 899px) {
  .st-tabs__panel {
    grid-template-columns: 1fr;
  }
}