

.prod .crumb,
.prod-atf,
.prod-tabnav,
.prod-block { width: 100%; }

/* Temaets blockGap lægger en afstand over hvert barn i en flow-gruppe. Sektionerne og kolonnerne her har selv deres afstande. */
.pto-main.prod > *,
.prod .container > *,
.prod .atf-grid > *,
.prod .info-pane > *,
.prod .spec-group > *,
.prod .fit-brand > *,
.prod .files > *,
.prod .file-row > *,
.prod :is(.trust-strip, .trust-line, .fit-notice, .qa-grid, .faq, .qa-form-card) > * { margin-block-start: 0; }
.woocommerce.product:has(> .pto-main.prod) { margin-block-start: 0; }

.prod .crumb {
	background: var(--color-surface);
	border-bottom: 1px solid var(--rule);
	padding: var(--space-14) 0;
	font-size: var(--text-13);
	color: var(--color-text-muted);
}
.prod .crumb .container { display: block; }
/* Varens eget navn står i H1 lige under og gentages ikke her; skjulet i visningen, så skemaets brødkrumme (Rank Math) er urørt. Under 640 px står kun det nærmeste led som ét link «‹ Kategori», så stien aldrig brydes eller afkortes. */
.prod .crumb .woocommerce-breadcrumb {
	margin: 0;
	font-size: var(--text-13);
	color: var(--color-text-muted);
	overflow-wrap: anywhere;
}
.prod .crumb .woocommerce-breadcrumb a { color: inherit; text-decoration: none; }
.prod .crumb .woocommerce-breadcrumb a:hover { color: var(--color-primary); }
.prod .crumb .crumb-item:last-child,
.prod .crumb .sep:has(+ .crumb-item:last-child) { display: none; }
@media (width < 640px) {
	.prod .crumb .woocommerce-breadcrumb > :not(.crumb-item:has(+ .sep + .crumb-item:last-child)) { display: none; }
	.prod .crumb .crumb-item:has(+ .sep + .crumb-item:last-child)::before { content: "\2039\00a0" / ""; }
}

.prod-atf { background: var(--color-surface); padding: var(--space-32) 0 var(--space-56); }
.prod-atf .container { display: block; }
.atf-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	align-items: flex-start;
}

/* WooCommerces galleri. Blokkens 512 px, layoutets egen float og 48 % bredde nulstilles, og billedfladen får ramme og fast format. */
.prod .gallery-col .wp-block-woocommerce-product-image-gallery { max-width: none; }
.prod .gallery-col .woocommerce-product-gallery.images { float: none; width: 100%; max-width: none; margin: 0; }
.prod .gallery-col .woocommerce-product-gallery.images :is(.flex-viewport, .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper) {
	box-sizing: content-box;
	background: var(--color-surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.prod .gallery-col .woocommerce-product-gallery.images :is(.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder) { position: relative; aspect-ratio: 11 / 7.5; }
.prod .gallery-col .woocommerce-product-gallery.images .woocommerce-product-gallery__image a { position: absolute; inset: 0; }
/* Flexsliders viewport klipper alt uden for billedet, så linkets ring tegnes indad; billedet ville dække en indadvendt skygge, så navy bærer ringen alene. */
.prod .gallery-col .woocommerce-product-gallery.images .woocommerce-product-gallery__image a:focus-visible { outline-offset: calc(var(--space-2) * -1); box-shadow: none; }
.prod .gallery-col .woocommerce-product-gallery.images :is(.woocommerce-product-gallery__image a, .woocommerce-product-gallery__image--placeholder) img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4%;
	box-sizing: border-box;
}
.prod .gallery-col .woocommerce-product-gallery.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-8);
	margin: var(--space-12) 0 0;
	padding: 0;
	overflow: visible;
	list-style: none;
}
.prod .gallery-col .woocommerce-product-gallery.images .flex-control-thumbs li { float: none; width: auto; margin: 0; }
.prod .gallery-col .woocommerce-product-gallery.images .flex-control-thumbs li img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 8%;
	box-sizing: border-box;
	background: var(--color-surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	opacity: 0.4;
	filter: grayscale(1);
	transition: opacity .15s, filter .15s;
}
.prod .gallery-col .woocommerce-product-gallery.images .flex-control-thumbs li img.flex-active,
.prod .gallery-col .woocommerce-product-gallery.images .flex-control-thumbs li img:hover { border-color: var(--color-primary); opacity: 1; filter: none; }
/* WooCommerces zoomknap tegner luppen med sorte streger; den følger knappens farve og er et klikmål på 44 px under 1024 px. */
.prod .gallery-col .woocommerce-product-gallery.images .woocommerce-product-gallery__trigger { color: var(--color-primary); }
.prod .gallery-col .woocommerce-product-gallery.images .woocommerce-product-gallery__trigger::before { border-color: currentColor; }
.prod .gallery-col .woocommerce-product-gallery.images .woocommerce-product-gallery__trigger::after { background: currentColor; }
@media (width < 1024px) {
	.prod .gallery-col .woocommerce-product-gallery.images .woocommerce-product-gallery__trigger { width: var(--space-44); height: var(--space-44); }
	.prod .gallery-col .woocommerce-product-gallery.images .woocommerce-product-gallery__trigger::before { left: 13px; top: 13px; }
	.prod .gallery-col .woocommerce-product-gallery.images .woocommerce-product-gallery__trigger::after { left: 26px; top: 23px; }
}

