/*
 * DRUS LDM - supplerende CSS.
 *
 * Designtokens (farver, typografi, spacing) styres i theme.json og skal
 * IKKE duplikeres her. Denne fil er kun til regler block-editoren ikke
 * kan udtrykke (grid pr. breakpoint, skraverede pladsholdere, produktkort).
 *
 * Facit: den godkendte designfacit. Mobil 390 er primaer maalestok.
 * Pladsholdere forbliver pladsholdere - skraveringer og [kantede parenteser]
 * er bevidste og maa ikke fyldes med opdigtet indhold.
 */

/* Caveat 600 - sloganets skriveskrift. Selvhostet i temaet: Google Fonts ville
   sende brugerens IP til en tredjepart ved hver sidevisning, og det er ikke
   noget vi beder om lov til her. Filerne er de samme woff2 som Google leverer,
   delt i latin og latin-ext saa den danske tekst ikke traekker mere end noedigt. */
@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/caveat-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/caveat-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Fine kanter og skraveringer - findes kun her, ikke i paletten, fordi de
	   aldrig skal kunne vaelges som tekst-/baggrundsfarve i editoren. */
	--ldm-hairline: #eef1f5;
	--ldm-rule: #dde2ea;
	--ldm-hatch-a: #f2f4f7;
	--ldm-hatch-b: #e9edf2;
	--ldm-hatch-c: #dfe4eb;
	--ldm-hero-a: #25385c;
	--ldm-footer-rule: #2a3a58;
	--ldm-accent-hover: #c93e15;
}

/* ==========================================================================
   Ordmaerke
   ==========================================================================
   Type, ikke billede - saa det er skarpt i alle stoerrelser og kan skifte
   variant uden ny fil. Variant A = smaa bogstaver (i brug), variant B =
   store begyndelsesbogstaver: tilfoej klassen .ldm-wordmark--b.
   SVG-filerne i assets/img/ er til variantvalget og til favicon. */

.ldm-wordmark {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex-shrink: 0;
	line-height: 1.15;
}

.ldm-wordmark__navn {
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.ldm-wordmark__l1 {
	color: var(--wp--preset--color--accent);
}

.ldm-wordmark__l2 {
	color: var(--wp--preset--color--primary);
}

/* Sloganet er haandskrift, fordi det er en bemaerkning og ikke en overskrift.
   Skriften er selvhostet - se @font-face oeverst i filen. */
.ldm-wordmark__slogan {
	font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
	font-size: 16px;
	color: var(--wp--preset--color--gray-600);
	white-space: nowrap;
}

.ldm-wordmark:hover .ldm-wordmark__l1,
.ldm-wordmark:hover .ldm-wordmark__l2 {
	color: inherit;
}

/* Paa marine bund lysnes accenten ét trin, og domaenet bliver hvidt. */
.ldm-wordmark--rev .ldm-wordmark__l1 {
	color: var(--wp--preset--color--accent-light);
}

.ldm-wordmark--rev .ldm-wordmark__l2 {
	color: var(--wp--preset--color--white);
}

.ldm-wordmark--rev .ldm-wordmark__slogan {
	color: var(--wp--preset--color--on-deep);
}

/* Sidefodens stoerrelse. */
.ldm-wordmark--sm .ldm-wordmark__navn {
	font-size: 17px;
}

.ldm-wordmark--sm .ldm-wordmark__slogan {
	font-size: 14px;
}

@media (max-width: 781px) {
	/* 15 px er ikke en smagssag: ved 16 px bliver ordmaerket 141 px, og saa er
	   raekken 4 px for lang til ☰ + logo + konto + kurv paa 390 px. Kurven
	   falder da ned paa sin egen linje. */
	.ldm-wordmark__navn {
		font-size: 15px;
	}

	.ldm-wordmark__slogan {
		font-size: 13px;
	}

	/* Sidehovedets raekke paa 390 px har plads til ☰, ordmaerket og kurven -
	   ikke ogsaa til sloganet, som er den bredeste af de to linjer. Uden det
	   her braekker raekken i to og kurven falder ned under logoet. Facit har
	   samme problem loest med et kort logo paa mobil; her staar domaenet, og
	   sloganet lever videre i sidefoden hvor der er bredde til det. */
	.site-header__bar .ldm-wordmark__slogan {
		display: none;
	}

	.ldm-wordmark--sm .ldm-wordmark__navn {
		font-size: 16px;
	}

	.ldm-wordmark--sm .ldm-wordmark__slogan {
		font-size: 13px;
	}
}

/* ==========================================================================
   USP-bar
   ========================================================================== */

.usp-bar p {
	line-height: 1.3;
	letter-spacing: 0.01em;
	margin: 0;
	max-width: 100%;
	/* Facit saetter 32 px mellem hvert loefte og prikken imellem dem. Med ren
	   tekst blev afstanden ca. 11 px, og baeltet laeste som én lang saetning
	   i stedet for tre loefter. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

.usp-bar__sep {
	opacity: 0.35;
	padding: 0;
}

/* Hvert loefte er ét ord-hele: braekker baeltet alligevel, sker det ved en
   separator og aldrig midt i "Klik & hent i Grenaa". */
.usp-bar__item {
	white-space: nowrap;
}

.usp-bar__item--narrow {
	display: none;
}

@media (max-width: 599px) {
	.usp-bar p {
		font-size: 11px !important;
	}

	.usp-bar p {
		gap: 6px;
	}

	.usp-bar__item--wide {
		display: none;
	}

	.usp-bar__item--narrow {
		display: inline;
	}

	/* Fjerde loefte ryger foerst paa mobil - tre er hvad der er plads til. */
	.usp-bar__item--bred,
	.usp-bar__sep--bred {
		display: none;
	}
}

/* ==========================================================================
   Sidehoved
   ========================================================================== */

.site-header {
	border-bottom: 1px solid var(--ldm-hairline);
}

/* Navigationen er et barn af raekken og bryder ned som egen fuldbreddes linje
   paa desktop. Derfor nul raekke-gab: afstanden til nav-linjen saettes af
   .site-header__nav selv, saa desktop ser ud praecis som foer flytningen. */
.site-header__bar {
	/* 40 px, ikke 24: soegefeltet laa for taet paa ordmaerket (Frank 13/8). */
	column-gap: 40px;
	row-gap: 0;
	padding-top: 14px;
	padding-bottom: 0;
}

.site-header__search {
	flex: 1 1 260px;
	min-width: 0;
	margin: 0;
}

.site-header__search .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--gray-100);
	border: 1px solid var(--ldm-hairline);
	border-radius: 4px;
	padding: 4px 4px 4px 12px;
}

.site-header__search .wp-block-search__input {
	background: transparent;
	border: none;
	font-size: 15px;
	padding: 8px 4px;
}

.site-header__search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--faint);
}

.site-header__search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--primary);
	padding: 6px 10px;
}

/* Kontoikonet staar hvor "Log ind" stod. Woos egen blok er kun et link om et
   SVG - stoerrelsen saettes her, saa det flugter med kurvikonet. */
