@charset "UTF-8";
/* ===========================================================================
   Barnsängar.nu — eget tema (bs-)
   ---------------------------------------------------------------------------
   Hållningen: sidan ska kännas som ett ljust barnrum, inte som en katalog.
   Varm papperston i botten, mycket luft, rundade former och EN tydlig accent
   per sängtyp — så att loftsängar och spjälsängar inte ser ut som samma sida
   med utbytt rubrik.

   Lekfullheten sitter i formerna (rundningar, den vågiga avdelaren, färg-
   chipsen), inte i typsnittsbruset: brödtexten är Inter och lugn, rubrikerna
   Nunito och mjuka. Det är föräldern som läser; barnet tittar på bilderna.
   =========================================================================== */

/* --- Typsnitt ------------------------------------------------------------ */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/nunito-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/nunito-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/fonts/nunito-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/fonts/nunito-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/inter-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/inter-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/inter-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/inter-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/inter-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/inter-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* Papper och bläck. Botten är varm, inte kliniskt vit — ett barnrum är det
     sällan heller. */
  --papper:      #fdfaf5;
  --papper-djup: #f6f0e6;
  --kort:        #ffffff;
  --black:       #22303a;
  --ink:         #22303a;
  --ink-mjuk:    #55666f;
  /* #84949c gav 3,01:1 mot papperet och 2,77:1 mot den tonade ytan. Tonen
     bar liten text pa fjorton stallen, alltsa brodtext, och da kraver
     WCAG 4,5:1. Den har tonen ger 4,94:1 mot papper, 5,14:1 mot kort och
     4,53:1 mot den tonade ytan, och ar fortfarande ljusare an --ink-mjuk. */
  --ink-svag:    #607078;
  --linje:       #e8e0d3;
  --linje-stark: #d6cbb8;

  /* Accentfamiljen. En per sängtyp, satt på <body> via data-ton, så att varje
     hubb får sin egen ton utan att sajten faller isär. */
  --mint:    #3f9e86;
  --dimma:   #6f8ea6;
  --sol:     #e0982a;
  --korall:  #dd6a52;
  --himmel:  #4a82c4;
  --blomma:  #b85e97;
  --mossa:   #6b924e;

  --ton:       var(--himmel);
  --ton-ljus:  color-mix(in srgb, var(--ton) 12%, var(--papper));
  --ton-mork:  color-mix(in srgb, var(--ton) 78%, var(--black));

  --radie:    14px;
  --radie-lg: 22px;
  --radie-xl: 30px;

  --skugga:    0 1px 2px rgb(34 48 58 / .05), 0 4px 14px -6px rgb(34 48 58 / .10);
  --skugga-lyft: 0 2px 4px rgb(34 48 58 / .06), 0 16px 34px -14px rgb(34 48 58 / .22);

  --matt:      1180px;   /* sidans yttermått */
  --matt-text: 720px;    /* läsmåttet för brödtext */

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rubrik: 'Nunito', var(--font);
}

body[data-ton="mint"]   { --ton: var(--mint); }
body[data-ton="dimma"]  { --ton: var(--dimma); }
body[data-ton="sol"]    { --ton: var(--sol); }
body[data-ton="korall"] { --ton: var(--korall); }
body[data-ton="himmel"] { --ton: var(--himmel); }
body[data-ton="blomma"] { --ton: var(--blomma); }
body[data-ton="mossa"]  { --ton: var(--mossa); }

/* --- Grund --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

body {
  margin: 0;
  background: var(--papper);
  color: var(--ink);
  font: 400 1.0625rem/1.68 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--rubrik); font-weight: 800; line-height: 1.16; letter-spacing: -.012em; margin: 0 0 .5em; color: var(--black); }
h1 { font-size: clamp(1.95rem, 1.35rem + 2.4vw, 3.05rem); }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.35rem); font-weight: 700; margin-top: 1.9em; }
h4 { font-size: 1.05rem; font-weight: 700; margin-top: 1.6em; }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.35em; }
li { margin-bottom: .5em; }
li::marker { color: var(--ton); }
strong { font-weight: 600; color: var(--black); }
small { font-size: .875rem; }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--linje); margin: 2.5rem 0; }

a { color: var(--ton-mork); text-decoration-color: color-mix(in srgb, var(--ton) 45%, transparent); text-underline-offset: .18em; text-decoration-thickness: .09em; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--ton); outline-offset: 2px; border-radius: 4px; }

.bs-skip { position: absolute; left: -9999px; }
.bs-skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--kort); padding: .7rem 1.1rem; border-radius: var(--radie); box-shadow: var(--skugga-lyft); }

.bs-shell { width: min(100% - 2.5rem, var(--matt)); margin-inline: auto; }
@media (max-width: 560px) { .bs-shell { width: min(100% - 1.75rem, var(--matt)); } }

/* Ensam brödtextspalt. Shellen smalnas av till läsmåttet och fortsätter
   centrera, istället för att texten får ett max-width inuti full bredd och
   hamnar i vänsterkanten med en halv skärm tomt bredvid sig. */
