/*
 * njordcraft-components.css — Komponent-CSS for njordcraft
 * Design-direction §2: knapper, kategori-kort, produkt-kort, header/nav,
 * hero, formularfelter, produktside-layout.
 * E1.2 (SCRUM-115): komplet implementering.
 */


/* ====================================================================
   §2.4 Header / Nav
   ==================================================================== */

.nc-header {
  background-color: var(--color-header-bg);
  padding: var(--space-3) 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-header);
}

.nc-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Logo: "Njord" bold + "craft" light — Raleway, hvid */
.nc-header__logo {
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.nc-logo-njord {
  color: var(--color-header-text);
  font-weight: var(--weight-bold);
}

.nc-logo-craft {
  color: var(--color-accent);
  font-weight: var(--weight-light);
}

/* Brand-mærke: rigtigt N-mærke (transparent PNG) — erstatter tidl. inline SVG */
.nc-logo-mark {
  display: flex;
  align-items: center;
  /* Afstand kun mellem mærke og ordmærke — ikke mellem "Njord" og "craft"
     (SCRUM-514: flex-gap på forælderen ramte alle tre børn). */
  margin-right: var(--space-2);
}

.nc-logo-mark-img {
  height: 2rem;       /* lidt højere end tekst-cap-height for visuel balance */
  width: auto;
  display: block;
}

/* Nav-links: VERSALER, Raleway semi, letter-spacing 0.08em */
.nc-header__links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-5);
}

.nc-header__links a {
  color: var(--color-header-link);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--label-transform);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nc-header__links a:hover,
.nc-header__links a.active {
  color: var(--color-header-link-hover);
  border-bottom-color: var(--color-accent);
}

/* Højre side: søge + login + CTA + kurv */
.nc-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nc-icon-btn {
  /* A7 (SCRUM-331): 44x44 px min. tap-target (WCAG 2.5.5) uden at forstørre
     selve SVG-ikonet (forbliver 22x22 px) — padding hævet fra space-1 (4px)
     til space-2 (8px), min-width/min-height sikrer resten op til 44px. */
  background: none;
  border: none;
  color: var(--color-header-text);
  cursor: pointer;
  padding: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
  position: relative;
}

.nc-icon-btn:hover {
  opacity: 0.75;
}

/* Kurv-badge */
.nc-cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--color-accent-dark);
  color: #FFFFFF;
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ====================================================================
   Bruger-dropdown (Nav 1 / SCRUM-192 — spec §3, ejer-beslutning a+b)
   Bootstrap dropdown-markup; udseendet styres af design-tokens her.
   Trigger = initial-cirkel + chevron; navn/rolle i menu-hovedet.
   ==================================================================== */
.nc-user-menu {
  display: flex;
  align-items: center;
}

.nc-user-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--color-header-link);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.nc-user-menu__trigger:hover,
.nc-user-menu__trigger[aria-expanded="true"] {
  color: var(--color-header-link-hover);
}

.nc-user-menu__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-dark);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-sm);
  transition: background-color var(--transition-fast);
}

.nc-user-menu__trigger:hover .nc-user-menu__avatar,
.nc-user-menu__trigger[aria-expanded="true"] .nc-user-menu__avatar {
  background: var(--color-accent);
}

.nc-user-menu__menu {
  /* Overstyrer Bootstraps .dropdown-menu med design-tokens */
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-2) 0;
  min-width: 13rem;
  font-family: var(--font-body);
  background: var(--color-bg-card);
}

.nc-user-menu__header {
  padding: var(--space-2) var(--space-4) var(--space-1);
}

.nc-user-menu__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  font-size: var(--text-body-sm);
  color: var(--color-primary);
}

.nc-user-menu__role {
  display: block;
  font-size: var(--text-caption);
  color: var(--color-stone);
  margin-top: 1px;
}

.nc-user-menu__menu .dropdown-item {
  font-size: var(--text-body-sm);
  color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nc-user-menu__menu .dropdown-item:hover,
.nc-user-menu__menu .dropdown-item:focus {
  background: var(--color-bg-section);
  color: var(--color-primary);
}

.nc-user-menu__menu .dropdown-divider {
  border-color: var(--color-sand);
  opacity: 1;
  margin: var(--space-1) 0;
}

/* Hamburgermenu (mobil) */
.nc-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--color-header-text);
  cursor: pointer;
  padding: var(--space-2);
}

/* Mobil nav-drawer */
.nc-mobile-nav {
  display: none;
  background-color: var(--color-primary-dark);
  padding: var(--space-4) 0;
}

.nc-mobile-nav.is-open {
  display: block;
}

.nc-mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* .nc-mobile-nav li button (SCRUM-186/M1.3): form-knapper (LOG UD, BLIV SÆLGER)
   skal se identiske ud med de almindelige <a>-nav-punkter, selvom de er
   state-ændrende POST-forms og derfor ikke kan være links. */
.nc-mobile-nav li a,
.nc-mobile-nav li button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  color: var(--color-header-link);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--label-transform);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}

.nc-mobile-nav li a:hover,
.nc-mobile-nav li button:hover {
  background-color: rgba(255,255,255,0.08);
  color: var(--color-header-link-hover);
}

/* ====================================================================
   Header-søgefelt (Nav 2 / SCRUM-193): flyttet fra inline-styles til
   klasser, så feltet kan flex-shrinke i tablet-båndet (768-1100px)
   i stedet for at tvinge baren til at ombryde.
   ==================================================================== */
.nc-search {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0; /* tillad shrink i flex-baren */
}

.nc-search__input {
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  flex: 0 1 9rem;
  width: 9rem;
  min-width: 4.5rem;
  background: var(--color-bg-card);
  color: var(--color-text);
}

.nc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Søgefelt i mobil-draweren (Nav 2) */
.nc-mobile-nav__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nc-mobile-nav__search .nc-search__input {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

@media (max-width: 767px) {
  .nc-header__links {
    display: none;
  }
  .nc-hamburger {
    display: flex;
  }
  /* Nav 2 (SCRUM-193) FIX: den gamle selektor ramte `.btn-secondary` — en
     klasse der ikke findes (knapperne hedder btn-secondary-nc), så mobil-baren
     skjulte INGENTING. Nu (spec-AC 3): baren viser kun logo + kurv + hamburger;
     søg, CTA'er og bruger-menu bor i draweren.

     SCRUM-400 (Bug, ejer-rapporteret 2026-07-11): F2-hjertet (.nc-fav-link)
     og F3-klokken (.nc-notif-link) blev tilføjet EFTER denne liste blev
     låst og var derfor ikke fanget — logget ind på mobil voksede baren til
     logo + 4 × 44px-ikoner + gaps/padding (~440px) > viewportbredden
     (~412px på fx Samsung S24 Ultra), med vandret side-overflow og en
     delvist afskåret hamburger til følge. Begge skjules nu her, samme
     "kun logo + kurv + hamburger i baren"-princip som resten af listen —
     ingen funktionstab: draweren har allerede "MINE FAVORITTER" +
     "NOTIFIKATIONER" (med ulæst-tæller), base.html linje ~294-295. */
  .nc-header__actions .nc-search,
  .nc-header__actions .btn-primary-nc,
  .nc-header__actions .btn-secondary-nc,
  .nc-header__actions > form,
  .nc-header__actions .nc-user-menu,
  .nc-header__actions .nc-fav-link,
  .nc-header__actions .nc-notif-link {
    display: none;
  }
}


/* ====================================================================
   §2.1 Knapper
   ==================================================================== */

/* Primær (guld CTA) — hvid tekst på --color-accent-dark: WCAG AA ~4.7:1 */
.btn-primary-nc {
  background-color: var(--color-accent-dark);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  font-size: var(--text-label);
  letter-spacing: var(--label-letter-spacing);
  text-transform: var(--label-transform);
  padding: 0.75rem 1.75rem;
  /* SCRUM-761 (ejer-fund 2026-09-05): teksten sad hverken lodret eller
     vandret centreret i knappen. To uafhængige årsager, begge rettet HER
     (delt klasse) i stedet for pr. knap:
     1) Lodret: `display: inline-block` + `min-height: 44px` (WCAG
        2.5.5-tap-target) centrerer IKKE indholdet lodret — ekstra højde ud
        over tekstens egen line-height lægges kun til NEDERST i normal
        inline-flow, så teksten så ud til at sidde for højt. Fix:
        `inline-flex` + `align-items: center` centrerer altid lodret,
        uanset om `min-height` reelt aktiveres.
     2) Vandret: `letter-spacing` (VERSAL-tekst, --label-letter-spacing)
        lægger et mellemrum EFTER hvert bogstav, inkl. det sidste — det
        sidste mellemrum har intet bogstav "efter sig" til at retfærdiggøre
        det, så teksten optisk skubbes mod venstre (højre luft = padding +
        det ekstra mellemrum, venstre luft = kun padding). Fix: `padding-
        right` reduceres med præcis ét letter-spacing-mellemrum, så venstre
        og højre luft omkring TEKSTEN (ikke boksen) bliver lige store. */
  padding-right: calc(1.75rem - var(--label-letter-spacing));
  border-radius: var(--radius-md);
  border: none;
  box-shadow: var(--shadow-btn);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  /* Minimum touch-target 44px (WCAG 2.5.5) */
  min-height: 44px;
  line-height: 1;
}

.btn-primary-nc:hover {
  background-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
  color: #FFFFFF;
}

.btn-primary-nc:active {
  background-color: var(--color-accent-dark);
  box-shadow: none;
}

.btn-primary-nc:disabled,
.btn-primary-nc[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* Sekundær (navy outline) — bruges i header og på lys baggrund */
.btn-secondary-nc {
  background-color: transparent;
  color: var(--color-header-text);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  font-size: var(--text-label);
  letter-spacing: var(--label-letter-spacing);
  text-transform: var(--label-transform);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  line-height: 1;
}

.btn-secondary-nc:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/*
 * Sekundær på LYS baggrund: overskrid header-kontekst med modifier.
 * Bruges uden for header (fx "Se alle varer"-knap i sektioner).
 */
.btn-secondary-nc--light {
  color: var(--color-primary);
  border-color: var(--color-sand);
}

.btn-secondary-nc--light:hover {
  background-color: var(--color-bg-section);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Ghost/tekst-knap — sekundære handlinger i kort (fx "Se vare") */
.btn-ghost-nc {
  background: none;
  border: none;
  color: var(--color-accent-dark);
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  font-size: var(--text-label);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--label-transform);
  padding: var(--space-1) 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.btn-ghost-nc:hover {
  border-bottom-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
}

/* Bootstrap-override: .btn.nc-btn-primary (bagudkompatibilitet med E1.1) */
.btn.nc-btn-primary,
.btn-primary.nc-btn-primary {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  font-size: var(--text-label);
  letter-spacing: var(--label-letter-spacing);
  text-transform: var(--label-transform);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.75rem;
  box-shadow: var(--shadow-btn);
  min-height: 44px;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn.nc-btn-primary:hover,
.btn-primary.nc-btn-primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
  box-shadow: var(--shadow-card-hover);
}

.btn.nc-btn-secondary,
.btn-secondary.nc-btn-secondary {
  background-color: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: var(--color-header-text);
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  font-size: var(--text-label);
  letter-spacing: var(--label-letter-spacing);
  text-transform: var(--label-transform);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn.nc-btn-secondary:hover,
.btn-secondary.nc-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #FFFFFF;
  color: #FFFFFF;
}


/* ====================================================================
   §2.2 Kategori-kort
   SCRUM-145: redesign — visual-top-sektion + kort-body.
   Matcher produkt-kortets struktur (§2.3) i radius, skygge og
   sektion-inddeling, så kategori-grid og produkt-grid virker som ét system.
   ==================================================================== */

/* Grid-wrapper: 4 korte i en horisontal række, responsiv */
.nc-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
}

/* RT3 (SCRUM-705, spec §5.3.3): ejer-krav - paa mobil skal kategorifladen
   ALTID vise 2 raekker med vandret scroll, i stedet for at auto-fit-gridet
   ovenfor stakker korene lodret i én lang soejle under ~767px (samme
   breakpoint som resten af huset bruger). grid-auto-flow: column fylder en
   ny SOEJLE for hvert par kort (grid-template-rows: repeat(2, ...)), saa
   kortene laeses top-til-bund/venstre-til-hoejre 2 ad gangen. Scroll-snap +
   scroll-behavior/scrollbar-skjul er 1:1 laant fra karrusel-sporet
   (.nc-carousel__track, dobbelt understreg — IKKE "nc-carousel-track"). */
@media (max-width: 767px) {
  .nc-categories {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: minmax(160px, 200px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
  }

  .nc-categories::-webkit-scrollbar {
    display: none;
  }

  .nc-category-card {
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .nc-categories {
    scroll-behavior: auto;
  }
}

.nc-category-card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* visual-sektion clippes til --radius-lg */
  transition:
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.nc-category-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/*
 * Visual-top: ikon eller billede — spejler nc-product-card__img-wrap
 * i baggrund og centrering. Fast højde 120px passer til ikon-flade;
 * ved billede (SCRUM-163) tager object-fit: cover over.
 */
.nc-category-card__visual {
  height: 120px;
  background-color: var(--color-bg-section);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

/* Billede (SCRUM-163 — ejer leverer ~800×800 JPG/WebP) */
.nc-category-card__visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ikon: tyndt linje-ikon (stroke-width 1.5px på SVG), farve --color-primary */
.nc-category-card__icon {
  color: var(--color-primary);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kort-body: navn + tæller — matcher nc-product-card__body i padding og gap */
.nc-category-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Kategori-navn: VERSALER, Raleway semi, letter-spacing 0.12em, primær farve */
.nc-category-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--label-letter-spacing);
  text-transform: var(--label-transform);
  color: var(--color-primary);
  margin: 0;
}

/* Tæller: caption-størrelse, stone-farve — vises altid (0 → "Ingen varer endnu") */
.nc-category-card__count {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-stone);
  margin: 0;
}


/* ====================================================================
   §2.3 Produkt-kort
   ==================================================================== */

/* Grid-wrapper til produkt-lister */
.nc-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

/* ====================================================================
   1.4 (SCRUM-375) — Mobiltilpasning af /products, gridets kolonnetal
   (Epic SCRUM-371 "Køber-UI 1: Produktoversigt", spec §4 Story 1.4, jf.
   mockup produkter-mobil.png). Kortets kompakte tæthed (padding/skrift)
   er en separat mobil-blok LÆNGERE NEDE i filen, EFTER kortets
   base-regler (§2.3 nedenfor) — CSS-cascaden afgøres af kildeorden ved
   lige specificitet, uanset @media-indlejring, så en override skal stå
   EFTER den regel den overskriver, ikke før.

   auto-fill/minmax(260px,1fr) degraderer til ÉN kolonne under ~767px
   (2×260px > en typisk mobil-container-bredde) — mockuppen kræver
   eksplicit 2 kolonner. Gap sænket fra --space-5 (24px) til --space-3
   (12px), så to smalle kolonner ikke klemmes for hårdt sammen. */
@media (max-width: 767px) {
  .nc-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

/* ====================================================================
   A14 (SCRUM-338) — Carousel/bladre-layout til forsidens "Nyeste Fund"
   POC-skrabet (§2.5): CSS scroll-snap bærer selve kernefunktionaliteten
   (vandret scroll/swipe virker uden JS — progressiv enhancement); de to
   ".nc-carousel__btn"-knapper er en vanilla-JS-forbedring oven på det
   (src/templates/index.html, extra_scripts). Ingen ny dependency, intet
   carousel-bibliotek. Produktkortet (.nc-product-card) er urørt — dette
   er kun en wrapper udenom, brugt AF forsiden, IKKE af /products
   (.nc-products-grid bruges der fortsat uændret).
   ==================================================================== */
.nc-carousel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nc-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox — knapperne er den primære navigation */
  -ms-overflow-style: none;
  flex: 1 1 auto;
  min-width: 0;
  /* SCRUM-579: afstanden mellem kortene bæres af tracket (gap), ikke af en
     padding inde i hvert item — se kommentaren ved .nc-carousel__item. */
  gap: var(--space-5);
}

.nc-carousel__track::-webkit-scrollbar {
  display: none;
}

/* SCRUM-579 (UI2): tidligere bar hvert item selv afstanden som
   "padding-right: var(--space-5)" med en ":last-child { padding-right: 0 }"-
   undtagelse. Med box-sizing: border-box lå de 24px INDE i de 25%, så sidste
   korts indholdsboks blev 24px bredere end de øvrige — og 4/3-billedboksen
   (.nc-product-card__img-wrap) gav dermed ~18px ekstra korthøjde. Afstanden er
   flyttet til "gap" på tracket, så alle items er præcis lige brede (også det
   sidste), og der er ingen overskydende højre-margin der giver falsk
   scroll-plads i enden af tracket.
   Basis trækker de tre mellemrum fra, så der stadig vises præcis 4 kort ad
   gangen ≥768px:  4 × (25% − 18px) + 3 × 24px = 100%. */
.nc-carousel__item {
  flex: 0 0 calc(25% - (var(--space-5) * 3 / 4));
  box-sizing: border-box;
  min-width: 0;
  scroll-snap-align: start;
  /* RT3 (SCRUM-705, spec §5.3.4, ⚠️ korrigeret): cellen selv streckes
     allerede til raekkens hoejde via flexbox' standard align-items: stretch
     paa .nc-carousel__track - men det arves ikke automatisk videre til
     kortet (.nc-product-card) som blot et almindeligt block-barn. Hoejden
     saettes derfor eksplicit HER OGSAA (celle) og paa selve kortet
     nedenfor, saa kaeden virker i baade karrusel og grid. */
  height: 100%;
}

@media (max-width: 767px) {
  .nc-carousel__item {
    flex: 0 0 100%;
  }

  /* Mobil er uændret: ét kort ad gangen i fuld bredde og ingen afstand mellem
     kortene — svarer 1:1 til den tidligere "padding-right: 0". */
  .nc-carousel__track {
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nc-carousel__track {
    scroll-behavior: auto;
  }
}

.nc-carousel__btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-full);
  background: var(--color-bg-card);
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.nc-carousel__btn:hover {
  background: var(--color-bg-section);
}

.nc-product-card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* RT3 (SCRUM-705, spec §5.3.5): overflow:hidden FJERNET herfra (var her
     for at klippe billedets firkantede hjørner til kortets afrundede form)
     — den klippede også sælger-badge-tooltippen (.nc-seller-badge__tooltip),
     som popper op over badgen inde i kortets krop. Topbilledets afrunding
     er flyttet til .nc-product-card__img-wrap (som beholder sin egen
     overflow:hidden) — visuelt uændret, kun tooltippen kan nu overskride
     kortets kant. Ingen andet barn har egen baggrund der rækker ud over
     kortets border-radius, så dette er sikkert uden andre regressioner.
     Valgt fremfor "overflow-undtagelse på badge-containeren" (spec
     §5.3.5's alternativ) — den løsning virker ikke her, fordi klip
     håndhæves af overflow på ANCESTOREN (kortet), ikke af badge-
     containerens EGET overflow. RT3 (§5.3.4): height: 100% tilføjet, så
     kort i samme række/karrusel bliver lige høje uanset badges (se
     .nc-carousel__item ovenfor for karrusel-halvdelen af højde-kæden). */
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition:
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.nc-product-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Billede-container: 4/3-ratio, object-fit cover */
.nc-product-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* RT3 (SCRUM-705, spec §5.3.5): border-radius top ARVEDE tidligere fra
     .nc-product-card's overflow:hidden (kommentaren herunder var
     forældet) - nu sat EKSPLICIT her, fordi kortets egen overflow:hidden
     er fjernet (se .nc-product-card) for at give sælger-badgens tooltip
     plads til at vokse uden for kortets kant. Visuelt uændret. */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

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

/* Placeholder når intet billede */
.nc-product-card__img-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-section);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-stone);
}

