/*
Theme Name: Viking Peptides
Theme URI: https://vikingpeptides.dk
Description: Child theme til GeneratePress. Bygget 1:1 efter design-handoff'en
             "design_handoff_vikingpeptides_shop" (desktop + mobil).
Author: Viking Peptides
Template: generatepress
Version: 1.0.0
Text Domain: vikingpeptides
*/

/* ==========================================================================
   FARVESYSTEM
   Handoff'en loeser lyst/moerkt tema med TO variabler i stedet for to
   palettevaerdier pr. farve. Hver farve skrives som:
       oklch(calc(var(--k) + var(--i) * L) C H)
   hvor L/C/H er lightness, chroma og hue for den MOERKE variant.
   Lystemaet er en lineaer inversion af lightness: L_lys = 1,03 - 0,98 * L_moerk.
   Chroma og hue er uaendrede.
   ========================================================================== */

:root {
  --k: 0;
  --i: 1;

  /* Flader */
  --vp-bg:            oklch(calc(var(--k) + var(--i)*0.10)  0.006 258);
  --vp-flade:         oklch(calc(var(--k) + var(--i)*0.13)  0.007 258);
  --vp-flade-lav:     oklch(calc(var(--k) + var(--i)*0.125) 0.007 258);
  --vp-kort:          oklch(calc(var(--k) + var(--i)*0.145) 0.007 258);
  --vp-kort-hover:    oklch(calc(var(--k) + var(--i)*0.17)  0.009 258);
  --vp-billedfelt:    oklch(calc(var(--k) + var(--i)*0.175) 0.009 258);
  --vp-flade-16:      oklch(calc(var(--k) + var(--i)*0.16)  0.008 258);
  --vp-flade-20:      oklch(calc(var(--k) + var(--i)*0.20)  0.010 258);

  /* Kanter */
  --vp-kant-svag:     oklch(calc(var(--k) + var(--i)*0.21)  0.008 258);
  --vp-kant:          oklch(calc(var(--k) + var(--i)*0.24)  0.008 258);
  --vp-kant-26:       oklch(calc(var(--k) + var(--i)*0.26)  0.008 258);
  --vp-kant-staerk:   oklch(calc(var(--k) + var(--i)*0.30)  0.012 258);
  --vp-kant-32:       oklch(calc(var(--k) + var(--i)*0.32)  0.012 258);

  /* Tekst */
  --vp-tekst:         oklch(calc(var(--k) + var(--i)*0.93)  0.008 258);
  --vp-tekst-86:      oklch(calc(var(--k) + var(--i)*0.86)  0.008 258);
  --vp-tekst-2:       oklch(calc(var(--k) + var(--i)*0.74)  0.010 258);
  --vp-tekst-82:      oklch(calc(var(--k) + var(--i)*0.82)  0.008 258);
  --vp-tekst-daempet: oklch(calc(var(--k) + var(--i)*0.60)  0.015 258);
  --vp-tekst-58:      oklch(calc(var(--k) + var(--i)*0.58)  0.012 258);
  --vp-tekst-66:      oklch(calc(var(--k) + var(--i)*0.66)  0.012 258);

  /* Accent (azur, hue 245) */
  --vp-accent:        oklch(calc(var(--k) + var(--i)*0.76)  0.10  245);
  --vp-accent-hover:  oklch(calc(var(--k) + var(--i)*0.83)  0.10  245);
  --vp-accent-flade:  oklch(calc(var(--k) + var(--i)*0.16)  0.02  245);
  --vp-accent-kant:   oklch(calc(var(--k) + var(--i)*0.34)  0.05  245);
  --vp-accent-kant-40:oklch(calc(var(--k) + var(--i)*0.40)  0.05  245);
  --vp-accent-tekst:  oklch(calc(var(--k) + var(--i)*0.85)  0.04  245);
  --vp-paa-accent:    oklch(calc(var(--k) + var(--i)*0.06)  0.012 258);
  --vp-kort-hover-kant: oklch(calc(var(--k) + var(--i)*0.42) 0.05 245);

  /* Status */
  --vp-groen:         oklch(calc(var(--k) + var(--i)*0.72)  0.09  160);
  --vp-gul:           oklch(calc(var(--k) + var(--i)*0.78)  0.09  85);
  --vp-roed:          oklch(calc(var(--k) + var(--i)*0.62)  0.14  25);

  /* Advarselsflade (18 aar) */
  --vp-advarsel-bg:   oklch(calc(var(--k) + var(--i)*0.145) 0.018 60);
  --vp-advarsel-kant: oklch(calc(var(--k) + var(--i)*0.28)  0.035 60);
  --vp-advarsel-tekst:oklch(calc(var(--k) + var(--i)*0.84)  0.015 60);

  /* Topbaand */
  --vp-topbaand-bg:   oklch(calc(var(--k) + var(--i)*0.28)  0.045 245);
  --vp-topbaand-tekst:oklch(calc(var(--k) + var(--i)*0.93)  0.02  245);

  /* Header */
  --vp-header-bg:     oklch(calc(var(--k) + var(--i)*0.10)  0.006 258 / 0.86);

  /* Maal */
  --vp-bredde: 1280px;
  --vp-pad: 40px;
  --vp-r-knap: 3px;
  --vp-r-kort: 4px;
  --vp-r-panel: 5px;

  --vp-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --vp-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --vp-display: 'Grenze', 'IBM Plex Sans', serif;
}

html[data-theme="light"] { --k: 1.03; --i: -0.98; }

/* ==========================================================================
   BUND
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--vp-bg);
  color: var(--vp-tekst);
  font-family: var(--vp-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vp-tekst); text-decoration: none; }
a:hover, a:focus { color: var(--vp-accent); }

h1, h2, h3, h4, h5, h6 { font-family: var(--vp-sans); font-weight: 500; color: var(--vp-tekst); }
h1 { font-size: 43px; letter-spacing: -0.028em; line-height: 1.1; }
h2 { font-size: 28px; letter-spacing: -0.022em; }
h3 { font-size: 17.5px; }

/* Handoff: "Ingen box-shadows. Dybde skabes med flader og kanter." */
.vp-flad, .site-content, .entry-content { box-shadow: none; }

summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
input, textarea, select, button { font-family: inherit; }

.vp-wrap { max-width: var(--vp-bredde); margin: 0 auto; padding-inline: var(--vp-pad); }
.vp-mono { font-family: var(--vp-mono); letter-spacing: 0.06em; text-transform: uppercase; }

/* ==========================================================================
   TOPBAAND + HEADER
   ========================================================================== */

.vp-topbaand {
  background: var(--vp-topbaand-bg);
  color: var(--vp-topbaand-tekst);
  font-family: var(--vp-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 9px 24px;
  text-transform: uppercase;
}

.vp-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--vp-header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vp-kant-26);
}
.vp-header__inner {
  max-width: var(--vp-bredde); margin: 0 auto; padding: 0 var(--vp-pad);
  height: 76px; display: flex; align-items: center; gap: 44px;
}
.vp-logo { display: flex; align-items: center; gap: 11px; margin-right: 4px; }
.vp-logo img { height: 42px; width: auto; display: block; }
.vp-logo__ord {
  font-family: var(--vp-display); font-size: 25px; font-weight: 600; letter-spacing: 0.005em;
}
.vp-logo__ord span { color: var(--vp-tekst-daempet); font-weight: 500; }

.vp-nav { display: flex; gap: 28px; font-size: 14.5px; color: var(--vp-tekst-82); }
.vp-nav a { color: inherit; }
.vp-nav a:hover, .vp-nav a[aria-current="page"] { color: var(--vp-accent); }

/* Burger: kun mobil. Tre streger, 44 px trykfelt. */
.vp-burger {
  display: none; width: 44px; height: 44px; margin-left: -11px; padding: 0 11px;
  background: none; border: none; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px; flex: none;
}
.vp-burger span {
  display: block; height: 1.5px; width: 100%; background: var(--vp-tekst-82); border-radius: 2px;
}
.vp-burger:hover span { background: var(--vp-accent); }

.vp-header__spacer { flex: 1; }
.vp-header__hoejre { display: flex; align-items: center; gap: 10px; }

.vp-temaknap {
  display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px;
  background: none; border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-knap);
  color: var(--vp-tekst-2); font-family: var(--vp-mono); font-size: 11.5px;
  letter-spacing: 0.06em; cursor: pointer;
}
.vp-temaknap:hover { border-color: var(--vp-accent); color: var(--vp-tekst-86); }
.vp-temaknap__ikon {
  width: 12px; height: 12px; flex: none; display: block; border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

.vp-soeg {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px;
  border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-knap);
  color: var(--vp-tekst-daempet); font-size: 13.5px; width: 190px;
}
.vp-soeg__ikon { width: 11px; height: 11px; border: 1.5px solid currentColor; border-radius: 50%; display: block; flex: none; }

.vp-kurv {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px;
  background: var(--vp-flade-20); border: 1px solid var(--vp-kant-staerk);
  border-radius: var(--vp-r-knap); color: var(--vp-tekst);
  font-family: var(--vp-mono); font-size: 12.5px;
}
.vp-kurv__tal {
  min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--vp-accent); color: var(--vp-paa-accent);
  border-radius: 2px; font-weight: 500;
}

/* ==========================================================================
   KNAPPER
   ========================================================================== */

.vp-knap, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.wc-block-components-button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 30px;
  background: var(--vp-accent); color: var(--vp-paa-accent) !important;
  border: none; border-radius: var(--vp-r-knap);
  font-family: var(--vp-sans); font-size: 15px; font-weight: 500;
  line-height: 1; cursor: pointer; transition: background .15s ease;
}
.vp-knap:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .wc-block-components-button:hover {
  background: var(--vp-accent-hover); color: var(--vp-paa-accent) !important;
}

.vp-knap--sek {
  background: none; color: var(--vp-tekst-86) !important;
  border: 1px solid var(--vp-kant-staerk); height: 52px; padding: 0 28px;
}
.vp-knap--sek:hover { border-color: var(--vp-accent-kant-40); color: var(--vp-tekst) !important; background: none; }

/* ==========================================================================
   PRODUKTKORT (Woo-loop)
   ========================================================================== */

.woocommerce ul.products,
.wc-block-grid__products {
  display: grid; gap: 18px; margin: 0; padding: 0; list-style: none;
}
.woocommerce.archive ul.products { grid-template-columns: repeat(3, 1fr); }
.vp-featured ul.products { grid-template-columns: repeat(4, 1fr); }

.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  background: var(--vp-kort);
  border: 1px solid var(--vp-kant);
  border-radius: var(--vp-r-kort);
  padding: 18px;
  display: flex; flex-direction: column;
  transition: background .15s ease, border-color .15s ease;
}
.woocommerce ul.products li.product:hover {
  background: var(--vp-kort-hover);
  border-color: var(--vp-kort-hover-kant);
}
.woocommerce ul.products li.product a img {
  margin: 0 0 14px; border-radius: 3px;
  background: var(--vp-billedfelt);
  aspect-ratio: 1 / 1; object-fit: fill;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  padding: 0; margin: 0 0 4px; color: var(--vp-tekst);
}
.woocommerce ul.products li.product .price {
  font-size: 21px; letter-spacing: -0.02em; color: var(--vp-tekst);
  font-weight: 400; margin-top: auto;
}
.vp-kort__meta {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--vp-tekst-58); margin-bottom: 10px;
}
.vp-badge {
  display: inline-flex; align-items: center; padding: 4px 9px;
  background: var(--vp-accent-flade); border: 1px solid var(--vp-accent-kant);
  border-radius: 100px; font-family: var(--vp-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--vp-accent-tekst);
}

