.cmp-breadcrumb { background: var(--color-surface); border-bottom: 1px solid var(--rule); padding: var(--space-16) 0; }
.cmp-breadcrumb .container { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-13); color: var(--color-text-muted); flex-wrap: wrap; }
/* Klikflade mindst 24 px høj (WCAG 2.5.8) — skriftstørrelsen står, kun boksens højde vokser. */
.cmp-breadcrumb a { color: var(--color-text-muted); display: inline-flex; align-items: center; min-height: var(--space-24); }
.cmp-breadcrumb a:hover { color: var(--color-primary); }
.cmp-breadcrumb .sep { opacity: 0.5; }
.cmp-breadcrumb .current { color: var(--color-foreground); font-weight: 500; }

.cmp-hero { background: var(--color-surface); padding: var(--space-56) 0 var(--space-48); border-bottom: 1px solid var(--rule); }
.cmp-hero .container > .eyebrow { margin-bottom: var(--space-14); }
.cmp-hero h1 { font-size: min(var(--text-display), var(--text-36)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 var(--space-6); }
.cmp-hero .cmp-subtitle { font-size: var(--text-22); font-weight: 500; color: var(--color-text-muted); margin: 0 0 var(--space-18); letter-spacing: -0.01em; line-height: 1.2; }
.cmp-hero .cmp-lead { font-size: var(--text-16); color: var(--color-text-muted); max-width: 720px; margin: 0; line-height: 1.65; }
/* Undertitel og indledning er redaktørens felter; et tomt felt står ikke. */
.cmp-hero :is(.cmp-subtitle, .cmp-lead):empty { display: none; }

/* «Tilføj produkt» og dialogen med søgning og forslag. */
.cmp-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); margin-top: var(--space-24); }
.cmp-tilfoej { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--space-44); padding: 0 var(--space-18); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary); font-size: var(--text-14); font-weight: 600; box-sizing: border-box; }
.cmp-tilfoej:hover { border-color: var(--color-primary); }
.cmp-tilfoej svg { width: 16px; height: 16px; }
.cmp-handlinger .meta-pill { display: inline-flex; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-10); border-radius: var(--radius-pill); background: var(--color-background); font-family: var(--font-mono); font-size: var(--text-11); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.cmp-handlinger .meta-pill svg { width: 12px; height: 12px; }
.cmp-dialog { box-sizing: border-box; width: min(560px, calc(100vw - 2 * var(--space-16))); padding: var(--space-24); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-foreground); }
.cmp-dialog::backdrop { background: color-mix(in srgb, var(--color-primary-deep) 60%, transparent); }
.cmp-dialog__hoved { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16); margin-bottom: var(--space-16); }
.cmp-dialog__hoved h2 { margin: 0; font-size: var(--text-18); font-weight: 600; }
.cmp-dialog__hoved form { margin: 0; }
.cmp-dialog__luk { width: var(--space-44); height: var(--space-44); border: 0; background: transparent; color: var(--color-text-muted); font-size: var(--text-22); cursor: pointer; }
.cmp-dialog__etiket { margin: var(--space-20) 0 var(--space-8); font-family: var(--font-mono); font-size: var(--text-11); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.cmp-dialog__forslag { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.cmp-dialog__forslag a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); min-height: var(--space-44); padding: var(--space-8) var(--space-12); border: 1px solid var(--rule); border-radius: var(--radius-sm); color: var(--color-foreground); box-sizing: border-box; }
.cmp-dialog__forslag a:hover { border-color: var(--color-primary); }
.cmp-dialog__tilfoej { color: var(--color-primary); font-size: var(--text-13); font-weight: 600; }

