.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* Sidehovedets højde uden bundkanten ved hvert af dets brudpunkter (blocks/header/style.css). Lag, der klæber nedenfor det, bruger den som top. */
:root { --header-height: var(--space-64); }
@media (min-width: 1024px) {
	:root { --header-height: var(--wp--custom--header-height); }
}

/* Fuldbredde-sektioner står kant i kant med hinanden, med sidehovedet og med footeren; luften bor i sektionernes egen polstring. En overskrift kun for skærmlæsere imellem tæller ikke. Andre blokke beholder blokafstanden; en skabelondel i sidens indhold (varerækken, der er tom uden fremhævede varer) er en sektion. */
.wp-site-blocks > .pto-main:has(> .wp-block-post-content > section[class*="wp-block-pto-"]:first-child),
.wp-site-blocks > .pto-main:has(> .wp-block-post-content > .pto-soege-hero:first-child),
.wp-site-blocks > .pto-main:has(> .wp-block-post-content > section[class*="wp-block-pto-"]:last-child) + footer,
.wp-block-post-content > :is(section[class*="wp-block-pto-"], .pto-flade, .pto-soege-hero) + :is(section[class*="wp-block-pto-"], .pto-flade, .pto-soege-hero, .wp-block-template-part),
.wp-block-post-content > :is(section[class*="wp-block-pto-"], .pto-flade, .pto-soege-hero) + .screen-reader-text + :is(section[class*="wp-block-pto-"], .pto-flade, .pto-soege-hero) { margin-block-start: 0; }
/* En fuldbredde-flade af kerneblokke: en gruppe med klassen pto-flade står kant i kant med sektionerne og bærer sin egen luft. På en mørk flade (pto-flade-moerk) er teksten hvid og øjenbrynet varm orange, overskriften har flyerens størrelse og versaler, og indholdets dele har luft imellem. Farverne står her og ikke i blokkens farveindstillinger, for paletten har en farve med navnet text, og dens klasse has-text-color vinder over alle andre tekstfarver. */
.pto-flade { margin-block: 0; padding: var(--space-64) 0; }
.pto-flade-moerk { color: var(--color-surface); }
.pto-flade-moerk .is-style-pto-oejenbryn { color: var(--color-accent-warm); }
.pto-flade-moerk .wp-block-heading {
	margin-block: var(--space-12) 0;
	color: var(--color-surface);
	font-size: var(--text-flyer);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}
.pto-flade-moerk > .container > * + * { margin-block-start: var(--space-56); }
.pto-flade-moerk .is-not-stacked-on-mobile p { hyphens: auto; }
@media (min-width: 1024px) {
	.pto-flade { padding: var(--space-96) 0; }
	.pto-flade-moerk > .container > * + * { margin-block-start: var(--space-80); }
}
/* Skabeloner bygget af bånd (brødkrumme, hero, sektioner) gør det samme: båndene står kant i kant med sidehovedet, med hinanden og med footeren. */
.wp-site-blocks > :has(> section, > .pto-main > section),
.wp-site-blocks > :has(> section, > .pto-main > section) + footer,
.pto-main:has(> section) > * { margin-block-start: 0; }

/* box-sizing skal stå her: .container brugtes hidtil kun i wp:group-blokke, som arver border-box fra kernens block-library-CSS. Sidehovedet skriver klassen direkte i render.php uden om den blok-arv. */
.container { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-20); width: 100%; }
@media (min-width: 1024px) {
	.container { padding: 0 var(--space-32); }
}

.eyebrow,
.pto-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-12);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-text);
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
}
.pto-eyebrow { margin: 0; display: flex; }
.eyebrow::before,
.pto-eyebrow::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-block: 4px solid transparent;
	border-inline-start: 6px solid currentColor;
}
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--color-accent-warm); }
.pto-more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start; /* i en flex-kolonne-forælder (pto-produktraekke__hoved) følger linket teksten under 1024px */
	min-height: var(--space-44);
	flex-shrink: 0;
	color: var(--color-primary);
	font-size: var(--text-14);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
@media (min-width: 1024px) {
	/* Nulstiller mobilens align-self: flex-start, så hovedets align-items: flex-end gælder her. */
	.pto-more { min-height: auto; align-self: auto; }
}
.pto-more > a { display: inline-flex; align-items: center; min-height: inherit; }

