/* Kelevia. Tre produkter, tre farveverdener.
   Farverne er hentet fra produkternes egne galleri-slides, saa siden ligner
   butikken og ikke en tilfaeldig skabelon. */

:root {
  --blaek: #1e1a47;
  --blaek-blod: #4a4658;
  --graa: #00000099;
  --linje: #e8e6f0;
  --flade: #fdfcfa;
  --hvid: #ffffff;

  --hormone-flade: #f7e3e9;
  --hormone-accent: #4a1741;
  --arthro-flade: #e6e4f5;
  --arthro-accent: #1e2a78;
  --prosta-flade: #eceee2;
  --prosta-accent: #1d3a2a;

  --maal: 1120px;
  --radius: 22px;
}

* { box-sizing: border-box; }

/* Browserens egen [hidden]-regel er kun "display: none" paa element-niveau,
   saa enhver klasse der saetter display vinder over den. Maalt 2. sep 2026:
   .resume-tal > div { display: flex } gjorde at rabatraekken blev staaende og
   viste "Discount $0.00" selv om hidden var sat. Det samme ramte den
   gennemstregede foer-pris (.pris-del er inline-flex). Én regel her daekker
   alle steder vi bruger hidden til at skjule noget. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--flade);
  color: var(--blaek);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
}

a { color: inherit; }

.baelte { width: 100%; max-width: var(--maal); margin-inline: auto; padding-inline: 24px; }

/* ---------- header ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(253, 252, 250, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linje);
}
.top-inder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}
.maerke {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.maerke span { color: var(--hormone-accent); }
.top nav { display: flex; gap: 26px; font-size: 0.94rem; font-weight: 500; }
.top nav a { text-decoration: none; opacity: 0.75; }
.top nav a:hover { opacity: 1; text-decoration: underline; }

/* ---------- hero ---------- */

.hero { padding-block: 84px 56px; text-align: center; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); max-width: 17ch; margin-inline: auto; }
.hero p {
  margin: 22px auto 0;
  max-width: 56ch;
  font-size: 1.14rem;
  color: var(--blaek-blod);
}
.maerkat {
  display: inline-block;
  margin-bottom: 22px;
  padding: 7px 15px;
  border: 1px solid var(--linje);
  border-radius: 999px;
  background: var(--hvid);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blaek-blod);
}

/* ---------- produkter ---------- */

.produkter { padding-block: 28px 20px; display: flex; flex-direction: column; gap: 30px; }

.kort {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 0;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--hvid);
  overflow: hidden;
}
.kort-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  min-height: 340px;
}
.kort-foto img { width: 100%; max-width: 300px; height: auto; display: block; }
.kort-tekst { padding: 38px 40px; display: flex; flex-direction: column; gap: 16px; }

.kort-navn {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kort h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); max-width: 20ch; }
.loefte { font-weight: 600; margin: 0; }
.punkter { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.punkter li { position: relative; padding-left: 20px; color: var(--blaek-blod); font-size: 0.97rem; }
.punkter li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* ---------- pristabel ---------- */

.priser { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 0.96rem; }
.priser caption {
  text-align: left;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blaek-blod);
  padding-bottom: 8px;
}
.priser th, .priser td { padding: 9px 0; border-bottom: 1px solid var(--linje); text-align: left; }
.priser th { font-weight: 500; color: var(--blaek-blod); }
.priser td { text-align: right; font-variant-numeric: tabular-nums; }
.priser tr:last-child th, .priser tr:last-child td { border-bottom: 0; }
.foer { color: var(--graa); text-decoration: line-through; margin-right: 9px; font-weight: 400; }
.nu { font-weight: 700; }
.bedst th::after {
  content: "Best value";
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hvid);
}

/* Farveverdener pr. produkt. */
#hormone .kort-foto { background: var(--hormone-flade); }
#hormone .kort-navn, #hormone h2 { color: var(--hormone-accent); }
#hormone .punkter li::before { background: var(--hormone-accent); }
#hormone .bedst th::after { background: var(--hormone-accent); }

