/*
Theme Name: Drive-in Krudt
Theme URI: https://drive-in-krudt.dk
Description: Custom block theme for the click-and-collect fireworks shop. Fast, SEO/CRO-first, no page builder.
Version: 0.9.90
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
Text Domain: drive-in-krudt
*/

/* =========================================================================
   Design tokens (visual layer) — elevation, radius, gradients, focus.
   Colors/spacing/type come from theme.json presets; these are the depth +
   motion tokens the premium dark look leans on. Defined once on :root.
   ========================================================================= */

:root {
	/* Radii (A2): 8 buttons/chips, 14 cards, 20 large surfaces, 999 pills. */
	--dik-radius-sm: 8px;
	--dik-radius: 14px;
	--dik-radius-lg: 20px;
	--dik-radius-pill: 999px;

	/* Elevation (A2). */
	--dik-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
	--dik-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.35);
	--dik-shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.8), 0 6px 16px rgba(0, 0, 0, 0.4);
	--dik-shadow-brand: 0 12px 32px -10px rgba(239, 66, 46, 0.55);
	--dik-shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.5);
	--dik-shadow-mega: 0 20px 40px rgba(0, 0, 0, 0.55);

	/* Gradients (A2). 3-stop brand keeps the gold visible — never flatten to red.
	   Angle is 90deg (pure horizontal), NOT 95deg: at 95deg Chrome's gradient-line
	   endpoint rounding paints a 1–6px hard gold sliver down the LEFT edge of wide
	   buttons at retina DPR (the "yellow line on the add-to-cart buttons"). 90deg
	   is visually identical (red→gold sweep) and renders clean at every width/DPR. */
	--dik-grad-brand: linear-gradient(90deg, #c8301f 0%, #ef422e 45%, #f5a623 100%);
	--dik-grad-brand-hover: linear-gradient(90deg, #d63422 0%, #ff5236 45%, #ffb53a 100%);
	--dik-grad-heading: linear-gradient(90deg, #ef422e 0%, #f5a623 100%);
	--dik-grad-hero: linear-gradient(180deg, #0a0a0c 0%, #3a0600 100%);

	/* Borders / focus. */
	--dik-border-hairline: 1px solid var(--wp--preset--color--border, #2e2e36);
	--dik-border-card-hover: rgba(245, 166, 35, 0.45);
	--dik-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dik-ring: 0 0 0 3px rgba(245, 166, 35, 0.55);

	/* Section-width framework (A4). Wide = live's 1375; gutters fold in here so
	   constrained inners and bespoke section inners share one max-width source. */
	--dik-wide: var(--wp--style--global--wide-size, 1375px);
	--dik-content: var(--wp--style--global--content-size, 720px);
	--dik-gutter: clamp(1rem, 4vw, 2.5rem);

	/* Fluid type scale (A3) — capped so nothing dominates. Mirrors theme.json
	   font-size presets; exposed as vars for bespoke (non-block) elements. */
	--dik-fs-hero: clamp(2.5rem, 5vw, 3.75rem);      /* H1 40 → 60 */
	--dik-fs-h2: clamp(1.75rem, 3.2vw, 2.25rem);     /* Section H2 28 → 36 */
	--dik-fs-h3: 1.125rem;                            /* card / USP title 18 */
	--dik-fs-eyebrow: 0.8125rem;                      /* 13, uppercase tracked */
	--dik-fs-body: clamp(1rem, 1.2vw, 1.125rem);     /* 16 → 18 */
	--dik-fs-small: 0.875rem;                         /* 14 labels */
	--dik-fs-stat: clamp(1.4rem, 2.2vw, 1.75rem);    /* STAT figure — HARD CAP ~28 */
	--dik-fs-price: 1.0625rem;                        /* 17 */
}

/* Consistent visible focus across interactive elements (AA). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #f5a623);
	outline-offset: 2px;
}

/* =========================================================================
   Gradient-clipped headline utility (A2 / defect #4). Wrap brand words in
   <span class="dik-hl"> to paint them red→gold instead of flat colour.
   Falls back to brand red where background-clip:text is unsupported.
   ========================================================================= */

.dik-hl {
	color: var(--wp--preset--color--brand, #ef422e);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.dik-hl {
		background: var(--dik-grad-heading);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* Shared eyebrow treatment (A3) — uppercase tracked brand-red kicker. */
.dik-eyebrow {
	display: inline-block;
	font-size: var(--dik-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand, #ef422e);
}

/* =========================================================================
   Section-width framework (A4 / defects #9, #8, #11). Every section BAND is
   alignfull (100vw) with its own dark bg; the INNER content is constrained to
   the wide size (1375) — not the 720 content-size. These reusable helpers let
   later steps widen pinched inners (visit/footer) without per-section math.
   ========================================================================= */

/* Full-bleed band: opt a section in to span the viewport regardless of the
   surrounding constrained layout. Uses 100% + negative margins (NOT 100vw) so
   the vertical scrollbar gutter never triggers horizontal overflow. */
.dik-bleed {
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Bespoke wide inner (opt-in for later steps): the canonical ≈1375 container
   with its own fluid gutters. border-box keeps padding inside the max-width. */
.dik-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--dik-wide);
	margin-inline: auto;
	padding-inline: var(--dik-gutter);
}

/* Narrow variant for genuinely text-only blocks (e.g. newsletter copy/form). */
.dik-inner--narrow {
	max-width: var(--dik-content);
}

/* Legacy home-pattern inners live INSIDE a constrained band that already
   supplies L/R padding, so they only need re-centring to the wide size — no
   extra padding (that double-padded and overflowed). The band's own
   contentSize is widened to 1375 per-pattern in later steps; this caps it. */
.dik-why__inner,
.dik-testimonials__inner,
.dik-visit__inner,
.dik-newsletter__inner,
.dik-popular__inner,
.dik-stats__inner {
	box-sizing: border-box;
	max-width: var(--dik-wide);
	margin-inline: auto;
}

/* =========================================================================
   Logo (defect #1). The header swaps wp:site-title → wp:site-logo (attachment
   25446, custom_logo theme mod set). Render ~52px tall, CLS-safe via the
   block's own width/height attrs; this just sizes + protects the mark.
   ========================================================================= */

.wp-block-site-logo,
.dik-header .wp-block-site-logo {
	line-height: 0;
	flex: 0 0 auto;
	margin: 0;
}

.wp-block-site-logo a,
.wp-block-site-logo img {
	display: block;
}

.dik-header .wp-block-site-logo img,
.dik-header .custom-logo {
	height: clamp(48px, 4vw, 56px);
	width: auto;
	max-width: none;
	transition: transform 0.25s var(--dik-ease, ease);
}

.dik-header .wp-block-site-logo a:hover img,
.dik-header .wp-block-site-logo a:focus-visible img {
	transform: scale(1.04);
}

/* =========================================================================
   Off-season notice bar (top of page, live "purple bar" analogue → brand).
   ========================================================================= */

.dik-notice-bar {
	background: var(--dik-grad-brand);
	color: #fff;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	text-align: center;
	padding: 0.6rem var(--wp--preset--spacing--40, 1rem);
}

.dik-notice-bar__inner {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0.75rem;
	max-width: 1200px;
}

.dik-notice-bar__icon {
	font-size: 0.7em;
	opacity: 0.9;
}

.dik-notice-bar__link {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 700;
}

.dik-notice-bar__link:hover,
.dik-notice-bar__link:focus-visible {
	color: #fff;
	opacity: 0.85;
}

/* =========================================================================
   Buttons sitewide — gradient primary, outline secondary, arrow affordance.
   Applies to native block buttons and the bespoke CTAs; brand identity kept,
   contrast fixed via the gradient's darker red end (white on #c8301f ≈ 5.3:1).
   ========================================================================= */

.wp-block-button.is-style-fill > .wp-block-button__link,
.wp-element-button.is-style-fill {
	background: var(--dik-grad-brand);
	border: 0;
	box-shadow: var(--dik-shadow-brand);
	transition: transform 0.2s var(--dik-ease), box-shadow 0.2s var(--dik-ease), filter 0.2s var(--dik-ease);
}

.wp-block-button.is-style-fill > .wp-block-button__link:hover,
.wp-block-button.is-style-fill > .wp-block-button__link:focus-visible {
	background: var(--dik-grad-brand-hover);
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -10px rgba(239, 66, 46, 0.65);
	color: #fff;
}

/* Arrow that nudges on hover. */
.dik-cta-arrow {
	display: inline-block;
	margin-left: 0.5em;
	transition: transform 0.2s var(--dik-ease);
}

.wp-block-button__link:hover .dik-cta-arrow {
	transform: translateX(4px);
}

/* =========================================================================
   Mega menu (primary navigation)
   Single source: folded into the theme stylesheet per the ≤3-CSS-file budget.
   No-JS: panel reveals on :hover / :focus-within.
   JS (Interactivity API adds .dik-mega-nav.is-js): panel reveals on .is-open
   only — an explicit click/keyboard toggle (WAI-ARIA menubar), and hover/focus
   no longer auto-open so aria-expanded stays truthful.
   ========================================================================= */

.dik-mega-nav {
	display: block;
}

/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint.
   Owner: colour the LINES gold, no box/border around the icon. */
.dik-mega-nav__burger {
	display: none;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem;
	background: transparent;
	color: var(--wp--preset--color--accent, #f5a623);
	border: 0;
	border-radius: 0;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.2s var(--dik-ease), opacity 0.2s var(--dik-ease);
}

.dik-mega-nav__burger:hover,
.dik-mega-nav__burger:focus-visible {
	opacity: 0.8;
}

/* Open = a gold X, still on transparent (no box). */
.dik-mega-nav.is-mobile-open .dik-mega-nav__burger {
	background: transparent;
	color: var(--wp--preset--color--accent, #f5a623);
	border-color: transparent;
}

.dik-mega-nav__burger-bars,
.dik-mega-nav__burger-bars::before,
.dik-mega-nav__burger-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s var(--dik-ease), opacity 0.2s var(--dik-ease);
}

.dik-mega-nav__burger-bars {
	position: relative;
}

.dik-mega-nav__burger-bars::before,
.dik-mega-nav__burger-bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.dik-mega-nav__burger-bars::before {
	top: -7px;
}

.dik-mega-nav__burger-bars::after {
	top: 7px;
}

/* Burger → X when the panel is open. */
.dik-mega-nav.is-mobile-open .dik-mega-nav__burger-bars {
	background: transparent;
}

.dik-mega-nav.is-mobile-open .dik-mega-nav__burger-bars::before {
	transform: translateY(7px) rotate(45deg);
}

.dik-mega-nav.is-mobile-open .dik-mega-nav__burger-bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

.dik-mega-nav__burger-label {
	font-size: 0.95rem;
}

/* Panel wrapper: transparent pass-through on desktop. */
.dik-mega-nav__panel-wrap {
	display: contents;
}

.dik-mega-nav__list,
.dik-mega-nav__panel-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dik-mega-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--50, 1.5rem);
}

.dik-mega-nav__item {
	position: relative;
}

/* The .dik-mega-nav ancestor raises specificity to (0,2,0) so it beats
   theme.json's global link color (`:root :where(a){color:brand}` = (0,1,0)),
   which was painting the nav RED (owner: "menu text should be white not red"). */
.dik-mega-nav .dik-mega-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0;
	color: var(--wp--preset--color--contrast, #fff);
	font-weight: 600;
	text-decoration: none;
	background: none;
	border: 0;
	font: inherit;
	cursor: pointer;
}

.dik-mega-nav .dik-mega-nav__link:hover,
.dik-mega-nav .dik-mega-nav__link:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-mega-nav__caret {
	width: 0;
	height: 0;
	border-left: 0.3rem solid transparent;
	border-right: 0.3rem solid transparent;
	border-top: 0.35rem solid currentColor;
	transition: transform 0.15s ease;
}

/* Panel — hidden by default; revealed by no-JS hover/focus or JS .is-open. */
.dik-mega-nav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 14rem;
	margin-top: 0.25rem;
	padding: var(--wp--preset--spacing--40, 1rem);
	background: var(--wp--preset--color--surface, #1f1f1f);
	border: 1px solid var(--wp--preset--color--border, #444);
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.25rem);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

/* No-JS reveal: hover / focus-within on the parent item. Gated on html:not(.js)
   (the `js` class is added synchronously in wp_head) — an ungated :hover rule
   opened the panel during the pre-hydration window whenever the cursor happened
   to rest over the nav after a page change (owner: "menu flashes open"), because
   the Interactivity module only suppresses hover-open once hydrated. */
html:not(.js) .dik-mega-nav__item--has-panel:hover > .dik-mega-nav__panel,
html:not(.js) .dik-mega-nav__item--has-panel:focus-within > .dik-mega-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.dik-mega-nav.is-js .dik-mega-nav__item--has-panel.is-open > .dik-mega-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.dik-mega-nav.is-js .dik-mega-nav__item--has-panel.is-open .dik-mega-nav__caret {
	transform: rotate(180deg);
}

/* The Interactivity API binds [hidden] on the panel when JS owns the state;
   honor it so assistive tech and the closed state agree under JS. */
.dik-mega-nav.is-js .dik-mega-nav__panel[hidden] {
	display: none;
}

.dik-mega-nav__panel-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.dik-mega-nav__panel-link {
	display: block;
	padding: 0.4rem 0.5rem;
	color: var(--wp--preset--color--contrast, #fff);
	text-decoration: none;
	border-radius: 4px;
}

.dik-mega-nav__panel-link:hover,
.dik-mega-nav__panel-link:focus-visible {
	color: var(--wp--preset--color--brand, #ef422e);
	background: var(--wp--preset--color--base, #0d0d0d);
}

/* Accent (gold) top-level link for "Tilbud". Scoped to (0,2,0) so it still
   wins over the now-white base link rule above (same specificity, later source). */
.dik-mega-nav .dik-mega-nav__link--accent {
	color: var(--wp--preset--color--accent, #f5a623);
}

/* =========================================================================
   Mega panel — the full-bleed 5-column "Fyrværkeri" dropdown (step 3).
   Spans the header width on a near-black band; each column is a category
   "card": thumbnail + off-white heading + short Danish description + red
   "Se alle →". Desktop only (≥782px); on mobile the same markup collapses
   into the drawer accordion (rules in the mobile block below).
   ========================================================================= */
@media (min-width: 782px) {
	/* The mega panel breaks out of the constrained nav to span the full header
	   width. It is anchored to the full-bleed .dik-header (position:relative,
	   left:0..right:0), NOT to the nav — anchoring to the nav offsets the panel
	   and pushes the first column off-screen. top:100% drops it directly under
	   the header band, preserving hover continuity. */
	.dik-mega-nav__panel--mega {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		min-width: 0;
		margin: 0;
		padding: clamp(1.25rem, 2vw, 1.75rem) 0 clamp(1.5rem, 2.4vw, 2rem);
		transform: translateY(-0.4rem);
		background: var(--wp--preset--color--base, #0a0a0c);
		border: 0;
		border-top: 1px solid var(--wp--preset--color--border, #2e2e36);
		border-radius: 0;
		box-shadow: var(--dik-shadow-lg, 0 20px 40px rgba(0, 0, 0, 0.55));
	}

	/* Reveal: drop the upward offset (no horizontal centering needed now).
	   Hover/focus reveal is no-JS-only (html:not(.js)) — see the base panel
	   rule: ungated :hover flashed the panel open pre-hydration. */
	html:not(.js) .dik-mega-nav__item--has-panel:hover > .dik-mega-nav__panel--mega,
	html:not(.js) .dik-mega-nav__item--has-panel:focus-within > .dik-mega-nav__panel--mega,
	.dik-mega-nav.is-js .dik-mega-nav__item--has-panel.is-open > .dik-mega-nav__panel--mega {
		transform: translateY(0);
	}

	/* Centered inner row: 5 equal columns at the wide content constraint. */
	.dik-mega-nav__panel-inner {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: clamp(1rem, 1.6vw, 1.75rem);
		width: min(100% - 3rem, 1285px);
		margin-inline: auto;
	}

	/* Each column is a single clickable card linking to /kategori/<slug>/. */
	.dik-mega-nav__col {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.55rem;
		padding: 0.75rem;
		text-decoration: none;
		border-radius: var(--dik-radius, 14px);
		border: 1px solid transparent;
		background: transparent;
		transition: border-color 0.2s var(--dik-ease), background 0.2s var(--dik-ease),
			transform 0.2s var(--dik-ease);
	}

	.dik-mega-nav__col:hover,
	.dik-mega-nav__col:focus-visible {
		background: rgba(255, 255, 255, 0.03);
		border-color: rgba(245, 166, 35, 0.4);
		transform: translateY(-2px);
		outline: none;
	}

	.dik-mega-nav__col-media {
		display: block;
		width: 100%;
		aspect-ratio: 1 / 1;
		border-radius: var(--dik-radius-sm, 8px);
		overflow: hidden;
		background: var(--wp--preset--color--surface, #16161a);
	}

	.dik-mega-nav__panel-thumb {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Branded gradient placeholder for any column lacking a category image. */
	.dik-mega-nav__panel-thumb--placeholder {
		background: var(--dik-grad-brand, linear-gradient(90deg, #c8301f 0%, #ef422e 45%, #f5a623 100%));
		opacity: 0.92;
	}

	.dik-mega-nav__col-heading {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.25;
		color: var(--wp--preset--color--contrast-soft, #ededf2);
	}

	.dik-mega-nav__col-desc {
		font-size: 0.8125rem;
		line-height: 1.45;
		color: var(--wp--preset--color--muted, #a3a3ad);
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.dik-mega-nav__col-cta {
		margin-top: auto;
		padding-top: 0.15rem;
		font-size: 0.875rem;
		font-weight: 700;
		color: var(--wp--preset--color--brand, #ef422e);
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
	}

	.dik-mega-nav__col-arrow {
		transition: transform 0.2s var(--dik-ease);
	}

	.dik-mega-nav__col:hover .dik-mega-nav__col-cta,
	.dik-mega-nav__col:focus-visible .dik-mega-nav__col-cta {
		color: var(--wp--preset--color--accent, #f5a623);
	}

	.dik-mega-nav__col:hover .dik-mega-nav__col-arrow,
	.dik-mega-nav__col:focus-visible .dik-mega-nav__col-arrow {
		transform: translateX(4px);
	}

	/* The mega panel anchors to the full-bleed .dik-header (already
	   position:relative). Every ancestor between the panel and the header must
	   be static so .dik-header is the offset parent: the nav and the has-panel
	   item are forced static here. (Non-mega items keep position:relative from
	   the base rule for their own small dropdown anchoring.) */
	.dik-mega-nav,
	.dik-mega-nav__item--mega {
		position: static;
	}
}

/* =========================================================================
   Mobile navigation (≤781px): hamburger toggle + slide-in panel.
   No-JS fallback: the burger has no effect, so the panel wrap stays visible
   and the menu renders as a stacked list (progressive enhancement). Once the
   Interactivity module hydrates (.is-js), the wrap is collapsed by default and
   revealed as an off-canvas panel only when .is-mobile-open is set.
   ========================================================================= */
@media (max-width: 781px) {
	/* Show the hamburger, give the nav a visible top row. */
	.dik-mega-nav__burger {
		display: inline-flex;
	}

	/* The wrap becomes a real box on mobile (overrides display:contents). */
	.dik-mega-nav__panel-wrap {
		display: block;
	}

	/* No-JS: stacked list under the (inert) burger. */
	.dik-mega-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.15rem;
		padding: 0.5rem 0 0.25rem;
	}

	.dik-mega-nav__link {
		padding: 0.7rem 0.25rem;
		font-size: 1.05rem;
		color: var(--wp--preset--color--contrast, #fff);
	}

	/* Drawer top-level links: white → gold on hover/focus (per recon). */
	.dik-mega-nav__link:hover,
	.dik-mega-nav__link:focus-visible {
		color: var(--wp--preset--color--accent, #f5a623);
	}

	/* Hairline separators between drawer top-level items. */
	.dik-mega-nav__item + .dik-mega-nav__item {
		border-top: 1px solid rgba(255, 255, 255, 0.06);
	}

	.dik-mega-nav__panel {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		margin-top: 0;
		padding: 0.25rem 0 0.25rem 1rem;
		background: transparent;
		border: 0;
		border-radius: 0;
		transition: none;
	}

	/* On mobile under JS, keep the explicit per-item toggle behaviour. */
	.dik-mega-nav.is-js .dik-mega-nav__item--has-panel:not(.is-open) > .dik-mega-nav__panel {
		display: none;
	}

	/* --- Mega panel collapses into the drawer accordion --- */
	/* Reset the desktop full-bleed absolute panel back into the drawer flow. */
	.dik-mega-nav__panel--mega {
		position: static;
		width: auto;
		max-width: none;
		min-width: 0;
		transform: none;
		background: transparent;
		border: 0;
		border-top: 1px solid var(--wp--preset--color--border, #2e2e36);
		border-radius: 0;
		box-shadow: none;
		padding: 0.5rem 0 0.5rem 0.5rem;
	}

	.dik-mega-nav__panel-inner {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	/* Each category becomes a compact accordion row: tiny thumbnail + name. */
	.dik-mega-nav__col {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.7rem;
		padding: 0.6rem 0.25rem;
		text-decoration: none;
		border-radius: 0;
		border: 0;
	}

	.dik-mega-nav__col + .dik-mega-nav__col {
		border-top: 1px solid rgba(255, 255, 255, 0.06);
	}

	.dik-mega-nav__col-media {
		display: block;
		flex: 0 0 auto;
		width: 36px;
		height: 36px;
		border-radius: var(--dik-radius-sm, 8px);
		overflow: hidden;
		background: var(--wp--preset--color--surface, #16161a);
	}

	.dik-mega-nav__panel-thumb {
		display: block;
		width: 36px;
		height: 36px;
		max-width: 100%;
		object-fit: cover;
	}

	.dik-mega-nav__panel-thumb--placeholder {
		display: block;
		width: 100%;
		height: 100%;
		background: var(--dik-grad-brand, linear-gradient(90deg, #c8301f 0%, #ef422e 45%, #f5a623 100%));
	}

	.dik-mega-nav__col-heading {
		font-size: 1rem;
		font-weight: 600;
		color: var(--wp--preset--color--contrast, #fff);
	}

	.dik-mega-nav__col:hover .dik-mega-nav__col-heading,
	.dik-mega-nav__col:focus-visible .dik-mega-nav__col-heading {
		color: var(--wp--preset--color--accent, #f5a623);
	}

	/* Descriptions + "Se alle" CTA are noise in the compact mobile accordion. */
	.dik-mega-nav__col-desc,
	.dik-mega-nav__col-cta {
		display: none;
	}

	/* FOUC guard: when JS is enabled (html.js set synchronously in <head>),
	   collapse the drawer off-canvas BEFORE the Interactivity module hydrates so
	   the no-JS stacked list never flashes. Mirrors the .is-js closed state.
	   No-JS visitors lack html.js, so the CSS-only fallback drawer stays visible. */
	html.js .dik-mega-nav:not(.is-js) .dik-mega-nav__panel-wrap {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100;
		width: min(86vw, 340px);
		height: 100dvh;
		max-height: 100dvh;
		padding: 4.5rem 1.25rem 2rem;
		background: var(--wp--preset--color--base, #0a0a0c);
		border-left: 1px solid var(--wp--preset--color--border, #2e2e36);
		transform: translateX(100%);
		visibility: hidden;
	}

	/* --- JS active: off-canvas slide-in panel --- */
	.dik-mega-nav.is-js .dik-mega-nav__panel-wrap {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100;
		width: min(86vw, 340px);
		height: 100dvh;
		max-height: 100dvh;
		overflow-y: auto;
		padding: 4.5rem 1.25rem 2rem;
		background: var(--wp--preset--color--base, #0a0a0c);
		border-left: 1px solid var(--wp--preset--color--border, #2e2e36);
		box-shadow: var(--dik-shadow-lg);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.28s var(--dik-ease), visibility 0s linear 0.28s;
	}

	.dik-mega-nav.is-js.is-mobile-open .dik-mega-nav__panel-wrap {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.28s var(--dik-ease);
	}

	/* Scrim behind the open panel. */
	.dik-mega-nav.is-js::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 90;
		background: rgba(0, 0, 0, 0.55);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.28s var(--dik-ease), visibility 0s linear 0.28s;
	}

	.dik-mega-nav.is-js.is-mobile-open::after {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.28s var(--dik-ease);
	}

	/* When the panel is open, pin the burger to the top of the panel so it
	   reads as a close (X) affordance and never overlaps the link list. */
	.dik-mega-nav.is-js.is-mobile-open .dik-mega-nav__burger {
		position: fixed;
		top: 1rem;
		right: 1.25rem;
		z-index: 120;
	}
}

/* Lock background scroll while the off-canvas panel is open. */
html.dik-nav-scroll-lock {
	overflow: hidden;
}

/* =========================================================================
   Header chrome (step 2 — header, logo, search).
   One constrained full-width dark band, ~80px tall:
       [logo] ···· [ nav (mega-menu) ] ···· [ search pill ][account][cart]
   Nav red→gold (mega-menu owns its own link styling in step 3); search is a
   single rounded pill with an inset-left magnifier + integrated submit.
   overflow-x:clip keeps a fixed/absolute descendant (mini-cart drawer, badge)
   from ever extending the document scrollWidth on mobile.
   ========================================================================= */

.dik-header {
	overflow-x: clip;
	border-bottom: var(--dik-border-hairline);
	padding-block: clamp(0.6rem, 1.6vw, 1rem);
}

.dik-header__row {
	gap: clamp(0.85rem, 2vw, 1.75rem);
	min-height: 64px;
}

/* The mega-menu nav fills the centre and pushes search + actions to the right. */
.dik-header__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.dik-header__actions {
	flex: 0 0 auto;
	align-items: center;
}

/* Search is a direct row child between the nav and the account/cart actions;
   it shrinks gracefully but keeps a comfortable resting width on desktop. */
.dik-header > .dik-header__row > .dik-product-search,
.dik-header__row > .dgwt-wcas-search-wrapp,
.dik-header__row > .wp-block-search {
	min-width: 0;
	flex: 0 1 300px;
	margin: 0;
}

.dik-header__row > .wp-block-search .wp-block-search__input {
	min-width: 0;
}

@media (max-width: 781px) {
	/* Mobile layout: a compact top row [logo] ···· [account][cart][burger],
	   with the full search pill on its own full-width line beneath. Search is a
	   direct row child, so flex-wrap + order:99 drop it to line 2 — fully usable
	   (not a cramped sliver) while the burger keeps room on line 1. No overflow.
	   The logo is pinned hard-LEFT with an auto inline-end margin; the selector
	   is specific enough to beat core's `.dik-header .wp-block-site-logo{margin:0}`
	   (which previously zeroed the auto margin and floated the logo to the right). */
	.dik-header__row {
		flex-wrap: wrap;
		gap: 0.55rem 0.6rem;
		justify-content: flex-end; /* logo's auto inline-end margin carries the gap */
	}

	.dik-header__row > .dik-header__logo {
		order: 0;
		margin: 0 auto 0 0; /* pin top-LEFT; auto-right pushes actions+burger into a right cluster */
	}

	.dik-header__nav {
		order: 3;
		flex: 0 0 auto;
	}

	.dik-header__actions {
		order: 2;
		flex: 0 0 auto;
		gap: 0.45rem;
	}

	/* Search drops to its own full-width line under the top row. Match the
	   desktop selector's specificity so flex-basis:100% actually wins. */
	.dik-header > .dik-header__row > .dik-product-search,
	.dik-header__row > .dgwt-wcas-search-wrapp,
	.dik-header__row > .wp-block-search {
		order: 99;
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
	}

	/* On its own full-width line the search may use the full width. */
	.dik-header .dgwt-wcas-search-wrapp {
		max-width: 100%;
	}

	/* The mega-nav burger is icon-only on mobile (label hidden) to save space. */
	.dik-mega-nav__burger {
		padding-inline: 0.7rem;
	}

	.dik-mega-nav__burger-label {
		display: none;
	}
}

@media (max-width: 420px) {
	/* On the narrowest phones, hide the account label; cart + burger + the
	   full-width search below are enough. Account stays reachable elsewhere. */
	.dik-header__actions .dik-account-link {
		display: none;
	}
}

/* =========================================================================
   Front-page hero (defect #4) — two-column premium layout.
   LEFT: red eyebrow → gradient-clipped multi-line H1 → muted lead → 2 CTAs.
   RIGHT: rounded dark card holding the fireworks scene (LCP: explicit
   width/height + fetchpriority="high" in markup → no CLS) with two floating
   gold-accented pill badges. Background = dark→maroon brand gradient.
   Brand tokens only; gold is visible on the highlight + badges.
   ========================================================================= */

.dik-hero {
	position: relative;
	text-align: left;
	background: var(--dik-grad-hero);
	overflow: clip;
}

/* A soft radial glow behind the media to add depth on the maroon gradient. */
.dik-hero::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -8%;
	width: 46vw;
	max-width: 720px;
	aspect-ratio: 1;
	transform: translateY(-50%);
	background: radial-gradient(circle, rgba(239, 66, 46, 0.22) 0%, rgba(245, 166, 35, 0.08) 38%, transparent 68%);
	pointer-events: none;
	z-index: 0;
}

/* Constrain the inner two-column grid to the wide (1375) frame. */
.dik-hero > .dik-hero__grid {
	position: relative;
	z-index: 1;
	max-width: var(--dik-wide);
	margin-inline: auto;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}

.dik-hero__col-text {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.dik-hero__eyebrow {
	margin: 0;
}

/* Gradient-clipped multi-line headline (brand words via .dik-hl). */
.dik-hero__title {
	margin: 0;
	font-size: var(--dik-fs-hero);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-hero__lead {
	margin: 0;
	max-width: 56ch;
	font-size: var(--dik-fs-body);
	line-height: 1.5;
	font-weight: 500;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* CTA pair share one baseline (A5): primary gradient + arrow, secondary
   dark fill with red label + thin neutral border that warms to gold. */
.dik-hero__cta {
	margin-top: 0.5rem;
	gap: 0.85rem;
}

.dik-hero__cta .wp-block-button__link {
	padding: 13px 28px;
	border-radius: var(--dik-radius-sm);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
}

.dik-hero__cta-secondary .wp-block-button__link {
	background: var(--wp--preset--color--base, #0a0a0c);
	color: var(--wp--preset--color--brand, #ef422e);
	border: 1px solid rgba(166, 166, 166, 0.44);
	transition: border-color 0.2s var(--dik-ease), background 0.2s var(--dik-ease), transform 0.2s var(--dik-ease);
}

.dik-hero__cta-secondary .wp-block-button__link:hover,
.dik-hero__cta-secondary .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--accent, #f5a623);
	background: rgba(245, 166, 35, 0.08);
	color: var(--wp--preset--color--brand, #ef422e);
	transform: translateY(-2px);
}

/* Right column — the media card + floating badges. */
.dik-hero__col-media {
	min-width: 0;
}

.dik-hero__media {
	position: relative;
	margin: 0 auto;
	max-width: 560px;
}

.dik-hero__card {
	position: relative;
	margin: 0;
	padding: 10px;
	border-radius: var(--dik-radius-lg);
	background: #141414;
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: var(--dik-shadow-lg);
}

.dik-hero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1024 / 676;
	object-fit: cover;
	border-radius: calc(var(--dik-radius-lg) - 6px);
}

/* Floating pill badges (live: bg #141414, radius 50px, padding 15px). */
.dik-hero__badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 12px 16px;
	background: #141414;
	border: 1px solid rgba(245, 166, 35, 0.28);
	border-radius: 50px;
	box-shadow: var(--dik-shadow);
	z-index: 2;
}

.dik-hero__badge--tl {
	top: -18px;
	left: -14px;
}

.dik-hero__badge--br {
	bottom: -18px;
	right: -14px;
}

.dik-hero__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(239, 66, 46, 0.16);
	font-size: 1rem;
	line-height: 1;
}

.dik-hero__badge-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.dik-hero__badge-kicker {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-hero__badge-word {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

/* Tablet: keep two columns but tighten the media. */
@media (max-width: 1024px) {
	.dik-hero__media {
		max-width: 460px;
	}
}

/* Mobile: single column, text first, CTAs side-by-side, media below. */
@media (max-width: 781px) {
	.dik-hero {
		text-align: left;
	}

	.dik-hero > .dik-hero__grid {
		gap: 2.25rem;
	}

	/* Block columns already stack ≤781; lock the order + full width. */
	.dik-hero__col-text,
	.dik-hero__col-media {
		flex-basis: 100% !important;
	}

	.dik-hero__title {
		line-height: 1.1;
	}

	/* CTA pair stays side-by-side (each ~50%), per the live mobile hero. */
	.dik-hero__cta {
		flex-wrap: nowrap;
	}

	.dik-hero__cta .wp-block-button {
		flex: 1 1 0;
	}

	.dik-hero__cta .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		text-align: center;
		padding-inline: 14px;
	}

	.dik-hero__media {
		max-width: 420px;
	}

	/* Pull the badges inward so they never cause horizontal overflow. */
	.dik-hero__badge--tl {
		left: 0;
	}

	.dik-hero__badge--br {
		right: 0;
	}
}

@media (max-width: 380px) {
	.dik-hero__cta {
		flex-wrap: wrap;
	}

	.dik-hero__cta .wp-block-button {
		flex-basis: 100%;
	}
}

/* =========================================================================
   Home: stats count-up row (Task 4.2)
   Figures are real text in markup (no-JS + SEO); JS only animates them.
   ========================================================================= */

.dik-stats__list {
	list-style: none;
	margin: 0 auto;
	max-width: var(--dik-wide);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50, 1.5rem);
	text-align: center;
}

.dik-stats__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--40, 1rem) 0.5rem;
	position: relative;
}

/* Hairline divider between figures for rhythm. */
.dik-stats__item + .dik-stats__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 56%;
	background: linear-gradient(180deg, transparent, var(--wp--preset--color--border, #2e2e36), transparent);
}

/* Stat figure (A3 / defect #5): capped ~28px, NOT a hero numeral. */
.dik-stats__figure {
	font-size: var(--dik-fs-stat);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--brand, #ef422e);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.dik-stats__label {
	font-size: var(--dik-fs-small);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

@media (max-width: 480px) {
	.dik-stats__list {
		gap: var(--wp--preset--spacing--30, 0.75rem);
	}

	.dik-stats__item {
		padding-inline: 0.25rem;
	}
}

/* =========================================================================
   Home: populære produkter scroller (Task 4.3)
   Native horizontal scroll (works no-JS); arrows are enhancement only.
   ========================================================================= */

.dik-popular__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
}

.dik-popular__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large, 2.75rem);
	letter-spacing: -0.02em;
}

.dik-popular__nav {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

.dik-popular__arrow {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border, #444);
	background: transparent;
	color: inherit;
	font-size: 1.1rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.dik-popular__arrow:hover:not([disabled]),
.dik-popular__arrow:focus-visible:not([disabled]) {
	border-color: var(--wp--preset--color--brand, #ef422e);
	color: var(--wp--preset--color--brand, #ef422e);
}

.dik-popular__arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* Contain the horizontal scroller so the track's overflow can never propagate
   to a page-level horizontal scrollbar (overflow-x:clip keeps vertical normal). */
.dik-popular {
	overflow-x: clip;
}

.dik-popular__inner {
	min-width: 0;
}

.dik-popular__track {
	list-style: none;
	margin: 0;
	/* Top padding gives the hover-lift room above the clip line; side padding
	   keeps the first/last card off the rail edge; bottom padding gives the card
	   shadow breathing room. */
	padding: 0.5rem 0.25rem 0.85rem;
	/* FLEXBOX scroller (not grid): a flex row sizes its cross-axis (height) to
	   the TALLEST card's natural content and stretches every cell to match. The
	   old grid-auto-flow:column path under-sized the single implicit row, so the
	   card content (CTA + bottom padding) overflowed the row — clipping the
	   slider cards' bottoms and overlapping rows on the catalog grid. Flex sizes
	   the row to the content, so nothing is clipped and cards stay equal-height. */
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	gap: var(--wp--preset--spacing--40, 1rem);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	/* Lock to a purely horizontal scroller (owner: the slider used to scroll up
	   and down). With flex sizing the row, there is no vertical overflow left to
	   clip — overflow-y:hidden only guards the hover-lift. */
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* Hide the scrollbar so it never reserves height inside the track (which, on
	   classic Windows scrollbars, used to clip the card bottoms). */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dik-popular__track::-webkit-scrollbar {
	display: none;
}

/* Cells carry the responsive per-view width via flex-basis; the card inside
   fills the stretched cell so CTAs land on one shared baseline. Mobile shows
   ~1.3 cards (a peek that signals "swipe for more"). */
.dik-popular__cell {
	scroll-snap-align: start;
	min-width: 0;
	flex: 0 0 78%;
	display: flex;
}

.dik-popular__cell > .dik-product-card {
	width: 100%;
}

@media (min-width: 600px) {
	.dik-popular__cell {
		flex-basis: 46%;
	}
}

/* Desktop: 4-up. */
@media (min-width: 782px) {
	.dik-popular__cell {
		flex-basis: calc((100% - 3 * var(--wp--preset--spacing--40, 1rem)) / 4);
	}
}

/* Wide desktop: 5-up so the bestseller cards read smaller (owner: "make the
   best sellers a bit smaller, it's really large"). The catalog grid stays 4-up. */
@media (min-width: 1200px) {
	.dik-popular__cell {
		flex-basis: calc((100% - 4 * var(--wp--preset--spacing--40, 1rem)) / 5);
	}
}

.dik-popular__more {
	margin: var(--wp--preset--spacing--60, 2rem) 0 0;
	text-align: center;
}

/* "Se alt fyrværkeri" rendered as a real secondary button (owner: was a bare
   text link). Gold outline at rest → red→gold gradient fill on hover. */
.dik-popular__more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent, #f5a623);
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--wp--preset--color--accent, #f5a623);
	border-radius: var(--dik-radius-sm, 10px);
	transition: background 0.2s var(--dik-ease), color 0.2s var(--dik-ease), border-color 0.2s var(--dik-ease), transform 0.2s var(--dik-ease);
}

.dik-popular__more-link::after {
	content: "→";
	font-weight: 700;
}

.dik-popular__more-link:hover,
.dik-popular__more-link:focus-visible {
	background: var(--dik-grad-brand, linear-gradient(90deg, #c8301f, #ef422e 45%, #f5a623));
	border-color: transparent;
	color: #fff;
	transform: translateY(-2px);
}

/* Shared product card — premium elevated surface, used by home scroller,
   archive grid and search. Hover lifts the whole card with a brand glow. */
.dik-product-card {
	position: relative;
	/* Equal-height cards come from the parent flex/grid cell's stretch (the cell
	   has a definite cross size), NOT height:100% — a percentage height here
	   re-created the row-sizing paradox that clipped the card bottom inside the
	   slider. align-self defaults to stretch, so the card fills its cell. */
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.75rem 0.75rem 0.9rem;
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius);
	box-shadow: var(--dik-shadow-sm);
	transition: transform 0.25s var(--dik-ease), box-shadow 0.25s var(--dik-ease), border-color 0.25s var(--dik-ease);
}

.dik-product-card:hover,
.dik-product-card:focus-within {
	transform: translateY(-4px);
	border-color: rgba(245, 166, 35, 0.4);
	box-shadow: var(--dik-shadow-lg);
}

.dik-product-card__link {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
	flex: 1 1 auto;
}

.dik-product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--base, #0a0a0c);
	border-radius: var(--dik-radius-sm);
	overflow: hidden;
}

.dik-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--dik-ease);
}

.dik-product-card:hover .dik-product-card__media img {
	transform: scale(1.05);
}

.dik-product-card__badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 2;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	line-height: 1.2;
	box-shadow: var(--dik-shadow-sm);
}

.dik-product-card__badge--oos {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	background: rgba(10, 10, 12, 0.85);
	color: var(--wp--preset--color--contrast, #fff);
	font-size: 0.75rem;
	font-weight: 800;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
}

.dik-product-card__badge--sale {
	background: var(--dik-grad-brand);
	color: #fff;
}

/* Sale-% badge injected into ANY native WooCommerce loop thumbnail
   (woocommerce_before_shop_loop_item_title, prio 9). The hook is loop-global
   so this fires on the archive grid AND on the PDP related-products loop —
   defect #12 requires the −X% pill on every surface a sale product appears.
   The badge is position:absolute, so its li.product MUST be position:relative
   even OUTSIDE .dik-archive (the default related-products loop) or the pill
   would anchor to the page, not the card. */
li.product {
	position: relative;
}

.dik-loop-sale-badge {
	position: absolute;
	z-index: 2;
	top: 0.6rem;
	left: 0.6rem;
	background: var(--dik-grad-brand);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	line-height: 1.2;
	box-shadow: var(--dik-shadow-sm);
}

/* Grid add-to-cart CTA (Task 5.3): consistent across card + native loop.
   margin-top:auto pins the CTA to the card bottom so every CTA in a row sits
   on ONE baseline — fixes the "buttons on populære produkter are off" defect
   (the scroller cells are equal-height, so auto + the 0.85rem top gap aligns
   them across home popular, archive, related and search). */
.dik-card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	margin-top: auto;
	padding: 0.8rem 1rem;
	/* Transparent 1px border so the gradient CTA shares the EXACT border-box
	   height of the outline/OOS variants (which carry a 1px border) — keeps
	   every CTA on one baseline whether a card is buyable, OOS or "choose". */
	border: 1px solid transparent;
	border-radius: var(--dik-radius-sm);
	background: var(--dik-grad-brand);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--dik-shadow-brand);
	transition: transform 0.2s var(--dik-ease), filter 0.2s var(--dik-ease);
}

.dik-card-cta:hover,
.dik-card-cta:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.06);
	color: #fff;
}

.dik-card-cta--secondary {
	background: transparent;
	color: var(--wp--preset--color--accent, #f5a623);
	border: 1px solid rgba(245, 166, 35, 0.55);
	box-shadow: none;
}

.dik-card-cta--secondary:hover,
.dik-card-cta--secondary:focus-visible {
	background: rgba(245, 166, 35, 0.12);
	color: var(--wp--preset--color--accent-bright, #ffc24d);
}

.dik-card-cta[disabled],
.dik-card-cta--oos {
	background: var(--wp--preset--color--surface-2, #1f1f25);
	color: var(--wp--preset--color--muted, #a3a3ad);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	cursor: not-allowed;
	box-shadow: none;
	filter: none;
	transform: none;
}

.dik-card-cta--loading {
	opacity: 0.7;
	pointer-events: none;
}

.dik-product-card--oos .dik-product-card__media img {
	opacity: 0.55;
	filter: grayscale(0.3);
}

.dik-product-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-product-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	font-weight: 800;
	font-size: 1.0625rem;
	line-height: 1.2;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-product-card__price del {
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-weight: 600;
	font-size: 0.9rem;
	opacity: 0.8;
	margin-right: 0;
}

.dik-product-card__price ins {
	text-decoration: none;
	color: var(--wp--preset--color--accent, #f5a623);
}

/* =========================================================================
   Home: hvorfor vælge os (Task 4.4)
   ========================================================================= */

.dik-why__eyebrow,
.dik-testimonials__eyebrow,
.dik-visit__eyebrow,
.dik-newsletter__eyebrow,
.dik-popular__eyebrow {
	margin: 0 0 0.4rem;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 800;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-why__title,
.dik-testimonials__title,
.dik-visit__title,
.dik-newsletter__title {
	margin: 0 0 var(--wp--preset--spacing--60, 2.5rem);
	font-size: var(--wp--preset--font-size--xx-large, 2.75rem);
	letter-spacing: -0.02em;
}

/* Why grid (defect #7): exactly 4 USPs — 4-up desktop, 2-up tablet, 1-up mobile. */
.dik-why__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--50, 1.5rem);
	align-items: stretch;
}

@media (max-width: 1023px) {
	.dik-why__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.dik-why__grid {
		grid-template-columns: 1fr;
	}
}

/* Why cards: raised tiles, centered content with a round red-tint icon badge. */
.dik-why__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;
	padding: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--50, 1.5rem);
	background: var(--wp--preset--color--base, #0a0a0c);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius);
	transition: transform 0.25s var(--dik-ease), border-color 0.25s var(--dik-ease), box-shadow 0.25s var(--dik-ease);
}

.dik-why__item:hover {
	transform: translateY(-4px);
	border-color: rgba(245, 166, 35, 0.35);
	box-shadow: var(--dik-shadow);
}

/* 64px circular red-tint badge, white glyph, centered above the title. */
.dik-why__icon {
	display: inline-flex;
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(239, 67, 67, 0.11);
	border: 1px solid rgba(239, 67, 67, 0.22);
	color: var(--wp--preset--color--contrast, #fff);
	margin-bottom: 1.25rem;
}

.dik-why__item:hover .dik-why__icon {
	background: rgba(239, 67, 67, 0.16);
	border-color: rgba(245, 166, 35, 0.4);
}

.dik-why__icon svg {
	width: 32px;
	height: 32px;
}

.dik-why__item-title {
	margin: 0 0 0.5rem;
	font-size: var(--dik-fs-h3, 1.125rem);
	font-weight: 600;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-why__item-text {
	margin: 0;
	font-size: var(--dik-fs-small, 0.875rem);
	color: var(--wp--preset--color--muted, #a3a3ad);
	line-height: 1.6;
}

/* =========================================================================
   Home: testimonials (Task 4.4)
   ========================================================================= */

.dik-testimonials__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50, 1.5rem);
	align-items: stretch;
}

@media (max-width: 900px) {
	.dik-testimonials__grid {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin-inline: auto;
	}
}

.dik-testimonials__item {
	display: flex;
}

/* Card: flex column so the author line pins to the bottom (no empty void). */
.dik-testimonials__figure {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--50, 1.5rem);
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius);
	box-shadow: var(--dik-shadow-sm);
	overflow: hidden;
	transition: transform 0.25s var(--dik-ease), box-shadow 0.25s var(--dik-ease), border-color 0.25s var(--dik-ease);
}

/* Thin red→gold accent bar along the card top. */
.dik-testimonials__figure::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--dik-grad-heading);
	opacity: 0.85;
}

.dik-testimonials__figure:hover {
	transform: translateY(-4px);
	box-shadow: var(--dik-shadow);
	border-color: var(--dik-border-card-hover, rgba(245, 166, 35, 0.45));
}

/* Oversized decorative opening quote, gold, top-right of the card. */
.dik-testimonials__mark {
	position: absolute;
	top: 0.1rem;
	right: 1rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 5rem;
	line-height: 1;
	color: var(--wp--preset--color--accent, #f5a623);
	opacity: 0.16;
	pointer-events: none;
}

.dik-testimonials__stars {
	color: var(--wp--preset--color--accent, #f5a623);
	letter-spacing: 3px;
	font-size: 1.15rem;
}

.dik-testimonials__quote {
	margin: 0.85rem 0 1.5rem;
	font-style: normal;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

/* Push the author block to the bottom of the flex column. */
.dik-testimonials__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border, #2e2e36);
	font-size: 0.9rem;
}

.dik-testimonials__avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--dik-grad-brand);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	box-shadow: var(--dik-shadow-brand);
}

.dik-testimonials__byline {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.dik-testimonials__byline strong {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-testimonials__meta {
	color: var(--wp--preset--color--muted, #a6a6a6);
}

/* =========================================================================
   Home: besøg os + click-to-load map (Task 4.4)
   ========================================================================= */

/* Centered section header (eyebrow → title → intro). */
.dik-visit__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--wp--preset--spacing--60, 2.5rem);
}

.dik-visit__head .dik-visit__title {
	margin-bottom: 0.75rem;
}

.dik-visit__intro {
	margin: 0;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: var(--dik-fs-body, 1.0625rem);
	line-height: 1.6;
}

/* Two-column grid: left = store card + map; right = hours + contact + parking. */
.dik-visit__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	align-items: stretch;
}

/* Balanced 2×2 info grid + a full-width map banner below (fixes the lopsided
   "weird split" where the map collapsed into a thin strip beside a tall hours
   card). align-items:stretch keeps each row's two cards equal-height. */
.dik-visit__card--store   { grid-column: 1; grid-row: 1; }
.dik-visit__card--hours   { grid-column: 2; grid-row: 1; }
.dik-visit__card--parking { grid-column: 1; grid-row: 2; }
.dik-visit__card--contact { grid-column: 2; grid-row: 2; }
.dik-visit__map           { grid-column: 1 / span 2; grid-row: 3; }

@media (max-width: 860px) {
	.dik-visit__grid {
		grid-template-columns: 1fr;
	}
	.dik-visit__card--store,
	.dik-visit__card--hours,
	.dik-visit__map,
	.dik-visit__card--contact,
	.dik-visit__card--parking {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Shared card shell. */
.dik-visit__card {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--60, 2rem);
	background: var(--wp--preset--color--base, #0a0a0c);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius);
	box-shadow: var(--dik-shadow-sm);
}

.dik-visit__card-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-size: var(--dik-fs-h3, 1.125rem);
	font-weight: 600;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-visit__card-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(239, 67, 67, 0.11);
	border: 1px solid rgba(239, 67, 67, 0.22);
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-visit__card-text {
	margin: 0;
	color: var(--wp--preset--color--muted, #a3a3ad);
	line-height: 1.6;
}

/* Store card: red→gold gradient hero treatment. */
.dik-visit__card--store {
	background: var(--dik-grad-brand);
	border: 0;
	box-shadow: var(--dik-shadow-brand);
	color: #fff;
}

.dik-visit__store-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.dik-visit__store-name {
	margin: 0 0 0.4rem;
	font-size: 1.4rem;
	font-weight: 700;
	color: #fff;
}

.dik-visit__address {
	font-style: normal;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}

.dik-visit__map-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 1.5rem;
}

.dik-visit__map-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.2rem;
	border-radius: var(--dik-radius-sm, 8px);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: transform 0.2s var(--dik-ease), filter 0.2s var(--dik-ease), background-color 0.2s var(--dik-ease);
}

.dik-visit__map-btn--primary {
	background: #fff;
	color: var(--wp--preset--color--brand, #ef422e);
}

.dik-visit__map-btn--secondary {
	background: rgba(10, 10, 12, 0.55);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.28);
}

.dik-visit__map-btn:hover,
.dik-visit__map-btn:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.05);
}

.dik-visit__map-btn--secondary:hover,
.dik-visit__map-btn--secondary:focus-visible {
	background: rgba(10, 10, 12, 0.8);
}

/* Hours list with the New Year's Eve row accented. */
.dik-visit__hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dik-visit__hours-list li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #2e2e36);
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-visit__hours-list li:last-child {
	border-bottom: 0;
}

.dik-visit__hours-list li span:last-child {
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-variant-numeric: tabular-nums;
}

.dik-visit__hours-list-hl {
	font-weight: 700;
}

.dik-visit__hours-list-hl,
.dik-visit__hours-list-hl span:last-child {
	color: var(--wp--preset--color--brand, #ef422e) !important;
}

/* Contact list. */
.dik-visit__contact-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.dik-visit__contact-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.35rem 0;
}

.dik-visit__contact-label {
	min-width: 64px;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 0.85rem;
}

.dik-visit__contact-list a {
	color: var(--wp--preset--color--brand, #ef422e);
	font-weight: 600;
	text-decoration: none;
	word-break: break-word;
}

.dik-visit__contact-list a:hover,
.dik-visit__contact-list a:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-visit__contact-note {
	margin: auto 0 0;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 0.9rem;
	line-height: 1.55;
}

/* Click-to-load map facade. */
.dik-visit__map {
	position: relative;
	border-radius: var(--dik-radius);
	overflow: hidden;
	min-height: 300px;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	background: var(--wp--preset--color--surface, #16161a);
}

.dik-visit__map-facade {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	height: 100%;
	min-height: 240px;
	border: 0;
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(239, 66, 46, 0.12), transparent 60%),
		var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--contrast, #fff);
	cursor: pointer;
	transition: background-color 0.2s var(--dik-ease);
}

.dik-visit__map-facade:hover {
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(239, 66, 46, 0.2), transparent 60%),
		var(--wp--preset--color--surface, #16161a);
}

.dik-visit__map-pin {
	color: var(--wp--preset--color--brand, #ef422e);
}

.dik-visit__map-cta {
	font-weight: 700;
}

.dik-visit__map-addr {
	color: var(--wp--preset--color--muted, #a6a6a6);
	font-size: 0.9rem;
}

.dik-visit__map-embed iframe {
	display: block;
	width: 100%;
	min-height: 320px;
	border: 0;
}

/* =========================================================================
   Home: nyhedsbrev (Task 4.4)
   ========================================================================= */

.dik-newsletter__inner {
	text-align: center;
	max-width: 860px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70, 4rem) clamp(1.5rem, 5vw, 3.5rem);
	background: linear-gradient(135deg, rgba(239, 66, 46, 0.1), rgba(245, 166, 35, 0.07));
	border: 1px solid rgba(245, 166, 35, 0.22);
	border-radius: var(--dik-radius-lg);
	box-shadow: var(--dik-shadow);
}

.dik-newsletter__lead {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	margin: 0 auto var(--wp--preset--spacing--50, 1.5rem);
	max-width: 48ch;
	font-size: 1.05rem;
}

.dik-newsletter__form {
	display: flex;
	gap: 0.6rem;
	max-width: 480px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}

.dik-newsletter__field {
	flex: 1 1 240px;
}

.dik-newsletter__email {
	width: 100%;
	padding: 0.9rem 1rem;
	border-radius: var(--dik-radius-sm);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	background: rgba(0, 0, 0, 0.35);
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-newsletter__email::placeholder {
	color: var(--wp--preset--color--muted, #a3a3ad);
}

.dik-newsletter__submit {
	padding: 0.9rem 1.75rem;
	border-radius: var(--dik-radius-sm);
	border: 0;
	background: var(--dik-grad-brand);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--dik-shadow-brand);
	transition: transform 0.2s var(--dik-ease), filter 0.2s var(--dik-ease);
}

.dik-newsletter__submit:hover,
.dik-newsletter__submit:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.06);
}

.dik-newsletter__fineprint {
	margin: 1rem auto 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* Honeypot spam trap: moved off-screen (not display:none) so bots still fill it. */
.dik-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Inline feedback line for the background Klaviyo submit. */
.dik-newsletter__status {
	flex-basis: 100%;
	margin: 0.75rem 0 0;
	font-weight: 700;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-newsletter__status.is-error {
	color: var(--wp--preset--color--brand-bright, #ff5a45);
}

/* Three benefit chips under the form (live parity). */
.dik-newsletter__benefits {
	list-style: none;
	margin: var(--wp--preset--spacing--60, 2rem) 0 0;
	padding: var(--wp--preset--spacing--50, 1.5rem) 0 0;
	border-top: 1px solid rgba(245, 166, 35, 0.18);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40, 1rem);
	text-align: center;
}

@media (max-width: 600px) {
	.dik-newsletter__benefits {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50, 1.5rem);
		max-width: 320px;
		margin-inline: auto;
	}
}

.dik-newsletter__benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

.dik-newsletter__benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 0.35rem;
	border-radius: 50%;
	background: rgba(239, 67, 67, 0.11);
	border: 1px solid rgba(245, 166, 35, 0.28);
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-newsletter__benefit strong {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	font-size: 0.95rem;
}

.dik-newsletter__benefit span {
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 0.82rem;
	line-height: 1.5;
	max-width: 22ch;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   WooCommerce archive grid (native loop) — give li.product the same premium
   card treatment as .dik-product-card. The loop keeps Woo's classic markup
   (so classic hooks + dik-preorder badge fire); we restyle it here. Scoped to
   .dik-archive so other Woo loops are unaffected.
   ========================================================================= */

.dik-archive .woocommerce-result-count {
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.dik-archive .woocommerce-ordering select,
.dik-archive select.orderby {
	background: var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--contrast, #fff);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm);
	padding: 0.5rem 0.75rem;
}

/* Explicit fixed column count (defect #10): the old auto-fill/minmax computed
   4 tracks while only 3 cards showed, pushing row 1 right (~306px gutter) and
   wrapping the 4th card. Fixed columns give clean, flush-left, equal rows of N:
   3-up desktop / 2-up tablet / 1-up mobile. align-items:stretch keeps every
   card in a row equal-height; the CTA pinned via margin-top:auto aligns CTAs on
   one baseline. The Woo first/last li classes are irrelevant to CSS grid. */
.dik-archive ul.products {
	list-style: none;
	margin: var(--wp--preset--spacing--50, 1.5rem) 0 0;
	padding: 0;
	display: grid;
	/* Denser, world-class catalog grid (owner: cards were too large at 3-up, and
	   5-up was too cramped). 4-up is the desktop cap on every wide viewport. */
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40, 1rem);
	align-items: stretch;
}

/* CRITICAL (defect #10): WooCommerce's core stylesheet adds a float clearfix
   `ul.products::before/::after { content:" "; display:table }`. On a CSS-grid
   container those pseudo-elements become GRID ITEMS — ::before grabbed grid
   cell 1 (shoving the first product into column 2 and leaving the top-left cell
   empty) and ::after stole a cell at the end (orphaning the last product on its
   own row). That produced the "offset / not clean rows of 3" defect. Removing
   them from the grid restores flush-left, equal full rows of N. */
.dik-archive ul.products::before,
.dik-archive ul.products::after {
	content: none;
	display: none;
}

/* Tablet: 3-up. */
@media (max-width: 1023px) {
	.dik-archive ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile: 2-up — denser than 1-up and standard for modern commerce; the card
   scales down cleanly with no horizontal overflow. */
@media (max-width: 767px) {
	.dik-archive ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Neutralise Woo's float/percentage-width grid so our CSS grid governs. */
.dik-archive ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	/* Equal-height cards via the grid's `align-items: stretch` — NOT height:100%.
	   A percentage height on a grid item whose child <img> uses aspect-ratio made
	   Chromium under-size the auto row, so the card content overflowed downward,
	   clipping the CTA and overlapping the next row (owner: "cards overlapping /
	   cut off"). Letting the row size to content + stretch fixes both. */
	display: flex;
	flex-direction: column;
	padding: 0.75rem 0.75rem 0.9rem;
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius);
	box-shadow: var(--dik-shadow-sm);
	transition: transform 0.25s var(--dik-ease), box-shadow 0.25s var(--dik-ease), border-color 0.25s var(--dik-ease);
}

.dik-archive ul.products li.product:hover,
.dik-archive ul.products li.product:focus-within {
	transform: translateY(-4px);
	border-color: rgba(245, 166, 35, 0.4);
	box-shadow: var(--dik-shadow-lg);
}

/* Thumbnail wrapper holds the sale badge; clip + round it. */
.dik-archive ul.products li.product > a:first-of-type,
.dik-archive ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
}

.dik-archive ul.products li.product img {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--dik-radius-sm);
	margin: 0;
	background: var(--wp--preset--color--base, #0a0a0c);
	transition: transform 0.4s var(--dik-ease);
}

.dik-archive ul.products li.product:hover img {
	transform: scale(1.04);
}

/* Position context for the absolutely-positioned sale badge. */
.dik-archive ul.products li.product {
	position: relative;
}

.dik-archive ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-archive ul.products li.product .price {
	display: block;
	margin: 0.1rem 0 0;
	font-weight: 800;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-archive ul.products li.product .price del {
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-weight: 600;
	font-size: 0.9rem;
	opacity: 0.8;
	margin-right: 0.4rem;
}

.dik-archive ul.products li.product .price ins {
	text-decoration: none;
	color: var(--wp--preset--color--accent, #f5a623);
}

/* Push the CTA to the card bottom for an even grid baseline (the base
   .dik-card-cta already carries margin-top:auto; kept explicit here so the
   native-loop card is unambiguous regardless of cascade order). */
.dik-archive ul.products li.product .dik-card-cta {
	margin-top: auto;
}

/* PDP main-product −X% sale badge (defect #12): same pill as the loops,
   anchored top-left over the product gallery. The badge is printed as a
   direct child of div.product, so make div.product the positioning context
   and lift the badge above the gallery. */
.woocommerce div.product,
.dik-single-product div.product {
	position: relative;
}

.dik-pdp-sale-badge {
	top: 1rem;
	left: 1rem;
	font-size: 0.85rem;
	padding: 0.4rem 0.8rem;
}

/* =========================================================================
   PDP (single product) polish — defect #11. The classic legacy-template
   renders WooCommerce's default float layout; we restyle it to the dark
   premium system: a clean two-column grid (gallery left / summary right),
   on-system typography, a gradient add-to-cart, styled tabs, spec table and
   YouTube facade. Scoped to .dik-single-product so it never leaks to other
   WooCommerce surfaces (cart/checkout/account use their own blocks).
   Product JSON-LD stays single-sourced from the mu-plugin (theme emits none).
   ========================================================================= */

/* Two-column grid: gallery (left) + summary (right). Replaces Woo's float so
   the columns are equal-top, gap-controlled and collapse cleanly on mobile.
   Tabs / video / specs / related each span the full width below (grid-column:
   1 / -1) and read in document order. */
.dik-single-product div.product {
	display: grid;
	/* Owner 15/7: the photo dominated the fold — give the buy box the wider
	   column so image and information feel balanced. */
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	column-gap: clamp(1.5rem, 4vw, 3.5rem);
	row-gap: var(--wp--preset--spacing--60, 2.5rem);
	align-items: start;
}

/* Cap the main slider image so tall photos can't tower over the buy box;
   contain letterboxes on the dark card surface instead of cropping. */
.dik-single-product .wcgs-carousel img {
	max-height: 440px;
	object-fit: contain;
}

/* Kill Woo's / the gallery plugin's float + max-width:50% inline styles inside
   our grid (they fight the grid track, leaving the gallery at half its column
   and the summary narrow). !important is required to beat the JS-set inline
   style="max-width:50%;float:left" the gallery plugin writes. */
.dik-single-product div.product > .wcgs-woocommerce-product-gallery,
.dik-single-product div.product > .woocommerce-product-gallery,
.dik-single-product div.product > .images,
.dik-single-product div.product > .summary {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* Gallery column: framed, rounded, dark surface so it reads as a card. The dark
   surface background is essential — the gallery-slider plugin paints a white
   pre-init preloader panel; without a dark frame the whole gallery flashes white
   on the black PDP (defect #11). */
.dik-single-product div.product > .wcgs-woocommerce-product-gallery,
.dik-single-product div.product > .woocommerce-product-gallery,
.dik-single-product div.product > .images {
	grid-column: 1;
	position: relative;
	border-radius: var(--dik-radius, 14px);
	overflow: hidden;
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
}

.dik-single-product .woocommerce-product-gallery img,
.dik-single-product .wcgs-woocommerce-product-gallery img {
	border-radius: var(--dik-radius-sm, 8px);
}

/* DEFECT #11: kill the gallery-slider plugin's WHITE pre-init preloader panel
   (`.wcgs-gallery-preloader{ background-color:#fff }`) that clashed with the dark
   theme and flashed a white block (with a centred spinner) for ~2s before the
   swiper hydrated. Repaint it with the dark surface so the gallery never flashes
   white — it just shows the brand spinner on a dark card until the slider runs.
   Scoped to .dik-single-product so other surfaces are untouched. */
.dik-single-product .wcgs-gallery-preloader {
	background-color: var(--wp--preset--color--surface, #16161a) !important;
}

/* The plugin also paints white on its slider/thumb wrappers and slide cells in
   the pre-init state; force those transparent/dark so no white seam shows around
   the product image on the dark PDP. */
.dik-single-product .wcgs-woocommerce-product-gallery,
.dik-single-product .wcgs-woocommerce-product-gallery .spswiper,
.dik-single-product .wcgs-woocommerce-product-gallery .spswiper-wrapper,
.dik-single-product .wcgs-woocommerce-product-gallery .spswiper-slide,
.dik-single-product .wcgs-woocommerce-product-gallery .gallery-navigation-carousel-wrapper,
.dik-single-product .wcgs-woocommerce-product-gallery .wcgs-image-wrapper,
.dik-single-product .wcgs-woocommerce-product-gallery .wcgs-thumb {
	background-color: transparent !important;
}

/* Summary column (title, price, short desc, add-to-cart, meta). */
.dik-single-product div.product > .summary {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

/* Description, video, specs, comparison and related each take the whole width
   below the columns. */
.dik-single-product div.product > .woocommerce-tabs,
.dik-single-product div.product > .dik-pdp-description,
.dik-single-product div.product > .dik-product-video,
.dik-single-product div.product > .dik-specs,
.dik-single-product div.product > .dik-compare,
.dik-single-product div.product > .dik-related-scroller,
.dik-single-product div.product > .dik-pdp-wcreviews,
.dik-single-product div.product > .dik-recent,
.dik-single-product div.product > .dik-popular {
	grid-column: 1 / -1;
}

/* Product title. */
.dik-single-product .product_title {
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

/* Price: bold gold; sale del/ins handled so the struck price is muted and the
   live price reads in the brand gold. */
.dik-single-product .summary .price,
.dik-single-product .summary .price .woocommerce-Price-amount {
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--wp--preset--color--accent, #f5a623);
	margin: 0;
}

.dik-single-product .summary .price del,
.dik-single-product .summary .price del .woocommerce-Price-amount {
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-weight: 600;
	opacity: 0.85;
}

.dik-single-product .summary .price ins,
.dik-single-product .summary .price ins .woocommerce-Price-amount {
	text-decoration: none;
	color: var(--wp--preset--color--accent, #f5a623);
}

/* Short description. */
.dik-single-product .woocommerce-product-details__short-description {
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.dik-single-product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* Stock status line. */
.dik-single-product .summary .stock {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
}

.dik-single-product .summary .stock.in-stock {
	color: #5cc98b;
}

.dik-single-product .summary .stock.out-of-stock {
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* Add-to-cart form: quantity stepper + a gradient primary button. The qib
   plus/minus plugin wraps the input; style its parts into a single pill row. */
.dik-single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0.25rem 0 0;
}

.dik-single-product form.cart .qib-button-wrapper,
.dik-single-product form.cart .quantity {
	display: inline-flex;
	align-items: stretch;
}

.dik-single-product form.cart .qib-button-wrapper {
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	background: var(--wp--preset--color--surface, #16161a);
	overflow: hidden;
	/* Fixed height so the −, number and + share one centred row (owner: the
	   "1" sat low and right of centre). align-items:stretch above makes all
	   three cells fill this height. */
	min-height: 3rem;
}

/* The qib plus/minus plugin paints its buttons solid brand-red and the input
   white via higher-specificity rules; override them so the whole stepper reads
   as one dark pill on the dark summary. */
.dik-single-product form.cart .qib-button-wrapper .qib-button,
.dik-single-product form.cart button.qib-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: none !important;
}

.dik-single-product form.cart .qib-button-wrapper .qib-button:hover,
.dik-single-product form.cart button.qib-button:hover {
	color: var(--wp--preset--color--accent, #f5a623) !important;
	background: rgba(245, 166, 35, 0.1) !important;
}

.dik-single-product form.cart .quantity {
	align-self: stretch;
}

.dik-single-product form.cart .quantity input.qty,
.dik-single-product form.cart input.qty {
	width: 2.75rem;
	height: 100%;
	align-self: stretch;
	/* Kill WooCommerce's inherited asymmetric input padding (14.4px/17.6px) that
	   pushed the number low + right; padding:0 + flex stretch centres it. */
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	text-align: center;
	font-weight: 700;
	font-size: 1rem;
	line-height: 3rem;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}

.dik-single-product form.cart input.qty::-webkit-outer-spin-button,
.dik-single-product form.cart input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dik-single-product form.cart .single_add_to_cart_button,
.dik-single-product form.cart button[type="submit"] {
	flex: 1 1 auto;
	min-width: 12rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.85rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--dik-radius-sm, 8px);
	background: var(--dik-grad-brand);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: var(--dik-shadow-brand);
	transition: transform 0.2s var(--dik-ease), filter 0.2s var(--dik-ease);
}

.dik-single-product form.cart .single_add_to_cart_button:hover,
.dik-single-product form.cart .single_add_to_cart_button:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.06);
	color: #fff;
}

/* Product meta (SKU / categories / tags). */
.dik-single-product .product_meta {
	margin: 0.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border, #2e2e36);
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

.dik-single-product .product_meta a {
	color: var(--wp--preset--color--brand, #ef422e);
	text-decoration: none;
}

.dik-single-product .product_meta a:hover {
	color: var(--wp--preset--color--accent, #f5a623);
}

/* dik-preorder badge + notice inside the add-to-cart area (when preorder mode). */
.dik-single-product .dik-preorder-badge {
	display: inline-block;
	align-self: flex-start;
	background: var(--dik-grad-brand);
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem;
	padding: 0.35rem 0.75rem;
	border-radius: var(--dik-radius-pill, 999px);
}

.dik-single-product .dik-preorder-notice {
	margin: 0;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 0.9375rem;
}

/* --- Product data tabs (Beskrivelse / Yderligere information) --------------- */
.dik-single-product .woocommerce-tabs {
	margin-top: var(--wp--preset--spacing--40, 1rem);
}

/* WooCommerce core ships `.woocommerce div.product .woocommerce-tabs ul.tabs li`
   (4 classes) which OUT-SPECIFIES the theme scope (3 classes) and painted the
   tab strip white-bg/grey-text (owner: "tabs look off in the colors"). The
   visual props below carry !important so the dark theme wins regardless of
   Woo's specificity — same pattern as the qib stepper overrides above. */
.dik-single-product .woocommerce-tabs ul.wc-tabs,
.dik-single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.5rem !important;
	padding: 0 0 0.25rem !important;
	border-bottom: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	list-style: none;
}

/* Kill Woo's curved tab borders + the full-width bottom rule. */
.dik-single-product .woocommerce-tabs ul.wc-tabs::before,
.dik-single-product .woocommerce-tabs ul.tabs::before,
.dik-single-product .woocommerce-tabs ul.wc-tabs li::before,
.dik-single-product .woocommerce-tabs ul.wc-tabs li::after,
.dik-single-product .woocommerce-tabs ul.tabs li::before,
.dik-single-product .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

.dik-single-product .woocommerce-tabs ul.wc-tabs li,
.dik-single-product .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
}

.dik-single-product .woocommerce-tabs ul.wc-tabs li a,
.dik-single-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.55rem 1rem !important;
	border-radius: var(--dik-radius-sm, 8px);
	color: var(--wp--preset--color--muted, #a3a3ad) !important;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s var(--dik-ease), background-color 0.2s var(--dik-ease);
}

.dik-single-product .woocommerce-tabs ul.wc-tabs li a:hover,
.dik-single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
}

.dik-single-product .woocommerce-tabs ul.wc-tabs li.active a,
.dik-single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--contrast, #fff) !important;
	background: var(--wp--preset--color--surface, #16161a) !important;
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--brand, #ef422e);
}

.dik-single-product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	color: var(--wp--preset--color--muted, #a3a3ad);
	line-height: 1.7;
}

.dik-single-product .woocommerce-tabs .woocommerce-Tabs-panel table,
.dik-single-product .woocommerce-tabs .shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.dik-single-product .woocommerce-tabs .shop_attributes th,
.dik-single-product .woocommerce-tabs .shop_attributes td {
	padding: 0.65rem 0.85rem;
	border-bottom: 1px solid var(--wp--preset--color--border, #2e2e36);
	text-align: left;
}

.dik-single-product .woocommerce-tabs .shop_attributes th {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	font-weight: 600;
	width: 38%;
}

/* --- Spec table (dik-specs, hooked prio 25) -------------------------------- */
.dik-specs {
	margin-top: 0;
}

.dik-specs__heading {
	/* Same scale + color as .dik-pdp-section-title so every PDP section
	   header reads as one system. */
	font-size: clamp(1.3rem, 2.5vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-specs__table {
	width: 100%;
	max-width: 720px;
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	overflow: hidden;
}

.dik-specs__row:nth-child(odd) {
	background: var(--wp--preset--color--surface, #16161a);
}

.dik-specs__name,
.dik-specs__value {
	padding: 0.7rem 1rem;
	text-align: left;
	vertical-align: top;
}

.dik-specs__name {
	width: 40%;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-weight: 600;
}

.dik-specs__value {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

/* --- Product video facade (dik-product-video, hooked prio 24) -------------- */
.dik-product-video {
	margin-top: var(--wp--preset--spacing--40, 1rem);
}

.dik-product-video__heading {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	margin: 0 0 1rem;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-product-video__frame {
	position: relative;
	width: 100%;
	max-width: 880px;
	aspect-ratio: 16 / 9;
	border-radius: var(--dik-radius, 14px);
	overflow: hidden;
	background: #000;
	box-shadow: var(--dik-shadow-lg);
}

.dik-product-video__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.dik-product-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dik-product-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s var(--dik-ease), filter 0.2s var(--dik-ease);
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.dik-product-video__facade:hover .dik-product-video__play,
.dik-product-video__facade:focus-visible .dik-product-video__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.dik-product-video__embed,
.dik-product-video__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Related / up-sell scroller (defects #13 + #14) ------------------------
   Reuses the .dik-popular scroller; here we only add the band spacing + a
   hairline divider so each slider reads as its own section on the PDP. The
   card module already supplies the −X% badge + bottom-aligned gradient CTA. */
.dik-related-scroller {
	margin-top: var(--wp--preset--spacing--60, 2.5rem);
	padding-top: var(--wp--preset--spacing--50, 1.5rem);
	border-top: 1px solid var(--wp--preset--color--border, #2e2e36);
}

/* On the PDP the scroller is one section among several — its title uses the
   shared PDP section scale, not the homepage hero scale. */
.dik-related-scroller .dik-popular__title {
	font-size: clamp(1.3rem, 2.5vw, 1.6rem);
	letter-spacing: -0.01em;
}

/* Mobile: stack gallery over summary, full-width add-to-cart button.
   minmax(0, …) is load-bearing: a bare 1fr track's automatic minimum is
   min-content, and the related-products scroller's card row (~1375px) would
   blow the track out and give the whole page horizontal scroll. */
@media (max-width: 860px) {
	.dik-single-product div.product {
		grid-template-columns: minmax(0, 1fr);
	}

	.dik-single-product div.product > .wcgs-woocommerce-product-gallery,
	.dik-single-product div.product > .woocommerce-product-gallery,
	.dik-single-product div.product > .images,
	.dik-single-product div.product > .summary {
		grid-column: 1;
	}

	.dik-single-product form.cart .single_add_to_cart_button,
	.dik-single-product form.cart button[type="submit"] {
		min-width: 0;
	}
}

/* Archive pagination polish. The nav is a sibling AFTER ul.products; pin it
   below the grid with its own clearance so the last product row can never sit
   on top of it (owner: "pagination overlapped by product cards"). */
.dik-archive .woocommerce-pagination {
	clear: both;
	width: 100%;
	margin-top: var(--wp--preset--spacing--60, 2.5rem);
}

.dik-archive .woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin: 0;
	border: 0;
}

.dik-archive .woocommerce-pagination a,
.dik-archive .woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.85rem;
	border-radius: var(--dik-radius-pill, 999px);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	background: var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s var(--dik-ease), border-color 0.2s var(--dik-ease), background 0.2s var(--dik-ease), transform 0.2s var(--dik-ease), box-shadow 0.2s var(--dik-ease);
}

.dik-archive .woocommerce-pagination a:hover,
.dik-archive .woocommerce-pagination a:focus-visible {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623);
	transform: translateY(-2px);
	box-shadow: var(--dik-shadow-sm);
}

/* Prev / next arrows read a touch larger. */
.dik-archive .woocommerce-pagination .prev,
.dik-archive .woocommerce-pagination .next {
	font-size: 1.15rem;
	font-weight: 800;
}

/* Ellipsis "dots" are inert — no chip. */
.dik-archive .woocommerce-pagination .dots {
	border-color: transparent;
	background: transparent;
}

.dik-archive .woocommerce-pagination ul li span.current,
.dik-archive .woocommerce-pagination span.current,
.dik-archive .woocommerce-pagination .current {
	background: var(--dik-grad-brand) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: var(--dik-shadow-brand);
	transform: translateY(-1px);
}

/* =========================================================================
   Header / footer / trust-bar polish (visual layer).
   ========================================================================= */

/* Top trust bar: slim premium strip above the header. Single centred line on
   desktop; condenses (smaller text, tighter gaps) on mobile without wrapping
   into a tall block. The off-season WooCommerce store-notice is separate. */
.wp-block-group[aria-label="Tryghed og anbefalinger"] {
	border-bottom: 1px solid var(--wp--preset--color--border, #2e2e36);
	column-gap: 0.6rem;
	row-gap: 0.2rem;
	align-items: center;
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
}

.wp-block-group[aria-label="Tryghed og anbefalinger"] p {
	margin: 0;
	font-size: inherit;
	line-height: 1.4;
}

/* "Trustpilot" wordmark + star read brighter than the supporting copy. */
.wp-block-group[aria-label="Tryghed og anbefalinger"] p strong {
	color: var(--wp--preset--color--contrast, #fff);
}

@media (max-width: 600px) {
	.wp-block-group[aria-label="Tryghed og anbefalinger"] {
		font-size: 0.75rem;
		column-gap: 0.45rem;
		padding-inline: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   Search PILL (defect #3). Replaces the old square split input + detached
   gradient button with ONE rounded pill: subtle dark fill, hairline border,
   an inset-LEFT magnifier glyph, Danish placeholder, and an integrated round
   gradient submit hugging the right. Focus glows brand-red. Scoped to header.
   ------------------------------------------------------------------------- */

.dik-header .wp-block-search__inside-wrapper {
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	height: 48px;
	padding: 4px 4px 4px 44px;
	border-radius: var(--dik-radius-pill);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.14);
	transition: border-color 0.2s var(--dik-ease, ease),
		box-shadow 0.2s var(--dik-ease, ease),
		background-color 0.2s var(--dik-ease, ease);
	/* Inset-left magnifier (muted), painted on the wrapper so it stays put. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ad' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 16px center;
}

.dik-header .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--brand, #ef422e);
	background-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 3px rgba(239, 66, 46, 0.28);
}

.dik-header .wp-block-search__input {
	flex: 1 1 auto;
	height: 100%;
	margin: 0;
	padding: 0 0.5rem 0 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	font-size: 0.95rem;
	line-height: 1;
	box-shadow: none;
}

.dik-header .wp-block-search__input:focus {
	outline: none;
}

.dik-header .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted, #a3a3ad);
	opacity: 1;
}

/* Integrated round submit hugging the right inside the pill. */
.dik-header .wp-block-search__button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--dik-radius-pill);
	background: var(--dik-grad-brand);
	color: #fff;
	cursor: pointer;
	transition: filter 0.2s var(--dik-ease, ease), transform 0.2s var(--dik-ease, ease);
}

.dik-header .wp-block-search__button:hover {
	filter: brightness(1.08);
	transform: scale(1.04);
}

.dik-header .wp-block-search__button.has-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* If the button renders as text ("Søg") rather than the icon, keep it compact
   and pill-shaped instead of the old detached square. */
.dik-header .wp-block-search__button:not(.has-icon) {
	width: auto;
	min-width: 0;
	padding-inline: 1.1rem;
	font-weight: 700;
	font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
   Account + cart triggers — compact icon affordances on the right.
   ------------------------------------------------------------------------- */

.dik-account-link {
	display: flex;
	align-items: center;
}

.dik-account-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s var(--dik-ease, ease);
}

/* Person glyph before the account label. */
.dik-account-link a::before {
	content: "";
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dik-account-link a:hover,
.dik-account-link a:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-header .dik-cart {
	display: flex;
	align-items: center;
}

/* =========================================================================
   FOOTER (step 9) — premium full-width band, 4 columns + separate legal row.
   Matches/exceeds live: surface-2 band, round logo + brand copy + social,
   product/service/about columns with red links, contact lines with icons,
   and a centred-justified legal/CVR row. Inner uses the wide (1375) constraint.
   ========================================================================= */

.dik-footer {
	border-top: 1px solid var(--wp--preset--color--border, #2e2e36);
}

/* 4-column main band: brand col gets extra width, the three link cols are even. */
.dik-footer__main {
	grid-template-columns: 1.4fr 1fr 1.15fr 1fr;
	gap: clamp(1.75rem, 3.5vw, 3.5rem);
	align-items: start;
	padding-bottom: var(--wp--preset--spacing--70, 4rem);
}

/* --- Column 1: brand --- */
.dik-footer__brand {
	gap: 1.25rem;
	max-width: 360px;
}

.dik-footer__logo {
	margin: 0;
}

.dik-footer__logo img {
	width: 73px;
	height: 73px;
	border-radius: var(--dik-radius-pill, 999px);
	background: rgba(255, 255, 255, 0.04);
	padding: 6px;
	display: block;
}

.dik-footer__brand-text {
	margin: 0;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.dik-footer__social {
	gap: 0.625rem;
	margin-top: 0.25rem;
}

.dik-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--dik-radius-pill, 999px);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.dik-footer__social-link:hover,
.dik-footer__social-link:focus-visible {
	background: var(--dik-grad-brand, linear-gradient(90deg, #c8301f, #ef422e 45%, #f5a623));
	border-color: transparent;
	color: #fff;
	transform: translateY(-2px);
}

/* --- Link columns --- */
/* Subtle, refined headings (owner: "footer more subtle"): small uppercase
   labels in muted grey read as premium rather than loud section titles. */
.dik-footer__heading {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 1rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
	overflow-wrap: break-word;
	hyphens: none;
}

.dik-footer__links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
}

.dik-footer__links li {
	margin: 0;
}

/* Muted links (was bright brand-red — too loud). Brighten to gold on hover. */
.dik-footer__links a {
	color: var(--wp--preset--color--muted, #a3a3ad);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color 0.18s ease;
}

.dik-footer__links a:hover,
.dik-footer__links a:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623);
}

/* --- Contact blocks (phone / email / address) --- */
.dik-footer__contact {
	gap: 0.7rem;
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--wp--preset--color--border, #2e2e36);
}

.dik-footer__contact-line {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	line-height: 1.4;
}

.dik-footer__contact-line a {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	text-decoration: none;
	transition: color 0.18s ease;
}

.dik-footer__contact-line a:hover,
.dik-footer__contact-line a:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-footer__contact-icon {
	flex: 0 0 auto;
	/* Muted rather than brand-red so the footer reads calm, not loud. */
	color: var(--wp--preset--color--muted, #a3a3ad);
}

.dik-footer__address {
	color: var(--wp--preset--color--muted, #a3a3ad);
}

.dik-footer__address span {
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* --- Legal / copyright band --- */
.dik-footer__legal {
	border-top: 1px solid var(--wp--preset--color--border, #2e2e36);
	gap: 0.75rem 1.5rem;
}

.dik-footer__copy {
	margin: 0;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 0.875rem;
}

.dik-footer__copy .dik-cvr-number {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	font-weight: 600;
}

.dik-footer__legal-links {
	gap: 0.5rem 1.5rem;
	align-items: center;
}

.dik-footer__legal-links p {
	margin: 0;
}

.dik-footer__legal-links a {
	color: var(--wp--preset--color--muted, #a3a3ad);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.18s ease;
}

.dik-footer__legal-links a:hover,
.dik-footer__legal-links a:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623);
}

/* --- Responsive: tablet 2-up, mobile 1-up (brand first, legal last) --- */
@media (max-width: 1024px) {
	.dik-footer__main {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}
	.dik-footer__brand {
		grid-column: 1 / -1;
		max-width: 540px;
	}
}

@media (max-width: 600px) {
	.dik-footer__main {
		grid-template-columns: 1fr;
	}
	.dik-footer__brand {
		grid-column: auto;
	}
	.dik-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

/* =========================================================================
   Cart & checkout (Chunk 7) — classic legacy-template path.
   Click-and-collect only: never surface shipping rows/fields. The classic
   templates don't render shipping when no shipping methods exist, but we
   defensively hide any stray shipping UI so the flow stays pickup-only.
   ========================================================================= */

.dik-cart .woocommerce-shipping-fields,
.dik-checkout .woocommerce-shipping-fields,
.dik-checkout #ship-to-different-address,
.dik-cart tr.shipping,
.dik-checkout tr.shipping,
.dik-cart .shipping-calculator-button,
.dik-cart .shipping-calculator-form {
	display: none !important;
}

/* Required pickup-day field (dik-preorder, woocommerce_after_order_notes). */
.dik-checkout .dik-pickup-day {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border, #d9d9d9);
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #f6f6f6);
}

.dik-checkout .dik-pickup-day label {
	font-weight: 600;
}

.dik-checkout .dik-pickup-day select {
	width: 100%;
	max-width: 22rem;
}

/* =========================================================================
   Remaining templates (Task 8.1): search, 404, post meta
   ========================================================================= */

.dik-search__form {
	margin-block: var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--50, 1.5rem);
}

.dik-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--40, 1rem);
	margin-block: var(--wp--preset--spacing--40, 1rem);
}

.dik-search__articles {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 1rem);
	margin-block: var(--wp--preset--spacing--50, 1.5rem);
}

.dik-search-result__title {
	margin: 0 0 0.25rem;
}

.dik-search__empty {
	color: var(--wp--preset--color--muted, #666);
}

.dik-404__lead {
	max-width: 40ch;
	color: var(--wp--preset--color--muted, #666);
}

.dik-404__search {
	margin-block: var(--wp--preset--spacing--50, 1.5rem);
}

.dik-post-meta {
	gap: var(--wp--preset--spacing--30, 0.75rem);
	color: var(--wp--preset--color--muted, #666);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin-block: 0 var(--wp--preset--spacing--40, 1rem);
}

.dik-post-terms {
	margin-block-start: var(--wp--preset--spacing--50, 1.5rem);
	color: var(--wp--preset--color--muted, #666);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* =========================================================================
   Micro-interaction polish (refinement pass): nav-link underline affordance,
   stronger focus-visible ring, and a full prefers-reduced-motion opt-out so
   every transition/transform above degrades to an instant state change for
   users who ask for less motion (a11y).
   ========================================================================= */

/* Animated underline on the top-level nav links (desktop), brand-coloured. */
@media (min-width: 782px) {
	.dik-mega-nav__link {
		position: relative;
	}

	/* Top-level links: WHITE at rest → GOLD on hover/focus/open (owner: "menu
	   text should be white not red"). The earlier red-at-rest treatment read as
	   loud; white-on-near-black with a gold active state is cleaner and premium. */
	.dik-mega-nav__list > .dik-mega-nav__item > .dik-mega-nav__link {
		color: var(--wp--preset--color--contrast, #fff);
	}

	/* "Tilbud" keeps its gold accent (same specificity, later source wins). */
	.dik-mega-nav__list > .dik-mega-nav__item > .dik-mega-nav__link--accent {
		color: var(--wp--preset--color--accent, #f5a623);
	}

	.dik-mega-nav__list > .dik-mega-nav__item > .dik-mega-nav__link:hover,
	.dik-mega-nav__list > .dik-mega-nav__item > .dik-mega-nav__link:focus-visible,
	.dik-mega-nav__item--has-panel.is-open > .dik-mega-nav__link {
		color: var(--wp--preset--color--accent, #f5a623);
	}

	.dik-mega-nav__link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2px;
		height: 2px;
		background: var(--dik-grad-brand);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.22s var(--dik-ease);
	}

	.dik-mega-nav__link:hover::after,
	.dik-mega-nav__link:focus-visible::after,
	.dik-mega-nav__item--has-panel.is-open > .dik-mega-nav__link::after {
		transform: scaleX(1);
	}
}

/* Unified, high-visibility focus ring using the gold accent token. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-element-button:focus-visible,
.dik-mega-nav__burger:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #f5a623);
	outline-offset: 2px;
	border-radius: 3px;
}

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

	/* Hover transforms become no-ops so nothing jumps under reduced motion. */
	.dik-product-card:hover,
	.dik-product-card:focus-within,
	.dik-archive ul.products li.product:hover,
	.dik-archive ul.products li.product:focus-within,
	.wp-block-button.is-style-fill > .wp-block-button__link:hover,
	.dik-hero__cta-secondary .wp-block-button__link:hover,
	.dik-card-cta:hover {
		transform: none;
	}

	.dik-product-card:hover .dik-product-card__media img,
	.dik-archive ul.products li.product:hover img {
		transform: none;
	}
}

/* =========================================================================
   AUDIT 2026-06-17 — CRO / trust / a11y polish (appended last so it wins over
   WooCommerce + side-cart plugin defaults). Brand tokens only.
   ========================================================================= */

/* --- Skip link (WCAG 2.4.1) — off-screen until focused. --- */
.dik-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--contrast, #fff);
	border: 1px solid var(--wp--preset--color--accent, #f5a623);
	border-radius: 0 0 8px 0;
	font-weight: 700;
}
.dik-skip-link:focus {
	left: 0;
}

/* --- Sticky header: keep nav + search + cart reachable on long pages. The
   header template-part WRAPPER is pinned (its containing block is .wp-site-blocks,
   the full page) — pinning .dik-header itself fails because its parent wrapper is
   only as tall as the header, leaving no stick range. .dik-header stays relative
   so the absolute mega-menu panel keeps anchoring to it. --- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
.dik-header {
	position: relative;
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* --- PDP click-and-collect pickup + trust block (above the add-to-cart). --- */
/* PDP trust/pickup USPs — clean 3-up grid of white line icons (no emoji, no
   per-icon chrome) so the buy-decision answers read at a glance. */

/* Homepage USP strip (under the hero) — the on-page replacement for the old top
   trust bar. Slim row of white line icons + short labels. */
.dik-usp-strip {
	background: var(--wp--preset--color--surface, #16161a);
	border-block: 1px solid var(--wp--preset--color--border, #2e2e36);
}
.dik-usp-strip__list {
	list-style: none;
	margin: 0 auto;
	padding: 0.85rem var(--wp--preset--spacing--40, 1rem);
	max-width: 1375px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
}
.dik-usp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-width: 0;
}
.dik-usp + .dik-usp {
	border-left: 1px solid var(--wp--preset--color--border, #2e2e36);
}
.dik-usp__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--wp--preset--color--contrast, #fff);
}
.dik-usp__icon svg {
	width: 24px;
	height: 24px;
}
.dik-usp__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}
.dik-usp__text strong {
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast, #fff);
}
.dik-usp__sub {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}
@media (max-width: 781px) {
	.dik-usp-strip__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.6rem 0.5rem;
	}
	.dik-usp {
		justify-content: flex-start;
	}
	.dik-usp:nth-child(odd) {
		border-left: 0;
	}
	.dik-usp__text strong {
		font-size: 0.82rem;
	}
}

.dik-pdp-usps {
	list-style: none;
	margin: 1rem 0 1.2rem;
	padding: 0.9rem 0.5rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
}
.dik-pdp-usp {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3rem;
	padding: 0 0.4rem;
}
.dik-pdp-usp + .dik-pdp-usp {
	border-left: 1px solid var(--wp--preset--color--border, #2e2e36);
}
.dik-pdp-usp__icon {
	display: inline-flex;
	color: var(--wp--preset--color--contrast, #fff);
}
.dik-pdp-usp__icon svg {
	width: 26px;
	height: 26px;
}
.dik-pdp-usp__title {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #fff);
	line-height: 1.2;
}
.dik-pdp-usp__sub {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
	line-height: 1.25;
}
@media (max-width: 420px) {
	.dik-pdp-usp {
		padding: 0 0.15rem;
	}
	.dik-pdp-usp__sub {
		font-size: 0.7rem;
	}
}

/* PDP short-description fold-out — show a few lines with a soft fade, expand in
   place with one "Læs mere" click (KISS, progressive disclosure). */
.dik-readmore.is-collapsed {
	max-height: var(--dik-readmore-h, 140px);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
	mask-image: linear-gradient(180deg, #000 62%, transparent);
}
.dik-readmore__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.6rem 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--accent, #f5a623);
	font: inherit;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
}
.dik-readmore__toggle::after {
	content: "↓";
	font-size: 0.85em;
}
.dik-readmore__toggle[aria-expanded="true"]::after {
	content: "↑";
}
.dik-readmore__toggle:hover,
.dik-readmore__toggle:focus-visible {
	text-decoration: underline;
}

/* --- Checkout + cart: dark-theme the form controls (were raw white boxes). --- */
.dik-checkout .input-text,
.dik-checkout input[type="text"],
.dik-checkout input[type="email"],
.dik-checkout input[type="tel"],
.dik-checkout input[type="password"],
.dik-checkout input[type="number"],
.dik-checkout textarea,
.dik-checkout select,
.dik-cart .input-text,
.dik-cart input[type="text"],
.dik-cart input[type="email"],
.dik-cart input[type="tel"],
.dik-cart select {
	background: var(--wp--preset--color--surface, #16161a) !important;
	color: var(--wp--preset--color--contrast, #fff) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	border-radius: var(--dik-radius-sm, 8px) !important;
	padding: 0.75rem 0.9rem !important;
	font-size: 16px !important; /* ≥16px stops iOS zoom-on-focus */
	min-height: 48px;
}
.dik-checkout .input-text:focus,
.dik-checkout textarea:focus,
.dik-checkout select:focus,
.dik-cart .input-text:focus {
	outline: 2px solid var(--wp--preset--color--accent, #f5a623) !important;
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent, #f5a623) !important;
}
.dik-checkout label,
.dik-cart label,
.dik-checkout .woocommerce-checkout h3,
.dik-checkout .woocommerce-billing-fields h3 {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}
.dik-checkout .required {
	color: var(--wp--preset--color--accent, #f5a623);
}
.dik-checkout .woocommerce-invalid .input-text,
.dik-checkout .woocommerce-invalid select {
	border-color: #ff5a45 !important;
}
.dik-checkout .woocommerce-error,
.dik-checkout .woocommerce-NoticeGroup,
.dik-cart .woocommerce-error {
	background: rgba(239, 66, 46, 0.12);
	border: 1px solid #ff5a45;
	color: var(--wp--preset--color--contrast, #fff);
	border-radius: var(--dik-radius-sm, 8px);
}
.dik-checkout #order_review,
.dik-checkout #payment,
.dik-checkout .woocommerce-checkout-review-order-table {
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius, 12px);
}
.dik-checkout #payment ul.payment_methods {
	background: transparent;
	border: 0;
}
.dik-checkout-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	background: rgba(245, 166, 35, 0.08);
	border: 1px solid rgba(245, 166, 35, 0.25);
	border-radius: var(--dik-radius-sm, 8px);
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}
.dik-checkout-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* WooCommerce notice / info / coupon boxes on cart+checkout were raw white. */
.dik-checkout .woocommerce-info,
.dik-checkout .woocommerce-message,
.dik-checkout .woocommerce-form-login,
.dik-checkout .woocommerce-form-coupon,
.dik-checkout .checkout_coupon,
.dik-cart .woocommerce-info,
.dik-cart .woocommerce-message,
.dik-cart .cart-collaterals .cart_totals {
	background: var(--wp--preset--color--surface, #16161a) !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	border-top: 3px solid var(--wp--preset--color--accent, #f5a623);
	box-shadow: none !important;
}
.dik-checkout .woocommerce-info a,
.dik-checkout .woocommerce-message a,
.dik-cart .woocommerce-info a {
	color: var(--wp--preset--color--accent, #f5a623) !important;
}

/* --- Side-cart drawer (side-cart-woocommerce / .xoo-wsc-*) brand skin. --- */
.xoo-wsc-container {
	background: var(--wp--preset--color--base, #0a0a0c) !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
}
.xoo-wsc-header,
.xoo-wsc-cart-noti,
.xoo-wsc-footer {
	background: var(--wp--preset--color--surface, #16161a) !important;
	color: var(--wp--preset--color--contrast, #fff) !important;
}
.xoo-wsc-product {
	background: transparent !important;
	border-color: var(--wp--preset--color--border, #2e2e36) !important;
}
.xoo-wsc-pname a,
.xoo-wsc-totsprice,
.xoo-wsc-subtotal,
.xoo-wsc-smr-text,
.xoo-wsc-modal {
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
}
.xoo-wsc-ft-buttons-cont a,
.xoo-wsc-ft-btn-checkout {
	background: var(--dik-grad-brand) !important;
	color: #fff !important;
	border: 0 !important;
	font-weight: 700 !important;
}
.xoo-wsc-ft-btn-cart {
	background: transparent !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
}
.xoo-wsc-basket {
	background: var(--dik-grad-brand) !important;
	color: #fff !important;
}

/* --- Star ratings on cards + archive loop (gold; shown only when reviews exist). --- */
.dik-product-card__rating,
.dik-loop-rating {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
}
.dik-product-card__rating-count,
.dik-loop-rating__count {
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-product-card .star-rating,
.dik-loop-rating .star-rating {
	font-size: 0.8rem;
}
.dik-product-card .star-rating span::before,
.dik-loop-rating .star-rating span::before,
.woocommerce .star-rating span::before {
	color: var(--wp--preset--color--accent, #f5a623);
}

/* --- Legibility: subtle dark shadow on white CTA text where the gold end of the
   brand gradient would otherwise drop contrast (brand look preserved). --- */
.dik-card-cta,
.single_add_to_cart_button,
.dik-hero__cta-primary .wp-block-button__link {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* --- Footer: payment badges + age line. --- */
.dik-footer__pay {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}
.dik-footer__pay-label {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-footer__pay-badge {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
}
.dik-footer__age {
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-footer__pickup span {
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* --- PDP "Spar X" savings chip (under the price). --- */
.dik-pdp-save {
	display: inline-block;
	align-self: flex-start; /* the flex-column summary stretches children */
	width: fit-content;
	margin: 0.4rem 0 0;
	padding: 0.2rem 0.6rem;
	background: rgba(245, 166, 35, 0.14);
	color: var(--wp--preset--color--accent, #f5a623);
	border: 1px solid rgba(245, 166, 35, 0.4);
	border-radius: var(--dik-radius-pill, 999px);
	font-weight: 700;
	font-size: 0.85rem;
}

/* --- Sticky add-to-cart bar, all screen sizes (owner 15/7): thumb + name +
   price + compare toggle + CTA, revealed when the buy box scrolls away. On
   wide screens the content aligns with the site container. --- */
.dik-sticky-atc {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	padding: 0.6rem 0.9rem;
	padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
	padding-inline: max(0.9rem, calc((100vw - 1375px) / 2));
	background: rgba(13, 13, 15, 0.96);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--wp--preset--color--border, #2e2e36);
	transform: translateY(120%);
	transition: transform 0.25s var(--dik-ease, ease);
}
.dik-sticky-atc.is-visible {
	transform: translateY(0);
}
.dik-sticky-atc__thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--dik-radius-sm, 8px);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
}
@media (max-width: 479px) {
	.dik-sticky-atc__thumb {
		display: none; /* every pixel goes to name + buttons on small phones */
	}
}
.dik-sticky-atc__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}
.dik-sticky-atc__title {
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dik-sticky-atc__price {
	font-weight: 800;
	color: var(--wp--preset--color--contrast, #fff);
	line-height: 1.2;
}
.dik-sticky-atc__price del {
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-weight: 500;
	font-size: 0.8em;
}
.dik-sticky-atc__price ins {
	text-decoration: none;
}
.dik-sticky-atc__btn {
	flex: 0 0 auto;
	border: 0;
	border-radius: var(--dik-radius-sm, 8px);
	padding: 0.85rem 1.35rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: #fff;
	background: var(--dik-grad-brand, linear-gradient(90deg, #c8301f, #ef422e 45%, #f5a623));
	cursor: pointer;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.dik-sticky-atc__btn[disabled] {
	opacity: 0.55;
	background: var(--wp--preset--color--surface, #16161a);
	cursor: not-allowed;
}
/* Reserve space so the fixed bar never hides the footer's last line. */
.single-product .wp-site-blocks {
	padding-bottom: 4.5rem;
}

/* --- Compare toggle as an icon button in the buy-box row + the sticky bar:
   same height as its row-mates so [qty] [Tilføj til kurv] [⇄] reads as ONE
   control group. --- */
.dik-compare-toggle.dik-compare-toggle--inline {
	/* relative, NOT static: the [data-tip] tooltip pseudo is absolutely
	   positioned and must anchor to the button, not a distant ancestor
	   (static = page-widening phantom overflow on mobile). */
	position: relative;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	min-height: 3rem;
	height: auto;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	background: var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	cursor: pointer;
	transition: border-color 0.2s var(--dik-ease), color 0.2s var(--dik-ease), background-color 0.2s var(--dik-ease);
}
.dik-compare-toggle.dik-compare-toggle--inline:hover,
.dik-compare-toggle.dik-compare-toggle--inline:focus-visible {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623);
}
.dik-compare-toggle.dik-compare-toggle--inline.is-saved {
	background: var(--wp--preset--color--accent, #f5a623);
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: #0a0a0c;
}
.dik-compare-toggle.dik-sticky-atc__cmp {
	width: 2.9rem;
	min-height: 2.9rem;
	background: transparent;
}

/* Small phones: compress the buy row so [qty] [Tilføj til kurv] [⇄] stays
   ONE line instead of wrapping the toggle underneath. */
@media (max-width: 480px) {
	.dik-single-product form.cart {
		flex-wrap: nowrap;
	}
	.dik-single-product form.cart .single_add_to_cart_button {
		padding-left: 0.9rem;
		padding-right: 0.9rem;
		font-size: 0.95rem;
		min-width: 0;
	}
	.dik-compare-toggle.dik-compare-toggle--inline {
		width: 2.7rem;
	}
}

/* =========================================================================
   POLISH QA 2026-06-17 — coloring consistency + smoothness punch list.
   Appended last; overrides earlier theme rules (equal specificity, later
   source) and WooCommerce/plugin defaults (!important where needed).
   ========================================================================= */

/* Cart + checkout primary CTAs → brand gradient (were flat default red). */
.dik-cart .checkout-button,
.dik-cart .wc-proceed-to-checkout .button,
.dik-checkout #place_order,
.dik-checkout button[name="woocommerce_checkout_place_order"] {
	background: var(--dik-grad-brand) !important;
	border: 0 !important;
	color: #fff !important;
	font-weight: 700;
	border-radius: var(--dik-radius-sm, 8px) !important;
	box-shadow: var(--dik-shadow-brand);
	transition: transform 0.2s var(--dik-ease, ease), filter 0.2s var(--dik-ease, ease);
}
.dik-cart .checkout-button:hover,
.dik-checkout #place_order:hover,
.dik-checkout button[name="woocommerce_checkout_place_order"]:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
}

/* Default-WooCommerce light notice / coupon / payment boxes → dark on brand. */
.dik-checkout .woocommerce-info,
.dik-checkout .wc-block-components-notice-banner,
.dik-cart .woocommerce-info {
	background: var(--wp--preset--color--surface-2, #1f1f25) !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	border-left: 3px solid var(--wp--preset--color--accent, #f5a623) !important;
}
.dik-checkout .woocommerce-info::before,
.dik-checkout .woocommerce-info a,
.dik-cart .woocommerce-info a {
	color: var(--wp--preset--color--accent, #f5a623) !important;
}
.dik-checkout .wc_payment_method .payment_box {
	background: var(--wp--preset--color--surface-2, #1f1f25) !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	border-radius: var(--dik-radius-sm, 8px) !important;
}
.dik-checkout .wc_payment_method .payment_box::before {
	border-bottom-color: var(--wp--preset--color--surface-2, #1f1f25) !important;
}

/* Stray non-palette hues: PDP in-stock mint-green + checkout blue controls. */
.dik-single-product .summary .stock.in-stock,
.dik-single-product .stock.in-stock {
	color: var(--wp--preset--color--accent, #f5a623) !important;
}
.dik-checkout input[type="radio"],
.dik-checkout input[type="checkbox"] {
	accent-color: var(--wp--preset--color--brand, #ef422e);
	width: 18px;
	height: 18px;
}
.dik-checkout .woocommerce-terms-and-conditions-checkbox-text a,
.dik-checkout .wc-terms-and-conditions a {
	color: var(--wp--preset--color--accent, #f5a623) !important;
}

/* Unify the circular icon badges: brand-red(#ef422e) tint + gold border + gold
   glyph (were pinkish #ef4343 with three different recipes). */
.dik-why__icon,
.dik-visit__card-icon,
.dik-newsletter__benefit-icon {
	background: rgba(239, 66, 46, 0.11);
	border: 1px solid rgba(245, 166, 35, 0.28);
	color: var(--wp--preset--color--accent, #f5a623);
}
.dik-why__item:hover .dik-why__icon {
	border-color: rgba(245, 166, 35, 0.45);
}

/* Sale badge → top-RIGHT so it never stacks on the top-left OOS badge. */
.dik-loop-sale-badge,
.dik-product-card__badge--sale {
	left: auto;
	right: 0.6rem;
}

/* OOS treatment: warmer disabled CTA + a MILD, consistent thumbnail recede
   (off-season is all-OOS, so keep it subtle — no heavy grey/grayscale). */
.dik-card-cta--oos,
.dik-card-cta[disabled] {
	background: rgba(46, 46, 54, 0.6);
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	border: 1px solid rgba(245, 166, 35, 0.18);
}
.dik-product-card--oos .dik-product-card__media img,
.dik-archive ul.products li.product.outofstock .dik-product-card__media img,
.dik-archive ul.products li.product.outofstock img {
	opacity: 0.85;
	filter: none;
}

/* One eyebrow treatment sitewide (gold, 800, 0.14em) — hero matched sections. */
.dik-eyebrow {
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 800;
	letter-spacing: 0.14em;
}

/* Lift the near-invisible resting card border (same hue as the gold hover). */
.dik-product-card,
.dik-archive ul.products li.product {
	border-color: rgba(245, 166, 35, 0.1);
}
.dik-cart .cart_totals {
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	border-top: 3px solid var(--wp--preset--color--accent, #f5a623) !important;
	border-radius: var(--dik-radius, 12px) !important;
	overflow: hidden;
}
.dik-cart .shop_table,
.dik-cart .shop_table td,
.dik-cart .shop_table th,
.dik-cart .cart_totals td,
.dik-cart .cart_totals th {
	border-color: var(--wp--preset--color--border, #2e2e36) !important;
}

/* Cart link + update button consistency (gold link; ghost update button). */
.dik-cart .shop_table .product-name a {
	color: var(--wp--preset--color--accent, #f5a623) !important;
}
.dik-cart .shop_table .product-name a:hover {
	color: #fff !important;
}
.dik-cart .button[name="update_cart"] {
	background: transparent !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	border-radius: var(--dik-radius-sm, 8px) !important;
	font-weight: 600;
}
.dik-cart .button[name="update_cart"]:hover {
	border-color: var(--wp--preset--color--accent, #f5a623) !important;
	color: var(--wp--preset--color--accent, #f5a623) !important;
}

/* Select2 country field → dark, full-width, 48px (matched the other inputs). */
.dik-checkout .select2-container .select2-selection--single {
	background: var(--wp--preset--color--surface, #16161a) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	border-radius: var(--dik-radius-sm, 8px) !important;
	height: 48px !important;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 0.9rem;
}
.dik-checkout .select2-selection__rendered {
	color: #fff !important;
	line-height: 48px !important;
	padding: 0 !important;
}
.select2-dropdown {
	background: var(--wp--preset--color--surface-2, #1f1f25) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
}
.select2-results__option--highlighted {
	background: var(--wp--preset--color--brand, #ef422e) !important;
}

/* Stat figures painted with the brand gradient (match the hero highlight). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.dik-stats__figure {
		background: var(--dik-grad-heading);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* Hero secondary CTA: on-palette warm border + translucent surface (no gray). */
.dik-hero__cta-secondary .wp-block-button__link {
	border-color: rgba(245, 166, 35, 0.3) !important;
	background-color: rgba(22, 22, 26, 0.6) !important;
}

/* "Hvorfor" cards step UP off the surface band (were recessed base). */
.dik-why__item {
	background: var(--wp--preset--color--surface-2, #1f1f25);
}

/* Strikethrough "before" price: single readable muted (was double-dimmed);
   reserve the rating row so card spacing is identical with/without stars. */
.dik-product-card__price del,
.dik-archive ul.products li.product .price del {
	opacity: 1;
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-product-card__rating,
.dik-loop-rating {
	min-height: 1.1rem;
}

/* Card CTA radius relates to the rounder 14px card. */
.dik-card-cta {
	border-radius: 10px;
}

/* PDP body prose less washed; meta/labels keep muted. */
.dik-single-product .woocommerce-product-details__short-description,
.dik-single-product .woocommerce-Tabs-panel p {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

/* PDP CTA hover + mobile sticky button consistency. */
.dik-sticky-atc__btn {
	box-shadow: var(--dik-shadow-brand);
}
.dik-sticky-atc__btn:active {
	transform: translateY(1px);
	filter: brightness(1.06);
}
@media (max-width: 781px) {
	.dik-sticky-atc {
		background: rgba(10, 10, 12, 0.96);
	}
}

/* Hero badge icon chip → single-accent gold; newsletter ring crisper. */
.dik-hero__badge-icon {
	background: rgba(245, 166, 35, 0.16);
}
.dik-newsletter__inner {
	border-color: rgba(245, 166, 35, 0.35);
}

/* The "Husk gyldigt ID" GDPR reminder rendered as a raw #f9f9f9 white box. */
.dik-checkout .woocommerce-gdpr-content,
.woocommerce-gdpr-content {
	background: var(--wp--preset--color--surface-2, #1f1f25) !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	border-left: 3px solid var(--wp--preset--color--accent, #f5a623) !important;
	border-radius: var(--dik-radius-sm, 8px) !important;
	padding: 0.85rem 1rem !important;
}
.woocommerce-gdpr-content a {
	color: var(--wp--preset--color--accent, #f5a623) !important;
}

/* =========================================================================
   POLISH PASS 3 (owner punch list 2026-06-17): floating cart, FiboSearch skin,
   cart-table alignment, two-column checkout, search grid consistency.
   ========================================================================= */

/* --- Hide the side-cart's floating basket bubble ------------------------- */
/* The xoo side-cart drawer still auto-opens when a product is added (good
   feedback); but its fixed bottom-right floating basket overlapped the catalog
   and the mobile sticky add-to-cart bar, and duplicated the header cart icon
   (owner: "a plugin for the cart that's overlapping and sticky doesn't make
   sense"). Hide just the trigger bubble; the header mini-cart is the cart entry
   point and the drawer keeps working. */
/* Doubled class to out-specify the plugin's own `.xoo-wsc-basket{display:flex
   !important}` (equal specificity + later in the cascade would otherwise win). */
.xoo-wsc-basket.xoo-wsc-basket,
body .xoo-wsc-basket {
	display: none !important;
}

/* --- Account link: fully gone (guest-only click-and-collect) ------------- */
.dik-account-link,
.dik-header__actions .dik-account-link {
	display: none !important;
}

/* --- FiboSearch instant-autocomplete skin (dark brand) ------------------- */
/* NOTE: the core/shortcode block drops its className, so the FiboSearch wrapper
   (.dgwt-wcas-search-wrapp) is a direct child of .dik-header__row — scope to
   .dik-header and target FiboSearch's real classes (its "Pirx" theme ships a
   600px-wide light box; we constrain + darken it). */
/* Rebuild FiboSearch's "Pirx" field as ONE clean dark pill. Keep the wrapper
   chain as plain BLOCKS (flexing the nested chain collapsed the input to 0px);
   the input defines the height + fills the width, and the gradient magnifier is
   a circle absolutely pinned to the right. The stock Pirx markup stacked a 144px
   panel, dropped the input low, and floated the submit over the text — reset. */
/* Keep FiboSearch's own layout (forcing display on the wrapper chain collapsed
   the field) — only constrain height + strip the white panel chrome. */
.dik-header .dgwt-wcas-search-wrapp,
.dik-header .dgwt-wcas-search-wrapp .dgwt-wcas-search-form,
.dik-header .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp {
	width: 100%;
	min-width: 0;
	height: 2.75rem !important;
	min-height: 0 !important;
	max-height: 2.75rem !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.dik-header .dgwt-wcas-search-wrapp {
	max-width: 320px;
}

.dik-header .dgwt-wcas-search-input[type="search"],
.dik-header input.dgwt-wcas-search-input,
.dik-header .dgwt-wcas-sf-wrapp input.dgwt-wcas-search-input {
	box-sizing: border-box !important;
	/* NOTE: do NOT set width:100% — the input's wrapper is shrink-to-fit, so 100%
	   collapsed it to 0. FiboSearch's own width fills the field correctly. */
	height: 2.75rem !important;
	min-height: 2.75rem !important;
	/* Room on both ends so neither the magnifier circle (right) nor an inner
	   icon (left) sits on top of the text. */
	padding: 0 3.1rem 0 1.1rem !important;
	margin: 0 !important;
	background: var(--wp--preset--color--surface, #16161a) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	border-radius: var(--dik-radius-pill, 999px) !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	box-shadow: none !important;
	font-size: 0.95rem !important;
}

.dik-header .dgwt-wcas-search-input::placeholder {
	color: var(--wp--preset--color--muted, #a3a3ad) !important;
}

.dik-header .dgwt-wcas-search-input:focus {
	border-color: var(--wp--preset--color--accent, #f5a623) !important;
	outline: none;
}

/* Submit = a clean white magnifier (no gradient circle) centred at the right
   edge of the field — bg-less icon for contrast (owner). Muted→gold on hover. */
.dik-header .dgwt-wcas-search-submit,
.dik-header .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
	position: absolute !important;
	right: 0 !important;
	left: auto !important;
	top: 0 !important;
	bottom: 0 !important;
	transform: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.75rem !important;
	height: 2.75rem !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	cursor: pointer;
	transition: color 0.2s var(--dik-ease);
}

.dik-header .dgwt-wcas-search-submit:hover,
.dik-header .dgwt-wcas-search-submit:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623) !important;
	background: transparent !important;
}

.dik-header .dgwt-wcas-ico-magnifier {
	fill: currentColor !important;
	width: 17px !important;
	height: 17px !important;
	margin: 0 auto !important;
}

.dik-header .dgwt-wcas-preloader {
	right: 0 !important;
	left: auto !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	height: 2.05rem !important;
	width: 2.05rem !important;
	background: transparent !important;
}

/* Hide Pirx leftovers: voice/image search, arrow, and the EMPTY trailing
   paragraphs FiboSearch prints — but NOT the (unclassed) <p> that wraps the
   input itself, which `:empty` correctly spares. */
.dik-header .dgwt-wcas-voice-search,
.dik-header .dgwt-wcas-image-search,
.dik-header .dgwt-wcas-search-icon-arrow,
.dik-header .dgwt-wcas-sf-wrapp > p:empty {
	display: none !important;
}

/* The input's wrapping <p> carries default browser margin that pushed the field
   ~20px below the row centre — zero it so the pill sits centred in the header. */
.dik-header .dgwt-wcas-sf-wrapp p {
	margin: 0 !important;
	padding: 0 !important;
}

/* Suggestions dropdown (the "shows products as you type" panel). */
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-suggestions-wrapp.dgwt-wcas-suggestions-wrapp--top {
	background: var(--wp--preset--color--surface, #16161a) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	border-radius: var(--dik-radius, 14px) !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
}

.dgwt-wcas-suggestion {
	border-color: var(--wp--preset--color--border, #2e2e36) !important;
}

.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion-selected {
	background: rgba(245, 166, 35, 0.12) !important;
}

.dgwt-wcas-st-title,
.dgwt-wcas-suggestion .dgwt-wcas-st-title {
	color: var(--wp--preset--color--contrast, #fff) !important;
}

.dgwt-wcas-st--match,
.dgwt-wcas-st-title .dgwt-wcas-highlight {
	color: var(--wp--preset--color--accent, #f5a623) !important;
	font-weight: 700;
}

.dgwt-wcas-st-price,
.dgwt-wcas-suggestion .dgwt-wcas-st-price {
	color: var(--wp--preset--color--accent, #f5a623) !important;
	font-weight: 700;
}

.dgwt-wcas-suggestion-more,
.dgwt-wcas-suggestion-headline {
	background: var(--wp--preset--color--surface-2, #1f1f25) !important;
	color: var(--wp--preset--color--muted, #a3a3ad) !important;
}

/* --- Cart table alignment + quantity stepper (owner: cart "really off") -- */
.dik-cart table.cart.shop_table,
.dik-cart table.shop_table {
	border-collapse: separate;
	border-spacing: 0;
}

.dik-cart table.cart td,
.dik-cart table.cart th {
	vertical-align: middle;
}

.dik-cart table.cart td.product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--dik-radius-sm, 8px);
}

.dik-cart td.product-quantity {
	text-align: center;
}

/* Reuse the PDP stepper treatment so the cart quantity is one centred dark
   pill instead of the plugin's default red/white split. */
.dik-cart .qib-button-wrapper,
.dik-cart .quantity {
	display: inline-flex;
	align-items: stretch;
	justify-content: center;
}

.dik-cart .qib-button-wrapper {
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	background: var(--wp--preset--color--surface, #16161a);
	overflow: hidden;
	min-height: 2.75rem;
}

.dik-cart .qib-button-wrapper .qib-button,
.dik-cart button.qib-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: none !important;
}

.dik-cart .qib-button-wrapper .qib-button:hover,
.dik-cart button.qib-button:hover {
	color: var(--wp--preset--color--accent, #f5a623) !important;
	background: rgba(245, 166, 35, 0.1) !important;
}

.dik-cart .quantity input.qty,
.dik-cart input.qty {
	width: 2.6rem;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	text-align: center;
	font-weight: 700;
	line-height: 2.75rem;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

/* Cart totals box: align the heading/rows tidily. */
.dik-cart .cart_totals h2 {
	margin-top: 0;
}

/* Country is forced to DK and hidden at every width (single-market pickup). */
.dik-checkout .dik-hidden-field {
	display: none !important;
}

/* --- Two-column checkout (owner: "make checkout easier, less scrolling") - */
/* Put the customer form on the left and the order summary + payment on the
   right (sticky) instead of stacking them, then pair short fields side by side.
   This roughly halves the page height with ZERO payment-flow risk. */
@media (min-width: 900px) {
	.dik-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: 1.1fr 0.9fr;
		grid-template-areas:
			"details review-h"
			"details review";
		/* Row 1 = just the "Din ordre" heading height; row 2 takes the rest. Without
		   this, the tall #customer_details (which spans both rows) split the two auto
		   rows evenly and pushed the order summary ~halfway down the page. */
		grid-template-rows: min-content 1fr;
		column-gap: var(--wp--preset--spacing--60, 2.5rem);
		align-items: start;
	}

	.dik-checkout #customer_details {
		grid-area: details;
	}

	.dik-checkout #order_review_heading {
		grid-area: review-h;
		margin-top: 0;
	}

	.dik-checkout #order_review {
		grid-area: review;
		position: sticky;
		top: 1rem;
	}

	/* Stack billing over order notes in the left column. #customer_details has
	   NO .col2-set wrapper — it holds .col-1 (billing, float:left) and .col-2
	   (notes, float:right) directly, so the notes box was floating up beside the
	   billing heading. Unfloat + full-width to drop it below. */
	.dik-checkout #customer_details {
		display: block;
	}

	.dik-checkout #customer_details > .col-1,
	.dik-checkout #customer_details > .col-2 {
		width: 100% !important;
		float: none !important;
		max-width: none !important;
		padding: 0 !important;
	}

	.dik-checkout #customer_details > .col-2 {
		margin-top: var(--wp--preset--spacing--40, 1rem);
	}
}

/* Pair short billing fields two-up so the form is compact. Long fields
   (address, email, pickup day, consents) stay full width. */
@media (min-width: 600px) {
	.dik-checkout .woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
	}

	.dik-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
		grid-column: 1 / -1;
		float: none;
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}

	.dik-checkout .woocommerce-billing-fields__field-wrapper > #billing_first_name_field {
		grid-column: 1;
	}

	.dik-checkout .woocommerce-billing-fields__field-wrapper > #billing_last_name_field {
		grid-column: 2;
	}

	/* City precedes postcode in the DOM, so City=col1, Postnr=col2 — otherwise
	   City landed alone in col2 with an empty gap beside it (the "sloppy" look). */
	.dik-checkout .woocommerce-billing-fields__field-wrapper > #billing_city_field {
		grid-column: 1;
	}

	.dik-checkout .woocommerce-billing-fields__field-wrapper > #billing_postcode_field {
		grid-column: 2;
	}

	/* Even, consistent vertical rhythm so the column reads tidy, not sloppy. */
	.dik-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
		margin-bottom: 1.1rem;
	}
}

/* --- Search results grid: match the catalog (no lone full-width card) ---- */
.dik-product-grid {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1023px) {
	.dik-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.dik-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================================
   POLISH PASS 2026-06-24 — second audit punch list. Appended last so it wins
   on source order; WooCommerce/plugin defaults beaten with matched specificity
   + !important only where their own rules are higher-specificity.
   ========================================================================= */

/* --- Pagination: WooCommerce's default `.woocommerce nav.woocommerce-pagination
   ul li a` (specificity 0,2,4) was beating our `.dik-archive .woocommerce-
   pagination a` (0,2,1), leaving square, pale-bordered, stretched links while
   only `.current` (which had !important) was a pill. Match Woo's specificity
   and pill EVERY link consistently. ----------------------------------------- */
.dik-archive nav.woocommerce-pagination ul li a,
.dik-archive nav.woocommerce-pagination ul li span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem !important;
	height: 2.75rem !important;
	padding: 0 0.85rem !important;
	border-radius: var(--dik-radius-pill, 999px) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	background: var(--wp--preset--color--surface, #16161a) !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	font-weight: 700;
}
.dik-archive nav.woocommerce-pagination ul li a:hover,
.dik-archive nav.woocommerce-pagination ul li a:focus-visible {
	border-color: var(--wp--preset--color--accent, #f5a623) !important;
	color: var(--wp--preset--color--accent, #f5a623) !important;
}
.dik-archive nav.woocommerce-pagination ul li span.current {
	background: var(--dik-grad-brand) !important;
	border-color: transparent !important;
	color: #fff !important;
}
.dik-archive nav.woocommerce-pagination ul li .dots {
	border-color: transparent !important;
	background: transparent !important;
}

/* --- PDP sale badge: was forced top-RIGHT by the card rule (.dik-loop-sale-badge
   { left:auto; right:0.6rem }), which on the PDP floats it off in the top-right
   corner of the grid, detached from the price. Pin it top-LEFT over the gallery
   like a normal product sale flag. --------------------------------------------- */
.dik-pdp-sale-badge {
	top: 1rem;
	left: 1rem !important;
	right: auto !important;
}

/* --- Hero trust figures (folded out of the standalone stats band): compact,
   left-aligned row under the CTAs instead of a full-width centred section. ---- */
.dik-hero__stats {
	margin: 0.85rem 0 0 !important;
	max-width: 480px;
	gap: 0.5rem;
}
.dik-hero__stats .dik-stats__item {
	padding-block: 0.2rem;
}
.dik-hero__stats .dik-stats__figure {
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}
.dik-hero__stats .dik-stats__label {
	font-size: 0.78rem;
}

/* --- "Besøg os" store card: drop the heavy red→gold gradient panel (owner:
   "huge color contrast, looks off") for a subtle surface card that matches the
   other three; keep the address + the two map buttons (now primary gradient +
   outline so they read on the dark card). The kort embed block was removed. --- */
.dik-visit__card--store {
	background: var(--wp--preset--color--surface-2, #1f1f25) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	box-shadow: var(--dik-shadow-sm) !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
}
.dik-visit__store-pin {
	background: rgba(239, 66, 46, 0.11) !important;
	border: 1px solid rgba(245, 166, 35, 0.28);
	color: var(--wp--preset--color--accent, #f5a623) !important;
	width: 44px;
	height: 44px;
}
.dik-visit__store-name {
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
}
.dik-visit__address {
	color: var(--wp--preset--color--muted, #a3a3ad) !important;
}
.dik-visit__map-btn--primary {
	background: var(--dik-grad-brand) !important;
	color: #fff !important;
}
.dik-visit__map-btn--secondary {
	background: transparent !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
}
.dik-visit__map-btn--secondary:hover,
.dik-visit__map-btn--secondary:focus-visible {
	border-color: var(--wp--preset--color--accent, #f5a623) !important;
	background: rgba(245, 166, 35, 0.08) !important;
}

/* --- Cart "Anvend kupon" (apply-coupon) was flat dark red while every other
   primary CTA is the gradient — make secondary cart actions a consistent ghost
   button so only the true primary (Gå til kassen) carries the gradient. ------- */
.dik-cart .coupon .button,
.dik-cart button[name="apply_coupon"],
.dik-cart button[name="update_cart"] {
	background: transparent !important;
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
	border-radius: var(--dik-radius-sm, 8px) !important;
	font-weight: 700;
}
.dik-cart .coupon .button:hover,
.dik-cart button[name="apply_coupon"]:hover,
.dik-cart button[name="update_cart"]:hover {
	border-color: var(--wp--preset--color--accent, #f5a623) !important;
	color: var(--wp--preset--color--accent, #f5a623) !important;
}

/* --- Mobile search: collapse the full-width search bar into a tap-to-open icon
   (owner). The bar ate a whole row under the header on phones. ----------------- */
.dik-search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: var(--dik-radius-sm, 8px);
	background: transparent;
	color: var(--wp--preset--color--accent, #f5a623);
	cursor: pointer;
}
.dik-search-toggle svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}
.dik-search-toggle:hover,
.dik-search-toggle:focus-visible {
	color: var(--wp--preset--color--contrast, #fff);
}

@media (max-width: 781px) {
	/* Hide the resting search bar; reveal it (full-width row) only when toggled.
	   The core/shortcode block drops its className, so the real header child is
	   FiboSearch's own `.dgwt-wcas-search-wrapp` (not `.dik-product-search`). */
	.dik-header > .dik-header__row > .dik-product-search,
	.dik-header__row > .dgwt-wcas-search-wrapp,
	.dik-header__row > .wp-block-search {
		display: none !important;
	}
	.dik-search-toggle {
		display: inline-flex;
	}
	.dik-header--search-open .dik-header__row > .dik-product-search,
	.dik-header--search-open .dik-header__row > .dgwt-wcas-search-wrapp,
	.dik-header--search-open .dik-header__row > .wp-block-search {
		display: block !important;
	}
}

/* =========================================================================
   POLISH PASS 2026-06-24 (D) — PDP reviews + FAQ + description.
   ========================================================================= */

/* Shared section heading for the new full-width PDP sections. */
.dik-pdp-section-title {
	font-size: clamp(1.3rem, 2.5vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast, #fff);
	margin: 0 0 1.25rem;
}

/* Shared gold kicker above every PDP section title — one rhythm for
   Produktdata / Anmeldelser / Godt at vide / Sammenligning. */
.dik-pdp-eyebrow {
	display: block;
	margin: 0 0 0.4rem;
}

/* Vertical rhythm between the full-width PDP sections comes from the product
   grid's row-gap alone — no per-section extra margins. */
.dik-pdp-reviews,
.dik-pdp-faq {
	grid-column: 1 / -1;
	margin-top: 0;
}

/* --- Long description: beautiful typography + fold-out. Rendered as the
   .dik-pdp-description section (tabs are retired); the old tab selectors are
   kept as fallbacks for any plugin-registered tab. --- */
.dik-single-product .dik-pdp-description__body,
.dik-single-product .woocommerce-Tabs-panel--description,
.dik-single-product #tab-description {
	max-width: 72ch;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}
.dik-single-product .dik-pdp-description__body h2,
.dik-single-product .dik-pdp-description__body h3,
.dik-single-product #tab-description h2,
.dik-single-product #tab-description h3 {
	margin: 1.6rem 0 0.6rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #fff);
}
.dik-single-product .dik-pdp-description__body h2,
.dik-single-product #tab-description h2 {
	font-size: 1.2rem;
}
.dik-single-product .dik-pdp-description__body h3,
.dik-single-product #tab-description h3 {
	font-size: 1.05rem;
}
.dik-single-product .dik-pdp-description__body p,
.dik-single-product #tab-description p {
	margin: 0 0 1rem;
}
.dik-single-product .dik-pdp-description__body ul,
.dik-single-product #tab-description ul {
	margin: 0 0 1rem 1.1rem;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}
/* The body's first heading follows the section's own title directly — no
   double top margin. */
.dik-single-product .dik-pdp-description__body > .dik-readmore > :first-child,
.dik-single-product .dik-pdp-description__body > :first-child {
	margin-top: 0;
}

/* --- Buy-box availability line (above the add-to-cart row). --- */
.dik-pdp-availability {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-pdp-availability__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #f5a623);
	box-shadow: 0 0 8px rgba(245, 166, 35, 0.7);
}

/* "Læs produktbeskrivelse" anchor — replaces the short description in the buy
   box and jumps to the full Beskrivelse section below (owner 2026-07-26). */
.dik-pdp-desc-jump {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	width: fit-content;
	margin: 0.35rem 0 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent, #f5a623);
	text-decoration: none;
}
.dik-pdp-desc-jump:hover,
.dik-pdp-desc-jump:focus-visible {
	text-decoration: underline;
}
.dik-pdp-desc-jump svg {
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}
.dik-pdp-desc-jump:hover svg {
	transform: translateY(2px);
}
#dik-pdp-description {
	scroll-margin-top: 140px;
}

/* --- FAQ accordion (native <details>, no JS) ----------------------------- */
.dik-pdp-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	max-width: 820px;
}
.dik-pdp-faq__item {
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	background: var(--wp--preset--color--surface, #16161a);
	overflow: hidden;
}
.dik-pdp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	cursor: pointer;
	list-style: none;
}
.dik-pdp-faq__q::-webkit-details-marker {
	display: none;
}
.dik-pdp-faq__q::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--accent, #f5a623);
	transition: transform 0.2s var(--dik-ease, ease);
}
.dik-pdp-faq__item[open] .dik-pdp-faq__q::after {
	content: "−";
}
.dik-pdp-faq__item[open] .dik-pdp-faq__q {
	color: var(--wp--preset--color--contrast, #fff);
}
.dik-pdp-faq__a {
	padding: 0 1.2rem 1.1rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
	line-height: 1.6;
}
.dik-pdp-faq__a p {
	margin: 0;
}

/* --- Reviews: on-brand cards (transformed from better-business-reviews) ----
   The widget DATA is re-rendered in our own testimonial markup (see
   inc/cro-enhancements.php → dik_render_brand_reviews), so the cards reuse the
   front-page .dik-testimonials__* skin (gold stars, surface cards, quote mark)
   and the off-brand green-Trustpilot styling is gone. Only the summary header
   + a couple of review-specific bits need styling here. */
.dik-reviews .dik-pdp-section-title {
	margin-bottom: 0.75rem;
}
.dik-reviews-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.65rem;
	margin: 0 0 1.75rem;
}
.dik-reviews-summary__score {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--wp--preset--color--contrast, #fff);
	line-height: 1;
}
.dik-reviews-summary__stars {
	color: var(--wp--preset--color--accent, #f5a623);
	letter-spacing: 2px;
	font-size: 1.2rem;
}
.dik-reviews-summary__count {
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 0.95rem;
}
/* Card content reads left-aligned inside the centered section. */
.dik-reviews .dik-testimonials__figure {
	text-align: left;
}
.dik-review__title {
	display: block;
	margin: 0.5rem 0 0.1rem;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #fff);
}
.dik-reviews .dik-testimonials__quote {
	margin-top: 0.5rem;
	font-size: 1rem;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Real reviewer photo fills the avatar circle; initials keep the gradient. */
.dik-testimonials__avatar--img {
	background: none;
	box-shadow: none;
	overflow: hidden;
	padding: 0;
}
.dik-testimonials__avatar--img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* =========================================================================
   POLISH PASS 2026-06-24 (E) — local city SEO landing (patterns/local-landing).
   ========================================================================= */
.dik-local-hero {
	background: var(--dik-grad-hero);
	text-align: center;
}
.dik-local-hero__title {
	margin: 0.5rem auto 1rem;
	max-width: 18ch;
	font-size: var(--dik-fs-hero, clamp(2rem, 5vw, 3.25rem));
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast, #fff);
}
.dik-local-hero .dik-eyebrow {
	justify-content: center;
}
.dik-local-hero__lead {
	margin: 0 auto 1.5rem;
	max-width: 60ch;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	line-height: 1.6;
}
.dik-local-hero .dik-hero__cta {
	justify-content: center;
}

/* Local FAQ — reuse the PDP accordion look on core/details blocks. */
.dik-local-faq .wp-block-details {
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	background: var(--wp--preset--color--surface, #16161a);
	margin-bottom: 0.6rem;
	padding: 0;
}
.dik-local-faq .wp-block-details > summary {
	padding: 1rem 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	cursor: pointer;
}
.dik-local-faq .wp-block-details[open] > summary {
	color: var(--wp--preset--color--contrast, #fff);
}
.dik-local-faq .wp-block-details > *:not(summary) {
	padding: 0 1.2rem 1.1rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
	line-height: 1.6;
}

/* Grid CTA loading state: static idle label + a toggled busy label (no
   data-wp-text → button never flashes empty on Interactivity hydration). */
.dik-card-cta__label[hidden],
.dik-card-cta__busy[hidden] {
	display: none !important;
}

/* =========================================================================
   POLISH PASS 2026-06-24 (I) — guides/blog: article prose, shop CTA, hub grid.
   ========================================================================= */

/* --- Guide article reading column (prose) --------------------------------
   NOTE: real (class-bearing) selectors here, NOT :where() — the legacy Divi
   content carries junk classes (whitespace-pre-wrap, font-600, text-xl, …) that
   would otherwise win the cascade and break wrapping/sizing. These rules
   neutralise that junk so EVERY guide reads as clean prose with no DB edit. */

/* Article header: eyebrow + big title, with breathing room. */
.dik-guide {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}
.dik-guide__title {
	font-size: clamp(2rem, 4.5vw, 2.85rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast, #fff);
	margin: 0 0 1.75rem;
	text-wrap: balance;
}

/* Kill the legacy builder noise that made guides look broken. */
.dik-guide .whitespace-pre-wrap,
.dik-guide [class*="whitespace"] {
	white-space: normal !important;
}
.dik-guide font {
	color: inherit !important;
	font-size: inherit !important;
}
.dik-guide p:empty,
.dik-guide span:empty {
	display: none;
}

/* Body copy: comfortable measure + rhythm. */
.dik-guide p,
.dik-guide li {
	font-size: 1.075rem;
	line-height: 1.8;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}
.dik-guide p {
	margin: 0 0 1.25rem;
}
/* Lead paragraph (first one after the title) reads larger + lighter. */
.dik-guide .wp-block-post-content > p:first-of-type {
	font-size: 1.2rem;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast, #fff);
	margin-bottom: 1.75rem;
}

/* Section headings: clear hierarchy, gold hairline under h2 to break sections. */
.dik-guide h2 {
	font-size: clamp(1.4rem, 3vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast, #fff);
	margin: 2.5rem 0 0.9rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(245, 166, 35, 0.25);
}
.dik-guide h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-bright, #ffc24d);
	margin: 1.75rem 0 0.5rem;
}

/* Lists: gold markers, readable indentation. */
.dik-guide ul,
.dik-guide ol {
	margin: 0 0 1.4rem 1.3rem;
	padding: 0;
}
.dik-guide li {
	margin: 0 0 0.5rem;
}
.dik-guide ul li::marker {
	color: var(--wp--preset--color--accent, #f5a623);
}
.dik-guide ol li::marker {
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 700;
}

/* Links: gold, underline on hover for scannability. */
.dik-guide a {
	color: var(--wp--preset--color--accent, #f5a623);
	text-decoration: none;
	border-bottom: 1px solid rgba(245, 166, 35, 0.4);
}
.dik-guide a:hover {
	color: var(--wp--preset--color--accent-bright, #ffc24d);
	border-bottom-color: currentColor;
}

/* Media + blockquotes. */
.dik-guide img {
	border-radius: var(--dik-radius, 12px);
	height: auto;
	max-width: 100%;
}
.dik-guide blockquote {
	margin: 1.5rem 0;
	padding: 0.5rem 0 0.5rem 1.25rem;
	border-left: 3px solid var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--contrast, #fff);
	font-size: 1.15rem;
}

/* --- Guide shop CTA ------------------------------------------------------- */
.dik-guide-cta {
	background: var(--dik-grad-hero);
}
.dik-guide-cta__inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.dik-guide-cta__title {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 800;
	color: var(--wp--preset--color--contrast, #fff);
	margin: 0 0 0.6rem;
}
.dik-guide-cta__text {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	line-height: 1.6;
	margin: 0 0 1.5rem;
}
.dik-guide-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}
.dik-guide-cta__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.85rem 1.75rem;
	border-radius: var(--dik-radius-sm, 8px);
	font-weight: 700;
	text-decoration: none;
}
.dik-guide-cta__btn--primary {
	background: var(--dik-grad-brand);
	color: #fff;
}
.dik-guide-cta__btn--secondary {
	background: transparent;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
}
.dik-guide-cta__btn--secondary:hover {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623);
}

/* --- Guides hub grid ------------------------------------------------------ */
.dik-guides-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.dik-guide-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius, 12px);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.2s var(--dik-ease, ease), border-color 0.2s var(--dik-ease, ease);
}
.dik-guide-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--accent, #f5a623);
}
.dik-guide-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--base, #0a0a0c);
}
.dik-guide-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dik-guide-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
}
.dik-guide-card__title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast, #fff);
	margin: 0;
}
.dik-guide-card__excerpt {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-guide-card__more {
	margin-top: auto;
	font-weight: 700;
	color: var(--wp--preset--color--accent, #f5a623);
}

@media (max-width: 1023px) {
	.dik-guides-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.dik-guides-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   POLISH PASS 2026-06-24 (cart) — consistent buttons + mobile card reflow.
   Appended last so it wins source order over the earlier scattered cart rules.
   ========================================================================= */

/* Secondary cart actions share ONE treatment (gold ghost): the coupon "Anvend
   kupon" button was an unstyled grey ghost while "Opdatér kurv" was gold — now
   they match. The primary action (Gå til kassen) stays the gradient button. */
.dik-cart .coupon .button,
.dik-cart button[name="apply_coupon"],
.dik-cart .button[name="update_cart"] {
	background: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--accent, #f5a623) !important;
	border: 1px solid rgba(245, 166, 35, 0.55) !important;
	border-radius: var(--dik-radius-sm, 8px) !important;
	box-shadow: none !important;
	font-weight: 600;
	min-height: 48px;
	padding: 0 1.25rem !important;
}
.dik-cart .coupon .button:hover,
.dik-cart button[name="apply_coupon"]:hover,
.dik-cart .button[name="update_cart"]:not([disabled]):hover {
	background: rgba(245, 166, 35, 0.12) !important;
	border-color: var(--wp--preset--color--accent, #f5a623) !important;
	color: var(--wp--preset--color--accent-bright, #ffc24d) !important;
}
/* The update button is correctly disabled until a quantity changes — make that
   read as intentional (muted) rather than a broken washed-out button. */
.dik-cart .button[name="update_cart"][disabled] {
	opacity: 0.5;
	cursor: default;
}

/* Remove "×": off-brand #a00 → muted, brand-red on hover (no jarring red box). */
.dik-cart a.remove {
	color: var(--wp--preset--color--muted, #a3a3ad) !important;
	background: transparent !important;
	font-size: 1.4rem;
	line-height: 1;
}
.dik-cart a.remove:hover {
	color: var(--wp--preset--color--brand-bright, #ff5a45) !important;
	background: transparent !important;
}

/* Coupon row: input + apply button align on one line on desktop. */
.dik-cart .actions .coupon {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: stretch;
}
.dik-cart .actions .coupon .input-text {
	flex: 1 1 12rem;
	min-width: 0;
}

/* ---- Mobile + tablet: turn the cramped cart table into stacked product cards.
   Breakpoint 768px matches WooCommerce's own shop_table_responsive cutoff, so
   our polished cards cover the whole small range (601–768 no longer falls back
   to Woo's plainer default stack). ---- */
@media (max-width: 768px) {
	.dik-cart table.cart thead {
		display: none;
	}
	.dik-cart table.cart,
	.dik-cart table.cart tbody,
	.dik-cart table.cart tr {
		display: block;
		width: 100%;
		border: 0 !important;
	}
	.dik-cart table.cart tr.cart_item {
		/* tr misses the global border-box reset → width:100% + padding pushed
		   the page 18px wide (the owner's "cart not fit for mobile"). */
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 64px 1fr;
		grid-template-areas:
			"thumb name"
			"thumb price"
			"qty   qty"
			"sub   sub";
		gap: 0.3rem 0.85rem;
		align-items: center;
		position: relative;
		margin: 0 0 0.75rem;
		padding: 1rem;
		border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
		border-radius: var(--dik-radius, 14px);
		background: var(--wp--preset--color--surface, #16161a);
	}
	.dik-cart table.cart tr.cart_item td {
		display: block;
		width: auto;
		border: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}
	.dik-cart td.product-thumbnail { grid-area: thumb; }
	.dik-cart td.product-thumbnail img { width: 64px; height: 64px; }
	.dik-cart td.product-name { grid-area: name; font-weight: 700; }
	.dik-cart td.product-price { grid-area: price; }
	.dik-cart td.product-quantity { grid-area: qty; }
	.dik-cart td.product-subtotal { grid-area: sub; font-weight: 700; }
	/* Woo's smallscreen stylesheet prefixes EVERY cell with its data-title
	   ("Vare:", "Pris:", "Antal:" — and a bare ":" on the unlabeled thumbnail
	   cell). In the card layout the name/price/qty are self-evident; only the
	   subtotal keeps a label. */
	.dik-cart table.cart tr.cart_item td::before {
		content: none;
	}
	.dik-cart table.cart tr.cart_item td.product-subtotal::before {
		content: attr(data-title) ": ";
		color: var(--wp--preset--color--muted, #a3a3ad);
		font-weight: 600;
	}
	/* Bundle component rows (woosb children follow their parent card): compact,
	   quiet "contents of the package" styling — small thumb, no price noise. */
	.dik-cart table.cart tr.cart_item.woosb-cart-child {
		grid-template-columns: 40px 1fr;
		margin: -0.45rem 0 0.75rem;
		padding: 0.55rem 1rem;
		background: transparent;
		border-style: dashed !important;
	}
	.dik-cart table.cart tr.cart_item.woosb-cart-child td.product-thumbnail img {
		width: 40px;
		height: 40px;
	}
	.dik-cart table.cart tr.cart_item.woosb-cart-child td.product-name {
		font-weight: 500;
		font-size: 0.9rem;
		color: var(--wp--preset--color--muted, #a3a3ad);
	}
	.dik-cart table.cart tr.cart_item.woosb-cart-child td.product-price,
	.dik-cart table.cart tr.cart_item.woosb-cart-child td.product-subtotal {
		display: none;
	}
	/* Remove "×" pinned to the card's top-right corner. */
	.dik-cart td.product-remove {
		position: absolute;
		top: 0.5rem;
		right: 0.6rem;
		width: auto;
	}
	.dik-cart td.product-quantity .quantity,
	.dik-cart td.product-quantity .qib-button-wrapper {
		margin: 0.25rem 0 0;
	}
	/* Coupon + update stack full-width; totals box goes full-width too. */
	.dik-cart td.actions {
		display: block;
		padding: 0.5rem 0 0 !important;
		border: 0 !important;
	}
	.dik-cart .actions .coupon,
	.dik-cart .actions .coupon .input-text,
	.dik-cart .actions .coupon .button,
	.dik-cart td.actions .button[name="update_cart"] {
		width: 100%;
	}
	.dik-cart td.actions .button[name="update_cart"] {
		margin-top: 0.5rem;
	}
	.dik-cart .cart-collaterals,
	.dik-cart .cart_totals {
		width: 100% !important;
		float: none !important;
	}
}

/* =========================================================================
   POLISH PASS 2026-06-24 (pagination → load-more). Owner chose a "Vis flere
   produkter" button over page links. The numbered <a href> pagination stays in
   the DOM for SEO + no-JS (restyled to clean plain numbers, no boxes/borders),
   and is hidden only when JS is on (.dik-js head class → no flash).
   ========================================================================= */

/* Plain-number fallback pagination: strip every box, border and background. */
.dik-archive nav.woocommerce-pagination ul,
.dik-archive .woocommerce-pagination ul {
	display: inline-flex;
	gap: 0.15rem;
	border: 0 !important;
	margin: 0;
}
.dik-archive nav.woocommerce-pagination ul li,
.dik-archive .woocommerce-pagination ul li {
	border: 0 !important;
	margin: 0;
	background: transparent !important;
}
.dik-archive nav.woocommerce-pagination ul li a,
.dik-archive nav.woocommerce-pagination ul li span,
.dik-archive .woocommerce-pagination ul li a,
.dik-archive .woocommerce-pagination ul li span {
	min-width: 2.25rem;
	padding: 0.4rem 0.65rem !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 6px;
	color: var(--wp--preset--color--muted, #a3a3ad) !important;
	font-weight: 600;
}
.dik-archive nav.woocommerce-pagination ul li a:hover,
.dik-archive nav.woocommerce-pagination ul li a:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623) !important;
	background: rgba(245, 166, 35, 0.1) !important;
}
.dik-archive nav.woocommerce-pagination ul li span.current,
.dik-archive .woocommerce-pagination ul li span.current {
	color: var(--wp--preset--color--accent, #f5a623) !important;
	font-weight: 800;
	background: transparent !important;
}

/* When JS is on: hide the numbered pagination, the load-more takes over. */
.dik-js .dik-archive nav.woocommerce-pagination,
.dik-js .dik-archive .woocommerce-pagination {
	display: none !important;
}

/* "Vis flere produkter" button — gold-outline pill, centered, JS-only. */
.dik-loadmore-wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--60, 2.5rem);
}
.dik-loadmore {
	display: none; /* revealed only when JS is active */
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.85rem 2.25rem;
	border: 1px solid rgba(245, 166, 35, 0.55);
	border-radius: var(--dik-radius-pill, 999px);
	background: transparent;
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: transform 0.2s var(--dik-ease), background-color 0.2s var(--dik-ease), border-color 0.2s var(--dik-ease), color 0.2s var(--dik-ease);
}
.dik-js .dik-loadmore {
	display: inline-flex;
}
.dik-loadmore:hover,
.dik-loadmore:focus-visible {
	background: rgba(245, 166, 35, 0.12);
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent-bright, #ffc24d);
	transform: translateY(-1px);
}
.dik-loadmore.is-loading {
	opacity: 0.7;
	cursor: default;
	transform: none;
}

/* Guide article eyebrow / back-to-guides link. */
.dik-guide__eyebrow {
	margin: 0 0 0.75rem;
}
.dik-guide__eyebrow a {
	color: var(--wp--preset--color--accent, #f5a623);
	border-bottom: 0;
	font-weight: 800;
}
.dik-guide__eyebrow a:hover {
	color: var(--wp--preset--color--accent-bright, #ffc24d);
}

/* =========================================================================
   POLISH PASS 2026-06-25 — city-page hero chips + nearby-towns links;
   cart "Du sparer" (sale savings) row.
   ========================================================================= */

/* City hero USP chips (inspiration from the retired combined local page). */
.dik-local-usps {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.65rem;
}
.dik-local-usps li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid rgba(245, 166, 35, 0.3);
	border-radius: var(--dik-radius-pill, 999px);
	background: rgba(245, 166, 35, 0.08);
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	font-size: 0.85rem;
	font-weight: 600;
}
.dik-local-usps li::before {
	content: "✓";
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 800;
}

/* Nearby-towns internal-link grid. */
.dik-local-nearby {
	text-align: center;
}
.dik-local-nearby__title {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	margin: 0 0 0.5rem;
}
.dik-local-nearby__intro {
	color: var(--wp--preset--color--muted, #a3a3ad);
	margin: 0 auto 1.5rem;
	max-width: 640px;
}
.dik-local-nearby__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	max-width: 900px;
	margin-inline: auto;
}
.dik-local-nearby__link {
	display: inline-flex;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-pill, 999px);
	background: var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: border-color 0.2s var(--dik-ease), color 0.2s var(--dik-ease), transform 0.2s var(--dik-ease);
}
.dik-local-nearby__link:hover {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623) !important;
	transform: translateY(-1px);
}

/* "Du sparer" sale-savings row in cart + checkout totals — gold, prominent. */
.dik-cart .dik-cart-savings th,
.dik-cart .dik-cart-savings td,
.dik-checkout .dik-cart-savings th,
.dik-checkout .dik-cart-savings td,
.woocommerce-checkout-review-order-table .dik-cart-savings th,
.woocommerce-checkout-review-order-table .dik-cart-savings td {
	color: var(--wp--preset--color--accent, #f5a623) !important;
	font-weight: 700;
}

/* City hero CTA buttons: the button group is raw HTML in the shortcode, so it
   lacks the block-layout flex classes and the two buttons stacked full-width and
   overlapped ("Alle tilbud" over "Shop fyrværkeri"). Force the flex row here. */
.dik-local-hero .dik-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.5rem;
}
.dik-local-hero .dik-hero__cta .wp-block-button {
	margin: 0;
	width: auto;
}

/* Archive filter bar: category chips + price bands + in-stock toggle. */
.dik-archive-filters {
	margin: 0 0 0.75rem;
	display: grid;
	gap: 0.6rem;
}
.dik-archive-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
}
.dik-archive-filters__label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #a3a3ad);
	margin-right: 0.15rem;
}
.dik-filter-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-pill, 999px);
	background: var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
	transition: border-color 0.2s var(--dik-ease), color 0.2s var(--dik-ease), background-color 0.2s var(--dik-ease);
}
.dik-filter-chip:hover {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623) !important;
}
.dik-filter-chip.is-active {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623) !important;
	background: rgba(245, 166, 35, 0.1);
}
/* On small screens the category row scrolls horizontally instead of wrapping
   into a wall of chips. */
@media (max-width: 640px) {
	.dik-archive-filters__row--cats {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 0.15rem;
	}
	.dik-archive-filters__row--cats::-webkit-scrollbar {
		display: none;
	}
	.dik-archive-filters__row--cats .dik-filter-chip {
		flex: 0 0 auto;
	}
}
.dik-instock-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-pill, 999px);
	background: var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--contrast-soft, #ededf2) !important;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: border-color 0.2s var(--dik-ease), color 0.2s var(--dik-ease), background-color 0.2s var(--dik-ease);
}
.dik-instock-toggle__box {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	border: 1.5px solid var(--wp--preset--color--muted, #a3a3ad);
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.dik-instock-toggle:hover {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623) !important;
}
.dik-instock-toggle.is-active {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623) !important;
	background: rgba(245, 166, 35, 0.1);
}
.dik-instock-toggle.is-active .dik-instock-toggle__box {
	background: var(--wp--preset--color--accent, #f5a623);
	border-color: var(--wp--preset--color--accent, #f5a623);
}
.dik-instock-toggle.is-active .dik-instock-toggle__box::after {
	content: "✓";
	color: #0a0a0c;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

/* ============================================================
   Thank-you (order-received) pickup panel — Gap G7b
   ============================================================ */
.dik-thankyou {
	margin: var(--wp--preset--spacing--50, 1.5rem) 0;
	padding: var(--wp--preset--spacing--50, 1.5rem);
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius, 12px);
}

.dik-thankyou__title {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-thankyou__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50, 1.5rem);
}

@media (max-width: 781px) {
	.dik-thankyou__grid {
		grid-template-columns: 1fr;
	}
}

.dik-thankyou__heading {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-thankyou__cell p,
.dik-thankyou__cell ul {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-thankyou__bring {
	padding-left: 1.1rem;
}

.dik-thankyou__day {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-thankyou__hours {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

.dik-thankyou__maps,
.dik-thankyou__phone a {
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 700;
	text-decoration: none;
}

.dik-thankyou__maps:hover,
.dik-thankyou__maps:focus-visible,
.dik-thankyou__phone a:hover,
.dik-thankyou__phone a:focus-visible {
	text-decoration: underline;
}

/* ============================================================
   Category long-form SEO text below the grid — Gap G12
   ============================================================ */
.dik-category-seo {
	max-width: 760px;
	margin: var(--wp--preset--spacing--60, 2rem) auto 0;
	padding-top: var(--wp--preset--spacing--50, 1.5rem);
	border-top: 1px solid var(--wp--preset--color--border, #2e2e36);
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-category-seo h2,
.dik-category-seo h3 {
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-category-seo a {
	color: var(--wp--preset--color--accent, #f5a623);
}

/* ============================================================
   Back-in-stock "Få besked" form (sold-out PDPs) — Gap G7e
   ============================================================ */
.dik-bis {
	margin: 1rem 0;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
}

.dik-bis__lead {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-bis__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dik-bis__row {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.dik-bis__field {
	flex: 1 1 220px;
}

.dik-bis__email {
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: var(--dik-radius-sm, 8px);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	background: rgba(0, 0, 0, 0.35);
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-bis__submit {
	padding: 0.75rem 1.4rem;
	border-radius: var(--dik-radius-sm, 8px);
	border: 0;
	background: var(--dik-grad-brand);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.dik-bis__status {
	margin: 0.75rem 0 0;
	font-weight: 700;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-bis__status.is-error {
	color: var(--wp--preset--color--brand-bright, #ff5a45);
}

/* ============================================================
   PDP comparison table — Gap G7d
   ============================================================ */
.dik-compare {
	margin: 0;
}

.dik-compare__scroll {
	/* position:relative is load-bearing: the table's absolutely-positioned
	   .screen-reader-text spans would otherwise resolve their containing
	   block OUTSIDE this clipping wrapper and widen the whole page (70px of
	   horizontal scroll on mobile). */
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.dik-compare__table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius, 12px);
	overflow: hidden;
}

.dik-compare__table th,
.dik-compare__table td {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--wp--preset--color--border, #2e2e36);
	text-align: left;
	vertical-align: top;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	font-size: 0.9rem;
}

.dik-compare__table thead th {
	vertical-align: top;
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-compare__table tbody th[scope="row"] {
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-weight: 600;
	white-space: nowrap;
}

.dik-compare__current {
	background: rgba(245, 166, 35, 0.07);
}

.dik-compare__table ins {
	text-decoration: none;
}

.dik-compare__thumb {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
	margin-bottom: 0.4rem;
	border-radius: var(--dik-radius-sm, 8px);
	background: rgba(0, 0, 0, 0.3);
}

.dik-compare__name {
	display: block;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #fff);
	text-decoration: none;
}

a.dik-compare__name:hover,
a.dik-compare__name:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-compare__badge {
	display: inline-block;
	margin-top: 0.3rem;
	padding: 0.1rem 0.5rem;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #0a0a0c;
	background: var(--wp--preset--color--accent, #f5a623);
	border-radius: 999px;
}

.dik-compare__cta {
	font-weight: 700;
	color: var(--wp--preset--color--accent, #f5a623);
	text-decoration: none;
}

.dik-compare__cta:hover,
.dik-compare__cta:focus-visible {
	text-decoration: underline;
}

/* Inline preview hint: points at the ⇄ save-to-compare flow. */
.dik-compare__hint {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: -0.25rem 0 1rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 0.85rem;
}

.dik-compare__hint svg {
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent, #f5a623);
}

/* NEM total row in cart/checkout totals — same gold treatment as savings. */
.dik-cart .dik-cart-nem th,
.dik-cart .dik-cart-nem td,
.dik-checkout .dik-cart-nem th,
.dik-checkout .dik-cart-nem td,
.woocommerce-checkout-review-order-table .dik-cart-nem th,
.woocommerce-checkout-review-order-table .dik-cart-nem td {
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 700;
}

/* ============================================================
   Side-cart drawer reskin (owner feedback 14/7)
   ============================================================ */

/* Button hierarchy: checkout = primary gradient; view cart = quiet outline;
   continue shopping = plain text link. */
.xoo-wsc-container .xoo-wsc-ft-btn {
	border-radius: var(--dik-radius-sm, 8px);
	font-weight: 700;
	transition: transform 0.2s var(--dik-ease, ease), filter 0.2s var(--dik-ease, ease);
}

.xoo-wsc-container .xoo-wsc-ft-btn-checkout {
	background: var(--dik-grad-brand) !important;
	color: #fff !important;
	box-shadow: var(--dik-shadow-brand, none);
}

.xoo-wsc-container .xoo-wsc-ft-btn-checkout:hover,
.xoo-wsc-container .xoo-wsc-ft-btn-checkout:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

.xoo-wsc-container .xoo-wsc-ft-btn-cart {
	background: transparent !important;
	color: var(--wp--preset--color--contrast, #fff) !important;
	border: 1px solid var(--wp--preset--color--border, #2e2e36) !important;
}

.xoo-wsc-container .xoo-wsc-ft-btn-cart:hover,
.xoo-wsc-container .xoo-wsc-ft-btn-cart:focus-visible {
	border-color: var(--wp--preset--color--accent, #f5a623) !important;
	color: var(--wp--preset--color--accent, #f5a623) !important;
}

.xoo-wsc-container .xoo-wsc-ft-btn-continue {
	background: transparent !important;
	color: var(--wp--preset--color--muted, #a3a3ad) !important;
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: underline;
	font-weight: 600;
}

.xoo-wsc-container .xoo-wsc-ft-btn-continue:hover,
.xoo-wsc-container .xoo-wsc-ft-btn-continue:focus-visible {
	color: var(--wp--preset--color--contrast, #fff) !important;
}

/* The plugin's own green "Du har sparet" line + English shipping note are
   replaced by our rows/note — hide the originals. */
.xoo-wsc-container .xoo-wsc-ft-amt-savings,
.xoo-wsc-container .xoo-wsc-footer-txt {
	display: none !important;
}

/* Our savings + NEM rows: brand gold, not green. */
.xoo-wsc-container .dik-wsc-savings .xoo-wsc-ft-amt-value,
.xoo-wsc-container .dik-wsc-savings .xoo-wsc-ft-amt-label,
.xoo-wsc-container .dik-wsc-nem .xoo-wsc-ft-amt-value,
.xoo-wsc-container .dik-wsc-nem .xoo-wsc-ft-amt-label {
	color: var(--wp--preset--color--accent, #f5a623) !important;
	font-weight: 700;
}

/* Per-line "Spar X" badge: gold outline, not green. */
.xoo-wsc-container .xoo-wsc-psavings {
	color: var(--wp--preset--color--accent, #f5a623) !important;
	border-color: var(--wp--preset--color--accent, #f5a623) !important;
}

.xoo-wsc-container .xoo-wsc-psavings .xoo-wsc-psavlabel {
	color: inherit !important;
}

/* Danish pickup note under the buttons. */
.xoo-wsc-container .dik-wsc-note {
	margin: 0.6rem 0 0;
	text-align: center;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* Cross-sells inside the drawer. */
.dik-wsc-xsell {
	margin: 1rem 0 0;
	padding: 0.9rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	background: var(--wp--preset--color--surface, #16161a);
}

.dik-wsc-xsell__title {
	margin: 0 0 0.6rem;
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-wsc-xsell__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.dik-wsc-xsell__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.dik-wsc-xsell__media img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.3);
	display: block;
}

.dik-wsc-xsell__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dik-wsc-xsell__name {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #fff);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dik-wsc-xsell__price {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

.dik-wsc-xsell__price ins {
	text-decoration: none;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-wsc-xsell__add {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--dik-grad-brand);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.dik-wsc-xsell__add:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ============================================================
   Back-in-stock form redesign (owner feedback 14/7)
   ============================================================ */
.dik-bis {
	max-width: 560px;
	margin: 1.25rem 0;
	padding: 1.1rem 1.25rem 1.25rem;
	background: linear-gradient(135deg, rgba(245, 166, 35, 0.08) 0%, rgba(239, 66, 46, 0.05) 100%),
		var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-left: 3px solid var(--wp--preset--color--accent, #f5a623);
	border-radius: var(--dik-radius-sm, 8px);
}

.dik-bis__lead {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	line-height: 1.45;
}

.dik-bis__lead strong {
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-bis__icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(245, 166, 35, 0.15);
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-bis__row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.dik-bis__email {
	flex: 1 1 200px;
	width: auto;
}

.dik-bis__submit {
	box-shadow: var(--dik-shadow-brand, none);
	transition: transform 0.2s var(--dik-ease, ease), filter 0.2s var(--dik-ease, ease);
}

.dik-bis__submit:hover,
.dik-bis__submit:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

/* =========================================================================
   POLISH PASS 2026-07-14B — owner feedback: senior-agency alignment.
   Appended last; wins over earlier equal-specificity rules.
   ========================================================================= */

/* THE slider-button bug: anchors ("Vis produkt") used content-box while
   buttons are border-box, so width:100% + padding overflowed the card by
   ~21px. One box model for every CTA. */
.dik-card-cta {
	box-sizing: border-box;
}

/* Cart: product names are PRODUCTS, not links-noise — white, gold on hover. */
.dik-cart .shop_table .product-name a {
	color: var(--wp--preset--color--contrast, #fff) !important;
	font-weight: 600;
}
.dik-cart .shop_table .product-name a:hover {
	color: var(--wp--preset--color--accent, #f5a623) !important;
}

/* Totals card: give the heading room inside the box (it sat on the border). */
.dik-cart .cart_totals h2 {
	margin: 0 !important;
	padding: 1rem 1.25rem 0.65rem !important;
	font-size: 1.05rem !important;
	line-height: 1.3;
	border-bottom: 1px solid var(--wp--preset--color--border, #2e2e36);
	background: var(--wp--preset--color--surface, #16161a);
}

/* Calmer scale on cart + checkout (buttons/text were oversized). */
.dik-cart .shop_table td,
.dik-cart .shop_table th,
.dik-cart .cart_totals td,
.dik-cart .cart_totals th {
	font-size: 0.95rem;
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}
.dik-cart .button,
.dik-checkout .button {
	font-size: 0.9rem !important;
	padding: 0.65rem 1.15rem !important;
}
.dik-cart .checkout-button,
.dik-cart .wc-proceed-to-checkout .button,
.dik-checkout #place_order {
	font-size: 1rem !important;
	padding: 0.85rem 1.5rem !important;
	box-shadow: 0 6px 16px rgba(239, 66, 46, 0.25) !important;
}
.dik-cart .coupon .input-text {
	font-size: 0.9rem;
}
.dik-checkout form .form-row label {
	font-size: 0.88rem;
}

/* Money color system — three DIFFERENT treatments (owner: not all the same):
   prices/totals WHITE (the number that matters), savings GOLD (the win),
   NEM neutral MUTED (spec info, not money). */
.dik-cart .cart_totals .amount,
.dik-cart .shop_table .amount,
.dik-checkout .woocommerce-checkout-review-order-table .amount {
	color: var(--wp--preset--color--contrast, #fff);
}
.dik-cart .dik-cart-nem th,
.dik-cart .dik-cart-nem td,
.dik-checkout .dik-cart-nem th,
.dik-checkout .dik-cart-nem td,
.woocommerce-checkout-review-order-table .dik-cart-nem th,
.woocommerce-checkout-review-order-table .dik-cart-nem td {
	color: var(--wp--preset--color--muted, #a3a3ad) !important;
	font-weight: 600;
	font-size: 0.88rem;
}
.xoo-wsc-container .dik-wsc-nem .xoo-wsc-ft-amt-value,
.xoo-wsc-container .dik-wsc-nem .xoo-wsc-ft-amt-label {
	color: var(--wp--preset--color--muted, #a3a3ad) !important;
	font-weight: 600 !important;
	font-size: 0.85rem;
}

/* Section headings inside commerce pages: one calm scale (were huge). */
.dik-cart .dik-popular__title,
.dik-checkout .dik-popular__title {
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}
.dik-cart .dik-popular__eyebrow {
	font-size: 0.72rem;
}

/* ============================================================
   Add-to-cart popup — owner feature 14/7
   ============================================================ */
.dik-atcp {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

/* The display:flex above would defeat the hidden attribute (UA display:none
   loses to any authored display) — restore it explicitly. */
.dik-atcp[hidden] {
	display: none;
}

html.dik-atcp-open {
	overflow: hidden;
}

.dik-atcp__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(2px);
}

.dik-atcp__dialog {
	position: relative;
	width: min(480px, 100%);
	max-height: min(86vh, 720px);
	overflow-y: auto;
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-top: 3px solid var(--wp--preset--color--accent, #f5a623);
	border-radius: var(--dik-radius, 12px);
	padding: 1.1rem 1.25rem 1.25rem;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.dik-atcp__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

.dik-atcp__check {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(245, 166, 35, 0.15);
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-atcp__title {
	margin: 0;
	flex: 1;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-atcp__close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.dik-atcp__close:hover,
.dik-atcp__close:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.dik-atcp__product {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	background: rgba(0, 0, 0, 0.25);
}

.dik-atcp__product img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.3);
}

.dik-atcp__pname {
	display: block;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #fff);
	font-size: 0.95rem;
}

.dik-atcp__pprice {
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-atcp__pprice ins {
	text-decoration: none;
}

.dik-atcp__cartline {
	margin: 0.7rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.7rem;
	align-items: baseline;
}

.dik-atcp__subtotal .amount {
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-atcp__savings,
.dik-atcp__savings .amount {
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 700;
}

.dik-atcp__nem {
	color: var(--wp--preset--color--muted, #a3a3ad);
}

.dik-atcp__recs {
	margin-top: 1rem;
}

.dik-atcp__recs-title {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-atcp__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.dik-atcp__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
}

.dik-atcp__media img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.3);
	display: block;
}

.dik-atcp__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dik-atcp__name {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #fff);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dik-atcp__price {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

.dik-atcp__price ins {
	text-decoration: none;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-atcp__add {
	flex: 0 0 auto;
	padding: 0.45rem 0.9rem;
	border: 1px solid rgba(245, 166, 35, 0.55);
	border-radius: var(--dik-radius-pill, 999px);
	background: transparent;
	color: var(--wp--preset--color--accent, #f5a623);
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
}

.dik-atcp__add:hover,
.dik-atcp__add:focus-visible {
	background: rgba(245, 166, 35, 0.12);
}

.dik-atcp__add:disabled {
	opacity: 0.6;
	cursor: wait;
}

.dik-atcp__actions {
	margin-top: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dik-atcp__checkout {
	display: block;
	text-align: center;
	padding: 0.85rem 1.25rem;
	border-radius: var(--dik-radius-sm, 8px);
	background: var(--dik-grad-brand);
	color: #fff !important;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(239, 66, 46, 0.25);
	transition: transform 0.2s var(--dik-ease, ease), filter 0.2s var(--dik-ease, ease);
}

.dik-atcp__checkout:hover,
.dik-atcp__checkout:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

.dik-atcp__cart {
	display: block;
	text-align: center;
	padding: 0.7rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	color: var(--wp--preset--color--contrast, #fff) !important;
	font-weight: 700;
	text-decoration: none;
}

.dik-atcp__cart:hover,
.dik-atcp__cart:focus-visible {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623) !important;
}

.dik-atcp__continue {
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.dik-atcp__continue:hover,
.dik-atcp__continue:focus-visible {
	color: #fff;
}

/* ============================================================
   Save-to-compare (comparison v3) — owner feature 14/7
   ============================================================ */
.dik-product-card {
	position: relative;
}

.dik-compare-toggle {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 2;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: 50%;
	background: rgba(10, 10, 12, 0.75);
	color: var(--wp--preset--color--muted, #a3a3ad);
	cursor: pointer;
	transition: color 0.2s var(--dik-ease, ease), border-color 0.2s var(--dik-ease, ease);
}

.dik-compare-toggle:hover,
.dik-compare-toggle:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623);
	border-color: var(--wp--preset--color--accent, #f5a623);
}

.dik-compare-toggle.is-saved {
	color: #0a0a0c;
	background: var(--wp--preset--color--accent, #f5a623);
	border-color: var(--wp--preset--color--accent, #f5a623);
}

/* PDP variant: inline text button under the buy box, not an overlay. It must
   stay compact — the flex-column summary would stretch it into a full-width
   bar competing with the add-to-cart CTA. */
.dik-compare-toggle--pdp {
	position: static;
	align-self: flex-start;
	width: fit-content;
	height: auto;
	border-radius: var(--dik-radius-pill, 999px);
	padding: 0.45rem 0.9rem;
	gap: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	background: transparent;
	margin: 0.5rem 0 0;
}

.dik-compare-toggle--pdp.is-saved {
	color: #0a0a0c;
}

/* Hover tooltip on the card toggle (attribute-driven so JS can flip the
   wording between save/remove). PDP variant carries a text label instead. */
.dik-compare-toggle[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	left: calc(100% + 0.5rem);
	top: 50%;
	transform: translateY(-50%) translateX(-4px);
	padding: 0.3rem 0.6rem;
	border-radius: 6px;
	background: rgba(10, 10, 12, 0.94);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s var(--dik-ease, ease), transform 0.15s var(--dik-ease, ease);
	z-index: 5;
}

@media (hover: hover) {
	.dik-compare-toggle[data-tip]:hover::after,
	.dik-compare-toggle[data-tip]:focus-visible::after {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

.dik-compare-toggle--pdp[data-tip]::after {
	display: none;
}

/* Cart + checkout are for finishing the purchase — no compare affordances
   (the floating button/modal are already suppressed server-side there). */
.woocommerce-cart .dik-compare-toggle,
.woocommerce-checkout .dik-compare-toggle {
	display: none;
}

/* ---- Floating "Sammenlign" button (appears once picks exist). ---- */
.dik-cmpbar {
	position: fixed;
	right: 1.1rem;
	bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
	z-index: 950;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.05rem;
	border: 1px solid rgba(245, 166, 35, 0.5);
	border-radius: var(--dik-radius-pill, 999px);
	background: rgba(13, 13, 15, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	transition: transform 0.2s var(--dik-ease, ease), border-color 0.2s var(--dik-ease, ease);
	animation: dik-cmpbar-in 0.3s var(--dik-ease, ease);
}

.dik-cmpbar[hidden] {
	display: none;
}

.dik-cmpbar svg {
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-cmpbar:hover,
.dik-cmpbar:focus-visible {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--accent, #f5a623);
}

.dik-cmpbar__count {
	min-width: 1.35rem;
	padding: 0.05rem 0.4rem;
	border-radius: var(--dik-radius-pill, 999px);
	background: var(--wp--preset--color--accent, #f5a623);
	color: #0a0a0c;
	font-size: 0.75rem;
	font-weight: 800;
	text-align: center;
}

.dik-cmpbar.is-pulse {
	animation: dik-cmpbar-pulse 0.4s var(--dik-ease, ease);
}

@keyframes dik-cmpbar-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

@keyframes dik-cmpbar-pulse {
	40% {
		transform: scale(1.08);
	}
}

/* Clear the sticky add-to-cart bar on product pages (the bar is now
   all-widths, so the FAB rides above it everywhere). */
.single-product .dik-cmpbar {
	bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px));
}

/* ---- "Min sammenligning" modal. ---- */
.dik-cmp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.dik-cmp-modal[hidden] {
	display: none;
}

html.dik-cmp-open {
	overflow: hidden;
}

.dik-cmp-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.dik-cmp-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(980px, 100%);
	max-height: min(88vh, 860px);
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-top: 3px solid var(--wp--preset--color--accent, #f5a623);
	border-radius: var(--dik-radius, 12px);
	padding: 1.1rem 1.25rem 1.25rem;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: translateY(10px) scale(0.98);
	transition: opacity 0.2s var(--dik-ease, ease), transform 0.2s var(--dik-ease, ease);
}

.dik-cmp-modal.is-open .dik-cmp-modal__dialog {
	opacity: 1;
	transform: none;
}

.dik-cmp-modal__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

.dik-cmp-modal__icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(245, 166, 35, 0.15);
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-cmp-modal__title {
	margin: 0;
	flex: 1;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-cmp-modal__close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.dik-cmp-modal__close:hover,
.dik-cmp-modal__close:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.dik-cmp-modal__body {
	overflow-y: auto;
}

/* Column remove (×) in the modal table header. */
.dik-cmp-remove {
	display: block;
	margin: 0 0 0.3rem;
	width: 24px;
	height: 24px;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.dik-cmp-remove:hover,
.dik-cmp-remove:focus-visible {
	color: var(--wp--preset--color--brand-bright, #ff5a45);
	border-color: var(--wp--preset--color--brand-bright, #ff5a45);
	background: rgba(255, 90, 69, 0.12);
}

/* Modal toolbar: pick count + picker toggle. */
.dik-cmp-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
}

.dik-cmp-toolbar__count {
	margin: 0;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 0.85rem;
}

.dik-cmp-picker-toggle {
	padding: 0.45rem 0.9rem;
	border-radius: var(--dik-radius-pill, 999px);
	border: 1px dashed rgba(245, 166, 35, 0.55);
	background: transparent;
	color: var(--wp--preset--color--accent, #f5a623);
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s var(--dik-ease, ease);
}

.dik-cmp-picker-toggle:hover:not(:disabled),
.dik-cmp-picker-toggle:focus-visible:not(:disabled) {
	background: rgba(245, 166, 35, 0.12);
}

.dik-cmp-picker-toggle:disabled {
	border-color: var(--wp--preset--color--border, #2e2e36);
	color: var(--wp--preset--color--muted, #a3a3ad);
	cursor: default;
}

/* The toggle states its own action: add when closed, close when open. */
.dik-cmp-picker-toggle__close {
	display: none;
}

.dik-cmp-picker-toggle[aria-expanded="true"] .dik-cmp-picker-toggle__add {
	display: none;
}

.dik-cmp-picker-toggle[aria-expanded="true"] .dik-cmp-picker-toggle__close {
	display: inline;
}

.dik-cmp-picker-toggle[aria-expanded="true"] {
	border-style: solid;
	background: rgba(245, 166, 35, 0.12);
}

/* ---- Grouped product picker (mega-menu style) with live search. ---- */
.dik-cmp-picker-wrap {
	margin: 0 0 1rem;
}

.dik-cmp-picker-wrap[hidden] {
	display: none;
}

.dik-cmp-picker {
	padding: 0.9rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius, 12px);
	background: rgba(0, 0, 0, 0.25);
}

.dik-cmp-picker__bar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
}

.dik-cmp-picker__done {
	flex: 0 0 auto;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-pill, 999px);
	background: transparent;
	color: var(--wp--preset--color--contrast, #fff);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s var(--dik-ease, ease);
}

.dik-cmp-picker__done:hover,
.dik-cmp-picker__done:focus-visible {
	border-color: var(--wp--preset--color--accent, #f5a623);
}

.dik-cmp-picker__search-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-pill, 999px);
	background: var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--muted, #a3a3ad);
}

.dik-cmp-picker__search-wrap:focus-within {
	border-color: var(--wp--preset--color--accent, #f5a623);
}

.dik-cmp-picker input[type="search"].dik-cmp-search {
	flex: 1;
	min-width: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast, #fff);
	font-size: 0.9rem;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.dik-cmp-picker__groups {
	display: grid;
	gap: 1rem;
	max-height: 300px;
	overflow-y: auto;
	padding-right: 0.25rem;
}

.dik-cmp-picker__group[hidden] {
	display: none;
}

.dik-cmp-picker__group-title {
	margin: 0 0 0.45rem;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-cmp-picker__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 0.5rem;
}

.dik-cmp-picker__item[hidden] {
	display: none;
}

.dik-cmp-pick {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	background: var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s var(--dik-ease, ease);
}

.dik-cmp-pick:hover:not(:disabled),
.dik-cmp-pick:focus-visible:not(:disabled) {
	border-color: var(--wp--preset--color--accent, #f5a623);
}

.dik-cmp-pick.is-picked {
	opacity: 0.55;
	cursor: default;
}

.dik-cmp-pick img {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.3);
}

.dik-cmp-pick__info {
	flex: 1;
	min-width: 0;
}

.dik-cmp-pick__name {
	display: block;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast, #fff);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dik-cmp-pick__meta {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.78rem;
}

.dik-cmp-pick__price,
.dik-cmp-pick__price .amount {
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-cmp-pick__price del,
.dik-cmp-pick__price del .amount {
	color: var(--wp--preset--color--muted, #a3a3ad);
}

.dik-cmp-pick__price ins {
	text-decoration: none;
}

.dik-cmp-pick__state {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed rgba(245, 166, 35, 0.55);
	border-radius: 50%;
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 700;
	font-size: 0.85rem;
}

.dik-cmp-pick.is-picked .dik-cmp-pick__state {
	border: 0;
	background: var(--wp--preset--color--accent, #f5a623);
	color: #0a0a0c;
}

.dik-cmp-picker__empty {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-size: 0.85rem;
}

/* Empty state when nothing is saved yet. */
.dik-cmp-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 2rem 1rem;
	border: 1px dashed var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius, 12px);
	text-align: center;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

.dik-cmp-empty svg {
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-cmp-empty p {
	margin: 0;
	max-width: 46ch;
	font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
	.dik-cmpbar,
	.dik-cmp-modal__dialog {
		animation: none;
		transition: none;
	}
}

/* Availability cells. */
.dik-compare__stock {
	font-size: 0.82rem;
	font-weight: 700;
}

.dik-compare__stock--in {
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-compare__stock--in::before {
	content: "●";
	color: var(--wp--preset--color--accent, #f5a623);
	margin-right: 0.35rem;
	font-size: 0.7em;
	vertical-align: 1px;
}

.dik-compare__stock--out {
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* ============================================================
   Home category showcase — owner feature 14/7
   ============================================================ */
.dik-cats__inner {
	max-width: 1375px;
	margin: 0 auto;
}

.dik-cats__eyebrow {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	text-transform: uppercase;
}

.dik-cats__title {
	margin: 0 0 1.5rem;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-cats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40, 1rem);
}

@media (max-width: 1023px) {
	.dik-cats__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.dik-cats__grid {
		grid-template-columns: 1fr;
	}
}

.dik-cats__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid rgba(245, 166, 35, 0.1);
	border-radius: var(--dik-radius, 12px);
	background: var(--wp--preset--color--surface, #16161a);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.25s var(--dik-ease, ease), border-color 0.25s var(--dik-ease, ease), box-shadow 0.25s var(--dik-ease, ease);
}

.dik-cats__card:hover,
.dik-cats__card:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(245, 166, 35, 0.45);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.dik-cats__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.35);
}

.dik-cats__media .dik-cats__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--dik-ease, ease);
}

.dik-cats__card:hover .dik-cats__img {
	transform: scale(1.05);
}

.dik-cats__content {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.1rem 1.15rem;
	flex: 1;
}

.dik-cats__name {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-cats__line {
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted, #a3a3ad);
	flex: 1;
}

.dik-cats__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.5rem;
}

.dik-cats__count {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent, #f5a623);
	padding: 0.25rem 0.7rem;
	border: 1px solid rgba(245, 166, 35, 0.35);
	border-radius: var(--dik-radius-pill, 999px);
	background: rgba(245, 166, 35, 0.08);
}

.dik-cats__arrow {
	color: var(--wp--preset--color--accent, #f5a623);
	font-size: 1.15rem;
	transition: transform 0.25s var(--dik-ease, ease);
}

.dik-cats__card:hover .dik-cats__arrow {
	transform: translateX(4px);
}

/* ============================================================
   Kontakt-side (replaces the Elementor Pro contact page)
   ============================================================ */
.dik-contact__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.9rem, 3.6vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast, #fff);
}

.dik-contact .dik-contact__lede {
	/* Beat the constrained-layout auto margins (they center the paragraph). */
	margin: 0 0 2rem;
	margin-left: 0;
	margin-right: auto;
	max-width: 62ch;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	line-height: 1.7;
}

.dik-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 1.5rem;
	align-items: start;
}

@media (max-width: 781px) {
	.dik-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.dik-contact__info {
	display: grid;
	gap: 1rem;
}

.dik-contact__card {
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius, 12px);
	background: var(--wp--preset--color--surface, #16161a);
}

.dik-contact__card h2 {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-contact__card p {
	margin: 0;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	line-height: 1.6;
}

.dik-contact__card a {
	color: var(--wp--preset--color--contrast, #fff);
	font-weight: 700;
	text-decoration: none;
}

.dik-contact__card a:hover,
.dik-contact__card a:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-contact__form-wrap {
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-top: 3px solid var(--wp--preset--color--accent, #f5a623);
	border-radius: var(--dik-radius, 12px);
	background: var(--wp--preset--color--surface, #16161a);
}

.dik-contact__form {
	display: grid;
	gap: 1rem;
}

.dik-contact__hp {
	position: absolute !important;
	left: -9999px;
}

.dik-contact__field {
	display: grid;
	gap: 0.35rem;
}

.dik-contact__field span {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}

.dik-contact__field input,
.dik-contact__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	background: rgba(0, 0, 0, 0.3);
	color: var(--wp--preset--color--contrast, #fff);
	font: inherit;
}

.dik-contact__field input:focus-visible,
.dik-contact__field textarea:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--accent, #f5a623);
}

.dik-contact__submit {
	justify-self: start;
	padding: 0.8rem 2rem;
	border: 0;
	border-radius: var(--dik-radius-pill, 999px);
	background: var(--dik-grad-brand);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s var(--dik-ease, ease), box-shadow 0.2s var(--dik-ease, ease);
}

.dik-contact__submit:hover,
.dik-contact__submit:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(239, 66, 46, 0.35);
}

.dik-contact__notice {
	margin: 0 0 1rem;
	padding: 0.85rem 1.1rem;
	border-radius: var(--dik-radius-sm, 8px);
	font-weight: 600;
}

.dik-contact__notice--ok {
	border: 1px solid rgba(245, 166, 35, 0.5);
	background: rgba(245, 166, 35, 0.12);
	color: var(--wp--preset--color--accent, #f5a623);
}

.dik-contact__notice--error {
	border: 1px solid rgba(255, 90, 69, 0.5);
	background: rgba(255, 90, 69, 0.1);
	color: var(--wp--preset--color--brand-bright, #ff5a45);
}

/* ============================================================
   Product reviews (WooCommerce reviews restyled on-brand)
   ============================================================ */
/* Woo's inner "Anmeldelser (n)" heading duplicates the section header. */
.dik-pdp-wcreviews .woocommerce-Reviews-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Two columns on desktop: reviews left, form right (form first when empty). */
.dik-pdp-wcreviews #reviews {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 1.25rem;
	align-items: start;
}
@media (max-width: 880px) {
	.dik-pdp-wcreviews #reviews {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Review list → testimonial-style cards. */
.dik-pdp-wcreviews ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}
.dik-pdp-wcreviews ol.commentlist li {
	margin: 0;
}
.dik-pdp-wcreviews ol.commentlist .comment_container {
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius, 12px);
	padding: 1.1rem 1.25rem;
}
.dik-pdp-wcreviews ol.commentlist img.avatar {
	display: none; /* gravatar mystery-man adds noise, not trust */
}
/* Specificity matches Woo's own `.woocommerce #reviews #comments …` border
   rule — plain `.dik-pdp-wcreviews .comment-text` loses to it. */
.dik-pdp-wcreviews #reviews #comments ol.commentlist li .comment-text {
	margin: 0;
	border: 0;
	padding: 0;
	float: none;
	width: auto;
}
.dik-pdp-wcreviews .comment-text .star-rating {
	float: none;
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
}
.dik-pdp-wcreviews .comment-text .meta {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-pdp-wcreviews .comment-text .meta strong {
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}
.dik-pdp-wcreviews .woocommerce-review__verified {
	font-size: 0.78rem;
	color: var(--wp--preset--color--accent, #f5a623);
}
.dik-pdp-wcreviews .comment-text .description p {
	margin: 0;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	line-height: 1.6;
}
.dik-pdp-wcreviews .woocommerce-noreviews {
	margin: 0;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* Review form card. */
.dik-pdp-wcreviews #review_form_wrapper {
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius, 12px);
	padding: 1.25rem 1.4rem;
}
.dik-pdp-wcreviews .comment-reply-title {
	display: block;
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #fff);
}
.dik-pdp-wcreviews .comment-form label {
	display: block;
	margin: 0 0 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-pdp-wcreviews .comment-form p {
	margin: 0 0 0.9rem;
}
.dik-pdp-wcreviews .comment-form input[type="text"],
.dik-pdp-wcreviews .comment-form input[type="email"],
.dik-pdp-wcreviews .comment-form textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-sm, 8px);
	background: var(--wp--preset--color--base, #0a0a0c);
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	font: inherit;
	box-sizing: border-box;
}
.dik-pdp-wcreviews .comment-form input:focus,
.dik-pdp-wcreviews .comment-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent, #f5a623);
	outline-offset: 1px;
	border-color: transparent;
}
.dik-pdp-wcreviews .comment-form-cookies-consent {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}
.dik-pdp-wcreviews .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	font-weight: 400;
}

/* Woo's JS star picker (p.stars): gold, comfortably tappable. */
.dik-pdp-wcreviews p.stars a {
	color: var(--wp--preset--color--accent, #f5a623);
	font-size: 1.3rem;
}
.dik-pdp-wcreviews p.stars a:hover ~ a::before {
	color: var(--wp--preset--color--border, #2e2e36);
}

/* Submit = the shared gradient CTA look. */
.dik-pdp-wcreviews .form-submit .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.6rem;
	border: 0;
	border-radius: var(--dik-radius-pill, 999px);
	background: var(--dik-grad-brand, linear-gradient(90deg, #c8301f 0%, #ef422e 45%, #f5a623 100%));
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	transition: filter 0.2s var(--dik-ease);
}
.dik-pdp-wcreviews .form-submit .submit:hover {
	filter: brightness(1.08);
}

/* =========================================================================
   POLISH PASS 7 (owner mobile sweep, 2026-07-16) — Part A: the mini-cart
   drawer (header basket's ajax cart). The Mini-Cart block shipped with raw
   defaults: theme-red product links, flat-red checkout button, full product
   descriptions per line. Reskinned to the brand system; Danish labels live in
   parts/mini-cart.html; the "Du sparer" row comes from assets/js/mini-cart.js.
   ========================================================================= */

/* Product name: white, gold on hover — never the raw red link color. */
.wc-block-mini-cart__drawer .wc-block-components-product-name {
	color: var(--wp--preset--color--contrast, #fff);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}
.wc-block-mini-cart__drawer .wc-block-components-product-name:hover,
.wc-block-mini-cart__drawer .wc-block-components-product-name:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623);
}

/* Long descriptions / spec bullets per line are noise in a drawer. */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata {
	display: none;
}

/* Item thumbnails: match the theme's rounded media. */
.wc-block-mini-cart__drawer .wc-block-cart-item__image img {
	border-radius: var(--dik-radius-sm, 8px);
}

/* "Spar X kr." line badge: the gold chip used across the shop, not grey. */
.wc-block-mini-cart__drawer .wc-block-components-sale-badge {
	background: rgba(245, 166, 35, 0.12);
	border: 1px solid rgba(245, 166, 35, 0.45);
	border-radius: var(--dik-radius-pill, 999px);
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 700;
}

/* "Du sparer" totals row (injected by mini-cart.js) above the subtotal.
   NO horizontal padding: the footer block already insets its rows 16px —
   doubling it shoved the label 16px right of "Subtotal" and stopped the
   amount 16px short of the subtotal amount (owner: rows not aligned). */
.wc-block-mini-cart__drawer .dik-mc-savings {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.35rem 0 0;
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 700;
}

/* Footer buttons: gradient primary for the checkout, quiet outline for the
   cart link — the block default was flat brand-red (rejected look). */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout {
	background: var(--dik-grad-brand, linear-gradient(90deg, #c8301f 0%, #ef422e 45%, #f5a623 100%));
	border: 0;
	border-radius: var(--dik-radius-pill, 999px);
	color: #fff;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	transition: filter 0.2s var(--dik-ease);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover {
	filter: brightness(1.08);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart {
	background: transparent;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-pill, 999px);
	color: var(--wp--preset--color--contrast, #fff);
	font-weight: 600;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart:hover {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623);
}

/* Empty state: give the "Se fyrværkeriet" button the gradient CTA too. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button {
	background: var(--dik-grad-brand, linear-gradient(90deg, #c8301f 0%, #ef422e 45%, #f5a623 100%));
	border: 0;
	border-radius: var(--dik-radius-pill, 999px);
	color: #fff;
	font-weight: 700;
}

/* ---- Part B: PDP buy-box rhythm. The summary is a flex column with its own
   gap, but price / "Spar" badge / availability each ALSO carried ~24px bottom
   margins (plugin + UA defaults the earlier margin:0 didn't reliably beat), so
   price → stock line → add-to-cart spread over ~220px (owner: "too big").
   Zero the margins hard; the flex gap is the single source of rhythm. ---- */
.dik-single-product div.product > .summary > .price,
.dik-single-product div.product > .summary > .dik-pdp-save,
.dik-single-product div.product > .summary > .dik-pdp-availability {
	margin-block: 0 !important;
}
.dik-single-product div.product > .summary > form.cart {
	margin-top: 0;
}

/* ---- Part C: comparison table (owner): columns sized to their content came
   out visibly unequal, and long product names wrapped to 4-5 lines. Fixed
   layout shares the width equally between product columns; the spec-label
   column keeps a set width; names clamp to 2 lines (full name on the linked
   product page; the thumbnail + price still identify the item). ---- */
.dik-compare__table {
	table-layout: fixed;
	/* Readable floor per product column before the wrapper starts scrolling. */
	min-width: calc(110px + 150px * var(--dik-cmp-cols, 3));
}
.dik-compare__table .dik-compare__spec-col {
	width: 110px;
}
.dik-compare__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Fixed 110px label column: let long spec labels wrap instead of nowrap-
   overflowing into the first product column. */
.dik-compare__table tbody th[scope="row"] {
	white-space: normal;
}

/* ---- Part D: mobile filter drawer. On phones the archive filter bar was four
   rows of chips before the first product; it now collapses behind a "Filtrér"
   button into a bottom sheet (filter-drawer.js). Desktop and no-JS keep the
   inline bar — everything here is gated on the .dik-js head class + width. ---- */

/* Drawer chrome is invisible wherever the bar renders inline. */
.dik-filters-mobilebar,
.dik-archive-filters__head,
.dik-archive-filters__done,
.dik-filters-backdrop {
	display: none;
}

/* Scroll-lock while the drawer is open. */
.dik-noscroll {
	overflow: hidden;
}

@media (max-width: 781px) {
	.dik-js .dik-filters-mobilebar {
		display: flex;
		margin: 0 0 0.9rem;
	}
	.dik-js .dik-filters-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.55rem 1.1rem;
		border: 1px solid var(--wp--preset--color--border, #2e2e36);
		border-radius: var(--dik-radius-pill, 999px);
		background: var(--wp--preset--color--surface, #16161a);
		color: var(--wp--preset--color--contrast, #fff);
		font: inherit;
		font-weight: 700;
		font-size: 0.9rem;
		cursor: pointer;
	}
	.dik-js .dik-filters-btn svg {
		color: var(--wp--preset--color--accent, #f5a623);
	}
	.dik-js .dik-filters-btn__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.35rem;
		height: 1.35rem;
		padding: 0 0.3rem;
		border-radius: var(--dik-radius-pill, 999px);
		background: var(--wp--preset--color--accent, #f5a623);
		color: #0a0a0c;
		font-size: 0.75rem;
		font-weight: 800;
	}

	/* The inline bar becomes the off-canvas bottom sheet. z-index sits above
	   the compare FAB (950), which otherwise intercepts taps on the sheet. */
	.dik-js .dik-archive-filters {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 960;
		margin: 0;
		max-height: 82dvh;
		overflow-y: auto;
		padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
		background: var(--wp--preset--color--base, #0a0a0c);
		border-top: 1px solid var(--wp--preset--color--border, #2e2e36);
		border-radius: 18px 18px 0 0;
		box-shadow: var(--dik-shadow-lg, 0 -20px 40px rgba(0, 0, 0, 0.55));
		transform: translateY(103%);
		visibility: hidden;
		transition: transform 0.28s var(--dik-ease), visibility 0s linear 0.28s;
	}
	.dik-js .dik-archive-filters.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.28s var(--dik-ease);
	}

	.dik-js .dik-archive-filters__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0.35rem;
	}
	.dik-js .dik-archive-filters__title {
		font-size: 1.1rem;
		font-weight: 800;
		color: var(--wp--preset--color--contrast, #fff);
	}
	.dik-js .dik-archive-filters__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		border: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--surface, #16161a);
		color: var(--wp--preset--color--contrast, #fff);
		font-size: 1.35rem;
		line-height: 1;
		cursor: pointer;
	}

	/* Inside the sheet the category row wraps like the others — the inline
	   bar's horizontal scroller makes no sense in a full-width drawer. */
	.dik-js .dik-archive-filters .dik-archive-filters__row--cats {
		flex-wrap: wrap;
		overflow-x: visible;
	}

	.dik-js .dik-archive-filters__done {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 1rem;
		padding: 0.8rem 1rem;
		border: 0;
		border-radius: var(--dik-radius-pill, 999px);
		background: var(--dik-grad-brand, linear-gradient(90deg, #c8301f 0%, #ef422e 45%, #f5a623 100%));
		color: #fff;
		font: inherit;
		font-weight: 700;
		cursor: pointer;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	}

	.dik-js .dik-filters-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 959;
		background: rgba(0, 0, 0, 0.55);
	}
	.dik-js .dik-filters-backdrop[hidden] {
		display: none;
	}
}

/* ---- Part E: homepage on phones (owner sweep). Six fixes in one block:
   hero CTA text wrapped inside its half-width pill; product-slider cards
   filled the whole viewport; the "Hvorfor vælge" tiles were huge with no
   visible gap; the newsletter field/button relationship broke; the category
   cards ran ~490px tall each; the season-notice "●" orphaned on its own line. ---- */

/* Season notice: the decorative dot wrapped onto its own line — drop it. */
@media (max-width: 640px) {
	.dik-notice-bar__icon {
		display: none;
	}
}

@media (max-width: 480px) {
	/* Hero CTAs: full-width stacked pills — side-by-side halves forced
	   "Shop Fyrværkeri" onto two lines at 390px. */
	.dik-hero__cta {
		flex-wrap: wrap;
	}
	.dik-hero__cta .wp-block-button {
		flex-basis: 100%;
	}

	/* Newsletter: field + button share one row; the full-width field with a
	   floating button underneath read as a broken form. */
	.dik-newsletter__form {
		flex-wrap: nowrap;
	}
	.dik-newsletter__field {
		flex: 1 1 auto;
		min-width: 0;
	}
	.dik-newsletter__submit {
		flex: 0 0 auto;
		padding-inline: 1.15rem;
	}
}

/* Product scrollers (Populære produkter / related / recently viewed share
   .dik-popular__cell): show ~1.6 cards instead of one viewport-filling card. */
@media (max-width: 599px) {
	.dik-popular__cell {
		flex-basis: 62%;
	}
}

/* "Hvorfor vælge" tiles: compact icon-left rows with a real gap — the four
   stacked full-size tiles ran ~1300px of scroll. */
@media (max-width: 600px) {
	.dik-why__grid {
		gap: 0.8rem;
	}
	.dik-why__item {
		display: grid;
		grid-template-columns: 44px 1fr;
		grid-template-rows: auto auto;
		column-gap: 0.9rem;
		align-items: start;
		text-align: left;
		padding: 1rem 1.1rem;
	}
	.dik-why__icon {
		grid-row: 1 / span 2;
		width: 44px;
		height: 44px;
		margin-bottom: 0;
	}
	.dik-why__icon svg {
		width: 22px;
		height: 22px;
	}
	.dik-why__item-title {
		margin: 0 0 0.2rem;
		font-size: 1.02rem;
	}
	.dik-why__item-text {
		font-size: 0.9rem;
	}
}

/* Category cards: image-left compact rows (the stacked full-media cards ran
   ~490px each — 1.900px before the fold ended). Description yields to the
   name + count; the category page carries the long text. */
@media (max-width: 599px) {
	.dik-cats__grid {
		gap: 0.8rem;
	}
	.dik-cats__card {
		display: grid;
		grid-template-columns: 96px 1fr;
	}
	.dik-cats__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 96px;
	}
	.dik-cats__content {
		padding: 0.8rem 0.95rem;
		gap: 0.2rem;
	}
	.dik-cats__name {
		font-size: 1rem;
	}
	.dik-cats__line {
		display: none;
	}
	.dik-cats__meta {
		margin-top: 0.3rem;
	}
}

/* ---- Part F (owner round 2, 2026-07-16): the mini-cart drawer could be
   panned sideways on phones — the items table's totals column ("Spar …"-badge
   nowrap min-content) forced the table wider than the drawer at ≤360px.
   Fixed table layout + set edge-column widths remove the cause; overflow-x
   clips are the guarantee (vertical scrolling untouched). ---- */
.wc-block-mini-cart__drawer,
.wc-block-mini-cart__drawer .wc-block-components-drawer__content,
.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
	overflow-x: hidden;
}
.wc-block-mini-cart__drawer table.wc-block-cart-items {
	width: 100%;
	table-layout: fixed;
}
.wc-block-mini-cart__drawer table.wc-block-cart-items th:first-child,
.wc-block-mini-cart__drawer table.wc-block-cart-items td.wc-block-cart-item__image {
	width: 64px;
}
.wc-block-mini-cart__drawer table.wc-block-cart-items th:last-child,
.wc-block-mini-cart__drawer table.wc-block-cart-items td.wc-block-cart-item__total {
	width: 96px;
}
/* The gold Spar-chip must be allowed to wrap inside the 96px totals column. */
.wc-block-mini-cart__drawer .wc-block-components-sale-badge {
	white-space: normal;
	text-align: center;
	line-height: 1.3;
	font-size: 0.72rem;
}

/* ---------------------------------------------------------------------------
 * Bundle upsell hint (PDP): "Denne vare indgår i … — spar X kr."
 * ------------------------------------------------------------------------- */
.dik-bundle-hint {
	display: grid;
	gap: 0.5rem;
	margin-block: 1rem 0;
}
.dik-bundle-hint__row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.85rem;
	border: var(--dik-border-hairline);
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #1c1c22);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease;
}
.dik-bundle-hint__row:hover,
.dik-bundle-hint__row:focus-visible {
	border-color: var(--dik-border-card-hover, rgba(245, 166, 35, 0.45));
}
.dik-bundle-hint__icon {
	font-size: 1.15rem;
	line-height: 1;
}
.dik-bundle-hint__text {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}
.dik-bundle-hint__lead {
	font-size: 0.85rem;
	line-height: 1.3;
}
.dik-bundle-hint__meta {
	font-size: 0.78rem;
	opacity: 0.85;
}
.dik-bundle-hint__save {
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 700;
}
.dik-bundle-hint__arrow {
	margin-left: auto;
	opacity: 0.6;
}

/* ---------------------------------------------------------------------------
 * Filter bar decluttering: category chips beyond the first five collapse
 * behind the "+N flere" button (JS-gated — no-JS visitors see every chip).
 * ------------------------------------------------------------------------- */
.dik-js .dik-archive-filters__row--cats:not(.is-expanded) .dik-filter-chip--extra {
	display: none;
}
html:not(.dik-js) .dik-filter-chip--more {
	display: none;
}
.dik-filter-chip--more {
	background: transparent;
	border-style: dashed;
	cursor: pointer;
	font: inherit;
	font-size: inherit;
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-filter-chip--more:hover,
.dik-filter-chip--more:focus-visible {
	color: var(--wp--preset--color--accent, #f5a623);
	border-color: var(--wp--preset--color--accent, #f5a623);
}

/* ---------------------------------------------------------------------------
 * Filters as a slide-in on EVERY screen size (owner): desktop shows the same
 * "Filtrér" button and the bar arrives as a structured right-side panel.
 * (≤781px keeps the bottom sheet defined above.)
 * ------------------------------------------------------------------------- */
@media (min-width: 782px) {
	.dik-js .dik-filters-mobilebar {
		display: flex;
		margin: 0 0 1rem;
	}
	.dik-js .dik-filters-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.55rem 1.1rem;
		border: 1px solid var(--wp--preset--color--border, #2e2e36);
		border-radius: var(--dik-radius-pill, 999px);
		background: var(--wp--preset--color--surface, #16161a);
		color: var(--wp--preset--color--contrast, #fff);
		font: inherit;
		font-weight: 700;
		font-size: 0.9rem;
		cursor: pointer;
	}
	.dik-js .dik-filters-btn:hover {
		border-color: var(--wp--preset--color--accent, #f5a623);
	}
	.dik-js .dik-filters-btn svg {
		color: var(--wp--preset--color--accent, #f5a623);
	}
	.dik-js .dik-filters-btn__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.35rem;
		height: 1.35rem;
		padding: 0 0.3rem;
		border-radius: var(--dik-radius-pill, 999px);
		background: var(--wp--preset--color--accent, #f5a623);
		color: #0a0a0c;
		font-size: 0.75rem;
		font-weight: 800;
	}

	.dik-js .dik-archive-filters {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 960;
		margin: 0;
		width: min(420px, 92vw);
		max-height: none;
		overflow-y: auto;
		padding: 1.25rem 1.5rem 1.5rem;
		background: var(--wp--preset--color--base, #0a0a0c);
		border-left: 1px solid var(--wp--preset--color--border, #2e2e36);
		box-shadow: -24px 0 48px rgba(0, 0, 0, 0.5);
		transform: translateX(103%);
		visibility: hidden;
		transition: transform 0.28s var(--dik-ease), visibility 0s linear 0.28s;
	}
	.dik-js .dik-archive-filters.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.28s var(--dik-ease);
	}
	.dik-js .dik-archive-filters__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0.5rem;
	}
	.dik-js .dik-archive-filters__title {
		font-size: 1.1rem;
		font-weight: 800;
		color: var(--wp--preset--color--contrast, #fff);
	}
	.dik-js .dik-archive-filters__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		border: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--surface, #16161a);
		color: var(--wp--preset--color--contrast, #fff);
		font-size: 1.35rem;
		line-height: 1;
		cursor: pointer;
	}
	.dik-js .dik-archive-filters .dik-archive-filters__row--cats {
		flex-wrap: wrap;
		overflow-x: visible;
	}
	.dik-js .dik-archive-filters__done {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 1.25rem;
		padding: 0.8rem 1rem;
		border: 0;
		border-radius: var(--dik-radius-pill, 999px);
		background: var(--dik-grad-brand, linear-gradient(90deg, #c8301f 0%, #ef422e 45%, #f5a623 100%));
		color: #fff;
		font: inherit;
		font-weight: 700;
		cursor: pointer;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	}
	.dik-js .dik-filters-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 959;
		background: rgba(0, 0, 0, 0.55);
	}
	.dik-js .dik-filters-backdrop[hidden] {
		display: none;
	}
}

/* Inside the slide-in (any size): each group reads as a section — the label
   takes its own line above its chips. The no-JS inline bar is untouched. */
.dik-js .dik-archive-filters .dik-archive-filters__row {
	flex-wrap: wrap;
}
.dik-js .dik-archive-filters .dik-archive-filters__label {
	flex-basis: 100%;
	margin: 0.9rem 0 0.1rem;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* Full-height side panel: grid must pack from the top — otherwise the rows
   spread over the whole height and the Vis-resultater button balloons. */
@media (min-width: 782px) {
	.dik-js .dik-archive-filters {
		align-content: start;
	}
	.dik-js .dik-archive-filters__done {
		margin-top: 1.25rem;
	}
}

/* "Kun varer på lager" lives beside the Filtrér button (owner) — the copy
   inside the slide-in panel is hidden for JS visitors; no-JS keeps the
   inline-bar copy and never renders the toolbar. */
.dik-js .dik-archive-filters .dik-instock-toggle {
	display: none;
}
.dik-instock-toggle--bar {
	display: none;
}
.dik-js .dik-filters-mobilebar .dik-instock-toggle--bar {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

/* ---------------------------------------------------------------------------
 * Card badges: Bestseller / Kun X tilbage / video marker + notify CTA.
 * ------------------------------------------------------------------------- */
.dik-product-card__badge--best {
	background: var(--wp--preset--color--accent, #f5a623);
	color: #0a0a0c;
}
.dik-product-card__badge--scarce {
	left: auto;
	right: 0.6rem;
	background: var(--wp--preset--color--brand, #ef422e);
	color: #fff;
}
.dik-product-card__badge--video {
	top: auto;
	bottom: 0.6rem;
	left: 0.6rem;
	right: auto;
	background: rgba(10, 10, 12, 0.78);
	color: #fff;
	font-weight: 600;
}
.dik-card-cta--notify {
	background: transparent;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	color: var(--wp--preset--color--contrast-soft, #ededf2);
	text-decoration: none;
	text-align: center;
}
.dik-card-cta--notify:hover,
.dik-card-cta--notify:focus-visible {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623);
}

/* Thank-you review nudge + guide inline products + empty-search fallback. */
.dik-thankyou-review {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	border: var(--dik-border-hairline);
	border-radius: 12px;
	background: var(--wp--preset--color--surface, #16161a);
}
.dik-thankyou-review__icon {
	font-size: 1.4rem;
	line-height: 1.2;
}
.dik-thankyou-review p {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-guide-products {
	margin: 1.5rem 0;
}
.dik-search__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.75rem 0 1.5rem;
}
.dik-search__fallback {
	margin-top: 1rem;
}

/* Krudt-meter (PDP): NEM bar relative to the shop's most powerful product. */
.dik-nem-meter {
	margin-block: 0.9rem;
	display: grid;
	gap: 0.35rem;
}
.dik-nem-meter__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-nem-meter__value {
	font-size: 0.85rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--accent, #f5a623);
}
.dik-nem-meter__track {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface, #16161a);
	border: var(--dik-border-hairline);
	overflow: hidden;
}
.dik-nem-meter__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--dik-grad-brand, linear-gradient(90deg, #c8301f 0%, #ef422e 45%, #f5a623 100%));
}

/* Mini-cart drawer: bundle-swap hint above the totals. */
.dik-mc-bundlehint {
	display: block;
	margin: 0 0 0.5rem;
	padding: 0.55rem 0.75rem;
	border: 1px dashed var(--wp--preset--color--accent, #f5a623);
	border-radius: 8px;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast, #fff);
	text-decoration: none;
	background: rgba(245, 166, 35, 0.07);
}
.dik-mc-bundlehint:hover,
.dik-mc-bundlehint:focus-visible {
	background: rgba(245, 166, 35, 0.14);
}

/* ---------------------------------------------------------------------------
 * "Gem til nytår" favorites: heart toggle on cards, toast, list page.
 * ------------------------------------------------------------------------- */
.dik-fav-toggle {
	position: absolute;
	top: calc(0.6rem + 36px);
	left: 0.6rem;
	z-index: 2;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: 50%;
	background: rgba(10, 10, 12, 0.75);
	color: var(--wp--preset--color--muted, #a3a3ad);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.dik-fav-toggle:hover,
.dik-fav-toggle:focus-visible {
	color: var(--wp--preset--color--brand, #ef422e);
	border-color: var(--wp--preset--color--brand, #ef422e);
}
.dik-fav-toggle[aria-pressed="true"] {
	color: var(--wp--preset--color--brand, #ef422e);
	border-color: var(--wp--preset--color--brand, #ef422e);
}
.dik-fav-toggle[aria-pressed="true"] svg {
	fill: currentColor;
}
.dik-fav-toast {
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	transform: translate(-50%, 150%);
	z-index: 990;
	padding: 0.7rem 1.2rem;
	border-radius: var(--dik-radius-pill, 999px);
	background: var(--wp--preset--color--surface, #16161a);
	border: 1px solid var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--contrast, #fff);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	transition: transform 0.25s var(--dik-ease, ease);
	white-space: nowrap;
}
.dik-fav-toast.is-visible {
	transform: translate(-50%, 0);
}
.dik-favorites {
	margin-block: 1rem 2rem;
}
.dik-favorites__empty {
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-fav-grid {
	margin-block: 1rem;
}

/* "Byg dit nytårsshow" wizard. */
.dik-wizard {
	display: grid;
	gap: 1.5rem;
	margin-block: 1rem 2rem;
	max-width: 640px;
}
.dik-wizard__step {
	border: 0;
	padding: 0;
	margin: 0;
}
.dik-wizard__q {
	font-weight: 800;
	margin-bottom: 0.6rem;
}
.dik-wizard__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.dik-wizard__opt {
	padding: 0.65rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-pill, 999px);
	background: var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--contrast, #fff);
	font: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.dik-wizard__opt:hover {
	border-color: var(--wp--preset--color--accent, #f5a623);
}
.dik-wizard__opt[aria-pressed="true"] {
	border-color: var(--wp--preset--color--accent, #f5a623);
	background: rgba(245, 166, 35, 0.12);
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 700;
}
.dik-wizard__go {
	display: inline-block;
}

#dik-bis {
	scroll-margin-top: 140px;
}
.dik-nem-meter__scale {
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* Hero: wizard entry is a real button under the CTA pair (owner). */
.dik-hero__wizard {
	margin: 0.85rem 0 0;
}
.dik-hero__wizard-btn {
	display: inline-block;
	padding: 0.7rem 1.3rem;
	border: 1.5px solid rgba(245, 166, 35, 0.65);
	border-radius: var(--dik-radius-pill, 999px);
	background: rgba(245, 166, 35, 0.1);
	color: var(--wp--preset--color--accent, #f5a623);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dik-hero__wizard-btn:hover {
	background: rgba(245, 166, 35, 0.2);
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623);
}

/* Wizard modal (front page). */
.dik-wizard-modal {
	width: min(760px, 94vw);
	max-height: 88vh;
	overflow-y: auto;
	padding: 1.25rem 1.5rem 1.75rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: var(--dik-radius-lg, 20px);
	background: var(--wp--preset--color--base, #0e0e11);
	color: var(--wp--preset--color--contrast, #fff);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.dik-wizard-modal::backdrop {
	background: rgba(8, 8, 10, 0.7);
	backdrop-filter: none;
}
.dik-wizard-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}
.dik-wizard-modal__title {
	margin: 0;
	font-size: 1.35rem;
}
.dik-wizard-modal__close {
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	border-radius: 50%;
	background: var(--wp--preset--color--surface, #16161a);
	color: var(--wp--preset--color--contrast, #fff);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}
.dik-wizard-modal__close:hover {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623);
}
.dik-wizard-modal .dik-wizard {
	max-width: none;
	margin-block: 0.5rem 0;
}

/* Wizard result: summary chips + compact card grid + add-all. */
.dik-wizard__go:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.dik-wizard__summary {
	margin: 0.25rem 0 0.75rem;
	font-size: 1.02rem;
}
.dik-wizard__grid {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.75rem;
}
.dik-wizard__buy {
	margin: 1rem 0 0;
	display: grid;
	gap: 0.6rem;
}
.dik-wizard__savelist {
	width: 100%;
	text-align: center;
	background: transparent;
	border: 1.5px solid rgba(245, 166, 35, 0.65);
	color: var(--wp--preset--color--accent, #f5a623);
}
.dik-wizard__savelist:hover {
	background: rgba(245, 166, 35, 0.12);
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623);
}
a.dik-wizard__savelist--done {
	background: rgba(245, 166, 35, 0.15);
	text-decoration: none;
}
.dik-wizard__addall {
	width: 100%;
	text-align: center;
	background: var(--dik-grad-brand);
	border: 0;
}
.dik-wizard__addall:hover {
	background: var(--dik-grad-brand-hover);
}
.dik-wizard__note {
	margin: 0.75rem 0 0;
	font-size: 0.88rem;
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* Sold-out state in the buy-button position (preorder off). */
.dik-oos-cta {
	margin: 0.75rem 0 0.5rem;
}
.dik-oos-cta__btn {
	display: block;
	padding: 0.9rem 1.5rem;
	border-radius: var(--dik-radius-sm, 8px);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--wp--preset--color--border, #2e2e36);
	color: var(--wp--preset--color--muted, #a3a3ad);
	font-weight: 800;
	text-align: center;
	letter-spacing: 0.01em;
	cursor: not-allowed;
}

/* Bundle totals chip row (under the krudt-meter). */
.dik-bundle-totals {
	margin: 0.35rem 0 0.75rem;
	font-size: 0.92rem;
	color: var(--wp--preset--color--contrast-soft, #ededf2);
}
.dik-bundle-totals__label {
	color: var(--wp--preset--color--muted, #a3a3ad);
}
.dik-bundle-totals strong {
	color: var(--wp--preset--color--accent, #f5a623);
}

/* Sticky bar on sold-out PDPs: the CTA is the notify signup. */
a.dik-sticky-atc__btn {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* Header ♥ link to /favoritter/ with localStorage count badge. */
.dik-header-fav {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--wp--preset--color--contrast, #fff);
	text-decoration: none;
}
.dik-header-fav:hover,
.dik-header-fav:focus-visible {
	color: var(--wp--preset--color--brand, #ef422e);
}
.dik-header-fav__count {
	position: absolute;
	top: 0.1rem;
	right: -0.15rem;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--dik-grad-brand, #ef422e);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 1;
}

/* Search suggestions: the plugin hardcodes #444 on .dgwt-wcas-st — invisible
   on the dark panel. Rows keep their own colors; headlines go muted. */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-breadcrumbs {
	color: inherit;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline .dgwt-wcas-st {
	color: var(--wp--preset--color--muted, #a3a3ad);
}

/* --------------------------------------------------------------------------
 * Dagens tilbud (inc/daily-deals.php): scroller reuses .dik-popular; the
 * deals strip adds a gold eyebrow and a per-card "slutter om" chip.
 * ----------------------------------------------------------------------- */
.dik-deals__eyebrow {
	color: var(--wp--preset--color--gold, #f5a623);
}
.dik-deals__cell {
	display: flex;
	flex-direction: column;
}
.dik-deals__ends {
	margin: -0.85rem 0 0 0.75rem;
	position: relative;
	z-index: 1;
	align-self: flex-start;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: linear-gradient(90deg, #d92323, #f59a1a);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

/* PDP heart follows the compare structure (owner 2026-07-22): an inline icon
   button in the buy row [qty][Læg i kurv][⇄][♥] and in the sticky bar next to
   ⇄. Mirrors .dik-compare-toggle--inline; base .dik-fav-toggle supplies the
   heart fill states. */
.dik-fav-toggle.dik-fav-toggle--inline {
	position: relative;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	width: 3rem;
	min-height: 3rem;
	height: auto;
	padding: 0;
	border-radius: var(--dik-radius-sm, 8px);
	background: var(--wp--preset--color--surface, #16161a);
}
.dik-fav-toggle.dik-fav-toggle--inline:hover,
.dik-fav-toggle.dik-fav-toggle--inline:focus-visible {
	border-color: var(--wp--preset--color--accent, #f5a623);
	color: var(--wp--preset--color--accent, #f5a623);
}
.dik-fav-toggle.dik-sticky-atc__fav {
	width: 2.9rem;
	min-height: 2.9rem;
	background: transparent;
}
@media (max-width: 480px) {
	.dik-fav-toggle.dik-fav-toggle--inline {
		width: 2.7rem;
	}
}