/* =========================================================
   TABS.CSS
   =========================================================

   Category/subcategory catalogue tabs.

   Desktop keeps the familiar tabbed catalogue feel.
   Mobile scrolls horizontally instead of stacking into a very
   long list above the products.

   ========================================================= */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin: 20px 0;
}

.tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 14px;

    background: var(--wwd-colour-dark-blue);
    border: 1px solid #cccccc;

    color: var(--wwd-colour-white);	
    font-size: 18 px;
    font-weight: bold;
    text-decoration: none;

    white-space: nowrap;
}

.tabs a:hover {
    background: var(--wwd-colour-light-blue);
}

.tabs a.active {
    background: var(--wwd-colour-button-gradient-edge);
    border-color: #333333;
    color: var(--wwd-colour-white);
}

@media (max-width: 700px) {

    .tabs {
        flex-wrap: nowrap;

        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 6px;

        -webkit-overflow-scrolling: touch;
    }

    .tabs a {
        flex: 0 0 auto;
    }
}