#customizeTitle {
    padding-bottom: 5px;
    border-bottom:  2px solid #ccc;
    margin-bottom: 20px;
}

.product-info-stock-sku {
    padding-top: 5px;
}

.ar500-bundle-options .ar-bopt-container > .label {
    border-bottom: 0;
    margin-bottom: 2px;
}

/*
Don't like this, rather fill up the remaining area.
Maybe a better solution is make the picture bigger?  There's drawbacks to that too.
.ar500-bundle-options.bundle-options-container {
    max-width: 400px;
}
*/

/* these need to be visible via js, but we can hide them here */
/*
.ar-bopt-selections {
    height: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
}
*/

.ar-bopt-properties .ar-bopt-property {
    flex-wrap: wrap;
}
.ar-bopt-properties .ar-bopt-property-values {
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
}

.ar-bopt-property-values .ar-bopt-property-value {
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: left;
    border: 3px solid #ccc;
    color: #000;

    background-color: initial;
    margin: 0 0 5px 0;
    padding: 1.5rem 1rem;

    font-weight: bold;

    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.ar-bopt-property-values.half-wide .ar-bopt-property-value {
    width: calc(50% - 5px);
    max-width: 50%;
    min-width: 0;
    /* color: #848484; color presented in design */
    color: #000;
    border-color: #ccc;

    overflow: hidden;

    transition: color .1s ease-in, background-color .1s ease-in, border-color .1s ease-in;
}

.ar-bopt-property-values.half-wide .ar-bopt-property-value:nth-child(old) {
    margin-right: 5px;
}
.ar-bopt-property-values.half-wide .ar-bopt-property-value:nth-child(even) {
    margin-left: 5px;
}

.ar-bopt-property-values .ar-bopt-property-value.active,
.ar-bopt-property-values .ar-bopt-property-value.active:hover {
    border: 3px solid #bf5700;
    background-color: initial;
    color: #000;
}

.ar-bopt-property-values .ar-bopt-property-value:hover {
    background-color: #bf5700;
    /* background-color: rgba(191,87,0, .3); */
    color: #fff;
}

.ar-bopt-property-values .ar-bopt-property-value > span {
    box-sizing: border-box;
    height: auto;
    line-height: 1.75rem;
    white-space: nowrap;
}

/* get creative with the formatting (split off paren at end of label text) */
.ar-bopt-property-values .ar-bopt-property-value span:first-child {
    flex-grow: 1;
    padding-right: 20px;
    overflow: visible;
    white-space: normal;
    line-height: 1.75rem;
}

.ar-bopt-property-values.half-wide .ar-bopt-property-value span:first-child {
    /* detect this, remove half-wide class */
    overflow: hidden;
    white-space: nowrap;
}

/* code might depend on this being visible */
/*
This must have been something I was messing with back then... doubt this is needed now
It's been overhauled a few times since then.
.ar500-bundle-options .ar-bopt-container.is-child {
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
*/

.product-options-wrapper .required {
    display: none;
}

.bundle-summary .subtitle {
    font-size: 16px;
}