/*
Theme Name: vaekstlys
Theme URI: https://vaekstlys.dk
Description: Designsystem til vaekstlys.dk — retning A «Instrument» (grafit + køligt papir + signalblå), valgt af Laust 5-9-2026. Child-tema til Twenty Twenty-Five. Grundlag: docs/laeserprofil.md, docs/fodaftryk-portefoelje.md, docs/forbilleder.md, docs/design-system.md.
Author: Black Spring ApS
Template: twentytwentyfive
Version: 1.0.0
Text Domain: vaekstlys
*/

/* ============================================================================
   BYGGET AF scripts/byg-css.mjs — RET IKKE HER.
   Kilde: design/vl.css (retning A låst) + tema/vaekstlys/wp-integration.css
   ========================================================================= */

/* --- Selvhostede skrifter. Google Fonts må ALDRIG indlæses (functions.php).
   Instrument Sans er en VARIABEL skrift: Google leverer den samme fil til
   400, 500 og 600 (identisk md5). Derfor ét udsnit pr. unicode-range med
   font-weight som interval — ikke tre kopier af de samme 30 KB.          --- */
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/is-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/is-var-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jbm-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jbm-400-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/jbm-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   vaekstlys.dk — designsystem
   Skrevet 5/9-2026. Alle valg er begrundet i docs/laeserprofil.md og målt
   mod docs/fodaftryk-portefoelje.md + docs/forbilleder.md.

   Retning A «Instrument» er låst her (Lausts valg 5-9-2026). B «Vinterlys»
   og C «Drivhus» står kun i design/vl.css som dokumentation af fravalget.

   Alle farvepar er regnet med scripts/kontrast.mjs FØR de blev skrevet ind.
   Ratioen står i kommentaren ved hver token. Kravet er 4,5:1 for normal
   tekst, 3:1 for stor/fed tekst og for strukturelle kanter.
   ========================================================================= */

/* --- A · Instrument (default) ------------------------------------------ */
:root {
  --papir:      #F1F2F4;   /* sitets FLADE — det, arealmålingen skal vise  */
  --kort:       #FFFFFF;
  --blaek:      #15181D;   /* mørkt bånd. hvid tekst 17,79:1              */
  --blaek2:     #22262E;   /* tabelhoved. hvid tekst 15,17:1              */
  --tekst:      #16181C;   /* på papir 15,87:1 · på hvid 17,77:1          */
  --tekstsvag:  #565C66;   /* på papir 6,01:1                             */
  --accent:     #1550B8;   /* SOM TEKST på papir 6,53:1 · på hvid 7,31:1  */
  --accentlys:  #5B9BF5;   /* SOM TEKST på blæk 6,31:1 · blæk2 5,38:1     */
  --paa-accent: #FFFFFF;   /* hvid på accentflade 7,31:1                  */
  --kant:       #868B95;   /* strukturel kant, 3,05:1 mod papir           */
  --linje:      #D5D8DE;   /* dekorativ hårstreg — bærer ingen betydning  */
  --advarsel:   #8A3B12;   /* ⚠-mærket kilde                              */

  --maks-laes:  680px;     /* læsespalte — målt linjelængde               */
  --maks-data:  1120px;    /* datazone: tabeller bryder ud af spalten     */
  --band:       clamp(40px, 6vw, 76px);   /* lodret båndluft              */

  --tekstskrift: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --talskrift:   "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}


* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--tekst);
  font-family: var(--tekstskrift);
  font-size: 17px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;          /* porteføljen kører negativ på 4/5 — vi ikke */
}

/* =========================================================================
   1. BÅND — sidens grundrytme
   Porteføljen lægger alt i ÉN centreret 645-704 px spalte i en 1440 px
   flade; halvdelen af skærmen står tom på 4 af 5 sites. Vi kører i stedet
   fuldbredde-bånd (mekanikken fra soltech.com), hvor teksten holder sin
   læsespalte, men tabeller bryder ud til datazonen.
   ========================================================================= */