.site-header__konto .wc-block-customer-account__link {
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.site-header__konto svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.site-header__actions {
	gap: 20px;
	font-size: 15px;
	font-weight: 700;
	flex-shrink: 0;
}

.site-header__actions .wc-block-mini-cart__button {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* Margenen skrives med to klasser med vilje: WP's egen layout-CSS nulstiller
   margin paa alle boern af en flex-gruppe (`body .is-layout-flex > *`), og den
   vejer tungere end én klasse. Uden det klaebede nav-linjen op i ordmaerket. */
.site-header__bar > .site-header__nav {
	flex: 1 0 100%;
	order: 4;
	margin-top: 14px;
	border-top: 1px solid var(--ldm-hairline);
	padding-top: 12px;
	padding-bottom: 12px;
}

.site-header__nav .wp-block-navigation {
	gap: 28px;
	font-weight: 700;
}

/* Mobil 390: ordmaerke centreret mellem burger og kurv, soegefelt paa egen linje.
   Hamburgeren laa foer paa en linje for sig selv under soegefeltet med et stort
   tomrum efter. Nu er nav'en foerste element i selve raekken. */
@media (max-width: 781px) {
	.site-header__bar {
		column-gap: 12px;
		row-gap: 0;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.site-header__bar > .site-header__search {
		flex: 1 0 100%;
		order: 3;
		margin-top: 12px;
	}

	.site-header__actions {
		gap: 12px;
		font-size: 14px;
	}

	.site-header__bar > .site-header__nav {
		order: -1;
		flex: 0 0 auto;
		margin-top: 0;
		border-top: none;
		padding: 0;
	}

	/* Ordmaerket tager resten af pladsen, saa det staar centreret mellem
	   hamburgeren til venstre og kurven til hoejre - som i facit-mobilen. */
	.site-header__bar .ldm-wordmark {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ==========================================================================
   Skraverede pladsholdere
   ==========================================================================
   Bruges hvor et rigtigt foto mangler. De skal blive staaende som skravering
   indtil de rigtige billeder er leveret - de maa ikke erstattes af stockfotos. */

.ldm-photo {
	background: repeating-linear-gradient(45deg, var(--ldm-hatch-a) 0, var(--ldm-hatch-a) 10px, var(--ldm-hatch-b) 10px, var(--ldm-hatch-b) 20px);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
}

.ldm-photo--alt {
	background: repeating-linear-gradient(45deg, var(--ldm-hatch-b) 0, var(--ldm-hatch-b) 12px, var(--ldm-hatch-c) 12px, var(--ldm-hatch-c) 24px);
}

.ldm-photo--rev {
	background: repeating-linear-gradient(-45deg, var(--ldm-hatch-a) 0, var(--ldm-hatch-a) 10px, var(--ldm-hatch-b) 10px, var(--ldm-hatch-b) 20px);
}

.ldm-photo-note {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	color: var(--wp--preset--color--faint);
	margin: 0;
}

/* Sticky header. Klassen saettes af ldm-ui.js, saa headeren aldrig kan blive
   haengende skjult hvis filen ikke koerer - uden JavaScript staar den bare
   oeverst som foer. Skygge foerst naar den faktisk ligger oven paa indhold. */
.ldm-header--sticky {
	position: sticky;
	top: 0;
	z-index: 40;
	background: #ffffff;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.ldm-header--skjult {
	transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
	.ldm-header--sticky {
		transition: none;
	}
}

/* Footeren skal ligge helt op ad indholdet. WordPress giver hvert barn af
   .wp-site-blocks en block-gap, og den staar som en hvid stribe mellem den
   moerke nyhedsbrevsflade og den lige saa moerke footer. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Tekstpladsholder, fx [aabningstider]. */
.ldm-placeholder {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--wp--preset--color--faint);
	background: var(--wp--preset--color--gray-100);
	border-radius: 4px;
	padding: 10px 12px;
	margin: 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.ldm-hero {
	position: relative;
	background-image: repeating-linear-gradient(45deg, var(--ldm-hero-a) 0, var(--ldm-hero-a) 14px, #1e2f4d 14px, #1e2f4d 28px);
	display: flex;
	align-items: center;
	min-height: 440px;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.ldm-hero__inner {
	position: static;
	margin-left: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

/* Selve indpakningen skal ligge i venstre side. WordPress' constrained layout
   giver den auto-margener, og de har samme vaegt som en enkelt klasse - derfor
   skrives reglen med foraeldren foran, ikke med !important. */
.ldm-hero > .ldm-hero__inner {
	margin-left: 0;
	margin-right: auto;
	width: 100%;
}

/* WordPress centrerer boern i et constrained layout. I facit staar hero-teksten
   flush med indholdskanten - overskrift, underrubrik og knap paa samme lodrette
   linje - saa centreringen slaas fra her og kun her. */
.ldm-hero .ldm-hero__inner > * {
	margin-left: 0;
	margin-right: 0;
	max-width: 620px;
}

/* "Forhandler af" + det hvide Trespass-logo. I facit staar det nede i hoejre
   hjoerne af heroen paa desktop og oppe i hoejre hjoerne uden etiket paa mobil,
   hvor teksten selv er rykket ned. */
.ldm-hero__forhandler {
	position: absolute;
	right: var(--wp--style--root--padding-right, 32px);
	bottom: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	z-index: 1;
}

.ldm-hero__forhandler-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.ldm-hero .ldm-hero__forhandler img {
	height: 40px;
	width: auto;
	display: block;
}

.ldm-hero .ldm-photo-note {
	position: absolute;
	top: 16px;
	right: 20px;
}

.ldm-hero h1 {
	margin: 0;
}

.ldm-hero__sub {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
}

/* Brandloeftet under hero-CTA'en (Frank 18/8, skaerpet samme dag). Fast linje,
   ikke roterende. Foerste version var daempet graa 14 px og forsvandt paa
   fotoet; nu 17 px halvfed i hvid med en let skygge, saa den kan laeses paa et
   lyst motiv uden at tage scenen fra overskriften. margin-top holder den fri af
   knappen ved alle bredder, saa den aldrig skubber CTA'en. */

.ldm-hero__loefte {
	margin: 18px 0 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--white);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Herofoto (Frank, 13/8). Fotoet ligger som baggrund og ikke som blok, saa
   det kan daekke hele fladen. Moerkningen er ikke pynt: uden den falder
   kontrasten paa den hvide overskrift under WCAG paa fotoets lyse himmel.
   Bundfarven bliver staaende - mangler filen, staar marineblaa tilbage i
   stedet for hvid tekst paa hvidt. Motivet er i hoejre side, derfor
   background-position 70 % paa desktop. */

.ldm-hero--foto {
	background-image: linear-gradient(90deg, rgba(30, 47, 77, 0.86) 0%, rgba(30, 47, 77, 0.62) 45%, rgba(30, 47, 77, 0.28) 100%), url("../img/hero-udeliv.jpg");
	background-size: cover;
	/* Top-justeret: ansigtet ligger i oeverste tredjedel af fotoet, og med
	   center blev det skaaret vaek paa en 440 px hoej hero. */
	background-position: 70% top;
	background-repeat: no-repeat;
}

@media (max-width: 781px) {
	.ldm-hero {
		background-image: repeating-linear-gradient(45deg, var(--ldm-hero-a) 0, var(--ldm-hero-a) 12px, #1e2f4d 12px, #1e2f4d 24px);
		min-height: 340px;
		align-items: flex-end;
	}

	/* Mobil: teksten ligger nederst, saa moerkningen laegges lodret i stedet. */
	.ldm-hero--foto {
		background-image: linear-gradient(180deg, rgba(30, 47, 77, 0.35) 0%, rgba(30, 47, 77, 0.78) 60%, rgba(30, 47, 77, 0.92) 100%), url("../img/hero-udeliv.jpg");
		background-position: 62% top;
	}

	.ldm-hero__inner {
		gap: 14px;
	}

	.ldm-hero__sub {
		font-size: 15px;
		line-height: 1.5;
	}

	.ldm-hero__forhandler {
		top: 14px;
		right: 14px;
		bottom: auto;
	}

	.ldm-hero__forhandler-label {
		display: none;
	}

	.ldm-hero .ldm-hero__forhandler img {
		height: 26px;
	}
}

/* ==========================================================================
   Kategorifliser
   ==========================================================================
   Skraveret fotofelt over marine navnebjaelke. Blokken er datastyret af
   WooCommerce - navnene kommer fra kategorierne, ikke fra temaet. Accent-
   flisen "Tilbud" tilfoejes naar kategoristrukturen er laast (se baton). */

.category-tiles .ldm-tiles__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 782px) {
	.category-tiles .ldm-tiles__list {
		grid-template-columns: repeat(5, 1fr);
		gap: 16px;
	}
}

.category-tiles .ldm-tiles__item {
	display: block;
	list-style: none;
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 4px;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

/* Hele flisen er ét link: skraveret fotofelt oeverst, marine navnebjaelke under.
   Woo lægger baade billedet og navnet inde i samme <a>, saa bjaelkens farve
   ligger paa linket og billedet daekker den oeverste del. */
.category-tiles .ldm-tiles__item > a {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	padding: 0 6px 10px 6px;
	height: 100%;
}

@media (min-width: 782px) {
	.category-tiles .ldm-tiles__item > a {
		font-size: 14px;
		padding: 0 8px 12px 8px;
	}
}

.category-tiles .ldm-tiles__item > a:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* Femte flise: Tilbud. Accent i stedet for marine, som facitlisten viser, og
   omvendt hover saa den stadig svarer paa musen. Flisen er datastyret paa
   foer-prisen og staar kun naar der faktisk er varer paa tilbud - se
   drus_ldm_render_fliser() i functions.php. */
.category-tiles .ldm-tiles__item--tilbud > a {
	background: var(--wp--preset--color--accent);
}

.category-tiles .ldm-tiles__item--tilbud > a:hover {
	background: var(--wp--preset--color--primary);
}

.category-tiles .ldm-tiles__media {
	display: block !important;
	/* Fotofeltet er rammen, ikke billedet. Uden position/overflow bestemmer
	   billedets egne maal hoejden, og de fem fliser fik hver sin hoejde -
	   navnebjaelkerne stod i trappe. Maalt 13/8: 278/292/278/321/278 px. */
	position: relative;
	overflow: hidden;
	width: calc(100% + 12px) !important;
	max-width: none !important;
	margin: 0 -6px 10px -6px !important;
	height: 88px !important;
}

@media (min-width: 782px) {
	.category-tiles .ldm-tiles__media {
		width: calc(100% + 16px) !important;
		margin: 0 -8px 12px -8px !important;
		height: auto !important;
		aspect-ratio: 4 / 5;
	}
}

.category-tiles .ldm-tiles__media img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	margin: 0;
}

/* Uden kategoribillede viser Woo sin egen graa pladsholder - vi erstatter den
   med vores egen skravering, saa det er tydeligt at fotoet mangler. */
.category-tiles .ldm-tiles__media--placeholder {
	background: repeating-linear-gradient(45deg, var(--ldm-hatch-a) 0, var(--ldm-hatch-a) 10px, var(--ldm-hatch-b) 10px, var(--ldm-hatch-b) 20px);
}

.category-tiles .ldm-tiles__media--placeholder img {
	visibility: hidden;
}

/* Underkategorier skjules paa forsiden - fliserne viser kun hovedniveauet. */
.category-tiles .ldm-tiles__item .ldm-tiles__list {
	display: none;
}

/* ==========================================================================
   Produktkort
   ==========================================================================
   Gaelder alle steder Woo lister produkter: forsidens karrusel, arkivsider
   og relaterede varer. Selve markupen er Woo-blokkenes egen. */

.ldm-carousel .wc-block-product-template,
.product-archive-grid .wp-block-post-template,
.wc-block-product-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ldm-carousel .wc-block-product-template > li,
.product-archive-grid .wp-block-post-template > li,
.wc-block-product-template > li {
	position: relative;
	/* height:100% + content-box gjorde kortets kasse 16 px hoejere end
	   gitterets raekke (445 px raekke, 461 px kort), og kortet laa derfor ned
	   over det der kom bagefter - paa soegesiden hen over maerkestribens
	   etiket. Maalt 13/8. */
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0 0 14px 0;
	gap: 8px;
}

/* Billedfelt: kvadratisk, skraveret indtil et rigtigt produktfoto findes. */
.wc-block-grid__product-image,
.wp-block-woocommerce-product-image,
.wc-block-components-product-image {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin: 0 0 4px 0;
	background: repeating-linear-gradient(45deg, var(--ldm-hatch-a) 0, var(--ldm-hatch-a) 10px, var(--ldm-hatch-b) 10px, var(--ldm-hatch-b) 20px);
}

/* Varefotoene er staaende packshots (3:4) i et kvadratisk felt. `cover` ville
   fylde feltet ved at skaere top og bund af, saa et par bukser bliver til to
   ben. `contain` viser hele varen og lader resten staa hvid - samme flade som
   fotoets egen baggrund, saa der ikke tegner sig en kasse.

   OBS: object-fit herunder afgoer det IKKE alene. Woos billedblok skriver
   style="object-fit:cover" direkte paa <img>, og inline slaar stylesheet.
   Den rigtige knap er "scale":"contain" i blok-markup'en (se templates/).
   Reglen bliver staaende som gulv for de billeder, blokken ikke render'er. */
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img,
.wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	display: block;
}

/* Produktnavn: 14/1.35 marine, to linjer reserveret saa priserne flugter. */
.ldm-carousel .wp-block-post-title,
.ldm-carousel .wc-block-product-template .wp-block-post-title,
.product-archive-grid .wp-block-post-title,
.wc-block-product-template .wp-block-post-title {
	font-size: 14px !important;
	font-weight: 400;
	line-height: 1.35;
	color: var(--wp--preset--color--primary);
	min-height: 38px;
	margin: 0;
	padding: 0 14px;
}

/* Pris i accent, 18/700. Foer-pris daempet og gennemstreget. */
.wc-block-grid__product-price,
.wc-block-components-product-price,
.wp-block-woocommerce-product-price,
.wc-block-components-product-price__value {
	color: var(--wp--preset--color--accent);
	font-size: 18px;
	font-weight: 700;
}

.ldm-carousel .wp-block-woocommerce-product-price,
.product-archive-grid .wp-block-woocommerce-product-price,
.wc-block-product-template .wp-block-woocommerce-product-price {
	padding: 0 14px;
	margin: 0;
}

.wc-block-components-product-price del,
.wp-block-woocommerce-product-price del {
	color: var(--wp--preset--color--faint);
	font-size: 13px;
	font-weight: 400;
	text-decoration: line-through;
}

/* Lagerstatus: prik + kort tekst. Woo saetter selv teksten; farven paa prikken
   foelger blokkens egne in-stock/low-stock/out-of-stock-klasser. */
.wp-block-woocommerce-product-stock-indicator {
	font-size: 12px;
	color: var(--wp--preset--color--gray-600);
	padding: 0 14px;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Woo skriver ingen tekst for varer der bare er paa lager - saa skal prikken
   heller ikke staa alene. */
.wp-block-woocommerce-product-stock-indicator:empty {
	display: none;
}

.wp-block-woocommerce-product-stock-indicator::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--wp--preset--color--stock-ok);
}

.wc-block-components-product-stock-indicator--low-stock::before {
	background: var(--wp--preset--color--stock-low);
}

.wc-block-components-product-stock-indicator--out-of-stock::before {
	background: var(--wp--preset--color--faint);
}

/* Fragtlinjen nederst paa kortet - samme tal som USP-bar og kurv (500 kr.). */
.ldm-carousel .wc-block-product-template > li::after,
.product-archive-grid .wp-block-post-template > li::after,
.wc-block-product-template > li::after {
	content: "Fri fragt over 500 kr.";
	font-size: 12px;
	color: var(--wp--preset--color--faint);
	border-top: 1px solid var(--ldm-hairline);
	margin: auto 14px 0 14px;
	padding-top: 8px;
}

/* Tilbudsbadge oeverst til venstre.
   Woo render'er to elementer uden om hinanden: blok-wrapperen
   .wp-block-woocommerce-product-sale-badge og selve maerkatet
   .wc-block-components-product-sale-badge inde i den. De maa ikke begge
   positioneres absolut - saa har wrapperen intet indhold i flow, shrink-wrapper
   til bredde 0, og teksten haenger ud over kanten som et afklippet "UD".
   Det var praecis hvad der skete, foerste gang en vare faktisk var paa tilbud.
   Wrapperen er derfor ankeret, maerkatet staar i flow inde i den. */
.wp-block-woocommerce-product-sale-badge {
	position: static;
}

.wc-block-components-product-image .wc-block-components-product-sale-badge,
.wc-block-product-collection .wc-block-components-product-sale-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	z-index: 1;
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	/* Woo giver maerkatet en 1 px moerkegraa kant (#43454b). Facit har ingen -
	   det er en ren orange flade - og kanten laeser som en fejl paa et kort
	   der ellers ikke har nogen streger. */
	border: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 3px;
	white-space: nowrap;
}

/* ==========================================================================
   Karrusel (genbrugskomponent)
   ==========================================================================
   Bruges af "Populaere lige nu" og skal bruges uaendret af de kommende raekker
   "Andre kiggede ogsaa paa" og "Ofte koebt sammen": saet klassen
   .ldm-carousel paa sektionen, giv den en h2 og en Woo product-collection -
   ldm-ui.js finder resten selv.

   Én vandret rullende raekke ved ALLE bredder. Fire synlige
   kolonner paa desktop, ~2 paa mobil, scroll-snap begge steder, og pilene i
   overskriftsraekken ruller én side ad gangen. Det var foer et 4-kolonners grid
   paa desktop, som brød til to raekker ved mange varer: sektionshoejden
   aendrede sig med varetallet, og pilene kunne aldrig vises, fordi en grid-
   raekke ikke ruller. Med én raekke er hoejden konstant uanset varetal. */

.ldm-carousel > h2 {
	margin-bottom: var(--wp--preset--spacing--50);
}

.ldm-carousel .wc-block-product-template {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 170px;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}

.ldm-carousel .wc-block-product-template > li {
	scroll-snap-align: start;
	width: auto;
	max-width: none;
}

/* Fjerde fælde i samme familie som .is-flex-container-dialogen:
   Woos egen flex-layout saetter width:calc(25% - .9375em) paa kortene fra 600 px,
   og selektoren gentager .is-flex-container, saa den vejer fire klasser og vinder
   over vores. I vores grid regnes de 25% af SPORET og ikke af raekken - med to
   varer blev 277 px brede spor til 54 px brede kort, og navn og pris ombroed
   bogstav for bogstav. Mobilen gik fri, fordi Woos regel ligger i (min-width:600px).
   Kortet skal altid fylde sit spor, uanset varetal - derfor én klasse mere her. */
.ldm-carousel .wc-block-product-template.is-flex-container.is-flex-container.columns-4 > li {
	width: auto;
	max-width: none;
}

@media (min-width: 782px) {
	/* Praecis fire synlige kolonner: sporbredden regnes af raekken minus de tre
	   mellemrum, saa kortet lander paa samme 277 px som det gamle grid gav.
	   Varer nummer fem og frem ligger uden for kanten og hentes med pilene. */
	/* Rullebjaelken skjules: pilene er affordancen paa desktop, og en permanent
	   bjaelke under kortene var ikke i facit. Rulning med pegefelt/hjul er uroert. */
	.ldm-carousel .wc-block-product-template {
		grid-auto-columns: calc((100% - 3 * 20px) / 4);
		gap: 20px;
		scrollbar-width: none;
	}

	.ldm-carousel .wc-block-product-template::-webkit-scrollbar {
		display: none;
	}
}

/* Arkivgrid: 2 kolonner mobil, 4 fra tablet/desktop. */
.product-archive-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (min-width: 782px) {
	.product-archive-grid .wp-block-post-template {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
}

/* ==========================================================================
   Kampagneblok
   ========================================================================== */

.ldm-promo {
	border-radius: 6px;
	overflow: hidden;
	padding: 0;
}

.ldm-promo > .wp-block-group {
	margin: 0;
	max-width: none;
}

.ldm-promo__text {
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	justify-content: center;
}

.ldm-promo__text h2,
.ldm-promo__text p {
	margin: 0;
}

.ldm-promo__media {
	min-height: 120px;
}

/* Kampagnefoto: fylder hele mediefeltet uden at trykke hoejden ud af form.
   Beskaeringen sker i boksen, ikke i filen. */
.ldm-promo__media--foto {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	min-height: 200px;
}

.ldm-promo .ldm-promo__media--foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 782px) {
	.ldm-promo {
		display: flex;
		align-items: stretch;
	}

	.ldm-promo__text {
		flex: 1;
		padding: 48px;
		gap: 14px;
	}

	.ldm-promo__media {
		flex: 0 0 420px;
		border-radius: 0;
		min-height: 100%;
	}
}

/* Sekundaer knap: hvid med marine kant. */
.wp-block-button.ldm-btn-outline .wp-block-button__link,
.wp-block-button.is-style-outline.ldm-btn-outline > .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--primary);
	padding: 0.7rem 1.4rem;
	font-size: 15px;
}

.wp-block-button.ldm-btn-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline.ldm-btn-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Nyhedsbrev
   ========================================================================== */

.drus-newsletter-form {
	display: flex;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--40);
}

.drus-newsletter-form__input {
	font-family: inherit;
	font-size: 15px;
	padding: 14px 16px;
	border: none;
	border-radius: 4px;
	flex: 1 1 auto;
	min-width: 0;
	outline: none;
}

.drus-newsletter-form__button {
	flex: 0 0 auto;
	cursor: pointer;
	border: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	border-radius: 4px;
	padding: 14px 26px;
}

.drus-newsletter-form__button:hover {
	background: var(--ldm-accent-hover);
}

.newsletter__note {
	margin-top: var(--wp--preset--spacing--40);
	font-size: 12px;
}

@media (max-width: 781px) {
	.drus-newsletter-form {
		gap: 8px;
	}

	.drus-newsletter-form__input,
	.drus-newsletter-form__button {
		font-size: 14px;
		padding: 13px 14px;
	}

	.drus-newsletter-form__button {
		padding: 13px 20px;
	}
}

/* ==========================================================================
   Sidefod
   ========================================================================== */

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 782px) {
	.site-footer__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 32px;
	}
}

