/* minbabyliste designsystem v1 (4/11 2026). Vis det, sig det ikke: hvert tal får en grafik, hver kategori et ikon, Puf siger højst 12 ord ad gangen.
   Bygger oven på style.css (skrifter, temaerne fersken/pige/dreng). Komponenterne hedder ds-*, ikonerne ligger i /ds/ikoner.svg. Guiden: design/system/index.html */
:root{
  /* Bunkernes farver: testet for farveblindhed (ΔE 18 protan). Står altid med ikon og navn, aldrig farve alene. */
  --fersken:#D9704A; --fersken-soft:#FFE6DA; --fersken-ink:#9A4424;
  --himmel:#3A8FC7; --himmel-soft:#E3F0FB; --himmel-ink:#1F5A85;
  --sol:#C4A23A;    --sol-soft:#FFF3CC;    --sol-ink:#6E5A12;
  /* Status: klar (mint), obs (varm gul). Altid med ikon. */
  --klar:#3FA57B; --klar-soft:#E7F5EE; --klar-ink:#1F5E45;
  --obs-soft:#FFF1D6; --obs-ink:#7A4B06;
  --puf-bg:#F4F0FD;
  /* Form og dybde */
  --ds-r-s:12px; --ds-r-m:18px; --ds-r-l:26px; --ds-r-xl:34px;
  --ds-skygge:0 1px 0 rgba(38,48,77,.04), 0 10px 28px rgba(38,48,77,.08);
  --ds-skygge-loeft:0 2px 0 rgba(38,48,77,.05), 0 18px 40px rgba(38,48,77,.14);
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px; --ds-5:24px; --ds-6:32px; --ds-7:48px;
  --ds-hop:cubic-bezier(.34,1.56,.64,1); --ds-blid:cubic-bezier(.22,1,.36,1);
  --ic:var(--ink); --tint:#FFCDB6; --bund:var(--accent-soft);
}
.ds-ikon{width:var(--s,32px); height:var(--s,32px); flex-shrink:0; fill:none; stroke:var(--ic); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; overflow:visible}
.ds-fersken{--tint:#FFC4A8; --bund:var(--fersken-soft); --farve:var(--fersken); --farve-ink:var(--fersken-ink)}
.ds-himmel{--tint:#B8DAF3; --bund:var(--himmel-soft); --farve:var(--himmel); --farve-ink:var(--himmel-ink)}
.ds-sol{--tint:#F8DD8A; --bund:var(--sol-soft); --farve:var(--sol); --farve-ink:var(--sol-ink)}
.ds-klar{--tint:#B5E3CC; --bund:var(--klar-soft); --farve:var(--klar); --farve-ink:var(--klar-ink)}
.ds-lav{--tint:#D6CCF6; --bund:var(--lav-soft); --farve:var(--lav-2); --farve-ink:var(--lav)}

/* Typografi: få størrelser, store tal */
.ds-tal{font-family:var(--font-head); font-weight:800; font-size:clamp(34px,8vw,48px); line-height:.95; letter-spacing:-.02em}
.ds-tal small{font-size:.45em; font-weight:700; letter-spacing:0}
.ds-titel{font-family:var(--font-head); font-weight:800; font-size:22px; line-height:1.12; margin:0}
.ds-etiket{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--farve-ink, var(--ink-3))}
.ds-note{font-size:13px; line-height:1.4; color:var(--ink-3)}

/* Puf */
.ds-puf{width:var(--s,96px); height:auto; aspect-ratio:130/96; flex-shrink:0; overflow:visible}
.ds-puf.svaev{animation:ds-svaev 4s ease-in-out infinite}
@keyframes ds-svaev{50%{transform:translateY(-4px)}}
.ds-puf.hop{animation:ds-hop .6s var(--ds-hop)}
@keyframes ds-hop{0%{transform:scale(.6); opacity:0}100%{transform:none; opacity:1}}

/* Puf-boblen: lille Puf + højst 12 ord */
.ds-boble{display:flex; align-items:flex-end; gap:8px; max-width:92%; animation:ds-ind .3s var(--ds-blid)}
.ds-boble .ds-puf{--s:54px; margin-bottom:-4px; --ic-b:4}
.ds-boble p{margin:0; padding:12px 16px; border-radius:22px 22px 22px 6px; background:var(--surface); box-shadow:var(--ds-skygge); font-size:17px; line-height:1.35; font-weight:600}
.ds-boble.mig{align-self:flex-end; flex-direction:row-reverse}
.ds-boble.mig p{border-radius:22px 22px 6px 22px; background:var(--ink); color:#fff; box-shadow:none}
@keyframes ds-ind{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* Knapper */
.ds-knap{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 24px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:800 17px var(--font-body); text-decoration:none; cursor:pointer; white-space:nowrap; box-shadow:0 4px 0 rgba(38,48,77,.25); transition:transform .15s var(--ds-hop), box-shadow .15s}
.ds-knap:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(38,48,77,.25)}
.ds-knap.fuld{width:100%}
.ds-knap.lys{background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink), 0 4px 0 rgba(38,48,77,.12)}
.ds-knap.farve{background:var(--farve-ink); box-shadow:0 4px 0 rgba(0,0,0,.18)}
.ds-knap .ds-ikon{--s:24px; --ic:currentColor; --tint:rgba(255,255,255,.25)}
.ds-link{display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:800; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px}

/* Svarfliser: spørgsmål besvares med billeder, ikke sætninger */
.ds-fliser{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.ds-fliser.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
.ds-flise{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:112px; padding:14px 8px; border:2px solid transparent; border-radius:var(--ds-r-l); background:var(--surface); box-shadow:var(--ds-skygge); font:800 15px/1.2 var(--font-body); color:var(--ink); text-align:center; cursor:pointer; transition:transform .2s var(--ds-hop), border-color .2s}
.ds-flise .ds-ikon{--s:52px}
.ds-flise:hover{transform:translateY(-2px)}
.ds-flise[aria-pressed="true"]{border-color:var(--ink); background:var(--bund)}
.ds-flise small{font-weight:600; font-size:12px; color:var(--ink-3)}
.ds-trin{display:flex; align-items:center; gap:6px}
.ds-trin i{width:10px; height:10px; border-radius:50%; background:var(--line-2)}
.ds-trin i.nu{width:26px; border-radius:99px; background:var(--ink)}
.ds-trin i.klar{background:var(--klar)}
.ds-trin span{margin-left:6px; font-size:13px; font-weight:800; color:var(--ink-3)}

/* Chips */
.ds-chip{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px 0 8px; border-radius:999px; background:var(--bund, var(--surface-2)); color:var(--farve-ink, var(--ink-2)); font-weight:800; font-size:14px; white-space:nowrap}
.ds-chip .ds-ikon{--s:22px}
.ds-chip.stor{min-height:44px; font-size:15px}
button.ds-chip{border:0; cursor:pointer}

/* Privatliv: ét mærke i stedet for et afsnit */
.ds-laas{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 8px; border:0; border-radius:999px; background:var(--klar-soft); color:var(--klar-ink); font:800 14px var(--font-body); cursor:pointer; --tint:#fff; --ic:var(--klar-ink)}
.ds-laas .ds-ikon{--s:26px}
.ds-laas-mere{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px}
.ds-laas-mere div{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border-radius:var(--ds-r-m); background:var(--surface); text-align:center; font-size:12px; font-weight:700; line-height:1.25; color:var(--ink-2)}
.ds-laas-mere .ds-ikon{--s:34px}

/* Samtykke og Spørg Puf */
.ds-samtykke{display:flex; flex-direction:column; gap:8px; margin-top:10px; padding:12px; border-radius:var(--ds-r-m); background:var(--surface)}
.ds-samtykke .ds-knap{min-height:46px; font-size:15px}
.ds-spoerg{display:flex; align-items:center; gap:6px; padding:4px 4px 4px 18px; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 2px var(--ink)}
.ds-spoerg input{flex:1; min-width:0; min-height:46px; border:0; background:none; font:600 16px var(--font-body); outline:none}
.ds-spoerg .ds-knap{width:48px; min-height:48px; padding:0; font-size:20px}

/* Kort */
.ds-kort{background:var(--surface); border-radius:var(--ds-r-l); box-shadow:var(--ds-skygge); padding:var(--ds-4)}

/* Nu-kortet: én ting, én dato, én knap */
.ds-nu{position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; padding:20px; border-radius:var(--ds-r-xl); background:var(--bund); box-shadow:var(--ds-skygge)}
.ds-nu::after{content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.45); z-index:0}
.ds-nu > *{position:relative; z-index:1}
.ds-nu > .ds-ikon{--s:84px; grid-row:1 / span 3; grid-column:2}
.ds-nu .ds-knap{grid-column:1 / -1; margin-top:8px}
.ds-nu-naar{display:inline-flex; align-items:center; gap:6px; justify-self:start; padding:4px 10px; border-radius:99px; background:#fff; font-weight:800; font-size:13px; color:var(--farve-ink)}

/* Graviditetsbanen: uge 0 til 40 med prikker for hver ting */
.ds-bane{position:relative; padding:58px 12px 4px}
.ds-bane-spor{position:relative; height:12px; border-radius:99px; background:var(--line)}
.ds-bane-spor > i{position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:linear-gradient(90deg,var(--accent-soft),var(--accent))}
.ds-bane-prik{position:absolute; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 3px var(--farve), 0 0 0 2px var(--surface); display:grid; place-items:center; font-size:12px; font-weight:900; color:var(--ink)}
.ds-bane-prik.op{margin-top:-40px}
.ds-bane-prik.op::after{content:""; position:absolute; top:24px; left:50%; width:2px; height:16px; background:var(--farve)}
.ds-bane-prik.klar{background:var(--klar); box-shadow:0 0 0 2px var(--surface); color:#fff}
.ds-chip em{font-style:normal; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 2px var(--farve); color:var(--ink); font-size:11px; font-weight:900}
.ds-bane-naeste{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px}
.ds-bane-nu{position:absolute; top:-40px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center}
.ds-bane-nu .ds-puf{--s:46px}
.ds-bane-nu b{font-size:11px; font-weight:800; background:var(--ink); color:#fff; border-radius:99px; padding:2px 8px; margin-top:-2px; white-space:nowrap}
.ds-bane-akse{display:flex; justify-content:space-between; margin-top:12px; font-size:12px; font-weight:800; color:var(--ink-4)}
.ds-bane-akse span:last-child{color:var(--ink)}

/* Bunke-flise med ring */
.ds-bunke{display:flex; align-items:center; gap:14px; width:100%; padding:14px; border:0; border-radius:var(--ds-r-l); background:var(--surface); box-shadow:var(--ds-skygge); font:inherit; color:var(--ink); text-align:left; cursor:pointer; text-decoration:none}
.ds-bunke-ring{position:relative; width:64px; height:64px; flex-shrink:0; display:grid; place-items:center}
.ds-bunke-ring svg.r{position:absolute; inset:0; transform:rotate(-90deg)}
.ds-bunke-ring .ds-ikon{--s:34px}
.ds-bunke-t{flex-grow:1; min-width:0}
.ds-bunke-t{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.ds-bunke-t b{display:block; font-family:var(--font-head); font-size:19px; line-height:1.1}
.ds-bunke-pil{width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--bund); display:grid; place-items:center; font-weight:800; color:var(--farve-ink)}

/* Prisbåndet: tre bud på én akse */
.ds-pris{display:flex; flex-direction:column; gap:6px}
.ds-pris-spor{position:relative; height:10px; margin:22px 0 4px; border-radius:99px; background:linear-gradient(90deg,var(--klar-soft),var(--bund),var(--farve))}
.ds-pris-mk{position:absolute; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:0 0 0 3px var(--ink)}
.ds-pris-mk b{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); font-size:13px; font-weight:800; white-space:nowrap}
.ds-pris-mk.valgt{width:24px; height:24px; background:var(--ink)}
.ds-pris-akse{display:flex; justify-content:space-between; font-size:12px; font-weight:800; color:var(--ink-3)}

/* Produktkortet: billede, pris, fakta som ikoner, match som prikker */
.ds-par{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.ds-vare{position:relative; display:flex; flex-direction:column; gap:8px; min-width:0; padding:8px 8px 10px; border-radius:var(--ds-r-l); background:var(--surface); box-shadow:var(--ds-skygge)}
.ds-vare-bill{position:relative; aspect-ratio:1; border-radius:var(--ds-r-m); background:#fff; display:grid; place-items:center; overflow:hidden}
.ds-vare-bill img{width:88%; height:88%; object-fit:contain}
.ds-vare-bill .ds-ikon{--s:72px}
.ds-vare-maerke{position:absolute; left:8px; top:8px; display:inline-flex; align-items:center; gap:4px; padding:4px 9px 4px 6px; border-radius:99px; background:var(--ink); color:#fff; font-size:11px; font-weight:800; --ic:#fff; --tint:var(--gold)}
.ds-vare-maerke .ds-ikon{--s:16px}
.ds-vare-navn{font-weight:800; font-size:14px; line-height:1.2; padding:0 4px; overflow-wrap:anywhere}
.ds-vare-navn small{display:block; font-size:12px; font-weight:700; color:var(--ink-3)}
.ds-fakta{display:flex; flex-wrap:wrap; gap:4px; padding:0 2px}
.ds-fakta span{display:inline-flex; align-items:center; gap:3px; padding:3px 7px 3px 4px; border-radius:99px; background:var(--surface-2); font-size:12px; font-weight:800; color:var(--ink-2); --tint:transparent}
.ds-fakta .ds-ikon{--s:18px; stroke-width:3}
.ds-match{display:flex; align-items:center; gap:4px; padding:0 4px; font-size:12px; font-weight:800; color:var(--klar-ink)}
.ds-match i{width:9px; height:9px; border-radius:50%; background:var(--line-2)}
.ds-match i.ja{background:var(--klar)}
.ds-vare-pris{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 4px; flex-wrap:wrap}
.ds-vare-pris b{font-family:var(--font-head); font-size:22px; line-height:1}
.ds-vare-pris span{font-size:11px; font-weight:700; color:var(--ink-3)}
.ds-vare .ds-knap{min-height:46px; font-size:15px; margin-top:auto; width:100%; padding:0 10px}
.ds-reklame{display:inline-flex; align-items:center; justify-content:center; gap:4px; align-self:center; font-size:12px; font-weight:800; color:var(--ink-3); --tint:var(--surface-2)}
.ds-reklame .ds-ikon{--s:16px; stroke-width:3}
.ds-butik{display:flex; align-items:center; justify-content:center; min-height:44px; font-size:14px; font-weight:800; color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.ds-minibaand{position:relative; flex:1 1 60px; max-width:90px; height:6px; border-radius:99px; background:linear-gradient(90deg,var(--klar-soft),var(--fersken))}
.ds-minibaand i{position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 2px #fff}

/* Sammenligningen: søjler pr. egenskab, vinderen fremhævet */
.ds-sml{display:flex; flex-direction:column; gap:14px; padding:16px; border-radius:var(--ds-r-l); background:var(--surface); box-shadow:var(--ds-skygge)}
.ds-sml-hoved{display:grid; grid-template-columns:var(--sml-e,96px) 1fr 1fr; gap:8px; align-items:end; font-size:13px; font-weight:800}
.ds-sml-hoved img{width:100%; max-height:120px; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:12px}
.ds-sml-hoved > div{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; min-width:0; overflow-wrap:anywhere}
.ds-sml-r{display:grid; grid-template-columns:var(--sml-e,96px) 1fr 1fr; gap:8px; align-items:center}
.ds-sml-e{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--ink-2); --tint:var(--surface-2)}
.ds-sml-e .ds-ikon{--s:24px}
.ds-sml-s{position:relative; height:30px; border-radius:10px; background:var(--surface-2)}
.ds-sml-s i{position:absolute; left:0; top:0; bottom:0; border-radius:10px 4px 4px 10px; background:var(--line-2)}
.ds-sml-s b{position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:13px; font-weight:800; white-space:nowrap}
.ds-sml-s.vinder i{background:#A6DDC3}
.ds-sml-s.vinder b{color:var(--klar-ink)}
.ds-sml-s.vinder b::before{content:"✓ "}
.ds-sml-s.ja,.ds-sml-s.nej,.ds-sml-s.lige{display:grid; place-items:center; font-size:13px; font-weight:900}
.ds-sml-s.ja{background:#A6DDC3; color:var(--klar-ink)}
.ds-sml-s.nej{color:var(--ink-3)}
.ds-sml-s.lige{color:var(--ink-2)}
.ds-sml-dom{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--ds-r-m); background:var(--klar-soft)}
.ds-sml-dom .ds-puf{--s:56px}
.ds-sml-dom b{display:block; font-family:var(--font-head); font-size:17px; line-height:1.15}
.ds-sml .ds-knap{min-height:48px; font-size:14px; padding:0 8px; white-space:normal; line-height:1.1}
@media (max-width:520px){.ds-sml{--sml-e:64px; padding:12px} .ds-sml-e{font-size:12px; gap:3px} .ds-sml-e .ds-ikon{--s:20px} .ds-sml-s b{font-size:12px; left:5px}}

/* Siden sidst */
.ds-siden{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x mandatory}
.ds-siden > div, .ds-siden > a{flex:0 0 auto; scroll-snap-align:start; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:var(--ds-r-m); background:var(--surface); box-shadow:var(--ds-skygge)}
.ds-siden .ds-ikon{--s:36px}
.ds-siden b{display:block; font-size:15px; line-height:1.1}
.ds-siden span{font-size:12px; font-weight:700; color:var(--ink-3)}
.ds-ned{color:var(--klar-ink)!important}

/* Status: har, arver, får, skal købes */
.ds-status{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.ds-status button{display:flex; flex-direction:column; align-items:center; gap:4px; min-height:64px; padding:8px 2px; border:2px solid transparent; border-radius:var(--ds-r-m); background:var(--surface-2); font:800 12px var(--font-body); color:var(--ink-2); cursor:pointer; --tint:#fff}
.ds-status .ds-ikon{--s:28px}
.ds-status button[aria-pressed="true"]{border-color:var(--ink); background:var(--surface); color:var(--ink); --tint:var(--klar-soft)}

/* Fejring når noget er valgt */
.ds-fejr{position:relative; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--ds-r-l); background:var(--klar-soft); color:var(--klar-ink); font-weight:800; overflow:hidden; animation:ds-hop .5s var(--ds-hop)}
.ds-fejr .ds-puf{--s:70px}
.ds-fejr b{display:block; font-family:var(--font-head); font-size:20px; color:var(--ink)}
.ds-konfetti{position:absolute; inset:0; pointer-events:none}
.ds-konfetti i{position:absolute; top:-10px; width:8px; height:12px; border-radius:2px; animation:ds-fald 1.4s ease-in forwards}
@keyframes ds-fald{to{transform:translateY(120px) rotate(320deg); opacity:0}}

/* Tom tilstand */
.ds-tom{display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 16px; text-align:center; border-radius:var(--ds-r-xl); background:var(--puf-bg)}
.ds-tom .ds-puf{--s:120px}

/* Ark nedefra */
.ds-ark{width:100%; max-width:520px; border-radius:var(--ds-r-xl) var(--ds-r-xl) 0 0; background:var(--bg); padding:10px 16px 20px; display:flex; flex-direction:column; gap:12px; box-shadow:0 -12px 40px rgba(38,48,77,.18)}
.ds-ark-greb{align-self:center; width:44px; height:5px; border-radius:99px; background:var(--line-2)}

@media (prefers-reduced-motion:reduce){.ds-puf.svaev,.ds-puf.hop,.ds-boble,.ds-fejr,.ds-konfetti i{animation:none}.ds-konfetti{display:none}}

/* Se alle (5/11 2026): rangeret liste med match, filtre og "vælg to at sammenligne" */
.ds-liste{display:flex; flex-direction:column; gap:10px}
.ds-liste-filtre{display:flex; flex-wrap:wrap; gap:6px}
.ds-liste-filtre .ds-chip{border:2px solid transparent; cursor:pointer; font:800 14px/1 var(--font-body); min-height:44px}
.ds-liste-filtre .ds-chip[aria-pressed="true"]{background:var(--ink); color:#fff}
.ds-liste-r{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.ds-liste-i{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px; border-radius:var(--ds-r-m); background:var(--surface); box-shadow:var(--ds-skygge)}
.ds-liste-bill{position:relative; width:64px; height:64px; border-radius:var(--ds-r-s); background:#fff; display:grid; place-items:center}
.ds-liste-bill img{width:90%; height:90%; object-fit:contain}
.ds-liste-nr{position:absolute; left:-4px; top:-4px; min-width:22px; height:22px; padding:0 5px; border-radius:99px; background:var(--ink); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center}
.ds-liste-midt{display:flex; flex-direction:column; gap:5px; min-width:0}
.ds-liste-midt .ds-vare-navn{padding:0}
.ds-liste-match{display:flex; align-items:center; gap:6px; font-size:12px}
.ds-liste-match span{flex:1; max-width:120px; height:8px; border-radius:99px; background:var(--line); overflow:hidden}
.ds-liste-match i{display:block; height:100%; border-radius:99px; background:var(--klar)}
.ds-liste-match b{font-weight:800; color:var(--ink-2); white-space:nowrap}
.ds-liste-uden{margin:0; font-size:12px; font-weight:700; color:var(--ink-3)}
.ds-liste-hoejre{display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right}
.ds-liste-hoejre b{font-size:14px; font-weight:800; white-space:nowrap}
.ds-liste-hoejre small{font-size:11px; font-weight:700; color:var(--ink-3); white-space:nowrap}
.ds-liste-vaelg{display:inline-flex; align-items:center; gap:4px; min-height:44px; min-width:44px; padding:0 10px 0 6px; border:2px solid var(--line-2); border-radius:99px; background:var(--surface); font:800 13px/1 var(--font-body); color:var(--ink-2); cursor:pointer}
.ds-liste-vaelg .ds-ikon{--s:20px}
.ds-liste-vaelg[aria-pressed="true"]{border-color:var(--ink); background:var(--ink); color:#fff; --ic:#fff}
.ds-liste-mere{align-self:center}
.ds-liste-mere[hidden]{display:none}
.ds-liste-bar{position:sticky; bottom:10px; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 8px 8px 16px; border-radius:99px; background:var(--surface); box-shadow:0 6px 24px rgba(0,0,0,.14); font-weight:800; font-size:14px}
.ds-liste-bar span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ds-liste-bar .ds-knap{flex:none; width:auto; min-height:44px; padding:0 20px}
.ds-liste-bar .ds-knap:disabled{opacity:.45; cursor:default}
.ds-liste-bar.klar{background:var(--klar-soft)}
@media (max-width:420px){.ds-liste-i{grid-template-columns:52px minmax(0,1fr) auto; gap:8px}.ds-liste-bill{width:52px; height:52px}}