/*
 * Gameify Header · sidhuvudet
 * ────────────────────────────────────────────────────────────────────────────
 * Bygger skissen "Gameify Startsida" (dc-projektet) och dess ljusa motsvarighet
 * "Gameify Lys variant".
 *
 * ── VARFÖR ETT EGET --hdr-*-LAGER OCH INTE TEMATS VANLIGA TOKENS ────────────
 * ACSS deklarerar om HELA sin palett på .header (se uploads/automatic-css/
 * automatic-variables.css rad 2: :root, .color-scheme--main, .header, .footer,
 * .brx-submenu-toggle button, .brx-nav-nested-items > li > a,
 * .brxe-woocommerce-mini-cart …). En deklaration på själva elementet vinner
 * över den som ärvs från <html>, så allt som färgas med --base, --white,
 * --text-light eller --primary INUTI headern är låst till mörka läget — även
 * när resten av sidan är ljus.
 *
 * Två vägar fanns. Den första var att flippa ACSS-variablerna på exakt de
 * selektorerna (det är vad avsnitt 6 i light-mode.css skissade). Den träffar
 * dock .brxe-woocommerce-mini-cart, och DÄR ligger inte bara kundvagnsikonen
 * utan hela kundvagnslådan — en stor mörk panel som varken finns i skissen
 * eller är beställd. Att vända den som sidoeffekt av ett headerjobb vore fel.
 *
 * Den andra vägen, som är den här filen: ett eget lager --hdr-* som ACSS inte
 * känner till och alltså inte pinnar. Det ärver fritt från .header, och
 * headerns Bricks-inställningar pekar på DE variablerna i stället för på ACSS
 * egna. Färgläget byts då av ett enda block längre ned, och kundvagnslådan,
 * mobilmenyn och knappens ACSS-utseende står kvar orörda.
 *
 * KONSEKVENS ATT KÄNNA TILL: allt nytt som läggs i headern och färgas med
 * --white / --text-light / --base blir mörkläges-färgat även i ljust läge.
 * Använd --hdr-* här inne. Det finns ingen automatik som fångar misstaget.
 *
 * ── GRÖNT ───────────────────────────────────────────────────────────────────
 * Samma tvårollsregel som i tokens.css: brand-grönt #9ee627 har 1,5:1 mot ljus
 * yta och får aldrig bära text. --hdr-accent är därför grönt BLÄCK och byter
 * till #457A00 i ljust läge, medan CTA-knappens FYLLNING är brand-grönt i båda
 * lägena (den ägs av ACSS btn--primary och rörs inte här).
 */


/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS · mörkt läge (default)
   ═══════════════════════════════════════════════════════════════════════════ */