/* Lagerprik */
.vp-lager { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--vp-tekst-2); }
.vp-lager__prik { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.vp-lager--paa   .vp-lager__prik { background: var(--vp-groen); }
.vp-lager--faa   .vp-lager__prik { background: var(--vp-gul); }
.vp-lager--ud    .vp-lager__prik { background: var(--vp-tekst-58); }

/* Stjerner: gul, jf. handoff (ikke azur) */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--vp-gul); }
.woocommerce .star-rating { letter-spacing: 3px; }

/* ==========================================================================
   ENKELT PRODUKT
   ========================================================================== */

/* Produktsidens grid ligger samlet i afsnittet ENKELT PRODUKT nedenfor. */

.vp-leveringsboks {
  border: 1px solid var(--vp-kant); border-radius: var(--vp-r-kort);
  background: var(--vp-flade-16); padding: 16px 18px; margin: 22px 0;
}
.vp-leveringsboks__cutoff { color: var(--vp-gul); font-family: var(--vp-mono); font-size: 12px; letter-spacing: 0.05em; }
.vp-spec { width: 100%; border-collapse: collapse; font-family: var(--vp-mono); font-size: 12.5px; }
.vp-spec td { padding: 11px 14px; background: var(--vp-flade-16); border-bottom: 1px solid var(--vp-kant); }
.vp-spec td:first-child { color: var(--vp-tekst-daempet); }
.vp-spec td:last-child { text-align: right; }

.vp-coa-kort {
  border: 1px solid var(--vp-accent-kant); background: var(--vp-accent-flade);
  border-radius: var(--vp-r-kort); padding: 16px 18px; margin: 20px 0;
}

/* ==========================================================================
   KURV / KASSE
   ========================================================================== */

.vp-frifragt { margin-bottom: 18px; }
.vp-frifragt__tekst { font-size: 13.5px; color: var(--vp-tekst-2); margin-bottom: 8px; }
.vp-frifragt__bar { height: 6px; background: var(--vp-flade-20); border-radius: 100px; overflow: hidden; }
.vp-frifragt__fyld { height: 100%; background: var(--vp-accent); border-radius: 100px; transition: width .3s ease; }
.vp-frifragt--opnaaet .vp-frifragt__tekst { color: var(--vp-groen); }
.vp-frifragt--opnaaet .vp-frifragt__fyld { background: var(--vp-groen); }

.vp-alder {
  background: var(--vp-advarsel-bg); border: 1px solid var(--vp-advarsel-kant);
  color: var(--vp-advarsel-tekst); border-radius: var(--vp-r-knap); padding: 14px 16px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input {
  height: 48px; background: var(--vp-flade-16); color: var(--vp-tekst);
  border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-knap); padding: 0 14px;
}
.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus { border-color: var(--vp-accent); outline: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.vp-footer {
  background: var(--vp-flade-lav); border-top: 1px solid var(--vp-kant-svag);
  padding: 56px 0 32px; margin-top: 88px; color: var(--vp-tekst-2); font-size: 14px;
}
.vp-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.vp-footer h4 {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--vp-tekst-58); margin: 0 0 14px; font-weight: 400;
}
.vp-footer ul { list-style: none; margin: 0; padding: 0; }
.vp-footer li { margin-bottom: 8px; }
.vp-footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vp-footer__logo img { height: 36px; width: auto; }
.vp-footer__ord { font-family: var(--vp-display); font-size: 23px; font-weight: 600; color: var(--vp-tekst); }
.vp-footer__bund {
  border-top: 1px solid var(--vp-kant-svag); margin-top: 40px; padding-top: 22px;
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--vp-tekst-58);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

/* Cookie-banner */
.vp-cookie {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: var(--vp-flade); border-top: 1px solid var(--vp-kant);
  padding: 16px var(--vp-pad);
}
.vp-cookie__inner {
  max-width: var(--vp-bredde); margin: 0 auto; display: flex;
  align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13.5px;
}

/* ==========================================================================
   SEKTIONER
   ========================================================================== */

/* KUN lodret polstring. `padding: 88px 0` er en shorthand, og dens 0 slog
   .vp-wrap's sidepadding ihjel — sektionerne laa derfor helt ude i kanten paa
   mobil, mens heroen (som ikke har .vp-sektion) havde sin margin. Netop den
   slags forskel er svaer at se, fordi den kun rammer NOGLE af elementerne. */
.vp-sektion { padding-block: 88px; }
.vp-sektion--top { padding-block-start: 96px; }
.vp-panel {
  background: var(--vp-flade); border: 1px solid var(--vp-kant);
  border-radius: var(--vp-r-panel); padding: 32px;
}

/* ==========================================================================
   MOBIL  (handoff: 390 px iPhone-bredde)
   ========================================================================== */

@media (max-width: 768px) {
  :root { --vp-pad: 16px; }

  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  body { font-size: 15px; }

  .vp-header__inner { height: 62px; gap: 12px; }
  .vp-header { background: oklch(calc(var(--k) + var(--i)*0.10) 0.006 258 / 0.94); }
  .vp-nav, .vp-soeg { display: none; }
  .vp-logo img { height: 32px; }

  /* Ordmaerket maa ALDRIG braekke. "Viking Peptides" kraevede 124 px og havde
     116 px — de otte pixels sendte "Peptides" ned paa linje to med fuld
     linjeafstand, hvilket lignede et layout med alt for meget luft.
     Pladsen kommer fra temaknappen, som ifoelge handoff'en alligevel skal
     vaere et rent ikon paa mobil ("halvmaane-ikon mobil"). */
  .vp-logo { gap: 9px; min-width: 0; }
  .vp-logo__ord { font-size: 19.5px; white-space: nowrap; line-height: 1.1; }

  .vp-temaknap { width: 44px; padding: 0; justify-content: center; }
  .vp-temaknap__label { display: none; }
  .vp-temaknap__ikon { width: 15px; height: 15px; }

  .vp-burger { display: flex; }

  /* Footerens ordmaerke braekkede paa samme maade som headerens: "Viking" paa
     én linje og "Peptides" paa den naeste med fuld linjeafstand. Samme fix. */
  .vp-footer__ord { font-size: 20px; white-space: nowrap; line-height: 1.1; }
  .vp-footer__logo { gap: 9px; }
  .vp-footer__logo img { height: 32px; }

  .vp-sektion { padding-block: 36px; }
  .vp-sektion--top { padding-block-start: 34px; }
  .vp-panel { padding: 18px; }

  .woocommerce ul.products,
  .woocommerce.archive ul.products,
  .vp-featured ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .woocommerce ul.products li.product { padding: 13px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15.5px; }

  .woocommerce div.product { grid-template-columns: 1fr; gap: 24px; }
  .woocommerce div.product .summary { grid-column: 1; }
  .woocommerce div.product .woocommerce-product-gallery { position: static; }
  .woocommerce div.product .product_title { font-size: 30px; }

  .vp-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; }

  /* Fast bundbar paa produktsiden */
  .vp-bundbar {
    position: fixed; inset: auto 0 0 0; z-index: 50;
    background: var(--vp-flade); border-top: 1px solid var(--vp-kant);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 10px;
  }
  .vp-bundbar .vp-knap { flex: 1; height: 48px; }

  /* Hit targets minimum 44 px */
  .vp-temaknap, .vp-kurv { height: 44px; }
}

@media (min-width: 769px) {
  .vp-bundbar { display: none; }
}

/* ==========================================================================
   FORSIDE  — handoff skaerm 1
   ========================================================================== */

.vp-hero {
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 80px;
  align-items: center; padding-top: 96px; padding-bottom: 88px;
}
.vp-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vp-accent);
  border: 1px solid var(--vp-accent-kant); border-radius: 100px;
  padding: 6px 14px 6px 12px; margin-bottom: 32px;
}
.vp-pill__prik { width: 6px; height: 6px; border-radius: 50%; background: var(--vp-accent); }

.vp-hero__h1 {
  font-size: 63px; line-height: 1.03; letter-spacing: -0.032em; font-weight: 500;
  margin: 0 0 26px; text-wrap: balance;
}
.vp-hero__h1 span { color: var(--vp-tekst-daempet); }
.vp-hero__manchet {
  font-size: 18.5px; line-height: 1.62; color: var(--vp-tekst-2);
  max-width: 52ch; margin: 0 0 40px; text-wrap: pretty;
}
.vp-hero__cta { display: flex; gap: 14px; align-items: center; margin-bottom: 52px; flex-wrap: wrap; }
.vp-hero__tal {
  display: grid; grid-template-columns: repeat(3, auto); gap: 40px;
  justify-content: start; font-family: var(--vp-mono);
}
.vp-hero__tal-v { font-size: 27px; color: var(--vp-tekst); margin-bottom: 6px; }
.vp-hero__tal-l {
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vp-tekst-58);
}

.vp-batchkort {
  border: 1px solid var(--vp-kant); border-radius: var(--vp-r-kort);
  background: linear-gradient(160deg, var(--vp-flade-20), oklch(calc(var(--k) + var(--i)*0.14) 0.008 258));
  padding: 22px;
}
.vp-batchkort__top {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--vp-tekst-daempet); margin-bottom: 18px;
}
.vp-batchkort__billede {
  /* Hoejden er 90 % af bredden. Rammen er selve feltet, saa den foelger med
     af sig selv — billedet ligger ikke i en fast kasse med luft omkring.

     Her bruges 'cover' og ikke 'fill' som resten af sitet: hero-fotoet er
     kvadratisk, og med 'fill' ville det blive presset 10 % sammen i hoejden.
     Paa en cylindrisk pen ses det tydeligt. 'cover' beskaerer i stedet 5 %
     foroven og forneden, hvor der kun er himmel og is. */
  aspect-ratio: 1 / 0.9; border: 1px solid var(--vp-kant); border-radius: 3px;
  background: var(--vp-billedfelt); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.vp-batchkort__billede img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-batchkort__tabel {
  margin-top: 20px; display: grid; gap: 1px; background: var(--vp-kant);
  border: 1px solid var(--vp-kant); border-radius: 3px; overflow: hidden;
  font-family: var(--vp-mono); font-size: 12.5px;
}
.vp-batchkort__tabel > div {
  display: flex; justify-content: space-between; padding: 11px 14px;
  background: var(--vp-flade-16);
}
.vp-batchkort__tabel span:first-child { color: var(--vp-tekst-daempet); }
.vp-accent { color: var(--vp-accent); }

.vp-sektion__hoved {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 26px; gap: 20px; flex-wrap: wrap;
}
.vp-sektion__h2 { margin: 0 0 26px; }
.vp-link-mono {
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--vp-accent);
}

.vp-dok { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: center; }
.vp-dok h2 { margin-top: 0; }
.vp-dok p { color: var(--vp-tekst-2); margin-bottom: 24px; }
.vp-dok__liste {
  display: grid; gap: 1px; background: var(--vp-kant);
  border: 1px solid var(--vp-kant); border-radius: var(--vp-r-kort); overflow: hidden;
}
.vp-dok__raekke {
  display: grid; grid-template-columns: 1.6fr 1fr 0.6fr 0.8fr; gap: 12px;
  padding: 13px 16px; background: var(--vp-flade-16); font-size: 13.5px;
  align-items: center;
}
.vp-dok__raekke .vp-mono {
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.05em;
  color: var(--vp-tekst-58); text-transform: none;
}