/* Knappens udseende står i theme.json (styles.elements.button). Her kun det, theme.json ikke kan udtrykke: polstringen skal indgå i mindstehøjden, og et link skal være en boks. :where() lader mere specifikke regler vinde. */
:where(.wp-element-button) { box-sizing: border-box; }
:where(a.wp-element-button, span.wp-element-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Tekst og kant følger fladens tekstfarve, så samme regel holder kontrasten på lyse og mørke flader. */
.wp-element-button.pto-knap--sekundaer {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
}
.wp-element-button.pto-knap--sekundaer:hover,
.wp-element-button.pto-knap--sekundaer:focus-visible {
	background: var(--color-primary);
	color: var(--color-surface);
}

/* Kernens «Omrids»-knap er temaets sekundære knap: 1 px kant i tekstens farve, navy tekst, og navy flade ved hover og tastaturfokus. Kernen sætter selv 2 px og tekstens arvede farve. «Ryd alle filtre» har Omrids-klassen fra WooCommerce og er et tekstlink, som pages/archive-product.css styler; :where() holder den ude uden at hæve reglens specificitet. */
.wp-block-button.is-style-outline:where(:not(.wc-block-product-filter-clear-button)) > .wp-block-button__link {
	border: 1px solid currentColor;
	background: transparent;
}
.wp-block-button.is-style-outline:where(:not(.wc-block-product-filter-clear-button)) > .wp-block-button__link:not(.has-text-color) { color: var(--color-primary); }
.wp-block-button.is-style-outline:where(:not(.wc-block-product-filter-clear-button)) > .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--color-primary);
	color: var(--color-surface);
}

/* WooCommerce fjerner kanten med samme specificitet; .wp-element-button vinder. WooCommerces overflow: hidden gør knappen til en rullebeholder, som Chrome kun ruller polstringen af frem, så kanten kan ende under skærmkanten; clip klipper ens uden. */
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button.wp-element-button { border: 1px solid transparent; overflow: clip; }

/* Sidehovedets layout bor i blocks/header/style.css. Logo- og søge-klasserne herunder deles stadig med footeren og pto_data_soegning(). */
.logo { display: flex; align-items: center; gap: var(--space-10); flex-shrink: 0; position: relative; }
.logo::before {
	content: "";
	width: 56px; height: 36px;
	background: url("../img/pto-teknik-logo.png") left center / contain no-repeat;
	flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; line-height: 1; gap: var(--space-2); }
.logo-text .wp-block-site-title { font-weight: 700; font-size: var(--text-17); letter-spacing: -0.01em; margin: 0; }
.logo-text .wp-block-site-title a { color: var(--color-primary); }
.logo-text .wp-block-site-tagline {
	font-size: var(--text-10); font-family: var(--font-mono);
	color: var(--color-text-muted); margin: 0; letter-spacing: 0.04em; text-transform: uppercase;
}

