/* =========================================================
   Shared Filter UI — used by ALL pill-based filters
   (case filter, product filter, and any future filter).
   Namespace: .brk-filter*  +  card states .brk-filter-hide / -show.

   Each concrete filter keeps its own root hook class for JS
   (e.g. .brk-cf / .brk-pf) and data-* map, but renders this
   shared chrome so every filter looks identical.
   ========================================================= */

.brk-filter {
    /* Var en hårdkodad 2px, alltså nästan men inte riktigt knapparnas kant.
       Beslut 2026-08-31: filterknappar ska se likadana ut som vanliga knappar,
       och knapparnas token är --radius-xs (2,222px, satt som
       --btn-border-radius). Skillnaden är under en pixel och syntes aldrig —
       men två närapå lika värden är precis det slags drift som gör att nästa
       person inte vet vilket som gäller.

       Gäller __toggle (en knapp) och __empty (tomtillståndets ruta). Pillren
       och sökfältet låg redan på --radius-xs. Panelens ytterhörn längre ner
       ligger kvar på --radius: den är en yta, inte en knapp. */
    --brk-filter-radius: var(--radius-xs, 2.222px);
    --brk-filter-accent: var(--primary, #ffcd00);
    --brk-filter-ink: var(--text-dark, #000);
    --brk-filter-muted: var(--text-dark-muted, rgba(0,0,0,0.8));
    --brk-filter-line: var(--neutral-trans-20, rgba(0,0,0,0.2));
    --brk-filter-surface: var(--white, #fff);

    font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--brk-filter-ink);
    width: 100%;
}

/* Fill full content width even inside a narrow (ACSS content-width) block. */
.brxe-block:has(.brk-filter),
.brxe-shortcode:has(.brk-filter) {
    max-width: none !important;
    width: 100% !important;
}

/* ── Bar (toggle + results count) ───────────────────────── */
.brk-filter__bar {
    display: flex;
    align-items: center;
    gap: var(--space-m, 1.5rem);
    flex-wrap: wrap;
    padding-bottom: var(--space-s, 1rem);
    border-bottom: 1px solid var(--brk-filter-line);
}

/* ── Toggle — mirrors the theme .btn--outline + .btn--pill buttons:
   transparent body, dark border, dark text, light-grey icon block on
   the right holding the count circle. ─────────────────────────────── */
.brk-filter__toggle {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    padding: 0 0 0 1.5rem;
    background: var(--base);
    border: 0;
    border-radius: var(--brk-filter-radius);
    color: var(--white, #fff);
    font-family: var(--font-condensed);
    font-size: var(--text-s, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: box-shadow var(--dur-base) ease, background-color var(--dur-base) ease, color var(--dur-base) ease;
}

.brk-filter__toggle-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.9rem;
}

.brk-filter__toggle-text > svg {
    flex-shrink: 0;
}

/* Right-hand block (where the icon usually sits on .btn--pill) */
.brk-filter__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin-left: var(--btn-medium-inline, 1.25rem);
    padding: 0 0.9em;
    background: var(--base);
    border-left: 2px solid var(--brk-filter-ink);
    transition: box-shadow var(--dur-base) ease;
}

.brk-filter__toggle:hover,
.brk-filter__toggle[aria-expanded="true"] {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

/* Yellow count circle inside the right block */
.brk-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    height: 2em;
    padding: 0 0.55em;
    background: var(--brk-filter-accent);
    color: var(--brk-filter-ink);
    border-radius: var(--radius-circle, 999px);
    /* Was a literal 0.95rem, which is off the type scale in both directions: the
       root is 62.5% (1rem = 10px), so it rendered at 9.5px — below --text-xs, the
       smallest documented step. Written for a 16px root, where 0.95rem would have
       been 15.2px, and silently shrunk when ACSS set the root. --text-xs lands at
       ~12px and matches .brk-filter__pill, so the badge reads as a sibling of the
       pills rather than as fine print. The circle is sized in em and follows. */
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    line-height: 1;
}

.brk-filter__results {
    margin: 0;
    font-family: var(--font-condensed);
    font-size: var(--text-s, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brk-filter-muted);
}

.brk-filter__results-count {
    color: var(--brk-filter-ink);
}

/* ── Facets (collapsible) ─────────────────────────────────
   The panel animates with grid-template-rows: 0fr → 1fr, not max-height.

   max-height needed a guessed ceiling (it was 1200px) that had to exceed the
   tallest possible panel — the events filter runs 32 pills — and every frame of
   the transition relaid out the facets. 0fr → 1fr animates to the content's real
   height, so nothing has to be guessed and there is no ceiling to outgrow.

   It needs two elements: the outer one owns the row track, the inner one owns
   the columns and the overflow clip. min-height: 0 on the inner is what lets a
   grid item shrink below its content — without it the panel never collapses. */
.brk-filter__facets {
    display: grid;
    grid-template-rows: 0fr;
    /* grid-template-rows is the ONLY animated property. The panel's top spacing
       used to be padding on this element, transitioned alongside the height —
       which is a layout animation too, and would have half-solved the very thing
       this replaced. It is now a spacer row inside (see ::before below). */
    transition: grid-template-rows 0.35s ease;
    margin-top: 0;
    overflow: hidden;
}

.brk-filter__facets-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m, 1.5rem) var(--space-l, 2rem);
    min-height: 0;
    overflow: hidden;
}