/* ====================================================================
   B5 (SCRUM-344): Multi-billede-swipe på produktkort — Bootstrap 5
   Carousel (allerede indlæst via CDN i base.html, ingen ny afhængighed).
   Fylder samme 4/3-billedboks som det statiske enkeltbillede
   (.nc-product-card__img-wrap er den urørte parent). Kun til stede i
   markup'en når varen har >1 billede (_product_card.html).
   ==================================================================== */
.nc-product-card__carousel,
.nc-product-card__carousel .carousel-inner,
.nc-product-card__carousel .carousel-item {
  width: 100%;
  height: 100%;
}

/* Diskrete bladre-knapper, matcher kortets rolige designsprog (ikke
   Bootstraps brede mørke gradient-standard). Basis her = DESKTOP-adfærden
   (skjult i hvile, fader ind ved hover/fokus); mobil/touch overskrives i
   UI3-blokken nedenfor. */
.nc-product-card__carousel .carousel-control-prev,
.nc-product-card__carousel .carousel-control-next {
  width: 2.25rem;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* RT3 (SCRUM-705, spec §5.3.1): forsvar i dybden for hjertet — Bootstraps
   naeste-knap daekker per standard hele billedhoejden (top:0; bottom:0),
   hvilket laegger sig oven paa favorit-hjertets hjoerne. Stacking-fixet
   (.nc-fav-form's z-index-regel nedenfor) lader allerede hjertet vinde
   PRAECIS der hvor dets egen boks er, men her reserveres kortets oeverste
   hjoerne EKSPLICIT til hjertet ved at skubbe knappens topkant ned under
   hjerte-boksen (2rem knap + luft paa begge sider). */
.nc-product-card__carousel .carousel-control-next {
  top: calc(2rem + (var(--space-3) * 2));
}

.nc-product-card__carousel:hover .carousel-control-prev,
.nc-product-card__carousel:hover .carousel-control-next,
.nc-product-card__carousel .carousel-control-prev:focus-visible,
.nc-product-card__carousel .carousel-control-next:focus-visible {
  opacity: 1;
}

.nc-product-card__carousel .carousel-control-prev-icon,
.nc-product-card__carousel .carousel-control-next-icon {
  width: 1.25rem;
  height: 1.25rem;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------
   UI3 (SCRUM-580, spec specs/ui-polish-wh2.md §4 + ejerbeslutning §8-1):
   en touch-enhed har ingen hover-tilstand, så pilene ovenfor blev ALDRIG
   synlige på mobil — køberen fik ingen indikation af at varen havde flere
   billeder. Under 768px er de derfor permanent synlige.

   Ejeren valgte bevidst variant (b): kun mobil/touch ændres — desktop
   (≥768px) beholder B5/SCRUM-344's hover-fade uændret. Variant (a),
   "altid synlige på alle skærme", er fravalgt.

   Præcis to tilstande, ét breakpoint (samme max-width: 767px som resten
   af filen bruger): under grænsen er opacity 1 uanset hover og fokus —
   hover-reglen ovenfor kan kun sætte den samme værdi, så der opstår ingen
   tredje tilstand, og :focus-visible er dermed også dækket her. Bevidst
   kun viewport-baseret (ikke (hover: none)/(pointer: coarse)): det holder
   skiftet på én akse, jf. AC'ets krav om et entydigt skifte.

   Bredden løftes til 44px (WCAG 2.5.5 touch-target) — højden er i forvejen
   hele billedboksen. Ikonbaggrunden styrkes 0.4 → 0.55, fordi det hvide
   chevron nu ligger permanent oven på ukendte, ofte lyse produktfotos.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .nc-product-card__carousel .carousel-control-prev,
  .nc-product-card__carousel .carousel-control-next {
    width: 2.75rem;
    opacity: 1;
  }

  .nc-product-card__carousel .carousel-control-prev-icon,
  .nc-product-card__carousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nc-product-card__carousel .carousel-item {
    transition: none !important;
  }
}

/* ====================================================================
   F1 (SCRUM-284): Favorit-/følg-hjerte
   .nc-fav-form  — positionerer toggle-formularen som overlay på kortets
                   billede (top-right, samme hjørne-mønster som badge-sold-out).
   .nc-fav-btn   — cirkulær ikon-knap til kortet; --inline er en tekst+ikon-
                   variant til produkt-/sælgerside (ikke positioneret absolut).
   .nc-fav-btn--active — "gemt"/"følger"-tilstand: fyldt hjerte i fejlfarven
                   (--color-error, dæmpet rød — matcher brand-paletten bedre
                   end en ren candy-rød og genbruger et eksisterende token).
   ==================================================================== */
.nc-fav-form {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  margin: 0;
  /* RT3 (SCRUM-705, spec §5.3.1, ⚠️ korrigeret): recon-rapporten tilskrev
     fejlagtigt husets EGNE regler den fulde højde/z-index:1 på
     carousel-control-next — verificeret: husets regler
     (.nc-product-card__carousel .carousel-control-* ovenfor) sætter KUN
     width/opacity/top. Fuld højde og z-index:1 kommer fra Bootstraps EGNE
     carousel-control-defaults, som ellers lægger sig oven på hjertet (uden
     z-index her stacker .nc-fav-form på z-index:auto/0). Eksplicit
     z-index her slår Bootstraps 1, så hjertet altid vinder klik. */
  z-index: 2;
}

.nc-fav-btn {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-stone);
  padding: 0;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.nc-fav-btn:hover {
  transform: scale(1.08);
}

.nc-fav-btn--active {
  color: var(--color-error);
}

/* Inline variant (produktside "Gem som favorit" / sælgerside "Følg butik"):
   tekst + ikon i en pille-knap, ikke et positioneret overlay. */
.nc-fav-btn--inline {
  position: static;
  width: auto;
  height: auto;
  gap: var(--space-2);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-sand);
  background: transparent;
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--label-letter-spacing);
  text-transform: var(--label-transform);
  color: var(--color-primary);
  min-height: 44px;
}

.nc-fav-btn--inline:hover {
  transform: none;
  border-color: var(--color-accent-dark);
}

.nc-fav-btn--inline.nc-fav-btn--active {
  color: var(--color-error);
  border-color: var(--color-error);
}

/* "Udsolgt"-badge — overlay øverst i hjørnet.
   0.2 (SCRUM-365): baggrund ændret fra --color-stone til --color-primary
   (mørkeblå, jf. approved spec §kerne-AC) — hvid tekst på --color-primary
   er WCAG AA-sikker (~9.1:1, njordcraft-tokens.css). */
.nc-product-card__badge-sold-out {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--weight-semi);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--label-transform);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
}

/* "Ny sælger på vej"-badge — RT2 (SCRUM-704, spec §5.2.2). Samme geometri/
   farve som badge-sold-out (Udsolgt-mønsteret genbrugt 1:1) — varen kan
   ikke købes, ligegyldigt lagerstatus, når sælgerens Stripe-onboarding
   ikke er gennemført. Vinder over de øvrige badges (kun ét slot i
   hjørnet, se _product_card.html). */
.nc-product-card__badge-new-seller {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--weight-semi);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--label-transform);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
}

/* "Kun 1 tilbage"-badge — 0.2 (SCRUM-365). Gensidigt udelukkende med
   badge-sold-out (samme hjørne, forskellig stock-værdi udløser dem, jf.
   _product_card.html). Messing-accent — bruger --color-accent-dark (IKKE
   --color-accent) for WCAG-sikker hvid tekst, jf. njordcraft-tokens.css'
   note om at --color-accent aldrig må bruges som baggrund med hvid tekst. */
.nc-product-card__badge-low-stock {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background-color: var(--color-accent-dark);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--weight-semi);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--label-transform);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
}

/* "Unika"-badge — SCRUM-422 (ADR-037). Bevidst DÆMPET modsat
   badge-sold-out/badge-low-stock: på en unika-markedsplads bærer et
   FLERTAL af kortene denne badge (det er en rolig produktegenskab, "one of
   a kind" — ikke en knaphedsalarm), så den må ikke råbe. Dæmpet outline-/
   tekst-udtryk (gennemsigtig hvid baggrund, tynd --color-sand-kant,
   --color-stone-tekst) i stedet for fyldt farve — jf. ejer-låst design-krav
   (spec §4 Story G). Samme placering/geometri (position/padding/radius) som
   de to andre badges, så layoutet er identisk — kun farveudtrykket skifter.
   Gensidigt udelukkende med badge-sold-out og badge-low-stock (kun ét
   badge-slot i hjørnet, se _product_card.html). */
.nc-product-card__badge-unika {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--color-stone);
  border: 1px solid var(--color-sand);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--weight-semi);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--label-transform);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
}

/* Kortets tekstindhold */
.nc-product-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.nc-product-card__title {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semi);
  color: var(--color-text);
  margin: 0;
  /* Maks 2 linjer */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* S1 (SCRUM-356): eksplicit line-height + min-height reserverer plads til
     ALTID 2 linjer (2 × line-height), så en 1-linjes titel ikke gør kortet
     lavere end et 2-linjers. em-baseret (relativ til font-size) så det følger
     -webkit-line-clamp: 2 ovenfor, uanset carousel/grid/mobil. */
  line-height: 1.3;
  min-height: calc(2 * 1.3em);
}

.nc-product-card__seller {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-stone);
  margin: 0;
}

/* RT3 (SCRUM-705, spec §5.3.4): fast reserveret raekke til sælger-badges
   (_product_card.html) - .nc-seller-badges-wrapperen renderes IKKE af
   makroen naar badge-listen er tom (_seller_badges.html, uændret adfærd
   for de øvrige kaldesteder, fx SælgerBlok/test_scrum_367.py, som ikke
   må få den ekstra plads). Denne slot omslutter kaldet KUN i produktkortet
   og reserverer højden uanset om makroen udskriver noget, så kort med og
   uden badges bliver lige høje (grid og karrusel). Højden er icon (14px)
   + badge-padding (4px * 2) + wrapperens egen lodrette margin
   (var(--space-2) * 2, .nc-seller-badges). */
.nc-product-card__badges-slot {
  min-height: calc(14px + (4px * 2) + (var(--space-2) * 2));
}

/* Pris — h3-størrelse, primær farve, dansk lokale "X.XXX kr." */
.nc-product-card__price {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin: 0;
}

.nc-product-card__footer {
  padding: 0 var(--space-4) var(--space-4);
  margin-top: auto;
}

/* ====================================================================
   1.4 (SCRUM-375) — Kompakt kort-variant på mobil (Epic SCRUM-371
   "Køber-UI 1: Produktoversigt", spec §4 Story 1.4, jf. mockup
   produkter-mobil.png: mindre padding/skrift end desktop-kortet i det
   2-kolonners gridt). Rører KUN padding/font-size — samme markup/klasser,
   ingen ny makro-variant (guardrail "genbrug af EPIC 0-komponenter").
   Placeret HER (efter base-reglerne ovenfor) med vilje: samme
   specificitet (én klasse), så kildeorden afgør — en override før
   base-reglen ville tabe cascaden.
   .nc-product-card__title beholder sin S1-kontrakt (line-height: 1.3 +
   min-height: calc(2 * 1.3em), uændret her) — min-height er em-baseret og
   skalerer derfor automatisk med den mindre font-size, så 2-linjers-
   reservationen (SCRUM-356) forbliver intakt på mobil. */
@media (max-width: 767px) {
  .nc-product-card__body {
    padding: var(--space-3);
    gap: var(--space-1);
  }

  .nc-product-card__title {
    font-size: var(--text-body-sm);
  }

  .nc-product-card__price {
    font-size: var(--text-body);
  }

  .nc-product-card__footer {
    padding: 0 var(--space-3) var(--space-3);
  }
}

/* 0.2 (SCRUM-365): udsolgt-tilstand nedtoner billede + tekstindhold til 55%
   opacitet (kerne-AC: "kort nedtonet 55% opacitet"). Badgen og favorit-
   hjertet er separate absolut-positionerede overlays og forbliver fuldt
   synlige/skarpe — kun billedet og tekst-blokkene dæmpes. */
.nc-product-card--sold-out .nc-product-card__img,
.nc-product-card--sold-out .nc-product-card__img-placeholder,
.nc-product-card--sold-out .nc-product-card__carousel,
.nc-product-card--sold-out .nc-product-card__body,
.nc-product-card--sold-out .nc-product-card__footer,
/* RT2 (SCRUM-704, spec §5.2.2): "Ny sælger på vej" gråtones identisk med
   Udsolgt-mønsteret. */
.nc-product-card--new-seller .nc-product-card__img,
.nc-product-card--new-seller .nc-product-card__img-placeholder,
.nc-product-card--new-seller .nc-product-card__carousel,
.nc-product-card--new-seller .nc-product-card__body,
.nc-product-card--new-seller .nc-product-card__footer {
  opacity: 0.55;
}

/* ====================================================================
   B8 (SCRUM-347): Skabere-oversigt (/sellers) — ensartede kort.
   Samme flex-kolonne + bund-justeret footer-mønster som .nc-product-card
   ovenfor, plus en fast min-height: kort med 0 badges/kort navn og kort
   med 3 badges/langt navn skal fylde lige meget i gitteret (spec §4 B8).
   ==================================================================== */
.nc-seller-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.nc-seller-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  margin: 0;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.nc-seller-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.nc-seller-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

/* SCRUM-399 pkt. 2 (ejer-godkendt): selektoren kombinerer bevidst BEGGE
   klasser (`.nc-thumb.nc-seller-card__avatar`, specificitet 0,0,2,0) i
   stedet for blot `.nc-seller-card__avatar` (0,0,1,0) — sidstnævnte tabte
   kildeordens-kampen mod den senere `.nc-thumb`-regel (border-radius:
   var(--radius-sm), til vare-thumbnails), som har SAMME specificitet men
   står senere i filen og derfor vandt cascaden. Resultatet var en næsten
   firkantet (6px hjørner) i stedet for rund avatar på /sellers (både
   "row"- og "featured"-varianten, som begge bruger denne klasse via
   _seller_block_avatar). Produktsidens "card"-variant
   (.nc-seller-block__avatar, længere nede i filen) var upåvirket, fordi
   den regel tilfældigvis står EFTER `.nc-thumb` i filen. */
.nc-thumb.nc-seller-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.nc-seller-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semi);
  color: var(--color-primary);
  /* Maks 2 linjer — lange butiksnavne må ikke skubbe kortet højere end de andre. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Vare-/følgertal bundjusteres, så footer'en altid sidder samme sted
   uanset om badge-rækken ovenfor (0-3 badges) er der eller ej. */
.nc-seller-card__footer {
  margin-top: auto;
  padding-top: var(--space-2);
}

.nc-seller-card__footer .nc-list-row__meta {
  margin: 2px 0 0;
}

.nc-seller-card__footer .nc-list-row__meta:first-child {
  margin-top: 0;
}


/* ====================================================================
   2.1 (SCRUM-377, Epic SCRUM-376 "Køber-UI 2: Skaberside"): skaberkort/
   -rækkers kategori-tag, (dormant) tagline og produktthumbnail-stribe.
   Alle tre er valgfrie — skjules helt uden data, kortets skelet
   (.nc-seller-card ovenfor) forbliver uændret (spec §4 Story 2.1).
   ==================================================================== */

.nc-seller-card__category-tag {
  display: inline-block;
  margin-top: var(--space-2);
  width: fit-content;
}

.nc-seller-card__tagline {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-stone);
}

.nc-seller-card__thumbnails {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.nc-seller-card__thumbnail-link {
  display: block;
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-section);
}

.nc-seller-card__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ====================================================================
   2.2 (SCRUM-378, Epic SCRUM-376 "Køber-UI 2: Skaberside"): to-tilstands
   layout på /sellers — "Udvalgte skabere", søgefelt og kompakt rækkeliste
   (kun i skalerbar tilstand, >= SELLERS_FEATURED_THRESHOLD).
   ==================================================================== */

.nc-section__subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semi);
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}

/* "Udvalgte skabere" — samme kort-grid-princip som .nc-seller-grid, men
   fast 3-kolonne (top 3, §7C) på desktop. Mobil-karrusellen er 2.5's
   (SCRUM-381, spec §4 Story 2.5 AC) — se @media-blokken nedenfor. */
.nc-featured-sellers {
  margin: 0 0 var(--space-8);
}

.nc-featured-sellers__list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
}

/* 2.5 (SCRUM-381, spec §4 Story 2.5 AC): "Udvalgte skabere" bliver en
   horisontal, swipe-venlig karrusel på mobil — samme skjult-scrollbar-
   mønster som EPIC 0's kategori-pill-række (.nc-filter-bar__categories,
   linje ~2850 nedenfor). `padding-right` er bevidst MINDRE end én
   kort-bredde + gap, så det sidste kort altid er delvist synligt ved
   kanten som swipe-signal, fremfor at klippe præcist ved containerens
   kant (uanset viewportbredde — en fast kort-bredde, IKKE en grid-brøkdel,
   er hvad der gør dette signal robust). */
@media (max-width: 767px) {
  .nc-featured-sellers__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
    padding-bottom: var(--space-1);
    padding-right: var(--space-6);
  }

  .nc-featured-sellers__list::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge (Chromium) */
  }

  .nc-featured-sellers__list > li {
    flex: 0 0 auto;
  }
}

/* "featured"-varianten genbruger .nc-seller-card 1:1 (samme skelet/hover) —
   ingen visuel afvigelse er påkrævet af spec §4 Story 2.2 AC ud over de
   elementer makroen selv udelader (kategori-tag/tagline/footer). Klassen
   findes som et rent styling-krog til evt. senere finjustering. */
.nc-seller-card--featured {
  min-height: 0;
}

/* SCRUM-398 (Epic SCRUM-483, staging-fund fundet under SCRUM-397):
   featured-kortets thumbnail-stribe arvede base-reglens `flex: 1 1 0` og
   delte derfor HELE kortbredden ud på de tilgængelige thumbnails — dvs.
   ANTALLET af fotos bestemte størrelsen. En skaber med præcis ÉN foto-vare
   fik ét ~300px kæmpebillede der dominerede kortet (og fik de tre
   featured-kort ved siden af hinanden til at se helt forskellige ud);
   fire fotos gav derimod pæne små kvadrater. Samme rodårsag som SCRUM-397
   rettede i "row"-varianten, blot i mindre skala — og samme løsning: et
   FAST maksimalmål.

   Scopet til `.nc-seller-card--featured` (base-reglen ~linje 1160 og
   produktsidens "card"-variant er URØRT — jf. scoping-regressionen i
   test_scrum_397/381). `flex: 0 1 72px` frem for "row"-variantens
   `0 0 auto`: thumbnails vokser ALDRIG over 72px, men må stadig krympe når
   3-4 stk. ikke kan være i kortets bredde (kortet er ~1/3 container og
   dermed væsentligt smallere end en fuldbredde-række). `aspect-ratio:
   1 / 1` fra base-reglen holder dem kvadratiske uanset den resulterende
   bredde, så der er bevidst INGEN fast `height` her. Resultat: alle
   featured-kort viser ens thumbnail-mål uanset foto-antal, og striben
   pakker venstrestillet når skaberen har færre end fire. */
