/* Cart summary columns. These two widths were inline on cartResults.html
   (600px / 300px), where no stylesheet could reach them. Same desktop values,
   now overridable at the mobile breakpoint below without !important. */
.cart_details_col {
    width: 600px;
    float: left;
}

.cart_totals_col {
    width: 300px;
    float: right;
}

#cart-custom-fields {
    width: 600px;
    float: left;
}
#cart-custom-fields .form-control {
    max-width: 230px;
    min-width: 100px;
}
#cart-custom-fields label {
    color: #666666;
    display: inline-block;
    font-weight: normal;
    margin-bottom: 0;
    width: 110px;
    vertical-align: top;
}
#cart-custom-fields .attribute_list {                
    display: inline-block;                
}

.orderline-custom-fields {
    width: 500px; 
    float: left;
}
.orderline-custom-fields .form-control {
    max-width: 230px;
    min-width: 100px;
}
.orderline-custom-fields label {
    color: #666666;
    display: inline-block;
    font-weight: normal;
    margin-bottom: 0;
    width: 110px;
    vertical-align: top;
}
.orderline-custom-fields .attribute_list {                
    display: inline-block;                
}

.specificationList {
    margin-bottom: 10px;
}

/* PROV-139433 -- the fixed widths above are wider than a phone, so the cart
   scrolled sideways. Desktop keeps them; below the mobile breakpoint every
   column goes full width and stops floating so they stack instead.
   cart.css is included from Cart/Index.cshtml (in the body), so it lands after
   global.css and after mobile.css -- these overrides need no !important. */
@media (max-width: 767px) {
    .cart_details_col,
    .cart_totals_col,
    #cart-custom-fields,
    .orderline-custom-fields {
        width: 100%;
        max-width: 100%;
        float: none;
    }

    /* set to 320px in global.css */
    table#cart_promotions {
        width: 100%;
    }
}