/* 1. COMPLETELY WIPE THE THEME'S EXTRA BUTTONS GLOBALLY */
/* This removes the + and - buttons from every product page */
.quantity .sub, 
.quantity .add, 
.quantity .plus, 
.quantity .minus,
.quantity button.plus,
.quantity button.minus {
    display: none !important;
}

/* 2. STYLE THE REMAINING NUMBER BOX */
/* This makes it a clean, professional square box */
.quantity input.qty {
    display: inline-block !important;
    width: 60px !important;
    height: 48px !important; /* Matches standard button height */
    border: 1px solid #d3d3d3 !important;
    border-radius: 4px !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    -moz-appearance: textfield !important; /* Removes arrows in Firefox */
}

/* 3. ALIGN BOX AND BUTTON SIDE-BY-SIDE */
/* This forces the quantity box and Add to Cart button into one row */
.woocommerce-variation-add-to-cart, 
.cart:not(.variations_form) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* 4. ENSURE ADD TO CART BUTTON MATCHES THE BOX */
.single_add_to_cart_button.button {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 30px !important;
    white-space: nowrap !important;
}

/* 5. HIDE THE BROWSER'S DEFAULT ARROWS (Optional but cleaner) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}