/* =============================================================================
   DESIGN TOKENS – CSS Custom Properties
   Enkelt kilde til sandhed for alle visuelle værdier.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     FARVER
     --------------------------------------------------------------------------- */
  --color-primary:         #2B4F7A;   /* Mørk navy – tillid, ro */
  --color-primary-light:   #3E6999;   /* Lysere navy (hover) */
  --color-primary-dark:    #1D3656;   /* Mørkere navy (active) */
  --color-primary-10:      rgba(43, 79, 122, 0.10);
  --color-primary-20:      rgba(43, 79, 122, 0.20);

  --color-secondary:       #4E9A9C;   /* Teal/havgrøn – natur, ro */
  --color-secondary-light: #6DB5B7;
  --color-secondary-dark:  #367273;
  --color-secondary-10:    rgba(78, 154, 156, 0.10);

  --color-accent:          #F4EDE0;   /* Varm creme – hygge, blødhed */
  --color-accent-dark:     #E9DFCE;   /* Mørkere creme (kanter) */
  --color-accent-darker:   #D9CCBA;

  --color-background:      #F9F8F5;   /* Varm hvid */
  --color-surface:         #FFFFFF;   /* Kortbaggrunde */
  --color-surface-2:       #F6F5F1;   /* Subtil baggrundsnuance */

  --color-text:            #1A1A2E;   /* Mørk – læsbarhed */
  --color-text-muted:      #6B7280;   /* Grå – sekundær tekst */
  --color-text-light:      #9CA3AF;   /* Lys grå – pladsholdere */
  --color-text-inverse:    #FFFFFF;   /* Tekst på mørk baggrund */

  --color-border:          #E5E7EB;   /* Subtile kanter */
  --color-border-light:    #F3F4F6;

  /* Semantiske aliaser */
  --color-success:         #10B981;
  --color-success-bg:      #ECFDF5;
  --color-warning:         #F59E0B;
  --color-warning-bg:      #FFFBEB;
  --color-error:           #EF4444;
  --color-error-bg:        #FEF2F2;
  --color-info:            #3B82F6;
  --color-info-bg:         #EFF6FF;

  /* Badge/Sale */
  --color-sale:            #E53E3E;
  --color-new:             #38A169;

  /* Webshop */
  --color-product-bg:      #E8EEF3;
  --color-badge-bestseller: #38A169;
  --color-badge-bamboo:    #2D6A4F;
  --color-badge-guarantee: #4E9A9C;
  --color-badge-save:      #F6AD55;
  --color-cta-buy:         #38A169;
  --color-cta-buy-hover:   #2F855A;
  --color-stock-green:     #38A169;

  /* Stars */
  --color-star:            #F59E0B;

  /* ---------------------------------------------------------------------------
     TYPOGRAFI
     --------------------------------------------------------------------------- */
  --font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-accent:  'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:    'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  /* Skala (Major Third: 1.250) */
  --text-xs:   0.64rem;    /* ~10px */
  --text-sm:   0.8rem;     /* ~13px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.25rem;    /* 20px */
  --text-lg:   1.563rem;   /* 25px */
  --text-xl:   1.953rem;   /* ~31px */
  --text-2xl:  2.441rem;   /* ~39px */
  --text-3xl:  3.052rem;   /* ~49px */
  --text-4xl:  3.815rem;   /* ~61px */
  --text-5xl:  4.768rem;   /* ~76px */

  /* Fluid overskrifter (clamp: mobil → desktop) */
  --text-h1: clamp(2.2rem, 5.5vw, 4rem);
  --text-h2: clamp(1.7rem, 4vw,   3rem);
  --text-h3: clamp(1.3rem, 2.5vw, 2rem);
  --text-h4: clamp(1.1rem, 1.8vw, 1.4rem);

  /* Linjehøjder */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   2;

  /* Bogstavafstand */
  --tracking-tight:   -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* Skriftvægte */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------------------------------------------------------------------------
     AFSTAND (8px-base-enhed)
     --------------------------------------------------------------------------- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Sektionsafstand */
  --section-py: clamp(4rem, 8vw, 8rem);
  --section-px: clamp(1.25rem, 5vw, 3rem);

  /* ---------------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------------- */
  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow: 860px;
  --container-prose:  680px;

  /* ---------------------------------------------------------------------------
     KANTER & FORMER
     --------------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ---------------------------------------------------------------------------
     SKYGGER
     --------------------------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(26, 26, 46, 0.06),
                0 1px 2px rgba(26, 26, 46, 0.04);
  --shadow-md:  0 4px 16px rgba(26, 26, 46, 0.08),
                0 2px 6px  rgba(26, 26, 46, 0.05);
  --shadow-lg:  0 10px 40px rgba(26, 26, 46, 0.10),
                0 4px  16px rgba(26, 26, 46, 0.06);
  --shadow-xl:  0 20px 60px rgba(26, 26, 46, 0.12);
  --shadow-product: 0 8px 32px rgba(44, 74, 110, 0.12);
  --shadow-header:  0 2px 20px rgba(26, 26, 46, 0.08);

  /* ---------------------------------------------------------------------------
     TRANSITIONS
     --------------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* ---------------------------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------------------------- */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* ---------------------------------------------------------------------------
     HEADER
     --------------------------------------------------------------------------- */
  --header-height:        80px;
  --header-height-mobile: 64px;
  --header-bg:            rgba(250, 250, 248, 0.95);
  --header-bg-scrolled:   rgba(250, 250, 248, 0.98);
}
/* =============================================================================
   MODERNE CSS RESET
   ============================================================================= */

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

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Fjern WordPress-standard margins */
.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* Tilgængelighed: skip-link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: white;
  font-weight: var(--weight-semibold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--duration-base);
}

.skip-link:focus {
  top: 0;
}

/* WordPress alignment classes */
.alignleft {
  float: left;
  margin-right: var(--space-8);
  margin-bottom: var(--space-4);
}

.alignright {
  float: right;
  margin-left: var(--space-8);
  margin-bottom: var(--space-4);
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide {
  width: 100%;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Screen reader text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Focus visible styles */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* WordPress body classes */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}
/* =============================================================================
   TYPOGRAFI
   ============================================================================= */

/* Overskrifter */
h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
h5 { font-size: var(--text-md); font-family: var(--font-body); font-weight: var(--weight-semibold); }
h6 { font-size: var(--text-base); font-family: var(--font-body); font-weight: var(--weight-semibold); }

/* Brødtekst */
p {
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
  font-size: 1.05rem;
}

p:last-child {
  margin-bottom: 0;
}

/* Lead-tekst */
.lead {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* Eyebrow / label */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast);
}

a:hover {
  color: var(--color-primary-light);
}

/* Indholdslinks */
.entry-content a,
.page-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-primary-20);
  transition: text-decoration-color var(--duration-fast);
}

.entry-content a:hover,
.page-content a:hover {
  text-decoration-color: var(--color-primary);
}

/* Lister */
.entry-content ul,
.entry-content ol,
.page-content ul,
.page-content ol {
  margin-left: var(--space-6);
  margin-bottom: var(--space-5);
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content li,
.page-content li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-normal);
}

/* Citat / Blockquote */
blockquote {
  border-left: 3px solid var(--color-secondary);
  padding: var(--space-4) var(--space-8);
  margin: var(--space-8) 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text);
  background: var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote cite {
  display: block;
  margin-top: var(--space-4);
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

blockquote cite::before {
  content: '— ';
}

/* Kode */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-surface-2);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
}

pre {
  background: var(--color-text);
  color: var(--color-accent);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* Seperator */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-12) 0;
}

/* Overskrift-spacing i indholdsområder – Apple-stil: stort luft */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: var(--space-16);
  margin-bottom: var(--space-6);
}

.entry-content h1:first-child,
.entry-content h2:first-child {
  margin-top: 0;
}

/* Teksthjælper-klasser */
.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-light     { color: var(--color-text-light); }
.text-inverse   { color: var(--color-text-inverse); }
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }

.font-heading   { font-family: var(--font-heading); }
.font-body      { font-family: var(--font-body); }
.font-accent    { font-family: var(--font-accent); font-style: italic; }

/* Tekstdekorationsklasse til sektions-subtekster */
.section-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 600px;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-header .section-subtitle {
  margin: 0 auto;
}
/* =============================================================================
   LAYOUT – Container, Grid, Flex hjælpere
   ============================================================================= */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-px);
  padding-right: var(--section-px);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--prose {
  max-width: var(--container-prose);
  margin-left: auto;
  margin-right: auto;
}

/* Sektioner */
.section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}

.section--sm {
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

.section--lg {
  padding-top: clamp(6rem, 12vw, 12rem);
  padding-bottom: clamp(6rem, 12vw, 12rem);
}

/* Baggrunde */
.bg-white    { background-color: var(--color-surface); }
.bg-light    { background-color: var(--color-background); }
.bg-accent   { background-color: var(--color-accent); }
.bg-primary  { background-color: var(--color-primary); }
.bg-secondary{ background-color: var(--color-secondary); }
.bg-dark     { background-color: var(--color-text); }

/* Grid system */
.grid {
  display: grid;
  gap: var(--space-8);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

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

.grid--auto-fill-md {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Flex hjælpere */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start   { display: flex; align-items: flex-start; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-none    { flex: none; }
.gap-2        { gap: var(--space-2); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }
.gap-12       { gap: var(--space-12); }

/* Afstand hjælpere */
.mt-auto { margin-top: auto; }
.mb-0    { margin-bottom: 0; }
.mb-4    { margin-bottom: var(--space-4); }
.mb-6    { margin-bottom: var(--space-6); }
.mb-8    { margin-bottom: var(--space-8); }
.mb-12   { margin-bottom: var(--space-12); }
.mb-16   { margin-bottom: var(--space-16); }

/* Responsiv grid (mobile-first) */
@media (max-width: 1023px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Posts-gitter til blog/arkiv */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-8);
}

@media (max-width: 639px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }
}

/* Side-layout (content + sidebar) */
.content-sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-16);
  align-items: start;
}

@media (max-width: 1023px) {
  .content-sidebar-layout {
    grid-template-columns: 1fr;
  }
}

/* Hjælpere til at skjule/vise */
.hidden        { display: none !important; }
.visible       { visibility: visible; }
.invisible     { visibility: hidden; }

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; top: calc(var(--header-height) + var(--space-6)); }

/* Aspekt-forhold */
.aspect-square    { aspect-ratio: 1 / 1; }
.aspect-16-9      { aspect-ratio: 16 / 9; }
.aspect-4-3       { aspect-ratio: 4 / 3; }
.aspect-3-4       { aspect-ratio: 3 / 4; }

/* Object-fit */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* =============================================================================
   KNAP-SYSTEM
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  line-height: 1;
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Primær: fyldt navy */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--primary:active {
  transform: translateY(0);
  background: var(--color-primary-dark);
}

/* Sekundær: fyldt teal */
.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border-color: var(--color-secondary);
}

.btn--secondary:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Ghost: kant-variant (navy) */
.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--ghost:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
}

/* Ghost hvid (til mørke baggrunde) */
.btn--ghost-white {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--ghost-white:hover {
  background: var(--color-text-inverse);
  color: var(--color-primary);
  border-color: var(--color-text-inverse);
}

/* Accent-knap (creme baggrund) */
.btn--accent {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
}

.btn--accent:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* Størrelser */
.btn--sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

.btn--lg {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-md);
}

.btn--xl {
  padding: var(--space-6) var(--space-12);
  font-size: var(--text-md);
}

/* Fuld bredde */
.btn--full {
  width: 100%;
  justify-content: center;
}

/* Ikon i knap */
.btn svg,
.btn img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* WooCommerce overrides */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: white !important;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  line-height: 1;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--color-primary-light) !important;
  border-color: var(--color-primary-light) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--color-secondary-light) !important;
  border-color: var(--color-secondary-light) !important;
}

/* Enkelt-produkt "Læg i kurv" */
.single_add_to_cart_button {
  width: 100%;
  padding: var(--space-5) var(--space-8) !important;
  font-size: var(--text-md) !important;
  margin-top: var(--space-6) !important;
}

/* Tekst-link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: gap var(--duration-base) var(--ease-out);
}

.link-arrow::after {
  content: '→';
  transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover {
  color: var(--color-primary-light);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}
/* =============================================================================
   HEADER
   ============================================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: var(--header-height);
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.4);
  transition:
    background var(--duration-base) var(--ease-in-out),
    height var(--duration-base) var(--ease-in-out),
    box-shadow var(--duration-base) var(--ease-in-out);
}

.site-header.is-scrolled {
  background: var(--header-bg-scrolled);
  box-shadow: var(--shadow-header);
  height: 68px;
}

/* Header forbliver altid synlig – scroll-progress-baren sidder fast under den */

/* Kompensation for fixed header */
.header-spacer {
  height: var(--header-height);
}

/* WordPress admin-bar kompensation (når man er logget ind) */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 600px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* Indre wrapper */
.header-inner {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  height: 100%;
  gap: var(--space-8);
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--section-px);
}

/* Logo-område */
.header-logo {
  display: flex;
  align-items: center;
}

.header-logo .custom-logo-link,
.header-logo .site-title-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header-logo .custom-logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  transition: opacity var(--duration-fast);
}

.is-scrolled .header-logo .custom-logo {
  height: 34px;
}

.header-logo .site-title-link {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  transition: color var(--duration-fast);
}

.header-logo .site-title-link:hover {
  color: var(--color-primary);
}

/* Navigation (center) */
.header-nav {
  display: flex;
  justify-content: center;
  overflow: visible;
}

/* Actions (høre side) */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.header-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
  position: relative;
}

.header-action-btn:hover {
  background: var(--color-border-light);
  color: var(--color-primary);
}

.header-action-btn svg {
  width: 20px;
  height: 20px;
}

/* Kurv-prik: vises når der er varer i kurven */
.cart-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  background: var(--color-secondary);
  border-radius: var(--radius-full);
  pointer-events: none;
  display: none;
}

.cart-dot.has-items {
  display: block;
}

/* =============================================
   MOBIL HAMBURGER
   ============================================= */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 6px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast);
}

.hamburger:hover {
  background: var(--color-border-light);
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base);
}

.hamburger.is-open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* =============================================
   MOBIL MENU DRAWER
   ============================================= */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.5);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  transition: opacity var(--duration-slow);
  backdrop-filter: blur(4px);
}

.mobile-menu-overlay.is-open {
  opacity: 1;
}

.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 90vw);
  background: var(--color-surface);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.mobile-menu-drawer.is-open {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

.mobile-menu-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text);
  transition: background var(--duration-fast);
}

.mobile-menu-close:hover {
  background: var(--color-border-light);
}

.mobile-menu-close svg {
  width: 20px;
  height: 20px;
}

.mobile-menu-nav {
  flex: 1;
  padding: var(--space-6);
}

.mobile-menu-nav ul {
  list-style: none;
}

.mobile-menu-nav > ul > li {
  border-bottom: 1px solid var(--color-border-light);
}

.mobile-menu-nav > ul > li:last-child {
  border-bottom: none;
}

.mobile-menu-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.mobile-menu-nav a:hover {
  color: var(--color-primary);
}

.mobile-menu-nav .sub-menu {
  padding-left: var(--space-4);
  padding-bottom: var(--space-3);
}