.vp-trin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vp-trin__kort {
  background: var(--vp-kort); border: 1px solid var(--vp-kant);
  border-radius: var(--vp-r-kort); padding: 18px;
}
.vp-trin__nr {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--vp-accent); margin-bottom: 12px;
}
.vp-trin__kort h3 { margin: 0 0 8px; font-size: 16.5px; }
.vp-trin__kort p { margin: 0; font-size: 14px; color: var(--vp-tekst-2); line-height: 1.6; }

.vp-tillid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--vp-kant); border: 1px solid var(--vp-kant);
  border-radius: var(--vp-r-kort); overflow: hidden;
}
.vp-tillid > div {
  background: var(--vp-flade-16); padding: 20px 18px;
  display: flex; flex-direction: column; gap: 5px;
}
.vp-tillid strong { font-weight: 500; font-size: 14.5px; }
.vp-tillid span {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--vp-tekst-58);
}

@media (max-width: 768px) {
  .vp-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 34px; padding-bottom: 36px; }
  .vp-hero__h1 { font-size: 30px; }
  .vp-hero__manchet { font-size: 15.5px; margin-bottom: 26px; }
  .vp-hero__cta { margin-bottom: 32px; }
  .vp-hero__cta .vp-knap { flex: 1; min-width: 100%; }
  .vp-hero__tal { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .vp-hero__tal-v { font-size: 20px; }

  .vp-dok { grid-template-columns: 1fr; gap: 24px; }
  .vp-dok__raekke { grid-template-columns: 1fr auto; row-gap: 4px; font-size: 13px; }
  .vp-trin { grid-template-columns: 1fr 1fr; gap: 12px; }
  .vp-tillid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   GENERATEPRESS-CONTAINERE
   GP's egen style.css saetter hvid baggrund paa indholdsomraadet. Vi slog
   WooCommerces stylesheets fra og styler selv, saa de hvide flader stod
   tilbage under vores moerke tema. De nulstilles her frem for at blive
   overskrevet enkeltvis hvert sted de dukker op.
   ========================================================================== */

.site.grid-container,
.site-content,
.content-area,
.inside-article,
.entry-content,
.page-content,
#primary,
#content {
  background: transparent !important;
  color: var(--vp-tekst);
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
.site.grid-container { max-width: none; padding: 0; }
.separate-containers .inside-article,
.separate-containers .site-main { margin: 0; padding: 0; }
.widget-area, #right-sidebar, #left-sidebar { display: none; }

/* Indholdssider (om os, FAQ, juridiske) faar handoff'ens laesebredde paa 76ch.
   WooCommerce-siderne er OGSAA post-typen "page", saa uden undtagelserne herunder
   blev kurv og kasse klemt ned i 730 px: to-kolonne-layoutet fik 509 px til
   varelinjerne og produktnavnet brak over tre linjer. De skal have fuld bredde. */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-page) .entry-content,
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-page) .entry-header {
  max-width: 76ch; margin-inline: auto;
  padding-inline: var(--vp-pad);
}
body.page:not(.home):not(.woocommerce-page) .entry-header { padding-top: 56px; }
body.page:not(.home):not(.woocommerce-page) .entry-content { padding-bottom: 56px; }

/* Woo-sidernes egne wrappere maa ikke arve nogen bredde-begraensning */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  max-width: none; width: 100%; padding-inline: 0;
}
.entry-content h2 { margin-top: 38px; }
.entry-content h3 { margin-top: 26px; }
.entry-content p { color: var(--vp-tekst-2); }
.entry-title { color: var(--vp-tekst); }

/* WooCommerce udskriver inline `.woocommerce-product-gallery{opacity:0}` og lader
   sit eget flexslider-JS taende det igen. Vi kalder woocommerce_enqueue_styles
   tomt (vi styler selv), saa den tur bliver aldrig taget, og galleriet stod
   usynligt med korrekt hoejde — DOM'en sagde "billedet er indlaest", og det var
   det ogsaa. Det var malingen der manglede, ikke filen. */
.woocommerce-product-gallery { opacity: 1 !important; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image { display: block; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }
.woocommerce-product-gallery__trigger { display: none; }

/* ==========================================================================
   CENTRERING
   Woos arkiv- og enkeltsider laa uden for .vp-wrap og loeb helt ud til
   kanten, mens footeren var centreret. Alt indhold skal ligge i samme
   1280 px-spalte med 40 px sidepadding, jf. handoff § Spacing.
   ========================================================================== */

.vp-katalog,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
  max-width: var(--vp-bredde);
  margin-inline: auto;
  padding-inline: var(--vp-pad);
}

.vp-brodkrumme {
  font-family: var(--vp-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--vp-tekst-58); padding-top: 40px; margin-bottom: 28px;
}
.vp-brodkrumme a { color: inherit; }
.vp-brodkrumme span { color: var(--vp-tekst-82); }

/* ==========================================================================
   TILLIDSSTRIBE  (ligger under heroen, ikke i bunden)
   ========================================================================== */

.vp-stribe {
  border-top: 1px solid var(--vp-kant-svag);
  border-bottom: 1px solid var(--vp-kant-svag);
  background: var(--vp-flade);
}
.vp-stribe__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; padding-block: 26px;
}
.vp-stribe__punkt { display: flex; gap: 12px; align-items: flex-start; }
.vp-stribe__mark {
  margin-top: 5px; width: 7px; height: 7px; background: var(--vp-accent);
  border-radius: 1px; flex: none;
}
.vp-stribe__t { font-size: 14.5px; margin-bottom: 3px; }
.vp-stribe__u { font-size: 13px; color: var(--vp-tekst-daempet); }

/* ==========================================================================
   SEKTIONSHOVEDER
   ========================================================================== */

.vp-sektion__nr {
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vp-accent); margin-bottom: 14px;
}
.vp-sektion__hoved { align-items: flex-end; margin-bottom: 34px; }
.vp-sektion__hoved h2 { font-size: 37px; letter-spacing: -0.025em; margin: 0 0 12px; }
.vp-sektion__manchet {
  font-size: 16px; color: var(--vp-tekst-66); margin: 0; max-width: 62ch; line-height: 1.6;
}
.vp-sektion__h2 { font-size: 34px; margin: 0 0 40px; }
.vp-knap-lille {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px;
  border: 1px solid var(--vp-kant-staerk); border-radius: var(--vp-r-knap);
  font-size: 14.5px; color: var(--vp-tekst-86); flex: none; white-space: nowrap;
}
.vp-knap-lille:hover { border-color: var(--vp-accent-kant-40); color: var(--vp-tekst); }
.vp-pil { font-family: var(--vp-mono); color: var(--vp-accent); }
.vp-daempet { color: var(--vp-tekst-daempet); }

/* ==========================================================================
   PRODUKTKORT  (content-product.php)
   ========================================================================== */

.woocommerce ul.products li.product.vp-kort {
  padding: 0; overflow: hidden; text-align: left;
  display: flex; flex-direction: column;
  background: var(--vp-kort); border: 1px solid var(--vp-kant-svag);
  border-radius: var(--vp-r-kort);
}
.woocommerce ul.products li.product.vp-kort:hover {
  border-color: var(--vp-kort-hover-kant); background: var(--vp-kort-hover);
}
.vp-kort__billede {
  position: relative; display: block; aspect-ratio: 1 / 0.92;
  border-bottom: 1px solid var(--vp-kant-svag); background: var(--vp-billedfelt);
}
.woocommerce ul.products li.product.vp-kort .vp-kort__billede img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; margin: 0; border-radius: 0; background: none;
}
.vp-kort__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--vp-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 2px;
  background: oklch(calc(var(--k) + var(--i)*0.24) 0.04 245);
  color: var(--vp-accent-tekst);
}
.vp-kort__krop { padding: 18px; display: flex; flex-direction: column; flex: 1; gap: 14px; }
.vp-kort__titel {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 7px;
}
.vp-kort__titel a { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--vp-tekst); }
.vp-kort__maengde {
  font-family: var(--vp-mono); font-size: 12px; color: var(--vp-tekst-daempet); flex: none;
}
.vp-kort .vp-lager { font-family: var(--vp-mono); font-size: 11.5px; }
.vp-kort .vp-lager--paa { color: var(--vp-groen); }
.vp-kort .vp-lager--faa { color: var(--vp-gul); }
.vp-kort .vp-lager--ud  { color: var(--vp-tekst-58); }
.vp-kort__rating { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
/* Stjerner: fem tegn, hvert med sin egen fyldning via --fyld.
   Stjernetegnet staar i HTML'en; her farves selve GLYFFEN med en gradient der
   skifter fra gul til graa praecis ved --fyld. Ved 50 % bliver stjernen halvt
   gul, halvt graa — en rigtig halv stjerne.

   Foerste forsoeg lagde en udfyldt kopi oven paa med `content: "\2605"` og
   klippede den i bredden. Det gik galt: CSS laeste escapen som ° efterfulgt af
   5, saa "stjernen" var to helt andre tegn. Gradient-loesningen har ingen
   dubleret tekst og dermed ingen escape at tage fejl af. */
.vp-stjerner { display: inline-flex; align-items: center; gap: 1.5px; line-height: 1; }
.vp-stjerne {
  font-size: 12.5px; line-height: 1;
  background-image: linear-gradient(
    90deg,
    var(--vp-gul) 0, var(--vp-gul) var(--fyld, 0%),
    var(--vp-kant-32) var(--fyld, 0%), var(--vp-kant-32) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}.vp-kort__ratingtal {
  font-family: var(--vp-mono); font-size: 11px; color: var(--vp-tekst-58);
}
.vp-kort__bund {
  margin-top: auto; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 12px;
}
.woocommerce ul.products li.product.vp-kort .vp-kort__pris,
.vp-kort__pris .woocommerce-Price-amount,
.vp-kort__pris bdi {
  font-size: 21px; letter-spacing: -0.02em; color: var(--vp-tekst); margin: 0;
}
.woocommerce ul.products li.product.vp-kort .vp-kort__knap {
  height: 38px; padding: 0 15px; display: inline-flex; align-items: center;
  border: 1px solid var(--vp-kant-32); background: var(--vp-flade-20);
  color: var(--vp-tekst) !important; border-radius: var(--vp-r-knap);
  font-family: var(--vp-mono); font-size: 12px; flex: none; white-space: nowrap;
}
.woocommerce ul.products li.product.vp-kort .vp-kort__knap:hover {
  background: var(--vp-accent); border-color: var(--vp-accent);
  color: var(--vp-paa-accent) !important;
}
.woocommerce ul.products li.product.vp-kort .vp-kort__knap--besked {
  border-style: dashed; background: transparent; color: var(--vp-tekst-66) !important;
  font-size: 11.5px; padding: 0 13px;
}

/* ==========================================================================
   KATALOG  (archive-product.php)
   ========================================================================== */

.vp-katalog__hoved {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--vp-kant-svag);
}
.vp-katalog__hoved h1 { font-size: 42px; letter-spacing: -0.028em; margin: 0 0 12px; }
.vp-katalog__hoved p { font-size: 16px; color: var(--vp-tekst-66); margin: 0; max-width: 66ch; }
.vp-katalog__styring {
  display: flex; align-items: center; gap: 12px; flex: none;
  font-family: var(--vp-mono); font-size: 12.5px; color: var(--vp-tekst-daempet);
}
.vp-katalog__styring form,
.woocommerce-ordering { margin: 0; }
.vp-katalog__styring select,
.woocommerce-ordering select {
  height: 38px; padding: 0 12px; background: var(--vp-flade-16);
  border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-knap);
  color: var(--vp-tekst-82); font-family: var(--vp-mono); font-size: 12.5px;
}
.woocommerce-result-count { display: none; }

