/* ========================================
   BUTTONS - All button styles
======================================== */

/* Primary Button (Add to Cart) */
.btn-primary,
.button--add-to-cart,
.btn-add-to-cart,
.form-submit[value*="Add to cart"],
.form-submit[value*="ADD TO CART"],
input[type="submit"].commerce-add-to-cart,
.commerce-add-to-cart-button,
.node--type-product input[type="submit"],
.node--type-product button[type="submit"],
.commerce-order-item-add-to-cart-form input[type="submit"] {
    width: 90%;
    border: none;
    padding: 10px;
    background: var(--color-primary) !important;
    font-size: var(--button-font-size) !important;
    font-weight: var(--button-font-weight) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--button-letter-spacing) !important;
    display: block !important;
    margin: var(--spacing-md) auto var(--spacing-sm) auto !important;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-primary:hover,
.button--add-to-cart:hover,
.commerce-order-item-add-to-cart-form input[type="submit"]:hover {
    background: var(--color-primary-dark) !important;
    transform: translateY(-2px);
}

/* Product Detail Add to Cart Button */
.node--type-product .commerce-product-variation-cart-form input[type="submit"],
.node--type-product .form-submit[value*="Add to cart"] {
    width: 100%;
    border: none;
    padding: 10px;
    background: var(--color-primary) !important;
    color: #ffffff;
    font-size: var(--button-font-size) !important;
    font-weight: var(--button-font-weight) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--button-letter-spacing) !important;
    display: block !important;
    margin: var(--spacing-md) auto var(--spacing-sm) auto !important;
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
}