Custom hover conditional styles being ordered after active styles

[zachbwh]

Description

When I create a custom supportHover condition referenced in the docs, I expect the related generated styles to be ordered before the corresponding active conditional styles so that the active styles can override them. Instead, the supportHover styles are ordered after the active styles

Link to Reproduction

https://play.panda-css.com/c-5nrA7mRl

Steps to reproduce

1. Hover and click on each of the text entries in the playground (on a device with a fine pointer)
2. The first one (no custom conditions) has active styles applied when clicking
3. The second one (custom hover condition) does not have active styles applied (due to CSS ordering)
4. The third one (custom hover and custom active conditions, my workaround) does have active styles applied (due to increased specificity in the custom active condition)
5. Inspect the generated CSS tab to see why each of the examples behave the way they do

JS Framework

React TS

Panda CSS Version

1.6.0

Browser

Google Chrome 142

Operating System

• macOS
• Windows
• Linux

Additional Information

My workaround of introducing a more specific active selector does technically work, but it does result in a more confusing API and more generated styles. I feel like this could be fixed simply by making sure the ordering of generated styles matches expectations for hover/active conditions.

I've also tried writing styles like below but I also ran across some strange behaviours when I tried to nest conditional group styles

🟠 Technically works, but is confusing, error prone, and results in more generated styles than necessary

bgColor: {
    base: "transparent",
    _supportHover: { base: "slate.3", _active: "slate.5" },
    _active: "slate.5",
},

❌ Doesn't work, nesting the group conditions results in the selectors being concatenated rather than merged

bgColor: {
    base: "transparent",
    _groupSupportHover: { base: "slate.3", _groupActive: "slate.5" },
    _groupActive: "slate.5",
},

.group:is(:hover, [data-hover]) .group:is(:active, [data-active])

I'm also aware than whether or not this should be considered a bug is marginal since I am using a custom condition (though I did copy it directly from the docs). Feel free to convert to a discussion if that's more appropriate.