#arthro .kort-foto { background: var(--arthro-flade); }
#arthro .kort-navn, #arthro h2 { color: var(--arthro-accent); }
#arthro .punkter li::before { background: var(--arthro-accent); }
#arthro .bedst th::after { background: var(--arthro-accent); }

#prosta .kort-foto { background: var(--prosta-flade); }
#prosta .kort-navn, #prosta h2 { color: var(--prosta-accent); }
#prosta .punkter li::before { background: var(--prosta-accent); }
#prosta .bedst th::after { background: var(--prosta-accent); }

/* ---------- garanti ---------- */

.garanti {
  margin: 46px 0 10px;
  padding: 44px 40px;
  border-radius: var(--radius);
  background: var(--blaek);
  color: var(--hvid);
  text-align: center;
}
.garanti h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.garanti p { margin: 14px auto 0; max-width: 54ch; opacity: 0.82; }

/* ---------- policy-side ---------- */

.dok { padding-block: 60px 30px; max-width: 74ch; }
.dok h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); }
.dok .opdateret { color: var(--blaek-blod); font-size: 0.94rem; margin-top: 12px; }
.dok section { margin-top: 46px; }
.dok h2 { font-size: 1.45rem; margin-bottom: 12px; }
.dok h3 { font-family: Inter, sans-serif; font-size: 1rem; font-weight: 700; margin: 22px 0 6px; }
.dok p, .dok li { color: var(--blaek-blod); }
.dok ul { padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }

.indhold {
  margin-top: 30px;
  padding: 22px 26px;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--hvid);
}
.indhold p {
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blaek-blod);
}
.indhold ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

.firma {
  margin-top: 20px;
  padding: 22px 26px;
  border-left: 3px solid var(--hormone-accent);
  background: var(--hvid);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.firma strong { display: block; }
.firma address { font-style: normal; color: var(--blaek-blod); }

/* ---------- footer ---------- */

.bund {
  margin-top: 70px;
  border-top: 1px solid var(--linje);
  background: var(--hvid);
  padding: 46px 0 40px;
}
.bund-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 34px;
  align-items: start;
}
.bund h3 {
  font-family: Inter, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blaek-blod);
  margin-bottom: 12px;
}
.bund address { font-style: normal; color: var(--blaek-blod); font-size: 0.95rem; }
/* display:block, ellers loeber firmanavnet sammen med gadenavnet paa én linje. */
.bund address strong { display: block; color: var(--blaek); margin-bottom: 2px; }
.bund ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.95rem; }
.bund a { color: var(--blaek-blod); text-decoration: none; }
.bund a:hover { color: var(--blaek); text-decoration: underline; }
.bund-linje {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--linje);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  font-size: 0.87rem;
  color: var(--graa);
}
.fine-print { margin-top: 14px; font-size: 0.83rem; color: var(--graa); max-width: 70ch; }

/* ---------- mobil ---------- */

