[FIX] website_sale_aplicoop: restore the tag colours and filter states

Tags rendered grey everywhere and the selected/dimmed filter states were
invisible: Odoo 18 paints every .badge from --background-color / --color /
--bg-solid and marks all three declarations !important
(website/static/src/scss/website.scss, "// Badges"), so the plain
background-color / color / border declarations here never landed, however
specific the selector. Set those three custom properties instead.

Same origin as the notification fix: before 5de7573 realtime_search.js
wrote the colours as inline styles with setProperty(..., "important"),
which outranks a stylesheet !important. Moving them into a class dropped
that priority, and the core rule took over.

Note this does not cover the --badge-padding-*/--badge-font-* values in
.badge-km, which Bootstrap's own .badge rule still wins on source order —
the badges keep Bootstrap's default metrics, as they do today.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

website_sale_aplicoop/static/src/css/components/product-card.css

@@ -193,16 +193,20 @@
 }
 
 /* The per-tag colour is a record value, so it arrives as the --ac-tag-color
-   custom property set inline on the element (see eskaera_shop_products). */
+   custom property set inline on the element (see eskaera_shop_products).
+   --background-color / --color / --bg-solid, not background-color / color /
+   border: Odoo 18 paints every .badge from those three and marks them
+   !important, so a direct declaration here never lands. See the header of
+   components/tag-filter.css for the full story. */
 .badge-km {
     --badge-padding-x: var(--ac-space-2xs);
     --badge-padding-y: var(--ac-space-3xs);
     --badge-font-size: var(--ac-text-2xs);
     --badge-font-weight: var(--ac-weight-semibold);
-    --badge-color: var(--ac-text-on-fill);
     --badge-border-radius: var(--ac-radius-sm);
-    border: 1px solid var(--ac-tag-color, var(--ac-color-primary-strong));
+    --background-color: var(--ac-tag-color, var(--ac-color-primary-strong));
-    background-color: var(--ac-tag-color, var(--ac-color-primary-strong));
+    --bg-solid: var(--ac-tag-color, var(--ac-color-primary-strong));
+    --color: var(--ac-text-on-fill);
     white-space: nowrap;
 }
 

website_sale_aplicoop/static/src/css/components/tag-filter.css

@@ -16,6 +16,14 @@
  * these classes and aria-pressed; the appearance lives here.
  *
  * The per-tag colour arrives as --ac-tag-color, set inline from the record.
+ *
+ * Colour is set through --background-color / --color / --bg-solid, NOT through
+ * background-color / color / border. Odoo 18 paints every .badge from those
+ * three custom properties and marks all three declarations !important
+ * (website/static/src/scss/website.scss, "// Badges"), so a plain
+ * background-color here loses no matter how specific the selector is — which
+ * is what left every tag grey and made the selected/dimmed states invisible.
+ * The !important the old JS wrote inline was what used to win that fight.
  */
 
 .tag-filter-badges {
@@ -28,17 +36,17 @@
 }
 
 .tag-filter-badge {
+    --background-color: var(--ac-tag-color, var(--ac-color-secondary));
+    --bg-solid: var(--ac-tag-color, var(--ac-color-secondary));
+    --color: var(--ac-text-on-fill);
     display: inline-flex;
     align-items: center;
     /* 24px is the AA floor (WCAG 2.2 §2.5.8); coarse pointers get 44 below. */
     min-height: 1.5rem;
     padding: var(--ac-space-sm) var(--ac-space-xs);
-    border: 1px solid var(--ac-tag-color, var(--ac-color-secondary));
     border-radius: var(--ac-radius-sm);
-    background-color: var(--ac-tag-color, var(--ac-color-secondary));
     font-size: var(--ac-text-sm);
     font-weight: var(--ac-weight-medium);
-    color: var(--ac-text-on-fill);
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
@@ -51,22 +59,22 @@
    unprefixed, so that lookup always landed on its hardcoded fallback. */
 .tag-filter-badge.tag-use-theme-color,
 .badge-km.tag-use-theme-color {
-    border-color: var(--ac-color-secondary);
+    --background-color: var(--ac-color-secondary);
-    background-color: var(--ac-color-secondary);
+    --bg-solid: var(--ac-color-secondary);
-    color: var(--ac-text-on-fill);
+    --color: var(--ac-text-on-fill);
 }
 
 /* Active filter: the strong primary, which also carries white text at 7.04:1. */
 .tag-filter-badge.is-selected {
-    border-color: var(--ac-color-primary-strong);
+    --background-color: var(--ac-color-primary-strong);
-    background-color: var(--ac-color-primary-strong);
+    --bg-solid: var(--ac-color-primary-strong);
     box-shadow: var(--ac-shadow-sm);
 }
 
 /* Not part of the current filter while others are. */
 .tag-filter-badge.is-dimmed {
-    border-color: var(--ac-color-secondary);
+    --background-color: var(--ac-color-secondary);
-    background-color: var(--ac-color-secondary);
+    --bg-solid: var(--ac-color-secondary);
 }
 
 .tag-filter-badge .tag-count {