.nc-seller-card--featured .nc-seller-card__thumbnail-link {
  flex: 0 1 72px;
  max-width: 72px;
}

/* 2.5 (SCRUM-381, spec §4 Story 2.5 AC): karrusel-kortet er ~150px bredt på
   mobil — fast bredde (ikke en grid-brøkdel), som er hvad der giver
   karrusellens delvist-synlige swipe-signal-kort ved kanten (se
   .nc-featured-sellers__list ovenfor). Eksplicit min-height: 44px sikrer
   tap-target-AC'en også i det usædvanlige tilfælde af et minimalt kort
   uden thumbnails/badges — normalt langt overskredet af det faktiske
   indhold (avatar + navn + badges). */
@media (max-width: 767px) {
  .nc-seller-card--featured {
    flex: 0 0 150px;
    width: 150px;
    min-height: 44px;
  }

  /* SCRUM-398 (mobil): karrusel-kortet er kun 150px bredt, dvs. ~86px
     indholdsbredde inden for kortets `padding: var(--space-6)`.
     Desktop-loftet på 72px ville dér stadig fylde næsten hele kortbredden
     ved én thumbnail — samme skæve indtryk, blot i lille format. 48px er
     samme mål som kortets avatar (`.nc-thumb.nc-seller-card__avatar`), så
     striben læses som en lille billedrække under navnet i stedet for som
     kortets hovedbillede. Flere thumbnails krymper som på desktop
     (`flex-shrink: 1` fra reglen ovenfor). */
  .nc-seller-card--featured .nc-seller-card__thumbnail-link {
    flex-basis: 48px;
    max-width: 48px;
  }
}

/* Søgefelt over FilterBar (§7E) — fuld linje-bredde på desktop, IKKE den
   smalle header-søgning (.nc-search, 9rem). Fuld-bredde-mobiltilpasning er
   Story 2.5's AC. */
.nc-seller-search {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.nc-seller-search__input {
  flex: 1 1 auto;
  max-width: 28rem;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  background: var(--color-bg-card);
  color: var(--color-text);
}

/* SCRUM-397 (Bug, ejer-rapporteret 2026-07-10, jf. mockup skabere-web.png/
   eksempel.png): søgefeltet og FilterBar's kategori-pille-linje skal
   sidde på SAMME visuelle linje, med sorterings-/toggle-kontrollerne på
   linjen under, højrestillet. `.nc-seller-toolbar` er en PAGE-LOKAL
   wrapper (kun sellers.html, ikke en del af den delte _filter_bar.html-
   komponent — dens interne markup/kontrakt er urørt, jf. spec §9 DoD).
   `.nc-filter-bar` er selv `display: flex; flex-direction: column`
   (kategori-<nav> først, sorterings-/toggle-<div> under) — som flex-item
   i toolbar-rækken lander dens kategori-<nav> derfor visuelt ud for
   søgefeltet (samme linje), mens sorterings-linjen forbliver under, uden
   at komponentens egen markup er ændret. */
.nc-seller-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.nc-seller-toolbar .nc-seller-search {
  flex: 0 1 22rem;
  margin: 0;
}

.nc-seller-toolbar .nc-filter-bar {
  flex: 1 1 16rem;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .nc-seller-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .nc-seller-toolbar .nc-seller-search {
    flex: 1 1 auto;
  }

  /* KRITISK: under `flex-direction: column` er flex-basis en HØJDE, ikke
     en bredde — uden denne override ville desktop-reglens
     `flex: 1 1 16rem` (ovenfor) tvinge FilterBar til at være 256px HØJ på
     mobil (fundet ved visuel browser-verifikation: en tom boks mellem
     filterbåndet og rækkelisten). `flex: 1 1 auto` lader den i stedet
     bruge sin egen indholdshøjde, som på alle andre sider. */
  .nc-seller-toolbar .nc-filter-bar {
    flex: 1 1 auto;
  }
}

/* Kompakt rækkeliste (Story 2.1's "row"-kort, stablet i én kolonne i
   stedet for .nc-seller-grid's fler-kolonne-grid) — samme .nc-seller-card-
   markup, blot en anden container-opsætning.

   SCRUM-399 pkt. 1 (ejer-godkendt): INGEN `gap` her længere. Da rækkerne
   var boksede kort (border+radius+skygge) gav et ekstra gap mening for at
   adskille dem visuelt; nu hvor de er flade linjer med kun en bund-
   divider (`.nc-seller-card--row`, jf. `.nc-list-row`-mønsteret andre
   steder i appen), ville et ekstra flex-gap OVENI rækkernes egen lodrette
   padding give et dobbelt, for stort mellemrum. Rytmen kommer nu
   udelukkende fra hver rækkes egen `padding: var(--space-3) 0` +
   bund-divider — samme princip som `.nc-list`/`.nc-list-row` (linje
   ~2199 nedenfor), som heller ikke har container-gap. */
.nc-seller-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-4);
}

/* SCRUM-399 pkt. 5 (ejer-godkendt, jf. mockup skabere-web.png): rækkelisten
   viser højst 3 thumbnails på desktop, selvom datalaget kan levere op til 4
   (§4 Story 2.1's kontrakt, "2-4", er uændret — dette er en ren visnings-
   begrænsning, intet ekstra data hentes eller undlades i backend'en). Kun
   .nc-seller-list (rækkelisten) — "Udvalgte skabere"s featured-kort
   (karrusellen ovenfor) er ikke omfattet. */
.nc-seller-list .nc-seller-card__thumbnail-link:nth-child(n+4) {
  display: none;
}

/* 2.5 (SCRUM-381, spec §4 Story 2.5 AC): rækkelisten viser kun 2
   thumbnails pr. række på mobil (jf. skabere-mobil.png) — de øvrige
   thumbnails i striben skjules ved breakpointet, uden layout-brud (striben
   selv, dens gap/aspect-ratio, forbliver uændret; kun de overskydende
   thumbnail-links fjernes fra flowet). Scopet til .nc-seller-list
   (rækkelisten) — "Udvalgte skabere"s featured-kort (karrusellen ovenfor)
   er ikke omfattet af denne AC. Supplerer (strammer yderligere) desktop-
   reglen på 3 ovenfor. */
@media (max-width: 767px) {
  .nc-seller-list .nc-seller-card__thumbnail-link:nth-child(n+3) {
    display: none;
  }
}

/* 2.5 (SCRUM-381, spec §4 Story 2.5 AC): søgefeltet bliver fuld bredde på
   mobil — desktop-reglens `max-width: 28rem` (ovenfor) fjernes, feltet
   fylder resten af rækken ved siden af SØG-knappen. */
@media (max-width: 767px) {
  .nc-seller-search__input {
    max-width: none;
    flex: 1 1 auto;
  }
}

/* ====================================================================
   SCRUM-397 (Bug, ejer-rapporteret 2026-07-10, EFTER SCRUM-395-deploy):
   "row"-varianten af SælgerBlok (.nc-seller-card) arvede base-kortets
   VERTIKALE kort-stil (flex-direction: column, min-height: 200px,
   padding: var(--space-6)) — mockuppens (skabere-web.png/
   skabere-mobil.png) kompakte HORISONTALE række blev aldrig
   implementeret, og thumbnail-striben (.nc-seller-card__thumbnail-link,
   flex: 1 1 0) delte hele kortbredden mellem sig (1 thumbnail = fuld
   sidebredde — den rapporterede "gigantiske"/"tomme" boks).

   SCRUM-399 (Bug/UI-analyse, ejer-godkendt 2026-07-11, EFTER SCRUM-397):
   SCRUM-397 rettede kun den grove kort→række-form, ikke alle detaljer.
   Layoutet er her omskrevet fra FLEX til CSS GRID, fordi et af de
   ejer-godkendte krav (pkt. 9) er at butiksnavnet på mobil skal løftes op
   på sin EGEN fuld-bredde linje øverst i rækken, over avatar/tagline/
   footer/thumbnails — en 2-linjers "kolonne" ved siden af en avatar, der
   skal kunne omarrangeres til "navn øverst, resten under" pr. breakpoint,
   er den klassiske brug for CSS Grid's `grid-template-areas` (ren
   flex-order/-wrap på et indlejret element kan ikke gøre dette uden
   endnu en wrapper-div). Samtidig løses her: hvid kortboks fjernet (pkt.
   1, nu en flad linje-divider som .nc-list-row), luft mellem avatar og
   navn (pkt. 3, `column-gap`), højst 3 thumbnails på desktop (pkt. 5, se
   `.nc-seller-list`-reglen ovenfor).

   ALLE regler herunder er scopet til `.nc-seller-card--row` (modifieren
   sat i _seller_block.html's row-gren, se dens kommentar for markup-
   detaljer) — base-/"card"-/"featured"-varianternes regler OVENFOR er
   URØRT (spec-AC: featured-kortene + EPIC 4's produktside-kort skal
   forblive vertikale kort).
   ==================================================================== */

.nc-seller-card--row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas:
    "avatar name thumbs chevron"
    "avatar meta thumbs chevron";
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 0;
  min-height: 0;
  padding: var(--space-3) 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-sand);
}

/* Pkt. 1: sidste række i listen skal ikke have dobbelt bundlinje mod
   "Vis flere"-knappen nedenfor. Selektoren er "levende" — virker
   automatisk også når show_more() appender flere <li> (den tidligere
   sidste får sin bundlinje tilbage, den nye sidste mister sin). */
.nc-seller-list > li:last-child .nc-seller-card--row {
  border-bottom: none;
}

/* Diskret hover (spec-AC "Række-hover: diskret") — IKKE kortenes
   løft-transform/skygge-eskalering (.nc-seller-card:hover ovenfor). */
.nc-seller-card--row:hover {
  box-shadow: none;
  transform: none;
  background-color: var(--color-bg-section);
}

/* Pkt. 6/7: rækken er ikke længere selv et link — `.nc-seller-card__
   primary-link` (avatar + navn, ét samlet klik-mål) er `display: contents`,
   så dens to børn forbliver individuelle grid-items i deres egne
   grid-areas i stedet for at blive ét sammenhængende grid-item. Understøttet
   i alle evergreen-browsere; ét kendt, mindre a11y-forbehold: ældre
   Safari/VoiceOver-versioner har historisk mistet link-semantikken på
   `display: contents`-elementer (stort set rettet i moderne versioner) —
   accepteret som POC-niveau, jf. rod-CLAUDE.md §"Hold det enkelt". */
.nc-seller-card--row .nc-seller-card__primary-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.nc-seller-card--row .nc-seller-card__avatar {
  grid-area: avatar;
}

.nc-seller-card--row .nc-seller-card__name-row {
  grid-area: name;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.nc-seller-card--row .nc-seller-badges {
  margin: 0;
}

/* Midterkolonnen: .nc-seller-card__header rummer nu KUN (dormant)
   tagline + metadata-footeren — navnet er flyttet ud i sit eget
   primary-link (se markup-kommentar i _seller_block.html). Ét grid-item,
   normalt blok-flow internt (tagline-linje, så footer-linje). */
.nc-seller-card--row .nc-seller-card__header {
  grid-area: meta;
  display: block;
  min-width: 0;
  margin: 0;
}

.nc-seller-card--row .nc-seller-card__tagline {
  margin: 2px 0 0;
}

/* Metadata-linjen (kategori-tag · varetal · rating): .nc-seller-card__footer
   genbruges som en INLINE flex-række i stedet for base-reglens
   bund-justerede (`margin-top: auto`) vare-/følgertal-blok. */
.nc-seller-card--row .nc-seller-card__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: 4px;
  padding-top: 0;
}

.nc-seller-card--row .nc-seller-card__footer .nc-list-row__meta {
  margin: 0;
}

.nc-seller-card--row .nc-seller-card__category-tag {
  margin-top: 0;
}

.nc-seller-card--row .nc-seller-block__rating {
  margin: 0;
}

/* Thumbnails: FASTE, SMÅ kvadrater i stedet for base-reglens
   `flex: 1 1 0`-deling af hele kortbredden (SCRUM-397-diagnose punkt 2 —
   roden til den rapporterede "gigantiske"/"tomme" boks, da rækkens
   kortbredde = hele sidebredden). Base-reglerne (linje ~1160 ovenfor) er
   uændrede; "featured" har siden SCRUM-398 sin EGEN, tilsvarende
   max-begrænsning (se `.nc-seller-card--featured .nc-seller-card__
   thumbnail-link` ovenfor) — antagelsen om at featured-kortets smallere
   bredde alene holdt thumbnails små holdt ikke ved ét enkelt foto. */
.nc-seller-card--row .nc-seller-card__thumbnails {
  grid-area: thumbs;
  margin-top: 0;
}

.nc-seller-card--row .nc-seller-card__thumbnail-link {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
}

/* Pkt. 7/8: chevronen er nu selv et link (samme destination som
   primary-link), ikke længere en ren dekorativ SVG. */
.nc-seller-card--row .nc-seller-card__chevron-link {
  grid-area: chevron;
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.nc-seller-card--row .nc-seller-card__chevron {
  flex-shrink: 0;
  color: var(--color-stone);
}

@media (max-width: 767px) {
  /* Pkt. 9 (NYT ejer-krav, mobil): butiksnavn + PRO-badge løftes op på
     egen, fuld-bredde linje øverst i rækken (jf. skabere-mobil.png) —
     avatar/tagline/footer/thumbnails/chevron rykker ned på linjen under.
     Samme grid-items som desktop ovenfor, kun grid-template-areas
     ombrydes — ingen markup-forskel mellem breakpoints. */
  .nc-seller-card--row {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "name name name name"
      "avatar meta thumbs chevron";
    column-gap: var(--space-2);
    row-gap: var(--space-1);
    padding: var(--space-3) 0;
  }

  .nc-seller-card--row .nc-seller-card__thumbnail-link {
    width: 56px;
    height: 56px;
  }
}

/* "Åbn din butik"-banner (2.3, SCRUM-379, spec §4 Story 2.3): mørkeblå
   baggrund (--color-primary, samme som footer/header — hvid tekst ~9.1:1,
   bestået WCAG AA) + messing-CTA (.btn-primary-nc, --color-accent-dark —
   IKKE den utilgængelige --color-accent, jf. tokens-filens kontrast-note).
   Sidder nederst på /sellers i begge tilstande (grid-only og skalerbar). */
.nc-seller-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-primary);
  border-radius: var(--radius-md);
  color: #FFFFFF;
}

.nc-seller-cta-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  margin: 0 0 var(--space-2);
}

.nc-seller-cta-banner__text {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.nc-seller-cta-banner__form {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.nc-seller-cta-banner__cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .nc-seller-cta-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: var(--space-4);
  }

  .nc-seller-cta-banner__cta {
    width: 100%;
    text-align: center;
  }
}


/* ====================================================================
   §2.5 Hero-sektion
   ==================================================================== */

.nc-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-primary);   /* fallback hvis intet billede */
}

.nc-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
 * Overlay: venstre → transparent (foto trækker til højre — design-direction §2.5).
 * SCRUM-144: opacity afstemt mod det faktiske ejer-foto (hero-forside-2) så
 * hvid overlay-tekst holder WCAG AA over hele tekst-zonen — målt worst-case
 * ~5,5:1 (titel) og ~5,1:1 (undertekst). Den tidligere 0.70/0.30-gradient
 * lå under AA fordi fotoet er lyst i tekst-zonen.
 */
.nc-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(31, 58, 77, 0.85) 0%,
    rgba(31, 58, 77, 0.78) 40%,
    rgba(31, 58, 77, 0.35) 70%,
    transparent 100%
  );
}

/*
 * Mobil: teksten fylder næsten hele bredden, så en venstre→transparent gradient
 * efterlader den højre tekstkant over et lyst foto (målt ~1,3:1 — dumper AA).
 * Under 640px lægges derfor et næsten ensartet navy-scrim (worst-case ~7,8:1
 * titel / ~6,2:1 undertekst), så kontrasten holder uanset hvad fotoet viser.
 */
@media (max-width: 640px) {
  .nc-hero__overlay {
    background: linear-gradient(
      to right,
      rgba(31, 58, 77, 0.90) 0%,
      rgba(31, 58, 77, 0.86) 100%
    );
  }
}

.nc-hero__content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: var(--section-padding-y) var(--section-padding-x);
}

.nc-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.nc-hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: 440px;
}


/* ====================================================================
   Side-/sektion-header med foto-banner (SCRUM-144)
   Let billed-header til nøglesider (fx /products). Samme navy-overlay-sprog
   som hero, men lavere bånd og bund-justeret titel. Foto via inline style;
   overlay sikrer WCAG AA på den hvide titel (stærkt navy-scrim i bunden).
   ==================================================================== */

.nc-page-header {
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-primary);   /* fallback hvis intet billede */
  margin-bottom: var(--space-7);
}

.nc-page-header__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Bund→top: stærkt navy i bunden hvor titlen står, let mod toppen */
.nc-page-header__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(31, 58, 77, 0.85) 0%,
    rgba(31, 58, 77, 0.55) 55%,
    rgba(31, 58, 77, 0.30) 100%
  );
}

/* Horisontal placering styres af den omgivende .container (Bootstrap-gutter),
   så titlen flugter med produkt-grid'et nedenunder — kun lodret padding her. */
.nc-page-header__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-6) 0 var(--space-5);
}

.nc-page-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  margin: 0;
}

.nc-page-header__count {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.85);
  margin: var(--space-2) 0 0;
}


/* ====================================================================
   §2.6 Formularfelter
   ==================================================================== */

/* Felt-wrapper — bruges til at gruppere label + input + fejl */
.nc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* A8/SCRUM-332: begrænset feltbredde til korte inputs (fx butiksnavn) i en
   bred flex-container — uden dette kan et kort felt strække sig til
   700-800px bredt. Ren bredde-begrænsning, ingen ændring af selve inputtet. */
.nc-field--narrow {
  max-width: 24rem;
}

/* SCRUM-764: butiksnavn-feltet i signup's sælger-boks har brug for samme
   afstand til NÆSTE felt (telefonnummer) som de øvrige sælger-felter i
   signup.html allerede får via inline `style="margin-bottom:var(--space-4)"`
   (fra FØR KC0-konventionen) — ny markup må ikke gentage det mønster, så
   afstanden bages ind i klassen i stedet (samme greb som .nc-checkbox-row
   nedenfor). */
.nc-field--stack-gap {
  margin-bottom: var(--space-4);
}