/* WooCommerces udsalgsmærke (B2BKings rabatnavn) som mærkeformen ved infofeltet, i CTA'ens farver, inde i billedrammen. Blokklassen tages med, fordi WooCommerces galleriblok placerer mærket med samme specificitet. */
.prod .gallery-col .wp-block-woocommerce-product-image-gallery span.onsale {
	top: var(--space-12);
	left: var(--space-12);
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: var(--space-4) var(--space-10);
	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;
}

.info-pane { background: var(--color-surface); }
.info-brand {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--text-12);
	color: var(--color-primary);
	background: var(--color-navy-06);
	padding: var(--space-4) var(--space-10);
	border-radius: var(--radius-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: var(--space-16);
}
.info-brand:hover { background: var(--color-navy-12); }
.info-pane h1 { font-size: var(--text-28); font-weight: 600; line-height: 1.25; margin: 0 0 var(--space-20); letter-spacing: -0.02em; overflow-wrap: anywhere; hyphens: manual; }
.info-pane .subtitle { font-size: var(--text-17); color: var(--color-text-muted); font-weight: 400; line-height: 1.4; margin: 0 0 var(--space-20); }
.info-pane .subtitle a { color: inherit; }
.info-pane .info-summary { font-size: var(--text-15); line-height: 1.5; color: var(--color-foreground); margin: 0 0 var(--space-20); max-width: 60ch; }
.info-pane .info-summary p { margin: 0; }

.info-codes {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: var(--space-6) var(--space-16);
	font-size: var(--text-13);
	margin: 0 0 var(--space-20);
	padding: var(--space-14) 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.info-codes > * { margin: 0; }
.info-codes .code-lbl { margin: 0; color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-12); }
.info-codes :is(.sku-val, .oe-val) { margin: 0; font-family: var(--font-mono); font-size: var(--text-13); color: var(--color-foreground); overflow-wrap: anywhere; }
.info-codes :is(.sku-val, .oe-val) p { margin: 0; }
.info-codes :is(.sku-val, .oe-val) a { color: var(--color-primary); border-bottom: 1px solid var(--rule-strong); padding-bottom: 1px; }
.info-codes :is(.sku-val, .oe-val) a:hover { border-bottom-color: var(--color-primary); }

/* Lagerstatus står én gang: WooCommerces blok. Den tilsvarende linje i kurvformularen skjules. */
.prod .info-pane .stock-line-wrap {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin: 0 0 var(--space-18);
	font-size: var(--text-14);
	font-weight: 600;
	color: var(--color-success);
}
.prod .info-pane .stock-line-wrap::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-circle); background: currentColor; flex-shrink: 0; }
.prod .info-pane .stock-line-wrap.wc-block-components-product-stock-indicator--available-on-backorder { color: var(--color-warning); }
.prod .info-pane .stock-line-wrap.wc-block-components-product-stock-indicator--out-of-stock { color: var(--color-danger); }
/* En variabel vare har ingen lagertekst, før en variation er valgt; prikken står ikke alene. */
.prod .info-pane .stock-line-wrap:empty { display: none; }
.prod .info-pane .wc-block-add-to-cart-form p.stock { display: none; }

.price-block {
	display: flex; flex-direction: column; gap: var(--space-4);
	padding: var(--space-18) 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	margin-bottom: var(--space-18);
}
.price-block .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4) var(--space-12); }
.price-block .row > .list { margin-inline-start: auto; }
/* Etiketten følger, hvem der ser prisen: en gæst ser listeprisen, en indlogget kunde sin egen pris. Uden pris er der hverken en listepris eller noget at logge ind for. */
body.logged-in .price-block .kun-gaest,
body:not(.logged-in) .price-block .kun-kunde,
.price-block .pto-foerpris,
.price-block:has(.pto-forespoerg) :is(.label, .your-price) { display: none; }
/* En kunde med kundepris ser listeprisen overstreget i rækken over sin egen pris og enheden under den. WooCommerces prisblok foldes ud i rækkens gitter, så hver pris står ud for sin etiket.
   Under 360 px er der ikke plads til den længste pris (seks cifre) ved siden af etiketten, så etiketten står over prisen. */