.vp-katalog__krop {
  display: grid; grid-template-columns: 232px 1fr; gap: 40px;
  padding-top: 32px; align-items: start;
}
.vp-filter { position: sticky; top: 100px; display: grid; gap: 30px; }
.vp-filter__titel {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vp-tekst-58); margin-bottom: 14px;
}
.vp-filter__liste { display: grid; gap: 2px; }
.vp-filter__valg {
  display: flex; justify-content: space-between; padding: 9px 12px;
  border-radius: var(--vp-r-knap); font-size: 14.5px; color: var(--vp-tekst-82);
}
.vp-filter__valg:hover { background: var(--vp-flade-16); color: var(--vp-tekst); }
.vp-filter__valg.er-valgt {
  background: var(--vp-accent-flade); color: var(--vp-accent-tekst);
}
.vp-filter__antal { font-family: var(--vp-mono); font-size: 12px; opacity: 0.6; }
.vp-filter__tjek {
  display: flex; align-items: center; gap: 10px; font-size: 14.5px;
  color: var(--vp-tekst-82); padding: 4px 0;
}
.vp-filter__tjek:hover { color: var(--vp-tekst); }
.vp-filter__boks {
  width: 15px; height: 15px; border: 1px solid var(--vp-kant-32);
  border-radius: 2px; display: block; flex: none; position: relative;
}
.vp-filter__tjek.er-valgt { color: var(--vp-accent-tekst); }
.vp-filter__tjek.er-valgt .vp-filter__boks {
  background: var(--vp-accent); border-color: var(--vp-accent);
}
.vp-filter__tjek.er-valgt .vp-filter__boks::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--vp-paa-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.vp-filter__coa {
  border: 1px solid var(--vp-kant); border-radius: var(--vp-r-kort);
  padding: 18px; background: var(--vp-flade);
}
.vp-filter__coa-titel { font-size: 14.5px; margin-bottom: 8px; }
.vp-filter__coa p { font-size: 13.5px; line-height: 1.6; color: var(--vp-tekst-66); margin: 0 0 14px; }
.vp-filter__coa a { font-family: var(--vp-mono); font-size: 12.5px; color: var(--vp-accent); }
.vp-katalog__grid ul.products { grid-template-columns: repeat(3, 1fr); }
.vp-tom { color: var(--vp-tekst-2); }
.vp-tom a { color: var(--vp-accent); }

/* ==========================================================================
   DOKUMENTATIONSSEKTION + NYHEDSBREV
   ========================================================================== */

.vp-dok {
  border: 1px solid var(--vp-kant-svag); border-radius: var(--vp-r-panel);
  background: var(--vp-flade); display: grid; grid-template-columns: 0.95fr 1.05fr;
  overflow: hidden;
}
.vp-dok__venstre { padding: 56px 48px; border-right: 1px solid var(--vp-kant-svag); }
.vp-dok__venstre h2 { font-size: 34px; letter-spacing: -0.025em; margin: 0 0 20px; line-height: 1.15; }
.vp-dok__venstre p { font-size: 16.5px; line-height: 1.65; color: var(--vp-tekst-2); margin: 0 0 18px; }
.vp-dok__venstre p:last-of-type { margin-bottom: 32px; }
.vp-dok__hoejre {
  padding: 40px; display: flex; flex-direction: column; gap: 16px;
  background: oklch(calc(var(--k) + var(--i)*0.115) 0.006 258);
}
.vp-dok__top {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--vp-tekst-daempet);
}
.vp-dok__top a { color: var(--vp-accent); }
.vp-dok__scan {
  border: 1px solid var(--vp-kant); border-radius: 3px; background: var(--vp-flade-16);
  aspect-ratio: 16 / 9; overflow: hidden;
}
.vp-dok__scan img { width: 100%; height: 100%; object-fit: fill; display: block; }
.vp-dok__tabel {
  display: grid; gap: 1px; background: var(--vp-kant-svag);
  border: 1px solid var(--vp-kant-svag); border-radius: 3px; overflow: hidden;
  font-family: var(--vp-mono); font-size: 12.5px;
}
.vp-dok__raekke {
  display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr; gap: 12px;
  padding: 12px 14px; background: oklch(calc(var(--k) + var(--i)*0.135) 0.007 258);
}
.vp-dok__raekke--hoved {
  background: oklch(calc(var(--k) + var(--i)*0.155) 0.008 258);
  color: var(--vp-tekst-58); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
}

.vp-nyhedsbrev {
  border: 1px solid oklch(calc(var(--k) + var(--i)*0.26) 0.03 245);
  border-radius: var(--vp-r-panel);
  background: linear-gradient(120deg, oklch(calc(var(--k) + var(--i)*0.18) 0.025 245), var(--vp-flade));
  padding: 52px 48px; display: grid; grid-template-columns: 1fr 0.85fr;
  gap: 60px; align-items: center;
}
.vp-nyhedsbrev h2 { font-size: 29px; letter-spacing: -0.02em; margin: 0 0 12px; }
.vp-nyhedsbrev p { font-size: 16px; line-height: 1.6; color: var(--vp-tekst-2); margin: 0; max-width: 54ch; }
.vp-nyhedsbrev__form { display: flex; gap: 10px; }
.vp-nyhedsbrev__form input {
  flex: 1; height: 50px; padding: 0 16px; background: var(--vp-bg);
  border: 1px solid var(--vp-kant-staerk); border-radius: var(--vp-r-knap);
  color: var(--vp-tekst); font-size: 15px;
}
.vp-nyhedsbrev__form input::placeholder { color: var(--vp-tekst-58); }
.vp-nyhedsbrev__form .vp-knap { height: 50px; padding: 0 24px; flex: none; }

/* ==========================================================================
   DISCLAIMER  (bunden af hver side)
   ========================================================================== */

.vp-disclaimer__ydre { margin-top: 56px; }
.vp-disclaimer {
  border: 1px solid var(--vp-advarsel-kant); border-radius: var(--vp-r-kort);
  background: var(--vp-advarsel-bg); padding: 24px 26px;
  display: flex; gap: 18px; align-items: flex-start;
}
.vp-disclaimer__mark {
  margin-top: 4px; width: 9px; height: 9px; flex: none; border-radius: 1px;
  background: oklch(calc(var(--k) + var(--i)*0.74) 0.10 60);
}
.vp-disclaimer__label {
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 10px;
  color: oklch(calc(var(--k) + var(--i)*0.80) 0.08 60);
}
.vp-disclaimer p {
  margin: 0; font-size: 14.5px; line-height: 1.7; max-width: 105ch;
  color: var(--vp-advarsel-tekst); text-wrap: pretty;
}
.vp-disclaimer strong { font-weight: 600; }

.vp-footer__bund {
  border-top: none; margin-top: 0; padding-block: 28px 44px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--vp-mono); font-size: 12px; color: var(--vp-tekst-58);
  text-transform: none; letter-spacing: 0.02em; flex-wrap: wrap;
}

@media (max-width: 768px) {
  .vp-stribe__grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .vp-sektion__hoved { display: block; }
  .vp-sektion__hoved h2 { font-size: 26px; }
  .vp-sektion__hoved .vp-knap-lille { margin-top: 18px; }
  .vp-sektion__h2 { font-size: 24px; margin-bottom: 22px; }

  .vp-katalog__hoved { display: block; }
  .vp-katalog__hoved h1 { font-size: 30px; }
  .vp-katalog__styring { margin-top: 18px; }
  .vp-katalog__krop { grid-template-columns: 1fr; gap: 26px; }
  .vp-filter { position: static; }
  .vp-katalog__grid ul.products { grid-template-columns: repeat(2, 1fr); }

  .vp-dok { grid-template-columns: 1fr; }
  .vp-dok__venstre { padding: 26px 18px; border-right: none; border-bottom: 1px solid var(--vp-kant-svag); }
  .vp-dok__venstre h2 { font-size: 24px; }
  .vp-dok__hoejre { padding: 18px; }
  .vp-dok__raekke { grid-template-columns: 1.3fr 1fr 0.7fr; font-size: 11.5px; }
  .vp-dok__raekke span:last-child { display: none; }

  .vp-nyhedsbrev { grid-template-columns: 1fr; gap: 24px; padding: 26px 18px; }
  .vp-nyhedsbrev h2 { font-size: 23px; }
  .vp-nyhedsbrev__form { flex-direction: column; }
  .vp-nyhedsbrev__form .vp-knap { width: 100%; }

  .vp-disclaimer { padding: 18px; gap: 12px; }
  .vp-disclaimer p { font-size: 13.5px; }
  .vp-footer__bund { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 11px; }
  .vp-brodkrumme { padding-top: 20px; margin-bottom: 18px; }
}

/* GeneratePress laegger display:flex paa #content for at kunne stille indhold
   og sidebar side om side. Vi har ingen sidebar, saa forsidens wrapper blev
   et flex-item i max-content-bredde (1280 px) og satte sig i VENSTRE kant,
   mens header og footer var centreret hver for sig. Derfor saa alt indhold
   forskudt ud. Vi har ingen brug for flex her. */
#content.site-content { display: block; }
.vp-forside,
#primary.content-area,
main#main { width: 100%; max-width: none; }

/* ==========================================================================
   PRODUKTSIDE  (single-product.php)
   ========================================================================== */

.vp-produkt { padding-bottom: 72px; }
.vp-produkt__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}

