/*
Theme Name: Njordkøkken
Template: generatepress
Description: Custom child theme til Njordkøkken - dansk cateringfirma og madbutik i Silkeborg.
Author: Njordkøkken
Version: 4.52.2
Text Domain: njordkokken
*/

:root {
	--color-black: #000000;
	--color-charcoal: #14140f;
	--color-beige-light: #e0d7b0;
	--color-beige-mid: #d7cc9a;
	--color-beige-dark: #b89f5a;
	--color-gold: #a9852f;
	--color-cream: #f7f5ee;
	--color-green: #597a45;
	--color-green-dark: #46612f;
	--color-green-pale: #eef1e9;
	--color-white: #ffffff;
	--color-text: #17170f;
	--color-text-soft: #5c5c54;
	--color-border: #e8e4d6;

	--font-display: 'Playfair Display', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 5rem;
	--space-xl: 8rem;

	--radius: 4px;
	--radius-sm: 3px;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	--shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.12);

	--container: 1360px;

	/* GeneratePress uses its own --accent variable (default blue) for the
	   nav's hover/current-menu-item colour - overriding it here is simpler
	   and more reliable than fighting each individual GP nav selector. */
	--accent: var(--color-green);
}

* {
	box-sizing: border-box;
}

/* GeneratePress wraps all page content in a max-width `.container`, which
   would otherwise clip every "full width" section below to ~1200px. This
   breaks a section out to the true viewport edge regardless of that parent
   constraint (its own inner content can still be constrained separately). */
.nk-full-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

body {
	font-family: var(--font-body);
	color: var(--color-text);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.hero-title,
.entry-title {
	font-family: var(--font-display);
	color: var(--color-black);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	margin-bottom: var(--space-sm);
}

h2.nk-center {
	text-align: center;
}

p {
	color: var(--color-text-soft);
	line-height: 1.7;
	font-size: 1.02rem;
}

a {
	color: var(--color-green);
}

a:hover {
	color: var(--color-green-dark);
}

.nk-eyebrow {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-green);
	margin-bottom: var(--space-sm);
}

.nk-section-head {
	max-width: 640px;
	margin: 0 auto var(--space-lg);
	text-align: center;
}

.nk-section-head p {
	margin-bottom: 0;
}

/* ---------- Buttons (transactional - cart, checkout, forms) ---------- */
.button,
button,
input[type="submit"],
.wp-block-button__link,
.single_add_to_cart_button,
.checkout-button,
.nk-btn {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	background-color: var(--color-green) !important;
	border: 1px solid var(--color-green) !important;
	color: var(--color-white) !important;
	border-radius: var(--radius-sm);
	padding: 0.8rem 1.6rem;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
	display: inline-block;
	text-decoration: none !important;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.nk-btn:hover {
	background-color: var(--color-green-dark) !important;
	border-color: var(--color-green-dark) !important;
}

/* Hero / dark-band CTA - slightly larger, used sparingly */
.nk-btn-hero {
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 1rem 2.1rem;
}

.button.nk-btn-outline,
.nk-btn-outline {
	background-color: transparent !important;
	border: 1px solid var(--color-black) !important;
	color: var(--color-black) !important;
}

.button.nk-btn-outline:hover,
.nk-btn-outline:hover {
	background-color: var(--color-black) !important;
	color: var(--color-white) !important;
}

.button.nk-btn-white,
.nk-btn-white {
	background-color: var(--color-white) !important;
	border-color: var(--color-white) !important;
	color: var(--color-black) !important;
}

.button.nk-btn-white:hover,
.nk-btn-white:hover {
	background-color: transparent !important;
	color: var(--color-white) !important;
}

/* "Se kurv" - link WooCommerce indsætter efter et vellykket AJAX-tilføj-til-kurv-klik */
.added_to_cart.wc-forward {
	display: inline-block;
	margin-top: var(--space-xs);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	background-color: transparent !important;
	border: 1px solid var(--color-black) !important;
	color: var(--color-black) !important;
	border-radius: var(--radius-sm);
	padding: 0.7rem 1.4rem;
	text-decoration: none !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.added_to_cart.wc-forward:hover {
	background-color: var(--color-black) !important;
	color: var(--color-white) !important;
}

.nk-teaser-body .added_to_cart.wc-forward {
	align-self: flex-start;
}

/* Editorial text-arrow link CTA (used for secondary / marketing links) */
.nk-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	color: var(--color-black);
	text-decoration: none !important;
	border-bottom: 1px solid var(--color-black);
	padding-bottom: 2px;
}

.nk-link-arrow:hover {
	color: var(--color-green);
	border-color: var(--color-green);
}

.nk-link-arrow::after {
	content: "→";
	transition: transform 0.15s ease;
}

.nk-link-arrow:hover::after {
	transform: translateX(3px);
}

.nk-link-arrow.nk-link-arrow-white {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.6);
}

.nk-link-arrow.nk-link-arrow-white:hover {
	color: var(--color-beige-light);
	border-color: var(--color-beige-light);
}

/* ---------- Dividers ---------- */
.nk-divider {
	max-width: var(--container);
	margin: 0 auto;
	border: none;
	border-top: 1px solid var(--color-border);
}

/* ---------- Entrance motion ---------- */
@keyframes nkFadeUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.nk-hero-content {
	animation: nkFadeUp 0.7s ease both;
}

.nk-features .nk-feature-box {
	animation: nkFadeUp 0.6s ease both;
}

.nk-features .nk-feature-box:nth-child(1) { animation-delay: 0.05s; }
.nk-features .nk-feature-box:nth-child(2) { animation-delay: 0.15s; }
.nk-features .nk-feature-box:nth-child(3) { animation-delay: 0.25s; }

.nk-teasers .nk-teaser {
	animation: nkFadeUp 0.6s ease both;
}

.nk-teasers .nk-teaser:nth-child(1) { animation-delay: 0.05s; }
.nk-teasers .nk-teaser:nth-child(2) { animation-delay: 0.15s; }
.nk-teasers .nk-teaser:nth-child(3) { animation-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
	.nk-hero-content,
	.nk-features .nk-feature-box,
	.nk-teasers .nk-teaser {
		animation: none;
	}
}

/* Our page templates render <main> directly inside GeneratePress's
   #content.site-content, which is itself a flex container. Without an
   explicit width, a flex item only sizes to fit its content - which made
   <main> (and everything centered inside it) shrink to its widest child
   and sit left-aligned instead of spanning the full page and centering
   properly. Force it to always fill the available width. */
#content.site-content > main {
	width: 100%;
	max-width: 100%;
}

