/* ==========================================================================
   GBZ420 - below-grid editorial block of the category listings - v2, 2026-09-24
   --------------------------------------------------------------------------
   Surface: the editorial HTML blocks that the category listing documents render
   BELOW the product grid and immediately ABOVE the shared reassurance strip.
   Each block is an `elementor-widget-html` inside the listing content and
   exposes the same host element `div.gbz420-gbz`. Nothing in this file can
   match an element that has no `div.gbz420-gbz` ancestor, and nothing matches
   the Prime page (category 45, which carries no such host).

   MEASURED INVENTORY - read-only pass of 2026-09-24, taken on the 114 pages that
   the sibling audit saved (`qa-category-inventory-audit-20260924\raw`), plus a
   live re-check of three routes with curl.exe:
   the host class is carried by 28 of the 37 reachable categories in all three
   languages (84 routes), not by two as v1 assumed. Three shapes:

     A. charter model - 2 categories, 3 (10-OH-HHC, `.gbz420-10oh`) and
        7 (GBZ & GBZ+, `#gbz-long`). Their below-grid block is the design the
        v1 pass measured; their decorative palette is approved content and is
        NOT re-tinted here.
     B. id-scoped family - 11 categories: 8, 11, 12, 13, 14, 15, 19, 25, 26,
        28, 30. Every internal rule of their `<style>` is keyed on
        `#gbz420-<slug>-<lang>`, and their colour layer is a variable block on
        the host: `--bg --ink --muted --line --soft --brand --ok --warn`.
     C. bare-class family - 15 categories: 4, 5, 6, 9, 20, 21, 22, 23, 24, 32,
        36, 40, 41, 42, 48. Their `<style>` writes the same components with bare
        class selectors (`.gbz-hero`, `.gbz-kicker`, `.gbz-btn`, ...) and the
        same eight variables on the host class.

   What v1 got wrong, and what this version does about it:

     1. v1 stated that the two listing hosts of categories 3 and 7 "are the only
        elements in the local shop that carry this class". They are not: 26 more
        hosts inherit the same form rules. v2 keeps those rules - square panels,
        pill controls, flat fills, no shadow, 44 px touch floor and dark focus
        ring are charter rules, not 3/7-only rules - but it declares which host
        family each rule reaches, and it adds the component classes the other
        two families actually use (`.gbz-btn--primary`, `.gbz-btn.outline`,
        `.gbz-prod .btn-sm`, `.gbz-mini span`, `.gbz-content`).

     2. v1 forced `color: var(--gbz-ink)` on every `.gbz-btn` of every host. That
        is right for the families whose button is a white hairline pill
        (measured: 13 foreign hosts declare `background:#fff; color:var(--ink)`),
        and wrong for the three hosts whose bare `.gbz-btn` IS the accent-filled
        primary: `.gbz420-vape` (28), `.gbz420-fleurs-cbd-et-resines` (32) and
        `.gbz420-extra` (36) declare `background: var(--brand); color: white`.
        With the black fill that section 4c/4d declares, v1's ink rule would have
        painted #101010 ink on a #101010 pill. v2 restores the white ink of that
        filled control in an explicit, host-qualified rule (section 4d).

     3. The theme bundle carries
        `a:link:not(.nav-link):not(.btn) { color: #575757 }` (2-3-1), which
        outranks the blocks' own `.gbz-btn { color: ... }` (0-1-0): a filled
        control keeps its fill and loses its ink. That is the defect v1 measured
        on categories 3 and 7, and it also reaches the mini-card CTA
        (`<a class="btn-sm">`, 3 hosts) and the ghost pills of every other host.
        Each control's ink is therefore declared here, on a selector that
        outranks the bundle whatever the load order is.

     4. The sibling audit lists 13 off-palette accents across the blocks. Measured
        here on the 26 non-charter hosts, 12 of them are values of `--brand`:
        `#06b6d4 #0ea5e9 #15803d #16a34a #4a90e2 #6366f1 #7c3aed #b45309
        #c5a045 #d81b60 #db2777 #e11d48`; the legends add `--ok` in
        `#0f766e #10b981 #15803d #16a34a` and `--warn` in `#b45309 #f59e0b`, and
        the surfaces add eleven tinted values (`#ecfeff #f0fdff #f3fbf7 #f3fbff
        #f8fafc #faf5ff #fdf2f8 #fff1f2 #fff7ed #fff7fb #fff8ef`) plus a
        per-host `rgba(<brand>, .22)` hairline. Section 5 remaps those onto the
        charte palette, so surfaces, hairlines, ink, muted text, links, filled
        controls, table headers and legend dots resolve to
        white / #F6F6F6 / #E6E6E6 / #101010 / #5F5F5F / #D4FA0A without touching
        one character of the content.

   Charter references: 3.1 (palette), 3.3 (no shadow, one accent), 4.1-4.4
   (body face and floors), 6.4-6.6 (cards, controls, accordions), 9.4 (shapes),
   9.11 (shared bounds), 10 (counter-examples).

   Deliberate non-goals, reported rather than corrected:
     * the decorative palette of category 3 (the cream page, the amber
       `.gbz420-hero`, the six pastel chip variables `--mint --rose --sky --sand
       --lilac --ice`, the coloured `.gbz-dot` legend and the dashed
       `.gbz-footnote`) and of category 7's hero band and product grid: both pages
       are the approved reference of the maquette set, and re-tinting them would
       be a redesign, not a normalisation. The one surface of category 7 that no
       maquette covers - its below-grid editorial widget - is the surface the
       2026-09-24 public visual fixes pass re-tints in section 7 of this file;
     * the `.gbz-hero` name that category 3 shares with the real hero band
       outside the widget. That band's box reset lives in gbz-qa-listings-v1.css
       (F-345-A8) and the band itself belongs to the sibling category-hero pass;
     * the `style="color:#555"` that Creative Elements writes on the footer legal
       line. It is neutral text outside the widget (`#555` against the charte's
       `--gbz-muted #5F5F5F`, 7,3:1 on white), it is not part of the editorial
       block, and this layer does not reach it. The other inline values of the
       widget are corrected by section 6;
     * the layout of the blocks: their max-width (1060 / 1100 / 1200 px), their
       paddings, their gaps and their hover translations. No maquette covers a
       below-grid editorial block, so snapping those values to the spacer scale
       would be an invention rather than a normalisation;
     * the rules that carry a documented `!important`, and only because the value
       they correct is written in the *markup* by Creative Elements (an inline
       declaration outranks every stylesheet rule): section 6 (the purple bullet
       of hosts 40 / 41 / 48, the radius of two hero chips on 22 / 23 / 24 and the
       radius of one card tag on host 36) and section 7c (the pastel section fills
       and the grey text of category 7). Each of them is scoped to an element that
       carries an inline style, and the parse check asserts that no other
       `!important` exists anywhere in this file.

   Load order: the theme's combined stylesheet and the Creative Elements bundle
   are printed after this file, so every selector is qualified by `body#category`
   and `#content` (two ids) and by the host class, which outranks both the
   class-only defaults of the bundles and the id-scoped rules the blocks write.

   Scope guard: the rules that must reach only the 26 non-charter hosts carry
   `body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45))`.
   The three negations are chained inside a single `:where()` argument on
   purpose: `:where(:not(A), :not(B))` would be an OR ("not A or not B", true for
   almost every page) whereas the chained form is the AND the guard needs.
   `:where()` holds that guard at zero specificity on
   purpose: a scoped rule therefore never outranks the interaction states of
   section 4e. The first cut of this file used three plain `:not()` guards, whose
   specificity added up to more than the hover selectors - the black fill of a
   CTA then froze its own hover state, which charter 6.5 forbids ("etat survol
   sans changement perceptible"). `:where()` is supported by every browser the
   store's own layers already require (`:has()` is used by gbz-qa-listings-v1.css).
   ========================================================================== */