.bs-shell--las { width: min(100% - 2.5rem, var(--matt-text)); }
@media (max-width: 560px) { .bs-shell--las { width: min(100% - 1.75rem, var(--matt-text)); } }

/* Sma hjalpklasser som ersatter engangs-style i vyerna. Medvetet fa: allt
   utover de har ska losas av en riktig komponentklass. */
.bs-utan-marginal { margin: 0; }
.bs-utan-botten   { margin-bottom: 0; }

.bs-visuellt-dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===========================================================================
   Sidhuvud
   =========================================================================== */
.bs-top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--papper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linje); }
.bs-top__row { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; }

.bs-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--black); font-family: var(--rubrik); font-weight: 800; font-size: 1.24rem; letter-spacing: -.02em; margin-right: auto; }
.bs-brand__mark { width: 34px; height: 34px; flex: none; color: var(--himmel); }
.bs-brand__tld { color: var(--ink-svag); font-weight: 700; }

.bs-nav { display: flex; align-items: center; gap: .15rem; }
.bs-nav a { display: inline-block; padding: .52rem .78rem; border-radius: 999px; text-decoration: none; color: var(--ink-mjuk); font-weight: 500; font-size: .955rem; }
.bs-nav a:hover { background: var(--papper-djup); color: var(--black); }
.bs-nav a[aria-current] { background: var(--ton-ljus); color: var(--ton-mork); font-weight: 600; }

.bs-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--linje-stark); background: var(--kort); border-radius: 12px; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; }
.bs-burger span { display: block; width: 17px; height: 2px; background: var(--black); border-radius: 2px; }

/* Sängtypsraden — sajtens egentliga huvudnavigation. Färgchipsen gör att
   föräldern känner igen sig när hen kommer tillbaka till en hubb. */
.bs-typer { background: var(--kort); border-bottom: 1px solid var(--linje); position: relative; }
.bs-typer__row { display: flex; gap: .4rem; overflow-x: auto; padding: .55rem 0; scrollbar-width: none; }
.bs-typer__row::-webkit-scrollbar { display: none; }
/* Nio hubbar far inte plats pa en rad. Pa stora skarmar radbryts de hellre an
   kapas: en halvsynlig chip i kanten laeses som ett fel, inte som "scrolla". */
@media (min-width: 780px) {
  .bs-typer__row { flex-wrap: wrap; overflow-x: visible; row-gap: .15rem; }
}
/* Pa sma skarmar ar raden en scroller, och da behovs en antydan om att det
   finns mer at hoger. */
@media (max-width: 779px) {
  .bs-typer::after {
    content: ''; position: absolute; inset: 0 0 0 auto; width: 2.2rem;
    background: linear-gradient(to right, transparent, var(--kort));
    pointer-events: none;
  }
}
.bs-typ { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; padding: .4rem .85rem .4rem .5rem; border-radius: 999px; text-decoration: none; color: var(--ink-mjuk); font-size: .92rem; font-weight: 500; border: 1px solid transparent; }
.bs-typ:hover { border-color: var(--linje-stark); color: var(--black); }
.bs-typ[aria-current] { border-color: color-mix(in srgb, var(--prick) 45%, transparent); background: color-mix(in srgb, var(--prick) 10%, var(--kort)); color: var(--black); font-weight: 600; }
.bs-typ__prick { width: 11px; height: 11px; border-radius: 50%; background: var(--prick); flex: none; }

@media (max-width: 860px) {
  .bs-burger { display: inline-flex; }
  .bs-nav { position: absolute; inset: 68px 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--kort); border-bottom: 1px solid var(--linje); padding: .6rem 1.25rem 1.1rem; box-shadow: var(--skugga-lyft); max-height: calc(100vh - 68px); overflow-y: auto; }
  .bs-nav[hidden] { display: none; }
  .bs-nav a { padding: .75rem .6rem; border-radius: 10px; font-size: 1rem; }

  /* Sangtyperna hor hemma i menyn pa mobil. Remsan under huvudet ar en
     svepbar rad dar sex av atta typer hamnar utanfor skarmen, och menyn
     namnde dem inte alls. Sajtens hela bredd ska synas nar man oppnar den. */
  .bs-nav__rubrik { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
                    text-transform: uppercase; color: var(--ink-svag);
                    margin: .9rem .6rem .25rem; padding-top: .7rem; border-top: 1px solid var(--linje); }
  .bs-nav__typ { display: flex !important; align-items: center; gap: .55rem; }
  .bs-nav__prick { width: .6rem; height: .6rem; border-radius: 50%; background: var(--prick); flex: none; }
  .bs-nav__sok { display: flex; gap: .4rem; margin: .9rem .6rem .2rem; padding-top: .8rem; border-top: 1px solid var(--linje); }
  .bs-nav__sok input { flex: 1; min-width: 0; padding: .7rem .8rem; font: inherit; font-size: 1rem;
                       border: 1px solid var(--linje-stark); border-radius: 10px; background: var(--papper); color: var(--ink); }
  .bs-nav__sok button { padding: .7rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
                        border: 0; border-radius: 10px; background: var(--ton); color: #fff; }
}