/* RT5 (SCRUM-707): checkbox + label på én linje ("Husk mig i 14 dage" på
   login.html) — erstatter det gentagne inline-style-mønster
   (display:flex;align-items:center;gap:var(--space-2)) andre steder i huset
   med en klasse, så nye checkbokse kan tilføjes uden nye inline styles (KC0).
   Margin-bottom bagt ind i klassen (samme greb som .nc-report-form's gap)
   fremfor en inline style på selve feltet i skabelonen. */
.nc-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

/* N2.3 (SCRUM-731): en .nc-checkbox-row brugt SIDE OM SIDE med andre
   checkbokse (fragtudbyder-multi-select nedenfor) skal ikke arve
   basisklassens bund-margin — afstanden mellem CARRIER-RÆKKER kommer i
   stedet fra .nc-shipping-options' gap. */
.nc-checkbox-row--inline {
  margin-bottom: 0;
}

/* N2.3 (SCRUM-731, ADR-063 §1/§3): fragtudbyder-multi-select ved vare-
   oprettelse/-redigering — én carrier-række pr. udbyder med to
   afkrydsningsfelter (hjemmelevering/pakkeshop) side om side (KC0: ingen
   inline style, design-direction.md §2). */
.nc-shipping-options-field {
  margin-bottom: var(--space-5);
}

.nc-shipping-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* SCRUM-756 (specs/go-live-polish.md §6): carrier-rækken er et GRID med FASTE
   kolonnespor — [udbyder] [hjemmelevering] [pakkeshop] — i stedet for fri
   flex-wrap. Med flex bestemte etikettens længde hvor den næste checkboks
   landede, så checkboksene sprang vandret fra række til række: tydeligst i
   tom-tilstanden (den lange, ikke-brydende hjælpetekst udløste flex-wrap på
   nogle bredder), men også med priser af forskellig cifferlængde
   ("59,00 kr." vs "115,00 kr."). Faste spor gør kolonnernes startpunkt
   uafhængigt af indholdet, så checkboksene flugter i BEGGE tilstande.
   Sporene er ens for alle rækker, så de enkelte grids står i samme raster. */
.nc-shipping-options__carrier {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
}

/* Under ~40rem (mobil) er der ikke plads til tre spor ved siden af hinanden.
   Udbydernavnet og hvert fragtvalg får da sin egen fulde række, så alle
   checkbokse flugter i ét lodret spor helt ned til 390px (AC (a)). */
@media (max-width: 40rem) {
  /* Større afstand MELLEM udbyderne end mellem den enkelte udbyders to
     fragtvalg, så grupperingen stadig kan aflæses når alt er stakket —
     og så hvert klikmål har luft nok (design-direction.md §3.5). */
  .nc-shipping-options {
    gap: var(--space-4);
  }

  .nc-shipping-options__carrier {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-2);
  }
}

/* Etiketten må kunne krympe inde i sit spor (uden min-width:0 kan et flex-
   item ikke blive smallere end sit indhold og ville sprænge kolonnen). */
.nc-shipping-options__carrier .nc-checkbox-row--inline {
  min-width: 0;
}

/* Bredden ligger nu i grid-sporet (7rem), ikke på selve navnet — et
   min-width her ville kunne skubbe sporet skævt for ét enkelt udbydernavn. */
.nc-shipping-options__carrier-name {
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
}

/* SCRUM-744 (specs/notes/fragtpris-visning-ved-oprettelse.md): dynamisk
   fragtpris pr. (udbyder, variant)-checkbox-række — server-renderet fra
   varens vægt, opdateret live af extra_scripts' vanilla-JS (KC0: ingen
   inline style). Dæmpet, sekundær tekst — samme rolle som .nc-hint.

   SCRUM-756: `margin-left:auto` skubber etiketten ud til højre i sit
   grid-spor, så priserne får en fælles højrekant uanset om der står en pris
   eller tom-tilstandens "Angiv vægt" — checkboks og pris flugter da begge. */
.nc-shipping-options__pris {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semi);
  color: var(--color-stone);
  white-space: nowrap;
  margin-left: auto;
}

/* Labels: Raleway semi/600, 13px, VERSALER, letter-spacing 0.08em, primær farve */
.nc-label {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--label-transform);
  color: var(--color-primary);
}

.nc-label--required::after {
  content: ' *';
  color: var(--color-error);
}

/* Tekstinput, textarea, select */
.form-control-nc {
  background-color: var(--color-bg-card);
  border: 1.5px solid var(--color-sand);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  /* Minimum touch-target-højde */
  min-height: 44px;
}

.form-control-nc::placeholder {
  color: var(--color-stone);
}

.form-control-nc:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(31, 58, 77, 0.12);
  outline: none;
}

.form-control-nc.is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(139, 46, 46, 0.10);
}

.form-control-nc:disabled {
  background-color: var(--color-bg-section);
  color: var(--color-stone);
  cursor: not-allowed;
}

/* Inline fejlbesked under feltet — aldrig toast (design-direction §2.6) */
.nc-field-error {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-error);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* KC2 (SCRUM-667): let hjælpetekst under et felt (fx "bruges kun til at
   kvittere") — afløser den ellers inline-stylede <small>-variant (signup.html
   m.fl., FØR KC0-konventionen), så nye skabeloner kan bruge en klasse. */
.nc-hint {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-stone);
}

/* KC2 (SCRUM-667): stak af .nc-field'er MED indbyrdes afstand — .nc-field
   selv sætter kun sin INTERNE label/input/fejl-gap, ikke afstanden til det
   NÆSTE felt. Bruges på selve <form>-elementet i report_product.html. */
.nc-report-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* KC3 (SCRUM-668): nulstiller <form>-elementets standardmargin til et
   enkelt-knap handlings-formular i en tabelcelle eller handlings-række —
   klassificeret erstatning for den kopierede inline "style=margin:0" i
   ældre skabeloner (admin_user_detail.html m.fl., FØR KC0-konventionen);
   nye/ændrede skabeloner (admin_products.html, admin_report_detail.html)
   bruger denne klasse i stedet. */
.nc-inline-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

/* KC3 (SCRUM-668): kompakt tekstinput i en `.nc-inline-form` (fx
   nedtagningsbegrundelsen i admin_products.html's handlings-kolonne) —
   `.form-control-nc`s width:100% ville ellers strække sig ubestemt i en
   inline-flex-container uden defineret bredde. */
.nc-inline-form__input {
  width: 14rem;
  max-width: 40vw;
}

/* KC3 (SCRUM-668): vandret række af handlings-formularer/-knapper (fx
   TAG NED / GENUDGIV / AFVIS ved siden af hinanden på en detaljeside eller
   i en tabelcelle). */
.nc-action-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

/* KC7 (SCRUM-672): lodret stak af flere handlings-formularer i ÉN
   tabelcelle (fx "Kvittér" + "Markér løst" i /admin/reconciliation, hvor
   .nc-action-row's vandrette række ville blive for bred i en tabel). Samme
   klassificerede-frem-for-inline-style-disciplin som .nc-inline-form
   ovenfor. */
.nc-action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* KC3 (SCRUM-668): simpel label/værdi-metaliste til detaljesider — samme
   grid-layout som de inline-stylede <dl>'er i admin_moderation_detail.html/
   admin_user_detail.html (FØR KC0-konventionen), nu som en klasse så nye
   skabeloner (admin_report_detail.html) kan genbruge den uden inline style.
   <dt> bruger den eksisterende .nc-label-klasse. */
.nc-meta-list {
  margin: 0 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
}

.nc-meta-list dd {
  margin: 0;
}

/* KC3 (SCRUM-668): generisk read-display-blok (label + fritekst) på en
   detaljeside, MED bundmargin til næste sektion — afløser den kopierede
   inline "style=margin:..." på overskrift/afsnit i ældre skabeloner. */
.nc-detail-section {
  margin-bottom: var(--space-6);
}

/* KC3 (SCRUM-668): bevarer linjeskift i bruger-indtastet fritekst (fx en
   anmeldelses beskrivelse) uden en <pre>-blok. */
.nc-text-pre-line {
  white-space: pre-line;
}

/* KC3 (SCRUM-668): skilletegn FØR en handlings-række (fx knapper efter en
   tekstblok) — samme visuelle skillelinje som admin_moderation_detail.html
   brugte inline, nu som modifier på .nc-action-row. */
.nc-action-row--divider {
  border-top: 1px solid var(--color-sand);
  padding-top: var(--space-5);
}

/* KC3 (SCRUM-668): afstand mellem to selvstændige handlings-formularer
   stablet under hinanden (fx "tag ned"-formularen ovenover "afvis"-
   formularen på anmeldelses-detaljen). */
.nc-report-form--section {
  margin-bottom: var(--space-6);
}

/* Billedupload drop-zone */
.nc-upload-zone {
  border: 2px dashed var(--color-sand);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  background-color: var(--color-bg-card);
}

.nc-upload-zone:hover,
.nc-upload-zone:focus-within {
  border-color: var(--color-primary-light);
  background-color: var(--color-bg-section);
}

.nc-upload-zone__icon {
  color: var(--color-stone);
  margin-bottom: var(--space-3);
}

.nc-upload-zone__text {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-stone);
  margin: 0;
}

.nc-upload-zone__subtext {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Live-preview af valgte billeder (A5/SCRUM-328) — udfyldes klientside via
   vanilla-JS FileReader ved 'change' på fil-inputtet; tomt/skjult indtil da. */
.nc-image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.nc-image-preview:empty {
  margin-top: 0;
}

.nc-image-preview__thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-sand);
  background: var(--color-bg-section);
}

/* Enkelt-billede-variant (butiksbillede i seller.html) — ét lidt større preview */
.nc-image-preview--single .nc-image-preview__thumb {
  width: 120px;
  height: 120px;
}

/* Kategori-badge (pill) */
.nc-badge-category {
  display: inline-block;
  background-color: var(--color-sand);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--weight-semi);
  letter-spacing: var(--label-letter-spacing);
  text-transform: var(--label-transform);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
}

/* RT3 (SCRUM-705, spec §5.3.6): status-badgen ("Privat sælger" /
   "Erhvervsdrivende", _seller_status.html::seller_status_badge) genbruger
   .nc-badge-category's pille-stil, men skal IKKE versaliseres som
   kategori-tags. Modifier-klassen (.nc-seller-status-badge) findes allerede
   i markup'et, blot uden nogen regel indtil nu — kategori-pillens egen,
   generelle klasse (.nc-badge-category) røres IKKE. */
.nc-seller-status-badge {
  text-transform: none;
}


/* ====================================================================
   §2.7 Produktside — tovejs layout
   ==================================================================== */

.nc-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 767px) {
  .nc-product-layout {
    grid-template-columns: 1fr;
  }
}

/* Venstre: billede-galleri */
.nc-product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nc-product-gallery__main {
  position: relative; /* 4.2 (SCRUM-411): ankerpunkt for favorit-hjerte-overlayet (.nc-fav-form) */
  /* SCRUM-416 (spec §4 Story A, opsamling punkt 4): kvadratisk på web
     (var 4/3 tidligere) — mobil (product.html, @media ≤767px) har allerede
     haft 1/1 siden 4.5 (SCRUM-414); dette gør web-basisreglen ens. */
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-section);
}

.nc-product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nc-product-gallery__thumbs {
  display: flex;
  gap: var(--space-2);
}

.nc-product-gallery__thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition-fast);
  flex-shrink: 0;
}

.nc-product-gallery__thumb:hover,
.nc-product-gallery__thumb.is-active {
  border-color: var(--color-accent-dark);
}

.nc-product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Højre: produkt-info */
.nc-product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* 4.4 (SCRUM-413): forhindrer at et bredt barn (fx den horisontalt
     scrollende "mere fra skaberen"-række, som bevidst er bredere end sin
     container) presser HELE grid-sporet (.nc-product-layout) ud over
     viewportet på mobil — standard CSS-grid-grebet mod content-baseret
     auto-minstørrelse på grid-items. */
  min-width: 0;
}

.nc-product-info__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin: 0;
  line-height: 1.2;
}

.nc-product-info__seller {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-stone);
  margin: 0;
}

.nc-product-info__seller a {
  color: var(--color-accent-dark);
  text-decoration: none;
}

.nc-product-info__seller a:hover {
  text-decoration: underline;
}

.nc-product-info__favorite-count {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-stone);
  margin: 0 0 var(--space-2, 0.5rem);
}

.nc-product-info__price {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin: 0;
}

.nc-product-info__description {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}

.nc-product-info__shipping-note {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-stone);
  margin: 0;
}

/* Fuldbreds CTA i produktside */
.nc-product-info .btn-primary-nc {
  width: 100%;
  text-align: center;
  padding: 1rem 1.75rem;
  /* SCRUM-761: denne shorthand overskriver ELLERS .btn-primary-nc's
     letter-spacing-kompenserede padding-right (samme selector-specificitet-
     forbehold) — gentag kompensationen her, så CTA'en her forbliver
     vandret centreret. */
  padding-right: calc(1.75rem - var(--label-letter-spacing));
}

/* 4.4 (SCRUM-413, spec §4 Story 4.4 AC, mockup produkt-web-1/2): pill-form
   købsknapper — messing KØB NU over outlined LÆG I KURV. `.nc-buy-action`
   er ENESTE brugssted (product.html) — pill-facon scopet hertil, IKKE en
   global ændring af `.btn-primary-nc`/`.btn-secondary-nc--light` (bruges
   også andre steder, fx header, med den eksisterende --radius-md-facon). */
.nc-buy-action {
  border-radius: var(--radius-full);
}

/* RT2 (SCRUM-704, spec §5.2.2, KC0): deaktiveret KØB NU når sælgerens
   Stripe-onboarding ikke er gennemført endnu — klasse i stedet for en ny
   inline style (KC0/design-direction §2). */
.nc-buy-action--disabled {
  display: block;
  box-sizing: border-box;
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ikke på lager */
.nc-sold-out-notice {
  background-color: var(--color-bg-section);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-stone);
  text-align: center;
}

/* 4.2 (SCRUM-411, spec §4 Story 4.2 AC, mockup produkt-web-1): to
   tillidslinjer under købsknapperne — leveringstid + returret, messing-
   ikoner (jf. mockup). Genbruger --color-accent (samme messing-token som
   SælgerBlok-stjernen, .nc-seller-block__star) til ikonerne. */
.nc-trust-lines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
}

.nc-trust-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text);
  margin: 0;
}

.nc-trust-line__icon {
  flex-shrink: 0;
  color: var(--color-accent-dark);
}

/* SCRUM-742 (ejer-bestilt 2026-08-30): kurvens retur-/reklamationsnotits vises
   ÉN gang som fodnote UNDER den hvide varelistboks (cart.html) i stedet for pr.
   varelinje — kurven er single-seller (ADR-007 §3), så pr.-linje-teksten var
   redundant støj. Modifier af .nc-trust-line: samme typografi (font-body,
   text-body-sm), men dæmpet fodnote-farve + luft op til boksen.
   Farvevalg: neutral/dæmpet som brødteksten i sælger-info-baren øverst. Baren
   bruger det DEKORATIVE --color-stone, der iflg. WCAG-noten i
   njordcraft-tokens.css fejler AA som tekst (3.57:1) — fodnoten bruger derfor
   --color-text-muted (#6B6159, 5.50:1, AA-sikker), den nærmeste godkendte
   udgave af samme dæmpede grå. IKKE primærfarven (sælgernavnet). */
.nc-trust-line--cart-note {
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* KC2 (SCRUM-667, epic SCRUM-664): "Anmeld denne vare"-linket under
   tillidslinjerne — diskret afstand, ren spacing-hjælper (KC0-konventionen:
   .nc-* klasse i stedet for en inline style på selve <p>-tagget). */
.nc-report-link {
  margin-top: var(--space-4);
}


/* ====================================================================
   Generelle sektions- og layout-hjælpere
   ==================================================================== */

.nc-section {
  padding: var(--section-padding-y) 0;
}

.nc-section--alt {
  background-color: var(--color-bg-section);
}

.nc-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.nc-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin: 0;
}


/* ====================================================================
   Main og Footer
   ==================================================================== */

.nc-main {
  min-height: calc(100vh - 64px - 80px);   /* viewport - header - footer */
}

/* Forside: ingen ekstra padding — hero sidder kant-til-kant */
.nc-main--flush-top {
  padding-top: 0;
}

.nc-footer {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-6) 0;
  font-family: var(--font-body);
  font-size: var(--text-caption);
}

.nc-footer a {
  color: var(--color-accent-light);
  text-decoration: none;
}

.nc-footer a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* .nc-footer__link-btn (SCRUM-186/M1.3): "Bliv sælger" for en indlogget
   ikke-sælger er en POST-form (state-ændring, ADR-009 §5), ikke et link —
   men skal se ud som de øvrige footer-links. */
.nc-footer__link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-accent-light);
  cursor: pointer;
  text-decoration: none;
}

.nc-footer__link-btn:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* .nc-footer__link--current (SCRUM-380, 2.4): "Se skabere" på /sellers
   selv — kontekstuel deaktivering (ikke et klik til samme side, spec §4
   Story 2.4 AC), samme muted-treatment-princip som en disabled kontrol. */
.nc-footer__link--current {
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}

/* SCRUM-595: `align-items: center` gav mening da højresiden var én linje
   links. Nu er den to link-KOLONNER, der er højere end copyright-linjen —
   centrering ville lade copyrighten svæve midt ude i footeren. Toplinje-
   justering sætter den på linje med gruppeoverskrifterne. */
.nc-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.nc-footer__copy {
  margin: 0;
}

/* --------------------------------------------------------------------
   SCRUM-595 (spec specs/footer-grupperede-links.md): footerens links er
   delt i to navngivne grupper ("Information" / "Nyttige links") jf.
   ejerbeslutningen 2026-08-13 og GrejXperten-facit.

   DESKTOP (≥768px) = basis her: de to grupper står SIDE OM SIDE som
   kolonner (`.nc-footer__groups` = row), og hver gruppes links stables
   LODRET under sin overskrift (`.nc-footer__links` = column). Det er
   skiftet fra UI1's basis, hvor `.nc-footer__links` var én vandret
   række — rækken kan ikke bære en overskrift pr. gruppe.
   MOBIL (<768px) overskrives i blokken nedenfor.
   -------------------------------------------------------------------- */