.pto-search { flex: 1; max-width: 640px; }
/* Kant, radius og baggrund står på omslaget, så knappen ligger inde i feltet som et flex-barn, 4 px fra kanten. Kantfarven har 3:1 mod fladen. Knappen er 44 px høj; i sidehovedet fylder den fra 1024 px resten af feltets 44 px. Feltets bredde på 100 % giver det mindstebredden 0, så søgningen aldrig gør en grid- eller flexbeholder bredere. */
.pto-search .wp-block-search__inside-wrapper {
	position: relative; display: flex; align-items: center; gap: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--color-text-muted); border-radius: var(--radius-sm);
	background: var(--color-background);
	transition: border-color .15s, background .15s;
}
.pto-search .wp-block-search__inside-wrapper:focus-within { border-color: var(--color-primary); background: var(--color-surface); box-shadow: var(--shadow-focus); }
.pto-search .wp-block-search__input {
	flex: 1; width: 100%; min-width: 0; align-self: stretch;
	border: 0; background: transparent; color: var(--color-foreground);
	padding: 0 var(--space-12);
	font-family: inherit; font-size: var(--text-16);
	text-overflow: ellipsis;
}
.pto-search .wp-block-search__input:focus { outline: var(--space-2) solid transparent; }
.pto-search .wp-block-search__button { flex: none; margin: 0; min-height: var(--space-44); }
.header-search .wp-block-search__button {
	background: var(--color-primary); color: var(--color-surface);
	padding: 0 var(--space-14); border: 1px solid transparent;
	font-size: var(--text-13); font-weight: 600;
}
.header-search .wp-block-search__button:hover { background: var(--color-primary-deep); }
@media (min-width: 1024px) {
	.header-search .wp-block-search__input { font-size: var(--text-14); }
	.header-search .wp-block-search__button { min-height: calc( var(--space-44) - var(--space-8) - var(--space-2) ); }
}
/* Forstørrelsesglasset er en maske i tekstens dæmpede farve; feltet har polstring til det. */
:root { --pto-ikon-lup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.header-search .wp-block-search__inside-wrapper::before,
.hero-search .wp-block-search__inside-wrapper::before {
	content: "";
	position: absolute; left: var(--space-14); top: 50%; transform: translateY(-50%);
	width: var(--space-16); height: var(--space-16);
	background: var(--color-text-muted);
	-webkit-mask: var(--pto-ikon-lup) center / contain no-repeat;
	mask: var(--pto-ikon-lup) center / contain no-repeat;
	pointer-events: none;
}
.header-search .wp-block-search__input,
.hero-search .wp-block-search__input { padding-inline-start: var(--space-40); }

/* Søge-heroen (mønstret pto-teknik/soege-hero) er kerneblokke med temaets klasser: en gruppe på navy, overskrift, afsnit, søgefelt og mærkerne som links. Uden foto står en gradient bag teksten og et tegnegitter i den anden halvdel. */
/* Søgeforslagene rækker ned over den næste sektion: toppen klipper kun vandret og ligger over det, der følger. */
.pto-soege-hero { position: relative; z-index: 1; isolation: isolate; box-sizing: border-box; overflow: clip visible; color: var(--color-surface); }
.pto-soege-hero .pto-soege-hero__indhold { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); padding-block: var(--space-40); }
.pto-soege-hero__indhold > * { margin: 0; }
.pto-soege-hero__eyebrow { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-mono); font-size: var(--text-12); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-warm); }
.pto-soege-hero__eyebrow::before { content: ""; flex: none; width: 0; height: 0; border-block: 4px solid transparent; border-inline-start: 6px solid currentColor; }
/* Kernens globale h1-h6-farve (theme.json) sætter en eksplicit color på selve elementet, som ellers ville slå arven fra fladen fra. */
.pto-soege-hero__heading { font-size: var(--text-hero); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; color: var(--color-surface); }
.pto-soege-hero__tekst { font-size: var(--text-18); line-height: 1.55; color: var(--color-on-dark-85); max-width: 32.5rem; }
.pto-soege-hero__tekst strong { font-weight: 600; color: var(--color-surface); }
.pto-soege-hero .hero-search { margin-top: var(--space-12); }
.pto-soege-hero .hero-search .wp-block-search__inside-wrapper { background: var(--color-surface); border-color: transparent; box-shadow: var(--shadow-deep); }
.pto-soege-hero .hero-search .wp-block-search__button::after { content: "\00a0→" / ""; opacity: 0.7; }
.pto-soege-hero__maerker { display: flex; align-items: baseline; gap: var(--space-8); font-family: var(--font-mono); font-size: var(--text-12); letter-spacing: 0.04em; color: var(--color-on-dark-70); }
.pto-soege-hero__maerker::before { content: "→" / ""; color: var(--color-accent-warm); }
.pto-soege-hero__maerker:not(:has(li)) { display: none; }
.pto-soege-hero__maerker .wp-block-term-template { display: flex; flex-wrap: wrap; gap: 0 var(--space-12); margin: 0; padding: 0; list-style: none; }
.pto-soege-hero__maerker .wp-block-term a { display: inline-flex; align-items: center; min-height: var(--space-44); color: inherit; }
.pto-soege-hero__maerker .wp-block-term a:hover { color: var(--color-surface); }
@media (min-width: 640px) {
	.pto-soege-hero .pto-soege-hero__indhold { padding-block: var(--space-48); }
}
@media (min-width: 1024px) {
	.pto-soege-hero { min-height: 33.75rem; display: grid; align-items: center; }
	.pto-soege-hero::before,
	.pto-soege-hero::after { content: ""; position: absolute; inset: 0 50% 0 0; z-index: -1; background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary)); }
	.pto-soege-hero::after {
		inset: 0 0 0 50%;
		background:
			linear-gradient(90deg, var(--color-primary-deep), transparent 12%),
			linear-gradient(var(--color-accent-08) 1px, transparent 1px) 0 0 / 80px 80px,
			linear-gradient(90deg, var(--color-accent-08) 1px, transparent 1px) 0 0 / 80px 80px,
			linear-gradient(var(--color-on-dark-02) 1px, transparent 1px) 0 0 / 20px 20px,
			linear-gradient(90deg, var(--color-on-dark-02) 1px, transparent 1px) 0 0 / 20px 20px,
			linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
	}
	.pto-soege-hero .pto-soege-hero__indhold { position: relative; z-index: 1; grid-template-columns: minmax(0, min(35rem, calc(50% - var(--space-24)))) minmax(0, 1fr); gap: var(--space-20) 0; padding-block: var(--space-64); }
	.pto-soege-hero__indhold > * { grid-column: 1; }
	.pto-soege-hero .hero-search { max-width: 40rem; }
	.pto-soege-hero__maerker { font-size: var(--text-13); }
}