body.logged-in .price-block .row:has(del) { display: grid; grid-template: "foer del" "label ins" / 1fr auto; column-gap: var(--space-12); }
body.logged-in .price-block .row:has(del) :is(.list, .wc-block-components-product-price) { display: contents; }
body.logged-in .price-block .row:has(del) .pto-foerpris { display: block; grid-area: foer; }
body.logged-in .price-block .row:has(del) .label { grid-area: label; }
body.logged-in .price-block .row:has(del) del { grid-area: del; }
body.logged-in .price-block .row:has(del) ins { grid-area: ins; }
body.logged-in .price-block .row:has(del) .pto-pris-enhed { grid-column: ins; }
body.logged-in .price-block .row:has(del) :is(del, ins, .pto-pris-enhed) { justify-self: end; }
@media (width < 360px) {
	body.logged-in .price-block .row:has(del) { grid-template: "foer" "del" "label" "ins" / 1fr; }
}
.price-block .row.your-price { margin-top: var(--space-8); padding-top: var(--space-10); border-top: 1px dashed var(--rule); }
.price-block :is(.label, .pto-foerpris) { font-size: var(--text-13); color: var(--color-text-muted); }
.price-block .list { font-size: var(--text-28); font-weight: 700; font-family: var(--font-mono); letter-spacing: -0.02em; }
.price-block .vat { font-size: var(--text-12); color: var(--color-text-muted); font-family: var(--font-mono); }
.price-block .login-link { font-size: var(--text-14); color: var(--color-primary); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 1px; font-weight: 500; }
.price-block .login-link:hover { border-bottom-color: var(--color-primary); }

/* Købsområdet er WooCommerces formular med stepper. Kun layout og udseende er vores; selektorerne er så lange, at de vinder over WooCommerces egne ark. */
.prod .info-pane .wc-block-add-to-cart-form { margin: 0 0 var(--space-20); }
.prod .info-pane .wc-block-add-to-cart-form :is(form.cart, .variations_button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
}
.prod .info-pane .wc-block-add-to-cart-form :is(form.cart, .variations_button)::before,
.prod .info-pane .wc-block-add-to-cart-form :is(form.cart, .variations_button)::after { content: none; }
.prod .info-pane .wc-block-add-to-cart-form form.cart:not(.variations_form):has(.quantity input:not([type="hidden"]))::before,
.prod .info-pane .wc-block-add-to-cart-form .variations_button:has(.quantity input:not([type="hidden"]))::before {
	content: "Antal:";
	font-size: var(--text-13);
	color: var(--color-text-muted);
}
.prod .info-pane .wc-block-add-to-cart-form :is(form.cart, .variations_button) > :not(.quantity) { flex: 1 0 100%; margin: 0; }
.prod .info-pane .wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart .wc-block-components-quantity-selector.quantity {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	width: auto;
	height: 48px;
	margin: 0;
	border: 1px solid var(--rule-field);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-foreground);
	overflow: hidden;
}
.prod .info-pane .wc-block-add-to-cart-form--stepper form.cart .wc-block-components-quantity-selector input.input-text.qty.text {
	width: 60px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--font-mono);
	font-size: var(--text-16);
	font-weight: 500;
	color: var(--color-foreground);
	background: var(--color-surface);
}
.prod .info-pane .wc-block-add-to-cart-form .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: var(--space-44);
	min-height: var(--space-44);
	font-size: var(--text-18);
	color: var(--color-foreground);
	opacity: 1;
}
.prod .info-pane .wc-block-add-to-cart-form .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--minus { border-right: 1px solid var(--rule); }
.prod .info-pane .wc-block-add-to-cart-form .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--plus { border-left: 1px solid var(--rule); }
.prod .info-pane .wc-block-add-to-cart-form .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover { background: var(--color-background); }
/* Købsboksens primære handling: «Læg i kurv», på en variabel vare linket til variant-tabellen og på en familie med én variant tabellens formular. */
.prod .info-pane .wc-block-add-to-cart-form > .pto-vt__form { flex-wrap: nowrap; gap: var(--space-12); }
.prod .info-pane .wc-block-add-to-cart-form > .pto-vt__form .pto-vt__antal { min-height: 56px; }
.prod .info-pane .wc-block-add-to-cart-form form.cart .single_add_to_cart_button,
.prod .info-pane .wc-block-add-to-cart-form > .pto-vt__form .wp-element-button,
.prod .info-pane .wc-block-add-to-cart-form > a.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	width: 100%;
	min-height: 56px;
	font-size: var(--text-16);
	font-weight: 700;
	box-shadow: var(--shadow-accent);
}
.prod .info-pane .wc-block-add-to-cart-form form.cart .single_add_to_cart_button::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* «Sammenlign» er en sekundær handling under købet. */
.prod .info-pane .pto-sammenlign { margin: 0 0 var(--space-20); }
.prod .info-pane .pto-sammenlign .wp-block-button__link { min-height: var(--space-44); background: transparent; color: var(--color-primary); border: 1px solid var(--rule-strong); font-size: var(--text-13); }
.prod .info-pane .pto-sammenlign .wp-block-button__link:hover { border-color: var(--color-primary); }

.trust-strip {
	background: var(--color-background);
	border-radius: var(--radius-sm);
	padding: var(--space-14) var(--space-16);
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
}
.trust-line { display: flex; align-items: flex-start; gap: var(--space-10); font-size: var(--text-13); line-height: 1.45; }
.trust-line .ico { color: var(--color-primary); width: 18px; height: 18px; flex-shrink: 0; display: inline-block; }
.trust-line .ico svg { width: 18px; height: 18px; display: block; }
.trust-line:has(> p:empty), .fit-notice .phone:empty { display: none; }
.trust-line a { color: var(--color-primary); border-bottom: 1px solid var(--rule-strong); padding-bottom: 1px; font-family: var(--font-mono); }
.trust-line a:hover { border-bottom-color: var(--color-primary); }
.trust-line a[href^="tel:"] { white-space: nowrap; }

