/* ══════════════════════════════════════════════════════════════
   K360 Shop  ·  assets/k360-shop.css  ·  v1.12.4
   Namespace: .k3. Farver og mål kommer fra indstillingerne som
   --k3-farve, --k3-flade, --k3-baggrund, --k3-tekst, --k3-bredde
   og --k3-luft på :root.
   ══════════════════════════════════════════════════════════════ */

.k3 {
	--teal: var(--k3-farve, #007083);
	--flade: var(--k3-flade, #FFFFFF);
	--bg: var(--k3-billedbund, #F5F2EA);
	--side: var(--k3-baggrund, #F1F0EE);
	--ink: var(--k3-tekst, #141414);
	--dim: rgba(20, 20, 20, .54);
	--linje: rgba(20, 20, 20, .10);
	--marker: #FFC93C;

	--kol: 4;
	--luft: 22px;
	--radius: 16px;
	--e: cubic-bezier(.23, 1, .32, 1);

	display: block;
	width: 100%;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ink);
}

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

.k3 [hidden] { display: none !important; }

/* ── Sidens ramme ────────────────────────────────────────── */
/* Den fulde flade maler baggrunden, den indre spalte holder bredden. */
.k3-flade {
	background-color: var(--k3-baggrund, #F1F0EE);
	padding: var(--k3-luft, 56px) 26px;
}

/* Med et banner i toppen skal fladen ikke skubbe det ned. */
.k3-flade--banner { padding-top: var(--k3-luft-banner, 24px); }

/* Til temaer der pakker shoppen ind i en smal beholder. */
.k3-flade--bred {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.k3 {
	max-width: var(--k3-bredde, 1400px);
	margin-right: auto;
	margin-left: auto;
}

/* ── Sti ─────────────────────────────────────────────────── */
.k3-sti {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 0 0 18px;
}

.k3-sti-liste {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k3-sti-punkt {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
}

.k3-sti-punkt::before,
.k3-sti-punkt::marker { content: none; }

.k3-sti-link {
	padding: 4px 6px;
	border-radius: 7px;
	background-color: transparent;
	color: var(--dim);
	text-decoration: none;
	transition: background-color .28s var(--e), color .28s var(--e);
}

.k3-sti-nu {
	padding: 4px 6px;
	color: var(--ink);
	font-weight: 600;
}

.k3-sti-deler {
	width: 8px;
	height: 12px;
	color: var(--linje);
}

.k3-tilbage {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px 7px 10px;
	border-radius: 99px;
	background-color: transparent;
	color: var(--teal);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .28s var(--e);
}

.k3-tilbage svg { width: 14px; height: 14px; }

/* ── Sidehoved ───────────────────────────────────────────── */
.k3-hoved { margin: 0 0 24px; }

.k3-titel {
	margin: 0;
	font-family: inherit;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--ink);
}

.k3-intro {
	max-width: 62ch;
	margin: 10px 0 0;
}

.k3-intro p {
	margin: 0 0 8px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--dim);
}

.k3-intro p:last-child { margin-bottom: 0; }

/* ── Hero med banner ─────────────────────────────────────── */
/* Banneret fylder hele bredden, teksten ligger ovenpå. To formater,
   fordi et billede i 20:5 ikke kan bruges på en telefon uden at
   motivet forsvinder. */
.k3-hoved--hero {
	position: relative;
	display: flex;
	align-items: center;
	aspect-ratio: var(--k3-hero, 20 / 5);
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--bg);
}

.k3-hero-bill {
	position: absolute;
	inset: 0;
}

.k3-hero-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.k3-hero-img--mobil { display: none; }

/* Sløret bag teksten, så navnet kan læses uanset motivet. */
.k3-hoved--hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Teksten står midt i og til venstre, så sløret trækkes fra venstre. */
	background-image: linear-gradient(to right, rgba(12, 12, 12, .74), rgba(12, 12, 12, .42) 46%, rgba(12, 12, 12, .08) 82%);
}

.k3-hero-tekst {
	position: relative;
	z-index: 1;
	max-width: 60ch;
	padding: 32px 36px;
}

.k3-hero-tekst .k3-titel {
	color: #ffffff;
	text-wrap: balance;
}

.k3-hero-tekst .k3-intro {
	max-width: 54ch;
	margin-top: 8px;
}

.k3-hero-tekst .k3-intro p {
	color: rgba(255, 255, 255, .86);
	font-size: 15px;
}

/* ── Genveje ─────────────────────────────────────────────── */
.k3-genveje {
	position: relative;
	margin: 0 0 26px;
}

.k3-genveje-rul {
	display: flex;
	align-items: center;
	gap: 1px;
	overflow-x: auto;
	padding-bottom: 2px;
	scrollbar-width: none;
}

.k3-genveje-rul::-webkit-scrollbar { display: none; }

.k3-genvej {
	flex: 0 0 auto;
	padding: 9px 16px;
	border-radius: 0;
	background-color: var(--flade);
	color: var(--ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.k3-genvej.er-nu {
	background-color: var(--teal);
	color: #ffffff;
	font-weight: 600;
}


.k3-genvej--alle { color: var(--dim); }

/* Rækkerne står tæt som ét bånd, så kun de to yderste ender er bløde. */
.k3-genveje-rul > .k3-genvej:first-child { border-radius: 8px 0 0 8px; }
.k3-genveje-rul > .k3-genvej:last-child { border-radius: 0 8px 8px 0; }
.k3-genveje-rul > .k3-genvej:only-child { border-radius: 8px; }

/* ── Afsnit ──────────────────────────────────────────────── */
.k3-afsnit { margin: 0 0 40px; }
.k3-afsnit:last-child { margin-bottom: 0; }

.k3-afsnit-titel {
	margin: 0 0 16px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--ink);
}

/* ── Gitter ──────────────────────────────────────────────── */
.k3-gitter {
	display: grid;
	grid-template-columns: repeat(var(--k3-kol, var(--kol)), minmax(0, 1fr));
	gap: var(--luft);
}

/* ── Kategorikort ────────────────────────────────────────── */
.k3-kat {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--flade);
	color: var(--ink);
	text-decoration: none;
	transition: transform .4s var(--e);
}

.k3-kat-bill {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--bg);
}

/* Kun selve billedet. Uden > ville alle ikoner i panelerne ovenpå
   også blive strakt til fuld størrelse. */
.k3-kat-bill > img,
.k3-kat-bill > svg {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	transition: transform .55s var(--e);
}

.k3-kat-bill > .k3-ph {
	padding: 26%;
	color: var(--teal);
	opacity: .4;
}

.k3-kat-tekst {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 16px 46px 16px 18px;
}

.k3-kat-navn {
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	transition: color .28s var(--e);
}

.k3-kat-antal {
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	color: var(--dim);
}

.k3-kat .k3-pil {
	position: absolute;
	right: 18px;
	bottom: 20px;
	color: var(--teal);
	transition: transform .35s var(--e);
}

.k3-pil {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

/* ── Ikoner ──────────────────────────────────────────────── */
/* Ikonet tegnes med streger og tager farve efter teksten, så det
   følger med når primærfarven skiftes i indstillingerne. */
.k3-kat-bill > .k3-ikon {
	width: 100%;
	height: 100%;
	display: block;
	padding: 26%;
	color: var(--teal);
}

.k3-kat--ikon .k3-kat-bill { background-color: var(--bg); }
.k3-kat--ikon .k3-kat-bill > .k3-ikon { padding: 24%; }

.k3-kat-bill > .k3-ikon { transition: transform .5s var(--e), color .3s var(--e); }

/* ── Underkategorier: små swatches ───────────────────────── */
/* Ikon til venstre, navn til højre, bredden følger teksten. En række
   swatches ombryder af sig selv, uden tomme pladser. */
.k3-gitter--under {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
}

.k3-kat--lille {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: auto;
	min-width: var(--k3-under, 0px);
	max-width: 100%;
	padding: 6px 14px 6px 6px;
	border-radius: 0;
	aspect-ratio: auto;
}

.k3-gitter--under > .k3-kat--lille:first-child { border-radius: 8px 0 0 8px; }
.k3-gitter--under > .k3-kat--lille:last-child { border-radius: 0 8px 8px 0; }

/* Står der kun én, er der ikke noget bånd, og så er alle fire hjørner bløde. */
.k3-gitter--under > .k3-kat--lille:only-child { border-radius: 8px; }

.k3-kat--lille .k3-kat-bill {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 15px;
	aspect-ratio: 1 / 1;
}

.k3-kat--lille .k3-kat-bill > .k3-ikon { padding: 22%; }

.k3-kat--lille .k3-kat-tekst {
	flex: 0 1 auto;
	flex-direction: row;
	align-items: baseline;
	gap: 7px;
	padding: 0;
}

.k3-kat--lille .k3-kat-navn {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.k3-kat--lille .k3-kat-antal {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* ── Overgang til produkterne ────────────────────────────── */
/* Tynd streg og en lille etiket, så man kan se hvor firkanterne slutter
   og produkterne begynder. */
.k3-prodhoved {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
	padding-top: 20px;
}

.k3-prodhoved::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background-color: var(--linje);
}

.k3-prodhoved-navn {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--ink);
}

.k3-prodhoved-antal {
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	color: var(--dim);
}

/* Er der swatches over, skal de have luft ned til stregen. */
.k3-afsnit--kategorier + .k3-afsnit--produkter { margin-top: 30px; }

/* ── Produktkort ─────────────────────────────────────────── */
.k3-kort {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--flade);
	color: var(--ink);
}

/* Hele kortet er klikbart, men kun knappen er et link. Så kan tilkøbet
   ligge ovenpå og blive trykket på uden at man ryger videre. */
.k3-straek::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.k3-straek--bar {
	position: absolute;
	inset: 0;
	z-index: 1;
}

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

.k3-kort-bill {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* Samme indrykning som titlen nedenunder, så billedet flugter med teksten. */
	padding: var(--k3-billedluft, 18px);
	/* Hvid som resten af kortet, så produktbilledet står frit. */
	background-color: var(--flade);
}

/* Kun selve billedet, ikke ikonerne i tilkøbspanelet ovenpå. */
.k3-kort-bill > img,
.k3-kort-bill > svg {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	border-radius: 10px !important;
	transition: transform .55s var(--e);
}

.k3-kort-bill > .k3-ph {
	padding: 30%;
	color: var(--teal);
	opacity: .35;
}

.k3-kort-krop {
	/* Ikke positioneret, ellers ville det strakte link kun dække kroppen. */
	position: static;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: space-between;
	padding: 16px 18px 18px;
}

.k3-kort-navn {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	overflow-wrap: anywhere;
	transition: color .28s var(--e);
}

.k3-kort-bund {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 34px;
}

.k3-kort-bund .k3-pil {
	color: var(--linje);
	transition: color .3s var(--e), transform .3s var(--e);
}

.k3-pris {
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.k3-pris del { opacity: .45; font-weight: 400; }
.k3-pris ins { text-decoration: none; }

/* Uden pris står der hvad man i stedet gør. Det er stadig prisfeltet,
   så det skal se ud som en pris og ikke som en etiket. */
.k3-pris--tilbud {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
}

.k3-pris--tilbud::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--teal);
}

/* ── Mærkat, produktionstid og prisenhed ─────────────────── */
.k3-kort-bill { position: relative; }

.k3-maerkat {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 11px;
	border-radius: 99px;
	background-color: var(--ink);
	color: #ffffff;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .01em;
}

.k3-maerkat--nedsat {
	background-color: var(--marker);
	color: var(--ink);
}

.k3-kort-top {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.k3-tid {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--dim);
}

/* Linjen under navnet på kortet: højst to linjer, ikonet flugter med
   den første. */
.k3-kortlinje { align-items: flex-start; }
.k3-kortlinje svg { margin-top: 2px; }
.k3-kortlinje-tekst {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.k3-tid svg {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	color: var(--teal);
}

.k3-enhed {
	margin-left: 5px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--dim);
}

/* ── Se mere og tilkøbspillen ────────────────────────────── */
/* Rækken nederst er selve linket. Den er ikke positioneret og har ingen
   transform, så ::after kan strække sig ud over hele kortet. Knappen
   indeni er et span med sin egen transform. */
.k3-kort-handling {
	position: static;
	display: block;
	color: inherit;
	text-decoration: none;
}


.k3-knap {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 18px;
	border: 0;
	border-radius: 10px;
	background-color: var(--ink);
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-decoration: none;
	cursor: pointer;
	transform: translateY(var(--ky, 0px));
	transition: background-color .3s var(--e), transform .3s var(--e), box-shadow .3s var(--e);
}

.k3-knap .k3-pil {
	color: currentColor;
	transition: transform .35s var(--e);
}

.k3-knap:active { --ky: 1px; }

/* ── Tilkøb ──────────────────────────────────────────────── */
/* Knap og panel ligger absolut oven på billedet, så kortets højde er
   den samme uanset om der er tilkøb eller ej. */
.k3-tk-knap {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	margin-left: auto;
	transform: translateY(var(--ty, 0px));
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 6px 11px 6px 9px;
	border: 1px solid var(--linje);
	border-radius: 99px;
	background-color: transparent;
	color: var(--ink);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color .3s var(--e), color .3s var(--e), transform .3s var(--e);
}

.k3-tk-knap svg {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	transition: transform .4s var(--e);
}

.k3-tk-knap[aria-expanded="true"] {
	border-color: var(--teal);
	color: var(--teal);
}

.k3-tk-knap[aria-expanded="true"] .k3-tk-tal { background-color: rgba(0, 112, 131, .12); }
.k3-tk-knap[aria-expanded="true"] svg { transform: rotate(135deg); }
.k3-tk-knap:active { --ty: 1px; }

.k3-tk-tal {
	display: grid;
	place-items: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 99px;
	background-color: rgba(20, 20, 20, .08);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.k3-tk {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	padding: 12px;
	background-color: rgba(255, 255, 255, .94);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .32s var(--e), transform .38s var(--e);
}

.k3-tk[hidden] {
	display: flex !important;
	visibility: hidden;
	pointer-events: none;
}

.k3-kort.er-aaben .k3-tk {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.k3-tk-hoved {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 2px 8px 6px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dim);
}

.k3-tk-luk {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background-color .28s var(--e);
}

.k3-tk-luk svg { flex: 0 0 auto; width: 11px; height: 11px; }

.k3-tk-liste {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: thin;
}

.k3-tk-punkt { margin: 0; padding: 0; }

.k3-tk-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 10px;
	background-color: transparent;
	color: var(--ink);
	text-decoration: none;
	transition: background-color .28s var(--e);
}

.k3-tk-bill {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	overflow: hidden;
	border-radius: 8px;
	background-color: var(--bg);
}

.k3-tk-bill > img,
.k3-tk-bill > svg {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	border-radius: 6px;
}

.k3-tk-bill > .k3-ph { padding: 24%; color: var(--teal); opacity: .5; }

.k3-tk-tekst {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.k3-tk-navn {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.k3-tk-pris {
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--teal);
}

/* WooCommerce hænger gerne "inkl. moms" på prisen. Det skal ikke fylde
   en linje for sig i et panel på 42 px. */
.k3-tk-pris small,
.k3-tk-pris .woocommerce-price-suffix {
	display: inline;
	font-size: 11px;
	font-weight: 400;
	color: var(--dim);
}

.k3-tk-link .k3-pil {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

/* ── Læg i kurv ──────────────────────────────────────────── */
.k3-tk-punkt {
	display: flex;
	align-items: center;
	gap: 4px;
}

.k3-tk-link { flex: 1 1 auto; min-width: 0; }

.k3-tk-kurv {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background-color: var(--teal);
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
	transform: translateY(var(--kk, 0px));
	transition: background-color .3s var(--e), transform .3s var(--e);
}

.k3-tk-kurv svg {
	grid-area: 1 / 1;
	width: 16px;
	height: 16px;
	transition: opacity .25s var(--e), transform .35s var(--e);
}

.k3-tk-kurv .k3-ikon-ok {
	opacity: 0;
	transform: scale(.6);
}

.k3-tk-kurv:active { --kk: 1px; }

/* WooCommerce sætter selv loading og added på knappen. */
.k3-tk-kurv.loading { opacity: .75; }
.k3-tk-kurv.loading .k3-ikon-kurv { animation: k3-puls .9s ease-in-out infinite; }

.k3-tk-kurv.added { background-color: #2E7D52; }
.k3-tk-kurv.added .k3-ikon-kurv { opacity: 0; transform: scale(.6); }
.k3-tk-kurv.added .k3-ikon-ok { opacity: 1; transform: scale(1); }

@keyframes k3-puls {
	0%, 100% { opacity: 1; }
	50% { opacity: .45; }
}

/* Linket til kurven som WooCommerce hænger på bagefter, hører ikke hjemme
   i et panel på 42 px. */
.k3-tk-punkt .added_to_cart { display: none !important; }

.k3-tk-link .k3-pil { color: var(--linje); transition: color .3s var(--e), transform .3s var(--e); }

/* ── Tom og sider ────────────────────────────────────────── */
.k3-tom {
	margin: 0;
	padding: 26px 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	color: var(--dim);
}

.k3-sider {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 32px 0 0;
}

.k3-side a,
.k3-side span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 13px;
	border-radius: 10px;
	background-color: transparent;
	color: var(--ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .28s var(--e), color .28s var(--e);
}

.k3-side .current {
	background-color: var(--teal);
	color: #ffffff;
	font-weight: 600;
}

.k3-side .dots { color: var(--dim); }

/* ══════════════════════════════════════════════════════════
   Bevægelse

   Alt der kan løfte sig kører gennem to variabler: --y for lodret
   forskydning og --s for tryk. Så slås indflyvning, hover og klik
   aldrig indbyrdes, og der er kun én transform pr. element.

   Uden JavaScript sættes .k3-anim aldrig, og alt står synligt fra
   start. Klassen sættes i head, så intet når at blinke.
   ══════════════════════════════════════════════════════════ */

.k3-sti,
.k3-hoved,
.k3-genveje,
.k3-prodhoved,
.k3-kat,
.k3-kort,
.k3-sider,
.k3-tom {
	--y: 0px;
	--s: 1;
	--o: 1;
	opacity: var(--o);
	transform: translateY(var(--y)) scale(var(--s));
	transition: opacity .5s var(--e), transform .65s var(--e);
}

.k3-anim .k3-sti,
.k3-anim .k3-hoved,
.k3-anim .k3-genveje,
.k3-anim .k3-prodhoved,
.k3-anim .k3-kat,
.k3-anim .k3-kort,
.k3-anim .k3-sider,
.k3-anim .k3-tom {
	--y: 18px;
	--o: 0;
}

.k3-anim .er-inde {
	--y: 0px;
	--o: 1;
}

/* Kortene får også skygge og tryk med i samme overgang. */
.k3-kat {
	transition: opacity .5s var(--e), transform .5s var(--e), box-shadow .4s var(--e);
	box-shadow: 0 0 0 0 rgba(20, 20, 20, 0);
}

.k3-kat:active { --s: .985; }
.k3-kort:active { --s: .985; }
.k3-kort.er-aaben:active { --s: 1; }

/* Kortet holder skygge og løft i den samme overgang. */
.k3-kort {
	box-shadow: 0 0 0 0 rgba(20, 20, 20, 0);
	transition: opacity .5s var(--e), transform .5s var(--e), box-shadow .4s var(--e);
}

.k3-genvej,
.k3-sti-link,
.k3-tilbage,
.k3-side a {
	transform: translateY(var(--gy, 0px));
	transition: background-color .28s var(--e), color .28s var(--e), transform .28s var(--e);
}

.k3-genvej:active,
.k3-side a:active { --gy: 1px; }

/* ── Berøring ────────────────────────────────────────────── */
/* Uden mus findes hover ikke, så trykket skal bære feedbacken. */
@media (hover: none) {
	.k3-kat:active { --y: 0px; --s: .97; }
	.k3-kort:active { --s: .97; }
	.k3-knap:active { background-color: var(--teal); }
	.k3-genvej:active { background-color: var(--teal); color: #ffffff; }
}

/* ── Fokus ───────────────────────────────────────────────── */
.k3 a:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ── Mus ─────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
	.k3-kat:hover,
	.k3-anim .k3-kat.er-inde:hover {
		--y: -4px;
		box-shadow: 0 16px 30px -18px rgba(20, 20, 20, .38);
	}
	.k3-kat:hover .k3-kat-navn { color: var(--teal); }
	.k3-kat:hover .k3-kat-bill > img { transform: scale(1.05); }
	.k3-kat:hover .k3-kat-bill > .k3-ikon { transform: scale(1.06); }
	.k3-kat:hover .k3-pil { transform: translateX(3px); }

	.k3-kort:hover { box-shadow: 0 16px 30px -18px rgba(20, 20, 20, .32); }
	.k3-kort:hover .k3-kort-navn { color: var(--teal); }
	.k3-kort:hover .k3-kort-bill > img { transform: scale(1.05); }
	.k3-kort:hover .k3-kort-bund .k3-pil { color: var(--teal); transform: translateX(3px); }
	.k3-kort:hover .k3-knap { background-color: var(--teal); }
	.k3-kort:hover .k3-knap .k3-pil { transform: translateX(3px); }
	.k3-knap:hover { box-shadow: 0 10px 20px -12px rgba(20, 20, 20, .55); }
	.k3-tk-knap:hover { border-color: var(--teal); color: var(--teal); --ty: -1px; }
	.k3-tk-knap:hover .k3-tk-tal { background-color: rgba(0, 112, 131, .12); }
	.k3-tk-luk:hover { background-color: rgba(20, 20, 20, .07); }
	.k3-tk-link:hover { background-color: rgba(20, 20, 20, .05); }
	.k3-tk-link:hover .k3-pil { color: var(--teal); transform: translateX(3px); }
	.k3-tk-kurv:hover { background-color: var(--ink); --kk: -1px; }
	.k3-tk-kurv.added:hover { background-color: #2E7D52; }

	.k3-sti-link:hover { background-color: var(--flade); color: var(--ink); }
	.k3-tilbage:hover { background-color: var(--flade); }
	.k3-genvej:hover { background-color: var(--teal); color: #ffffff; --gy: -1px; }
	.k3-tilbage:hover { --gy: -1px; }
	.k3-side a:hover { background-color: var(--flade); color: var(--teal); }
}

/* ── Skærmbredder ────────────────────────────────────────── */
@media (max-width: 1240px) {
	.k3-gitter--kat,
	.k3-gitter--prod { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.k3 { --luft: 18px; }
	.k3-hero-tekst { padding: 26px 28px; }
	.k3-flade { padding-right: 22px; padding-left: 22px; }
	.k3-gitter--kat,
	.k3-gitter--prod { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.k3-gitter--under { gap: 1px; }
}

@media (max-width: 560px) {
	.k3 { --luft: 14px; --radius: 14px; }
	.k3-titel { font-size: 24px; }
	.k3-hoved--hero { aspect-ratio: var(--k3-hero-mobil, 4 / 5); align-items: flex-end; }
	.k3-hoved--hero::after { background-image: linear-gradient(to top, rgba(12, 12, 12, .78), rgba(12, 12, 12, .3) 52%, rgba(12, 12, 12, .05) 82%); }
	.k3-hoved--hero:not(.k3-hoved--kun-bred) .k3-hero-img--bred { display: none; }
	.k3-hoved--hero .k3-hero-img--mobil { display: block; }
	.k3-hero-tekst { padding: 22px 20px; }
	.k3-hero-tekst .k3-intro p { font-size: 14px; }
	.k3-sti { margin-bottom: 14px; }
	.k3-hoved { margin-bottom: 18px; }
	.k3-genveje { margin-bottom: 20px; }
	.k3-afsnit { margin-bottom: 28px; }
	.k3-prodhoved { padding-top: 16px; margin-bottom: 14px; }
	.k3-flade { padding-right: 16px; padding-left: 16px; }
	.k3-maerkat { top: 8px; left: 8px; padding: 4px 9px; font-size: 11px; }
	.k3-gitter--kat { grid-template-columns: 1fr; }
	/* Ét produkt pr. række på telefon, så billede, navn og pris kan læses. */
	.k3-gitter--prod { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.k3-kat:not(.k3-kat--lille) { flex-direction: row; align-items: center; }
	.k3-kat:not(.k3-kat--lille) .k3-kat-bill { flex: 0 0 96px; aspect-ratio: 1 / 1; }
	.k3-kat:not(.k3-kat--lille) .k3-kat-tekst { padding: 14px 44px 14px 16px; }
	.k3-kat .k3-pil { top: 50%; bottom: auto; right: 16px; transform: translateY(-50%); }
	.k3-gitter--under { gap: 1px; }
	.k3-kat--lille { min-width: 0; padding-right: 12px; }
	.k3-kat--lille .k3-kat-bill { width: 30px; height: 30px; }
	.k3-kat--lille .k3-kat-navn { font-size: 13px; }
	.k3-kort-bill { padding: calc(var(--k3-billedluft, 18px) * .7); }
	.k3-kort-krop { padding: 12px 14px 14px; gap: 10px; }
	.k3-knap { padding: 11px 14px; font-size: 13.5px; }
	.k3-tk-knap { padding: 6px 10px 6px 8px; font-size: 11.5px; }
	.k3-tk-kurv { width: 32px; height: 32px; }
	.k3-tk { padding: 10px; }
	.k3-tk-hoved { padding-bottom: 6px; font-size: 11px; }
	.k3-tk-bill { width: 34px; height: 34px; }
	.k3-tk-navn { font-size: 12.5px; }
	.k3-tk-link { padding: 6px; gap: 8px; }
	.k3-kort-navn { font-size: 14px; }
	.k3-pris { font-size: 14px; }
}


/* ── Reduceret bevægelse ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.k3-anim .k3-sti,
	.k3-anim .k3-hoved,
	.k3-anim .k3-genveje,
	.k3-anim .k3-prodhoved,
	.k3-anim .k3-kat,
	.k3-anim .k3-kort,
	.k3-anim .k3-sider,
	.k3-anim .k3-tom {
		--y: 0px;
		--o: 1;
	}

	.k3 *,
	.k3 *::before,
	.k3 *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
	.k3-genveje, .k3-sider, .k3-tilbage { display: none !important; }
	.k3-gitter { grid-template-columns: repeat(3, 1fr); }
}