/*Quantity Offers*/
.qo_product,
.qo_product_container {
    display: flex;
    justify-content: space-between;
}

.qo_product {
    gap: 10px;
}

.quantity_offer_box,
.quantity_offer_box label {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0px !important;
}

.quantity_offer_box input {
    display: none !important;
}

.qo_image {
    max-width: 50px;
}

.qo_image img {
    border-radius: 5px;
    width: 100% !important;
    height: auto !important;
}

.qo_title h4 {
    margin: 0px;
    font-size: 17px;
    font-weight: 600;

}

.qo_label {
    padding: 5px;
    display: table;
    font-weight: 600;
    border-radius: 6px;
    line-height: 1;
    font-size: 12px;
}

.quantity_offer_box label {
    display: block !important;
    border-radius: 6px;
    padding: 7px 10px;
    border: 2px solid #dadada;
}

.qo_price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.old_price {
    font-size: 12px;
    float: right;
    color: #919191;
    display: table;
    text-decoration: line-through;
    line-height: 1;
    margin-bottom: 2px;
}

.new_price {
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
}

/*Documentation*/
.qo_variation_container {
    display: flex;

    flex-direction: column;

}

input[name="quantity_offer"]:checked+label .qo_variation_container {
    gap: 10px;
}

.qo_variation_container .variation_selector {
    display: flex;
    gap: 5px;
    align-items: center;
}

input[name="quantity_offer"]:checked+label .qo_variation_container .variation_selector {
    padding: 5px;
}

.qo_variation_container .variation_selector .variation_attribute {
    width: 100%;
}

.cod_vr_ct {
    width: 24px;
    display: block;
}

.quantity_offer_container {
    display: flex;
    gap: 5px;
    flex-direction: column;
    margin-bottom: 5px;
    border: 0px;
}

.cod_select_option {
    margin-bottom: 10px;
}

/* ============================================
   Quantity Offer Dynamic Styles
   ============================================ */

/* Checked state for quantity offer boxes - uses CSS variables */
.quantity_offer_box input[type="radio"]:checked+label {
    border: 2px solid var(--qo-border-color, #000);
    background-color: var(--qo-bg-color, #f0f0f0);
}