.prod-tabnav {
	background: var(--color-surface);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
/* Fanerne står på én linje og ruller vandret, hvor de ikke er plads til alle; fanens navn er sektionens overskrift. */
.prod-tabnav .container { display: flex; column-gap: var(--space-24); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.prod-tabnav a { flex: none; white-space: nowrap; }
/* Hvor der er mere at rulle til, viser en skygge det ved kanten: dæklaget følger indholdet og skjuler skyggen, når enden er nået. */
.prod-tabnav .container {
	background:
		linear-gradient(to right, var(--color-surface) 30%, transparent) left center / var(--space-32) 100% no-repeat local,
		linear-gradient(to left, var(--color-surface) 30%, transparent) right center / var(--space-32) 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, var(--color-navy-12), transparent) left center / var(--space-12) 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, var(--color-navy-12), transparent) right center / var(--space-12) 100% no-repeat scroll;
}
.prod-tabnav a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 52px;
	padding: 0;
	font-size: var(--text-14);
	font-weight: 500;
	color: var(--color-text-muted);
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
}
.prod-tabnav a:hover { color: var(--color-primary); }
/* Bjælken står tæt op ad sidehovedet, så fokusringen tegnes indad og ikke ind bag sidehovedet. */
.prod-tabnav a:focus-visible { outline-offset: calc(var(--space-4) * -1); box-shadow: inset 0 0 0 var(--space-2) var(--color-accent-warm); }
/* Uden et datablad skjules både sektionen og fanen, der peger på den. */
.prod #datablade:not(:has(.dl-btn a[href]:not([href=""]))) { display: none; }
.prod:not(:has(#datablade .dl-btn a[href]:not([href=""]))) .prod-tabnav a[href="#datablade"] { display: none; }
/* Uden køretøjer har afsnittet intet at vise; uden OE-numre står rækken ikke. */
.prod #anvendelse:not(:has(.fit-terms)) { display: none; }
.prod:not(:has(#anvendelse .fit-terms)) .prod-tabnav a[href="#anvendelse"] { display: none; }
/* Uden OE-numre eller varenummer (en families eget) står rækken ikke, og uden nogen af dem står listen ikke. */
.info-codes:not(:has(.oe-val *)) > :is(.oe-val, .code-lbl:has(+ .oe-val)) { display: none; }
.info-codes:not(:has(.sku-val *)) > :is(.sku-val, .code-lbl:has(+ .sku-val)) { display: none; }
.info-codes:not(:has(:is(.sku-val, .oe-val) *)) { display: none; }
/* Uden varer står overskriften ikke alene. Relaterede varer er reserven, når varen ingen sammenlignelige har. */
.prod .prod-block:has(:is(.related-row, .kobling-row)):not(:has(.related-grid > li)) { display: none; }
.prod:has(.pto-sammenlignelige .related-grid > li) .pto-relaterede { display: none; }

.prod-block { padding: var(--space-56) 0; background: var(--color-surface); border-bottom: 1px solid var(--rule); }
.prod-block.bg { background: var(--color-background); }
.prod-block .container { display: block; }
.block-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-28); gap: var(--space-20); flex-wrap: wrap; }
.block-head h2 { font-size: var(--text-26); font-weight: 600; margin: 0; letter-spacing: -0.02em; }
/* Variant-tabellen følger lige efter købsboksen, og fanebjælken under den har selv sin streg. */
.prod .pto-vt { padding-top: 0; }
.prod .pto-vt:has(+ .prod-tabnav) { border-bottom: 0; }
.block-head .head-link { color: var(--color-primary); font-size: var(--text-14); border-bottom: 1px solid currentColor; padding-bottom: var(--space-2); white-space: nowrap; }
.max-prose { max-width: 760px; overflow-wrap: break-word; }
.max-prose p { margin: 0 0 var(--space-16); line-height: 1.75; }
.max-prose p:last-child { margin-bottom: 0; }

.specs-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-32) var(--space-56); }
.spec-group { min-width: 0; }
.spec-group.span-2 { grid-column: 1 / -1; }
.spec-group h3 {
	font-size: var(--text-12);
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	font-weight: 500;
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--rule);
	margin: 0 0 var(--space-8);
}
/* WooCommerces specifikationsblok er en figur med en tabel. Kernens tabelramme og afsnittenes marginer nulstilles. */
.prod .spec-table { margin: 0; }
.prod .spec-table table { width: 100%; border-collapse: collapse; font-size: var(--text-14); }
.prod .spec-table tbody th,
.prod .spec-table tbody td { padding: var(--space-8) 0; border: 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.prod .spec-table tbody tr:last-child th,
.prod .spec-table tbody tr:last-child td { border-bottom: 0; }
.prod .spec-table tbody th { width: 40%; color: var(--color-text-muted); font-weight: 400; }
.prod .spec-table tbody td { font-family: var(--font-mono); font-weight: 500; color: var(--color-foreground); }
.prod .spec-table tbody td p { margin: 0; }
.prod .spec-table tbody td[data-tekst] { font-family: var(--font-sans); font-weight: 400; }
/* En sektion uden indhold fra varen står ikke, heller ikke dens fane: ingen beskrivelse, ingen attributter, ingen relaterede varer. */
.prod #beskrivelse:not(:has(.wc-block-product-description)),
.prod #specs:not(:has(.spec-table)),
.prod .prod-block:has(> .container > .block-head:only-child),
.prod:not(:has(#beskrivelse .wc-block-product-description)) .prod-tabnav a[href="#beskrivelse"],
.prod:not(:has(#specs .spec-table)) .prod-tabnav a[href="#specs"] { display: none; }

.btn-print {
	display: inline-flex; align-items: center; gap: var(--space-8);
	min-height: 44px; height: 44px; padding: 0 var(--space-14);
	border: 1px solid var(--rule-strong);
	background: var(--color-surface);
	border-radius: var(--radius-sm);
	font-size: var(--text-13);
	font-weight: 500;
	color: var(--color-foreground);
	cursor: pointer;
}
.btn-print:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-print svg { width: 14px; height: 14px; }

.fit-table { display: grid; grid-template-columns: 1fr; gap: var(--space-28); }
.fit-brand h3 { font-size: var(--text-18); font-weight: 600; margin: 0 0 var(--space-10); display: flex; align-items: center; gap: var(--space-12); }
.fit-brand .badge { font-family: var(--font-mono); font-size: var(--text-11); color: var(--color-text-muted); background: var(--color-background); padding: var(--space-3) var(--space-8); border-radius: var(--radius-sm); font-weight: 500; }

.prod .fit-notice {
	margin-top: var(--space-28);
	background: var(--color-cream);
	border: 1px solid var(--color-accent-25);
	border-left: 4px solid var(--color-accent);
	border-radius: var(--radius-sm);
	padding: var(--space-20) var(--space-24);
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}
.fit-notice h3 { font-size: var(--text-14); font-weight: 600; margin: 0; }
.fit-notice p { font-size: var(--text-14); line-height: 1.6; margin: 0; color: var(--color-foreground); }
.fit-notice .phone { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-mono); font-size: var(--text-14); color: var(--color-primary); font-weight: 500; }
.fit-notice .phone a { color: inherit; }

.files { display: flex; flex-direction: column; gap: var(--space-8); }
.file-row {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: center;
	gap: var(--space-8);
	row-gap: var(--space-6);
	padding: var(--space-16) var(--space-20);
	background: var(--color-surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	transition: border-color .15s;
}
.file-row:hover { border-color: var(--rule-strong); }
.file-row .ico { color: var(--color-primary); width: 22px; height: 22px; display: inline-block; }
.file-row .ico svg { width: 22px; height: 22px; display: block; }
.file-row .name { font-weight: 500; font-size: var(--text-15); }
.file-row .size { grid-column: 2; font-family: var(--font-mono); font-size: var(--text-12); color: var(--color-text-muted); }
.prod .file-row .dl-btn { display: grid; grid-column: 1 / -1; margin: 0; }
.prod .file-row .dl-btn .wp-block-button__link {
	width: 100%;
	color: var(--color-primary);
	background: var(--color-surface);
	border: 1px solid var(--color-primary);
	transition: background .15s, color .15s;
}
.prod .file-row .dl-btn .wp-block-button__link:hover,
.prod .file-row .dl-btn .wp-block-button__link:focus-visible { color: var(--color-surface); background: var(--color-primary); }

.lager-stat {
	display: flex; align-items: center; gap: var(--space-12);
	font-size: var(--text-22); font-weight: 600; color: var(--color-success); margin-bottom: var(--space-10);
}
.lager-stat .stock-dot { width: 14px; height: 14px; border-radius: var(--radius-circle); background: var(--color-success); flex-shrink: 0; }
.lager-info { font-size: var(--text-15); line-height: 1.7; max-width: 640px; }
.lager-info strong { font-family: var(--font-mono); font-weight: 500; color: var(--color-warning); }
.lager-notice {
	margin-top: var(--space-24);
	background: var(--color-background);
	border-left: 4px solid var(--color-primary);
	padding: var(--space-18) var(--space-22);
	border-radius: var(--radius-sm);
	font-size: var(--text-14);
	line-height: 1.6;
	max-width: 640px;
}
.lager-notice .phone { display: inline-flex; align-items: center; gap: var(--space-6); font-family: var(--font-mono); color: var(--color-primary); font-weight: 600; }

.qa-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-32); }
.faq { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
	box-sizing: border-box;
	padding: var(--space-18) 0;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-16);
	font-weight: 500;
	font-size: var(--text-15);
	min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+" / ""; font-size: var(--text-22); color: var(--color-text-muted); font-weight: 300; flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212" / ""; }
.faq-item .answer { padding-bottom: var(--space-18); color: var(--color-text-muted); font-size: var(--text-14); line-height: 1.7; }

.qa-form-card { background: var(--color-background); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--space-28); }
.qa-form-card h3 { font-size: var(--text-18); font-weight: 600; margin: 0 0 var(--space-6); }
.qa-form-card > p { font-size: var(--text-14); color: var(--color-text-muted); margin: 0 0 var(--space-20); line-height: 1.6; }

/* Kortenes gitter ligger på WooCommerces liste, ikke på blokkens omslag. Under 480 px får hvert spor plads til en pris på 14 tegn, som aldrig brydes; er skærmen smallere, står kortene i ét spor i stedet for at skubbe siden ud til siden. */
.prod :is(.related-row, .kobling-row) { margin: 0; }
.prod :is(.related-row, .kobling-row) .related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}
.prod :is(.related-row, .kobling-row) .related-grid > li { margin: 0; }
/* Titlens link dækker hele kortet; mærkets link ligger over det. */
.prod-card-mini {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	padding: var(--space-10);
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	transition: border-color .15s, box-shadow .15s;
}
.prod-card-mini:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-pop); }
.prod-card-mini .brand { position: relative; z-index: 1; font-family: var(--font-mono); font-size: var(--text-10); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.06em; }
/* Kortets flex-layout fra editoren står på flex-start, og uden bredde giver aspect-ratio en boks på 0 px. */
.prod-card-mini .card-thumb {
	align-self: stretch;
	aspect-ratio: 1;
	background: var(--color-surface);
	border-radius: var(--radius-sm);
	position: relative;
}
.prod-card-mini .card-thumb img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
	padding: 8%;
	box-sizing: border-box;
}
.prod-card-mini .title { font-size: var(--text-13); font-weight: 600; line-height: 1.3; min-height: 34px; overflow-wrap: anywhere; }
.prod-card-mini .title a { color: var(--color-foreground); }
.prod-card-mini .title a::after { content: ""; position: absolute; inset: 0; }
.prod-card-mini .price { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-15); }