/* Kolonnerne skal starte i samme hoejde. Det gjorde de ikke: WordPress'
   egen flow-layout giver hver soeskende efter den foerste
   margin-block-start: 16px, og i et gitter skubber den margin cellen ned.
   Foerste spalte fik ingen, de tre andre 16 px - maalt i browseren, ikke
   gaettet. Afstanden mellem kolonnerne styres af gap, ikke af marginer. */
.site-footer__grid > * {
	margin-block-start: 0;
}

.site-footer__heading {
	color: var(--wp--preset--color--white);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 10px 0;
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	font-size: 14px;
}

.site-footer__links a,
.site-footer__brand a {
	color: var(--wp--preset--color--on-deep);
	text-decoration: none;
}

.site-footer__links a:hover {
	color: var(--wp--preset--color--white);
}

.site-footer__brand p {
	margin: 10px 0 0 0;
	line-height: 1.6;
}

.site-footer__trust {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.ldm-paybadges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.ldm-paybadges span {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-size: 10px;
	font-weight: 700;
	padding: 5px 8px;
	border-radius: 3px;
}

/* Forhandler-badge.
   Pladsholderen i sidefoden er fjernet 14/8 (Frank), og dermed ogsaa reglen
   for tekst-badget. Beholderen bliver staaende: den baerer det rigtige
   Trespass-logo paa Outdoor-kategorisiden. */
.ldm-brandbadges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ldm-brandbadges--archive {
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--faint);
}