/* Footer, mobil-først: én kolonne, to fra 640 px og fire fra 1024 px. Under 1024 px er hvert link et klikmål på 44 px. */
.site-footer { background: var(--color-surface); border-top: 1px solid var(--rule); }
.site-footer > * { margin-block: 0 !important; }
.site-footer .foot-top { padding: var(--space-64) 0 0; }
.foot-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	padding-bottom: var(--space-56);
}
.foot-col h4, .foot-col .wp-block-heading {
	font-size: var(--text-13); font-family: var(--font-mono);
	text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);
	margin: 0 0 var(--space-16); font-weight: 500;
}
/* En overskrift under anden tekst i sin kolonne har samme luft over sig som kolonnerne har imellem sig under hinanden. */
.foot-col > * + .wp-block-heading { margin-block-start: var(--space-32); }
/* Under en overskrift gælder kun overskriftens egen afstand, så første punkt flugter på tværs af kolonnerne. */
.foot-col .wp-block-heading + * { margin-block-start: 0; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-8); }
/* Cookie-knappen står i sin egen liste efter menuens links; menuen er væk, når ingen af dens sider findes endnu. Linkene står mindst 8 px fra hinanden. Listen fylder intet, mens knappen er skjult. */
.foot-col ul:has(> li > .pto-cookie-knap[hidden]) { display: none; }
.foot-col .wp-block-navigation + ul { margin-block-start: var(--space-8); }
.foot-col ul a, .foot-col ul button { color: var(--color-primary); font-size: var(--text-14); }
.foot-col ul a:hover, .foot-col ul button:hover { color: var(--color-primary-deep); }
.foot-col .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--color-primary); font-size: var(--text-14); font-weight: 400; } /* dobbelt klasse: kernen sætter selv color:inherit med samme greb */
.foot-col .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: var(--color-primary-deep); }
.foot-col a:where(:not(.wp-element-button)),
.foot-col .wp-block-navigation-item__content,
.foot-col ul button { display: flex; align-items: center; min-height: var(--space-44); }
/* Samme link-idiom som naboteksterne. Ikke font: inherit — det nulstiller font-size fra .foot-col ul a, .foot-col ul button. */
.foot-col ul button { appearance: none; background: none; border: 0; margin: 0; padding: 0; text-align: left; font-family: inherit; font-weight: inherit; line-height: inherit; cursor: pointer; }
.foot-about .logo { margin-bottom: var(--space-16); }
.foot-about p { color: var(--color-text-muted); font-size: var(--text-14); line-height: 1.6; margin: 0 0 var(--space-16); max-width: 320px; }
.foot-col .wp-block-navigation { justify-content: flex-start; }
.foot-col .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.foot-col .wp-block-navigation-item__content.wp-block-navigation-item__content { padding: 0; }
/* Uden kontaktoplysninger skjules kolonnen, så overskriften ikke står over ingenting. */
.foot-contact:not(:has(.pto-kontakt)) { display: none; }
.foot-strip { background: var(--color-primary-deep); color: var(--color-on-dark-70); min-height: var(--space-56); }
.foot-strip .container {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
	min-height: var(--space-56); padding-top: var(--space-8); padding-bottom: var(--space-8); gap: var(--space-6);
	font-size: var(--text-12); font-family: var(--font-mono); letter-spacing: 0.04em;
}
.foot-strip p { margin: 0; color: var(--color-on-dark-70); }
.foot-strip .knowledge { color: var(--color-accent-warm); font-weight: 500; }
@media (min-width: 640px) {
	.foot-grid { grid-template-columns: 1fr 1fr; }
	.foot-strip .container { flex-direction: row; align-items: center; gap: var(--space-16); }
}
@media (min-width: 1024px) {
	/* Kolonnerne vokser 1,4 : 1 : 1,2; en kolonne uden indhold er fjernet og efterlader intet hul. */
	.foot-grid { display: flex; gap: var(--space-40); }
	.foot-col { flex: 1 1 0; min-width: 0; }
	.foot-about { flex-grow: 1.4; }
	.foot-contact { flex-grow: 1.2; }
	.foot-col ul,
	.foot-col .wp-block-navigation__container { gap: var(--space-10); }
	.foot-col .wp-block-navigation + ul { margin-block-start: var(--space-10); }
	.foot-col a:where(:not(.wp-element-button)),
	.foot-col .wp-block-navigation-item__content,
	.foot-col ul button { min-height: auto; }
}