.mobile-menu-nav .sub-menu li {
  border: none;
}

.mobile-menu-nav .sub-menu a {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
}

.mobile-menu-footer {
  padding: var(--space-6);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  gap: var(--space-4);
}

.mobile-menu-footer .btn {
  flex: 1;
  justify-content: center;
}

/* =============================================
   RESPONSIV
   ============================================= */
@media (max-width: 1023px) {
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
  }

  .header-logo {
    order: 2;
    justify-content: center;
    min-width: 0;
  }

  .header-nav {
    display: none;
  }

  .header-actions {
    order: 3;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 0;
  }

  .hamburger {
    display: flex;
    order: 1;
  }

  .mobile-menu-overlay {
    display: block;
  }
}

@media (max-width: 767px) {
  .site-header {
    height: var(--header-height-mobile);
  }

  .header-spacer {
    height: var(--header-height-mobile);
  }

  .site-header.is-scrolled {
    height: var(--header-height-mobile);
  }

  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: 0 var(--space-4);
  }

  .header-logo .custom-logo {
    max-width: 120px;
    height: 32px;
  }

  .header-actions {
    gap: 2px;
  }

  .header-action-btn,
  .hamburger {
    width: 36px;
    height: 36px;
  }

  .header-action-btn svg {
    width: 18px;
    height: 18px;
  }
}
/* =============================================================================
   NAVIGATION
   ============================================================================= */

/* Primær navigation */
.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.primary-nav > li {
  position: relative;
}

.primary-nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-size: 0.9rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--duration-fast), background var(--duration-fast);
  position: relative;
}

/* Understreget hover-effekt */
.primary-nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: var(--space-4);
  right: var(--space-4);
  height: 1.5px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.primary-nav > li > a:hover {
  color: var(--color-primary);
}

.primary-nav > li > a:hover::after,
.primary-nav > li.current-menu-item > a::after,
.primary-nav > li.current-menu-parent > a::after,
.primary-nav > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

.primary-nav > li.current-menu-item > a,
.primary-nav > li.current-menu-parent > a,
.primary-nav > li.current-menu-ancestor > a {
  color: var(--color-primary);
}

/* Aktiv side: animeret gradient-glow underline */
.primary-nav > li.current-menu-item > a::after,
.primary-nav > li.current-menu-parent > a::after,
.primary-nav > li.current-menu-ancestor > a::after {
  height: 2.5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
  background-size: 200% 100%;
  animation: navGlow 3s ease-in-out infinite;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(78, 154, 156, 0.4), 0 0 16px rgba(43, 79, 122, 0.2);
}

@keyframes navGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Dropdown-pil */
.primary-nav > li.menu-item-has-children > a::before {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--duration-base) var(--ease-out);
}

.primary-nav > li.menu-item-has-children > a {
  padding-right: calc(var(--space-4) + 14px);
}

.primary-nav > li.menu-item-has-children:hover > a::before {
  transform: translateY(-50%) rotate(-180deg);
}

/* Dropdown submenu */
.primary-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  padding-top: calc(var(--space-2) + 8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    visibility var(--duration-base);
  z-index: var(--z-dropdown);
  list-style: none;
}

.primary-nav > li > .sub-menu {
  top: calc(100% - 6px);
}

.primary-nav > li > .sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.primary-nav > li:hover > .sub-menu,
.primary-nav > li:focus-within > .sub-menu,
.primary-nav > li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.primary-nav .sub-menu li {
  position: relative;
}

.primary-nav .sub-menu .menu-item-has-children > a {
  position: relative;
  padding-right: calc(var(--space-5) + 18px);
}

.primary-nav .sub-menu .menu-item-has-children > a::after {
  content: '';
  position: absolute;
  right: var(--space-4);
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: transform var(--duration-fast), color var(--duration-fast);
}

.primary-nav .sub-menu a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: 0.875rem;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
  border-radius: var(--radius-md);
  margin: 0 var(--space-2);
}

.primary-nav .sub-menu a:hover {
  background: var(--color-background);
  color: var(--color-primary);
}

.primary-nav .sub-menu .menu-item-has-children:hover > a::after,
.primary-nav .sub-menu .menu-item-has-children:focus-within > a::after,
.primary-nav .sub-menu .menu-item-has-children.is-open > a::after {
  transform: translateY(-50%) translateX(2px) rotate(45deg);
}

.primary-nav .sub-menu .current-menu-item > a {
  color: var(--color-primary);
  font-weight: var(--weight-medium);
}

.primary-nav .sub-menu .sub-menu {
  top: -9px;
  left: calc(100% - 10px);
  transform: translateX(8px);
  padding-top: var(--space-2);
}

.primary-nav .sub-menu li:hover > .sub-menu,
.primary-nav .sub-menu li:focus-within > .sub-menu,
.primary-nav .sub-menu li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

/* Separatorlinje i dropdown */
.primary-nav .sub-menu .menu-item-divider {
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-2) 0;
}

/* =============================================================================
   MEGA-MENU (2 kolonner – produkter + tilbehør)
   ============================================================================= */

/* Mega-menu container bryder ud af li-relative positioning */
.primary-nav > li.mega-menu {
  position: static;
}

/* Bredt panel der spænder hele header-bredden */
.primary-nav > li.mega-menu > .sub-menu {
  left: 0 !important;
  right: 0 !important;
  top: 100%;
  min-width: unset;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-10);
  padding: var(--space-8) var(--space-12);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  border-top: 2px solid var(--color-primary);
  /* Overskriv JS-transform fra translateX(-50%) til kun translateY */
  transform: translateY(-8px) !important;
}

/* Åben tilstand (sat af JS) */
.primary-nav > li.mega-menu.is-open > .sub-menu {
  transform: translateY(0) !important;
}

/* Kolonne-overskrift (level 2 – "Voksne" / "Børn") */
.primary-nav > li.mega-menu > .sub-menu > li > a {
  display: block;
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  padding: 0 0 var(--space-3) var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
  border-radius: 0;
}

/* Level-3 sub-menu (produktliste inden for kolonne): altid synlig */
.primary-nav > li.mega-menu > .sub-menu > li > .sub-menu {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-width: unset !important;
  width: 100% !important;
  display: block !important;
}

/* Level-3 list items */
.primary-nav > li.mega-menu > .sub-menu > li > .sub-menu li {
  position: static;
  border: none;
}

/* Level-3 links */
.primary-nav > li.mega-menu > .sub-menu > li > .sub-menu a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  border-radius: var(--radius-md);
  margin: 0;
  transition: background var(--duration-fast), color var(--duration-fast), padding-left var(--duration-fast);
}

.primary-nav > li.mega-menu > .sub-menu > li > .sub-menu a:hover {
  background: var(--color-background);
  color: var(--color-primary);
  padding-left: var(--space-5);
}

/* =============================================
   BRØDKRUMME
   ============================================= */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.breadcrumbs a:hover {
  color: var(--color-primary);
}

.breadcrumbs .separator {
  color: var(--color-border);
  user-select: none;
}

.breadcrumbs .current {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* =============================================
   PAGINERING
   ============================================= */
.navigation.pagination,
.posts-navigation {
  margin-top: var(--space-16);
}

.navigation.pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
  border: 1px solid var(--color-border);
}

.navigation.pagination .page-numbers:hover {
  background: var(--color-background);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.navigation.pagination .page-numbers.current {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.navigation.pagination .page-numbers.dots {
  border: none;
  pointer-events: none;
}

.nav-previous a,
.nav-next a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--duration-base);
}

.nav-previous a:hover,
.nav-next a:hover {
  color: var(--color-primary-light);
}

/* =============================================
   FOOTER NAVIGATION
   ============================================= */
.footer-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--duration-fast);
}

.footer-nav a:hover {
  color: white;
}

/* Footer juridisk nav */
.footer-legal-nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
}

.footer-legal-nav a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer-legal-nav a:hover {
  color: rgba(255, 255, 255, 0.8);
}
/* =============================================================================
   HERO SEKTION
   ============================================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-primary-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Mørkt overlay på baggrundsbillede */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(26, 26, 46, 0.82) 0%,
    rgba(44, 74, 110, 0.62) 55%,
    rgba(91, 138, 139, 0.38) 100%
  );
  z-index: 1;
}

/* Indhold */
.hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + var(--space-16));
  padding-bottom: var(--space-24);
}

.hero__text {
  max-width: 680px;
}

.hero__heading {
  font-size: clamp(2.4rem, 6vw, 5rem);
  color: white;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero__subheading {
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(245, 240, 232, 0.9);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-light);
  margin-bottom: var(--space-10);
  max-width: 560px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Trust-strip forneden */
.hero__trust {
  position: relative;
  z-index: 2;
  padding: var(--space-5) 0;
  background: rgba(26, 26, 46, 0.4);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero__trust-text {
  font-size: var(--text-sm);
  color: rgba(245, 240, 232, 0.85);
  text-align: center;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

/* Scroll-indikator */
.hero__scroll-indicator {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  color: rgba(255, 255, 255, 0.7);
  transition: border-color var(--duration-fast), color var(--duration-fast);
  animation: heroScrollBounce 2s var(--ease-in-out) infinite;
}

.hero__scroll-indicator:hover {
  border-color: white;
  color: white;
}

.hero__scroll-indicator svg {
  width: 18px;
  height: 18px;
}

@keyframes heroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* Ingen billede: fallback gradient */
.hero:not([style]) {
  background: linear-gradient(
    135deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 50%,
    var(--color-secondary-dark) 100%
  );
}

/* =============================================
   SIDE-HERO – hovedregler er i _dynamic.css
   ============================================= */

/* Landingsside */
.landing-page .landing-content {
  padding: 0;
}

/* =============================================
   RESPONSIV
   ============================================= */
@media (max-width: 767px) {
  .hero__content {
    padding-top: calc(var(--header-height-mobile) + var(--space-10));
    padding-bottom: var(--space-20);
  }

  .hero__text {
    max-width: 100%;
  }

  .hero__heading {
    font-size: clamp(1.9rem, 8vw, 2.8rem);
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__scroll-indicator {
    bottom: 100px;
  }
}
/* =============================================================================
   SEKTIONER – Trust bar, Why, CTA, Testimonials, Blog, Newsletter
   ============================================================================= */

/* =============================================
   TRUST BAR
   ============================================= */
.trust-bar {
  padding: var(--space-10) 0;
  background: var(--color-accent);
  border-bottom: 1px solid var(--color-accent-dark);
}

.trust-bar__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.trust-item__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  box-shadow: var(--shadow-sm);
}

.trust-item__icon svg {
  width: 20px;
  height: 20px;
}

.trust-item__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.trust-item__text strong {
  font-size: 0.9rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.trust-item__text span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

@media (max-width: 1023px) {
  .trust-bar__items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .trust-bar__items {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .trust-item__icon {
    width: 36px;
    height: 36px;
  }

  .trust-item__icon svg {
    width: 16px;
    height: 16px;
  }
}

/* =============================================
   ARCHIVE SECTION HEADINGS (Artikler & Guider)
   ============================================= */
.archive-section__heading {
  font-size: var(--text-h2);
  margin-bottom: var(--space-2);
}

.archive-section__desc {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  margin-bottom: var(--space-8);
}

/* =============================================
   CATEGORY CARDS (forside)
   ============================================= */
.category-cards {
  background: var(--color-background);
}

.category-cards__heading {
  text-align: center;
  font-size: var(--text-h2);
  margin-bottom: var(--space-10);
}

.category-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.category-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-base), transform var(--duration-base);
  will-change: transform, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.category-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.category-card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-accent);
}

.category-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow);
}

.category-card:hover .category-card__image img {
  transform: scale(1.05);
}

.category-card__placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-accent);
}

.category-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.category-card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.category-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
  flex: 1;
}

.category-card__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  transition: gap var(--duration-fast);
}

.category-card:hover .category-card__link {
  color: var(--color-primary-light);
}

@media (max-width: 1023px) {
  .category-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .category-cards__grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   WHY SEKTION
   ============================================= */
.why-section {
  background: var(--color-surface);
}

.why-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  margin-bottom: clamp(4rem, 8vw, 8rem);
}

.why-block:last-of-type {
  margin-bottom: 0;
}

.why-block--image-right .why-block__text {
  order: 1;
}

.why-block--image-right .why-block__image {
  order: 2;
}

.why-block__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-xl);
}

.why-block__image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.why-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.why-block__text h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-5);
  margin-top: var(--space-3);
}

.why-block__text p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.why-block__text p:last-of-type {
  margin-bottom: var(--space-6);
}

/* Fordele-grid */
.why-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: clamp(4rem, 8vw, 7rem);
}

.why-benefit {
  text-align: center;
  padding: var(--space-8);
  background: var(--color-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  transition: box-shadow var(--duration-base), transform var(--duration-base);
  will-change: transform, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.why-benefit:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.why-benefit__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-5);
  background: var(--color-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
}

.why-benefit__icon svg {
  width: 28px;
  height: 28px;
}

.why-benefit h4 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.why-benefit p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

@media (max-width: 1023px) {
  .why-block {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .why-block--image-right .why-block__text { order: 2; }
  .why-block--image-right .why-block__image { order: 1; }

  .why-block__image {
    aspect-ratio: 16 / 9;
    max-height: 400px;
  }

  .why-benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .why-benefits {
    grid-template-columns: 1fr;
  }

  .why-benefit__icon {
    width: 48px;
    height: 48px;
  }

  .why-benefit__icon svg {
    width: 20px;
    height: 20px;
  }
}

/* =============================================
   CTA BANNER
   ============================================= */
.cta-banner {
  position: relative;
  padding: clamp(5rem, 10vw, 10rem) 0;
  background: var(--color-primary);
  overflow: hidden;
}

/* Subtil mønster-overlay */
.cta-banner__bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
}

.cta-banner__inner {
  text-align: center;
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.cta-banner__heading {
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  color: white;
  margin: var(--space-4) 0 var(--space-6);
}

.cta-banner__text {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-10);
  font-weight: var(--weight-light);
}

.cta-banner__actions {
  margin-bottom: var(--space-10);
}

.cta-banner__trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.cta-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
}

.cta-trust-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

/* =============================================
   TESTIMONIALS
   ============================================= */
.testimonials {
  overflow: hidden;
}

.testimonials-slider {
  position: relative;
}

.testimonials-track-wrap {
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  gap: var(--space-6);
  transition: transform var(--duration-slow) var(--ease-out);
  will-change: transform;
}

.testimonial-card {
  flex: 0 0 calc(33.333% - var(--space-4));
  min-width: calc(33.333% - var(--space-4));
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-accent-dark);
  position: relative;
  display: flex;
  flex-direction: column;
}

.testimonial-card__quote {
  font-family: var(--font-heading);
  font-size: 6rem;
  line-height: 1;
  color: var(--color-primary-10);
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
  pointer-events: none;
  user-select: none;
}

.testimonial-card__rating {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-4);
}

.star { color: var(--color-border); font-size: 1.1rem; }
.star--filled { color: var(--color-star); }

