[FIX] website_sale_aplicoop: restore the compact metrics on product tags

.badge-km seeds --badge-padding-*, --badge-font-* and --badge-border-radius,
but so does Bootstrap's own .badge rule, and this file is @imported — which
the spec hoists above the rest of the bundle, so at equal specificity
Bootstrap always came later and won. The tags rendered at Bootstrap's
default metrics instead of the compact ones written here. Qualify the
selector as .badge.badge-km (0,2,0).

Measured on the card: 7.8/4.2px padding, 12px, 4px radius -> 4/2px, 11px,
--ac-radius-sm, the values the rule asks for.

The colour half needs no qualifier and keeps its own selector reach: Odoo
only reads --background-color/--color/--bg-solid, it never sets them.

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

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

@@ -193,16 +193,26 @@
 }
 
 /* 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). */
-.badge-km {
+   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. */
+/* The `.badge` qualifier is load-bearing for the --badge-* half: Bootstrap's
+   own .badge rule seeds those same custom properties, and this file is
+   @imported, so at equal specificity Bootstrap comes later and wins — the
+   compact metrics below never applied. .badge.badge-km (0,2,0) settles it.
+   The --background-color/--color/--bg-solid half needs no qualifier: Odoo
+   only reads those, it never sets them. */
+.badge.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);
-    color: var(--ac-text-on-fill);
+    --background-color: var(--ac-color-secondary);
+    --bg-solid: var(--ac-color-secondary);
+    --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 {