.vp-galleri { position: sticky; top: 100px; }
.vp-galleri__hoved {
  aspect-ratio: 1 / 0.95; border: 1px solid var(--vp-kant);
  border-radius: var(--vp-r-kort); background: var(--vp-billedfelt);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.vp-galleri__hoved img { width: 100%; height: 100%; object-fit: fill; display: block; }
.vp-galleri__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.vp-galleri__thumb {
  aspect-ratio: 1; border: 1px solid var(--vp-kant); border-radius: 3px;
  background: var(--vp-billedfelt); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.vp-galleri__thumb img { width: 100%; height: 100%; object-fit: fill; display: block; }
.vp-galleri__thumb--tom span {
  font-family: var(--vp-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--vp-tekst-58);
}

.vp-koeb__top {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--vp-tekst-daempet); margin-bottom: 14px;
}
.vp-koeb__h1 { font-size: 43px; letter-spacing: -0.028em; margin: 0 0 10px; line-height: 1.08; }
.vp-koeb__undertitel { font-size: 16.5px; color: var(--vp-tekst-2); margin-bottom: 16px; }
.vp-koeb__rating {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-size: 13.5px; color: var(--vp-tekst-2);
}
.vp-koeb__rating:hover { color: var(--vp-accent); }
.vp-koeb__pris { margin-bottom: 14px; }
.vp-koeb__prisbeloeb,
.vp-koeb__prisbeloeb .woocommerce-Price-amount,
.vp-koeb__prisbeloeb bdi {
  font-size: 34px; letter-spacing: -0.025em; color: var(--vp-tekst);
}
.vp-koeb__lager { margin-bottom: 20px; font-family: var(--vp-mono); font-size: 12.5px; }
.vp-koeb__lager.vp-lager--paa { color: var(--vp-groen); }
.vp-koeb__lager.vp-lager--faa { color: var(--vp-gul); }
.vp-koeb__lager.vp-lager--ud  { color: var(--vp-tekst-58); }

.vp-prik { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.vp-prik--groen { background: var(--vp-groen); }
.vp-prik--gul   { background: var(--vp-gul); }

.vp-leveringsboks {
  border: 1px solid var(--vp-kant); border-radius: var(--vp-r-kort);
  background: var(--vp-flade-16); padding: 16px 18px; margin-bottom: 24px;
}
.vp-leveringsboks__linje { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.vp-leveringsboks__cutoff {
  display: flex; align-items: center; gap: 9px; margin-top: 9px;
  font-family: var(--vp-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--vp-gul);
}
.vp-leveringsboks__fod {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vp-kant-svag);
  font-size: 13px; color: var(--vp-tekst-58); line-height: 1.6;
}

.vp-koeb__handling { display: flex; gap: 12px; align-items: center; margin-bottom: 26px; flex-wrap: wrap; }
.vp-antal {
  display: inline-flex; align-items: center; height: 52px;
  border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-knap);
  background: var(--vp-flade-16); overflow: hidden; flex: none;
}
.vp-antal__knap {
  width: 38px; height: 100%; background: none; border: none; cursor: pointer;
  color: var(--vp-tekst-2); font-size: 17px; line-height: 1;
}
.vp-antal__knap:hover { color: var(--vp-accent); }
.vp-antal__felt,
.vp-antal .quantity input {
  width: 46px; height: 100%; text-align: center; background: none; border: none;
  color: var(--vp-tekst); font-size: 15px; -moz-appearance: textfield;
}
.vp-antal__felt::-webkit-outer-spin-button,
.vp-antal__felt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vp-antal .quantity { margin: 0; display: flex; height: 100%; }

.vp-knap-stiplet {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 24px; border: 1px dashed var(--vp-kant-32);
  border-radius: var(--vp-r-knap); color: var(--vp-tekst-66);
  font-size: 15px; background: transparent;
}
.vp-knap-stiplet:hover { border-color: var(--vp-accent-kant-40); color: var(--vp-accent-tekst); }
.vp-koeb__note { font-size: 13px; color: var(--vp-tekst-58); margin: -12px 0 24px; line-height: 1.6; }

.vp-spec {
  display: grid; gap: 1px; background: var(--vp-kant-svag);
  border: 1px solid var(--vp-kant-svag); border-radius: var(--vp-r-kort);
  overflow: hidden; font-family: var(--vp-mono); font-size: 12.5px; margin-bottom: 20px;
}
.vp-spec__raekke {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 14px; background: var(--vp-flade-16);
}
.vp-spec__raekke span:first-child { color: var(--vp-tekst-daempet); }
.vp-spec__raekke span:last-child { text-align: right; }

.vp-coa-kort {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--vp-accent-kant); background: var(--vp-accent-flade);
  border-radius: var(--vp-r-kort); padding: 16px 18px; margin-bottom: 24px;
}
.vp-coa-kort:hover { border-color: var(--vp-accent); }
.vp-coa-kort__venstre { display: flex; align-items: flex-start; gap: 13px; }
.vp-coa-kort__mark {
  margin-top: 4px; width: 9px; height: 9px; border-radius: 1px;
  background: var(--vp-accent); flex: none;
}
.vp-coa-kort__titel { display: block; font-size: 14.5px; color: var(--vp-tekst); margin-bottom: 4px; }
.vp-coa-kort__under {
  display: block; font-family: var(--vp-mono); font-size: 11.5px; color: var(--vp-tekst-58);
}
.vp-coa-kort__pil { font-size: 19px; color: var(--vp-accent); flex: none; }

.vp-akkordion {
  border: 1px solid var(--vp-kant-svag); border-radius: var(--vp-r-kort); overflow: hidden;
}
.vp-akkordion details { border-bottom: 1px solid var(--vp-kant-svag); }
.vp-akkordion details:last-child { border-bottom: none; }
.vp-akkordion summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; cursor: pointer; font-size: 15px; color: var(--vp-tekst);
  list-style: none; background: var(--vp-flade-16);
}
.vp-akkordion summary:hover { color: var(--vp-accent); }
.vp-akkordion__tegn { font-family: var(--vp-mono); color: var(--vp-tekst-58); font-size: 15px; }
.vp-akkordion details[open] .vp-akkordion__tegn { transform: rotate(45deg); }
.vp-akkordion p {
  margin: 0; padding: 4px 18px 18px; font-size: 14.5px; line-height: 1.7;
  color: var(--vp-tekst-2); background: var(--vp-flade-16);
}

/* ---------- ANMELDELSER ---------- */

.vp-anm {
  display: grid; grid-template-columns: 320px 1fr; gap: 48px;
  margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--vp-kant-svag);
  align-items: start;
}
.vp-anm__score { position: sticky; top: 100px; }
.vp-anm__label {
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vp-tekst-58); margin-bottom: 12px;
}
.vp-anm__tal { font-size: 46px; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; }
.vp-anm__stjerner { margin-bottom: 8px; }
.vp-anm__stjerner .vp-stjerne { font-size: 18px; }
.vp-anm__stjerner .vp-stjerner { gap: 3px; }
.vp-anm__basis { font-size: 13.5px; color: var(--vp-tekst-58); margin-bottom: 22px; }
.vp-anm__graf { display: grid; gap: 7px; margin-bottom: 24px; }
.vp-anm__grafraekke {
  display: grid; grid-template-columns: 34px 1fr 38px; gap: 10px; align-items: center;
  font-family: var(--vp-mono); font-size: 11.5px; color: var(--vp-tekst-58);
}
.vp-anm__grafbar { height: 6px; background: var(--vp-flade-20); border-radius: 100px; overflow: hidden; }
.vp-anm__grafbar span { display: block; height: 100%; background: var(--vp-gul); border-radius: 100px; }
.vp-anm__grafpct { text-align: right; }
.vp-anm__noegletal {
  display: grid; gap: 1px; background: var(--vp-kant-svag);
  border: 1px solid var(--vp-kant-svag); border-radius: var(--vp-r-kort); overflow: hidden;
}
.vp-anm__noegletal > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 14px; background: var(--vp-flade-16); font-size: 13.5px;
}

.vp-anm__kort { border-bottom: 1px solid var(--vp-kant-svag); padding: 20px 0; }
.vp-anm__kort:first-child { padding-top: 0; }
.vp-anm__hoved { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vp-anm__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vp-accent-flade); border: 1px solid var(--vp-accent-kant);
  color: var(--vp-accent-tekst); font-family: var(--vp-mono); font-size: 12.5px;
}
.vp-anm__navn { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.vp-anm__navn > span:first-child { font-size: 15px; font-weight: 500; }
.vp-anm__meta {
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--vp-tekst-58);
}
.vp-anm__verificeret { color: var(--vp-groen); }
.vp-anm__kortstjerner { flex: none; }
.vp-anm__kortstjerner .vp-stjerne { font-size: 13px; }
.vp-anm__kort p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--vp-tekst-2); }
.vp-anm__fod {
  margin-top: 20px; font-family: var(--vp-mono); font-size: 11.5px; color: var(--vp-tekst-58);
}

.vp-relateret { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--vp-kant-svag); }
.vp-relateret h2 { font-size: 28px; margin: 0 0 26px; }
.vp-relateret ul.products { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   KURV
   ========================================================================== */

.vp-kurvside { padding-bottom: 72px; }
.vp-kurvside__h1 { font-size: 42px; letter-spacing: -0.028em; margin: 0 0 32px; }
.vp-kurvside__grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }

.vp-kurvside__hoved,
.vp-kurvside__linje {
  display: grid; grid-template-columns: 1fr 130px 120px 40px;
  gap: 16px; align-items: center;
}
.vp-kurvside__hoved {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--vp-tekst-58);
  padding-bottom: 14px; border-bottom: 1px solid var(--vp-kant-svag);
}
.vp-kurvside__linje { padding: 18px 0; border-bottom: 1px solid var(--vp-kant-svag); }
.vp-kurvside__produkt { display: flex; align-items: center; gap: 16px; }
.vp-kurvside__foto {
  width: 72px; height: 72px; flex: none; border: 1px solid var(--vp-kant);
  border-radius: 3px; background: var(--vp-billedfelt); overflow: hidden;
}
.vp-kurvside__foto img { width: 100%; height: 100%; object-fit: fill; display: block; }
.vp-kurvside__navn { font-size: 16px; font-weight: 500; color: var(--vp-tekst); }
.vp-kurvside__meta {
  font-family: var(--vp-mono); font-size: 11.5px; color: var(--vp-tekst-58); margin-top: 5px;
}
.vp-kurvside__antal { height: 42px; }
.vp-kurvside__antal .quantity input { width: 54px; }
.vp-kurvside__pris { text-align: right; font-size: 16px; }
.vp-kurvside__slet {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-knap);
  color: var(--vp-tekst-58); font-size: 17px; line-height: 1; justify-self: end;
}
.vp-kurvside__slet:hover { border-color: var(--vp-roed); color: var(--vp-roed); }
.vp-kurvside__fod {
  display: flex; align-items: center; gap: 20px; padding-top: 20px; flex-wrap: wrap;
  font-size: 14px;
}
.vp-kurvside__fod a { color: var(--vp-tekst-2); }
.vp-kurvside__fod a:hover { color: var(--vp-accent); }
.vp-kurvside__moms {
  font-family: var(--vp-mono); font-size: 11.5px; color: var(--vp-tekst-58); margin-left: auto;
}
.vp-kurvside__opdater {
  height: 38px; padding: 0 16px; background: var(--vp-flade-20);
  border: 1px solid var(--vp-kant-32); border-radius: var(--vp-r-knap);
  color: var(--vp-tekst); font-family: var(--vp-mono); font-size: 12px; cursor: pointer;
}
.vp-kurvside__opdater:hover { border-color: var(--vp-accent); color: var(--vp-accent); }

.vp-kurvside__tom {
  border: 1px solid var(--vp-kant); border-radius: var(--vp-r-panel);
  background: var(--vp-flade); padding: 64px 40px; text-align: center;
}
.vp-kurvside__tom-titel { font-size: 22px; margin-bottom: 10px; }
.vp-kurvside__tom p { color: var(--vp-tekst-2); margin: 0 0 26px; }

.vp-ordre {
  position: sticky; top: 100px;
  border: 1px solid var(--vp-kant); border-radius: var(--vp-r-panel);
  background: var(--vp-flade); padding: 24px;
}
.vp-ordre__titel {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vp-tekst-58); margin-bottom: 18px;
}
.vp-ordre__levering {
  display: flex; align-items: center; gap: 9px; font-size: 14px;
  padding: 12px 0; margin-bottom: 4px; color: var(--vp-tekst-2);
}
.vp-ordre__linjer {
  display: grid; gap: 10px; padding: 16px 0;
  border-top: 1px solid var(--vp-kant-svag); border-bottom: 1px solid var(--vp-kant-svag);
}
.vp-ordre__linjer > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.vp-ordre__linjer > div > span:first-child { color: var(--vp-tekst-2); }
.vp-ordre__moms > span { color: var(--vp-tekst-58) !important; font-size: 13px; }
.vp-ordre__total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 18px 0 20px; font-size: 26px; letter-spacing: -0.02em;
}
.vp-ordre__total > span:first-child { font-size: 15px; color: var(--vp-tekst-2); }
.vp-ordre__knap { width: 100%; }
.vp-ordre__tillid {
  display: grid; gap: 8px; margin-top: 18px;
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--vp-tekst-58);
}