/* ---------- Header / nav ---------- */
.site-header {
	background-color: var(--color-white);
	position: sticky;
	top: 0;
	z-index: 200;
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.site-logo img {
	max-height: 96px;
	width: auto;
	transition: filter 0.35s ease;
}

@media (max-width: 600px) {
	/* Still smaller than the 96px desktop logo (there's much less header
	   width to work with), but a clear step up from the earlier 60px. */
	.site-logo img {
		max-height: 76px;
	}
}

/* ---------- Transparent header over the front-page hero ---------- */
/* Topbar + header stay in completely NORMAL document flow here (no
   position:absolute) - that avoids any ambiguity about what their top:0
   is measured against, which is what made the nav silently disappear
   behind the now-opaque topbar. Instead, the hero is pulled up underneath
   the header with a negative margin equal to the header's OWN height -
   read from --nk-header-height, which transparent-header.js measures and
   keeps updated (a hardcoded pixel guess drifts out of sync the moment the
   header's real height changes - different logo size, the topbar wrapping
   to two lines on a narrow phone, etc. - and the two start overlapping). */
.nk-has-transparent-header .site-header:not(.nk-header-scrolled) {
	background-color: transparent;
	box-shadow: none;
}

.nk-has-transparent-header .nk-hero {
	margin-top: calc(-1 * var(--nk-header-height, 150px));
}

.nk-has-transparent-header .site-header:not(.nk-header-scrolled) {
	color: var(--color-white);
}

.nk-has-transparent-header .site-header:not(.nk-header-scrolled) a {
	color: var(--color-white);
}

.nk-has-transparent-header .site-header:not(.nk-header-scrolled) .site-logo img {
	filter: brightness(0) invert(1);
}

.nk-has-transparent-header .site-header:not(.nk-header-scrolled) .nk-cart-icon {
	color: var(--color-white) !important;
}

.nk-has-transparent-header .site-header:not(.nk-header-scrolled) .nk-mobile-toggle {
	color: var(--color-white) !important;
}

/* GeneratePress's own hover rule (see its inline generate-style-inline-css
   output) turns nav links solid --accent-green on hover everywhere, full
   stop - too strong a jump for white text sitting on the hero photo.
   Softened to a pale, barely-green-tinted white in this one context only;
   the full green hover is kept everywhere else (scrolled header, every
   interior page) by simply not touching GP's rule there. */
.nk-has-transparent-header .site-header:not(.nk-header-scrolled) .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.nk-has-transparent-header .site-header:not(.nk-header-scrolled) .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a {
	color: #d6ded1 !important;
}

/* The nav element itself (and every other header sub-part) has its own
   opaque white background in the normal state - all of it needs to go
   transparent too, not just .site-header, or you get a floating white
   box behind the menu while the rest of the header is see-through. */
.nk-has-transparent-header .site-header:not(.nk-header-scrolled) .main-navigation,
.nk-has-transparent-header .site-header:not(.nk-header-scrolled) .site-branding-container,
.nk-has-transparent-header .site-header:not(.nk-header-scrolled) .inside-header,
.nk-has-transparent-header .site-header:not(.nk-header-scrolled) .inside-navigation {
	background-color: transparent !important;
}

.nk-has-transparent-header .site-header:not(.nk-header-scrolled) .main-navigation ul ul {
	background-color: var(--color-white) !important;
	color: var(--color-black);
}

.nk-has-transparent-header .site-header:not(.nk-header-scrolled) .main-navigation ul ul a {
	color: var(--color-black) !important;
}

.nk-has-transparent-header .site-header.nk-header-scrolled {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: var(--color-white);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
	animation: nkHeaderSlideDown 0.35s ease;
}

@keyframes nkHeaderSlideDown {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

.nk-has-transparent-header .site-header.nk-header-scrolled .site-logo img {
	filter: none;
}

.nk-has-transparent-header .site-header.nk-header-scrolled,
.nk-has-transparent-header .site-header.nk-header-scrolled a {
	color: var(--color-black);
}

.site-branding .main-title,
.site-branding .site-description {
	display: none;
}

/* Only the TOP-LEVEL nav links get this treatment - text styling only, no
   display/position changes, so GP's own dropdown positioning JS (which reads
   the trigger <li>/<a> box model) keeps working exactly as before. */
#primary-menu.main-nav > ul > li > a {
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* GeneratePress's own default container width (1200px, from its core CSS)
   was getting cramped with 7 top-level nav items - matches --container
   above so the header and the rest of the site's own sections widen in
   step, not just the nav. */
.grid-container {
	max-width: var(--container);
}

/* Logo left, nav block fills the rest, cart pinned right - all vertically centered. */
.inside-header.grid-container {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

#site-navigation.main-navigation {
	flex: 1 1 auto;
	min-width: 0;
}

#site-navigation .inside-navigation.grid-container {
	display: flex;
	align-items: center;
	width: 100%;
}

/* The auto left+right margins on the nav-links wrapper soak up ALL the
   leftover space evenly, which centers it AND keeps the cart pinned flush
   right with an equal gap on both sides - the fix for "same distance from
   logo to menu as from menu to cart". */
#site-navigation #primary-menu.main-nav {
	margin: 0 auto;
}

#site-navigation .menu-bar-items {
	flex-shrink: 0;
}

.main-navigation,
.main-navigation ul ul {
	background-color: var(--color-white);
}

.main-navigation .main-nav ul ul {
	min-width: 240px;
	width: max-content;
	max-width: 300px;
}

.main-navigation .main-nav ul ul li a {
	white-space: normal;
	line-height: 1.3;
}

/* ---------- Mobile nav: full-screen slide-out panel ---------- */
/* GeneratePress renders its own toggle button AND the cart icon TWICE
   (once directly in .inside-header, once again inside #site-navigation),
   normally reconciled by its own responsive CSS - but combined with our
   header overrides above, both copies were showing on mobile at once,
   crammed next to the logo. We hide GP's own toggle entirely and build our
   own single hamburger button + full-screen panel instead (mobile-nav.js
   injects the button and the panel's close button, and toggles a body
   class to open/close it). */
.nk-mobile-toggle,
.nk-mobile-nav-close {
	display: none;
}

@media (max-width: 768px) {
	/* The real cause of the off-centre logo: GeneratePress used to render
	   an entire separate nav wrapper, #mobile-menu-control-wrapper, as a
	   direct sibling of the logo and the main nav - complete with its own
	   toggle button AND its own copy of the cart icon. That's GP's "inline
	   mobile toggle" header mode; it's now disabled at the source via the
	   generate_has_inline_mobile_toggle filter in theme-hooks.php, so that
	   wrapper no longer renders at all - .inside-header now has exactly
	   the two children (logo, main nav) this grid expects, plus our own
	   injected toggle button. */
	.main-navigation .menu-toggle {
		display: none !important;
	}

	/* Root cause of the logo miscentring, finally pinned down: fighting
	   over .site-branding-container's OWN display value (mine vs.
	   GeneratePress's own main.min.css, both equal specificity) was
	   fragile no matter which technique was used to try to win that fight.
	   Sidestepping it for good: the toggle and cart are position:absolute
	   (pinned to the edges, out of normal flow), leaving the logo as the
	   ONLY normal-flow child - centering "the one child that's here" via
	   the PARENT's flexbox doesn't care what the child's own display value
	   ends up being, so there's nothing left to fight over. This also
	   fixes a second bug from the previous attempt: making the logo
	   position:absolute too left NOTHING in normal flow, so the header
	   collapsed to min-height (56px) instead of sizing to the logo's real
	   height (76px) - the logo then overflowed upward into the topbar
	   above. With the logo back in normal flow, the header sizes to fit
	   it automatically, and there's no min-height guess to keep in sync. */
	.inside-header.grid-container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nk-mobile-toggle {
		position: absolute;
		left: var(--space-xs);
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 0;
		margin: 0;
		/* iOS Safari can keep rendering a button's native OS chrome
		   (including a background) underneath author CSS unless appearance
		   is explicitly reset - on top of the !important below, this is
		   the standard fix for "my button won't stop looking like a
		   default button" on mobile Safari specifically. */
		-webkit-appearance: none;
		appearance: none;
		/* !important: the global button rule (`button { background-color:
		   var(--color-green) !important; ... }`) otherwise wins and turns
		   this into a solid green box instead of a plain icon. */
		background: none !important;
		background-color: transparent !important;
		border: none !important;
		box-shadow: none !important;
		cursor: pointer;
		/* !important: the global `button { color: white !important }` rule
		   (meant for the green "Tilføj til kurv"-style buttons) otherwise
		   wins here too, since this toggle is a real <button> element -
		   that's what actually made the icon invisible (white-on-white) on
		   every interior page. Only the transparent hero header (below)
		   needs it white instead. */
		color: var(--color-black) !important;
		/* Deliberately NOT given a z-index above the panel (999): this
		   button lives in the normal (sticky) header, which sits at the
		   very top of the viewport - the same spot the panel's first menu
		   item starts. Raising it above the panel to keep it "clickable
		   as a close button" made it visually overlap that first item
		   instead. The dedicated .nk-mobile-nav-close button INSIDE the
		   panel is the one and only way to close it; this toggle button
		   is meant to simply disappear under the panel while it's open. */
	}


	#site-navigation.main-navigation {
		position: absolute;
		right: var(--space-xs);
		top: 50%;
		transform: translateY(-50%);
	}

	.nk-mobile-toggle span {
		display: block;
		width: 22px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	body.nk-mobile-nav-open .nk-mobile-toggle span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	body.nk-mobile-nav-open .nk-mobile-toggle span:nth-child(2) {
		opacity: 0;
	}

	body.nk-mobile-nav-open .nk-mobile-toggle span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	body.nk-mobile-nav-open {
		overflow: hidden;
	}

	/* The panel itself: position:fixed lets it act as a full-screen
	   overlay. mobile-nav.js moves #primary-menu to be a direct child of
	   <body> (it used to be nested inside .site-header, whose own
	   position:sticky + z-index:200 confined it to a local stacking
	   context - no matter how high the panel's OWN z-index was, it could
	   never render above .site-header's siblings, like the topbar at
	   z-index:210 - so the topbar kept drawing on top of it). As a direct
	   child of body, it competes in the root stacking context instead,
	   where z-index:999 straightforwardly beats everything else on the
	   page. */
	#primary-menu.main-nav {
		position: fixed;
		inset: 0;
		z-index: 999;
		background: var(--color-white);
		padding: calc(var(--space-xl) + 2.5rem) var(--space-md) var(--space-md);
		overflow-y: auto;
		margin: 0;
		display: none;
	}

	body.nk-mobile-nav-open #primary-menu.main-nav {
		display: block;
	}

	/* mobile-nav.js moves this whole panel to be a direct child of <body>
	   (see the JS for why) - which also moves it OUT of <nav
	   class="main-navigation">, the element GeneratePress's own CSS uses
	   to strip default bullet points and underlines from its menus. That
	   reset no longer reaches this menu once it's relocated, so it has to
	   be redone here explicitly instead of relying on inheriting it. */
	#primary-menu.main-nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	body.nk-mobile-nav-open #primary-menu.main-nav > ul {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		gap: 0.2rem;
		text-align: left;
	}

	#primary-menu.main-nav ul li {
		border-bottom: 1px solid var(--color-border);
		text-align: left;
	}

	/* This panel has a solid white background regardless of whether the
	   transparent front-page header is active behind it - without
	   !important here, the transparent header's own "a { color: white }"
	   rule (which has higher specificity than a plain descendant selector)
	   would win and make every link invisible against the white panel. */
	#primary-menu.main-nav a {
		color: var(--color-black) !important;
		text-decoration: none !important;
	}

	#primary-menu.main-nav > ul > li > a {
		display: block;
		text-align: left;
		padding: 0.9rem 0;
		font-family: var(--font-display);
		font-size: 1.3rem;
		font-weight: 700;
		text-transform: none;
		letter-spacing: normal;
	}

	/* Sub-menus ("Selskaber"'s children) are collapsed by default and only
	   revealed once mobile-nav.js toggles .nk-submenu-open on their parent
	   <li> - a self-contained toggle, independent of GP's own dropdown JS. */
	#primary-menu.main-nav ul ul {
		display: none;
		position: static;
		width: 100%;
		max-width: none;
		min-width: 0;
		box-shadow: none;
		border: none;
		padding-left: var(--space-md);
	}

	#primary-menu.main-nav li.nk-submenu-open > ul {
		display: block;
	}

	#primary-menu.main-nav ul ul li a {
		text-align: left;
		font-size: 1.05rem;
		padding: 0.7rem 0;
	}

	#primary-menu.main-nav .dropdown-menu-toggle {
		transition: transform 0.2s ease;
	}

	#primary-menu.main-nav li.nk-submenu-open > a .dropdown-menu-toggle {
		transform: rotate(180deg);
	}

	.nk-mobile-nav-close {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: var(--space-md);
		right: var(--space-md);
		z-index: 1;
		width: 40px;
		height: 40px;
		padding: 0;
		margin: 0;
		-webkit-appearance: none;
		appearance: none;
		font-size: 1.6rem;
		line-height: 1;
		/* A filled circle (same motif as the numbered circles used
		   elsewhere on the site) instead of a bare "x" character, so
		   there's no ambiguity about whether this is rendering at all. */
		background: var(--color-green) !important;
		border: none !important;
		border-radius: 50%;
		box-shadow: none !important;
		cursor: pointer;
		color: var(--color-white);
	}
}