/* Forhandlermaerket paa Outdoor-kategorisiden er nu det rigtige logo i sort.
   Klassen ligger paa selve billedet, fordi Woos .woocommerce img { height:auto }
   ellers vinder over en hoejde sat paa en foraelder - samme faelde som
   maerkebaeltet paa forsiden faldt i. */
.ldm-brandbadges .ldm-brandbadge-logo {
	height: 48px;
	width: auto;
	display: block;
}

/* Anmeldelses-widgettens regler er slettet 13/8 sammen med markuppen (facit v2). */

.site-footer__legal {
	border-top: 1px solid var(--ldm-footer-rule);
	padding-top: 16px;
	margin-top: var(--wp--preset--spacing--60);
	font-size: 11px;
	line-height: 1.6;
}

@media (min-width: 782px) {
	.site-footer__legal {
		font-size: 12px;
	}
}

/* Telefonsupporten i sidefoden. Stoerre og tungere end links-listen under
   den - det er butikkens eneste menneske-kanal, og den skal kunne ses paa
   en armslaengdes afstand. Tiderne staar paa egen linje, saa nummeret ikke
   laeses som "8-16" i én kaede. */
.site-footer__tlf {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.site-footer__tlf a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.site-footer__tlf a:hover,
.site-footer__tlf a:focus-visible {
	text-decoration: underline;
}

.site-footer__tid {
	display: block;
	font-size: 12px;
	font-weight: 400;
	opacity: 0.75;
}

/* Nummeret i USP-baeltet: samme hvide tekst som resten af baeltet, kun
   understregningen viser, at der kan trykkes. */
.usp-bar__tlf {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Linkene i den juridiske linje faar samme farve som teksten omkring dem
   (Frank 14/8). Understregningen bliver staaende - det er den, der stadig
   viser, at der kan klikkes, naar farven ikke goer det. */
.site-footer__legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Karrusel-pile
   ==========================================================================
   Overskriftsraekken bygges af assets/js/ldm-ui.js: h2 til venstre, ‹ og ›
   til hoejre. Uden JavaScript staar h2 alene og raekken rulles med fingeren -
   derfor har .ldm-carousel > h2 stadig sin egen margin nedenfor. */

.ldm-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: var(--wp--preset--spacing--50);
}

.ldm-carousel__head > h2 {
	margin: 0;
}

/* Pilene vises kun naar raekken faktisk kan rulle. */
.ldm-carousel__controls {
	display: none;
	gap: 8px;
	flex-shrink: 0;
}

.ldm-carousel__head--has-controls .ldm-carousel__controls {
	display: flex;
}

.ldm-carousel__arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
}

.ldm-carousel__arrow:hover:not(:disabled) {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Enden af raekken: pilen daempes i stedet for at forsvinde (som i facit). */
.ldm-carousel__arrow:disabled {
	border-color: var(--ldm-rule);
	color: #a5aebc;
	cursor: default;
}

/* ==========================================================================
   Kategoriside
   ========================================================================== */

.ldm-archive__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: var(--wp--preset--spacing--40);
}

.ldm-archive__head > h1 {
	margin: 0;
}

/* Woos eget varetal - samme daempede farve som "[antal] varer" i facit. */
.ldm-archive__count {
	margin: 0;
	color: var(--wp--preset--color--faint);
}

/* Grid: 2 kolonner mobil, 4 fra 782 px. Vinder over product-collection-blokkens
   egne flex-klasser, derfor de to selektorer. */
.ldm-archive-grid .wc-block-product-template,
.ldm-archive-grid .wc-block-product-template.is-flex-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (min-width: 782px) {
	.ldm-archive-grid .wc-block-product-template,
	.ldm-archive-grid .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
}

.ldm-archive-grid .wc-block-product-template > li {
	width: auto;
	max-width: none;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Filterbjaelke - desktop
   --------------------------------------------------------------------------
   Vandret baelte med hairline over og under. Hvert filter er en chip der
   folder et lille panel ud; chippen laves af ldm-ui.js ud fra filterets h3. */

.ldm-filterbar {
	border-top: 1px solid var(--ldm-hairline);
	border-bottom: 1px solid var(--ldm-hairline);
	margin-bottom: var(--wp--preset--spacing--60);
}

.ldm-filterbar__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 0;
}

/* Woo laegger selv filtergrupperne i et overlay-lag med egen "Filter"-knap.
   Vi bruger vores eget ark med egen "Filtrér"-knap, saa Woos knap slaas
   fra, og overlay-lagene gores til almindelige containere. Chips-raekken
   ligger derfor paa __overlay-content, ikke paa .ldm-filters. */
.ldm-filters .wc-block-product-filters__open-overlay {
	display: none;
}

/* !important er noedvendigt her: Woo saetter selv display:flex!important paa
   dialogen, og uden det shrink-wrapper den til 132 px, saa chipsene falder ned
   under hinanden paa desktop og indholdet klippes i mobilarket. */
.ldm-filters .wc-block-product-filters__overlay-dialog {
	display: block !important;
	width: 100%;
}

.ldm-filters .wc-block-product-filters__overlay,
.ldm-filters .wc-block-product-filters__overlay-wrapper,
.ldm-filters .wc-block-product-filters__overlay-dialog {
	display: block;
	position: static;
	inset: auto;
	width: auto;
	max-width: none;
	height: auto;
	max-height: none;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	transform: none;
	opacity: 1;
	visibility: visible;
	overflow: visible;
}

.ldm-filters .wc-block-product-filters__overlay-header,
.ldm-filters .wc-block-product-filters__overlay-footer {
	display: none;
}

.ldm-filterbar .ldm-filters,
.ldm-filters .wc-block-product-filters__overlay-content {
	display: flex;
	/* Woos dialog saetter flex-direction:column og arves nedad - chipsene skal
	   staa paa raekke, saa retningen skrives eksplicit. */
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
}

/* Woos sorterings-select og filter-chips skal se ens ud. */
.ldm-filterbar__sort,
.ldm-filter__toggle {
	appearance: none;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--ldm-rule);
	border-radius: 4px;
	padding: 9px 14px;
	color: var(--wp--preset--color--primary);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
}

/* Tre ting manglede paa sorteringen (maalt 13/8, Franks skaermbillede):
   1. Woos egen regel gav den 286 px bredde, saa den lignede et tekstfelt og
      ikke en chip - den skal fylde sit indhold, som de tre andre.
   2. appearance:none fjernede browserens egen pil, og facit har ▾. Pilen
      tegnes derfor i baggrunden.
   3. Facit skriver "Sortér efter:" foran feltet; Woo skriver ingen etiket. */
/* Facit har ÉN chip: "Sortér efter: Mest populære ▾" - etiketten staar INDE
   i rammen. Rammen ligger derfor paa indpakningen, og selecten selv er
   usynlig med pilen i baggrunden. */
/* Woos egen formular har 13 px bundmargin. Den goer chippen 50 px hoej mod
   chipsenes 37 og skal vaek. */
.ldm-filterbar .ldm-filterbar__sort .woocommerce-ordering {
	margin: 0;
}

