/* Product custom options of type "radio" shown as side-by-side buttons (e.g. Silver / Gold).
   Native radios stay in the DOM (visually hidden) so Magento's validation, price
   recalculation and keyboard behaviour are unchanged. Drop-downs and checkboxes are untouched. */
.catalog-product-view .product-options ul.options-list:has(input.radio) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}
.catalog-product-view .product-options ul.options-list li:has(> input.radio) {
    position: relative;
    margin: 0;
    padding: 0;
    /* Equal-width buttons sharing the row; wrap only when there are many values. */
    flex: 1 1 0;
    min-width: 110px;
}
.catalog-product-view .product-options ul.options-list li > input.radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.catalog-product-view .product-options ul.options-list li:has(> input.radio) .label {
    display: block;
    margin: 0;
    padding: 0;
}
.catalog-product-view .product-options ul.options-list li > input.radio + .label label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* theme sets option labels to a fixed 250px */
    max-width: none;
    min-width: 0;
    min-height: 54px;
    margin: 0;
    padding: 0 22px;
    border: 1px solid var(--pf-field, #d5d2cf);
    border-radius: var(--pf-radius, 8px);
    background: #fff;
    color: var(--pf-ink, #1d1d1f);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.catalog-product-view .product-options ul.options-list li > input.radio + .label label:hover {
    border-color: var(--pf-ink, #1d1d1f);
}
.catalog-product-view .product-options ul.options-list li > input.radio:checked + .label label {
    border-color: var(--pf-ink, #1d1d1f);
    box-shadow: inset 0 0 0 1px var(--pf-ink, #1d1d1f);
    background: var(--pf-panel, #faf7f5);
}
.catalog-product-view .product-options ul.options-list li > input.radio:focus-visible + .label label {
    outline: 2px solid var(--pf-ink, #1d1d1f);
    outline-offset: 2px;
}
/* Validation message sits under the row of buttons, not inside it. */
.catalog-product-view .product-options ul.options-list:has(input.radio) + .validation-advice,
.catalog-product-view .product-options ul.options-list li:has(> input.radio) .validation-advice {
    flex-basis: 100%;
}
/* Magento only re-validates on submit; drop the stale "Please select" once a button is chosen. */
.catalog-product-view .product-options dd:has(input.radio:checked) .validation-advice {
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .catalog-product-view .product-options ul.options-list li > input.radio + .label label { transition: none; }
}