.header {
  --hdr-bg:            rgba(10, 10, 10, .92);
  --hdr-line:          rgba(242, 242, 242, .08);

  --hdr-link:          rgba(242, 242, 242, .75);  /* nav, ikoner, kontroller */
  --hdr-link-strong:   #f2f2f2;                   /* hover på panelrader      */
  --hdr-accent:        var(--green-ink);          /* grönt BLÄCK, aldrig fyllning */

  --hdr-panel-bg:      #131313;
  --hdr-panel-line:    rgba(242, 242, 242, .12);
  --hdr-panel-divider: rgba(242, 242, 242, .08);
  --hdr-panel-foot-bg: rgba(242, 242, 242, .02);
  --hdr-panel-shadow:  0 24px 60px rgba(0, 0, 0, .55);

  --hdr-item:          rgba(242, 242, 242, .82);
  --hdr-item-hover-bg: rgba(242, 242, 242, .06);
  /* AVVIKER MEDVETET FRÅN SKISSEN. Där står .4 respektive .38, vilket mot
     panelens #131313 ger 3,5:1 och 3,3:1 — under AA för text, och båda ÄR text
     (en rubrik och ett antal, inte dekor). .5 ger 4,9:1 och ligger fortfarande
     tydligt under radernas eget bläck, så hierarkin i skissen håller.
     Ljusa lägets #6B716D ligger redan på 4,9:1 mot vitt och behövde ingen
     justering — det var bara mörka läget som var för svagt. */
  --hdr-eyebrow:       rgba(242, 242, 242, .5);
  --hdr-count:         rgba(242, 242, 242, .5);

  --hdr-control-hover: rgba(242, 242, 242, .07);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. TOKENS · ljust läge
   Båda krokarna behövs, precis som i components/light-mode/light-mode.css:
   .color-scheme--alt är den ACSS-växlaren besökare faktiskt använder,
   [data-gmfy-theme="light"] är den manuella testkroken.
   Värdena kommer från "Gameify Lys variant".
   ═══════════════════════════════════════════════════════════════════════════ */

html.color-scheme--alt          .header,
html[data-gmfy-theme="light"]   .header {
  --hdr-bg:            rgba(244, 245, 242, .92);
  --hdr-line:          #DADDD6;

  --hdr-link:          #4A4F4C;
  --hdr-link-strong:   #0F1110;
  --hdr-accent:        #457A00;   /* grönt bläck — 5,2:1 mot vitt */

  --hdr-panel-bg:      #FFFFFF;
  --hdr-panel-line:    #DADDD6;
  --hdr-panel-divider: #E4E7E0;
  --hdr-panel-foot-bg: #F7F8F5;
  --hdr-panel-shadow:  0 24px 60px rgba(15, 17, 16, .13);

  --hdr-item:          #4A4F4C;
  --hdr-item-hover-bg: #EAECE7;
  --hdr-eyebrow:       #6B716D;
  --hdr-count:         #6B716D;

  --hdr-control-hover: #E4E7E0;
}

/* Logotypen är EN inlinad SVG (Bricks svg-element), inte två filer som byts.
   Filen har märket i en egen grupp (#SvgjsG1085, brand-grönt) och ordbilden i
   en annan (#SvgjsG1086, #f2f2f2). I ljust läge räcker det alltså att vända
   ordbilden till bläck — märket är en FYLLNING och bär ingen text, så det får
   stå kvar i brand-grönt enligt tvårollsregeln. Slipper en andra logotypfil
   som kan glida isär från den första. */
html.color-scheme--alt        .header [id="SvgjsG1086"],
html.color-scheme--alt        .header [id="SvgjsG1086"] path,
html[data-gmfy-theme="light"] .header [id="SvgjsG1086"],
html[data-gmfy-theme="light"] .header [id="SvgjsG1086"] path {
  fill: #0F1110;
}


/* Notification bar (BricksExtras, brand-grön bakgrund). Ligger i <header
   id="brx-header"> BREDVID headerraden (.header), inte i den — så --hdr-* når
   den inte och ACSS-pinningen gäller inte heller. Bricks-inställningen säger
   color: var(--text-dark), alltså mörk text — men ACSS byter plats på
   --text-dark/--text-light i ljust läge (.color-scheme--alt), så texten blev
   VIT på #9ee627 (1,5:1) exakt när sidan är ljus. Tvårollsregeln: grönt är
   FYLLNING, texten på det är bläck. Samma token som de aktiva pillren i
   arkivet; mörk i båda lägena. !important: Bricks skriver färgen som
   #brxe-ID{…}. Kryssikonen ärver. (Rapporterat 2026-09-19.) */
.brxe-xnotificationbar { color: var(--on-green, #0F1110) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   3. HEADERRADEN
   ═══════════════════════════════════════════════════════════════════════════ */

/* sticky, inte fixed: raden behåller sin plats i flödet, så hero:n ligger kvar
   under den i stället för att glida upp bakom. Ingen layoutförskjutning, men
   menyn följer med vid scroll — det är vad skissen visar.
   Bakgrunden är halvgenomskinlig och sätts i Bricks (headerBackground →
   var(--hdr-bg)); blur och linje hör inte hemma i en färgkontroll och sätts
   här. Utan blur syns sidans innehåll rakt igenom och länkarna tappar
   kontrast så fort en ljus bildruta passerar. */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--hdr-link);
  border-bottom: 1px solid var(--hdr-line);
}

/* BLURREN LIGGER PÅ ETT PSEUDOELEMENT, INTE PÅ .header — och det är inte
   kosmetik. backdrop-filter gör elementet till containing block för sina
   position:fixed-ättlingar (samma regel som filter och transform). Kundvagns-
   lådan (.cart-detail.off-canvas) är fixed, 400 px bred och parkerad utanför
   skärmen med translateX(400px) — och den renderas INUTI headern. Med blurren
   på .header slutade lådan räknas mot viewporten och började räknas mot
   headern: sidan fick 400 px vågrätt överskott och en horisontell scrollbar på
   varje sida. Pseudoelementet är inte förälder till något, så lådan hittar
   tillbaka till viewporten.

   ::before målas EFTER headerns egen bakgrund men FÖRE innehållet (negativt
   z-index inuti headerns stacking context, som sticky redan skapar). Backdrop
   blir alltså sidan sedd genom den halvgenomskinliga headerbakgrunden —
   precis det som ska suddas. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

/* Bricks lägger dropdown-panelen INUTI headern. Utan den här höjs inte panelen
   över nästa sektion när den sektionen har egen stacking context. */
.header .brxe-nav-nested { z-index: 1; }

/* scale = knapparnas tryckrespons (style.css) — den här regeln vinner över
   ACSS --btn-transition i headern, så den måste bära med sig scale själv. */
.header a,
.header button { transition: color .15s var(--ease-out, ease), background-color .15s var(--ease-out, ease), scale 160ms var(--ease-out, ease); }


/* ═══════════════════════════════════════════════════════════════════════════
   4. MEGAMENYNS PANEL
   Bricks ritar panelen som ul.brx-dropdown-content. Elementets egna
   border-inställningar är BORTTAGNA i Bricks-datan med flit: de emitteras som
   #brxe-mbhnyl{…} och hade med sin ID-specificitet slagit allt här, inklusive
   färglägesväxlingen ovan. Panelens chrome ägs av den här filen.
   ═══════════════════════════════════════════════════════════════════════════ */

.header .brxe-nav-nested .brx-dropdown-content {
  min-width: 440px;
  padding: 0;
  overflow: hidden;
  background: var(--hdr-panel-bg);
  border: 1px solid var(--hdr-panel-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--hdr-panel-shadow);
}

/* Panelen fälls NER från menyraden i stället för att tonas in på plats.
   Bricks har redan opacity + visibility på 200ms och har dessutom `transform`
   i sin transition-property utan att sätta någon — rörelsen nedan kostar
   alltså ingen extra transition, bara värdena.

   VARFÖR SÅ LITET: headern används vid varje sidladdning, flera gånger om
   dagen. På den frekvensen ska rörelse knappt märkas — den ska bara berätta
   varifrån panelen kom. 6px och en procents skalning gör det; mer blir en
   meny som känns långsam efter tredje gången.

   transform-origin: top left binder panelen till menyvalets vänsterkant,
   som den redan ligger under (Bricks sätter position:absolute; top:100%).

   :not(.brx-open) UNDANTAR mobilmenyn. Där byter Bricks panelen till
   position:static och fäller ut den som ett dragspel inuti offcanvas —
   en translateY hade fått den att glida i förhållande till sin egen plats
   i flödet, vilket ser ut som ett fel. */
.header .brxe-nav-nested:not(.brx-open) .brx-dropdown-content {
  transform: translateY(-6px) scale(.99);
  transform-origin: top left;
  transition-timing-function: var(--ease-out);
}
.header .brxe-nav-nested:not(.brx-open) .brxe-dropdown.open > .brx-dropdown-content {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .header .brxe-nav-nested:not(.brx-open) .brx-dropdown-content,
  .header .brxe-nav-nested:not(.brx-open) .brxe-dropdown.open > .brx-dropdown-content {
    transform: none;
  }
}

/* De två kolumnerna. Blocken kommer från Bricks (redigerbara där); här sätts
   bara skiljelinjen, som är en ren utseendedetalj. */
.header .brx-dropdown-content .ghdrmenu { padding: 18px 10px 12px; }

.header .brx-dropdown-content > li > .brxe-block > .brxe-block:first-child,
.header .brx-dropdown-content .ghdrmenu-col:first-child {
  border-right: 1px solid var(--hdr-panel-divider);
}


/* ── Kolumnernas innehåll ───────────────────────────────────────────────────
   .ghdrmenu renderas av [gameify_header_menu] och används på TVÅ ställen:
   megamenyns panel och footerns Produkter-/Merker-kolumner. Den färgas därför
   av egna --gm-*-tokens, inte av --hdr-* direkt. Defaultvärdena nedan är mörka
   och gäller footern, som aldrig byter färgläge; headern skriver över dem med
   sina --hdr-* strax efter, och får därmed med sig ljusa läget.
   ─────────────────────────────────────────────────────────────────────────── */

.ghdrmenu {
  --gm-eyebrow:       rgba(242, 242, 242, .5);
  --gm-item:          rgba(242, 242, 242, .82);
  --gm-item-hover:    #f2f2f2;
  --gm-item-hover-bg: rgba(242, 242, 242, .06);
  --gm-count:         rgba(242, 242, 242, .5);
  --gm-inset:         12px;   /* radernas vågräta luft; se footern nedan */
}

.header .ghdrmenu {
  --gm-eyebrow:       var(--hdr-eyebrow);
  --gm-item:          var(--hdr-item);
  --gm-item-hover:    var(--hdr-link-strong);
  --gm-item-hover-bg: var(--hdr-item-hover-bg);
  --gm-count:         var(--hdr-count);
}

.ghdrmenu__eyebrow {
  margin: 0 0 6px var(--gm-inset);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gm-eyebrow);
}