.cmp-section { padding: var(--space-56) 0; }
/* Gitteret står ved sektionens polstring; overskriften før det er kun for skærmlæsere. */
.cmp-section .cmp-grid { margin-block-start: 0; }
.cmp-grid {
	display: grid;
	/* Antal produkter står i --cmp-n (sættes af markupen). Hver produktkolonne er mindst 160 px (prisfeltets mindstebredde plus polstringen) og mindst så bred som sit længste ubrudte led, fx en sekscifret pris; er der ikke plads, ruller gitteret vandret med etiketkolonnen fast. */
	--cmp-n: 2;
	grid-template-columns: 200px repeat(var(--cmp-n), minmax(auto, 1fr));
	gap: 0;
	background: var(--color-surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	overflow-x: auto;
	overscroll-behavior-x: contain;
}
.cmp-grid:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.cmp-grid .cmp-row { display: contents; }

.cmp-grid .label-col-empty { background: var(--color-background); border-right: 1px solid var(--rule); padding: var(--space-24) var(--space-20); position: sticky; left: 0; z-index: 1; }
.cmp-grid .label-col-empty .lbl {
	font-family: var(--font-mono); font-size: var(--text-11); color: var(--color-text-muted);
	letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
}

.cmp-grid .col-head { padding: var(--space-24) var(--space-24) var(--space-20); border-right: 1px solid var(--rule); position: relative; display: flex; flex-direction: column; gap: var(--space-12); }
.cmp-grid .col-head:last-child { border-right: none; }
/* «Fjern» i kundens egen sammenligning; 44 px klikmål under 1024 px. */
.col-head .col-x { position: absolute; top: var(--space-14); right: var(--space-14); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-circle); background: var(--color-background); color: var(--color-text-muted); }
.col-head .col-x:hover { background: var(--rule); color: var(--color-foreground); }
@media (width < 1024px) { .col-head .col-x { top: var(--space-4); right: var(--space-4); width: var(--space-44); height: var(--space-44); } }
.col-head .brand-tag { font-family: var(--font-mono); font-size: var(--text-11); font-weight: 500; color: var(--color-primary); letter-spacing: 0.06em; text-transform: uppercase; }
.col-head .col-thumb {
	aspect-ratio: 1; max-width: 220px; width: 100%; align-self: center;
	background: var(--color-surface); border: 1px solid var(--rule); border-radius: var(--radius-sm);
	position: relative; overflow: hidden; box-sizing: border-box;
}
.col-head .col-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; padding: 10%; box-sizing: border-box; }
.col-head h3 { font-size: var(--text-18); font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -0.02em; }
.col-head h3 a { color: inherit; }
.col-head h3 .col-variant { display: block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-12); font-weight: 500; letter-spacing: 0; color: var(--color-text-muted); }
.col-head .col-codes { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-12); color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-2); }
.col-head .col-stock { display: inline-flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-4); font-size: var(--text-13); font-weight: 500; }
.col-head .col-stock .dot { width: 8px; height: 8px; border-radius: var(--radius-circle); flex-shrink: 0; }
.col-head .col-stock.in { color: var(--color-success); }
.col-head .col-stock.in .dot { background: var(--color-success); }
.col-head .col-stock.low { color: var(--color-warning); }
.col-head .col-stock.low .dot { background: var(--color-warning); }
.col-head .col-stock.out { color: var(--color-danger); }
.col-head .col-stock.out .dot { background: var(--color-danger); }
.col-head .col-price { min-width: calc(160px - 2 * var(--space-24) - 1px); border-top: 1px solid var(--rule); padding-top: var(--space-12); margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.col-head .col-price .list { font-size: var(--text-26); font-weight: 700; font-family: var(--font-mono); letter-spacing: -0.01em; }
/* En kundes listepris står overstreget på sin egen linje over kundeprisen. */
.col-head .col-price .list del { display: block; }
/* Klikflade mindst 24 px høj (WCAG 2.5.8) — skriftstørrelsen står, kun boksens højde vokser. */
.col-head .col-price .login-link { font-size: var(--text-12); color: var(--color-primary); border-bottom: 1px solid var(--rule-strong); padding-bottom: 1px; align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--space-24); }
.col-head .add-btn { width: 100%; margin-top: var(--space-8); box-sizing: border-box; }