/* ---------- Top bar ---------- */
.nk-topbar {
	background-color: var(--color-charcoal);
	color: var(--color-beige-light);
	font-size: 0.74rem;
	font-family: var(--font-body);
	letter-spacing: 0.04em;
	text-align: center;
	padding: 0.55rem var(--space-sm);
	position: relative;
	z-index: 210;
}

.nk-topbar a {
	color: var(--color-beige-light);
	text-decoration: none;
}

.nk-topbar-phone {
	white-space: nowrap;
}

@media (max-width: 480px) {
	/* Hours + phone crammed onto one line wrapped mid-way through the
	   phone number itself ("...66" / "09" on its own line) - stacking them
	   as two clearly separate lines reads much better on a narrow phone. */
	.nk-topbar {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.2rem;
	}

	.nk-topbar-sep {
		display: none;
	}
}

/* ---------- Cart icon ---------- */
.nk-cart-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--color-black) !important;
	padding: 0 var(--space-sm);
}

.nk-cart-count {
	position: absolute;
	top: -6px;
	right: 4px;
	background: var(--color-green);
	color: var(--color-white);
	font-size: 0.62rem;
	font-weight: 600;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

.bg-beige {
	background-color: var(--color-cream);
}

.bg-black {
	background-color: var(--color-charcoal);
	color: var(--color-white);
}

section {
	padding-top: var(--space-lg);
	padding-bottom: var(--space-lg);
}

/* ---------- Hero (full-viewport, bold) ---------- */
.nk-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: var(--space-xl) var(--space-md);
	text-align: center;
	overflow: hidden;
}

.nk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(10, 10, 6, 0.8) 0%, rgba(10, 10, 6, 0.25) 45%, rgba(10, 10, 6, 0.45) 100%),
		linear-gradient(120deg, rgba(89, 122, 69, 0.35) 0%, transparent 55%);
}

.nk-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.nk-hero-inner {
	position: relative;
	z-index: 1;
	max-width: var(--container);
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.nk-hero-content {
	max-width: 700px;
}

.nk-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-beige-light);
	margin-bottom: var(--space-md);
}

.nk-hero-eyebrow::before,
.nk-hero-eyebrow::after {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--color-beige-light);
}

.nk-hero-title {
	font-family: var(--font-display);
	color: var(--color-white);
	font-size: clamp(3rem, 8vw, 5.6rem);
	letter-spacing: -0.02em;
	margin-bottom: var(--space-md);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.nk-hero-subtitle {
	font-size: 1.25rem;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 auto var(--space-lg);
	max-width: 560px;
}

.nk-hero-ctas {
	display: flex;
	gap: var(--space-sm);
	justify-content: center;
	flex-wrap: wrap;
}

.nk-hero-scroll {
	position: absolute;
	bottom: var(--space-md);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	color: var(--color-white);
	opacity: 0.85;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	animation: nkBounce 2.2s ease-in-out infinite;
}

@keyframes nkBounce {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 8px); }
}

/* ---------- Trust strip ---------- */
/* Back to a light band (the dark charcoal version felt too heavy) - the
   icon "ball" is gone too, since it was competing with the text for
   attention. A small green icon sits inline with bold text instead, so
   the words themselves are what carries the row. */
.nk-trust-strip {
	background: var(--color-white);
	padding: var(--space-lg) var(--space-md);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.nk-trust-strip-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	max-width: var(--container);
	margin: 0 auto;
	gap: var(--space-md);
}

.nk-trust-item {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--color-text);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	position: relative;
}

.nk-trust-item:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: var(--color-border);
}

.nk-trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-green);
	flex-shrink: 0;
}

.nk-trust-icon svg {
	width: 22px;
	height: 22px;
}

@media (max-width: 768px) {
	.nk-trust-item:not(:first-child)::before {
		display: none;
	}
}

@media (max-width: 600px) {
	/* auto-fit collapses this to a single column on a phone - four items
	   just stacked in a plain vertical list looked bare. A fixed 2x2 grid
	   reads as a tidy little block instead. */
	.nk-trust-strip {
		padding: var(--space-md);
	}
	.nk-trust-strip-inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-md) var(--space-sm);
	}
	.nk-trust-item {
		flex-direction: column;
		gap: 0.5rem;
		font-size: 0.85rem;
		line-height: 1.3;
	}
}

/* ---------- Feature boxes (numbered, editorial) ---------- */
.nk-features-section {
	position: relative;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
	padding: calc(var(--space-xl) + 3vw) 0 calc(var(--space-xl) + 3vw);
	margin: var(--space-lg) 0 var(--space-md);
}

.nk-features-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(20, 20, 15, 0.8) 0%, rgba(89, 122, 69, 0.55) 100%);
	z-index: 0;
}

.nk-features {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-lg);
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--space-md);
}

.nk-feature-box {
	position: relative;
	text-align: left;
	padding: var(--space-lg) var(--space-md) var(--space-md);
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-hover);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	/* Same fix as the menu teaser cards: without flex, a box with a shorter
	   description ends up with its "Se ..." link sitting higher than one
	   with a longer description. margin-top:auto on the link (below) keeps
	   every link on the same baseline regardless of text length above it. */
	display: flex;
	flex-direction: column;
}

.nk-feature-box .nk-link-arrow {
	margin-top: auto;
	align-self: flex-start;
}

.nk-feature-box:hover {
	transform: translateY(-5px) rotate(-0.5deg);
}

.nk-feature-number {
	position: absolute;
	top: -22px;
	left: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-green);
	box-shadow: 0 6px 16px rgba(89, 122, 69, 0.4);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--color-white);
	margin-bottom: var(--space-sm);
}

.nk-feature-box h3 {
	margin-top: var(--space-sm);
}

.nk-feature-box img {
	height: 40px;
	margin-bottom: var(--space-sm);
}

.nk-feature-box h3 {
	margin-bottom: var(--space-xs);
	font-size: 1.25rem;
}

.nk-feature-box p {
	margin-bottom: var(--space-sm);
}

/* ---------- Teasers / menu cards ---------- */
.nk-teasers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-md);
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--space-md) var(--space-xl);
}

.nk-teaser {
	background: var(--color-white);
	overflow: hidden;
	text-align: left;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--color-border);
	/* Grid items stretch to the row's full height by default, but without
	   this the cards' own content still just flows top-down - so a card
	   with a shorter description ends up with its button sitting higher
	   than a card with a longer one. Flex + margin-top:auto on the button
	   (below) pins every "Bestil her" to the same baseline regardless. */
	display: flex;
	flex-direction: column;
}

.nk-teaser:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-hover);
}

.nk-teaser-image-wrap {
	position: relative;
	overflow: hidden;
}

.nk-teaser img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.nk-teaser:hover img {
	transform: scale(1.06);
}

.nk-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--color-green);
	color: var(--color-white);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	z-index: 1;
}