/* Tofarvet ring (WCAG C40): navy bærer kontrasten på lyse flader, den varme orange på mørke. WooCommerce flytter fokus til sit beskedbanner med tabindex -1. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), .wp-block-navigation-item__content, .wp-element-button, .wc-block-components-notice-banner):focus-visible {
	outline: 2px solid var(--color-primary-deep);
	outline-offset: 2px;
	box-shadow: 0 0 0 var(--space-2) var(--color-accent-warm);
}
/* Produktkortets billede fylder sin klippende beholder, så ringen tegnes indad. WooCommerce fjerner skyggen, og billedet ville dække en indadvendt, så navy bærer ringen alene. */
.wc-block-components-product-image a:focus-visible { outline-offset: calc(var(--space-2) * -1); }
/* Rabatmærket på katalogets og søgningens kort har samme form og farver som mærket på varesiden (single-product.css), og står her, fordi kortene vises på flere sider end kurv og kasse. Dobbelt klasse slår WooCommerces placering med samme greb. */
.wc-block-components-product-image .wc-block-components-product-sale-badge.wc-block-components-product-sale-badge {
	position: absolute;
	inset: var(--space-12) auto auto var(--space-12);
	margin: 0;
	transform: none;
	padding: var(--space-4) var(--space-10);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-accent);
	color: var(--color-primary-deep);
	font-family: var(--font-mono);
	font-size: var(--text-12);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
/* Kortets titel klipper sine linjer med overflow: hidden, som også klipper linkets ring. Mens linket har fokus, klipper titlen med luft til ringen; en indadvendt ring ville dække teksten. Kender browseren ikke overflow-clip-margin, viser titlen alle linjer i stedet for at klippe ringen væk. */
.prod-title:has(> a:focus-visible) { overflow: clip; overflow-clip-margin: var(--space-4); }
@supports not (overflow-clip-margin: 0px) { .prod-title:has(> a:focus-visible) { overflow: visible; } }
/* Kernens søgeblok fjerner feltets outline med højere specificitet end reglen ovenfor. */
.pto-search.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input.wp-block-search__input:focus-visible {
	outline: 2px solid var(--color-primary-deep);
}
/* Sider uden eget udtryk (kurv, konto, almindelige sider): titel og indhold står i containeren. */
.pto-side { padding-bottom: var(--space-64); }
/* Titlens 48 px er hele afstanden til sidehovedet: to klasser slår kernens nulstilling af første barn, og blokafstanden over main lægges ikke oveni. */
.pto-side .pto-side__titel { font-size: var(--text-display); margin: var(--space-48) 0 var(--space-24); }
.wp-site-blocks > .pto-main.pto-side { margin-block-start: 0; }
/* Korte sider (tom søgning, 404, tom kurv) lader footeren stå nederst i billedet i stedet for midt på skærmen. */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > .pto-main { flex: 1 0 auto; }
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
	position: absolute; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--color-primary-deep); color: var(--color-surface); padding: var(--space-10) var(--space-16);
}
.skip-link:focus { left: 8px; top: 8px; }