.nc-footer__groups {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

/* Overskriften er ren tekst (intet href, ingen hover-underline, spec §3).
   Fuld hvid mod --color-primary (#1F3A4D) = ~12:1 kontrast, WCAG AA/AAA,
   og løfter titlen tydeligt over linkene (0.75 alpha) som i facit. */
.nc-footer__group-title {
  margin: 0 0 var(--space-2);
  color: #fff;
  font-weight: var(--weight-semi);
  font-size: var(--text-label);
}

.nc-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------
   UI1 (SCRUM-578, spec specs/ui-polish-wh2.md §4 + ejerbeslutning §8-2):
   rækken ovenfor havde hverken `flex-wrap` eller nogen @media-regel, så
   de 5-6 links lå på én linje uanset skærmbredde. På 360-430px blev
   <ul>'en bredere end containeren, og HELE dokumentet fik vandret scroll.

   Ejerens screendump (GrejXperten.dk's mobilfooter, vedhæftet SCRUM-578)
   er facit: link-sektionerne er LODRET STABLEDE, VENSTRESTILLEDE
   kolonner med god lodret luft — ikke en vandret række der ombryder.
   Derfor `flex-direction: column` frem for `flex-wrap: wrap`; en ombrudt
   række ville give ujævne, midterstillede linjer og ikke matche facit.

   ÉN kolonne ad gangen (ikke to side om side som i facit): ved 360px
   ville to kolonner give ~150px pr. label — "Privatlivspolitik" og
   "Købsbetingelser" ville ombryde midt i ordet. SCRUM-595 har nu tilføjet
   facits to navngivne grupper, men ejerbeslutningen 2026-08-13 holder
   dette argument i hævd: på mobil er grupperne STABLET LODRET (overskrift
   → links → overskrift → links) i fuld bredde, og kun på desktop står de
   ved siden af hinanden.

   Rækkerne får `min-height: 44px` (WCAG 2.5.5 touch-target) via flex —
   det er samtidig luften mellem linkene, så `gap` sættes til 0 for ikke
   at lægge afstand oven i afstand. Fuld bredde gør hele linjen til
   klikflade. `.nc-footer__link--current` (aria-current, SCRUM-380/G6/H6)
   får samme boks, så den aktive side står på linje med de øvrige — dens
   dæmpede farve og manglende href er uændret.

   Ét breakpoint, samme `max-width: 767px` som resten af filen bruger.
   Desktop (≥768px) rører vi ikke: samme række, samme afstande.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .nc-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* SCRUM-595: grupperne stables lodret i fuld bredde (gruppe 1 komplet,
     derefter gruppe 2) — aldrig side om side ved 360px. */
  .nc-footer__groups {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    width: 100%;
  }

  .nc-footer__group {
    width: 100%;
  }

  .nc-footer__links {
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }

  .nc-footer__links > li {
    width: 100%;
  }

  .nc-footer__links a,
  .nc-footer__links .nc-footer__link-btn,
  .nc-footer__links .nc-footer__link--current {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
    text-align: left;
  }
}


/* ====================================================================
   Nav 3 (SCRUM-194): Fælles side-komponenter — uddraget fra inline-styles
   på seller/me/order_detail/sellers/seller_profile (design-review fund 6:
   inline-drift var rodårsagen til det "uskarpe" udtryk). Visuel paritet;
   Nav 4 polerer oven på disse klasser.
   ==================================================================== */

/* Side-container-varianter (paritet med de gamle inline max-widths) */
.nc-page {
  padding-top: var(--space-8);
  padding-bottom: var(--space-10);
}

.nc-page--narrow { max-width: 640px; }   /* seller-dashboard (hæves i Nav 4) */
.nc-page--medium { max-width: 700px; }   /* me */
.nc-page--detail { max-width: 720px; }   /* order_detail */

/* SCRUM-396 (§10, ejer-efterjustering 2026-07-10): nulstiller KUN
   padding-top — til sider hvor et full-bleed element (fx butiksside-
   banneret, .nc-shop-header) allerede ligger foran denne .nc-page-
   container og selv skal flugte direkte med topbaren (AC 2). padding-
   bottom (sidens bundluft) er UÆNDRET. Samme navngivnings-mønster som
   den eksisterende `.nc-main--flush-top` (forsiden). */
.nc-page--flush-top {
  padding-top: 0;
}

/* Side-titel + undertitel */
.nc-page-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.nc-page-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-stone);
  margin-bottom: var(--space-6);
}

/* Hvidt kort (radius-lg + skygge) — seller/me-sektioner */
.nc-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

/* A8/SCRUM-332: kompakt kort-variant til statuskort med lidt indhold
   (fx NIVEAU, STRIPE CONNECT i "Min butik") — samme visuelle sprog
   (baggrund/radius/skygge fra .nc-card), men mindre padding/margin så
   kortet ikke fylder uforholdsmæssigt meget i forhold til indholdet. */
.nc-card--compact {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.nc-card--compact .nc-card__title {
  margin-bottom: var(--space-3);
}

.nc-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semi);
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
  letter-spacing: 0.04em;
}

.nc-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.nc-card__header .nc-card__title {
  margin: 0;
}

/* Panel (sand-border, radius-md) — order_detail-sektioner */
.nc-panel {
  background: var(--color-bg-card);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.nc-panel__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.nc-panel__text {
  font-family: var(--font-body);
  color: var(--color-text);
}

/* Statusbeskeder (succes/advarsel) — afløser inline alert-bokse */
/* UX2/SCRUM-631 (note KO2): basen satte hverken baggrund eller kant, så en
   `<div class="nc-alert">` UDEN modifier (fx admin_kpi_konvertering.html:39's
   bindende "ærlige skiltning") renderede som en usynlig, ustylet boks. Den
   får nu en neutral, aflæselig basis; modifierne står uændret nedenfor og
   vinder på kildeorden. */
.nc-alert {
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  background: var(--color-bg-section);
  border: 1px solid var(--color-sand);
}

.nc-alert p {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  margin: 0;
  line-height: 1.6;
}

.nc-alert--success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
}

.nc-alert--success p { color: var(--color-success); }

.nc-alert--warning {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
}

.nc-alert--warning p { color: var(--color-warning); }

/* RT1 (SCRUM-703, epic SCRUM-702, spec §5.1.2): sitewide uverificeret-
   email-banner (base.html). .nc-alert-basen har ingen afstand mellem sin
   <p> og en efterfølgende <form> (begge margin:0 som standard) — uden
   denne regel ville GENSEND-knappen sidde klistret op ad teksten. */
.nc-verify-banner form {
  margin-top: var(--space-3);
}

/* Liste-rækker (varer/ordrer) */
.nc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nc-list-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-sand);
}

.nc-list-row__link {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-decoration: none;
}

/* LH1 (SCRUM-639, epic SCRUM-638, spec §4 LH1/§9-1, ejer-godkendt
   2026-08-19): --color-stone → --color-text-muted. --color-stone er
   DEKORATIV og fejler AA som tekst (3,57:1 på sidebaggrund) — se
   njordcraft-tokens.css's WCAG-note. Denne klasse bærer labelen over hvert
   KPI-tal på /admin og /admin/kpi, altså læsetekst. --color-text-muted
   holder 5,50:1 (AA-sikker). Parkeret siden UX4 (SCRUM-633); vagt-testen i
   tests/test_ux4_konto_formular_listegrammatik.py er omskrevet med denne
   story. De øvrige 31 --color-stone-tekstregler er uden for scope. */
.nc-list-row__meta {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

/* Status-badge (pill) — genbruges af Nav 4/Nav 5 */
.nc-status-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
}

.nc-status-badge--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.nc-status-badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.nc-status-badge--muted {
  background: var(--color-sand);
  color: var(--color-text-muted);   /* T1: stone på sand gav 2,99:1 */
}

.nc-status-badge--danger {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* LH10 (SCRUM-640, epic SCRUM-638, spec §4 LH10, ejerbeslutning §9-3):
   A1's drift-kort (admin_dashboard.html) farves efter tilstand, så et felt
   på nul er visuelt roligt og et felt over nul kræver handling — første
   gang det giver mening, efter LH1 rettede dispute-tallet. Farven står
   aldrig alene (note T6): kortets nc-status-badge-tekst ("Roligt"/"Kræver
   handling"/"Kunne ikke hentes") bærer stadig informationen — dette er
   udelukkende en kant-accent. Genbruger --color-success/--color-warning/
   --color-sand fra nc-alert/nc-status-badge ovenfor; ingen nye tokens. */
.nc-drift-card {
  border-left: 4px solid transparent;
}

.nc-drift-card--ok {
  border-left-color: var(--color-success);
}

.nc-drift-card--action {
  border-left-color: var(--color-warning);
}

.nc-drift-card--unknown {
  border-left-color: var(--color-sand);
}

/* A12/SCRUM-336: "Kom godt i gang"-tjekliste (Min butik) — genbruger
   nc-card/nc-status-badge-sproget. Ingen ny farve-/spacing-token. */
.nc-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nc-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.nc-checklist__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-sand);
  color: var(--color-stone);
}

.nc-checklist__item--done .nc-checklist__icon {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.nc-checklist__label {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.nc-checklist__item--done .nc-checklist__label {
  color: var(--color-stone);
}

/* Brødkrumme */
.nc-breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-caption);
  color: var(--color-stone);
}

.nc-breadcrumb a {
  color: var(--color-stone);
  text-decoration: none;
}

.nc-breadcrumb a:hover {
  color: var(--color-primary);
}

.nc-breadcrumb__sep { color: var(--color-sand); }
.nc-breadcrumb__current { color: var(--color-text-muted); }

/* KC3 (SCRUM-668): bundmargin på <nav>-wrapperen om .nc-breadcrumb — afløser
   den inline "style=margin-bottom:..." som ældre detaljesider (admin_
   moderation_detail.html/admin_user_detail.html) satte direkte på <nav>. */
.nc-breadcrumb-nav {
  margin-bottom: var(--space-5);
}

/* Tom-tilstands-note + side-handlinger */
.nc-empty-note {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);   /* T1 */
  margin: 0;
}

/* S5x (SCRUM-227 Stroem B): forsidens ("Nyeste Fund") aerlige tom-
   tilstand naar databasen har nul synlige varer -- erstatter E1.2's
   hardkodede attrap-produktkort (ejer-fund 2026-08-22, se index.html). */
.nc-forside-empty {
  text-align: center;
  padding: var(--space-8) 0;
}

.nc-forside-empty__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.nc-forside-empty__text {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.nc-page-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}


/* ====================================================================
   Nav 4 (SCRUM-195): Sælger-dashboard-polish — thumbnails, ≥44px
   touch-targets (design-direction §3.5), badge-statusser, bredere side.
   ==================================================================== */

/* Dashboard-bredde: op fra 640px (Nav 3-paritet) til læsevenlig bred side */
.nc-page--wide { max-width: 960px; }

/* Produktthumbnail i varelisten (fallback: placeholder med ikon) */
.nc-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-bg-section);
  flex-shrink: 0;
}

.nc-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-stone);
}

/* SCRUM-494 (spec §3.1/§5.3.1): arvet produktbillede i eksemplar-listen —
   nedtonet, så en sælger aldrig forveksler det arvede foto med
   eksemplarets eget (kombineres altid med "Arver produktbillede"-mærkatet
   i exemplar_list.html, ikke opacity alene). */
.nc-thumb--inherited {
  opacity: 0.5;
}

/* Vare-række: thumbnail + indhold side om side */
.nc-product-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.nc-product-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Små handlings-knapper med fuldt touch-target (≥44px, §3.5) —
   afløser de gamle 2×6px-padding REDIGER/SLET/GEM */
/* UX2/SCRUM-631 (note KO2): basen satte hverken `color` eller `border`, så
   en `<a class="nc-btn-sm">` uden modifier arvede Bootstrap 5.3.3's
   link-blå #0d6efd (CDN i base.html:95) og en `<button class="nc-btn-sm">`
   blev en native grå UA-knap — 15+ steder, heraf flere på siderne med
   penge. Basen er nu et neutralt njordcraft-udtryk; modifierne nedenfor
   overskriver den på kildeorden, så intet eksisterende udtryk ændres. */
.nc-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-sand);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.nc-btn-sm:hover { background: var(--color-bg-section); }

.nc-btn-sm--accent {
  color: var(--color-accent-dark);
  border: 1px solid var(--color-accent-dark);
}

.nc-btn-sm--accent:hover { background: rgba(168, 131, 46, 0.08); }

.nc-btn-sm--danger {
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

.nc-btn-sm--danger:hover { background: var(--color-error-bg); }

/* UX2/SCRUM-631 (note KO3): `.nc-btn-delete` blev brugt 7 steder — de
   irreversible handlinger i hele produktet (refunder, annullér ordre,
   anonymisér konto, fortryd køb) — og havde NUL definitioner i CSS. Klassen
   var en tom hook, så hver knap bar en ~200 tegn kopieret inline-stilstreng.
   `.nc-btn-danger` er den rigtige komponent; `.nc-btn-delete` bevares som
   alias, så de 7 nuværende kaldesteder får en definition med det samme og
   UX6/UX7 kan fjerne inline-strengene uden at skulle omdøbe markup i samme
   ombæring.
   PLACERING (bevidst): reglen står FØR `.nc-icon-btn-sm--danger` nedenfor,
   fordi seller_products.html:265 kombinerer de to klasser — ikon-varianten
   skal fortsat vinde på kildeorden (lektionen fra SCRUM-375/381/388). */
.nc-btn-danger,
.nc-btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  border-radius: var(--radius-sm);
  color: var(--color-error);
  background: transparent;
  border: 1px solid var(--color-error);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.nc-btn-danger:hover,
.nc-btn-delete:hover { background: var(--color-error-bg); }

.nc-btn-sm--primary {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.nc-btn-sm--primary:hover { background: rgba(31, 58, 77, 0.06); }

/* UX2/SCRUM-631 (note EJER-2): stille variant til GENTAGNE række-handlinger
   ("Markér som læst" i et feed på 20 notifikationer). Uden ramme og i
   label-grad, så den ikke bærer samme vægt som side-niveau-handlingen
   ("MARKÉR ALLE SOM LÆST"), men med `min-height`/`min-width: 44px` arvet
   uændret fra basen — knappen bliver visuelt lettere, ikke mindre at ramme
   (T3 er ikke brudt). En gennemsigtig kant holder den på præcis samme
   ydre mål som sine bordede søskende, så en blandet række ikke hopper. */
.nc-btn-sm--quiet {
  color: var(--color-primary);
  border: 1px solid transparent;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-label);
}

.nc-btn-sm--quiet:hover {
  background: var(--color-bg-section);
  text-decoration: underline;
}

/* Kompakte ikon-knapper i lister (A9, SCRUM-333) — afløser tekst-varianten
   af .nc-btn-sm for rene navigations-/destruktive handlinger (fx REDIGER/
   SLET i "Mine varer"). Firkantet, ikon-only, samme touch-target (44px) og
   farve-par som .nc-btn-sm, jf. .nc-cart__remove-btn-mønsteret i cart.html.
   `gap` (A10, SCRUM-334) understøtter også ikon+kort-label-varianten (fx
   "Print"/"Label" i "Mine salg") uden at påvirke de rene ikon-only-knapper
   fra A9 (som kun har ét flex-barn). */
.nc-icon-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.nc-icon-btn-sm--accent {
  color: var(--color-accent-dark);
  border: 1px solid var(--color-accent-dark);
}

.nc-icon-btn-sm--accent:hover { background: rgba(168, 131, 46, 0.08); }

.nc-icon-btn-sm--danger {
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

.nc-icon-btn-sm--danger:hover { background: var(--color-error-bg); }

/* S7 (SCRUM-757): navy-variant til den ene handling i en række der NAVIGERER
   videre i samme fane ("Åbn ordre" i Mine salg) — modsat --accent, der på de
   samme rækker markerer dokument-knapper som åbner en PDF i en ny fane. Ikke
   en ny farve: samme --color-primary som tabellens egne links (.nc-table__link),
   ~12:1 på kort-baggrunden, så konturen er tydelig uden at overdøve guldet. */
.nc-icon-btn-sm--primary {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.nc-icon-btn-sm--primary:hover { background: var(--color-bg-section); }

/* Lager-input med fuldt touch-target */
.nc-stock-input {
  width: 84px;
  min-height: 44px;
  padding: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
}

/* Inline <select> i admin-kort (SCRUM-484). Samme udtryk som .nc-stock-input,
   men bredden følger den længste valgmulighed i stedet for et fast tal-felt —
   .nc-stock-input's width:84px afkortede teksten ("Simpel fragt"/"Shipmondo").
   min-width sikrer et roligt felt selv ved korte labels; max-width forhindrer
   overløb i den flex-wrappede formular på smal skærm. */
.nc-select-inline {
  width: auto;
  min-width: 12rem;
  max-width: 100%;
  min-height: 44px;
  padding: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nc-select-inline:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(31, 58, 77, 0.12);
  outline: none;
}

/* ================================================================
   Admin-center 3.0 (R1, SCRUM-211) — fælles side-layout + tabel-udtryk
   Alle admin-sider deler bredde (960px), header og tabel-i-kort-look
   (spec admin-profil-3-0 §2, epic-AC 1). Afløser inline-styles.
   ================================================================ */

.nc-admin-page {
  max-width: 960px;
  padding-top: var(--space-8);
  padding-bottom: var(--space-10);
}

.nc-admin-page__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.nc-admin-page__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  color: var(--color-primary);
  margin: 0;
}

/* UX2/SCRUM-631 (note T1): --color-stone → --color-text-muted. Se
   WCAG-noten i njordcraft-tokens.css for de regnede kontrasttal. */
.nc-admin-page__context {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nc-admin-page__intro {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);   /* T1: stone fejler AA */
  margin-bottom: var(--space-6);
}

/* Kort der omslutter en tabel (samme udtryk som Ordrer/Varer) */
/* UX2/SCRUM-631 (note KO1): reglen var `overflow: hidden`, og fordi 13 af
   fladens 24 tabeller ligger direkte i kortet UDEN en scroll-wrapper, blev
   kolonner (Status, handlings-knapper, "Se ordre →") klippet af i stilhed —
   uden scrollbar og uden noget tegn på at der manglede data. Rettelsen er
   dokumenteret én gang i admin_reconciliation.html:12-19 men blev aldrig
   båret videre; her rulles den ud fra ét sted til alle tabel-kort.
   `overflow-y: hidden` bevarer den oprindelige lodrette klipning (og dermed
   kortets afrundede hjørner), så ændringen kun tilføjer vandret scroll. */
.nc-table-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
  overflow-y: hidden;
}

/* Navngivet afløser for de 11 inline `overflow-x:auto`-wrappere (KO1's
   anden halvdel). Tages i brug af UX3-UX7 når filerne alligevel åbnes;
   `tabindex="0"` på wrapperen hører til dér (markup, ikke CSS — T4). */
.nc-table-scroll {
  overflow-x: auto;
}

.nc-table-card__header {
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-sand);
}

.nc-table-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  color: var(--color-primary);
  margin: 0;
}

.nc-table-card__count {
  font-size: var(--text-caption);
  color: var(--color-stone);
  font-weight: var(--weight-regular);
  margin-left: var(--space-3);
}

/* SCRUM-418 (spec rette-epic-eksemplar-efterjusteringer.md §4 Story C,
   punkt 6): 'flush'-modifier for sælger-/kontosidernes tabel-/liste-
   sektioner (Mine varer, Mine salg, Mine ordrer, eksemplar-styring) —
   fjerner kort-udtrykket (bg/skygge/radius/padding) så tabellen udnytter
   fuld containerbredde. SCOPED: rører IKKE basisklasserne .nc-card/
   .nc-table-card (bruges bredt andre steder, fx admin-sider og "Min
   butik"-statuskort — jf. rod-CLAUDE.md §5 scope-værn). Headeren beholder
   sin titel/CTA og får en divider under sig i stedet for kortets skygge
   (tabel-med-divider-idiom — matcher .nc-table-card__header/
   .nc-table tbody-linjerne, som allerede bruges på admin-siderne). */
