diff --git a/src/lib/components/ProductsSubmenu.svelte b/src/lib/components/ProductsSubmenu.svelte
index 39cc13c172..6193441be4 100644
--- a/src/lib/components/ProductsSubmenu.svelte
+++ b/src/lib/components/ProductsSubmenu.svelte
@@ -93,10 +93,9 @@
 
 <button
     class={cn(
-        'text-primary focus:text-accent hover:text-accent inline-flex cursor-pointer items-center justify-between outline-none',
-        {
-            'text-accent': $open
-        }
+        'inline-flex cursor-pointer items-center justify-between outline-none transition-colors',
+        'hover:text-accent focus-visible:text-accent',
+        $open ? 'text-accent' : 'text-primary'
     )}
     use:melt={$trigger}
 >