/* Category page hero: show the category image clearly as the hero background.
   Only applies when the category has an image; otherwise the default hero is untouched. */
.sf-category-v2__hero:has(.sf-category-v2__hero-media) .sf-category-v2__hero-media {
    opacity: 1;
}
.sf-category-v2__hero:has(.sf-category-v2__hero-media) .sf-category-v2__hero-media img {
    filter: none;
}
/* Neutralise the legacy overlay painted by ::after in storefront-catalog-v2.css. */
.sf-category-v2__hero:has(.sf-category-v2__hero-media)::after {
    display: none;
}
/* Dark side sits behind the text (inline-start), fading out toward the image. */
.sf-category-v2__hero:has(.sf-category-v2__hero-media) .sf-category-v2__hero-overlay {
    background: linear-gradient(
        to left,
        color-mix(in srgb, var(--brand-900) 82%, rgba(8, 15, 25, .9)),
        color-mix(in srgb, var(--brand-900) 52%, rgba(8, 15, 25, .5)) 55%,
        rgba(8, 15, 25, .12)
    );
}
[dir="ltr"] .sf-category-v2__hero:has(.sf-category-v2__hero-media) .sf-category-v2__hero-overlay {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--brand-900) 82%, rgba(8, 15, 25, .9)),
        color-mix(in srgb, var(--brand-900) 52%, rgba(8, 15, 25, .5)) 55%,
        rgba(8, 15, 25, .12)
    );
}
@media (max-width: 700px) {
    .sf-category-v2__hero:has(.sf-category-v2__hero-media) .sf-category-v2__hero-overlay,
    [dir="ltr"] .sf-category-v2__hero:has(.sf-category-v2__hero-media) .sf-category-v2__hero-overlay {
        background: linear-gradient(
            0deg,
            color-mix(in srgb, var(--brand-900) 80%, rgba(8, 15, 25, .9)),
            color-mix(in srgb, var(--brand-900) 50%, rgba(8, 15, 25, .5))
        );
    }
}