.tabbed-content-details-container {display: block;}

.tabbed-content-summary {display: flex;align-items: center;justify-content: space-between;gap: var(--size-12);padding: var(--size-12) 0;}
.tabbed-content-summary .icon__arrow,
.tabbed-content-summary .icon__minus {width: 16px;height: 16px;}

.tabbed-content-details + .tabbed-content-details {border-top: 1px solid rgba(var(--color-text), 0.08);}

.tabbed-content-panel {padding: var(--size-12) 0;}

/* Empty below 960px - tabbed-content.js only relocates panels into here at
   the desktop breakpoint, leaving each panel inside its own <details> (a
   plain accordion) on mobile. */
.tabbed-content-panels {display: none;}

@media (min-width:960px) {
    /* Once tabbed-content.js moves each panel out into .tabbed-content-panels,
       every <details> here holds nothing but its own <summary> - so this is
       just an ordinary flex row of compact, content-sized tab labels, with
       no shared grid/flex track connecting it to the panel content below (an
       earlier version shared tracks between the label row and the panel,
       which is what let the label sizes get pulled around by whichever
       panel's content was showing). */
    .tabbed-content-details-container {display: flex;flex-wrap: wrap;justify-content: center;}
    .tabbed-content-details + .tabbed-content-details {border-top: 0;}

    .tabbed-content-summary {justify-content: center;margin: 0 var(--size-12);padding: var(--size-12);opacity: 0.5;border-bottom: 2px solid transparent;transition: all ease-out var(--speed-fast);}
    .tabbed-content-summary .icon__arrow,
    .tabbed-content-summary .icon__minus {display: none;}

    .tabbed-content-details[open] > .tabbed-content-summary {opacity: 1;border-color: var(--color-body);}

    .tabbed-content-panels {display: block;width: 100%;}
    .tabbed-content-panels .tabbed-content-panel {padding: var(--size-48) 0;}

    .style-2 .tabbed-content-summary {background-color: white;border: 1px solid var(--color-body);margin-left: 0;margin-right: 0;font-family: var(--font-family-sans);font-size: var(--font-size-h5);letter-spacing: 1px;text-transform: uppercase;}
    .style-2 .tabbed-content-details[open] > .tabbed-content-summary {background-color: var(--color-body);color: white;}
}