.nk-badge.nk-badge-gold {
	background: var(--color-gold);
}

.nk-teaser-body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.nk-teaser-body h3 {
	font-size: 1.35rem;
	margin-bottom: 0.4rem;
}

.nk-teaser-price {
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--color-green-dark);
	margin-bottom: var(--space-sm);
	display: block;
	font-size: 1.05rem;
}

.nk-teaser-body .nk-btn,
.nk-teaser-body .button {
	margin-top: auto;
	align-self: flex-start;
}

.nk-teaser-body p {
	margin-bottom: var(--space-sm);
}

/* ---------- Newsletter form (footer only - see inc/theme-hooks.php) ---------- */
.nk-newsletter-form {
	display: flex;
	gap: var(--space-xs);
	max-width: 420px;
	margin: var(--space-sm) auto 0;
	flex-wrap: wrap;
	justify-content: center;
}

.nk-newsletter-form input[type="email"] {
	flex: 1;
	min-width: 220px;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--color-beige-mid);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	background: var(--color-white);
}

/* ---------- Dark CTA band ---------- */
.nk-dark-cta {
	background-color: var(--color-charcoal);
	color: var(--color-white);
	text-align: center;
	padding: var(--space-xl) var(--space-md);
}

.nk-dark-cta .nk-eyebrow {
	color: var(--color-beige-light);
}

.nk-dark-cta h2 {
	color: var(--color-white);
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.nk-dark-cta p {
	color: rgba(255, 255, 255, 0.75);
	max-width: 560px;
	margin: 0 auto var(--space-md);
}

.nk-dark-cta-buttons {
	display: flex;
	gap: var(--space-sm);
	justify-content: center;
	flex-wrap: wrap;
}

/* ---------- Featured highlight banner ---------- */
.nk-highlight {
	position: relative;
	background-size: cover;
	background-position: center;
	min-height: 60vh;
	display: flex;
	align-items: center;
	color: var(--color-white);
	overflow: hidden;
}

.nk-highlight::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 10, 6, 0.85) 0%, rgba(10, 10, 6, 0.35) 60%, rgba(10, 10, 6, 0.15) 100%);
}

.nk-highlight-inner {
	position: relative;
	z-index: 1;
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-xl) var(--space-md);
	width: 100%;
}

.nk-highlight-content {
	max-width: 480px;
}

.nk-highlight h2 {
	color: var(--color-white);
	text-align: left;
	font-size: clamp(2rem, 4vw, 2.9rem);
}

.nk-highlight p {
	color: rgba(255, 255, 255, 0.88);
}

/* ---------- Split section (Om os teaser etc.) ---------- */
.nk-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	max-width: var(--container);
	margin: 0 auto;
	gap: var(--space-xl);
	padding: var(--space-xl) var(--space-md);
}

.nk-split-image {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-hover);
	position: relative;
}

.nk-split-image::after {
	content: "";
	position: absolute;
	inset: -14px auto auto -14px;
	width: 100px;
	height: 100px;
	border: 3px solid var(--color-green);
	border-radius: var(--radius);
	z-index: -1;
}

.nk-split-image img {
	width: 100%;
	height: 460px;
	object-fit: cover;
	display: block;
}

.nk-split-content h2 {
	text-align: left;
}

.nk-single-price {
	font-family: var(--font-body);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-green-dark);
	margin-bottom: var(--space-sm);
}

.nk-single-addtocart {
	margin-top: var(--space-md);
}

.nk-single-addtocart form.cart {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.nk-single-addtocart .quantity {
	margin: 0;
}

.nk-single-addtocart .quantity .qty {
	width: 70px;
	height: 48px;
	text-align: center;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-size: 1rem;
}

.nk-single-addtocart .single_add_to_cart_button {
	font-size: 0.9rem;
	padding: 0.9rem 2rem;
}

.nk-split-content .nk-eyebrow {
	margin-bottom: var(--space-sm);
}

@media (max-width: 860px) {
	.nk-split {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
	.nk-split-image img {
		height: 320px;
	}
}

/* ---------- Gallery strip ---------- */
.nk-gallery {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
}

.nk-gallery img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, filter 0.4s ease;
	filter: saturate(1.05);
}

.nk-gallery a:hover img {
	transform: scale(1.05);
	filter: saturate(1.25) brightness(1.03);
}

@media (max-width: 900px) {
	.nk-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Discount table ---------- */
.nk-discount-table {
	width: 100%;
	max-width: 600px;
	margin: var(--space-md) auto;
	border-collapse: collapse;
	font-family: var(--font-body);
}

.nk-discount-table th,
.nk-discount-table td {
	padding: 0.8rem 1rem;
	text-align: center;
	border-bottom: 1px solid var(--color-border);
}

.nk-discount-table th {
	background-color: transparent;
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 2px solid var(--color-black);
}

/* ---------- Company page hero ---------- */
.nk-page-hero {
	background-size: cover;
	background-position: center;
	min-height: 34vh;
	position: relative;
}

/* On narrow screens 34vh reads almost square against the viewport width,
   so "cover" zooms hard into the middle of the photo and crops most of it
   away. A shorter box keeps a wider, landscape-ish crop instead. */
@media (max-width: 600px) {
	.nk-page-hero {
		min-height: 20vh;
	}
}

/* Om os specifically reads as too short/cropped-thin a strip on a wide
   desktop viewport - a taller box on this one page shows noticeably more
   of the photo instead of a shallow, letterbox-like sliver. */
@media (min-width: 601px) {
	.page-template-templatestemplate-om-os-php .nk-page-hero {
		min-height: 52vh;
	}
}

/* ---------- Sub-group section headers (håndmadder / luksus smørrebrød) ---------- */
.nk-subgroup-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-md);
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--space-md);
	border-bottom: 2px solid var(--color-black);
	padding-bottom: var(--space-sm);
}

.nk-subgroup-head h2 {
	text-align: left;
	margin-bottom: 0;
	font-size: 1.6rem;
}

.nk-subgroup-price {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--color-text-soft);
	white-space: nowrap;
}

@media (max-width: 600px) {
	/* The left-heading/right-price split reads as slightly off-balance on
	   a narrow phone - stacked and centred matches how the rest of the
	   site's headings behave on mobile. */
	.nk-subgroup-head {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.nk-subgroup-head h2 {
		text-align: center;
	}
}

/* ---------- Ugemenu (Aftensmad's 4 rotating weekly menus) ---------- */
/* Each week is its own contained card (border + subtle depth) instead of a
   loose heading-plus-grid repeated down the page with 128px of empty space
   between instances - the card boundary itself is what visually separates
   one week from the next, so the gap between them can shrink right down. */
.nk-ugemenu-week {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: var(--space-md);
	margin-top: var(--space-md);
}

.nk-ugemenu-week-header {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 2px solid var(--color-black);
}

/* Same numbered-circle motif used for the checkout steps and the homepage
   feature boxes - a "1st/2nd upcoming week" position marker, not the ISO
   week number itself (that's the "Uge NN" text beside it). */
.nk-ugemenu-week-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-green);
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.nk-ugemenu-week-heading h2 {
	margin-bottom: 0.15rem;
	font-size: 1.4rem;
	line-height: 1.1;
}

.nk-ugemenu-week-dates {
	display: block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--color-text-soft);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* .nk-teasers' own default grid (auto-fit, minmax(300px,1fr)) only fits 3
   columns in the page's container - a week's 4 days need to force
   exactly 4 columns to land on one line. The outer max-width/margin/padding
   .nk-teasers normally adds for page-level centring are reset to 0 here,
   since that's now handled once by .nk-ugemenu-list around the whole set
   of week cards, not by each individual grid inside a card. */
.nk-ugemenu-days-grid {
	grid-template-columns: repeat(4, 1fr);
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.nk-ugemenu-day {
	display: flex;
	flex-direction: column;
	padding: 0 var(--space-sm);
}

/* Thin dividers between the 4 days read as one continuous menu instead of
   four separate product tiles bumped up against each other - the same
   divider trick already used in the homepage USP strip. */
.nk-ugemenu-day:not(:first-child) {
	border-left: 1px solid var(--color-border);
}

.nk-ugemenu-day:first-child {
	padding-left: 0;
}

.nk-ugemenu-day:last-child {
	padding-right: 0;
}

/* The day's dish reuses .nk-teaser, but nested inside the week card it
   doesn't need its own competing border/shadow/background - just the photo
   and text, with a smaller image than the full-size shop grid uses. */
.nk-ugemenu-day .nk-teaser {
	border: none;
	box-shadow: none;
	border-radius: 0;
	background: transparent;
	flex: 1;
}

.nk-ugemenu-day .nk-teaser-image-wrap img {
	height: 140px;
	border-radius: var(--radius-sm);
}

.nk-ugemenu-day .nk-teaser-body {
	padding: var(--space-sm) 0 0;
}

@media (max-width: 900px) {
	.nk-ugemenu-days-grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: var(--space-md);
	}
	.nk-ugemenu-day:nth-child(2) {
		border-left: 1px solid var(--color-border);
	}
	.nk-ugemenu-day:nth-child(3) {
		border-left: none;
		padding-left: 0;
	}
}