@media (min-width: 480px) {
	.prod :is(.related-row, .kobling-row) .related-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
	.prod-card-mini { padding: var(--space-14); }
}
@media (min-width: 640px) {
	.prod-tabnav .container { column-gap: calc(var(--space-18) * 2); }
	.prod .gallery-col .woocommerce-product-gallery.images .flex-control-thumbs { grid-template-columns: repeat(5, 1fr); }
	.prod .spec-table tbody th { width: 200px; }
	.file-row { grid-template-columns: 40px 1fr 80px 130px; row-gap: var(--space-8); }
	.file-row .size { grid-column: auto; }
	.prod .file-row .dl-btn { grid-column: auto; }
}
/* Fra 768 px står købsboksen ved siden af galleriet, så den er over folden på en tablet; den står fast fra 1024 px. */
@media (min-width: 768px) {
	.atf-grid { grid-template-columns: 1.2fr 1fr; }
}
@media (min-width: 1024px) {
	.atf-grid { grid-template-columns: 1.5fr 1fr; gap: var(--space-48); }
	.prod .gallery-col .woocommerce-product-gallery.images .flex-control-thumbs { grid-template-columns: repeat(7, 1fr); }
	.info-pane { position: sticky; top: calc(var(--header-height) + 12px); }
	.prod-tabnav { position: sticky; top: var(--header-height); z-index: 20; }
	/* Fra 1024 px står fanebjælken fast nedenfor sidehovedet, så fokus og ankermål skal lande nedenfor begge. */
	html:has(.prod-tabnav) { --fanebjaelke-hoejde: var(--space-56); scroll-padding-top: calc(var(--header-height) + var(--fanebjaelke-hoejde) + var(--space-8)); }
	.specs-grid { grid-template-columns: 1fr 1fr; }
	/* En lang attributliste står i to spalter som forlæggets specifikationer; tabellen brydes mellem rækkerne. */
	.prod .spec-table:has(tbody tr:nth-child(12)) { columns: 2; column-gap: var(--space-56); }
	.prod .spec-table tbody tr { break-inside: avoid; }
	.qa-grid { grid-template-columns: 1fr 1fr; gap: var(--space-56); }
	.prod :is(.related-row, .kobling-row) .related-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Variant-tabellen: spec-tabellens streger og monoværdier, kurvtabellens kolonneoverskrifter. Den ruller i sin egen beholder, højst en skærmhøjde høj, med fastlåste kolonneoverskrifter; scroll-padding-top holder fokus fri af overskrifterne.
   Bestil står fast i højre side i alle bredder, prisen fra 480 px lige til venstre for den, varenummeret fra 640 px i venstre. Bestil har en fast bredde, fordi prisen står fast lige til venstre for den; antal og knap brydes hellere, end kolonnen bliver bredere.
   position: relative gør beholderen til indeslutning for skærmlæsertekst i cellerne (position: absolute); ellers ligger den uden for beholderen og giver siden vandret overløb. Tabellen og bundskyggen deler gitterets ene celle, så skyggen er lige så bred som tabellen. */
.pto-vt { --pto-vt-bestil: calc(var(--space-80) + var(--space-64)); }
.pto-vt__rul { position: relative; display: grid; overflow-x: auto; max-height: calc(100svh - var(--header-height) - var(--space-96)); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--color-surface); scroll-padding-left: var(--space-96); scroll-padding-top: var(--space-80); }
.pto-vt__rul > .pto-vt__tabel,
.pto-vt__rul::after { grid-area: 1 / 1; }
.pto-vt__tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-14); }
.pto-vt__tabel th,
.pto-vt__tabel td { padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; white-space: nowrap; }
.pto-vt__tabel tbody tr:last-child > * { border-bottom: none; }
.pto-vt__tabel thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	white-space: normal;
	vertical-align: bottom;
	font-family: var(--font-mono);
	font-size: var(--text-12);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
	background: var(--color-background);
}
.pto-vt__tabel th:first-child { border-right: 1px solid var(--rule); }
.pto-vt__tabel tbody th { font-family: var(--font-mono); font-size: var(--text-13); font-weight: 500; color: var(--color-foreground); background: var(--color-surface); }
.pto-vt__tabel td { font-family: var(--font-mono); font-weight: 500; color: var(--color-foreground); }
.pto-vt__tabel :is(.pto-vt__pris, .pto-vt__bestil) { position: sticky; z-index: 1; background: var(--color-surface); }
.pto-vt__tabel thead :is(.pto-vt__pris, .pto-vt__bestil) { z-index: 3; background: var(--color-background); }
.pto-vt__tabel .pto-vt__bestil { right: 0; box-sizing: border-box; width: var(--pto-vt-bestil); min-width: var(--pto-vt-bestil); }
.pto-vt__tabel .pto-vt__pris { right: var(--pto-vt-bestil); text-align: right; }
.pto-vt__tabel td.pto-vt__pris { font-weight: 700; }
/* Kolonnens overskrift siger, om priserne er med eller uden moms. */
.pto-vt__tabel td.pto-vt__pris .wts-vat-text { display: none; }
.pto-vt__lever { margin: 0 0 var(--space-12); color: var(--color-text-muted); font-size: var(--text-14); }
.pto-vt__tabel td.pto-vt__bestil { white-space: normal; }
.pto-vt__tabel tbody tr:hover > * { background: var(--color-background); }
.pto-vt__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: 0; }