/* Inert markers. `-v1` is kept so a harness written against the first drop keeps
   resolving; `-v2` names this version. Neither paints anything and no other rule
   reads them. */

body#category {
    --gbz-category-editorial-v1: 1;
    --gbz-category-editorial-v2: 1;
    --gbz-category-editorial-v3: 1;
}

/* The legacy FAQ family uses plain details inside .gbz-faq, rather than
   .gbz420-faq. Include its panels without changing the reference categories. */
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-faq details {
    border-radius: var(--gbz-radius-0, 0);
}

/* ==========================================================================
   1. Panels, cards, rows and tables - square and shadowless (all 28 hosts)
   --------------------------------------------------------------------------
   Charter 6.4 / 6.6 / 9.4: panels and cards carry a 0-2 px radius, separate by a
   1 px hairline and never by a shadow (3.3.4 and counter-example 10, "ombre
   portee sur une carte ou une bande"). The blocks ship 12-20 px radii and three
   shadow flavours - `0 1px 2px rgba(0,0,0,.05)`, `0 10px 15px -3px
   rgba(0,0,0,.05)`, and a `rgba(219,39,119,.2)` glow under the mini-card CTA of
   host 32 - and the token layer's own `body .gbz-card` (0-1-1) is outranked by
   the id-scoped rules of family B, so the depth layer is restated here.

   Two ids plus the host class: the declaration wins against the block's own
   `<style>` whatever the load order is. `.gbz-content` is added to v1's list
   because family C renders its SEO panel with that name (host 32 measures a
   20 px radius and a `0 10px 15px -3px rgba(0,0,0,.05)` shadow on it). The list
   is the set of containers the 28 hosts really use; nothing outside
   `div.gbz420-gbz` can match. */

body#category:not(.category-id-45) #content div.gbz420-gbz,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-hero,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-panel,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-mini-row,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-card,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-faq,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-footnote,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-content,
body#category:not(.category-id-45) #content div.gbz420-gbz table.gbz-table,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-hero,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-kpi,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-section,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-card,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-prod,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-note,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-quote,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-faq details {
    border-radius: var(--gbz-radius-0, 0);
}