.testimonial-card__text {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  flex: 1;
  border-left: none;
  padding: 0;
  background: none;
  border-radius: 0;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.testimonial-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.testimonial-card__name {
  font-size: 0.9rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.testimonial-card__location {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.testimonial-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: var(--weight-medium);
}

.testimonial-card__product {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  width: 100%;
  margin-top: var(--space-2);
}

/* Slider kontroller */
.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.slider-arrow {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast);
  color: var(--color-text);
  flex-shrink: 0;
}

.slider-arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.slider-arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.slider-arrow svg {
  width: 18px;
  height: 18px;
}

.slider-dots {
  display: flex;
  gap: var(--space-2);
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-fast);
  padding: 0;
}

.slider-dot.is-active,
.slider-dot[aria-pressed="true"] {
  background: var(--color-primary);
  transform: scale(1.3);
}

/* Responsiv */
@media (max-width: 1023px) {
  .testimonial-card {
    flex: 0 0 calc(50% - var(--space-3));
    min-width: calc(50% - var(--space-3));
  }
}

@media (max-width: 639px) {
  .testimonial-card {
    flex: 0 0 100%;
    min-width: 100%;
  }
}

/* =============================================
   FEATURED PRODUCTS
   ============================================= */
.featured-products .products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.featured-products__cta {
  text-align: center;
  margin-top: var(--space-12);
}

.featured-products__cta .btn {
  animation: ctaPulse 2.5s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.03); }
}

@media (max-width: 1023px) {
  .featured-products .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .featured-products .products-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   BLOG PREVIEW
   ============================================= */
.blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.blog-preview__cta {
  text-align: center;
}

@media (max-width: 1023px) {
  .blog-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .blog-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   NEWSLETTER
   ============================================= */
.newsletter-section {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--color-primary-dark);
  position: relative;
  overflow: hidden;
}

.newsletter-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: var(--color-secondary-10);
  border-radius: var(--radius-full);
  filter: blur(80px);
  pointer-events: none;
}

.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
}

.newsletter-text h2 {
  color: white;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  margin-bottom: var(--space-5);
  margin-top: var(--space-3);
}

.newsletter-text p {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.newsletter-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.newsletter-benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

.newsletter-benefits svg {
  flex-shrink: 0;
  color: var(--color-secondary);
}

/* Formular */
.newsletter-form-wrap {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  backdrop-filter: blur(10px);
}

.newsletter-form__field {
  margin-bottom: var(--space-5);
}

.newsletter-form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-2);
}

.newsletter-form__input {
  width: 100%;
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  color: white;
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.newsletter-form__input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.newsletter-form__input:focus {
  outline: none;
  border-color: var(--color-secondary);
  background: rgba(255, 255, 255, 0.15);
}

.newsletter-form__submit {
  margin-top: var(--space-2);
}

.newsletter-form__privacy {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  margin-top: var(--space-4);
  line-height: var(--leading-relaxed);
}

.newsletter-form__privacy a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
}

.newsletter-form__success {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-weight: var(--weight-medium);
}

.newsletter-form__success[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .newsletter-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* =============================================
   PRODUCT CAROUSEL
   ============================================= */
.product-carousel {
  position: relative;
  overflow: hidden;
}

.product-carousel__track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-4);
}

.product-carousel__track::-webkit-scrollbar {
  display: none;
}

.product-carousel__track .product-card {
  flex: 0 0 calc(33.333% - var(--space-4));
  min-width: calc(33.333% - var(--space-4));
  scroll-snap-align: start;
}

.product-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-80%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: box-shadow var(--duration-fast), transform var(--duration-fast);
}

.product-carousel__nav:hover {
  box-shadow: var(--shadow-lg);
}

.product-carousel__nav--prev { left: -8px; }
.product-carousel__nav--next { right: -8px; }

.product-carousel__nav svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-text);
  fill: none;
  stroke-width: 2;
}

@media (max-width: 1023px) {
  .product-carousel__track .product-card {
    flex: 0 0 calc(50% - var(--space-3));
    min-width: calc(50% - var(--space-3));
  }
  .product-carousel__nav { display: none; }
}

@media (max-width: 639px) {
  .product-carousel__track .product-card {
    flex: 0 0 85%;
    min-width: 85%;
  }
}

/* All products section */
.all-products .products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

@media (max-width: 1023px) {
  .all-products .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .all-products .products-grid {
    grid-template-columns: 1fr;
  }
}
/* =============================================================================
   KORT – Produkt- og blogkort
   ============================================================================= */

/* =============================================
   PRODUKT-KORT – Apple-stil: rent, bubbly, luftigt
   ============================================= */
.product-card {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: none;
  box-shadow: 0 1px 4px rgba(26, 26, 46, 0.04);
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  will-change: transform, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.product-card:hover {
  box-shadow: 0 12px 40px rgba(26, 26, 46, 0.10), 0 4px 12px rgba(26, 26, 46, 0.06);
  transform: translateY(-6px);
}

/* Billed-link */
.product-card__image-link {
  display: block;
  text-decoration: none;
}

/* Billedwrapper */
.product-card__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-product-bg);
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slow) var(--ease-out);
}

.product-card:hover .product-card__image {
  transform: scale(1.05);
}

/* Ingen billede – neutral placeholder */
.product-card__no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2, var(--color-background));
  color: var(--color-border);
}

.product-card__no-image svg {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

/* Sikr at alle produktbilleder i kort har korrekt aspect-ratio */
.product-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Badge container */
.product-card__badges {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  z-index: 2;
  max-width: 80%;
}

.product-badge {
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

/* Legacy: single badge still absolute if no container */
.product-card__image-wrap > .product-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1;
}

.product-badge--sale {
  background: var(--color-sale);
  color: white;
}

.product-badge--featured {
  background: var(--color-badge-bestseller);
  color: white;
}

.product-badge--new {
  background: var(--color-new);
  color: white;
}

.product-badge--bamboo {
  background: var(--color-badge-bamboo);
  color: white;
}

.product-badge--guarantee {
  background: var(--color-badge-guarantee);
  color: white;
}

.product-badge--save {
  background: var(--color-badge-save);
  color: #1A1A2E;
  font-weight: var(--weight-bold);
}

/* Quick-add knap */
.product-card__quick-add {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  transform: translateY(120%);
  opacity: 0;
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base);
}

.product-card:hover .product-card__quick-add,
.product-card:focus-within .product-card__quick-add {
  transform: translateY(0);
  opacity: 1;
}

/* Kortets krop */
.product-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.product-card__cat {
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.product-card__cat:hover {
  color: var(--color-secondary-dark);
}

.product-card__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: var(--leading-snug);
  font-weight: var(--weight-regular);
  margin: var(--space-1) 0 0;
}

.product-card__title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.product-card__title a:hover {
  color: var(--color-primary);
}

/* Rating – compact inline stars */
.product-card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.product-card__rating .woocommerce-product-rating {
  display: flex;
  align-items: center;
}

.product-card__rating-count {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* Price – clean, compact */
.product-card__price {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-top: var(--space-2);
}

.product-card__price .woocommerce-Price-amount {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.product-card__price del {
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-weight: var(--weight-regular);
}

.product-card__price del .woocommerce-Price-amount {
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-weight: var(--weight-regular);
}

.product-card__price ins {
  text-decoration: none;
}

.product-card__price ins .woocommerce-Price-amount {
  color: var(--color-sale);
}

/* Product description */
.product-card__desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: var(--space-1);
}

/* Stock status */
.product-card__stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--color-stock-green);
  font-weight: var(--weight-medium);
  margin-top: var(--space-1);
}

.product-card__stock::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-stock-green);
  flex-shrink: 0;
}

/* Green buy button – Apple-stil: rounded, clean */
.btn--buy {
  background: var(--color-cta-buy);
  color: white;
  border: none;
  font-weight: var(--weight-semibold);
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  border-radius: var(--radius-full);
  padding: 10px 20px;
  transition: all var(--duration-base) var(--ease-out);
}

.btn--buy:hover,
.btn--buy:focus-visible {
  background: var(--color-cta-buy-hover);
  color: white;
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(56, 161, 105, 0.3);
}

/* Product card buy button */
.product-card__buy {
  margin-top: auto;
  padding-top: var(--space-3);
}

.product-card__buy .btn--buy {
  display: block;
  width: 100%;
  text-align: center;
}

/* Mobile: tighter card padding */
@media (max-width: 639px) {
  .product-card__body {
    padding: var(--space-4);
  }
  .product-card__image-wrap {
    aspect-ratio: 1 / 1;
  }
}

/* =============================================
   POST-KORT (Blog)
   ============================================= */
.post-card {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: none;
  box-shadow: 0 1px 4px rgba(26, 26, 46, 0.04);
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  will-change: transform, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.post-card:hover {
  box-shadow: 0 12px 40px rgba(26, 26, 46, 0.10), 0 4px 12px rgba(26, 26, 46, 0.06);
  transform: translateY(-6px);
}

.post-card__image-link {
  display: block;
  overflow: hidden;
}

.post-card__image-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slow) var(--ease-out);
}

.post-card:hover .post-card__image {
  transform: scale(1.04);
}

.post-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.post-card__cat {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.post-card__cat:hover {
  color: var(--color-secondary-dark);
}

.post-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: var(--weight-regular);
  margin: 0;
}

.post-card__title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__title a:hover {
  color: var(--color-primary);
}

.post-card__excerpt {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  flex: 1;
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-top: auto;
}

/* =============================================
   SØGERESULTAT-KORT
   ============================================= */
.search-result {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border-light);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-5);
  align-items: start;
}

.search-result:last-child {
  border-bottom: none;
}

.search-result__image {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.search-result__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.search-result__title a {
  color: var(--color-text);
  text-decoration: none;
}

.search-result__title a:hover {
  color: var(--color-primary);
}

.search-result__excerpt {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* =============================================
   POST-META
   ============================================= */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.post-meta .post-category {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent);
  color: var(--color-secondary-dark);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--duration-fast);
}

.post-meta .post-category:hover {
  background: var(--color-accent-dark);
}

.post-meta .post-meta-sep {
  color: var(--color-border);
}

/* =============================================
   FORFATTER-BOKS
   ============================================= */
.author-box {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--color-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  margin: var(--space-12) 0;
}

.author-box__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.author-box__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-box__name {
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}

