Fix CSS var sync: preserve starter file variable order

groupBySection now walks the starter file top-to-bottom instead of
iterating the missing array by name. Injected variables match the
same order as the standard theme file.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/sync_custom_vars.php

@@ -181,29 +181,25 @@ final class MokoCssVarSync
     {
         $lines   = file($starterPath, FILE_IGNORE_NEW_LINES);
         $section = 'Uncategorised';
-        $map     = [];  // variable name => section
+
+        // Walk the starter file in order — this preserves the original
+        // variable ordering so injected variables match the standard theme layout.
+        $sections = [];
 
         foreach ($lines as $line) {
             // Detect section comment headers like /* ===== HERO VARIANTS ===== */
             if (preg_match('/\/\*\s*=+\s*(.+?)\s*=+\s*\*\//', $line, $m)) {
                 $section = trim($m[1]);
             }
-            // Detect variable declaration
+            // Detect variable declaration — only include if it's missing from user file
             if (preg_match('/^\s*(--[\w-]+)\s*:/', $line, $m)) {
                 $name = trim($m[1]);
                 if (isset($missing[$name])) {
-                    $map[$name] = $section;
+                    $sections[$section][] = $missing[$name];
                 }
             }
         }
 
-        // Group by section
-        $sections = [];
-        foreach ($missing as $name => $declaration) {
-            $sec = $map[$name] ?? 'Uncategorised';
-            $sections[$sec][] = $declaration;
-        }
-
         return $sections;
     }