/* START - Display product page optionsets as buttons instead of radio buttons */

/* Hide the actual radio buttons */
.optionSet .btn .option-radio {
    display: none;
}

/* style the label as a button */
.optionSet .form-check-label.btn {
    cursor: pointer;
    margin-right: 5px;
    margin-bottom:10px;
    border-radius: 25px;
    font-size: .9rem;    
}

/* selected state */
.optionSet .form-check-label.btn.selected {
    background-color: var(--bs-dark);
    color: white;
    border-color: var(--bs-dark);
}

/* Style the <label> when it has a disabled <input> child */
.optionSet label.btn:has(input[disabled]) {
    cursor: not-allowed !important;
    text-decoration: line-through !important;
    background-color: transparent !important;
    color: #6c757d !important;
    border-color: #6c757d !important;
}
/* END */


/* START - Display color dropdown in multiple columns */
@media (max-width: 767.98px) {
    #productForm .optionSet .dropdown-menu.multi-column.show .dropdown-item {
        border: 1px solid #ccc;
        display: flex;
        white-space: normal;
        height: 100%;
    }
}

    /* Default single column */
#productForm .optionSet .dropdown-menu.multi-column.show {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-top: 0;
    width: 100%;
}

    /* Two columns for medium screens and up */
    @media (min-width: 768px) {
        #productForm .optionSet .dropdown-menu.multi-column.show {
            grid-template-columns: repeat(3, 1fr);
            column-gap: 20px; /* Adjust the gap between columns */
        }
    }

    /* Three columns for large screens and up */
    @media (min-width: 992px) {
        #productForm .optionSet .dropdown-menu.multi-column.show {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    /* END */