SOURCE OF TRUTH

Arbejd kun i den aktuelle KNDev-System source/worktree.

- Test-builds, tidligere ZIP-filer og installerede shopfiler er reference/testmål, ikke source.
- Brug ikke gamle system-ZIPs som baseline for nye ændringer, medmindre opgaven eksplicit kræver sammenligning.
- Eksisterende worktree-ændringer fra andre opgaver må ikke overskrives eller normaliseres.


STRICT SCOPE & SAFETY RULES

- Ændr kun det, der er eksplicit nødvendigt for denne opgave.
- Rør ikke andre fungerende områder, styles, tokens, moduler eller flows.
- Shared tokens må ikke ændres bredt, hvis det påvirker områder uden for scope.
- Auditér hele diffen før afslutning.
- Fjern kun dokumenterede out-of-scope ændringer fra denne opgave.
- Brug aldrig bred git reset, git restore, checkout eller anden bred rollback.
- Eksisterende worktree-ændringer fra andre opgaver må ikke røres.

CUSTOMER OVERRIDE PROTECTION

- customer.css og customer.js er shop-specifikke override-filer.
- De må IKKE ændres, normaliseres, regenereres, erstattes eller overskrives, medmindre opgaven eksplicit nævner netop disse filer.
- Generiske KNDev-systemændringer skal implementeres i korrekte shared source-filer, ikke i customer.css/customer.js.
- customer.css/customer.js må IKKE inkluderes i generiske testpakker, modul-ZIPs eller release-payloads, medmindre opgaven eksplicit kræver det.
- System Updater skal bevare eksisterende customer.css/customer.js byte-for-byte.

TEST PACKAGE RULE

- En testpakke må kun indeholde de filer, der faktisk er nødvendige for den konkrete test.
- Brug ikke hele theme- eller module-tree som convenience-copy, hvis kun enkelte filer er ændret.
- Før test-ZIP afsluttes, list eksplicit alle inkluderede filer og verificér, at ingen shop-specifikke filer er med.
- customer.css og customer.js skal som standard være ekskluderet.

RELEASE RULE

- Ingen build/release før scope-audit er grøn.
- Før release skal alle ændringer i payloaden kunne forklares direkte af opgavens scope.
- Hvis en fil indeholder både in-scope og out-of-scope ændringer, STOP og rapportér det før build.

KNDev Performance – afleveringsstandard

En shop må først betragtes som afleveringsklar, når performance er kontrolleret på mindst:

Forside
Kategoriside
Produktside
Checkout-entry / kurv

Minimumsmål:

Desktop Lighthouse Performance: 90+
Mobile Lighthouse Performance: helst 75+, og højere hvor realistisk muligt
LCP: under 2,5 sek.
CLS: under 0,1
TBT: helst under 200–300 ms
Ingen kritiske JS-fejl
Ingen 4xx/5xx på centrale assets
Ingen unødigt render-blocking scripts
Ingen store layout shifts
Above-the-fold billeder korrekt optimeret
Tredjeparts scripts vurderet og dokumenteret

Hvis desktop ligger under 90:

identificér årsagen
dokumentér om det skyldes KNDev-kode eller tredjepart
løs egne performanceproblemer før aflevering
accepter kun lavere score, hvis begrænsningen er dokumenteret og uden for KNDev-kontrol

Fast KNDev-regel:

Komponenter må kun initialiseres, hvis deres markup findes på siden
Ikke-kritisk JS skal defer/lazy/idle-loades, når det er sikkert
Globale DOM-scans skal minimeres
Ingen modul må lave tung init på alle sider uden behov
customer.css/customer.js må ikke bruges til generiske performance-fixes
Performanceændringer skal regressionstestes mod menu, søgning, kurv, filtre, produktkort og checkout

Afleveringsrapport bør mindst indeholde:

Lighthouse før/efter
FCP/LCP/TBT/CLS
eventuelle resterende tredjepartsbegrænsninger
hvilke optimeringer der er udført
hvilke sider der er testet

Jeg ville gøre denne standard til en fast del af jeres KNDev release-/go-live-checkliste.

/********** MENU COLOR FIX - START **********/
/* =========================================================
DESKTOP
========================================================= */

