/* ============================================================
   Option Plus — storefront styling
   Class names match the HTML produced by the ocmod template
   injection. Safe to load on any OC3 / OCStore 3 theme because
   every selector is scoped under .option-plus-holder / .option-plus / .options2.
   ============================================================ */

.options2 {
    margin: 16px 0;
}

.option-plus {
    margin-bottom: 16px;
}

.option-plus .control-label,
.option-plus .product-label {
    display: block;
    margin-bottom: 8px;
    color: #7B7B7B;
    font-size: 14px;
    font-weight: 400;
}

.option-plus-holder .options-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ---------- image-type swatches ---------- */
.option-plus-holder .option-plus-image {
    width: 78px;
    position: relative;
}

.option-plus-holder .option-plus-image a {
    display: block;
    position: relative;
    line-height: 0;
}

.option-plus-holder .option-plus-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.option-plus-holder .option-plus-image a:hover img {
    border-color: #f26641;
}

/* selected = currently viewed product */
.option-plus-holder .option-plus-image a.option_selected {
    cursor: default;
}

.option-plus-holder .option-plus-image a.option_selected img {
    border-color: #f26641;
    box-shadow: 0 0 0 2px #f26641;
}

/* ---------- text-type chips (radio / select / checkbox) ---------- */
.option-plus-holder .option-plus-radio,
.option-plus-holder .option-plus-select,
.option-plus-holder .option-plus-checkbox {
    display: inline-flex;
}

.option-plus-holder .option-plus-radio a,
.option-plus-holder .option-plus-select a,
.option-plus-holder .option-plus-checkbox a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 8px 14px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    background: #fff;
    color: #121212;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.option-plus-holder .option-plus-radio a:hover,
.option-plus-holder .option-plus-select a:hover,
.option-plus-holder .option-plus-checkbox a:hover {
    border-color: #121212;
    text-decoration: none;
}

.option-plus-holder .option-plus-radio a.option_selected,
.option-plus-holder .option-plus-select a.option_selected,
.option-plus-holder .option-plus-checkbox a.option_selected {
    background: #121212;
    color: #fff;
    border-color: #121212;
    cursor: default;
    font-weight: 500;
}

/* ---------- responsive ---------- */
@media (max-width: 767px) {
    .option-plus-holder .option-plus-image {
        width: calc(25% - 8px);
        max-width: 88px;
    }

    .option-plus-holder .option-plus-radio a,
    .option-plus-holder .option-plus-select a,
    .option-plus-holder .option-plus-checkbox a {
        padding: 6px 10px;
        min-width: 36px;
        font-size: 13px;
    }
}

.product-colors.optionplus-colors{
    list-style: none;
    display: flex;
    justify-content: space-around;
    padding: 0 30px;
}