.author-box__bio {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

@media (max-width: 639px) {
  .author-box {
    flex-direction: column;
    gap: var(--space-4);
  }
}
/* =============================================================================
   FORMULARER
   ============================================================================= */

/* Fælles input-styles */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  appearance: none;
  -webkit-appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-secondary-10);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-light);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
  cursor: pointer;
}

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* Fejlstilstand */
.has-error input,
.has-error textarea,
.has-error select,
input.is-invalid,
textarea.is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.field-error {
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* =============================================
   KOMMENTAR-FORMULAR
   ============================================= */
.comment-form {
  padding: var(--space-8);
  background: var(--color-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
}

.comment-form .comment-notes {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url,
.comment-form .comment-form-comment {
  margin-bottom: var(--space-5);
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
  display: grid;
  grid-template-columns: 1fr;
}

.comment-form p.form-submit {
  margin-bottom: 0;
}

#respond {
  margin-top: var(--space-12);
}

#respond h3 {
  margin-bottom: var(--space-6);
}

/* Kommentarliste */
.comment-list {
  list-style: none;
  margin-bottom: var(--space-12);
}

.comment-list .comment {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.comment-list .children {
  margin-left: var(--space-10);
  list-style: none;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.comment-meta .avatar {
  border-radius: var(--radius-full);
}

.comment-author {
  font-weight: var(--weight-semibold);
}

.comment-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* =============================================
   404 OG FEJLSIDER
   ============================================= */
.error-404__number {
  font-family: var(--font-heading);
  font-size: clamp(8rem, 20vw, 16rem);
  line-height: 1;
  color: var(--color-border);
  user-select: none;
}

.error-404__title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-5);
}

.error-404__links {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* =============================================
   WC NOTICES
   ============================================= */
.wc-notices-wrapper {
  padding-top: var(--space-4);
}

.wc-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: 0.95rem;
  font-weight: var(--weight-medium);
}

.wc-notice svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.wc-notice--success {
  background: var(--color-success-bg);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.wc-notice--error {
  background: var(--color-error-bg);
  color: #991b1b;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.wc-notice--info {
  background: var(--color-info-bg);
  color: #1e40af;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* =============================================
   SIDE-HEADER
   ============================================= */

/* Wrapper til brødkrumme + sidehoved (i container) */
.page-header-wrap {
  padding-top: var(--space-16);
  padding-bottom: var(--space-6);
}

/* Footer-del af blogindlæg (tags, del, forfatter) */
.post-article-footer {
  padding-top: var(--space-4);
  padding-bottom: var(--space-16);
}

.page-header {
  margin-bottom: var(--space-12);
}

.page-header__title {
  font-size: var(--text-h1);
  margin-bottom: var(--space-5);
}

.page-header__excerpt {
  color: var(--color-text-muted);
}

/* Post hero */
.post-hero {
  padding: var(--space-6) 0 var(--space-5);
}

.post-hero__topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.post-hero__topline .breadcrumbs {
  display: contents;
}

.post-hero__topline-meta::before {
  content: '·';
  color: var(--color-border);
}

.post-hero__topline-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.post-hero__title {
  font-size: var(--text-h1);
  margin: var(--space-3) 0 0;
  line-height: var(--leading-tight);
}

/* Fremhævet billede til post */
.post-featured-image {
  margin-bottom: var(--space-8);
}

.post-featured-image__img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.page-featured-image {
  margin-bottom: var(--space-10);
}

.page-featured-image__img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* Tags */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-8) 0;
}

.post-tag {
  display: inline-flex;
  padding: var(--space-1) var(--space-4);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.post-tag:hover {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent-dark);
}

/* Del */
.post-share {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.post-share__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
/* =============================================================================
   ENKELT PRODUKT-SIDE – Anew-inspireret: stort galleri, rent summary
   ============================================================================= */

/* Layout: 2-kolonne grid – galleri 57%, summary 43% */
.single-product .product {
  display: grid;
  grid-template-columns: 57fr 43fr;
  gap: var(--space-10);
  align-items: start;
  padding: var(--space-6) 0 var(--space-24);
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ======================
   GALLERI-KOLONNE
   ====================== */
.product-gallery-col {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

/* Galleri wrapper – fyld kolonnen, tving synlig (WC sætter opacity:0 inline) */
.woocommerce-product-gallery {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  opacity: 1 !important;
  position: relative;
  overflow: visible !important;
}

/* NB: Brug IKKE display:flex her — FlexSlider kræver float-baseret layout */
.woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
}

/* Pre-FlexSlider: stabiliser galleriet før FlexSlider JS kører (deferred).
   Skjul alle slides undtagen den første, lås aspect-ratio, og skjul overflow
   så der intet visuelt hop er når FlexSlider omstrukturerer DOM'en. */
.woocommerce-product-gallery__wrapper:not(.flexslider) {
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.woocommerce-product-gallery__wrapper:not(.flexslider) .woocommerce-product-gallery__image ~ .woocommerce-product-gallery__image {
  display: none;
}
/* Skjul thumbnail-nav indtil FlexSlider har init (ellers vises rå <li>'er) */
.woocommerce-product-gallery:not(:has(.flex-viewport)) .flex-control-thumbs,
.woocommerce-product-gallery:not(:has(.flex-viewport)) ol.flex-control-nav {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

/* Fade-transition ved farve-galleri-swap (deaktiveret – instant swap) */

/* Hovedbillede: transparent baggrund, afrundet, billede fylder */
.woocommerce-product-gallery__image {
  background: transparent;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  position: relative;
}

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .wp-post-image,
.woocommerce-product-gallery__image .wp-post-image {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius-2xl);
}

/* Zoom icon – placér pænt */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 5;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Thumbnails – række under hovedbilledet */
/* Override WC's float-based thumbnails + FlexSlider absolute positioning */
.woocommerce div.product div.images .flex-control-thumbs,
.woocommerce-product-gallery .flex-control-nav,
.woocommerce-product-gallery ol.flex-control-thumbs,
.flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  gap: var(--space-2) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: var(--space-3) 0 0 !important;
  position: static !important;
  width: 100% !important;
  bottom: auto !important;
  overflow: visible !important;
  zoom: normal !important;
}

.woocommerce div.product div.images .flex-control-thumbs li,
.flex-control-thumbs li {
  width: 100% !important;
  float: none !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--duration-fast);
  background: var(--color-product-bg);
  border: 2px solid transparent;
  margin: 0 !important;
  clear: none !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.flex-control-thumbs li.flex-active,
.flex-control-thumbs li:hover {
  opacity: 1;
  border-color: var(--color-text);
}

.woocommerce div.product div.images .flex-control-thumbs li img,
.flex-control-thumbs img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: inherit !important;
  margin: 0 !important;
}

/* ======================
   PRODUKT-BESKRIVELSE (under galleri)
   ====================== */
.product-gallery-description {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
}

.product-gallery-description p {
  font-size: 0.9rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.product-gallery-description p + p {
  margin-top: var(--space-3);
}

/* ======================
   SUMMARY-KOLONNE
   ====================== */
.product-summary-col {
  padding-top: var(--space-2);
}

/* Rating-række: ★★★★★ 36 anmeldelser */
.product-rating-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.product-rating-row .star-rating {
  font-size: 1rem;
}

.product-rating-text {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Titel – bold, stor, sans-serif */
.product-title,
.single-product .product_title {
  font-family: var(--font-body) !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: var(--weight-bold) !important;
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

/* Pris-række: €130 €177 Spar 26% – alt på én linje */
.product-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.product-price-row .woocommerce-Price-amount,
.single-product .product-price-row .woocommerce-Price-amount {
  font-family: var(--font-body) !important;
  font-size: 1.5rem !important;
  font-weight: var(--weight-bold) !important;
  color: var(--color-text) !important;
}

.product-price-row del .woocommerce-Price-amount,
.single-product .product-price-row del .woocommerce-Price-amount {
  font-size: 1.1rem !important;
  color: var(--color-text-light) !important;
  font-weight: var(--weight-regular) !important;
  text-decoration: line-through;
}

.product-price-row ins {
  text-decoration: none;
}

.product-price-row del {
  opacity: 0.6;
}

.product-save-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--color-cta-buy);
  color: white;
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

/* ======================
   BENEFITS CHECKMARKS
   ====================== */
.product-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.product-benefits li::before {
  content: '✅';
  font-size: 1rem;
  flex-shrink: 0;
}

/* ======================
   VARIANTER – Pill-knapper
   ====================== */
.variations_form .variations {
  width: 100%;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: var(--space-4);
}

.variations_form .variations tr {
  display: block;
  margin-bottom: var(--space-4);
}

.variations_form .variations td {
  display: block;
  padding: 0;
}

.variations_form .variations .label {
  display: block;
  padding: 0 0 var(--space-2);
}

.variations_form .variations .label label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 0.9rem;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
}

/* Pill-knapper container (JS-genereret) */
.variation-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.variation-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 12px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--duration-fast);
  background: var(--color-surface);
  text-align: center;
}

.variation-pill:hover {
  border-color: var(--color-text);
}

.variation-pill.is-active {
  border-color: var(--color-text);
  background: var(--color-text);
  color: white;
}

/* Skjul den originale select når pills er aktive */
.variations_form .variations .value.has-pills select,
.woocommerce div.product form.cart .variations .value.has-pills select {
  display: none !important;
}

/* Skjul den originale select når swatches er aktive */
.variations_form .variations .value.has-pills .variation-swatches ~ select,
.woocommerce div.product form.cart .variations .value.has-pills .variation-swatches ~ select {
  display: none !important;
}

/* ===== Farve-swatches ===== */
.variation-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.variation-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  outline: none;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.variation-swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.variation-swatch.is-active {
  border-color: var(--color-text, #1d1d1f);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-text, #1d1d1f);
}

.variation-swatch--light {
  border-color: #e0e0e0;
}

.variation-swatch--light.is-active {
  border-color: var(--color-text, #1d1d1f);
}

/* Tooltip med farvenavn */
.variation-swatch::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text, #1d1d1f);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.variation-swatch:hover::after {
  opacity: 1;
}

/* Styled dropdown for vægt/weight (ikke konverteret til pills) */
.variations_form .variations .value:not(.has-pills) select {
  width: 100% !important;
  height: 48px !important;
  padding: 10px 16px !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
}

.variations_form .variations .value:not(.has-pills) select:hover,
.variations_form .variations .value:not(.has-pills) select:focus {
  border-color: var(--color-text) !important;
  outline: none !important;
}

/* Fallback: pæne selects */
.variations_form .variations .value select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%236B7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  transition: border-color var(--duration-fast);
}

.variations_form .variations .value select:focus {
  border-color: var(--color-text);
  outline: none;
}

/* Reset link – skjult, brugeren vælger bare en anden variant */
.variations_form .reset_variations {
  display: none !important;
}

/* ======================
   STOCK STATUS
   ====================== */
.product-stock-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.product-stock-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-cta-buy);
  flex-shrink: 0;
}

/* ======================
   WEIGHT RECOMMENDATION
   ====================== */
.weight-recommendation {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  background: var(--color-background);
  border-radius: var(--radius-lg);
  margin: var(--space-3) 0 var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border-light);
}

.weight-recommendation::before {
  content: 'ⓘ';
  font-size: 1.1rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ======================
   TILFØJ TIL KURV – fuld bredde, grøn, premium
   ====================== */
.single-product .cart,
.single-product form.cart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.single-product .cart .quantity {
  display: none;
}

.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button,
.single-product .cart .button {
  width: 100%;
  background: #2F855A !important;
  border: none !important;
  color: white !important;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 1rem;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--radius-lg) !important;
  padding: 18px 32px;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  text-align: center;
}

.single-product .single_add_to_cart_button:hover {
  background: var(--color-cta-buy-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(56, 161, 105, 0.3);
}

/* ======================
   TRUST BADGES
   ====================== */
.product-trust-badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-5) 0 0;
}

.product-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.product-trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

/* ======================
   PRODUKT META – skjult (vi bruger det ikke i Anew-stil)
   ====================== */
.product_meta {
  display: none;
}

/* ======================
   UNDER-FOLD – Tabs + Relaterede (udenfor produkt-grid)
   ====================== */
.product-below-fold {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ======================
   PRODUKTFANER (tabs)
   ====================== */
.woocommerce-tabs {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-light);
}

.wc-tab-nav,
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--color-border-light);
  margin-bottom: var(--space-8);
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

.wc-tab-nav li a,
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
  text-transform: none;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  transition: color var(--duration-fast), border-color var(--duration-fast);
  white-space: nowrap;
}

.wc-tab-nav li a:hover,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--color-text);
}

.wc-tab-nav li.active a,
.woocommerce-tabs ul.tabs li.active a {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

.wc-tab:not(.active) {
  display: none;
}

.woocommerce-tabs .wc-tab {
  font-size: 0.95rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.9rem;
}

.woocommerce-product-attributes th {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-align: left;
  width: 35%;
}

.woocommerce-product-attributes td {
  color: var(--color-text-muted);
}

/* ======================
   RELATEREDE PRODUKTER
   ====================== */
.related.products {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-light);
}

.related.products > h2 {
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-8);
  text-align: center;
}

.related.products .products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-8) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Sikr korrekt vertikal layout i relaterede produkter */
.related.products .products::before,
.related.products .products::after {
  display: none !important;
}

.related.products .products li.product,
.related.products .products .product-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.related.products .product-card__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
}

.related.products .product-card__body {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width: 1023px) {
  .single-product .product {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .product-gallery-col {
    position: static;
  }
}

@media (max-width: 767px) {
  .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    width: 32px;
    height: 32px;
  }

  .product-card__no-image svg {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 767px) {
  .single-product .product {
    padding: var(--space-4) 0 var(--space-12);
  }

  .product-title,
  .single-product .product_title {
    font-size: 1.5rem;
  }

  .product-price-row .woocommerce-Price-amount,
  .single-product .product-price-row .woocommerce-Price-amount {
    font-size: 1.3rem !important;
  }

  .related.products .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
  }

  .flex-control-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* =============================================================================
   WOOCOMMERCE – Generelle overrides
   ============================================================================= */

/* ======================
   SHOP HERO
   ====================== */
.shop-hero {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: var(--space-16) 0 var(--space-12);
  background: var(--color-background);
  isolation: isolate;
}

.shop-hero__inner {
  max-width: 640px;
  margin: 0 auto;
}

.shop-hero .eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.shop-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

.shop-hero__subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ======================
   SHOP HERO – Med baggrundsbillede
   ====================== */
/* --- Hero med baggrundsbillede --- */
.shop-hero--image {
  background: none;
  padding: 0;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  text-align: left;
  position: relative;
  overflow: hidden;
}

/* Ken Burns zoom-effekt på baggrundsbilledet */
.shop-hero--image .shop-hero__bg-zoom {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  animation: heroZoom 18s ease-out forwards;
  z-index: 0;
}

@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Tyngdedyner: vis mere af billedet */
.shop-hero--tyngdedyner.shop-hero--image {
  min-height: 380px;
}
.shop-hero--tyngdedyner .shop-hero__bg-zoom {
  background-size: 100% auto;
  background-position: center 30%;
}

/* Gradient overlay */
.shop-hero--image .shop-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(8, 10, 22, 0.96) 0%,
      rgba(8, 10, 22, 0.72) 50%,
      rgba(8, 10, 22, 0.42) 100%
    );
  z-index: 1;
}

/* Tekst-container */
.shop-hero--image .shop-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: calc(var(--header-height, 80px) + var(--space-10)) var(--section-px) var(--space-10);
}

.shop-hero--image .eyebrow {
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.shop-hero--image .shop-hero__title {
  color: #fff;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.22);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.shop-hero--image .shop-hero__subtitle,
.shop-hero--image .shop-hero__subtitle p {
  color: rgba(245, 240, 232, 0.88);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  max-width: 520px;
}

.shop-hero--image .shop-hero__subtitle p:last-child {
  margin-bottom: 0;
}

/* --- Motion: fade-in med stagger --- */
@keyframes motionFade {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.motion-fade {
  opacity: 0;
  animation: motionFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--delay, 0s);
}

/* --- Scroll-reveal for produktkort --- */
.products .product.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 0.1s);
}

.products .product.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsiv mobil --- */
@media (max-width: 767px) {
  .shop-hero--image {
    min-height: 280px;
  }

  .shop-hero--image .shop-hero__inner {
    padding: calc(var(--header-height-mobile, 60px) + var(--space-6)) var(--space-4) var(--space-6);
  }

  .shop-hero--image .shop-hero__title {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }
}

/* ======================
   SHOP CONTAINER
   ====================== */
.shop-container {
  position: relative;
  z-index: 1;
  padding-top: var(--space-10);
  padding-bottom: var(--space-24);
  overflow: visible;
  clear: both;
  background: var(--color-background);
}

.shop-category-description {
  max-width: 820px;
  margin: 0 auto;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.shop-category-description--intro {
  margin-bottom: var(--space-8);
}

.shop-category-description--extended {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-light);
}

.shop-category-description > :first-child {
  margin-top: 0;
}

.shop-category-description > :last-child {
  margin-bottom: 0;
}

/* ======================
   SHOP GRID – Produktkort
   ====================== */
.shop-grid.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  clear: both;
}

/* Forhindr WooCommerce::before/::after clearfix fra at bryde grid */
.shop-grid.products::before,
.shop-grid.products::after {
  display: none !important;
}

/* Overskriv WooCommerce default float-baseret layout GLOBALT */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
}

.shop-grid .product-card,
.shop-grid li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  list-style: none;
}

@media (max-width: 1023px) {
  .shop-grid.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 639px) {
  .shop-grid.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
    max-width: 400px;
    margin: 0 auto !important;
  }
}

/* Legacy grid (fallback) */
.wc-products-grid.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 1023px) {
  .wc-products-grid.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .wc-products-grid.products {
    grid-template-columns: 1fr;
  }
}

/* Fjern WooCommerce standard styling */
.woocommerce-notices-wrapper { margin-bottom: var(--space-6); }
.woocommerce-breadcrumb { display: none; }

/* Produkt-trust badges – se _product.css for styling */

/* Antal-stepper */
.woocommerce .quantity {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qty-btn {
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background);
  border: none;
  cursor: pointer;
  color: var(--color-text);
  transition: background var(--duration-fast);
  flex-shrink: 0;
}

.qty-btn:hover:not(:disabled) {
  background: var(--color-accent);
  color: var(--color-primary);
}

.qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.woocommerce .quantity input[type="number"] {
  width: 56px;
  border: none;
  border-radius: 0;
  text-align: center;
  font-weight: var(--weight-semibold);
  padding: 0;
  height: 44px;
  -moz-appearance: textfield;
}

.woocommerce .quantity input[type="number"]::-webkit-outer-spin-button,
.woocommerce .quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Stjerner – proper star display */
.star-rating {
  position: relative;
  display: inline-block;
  font-size: 0.85rem;
  line-height: 1;
  width: 5.2em;
  height: 1em;
  overflow: hidden;
  color: var(--color-star);
  font-family: 'star';
}

.star-rating::before {
  content: '\e020\e020\e020\e020\e020';
  color: var(--color-border-light);
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  letter-spacing: 0.1em;
}

.star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em;
}

.star-rating span::before {
  content: '\e020\e020\e020\e020\e020';
  top: 0;
  position: absolute;
  left: 0;
  color: var(--color-star);
  letter-spacing: 0.1em;
}

/* Fallback: use unicode stars if WC star font not loaded */
@supports not (font-family: 'star') {
  .star-rating {
    font-family: inherit;
    letter-spacing: 2px;
  }
  .star-rating::before {
    content: '★★★★★';
    letter-spacing: 2px;
  }
  .star-rating span::before {
    content: '★★★★★';
    letter-spacing: 2px;
  }
}

/* Hide WC default sale flash */
.woocommerce span.onsale {
  display: none !important;
}

/* Hide "Rated X out of 5" screen reader text visually */
.star-rating .rating,
.star-rating strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* WC photoswipe zoom icon – cleaner */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  z-index: 5;
}