@media (max-width: 860px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 104px; }
  .hero { padding-block: 54px 36px; }
  .kort { grid-template-columns: 1fr; }
  .kort-foto { min-height: 0; padding: 26px; }
  .kort-foto img { max-width: 220px; }
  .kort-tekst { padding: 28px 24px 32px; }
  .garanti { padding: 34px 24px; }
  .bund-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Fire nav-links i én raekke fylder 415px paa en 390px skaerm og gav vandret
     overflow paa hele siden. Header'en bryder derfor i to linjer paa mobil. */
  .top-inder { flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding-block: 12px; }
  .top nav { gap: 18px; font-size: 0.88rem; flex-wrap: wrap; justify-content: center; }
  /* Badgen bryder raekken paa smalle skaerme, saa den faar sin egen linje. */
  .bedst th::after { display: block; margin: 4px 0 0; width: fit-content; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- resten af sortimentet ---------- */
/* Farven pr. kort kommer fra --f og --a, sat inline af byg-grid.js, saa 13
   produkter ikke kraever 13 CSS-blokke. */

.mere { padding-block: 56px 10px; }
.mere h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.mere-under { margin: 14px 0 30px; max-width: 58ch; color: var(--blaek-blod); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.lille {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--hvid);
  overflow: hidden;
}
/* Billedet fylder hele feltet. ChatGPT rammer ikke den bestilte baggrundsfarve
   praecist, saa et felt med --f bagved og luft omkring gav en synlig ramme paa
   nogle kort og ingen paa andre. Uden luft er der ingen ramme at ramme forkert.
   --f staar tilbage som farve mens billedet loader. */
.lille-foto { background: var(--f); }
.lille-foto img { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.lille-tekst { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lille-under {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a);
}
.lille h3 { font-size: 1.22rem; color: var(--a); }
.lille-besk { margin: 0; font-size: 0.9rem; color: var(--blaek-blod); flex: 1; }
.lille-pris { margin: 6px 0 0; font-size: 1.05rem; }
.lille-antal { margin: 0; font-size: 0.82rem; color: var(--graa); }


/* ================= butik: pdp, kurv, checkout ================= */
/* ---------- butik ---------- */

:root {
  --graen: #d9d5e6;
  --daemp: #f4f2f7;
  --gron: #1f6b43;
  --roed: #98202b;
}

.skjult {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Reicon-ikoner findes i to slags: de fleste er fyldte stier med
   fill="currentColor", men nogle (ShoppingBag, ChevronRight) er streg-ikoner
   med stroke="currentColor" og stroke-width 1.5. Saetter man fill i CSS,
   bliver streg-ikonerne fyldt helt ud og ender som sorte klatter. Hver sti
   siger selv hvad den skal have, saa CSS skal holde fingrene fra baade fill
   og stroke og kun styre stoerrelsen. Farven arves via currentColor. */
.ikon { width: 20px; height: 20px; flex: none; }

/* ---------- knapper ---------- */

.knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--blaek);
  color: var(--hvid);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease;
}
.knap:hover { opacity: .88; }
.knap:disabled { opacity: .45; cursor: not-allowed; }
.knap-stor { width: 100%; padding: 16px 22px; font-size: 1.02rem; }
.knap-lav { padding: 10px 16px; font-size: .92rem; }
.knap.er-tilfoejet { background: var(--gron); }

.link-knap {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blaek-blod);
  font: inherit;
  font-size: .9rem;
  text-decoration: underline;
  cursor: pointer;
}
.link-knap:hover { color: var(--blaek); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--blaek);
  outline-offset: 2px;
}

/* ---------- kurvknap i headeren ---------- */

.kurv-knap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  color: var(--blaek);
  text-decoration: none;
}
.kurv-knap:hover { background: var(--daemp); }
.kurv-ikon { width: 22px; height: 22px; }
.kurv-tael {
  position: absolute;
  top: 1px; right: 0;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--hormone-accent);
  color: var(--hvid);
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ---------- broedkrumme ---------- */

.broedkrumme {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-block: 22px 4px;
  font-size: .87rem;
  color: var(--blaek-blod);
}
.broedkrumme a { text-decoration: none; }
.broedkrumme a:hover { text-decoration: underline; }
.krumme-pil { width: 14px; height: 14px; opacity: .5; }

/* ---------- produktside ---------- */

.pdp { padding-block: 0 20px; }

.pdp-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-block: 24px 40px;
}
.pdp-foto {
  position: sticky;
  top: 92px;
  border-radius: var(--radius);
  background: var(--f);
  overflow: hidden;
}
.pdp-foto img { width: 100%; height: auto; aspect-ratio: 1; display: block; }

.koeb { display: flex; flex-direction: column; gap: 14px; }
.koeb-under {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--a);
}
.koeb h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--a); }
.koeb-loefte { margin: 0; font-weight: 600; }
.koeb-besk { margin: 0; color: var(--blaek-blod); }

.pdp-pris {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 0;
}
.pdp-pris .nu { font-size: 1.7rem; font-weight: 700; }
.pdp-pris .foer { color: var(--graa); text-decoration: line-through; }
.spar {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--f);
  color: var(--a);
  font-size: .78rem;
  font-weight: 700;
}