.ldm-filterbar .ldm-filterbar__sort select {
	width: auto;
	max-width: none;
	border: 0;
	background-color: transparent;
	padding: 0 20px 0 0;
	height: auto;
	min-height: 0;
	line-height: 19px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 5px) calc(50% + 1px), calc(100% - 0px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.ldm-filterbar__sort {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ldm-filterbar__sort::before {
	content: "Sortér efter:";
	font-size: 14px;
	color: var(--wp--preset--color--primary);
}

/* Lagerfilteret: loes afkrydsning uden ramme, som facit. Woos fieldset har sin
   egen luft omkring listen; den skal vaek, ellers staar afkrydsningen 16 px
   hoejere end chipsene ved siden af. */
.ldm-filter--inline {
	display: flex;
	align-items: center;
	margin-left: 8px;
}

.ldm-filter--inline fieldset,
.ldm-filter--inline .wc-block-product-filter-checkbox-list {
	padding: 0;
	margin: 0;
	border: 0;
}

.ldm-filter--inline > h3 {
	display: none;
}

/* Kategorier med baade varer paa lager og udsolgte faar to valg fra Woo. De
   skal staa side om side i bjaelken - stablet ville de skubbe hele raekken ud
   af hoejde med chipsene ved siden af. */
.ldm-filter--inline .wc-block-product-filter-checkbox-list__items {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ldm-filter--inline .wc-block-product-filter-checkbox-list__item {
	padding: 0;
}

.ldm-filter--inline .wc-block-product-filter-checkbox-list__label {
	font-size: 14px;
	color: var(--wp--preset--color--gray-600);
}

.ldm-filterbar__sort form {
	display: flex;
	align-items: center;
	margin: 0;
}

/* Indtil ldm-ui.js har lavet chipsene, staar Woos filtergrupper foldet helt
   ud - underkategoriliste, prisslider og lagerfelt under hinanden. Det er
   ikke en fejl i JS'en, det er tiden foer den koerer, og paa en langsom
   forbindelse er det det brugeren ser. Baeltet holder sin hoejde imens. */
.ldm-filterbar .ldm-filters:not(.is-klar) .wc-block-product-filters__overlay-content {
	height: 40px;
	overflow: hidden;
	visibility: hidden;
}

.ldm-filter {
	position: relative;
}

.ldm-filter > h3 {
	display: none;
}

.ldm-filter__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	display: none;
	min-width: 240px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--ldm-rule);
	border-radius: 4px;
	padding: 14px;
	box-shadow: 0 8px 24px rgba(30, 47, 77, 0.12);
}

.ldm-filter.is-open .ldm-filter__panel {
	display: block;
}

.ldm-filter__toggle[aria-expanded="true"] {
	border-color: var(--wp--preset--color--primary);
}

/* Woos afkrydsningslister: 14 px, sekundaer tekst, kompakte raekker. */
.ldm-filters .wc-block-product-filter-checkbox-list__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--wp--preset--color--gray-600);
}

.ldm-filters .wc-block-product-filter-checkbox-list__item {
	padding: 4px 0;
}

.ldm-filters__clear {
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Filterbjaelke - mobil (bundark)
   --------------------------------------------------------------------------
   Under 782 px bliver bjaelken til et ark der glider op fra bunden, aabnet
   fra den sticky "Filtrér"-knap. Uden JavaScript er der ingen knap, og
   filtrene staar i normalt flow. */

.ldm-filterbar__trigger,
.ldm-filterbar__backdrop,
.ldm-filterbar__sheet-head,
.ldm-filterbar__apply {
	display: none;
}

@media (max-width: 781px) {
	.ldm-filterbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		max-height: 80vh;
		overflow-y: auto;
		background: var(--wp--preset--color--white);
		border: 0;
		border-radius: 12px 12px 0 0;
		box-shadow: 0 -8px 40px rgba(30, 47, 77, 0.25);
		transform: translateY(100%);
		transition: transform 0.2s ease;
		margin: 0;
	}

	.ldm-filterbar.is-open {
		transform: none;
	}

	.ldm-filterbar__inner {
		display: block;
		padding: 20px;
	}

	.ldm-filterbar__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 55;
		background: rgba(30, 47, 77, 0.55);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	.ldm-sheet-open .ldm-filterbar__backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.ldm-sheet-open {
		overflow: hidden;
	}

	.ldm-filterbar__sheet-head {
		display: block;
	}

	.ldm-filterbar__grip {
		display: block;
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: var(--ldm-rule);
		margin: 0 auto 12px auto;
	}

	.ldm-filterbar__sheet-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 18px;
		font-weight: 700;
		padding-bottom: 12px;
	}

	.ldm-filterbar__close {
		border: 0;
		background: none;
		font-size: 18px;
		color: var(--wp--preset--color--gray-600);
		cursor: pointer;
		line-height: 1;
		font-family: inherit;
	}

	/* I arket foldes filtrene ud - ingen chips, ingen popover. */
	.ldm-filter__toggle {
		display: none;
	}

	.ldm-filter > h3 {
		display: block;
	}

	.ldm-filter,
	.ldm-filterbar .ldm-filters,
	.ldm-filters .wc-block-product-filters__overlay-content {
		display: block;
	}

	/* Samme shrink-wrap som dialogen: uden width bliver indholdet 64 px bredt
	   i et 350 px ark, og labels og prisfelt klippes. */
	.ldm-filters .wc-block-product-filters__overlay-content {
		width: 100%;
	}

	.ldm-filter__panel {
		position: static;
		display: block;
		min-width: 0;
		border: 0;
		border-radius: 0;
		padding: 0;
		box-shadow: none;
	}

	.ldm-filters .wc-block-product-filters__overlay-content > * {
		border-top: 1px solid var(--ldm-hairline);
		padding: 14px 0;
	}

	.ldm-filterbar__sort {
		padding-bottom: 14px;
	}

	.ldm-filterbar__sort select {
		width: 100%;
	}

	.ldm-filterbar__apply {
		display: block;
		width: 100%;
		margin-top: 8px;
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--white);
		border: 0;
		border-radius: 4px;
		padding: 14px;
		font-family: inherit;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
	}

	.ldm-filterbar__trigger {
		display: block;
		position: sticky;
		bottom: 16px;
		z-index: 30;
		margin: 0 auto var(--wp--preset--spacing--50) auto;
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
		border: 0;
		border-radius: 999px;
		padding: 13px 32px;
		font-family: inherit;
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
		box-shadow: 0 4px 16px rgba(30, 47, 77, 0.3);
	}
}

/* --------------------------------------------------------------------------
   Sidetal
   -------------------------------------------------------------------------- */

.ldm-pagination {
	gap: 8px;
	margin-top: var(--wp--preset--spacing--60);
}

/* Tallene ligger i deres egen wrapper, og den er display:block fra WP. Det er
   selve fejlen paa kategorisiden: raekken er en flexbox, men tallene indeni
   stablede sig lodret - 1, 2, 3, ..., 11 under hinanden med pilen ved siden af.
   Maalt 13/8: wrapper 54 px bred, 210 px hoej. Den skal vaere en raekke. */