/* FlexSlider overrides – thumbnails under product image, not overlapping */
.woocommerce-product-gallery .flex-viewport {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.woocommerce-product-gallery .flex-control-nav {
  position: static !important;
  bottom: auto !important;
  width: 100% !important;
}

.woocommerce-product-gallery .flex-direction-nav {
  display: none;
}

/* Kategori-filter (erstatter sortering) */
.rolig-category-filter {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rolig-cat-btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 1.5px solid var(--color-border, #ddd);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text, #333);
  text-decoration: none;
  transition: all 0.2s ease;
  background: #fff;
}

.rolig-cat-btn:hover {
  border-color: var(--color-primary, #1a3a4a);
  color: var(--color-primary, #1a3a4a);
}

.rolig-cat-btn--active {
  background: var(--color-primary, #1a3a4a);
  border-color: var(--color-primary, #1a3a4a);
  color: #fff;
}

.rolig-cat-btn--active:hover {
  color: #fff;
}

/* Resultat-tæller */
.woocommerce .woocommerce-result-count {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Shop banner/header – skjul WC default */
.woocommerce-products-header,
.woocommerce-products-header__title {
  display: none !important;
}

.wc-main-content {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-px);
  padding-right: var(--section-px);
  padding-top: var(--space-10);
  padding-bottom: var(--space-16);
}

body.woocommerce-cart .block-content {
  max-width: var(--container-max);
  padding-left: 0;
  padding-right: 0;
}

body.woocommerce-cart .page-hero__content {
  max-width: var(--container-max);
  padding-left: var(--section-px);
  padding-right: var(--section-px);
}

body.woocommerce-checkout .block-content,
body.woocommerce-checkout .page-hero__content,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
  max-width: var(--container-max);
}

body.woocommerce-checkout .wp-block-woocommerce-checkout {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Sidepaginering til shop */
.woocommerce nav.woocommerce-pagination {
  margin-top: var(--space-16);
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: none;
  transition: all var(--duration-fast);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* My Account */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  padding-top: var(--space-16);
  padding-bottom: var(--space-24);
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
  content: none !important;
  display: none !important;
}

.woocommerce-MyAccount-navigation {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  align-self: start;
  width: 100%;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
}

.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--color-border-light);
}

.woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--space-4) var(--space-5);
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-accent);
  color: var(--color-primary);
}

.woocommerce-MyAccount-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  min-width: 0;
  width: 100%;
}

.woocommerce-MyAccount-content > :first-child {
  margin-top: 0;
}

.woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-MyAccount-content .woocommerce-account-fields,
.woocommerce-MyAccount-content .woocommerce-form,
.woocommerce-MyAccount-content form {
  display: grid;
  gap: var(--space-5);
}

.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
.woocommerce-MyAccount-content fieldset {
  display: grid;
  gap: var(--space-5);
  border: 0;
  padding: 0;
  margin: 0;
}

.woocommerce-MyAccount-content legend {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.woocommerce-MyAccount-content .form-row {
  margin-bottom: 0;
}

.woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-MyAccount-content .woocommerce-column--address {
  background: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content .woocommerce-table,
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-MyAccount-content .woocommerce-orders-table td,
.woocommerce-MyAccount-content .woocommerce-table th,
.woocommerce-MyAccount-content .woocommerce-table td,
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  text-align: left;
}

.woocommerce-MyAccount-content .woocommerce-orders-table tr:last-child td,
.woocommerce-MyAccount-content .woocommerce-table tr:last-child td,
.woocommerce-MyAccount-content table.shop_table tr:last-child td {
  border-bottom: none;
}

.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
  margin: 0 0 var(--space-5);
  border-radius: var(--radius-lg);
}

.account-empty-state {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  min-height: 280px;
  align-content: center;
}

.account-empty-state h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
}

.account-empty-state p {
  margin: 0;
  max-width: 48ch;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
  }

  .woocommerce-MyAccount-navigation {
    position: static;
  }

  .woocommerce-MyAccount-content {
    padding: var(--space-5);
  }
}

/* =============================================================================
   KURV (CART)
   ============================================================================= */

.woocommerce-cart-page {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-12);
  align-items: start;
  padding: var(--space-12) 0;
}

@media (max-width: 1023px) {
  .woocommerce-cart-page {
    grid-template-columns: 1fr;
  }
}

.cart-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.shop_table {
  width: 100%;
  border-collapse: collapse;
}

.shop_table th {
  text-align: left;
  padding: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
}

.shop_table td {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.shop_table .product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.shop_table .product-name a {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.shop_table .product-name a:hover {
  color: var(--color-primary);
}

.shop_table .product-remove .remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.shop_table .product-remove .remove:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* Kurv-handlinger */
.cart-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
}

.coupon-row {
  display: flex;
  gap: var(--space-3);
}

.coupon-row input {
  width: 200px;
}

/* Kurv-totaler */
.cart-totals-wrap {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
}

.cart_totals {
  background: var(--color-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  padding: var(--space-8);
}

.cart_totals h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}

.cart_totals table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}

.cart_totals table th,
.cart_totals table td {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.95rem;
}

.cart_totals table th {
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-align: left;
  width: 40%;
}

.cart_totals table .order-total th,
.cart_totals table .order-total td {
  font-size: var(--text-md);
  border-bottom: none;
  padding-top: var(--space-4);
}

.wc-proceed-to-checkout {
  margin-top: var(--space-4);
}

.wc-proceed-to-checkout .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 2rem;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  text-decoration: none;
  transition: background var(--duration-base);
  gap: var(--space-2);
}

.wc-proceed-to-checkout .checkout-button:hover {
  background: var(--color-primary-light);
}

/* =============================================================================
   MINI-KURV
   ============================================================================= */

.mini-cart__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}

.mini-cart__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12);
  text-align: center;
  color: var(--color-text-muted);
}

.mini-cart__empty svg {
  color: var(--color-border);
}

.mini-cart__products {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: var(--space-4) 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

.mini-cart__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

.mini-cart__item:last-child {
  border-bottom: none;
}

.mini-cart__item-image img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

.mini-cart__item-name {
  display: block;
  font-size: 0.9rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.mini-cart__item-name:hover {
  color: var(--color-primary);
}

.mini-cart__item-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.mini-cart__item-qty {
  margin-right: var(--space-1);
}

.mini-cart__item-price {
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.mini-cart__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  transition: background var(--duration-fast), color var(--duration-fast);
  flex-shrink: 0;
}

.mini-cart__remove:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.mini-cart__footer {
  border-top: 2px solid var(--color-border-light);
  padding: var(--space-6);
  background: var(--color-background);
}

.mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  font-size: var(--text-md);
}

.mini-cart__total strong {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.mini-cart__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.mini-cart__shipping-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  text-align: center;
}

.mini-cart__shipping-note svg {
  flex-shrink: 0;
}

/* =============================================================================
   BETALING (CHECKOUT)
   ============================================================================= */

.woocommerce-checkout-page {
  padding: var(--space-16) 0 var(--space-20);
}

/* Trin-indikator */
.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-16);
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast), opacity var(--duration-fast);
}

.checkout-step:disabled {
  cursor: default;
  opacity: 0.5;
}

.checkout-step:not(:disabled):hover {
  background: var(--color-background);
}

.checkout-step__num {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: #e5e7eb;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
  transition: all var(--duration-base) var(--ease-out);
}

.checkout-step--active .checkout-step__num {
  background: #1d1d1f;
  color: white;
}

.checkout-step__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #9ca3af;
  letter-spacing: -0.01em;
}

.checkout-step--active .checkout-step__label {
  color: #1d1d1f;
  font-weight: var(--weight-semibold);
}

/* Completed step */
.checkout-step--completed .checkout-step__num {
  background: var(--color-success);
  color: white;
}

.checkout-step--completed .checkout-step__label {
  color: var(--color-success);
}

.checkout-step__divider {
  width: 40px;
  min-width: 24px;
  height: 2px;
  background: #e5e7eb;
  margin: 0 var(--space-2);
  border-radius: 2px;
  transition: background var(--duration-base);
  flex-shrink: 0;
}

.checkout-step__divider--active {
  background: var(--color-success);
}

/* Wizard step sections */
.checkout-wizard__step {
  position: relative;
}

.checkout-wizard__step.checkout-wizard__step--active {
  position: static;
  left: auto;
  visibility: visible;
  pointer-events: auto;
  height: auto;
  overflow: visible;
  animation: wizardFadeIn 0.35s ease-out;
}

.checkout-wizard__step:not(.checkout-wizard__step--active) {
  position: absolute;
  left: -9999px;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

@keyframes wizardFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.checkout-wizard__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.4rem !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: -0.02em !important;
  color: #1d1d1f !important;
  margin-bottom: var(--space-10) !important;
}

.checkout-wizard__heading svg {
  color: #6b7280;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.checkout-wizard__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid #f0f0f0;
}

.checkout-wizard__nav .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Apple-inspired checkout form fields */
.woocommerce-checkout-page input[type="text"],
.woocommerce-checkout-page input[type="email"],
.woocommerce-checkout-page input[type="tel"],
.woocommerce-checkout-page input[type="number"],
.woocommerce-checkout-page input[type="password"],
.woocommerce-checkout-page select,
.woocommerce-checkout-page textarea {
  height: 52px !important;
  padding: 14px 18px !important;
  font-size: 1rem !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #1d1d1f !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce-checkout-page textarea {
  height: auto !important;
  min-height: 100px !important;
}

.woocommerce-checkout-page input:focus,
.woocommerce-checkout-page select:focus,
.woocommerce-checkout-page textarea:focus {
  border-color: #1d1d1f !important;
  box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.08) !important;
  outline: none !important;
}

.woocommerce-checkout-page input::placeholder,
.woocommerce-checkout-page textarea::placeholder {
  color: #9ca3af !important;
}

/* WooCommerce form row spacing */
.woocommerce-checkout-page .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout-page .woocommerce-shipping-fields__field-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.woocommerce-checkout-page .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout-page .woocommerce-shipping-fields__field-wrapper .form-row {
  margin: 0 !important;
  padding: 0 !important;
}

/* Labels */
.woocommerce-checkout-page .form-row label {
  font-size: 0.875rem !important;
  font-weight: var(--weight-medium) !important;
  color: #374151 !important;
  margin-bottom: var(--space-2) !important;
  letter-spacing: -0.01em;
}

/* Checkout-specific buttons */
.woocommerce-checkout-page .btn--primary {
  height: 52px;
  border-radius: 12px;
  background: #1d1d1f;
  border-color: #1d1d1f;
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  text-transform: none;
  transition: all 0.2s ease;
}

.woocommerce-checkout-page .btn--primary:hover {
  background: #2d2d2f;
  border-color: #2d2d2f;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29, 29, 31, 0.15);
}

.woocommerce-checkout-page .btn--outline {
  height: 52px;
  border-radius: 12px;
  border: 1.5px solid #e5e7eb;
  color: #374151;
  font-size: 0.95rem;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  text-transform: none;
  background: #fff;
}

.woocommerce-checkout-page .btn--outline:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

/* Review section (step 4) */
.checkout-wizard__review {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.checkout-review-section {
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  padding: var(--space-6) var(--space-8);
  position: relative;
}

.checkout-review-section h4 {
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  margin: 0 0 var(--space-4);
}

.checkout-review-details p {
  margin: 0 0 var(--space-1);
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.6;
}

.checkout-review-edit {
  position: absolute;
  top: var(--space-6);
  right: var(--space-8);
  background: none;
  border: none;
  color: #1d1d1f;
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
  opacity: 0.5;
}

.checkout-review-edit:hover {
  opacity: 1;
}

/* Place order section */
.checkout-wizard__place-order {
  margin-top: var(--space-8);
}

.checkout-wizard__place-order .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: 1.05rem;
  height: 56px;
}

.checkout-wizard__terms-note {
  font-size: 0.8rem;
  color: #9ca3af;
  text-align: center;
  margin-top: var(--space-4);
  line-height: 1.5;
}

/* Hide TOC on checkout page */
.woocommerce-checkout-page .toc {
  display: none !important;
}

/* Hide WooCommerce default place order in wizard (it's in #order_review) */
.checkout-wizard__step[data-step="3"] #place_order {
  display: none;
}

/* ============================================================
   WIZARD STEP 3 – Stripe-inspireret checkout
   ============================================================ */

/* Hide the product rows + thead in the WC order review table */
.checkout-wizard__step[data-step="3"] .woocommerce-checkout-review-order-table thead,
.checkout-wizard__step[data-step="3"] .woocommerce-checkout-review-order-table tbody .cart_item {
  display: none !important;
}

/* Clean totals table */
.checkout-wizard__step[data-step="3"] .woocommerce-checkout-review-order-table {
  border: none !important;
  margin: 0 0 var(--space-6) !important;
  background: none !important;
  border-collapse: collapse !important;
}

.checkout-wizard__step[data-step="3"] .woocommerce-checkout-review-order-table tfoot th,
.checkout-wizard__step[data-step="3"] .woocommerce-checkout-review-order-table tfoot td {
  background: none !important;
  border: none !important;
  border-bottom: none !important;
  padding: var(--space-2) 0 !important;
  font-size: 0.9rem !important;
  color: var(--color-text) !important;
  font-weight: var(--weight-normal) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.checkout-wizard__step[data-step="3"] .woocommerce-checkout-review-order-table tfoot td {
  text-align: right !important;
  color: var(--color-text-muted) !important;
}

.checkout-wizard__step[data-step="3"] .woocommerce-checkout-review-order-table tfoot .order-total th,
.checkout-wizard__step[data-step="3"] .woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: 1.05rem !important;
  font-weight: var(--weight-bold) !important;
  color: var(--color-text) !important;
  padding-top: var(--space-3) !important;
  border-top: 1px solid var(--color-border-light) !important;
}

/* Wrap totals in a clean card */
.checkout-wizard__step[data-step="3"] .woocommerce-checkout-review-order {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-8);
}

/* Payment section inside step 3 */
.checkout-wizard__step[data-step="3"] .woocommerce-checkout-payment {
  padding-top: var(--space-4);
}

/* Clean Stripe-like payment area – remove WooCommerce purple tints */
.checkout-wizard__step[data-step="3"] #payment,
.checkout-wizard__step[data-step="3"] .woocommerce-checkout-payment {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.checkout-wizard__step[data-step="3"] .wc_payment_methods .payment_box {
  background: #fff !important;
  border-top: 1px solid #f0f0f0 !important;
  padding: 20px 24px !important;
  border-radius: 0 0 12px 12px !important;
}

/* Hide the triangle/arrow pseudo-element above payment box */
.wc_payment_methods .payment_box::before {
  display: none !important;
}

/* Stripe saved payment methods list */
.checkout-wizard__step[data-step="3"] .wc-saved-payment-methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--space-4) !important;
}

/* Place order area inside #payment — hide in step 3 */
.checkout-wizard__step[data-step="3"] #payment .place-order {
  background: none !important;
  padding: 0 !important;
}

/* Stripe UPE element — clean container */
.checkout-wizard__step[data-step="3"] .wc-upe-form,
.checkout-wizard__step[data-step="3"] #wc-stripe-upe-form {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

/* Stripe fieldset borders */
.checkout-wizard__step[data-step="3"] .payment_box fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide Stripe cards icon bar in payment method label */
.wc_payment_methods .wc_payment_method label .stripe-cards-icon,
.wc_payment_methods .wc_payment_method label .stripe-icon {
  display: none !important;
}