.nc-card--flush,
.nc-table-card--flush {
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.nc-card--flush {
  padding: 0;
}

.nc-card--flush .nc-card__header,
.nc-card--flush > .nc-card__title {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-sand);
}

/* Selve tabellen — kolonneoverskrifter i sektion-baggrund, linjer mellem rækker */
.nc-table {
  width: 100%;
  border-collapse: collapse;
}

.nc-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-semi);
  color: var(--color-text-muted);   /* T1: stone gav 3,35:1 på bg-section */
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--color-bg-section);
}

.nc-table td {
  padding: var(--space-4);
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text);
}

.nc-table th:first-child,
.nc-table td:first-child { padding-left: var(--space-6); }

.nc-table th:last-child,
.nc-table td:last-child { padding-right: var(--space-6); }

.nc-table tbody tr { border-top: 1px solid var(--color-sand); }

/* Celle-varianter */
/* UX2/SCRUM-631 (note KO9 — LAYOUT, ikke beregning): beløbskolonner sat i
   Inter flugtede ikke ciffer for ciffer, fordi `tabular-nums` ikke fandtes
   ét eneste sted i repoet. Rent typografisk; hverken øre-formatering eller
   beregning er rørt (spec §5.1). */
.nc-table__right {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.nc-table__nowrap { white-space: nowrap; }
/* SCRUM-765: centreret kolonne (ordrenr. i Mine salg) — header + celler. */
.nc-table__center { text-align: center; }
.nc-table__muted { color: var(--color-text-muted); }   /* T1 */

/* Primær celle-link (fx titel/navn → detaljeside) */
.nc-table__link {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-decoration: none;
}

.nc-table__link:hover { text-decoration: underline; }

/* Tom-tilstand inde i tabel-kortet */
.nc-table__empty {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);   /* T1 */
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Print (U5 / SCRUM-244): printvenlig ordre-visning — browser-print skjuler
   navigation, footer, knapper og forms; panelerne holdes samlet pr. side.
   --------------------------------------------------------------------------- */
@media print {
  .nc-header,
  .nc-footer,
  .nc-mobile-nav,
  .nc-page-actions,
  .nc-print-hide,
  form,
  button {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .nc-panel {
    break-inside: avoid;
    border-color: #ccc;
  }
}

/* ---------------------------------------------------------------------------
   Kurv-badge (U6 / SCRUM-245): antal varer på kurv-ikonet i nav'en.
   Server-renderet; skjult ved tom kurv (spannet renderes slet ikke).
   --------------------------------------------------------------------------- */
.nc-cart-link {
  position: relative;
}

.nc-cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--weight-semi);
  line-height: 17px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Notifikations-badge (F3 / SCRUM-286): ulæst-indikator på klokke-ikonet i
   nav'en. Rød (--color-error) modsat kurv-badgens accent-guld, så den ulæste
   notifikations-indikator skiller sig visuelt ud (spec §4 F3: "rød prik/tal").
   Server-renderet via unread_notification_count-Jinja2-globalen; skjult ved
   0 ulæste (spannet renderes slet ikke).
   --------------------------------------------------------------------------- */
.nc-notif-link {
  position: relative;
}

.nc-notif-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-error);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--weight-semi);
  line-height: 17px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Sælger-badges (B1 / SCRUM-293, epic SCRUM-291): "Pro" (live tier, label
   forkortet fra "Pro sælger" i SCRUM-759), "Foretrukket" (forkortet fra
   "Foretrukket sælger") og "Hurtig forsendelse" (seller_badges-snapshot,
   ADR-027 — fyldes af B2/B3). Genbruger .nc-status-badge-familiens farvesprog
   (guld/accent i stedet for semantiske farver — badges er udmærkelser, ikke
   statusser). Kompakt visning (produktkort): kun ikon. Fuld visning
   (butiksprofil, .nc-seller-badges--full): ikon + label.

   Tooltip vises ved hover/focus via CSS — ingen JS. Et tryk på mobil giver
   knappen fokus (native), så :focus dækker "tap" uden separat håndtering.
   --------------------------------------------------------------------------- */
.nc-seller-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.nc-seller-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--color-sand);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  padding: 4px;
  line-height: 0;
  cursor: help;
}

.nc-seller-badges--full .nc-seller-badge {
  padding: 4px 10px 4px 8px;
}

.nc-seller-badge__label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.nc-seller-badge__tooltip {
  /* SCRUM-762 (ejer-fund 2026-09-05): var tidligere centreret på badgen
     via en 50%-forskudt venstrekant kombineret med en negativ vandret
     halv-transform (klassisk centrerings-trick). Badges sidder ALTID i
     venstre side af deres række (kompakt varekort-badge-slot, .nc-seller-badges
     i sælgerblok/-header) — en centreret 200-260px tooltip stak derfor
     langt ud til VENSTRE for badgen, som lå tæt på kortets/rækkens egen
     venstre kant. Den kant klippes af en overflow-ancestor andetsteds
     (forsidekarrusellens scroll-container, .nc-carousel__track — som
     IKKE må ændres, den overflow er nødvendig for scroll, jf. AC c).
     Fix: venstrestil tooltippen til badgens EGEN venstre kant i stedet
     for at centrere den — den udvider sig nu kun MOD HØJRE, ind i
     kortets/rækkens egen bredde, uanset hvor tæt badgen sidder på en
     venstre kant. Gælder ALLE badges (ikke kun den første) og ALLE
     render-steder (varekort, /products-grid, butiksside-header,
     produktside), da alle bruger samme venstre-klyngede layout. */
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  transform: translateY(4px);
  min-width: 200px;
  max-width: 260px;
  background: var(--color-primary-dark);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 20;
}

.nc-seller-badge:hover .nc-seller-badge__tooltip,
.nc-seller-badge:focus .nc-seller-badge__tooltip,
.nc-seller-badge:focus-visible .nc-seller-badge__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ====================================================================
   0.5 (SCRUM-366) — Accordion-komponent (delt, Epic SCRUM-364)
   ==================================================================== */

.nc-accordion {
  border-top: 1px solid var(--color-sand);
}

.nc-accordion__item {
  border-bottom: 1px solid var(--color-sand);
}

.nc-accordion__heading {
  margin: 0;
}

.nc-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-semi);
  color: var(--color-primary);
}

.nc-accordion__trigger:hover {
  color: var(--color-primary-light);
}

.nc-accordion__trigger:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.nc-accordion__chevron {
  flex-shrink: 0;
  color: var(--color-stone);
  transition: transform var(--transition-fast);
}

.nc-accordion__trigger[aria-expanded="true"] .nc-accordion__chevron {
  transform: rotate(180deg);
}

.nc-accordion__panel[hidden] {
  display: none;
}

.nc-accordion__panel-inner {
  padding: 0 var(--space-1) var(--space-4);
  color: var(--color-text);
  font-size: var(--text-body-sm);
  line-height: 1.6;
}

/* ====================================================================
   0.3 (SCRUM-367) — SælgerBlok-komponent (delt, Epic SCRUM-364)

   "row"-varianten genbruger de eksisterende .nc-seller-card-klasser
   (visuel paritet med den refaktorerede sellers.html, se
   _seller_block.html) og tilføjer kun .nc-seller-block__rating (delt med
   "card"). "card"-varianten (produktside, EPIC 4) har egne klasser.
   ==================================================================== */

/* Delt mellem "row" og "card": messingstjerne + "4,8 · 23 anmeldelser".
   Skjules helt af makroen når review_count er 0/None (ingen tom linje). */
.nc-seller-block__rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-stone);
}

.nc-seller-block__star {
  flex-shrink: 0;
  color: var(--color-accent);
}

.nc-seller-block--card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.nc-seller-block--card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.nc-seller-block__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.nc-seller-block__info {
  flex: 1 1 auto;
  min-width: 0;
}

.nc-seller-block__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.nc-seller-block__name {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semi);
  color: var(--color-primary);
}

.nc-seller-block__cta {
  flex-shrink: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semi);
  color: var(--color-accent-dark);
  white-space: nowrap;
}

@media (max-width: 576px) {
  .nc-seller-block--card {
    flex-wrap: wrap;
  }

  .nc-seller-block__cta {
    width: 100%;
    text-align: right;
  }
}

/* ====================================================================
   0.4 (SCRUM-368) — "Vis flere"-indlæsning (delt, Epic SCRUM-364)
   Erstatter klassisk paginering. Genbruger btn-secondary-nc--light
   (samme sekundær-knap-stil som resten af biblioteket) — ingen ny
   knap-variant opfundet. Tæller er diskret, samme mønster som
   listing.html's nuværende "Side X af Y".
   ==================================================================== */

.nc-show-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-10);
}

.nc-show-more__counter {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--color-stone);
}

.nc-show-more__btn {
  min-width: 220px;
  text-align: center;
}

/* 1.4 (SCRUM-375) — "Vis flere"-knappen er fuld bredde på mobil (Epic
   SCRUM-371 "Køber-UI 1: Produktoversigt", spec §4 Story 1.4). Kun
   knappen (width: 100%) — tælleren ovenfor forbliver centreret tekst,
   uændret. Genbruger samme .nc-show-more__btn-klasse (ingen ny variant). */
@media (max-width: 767px) {
  .nc-show-more__btn {
    width: 100%;
  }
}

/* ====================================================================
   0.1 (SCRUM-369) — FilterBar-komponent (delt, Epic SCRUM-364)
   Kompakt filter-/sorterings-linje: kategori-pills + toggle-switch(e) +
   stylet sorterings-dropdown. Sidste komponent i epicen — side-integration
   (globale/butiks-/skaber-kategorier) følger i EPIC 1-4.
   ==================================================================== */

.nc-filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.nc-filter-bar__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Kategori-pill: genbruger .nc-badge-category (hvid baggrund/mørkeblå
   tekst, inaktiv-tilstanden er allerede base-stilen) + sikrer et
   44px-tap-target (spec-AC mobil). Aktiv-modifieren er tilsigtet en enkelt
   klasse (ikke en compound-selector), så cascade-rækkefølgen (denne regel
   står efter .nc-badge-category i filen) er nok til at overskrive uden
   !important. */
.nc-filter-bar__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nc-filter-bar__pill--active {
  background-color: var(--color-primary);
  color: #fff;
}

/* SCRUM-736 (ejer-bug, mobil-screenshot 2026-08-28) — pillens label er nu
   to noder (`__pill-name` + `__pill-count`) i stedet for ét "Navn · antal"-
   tekstflow. Formålet er MOBIL (se mobil-media-queryen nedenfor): kun med
   to separate blokke kan navnet holdes på én linje (nowrap + ellipsis) og
   antallet lægges på linje 2, så alle chips får SAMME højde.

   DESKTOP er bevidst uændret (AC 4): pillen er stadig én linje, og den
   tidligere `&middot;`-separator gengives her som dekorativt generated
   content på tælle-noden. Separatoren er ren typografi — betydningen ligger
   i de to noder — så den hører hjemme i CSS og ikke i markup'et, og den
   forsvinder automatisk i den stablede mobil-visning (`content: none`).
   `em`-baserede afstande følger pillens egen font-size. */
.nc-filter-bar__pill-count::before {
  content: "\00B7";
  margin-right: 0.35em;
}

.nc-filter-bar__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.nc-filter-bar__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nc-filter-bar__toggle-label {
  font-size: var(--text-body-sm);
  color: var(--color-text);
}

/* Toggle-switch: <a href> (no-JS-fundament, spec-AC) stylet som switch —
   IKKE to pills. Messingfarve (--color-accent) i aktiv tilstand. */
.nc-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.nc-switch__track {
  position: relative;
  display: block;
  width: 40px;
  height: 22px;
  border-radius: var(--radius-full);
  background-color: var(--color-sand);
  transition: background-color var(--transition-fast);
}

.nc-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast);
}

.nc-switch--active .nc-switch__track {
  background-color: var(--color-accent);
}

.nc-switch--active .nc-switch__thumb {
  transform: translateX(18px);
}

.nc-switch:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}

/* Sorterings-dropdown: fungerende <select> (a11y + no-JS) — visuelt
   omstylet som pill med egen chevron. `appearance: none` fjerner browserens
   native select-udseende; chevronet er en absolut-positioneret SVG
   ovenpå (pointer-events: none, så klik/tastatur stadig rammer <select>). */
.nc-filter-bar__sort {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.nc-filter-bar__sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nc-filter-bar__sort-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--color-bg-card);
  border: 1.5px solid var(--color-sand);
  border-radius: var(--radius-full);
  padding: 0.625rem 2.25rem 0.625rem 1rem;
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semi);
  color: var(--color-primary);
  min-height: 44px;
  cursor: pointer;
}

.nc-filter-bar__sort-select:focus-visible {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(31, 58, 77, 0.12);
}

.nc-filter-bar__sort-chevron {
  position: absolute;
  right: 0.875rem;
  color: var(--color-stone);
  pointer-events: none;
}

/* Mobil (≤767px, samme breakpoint som Accordion/.nc-product-layout):
   kategori-pills bliver en horisontalt scrollende række med skjult
   scrollbar; toggle+sortering ligger allerede på egen række (samme
   to-række-layout som desktop, jf. mockup produkter-web.png). */
@media (max-width: 767px) {
  .nc-filter-bar__categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
    padding-bottom: var(--space-1);
    /* SCRUM-736: `stretch` er default, men skrives eksplicit her fordi
       chip-højde-låsen nedenfor afhænger af den — hver <li> får rækkens
       højde, og pillen (som selv er stretch-item i sin <li>) fylder den
       ud. Højre-padding giver plads under fade-kanten (`__nav::after`), så
       den SIDSTE chip kan scrolles helt fri af gradienten. */
    align-items: stretch;
    padding-right: var(--space-6);
  }

  .nc-filter-bar__categories::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge (Chromium) */
  }

  /* SCRUM-736 — SCROLL-AFFORDANCE: en gradient-fade i højre kant gør det
     synligt at rækken fortsætter. <nav>'en er ikke selv scroll-containeren
     (det er <ul>'en), så overlayet kan ligge fast i kanten uden at scrolle
     med. Ren CSS, ingen JS (`pointer-events: none`, så den aldrig stjæler
     et tap fra chippen under sig) og `aria-hidden` er unødvendigt: et
     ::after uden tekst er allerede usynligt for skærmlæsere. */
  .nc-filter-bar__nav {
    position: relative;
  }

  .nc-filter-bar__nav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--space-6);
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--color-bg-page));
  }

  /* SCRUM-736 — RODÅRSAGEN: <li>'erne (ikke pillerne) er ul'ens flex-items,
     og de havde ingen `flex-shrink: 0`. I den nowrap-scrollende række blev
     de derfor klemt sammen, så pillens tekst wrappede over 3-4 linjer og
     chippen voksede sig høj/cirkulær. `flex-shrink: 0` lader rækken løbe ud
     i sidelæns-scroll (som tiltænkt) i stedet for at klemme; `display: flex`
     gør samtidig pillen til et stretch-item, så alle chips i rækken får
     nøjagtig samme højde. */
  .nc-filter-bar__categories > li {
    display: flex;
    flex-shrink: 0;
  }

  /* SCRUM-736 — HØJDE-LÅSEN: chippen stables til præcis to linjer (navn +
     antal) og centreres. `min-height` sætter gulvet (over 44px-tap-
     targetet), stretch fra <li>'en ovenfor løfter alle chips til rækkens
     højde, så de bliver ens uanset skriftrendering. `min-width` holder
     korte chips ("ALLE") fra at skrumpe til en cirkel, `max-width` holder
     lange navne fra at æde hele skærmbredden — sammen giver de en rolig,
     ensartet række. */
  .nc-filter-bar__pill {
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 48px;
    min-width: 5.5rem;
    max-width: 11rem;
    padding: var(--space-2) var(--space-4);
    line-height: 1.25;
    text-align: center;
  }

  /* Lange navne ("Tekstil & Læder") holdes på ÉN linje og trunkeres med
     ellipsis i stedet for at wrappe — `max-width: 100%` binder noden til
     pillens content-box (i en kolonne-flex med `align-items: center` ville
     den ellers vokse til sin intrinsiske bredde og løbe ud over pillen). */
  .nc-filter-bar__pill-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Antallet er den sekundære linje. Hierarkiet laves med VÆGT og
     bogstavafstand — ikke med en lysere farve: noden arver `currentColor`,
     så både den inaktive (mørkeblå på sand) og den aktive chip (hvid på
     mørkeblå) beholder deres fulde WCAG AA-kontrast. */
  .nc-filter-bar__pill-count {
    font-weight: var(--weight-regular);
    letter-spacing: normal;
  }

  .nc-filter-bar__pill-count::before {
    content: none; /* midtprikken hører til én-linje-visningen (desktop) */
  }

  .nc-filter-bar__controls {
    justify-content: space-between;
  }
}

/* ====================================================================
   1.1 (SCRUM-372) — FilterBar side-integration på /products (Epic
   SCRUM-371 "Køber-UI 1: Produktoversigt", spec §4 Story 1.1 AC).
   Sticky-wrapper: filter_bar()-makroen (0.1) leveres uændret (ingen
   side-lokal kopi) — wrappet i denne klasse i stedet, så EPIC 0's makro
   ikke skal kende til side-specifik sticky-positionering.
   ==================================================================== */

