/* CXQPM - Quantity plus/minus styling (uses CSS variables printed in ) */ /* Wrapper injected inside WooCommerce quantity template (inside .quantity) */ .quantity .cxqpm-wrapper{ display: inline-flex; align-items: center; justify-content: center; gap: var(--cxqpm-gap, 0px); white-space: nowrap; } /* Reorder elements so minus is left, input is middle, plus is right. (Buttons are printed after the input in the HTML to allow CSS hiding for hidden qty fields.) */ .quantity .cxqpm-wrapper .cxqpm-minus{ order: 1; } .quantity .cxqpm-wrapper input{ order: 2; } .quantity .cxqpm-wrapper .cxqpm-plus{ order: 3; } .quantity .cxqpm-wrapper .cxqpm-btn{ width: var(--cxqpm-btn-width, 41px); height: var(--cxqpm-btn-height, 41px); min-width: var(--cxqpm-btn-width, 41px); display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0 !important; /* <-- ADD THIS LINE */ font-size: var(--cxqpm-btn-font-size, 18px); line-height: 1; border-radius: var(--cxqpm-btn-radius, 0px); background: var(--cxqpm-btn-bg, #f5f5f5); color: var(--cxqpm-btn-color, #000); border: 1px solid var(--cxqpm-btn-border, #e6e6e6); cursor: pointer; box-shadow: none; } .quantity .cxqpm-wrapper .cxqpm-btn:hover{ background: var(--cxqpm-btn-bg-hover, #eaeaea); color: var(--cxqpm-btn-color-hover, #000); border-color: var(--cxqpm-btn-border-hover, #d6d6d6); } .quantity .cxqpm-wrapper input.qty, .quantity .cxqpm-wrapper input.input-text.qty.text, .quantity .cxqpm-wrapper input[type="number"], .quantity .cxqpm-wrapper input[type="text"]{ width: var(--cxqpm-input-width, 55px); height: var(--cxqpm-input-height, 41px); min-height: var(--cxqpm-input-height, 41px); text-align: center; font-size: var(--cxqpm-input-font-size, 16px); border-radius: var(--cxqpm-input-radius, 0px); background: var(--cxqpm-input-bg, #fff); color: var(--cxqpm-input-color, #000); border: 1px solid var(--cxqpm-input-border, #e6e6e6); box-shadow: none; margin: 0 !important; } /* If Woo renders a hidden quantity input (sold individually / min=max), hide the injected buttons. */ .quantity .cxqpm-wrapper input[type="hidden"] ~ .cxqpm-btn{ display: none !important; } /* Hide browser spinners */ .quantity .cxqpm-wrapper input::-webkit-outer-spin-button, .quantity .cxqpm-wrapper input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } .quantity .cxqpm-wrapper input[type=number]{ -moz-appearance: textfield; } /* Archive form alignment */ .cxqpm-loop-form{ display: inline-flex; align-items: center; gap: 8px; } .cxqpm-loop-form .quantity{ margin: 0 !important; } .cxqpm-loop-form .button{ white-space: nowrap; } /* Small helper for Woo's processing state */ .cxqpm-loop-form .button.loading{ opacity: 0.7; pointer-events: none; }