/* ---------- bundt-vaelger ---------- */

.trin-saet { margin: 6px 0 0; padding: 0; border: 0; }
.trin-saet legend {
  padding: 0 0 10px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blaek-blod);
}
.trin {
  display: block;
  margin-bottom: 8px;
  padding: 13px 16px;
  border: 1px solid var(--graen);
  border-radius: 14px;
  background: var(--hvid);
  cursor: pointer;
}
.trin.er-valgt { border-color: var(--a); box-shadow: inset 0 0 0 1px var(--a); background: var(--f); }
.trin input { position: absolute; opacity: 0; width: 0; height: 0; }
.trin-krop { display: flex; align-items: center; gap: 10px; }
.trin-titel { font-weight: 600; }
.trin-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--a);
  color: var(--hvid);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trin-pris { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.trin-pris .foer {
  margin-left: 6px;
  color: var(--graa);
  font-weight: 400;
  text-decoration: line-through;
}

/* ---------- antal ---------- */

.antal-raekke { display: flex; align-items: center; gap: 14px; }
.antal-maerkat {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blaek-blod);
}
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--graen);
  border-radius: 999px;
  overflow: hidden;
  background: var(--hvid);
}
.stepper-knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 0;
  background: none;
  color: var(--blaek);
  cursor: pointer;
}
.stepper-knap:hover { background: var(--daemp); }
.stepper-felt {
  width: 52px;
  height: 42px;
  border: 0;
  border-inline: 1px solid var(--graen);
  background: none;
  font: inherit;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.stepper-felt::-webkit-outer-spin-button,
.stepper-felt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.koeb-kvit {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--daemp);
  color: var(--gron);
  font-size: .92rem;
  font-weight: 600;
}

.koeb-tryghed { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.koeb-tryghed li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--blaek-blod); }
.koeb-tryghed .ikon { color: var(--a); margin-top: 1px; }

/* ---------- pdp-blokke ---------- */

.pdp-blok { padding-block: 34px; border-top: 1px solid var(--linje); }
.pdp-blok h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 12px; }
.pdp-blok p { max-width: 66ch; color: var(--blaek-blod); }
.pdp-blok .punkter { margin-top: 16px; }
.pdp-blok .punkter li::before { background: var(--a); }

.fakta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 26px;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--linje);
}
.fakta dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blaek-blod);
}
.fakta dd { margin: 4px 0 0; }

.mini-raekke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.mini {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linje);
  border-radius: 18px;
  background: var(--hvid);
  overflow: hidden;
  text-decoration: none;
}
.mini:hover { border-color: var(--a); }
.mini-foto { display: block; background: var(--f); }
.mini-foto img { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.mini-navn { padding: 12px 14px 0; font-weight: 600; font-size: .95rem; color: var(--a); }
.mini-pris { padding: 2px 14px 14px; font-size: .9rem; color: var(--blaek-blod); }

/* ---------- kurvside ---------- */

.kurv-side { padding-block: 40px 20px; }
.kurv-side h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-bottom: 26px; }
.tom-besked { color: var(--blaek-blod); margin-bottom: 20px; }

.kurv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 34px;
  align-items: start;
}
.kurv-tabel { width: 100%; border-collapse: collapse; }
.kurv-tabel thead th {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linje);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blaek-blod);
  text-align: left;
}
.kurv-tabel thead th:last-child, .kurv-tabel td:last-child { text-align: right; }
.kurv-tabel th:nth-child(3), .kurv-tabel td:nth-child(3) { text-align: right; }
.kurv-tabel td { padding: 18px 0; border-bottom: 1px solid var(--linje); vertical-align: top; }