/* Pa stora skarmar staer sangtyperna redan i remsan under huvudet, sa menyns
   kopia skulle bara vara brus. Sokfaltet flyttas dit in i raden i stallet. */
@media (min-width: 861px) {
  .bs-nav .bs-nav__rubrik, .bs-nav a.bs-nav__typ { display: none; }
  .bs-nav__sok { display: flex; gap: .35rem; margin-left: .6rem; }
  .bs-nav__sok input { width: 9.5rem; padding: .45rem .7rem; font: inherit; font-size: .92rem;
                       border: 1px solid var(--linje-stark); border-radius: 999px;
                       background: var(--papper); color: var(--ink); transition: width .18s ease; }
  .bs-nav__sok input:focus { width: 13rem; }
  .bs-nav__sok button { padding: .45rem .85rem; font: inherit; font-size: .92rem; font-weight: 600;
                        cursor: pointer; border: 0; border-radius: 999px; background: var(--ton-ljus); color: var(--ton-mork); }
  .bs-nav__sok button:hover { background: var(--ton); color: #fff; }
}

/* ===========================================================================
   Hjälte
   =========================================================================== */
/* Bottenluften ligger pa hero-sektionen, inte pa aldersrutan. Rutan staer i
   en centrerad grid tillsammans med hero-bilden, sa en margin-bottom dar
   hade forskjutit kolumnen i stallet for att ge luft ner mot vagen. */
.bs-hero { padding: clamp(2.2rem, 1rem + 4vw, 4.2rem) 0 clamp(2.6rem, 1.6rem + 3vw, 4.6rem); }
.bs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.bs-hero__kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-svag); margin-bottom: .9rem; }
.bs-hero h1 { margin-bottom: .55rem; }
.bs-hero__lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); color: var(--ink-mjuk); max-width: 46ch; }
.bs-hero__lead strong { color: var(--black); }
.bs-hero__bild { border-radius: var(--radie-xl); overflow: hidden; box-shadow: var(--skugga-lyft); aspect-ratio: 4 / 3; background: var(--papper-djup); }
.bs-hero__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) { .bs-hero__grid { grid-template-columns: 1fr; } .bs-hero__bild { order: -1; aspect-ratio: 16/10; } }

/* Åldersväljaren: sajtens mest användbara sak överst, inte en sökruta som
   ändå inte vet vad föräldern menar. */
.bs-alder { margin: clamp(1.6rem, 3vw, 2.6rem) 0 0; padding: 1.15rem 1.25rem 1.3rem; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radie-lg); box-shadow: var(--skugga); }
.bs-alder__h { font-family: var(--rubrik); font-weight: 700; font-size: 1.02rem; margin: 0 0 .85rem; }
/* Tva kolumner, inte auto-fit: med auto-fit blev det tre plus en ensam i
   spalten pa startsidan, vilket sag ut som ett fel snarare an ett val. */