/* Skygger viser, hvor der er mere at rulle til: ved prisens kant (under 480 px bestils) og i bunden, til enden er nået, og ved varenummerets kant (under 640 px beholderens), når der er rullet. De er skygger og ikke striber, så de ikke giver cellerne overløb. Uden scroll-drevne animationer står højre og bund fast. */
.pto-vt__tabel .pto-vt__pris { box-shadow: calc(var(--space-12) * -1) 0 var(--space-12) calc(var(--space-12) * -1) var(--color-navy-12); }
.pto-vt__rul::after { content: ""; position: sticky; bottom: 0; z-index: 4; align-self: end; height: var(--space-24); pointer-events: none; background: linear-gradient(transparent, var(--color-navy-08)); }
@keyframes pto-vt-mere { from, 95% { box-shadow: calc(var(--space-12) * -1) 0 var(--space-12) calc(var(--space-12) * -1) var(--color-navy-12); } to { box-shadow: none; } }
@keyframes pto-vt-mere-under { from, 95% { opacity: 1; } to { opacity: 0; } }
@keyframes pto-vt-rullet { from { box-shadow: none; } 5%, to { box-shadow: var(--space-12) 0 var(--space-12) calc(var(--space-12) * -1) var(--color-navy-12); } }
@keyframes pto-vt-rullet-kant { from { box-shadow: none; } 5%, to { box-shadow: inset var(--space-12) 0 var(--space-12) calc(var(--space-12) * -1) var(--color-navy-12); } }
@supports (animation-timeline: scroll()) {
	.pto-vt__rul { scroll-timeline: --pto-vt-x inline, --pto-vt-y block; animation: pto-vt-rullet-kant auto linear both; animation-timeline: --pto-vt-x; }
	.pto-vt__tabel .pto-vt__pris { box-shadow: none; animation: pto-vt-mere auto linear both; animation-timeline: --pto-vt-x; }
	.pto-vt__rul::after { opacity: 0; animation: pto-vt-mere-under auto linear both; animation-timeline: --pto-vt-y; }
}