@media (min-width: 992px) {

/* -------------------------------------------------------
NORMAL DESKTOP NAVIGATION
Dark green bar + white text/icons
Only before sticky state
------------------------------------------------------- */

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full {
background: var(--knd-color-primary)!important;
color: #ffffff !important;
}

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
.knd-menu__list--level-0
> .knd-menu__item
> .knd-menu__link,

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
.knd-menu__list--level-0
> .knd-menu__item
> .knd-menu__link
.knd-menu__label {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
.knd-menu__list--level-0
> .knd-menu__item
> .knd-menu__toggle,

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
.knd-menu__list--level-0
> .knd-menu__item
> .knd-menu__toggle
*,

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
.knd-menu__list--level-0
> .knd-menu__item
> .knd-menu__link
svg,

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
.knd-menu__list--level-0
> .knd-menu__item
> .knd-menu__link
.material-icons {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
fill: currentColor !important;
stroke: currentColor !important;
}

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
.knd-menu__list--level-0
> .knd-menu__item:hover
> .knd-menu__link,

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
.knd-menu__list--level-0
> .knd-menu__item:hover
> .knd-menu__link
.knd-menu__label,

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
.knd-menu__list--level-0
> .knd-menu__item:hover
> .knd-menu__toggle {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}


/* -------------------------------------------------------
DESKTOP DROPDOWN / MEGA MENU
Light surface + dark content
------------------------------------------------------- */

.knd-theme-header__nav-full
.knd-menu__mega,

.knd-theme-header__nav-full
.knd-menu__panel {
color: #2B2B2B !important;
}

.knd-theme-header__nav-full
.knd-menu__mega
a,

.knd-theme-header__nav-full
.knd-menu__mega
.knd-menu__link,

.knd-theme-header__nav-full
.knd-menu__mega
.knd-menu__label,

.knd-theme-header__nav-full
.knd-menu__mega
button,

.knd-theme-header__nav-full
.knd-menu__mega
svg,

.knd-theme-header__nav-full
.knd-menu__mega
.material-icons,

.knd-theme-header__nav-full
.knd-menu__panel
a,

.knd-theme-header__nav-full
.knd-menu__panel
.knd-menu__link,

.knd-theme-header__nav-full
.knd-menu__panel
.knd-menu__label {
color: #2B2B2B !important;
-webkit-text-fill-color: #2B2B2B !important;
fill: currentColor !important;
stroke: currentColor !important;
}

.knd-theme-header__nav-full
.knd-menu__mega
a:hover,

.knd-theme-header__nav-full
.knd-menu__panel
a:hover {
color: #4F7460 !important;
-webkit-text-fill-color: #4F7460 !important;
}
.knd-menu__toggle-chevron {
color: #fff!important;
}

/* -------------------------------------------------------
DESKTOP STICKY
------------------------------------------------------- */

body.knd-hf-stuck
.knd-hf-sticky-active {
color: var(--knd-hf-sticky-text, #111111) !important;
}

body.knd-hf-stuck
.knd-hf-sticky-active
:is(
a,
button,
.knd-menu__link,
.knd-menu__label,
.knd-menu__toggle,
.material-icons
) {
color: var(--knd-hf-sticky-text, #111111) !important;
-webkit-text-fill-color: var(--knd-hf-sticky-text, #111111) !important;
}

body.knd-hf-stuck
.knd-hf-sticky-active
svg,

body.knd-hf-stuck
.knd-hf-sticky-active
svg * {
color: var(--knd-hf-sticky-text, #111111) !important;
fill: currentColor !important;
stroke: currentColor !important;
}

body.knd-hf-stuck
.knd-hf-sticky-active
:is(
.knd-menu__mega,
.knd-menu__panel
)
:is(
a,
button,
.knd-menu__link,
.knd-menu__label,
.material-icons
) {
color: #2B2B2B !important;
-webkit-text-fill-color: #2B2B2B !important;
}
}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 991.98px) {

/* -------------------------------------------------------
NORMAL MOBILE HEADER
------------------------------------------------------- */

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full {
color: #2B2B2B !important;
}

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
:is(
a,
button,
.knd-menu__link,
.knd-menu__label,
.knd-menu__toggle,
.material-icons
) {
color: #2B2B2B !important;
-webkit-text-fill-color: #2B2B2B !important;
}

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
svg,

body:not(.knd-hf-stuck)
.knd-theme-header__nav-full
svg * {
color: #2B2B2B !important;
fill: currentColor !important;
stroke: currentColor !important;
}


/* -------------------------------------------------------
NORMAL MOBILE – SEARCH PRO

KNDev header CSS has strong nav-full rules.
Override the actual Search Pro trigger explicitly.
------------------------------------------------------- */

html body:not(.knd-hf-stuck)
.knd-theme-header
.knd-searchpro-trigger,

html body:not(.knd-hf-stuck)
#header
.knd-searchpro-trigger,

html body:not(.knd-hf-stuck)
.knd-theme-header
.knd-searchpro-trigger
*,

html body:not(.knd-hf-stuck)
#header
.knd-searchpro-trigger
* {
color: #2B2B2B !important;
-webkit-text-fill-color: #2B2B2B !important;
}

html body:not(.knd-hf-stuck)
.knd-theme-header
.knd-searchpro-trigger
svg,

html body:not(.knd-hf-stuck)
.knd-theme-header
.knd-searchpro-trigger
svg *,

html body:not(.knd-hf-stuck)
#header
.knd-searchpro-trigger
svg,

html body:not(.knd-hf-stuck)
#header
.knd-searchpro-trigger
svg * {
color: #2B2B2B !important;
fill: currentColor !important;
stroke: currentColor !important;
}


/* -------------------------------------------------------
MOBILE STICKY
------------------------------------------------------- */

body.knd-hf-stuck
.knd-hf-sticky-active
:is(
a,
button,
.knd-menu__link,
.knd-menu__label,
.knd-menu__toggle,
.material-icons
) {
color: var(--knd-hf-sticky-text, #111111) !important;
-webkit-text-fill-color: var(--knd-hf-sticky-text, #111111) !important;
}

body.knd-hf-stuck
.knd-hf-sticky-active
svg,

body.knd-hf-stuck
.knd-hf-sticky-active
svg * {
color: var(--knd-hf-sticky-text, #111111) !important;
fill: currentColor !important;
stroke: currentColor !important;
}


/* =======================================================
MOBILE DRAWER / SIDEPANEL

Drawer must ALWAYS be light/dark, regardless of whether
it was opened from normal or sticky header.
======================================================= */

html body
.knd-menudrawer,

html body
.knd-menu__mobile,

html body
.knd-menudrawer__body {
background: #ffffff !important;
color: #2B2B2B !important;
}


/* All standard drawer text/buttons */
html body
.knd-menudrawer
:is(
a,
button,
span,
.knd-menu__link,
.knd-menu__label,
.material-icons
) {
color: #2B2B2B !important;
-webkit-text-fill-color: #2B2B2B !important;
}


/* All drawer SVG */
html body
.knd-menudrawer
svg,

html body
.knd-menudrawer
svg * {
color: #2B2B2B !important;
fill: currentColor !important;
stroke: currentColor !important;
}


/* -------------------------------------------------------
DRAWER CLOSE BUTTON / X

Hit header buttons explicitly because X lives in
.knd-menudrawer__header.
------------------------------------------------------- */

html body
.knd-menudrawer
.knd-menudrawer__header
button,

html body
.knd-menudrawer
.knd-menudrawer__header
button *,

html body
.knd-menudrawer
button[aria-label*="Luk"],

html body
.knd-menudrawer
button[aria-label*="Close"],

html body
.knd-menudrawer
button[aria-label*="luk"],

html body
.knd-menudrawer
button[aria-label*="close"] {
color: #2B2B2B !important;
-webkit-text-fill-color: #2B2B2B !important;
}

html body
.knd-menudrawer
.knd-menudrawer__header
button
svg,

html body
.knd-menudrawer
.knd-menudrawer__header
button
svg *,

html body
.knd-menudrawer
button[aria-label*="Luk"]
svg,

html body
.knd-menudrawer
button[aria-label*="Luk"]
svg *,

html body
.knd-menudrawer
button[aria-label*="Close"]
svg,

html body
.knd-menudrawer
button[aria-label*="Close"]
svg * {
color: #2B2B2B !important;
fill: currentColor !important;
stroke: currentColor !important;
}


/* -------------------------------------------------------
DRAWER SUBMENU TOGGLES / CHEVRONS
------------------------------------------------------- */

html body
.knd-menudrawer
button.knd-menu__toggle,

html body
.knd-menudrawer
button.knd-menu__toggle
*,

html body
.knd-menudrawer
.knd-menu__toggle,

html body
.knd-menudrawer
.knd-menu__toggle
* {
color: var(--knd-link-color) !important;
-webkit-text-fill-color: var(--knd-link-color) !important;
}

html body
.knd-menudrawer
button.knd-menu__toggle
svg,

html body
.knd-menudrawer
button.knd-menu__toggle
svg *,

html body
.knd-menudrawer
.knd-menu__toggle
svg,

html body
.knd-menudrawer
.knd-menu__toggle
svg * {
color: #2B2B2B !important;
fill: currentColor !important;
stroke: currentColor !important;
}

html body .knd-theme-header .knd-zone--nav-fullwidth :where(a, button:not([name]), svg, .material-icons), html body #header .knd-zone--nav-fullwidth :where(a, button:not([name]), svg, .material-icons) {
color: #2B2B2B !important;
}

}
/* =========================================================
MOBILE MENU CLOSE
========================================================= */

@media (max-width: 991.98px) {

html body
.knd-menu__panel--open
.knd-menudrawer__header
button.knd-menu__close,

html body
.knd-menu__panel--open
.knd-menudrawer__header
button.knd-menu__close
> span[aria-hidden="true"] {
color: #2B2B2B !important;
-webkit-text-fill-color: #2B2B2B !important;
}

}
.page-category .category__cover {
display: none!important;
}
html body .knd-product-card .knd-product-card__meta-row {
display: none!important;
}

@media (min-width: 992px) {
body:not(.knd-hf-stuck) .knd-menu-shell--desktop .knd-menu__link,
body:not(.knd-hf-stuck) .knd-menu-shell--desktop .knd-menu__link--heading {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}

body:not(.knd-hf-stuck) .knd-menu-shell--desktop .knd-menu__icon,
body:not(.knd-hf-stuck) .knd-menu-shell--desktop .knd-menu__icon::before,
body:not(.knd-hf-stuck) .knd-menu-shell--desktop .knd-menu__toggle,
body:not(.knd-hf-stuck) .knd-menu-shell--desktop .knd-menu__chevron {
color: #fff !important;
}
}
/********** MENU COLOR FIX - END **********/