.ghdrmenu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ghdrmenu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px var(--gm-inset);
  border-radius: var(--radius-m);
  font-weight: 500;
  line-height: 1.2;
  color: var(--gm-item);
  text-decoration: none;
}

.ghdrmenu__item:hover,
.ghdrmenu__item:focus-visible {
  background: var(--gm-item-hover-bg);
  color: var(--gm-item-hover);
}

/* Antalet är Chakra Petch — samma versalgrepp som etiketterna i headern, så
   siffran läses som metadata och inte som en del av produktnamnet. Ingen egen
   font-family på namnet bredvid: det ärver designsystemets brödtext. */
.ghdrmenu__count {
  flex: none;
  font-family: 'chakra-petch', var(--font-heading, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gm-count);
}


/* ── Samma lista i footern ─────────────────────────────────────────────────
   Footerns Produkter- och Merker-kolumner läser numera samma WP-menyer genom
   samma komponent som megamenyn, så antalen och radernas utseende kan inte
   glida isär mellan sidhuvud och sidfot.

   Skillnaden mot panelen är bara INDRAGET. I panelen ger raderna sin egen
   vågräta luft mot panelkanten; i footern finns ingen panel, och 12 px padding
   hade skjutit varje länk inåt medan kolumnrubriken ovanför stod kvar i
   vänsterkant. Raderna dras därför ut lika mycket som de paddas: texten
   ligger i linje med rubriken, men hover-plattan är fortfarande lika bred som
   i headern. Footern byter aldrig färgläge, så defaulttokens ovan gäller. */