.vl-band            { padding: var(--band) 20px; background: var(--papir); }
.vl-band--moerk     { background: var(--blaek); color: #fff; }
.vl-band--kort      { background: var(--kort); }
.vl-band > *        { max-width: var(--maks-laes); margin-inline: auto; }
.vl-band > .vl-bred { max-width: var(--maks-data); }

.vl-band--moerk a:not(.vl-cta), .vl-hero a:not(.vl-cta) { color: var(--accentlys); }
.vl-band--moerk .vl-kilde, .vl-hero .vl-kilde,
.vl-band--moerk .vl-daempet, .vl-hero .vl-daempet { color: #C3C7CE; }   /* 9,4:1 på blæk         */

/* =========================================================================
   2. HEADER OG FOOTER
   Porteføljesignaturen er en mørk, næsten sort bar (3/5) eller en hvid
   (2/5). Vores er i papirfarven med én strukturel kant og en mono-stribe
   med sitets tre nøgletal — en header, der bærer data. Findes ikke i
   porteføljen.
   ========================================================================= */
.vl-top {
  background: var(--papir);
  border-bottom: 1px solid var(--kant);
  position: sticky; top: 0; z-index: 50;
}
.vl-top__rk {
  max-width: var(--maks-data); margin-inline: auto;
  display: flex; align-items: center; gap: 28px;
  padding: 0 20px; min-height: 56px;
}
.vl-mrk {
  font-weight: 600; font-size: 17px; letter-spacing: .01em;
  color: var(--tekst); text-decoration: none; white-space: nowrap;
}
.vl-mrk b { color: var(--accent); font-weight: 600; }
.vl-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.vl-nav a {
  color: var(--tekst); text-decoration: none; font-size: 15px;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.vl-nav a:hover, .vl-nav a[aria-current="page"] { border-bottom-color: var(--accent); }

.vl-stribe {                       /* nøgletal i headeren                   */
  background: var(--blaek); color: #fff;
  font-family: var(--talskrift); font-size: 12.5px; letter-spacing: .02em;
}
.vl-stribe > div {
  max-width: var(--maks-data); margin-inline: auto; padding: 7px 20px;
  display: flex; gap: 22px; flex-wrap: wrap;
}
.vl-stribe b { color: var(--accentlys); font-weight: 500; }

.vl-bund { background: var(--blaek); color: #fff; padding: 48px 20px 32px; }
.vl-bund__rk { max-width: var(--maks-data); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 28px; }
.vl-bund a:not(.vl-cta) { color: #fff; }
.vl-bund small { color: #C3C7CE; }

/* =========================================================================
   3. TYPOGRAFI
   Afvigelse på akse ⑥: ÉN tekstfamilie hele vejen (porteføljen har adskilt
   overskrifts- og brødskrift på 3/5), neutral sperring (4/5 kører negativ)
   og en H1 på 32 px — markant under porteføljens 40-52 px.
   Tal sættes i mono med tabulære cifre, fordi sitet er 536 datacellers
   værd af tal, ikke af prosa.
   ========================================================================= */
h1, h2, h3 { font-weight: 500; line-height: 1.2; margin: 0 0 .5em; letter-spacing: 0; }
h1 { font-size: 32px; }
h2 { font-size: 24px; margin-top: 2em; }
h3 { font-size: 19px; margin-top: 1.6em; }
p  { margin: 0 0 1.1em; }
a  { color: var(--accent); text-underline-offset: 3px; }

.vl-kicker {                        /* accent som 3 px BLOK, aldrig som   */
  display: flex; align-items: center; gap: 10px;   /* løs tekstfarve      */
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tekstsvag); margin-bottom: 14px;
}
.vl-kicker::before { content: ""; width: 3px; height: 15px; background: var(--accent); }
.vl-band--moerk .vl-kicker, .vl-hero .vl-kicker { color: #C3C7CE; }
.vl-band--moerk .vl-kicker::before, .vl-hero .vl-kicker::before { background: var(--accentlys); }

.vl-manchet { font-size: 19.5px; line-height: 1.55; }
.vl-daempet { color: var(--tekstsvag); font-size: 15px; }
.tal { font-family: var(--talskrift); font-variant-numeric: tabular-nums; }

/* =========================================================================
   4. NØGLETALSTRIBE — mekanikken fra acinfinity.com's produktside, hvor
   de hårde tal (µmol/J, PPFD, IP) står som punkter LIGE ved siden af
   prisen, over folden. Hos os er det sidens tre svar.
   ========================================================================= */
.vl-noegletal {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 1px; background: var(--kant); border: 1px solid var(--kant);
  margin: 26px 0;
}
.vl-noegletal > div { background: var(--kort); padding: 14px 16px; }
.vl-band--moerk .vl-noegletal, .vl-hero .vl-noegletal { background: #3A4049; border-color: #3A4049; }
.vl-band--moerk .vl-noegletal > div, .vl-hero .vl-noegletal > div { background: var(--blaek2); }
.vl-noegletal dt {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tekstsvag); margin-bottom: 4px;
}
.vl-band--moerk .vl-noegletal dt, .vl-hero .vl-noegletal dt { color: #C3C7CE; }
.vl-noegletal dd {
  margin: 0; font-family: var(--talskrift); font-size: 21px; font-weight: 500;
  line-height: 1.2;
}

/* =========================================================================
   5. HERO
   Lausts valg (GATE 0): foto + værdiløfte. Centerpiece-reglen løses ved at
   lægge de tre tal I heroen, ikke i et bånd længere nede. Teksten står på
   en flade — ikke oven på fotoet — så kontrasten ikke afhænger af, hvor
   lyst billedet er den dag, det udskiftes.
   ========================================================================= */
.vl-hero { background: var(--blaek); color: #fff; }
.vl-hero__rk {
  max-width: var(--maks-data); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
}
.vl-hero__tekst { padding: clamp(32px,4vw,60px) 20px; align-self: center; }
.vl-hero h1 { font-size: clamp(28px, 2.6vw, 34px); color: #fff; }
.vl-hero p  { color: #E4E7EC; }
.vl-hero__foto { position: relative; min-height: 340px; background: var(--blaek2); }
.vl-hero__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-hero__kredit {
  position: absolute; right: 0; bottom: 0;
  background: rgba(0,0,0,.72); color: #fff; font-size: 11.5px; padding: 4px 8px;
}

/* =========================================================================
   6. CTA
   ⚠ Bevidst brud med Lausts stående pille-præference: 999 px pille-CTA
   findes på 4 af 5 senest redesignede sites og er dermed selve signaturen.
   Skarp kant + accentflade + pil er afvigelsen på akse ⑤. Siges højt i
   docs/design-system.md, så det kan rulles tilbage med én token.
   ========================================================================= */
/* Formen er stjålet fra soltech.com, hvor CTA'en er 86-96 gange på samme side:
   flade + hård 2 px kant + hård 4 px offset i sitets mørke farve, radius 0.
   Pointen er, at KANTEN bærer 1.4.11-kravet, ikke fladen — deres lime knap
   giver 1,01:1 mod sandfladen og ville være usynlig uden. Vores accent består
   også uden kanten; vi bruger grebet for formen og for hover-affordancen.
   Det er samtidig ikke porteføljens skygge: de fem sites kører udelukkende
   bløde rgba(0,0,0,.08) 0 5px 21px — en HÅRD offset findes ingen steder. */
.vl-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--paa-accent);
  border: 2px solid var(--blaek); border-radius: 0; padding: 12px 20px;
  box-shadow: var(--blaek) 4px 4px 0 0;
  font: 500 16px/1 var(--tekstskrift); text-decoration: none; cursor: pointer;
  transition: none;
}
.vl-cta::after { content: "→"; }
.vl-cta:hover { transform: translate(2px, 2px); box-shadow: var(--blaek) 2px 2px 0 0; }
.vl-cta:active { transform: translate(4px, 4px); box-shadow: none; }
.vl-band--moerk .vl-cta, .vl-hero .vl-cta { border-color: #fff; box-shadow: #fff 4px 4px 0 0; }
.vl-band--moerk .vl-cta:hover, .vl-hero .vl-cta:hover { box-shadow: #fff 2px 2px 0 0; }
.vl-band--moerk .vl-cta:active, .vl-hero .vl-cta:active { box-shadow: none; }

.vl-cta--linje {
  background: transparent; color: inherit;
  border: 1px solid currentColor; padding: 12px 19px;
}
.vl-cta--linje:hover { background: currentColor; }
.vl-band--moerk .vl-cta--linje:hover { color: var(--blaek); }

a:focus-visible, button:focus-visible, .vl-cta:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.vl-band--moerk a:focus-visible, .vl-hero a:focus-visible { outline-color: var(--accentlys); }

/* =========================================================================
   7. TABELLEN — sitets hovedmøbel
   17 tabeller, 536 celler, 7-9 kolonner på 5 af 8 sider. Porteføljens
   tabel ser ens ud på tværs af fem paletter: tynde grå linjer, versale
   kolonneoverskrifter, tal venstrestillet. Vores har mørkt tabelhoved,
   mono tabulære tal, højrestillede taldata, fastfrosset første kolonne og
   en DESIGNET tom celle — «ikke oplyst» er sitets fund, ikke et hul.
   ========================================================================= */
.vl-tabel { overflow-x: auto; border: 1px solid var(--kant); background: var(--kort); }
.vl-tabel table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 15px; }
.vl-tabel thead th {
  background: var(--blaek2); color: #fff; font-weight: 500; text-align: left;
  padding: 11px 13px; white-space: nowrap; font-size: 13.5px;
  letter-spacing: .03em; position: sticky; top: 0;
}
.vl-tabel td, .vl-tabel tbody th { padding: 10px 13px; border-top: 1px solid var(--linje); }
.vl-tabel tbody th { text-align: left; font-weight: 500; background: var(--kort); }
.vl-tabel tbody tr:hover td, .vl-tabel tbody tr:hover th { background: var(--papir); }
.vl-tabel td.tal, .vl-tabel td[data-tal] {
  font-family: var(--talskrift); text-align: right; font-size: 14px;
}
.vl-tabel .ingen { color: var(--tekstsvag); font-style: italic; }
.vl-tabel .ingen::before { content: "— "; }      /* dekorativ tekst fra CSS */

.vl-tabel--fast tbody th, .vl-tabel--fast thead th:first-child {
  position: sticky; left: 0; z-index: 2; border-right: 1px solid var(--kant);
}
.vl-tabel--fast thead th:first-child { z-index: 3; }

.vl-tabel__fod {
  font-size: 13.5px; color: var(--tekstsvag);
  padding: 10px 13px; border-top: 1px solid var(--kant); background: var(--papir);
}

/* Mobil: 9 kolonner kan ikke vises fladt på 390 px. Rækken bliver til et
   spec-kort, hvor kolonnenavnet kommer fra data-kol via CSS — aldrig som
   tekst i DOM'en. Byggescriptet sætter attributten fra <th>-teksten.      */
@media (max-width: 700px) {
  .vl-tabel--stak table { min-width: 0; }
  .vl-tabel--stak thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); }
  .vl-tabel--stak tbody tr { display: block; border-top: 1px solid var(--kant); }
  .vl-tabel--stak tbody tr:first-child { border-top: 0; }
  .vl-tabel--stak tbody th { display: block; border: 0; background: var(--blaek2);
    color: #fff; padding: 9px 13px; }
  .vl-tabel--stak td { display: flex; justify-content: space-between; gap: 16px;
    border-top: 1px solid var(--linje); padding: 8px 13px; text-align: right; }
  .vl-tabel--stak td::before {
    content: attr(data-kol); color: var(--tekstsvag); font-size: 13.5px;
    text-align: left; font-family: var(--tekstskrift);
  }
  /* FUND på 390 px: .vl-tabel .ingen::before (0,2,1) slog td::before (0,1,2),
     så hver tom celle fik etiketten «—» i stedet for sit kolonnenavn.
     Samme specificitet, senere i filen — derfor vinder denne. */
  .vl-tabel--stak .ingen::before {
    content: attr(data-kol); font-style: normal;
  }
}

/* =========================================================================
   8. SVARBLOK — AIO-chunken
   Hver sektion skal være ÉT sammenhængende blokelement: aldrig splittet
   over kort, kolonner eller accordions (visuel semantik). Blokken markerer
   kernesvaret uden at bryde det ud af sin egen sektion.
   ========================================================================= */
.vl-svar {
  border-left: 3px solid var(--accent);
  background: var(--kort); padding: 16px 18px; margin: 0 0 1.2em;
}
.vl-svar > :last-child { margin-bottom: 0; }
.vl-svar strong { font-weight: 600; }
.vl-band--moerk .vl-svar, .vl-hero .vl-svar { background: var(--blaek2); border-left-color: var(--accentlys); }

/* Punktliste — formatmatch: AIO'en svarer med punktliste på alle fire
   målte termer. Listen er derfor en designet komponent, ikke en default ul. */
.vl-punkter { list-style: none; padding: 0; margin: 0 0 1.2em; }
.vl-punkter li { position: relative; padding-left: 22px; margin-bottom: .55em; }
.vl-punkter li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: var(--accent);
}
.vl-band--moerk .vl-punkter li::before, .vl-hero .vl-punkter li::before { background: var(--accentlys); }

/* Kildemærket ✅/⚠ fra faktabanken skal have en synlig form.              */
.vl-kilde { font-size: 13.5px; color: var(--tekstsvag); }
.vl-kilde--myndighed::before { content: "✅ "; }
.vl-kilde--kommerciel::before { content: "⚠ "; color: var(--advarsel); }

/* Disclosure — fast komponent med fast placering, fordi den er et krav og
   ikke noget nogen skal huske. Forbrugerombudsmandens sag 24/05252.       */
.vl-oplys {
  border: 1px solid var(--kant); background: var(--kort);
  padding: 11px 14px; font-size: 14px; margin: 0 0 18px;
}
.vl-oplys b { font-weight: 600; }

/* =========================================================================
   9. VIDERE-STIER
   Porteføljen bruger 3-kolonners fotokort («billede, versal kicker,
   overskrift, to linjer, Læs mere →») på de sites, der har kort. Vi bruger
   ingen kort: stierne er en nummereret liste med sidens eget nøgletal.
   ========================================================================= */
.vl-stier { list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--kant); }
.vl-stier li { border-bottom: 1px solid var(--linje); }
.vl-stier a {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 16px;
  align-items: baseline; padding: 15px 4px; text-decoration: none; color: inherit;
}
.vl-stier a:hover { background: var(--kort); }
.vl-stier .nr { font-family: var(--talskrift); color: var(--tekstsvag); font-size: 14px; }
.vl-stier .ti { font-weight: 500; }
.vl-stier .ti span { display: block; font-weight: 400; font-size: 14.5px;
  color: var(--tekstsvag); }
.vl-stier .maal { font-family: var(--talskrift); font-size: 13.5px; color: var(--accent);
  white-space: nowrap; }
.vl-band--moerk .vl-stier { border-color: #3A4049; }
.vl-band--moerk .vl-stier li { border-color: #3A4049; }
.vl-band--moerk .vl-stier a:hover { background: var(--blaek2); }
.vl-band--moerk .vl-stier .maal { color: var(--accentlys); }
/* MÅLT LIVE 5-9-2026: --tekstsvag på blæk giver 2,64:1. Mockuppen lagde stierne
   på papir og så det aldrig; sitet lægger dem på det mørke bånd. Samme lyse
   dæmpede farve som .vl-daempet og .vl-kilde bruger på mørkt — 9,4:1.        */
.vl-band--moerk .vl-stier .nr,
.vl-band--moerk .vl-stier .ti span { color: #C3C7CE; }

/* =========================================================================
   10. FIGURER OG BILLEDER
   Billeder er obligatoriske på alle sidetyper. Fallback er en DESIGNET
   flise, ikke en tom boks: glyffen kommer fra CSS via content:attr(),
   aldrig som tekst i DOM'en.
   ========================================================================= */
figure { margin: 26px 0; }
figure img { width: 100%; height: auto; display: block; border: 1px solid var(--linje); }
figcaption { font-size: 13.5px; color: var(--tekstsvag); padding-top: 7px; }

.vl-flise {
  aspect-ratio: 16/9; background: var(--blaek2); position: relative;
  border: 1px solid var(--kant);
}
.vl-flise::after {
  content: attr(data-glyf); position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--talskrift); font-size: 34px; color: var(--accentlys);
}

/* Afstandsdiagram: PPFD falder 84 % over 20 cm (E27 19 W: 372→140→61).
   Det er sitets bedste enkeltbevis og fortjener en figur, ikke en række. */
.vl-fald { display: grid; gap: 3px; margin: 20px 0; }
.vl-fald__rk { display: grid; grid-template-columns: 66px 1fr 92px; gap: 12px;
  align-items: center; font-family: var(--talskrift); font-size: 14px; }
.vl-fald__bar { height: 22px; background: var(--accent); }
.vl-band--moerk .vl-fald__bar { background: var(--accentlys); }

/* =========================================================================
   11. MOBIL
   Læseren er mobil (aften, sofa). 390 px er den kritiske måling — og
   vandret rul kan IKKE måles med mobile:true i headless Chrome, så det
   verificeres på en rigtig 390 px viewport i fase 5.
   ========================================================================= */
@media (max-width: 900px) {
  .vl-hero__rk { grid-template-columns: 1fr; }
  .vl-hero__foto { min-height: 220px; order: -1; }
}
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  h1 { font-size: 26px; }
  h2 { font-size: 21px; }
  .vl-manchet { font-size: 18px; }
  .vl-stier a { grid-template-columns: 32px 1fr; }
  .vl-stier .maal { grid-column: 2; }

  /* Målt på 390 px: den klæbende header brød til tre linjer og åd 174 af
     844 px hele vejen ned. På mobil ruller den med, og menuen bliver ÉN
     vandret række, der kan svirpes — ikke en muret blok. */
  .vl-top { position: static; }
  .vl-top__rk { display: block; padding: 10px 0 0; }
  .vl-mrk { display: block; padding: 0 20px 8px; }
  .vl-nav {
    flex-wrap: nowrap; overflow-x: auto; gap: 18px;
    padding: 0 20px 2px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .vl-nav::-webkit-scrollbar { display: none; }
  .vl-nav a { white-space: nowrap; }
  .vl-stribe > div { gap: 6px 16px; }
}

/* =========================================================================
   12. PRODUKTRÆKKE — konverteringssidernes møbel
   Mekanikken er acinfinity.com's produktside: de hårde tal står som PUNKTER
   lige ved siden af prisen, over folden — ikke gemt i en «Technical Specs»-
   fane. Hos os bliver det en række pr. lampe: billede, navn, specpunkter,
   og til højre nøgletallet (µmol/J) + pris + link.
   Ingen kort, ingen skygge, ingen radius — porteføljens fotokortgrid er
   signaturmøblet, og det er dét, vi ikke bruger.
   ========================================================================= */
.vl-prod { border: 1px solid var(--kant); background: var(--kort); margin: 0 0 -1px; }
.vl-prod__rk {
  display: grid; grid-template-columns: 168px 1fr 208px; gap: 22px;
  padding: 18px; align-items: start;
}
.vl-prod__foto { background: var(--papir); border: 1px solid var(--linje); aspect-ratio: 4/3; }
.vl-prod__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vl-prod h3 { margin: 0 0 8px; font-size: 18px; }
.vl-prod__specs { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px,1fr)); gap: 2px 18px; }
.vl-prod__specs li { font-size: 14px; display: flex; justify-content: space-between;
  gap: 10px; border-bottom: 1px solid var(--linje); padding: 4px 0; }
.vl-prod__specs span { color: var(--tekstsvag); }
.vl-prod__specs b { font-family: var(--talskrift); font-weight: 500; }
.vl-prod__specs .ingen { color: var(--tekstsvag); font-style: italic; font-family: var(--tekstskrift); }
.vl-prod__pris { text-align: right; }
.vl-prod__noegle {
  border: 1px solid var(--kant); padding: 8px 10px; margin-bottom: 10px;
}
.vl-prod__noegle dt { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tekstsvag); }
.vl-prod__noegle dd { margin: 2px 0 0; font-family: var(--talskrift); font-size: 22px;
  font-weight: 500; }
.vl-prod__kr { font-family: var(--talskrift); font-size: 20px; display: block; margin-bottom: 10px; }
.vl-prod .vl-cta { width: 100%; justify-content: center; }
.vl-prod__note { border-top: 1px solid var(--linje); padding: 11px 18px;
  font-size: 13.5px; color: var(--tekstsvag); }

@media (max-width: 760px) {
  .vl-prod__rk { grid-template-columns: 96px 1fr; gap: 14px; }
  .vl-prod__pris { grid-column: 1 / -1; text-align: left;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
  .vl-prod__noegle { margin: 0; }
  .vl-prod__kr { margin: 0; }
  .vl-prod .vl-cta { grid-column: 1 / -1; }
}

/* =========================================================================
   13. MODSTILLING — «X eller Y?»
   Mekanikken er soltech.com's «What's the Difference»: to kolonner, lodret
   skillelinje, SAMME glyf i to valører, og overskriften er tal + konsekvens.
   Den er den mest overførbare form på begge forbilleder, og den er samtidig
   en AIO-venlig chunk: entitet + tal + effekt står i selve overskriften.
   Indholdet har mindst tre steder, den passer: hvidt vs. blurple, E27 vs.
   E14, fuldspektrum vs. blå/rød.
   ========================================================================= */
.vl-modstil {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0;
  border: 1px solid var(--kant); background: var(--kort); margin: 24px 0;
}
.vl-modstil__skel { background: var(--linje); }
.vl-modstil > section { padding: 20px 22px; }
.vl-modstil h3 { margin: 0 0 10px; font-size: 17px; }
.vl-modstil h3 .tal { display: block; font-size: 23px; font-weight: 500; }
.vl-modstil--ja h3 .tal { color: var(--accent); }
.vl-modstil--nej h3 .tal { color: var(--tekstsvag); }
.vl-modstil__glyf { font-size: 30px; line-height: 1; margin-bottom: 10px; display: block; }
.vl-modstil--ja  .vl-modstil__glyf { color: var(--accent); }
.vl-modstil--nej .vl-modstil__glyf { color: var(--kant); }
.vl-modstil p { font-size: 15px; margin: 0; }
@media (max-width: 620px) {
  .vl-modstil { grid-template-columns: 1fr; }
  .vl-modstil__skel { height: 1px; }
}

/* ============================================================================
   WP-lag — det, mockuppen ikke havde brug for.
   Bygges ind i style.css af scripts/byg-css.mjs EFTER design/vl.css, så
   designsystemet forbliver ét sted og dette lag kun rydder op efter
   bloktemaet. Rør ikke farver eller mål her — de hører hjemme i vl.css.
   ========================================================================= */

/* Twenty Twenty-Five lægger rodpadding og en constrained-bredde på
   .wp-site-blocks. Begge dele ville gøre vores fuldbredde-bånd til en
   spalte med luft i siden. Båndene styrer selv deres indre bredde.        */
.wp-site-blocks,
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > main {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content > * { margin-block-start: 0; }

/* Vores egne bånd er selv fuldbredde. Alignfull-mekanikken må ikke lægge
   negative margener oveni, når temaet alligevel har fået padding 0.       */
.vl-band, .vl-hero, .vl-stribe, .vl-top, .vl-bund { width: 100%; }

/* Bloktemaets versaler på overskrifter: designsystemet §4 siger dansk
   sentence case overalt. Kontrolleret live, ikke antaget.                 */
.vl-band h1, .vl-band h2, .vl-band h3,
.vl-hero h1, .vl-hero h2 { text-transform: none; }

/* Skip-link fra bloktemaet skal kunne ses, når den får fokus.             */
.skip-link:focus { background: var(--kort); color: var(--tekst); }

/* Produktrækkens fallback-flise. Vi har ingen produktbilleder endnu: de skal
   komme fra affiliate-programmernes billedbanker og selvhostes — ALDRIG hotlink,
   for et hotlinket <img> sender læserens IP til butikkens server (og display:none
   stopper det ikke). Indtil da en DESIGNET flise, aldrig en tom boks. Glyffen er
   lampetypen og kommer fra CSS via attr() — aldrig som tekst i DOM'en.          */
.vl-prod__foto[data-glyf] { position: relative; }
.vl-prod__foto[data-glyf]::after {
  content: attr(data-glyf); position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--talskrift); font-size: 21px; letter-spacing: .02em;
  color: var(--tekstsvag);
}

/* Springnavigation — guidens otte spørgsmål. Rigtige ankerlinks, ALDRIG en
   accordion: AIO-chunken må ikke kunne foldes væk (design-system §1.3).
   Komponenten lå kun inline i design/guide.html og hørte hjemme her.       */
.vl-spring { border-top: 1px solid var(--kant); border-bottom: 1px solid var(--kant);
  padding: 16px 0; margin: 26px 0 34px; }
.vl-spring ol { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 4px 24px; }
.vl-spring a { display: block; padding: 5px 0; font-size: 15.5px; color: var(--tekst);
  text-decoration: none; }
.vl-spring a:hover { color: var(--accent); text-decoration: underline; }
.vl-spring .nr { font-family: var(--talskrift); color: var(--tekstsvag);
  font-size: 13px; margin-right: 9px; }

/* 404 og andre temasider, der ikke er bygget af os, skal stadig kunne
   læses: giv dem båndets luft, så de ikke klistrer til kanten.            */
.vl-side-standard { padding: var(--band) 20px; }
.vl-side-standard > * { max-width: var(--maks-laes); margin-inline: auto; }