/* ==========================================================================
   STJERNESTRIBE + KORTRAEKKE + FOOTER
   ========================================================================== */

.vp-stjernestribe {
  margin-top: 96px; border-top: 1px solid var(--vp-kant-svag);
  background: var(--vp-flade-lav);
}
.vp-stjernestribe__inder {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; padding-block: 26px; flex-wrap: wrap;
}
.vp-stjernestribe__venstre { display: flex; align-items: center; gap: 16px; font-size: 15.5px; }
.vp-stjernestribe__stjerner { gap: 3px; }
.vp-stjernestribe__stjerner .vp-stjerne { font-size: 19px; }
.vp-stjernestribe__hoejre {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  font-family: var(--vp-mono); font-size: 12.5px; color: var(--vp-tekst-66);
}

.vp-footer {
  border-top: 1px solid var(--vp-kant-svag);
  background: oklch(calc(var(--k) + var(--i)*0.105) 0.006 258);
  padding: 0; margin-top: 0;
}
.vp-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; padding-top: 64px;
}
.vp-footer__logo img { height: 44px; }
.vp-footer__ord span { color: var(--vp-tekst-daempet); font-weight: 500; }
.vp-footer__manchet {
  font-size: 14.5px; line-height: 1.65; color: var(--vp-tekst-daempet);
  margin: 0 0 20px; max-width: 40ch;
}
.vp-footer__kontakt {
  font-family: var(--vp-mono); font-size: 12.5px; line-height: 1.85; color: var(--vp-tekst-daempet);
}
.vp-footer h4 { margin-bottom: 18px; }
.vp-footer li { margin-bottom: 11px; }
.vp-footer li a { font-size: 14.5px; color: var(--vp-tekst-82); }
.vp-footer li a:hover { color: var(--vp-accent); }

.vp-kortraekke__ydre { margin-top: 44px; }
.vp-kortraekke {
  border-top: 1px solid var(--vp-kant-svag); padding-top: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.vp-kortraekke__maerker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp-kortmaerke {
  height: 30px; padding: 0 12px; display: inline-flex; align-items: center;
  border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-knap);
  background: var(--vp-flade-16); font-family: var(--vp-mono); font-size: 11.5px;
  letter-spacing: 0.04em; color: var(--vp-tekst-86);
}
.vp-kortraekke__note {
  font-family: var(--vp-mono); font-size: 12px; color: var(--vp-tekst-58);
  text-align: right; line-height: 1.7;
}

@media (max-width: 900px) {
  .vp-kurvside__grid { grid-template-columns: 1fr; gap: 28px; }
  .vp-ordre { position: static; }
  .vp-anm { grid-template-columns: 1fr; gap: 28px; }
  .vp-anm__score { position: static; }
}

@media (max-width: 768px) {
  .vp-produkt__grid { grid-template-columns: 1fr; gap: 24px; }
  .vp-galleri { position: static; }
  .vp-koeb__h1 { font-size: 30px; }
  .vp-koeb__prisbeloeb,
  .vp-koeb__prisbeloeb .woocommerce-Price-amount,
  .vp-koeb__prisbeloeb bdi { font-size: 27px; }
  .vp-koeb__handling { gap: 10px; }
  .vp-koeb__handling .vp-knap { flex: 1; min-width: 150px; }
  .vp-relateret ul.products { grid-template-columns: repeat(2, 1fr); }

  .vp-kurvside__h1 { font-size: 30px; }
  .vp-kurvside__hoved { display: none; }
  .vp-kurvside__linje {
    grid-template-columns: 1fr auto; grid-template-areas: "produkt slet" "antal pris";
    row-gap: 12px;
  }
  .vp-kurvside__produkt { grid-area: produkt; }
  .vp-kurvside__antal   { grid-area: antal; }
  .vp-kurvside__pris    { grid-area: pris; }
  .vp-kurvside__slet    { grid-area: slet; }
  .vp-kurvside__moms { margin-left: 0; }

  .vp-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 36px; }
  .vp-stjernestribe { margin-top: 40px; }
  .vp-stjernestribe__inder { gap: 16px; }
  .vp-stjernestribe__hoejre { gap: 14px; font-size: 11px; }
  .vp-kortraekke { gap: 18px; }
  .vp-kortraekke__note { text-align: left; }
}

/* Kurvens stepper skal have plads til baade knapper og felt i 130 px-kolonnen */
.vp-kurvside__antal { width: 130px; }
.vp-kurvside__antal .vp-antal__knap { width: 34px; }
.vp-kurvside__antal .vp-antal__felt { width: 100%; min-width: 0; }
.vp-antal .quantity { width: auto; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Thumbnails er nu knapper (de skifter hovedbilledet), ikke passive felter */
.vp-galleri__thumb {
  padding: 0; cursor: pointer; appearance: none;
  border: 1px solid var(--vp-kant); background: var(--vp-billedfelt);
  border-radius: 3px; overflow: hidden; aspect-ratio: 1;
}
.vp-galleri__thumb:hover { border-color: var(--vp-accent-kant-40); }
.vp-galleri__thumb.er-valgt { border-color: var(--vp-accent); }
.vp-galleri__thumbs { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   KASSEN  (woocommerce/checkout/form-checkout.php)
   ========================================================================== */

.vp-kasse { padding-bottom: 72px; }
.vp-kasse__h1 { font-size: 42px; letter-spacing: -0.028em; margin: 0 0 32px; }
.vp-kasse__grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.vp-kasse__venstre { display: grid; gap: 22px; }
.vp-kasse__aside { position: sticky; top: 100px; }

.vp-ekspres {
  border: 1px solid var(--vp-accent-kant); border-radius: var(--vp-r-panel);
  background: var(--vp-accent-flade); padding: 22px 24px;
}
.vp-ekspres__titel { font-size: 16px; margin-bottom: 16px; }
.vp-ekspres__knapper { display: flex; gap: 12px; flex-wrap: wrap; }
.vp-ekspres__knapper .vp-knap { flex: 1; min-width: 180px; }
.vp-ekspres__knapper .vp-knap[disabled] { opacity: 0.55; cursor: not-allowed; }
.vp-ekspres__note { font-size: 13px; color: var(--vp-tekst-58); margin-top: 14px; line-height: 1.6; }

.vp-skillelinje { display: flex; align-items: center; gap: 16px; }
.vp-skillelinje span { flex: 1; height: 1px; background: var(--vp-kant-svag); }
.vp-skillelinje em {
  font-style: normal; font-family: var(--vp-mono); font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--vp-tekst-58);
}

.vp-trin-boks {
  border: 1px solid var(--vp-kant-svag); border-radius: var(--vp-r-panel);
  background: var(--vp-flade); padding: 24px 26px;
}
.vp-trin-boks__hoved { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vp-trin-boks__nr {
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--vp-accent);
}
.vp-trin-boks__hoved h2 { font-size: 19px; margin: 0; letter-spacing: -0.015em; }
.vp-trin-boks__note { font-size: 13.5px; color: var(--vp-tekst-58); margin: 0 0 18px; line-height: 1.6; }

.vp-felter { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vp-felter .form-row { margin: 0; padding: 0; }
.vp-felter #billing_email_field,
.vp-felter #billing_address_1_field { grid-column: 1 / -1; }
.vp-felter label { display: block; font-size: 12.5px; color: var(--vp-tekst-58); margin-bottom: 6px; }
.vp-felter .required { color: var(--vp-accent); text-decoration: none; }
.vp-felter input.input-text,
.vp-felter select,
.vp-felter .select2-container .select2-selection--single {
  width: 100%; height: 48px; padding: 0 14px;
  background: var(--vp-flade-16); color: var(--vp-tekst);
  border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-knap);
  font-size: 15px;
}
.vp-felter input.input-text:focus,
.vp-felter select:focus { border-color: var(--vp-accent); outline: none; }
.vp-skjult { display: none; }

.vp-levering-valg {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--vp-accent-kant); background: var(--vp-accent-flade);
  border-radius: var(--vp-r-kort); padding: 16px 18px;
}
.vp-levering-valg__navn { display: block; font-size: 14.5px; }
.vp-levering-valg__under {
  display: block; font-family: var(--vp-mono); font-size: 11.5px;
  color: var(--vp-tekst-58); margin-top: 4px;
}
.vp-levering-valg__pris { margin-left: auto; font-size: 15px; }

.vp-betaling ul.payment_methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vp-betaling li {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-kort);
  background: var(--vp-flade-16); padding: 14px 16px; font-size: 14.5px;
}
.vp-betaling li.vp-ingen-gateway {
  color: var(--vp-tekst-58); font-size: 13.5px; line-height: 1.6;
  border-style: dashed; background: transparent;
}
.vp-betaling__note {
  font-size: 12.5px; color: var(--vp-tekst-58); line-height: 1.65; margin: 16px 0 20px;
}

.vp-accept { display: grid; gap: 12px; }
.vp-accept__linje {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-kort);
  background: var(--vp-flade-16); padding: 14px 16px;
  font-size: 13.5px; line-height: 1.6; color: var(--vp-tekst-2);
}
.vp-accept__linje--alder {
  background: var(--vp-advarsel-bg); border-color: var(--vp-advarsel-kant);
  color: var(--vp-advarsel-tekst);
}
.vp-accept__linje input { position: absolute; opacity: 0; pointer-events: none; }
.vp-accept__boks {
  width: 17px; height: 17px; flex: none; margin-top: 1px; position: relative;
  border: 1px solid var(--vp-kant-32); border-radius: 2px; background: var(--vp-bg);
}
.vp-accept__linje input:checked ~ .vp-accept__boks {
  background: var(--vp-accent); border-color: var(--vp-accent);
}
.vp-accept__linje input:checked ~ .vp-accept__boks::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--vp-paa-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.vp-accept__linje a { color: var(--vp-accent); text-decoration: underline; }

