/* Product Search Container */
div#tabsearch {
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--primary);
    padding: 20px;
}

.tab-buttons {
    margin-bottom: 20px;
}

.tablink {
    background-color: transparent;
    border-radius: 5px;
    color: var(--wp--preset--color--primary);
    border: 1px solid var(--wp--preset--color--primary);
    cursor: pointer;
    padding: 10px 15px;
    transition: 0.3s;
}

.tablink:hover {
    background-color: #ddd;
}

.tablink.active {
    background-color: var(--wp--preset--color--primary);
    color: #fff;
    border-radius: 5px;
}

.tabcontent {
    display: none;
    padding: 20px 10px;
}
/* Parent container styling */
/*
.oemBrandDimensions-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
*/
.brand-list {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap onto the next line */
    gap: 10px; /* Space between each 'button' */
    list-style-type: none; /* Remove bullet points */
    padding-left: 0; /* Remove default padding from the list */
    text-transform: uppercase;
}

/* Each 'button' takes up roughly a third of the container, minus the gaps */
.brand-list li {
    flex: 1 1 calc(18.3333% - 10px);
    margin-bottom: 10px; /* Space at the bottom to separate rows */
}

/* Hide the actual radio input */
.brand-list input[type="radio"] {
    display: none;
}

/* Style the label to look like a button */
.brand-list label {
    display: block;
    padding: 10px 15px;
    border: 2px solid var(--wp--preset--color--primary);
    background-color: #f5f5f5;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s; /* For a smooth color transition effect */
}

/* Style for when the 'button' is hovered */
.brand-list label:hover {
    background-color: var(--wp--preset--color--primary);
    color: #fff;
}

/* Style for when the 'button' is active/selected */
.brand-list input[type="radio"]:checked + label {
    background-color: var(--wp--preset--color--primary); /* Example active background color */
    color: #fff; /* Example active text color */
    border-color: #0069D9; /* Example active border color */
}