.ldm-pagination .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.ldm-pagination .page-numbers,
.ldm-pagination .wp-block-query-pagination-previous,
.ldm-pagination .wp-block-query-pagination-next {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 6px;
	border: 1.5px solid var(--ldm-rule);
	border-radius: 4px;
	font-size: 13px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.ldm-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.ldm-pagination .wp-block-query-pagination-previous,
.ldm-pagination .wp-block-query-pagination-next {
	border-color: var(--wp--preset--color--primary);
}

/* Musen skal kunne se hvad den staar paa. Kun <a> reagerer: den aktive side
   og prikkerne er <span> og foerer ingen steder hen, saa de skal blive ved
   med at ligge stille. Samme udseende paa tastaturfokus. */
.ldm-pagination a.page-numbers,
.ldm-pagination a.wp-block-query-pagination-previous,
.ldm-pagination a.wp-block-query-pagination-next {
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ldm-pagination a.page-numbers:hover,
.ldm-pagination a.page-numbers:focus-visible,
.ldm-pagination a.wp-block-query-pagination-previous:hover,
.ldm-pagination a.wp-block-query-pagination-previous:focus-visible,
.ldm-pagination a.wp-block-query-pagination-next:hover,
.ldm-pagination a.wp-block-query-pagination-next:focus-visible {
	background: var(--wp--preset--color--gray-100);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	.ldm-pagination a.page-numbers,
	.ldm-pagination a.wp-block-query-pagination-previous,
	.ldm-pagination a.wp-block-query-pagination-next {
		transition: none;
	}
}

@media (min-width: 782px) {
	.ldm-pagination .page-numbers,
	.ldm-pagination .wp-block-query-pagination-previous,
	.ldm-pagination .wp-block-query-pagination-next {
		min-width: 40px;
		height: 40px;
		font-size: 14px;
	}
}

/* Kategoritekst under grid: daempet, smal linjelaengde (facit 720 px).
   Skruet op 18/8 (Frank: "faa alle text afsnit til at se lidt mere paent ud").
   14/1.6 var en fodnote at se paa; 15/1.7 laeses som broedtekst uden at
   konkurrere med varenavnene. Bredden er den samme. */
.category-description .ldm-term-description {
	max-width: 720px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--wp--preset--color--faint);
}

/* Teksten er ikke ét afsnit. Modul 7 leverer broedtekst OG punktopstilling,
   og de skal kunne ses som to ting. Afstanden er den samme 12 px som mellem
   afsnit i fold-ud-boksen paa produktsiden - kategoriteksten skal ikke have
   sin egen rytme.
   Foer 17/8 stod hele teksten som én klump; det var ikke CSS, men
   `wp_filter_kses` paa `pre_term_description`, der aad <p> og <ul>. Rettet i
   Koe::skriv_kategoritekst(). Reglerne her er det, der goer den laesbar. */
.category-description .ldm-term-description > * {
	margin-block: 0 16px;
}

/* Punktopstillingen er sin egen blok, ikke en fortsaettelse af afsnittet. */
.category-description .ldm-term-description > ul {
	margin-block: 4px 20px;
}

.category-description .ldm-term-description > :last-child {
	margin-block-end: 0;
}

.category-description .ldm-term-description ul {
	padding-inline-start: 22px;
	list-style: disc;
}

.category-description .ldm-term-description li {
	margin-block-end: 8px;
	padding-inline-start: 2px;
}

.category-description .ldm-term-description li::marker {
	color: var(--wp--preset--color--gray-600);
}

/* ==========================================================================
   Hjaelpeklasser
   ========================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   Kurv-skuffe (ikke bygget endnu)
   ========================================================================== */

/* ==========================================================================
   WP's constrained-layout centrerer boernene med margin-inline:auto. I de
   kolonner hvor designet er venstrestillet skal den auto-margin slaas fra.
   ========================================================================== */

.ldm-promo__text > *,
.site-footer__brand > *,
.site-footer__col > *,
.site-footer__trust > * {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

/* ==========================================================================
   Fri fragt-progressbar
   ==========================================================================
   Samme komponent to steder: server-renderet oeverst paa /kurv/ og indsat af
   ldm-ui.js lige over skuffens bundlinje. Graensen kommer fra fragtzonen, saa
   tallet i teksten er det samme, kassen regner med. */

.ldm-fragtbar {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	background: var(--wp--preset--color--gray-100);
	border-radius: 8px;
}

.ldm-fragtbar__tekst {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--primary);
	font-size: 0.9375rem;
	line-height: 1.35;
}

.ldm-fragtbar__tekst strong {
	font-weight: 700;
}

.ldm-fragtbar__spor {
	height: 8px;
	background: var(--wp--preset--color--gray-300);
	border-radius: 999px;
	overflow: hidden;
}

.ldm-fragtbar__fyld {
	display: block;
	height: 100%;
	min-width: 8px;
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
	transition: width 0.3s ease;
}

/* Naaet: gruen som lagerstatus - samme sprog som resten af butikken. */
.ldm-fragtbar--naaet .ldm-fragtbar__fyld {
	background: var(--wp--preset--color--stock-ok);
}

/* I skuffen ligger baren mellem varelisten og bundlinjen og skal ikke
   konkurrere med kasseknappen om opmaerksomheden. */
.ldm-fragtbar--skuffe {
	margin: 0 1rem 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.ldm-fragtbar__fyld {
		transition: none;
	}
}

/* ==========================================================================
   Produktside (Leverance 5)
   ==========================================================================
   Facit: galleri venstre 7fr, koebsboks hoejre 5fr, 48 px imellem, fra 1024 px.
   Under 1024 stacker de, og ldm-ui.js haenger en klaebende koebsbar i bunden.

   Raekkefoelgen i boksen staar i skabelonen, ikke her: CSS'en flytter ikke rundt
   paa noget. Det eneste grid her laver, er de to kolonner. */

.ldm-produkt {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
	margin-top: 24px;
}

@media (min-width: 1024px) {
	.ldm-produkt {
		grid-template-columns: 7fr 5fr;
		gap: 48px;
	}
}

/* --------------------------------------------------------------------------
   Galleriet
   --------------------------------------------------------------------------
   Woo saetter selv opacity:0 paa galleriet og lader flexslider tone det frem.
   Vi roerer ikke den mekanik - kun rammen om den. */

.ldm-produkt__medie {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Woos egen layout-CSS giver galleriet `float:left; width:48%` gennem
   `.woocommerce div.product div.images` - en vaegtklasse over vores egen regel.
   Derfor staar vores med fire klasser: kolonnen er grid'ets, ikke Woos. */
/* Woos product-image-gallery.css laaser blokken til max-width 512 px.
   Kolonnen er grid'ets, saa laasen aabnes her. */
.ldm-produkt .ldm-produkt__medie .wp-block-woocommerce-product-image-gallery {
	max-width: none;
	width: 100%;
}

.ldm-produkt .ldm-produkt__medie div.woocommerce-product-gallery.images,
.ldm-produkt .woocommerce-product-gallery {
	float: none;
	width: 100%;
	margin: 0;
}

.ldm-produkt .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.ldm-produkt .woocommerce-product-gallery__image img,
.ldm-produkt .woocommerce-product-gallery img.wp-post-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
}

/* Den graa flade stammer fra pladsholder-aeraen, hvor rammen skulle kunne ses
   uden billede i. Varefotoene er friskaarne paa hvid, saa graat giver en
   synlig kasse rundt om varen. Hvid kun naar der ER et billede: Woo saetter
   selv --placeholder paa feltet, naar varen staar uden, og der skal fladen
   blive ved med at kunne ses. */
.ldm-produkt .woocommerce-product-gallery__image--placeholder img {
	background: var(--wp--preset--color--gray-100);
}

/* Lup-knappen: Woo laegger den oeverst til hoejre. Maerkatet staar til venstre,
   saa de to kan ikke ryge oven i hinanden. */
.ldm-produkt .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	z-index: 2;
}

/* Thumbnails: 84 px i facit. Den valgte har marinekant, de oevrige en fin graa. */
.ldm-produkt .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Woo giver hver thumbnail 25 % bredde med en selektor paa fem led. Facit
   siger 84 px, saa vores skal veje mere - derfor den lange selektor. */
.ldm-produkt .ldm-produkt__medie .woocommerce-product-gallery.images .flex-control-thumbs li,
.ldm-produkt .flex-control-thumbs li {
	width: 84px;
	float: none;
	margin: 0;
	list-style: none;
}

.ldm-produkt .flex-control-thumbs img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 4px;
	cursor: pointer;
	opacity: 1;
}

.ldm-produkt .flex-control-thumbs img.flex-active {
	border: 2px solid var(--wp--preset--color--primary);
}

/* Tilbudsmaerket: firkantet, accent, oeverst til venstre paa billedet.
   Woos runde skive er skiftet ud i drus_ldm_tilbudsmaerke() - her staar kun
   placeringen, fordi maerkatet render'es FOER galleriet i blokkens wrapper. */
.ldm-tilbudsmaerke {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 3px;
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Koebsboksen */

.product-buy-box {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
	max-width: none;
}

.product-buy-box > * {
	margin: 0;
	max-width: none;
}

/* Maerkelinjen over titlen. Den kommer ud af post-title-blokken og bliver
   derfor et selvstaendigt flex-barn i koebsboksen - altsaa med boksens gap
   paa 18px under sig. Linjen hoerer til titlen, ikke til naeste afsnit, saa
   afstanden trykkes ned til 4px igen. */
.ldm-maerkelinje {
	margin-block-end: -14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.ldm-maerkelinje a {
	color: inherit;
	text-decoration: none;
}

.ldm-maerkelinje a:hover,
.ldm-maerkelinje a:focus-visible {
	text-decoration: underline;
}

.product-buy-box .wp-block-post-title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
}

/* Prisen: accenten FOERST, foer-prisen overstreget efter. Woo skriver
   <del> foer <ins> i kilden, saa raekkefoelgen vendes med flex order -
   teksten i kilden bliver staaende som skaermlaeseren forventer. */
.product-buy-box .wc-block-components-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	font-size: 32px;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.product-buy-box .wc-block-components-product-price ins {
	order: 1;
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

.product-buy-box .wc-block-components-product-price del {
	order: 2;
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--preset--color--faint);
	text-decoration: line-through;
	opacity: 1;
}

/* Lagerprikken. Kortets regel giver 14 px sidepolstring - den maa ikke
   trille med over paa produktsiden. */
.product-buy-box .wp-block-woocommerce-product-stock-indicator {
	padding: 0;
	font-size: 14px;
	gap: 8px;
}

.ldm-koeb__vilkaar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: -10px;
	font-size: 14px;
	color: var(--wp--preset--color--gray-600);
}

.ldm-koeb__vilkaar p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Variantvaelgere, antal og CTA (Woos egen formular) */