/* Save payment checkbox – proper size */
.payment_box .woocommerce-SavedPaymentMethods-saveNew {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  margin: var(--space-4) 0 0 !important;
  padding: 0 !important;
}

.payment_box .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  border-radius: 4px !important;
  border: 1.5px solid #d1d5db !important;
  cursor: pointer !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
}

.payment_box .woocommerce-SavedPaymentMethods-saveNew label {
  font-size: 0.85rem !important;
  color: #6b7280 !important;
  font-weight: var(--weight-regular) !important;
  padding: 0 !important;
  min-height: auto !important;
  cursor: pointer !important;
}

/* "Gem betalingsoplysninger" fieldset */
.payment_box > fieldset:not(.wc-upe-form) {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  margin-top: var(--space-4) !important;
}

.payment_box > fieldset:not(.wc-upe-form) input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
}

.payment_box > fieldset:not(.wc-upe-form) label {
  font-size: 0.85rem !important;
  color: #6b7280 !important;
  font-weight: var(--weight-regular) !important;
  padding: 0 !important;
  min-height: auto !important;
}

/* Hide privacy/terms in step 3 – moved to step 4 via JS */
.checkout-wizard__step[data-step="3"] .woocommerce-privacy-policy-text,
.checkout-wizard__step[data-step="3"] .woocommerce-terms-and-conditions-wrapper {
  display: none !important;
}

/* Hide verbose privacy policy text everywhere in wizard */
.checkout-wizard__place-order .woocommerce-privacy-policy-text {
  display: none;
}

/* Terms checkbox in step 4 */
.checkout-wizard__place-order .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: var(--space-5);
}

.checkout-wizard__place-order .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0;
  padding: 0;
}

.checkout-wizard__place-order .woocommerce-terms-and-conditions-checkbox-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Payment methods – single column in wizard for cleaner look */
.checkout-wizard__step[data-step="3"] .wc_payment_methods.payment_methods {
  grid-template-columns: 1fr !important;
  gap: var(--space-3) !important;
}

/* ============================================================
   WIZARD STEP 3 – Produktkort
   ============================================================ */
.wizard-products {
  margin-bottom: var(--space-8);
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
}

.wizard-products__title {
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid #f0f0f0;
}

.wizard-product-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid #f0f0f0;
}

.wizard-product-card:last-child {
  border-bottom: none;
}

.wizard-product-card__img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f0f0f0;
}

.wizard-product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wizard-product-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wizard-product-card__name {
  font-weight: var(--weight-medium);
  font-size: 0.95rem;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}

.wizard-product-card__meta {
  font-size: 0.8rem;
  color: #9ca3af;
}

.wizard-product-card__qty {
  font-size: 0.8rem;
  color: #9ca3af;
}

.wizard-product-card__price {
  flex-shrink: 0;
  font-weight: var(--weight-semibold);
  font-size: 0.95rem;
  color: #1d1d1f;
  white-space: nowrap;
}

/* Layout */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-16);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

@media (max-width: 1023px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

.checkout-form-col {
  max-width: 640px;
}

.checkout-form-col h3 {
  font-size: 1.2rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: #374151;
  margin-bottom: var(--space-6);
}

/* Ordre-oversigt (sticky kolonne) */
.checkout-order-summary {
  background: #fafafa;
  border-radius: 16px;
  border: 1px solid #f0f0f0;
  padding: var(--space-8) var(--space-8) var(--space-6);
  position: sticky;
  top: calc(var(--header-height) + var(--space-8));
}

.checkout-order-summary__title {
  font-size: 1.1rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin-bottom: var(--space-6);
}

.checkout-order-item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
  gap: var(--space-4);
}

.checkout-order-item:last-child {
  border-bottom: none;
}

.checkout-order-item__name {
  flex: 1;
  color: #374151;
  line-height: 1.5;
}

.checkout-order-item__qty {
  color: #9ca3af;
  margin-left: var(--space-2);
}

.checkout-order-item__price {
  font-weight: var(--weight-semibold);
  color: #1d1d1f;
  white-space: nowrap;
}

.checkout-order-totals {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid #e5e7eb;
}

.checkout-order-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: 0.9rem;
  color: #6b7280;
}

.checkout-order-total-row--discount {
  color: var(--color-success);
}

.checkout-order-total-row--total {
  font-size: 1.1rem;
  color: #1d1d1f;
  padding-top: var(--space-4);
  margin-top: var(--space-3);
  border-top: 1.5px solid #e5e7eb;
}

/* Trust-badges under ordre-oversigt */
.checkout-trust-badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid #f0f0f0;
}

.checkout-trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8rem;
  color: #9ca3af;
}

.checkout-trust-badge svg {
  color: #9ca3af;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* ======================
   BETALINGSMETODER – Firkant-kort layout
   ====================== */

/* Skjul Stripe test mode besked */
.testmode-info,
.payment_box .testmode-info,
#payment .testmode-info {
  display: none !important;
}

/* Betalingsmuligheder heading – mere luft */
#payment .woocommerce-checkout-payment > h3,
.checkout-wizard__step[data-step="3"] .checkout-wizard__heading,
#order_review_heading {
  margin-bottom: var(--space-10);
}

/* Betalingsmetoder som firkant-kort grid */
.wc_payment_methods.payment_methods {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--space-6) !important;
}

@media (max-width: 639px) {
  .wc_payment_methods.payment_methods {
    grid-template-columns: 1fr;
  }
}

/* Hvert betalingsmetode-kort */
.wc_payment_methods .wc_payment_method {
  position: relative;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  overflow: hidden;
}

.wc_payment_methods .wc_payment_method:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Valgt betalingsmetode */
.wc_payment_methods .wc_payment_method:has(input:checked),
.wc_payment_methods .wc_payment_method.wc_payment_method--selected {
  border-color: #1d1d1f;
  background: #fafafa;
  box-shadow: 0 0 0 1px #1d1d1f;
}

/* Skjul standard radio button */
.wc_payment_methods .wc_payment_method > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Label som klikbart kort-indhold */
.wc_payment_methods .wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5);
  cursor: pointer;
  font-weight: var(--weight-medium);
  font-size: 0.95rem;
  color: var(--color-text);
  margin: 0;
  min-height: 64px;
}

.wc_payment_methods .wc_payment_method > label img {
  height: 24px;
  width: auto;
  flex-shrink: 0;
}

/* Custom radio-indikator */
.wc_payment_methods .wc_payment_method > label::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.wc_payment_methods .wc_payment_method:has(input:checked) > label::before {
  border-color: #1d1d1f;
  background: #1d1d1f;
  box-shadow: inset 0 0 0 3px white;
}

/* Payment box (Stripe Elements osv.) – vises under kortet */
.wc_payment_methods .wc_payment_method .payment_box {
  padding: 20px 24px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
  border-radius: 0 0 12px 12px;
}

/* Stripe UPE element container */
.wc_payment_methods .wc-upe-form {
  border: none;
  padding: 0;
  margin: 0;
}

/* WooCommerce checkout felter */
.woocommerce-checkout-page .woocommerce-billing-fields h3,
.woocommerce-checkout-page .woocommerce-shipping-fields h3 {
  font-size: 1.1rem !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: -0.02em !important;
  color: #374151 !important;
  margin-bottom: var(--space-8) !important;
}

.woocommerce-input-wrapper {
  width: 100%;
}

/* =============================================================================
   TAK-SIDE (ORDER CONFIRMATION)
   ============================================================================= */

.woocommerce-order-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-16) 0;
  text-align: center;
}

.thankyou-hero {
  margin-bottom: var(--space-12);
}

.thankyou-icon {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: var(--color-success-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  color: var(--color-success);
}

.thankyou-title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-4);
}

.thankyou-subtitle {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 500px;
  margin: 0 auto;
}

.thankyou-order-info {
  background: var(--color-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  text-align: left;
}

.thankyou-order-details {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-8);
}

@media (max-width: 639px) {
  .thankyou-order-details {
    grid-template-columns: 1fr;
  }
}

.thankyou-order-details li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.thankyou-order-details strong {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.thankyou-details {
  text-align: left;
  margin-bottom: var(--space-12);
}

.thankyou-details h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}

.thankyou-cta {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* =============================================================================
   KONTAKTSIDE
   ============================================================================= */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-16);
  align-items: start;
}

@media (max-width: 1023px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 639px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.contact-info {
  background: var(--color-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
}

.contact-info__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-info__heading {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-family: var(--font-body);
  margin: 0;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
}

.contact-info__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-info__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-text);
}

.contact-info__list li svg {
  color: var(--color-secondary);
  flex-shrink: 0;
}

.contact-info__list a {
  color: var(--color-text);
}

.contact-info__list a:hover {
  color: var(--color-primary);
}

.contact-info__hours {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-info__hours li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
}

.contact-info__hours li:last-child {
  border-bottom: none;
}

/* =============================================================================
   KURV-SIDE PAGE WRAPPER
   ============================================================================= */

.woocommerce-page .woocommerce:not(.woocommerce-cart-page):not(.woocommerce-checkout-page):not(.woocommerce-order-page) {
  padding: var(--space-8) 0;
}

/* Shop-side: fjern ekstra padding fra site-main wrapper */
.site-main.woocommerce-page {
  padding: 0;
  margin: 0;
}

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.shop-toolbar .woocommerce-result-count {
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.shop-toolbar .woocommerce-ordering select {
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  background: var(--color-surface);
  min-width: 180px;
  transition: border-color var(--duration-fast);
}

.shop-toolbar .woocommerce-ordering select:focus {
  border-color: var(--color-primary);
  outline: none;
}

@media (max-width: 639px) {
  .shop-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .shop-toolbar .woocommerce-result-count {
    text-align: center;
  }

  .shop-toolbar .woocommerce-ordering {
    margin: 0;
  }

  .shop-toolbar .woocommerce-ordering select {
    width: 100%;
    min-width: unset;
  }

  .shop-hero__subtitle {
    padding: 0 var(--space-4);
  }
}

.shop-pagination {
  margin-top: var(--space-12);
}
/* =============================================================================
   DYNAMISKE KOMPONENTER
   Pexels-billeder, genvejskoder (shortcodes) og animerede elementer.
   ============================================================================= */

/* =============================================
   PEXELS – Billedattribuering
   ============================================= */

/* Generisk Pexels-figur (bruges i why-section m.fl.) */
.why-block__pexels-figure {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

.why-block__pexels-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pexels-figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.pexels-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Kreditering under billede */
.pexels-credit {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-align: right;
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.pexels-credit a {
  color: var(--color-secondary);
  text-decoration: none;
}

.pexels-credit a:hover {
  text-decoration: underline;
}

/* Kreditering oven på hero-billede */
.pexels-hero-credit {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-4);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  letter-spacing: 0.03em;
  z-index: 5;
  transition: color var(--duration-fast);
}

.pexels-hero-credit:hover {
  color: #fff;
}

/* Placeholder-boks */
.why-block__image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* =============================================
   [pexels_gallery] – Gallerigitter
   ============================================= */

.pexels-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-10) 0;
}

.pexels-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pexels-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }

.pexels-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  aspect-ratio: 3 / 4;
  margin: 0;
}

.pexels-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.pexels-gallery__item:hover img {
  transform: scale(1.05);
}

.pexels-gallery__item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.62rem;
  opacity: 0;
  transition: opacity var(--duration-base);
}

.pexels-gallery__item:hover figcaption {
  opacity: 1;
}

@media (max-width: 768px) {
  .pexels-gallery { grid-template-columns: repeat(2, 1fr); }
  .pexels-gallery--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .pexels-gallery,
  .pexels-gallery--cols-2,
  .pexels-gallery--cols-4 { grid-template-columns: 1fr; }
}

/* =============================================
   [vaegt_guide] – Vægtvælger / sliderberegner
   ============================================= */

.weight-guide {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  margin: var(--space-10) 0;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--shadow-sm);
}

.weight-guide__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  text-align: center;
}

.weight-guide__subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-8);
}

.weight-guide__input-group {
  margin-bottom: var(--space-6);
}

.weight-guide__input-group label {
  display: block;
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.weight-guide__slider-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Range-slider */
.weight-guide__slider-wrap input[type="range"] {
  -webkit-appearance: none;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--color-secondary) 0%,
    var(--color-secondary) 50%,
    var(--color-border) 50%,
    var(--color-border) 100%
  );
  outline: none;
  cursor: pointer;
  margin: 0;
}

.weight-guide__slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: grab;
  transition: transform var(--duration-fast);
}

.weight-guide__slider-wrap input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
}

.weight-guide__slider-wrap input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  cursor: grab;
}

.weight-guide__output {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  min-width: 56px;
  text-align: right;
  white-space: nowrap;
}

/* Anbefalet-boks */
.weight-guide__result {
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-6);
}

.weight-guide__result-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.weight-guide__result-label {
  font-size: var(--text-sm);
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.weight-guide__result-value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.weight-guide__result-desc {
  font-size: var(--text-sm);
  opacity: 0.8;
  margin: 0;
  min-height: 1.4em;
}

/* Muligheder-grid */
.weight-guide__options {
  margin-top: var(--space-4);
}

.weight-guide__options-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
}

.weight-guide__options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-3);
}

.weight-guide__option {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3);
  text-align: center;
  background: var(--color-surface);
  transition: all var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weight-guide__option--recommended {
  border-color: var(--color-secondary);
  background: var(--color-accent);
}

.weight-guide__option-weight {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  display: block;
}

.weight-guide__option-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  display: block;
}

.weight-guide__option-badge {
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-top: var(--space-1);
}

/* =============================================
   [sovn_stats] – Animerede tæller-statistikker
   ============================================= */

.sovn-stats {
  padding: var(--space-16) var(--space-6);
  background: var(--color-primary);
  color: #fff;
  text-align: center;
}

.sovn-stats__title {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-10);
}

.sovn-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
}

.sovn-stats__item {
  padding: var(--space-6);
}

.sovn-stats__number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.sovn-stats__count {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-slow);
}

.sovn-stats__suffix {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
  line-height: 1;
}