/* The panel's breathing room, as CONTENT rather than padding.
   It cannot be padding on either element: a grid item's automatic minimum size
   counts its padding, so the 0fr track resolved to exactly the padding height
   (measured: 30px) and every collapsed filter on the site stood 30px tall.
   An empty full-width first row costs nothing itself — the 30px comes from the
   row-gap below it — and being content, it collapses with the track. */
.brk-filter__facets-inner::before {
    content: '';
    grid-column: 1 / -1;
    height: 0;
}

.brk-filter__facets-inner > .brk-filter__clear {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .brk-filter__facets-inner {
        grid-template-columns: 1fr;
    }
}

.brk-filter__toggle[aria-expanded="true"] ~ .brk-filter__facets,
.brk-filter__bar:has(.brk-filter__toggle[aria-expanded="true"]) + .brk-filter__facets {
    grid-template-rows: 1fr;
    margin-top: 0;
}

.brk-filter__facet {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.brk-filter__facet-title {
    padding: 0;
    margin: 0 0 0.75rem 0;
    font-family: var(--font-condensed);
    font-size: var(--text-s, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brk-filter-muted);
}

/* ── Pills ──────────────────────────────────────────────── */
.brk-filter__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.brk-filter__pill {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    /* 1 px mer upptill än nedtill: Geist har ascent 12 / descent 4 vid 12 px,
       så versalerna hamnar ~1 px över mitten när linjeboxen centreras. */
    padding: calc(0.4rem + 1px) 2rem 0.4rem;
    background: transparent;
    border: 1px solid var(--brk-filter-line);
    border-radius: var(--radius-xs, 2.222px);
    color: var(--brk-filter-ink);
    font-family: "Geist", -apple-system, sans-serif;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.brk-filter__pill:hover {
    border-color: var(--brk-filter-ink);
}

.brk-filter__pill.is-active {
    background: var(--brk-filter-accent);
    border-color: var(--brk-filter-accent);
    color: var(--brk-filter-ink);
    font-weight: 700;
}

.brk-filter__pill:focus-visible {
    outline: 2px solid var(--brk-filter-accent);
    outline-offset: 2px;
}

.brk-filter__clear {
    align-self: flex-start;
    background: transparent;
    border: 0;
    padding: 0.25rem 0;
    color: var(--brk-filter-muted);
    font-size: var(--text-m, 1rem);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color var(--dur-fast) ease;
}

.brk-filter__clear:hover {
    color: var(--brk-filter-ink);
}

/* ── Empty state ────────────────────────────────────────── */
.brk-filter__empty {
    margin: var(--space-m, 1.5rem) 0;
    padding: var(--space-l, 2rem);
    text-align: center;
    background: var(--brk-filter-line);
    border-radius: var(--brk-filter-radius);
    color: var(--brk-filter-muted);
    font-size: var(--text-s, 0.875rem);
}

.brk-filter__empty-reset {
    margin-left: 0.5rem;
    background: transparent;
    border: 0;
    color: var(--brk-filter-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    font-size: inherit;
    font-weight: 700;
}

/* ── Count badge on a pill ──────────────────────────────
   How many items the facet would leave visible. Lives here rather than in one
   feature's file so the next filter that wants counts inherits it (DESIGN.md:319
   — pill-filter surfaces share one chrome file). Colour is inherited, so it works
   on both the resting and the active pill without a second rule. */

.brk-filter__pill-count {
    margin-inline-start: 0.5em;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;   /* 2 and 17 must not shift the pill width */
}

/* ── Region variant ─────────────────────────────────────
   The market & language modal (plugins/brokk-regions, [brokk_market_selector]).
   Three deliberate departures from the shared chrome, all scoped to
   .brk-filter--region so .brk-cf / .brk-pf / .brk-ev cannot match:

   1. Squared pills. The 999px capsule above predates DESIGN.md's Shapes rule;
      inside the modal we follow the house style (--radius-xs).
   2. Dark active fill instead of yellow. DESIGN.md:211-213 forbids yellow as a
      text colour on white and a yellow fill would need #332900 text, which at
      13px reads muddy. Dark on white is 16:1 and leaves yellow to the focus ring.
   3. On phones the row scrolls sideways rather than wrapping to three lines. */

.brk-filter--region {
    /* The selected-state ink. Defined once here so swapping it is one edit.
       Not in the DESIGN.md palette: it is the near-black from the approved
       design canvas, chosen over --base (#2d2d2d) for a harder edge at 13px.
       Swap to var(--base) if the brand team would rather not carry a fourth
       near-black. */
    --brk-filter-selected: #14161a;
}

.brk-filter--region .brk-filter__pill {
    border-radius: var(--radius-xs, 2.222px);
    /* The shared pill is 40px. Inside the market dialog every control has to
       clear WCAG 2.5.5's 44x44, so the region chips are raised rather than
       raising all four filter surfaces at once. px, not rem — this must not
       shrink if the 10px root font-size changes. */
    min-height: 44px;
}

.brk-filter--region .brk-filter__pill.is-active {
    background: var(--brk-filter-selected);
    border-color: var(--brk-filter-selected);
    color: var(--white, #fff);
}

.brk-filter--region .brk-filter__pill.is-active .brk-filter__pill-count {
    opacity: 0.75;   /* white on dark needs a touch more weight than dark on white */
}

@media (max-width: 767px) {
    .brk-filter--region .brk-filter__pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .brk-filter--region .brk-filter__pills::-webkit-scrollbar { display: none; }

    .brk-filter--region .brk-filter__pill {
        flex: none;
        scroll-snap-align: start;
    }
}

/* ── Selector variant ───────────────────────────────────
   The machine selector on /product ([brokk_product_filter], .brk-pf). Same
   chrome, presented as the page's entry point rather than as a control tucked
   behind a button: above 991px the panel is already open and the facets read as
   numbered steps in a framed grid, with the result count in a foot below.

   Scoped to .brk-filter--selector so .brk-cf / .brk-ev / --inline / --region
   cannot match — nothing above this comment is modified.

   991px, not the 900px used further up: 991 is the site's real Bricks
   breakpoint (tablet_portrait). The 900px rule stays as it is for the filters
   that already rely on it. */

.brk-filter--selector {
    /* Ram, cellyta och fot — varma toner ur Filterpanel.dc.html (2026-09-16).
       Ramen var --neutral-light (#d9d9d9), ett kallt grått som stack ut mot
       sidans beige. Designens #dcd9d2 och chipkantens #d5d1c8 finns inte i
       paletten: --tertiary-light (#e4dcce) är för ljus för att bära en 1px-linje
       på vitt, så de står här som värden. Foten och hover ligger däremot på
       tokens — --tertiary-ultra-light och --tertiary är designens #F5F2EC och
       #F0EDE6 på under en enhet när. */
    --brk-filter-frame: #dcd9d2;
    --brk-filter-chip-line: #d5d1c8;
    --brk-filter-chip-hover: var(--tertiary, #f0ece4);
    --brk-filter-cell: var(--white, #fff);
    --brk-filter-foot: var(--tertiary-ultra-light, #f6f3ef);

    /* Active-pill ink. Yellow is reserved for the section CTA further down the
       page, so the selected step is dark — the same departure --region makes,
       and for the same reason (DESIGN.md: yellow is a spotlight, not a field).
       --base is the palette's soft black; --region carries its own #14161a and
       is left alone. */
    --brk-filter-selected: var(--base, #2d2d2d);
}

@media (min-width: 992px) {
    /* Nothing left to toggle: the bar holds only the Filter button. */
    .brk-filter--selector .brk-filter__bar {
        display: none;
    }

    .brk-filter--selector .brk-filter__facets {
        grid-template-rows: 1fr;
    }

    /* Kompakt panel (Filterpanel.dc.html, variant 1c, 2026-09-16).

       Tidigare ett rutnät med fasta spalter: rubriken ovanför pillren, 40px
       pillar, och spaltantalet satt per filter i --brk-filter-cols. En cell med
       sju val blev tre rader hög och drog hela raden med sig — nyhetsfiltret
       blev 284px för två facetter.

       Nu är cellerna inte spalter utan tar den bredd innehållet behöver och
       flödar. Rubriken står på samma rad som pillren. En facett med många val
       (Industry, Robot, Year) tar en hel rad själv, korta delar rad. Samma regel
       på alla fyra sidor, så inget filter behöver ett eget spaltmått.

       Linjerna är kanter på cellerna och inte ett gap som lyser igenom. Med
       flödande celler av olika bredd finns inget rutnät att låta bakgrunden
       synas mellan: varje cell har höger- och underkant, och margin-right: -1px
       lägger grannens kant ovanpå, så linjerna aldrig blir dubbla. Den sista
       cellens högerkant hamnar utanför paddingrutan och klipps av overflow. */
    .brk-filter--selector .brk-filter__facets-inner {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        background: var(--brk-filter-cell);
        border: 1px solid var(--brk-filter-frame);
        border-bottom: 0;   /* cellernas underkant är linjen mot foten */

        /* Samma radie som produktkorten under filtret. Ramfärgen var redan
           densamma — #d9d9d9 på båda, uppmätt — så det enda som skilde var att
           filtret hade raka hörn medan korten är rundade.

           Bara de ÖVRE hörnen: rutan består av två element, det här och foten,
           och de delar en kant. Rundas båda helt får man en söm mitt i lådan.

           overflow: hidden behövs eftersom hörncellerna har egen bakgrund och
           annars ritar fyrkantiga hörn ovanpå den rundade ramen. Inget kan
           klippas bort av den: ::before är display: none här, och facetterna är
           plana celler utan utstickande innehåll. */
        border-radius: var(--radius) var(--radius) 0 0;
        overflow: hidden;
    }

    /* The collapse spacer is content; as a flex item it would take a row of
       its own across the top of an already-open panel. */
    .brk-filter--selector .brk-filter__facets-inner::before {
        display: none;
    }

    .brk-filter--selector .brk-filter__facet {
        display: block;
        flex: 1 1 auto;
        /* +1px för margin-right: -1px nedan. Med 100% slutade en cell som tar
           hela raden 1px före ramen, och cellens högerkant blev en andra linje
           bredvid ramens (FAQ, video, news). Nu hamnar kanten under ramen och
           klipps av overflow, som för sista cellen i en delad rad. */
        max-width: calc(100% + 1px);
        padding: 1rem 1.8rem 1.2rem;
        border-right: 1px solid var(--brk-filter-frame);
        border-bottom: 1px solid var(--brk-filter-frame);
        margin-right: -1px;
    }

    /* Rubriken står bredvid pillren, inte ovanför.

       En <legend> blir inte ett flex-objekt i WebKit: där står den kvar ovanför
       även i en flex-fieldset (uppmätt 2026-09-16; Chromium lägger den i raden).
       Därför är cellen ett vanligt block. Rubriken floatar vänster — en floatad
       legend är inte längre fältets "renderade" legend och ritas som vanligt
       innehåll, vilket också håller borta den grå randen överst i cellen
       (uppmätt 2026-08-24). Pillren är en flex-behållare och därmed en egen
       formateringskontext, så de lägger sig BREDVID floaten i bredden som blir
       kvar och bryter rad där, i stället för att flyta runt under rubriken.

       Radhöjden är pillrets, så rubriken ligger mitt på första pillraden även
       när pillren bryter över flera rader. */
    .brk-filter--selector .brk-filter__facet-title {
        float: left;
        line-height: 2.8rem;
        margin: 0 1.4rem 0 0;
        white-space: nowrap;
    }

    .brk-filter--selector .brk-filter__pills {
        gap: .5rem;
        min-width: 0;
    }

    .brk-filter--selector .brk-filter__pill {
        min-height: 0;
        height: 2.8rem;
        padding: 1px 1rem 0;   /* samma optiska knuff som ovan */
        font-size: var(--text-xs, 1.2rem);
        white-space: nowrap;
    }

    .brk-filter--selector .brk-filter__foot {
        background: var(--brk-filter-foot);
        border: 1px solid var(--brk-filter-frame);
        border-top: 0;   /* cellerna ovanför har redan underkant */
        padding: 1rem 1.8rem;
        /* Pillrets höjd plus paddingen. Sökfältet och vyknapparna är lika höga,
           så foten har samma höjd med och utan dem, och när Clear dyker upp. */
        min-height: 4.8rem;
        box-sizing: border-box;
        justify-content: flex-start;
        gap: 1.4rem;
        /* Nedre hörnen — se facets-inner ovan. */
        border-radius: 0 0 var(--radius) var(--radius);
    }
}

/* Step numbers come from a counter rather than the markup: a facet that renders
   empty (no industry terms, say) renumbers the rest by itself, and the digits
   never reach the translated legend strings in wp_trp_*.
   The "/ ''" is CSS alt text — it keeps the counter out of the accessibility
   tree, so the legend is announced as "Industry", not "1 · Industry". */
.brk-filter--selector .brk-filter__facets-inner {
    counter-reset: brk-step;
}

.brk-filter--selector .brk-filter__facet-title::before {
    counter-increment: brk-step;
    content: counter(brk-step) " · " / "";
}

/* Utan numrering — .brk-filter--unnumbered.

   Siffrorna säger "gör det här i ordning". Det stämmer för produktfiltret, som
   leder från bransch via vikt och effekt till maskintyp. Men på case och news
   är facetterna fristående och man klickar dem i vilken ordning som helst; då
   utger sig "1 ·" och "2 ·" för att betyda något de inte betyder.

   Regeln MÅSTE stå efter counter-regeln ovan: båda är två klasser djupa, så
   källordningen avgör. Placerad före vann counter-regeln och siffrorna satt
   kvar trots att modifieraren fanns på roten.

   Modifierare och inte en lista med filternamn, så nästa filter väljer själv
   utan att den här filen behöver ändras. */
.brk-filter--unnumbered .brk-filter__facet-title::before { content: none; }

/* Etiketter i panelen (Filterpanel.dc.html, 2026-09-16).
   Rubrik, räknare och Clear var Saira på 14px. I den kompakta panelen står
   rubriken bredvid 28px-pillren, och i den storleken tar Sairas versaler mer
   plats än de ger. Små Geist-versaler med spärr läses som etiketter och inte
   som rubriker — vilket är vad de är. Geist ärvs från .brk-filter. */
.brk-filter--selector .brk-filter__facet-title,
.brk-filter--selector .brk-filter__results,
.brk-filter--selector .brk-filter__clear {
    font-family: inherit;
    font-size: var(--text-xs, 1.2rem);   /* designens 11px; minsta steget i skalan */
    letter-spacing: .06em;
    text-transform: uppercase;
}

.brk-filter--selector .brk-filter__facet-title,
.brk-filter--selector .brk-filter__results {
    font-weight: 700;
    color: var(--brk-filter-ink);
}

/* Gul punkt efter rubriken när facetten har ett val. Med panelen stängd på
   mobil och pillren i långa rader på desktop syns det annars inte vilken grupp
   som filtrerar. Står alltid i flödet (transparent utan val), så rubriken inte
   flyttar sig när punkten tänds. Ren dekor, därför ingen text. */
.brk-filter--selector .brk-filter__facet-title::after {
    content: '' / '';
    flex: none;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-start: .8rem;
    border-radius: var(--radius-circle, 50%);
    background: transparent;
    vertical-align: middle;
}


.brk-filter--selector .brk-filter__facet:has(.brk-filter__pill.is-active) .brk-filter__facet-title::after {
    background: var(--brk-filter-accent);
}

/* Clear står direkt efter räknaren i stället för längst ut till höger: det är
   räknarens siffra den nollställer. Understruken etikett, inte en knapp. */
.brk-filter--selector .brk-filter__clear {
    align-self: center;
    padding: 0;
    font-weight: 600;
    letter-spacing: .04em;
    text-underline-offset: 3px;
}

/* Pillren. Hover fyller ljust i stället för att mörka kanten — med 28px pillar
   tätt ihop läses en svart kant som ett val. */
.brk-filter--selector .brk-filter__pill {
    border-color: var(--brk-filter-chip-line);
    background: var(--brk-filter-cell);
    font-weight: 500;
}

.brk-filter--selector .brk-filter__pill:hover {
    border-color: var(--brk-filter-chip-line);
    background: var(--brk-filter-chip-hover);
}

/* Foot — result count and Clear filters. Below 991px it sits plain under the
   collapsed panel so the count stays visible without opening anything. */
.brk-filter--selector .brk-filter__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Bara under 992: över det sätter panelregeln ovan egen padding, eget gap och
   Clear direkt efter räknaren — och den här regeln står senare i filen och
   skulle vinna. */
@media (max-width: 991px) {
    .brk-filter--selector .brk-filter__foot {
        justify-content: space-between;
        gap: var(--space-m, 1.5rem);
        padding-block: var(--space-xs, 0.75rem);
    }
}

/* Plural forms. Both are in the markup so all eight languages get translated;
   .is-one is set by the filter's JS whenever exactly one machine matches. */
.brk-filter--selector .brk-filter__results-label--one,
.brk-filter--selector .brk-filter__results.is-one .brk-filter__results-label--many {
    display: none;
}

.brk-filter--selector .brk-filter__results.is-one .brk-filter__results-label--one {
    display: inline;
}

/* It is hidden until a filter is active, which would otherwise leave the foot
   collapsed to one line and then jump. Keep the row height steady. */
.brk-filter--selector .brk-filter__clear[hidden] {
    display: block;
    visibility: hidden;
}

.brk-filter--selector .brk-filter__pill.is-active,
.brk-filter--selector .brk-filter__pill.is-active:hover {
    background: var(--brk-filter-selected);
    border-color: var(--brk-filter-selected);
    color: var(--white, #fff);
    font-weight: 500;
}

.brk-filter--selector .brk-filter__pill.is-active .brk-filter__pill-count {
    opacity: 0.75;   /* white on dark needs a touch more weight than dark on white */
}

/* ── Card states (applied on the Bricks loop cards) ─────── */
.brk-filter-hide {
    display: none !important;
}

/* Matchar, men ligger bortom "Visa fler"-gränsen (nyhetsfiltret). Egen klass
   och inte brk-filter-hide: räknaren ska räkna kortet som en träff. */
.brk-filter-more-hide {
    display: none !important;
}

/* "Visa fler" under rutnätet — news-filter.php renderar, news-filter.js
   flyttar elementet dit och visar det när fler än tolv kort matchar. */
.brk-filter__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-s, 2.2rem);
    margin: var(--space-l, 3rem) 0 0;
}

.brk-filter__more[hidden] { display: none; }

.brk-filter__more-status {
    font-size: var(--text-s, 1.4rem);
    color: var(--brk-filter-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Touch (mobilpoleringen 2026-09-14) ─────────────────────
   Under 992 px är enheten rimligen en telefon eller platta: pillren (40 px),
   filterknappen (39) och sökfältet (40) upp till 44, och sökfältets text till
   16 px så att iOS inte zoomar in fältet vid fokus. px, inte rem, av samma skäl
   som --region-pillren ovan. Desktop lämnas orörd. */
@media (max-width: 991px) {
    .brk-filter__pill,
    .brk-filter__toggle,
    .brk-filter__search-input {
        min-height: 44px;
    }

    /* Två klasser: grundregeln längre ned i filen sätter --text-s med en och
       skulle annars vinna på ordning. */
    .brk-filter .brk-filter__search-input {
        font-size: 16px;
    }

    /* Två klasser: ACSS:s knappregler har samma specificitet som en. */
    .brk-filter__more .brk-filter__more-btn {
        width: 100%;
        min-width: 0;
    }
}

@keyframes brkFilterFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.brk-filter-show {
    animation: brkFilterFadeIn 0.25s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .brk-filter__facets,
    .brk-filter-show {
        animation: none;
        transition: none;
    }
}


/* ══════════════════════════════════════════════════════════
   Sökfält i foten — används av nyhetsfiltret

   Ett avsteg: produkt-, case- och eventfiltret har inget sökfält. Den gamla
   nyhetssidan HADE ett, och att tyst tappa en fungerande funktion i en
   omstylning är sämre än en liten avvikelse. Reglerna ligger här och inte i
   en egen komponentfil, så att nästa filter som behöver sök ärver formen i
   stället för att uppfinna en ny.
   ══════════════════════════════════════════════════════════ */

.brk-filter__search {
    display: flex;
    align-items: center;
    /* Tar plats mellan räknaren och Clear utan att trycka undan någon av dem. */
    flex: 1 1 18rem;
    max-width: 28rem;
    /* Är en <label>, och ett globalt stilark ger label 5px undermarginal. Den
       lyfte sökrutan ur linje med räknaren och gjorde foten 6px högre. */
    margin: 0;
}

.brk-filter__search-input {
    width: 100%;
    min-height: 4rem; /* samma höjd som pillren och vyknapparna */
    padding: .7rem 1.2rem;
    border: 1px solid var(--brk-filter-line);
    border-radius: var(--radius-xs, 2.222px);
    background: var(--brk-filter-surface);
    font-family: inherit;
    font-size: var(--text-s, 1.4rem);
    color: var(--text-dark); /* inherit gav filterradens grå (2,7:1), plan 065 */
}

.brk-filter__search-input::placeholder {
    color: var(--brk-filter-muted);
    opacity: 1;   /* Firefox dämpar platshållare en gång till */
}

.brk-filter__search-input:focus-visible {
    outline: 2px solid var(--brk-filter-accent);
    outline-offset: 1px;
}

/* Etiketten finns för skärmläsare; platshållaren räcker inte som namn.
   Samma teknik som .brokk-market-selector__title i sidhuvudspanelen. */
.brk-filter__sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ══════════════════════════════════════════════════════════
   Foten med sökfält — .brk-filter--search (news, events)

   Räknaren och Clear till vänster, sök (och eventsidans vyknappar) till höger.
   Foten var tidigare ett rutnät som lade sökrutan under facettspalterna. Nu
   flödar cellerna ovanför och har inga fasta spalter att följa, så sökrutan
   får ett eget mått och står mot högerkanten.

   Allt i raden är 28px högt, så foten blir en linje.
   ══════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .brk-filter--search .brk-filter__foot-end {
        display: flex;
        align-items: center;
        gap: 1.4rem;
        margin-inline-start: auto;
    }

    .brk-filter--search .brk-filter__search {
        flex: 0 1 32rem;
        max-width: none;
    }

    .brk-filter--selector .brk-filter__search-input {
        min-height: 0;
        height: 2.8rem;
        padding: 0 1.2rem;
        border-color: var(--brk-filter-chip-line);
        font-size: var(--text-s, 1.4rem);
    }
}