diff --git a/src/uix/eidos/components/color-picker/color-picker.css b/src/uix/eidos/components/color-picker/color-picker.css
index 9a2827053..5d76652d7 100644
--- a/src/uix/eidos/components/color-picker/color-picker.css
+++ b/src/uix/eidos/components/color-picker/color-picker.css
@@ -182,6 +182,15 @@
 
 /* ── ValueSwatch / ValueText ─────────────────────────────────────────────── */
 
+/* Stacking notes:
+ *   • Element's own `background-image` (checker) sits at the bottom of
+ *     the stacking context.
+ *   • `::before` is a positioned descendant painted ABOVE the parent's
+ *     own background — perfect place for the colour overlay.
+ *   • The colour comes from `--cp-current-color`, set inline by
+ *     `ColorPickerValueSwatchProvider`. Where the colour has alpha < 1
+ *     (rgba) the checker shows through underneath. */
+
 [data-color-picker-value-swatch] {
 	position: relative;
 	display: inline-block;
@@ -189,12 +198,13 @@
 	block-size: var(--_color-picker-swatch-size);
 	border-radius: var(--color-picker-swatch-radius);
 	border: 1px solid var(--color-picker-swatch-border);
-	/* Checker behind the colour swatch — visible only where the colour
-	   has alpha < 1. We use ::before for the checker (z-index -1 inside an
-	   isolated stacking context) and let the soma-set inline
-	   background-color paint the colour itself. The inline `style` from
-	   `ColorPickerValueSwatchProvider` also emits `--cp-current-color` so
-	   downstream consumers can pull the value as a CSS variable too. */
+	background-image: var(--cp-checker);
+	background-size: var(--cp-checker-cell) var(--cp-checker-cell);
+	background-position:
+		0 0,
+		0 calc(var(--cp-checker-cell) / 2),
+		calc(var(--cp-checker-cell) / 2) calc(var(--cp-checker-cell) / -2),
+		calc(var(--cp-checker-cell) / -2) 0;
 	overflow: hidden;
 	isolation: isolate;
 }
@@ -203,14 +213,7 @@
 	content: '';
 	position: absolute;
 	inset: 0;
-	z-index: -1;
-	background-image: var(--cp-checker);
-	background-size: var(--cp-checker-cell) var(--cp-checker-cell);
-	background-position:
-		0 0,
-		0 calc(var(--cp-checker-cell) / 2),
-		calc(var(--cp-checker-cell) / 2) calc(var(--cp-checker-cell) / -2),
-		calc(var(--cp-checker-cell) / -2) 0;
+	background: var(--cp-current-color, transparent);
 	pointer-events: none;
 }