.product-buy-box form.cart {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.product-buy-box table.variations {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.product-buy-box table.variations th,
.product-buy-box table.variations td {
	border: 0;
	padding: 0 0 12px 0;
	vertical-align: middle;
	background: none;
}

/* Etiketten er selv en flexboks, saa th's egen bundpadding ikke skubber
   teksten. Padding flyttes derfor til raekken. */
.product-buy-box table.variations th.label,
.product-buy-box table.variations td.value {
	padding-bottom: 0;
}

.product-buy-box table.variations tr + tr {
	margin-top: 12px;
}

/* "Ryd"-linket staar under den sidste vaelger. Det er stramt op, saa den
   reserverede plads ikke bliver til et hul foer antal og CTA. */
.product-buy-box .reset_variations {
	margin-top: 6px;
	line-height: 1.2;
}

/* Woos variantvaelgere er en tabel. Tabel-layout gav 201 px brede celler
   uanset formularens bredde, saa raekkerne laegges om til flex: etiket i fast
   bredde til venstre, vaelgeren fylder resten. Markup'en er Woos egen. */
.product-buy-box table.variations,
.product-buy-box table.variations tbody,
.product-buy-box table.variations tr {
	display: block;
	width: 100%;
}

/* align-items: center var forkert og saa skaevt ud paa den nederste raekke.
   Maalt 18/8 paa Allegra: Woo lregger sin "Ryd"-lnk i den SIDSTE td med
   visibility:hidden - den er usynlig, men fylder 32 px. Cellen blev 93 px hoej,
   og etiketten blev centreret mod cellen i stedet for mod vaelgeren: "Stoerrelse"
   stod 25 px lavere end sin egen dropdown. Raekken stiller nu op fra toppen, og
   etiketten centrerer sig selv mod vaelgerens 44 px. */
.product-buy-box table.variations tr {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.product-buy-box table.variations td.value {
	flex: 1 1 auto;
	min-width: 0;
}

.product-buy-box table.variations th.label {
	display: flex;
	align-items: center;
	flex: 0 0 92px;
	width: 92px;
	min-height: 44px;
	text-align: left;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* Woos etiket er et <label> med 9,8 px bundmargen fra temaets grundregler.
   I en centreret flexboks centreres MARGINKASSEN - derfor stod selve teksten
   praecis 4,9 px (halvdelen) for hoejt, selv om cellen laa millimeterret.
   Maalt paa Alec 18/8, ikke gaettet. */
.product-buy-box table.variations th.label label {
	margin: 0;
	line-height: 1.3;
}

.product-buy-box table.variations select {
	width: 100%;
	min-height: 44px;
	padding: 0 36px 0 12px;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--white);
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235c677a' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	border: 1.5px solid var(--ldm-rule);
	border-radius: 4px;
	appearance: none;
}

.product-buy-box .reset_variations {
	display: inline-block;
	font-size: 13px;
	color: var(--wp--preset--color--gray-600);
}

.product-buy-box .woocommerce-variation-price {
	margin-bottom: 12px;
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.product-buy-box .woocommerce-variation-availability {
	font-size: 14px;
	color: var(--wp--preset--color--gray-600);
}

/* Antal + CTA paa én raekke: knappen tager resten af bredden, som i facit. */
.product-buy-box .quantity,
.product-buy-box .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.product-buy-box form.cart > .quantity,
.product-buy-box .woocommerce-variation-add-to-cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--ldm-rule);
	border-radius: 4px;
	overflow: hidden;
	flex: 0 0 auto;
}

.product-buy-box form.cart {
	align-items: stretch;
}

.product-buy-box form.cart > .quantity {
	align-self: flex-start;
}

/* Naar formularen er en simpel vare, ligger .quantity og knappen som soeskende
   i selve formen - saa skal DE to ligge paa raekke, ikke formens oevrige boern. */
.product-buy-box form.cart:not(.variations_form) {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: stretch;
	gap: 12px;
}

.product-buy-box input.qty {
	width: 32px;
	min-height: 46px;
	padding: 0;
	text-align: center;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	border: 0;
	background: none;
	appearance: textfield;
}

.product-buy-box input.qty::-webkit-outer-spin-button,
.product-buy-box input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* − og + tilfoejes af ldm-ui.js. Uden JavaScript staar talfeltet alene og
   virker stadig. */
.ldm-qty__knap {
	width: 44px;
	min-height: 46px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	color: var(--wp--preset--color--gray-600);
	cursor: pointer;
}

.ldm-qty__knap:hover {
	color: var(--wp--preset--color--primary);
}

.product-buy-box .single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 50px;
	padding: 14px 26px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.product-buy-box .single_add_to_cart_button:hover {
	background: var(--ldm-accent-hover);
}

.product-buy-box .single_add_to_cart_button.disabled,
.product-buy-box .single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Woo skriver lagerstatus én gang til inde i formularen ("200 paa lager").
   Den staar allerede som prik-linje oeverst i boksen, saa den dublet skjules -
   teksten fjernes ikke fra kilden, den vises bare ikke to gange. */
.product-buy-box p.stock {
	display: none;
}

/* --------------------------------------------------------------------------
   Betalingsmaerker og trustlinje

   .ldm-paybadges--koeb er vaek 14/8 sammen med markuppen i koebsboksen
   (Frank). Grundreglen .ldm-paybadges bliver staaende - sidefoden bruger
   den stadig. */

/* Trustlinjen er tilbage 18/8 med Franks laaste ordlyd - og skaerpet samme
   dag: "Fysisk butik i Grenaa" og "Se os paa Trustpilot" er ude, saa claimet
   staar alene. Den foerste version laa paa samme niveau som vilkaarslinjen og
   forsvandt i den; nu ligger den et niveau over - 16 px halvfed marineblaa mod
   vilkaarslinjens 14 px graa - med en haarfin streg over, saa den laeses som et
   loefte og ikke som endnu et leveringsvilkaar. */

.ldm-trustlinje {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--ldm-hairline);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
}


/* --------------------------------------------------------------------------
   Fold-ud (afloeser Woos faneboks)
   Markup'en er <details>/<summary> fra drus_ldm_foldud() - browserens eget,
   saa den virker uden JavaScript og kan tastaturbetjenes. */

.ldm-foldud {
	display: flex;
	flex-direction: column;
}

.ldm-foldud__punkt {
	border-top: 1px solid var(--ldm-hairline);
	padding: 16px 0;
}

.ldm-foldud__punkt:last-child {
	border-bottom: 1px solid var(--ldm-hairline);
}

.ldm-foldud__hoved {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	list-style: none;
}

/* Safari/WebKit tegner sin egen trekant uden denne. */
.ldm-foldud__hoved::-webkit-details-marker {
	display: none;
}

.ldm-foldud__hoved::after {
	content: "+";
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--gray-600);
}

.ldm-foldud__punkt[open] > .ldm-foldud__hoved::after {
	content: "\2212";
}

.ldm-foldud__krop {
	padding-top: 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--gray-600);
}

.ldm-foldud__krop > *:first-child {
	margin-top: 0;
}

.ldm-foldud__krop > *:last-child {
	margin-bottom: 0;
}

.ldm-foldud__krop p,
.ldm-foldud__krop ul {
	margin: 0 0 12px 0;
}

.ldm-foldud__krop ul {
	padding-left: 20px;
}

/* Specifikationstabellen fra Woo: to spalter, fine linjer, ingen ramme. */
.ldm-foldud .woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}

.ldm-foldud .woocommerce-product-attributes th,
.ldm-foldud .woocommerce-product-attributes td {
	padding: 8px 0;
	border: 0;
	border-bottom: 1px solid var(--ldm-hairline);
	text-align: left;
	vertical-align: top;
	font-size: 14px;
	background: none;
}

.ldm-foldud .woocommerce-product-attributes th {
	width: 40%;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.ldm-foldud .woocommerce-product-attributes p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Klaebende koebsbar paa mobil
   Facit viser den i bunden af telefonen: pris til venstre, CTA i fuld bredde.
   Baren bygges af ldm-ui.js ud fra den rigtige formular - den er en genvej til
   knappen, ikke en kopi af den. */

.ldm-koebsbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--wp--preset--color--white);
	border-top: 1px solid var(--wp--preset--color--gray-300);
	box-shadow: 0 -4px 16px rgba( 30, 47, 77, 0.08 );
}

.ldm-koebsbar.is-synlig {
	display: flex;
}