.vp-ordre__varer {
  display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--vp-kant-svag);
}
.vp-ordre__vare { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.vp-ordre__vareantal { font-family: var(--vp-mono); font-size: 12px; color: var(--vp-tekst-58); flex: none; }
.vp-ordre__varenavn { flex: 1; color: var(--vp-tekst-2); }
.vp-ordre__varepris { flex: none; }
.vp-ordre__knap[disabled] {
  background: var(--vp-flade-20) !important; color: var(--vp-tekst-58) !important;
  cursor: not-allowed;
}
.vp-ordre__hjaelp {
  margin-top: 10px; font-size: 12.5px; color: var(--vp-tekst-58); text-align: center; line-height: 1.5;
}
.vp-ordre__kort {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px;
  padding-top: 18px; border-top: 1px solid var(--vp-kant-svag);
}
.vp-ordre__kort .vp-kortmaerke { height: 26px; padding: 0 9px; font-size: 10.5px; }
.vp-ordre__firma {
  margin-top: 14px; font-family: var(--vp-mono); font-size: 11px;
  color: var(--vp-tekst-58); line-height: 1.8;
}

/* Antalsfeltet arvede en hvid browser-baggrund; input'et skal vaere moerkt som resten */
.vp-antal__felt,
.vp-antal input[type="number"] {
  background: transparent !important; color: var(--vp-tekst) !important;
  border: none !important; box-shadow: none !important;
}

@media (max-width: 900px) {
  .vp-kasse__grid { grid-template-columns: 1fr; gap: 26px; }
  .vp-kasse__aside { position: static; }
}
@media (max-width: 768px) {
  .vp-kasse__h1 { font-size: 30px; }
  .vp-felter { grid-template-columns: 1fr; }
  .vp-trin-boks { padding: 18px; }
  .vp-ekspres { padding: 18px; }
  .vp-ekspres__knapper .vp-knap { min-width: 100%; }
}

/* GeneratePress (og Woo) laegger clearfix-pseudoelementer paa formularer og
   containere: `content: ""` paa ::before/::after. I et FLEX- eller GRID-layout
   taeller de som rigtige items. Paa kassen betoed det at ::before lagde beslag
   paa celle 1, saa trin-kolonnen rykkede til celle 2 og ordreoversigten faldt
   ned i naeste raekke — layoutet saa "byttet om" ud uden at nogen regel sagde
   det. De skal slaas fra paa alle vores grid-containere. */
form.checkout::before, form.checkout::after,
.vp-kasse__grid::before, .vp-kasse__grid::after,
.vp-kurvside__grid::before, .vp-kurvside__grid::after,
.vp-katalog__krop::before, .vp-katalog__krop::after,
.vp-produkt__grid::before, .vp-produkt__grid::after,
.vp-anm::before, .vp-anm::after,
.vp-footer__grid::before, .vp-footer__grid::after,
.vp-hero::before, .vp-hero::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   COA-ARKIV  (page-dokumentation.php)
   ========================================================================== */

.vp-dokside { padding-bottom: 72px; }

.vp-dokside__intro {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px;
  align-items: start; padding-bottom: 56px;
}
.vp-dokside__intro h1 { font-size: 42px; letter-spacing: -0.028em; margin: 0 0 18px; }
.vp-dokside__intro p {
  font-size: 16.5px; line-height: 1.65; color: var(--vp-tekst-2);
  margin: 0 0 16px; max-width: 62ch;
}

.vp-dokside__punkter {
  display: grid; gap: 1px; margin-top: 30px;
  background: var(--vp-kant-svag);
  border: 1px solid var(--vp-kant-svag);
  border-radius: var(--vp-r-kort); overflow: hidden;
}
.vp-dokside__punkt {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; background: var(--vp-flade-16);
}
.vp-dokside__nr {
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--vp-accent); flex: none; margin-top: 2px;
}
.vp-dokside__punkt-t { font-size: 14.5px; margin-bottom: 3px; }
.vp-dokside__punkt-u { font-size: 13px; color: var(--vp-tekst-58); line-height: 1.55; }

.vp-dokside__scan {
  border: 1px solid var(--vp-kant); border-radius: var(--vp-r-kort);
  background: var(--vp-billedfelt); overflow: hidden; aspect-ratio: 4 / 3.2;
}
.vp-dokside__scan img { width: 100%; height: 100%; object-fit: fill; display: block; }

/* ---------- Arkivtabellen ---------- */

.vp-dokside__arkiv { border-top: 1px solid var(--vp-kant-svag); padding-top: 48px; }
.vp-dokside__arkivhoved {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 22px; flex-wrap: wrap;
}
.vp-dokside__arkivhoved h2 { font-size: 28px; margin: 0; }
.vp-dokside__soeg {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px;
  border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-knap);
  background: var(--vp-flade-16); min-width: 240px;
}
.vp-dokside__soeg:focus-within { border-color: var(--vp-accent); }
.vp-dokside__soeg input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--vp-tekst); font-size: 14px; min-width: 0;
}
.vp-dokside__soeg input::placeholder { color: var(--vp-tekst-58); }
.vp-dokside__soeg input::-webkit-search-cancel-button { filter: invert(0.6); }

.vp-coa-tabel {
  display: grid; gap: 1px; background: var(--vp-kant-svag);
  border: 1px solid var(--vp-kant-svag); border-radius: var(--vp-r-kort);
  overflow: hidden;
}
.vp-coa-raekke {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.7fr 0.9fr 1fr 0.8fr;
  gap: 16px; align-items: center;
  padding: 14px 18px; background: var(--vp-flade-16); font-size: 14px;
}
.vp-coa-raekke--hoved {
  background: oklch(calc(var(--k) + var(--i)*0.185) 0.008 258);
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--vp-tekst-58);
}
.vp-coa-raekke:not(.vp-coa-raekke--hoved):hover { background: var(--vp-flade-20); }
.vp-coa-navn a { color: var(--vp-tekst); }
.vp-coa-navn a:hover { color: var(--vp-accent); }
.vp-coa-udsolgt {
  font-family: var(--vp-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--vp-tekst-58); font-style: normal;
  margin-left: 8px;
}
.vp-coa-batch,
.vp-coa-raekke .vp-daempet { font-family: var(--vp-mono); font-size: 12.5px; }
.vp-coa-raekke .vp-accent { font-family: var(--vp-mono); font-size: 12.5px; }
.vp-hoejre { text-align: right; }

.vp-coa-pdf {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px;
  border: 1px solid var(--vp-accent-kant); border-radius: var(--vp-r-knap);
  background: var(--vp-accent-flade); color: var(--vp-accent-tekst);
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.04em;
}
a.vp-coa-pdf:hover { border-color: var(--vp-accent); color: var(--vp-accent); }
.vp-coa-pdf--mangler {
  border-style: dashed; border-color: var(--vp-kant-32);
  background: transparent; color: var(--vp-tekst-58); cursor: default;
}

.vp-coa-tom { padding: 26px 18px; background: var(--vp-flade-16); color: var(--vp-tekst-58); }
.vp-dokside__fod {
  margin-top: 18px; font-size: 13.5px; color: var(--vp-tekst-58); line-height: 1.6;
}
.vp-dokside__fod a { color: var(--vp-accent); }

@media (max-width: 900px) {
  .vp-dokside__intro { grid-template-columns: 1fr; gap: 28px; padding-bottom: 36px; }
  .vp-dokside__scan { aspect-ratio: 16 / 10; }
}

@media (max-width: 768px) {
  .vp-dokside__intro h1 { font-size: 30px; }
  .vp-dokside__intro p { font-size: 15px; }
  .vp-dokside__arkivhoved h2 { font-size: 24px; }
  .vp-dokside__soeg { min-width: 100%; }

  /* Tabellen bliver til kort: hver raekke er ét produkt med maerkede felter,
     frem for seks kolonner klemt ned paa 390 px. */
  .vp-coa-raekke--hoved { display: none; }
  .vp-coa-raekke {
    grid-template-columns: 1fr auto; row-gap: 6px; padding: 14px;
  }
  .vp-coa-navn { grid-column: 1 / -1; font-size: 15px; }
  .vp-coa-batch::before,
  .vp-coa-raekke .vp-accent::before,
  .vp-coa-raekke > .vp-daempet::before {
    content: attr(data-etiket) " "; color: var(--vp-tekst-58);
  }
  .vp-coa-raekke > span:nth-child(2)::before { content: "Batch "; color: var(--vp-tekst-58); }
  .vp-coa-raekke > span:nth-child(3)::before { content: "Renhed "; color: var(--vp-tekst-58); }
  .vp-coa-raekke > span:nth-child(4)::before { content: "Analyseret "; color: var(--vp-tekst-58); }
  .vp-coa-raekke > span:nth-child(5)::before { content: "Lab "; color: var(--vp-tekst-58); }
  .vp-coa-raekke > span:nth-child(2),
  .vp-coa-raekke > span:nth-child(3) { grid-column: auto; }
  .vp-coa-raekke > span:nth-child(6) { grid-column: 1 / -1; text-align: left; margin-top: 4px; }
}

/* Woo-beskeder der er tilbage (fejl/advarsler i kassen) skal foelge temaet.
   Standard er groenne/gule kasser med lys baggrund. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--vp-flade-16); border: 1px solid var(--vp-kant-26);
  border-left: 3px solid var(--vp-accent); border-radius: var(--vp-r-kort);
  color: var(--vp-tekst-2); padding: 14px 18px; margin: 0 0 20px;
  list-style: none; font-size: 14.5px;
}
.woocommerce-error { border-left-color: var(--vp-roed); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--vp-accent); }
.woocommerce-notices-wrapper:empty { display: none; }

/* ==========================================================================
   DRIFTSBEMAERKNING  (inc/bemaerkning.php)
   Ligger oeverst paa hver side, lige under headeren. Azur-tonet, saa den ikke
   forveksles med den ravfarvede juridiske disclaimer i bunden — den ene er en
   midlertidig driftsbesked, den anden er en permanent afgraensning.
   ========================================================================== */

.vp-bemaerkning__ydre { padding-top: 24px; }
.vp-bemaerkning {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--vp-accent-kant);
  border-left: 3px solid var(--vp-accent);
  background: var(--vp-accent-flade);
  border-radius: var(--vp-r-kort);
  padding: 18px 22px;
}
.vp-bemaerkning__mark {
  margin-top: 5px; width: 8px; height: 8px; flex: none;
  border-radius: 1px; background: var(--vp-accent);
}
.vp-bemaerkning__titel {
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--vp-accent-tekst); margin-bottom: 8px;
}
.vp-bemaerkning p {
  margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--vp-tekst-2);
  max-width: 105ch; text-wrap: pretty;
}
.vp-bemaerkning p + p { margin-top: 10px; }

@media (max-width: 768px) {
  .vp-bemaerkning { padding: 14px 16px; gap: 12px; }
  .vp-bemaerkning p { font-size: 13.5px; }
  .vp-bemaerkning__ydre { padding-top: 16px; }
}

/* ==========================================================================
   KONTAKT
   ========================================================================== */

.vp-kontakt { padding-bottom: 72px; }
.vp-kontakt__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.vp-kontakt__venstre h1 { font-size: 42px; letter-spacing: -0.028em; margin: 0 0 16px; }
.vp-kontakt__manchet {
  font-size: 16.5px; line-height: 1.65; color: var(--vp-tekst-2); margin: 0 0 32px; max-width: 54ch;
}
.vp-kontakt__oplysninger {
  display: grid; gap: 1px; background: var(--vp-kant-svag);
  border: 1px solid var(--vp-kant-svag); border-radius: var(--vp-r-kort); overflow: hidden;
}
.vp-kontakt__raekke { padding: 15px 18px; background: var(--vp-flade-16); font-size: 14.5px; }
.vp-kontakt__etiket {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--vp-tekst-58); margin-bottom: 5px;
}
.vp-kontakt__raekke a { color: var(--vp-accent); }