.cmp-grid .spec-group-head {
	grid-column: 1 / -1;
	background: linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-surface-3) 100%);
	border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
	padding: var(--space-14) var(--space-24);
	font-family: var(--font-mono); font-size: var(--text-11); font-weight: 600;
	color: var(--color-primary); letter-spacing: 0.1em; text-transform: uppercase;
	display: flex; align-items: center; gap: var(--space-10);
}
/* Gruppenavnet bliver stående i venstre side, mens gitteret ruller. */
.cmp-grid .spec-group-head .grp-lbl { position: sticky; left: var(--space-24); display: inline-flex; align-items: center; gap: var(--space-10); }
.cmp-grid .spec-group-head svg { width: 14px; height: 14px; opacity: 0.6; }

.cmp-grid .spec-row-label,
.cmp-grid .spec-cell { padding: var(--space-14) var(--space-24); border-bottom: 1px solid var(--rule); font-size: var(--text-14); }
.cmp-grid .spec-row-label { background: var(--color-background); border-right: 1px solid var(--rule); color: var(--color-text-muted); font-weight: 500; position: sticky; left: 0; z-index: 1; overflow-wrap: normal; hyphens: manual; }
.cmp-grid .spec-cell { border-right: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-12); }
.cmp-grid .spec-cell:last-child { border-right: none; }
.cmp-grid .spec-cell .val { overflow-wrap: anywhere; font-family: var(--font-mono); color: var(--color-foreground); font-weight: 500; }
.cmp-grid .spec-cell .val--tekst { font-family: var(--font-sans); font-weight: 400; }
.cmp-grid .spec-cell .winner-tag {
	font-family: var(--font-mono); font-size: var(--text-10); color: var(--color-success);
	display: inline-flex; align-items: center; gap: var(--space-4); font-weight: 500; letter-spacing: 0.04em; white-space: nowrap;
}
.cmp-grid .spec-cell .winner-tag svg { width: 12px; height: 12px; }
.cmp-grid .spec-cell.highlight .val { color: var(--color-success); font-weight: 700; }
/* Rækker, der er ens for alle varer, står med værdien én gang over varekolonnerne. */
.cmp-grid .spec-cell--ens { grid-column: 2 / -1; border-right: none; }
.cmp-grid .cmp-row.is-last .spec-row-label,
.cmp-grid .cmp-row.is-last .spec-cell { border-bottom: none; }
.cmp-grid .price-row .val { font-size: var(--text-16); font-weight: 700; }

.cmp-narrative { background: var(--color-surface); padding: var(--space-80) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cmp-narrative .wrap { max-width: 760px; margin: 0 auto; }
.cmp-narrative h2 { font-size: var(--text-title); font-weight: 600; margin: 0 0 var(--space-28); letter-spacing: -0.02em; line-height: 1.15; }
.cmp-narrative p { font-size: var(--text-17); line-height: 1.75; color: var(--color-foreground); margin: 0 0 var(--space-18); }
.cmp-narrative p strong { color: var(--color-primary); font-weight: 700; }
.cmp-narrative .verdict { background: var(--color-background); border-left: 3px solid var(--color-accent); padding: var(--space-24) var(--space-28); margin: var(--space-28) 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cmp-narrative .verdict h3 {
	font-family: var(--font-mono); font-size: var(--text-11); font-weight: 600;
	color: var(--color-accent-text); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 var(--space-10);
}
.cmp-narrative .verdict p { font-size: var(--text-16); margin: 0; }
.cmp-narrative .help { color: var(--color-text-muted); font-size: var(--text-15); padding-top: var(--space-12); border-top: 1px solid var(--rule); margin-bottom: 0; }
.cmp-narrative .help a { color: var(--color-primary); font-weight: 600; border-bottom: 1px solid var(--rule-strong); padding-bottom: 1px; }

.cmp-related { padding: var(--space-64) 0; background: var(--color-background); }
.cmp-related h2 { font-size: var(--text-22); font-weight: 600; margin: 0 0 var(--space-20); }
.cmp-related .pill-list { display: flex; flex-wrap: wrap; gap: var(--space-10); margin: 0; padding: 0; list-style: none; }
/* Klikflade mindst 44 px høj (WCAG 2.5.5) — min-height oveni polstringen, ikke i stedet for den. */
.cmp-related .pill-link { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--space-44); padding: var(--space-10) var(--space-18); background: var(--color-surface); border: 1px solid var(--rule); border-radius: var(--radius-pill); font-size: var(--text-14); color: var(--color-foreground); font-weight: 500; transition: border-color .15s, color .15s; box-sizing: border-box; }
.cmp-related .pill-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cmp-related .pill-link::before { content: "→" / ""; color: var(--color-accent); font-weight: 700; }
.cmp-related .pill-link.summary { background: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); }
.cmp-related .pill-link.summary::before { content: ""; }
.cmp-related .pill-link.summary:hover { background: var(--color-primary-deep); color: var(--color-surface); }

