Mobile layout broken on iOS: Block Checkout shows mobile Order Summary block but desktop two-column layout still applied

[LinChaoqunRick]

Describe the bug

On iOS devices, the WooCommerce Block Checkout renders incorrectly:
the mobile-only Order Summary toggle block is displayed, but at the same time the desktop two-column layout is still applied, causing the checkout layout to appear broken.

As a result:

• Order Summary does not collapse/merge as expected on mobile
• Order Summary and Contact Information are displayed side by side instead of stacked vertically

This issue only occurs on real iOS devices, not in desktop browser mobile emulation.

---

Steps to reproduce

1. Install WooCommerce with the Storefront theme
2. Use Block Checkout (default checkout blocks, not classic [woocommerce_checkout])
3. Open the Checkout page on a real iOS device (tested on iOS 15.6)
4. Observe the layout

---

Expected behavior

On mobile:

• Order Summary should be collapsed into a toggle
• Checkout sections should be stacked vertically
• Desktop two-column layout should not apply

---

Actual behavior

On iOS mobile:

• The mobile-only block
  .wp-block-woocommerce-checkout-order-summary-block
  is rendered
• However, desktop layout CSS (two-column/flex layout) is still active
• This results in a mixed mobile + desktop layout

---

Additional observations

• The issue occurs in Safari, Chrome, and Firefox on iOS (all WebKit-based)

• The viewport meta tag is present and correct:

  <meta name="viewport" content="width=device-width, initial-scale=1">

• window.innerWidth reports a correct mobile width (~375px)

• Desktop browser mobile emulation does not reproduce the issue

• Temporarily forcing mobile CSS (e.g. disabling desktop flex layout below 768px) fixes the layout

This suggests that on real iOS devices:

• Mobile-specific checkout blocks are injected correctly
• But desktop layout CSS is not being disabled as expected

---

Environment

• WordPress: latest (at time of testing)
• WooCommerce: latest
• Theme: Storefront
• Checkout type: Block Checkout
• Device: iPhone
• OS: iOS 15.6
• Browsers tested: Safari, Chrome, Firefox (iOS)

---

Possible cause

A CSS specificity, ordering, or conditional loading issue where:

• Mobile Block Checkout elements are rendered
• But desktop checkout layout styles are not properly excluded on mobile in real iOS environments