.vp-kontakt__form,
.vp-kontakt__kvittering {
  border: 1px solid var(--vp-kant); border-radius: var(--vp-r-panel);
  background: var(--vp-flade); padding: 28px;
}
.vp-kontakt__form { display: grid; gap: 16px; }
.vp-kontakt__to { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vp-kontakt__form label { display: grid; gap: 7px; }
.vp-kontakt__form label > span {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--vp-tekst-58);
}
.vp-kontakt__form input[type="text"],
.vp-kontakt__form input[type="email"],
.vp-kontakt__form select,
.vp-kontakt__form textarea {
  width: 100%; background: var(--vp-flade-16); color: var(--vp-tekst);
  border: 1px solid var(--vp-kant-26); border-radius: var(--vp-r-knap);
  font-family: var(--vp-sans); font-size: 15px; padding: 0 14px;
}
.vp-kontakt__form input[type="text"],
.vp-kontakt__form input[type="email"],
.vp-kontakt__form select { height: 48px; }
.vp-kontakt__form textarea { padding: 12px 14px; line-height: 1.6; resize: vertical; }
.vp-kontakt__form input:focus,
.vp-kontakt__form select:focus,
.vp-kontakt__form textarea:focus { border-color: var(--vp-accent); outline: none; }
.vp-kontakt__form .vp-knap { justify-self: start; }
.vp-kontakt__note { margin: 0; font-size: 12.5px; color: var(--vp-tekst-58); line-height: 1.6; }
.vp-kontakt__note a { color: var(--vp-accent); }

.vp-kontakt__kvit-titel { font-size: 19px; margin-bottom: 10px; }
.vp-kontakt__kvittering p { margin: 0; color: var(--vp-tekst-2); line-height: 1.7; }
.vp-kontakt__fejl {
  border: 1px solid var(--vp-roed); border-left: 3px solid var(--vp-roed);
  background: var(--vp-flade-16); border-radius: var(--vp-r-kort);
  padding: 14px 18px; margin-bottom: 18px; font-size: 14px; color: var(--vp-tekst-2);
}
.vp-kontakt__fejl a { color: var(--vp-accent); }
.vp-skjult { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   OM OS
   ========================================================================== */

.vp-om { padding-bottom: 72px; }
.vp-om__intro {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px;
  align-items: start; padding-bottom: 56px;
}
.vp-om__intro h1 { font-size: 42px; letter-spacing: -0.028em; margin: 0 0 20px; line-height: 1.12; }
.vp-om__intro p { font-size: 16.5px; line-height: 1.7; color: var(--vp-tekst-2); margin: 0 0 18px; max-width: 62ch; }
.vp-om__billede {
  aspect-ratio: 4 / 3.2; border: 1px solid var(--vp-kant); border-radius: var(--vp-r-kort);
  background: var(--vp-billedfelt); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.vp-om__billede img { width: 100%; height: 100%; object-fit: fill; display: block; }
.vp-om__tom {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--vp-tekst-58);
}

.vp-om__principper {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--vp-kant-svag); border: 1px solid var(--vp-kant-svag);
  border-radius: var(--vp-r-kort); overflow: hidden;
}
.vp-om__kort { background: var(--vp-flade-16); padding: 28px 26px; }
.vp-om__kort h3 { font-size: 18px; margin: 0 0 10px; }
.vp-om__kort p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--vp-tekst-66); }

.vp-om__tal { margin-top: 56px; }
.vp-om__tal h2 { font-size: 28px; margin: 0 0 26px; }
.vp-om__talgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.vp-om__tal-v { font-family: var(--vp-mono); font-size: 32px; color: var(--vp-tekst); margin-bottom: 6px; }
.vp-om__tal-l {
  font-family: var(--vp-mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--vp-tekst-58);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.vp-faq { padding-bottom: 72px; }
.vp-faq__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.vp-faq__venstre { position: sticky; top: 100px; }
.vp-faq__venstre h1 { font-size: 38px; letter-spacing: -0.028em; margin: 0 0 16px; line-height: 1.15; }
.vp-faq__venstre p { font-size: 16px; line-height: 1.65; color: var(--vp-tekst-2); margin: 0 0 18px; max-width: 44ch; }
.vp-faq__mail { color: var(--vp-accent); font-size: 15px; }

.vp-faq__liste {
  border: 1px solid var(--vp-kant-svag); border-radius: var(--vp-r-kort); overflow: hidden;
}
.vp-faq__punkt { border-bottom: 1px solid var(--vp-kant-svag); }
.vp-faq__punkt:last-child { border-bottom: none; }
.vp-faq__punkt summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; cursor: pointer; font-size: 16px; color: var(--vp-tekst);
  background: var(--vp-flade-16); list-style: none;
}
.vp-faq__punkt summary:hover { color: var(--vp-accent); }
.vp-faq__punkt[open] .vp-akkordion__tegn { transform: rotate(45deg); }
.vp-faq__svar { padding: 0 20px 20px; background: var(--vp-flade-16); }
.vp-faq__svar p { margin: 0; font-size: 15px; line-height: 1.72; color: var(--vp-tekst-2); max-width: 68ch; }
.vp-faq__svar p + p { margin-top: 12px; }

/* ==========================================================================
   JURIDISKE SIDER
   ========================================================================== */

.vp-juridisk { padding-bottom: 72px; }
.vp-juridisk__grid { display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; }
.vp-juridisk__indhold { position: sticky; top: 100px; display: grid; gap: 9px; }
.vp-juridisk__indhold-titel {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vp-tekst-58); margin-bottom: 6px;
}
.vp-juridisk__indhold a { font-size: 14.5px; color: var(--vp-tekst-82); line-height: 1.4; }
.vp-juridisk__indhold a:hover { color: var(--vp-accent); }

.vp-juridisk__tekst { max-width: 76ch; }
.vp-juridisk__tekst h1 { font-size: 42px; letter-spacing: -0.028em; margin: 0 0 28px; }
.vp-juridisk__tekst h2 {
  font-size: 21px; margin: 40px 0 12px; scroll-margin-top: 110px;
}
.vp-juridisk__tekst h2:first-of-type { margin-top: 0; }
.vp-juridisk__tekst h3 { font-size: 17px; margin: 26px 0 10px; }
.vp-juridisk__tekst p { font-size: 16px; line-height: 1.72; color: var(--vp-tekst-2); margin: 0 0 16px; }
.vp-juridisk__tekst ul, .vp-juridisk__tekst ol { color: var(--vp-tekst-2); line-height: 1.72; padding-left: 20px; }
.vp-juridisk__tekst li { margin-bottom: 8px; }
.vp-juridisk__tekst a { color: var(--vp-accent); }
.vp-juridisk__fod {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--vp-kant-svag);
  font-family: var(--vp-mono); font-size: 12px; line-height: 1.9; color: var(--vp-tekst-58);
}
.vp-juridisk__fod a { color: var(--vp-accent); }

@media (max-width: 900px) {
  .vp-kontakt__grid { grid-template-columns: 1fr; gap: 32px; }
  .vp-faq__grid { grid-template-columns: 1fr; gap: 28px; }
  .vp-faq__venstre { position: static; }
  .vp-juridisk__grid { grid-template-columns: 1fr; gap: 26px; }
  .vp-juridisk__indhold { position: static; }
  .vp-om__intro { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 768px) {
  .vp-kontakt__venstre h1, .vp-om__intro h1, .vp-juridisk__tekst h1 { font-size: 30px; }
  .vp-faq__venstre h1 { font-size: 27px; }
  .vp-kontakt__to { grid-template-columns: 1fr; }
  .vp-kontakt__form, .vp-kontakt__kvittering { padding: 18px; }
  .vp-om__principper { grid-template-columns: 1fr; }
  .vp-om__kort { padding: 18px; }
  .vp-om__talgrid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .vp-om__tal-v { font-size: 26px; }
  .vp-faq__punkt summary { padding: 15px 16px; font-size: 15px; }
  .vp-faq__svar { padding: 0 16px 16px; }
}

/* Definitionsliste til virksomhedsoplysninger i de juridiske sider */
.vp-oplysninger {
  display: grid; grid-template-columns: 220px 1fr; gap: 1px;
  background: var(--vp-kant-svag); border: 1px solid var(--vp-kant-svag);
  border-radius: var(--vp-r-kort); overflow: hidden; margin: 0 0 24px;
}
.vp-oplysninger dt, .vp-oplysninger dd {
  margin: 0; padding: 12px 16px; background: var(--vp-flade-16); font-size: 14.5px;
}
.vp-oplysninger dt { color: var(--vp-tekst-58); font-family: var(--vp-mono); font-size: 12.5px; }
.vp-oplysninger dd { color: var(--vp-tekst); }
@media (max-width: 600px) {
  .vp-oplysninger { grid-template-columns: 1fr; }
  .vp-oplysninger dt { padding-bottom: 0; background: var(--vp-flade-16); }
}

/* Betalingsmærker.
   Woos SVG'er ER selve kortet — blaa Visa-flade, roed/gul Mastercard osv. med
   afrundede hjoerner. En hvid boks udenom gav derfor et hvidt felt med et kort
   inden i. Logoet staar frit; kun tekst-maerkerne (Dankort, MobilePay indtil
   filerne kommer) beholder rammen. */
.vp-kortlogo {
  height: 30px; width: auto; display: block; border-radius: 4px;
}
/* Maerker uden egen kortflade faar en lys plade, saa de ikke forsvinder i
   footerens moerke. Samme hoejde og radius som de oevrige, saa raekken laeses
   som én familie. */
.vp-kortlogo--plade {
  background: #fff; padding: 4px 7px; width: 48px;
  object-fit: contain; box-sizing: border-box;
}
.vp-ordre__kort .vp-kortlogo { height: 26px; }
.vp-ordre__kort .vp-kortlogo--plade { width: 42px; padding: 3px 5px; }

/* ==========================================================================
   MOBILMENU (drawer)
   Ligger i markup'en hele tiden med [hidden] og aabnes ved at fjerne
   attributten. Alternativet — at bygge den med JavaScript ved klik — ville
   goere linkene usynlige for baade soegemaskiner og skaermlaesere.
   ========================================================================== */

.vp-drawer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--vp-bg);
  display: flex; flex-direction: column;
  padding: 0 var(--vp-pad) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
}
.vp-drawer[hidden] { display: none; }
.vp-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  height: 62px; flex: none;
  border-bottom: 1px solid var(--vp-kant-svag); margin-bottom: 8px;
}
.vp-drawer__top span {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vp-tekst-58);
}
.vp-drawer__luk {
  width: 44px; height: 44px; margin-right: -11px;
  background: none; border: none; cursor: pointer;
  color: var(--vp-tekst); font-size: 26px; line-height: 1;
}
.vp-drawer__links { display: flex; flex-direction: column; }
.vp-drawer__links a {
  padding: 15px 0; font-size: 18px; color: var(--vp-tekst);
  border-bottom: 1px solid var(--vp-kant-svag);
}
.vp-drawer__links a:active { color: var(--vp-accent); }
.vp-drawer__kontakt { margin-top: 28px; }
.vp-drawer__etiket {
  font-family: var(--vp-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vp-tekst-58); margin-bottom: 8px;
}
.vp-drawer__kontakt a { color: var(--vp-accent); font-size: 15.5px; }
.vp-drawer__tlf {
  font-family: var(--vp-mono); font-size: 12.5px; color: var(--vp-tekst-58); margin-top: 6px;
}

/* Drawer er en mobilting. Paa desktop findes navigationen i headeren. */
@media (min-width: 769px) {
  .vp-drawer { display: none !important; }
}

/* WordPress' admin-bjaelke ligger fast i toppen med hoej z-index. Drawer'en er
   `inset: 0` og laa derfor UNDER den, saa lukkekrydset var skjult for indloggede.
   Kun et problem for administratorer, men en menu man ikke kan lukke er en
   menu man sidder fast i. */
body.admin-bar .vp-drawer { top: 46px; }
@media screen and (min-width: 783px) {
  body.admin-bar .vp-drawer { top: 32px; }
}