How do I set "Add to Cart form" css globally using Commerce Kickstart as basis?

Question

My goal is to borrow the Add to Cart form style from Commerce Kickstart on a site where:

1. Panels: Node Templates controls the Product Displays
2. Subtheme of Commerce Kickstart sets the CSS / template

Questions:

• How do I find the CSS controlling the standard Commerce Kickstart Add to Cart form?
• How do I use that CSS to control all "Add to Cart" widgets on the site?
• Do I need to call out each Product Display type? Or is there a way to call it globally?
• Related question: Why is the parent theme CSS being called? (There seems to be two levels of the Commerce Kickstart theme. One in .../themes/contrib and one in .../themes/commerce_kickstart_theme What's the difference? Are there two to share between the admin theme and site theme?

I am new to css, so am using "Inspect Element" to figure out how styles are applying to a given item. However, I can't figure out how to repurpose the css from Commerce Kickstart to apply to all "Add to Cart" widgets that are sprinkled throughout the site and control on a product-type basis through several Panels: Node Templates.

**These css callouts seem to be coming from the Kickstart theme, instead of the subtheme. I have enabled the subtheme and see changes I am making in the subtheme work, so I'm lost on why it is calling from the parent theme. .../profiles/commerce_kickstart/themes/contrib/omega_kickstart/css/omega-kickstart-alpha-default-normal.css

From Inspect Element, I see that Commerce Kickstart shows:

For the attribute label:

.node-product-type .field-name-field-product form.commerce-add-to-cart label {
    float: left;
}

For the attribute drop-down:

element.style {
    width: 44.7778px;
    margin-right: 17px;
    text-align: right;
}

Answer 1

My solution is not elegant, but it got the job done:

1. Using inspect element, identified css that dictating styling of the "Add to Cart" form elements that I wanted to keep. This css was buried in the subtheme_style.css file associated with "Product" only: .node-product-type.

2. Copied css to start of subtheme_style.css file

3. Removed the references to .node-product-type. This set all the select widget fields and all the "Add to cart" buttons to the desired style/look.

This seems like an odd way to go, but also means that I don't have to differentiate among all product display types, as I build out panel displays that are unique to each one. What would you have done differently?

This is the css that I repurposed and generalized by deleting the reference to .node-product-type:

.field-name-field-product form.commerce-add-to-cart label { float: left; margin-right: 5px; width: 45%;}

.field-type-commerce-product-reference form.commerce-add-to-cart .form-submit { background-color: #9E4934; /*CG Add to Cart button*/ background-image: url("../images/bg_add_to_cart.png"); background-position: 90% 50%; /* LTR */ background-repeat: no-repeat; border: 0; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; color: #ffffff; font-family: "Open Sans", sans-serif; font-size: 17px; font-weight: 400; float: right; margin-top: 40px; margin-left: 5px; /* LTR */ padding: 5px 50px 5px 10px; /* LTR */ }

.field-type-commerce-product-reference form.commerce-add-to-cart .form-submit:hover { cursor: pointer; }