Prevent duplicate selector labels

agent.md

@@ -51,6 +51,7 @@ This project replaces the Excel/VBA workflow named `Catalog maker - 20` with a N
 - Button icons must be placed before the label in DOM order, with the icon and label centered together as one group. Keep the control's chevron or disclosure arrow in its own fixed right-side slot so it does not shift the centered label.
 - Use one shared icon size, gap, alignment, hover state and disabled state for equivalent controls. Do not mix icon-only, text-only and icon-after-text variants for the same control family.
 - Before finishing any UI change, inspect the rendered page with Playwright and verify that icons are visible, precede their labels, remain centered, and do not overlap or drift between controls. Update this file when a new reusable visual rule is discovered.
+- Custom select controls may use a native select as an interaction layer, but the native label must be visually transparent when a separate display label is rendered; never show the same control text twice.
 
 ## TypeScript workflow
 

src/tailwind.css

@@ -92,8 +92,8 @@
   .select-control { @apply relative w-full; }
   .select-display { @apply pointer-events-none absolute inset-0 z-30 flex items-center justify-center gap-1.5 text-center text-slate-200; }
   .select-display span { @apply min-w-0 max-w-[calc(100%-3rem)] truncate; }
-  .language-native-select { @apply relative z-20 cursor-pointer appearance-none bg-transparent pr-7 pl-7 text-transparent caret-transparent; }
-  .language-native-select:focus { @apply text-transparent; }
+  .language-native-select { @apply relative z-20 cursor-pointer appearance-none bg-transparent pr-7 pl-7 !text-transparent caret-transparent; }
+  .language-native-select:focus { @apply !text-transparent; }
   .select-chevron { @apply pointer-events-none absolute right-3 top-1/2 z-30 h-2 w-2 -translate-y-1/2 rotate-45 border-b-2 border-r-2 text-slate-200; }
   .native-manufacturer-host { @apply hidden; }
   .native-manufacturer-select { @apply hidden; }