@media (width < 1024px) {
	.pto-vt__tabel td.pto-vt__pris { white-space: normal; }
}
@media (width < 640px) {
	.pto-vt__bestil .wp-element-button { padding-inline: var(--space-12); }
}
/* Under 480 px er der ikke plads til både fast pris og fast bestil ved siden af varenummeret: katalogets varenumre har op til 18 tegn og typisk 11 eller flere, og ved 375 px er der 81 px tilbage med en firecifret pris. Prisen ruller derfor med og står ved bestil ved rullens ende, og skyggen flytter til bestil. */
@media (width < 480px) {
	.pto-vt__tabel .pto-vt__pris { right: auto; box-shadow: none; animation: none; }
	.pto-vt__tabel .pto-vt__bestil { box-shadow: calc(var(--space-12) * -1) 0 var(--space-12) calc(var(--space-12) * -1) var(--color-navy-12); }
	@supports (animation-timeline: scroll()) {
		.pto-vt__tabel .pto-vt__bestil { box-shadow: none; animation: pto-vt-mere auto linear both; animation-timeline: --pto-vt-x; }
	}
}
@media (width >= 640px) {
	.pto-vt { --pto-vt-bestil: calc(var(--space-80) * 3); }
	.pto-vt__tabel th:first-child { position: sticky; left: 0; z-index: 1; }
	.pto-vt__tabel thead th:first-child { z-index: 3; }
	@supports (animation-timeline: scroll()) {
		.pto-vt__tabel th:first-child { animation: pto-vt-rullet auto linear both; animation-timeline: --pto-vt-x; }
	}
}
.pto-vt__antal {
	box-sizing: border-box;
	width: var(--space-80);
	min-height: var(--space-44);
	padding: 0 var(--space-8);
	border: 1px solid var(--rule-field);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-foreground);
	font-family: var(--font-mono);
	font-size: var(--text-16);
	text-align: center;
}
.pto-vt__valg { box-sizing: border-box; max-width: 100%; min-height: var(--space-44); padding: 0 var(--space-8); border: 1px solid var(--rule-field); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-foreground); font-size: var(--text-14); }