@media (max-width: 560px) {
	.nk-ugemenu-days-grid {
		grid-template-columns: 1fr;
		row-gap: var(--space-md);
	}
	.nk-ugemenu-day {
		padding-left: 0 !important;
		border-left: none !important;
		border-top: 1px solid var(--color-border);
		padding-top: var(--space-md);
	}
	.nk-ugemenu-day:first-child {
		border-top: none;
		padding-top: 0;
	}
}

.nk-ugemenu-day-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-xs);
}

.nk-ugemenu-day-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--color-black);
}

.nk-ugemenu-day-date {
	font-size: 0.85rem;
	color: var(--color-text-soft);
	font-weight: 600;
}

.nk-ugemenu-more {
	max-width: var(--container);
	margin: var(--space-md) auto 0;
	padding: 0 var(--space-md) var(--space-xl);
}

/* <summary> gets its own native disclosure marker in most browsers - swap
   it for a small arrow that matches the rest of the site's icon language,
   and rotates when expanded, same as the payment-method accordion. */
.nk-ugemenu-more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-black);
	border: 1px solid var(--color-black);
	border-radius: var(--radius-sm);
	padding: 0.9rem 1.6rem;
	width: fit-content;
	margin: 0 auto;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nk-ugemenu-more-toggle::-webkit-details-marker {
	display: none;
}

.nk-ugemenu-more-toggle::after {
	content: "↓";
	transition: transform 0.2s ease;
}

.nk-ugemenu-more-toggle:hover {
	background: var(--color-black);
	color: var(--color-white);
}

.nk-ugemenu-more[open] .nk-ugemenu-more-toggle::after {
	transform: rotate(180deg);
}

.nk-ugemenu-more[open] .nk-ugemenu-more-toggle {
	margin-bottom: var(--space-md);
}

.nk-min-info {
	background-color: var(--color-cream);
	border-left: 3px solid var(--color-green);
	padding: var(--space-sm) var(--space-md);
	margin: var(--space-md) auto;
	font-weight: 500;
	color: var(--color-text);
	text-align: left;
}

.nk-form-card {
	background-color: var(--color-cream);
	border: 1px solid var(--color-beige-mid);
	border-radius: var(--radius);
	padding: var(--space-xl) var(--space-lg);
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}

.nk-form-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--color-green), var(--color-beige-mid));
}

.nk-form-card h2 {
	font-size: 1.6rem;
	text-align: left;
}

@media (max-width: 600px) {
	/* var(--space-xl)/var(--space-lg) padding (8rem/5rem) is fine as a
	   generous desktop card inset, but on a phone it eats almost the whole
	   screen width, squeezing the form fields down to a sliver. */
	.nk-form-card {
		padding: var(--space-md) var(--space-sm);
	}
}

/* ---------- Contact Form 7 ---------- */
.wpcf7-form {
	max-width: 640px;
	margin: 0 auto;
}

.wpcf7-form p {
	margin-bottom: var(--space-sm);
}

.nk-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
}

.nk-form-row p {
	margin-bottom: var(--space-sm);
}

@media (max-width: 600px) {
	.nk-form-row {
		grid-template-columns: 1fr;
	}
}

.wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea {
	width: 100%;
	background: var(--color-white);
	border: 1px solid var(--color-beige-mid);
	border-radius: var(--radius-sm);
	padding: 0.95rem 1.1rem;
	font-family: var(--font-body);
	font-size: 0.98rem;
	color: var(--color-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form textarea {
	min-height: 130px;
	resize: vertical;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: #9a9488;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--color-green);
	box-shadow: 0 0 0 3px rgba(89, 122, 69, 0.15);
}

.wpcf7-form .wpcf7-submit {
	width: 100%;
	margin-top: var(--space-xs);
	font-size: 0.9rem;
	padding: 1rem 2rem;
}

.wpcf7-not-valid-tip {
	color: #b3402a;
	font-size: 0.82rem;
	margin-top: 0.3rem;
	display: block;
}

.wpcf7-response-output {
	border-radius: var(--radius-sm) !important;
	margin: var(--space-sm) 0 0 !important;
	font-size: 0.9rem;
}

/* ---------- Process steps (selskabssider) ---------- */
.nk-process {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-lg);
	margin: var(--space-lg) 0;
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
}

.nk-process-step {
	text-align: center;
	padding: 0 var(--space-sm);
}

.nk-process-step .nk-process-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-green);
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1;
	margin-bottom: var(--space-sm);
}

.nk-process-step h3 {
	font-size: 1.1rem;
	margin-bottom: 0.4rem;
}

.nk-process-step p {
	font-size: 0.92rem;
}

/* ---------- Catering page ---------- */
.nk-catering-intro {
	color: var(--color-text-soft);
}

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

.nk-catering-types {
	max-width: var(--container);
	margin: var(--space-lg) auto 0;
	padding: 0 var(--space-md);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-md);
	text-align: center;
}

.nk-catering-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	animation: nkFadeUp 0.5s ease both;
}

.nk-catering-types .nk-catering-type:nth-child(1) { animation-delay: 0.05s; }
.nk-catering-types .nk-catering-type:nth-child(2) { animation-delay: 0.12s; }
.nk-catering-types .nk-catering-type:nth-child(3) { animation-delay: 0.19s; }
.nk-catering-types .nk-catering-type:nth-child(4) { animation-delay: 0.26s; }
.nk-catering-types .nk-catering-type:nth-child(5) { animation-delay: 0.33s; }

.nk-catering-type-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-green-pale);
	font-size: 1.7rem;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.nk-catering-type:hover .nk-catering-type-icon {
	background: var(--color-beige-light);
	transform: translateY(-4px);
}

.nk-catering-type span:last-child {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.85rem;
	max-width: 150px;
}

/* Menu card + budget callout, side by side - the "menu card" is where the
   old bullet-point price list becomes an actual menu instead: dish names
   set in the display font, separated by thin rules like a printed menu,
   rather than a bare <ul>. */
.nk-menu-section {
	max-width: var(--container);
	margin: var(--space-xl) auto 0;
	padding: 0 var(--space-md);
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--space-lg);
	align-items: start;
}

.nk-menu-card {
	background: var(--color-cream);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-lg) var(--space-md);
	text-align: center;
	box-shadow: var(--shadow);
}

.nk-menu-card h2 {
	margin-top: 0.3rem;
}

.nk-menu-card-price {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2.2rem;
	color: var(--color-green-dark);
	margin: var(--space-sm) 0 var(--space-md);
}

.nk-menu-card-price span {
	display: block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--color-text-soft);
	letter-spacing: 0.02em;
}

.nk-menu-card-dishes {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 460px;
	text-align: left;
}

.nk-menu-card-dishes li {
	font-family: var(--font-display);
	font-size: 1.05rem;
	padding: 0.85rem 0;
	border-bottom: 1px dashed var(--color-border);
}

.nk-menu-card-dishes li:last-child {
	border-bottom: none;
}

.nk-menu-card-addons {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
	text-align: left;
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

.nk-menu-card-addons h3 {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-soft);
	text-align: center;
	margin-bottom: var(--space-sm);
}

.nk-menu-card-addons ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--color-text-soft);
	font-size: 0.92rem;
}

.nk-menu-card-addons li {
	padding: 0.35rem 0;
}

.nk-menu-budget {
	background: var(--color-beige-light);
	border-radius: var(--radius);
	padding: var(--space-lg) var(--space-md);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	position: sticky;
	top: calc(var(--nk-header-height, 100px) + var(--space-md));
}

.nk-menu-budget .nk-catering-intro {
	color: var(--color-text);
}

@media (max-width: 900px) {
	.nk-menu-section {
		grid-template-columns: 1fr;
	}
	.nk-menu-budget {
		position: static;
	}
}

/* ---------- Cart & checkout ---------- */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-lg) var(--space-md);
}

/* Checkout gets extra room - two full-height cards side by side need more
   breathing space than the standard content column. */
.woocommerce-checkout .entry-content {
	max-width: 1360px;
}

.woocommerce table.shop_table {
	border: none;
	border-collapse: collapse;
}

.woocommerce table.shop_table th {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--color-black);
	background: transparent;
}

.woocommerce table.shop_table td {
	border-bottom: 1px solid var(--color-border);
}

.woocommerce #order_review,
.woocommerce-checkout-review-order {
	background: var(--color-cream);
	border-radius: var(--radius);
	padding: var(--space-md);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	padding: 0.7rem 0.9rem;
}

/* ---------- Cart page: big, card-style rows ---------- */
.woocommerce-cart-form__contents.shop_table {
	border-collapse: separate;
	border-spacing: 0 var(--space-sm);
}

.woocommerce-cart-form__contents.shop_table thead {
	display: none;
}

.woocommerce-cart-form__contents .cart_item {
	background: var(--color-white);
	box-shadow: var(--shadow);
	border: 1px solid var(--color-border);
}

