/* 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-rec { color: #666; margin: 0 0 8px 2px; }
    .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: 8px; padding: 12px; background: #fff;
    }
    .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-produkt--inline .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; }
    .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) */
    .bsa-produkt--liste { position: relative; }
    .bsa-anbefaler-box > .bsa-reklame, .bsa-produkt--liste > .bsa-reklame, .bsa-inline-bar > .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: 10px; 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: 10px; 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.
       INGEN ekstra margin — badgen straddler den luft containeren allerede har over listen
       (så listen ikke hopper når den går fra 1 → flere forhandlere og badgen kommer på). */
    .bsa-prisraekke .bsa-prisrow:first-child:not(:only-child),
    .bsa-lightbox-rows .bsa-prisrow:first-child:not(:only-child) {
      position: relative; box-shadow: inset 0 0 0 1px rgba(46,125,70,.5);
    }
    .bsa-prisraekke .bsa-prisrow:first-child:not(:only-child)::after,
    .bsa-lightbox-rows .bsa-prisrow:first-child:not(:only-child)::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; }
    .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; }
    .bsa-prisrow.bsa-udsolgt { cursor: default; }
    .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: 8px; 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; }
    /* Kompakt: mindre afrundet knap */
    .bsa-inline-right .bsa-cta { border-radius: 4px; }
    /* 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; }
    /* 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 {
      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: 10px;
      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; }
    .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); }
    /* 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: 10px; 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: ' –'; }
    .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-produkt--inline .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; }