body#category:not(.category-id-45) #content div.gbz420-gbz,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-hero,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-panel,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-card,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-faq,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-footnote,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-content,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-hero,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-kpi,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-section,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-card,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-prod,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-note,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-quote {
    box-shadow: var(--gbz-shadow, none);
}

/* The badge and the controls are the remaining carriers of a shadow: the badge
   ships `0 1px 2px rgba(0,0,0,.05)` in family C, and the mini-card CTA of host 32
   ships a pink glow (`0 4px 6px -1px rgba(219,39,119,.2)`, doubling on hover)
   that belongs to no palette of the charte. The resting box is flattened on the
   states where no other layer can be painting a ring: `:focus` and
   `:focus-visible` are excluded on the controls so that a box-shadow focus ring
   declared elsewhere is never removed from a focusable element. */

body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-badge:not(:focus-visible),
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn:not(:focus):not(:focus-visible),
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn--primary:not(:focus):not(:focus-visible),
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn.outline:not(:focus):not(:focus-visible),
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod .btn-sm:not(:focus):not(:focus-visible) {
    box-shadow: var(--gbz-shadow, none);
}

/* ==========================================================================
   2. The one gradient of the set becomes a flat surface (all 28 hosts)
   --------------------------------------------------------------------------
   Family B paints `linear-gradient(135deg, rgba(brand,.12), transparent)` on its
   hero panel, hosts 4 / 20 paint `linear-gradient(180deg,#fff,#f8fafc)`, and
   hosts 9 / 21 / 22 / 23 / 24 paint a flat pastel (`#faf5ff`, `#fffbf0`,
   `#dcfce7`, `#dbeafe`). Separation stays on the 1 px hairline the block already
   draws. Category 7 has no `.gbz-hero` inside its host, so this rule matches
   nothing there; category 3 keeps its panel geometry and loses only the
   gradient, which is what v1 already did and measured. */