.bs-alder__spar { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (max-width: 420px) { .bs-alder__spar { grid-template-columns: 1fr; } }
.bs-alder__steg { display: block; text-decoration: none; padding: .8rem .9rem; border-radius: var(--radie); border: 1px solid var(--linje); background: var(--papper); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.bs-alder__steg:hover { transform: translateY(-2px); box-shadow: var(--skugga); border-color: color-mix(in srgb, var(--prick) 50%, transparent); }
.bs-alder__alder { display: block; font-family: var(--rubrik); font-weight: 800; font-size: 1.02rem; color: var(--prick); }
.bs-alder__vad { display: block; font-size: .9rem; color: var(--ink-mjuk); margin-top: .1rem; }

/* ===========================================================================
   Sektioner
   =========================================================================== */
.bs-sektion { padding: clamp(2.6rem, 2rem + 3vw, 4.5rem) 0; }
.bs-sektion--tonad { background: var(--papper-djup); }
/* Sektionen följer direkt på ett sidhuvud eller en vågavdelare och behöver
   inte sin fulla toppluft. Ersätter style="padding-top" i vyerna. */
.bs-sektion--tat { padding-top: .5rem; }
.bs-sektion--halv { padding-top: 1rem; }
.bs-sektion--utan-botten { padding-bottom: 1.5rem; }
.bs-sektion__huvud { max-width: 62ch; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.bs-sektion__huvud h2 { margin-top: 0; }
/* Första rubriken i en sektion eller en ruta bär inte sin normala toppmarginal.
   Ersätter style="margin-top:0" på ett tjugotal ställen. */
.bs-sektion > .bs-shell > h2:first-child,
.bs-sektion > .bs-shell > .bs-text > h2:first-child,
.bs-sektion > .bs-shell > .bs-lasvy > .bs-text > h2:first-child { margin-top: 0; }
.bs-sektion__huvud p { color: var(--ink-mjuk); margin-bottom: 0; }

/* Vågig avdelare — den enda rent dekorativa formen på sajten. */
.bs-vag { display: block; width: 100%; height: 28px; color: var(--papper-djup); }
.bs-vag--upp { transform: rotate(180deg); }

/* ===========================================================================
   Sängtypskort (hubbarna på startsidan)
   =========================================================================== */
.bs-typkort { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; }
.bs-typkort__a { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radie-lg); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.bs-typkort__a:hover { transform: translateY(-3px); box-shadow: var(--skugga-lyft); }
.bs-typkort__bild { aspect-ratio: 3 / 2; background: color-mix(in srgb, var(--prick) 10%, var(--papper-djup)); position: relative; }
.bs-typkort__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-typkort__alder { position: absolute; left: .75rem; bottom: .75rem; background: var(--kort); color: var(--black); font-size: .78rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; box-shadow: var(--skugga); }
.bs-typkort__txt { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.bs-typkort__h { font-family: var(--rubrik); font-weight: 800; font-size: 1.18rem; color: var(--black); margin: 0 0 .3rem; }
.bs-typkort__p { font-size: .94rem; color: var(--ink-mjuk); margin: 0 0 .9rem; }
.bs-typkort__fot { margin-top: auto; font-size: .86rem; font-weight: 600; color: var(--prick); display: inline-flex; align-items: center; gap: .35rem; }

/* ===========================================================================
   Facettchips
   =========================================================================== */
.bs-facetter { display: flex; flex-wrap: wrap; gap: .5rem; }
.bs-facett { display: inline-flex; align-items: baseline; gap: .4rem; padding: .34rem .75rem; border-radius: 999px; background: var(--kort); border: 1px solid var(--linje); text-decoration: none; color: var(--ink); font-size: .9rem; font-weight: 500; line-height: 1.5; transition: border-color .15s ease, background .15s ease; }
.bs-facett:hover { border-color: var(--ton); background: var(--ton-ljus); }
.bs-facett[aria-current] { background: var(--ton); border-color: var(--ton); color: #fff; font-weight: 600; }
.bs-facett__n { font-size: .75rem; color: var(--ink-svag); font-variant-numeric: tabular-nums; }
.bs-facett[aria-current] .bs-facett__n { color: rgb(255 255 255 / .8); }

/* Facettvalen ligger som ett rutnät: etiketten i en smal vänsterkolumn, chipsen
   i den breda. Tidigare låg varje etikett på egen rad ovanför sina chips, vilket
   åt ungefär dubbelt så mycket höjd utan att tillföra något. I mobilen faller
   det tillbaka till staplat. */
.bs-facettval { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: .5rem 1.1rem; align-items: start; }
.bs-facettval__etikett { font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-svag); margin: 0; padding-top: .42rem; }
.bs-facettval__val { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 640px) {
  .bs-facettval { grid-template-columns: 1fr; gap: .25rem; }
  .bs-facettval__etikett { padding-top: .5rem; }
  .bs-facettval__etikett + .bs-facettval__val { margin-bottom: .35rem; }
}

/* ===========================================================================
   Erbjudandekort — sajtens arbetshäst
   =========================================================================== */
.bs-rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1.15rem; }
@media (max-width: 560px) { .bs-rutnat { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; } }

.bs-kort { display: flex; flex-direction: column; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radie-lg); overflow: hidden; position: relative; transition: transform .18s ease, box-shadow .18s ease; }
.bs-kort:hover { transform: translateY(-3px); box-shadow: var(--skugga-lyft); }
.bs-kort__bild { aspect-ratio: 1; background: #fff; display: block; position: relative; }
.bs-kort__bild img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8%; }
.bs-kort__band { position: absolute; top: .6rem; left: .6rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.bs-märke { font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: .22rem .55rem; border-radius: 999px; background: var(--ton); color: #fff; }
.bs-märke--lugn { background: var(--kort); color: var(--ink-mjuk); border: 1px solid var(--linje-stark); font-weight: 600; }
.bs-kort__txt { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; flex: 1; gap: .35rem; }
.bs-kort__namn { font-size: .95rem; font-weight: 600; line-height: 1.35; margin: 0; color: var(--black); }
.bs-kort__namn a { color: inherit; text-decoration: none; }
.bs-kort__namn a::after { content: ""; position: absolute; inset: 0; }
.bs-kort__namn a:hover { text-decoration: underline; text-decoration-color: var(--ton); }
.bs-kort__fakta { display: flex; flex-wrap: wrap; gap: .3rem .5rem; font-size: .8rem; color: var(--ink-mjuk); margin: 0; }
.bs-kort__fakta span { display: inline-flex; align-items: center; gap: .22rem; }
.bs-kort__fot { margin-top: auto; padding-top: .55rem; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.bs-kort__pris { font-family: var(--rubrik); font-weight: 800; font-size: 1.06rem; color: var(--black); font-variant-numeric: tabular-nums; }
.bs-kort__pris small { display: block; font-family: var(--font); font-weight: 400; font-size: .74rem; color: var(--ink-svag); letter-spacing: 0; }
.bs-kort__butik { font-size: .78rem; color: var(--ink-svag); text-align: right; }
.bs-kort__varianter { font-size: .76rem; color: var(--ink-svag); }
.bs-kort__not { font-size: .8rem; color: var(--ton-mork); background: var(--ton-ljus); border-radius: 10px; padding: .45rem .6rem; margin: 0; }

/* ===========================================================================
   Text
   =========================================================================== */
.bs-text { max-width: var(--matt-text); }
.bs-text > h2:first-child, .bs-text > h3:first-child, .bs-text > p:first-child { margin-top: 0; }
.bs-text figure { margin: 2rem 0; }
.bs-text figure img { border-radius: var(--radie-lg); display: block; }
.bs-text figcaption { font-size: .86rem; color: var(--ink-svag); margin-top: .55rem; }
.bs-text table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .94rem; }
.bs-text th, .bs-text td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--linje); vertical-align: top; }
.bs-text th { font-family: var(--rubrik); font-weight: 700; font-size: .88rem; color: var(--black); }
.bs-text tbody tr:hover { background: var(--papper-djup); }

.bs-tabellsvep { overflow-x: auto; margin: 1.6rem 0; }
.bs-tabellsvep table { margin: 0; }
/* Tabellen står i en egen sektion och ska följa sektionsbredden, inte
   läsmåttet. Ersätter style="max-width:none". */
.bs-tabellsvep--bred table { max-width: none; }

/* Innehållsspalt med sidoyta — läsmåttet hålls smalt, men sidan blir inte
   en ensam textremsa mitt på skärmen. */
.bs-lasvy { display: grid; grid-template-columns: minmax(0, var(--matt-text)) minmax(0, 280px); gap: clamp(1.8rem, 5vw, 4rem); align-items: start; }
@media (max-width: 960px) { .bs-lasvy { grid-template-columns: 1fr; } .bs-sido { position: static !important; } }
.bs-sido { position: sticky; top: 90px; display: grid; gap: 1.1rem; }

/* Innehallsforteckningen ar ett eget barn till .bs-lasvy och staar fore
   artikeln i DOM. Pa mobil, dar kolumnerna faller ihop, hamnar den da forst
   i texten dar den gor nytta. Tidigare lag den i sidokolumnen och alltsa
   efter hela artikeln, vilket ar den enda plats en innehallsforteckning
   inte hjalper nagon. Pa desktop styr rutnatet tillbaka den till hoger. */
@media (min-width: 961px) {
  .bs-lasvy > .bs-innehall { grid-column: 2; grid-row: 1; position: sticky; top: 90px; }
  .bs-lasvy > article,
  .bs-lasvy > .bs-text { grid-column: 1; grid-row: 1 / span 2; }
  .bs-lasvy > .bs-sido { grid-column: 2; grid-row: 2; position: static; }
}
@media (max-width: 960px) {
  .bs-lasvy > .bs-innehall { margin-bottom: 1.4rem; }
}

.bs-innehall { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radie-lg); padding: 1rem 1.1rem 1.1rem; }
.bs-innehall__h { font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-svag); margin: 0 0 .6rem; }
.bs-innehall ol { list-style: none; margin: 0; padding: 0; counter-reset: bs; }
.bs-innehall li { margin: 0 0 .1rem; }
.bs-innehall a { display: block; padding: .32rem .1rem; font-size: .9rem; text-decoration: none; color: var(--ink-mjuk); border-left: 2px solid transparent; padding-left: .7rem; }
.bs-innehall a:hover { color: var(--black); border-left-color: var(--ton); }