.cmp-cta-band { background: var(--color-primary-deep); color: var(--color-surface); padding: var(--space-64) 0; text-align: center; position: relative; overflow: hidden; }
.cmp-cta-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, var(--color-on-dark-02) 0, var(--color-on-dark-02) 1px, transparent 1px, transparent 12px); }
.cmp-cta-band > .container { position: relative; }
.cmp-cta-band h2 { font-size: var(--text-28); font-weight: 600; margin: 0 0 var(--space-24); color: var(--color-surface); }
.cmp-cta-band .cta-row { display: inline-flex; gap: var(--space-32); align-items: center; flex-wrap: wrap; justify-content: center; }
.cmp-cta-band .cta-row a { font-size: var(--text-20); font-family: var(--font-mono); color: var(--color-accent-warm); display: inline-flex; align-items: center; gap: var(--space-12); }
.cmp-cta-band .cta-row a:hover { color: var(--color-accent); }
.cmp-cta-band .cta-row svg { width: 18px; height: 18px; }

.cmp-share-bar { margin-block-start: 0; background: var(--color-surface); border-top: 1px solid var(--rule); box-shadow: var(--shadow-up); padding: var(--space-14) 0; }
/* Fast i bunden kun hvor der er plads: på en smal skærm fylder linjen en femtedel af den. Fokus skal kunne rulles fri af linjen. */
@media (min-width: 769px) and (min-height: 500px) {
	.cmp-share-bar { position: sticky; bottom: 0; z-index: 30; }
	html:has(.cmp-share-bar:not([hidden])) { scroll-padding-bottom: calc(var(--space-14) * 2 + var(--space-44) + 1px + var(--space-8)); }
}
.cmp-share-bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.cmp-share-bar .share-meta { font-family: var(--font-mono); font-size: var(--text-11); color: var(--color-text-muted); letter-spacing: 0.04em; }
.cmp-share-bar .share-actions { display: flex; gap: var(--space-8); flex-wrap: wrap; }
/* Klikflade mindst 44 px høj (WCAG 2.5.5). Knapperne, scriptet bygger, arver skrifttypen som linket ved siden af. */
.cmp-share-bar .share-btn { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--space-44); padding: 0 var(--space-14); background: var(--color-surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--text-13); font-weight: 500; cursor: pointer; color: var(--color-foreground); transition: background .15s, border-color .15s, color .15s; box-sizing: border-box; }
.cmp-share-bar .share-btn:hover { background: var(--color-background); border-color: var(--color-primary); color: var(--color-primary); }
.cmp-share-bar .share-btn svg { width: 14px; height: 14px; }

.cmp-share-bar .share-btn.primary { background: var(--color-accent); color: var(--color-primary-deep); border-color: var(--color-accent); font-weight: 500; }
.cmp-share-bar .share-btn.primary:hover { background: var(--color-primary-deep); color: var(--color-surface); border-color: var(--color-primary-deep); }