/* Links i løbende tekst kendes på understregningen, ikke kun på farven (WCAG 1.4.1). Elementspecificitet: reglen slår theme.json's link på rækkefølgen og taber til komponenternes egne klasser. */
:where(.pto-main :is(p, .wc-block-components-notice-banner__content)) a:where(:any-link):where(:not(.wp-element-button, .button, .pto-more, .login-link)) {
	text-decoration-line: underline;
	text-underline-offset: 2px;
}

.crumb .woocommerce-breadcrumb { margin: 0; font-size: var(--text-13); color: var(--color-text-muted); overflow-wrap: anywhere; }
.crumb .woocommerce-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--space-44); color: inherit; }
.crumb .woocommerce-breadcrumb a:hover { color: var(--color-primary); }
.crumb .sep { margin: 0 var(--space-8); opacity: .5; }
.crumb .crumb-item:last-child { color: var(--color-foreground); font-weight: 500; }
@media (min-width: 1024px) {
	.crumb .woocommerce-breadcrumb a { display: inline; min-height: auto; }
}

/* En nedsat pris: WooCommerce og B2BKing sætter førprisen i del og prisen i ins om beløbene. Redaktionel del og ins står urørt. */
del:has(.woocommerce-Price-amount) { font-size: 0.7em; text-decoration-line: line-through; }
del:has(.woocommerce-Price-amount),
del .woocommerce-Price-amount { color: var(--color-text-muted); font-weight: 400; }
ins:has(.woocommerce-Price-amount) { text-decoration: none; }

/* Prisslots og B2B-login skjules for indloggede; B2BKing viser kundeprisen. */
body.logged-in .your-price,
body.logged-in .pto-b2b,
body.logged-in .login-link,
body.logged-in .login-link-slot { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/* WooCommerces egne beskeder (kurv, kasse, konto, tilføjet til kurv), også blokkenes: fladen og kanten følger temaet, og kantens farve siger hvilken slags besked det er. */
body .woocommerce-info,
body .woocommerce-message,
body .woocommerce-error,
body .wc-block-components-notice-banner:is(.is-info, .is-success, .is-error, .is-warning) {
	--besked-farve: var(--color-primary);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8) var(--space-16);
	margin: 0 0 var(--space-24);
	padding: var(--space-16) var(--space-20);
	list-style: none;
	background: var(--color-surface);
	color: var(--color-foreground);
	border: 1px solid var(--rule);
	border-left: 4px solid var(--besked-farve);
	border-radius: var(--radius-sm);
	font-size: var(--text-14);
	line-height: 1.5;
}
body .woocommerce-message,
body .wc-block-components-notice-banner.is-success { --besked-farve: var(--color-success); }
body .wc-block-components-notice-banner.is-error { --besked-farve: var(--color-danger); }
body .wc-block-components-notice-banner.is-warning { --besked-farve: var(--color-warning); }
body .woocommerce-error { --besked-farve: var(--color-danger); display: block; }
body .woocommerce-error li { margin: 0; padding: 0; }
body .woocommerce-error li + li { margin-block-start: var(--space-8); }
body .woocommerce-info::before,
body .woocommerce-message::before,
body .woocommerce-error::before { content: none; }
body .wc-block-components-notice-banner > svg { display: none; }
body .wc-block-components-notice-banner__content > ul:only-child { margin: 0; padding: 0; list-style: none; }
body .woocommerce-info .button,
body .woocommerce-message .button { float: none; order: 2; margin-inline-start: auto; }
body .woocommerce-info a:not(.button),
body .woocommerce-message a:not(.button),
body .woocommerce-error a:not(.button) { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
/* «Se kurv» i blokbanneret er temaets sekundære knap. WooCommerce sætter farve, flade og polstring med !important og lægger knappen med float. */
body .wc-block-components-notice-banner__content:has(> .wc-forward) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-16); }
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
	float: none;
	padding: 0 var(--space-16) !important;
	background: transparent;
	color: var(--color-primary) !important;
	border: 1px solid currentColor;
	opacity: 1;
	text-decoration: none;
}
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:is(:hover, :focus-visible) { background: var(--color-primary) !important; color: var(--color-surface) !important; }
body.woocommerce-cart .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward { display: none; }