.footer .ghdrmenu__list { margin-inline: calc(var(--gm-inset) * -1); }
.footer .ghdrmenu__eyebrow { margin-left: 0; }


/* ── Panelens fotrad ──────────────────────────────────────────────────────── */

/* Blocket och länken är Bricks-element (hxhnaq / zlvcua) och redigerbara där.
   KANTEN ägs däremot av den här filen, inte av elementet: elementets egen
   border stod på var(--neutral-light), alltså ACSS ljusa gråände #d9d9d9, och
   ritade ett nästan vitt streck tvärs över den mörka panelen. Den är
   borttagen ur Bricks-datan — en kant som måste följa färgläget kan inte bo i
   en elementinställning, eftersom Bricks skriver ut den som #brxe-ID{…} och
   vinner på specificitet. Paddingen står kvar i Bricks och är redigerbar. */
.header .brx-dropdown-content > li:last-child > .brxe-block {
  border-top: 1px solid var(--hdr-panel-divider);
  background: var(--hdr-panel-foot-bg);
}

.header .brx-dropdown-content .brxe-text-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--hdr-accent);
}
.header .brx-dropdown-content .brxe-text-link:hover { color: var(--hdr-link-strong); }


/* ═══════════════════════════════════════════════════════════════════════════
   5. KONTROLLERNA · språk, färgläge, kundvagn
   Tre olika ursprung (egen shortcode, egen shortcode, Bricks Woo-element) som
   ska läsa som EN grupp. Gemensam 36×36-ruta med samma hover-platta.
   ═══════════════════════════════════════════════════════════════════════════ */

