Atelier theme - header cart number color issue

[runwayfashion]

Hi, I’m running into an issue with the cart count color in the header:

Current behaviour: The cart count circle background is white.

Additional detail: When I scroll down on home page, the cart count correctly turns black on scroll.

Problem: When I hover over the header, the cart count stays white it doesn’t switch to black like it should.

Do you know why the hover isn’t triggering the color change and how to fix it?

URL: Runway

current code:

header#shopify-section-sections–26184826945864__header_section:hover #header-component {
–header-logo-display: unset;
–header-logo-inverse-display: unset;
–header-bg-color: unset;
–color-foreground: inherit;
–color-foreground-rgb: inherit;
–color-background: inherit;
–color-background-rgb: inherit;
–color-border: inherit;
–color-border-rgb: inherit;
}

.site-header,
.header,
.header-wrapper {
background-color: transparent;
transition: background-color 0.25s ease;
}

.site-header:hover,
.header:hover,
.header-wrapper:hover,
.site-header.is-scrolled,
.header.is-scrolled,
.header-wrapper.is-scrolled {
background-color: #ffffff !important;
}

[Eric-HAN]

.header__row.header__row–top:hover .cart-bubble .cart-bubble__background{
background-color:black
}

.header__row.header__row–top:hover .cart-bubble{
color:white
}

add above to your base.css

[runwayfashion]

Hey, I just had to adjust it slightly by adding the correct selector:

.header__row.header__row–top:hover .cart-bubble .cart-bubble__background{
background-color: black;
}

.header__row.header__row–top:hover .cart-bubble{
color: white;
}

After adding that, the cart bubble now changes properly on hover instead of only switching after scrolling.