.woocommerce-cart-form__contents .cart_item td {
	border-bottom: none;
	padding: var(--space-sm);
	vertical-align: middle;
}

.woocommerce-cart-form__contents .cart_item td.product-thumbnail {
	width: 130px;
	padding-right: 0;
}

.woocommerce-cart-form__contents .cart_item td.product-thumbnail a {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
}

.woocommerce-cart-form__contents .cart_item td.product-thumbnail img {
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: var(--radius);
	display: block;
}

.woocommerce-cart-form__contents .cart_item td.product-name a {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-black);
	text-decoration: none !important;
}

.woocommerce-cart-form__contents .cart_item td.product-price {
	color: var(--color-text-soft);
	font-size: 0.9rem;
}

.woocommerce-cart-form__contents .cart_item td.product-subtotal {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--color-green-dark);
	white-space: nowrap;
}

.woocommerce-cart-form__contents .cart_item td.product-remove {
	width: 40px;
	text-align: center;
}

.woocommerce-cart-form__contents .cart_item td.product-remove a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-cream);
	color: var(--color-text) !important;
	font-size: 1.1rem;
	line-height: 1;
}

.woocommerce-cart-form__contents .cart_item td.product-remove a.remove:hover {
	background: #f3d9d9;
	color: #a33 !important;
}

@media (max-width: 768px) {
	/* WooCommerce's OWN responsive table CSS already turns each <td> into
	   a stacked block-level "Label: value" row on narrow screens - that
	   mechanism (tr/td -> display:block) is left alone here, since it's
	   well-tested. What it doesn't handle well for this design: the
	   product photo is hidden entirely, the "Antal: "/"Subtotal: " label
	   prefixes look like generic default-WooCommerce chrome, and - because
	   the remove button happens to be the FIRST cell in the underlying
	   table markup - plain block-stacking put the little "x" at the very
	   TOP of every card, above the photo, instead of tucked in a corner.
	   Fixing the last one needs the remove cell out of normal flow
	   entirely (position:absolute doesn't care where it sits in the DOM),
	   and the photo floated so the name/price can wrap next to it - both
	   plain, long-standing CSS techniques that don't require turning the
	   row itself into a flex/grid container. */
	.woocommerce-cart-form__contents .cart_item {
		position: relative;
		padding: var(--space-sm) !important;
		padding-right: calc(var(--space-sm) + 40px) !important;
	}

	.woocommerce-cart-form__contents .cart_item td {
		text-align: left !important;
		padding: 0 !important;
		border-bottom: none !important;
	}

	.woocommerce-cart-form__contents .cart_item td::before {
		display: none !important;
	}

	.woocommerce-cart-form__contents .cart_item td.product-thumbnail {
		display: block !important;
		float: left;
		margin-right: var(--space-sm);
	}

	.woocommerce-cart-form__contents .cart_item td.product-thumbnail img {
		width: 64px !important;
		height: 64px !important;
	}

	.woocommerce-cart-form__contents .cart_item td.product-name {
		overflow: hidden;
		font-size: 0.95rem;
	}

	.woocommerce-cart-form__contents .cart_item td.product-price {
		overflow: hidden;
		margin-top: 0.25rem;
	}

	.woocommerce-cart-form__contents .cart_item td.product-quantity {
		clear: both;
		margin-top: var(--space-sm);
	}

	.woocommerce-cart-form__contents .cart_item td.product-subtotal {
		margin-top: 0.5rem;
	}

	.woocommerce-cart-form__contents .cart_item td.product-remove {
		position: absolute;
		top: var(--space-sm);
		right: var(--space-sm);
		width: auto;
	}
}

/* Quantity stepper */
.quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-white);
}

.quantity .qty {
	width: 52px;
	border: none !important;
	text-align: center;
	font-weight: 600;
	font-size: 1rem;
	-moz-appearance: textfield;
}

.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.nk-qty-btn {
	background: var(--color-cream);
	border: none;
	color: var(--color-black);
	font-size: 1.1rem;
	font-weight: 700;
	width: 36px;
	cursor: pointer;
	padding: 0 !important;
	border-radius: 0 !important;
}

.nk-qty-btn:hover {
	background: var(--color-beige-light) !important;
}

/* Coupon row + actions bar */
.woocommerce-cart-form .actions {
	background: var(--color-cream);
	border-radius: var(--radius);
	padding: var(--space-md) !important;
	border-bottom: none !important;
}

.woocommerce-cart-form .coupon {
	display: flex;
	gap: var(--space-xs);
	flex-wrap: wrap;
	align-items: center;
}

.woocommerce-cart-form .coupon #coupon_code {
	width: 220px !important;
	max-width: 100%;
	height: 46px;
	padding: 0 1rem !important;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-size: 0.95rem;
}

.woocommerce-cart-form .coupon .button {
	white-space: nowrap;
}

.woocommerce-cart-form table + .actions,
.woocommerce-cart-form .actions [name="update_cart"] {
	margin-left: auto;
}

/* Cart totals sidebar */
.cart_totals {
	background: var(--color-cream);
	border-radius: var(--radius);
	padding: var(--space-lg);
}

.cart_totals h2 {
	text-align: left;
	font-size: 1.4rem;
}

.cart_totals .order-total .woocommerce-Price-amount {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--color-green-dark);
}

/* ---------- Checkout ("Kasse") - two-column, editorial layout ---------- */
/* Flexbox rather than grid: with align-items:flex-start, each column sizes
   to its OWN content. The order-review column (heading + card, wrapped as
   one element via nk_order_review_col in woocommerce-custom.php) can grow
   as tall as the cart needs, while the billing column never stretches to
   match it - a CSS Grid row-spanning approach forced the two columns to
   share row tracks, which stretched the shorter one to match the taller. */
.woocommerce-checkout form.checkout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 var(--space-xl);
}

/* WooCommerce prepends validation error/success notices directly INSIDE
   form.checkout on failed submit - without this, that notice became a
   third flex item in the row, and since it (like #customer_details)
   refuses to shrink below its own content width, .nk-order-review-col
   (the only one with min-width:0) absorbed the entire squeeze and
   collapsed to a sliver, wrapping every word onto its own line. Forcing
   the notice to flex-basis:100% makes it wrap onto its own full-width
   row instead, pushing the two real columns onto the row below it. */
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
.woocommerce-checkout form.checkout > .woocommerce-error,
.woocommerce-checkout form.checkout > .woocommerce-message {
	flex: 1 1 100%;
	width: 100%;
	margin: 0 0 var(--space-md);
}

.woocommerce-checkout #customer_details {
	flex: 1 1 0;
	min-width: 0;
}

.woocommerce-checkout .nk-order-review-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* The heading is styled as the top of the SAME card as #order_review below
   it (matching background/border, no gap, radius only on the shared outer
   corners) so the two elements read as one continuous box. */
.woocommerce-checkout #order_review_heading {
	margin: 0 !important;
	background: var(--color-cream) !important;
	border: 1px solid var(--color-black);
	border-bottom: none !important;
	border-radius: var(--radius) var(--radius) 0 0 !important;
	/* Top padding matches #customer_details' own padding so both headings
	   line up on the same baseline instead of one sitting lower. */
	padding: var(--space-md) var(--space-md) 0 !important;
}

.woocommerce-checkout #order_review {
	display: flex;
	flex-direction: column;
	border-radius: 0 0 var(--radius) var(--radius) !important;
	border-top: none !important;
	padding-top: var(--space-md) !important;
}

@media (max-width: 900px) {
	.woocommerce-checkout form.checkout {
		flex-direction: column;
	}
}

/* ---------- Coupon toggle + form ---------- */
.woocommerce-checkout .woocommerce-info {
	list-style: none;
	background: var(--color-green-pale);
	border: 1px solid var(--color-beige-mid);
	border-left: 4px solid var(--color-green);
	border-radius: var(--radius-sm);
	padding: var(--space-sm) var(--space-md);
	margin: 0 0 var(--space-lg);
	color: var(--color-text);
	font-size: 0.95rem;
}

.woocommerce-checkout .woocommerce-info::before {
	display: none;
}

.woocommerce-checkout .woocommerce-info a.showcoupon {
	color: var(--color-green-dark);
	font-weight: 700;
	text-decoration: underline;
}

.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-sm);
	background: var(--color-cream);
	border: 1px dashed var(--color-beige-mid);
	border-radius: var(--radius);
	padding: var(--space-md);
	margin-bottom: var(--space-lg);
}

.woocommerce-checkout .checkout_coupon .form-row {
	margin: 0 !important;
	flex: 1 1 220px;
}

.woocommerce-checkout .checkout_coupon .form-row-last {
	flex: 0 0 auto;
}

.woocommerce-checkout .checkout_coupon input.input-text {
	height: 48px;
}

.woocommerce-checkout .checkout_coupon .button {
	height: 48px;
	white-space: nowrap;
}