.pto-vt__alle { display: none; }
/* Under 640 px bliver hver række et kort efter WooCommerces tabelteknik (data-title i td::before): ingen rulning, ingen faste kolonner, ingen skygger. Rollerne står i markup, for display: block fjerner tabellens betydning i nogle browsere. Overskriftsrækken er kun til skærmlæsere. */
@media (width < 640px) {
	.pto-vt__rul { display: block; overflow: visible; max-height: none; border: 0; border-radius: 0; background: none; animation: none; }
	.pto-vt:not(:has(.pto-vt__alle-valg:checked)) .pto-vt__tabel tbody tr:nth-child(n+9) { display: none; }
	.pto-vt__alle { display: block; margin: 0; }
	/* Som «Sammenlign» på varekortene: feltet dækker hele etiketten, så klikmålet er etikettens 44 px, og etiketten tegner boksen. */
	.pto-vt__alle label { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--space-44); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--color-surface); font-weight: 600; }
	.pto-vt__alle label::before { content: ""; flex-shrink: 0; box-sizing: border-box; width: var(--space-14); height: var(--space-14); border: 1px solid var(--color-primary); border-radius: var(--space-2); background: var(--color-surface); }
	.pto-vt__alle label:has(input:checked)::before { background: var(--color-primary); box-shadow: inset 0 0 0 var(--space-2) var(--color-surface); }
	.pto-vt__alle-valg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: inherit; appearance: none; cursor: pointer; }
	.pto-vt__alle-valg:focus-visible { outline: var(--space-2) solid var(--color-primary-deep); outline-offset: var(--space-2); }
	.pto-vt__rul::after { content: none; }
	.pto-vt .pto-vt__tabel,
	.pto-vt .pto-vt__tabel :is(tbody, tr) { display: block; }
	.pto-vt .pto-vt__tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.pto-vt .pto-vt__tabel thead :is(th, td) { position: static; box-shadow: none; animation: none; }
	.pto-vt .pto-vt__tabel tbody tr { margin-block-end: var(--space-12); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--color-surface); overflow: hidden; }
	.pto-vt .pto-vt__tabel tbody tr > * { position: static; display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); box-sizing: border-box; width: auto; min-width: 0; padding: var(--space-8) var(--space-12); box-shadow: none; animation: none; white-space: normal; text-align: right; }
	.pto-vt .pto-vt__tabel tbody tr > th { display: block; border-right: 0; text-align: left; font-size: var(--text-14); font-weight: 700; background: var(--color-background); }
	.pto-vt .pto-vt__tabel tbody tr > td[data-title]::before { content: attr(data-title) / ""; flex: none; font-family: var(--font-sans); font-size: var(--text-13); font-weight: 400; color: var(--color-text-muted); text-align: left; }
	.pto-vt .pto-vt__tabel tbody tr > td.pto-vt__pris { flex-wrap: wrap; }
	.pto-vt .pto-vt__tabel tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pto-vt .pto-vt__tabel tbody tr > :is(th, .pto-vt__pris, .pto-vt__bestil) { grid-column: 1 / -1; }
	.pto-vt .pto-vt__tabel tbody tr > td[data-title]:not(.pto-vt__pris) { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding-block: var(--space-6); line-height: 1.3; text-align: left; overflow-wrap: anywhere; }
	.pto-vt .pto-vt__tabel td.pto-vt__pris .wts-vat-text { display: inline; margin-inline-start: var(--space-4); font-family: var(--font-sans); font-size: var(--text-13); font-weight: 400; color: var(--color-text-muted); }
	.pto-vt .pto-vt__tabel tbody tr > td.pto-vt__bestil { display: block; }
	.pto-vt .pto-vt__tabel tbody tr > td.pto-vt__tom { display: none; }
	.pto-vt .pto-vt__form { flex-wrap: nowrap; }
	.pto-vt .pto-vt__form .pto-vt__valg { flex: 1 1 100%; }
	.pto-vt .pto-vt__form:has(.pto-vt__valg) { flex-wrap: wrap; }
	.pto-vt .pto-vt__form .wp-element-button { flex: 1; min-height: var(--space-44); }
	.pto-vt .pto-vt__bestil > .wp-element-button { display: flex; align-items: center; justify-content: center; min-height: var(--space-44); }
}
.pto-vt__lager { font-family: var(--font-sans); font-size: var(--text-13); font-weight: 400; color: var(--color-text-muted); }
