.tabs {
    width: 100%;
    background: var(--hs-palette-secondary-main);
    padding: var(--hs-spacing-base);
}

@media (min-width: 960px) {
    /* 64px - same vertical rhythm as the rest of the site's sections */
    .tabs {
        padding: calc(var(--hs-spacing-large) * 4);
    }
}

.tabs__header {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--hs-palette-grey-300);
    margin-bottom: calc(var(--hs-spacing-base) * 4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tabs__header::-webkit-scrollbar {
    display: none;
}

.tabs__button {
    padding: calc(var(--hs-spacing-base) * 2) calc(var(--hs-spacing-base) * 4);
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--hs-font-size-body);
    font-weight: var(--hs-font-weight-medium);
    color: var(--hs-palette-grey-600);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.tabs__button:hover {
    color: var(--hs-palette-text-primary);
}

.tabs__button.is-active {
    color: var(--hs-palette-text-primary);
    border-bottom-color: var(--hs-palette-primary-main);
}

.tabs__panels {
    width: 100%;
}

.tabs__panel {
    display: none;
}

.tabs__panel.is-active {
    display: block;
}

/* Specifications table styling within tabs.
   display block + overflow-x: long unbreakable values (e.g. catalogue URLs)
   scroll horizontally instead of blowing up the page width on small screens */
.tabs .product-view-specifications__table {
    width: 100%;
    display: block;
    overflow-x: auto;
}

.tabs .product-view-specifications__table tbody {
    display: table;
    width: 100%;
}

.tabs .product-view-specifications__table-cell {
    border: 1px solid var(--hs-palette-grey-300);
    border-width: 1px 0;
    vertical-align: top;
    padding: calc(var(--hs-spacing-base) * 2);
}

.tabs .product-view-specifications__table-cell-type {
    background: var(--hs-palette-grey-200);
    width: 40%;
}

.tabs .product-view-specifications__table-cell-value {
    width: 60%;
}

@media (min-width: 960px) {
    .tabs .product-view-specifications__table-cell-type {
        width: 25%;
    }

    .tabs .product-view-specifications__table-cell-value {
        width: 75%;
    }
}