/* Section headings get the same numbered-circle treatment used elsewhere
   on the site, instead of a plain default <h3>. */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 1.3rem;
	margin-bottom: var(--space-md);
}

.woocommerce-checkout #customer_details h3::before,
.woocommerce-checkout #order_review_heading::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--color-green);
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	flex-shrink: 0;
}

.woocommerce-checkout .woocommerce-billing-fields > h3::before {
	content: "1";
}

.woocommerce-checkout .woocommerce-additional-fields > h3::before {
	content: "2";
}

.woocommerce-checkout #order_review_heading::before {
	content: "3";
}

@media (max-width: 480px) {
	/* At the desktop 1.3rem size, "Faktureringsoplysninger" doesn't fit
	   next to its circle badge on a narrow phone and gets pushed past the
	   card edge - shrink the heading and let it wrap cleanly if it still
	   needs to, with the badge pinned to the top line instead of centred
	   across however many lines the text takes. */
	.woocommerce-checkout #customer_details h3,
	.woocommerce-checkout #order_review_heading {
		align-items: flex-start;
		font-size: 1.1rem;
	}

	.woocommerce-checkout #customer_details h3::before,
	.woocommerce-checkout #order_review_heading::before {
		margin-top: 0.1rem;
	}
}

/* Billing fields as a clean card */
.woocommerce-checkout #customer_details {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md);
	box-shadow: var(--shadow);
}

/* WooCommerce's own .col2-set splits customer_details into TWO side-by-side
   48%-wide columns (billing / "shipping"+notes) - that's on top of our OWN
   outer 2-column grid (billing card vs. order-review card), so fields were
   being squeezed to roughly a quarter of the page width and wrapping mid-
   word. Our outer grid already provides the 2-column structure, so this
   inner one just needs to stack full-width instead. */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
}

.woocommerce-checkout .col2-set {
	display: block;
}

/* Fornavn/Efternavn: WooCommerce puts these side by side (form-row-first /
   form-row-last at ~48% each) - fine in a full-width checkout, but too
   cramped in our narrower half-column card, so stack them full-width too. */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	width: 100%;
	float: none;
}

.woocommerce-checkout .woocommerce-additional-fields {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px dashed var(--color-border);
}

.woocommerce-checkout .form-row label {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--color-text);
	margin-bottom: 0.3rem;
	display: block;
}

.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	width: 100%;
	background: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.95rem 1.1rem;
	font-size: 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
	outline: none;
	border-color: var(--color-green);
	box-shadow: 0 0 0 3px rgba(89, 122, 69, 0.15);
}

/* Pickup date/time fields are the most important choice on the page -
   give them their own highlighted zone instead of blending into the rest. */
.woocommerce-checkout #e_deliverydate_field,
.woocommerce-checkout #orddd_lite_time_slot_field {
	background: var(--color-green-pale);
	border: 1px solid var(--color-beige-mid);
	border-radius: var(--radius);
	padding: var(--space-sm) var(--space-md) !important;
	margin-bottom: var(--space-xs) !important;
}

.woocommerce-checkout #e_deliverydate_field label,
.woocommerce-checkout #orddd_lite_time_slot_field label {
	color: var(--color-green-dark);
}

.woocommerce-checkout #e_deliverydate_field,
.woocommerce-checkout #orddd_lite_time_slot_field,
.woocommerce-checkout #e_deliverydate_field .woocommerce-input-wrapper,
.woocommerce-checkout #orddd_lite_time_slot_field .woocommerce-input-wrapper {
	width: 100% !important;
	box-sizing: border-box;
}

.woocommerce-checkout #e_deliverydate,
.woocommerce-checkout #orddd_lite_time_slot {
	width: 100% !important;
}

@media (max-width: 480px) {
	/* var(--space-md) horizontal padding (32px each side) inside an
	   already-narrow mobile card left just barely too little room for
	   "Afhentningstidspunkt *", wrapping a single trailing letter onto its
	   own line. */
	.woocommerce-checkout #e_deliverydate_field,
	.woocommerce-checkout #orddd_lite_time_slot_field {
		padding: var(--space-sm) !important;
	}
}

/* Order review "receipt" card */
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--color-white);
	border: 1px solid var(--color-black);
	border-radius: var(--radius);
	/* Same padding as #customer_details, so the item images/text and the
	   billing form fields both start at the same left indent when you
	   scan down the page. */
	padding: var(--space-md);
	/* No box-shadow here - it was casting a faint line right along the top
	   edge, where this card meets #order_review_heading above it, reading
	   as an unwanted colour seam between the two. */
	box-shadow: none;
}

.woocommerce-checkout-review-order-table {
	border: none !important;
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

.woocommerce-checkout-review-order-table thead {
	display: none;
}

.woocommerce-checkout-review-order-table tbody tr {
	border: none;
	border-bottom: 1px dashed var(--color-border);
}

.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
	border: none !important;
	padding: var(--space-sm) 0 !important;
	vertical-align: top;
}

/* Plain table-cells with fixed column widths, not flex - mixing display:flex
   onto <tr>/<tbody> fought the browser's own table layout algorithm and
   caused the name and price to render on top of each other. table-layout:
   fixed (set on the table above) takes these widths from the first row and
   applies them to every row, including the totals in <tfoot>. */
.woocommerce-checkout-review-order-table .product-name {
	width: 76%;
}

.woocommerce-checkout-review-order-table .product-total {
	width: 24%;
	text-align: right;
	white-space: nowrap;
	font-weight: 600;
}

.nk-receipt-item {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	width: 100%;
}

.nk-receipt-thumb {
	width: 48px !important;
	height: 48px !important;
	object-fit: cover;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}

.nk-receipt-item-body {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
	min-width: 0;
}

.nk-receipt-item-name {
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.35;
}

.nk-receipt-item-qty {
	display: inline-block;
	align-self: flex-start;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--color-green-dark);
	background: var(--color-green-pale);
	border-radius: 999px;
	padding: 0.1rem 0.55rem;
}

.woocommerce-checkout-review-order-table tfoot tr {
	border: none;
	border-top: 2px solid var(--color-black);
}

/* The subtotal/total value cells have no .product-total class, so without
   this they default to left-aligned and don't line up under the item
   price above - and without nowrap, "kr." wraps onto its own line once the
   larger total font-size no longer fits the fixed-width column. */
.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-green-dark);
	padding-top: var(--space-sm) !important;
}

/* Payment + place order */
.woocommerce-checkout #payment {
	background: transparent !important;
	border: none !important;
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px dashed var(--color-border) !important;
}

.woocommerce-checkout #payment ul.payment_methods {
	border: none !important;
}

.woocommerce-checkout #payment .wc_payment_method label {
	font-weight: 600;
}

.woocommerce-checkout #payment .payment_box {
	background: var(--color-cream) !important;
	border-radius: var(--radius-sm);
}

/* WooCommerce draws a little speech-bubble triangle pointing up from this
   box toward the radio button above it - with only one payment method,
   that "which option does this belong to" affordance is just noise. */
.woocommerce-checkout #payment .payment_box::before {
	display: none !important;
}

/* Click-to-expand payment method: with only one gateway, WooCommerce's own
   JS (which normally shows/hides .payment_box based on which radio is
   checked) never gets triggered by a user click, so the box just sits
   permanently open. nk-payment-accordion.js toggles .nk-open on click. */
.woocommerce-checkout #payment .wc_payment_method label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	padding: var(--space-sm) 0;
	margin: 0;
}

.woocommerce-checkout #payment .wc_payment_method label::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
	margin-left: var(--space-sm);
}

.woocommerce-checkout #payment .wc_payment_method label.nk-open::after {
	transform: rotate(-135deg);
}

/* !important on both: with only one gateway, WooCommerce's own checkout.js
   sets an inline style="display:block" on this box on page load, which
   would otherwise beat our class-based rule regardless of specificity. */
.woocommerce-checkout #payment .payment_box {
	display: none !important;
}

.woocommerce-checkout #payment .payment_box.nk-open {
	display: block !important;
}

.woocommerce-checkout #place_order {
	width: 100%;
	font-size: 1rem;
	padding: 1.15rem 2rem;
	margin-top: var(--space-sm);
}

/* ---------- Single product page ---------- */
.single-product div.product {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-lg) var(--space-md);
}

.woocommerce-breadcrumb {
	max-width: var(--container);
	margin: var(--space-sm) auto 0;
	padding: 0 var(--space-md);
	font-size: 0.82rem;
	color: var(--color-text-soft);
}

.single-product .summary.entry-summary .price {
	font-family: var(--font-body);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--color-text);
}

.single-product .woocommerce-product-details__short-description {
	color: var(--color-text-soft);
}

.single-product .related.products {
	max-width: var(--container);
	margin: var(--space-xl) auto 0;
	padding: 0 var(--space-md);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-lg);
}

.single-product .related.products > h2 {
	text-align: center;
}

.single-product .related.products ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-md);
	list-style: none;
	padding: 0;
}

