/** Custom Tabs Styles **/
.js-tabs {
  margin: 1em 0;
}

/* The nav is the "bar": one bordered strip, tabs joined edge to edge.
   The 1px gap lets the nav's own background show through as the divider
   between tabs -- which keeps working when the bar wraps onto more rows,
   where per-tab borders would double up against the container edge. */
.js-tabs .tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  background: #dcdcdc;
  border: 1px solid #dcdcdc;
  border-radius: var(--button_border_radius, 5px);
  overflow: hidden;
}

/* Grow to fill the row; every row stays flush because flex-grow is
   applied per line, so the last row fills too. */
.js-tabs .tab-nav > li {
  display: flex;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.js-tabs .tab-link {
  display: block;
  width: 100%;
  padding: 0.7em 1em;
  border: 0;
  border-radius: 0;
  background: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  color: #333;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--base_transition_time, 0.3s),
              color var(--base_transition_time, 0.3s);
}

.js-tabs .tab-link:hover {
  background: #f2f2f2;
  color: #000;
}

.js-tabs .tab-link.is-active,
.js-tabs .tab-link.is-active:hover {
  background: var(--primary_color, #7c1c0e);
  color: #fff;
}

/* Inset ring: the bar clips its overflow to get rounded corners, so an
   outward offset would be cut off. White on the active tab, red elsewhere. */
.js-tabs .tab-link:focus-visible {
  outline: 2px solid var(--primary_color, #7c1c0e);
  outline-offset: -2px;
}

.js-tabs .tab-link.is-active:focus-visible {
  outline-color: #fff;
}

.js-tabs .tab-panel {
  display: none;
  padding: 0;
}

.js-tabs .tab-panel.is-active {
  display: block;
}

.js-tabs .tab-panel:focus-visible {
  outline: none;
}

/* Before tabs.js runs, and if JS fails entirely, show every panel rather
   than hiding all content behind tabs that cannot be clicked. */
.js-tabs:not([data-tabs-ready]) .tab-panel {
  display: block;
}

.js-tabs:not([data-tabs-ready]) .tab-nav {
  display: none;
}