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

@@ -193,26 +193,16 @@
 }
 
 /* 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).
-   --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 {
+   custom property set inline on the element (see eskaera_shop_products). */
+.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);
-    --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);
+    border: 1px solid var(--ac-tag-color, var(--ac-color-primary-strong));
+    background-color: var(--ac-tag-color, var(--ac-color-primary-strong));
     white-space: nowrap;
 }
 

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

@@ -16,14 +16,6 @@
  * 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 {
@@ -36,17 +28,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;
@@ -59,22 +51,22 @@
    unprefixed, so that lookup always landed on its hardcoded fallback. */
 .tag-filter-badge.tag-use-theme-color,
 .badge-km.tag-use-theme-color {
-    --background-color: var(--ac-color-secondary);
-    --bg-solid: var(--ac-color-secondary);
-    --color: var(--ac-text-on-fill);
+    border-color: var(--ac-color-secondary);
+    background-color: 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 {
-    --background-color: var(--ac-color-primary-strong);
-    --bg-solid: var(--ac-color-primary-strong);
+    border-color: var(--ac-color-primary-strong);
+    background-color: 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 {
-    --background-color: var(--ac-color-secondary);
-    --bg-solid: var(--ac-color-secondary);
+    border-color: var(--ac-color-secondary);
+    background-color: var(--ac-color-secondary);
 }
 
 .tag-filter-badge .tag-count {