/* ===========================================================================
   Uppmärksamhetsrutor
   =========================================================================== */
.bs-ruta { border-radius: var(--radie-lg); padding: 1.15rem 1.3rem; margin: 1.8rem 0; border: 1px solid var(--linje); background: var(--kort); }
.bs-ruta > :last-child { margin-bottom: 0; }
/* Rutan sitter i ett rutnät eller en sidoyta som redan styr avståndet.
   Ersätter style="margin:0" i vyerna. */
.bs-sido .bs-ruta,
.bs-ruta--infogad { margin: 0; }
/* Listor inuti en ruta ärver rutans avstånd istället för brödtextens. */
.bs-ruta__lista { margin: 0; padding-left: 1.1em; }
.bs-ruta__h { font-family: var(--rubrik); font-weight: 800; font-size: 1.02rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.bs-ruta--sakerhet { background: #fdf4ef; border-color: #f2d7c7; }
.bs-ruta--sakerhet .bs-ruta__h { color: #a8421f; }
.bs-ruta--tips { background: color-mix(in srgb, var(--mint) 8%, var(--kort)); border-color: color-mix(in srgb, var(--mint) 28%, transparent); }
.bs-ruta--tips .bs-ruta__h { color: color-mix(in srgb, var(--mint) 80%, var(--black)); }
.bs-ruta--kort { background: var(--papper-djup); border-color: var(--linje); }
/* Rutan ar det forsta i sin spalt och bar ingen toppmarginal. */
.bs-ruta--forst { margin-top: 0; }
/* Rutan star ensam i en full shell och ska folja laesmattet, men behalla
   vanstermarginalen. Utan shellen runt sig borjade den i fonsterkanten. */
.bs-ruta--las { max-width: var(--matt-text); }
/* Rutan halls till lasmattet aven i en bred sektion. */

/* Kravlista som en förälder faktiskt kan bocka av i butiken. */
.bs-checklista { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .55rem; }
.bs-checklista--tat { margin-bottom: 0; }
.bs-checklista li { display: grid; grid-template-columns: 22px 1fr; gap: .65rem; margin: 0; align-items: start; }
.bs-checklista li::before { content: ""; width: 20px; height: 20px; margin-top: .15rem; border-radius: 6px; border: 2px solid var(--ton); background: var(--ton-ljus); }

/* ===========================================================================
   Frågor och svar (alltid inbäddat på sidan, aldrig en egen hubb)
   =========================================================================== */
.bs-fragor { margin: 2.4rem 0 0; }
.bs-fraga { border-bottom: 1px solid var(--linje); }
.bs-fraga:first-of-type { border-top: 1px solid var(--linje); }
.bs-fraga > summary { cursor: pointer; list-style: none; padding: 1.05rem .3rem 1.05rem 0; font-family: var(--rubrik); font-weight: 700; font-size: 1.04rem; color: var(--black); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bs-fraga > summary::-webkit-details-marker { display: none; }
.bs-fraga > summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2.2px solid var(--ton); border-bottom: 2.2px solid var(--ton); transform: rotate(45deg); transition: transform .2s ease; margin-top: -4px; }
.bs-fraga[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.bs-fraga__svar { padding: 0 0 1.15rem; color: var(--ink-mjuk); max-width: 68ch; }
.bs-fraga__svar > :last-child { margin-bottom: 0; }

/* ===========================================================================
   Butiksrad
   =========================================================================== */
.bs-butiker { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.bs-butik { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1rem; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radie); text-decoration: none; color: var(--ink-mjuk); font-size: .9rem; font-weight: 500; }
.bs-butik:hover { border-color: var(--linje-stark); color: var(--black); }
.bs-butik__logga { height: 22px; width: auto; display: block; }

.bs-butikskort { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.bs-butikskort__a { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radie-lg); padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; }
.bs-butikskort__logga { height: 30px; width: auto; align-self: flex-start; }
.bs-butikskort__namn { font-family: var(--rubrik); font-weight: 800; font-size: 1.1rem; margin: 0; }
.bs-butikskort__p { font-size: .92rem; color: var(--ink-mjuk); margin: 0; }
.bs-butikskort__n { font-size: .84rem; color: var(--ink-svag); margin-top: auto; padding-top: .5rem; }

/* ===========================================================================
   Knappar
   =========================================================================== */
.bs-knapp { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .72rem 1.35rem; border-radius: 999px; font-weight: 600; font-size: .97rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.bs-knapp--fylld { background: var(--ton); color: #fff; }
.bs-knapp--fylld:hover { background: var(--ton-mork); transform: translateY(-1px); }
.bs-knapp--linje { border-color: var(--linje-stark); color: var(--black); background: var(--kort); }
.bs-knapp--linje:hover { border-color: var(--ton); color: var(--ton-mork); }

/* ===========================================================================
   Brödsmulor
   =========================================================================== */
.bs-smulor { font-size: .85rem; color: var(--ink-svag); padding: 1.1rem 0 0; }
.bs-smulor ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.bs-smulor li { margin: 0; display: flex; gap: .5rem; align-items: center; }
.bs-smulor li + li::before { content: "›"; color: var(--linje-stark); }
.bs-smulor a { color: var(--ink-mjuk); text-decoration: none; }
.bs-smulor a:hover { text-decoration: underline; }

/* ===========================================================================
   Sidhuvudsblock på hubb och facett
   =========================================================================== */
.bs-sidhuvud { padding: .6rem 0 clamp(1.6rem, 3vw, 2.4rem); }
/* Felsidor har inget innehall ovanfor sig och behover egen toppluft. */
.bs-sidhuvud--ensam { padding-top: 3rem; }
.bs-sidhuvud__knappar { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.bs-sidhuvud h1 { margin-bottom: .45rem; }
.bs-sidhuvud__lead { font-size: clamp(1.02rem, .98rem + .3vw, 1.14rem); color: var(--ink-mjuk); max-width: 58ch; margin-bottom: 0; }
/* Artikelomslag. Ligger mellan sidhuvudet och brodtexten, i sektionsbredd
   sa att bilden far vara bred aven nar texten haller sig till lasmattet. */
.bs-omslag { margin: .4rem 0 0; }
.bs-omslag img { width: 100%; height: auto; border-radius: var(--radie-lg); display: block; }
@media (min-width: 900px) { .bs-omslag img { aspect-ratio: 16 / 7; object-fit: cover; } }

.bs-sidhuvud__meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.bs-plakett { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 500; color: var(--ink-mjuk); background: var(--kort); border: 1px solid var(--linje); border-radius: 999px; padding: .32rem .8rem; }
.bs-plakett strong { color: var(--black); font-weight: 600; }

/* ===========================================================================
   Länkkort (guider, relaterat)
   =========================================================================== */
.bs-lankkort { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.bs-lankkort__a { display: flex; gap: .9rem; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radie-lg); padding: 1rem 1.1rem; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.bs-lankkort__a:hover { border-color: var(--ton); transform: translateY(-2px); }
.bs-lankkort__ico { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--ton-ljus); color: var(--ton-mork); display: grid; place-items: center; }
/* Alla ikoner fran bs_ikon(). Maste sta har: en <svg> med enbart viewBox
   har ingen egen storlek, och i en flex-rad tar den da hela radens hojd. */
.bs-ikon { width: 1.25em; height: 1.25em; flex: none; }
.bs-lankkort__ico svg { width: 20px; height: 20px; }
.bs-lankkort__h { font-family: var(--rubrik); font-weight: 700; font-size: 1rem; margin: 0 0 .2rem; color: var(--black); }
.bs-lankkort__p { font-size: .88rem; color: var(--ink-mjuk); margin: 0; }

/* ===========================================================================
   Sidfot
   =========================================================================== */
.bs-fot { margin-top: clamp(3rem, 6vw, 5rem); background: var(--black); color: #cdd7dd; padding: clamp(2.4rem, 4vw, 3.6rem) 0 1.8rem; }
.bs-fot a { color: #e7eef2; text-decoration: none; }
.bs-fot a:hover { text-decoration: underline; }
/* Sidfoten bröt ihop pa de vanligaste telefonbredderna. auto-fit packade in en
   kolumn for mycket, och eftersom varumarkeskolumnen fick krympa till noll blev
   den 3 px vid 375, 18 px vid 390 och 42 px vid 414. Texten spillde ur sin ruta
   och maelades ovanpa lankkolumnen, pa varje sida.
   Att den holl vid 320 och 480 men brast vid 375, 390 och 414 ar precis varfor
   ingen sett det: de trasiga bredderna ar iPhone SE, iPhone 15 Pro och Pixel.
   Explicita brytpunkter i stallet for auto-fit, och ingen kolumn far krympa
   under sitt innehalls minsta lasbara bredd. */
.bs-fot__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 620px) {
  .bs-fot__grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .bs-fot__om { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .bs-fot__grid { grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr)); }
  .bs-fot__om { grid-column: auto; }
}
.bs-fot__om p { font-size: .92rem; color: #9fb0ba; max-width: 38ch; }
.bs-fot h2 { font-family: var(--rubrik); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fa2ad; margin: 0 0 .8rem; }
.bs-fot ul { list-style: none; margin: 0; padding: 0; }
.bs-fot li { margin-bottom: .45rem; font-size: .93rem; }
.bs-fot__brand { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--rubrik); font-weight: 800; font-size: 1.16rem; color: #fff; text-decoration: none; margin-bottom: .7rem; }
.bs-fot__brand svg { width: 30px; height: 30px; color: #7fb0e8; }
.bs-fot__slut { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgb(255 255 255 / .11); display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: space-between; font-size: .84rem; color: #8fa2ad; }

/* Annonsmärkning — står vid länkarna, inte bara i sidfoten. */
.bs-annonsnot { font-size: .82rem; color: var(--ink-svag); background: var(--papper-djup); border-radius: 10px; padding: .6rem .85rem; margin: 1.4rem 0; display: flex; gap: .55rem; align-items: flex-start; }
.bs-annonsnot svg { flex: none; width: 16px; height: 16px; margin-top: .15rem; }

/* ===========================================================================
   Sök
   =========================================================================== */
/* Sajten hade ingen sokfunktion alls. Nio hubbar och fyrtio urvalssidor lag
   bakom en svepbar rad, och den viktigaste fragan en foralder staller,
   "ar den har sangen aterkallad", hade ingen vag in. */
.bs-sok { display: flex; gap: .5rem; margin: 1rem 0 .4rem; max-width: 34rem; }
.bs-sok__falt { flex: 1; min-width: 0; padding: .8rem 1rem; font: inherit; font-size: 1.05rem;
                border: 1px solid var(--linje-stark); border-radius: var(--radie);
                background: var(--kort); color: var(--ink); }
.bs-sok__falt:focus { border-color: var(--ton); }
.bs-sok__knapp { padding: .8rem 1.4rem; font: inherit; font-weight: 600; cursor: pointer;
                 border: 0; border-radius: var(--radie); background: var(--ton); color: #fff; }
.bs-sok__knapp:hover { background: var(--ton-mork); }

.bs-traffar { display: flex; flex-direction: column; gap: .55rem; }
.bs-traffar--sangar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: .55rem; }

.bs-traff { display: block; padding: .85rem 1rem; border: 1px solid var(--linje); border-radius: var(--radie);
            background: var(--kort); text-decoration: none; color: var(--ink);
            transition: border-color .15s ease, transform .15s ease; }
.bs-traff:hover { border-color: var(--ton); transform: translateY(-1px); }
.bs-traff__sort { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
                  text-transform: uppercase; color: var(--ton-mork); background: var(--ton-ljus);
                  border-radius: 999px; padding: .12rem .5rem; margin-bottom: .35rem; }
.bs-traff__titel { display: block; font-family: var(--rubrik); font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.bs-traff__text { display: block; font-size: .92rem; color: var(--ink-mjuk); margin-top: .2rem; }
.bs-traff__meta { display: block; font-size: .85rem; color: var(--ink-mjuk); margin-top: .25rem; }
/* Aterkallelser ska synas som det de ar, inte som en rad bland andra. */
.bs-traff--krav { border-left: 4px solid var(--korall); }
.bs-traff--krav .bs-traff__sort { background: color-mix(in srgb, var(--korall) 14%, transparent); color: var(--korall); }
.bs-traff--sang { display: flex; align-items: center; gap: .8rem; }
.bs-traff__bild { width: 72px; height: 72px; object-fit: contain; flex: none;
                  border-radius: 10px; background: #fff; }

/* Paginering. Tva facetter lovade 120 respektive 104 modeller och visade 60,
   utan att saga det och utan vag till resten. */
.bs-sidor { margin: 2rem 0 .5rem; text-align: center; }
.bs-sidor__rad { font-size: .95rem; color: var(--ink-mjuk); margin: 0 0 .8rem; }
.bs-sidor__knappar { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; }
.bs-sidor__nr { display: inline-flex; align-items: center; justify-content: center;
                min-width: 2.4rem; padding: .5rem .6rem; border-radius: 10px;
                border: 1px solid var(--linje); background: var(--kort);
                text-decoration: none; color: var(--ink-mjuk); font-weight: 600; }
.bs-sidor__nr:hover { border-color: var(--ton); color: var(--ton-mork); }
.bs-sidor__nr--nu { background: var(--ton-ljus); border-color: var(--ton); color: var(--ton-mork); }

/* Rubriken över sängkorten. Facettsidorna gick från H1 direkt till kortens
   H3, så listan saknade huvud för den som navigerar på rubriker. Den ska
   synas som en avdelare, inte konkurrera med sidans egen rubrik. */
.bs-listrubrik { font-family: var(--rubrik); font-size: 1.05rem; font-weight: 600;
                 color: var(--ink-mjuk); letter-spacing: .01em;
                 margin: 0 0 .9rem; padding-bottom: .55rem;
                 border-bottom: 1px solid var(--linje); }
@media (min-width: 861px) { .bs-listrubrik { font-size: 1.15rem; } }

/* ===========================================================================
   Facettens sidhuvud
   =========================================================================== */
/* Checklistan och faktarutan låg under varandra i vänsterspalten, och till
   höger om dem stod två skärmhöjder tom yta ända ner till kortrutnätet. Det
   är inte luft, det är en sida som staplats i stället för att komponeras.

   De två hör dessutom ihop. Den ena säger vad du ska kontrollera, den andra
   vad katalogen faktiskt innehåller, och bredvid varandra läser man dem mot
   varandra. */
.bs-facetthuvud { display: grid; gap: 1.2rem; align-items: start; }
@media (min-width: 901px) {
  .bs-facetthuvud { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
  .bs-facetthuvud--ensam { grid-template-columns: minmax(0, var(--matt-text)); }
}
.bs-facetthuvud > .bs-ruta { margin: 0; height: 100%; }

/* Sidhuvud med omslagsbild. Bilderna fanns i mediebanken och pekades ut av
   hub.cover_image_id, men ingen vy renderade dem. Utan bilden använde
   sidhuvudet vänstra halvan av en bred skärm och lämnade högerhalvan tom
   hela vägen ner till korten. */
.bs-sidhuvud--bild { display: grid; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center; }
@media (min-width: 901px) {
  .bs-sidhuvud--bild { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.bs-sidhuvud__bild { border-radius: var(--radie-lg); overflow: hidden; background: var(--papper-djup); }
.bs-sidhuvud__bild img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  /* På mobil ska rubriken mötas först, inte en bild som skjuter ner texten. */
  .bs-sidhuvud__bild { order: 2; }
  .bs-sidhuvud__bild img { aspect-ratio: 16 / 9; }
}