/* Produkt-blokkens CSS (bloggerspace-affiliate/produkt) — loades kun på sider m. blokken */

    /* ===== Produkt-blok (bloggerspace-affiliate/produkt) — 'godt tip'-æstetik ===== */
    .bsa-produkt {
      border: 1px solid rgba(0,0,0,.1); border-radius: 12px;
      padding: 16px 20px; margin: 1.5em 0; background: #fff;
      font-size: 0.95em; line-height: 1.5;
    }
    /* Kompakt inline: anbefalings-linjen står UDEN for den bordede bjælke; bjælken
       selv bærer border/padding. [navn, Reklame] venstre — [pris, webshop, cta] højre. */
    .bsa-produkt--inline {
      display: block; border: none; padding: 0; background: none; margin: 0.5em 0; font-size: 0.9em;
    }
    .bsa-inline-bar {
      position: relative;
      display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap;
      border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 12px; background: #fff;
      cursor: pointer; transition: background .12s; /* hele bjælken er klikbar → toggler fold-ud */
    }
    .bsa-inline-bar:hover { background: #fafbfa; }
    .bsa-inline-left { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
    .bsa-inline-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    /* Kompakt: langt navn afkortes med ellipsis, så bjælken altid holder ÉN linje på desktop.
       Navnet er det eneste der krymper; pris/webshop/lager/CTA beholder deres bredde. */
    .bsa-inline-bar .bsa-name { flex: 1; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 0; }
    .bsa-shop-inline { white-space: nowrap; flex-shrink: 0; }
    .bsa-inline-right .bsa-reklame { margin-left: 0; align-self: center; }
    /* Kompakt → fuld Produkt-visning (expandFull): kortet folder ud, bjælken skjules.
       .bsa-fullcard bærer .bsa-produkt--produkt, så Produkt-kortets CSS gælder direkte. */
    .bsa-fullcard { position: relative; }
    /* display:flex på bjælken overrider browserens [hidden] → skjul eksplicit igen */
    .bsa-fullcard[hidden], .bsa-inline-bar[hidden] { display: none; }
    /* Skjul-knap i kortets øverste HØJRE hjørne (inde i boksen) */
    /* Skjul-knap i kortets top-højre — samme .bsa-cta-størrelse/-placering som "Se mere",
       bare grå/nedtonet (præcis som Kategori-listens "Skjul") og uden ikon */
    .bsa-collapse-toggle { position: absolute; top: 14px; right: 16px; z-index: 3; }
    .bsa-cta.bsa-collapse-toggle { background: #edefed; border-color: #d6dad6; color: #5a615a; }
    .bsa-cta.bsa-collapse-toggle:hover, .bsa-cta.bsa-collapse-toggle:focus { background: #e2e5e2; border-color: #ccd1cc; color: #5a615a; }
    /* Reservér plads til Skjul-knappen, så navn/award ikke løber ind under den */
    .bsa-fullcard .bsa-nameline { padding-right: 82px; }
    /* Kortets header (billede-rækken) er klikbar → skjul (billedet beholder zoom-in/lightbox) */
    .bsa-fullcard .bsa-body { cursor: pointer; }
    .bsa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .bsa-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
    .bsa-avatar--letter {
      background: #eef2f7; color: #2c4a6e; font-weight: 600;
      display: inline-flex; align-items: center; justify-content: center;
    }
    /* Anbefaling: forfatter-hoved OVER den bordede boks (som Kompaktens rec-linje) */
    .bsa-produkt--produkt { border: none; padding: 0; background: none; }
    .bsa-anbefaler-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
    .bsa-anbefaler-box { position: relative; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 16px 20px; background: #fff; }
    /* Reklamelinks som legend-mærke PÅ den øverste border-kant — frigør højre side til titel/award.
       Gælder alle bordede kort: Produkt (.bsa-anbefaler-box), Kategori (.bsa-produkt--liste), Kompakt (.bsa-inline-bar), Vin (.bsa-vin), Partnere (.bsa-partners) */
    .bsa-produkt--liste { position: relative; }
    .bsa-anbefaler-box > .bsa-reklame, .bsa-produkt--liste > .bsa-reklame, .bsa-inline-bar > .bsa-reklame, .bsa-vin > .bsa-reklame, .bsa-partners > .bsa-reklame {
      position: absolute; top: -9px; left: 50%; transform: translateX(-50%); margin: 0; align-self: auto; background: #fff;
    }
    .bsa-produkt--produkt .bsa-priswrap { margin-top: 8px; }
    .bsa-whowrap { display: flex; flex-direction: column; min-width: 0; }
    .bsa-who { font-weight: 600; }
    .bsa-note, .bsa-meta { color: #666; font-size: 0.88em; }
    .bsa-heading { font-weight: 600; font-size: 1.3em; }
    .bsa-reklame {
      margin-left: auto; flex-shrink: 0; font-size: 11px; color: #888;
      border: 1px solid rgba(0,0,0,.15); border-radius: 99px; padding: 1px 8px;
      align-self: flex-start; user-select: none;
    }
    .bsa-body { display: flex; gap: 14px; align-items: flex-start; }
    .bsa-img { width: 84px; height: 84px; object-fit: contain; border-radius: 8px; background: #f7f7f7; flex-shrink: 0; }
    .bsa-img--sm { width: 44px; height: 44px; border-radius: 6px; }
    /* Hover-zoom håndteres af JS (stort billede der følger musen) — her kun cursor-hint */
    .bsa-img { cursor: zoom-in; }
    /* Lup-badge: JS wrapper klikbare billeder i .bsa-imgwrap og lægger ikonet i hjørnet */
    .bsa-imgwrap { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
    .bsa-lup {
      position: absolute; right: 3px; top: 3px; width: 18px; height: 18px;
      border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.12);
      display: flex; align-items: center; justify-content: center; pointer-events: none;
    }
    .bsa-lup svg { width: 10px; height: 10px; }
    .bsa-img--sm ~ .bsa-lup { width: 15px; height: 15px; right: 2px; top: 2px; }
    .bsa-img--sm ~ .bsa-lup svg { width: 8px; height: 8px; }
    .bsa-info { flex: 1; min-width: 0; }
    /* Enkelt-produkt-kort: navn → (award) → pris → lager → knap stablet lodret */
    .bsa-produkt--produkt .bsa-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
    .bsa-priswrap { display: flex; flex-direction: column; gap: 3px; }
    .bsa-produkt--produkt .bsa-name { font-size: 1.1em; }
    .bsa-name { font-weight: 600; display: inline-block; margin-right: 6px; }
    /* Navn + award-pill på samme linje (award efter navnet, wrapper ved smal plads) */
    .bsa-nameline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    /* Liste: navn + meta på ÉN linje med ellipsis — rækkerne må aldrig wrappe til 2 linjer.
       max-width kapper navnelinjen, så titlen afkortes hårdere; er der en award-pill,
       krymper titlen adaptivt for at give plads (pillen ligger til højre, flex-shrink:0). */
    .bsa-produkt--liste .bsa-nameline { flex-wrap: nowrap; min-width: 0; max-width: 26em; }
    .bsa-produkt--liste .bsa-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bsa-produkt--liste .bsa-nameline .bsa-award { flex-shrink: 0; }
    /* Anbefaling + Testvinder: navn på ÉN linje m. ellipsis + award-pill efter (som listen).
       align-self: stretch fylder info-kolonnen, så navnet afkortes ved dens bredde. */
    .bsa-produkt--produkt .bsa-nameline, .bsa-produkt--produkt .bsa-nameline { flex-wrap: nowrap; align-self: stretch; min-width: 0; }
    .bsa-produkt--produkt .bsa-name, .bsa-produkt--produkt .bsa-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bsa-produkt--produkt .bsa-nameline .bsa-award { flex-shrink: 0; margin-left: auto; }
    /* Højre kolonne: pris + webshop stablet (shop på ny linje under prisen) */
    .bsa-pricecol { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
    .bsa-shopname { color: #666; font-size: 0.88em; white-space: nowrap; }
    .bsa-award {
      display: inline-block; background: #faeeda; color: #633806;
      font-size: 12px; border-radius: 99px; padding: 2px 9px; margin: 2px 0;
    }
    .bsa-award--sm { font-size: 11px; padding: 1px 7px; }
    /* Klikbar award = link til testen (behold den ravgule tekstfarve trods tema-links) */
    .bsa-award--link { color: #633806; text-decoration: none; cursor: pointer; }
    .bsa-award--link:hover, .bsa-award--link:focus { color: #633806; text-decoration: underline; }
    .bsa-extlink { width: .8em; height: .8em; margin-left: 4px; vertical-align: -1px; flex-shrink: 0; }
    .bsa-prisraekke { margin-top: 10px; border-top: 1px solid rgba(0,0,0,.08); }
    .bsa-prisrow, .bsa-row {
      display: flex; align-items: center; gap: 12px; padding: 8px 0;
    }
    /* Desktop: lager+pris opfører sig som direkte flex-børn (uændret). Mobil grupperer dem. */
    .bsa-prismeta { display: contents; }
    /* Kategori-rækker lidt luftigere; forhandler-listen (.bsa-prisrow) beholder 8px */
    /* Hele Kategori-rækken er klikbar (panel-fold-ud, eller direkte til den ene forhandler) →
       cursor-hint + grå hover-baggrund; negativ margin trækker baggrunden ud til boks-kanten */
    .bsa-produkt--liste .bsa-row { padding: 12px 10px; margin: 0 -10px; border-radius: 8px; cursor: pointer; transition: background .12s; }
    .bsa-produkt--liste .bsa-row:hover { background: #f7f8f8; }
    /* Award-banner over rækken bruges kun på mobil — skjult på desktop (award står inline) */
    .bsa-row-award { display: none; }
    /* Skillelinje KUN mellem rækker — aldrig efter den sidste. Robust selv når et
       tomt .bsa-pris-dato-span følger rækkerne (liste-variant), hvor :last-child
       ellers ikke ville ramme sidste række. */
    .bsa-prisrow + .bsa-prisrow { border-top: 1px solid rgba(0,0,0,.08); }
    .bsa-prisraekke .bsa-prisrow:last-child { padding-bottom: 0; }
    /* Liste: border under HVER række (også den sidste) — adskiller fra 'Priser opdateret'-footeren */
    /* Liste: rowwrap = række + evt. sammenlign-panel; skillelinje mellem rows (ikke sidste) */
    .bsa-produkt--liste .bsa-rowwrap { border-bottom: 1px solid rgba(0,0,0,.08); }
    .bsa-produkt--liste .bsa-rowwrap:last-child { border-bottom: none; }
    .bsa-produkt--liste .bsa-rowwrap:last-child .bsa-row { padding-bottom: 0; }
    /* Højre CTA-kolonne: Se billigste-knap + Sammenlign priser-toggle stablet */
    .bsa-row-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
    .bsa-compare-toggle { background: none; border: none; padding: 0; color: #2e7d46; font-size: 12px; font-weight: 600; cursor: pointer; }
    .bsa-compare-toggle::after { content: ' +'; }
    .bsa-compare-toggle[aria-expanded='true']::after { content: ' –'; }
    /* Container-luft over listen (altid til stede) rummer Billigst-badgen når den kommer */
    .bsa-compare { padding: 14px 0 10px; }
    /* Fold-ud forhandlerliste: HVER række i sin egen lyse boks med luft imellem (ingen skillelinjer) */
    .bsa-compare .bsa-prisraekke { margin-top: 0; border-top: none; }
    .bsa-compare .bsa-prisrow, .bsa-colorlist .bsa-prisrow {
      background: #f7f8f8; border-radius: 8px; padding: 12px 16px;
    }
    .bsa-compare .bsa-prisrow + .bsa-prisrow, .bsa-colorlist .bsa-prisrow + .bsa-prisrow { border-top: none; margin-top: 8px; }
    .bsa-compare .bsa-prisraekke .bsa-prisrow:last-child, .bsa-colorlist .bsa-prisraekke .bsa-prisrow:last-child { padding-bottom: 12px; }
    /* Produkt-kortets forhandlerliste: samme boks-pr.-række-layout som Kategori */
    .bsa-produkt--produkt .bsa-prisraekke { border-top: none; margin-top: 14px; }
    .bsa-produkt--produkt .bsa-prisrow { background: #f7f8f8; border-radius: 8px; padding: 12px 16px; }
    .bsa-produkt--produkt .bsa-prisrow + .bsa-prisrow { border-top: none; margin-top: 8px; }
    .bsa-produkt--produkt .bsa-prisraekke .bsa-prisrow:last-child { padding-bottom: 12px; }
    /* Billigst-mærke som legend PÅ rækkens border-kant (som Reklamelinks) + grøn kant.
       Klasse-baseret (.bsa-cheapest), IKKE :first-child: lager kendes først client-side,
       så hydreringens markCheapest() sætter mærket på den billigste PÅ-LAGER forhandler
       (en udsolgt billigste er jo ikke "billigst lige nu"). INGEN ekstra margin — badgen
       straddler den luft containeren allerede har over listen (listen hopper ikke). */
    .bsa-prisraekke .bsa-prisrow.bsa-cheapest,
    .bsa-lightbox-rows .bsa-prisrow.bsa-cheapest {
      position: relative; box-shadow: inset 0 0 0 1px rgba(46,125,70,.5);
    }
    .bsa-prisraekke .bsa-prisrow.bsa-cheapest::after,
    .bsa-lightbox-rows .bsa-prisrow.bsa-cheapest::after {
      content: 'Billigst'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
      padding: 1px 8px; font-size: 11px; font-weight: 600; color: #27500A; background: #EAF3DE;
      border: 1px solid #97C459; border-radius: 99px; white-space: nowrap;
    }
    /* Hele forhandler-rækken er klikbar (JS) — hover løfter boksen og mørkner knappen */
    .bsa-prisrow { cursor: pointer; transition: background .15s, box-shadow .15s, opacity .15s; }
    .bsa-prisrow:hover { background: #eef2ec; box-shadow: inset 0 0 0 1px rgba(46,125,70,.3); }
    .bsa-prisrow:hover .bsa-cta { background: #256b3b; border-color: #256b3b; }
    /* Udsolgt forhandler: nedtonet grå (og aldrig "Billigst" — markCheapest springer den over) */
    .bsa-prisrow.bsa-udsolgt { cursor: default; opacity: .5; }
    .bsa-prisrow.bsa-udsolgt:hover { background: #f7f8f8; box-shadow: none; }
    .bsa-rowinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .bsa-shop { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
    .bsa-shop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Webshop-logo (PriceRunner-stil) — tegnes når hubben leverer advertiser.logo_url */
    .bsa-shop-logo { width: 26px; height: 26px; object-fit: contain; border-radius: 5px; flex-shrink: 0; background: #fff; }
    .bsa-price { font-weight: 600; white-space: nowrap; }
    /* Udstreget vejl./førpris + spar-% (fyldes af hydreringen) */
    .bsa-rrp { font-size: .85em; margin-left: 6px; white-space: nowrap; }
    /* Kategori: pris + førpris/rabat på ÉN linje (som Produkt), butiksnavn rent nedenunder */
    .bsa-pricerow { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
    .bsa-rrp:empty { display: none; }
    .bsa-rrp-was { color: #999; text-decoration: line-through; }
    .bsa-rrp-pct { color: #c0392b; font-weight: 600; margin-left: 3px; }
    /* Lagerstatus (samme visuelle sprog som kurateringsdashboardet: farvet prik + tekst).
       Fyldes client-side af hydreringen; tom = skjult indtil priserne er hentet. */
    .bsa-stock {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 500; white-space: nowrap;
    }
    .bsa-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
    .bsa-stock--in { color: #2e7d46; }
    .bsa-stock--out { color: #c0392b; }
    .bsa-stock:empty { display: none; }
    /* Grøn, fyldt CTA — tydeligt klikbar og indbydende. min-width + centreret tekst
       så alle knapper (også 'Udsolgt') får samme bredde og flugter i listen. */
    .bsa-cta {
      flex-shrink: 0; box-sizing: border-box; display: inline-block; min-width: 6.4em; text-align: center;
      font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
      border: 1px solid #2e7d46; border-radius: 4px; padding: 6px 16px;
      color: #fff; background: #2e7d46; transition: background .15s, border-color .15s;
    }
    /* Sæt ALTID tekstfarven på hover/focus — ellers overtager temaets a:hover-farve
       og gør teksten ulæselig på den grønne bund. */
    .bsa-cta:hover, .bsa-cta:focus { background: #256b3b; border-color: #256b3b; color: #fff; text-decoration: none; }
    .bsa-cta--inline { padding: 4px 13px; font-size: 12px; min-width: 0; }
    /* Se mere-CTA er en button (åbner panel) — arv skrifttype, samme grønne look */
    button.bsa-cta { font-family: inherit; line-height: normal; cursor: pointer; }
    /* Editor-preview: CTA'en er neutraliseret (intet href) → vis at den ikke er klikbar */
    .bsa-cta--preview { cursor: default; }
    /* Panel åbent → "Se mere" bliver til nedtonet "Skjul", så den ikke stjæler
       opmærksomhed fra farvevælgeren/forhandlerne under (JS sætter --open + teksten) */
    .bsa-cta.bsa-more-toggle--open { background: #edefed; border-color: #d6dad6; color: #5a615a; }
    .bsa-cta.bsa-more-toggle--open:hover, .bsa-cta.bsa-more-toggle--open:focus { background: #e2e5e2; border-color: #ccd1cc; color: #5a615a; }
    /* Editor-robusthed: temaets .editor-styles-wrapper a-farve må ikke overtage
       knappernes/linkenes farve i previewet — højere specificitet vinder. */
    .bsa-produkt a.bsa-cta, .bsa-produkt a.bsa-cta:hover, .bsa-produkt a.bsa-cta:focus { color: #fff; }
    .bsa-produkt .bsa-udsolgt a.bsa-cta { color: #9a9a9a; }
    .bsa-produkt a.bsa-award--link, .bsa-produkt a.bsa-award--link:hover, .bsa-produkt a.bsa-award--link:focus { color: #633806; }
    /* Bedst i Test-header: navn øverst, Fra-pris + lager på linjen under */
    .bsa-produkt--produkt .bsa-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
    .bsa-produkt--produkt .bsa-name { font-size: 1.1em; }
    /* Pris-linje: pris · lager · Se pris inline (wrapper på smal plads) */
    .bsa-bit-priceline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .bsa-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
    /* Bedst i Test: pris i nederste venstre hjørne */
    .bsa-bit-pris { font-weight: 600; font-size: 1em; }
    .bsa-pris-dato { display: block; font-size: 11px; color: #999; margin-top: 8px; }
    .bsa-pris-dato:empty { display: none; }
    /* Priser opdateret altid højrestillet i anbefaler- og bedst-i-test-kortet */
    /* Reklamelinks + Priser opdateret stablet i øverste højre hjørne */
    .bsa-corner { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; align-self: flex-start; flex-shrink: 0; }
    .bsa-corner .bsa-pris-dato { margin: 0; }
    .bsa-corner .bsa-reklame { margin-left: 0; align-self: flex-end; }
    .bsa-produkt--liste .bsa-head { align-items: flex-start; padding-bottom: 10px; }
    .bsa-udsolgt { opacity: .6; }
    .bsa-udsolgt .bsa-cta { pointer-events: none; background: #fff; color: #9a9a9a; border-color: #ccc; border-style: dashed; }
    /* ===== Farvevariant-vælger (PriceRunner-stil) ===== */
    .bsa-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .bsa-color {
      position: relative;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      min-width: 56px; padding: 4px; cursor: pointer;
      background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 8px;
      transition: border-color .15s, box-shadow .15s;
    }
    .bsa-color:hover { border-color: #2e7d46; }
    .bsa-color.is-selected { border-color: #2e7d46; box-shadow: 0 0 0 1px #2e7d46 inset; }
    /* Helt udsolgt farve (JS: markSoldOutColors) — nedtonet + inaktiv (klik ignoreres) */
    .bsa-color--oos { opacity: .4; cursor: not-allowed; }
    .bsa-color--oos:hover { border-color: rgba(0,0,0,.12); box-shadow: none; }
    .bsa-color--oos .bsa-color-thumb img { filter: grayscale(1); }
    /* Farve-label som CSS-tooltip (instant + tydelig) frem for den langsomme, blege native title */
    .bsa-color[data-bsa-tip]::after {
      content: attr(data-bsa-tip);
      position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
      padding: 3px 8px; background: #2b2b2b; color: #fff; font-size: 11px; font-weight: 500;
      line-height: 1.3; white-space: nowrap; border-radius: 5px; pointer-events: none;
      opacity: 0; transition: opacity .08s; z-index: 30;
    }
    .bsa-color[data-bsa-tip]::before {
      content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
      border: 4px solid transparent; border-top-color: #2b2b2b; pointer-events: none;
      opacity: 0; transition: opacity .08s; z-index: 30;
    }
    .bsa-color[data-bsa-tip]:hover::after, .bsa-color[data-bsa-tip]:hover::before,
    .bsa-color[data-bsa-tip]:focus-visible::after, .bsa-color[data-bsa-tip]:focus-visible::before { opacity: 1; }
    .bsa-color-thumb {
      width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
      background: #f7f7f7; border-radius: 6px; overflow: hidden;
    }
    .bsa-color-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .bsa-color-thumb--text { font-size: 10px; color: #555; text-align: center; padding: 2px; line-height: 1.2; }
    .bsa-color-price { font-size: 11px; font-weight: 600; color: #222; white-space: nowrap; }
    /* Liste: '🎨 N farver'-toggle under lager-linjen (samme sprog som Sammenlign priser) */
    /* Lightbox: stort produktbillede m. Se pris-knap nederst PÅ billedet */
    .bsa-lightbox {
      position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.55);
      display: flex; align-items: center; justify-content: center; cursor: zoom-out;
    }
    .bsa-lightbox-inner {
      position: relative; background: #fff; border-radius: 14px; padding: 20px;
      width: min(86vw, 620px); max-height: 86vh; overflow-y: auto; cursor: auto;
    }
    .bsa-lightbox-inner > img { display: block; max-width: 100%; max-height: 56vh; object-fit: contain; margin: 0 auto; }
    /* Luk-kryds øverst til højre */
    .bsa-lightbox-close {
      position: absolute; top: 10px; right: 10px; z-index: 1;
      width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%;
      background: #f1f1f1; color: #444; font-size: 20px; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .bsa-lightbox-close:hover { background: #e4e4e4; }
    /* Produktnavn (+ evt. award) som overskrift øverst i lightbox'en */
    .bsa-lightbox-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; padding-right: 36px; }
    .bsa-lightbox-head .bsa-name { font-size: 18px; font-weight: 600; margin: 0; min-width: 0; }
    .bsa-lightbox-head .bsa-award { margin-left: 0; }
    .bsa-lightbox-cta { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
    /* Farve-label under billedet (før forhandlerlisten) */
    .bsa-lightbox-color { text-align: center; margin: 12px 0 0; font-size: 14px; font-weight: 600; color: #333; }
    /* Op til 3 forhandler-rækker under billedet — samme bokse som fold-ud-listerne */
    .bsa-lightbox-rows { margin-top: 14px; }
    .bsa-lightbox-rows .bsa-prisrow { background: #f7f8f8; border-radius: 8px; padding: 12px 16px; }
    .bsa-lightbox-rows .bsa-prisrow + .bsa-prisrow { border-top: none; margin-top: 8px; }
    /* Lager + farve-toggle på samme linje under navnet */
    .bsa-substatus { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .bsa-colors-toggle {
      background: none; border: none; padding: 0;
      color: #2c4a6e; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
    }
    .bsa-colors-toggle::after { content: ' +'; }
    .bsa-colors-toggle[aria-expanded='true']::after { content: ' –'; }
    /* Farve-tæller i Produkt-header (label, ikke toggle — farverne vises altid) */
    .bsa-colors-count { color: #2c4a6e; font-size: 12px; font-weight: 600; white-space: nowrap; }
    .bsa-colorpanel { padding: 6px 0 10px 0; }
    .bsa-colorpanel .bsa-colors { margin-top: 0; }
    /* Forhandler-liste under den valgte farve (kombi-vælger) — bokse pr. række som Flere forhandlere */
    .bsa-colorlists { margin-top: 14px; }
    .bsa-colorlist .bsa-prisraekke { margin-top: 0; border-top: none; }
    /* ===== Mobil (<=600px): stack forhandler-rækker + Kategori-rækker, Kompakt-wrap ===== */
    @media (max-width: 600px) {
      /* Forhandler-række holdes på ÉN linje — butiksnavnet afkortes (ellipsis) så alt passer */
      .bsa-prisrow { gap: 8px; }
      .bsa-prisrow .bsa-shop { flex: 1; min-width: 0; }
      .bsa-prisrow .bsa-shop-logo { width: 22px; height: 22px; }
      /* Boksede forhandler-rækker: kun 10px padding på mobil */
      .bsa-produkt--produkt .bsa-prisrow, .bsa-compare .bsa-prisrow, .bsa-colorlist .bsa-prisrow { padding: 10px; }
      /* Bordede kort på mobil: sider + bund ens (10px), 20px i top til Reklame-mærket */
      .bsa-anbefaler-box { padding: 20px 10px 10px; }
      .bsa-produkt--liste { padding: 20px 10px 10px; }
      /* Strammere afstand ned til fold-ud forhandlerlisten (badgen skal stadig have luft) */
      .bsa-compare { padding: 14px 0 10px; }
      /* Kategori-række på mobil — 2 kolonner i fuld bredde:
           række 1: udmærkelse (fuld bredde, kun m. award)
           række 2: billede (top-venstre) | navn m. lager · forhandlere · farver under
           række 3: pris + webshop | CTA (højre) */
      /* Pris-linjen deler IKKE kolonnespor med billedet: pris spænder kol 1-2 og info
         kol 2-3, så billed-kolonnen kun sizes af billedet (bred pris+rabat skubber intet). */
      .bsa-produkt--liste .bsa-row {
        display: grid; grid-template-columns: auto minmax(0,1fr) auto;
        grid-template-areas: 'img info info' 'price price cta';
        column-gap: 12px; row-gap: 10px; align-items: center;
      }
      .bsa-produkt--liste .bsa-row--award { grid-template-areas: 'award award award' 'img info info' 'price price cta'; }
      .bsa-produkt--liste .bsa-row-award { display: block; grid-area: award; }
      .bsa-produkt--liste .bsa-row > .bsa-img--sm,
      .bsa-produkt--liste .bsa-row > .bsa-imgwrap { grid-area: img; }
      .bsa-produkt--liste .bsa-rowinfo { grid-area: info; }
      .bsa-produkt--liste .bsa-pricecol { grid-area: price; align-items: flex-start; }
      .bsa-produkt--liste .bsa-row-actions { grid-area: cta; justify-self: end; align-self: center; }
      /* Åbent panel (forhandlere/farver) viser priser + CTA — rækkens egen prislinje skjules,
         og rækkens bund-padding + gap fjernes så afstanden ned til panelet er stram */
      .bsa-produkt--liste .bsa-rowwrap:has(.bsa-compare:not([hidden])) .bsa-pricecol,
      .bsa-produkt--liste .bsa-rowwrap:has(.bsa-compare:not([hidden])) .bsa-row-actions,
      .bsa-produkt--liste .bsa-rowwrap:has(.bsa-colorpanel:not([hidden])) .bsa-pricecol,
      .bsa-produkt--liste .bsa-rowwrap:has(.bsa-colorpanel:not([hidden])) .bsa-row-actions { display: none; }
      .bsa-produkt--liste .bsa-rowwrap:has(.bsa-compare:not([hidden])) .bsa-row,
      .bsa-produkt--liste .bsa-rowwrap:has(.bsa-colorpanel:not([hidden])) .bsa-row { padding-bottom: 0; row-gap: 10px; }
      /* Navnelinjens inline-award skjules på mobil (banneret over rækken bruges i stedet) */
      .bsa-produkt--liste .bsa-nameline { max-width: none; }
      .bsa-produkt--liste .bsa-nameline .bsa-award { display: none; }
      /* Produkt-kort: udmærkelse OVER titlen på sin egen linje (navnelinje som kolonne).
         Navnet stretcher til navnelinjens bredde (align-self), så ellipsis kan afkorte —
         ellers bliver det content-bredt i kolonnen og løber ud over kortet. */
      .bsa-produkt--produkt .bsa-nameline { flex-direction: column; align-items: flex-start; gap: 6px; }
      .bsa-produkt--produkt .bsa-nameline .bsa-award { order: -1; margin-left: 0; align-self: flex-start; }
      .bsa-produkt--produkt .bsa-nameline .bsa-name { align-self: stretch; }
      /* Farvevælger: mindre thumbs + tættere pakning; ingen border på ikke-aktive (kun
         outline på valgt, som ikke øger boksen). Knap-bredden holdes så 5-cifrede priser
         (>10.000 kr) stadig får plads. */
      .bsa-colors { gap: 6px; }
      .bsa-color { min-width: 48px; padding: 2px 4px; gap: 2px; border: none; }
      .bsa-color:hover { border-color: transparent; }
      .bsa-color.is-selected { outline: 2px solid #2e7d46; outline-offset: -1px; box-shadow: none; }
      .bsa-color-thumb { width: 44px; height: 44px; }
      /* Kompakt: navn på linje 1 (fuld bredde), pris · hos shop · lager + Se pris på linje 2.
         .bsa-inline-left → display:contents, så dens dele deler linje med CTA'en. */
      .bsa-inline-bar { flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 20px 10px 10px; }
      .bsa-inline-left { display: contents; }
      .bsa-inline-bar .bsa-name { flex: 1 1 100%; white-space: normal; overflow: visible; text-overflow: clip; }
      .bsa-inline-right { margin-left: auto; }
    }

    /* ===== Skeleton-shimmer: pris-slots skimrer indtil hydreringen (K5) har fyldt dem.
       Teksten ("— kr" fallback) gøres transparent bag shimmeren; JS fjerner .bsa-skel
       når prisen er sat — eller ved fetch-fejl, så fallbacken bliver synlig. ===== */
    .bsa-skel {
      color: transparent !important;
      border-radius: 6px;
      background: linear-gradient(90deg, #ececec 25%, #f8f8f8 50%, #ececec 75%);
      background-size: 200% 100%;
      animation: bsa-skel 1.2s ease-in-out infinite;
      min-width: 3.2em;
      user-select: none;
    }
    @keyframes bsa-skel {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .bsa-skel { animation: none; }
    }

    /* Kompakt: fold-ud farvevælger under bjælken — egen bordet boks der matcher bjælken */
    .bsa-produkt--inline .bsa-colorpanel {
      border: 1px solid rgba(0,0,0,.1); border-radius: 8px;
      padding: 10px 12px 12px; margin-top: 6px; background: #fff;
    }
    .bsa-produkt--inline .bsa-colorpanel .bsa-colors { margin-top: 0; }

    /* ===== Vinanbefalinger (bloggerspace-affiliate/vin) — Trio-kort =====
       Wrapper .bsa-vin arver .bsa-produkt (border 12px). Badges er positions-faste,
       midterkortet (Sikkert valg) fremhæves med grøn kant som Billigst-mønstret. */
    .bsa-vin { position: relative; }
    .bsa-vin-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
    .bsa-vin-title { font-weight: 600; font-size: 1.15em; }
    .bsa-vin-sub { color: #666; font-size: .9em; }
    .bsa-vin-grid { display: flex; gap: 12px; margin-top: 24px; }
    /* Borderloese kort (Frederiks valg 02-08): billedernes graa blokke definerer
       kolonnerne — kort-border var kasse-i-kasse-stoej. "Sikkert valg"-betoningen
       flyttet fra kort-kant til groen kant om BILLEDET alene. */
    .bsa-vin-card {
      flex: 1; min-width: 0; position: relative; text-align: left;
      padding: 0;
      display: flex; flex-direction: column; align-items: stretch;
    }
    .bsa-vin-card--mid .bsa-vin-img { border: 1px solid #2e7d46; }
    .bsa-vin-badge {
      position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 1;
      font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 9px; white-space: nowrap;
    }
    .bsa-vin-badge--budget { background: #eef2f7; color: #2c4a6e; }
    .bsa-vin-badge--mid { background: #EAF3DE; color: #27500A; border: 1px solid #97C459; }
    .bsa-vin-badge--lux { background: #faeeda; color: #633806; }
    /* Fuldbredde-billede m. LAAST format (Frederiks valg 02-08): aspect-ratio 5/8
       (~feedets 837x1332) goer alle tre kort ens uanset kildens maal — afvigende
       formater fra andre annoncoerer letterboxes paa graa baggrund (object-fit) */
    .bsa-vin-img { width: 100%; height: auto; aspect-ratio: 5 / 8; object-fit: contain; background: #f6f6f6; border-radius: 8px; margin: 4px 0 10px; }
    /* Lange, ubrydelige produktnavne fra hubben må aldrig sprænge grid-kolonnen —
       og navne klippes med … efter 2 linjer i BEGGE paner (kort her, rækker i
       række-sektionen), så et langt årgangs-navn ikke gør alle tre kort højere */
    .bsa-vin-name { font-weight: 500; font-size: .85em; line-height: 1.3; margin-bottom: 2px; overflow-wrap: anywhere; }
    .bsa-vin-card .bsa-vin-name { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    /* Meta-linjen (drue · land) klippes ligeledes ved 2 linjer — i begge paner */
    .bsa-vin .bsa-vin-meta { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .bsa-vin-meta { color: #666; font-size: .82em; margin-bottom: 10px; }
    .bsa-vin-metaicon { width: 12px; height: 12px; vertical-align: -1.5px; margin-right: 2px; }
    /* Pris-slotten flexificeres (som .bsa-prisrow): skeletonens min-width virker, og
       pris + udstreget førpris centreres på én linje. Vægten sidder på PRISEN — ikke
       på slotten — så den udstregede førpris ikke arver 700 og bliver tungere end prisen. */
    .bsa-vin-pris { display: flex; justify-content: center; align-items: baseline; gap: 6px; margin: 4px 0 10px; }
    .bsa-vin-pris .bsa-price { font-weight: 700; }
    /* CTA'en skubbes til bunden, så de tre kort får ens højde med knapperne på linje */
    /* Købslinjen: pris (m. førpris under) venstre — CTA højre, bundfæstet så de 3 kort flugter */
    .bsa-vin-buyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
    /* Udsolgt: hydreringen sætter bsa-udsolgt på kortet (data-bsa-row) — nedton som rækkerne */
    .bsa-vin-card.bsa-udsolgt { opacity: .5; }
    /* ── Responsivt layout-skift (02-08, afløste 50/50-splittesten): kort i 3 kolonner
       på desktop/tablet (>640px), Sommelier-rækker på mobil (≤640px). RENT CSS — virker
       uden JS og kan ikke fryses i Cloudflare-cachen. Brækpunktet SKAL matche
       matchMedia i vin_layout_js (stempler data-bsa-ab til beacon'en). */
    @media (max-width: 640px) {
      .bsa-vin { padding: 20px 12px 12px; }
      .bsa-vin-grid { display: none; }
    }

    /* ── Vin: to layouts i samme blok — vin_kort (kort-grid) & vin_liste (rækker).
       Skiftet er responsivt (640px-media-queries her i filen); vin_layout_js stempler
       kun data-bsa-ab med det viste layout til beacon'en. */

    /* Kontekst-chip ("Til hvid fisk") — udledt af listenavnet når underteksten er tom */
    .bsa-vin-kontekst { background: #eef4ee; color: #33663f; font-weight: 600; font-size: .82em; border-radius: 99px; padding: 3px 11px; }

    /* Billede- og navne-links (større klikflade): må ikke LIGNE links — arver farve,
       ingen underline; navnet får underline på hover som eneste affordance. Temaers
       globale a-styling (farve/underline) overstyres eksplicit. */
    .bsa-vin a.bsa-vin-namelink { color: inherit; text-decoration: none; }
    .bsa-vin a.bsa-vin-namelink:hover { text-decoration: underline; }
    .bsa-vin a.bsa-vin-imglink { display: inline-block; line-height: 0; text-decoration: none; }
    .bsa-vin-row a.bsa-vin-imglink { flex-shrink: 0; }

    /* KRITISK: hidden-attributten er UA-stylesheet display:none — enhver author-display
       (fx .bsa-vin-grid { display:flex }) VINDER over den, så en "skjult" pane vistes
       alligevel (set live 02-08: begge layouts på én gang). Denne regel gør hidden
       suveræn for AB-paner, uanset hvilke display-regler panerne ellers har. */
    [data-bsa-ab-pane][hidden] { display: none !important; }

    /* Badges beholder deres farver i kort-panen (Frederiks valg 02-08 — den grå
       "neutralisering" fra mockup-bud 1 blev prøvet og fravalgt). */
    /* SVG-ikoner i badges + titel (02-08, emojis fravalgt: platform-inkonsistente).
       currentColor → ikonet arver badge-farven; inline-flex centrerer ikon og tekst. */
    .bsa-vin-badge { display: inline-flex; align-items: center; gap: 4px; }
    .bsa-vin-badge svg, .bsa-vin-rlabel svg { width: 11px; height: 11px; flex-shrink: 0; }
    .bsa-vin-titleicon { width: 17px; height: 17px; vertical-align: -2.5px; margin-right: 5px; }
    /* Pris + CTA skubbes SAMLET i bunden, så priserne flugter på tværs af kortene
       (auto-margin flyttes fra CTA'en til prislinjen — CTA følger lige under). */
    /* Prisen i kortet: "Før X kr" EFTER nu-prisen på samme linje (Frederiks valg 03-08
       — stablet førpris skubbede købslinjen skævt på tværs af de tre kort) */
    .bsa-vin-card .bsa-vin-pris { justify-content: flex-start; align-items: baseline; gap: 6px; margin: 0; }

    /* Førpris i vin-scope (begge paner): stille "Før 139 kr" — ingen gennemstregning,
       på egen linje under prisen. Procent-pill styres af væsentligheds-reglen i
       hydreringen (vises kun ≥15%), så her styles kun formen. */
    /* margin-left kun fjernet i VIN-scope (flex-gap baerer luften her) — de oevrige
       blokkes foerpris beholder sine 6px */
    .bsa-vin .bsa-rrp { display: block; width: 100%; margin-left: 0; }
    .bsa-vin .bsa-rrp:empty { display: none; }
    .bsa-vin .bsa-rrp-was { text-decoration: none; color: #9a9a9e; font-size: .82em; }
    .bsa-vin .bsa-rrp-was::before { content: "Før "; }

    /* Bud 2: Sommelier-rækker (vin_liste-panen) — kompakt, stærk på mobil, samme
       designsprog som forhandlerlisten (.bsa-prisrow) */
    .bsa-vin-rows { margin-top: 12px; }
    /* Rækkerne er MOBIL-eksklusive (layout-skiftet nederst i sektionen) og bygget som
       grid til smal skærm: billedet spænder begge rækker, tekstlinjen får hele bredden
       (navne knækker på ord — ikke pr. bogstav som i én-linjes-flexen), og pris + CTA
       ligger på egen linje under teksten. img-området bæres af BÅDE link-wrapperen
       (a/span .bsa-vin-imglink) og en bar img (intet deeplink → wrap_link er no-op). */
    .bsa-vin-row {
      display: grid; grid-template-columns: auto 1fr auto;
      grid-template-areas: "img info info" "img pris cta";
      align-items: center; column-gap: 12px; row-gap: 8px;
      padding: 12px 0; border-top: 1px solid rgba(0,0,0,.09);
    }
    /* Foerste/sidste raekke flugter med boksens egen padding — saa er luften over
       foerste og under sidste listing den samme som side-paddingen (12px) */
    .bsa-vin-row:first-child { border-top: none; padding-top: 0; }
    .bsa-vin-row:last-child { padding-bottom: 0; }
    .bsa-vin-row > .bsa-vin-imglink, .bsa-vin-row > .bsa-vin-rimg { grid-area: img; }
    /* 64x102 matcher feedets billedformat (DH Wines leverer ~836x1332, 1:1,6) — saa
       fylder flasken rammen i stedet for at staa med graa letterbox-striber i siderne */
    .bsa-vin-rimg { width: 75px; height: 120px; object-fit: contain; background: #f6f6f6; border-radius: 8px; }
    .bsa-vin-rinfo { grid-area: info; min-width: 0; text-align: left; }
    /* Badge i rækker: SAMME pill som kortene (modifier-klasserne leverer farverne) —
       bare inline i stedet for absolut positioneret (Frederiks valg 02-08; den flade
       uppercase-label blev prøvet og fravalgt) */
    /* inline-flex + gap (ikke inline-block): SVG-ikonet skal have luft til teksten —
       og reglen SKAL baere display selv, den staar sidst i cascaden for .bsa-vin-rlabel */
    .bsa-vin-row .bsa-vin-rlabel { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 9px; margin-bottom: 3px; white-space: nowrap; border: 0; }
    /* --mid-modifierens groenne kant hoerer til KORTET (matcher kort-rammen) — i raekkerne
       er der ingen ramme at matche, saa pillen staar kantloes som de to andre */
    /* Navnet klippes med … efter 2 linjer (line-clamp) — lange aargangs-navne maa
       aldrig skubbe pris-linjen ud af syne paa smaa skaerme */
    .bsa-vin-row .bsa-vin-name { margin: 1px 0 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .bsa-vin-row .bsa-vin-meta { margin: 0; }
    /* Pris-blokken: nuværende pris øverst, "Før X kr" på egen linje NEDENUNDER */
    .bsa-vin-row .bsa-vin-pris { grid-area: pris; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
    .bsa-vin-row .bsa-cta { grid-area: cta; justify-self: end; padding: 4px 9px; font-size: .8em; }
    .bsa-vin-row.bsa-udsolgt { opacity: .5; }
    /* Sommelier-trustlinje under titlen: forhandlerens ekspert laaner troværdighed
       til blokken (og faar selv branding). Renderes kun naar navnet er sat. */
    .bsa-vin-sommelier { display: flex; align-items: center; gap: 10px; margin: 12px 0 16px; background: #f4f7f4; border-radius: 10px; padding: 8px 12px; }
    .bsa-vin-somm-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
    .bsa-vin-somm-text { color: #666; font-size: .84em; line-height: 1.35; }
    .bsa-vin-somm-text strong { color: #222; font-weight: 600; }

    /* Mindre CTA'er i vin-kortene (Frederiks devtools-vaerdier 03-08): min-width-
       laasen af og strammere padding. Scoped til .bsa-vin — de oevrige blokkes
       Se pris-knapper beholder deres stoerrelse. Mobil-raekkerne har egen (mindre)
       regel m. hoejere specificitet, som stadig vinder. */
    .bsa-vin .bsa-cta { min-width: 0; padding: 4px 12px; }

    /* Stjerne-rating: 5 graa stjerner som bund, guld-raekke ovenpaa klippet til
       score-bredden (4,6 -> 92%) — delvis stjerne kommer gratis af klipningen */
    .bsa-vin-rating { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
    /* I kortet: billedets bund-margin er 10px — de -4px giver 6px op til billedet
       og 10px ned til titlen (op skal være LIDT mindre end ned, Frederiks valg) */
    .bsa-vin-card .bsa-vin-rating { margin: -4px 0 10px; }
    .bsa-vin-stars { position: relative; display: inline-flex; }
    .bsa-vin-stars svg { width: 14px; height: 14px; fill: #d8d8d8; flex-shrink: 0; }
    .bsa-vin-stars-fill { position: absolute; top: 0; left: 0; display: inline-flex; overflow: hidden; }
    .bsa-vin-stars-fill svg { fill: #e7a12c; }
    .bsa-vin-rating-count { color: #777; font-size: .8em; }

    /* Kategori-intro under sommelier-linjen: kurateret pr. vinsaet paa hubben */
    .bsa-vin-intro { color: #555; font-size: .88em; line-height: 1.55; margin: 6px 0 0; }

    /* Datoen udenfor boksen: taet paa borderen saa sammenhaengen er tydelig.
       !important er BEVIDST: spannet ligger som direkte barn af indholdsfeltet,
       hvor temaets flow-margin (.entry-content > * { margin-block-start: … })
       ellers skubber den ned — den skal ignorere dokument-marginen. */
    .bsa-vin-dato { margin: 6px 6px 0 !important; }

    /* Layout-skiftet for rækkerne: SKAL stå som de SIDSTE .bsa-vin-rows-display-regler.
       02-08 lå mobil-reglen før base-reglens display:none med samme specificitet →
       none vandt altid, og listen udeblev på mobil (samme cascade-fælde som rlabel-gap). */
    .bsa-vin-rows { display: none; }
    @media (max-width: 640px) {
      .bsa-vin-rows { display: block; }
    }

    /* ===== Mine samarbejdspartnere (bloggerspace-affiliate/samarbejdspartnere) =====
       Layout B: redaktionelle rækker i ét bordet kort. Rækkefølgen fra hubben ER
       prioriteringen. Rabat-chip vises kun når hubben leverer discount_code. */
    .bsa-partners { position: relative; }
    .bsa-partners-h { font-weight: 700; font-size: 1.15em; margin: 0 0 2px; }
    .bsa-partners-sub { color: #777; font-size: .88em; margin: 0 0 10px; }
    .bsa-partners-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
    .bsa-partners-list .bsa-partners-row:last-child { border-bottom: none; padding-bottom: 0; }
    /* Kantstreg på ALLE logo-pladser: mange butikslogoer er lyse og bærer deres egen
       hvide baggrund (0 % transparens), så uden en kant flyder de sammen med det hvide
       kort og ligner et tomt felt. Målt på filerne: Proshop 225/255 og Magasin 224/255
       er lyse men UGENNEMSIGTIGE — en mørk plade bagved ville de dække helt, så det er
       kanten der løser dem, ikke logo_bg-flaget. */
    .bsa-partners-logo {
      /* display:inline-block er IKKE kosmetik: et brudt billede (404 på logo-hosten)
         falder tilbage til inline alt-tekst, og width/height gælder ikke for inline
         elementer — rækken sprænges så af alt-teksten. Med inline-block holder
         40x40-boksen uanset om filen loader. */
      display: inline-block;
      width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; object-fit: contain;
      background: #f7f7f7; box-sizing: border-box; border: 1px solid rgba(0,0,0,.10);
      overflow: hidden; font-size: 0; /* skjuler alt-teksten hvis billedet fejler */
    }
    /* Logo og navn er links til partneren. De må IKKE ligne tema-links: logoet er
       rent billede, navnet arver tekstfarven og får kun understregning ved hover.
       Linket er nu flex/grid-item'et, så flex-shrink flytter med hertil. */
    .bsa-partners-logolink { flex-shrink: 0; line-height: 0; display: inline-block; }
    .bsa-produkt a.bsa-partners-namelink, .bsa-partners-namelink { color: inherit; text-decoration: none; }
    .bsa-produkt a.bsa-partners-namelink:hover, .bsa-produkt a.bsa-partners-namelink:focus { color: inherit; text-decoration: underline; }
    /* Hvidt/gennemsigtigt logo forsvinder på lys baggrund → mørk plade (hub-flag
       logo_bg='dark'). Lidt luft, så logoet ikke klistrer til kanten. */
    .bsa-partners-logo--dark { background: #2b2b2b; padding: 4px; box-sizing: border-box; }
    .bsa-partners-logo--letter {
      background: #eef2f7; color: #2c4a6e; font-weight: 600; font-size: 14px;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .bsa-partners-body { flex: 1; min-width: 0; }
    /* flex + gap frem for margin-left: når tag'et wrapper til egen linje, starter det
       ved venstre kant og flugter med titlen (en margin ville rykke det ind). */
    .bsa-partners-name { font-weight: 700; font-size: .95em; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
    .bsa-partners-tag {
      display: inline-block; font-size: 10px; font-weight: 600; color: #2c6e4a; background: #eaf4ee;
      border-radius: 6px; padding: 1px 7px; letter-spacing: .02em; text-transform: uppercase;
    }
    .bsa-partners-desc { color: #555; font-size: .88em; margin: 2px 0 0; }
    .bsa-partners-cta {
      align-self: center; flex-shrink: 0; display: inline-block; font-size: 13px; font-weight: 600;
      padding: 6px 16px; border-radius: 4px; border: 1px solid #2e7d46; background: #2e7d46;
      color: #fff; text-decoration: none; white-space: nowrap;
    }
    /* Tekstfarven skal vinde over temaets .entry-content a — samme garde som .bsa-cta
       (linje ~224); uden den bliver "Besøg" tema-blå/understreget i hviletilstand. */
    .bsa-produkt a.bsa-partners-cta { color: #fff; text-decoration: none; }
    a.bsa-partners-cta:hover, a.bsa-partners-cta:focus { background: #256b3b; border-color: #256b3b; color: #fff; text-decoration: none; }
    /* Rabat-chip: klik kopierer koden (JS toggler --ok-klassen → "Kopieret ✓").
       Kopi-ikon + "Klik for at kopiere"-hint gør handlingen tydelig. Chippens tekst er
       tilbage på fuld størrelse (Frederiks værdi) — selve koden holder sine 16px nedenfor. */
    .bsa-partners-code {
      display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; padding: 2px 9px;
      font: inherit; font-size: .82em; color: #27500A; background: #EAF3DE;
      border: 1px dashed #97C459; border-radius: 6px; cursor: pointer;
      transition: background .12s, border-color .12s;
    }
    .bsa-partners-code:hover, .bsa-partners-code:focus-visible { background: #dfeed0; border-color: #7fb03e; }
    .bsa-partners-code-label { display: inline-flex; align-items: center; gap: 4px; }
    .bsa-partners-code-icon { width: 1.05em; height: 1.05em; flex-shrink: 0; opacity: .75; }
    /* Selve koden holder 16px (Frederiks værdi) — omkringliggende tekst er mindre,
       så hierarkiet er: lille "Rabatkode:" → stor kode → lille procent. */
    .bsa-partners-code code { font-weight: 700; font-size: 16px; background: none; padding: 0; letter-spacing: .02em; }
    .bsa-partners-pct { color: #666; }
    /* Hintet står diskret efter koden — forsvinder på små skærme, hvor ikonet bærer signalet */
    .bsa-partners-code-hint { color: #6b8a5a; font-style: italic; margin-left: 2px; }
    .bsa-partners-code-ok { font-weight: 600; }
    .bsa-partners-code--ok { background: #d6ecc4; border-style: solid; }
    /* Selve skiftet label <-> kvittering styres af JS'ens INLINE styles, ikke herfra:
       ok-spannet har style="display:none" i markuppen, og en inline style vinder over
       enhver stylesheet-regel. Reglerne der stod her var derfor magtesloese — labelen
       forsvandt, men kvitteringen kom aldrig frem. Samme familie som hidden-faelden
       i vin-blokken: husk hvem der vinder cascaden, foer du toggler med en klasse. */
    @media (max-width: 600px) {
      .bsa-partners { padding: 20px 10px 10px; }
      /* Mobil-layout (Frederiks struktur): øverste række er tre kolonner
         [logo | navn+tag | Besøg], og beskrivelse + rabatkode ligger under i
         FULD bredde. Ellers kvæles beskrivelsen i den smalle midterkolonne
         (fire ord pr. linje). display:contents fladgør .bsa-partners-body, så
         dens børn bliver grid-items — samme greb som .bsa-prismeta. */
      .bsa-partners-row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas: "logo navn cta" "desc desc desc" "kode kode kode";
        column-gap: 12px; row-gap: 6px; align-items: center;
      }
      .bsa-partners-body { display: contents; }
      .bsa-partners-logolink { grid-area: logo; align-self: start; }
      .bsa-partners-name { grid-area: navn; }
      .bsa-partners-desc { grid-area: desc; margin: 0; }
      .bsa-partners-code { grid-area: kode; justify-self: start; margin-top: 0; }
      .bsa-partners-cta { grid-area: cta; align-self: start; margin-left: 0; }
      /* Ikonet bærer kopiér-signalet — hintet ville tvinge chippen i to linjer */
      .bsa-partners-code-hint { display: none; }
      .bsa-partners-code { white-space: nowrap; }
    }