.nc-filter-bar-sticky {
  /* Sticky UNDER .nc-header (som selv er sticky, top: 0, z-index: 1000,
     njordcraft-components.css §2.4) — lavere z-index sikrer at topbaren
     altid ligger ØVERST. top-værdien er en fast approksimation af
     headerens rendrede højde (logo + nav + lodret padding); finpudses
     visuelt ved behov (UI Designer, POC-skrabet jf. spec §6). */
  position: sticky;
  top: 64px;
  z-index: 900;
  background-color: var(--color-bg-page);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* 1.4 (SCRUM-375) — Sticky-offset verificeret mod DEN MOBILE headers
   højde (Epic SCRUM-371 "Køber-UI 1: Produktoversigt", spec §4 Story 1.4
   AC: "Filterrækken er sticky under den mobile header"). .nc-header's
   rendrede højde er konstrueret IDENTISK på mobil og desktop: samme
   var(--space-3) (12px) lodret padding + samme højeste barn i rækken
   (.nc-icon-btn's 44px min-tap-target — kurv-ikonet SKJULES IKKE på
   mobil, §2.4 linje ~351-357; hamburger-knappen selv er kun ~40px, altså
   lavere end kurv-ikonet, og afgør derfor ikke rækkehøjden). Ingen
   mobil-specifik header-højde-afvigelse fundet ved gennemgang — top: 64px
   (basereglen ovenfor) gælder derfor uændret. Eksplicit gentaget her
   (samme værdi) for at gøre verifikationen kontrakt-testbar, ikke kun
   implicit arvet. */
@media (max-width: 767px) {
  .nc-filter-bar-sticky {
    top: 64px;
  }
}

/* ====================================================================
   3.1 (SCRUM-384, epic SCRUM-382 "Køber-UI 3: Butiksside") — kompakt
   butiksheader (spec §4 Story 3.1, mockup butik-web.png/butik-mobil.png).

   .nc-shop-header               — full-bleed wrapper (banner + inner).
   .nc-shop-header__banner       — fuld bredde, ~4:1 (§8 PO-forslag, kosmetisk
                                    anbefaling kommunikeret i sælger-
                                    redigeringen, ikke håndhævet her); token-
                                    baseret --fallback ved NULL banner_image_url.
   .nc-shop-header__inner        — (SCRUM-396, §10) Bootstrap-gutter-container
                                    der bredde-begrænser identitets-/CTA-
                                    indholdet igen efter det full-bleed banner;
                                    bærer den negative margin-top der trækker
                                    indholdet op så avataren overlapper
                                    banneret (§4 AC "Avatar overlapper
                                    banneret").
   .nc-shop-header__body         — identitet (avatar+navn+tagline+nøgletal)
                                    til venstre, CTA (FØLG BUTIK+SoMe) til
                                    højre (flex-layout, ingen egen margin-top).
   .nc-shop-header__avatar       — runder + hvid ring så den skiller sig ud
                                    fra både banner og sidebaggrund.
   .nc-fav-btn--header           — FØLG BUTIK-modifier: fyldt CTA i
                                    --color-primary (§4 AC "primær, mørkeblå")
                                    i stedet for --inline's transparente
                                    kant-stil (genbruges uændret på
                                    produktsiden/andre steder).
   .nc-shop-header__some(-btn)   — SoMe-ikonerne, flyttet fra en selvstændig
                                    sektion op i headerens højre side.

   Mobil-centrering/stacking (§4 AC "Mobil") ER 3.5's scope (SCRUM-388) —
   den fulde centrering (identity-blok, navn-række, nøgletal, CTA-række,
   OG en ekstra `.nc-shop-header__body`-regel: flex-direction/align-items/
   text-align) ligger i den DEDIKEREDE 3.5-mediesektion længere nede i
   filen (efter 3.4), cascade-sikret ved forskellige selectors (`.nc-shop-
   header__inner`s margin-top-override herunder vs. `.nc-shop-header__body`s
   flex-centrering i 3.5-sektionen) — ingen overlappende deklaration, så
   rækkefølgen mellem dem er ikke afgørende for korrekthed (jf. test_
   scrum_388.py's markør-baserede regressions-lås). `.nc-shop-header__inner`s
   margin-top-override herunder er 3.1's egen, oprindelige mobil-justering
   (SCRUM-396: flyttet fra `.nc-shop-header__body` til `__inner`) og
   forbliver ellers urørt.

   SCRUM-396 (§10, ejer-efterjustering 2026-07-10, gælder BÅDE web og
   mobil): `.nc-shop-header` er nu placeret UDEN FOR `.container` i
   templaten (seller_profile.html) — samme full-bleed-mønster som
   `.nc-page-header` (SCRUM-144, ovenfor i filen). Banneret (direkte barn,
   ingen egen bredde-begrænsning) arver dermed automatisk viewportens
   fulde bredde UDEN vw-hacks (undgår den kendte 100vw-inkl.-scrollbar-
   overflow-bug). `.nc-shop-header__inner` (NY, `.container` + denne
   klasse i markup) genskaber Bootstrap-gutter-bredden for identitets-/
   CTA-indholdet og bærer nu den negative margin-top der lader avataren
   overlappe banneret (flyttet fra `.nc-shop-header__body`, samme
   ét-niveaus overlap-mekanik som før — body er stadig NÆSTEN direkte
   under banneret i normal flow, blot via denne ene ekstra
   gutter-container). `border-radius: 0` (var tidligere `--radius-lg`) —
   AC 4: banneret har INGEN rundede kanter. Sidens padding-top (der gav
   luft mellem topbar og banner via den nu fjernede breadcrumb) er
   nulstillet for denne side via `.nc-page--flush-top` (se `.nc-page`
   nedenfor) — banneret flugter dermed direkte med topbaren (AC 2).
   ==================================================================== */
.nc-shop-header {
  margin-bottom: var(--space-6);
}

.nc-shop-header__banner {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0;
  background: var(--color-sand);
}

.nc-shop-header__banner--fallback {
  background: linear-gradient(135deg, var(--color-sand), var(--color-bg-section));
}

.nc-shop-header__inner {
  margin-top: calc(-1 * var(--space-10));
}

.nc-shop-header__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 0 var(--space-3);
}

.nc-shop-header__identity {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  min-width: 0;
}

.nc-shop-header__avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  border: 4px solid var(--color-bg-page);
  background: var(--color-bg-page);
  flex-shrink: 0;
}

.nc-shop-header__info {
  padding-bottom: var(--space-1);
  min-width: 0;
}

.nc-shop-header__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.nc-shop-header__name {
  margin: 0;
  font-size: var(--text-h2);
}

.nc-shop-header__tagline {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.nc-shop-header__stats {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-2) 0 0;
  color: var(--color-stone);
  font-size: var(--text-body-sm);
}

.nc-shop-header__cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-1);
}

.nc-shop-header__follow-form {
  margin: 0;
}

/* FØLG BUTIK — fyldt navy CTA (§4 AC "primær, mørkeblå"), modifier på den
   EKSISTERENDE .nc-fav-btn--inline (F1/SCRUM-284) — form/action/CSRF
   uændret, kun visuel stil for butiksheaderens kontekst. */
.nc-fav-btn--header {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

.nc-fav-btn--header:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: #FFFFFF;
}

.nc-fav-btn--header.nc-fav-btn--active {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #FFFFFF;
}

.nc-shop-header__some {
  display: flex;
  gap: var(--space-2);
}

.nc-shop-header__some-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-sand);
  color: var(--color-primary);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.nc-shop-header__some-btn:hover {
  border-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
}

@media (max-width: 767px) {
  .nc-shop-header__banner {
    height: 120px;
  }

  .nc-shop-header__avatar {
    width: 72px;
    height: 72px;
  }

  .nc-shop-header__inner {
    margin-top: calc(-1 * var(--space-8));
  }
}

/* ====================================================================
   3.2 (SCRUM-385, epic SCRUM-382 "Køber-UI 3: Butiksside") — fanestruktur
   under butiksheaderen (spec §4 Story 3.2).

   .nc-shop-tabs                  — fane-bar (VARER/OM BUTIKKEN/
                                     ANMELDELSER). Rigtige <a href>-links
                                     (server-navigerer uden JS), INGEN
                                     JS-tab-widget.
   .nc-shop-tabs__tab              — inaktiv fane. min-height 44px (a11y
                                      tap-target).
   .nc-shop-tabs__tab--active      — aktiv fane: messing-understregning
                                      (--color-accent-dark). `aria-current`
                                      sættes i markup, ikke CSS-styret.
   .nc-shop-about(-some…)          — "OM BUTIKKEN"-panelet: beskrivelse +
                                      SoMe-tekst-links (supplement til
                                      headerens ikoner, 3.1 — §8 ejer-
                                      afgørelse om placering).

   Sticky + sidelæns-scrollende fane-bar på mobil ER Story 3.5's leverance
   (SCRUM-388, dedikeret mediesektion efter 3.4 nedenfor) — her kun
   desktop-fundamentet, uændret, med flex-wrap som no-JS-fallback.
   ==================================================================== */
.nc-shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  border-bottom: 1px solid var(--color-sand);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.nc-shop-tabs__tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  font-size: var(--text-label);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--label-transform);
  color: var(--color-stone);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

/* SCRUM-760 (ejer-beslutning 2026-09-05): "OM"-fanen viser nu butikkens
   eget navn ("OM " + display_name, seller_profile.html). Et meget langt
   butiksnavn må ikke sprænge fane-baren (AC b) — kun NAVNE-delen afkortes
   med ellipsis, det statiske "OM "-præfiks forbliver altid fuldt synligt.
   max-width er et skøn (typisk skærmbredde ÷ 3 faner minus luft) — juster
   frit hvis en fremtidig UI-gennemgang finder et bedre tal. */
.nc-shop-tabs__tab-name {
  display: inline-block;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  /* SCRUM-763: .nc-shop-tabs__tab er inline-flex, og flex-layout ignorerer
     whitespace-only tekstnoder — templatens "OM "-mellemrum kollapser derfor.
     Marginen genskaber afstanden mellem "OM" og navnet. */
  margin-left: 0.35em;
}

@media (min-width: 768px) {
  .nc-shop-tabs__tab-name {
    max-width: 220px;
  }
}

.nc-shop-tabs__tab:hover {
  color: var(--color-primary);
}

.nc-shop-tabs__tab--active,
.nc-shop-tabs__tab--active:hover {
  color: var(--color-accent-dark);
  border-bottom-color: var(--color-accent-dark);
}

.nc-shop-about__some {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-sand);
}

.nc-shop-about__some-heading {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--label-transform);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.nc-shop-about__some-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nc-shop-about__some-list a {
  color: var(--color-accent-dark);
  text-decoration: none;
}

.nc-shop-about__some-list a:hover {
  text-decoration: underline;
}

/* ====================================================================
   3.4 (SCRUM-387, epic SCRUM-382 "Køber-UI 3: Butiksside") — ANMELDELSER-
   fanens dormante skelet (spec §4 Story 3.4 + §7B): snit/antal-header
   (.nc-reviews-summary) + anmeldelseskort (.nc-review-card,
   _review_card.html). Kun reelt SYNLIGT når EPIC 6 fylder
   seller.review_count/rating/reviews (§7B skjul-ved-ingen-data) — se
   _seller_reviews_panel.html.
   ==================================================================== */
.nc-reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-body);
  color: var(--color-text);
}

.nc-reviews-summary__star {
  flex-shrink: 0;
  color: var(--color-accent-dark);
}

.nc-reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nc-review-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.nc-review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.nc-review-card__name {
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  color: var(--color-primary);
}

.nc-review-card__stars {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}

.nc-review-card__star {
  color: var(--color-sand);
}

.nc-review-card__star--filled {
  color: var(--color-accent-dark);
}

.nc-review-card__date {
  font-size: var(--text-body-sm);
  color: var(--color-stone);
  margin: 0 0 var(--space-2);
}

.nc-review-card__text {
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}

/* 5.2 (SCRUM-404, epic SCRUM-401 "Køber-UI 5: Eksemplar-model") — "Købte:
   [eksemplar-label]"-chip (mockup produkt-web-1.png). Udbygger EPIC 6's
   anmeldelseskort med en lille pille (samme pill-formsprog som
   .nc-badge-category — --radius-full/--color-sand) der viser HVILKET
   eksemplar anmelderen faktisk købte, + en lille thumbnail (eksemplar-foto
   ?? produkt-foto, ADR-035 §4). Kun synlig når review.purchased_chip er
   sat (deps.get_seller_reviews) — fail-closed, ingen chip uden data. */
.nc-review-card__purchased {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-bg-section);
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  color: var(--color-stone);
}

.nc-review-card__purchased-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.nc-review-card__purchased-thumb--placeholder {
  background-color: var(--color-sand);
}

/* ====================================================================
   6.1 (SCRUM-391, epic SCRUM-389 "Køber-UI 6: Anmeldelser") — Stjernevælger
   (input-widget, anmeldelsesformularen på order_detail.html).

   Rent CSS/HTML no-JS-mønster (tværgående DoD "ingen rå browser-kontroller"):
   fem RIGTIGE <input type="radio"> (native, tastatur-/skærmlæser-venlige,
   HTML5 required virker uændret) visuelt skjult (ikke display:none — forbliver
   fokuserbare) + deres <label>'er stylet som stjerner. Markup er BEVIDST i
   faldende rækkefølge (5→1) med `flex-direction: row-reverse`, så CSS'ens
   alm. søskende-selector (~) kan farve "denne stjerne og alle til VENSTRE for
   den" ved brug af :checked/:hover på et EFTERFØLGENDE element i DOM'en —
   samme klassiske teknik som resten af branchen bruger til CSS-only
   stjernevalg. Samme farvesprog som den read-only _review_card.html
   (--color-sand = tom, --color-accent-dark = fyldt).
   ==================================================================== */
.nc-star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
}

.nc-star-rating input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nc-star-rating label {
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-sand);
  transition: color var(--transition-normal);
}

.nc-star-rating input:checked ~ label,
.nc-star-rating label:hover,
.nc-star-rating label:hover ~ label {
  color: var(--color-accent-dark);
}

.nc-star-rating input:focus-visible + label {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ====================================================================
   3.5 (SCRUM-388, epic SCRUM-382 "Køber-UI 3: Butiksside") — Mobiltilpasning
   af butikssiden (spec §4 Story 3.5, mockup butik-mobil.png). SIDSTE
   story i epicen.

   Header centreres, FØLG BUTIK bliver dominerende/fuld-bredde-agtig med
   SoMe-ikoner ved siden af, fane-baren bliver sticky under den mobile
   top-header + sidelæns-scrollende (samme skjult-scrollbar-mønster som
   EPIC 0's kategori-pills / EPIC 2's featured-karrusel — 1.4/SCRUM-375-
   og 2.5/SCRUM-381-lektionen). ALLE regler her står EFTER deres
   respektive base-regler i filen (3.1's .nc-shop-header-sektion / 3.2's
   .nc-shop-tabs-sektion ovenfor) — cascade-sikret ved lige specificitet
   (kildeorden afgør, uanset @media-indlejring, jf. 1.4/SCRUM-375-lektionen
   fanget under selve implementeringen af DEN story). SCRUM-396: 3.1's
   margin-top-justering ovenfor bruger nu `.nc-shop-header__inner` (ikke
   `.nc-shop-header__body`) — de to selectors er derfor forskellige og
   deklarationerne kan ikke overlappe; rækkefølgen mellem dem er stadig
   efter, jf. konventionen.

   Kategori-pillernes sidelæns-scroll (EPIC 0's .nc-filter-bar__categories),
   sortering-på-egen-linje (.nc-filter-bar__controls) og 2-kolonne-
   produktgrid (.nc-products-grid, 1.4/SCRUM-375) kræver INGEN ny CSS her —
   butikssidens varer-fane genbruger allerede de delte filter_bar()/
   product_card()-makroer og .nc-products-grid-klassen 1:1 (verificeret af
   regressions-/genbrugstests i test_scrum_388.py, samme princip som
   2.5/SCRUM-381 for /sellers).

   Tilbage-pilen i top-headeren (§7F, LÅST) er en TEMPLATE-ændring, ikke
   CSS — se base.html's `mobile_nav_toggle`-block + seller_profile.html's
   override. Den genbruger .nc-hamburger 1:1 (samme vis/skjul-mekanik på
   mobil via EKSISTERENDE, UÆNDREDE CSS) — kun ikonet og målet (statisk
   href i stedet for JS-drawer-toggle) ændres i markup, INGEN ny/ændret
   .nc-hamburger-regel.
   ==================================================================== */
@media (max-width: 767px) {
  /* --- Header centreres (§4 AC "Header centreres på mobil") ---------- */
  .nc-shop-header__body {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .nc-shop-header__identity {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .nc-shop-header__name-row {
    justify-content: center;
  }

  .nc-shop-header__stats {
    justify-content: center;
  }

  /* --- FØLG BUTIK dominerende + SoMe ved siden (§4 AC) ---------------- */
  .nc-shop-header__cta {
    width: 100%;
    flex-wrap: nowrap;
  }

  .nc-shop-header__follow-form {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nc-fav-btn--header {
    width: 100%;
  }

  .nc-shop-header__some {
    flex-shrink: 0;
  }

  /* --- Fane-baren: sticky under den mobile top-header + sidelæns-
     scrollende i stedet for at klemme fane-teksten (§4 AC) ------------- */
  .nc-shop-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
    position: sticky;
    top: 64px; /* samme mobile top-header-offset som .nc-filter-bar-sticky,
                  1.4/SCRUM-375-verificeret (njordcraft-components.css
                  §"1.1 (SCRUM-372)") */
    z-index: 900;
    background-color: var(--color-bg-page);
    padding-top: var(--space-2);
  }

  .nc-shop-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge (Chromium) */
  }

  .nc-shop-tabs__tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ */
/* Cookie-notice (G4/SCRUM-439) — informativ, ikke-modal, diskret bund. */
/* Architect-note specs/g4-architect-note-cookie-notice.md §2.                */
/* ------------------------------------------------------------------ */

.nc-cookie-notice {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 800; /* under header (1000) og sticky fane-baren (900) — bevidst
                    lavere, så noticen aldrig konkurrerer med navigation. */
  max-width: 32rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-header-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
}

.nc-cookie-notice[hidden] {
  display: none;
}

.nc-cookie-notice__text {
  flex: 1 1 16rem;
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.5;
}

.nc-cookie-notice__text a {
  color: var(--color-accent-light);
  text-decoration: underline;
}

.nc-cookie-notice__text a:hover {
  color: var(--color-accent);
}

.nc-cookie-notice__dismiss {
  flex-shrink: 0;
  background-color: var(--color-accent-dark);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semi);
  cursor: pointer;
}

.nc-cookie-notice__dismiss:hover {
  background-color: var(--color-primary-light);
}

.nc-cookie-notice__dismiss:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .nc-cookie-notice {
    left: var(--space-2);
    right: var(--space-2);
    bottom: var(--space-2);
    max-width: none;
  }
}

/* ====================================================================
   G6/H6 (SCRUM-441/450): publicerede vilkårs-/politik-sider
   (privatlivspolitik, cookiepolitik, købsbetingelser, sælgervilkår).
   Læsevenlig bredde for langt løbende tekst — smallere end .nc-page--wide
   (dashboards), bredere end .nc-page--narrow (formularer).
   ==================================================================== */
.nc-page--legal { max-width: 760px; }

/* Markdown-til-HTML-renderet dokumentindhold (src/routers/legal.py) —
   generiske tag-selektorer (ikke .nc-*-klasser) fordi markup kommer fra
   Python-Markdown, ikke Jinja-templates. */
.nc-legal-content {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  line-height: 1.7;
}

.nc-legal-content h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.nc-legal-content h3,
.nc-legal-content h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semi);
  color: var(--color-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.nc-legal-content p,
.nc-legal-content ul,
.nc-legal-content ol {
  margin-bottom: var(--space-4);
}

.nc-legal-content ul,
.nc-legal-content ol {
  padding-left: var(--space-6);
}

.nc-legal-content li {
  margin-bottom: var(--space-2);
}

.nc-legal-content a {
  color: var(--color-primary);
  text-decoration: underline;
}

.nc-legal-content a:hover {
  color: var(--color-primary-light);
}

.nc-legal-content strong { font-weight: var(--weight-semi); }

.nc-legal-content hr {
  border: none;
  border-top: 1px solid var(--color-sand);
  margin: var(--space-8) 0;
}

.nc-legal-content code {
  font-size: 0.9em;
  background: var(--color-bg-section);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

.nc-legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--text-body-sm);
}

.nc-legal-content th,
.nc-legal-content td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-sand);
}

.nc-legal-content th {
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  background: var(--color-bg-section);
  white-space: nowrap;
}

.nc-legal-content table td:first-child,
.nc-legal-content table th:first-child { padding-left: 0; }

@media (max-width: 575.98px) {
  .nc-legal-content table { display: block; overflow-x: auto; }
}

/* Draft-banner (G6/H6, ejer-krav 2026-07-16): erstatter kildefilernes
   interne "UDKAST"-metadata-header ved rendering — tydelig, brugervendt
   note om at teksten er et foreløbigt udkast der finpudses juridisk.
   Genbruger .nc-alert--warning (samme visuelle sprog som formularfejl). */