/* ---------- Product cards ---------- */
.nk-allergen-info {
	font-size: 0.82rem;
	color: #857f6e;
	margin-top: 0.5rem;
	font-style: italic;
}

.nk-price-unit {
	font-size: 0.8rem;
	color: var(--color-text-soft);
	text-transform: none;
	font-weight: 400;
}

/* ---------- Footer ---------- */
/* Diagonal top edge echoes the same clip-path motif used on the homepage
   features section, so the footer reads as a deliberate editorial "chapter
   break" instead of a flat slab of colour suddenly appearing. A huge, very
   low-opacity wordmark sits behind the content as a quiet brand flourish. */
.nk-footer {
	position: relative;
	background-color: var(--color-charcoal);
	color: var(--color-beige-light);
	padding: calc(var(--space-xl) + 3vw) var(--space-md) 0;
	clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
	margin-top: var(--space-lg);
	overflow: hidden;
}

.nk-footer-watermark {
	position: absolute;
	left: 50%;
	bottom: -0.15em;
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(3rem, 15vw, 11rem);
	color: rgba(224, 215, 176, 0.06);
	white-space: nowrap;
	line-height: 1;
	pointer-events: none;
}

.nk-footer-inner {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
}

.nk-footer-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr 1.3fr;
	gap: var(--space-lg);
}

.nk-footer-brand .site-logo-footer {
	max-height: 100px;
	margin-bottom: var(--space-md);
	filter: brightness(0) invert(1);
}

.nk-footer-quote {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.45;
	color: var(--color-beige-light);
	max-width: 220px;
	padding-left: var(--space-sm);
	border-left: 2px solid var(--color-green);
}

.nk-footer-col h4,
.nk-footer-newsletter-card > h4 {
	color: var(--color-white);
	font-family: var(--font-body);
	font-weight: 600;
	margin-bottom: var(--space-sm);
	text-transform: uppercase;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
}

.nk-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.nk-footer-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.92rem;
	line-height: 1.4;
}

.nk-footer-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(122, 155, 100, 0.28);
	color: var(--color-beige-light);
	flex-shrink: 0;
	margin-top: 0.05rem;
}

.nk-footer p,
.nk-footer a {
	color: var(--color-beige-light);
}

.nk-footer a {
	transition: color 0.2s ease;
}

.nk-footer-list a:hover {
	color: var(--color-white);
}

.nk-footer-newsletter-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(224, 215, 176, 0.18);
	border-radius: var(--radius);
	padding: var(--space-md);
}

.nk-footer-newsletter-card .nk-eyebrow {
	color: var(--color-beige-light);
}

.nk-footer-newsletter-card > h4 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	font-size: 1.25rem;
	color: var(--color-white);
	margin-top: 0.3rem;
}

.nk-footer-newsletter-card p {
	font-size: 0.88rem;
	margin-bottom: var(--space-sm);
}

.nk-footer-newsletter-card .nk-newsletter-form {
	margin: 0;
	max-width: none;
	justify-content: flex-start;
}

.nk-footer-newsletter-card .nk-newsletter-form input[type="email"] {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(224, 215, 176, 0.25);
	color: var(--color-white);
}

.nk-footer-newsletter-card .nk-newsletter-form input[type="email"]::placeholder {
	color: rgba(224, 215, 176, 0.6);
}

.nk-footer-bottom {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-xl);
	padding: var(--space-md) 0;
	border-top: 1px solid rgba(224, 215, 176, 0.15);
	font-size: 0.82rem;
}

.nk-footer-bottom p {
	margin: 0;
}

@media (max-width: 900px) {
	.nk-footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	.nk-footer-brand,
	.nk-footer-newsletter-card {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.nk-footer-grid {
		grid-template-columns: 1fr;
	}
	.nk-footer-bottom {
		flex-direction: column;
		text-align: center;
	}
	/* Single-column mobile footer reads better centred than left-aligned -
	   each block (logo/quote, contact list, hours, newsletter) becomes its
	   own little centred group instead of a left-hugging column. */
	.nk-footer-grid > div {
		text-align: center;
	}
	.nk-footer-brand {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.nk-footer-quote {
		border-left: none;
		padding-left: 0;
		max-width: 280px;
	}
	.nk-footer-list li {
		justify-content: center;
	}
	.nk-footer-newsletter-card .nk-newsletter-form {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.nk-hero {
		min-height: 70vh;
	}
	:root {
		--space-xl: 4.5rem;
		--space-lg: 3rem;
	}
}

/* ---------- "Tak for din bestilling" (order received) ---------- */
.nk-order-hero {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--space-lg) var(--space-md) 0;
	text-align: center;
	animation: nkFadeUp 0.6s ease both;
}

.nk-order-hero-sub {
	color: var(--color-text-soft);
}

.nk-order-ticket {
	max-width: 760px;
	margin: var(--space-md) auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--color-cream);
	border-radius: var(--radius);
	box-shadow: var(--shadow-hover);
	position: relative;
	overflow: hidden;
	animation: nkFadeUp 0.6s ease both;
	animation-delay: 0.1s;
}

.nk-order-ticket-half {
	padding: var(--space-md) var(--space-sm);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.nk-order-ticket-label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.nk-order-ticket-number {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1.1;
	color: var(--color-black);
}

.nk-order-ticket-datetime {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--color-black);
}

.nk-order-ticket-address {
	color: var(--color-text-soft);
	font-size: 0.9rem;
}

/* Classic ticket-stub perforation: a dashed seam with two circular "punches"
   coloured to match the page background, so the ticket reads as physically
   cut rather than just a straight divider line. */
.nk-order-ticket-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	border-left: 2px dashed var(--color-beige-dark);
}

.nk-order-ticket-divider::before,
.nk-order-ticket-divider::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-white);
}

.nk-order-ticket-divider::before {
	top: -14px;
}

.nk-order-ticket-divider::after {
	bottom: -14px;
}

@media (max-width: 600px) {
	.nk-order-ticket {
		grid-template-columns: 1fr;
	}
	.nk-order-ticket-divider {
		top: 50%;
		left: 0;
		right: 0;
		bottom: auto;
		border-left: none;
		border-top: 2px dashed var(--color-beige-dark);
	}
	.nk-order-ticket-divider::before,
	.nk-order-ticket-divider::after {
		top: 50%;
		left: auto;
		transform: translateY(-50%);
	}
	.nk-order-ticket-divider::before {
		left: -14px;
	}
	.nk-order-ticket-divider::after {
		left: auto;
		right: -14px;
	}
}

.nk-order-overview {
	max-width: 760px;
	margin: var(--space-md) auto 0;
	padding: var(--space-sm) var(--space-md);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md) var(--space-lg);
	animation: nkFadeUp 0.6s ease both;
	animation-delay: 0.18s;
}

.nk-order-payment-instructions {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 var(--space-md);
	text-align: center;
	color: var(--color-text-soft);
}

.nk-order-payment-instructions:empty {
	display: none;
}

.nk-order-overview-item {
	text-align: center;
}

.nk-order-overview-item span {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-soft);
	margin-bottom: 0.25rem;
}

.nk-order-overview-item strong {
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--color-black);
}

.nk-order-received .woocommerce-order-details {
	max-width: 760px;
	margin: var(--space-lg) auto;
	padding: 0 var(--space-md);
}

.nk-order-received .woocommerce-order-details__title {
	font-family: var(--font-display);
	font-size: 1.3rem;
	text-align: center;
	margin-bottom: var(--space-sm);
}

.nk-order-received table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
}

.nk-order-received table.woocommerce-table--order-details th,
.nk-order-received table.woocommerce-table--order-details td {
	padding: 0.85rem 0.5rem;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

.nk-order-received table.woocommerce-table--order-details th:last-child,
.nk-order-received table.woocommerce-table--order-details td:last-child {
	text-align: right;
}

.nk-order-received table.woocommerce-table--order-details .product-quantity {
	color: var(--color-text-soft);
	font-weight: 400;
}

.nk-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
.nk-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	border-bottom: none;
	border-top: 2px solid var(--color-black);
}

.nk-order-received .woocommerce-customer-details {
	max-width: 760px;
	margin: 0 auto var(--space-lg);
	padding: 0 var(--space-md);
}

.nk-order-received .nk-dark-cta {
	margin-top: var(--space-md);
}

@media (max-width: 600px) {
	.nk-order-ticket-number {
		font-size: 1.9rem;
	}
	.nk-order-overview {
		gap: var(--space-sm) var(--space-md);
	}
}

/* ---------- SEO content block (seo_bundtekst ACF field) ---------- */
.nk-seo-content {
	padding: var(--space-lg) var(--space-md);
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-lg);
}

.nk-seo-content .nk-container {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	color: var(--color-text-soft);
}

.nk-seo-content h2,
.nk-seo-content h3 {
	font-family: var(--font-display);
	color: var(--color-black);
	margin-bottom: var(--space-sm);
}

.nk-seo-content p {
	margin-bottom: var(--space-sm);
}

.nk-seo-content p:last-child {
	margin-bottom: 0;
}