.header .gflang--header .gflang__toggle,
.header .gthm--header,
.header .mini-cart-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-m);
  color: var(--hdr-link);
}

.header .gthm--header { width: 36px; padding: 0; }

.header .gflang--header .gflang__toggle:hover,
.header .gflang--header.is-open .gflang__toggle,
.header .gthm--header:hover,
.header .mini-cart-link:hover {
  background: var(--hdr-control-hover);
  color: var(--hdr-link-strong);
  opacity: 1;
}

/* Färglägesväxlaren dras ett snäpp närmare språkväljaren. De två hör ihop —
   båda ändrar hur sidan visas, till skillnad från kundvagnen och CTA:n som är
   handling. Kontrollernas gap är detsamma för alla, men växlarens ikon är 16px
   i en 36px-ruta medan språkväljarens flagga fyller sin ruta nästan helt; det
   optiska avståndet mellan dem blev därför större än det mätta. -6px tar igen
   skillnaden utan att röra de andra mellanrummen. */
.header .brxe-shortcode:has(> .gflang--header) { margin-left: -6px; }


/* Kundvagnens antal: grön FYLLNING med mörkt bläck i båda färglägena — samma
   regel som CTA-knappen. Färgerna kommer från Bricks-inställningen på
   elementet; här sätts bara formen så badgen sitter som i skissen. */
.header .cart-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-l);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}


/* ── Kundvagnen visas först när det finns något i den ──────────────────────
   Bricks-elementet står kvar i DOM:en med flit. WooCommerce uppdaterar
   .cart-count genom sina cart-fragment (AJAX), och ligger elementet kvar kan
   :has() följa den förändringen direkt — ikonen dyker upp i samma ögonblick
   som något läggs i kurven, utan omladdning och utan egen JS. Tas elementet
   bort server-side i stället har fragmenten inget att skriva till, och på en
   cachad sida hade ikonen dessutom frusit i fel läge.

   Två signaler, för att raden inte ska hoppa vid sidladdning:
   - .hide-empty-count sätter Bricks SERVER-SIDE, och bara när korgen är tom.
     .cart-count renderas däremot utan .hide/.show — de klasserna kommer först
     med cart-fragmenten (~1–2 s senare). Med bara .hide som villkor syntes
     ikonen tills AJAX svarat och försvann sedan, och hela menyn, färglägesknappen
     och språkväljaren hoppade ~80px åt höger vid varje omladdning (2026-09-16).
   - .cart-count.hide/.show är fragmentens besked, och det vinner när det väl
     finns: :not(.show) släpper fram ikonen när något läggs i en korg som
     var tom vid sidladdning. */
.header .brxe-woocommerce-mini-cart:has(.cart-count.hide),
.header .brxe-woocommerce-mini-cart.hide-empty-count:has(.cart-count:not(.show)) { display: none; }

/* …och då dras kontrollklustret ihop en aning. Gaparna mellan kontrollerna är
   lika stora hela tiden (var(--space-xs), ~20px); det som ser glest ut när
   kundvagnen är dold är att klustret tappar ett element men behåller samma
   luft runt de kvarvarande. 15px tar igen det utan att raden känns trång.

   Villkoret är samma :has() som döljer ikonen, satt på behållaren. Så fort
   Woo:s cart-fragment lägger något i kurven slutar det matcha och raden går
   tillbaka till ordinarie avstånd i samma ögonblick som ikonen dyker upp —
   inga två sanningar att hålla i synk. */
.header .x-header_wrap > .brxe-div:has(.brxe-woocommerce-mini-cart .cart-count.hide),
.header .x-header_wrap > .brxe-div:has(.brxe-woocommerce-mini-cart.hide-empty-count .cart-count:not(.show)) {
  column-gap: 15px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. SMALA SKÄRMAR
   Panelen är 440 px bred på desktop. Under det får den aldrig bli bredare än
   skärmen — annars scrollar hela sidan i sidled.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 520px) {
  .header .brxe-nav-nested .brx-dropdown-content {
    min-width: 0;
    width: min(440px, calc(100vw - 32px));
  }
}