.nc-legal-draft-notice { margin-bottom: var(--space-6); }


/* ====================================================================
   UX2 (SCRUM-631, epic SCRUM-629 "UX-review af backoffice") —
   KOMPONENT-FUNDAMENTET
   Kilde: specs/notes/ux-review-backoffice-note.md §11 (endelig liste),
   spec specs/ux-review-backoffice.md §4.2 (kun templates + CSS).

   Denne sektion tilføjer de komponenter der MANGLEDE. De øvrige UX2-
   rettelser (tabel-scroll, knap-/alert-basis, .nc-btn-danger, stone →
   text-muted, tabular-nums) er lavet IN PLACE ovenfor, ved siden af de
   regler de retter — hver med sin egen note.

   Ingen af reglerne her er taget i brug endnu: fundamentet leveres af
   UX2, ANVENDELSEN sker i UX3 (.nc-tabs), UX4 (.nc-form-row,
   .nc-form--narrow, .nc-list-row--split) og UX6/UX7 (.nc-btn-danger).

   Ingen JS, ingen inline-styles, ingen route rørt (route-count 149).
   ==================================================================== */

/* --------------------------------------------------------------------
   1. .nc-tabs — fælles fane-komponent (note IA2, T3; klar til UX3)
   Backoffice har to fane-striber (_admin_nav.html, _profile_nav.html) med
   BYTE-FOR-BYTE identiske inline-stilstrenge, ~19px høje og uden nogen
   mobilregel — mens den offentlige butiksflade længe har haft en rigtig
   fane-komponent (.nc-shop-tabs) med 44px tap-target og sidescroll.
   .nc-tabs er den komponent, gjort neutral: samme geometri og samme
   messing-understregning, men uden butikssidens sticky-adfærd (backoffice
   har ingen mobil top-header at hænge under) og med en AA-sikker
   inaktiv-farve i stedet for --color-stone (T1).
   -------------------------------------------------------------------- */
.nc-tabs {
  display: flex;
  flex-wrap: wrap;
  /* SCRUM-637 (ejer-fund, staging): gap-shorthanden gav 32px luft i BEGGE
     retninger, så en ombrudt fane (fx "Mine ordrer" i sælgerens 7-fane-
     stribe) lagde sig langt under de øvrige og lignede en menu nr. 2.
     Fanerne er selv min. 44px høje, så rækkeluften er der i forvejen —
     derfor kun VANDRET afstand, lodret 0. */
  column-gap: var(--space-6);
  row-gap: 0;
  border-bottom: 1px solid var(--color-sand);
  margin-bottom: var(--space-5);
}

.nc-tabs__tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* T3: tap-target, som .nc-shop-tabs__tab */
  padding: 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  font-size: var(--text-label);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--label-transform);
  color: var(--color-text-muted); /* T1: ikke --color-stone (3,57:1) */
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nc-tabs__tab:hover {
  color: var(--color-primary);
}

.nc-tabs__tab--active,
.nc-tabs__tab--active:hover {
  color: var(--color-accent-dark);
  border-bottom-color: var(--color-accent-dark);
}

/* Skillelinje i fane-rækken (UX3/SCRUM-632, EJER-1's skitse): admin-nav'ens
   "Oversigt" er HJEM, ikke den sjette gruppe, og adskilles fra gruppenavnene
   med en hårstreg. Rent dekorativ — markup'en sætter aria-hidden. */
.nc-tabs__divider {
  align-self: center;
  flex-shrink: 0;
  width: 1px;
  height: 20px;
  background: var(--color-sand);
}

/* Under-række til UX3's gruppering (17 admin-links → typisk 5 + 3): kun den
   aktive gruppes sider renderes her. Sat visuelt LETTERE end gruppe-rækken
   — brødtekst-font, ingen versaler, tyndere understregning — så hierarkiet
   kan aflæses uden at farve står alene (WCAG 1.4.1). */
.nc-tabs--sub {
  /* SCRUM-637: samme deling som .nc-tabs — en gap-shorthand her ville
     genindføre stor lodret afstand i under-rækken ved ombrydning. */
  column-gap: var(--space-5);
  row-gap: 0;
  border-bottom: none;
  margin-top: calc(-1 * var(--space-3));
  margin-bottom: var(--space-5);
}

.nc-tabs--sub .nc-tabs__tab {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-sm);
  letter-spacing: normal;
  text-transform: none;
  border-bottom-width: 1px;
}

/* --------------------------------------------------------------------
   2. .nc-form-row — "felt ved siden af en handling" (note EJER-3)
   Ejerens fund: GEM-knappen på /profile lander ~20px UNDER inputtets
   underkant, fordi formularen er align-items:flex-end og hjælpeteksten
   ligger INDE i .nc-field — så knappen flugtes med feltets bund frem for
   med inputtet. Input og knap er begge 44px høje og ville flugte perfekt
   uden den hjælpetekst.
   Rettelsen retter årsagen: hjælpeteksten får sin EGEN grid-række under
   begge kolonner, så kolonne 1's første række kun rummer label + input og
   align-items: end gør præcis hvad den lover.
   -------------------------------------------------------------------- */
.nc-form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
}

.nc-form-row > .nc-field {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  /* UX4/SCRUM-633: .nc-field's egen bund-margin ville ligge INDE i rækkens
     grid-område, så `align-items: end` flugtede knappen med feltets
     MARGIN-kant og genskabte præcis det spring EJER-3 handler om. Rækkens
     `row-gap` sætter afstanden i stedet — ellers skulle hvert kaldested
     nulstille marginen inline. */
  margin-bottom: 0;
}

.nc-form-row__action {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

/* Hjælpetekst UNDER hele rækken — ikke inde i feltet (det er hele pointen) */
.nc-form-row__hint {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin: 0;
}

/* RT1 (SCRUM-703, epic SCRUM-702, spec §5.1.4): BUTIKSNAVN & KOMMISSION-
   formularen (seller.html) havde et inline margin-bottom på selve formen
   for at give luft til Kommission-teksten under — konverteret til klasse
   her sammen med resten af formens KC0-oprydning. */
.nc-shop-settings .nc-form-row {
  margin-bottom: var(--space-5);
}

/* --------------------------------------------------------------------
   3. .nc-form--narrow — ÉT formular-mål (note EJER-4)
   Ejerens fund: mail-notifikations-kortet ser "centreret på en mærkelig
   måde" ud i fuld bredde, fordi indholdet skifter bredde midt i kortet —
   overskrift og intro løber i kortets ~910px, mens formularen er låst til
   28rem. profile.html bruger tre forskellige mål (24rem / 28rem / intet).
   Ét navngivet mål afløser dem alle. Klassen er en ren bredde-begrænsning
   og virker derfor lige så godt på kortets intro og disclaimer som på
   selve form-elementet, så alt indhold deler én venstre- og én højrekant.
   (Ikke at forveksle med .nc-field--narrow, 24rem, som begrænser ét FELT.)
   -------------------------------------------------------------------- */
.nc-form--narrow {
  max-width: 32rem;
}

/* --------------------------------------------------------------------
   4. .nc-list-row--split — reserveret handlings-kolonne (note EJER-2)
   Ejerens fund: notifikationslistens højrekant er "takket", fordi
   handlings-kolonnen kun renderes for ULÆSTE rækker og ingen bredde har —
   en læst række giver 0px kolonne, en ulæst ~180px, så tekstkolonnen
   skifter bredde fra række til række.
   minmax() reserverer kolonnen ALTID, også når den er tom. Modifier og
   ikke basis: .nc-list-row bruges i dag bart (me.html:35,
   notifications.html:165, profile.html:177) hvor et grid ville flytte
   deres børn — UX2 må ikke ændre sider den ikke retter en defekt på.
   -------------------------------------------------------------------- */
.nc-list-row--split {
  display: grid;
  grid-template-columns: 1fr minmax(var(--nc-list-row-action-width, 11rem), auto);
  align-items: start;
  column-gap: var(--space-4);
}

.nc-list-row__body {
  grid-column: 1;
  min-width: 0;
}

.nc-list-row__actions {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------
   5. Fokus-ringe (note T4)
   Backoffice havde INGEN synlig fokus-tilstand: stylesheettets fokus-regler
   dækkede kun accordion, switch, star-rating, cookie-notice og sort-select,
   og .nc-select-inline:focus FJERNEDE oven i købet den native ring.
   :focus-visible (ikke :focus) rammer kun tastatur-fokus, så musebrug er
   visuelt uændret. Ingen border-radius sættes her — ringen skal følge
   elementets egen form (fx .nc-search__input's pille).
   -------------------------------------------------------------------- */
.nc-btn-sm:focus-visible,
.nc-btn-sm--quiet:focus-visible,
.nc-icon-btn-sm:focus-visible,
.nc-btn-danger:focus-visible,
.nc-btn-delete:focus-visible,
.nc-tabs__tab:focus-visible,
.nc-table__link:focus-visible,
.nc-list-row__link:focus-visible,
.nc-search__input:focus-visible,
.nc-select-inline:focus-visible,
.nc-table-scroll:focus-visible,
.nc-table-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   6. Mobil (390px-båndet, spec §9-2a) — samme breakpoint som resten af
   stylesheettet. Står SIDST i filen, dvs. efter alle base-reglerne
   ovenfor, så kildeorden afgør ved lige specificitet.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Fanerne klemmes ikke — de scroller sidelæns, som .nc-shop-tabs.
     IKKE sticky: backoffice har ingen mobil top-header at hænge under,
     og en sticky fane-stribe ville æde af den lodrette plads der i
     forvejen er knap på fx /admin/moderation. */
  .nc-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* SCRUM-637: shorthand undgået også her — mobilstriben ombryder ikke
       i dag (nowrap), men en shorthand ville gøre base-reglens row-gap 0
       afhængig af, at nowrap aldrig ændres. */
    column-gap: var(--space-5);
  }

  .nc-tabs__tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Felt og handling under hinanden; knappen fylder rækkens bredde i
     stedet for at klemme feltet ned til ~160px (note KO10). */
  .nc-form-row {
    grid-template-columns: 1fr;
  }

  .nc-form-row__action {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
  }

  .nc-form-row__hint {
    grid-row: 3;
  }

  /* Én kolonne: handlingen under teksten, venstrestillet — retter samtidig
     KO10's fund om at notifikations-rækken mangler flex-wrap. */
  .nc-list-row--split {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }

  .nc-list-row__actions {
    grid-column: 1;
    justify-content: flex-start;
  }
}
/* ====================================================================
   UX6 (SCRUM-635, epic SCRUM-629 "UX-review af backoffice") —
   DRIFT-SIKKERHED I ADMIN
   Kilde: specs/notes/ux-review-backoffice-note.md paragraf 6 (F3, F5,
   F7) og paragraf 5 (KO5, KO6, KO9); spec specs/ux-review-backoffice.md
   paragraf 4.2.

   To nye regler. Alt andet i storyen er klasse-/attribut-skift i
   templates. Ingen JS (data-confirm-delegationen findes allerede i
   src/static/js/app.js fra WH2/SCRUM-561), ingen route roert.
   ==================================================================== */

/* --------------------------------------------------------------------
   1. .nc-danger-zone - farezone om en irreversibel handling (note F5)
   "HENT DATAEKSPORT (GDPR)" og "ANONYMISER KONTO" stod strukturelt
   identiske paa /admin/users/{id} - samme stoerrelse, samme skrift,
   samme placering, kun adskilt af en haarstreg. Bekraeftelses-dialogen
   var hele vaernet. Zonen giver den uigenkaldelige handling en synlig
   ramme FOER klikket, saa farligheden ses i layoutet og ikke foerst i
   en dialog. Roed er her reserveret til netop dette: kun irreversible
   handlinger (note KO6's regel). #8B2E2E paa #F9EAEA giver 7,1:1.
   -------------------------------------------------------------------- */
.nc-danger-zone {
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  background: var(--color-error-bg);
  padding: var(--space-4);
}

.nc-danger-zone__title {
  display: block;
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-error);
}

/* --------------------------------------------------------------------
   2. .nc-table__diff - fortegns-markering i differens-kolonner (KO9)
   REN VISNING: hverken beregning eller oere-formatering roeres (spec
   paragraf 5.1, CLAUDE.md paragraf 8 - fladen VISER penge, den regner
   dem ikke). Tallet kommer uaendret fra `format_oere`; templaten
   tilfoejer kun et eksplicit "+" paa positive differencer, og denne
   regel goer en differens forskellig fra nul synlig uden at man skal
   laese fortegnet. Nul-differencen bliver IKKE roed - den er det
   normale.
   -------------------------------------------------------------------- */
.nc-table__diff--nonzero {
  font-weight: 600;
  color: var(--color-error);
}

/* ===========================================================================
   UX7 / SCRUM-636 (epic SCRUM-629, note paragraf 11 nr. 6 - fund F1)
   Ordredetaljens ENE statusudtryk.
   Siden fortalte ordrens tilstand i tre grammatikker samtidig: label_status
   som farvet prosa i FRAGT-panelet, payment_status som farvet fed tekst og
   fulfillment_status som badge - de to sidste i INFORMATION. Tre steder, tre
   udtryk, eet spoergsmaal ("hvor er min ordre?"). Komponenten her samler dem
   i EEN raekke-liste med eet sprog: en .nc-status-badge pr. dimension plus en
   neutral note med det faktuelle (frist, frigivelsesdato, tilbagefoert beloeb).
   Ingen ny farve; noten bruger --color-text-muted, ikke --color-stone, som
   fejler AA (note T1). Markup er en <dl> - hver raekke er et rigtigt
   term/beskrivelse-par, saa skaermlaeseren faar "Betaling: Betalt".
   =========================================================================== */
.nc-status-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.nc-status-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.nc-status-list__label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  /* Fast maal, saa badgerne flugter lodret paa tvaers af raekkerne. Paa
     smalle skaerme falder vaerdien ned under labelen (media query nedenfor),
     og saa er maalet uden betydning. */
  flex: 0 0 auto;
  min-width: 8rem;
}

.nc-status-list__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.nc-status-list__note {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

/* Under 480px er 8rem label + badge + note for meget paa een linje. */
@media (max-width: 480px) {
  .nc-status-list__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .nc-status-list__label {
    min-width: 0;
  }
}

/* Underraekke der hoerer til raekken OVER den (ordredetaljens anmeld-indgang
   pr. varelinje, 6.1/SCRUM-391): .nc-table tbody tr saetter en border-top pr.
   raekke, og uden dette ville anmeldelsen blive adskilt fra sin egen vare. */
.nc-table tbody tr.nc-table__subrow {
  border-top: none;
}

/* ====================================================================
   OM2 (SCRUM-696, spec specs/om-os-side.md §5.3): billederne på "Om os"-
   siden — ét banner-bånd øverst og to illustrationer i brødteksten.
   Siden må ikke have inline styles (spec §4 OM2 AC (e), håndhævet af
   TestKildekontraktIngenInlineStyles), så al geometri bor her.
   ==================================================================== */

/* Banner-båndet mellem brødkrummen og <h1>. Bevidst BESKÅRET frem for vist
   i sin fulde 16:9-højde: en fast, clampet højde gør billedet til en rolig
   optakt til sidetitlen i stedet for et hero der overdøver den. Og fordi
   højden kommer fra CSS — ikke fra filens egen ratio — er boksen reserveret
   før billedet er hentet, så der ikke er noget layout-skift ved indlæsning
   (spec §4 OM2 AC (a)). 180px på 360/390px-mobil, op til 320px på desktop. */
.nc-om-banner {
  display: block;
  width: 100%;
  height: clamp(180px, 34vw, 320px);
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background-color: var(--color-sand);   /* rolig flade før filen er hentet */
  margin-bottom: var(--space-6);
}

/* De to tekst-billeder vises i deres EGEN 4:3-ratio, ubeskåret: flatlayet
   taber genstande i kanten hvis det klippes, og keramikerens hænder sidder
   centralt i motivet. aspect-ratio holder pladsen mens filen hentes, så
   loading="lazy" ikke giver et hop længere nede på siden. */
.nc-om-figure {
  margin: var(--space-8) 0;
}

.nc-om-figure__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background-color: var(--color-sand);
}

/* ====================================================================
   BF2 (SCRUM-699, spec specs/moms-og-salgsbilag.md §11.6): admin-support-
   markeringen på ordre-siden. Vises kun for admin (aldrig for sælgeren
   selv, src/routers/orders.py's is_admin_support_action) ved siden af
   "GENERER LABEL NU"/"FORSØG LABEL IGEN"/"MARKER SOM AFSENDT" — en ren
   UI-afklaring om at admin bruger sælgerens knapper til support, ikke en
   ny kontrol. Ingen inline styles i markup (KC0/design-direction.md §2) —
   al styling bor her.
   ==================================================================== */
.nc-admin-support-tag {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* ====================================================================
   S7 (SCRUM-757, ejer-fund 2026-09-05): "Mine salg"-tabellen (me_sales.html)
   viste en PERMANENT vandret scrollbar på almindelig desktopbredde.

   Diagnosen er vigtigere end rettelsen: det var ikke summen af kolonnerne,
   men STATUS-cellen. Den stod i .nc-table__nowrap, og en enkelt ordre kan
   bære tre badges samtidig ("Betalt (refundering undervejs)" + "Label
   afventer" + "Reserveret"). Med nowrap blev kolonnens MIN-content-bredde
   lig hele den ene linje — omkring 400px — og så kan auto-layout-algoritmen
   ikke få tabellen ned i kortets bredde, uanset hvad de øvrige kolonner gør.
   Får badges lov at ombryde, falder min-content til den bredeste ENKELTE
   badge, og tabellen passer.

   Alt her er scoped til .nc-seller-orders. Admin-tabellernes status-kolonner
   bruger stadig .nc-table__nowrap uændret (rod-CLAUDE.md §5 scope-værn), og
   .nc-table-scroll-wrapperen bliver på siden, så smalle skærme fortsat kan
   nå alle kolonner.
   ==================================================================== */

/* Status: badges stabler i stedet for at strække rækken. Hver badge er
   fortsat nowrap indeni — ellers ville "Betalt (refundering undervejs)"
   knække midt over og ligne to badges. max-width er et blødt loft, så
   kolonnen ikke tager plads fra Varer når der kun er ét badge. */
.nc-seller-orders .nc-table__status {
  white-space: normal;
  max-width: 15rem;
  vertical-align: middle;
}

.nc-seller-orders .nc-table__status .nc-status-badge {
  white-space: nowrap;
  margin-bottom: 2px;
}

/* Varer er tabellens fleksible kolonne: den klipper med ellipsis, så en lang
   varetitel aldrig presser Beløb/Handling ud af kortet. Uændret udtryk —
   flyttet hertil fra to inline styles (design-direction.md §2). */
.nc-seller-orders .nc-table__items {
  max-width: 220px;
}

.nc-seller-orders .nc-table__items > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Handlings-cellen: knapperne står højrestillet på én linje (afløser
   `style="text-align:right;"` + .nc-table__nowrap). */
.nc-seller-orders .nc-table__actions {
  text-align: right;
  white-space: nowrap;
}