.kurv-vare { display: flex; gap: 14px; }
.kurv-foto { flex: none; border-radius: 12px; overflow: hidden; background: var(--daemp); }
.kurv-foto img { width: 72px; height: 72px; display: block; object-fit: cover; }
.kurv-navn { display: flex; flex-direction: column; gap: 2px; }
.kurv-navn a { font-weight: 600; text-decoration: none; }
.kurv-navn a:hover { text-decoration: underline; }
.kurv-variant, .kurv-stk { font-size: .87rem; color: var(--blaek-blod); }
.kurv-sum { font-variant-numeric: tabular-nums; }
.kurv-sum .nu { font-weight: 700; display: block; }
.kurv-sum .foer { color: var(--graa); text-decoration: line-through; font-size: .87rem; }

/* ---------- resume ---------- */

.resume {
  position: sticky;
  top: 92px;
  padding: 24px 26px;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--hvid);
}
.resume h2 { font-size: 1.2rem; margin-bottom: 16px; }
.resume-tal { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.resume-tal > div { display: flex; justify-content: space-between; gap: 16px; font-size: .95rem; }
.resume-tal dt { color: var(--blaek-blod); }
.resume-tal dd { margin: 0; font-variant-numeric: tabular-nums; }
.gron { color: var(--gron); font-weight: 600; }
.resume-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 16px 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linje);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.resume-total .valuta { font-size: .8rem; font-weight: 500; color: var(--blaek-blod); }
.resume-note { margin: 12px 0 0; font-size: .84rem; color: var(--graa); }

.resume-varer { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.resume-vare { display: flex; align-items: center; gap: 12px; }
.vare-foto { position: relative; flex: none; }
.vare-foto img {
  width: 64px; height: 64px;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--linje);
  background: var(--hvid);
  object-fit: cover;
}
.vare-badge {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blaek-blod);
  color: var(--hvid);
  font-size: .7rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.vare-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vare-navn { font-weight: 600; font-size: .93rem; }
.vare-variant { font-size: .84rem; color: var(--blaek-blod); }
.vare-pris { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- checkout ---------- */

body.er-udtjek { background: var(--hvid); }

.udtjek-skal { min-height: 100vh; }
.udtjek-top { border-bottom: 1px solid var(--linje); }
.udtjek-baelte {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.krumme { display: flex; align-items: center; gap: 6px; font-size: .87rem; color: var(--graa); }
.krumme a { color: var(--blaek-blod); text-decoration: none; }
.krumme a:hover { text-decoration: underline; }
.krumme [aria-current] { color: var(--blaek); font-weight: 600; }

.udtjek-grid {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 0;
  align-items: start;
}
.udtjek-hoved { padding: 34px 24px 60px; }
.udtjek-resume {
  position: sticky;
  top: 0;
  padding: 34px 24px 40px;
  border-left: 1px solid var(--linje);
  background: var(--flade);
  min-height: 100vh;
}

.udtjek-sektion { padding-block: 26px; border-top: 1px solid var(--linje); }
.udtjek-sektion:first-of-type { border-top: 0; padding-top: 6px; }
.udtjek-sektion h2 { font-family: Inter, sans-serif; font-size: 1.12rem; font-weight: 700; margin-bottom: 14px; }
.sektion-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sektion-top h2 { margin-bottom: 14px; }
.sektion-top a { font-size: .88rem; color: var(--blaek-blod); }

.felt { margin: 0 0 12px; display: flex; flex-direction: column; gap: 5px; }
.felt label { font-size: .84rem; font-weight: 500; color: var(--blaek-blod); }
.valgfri { color: var(--graa); font-weight: 400; }
.felt input, .felt select {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  border: 1px solid var(--graen);
  border-radius: 10px;
  background: var(--hvid);
  color: var(--blaek);
  font: inherit;
}
.felt input:disabled, .felt select:disabled, fieldset:disabled .felt input {
  background: var(--daemp);
  color: var(--graa);
  cursor: not-allowed;
}
.felt.har-fejl input, .felt.har-fejl select { border-color: var(--roed); }
.felt-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.felt-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.afkryds { display: flex; align-items: center; gap: 9px; margin: 4px 0 0; font-size: .92rem; }
.afkryds input { width: 17px; height: 17px; accent-color: var(--blaek); }
.afkryds label { color: var(--blaek-blod); }

.kort-felter { margin: 0; padding: 0; border: 0; }

.valg-liste { border: 1px solid var(--graen); border-radius: 12px; overflow: hidden; }
.valg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-top: 1px solid var(--graen);
  cursor: pointer;
}
.valg:first-child { border-top: 0; }
.valg.er-valgt { background: var(--daemp); }
.valg input { width: 17px; height: 17px; accent-color: var(--blaek); flex: none; }
.valg-krop { display: flex; flex-direction: column; gap: 1px; }
.valg-navn { font-weight: 500; }
.valg-under { font-size: .86rem; color: var(--blaek-blod); }
.valg-pris { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.advarsel {
  display: flex;
  gap: 12px;
  padding: 15px 17px;
  margin-bottom: 16px;
  border: 1px solid #e4d5a8;
  border-radius: 12px;
  background: #fdf7e6;
  font-size: .92rem;
  line-height: 1.55;
}
.advarsel .ikon { color: #8a6d1a; margin-top: 2px; }
.advarsel-stor { margin: 20px 0 30px; padding: 20px 22px; font-size: .97rem; }

.fejl {
  margin: 0 0 14px;
  padding: 12px 15px;
  border: 1px solid var(--roed);
  border-radius: 10px;
  background: #fdf1f2;
  color: var(--roed);
  font-size: .93rem;
  font-weight: 500;
}

.udtjek-bund {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--linje);
}
.udtjek-bund .knap-stor { width: auto; min-width: 210px; }
.tilbage {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .92rem;
  color: var(--blaek-blod);
  text-decoration: none;
}
.tilbage:hover { text-decoration: underline; }

.udtjek-links {
  list-style: none;
  margin: 30px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--linje);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: .85rem;
}
.udtjek-links a { color: var(--blaek-blod); }

.rabat { display: flex; gap: 8px; margin: 0 0 6px; }
.rabat input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--graen);
  border-radius: 10px;
  background: var(--hvid);
  font: inherit;
}
.rabat .knap { flex: none; border-radius: 10px; }
.rabat-svar { margin: 0 0 14px; font-size: .86rem; color: var(--blaek-blod); }