body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-hero {
    background-color: var(--gbz-surface, #fff);
    background-image: none;
}

/* ==========================================================================
   3. Chips, labels and tags: square (all 28 hosts)
   --------------------------------------------------------------------------
   Charter 6.5: a chip is a flat rectangle. `.gbz-mini span` is added to v1's
   list: family B renders its "THC 0 % / sans solvant" chips with it and gives
   them a 999 px radius. The bullet dots (`.gbz-dot`) keep their circle: they are
   legend markers, not chips. */

body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-kicker,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-badge,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-mini span,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod .tag,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-tag {
    border-radius: var(--gbz-radius-0, 0);
}

/* ==========================================================================
   4. Controls (all 28 hosts)
   --------------------------------------------------------------------------
   Charter 6.5 accepts three forms only: a black pill with white ink, a lime pill
   with black ink (on a black band), and a lime rectangular chip with black ink.
   An unrounded primary button and a hover state with no perceptible change are
   both counter-examples (section 10). The blocks draw their controls at 6-12 px
   and paint hover as a border tint, so the radius, the resting ink, the filled
   paint, the lime interaction state, the 44 px floor and the focus-ring colour
   are all restated on a selector that outranks both the bundle and the block.

   4a. Radius: one pill family for every control of the block. The card CTA
       (`.gbz-prod .btn-sm`) is a control too - it navigates and it is the only
       action of its card - so it joins the list.
   ========================================================================== */

body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn.outline,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn--primary,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-toc a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-links a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod .btn-sm,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-btn,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-toc a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-links a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-prod a {
    border-radius: var(--gbz-radius-pill, 999px);
}

/* 4b. Resting ink of every control, restored on top of the theme bundle's
       `a:link:not(.nav-link):not(.btn) { color: #575757 }`. The three hosts
       whose bare `.gbz-btn` is a filled control are re-inked in 4d. */

body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-toc a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-links a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-btn,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-toc a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-links a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-prod a {
    color: var(--gbz-ink, #101010);
}

/* 4c. The filled control: white ink on every host (v1's rule, extended to
       `.gbz-btn--primary` of family B, 10 hosts with a `color:#fff` fill, and to
       the mini-card CTA of hosts 28 / 32 / 36), and the charte's black fill on
       the 26 hosts that are not the approved reference. Measured on their own
       CSS, the fill of `.gbz-btn--primary` (10 hosts) is purple on 12 / 15 / 25 /
       26, sky on 14, magenta on 8, rose on 13, amber on 11, green on 19 and cyan
       on 30; the mini-card CTA of hosts 28 / 32 / 36 is filled with `var(--ink)`.

       The fill is deliberately NOT restated on categories 3 and 7. Their own
       fills already are near-black (`var(--ink)` = #0f172a on category 3,
       `#111827` on category 7), so restating them would move the two approved
       pages to #000000 for no measurable gain, and charte 9.9 and 10 freeze
       those pages ("aucune conversion ... au nom de la charte"). Zero visual
       delta on 3 and 7 is the acceptance criterion of this pass. */

body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn.primary,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn--primary,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod .btn-sm,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-btn.primary {
    color: var(--gbz-white, #fff);
}

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-btn.primary,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-btn--primary,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-prod .btn-sm {
    background-color: var(--gbz-black, #000);
    border-color: var(--gbz-black, #000);
}

/* 4d. The three hosts whose bare `.gbz-btn` IS the filled primary:
       `.gbz420-vape` (28), `.gbz420-fleurs-cbd-et-resines` (32) and
       `.gbz420-extra` (36) declare `background: var(--brand); color: white`. The
       host class is part of the selector on purpose: without it, 4b would paint
       #101010 ink on the #101010 fill those hosts get from section 7.
       `:not(.outline)` keeps the sibling ghost button of hosts 28 and 36
       (`background: transparent; color: var(--ink)`) on the ink of 4b. */

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-vape .gbz-btn:not(.outline),
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-fleurs-cbd-et-resines .gbz-btn:not(.outline),
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-extra .gbz-btn:not(.outline) {
    background-color: var(--gbz-black, #000);
    border-color: var(--gbz-black, #000);
    color: var(--gbz-white, #fff);
}

/* 4e. Hover, active and focus-visible: the lime state of the charter, with the
       pill kept while focused. The blocks' own focus rule sets a radius on the
       focused element, so the radius is restated here or a control would square
       off the moment it takes focus. */

body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn:hover,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn:active,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn:focus-visible,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn--primary:hover,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn--primary:active,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn--primary:focus-visible,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn.outline:hover,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn.outline:active,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn.outline:focus-visible,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-toc a:hover,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-toc a:active,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-toc a:focus-visible,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-links a:hover,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-links a:active,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-links a:focus-visible,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod a:hover,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod a:active,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod a:focus-visible,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod .btn-sm:hover,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod .btn-sm:active,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod .btn-sm:focus-visible,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-btn:hover,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-btn:active,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-btn:focus-visible,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-toc a:hover,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-toc a:active,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-toc a:focus-visible,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-links a:hover,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-links a:active,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-links a:focus-visible,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-prod a:hover,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-prod a:active,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-prod a:focus-visible,
/* The three hosts whose bare `.gbz-btn` is the filled primary take the same lime
   interaction state. Their own hover is `opacity: .9` (28, 36) or a translate
   with a removed glow (32), and rule 4d would otherwise outrank this block and
   leave the pill with no perceptible change (charter 6.5 forbids that). */
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-vape .gbz-btn:not(.outline):hover,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-vape .gbz-btn:not(.outline):active,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-vape .gbz-btn:not(.outline):focus-visible,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-fleurs-cbd-et-resines .gbz-btn:not(.outline):hover,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-fleurs-cbd-et-resines .gbz-btn:not(.outline):active,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-fleurs-cbd-et-resines .gbz-btn:not(.outline):focus-visible,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-extra .gbz-btn:not(.outline):hover,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-extra .gbz-btn:not(.outline):active,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz.gbz420-extra .gbz-btn:not(.outline):focus-visible {
    background-color: var(--gbz-accent, #D4FA0A);
    border-color: var(--gbz-black, #000);
    border-radius: var(--gbz-radius-pill, 999px);
    color: var(--gbz-accent-ink, #000);
}

/* 4f. Touch and target floor of every control of the block (charter 4.4 and
       9.11: "zone tactile de CTA et d'accordeon d'au moins 44 x 44 px").
       Measured before v1, at the two widths:

         category 3   .gbz-btn 40 h at 1440, 37 h at 390 ; .gbz-toc a 36 / 33
         category 7   .gbz420-btn 45 / 42 ; .gbz420-toc a and .gbz420-links a
                      41 / 37 (EN is a 10th row)
         card CTA     .gbz-prod a 36 / 33 ; .gbz420-prod a 41
         mini CTA     .gbz-prod .btn-sm computes 33 h from its 0.4-0.6 rem
                      padding in family C

       Only the box grows: label, href, ink, fill, font and the pill radius are
       untouched, and `inline-flex` plus centring keeps the label optically where
       it was rather than top-aligned in the taller box. The controls sit in
       wrapping flex rows inside their own panels, so the panel absorbs the extra
       height. */

body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn.outline,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-btn--primary,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-toc a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-links a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz-prod .btn-sm,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-btn,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-toc a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-links a,
body#category:not(.category-id-45) #content div.gbz420-gbz .gbz420-prod a {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

/* 4g. The blocks' own focus ring paints a 3 px outline in their accent colour
       on every link and FAQ summary of the widget. The geometry stays; the
       colour becomes the charter ring - the same split the token layer applies
       to the mobile header button. */

body#category:not(.category-id-45) #content div.gbz420-gbz a:focus-visible,
body#category:not(.category-id-45) #content div.gbz420-gbz summary:focus-visible {
    outline-color: var(--gbz-black, #000);
}

/* ==========================================================================
   5. Charte normalisation of the 26 hosts that are not the charter model
   --------------------------------------------------------------------------
   The rule blocks below carry `:not(.category-id-3):not(.category-id-7)`, so the
   two approved pages keep the palette v1 measured. Everything here is a colour
   or type-family declaration read from the served CSS of the 26 hosts; no
   content, no link target, no price, no image and no layout property is touched.

   5a. Hairlines and fills that the blocks hard-coded instead of using one of
       their own variables.

       Measured, family B: `table.gbz-table th` is filled with
       `rgba(<brand>, .08)` on hosts 8, 11, 12, 13, 14, 15, 19, 25, 26, 30, and
       `.gbz-mini span` carries a dashed `rgba(<brand>, .35-.40)` border on the
       same ten hosts. Neither value is a variable, so remapping the variables in
       5b cannot reach them. Measured, family C (host 20 is the one host that
       hard-codes its palette): `border:1px solid #e2e8f0` on the ghost pill, the
       FAQ and the footnote, `border:1px dashed #e2e8f0` on the footnote, and
       `background:#f8fafc` on the footnote and on the table header.

       Charter 3.1: the filet is `#E6E6E6`, the alternate surface `#F6F6F6`, and
       the solid hairline replaces both the tint and the dashed decoration.
       Category 3's dashed `#gbz-footnote` is deliberately left alone (it belongs
       to the approved page).

       The two declarations are split on purpose, and the split is load-bearing:
       `border-style: solid` is written only for the two components that really
       declare a dashed border, together with `border-width: 1px`. A bare
       `border-style: solid` on an element whose border width is still the
       initial `medium` would paint a 3 px border that no block asks for - the
       filled `.gbz-btn` of hosts 28 / 32 / 36 declare no border at all. For
       `.gbz-btn`, `.gbz-faq` and `.gbz-faq details` only the colour is written,
       which cannot create a border on an element that has none. */

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-mini span,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-footnote {
    border-color: var(--gbz-hairline-color, #e6e6e6);
    border-style: solid;
    border-width: 1px;
}

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-faq,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-faq details,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-btn {
    border-color: var(--gbz-hairline-color, #e6e6e6);
}

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz table.gbz-table th {
    background-color: var(--gbz-surface-alt, #f6f6f6);
    color: var(--gbz-ink, #101010);
}

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-footnote {
    background-color: var(--gbz-surface-alt, #f6f6f6);
}

/* 5b. The palette of the 26 hosts, remapped onto the charte by the variables
       they consume. Measured usage of each variable across those hosts:

         --bg      background                              14 hosts
         --soft    background                              14 hosts
         --line    border 26, border-bottom 22, border-top 19
         --ink     color 26, background 11 (the fills),
                   border-color 8
         --muted   color                                   25 hosts
         --brand   color 17, background 23, border-color 17,
                   outline 12, marker 1  (all 26 hosts)
         --ok      background                              10 hosts
         --warn    background                               7 hosts

       Counts are the number of the 26 hosts that consume the variable in that
       role, measured on the served CSS by tools/block-inventory.mjs. `--brand`,
       `--ok` and `--warn` are only ever a background on a control, a chip or a
       legend dot; they are never the colour of running text except through
       `--brand` on the 17 hosts listed above.

       Consequences, all of them deliberate:
         * `--brand` becomes the charte ink, never the lime. It is the colour of
           running text on 17 of the hosts and section 10 forbids lime text
           ("Texte lime sur fond blanc - le lime est un accent d'aplat, pas une
           couleur de texte"). Ink keeps every fill legible as well, and that was
           measured rather than assumed (tools/brand-fill-audit.mjs): each of the
           four rule shapes that fill a control or a chip from `--brand` declares
           a white ink next to it - `.gbz-btn--primary` on 10 hosts,
           `.gbz-btn` on 28 / 32 / 36, `.gbz-btn.primary` on 21 / 22 / 23 / 24,
           `.gbz-prod .tag` on host 32 - so those fills become the charte's black
           pill with white ink. The remaining `--brand` fills are the legend
           bullets (`.gbz-dot`, 11 hosts, no text in the rule). Every
           `border-color: var(--brand)` becomes the strong edge of the same
           system;
         * `--ok` is the one place the lime is legitimate: it paints the legend
           bullet only (`.gbz-dot.ok`, 8-10 px, `background` only, on 10 hosts,
           no text on it). Charte 3.1 lists "puces" among the lime roles. The dot
           measures about 1,3:1 against white, so it is decorative: the label
           next to it carries the meaning. One token change reverts it to
           `--gbz-ink` if the review prefers a black bullet;
         * `--warn` is the fill of the sibling bullet (7 hosts) and it is amber
           (`#b45309` / `#f59e0b`) in every one of them - a hue the charte does
           not carry. It takes the muted role, so the legend reads lime / grey /
           black instead of amber / green / accent.

       Typography: the charte's body face is Karla (4.1) and the blocks declare
       `ui-sans-serif, system-ui, ...` or `Arial, sans-serif`, on the host only -
       measured, the host rule is the only `font-family` declaration of all 28
       blocks. The host takes `--gbz-font-body`, the token `gbz-tokens.css:81`
       declares for exactly this consumption; the token's value is `inherit`, so
       the block inherits the theme's own body face.

       Sizes, weights, letter-spacing and line-heights are otherwise untouched:
       measured on the 26 hosts, the smallest running text is 12 px, the body is
       14-16 px and the line-height is 1.5-1.7, all inside the 4.4 bounds. The
       only two bounds the blocks miss are the 12 px floor of "petit texte"
       (4.4, restated by 9.11): the mini-card tag of hosts 28 / 32 / 36 computes
       10,5 px from `0.75rem` and the mini-card CTA label of hosts 28 / 36
       computes 11,9 px from `0.85rem` (root 14 px, the value `gbz-shell-v1.css`
       documents for this theme). They take `--gbz-fs-small` (0.875rem) here.
       On pages A the same bounds are verified as non-regression and never as a
       motive for modification (9.11), so the rule is scoped to the 26 hosts.

       The display face is NOT switched on for the content headings: charte 4.5
       freezes the display typography of the approved pages and forbids
       converting a family from one face to the other "au nom de la charte". */

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz {
    --bg: var(--gbz-surface, #fff);
    --card: var(--gbz-surface, #fff);
    --hero: var(--gbz-surface, #fff);
    --soft: var(--gbz-surface-alt, #f6f6f6);
    --line: var(--gbz-hairline-color, #e6e6e6);
    --ink: var(--gbz-ink, #101010);
    --muted: var(--gbz-muted, #5f5f5f);
    --brand: var(--gbz-ink, #101010);
    --ok: var(--gbz-accent, #d4fa0a);
    --warn: var(--gbz-muted, #5f5f5f);

    background-color: var(--gbz-surface, #fff);
    background-image: none;
    border-color: var(--gbz-hairline-color, #e6e6e6);
    color: var(--gbz-ink, #101010);
    font-family: var(--gbz-font-body, inherit);
}

/* 5b-bis. The 12 px floor of charter 4.4 for small text, applied to the two
       declarations of the 26 hosts that compute below it (see the measurement
       above). Nothing else of the type scale moves: the eyebrow of hosts 28 and
       36 computes 11,9 px and its own floor is 11 px, so it is left alone. */

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-prod .tag,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-prod .btn-sm {
    font-size: var(--gbz-fs-small, 0.875rem);
}

/* 5c. The text roles, restated on the components that carry them, so that the
       one host which hard-codes `#475569` / `#0f172a` (host 20, the 10-OH-HHC
       pre-roll block) lands on the same two greys as the 25 hosts that read
       their variables. Charter 3.1: ink `#101010`, muted `#5F5F5F`. The eyebrow
       takes the muted role, the colour the token layer gives `body .gbz-eyebrow`
       (`gbz-tokens.css:103`), so the 26 hosts share one eyebrow colour. */

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-kicker,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-sub,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-section p,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-content p,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-card p,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-prod p,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-list,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-faq p,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-faq .a,
body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-footnote {
    color: var(--gbz-muted, #5f5f5f);
}

/* 5d. The mini-card tag. Charte 6.4 draws the category marker of a card as
       small-caps text, not as a filled control; hosts 28 and 36 already paint it
       on the alternate surface with ink text, while host 32 fills it with the
       accent. It takes the neutral chip of its two siblings. Measured, this rule
       changes host 32 and nothing else. */

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-prod .tag {
    background-color: var(--gbz-surface-alt, #f6f6f6);
    color: var(--gbz-ink, #101010);
}

/* ==========================================================================
   6. The `style=""` values Creative Elements writes into the markup
   --------------------------------------------------------------------------
   Measured by tools/inline-overrides-audit.mjs on the 84 routes (fr, en, de):
   inside the widget, exactly six declarations put a colour or a radius in the
   markup itself. An inline declaration outranks every stylesheet rule, so the
   two rules below carry a documented `!important`. The 2026-09-24 public visual
   fixes pass adds the two `!important` rules of section 7c under the same
   policy, on the same kind of target (the six colour values Creative Elements
   writes in the markup of category 7). The parse check asserts both halves of
   that sentence: every `!important` of this file sits in a selector that targets
   an inline style, and the rest of the file has none.

   6a. Legend bullet of the hero list. `span.gbz-dot` on hosts 40 / 41 / 48, in
       the three languages, carries `style="background:#8b5cf6"`. Measured role:
       it is the plain bullet of a `gbz-mini-row` of the hero's `gbz-mini` list,
       whose two siblings in the same list carry `.gbz-dot.ok` and
       `.gbz-dot.warn`. Its own class rule reads `background: var(--brand)`, which
       section 5 remaps to the charte ink, and the legend then reads
       ink (plain) / lime (`.ok`) / muted (`.warn`). Ink is therefore the charte
       value that keeps the three states distinguishable: painting it lime would
       erase the difference with `.ok` on the same list. The 10 x 10 px box, the
       circle and every sibling bullet are untouched.

   6b. Chips whose radius is written inline. Two `<div>` badges of the hero on
       hosts 22 / 23 / 24 (three languages) carry the whole chip style inline, with
       `border-radius: 12px`; the card tag of host 36 (en and de only, its French
       copy has no inline style) carries `border-radius: 4px`. Charte 6.5 wants a
       chip rectangular, and section 3 already squares the `.gbz-badge` and
       `.gbz-prod .tag` classes, so the inline copies take the same radius. The
       `:not()` chain keeps the controls out of the rule: an inline radius on
       `.gbz-btn`, `.gbz-btn--primary`, `.gbz-btn.outline` or `.btn-sm` would
       still render as a pill. Nothing else changes - the chips keep their own
       white fill, hairline border, 13 px label and ink text. */

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz .gbz-mini-row .gbz-dot[style*="background"] {
    background-color: var(--gbz-ink, #101010) !important;
}

body#category:where(:not(.category-id-3):not(.category-id-7):not(.category-id-45)) #content div.gbz420-gbz [style*="border-radius"]:not(.gbz-btn):not(.gbz-btn--primary):not(.gbz-btn.outline):not(.btn-sm) {
    border-radius: var(--gbz-radius-0, 0) !important;
}

/* ==========================================================================
   7. Category 7 (GBZ & GBZ+) - the pastel editorial widget joins the charte
   --------------------------------------------------------------------------
   Owner: public visual fixes pass, 2026-09-24. Source of the defect: the
   read-only audit of the public families, `qa-full-audit-20260924`
   (SYNTHESE.md, "Sections editoriales GBZ encore pastel orange/rose/bleu/vert,
   hors palette de la charte"; evidence
   catalogue/screenshots/cat7-gbz-fr-1440-full.png).

   Surface: the below-grid HTML widget of category 7 only - the host
   `div#gbz-long.gbz420-gbz` of `body#category.category-id-7`. Nothing outside
   that host can match: category 3 keeps its own cream / amber / pastel block,
   category 7 keeps its hero band, its listing bar and its product grid, and the
   26 hosts of section 5 keep the treatment they already had.

   Why a stylesheet and not the content record: the widget is served from
   Creative Elements, from `ps_ce_meta.name='_elementor_data'` (documents
   7040301 fr, 7040101 en, 7040401 de; 20 rows of that table carry the block,
   the 3 documents above plus 17 archived copies, measured 2026-09-24). Every
   pastel it paints is either a variable of its own `<style>` element or a
   `style=""` value written in its markup, so a selector can reach all of them
   without touching one character of the editorial text, one href, the JSON-LD
   FAQ block or one image. Re-tinting by selector also stays reversible with a
   single file, which editing the record would not.

   Measured before this section (fr / en / de, 1440 and 390):
     host `--bg`              #fefbf6 (cream page)
     host `--hero`            #ffe8c3 -> `.gbz420-hero` rgb(255, 232, 195)
     `--mint --rose --sky --sand --lilac --ice`
                              #d1f1c6 #f9d4d4 #c6e0f1 #f9e2c4 #e3d8ff #cce5ff,
                              painted on the six `.gbz420-toc a` chips
     `--ink` / `--muted`      #1f2937 (fr, de) or #111827 (en) / #4b5563
     `--line`                 rgba(0, 0, 0, .08)
     inline section fills     #fff0f0 #eef1fb #e0ffd8 #cce5ff #f9f9f9
     `.gbz420-card`           #f8fafc    `.gbz420-tag`  #f1f5f9
     `.gbz420-note`           #fff7ed    `.gbz420-quote` rule #004d99
     hard-coded text greys    #374151 (hero lead, quotes), #6b7280 (note, KPI
                              labels)
     face                     Arial, sans-serif, on the host and on every rule

   MAPPING (off-palette value -> charte role, section 3.1):
     cream page / inline section fills / `.gbz420-note` / `.gbz420-tag`
                              -> surface-alt #F6F6F6
     amber hero / six pastel chips
                              -> surface-alt #F6F6F6
     `.gbz420-card`           -> surface     #FFFFFF
     `#004d99` rule of the quotes
                              -> accent      #D4FA0A
     ink #1f2937 / #111827    -> ink         #101010
     muted #4b5563 / #6b7280 / #374151
                              -> muted       #5F5F5F
     line rgba(0, 0, 0, .08)  -> hairline    #E6E6E6
     Arial, sans-serif        -> var(--gbz-font-body), the face the 26 hosts of
                              section 5b already take

   The lime of the quote rule is the one accent this mapping adds: charte 3.3.3
   reserves the lime for "filets de mise en avant", the rule keeps its 4 px
   width and its position, and nothing in the block creates a white-on-lime pair
   (charte 3.3.2). The twelve pastel values themselves are not re-used: they
   become the two neutrals of section 3.1.

   Typography (charte 4.4 and 4.5, extension B): the hero `h2` and the section
   `h3` of the block take the display face of the level-B surfaces, in capitals,
   with the hairline the charte gives a section title - the treatment
   `gbz-public-pages-v1.css` sections 1 and 2 already give the un-maquetted
   families. The hero `h2` moves from 28 px Arial to `clamp(24px, 2.1vw, 30px)`
   display, the section `h3` from 20 px Arial to `clamp(20px, 1.7vw, 26px)`
   display: both stay inside the bounds of 4.4 (a section heading is never
   smaller than 20 px) and the running text, the labels, the KPI values and the
   prices keep their size - only the face, the ink and the surfaces move. The
   letter-spacing of those two headings goes to 0, the negative tracking the
   widget shipped (-0.2 px / -0.1 px) being outside the charte.

   Two values are deliberately not restated: the ink of `.gbz420-toc a` and
   `.gbz420-links a` (the widget declares `#111827 !important` on it) and the
   near-black `#111827` fill of `.gbz420-btn.primary`, which section 4c already
   records for this page. Both sit inside the black role and neither reads as a
   pastel; restating them would need an `!important` on a value that is not
   written in the markup, which the policy of section 6 forbids.
   ========================================================================== */

body#category.category-id-7 #content div.gbz420-gbz {
    --bg: var(--gbz-surface, #fff);
    --card: var(--gbz-surface, #fff);
    --hero: var(--gbz-surface-alt, #f6f6f6);
    --ink: var(--gbz-ink, #101010);
    --muted: var(--gbz-muted, #5f5f5f);
    --line: var(--gbz-hairline-color, #e6e6e6);
    --mint: var(--gbz-surface-alt, #f6f6f6);
    --rose: var(--gbz-surface-alt, #f6f6f6);
    --sky: var(--gbz-surface-alt, #f6f6f6);
    --sand: var(--gbz-surface-alt, #f6f6f6);
    --lilac: var(--gbz-surface-alt, #f6f6f6);
    --ice: var(--gbz-surface-alt, #f6f6f6);

    background-color: var(--gbz-surface, #fff);
    background-image: none;
    border-color: var(--gbz-hairline-color, #e6e6e6);
    color: var(--gbz-ink, #101010);
    font-family: var(--gbz-font-body, inherit);
}

/* 7a. The declarations the widget hard-coded instead of reading one of its own
       variables. Each of them is a colour or a border colour: no box, no
       spacing and no radius of the block moves. */

body#category.category-id-7 #content div.gbz420-gbz .gbz420-hero p {
    color: var(--gbz-muted, #5f5f5f);
}

body#category.category-id-7 #content div.gbz420-gbz .gbz420-kpi {
    background-color: var(--gbz-surface, #fff);
    border-color: var(--gbz-hairline-color, #e6e6e6);
}

body#category.category-id-7 #content div.gbz420-gbz .gbz420-kpi b {
    color: var(--gbz-muted, #5f5f5f);
}

body#category.category-id-7 #content div.gbz420-gbz .gbz420-card {
    background-color: var(--gbz-surface, #fff);
    border-color: var(--gbz-hairline-color, #e6e6e6);
}

body#category.category-id-7 #content div.gbz420-gbz .gbz420-tag {
    background-color: var(--gbz-surface-alt, #f6f6f6);
    border-color: var(--gbz-hairline-color, #e6e6e6);
    color: var(--gbz-ink, #101010);
}

body#category.category-id-7 #content div.gbz420-gbz .gbz420-note {
    background-color: var(--gbz-surface-alt, #f6f6f6);
    border-color: var(--gbz-hairline-color, #e6e6e6);
    color: var(--gbz-muted, #5f5f5f);
}

body#category.category-id-7 #content div.gbz420-gbz .gbz420-quote {
    border-left-color: var(--gbz-accent, #d4fa0a);
    color: var(--gbz-ink, #101010);
}

/* 7b. The two heading levels of the block. Sizes are read from the calculated
       style after the pass, not from a conversion: see the report of the pass. */

body#category.category-id-7 #content div.gbz420-gbz .gbz420-hero h2,
body#category.category-id-7 #content div.gbz420-gbz .gbz420-section h3 {
    color: var(--gbz-black, #000);
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", "Helvetica Neue", Karla, sans-serif;
    font-weight: var(--gbz-weight-display);
    letter-spacing: 0;
    line-height: 1.06;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

body#category.category-id-7 #content div.gbz420-gbz .gbz420-hero h2 {
    font-size: clamp(24px, 2.1vw, 30px);
}

body#category.category-id-7 #content div.gbz420-gbz .gbz420-section h3 {
    border-bottom: var(--gbz-hairline);
    font-size: clamp(20px, 1.7vw, 26px);
    padding-bottom: var(--gbz-space-2);
}

/* 7c. The colour values Creative Elements writes in the markup of this host.
       Measured on the served pages of 2026-09-24: five section fills and one
       grey text colour, in the three languages. An inline declaration outranks
       every stylesheet selector, so these two rules - and only these two of
       section 7 - carry the documented `!important` of section 6. */

body#category.category-id-7 #content div.gbz420-gbz [style*="background:#fff0f0"],
body#category.category-id-7 #content div.gbz420-gbz [style*="background:#eef1fb"],
body#category.category-id-7 #content div.gbz420-gbz [style*="background:#e0ffd8"],
body#category.category-id-7 #content div.gbz420-gbz [style*="background:#cce5ff"],
body#category.category-id-7 #content div.gbz420-gbz [style*="background:#f9f9f9"] {
    background-color: var(--gbz-surface-alt, #f6f6f6) !important;
    border-color: var(--gbz-hairline-color, #e6e6e6);
}

body#category.category-id-7 #content div.gbz420-gbz [style*="color:#4b5563"] {
    color: var(--gbz-muted, #5f5f5f) !important;
}