/*
 * 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;
  gap: var(--space-2);
}

.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;
}

.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 {
  background: none;
  border: none;
  color: var(--color-header-text);
  cursor: pointer;
  padding: var(--space-1);
  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. */
  .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 {
    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;
  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-block;
  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);
}

.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);
}

.nc-product-card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  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;
  /* border-radius top arves fra parent (overflow: hidden) */
}

.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);
}

/* ====================================================================
   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;
}

.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 */
.nc-product-card__badge-sold-out {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background-color: var(--color-stone);
  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);
}

/* 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;
}

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

/* 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;
}


/* ====================================================================
   §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);
}

/* 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);
}

/* 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);
}

/* 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);
}


/* ====================================================================
   §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 {
  aspect-ratio: 4 / 3;
  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);
}

.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__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;
}

/* 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;
}


/* ====================================================================
   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__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.nc-footer__copy {
  margin: 0;
}

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


/* ====================================================================
   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 */

/* 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);
}

.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 */
.nc-alert {
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.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); }

/* 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;
}

.nc-list-row__meta {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-stone);
  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-stone);
}

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

/* 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); }

/* Tom-tilstands-note + side-handlinger */
.nc-empty-note {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-stone);
  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);
}

/* 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 */
.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);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.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); }

.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); }

/* 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);
}

/* ================================================================
   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;
}

.nc-admin-page__context {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-stone);
  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-stone);
  margin-bottom: var(--space-6);
}

/* Kort der omslutter en tabel (samme udtryk som Ordrer/Varer) */
.nc-table-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.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);
}

/* 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-stone);
  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 */
.nc-table__right { text-align: right; white-space: nowrap; }
.nc-table__nowrap { white-space: nowrap; }
.nc-table__muted { color: var(--color-stone); }

/* 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-stone);
  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;
}