.resume-klap { display: none; }
.tom-kurv { padding-block: 40px; }
.tom-kurv h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 10px; }
.tom-kurv p { color: var(--blaek-blod); margin-bottom: 20px; }
.udtjek-fin {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: 0 24px 40px;
}

/* ---------- kvittering ---------- */

.kvit { padding-block: 44px 20px; }
.kvit-nr {
  margin: 0 0 6px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blaek-blod);
}
.kvit h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); }
.kvit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.kvit-blok {
  padding: 26px 28px;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--hvid);
}
.kvit-blok h2 { font-size: 1.2rem; margin-bottom: 16px; }
.kvit-blok .fakta { margin-top: 0; padding-top: 0; border-top: 0; grid-template-columns: 1fr; }
.kvit-blok .knap { margin-top: 20px; }
.kvit-tom { padding-block: 40px; }
.kvit-tom p { color: var(--blaek-blod); margin-bottom: 20px; }

/* ---------- mobil ---------- */

@media (max-width: 980px) {
  .pdp-top { grid-template-columns: 1fr; gap: 26px; }
  .pdp-foto { position: static; }
  .kurv-layout { grid-template-columns: 1fr; }
  .resume { position: static; }

  .udtjek-grid { grid-template-columns: 1fr; }
  /* Resumeet flytter op over formularen og klapper sammen, som i Shopify. */
  .udtjek-resume {
    position: static;
    order: -1;
    min-height: 0;
    padding: 0 24px;
    border-left: 0;
    border-bottom: 1px solid var(--linje);
    max-height: 0;
    overflow: hidden;
  }
  .udtjek-resume.er-aaben { max-height: none; padding: 20px 24px 26px; }
  .resume-klap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 24px;
    border: 0;
    border-bottom: 1px solid var(--linje);
    background: var(--flade);
    color: var(--blaek);
    font: inherit;
    cursor: pointer;
  }
  .klap-venstre { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
  .klap-pil { width: 15px; height: 15px; transform: rotate(90deg); transition: transform .18s ease; }
  .resume-klap[aria-expanded="true"] .klap-pil { transform: rotate(-90deg); }
  .klap-total { font-weight: 700; font-variant-numeric: tabular-nums; }
}

