/* =========================================================
   Brokk region/language selector — theme styling.
   Plugin markup: .brokk-region-picker / .brokk-language-switcher /
   .brokk-region-trigger (brokk-regions plugin, css_output OFF).

   NOTE: every picker/switcher rule is scoped with the root class
   (e.g. .brokk-region-picker .brokk-region-picker__groups) to raise
   specificity above the plugin's single-class inline rules — works
   whether or not "Output plugin CSS" is enabled.

   Headings (h2/h3 in the plugin markup) intentionally have NO
   font-family here — they inherit the design system (ACSS/Bricks).
   ========================================================= */

/* ── Header trigger — compact button ────────────────────────
   Låg på --radius-circle och var alltså den enda helt runda knappen i
   sidhuvudet. Utfasningen av pillerform 2026-08-31 tog chipsen och
   filterknapparna men missade den här och språkchipsen nedan — de två sista
   pillren på sajten. Nu på knappfamiljens token, se DESIGN.md > Shapes. */
.brokk-region-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-xs, 2.222px);
    padding: 0.35em 0.75em;
    font: inherit;
    font-size: var(--text-xs, 1.4rem);
    line-height: 1;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.brokk-region-trigger:hover,
.brokk-region-trigger:focus-visible {
    border-color: var(--primary, #ffcd00);
}
.brokk-region-trigger:focus-visible {
    outline: 2px solid var(--primary, #ffcd00);
    outline-offset: 2px;
}
.brokk-region-trigger__icon { flex: 0 0 auto; }
.brokk-region-trigger__market { font-weight: 700; }
.brokk-region-trigger__lang {
    /* deliberate small uppercase label — own font is a design choice */
    font-size: 0.8em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
    padding-left: 0.5em;
    border-left: 1px solid currentColor;
}

/* ── Light variant — for dark sections (footer etc.) ────────
   Usage: [brokk_region_trigger variant="light" class="trigger-lang"] */
.brokk-region-trigger--light {
    color: var(--white, #fff);
}
.brokk-region-trigger--light:hover,
.brokk-region-trigger--light:focus-visible {
    border-color: var(--primary, #ffcd00);
}
.brokk-region-trigger--light .brokk-region-trigger__lang {
    opacity: 0.75;
}

/* ── Section titles — equal size, large (family inherits) ─── */
.brokk-region-picker .brokk-region-picker__title,
.brokk-language-switcher .brokk-language-switcher__title {
    margin: 0 0 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    /* --text-xl (20.86px) i stället för 2rem (20px). Skillnaden är 0.86px och
       poängen är inte den: en literal utanför typskalan följer inte med när
       skalan justeras, och den här rubriken ska följa med. */
    font-size: var(--text-xl);
    line-height: 1.05;
}

.brokk-language-switcher { margin-top: 2.5rem; }

/* ── Region picker — force ONE column ─────────────────────── */
.brokk-region-picker .brokk-region-picker__groups {
    display: block;
    columns: 1;
    column-gap: 0;
}
.brokk-region-picker .brokk-region-picker__group {
    margin: 0 0 1.4rem;
    break-inside: avoid;
}

/* Global = default/superset → first, emphasised, with a divider */
.brokk-region-picker .brokk-region-picker__group--global {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.brokk-region-picker .brokk-region-picker__group--global .brokk-region-picker__region {
    font-weight: 700;
}

/* Continent group label — consistent, readable (family inherits) */
.brokk-region-picker .brokk-region-picker__continent {
    margin: 0 0 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--h4, 2rem);
    color: var(--text-dark-muted, rgba(0,0,0,0.8));
}

/* Countries indented under their continent → clear hierarchy */
.brokk-region-picker .brokk-region-picker__list {
    list-style: none;
    margin: 0;
    padding-left: 0.9rem;
    border-left: 2px solid rgba(0, 0, 0, 0.08);
}
.brokk-region-picker .brokk-region-picker__list li { margin: 0.2rem 0; }

.brokk-region-picker .brokk-region-picker__region {
    display: inline-block;
    background: none;
    border: 0;
    padding: 0.12em 0.4em;
    margin-left: -0.4em;
    border-radius: 3px;
    font: inherit;
    font-size: var(--text-s, 1.4rem);
    line-height: 1.3;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.brokk-region-picker .brokk-region-picker__region:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Language switcher → chips/pills ──────────────────────── */
.brokk-language-switcher .brokk-language-switcher__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Språkchipsen. Samma sak som triggern ovan: pillerformen är utfasad, och ett
   chip delar kant med knapparna. Chipsen i marknadsdialogen är en annan sak —
   de ligger på --hdd-link-radius (4px) och ska vara lite rundare, som resten av
   dropdownens hover- och aktivytor. */
.brokk-language-switcher .brokk-language-switcher__lang {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: var(--radius-xs, 2.222px);
    text-decoration: none;
    color: inherit;
    font-size: var(--text-s, 1.4rem);
    line-height: 1;
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.brokk-language-switcher .brokk-language-switcher__lang:hover {
    border-color: var(--text-dark, #000);
}

/* ── CURRENT selection — unmistakable (both controls) ─────── */
.brokk-region-picker .brokk-region-picker__region.is-current {
    background: var(--primary, #ffcd00);
    /* --text-dark är #000 här; #111 var en literal som råkade ligga nära. */
    color: var(--text-dark, #000);
    font-weight: 700;
    text-decoration: none;
}
.brokk-language-switcher .brokk-language-switcher__lang.is-current {
    background: var(--primary, #ffcd00);
    border-color: var(--primary, #ffcd00);
    color: var(--text-dark, #000);
    font-weight: 700;
}

/* ── Entrance stagger (carried over from the retired rc-selector) ──
   The plugin emits style="--i:n" per item. Applies inside the modal
   AND the footer — cheap, subtle, and disabled for reduced motion. */
.brokk-region-picker .brokk-region-picker__region,
.brokk-language-switcher .brokk-language-switcher__lang {
    animation: brokkFadeUp 0.4s ease both;
    animation-delay: calc(var(--i, 0) * 0.05s + 0.1s);
}
@keyframes brokkFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .brokk-region-picker .brokk-region-picker__region,
    .brokk-language-switcher .brokk-language-switcher__lang {
        animation: none;
    }
}

/* ══════════════════════════════════════════════════════════
   Combined market & language selector — [brokk_market_selector]

   EN PLATT ALFABETISK LISTA. Kontinent duger inte som layoutdrivare när
   marknaderna är fördelade 10 / 2 / 4 / 1. Det har provats två gånger: först
   som rader i ett fyrkolumnersrutnät (sju tomma platser), sedan som kolumner
   (kolumnhöjd 607 mot 77 px, kvot 7,9, och 35 px klipptes bort i botten på
   Europa). Kontinenten är nu en etikett på raden, och `columns` fördelar efter
   höjd — se listregeln längre ned.

   Marknaden är en textrad, inte ett kort. Ramar och pillerknappar drog upp varje
   marknad till 85px för det som är en rad text; utan dem ryms hela panelen utan
   scroll.

   Väljaren finns i TVÅ SKAL med samma innehåll: --dropdown under globen i
   sidhuvudet, --modal från foten och under brytpunkten.

   Nuvarande marknad och språk markeras KLIENTSIDAN av region-switcher.js
   (cache-säkert) med .is-current — därav att highlighten bara är CSS här.
   ══════════════════════════════════════════════════════════ */

.brokk-market-selector {
    color: var(--text-dark, #000);
    display: flex;
    flex-direction: column;
    gap: var(--space-m, 3rem);
}

/* Rubriken är en etikett, inte en rubrik i vikt: panelen är liten nu och en
   h5 tog en fjärdedel av höjden. Linjen under skiljer den från listan utan att
   kosta ytterligare luft. */
.brokk-market-selector .brokk-market-selector__title {
    margin: 0;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--neutral-light, #d9d9d9);
    font-size: var(--text-xs, 1.2rem);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dark-muted, rgba(0,0,0,0.8));
}

/* ── En lodrät lista ──────────────────────────────────────────
   Listan är grupperad per kontinent igen, men grupperna ligger UNDER varandra
   i en enda spalt — inte bredvid varandra i lika breda spalter, som var det
   som tvingade fram den platta listan. Obalansen fanns i spalterna, inte i
   grupperingen: tio marknader mot en gav kolumnhöjd 607 mot 77 px och klippte
   35 px i Europa. Staplade spelar gruppstorleken ingen roll alls — listan blir
   längre, och panelen rullar.

   `columns` är därför borta helt, och med den behovet av `break-inside`:
   ingen rad kan längre delas över en spaltgräns.

   Komprimerad 2026-09-03: panelen var 1 306 px hög med 18 marknader — 54 px
   per rad och 34 px luft mellan grupperna — och rullade på varje skärm under
   1 400 px. Nu ~36 px per rad och 8 px mellan grupperna, vilket är samma
   täthet som sidhuvudets övriga rullgardiner. Linjen mellan grupperna gör
   indelningen, inte luften. */
.brokk-market-selector .brokk-market-selector__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.brokk-market-selector .brokk-market-selector__markets {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Kontinenten som gruppRUBRIK ──────────────────────────────
   Tyst ton och liten grad: den ska gå att läsa när man söker den och annars
   inte konkurrera med marknadsnamnen under sig. Paddingen i sidled följer
   radernas, så rubriken och namnen står i samma vänsterkant. */
/* Regionrubriken får INTE läsa som en marknad. Båda är versaler, och det är
   den likheten som gjorde dem svåra att skilja åt — så skillnaden måste ligga
   någon annanstans än i skiftläget:

     vikt      400 mot marknadernas 700
     tecken    glesare (.14em mot .02em) — versaler i mager vikt behöver det
               för att inte klumpa ihop sig, och glesheten läser i sig som
               etikett snarare än som namn
     färg      60% av textfärgen mot marknadernas fulla svärta
     snitt     brödtextens, medan marknaderna sätts i Saira Semi Condensed

   Graden lämnas på --text-xs. Att krympa den ytterligare hade gett samma
   åtskillnad billigare men gjort rubriken svårläst, och den ska gå att läsa —
   den är enda navigationen genom en lista som rullar. */
.brokk-market-selector .brokk-market-selector__continent {
    margin: 0 0 .2rem;
    padding: 0 1rem;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* INTE var(--neutral): det tokenet är #000000 i den här installationen, så
       rubriken renderades helsvart och gick knappt att skilja från marknaderna.
       Fallbacken #a6a6a6 såg grå ut i koden men användes aldrig — tokenet finns,
       alltså vinner det. Tonen härleds i stället ur textfärgen, samma color-mix
       som ramen på .is-current-chipsen längre ner. 60% ger ~#666 mot vitt,
       kontrast 5,7:1 — dämpat men fortfarande läsbart, och det måste det vara:
       rubrikerna är enda navigationen genom en lista som rullar. */
    color: color-mix(in srgb, var(--text-dark, #000) 60%, transparent);
}

/* En linje per grupp gör indelningen synlig innan man hunnit läsa något alls.
   Regeln sitter på `grupp + grupp` och inte på varje grupp, så listan varken
   börjar eller slutar med en linje som inte skiljer något. Global ligger
   först och får därför sin avgränsning av nästa grupps linje — inte av en
   egen, som hade gett dubbla streck. */
.brokk-market-selector .brokk-market-selector__group + .brokk-market-selector__group {
    padding-top: .8rem;
    border-top: 1px solid var(--neutral-light, #d9d9d9);
}

/* ── Marknadsrad ──────────────────────────────────────────── */

.brokk-market-selector .brokk-market-selector__row {
    /* Paddingen ligger på ALLA rader, inte bara .is-current, så texten står
       stilla när raden blir aktuell — highlighten behöver ingen negativ
       marginal för det. Den blödde tidigare 0.8rem åt vänster, och i första
       kolumnen finns ingen plats där: ytan hamnade utanför panelens innerkant
       och kapades. Övriga kolumner dolde felet genom att blöda in i rutnätets
       gap.

       .4rem lodrätt ger ~36 px rader med chipsen, ~34 utan — samma höjd som
       länkraderna i c-dropdown. 1.1rem gav 54 px och en panel som rullade. */
    padding: .4rem 1rem;
    border-radius: var(--hdd-link-radius, 0.4rem);
}

/* Marknadsnamnet och kontinenten på FÖRSTA raden, språken på en EGEN rad under
   i full bredd. På en enspråkig rad bär <a> layouten, eftersom hela raden är
   länken; på en flerspråkig gör <li> det, eftersom namnet där bara är etikett.

   Rutnät och inte flex, och det är inte en smaksak. Med alla tre på samma
   flexrad delade namnet, kontinenten OCH språken på samma bredd, och då tog
   etiketten plats från de andra två: uppmätt i en 259px spalt fick
   "United Arab Emirates" 187px av de 196 den behöver och bröts på två rader,
   medan Benelux språkpar behövde 188px men fick 168 och staplades. Båda
   försvinner när språken får hela bredden på egen rad. */
.brokk-market-selector .brokk-market-selector__row--single > .brokk-market-selector__link,
.brokk-market-selector .brokk-market-selector__row:not(.brokk-market-selector__row--single) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "market langs";
    align-items: center;
    column-gap: var(--space-xs, 1.2rem);
    min-height: 2.6rem;
}

.brokk-market-selector .brokk-market-selector__market { grid-area: market; }
.brokk-market-selector .brokk-market-selector__langs  { grid-area: langs; }

.brokk-market-selector .brokk-market-selector__market {
    display: block;
    /* font-family: "Saira Semi Condensed", sans-serif;
    text-transform: uppercase; */
    font-size: var(--text-s, 1.4rem);
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

/* Språken står till HÖGER på samma rad som marknadsnamnet. Chipsen får wrappa
   när de inte ryms — Benelux och Schweiz bär två stycken — och radens
   min-height håller då de enspråkiga raderna lika höga ändå. */
.brokk-market-selector .brokk-market-selector__langs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .4rem;
    font-weight: 400;
    font-size: var(--text-xs, 1.2rem);
    line-height: 1.5;
    color: var(--text-dark-muted, rgba(0,0,0,0.8));
    text-align: right;
}

/* Globen framför "Global" — samma ikon som triggern bär, i textens storlek. */
.brokk-market-selector .brokk-market-selector__icon {
    display: inline-flex;
    vertical-align: -0.15em;
    margin-right: 0.5em;
}

.brokk-market-selector .brokk-market-selector__icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* Enspråkig marknad: hela raden är länken, ett tabbstopp. */
.brokk-market-selector a.brokk-market-selector__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ── Flerspråkig marknad ──────────────────────────────────────
   DE TVÅ RADTYPERNA ÄR OLIKA SAKER, och det var kärnan i problemet.

   Enspråkig rad:    <li><a>  hela raden är EN länk
   Flerspråkig rad:  <li><span>Benelux</span> <a>Nederlands</a>·<a>Français</a>

   På en flerspråkig rad är marknadsnamnet inte klickbart alls — bara de två
   små språkorden är länkar. Ändå såg raderna praktiskt taget likadana ut:
   samma versala rubrik, samma grå underrad, ingen som helst antydan om att
   den ena tar dig vidare om du klickar var som helst och den andra bara
   reagerar på två ord i 14px.

   Språken görs därför till egna chips, med samma hoverplatta som alla menyer
   på sajten. Nu ser man att det ÄR val, och man ser hur många de är.

   Radien är --hdd-link-radius, inte helrund. De var helrunda ett tag, men en
   pillerform finns ingen annanstans i menysystemet och drog till sig mer
   uppmärksamhet än den förtjänade. Samma radie som hoverplattan gör att chipset
   läses som en del av raden i stället för som en egen komponent. */
.brokk-market-selector a.brokk-market-selector__lang {
    display: inline-block;
    padding: .15rem .7rem;
    /* Ingen marginal: __langs är en flexrad med gap nu. Den gamla
       `.5rem .4rem 0 0` sköt chipsen nedåt när de låg på en egen rad under
       namnet, och här hade den brutit den lodräta centreringen. */
    border: 1px solid var(--neutral-light, #d9d9d9);
    border-radius: var(--hdd-link-radius, 0.4rem);
    font-size: var(--text-xs, 1.2rem);
    line-height: 1.5;
    text-decoration: none;
    color: inherit;
    transition: background-color 120ms ease, border-color 120ms ease;
}

/* Enspråkiga marknader får INGEN pillerram — språket står som ren text.
   Ramen betyder "det här är ett val": på Benelux kan man välja Nederlands
   ELLER Français, och då måste de två vara var sitt träffbart mål. Sverige har
   inget att välja mellan — hela raden är ett enda mål, och en ram runt
   "Svenska" hade lovat ett klick som inte finns.

   Samma logik som gör att Ireland och United Kingdom inte skriver ut något
   alls: står det inget val, ritas inget val. */

.brokk-market-selector a.brokk-market-selector__lang:hover {
    background: var(--hdd-link-bg-hover, #f4f2ee);
    border-color: var(--neutral-light, #d9d9d9);
}

/* Enspråkig rad: hela raden är länken, alltså bär hela raden plattan — samma
   signal som länkarna i sidhuvudets rullgardiner. Understrykningen som satt
   här förut ersätts, av samma skäl som i megamenyn. */
.brokk-market-selector .brokk-market-selector__row--single:hover {
    background: var(--hdd-link-bg-hover, #f4f2ee);
}

.brokk-market-selector a.brokk-market-selector__link:focus-visible,
.brokk-market-selector a.brokk-market-selector__lang:focus-visible {
    outline: 2px solid var(--secondary, #f1b204);
    outline-offset: 2px;
}

/* ── Nuvarande val ────────────────────────────────────────── */

/* Gul platta, samma markering som c-dropdown ger aria-current. Sätts av JS.

   Stod tidigare på `var(--base-light, #fff8e0)`. Den gula fallbacken lurade:
   --base-light FINNS och är #d9d9d9, alltså neutralt grå, så fallbacken kom
   aldrig till användning. Följden var att aktuell marknad fick en grå platta
   nästan omöjlig att skilja från hoverns #f4f2ee — två olika tillstånd som såg
   likadana ut. Gult är dessutom vad markeringen har i sidhuvudets övriga
   menyer. */
.brokk-market-selector .brokk-market-selector__row.is-current {
    background: var(--hdd-link-bg-hover, #f4f2ee);
    /* Plattan ensam räcker inte: den är EXAKT hoverns ton, så en hovrad rad blev
       omöjlig att skilja från den aktuella. Den gula innerkanten som skilde dem
       åt är borttagen (plan 055: inga markeringar i vänsterkanter); i stället
       är marknadens namn fetat, regeln nedan. */
}

.brokk-market-selector .brokk-market-selector__row.is-current .brokk-market-selector__market {
    font-weight: 700;
}

.brokk-market-selector .brokk-market-selector__row.is-current .brokk-market-selector__market,
.brokk-market-selector .brokk-market-selector__row.is-current .brokk-market-selector__langs {
    color: var(--primary-ultra-dark, #332900);
}

/* Kontinentetiketten får inte tappas bort mot gult — den tysta grå tonen är
   läsbar mot vitt men inte mot #ffcd00. */
.brokk-market-selector .brokk-market-selector__row.is-current .brokk-market-selector__continent {
    color: var(--primary-ultra-dark, #332900);
    opacity: .62;
}

/* Hovern ska inte kunna radera markeringen på den aktuella raden. */
.brokk-market-selector .brokk-market-selector__row--single.is-current:hover {
    background: var(--primary, #ffcd00);
}

/* Chipsens ram på den gula raden: samma ton som texten, nedtonad. Var en
   handblandad rgba(51, 41, 0, .35) — ett värde utan token bakom sig, alltså
   precis den sortens drift som är svår att hitta igen. Härleds nu ur
   --primary-ultra-dark. Första deklarationen är reserv för webbläsare utan
   color-mix: de får ramen i full styrka, vilket är tyngre men inte fel. */
.brokk-market-selector .brokk-market-selector__row.is-current a.brokk-market-selector__lang {
    border-color: var(--primary-ultra-dark, #332900);
    border-color: color-mix(in srgb, var(--primary-ultra-dark, #332900) 35%, transparent);
}

.brokk-market-selector .brokk-market-selector__row.is-current a.brokk-market-selector__lang.is-current {
    border-color: var(--primary-ultra-dark, #332900);
    font-weight: 600;
}

/* ── Foten: regeln en gång, och vägen till Global ─────────── */

.brokk-market-selector .brokk-market-selector__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s, 2.2rem);
    padding-top: var(--space-s, 2.2rem);
    border-top: 1px solid var(--neutral-light, #d9d9d9);
}

.brokk-market-selector .brokk-market-selector__note {
    margin: 0;
    font-size: var(--text-s, 1.5rem);
    color: var(--text-dark-muted, rgba(0,0,0,0.8));
}

/* Global-länken är en riktig Bricks-knapp: .bricks-button .btn--primary sätts i
   markupen och allt utseende ärvs från ramverket. Ingen styling här med flit —
   egen padding, radie eller färg hade forkat knappen från resten av sajten.
   Klassen __global finns kvar enbart som JS-krok: region-switcher.js letar upp
   den för att sätta .is-current. */

/* ══════════════════════════════════════════════════════════
   Dropdownskalet — panelen under globen i sidhuvudet

   Panelen renderas en gång per sida i wp_footer (se switcher.php) och ankras
   mot triggerns rect i JS. Den är alltså INTE syskon till knappen i DOM:en,
   och det är hela skälet till att den kan bo längst ner i dokumentet utan att
   sidhuvudsmallen behöver ändras.

   `position: fixed` — inte absolute — därför att sidhuvudet är sticky. En
   absolutpositionerad panel hade följt dokumentflödet och glidit ifrån knappen
   så fort sidan scrollades.

   Panelformen tas ur --hdd-*, samma tokens som sidhuvudets fyra andra menyer,
   så väljaren blir en femte medlem i systemet i stället för en egen sak.
   ══════════════════════════════════════════════════════════ */

.brokk-region-dropdown {
    position: fixed;
    z-index: 1100;   /* över megamenyns 1000 */
    /* 38rem: listan är enkelspaltig, så bredden styrs av den bredaste raden
       — "United Arab Emirates" plus "English", eller "Switzerland" plus två
       chips — och inte längre av att tre spalter ska få plats bredvid varandra.
       Uppmätt behov ~34rem; 38 ger marginal för tyskans och polskans längder. */
    width: min(38rem, calc(100vw - 3.2rem));
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.2rem 1.4rem 1.2rem;
    box-sizing: border-box;
    background: var(--hdd-panel-bg, #fff);
    border-radius: var(--hdd-panel-radius, 0.8rem);
    box-shadow: var(--hdd-shadow,
                    0 1.6rem 3.2rem -0.8rem rgba(20, 22, 26, 0.18),
                    0 0.2rem 0.8rem rgba(20, 22, 26, 0.06));
    /* Stängt läge: hidden bär korrektheten, opacity bär animationen.
       Samma uppdelning som c-dropdown, och av samma skäl — en panel som bara är
       genomskinlig är fortfarande klickbar. */
    opacity: 0;
    transform: translateY(-0.4rem);
    transition: opacity 180ms cubic-bezier(0.2, 0.7, 0.3, 1),
                transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.brokk-region-dropdown[hidden] {
    display: none;
}

.brokk-region-dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .brokk-region-dropdown {
        transition-duration: 1ms;
        transform: none;
    }
}

/* Rubriken syns i BÅDA skalen. Den var tidigare dold här — globen ansågs säga
   vad panelen är — men panelen är smal nu och listan börjar direkt med
   "GLOBAL", vilket läser som ett val bland andra i stället för som utvägen.
   Etiketten ovanför ramar in vad man tittar på. */

/* Tätare i sidhuvudet än i modalen: panelen hänger under en 34px hög rad och
   ska inte äta halva vyn. */
.brokk-market-selector--dropdown {
    gap: .8rem;
}

.brokk-market-selector--dropdown .brokk-market-selector__foot {
    padding-top: var(--space-xs, 1.2rem);
}

/* ── Ljus variant — [brokk_market_selector variant="light"] ─ */

.brokk-market-selector--light {
    color: var(--text-light, #fff);
}

.brokk-market-selector--light .brokk-market-selector__title,
.brokk-market-selector--light .brokk-market-selector__continent,
.brokk-market-selector--light .brokk-market-selector__langs,
.brokk-market-selector--light .brokk-market-selector__note {
    color: var(--text-light-muted, rgba(255,255,255,0.8));
}

.brokk-market-selector--light .brokk-market-selector__continent,
.brokk-market-selector--light .brokk-market-selector__foot {
    border-color: var(--neutral-dark, #404040);
}

/* ── Bubble shell ──────────────────────────────────────────
   Shared LOOK for the selector modal and the suggestion banner so the two read
   as one family: a rounded white panel that fades + moves in on open.
   Bricks toggles .hide on the popup root, which is what drives the transition.
   POSITIONING is NOT shared — the banner stays anchored bottom-centre (it points
   at something), the modal is centred in the viewport (see below).
   overflow:hidden here is deliberate — it keeps rounded corners clean AND
   stops this outer box from becoming a SECOND scroll container; the only
   element that scrolls is .brokk-market-selector below (was: both scrolled). */
.brx-popup.brokk-region-modal .brx-popup-content,
.brx-popup.brokk-region-banner .brx-popup-content {
    position: fixed;
    left: 50%;
    /* --radius (5px), inte 1rem (10px). Modalen migrerades till tokenet i en
       tidigare omgång med motiveringen att DESIGN.md utesluter 8–16px-radier
       på primära ytor; bannern lämnades då kvar och blev den enda ytan på
       sajten med 10px. Nu delar de radie igen.

       ENDA SYNLIGA ÄNDRINGEN av de fyra: bannerns hörn halveras. Modalen rörs
       inte — den sätter sin egen radie längre ner och gjorde redan det. */
    border-radius: var(--radius, 5px);
    background: var(--white, #fff);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.22);
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, transform var(--dur-slow) cubic-bezier(.16, 1, .3, 1);
}

/* ── Banner sections — fail CLOSED ──────────────────────────
   The banner popup holds two sections, data-brokk-banner="language" and
   ="region", and only one may ever show. They used to be visible by default and
   hidden by JS, which meant that whenever Bricks opened the popup on its own
   contentLoaded interaction without a proposal event having fired, BOTH rendered
   — each with empty placeholders. Hidden here instead, so an unresolved state
   shows nothing at all; region-switcher.js reveals exactly one.
   :not() rather than a display value, so the revealed section keeps whatever
   display Bricks gave its container. */
.brx-popup.brokk-region-banner [data-brokk-banner]:not(.is-shown) {
    display: none !important;
}

/* Banner — anchored to the bottom edge, slides up. */
.brx-popup.brokk-region-banner .brx-popup-content {
    bottom: max(2.25rem, env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(5rem);
}
.brx-popup.brokk-region-banner:not(.hide) .brx-popup-content {
    transform: translateX(-50%) translateY(0);
}

/* Speech-bubble tail — the banner only. A pointer under a wide, multi-column
   modal doesn't aim at anything specific (the trigger can sit anywhere on the
   page), so the modal floats free instead: an island, not a speech bubble. */
.brx-popup.brokk-region-banner .brx-popup-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 0.8rem solid transparent;
    border-top-color: var(--white, #fff);
    filter: drop-shadow(0 0.4rem 0.3rem rgba(0, 0, 0, 0.10));
}

/* Selector modal — smal och CENTRERAD i vyporten.
   Centrerad och inte förankrad i underkanten: triggern kan sitta var som helst
   på sidan, så det finns inget vid nederkanten den hör hemma vid. Den tonar in
   med en kort stigning och en aning skala (ingen greppindikator: den idiomet
   lovar en draglåda underifrån, vilket det här inte är).

   46rem, inte 104: listan är enkelspaltig, så bredden bestäms av den bredaste
   raden och inte av hur många spalter som ska rymmas bredvid varandra. */
.brx-popup.brokk-region-modal .brx-popup-content {
    top: 50%;
    width: min(94vw, 46rem);
    /* Was 1.5rem (15px) and an offset drop shadow. DESIGN.md:292 rules out
       8–16px radii on primary surfaces, and Elevation says shadows carry no
       offset — --box-shadow-xl exists for exactly this element ("floating
       elements (popups, the region modal)"). The banner keeps its own values;
       it is outside this pass. */
    border-radius: var(--radius, 5px);
    box-shadow: var(--box-shadow-xl, 0 0 80px rgba(0, 0, 0, 0.3));
    transform: translate(-50%, calc(-50% + 2rem)) scale(0.98);
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 78rem);
}
.brx-popup.brokk-region-modal:not(.hide) .brx-popup-content {
    transform: translate(-50%, -50%) scale(1);
}

/* Only the MARKET LIST scrolls. The title, the Global row and the region filter
   stay put, so the filter you are using cannot scroll off the top — that is half
   the point of moving from four fixed columns to a filtered, reflowing grid. */
/* Bricks wraps every shortcode in a .brxe-shortcode div, which is display:block
   with the default min-height:auto. That breaks the flex chain: the panel's
   max-height never reaches the selector, so on a phone the market list rendered
   2117px tall inside a 780px panel with overflow:hidden — a third of the markets
   were clipped and unreachable. The wrapper has to shrink too. */
.brx-popup.brokk-region-modal .brx-popup-content > .brxe-shortcode {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.brx-popup.brokk-region-modal .brokk-market-selector {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* padding: 3.5rem 4rem 3rem; */
}
/* __list, inte __continents: den senare klassen försvann när kontinentkorten
   plattades ut till en lista, och regeln har sedan dess inte träffat något. Det
   var därför HELA kortet rullade i stället för bara listan — och därmed också
   skälet till att JS måste nollställa scrollTop vid varje öppning. Nu står
   rubriken och foten still igen. */
.brx-popup.brokk-region-modal .brokk-market-selector__list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    min-height: 0;
    /* Ingen extra padding här. Den fanns för fokusringen på språkpillren, och de
       är borta — nu ligger fokusringen på marknadsraden, som har egen padding.
       Kvarlämnad gav den 1px överflöd (488 mot 487) och därmed en 15px
       scrollränna för ingenting. */
}
/* Den generösa paddingen är avsedd för den breda panelen (80px av 980px = 8%).
   På mobil är panelen bara ~293px, och samma 80px äter 27% av bredden — innehållet
   får då 213px. Nedskalat till spacing-tokens ger 251px användbar bredd utan att
   panelen tappar sin luftiga känsla. Desktop lämnas orörd. */
/* @media (max-width: 991px) {
    .brx-popup.brokk-region-modal .brokk-market-selector {
        padding: var(--space-m) var(--space-s) var(--space-s);
    }
} */

/* Open state — only the shared bit. The transform belongs to each variant
   (centred vs bottom-anchored) and is set in their own blocks above. */
.brx-popup.brokk-region-modal:not(.hide) .brx-popup-content,
.brx-popup.brokk-region-banner:not(.hide) .brx-popup-content {
    opacity: 1;
}

/* The banner is a short notice, not a full picker — and it SIZES ITSELF.
   It used to carry a fixed width, which had to be re-tuned by hand every time
   the copy changed: the label is written at runtime ("Switch to Svenska",
   "Switch to United Arab Emirates") and TranslatePress rewrites both the
   sentence and the buttons per language, so no single number can be right for
   all nine. max-content lets the bubble follow its longest line instead.
     max-width  caps it so a long German sentence wraps rather than spanning the
                viewport.
     min-width  stops a two-word state from collapsing into a sliver.
   The buttons below get white-space: nowrap, which is what actually kept
   breaking — a button is what max-content measures, so if the LABEL may wrap,
   the panel never grows to fit it. */
.brx-popup.brokk-region-banner .brx-popup-content {
    width: max-content;
    /* 58rem, not 52: the widest real pair is "Switch to United Arab Emirates"
       (281px) beside a translated dismiss label (~204px). At 52rem they were
       forced to stack on a desktop viewport; 58rem keeps every market and
       language on one row, and narrow viewports still fall back to stacking. */
    max-width: min(92vw, 58rem);
    min-width: min(92vw, 32rem);
    max-height: none;
}

/* Never break a label mid-phrase. "Stanna kvar i regionen" on two lines next to
   a one-line button is the exact ragged pair this replaces — and with the panel
   now measuring max-content, a wrappable label would let it stay too narrow. */
.brx-popup.brokk-region-banner [data-brokk-action] {
    white-space: nowrap;
}

/* If the pair still cannot fit inside max-width — a long language name in a
   narrow viewport — they stack instead of overflowing the bubble. */
.brx-popup.brokk-region-banner [data-brokk-banner] .brxe-block {
    flex-wrap: wrap;
}

/* Let the SECTION size to its own content.
   The banner's two sections are Bricks containers, and the theme style gives
   every .brxe-container `width: var(--content-width)` — 160rem, i.e. 1600px.
   A child asking for 1600px means the panel's max-content is always far past
   its cap, so "width: max-content" silently degraded to "always max-width".
   This is the same shape as the .brxe-shortcode flex-chain break in the modal:
   a Bricks wrapper carrying a width that defeats the layout around it. */
.brx-popup.brokk-region-banner [data-brokk-banner] {
    width: auto;
}

/* Cap the SENTENCE so it is not what decides the width.
   max-content measures the widest line a child would take unwrapped, and the
   sentence unwrapped is far longer than the button row — so without this the
   bubble sat at its max-width in every state and "adapts to its content" meant
   "always as wide as allowed". The sentence is prose and is happy on two lines;
   the button row is the part that must not wrap, so let that be what the panel
   measures itself against. */
.brx-popup.brokk-region-banner [data-brokk-banner] p {
    max-width: 34rem;
    margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
    .brx-popup.brokk-region-modal .brx-popup-content,
    .brx-popup.brokk-region-banner .brx-popup-content {
        transition: none;
    }
    /* No movement at all — sit in the final position in both states. */
    .brx-popup.brokk-region-modal .brx-popup-content,
    .brx-popup.brokk-region-modal:not(.hide) .brx-popup-content {
        transform: translate(-50%, -50%);
    }
    .brx-popup.brokk-region-banner .brx-popup-content,
    .brx-popup.brokk-region-banner:not(.hide) .brx-popup-content {
        transform: translateX(-50%);
    }
}

/* ── Suggestion banner (Bricks popup .brokk-region-banner) ── */
.brx-popup.brokk-region-banner .brokk-proposed-region,
.brx-popup.brokk-region-banner .brokk-proposed-language,
.brx-popup.brokk-region-banner .brokk-country-name {
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   --offcanvas: marknadsväljaren som en nivå i mobilmenyn
   (design "Offcanvas meny.dc.html", telefon 4, 2026-10-01).

   Samma typografi och linjer som menyns övriga nivåer: kontinenten som liten
   versaletikett, en rad per marknad med hårlinje under, enspråkiga rader med
   språk + chevron, flerspråkiga med 44 px språkknappar. Aktuell marknad får
   gul bock i stället för plattan/strecket från modalen.
   Rubriken ritas av menyn (globen + "Select market"), så väljarens egen
   rubrik finns kvar för skärmläsare men döljs visuellt.
   ══════════════════════════════════════════════════════════ */
.brokk-market-selector--offcanvas {
    gap: 0;
}

.brokk-market-selector--offcanvas .brokk-market-selector__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.brokk-market-selector--offcanvas .brokk-market-selector__list { gap: 0; }

.brokk-market-selector--offcanvas .brokk-market-selector__group + .brokk-market-selector__group {
    padding-top: 0;
    border-top: 0;
}

.brokk-market-selector--offcanvas .brokk-market-selector__continent {
    margin: 0;
    padding: 22px 0 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--text-dark-muted);
}

.brokk-market-selector--offcanvas .brokk-market-selector__row {
    padding: 4px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--neutral-light);
}

.brokk-market-selector--offcanvas .brokk-market-selector__row--single > .brokk-market-selector__link,
.brokk-market-selector--offcanvas .brokk-market-selector__row:not(.brokk-market-selector__row--single) {
    min-height: 44px;
    column-gap: 12px;
}

.brokk-market-selector--offcanvas .brokk-market-selector__market {
    font-size: 15px;
    font-weight: 500;
}

.brokk-market-selector--offcanvas .brokk-market-selector__icon svg {
    width: 18px;
    height: 18px;
}

.brokk-market-selector--offcanvas .brokk-market-selector__langs {
    gap: 6px;
    font-size: 13px;
    color: var(--text-dark-muted);
}

/* Enspråkig rad: språket + chevron (ikonsetets Chevron, vriden att peka höger). */
.brokk-market-selector--offcanvas .brokk-market-selector__link .brokk-market-selector__langs::after {
    content: "";
    width: 18px;
    height: 18px;
    margin-left: 4px;
    background: var(--text-dark);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Flerspråkig rad: språken som 44 px knappar (träffyta). */
.brokk-market-selector--offcanvas a.brokk-market-selector__lang {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 12px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 500;
}

/* Ingen hoverplatta på pekskärmen — raden är redan avgränsad av sin linje. */
.brokk-market-selector--offcanvas .brokk-market-selector__row--single:hover,
.brokk-market-selector--offcanvas .brokk-market-selector__row.is-current,
.brokk-market-selector--offcanvas .brokk-market-selector__row--single.is-current:hover {
    background: none;
    box-shadow: none;
}

.brokk-market-selector--offcanvas .brokk-market-selector__row.is-current .brokk-market-selector__market,
.brokk-market-selector--offcanvas .brokk-market-selector__row.is-current .brokk-market-selector__langs {
    color: var(--text-dark);
}

.brokk-market-selector--offcanvas .brokk-market-selector__market { font-weight: 500; }
.brokk-market-selector--offcanvas .brokk-market-selector__row.is-current .brokk-market-selector__market { font-weight: 600; }

/* Aktuell marknad: gul ring med bock i stället för chevronen. */
.brokk-market-selector--offcanvas .brokk-market-selector__row.is-current .brokk-market-selector__link .brokk-market-selector__langs::after {
    width: 24px;
    height: 24px;
    margin-left: 6px;
    -webkit-mask: none;
            mask: none;
    border-radius: var(--radius-circle);
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.brokk-market-selector--offcanvas .brokk-market-selector__row.is-current a.brokk-market-selector__lang {
    border-color: var(--neutral-light);
}

.brokk-market-selector--offcanvas .brokk-market-selector__row.is-current a.brokk-market-selector__lang.is-current {
    border-color: var(--text-dark);
    background: var(--primary);
    color: var(--primary-ultra-dark, #332900);
}