[hichamboushaba]

Description

Fixes WOOMOB-4299

In dark mode, the gaps between the groups of rows on Product Detail were pure black. The gaps are transparent, so they show the page colour, and the Compose screen painted its page with WooTheme.colors.background.section. That's Figma's "Add-Ons / Section-Background" role, which is #000000 in dark mode. Other store screens use the Surface page colour, and the legacy XML screens switched to it in #16488. This PR moves Product Detail to WooTheme.colors.surface.default as well.

The gaps are now #1D2327 in dark mode and #F6F7F7 in light mode, instead of #000000 and #F0EDF4. In dark mode they used to be darker than the rows (#101517) and are now slightly lighter, as on the other screens. Which rows are grouped and which have dividers doesn't change, so the Blaze row is still its own group with no divider under it.

Test Steps

1. Set the device to dark theme and open any product.
2. Check that the gaps between groups of rows, for example between the description and Price, are dark grey instead of black.
3. Switch to light theme and check that the gaps are neutral light grey.

Images/gif

	Before	After
Dark
Light

• I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Build Number	790
	Version	25.9-rc-1
	Application ID	com.woocommerce.android.prealpha
	Commit	afb5fae
	Installation URL	03qd83nnjjip0

Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

[claude]

AI Code Review - No issues found. The changes look good.

Verified the token swap against the design system: in dark mode background.section resolves to #000000 while surface.default resolves to gray shade90 (#1D2327), and the Product Detail section cards paint surface.bright (#101517), so the gaps are no longer pure black and still contrast with the cards. In light mode the page goes from #F0EDF4 to gray shade0 (#F6F7F7) against white cards. Using surface.default as the page colour matches what Dashboard, Orders list, Products list and More menu already do, and nothing else in ui/products/details reads background.* tokens, so no on-colour mismatch is introduced.

PR housekeeping

• The release note only mentions dark mode, but the light-mode page tint also changes from the lavender #F0EDF4 to neutral #F6F7F7. Consider mentioning that in the note or PR description so QA knows the light-mode shift is intended.
• The PR title and description were not available to this review run, so the testing-instructions readiness check was not evaluated. For a visual fix like this, a before/after screenshot in both light and dark mode would be the natural test evidence.
• Applied repo AGENTS.md guidance (store-management Compose screen; design-system tokens preferred over hardcoded colours).

---

_{Automatic review · claude-fable-5-1 · Workflow run}

_{How to reply to a finding}

Reply on this review (or inline at the line the finding refers to) with one of:

• @claude addressed - I made the change. Bot verifies against the next diff before marking resolved.
• @claude rejected: <reason> - Will not fix; reason gets quoted on the next review.
• @claude not-applicable - Finding does not apply (wrong file, already covered elsewhere, etc.).

The bot honours these on the next review pass.