.bco-options-wrap { margin: 18px 0; }
.bco-options-wrap .bco-field { margin-bottom: 16px; }
.bco-options-wrap .bco-field > label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 15px;
}
.bco-options-wrap select.bco-select {
    width: 100%;
    max-width: 480px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #2a6cb0;
    font-size: 14px;
}
.bco-options-wrap .bco-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.bco-options-wrap .bco-swatch-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 2px solid transparent;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    width: 64px;
    text-align: center;
}
.bco-options-wrap .bco-swatch-option.bco-checked { border-color: #2a6cb0; background: #eef5fc; }
.bco-options-wrap .bco-swatch-option img,
.bco-options-wrap .bco-swatch-option .bco-color-dot {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #ccc;
    display: block;
}
.bco-options-wrap .bco-swatch-option input[type=radio] { display: none; }
.bco-options-wrap .bco-swatch-label { font-size: 11px; line-height: 1.2; }
.bco-options-wrap .bco-total-price-box {
    font-size: 20px;
    font-weight: 700;
    padding: 12px 0;
    border-top: 1px solid #eee;
    margin-top: 8px;
}

/* Safety net: if a product still has native WooCommerce variation attributes
   attached (leftover from before this plugin was set up on it), hide that
   dropdown form and its own price line wherever our fields are present, so
   the customer never sees two conflicting sets of options / two prices. */
.summary:has(.bco-options-wrap) .variations_form,
.summary:has(.bco-options-wrap) .single_variation_wrap,
.summary:has(.bco-options-wrap) table.variations,
.summary:has(.bco-options-wrap) > .price {
    display: none !important;
}