/* Språkväljaren krymper till bara flaggan på telefon.
   Skissen är en desktopvy och säger inget om det här läget, men headerraden
   har en LÅST höjd på mobil (xheaderrow, height:mobile_portrait = 80px). Full
   pill — flagga + "NO" + chevron — är 78 px och sköt ut kontrollgruppen på en
   andra rad, som då hamnade utanför den låsta höjden och låg utan bakgrund
   ovanpå hero:n.

   Alternativet var att dölja väljaren helt under burgaren, men mobilmenyn
   (.x-offcanvas_inner) innehåller ingen språkväxling — då hade telefoner
   blivit helt utan. Koden ensam ryms i 36 px, samma ruta som färglägesväxlaren
   och kundvagnen, och raden går ihop.

   Knappen visar KODEN (NO/SV/EN), inte flaggan (2026-09-16) — flaggorna finns
   kvar i listan. Koden är också knappens tillgängliga namn (flaggan är
   aria-hidden), så den får aldrig döljas med display:none. */
@media (max-width: 1360px) {
  .header .gflang--header .gflang__chev { display: none; }

  .header .gflang--header .gflang__toggle {
    width: 36px;
    padding: 0;
  }
}


/* ── Menyn fälls till burgare tidigare än Bricks brytpunkt ─────────────────
   Bricks har ingen brytpunkt mellan xl (1360) och L (991), och navigationen
   var satt att fällas ihop först på L. Innehållet får inte plats så länge:
   logotyp 150 + meny 542 + kontroller + CTA 120 kräver omkring 1180 px inkl.
   gutter, så mellan 991 och ~1180 bröts menyraden i TVÅ rader — och headern
   har en låst höjd, så andra raden lade sig utanför bakgrunden.

   MÄTT, INTE GISSAT: vid 1185 px ryms raden på en rad, vid 1161 px gör den det
   inte. Gränsen sätts till 1220 för att lämna marginal — radens bredd beror på
   när Chakra Petch hunnit laddas, och en fallbackfont mäter inte likadant.

   Att lägga till en egen Bricks-brytpunkt hade gällt hela sajten och rört
   varje mall. Det här är i stället en ren headerregel.

   !important behövs: Bricks skriver ut varje elements display som #brxe-ID{…}
   och en ID-selektor vinner annars över allt vi kan skriva med klasser.
   Regeln överlappar Bricks egen L-regel under 991 — båda säger samma sak där,
   så överlappet är ofarligt. BYTS NAV- ELLER BURGARELEMENTET UT i byggaren får
   de nya id:n, men selektorerna nedan är klassbaserade och följer med. */
@media (max-width: 1220px) {
  .header .brxe-nav-nested     { display: none !important; }
  .header .brxe-xburgertrigger { display: flex !important; }
}

@media (prefers-reduced-motion: reduce) {
  .header a,
  .header button { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. MOBILMENYN — LIGGER INTE LÄNGRE HÄR (2026-10-13)
   Innehållet i offcanvas (#brxe-chaetn) är sedan mobilmeny v2 ETT
   shortcode-element, [gameify_mobilmeny]. Panelens bredd, höjd, paneler och
   dock bor i components/mobilmeny/mobilmeny.css. Se plans/013-mobilmeny-v2.md.

   Blocket som stod här fixade en flex-wrap-bugg (2026-09-19, iPhone): Bricks
   ger .brxe-block flex-wrap:wrap, och när en undermeny fälldes ut bröts
   knappblocket till en NY KOLUMN till höger om menyn, där panelkanten klippte
   det. Blocket (pyybpy) finns inte kvar, och undermenyerna är egna paneler i
   stället för dragspel — regeln hade inget att träffa. Den tas bort hellre än
   att ligga kvar och se ut som att den gör något.

   Headerns burgare och dess brytpunkt styrs fortfarande härifrån, avsnitt 6. */