Divi/WooCommerce Product Page Template — Mobile Responsive Fixes + Button Text Wrapping

Platform: WordPress + Divi Theme Builder + WooCommerce Scope: Fix the "All Products" (single product) Theme Builder template — changes apply across the full 38-SKU catalog, so this is a template-level fix, not per-product. Background: This template was recently rebuilt after the original product page template was lost. Desktop layout is complete and working correctly. Two issues remain, both needing real platform access to properly diagnose and fix (not something resolvable through settings panels alone). Issue 1 — Mobile/tablet horizontal overflow On phone and tablet breakpoints, the page renders wider than the viewport, leaving a large blank white gap on the right side of the screen (confirmed via Safari Responsive Design Mode, real device width — not just the Divi builder's simulated preview, which does not reliably match the live page). Suspected cause: either the WooCommerce Add To Cart module or the custom "Bulk Pricing" table (static HTML table, not a plugin element) has a fixed/percentage width value at the phone breakpoint that exceeds the actual container width. Chrome DevTools/Safari Inspector confirmed the rendered module is ~818px wide against a 390px viewport. Already attempted: reset Add To Cart module's Width/Max Width to auto/none at the phone breakpoint in Divi — did not resolve it, so there is likely a second element (possibly the static pricing table, possibly a parent Row/Section/Column) also forcing a fixed width. Needed: identify the actual overflowing element(s) via DevTools computed styles, and fix width/max-width so the full layout is properly responsive at both tablet and phone breakpoints, without breaking the desktop layout. Issue 2 — Checkout/Add to Cart button text wrapping mid-word Button text is breaking mid-word (e.g., wrapping partway through a word) instead of wrapping on whole-word boundaries or not wrapping at all. Needs a white-space / word-break / overflow-wrap CSS fix on the relevant button element(s) — likely the WooCommerce Add To Cart button and/or the checkout page's payment button. Please check both locations. Existing customizations to be aware of and preserve: Custom quantity stepper (+/− buttons replacing native number input arrows) — implemented via a WPCode snippet (JS + CSS), already working correctly on both desktop and phone. Do not remove or conflict with this. Custom "Bulk Pricing" static table (HTML, styled to match brand — sage green/cream color scheme, Source Serif Pro/Source Sans Pro fonts) sitting above the price — replaced an earlier dynamic version from the Discount Rules plugin. A "Discount Rules" (Flycart) plugin quantity-tier rule exists but has a separate, unrelated pricing bug currently under investigation — not in scope for this job unless it turns out to be architecturally related to the overflow issue. Deliverables: Confirmed fix for mobile/tablet overflow, verified on real device widths (not just Divi's builder simulator) in both Chrome and Safari Confirmed fix for button text wrapping, verified on both the product page Add to Cart button and the checkout page payment button Brief written summary of root cause(s) found and what was changed, so this doesn't need to be re-diagnosed later No regressions to desktop layout, the quantity stepper, or the static Bulk Pricing table styling