.sovn-stats__label {
  display: block;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.sovn-stats__desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* =============================================
   [sammenligning_tabel] – Sammenligningsskema
   ============================================= */

.comparison-table {
  overflow-x: auto;
  margin: var(--space-10) 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  position: relative;
  padding-top: var(--space-4); /* plads til "Anbefalet"-badge */
}

.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  font-size: 0.9rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-4) var(--space-5);
  text-align: center;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.comparison-table thead th {
  background: var(--color-primary);
  color: #fff;
  font-weight: var(--weight-semibold);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: none;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.comparison-table thead th:first-child {
  text-align: left;
}

/* Fremhævet kolonne (vores produkt) */
.comparison-table__highlight {
  background: var(--color-accent) !important;
}

.comparison-table thead th.comparison-table__highlight {
  background: var(--color-secondary) !important;
  color: #fff;
  position: relative;
}

/* Badge "Anbefalet" over den fremhævede kolonne */
.comparison-table thead th.comparison-table__highlight::before {
  content: 'Anbefalet';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-secondary);
  color: #fff;
  font-size: 0.62rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Første kolonne – egenskabslabels */
.comparison-table td:first-child {
  text-align: left;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* Checkmark */
.comparison-table__check span {
  font-size: 1.1rem;
  color: var(--color-secondary);
}

.comparison-table__check span.no {
  color: var(--color-border);
}

/* Zebra-striber */
.comparison-table tbody tr:nth-child(even) td:not(.comparison-table__highlight) {
  background: var(--color-background);
}

/* Hover */
.comparison-table tbody tr:hover td {
  background: var(--color-accent);
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

/* =============================================
   AUTO-BILLEDER I INDHOLD (.content-pexels-image)
   Billeder injiceret automatisk pr. ~1000 ord via the_content-filter.
   ============================================= */

.content-pexels-image {
  margin: var(--space-12) 0;
  display: block;
}

/* alignwide: breder end prose (680px), men respekterer containeren */
.block-content .content-pexels-image.alignwide,
.entry-content .content-pexels-image.alignwide,
.content-pexels-image.alignwide {
  max-width: min(1100px, 100vw);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.content-pexels-image img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.content-pexels-image .pexels-credit {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  margin-top: -4px; /* smitter til billedet */
}

@media (max-width: 768px) {
  .content-pexels-image img {
    height: 260px;
    border-radius: var(--radius-lg);
  }
}

/* =============================================
   FAQ ACCORDION
   Genereret af inc/content-enhance.php – toggled af main.js initAccordion()
   ============================================= */

.faq-accordion {
  margin: var(--space-8) 0 var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.faq-item {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}

.faq-item:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-sm);
}

.faq-item.is-open {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  transition: background var(--duration-base), color var(--duration-base);
  line-height: var(--leading-snug);
}

.faq-question span {
  flex: 1;
}

.faq-question:hover {
  background: var(--color-accent);
  color: var(--color-primary);
}

.faq-item.is-open .faq-question {
  background: var(--color-accent);
  color: var(--color-primary);
}

.faq-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-secondary);
  transition: transform 0.35s var(--ease-out);
}

.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
}

/* Svarpanel – max-height styres af JS (main.js initAccordion) */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}

.faq-answer > * {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.faq-answer p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.faq-answer p:last-child {
  margin-bottom: var(--space-5);
}

/* =============================================
   CALLOUT BOKSE (fra <blockquote>)
   ============================================= */

.content-callout {
  position: relative;
  background: var(--color-accent);
  border-left: 4px solid var(--color-secondary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-6) var(--space-8) var(--space-6) var(--space-10);
  margin: var(--space-8) 0;
}

/* Citationstegn-ikon */
.content-callout::before {
  content: '\201C'; /* " */
  font-family: var(--font-accent);
  font-size: 4.5rem;
  color: var(--color-secondary);
  opacity: 0.25;
  position: absolute;
  top: -0.25rem;
  left: var(--space-4);
  line-height: 1;
  pointer-events: none;
}

.content-callout p,
.content-callout cite {
  margin: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-primary);
  line-height: var(--leading-relaxed);
}

.content-callout cite,
.content-callout footer {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-style: normal;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.content-callout cite::before,
.content-callout footer::before {
  content: '— ';
}

/* Tip-boks variant (grøn venstre kant) */
.content-callout.is-tip {
  border-left-color: var(--color-success);
  background: var(--color-success-bg);
}

.content-callout.is-tip::before {
  content: '💡';
  font-size: 1.8rem;
  opacity: 1;
  top: var(--space-4);
}

/* Info-boks variant (blå venstre kant) */
.content-callout.is-info {
  border-left-color: var(--color-info);
  background: var(--color-info-bg);
}

/* =============================================
   LEAD-PARAGRAF (første <p> efter <h2>)
   ============================================= */

.content-lead {
  font-size: 1.15rem;
  line-height: var(--leading-relaxed);
  color: var(--color-secondary-dark);
  margin-bottom: var(--space-6);
}

/* =============================================
   HEADING-STYLING I INDHOLD
   Dekorativ understreg på h2, icon-prefix på h3
   ============================================= */

/* Apple-stil: store, centrerede h2 med subtil accent */
.entry-content h2,
.block-content h2 {
  position: relative;
  padding-bottom: var(--space-5);
  margin-top: var(--space-20);
  margin-bottom: var(--space-4);
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: var(--tracking-tight);
}

.entry-content h2::after,
.block-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  border-radius: 2px;
}

.entry-content h3:not(.faq-question span),
.block-content h3 {
  color: var(--color-primary);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

/* =============================================
   STYLED LISTER I INDHOLD
   Custom bullet/tal-styling
   ============================================= */

/* Uordnet liste – farvet prik */
.entry-content ul:not([class]),
.entry-content .wp-block-list:not(.faq-accordion *) {
  list-style: none;
  padding-left: 0 !important;
  margin-bottom: var(--space-6);
}

.entry-content ul:not([class]) > li,
.entry-content .wp-block-list:not(.faq-accordion *) > li {
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

.entry-content ul:not([class]) > li::before,
.entry-content .wp-block-list:not(.faq-accordion *) > li::before {
  content: '';
  position: absolute;
  left: var(--space-3);
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-secondary);
  flex-shrink: 0;
}

/* Ordnet liste – nummererede badges */
.entry-content ol:not([class]) {
  counter-reset: content-ol;
  list-style: none;
  padding-left: 0 !important;
  margin-bottom: var(--space-6);
}

.entry-content ol:not([class]) > li {
  counter-increment: content-ol;
  position: relative;
  padding-left: calc(var(--space-8) + var(--space-2));
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

.entry-content ol:not([class]) > li::before {
  content: counter(content-ol);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 26px;
  height: 26px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

/* =============================================
   HIGHLIGHT-BOKSE (Gutenberg Group-blokke med baggrund)
   ============================================= */

/* Fact-box: mørk navy (bruges med wp-block-group + primary baggrund) */
.wp-block-group.has-primary-background-color {
  padding: var(--space-8) var(--space-8);
  border-radius: var(--radius-xl);
  color: #fff;
}

.wp-block-group.has-primary-background-color h2,
.wp-block-group.has-primary-background-color h3,
.wp-block-group.has-primary-background-color p {
  color: #fff;
}

/* Accent-gruppe: creme baggrund */
.wp-block-group.has-accent-background-color {
  padding: var(--space-8) var(--space-8);
  border-radius: var(--radius-xl);
}

/* Secondary-gruppe: teal */
.wp-block-group.has-secondary-background-color {
  padding: var(--space-8) var(--space-8);
  border-radius: var(--radius-xl);
  color: #fff;
}

/* Generisk Gutenberg-dæmpet gruppe med kant */
.wp-block-group:not([class*="has-"][class*="background-color"]) {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface);
}

/* =============================================
   PAGE PRODUCT RECOMMENDATIONS – Apple-stil
   ============================================= */

.page-products {
  background: var(--color-background);
  padding: var(--section-py) 0;
  border-top: 1px solid var(--color-border-light);
}

.page-products .section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.page-products .products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

@media (max-width: 1023px) {
  .page-products .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .page-products .products-grid {
    grid-template-columns: 1fr;
  }
}

.page-products__cta {
  text-align: center;
  margin-top: var(--space-12);
}

/* =============================================
   FORSIDEINDHOLD (.front-page-content)
   ============================================= */

.front-page-content {
  background: var(--color-background);
}

/* WordPress tilføjer .page, .hentry osv. – nulstil margins */
.front-page-article {
  margin: 0;
}

/* =============================================
   SIDE-HERO (page.php)
   ============================================= */

/* Apple-stil: renere, mere ikonisk hero */
.page-hero {
  position: relative;
  min-height: 320px;
  background-color: var(--color-primary-dark);
  background-size: cover;
  background-position: center 40%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

@media (min-width: 768px) {
  .page-hero {
    min-height: 400px;
  }
}

/* Kompakt variant uden baggrundsbillede */
.page-hero--no-image {
  min-height: auto;
  background: linear-gradient(
    135deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 60%,
    var(--color-secondary-dark) 100%
  );
}

.page-hero--no-image .page-hero__overlay {
  display: none;
}

@media (min-width: 768px) {
  .page-hero--no-image {
    min-height: auto;
  }
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 46, 0.40) 0%,
    rgba(26, 26, 46, 0.72) 60%,
    rgba(26, 26, 46, 0.82) 100%
  );
}

.page-hero__content {
  position: relative;
  z-index: 1;
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
  padding-left: var(--space-8);
  padding-right: var(--space-8);
  width: 100%;
  max-width: calc(820px + 2 * var(--space-8));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.page-hero__breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.70);
  margin-bottom: var(--space-4);
}

.page-hero__breadcrumbs a {
  color: rgba(255, 255, 255, 0.70);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.page-hero__breadcrumbs a:hover {
  color: #fff;
}

.page-hero__breadcrumbs .separator {
  margin: 0 var(--space-1);
  opacity: 0.45;
}

.page-hero__breadcrumbs .current {
  color: rgba(255, 255, 255, 0.90);
}

.page-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: var(--leading-tight);
  color: #fff;
  margin: 0 0 var(--space-4);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
  letter-spacing: var(--tracking-tight);
}

.page-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.page-hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.78);
}

.page-hero__meta-item svg {
  flex-shrink: 0;
  opacity: 0.80;
}

/* Pexels-kreditering – skjult (vi bruger egne billeder) */
a.pexels-hero-credit,
.pexels-credit {
  display: none !important;
}

/* Artikel-indhold under hero */
.page-article {
  margin: 0 auto;
}

/* =============================================
   SCROLL-PROGRESSBAR
   ============================================= */

.scroll-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--color-secondary) 0%,
    var(--color-primary) 100%
  );
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  transition: width 80ms linear;
  pointer-events: none;
}

/* =============================================
   INDHOLDSFORTEGNELSE (TOC)
   ============================================= */

.toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, var(--color-primary), var(--color-secondary)) 1;
  border-image-slice: 0 0 0 1 fill;
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-10) 0;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

/* Workaround: border-image breaks border-radius, use pseudo for gradient */
.toc {
  border-left: none;
  border-image: none;
}

.toc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.toc__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: none;
  border: none;
  padding: var(--space-1) 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  width: 100%;
  text-align: left;
  transition: color var(--duration-fast);
}

.toc__toggle:hover {
  color: var(--color-primary-light);
}

.toc__toggle svg:first-child {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-secondary);
}

.toc__toggle span {
  flex: 1;
}

.toc__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-spring);
  color: var(--color-secondary);
}

.toc__toggle[aria-expanded="false"] .toc__chevron {
  transform: rotate(-90deg);
}

.toc__nav {
  margin-top: var(--space-5);
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out),
              opacity var(--duration-slow) var(--ease-out);
}

.toc__nav.is-collapsed {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0;
}

.toc .toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}

.toc__item {
  margin-bottom: var(--space-2);
}

.toc__item--sub {
  padding-left: calc(var(--space-6) + 10px);
  margin-bottom: 0;
}

.toc__item--sub .toc__link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-border-light);
}

.toc__item--sub .toc__link:hover {
  border-left-color: var(--color-secondary);
}

.toc__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.5;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-out);
}

.toc__item:not(.toc__item--sub) .toc__link::before {
  counter-increment: toc-counter;
  content: counter(toc-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
  background: var(--color-secondary-10);
  width: 1.6em;
  height: 1.6em;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.toc__link:hover,
.toc__link:focus-visible {
  color: var(--color-secondary-dark);
  background: var(--color-secondary-10);
  padding-left: calc(var(--space-3) + 4px);
}

.toc__item--sub .toc__link:hover,
.toc__item--sub .toc__link:focus-visible {
  background: transparent;
}

.toc__link.is-active {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  background: var(--color-primary-10);
}

.toc__item:not(.toc__item--sub) .toc__link.is-active::before {
  color: var(--color-surface);
  background: var(--color-primary);
}
/* =============================================================================
   GUTENBERG – Block editor overrides og editor-styles
   ============================================================================= */

/* =============================================
   INDHOLDSBREDDE – Blok-bredde system
   Giver normal prose-bredde til tekst,
   og tillader wide/full blokke at bryde ud.
   ============================================= */

/*
 * INDHOLDSBREDDE – Container-tilgang
 * Containeren er 820px bred og centreret.
 * Alle børn fylder containeren naturligt – ingen per-child centering.
 * Wide/full-blokke bruger negative margins til at bryde ud.
 */
.block-content {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--space-10);
  padding-bottom: var(--space-16);
  padding-left: var(--space-8);   /* 32px */
  padding-right: var(--space-8);
  box-sizing: border-box;
}

/* Direkte børn fylder containeren – ingen centering-magi nødvendig */
.block-content > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* ul/ol bevarer venstre indrykning til bullets/tal */
.block-content ul,
.block-content ol {
  padding-left: var(--space-8);
}

/* Wide alignment – fjerner container-padding og fylder 820px */
.block-content > .alignwide {
  width: calc(100% + 2 * var(--space-8));
  max-width: none;
  margin-left: calc(-1 * var(--space-8));
  margin-right: calc(-1 * var(--space-8));
}

/* Full alignment – fuld viewport-bredde */
.block-content > .alignfull {
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

/* Float-alignment */
.block-content > .alignleft {
  float: left;
  max-width: 45%;
  margin-right: var(--space-6);
  margin-bottom: var(--space-4);
}

.block-content > .alignright {
  float: right;
  max-width: 45%;
  margin-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.block-content > .aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* WooCommerce-blokke (produktgitter osv.) er altid wide */
.block-content > .wp-block-woocommerce-product-collection,
.block-content > .wp-block-woocommerce-handpicked-products,
.block-content > .wc-block-grid {
  max-width: var(--container-max);
}

/* =============================================
   WORDPRESS CORE BLOCK STYLES
   ============================================= */

/* WordPress Core Block Styles – Apple-stil: bredere billeder */
.wp-block-image {
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
}

/* Billeder bryder ud af prose-bredden */
.block-content > .wp-block-image {
  width: calc(100% + 6rem);
  max-width: min(1100px, 100vw);
  margin-left: -3rem;
  margin-right: -3rem;
}

@media (max-width: 900px) {
  .block-content > .wp-block-image {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

.wp-block-image img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.wp-block-image figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* Separator */
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-12) 0;
}

.wp-block-separator.is-style-wide {
  border-top-width: 2px;
  border-color: var(--color-accent-dark);
}

/* Citat-blok */
.wp-block-quote {
  border-left: 3px solid var(--color-secondary);
  padding: var(--space-4) var(--space-8);
  margin: var(--space-8) 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--text-lg);
  background: var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.wp-block-quote cite {
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  display: block;
  margin-top: var(--space-4);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.wp-block-quote cite::before {
  content: '— ';
}

/* Pullquote – Apple-stil: stort, centreret statement */
.wp-block-pullquote {
  border-top: none;
  border-bottom: none;
  padding: var(--space-16) var(--space-8);
  margin: var(--space-16) 0;
  text-align: center;
  background: var(--color-background);
  border-radius: var(--radius-2xl);
}

.wp-block-pullquote blockquote {
  border: none;
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--color-primary);
  line-height: var(--leading-snug);
}

/* Knap-blok */
.wp-block-button__link {
  font-family: var(--font-body) !important;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: 0.9rem !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--duration-base) var(--ease-out) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  border: 2px solid currentColor !important;
  background: transparent !important;
}

/* Cover-blok */
.wp-block-cover {
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-8);
}

/* Medie & tekst */
.wp-block-media-text {
  gap: var(--space-10);
  align-items: center;
  margin-bottom: var(--space-10);
}

.wp-block-media-text .wp-block-media-text__media img {
  border-radius: var(--radius-lg);
}

/* Kolonner */
.wp-block-columns {
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

/* Tabel */
.wp-block-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-8);
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.9rem;
}