@media (max-width: 860px) {
  .top-inder { position: relative; }
  /* Kurvknappen skal ikke skubbe menuen ned i den ombrudte header. */
  .kurv-knap { position: absolute; top: 6px; right: 0; }

  .felt-trio { grid-template-columns: 1fr; }
  .udtjek-bund { flex-direction: column-reverse; align-items: stretch; }
  .udtjek-bund .knap-stor { width: 100%; }
  .tilbage { justify-content: center; }

  /* Kurvtabellen kan ikke vaere i tre kolonner paa 375px. Den bliver til kort. */
  .kurv-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .kurv-tabel tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--linje);
  }
  .kurv-tabel td { padding: 0; border: 0; }
  .kurv-vare { grid-column: 1 / -1; }
  .kurv-antal { justify-self: start; }
  .kurv-sum { justify-self: end; text-align: right; }
  .kurv-fjern { grid-column: 1 / -1; text-align: left; }
}

/* ---------- checkout: rettelser efter maaling paa en rigtig Shopify-checkout ---------- */

.udtjek-tryg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .87rem;
  color: var(--blaek-blod);
}
.udtjek-tryg .ikon { width: 16px; height: 16px; }

/* Betalingskortet: én ramme om metoden og dens felter, med en radioraekke
   oeverst. Prikken er dekoration, ikke en rigtig radioknap, fordi der kun er
   én metode at vaelge imellem indtil der er en betalingsudbyder paa. */
.betalkort {
  border: 1px solid var(--graen);
  border-radius: 12px;
  overflow: hidden;
}
.betalkort-top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 14px 16px;
  background: var(--daemp);
  border-bottom: 1px solid var(--graen);
  font-size: .95rem;
}
.betalkort-navn { font-weight: 500; }
.radio-prik {
  width: 18px; height: 18px;
  flex: none;
  border-radius: 50%;
  border: 5px solid var(--blaek);
  background: var(--hvid);
  box-shadow: inset 0 0 0 1px var(--blaek);
}
.kortmaerker { margin-left: auto; display: flex; gap: 5px; }
.kortmaerker b {
  padding: 3px 6px;
  border: 1px solid var(--graen);
  border-radius: 4px;
  background: var(--hvid);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--blaek-blod);
}
.kort-felter { padding: 16px; }
.kort-felter .felt:last-of-type { margin-bottom: 0; }

/* Den kompakte total lige over knappen. Paa desktop staar hele resumeet
   allerede i hoejre spalte, saa der ville den bare vaere stoej. */
.mobil-total {
  display: none;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 18px;
  padding: 16px 0 0;
  border-top: 1px solid var(--linje);
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mobil-total .valuta { font-size: .78rem; font-weight: 500; color: var(--blaek-blod); }

@media (max-width: 980px) {
  .mobil-total { display: flex; }
}

/* ---------- spring-link og skjulte pris-etiketter ---------- */

/* Springer menuen over for tastatur- og skaermlaeserbrugere. Den er skjult
   indtil den faar fokus, saa den ikke fylder for alle andre. */
.spring {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 11px 18px;
  border-radius: 0 0 12px 12px;
  background: var(--blaek);
  color: var(--hvid);
  font-weight: 600;
  text-decoration: none;
  transition: top .12s ease;
}
.spring:focus { top: 0; }

/* Baerer den skjulte "Regular price" / "Price"-etiket, saa den overlever at
   JS'en skriver textContent paa selve beloebet ved skift af bundt. */
.pris-del { display: inline-flex; align-items: baseline; gap: 0; }

.pdp-blok .advarsel, .koeb .advarsel, .kurv-side .advarsel { margin-top: 4px; }
.koeb noscript { display: block; }