.ldm-koebsbar__pris {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.ldm-koebsbar__nu {
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.ldm-koebsbar__foer {
	font-size: 11px;
	color: var(--wp--preset--color--faint);
	text-decoration: line-through;
}

.ldm-koebsbar__knap {
	flex: 1;
	padding: 14px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

@media (min-width: 1024px) {
	.ldm-koebsbar {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   Ofte koebt sammen + Andre kiggede ogsaa paa
   Facit: graa kasse med varerne paa raekke, adskilt af +, og samlet pris med
   én knap. Raekken under er den samme karrusel som forsidens - samme klasse,
   samme pile, samme kort. */

.ldm-sammen {
	margin: 48px 0 0 0;
	padding: 32px;
	background: var(--wp--preset--color--gray-100);
	border-radius: 6px;
}

.ldm-sammen__titel {
	margin: 0 0 20px 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
}

.ldm-sammen__raekke {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.ldm-sammen__vare {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 0 1 200px;
}

.ldm-sammen__vare a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

.ldm-sammen__vare img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--wp--preset--color--white);
	border-radius: 4px;
}

.ldm-sammen__navn {
	font-size: 14px;
	line-height: 1.35;
	color: var(--wp--preset--color--primary);
}

.ldm-sammen__pris {
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.ldm-sammen__plus {
	font-size: 24px;
	color: var(--wp--preset--color--faint);
	flex: 0 0 auto;
}

.ldm-sammen__bund {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--gray-300);
}

.ldm-sammen__samlet {
	font-size: 15px;
	color: var(--wp--preset--color--gray-600);
}

.ldm-sammen__samlet strong {
	margin-left: 8px;
	font-size: 20px;
	color: var(--wp--preset--color--primary);
}

.ldm-sammen__knap {
	margin-left: auto;
	padding: 14px 26px;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--accent);
	border-radius: 4px;
	text-decoration: none;
}

.ldm-sammen__knap:hover {
	background: var(--ldm-accent-hover);
	color: var(--wp--preset--color--white);
}

.ldm-relaterede {
	margin-top: 48px;
	padding-bottom: 24px;
}

@media (max-width: 600px) {
	.ldm-sammen {
		padding: 20px;
	}

	.ldm-sammen__knap {
		margin-left: 0;
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   Kendte maerker i butikken (facit v2)
   Delen ligger i parts/maerker.html og bruges paa forside, kategoriside og
   soegeresultat. Hoejderne er facitlistens - de tre logoer har hver sin
   optiske vaegt, derfor er DLX lavere end de to andre.
   ========================================================================== */

.ldm-maerker {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	/* Luft OVER striben. Uden den laa etiketten klods op ad sidste raekke
	   produktkort paa soegesiden - kortet daekkede de foerste bogstaver. */
	margin-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.ldm-maerker__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--faint);
	text-align: center;
}

.ldm-maerker__raekke {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 56px;
}

/* Femte faelde i Woo-familien: `.woocommerce img { height: auto }` vejer
   0,1,1 og slaar en ren klasse. Uden element-navnet i selektoren render'es
   logoerne i deres egen 531 px bredde, og siden faar 218 px vandret overloeb.
   Maalt 13/8 paa produktsiden. Derfor `img` med i selektoren - ikke !important. */
.ldm-maerker__raekke img.ldm-maerker__logo {
	width: auto;
	height: 76px;
	object-fit: contain;
}

.ldm-maerker__raekke img.ldm-maerker__logo--dlx {
	height: 60px;
}

@media (max-width: 781px) {

	.ldm-maerker {
		gap: 12px;
		margin-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--50);
	}

	.ldm-maerker__label {
		font-size: 11px;
	}

	.ldm-maerker__raekke {
		gap: 20px;
	}

	.ldm-maerker__raekke img.ldm-maerker__logo {
		height: 40px;
		min-width: 0;
		flex-shrink: 1;
	}

	.ldm-maerker__raekke img.ldm-maerker__logo--dlx {
		height: 30px;
	}
}

/* ==========================================================================
   Leverance 8 - soegeresultater
   To tilstande, samme side. Hovedet kommer fra drus_ldm_soegehoved().
   ========================================================================== */

.ldm-soeg__hoved {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 16px 0 20px;
}

.ldm-soeg__titel {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.ldm-soeg__titel h1 {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.ldm-soeg__antal {
	font-size: 14px;
	color: var(--wp--preset--color--faint);
}

/* Sorteringen staar oppe ved overskriften i facit. Den er Woos egen
   select - kun rammen og ordet foran er vores. Woo skriver ingen etiket ud,
   og facit har "Sortér efter:" foran, saa den kommer fra ::before. */
.ldm-soeg__sort {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: -56px 0 20px;
}

.ldm-soeg__sort::before {
	content: "Sortér efter:";
	font-size: 14px;
	color: var(--wp--preset--color--gray-600);
}

.ldm-soeg__sort select {
	border: 1px solid var(--ldm-rule);
	border-radius: 4px;
	padding: 9px 14px;
	color: var(--wp--preset--color--primary);
	font-size: 14px;
	background: var(--wp--preset--color--white);
}

/* Tom tilstand: centreret spalte, som facit. */

.ldm-tom {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	padding: 40px 0 56px;
}

.ldm-tom__titel {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.ldm-tom__tekst {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--gray-600);
	max-width: 480px;
}

.ldm-tom__tekst--kort {
	display: none;
}

.ldm-tom__form {
	display: flex;
	gap: 10px;
	width: min(480px, 100%);
}

.ldm-tom__felt {
	flex: 1;
	min-width: 0;
	border: 1.5px solid var(--ldm-rule);
	border-radius: 4px;
	padding: 13px 16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--primary);
}

.ldm-tom__felt:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

.ldm-tom__knap {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 4px;
	padding: 13px 28px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.ldm-tom__knap:hover,
.ldm-tom__knap:focus {
	background: var(--ldm-accent-hover);
}

.ldm-tom__genveje {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 14px;
	color: var(--wp--preset--color--gray-600);
}

.ldm-tom__chip {
	border: 1px solid var(--ldm-rule);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.ldm-tom__chip:hover,
.ldm-tom__chip:focus {
	border-color: var(--wp--preset--color--primary);
}

.ldm-soeg__populaere {
	border-top: 1px solid var(--ldm-hairline);
	padding-top: 32px;
	margin-bottom: var(--wp--preset--spacing--70);
}

@media (max-width: 781px) {

	.ldm-soeg__titel h1,
	.ldm-tom__titel {
		font-size: 24px;
		letter-spacing: -0.01em;
	}

	/* Sorteringen kan ikke ligge i overskriftens raekke paa 390 px. */
	.ldm-soeg__sort {
		margin: 0 0 16px;
		justify-content: flex-start;
	}

	.ldm-tom {
		padding: 32px 4px 36px;
		gap: 16px;
	}

	/* Sidehovedet har allerede et soegefelt paa mobil - to felter over
	   hinanden er stoej, saa den lange tekst og formularen viger for
	   genvejene, praecis som i facit. */
	.ldm-tom__tekst--lang,
	.ldm-tom__form {
		display: none;
	}

	.ldm-tom__tekst--kort {
		display: block;
		font-size: 14px;
	}
}

/* ==========================================================================
   Broedkrummer paa linje med resten af indholdet
   Woos breadcrumbs-blok kommer ud i BRED bredde (wideSize 1280), mens alt
   andet indhold staar i contentSize 1184. Under 1280 px kan man ikke se det,
   fordi begge rammer sidens polstring - men fra ca. 1330 px og op begynder
   krummerne at stikke 48 px laengere til venstre end galleri og sidehoved.
   Maalt 13/8 paa 1440 px: krummer 73 px, indhold 121 px.
   Derfor bindes blokken til samme bredde som indholdet.
   Blokken saetter selv .alignwide, og WP's egen regel
   .is-layout-constrained > .alignwide vejer 0,2,0. Derfor tages klassen med
   her (0,3,0) i stedet for at slaas med !important. */

.is-layout-constrained > .wp-block-woocommerce-breadcrumbs.alignwide {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Kvitteringssiden (order-received). Frank 18/8: "marginer er forkerte,
   fonten skal passe i stoerrelsen til resten af sitet, og der mangler padding
   forneden."

   Bredden og bundpadding'en er rettet i templates/order-confirmation.html
   (align:"wide" fjernet). Her rettes kun skriften: Woo lader kvitteringens
   H1 staa paa 32 px, mens sitets egne sider skriver H1 i 40 px. Maalt paa
   /handelsbetingelser/ mod kvitteringen - H2 var allerede ens (24 px).
   --------------------------------------------------------------------------- */

.ldm-kvittering .wc-block-order-confirmation-status h1,
.ldm-kvittering .wc-block-order-confirmation-status h2 {
	margin-block: 0 24px;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
}

/* Luft mellem kvitteringens afsnit. Woo saetter dem taet, og naar bredden
   nu foelger resten af sitet, staar de ellers som én blok. */
.ldm-kvittering > * + * {
	margin-block-start: 40px;
}

.ldm-kvittering .wc-block-order-confirmation-totals table,
.ldm-kvittering .wc-block-order-confirmation-summary {
	font-size: 16px;
}

/* Kurve- og kasseblokken har klassen alignwide bagt ind i sidernes gemte
   indhold - den kan ikke fjernes fra templaten. Uden den her ville de staa
   i 1280 px, mens hoved, footer og alle andre sider staar i 1184 (Frank 18/8:
   "denne visning holder sig ikke helt indenfor rammerne").

   Samme greb som brødkrummerne ovenfor: klassen tages med i selektoren
   (0,3,0) i stedet for at slaas med !important mod WP's egen regel. */

.is-layout-constrained > .wp-block-woocommerce-cart.alignwide,
.is-layout-constrained > .wp-block-woocommerce-checkout.alignwide {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
}

/* Woos eget bloktema-CSS saetter .woocommerce-cart .wp-block-post-title til
   max-width 1000px og centrerer den. Saa laenge titlen var alignwide, vandt
   alignwide-reglen; da den blev taget af (se page-cart.html), sprang "Kurv"
   ind til midten og stod 85 px inde, mens kurven under den stod i 1184.

   body-klassen tages med, saa reglen vejer 0,2,1 mod Woos 0,2,0 og vinder
   uanset hvilken raekkefoelge stylesheetsene indlaeses i. Kontosiden roeres
   ikke: dér er baade titel og indhold 1000 px, og en aendring kun paa titlen
   ville skabe den skaevhed, den her fjerner. */

body.woocommerce-cart .wp-block-post-title {
	max-width: var(--wp--style--global--content-size);
}

/* ---------------------------------------------------------------------------
   Tekstsider (Om os, Handelsbetingelser). Frank 18/8: "formateringen er lidt
   sjov, og mangler padding i bunden."

   Bundpadding'en staar i page.html. Her staar laesbarheden: en tekstspalte
   paa 1184 px giver linjer paa over 150 tegn, og oejet mister linjen. 68 rem
   holder den paa 65-75 tegn. Overskrifter faar mere luft over end under, saa
   de hoerer til afsnittet under sig - ikke det over.
   --------------------------------------------------------------------------- */

/* Broedteksten: .entry-content er selv den constrained kasse (den centreres
   med margin-inline: auto til content-size). Dens boern faar derfor
   margin-inline: 0, saa de staar paa kassens venstrekant - ikke centreret
   inde i den.

   Overskriften maa IKKE have samme regel. Den er direkte barn af main, saa
   margin-inline: 0 lagde den paa main's padding-kant, mens broedteksten stod
   73 px laengere inde (maalt 19/8: titel 48 px, afsnit 121 px ved 1440).
   Uden overrider giver constrained-layout den content-size + auto-margener,
   og den lander paa 121 px - samme venstrekant som broedtekst og menu. */

.ldm-side > .entry-content > * {
	max-width: 68ch;
	margin-inline: 0;
}

/* UNDTAGELSEN: et varenet er ikke broedtekst.
   68ch er en laesebredde - god til Om os, forkert til /tilbud/, hvor siden
   ogsaa er en produktliste. Uden denne regel klemmes hele varenettet ned i
   ca. 590 px, mens resten af siden staar tom (maalt 20/8 ved 1692 px).
   Overskrift og indledning bliver staaende i laesebredden; kun nettet slipper
   ud til den almindelige indholdsbredde, saa /tilbud/ ser ud som kategorierne.
   Selektor nr. 2 rammer produktsamlingens ydre wrapper, som ikke faar
   klassen - den har kun sine data-attributter. */
.ldm-side > .entry-content > .ldm-archive-grid,
.ldm-side > .entry-content > [data-block-name="woocommerce/product-collection"] {
	max-width: none;
}

.ldm-side > .wp-block-post-title {
	margin-block: 0 24px;
	line-height: 1.15;
}

.ldm-side > .entry-content > p {
	margin-block: 0 18px;
	font-size: 17px;
	line-height: 1.7;
}

.ldm-side > .entry-content > h2 {
	margin-block: 40px 12px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.ldm-side > .entry-content > h3 {
	margin-block: 28px 8px;
	font-size: 18px;
}

.ldm-side > .entry-content > ul,
.ldm-side > .entry-content > ol {
	margin-block: 0 18px;
	padding-inline-start: 22px;
	font-size: 17px;
	line-height: 1.7;
}

.ldm-side > .entry-content > ul li,
.ldm-side > .entry-content > ol li {
	margin-block-end: 6px;
}