.wp-block-table thead th {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  border-bottom: 2px solid var(--color-border);
  text-align: left;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
  background: var(--color-background);
}

/* Farveblokke (editor farver) */
.has-primary-background-color { background-color: var(--color-primary) !important; }
.has-secondary-background-color { background-color: var(--color-secondary) !important; }
.has-accent-background-color { background-color: var(--color-accent) !important; }
.has-white-background-color { background-color: #ffffff !important; }
.has-background-background-color { background-color: var(--color-background) !important; }
.has-text-background-color { background-color: var(--color-text) !important; }

.has-primary-color { color: var(--color-primary) !important; }
.has-secondary-color { color: var(--color-secondary) !important; }
.has-accent-color { color: var(--color-accent) !important; }
.has-white-color { color: #ffffff !important; }
.has-text-color { color: var(--color-text) !important; }
.has-muted-color { color: var(--color-text-muted) !important; }

/* Skriftstørrelser */
.has-small-font-size { font-size: var(--text-sm) !important; }
.has-normal-font-size { font-size: var(--text-base) !important; }
.has-medium-font-size { font-size: var(--text-md) !important; }
.has-large-font-size { font-size: var(--text-xl) !important; }
.has-x-large-font-size { font-size: var(--text-3xl) !important; }

/* WooCommerce produktblok */
.wc-block-grid__product {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border: 1px solid var(--color-border-light) !important;
  transition: box-shadow var(--duration-base) !important;
}

.wc-block-grid__product:hover {
  box-shadow: var(--shadow-md) !important;
}
/* =============================================================================
   ANIMATIONER – Scroll reveal og transitions
   ============================================================================= */

/* Basis-tilstand for scroll-reveal elementer */
[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

[data-reveal="fade-up"]    { transform: translateY(40px); }
[data-reveal="fade-down"]  { transform: translateY(-40px); }
[data-reveal="fade-left"]  { transform: translateX(-50px); }
[data-reveal="fade-right"] { transform: translateX(50px); }
[data-reveal="scale-in"]   { transform: scale(0.92); }
[data-reveal="fade"]       { transform: none; }

/* Synlig tilstand */
[data-reveal].is-visible {
  opacity: 1;
  transform: none !important;
}

/* Deaktiver animationer ved prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1;
    transform: none !important;
    transition: none;
  }
}

/* =============================================
   SIDE-TRANSITIONS
   ============================================= */
.mini-cart-drawer,
.mobile-menu-drawer,
.search-overlay {
  transition: transform var(--duration-slow) var(--ease-out),
              opacity var(--duration-slow) var(--ease-out),
              visibility var(--duration-slow);
}

/* =============================================
   SEARCH OVERLAY
   ============================================= */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.95);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(10px);
  transition: opacity var(--duration-base) var(--ease-out),
              visibility var(--duration-base);
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.search-overlay-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 680px;
  padding: 0 var(--space-8);
}

.search-form {
  display: flex;
  align-items: center;
  min-width: 0;
}

.search-form:focus-within {
  outline: none;
}

.search-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: var(--space-5) 0;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  color: white;
  min-width: 0;
}

.search-field::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.search-submit {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: var(--space-3);
  transition: color var(--duration-fast);
}

.search-submit:hover {
  color: white;
}

.search-submit svg {
  width: 24px;
  height: 24px;
}

.search-overlay-close {
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: var(--space-3);
  transition: color var(--duration-fast);
}

.search-overlay-close:hover {
  color: white;
}

.search-overlay-close svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 639px) {
  .search-overlay-inner {
    gap: var(--space-2);
    padding: 0 var(--space-5);
  }
}

/* =============================================
   MINI-KURV DRAWER
   ============================================= */
.mini-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.5);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out),
              visibility var(--duration-slow);
  backdrop-filter: blur(4px);
}

.mini-cart-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mini-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-surface);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.mini-cart-drawer.is-open {
  transform: translateX(0);
}

.mini-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}

.mini-cart-title {
  font-size: var(--text-lg);
  font-family: var(--font-heading);
  color: var(--color-text);
}

.mini-cart-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
  background: transparent;
  border: none;
}

.mini-cart-close:hover {
  background: var(--color-background);
  color: var(--color-text);
}

.mini-cart-close svg {
  width: 18px;
  height: 18px;
}

.mini-cart-body {
  flex: 1;
  padding: var(--space-6);
  overflow-y: auto;
}

/* WooCommerce mini-cart styles */
.mini-cart-body .woocommerce-mini-cart {
  list-style: none;
}

.mini-cart-body .woocommerce-mini-cart__empty-message {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-12) 0;
}

.mini-cart-body .woocommerce-mini-cart-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.mini-cart-body .woocommerce-mini-cart-item img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.mini-cart-body .mini_cart_item_name {
  font-weight: var(--weight-medium);
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: none;
}

.mini-cart-body .woocommerce-mini-cart__total {
  padding: var(--space-5) 0;
  border-top: 2px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--weight-semibold);
}

.mini-cart-body .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.mini-cart-body .woocommerce-mini-cart__buttons a {
  text-align: center;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  font-size: 0.9rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  transition: all var(--duration-base);
}

.mini-cart-body .woocommerce-mini-cart__buttons .button:not(.checkout) {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

.mini-cart-body .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
  background: var(--color-primary);
  color: white;
}

.mini-cart-body .woocommerce-mini-cart__buttons .checkout {
  background: var(--color-primary);
  color: white;
}

.mini-cart-body .woocommerce-mini-cart__buttons .checkout:hover {
  background: var(--color-primary-light);
}

/* =============================================
   LOADING STATES
   ============================================= */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: inherit;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
/* =============================================================================
   FOOTER
   ============================================================================= */

.site-footer {
  background: var(--color-text);
  color: rgba(255, 255, 255, 0.75);
}

/* Footer top: 4 kolonner */
.footer-top {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 3fr;
  gap: var(--space-12);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--section-px);
}

/* Footer kolonne-overskrifter */
.footer-col-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: var(--space-5);
}

/* Brand-kolonne */
.footer-brand {}

.footer-logo {
  margin-bottom: var(--space-5);
}

.footer-logo img {
  height: 36px;
  width: auto;
  opacity: 0.9;
}

.footer-logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: white;
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}

.footer-tagline {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

/* Sociale ikoner */
.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.footer-social a:hover {
  background: var(--color-secondary);
  color: white;
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

/* Tillids-badge */
.footer-trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
}

.footer-trust svg {
  width: 16px;
  height: 16px;
  color: var(--color-secondary);
}

/* Navigation-kolonner */
.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.footer-nav-list a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer-nav-list a:hover {
  color: white;
}

/* Nyhedsbrev-kolonne */
.footer-newsletter-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-5);
  line-height: var(--leading-relaxed);
}

.footer-newsletter-form {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
}

.footer-newsletter-form .form-row {
  display: flex;
  gap: var(--space-2);
}

.footer-newsletter-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: white;
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: border-color var(--duration-fast), background var(--duration-fast);
  min-width: 0;
}

.footer-newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer-newsletter-input:focus {
  outline: none;
  border-color: var(--color-secondary);
  background: rgba(255, 255, 255, 0.12);
}

.footer-newsletter-btn {
  padding: var(--space-3) var(--space-5);
  background: var(--color-secondary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast);
  white-space: nowrap;
}

.footer-newsletter-btn:hover {
  background: var(--color-secondary-light);
}

.footer-newsletter-privacy {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  margin-top: var(--space-2);
}

/* =============================================
   FOOTER BUND
   ============================================= */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-6) 0;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--section-px);
}

.footer-copyright {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.4);
}

/* Betalingsikoner */
.footer-payments {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-payments img {
  height: 24px;
  width: auto;
  opacity: 0.5;
  filter: brightness(10);
  transition: opacity var(--duration-fast);
}

.footer-payments img:hover {
  opacity: 0.8;
}

/* Juridiske links */
.footer-legal {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer-legal a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer-legal a:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* =============================================
   RESPONSIV
   ============================================= */
@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 639px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-newsletter-form .form-row {
    flex-direction: column;
  }
}
/* =============================================================================
   RESPONSIV – Globale mobile-first breakpoints
   ============================================================================= */

/* Tablet (max 1023px) */
@media (max-width: 1023px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .section-header {
    margin-bottom: var(--space-10);
  }
}

/* Lille tablet / stor mobil (max 767px) */
@media (max-width: 767px) {
  body {
    font-size: 0.95rem;
  }

  h1, h2, h3, h4, h5, h6,
  p, li, a, button, label,
  .btn,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .btn,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  .footer-newsletter-btn,
  .wc-tab-nav li a,
  .woocommerce-tabs ul.tabs li a {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  .grid > *,
  .flex > *,
  .flex-center > *,
  .flex-between > *,
  .flex-start > *,
  .flex-col > *,
  .header-inner > *,
  .search-overlay-inner > *,
  .product-summary-col > * {
    min-width: 0;
    max-width: 100%;
  }

  .section {
    padding-top: clamp(3rem, 7vw, 5rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
  }

  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* CTA banner */
  .cta-banner {
    padding: clamp(4rem, 8vw, 6rem) 0;
  }

  .cta-banner__trust {
    gap: var(--space-5);
  }

  /* Newsletter */
  .newsletter-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
  }

  /* Kontakt side */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Single produkt */
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
  }
}

/* Mobil (max 639px) */
@media (max-width: 639px) {
  :root {
    --section-px: 1.25rem;
  }

  h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
  h3 { font-size: clamp(1.15rem, 4.5vw, 1.5rem); }

  .section-subtitle {
    font-size: var(--text-base);
  }

  .btn,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit {
    width: 100%;
    max-width: 100%;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* Related posts */
  .related-posts .blog-preview-grid {
    grid-template-columns: 1fr;
  }

  /* Slider: 1 ad gangen */
  .testimonials-track .testimonial-card {
    flex: 0 0 100%;
    min-width: 100%;
  }

  /* Footer */
  .footer-top {
    padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 4rem);
  }

  /* Søgeside */
  .search-result {
    grid-template-columns: 1fr;
  }

  .search-result__image {
    width: 60px;
    height: 60px;
  }

  /* CTA links på fejlside */
  .error-404__links {
    flex-direction: column;
    align-items: center;
  }

  /* Post-forfatter boks */
  .author-box {
    flex-direction: column;
  }
}

/* Print */
@media print {
  .site-header,
  .site-footer,
  .mini-cart-drawer,
  .mobile-menu-drawer,
  .hero__scroll-indicator,
  .newsletter-section,
  .cta-banner {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: black;
    background: white;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }
}

/* ======================
   MOBILE FIX – overlay blokerer klik
   ====================== */
.mobile-menu-overlay {
  pointer-events: none;
  visibility: hidden;
}
.mobile-menu-overlay.is-open {
  pointer-events: auto;
  visibility: visible;
}
.mobile-menu-drawer:not(.is-open) {
  pointer-events: none;
  visibility: hidden;
}
.mobile-menu-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.hero__overlay {
  pointer-events: none;
}

/* Override slider with static grid for testimonials */
.testimonials-slider {
  overflow: visible !important;
}
.testimonials-track-wrap {
  overflow: visible !important;
}
.testimonials-track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  transform: none !important;
  transition: none !important;
}
.testimonials .slider-controls {
  display: none !important;
}
.testimonial-card {
  flex: none !important;
  min-width: unset !important;
  width: auto !important;
}
/* Hide 4th card (Rasmus) */
.testimonial-card:nth-child(n+4) {
  display: none !important;
}
@media (max-width: 768px) {
  .testimonials-track {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* === FIX: Shop page reveal – no animation hop === */
.woocommerce-page [data-reveal],
.archive [data-reveal],
.tax-product_cat [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* === FIX: Quantity selector – compact width === */
.quantity.quantity--enhanced {
  width: auto !important;
  display: inline-flex !important;
}

/* === FIX: Carousel indicators – more margin on single product === */
.single-product .carousel-indicators {
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
}

/* === FIX: Product carousel – arrows outside cards and more indicator space === */
.product-carousel {
  overflow: visible !important;
}

.product-carousel__track {
  padding-bottom: 2rem !important;
}

.carousel-indicators {
  margin-top: 1.25rem !important;
  margin-bottom: 1.5rem !important;
  padding: 0.75rem 0 0 !important;
}

.product-carousel__nav--prev {
  left: calc(-1 * (44px + 1rem)) !important;
}

.product-carousel__nav--next {
  right: calc(-1 * (44px + 1rem)) !important;
}

/* === FIX: Related products – card body full width === */
.related.products .product-card__body {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================
   MOBIL OVERFLOW FIX – product summary
   ============================================================ */
.product-summary,
.summary.entry-summary {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.product-summary img,
.summary.entry-summary img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .product-summary,
  .summary.entry-summary,
  .woocommerce div.product .summary {
    padding: 0 1rem;
    box-sizing: border-box;
    overflow: hidden;
  }
}

/* === FIX: Related products – smoother hover and visible shadows === */
.related.products .products,
.related.products ul.products {
  margin: 0;
  overflow: visible !important;
}

.related.products .products > li,
.related.products ul.products > li {
  overflow: visible !important;
}

.related.products .product-card {
  overflow: visible !important;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform, box-shadow;
}

.related.products .product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(44, 62, 80, 0.12), 0 8px 20px rgba(78, 154, 156, 0.08) !important;
}

.related.products .product-card__image-link,
.related.products .product-card__body {
  position: relative;
  z-index: 1;
}

.related.products .product-card__image-link {
  border-radius: 24px 24px 0 0;
}

.related.products .product-card__body {
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}

/* === FIX: Product card hover – softer and smaller === */
.product-card {
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.product-card:hover {
  transform: translateY(-3px) scale(1.008) !important;
  box-shadow: 0 10px 28px rgba(26, 26, 46, 0.08), 0 4px 12px rgba(26, 26, 46, 0.05) !important;
}

.product-card__stock::before {
  content: none !important;
}

/* === Category filter: hide product === */
.product-card.rolig-hidden {
  display: none !important;
}

/* === FIX: Product carousel shadow clipping === */
.product-carousel,
.product-carousel.is-visible,
[data-reveal].product-carousel,
[data-reveal].product-carousel.is-visible {
  overflow: visible !important;
}

.product-carousel__track {
  overflow-y: visible !important;
}

.featured-products .product-carousel__track {
  padding: var(--space-3) var(--space-3) var(--space-8) !important;
  margin: calc(-1 * var(--space-3));
}

/* === FIX: Single product gallery description styling === */
.product-gallery-description {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.96) 100%);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.product-gallery-description p {
  font-size: 1rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.product-gallery-description p + p {
  margin-top: var(--space-4);
}

@media (max-width: 639px) {
  .featured-products .product-carousel__track {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
    margin-left: calc(-1 * var(--space-2));
    margin-right: calc(-1 * var(--space-2));
  }
}