.cmp-grid .add-btn { box-sizing: border-box; background: var(--color-accent); color: var(--color-primary-deep); min-height: var(--space-44); padding: 0 var(--space-16); border-radius: var(--radius-sm); font-weight: 600; font-size: var(--text-13); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); border: none; transition: background .15s, color .15s; box-shadow: var(--shadow-accent); }
.cmp-grid .add-btn:hover { background: var(--color-primary-deep); color: var(--color-surface); }
.cmp-grid .add-btn svg { width: 14px; height: 14px; }

/* «Gem som PDF» er browserens udskrift: tabellen står i sin fulde bredde uden faste kolonner, og det, der ikke hører til papiret, står ikke. */
@media print {
	.wp-site-blocks > :is(header, footer).wp-block-template-part,
	.cmp-share-bar,
	.cmp-handlinger,
	.cmp-related,
	.cmp-cta-band,
	.cmp-grid :is(.add-btn, .col-x) { display: none; }
	.cmp-grid { overflow: visible; }
	.cmp-grid :is(.label-col-empty, .spec-row-label, .grp-lbl) { position: static; }
	.cmp-grid :is(.col-head, .spec-group-head, .spec-row-label, .spec-cell) { break-inside: avoid; }
}

@media (max-width: 768px) {
	.cmp-hero { padding: var(--space-40) 0 var(--space-32); }
	/* h1 er --text-display (flydende) — skalerer selv, ingen fast trin nedenfor 768 px. */
	.cmp-hero .cmp-subtitle { font-size: var(--text-18); }
	.cmp-section { padding: var(--space-32) 0; }

	/* Etiketkolonnen er mindst så bred som det længste ord, så et ord aldrig deles. */
	.cmp-grid { grid-template-columns: minmax(min-content, 10rem) repeat(var(--cmp-n), minmax(auto, 1fr)); }
	.cmp-grid .col-head,
	.cmp-grid .spec-row-label,
	.cmp-grid .spec-cell { padding: var(--space-14) var(--space-12); }
	.cmp-grid .col-head .col-price { min-width: calc(160px - 2 * var(--space-12) - 1px); }
	.cmp-narrative { padding: var(--space-48) 0; }
	/* h2 er --text-title (flydende) — skalerer selv, ingen fast trin nedenfor 768 px. */
}
/* Under 560 px står etiketten over værdiparret på en linje for sig, og varekolonnerne deler hele bredden; der er ingen etiketkolonne og intet vandret overløb. */
@media (max-width: 560px) {
	.cmp-grid { grid-template-columns: repeat(var(--cmp-n), minmax(0, 1fr)); font-size: var(--text-13); overflow-x: visible; }
	/* Cellen bliver i tilgængelighedstræet, så overskriftsrækken har lige så mange celler som datarækkerne; som absolut placeret tager den ingen gittercelle. */
	.cmp-grid .label-col-empty { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
	.cmp-grid .col-head { padding: var(--space-12) var(--space-8); overflow-wrap: anywhere; }
	.cmp-grid .col-head h3 { font-size: var(--text-13); }
	.cmp-grid .col-head h3 a { display: inline-flex; align-items: center; min-height: var(--space-44); }
	.cmp-grid .col-head .col-price { min-width: 0; }
	.cmp-grid .col-price .list { font-size: var(--text-14); }
	.cmp-grid .col-head .add-btn { padding: 0 var(--space-4); font-size: var(--text-12); line-height: 1.2; text-align: center; }
	.cmp-grid .spec-row-label { grid-column: 1 / -1; position: static; padding: var(--space-10) var(--space-12) var(--space-4); border-right: none; border-bottom: none; font-size: var(--text-12); }
	.cmp-grid .spec-cell { padding: var(--space-4) var(--space-8) var(--space-12); }
	.cmp-grid .spec-cell--ens { grid-column: 1 / -1; padding-inline: var(--space-12); }
	.cmp-grid .spec-cell .winner-tag { white-space: normal; overflow-wrap: anywhere; }
	.cmp-grid .spec-group-head { padding-inline: var(--space-12); }
	.cmp-grid .spec-group-head .grp-lbl { left: var(--space-12); }
	.cmp-share-bar .container { justify-content: center; }
}