Center both stepper glyphs on the item customization page

The +/- glyphs were wrapped in a flex-centered div, but only the +
button had been converted — the - button still used a plain span and
rendered off-center. Apply the same wrapping to both.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/ordering/MenuItemCustomizer.module.scss

@@ -63,6 +63,7 @@
   width: 2rem;
   height: 2rem;
   padding: 0;
+  margin-right: 0;
   border-radius: 50%;
   border: 1px solid $color-border;
   background: $color-background;
@@ -71,6 +72,12 @@
   cursor: pointer;
   transition: border-color 0.15s ease;
 
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   &:hover:not(:disabled) {
     border-color: $color-primary;
   }

src/components/ordering/MenuItemCustomizer.tsx

@@ -84,7 +84,7 @@ export const MenuItemCustomizer = ({
             disabled={quantity === 0}
             aria-label={`Remove one ${item.name}`}
           >
-            <span aria-hidden="true">−</span>
+            <div aria-hidden="true" className={styles.icon}>−</div>
           </button>
           <AnimatedNumber value={quantity} className={styles.count} />
           <button
@@ -93,7 +93,7 @@ export const MenuItemCustomizer = ({
             onClick={() => onAdd(item.id, checkedOptionIds)}
             aria-label={`Add one ${item.name}`}
           >
-            <span aria-hidden="true">+</span>
+            <div aria-hidden="true" className={styles.icon}>+</div>
           </button>
         </div>
       </div>