.hero-bg-overlay {
    background-image: linear-gradient(color-mix(in srgb, var(--hero-background) 18%, transparent), color-mix(in srgb, var(--hero-background) 18%, transparent)), var(--dynamic-bg-image, none);
    background-size: cover;
    background-position: center;
    opacity: 0.32;
}

.category-tile-bg.has-dynamic-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)), var(--dynamic-bg-image) center/cover no-repeat;
}

.category-tile-bg--default {
    background: linear-gradient(color-mix(in srgb, var(--text-color) 18%, transparent), color-mix(in srgb, var(--text-color) 38%, transparent)), var(--gradient-primary);
}

.promo-image.has-dynamic-bg {
    background-image: var(--dynamic-bg-image);
    background-size: cover;
    background-position: center;
}

.add-to-cart.is-added {
    background: var(--success-color);
    color: var(--button-text-color);
}